热搜:
编辑导语:设计在满足基本的产品需求的同时,也要注意各业务线平台的设计一致性,给用户传达好正确的品牌认知。本文从使用场景出发,结合58消息中心——微聊的案例,梳理总结了建立产品一致性设计规范的几点实用方法,与大家分享。

01背景

随着58各产品线的不断拓展,58消息中⼼作为集中输送各类服务信息的载体,为各业务导流的重要枢纽及业务转化的关键发⼒点,也越来越受到关注。而消息中心微聊作为转化的主要场景,对各业务导流更是起到关键性作用。

58的消息中心主要囊括了:车、房、招聘、黄页四大业务线业务线。但由于各业务线独自运营多年,加上新的业务线(到家精选、金融等)不断加入,导致了消息中心微聊在设计上“各自为营”的现状。

02构成

前期我们对各业务线的微聊界面进行了收集整理,发现了各业务线设计质量参次不齐。

以四大业务线为例,主要存在以下几个问题:

  1. 界面元素不统一、一致性较差;
  2. 交互逻辑不一致,体验性差;
  3. 各业务线均有特殊的业务卡片,独立性强。

那么设计师应该如何去把控多业务线一致性设计?如何让多业务线产品做到具备一致的识别性与体验性?我们需要有一个通用的设计准则:一致性(整体框架、页面结构高度一致)、交互合理性(统一操作区、聚焦核心功能设计,降低用户理解成本)、灵活性(允许创新)。

03依据准则,建立规范

1. 一致性

一个微聊界面包含哪些内容?

  • 导航
  • 基础信息
  • 消息信息
  • 业务卡片

以内容为依据,我们进行了规范的创建

(1)导航栏

导航栏默认可套用公式:

  • 主标题:a/a+b 字号34px 颜色#333333
  • 副标题:c/d/e/c+d 字号24px 颜色#666666

在导航栏无法完全满足传达需求时,可通过个性化的导航栏信息来突出服务者角色属性,辅助用户业务识别,灵活适配业务展示诉求。

(2)基础信息

基础信息,无外乎常规的颜色、字体、行高、等构成页面的基础元素。

颜色:在项目中起到传递不同信号、分割内容、强调不同内容的重要程度等作用。在消息中心中,我们将颜色规范分为「类型」、「使用」两个方面。类型在实际项目中,会有一个与业务或者行业相呼应的主色(主题色&品牌色)。而「使用」时,可以根据实际所承载的内容的重要性选择使用。

文本:主要包括2块,首先是字号字重,字号主要是:18、24、26、34(单位PX),字重有三种,以苹方字体为例:1. 常规体Regular;2.中粗体Semibold。

行高:默认行高取字号的 1.3 倍,应用于标题、说明文字、标签、会话文本等无特殊行高要求时。特殊行高,取字号的1.6 倍,四舍五入取整数

(3)消息信息

微聊消息类型包括:Tips、文本、视频、语音、通话(视频&语音)、文档、位置、图片、邀请、红包。

消息状态包括:

  • 阅读状态:已读、未读
  • 发送状态:发送中、发送成功、发送失败
  • 接受状态:已接、未接和拒接

(4)业务卡片

业务卡片包括两种:1. 系统提示信息;2. 商家在对话时,向用户发送的商品介绍、个人介绍,增加双方沟通效率,用于提高用户向业务的转化。

  • 边距:卡片距离页面边距30px、内容区距离四周的边距24px。
  • 转角:取4的倍数:4px、8px、12px、16px、20px等,会话气泡与业务卡片转角统一16px大小。
  • 按钮:定义了4种风格:文本按钮、灰色描边按钮、主色描边按钮、主色实心按钮;以及三种常用状态:常态(Noramal)、按压(Press、Click)、不可点击(Disable)。
  • 图片:从两个纬度进行规范:应用与比例。
  • 应用:一般用于头像、业务卡片内的商品图片
  • 比例:将所有图片比例进行整理,得到了三个常用比例:1:1、3:4、1:2.3

2. 交互合理性:统一操作区、聚焦核心功能设计,降低用户理解成本

统一操作区,聚焦核心功能。对功能标准化设计,降低用户使用成本,提升效率与转化率。

原有卡片的排版信息分散,功能操作区都是分散的,在获取信息方面没法聚焦。优化后,将操作等有效信息集中在右侧,符合用户的操作习惯,同时也能大大提高屏效。

3. 灵活性:允许创新、自定义设计

而灵活性,允许创新主要体验在业务卡片的展示上。在大前提统一下,我们允许各业务找到一个平衡点,各业务线根据自身的需求进行定制化设计,让产品在不同业务线有更好的呈现。

04总结

除了以上列出来的规范,还有很多细节的条列,在此就不一一陈列了。在创建设计一致性规范的时候,对内容的梳理越全越好,对规则设定越简单越好,对扩展性的延展越宽越好。

当然,设计规范的创建与执行同样重要。我们期待每一个参与的同学,都能记住设计规范,并结合设计原则进行更好的呈现。通过不断的更新迭代、正向循环,最终成为一个更大生态。