一、系统可见性原则

“系统应该在合理的时间内通过适当的反馈，始终让用户了解正在发生的事情” --尼尔森。
用户都希望产品是可控的、状态是可预测的，所以无论用户在界面上做了什么，系统应该在合适的时间给予合理的反馈，始终保持界面的状态可见、变化可见、内容可见，让用户对已经发生的、正在进行的、以及后续走向都有所了解，以避免在后续的转化决策中出现错误。

1.合理的位置

界面不仅仅是为了把信息呈现给用户，还需要引导用户来操作，让用户清楚的知道当前在什么位置，以及操作时最想要知道的信息。
例如，订单页顶部的导航分栏，不仅将字体加大加粗、色彩加深，还添加了主题色的形状，为的就是强化用户当前所在位置。购买产品VIP时，按钮中会显示金额，也是为了让用户的视线停留在CTA按钮上，避免用户想要查看价格时将视线从CTA按钮上移开。

2.合适的时间

对于同一操作，系统需要搭配不同的时间场景给予不同的反馈，确保反馈的及时性，避免让用户产生焦虑或不安。例如在跳转页面时，即时跳转，用户通常看不到任何跳转中的状态，时间稍长会看到加载动效，若长时间没有响应，则会提示其他问题，如网络问题、跳转失败等。

3.适当的反馈

用户需要清晰感知到已经发生、正在发生以及即将发生的事情，以便于他们进行下一步决策。每当用户进行交互后，系统应将当前状态、位置、进度以及操作结果适当的反馈给用户，以减少不确定性。如果用户存在失误，更应加以正确方向上的引导，避免用户产生疑惑或重复操作。
例如在电商应用中，将商品收藏、添加到购物车等，这种操作行为不会造成任何损失，系统在反馈时尽量不要打断用户，使用类似toast简短弹窗提示即可。但对于金额支付、内容删除等，会涉及用户利益或安全方面的操作，就需要通过弹窗打断用户当前操作，让其二次确认后再作决策，以减少不必要的损失。

二、环境贴切原则

“系统应该说用户的语言，用户熟悉的单词，短语和概念，而不是系统导向的术语。遵循现实世界的约定，使信息以自然和合乎逻辑的顺序出现”--尼尔森。
设计师需要站在用户的角度去做设计，但并不能就此代表用户，不要将自己对产品的理解、行业中的专业术语代入用户场景中，因为用户的认知大多来源于多周围环境的感知，我们需要使用最贴近目标用户群体生活场景的表达方式，让信息表现的自然，用户能更容易理解。
对于环境贴切原则，直接点就是“说人话”，苹果之父「乔布斯」和微信之父「张小龙」的产品核心理念便是如此，用最简单直白的语言、用户最熟悉的概念呈现信息，尽量贴近真实的世界，将产品做到傻瓜也能操作，才能保证与用户沟通交流的顺畅。

1.用户熟悉的语言

产品的设计语言需要针对不同的用户群体以及不同的使用习惯，使用该群体所熟知的文字、图形、版式、配色以及设计风格等，让用户觉得这个产品能解决自己的问题，不会有认知上的困难。
从大了讲，例如微信的标准模式符合大多数常规用户的操作，但又另外设计了一套关怀模式，将文字、按钮变的更大，色彩变的更强，这就是为老年人的视觉障碍而准备的一套解决方案。还可以开启听文字消息，在会话框中只要点击一下文字消息，系统就可以直接阅读，将信息的传达从视觉转移至听觉，更大程度的解决了视觉障碍问题。其实，不管是微信的标准模式、关怀模式，还是其他的乡村模式、青少年模式、大学生模式等，都是为了迎合不同的用户群体。

将范围缩小至产品的某个功能，如高德地图视觉障碍模式（色盲/色弱用户的专属配色）、首页设置（搜索框位置的调整）等也是为了满足不同用户群体或同一用户群体的不同使用习惯而设计。

2.真实的物理环境

将现实世界中的物体映射至产品设计中，能让用户通过对现实环境的认知感受到产品的真实易懂，很大程度上降低了学习成本，帮助用户更快的理解并轻松掌握其使用方式。模拟现实世界的物体并不仅仅局限其外形，对于其动态效果、声音以及其他属性特征等都可以加以融合，打造更真实的用户体验。
iOS系统早期的桌面图标就是如此，即便后来逐渐过渡到扁平化，但很多地方依然保留了拟物化的设计，如同步变化的动态时钟表盘、接近于物品外观的相机、计算器图标等。网易云音乐播放页面中，复古的黑胶唱片，不仅模仿了早期的留声机，还融入的怀旧情感，与其他同类产品的差异性也即刻凸显。

3.用户的文化观念

产品不仅可以使用人们对真实物体的视觉感知，还可以利用文化观念进行隐喻。
例如，红色意味着危险、禁止，绿色则代表安全、通过，而产品中的审核结果就可以用颜色醒目的图标强化提示，红色表示审核未通过、绿色表示审核通过。另外在现实生活中，“+、-”符号代表增加和减少，对于互联网产品，同样可以使用“+、-”来表示内容的增加与减少，常见的有购买商品数量调整、自定义内容布局等。

三、用户可控原则

“用户通常会错误地选择了系统的某个功能，并且需要一个明确标记的「紧急出口」来离开不想要的状态，而不必进行扩展对话。支持撤消和重做”--尼尔森。
用户需要拥有控制系统和来去自由的权利，且产品要在用户可能犯错误之前及时警示并给予正确的引导，但总有些特殊场景，用户发生主观上的失误不可避免，为了不让用户进入到错误的场景，这时系统应该提供一个“紧急出口”，便于用户撤销和重做。

1.即将发生的行为

在使用产品的过程中，系统检测到用户有可能出现操作失误的情况，应给予明确的提示和指引，关闭/返回就是最为常见的“紧急出口”，即便大部分用户知道向右侧滑返回，但“紧急出口”依然要明确显示。
另外，在删除某些信息时，系统给予的确认弹窗也是为了减少用户操作失误，以免造成不必要的损失。

2.已经发生的行为

用户的失误行为已不可避免的发生，应当提供撤销、取消或重做等相关功能。
在社交类应用中，短时间内发出的消息可撤回重新编辑，便是给了用户可以反悔的权利，办公类产品中的回收站亦是如此。

四、一致性原则

“不应该让用户怀疑不同的话语、场景或行为是否在表达同样的一件事情。系统设计需遵循平台惯例，保持一致性”--尼尔森。
对用户来说，同一产品需要统一的设计规范，其视觉样式、交互形式都应该遵循基本的用户习惯，保持功能、操作的一致性为确保用户对界面的学习使用至关重要。

1.内部一致

设计规范就是为保持产品内部的一致性而生，不管是色彩间距、还是组件模块，保持一致性不仅能让用户感觉使用的是同一个产品，还有助于品牌传播，给用户留下一定的印象。
对于业务非常复杂的大型产品，虽然各元素组件样式繁多，但会从视觉风格和交互形式上来确保产品的一致性，这都可以减少用户的思考负担和学习成本。

2.外部一致

虽然很多产品都在呼吁创新、去同质化，但差异化较大的设计虽然达到了去同质化的目的，却给用户增加了更多的学习及思考成本。这里意思请大家不要误解，并不是说不去创新，而是除非你的产品有足够的影响力，对于较大的变动，企业能承担起试错成本、以及增加了额外学习成本可能造成的用户流失，否则只能进行一些小的改动，循序渐进的跟随主流。
对于同类型的产品，我们依然需要参考竞品的一些设计形式，如下图是音乐APP的播放页面，其主要功能的优先级排列、页面布局基本相同，即便是创新也是从设计风格、氛围以及微动效等方面做出差异化。

3.用户使用习惯一致

先举个例子，之前有不少产品引用费茨定律“任意一点移动到目标中位置距离越短，所花费的时间就越少”这一原则，于是将左上角的返回按钮搬到了左下角（侧滑返回操作没有影响），没错，对于现在的大屏手机来说，返回效率确实提升了，但却违背了用户的使用习惯，增加了误操作的可能性。
返回按钮放置左上角，与绝大多数产品保持一致的使用习惯，这意味着用户只需付出更少的学习成本甚至无需学习即可快速上手。

五、防错原则

“系统要么消除容易出错的情况，要么检查它们，并在用户采取行动之前向用户提供确认选项”--尼尔森。
用户的很多操作都是比较随意、无意识性的，也因此造成了一些不可挽回的错误。系统应该在用户出错之前采取一定的措施，这并没有多么复杂，或许只是一个走心的设计，如使用引导用户、温馨提示、有效控制等方式以减少错误的发生。

1.主动引导

主动引导的目的就是为了给用户提供明确的路径，减少错误操作。很多APP首次下载或更新迭代之后就会提供新手引导，还有表单的占位符提供的格式规范、内容描述也是如此。

2.被动引导

在用户操作时，系统对用户录入的已有信息进行预判并提供相匹配的内容让用户选择，也是一种常用的防错方式。如搜索联想词、商品错误文字自动修正等。

3.给予警示

对于一些较为敏感、可能存在危险或不可逆转的操作时，系统需要提供二次确认引起用户注意，以起到警示作用。例如注销账号、删除某些内容或中途退出流程，都会有弹窗提醒用户，避免误操作带来不必要的损失。

4.限制操作

从表面来看，限制用户似乎并不友好，但为了避免用户错误理解，利用明确的限制阻止用户犯错也是一个不错的选择。例如无效内容置灰、未达到操作条件的限制，都能很好的防止用户无效操作。

5.控制操作范围

笔者曾使用过一个产品，在选择出生年龄时，往前的年份能滑到清朝时期（一百多岁玩不动智能手机了），往后面能滑到今年之后的几十年（我还没出生呢），这并不是在质疑设计的合理性，而是无效或过于冷门的选项越多，用户可能会有选择性困难「综合症」、也可能会提高随意性以及选择错误的几率，这对后期用户数据分析的精准度有很大影响。
适当的限制操作范围，对产品来说也是一个很好的防错策略。例如：美团定酒店的日历限制在半年以内、在手机号码表项中限制输入11位数字等，都可以降低用户出错的概率。

6.提供默认值

对于随意性较强的用户，通常都是「做多错多」，所以在部分场景下，如果对用户的操作需求明确可控，可根据实际场景提供符合目标的默认值，以减少用户操作成本。
添加银行卡时，输入卡号后会自动匹配对应的银行、购物下单时系统也会自动选择一个默认收货地址，这些默认值的存在都或多或少的减少了用户操作步骤，即便不是用户所需，也不会造成什么负担，这本该就是用户完成任务的必要流程。

7.规范数字格式

在数字信息输入场景中，可以利用一些特定格式，不仅能减少出错，还能有效避免将错误信息带入下一步流程。
例如，输入手机号、银行卡号、身份证号等，可以将几个数字分为一组，以此类推，这样更有利于用户自查。

六、易取原则

“通过使用对象、动作和选项的可视化表达，最大限度地减轻用户的记忆负担”--尼尔森。
在产品设计的时候，需保证组件、按钮以及选项的可见性，用户不需要去动脑筋，产品应该把用户当傻瓜对待，尽可协助其记忆。在特殊情况下，用户离开当前页面，产品可提供关键信息让其确认，而不是让用户去回忆，徒增记忆负荷。

1.能选择就不要输入

产品能做决定的就不要让用户去选择、能让用户选择的就不要让他们自己输入。其实选择和输入的操作成本相差巨大，很多用户都不愿意在输入上面花费过多时间。
问个比较现实的问题，如果你申请信用卡的意愿不是很明确、在办与不办之间犹豫徘徊时，有多少人是被几页超长表单劝退的？需要用户提供的信息我们无权删减，但可以利用设计手段降低操作成本，如果将部分输入框变成选择框，让任务变的更容易完成，用户的抵触心理自然也会降低。例如：微信添加银行卡时，手机号、银行卡号都能从相应的接口获取，减少了很多操作。

2.信息可提取/拆分

