对于产品设计师来说，在日常工作中做的产品类型主要是两种：一是B端项目，另一种是C端项目。近些年来，互联网进入下半场，C端用户增长触及天花板，流量的红利逐渐消退。很多企业的业务由C端转向了B端。

随着企业业务的转变，作为设计师的我们，也必须跟上步伐，快速做好角色的转换。当然，想从C端设计快速切换到B端设计，或是从B端设计快速切换到C端设计并非易事。因为C端和B端产品设计存在较大的反差。其商业属性、产品定位、目标用户、设计表达、业务流程等都会有很大的不同。那么今天这篇文章，我们就一起来聊聊B端和C端产品设计的差异性。

直接进入正题，本文将从目标用户、使用场景、产品需求、产品本质及特性、产品设计思维、设计原则等几个方面进行具体对比。

01目标用户

C端：
C端释义为：Consumer，意为消费者、个人用户或终端用户，使用的是客户端。C端产品往往是直接对接一般消费者，直接为广大消费者和用户提供产品或服务。例如：微信、微博、抖音等等。

B端：
B端释义为：Business，意为企业用户或商业用户。B端产品往往是为针对这类用户开发的系统型软件、工具或平台。例如：CRM 系统、 ERP 系统、OA系统、SAAS等等。

02使用场景

C端：
它会存在于我们生活中的各种场景，而且自由度非常高，当然也包含工作场景，比如周末在家无聊刷刷微博了解下国际大事、晚上睡前打开虾米听听歌、在工作间隙打开某团点个外卖等等，因此，C端产品的用户大部分使用场景是碎片化的。

B端：
B端产品更多的是在企业版内部使用，更多的是为了满足企业相关用户在“工作场景”下完成协同工作的一些特定组织需求。

03产品需求

C端：
想很好的挖掘C端产品需求，这要求我们做更细致的用户画像，比如：用户的性别、年龄、职业、文化程度、收入水平、个人喜好等都会影响到功能设计。然后通过用户画像、同理心等方法对用户的行为进行详细分析，以发掘用户具体需求。

B端：
B端产品一般是基于现有的“业务”形态，将传统线下工作，通过程序化、系统化、信息化转换为线上产品，从而提升企业协同效率，降低办公成本。需求一般来源于产品战略定位、使用者个性需求等。

04产品本质及特性

C端：
C端产品的本质基本都是一个核心功能，例如：社交类app的核心功能就是好友快速沟通；电商类app的核心功能就是购物；视频类app的核心功能就是看视频。在核心功能之外的都是一些“增值功能”，比如评论，点赞，分享等。如果除去这些附加功能，虽然会影响用户体验，但并不会妨碍核心功能的使用。

其产品特性可简单总结为一个词-分享。在使用C端产品时，用户都希望自己的“行为”能够得到其他用户的认可。比如：对自己分享的内容进行评论、分享、打赏等。

B端：
B端产品的本质是满足用户的工作需要，而公司内大部分工作，我们几乎是无法独立完成的。这意味着我们需要和其他同事协同去完成一个任务的闭环。因此，B端产品的业务逻辑会相对更加复杂。

B端产品的特性也非常明确——即“协同工作”。处于信息化时代的企业中，几乎已没有可以单独完成而不需要协同的工作了。

05产品设计思维

C端：
在上面我们已经提到过，C端产品的本质基本都是一个核心功能。因此，在设计前期，作为设计师的我们必须对产品进行全方面的考虑。到底那一个功能是我们产品的核心?哪些功能只是锦上添花?

此外，目前市场上C端产品同质化异常严重。想要产品独具一格，就必须突出特色，坚持自身的品牌亮点，才能让用户快速记住这个产品或者品牌。

B端：
B端产品的本质则是满足用户的工作需要，协同工作。对于企业来说，更多关注的是工作效率和成本。这也是B端产品最终的解决问题方向：如何提升企业的运营效率。因此，在设计过程中，我们需要不断的去优化产品流程、调整策略等。

06设计原则

 

C端：
在设计过程中，除了要抓住核心功能外，还需要给产品增加趣味性和创意性。趣味性，也就是要给用户带来积极的正面情绪，如：能使用户感到心情愉悦，感染人，打动人，引起用户心灵共鸣等；创意性，也就是要做出与同类产品不一样的东西，而这些新东西又是解决了用户某些痛点的。当然，做这些最终的目的是为了提升流量、留存率及转化率。

B端：
B端产品的需求往往是要解决一个企业中不同角色（普通成员，管理员、超级管理员等）之间的协助关系，在设计过程中一般需遵循如下设计原则：合理的功能与模块划分、严谨的业务流程设计、干净简洁的界面设计等。

在这里，笔者整理了几个优秀的B端产品设计案例，供读者参考。

登录界面设计

C端：

B端：

都是登录页面，差别却是如此之大。站酷面向的C端用户，账号登录支持手机号、邮箱以及第三方（微信、微博、QQ）方式。对于用户来说，选择非常多，可以说是非常人性化，大大提升了用户体验。

而网易邮箱面向的B端企业客户，账号登录仅支持邮箱登录一种方式，且用户登录时还得首先确认自己的身份是普通用户还是管理员。这也说明，在设计B端产品时，得充分考虑不同角色的权限问题。

导航栏设计

C端：

B端：

导航栏的设计布局有很多方式，面向C端用户的站酷使用了顶部导航的模式，这也是最常见的主导航模式。二级导航聚合在下拉菜单里面，鼠标hover出现。这种导航方式非常直观，访客可以快速的定位自己感兴趣的模块，另外，可以很好的展示内容区域，对于访客来说，非常友好。

面向B端用户的爱客CRM系统使用的是侧边栏导航，使得导航展示更加清晰，页面之间的切换也非常方便。这种布局方式一般用于管理后台偏多，与B端产品业务复杂性密不可分的。

B端产品原型实例

当我们明确了具体的需求后，就可以动手制作可交互原型了，这样可以很好表达出整体逻辑，让客户直观的看到功能和效果，获得较真实的感受，并在不断讨论的基础上完善未来的设计思想。接下来，一起来看看我用Mockplus做的B端产品原型效果：

原型演示地址：https://run.mockplus.cn/4oEh4pCz7K9GRtlS/index.html

文末福利

最后，我为大家准备了一份小福利。

产品团队的沟通离不开原型，今天为大家推荐的原型设计工具Mockplus，更快更简单，5分钟制作一个交互原型页面。支持团队协作和在线审阅。

点击下方链接可以免费领取Mockplus的个人版15天，数量有限，先到先得。

领取地址：https://www.mockplus.cn/home/promote

小结：

虽然C端和B端产品在目标用户、使用场景、产品需求、产品本质及特性、产品设计思维、设计原则上都有所差异，但是C端和B端产品也有很多共同点，如：都要求产品简单实用和有效准确，都是为了更好的满足用户的需求，解决用户的痛点等。如果能做好以上这些关键点，无论是做C端还是B端，都会是非常优秀的产品。

转自：ui

编辑导语：你有没有设计过结构复杂、内容繁多的表单？在设计时有没有什么技巧可以化繁为简、提升填写者的体验感呢？本文作者为我们罗列出了表单设计中可能遇到的一些问题，并且提供了解决方案，让我们一起来学习吧。

距离上次发文已经快半年多了，实在是惭愧，好久没有输出内容了，看着每周增加的零星关注人数，内心更加焦灼难安。

这半年来我换了工作，也适应了新的环境，同时也在思考新的方向，估计和大多数的设计师一样，迷茫时常伴随着我。前段时间写了几周的产品体验日记，但觉得缺乏深度就没发上来，后续我将会继续写产品体验日记，完善后分享给大家。

2020所剩无多了，我也会将积攒下的一些内容陆陆续续发上来与大家分享，感谢关注，感谢阅读。哈哈哈哈

一、导语

你平时填写过的最复杂的表单是什么？调查问卷还是文档信息录入？如果一个表单字段内容巨多、结构多变、填写耗时耗力，那你将如何设计你的表单使之体验更佳？

面临的问题:

1. 业务复杂，功能较多

不知道大家是否看过法律合同之类的文件，多则好几箩筐，少也有厚厚一叠；类似的文档如果进行线上结构化，势必要同样要花费巨大的人力去填写表单，完成基础信息的录入工作。

同时，由于录入的时间不确定，流程不明确等问题，也制约着表单的填写。

2. 流程较长，操作繁琐

多个不同表单之间的互有关联又相互区别，填写的时候需要来回查看以确认信息，查阅和填写相互并行，操作繁琐。

3. 字段较多，关联项较多

几乎每一个字段都有对应的关联项，每个单选字段的不同项决定不同的内容。同时，由于字段数量，层级划分不明确，会使填写的人失去定位，产生迷惑。

二、解决方案

1. 内容分组，分步填写

根据业务内容分级，合理运用颜色、间距、字体大小、卡片层级等进行信息分级。

2. 实时保存，避免数据丢失，提供草稿功能，避免任务中断

3.字段分组，示意结构，联动项隐喻

4. 信息自动带入，节省时间

一般表单是与某项功能挂钩的，信息会在多个入口录入。因此在填写长表单的时候，如果能从系统中自动获取到数据，就可以自动为其填充，可根据业务场景，判断是否让其修改和更新。

5. 提供二次编辑功能，防止信息输入有误

一般的长表单在涉及非审批流的时候，可以让其无限二次编辑；如果是处于审批流，则需要根据业务场景限制其编辑次数或者限定其编辑规则（草稿可编辑，一旦提交则不可编辑）。

6.提供多人协作编辑功能

