一套UI设计规范

发布于 2022-11-28  76 次阅读


一、文章介绍

本文介绍的评估以及设计体系能够帮助设计师综合评价产品的表现,或者帮助设计团队用可测量的方法记录设计项目的进度。这个评估体系通常是一整套的流程,而不是一次性的测试。

二、绘制用户体验地图

作为项目的第一步,设计一款UI&UE的基础,我们需要为用户绘制一份用户体验地图。在这样的一份用户体验地图的帮助下,我们才能合理有效地设计出一款合理有效的UI。

1.什么是用户体验地图?

在开始绘制一份用户体验地图之前,我们需要了解用户体验地图是什么。

定义:用户为了实现目标而经历的过程的可视化文件,它用于了解和解决用户的真实需求和真实痛点。

在其最基本的形式中,体验地图开始于将一系列用户目标和行为编入一个基本的时间轴,接下来,将用户的想法和情绪加入到时间轴中。最后,这个故事被简化成一个用于传达信息的可视化图表,它将有助于整个设计过程。

以一款跨境电商网站举例:

用户体验地图

在图中我们通过用户调研/内部讨论等方式将用户的购物流程划分为了四个大的步骤和十二个小的步骤;在完成这一步骤后,我们将关注点放到满足三个关键步骤的点上。

个关键步骤是什么?

  1. 阶段闭环;
  2. 用户的目标和预期;
  3. 寻找触点并产出用户体验地图;

2、阶段闭环

根据实际场景,我们可以先将用户行为概括为几个阶段,再把每个阶段里的行为分解为节点,用简短的中性动词来表述,按时间轴排序。

行为节点的定义:用户在体验过程中的关键性动作(以网购为例,在线支付即为一个关键性动作)。

3、用户的目标和预期

用户在每个阶段明确要完成的目标或任务。那么我们在定性研究的时候,就应该完成提炼而不是设计或决策者的臆想。

预期示意图

4、寻找触点并产出用户体验地图

用户从接触服务时到实现他的目标之间,会跟你在产品上有哪些接触,你需要在这些地方服务用户。

用户在体验无人零售商店时分为4种触点。

1. 环境触点

用户在体验无人零售商店时,用户的感受是什么?杂乱还是整洁?用户从进门到选购再到付款,整体的感受都会随着环境的变换而变化。

2. 实物触点

用户在进行选购时,能够快速地找到目标商品吗?有没有品类标识?

3. 数字触点

在某阶段中,用户是否通过以某个APP为媒介的方式进行操作。

4. 人际触点

在进店前,用户是否需要服务人员的帮助进行了解或注册。在售后碰到问题,该怎么联系相关人员。

根据用户的预期产出用户体验地图

三、敲定视觉标准

在完成上述任务后,我们需要为产品设置对应的视觉标准,并在这个视觉标准的指导下设计产品的UI。那么在这个步骤中,我们需要关注以下的几个点。

1、符合情感的色彩

视觉元素坐标图

如果在设计中使用颜色,一定要考虑色彩的整体和谐性以及色调。

色彩明度不同,色调不同,带来的视觉感受是完全不一样的,比如红色,有的红色很个性化,有的红色很现代,有的红色比较性感。我们需要掌握不同颜色的性格特征。

这里推荐一个工具就是-色彩意象尺,它能帮你了解不同颜色的色彩情感。一般在做品牌的过程中用的比较多。在我们设计产品的过程中,我们需要做的就是按照我们或者调研中客户对于我们产品的理解在下图的这个意象尺中选取对应的颜色范围。并在上图中“拎出”我们所需要的颜色组合。并在设计产品的过程中合理得使用。

色彩意向尺

上图中的色彩意向尺能告诉你不通过颜色的情感是什么样的。在确定一个品牌色,或者配色时候都可以用到。

2. 看看竞品的色彩方向

在确认色彩的选择前,我们还需要去了解竞品的产品是如何选择他们的主色调的。这样我们就可以结合我们的品牌策略决定是否要与目标竞品作出差异化的色调。