与其让用户逐步完成任务，不如让用户只进行一步简单操作，产品就智能化的将信息提取出来、自动拆分并送到用户手中，不仅节省了大量的交互步骤和浏览时间，也降低了用户因自行输入信息可能出错而带来的不可控感，大大提高了产品的易用性。
新建收货地址时，将地址信息粘贴至输入框，产品即可自动拆分省/市/区、详细地址及个人信息；绑定信用卡时，只需扫描卡片就能自动提取卡号、开户行、有效期等信息。

3.通用的交互方式

特别是一些隐藏的交互操作，一定要使用用户最熟悉的方式，避免浪费时间去回忆或手动试错，要保证用户在最短的时间内有效识别、理解。
例如，左滑列表中的某个内容可进行删除操作、屏幕边缘右滑返回上一页、双击短视频点赞等。

4.信息表意明确

众所周知，文字表意明确，也是最能让用户理解的方式，不过它的信息传达效率远远不如图形，所以在众多UI设计中，有图标的出现，就会抢占信息组中的主视觉，但这并不代表可以完全替代文字，很多时候，我们应该让文字成为辅助的存在，以加深用户的理解。图标+文字组合表意更加明确，能迎合更广泛的用户群体，避免少数用户产生疑惑。

这里要说明一点，图标并非不能单独出现，而是要慎用。就如搜索图标，全球99%都在用这个放大镜造型，无可厚非。花瓣APP底部标签栏也使用了纯图标形式，因为它所面对的用户绝大多数都是设计师，而设计师对图标的识别和理解自然没什么难度。

5.重复关键内容

针对一些需要用户记住或对用户来说较为重要的信息，即便已进入下一步流程，产品有必要二次呈现用给用户确认，避免用户回忆（想不起来就会离开）。
在购物下单页面，会提供商品的关键信息给用户确认；部分产品的表单任务完成后，点击提交，也会弹出之前输入的内容给用户自查。

6.保留历史记录/节点

系统应该提供用户最近的访问项，帮助他们提供未完成或想要重复完成的任务，即便是跨系统、设备，再次使用也不用来回调整，历史记录功能便是这个需求的最佳体现。
例如腾讯视频的观看历史模块，按照时间排序，提供了看过的内容以及进度，点进去之后会从上次退出时的位置节点接着播放，视频、音乐、阅读类应用都是如此。

七、灵活高效原则

“好的产品需要同时兼顾新用户和资深用户的需求，对新用户来说，需要功能明确、清晰，对于老用户需要快捷高效使用高频功能。不可迎合某一种用户，把不必要的信息占据重要部分”--尼尔森。
灵活高效原则旨在满足多样化的使用群体，通过对他们的使用场景、任务流程进行深挖，让其在最短的路径以最快的速度完成目标需求。
系统要同时照顾新老用户的使用体验，对于新手用户，要尽量降低学习成本，能让其快速上手是留住他们的必要手段。而对老用户来说，对产品的信任度有一定的基础，能快捷高效、心情愉悦的使用至关重要。

1.提供快捷方式

没有什么能比提供快捷操作更能节省时间成本了，但凡使用过手机、电脑办公的用户都用该知道Ctrl+C、Ctrl+V、Ctrl+S这三组合的神奇之处，提升的效率真的不是一星半点儿。
在UI设计中，很多快捷的入口、操作方式都相对降低了用户使用门槛，例如快捷登录（QQ、微信、手机号一键登录）减少操作步骤，节省用户很多时间；另外，在一些产品截图后就会弹出分享、反馈入口，这也是通过行为预判为用户提供便捷操作的体现。

2.重复操作入口

一些频繁使用的功能，可在不同的页面重复显示，当用户有使用需求时，能随时通过就近的操作入口进入。微信的扫一扫在会话列表、通讯录、个人信息等页面都有操作入口，非常方便；支付宝首页的花呗、借呗、芝麻信用等功能在我的页面几乎都重复了一遍，触手可及，对产品转化也有很大的帮助。

3.功能可自定义

「功能自定义」意味着用户可以对自己常用或喜欢的功能进行随意排列、增减，兼顾了不同用户对不同功能的使用需求，提高产品的灵活性。
支付宝让用户根据自己的喜好选择13个常用功能放在首页，操作起来更加方便，满足了用户的自定义需求。网易云音乐则更个性化，不仅能对功能模块、底部导航自定义，系统还提供了3种不同的版式风格，对于这种灵活的调整，不管是“萝卜”还是“青菜”，总有一款是你的最爱。

4.提供默认选项

提供默认选项上述有提到过，通过减少多余操作，不仅对防止用户出错有极大的帮助，对于提升任务完成效率也尤为明显。

5.千人千面

不同的用户就有不同的需求、不同的喜好、不同的使用习惯，产品需要做到千人千面，以最大化的程度满足多种用户群体。
这种类似的案例非常之多，且不说各大电商通过背后隐藏的算法为各种用户匹配不同的内容，就说明面上能看到的如关爱模式、乡村模式、青少年模式等，还有高德地图搜索框上/下位置调整、京东商品页的宫格样式/列表样式等，都在为满足绝大多数的用户的使用需求而付出了最大努力。

八、优美且简约原则

“不要包含不相关或低频次的信息/操作。页面中的每个额外信息都会降低主要内容的相对可见性”--尼尔森。
在设计页面时，需要注意信噪比（有效信息与无效信息的比例），处理好信息层级，方便用户能快速捕捉到自己想要知道、或产品想让用户知道的信息。因为用户的注意力有限，任何低频次或不相关的信息都将成为视觉“噪音”，导致原本重要的信息被用户忽略。

1.层级清晰

不管是模块与模块之间、还是单个模块内的各个类容，都有其一定的等级权重，划分好信息层级能集中用户注意力，更好的引导用户操作，避免用户分不清重点而徒增使用成本。需知什么内容都想突出，其结果必定是什么也突出不了。

2.视觉美观

产品的视觉效果需要和谐统一，富有设计感、独具一格的效果能给人眼前一亮个感觉。这就是为什么很多小而美产品能频频登上App Store的榜单的原因。例如，躺平（已下线）、即刻、小宇宙等应用获得了用户的一致好评。

3.信息降噪

不管一个页面中信息量的多少，但是一定要有“主角”，很多时候，我们会通过添加次要信息或背景装饰来衬托这个“主角”的存在。设计之前一定要权衡视觉重点，应弱化或去除页面中的无关信息，减少信息“噪音”的干扰，使用体验能得到良好的提升。

4.遵守四原则

所有的设计都应该遵循产品设计四大原则，即亲密、对齐、重复、对比。很多时候，页面设计不够精致，总感觉差点意思，但又找不出真正的原因，就是基础原则没有掌握好，或许只是间距、字号、大小的一个微调，即可达到意想不到的视觉效果。关于设计四原则，暂不多做赘述，后续会单独出具详细的文章。

九、容错原则

“错误的信息应该用通俗易懂的语言表达，较准确的指出问题，并且提出解决方案。避免通过代码等用户难以理解的形式”--尼尔森。
笔者相信有很多人见过这样的问题，在遇到网络问题时过了几分钟后的页面还是一片白板、很多错误反馈就显示什么错误404/505/321之类的代码，真心搞不懂，很让人抓狂。
用户在使用过程中，有时候出错不可避免，系统应该通过明确的提示性文字或插图来提醒用户，并附上解决方案，而不是给一堆看不懂的代码草草了事，需要帮助用户从识别、诊断、并从错误中恢复过来。

1.提供解决方案

用户在操作前（预判）、操作中、操作后都可能出错，系统可通过前端验证（优先使用）和后端验证明确告知出错的原因以及解决方法。
例如手机号码表单项都是限制在11位数，如果用户手滑少输了一位数字，在离开输入框时，系统应及时通过前端验证告知用户。这里要吐槽一点，一些产品是等用户完成所有表单内容并提交后才统一反馈，这并不太友好。还有产品在用户未达到表单要求的情况下，始终将下一步按钮处于置灰状态，期间并没有任何提示，这就需要用户反复查看每个表单项的内容是否达标，无故浪费大量的时间成本，实则不可取。
当网络出现问题或长时间无响应，系统会给出明确的提示，并提供重新加载、刷新、设置网络等操作入口，让用户知道问题出现的原因以及如何解决。

2.从错误中恢复

当错误已经发生，系统应尽可能的帮助用户从错误中恢复，将损失降到最低。
发布微信朋友圈，如果内容有问题删除后，系统会提供“重新编辑”入口，并保留了原先所有内容，能很轻松的、以最小的操作成本就完成了二次编辑。iPhone相册中的回收站会保留30天内所删除的内容，方便随时恢复，这都用户犯错后能及时止损的最佳体现。

十、人性化帮助原则

“如果系统能让用户不需要阅读文档就会使用那是最好的，但通常情况下还是需要帮助文档的。任何信息应该容易被搜索，且专注于用户的目标任务，并列出具体的步骤来告知用户”--尼尔森。
虽然很多时候，用户并不需要帮助或稍加摸索便能上手，但要考虑到意外情况的发生，系统有必要提供一份帮助文档，方便用户有需要时能随时了解，以便接下来专注于完成任务。

1.无需帮助

能进行清晰直观、符合用户习惯的设计再好不过了，无需任何帮助，用户也能顺畅的完成任务。如组件库的打造，就是为了让设计更简单、用户更容易理解与使用。

2.一次性帮助

对于那些用户只需花费少量的时间就能熟练使用的功能，产品为了实现快速转化或给少数的特定人群提供帮助，会提供一次性帮助。如首次进入App的新手引导、迭代后的部分新功能指引等。

3.常驻性帮助

对于较为复杂的操作流程或存在必须要用户注意的问题，产品会在必要的位置提供说明，方便用户在需要时能及时获得帮助。
例如粤通卡ETC激活流程，对于这种冷门却又必须要用的功能，即便使用过的老用户也未必能记住所有步骤，所以每次进入激活功能，首先看到的便是操作指引。其他如绑定信用卡时，输入签约手机号、安全码，对应位置都有固定的帮助入口。

4.帮助文档

对于一些常见的使用问题，系统会提供一个「帮助中心」功能入口，将所有问题集合在一起，方便用户随时查看。

作者：大漠飞鹰CYSJ
来源：站酷

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。 



分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。 



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

“仰望星空，脚踏实地” ，做设计需要想象空间，也要有反思和总结的能力。

什么是设计体系？
设计体系是为了实现数字产品的目的而组织起来的一套相互关联的模式和共享实践。

让我们来看两个毫无关联的产品的界面。

BI产品

团队协作产品

这两个案例展现了如何选用不同的模式以实现不同的目的。
对于BI产品来说，目的是让数据分析更彻底，提高数据分析效率；更好的整合数据，为企业提供报表，做为企业决策的依据；更好的帮助企业管理者管理企业，提高企业实力。
对于teambition来说，目的是轻松记录要做的事，并与伙伴实时同步进展。让彼此清楚地了解项目整体情况及事项优先级，从而完成目标。


基于产品目的我们可以看出BI产品重效率；teambition 更看重清晰以及使用是否轻松愉悦。
而产品的目的决定了它所采用的设计模式也会不同，下面我们再对照界面看下基于目的在界面设计上有什么不同。

BI产品

团队协作产品

BI数据分析类产品的布局多是小部件组成，这样做会方便用户进行多任务处理。界面设计也会相对比较密集，整个界面承载了很多信息。它使用了紧密的间距、紧凑的控件、灵活的布局和排版方式。

设计模式

设计模式的概念最早是建筑师克里斯托弗 • 亚历山大（Christopher Alexander）在他的开创性著作《建筑的永恒之道》和《建筑模式语言》中提出的。 

《建筑模式语言》里面包含了253个建筑设计模式，大的如城市和道路系统的布局，小的如家庭住宅中的照明和家具。 

类似地，我们在创建界面时，也在使用设计模式（组件）来解决常见的问题：使用标签页将内容分成几个部分，并表明哪一个选项对应于当前的页面；使用下拉菜单展示可供用户选择相关选项。

标签页

下拉组件

设计模式分为2类：

第一类：功能性模式（组件库）表现为界面上的具体模块，如按钮、标题、表单元素、菜单等。
第二类：感知性模式（视觉规范）则是描述性的样式，以可视化方式表达和呈现产品的个性，如配色、排版、图标、形状、动画等。