如果一个长表单，需要多个不同的业务域的人来填写，那么需要协同编辑，并实时显示编辑的人员信息。

同时，为了避免信息丢失和编辑错乱，在同一个表单下，同一时间应该限制只允许一个人进行编辑，等其提交完后，可允许其他人进行编辑。

7. 实时检验

前端实时校验字段输入规则，后端统一校验信息交换规则。

比如对于数字输入框的校验、电话号码的校验、身份证号的校验，应该在前端实时完成。

在鼠标离开焦点区域或定位到下一个字段的时候，提示其填写有误；这样做的目的是减少后续修改的次数，在长表单下，统一提示其填写错误会是一场灾难。

在点击保存并填写下一步或点击提交信息的时候，就需要跟后端交换数据，验证录入的信息；如果不匹配，则提示错误，并从上至下定位至相应的错误字段。

8.做好填写引导功能

要通过多种方式，引导表单的填写。

1）在开始填写之前，简要说明该表单的业务目标，大概需要花费的时间等；

2）开始填写后，关于每个字段的特殊说明，都需要标注出来。重要的要显示在页面上，不重要的就收起在注释符号中；

3）填写的过程中，切记不要到最后才告诉用户哪里出错了，重要的信息一定要提示到位，否则一旦出错，前功尽弃；

4）填写完成后，引导其下一步的操作，或者返回至列表。

9. 详情页也需要注意信息分级

表单填写完毕后的产出物就是详情页，详情页是需要浏览的。因此在设计详情页的时候，应该本着让用户浏览方便的原则去设计，需要注意以下几个点：

1）结构清晰

结构清晰是指不要讲内容一股脑的全堆在页面上，要做好信息的分类；同时，注意规划页面的层级。

2）设置快捷导航

如果一个表单是长且复杂的，那么其对应的详情页也会变得复杂和冗长，因此在页面的右侧或者顶部设置合理的快捷导航是很有必要的。

三、小细节，大体验

1. 提供快速返回顶部的按钮

快速返回顶部按钮的使用要注意场景，如果你的页面比较长，且没有分组浏览的导航，那就需要设置快速返回顶部的按钮。

但是在存在分组浏览导航和顶部悬浮标签的情况下，不建议使用快速返回顶部的按钮，因为在填写表单的时候，使用快速置顶的场景比较少。

2. 提供分组模块收起展开功能

当一个模块混杂着各种信息的时候，单纯的模块分组已经无法处理它的复杂度了，因此需要收起高频且信息量大的模块，可以合理的减少页面的复杂度。

3. 步骤提供信息填写完成度提示

步骤条可以单纯的作为步骤指示器使用，也可以作为一个表单完成度的提示区域。

4. 重要说明性文字尽量显示而非收起

在填写大量字段的表单时，阅读表单内容和填写表单同样耗时耗力。

如果我们将所有的提示信息隐藏在提示符中，一般情况下用户不会去查看；但是如果去挨个查看提示信息，则会多花费一个步骤去点击或者悬停来查看提示信息，浪费了大量的时间。

因此如果涉及到重要的提示信息，请直接展示在字段的后面，不要隐藏起来。

5. 产品内组件应该规范统一

在后台产品上，关于组件的规范统一，想必是人尽皆知的设计原则。

无论是各类平台型设计组件，还是各个公司自造的设计组件，保持统一和规范对产品设计有着重要的作用，在这里不赘述组件应该怎样规范统一。

因为无论是Ant Design还是其他设计语言，都有详尽的关于组件的定义方法，我在这里讲述一个产品设计更高层面或者更深层面的原因：

组件的规范统一并不仅仅是为了省时省力，而是为了使用户在使用的过程中达到认知上的统一和行为上的统一，在进行高频次的操作后，界面的流程或者组件样式已大致在用户脑海中形成固定印象。

因此在操作相同类的流程时，用户会有更多的掌控感，试想一下：如果你在操作人事相关的流程后，去填写绩效部分的内容时，发现一个迥异的界面或者弹窗，你肯定觉得这是不是哪里出错了，甚至会怀疑这是否是同一个系统。

目前大多数公司的管理系统经过多次缝缝补补，内部的跳转逻辑已经异常感人，界面风格也大放异彩，但是使用起来却无从下手，深感迷茫。

因此大到界面样式，小到间距大小，产品设计的规范和统一应该是最基础又不可缺少的原则。

6.庞大的信息录入，表单内部要分步填写，外部可拆分成不同的表单分别填写

对付复杂的表单，你需要解决的主要问题并不是填写方式或者页面设计，而是信息分级和结构拆分。解决了这个问题，基本上就解决了业务问题，其余部分就跟我们常用的表单一致。

将复杂度降低并不意味着减少页面的信息，而是通过设计师合理的信息划分，降低视觉上的复杂度和流程上的复杂度，这样才会达到当前场景下的“最佳解决方案”。

四、结语

随着互联网信息化的深入发展，复杂是避免不了的。

我知道大家都推崇简洁的设计，但那只是对视觉和样式的定义，而非对信息的定义。

我们所处的世界是复杂的，行业更是复杂的。信息的复杂度与日俱增，想要处理复杂的信息，就需要从复杂中寻求规律，这规律与业务息息相关。

B端360行，行行深如海，小伙伴们，我们一起慢慢修炼吧~

 

文章来源：人人都是产品经理           作者：米兰小铁匠

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

       看到知乎上的一个问题：如何找到一家好的高端网站设计公司？

       把回答的内容也转过来记录一下。

       首先回答：何为高端？



       高端与低端是对应的，目前网站设计，中低端基本是用模板改改，相对价格低，有一些小型公司或不依靠网站运营收入的公司，“有个网站就好”，所以可以用这种低投入，内容有就行的网站建设公司，特点是马上就能用，三五天把内容发布进去就可以。备案可能需要一定时间。



       高端设计公司，一般是量身定做，为企业做网站策划、分析，按照用户研究、网站建站的目的来进行网站的定制栏目页的设计。做竞品分析、研究对方的优缺点，设计的色系和企业标准色、情感表达、人物场景、用户体验思维，越深入，思考越成熟，做的网站品质越有保障。所以需要的时间、精力、投入相对多。



       因为投入相对多，所以经营业绩好的企业、集团公司、营销类大型网站来定制的比较多。



       我们公司“北京蓝蓝设计”就是为定制的高端企业用户、政府网站、软件公司来服务的。我们挺喜欢要求高的客户，这样能体现出专业设计的水平，这也是我们和其它建站公司区别开来的地方。



       我们主要是给大型软件公司平台、系统做UE、交互设计、视觉设计，用户体验优化，这个，比网站设计更难，更专业。 往往一个公司的核心产品，值得把精力金钱投入到上面，产出最大的回报。近年来，除了做软件UI，大屏大数据可视化项目外，我们也扩展了“愿意把公司网站做成核 心产品”这样的公司成为合作伙伴，更好的为客户提供全方位的服务。



       一旦成为我们的客户，设计无忧。

       我们一定会把该做的事做好，并提供超值服务和额外附加值的。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

本篇文章将分享Web端表单体验优化等相关内容，分析设计师在设计B端类产品时如何让用户愉悦并的填写表单。

表单作为基础通用组件，也是在各个企业级中台中出现频率最高的元素之一。在用户界面中表单无处不在，比如：用户注册登陆页、支付页、用户反馈、共享信息数据录入等不同类型的表单。当我们使用/设计表单页面时看似是按钮、输入框等表单组件进行组合搭配使用，看似简单，但是在实际业务使用中却有着无数可推敲的细节冒出来，常常给设计师造成较多的困扰。

那么在实际工作中哪些内容会给设计造成困扰呢？举几个例子：在实际的业务中很多产品因为业务导向需要入海（非中国区方向），所以就存在表单标签对齐方式问题，如果右对齐可能在中文的情况下表单标签预设宽度正好合适，但是当用户切换到多语言时因为语言差异会导致折行严重等一些列问题，相当影响体验；设计师常常疑惑表单标签是顶部对齐、右对齐还是左对齐，他们的差异点在哪呢？必填与非必填项以什么形式告诉用户会更加合理呢？表单按钮放在页面哪个位置体验会更佳呢？

所以我们不能忽视这些设计细节，往往一些好的设计细节提升总会给用户带来不一样的用户体验。针对以上这些举重若轻的问题我们一一明确、抛出并与大家一起来进行由浅至深的探讨「如何提升表单体验」。

重点概览

一、表单分析

二、体验与优化
三、排列与布局
四、写在最后 

表单分析

1.1 表单的重要性

在上面的前言中也提到了表单作为基础通用组件，也是在各个企业级中台中出现频率最高的元素之一。并且在《Web Form Design》一书中 Luke Wroblewsk 也提到了“表单决定了最关键的界面中交互的成败”，当用户使用网站时会有一个特定目标，如果设计得好，网站将实现有效性。效率、用户主观满意度以及特定用户在特定使用环境下所达到的特定目标，也是设计师想要达成的最终目标。表单往往是目标用户和整个产品的一所桥梁。因为，尽管人机交互的发展进步，表单仍然是用户在网络中进行交互的主要方式。所以表单是被认为完成目标的最终，也是最重要的阶段。

我们以淘宝来举个典型的例子，淘宝属于国民电商平台也是亚洲较大的网上交易平台，提供各类优质商品。从平台的特性来讲，它以用户下单并成交作为最终目标。其中支付表单起着一个关键的作用，用户从购买到支付完成以分步形式进行，第一步填写基本信息并提交订单，第二步选择商品并选择支付货款至第三方，第三步买方确认收货并自动打款给商家，第四步完成订单并评价。在填写表单时中间没任何阻断，用户能很顺利的按步骤完成订单。淘宝支付表单属于比较典型的分步表单。