比如发现竞品其实都趋向于红色方向,那么也可以从策略上,我们避开红色方向,最终来定出一个黄色作为整体品牌色。 

3. 根据人群喜好调整配色

配色调整标尺

在确定了主色调的方向后,我们就要思考,我们的用户比例,是男性多还是女性多,加入我们的用户是男性多,可以根据上图男女喜好去做色彩倾向;比如男性喜好色彩大胆一些配色,那么一款原定采用黄色作为主色调的软件基于黄色去做一些更为鲜亮的调整。

一个色彩的调整

调整黄色的明度和饱和度,让整体更大胆一些,最后定下来一个偏糖果玉米的黄色。

以上就是一个大概如何定义品牌色过程。

四、带隐喻且合理的图标

在完成色调的设计后,我们就需要选择图标的风格,以便于美工组更快更高效地推进工作了。

在页面中合理运用图形很重要,现在图标不仅仅是表达含义,更多时候也是设计图形的象征,图标也是有情感的。不同图形的圆角大小,质感不一样,传递的气质也会完全不一样。

为此,我们也有一套方案来帮助我们选择应用中的图标。

1.图标类型

在对图标进行分类时,普遍会遇到的问题是一个图标有多种风格;例如下面这个水滴图标,样式很简单,但可以划分到多个类别中。

一个图标的显示风格解析

面对这样的问题,推荐先对图标进行隐喻甄别:

图标按图像隐喻分类可分为实物图标、象形图标、表意图标、文字图标、创造图标、组合图标。

在此,我们将这些图标分类列出,并对其进行详细解读。

1. 扁平风格

扁平风格图标主要是由形状的描边、填充进行各种组合搭配来表达不同的含义,并通过不同的色彩体现出不同的视觉效果,最常见配色有以下几种:

  1. 单色:简洁、清晰视觉效果,常见于基础功能图标。例如:B端功能入口,移动端个人中心、二/三级页面的工具栏等,也有很多app的金刚区利用底色块衬托反白的图标。
  2. 双色:是很常见的功能性图标,至少由两个以上的元素组成,在单色的基础上加以色彩点缀,让本身就不是很突出的元素不再单调,如果融入品牌色,能提升整个界面品牌调性,适用场景跟单色图标相比则范围更广。
  3. 多色:至少由三种或以上的形状、颜色组合而成,常用于金刚区、产品分类列表、定制化菜单等。
  4. 渐变:渐变色的图标显得较年轻化,可以是单元素的渐变或多元素的渐变组合,能映射出一种活泼、热烈的氛围。例如:视频、直播等娱乐类型的APP,或车载UI等。
  5. 不透明度:调整图标中某个元素的不透明度,可在不变换色系的情况下丰富配色细节,还能与底色融合的更加细腻,解决多色渐变视觉跳跃的问题。

另外,在UI界面中,扁平化风格图标使用最多的当属线性、面性、线面结合这三种类型。

2. 拟物化风格

拟物风格的图标主要通过细节和光影、根据现实世界中的物品塑形打造出图形立体效果,非常考验设计师的造型绘制、技法表现能力。这种风格的图标有着极强的代入感,能让用户快速领会图标所传达出的意图及气质。

因为拟物化图标信息元素的高复杂度及突出的视觉效果非常抢眼,在页面中频繁出现会成为干扰其他信息的存在,游戏类应用中使用的非常普遍(不过多赘述)。在其他类型的应用中,大部分出现在营销类型的界面,例如专题页、成就榜、会员中心等。

3. 轻质感风格

跟拟物化图标相比,轻质感就不会有太多复杂的元素,主要通过各种色彩渐变、发光、投影等图层样式体现出非常柔和的立体感,整体风格偏年轻化,给人轻盈、简洁及精致的感觉。

在设计过程中,请使用干净且和谐的配色,主要使用在界面较大区域的位置。

除上述这几种风格的图标之外,还有例如2.5D、3D、像素风、新拟态……等,但在UI设计中并不常用,就不一一举例说明了。

3.性格与气质