功能性模式有点像名词和动词，它们是界面中那些具体的、可操作的部分；而感知性模式则类似于形容词，它们是描述性的。

例如，按钮是具有明确功能的模块，它让用户能够提交某项操作。但按钮上的文字的样式，以及按钮本身的形状、背景色、填充、交互状态和过渡动画不是模块，而是样式，这些样式描述了按钮是什么样的。

共享语言

唐·诺曼在《设计心理学》一书中说过：系统映像（界面）和用户模型（用户通过与界面交互而形成的感知）之间存在着一道鸿沟。

在设计团队内部也是如此，比如“范围输入框”组件，你能想象它是一个什么样的组件吗？相信不同的人肯定有不同的心智模型，因为这个组件不是常用组件，在ant design、arco.design组件库中也找不到这个名称组件，因为它是TDesign的产物。

而每个公司都会根据自己的产品特性创造一些非常规类组件名称，这个时候就需要在所有参与产品创建的人之间共享。只有产品内部设计语言一致，才能去培养用户的心智模型，这样才能去除系统映像与用户模型之间的这道鸿沟。

例如上面这个组件，每个人都需要知道这个组件叫“范围输入框”，而不是“输入框”或者“数字输入框”。

如何衡量设计体系的有效性

例如，teambition的目的是“轻松记录要做的事，并与伙伴实时同步进展”。

于是，我们可以去看产品，设计体系在实现这一目标的过程中发挥了多大作用，以及这些设计实践的效果如何。如果视觉、交互混乱，导致无法实现上述目标，那么可以认为这套设计体系是无效的。

上面介绍了设计体系包含的内容，下面我们针对这些内容进行具体的介绍：

设计原则

有效设计原则特征

做B端的小伙伴应该都知道ant design，但不知道有多少小伙伴有认真的看过ant design的设计原则。 可能有小伙伴会问这个设计原则有什么用，我最开始也觉得没什么用，后来在参与设计体系优化过程中发现这个原则就是金字塔尖。 

例如：用户没有填写完表单，那么表单的提交按钮能不能点？是置灰好，还是按了以后再给弹窗提示。 

例如：可编辑表格，是放一个笔状icon来提示可编辑，还是采用鼠标触发时出现输入框以及指针变为文本状态。

日常工作中总会在这些细节问题上争论很久，美其名曰“打磨设计”，其实很多时候就是设计原则在团队内部没有达成共识。

为了避免出现上述问题，我们要建立一套基本的价值观和原则。在一些公司里，尤其是在处于初创期的公司里，尝试建立一套共同的准则是很难的。设计原则是无法量化的，因此定义这些原则可能需要多次迭代。

对于原则到底是什么，可能存在一些争议。有些公司的设计原则偏重于品牌，有的偏重于团队文化，有的则偏重于设计流程。 

例如，Pinterest的设计原则便偏重于品牌。

Atlassian公司没有分团队或者产品单独制定原则。

他们的目标是在客户可触及的每一点上都体现一些核心的价值观。比如“大胆”“乐观”“实用但不乏味”作为价值观的体现。
不过，尽管各处的价值观是相同的，但体现程度并不一样。

例如，官网就会较多的提现“”大胆”，但产品里面就不会，正如Atlassian公司的设计经理Kevin Coffey所说的，“没有人想要一个‘大胆的’服务支持页面”。

Atlassian 官网截图 https://www.atlassian.com/zh

Atlassian 设计体系 https://atlassian.design/

设计原则是真实而贴切的

我们以TED为例。TED的一条设计原则是“追求永恒，而不是追求潮流”。永恒这个词不光体现在TED的界面上，还体现在TED的整个品牌和设计方法上。 

这意味着他们不会为了追逐潮流而采用一项新的技术或引入一个新的设计元素。

设计原则是实用的、可操作的

例如：定义了原则为“简化”（让产品尽可能简单，简单到几乎感觉不到它的存在）。这种原则就是不实用也不可操作的。 

怎么能让团队所有人都能理解？ 

消除无用的部分。每一个设计元素，无论大小，都必须有一个目的，并遵循它所属元素的目的。如果你无法解释一个元素为什么要在那里，那么它便很可能不应该在那里。这样的定义就清晰很多。

再例如：定义了设计原则为“有用”，什么是“有用”？ 

从需求开始。如果你不知道用户需要什么， 就无法做出正确的事情。去做调研，去分析数据，去与用户交流，而不是做假设。

设计原则能帮我们确定优先级 

好的设计原则也能帮我们确定优先级和平衡点。 

Salesforce公司的Lightning设计体系的原则是“清晰、高效、一致、美观”。 

这些原则的优先级必须遵从以上顺序。“美观”不应该高于“高效”和“一致”，而“清晰”应该始终放在第一位。按照这种方式对原则进行排序，可以让团队在做设计决策时明确哪些东西应该优先考虑。

设计原则是能产生共鸣、容易让人记住

Atlassian和Airbnb的团队成员被问及他们的设计原则时，他们都能脱口而出，没有片刻犹豫，没有人表现出迟疑，没有人想要去翻看品牌手册里的原则内容。他们为什么能把原则记得这么牢固呢？因为他们的原则足够简单、实用、易于让人产生共鸣。

Airbnb公司的四条设计原则（“统一”“通用”“风格化的”“对话式的”）便深深地扎根于其设计过程之中。

每当设计一个新的组件时，我们都会确保它完全满足四条原则。如果我们没有这一套原则，便很难就各种问题达成一致意见。----Airbnb 首席交互设计师

怎么定义设计原则

每个团队建立其设计原则的方法都不尽相同：有的会召开几轮研讨会，有的可能会征求CEO或创意总监的意见。不过，无论采取哪种方式，都离不开下面几点：

从目的开始

TED网站的主要目的可以用一句话来表述：“尽可能广泛地传播演讲。”因此，TED网站的精神和价值观便是触及尽可能多的人群，降低使用门槛，让产品具有很高的兼容性和可访问性。这意味着优化性能和提升可访问性比添加华而不实的功能更重要，清晰的文案比大胆的设计更重要。

寻找共识

如果你仍处在定义设计原则的阶段，那么一个有效的方法便是让团队的一些人或所有人（取决于团队规模）各自回答关于设计原则的问题。例如，在他们眼里，什么样的设计对你们产品来说是好的设计？他们将如何用既实用又易于理解的五句话向团队的新成员解释设计原则？

面向正确的受众

如果搞不清楚设计原则是为谁写的，就一定会写出含糊不清的原则。有的小伙伴说我们领导就喜欢“美观”，那我们是不是把“美观”放在第一位？一定要搞清楚为谁而写。原则到模式

原则到模式

作为一个设计师，定义设计原则可能对你来说也许并不难， 但怎么把原则、品牌价值、组件相结合，怎么体现在设计模型中，这个我觉得是个挑战。

对于 TED 来说，信息的清晰比美观更重要。试图将每个演讲都 提炼成一个短句可能很难，所以有时候标题可能很长。对标题 进行截断是很容易的，但对他们来说，演讲信息的优先级是最 高的。

因此，他们没有选择相对容易的标题截断方案，而是确保他们的设计模式可以容纳长的标题。

功能性模式（组件）

功能性模式是界面中有形的构件（表单）。它们的目的是让用户能够完成某种行为（填写表单），或者激励用户完成某种行为。

功能性模式可以很简单（标签⽂字、输⼊框、按钮 ），也可以组合成更复杂的模式（搜索组件）。

标签⽂字、输⼊框、和按钮

搜索组件由标签⽂字、输⼊框和按钮组成

模式在变，行为不变

随着产品的发展，模式也在不断发展。包括风格，甚至功能和交互方式，都有变化。然而，它们的目的基本保持不变。

我们用顶部导航举例：

顶部导航是由logo、搜索定位框、文字下拉框、图标功能按钮、通知按钮构成。导航条里的每一个模块都有自身的目的：搜索定位框告诉我们怎么快速找到想要的东西，导航带领我们浏览全局，指引我们到想去的地方，而后面的的图标按钮让我快速触达。

总的来看，这些模块都有一个共同的目的：引导用户快速浏览使用。随着产品的发展，模式也在不断发展。

例如，随着产品功能越来越多，可能会在导航上面新增设置功能，让用户自己去排布常用功能。又如，我们可能会对导航进行重新布局，把导航按模块分类，采用标签按页展示。把模块下面更多功能放到子页面左侧。虽然我们不断的对模式进行迭代，希望它更好的实现各自的目的或者说更有效地激励用户使用。

在设计开始阶段就阐明模式的目的，能避免在产品发展过程中做重复性的工作。

目的决定了其他的一切：模式的结构、内容及呈现。了解模式的目的，可以帮助我们设计和构建更加稳健的模块。

如果说功能性模式是界面中的组件，那么感知性模式则更像是样式——描述组件是什么类型的，给人的感受是什么样的。下面，我们将探讨感知性模式。

感知性模式（视觉规范）

设想我们每个人各有一套房子，且每套房子都有以下这些家具：一张桌子、几把椅子、一张床和一个衣柜。

不过，虽然都有这些家具，但每套房子给人的感觉截然不同：可能是因为家具的样式、材料、颜色、纹理不同，或者是床罩的布料、装饰品的样式、房间的布局和灯光，甚至是房间里播放的音乐不 同。

上述这些属性便称作感知性模式。正是因为它们，可能你的房子就像是一个地中海风格的小窝，而我的房子就像是一个仓库。

而数字产品感知性模式的例子包括语气、排版、配色、布局、插图与图标样式、形状与纹理、间距、意象、交互或动画，以及这些要素在界面中的组合和使用的具体方式。

有时，人们将这样的特性视为产品的样式，或称作皮肤，也就是最外面的一层。但要想取得成效，它们必须不仅存在于表面，还必须存在于品牌的核心，并随着产品的发展而发展。

只有这样，感知性模式才会成为让产品脱颖而出的强大力量。

感知性模式的作用

同一领域的产品，哪怕具有相似的模块，它们给人的感觉也是不一样的。感知性模式通过界面传递品牌，并让品牌被人记住。

看下面的图片，你能认出它们是什么产品吗？

这两张图里面并没有太多的信息，你只能看到排版的样式、一些图形和颜色，以及一些图标。然而那些视觉上的线索极具辨识度，所以你仍然很有可能看出它们分别属于什么产品（即钉钉和飞书）。

这些视觉元素通过有意识地反复使用，便形成了模式，这就是为什么我们可以在没有上下文的情况下认出它们。

感知性模式让系统更为连贯

在模块化的系统中，想要做到视觉上的连贯统一可能是一件很棘手的事情。模块是由不同的人根据不同的目的创建的。而由于感知性模式是渗透到系统中各个部分的，因此它们可以将系统的不同部分连接起来。如果这种连接是有效的，那么用户就会感受到模块之间的统一性。

例如：飞书和腾讯的相同功能的组件感知模式是不一样的，所以两个公司设计体系不能混用。

探索感知性模式

如果说功能性模块反映的是用户需要且想要的内容，那么感知性模式关注的则是他们直观的感受或行为。

在《网站情感化设计》一书中，作者提出了一 个简单的方法，通过创建“设计角色”捕捉产品关键的个性 品质。以下是一些有助于探索感知性模式的一些技巧。

情绪板

情绪板是探索不同视觉主题的绝佳工具。可以使用数字化的方式创建情绪版（Pinterest或花瓣都是一种用于创建数字化情绪板的常用工具）。

如果你目前做的产品是需要体现：科技、质感、智能，那上图应该可以满足这些条件，你可以通过这张图与领导进行沟通达成一致，然后从中提炼出一些颜色、元素、材质，这样大方向就不会有太大问题，只需在细节上进行打磨。

样式叠片

定义好了大致的方向之后，便可以使用样式叠片来更加细致地探究多种可能性。样式叠片的概念由Samantha Warren提出，他将其定义为“由字体、颜色等界面元素组成的能传递Web视觉品牌精髓的设计交付物。”

和情绪板一样，样式叠片可以为用户和产品团队提供有价值的讨论点，并呈现他们对特定设计方向的初始反应。

arco.design 首页这张图可以理解为就是样式叠片，把不同的组件样式叠片放在一起比较，有助于准确地找到设计方向。