1.2 拆分表单

我们简单提一下表单组成（网上有很多详细的相关文章），一个完整较复杂的表单是由7个基本组成部分，表单类别、表单标签、表单基本组件、占位提示、帮助信息、按钮、校验。表单可以包含以上组成部分，但不是一定都要有，比如：移动端填写验证码时为了减少用户操作，当用户填写完成之后直接提交表单验证。

表单类别：第一时间告诉用户此段落的表单大致内容，减少用户理解并承担着概括内容的作用；

表单组件：包含了输入框、下拉框、日期选择器、时间选择器、开关、上传等十几种类型，是形成表单的核心内容；

表单标签：表单标签承担着对输入项或设置项的解释作用，所以表单标签需要合理设置，核心点是帮助用户快速理解每一项字段的作用；

占位提示：使用通用的认知提示并且以较弱的方式呈现给用户，用户填完信息即消失。注意：占位提示不能替代标签，因为消失的占位提示会拉长用户的短期记忆，如果没有表单标签用户将无法在提交表单前检查他们填写的所有信息。文章下面会详细分析。

帮助信息：当表单标签不足以对输入项准确说明时，这时候需要使用文本提示用户。它不仅能让用户提前感知输入后的样式，还能够有效的告诉用户该如何输入以及表单提交后达到的目的。

按钮：当用户完成信息录入时，按钮能够对表单内容进行校验或提交。

校验：对用户信息录入内容进行校验并给出对应的错误提示。如：内容是否为空、类型格式是否正确、是否符合业务逻辑等等。校验时有两种规则，分别是使用即时校验（失焦即校验）和点击提交按钮以后的最终校验。状态分别为错误、警示、成功。

1.3 表单类型

基础表单

较为简单的一类表单，把所有表单字段平铺在页面中，字段内容较少。当用户输入少量信息即可完成一个简单快速的任务。例如：此类型表单常常用在简单的登录注册中。

分步表单

较为复杂的一类表单，把一个相对复杂的表单字段拆解为多个步骤进行。根据业务属性进行步骤分组利用步骤条告诉用户所完成的流程和进度，当用户每次填写都意味着一次节点完成，整个流程结束给予明确的结果反馈，并以提交成功为最终。分布表单有利于减轻用户由于表单大而复杂的造成的填写负担，并且能减少用户表单填写出错率。

分组表单
 将一个复杂表单拆解归类分组。分组表单与分布表单特点较为相似，都可以减轻用户因为表单大而复杂的造成填写的负担，并且能减少用户表单填写出错率

体验与优化

1.1 必填项or可选项

在设计表单时大多数设计师都习惯性的使用星号表示必填字段。但那么问题来了，针对必填项和可选项用那种形式才是最科学的呢？我们简单分析一下。

当表单中的必填信息多于非必填信息时，如果使用红色星号表示必填项，那么大量红色星号导致增加用户的认知负担，使得用户无法快速识别哪些是必须填写的，哪些是不必须填写。并且使用红色星号会带给用户一些恐惧感，它增加了出错的风险并降低了表单填写率。因此在表单设计中，当必填项多于非必填项时，隐藏红色星号标记，通过暗提示标记可选项的形式来帮助用户识别。

红色星号对于不同用户也会存在不同的认知差异。对比较有经验的用户可能表意较为明显，但不代表所有用户都能理解，比如一些非中国区用户使用国际化产品时存在不同认知，因为每个国家本地化差异较大导致认知差异。

还有一点是表单中视觉噪声越少可读性越强，因此当必填项多于非必填用非必填字段提示用户会更好。

1.2 单列布局or多列布局

多列表单字段会导致用户视觉路径变长，因为如果表单中有水平相邻的字段，则用户必须以Z样式进行视线扫描，整体的效率和工作量都更大，使清晰的路径变得模糊并加长用户阅读时间。多列表单可能会存在用户跳过他们实际要输入的必填字段，将数据输入到错误字段中。而最终校验信息时用户得反复检查错误项导致用户放弃填写。

如果表单使用单列，则完成的路径是页面垂直向下的一条直线，单列布局能够给用户呈现一条清晰的视觉路。因此，表单较为简单时尽量避免将表单分成多列，在业务场景允许的情况尽量使用单列（部分业务诉求和一些特定场景要求，多列布局会更节省垂直空间，但是多列布局需要考虑字段之间的关联性，这里不强求一定只能使用单列布局）。

1.3 将复杂的表单分为几个简单的步骤

在设计师设计表单时可能业务场景复杂、字段较多，即使设计师把很多不必要的字段都删除也解决不了根本问题。所以，这时候设计师需要将大型任务分解为一系列较小的任务，使得表单更加的简洁。这种方式的好处是能将步骤以视觉的方式传达给用户数量、名称、说明等信息，更加提高用户满意度并且能激励继续填写。

但是设计师需要注意的是不要太过于细化步骤以及在小型弹出窗出现过多的步骤，过多的步骤不利与用户填写和记忆，反而增加用户负担。

1.4 按钮的位置

按钮放在页面左下角比较好还是放右下角比较好？这是设计师在设计表单时常常纠结的一个问题。其实在14世纪西方活字印刷术的发明人约翰·古腾堡提出一个概念古腾堡法则（Gutenberg Diagram），又称对角线平衡法则。它指出用户在浏览页面或一些布局时，视线往往趋向于从左上角到右下角进行扫描。左上角是第一视觉落点区（主视区），而右下角是最终视觉落点区（终点区）。与之相对，右上角和左下角则是视觉盲点。用户的视觉移动端规则是从上到下，从左到右。

所以，界面中的左上和右下是用户视觉最为重点关注的位置。遵循古腾堡法则，设计师应该把界面的关键元素放在主视区，终点区可以放按钮、强提示，盲点区可以用来放一些相对次要的内容，如辅助图形、文字信息。

同理，表单中会出现组合按钮，比如：取消与确认、提现与充值。根据古腾堡法则，用户使用界面时从第一视觉落点区是主视觉区(Primary Optical Area)，最终停留在结尾的终点区(Terminal Area)。

如下图是一个弹窗类型的表单，如果根据业务诉求确认操作重要程度强于取消操作，那么确认按钮应该放在取消按钮的右边。因为确认按钮放在右侧(终点区) 用户关注度会更强。

1.5 占位提示避免代替表单标签

常规的占位提示作用是使用通用的认知提示并且以较弱的方式呈现给用户，当在字段中填入内容这些提示通常会消失。

设计师常常遇到表单字段较多并且页面空间有限的情况，为了减少横向节省空间设计师常常的做法是将表单标签删除，使用占位提示文本作为信息提示。但是设计师必须有意识知道到这种方式适合使用在较为简单的表单中，比如：表格中点击修改名称操作，弹出气泡并且气泡中只存在一个字段。或者是在用户非常熟知的登录注册等较为简单的表单填写时使用。但是当用户需要填写大量字段信息时不建议使用占位提示代替表单标签的方式。原因有两点：1. 当用户选中文本框填写时，占位内容即消失，这时候用户无法检查并确认其所写的内容是否符合预期。2. 当用户看到文本框中已经回填内容了，误认为占位提示是默认回显内容，造成内容已经填完不需要再操作的错觉。

针对上面问题也不是没有解决方案，在Material Design中有提供针对上面的问题的解决方案，我们这边暂时称其为“浮动标签”，默认情况下输入框内显示占位文本，当用户输入内容以后占位文本浮动到内容上方与内容左对齐。 

1.6 校验反馈及时并准确

设计师通常认为用户在填写表单时能够很顺利的完成表单录入，但事实相反。在实际的使用场景中，特别是在一些业务较为复杂的表单中用户极易发生错误，这时候需要需要明确的校验信息、准确的校验时机、输入的限制提示。

错误提示校验

错误校验提示一般存在于错误率较高情况下出现，如：在登录注册时，要求用户填写手机号，如果用户输入的手机号码不符合特定的输入格式，那么这时候需要明确标记错误原因，准确的帮助用户找到问题并解决，避免错误提示描述模糊不清误导用户。错误提示一般会采用“双重视觉强调”来显示错误，除了输入框突出显示外，同时需要在输入框下方加入红色指导文字。如下图所示为西瓜视频登录注册场景下的截图：

限制与格式提示

在表单中如果出现特定格式时务必要提前告知用户。可以在输入框中显示概括回答的方式引导用户，如：请输入日期，eg：mm/dd/yy。这样便于帮助用户提前感知，减少表单填写错误率。

校验时机

为了避免用户在提交时表单时出现大面积的报错问题，设计师可以使用实时校验的交互形式。如：在用户输入完成之后鼠标失焦后进行信息校验，但是需要注意的是在实时校验时避免用户还没有输入完成即出现校验误导用户，所以需要准确判断鼠标是否失焦。如下图所示为西瓜视频登录注册场景下的截图：

1.7 字段长度与输入预期成正比

在实际业务中，设计师常常习惯把每个表单字段都设置成相同的宽度，在视觉效果上看感觉会比较统一，但是这种做法实际上体验欠佳。字段的宽度应该向用户暗示所需输入内容的长度从而减轻判断负担。在Ant Design 4.0 系列分享的文章《整齐划一？不如错落有致》中分析到错落有致的排版表现似乎比整齐划一的左图更舒适，因为在视觉上我们更容易将右图的空间和内容视为一个和谐的整体。但左图过度的对齐导致暗示隐性的截断，我们惯性视觉会产生表单字段右侧空间缺了一大块的错觉。