在依照图标的使用场景以及用户风格选取图标的类型后,我们还需要结合产品的性质选择图标的“气质”。在此我们将图标分为以下几个类别。

  • 力量型:粗线条、直角拐点,给人一种力量、狂野的感觉,常用于体育、健身、机械类型的产品;
  • 可爱型:粗线条、圆角设计,看起来活泼可爱,给人舒适、饱满的感觉,在儿童、教育类产品中很常见;
  • 严谨型:细线条、直角拐点,看起来工整、严谨,中规中矩,适合政府、法律类型的产品;
  • 精致型:细线条、圆润的拐角,柔和、干净、纤细且精致的感觉,很适合极简风格的设计,在艺术、金融、珠宝等奢华类产品中比较常见。

在这里我们可以结合此前在色彩意象尺上选择的方向进行图标的选择。

在结合图标色彩与类型进行选择后,我们就可以正式敲定该用哪些风格的图标了,在这里有几个作为案例的图标作为参考

▲这一套图标使用了轻松活泼坐标中的色彩,采用线性的图标,给人感觉简洁、清晰,传递出亲和力。
▲该套图标使用了硬朗方向线上的色彩,采用了扁平风格的图标,一般在视觉上给人稳定,品质的感受,适合于金融产品。

四、在用户评估体系中评估改善产品

我们需要用到7个步骤来指定评估改善产品的方式。一旦完成了最初的体系制定,这套流程就能被反复应用在日后的产品更新中,所需的工作量也会大大减少。

用户评价的基准

1、选择要测量的内容

选择测量的内容,意思就是要筛选和确定产品中关键的指标,这些指标最好是能够反映你的用户体验质量。

评估环境

先确定你的评估环境,然后才能决定你要收集什么。你可以从以下几个方向考虑你的评估环境:

你要关注的产品和平台是什么?(网站、应用程序等)

你的目标用户群体是怎么样的?

你希望测量的特定任务或功能有哪些?

任务

找出用户在产品中需要完成的核心任务。如果你的公司没有现成的核心任务,你可以先开始汇总产品中的(高频)任务。然后对这些任务进行优先排序,并选出对用户而言最重要的5-10个功能。

事实上,如果我们在上述的用户体验地图中有做详细的调查的话,我们就可以直接在用户体验地图中选取我们常用的功能点填充到测试中。

下表列出了多种产品和对应的任务范例:

电商产品与其对应的任务范例

指标

现在你已经找到一系列的任务,你又该如何衡量它们呢?Google的HEART框架能指导你筛选出你可能需要收集和追踪的指标。下面是对HEART框架的改编列表。

HEART框架

要评估参与度是否高,那么完成任务的时间应该很长(例如,在报纸网站上阅读文章的时间很长),而作为效率指标,完成任务的时间应该很短(例如,在电商网站上快速结账)。换句话说,同样的变量(比如更长的时间)可能是好的,也可能是坏的,这取决于你需要测量的维度是什么。

你需要筛选出长期有效的测量指标,因为在理想情况下,你需要在未来几年里反复收集这些测量指标。以2-4个指标为目标,关注用户体验的不同维度(例如,幸福感和参与度)。

我们根据前文的产品任务跟踪列表,列出了一些可能的指标:

电商网站的指标信息

对用户体验进行基准评估不仅仅只是追踪数据,也是展示工作价值的一种方法。当你选择与公司的业绩指标(KPI)相对应的指标时,这就直观得多了。例如,在以减少客服成本为KPI的银行业务中,你可以通过对比重新设计前后的客服呼叫数量,来证明重新设计之后的联系人更改界面有助于减少客服成本。

2、决定如何测量

在考虑收集指标数据的方法时,你必须考虑这些方法所需的时间、预算、所涉及的研究人员能力、以及研究工具。如果你没有正确的方法,就不要做这件事,因为糟糕的数据,比没有数据更糟糕。此外,不要制定一个成本太高而无法长期维持的测量计划(因为基准评估的核心就是一遍又一遍地测量)。

在计划新的评估活动之前,先看看你的公司有什么现有的数据是你想要测量的。充分了解这一环节,并将用户体验指标与更宏观的公司商业目标联系起来,这是很有价值的。当你从其他来源获取数据时,一定要知道为什么需要以及如何使用。