迭代与改进

当功能模式和感知模式建立完成后，我们将它们集成到产品的过程，它们还将进行演变。

因为在真实的界面中，模块、交互、样式之间相互影响下会产生新的问题，这都是很正常的，是典型的迭代过程，这个过程会一直持续，直到设计语言最终形成。

像ant design、arco.design应该都经历过这个过程，只是我们不知道而已，要不然也不需要花费几年的时间打磨后才发布出来。

平衡品牌性与一致性：

过分关注一致性也会扼杀品牌性。矛盾在于，让设计达到完美的一致性无法确保它依然具有很强的品牌性。有时，这样做反而会削弱品牌性——在一致性和统一性之间存在着细微的差别。

《英国公开大学》的创意总监曾说过：“当你专注于产品一致性的时候，打造产品质感的一些重要的细微之处就有可能会丢失。

发展感知性模式需要为设计师赋予打破常规的权力，鼓励设计师积极地探索更多的可能性。好的设计体系能在品牌的一致性和创造性表达之间取得平衡。

小规模试验：

后期如果发现样式无法满足，我们如何将新的样式引入设计体系呢？

可以先进行一些小规模的试验是一种相当有效的做法。如果某些元素的效果很好，我们就逐渐将它们集成到其他界面中去。

例如，在学习者完成一个步骤时，纯功能性的切换按钮缺乏庆祝和成就的感觉。于是，我们用带有圆形样式、弹跳 动画以及勾号图标的按钮取代了先前的按钮。

虽然新的按钮样式受到了学习者们的好评，但它与设计体系的其他元素格格不入。后来，我们开始在网站的其他地方应用圆形图案、弹跳动画和勾号图标。如果不这样做，那么整个设计 体系给人的感觉就是割裂的。

共享设计语言

数字产品都是由团队打造的。团队里的每个人都有各自的具体目标，都有各自的截止日期。这就意味着难免会出现草率加入的模式、重复或错误的模块。

我们能确保一个产品即便有多人协作，却仍能连贯、统一吗？ 只要我们团队对自己的设计体系及其运转方式有共同的理解，我们就能做到这一点。

这意味着我们遵循相同的指导原则，我们对品牌愿景的理解是一致的，我们在设计和前端架构方面有共享的方法，我们知道什么样的模式是最有效的，也知道它们的工作原理。换句话说，创建统一的设计体系需要共享设计语言。

许多伟大的建筑物（如圣家族大教堂、沙特尔大教堂、阿尔罕布拉宫）并不是由一位主建筑师在绘图板上费力地创造出来的，而是由一群人构建出来的，这群人对能将这些建筑物变为现实的设计模式有着深刻的共识。

“几组人可以通过遵循一个共同的模式语言，当场构思出他 们的大型公共建筑，就好像他们共有一个心灵。”

——克里斯托弗 • 亚历山大，《建筑的永恒之道》

我们可以用类似的想法构建数字产品。设计语言可以让人们创建出具有整体感的产品，哪怕不同的人负责不同的部分也是如此。

为模式命名

如果一个界面上的元素没有恰当的名称、团队里人尽皆知的名。那么该元素就没有在你的设计体系中成为有效的单元。一旦你给一个物件命了名，你就塑造了它的未来。

例如，如果你给的是一个表现型的名称，那么它将来就会受到样式的限制：“蓝色按钮”只能是蓝色。

例如，如果你给的是一个状态属性的名称：“幽灵按钮”，它的特点是：按钮形状的透明按钮，但有细实线的边框，常用在有色背景上。

将团队融入设计语言

仅仅完成命名还不足以建立共享的设计语言。整个团队都应该 沉浸到设计语言中去，让它无所不在。

让设计模式变得可见：

如果有条件，可以在墙上开辟一块专门展示设计体系的空间，将它称作“模 式墙”

让你的设计体系更加开放，人们会感觉你欢迎他们的加入，欢迎他们提出问题甚至做出贡献。

引用事物的名称：

所有语言的共同特点是，只有不停地使用才能让它保持活力。

它需要成为日常对话的一部分：

这就是为什么需要有意识地使用约定好的名称去引用这些模式很重要——无论这个名称听起来有多奇怪。将设计体系作为入职培训的一部分将设计体系的内容作为入职培训的一部分，新员工了解设计体系就会更加容易。当新员工入职时，他们将了解到设计指南是如何创建出来的，这样他们就可以理解为什么以及如何做出决策。在 《英国公开大学》 内部，他们创建了一个入门性质的线上课程，其中有一章专门对模式库进行了介绍，并包含了 一些小测验和小课程，这样可以帮助新员工更好的理解设计体系。

定期组织设计体系会议：

每个人都讨厌开会。但是，如果你希望每个人都跟得上设计体系的发展，那么组织召开设计体系的会议就是必要的。这是所有设计师和开发人员共同专注于设计体系的时间。一开始，可 以每周举行一次，当团队找到节奏之后，可以每两周举行一 次。团队可以利用例会时间就产品的总体模式（如图标、排版）得出一致意见。同时，这也是分享新模块并讨论其目的、 用途及可能遇到的问题的好机会。

设计体系不是一夜之间构建出来的，而是通过日常的实践逐渐形成的。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系

作者：夜鹰YEAH   来源：站酷

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

前言：

在 2020 年，疫情最为严峻的时候，B 端这一领域得到了前所未有的关注，而那时，身为 B 端用户体验设计师的我，也曾总结过，当时 B 端设计的诸多趋势，比如：

多端需求：即桌面端、平板端、移动端的设计形式

设计中台：拥有更为统一的设计平台，与这两年讨论较多的设计资产相同，都是起到快速协作的作用

随着 2022 年的到来，B 端行业又会迎来哪些新的机会？今天我们就从整个的 B 端入手，回顾一下 2021 年的设计形式，展望一下 2022 年的设计趋势。当然趋势完全是我自己个人主观理解，仅供参考，如有异议，以你为准~

完整的趋势，我们会分为视觉趋势与产品趋势：

1. 视觉趋势：主要围绕设计当中的细节展开，比如图标、色彩、字体、插画等
2. 产品趋势：主要是了解不同的 B 端产品当中究竟有哪些发展形式，对于设计师又会产生何种影响？

视觉趋势

1. 3D 设计风格

虽然 3D 化的视觉风格早已到来，但是在 B 端市场上，3D 风格在此之前依旧表现的十分克制。随着 C4D、Blender 这些 3D 建模软件的不断普及，再加上互联网上关于 3D 建模教程的增多，你会发现 3D 风格的视觉表现，是一个 B 端视觉设计师的基本要求。

而 3D 风格用在 B 端软件当中，会有两个使用场景：

图标

因为在 B 端产品当中，图标本身就是非常难以去表现，比如“物联网，大数据”，许多抽象词汇很难通过一个具象的事物进行表达，而在企业官网当中，在视觉表现上的要求又十分的高。因此你会发现，在视觉风格上的选择，往往只有 3D 图标 + 插画这一条路。

并且 3D 图标的使用场景不会太过于局限，也可以用于产品的工作台、运营营销工具箱等页面，因此 3D 图标的出现，它的应用场景也会相比之前要更加的广阔。

可视化大屏

大屏设计也在不断的“内卷”，因为传统的 2D 可视化大屏所搭建出来的大屏已经满足不了企业的野心， 像 DataV 腾讯云图 ，大家都在朝着 3D 风格，炫酷的方向进行延展，因此也就会导致 3D 的视觉风格需求激增，而 3D 建模仿佛就是大势所趋。

2. 新拟态

虽然新拟态是在前两年的产物。这个设计风格背后，遭到了很多设计师的质疑与排挤。但是随着这个风格的不断成熟，感觉它在 B 端视觉领域（特指的是官网 ），是非常受欢迎的，因为整体的风格，与官网的设计形式趋同。

同时作为 B 端产品的官网，其实是更需要新拟态这种风格。因为电脑场景下鼠标光标对页面进行 Hover 操作给出的真实反馈，而使用了新拟态的官网按钮，给你的反馈非常真实。

这里安利一下腾讯云的首页官网，大家就会发现在设计风格上大量的采取了新拟态元素，并且配合 3D 风格的图标，以及毛玻璃材质的设计，让它的设计瞬间加分不少。

3. 开源的设计系统

在去年，设计系统迎来了一波发展的高峰期，随着字节、腾讯，三大设计系统（Arco Design、TDesign、Semi Design）的开源，其实是给我们很多 B 端设计初学者，有了更加完整仔细的 B 端入门教程。

清晰的讲解了每一个组件的使用方式，以及注意事项，仔细阅读这里面的内容，其实就是 B 端设计的入门学习。而未来，国内的环境，开源的系统也会越来越多，大家可以针对这几大类不同的设计系统进行对比，或许会有一番收获。

产品趋势

4. 超级 app

这里的超级 app 可能和大家潜意识里的支付宝、微信这些软件不太一样

在 B 端行业，随着疫情的不断扩散、再加上两年时间的发展，很多 B 端产品的功能架构都出现了一个现象，产品的功能开始变得非常拥挤。因为 B 端软件的核心价值其实就是靠着一个又一个功能去累积，也就意味着随着 B 端产品的发展，功能模块在不断的累积，导致在设计层面，这样的现象变得更加严峻。

你会发现左侧的导航菜单已经完全没有办法装下这些导航内容，而这一现象也反映在很多产品当中，比如我了解的飞书管理后台、薪人薪事 等等诸多 B 端产品，它们在整个导航内容上，已经增加到一级导航 15+ 、二级导航 40+ ，这无疑会开始对设计师的能力造成巨大考验。

面对这一情况，许多导航菜单都将会迎来前所未有的挑战，最近也在深入研究导航菜单过多时的解决办法，发现了一些新的导航菜单设计方法，有机会咱们重新梳理一下导航菜单的内容，将 B 端设计指南文章进行更新。

低代码定制化

低代码一直是我关注的一个领域，先给不明白低代码的同学简单科普一下。

低代码，一种快速开发应用的软件，将通用、可重复利用的代码形成组件化的模块，通过图形化的界面来拖拽组件并形成应用。低代码能够实现只写少量代码或不写代码，类似用“乐高积木”的方式来开发。

在国外有很多著名的低代码成功案例。Outsystems（国外非常出名的低代码平台）帮助施耐德电气在 20 个月内推出了 60 款应用程序，开发过程加速了两倍；在 2012 年即将推出 Model S 之际，特斯拉放弃了 SAP 的 ERP 产品（可以思考一下为什么），改用低代码开发平台 Mendix，用 25 个人四个月时间自建 ERP 系统。

去年，低代码平台，也有很多新产品面世，其中就包含：

因此你会发现，其实低代码就是在解决一件事，围绕着某一个业务场景，通过平台的持续完善优化。让所有的功能都能围绕这个业务展开，其中包括：权限、时间轴、流程、表单、公式等等，能够解决很多特殊的业务场景。而低代码会涉及到设计思路上的转变，以及低代码编辑器的出现，如何去设计如此复杂的配置流程，如何让用户能够快速上手，如果你能够有比较完整的思路，这些都会成为我们设计的新机会。

行业细分

随着互联网市场的不断发展，用户会越来越关注产品在自己行业的应用，比如 CRM，其实只是一个笼统的称呼，现在 CRM 市场又会分为 SCRM、运营 CRM，等诸多产品。

SaaS 类的平台也出现了负责从虚拟主机和数据库层面入手的 iPaaS 以及从应用和数据层面入手的 aPaaS。

即使是大家经常使用的 钉钉、企微、飞书，它们也在各自的领域有所擅长。

因为 B 端产品，在底层逻辑上是不能允许趋同的产品出现，如果你和别人的产品一样，其实是没有办法在目前的市场上立足。因此你会发现，虽然产品形式都会比较相同，但是 B 端市场十分广阔，大家都在去寻找自己产品的差异化。

当然市场是瞬息万变的，这里也只是简单聊聊我自己的看法，希望对你有所帮助。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

