以下内容主要分成两大部分，第一是聊聊响应式和自适应的区别和原理，以及我们应该如何去设计响应式界面；第二部分也是比较关键的B端系统设计的核心，B端设计中台完整构建过程的具体步骤，以及应用到的格式塔原则，和命名的一些注意事项，内容较多，大家可以根据上述目录来选择性阅读。
简单概括多端兼容设计的发展史，最早是桌面端，比如桌面的一些应用；后来出现了移动端，针对移动端大家用的都是WAP，指一种无线应用协议，大家在用手机浏览一些网站，会把网站翻译成一种低流量的浏览方式，比如去掉图片大图，只剩全文字，因为当时网络不好，早在3G和2G时代移动端用的都是WAP；在2008年之后出现了响应式，也就是做一套代码可以兼容三端（网页、移动端、iPad）设备，在发展的同时也遇到很多问题，但响应式同时也遇到了很多问题；于是又出现了自适应，指不同的设备打开不同的页面进行自适应，自适应能增加效率，但需要增加工作量；2017年以后直到现在看到最常用的就是渐进式，类似完整的像在使用一个APP。这是多端兼容设计的整体的发展。
可以理解成用户在手机、电脑、ipad打开同一个界面，所呈现的界面是一样的。需要考虑移动端设计和网页端怎么通过一套代码进行兼容。
自动布局算是响应式的一种，但平时看到很多响应式其实并不是真正的响应式，而是自动布局，因为界面在不同的设备用的是不同的模板，当我们用电脑打开呈现的是一套模板，而用手机打开则是另外一套模板，这种看起来是响应式，其实不是。因为当我在开发者模式下调节不同设备展示时，就会发现，其实是换了一个网址来根据不同的设备进行自适应的，而真正的响应式是不需要刷新的，在拖小窗口的时候就会变成手机端的那个样子。
渐进式布局是近几年比较新起的，这种布局设计，很像一个网站或者本身它就是一个网站，但用起来就像一个APP一样，看到这里大家很容易相到，小程序就是渐进式布局得一种，小程序明显是一个网页，但通过技术的一些嵌入和一些接口或者缓存的方式的操作，让用户在使用的时候感觉小程序就是一个APP，但核心技术还是web网页。
响应式的原理是通过定位的方式来做响应式的各种开发，需要在页面中至少标出这十个点：中心点，上下左右点，上左上右点和下左下右点，这几个点其实就代表了做响应式和做布局相应的位置。这样可能大家不容易理解，其实结合figma来看，这些点对应的就是这样（如下图），在figma中的布局点。设计师通过调节图形的布局点，可以做到在页面拉伸时，让想动的元素跟随变化，不动的元素静止不动，这就是响应式的原理。换言之，我们做响应式布局的原理也就是通过figma或者sketch中的布局约束这个功能来实现的。
01、响应式
如下图是响应式的优点和缺点。响应式其实就是只开发一套页面，这个页面兼容三端。虽然做了响应式，但如何响应是需要设计师去设计的。比如我们设计了一个移动端界面，然后全部做好对应的自动布局，再进行页面拉伸，内容随之会发生变化，比如当拉伸到1024*768的时候，也就是iPad的尺寸，就会发现局部在设计上有些不合实际情况，这时就需要设计师在对应尺寸的设计稿上进行内容上的微调，比如按钮不可能那么长，就把按钮设计的短一点。当继续进行拉伸到1440网页的宽度时，然后再酌情针对网页尺寸的呈现样式，局部进行尺寸的调整，比如文字和按钮被拉伸到网页版都需要居中对齐，电脑端的样式就需要设计师重新排版了。
通常在B端系统，设计师需要做响应式设计时，往往是从大往小做设计，这也取决于这个B端产品是否需要进行移动端的设计，《B端设计总概二》中提到过什么情况下进行设计B端移动端。如果需要设计B端移动端，就需要我们将网页改成移动端设计，比如B端的侧边栏导航在拉伸到移动端时，就会变成用一个折叠悬浮的iocn来替代等等这样设计上的改变。在figma中，做三端拉伸时候，可以用断点插件来进行演示，通过对断点插件的设置，就可以完美的看到页面在三端不同情况的适配呈现，断点插件用来做演示非常方便。
02、自适应
如下图是自适应的优点和缺点，其实就是一个项目开发三个页面，分别做定制设计，网页端、移动端和Ipad端。
我们都知道2021年也就是今年是我国新基建的元年，十四五规划2035远景目标里提到重点发展传统企业数字化转型，尤其是今年我们设计师更能深刻体会，C端和B端已经是完全两个不同的行业，C端发展近十年，已经很难再做到创新上的突破，该做的功能和创新都已经做了，而B端这片蓝海才刚刚开始发力，很多企业也都在考虑B端系统的搭建，降本提效率成了很多公司新的指标，因此数字化转型重点在于B端系统探索，B端重点在于中台的搭建！设计师通过设计中台，构建出基本的业务类型，再分类到业务中，构建出不同的业务界面，所以设计中台非常关键，很多公司经常会用这两个系统去构建，Antdesign和Elemnet就是设计中台，我们会发现用Antdesign可以做出很多的系统，那怎么进行设计中台的设计呢？和我们设计师有什么样的关联度呢？带着这个问题，我们深度探索B端设计中台的落地！
概念：中台是互联网的术语，一般应用于大型企业，中国互联网的变革永远是从大型互联网开始，大型互联网公司引发了技术的变革，这也是中台的兴起，一般指搭建一个灵活快速应对变化的架构，快速实现前端提的需求，避免重复建设，达到提高工作效率目的。
作用：降本提效。如果没有组件库，普通设计师一天最多做十个页面，再多就不太可能了，如果有组件化得产生，一天可以做一百个左右的界面。在面对B端系统这样几千个页面的巨大的工作量前，组件库的作用尤为重要。但如果落地，就需要前端工程师的密切配合，因为设计师设计的组件只是一个样式，而前端需要把组件进行代码化，所以组件一定是代码化的，也就是说只有代码化的组件才是真正的组件。所以视觉组件的复用，和前端代码的复用，可以大大提高设计师的工作效率。
基本库指的是一些色彩系统、字体系统、图标系统、栅格系统、间距系统等等，之所以强调系统两个字，有系统就要统一规则和统一规范，然后进行调用应用在系统中的各个地方，比如我们想调用一个颜色，不是去随选用一个颜色，应该严格的从色彩系统中去调用，如果系统组件库里没有这个颜色，我们也绝对不可以使用，可以先用替代色做或者根据业务再进行补充颜色进组件库为了后续的调用，这是一种比较严谨的使用方式。所以在建立组件库的时候我们要考虑全面，组件库中如果没有相应的组件，我们应该试着反推一下，是否要加进组件库中去，来进行系统的调用。在做中台的过程中，我们一直使用Antdesign，我们对组件的名称，组件的分类其实一点都不陌生，其实Antdesign也在借鉴国外的Bootstrap组件库（大家感兴趣可以下载Bootstrap组件库进行查看），所以并不是Antdesign组件库形成了一定的规则，它也是在沿用别人的规则，而这些规则也需要不断的有大公司去继承出来，所以慢慢衍生出来现在这样的组件库，那中台设计，首先要搭建基本库，把基本库里的基础一些系统搭建好后，我们继续去做扩展库。
如下图，扩展库中包含了很多内容，比如分了四类，导航系统，数据录入，数据展示和反馈系统。其中导航系统又包含了，面包屑导航、下拉菜单、导航菜单、顶部导航等等，包括后面的数据录入、数据展示、反馈系统也包含了很多内容。我们做这样的扩展库，也不需要做成像Antdesign的组件库里包含的那么多，或者和新出得字节Arco组件库，因为它们面向的是系统级的解决方案，各行各业都可以用它，它面向的是一个大系统，也许我们只涉及到了其中的20%，因为也没有一个系统能用到它所有的组件，所以我们自己在设计组件库的时候，一定是按照我们自己项目的范围去做组件库，而不是做一个大而全的，大而全的组件库对我们也没有意义。它们做的是公共平台，而我们要做的是一个专属平台。
形成完基本库和扩展库后，第三步是建立方法库。方法库告诉我们的是什么时候用，比如我做了一个多选框，这个多选框应该什么时候用，是不是只要遇见一个选择就去用多选框，肯定不是，应该加以说明什么时候用这个多选框。类似于是组件的设计说明。
最后再做一个案例库，最佳实践库，具体组件什么时候用我们知道了，接着案例库就是在告诉我们应该如何正确的使用，或者说的方法是什么。比如标签的左对齐和右对齐，这种情况都对，什么时候用顶对齐，什么时候用左对齐，什么时候用右对齐呢？那么根据眼动仪实验数据数据来看，并且结合给出一些工作中业务中的最佳实践得案例放进去，给使用的人去做指引。
所以设计师做的事情，不仅仅是应用组件库和创造组价库，还应该指导其他设计师，指导开发人员在去复用每个页面组件的的时候，应该怎么正确的使用，这也是在B端设计中一个关键的环节，同时我们的视觉系统一定也是和业务有关联度的，所以在B端中做设计一定也不会脱离业务去做，我们一定要联系到实际的业务场景中，这个业务场景指的就是业务和视觉的结合，在做C端的时候，业务场景一定不会比B端多，C端的业务场景大多是定制化的业务场景，它要求的是个性化，不要求通用，尽量得个性化，比如图标、按钮、页面，而B端需要统一化，中台组件库的落地，可以大大提高设计师的工作效率和开发人员的协同效率，严谨的调用组件使用组件，可以使得系统页面保持高度的一致。
如图1：可以看出纵列的关系更紧密，因为纵间距小于行间距。
如图2：可以看出行间距大于列间距，它得横向关系更加紧密。通过图中这样的视觉设计为什么会感觉间距更加紧密呢？这属于用户心理学的应用，如果元素相邻的更近，元素之间的关系就会更加的紧密。
如图3：如果元素相邻的关系都是保持一样的，那么它们的关系是相对对等的。
由此可以得出结论，如果相邻的关系越近，它们的关联度就越近，如果相邻的越远，它们的关联度就越远。
应用案例：如图4卡片中得标题和内容，设计中把标题和内容进行区分，所以我们会做大量的留白，这样的留白就会让信息结构具有层次感，层次感就是指它们信息结构的关联度，如果想让它们有关联度，就让它们距离近一点不要做区分，如果不想让它们有关联度，或者关联度出现一个等级的区分，那么就可以加一条线，让它们之间的关联度分隔开。这就是格式塔接近性的应用。
如图5：如果去区分右边的形状，通常我们会根据形状进行区分，因为人的潜意识会认为相似的形状会更有相关的分类性。这就是格式塔中的相似性原则。
应用案例：如果文字的标题大小是保持一致的，包括它有统一的大小，统一的色彩，统一的字号，那系统中的其他同样功能的地方，都应该用统一的文字，这就是格式塔相似性的应用，比如图标也是一样，只有用了相似的图形大小，相似的颜色，在相同的位置，用相同的图标进行表达，图标之间的设计才具有相似性。
如图6：可以看到有一个L，是主体与背景进行了区分，如果在设计的时候让L看的更加明显，我们采用的办法就是将主体的色彩或者形状变的更加独特，或者将背景的颜色变得更加分明，这样就可以做到那个L看的更加明显。这就是主题与背景区分原则。
应用案例：比如警告弹出，可以用色彩去区分，目标就是让用户看的更加得清晰，当警告的时候给用户一个警告的信息，当成功的时候给用户一个成功的信息。还有类似对话框的弹出，采用背景变暗和加阴影的方式，都使用到了格式塔的主体与背景变化关系的原理。因此应用在我们设计系统中，前景和背景进行区分的时候，我们就可以通过色彩进行区分，色彩的区分要保持统一，比如背景色彩透明度50%同时加一些背景模糊，其他的背景也需要保持一致，阴影也是一样，如果把阴影放在一个平面上，距离平面越近，它得阴影越短，距离平面越远，它得阴影越长，这也是阴影的层级关系。
如图7：可以看出这是一个四分之一的圆形。
如图8：这个图可以看出是一个五角星。
封闭性应用案例：当一个形状被另外一个形状或者被另外一个色彩阻断的时候，并不影响人们对这个形状额外得认知，一定会脑补出另外一个形状，这个原则和我们UI的关系是什么呢？比如一个loading，半圆一直在旋转，或者图表中的圆占比，我们就可以判断出谁大谁小，谁多谁少，判断出当前的进程和位置，封闭性原则通常应用在图标的设计，图表的设计和步骤条的设计中。
如图9：可以看出用一些简单得形状来体现，其中三角形具有明显的指向性，三角形箭头指向右边，上面五个是一组，可以看出它们具有连续性；另外一组三角形箭头指向右下角，可以看出它们是连续的一组。不同的形状会有连续性，箭头也特别有指向性，这就是为什么返回和前要进放在不同的位置，当我们的数据需要有连续的时候，我们也要使用相似的形状来表达，这就是连续性原则的应用。
同理如图10：连续性一定是要有连续等阶的变化，从左上角开始，向下和向右我们可以看出有明显的颜色连续等阶变化，通过色彩的透明度也可以做到连续性。
很多公司或者不同公司有不同的命名方式，这个需要和团队开发提前做沟通，主要以方便开发习惯操作为主，如果不命名也不能非得说成是错误的，命名可以理解成是一件锦上添花的事情，因为一切都以效率优先，命名自然会影响工作效率，通常情况，组件的命名可以分成组件的名称、级别、尺寸、状态，这样的命名顺序来进行，这样命名开发使用也比较方便，因为是按照了开发的统一规则来进行命名的。如图所示：
当英文不好的时候，推荐大家记常用组件英文名，以及常用状态名、级别名、内部名、尺寸名和位置名，那这些英文也几乎涵盖了工作中80%的英文词汇，收藏记忆哦~
文章来源：站酷 作者：飞鱼十七
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
近两年，vivo 浏览器一直选择的是留白分割的设计方式，但核心竞品已经逐渐都采用了线性分割，甚至卡片分割的设计，是要坚守留白还是追随“趋势”，面对内外部声音的追问，我们开始了关于分割方式的详细研究与探索。
图1 资讯新闻的分割方式
研究不局限于资讯新闻信息流列表，而是回归到分割方式的本源，希望能一次性给大家一个明确的分割方式设计指南。
通过一系列的桌面研究、实践对比和趋势总结，我们可以将结论简要概括如下：
图2 三种分割方式示意
也就是说从选择的优先级而言：留白分割≥线性分割≥卡片分割。详细设计理念、目标和决策因素请参考下文（小结图见文末），希望可以帮助你扫清所有关于分割方式的困惑。
1. 定义
所谓留白分割，指的是只通过增加间距的方式，利用人的视知觉原理（接近法则：人的大脑会倾向于把彼此靠近的元素视为一组），自然的将信息进行分组。
图3 亲密性原则体现的留白分割
如上图所示，当纵向间距增加 1.5 倍后，信息被分为上下 2 组，当横向间距也增加 1.5 倍后，信息被分为上下左右四组，这就是留白分割。
值得一提的是，同类单一元素（图片、文字、图标等）之间默认采用的都是留白分割。比如相册中单张照片之间，文章中每个文字之间，间距留白是区隔单一信息元素的默认选择。
图4 相片和文字之间的留白分割
2. 使用原则
单个元素之间默认使用留白分割，随着元素的增多，多个元素按照特定的组合形成条目，条目与条目之间，或者条目组与条目组之间进行区隔时，就涉及到今天的主题：留白/线性/卡片分割方式的选择。在这一点 iOS 和 Android 系统中差异还蛮大的。
图5 iOS和Android系统的分割方式差异
在 iOS 中，线性分割是条目间默认的分割方式（参见 iPhone 通讯录和设置），当多个条目成组后，为了区分不同组别，则会采用更高层级的卡片分割方式。
在 Android 系统，留白分割是条目间默认的分割方式，线性分割用于划分信息组块，而不仅仅是区隔上下文内容。（参见 Pixel 5 的通讯录和设置）
从 2014 年 Material Design 发布后“卡片式设计”的风靡，再到 2019 年前后“去线化设计”盛行，结合设计趋势，再对比上图中 iOS 和 Android 的分割效果，建议在不影响核心数据指标的前提下，条目之间尽可能采用留白分割，会让界面更清爽，浏览更沉浸（毕竟即使是卡片设计的创始团队 Google，在设计 Android OS 时也并没有滥用卡片）。
3. 留白分割的分类及适用场景
留白分割的分类，指的是留白间距大小的设计规范，信息之间有多少种间距，每种间距适用于什么情境。
图6 留白分割的分类
日常设计中，视觉设计师经常会将页面网格化，然后以最小网格为基准，设计不同倍数的间距大小，以此来增强页面的秩序感。
理论上讲，只要分隔的间距够大，都可以根据接近性原则形成信息分组。但信息层次越多，需要的间距种类就越多，间距种类一多，信息层次就越不清晰（只能单纯根据间距大小判断信息层次，就好像只用邻近色进行色彩区分一样，不对比就不容易发现差异，不够直白）。而且每增加一个视觉层次，要求其间距至少要是上一层次间距的 2 倍，接近法则才能生效产生明显的分组效果。所以当条目信息层次较少（≤2）时，留白分割是比较合适的，当信息层次较多（≥3）时，留白分割既会浪费空间，也难以达到一目了然的分割效果。
1. 定义
线性分割，顾名思义，就是指用线来分割不同的信息内容。在 Material Design 中，对分割线(Dividers)有明确的定义和规范。（iOS 中没有相关定义，根据上图 4 的视觉效果，我更偏向 Android 的分割方式，所以更倾向于采纳 Android 的设计规范建议和效果）
分割线是一条细长、轻量的线，用于对列表和页面布局中的内容进行分组。从视觉效果上看，分割线可以将页面内容分割成层次更清晰的组块。
此外，MD 还定义了其 UI 细节，规定分割线的粗细是 1dp，颜色根据日夜间模式，可分别使用黑色或白色，不透明度为 12%，以确保 Android 平台所有分割线的显示效果一致。（国内的实际情况是：大部分 App 的分割线是 1px 粗细，相比 MD 的 1dp，视觉效果更符合下方的微妙原则）
2. 使用原则
分割线可以帮助用户理解页面内容是如何组织的。但过度使用分割线会造成视觉干扰，影响页面信息传达，所以 Android 系统明确规定了分割线的使用原则：
图7 Android系统中分割线的使用原则
3. 分类及适用场景
分割线可以分为三种类型：
图8 三种分割线示意
多数时候（信息层级≤2），采用分割线进行分割的信息，采用留白也是可以分割的，只不过需要留白间距足够大，比如我们把上述分割线的方式换成留白，因为间距够大，视觉效果也很清晰（没有多余线性元素的干扰）。
图9 用大留白替换分割线示意
但是如果为了提高屏效，希望在一屏内尽可能多的展示信息，那么同样的信息布局，分割线带来的分割效果会更清晰，如下图所示：
图10 追求纵向信息屏效时线性分割效果更好
当信息层级≥3之后，使用线性分割就要谨慎一些，可以具体看一下是否满足下方卡分割的使用条件。
1. 定义
卡片是一个由内容和操作组合而成的独立主题的面性容器①，它可以包缩略图②、标题③、副标题④、富媒体⑤、文本⑥、文字按钮⑦和图标按钮⑧，除了卡片容器本身，其他元素都是可选的，所有元素都以易于扫描和操作的形式放置在卡片之上。
图11 卡片可以包含的元素示意
2. 使用原则
使用卡片时应注意以下三个使用原则：
图12 卡片可以包含的元素示意
使用卡片需要满足以上三个原则，但并不是满足以上原则就可以使用卡片，具体卡片分类和适用情境请参考下文。
3. 分类及适用情境
卡片根据左右是否有边距，可以简单分为通栏卡片和非通栏卡片。
图13 卡片样式分类
从视觉效果上来看，由于圆角的聚焦效应，非通栏卡片对于凸显单个卡片的独立性和内容的效果都更好，画面的分割感会更强。
不管是哪种卡片类型，它们都是独立的、包含单个主题的内容(操作)的容器，它内容的独立性与我们前面提到的通栏分割线分割的内容相似。
那什么时候使用通栏分割线，什么时候使用卡片分割呢？这里有三个参考建议给你：
图14 使用卡片的三个参考条件
回到开篇关于 vivo 浏览器信息流分割方式的选择，因为项目成员偏好不同，大家各执一词都无法说服对方，所以设计师设计了三种不同的分割方案（仅分割方式这一个变量），分别进行了定性研究、定量研究和灰度数据调研。
图15 设计师设计的三种分割效果
在定性研究中，我们在线下对十余位用户进行了访谈，左右滑动三张设计稿，让用户对比观察三张图的差异，（不管是线性分割还是卡片分割，设计师都遵循了以内容为主导，弱化分割方式以凸显内容这一大原则，期望用户能始终聚焦在内容本身，不受分割方式的干扰），结果所有用户都说觉得三张图是一样的，表明设计师对分割方式的处理是达到了设计预期的。在主动告知差异后，三种分割方式的选择也比较分散，并没有显著的差异（样本较少，不具有说服力）。
在定量的问卷研究中，我们提取了用户对三种分割方式描述的看法，基本也符合大家对分割形式的预期。
图16 筛选的用户典型反馈
在最终的灰度测试中，留白分割以相对较好的数据结果胜出（结果数据保密，暂不方便告知）。所以在最终大家看到的全量版本中，vivo 浏览器默认采用的依然是留白分割的设计形式。
根据分割方式自身的特点（视觉干扰性、分割强弱感、滑动沉浸感）、上下文条目之间的关系，单个条目的内容复杂度，屏幕空间的利用率，我们可以对分割方式做一个简单的小结，如下：
图17 分割方式特点小结
简而言之：
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
近两年，vivo 浏览器一直选择的是留白分割的设计方式，但核心竞品已经逐渐都采用了线性分割，甚至卡片分割的设计，是要坚守留白还是追随“趋势”，面对内外部声音的追问，我们开始了关于分割方式的详细研究与探索。
图1 资讯新闻的分割方式
研究不局限于资讯新闻信息流列表，而是回归到分割方式的本源，希望能一次性给大家一个明确的分割方式设计指南。
通过一系列的桌面研究、实践对比和趋势总结，我们可以将结论简要概括如下：
图2 三种分割方式示意
也就是说从选择的优先级而言：留白分割≥线性分割≥卡片分割。详细设计理念、目标和决策因素请参考下文（小结图见文末），希望可以帮助你扫清所有关于分割方式的困惑。
1. 定义
所谓留白分割，指的是只通过增加间距的方式，利用人的视知觉原理（接近法则：人的大脑会倾向于把彼此靠近的元素视为一组），自然的将信息进行分组。
图3 亲密性原则体现的留白分割
如上图所示，当纵向间距增加 1.5 倍后，信息被分为上下 2 组，当横向间距也增加 1.5 倍后，信息被分为上下左右四组，这就是留白分割。
值得一提的是，同类单一元素（图片、文字、图标等）之间默认采用的都是留白分割。比如相册中单张照片之间，文章中每个文字之间，间距留白是区隔单一信息元素的默认选择。
图4 相片和文字之间的留白分割
2. 使用原则
单个元素之间默认使用留白分割，随着元素的增多，多个元素按照特定的组合形成条目，条目与条目之间，或者条目组与条目组之间进行区隔时，就涉及到今天的主题：留白/线性/卡片分割方式的选择。在这一点 iOS 和 Android 系统中差异还蛮大的。
图5 iOS和Android系统的分割方式差异
在 iOS 中，线性分割是条目间默认的分割方式（参见 iPhone 通讯录和设置），当多个条目成组后，为了区分不同组别，则会采用更高层级的卡片分割方式。
在 Android 系统，留白分割是条目间默认的分割方式，线性分割用于划分信息组块，而不仅仅是区隔上下文内容。（参见 Pixel 5 的通讯录和设置）
从 2014 年 Material Design 发布后“卡片式设计”的风靡，再到 2019 年前后“去线化设计”盛行，结合设计趋势，再对比上图中 iOS 和 Android 的分割效果，建议在不影响核心数据指标的前提下，条目之间尽可能采用留白分割，会让界面更清爽，浏览更沉浸（毕竟即使是卡片设计的创始团队 Google，在设计 Android OS 时也并没有滥用卡片）。
3. 留白分割的分类及适用场景
留白分割的分类，指的是留白间距大小的设计规范，信息之间有多少种间距，每种间距适用于什么情境。
图6 留白分割的分类
日常设计中，视觉设计师经常会将页面网格化，然后以最小网格为基准，设计不同倍数的间距大小，以此来增强页面的秩序感。
理论上讲，只要分隔的间距够大，都可以根据接近性原则形成信息分组。但信息层次越多，需要的间距种类就越多，间距种类一多，信息层次就越不清晰（只能单纯根据间距大小判断信息层次，就好像只用邻近色进行色彩区分一样，不对比就不容易发现差异，不够直白）。而且每增加一个视觉层次，要求其间距至少要是上一层次间距的 2 倍，接近法则才能生效产生明显的分组效果。所以当条目信息层次较少（≤2）时，留白分割是比较合适的，当信息层次较多（≥3）时，留白分割既会浪费空间，也难以达到一目了然的分割效果。
1. 定义
线性分割，顾名思义，就是指用线来分割不同的信息内容。在 Material Design 中，对分割线(Dividers)有明确的定义和规范。（iOS 中没有相关定义，根据上图 4 的视觉效果，我更偏向 Android 的分割方式，所以更倾向于采纳 Android 的设计规范建议和效果）
分割线是一条细长、轻量的线，用于对列表和页面布局中的内容进行分组。从视觉效果上看，分割线可以将页面内容分割成层次更清晰的组块。
此外，MD 还定义了其 UI 细节，规定分割线的粗细是 1dp，颜色根据日夜间模式，可分别使用黑色或白色，不透明度为 12%，以确保 Android 平台所有分割线的显示效果一致。（国内的实际情况是：大部分 App 的分割线是 1px 粗细，相比 MD 的 1dp，视觉效果更符合下方的微妙原则）
2. 使用原则
分割线可以帮助用户理解页面内容是如何组织的。但过度使用分割线会造成视觉干扰，影响页面信息传达，所以 Android 系统明确规定了分割线的使用原则：
图7 Android系统中分割线的使用原则
3. 分类及适用场景
分割线可以分为三种类型：
图8 三种分割线示意
多数时候（信息层级≤2），采用分割线进行分割的信息，采用留白也是可以分割的，只不过需要留白间距足够大，比如我们把上述分割线的方式换成留白，因为间距够大，视觉效果也很清晰（没有多余线性元素的干扰）。
图9 用大留白替换分割线示意
但是如果为了提高屏效，希望在一屏内尽可能多的展示信息，那么同样的信息布局，分割线带来的分割效果会更清晰，如下图所示：
图10 追求纵向信息屏效时线性分割效果更好
当信息层级≥3之后，使用线性分割就要谨慎一些，可以具体看一下是否满足下方卡分割的使用条件。
1. 定义
卡片是一个由内容和操作组合而成的独立主题的面性容器①，它可以包缩略图②、标题③、副标题④、富媒体⑤、文本⑥、文字按钮⑦和图标按钮⑧，除了卡片容器本身，其他元素都是可选的，所有元素都以易于扫描和操作的形式放置在卡片之上。
图11 卡片可以包含的元素示意
2. 使用原则
使用卡片时应注意以下三个使用原则：
图12 卡片可以包含的元素示意
使用卡片需要满足以上三个原则，但并不是满足以上原则就可以使用卡片，具体卡片分类和适用情境请参考下文。
3. 分类及适用情境
卡片根据左右是否有边距，可以简单分为通栏卡片和非通栏卡片。
图13 卡片样式分类
从视觉效果上来看，由于圆角的聚焦效应，非通栏卡片对于凸显单个卡片的独立性和内容的效果都更好，画面的分割感会更强。
不管是哪种卡片类型，它们都是独立的、包含单个主题的内容(操作)的容器，它内容的独立性与我们前面提到的通栏分割线分割的内容相似。
那什么时候使用通栏分割线，什么时候使用卡片分割呢？这里有三个参考建议给你：
图14 使用卡片的三个参考条件
回到开篇关于 vivo 浏览器信息流分割方式的选择，因为项目成员偏好不同，大家各执一词都无法说服对方，所以设计师设计了三种不同的分割方案（仅分割方式这一个变量），分别进行了定性研究、定量研究和灰度数据调研。
图15 设计师设计的三种分割效果
在定性研究中，我们在线下对十余位用户进行了访谈，左右滑动三张设计稿，让用户对比观察三张图的差异，（不管是线性分割还是卡片分割，设计师都遵循了以内容为主导，弱化分割方式以凸显内容这一大原则，期望用户能始终聚焦在内容本身，不受分割方式的干扰），结果所有用户都说觉得三张图是一样的，表明设计师对分割方式的处理是达到了设计预期的。在主动告知差异后，三种分割方式的选择也比较分散，并没有显著的差异（样本较少，不具有说服力）。
在定量的问卷研究中，我们提取了用户对三种分割方式描述的看法，基本也符合大家对分割形式的预期。
图16 筛选的用户典型反馈
在最终的灰度测试中，留白分割以相对较好的数据结果胜出（结果数据保密，暂不方便告知）。所以在最终大家看到的全量版本中，vivo 浏览器默认采用的依然是留白分割的设计形式。
根据分割方式自身的特点（视觉干扰性、分割强弱感、滑动沉浸感）、上下文条目之间的关系，单个条目的内容复杂度，屏幕空间的利用率，我们可以对分割方式做一个简单的小结，如下：
图17 分割方式特点小结
简而言之：
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
近两年，vivo 浏览器一直选择的是留白分割的设计方式，但核心竞品已经逐渐都采用了线性分割，甚至卡片分割的设计，是要坚守留白还是追随“趋势”，面对内外部声音的追问，我们开始了关于分割方式的详细研究与探索。
图1 资讯新闻的分割方式
研究不局限于资讯新闻信息流列表，而是回归到分割方式的本源，希望能一次性给大家一个明确的分割方式设计指南。
通过一系列的桌面研究、实践对比和趋势总结，我们可以将结论简要概括如下：
图2 三种分割方式示意
也就是说从选择的优先级而言：留白分割≥线性分割≥卡片分割。详细设计理念、目标和决策因素请参考下文（小结图见文末），希望可以帮助你扫清所有关于分割方式的困惑。
1. 定义
所谓留白分割，指的是只通过增加间距的方式，利用人的视知觉原理（接近法则：人的大脑会倾向于把彼此靠近的元素视为一组），自然的将信息进行分组。
图3 亲密性原则体现的留白分割
如上图所示，当纵向间距增加 1.5 倍后，信息被分为上下 2 组，当横向间距也增加 1.5 倍后，信息被分为上下左右四组，这就是留白分割。
值得一提的是，同类单一元素（图片、文字、图标等）之间默认采用的都是留白分割。比如相册中单张照片之间，文章中每个文字之间，间距留白是区隔单一信息元素的默认选择。
图4 相片和文字之间的留白分割
2. 使用原则
单个元素之间默认使用留白分割，随着元素的增多，多个元素按照特定的组合形成条目，条目与条目之间，或者条目组与条目组之间进行区隔时，就涉及到今天的主题：留白/线性/卡片分割方式的选择。在这一点 iOS 和 Android 系统中差异还蛮大的。
图5 iOS和Android系统的分割方式差异
在 iOS 中，线性分割是条目间默认的分割方式（参见 iPhone 通讯录和设置），当多个条目成组后，为了区分不同组别，则会采用更高层级的卡片分割方式。
在 Android 系统，留白分割是条目间默认的分割方式，线性分割用于划分信息组块，而不仅仅是区隔上下文内容。（参见 Pixel 5 的通讯录和设置）
从 2014 年 Material Design 发布后“卡片式设计”的风靡，再到 2019 年前后“去线化设计”盛行，结合设计趋势，再对比上图中 iOS 和 Android 的分割效果，建议在不影响核心数据指标的前提下，条目之间尽可能采用留白分割，会让界面更清爽，浏览更沉浸（毕竟即使是卡片设计的创始团队 Google，在设计 Android OS 时也并没有滥用卡片）。
3. 留白分割的分类及适用场景
留白分割的分类，指的是留白间距大小的设计规范，信息之间有多少种间距，每种间距适用于什么情境。
图6 留白分割的分类
日常设计中，视觉设计师经常会将页面网格化，然后以最小网格为基准，设计不同倍数的间距大小，以此来增强页面的秩序感。
理论上讲，只要分隔的间距够大，都可以根据接近性原则形成信息分组。但信息层次越多，需要的间距种类就越多，间距种类一多，信息层次就越不清晰（只能单纯根据间距大小判断信息层次，就好像只用邻近色进行色彩区分一样，不对比就不容易发现差异，不够直白）。而且每增加一个视觉层次，要求其间距至少要是上一层次间距的 2 倍，接近法则才能生效产生明显的分组效果。所以当条目信息层次较少（≤2）时，留白分割是比较合适的，当信息层次较多（≥3）时，留白分割既会浪费空间，也难以达到一目了然的分割效果。
1. 定义
线性分割，顾名思义，就是指用线来分割不同的信息内容。在 Material Design 中，对分割线(Dividers)有明确的定义和规范。（iOS 中没有相关定义，根据上图 4 的视觉效果，我更偏向 Android 的分割方式，所以更倾向于采纳 Android 的设计规范建议和效果）
分割线是一条细长、轻量的线，用于对列表和页面布局中的内容进行分组。从视觉效果上看，分割线可以将页面内容分割成层次更清晰的组块。
此外，MD 还定义了其 UI 细节，规定分割线的粗细是 1dp，颜色根据日夜间模式，可分别使用黑色或白色，不透明度为 12%，以确保 Android 平台所有分割线的显示效果一致。（国内的实际情况是：大部分 App 的分割线是 1px 粗细，相比 MD 的 1dp，视觉效果更符合下方的微妙原则）
2. 使用原则
分割线可以帮助用户理解页面内容是如何组织的。但过度使用分割线会造成视觉干扰，影响页面信息传达，所以 Android 系统明确规定了分割线的使用原则：
图7 Android系统中分割线的使用原则
3. 分类及适用场景
分割线可以分为三种类型：
图8 三种分割线示意
多数时候（信息层级≤2），采用分割线进行分割的信息，采用留白也是可以分割的，只不过需要留白间距足够大，比如我们把上述分割线的方式换成留白，因为间距够大，视觉效果也很清晰（没有多余线性元素的干扰）。
图9 用大留白替换分割线示意
但是如果为了提高屏效，希望在一屏内尽可能多的展示信息，那么同样的信息布局，分割线带来的分割效果会更清晰，如下图所示：
图10 追求纵向信息屏效时线性分割效果更好
当信息层级≥3之后，使用线性分割就要谨慎一些，可以具体看一下是否满足下方卡分割的使用条件。
1. 定义
卡片是一个由内容和操作组合而成的独立主题的面性容器①，它可以包缩略图②、标题③、副标题④、富媒体⑤、文本⑥、文字按钮⑦和图标按钮⑧，除了卡片容器本身，其他元素都是可选的，所有元素都以易于扫描和操作的形式放置在卡片之上。
图11 卡片可以包含的元素示意
2. 使用原则
使用卡片时应注意以下三个使用原则：
图12 卡片可以包含的元素示意
使用卡片需要满足以上三个原则，但并不是满足以上原则就可以使用卡片，具体卡片分类和适用情境请参考下文。
3. 分类及适用情境
卡片根据左右是否有边距，可以简单分为通栏卡片和非通栏卡片。
图13 卡片样式分类
从视觉效果上来看，由于圆角的聚焦效应，非通栏卡片对于凸显单个卡片的独立性和内容的效果都更好，画面的分割感会更强。
不管是哪种卡片类型，它们都是独立的、包含单个主题的内容(操作)的容器，它内容的独立性与我们前面提到的通栏分割线分割的内容相似。
那什么时候使用通栏分割线，什么时候使用卡片分割呢？这里有三个参考建议给你：
图14 使用卡片的三个参考条件
回到开篇关于 vivo 浏览器信息流分割方式的选择，因为项目成员偏好不同，大家各执一词都无法说服对方，所以设计师设计了三种不同的分割方案（仅分割方式这一个变量），分别进行了定性研究、定量研究和灰度数据调研。
图15 设计师设计的三种分割效果
在定性研究中，我们在线下对十余位用户进行了访谈，左右滑动三张设计稿，让用户对比观察三张图的差异，（不管是线性分割还是卡片分割，设计师都遵循了以内容为主导，弱化分割方式以凸显内容这一大原则，期望用户能始终聚焦在内容本身，不受分割方式的干扰），结果所有用户都说觉得三张图是一样的，表明设计师对分割方式的处理是达到了设计预期的。在主动告知差异后，三种分割方式的选择也比较分散，并没有显著的差异（样本较少，不具有说服力）。
在定量的问卷研究中，我们提取了用户对三种分割方式描述的看法，基本也符合大家对分割形式的预期。
图16 筛选的用户典型反馈
在最终的灰度测试中，留白分割以相对较好的数据结果胜出（结果数据保密，暂不方便告知）。所以在最终大家看到的全量版本中，vivo 浏览器默认采用的依然是留白分割的设计形式。
根据分割方式自身的特点（视觉干扰性、分割强弱感、滑动沉浸感）、上下文条目之间的关系，单个条目的内容复杂度，屏幕空间的利用率，我们可以对分割方式做一个简单的小结，如下：
图17 分割方式特点小结
简而言之：
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
“复杂是世界的一部分，但它不应该令人困惑，好的设计帮我们驯服复杂，不是让事物变简单（如果复杂是符合需求的），而是去管理复杂”--唐纳德·A·诺曼
与复杂共处，这是一个有趣的话题。在这个奉行“少即是多”的时代，设计师对于复杂噤若寒蝉，认为优秀的设计应该简洁明了，若无必要，勿增实体，而复杂则常备被视作失败设计的标签。设计师为了保持设计上的简约挖空心思，甚至试图通过削弱功能的方式来降低产品的复杂度，得到自己想象中的完美设计。然而一味追求“简单”的设计真的符合用户的实际需求吗？从心理学的角度来看，复杂的事物往往功能强大，而功能强大意味着更好的服务与更高的价值，用户也更愿意为之付费。当我们购买商品时，我们会仔细斟酌，拿着产品的功能列表反复比对，这个时候我们忘记了产品复杂与否，更多考虑的是功能是否满足自身需求。
对于大部分B端产品而言，复杂或许难以避免，复杂是出于实实在在的业务的需要，而非某位设计师的错误喜好。B端产品之所以给人感觉会相对复杂，是因为产品需要完成复杂的工作任务，界面内承载的信息内容较多，在视觉上会带给用户压力，直观感受上觉得产品很复杂。但是这些信息又都是必需的，如果缺少这些必要的信息，会对用户理解和使用产品造成阻碍。就如同飞机的驾驶舱，密密麻麻的按钮如此复杂，但是每一个按钮都有着相应的功能，不可或缺。既然复杂难以避免，那么作为设计师我们不应该被动接受或盲目拒绝复杂，我们应该学会如何与复杂共处，去尝试驯服复杂、管理复杂。
相信很多设计师和我一样，经历过现代主义浪潮的洗礼，对于简约的设计有着或多或少的偏好。因为这种偏好，在自己进行设计时也希望能够选用这种风格，在设计时刻意的去追求界面简约，却忽略了界面上的简约不等同于产品易于理解和使用。从心理学的角度上看，复杂的事物更容易理解，简单的事物反倒令人困惑，一味的追求简单反而会让事物变得复杂。
B端产品的目标是降本提效，追求简约的设计思想在B端产品的设计中并没有那么适用，为了提升用户的操作效率，我们需要将一些能够帮助用户理解的信息与常用的操作直观的展示给用户。这会在一定程度上增加界面的复杂度，但是相较于产品视觉界面会因此变得复杂，产品的易用性和操作效率对于B端产品而言会更为重要。
与复杂共处的前提是能够理性地看待复杂，复杂本身的含义即非褒义也非贬义。复杂描述的是事物的状态，它在词典上的解释是拥有很多即错综复杂又相互关联的组成部分的事物。产品复杂与否是由产品本身所从事的业务和需要完成的任务来决定，就像我们不能要求一个做机械结构设计的工程软件做得像一个图画板一样简单，因为两者的功能需求不是一个层面的，所以我们也不能单纯的将产品简洁还复杂作为评判一款产品优秀与否的标准。
我们之所以对复杂怀有畏惧，其实更多的是畏惧令人困惑的复杂，复杂与困惑有着本质的区别，理解他们之间的区别很有必要，复杂描述的是事物的状态，而困惑表述的是用户使用产品时的心理。复杂的背后可以拥有规则与逻辑，理解这些规则和逻辑，能够帮助我们理解和使用产品。而令人困惑的产品往往缺少这样的内在规则与逻辑，用户难以理解产品的运转机制，需要花费很大力气才能完成有效操作，容易让用户产生挫败感。产品可以是复杂的，但是不应该让用户困惑。
在很多复杂的传统线下业务数字化转型的过程中，为了让产品易于使用，设计师需要深入到一线，去了解真实用户在线下业务场景中是如何处理日常任务的，在流程线上化过程中也需要遵循这样的业务流程，这样能够让用户更快上手，而如果我们在设计过程中不去参考用户在线下的操作场景，按照自己的想法去意测用户的行为，这样设计出的产品背离了用户的心理模型，缺乏内在逻辑，会让用户感到混乱困惑，陷入深深的麻烦。
基于产品本身功能需要，我们可能无法很主观的去降低产品的复杂度，这就需要我们在进行产品设计时花费更多的心思，通过对业务流程、页面布局、信息呈现上的调整与设计让产品变得清晰，不让用户陷入困惑。如下图的关于表单编辑器的A\B两种设计，用户在编辑器内完成一系列针对表单的编辑、配置操作，然后发布表单。方案A中将这些表单编辑配置项通过tab进行排列，这种方式结构简单，但是扩展性较差，过多的栏目也容易让用户陷入困惑，不清楚需要完成哪些配置项才能进行发布。方案B中采用了步骤导航加侧栏导航的双层导航结构，在步骤导航上给出完成表单编辑配置的主要步骤，在大的步骤下用侧栏导航承载小的编辑项，结构清晰，且能够对用户编辑表单提供一定的帮助指引。虽然两种方案信息内容上都一致，视觉观感上甚至方案B更为复杂，但是方案B在这里可能是更合适的方案，因为方案B在配置流程的指引上更为清晰，也更贴近用户心理模型，即使没有使用过在线表单的用户也能理解产品流程，因而用户能够更容易的完成表单配置并发布表单。
我们在使用产品时，都会有一个大概的心理预期，会认为某一类型的产品会较为复杂，某一类型的产品会相对简单。为什么我们会有这样的认知呢？是因为我们知道这些产品大概有哪些功能，而这些功能就决定了产品的复杂层度。产品的复杂程度由产品的业务与功能决定，而不是依照设计师的自我喜好，像如淘宝、京东这类的购物网站、拥有着很多的栏目，所以淘宝、京东的界面相对来说较为复杂；而像百度这样的搜索引擎功能相对来说比较简单，所以界面设计相对简单干净。
我们可以容许一个功能强大的产品设计得相对复杂，但是一个功能简单的产品设计得复杂难用就是一个灾难。作为设计师我们需要根据产品的实际需要来进行设计，即不过度设计，也不执着于追求简约，而是基于需求恰到好处的进行设计。
复杂的产品会有好的用户体验吗？答案是肯定的，用户体验的好坏与产品是复杂还是简单并没有直接的关系，很多时候复杂的产品也能带给我们良好的用户体验，在互联网产品中，我们可以看到很多复杂的产品，这些复杂的软件产品，一点点的改变着我们的生活与工作方式，让我们生活与工作变得便捷与高效。
首先可以看看我们的国民级电商应用淘宝，乍看淘宝的界面，可能会觉得十分复杂，甚至会给人一种眼花缭乱的感觉，但是包括我在内的许多人仍然十分喜欢逛淘宝。淘宝内除了有本身的淘宝、天猫店铺外还有专做海淘的天猫国际，做社区团购的淘鲜达，专做拍卖的阿里拍卖等数十个板块，业务繁多，功能复杂，但这几乎很难改变，因为之所以做这些业务和功能背后都有着商业上的考量。从交互设计的角度看，虽然淘宝的业务和功能繁多，却有着清晰的布局、信息对齐、内容组织，产品尽管复杂，但并不令人感到费解和困惑。购物流程也与用户在线下购物流程相仿，贴近用户的心理模型，用户容易了解产品功能、容易与之交互，整体上有着良好的用户体验。
又如我一直在使用的一款笔记软件Notion，Notion相对于印象笔记、有道云笔记而言更为复杂，需要花费一定的时间成本学习才能够从容上手使用，但是这并不妨碍Notion被众多使用者所追捧。Notion的很多功能在使用之前，甚至都不会想到会出现在一款笔记产品里面，如甘特图，多维表格等，这类功能一般出现在项目管理类软件中。而Notion块结构的布局模式，让笔记能够自由拖拽，拥有了极强的自由度，用户可以很自由的用各种各样的形式来记笔记，要是你肯再花一些心思，你甚至可以在Notion内搭建一个个人专属网站来记录的学习知识，打造个人专属知识库。将我们习以为常的线性笔记思维，转变成纵向思维，甚至是网格状思维。Notion无疑是复杂的，但是这样做是为了给用户提供的强大功能和极高的自由度，这些功能恰恰也切合了用户的需求，创造了一种全新的笔记体验，带给用户愉悦的使用感受。
简单是产品追求的最终形态吗？其实未必，很多时候产品设计的过度简单反而会给用户带来麻烦。为了追求简单的设计，不可避免的就需要隐藏一些信息或者拉长操作路径，这是一个权衡的过程，我们在做设计时也会经常面临这样的抉择，是追求视觉上的简约美观还是信息传达准确性与操作上的效率。给用户一个简约美观的视觉感受无疑很重要，人们对于美的事物往往更有耐心，也更愿意去探索。但是对于一款针对B端用户的效率软件、办公应用而言，准确的传达信息，帮助用户进行判断，频繁使用的功能设计得更高效便捷，这些点能带给用户更实际价值，也是我们在设计产品时应该优先考虑的点。
特别是在一些专业性的软件中，如果我们为了追求简约而弱化或者省略掉一些关键信息，还有可能会导致用户错误操作的出现，造成严重的后果。试想一下当你在使用软件编写一个计算字段时，软件提供给你了计算公式却没有就近给你提供计算公式的解释和用法示例，导致你因为书写上的不规范使得计算结果频繁出错。这时你可能会满怀愤怒的抱怨为什么产品会如此难用，为什么不能配置过程中给到更多的反馈与帮助信息来减少配置错误的发生。
前面我们了解了关于复杂的定义，认识了复杂与困惑之间的区别，也明确了在B端产品中复杂或许难以避免，复杂是出于实实在在的业务的需要而非某位设计师的错误喜好，既然复杂无法避免，我们就应该学会与复杂共处，管理与驯服复杂。那么如何与复杂共处呢，有一些策略或许可以给予我们一些思路。
复杂与困惑的本质区别在于复杂的背后隐藏着规则与逻辑，而困惑缺少这样的规则与逻辑，让人无法预测与揣摩，对应到软件产品的设计，一款成功的优秀的软件产品，应该是易学易用、能够满足用户预期，用户能够直观的理解产品的流程与主要功能，并通过产品实现自己的目标。那么具体到软件的设计上我们应该怎样做呢？
这里可以看看我们团队正在使用的研发管理工具TAPD，TAPD是一款敏捷研发协作工具，凝聚了腾讯研发方法及敏捷实践精髓，其中敏捷开发的方法就是TAPD的内在规则与逻辑，有过敏捷开发经验，理解敏捷开发流程的的开发人员能够快速的上手使用TAPD，对于不了解敏捷开发的开发人员也可以通过产品帮助中心学习敏捷开发思想，进而理解产品的功能与流程，因此虽然TAPD功能与页面结构相对复杂，但是基于对敏捷开发的认识用户还是能从产品复杂的功能界面中摸索出一条操作路径，实现自己的目标。这就是产品拥有内核思想以后能够带来的直观好处，将原本零散的功能点通过特定逻辑链接成操作流程，帮助用户更好地理解与使用产品。
相同的在我们公司自己的一个项目中我们也运用了同样的方法，在我们公司之前研发的一款crm产品中，为了给用户提供最佳的销售实践，帮助用户更快上手使用我们的产品，我们在设计产品时寻找了硅谷蓝图团队做了顾问咨询，并依照硅谷蓝图的销售转化路径来构建我们的产品体系，确定产品功能，梳理产品中的业务流程。并希望在以后为客户做实施的过程中能够将硅谷蓝图的销售方法一起带给用户，让用户能够更好地使用我们的产品，实现产品的最高价值，为中小企业销售团队赋能。
通过前面两个案例其实我们可以感受到，当一款复杂的产品有了内在的规则与逻辑以后，用户理解和使用我们的产品会变得更顺畅，用户不会迷失在茫茫的功能之中，通过理解规则与逻辑，用户能够对自己操作结果有一个大概的预期，而不是处于困惑状态，作为设计师的我们也可以将这种规则逻辑作为我们设计的引导，让我们的设计更为系统和有条理，让产品不再是一堆功能的堆叠，各自为战。
复杂是用户的一种心理感受，用户觉得产品复杂除了产品本身结构信息复杂之外，也是因为产品在设计上没有贴合用户的心理预期，用户很难理解产品的流程与交互，所以贴近用户心理进行设计就显得尤为重要。这里我们需要先了解三个概念，实现模型、表现模型和心理模型，三个概念的释义如下：
实现模型：产品是怎样工作的
心里模型：用户认为产品是怎样工作的
表现模型：通过设计来让用户认为产品是怎样工作的
表现模型越接近心理模型，用户就越容易了解产品功能、容易与之交互。表现模型越接近实现模型，用户越难理解产品，产品就越难使用。复杂产品在用户体验过程中的痛点在于用户需要花费时间学习或培训之后才能了解产品的运转机制，很多B端产品在设计时更多的偏向于实现模型，用户在使用产品的过程中会发现很多地方的交互和自己心理预期并不一致，使用过程中会遇到很多的阻碍，影响整体的使用体验。对于一款复杂的产品而言，我们需要让我们产品的表现模型更接近于用户的心理模型，这样用户能够更容易了解产品的功能，并与之交互。
大家使用电脑时有没有遇到过类似下图这样的电脑报错信息，里面是一堆的专业名词，看得人一头雾水。这时候我们能做的只有默默的打开百度，去了解弹窗里面讲的内容究竟是什么，了解后才明白原来这样，然后按照百度上操作步骤一通操作，侥幸解决了问题。但是当下次我们遇到相同问题时，可能还是不知道如何解决，无可避免还是需要求助百度。这个就是表现模型贴近与实现模型会带给用户的困扰，用户不是专业的开发者，他们不了解也不需要了解产品背后的实现逻辑，这对用户而言是没有价值的，给予用户这些信息不能对用户起到预想的帮助作用。贴近实现模型进行设计会让用户与产品交互变得困难，变相的是在人为的增加产品的复杂度，与复杂共处，我们需要学会贴近用户心理进行设计。
复杂的产品往往功能、页面繁多，如果页面内的视觉元素以及交互各自为战，那么放大到整个产品就是一个灾难，不仅是产品给用户感官上不统一、整体性差，过多的交互模式也会增加用户的学习与记忆成本，用户在这些相视功能但是不同的视觉与交互的模块之间容易陷入困惑，对用户使用产品造成困扰。针对这个问题，现在越来越多的公司开始通过搭建组件库的方式来规范自家产品内的视觉与交互，一个规范完整的组件库的确能够在很大程度上解决产品在视觉与交互上的一致性问题，通过模块化解决方案，也能降低冗余的生产成本，实现产品快速开发。因此很多人也认为搭建好组件库就能一次性的解决产品体验一致性问题，但实际上就算一个产品有了一个自己的组件库，依旧还会遇到体验上统一性问题，这是为什么呢？
在原子化设计理论中，粒子是构成页面的最小颗粒，粒子构成简单组件，简单组件到复杂组件，再到区块、页面。虽然用组件能去构建页面，但是还会遇到页面结构、交互不一致的问题，设计师各自使用组件去搭建并不能提升我们的效率和解决设计一致性的问题，在末端设计并没有做到约束。因此我们在构建好组件以后还需要继续抽取出了页面级的组装结构和交互模式。
这里我们拿B端产品中常见的列表页来举例，纵观所有后台列表页面，抽取后无非就分为这么几个区域。不同的业务可以通过基础组件和样式定义符合自己业务线的子模块。比如列表页中的筛选区，在不同的业务场景下，对筛选器的需求也各不相同，简单的可能只需要使用标签选择就能够完成筛选，复杂的可能添加很多的筛选项甚至选项之间还有且或关系，我们需要根据实际的业务场景设计适合的筛选器，但是需要注意的是一个产品中用到的筛选器形式不应太多，我们需要抽取归纳出三四种筛选器形式去覆盖我们产品内所有的筛选场景。来保证产品内不会出现各种相识却有各不相同的筛选器。
B端后台产品中比较常见的还有表单，我们可以归纳出产品内可能会使用到的表单类型，然后定义出具体的框架结构与交互，在具体的设计过程中在根据实际情况选用不同的表单区块。
一种常见的信息录入以及信息展示表单，这种形式是我们最长用。
分布表单适用于信息录入项以及信息展示项过多，在一个页面内已经不能合理清晰的组织传递信息，或者表单内容的录入方式或者展示方式存在较大差异，不适宜在一个页面内进行展示时。按照布局的不同也可分为横向步骤和纵向步骤两种。
组合表单因其结构能够承载更多的信息，每一个栏目都可以承载一个独立的表单页，有效的管理信息。
很多时候我们也会用弹窗来承载表单，好处是交互衔接流畅，不用跳页。
将产品中类似的区块做成最佳的交互模式范例，能够最大的程度的规范我们产品中的交互，这样才能真正的实现产品体验上的统一，化繁为简，让复杂的产品也能够调理清晰，上手简单容易。在面对复杂的系统级软件时，在统一组件样式的基础上还应该统一产品内的交互模式。
复杂的产品页面内信息往往都特别繁多，如果不做好信息归纳，用户将很难把握住重点内容，信息获取效率低下，十分影响用户的使用体验，所以信息的强弱的整理十分重要，那么什么样的信息是对用户而言重要的信息呢？
信息设计大师爱德华·塔夫特认为优秀的视觉设计应该是“将清晰的思考视觉化”，他还认为只有充分理解观看者的“认知任务”及一些设计原则才能设计出优秀的产品。
如何找到对用户真正重要的信息需要借助到产品设计中一个十分重要的工具--用户模型，通过调研的来得用户模型是对于我们产品客户的抽象归纳，通过用户模型我们可以确定哪些功能对于用户而言是高价值的重要内容该重点突出，哪些内容相对不是那么重要可以弱化处理，通过对于页面内容强弱的划分，用户能够更快的获取到对自己有用的内容，尽管页面仍旧复杂，但是信息划分合理、层级清晰、表意明确的页面人就能够带给用户良好的用户体验，帮助用户高效的处理任务。
复杂是产品的本来特性，本身不含褒贬，但是如果复杂不加以控制，让其发展为困惑与混乱，这对于一款产品而言绝对不是一件好事情，这样即使产品功能上很优秀，用户也无法长期忍受，一旦市场上出现替代产品，那么忍受已久的用户也将抛弃产品转向体验更好的新产品。
曾经我也是一个极简主义的追捧者，但是经历过越来越多的设计项目，我开始发现某些产品复杂性是必需的，将产品做得简单并不是其核心诉求。真正需要处理的问题也不是复杂，而是混淆的状态和由此产生的无条理性。解决的方法不是简单的去除几个界面元素，让其在视觉界面上变得简洁干净，而是要让产品拥有内在规则、一致且能够被理解。
文章来源：站酷 作者：Yone杨
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
著：[英] 贾尔斯·科尔伯恩
译：李松峰
人民邮电出版社
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1. 梳理知识框架，记录阅读收获、心得，本身就是一个加深理解、温故内化的过程。
2. 摘录重要知识，存储在数字媒体上，方便随时按需查阅。
3. 锻炼思维和表达。
百利无一害，来吧，走起。
本书讲述了一个产品价值观和四个策略。
一个产品价值观：作者崇尚简单体验的产品设计。简单的产品更容易制造 (成本也更低)，也更容易使用 (市场也更广)
① 这里的产品指数字产品或实体产品。
② 本书主要考虑大多数用户 (主流用户) 的体验。
四个策略：删除、组织、隐藏、转移。本书的核心内容就是讲述如何通过这四个策略（我理解就是方法论）设计大多数用户喜爱的简单体验。这几个策略适用于简化功能和内容。
1. 知识原理很多都是相通的
① 本书的删除策略与奥卡姆剃刀
奥卡姆剃刀：“如无必要，勿增实体”。讲的也是简单性原则。
他说：“切勿浪费较多东西去做，用较少的东西，同样可以做好的事情。” 讲得真好，不能赞同更多。
② 组织策略与亲密性原则
亲密性原则：彼此相关的项应当靠近，归组在一起，成为一个视觉单元。——《写给大家看的设计书》Robin Williams，非常棒 推荐
组织策略与亲密性原则讲的都是正确组织信息的方法论。
③ 简单与别让我思考
别让我思考 (可用性最重要的原则)：你的目标应该是让每一个页面或屏幕都不言而喻，这样的话，普通用户只要看它一眼就知道是什么内容，知道怎么使用它。即他们不需要思考就能明白。可用性是关于人，关于人们如何理解和使用产品的，它和技术没有关系。技术日新月异，人本身的变化却非常缓慢。——《点石成金》史蒂夫·克鲁格，很棒 推荐+1
2. 凡事过犹不及。
书中有一个案例惊叹不已，讲的是东京苹果专卖店，没有按钮的电梯 (电梯内和外都没有操控按钮)，自动在每一楼层停靠、自动开和关门 (乘客干预不了)。置用户于完全失控的环境中（要是深夜一个人乘坐，估计得吓不活了）。难以置信，谁能想到以优质体验设计征服世界的鼎鼎大名的苹果，居然还有这种反人类的逆天设计！
3. 这本书的阅读体验跟《写给大家看的设计书》极相似
① 简单、轻松、通俗易懂两者都为读者创造了简单、轻松的阅读体验。把知识融入情境、故事，以图示意，短小的一篇一篇像在和你讲故事，娓娓道来、言之有物、简明扼要、通俗易懂。
② 知识框架扁平、浓缩为极简，过目难忘《简约至上》把全书核心凝炼为：删除、组织、隐藏、转移。《写给大家看的设计书》将复杂的设计原理凝炼为：亲密性、对齐、对比、重复。合上书，就能回忆起来，太简单又太深刻，真的想忘记都难。
4. 好书亦师亦友
“虽然这世界上不能改变的东西很多，但眼前的设计还是有很多简化的途径可循。”、“你能做到”... 像不像一个智慧温暖又真诚善良的朋友在不断的给你信心和鼓舞？
(小声说，我也喜欢)
以我浅薄有限的认知来看，人们喜欢简单不仅因为简单顺应人性，还因为简单带来高效：
① 简单顺应人性简单意味着不用思考，以现有的认知水平一看就明白，在人的舒适区，启用的是人低耗能自动模式，是本能来的。而复杂的事物，如思考、学习、锻炼、做一件难的事，都是更多的消耗人的脑力、体力、意志力、自控力、耐心、时间，都是调用人的高耗能模式，所以复杂这个东西本质上是反人性的。
② 简单带来高效不管是工具任务型产品还是内容型产品，用户使用产品的逻辑路线是一样的，都是经由认知 -> 决策 -> 行动 -> 达成目标；如果简单就会：认知快 -> 决策快 -> 行动快 -> 高效达成目标；所以，简单是大多数用户的刚需了。
1. 越复杂或少用的知识，忘记就越快。
2. 简单源自专注。明确自己的目标，更容易迷途知返。
3. 解决问题前，先搞清楚状况。纠结于某个设计时，退一步想想：“用户在这里真正想干的是什么？” 聚焦用户。
4. 共识：把所有利益相关方的目标都统一到最终用户身上，通过共识构建愿景。然后，阻力和争斗就会减少。
怎么让利益相关方听自己的？答案是必须理解他们的想法。
先从倾听他们和理解什么对他们最重要开始。把汇总的意见恰当地反馈给他们，他们会知道你已经明白了。在感觉被人倾听后，他们才会乐意敞开心扉。
“我也希望看到最适合用户的设计，我们一块看几个，看看是否可行。”
不要尝试说服别人，听他们说，让他们自己判断，让他们自己承认而不是回避问题，然后再去寻找解决他们问题的方案。
5. 产品使用环境是观察用户的最佳地点，必须使软件设计符合环境需求。你的用户体验应该简单到不受这些干扰的影响，能够在人们被打断的间隙生存。
6. 为主流用户 (大多数用户) 而设计，忽略专家型用户。
7. 体现品牌特征① 实用性——这个品牌能做什么对我有帮助的事情？(如让飞行更简单)② 这个品牌给了我什么感觉？(如充满活力，好玩)③ 这个品牌崇尚什么？
8. 简单就是让用户感到自己在掌控一切。你的设计不能跟这种掌控的感觉有什么抵触，而是应该放大这种感觉。
9. 设计之所以会变复杂，通常是因为某些不重要的步骤挤占了核心特性。关注用户行为 (而不是你的设计)，并且从用户的视角把它描述出来。
10. 在研究某个问题的时候，你需要把它转换成一种认识。故事是描述认识的一种好方式。与一大堆需求描述相比，故事更容易让读者明白什么重要和为什么重要。故事应该用三言两语把核心体验表达出来。
11. 极端的可用性
① 任何人都可以使用
② 毫不费力的使用
③ 瞬间响应
④ 一目了然
⑤ 始终工作
⑥ 不出错
⑦ 恰好够用的信息
⑧ 在混乱无序的环境中工作
争取你不可能达成的目标有一个重要的好处：保持正确的方向。
12. 坚持不懈是达成简单最重要的一步。
“乍一看到某个问题，你会觉得很简单，其实你并没有理解其复杂性。当你把问题搞清楚之后，又会发现真的很复杂，于是你就拿出一套复杂的方案来。实际上，你的工作只做了一半，大多数人也都会到此为止……但是，真正伟大的人还会继续向前，直至找到问题的关键和深层次原因，然后再拿出一个优雅的、堪称完美的有效方案。” ——史蒂夫·乔布斯
13. 简化意味着改变，而改变始终意味着痛苦。多数人会不惜代价避免痛苦。收集需要改变的证据很重要。
14. 挑出正确的点子，确保能够得到很好的执行。
删除：通过删除来简化设计，删除所有不必要的，直到减无可减。
15. 删除杂乱的特性可以让设计师专注于把有限的重要问题解决好，而且也有助于用户心无旁骛地完成自己的目标。
16. 不要等着别人不分青红皂白地、无情地删除最有意思的功能。要总揽全局，保证只交付那些对用户体验而言真正有价值的功能和内容。
17. 体验的核心是最能打动用户的东西。找到它，删什么留什么就一目了然了。能够消除用户挫折感的功能同样也会受到欢迎。
18. 删除残缺的功能、导致出错的功能、不必要的功能
19. 如果一个小变化导致了复杂的流程，就应该退一步去寻找更好的解决方案。
20. 错误：即使非常小的错误也会让用户烦恼。消除错误是简化用户体验的重要途径。无论显示什么错误信息，好像都没有那么友好、亲切和简单。
21. 不要以功能的多寡来认定产品的价值，而应该看产品能否满足用户最高优先级的目标。
22. 删除视觉干扰因素，让用户注意力保持集中。界面中的各种小细节会增加用户的负担、打断用户的思维，会像公路上的减速带或坑坑洼洼一样降低用户的效率。
23. 太多选择容易让人反感。
24. 清除减速带：选择聪明的默认值可以减少用户的选择。
25. 删除视觉混乱和噪音，意味着人们必须处理的信息变少了，能够把注意力集中到真正重要的内容上。
26. 删减文字、精简句子：重要的内容“水落石出”，消除了分析满屏内容的麻烦，用户更有掌控感，把文字变得简洁、清晰、有说服力。
27. 简化对话，长话短说。一次交互就是用户与设备之间的一次对话。
28. 砍掉时间。砍掉功能和内容可以节省时间，因为决定少了、按钮少了、思考少了、阅读少了。要在对用户真正重要的事情上节省他们的脑力。
组织：通过组织来简化设计
29. 通过组织的方式简化设计，要点在于只强调一两个最重要的主题。
信息布局、分类、排序、搜索、使用颜色分层 (地铁线路图)，找到组织信息的正确方式，可以极大的简化用户体验。要想知道设计是否成功，可以眯起眼睛来观察屏幕，看是否能区分出不同的层。
隐藏：隐藏不重要的，避免分散用户注意力
30. 无论隐藏什么功能，都意味着你在用户和功能之间设置了一道障碍。这个障碍可能是遥控器上的塑料仓门，也可能是网站上一连串的点击。为了避免给用户造成不必要的麻烦，必须仔细权衡要隐藏哪些功能。
31. 不常用但不能少，如个性化设置不会经常改变，因此非常适合隐藏。
32. 隐藏所有需要隐藏的功能，在你需要时出现在合适的位置上。
33. 细微的线索足以提示隐藏的功能。
转移
34. 转移合适的功能到其他设备上、系统组件中，向用户转移。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
“先有思想，后有设计”设计师自身应该逐步建立一套自己的设计体系，需要对设计方法论有专业的认识和理解。一直想收集整理日常说到的各类设计理论知识，也希望通过整理和总结能有新的收获，加深记忆。
格式塔心理学是视觉排版及设计中应用比较广泛，主要指人的眼脑作用是一个不断组织、简化、统一的过程，正是通过这一过程，才产生出易于理解、协调的整体。格式塔的理论核心是整体决定部分的性质，部分依从于整体，人脑知觉到的东西要大于眼睛见到的东西。
古登堡法则是又称对角线平衡法则，由14世纪西方活字印刷术的发明人约翰·古腾堡提出。古登堡图表将要画面显示的东西分成了四个象限：
1.第一视觉区(Primary Optical Area)：左上方，读者首先注意到的地方。
2.最终视觉区(Final Optical Area)：右下方，视觉流程的终点。
3.强闲置区(Strong Follow Area)：右上方，较少被注意到。
4.弱闲置区(Weak Follow Area)：左下方，最少被注意到。
通过古登堡法则我们知道用户的视觉中心往往在页面的左上方，而结束浏览时视线往往落在右下角，所以合理利用这个法则可以帮助用户更好地获取内容并采取行动。自上而下的界面设计，自左向右的界面设计，页面中通常将操作按钮放在右下角。
菲兹定律：从一个起始位置移动到一个最终目标所需的时间由两个参数来决定，到目标的距离和目标的大小（图中的 D与 W），用数学公式表达为时间 T = a + b log2(D/W+1)。意味着小而近的目标用户不需要花费太大的精力就能轻易触及或者关注，相反小而远的目标则需要花费用户更多的时间和注意力，菲兹定律阐述的是效率相关的问题
思考结论：1.必要时让按钮更大，2.让相关信息更近
希克定律：一个人面临的选择(n)越多，所需要作出决定(t)就越长。用数学公式表达为反应时间T=a+b log2（n）。在人机交互界面中选项越多，意味着用户作出决定的时间越长。如比起2个菜单，每个菜单有5项，用户会更快从有10项的1个菜单中做出选择。席克定律在产品应用中主要用于通过合理的选项及功能规划提高用户的决策及完成任务效率
应用场景：
1.分类编组，提高决策效率
2.过滤选项，隐藏/删除低频率功能选项
3.分布执行，提高流程转化率
米勒定律：头脑最好的状态能记忆含有7（±2）项信息块，在记忆了 5-9 项信息后人类的头脑就开始出错。米勒定律在产品应用中主要在于合理的信息布局和信息处理可以提高用户对信息的获取效率和记忆难度。
应用场景：
1.控制数量，减少用户选择
2.信息分段，辅助用户记忆
3.流程分步，优化用户操作
4.信息排序，引导用户记忆
临近性原则：当对象离得太近的时候，意识会认为它们是相关的。在交互设计中表现为一个提交按钮会紧挨着一个文本框，用户会理解为按钮于文本框有关联性。换句话说当相互靠近的功能块是不相关的话，就说明交互设计可能是有问题的。
泰斯勒定律（复杂守恒定律):该定律认为每一个过程都有其固有的复杂性，存在一个临界点，超过了这个点过程就不能再简化了，你只能将固有的复杂性从一个地方移动到另外一个地方。
应用场景：
1.合理缩短用户使用路径，在设计中可有适度的简化缩短操作流程但是到一定的程度可能会影响整体的功能和价值。
2.将固有的复杂性从一个地方转移到另一个地方，例如搜索中历史记录，信息商品的收藏等功能，实际都利用了此定律。
3.将功能进行拆分，一次性无法降低复杂度的功能可以进行拆分。
奥卡姆剃刀原理：奥卡姆剃刀原理只承认确实存在的东西，认为那些空洞的普遍性的东西都是没有用的，应该剔除掉，概括起来就是“如非必要，勿增实体”实际上无论实体、视觉或认知上，多余的负担都会削弱表现效能，去除解决方案的杂质，让最后的设计会更严谨、更纯粹。在设计苹果产品的时候，乔布斯一直坚持认为：为了实现一个功能而造出一堆复杂的东西，没用，简单的才最好。Google专注于搜索，主页上也只有搜索，其他搜索引擎就没有做的这么彻底，这也是为什么Google用户量最多的原因之一。
防错原则：最早应用于汽车制造领域中，工程师新乡重夫（丰田精益生产庄家）于上世纪60年代，创造了这个理念。防错原则认为大部分的意外都是由设计的疏忽，而不是人为操作疏忽，例如硬件设计上的 USB 插槽，酱油瓶口。防错原则有四项基本原则包括，轻松原则，简单原则，安全原则和自动原则。
状态可见原则：保持界面的状态可见，变化可见，内容可见。让用户知道发生了什么，在适当的时间内做出适当的反馈。 比如用户在网页上的任何操作，不论是单击、滚动还是按下键盘，页面应即时给出反馈。
贴近场景原则：用用户的语言，用词，短语和用户熟悉的概念，而不是系统术语。遵循现实世界的惯例来呈现信息，功能操作符合用户的使用场景。进一步来说贴近场景，也是要求在设计的时候要考虑，产品面对的人群和人群所在的环境，比如，同一款产品在不同地区呈现形式需要考虑文化差异。不同属性的产品例如儿童教育和办公产品，需考虑使用人群的特性。
可控原则：操作应该是可逆的，可以支持“撤销”和“重试”，以此来离开“非预期” 的状态，简单来说就是不要让用户走进死胡同，提供出口和退路。例如微信发送消息可以撤回可重新编辑等。很多web端的表单，文章发布等都支持自动保存，很大程度上避免错误或者意外操作。
一致性原则：遵循平台的惯例。也就是，同一用语、功能、操作保持一致。
防错原则：核心观点是如何有效的在用户出错之前就尽量避免错误发生，在互联网产品中，比起回退修改错误信息或者操作更好的是，用设计防止这类问题发生。很多转账功能中输入数字后会显示千万等说明文字，用户输入卡号后会自动识别关联银行，避免用户出错。
1.限制操作范围和条件。例如很多手机登录等交互中默认设置手机号为11位避免了用户出错，提高了易用性。
2.对有风险的操作进行二次确认。
易取原则：尽量减少用户对操作目标的记忆负荷，动作和选项都应该是可见的。用户不必记住一个页面到另一个页面的信息。系统的使用说明应该是可见的或者是容易获取的。 很多产品搜索功能的关键词联想搜索，即使用户不能完全记住关键词也能轻松搜索。
1.让用户选择而不是输入，选择和输入的操作成本相差巨大，产品应给给用户提供选项，让用户可以直接选择，而不是自己输入，比如填写收货地址。
2.自动读取、记录信息、减少操作路径。在用户使用产品的过程中，会产生一些需要记忆的内容、或者操作路径，这个时候我们要避免用户记忆，把信息直接提取出来，送到用户手里
高效灵活原则：为大多数用户设计，兼容少部分特殊用户。允许用户进行频繁的操作，更加便捷灵活的代码和反馈。各大产品中常使用的搜索功能，提供历史搜索功能。微信朋友圈发布中选择可见/不可见人群时，提供上次选人记录。
1.提供快捷入口，例如支付宝的首页可以自主配置常用的小程序，微信下拉对话页面可以快捷进入历史小程序
2.方便用户重复操作，例如外卖平台中自动定位常用地址，订单中可以再来重复的一单等
3.预知用户操作缩短操作路径，例如截图后打开微信对话框会关联截图发送
简约原则：审美和简约设计，页面不应该包含无关紧要的信息，页面的每个额外信息都会降低主要内容的相对可见性。
容错原则：错误信息应该用语言表达（不要用代码），较准确地反应问题所在，并且提出一个建设性的解决方案。比如404。
人性化帮助原则：有必要提供帮助和文档。任何信息应容易去搜索，专注于用户的任务，列出具体的步骤来进行。帮助性提示最好的方式是：1、一次性提示；2、常驻提示；3；帮助文档。
通过这些方法的总结归纳，我发现其实很多原则原理我们在平时的设计中有意无意的总会用到，在实际工作中设计很大程度上是做选择，哪一种是对产品对用户最优的方案，有的设计师可以通过自己的经验作出选择，没有经验的可能需要多多理解这些原则原理，交互设计之父阿兰·库珀说过“除非有更好的选择，否则就遵从标准”只有反复的遵循使用标准才能建立自己的一套设计方法论，让工作更加得心应手。
分享此文一切功德，皆悉回向给文章原作者及众读者.
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
来源：站酷
作者：有鱼MUMU
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
“少即是多”是经常挂在嘴边的话题，在设计过程中，设计师们都会想尽一切办法去简化交互流程、组件元素及各种设计属性，让用户使用起来更简单。当产品简化到一定程度，就必须要面对其不可简化的复杂性。
诺曼曾说过 “复杂是世界的一部分，但它不应该令人困惑 ”，如果复杂性是合理的，我们应该学会如何去管理复杂，考虑好复杂的问题在流向用户后以何种方式处理，筛选控件就是用户自行处理复杂信息的方式之一，只要是符合用户行为做出的设计，将应有的复杂以筛选的形式呈现给用户，让其自行决定，用户反而会乐意接受。
筛选控件的使用频率非常高，本文根据笔者对各类筛选控件的拆解及自身经验进行分总结，整理了在移动端中常用筛选控件的类型、使用场景以及设计思路，帮助大家在设计中更好的选择适合自己产品的筛选控件。
一、现实生活中的筛选
二、筛选功能的重要性
三、常见的筛选类样式
四、筛选的几个维度
五、筛选功能设计准则
六、总结
在日常生活中，我们天天都在跟筛选打交道。设想一下，当你走进超市，在没有任何分类指示的情况下，看到琳琅满目的商品是否会不知所措，答案是肯定的，且不论超市规模大小、商品的多少，相信没有任何一个人愿意在不清楚的情况下花时间去找一个很可能不存在的商品，即便这点时间会很短。
道理还没说完，大家都感觉自己很懂，可依然逃脱不了如今在各种形形色色的应用中找不到自己需要的功能而苦恼，那么这些应用又是谁设计的呢？答案就是「大多数人」。
换言之，如果我们能通过标识牌、平面图指引（模糊查找），询问服务员、记忆指引（精准查找），就容易很多，这些指引路径就完全充当了筛选功能，至于通过什么方式，只能根据人们自身或现场条件自行选择，能满足自己的需求即可。在功能繁多、交互流程复杂的互联网产品中也是如此。
在我们设计筛选控件之前，需要清楚了解什么是筛选，东施效颦不是什么明智之举。筛选，即用户根据自身需求、通过一个或多个特定条件，在已有的内容中快速找到满足自己当前条件的信息，单独呈现的同时、并将未满足条件的信息暂时作隐藏处理，以便用户完成自己的目标需求。
筛选也可以称之为过滤器，是搜索框架的一部分。这里需要说明一点，筛选不同于搜索，它是系统结合用户提出的条件，对内容进行规则性的查找，准确的说，用户属于被动，筛选出的结果在产品侧「精准」、用户侧「模糊」；而搜索则是用户通过明确的目标主动进行精准查找，要么直接找到自己想要的结果、要么对结果不满意，搜索出的结果在产品侧「模糊」、用户侧需要「精准」。说直接点就是，搜索直接查找出结果、筛选只是缩小查找范围（并非绝对，也可以对搜索结果缩小范围）。
在电商应用中，如果有目标的用户更多使用的是搜索，那么没有目标的用户更多使用的则是系统推荐或商品分类，不管是哪种类型的用户，前面虽然已经进行过一次范围缩减，但下一步还是逃不掉要面对的海量商品，这时，不给用户提供选择上的便利，用户很可能因浏览商品耗时过长、选择性困难等原因扭头就走，即便离转化仅一步之遥，也无法避免用户流失的问题。
增加筛选功能就能很好解决这个困局，用户通过筛选、设置接近于目标需求的条件，缩短查找路径，就能从海量的商品信息中快速找到符合条件的内容，大大降低了用户的查找成本，节省了很多查找时间，用户体验得到很大程度的提升，由此可见，为什么要使用筛选，不言而喻。
1）系统定义筛选需求
方向性的筛选：用户通过系统提供的多种类型进行频道切换，还会存在多少子级，可定义为一级筛选。例如订单列表（待支付/待发货/待收货/待评价），优惠券（未使用/已使用/已过期）等，用户从已有的类型列表中选择自己所需。
2）用户自定义筛选需求
精细化筛选：当系统已提供方向性的筛选，用户依然可从分类筛选出的结果中进一步细化。例如针对单个类型的商品列表自定义价格区间、发货地、品牌...等，也可称之为二级次筛选，相比一级筛选，其筛选的结果会更精细化，也更接近于用户的真实需求。
（PS：系统定义筛选条件后，配合用户自定义二次筛选条件以及排序功能，则更容易满足用户需求）
Tab式筛选条件大部分在操作前、操作中、操作后基本都会一直显示，有横向Tab和纵向Tab两种，如新闻、视频类型的应用大多使用横向Tab，通过将不同的内容以大的方向、区块进行分类，便于用户随时切换、筛选出不同的内容；纵向Tab更多则是在电商类应用中出现，且会存在多个子级，例如我们在京东购买「鼠标」，则需要在tab分类中依次找到「电脑办公>外设产品>鼠标」进行筛选。
Tab类型主要以大的维度进行筛选，所筛选出的结果可能模糊且信息量极大，如果想要结果更加精准，则需配备其他类型的控件进行二次筛选。
操作中以蒙层的方式弹出，其他时候均为隐藏状态。弹窗类型的筛选最大的优点是占用空间小，仅需一个入口，能在有限的弹出空间中从多个维度展示筛选条件，用户选中或自定义对应的筛选项，即可快速筛选出自己想要的信息。
介于Tab式与弹窗式之间，筛选条件初始为隐藏状态并提供一个入口。点击后展开，期间不影响当前页面的任何其他操作且一直处于展示状态，需经过再次点击才会将筛选条件隐藏。
基于自定义筛选条件过多，为满足用户个性化需求，点击后会跳转到新页面操作多个条件进行筛选。相比前面提到的Tab、弹窗更为复杂，对筛选的要求较高。
高级筛选适合用在颗粒度很细的场景，为的是避开其他视觉元素的干扰，让用户更专注于当前页面较为复杂的筛选条件，降低因受其他因素影响而出错的情况。例如：在选择汽车时，需要对服务、价格、级别、排量...等各种情况作出非常细致的选择，这时用高级筛选就再合适不过。
筛选、排序组合方式算是商品列表中的标配了，尤其在空间资源有限的移动端设备中，能最大化的将多个控制条件一次性展示给用户，在筛选出结果后再使用排序功能，便于更快找到想要的商品。例如美团、饿了么将筛选与排序控件形成组合，极大的提高了用户筛选的效率。
单维度的筛选不管是设计还是操作都相对简单，无需操作确定/下一步按钮，触发筛选条件后会就会更新信息列表，大家最熟悉的订单系统（待支付、待发货、待收货...）即是单维度筛选。
另外，单维度具备短、明、快的特点，为方便用户识别，单个标签一般不超过5个文字，且语义明确，用户不用任何思考就能快速理解。
当产品中的属性过多，使用单维度筛选不仅会降低筛选结果的精准度，还可能会导致用户因反复/重复无用的操作而产生挫败感，已无法满足用户的需求。这时，需采用多维度筛选帮助用户缩小查找范围，让其快速找到符合自己需求的内容。
多维度筛选条件一般以按钮（单选/多选）、输入框为主，有些还会以滑块来控制数据范围。设定好筛选条件需通过重置、确认操作按钮，用来清空筛选条件或进入下一步。在移动端，因屏幕空间有限，一级筛选数量最好不要超过9个，如果太多，建议进行整合或并入二级筛选。
在多级筛选控件中，可以把当前筛选条件的上一级看成是筛选分类菜单，每个等级中可包含一个或多个单维度/多维度的筛选条件，移动端最多不超过3个等级。
从表面看，多级筛选与多维度筛选其本质是一样的，但多级筛选会存在下一级或再下一级，而多维度会将所有筛选条件平铺在空间中。当单维度、多维度筛选还是无法满足用户需求，多等级就能作为最好的延伸。
在设计筛选之前，需要思考用户为什么要使用筛选、在什么样的场景下使用筛选、以及如何满足用户的心理预期等，有了清晰的用户需求，设计出来的筛选才能更好的帮助用户满足其需求。
以「饿了么」用户点餐为例，使用点餐服务的用户类型虽然很多，不过主力还是来自于办公室白领、宅男/女这两大用户群体，有目标的用户会从搜索、收藏、订单记录等入口直接去购买，但绝大多数用户因长期点外卖的原因，“吃什么”就成了最大的问题，这时如果用户还要“吃”，就必须得使用筛选功能，从Tab分类（模糊）到弹窗式筛选（精准）再配合排序功能满足自己的点餐需求，得出结论：
1）一群不知道“吃什么”的白领、宅男/女用户；
2）需要使用筛选功能解决自己“吃什么”的问题；
3）问题很快得到解决后，对结果及使用体验非常满意。
上面的案例可以看出，用户想要在海量的信息中找到自身所需，从表面上看，最直接、真实的需求就是找到满意的商品去下单。站在产品的角度并非如此，最应该解决的应该是效率的问题，这才是筛选的终极目标，不管用户花多长时间，笔者相信都能找到想要的，但所花费的时间成本越少，满意度就会越高，其产品的可信度、使用粘性、用户体验也随之提升。
筛选并非千篇一律，不要一上场就来一波大众化的筛选条件，很多APP首页设计就是最好的例子，什么都不考虑，直接导航栏+轮播图+金刚区+内容推荐...传统的一套流程走下来，结果可想而知。
设计筛选功能时，不同类型的产品需要根据其产品定位、用户目标以及使用场景来定义筛选条件，用户需求是用来设定筛选条件范围的决定因素。例如：购物类产品需要结合商品的销量、评价、价格及知名度等，而新闻类产品侧重于用户偏好、点赞量、热度值来提供筛选，方便用户快速找到感兴趣的内容。
在满足上述两个条件后也不能将筛选项一股脑的挨个排出来，即便是在同一个页面内，也需要结合当前内容的属性对筛选条件进行优先级排序，将用户高频使用的条件按先后顺序依次排列，不重要的也可将其隐藏于某个入口。
以淘宝为例，在「手机」商品列表，筛选条件中首先看到的是品牌，其次是内存、容量...，我相信很少人不在乎手机品牌吧；而在「钢钉」列表中，依次是价格排序、销量...，品牌条件隐藏在了高级筛选中，试问，如果是你购买钉子这种实用性的商品，是在乎价格、还是品牌呢？
筛选功能旨在满足用户查找需求，通过缩短用户选择商品的范围，节约查找时间，快速将符合条件的信息呈现出来，并让用户在这一过程中产生愉悦的使用体验，以发挥产品的最大价值，从而增强用户的使用粘性。
至于在设计中该使用何种筛选控件则取决于用户需求和使用场景，设定符合需求的筛选维度及条件，且根据内容属性做灵活变动即可，切记筛选的核心需求是通过简单易用的方式来帮助用户提高操作效率。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
整个报告分两个部分，
一部分是调研概述，主要描述调研是如何进行的，包含：用户方法阐述，调研对象说明，用户画像等，简单清晰的告诉别人你数据是如何获取的，增加后期问题及数据阐述的科学性。（还有一部分，就是关于调研涉及人员，可以在合适的时机带一下是UED全员协作完成的整个过程的。）
另一部分是调研结论，我的描述思路是：总-分-总，先描述总结论，让观看报告的人对整体结论有个初步了解，然后详细描述各模块分结论，最后提出各模块共性问题。
结论部分是整个报告的重点，所以前面的概述就简单介绍清楚就好了，不需要占太多篇幅。
调研流程，确定标准，是汇报，也是邀功，调研本身就是个繁琐的过程，我们把过程直观的呈现出来，让老板知道我们整个调研过程，前前后后做了哪些准备。付出了哪些努力，体现工作量的同时，也能体现我们的专业性，但是不是记流水账，得有总结。
我把整个路程大体分了3个部分，第一个部分是调研前的准备，第二个部分是调研，第三个部分结果阐述。结果汇报，后期工作计划，汇报很重要，调研做得再好，你的结果无法呈现，问题就没办法结论，那就只会停留在发现结论。
评估纬度是为了阐述我们从哪些纬度去收集答案的，想要验证什么问题。
由于大部分人对调研都只是停留在问卷调查的层面，所以对样本量的选择有不理解，可用性测试主要是为了观察用户操作路径及反馈，所以样本量不需要太大，这个可以简单的解释下是如何挑选用户的。
数据整理也是汇报的一部分，一方面，材料佐证我们做过的努力和准备，另一方面，数据存档。
我们整个调研采用了录音与录音相结合，录音是为了便于后期多人协作帮忙整理问题，录屏是记录用户操作路径，收集用户使用过程中的卡顿，去挖掘卡顿原因，这是是我们做可用性测试的主要目的，这也是跟问卷调研最主要的差异。
在写报告的过程中，我一直在想关于整体满意度的结论，是放在第一部分还是第二部分，但是鉴于第二部分主要描述问题，所以思虑再三，还是把他放到了第一部分。
我们拿到各模块的数据后，要怎么用着很关键，单个零散的数据是体现不出问题的，只有对比着看才能看出问题。
通过数据对比我们明显能发现，付费用户对产品的整体要求要比增值服务的要求高得多，毕竟不要钱的，好不好用无所谓，好用我就用，不要用我就不用。但是如果是用户花钱了的，那他就需要考虑，我获取到的服务和花的钱是否成正比，这也就间接确定了我们后面问题处理的优先级。
这里建议做个中场页。
前面说过，问题描述采用的总-分-总的节奏，所以最开始描述了一下我们收集到的所有问题的概述，包含，总共多少个问题，已经分类类型的分类占比。
这里分享一个问题整理的表格，表格跟PPT的作用不一样，PPT是为了汇报成果，获取支持，表格是为了后续跟进落地，解决问题。
当然，先把问题整理出来也是为了更好的输出PPT。
共享文档可以让更多人清晰的看到问题，因为汇报的效果比较好，老板给了明确支持，所以汇报后我们将表格发给了各个产品，与设计师配合，认领问题，给出优先级和排期计划，整个过程推进的很顺利。
分结论部分，主要通过用户体验地图去描述用户路径，直观阐述用户使用过程中的情绪和痛点，右边整理出来了需要重点关注的一些点。
用户体验地图主要描述的是用户发现，不一定是问题，属于启发类，可以为后期优化方案的输出提供方向引导。
问题整理则是明确的已知问题描述。
各模块可以根据实际情况去描述各自的问题，这里就挑了几个典型的模块举例了一下，就不一一阐述了。
再来说一下，分结论讲完之后，整理的共性问题。先说问题，再说涉及的模块，体现问题的严重性。
到此，整个PPT就结束了，汇报完成后，老板就开始给各业务线下达任务了，就又回到了表格上，我们把之前的问题以界面纬度进行整理，跟产品确认优先级和排期计划，并与老板就排期计划进行了确认，然后责任到人，目前第一轮优化方案已经在陆续落地中，整个发现问题到推进落地的过程，还是比较顺利的，
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
最近几年以来，大家能看到B端设计趋势已经越来越火热，在B端设计中关于图表的设计算是为数不多的视觉发挥点了。那么怎样才能做好图表设计，让设计出来的图表高大上，符合业务需求，让业务方和总监对你赞不绝口，本文就必须看完和收藏了，因为实在是太实用！
应用设计越来越依赖数据驱动，对高质量的数据可视化需求也越来越高。然而我们身边却充斥着令人困惑和误导的数据图表，但我们其实可以通过遵循一些简单的规则来改变这个情况。
选择错误的图表类型，或默认为最常见的数据可视化类型，可能会让用户感到困惑或导致对数据的误解。根据用户希望看到的内容，可以用多种方式表示相同的数据集。尽量做到每一次做数据可视化时都能从数据集类型分析和用户访谈开始。
当使用水平条时，在基线的左侧绘制负值，在右侧绘制正值。不要在基线的同一侧绘制负值和正值。
删数据起点会导致曲解。在下面的例子中，看左边的图表可以很快的得出结论，值B比D大3倍多，而实际上，两者的差异要小得多。从0开始可以确保用户获得更准确的数据表示。
对于折线图，总是限制y轴比例从0开始可能会使图表几乎平坦。由于折线图的主要目标是表示趋势，因此根据给定时期的数据集调整比例并保持直线占据y轴范围的三分之二是很重要的。
折线图是由线连接的“标记”组成，通常用于可视化时间间隔内的数据趋势。这有助于说明数值是如何随时间变化的，并且对于较短的时间间隔非常有效，但当数据更新不频繁时，这可能会导致混淆。
例如: 使用折线图来代表年度收入，如果数据是每月更新的，则每个月在图表中会生成一个个孤立的标记点。用户可能会假设连接“标记”的线代表实际值，而在特定时间实际的收入数字是未知的，所以可能会产生误会。在这种情况下，使用垂直条形图可能是一个更好的选择。
平滑的折线图可能在视觉上很好看，但它们错误地反映了背后的实际数据，而且过粗的线会模糊真正的“标记”位置。
通常，为了节省可视化空间，当有两个具有相同度量但大小不同的数据系列时，可能倾向于使用双轴图。但这些图表不仅难以阅读，而且它们还以完全误导的方式代表了两个数据系列之间的比较。大多数用户不会密切关注比例，只是浏览图表，然后就得出了错误的结论。
饼状图是最流行的也是经常被误用的图表之一。在大多数情况下，条形图是更好的选择。但如果你决定做一个饼状图，有2个比较好的建议:
1）不要超过5-7片，保持简单
2）可以将额外的最小段分组到“其他”切片
如果没有适当的标签，无论你的图表有多好，它都不会有意义。直接在图表上标注对所有用户都非常有帮助。查阅图例需要时间和精力来理清数据和对应的部分。
将数据放在切片上可能会导致多个问题，在可读性问题上和窄切片上都会有挑战。相反，添加黑色标签能清晰的链接到每个部分。
在确定饼片秩序时，有几种常用的方法:
1）将最大的切片放在12点的位置，然后将下一片切片顺时针降序排列
2）把最大的切片放在12点的位置，第二大的放在顺时针相邻位置，第三大的放在11点的位置，其余的切片按顺时针降序排列
同样的建议也适用于其他许多图表。不要默认采用字母排序，将最大的数值放在顶部(对于水平条形图)或左侧(对于垂直条形图)，以确保最重要的数值占据最突出的空间，减少眼球运动和阅读图表所需的时间。
饼图通常不是最容易阅读的图，因为比较相似的值非常困难。当我们把中间部分去掉，创建一个圆圈图表时，我们腾出了空间来显示额外的信息，但这样牺牲了清晰度，极端情况下，图表就会变得毫无用处。
不必要的造型不仅会分散注意力，还可能导致对数据的误解和用户的错误印象。你应该避免:
1）3D元素，明暗面
2）阴影、渐变和其他扭曲的多彩色
3）斑马图案，过多的网格线
4）过度装饰，斜体，粗体或衬线字体
颜色是有效的数据可视化的组成部分，在设计时考虑以下3种颜色类型:一个定性调色板最适合显示分类变量。为确保易用性，所分配的颜色应该是不同的。连续调色板最适合需要按特定顺序放置的数字变量。使用色相或亮度或两者的组合，可以创建一个连续的颜色集。
发散调色板是两个连续调色板的组合，中间有一个中心值(通常为0)。通常不同的调色板将传达积极和消极的价值。确保颜色也与“消极”和“积极”表现的概念相匹配。
看看一个方便的工具- [ColorBrewer]https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3，它可以帮助你生成各种调色板。
根据美国国家眼科研究所(National Eye Institute)的数据，大约每12人中就有1人是色盲。你的图表只有在广泛的受众可以访问时才会成功。
1）在调色板中使用不同的饱和度和亮度
2）把现有配色去色然后检查对比度和可读性。
确保排版能够准确传达信息，帮助用户专注于数据，而不是分散用户的注意力。
1）选择易读的字体，避免衬线和装饰过度的字体
2）避免使用斜体、粗体和全部大写
3）确保与背景有高对比度
4）不要旋转文字
这个简单的技巧将确保用户能够更有效地阅读图表，而不会扭伤他们的脖子。
如果你的任务是在web和移动项目中添加交互式图表，你应该问的第一个问题是我们将使用什么图表库?现代图表库包含了许多前面提到的交互和规则。基于已定义库的设计将确保易于实现，并能提供大量交互想法。
帮助用户通过改变参数，可视化数据进行探索。然后得出结论，最大化价值和洞察力。在下面的示例中，你可以看到IOS Health应用使用了各种数据表示的组合。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
当设计师被迫待在家里时，终于能有时间去反思现有的设计并重新创造。无聊是艺术家最大的敌人，他们会尽可能地打破困局。
对我们来说，2021年相当困难。世界上最长寿的猫庆祝了它的34岁生日，这可能是发生的唯一一件好事，顺便说一下，你会在文末看到这只可爱的小猫照片。
那么，2022年的UI/UX设计趋势是什么呢？看看现在的情况，我们已经可以预测未来的设计趋势，就像我们对2021年所做的预测一样（回头看非常准确）。
在本文中，我们将发现：
3D视觉设计师的内卷将会越来越严重
数据可视化的工作将变得越来越重要
服务的移动化还需要做出更多努力
scrollytelling 技术会越来越流行
旧的滚动是无聊的。如果你想吸引注意力，你就需要实现滚动叙事（scrollytelling）。（彩云注：这个技术的核心在于边滚动页面边讲故事）
《纽约时报》是第一批在他们的文章《雪花飘落》中使用滚动叙事手法的机构之一。
它是一种叙事形式，可以在网页和APP上呈现。想象一下，在一个网站中每个插图、文本和其他元素都开始变得生动起来。自然地，你会想看到这个故事的结局。它就像一个游戏，带你穿越迷宫。虽然你不能影响它的进程，但却让你感觉自己能参与其中。
2022年，Scrollytelling将会出现在你看到的每一个流行网站上。
另一方面，scrolllytelling让用户真正去阅读内容。你可以用动态文本让他们产生兴趣，比如谷歌的网站 (https://www.google.com/search/howsearchworks/)。他们的团队知道如何让信息看起来更好:
Scrollytelling在用户向下滚动时被激活，因此得名。没有点击，没有选择的麻烦，没有弹出窗口。你似乎停留在一个地方，但通过滚动，把屏幕上的故事慢慢展开。这不仅要求设计师创造出酷炫的视觉效果，还需要认真思考一个你想要讲述的故事情节。
所以，最好的网站不可能在2天内建成，需要更多的时间去打磨。
IAmBinadam令人惊艳的叙述设计
滚动叙事的项目通常需要大量的时间和精力。不过，这样做的结果是值得的。页面变成“活的”，每一秒都有新的事情发生，所以在阅读时很难感到无聊。
那么移动端APP呢? Pure是一款约会应用（彩云注，这个应用在app store可以搜到，推荐大家安装一个体验一下，非广告），它创造了一种我称之为“tappytelling”的故事(当你第一次点击并打开应用时，它就会被激活):
Scrollytelling是为用户而创建的，用户很喜欢它，不需要到其他页面去阅读整个故事。相反，网页设计的整个故事都是事先考虑好的，并尽可能以最有趣的方式设计出来。
如何在2022年做出一个还不错的企业网站？你不会想告诉用户你是“XX领域公认的领导者，该领域最好的之一”。这种标准的广告表达并不传达任何有价值的信息。
最好不要用形容词，而是用事实来说明:你有多少分支机构，在哪些城市，谁是你的客户，以及你是如何帮助他们的。抽象信息是不可靠的。但如果你有很多想要分享的数据，你需要让它不仅简单，而且有趣。
数据可视化有助于以一种吸引人的方式传达正确的信息。它也可以与滚动叙事（Scrollytelling）紧密结合。以下是IAmBinadam展示数据的方式:
通过去除数据集的复杂性，使信息更容易让读者感知。
不同级别的数据具有不同的大小，这样用户知道应该先从哪里查看
读者可以很快注意到作者试图通过图片引出的结论。考虑到如今人们消费的数据量巨大，那些干净整洁的数字带来的正面影响更大。
有些图表乍一看甚至不像图表，这使得它们更加能被注意到
还有一种现象叫做“新冠后遗症”。这是Covid对公司及其员工的长期影响。根据英国国家统计局的数据，2018年，压力和焦虑的平均得分约为2.7/10。自新冠疫情发生以来，得分已升至4.0/10，很少低于这一水平。同样因为大流行，在过去两年里工作量增加了4个小时。
人们压力太大，卷的太辛苦，以至于不愿去看复杂的数据。
设计师做好数据可视化，以保持人们的注意力。记住，复杂的信息通常被忽略，因为读者试图节省他们的时间，更有可能使用滚动按钮。
Illustration by Mona Chalabi
以下是我们推荐的一些表示数据的方式
1）图表和曲线图
2）插图
3）静态信息图
4）互动信息图
Illustration by Ink Factory
一个好的图表，或者任何其他形式的数据可视化，都应该具有在Edward Tufte的“定量信息的可视化显示”中描述的特征。在他的书中，Tufte通过图表解释了好图表的3个原则：
1）展示数据的图形元素与数值总数的比值应趋向于1。简单地说，应该删除一切不必要的元素，保持整洁。
2）充分利用好画面空间。也就是说，需要将数据编排的更紧密
Graph by Hootsuite
3）客观地描述数据。不要使用夸张的图表，可视化数据可以看起来很酷，但真实永远是更重要的。
根据We Are Social的数据，2021年有52.2亿人使用手机，约占世界人口的66%。自2020年1月以来，手机用户数量增长了1.8%(9300万)，而手机联网总数量增长了7200万(0.9%)，到2021年初达到80.2亿。
过去一年，社交媒体用户的数量增长了13%以上。到2021年初，社交网络上已有近5亿新用户注册。根据App Annie的数据，Android用户每天花在手机上的时间超过4小时。2020年，安卓用户上网时长超过3.5万亿小时。
令人印象深刻的数字，是吗？似乎到2022年，为产品做一个APP将成为必须拥有的东西。如何知道你的公司是否真的需要一款应用？有以下几点可供评估：
1）用户主要通过移动设备访问你的网站这是你应该了解的重要数据。
客户和你在一起的时间越长，你就有越多的机会去吸引他们，了解他们的习惯，并给他们想要的东西。（彩云注：这就是为什么各大厂之间都在拼命抢占用户的在线时长。）
2）帮助内部业务流程更加有效。
如果你想要提高员工的工作效率、改进工作流程或增加利润，那么就制作一个可以帮助管理业务流程的移动应用。
如今，像这样的手机应用使企业能够执行越来越复杂和多样化的任务，加快日常重复操作和文档管理。
3）实现一些网站上没有的新功能。
如果你认为APP能为用户打开新的触点，并让用户体验更加友好，那么它就值得考虑开发。问问自己的APP能提供什么新的商业机会？例如，随着疫情的蔓延，许多人开始用上健身APP在家里锻炼。
4）竞争对手做的情况。
要了解竞争对手在做什么，他们是否有APP，能做什么，以及他们是否真的对用户有用。
查看App Store和谷歌Play的统计数据。下载和评论的数量可以告诉你用户是如何使用竞争对手的应用的。如果他们的服务真的很方便而且很有必要，那么你就容易被甩在后面。
5）复购率。
一个应用可以帮助你留住那些习惯从你那里购买的人。如果想为老客户开展促销活动了，给他们发送一个通知就能完成，成本更低。
在正确的时间提供的报价越有吸引力，人们购买的可能性就越大。
6）促销工具。
有了应用，你就不需要花钱设计和制作实体卡，客户也不需要随身带卡。将促销计划整合到APP，并分享有用的促销信息。
开发手机网站比开发手机应用需要更少的工作量，这反过来可以降低整体推广成本。
这部分是由于响应式设计的出现，它允许你根据打开网站的设备屏幕来调整网站。至于APP，它们必须为许多移动平台单独编写:Android、IOS、Windows等。
一些设计师认为“前端驱动的网络体验”会是2022年的一个好机会，我非常同意!（彩云注：在国内，现在开发小程序的肯定越来越多了。）
我们一开始并没有将其放在首位，因为这并不是一个新的趋势，在很久以前设计师们就已经设计了很多3D图像和动画了。
Cardi B rhymes with 3D
3D技术已经在过去流行了很多年，但它不会很快消失。此外，我们预测3D图形将变得更加多样化和包容。
在过去的几年里，3D艺术和动画已经出现在各种UI设计趋势评论中。这意味着越来越多的设计师将它们整合到页面中。
3D当然应该成为2022年最热门的趋势和预测之一，因为与经典动画相比，逼真的3D形状结合动画总是引人注目的。
“从技术上讲，通过3D更容易传达更多内容，因为它比平面图片更接近我们的感知。3D插图更有深度，信息量更大，也更具互动性。"
许多设计师将3D对象无缝地“安置”在2D空间中。它允许创建更有趣的组合，也作为一个优秀的工作方法蕴藏着巨大的潜力。
乌克兰政府网站用3D手模拟了黑客帝国
注意一点：在整合3D图形等重量级内容之前，确保你的应用性能是OK的，能够快速加载所有元素。
Meta的logo既不是2D也不是3D。或者两者兼而有之?这就是即将到来的2022年的莫比乌斯带和薛定谔的猫。
Meta logo的变化(3D版本)(https://design.facebook.com/stories/designing-our-new-company-brand-meta/)
（彩云注：这个概念在去年简直不要太火，未来几年肯定还会是一个大的趋势，设计师也需要保持关注。跟着趋势走，易于放大自身价值。）
越来越多的公司在网站和移动应用中使用动画，以提高用户的沉浸感和体验，使内容更有趣。
动画是2022年重要的网页设计趋势。2022年，如果没有它，你的产品很可能会看起来就像个半成品。混合风格的动画越来越受欢迎:定格动画和3D动画的结合，2D动画和3D动画的结合。设计师这样做是为了获得不同寻常的风格解决方案，以及提高最终产品的质量。
2022年，动画设计将是品牌市场定位的重要组成部分，想想一个公司新的视觉形象——动画形象。随着这个领域的专业设计师数量的增长，实现新想法的机会也在增加。
1）讲故事动画。
可以通过在界面和用户之间建立情感联系来传达信息。
加载动画Yoichi Kobayashi
2）更有趣的加载。
用户不愿意等待，除非载入画面很有趣。带有百分比的动画不仅可以分散用户的注意力，还可以告知他们加载页面需要多少时间。使用进度条或者任何你能想到的可以显示时间流逝的东西。
3）光标效果。
用户可以精确地观察光标所在的位置。通过添加智能互动动画，对这个光标作出反应来探索网站。这种效果在21世纪初非常流行。如你所知，流行趋势往往每20年就会重演一次。
4）动态排版
你有没有想过让字母跳舞?
据Statista统计，2020年全球动画市场达到了2700亿美元。趋势是视频，而不是静态信息。全球品牌在社交网络上使用动画制作广告。毫无疑问，动画插图的优势是它们非常灵活和多样化。
宝马历史动画
这样的作品通常用于两种情况:
1）用于解释视频
2）电商广告
动画解说的趋势出现在几年前，解说视频清楚地显示点击的位置或公司的项目是关于什么的。
在招聘或商业视频中，用户更喜欢看画出来的人物，而不是抽象的形状或物品。画出来的人物可以唤起情感共鸣，就像活着的人一样。
微交互是帮助用户浏览网站或应用的小界面变化。通常这些是作为提示用户的视觉或声音效果:它们显示发生了什么，将导致什么操作，下一步需要做什么。
图片来源awwards
动画交互将为你的设计注入活力，并有助于保持用户粘性。关注每一个细节是设计师工作的关键，因为设计中的所有元素都可以带来积极的用户体验。
重要的是要达到元素的和谐，而不是把注意力分散到界面的各个方面。微交互作用的一个重要部分是颜色，它们为界面元素增强价值。
微交互有助于页面导航，解释它们的功能。最重要的方面之一是加快和简化以前冗长的功能，以实现特定的行为。
2022年，在线品牌面临着新的挑战，需寻求新的解决方案，其中之一就是动画logo设计。
图片来源Toridori
动画logo主要有以下几点营销优势:
1）吸引注意力。这意味着它们有助于提高品牌知名度。
2）有助于提高SEO。谷歌更倾向于动态内容，带有动态图形的页面更容易吸引用户。
3）在移动端看起来更好。丝滑的动画看起来比静态的logo更有趣。
4）最重要的是展示了历史。静态logo背后的想法正在动画中发展。由于这一点，在几秒钟内，你可以展示品牌的使命，甚至它的价值!
一家洗衣机[公司]的标志(https://www.schulthess.ch/)
现在有很多设计模板，可以很容易地用字体制作一个动画logo:
图片来源Shabello, Bobby Voeten
记住，设计趋势总是在变化的，但是设计的意义不会变。如果你不能深刻理解这一点，那么任何设计趋势的文章不能帮你做好设计。
这是前面提到过的世界上最老的猫。她今年34岁(相当于人的160岁)
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
很多时候既让初入B端行业的设计师感到一丝丝迷茫，因为不同的B端系统也就意味着，它的业务一定就会有所不同。比如CRM系统当中的客户生命周期管理，OA的办公自动化，特定的行业往往都会蕴含着不同的业务类型
而作为设计师，如果只了解设计模式、设计组件，不去分析设计最后的业务诉求，其实是没有任何意义。因此想要通过B端设计指南，和大家一起聊聊B端业务，以及背后所牵涉的具体逻辑。今天就简单聊聊最为常见的 审批
开始之前，还得再多说两句，因为一个系统当中，业务本身就不是独立存在的。因此在去讲述审批的过程，一定会涉及到 流程、权限、表单配置 等一些基础内容，建议可以先做初步了解，再结合文章进行阅读
虽然在说起源，其实我更想给大家讲清楚 审批在B端系统 当中的重要性
审批字面意思是审查并加以批示，通常指对 下级呈报上级的公文进行审查批示，报请上级审批
现如今，任何事情一定都会有分工协作，而使用审批的好处是可以
规范员工行为
提高企业运转效率
系统存档便于溯源
保护环境（毕竟减少了纸张浪费）
当然在不同的阶段的公司，对于审批的诉求是不太一样
小公司：因为审批的决策路径短、流程上都非常简单，但因此就会缺乏规范保障。比如在外出办公时，看似只需要与老板当面进行口头上的沟通即可，但是在外出出现意外时，由于缺乏外出办公的相关证据，员工的权益则很难得到保障
大公司：因为审批的决策路径长，流程上都极其复杂，因此会在多人协作下完成整个流程审批。比如想要申请购买办公用品时，会由 行政、Leader、财务 层层审批，从提交审批到最终落实可能需要十天半个月，但是这样的流程，能够确保企业在清查财务状况时，更加有理有据
审批的演变，就是从最开始的规章制度而来。比如在早期去政务机构办理各种业务时，会让你去填写各种纸质表单。在审核过程中，则需要有各个机关的盖章及批准，而这种形式正是政府对于普通市民的自上而下的管理方式
审批其实是整个B端系统的灵魂，因为在B端系统当中，企业想要使用系统的一大痛点便是 核心的管控
因此你会发现，只要一个独立的系统，一定会存在独立的审批模块。因为B端管理系统当中企业的最终目的，是管理手中的人，而审批便是最为常见的一种手段
审批在如今的B端系统当中，可以理解为它是一组消息，在这一组消息当中会有：“具体的文本、对应的附件、以及照片视频”这些内容都是辅佐 申请人 去讲诉你需要申请的内容
比如我们在申请病假时，往往需要出示 三甲医院所开设的证明，对于这个证明，如何在表单当中出现，你会发现最为常见的便是拍摄证明图片，然后上传到表单当中（这个与字段属性紧密相连，我就不做不过介绍）
审批的这组消息还会有些特殊，因为它非常重要，你可以理解为它是一则“加急消息”会提醒审批人快速的进行处理，同时会告知相关的参与人（处理人、抄送人）审批的进度、并且无论成功与否，都会在系统当中留下 足迹，因此它起到了 “追踪、通知、留存” 三个非常重要的作用，我们首先对于审批进行一个基础的拆解
如果把审批单独拿出来，你会发现审批会牵涉到 发起人、处理人、抄送人
审批的发起人，也是整个审批流程的归属人，他最关心整个审批进展
因为在发起人的角度，创建完审批事项后，可能还需要进入审批页面，完善 后续附加信息、及时了解审批状态、催促审批人的审核、处理驳回意见 等等，因此站在发起人的角度，审批需要尽可能详细的展示 当前审批的状态、完整的审批流程、驳回信息的快速操作、成功信息的必要通知
审批的处理人主要在审批过程做出决策，因此他更在乎的是审批申请内容的信息。比如 审批的信息内容、直接的审批操作、多条审批的管理
当然，在一些大型的集团企业当中，会将审批分为审批「直接处理人」与「间接处理人」（后文以 直处人、间处人 简称）
「直处人」作为审批的第一处理人，也就意味着他的意见至关重要，如果「直处人」通过过后，相对而言整条审批的通过几率会大大增加。通常「直处人」是作为申请人的直系领导居多，因此多数情况下可以理解为直属领导进行 “把关”
「间处人」作为审批的后续处理人，同样在流程当中也十分重要。但在有些情况下，比如一些偏平化管理的企业，「间处人」更多像是“权利”的象征，因为权利已经下放给「直处人」，而「间处人」起到知晓审批以及企业的规章制度要求
审批抄送人主要起到通知对应角色的作用，因为一条审批的出现，会造成诸多影响，假设今天你需要申请事假，如何通知同部门的其他成员呢？
发送即时消息，显得过于简单；每个打电话，又有些麻烦；发送企业邮件，又怕他们没有看到
这时候抄送人会显得尤为关键
通常抄送会有企业流程上管理员配置的固定抄送人，以及发起人选择的自行抄送人 两种类型
固定抄送人 角色通常与管理员配置整个流程有关，他是角色当中 管理员 所配置的重要通知人，比如今天你的请假信息，肯定会告知行政，像这类默认的通知流程，则可以将其设为固定抄送人
自行选择抄送人 则是提供给发起人自行选择，该条审批可能会影响到的相关人群。比如就是发送给同事，让他们知晓今天你不在岗位上，因此自行选择可以增加审批抄送的灵活性
这里肯定会有很多读者会问，我选择抄送人与我发消息给同事，有什么区别么？
看似完全相同，实则有明确的区分
通过消息，将审批内容传达，本质上是你自行将内容发送给对方，对方会对于你这个消息的真实性会产生疑问？你是否通知了
而选择抄送，更为权威，更能体现你这条消息的真实性，并且整个流程都已经由领导进行批准，因此不会存在太大问题
其实审批的本质就是一组消息，而这一组消息当中，申请人 通过 表单配置 去获取需要补充的消息内容，而流程会根据企业所配置的流程方式将这一组消息进行合并转发给对应人，而审批人则需要对这一组消息进行回复“通过、驳回” 来让整个流程继续延续
审批当中，最主要的便是流程。因为你可以通过查看流程图，去了解整个企业的组织架构、规章制度、员工管理方式
串行审批主要是指当一个审核节点通过后，才能进入下一个审核节点。如果节点驳回，则可以根据业务实际需要，配置驳回的返回路径，会有：拨回到发起人、驳回到上一个节点、或驳回之前任意一个节点 重新审批
并行审批是指一个审批节点存在多个角色同时审批，这里会存在两种情况
任何一个人审批通过，则可以进入下个节点，这也就是系统当中常说的 「或签」
所有审批人员通过，才能进入下个节点，这也是系统当中常说的 「会签」
条件审批就是将企业当中的规章制度映射到实际的项目当中，通常就是某个审批内容会根据 金额多少、实际数量 等 进而选择哪个角色进行审批
比如销售人员在申请一个合同审批时，会根据合同金额的不同，审批人也会有所差异
当金额小于8000时，合同直接由财务专员进行审批，进而让流程进行快速审批
当金额大于8000时，合同会由销售主管进行审批，让销售主管能够掌握企业的重要合同
通过发起人选定一个审批事项后，将自主选择后续的审批内容，进而实现审批的后续选择。这是一种较为灵活的审批流程，当企业尚未形成标准化流程时，自主的核心就是当发起人发起一个审批，提交时需要自行选择下一个环节的审批人。而下一个环节的审批人审批通过后，可以选择继续流转到再下一个人去审批，或者结束这个流程
审批的背后，它映射的其实是企业的一条条管理制度，而它的设计一定是要满足企业的实际需求。因为你负责的产品不是为某一家企业提供的服务（定制化产品），并且企业管理制度的变动其实是家常便饭，你需要去考虑一个通用的解决方案，这个解决方案拆解下来会分为三个内容，分别是：申请表单、流程配置、更多配置 进行讲解
审批表单是最为一个“简单”的用户可配置化表单，因为现如今大多数B端产品都是以 SaaS 作为基础（如果是定制化产品 它的审批内容、流程也不会是固定不变的）也就意味着审批表单需要为企业提供“DIY”的方式，通过表单提供不同的字段类型，去构建审批的实际要求
比如在一个选择请假时，年假、事假、病假、婚假 等的要求都会有所不同
如何知道他们的差别，其实可以根据《劳动法》的相关规定 以及 各个其实的实际公司制度，进行个性化的处理
在申请婚假时，需要上传你的结婚证，以证明其真实性；在病假时，需要有3甲医院的病情证明；在年假时，则需要有你的剩余年假天数。而这些特殊诉求，其实都需要在表单当中进行各种定制化表单
当然这只是极为常见的 请假 场景，而在实际业务当中的复杂场景（更多需要将 审批与其他系统关联）一个简单的表单是没有办法进行满足
这也是很多企业会发现，无论是飞书、钉钉、企业微信，都没有办法满足其实际流程需求。又没有办法改变自身流程，只能够自研、定制化 产品，这也是为什么即便各行各业都有了初具规模的 SaaS 产品，但是还是会有很多企业愿意自行研发软件
企业可以根据自身的系统流程，在流程配置当中去定制特定的流程。在这个页面的设计上，需要注意不同参与人的状态，以及复杂流程时如何才能够进行清晰的阅读，因此增加了 颜色区分（发起人、审批人、抄送人）+ 视图缩放 功能
颜色自然不必多说，整个系统需要统一，因此不能够只考虑在管理后台的颜色，是一定要在详情页当中也能过保证颜色的一致。这样才能够满足实际业务所需
视图缩放只是小小提一下，常见的视图缩放会放在左侧，至于为什么，自己稍稍揣摩揣摩
由于流程配置的属性页面会涉及很多表单的复杂逻辑，这个只能够留在我的 训练营的课程 当中进行拆解，这里就不过多赘述
更多配置项则是审批在实际情况下的特殊处理，比如：申请人修改审批的具体时间、能够将审批转发给其他人、出现多次相同的审批人是否去重 等等... 其实就是将审批的设计方案进行“赋能”，去满足更多企业在实际场景当中的需求，感兴趣的同学可以去 钉钉、飞书 了解详情
审批，核心还是提高企业运转效率，如果在审批之间，还需要不同角色私下反复沟通，本质上就失去了审批的意义。而审批本身，就是一个典型的B端产品 从场景到需求，进而研发功能，最后又回归场景，你设计的好与坏，落地到真实的场景当中，试试便知
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com