对于用户体验评估,有3种有效的测量方法:定量的可用性测试、系统数据分析和用户调研。

定量的可用性测试。参与者会被要求执行产品中最主要的任务,研究人员则负责记录用户在这些任务中的表现(例如任务完成时间,成功率,以及满意度等)。

系统数据分析。自动收集系统已有的使用数据(例如放弃率和功能采纳率)。

用户调研。由用户来回答问题,反馈他们的行为、背景或建议。常见的指标有:任务轻松度、满意度评分、净推荐值等。

3、收集初始数据:建立基准线

现在,你已经确定了要收集哪些指标以及如何收集这些指标,接着就是确定这些指标的判断标准。也就是把初步收集回来的数据作为产品体验的基准。

不要着急——先做试验,收集初步的样本数据,然后做初步的分析,确保你的收集方法是正确的,看看这些数据是否能够回答你的问题。这种小规模的实验会让你更高效的修正方法,但可能会需要你放弃一些原始数据。但是,为了保证在日后更大范围的数据收集工作中得到可靠的结果,这一环节是值得做的。

在你收集第一组测量数据时,记得要考虑可能影响你数据的外部因素,并在允许的情况下对此进行规划。例如,假设你在设计一个电商网站,使用数据分析的方法来收集销售指标时,要小心和排除那些可能干扰指标的因素,如由于大范围的营销活动或大规模的经济影响而作出更改的设计。

一开始产品的单一测量指标本身可能没有什么意义,因为你手上没有什么数据可以进行横向比较。但这个时候你仍然可以与竞争对手、行业标杆或者利益相关者所制定的目标进行比较。

下面我们提供几个对比的思路:

竞品数据。假设在设计一个智能扬声器App,我们可以参考竞品的制定你的基准指标,然后再相应地从自己的产品系统中收集数据。需要注意的是,如果你不能访问竞品的系统数据,就不要将系统数据分析作为你的数据方法。

行业标杆。你可以参考与你的领域相关的外部统计信息。例如,如果你在设计一个酒店网站,你可能想要将你的净推荐值(NPS)与这个行业的平均NPS进行比较(酒店行业的NPS为13%)

说他们想要一个平均提交时间少于3分钟的潜在客户表单,那你就需要将你当前的表单性能与目标值相比较。

4、分析对比结果并改进设计

这个时候我们已经收集了至少两套数据,是时候分析我们的结果了。注意你不能用表面价值来衡量你的指标,因为你的研究样本可能远远小于你实际的用户总数。所以,你需要使用统计学方法,以确定数据中任何可见的差异是真实存在的,或是随机干扰造成的。

一般来说,解读基准指标的方式,与你的产品环境、以及你选择的指标高度相关。比如,开支报告App的任务时间与手机游戏的任务时间是不同的。接下来,我们将概述前面讨论过的测量环境,以及对研究结果的解读。

测量环境:添加和设置智能扬声器

假设我们已经结合了可用性测试和用户调研来收集任务时间、成功率和SEQ[1]。下表是我们初始设计和重新设计的指标数据汇总:

一个SEQ图

结果表明:任务完成时间基本一致的情况下,成功率和SEQ平均值都提高了。假设我们已经排除了这两个指标在统计上的显著差异。那总的来说,在新设计中,用户更加满意,更容易成功完成任务。因此新设计的版本改进是有效的!

结语

基准评估是一个很强大的工具,它可以把用户体验工作与整个公司的商业目标联系起来。这里再次总结一下整个流程:要进行基准评估,首先要关注产品中的重要任务或特性,并确定如何测量它们;接下来,选择一种合适的测量方法,允许你在有限的时间、预算和技能的情况下收集这些指标数据;收集你的第一套数据作为基准指标,重新设计产品,然后用同样的方法收集新的数据;最后,通过比较收集到的指标数据,使用产品和商业知识来解析你的结果。

希望你的数据(或者在下一个版本发布后)会变得更好,反之,你也会知道你应该把注意力放在后续版本的哪些方面了。