B 端产品主要是 Web 端产品，空间大、操作多，内容相对复杂。需要通过页面布局或者视觉设计表达出明确的逻辑关系，从设计角度降低用户的学习成本。而用户有固定的认知规律。格式塔原理揭示了人类视觉的认知是整体的：我们的视觉系统自动对视觉输入构建结构，并在神经系统层面上感知形状、图形和物体，而不是只看到互不相连的边、线和区域。

格式塔主要包括 7 个基本原则：

今天我们就来总结下，格式塔原理在 B 端产品中是如何应用的？

接近性原则

我们先看 2 张截图，分别是不同分辨率下的界面效果。

可以明显的感觉到高分辨率下，菜单列间距离较大，菜单的归属关系很清晰。而低分辨率下，菜单间的距离变小，特别是后面两列的菜单会给人混在一起的感觉。这就是格式塔原理中的接近性原则，距离近的关联亲密，距离远的就各自独立分组。

当我们想要传达给用户层级关系时，就需要善于利用接近性原则。例如表格上方的功能按钮，通常我们将高频、核心操作放置在左侧，低频、辅助功能放置在右侧。通过增大元素间的距离，达到功能分区的目的。

相似性原则

相似性原则是通过颜色、尺寸、图形等方面的共同属性，实现信息的分组或者高可读性。

例如在可视化图表中，不同范围值的指标采用不同的背景色。通过背景色的差异，将同一范围内的数据形成视觉关联，提高用户对信息的识别效率。

通过图形尺寸的相似性也可以构建内容分区。例如阿里云、腾讯云控制台的首页，都采用了双列设计，左侧主要以高频的业务功能信息为主，右侧是辅助运营信息。两列尺寸宽度有明显差异，用户会将相同宽度的卡片归为一组。这样有助于用户理解两类卡片的内容差异，并有效地突出业务信息。

闭合性原则

IBM、苹果的 Logo 设计，无论是“用刀砍过”，还是被“偷咬了一口”，用户仍然可以识别出完整图形。这就是视觉闭合性原则的一种表现方式。

在 UI 设计中，则会通过对齐方式，形成虚拟空间。例如下图中阿里云通过明显的背景色、阴影等手法形成有形的内容空间。而微信公众号则是平铺背景色，内容区借助标题、卡片对齐形成视觉闭合空间，最终将页面划分为左侧导航菜单和内容区两个空间。视觉表现上更轻量化。

另外闭合性是需要元素之间相互辅助的，单独的元素无法构建出闭合空间。以下图为例，虽然四个小的卡片做了间距分割，但是由于界面整体上是横向分割的。我们会将 4 个卡片看作是整体元素去理解和认知。

连续性原则

用户更习惯于从左到右的横扫阅读，因此连续性主要体现在横向空间中。

下图中，虽然左侧的标签文字与右侧的内容信息有较为明显的间距，高度尺寸差距也比较大。但是用户不会将内容看作是 4 个独立的个体，而是理解为两组信息。

在某些场景中，如果信息平均分布，不会产生连续性的视觉感知。

例如下图指标监控中，指标都是采用小卡片，间距、尺寸较为统一。这种情况下用户就很难对信息分组处理。在我看来这些指标只是一个个的视觉散点，没有明确的视觉重点。用户无法感知到内在的逻辑性。用户想要找到某个指标时，需要逐个检索，花费的成本更高。

简单对称原则

通过上述很多图片，我们可以看出页面元素基本都是横平竖直，中规中矩的元素和分割方式。或许有些单调乏味，但是胜在简单，不会带来额外的视觉噪点。

特别是 B 端产品，基本看不到异形的存在，甚至全圆角矩形都很少见到。即使有异形，也只是作为视觉表现元素存在于内容中，而不会作为空间的划分边界。

主体与背景原则

主体与背景原则最典型的应用就是蒙版弹窗。通过拉大主体与背景的差异性，凸显弹窗信息。

当我们需要着重表现内容时，同样适用于主体与背景原则。例如登录界面的设计，会通过差异化的背景、阴影等方式，带给用户清晰的视觉层级，适当凸显输入框的主体地位。

而 B 端内容区是核心空间，基本都是采用纯白背景，与页面背景形成对比，从而占据信息的主体地位。

共同命运原则

共同命运原则听起来有点玄学，指的是相同运动特征的元素会被认为是同一组或者是具有相关性的内容。运动的元素在 B 端产品中应用很少，我没有找到合适的案例解释这个原理。

在移动端产品中有些应用案例。比如 iOS 系统中，桌面布局编辑态下抖动的图标，可以与静态不可编辑的内容形成隔离效果，视觉引导性更强。同样今日头条频道编辑时，也采用了抖动效果。

总结

虽然 B 端产品没有 C 端色彩丰富，表现力上没那么炫酷。但是两者对信息传达的要求是一样的，要求和谐、有序、层次分明，辅助传达内在的业务层信息。灵活地运用格式塔原理将对产品的体验提升会有很大的帮助。

格式塔原理不仅限于视觉表现，产品经理或交互设计师在原型设计时，也要重视格式塔原理，辅助设计方案表达，提高团队间的协作效率。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

设计原则是设计师为规范和塑造他们的作品而制定的规则。这些原则强调焦点设计元素，遵循它们有助于帮助设计师与广泛受众产生共鸣。

尽管设计原则听起来可能限制了自由，但它们的创建是为了支持设计师的工作，而不是设置障碍。您可以将它们视为建立一般顺序但不干扰作者创造力的拼写规则。因此，设计工作依赖于设计原则，一旦使用得当，就会开始吸引观众的注意力和兴趣。理解这些原则意味着理解并控制整个项目、创建它的过程以及每个涉及的设计元素。

不同的团队和工作室区分不同数量的设计原则。然而，七项原则被认为是基本原则。它们是平衡、层次、统一、对比、强调、比例和重复/节奏。

1. 平衡

平衡可能是最明显和最容易理解的原则。这也是让视觉内容感觉舒适的一个重要功能。这个想法是设计的每个元素——比如字体、颜色、图形、背景、形状、图案、按钮、文本等——都有它们的视觉重量。较重的元素会迅速吸引观众的注意力，而较轻的元素则不会，主要用于完成整个场景的整体性与和谐性。

有两种类型的平衡，对称和不对称。对称平衡是通过沿中心轴对齐的等重元素实现的。不对称平衡与镜像相反。它使用不同权重的元素并且更常见。这样的构图围绕一个或几个突出的部分排列，因此创作者寻求轻元素和重元素之间的平衡以获得视觉图像。

2. 层次结构

层次结构是网页和应用程序设计中最重要的设计原则之一。它用于对设计元素进行优先级排序，并根据其重要性设置重点。这里有一个简单的规则：如果一切都标记为重要，那么一切都不重要。

层次结构引导用户跨界面从焦点对象到二流对象，并有助于按逻辑顺序了解事物。如果忽略了这一设计原则，构图就会显得杂乱无章，而且很难找到必要的信息。

设计中有两种主要类型的层次结构：视觉和排版。可以通过场景内对象的比例和颜色强调获得视觉层次。排版层次结构是通过不同的字体、大小和字体粗细来实现的。

3. 统一

你可能遇到过这样的网站、印刷品，甚至是室内设计概念：大量的元素很难融合在一起，所以整体形象看起来一团糟。为了解决这种图形的混杂，使用统一的原则，应该创造视觉和心理的和谐。

统一意味着与品牌理念和信息的联系，因此每个制作的设计，无论是网站页面、T恤印刷品还是广告，都应该成为其中的一部分。它与设计系统密切相关，是大多数平面设计公司和项目应该考虑的原则。

4. 对比

虽然统一和平衡创造了易于交互的视觉上可接受的设计，但多样性增加了吸引注意力的细节。如果没有多样性，即使是最平衡、最精心组织的概念也会缺乏对比，变得单调乏味。

这个设计原则为项目添加不同的视觉元素、图案、符号或排版。事实上，这是设计师可以尽情发挥创造力并顺应潮流的地方。

5. 强调

强调是通过在构图中设置焦点元素来创建画面的设计原则。这意味着它们会吸引观众的眼球，但不会超过其他元素，否则平衡就会倾斜。这就像一个好的海报设计：你立刻就能看到正在演奏的乐队，并且找到细节：音乐会的日期和地点、门票价格等。

强调可以通过比例、重量、位置、颜色、形状和样式来实现。创建一个大胆的、色彩鲜艳的元素是不够的，因为一切都应该在一个设计中连贯地显示。

6. 比例

比例是指元素相互之间的大小，是最全面的设计原则。调整比例并根据物体的大小和视觉重量对物体进行分组有助于突出重点并保持构图的统一。

设计组合中比例的主要思想是，越重要的元素越大，不重要的元素越小。就像着陆页、文章或海报一样，对象之间的比例关系与其对读者的重要性相关。

7. 重复/节奏

这两个设计原则相辅相成，相互补充。重复是指在设计中实现相同或相似的元素：如图像、按钮、颜色、字体或形状。它用于创建统一性和一致性。通过使用相同的图标、背景或风格化元素，可以轻松实现重复。如果使用得当，它可以控制浏览者在页面上的移动，因为重复元素可以成为吸引和引导注意力的绝佳方式。

元素重复的方式创造了一种节奏感。当设计中有节奏感时，观者将其视为旋律。有五种类型的视觉节奏：随机、规则、交替、流动和渐进。

随机— 没有特定规则间隔的重复元素。

定期— 重复进行相同的间隔。它通常是通过创建一个网格或一系列垂直线来获得的。

交替— 允许在设计中重复多个元素。

流动— 模仿自然流动并显示遵循各种弯曲和曲线的重复元素。

渐进式— 通过在重复时改变元素的一个特征而获得。

最后

定义要使用的设计原则并不总是有意义的，因为它们可能会在创作过程中参与和拒绝，而设计师的主要目标仍然是传达重要信息，创造和谐构图，设计可用的界面。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

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

最近几年以来，大家能看到B端设计趋势已经越来越火热，在B端设计中关于图表的设计算是为数不多的视觉发挥点了。那么怎样才能做好图表设计，让设计出来的图表高大上，符合业务需求，让业务方和总监对你赞不绝口，本文就必须看完和收藏了，因为实在是太实用！

彩云之前也在我的公众号上分享过一篇关于数据可视化的干货，《如何做好数据可视化设计，国外大神给出了十条实用建议》，今天的这篇算是更加系统和完善了。

应用设计越来越依赖数据驱动，对高质量的数据可视化需求也越来越高。然而我们身边却充斥着令人困惑和误导的数据图表，但我们其实可以通过遵循一些简单的规则来改变这个情况。

1. 选择一个正确的图表可视化类型

选择错误的图表类型，或默认为最常见的数据可视化类型，可能会让用户感到困惑或导致对数据的误解。根据用户希望看到的内容，可以用多种方式表示相同的数据集。尽量做到每一次做数据可视化时都能从数据集类型分析和用户访谈开始。 

2. 根据正负值使用正确的绘图方向

当使用水平条时，在基线的左侧绘制负值，在右侧绘制正值。不要在基线的同一侧绘制负值和正值。 

3. 条形图总是以0基线开始

删数据起点会导致曲解。在下面的例子中，看左边的图表可以很快的得出结论，值B比D大3倍多，而实际上，两者的差异要小得多。从0开始可以确保用户获得更准确的数据表示。

4. 折线图应该要清晰体现y轴上的趋势变化

对于折线图，总是限制y轴比例从0开始可能会使图表几乎平坦。由于折线图的主要目标是表示趋势，因此根据给定时期的数据集调整比例并保持直线占据y轴范围的三分之二是很重要的。 

5. 使用折线图时要考虑时间连贯性

折线图是由线连接的“标记”组成，通常用于可视化时间间隔内的数据趋势。这有助于说明数值是如何随时间变化的，并且对于较短的时间间隔非常有效，但当数据更新不频繁时，这可能会导致混淆。 

例如: 使用折线图来代表年度收入，如果数据是每月更新的，则每个月在图表中会生成一个个孤立的标记点。用户可能会假设连接“标记”的线代表实际值，而在特定时间实际的收入数字是未知的，所以可能会产生误会。在这种情况下，使用垂直条形图可能是一个更好的选择。 

6. 不把折线图强行”平滑“