文章总结到“表单宽度的处理方式核心旨在解决两个问题：1. 暗示填写内容长度；2. 表单项布局排列效果，我们通过设置合理的默认宽度尺寸和描述关系，就可以让设计师们跳过部分繁琐磨人的细节思考，快速搭建表单宽度合理且舒适的页面。”如下图所示：

排列与布局

1.1 定宽or自适应？

表单做定宽还是做自适应？哪个“更好”的这个问题时常困恼着我们。其中Button、Radio、CheckBox等本身是定宽组件还好，它根据内容自适应即可，但是当遇到Select、DataPicker、Cascader等类型时就会开始纠结这个问题。在实际的业务中不论是做理想中的定宽还是自适应，很多情况下浏览器窗口大小不一可能导致在一些极限情况下都会产生不尽人意的情况。脑补一下，比如：在笔记本的小屏幕下左对齐并定宽效果还不错，但是当你把页面呈现在较大显示器下，这时候页面右侧又会呈现出大面积的空白。参考AntDesign提供的典型页面以下三种样式是都会造成不同的反面效果。

所以在实际业务场景中如果没有明确自适应和特定自定义宽度的需求时可以通过以下几种方式处理。

将关联性强的字段分组
如果页面横向宽度足够大时，可以将一个区域中字段较多、并具有关联性字段进行分组，这样不仅有利于空间布局上的利用，还可以通过字段之间关联性暗提示帮助用户更好理解。格式塔心理学中有多种分组原则，可以使字段之间具有相关性：接近度，相似度，连续性，闭合性和连通性。将非结构化字段分组为几个机构化的集合提高表单的可用性。

设置字段宽度梯度

可以给字段设置几档宽度梯度的尺寸，我们可以站在AntDesign这个巨人的肩膀汲取一些相关经验，其中4.0系列分享的文章中总结到其经过对十几个业务线梳理，将组件宽度定义了5中高频的空间尺寸，分别是： XS（80~160px）、S （160~280）、M（280~360px）、L （360px~480px）、XL （480~560px）。根据原理，我们可以假设原子宽度XS为100，那么通过尺寸的倍数+间距的方式来计算其他的四种尺寸（间距暂定8px情况下得到：S=208px、M=316px、L=424px、XL=532px），通过此计算方式也是用来解决视觉对齐规则，如下图所示：

1.2 表单标签顶部对齐or右对齐or左对齐

在设计表单时到底是左对齐、右对齐还是顶部对齐呢？这个问题也是在实际业务中设计师发问频率较高的一个棘手问题。其实，不论是哪种方式都有相对的利弊，需要根据实际业务场景提供不同的解决方案。在Matteo Penzo《Label Placement in Forms》文章中有分享过关于表单标签放置的研究，下图是Matteo Penzo研究总结得到的浏览时间表：

表单字段顶部对齐

将表单标签放置在其对应输入字段的正上方，并垂直左对齐排列，用户只需依次向下浏览即可看到标签与输入字段两个元素。其优势是横向屏幕空间足够，能够比较友好的适配多语言适合非中国区业务表单使用。并且根据上面Matteo Penzo的时间表上看，顶部对齐的浏览和填写的效率也是3种常规的对齐方式中较高的一种。不足点是会占用较多的纵向垂直屏幕空间，此外应当注意每组表单标签和输入字段与其他字段组的间距，以免层级区分度不够的问题。

表单字段右对齐

将表单标签放置在其对应的输入字段的左边，标签右对齐。其优点减少了占用屏幕的高度，并且表单标签与输入字段关系较近，所以用户在填写表单时效率较高。不足点是由于表单标签的字数不可控（特别是针对非中国区业务时，多语言切换可能会出现超长的文案，甚至出现折行的情况），可能会造成左侧参差不齐的问题，导致可读性不高用户在查看表单时比较费劲，并且不太适合非中国区业务。 

表单字段左对齐
将表单标签放置在其对应的输入字段的左边，标签左对齐。表单标签和输入字段距离较远，用户从左至右浏览时间变长，并且根据上面Matteo Penzo的时间表上看，左对齐的浏览和填写的效率是3种常规的对齐方式中最慢的一种。但是，如果业务需要用户对表单放慢速度并谨慎填写（复杂表单或者表单中含有大量高级设置的陌生数据时），左对齐的方式会减少部分用户的出错率。但不太适合非中国区业务。

1.3 表单布局类型 

常规布局（简单）

 在实际业务中当表单字段较为简单时可使用，表单字段至上而下单列排列布局，用户只需纵向阅读填写，填写完成率较高。

多列布局（较复杂）
垂直空间有限并且表单含有较多填写字段的复杂表单时，可将具有相关联字段放在一个卡片区域中进行归类，将多个字段组合在一行，形成多列排布的暗提示帮助用户更好理解。

区域分组布局（复杂）
表单含有较多填写字段的复杂表单，可将具有相关联字段进行分类并以标题区分的形式进行字段分组，并且表单字段都在一个卡片区域内。

卡片分组布局（高复杂）
卡片分组布局一般用来处理高复杂类型表单。当业务中希望页面承载众多表单字段时，可将信息相关性弱的字段拆分为多个部分，并通过多个卡片分组承载不同类型字段，每个卡片都需有个卡片类别标题。 

 

写在最后

本篇文章从分析表单在产品中为何如此的重要，总结了在日常工作中设计师常常遇到的表单类型和布局，设计师可通过文章中的建议和案例进而合理的选择并灵活应用。以及在实际的业务应用场景中设计师如何规避和注意一些设计细节进而提升表单的体验。文章通过一些案例进行分析，希望大家能够通过此篇文章更多的是受到启发（而不是限制），能够在日常工作中灵活应用并举一反三。这里需要强调的是作为产品设计师不论是表单设计还是全局的页面设计，都需要有理解业务本质的能力和全局的业务思考能力，不然常常会被称之为“喂，那个画图的设计”。

文章来源：tob.design

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

一、导航的定义

牛津词典上有对Navigation一词在互联网领域的解释：

the way that you move around a website or the Internet when you are looking for information

翻译为：你在浏览网页时四处移动寻找信息的方式

也就是说用户看到的，影响其寻找信息的因素都可视为导航。

二、为什么需要导航

交互上：

用户在使用传统方式阅读时，所处的空间是单向的，只能向前或向后翻页；

而在网页领域，所有的内容都存放在各自的URL里，信息在多维度多空间里相互交错，各有联系，可跳跃的阅读方式让用户很容易失去位置感。

试想一下我们在大型商场里晕头转向的场景，会常常抱怨其导视系统的糟糕，网站有过之而无不及。

业务上：

从潜在用户想要了解某个产品时，导航就开始起作用了

影响点击量：网站排名高低，搜索带来的点击量

影响转化：网站的易用性，访问者转化为潜在客户和客户的概率

设计者创造易用的表单，展示有用的信息，建立流畅的交互，这些都要靠导航来引导用户达到。

三、从信息构建模式给导航分类

1.内容

内容涉及到的东西很多，内容之间的相互关系也不确定，因此不同内容导航需要不同的导航模式

1）种类

不同行业，不同业务重点对内容的分类方式不同

种类可以是符合大众认知，具有并列关系的信息，

也可以是按照设计者的意图创造出的种类，并区分其优先级

种类导航的出现无形中建立了用户心中对某类产品的预期信息架构，使其在浏览信息时更有方向性，例如在浏览一家服装店铺时，用户在进入导航列表前就对种类有了预期，诸如男士上装，男士下装，女士上装、女士下装、配饰，包袋等。

2）字母

以字母顺序排列信息。适用于信息量超大，且不存在主次、重要级关系的内容。常见于联系人列表，地区导航，介绍人名，合作伙伴等场景。

3）自然属性

以时间，地理位置等属性组织信息架构。

时间：展示在一段时间内发生的事情，以时间为导航可以直观地感受到信息的变迁，立体感更强。例如一个企业的发展历史

地理位置：展示在不同地理位置的事件信息，空间感更强

2.层级

也叫做结构导航，根据信息的上下级关系、主体信息架构等因素将信息有序排列。分为全局导航和局部导航。

全局导航往往指页眉和页脚，存在于网站的大部分页面，便于用户随时跳转。 

页眉：用户进入网站关注到的点，将网站进行功能分类后，将导航文字放置在页眉上

页脚：此空间是为隐私和法律链接保留的，还会加上联系方式，也有许多内容繁重的网站会把站点地图放置在页脚。

雅各布·尼尔森把全局导航在网站中的作用形象地比喻为机舱座位下的救生衣 ，你只要知道它哪 ，而不必时时关注它，需要时立即找到穿上即可。

局部导航是是更深层级的导航，不作用于全局，存在于特定的功能区，可分布在页面各部分。

3.功能

业务上必要的一些功能入口，通常贯穿全局，例如很多网站的个人信息，用户需要在大部分时刻都可直接接触到该功能。根据用户的心理模型，这类功能会存在于页面的右上角。

4.搜索

用户使用较多，也是最重要的导航方式之一。当带有明确的目的性或无法通过内容，层级导航找到想要的信息时，用户会在搜索框内尝试输入一些信息。

而让用户主动搜索会出现下面的情况：用户无法清晰表达或错误地表达其想要搜索的内容，导致系统无法匹配上对应的信息，

为了让搜索导航更有效地发挥其作用，出现了自动填充，模糊搜索，推荐搜索，搜索历史，搜索纠正等一系列导航功能，这些功能都是为了想办法将用户引导到他可能需要的页面上。

5.网站地图

以类似地图的样式来展示网站页面之间的层级关系，并提供相应的链接。可视性强，便于用户找到想要的信息。

