编辑导语：B端产品往往由于业务体量庞大，导致信息复杂，同时对业务的性的要求很高；服务于B端的业务，不能够出信息错误，填错一个信息，就会引发巨大的问题。本文结合笔者自己的工作经验，总结了大型B端业务中表单的设计方法，供小伙伴参考。
表单是信息添加、录入的通用形式；其作为获取用户输入的重要交互方式，也承担着将问题和答案进行配对的角色。
设计原则是任何一种解决方案的指路灯，它们体现解决方案应包含的基本目标。
针对互联网表单设计，我倡导的原则如下：
我们先看看表单的结构，表单主要由5部分组成：
标签根据标签与输入域的位置关系，分为：左对齐、右对齐、顶部对齐、内联标签、图标标签和浮动标签。
每种标签样式都有自身的优点与局现性，根据不同的场景选择适合的标签样式，能提高用户阅读效率，同时还能降低信息填写时的错误率。
1）顶部对齐：根据Matteo Penzo 发布的关于标签放置的文章表明：采用顶部对齐的标签样式，浏览表单所需的时间最短；如果希望用户能快速扫描填写表单，顶部对齐的标签是一个不错的选择。
顶部对齐的结构，使得能放下更长的标签；但对于纵向空间是一个挑战，当填写信息过多时，表单就会很长。
2）左对齐：左对齐标签，文字开头按阅读视线对齐，符合人们的阅读习惯，是有利于阅读的。
浏览表单所需时间最长，但是缓慢完成率并不总是一件坏事——如果表单要求敏感数据(例如提供驾驶证、身份证、银行卡号等，可以故意减缓用户的填写速度，来确保填写的准确性）。
左对齐的结构需要更多的横向空间，因此在移动端的呈现上可以是个问题。
此外，在屏幕空间有限的情况下，也会一定程度上限制了标签和输入框的长度。
3）右对齐：右对齐使得标签和输入之间的距离固定，有明确的视觉关联。
对于简短的表格，右对齐的标签可以有很快的完成时间；但由于标签长短不同，左边缘参差不齐，整体扫读表单的时候不容易了解全部信息。
与左对齐类似，在屏幕空间有限的情况下，也会一定程度上限制了标签和输入框的长度。
4）内联标签：内联标签由于它对空间的占比很小，往往运用于移动端的界面设计中；但如果在交互上处理不好，会有很大的缺陷。
内联标签是用作提示性文字，来告诉用户应该填写什么内容，但用户在填写的适合，它就会消失；因此用户无法仔细检查他们是否写下了所要求的内容，这增加了错误的可能性。
另外一个问题是：用户可能会把占位符文本误认为预填数据，因此忽略它（正如尼尔森诺曼集团的眼动追踪研究所证实的）。
5）图标标签：图标标签是内联标签的一种演化形式，在一定程度上缓解用户的困惑和自我怀疑的心理。
但就图标而言，用户需要时间来反应它所代表的意思——若表意性不强或者并不是常见的图标样式，用户就要思考和猜测它的含义。
此外，输入项一多，还得记忆那个图标所对应的意思。
6）浮动标签：用户在输入时，内部标题（提示信息）进行浮动位移，即节省了空间，提示性信息依旧在。
但相比其他几种标签样式来说，需要一定的开发成本。
关于标签样式的选择
输入域是表单的核心主体，包含了文本框、选择器、开关、复选框、单选框、步骤条、滑块、上传、标签页等控件（按类型分）。
选择适合的控件样式，能在一定程度上提高表单填写的效率。
在输入域中，存在多种控件样式，那么在设计产品的过程中，我们该如何选择，如何取舍呢？
以下是我在日常工作中的一些摸索，也包括借鉴前辈的一些经验。供大家参考。
1）文本框
文本框包含了单行文本框和多行文本框。
针对单行文本框的设计建议：
a. 选择适合的大小，它的宽度应该向用户暗示所需输入内容的长度来减轻判断负担。
如下图即一典型案例，一个实际不需要花多少钱的金额输入框在左图中进行等宽处理的话，容易误导用户对所需输入金额的判断，造成极大不安全感。
b. 采用字段掩码，自动匹配特定数字的输入格式。
例如：电话、身份证、银行卡等；按照7加减二法则，根据用户的记忆结构来最大化提升阅读体验。
c. 弹出键盘应与需要输入的文本类型相匹配（移动端）。
d. 涉及到金额输入时，当用户输入的金额超过千时，出现最高分位提示，每多输入一位，最高分位随之增加。
e. 文字输入最好有自动补全、自动建议功能，减少不必要的文字输入，减少出错。
例如：填写地址栏通常是表单中最成问题的部分，像地址自动填充（基于用户的定位和输入提供准确的建议）的工具使用户能以更少打字量完成输入。
f. 有限制输入时，给予用户明确的提示，增加用户感知，减少出错率。
知识扩展：什么是7加减二法则？
早在19世纪中叶，爱尔兰哲学家汉米尔顿观察到，有一个神奇的7±2效应；意思就是人们的短时记忆的信息量是7个，可能会上下浮动2个。
针对多行文本框的设计建议：
使用可拉伸的文本框比固定框更好，从使用体验讲，可变化的文本框使页面整体效果更统一。
固定文的文本框当输入文本超过其设置的宽度，会出现内滚动条，当页面上出现两个滚动条时（大页面的滚动条），在使用操作上会带来一定的混乱。
2）选择框
包括下拉列表、选框、开关、日期选择器等。
对于选择框有如下几个建议：
a. 避免设置默认值：除非您认为大部分用户将选择该值，尤其是必填字段。
为什么？
因为你可能会增加错误，用户会快速扫描表单，所以他们可能会跳过一些已经有默认值的字段。
但是这个规则不适用于智能的默认值，也就是根据用户的信息设置的默认值；因为智能的默认值可以使表单更快，更准确地完成。
例如：根据定位数据预先选择用户所在的国家/地区。
不过，请谨慎使用。
b. 当选项很多时，提供检索功能。
c. 提示信息要明确，要让用户明确自己选择的是什么。
3）单选框与复选框
a. 按一定的逻辑进行选项排序，例如根据发生的可能性、难易程度、风险大小来排序。
b. 选项应该易于理解，容易区分。
c. 尽可能提供默认选项。
4）关于控件的选择
a. 选择框优于输入框。
任何高密度的操作，都会引起用户的不适；因此，在输入项的选择时，用选择来代替键盘输入。
相较于输入框，选择操作步骤少，相对来说效率较高；同时，用户用思考输入值，也不用承担输入错误要重新输入的风险。
用户可以通过选择项，清晰明确的知道有哪些值可以选择，对于一些无关紧要，或者用户较难理解的输入项，可以预制默认值，可以照顾到各阶段的用户。
b. 单选框与下拉选择框。
单选框较为适合选项较少（少于五个），同时选择项之间较为类似，需要强调或对比时，可以优先考虑单选框。
另外，当选项能见度和快速响应优先时，也建议优先考虑单选框。
因为相较于下拉选择，用户可以通过展示出来的选项，直接选中目标选项，提升输入效率。
下拉选择框较为适合选项较多（超过五个），有默认选项或者选择项之间有较大差异，同时下拉选择，最好不要引起随后输入项数量以及页面的变化；否则下拉选择的收起以及页面的变化，易引起用户不适。
若选项过多，超过二十个，最好引入模糊匹配以及一定排序规则（首字母排序、数字排序等），方面用户提前预知选项的大致位置，或通过模糊检索找到相应的选项。
5）关于必填项
大多数情况下，所有字段都是必填项，只有几个字段是可选的，一般用“*”标记必填字段。
但星号并不适合所有类型的用户，记得之前客户问星号是什么意思？
它是页面中的标签还是描述中的标签；同时，并且红色会从用户方面引起负面关联，因为红色表示错误。
为了避免这种误解，可采用文本框内暗提示。
它也是一个比较清晰标志必填项的方式，并且还很节省空间，也能在一定程度上起到视觉降噪的作用。
提示信息可以分为引导性提示（帮助文字、输入框提示、错误提示信息）和反馈性提示两种。
这里主要想讲讲错误提示的设计：
1）关于错误提示的最佳位置
Javier Bargas-Avila和Glenn Oberholzer对表单验证的研究发现——在表单顶部显示所有错误信息，会给用户的记忆造成较高的认知符合，会强制用户回忆每个错误输入框中的错误消息。
错误信息提示在输入框行间显示是减少记忆认知负荷的有效方法。
它可以帮助当场识别错误而不是靠回忆错误，缩短反应时间，提高表单填写效率。
因此，错误信息提示与错误的字段邻近放置可以获得最佳性能。
下面来看一个简单的例子，如下图：
当我们在录入客户信息时，假设填写错误手机号码，按照上面的论述，错误提示可以最直观的显示在这4个位置。
哪一个位置是最佳位置呢？
答案是：右边。理由如下：
a. 错误信息提示右边，符合人们从左到右的阅读习惯；用户视觉路径自然流畅，很大程度上减少了用户的精力和视觉工作。
放在左边则恰恰相反，同时左边与用户期望相违背，因为左侧放置更高优先级的元素，是我们的直觉。
但事实上用户需要专注于纠正他们的输入，因此输入框应该是更重要的元素。
b. 对于上边的错误信息提示，有着更高的认知负荷。
当标签顶部对齐时，错误提示和输入框中的提示这两个文本靠得很近会产生视觉噪音，用户注意力被分散，很难专注于其中一个，并且可能混淆它们。
c. 放置下边的错误信息提示，虽然不符合从左到右的阅读习惯，但它确与自然的从上倒下的阅读流程相对应。
手机屏幕缺少水平空间，把错误信息提示放置在下方是个不错的选择。
虽然它可能会增加用户阅读文本时的认知负荷（与类比上边的错误信息提示），但可以通过将它们隔开足够的间隔来防止这种情况。
综上所述，如果是web端请选择放置在右边，如果是移动端则放置在下边。
当然，如果开发时间有限，都选择放置下边也可以，方便适配。
2）帮助信息
有时候需要帮助性信息，来辅助用户完成表单填写。
当文本简短的时候，可以直接放在改输入框的附近。
当文案过长的时候，就需要做气泡框——获取鼠标焦点，则展开信息，失去焦点则消失（在气泡展开时，切忌勿挡住input输入框）。
也有些产品是将帮助信息放在页面顶部，如果是针对全局帮助性信息，则可以采用这种方式。
如果只是针对某个元素提醒，则应将两者放在一起，让用户知道当前处于什么地方，在针对什么进行引导、辅助。
在复杂业务表单设计中采用单列布局，大家有没有遇到过类似的问题，例如：
针对这些问题，我们团队从自身的业务出发，对复杂业务表单布局进行了相应的探索。
首先，我们根据下图的规则对复杂业务的表单布局进行多方案的实验：
方案一：采用4列布局，标签顶对齐。
那为什么标签不采用右对齐呢？
四列布局，页面已经很拥挤，加上标签长度长短不一且最大长度也无法确定（用户自定义），所以放置采用了标签顶对齐。
总体上来看，缩减的长图并不理想。
方案二：三列布局，标签右对齐的方式。
由于三列布局，页面空间较大，尝试着把标签右对齐，总体上达到了缩减表单长度的目的。
但字段若出现换行，则页面信息模块是混乱的。
根据CXL研究所的发现：单列表单比多列表单完成得更快一些。在这项研究中，参与测试的人完成单列表单的平均速度比多列表单快15.4秒；多列布局虽然缩减了表单长度，空间利用率也提高了，但整体的填写效率降低了，这与表单设计原则相违背。
同时从开发效率来看，单列成本较低（多列需要做响应式）；从业务承载上看，单列扩展性更强，适合复杂多样的业务场景（多列适合交单一的场景）。
综上，最后还是采用单列布局。
面临的问题该如何解决？
我们团队重新审视了客户的这些反馈：空白区域过大、留白过大、表单太长、我看不全、不知道什么时候可以填完等等。
我们尝试把这些问题翻译成：我无法预知表单的填写内容，我想要是把空白的地方也利用上我是不是就看全了整个表单。
如果是这样，用户的本质述求就是想要掌控感。
对现有的单列布局做了以下几个处理：
感谢阅读！本文给表单设计提供了一个基本的指南，在具体项目中，你可能需要根据产品特性和用户需求进行调整。
文章来源：人人都是产品经理 作者：@Nick
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导读：如今，谷歌可以说是科技领域最大、最具有影响力的公司之一。正因为如此，它们的数字产品设计会对整个行业产生巨大的影响，成为人们竞相模仿的榜样。在该公司的UI&UX（用户界面&用户体验）设计指南中，设计师们提到了10条原则，不管是iOS还是安卓系统都同样适用。在这篇文章中，作者从这10条指南出发，加上自己的经验和相关案例，在设计方面为大家提供一些建议，希望对大家设计产品有帮助。
这里的声音特指“Hero sounds”，用于衬托一些喜庆的、重要的高光时刻，它们常被用来激起用户的情感，或烘托一种喜悦的气氛，从而塑造产品或品牌在用户心中的形象。以下场合适合使用 Hero sounds：庆祝用户进行了某项操作；欢迎用户使用新的应用程序或体验；确认用户成功使用某款产品。——《谷歌声音设计指南》
声音可以被用来传递成功、成就或获得回报等信息。谷歌指南中提到，Hero sounds出现的次数不应该频繁，否则无法突出其重要性。通过在同样的环节提供同样的声音，久而久之用户会将这种提示音与成就感挂钩，从而增加对产品的粘性。如每成功更新一次应用程序就会出现庆祝的声音，或者每次待办事项标记为完成后就会出现庆祝的提示音。
不管我们是否注意到这一点，我们所听到的产品的声音与自己的感觉都是相挂钩的。无论是手机发出的“叮咚”的消息提示音，还是MacBook的废纸篓在清空时发出的揉纸的声音，都在某种程度上影响着我们的情绪，也帮助我们更加了解用户界面上发生的一切。
触觉可以和声音配合使用，也可以单独使用。举个例子，在手机黑屏的时候，触觉是唯一一种可以对用户提供反馈的方式。和其他配合使用时，触觉应该强有力、传达愉悦的情绪。——《安卓触觉设计指南》
除了声音之外，触觉设计（如震动）也是一种刺激感觉的好方法，可以为用户提供更加完整的体验。用户可以通过触觉提示来尝试、学习使用某一款产品。在有了不同的触觉体验后，我们将会对产品的某些功能有更加深入的了解。
举个例子，如果某个用户通过APP进行付款，但在付款过程中出现了错误。这时候APP会进行一连串紧张、短促的震动，对用户进行错误反馈。当用户熟悉了这种震动模式之后，下一次再感受到这种震动，就会立刻知道付款出现了问题。
产品设计师很容易忽略声音和触觉这两个板块，而过度专注于画面。但这两个板块却也扮演着非常重要的效果，可以为用户体验锦上添花。
图片来自Material
动图可以增加用户的好感，在互动中为用户增加个性化体验，也可以表现品牌独特的风格。——《谷歌手势设计指南》
动图是我自己设计的产品Confetti中一个非常重要的因素，这是一款运动追踪APP，是为那些追踪自己生活习惯的用户设计的。在设计这款产品时，我希望可以为用户创造出一种满足感，鼓励他们培养好习惯。在这款APP中，我大量使用切换功能，通过不同的手势，界面或进程可以平滑过渡，使用起来非常便捷。当一个好习惯完成时，还会出现彩屑动画飞舞的，加强用户的满意度。
简言之，动图可以应用于不同的场景，通过过渡和变化的吸引用户。
动图可以强化两种元素之间的联系，实现快速切换，迅速解决特定的任务。动图可以让用户专注于眼下最重要的事，不被其他因素所干扰。——《谷歌手势设计指南》
在2020年，你的产品可以在一秒之内激怒用户。正如塔拉斯·斯凯斯基（Taras Skytski）在《用户体验设计中动画使用的终极指南》中指出的那样：“众多研究发现，界面动画的最佳速度在200到500毫秒之间。这一数字是通过研究人类大脑运行机制所得出的。100毫秒及以下的动画因为速度太短而无法被识别，而超过1秒的动画则会造成一种延迟感，让用户感到不舒服。”
通过动图及产生的动画效果（如切换）可以改善用户体验，同时保证可以迅速找到需要的版面，而不被其他信息干扰。但如果动图及切换画面的过程增加了不必要的等待时间，又不能改善体验，那么这种环节就没有必要存在。
图片来自Bribble｜制图Elena Petkovska
我们或多或少都有这样的体验：打开一个界面，里面充斥着太多文字和太少的图像。在用户体验设计中，展示画面比阅读文字效果更好。用户不希望通过阅读来理解一款产品，而是希望通过图像对一款产品进行直观的视觉理解。
你所选择的图像应该能够清晰地展示产品特点，不管是用户自己上传的图片，专业摄影师的图片，还是插画风格的图片，它们都应该能直观展示产品外观，反应产品的特点。——《谷歌图像设计指南》
APP里的插图和所有的视觉元素一样重要，好的图片可以让用户界面更加生动，使用户体验更加完善。恰当的图片还能展示品牌风格，成为无声的“故事讲述者”。
我们应当有目的地使用图像，作为总体内容的补充而非替代。照片或者插图最好能够传达足够的信息，如产品外形、风格，APP的用途，状态等。媒体界有这么一句话：一张图片抵得上1000个字。你可以在Unsplash、Pexels、Adobe Stock等网站上找到高质量的图片。
图片来自Material
用户界面设计中应该关注产品的像素密度，让界面可以适应不同的屏幕。——《谷歌像素密度设计指南》
像素密度（PPI）是用来衡量每物理英寸的像素数。另一个常用的单位是DP（Density-independent pixels，有时候简称为DIP）。像素密度=屏幕宽度或高度（以像素为单位）/屏幕宽度或高度（以英寸为单位）。
在设计界面时，我们不应该只关注像素，还应该关注不同设备的像素密度。这样可以让我们在做设计时保证元素适当缩放，以适应不同屏幕的尺寸。
举个例子，我们现在有一个按钮素材资源，大小为200 x 50 px。在一个160ppi的屏幕上可以原画显示；在一个320ppi的屏幕上它就会扩大成400 x 100 px，相当于原始素材的两倍大。
通过以上例子我们可以了解，在像素密度不同的屏幕上，素材呈现的状态是不一样的。在实际应用中，素材可以会被放大三倍甚至四倍，如果素材不够清晰，就会在拉大后虚掉。这就需要我们在选择素材时格外谨慎，尝试在不同设备上打开并检查。
素材密度如何适应屏幕尺寸？举个例子，iPhone XS Max的屏幕是414 x 896 pt，注意这里的尺寸是物理尺寸pt，而非像素。如果以像素为单位计算，那么它的屏幕是1242 x 2688 px。所以当我们为iPhone XS Max设计应用产品时，我会首先考虑用414 x 896 pt的素材，然后在输出素材时将其乘以3。
图片来自Material
离线状态可以让用户知道这款应用程序没有连接网络。如果你的产品有一些功能需要联网使用，你最好能向用户明确显示连线状态。——《谷歌离线设计指南》
离线访问功能是设计师经常忽略、对用户体验影响却非常重要的一环。虽然有些功能离线也可以使用，但是在能联网的时候，最好还是主动提示用户，推荐他们连接网络。
如果有可能的话，要提前告知用户下载相关信息，以便脱机访问。最常见的例子就是Spotify等音乐应用程序，它允许用户下载歌曲，以便在没有网络的时候也能继续听歌。
假如你的产品不像Spotify或者Netflix那样需要下载具体内容，你可以发挥创意来设计在线、离线两种模式。
谷歌浏览器在离线页面提供恐龙游戏就是一个著名的例子（在谷歌浏览器连网的过程中，离线画面会出现一只霸王龙，按空格键或者向上的箭头就能控制霸王龙——译者注）。这个小游戏填补了用户等待连线的时间，将消极体验转变成了积极体验。
我希望这份设计指南可以为你提供一些想法。除了谷歌的设计指南之外，我们还可以在IEM Carbon、Zendesk Garden、Workday Canvas等网站找到关于用户界面和用户体验的设计指导，在这一领域进行更深入地探索。
文章来源：人人都是产品经理 作者：Danny Sapio 译者：Michiko
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导语：你有没有设计过结构复杂、内容繁多的表单？在设计时有没有什么技巧可以化繁为简、提升填写者的体验感呢？本文作者为我们罗列出了表单设计中可能遇到的一些问题，并且提供了解决方案，让我们一起来学习吧。
距离上次发文已经快半年多了，实在是惭愧，好久没有输出内容了，看着每周增加的零星关注人数，内心更加焦灼难安。
这半年来我换了工作，也适应了新的环境，同时也在思考新的方向，估计和大多数的设计师一样，迷茫时常伴随着我。前段时间写了几周的产品体验日记，但觉得缺乏深度就没发上来，后续我将会继续写产品体验日记，完善后分享给大家。
2020所剩无多了，我也会将积攒下的一些内容陆陆续续发上来与大家分享，感谢关注，感谢阅读。哈哈哈哈
你平时填写过的最复杂的表单是什么？调查问卷还是文档信息录入？如果一个表单字段内容巨多、结构多变、填写耗时耗力，那你将如何设计你的表单使之体验更佳？
面临的问题:
不知道大家是否看过法律合同之类的文件，多则好几箩筐，少也有厚厚一叠；类似的文档如果进行线上结构化，势必要同样要花费巨大的人力去填写表单，完成基础信息的录入工作。
同时，由于录入的时间不确定，流程不明确等问题，也制约着表单的填写。
多个不同表单之间的互有关联又相互区别，填写的时候需要来回查看以确认信息，查阅和填写相互并行，操作繁琐。
几乎每一个字段都有对应的关联项，每个单选字段的不同项决定不同的内容。同时，由于字段数量，层级划分不明确，会使填写的人失去定位，产生迷惑。
根据业务内容分级，合理运用颜色、间距、字体大小、卡片层级等进行信息分级。
一般表单是与某项功能挂钩的，信息会在多个入口录入。因此在填写长表单的时候，如果能从系统中自动获取到数据，就可以自动为其填充，可根据业务场景，判断是否让其修改和更新。
一般的长表单在涉及非审批流的时候，可以让其无限二次编辑；如果是处于审批流，则需要根据业务场景限制其编辑次数或者限定其编辑规则（草稿可编辑，一旦提交则不可编辑）。
如果一个长表单，需要多个不同的业务域的人来填写，那么需要协同编辑，并实时显示编辑的人员信息。
同时，为了避免信息丢失和编辑错乱，在同一个表单下，同一时间应该限制只允许一个人进行编辑，等其提交完后，可允许其他人进行编辑。
前端实时校验字段输入规则，后端统一校验信息交换规则。
比如对于数字输入框的校验、电话号码的校验、身份证号的校验，应该在前端实时完成。
在鼠标离开焦点区域或定位到下一个字段的时候，提示其填写有误；这样做的目的是减少后续修改的次数，在长表单下，统一提示其填写错误会是一场灾难。
在点击保存并填写下一步或点击提交信息的时候，就需要跟后端交换数据，验证录入的信息；如果不匹配，则提示错误，并从上至下定位至相应的错误字段。
要通过多种方式，引导表单的填写。
1）在开始填写之前，简要说明该表单的业务目标，大概需要花费的时间等；
2）开始填写后，关于每个字段的特殊说明，都需要标注出来。重要的要显示在页面上，不重要的就收起在注释符号中；
3）填写的过程中，切记不要到最后才告诉用户哪里出错了，重要的信息一定要提示到位，否则一旦出错，前功尽弃；
4）填写完成后，引导其下一步的操作，或者返回至列表。
表单填写完毕后的产出物就是详情页，详情页是需要浏览的。因此在设计详情页的时候，应该本着让用户浏览方便的原则去设计，需要注意以下几个点：
1）结构清晰
结构清晰是指不要讲内容一股脑的全堆在页面上，要做好信息的分类；同时，注意规划页面的层级。
2）设置快捷导航
如果一个表单是长且复杂的，那么其对应的详情页也会变得复杂和冗长，因此在页面的右侧或者顶部设置合理的快捷导航是很有必要的。
快速返回顶部按钮的使用要注意场景，如果你的页面比较长，且没有分组浏览的导航，那就需要设置快速返回顶部的按钮。
但是在存在分组浏览导航和顶部悬浮标签的情况下，不建议使用快速返回顶部的按钮，因为在填写表单的时候，使用快速置顶的场景比较少。
当一个模块混杂着各种信息的时候，单纯的模块分组已经无法处理它的复杂度了，因此需要收起高频且信息量大的模块，可以合理的减少页面的复杂度。
步骤条可以单纯的作为步骤指示器使用，也可以作为一个表单完成度的提示区域。
在填写大量字段的表单时，阅读表单内容和填写表单同样耗时耗力。
如果我们将所有的提示信息隐藏在提示符中，一般情况下用户不会去查看；但是如果去挨个查看提示信息，则会多花费一个步骤去点击或者悬停来查看提示信息，浪费了大量的时间。
因此如果涉及到重要的提示信息，请直接展示在字段的后面，不要隐藏起来。
在后台产品上，关于组件的规范统一，想必是人尽皆知的设计原则。
无论是各类平台型设计组件，还是各个公司自造的设计组件，保持统一和规范对产品设计有着重要的作用，在这里不赘述组件应该怎样规范统一。
因为无论是Ant Design还是其他设计语言，都有详尽的关于组件的定义方法，我在这里讲述一个产品设计更高层面或者更深层面的原因：
组件的规范统一并不仅仅是为了省时省力，而是为了使用户在使用的过程中达到认知上的统一和行为上的统一，在进行高频次的操作后，界面的流程或者组件样式已大致在用户脑海中形成固定印象。
因此在操作相同类的流程时，用户会有更多的掌控感，试想一下：如果你在操作人事相关的流程后，去填写绩效部分的内容时，发现一个迥异的界面或者弹窗，你肯定觉得这是不是哪里出错了，甚至会怀疑这是否是同一个系统。
目前大多数公司的管理系统经过多次缝缝补补，内部的跳转逻辑已经异常感人，界面风格也大放异彩，但是使用起来却无从下手，深感迷茫。
因此大到界面样式，小到间距大小，产品设计的规范和统一应该是最基础又不可缺少的原则。
对付复杂的表单，你需要解决的主要问题并不是填写方式或者页面设计，而是信息分级和结构拆分。解决了这个问题，基本上就解决了业务问题，其余部分就跟我们常用的表单一致。
将复杂度降低并不意味着减少页面的信息，而是通过设计师合理的信息划分，降低视觉上的复杂度和流程上的复杂度，这样才会达到当前场景下的“最佳解决方案”。
随着互联网信息化的深入发展，复杂是避免不了的。
我知道大家都推崇简洁的设计，但那只是对视觉和样式的定义，而非对信息的定义。
我们所处的世界是复杂的，行业更是复杂的。信息的复杂度与日俱增，想要处理复杂的信息，就需要从复杂中寻求规律，这规律与业务息息相关。
B端360行，行行深如海，小伙伴们，我们一起慢慢修炼吧~
一、导语
1. 业务复杂，功能较多
2. 流程较长，操作繁琐
3. 字段较多，关联项较多
二、解决方案
1. 内容分组，分步填写
2. 实时保存，避免数据丢失，提供草稿功能，避免任务中断
3.字段分组，示意结构，联动项隐喻
4. 信息自动带入，节省时间
5. 提供二次编辑功能，防止信息输入有误
6.提供多人协作编辑功能
7. 实时检验
8.做好填写引导功能
9. 详情页也需要注意信息分级
三、小细节，大体验
1. 提供快速返回顶部的按钮
2. 提供分组模块收起展开功能
3. 步骤提供信息填写完成度提示
4. 重要说明性文字尽量显示而非收起
5. 产品内组件应该规范统一
6.庞大的信息录入，表单内部要分步填写，外部可拆分成不同的表单分别填写
四、结语
文章来源：人人都是产品经理 作者：米兰小铁匠
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导读：想要做好一个设计师，就要多研究优秀人士的作品，取长补短。现在互联网的发达，很容易就能在网上找到相关的学习资料。本文以史蒂夫·克鲁格的名著作为引入，分享20句关于界面可用性设计的名言，希望对你有帮助。
设计，以及许多其他领域，都是建立在优秀专业人士的作品和发现之上的，每个想要成为某个领域专家的人经常寻求指导来学习如何把事情做好。专业导师的各种书籍和文章现在都可以在互联网上免费阅读，让努力学习知识的人很方便的找到。
我们经常会分享来自数字设计领域最优秀专家的名言和睿智的想法。你会在迈克·蒙泰罗（Mike Monteiro）所著《设计是一项工作（Design Is a Job）》里找到有关设计的短暂洞察，奥伦·沃特尔（Aarron Walter）的《为情感而设计》（Design for Emotion）以及排版大师埃里克·斯皮克尔曼（Erik Spiekermann）的一系列智慧思想也是如此。
下面我们要分享的是史蒂夫·克鲁格（Steve Krug）的名著《不要让我思考（Don’t Make Me Think）》中的一组引言。
2000 年初版，14 年后再版，《Don’t Make Me Think》在今天仍然切合时代发展，符合实际需要。史蒂夫·克鲁格为界面可用性设定了一些基本原则，并与该领域的专业人士分享，这使得本书成为 UX 设计师推荐的最重要的资源之一。
可用性第一定律——“不要让我思考”描述了关于网站可用性的要点、案例和见解。创造不需要用户过多思考的界面设计，不仅可以解决问题，而且易于使用。这里有 20 句名言，反映了“不要让我思考”的一些关键点。
1、如果某件事需要大量的时间投入——或者看起来会这样——它就不太可能被使用。
2、让每一页或每一个屏幕都不言自明，就像商店里都有良好的照明：它会让所有的商品看起来更好。访问一个不需要我们思考的网站会让人感觉毫不费劲，相反，为不相关的事情多花心思会浪费我们的精力、热情、还有时间。
3、无用的客套话（“happy talk”）都是一种沾沾自喜的宣传，你可以在蹩脚的小册子里找到。与好的宣传文案不同的是，它没有传达任何有用的信息，它一个劲的说我们有多棒，而不是描述是什么让我们这样棒的。指示说明必须被消灭。
4、可访问性（Accessibility）非常重要，它不仅仅是正确的做法，而且是非常正确的做法。关于无障碍访问，如果没有引起足够的重视，你就无法意识到，它能显著的改善一些人的生活。仅仅通过把工作做得更好就能显著改善人们的生活，这难道还不够厉害吗？
5、另一个让人困惑的来源是那些看起来不太明显的链接或者按钮。作为一个用户，我永远不应该花哪怕一毫秒的时间来考虑这些东西是否可以点击。
6、最近几年里，让产品更加易用成为几乎所有人的责任。现在，视觉设计人员和开发人员常常要做交互设计（决定用户单击、按下或滑动时下一步会发生什么）和信息体系结构（确定应该如何组织所有内容）之类的事情。
7、可用性（Usability）就是确保让一个能力和经验一般（甚至低于平均水平）的人，能够想出如何使用并完成任务，而不必费事。相信我：事情就是这么简单。
8、可用性是有关人们如何理解和使用事物，而与技术无关。
9、关于指示说明，你只需要知道一点就够了：除非“蒙混过关”多次尝试失败，没有人会去读它们。
10、你越仔细观察用户，并倾听他们明确表达他们的意图、动机和思考过程，你就越会意识到，他们对网页的个人反应是基于许多变量的。试图用一维的“喜欢”或”不喜欢”来描述用户是徒劳的，而且会适得其反。另一方面，好的设计会考虑到这种复杂性。
11、那些设计网站的人并不在乎让事情变的明显和容易，这会削弱我们对网站及其背后公司组织的信心。
12、然而在现实中，大多数时候我们不会选择最佳选项，而是选择了遇到的第一个合理的选项，即所谓的“满意”（satisficing）策略。
13、大部分的网页设计问题（至少是对重要的那些问题来说）都没有一个简单的“正确”答案。有效的答案是那些运作良好的、满足需求的综合设计，它们往往经过了仔细思考，良好的执行和测试。
14、删掉每页上一半的文字，然后把剩下的再删掉一半。
15、设计师喜欢微妙的线索，因为微妙是复杂设计的特征之一。但网络用户通常都很匆忙，经常会错过这些线索。
16、如果你在设计了很多不同的网站之后只发现一件事，那应该是：几乎所有的设计理念——无论一开始多么糟糕——都可以通过足够的努力，在合适的环境下变得可用。
17、你的主要职责应该是分享你所知道的，而不是告诉人们应该怎么做。
18、你的目标应该是完全删除说明文字，让每项内容不言自明，或者尽可能做到这一点。当说明文字绝对必要时，把它们减少到最少。
19、和遵循惯例去设计相比，设计师们面临很大的诱惑去重新发明轮子。很大程度上是因为他们觉得自己被雇来是要做一些新的、不同的事情，而不是做原有的旧事情。更不用说，来自同事的赞扬、奖励和高级职位很少是基于“最好地利用惯例”这样的标准。虽然少数时候，在重新发明轮子上花的时间足以制造出新的革命性滚动设备，但通常情况下，这只是浪费时间而已。
20、如果你想要一个很棒的网站，一定要测试。因为你在这个网站上工作了好几周，已经失去了新鲜感。你了解的太多了。要想知道它是否真的有效，唯一的方法就是测试它。
文章来源：人人都是产品经理 作者：Alina Arhipova
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导读：如今，谷歌可以说是科技领域规模最大、最具有影响力的公司之一。正因为如此，它们的数字产品设计会对整个行业产生巨大的影响，成为人们竞相模仿的榜样。在该公司的UI&UX（用户界面&用户体验）设计指南中，设计师们提到了10条原则，不管是iOS还是安卓系统都同样适用。在这篇文章中，作者从这10条指南出发，加上自己的经验和相关案例，在设计方面为大家提供一些建议，希望对大家设计产品有帮助。
图片来自Material
在没有其他方法的情况下，图标可以成为理想的指示工具。——《谷歌材料设计指南》
在《Design of Everyday Things》一书中，有“以人为本的设计之父”之称的唐·诺曼（Don Norman）阐述了他对图标的理解：图标就是代表动作、同时可以指示该动作以何种方式完成的元素。在数字产品中，我们很少会出现“左滑-删除”这样的文字指示，而是通过左滑的动作引出一个红色的小垃圾桶来阐明“左滑就会删除”这样的设定。
在用户和产品交互之前，插入动画效果。——《谷歌材料设计指南》
如果我们希望一款数字产品有着极简主义外观，那么我们可以借助动画来达到这一点。在上图的例子中，最开始画面中甚至不会出现垃圾桶的图标。在我们手指滑动后，也就是人机交互的动作产生之后，才会出现这一垃圾桶，同时也会强化“滑动表示删除”这样的信息。动画效果有效简化洁面、改善用户体验的功能。
图片来自Medium｜制图Eddy Gann
动画可以展示图标所代表的执行动作，从而增加流畅感和愉悦感。在两个视觉效果之间插入带有动画效果的图标，可以反映这两个视觉效果之间的关联。——《谷歌材料设计指南》
在两个动作之间增加一个过渡的动画，这个效果我们应该很熟悉。最简单的例子就是“播放/暂停”按钮。在点播放后，该图标变成了暂停按钮；点下暂停按钮，该图标又变成了播放按钮。这个变化的图标展示了播放和暂停两个动作之间的关系。
这只是一个简单的案例。现在想象一段更加复杂的经验：比如将某个产品添加到购物车中，购物车图标会出现装进货物的动画效果；或者想象某一功能无法使用时图标的弹出效果。
带动画效果的图标本身并不复杂，我们可以在Adobe XD中完成：通过给图标添加预设效果，或者加入淡入、淡出的效果即可。
动画效果可以根据需要设计出简单或复杂的运动轨迹。图标虽然小，却是影响用户体验非常重要的一环，我们可以通过设计复杂的运动轨迹来强调它的重要性。——《谷歌材料设计指南》
请记住，如果界面上所有的元素和图标都在动，那么用户可能会不知所措。过度使用这一方法反而会削弱你想强调的重点。给图标添加动画应该适可而止。
调色板生成工具｜图片来自Medium
调色板生成工具（Material’s Palette Generator）可以调出任何你需要的颜色，色相，亮度，色度等都可以通过一系列算法调节出来，通过算法调出的色彩实用又美观。——《谷歌材料设计指南》
如果我们无法使用谷歌的调色板生成工具，手动调色就会变成一件非常麻烦的事。调色板生成工具最大的好处就在于它自动给你调出了同一种颜色的不同形态（如蓝色从暗到明、从深到浅的形态），你就不需要再对照标准调色板一点点矫正了。不过即使没有这样的自动生成工具，你也应该仔细检查并矫正自己的调色工具。
颜色对于数字产品的重要性，就像是盐和胡椒粉对吐司的重要性一样——添加太多了，就盖过了吐司自身的风味；太少了，味道就会变得寡淡。在选择配色以求增加品牌视觉效果时，一定要仔细考虑清楚给哪里添加什么颜色。
通过有节制地在APP里添加颜色，你还可以突出相应的内容，如文本、图片、按钮等。你可能已经注意到了，Instagram和Twitter上面布满了色彩鲜艳的图片和图标，与之相对应，它的用户界面非常简洁，不会喧宾夺主。
色彩也可以是一种交互元素，要考虑它们在什么地方交互，希望达到什么效果。最重要的元素要用最突出的色彩。——《谷歌色彩设计指南》
当一个元素的色彩与周围环境形成对比时，用户会更理解它的重要性。我们可以给重要的元素增加“色彩权重”，这个概念是说增加色彩的饱和度，使用更加大胆、更吸引人的色彩，制造视觉冲击。
另外，我们可以将重要的信息加粗显示，让它在第一时间进入用户的眼睛。简单来说，如果一种信息比另一种信息更重要，那么前者就要在色彩和篇幅上胜过后者，好让用户直观地进行区分。
文字类型生成工具｜图片来自Medium
Google Fonts是谷歌研发的一款文字类型生成工具，可以使用它来调节字体、大小等。您可以根据需要调整和优化产品的文字设计。——《谷歌材料设计指南》
字体设计是一门艺术，它不仅关乎选择某一种具体的字体，更设计如何使用、粗细调节、比例调节等，目的是增加界面的可读性，从而增强产品的实用性。谷歌研发的这款文字类型生成工具为设计师提供了多样的选择和排版支持。通过这一款文字类型生成工具，可以节省时间，迅速生成段落、标题、正文、按钮等。
文章来源：人人都是产品经理 作者：Danny Sapio. 译者：Michiko
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导读：作为一个设计师，有时候在工作中会过度重视美感和创意，辨识度是有了，但是缺失了品牌感。没有了品牌感，这个图标就可以放在任意一个产品上使用，无法与品牌产生强联系。那么，如何设计一个有品牌感的图标呢？本文将从三个方面展开分析，希望对你有帮助。
我们在画图标的时候，往往会忽略掉一个重要的问题：缺失品牌感。也就是说，这个图标和我们的实际品牌、业务并没有什么联系，它仅仅满足了可辨识这个温饱需求。
图标缺失品牌感，就会导致同质化的问题，这些图标放在任意一个产品上都可以通用。
对于产品，记忆点的缺失导致用户看完后对于我们的业务、品牌不会产生任何深刻的印象。对于我们设计师，图标和业务的断层则很容易让我们陷入反复改稿的被动局面，并且设计话语权也越来越小。
那么，有没有什么系统、易于理解的方法来让我们的图标具备品牌感？
当然有。
接下来的这个图标三步品牌化是我一直在用的办法，而且屡试不爽，基本用了这个方法，需求方基本一稿过～
文章案例选用了对接京东物流的国际物流项目。当时有一个着陆页的需求，需要在首屏下的优势板块中绘制六个图标，分别对应平台的六大优势。接下来，我将详细讲解如何运用这个图标三步品牌化方法绘制与品牌息息相关的图标。
品牌符号从广义上来讲也就是形状。
比如天猫最近的双十一购物节，便是用一个猫头来作为这次大促的品牌符号，通过每年固定时间节点的品牌形象建立心智。
再比如之前大热的腾讯综艺《演员请就位》，它的品牌符号就是不同矩形色块的叠加组合形态。
通过承载的不同信息可以扩展为不同的类型，比如下面的固态层、图片层和文字层就分别承载了内容、图片和文字。
Google在18年于material design中新增了一整块章节来阐述图形语言。
google原话是：形状可以引导注意力，让用户易于识别组件，识别状态和品牌语言传达。
也就是说，形状并非我们以往认知中的作用，品牌同样可以借助形状来加强效应。
最典型的就是谷歌自家出品的google play。你可以看到google play被提炼出的三角形符号被作为外轮廓延展到来所有相关的业务icon，显著加强了品牌记忆点。
再比如国内的蚂蚁财富，便是通过提炼logo中的箭头符号，将其延展到三个优势图标当中，一样得传达了蚂蚁财富的品牌表达。
所以，基于业务目标以及行业特征，我们将倒三角这个符号作为我们这次项目的品牌符号。
至于为什么选择这个形状，主要考虑到了稳定性（三角形自身的稳定性、象征专线的稳定可靠）、保障性（倒三角常被用于保障承诺类的徽章标志）、隐喻物流（由飞机和定位的图标变形而来）和三者的战略合作（开锣、中国制造网和京东）。
第二步相对而言就比较简单了，不过考虑到颜色在各个场景及状态到通用性，这里需要基于原本的品牌色额外不同明度的颜色。
这里我简单扩展出淡色和深色，为了避免页面过冷加入了暖色作为点缀色以提升温度。
将图标与业务紧密结合，能够与其他竞品拉开差异化，这是个相对简单但是很容易出效果的品牌化的方法。
具体的操作办法就是：首先根据所给文案脑爆出图标所对应的关键词，然后根据所在行业的特征筛选关键词，或者进行二次联想及转化。
下面我通过此项目中的三个图标案例来简单讲述下设计过程，仅为大家提供下思路：
运营所给文案如下：
这段文案意思就是，由于我们平台和清关行合作，因此让我们的业务更具有保障性，货物可以按时送到客户手中。
这里我一开始脑爆出了雨伞、锁和盾牌这三个形象，并且传统得用了盾牌符号传达保障性。
这种任何行业平台都可通用的形象，并不能关联我们这个物流类的平台。
后面联想到到我们跨境、外贸的行业特征，将“雨伞”这个形象变形转化为降落伞，来代替盾牌符号。
一来，降落伞外形似伞，相当于是货物的保护伞一样体现”保障“的感受， 另外，这种”空运“式的表达也额外传递出按时递交的概念，很好得体现出典型的”跨境物流“的行业特征。
运营所给文案如下：
同样，一开始我着眼于”跟踪“”实时“”轨迹“这些关键词，脑暴出定位、雷达之类的事物。
但是结合我们行业特征的话，其实有空间去更贴切到业务本身。
我们平台的业务线包含了两个站点——美国（主站）和马来西亚。供应商发货后，货物的轨迹必然是反映在世界地图中，从起点至终点得分布。
因此我用了地球仪映射全球，以定位来映射包裹收货地，以延展到定位icon中的虚线映射轨迹。这样产出的图标，不仅仅是指代了文案意思，同时表达出对应的行业特征，和业务紧密贴合。
文案如下：
一开始，我传统得想到了一个时钟图标来代表。但是仔细想想，这个时钟图标仅能代表”时效“的特征，而不能传达”快“的感受。如何更好得传达“快”？
发散思维，我联想到交通运输工具，飞机、轮船、火箭等等，最终我选取了飞机这类跨境物流专线主要使用的运输工具，它所带来的快捷相比轮船更加深入人心，又不像火箭那样脱离现实。
当然并非所有的图标一定需要去结合行业特征，其余的三个图标暂未想到更适合的元素，所以依然选用了常见的形象来传达概念。我们不需要完全硬坳这个方法，但是身为设计师，我们依然需要掌控我们的项目，充分发挥自己的创造力来赋予产品更多的power。
最后，我为所有图标加入了非线性动画。一方面为着陆页注入了活力，增加用户愉悦度，另一方面通过动态的表达引导用户更好理解平台优势，比如地球仪通过加入轨迹的修剪动画以及定位的弹跳动画，来更生动得传达物流轨迹全程跟踪的这个概念。相比原本的静态图标是不是更好理解了？
更重要的是，动画的加入也贴合了我们物流行业“运动”的特征~
篇幅原因，动画的制作今天先略过，后面可能另抽时间单独出个教程出来。当然，动力来自于你们的在看或转发啊～～（手动斜眼）
我们每次接手一个需求时，都要想想，这个设计可以在哪些地方和我们的业务、品牌进行关联？而不是每次都好像在做一个完全独立于业务外的项目，这很容易让你陷入反复改稿的被动局面，而且话语权也越来越小。
总之，品牌思维是需要设计师格外关注的！
最后，我们再来回顾一下这个图标三步品牌化这个方法！
第一步，融入品牌符号；第二步，注入品牌颜色；第三步，结合行业特征。
但愿今日份的分享对你有所帮助！
文章来源：人人都是产品经理 作者：Andrewchen
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导读：对于老一辈人来说，他们没有赶上互联网兴起的时候，等到想要主动“触网”时，才发现很多操作根本搞不清楚。尽管产品设计师已经极可能考虑到了老人群体的用户体验，但在实际操作中，老人家还是一头雾水。这时，操作越是简单的产品，越能够赢得他们的喜爱。本文作者从自身经验出发，对这类现象进行分析，与你分享。
上周某天吃完晚饭，我妈递过她的华为手机怯怯地问我：你有空吗？我想叫你帮我跟那个商家说换一个快递，我们家这边的百世快递的站撤了，叫他们不要用这个快递。
我脑海中闪过一个念头：嗯？最近我没有帮她付款啊。但随即也是接过她的手机打开了淘宝。我妈立刻阻止我：不是淘宝，是拼多多。随即自己打开了她微信里的拼多多小程序，演示给我她找不到商家客服。我跟她说，这个功能要用APP才行，于是帮她下载了拼多多APP并很快解决了问题。
弄完之后，我们又展开了这样的对话：
我妈：哎呀，这个拼多多真是太好了，物美价廉，超方便！你怎么不早教我用！
我：我自己都不怎么用拼多多啊！
我妈：这个是我的舞友上周教我的！我打开一看，哇，好多有用的东西，又便宜！第一天我就买了几百块的！
我：但是拼多多很多假货啊！
我妈：我又不像你们追求什么名牌！有什么假货可言？一条裙子30块！
我：……
我妈：而且！以前我在淘宝总要你帮我付款，现在我用拼多多自己用微信就可以支付了。
我：我早就叫你开个支付宝账号，你自己又不开！
我妈：那么麻烦，我不会，你又不教我！而且又要绑定银行卡，万一哪天我的钱被人家骗走，那些什么黑客……
我：哪有黑客黑你，你又不是马云……
我妈：还有，拼多多退货很方便！以前我在淘宝的时候，退货要你帮我搞，还要在家等快递上门，很不自由，现在我自己去菜鸟驿站退就得了。
我：好吧。
我妈：以后我就用拼多多，我那些舞友都在用！
我：你开心就好。
我回头想了想，这是一个以用户定位和产品特征为优势抢夺用户的典型场景。
首先看看以我妈为原型的粗略用户画像：
为什么我说拼多多是从用户定位和产品特征这两个维度抢夺走了我妈这样的淘宝用户的呢？
首先，我用的是“抢夺”这个词。
我并没有用挤占、分流这样的词。因为，在跟我妈的交谈里，我已经感受到她心里估计“从此淘宝一生黑”了。也确实，一个月以来我妈没有再叫我在淘宝付款过。所以，我想我妈大概率未来不会再用淘宝了，也就是说，淘宝直接流失掉了我妈这个用户。
其次，来看看用户定位。
根据上面我列出的以我妈为原型的用户，多吗？我简单查了一下。
根据国家统计局官网上发布的《中华人民共和国2019年国民经济和社会发展统计公报》，60周岁以上的人口约有2.5亿人，60-65周岁的人口约有83250000人，分别占人口总数的18.1%和6%；根据中国互联网信息中心官网发布的《第46次<中国互联网络发展状况统计报告>》，截止2020年6月，我国手机网民用户规模达9.4亿。
那么，根据这个比例可以推算，这样的用户大约在5千万—1亿的规模。
这么大的一个用户群体，实际上是淘宝自己放弃掉的。自从前几年淘宝打假货的行动和品牌化（力推天猫）的战略执行以来，实际上大量的县城以下、60岁以上的用户都被淘宝放弃掉了。
以我妈为原型的这批用户，他们大多数没有支付宝账号，但在微信上有钱，但除了平时发发红包，菜市场便利店买点东西，基本上还是没有用出去。于是，这批用户沉淀在微信钱包里的海量的钱，很难直接转化到淘宝上。
另外一个关键的地方在于，他们对淘宝是有怨言的，但在拼多多出来之前，没有替代物。某种程度上来说，对用户而言，忠诚度是很虚无的。真正对品牌有感情而产生“忠诚”的用户极少极少，品牌还是得需要不断优化产品，满足用户的需求。
品牌也好，产品也好，本质上是为用户提供价值，而不是要跟用户“谈恋爱”。
这是很多品牌的一个误区。没有在自身的产品上下功夫，去了解用户瞬息万变的需求，而去打“情怀”，讲“文化”。所以，我们可以看到当某些品牌醉心于自己的“情怀和文化”之时，其竞争对手在了解用户需求和优化产品而推出竞品后，瞬间打垮行业老大哥的案例。
最后来讲讲产品特征。
我妈使用淘宝的流程是怎么样的呢？
挑选商品——下订单——点击“找人付款”——发送需支付的订单到我的淘宝账号——退出淘宝——打开微信——告诉我发了一个订单——发红包给我——我看到微信或淘宝信息——点击需支付的订单——支付——退出淘宝——打开微信收红包。
而她使用拼多多呢？
挑选商品——下订单——支付。
当我列出这两个产品使用流程之后，我猜如果你是我妈，你也会用拼多多了。
在我妈跟我的对话里，还突出强调了“退货难”这个点。实际上是淘宝的物流服务不好吗？并不是。我一直觉得淘宝的物流虽然不如京东，但并不差，而且也不断在优化升级。但为什么我妈还是觉得不好呢？这一点不能单纯地从物流本身来看，而得回到淘宝的产品来看。
在淘宝上，推出了一个功能，叫“找人付款”。当时我觉得这个功能很好，解决了我帮我妈买单时，她要跳出淘宝从微信给我发链接的麻烦。但最终却带来了一个重要的弊端：当要退换货时，我这边无法执行，她那边又不知道如何操作。
而当我从PC端登上我妈的淘宝账号之后，PC端的退换货服务非常麻烦和繁琐，让我都研究了差不多一个小时才解决。而最后，我妈那边又无法支付退货费用，我在PC端也支付不了，也不能“找人付款”。总之，整个过程极其麻烦。虽然淘宝也意识到了产品上的缺陷，但目前的情况而言，这样的产品还是对于我妈这样的用户非常不友好。
而拼多多呢？它基于微信这个社交生态圈。加上没有什么太多余的功能，我妈很快就能上手了，自己操作还是比别人代操作方便多了。
谈到这里，我还意识到一个重要的问题。
从产品对人际关系的影响而言，淘宝是负向的，而拼多多是正向的。从某种程度上而言，60岁以上的这代人，是被互联网抛弃了，所以当他们想搭上这波潮流时，不得不面对自己的儿女，需要向他们请教，怎么用怎么学。这一点首先就会让不少子女心烦，不少父母自卑。
再进一步，如果每次父母网购都得“捆绑”上子女时，对人际关系是正向的吗？而在拼多多上购物时，他们不仅可以大大优化自己的产品使用流程，还能跟自己的老朋友们一起拼单，互惠互利，这对人际关系的影响有很大的正向作用。
你有什么被别的产品抢走的故事吗？
一点个人小想法，想到哪写到哪。
如果你有不同的意见和想法，欢迎评论或留言。
文章来源：人人都是产品经理 作者：@源记物语
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
Apple 致力于让每件产品都赏心悦目，与其说官网是产品展示平台，倒不如说它是苹果产品分支的延续。从 Apple.com 找设计灵感是每一位设计师都做过的事，那它到底有何魅力？文章对Apple的网页设计展开了梳理分析，与大家分享。
每当有新产品发布时，我们都会被它的 Landing page 所吸引。不管是 AirPods Pro 也好，和前段时间发布的 iPad Pro 也一样。
这背后是 Apple 基于 webGL 技术，创造的一种沉浸与交互式产品体验。
我们在产品介绍页可以看到，苹果使用了大量的滚动 scroll 来体现连续性。
一方面，滚动作为大多数 Web 用户最自然的操作，学习成本极低。
另一方面，在冗长的页面下，滚动能让产品特性保持更自然的转场衔接。
iPad Pro 的连续性
另外，采用了大量的动画式转换（animated transition），即操作时展示的动态效果，以此来增加趣味性。
伴随着丰富的、若隐显现的章节文案，就像电影的旁白一样，娓娓道来。
通过滚动的方式增加交互性，这是明智之举。试想一下，如果只放置已渲染的演示视频，那么用户的操作会受到限制，只能在视频中前进或后退，毫无乐趣可言。
AirPods的趣味性
说到言之有序，我们看 iPad 的页面介绍。四款产品，分别是：iPad Pro、iPad Air、iPad、iPad mini。
拍摄角度的秩序感，可谓妙不可言。
iPad的秩序感
如此一来，即显得有序，也不会导致视觉疲劳。
其次，官网与 iOS 保持协同的设计语言，给用户呈现了一致的感官体验。
从 iOS 11 开始，苹果就采用了 Large Title 大标题的字体风格。字重也从 Regular + Light 的组合，转向的 Medium + Bold ，以此增强信息传播中的识别力。
HomePod
另外，高斯模糊的标题栏背景、产品的投影等设计语言也保持系统一贯的风格。我们可以很清晰的看到 Web 设计的同步转变。
第三是视差带来的层次感。
苹果奉行包豪斯的无装饰和极简的理念。当然，它不是那种附庸的美观及外表的光鲜，而是将复杂难懂的技术以简洁的形式传达给用户。
Mac Pro 视差滚动
在信息层次方面，Apple 的编排设计由浅入深，犹如抽丝剥茧。很好的利用了视差滚动，传达图片与文字之间「层」的概念。这种深度感可以增加用户的理解和乐趣。
不仅如此，样式上富有视觉张力。或扩张、或收缩、或吸引、或排斥之感觉，呈现刺激与震撼。举两个例子：
A13芯片的扩张力
扩张力：整个画面以 A13芯片 为视觉中心点，元素和布局围绕这个视觉中心点向外扩张。采用发散式的视觉引导，视觉张力就出现了，让人感觉巍峨壮观。
Pro级摄像头的排斥力
排斥力：通过元素的大小对比，可以形成一定强度的视觉排斥力。Pro级摄像头 辅以大特写，传达空间意识。视觉上被其构图、美感触动。
再聊聊苹果的高级感是怎么来的？
我们都知道，高饱和度的色彩，会影响人的情绪波动。相反，低饱和度的配色，对人眼的刺激较弱，会有一种冷静且克制的高级感。
iMac Pro 高级感
回过头来看苹果官网的大部分页面，除了产品界面色彩 和 按钮蓝 之外，其他的文字、背景、控件一律采用黑白灰色系，以此营造高级感。
甚至是 iPhone 11 Pro 新出的暗夜绿，也是高级灰中加了一点点绿而已。
换言之，减少使用颜色的数量，降低色彩的饱和度都能削减色彩对人的情绪，起到提升产品高级感的效果。
iPad 留白
除此之外，恰当的留白可以更加突出产品内容，让重要的信息更准确的传达。并且能营造出广阔的空间感，让画面得到延伸，呈现一种意境美。
所以我们做设计时应当多做减法，避免无意义的视觉元素堆砌，反而能让你的设计更有高级的气质。
这又印证了现代主义建筑大师密斯·凡德罗的那句话：Less Is More。
当然，只有留白是不够的。既然是做宣传，那么一份高分辨率、精致的配图就显得尤为重要。
苹果官网大部分的产品都是采用实拍+后期修图，而非渲染图。目的就是为了反映真实产品的质感、以及材质光影效果，这一点能看到苹果对于品质的追求。
Designed by Apple in California
不仅如此，苹果产品圣经《Designed by Apple in California》，以及壁纸同样是由摄影师拍摄完成。有兴趣的同学可以看下面这个幕后制作视频，相当硬核。
做过英文 Web 的设计师都知道，英文往往比中文更好设计，相同的布局英文出来的效果也更好看。
这不是崇洋媚外，心理学有个词叫做「母语羞涩」。简单来说就是，中文对于我们来说，太常见了会让人产生一种廉价感（实际上是羞涩感）的心理感受。
老外也一样，你可以看到美国企业：苹果、麦当劳、星巴克都是使用图形 Logo，而日本企业不用母语，而是用英文，比如 SONY、TOYOTA、Canon。
你的下一台电脑，何必是电脑。
回到苹果官网，我们看到一部分文案是英文产品名称，这个不会感觉羞涩。
那中文部分怎么办呢？比较有意思的是，Apple 的本土化团队用了完全不对仗但押韵、奇怪的排比、双关、重复等修辞手法。虽然语感很差，但基本上能明白字面意思。
其实这样做的目的就是为了创造一种陌生感、一种独特的语言风格，来凸品牌气质。举几个例子：
最后一点。生活要有仪式感，苹果官网也有仪式感。
国际妇女节专题
在一些特殊的日子里，例如三八节当天，友商选择打广告促销。而苹果推出了国际妇女节专题，致敬女性的伟大，这一做法颇具人文情怀。
不过话又说回来，感动归感动，还是参与友商的打折活动香。
文章来源：人人都是产品经理 作者：阿洋
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
的App类别是游戏，而健康&健身几乎没有进入前10。2020年虽是艰难的一年，但它提供了很多机会，可以为移动应用市场引入一种新的经济回报和有意义的医疗解决方案，直接影响人们的健康行为、并帮助他们生活得更轻松、更愉悦。
为此，你需要一个功能强大的App，因为如果不能运行的话他就是无用的产品。但是这种强大的功能还需要通过设计来将它呈现出来。一个优秀的医疗App设计将医药类App最重要的细节呈现出来，并引导用户使用，以及建议用户接下来如何操作，最终完成必要操作。
一个App能凭借自身成为一个的客户开发工具和公司的核心产品。对于与健康或医学相关的产品，UI/UX设计更为重要。
呼吸监测应用程序-作者: George Frigo
在这篇对设计师和公司都有帮助的文章中，我们将探讨一些医疗App设计中的最佳实践是如何发挥作用的。
医疗类应用类型
值得注意的是，“医疗保健App”是一个多方面的概念，包含了大量与健康和医学相关的数字产品。
这里有很多类型的医疗类App，包括：
医疗专业人员远程病人会诊的App（远程医疗）
电子病历App(EMR)
记录和管理患者生命体征的App
提醒患者服药、锻炼等的App
医疗计算App
提供医疗信息参考的App
健身和运动类App
健康的生活方式和健康App（每日饮水量、睡眠管理等）
这似乎是一个过于宽泛的主题（例如，将卡路里计数器app与医学教育解决方案相比较），但是也有一些通用设计经验可以使得医疗健康类App更、让人们有办法得到他们想要的。
医疗应用程序作者: Victor Nikitin
如何为医疗健康打造移动应用
即使一个App不是企业的主要产品，它也有可能产生巨大的价值。例如，如果它是一个医疗办公室的配套应用程序，它可以减轻员工的负担，为客户提供信息和服务。如果一个健康App是企业的主要产品，比如健身或冥想应用程序，那就比较危险了。有时候，健康App的缺陷是人们放弃使用这些App的原因。
为了避免这种情况，我们来看看医疗App设计中的一些最佳实践技巧，以及它们如何帮助App聚焦、直观和快速。
医疗保健: Anatoly
调研—成功的第一步
在设计原型应用程序界面之前，你需要知道谁是你的目标用户，以及他们的地理环境、社会经济背景和心理特征，毕竟没有产品可以迎合每个人。用户的兴趣和能力决定了他们如何与软件互动。所以解答以下问题将有所帮助：
谁是你的目标人群？
他们喜欢什么？
怎么样的app他们每天都会使用？
使用目的？
通常，医疗健康软件要么被患者使用，要么被医生使用（如果我们将生活服务类软件的用户也计作患者的话）。这两种用户的需求在功能和UI设计上都有不同。因此，医务人员通常需要快速获得某些数据项：EHR/EMR（电子健康档案/电子病历），药品规格标准，诊断和治疗建议，参考资料等。然而患者需要的是尽可能精简的、易于理解的信息项。因为这一群体中有相当一部分老年人或者有某种特殊障碍。
只有进行了恰当的用户调研，得出了相应的结论，设计师才能继续医疗健康软件的真实有效的设计。
Chahua的健康管理软件
细化明晰每个案例
医学对普通人来讲是复杂的学科，最好的方法反而是将医疗健康设计得相对简单，以安抚用户并让他们保持专注。
“世人总将事物搞复杂，殊不知，简单才是至理。” ——Richard Branson
想要给人留下深刻印象，将医疗UI设计得过于详细是没有意义的，最好的是界面和逻辑易于理解，即使软件是专为医务人员设计的（当然，不要居高临下）。
医疗App/档案和活跃度-作者: Igor savalev
设计医疗健康软件的UI，提供有益的新用户引导流程，使界面可直观理解。否则，用户会对糟糕的体验失望，甚至等不到进入核心功能就会退出。
所有相关方，不管是医生还是患者，都会喜欢清晰极简的软件，这样，你就不需要让用户学习如何操作软件，这对医疗机构来讲是个解决办法，他们已经习惯了这些事。
帮助用户稳定发现功能，循序渐进地给予指导。以用户引导流程开始，将app中每个动作划分成可处理块，一次提供一个操作说明。
使用恰当的颜色（更进一步）
利用被动输入和自动补齐功能限制用户必须输入的信息的数量，调整键盘，动态验证字段值。这篇文章里还有更多表单设计相关。
所有医疗信息都得由拥有一定学历和专业知识的专家提供，否则，这些内容要么不完整，要么包含错误，这在医疗健康中是不容允许的。
医务人员使用的医疗软件-作者: yurig
功能的重要性（及特色）
医疗保健应用程序的特性和功能类型取决于它的用途和目标用户。例如，医疗中心的应用程序需要一个账户，病人可以在那里查看他们的就诊、推荐和预约记录。如果没有安全加密的视频会议和通信功能，远程医疗应用程序就毫无用处。
与其他一般APP不一样的地方，“首页”是医疗类的app的主要功能的位置。先来回答一个问题: 为什么有人使用您的应用程序(或类似的医疗类App) ，如果一个人访问一个应用程序来记录或接收一些信息，联系医生，检查他们的进展等，这个功能都放在“首页”上？
呼应前面的观点，就是避免过多功能同时出现时的混乱。不可否认，这种情况在传统的医疗类App中更为常见，这些应用程序有时候会分散注意力，不断添加新的和新的功能，直到只有资深的用户才能理解并熟练使用。
根据二八定律的法则告诉过你，80%的用户倾向于使用不超过20%的功能。区分优先次序，决定哪些功能对用户最重要。
医药应用App作者: Manoj Dalvadi
导航的研究和鉴赏
清晰的导航结构是医疗应用程序用户界面设计的骨干必需组件。没有它，这个App将会不再受欢迎。导航代表和易用，因此从用户的角度来看是有价值的。一个医疗专业人士需要一个能辅助工具，因为他们已经有太多的时间花在处理EHR（电子健康记录）上了，【类似国内的病历本】。
经斯坦福医学院进行的调查发现，医生花在每个病人身上的时间中，有62%的时间花在EHR（电子健康记录）上。如果设计的导航不够，那么这个App就没有任何使用价值。就算病人目前在使用导航的频率很低，但他们也不会乐意看到混乱的导航而放弃二次使用的机会。
重要的导航信息应放在屏幕上显眼的地方，并根据要求提供详细信息。有一个“三次点击规则”说系统的设计应该使任何信息都可以在三次转换中使用。如果用户在三次点击之后找不到他们想要的东西，他们可能会感到沮丧，放弃他们原本要做的任务。
目前采用标准的应用程序导航有：
-汉堡菜单
-标签栏
-导航抽屉
医疗应用-作者: Alex Samofalov
色彩的运用方法
一般来说，应用程序的颜色选择取决于目标用户和应用程序的主题来决定。
医疗保健应用程序的设计通常是在中性色调与流行的冷色调的蓝色和绿色，白色为背景。在大多数情况下，设计师这样做是为了达到某些效果: 利用舒缓柔和的颜色与医疗保健行业的共同联系，缓解焦虑，增加可信度。所以你很少能看到明亮的红色或黄色在医疗类App的界面。
蓝色为主的医疗类App，作者Adam Sokoowski
然而，考虑到医疗软件的通用性，在颜色的选择方面没有特别的限制。要考虑到的是，应用程序的整体外观应该创造一个积极的印象，而不是引起担忧，恐惧，或其他不良情绪的感觉。
例如，下面这个健身应用程序的深色调的设计看起来很漂亮，也不过时：
深色为主的医疗类App
健康与锻炼应用程序-作者: Saepul Rohman
或者用明亮的颜色来增加一些活力：
移动健身应用-作者: Michal Parulski
追求个性
移动App的个性化设计是近年来最显著的设计趋势之一。某些功能需要适应特定的用户模式。
这样设计的目标是帮助用户更地利用App解决他们的问题。这个系统提示了一个人接下来要指示的操作，否则这些可能会被忽略。要做到这一点，必须识别和分析用户特征，并通过数据跟踪用户的行为变化。就像每个人都有自己不同的身体状态一样，他们也希望自己使用的App能根据他们的身体状态提供相应的差异化体验。即使不是医疗保健行业，也有33% 的客户会因为个性化不足而放弃某款产品。
在医疗App设计中，个性化定制选项有很多: 颜色主题、通知、交互元素、使用 AI 创建个性化推荐等等。
最大化可访问性设计
易访问性设计对于每个App设计都很重要，特别是医疗App。
医疗App的用户通常有不同程度的视力和听力，年龄，身体和心理障碍。医疗App的功能设计需要让不同的用户在使用过程中都有比较好的用户体验。考虑不同用户的局限性，并帮助他们努力克服局限性带来的负面影响非常重要。例如，晕动病患者不太喜欢过多动效。
这并不意味着在医疗App设计中只能有两种颜色，所有的字号都必须非常大，但这确实意味对于医疗App，设计师会面临更多挑战。不过这是一个额外锻炼机会，而不是负担。从WC3的网页内容无障碍指南开始，使用像这样的色盲模拟器。
App无障碍设计的例子: 把主要元素放在拇指区，不要忘记选择改变视图为水平模式，字号需要更大，等等。
色盲模拟器-作者: keithar
积极态度的力量
医学不仅复杂，而且通常让人望而生畏。比较聪明的设计手法是让你的应用看起来和医学毫无关系。这样可以消除人们对医学压力的刻板印象，让用户体验更加愉悦。
比如在用户使用的不同阶段运用积极的文案、有趣的图片、舒缓的颜色或其他元素。医疗App界面设计中的图片和图标需要能够用户调动积极、愉快的情绪，营造一种无痛感和安全感。
冠状病毒APP-作者: Mahdieh Khalili
不要将App设计成网页
在有医疗网站的情况下设计医疗App，老板甚至是设计师可能会将网页页面复制到App当中，这样通常会导致用户放弃使用App。
移动端和网页端的交互存在一定的差异性。手机的物理尺寸比电脑屏幕小。在手机上，我们的任何交互都是通过手指来完成，所以不愿意输入冗长的文案，同时期望产品运行得更快。
在大多数情况下，人们使用网站获取信息，使用App完成工作。此外，App集成了手机的功能，比如加速器和摄像头，使App的设计不同于网页。
健康医疗应用-作者: Grace Saraswati
适得其反
保持吸引力与功能平衡都很重要。医疗保健应用程序必须不能分散用户对其内容的注意力。仔细看看上面的要点，注意好分寸就行。
图形元素、包括动效，应该始终履行他们的使命，即数据输入，并说明微交互的用户与系统，而不是仅仅只为了使一个应用程序看起来很炫酷。
不要过度使用渐变和阴影，只将用户的注意力集中在主要文字信息上。只使用一种字体，你可以通过改变字体的大小和其他特征来改变它，比如斜体、粗体。
多使用简单的配色可以获得更清晰的品牌信息和导航。
健康与活动跟踪互动-作者: Dibbendo Pranto
抄还是不抄？
你可能会在某个时候想，如果觉得抄这个方案有用的话？是不是应该拿一些成功的竞争对手的应用程序复制一份。
其实，照抄其他产品是不明智的行为，因为他们的设计可能很容易就不够好。你最终可能正好抄了竞争对手的错误方案，从而阻碍未来应用程序市场运作。
另一方面，你肯定应该对其他应用程序进行分析，进行竞争对手的研究。一个应用程序应该与用户以前使用其他应用程序的经验相关。如果事实并非如此，而且你添加了太多的原创性，那么使用这个应用程序的用户就会觉得很麻烦，用户也不会容忍“一切都错了”的设计。苹果和谷歌都有人机界面指南和材质设计。
用户把大部分时间花在其他事情上 ——Jacob’s Law
有必要根据你的品牌、服务和产品的具体情况进行设计。好比如一个健身APP与一医疗APP，两者使用方向有很大的差异。所以说必须完全符合目标受众的要求、细节，以及应用程序的主题情况进行针对性设计。
药物提醒程序-作者: Martyna Zielińska
实用性测试
最后，要记住最重要的一点，每个设计师都可以认为这个决定是否合理。他们可能会对应用程序的架构和导航的一致性，深思熟虑的设计，以及最重要的实用价值深信不疑，以至于完全忘记了通过实践进行测试，设计师可以提高他们的同理心水平，更好地感受客户的需求。但事实上，这种陷阱会给应用程序带来很多负面影响。
只有在分析了与用户与应用程序界面交互相关的数据之后，才能得出结论。多进行一些测试将有助于及时地获得反馈，解决应用程序中的所有可出现陷阱一样的场景。
积极的用户参与是成功的关键。在年龄、职业、地理位置、性别、文化和宗教背景等方面，选择尽可能接近目标受众的相关测试对象。越接近越好。让他们执行你的应用程序的主要功能并收集反馈。
病历本App应用-作者: Alex Samofalov
最后
设计不单单是讨论颜色搭配和字体的运用，而是能够带来价值和解决业务问题。健康和医疗类App是一个敏感而富有挑战性的课题，需要特别关注。设计师们一直在努力平衡医疗应用程序极高的安全性和可用性要求与其界面的美学性，经过深思熟虑体验和用户界面设计成就一个很好的医疗类工具，让用户在一个简单和直观的界面的帮助下参与使用。
文章来源：花火圆桌（ID：huahuoyuanzhuo） 作者：Kate Shokurova
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
“我们不设计页面，我们设计构成元素的系统。”——Stephen Hay
原子设计理论并不是什么高大上的规则。
随着网页设计的持续发展，我们认识到开发设计系统（design system）的重要性，它最早就是为了让网页设计师更容易理解网页的构成，后来才延伸到UI设计当中。
简单来说，当公司的业务产品逐渐扩大时，我们需要制定一套完整的设计系统，提升设计和开发的协作效率，统一所有设计师的输出物。 开始设计系统的制定时，大部分设计师可能都会先去网上找到大厂现成的设计系统，当拿到他们的成品的时候，会把自己的产品进行拆解和借鉴，这的确能快速解决问题，但是如果不理解其中的组织规则和逻辑，只是借鉴他们现成的设计系统，只能了解个大概，知其然而不知其所以然。因此，原子设计理论的出现就是为了帮助我们去搭建设计系统，这套理论已经逐渐被国外一些大厂应用于创建统一和富有层次的设计系统。
原子是所有事物的基本构成物质。每一个化学元素都具有不同的性质，并且它们一旦被分解就会失去其意义。
分子是由两个或两个以上的原子通过化学键结合在一起的。这些原子的组合具有自己独特的性质，并且相较于原子来说，更具实际意义和可操作性。
有机体是由分子有机地组合在一起的。这些相对复杂的结构可以从单细胞生物一直到像人类这样难以置信的复杂生物体。
宇宙中的物质都可以被分解成为原子元素。
碰巧的是，我们的界面就是由一些基本的元素组成的。Josh Duck的“HTML元素周期表”完美阐述了我们所有的网站、APP、企业内部网、hoobadyboops等等是如何由相同的HTML元素组成的。
△Josh Duck的“HTML元素周期表”
接下来和大家细聊一下什么是原子设计；原子设计到底好在哪里；为什么要有设计系统；以及该如何利用原子理论创建自己的项目组件库。
原子设计（Atomic Design）理念最早是由国外网页设计师Brad Frost提出的，他从化学元素周期表中得到启发，发现原子结合在一起，可以形成分子，进一步形成组织，从科学的角度来讲，在宇宙中的所有事物都是由一组有序的原子组成。
Brad将这个概念应用到界面设计中，仔细观察后我们不难发现，界面其实就是由一些基本的元素组成，文字，颜色和图标等都是一个个原子。
通过原子设计，我们可以把界面看作是一个连贯的整体，同时也是一些元素的集合，每个元素都不尽相同，互相结合产生更多层次和结构，模块之间相互统一。说到底，原子设计其实是一种设计方法论，它由原子、分子、组织、模块和页面共同协作，由此创作出统一和富有层次的设计系统。
简单来说：原子结合在一起，形成分子，进一步结合形成的生物体。原子理论意味着在已知宇宙中的所有事物都可以分解为一组有限的原子元素。
原子设计是一种方法，由五个不同的阶段一起工作，以更慎重和更具层次的方式创建界面设计系统。从而创造出更有效的用户界面系统的一种设计方法。
它的五个不同阶段是：
原子(Atoms)：为页面构成的基本元素，例如标签、输入框、文字、颜色等；
分子(Molecules)：由原子构成的简单UI元素，例如按钮；
组织(Organisms)：相对分子而言，较为复杂的构成物，由原子及分子所组成；
模板(Templates)：以页面为基础的架构，将以上元素进行排版；
页面(Pages)：将实际内容（图片、文章等）放置在特定模板内；
原子设计不是一个线性的过程， 它更像是一个心理模型，来帮助我们把用户界面看作是一个连贯的整体，同时也是一些元素的集合。这五个阶段的每一个阶段都会在我们的界面设计系统层级中扮演重要角色。下面，让我们更深入的了解每一个阶段哦～
原子
如果原子是物质的基础组成部分，那么我们用户界面的“原子”就是那些构成我们用户界面的基本构件了 。在界面中以「元素」的形式存在，例如：颜色、文字、图标、分割线等。
在团队开始新项目时，为了保证各个页面具有统一的设计风格，我们会制定一套简易的视觉规范，在关键的设计元素上，各个设计师达成一致，这样就能很大程度保证不同页面的风格统一，并在这个基础上去探索更有创新意义的设计方案。
在模式库中，原子一目了然地展示了所有的基本样式，当你回来继续开发和维护你的设计系统时，这是一份很有用的设计参考指南。
分子
分子是原子组合建立的元素，两个原子即可组成一个分子。
在界面中，分子就像是一个由UI元素组成的相对简单的组织。例如，搜索框里的文字和图标共同打造一了个搜索表单分子。
以按钮为例，它的组成元素包含了文字、色块、图标和栅格。合并后，这些抽象的原子从毫无关联到又一个共同的目的，图标和文字互相配合传达意义，颜色定义了按钮的特性，栅格为按钮定义了一个尺寸和规范。
将单个元素组装为简单的功能组是我们一直以来构建用户界面的方式，可帮助UI设计人员和开发人员坚持单一职责原则，这种方式简单且复用性高，可以保证界面具有良好的可用性。
以界面设计中的表单为例，表单是一个非常常见的设计元素，一个表单分子是由文字、图标和线条原子组成。这些原子合并后，得到的是一个可以应用在任何信息展示或者功能入口的组合。
组织
组织是由分子或原子或其它有机体组成的相对复杂的UI部分 。这些组织组成了界面的不同部分。
通过结合分子和原子，我们可以构建更复杂和可扩展性的模块，这个称之为组织，其实也可以称之为组件，这些组件组成了界面的不同部分。同样以表单为例，一个表单我们可以通过数量的组合，以及间距的调整，元素的增减，在界面中表达不同的场景和含义。从建立分子到建立更精细的组件，这为设计师和开发人员提供了重要的内容构建思路。
组件在解放设计师生产力方面有着重要的作用，我们可以把界面中常见的组件进行分类整理，如搜索、表单、图片和卡片等，这些常用组件基本能满足日常的设计需求。以Aribnb为例，他们主要分为3类：卡片、表单和内容。每个标签内容的设计形式尽量都保持统一，因此负责不同内容模块的设计师只要选择同一个组件就能完成页面的设计。在短时间内就可以完成页面超多的复杂项目，极大的提升了团队的设计效率。
在网页端最典型的例子就是网站导航，搜索表单，我们几乎访问的每个网站都会看到这些类型的组件。
模板
原子，分子和组织的这种语言有助于我们有意识地构造设计系统的组件。但是，最终我们必须采用一个更适合描述我们最终产出的语言，这样才好汇报给老板、客户和同事，简单来说就是说人话。
模版的本质就是线框图，在这一步我们基本可以看到一个产品的形态。我们可以不断调整组件和分子组合在一起的效果来尝试不同的方案，找到一个相对合适的方案。模版的意义就在于可以专注于页面的内容结构布局，而不是页面的最终内容，此时模版内容是随时可以调整的，尝试不同的方案，在多个模版中进行对比，在这个阶段改动和沟通保证了成本。因此，模版在设计系统承载的作用就是保证设计方案在原型阶段的多样性。
模板是页面级别的对象，它将组件放置在布局中，并显示设计的底层内容结构。在设计一个有效的设计系统时，必须在布局的环境中展示组件的外观和功能，以证明这些部件组成了一个功能良好的整体。
模板的另一个重要特征是它们专注于页面的底层内容结构，而不是页面的最终内容。设计系统必须考虑内容的动态性质，因此，把例如标题和文字段落的图像大小和字符长度此类组件的重要属性说清楚是很有帮助的。
页面
页面是模板的具体实例，填充了真实的内容（图片、文字等）后形成页面，也就是常说的「视觉稿」，将占位符替换为有代表性的真是内容，使设计系统有了生命。在模版的基础上进行优化和完善就形成了页面最终的视觉方案。
页面阶段是原子设计中最具体的阶段，由于一些众所周知的原因这个阶段非常重要。别忘了，这可是用户在访问你的界面时会实际看到和交互的内容。
除了演示用户所看到的最终界面之外， 页面对于测试底层设计系统的有效性是必不可少的 。在页面阶段，我们可以看到当将真实内容应用于设计系统时，所有这些模式如何运作。所有的一切看起来都很棒吗？如果答案是否定的，那么我们可以回过头去修改我们的分子、生物体和模板，以更好地满足我们内容的需求。
页面还提供了一个表达模板变量的地方，这对建立强大而可靠的设计系统至关重要。以下是模板变量的几个例子：
用户在其购物车中有一个商品，另一个用户在其购物车中有十个商品。
网页APP的仪表板通常显示最近的活动，但是该部分对于首次使用的用户是禁用的。
一篇文章标题可能是40个字符长，而另一篇文章标题可能是100个字符长
在所有这些例子中，底层的模板是相同的，但用户界面将会随着内容的动态性质而改变。这些变化直接影响了底层分子，有机体和模板的构建方式。因此，创建解释这些变量的页面有助于我们建立更具弹性的设计系统。
这就是原子设计！这五个不同的阶段同时协同工作，以产生有效的用户界面设计系统。
原子是最基础的UI元素，并且是可以用作界面的元素构建块；
分子是用于形成相对简单的UI组件的原子集合；
组织是形成界面各个部分的相对复杂的部件；
模板将组件放置在布局中，并演示设计的底层内容结构；
页面将真实内容应用于模板，设计出视觉稿，并最终成为开发落地的依据；
原子设计为制作设计系统提供了清晰的方法。客户和团队成员通过实际的设计流程与步骤，能更好的去理解设计系统的概念。原子设计使我们能够从抽象的设计中过渡到具体的设计中来，因此我们可以对一个设计系统进行一致性和可伸缩性等类似特性的控制。
通过模块化的设计系统调动组件，可以使我们开发新的产品时，从开始就可以对产品进行严格的把控与一定程度上的控制，进而规避了事后风险。开发之前不确定好系统模块化，毫无逻辑的去开发，开发到一半发现功能与需求对不上等问题逐渐产生，会导致产品的延期、人员成本的浪费、资金成本的增加，产品的迭代率的下降、进而影响市场先机与市场占有率。
原子化设计与原来的样式库设计思路不一样，原子化设计从抽象到具象，从元素到组件，让设计师从底层开始思考，对整个设计会有更清晰的理解。同时也能让设计更加统一，在新增组件的时候更谨慎。
原子设计的原理可以保证任何一个设计组件的构成与开发构建组件一一对应。同时应用原子设计的设计软件（e.g., Sketch, Figma)可以给新设计师足够的自由满足需求变通，并且可以保证同一个设计组件的更新会覆盖到任何一个使用这个组件的设计中。
原子设计为我们提供了一些关键的见解，帮助我们创建更有效、更深思熟虑的UI设计系统。
那么、
如果产品规模小只需要1，2个设计师，大概率是前期不需要大费周章搞一个需要开发配合的设计系统。可以只利用Sketch或者Figma做一个像贴纸一样的设计组件库。但是功能多了怎么办，公司来新人了，当新设计师产出后就会发现与原设计师设计的风格不一样，慢慢发现整体设计风格不统一了，只靠一个简单的组件库很难能满足新功能需求，新功能贴纸上没有设计或者设计需要变通，又或者是新设计师忙着交工忘记检查自己新组件和已有组件的异同。
这时候就会需要一个设计师领头去重新整理设计系统，走查发现同一个正文所用的十几个不同字号，又或者是十几个透明度不同的灰黑色字体，所有组件跟现有上线产品对比整理好后一并交给开发，开发再一一整理代码库。
设计系统（Design Systems）对于很多年轻设计师可能十个新名词，但是设计规范和组件等我们应该还是有一定认知的。在设计的过程中，我们会被其影响。在我们日常所使用的App产品中，如Apple、Google、Airbnb、Uber、滴滴等，他们的产品体验非常流畅，用户使用产品时能够地满足需求，在其良好的体验背后都有着一套强大的设计系统做支撑。
为什么需要设计系统
1、团队协作，体验一致。以滴滴为例，虽然只是一个简单的打车应用，但是其旗下的业务却很多，快出、出租车、顺风车等，每个业务都由不同的团队和设计师负责。可以想象如果没有设计系统，任由各模块设计师自由发挥，风格各异，出来的结果可想而知。而有了设计系统的帮助，就会感觉界面风格非常统一，感觉是出自同一个设计师之手，可见其设计系统的功劳不小。
2、系统的管理多样性。在设计过程中，我们会发现过程中，我们会发现每个业务的形态都是基于不同的场景，因为场景的多样性，在表现上就会催生出不同的样式。如果每个业务都用一种样式表达，久而久之当业务增长过快时，我们现有的设计模式就会难以满足。Airbnb的设计方式就是非常值得参考的一个案例，从最开始是提供民宿，到后来新增的餐馆服务，你会发现房源和餐馆都用了同一套图文信息结构，只是在内容的细节上有一些不同。这样可以降低设计的难度。设计师不用为每个场景思考一个设计模式而烦恼。同时，用户在浏览不同场景的内同时，在相互切换中也不会产生为违和感，一切都是很自然的操作。
3、帮助产品成长，避免一次性设计。互联网产品的成长模式是一种渐进式迭代，在产品初期的主要诉求是快速上线，等到产品上线获取一定的用户，证明它可以活下去时再逐步完善，增加更多的功能。每一次的迭代都是站在我们之前的思考之上，每一次的优化都会让我们的设计更进一步，这是我们期望达到的结果。
以Uber为例，新版本继承了黑色按钮的设计，并和地图进行了结合，地图的配色和旧版本相比也变得生动了，这种改变并不是一蹴而就，而是建立在原有版本之上。
一致性（Consistency）：由于分解界面成单一元素，不论在哪一个页面，UI元素的互动性是相同的，例如颜色变化、字体的排序、以及反馈。不但让使用者体验相同，在视觉上更为和谐。
效率（Efficiency）：由于建立了组件库，一旦要更改某一个元素，可以马上施行、应用。
跨部门的共通语言（Collaboration）：不仅方便设计师思考页面的和谐性，也可以让工程师、测试检验清楚页面的逻辑架构及变化，减少不必要的来回沟通
在此，顺便浅谈下设计系统。
通常，设计系统包含的内容由设计原则、设计语言和组件库，这是一个整体的概念。
设计原则
设计原则是一个产品的核心设计理念，设计的本质就是解决问题，在制定设计原则时要建立在这个中心思想之上。这些问题也许是一个业务形态，例如打车的场景，也许是一个设计形式，如表单。设计形式又很多，我们应该如何选择呢？相对合理的方法就是建立一个规则，所有的问题和形式都想这个规则靠拢，减少不确定性，这就是设计原则的出发点。因此我们可以理解为，设计原则就是一系列的规则，是我们设计过程中要遵循的中心思想。
例如：苹果把审美作为第一要素存在于设计原则中，它的产品往往也是品味的代名词，看看它的设计原则就知道了：
审美的完整性
一致性
直接操作
即使的反馈
隐喻
用户可控
△ 官网：https://developer.apple.com/design/
再来看看Material Design，Google对其定义是一个完整统一的系统，结合了理论、资源和工具的数字体验产品，相比而言它的设计原则就是更加独特，这是它的设计原则：
材料是一种隐喻
大胆/图形/强调/
运动赋予意义
灵活的基础
跨平台
△ 官网：https://material.io/design
由此可以看出，和iOS相比，Material Design的设计原则更加的抽象，因为他拥有一个独特的设计世界观，用还原的方法和物理方法呈现出它的本质，通过抽象的视觉卡片传递出设计的目的和原则。
设计语言
在建立设计原则后，下一步就是制定一套设计语言规范，设计规范是设计系统的表现层，面向的对象是团队设计师和开发者，他能帮助设计师的设计输出保持风格统一。同样也能帮助开发者高度还原设计。非常有利于设计师和开发者的协作。这套规范包含的有：字体、颜色、图标和栅格。
组件化设计
组件化设计主要作用有两点，一是保证多人协作效率，组件化设计可以快速完成一个简单页面的设计，提升设计效率；二是保持产品体验的统一性。同时，组件化设计环节在设计系统中是一个相对重要的工作，需要有一个全局观，要有较强的设计水平和沟通协作能力，这样，组件化的落地才会得到很好的推进。
在多屏时代，我们时时刻刻都在设计产品界面，需适配多系统，其中很重要的一点是如何在多系统之间保持体验一致性，很多人想到的就是规范，要想做一套严谨逻辑好，灵活的设计规范，那么原子设计可以帮助我们来很好的实现它，它在构建设计系统中算是比较科学的一种方法，国外很多设计团队都在使用这样的设计方法。比如以下这几个团队：
1、Airbnb
Airbnb设计副总裁Alex Schleifer在IXDC2017国际体验设计大会上分享了这一创新React Sketch app 管理设计系统， 这是为Airbnb的设计系统而设计的，其实就是个实时更新的代码数据库，可以实时查询sketch数据、代码，也可以下载图标、设计模块，所有工程师、设计师都可以免费下载。
△ 官网：https://airbnb.design/events/when-we-use-systems/
2、Frames
Frames 使用了精致的组件和先进技术，并结合 Sketch 构建了强大的 Web 设计系统，同样能满足修改原子，全局同步更新的功能，支持响应式布局。提供了近百个网页模板，可以非常迅速地完成效果图制作。
△ 官网：http://framesforsketch.com
3、Nested Symbols
这是一套免费的设计系统，它将按钮、输入框、下拉菜单、通知等控件，都制作成了嵌套符号，方便自定义和编辑。
△ 官网：https://www.janlosert.com/
原子设计理论最大的价值，就是为设计体系/组件库的构建提供思路和方法，如果你不满足于市场上现有的设计系统，我们还可以自己创建。因此我们首先要为产品设计出一个独特的视觉语言作为起点。这个视觉语言一定要有力度、易于扩展，必须能在所有地方奏效！
接下来就以 Sketch Library 功能来实现组件库的创建。
第一步：定义颜色（color）
将颜色添加 Main、Text、Status 等一级分类，例如：Color/Status；再添加二级分类，例如：Color/Status/Success 等，命名需使用「 / 」 符号区分层级结构。定义好颜色和命名后，将每个颜色转换成 Symbol，便可统一调用。
第二步：定义字体（font）
根据设计规范，将不同字号的文字样式罗列出来，例如：Title 1、Body、Body2 等，按照「样式名称/颜色/对齐方式」的层级结构，将文字赋予 Text Style，整理出所有的字体样式。
第三步：定义图标（icon）
将图标放置在 24*24px 大小画板内，从定义好的颜色系统中选择合适的 Symbol，这样替换图标颜色时直接选定义好的颜色就可以了。在属性面板中锁定尺寸（size）大小，并把调整尺寸（Resizing） 设为上下左右同时吸附，以确保图标在使用时可以等比缩放。
第四步：加入其他元素（Elements）
根据以上对原子的定义和命名方式，依次完成对其他原子、分子和组织的定义，例如：按钮、表单、空状态等，整个过程都是通过 Symbol 的不断嵌套，最终实现组件库的创建。
第五步：加入组件库
使用快捷键「cmd+, 」打开 Preferences 面板，选择「Libraries」（组件库）标签，点击「Add Library」（添加组件库）按钮添加刚才的 Sketch 文件，完成后就可以从其他的 Sketch 文件中，对此库里的元素进行调用了。
写在最后，原子设计是一套具有科学严谨的创建设计系统的方法论，是一个构建UI系统的心理模型。
原子设计使我们可以将我们的界面UI细分为原子元素，并通过这些元素组合在一起形成最终的界面。
原子作为整个理论最基础的元素，当我们改变其中的原子时，整个体系都会发生变化。原子的设计概念和sketch中的“符号”有异曲同工之妙，当我们改变其中一个元素时，其他所有包含这个元素的页面都会发生变化，可以保证整个系统的一致性和层次感。原子设计为界面元素提供了应用规则和组织原理，这套方法论对于设计系统建立、团队协作、产品迭代都具有非常重要的指导意义。
经常有同学问ios设计规范，安卓设计规范在哪看这类问题，最后，来推荐一些大平台的设计网站，上文出现过的下面就不重复了。我们耳熟能详的优秀设计都是来自于这些世界互联网公司，说真的，审美这东西还真是人家说了算～
反正看看又不要钱，都去康康呗～
Google Design
谷歌设计中心，它非常全面的展示了谷歌的设计工作和概念。包括Material Design在内的所有关于设计、体验、产品等互联网领域的探索。
△ 网址：https://design.google/
Fluent Design
微软基于Windows10的设计语言，包括人机界面布局、控件、样式及资源下载。
△ 网址：https://www.microsoft.com/design/fluent/#/
IBM Design Language
IBM设计语言是伟大设计的代名词，他将人们的需求转化成精心打造的产品。在这里可以学习IBM设计团队一用户为中心设计的新思维方式。
△ 网址：https://www.ibm.com/design/
Facebook Design
脸书设计官网，在国内，我们常常看到脸书的设计文章被翻成中文为中国设计师所学习
△ 网址：https://facebook.design/
Uber Design
作为全球第一家即时打车应用，优步其超前的设计理念和优秀的用户体验成为同类产品竞相模仿的对象。
△ 网址：https://www.uber.deign.com/
Ant Design
蚂蚁金服设计平台是阿里旗下子公司，基于蚂蚁金服生态系统的跨设计与开发的体验解决方案。
△ 网址：https://design.alipay.com/
参考资料
《原子设计》官网
Airbnb 设计规范
Apple 设计规范
Material Design设计规范
Google及其他
文章来源：tob.design
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com