平滑的折线图可能在视觉上很好看，但它们错误地反映了背后的实际数据，而且过粗的线会模糊真正的“标记”位置。 

7. 避免使用比例不同的双轴折线图

通常，为了节省可视化空间，当有两个具有相同度量但大小不同的数据系列时，可能倾向于使用双轴图。但这些图表不仅难以阅读，而且它们还以完全误导的方式代表了两个数据系列之间的比较。大多数用户不会密切关注比例，只是浏览图表，然后就得出了错误的结论。 

8. 限制饼图中显示的切片数量

饼状图是最流行的也是经常被误用的图表之一。在大多数情况下，条形图是更好的选择。但如果你决定做一个饼状图，有2个比较好的建议:

1）不要超过5-7片，保持简单

2）可以将额外的最小段分组到“其他”切片 

9. 在图表上直接标注

如果没有适当的标签，无论你的图表有多好，它都不会有意义。直接在图表上标注对所有用户都非常有帮助。查阅图例需要时间和精力来理清数据和对应的部分。 

10. 不要在切片上贴数据

将数据放在切片上可能会导致多个问题，在可读性问题上和窄切片上都会有挑战。相反，添加黑色标签能清晰的链接到每个部分。 

11. 保持饼图切片秩序以提升阅读效率

在确定饼片秩序时，有几种常用的方法:

1）将最大的切片放在12点的位置，然后将下一片切片顺时针降序排列

2）把最大的切片放在12点的位置，第二大的放在顺时针相邻位置，第三大的放在11点的位置，其余的切片按顺时针降序排列 

12. 避免随机排列

同样的建议也适用于其他许多图表。不要默认采用字母排序，将最大的数值放在顶部(对于水平条形图)或左侧(对于垂直条形图)，以确保最重要的数值占据最突出的空间，减少眼球运动和阅读图表所需的时间。 

13. 窄的饼图是难阅读的

饼图通常不是最容易阅读的图，因为比较相似的值非常困难。当我们把中间部分去掉，创建一个圆圈图表时，我们腾出了空间来显示额外的信息，但这样牺牲了清晰度，极端情况下，图表就会变得毫无用处。 

14. 视觉效果不要抢了数据风头

不必要的造型不仅会分散注意力，还可能导致对数据的误解和用户的错误印象。你应该避免:

1）3D元素，明暗面

2）阴影、渐变和其他扭曲的多彩色

3）斑马图案，过多的网格线

4）过度装饰，斜体，粗体或衬线字体 

15. 选择与数据性质相匹配的调色板

颜色是有效的数据可视化的组成部分，在设计时考虑以下3种颜色类型:一个定性调色板最适合显示分类变量。为确保易用性，所分配的颜色应该是不同的。连续调色板最适合需要按特定顺序放置的数字变量。使用色相或亮度或两者的组合，可以创建一个连续的颜色集。

发散调色板是两个连续调色板的组合，中间有一个中心值(通常为0)。通常不同的调色板将传达积极和消极的价值。确保颜色也与“消极”和“积极”表现的概念相匹配。 

看看一个方便的工具- [ColorBrewer]https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3，它可以帮助你生成各种调色板。 

16. 设计的可访问性

根据美国国家眼科研究所(National Eye Institute)的数据，大约每12人中就有1人是色盲。你的图表只有在广泛的受众可以访问时才会成功。

1）在调色板中使用不同的饱和度和亮度

2）把现有配色去色然后检查对比度和可读性。 

17. 关注易读性

确保排版能够准确传达信息，帮助用户专注于数据，而不是分散用户的注意力。

1）选择易读的字体，避免衬线和装饰过度的字体

2）避免使用斜体、粗体和全部大写

3）确保与背景有高对比度

4）不要旋转文字

 

18. 使用水平条形图代替旋转标签

这个简单的技巧将确保用户能够更有效地阅读图表，而不会扭伤他们的脖子。 

19. 事先选择合适的图表库

如果你的任务是在web和移动项目中添加交互式图表，你应该问的第一个问题是我们将使用什么图表库?现代图表库包含了许多前面提到的交互和规则。基于已定义库的设计将确保易于实现，并能提供大量交互想法。 

20. 做成动态图表

帮助用户通过改变参数，可视化数据进行探索。然后得出结论，最大化价值和洞察力。在下面的示例中，你可以看到IOS Health应用使用了各种数据表示的组合。 

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：ui中国   作者：彩云Sky 

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

本期提纲：

• 为什么我们需要新的设计原则
• 制定新的设计原则
• 推行新的设计原则
• 新设计原则的影响

在本文中，我们将分享如何提炼出设计原则，并在团队中引推广实施的。

去年，我们一群人聚在一起探讨了一个棘手的问题：随着 Spotify 的不断发展，我们如何在产品迭代中保持高水平的设计质量？

经过研究和讨论，我们确定了一个方向：为了提高质量，我们需要清晰、有用的设计原则。一方面，我们认为只有定义了 Spotify 的设计原则是什么，才能够帮助团队评估他们是否以 “Spotify 方式” 进行设计。另一方面，我们还希望帮助设计师在讨论设计目标和设计评审时使用相同的评价标准。通过不断更新的设计原则可以实现保持高水平设计质量的目标。

为什么我们需要新的设计原则

为了解决设计无法标准化的问题，2013 年，Spotify 制定了最初的设计原则：内容优先、尽量活泼、建立熟悉感、争取事半功倍、保持真实、恰如其分，这些原则让设计师们在输出和讨论方案的时候有方向可循。有了设计原则之后，我们的设计方案在字体、色彩、图片、板式、信息架构和交互方式等方面都具备了一致性，即使不是设计师也能够对我们的设计产生共鸣。

Spotify 在 2013 年制定的设计原则：内容优先、尽量活泼、建立熟悉感、争取事半功倍、保持真实、恰如其分。

但设计原则是需要与我们的业务目标一起向前的，到了 2020 年，Spotify 已经发生了很大变化，我们在播客上加倍发力，我们为消费者提供的不仅仅是音乐，而是包含广播、故事等更多元的音频形式；我们服务的对象，不仅仅是听众，还有艺术家和广告商；我们的设计师团队也不断的壮大，发展到现在已经有近 200 人。

看着 2013 年制定的设计原则，我们问自己：这些设计原则对于我们现在的设计是否还是正确的？Spotify 的设计师们是否真的意识到这些设计原则的存在？答案是否定的。

我们经过对现有设计原则的讨论，发现了以下三个方面的问题：

1. 无法满足不同内容的需求：原本的设计原则，更专注于消费者的音乐体验，然而随着 Spotify 的发展壮大，我们的产品不仅仅是音乐，而是包含更多内容的音频，但这些原则似乎并不适用于我们设计的所有内容。

2. 概念容易混淆：比如 “lagom” 和 “do less”，都有简约的、恰到好处的意思，在表意上存在重叠使得它们很难分辨，在评估设计方案时，我们很难确定从哪一方面评估我们的工作。

3. 数量过多的原则很难记住：根据我们的调研和设计师的反馈，设计师们往往记不住这些设计原则的内容，这也就导致了他们无法很好的在设计实践中应用。

简而言之，旧的设计原则需要更新。

制定新的设计原则

去年，我们工作组的十几名产品设计师和用户体验设计师，在一个协作研讨会上聚在一起讨论如何制定新的设计原则，我们希望团队中的每个人都参与进来，而不是让一个人来决定 Spotify 的设计原则应该是什么。

我们通过以下三个问题，指导我们制定新的设计原则：

• 我们为什么要制定这些设计原则？
• 它们是给谁用的？
• 它们将如何使用？

经过一番激烈的辩论，我们得到了答案：

• 设计原则是为了帮助设计创造，并为评估设计成果提供衡量标准。
• 设计原则的核心对象是我们的设计师。
• 在设计创作过程中设计可以帮助产品设计师做出设计决策；在评估设计时，提供统一的衡量标准，避免以短暂流行风格进行判断。

然而真正的挑战是应该怎样定义新的设计原则。我们在设计时应该追求什么样的价值观和设计属性？产品应该传递给用户什么感受？

对于这些问题，每一位设计师都有自己的观点。我们让所有人将自己对 spotify 的设计原则进行定义，并将这些想法写在便利贴上。我们将这些想法进行总结分类，为了避免重复性的概念，我们把相似的概念归为同一类别，并且让大家对这些观点进行具体的描述，来帮助大家理解他们想要的设计原则。最后，我们将所有的想法都汇集在一个巨大的矩阵图中，通过设计师们的投票来帮助我们缩小范围，确定大家认为合理的设计原则。

带有便利贴的矩阵图

通过上面的方式，我们提出了新原则的草案。同时我们也通过与用户沟通，进一步了解用户对于 spotify 设计的理解，根据这些反馈，我们进一步在设计原则的概念细节上进行调整后，确定了新的 Spotify 设计原则：相关性、人性化、统一性。

Spotify 新设计原则：相关性、人性化、统一性

1. 相关性

把每个用户作为一个独立的个体来看待。

Spotify 是为每一位用户量身定做的，我们希望 Spotify 具有个性化的感觉。为了给用户提供专享的感受，在设计过程中，我们认真思考我们所展示的内容是什么、展示给谁以及在什么背景下呈现。简单来说，我们会在正确的时间提供正确的信息给特定的人，我们不想要 “一刀切” 的体验。

那么我们在具体的实践中，是怎样体现 “相关性” 的设计原则呢？

举个例子，同样是歌曲 “pure seduction” 的封面，欧美国家的用户看到的画面可能是激情热吻，但对于相对内敛的东南亚国家用户，封面的内容就会以更加含蓄柔和的方式呈现。同样的，印度用户大多数更喜欢听印度语的歌曲，我们在一开始就让他们选择自己喜欢的音乐语言，使用户得到与自己具有 “相关性” 的音乐内容。

我们尊重不同的文化和社会环境，我们希望每一个视觉呈现都能够适合当地用户，能够被当地用户所理解。

Spotify 播放列表封面和注册页面的示例

2. 人性化

人性化的设计是可以与用户交流的。

Spotify 是依赖于推荐算法的产品，但这种技术也是基于人的喜好的。Spotify 像人类一样，也会有情感，有自己的思考方式。我们希望用户在使用 Spotify 时，可以有一种 “和人交流的感觉”，如果我们把 Spotify 设计得太工具化，就会失去这种感觉了。我们的每周推荐歌单封面，没有选用精致的照片，而是直接使用用户的个人头像，通过这种方式我们告诉用户 “这是只为你一个人准备的歌单”，还有什么比自己的个人形象更加 “人性化” 呢？再举个例子，在 Spotify 的儿童版本中，我们将创建个人资料的行为变成了创建有趣的卡通角色的过程，“人性化” 的虚拟形象使 Spotify 与儿童用户更流畅的交流。

Discover Weekly 封面和 Spotify Kids 应用程序的示例

3. 统一性

统一性可以使线下产品和线上产品实现品牌感。

我们的线上和线下产品的设计风格都应该具有统一性，即使没有过多的说明，人们看到一眼也可以知道这是 Spotify 的设计。统一的设计风格，可以让用户对于我们的产品有一定的熟悉感和信任感。正因如此，我们没有完全抛弃 2013 年制定的的设计原则，去创造新的方向，而是根据之前的设计原则进行修改和优化。为了实现品牌的一致性，我们希望我们所制定的原则是可以在不同设计对象和设计场景中复用的。

下图中是一个营销活动的案例，无论是线下的广告牌、宣传海报，还是线上的活动页面，我们的设计风格都保持了统一性，无论你在线下还是线上看到，你都会知道这是 Spotify 的产品。

Spotify 营销活动的示例

推行新的设计原则

提出设计原则是一回事，让每个人都参与进来完全是另一回事。如果我们想让新设计原则持续运行下去，就需要一个执行计划。

在推行设计原则的初期，我们在一个设计团队的工作坊中试运行了新的设计原则。通过观察设计师在实际工作过程中，是否由于运用了新的设计原则更好的完成了设计实践，帮助我们判断这些原则是否是真的发挥作用。之后，我们将这些原则纳入现有的设计活动中 —— 例如，在全员设计会议中，介绍这些原则，并将它们添加到我们的设计手册和新员工的入职流程中。几个月后，我们与 Spotify 的所有设计团队都开展了一系列工作坊。这样，每个设计师都可以学习如何将设计原则应用在工作实践当中。