四、导航的常见样式

1.文字与图标

考虑到排版布局，样式美观，除了用文字本身的含义用作导航外，图标也经常被用作导航，分为纯图标导航和文字+图标导航，这里图标的风格会很大程度上影响这个页面的视觉效果

2.横向导航

将导航文字横向有序地排列，独立性强，占用空间较少，可放置的导航条目有限，但这个局限性也可以成为优点，它要求设计师创造出简短，易于理解，且满足业务需求的标题。

当内容过多时会选择在单个导航下放置下拉显示二级导航，下拉显示的二级导航可以很长或采用滚动显示的方式，这种临时的模态导航可以最大限度地利用到屏幕空间。

很多网页的横向页眉导航会保持滑动时固定的样式，便于用户时时找到主页面的入口。

3.竖向导航

占用空间较多，通常放置在页面左边位置，用不同的底色或分割线将其与主内容分开，内容文字一般采用左对齐，便于阅读，导航层级过多时会采用点击展开的样式，上下滚动的常用交互也让竖向导航容纳的内容更多。

部分竖向导航是可隐藏或收缩的

4.混合导航

在拥有复杂信息的网页中，会将横向导航，竖向导航等其他样式混合使用，

5.面包屑

面包屑导航是位于页面顶部或底部的一行内部链接，在不同层级的链接之间用“>”分隔，可让访问者快速返回上一版块或根网页。许多面包屑导航都将内容最宽泛的页面（通常为根网页）设置为最左边的首个链接，并在右侧列出更具体的部分。

占用很少的空间并提供主导航实现不了的深层次定位功能。

面包屑的使用让网站的结构更加清晰，强化用户的心理层级模型，并实现跨层级跳跃

6.分页与无限滚动

分页显示的内容数量固定，有时用户可自定义内容数量，此外页面上通常有当前页，任意页，上一页，下一页，首页，末页的链接。具有定位性，当用户需要回到之前浏览过的某个位置时，可采用分页的形式

无限滚动希望用户只注意当前页的内容且不能快速到达页面的底部，适用于无法预测用户何时能够找到需要的信息的情况。在一些图片展示，内容推送的网站上设计者不知道用户想要的内容，同时也要展现网站内容丰富，资源库深不见底的特质会采用交互上更简单的无限滚动模式。

7.突出的版式

一些设计者想要用户优先注意到的内容，会采用突出的版面设计，通过改变文字图形的大小，颜色等与其他一般性内容形成对比或使用海报，弹窗等形式试图引导用户行为。

五、导航设计的建议

根据上面第三和第四点，分别从信息层和表现层给出导航设计的建议

信息层

1.信息结构尽可能扁平

多花一些时间去考虑信息体系结构，可根据首页规划全局的导航，首页是用户在网站中导航的起点，考虑如何让用户尽可能方便地从网站上的宽泛内容（首页）转到他们所需的更加具体的内容。

2.重视导航的顺序

当同一级别的导航数量很多时，顺序变的更加重要。根据用户的认知习惯，开头和结尾作为关注度（看到的）和保留度最高（刚刚发生的）的地方，其内容更加突出。

3.SEO优化

良好的网站导航结构可以帮助搜索引擎了解哪些是网站站长认为重要的内容，尽量用一些具体的描述词语而非大而宽泛的词汇，例如“产品”，“服务”。虽然搜索引擎的搜索结果是在页面级别提供的，但它也希望了解页面在网站这个更大层面上的角色。导航中关键词的使用会影响其在搜索引擎中被搜到的质量。

4.创建网站地图

用于显示网站结构的一个简单页面，通常包含网站页面的分层列表。如果在网站上查找页面时遇到问题，用户可能会访问此页面。此外搜索引擎也会访问此页面，以便使抓取范围尽量覆盖网站的全部页面。

表现层

1.一致性

同一类型导航的视觉表现与交互操作在整个网站页面中要保持一致，清晰一致的导航可以让用户预见每一步操作的结果。

2.清晰性

颜色与大小：文字颜色与背景颜色的对比，标题与内容的字号大小，这些最基本的元素直接影响导航的清晰度

留白与装饰：与平面设计中原理一样，留白让网站页面布局平衡，张弛有度；装饰与留白相结合，让导航表现得更精美，也有助于视觉分割

强调与弱化：有些导航起引导作用需要突出，有些起辅助作用需要弱化，强弱对比结合丰富了视觉层次，并让导航起到它该起的作用

3.凸显超链接

将可点击的超链接文本与常规文字在样式和交互上进行区分，常见做法有下划线，文字颜色，加粗，鼠标悬浮变色。

4.在常规位置放置导航

网页发展的几十年让用户对网页产生了一些常识性认识，例如用户会在进入一个网站时去页眉或侧边栏寻找主导航，尽量遵循这些常规用法。

5.导航数量不宜过多

无论是全局或局部导航，数目越多用户处理和记住信息的难度越大，可以通过分组分层来提高信息浏览效率

6.侧边栏

侧边栏导航会占据一部分的屏幕空间，将其与主内容部分进行分割有助于用户，例如用反差较大的背景色形成导航区与内容区

加入导航收缩功能，以便更好地利用屏幕空间，特别是在一些小尺寸屏幕上。

六、导航设计审查：

在做完网页设计后可以根据浏览网页的一般习惯，通过以下几个方面对导航设计进行简单审查

问自己以及团队其他成员以下几个问题

1.这是什么网站

2.网站有哪些主要内容

3.导航看上去是否像是导航，可点击的

4.导航的名称是否会引起歧义

5.现在处在网站的哪个层级

6.如何进退

7.具体的功能是否会在预想的地方出现

8.怎么进行内容搜索

借助工具

9.使用Google Analytics对网站的访问情况进行回顾并进行一些评估

例如一些页面的浏览量极低于预期或相较于同类页面浏览差距过大，就要考虑是否是指向该页面的导航出现了问题。

总结

导航的最终目的是简化获取信息的过程，具体以何种方式表达还需要取决于业务内容，但总体上要以用户易接受的方式呈现。用户若是能在获取信息的过程中按照设计者所想的方式前进并感受到畅通无阻的快感，导航便是成功的。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

    对于许多公司和品牌而言，使用带有含义的动物logo，能非常准确的传递品牌信息！比如说豹子的敏捷，狮子的勇猛，长颈鹿的优雅，独角兽的神秘等等！这种品牌意识在其徽标中使用动物象征来策划。根据所选动物的类型，品牌是强大，快速，奢华，关怀，神秘和许多其他情感。

在我们设计UI有所疑惑时，可以参照以下标准做法。

这些做法并非一成不变—我只是列举出这些方法，相信它们可以对你的日常UI设计工作有所帮助。

我们需要记住一点，设计其实就是跳出框框思考，这意味着，有些时候我们要打破陈规。所以，对我的建议也不要全盘接受。

 

1. 设计时使用密度像素（dp），而非像素（pixel）

图中的像素值是密度像素值的三四倍

密度像素是屏幕上每一英寸所包含的像素个数，简称PPI（Pixels Per Inch）。dp（density-independent pixel）是密度独立像素，也写作dip（也有device-independent pixel之说，设备独立像素）。

设计界面时，建议大家基于设备的密度像素，而不是像素。这样可以保证我们设计出的图标素材比例适当，适应不同尺寸的设备。

举个例子，假如我们以密度独立像素dp为单位，设计了一个 200 x 50的按键，那么这个按键在160ppi的屏幕上的尺寸是200 x 50像素，在320ppi的屏幕上的尺寸则为400 x 100像素，即原尺寸的两倍。

因为有些屏幕的单位英寸的像素数量要比其他屏幕多，即ppi分辨率大，为了保证设计的图标在不同分辨率的屏幕上都一样大，设计师通常只是设计一个尺寸，导出2x、3x、4x的尺寸。

iPhone XS Max的屏幕尺寸是414 x 896。但这里的单位并不是像素，而是点的个数。论像素，则是1242 x 2688 px。知道了这些，给iPhone XS Max做设计时，我会以414 x 896个点为尺寸做设计，而后导出3x的图标素材。

 

2. 间距使用8的倍数（8dp）

为什么UI设计的间距都是8的倍数而不是5的倍数呢？这里有一个简单的解释—如果一个设备是1.5x的分辨率，我们就没法导出一个奇数。

另外，现代主流的屏幕尺寸都是以8为单位，以8的倍数做设计可以很好地适应这些屏幕。

以8的倍数设计可以保证设计的一致性。基于这种惯例，大家在进行设计工作时不用再猜测间距的数值，每个图标都可以完美地与其他图标对齐。

有关这个话题的更全面探讨，请参考Bryn Jackson的文章《八像素网格设计》。

 

3. 删减元素容器的线框

我们在设计的过程中应该时常将自己抽离出来，审视界面中这些作为元素“容器”的线和框是否让界面显得过于杂乱，是否应该予以保留。通常这些用以区隔界面内容的线和框可以被边界留白代替。

我们设计的大部分元素都存在于线框里，简单清除掉这些“容器”可以让界面看起来不那么拥挤—给元素更多呼吸的空间。

 

4. 无障碍设计—重视对比度

善用对比度不仅仅是为了让用户的注意力集中于重要的信息，更是为了使产品更容易访问/使用。

设计产品就好比建设像图书馆、学校一类的公共场所，它的适用对象需要涵盖每一个人，包括失明、色盲和视障用户。

Web内容无障碍指南（WCAG）要求文本或文本图像的对比度至少为4.5：1。

为了保证设计达到该标准，我们可以下载Stark这款插件来检查设计是否是无障碍的。

 