在工作坊中，我们将设计项目中应用设计原则的案例记录下来，比如，以用户的名字来命名歌单，建立与用户的 “相关性”。我们将这些设计师们在真实的项目中遇到的案例整理到一起，以便其他设计师看到具体案例时，更好的理解新的设计原则。

展示如何使用设计原则的卡片

在推行新的设计原则的过程中，我们发现有两点值得注意：

1. 恰当的案例，有助于我们对新设计原则的理解

口头上表达 Spotify 的设计原则是 “人性化” 或是 “相关性” 是很容易的，但是什么样子的设计才是 “人性化” 和 “相关性” 的呢？在推行设计原则时，用例子来说明这些原则的含义非常有用，案例越多越有利于我们对这些抽象设计原则的理解。

2. 周边产品可有助于设计师理解和记忆新的原则

设计原则也可以通过更多的周边产品，如海报、贴纸或其他产品去推广。理解新的设计原则和理念需要很多时间，周边产品可以帮助团队理解和记忆这些原则。为了推行新的设计原则，我们已经开始设计相关的海报、文具等周边产品。

设计原则的在线下产品应用的示例（由 deepyellow 和 dribbble 图形组成的样机模板）

在没有 “官方” 的周边产品时，一位设计师把设计原则作为自己的笔记本电脑桌面背景，这也是一个很好的理解设计原则的方法。

带有壁纸的笔记本电脑，壁纸上写着设计原则：相关的、人性化的、统一的。

新设计原则的影响

我们推出了这些设计原则后，有什么变化呢？

1. 新的设计原则更容易被大家记住和应用

现在，大多数设计师都意识到了 Spotify 有设计原则。根据我们的设计行动小组最近的一项调查表明，设计师们已经了解了 “相关性、人性化和统一性” 的设计原则，并且在设计过程中，设计师们也会考虑这些原则。这表明新的设计原则与我们之前的六项原则（内容优先、尽量活泼、建立熟悉感、争取事半功倍、保持真实、恰如其分）相比，更适用且更容易被记住，也更容易在实践中应用。

2. 为设计评审建立了统一的标准

设计师有时在设计评审时会参考这些原则，但在这方面还有有待改进。在评审期间，设计师仍然需要有意识的参考设计原则。随着时间的推移，我们希望这成为设计师的本能反应。

我们开始制定新的设计原则时，目的是帮助设计师提升设计质量。那么我们的新设计原则是否使设计质量有所提升呢？现在说还为时过早。但我们希望 “相关性、人性化和统一性” 可以传达出 Spotify 的产品目标，这些原则能够不断提醒我们做得更好。

总结

设计原则不应该是一成不变的，设计原则需要根据我们的产品目标的不断发展进行优化更新，不断适应新的设计环境和设计对象，以持续保持高质量的设计输出。

好的设计原则应该是更容易被大家记住，并在工作实践中应用的。好的设计原则可以帮助我们在工作中做出正确的设计决策，在设计评审中建立统一的标准。相比设计原则的制定，设计原则的推行也同样重要，合理的推行方式可以使设计师真正的理解设计原则，并能够像本能反应一样在设计实践中应用。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：优设    作者：腾讯设计

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

1.阻断性原则

『 Ant Design是什么 』

众所周知蚂蚁集团的B端产品是一个庞大的系统，数量多且功能复杂，而且变动频繁，常常需要设计师和开发人员能快速做出工作上的配合。同时这类产品中有存在很多类似的页面以及组件，根据原子设计理论可以得到一些稳定且高复用性的内容。

随着这两年B端产品的逐渐白热化，越来越多的用户对更好的用户体验有了进一步的要求。带着这样的一个终极目标，蚂蚁集团体经过大量项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 —— Ant Design。通过组件化设计规范，降低冗余的生产成本，让设计者专注于更好的用户体验。

『 Ant Design设计原则是什么 』

针对B端产品反复出现的一些设计体验等问题， Ant Design 给出标准的设计原则，实现跨应用交互一致性的有效融合。依照这些原则使用 Ant Design 组件设计界面，既减少了不必要的认知成本，又能够提升设计的效率。考虑到需要适应各种定制化的业务场景，设计原则具有一定的灵活性，万变不离其宗，通过了解设计原则的构建逻辑，高效组织信息、帮助建立用户与界面的互动等原则性要求，可以衍生出更具场景特性的设计方案。

① Ant Design设计原则的由来

可以说 Ant design的设计规范摄取了《web界面设计》和《写给大家看的设计书》两本书中的精华原则，并做了理论之外最佳的设计实践。其十大设计原则反过来是对书本理论的补充，我在看书的过程结合『Ant Design 』能更好地理解那些原则的释义。每一个原则都用了大量通俗易懂的案例来补充说明，这也是为什么国内的企业一直以来都很喜欢使用这套组件的原因。

② Ant Design设计原则的适用范围

1. 我们先说说『Ant Design 』的适用范围：

稍微了解 Ant Design 的小伙伴都知道，本系统是针对B端后台系统，承载媒介是PC端的浏览器。使用的人员主要包括：用户体验设计师、交互设计师、UI设计师、前端程序员等。

2. 再说说 『 Ant Design 设计原则 』的适用范围：

顾名思义『 设计原则 』主要是针对设计师在创作页面时依照的标准。虽然『 Ant Design的设计原则 』是 Ant Design 系统的一部分，但是前文已经提到，此原则是摄取了《web界面设计》和《写给大家看的设计书》两本书中的精华，所以设计师可以把这些原则运用到任何的设计领域，并不要局限于企业后台系统的PC端产品。

为了方便大家理解，讲一个小故事。故事来自于《写给大家看的设计书》，作者有一年圣诞节收到一份礼物——一本关于植物的百科全书。作者翻阅之后，发现其中有一颗叫约书亚树的树，造型奇特，自己从未见过。于是决定出门转转，然而发现外面到处都是这种树。故事到这里就完了。

可能大家会想，这个故事要讲一个什么道理呢？简单来说就是，当你手中有个锤子，满世界都是钉子。当你了解到下面要讲的十个设计原则后，你会发现它们处处都适用。

③ Ant Design设计原则的内容

十大原则如下：

• 亲密原则（Proximity）

• 对齐原则 (Alignment)

• 对比原则 (Contrast)

• 重复原则 (Repetition)

• 直截了当 (Make it Direct)

• 简化交互 (Keep it Lightweight)

• 足不出户 (Stay on the Page)

• 提供邀请 (Provide Invitation)

• 即时反应 (React Immediately)

• 巧用过渡 (Use Transition)

『 如何运用Ant Design的设计原则 』

对于一个初级设计师而言，想要了解UI用户体验等知识，学习 Ant Design 的设计原则算是比较快能上道的，因为 Ant Design 是吸取了很多前辈的精华，提炼而成的系统。打个简单的比喻，对于设计师而言 Ant Design 就是设计师学习『 视觉规范 』，掌握『 设计原则 』最好的字典。

接下来我就给大家说说我是如何快速理解 Ant Design 的这10条设计原则并运用到工作当中。

Ant Design 定义了10条设计原则，根据『 席克定律 』选项太多不易记忆，于是我找到了这些设计原则的共通性，将其归为4类，也就是大家只需记住四类设计原则，在工作中适当延展即可。

① 视觉层级清晰

包含 Ant Design 的设计原则有：『 亲密原则 』『 对齐原则 』『 重复原则 』『 对比原则 』。

「视觉层级清晰」的重要性体现在 交互前 用户看到的内容结构是清晰明确的 。一个层级混乱的界面，任何信息的传达都是无效的。所以保证清晰的排版布局是人机交互前的基础。

1. 亲密

如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。

1.1 纵向间距关系

• 纵向间距：在 Ant Design 中，通过「小号间距」「中号间距」「大号间距」这三种规格来划分信息层次结构。这三种规格分别为：8px（小号间距）、16px（中号间距）、24px（大号间距）。

• 增加元素：通过增加「分割线」来拉开层次。在这三种规格不适用的情况下，可以通过加减「基础间距」的倍数，或者增加元素来拉开信息层次。注：在 Ant Design 中，y = 8 + 8 * n。其中，n >= 0，y 是纵向间距，8 是「基础间距」。

1.2 横向间距关系

• 组合排布：为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性。（注：栅格是另外一个模块的内容，这里不赘述。）

• 复选框内：在一个组件内部，元素的横向间距也应该有所不同。

2. 对齐

正如「格式塔学派」中的连续律（Law of Continuity）所描述的，人类的视觉系统往往倾向于将看到对象的直线继续成为直线，曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。

格式塔学派（德语：Gestalttheorie）：是心理学重要流派之一，兴起于 20 世纪初的德国，又称为完形心理学；主张人脑的运作原理是整体的，「整体不同于其部件的总和」。——摘自「维基百科」

2.1 文案类对齐

如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。

• 推荐使用：标题和正文左对齐，使用了一个视觉起点。

• 不推荐使用：标题和正文使用了两个视觉起点，不推荐该种对齐方式，除非刻意强调两者区别。

2.2 表单类对齐

• 冒号对齐：冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。

2.3 数字类对齐

为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。

3. 对比

对比是增加视觉效果最有效方法之一，同时也能在不同元素之间建立一种有组织的层次结构，让用户快速识别关键信息。

注：要实现有效的对比，对比就必须强烈，切不可畏畏缩缩。

3.1 主次关系对比

为了让用户能在操作上（类似表单、弹出框等场景）快速做出判断， 来突出其中一项相对更重要或者更高频的操作。

注意：突出的方法，不局限于强化重点项，也可以是弱化其他项。

• 需要区分主次场景：

• 不需要区分主次的场景：「通过」和「驳回」都使用次按钮，系统保持中立。在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户或者诱导用户做出判断。

3.2 总分关系对比

• 总分关系：通过调整排版、字体、大小等方式来突出层次感，区分总分关系，使得页面更具张力和节奏感。

3.3 状态关系对比

常见类型有「静态对比」、「动态对比」。

• 静态对比示例：用不同颜色的点，来表明不同状态。

• 动态对比：鼠标悬停时，该项和其他项呈现出明显不同的视觉效果，响应用户操作。通过改变颜色、增加辅助形状等方法来实现状态关系的对比，以便用户更好的区分信息。

4.重复

相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。

4.1 重复元素

重复元素可以是一条粗线、一种线框，某种相同的颜色、设计要素、设计风格，某种格式、空间关系等。

• 线框重复：

• 设计要素重复：

• 文案格式重复：

② 交互操作高效

包含 Ant Design 的设计原则有：『 直截了当 』『 足不出户 』『 简化交互 』『 即时反应 』。

「交互操作高效」的重要性体现在 交互时 用户操作流畅、简单、用时短。如果仅仅只是解决高效的问题，却忽略用户能否理解流程如何操作，那这样的解决方案也是徒然。有的时候并不是解决实际时间的长短，而是用户的心理时间是否太长的问题，就像我们打游戏往往会觉得时间过的很快，但是在等待页面加载时却不耐烦。

1. 减少打断

能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视（Change Blindness），导致用户心流（Flow）被打断。频繁的页面刷新和跳转，就像在看戏时，演员说完一行台词就安排一次谢幕一样。

变化盲视（Change Blindness）：指视觉场景中的某些变化并未被观察者注意到的心理现象。产生这种现象的原因包括场景中的障碍物，眼球运动、地点的变化，或者是缺乏注意力等。——摘自《维基百科》

心流（Flow）：也有别名以化境 (Zone) 表示，亦有人翻译为神驰状态，定义是一种将个人精神力完全投注在某种活动上的感觉；心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》

• 气泡提示：对于操作的反馈是必要的，下文会提到，但是为了减少打断用户，轻量级的反馈气泡提示即可。

• 输入覆盖层：鼠标「点击」图标触发；鼠标「点击」悬浮层以外的其他区块后，直接保存输入结果并退出。不用弹窗或跳转的形式编辑，只需要在触发图标附近弹出浮层即可，这样避免用户视动线的混乱，减少打断用户操作的心流。