5. 基于用户习惯，设计用户体验

为什么有些图标元素会被公认为标准？原因有多种。

假如你把一个按钮设计成圆形，那么当我们需要一个（字数较多的）“Start Free Trial”按钮时，它就会不必要地占用界面中竖直方向上的空间。

另外，用户期待的是与其他产品相似的体验。如果你设计的网站、APP或软件与用户的既有习惯相悖，那么这样的体验是不直观的，用户很可能会因此受挫。

故而，在我们发挥创造力的时候，最好以现有的设计规范为基准和前提。不要重新设计轮子。

 

6. 善用颜色重量（color weight），建立视觉层次

每一种颜色都有自己的视觉重量，我们可以通过借助颜色的视觉重量来建立内容的视觉层次，用颜色的深浅来呈现内容的重要性的层级。

善用颜色视觉重量的秘诀是，一个更为重要的元素，应该有更重的视觉颜色，以便用户快速浏览网页，区分重要和不重要的信息。

大字号、粗体的信息会首先被用户注意到，而后他们会关注其下的辅助性信息。

 

7. 避免使用超过两种字体

通常，设计界面会控制使用的字体数目，两种不同的字体就应足够—这不是说你不能使用更多字体，只是你需要充分的理由。通常来讲，仅用两种字体会更好。

设计界面时要善用字体家族。

使用字体家族意味着我们可以使用同一字体的不同变体。字体家族的存在就是为了字体的不同变体可以更和谐地被放在一起，让设计在保持多变性的同时兼顾一致性。

选择字体时，尽量选择那些有多种重量（如标准、适中、粗体、特粗）和样式的（如长体、宽体、斜体）的字体家族（译者注：作者此处所述选字体经验的适用对象主要为英文字体。）。这样既会给设计留出可探索的空间，也不会增加额外的字体种类。

 

8. 让用户认知，而非记住

让用户去认知产品是产品设计中所推崇的，因为，我们为什么要让用户在使用的过程中去思考呢？

结账页面、电子邮箱、搜索历史、返回按钮等都是很好的建立了用户认知的例子。

在好的设计中，结账页面是不需要让用户记住他们所要购买的物品的。用户应该可以清楚地从界面中确认他要购买的物品，而非通过回忆来想起。

在Gmail邮箱中，我瞟一眼就可以知道哪些是已读邮件，哪些是未读邮件，这个过程不需要过脑子。同理，我登录到自己的亚马逊账户后，可以迅速地从上次购物时中断的地方继续开始购物—因为它显示了我最近浏览过的物品。

设计时，应让元素、功能、选项明显可见，最小化用户的记忆负荷。用户无需自己在操作的步骤中记住信息。系统的操作说明应该在需要时很容易看到或查到。

—Nielson Norman Group（尼尔森诺曼集团，人机交互和用户体验咨询公司，唐·诺曼是创始人之一）

 

9. 切忌拖慢用户体验  

作为用户，速度和效率是最重要的。用户使用一个应用程序，是为了解决某个特定的问题。

我要速度。
— Ricky Bobby（电影《塔拉迪加之夜：瑞奇鲍比的民谣》主角、赛车手）

如果将一张支票通过手机存入银行账户这个体验是非常让人享受的，那固然很好，但作为设计师，千万不要让你的创造力阻碍用户实现他们的目标。

关于动画和微交互的一条经验就是，如果某个体验只是无谓地增加了时间，那么这不是在改善用户体验。

如果加入的动画带有目的性，则可以改善用户体验；但是如果增加的只是不必要的分散注意力的元素或用户操作，那么用户体验不会变得更好。

Dribble上有很多着陆页的设计—当用户向下滚动鼠标时，动画随之展开。通常，这些设计展现出过火的动画效果，每个元素都在淡入淡出，动来动去，而几乎不关注体验本身。当太多事情同时在界面上发生时，用户很难知道到底哪些信息是应该关注的，这等同于浪费用户宝贵的时间。

这位Dribble用户，非常抱歉把你揪了出来:/

无数研究表明，界面中动画的最佳时间在200到500毫秒之间，这个数字是由大脑的特征决定的。任何短于100毫秒的动画都是一晃而过，人眼根本无法识别；而超过一秒的动画会带给人无聊和延迟的感觉。
—《UX微动画设计指南》

所以，如果你要在界面中使用动画，那么给它一个明确的目的，并且不要让用户等待超过500毫秒。在2019年的今天，惹恼你的用户只需要1毫秒。

 

10. 大道至简

每次我们想要增加额外的信息到界面中时，例如按钮、文字、照片、动画、插图等等，它们就会跟相关的信息进行竞争。如果一页上有太多东西，那么某些元素的重要程度就会被削减。

谷歌搜索首页就是典范。这个设计将全部的注意力放在了搜索这个主要功能上，没有把用户淹没在不必要的信息海洋里。

对不起了雅虎，在这必须把你当做不好的案例展示

最后，分享给大家一句我最爱的设计箴言：

臻于完美之时，不是加无可加，而是减无可减。

文章来源：UXRen

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

在大数据时代，数字化转型已经成为行业迫切的需求。2016-2018年金融、医疗、政府、安全等行业在大数据方向上的投入持续增加，大数据可视化的需求呈现爆发式增长，相关产品也纷纷推出：阿里 DataV 的「双十一的天猫可视化大屏」、360的数博会企业安全大屏、帆软的 BI系统。面对井喷式的市场需求和部门业务在 To G、To B 的拓展需求，需要快速储备大数据可视化的能力，作为一个 To C 的设计团队面临的挑战和责任都是巨大的。

（编者注：由于本文动图太大，将近100M，为了不影响移动端读者的阅读体验，本文图片都是静态截图，动图文章链接戳：https://docs.qq.com/doc）

一、项目背景

在过去一年中，潘洛斯（Penrose）团队参与了「灵鲲」态势感知系统、「麒麟」系统、「鹰眼」反电话诈骗系统等14个大数据可视化产品的设计。随着产品不断的探索和迭代，积累了一些行之有效的大数据可视化设计的心得和方法。基于「灵鲲」这个案例，分享一下我们在大数据可视化方向的设计和思考，希望能够给对大数据可视化感兴趣的同学提供一些思路。

「灵鲲」是 MIG 安全云部门与潘洛斯（Penrose）团队合作的，基于潘洛斯大数据可视化引擎衍生出的一款金融风险监控可视化产品。应北京与深圳金融办的需求，搭建灵鲲金融风险态势感知系统，实现事中风险控制，减少网络欺诈损失。

着手设计之前，我们需要了解：大数据市场规模和各行业投入有多大， 政企客户的大数据可视化产品的痛点是什么？对比深耕多年的竞品，我们设计的突破口在哪？——挖掘我们的机遇和发力点。

二、我们的客户，目标群体

数据显示，2017年中国大数据产业规模为4700亿元。随着一系列政策的出台，大数据国家战略正在加速落地，大数据行业将持续增长，预计2018年中国大数据产业规模将达到6200亿元，增幅达32%。需求层面，预计2020年大数据应用市场需求中，仅政府需求就占比35%，另外包括医疗、交通、金融等多个行业在大数据和信息化建设投入也将持续增加。

除了旺盛的需求以外，我们还注意到很多政企内部数据基础很好，以宜昌为例，宜昌智慧办汇集了来自32个部门、60个系统的大量详尽的实施城市数据。与这些政企单位合作，易形成行业灯塔，便于规模复制。另外，针对大数据可视化，目前政企已不满足于「面子工程」，更多的希望大数据可视化与 AI 结合，呈现更复杂多样的数据，以辅助决策。

基于以上的市场潜在规模的考察和典型客户研究，在进行「灵鲲」产品能力规划时，我们主要考虑以下三类使用场景： 政府机构决策、展会展台及参观视察。

在金融局等相关政府机构的日常工作中，决策层和相关工作人员会基于实时金融平台数据，针对日常事务或紧急事件进行决策管理，监控大厅也就应运而生。基于这种工作方式，我们可以发现潘洛斯的产品特性非常契合监控大厅的使用场景。在监控大厅中，用户是通过两种不同的信息界面进行工作的，分别是综合数据可视化大屏（总屏）以及工作人员独立使用的电脑屏幕（分屏）。其中，在总屏上，呈现的内容通常是一些对于决策者来说至关重要的信息：正在发生的事件的状态和可能趋势（发生了什么）、值得注意的风险（需要团队做什么）以及风险的处理进度（团队做的怎么样）；而在分屏上，主要为工作人员提供数据分析及风险事件处理功能，帮助团队对事件迅速作出响应，协作。

不同于工作场景，灵鲲产品在展会中展台的主要受众是参会人士，除了一般民众外，更有价值的观众主要来自于媒体和潜在客户等。所以在这个场景中展示的内容与实际工作中的数据可视化内容有一定的区别，更多的是对产品能力的展示、产品的宣传以及社会价值的呈现。如何直观的呈现产品的能力，并使观众快速获得有价值的信息并留下深刻印象非常重要。这也决定了在这个场景中，用户不仅包括观众，也包括演讲者。我们需要考虑如何通过控制端让讲演者而流畅的完成产品介绍。

在金融局等政府机构，经常会有上级领导视察参观的接待活动。这些来访的贵宾往往希望了解关于机构更全面和具体的信息，包括但不限于工作流程、工作成绩等，所以我们认为这个场景综合了以上两种场景的主要特点。这里的用户包括来访人员，演示人员以及工作人员，展示的内容也往往不局限于金融风险大数据的可视化，还会包括工作方式和流程本身。

三、行业竞品对比，反观自身发力点