2.缩短步骤

正如 Alan Cooper 所言：「需要在哪里输出，就要允许在哪里输入」。这就是直接操作的原理。eg：不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑。

常规的编辑模式，界面都会跳出一个弹窗或者是一个页面跳转，无形之中用户走了更多的流程路径，如果能在当前页面就把编辑问题解决掉那就符合了 Ant Design 『 足不出户 』的设计原则。

• 文字链/图标编辑：

状态一：在可编辑行附近出现文字链/图标；

状态二：鼠标点击「编辑」后，出现「输入框」、「确定」、「取消」表单元素，同时光标定位在「输入框」中。

• 多字段行内编辑：编辑模式在不破坏整体性的前提下，可扩大空间，以便放下「输入框」等表单元素；其中，在 Table 中进行编辑模式切换时，需要保证每列的不跳动。

• 拖放图片/文件：在早前很多产品在上传功能上，都是跳出弹窗再选择文件上传，现在基本都可以实现拖拽上传了。这样的设计大大提高了用户使用上传功能的效率。

• 模糊搜索：系统根据用户所查询的关键词，智能匹配可能的结果。

• 定时自动更新：新增的列表项「高亮」，持续几秒后恢复正常。不需要用户手动刷新，减少不冗余的操作。

3.避免回忆

人们在思考的时候，是需要依靠大脑神经元之间相互传递信号，而回忆是需要调用更多的的神经元传递信号，简单地说就是非常费脑子。

• 搜索历史：搜索历史的功能，可以减少用户的回忆，使得整个体验更加轻松愉悦。

4.信息降噪

根据费茨法则（Fitts's Law）所描述的，如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互，起到信息降噪的作用。

费茨法则 ：到达目标的时间是到达目标的距离与目标大小的函数，具体：。其中：1.设备当前位置和目标位置的距离（D）；2.目标的大小（W）。距离越长，所用时间越长；目标越大，所用时间越短。

• 列表嵌入层：将列表为多层级时，隐藏弱层级列表内容，可以让用户更加直观地看到重要信息。当我在聚焦某一个列表模块的内容，鼠标悬浮即可展开。

• 标签页：标签也换可以将信息内容进行分类，让用户更易理解。

• 渐进式展现：用户在填写表单时，会根据当前录入的数据，展现下一项需要填写的内容，这样的展现方式可以屏蔽掉无关紧要的内容。

• 悬停即现工具：鼠标悬停时，出现操作项。这样将不重要信息或者操作隐藏起来，不会干扰到用户浏览其他重要内容。

③ 系统反馈即时

包含 Ant Design 的设计原则有：『 简化交互 』『 巧用过渡 』『 即时反应 』。

「系统反馈及时」的重要性体现在 交互之后 立即给出反馈。就像「牛顿第三定律」所描述作用力和反作用一样，用户进行了操作或者内部数据发生了变化，系统就应该立即有一个对应的反馈，同时输入量级越大、重要性越高，那么反馈量级越大、重要性越高。

1.实时反馈

虽然反馈太多（准确的说，错误的反馈太多）是一个问题，但是反馈太少甚至没有反馈的系统，则让人感觉迟钝和笨拙，用户体验更差。

牛顿第三定律 ：当两个物体互相作用时，彼此施加于对方的力，其大小相等、方向相反。——摘自《维基百科》

• 实时预览：根据用户的输入，提供关于密码强度和有效性的实时反馈提示。

• 文字链热区：当悬浮在 ID 所在的文字链单元格时，鼠标「指针」随即变为「手型」，单击即可跳转。

2.过渡反馈

人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。

Adding: 新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。

Receding:  与当前页无关的信息元素应采用适当方式移除。

Normal: 指那些从转场开始到结束都没有发生变化的信息元素。

• 表格加载：网络不好或者表格数据过多，都有可能导致加载缓慢，这时有一个小动画可以缓解用户的焦虑感。

• 富列表加载：用户在打开列表时，页面无法做到一次性加载所有的数据，同时有为了减少翻页的繁琐操作，就有了下拉自动加载的。

• 页面加载：当用户访问的页面体量过大时，系统会通过给出倒计时或完成百分比，来缓解用户焦虑，并且给用户友好可控的感觉。

• 滑入与滑出：可以有效构建虚拟空间。  

• 折叠窗口：在视图切换时，有助于保持上下文，同时也能拓展虚拟空间。

• 对象增加：在列表/表格中，新增了一个对象。

• 对象删除：在列表/表格中，删除了一个对象。

• 对象更改：在列表/表格中，更改了一个对象。

• 状态一：用户更改了「详情」中的值；

• 状态二：用户点击「保存」后，详情所在的网格出现「黄底」，表明该对象发生了更改；

• 状态三：底色持续几秒后，恢复正常。

• 对象呼出：点击页面中元素，呼出一个新对象。

3.结果反馈

用户常常会疑惑自己的操作是否成功了，哪怕是失败了也是需要系统反馈，这样才能安心进行下一步的操作。

• 页面反馈结果：

• 气泡反馈结果：

④ 用户自由可控

包含 Ant Design 的设计原则有：『 提供邀请 』『 足不出户 』『 即时反应 』。

「用户自由可控」的重要性体现在 交互前对下一步操作的预判；交互时 不论操作后的结果多严重都要允许用户自主决策；以及交互后 能否对自己的操作结果反悔。

1.未来预判

很多富交互模式（eg：「拖放」、「行内编辑」、「上下文工具」）都有一个共同问题，就是缺少易发现性。如果用户在操作前就能得到下一个交互层次的提醒和暗示，以表明在下一个界面可以做什么。  这样人机交互的过程往往更加自然、顺畅。

• 点击刷新：对于设计师而言，最常见的例子要属花瓣了，我们时长会沉浸在我们浏览的瀑布流卡片中，如果系统强行刷新当前页面，用户很有可能迷失。邀请用户主动更新，既不会错过新的消息，又不会导致我们的心流被打断。

• 未完成邀请：用户在当前页面无法完成登录操作，为了减少用户迷茫的焦虑感，系统告知用户点击“更改”链接，可以去向何处。

• 悬停邀请：鼠标「悬停」时，出现「选择此模板」的按钮。

2.自主决策

虽然系统中缺少不了一些危险操作或者不可逆操作(eg：删除、重置、重装系统等)，但是仍然要用户自主决定是否继续，我们能做的就是让用户再三确认。

• 弹窗提示：虽然弹窗打断用户心流，但是对于重要的操作，这样是最保险的方式。

• 删除知识库提示：是钉钉中，删除「知识库」这一重要内容，是不可逆的，系统需要用户谨慎操作。

3.准许反悔

如果说「自主决策」中提到的案例都是不可逆的，那「准许反悔」的后果严重性会弱一些，系统对用户的操作没有那么强的阻断性，所以要准许用户反悔的，

• 删除撤销：用户点击「删除」后，直接操作；出现 Message 告知用户操作成功，并提供用户「撤销」的按钮；用户进行下一个操作或者 1 分钟内不进行任何操作， Message 消失，用户无法再「撤销」。

『 Ant Design的优点与缺点 』

① 优点

1.助初创团队快速产品快速上线

Ant Design在"幸福者示例中"写到“Ant Design 无法保证业务产品能否成功，但是能帮助业务产品『正确的成功』或者『正确的失败』。”

如果团队有一个产品idea，我们需要通过最少的资源开发此产品并投入到市场中，通过听取用户反馈，验证idea是否可行，快速迭代最终做出更完善的产品。但理想是美好的，但现实是骨感的，在前期研发的过程中通常会出现两个情况。创业团队没有足够的设计资源和时间，前几个版本的产品通常用户体验非常差，这种情况体验差有可能让用户放弃这款产品。创业团队没有好的方法论和协作模式，需要磨合，设计和开发进度一延再延，结果错过了风口，市场被竞品抢占，还没上线就倒闭了。

Ant Design提供了一套完整的界面实现方案，即有代码框架能直接拿来提高开发效率，每个界面组件都经过蚂蚁金服多个项目的考验，具备优秀的用户体验。用Ant Design来做0-1，能快速发布用户体验优秀的产品，听取用户反馈，快速迭代。

当然，创业是九死一生，市场和用户口味都充满了不确定性，谁也没有能力保证产品是否成功，但是只要你能高效的产出质量优秀的产品，不断试错，说不定以后就能成功。

2.减少设计和开发的不确定性。

用 Ant Design 就能高效的产出高质量的产品，减少设计和开发的不确定性。

因为我们公司就使用了 Ant Design 的系统，所以时常会与前端小伙伴沟通，以下都是他们在使用过程的感想。

Ant Design 提供的大量功能比较全面且UI风格统一的组件，能帮助开发者快速搭建通用场景下的应用界面。这大概是得益于蚂蚁金服业务线上极为广泛的应用场景，驱动了 Ant Design 团队通过对使用情况的观察汇总，整理出来了这么一个组件库。他们的经验积累如此之丰富，足以让这个库支持大部分其他前端开发者的需要。

其设计团队给出的设计规范相当详细且经得起推敲，令许多其他团队获益匪浅。

3.节省设计与开发的人力成本

我见过太多宣称自己在乎用户体验的公司，给用户的产品质量确实比较高，但是自己员工内部使用的系统和管理一团糟。种种不便让员工经常加班，情绪消极，这样的团队抄抄竞品达到行业标准体验还行。要想突破是不可能了，因为创新需要员工有充沛的精力和主动性，天天加班谁还有这精神。

用 Ant Design 系统提供的设计工具和组件框架能给设计师和开发者减少负担，能用更少的时间呈现给用户体验好的产品。这样带来的好处不仅仅是设计师和开发者觉得少加班成就感高而幸福，他们重新恢复活力和激情能做出更有创意和竞争力的产品，给公司带来更大的收益，这是一个三赢的结局。

② 缺点

1.无法根据业务场景定制组件，灵活度不够

一定有小伙伴会有这样的疑问，目前市面上有这么多的第三方设计规范，例如 Ant Design ，Element UI，有必要自己造轮子做一遍吗？

这里要视情况而定，如果公司产品是初创期，而且研发人手不足，那确实没有必要自己造轮子。反之在资源足够的情况下，是有必要设计团队重新做一套属于自己产品的规范组件库的，因为B端自身的业务性决定了市场上没有万能的设计规范，那些设计规范的组件并不能100%满足我们产品的需求。另外一方面使用封装好的第三方设计规范，在此基础上进行修改，效率很低，适配的复杂度和重新开发相差无几。

2.组件细节深入度不够，只能“将就”使用

对于比较普通的设计解决方案是可以的，但是 Ant Design 包含的组件细节仍有不足，毕竟 Ant Design 没必要投入过多的精力在组件细节深入度上，规范定义的越是精细，对于产品组件而言可延展性就越差，限制也会越多。而 Ant Design 只需要解决80%企业，80%的通用问题即可。

3.竞品同质化严重，视觉上无法脱颖而出

当市场大部分产品都在使用 Ant Design 设计系统时，产品的同质化就会很严重。为了避免这种情况发生，我们就有必要从设计语言、设计原则、设计组件三个部分开始，设计自己的规范。那些大厂的成熟的组件库该如何用呢？我认为应该把它当成一个字典，有不会的地方，可以去参考人家的成熟的解决方案。

『 总结 』

这篇文章简单的介绍了一下 Ant Design 是什么、 Ant Design 的设计原则是什么以及 Ant Design 的优缺点。当然也重点总结了一下，设计师如何运用 Ant Design 的设计原则，可以将这些原则分为四类：视觉层级清晰、交互操作高效、系统反馈及时、用户自由可控。希望大家通过这篇文章能够更深一步了解 Ant Design 的设计原则，并将其灵活运用到设计工作中。

参考文献：

《Ant Design 官网》

《设计心理学 1 》 [美] 唐纳德·A·诺曼 

《写给大家看的设计书》 美国罗宾·威廉姆斯(RobinWilliams)

《web界面设计》 Bill Scott    Theresa Neil

《维基百科》

《如何评价 Ant Design 这个项目（一个设计语言）？》 龙爪槐守望者

文章来源：站酷   作者：菜菜不甜 

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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