通过对阿里 DataV，AntV、360、帆软的大数据可视化产品的体验，我们从产品呈现、产品体验、产品技术、部署方式和商业模式几个维度的横向对比。阿里的技术对可视化效果的局限性很大，优点是产品实现模板化、系统实时可交互，用户可以快速搭建自己的可视化产品；360产品可视化呈现3D化，数据呈现效果和数据感知度较2D更优，但是系统非实时可交互，而且搭建周期长，成本较高；帆软的可视化是传统报表型，可视化效果呈现缺乏竞争力。

经过对比，我们不难发现3D化数据呈现能力和数据感知度是最高的。但是局限于目前的技术，项目成本高、研发周期长、难以满足业务的发展速度。

四、我们的机遇和挑战

基于市场需求和竞品分析，我们从以下三个方面分别分析了产品的机会和突破点：

• 可视化：数据和场景的呈现3D化，满足更多维度的数据呈现，支持云+本地实时大数据呈现能力；
• 产品化：场景、组件、数据、图表全部实现可云端动态更新和配置的模块化，降低维护成本、提高服用率、缩短项目周期，无缝打包接入业务数据，提供丰富可自定义的可扩展接口；
• 大数据+AI：基于公司多领域多业务线的大数据融合以及 AI 能力提供丰富的基于时间、空间、数据的预测预警、统计表达能力。

1. 产品架构规划

基于对灵鲲态势感知系统的使用场景、用户需求以及机会点的考虑，我们规划了未来产品的整体架构，包括大屏端、云端、客户管理端、小屏端以及虚屏端。大屏端基于本地端引擎进行大数据可视化呈现。客户管理端包括报表和配置管理等工具，帮助用户进行分析数据和策略管理。小屏端主要考虑操作控制和移动办公等移动使用场景，提供大屏控制、移动审批、监管、公众号等功能。以上三个端由云端拉取和更新数据。虚屏则提供差异化的大数据可视化体验，如增强现实等新奇有趣的玩法。由于大屏端在我们的规划里是态势感知系统的核心，且落地到合作方的模块，以下分享的内容将主要围绕大屏的内容设计展开，未来如果产品规划中的其他模块陆续上线，我们再做分享。

2. 大屏内容设计

本地端引擎

早期我们设计的「麒麟」系统、「鹰眼」反电话诈骗系统在对外在大屏上展示主要是通过 web 端的方式去实现，虽然适配性尚可，但很多设计效果无法完全还原。我们也尝试性用 webGL 和 three.js 的方式把设计效果再做进一步提升，但迫于研发周期和实际性能的压力，最后也只能作罢。中期我们尝试使用3D工具输出视频的方式做过一些过渡，输出效果是没有问题，但如果在展会上遇到媒体采访，事情就会变得异常尴尬。媒体会询问展示内容的真实性，数据的实效性，甚至采访的时候需要停留在某一个画面，我方参会人员配合起来非常麻烦。后来我们也研究过竞品使用的工具，例如 Ventuz，工具最终输出的效果是不错，但是界面、操作极其复杂，相关教程和素材在网络上极少，授权费用也相当昂贵。最终经过我们内部商讨和研究，也请教了一些 IEG 专家的意见，决定使用游戏引擎作为本地端的显示引擎。

Unity 和 Unreal 我们也纠结过许久，甚至 Unity 上我们也出过可交互的 Demo，但最终选择了 Unreal 的原因主要有以下几个点：

• 基于前面我们提到的产品架构，我们的核心是在大屏，而大屏部署主要依赖 PC 做为计算平台，相较于 Unity，Unreal 在 PC 端的技术积累要更加深厚，实时渲染出来的光影效果和质感表现要更稳定于 Unity 的输出；
• Unreal 自带蓝图-可视化脚本系统，这对于设计团队出身，零代码开发经验的我们来说上手、学习起来更快更方便；
• 线上有大量的视频教程，各种插件和美术素材也比Unity更丰富；
• 有《蝙蝠侠:阿卡姆骑士》、《最终幻想15》和《绝地求生》这些3A沙盘游戏作为先例，Unreal 对于大规模的场景渲染能力是可被预期的，而 Unity 目前还没有可以拿得出手的案例。

色彩基调

为了打造灵鲲产品的可视化，在竞品中脱颖而出，我们从产品功能、用户、愿景三个维度发散，提炼出设计指南的关键词：智能、直观、未来，塑造独特的大数据可视化风格体系。

灵鲲金融态势感知系统内容架构分为数据维度和场景维度，数据是核心，场景是大数据呈现的承载体；场景使用具有金属质感的深青灰，符合理性的、冷静的、智能化产品的个性；数据色彩使用透明、发光、具有未来感的高亮色，和场景形成强对比，使数据更为突显、更具吸引力；为了强化客户对于风险的感知，通过颜色区分数据的风险等级，更直观的传达数据的含义。如：高风险的使用红色，红色让人联想到危险、警报。

呈现方式

在现有的产品和传统认知中，大数据产品内容是各种样式的图形和图表，主要以平面为主。我们从游戏、科幻电影中收集了一轮大数据可视化内容相关的案例，从视觉维度上看，主要有这几个特点：一、具有很强的空间感，支持多种数据同屏呈现，可交叉分析对比，承载性强；二、高精度的模型和材质，丰富的粒子、动效，更加贴近现实的光影呈现；三、互动性强，可交互，实时演算。

从大数据可视化的内容维度上看，梳理的3D架构，主要包括：数据维度>基础建设>交通运输>行政分区>自然条件。

数据维度层是最核心的部分，位于场景上方最突出的位置，能够更清晰的展示风险数据的分布、量级；行政区域和交通层是城市场景最基础的数据维度，方便用户进行区域的数据对比和分析；基础建设层包括城市的建筑、标志性建筑、照明、桥梁、等，还原城市独特风貌；通过突出城市的标志性建筑，强化城市、区域的识别性，辅助数据传达；自然条件层包括地形、河流、植被、展示真实的环境特征，用户更有代入感。

△ 北京场景

△ 鸟瞰视角、漫游视角自由切换，满足全局、街道、建筑的不同颗粒度的数据呈现，方便用户进行纵向的数据对比。

△ 场景整体风格图

数据表现

灵鲲的3D数据样式有柱状图和散点图。如何把司空见惯的数据样式，设计出产品的个性，是我们重点要解决的问题。为了体现大数据的力量感，使用科幻电影中的聚合能量、发光的能量石作为柱状图的主图形；同时把数据采集、融合、分析的过程具象为动态粒子网络，作为辅助图形。数据图形和结构中都融合了品牌 DNA 的三角图形，数据样式更具有品牌的个性。

△ 柱状图

△ 散点图

预见未来的功能创新

时间线：3D的维度基础上，我们增加了时间的维度，通过拖动时间线查看不同时间点的数据的变化趋势，由此对未来数据进行预测。为了强化用户对于时间感知，设计了白天和晚上两种风格，白天和夜晚随着时间变化而变化。

天气系统：天气是未来数据分析极其重要的一个因子，它会直接影响交通（例如人流、物流、航空）、医疗(例如疾病传播、医院就诊）等领域。所以我们设计了通用的天气系统组件，呈现实时天气情况，以辅助用户进行数据分析。

控制端：符合大屏使用场景和用户操作习惯，同时小屏控制端支持更复杂更精准的操作。

组件库搭建

为了提升产品搭建的效率，降低了研发周期和成本，产品功能模块实现了组件化，分为3D场景组件、3D数据组件、2D数据组件。任何一位设计师都可以根据产品需求，搭配组件模块，快速搭建大数据可视化产品。

数据内容的包装

通过该产品，一方面能够辅助金融局等政府机构领导把控整体金融平台风险、辅助做出平台整改指导决策意见，展示金融工作成绩；另一方面体现出腾讯大数据能力和公司的社会责任；最后，通过从更长远的眼光去包装产品，打造智慧监管标杆产品，从而推动与政府客户更深入广泛的合作。具体内容通过以下两条线进行组织：

横线：各个监管维度

灵鲲金融风险态势感知系统专注于呈现金融风险数据的呈现，主要分为公司层面和用户层面，综合体现潜在的风险趋势和实际影响的范围。除了灵鲲用于监管金融数据，整个监管平台还负责展示包括政治、生态、电信、消费在内的多个监管维度，这些维度与金融监管维度为同一个内容层级。我们考虑到腾讯的大数据能力可以帮助更多城市综合管理者了解整个网络社会的全局性风险，所以每个维度都是智慧监管必不可少的一部分，并且每个维度之间的横向交叉对比能够使智慧监管平台发挥出更大的社会价值。

纵线：监管颗粒度

灵鲲系统中观众可以从全局数据一直下钻到个体数据，实现不同颗粒度的监管目的。

具体来讲，全国的安全风险最终是以加权平均后的指数形式体现出来；再到具体的省份和城市，内容细化到具体风险事件的发生情况，如电信安全监管维度，呈现电信诈骗使用的伪基站的位置，以及发送诈骗短信的数量等；最后细化到城市中的机构和建筑，呈现具体机构的运行情况和具体高风险企业所在建筑进行实时监控。

3. 产品演示视频

https://v.qq.com/x/page/d0742kep4k1.html

结语

潘洛斯团队是基于 DNA 设计中心下的大数据可视化团队，成员来自于 MIG 安全和医疗部门，早期专注于 To C 端的产品设计，过去一年里随着公司战略的变化和部门业务方向的变化，我们逐渐开始把产品设计的重心和思考放在了 To B、To G 领域，不断做着尝试和探索。以前做 To C 的时候我们关注的更多是 DAU、转化率、日活、满意度这些和产品体验相关联的指标，满足绝大多数互联网用户的诉求是我们首要去解决的问题。现在做 To B、To G 领域的设计，我们更多思考的是如何包装我们现有的业务能力，能够通过更加简单、直接、有效的方式触达给我们的客户，让他们更容易理解像腾讯这样拥有海量数据和算法能力的互联网公司如何帮助他们进一步提升他们的业务效率和产出，给这个社会创造更多的价值，这也是腾讯多年来想要承担的社会责任之一。

文章来源：优设

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

2018年如自己所愿，终于有机会可以尝试下数据大屏的可视化设计，但是想象总归是美好的，新手上岗第一次总是那么不太如意，陌生而又熟悉着。在做过几次尝试后，自己又私下里翻阅了一些关于数据大屏方面的设计文章，好的设计图片。有很多不足，也有很多刚开始做的时候没有注意到的点，这次整理作品，也顺便把大概的设计流程整理了一下。给自己的一个复盘总结，也是一次设计分享。

文章来源：UI中国

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

刚入行的新手设计师容易出现一个问题，接到需求就开始设计，最后出现的界面和原型几乎一模一样，唯一的区别就是上了色，加了图片和图标，最后提交审核时老板反馈，“这个界面看上去太“平”了，你在这里加个背景色吧；这个图标太小，你再放大一点；这个位置你在加点装饰……”。

这主要原因还是界面没层次导致的，虽然老板对设计不太清楚，但是关于业务逻辑我们的设计稿是否表达清楚，重点是否突出这个他最清楚了。

那么如何才能提高界面层次呢？我们可以从两个方面入手，在设计前我们需要考虑突出内容层次的方法；在设计中需要考虑突出视觉层次的方法。

目录

一、突出内容层次的方法

• 将相关联的元素进行组合

• 确认内容优先级，将优先级高的放在前面

• 确认重要内容，将其差异化设计

二、提高视觉层次的方法

• 利用线、面、留白将模块进行分割

• 利用大小、投影、背景图突出视觉层次

• 利用颜色对比提高视觉感受

• 利用文字对比提高界面的可阅读性

  
  

  
  

一、突出内容层次的方法

当一个界面信息量比较大时，层次感好的界面用户进来能快速的获得想要的信息，同时最终达到产品的目的。而层次感差的界面用户看半天也不知道要做什么，看一会也就走了。因此良好的视觉层级是界面成功的关键。在设计前我们需要将相关联的元素进行组合；确认内容优先级，将优先级高的放在前面；确认重要内容，并将其差异化设计。

1.将相关联的元素进行组合

在设计前，产品原型图已经将我们的元素进行了分类组合，但是他们更多的是考虑逻辑、功能上的层次，而如何有一个清晰的内容层次呢？设计师可以利用《格式塔心理学》中的接近性原则将相关联的元素组合在一起，不相关的拉开距离，同时形成一定的规律和节奏，这样会让用户阅读起来更轻松。

            

需要注意的是，界面中的间距需要满足一定的规律和节奏，比如模块之间的间距大于标题到内容的间距；在内容中不相关联的内容间距大于相关联的间距，如下图所示。              

     

天猫个人主页的个人信息区排在最前面就是遵循了用户的浏览习惯；其次是我的订单和物流信息排在了第二的位置这是用户想看到的内容；最后是我的福利排在了第三位这是产品想给用户看的内容。

京东金融的我的页面用户的资产信息排在最前面，他首先是遵循了用户的浏览习惯，同时也是用户想要看到的内容，其次是功能入口区排在了第二的位置这是产品想给用户看的内容，最后是福利大礼包排在第三位这也是产品想个用户看的内容。

2.确认内容优先级，将优先级高的放在前面

将相关联的信息整理之后就需要确认模块的优先级了，由于用户的浏览顺序是自上而下的，因此我们需要将优先级高的模块放到前面。

那么优先级如何判断呢？大家可以从三个方面去考虑，第一是遵循用户的浏览习惯；第二是用户想看的内容；第三是产品想要用户看的内容，如下图所示。

            

天猫个人主页的个人信息区排在最前面就是遵循了用户的浏览习惯；其次是我的订单和物流信息排在了第二的位置这是用户想看到的内容；最后是我的福利排在了第三位这是产品想给用户看的内容。

京东金融的我的页面用户的资产信息排在最前面，他首先是遵循了用户的浏览习惯，同时也是用户想要看到的内容，其次是功能入口区排在了第二的位置这是产品想给用户看的内容，最后是福利大礼包排在第三位这也是产品想个用户看的内容。

3.确认重要内容，将其差异化设计

在设计时我们需要知道，优先级高的模块不一定重要程度就高，因此我们还需要确认模块的重要层级，同时利用背景、布局等方式进行差异化设计，用起用户注意，如下图所示。

            

网易严选中的新人专享礼和品牌制造商直供就采用了差异化设计，职工类模块采用的是普通的宫格式布局，新人专享礼采用添加背景的方式，加深了模块的纵深感，对比其他模块更加突出。

大麦网中的特色模块和其他模块也采用了差异化设计，特色模块采用拼图的方式设计，其他模块采用列表的方式进行设计，用户进入页面首先就能够看到这个模块，提高用户接受信息的效率。

土豆视频个人主页的列表部分也采用了差异化设计，消息提醒、我的收藏、观看记录、我的缓存这四个用户常用的功能采用宫格式布局，其他不常用的我的会员、客户与反馈、设置采用列表式结构，这样也能够提高用户操作速度。

二、提高视觉层次的方法

当然内容层级确定了显然不够，我们还需要考虑突出界面的视觉层次，这样用户才能够清晰舒适的浏览我们的界面。那么提高视觉层次的方法有哪些呢？在设计中，我们可以利用线、面、留白将模块进行分割；利用大小、投影、背景图等突出视觉层次；利用颜色对比提高视觉感受；利用文字对比提高界面的可阅读性。

1.利用线、面、留白将模块进行分割

大家记得在设计前我们已经对界面中相关联的元素进行了组合，组合之后就可以利用线、面、留白的方式，将不相关联的元素进行分割，提高界面的视觉层次，从而提高用户的浏览和操作效率。

            

线分割：是最为基础的分割方式，其优势是占用空间小、分割感弱，多用于列表、Feed流中。需要注意的是，分割线颜色设置需要非常浅，避免模块之间强烈的分割感，比如橘子娱乐的列表就是采用若隐若现的线，让列表中的内容更规整。

面分割：也可叫背景栏分割，其优势是占用空间小、可操作性高，同时能够更好的区分不同模块之间的关系，多用于模块和模块之间的分割，比如转转个人主页的模块采用面分割浏览性更强。

留白分割：是iOS11发布之后兴起的以留白或间距的方式进行分割，其优势是无强烈的分割感，界面清爽，多用于比较有规律或以大图为主的模块之间的分割，比如转转主页下方的卖二手还钱、买实惠好货等，其内容部分都较为规则，采用该方式较为合适。

2.利用投影、大小、背景图突出视觉层次

为了突出界面的视觉层次，我们还可以通过投影、大小、布局等增加界面的对比，从而突出重要信息。

            

投影：是界面对比较常用的一种方式，其优势是提升界面的空间感，改变视觉次序，通过投影大小的变化还可营造不同的空间关系，多用于卡片风格的设计中，比如Keep均是采用卡片风格的设计，添加投影后让界面视觉层次更突出了。

大小：是大众最为熟知的对比方式，其优势是通过大小对比能够很快的拉开视觉层次，同时能够很好的引导用户浏览路径，比如ofo黄色的大按钮远远都能看见，该页面就一个目的扫码用车。

背景图：往往不如投影和大小常用，但是它的使用可以将模块从其他样式中年凸现出来，多用于banner、推荐等重要模块中，比如美图秀秀的推荐模块，该模块可以说是美图的核心模块。

3.利用颜色对比提高视觉感受

颜色是最容易感知到的对比方式，通过颜色我们可以明确哪些是重要信息，在使用中我们可以通过色相、明暗、饱和度上进行对比，其多用在按钮、重要信息、导航、背景板中。

            

自如首页上的租房、服务、旅行采用对比色进行强调对比，进入页面用户就能够清楚这三块是是界面的核心功能，同时引导用户关注右侧的具体服务信息。

淘票票首页中的按钮、引导提示、标签栏选中均用了红色进行强调对比，很容易引起用户的注意，让用户看一眼就知道如何操作。

招商银行首页中的话题PK采用对比色进行强调对比，很容易引起用户操作的兴趣。

4.利用文字对比提高界面的可阅读性

文字的层次感往往和字体大小和明暗有关，其中字体大小是提高文字信息层级的重要手段，在文字排版中如果文字之间的层次不清晰，那么一定是大小的对比不够，在UI中字体大小对比往往在4-8px较为适合，如下图所示。

            

当字体大小对比适合之后就需要通过通过字体的明暗突出主要信息，弱化次要信息，从而提高界面的可阅读性，如下图所示。

            

在UI设计中我们往往都设定了字体规范，这样不仅能够达到设计统一，同时也有很好的对比性，常用字号为40, 36, 32,28,24, 22(px)，比如优酷的星球页面，通过字体大小，颜色深浅的对比，让用户首先看到重要信息，弱化次要信息。

            

三、总结

在界面设计中为了降低用户的理解成本，突出重点内容，让用户使用起来舒适，就需要有个清晰的内容层次和视觉层次。

在设计前我们需要考虑将相关联的元素进行组合；确认内容优先级，将优先级高的放在前面；确认重要内容，将其差异化设计。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。