用户体验设计师经常需要兼职各个角色职责，除了线框图和原型制作之外，还有可能与团队一起研究、写作等问题。这样的例子不胜枚举，用户体验是一个不断发展的多学科领域，因此优秀的 UX 设计需要广泛的技能开发，UX写作位居榜首。
关注用户从内容开始，内容策略是所有产品信息的制作和开发。用户体验（UX）写作是该学科的专长，它专注于帮助用户用语言实现他们的目标。
语言帮助用户到达他们想去的地方，通过关注用户想要实现的目标，内容策略可以建立忠诚度和信任度。
UX设计师思考页面上的信息层次结构，然后，这将指导用户操作。UX与研究人员一起测试有关语言的假设并提供专业的见解。
当您拥有 UX 写作的基础，并参与品牌建设时，就会发生惊人的事情，用户体验写作可以让品牌茁壮成长。
通常在产品中，使用的词是软件操作，请用动词，它往往是句子中最有力的部分。它将与用户的某些操作有关，
保障用户使用中清楚，需要删除技术术语并将操作置于用户的上下文中。
简洁不仅意味着简短，还意味着简单高效。当我们写作时，需要查看我们的信息每个词语都有不同的工作。
以上是产品写作中的常见问题，在这里不需要标题。在系统接口中很常见，研发提供一种状态，我们通过这种状编写文案。我们应该确保内容优于设计，视觉效果与要表达的内容一致。尽量不要把信息塞进不适合的盒子（代码）里。
在这里，我们删除了标题。正如研究表明，大多数人不会阅读屏幕上出现的每个词语，用户倾向于扫描。他们的眼睛会遵循 F 形图案。阅读第一行，第二行，然后开始向下跳过页面，只捕捉每个句子的第一个或第二个词。出于这个原因，保持我们的文本不仅简洁而且前置。将重要概念放在首位，这样做是为了让人们在浏览页面时能看到那些重要的词。
这个原则永远适用，将最重要的文本放在前面，然后无情地编辑后面的内容。
号召性用语 (CTA) 引导人们进行下一步，您希望引导用户到达他们想去的地方，号召性用语需要与用户想要做的事情产生共鸣，这里的“好的”不是一个好的行动号召。
“再试一次”是一个不错的选择，这不是全部场景，如果用户忘记了密码，而唯一的按钮只有“再试一次”，用户可能会感到沮丧，我们需要给用户多一个选项「忘记密码」。
注意写作时需要结合使用场景，它可能需要提供的一些基本功能，但可以提升产品的用户体验。
如果您注意这三个原则，您将更好地与用户建立联系。
这三个原则并不总是协调一致的，他们之间有一种张力在互相竞争。
当我们使文本清规则时，文案仍然很长，而且不太好阅读。当我们使文本简洁规则时，它使文案更短，但可能牺牲一些清晰度为代价。最后，当我们使文本有用规则时，它变得更长且更不易阅读。
从一个品牌中，我们可以筛选出 3 或 4 个形容词，以及希望用户如何看待它。提取这些形容词，可以采用头脑风暴练习。
想象一下，如果要设计一个约会产品
您会在产品资料中加入什么词或信息？让它在众多产品中脱颖而出，是什么让用户觉得它最有趣？
是什么让用户想要点击并想要了解更多信息？
然后，您可以将这些品质提炼成描述性词语，这些将成为您的品牌原则。
Google Pay 的原则是：新鲜、善解人意、平易近人。
想想您在不同的环境或情绪中听到声音是什么样，这是语气。
声音和语气之间差异，是声音传播手段，语气是根据情况或内容而不断调整的。在一个产品中，就像在不同的情况下以不同的方式与用户交谈，语气的利用容易带用户进入情感化的设计。
例如：
将不同的阶段映射到用户旅程中，可确保用户在整个产品体验中以一致的方式使用产品文案。
对于产品，您的文案写作可能从信息丰富到鼓舞人心或者幽默风趣。创建产品开端与终端后，您需要确定要映射的用户旅程中的哪些时刻，考虑用户体验中不同的里程碑或交互，如注册、引导、或错误提示之类。
为了帮助您确定这些将落在频谱中的哪个位置，您可以考虑：
现在，我们将前面讲的内容，融合在一起做一次UX 写作练习
UX写作原则
举个例子，第一次使用 Android Pay 时需要对用户说什么？
在流程开始时，从以下描述性内容开始：
思考良好的用户体验写作的三个原则，文本清晰有用，但并不简洁。让我们查看看哪些信息是必不可少的，哪些部分可以使用视觉效果？最后编辑为如下所示：
Google Pay 的原则是：新鲜、善解人意、平易近人。
文案已经清楚，简洁和有用，现在需要考虑语气词，还有就是“这段文字是否传达了品牌？”不多，感觉很一般。
因此，回到品牌原则，需要考虑如何让它更新鲜、更令人兴奋，因为这可能是用户的第一印象。
有了这份清单，您就可以让产品在语言上脱颖而出：
作者：唐小白92
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
行业对设计师的要求⼀直都在不断革新，只有「⼀技之⻓」的设计师已经很难满⾜⾏业需要，产品分析已经不仅仅是产品经理的工作内容，对于 UI 设计师来说，也是必备技能之一了，尤其是对于 B 端领域的设计师来说，更需要拓宽视野，思维前置。
那么，该如何去做产品分析呢？本文将从产品分析是什么，如何做两个方面来讲述，为大家提供思路，做真正落地的对设计有帮助的产品分析，提高自己理解业务、处理业务、解决问题的能力，体现出设计师的价值。
对于 B 端产品来说，它只有一个目标，就是解决问题，通过对问题的分析得出解决方案，而任何一个问题都不会只有一种解决方案，在权衡利弊后得出了最终的解决方案，产品就是解决方案的表现形式和实际载体。
从设计师的角度来说，产品分析通常是挖掘产品缺陷，优化产品体验，为产品迭代提供依据，比如：通过深度体验产品，挖掘产品的在功能、交互体验方面的不足，并通过分析制定产品优化方案。一款产品从浅至深拥有无数的可被挖掘的信息，这些信息本身是庞杂冗余无意义的，只有通过分类和清洗才能得到对人有意义的信息，本质上来说，产品分析就是在做信息分类和清洗的工作。
市场分析是对产品所在的市场进行宏观的竞争态势和市场规模的分析。市场分析主要包括行业背景、市场现状和商业模式三部分。可以看到，市场分析其实是从很宏观的一个角度来切入，更偏向于战略层内容，因此市场分析也是三者中距离设计师最远的一个概念。用通俗的话来说，市场分析最主要的目的就是分析产品是否赚钱。
广泛意义上说，竞品分析就是根据分析目的，找到切入角度，对竞争对手或市场进行客观分析，找到竞品或自己的优势与不足，为下一步决策提供科学依据，其实就是「知己知彼」的过程。对于设计师而言，竞品分析的目的更倾向于寻找解决方案，比如：通过竞品分析来寻找参考从而解决自己当前遇到的问题。
不同于 C 端，B 端往往有很坚固的行业壁垒，所涉及业务也非常难以理解，究其原因，来自以下两个方面：
B 端产品很多时候，都是在原有线下业务的基础上进行数字化。逻辑的复杂度本质上是来源于这个行业多年来积累的足够成熟的业务流程与规范，而这些东西没有办法速成，只能靠不断地积累来增进理解。
C 端产品的设计中，设计师大部分情况下都或多或少地就是用户本身，或者带有用户属性，比较容易产生同理心，去发现问题解决痛点。
而 B 端产品不是给普通用户使用的，是给特定群体使用的，这种特质就决定了设计师很难去真正地理解用户的处境，设计师最厉害的特质——同理心也很难派上用场。
有的设计师同学，一接到产品分析的任务，到手就是先去网上看看别人是怎么做的，然后按着人家的结构对自己的产品进行一通分析，其中不乏用到了「用户体验五要素」、「SWOT分析」等看起来高大上的方法论。
按这样做，产出的分析报告不能说错，但是最起码是不恰当的，对设计上的帮助微乎其微。其中有这样两个问题：
产品经理是产品的第一负责人，需要对产品的整个生命周期负责，说人话就是产品经理负责产品做什么不做什么，该什么时候做，而设计师关注的是产品的用户体验。产品是商业的代言人，而设计师是用户的代言人，二者本质上的不同，就决定了在做产品分析时关注点必然不同。如果按着产品经理的思路来做产品分析，得出大环境之类的太过于泛化的结论对设计没有什么实质性的帮助。
用户体验五要素，swot，等等这些高大上的方法论看起来非常有用，从多个维度把一款产品分析得非常清楚。可真实的情况时，往往新手设计师同学既不懂方法论的本质，也不懂使用场景，只是盲目地套用，导致产出的是一篇「八股文」一般的产品分析报告，过于全面但没有重点，什么都是点到为止，对自己理解业务和辅助设计没有实质性的帮助。
我认为，「方法论」本质上是经验主义，使用过去解决问题的方式来解决新的问题。在一定程度上，方法论是有用的，一些简单的问题，确实是有固定解法的，而且，解决问题也更快。但是在更难更特殊的场景下，方法论不再管用了。很多时候，问题表面上看起来一样，可是由于问题的背景不同，所以解法也是不一样的，这时候再采用方法论，就会产生思维固化，强行去套方法流程，得到的一定不是最正确的答案。
在确定了目标和分析重点之后，我们就可以开始进行分析产出产品分析报告了，在这里我整理了几个撰写时的原则供大家参考：
第一点是我们要避免去主观臆断功能的合理性。正如我上面提到的一样，我们并非 B 端产品的核心用户，有些我们感觉反常的地方，但是其实有它的合理性，因为 B 端用户的痛点往往是在特定的工作场景下产生的。因此，在不了解真正用户和场景的情况下，仅凭经验下的结论往往是错误的。
我之前的一个项目的设计中，在给图表配色时，我最初的一个版本是用的近似色去完成的，在发给产品经理初审时被打回来了，理由是这种配色不够明显。我追问原因后才知道，我们的一部分用户是年龄比较大的用户，对比度足够高才能方便他们看清楚。最后出的一个版本是对比度非常高的配色，尽管从设计的角度来看这种配色美观度不足，但是能够让用户看得清楚。
在这个例子中，用户对于美观度并没有很高的要求，反而对于数据的识别度要求更高。我们常听的一句话是「己所不欲，勿施于人」，然而在B端的设计中，我们更要做到「己所欲，亦勿施于人」。
B 端产品有一个很重要的特点，购买决策者与使用者的割裂。我们在思考一个功能时，不能仅仅考虑使用者的体验，也要考虑决策者的想法。
比如钉钉的「已读未读」这个功能，相信大家对这个功能是槽点满满。但是在 B 端产品中，决策链上游是购买决策者即老板，因此就有了这个功能。如果只考虑到用户体验，这个设计从一开始就不该出现。但是，与 C 端产品的流量思维不同，B 端产品不是靠体验来吸引用户存活的，而是靠满足决策者的需要来活下去的。很多大家感觉不好用或者体验很差劲的 B 端产品，仍然活得很好，就是这个道理。
说句题外话，钉钉已经注意到了这个细节，在去年的一个演讲上，钉钉总裁也提到了对这个功能点的考虑，他举了一个场景，在不改变现有设计的情况下解决了这个问题，通过智能手表等外设来预览消息，而手机和电脑依然显示未读，自己考虑好了的时候再去回复。
从战略层到功能架构，再到每个功能细节，采用金字塔原理去遍历，避免遗漏的同时层层深入。
在此处，我介绍一下我认为一份合格的产品分析报告应该包含的部分，各位设计师同学可以根据自己的需要进行适当调整。
因为产品分析是有一定的时效性的，且是针对某一个具体版本去进行分析的，所以在文档开头要列出自己所分析产品的版本，例如（飞书 V5.6.9，钉钉 6.3.35）。
即设计师进行产品分析的时间，留档以供以后查看。
此处要回答的问题是，产品是用来干嘛的，给谁设计的以及怎么赚钱的。
即产品是用来干嘛的，不需要特别具体，只需要在大方面上对产品进行概括即可。举个栗子，抖音定位是一款短视频消费型产品，以“内容”的新鲜有趣为主，强调分享和信息获取，满足幸福快乐的美好时刻需要。
即产品是给谁设计的，在此处需要对客户和用户做区分。客户一般是指企业的 CEO/管理者，他们来决定是否要斥「巨资」购买一款软件。比如说某公司的 CEO 最终决定买钉钉还是飞书作为办公协同软件。而用户一般是企业内的员工，他们使用软件来完成一些日常工作。分析目标用户的意义是，在之后的分析中，我们都要以用户为落脚点，去分析功能的合理性。
需要注意的是，此处并不需要去做一套完整的用户画像，只需要大概描述一下是产品的客户和用户的职位和核心需求即可。
举个栗子，对于某客服工作台产品，
即产品如何赚钱，在这里，我们并不需要用各种很高端的工具——比如商业模式画布，去分析商业模式，我们仅需要知道产品的赚钱方式即可。作为设计师，我们不需要有产品经理那么专业的商业思维，但是我们也一定要能够从商业角度理解产品的价值，一款产品最健康的状态一定是用户价值与商业价值并存。因为本质上而言，用户体验也是商业价值的一部分。
对于B端产品而言，有两种最常见的售卖方式：
1. 本地部署 —— 按软件数量售卖
本地部署是指产品的应用、数据都存储在一台计算机中，这台计算机不与其他任何服务器、计算机相连。21世纪之前的传统 IT 公司大部分都属于这类，比如 Adobe 旗下的产品（尽管他们也在做云，但是更多情况下我们还是把 PS 当做本地产品来使用），那时候 B 端企业的商业模式是：主要服务于大企业客户，通过与顶级的合作伙伴合作，推出顶级的产品，提供一整套软硬件解决方案，并进行深度服务，一次性收取高昂的软硬件费用，并且每年加收不少服务费。
2. SaaS —— 订阅制
21 世纪后，随着云计算技术的发展，越来越多的产品开始部署在云上，也就逐渐发展成了现在的 SaaS 产品，从这个角度来讲，我们通常所说的 SaaS 产品其实就是将本地部署变为云端部署的产品服务。
这时候 B 端企业的主要商业模式是：不仅服务于大型企业，也服务于中小企业。以订阅制的方式，定期收取费用，并且提供不同的版本，进行差异化定价，实现收益最大化。
举个例子，蓝湖就是提供了四个版本并且以季付或年付的方式进行收费。
将需求转化为对应的软件层面可实现的能力，即功能，功能可以实现需求所期望达成的目标。
一个完整的 B 端产品包含若干功能，将一套功能依据业务进行分类整合，形成的抽象化业务模型即功能架构。
功能架构指的是产品是如何由这些功能组成的。我们在分析功能架构时实际上更偏向于产品的实现模型。
信息架构是包括组织系统、标签系统、导航系统、搜索系统在内的综合系统。我们在分析信息架构时，分析的是这个产品是如何将不同的功能组合在一起展现在用户面前的，分析的是产品的呈现模型。
一个成熟的 B 端产品甚至会有甚至会有三四百个功能，我们在分析功能细节前，必须要先厘清架构，以一种抽象的框架视角来全局思考，而不是也仅仅以用户的视角来看产品的表象。
真正地去使用产品，并将产品的所有功能与模块收集到一起。
以模块作为分类依据，将所有功能分到不同的模块里，必要的话，可以继续细分子模块。
在这里要注意，一个功能是否属于某一个模块，不能以这个功能是否在某个页面为依据。一个页面出现了某个功能，只是因为这个场景下用户需要这个功能，而不是这个功能属于这个页面。
以飞书后台为例，很多人在分析时会把首页也作为功能架构图中的一个节点去分析，这是错误的。
首页只是功能的聚合，而非功能模块，例如「添加成员」这一功能应该属于「组织架构」模块中，如果将首页也加入分析，势必会出现功能的重复。
在分析完整个功能架构之后，我们可以深入到每个功能的细节了。其中包括以下两点：
通过绘制功能的使用流程，我们可以模拟用户在使用产品时的流程，发现一些从宏观角度上忽略的点。在绘制时，要注意的是，要控制在页面 & 操作维度，避免拔高到功能维度甚至业务维度。
我们除了要知道这个功能该怎么用之外，还要知道功能与业务的关系 —— 功能背后的需求。
在分析背后的需求时，除了知道这一需求是什么，如果可以多走一步，对需求进行分类，那对于我们了解产品时大有裨益的。
关于需求的分级，在 C 端中常用的模型是马斯洛需求模型，但是这一理论并不适用于 B 端，主要是由于以下原因：
一般而言，我们可以将需求划分为功能性需求与非功能性需求。非功能性需求，指的是隐藏在功能需求背后以及开发需要考虑的的需求，也叫作“跨功能需求”。最常见的非功能性需求就是产品的响应时间，一般非功能性需求是由开发和测试同学考虑的。
而对于功能性需求，有三大类：业务需求、功能需求、产品需求。而这三类需求也有比较立体的层次关系：
业务需求，提出者是业务范围、业务模式和业务规则的制定者，一般是指业务方的高层人物，比如 CEO、高级经理等。产品设计是服务于业务定位的，进而使得产品战略遵循于企业的发展战略，只有这样产品方向才不至于发生偏差，因此，他们提出的需求一般不能违反，换句话说，他们提出的需求是整个系统设计的最高纲领。
用户需求，提出者是基层管理者和执行者。他们关心的是如何使用产品完成自己的工作，提出的需求相对细节，例如对操作、流程上的诉求。
产品需求，由于 B 端产品的复杂性，在建设时需要考虑到功能复用问题，以及与其他系统的架构交互问题。举个例子，语雀 App 是阿里旗下的产品，在开发登录界面时，没有重新开发，而是集成了阿里云的 SDK。产品需求本身对业务实现没有价值，它的价值体现在节省人力和优化软件架构上。
三者虽然并没有绝对意义上的优先级顺序，但是一般而言，B 端产品时优先考虑业务需求，其次关注用户体验，满足用户需求，最后才是考虑产品需求。了解了这一点，我们对功能背后的需求进行分类后，就可以从更高的视角来分析功能的设计逻辑，而不仅仅是停留在好不好看的层次上对功能进行分析。
在《交互设计原理》中是指：对于交互式数字产品、环境、系统和服务的设计，定义人造物的行为方式，即人工制品在特定场景下的反应。
在《交互设计精髓4》定义为：设计交互式数字产品、环境、系统和服务的设计，聚焦于如何设计行为。
而在《超越人机交互》中则是指：设计交互式产品来支持人们在日常工作生活中交流和交互的方式，创造用户体验以增强人们工作、生活以及通信的方式，聚焦在实践上，即怎样设计用户体验。
交互设计即行为设计，关注于如何设计系统如何帮助用户更高效愉快地达成目标。
仅仅知道是什么远远不够，我们更要知道如何去分析一个产品的交互设计好坏。在这里，我提供两个思路供大家参考：
上文提到，交互设计的对象是行为，而这里的「行为」可以拆分为 3 个部分：导航，输入和展示。
设计要点：
例如：掘金的顶部导航，既体现出来了导航本身与包含内容的关系（导航的标签是当前内容的概括），又体现出来了内容与当前页面的关系（当前页面是首页下的一个子页面）。
这里的输入不仅仅指我们日常中的输入，而是一个广义的概念，将所有用户向系统提供信息的方式统称为输入。输入可以通过多种方式完成，包括输入命令、按下按钮、快捷键、甚至打手势、语音等方式。
设计要点：
设计要点：
尼尔森十大原则由毕业于哥本哈根的人机交互学博士 Jakob Nielsen 发表，他提出十大可用性原则，用来评价用户体验的好坏，我们也可以以此为依据来分析一个产品的交互设计好坏。具体的内容网上有很多资料，笔者就不再赘述。
视觉设计即 UI 设计，负责产品的图形、图标、色彩、视觉风格等，从视觉层面把控产品界面设计，决定营造出什么样的视觉体验。
视觉设计的分析内容可以拆分为形、色、字、构、质、动。在分析时，如果是网页端，可以借助浏览器的开发者模式或者谷歌浏览器的插件「VisBug」来详细查看各个维度属性细节。
图标的圆角，卡片的圆角，icon 的风格与统一度（包括：视觉大小，线段粗细，端点类型、拐点类型等）
例如，同样是头像卡片，QQ采用了圆形来体现灵动轻盈的风格，而主打熟人社交的微信则采用了小圆角。
色彩分析包括用色规范、色彩搭配、层级等。在 B 端产品中，色彩在使用时更多的是基于信息传递、操作引导和交互反馈等目的。
字体的属性有字号、行高、字体、字重等。通过合适字号和字重可以对界面元素划分视觉层级，帮助用户识别。而在一些特殊的场景下，可以运用特殊字体来提高识别度和增加页面美观度。
例如：支付宝使用了常用的 Din pro 作为其数字字体，其他 APP 厂商也分别使用了特殊的数字字体。
此处的构是指页面结构，分为层级和间距两大部分。合适的层级和间距可以帮助用户理解页面，并给予界面呼吸感和通透感。
质感与风格、界面风格，投影数值，扁平还是拟物。
比如说相比普通的单层阴影， Ant Design 采用了三层阴影的表达方式，让阴影更柔和，更符合真实状态。具体可查看 https://ant.design/docs/spec/shadow-cn
最近几年，越来越多的公司和团队已经意识到动效在产品用户体验中的重要性，动效设计已经成为产品设计语言的重要构成之一。
动效设计并不只是为了修饰，使用动效不仅可以更清晰地体现内容元素之间的逻辑和层级关系，还可以提供当前的状态反馈，加强用户对操作行为的感知，给用户以可控的感觉。
除了上述内容之外，我们在分析一个产品时还可以做以下两件事：
在被问到「你觉得这款产品的用户体验好吗？」时，我想大部分设计师同学即使做完了产品分析，也很难回答这个问题。那么，我们该如何做才可以较为准确地回答这一问题呢？
基于这个问题，我们从用户体验的定义出发，ISO 对用户体验的定义有着如下解释：
用户体验，即用户在使用一个产品或系统之前、使用期间和使用之后的全部感受，包括情感、信仰、喜好、认知印象、生理和心理反应、行为和成就等各个方面。
从定义可以看出，用户体验不仅是主观的，而且范畴非常广，所以在描述时，我们不能仅仅用好/不好来概括。要解决这个问题，要点在于建立一个清晰合适的标准来量化用户体验，体验自查就是在做这样一件事 —— 度量体验。
通过做体验自查，可以达成以下效果：
本质上，设计走查表通常是设计师在完成设计稿后，用于快速遍历方案、修正遗漏或不周的工具。在产品分析中，我们使用这个工具也可以达成体验自查的目标。通常，我们是需要根据产品建立一套适合自己的交互设计自查表的。如果暂时没有，也可以暂时使用网上成熟的自查表来进行。
问题位置：
即体验问题发生的位置。
类别：
不同自查表对问题的分类不同，例如用户体验五要素、可用性原则等。
重要程度：
如果采用正向思考，很容易陷入“都很重要”的困境，所以这里一般采用反向分析法，也就是如果不解决这个体验问题，会造成多大的影响。我这里将重要程度分成了三个等级，分别是：
发生频率：
同样是三个等级，需要注意的是，这里不是以时间频率来定义的，而是以「每经历 n 次业务节点就会出现这一问题」的方式来定义的，如果不好量化，也可以使用每次，经常，偶尔这样的词来代替。
严重程度：
严重程度 = 重要程度 * 发生频率
这里要注意的是，我们作为设计师，提出严重程度的判断仅仅是作为优先级参考，但是真正的优先级和排期还是需要产品经理来做。
问题描述：
即对体验问题的详细描述。
首先，对问题进行重新审查和校验，去掉非体验问题、重复问题、补充不完整的问题描述等，然后整理到一起，这就是整个产品存在的大大小小、各种各样的问题了。
然后，我们通过图表对数据进行二次加工，一般采用雷达图或柱状图。
示例 - 雷达图的使用方式
严格意义上说，这并不是标准的雷达图，只是使用了雷达图的图表背景。
外圈：上述表格中的「分类」
数值：上述表格中的「重要程度」
为每个模块/流程各制作一张表，然后将每个问题都以点的形式置于图中，哪个分类问题最多，哪个模块/流程问题最多？哪些问题较为严重亟待解决？一目了然。
设计的本质是为了更好的解决问题，了解业务是解决问题的基础，也是沟通顺畅的利器。但是想要成为一个业务专家，没有长时间的沉淀上是不太可能的，但是公司一般不会给很长的时间去学习业务，那我们该如何在短期内快速掌握业务知识呢？
在理解业务时遇到的最大挑战就是那些晦涩难懂的特殊名词，如 json 文件，API 等开发中特定的术语。
针对这个问题，在产品分析的过程中，我们可以同步建立一个专业名词库，来记录这些特殊名词，并将这些概念用自己的语言进行描述。这样，在了解产品的同时也对业务有了一定程度的了解。
对设计师而言，相比 C 端的各种炫酷效果，B 端设计很难做的出彩，设计的价值更多是隐形的价值，基本不存在会有人因为你把一个按钮做得好看夸你。从这个角度来说，确实成就感比较低。
但是，通过自己的设计让帮助用户更有效率地完成工作，这何尝不会带来满满的成就感？B 端产品一般是用户不得不使用的产品，作为设计师的我们更应该对自己所设计的产品有着敬畏之心。
最后，给大家分享我很喜欢的一段话，与大家共勉。
本次的分享到这里就结束了，希望可以对大家有帮助。由于文章字数较多，笔者几经修改，仍不免有疏漏错误之处，如发现错误，请读者于评论区或私信指出，不胜感激。
在快节奏的洪流中，保持设计的初心，做有灵魂的设计，我们下篇再见~
作者：靳凯杰ah
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
刷刷手机看看今天又发生了什么热点大事，已经成为现代人茶余饭后消遣时间的主要方式，而搜索热点区别于其他社区类产品，最大的优势是能够把大家关注的事件始末及相关知识服务快速聚合起来，帮助用户更全面的掌握信息。设计师作为连接用户与信息之间的纽带，在项目实践中也进行了系列的设计探索，除助力平台高效聚合呈现信息外，并以更丰富的设计层次诠释热点，帮助用户更便捷的获取所需。
我们先要去了解用户是如何消费热点内容的，基于用户情景认知链路分析用户在事件消费的链路，可以分为三个重要节点：1.热点环境的感知；2.热点事件的理解；3.事件观点的产生。
结合用户的消费路径，我们将设计逻辑框架拆分为三个层级：
1.氛围背景层：分层呈现热度氛围，辅助用户感知热点环境；
2.信息内容层：精细化拼装管理，帮助用户理解热点事件；
3.功能互动层：轻互动玩法设计，激发用户参与抒发事件观点。
从氛围表现层面，助力用户更快速的辨别事件的热度及重要程度。设计师结合搜索热点使用场景以及业务时效性配置诉求，归类了两种设计表现层次：1.日常热度氛围 2. 大事件热度氛围
1）第一个层次：日常热度氛围
主要应用于热点新闻场景，时效性要求高，同时事件热度也会在：“发酵--爆发--消退” 间实时变化，设计根据热度“强弱”程度需求，划分两档视觉展现阶梯，以自动化的方式展现，满足热度的实时变化需求，辅助用户感知当前事件热度。“低热氛围”弱标签设计用以展现上升/今日热点，“高热氛围”色彩背景通顶效果+上榜标签用以展现上榜热点。
如，“马斯克收购推特”，搜索热度持续上升，以第一阶梯-标签方式展示低热氛围；在 “马斯克收购推特” 的事件热度不断增长，成为热榜事件后，以第二阶梯 - 高热氛围自动匹配 ，通过背景及榜单标签的呈现，明确告知用户当前事件的火热程度。
2）第二个层次：大事件热度氛围
主要应用于热点大事件或运营活动场景，个性化展现要求高，同时事件关注度及重要程度也不同，设计根据事件的关注度及重要程度划分为两档阶梯，以人工配置的方式展现，超强的运营氛围，可以让用户充分感知当前事件的重要程度，“A级氛围”头部叠加场景元素设计用以展现大事件，“S级氛围”整页沉浸式视觉设计用以展现重大事件。
如，冬奥会，重大事件，选用第二阶梯 S级氛围，打造超强的运营大事件会场认知。
近几年我们不断的经历各类突发大事件，如：疫情/暴雨/名人逝世等等，每次突然发生的事件都让设计师措手不及，匆忙产出运营氛围设计方案紧急上线，保时效就很难保障质量，因此我们在想能不能总结事件类型提前储备设计，以备不时之需。
不同突发事件会牵动网友不同的情感情绪，比如河南暴雨，我们为受难同胞担心，为救助工作加油，为逝者哀悼；火箭发射成功，我们骄傲喝彩；名人结婚，我们送上温馨的祝福。不同事件带来不同的情感情绪，也要求设计师要用准确的视觉语言表达。
因此我们在前置设计时也充分考虑了事件情感因素，通过对近一年突发大事件的归类梳理，并推导不同细分场景下的用户情绪，通过情绪分类的方式，总结两种视觉设计表达形式：1.实景图合成效果满足严肃/庄重/权威场景情感需求；2.手绘效果满足积极/欢快/庆祝场景的情感需求。结合以上思路我们共储备6大类20个子分类场景的前置氛围+金刚位等运营物料设计，保障突发热点运营设计质效。
截至22年Q1，前置设计已在38个热点场景应用：
为满足用户不同事件场景下的信息需求，设计结合百度搜索：主要内容区（主要需求满足）+ 延展内容区（延展需求满足）的综合聚合能力，通过组件分区布局+精细化规则管理，为热点场景内容的高效拼装打好体验基础。
1）主要内容区
主要内容区，能够帮助用户快速了解事件的主题、时间及主要内容，结合热点事件长期的需求沉淀，设计将主要内容区又细分为主题区域及内容区域。主题区域可承载拼装事件主题、事件倒计时、会场分发导航等主题类组件；内容区域可承载拼装图文/视频/直播等事件主体内容分发组件。通过不同区域内组件拼装规则的制定，业务可以快速选择所需组件进行页面组织拼装，达成分场景个性化满足用户主需求的目标。
如：元宵晚会，热点主要内容区 以“ 晚会直播时间倒计时+ 各卫视晚会分会场导航+图文内容 ” 组件支撑起重大晚会预热期的事件主需求满足。
因为有设计拼装规则，不同大事件活动，各场景内容可个性化满足需求，交互布局设计上又可兼顾横向一致性。
2）延展内容区
延展内容区，能够帮助用户了解事件相关知识信息或提供事件相关服务。业务可根据事件场景需求，选择多个延展内容模板与主要内容区进行拼装，搭建完整页面以呈现不同热点事件内容。
如：俄乌战争-战事场景，脉络卡帮助用户快速了解事件进展 ；冬奥会-赛事场景，数据卡帮助可视化呈现赛事进展；博鳌亚洲论坛-会议场景，百科卡帮助用户科普相关名词知识。
通过氛围打造和内容组织，已经达成用户需求满足的目标，但到此截止，搜索结果的体验还是理智疏远单向的，搜索场景与用户、用户与用户间也无法产生对当前热点的讨论与态度表达。因此设计师对用户的互动行为认知习惯进行分析，并采取具体的设计策略逐步引导用户参与互动。
1）互动唤醒 - 吸引围观增强互动意愿
优化前的热搜结果页，用户的讨论内容都是隐藏在资讯落地页评论区内，需要点击进内容落地页内才能参与“围观”或“讨论”，除互动氛围已脱离当前场景外，也削弱了用户对此事件表态的参与积极性。
通过弹幕滚动+输入框组件组合外显的交互设计方式，将用户讨论外露，不仅丰富热点事件搜索场景的内容维度，同时基于从众心理，进一步刺激用户的参与欲望。弹幕结合事件类型配色来更好贴合热点事件整体环境氛围。
2）情绪抒发-轻互动玩法降低互动门槛
而投票表态+弹幕轻互动组合效果设计，能进一步降低用户交互心理门槛，让用户动一动手指就可以参与其中。在表态/投票抒发情感的同时也可以发弹幕聊聊对当前热点事件的看法，使用户互动情绪表达更充分。
3）惊喜反馈-强化视效打造记忆点
原有设计风格，无法在去世祭奠、颁发勋章等庄重严肃场景精准的表达视觉情感，无互动反馈状态仅有互动前后状态变化。
结合热点场景积极外放情绪及庄重内敛情绪，视觉主要从形/质两个维度进行优化升级，并增加互动反馈动效，同时运营可结合具体事件主题配置，综合提升互动惊喜效果，打造产品记忆点。
视觉层：通过更立体的形态和更丰富的层次质感，更精准的表达情感
动效反馈层：以主图形+辅助元素，通过符合场景氛围的动态效果设计，更充分的表达情感
运营主题配置：在日常反馈基础上，增加运营主题配置层级，为特定主题场景提供定制反馈效果
通过热点环境感知分层呈现、内容组件合理布局拼装满足等设计手段，助力搜索平台以更高效丰富的内容展现形态应对全年3万+热点大事件运营。会场拼装呈现系统的应用场景也在不断扩展，如营销活动、品牌造节等。设计不会止步于此，我们将基于用户需求不断探索深耕，为用户呈现更快速、准确、全面、有温度的搜索热点体验。
作者：百度MEUX
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
2022 年即将过半，疫情在家的我们重新花一些时间，回顾今年最引为人注目的一些设计趋势，有些已经变成现实，有些可能即将会发生。在过去的这十几年里，全国的互联网和移动互联网行业蓬勃发展，引发了 UX / UI 行业的火爆，无论是在设计技术方面还是在设计实践方面维持着快速发展状态。设计探索受到了前所未有的关注。创新也永不停止，正在向各个方向延伸——有的是昙花一现，有的是重塑想象，有的却循环往复。
下面我们将更详细地向你探讨一些 2022 年的设计趋势。
The Badass Project 捣蛋派计划
过去几年里，大字排版的趋势越来越明显，字体尺寸也在增加！接下来，字体更大且几乎没有图像的时尚 英雄形象 网页设计，将成为主流风格。
（英雄形象在网页设计中是一个特定的网页横幅，通常是一个包含与内容相关的大图像页眉）
设计师和用户都越来越习惯在登陆页面前面和中心位置使用超大文字。无论是怪诞的无衬线字体还是现代奢华的衬线字体——这一趋势就是在于越大越好。通过精心选择的字体，网站可以做出比以往更大胆的宣传，以吸引受众的注意力并有效地信息传达。
这些字体选择通过 引人注目的动画进一步生动起来。设计师正在实现通过鼠标移动或向下滚动页面使排版移动并与用户产生互动的创造性效果。以粗体、动画和交互式排版为核心，许多网站也就不使用任何背景图像，让外观变得干净且精致。
MAFF
所以一定要试试这种趋势：把文本尺寸放大，可以将其放置在一些图像上，制作大尺寸的动态标题，让用户从中获得乐趣。最重要的是，要勇于呈现大胆强烈视觉效果，从而可以立即吸引用户的注意力。
案例：Medium 官网——https://medium.com/
Shakib - Sneakerbumb
在经历了充满不确定性和阴郁的两年，我们学会了寻找和珍惜任何享受幸福的机会。我们大量独处时光的花在了数字空间上，这一现象也不例外。
La puce à l’oreille
为了回应这一需求，设计师从 80 年代和 90 年代获得了巨大的灵感；将色彩丰富、质感丰富、复古风格的主题与现代气息结合起来，打造真实的外观。鲜艳的色彩搭配柔和蜡笔肌理、古怪的排版、纹理丰富的背景、跨页面网格的布局、非传统的图像和古怪的插图，都可能会在接下来的一年吸引你的注意力。
Kristen Ryan for MakeReign
随着这一切的发生，我们甚至可以说，在过去几年里，每个人都学会了赋予自己一些自由的生活态度。这为我们提供了更多的实验空间，当然也为设计和其他领域带来了让人愉快的成果。这就是说，设计师们觉得有必要从简单和实用的用户体验转向有趣、搞笑甚至愚蠢的交互。出人意料的是，让别人微笑可能会是你的网站或 app 令人印象深刻的一种方式。
Blumenkopf
野兽派设计从 1950 年代的野兽派建筑运动中汲取灵感，延用其不修边幅、毛糙粗狂的外观形式，和故意做出的丑陋效果。就像在建筑中一样，野蛮主义在网站中揭露和解构(甚至庆祝)这种媒介的底层结构和重要原则。原始、大胆和反动的本性使野兽派设计一直处于数字空间的边缘，因为原始是互联网的全部。然而，近年来，野兽派一直在缓慢而稳定地复苏，现在被一些人称为新野兽派。
Caroselling
随着互联网上干净、传统的网站越来越多，个人网站变得难以脱颖而出。转向野兽派，提供真诚、原始但独特的视觉体验，可能正是提升你下一个网站的方式。
无网格布局，强烈的调色板，重叠的元素，拥挤和几乎混乱的设计只是你的野兽主义工具包的一部分。将它们与等宽和奇怪大小的排版结合起来，缺乏或极少的导航，这相当于没有额外的“空间”或子页面的“开放式版面”，你会得到一个引人注目的粗野派外观。
Work with us
案例：阿里云设计官网——Alibaba Cloud Design - Not Design Just Future
当然，还有更多，但野兽派网页设计的定义规则是没有规则；它反对既定的规则和惯例。更重要的是，你需要用更强烈的意义价值和意图来将你的野兽派杰作与另一个设计糟糕的网站区分开来。
Messenger
Figma、Todoist、Slack和 Messenger 等网站和移动应用程序都把时间和精力集中在桌面客户端版本。
Todoist
越来越多的应用程序似乎也在效仿，因为研究表明，这样用户会感到 更舒适、更安全。用户希望自己的应用程序远离互联网浏览器，远离所有打开的标签，回到指定的应用程序窗口，让人感觉更宽敞、更专注。在使用这些应用程序时，不需要处理数分散注意力的标签，这无疑是一种进步！此外，将通知直接发送到桌面，我们的通知管理也必然得到改善。
Figma
为阿拉伯语国家的谷歌搜索页面布局
用户研究团队利用 人类心理学 领域的洞察，以及 可用性测试，已经能够塑造界面，为用户提供最大的满意度和愉快的体验感受。几十年来，这一直是用户体验设计的核心。
随着技术的快速进步，我们看到数字产品体验的保真度有了空前的提高。这一发展也为不同用户群体之间的细微差异提供了新的理解。年龄、文化、地理位置、日常习惯、社会结构（以及其他因素）的差异可能会导致人们对什么构成令人满意用户体验的期望存在显著的差异。因此，这些体验可能需要类似的设计，但肯定不是相同的设计方法。
随着技术和研究方法的到位，我们开始看到一款产品的多种变体同时推出，以满足不同用户的需求。随着许多大品牌都在努力扩大他们的用户群体，创造本地化的产品体验可能会成为一种大趋势——如果不是标准的话。
NhuSW- Everyfit — Fitness for Everyone
包容性不仅是一种趋势，也是一种运作模式；人类生存和共存是一个不可否认的重要方面。在日益全球化的复杂世界中，我们不断意识到自己与其他个人或社群之间的差异。以同理心驾驭这些差异是我们的责任，并努力将所有文化、性别、性别、种族、能力和残疾都有意义地适当地纳入全球社会。
Spotify
随着数字空间引领着世界的全球化，它也毫无疑问地成为我们包容性努力的前沿。人们总是希望品牌和公司采用更具 包容性的叙述 和语言，并向包容性的平台、产品和服务 迈进。他们被鼓励在图像、语言和视觉语言中推动多样化的表现，这样做不仅仅是为了营销收益，而是为了更大的意义和价值。
这些是我们在 2022 年会看到的趋势和现象。记住，它们是为了提醒我们当前的总体设计趋势。可以使用它们来支持和授权您的设计决策，但不要害怕挑战它们，或用它们为人们创造更多积极有效的体验。
原文标题：UI/UX Design Trends of 2022
文章来源：Codeart
原创作者：Taras Bakusevych & Maja Mitrovikj
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
本文主要介绍等距栅格，旨在为有需要的同学解析栅格，从概念、结构和设计上更有效、自信地解决栅格问题，其实主要还是自己对栅格体系的查缺补漏。大家可以对照目录跳着阅读。
事实上，绝大多数的设计师都知道栅格很重要，简单点就是等分运用在内容层。当我们仔细研究栅格相关原理时，只要不嫌麻烦，就会发现在栅格系统下能更快解决设计问题，并让设计更具功能性、逻辑性和视觉美感。
栅格与网格的本质其实是相同的，实现有组织的设计最简单方法之一就是应用网格系统，约束性地为你提供了一个非常基本的设计框架，这是一种久经考验的技术，最初运用在印刷版式中。网格与栅格英文都以“Grid”来表示。但一般我们更愿意在平面设计中更多的称为 “网格”，会存在上下或倾斜，在网页端或移动端中更多的称为为“栅格”。
常见网格系统有三种：直接分割，等距分割，数学分割。本文主要介绍等距栅格，网页中的网格是指使用垂直和水平(较少)等距辅助线对布局进行的划分，它形成了用户界面的基本结构或框架。
平面设计一般用到的是固定的纸张规格，宽度和高度都是固定的，网格会存在上下或倾斜的视图；在界面中栅格宽度跟随不同设备，高度由内容多少来决定，是上下视图。
界面栅格系统是从平面网格系统中发展而来，以依据一定的规律、合理设置基准线来指导和规范界面中的如文本、图像、按钮和其他元素，保证页面的每个区域能够稳健地排布起来。栅格系统的使用，让界面信息呈现更美观易读、更具可用性，对于前端来说，网页也将更加灵活与规范。
将栅格视为一种秩序系统来进行使用，是设计师某种特定的精神和态度的表达，它体现了设计师是以一种结构性、预见性的方式来进行构思和设计。同时，这也是一种职业信仰的体现，设计作品应该是易懂的、客观的、功能性的和具有数学逻辑美感的。
用结构化、系统化的栅格手段进行设计，对设计是具有极为重要的意义的。使用栅格系统就意味着设计遵循普遍与合理。系统化和清晰化、集中精力看透关键问题、用客观取代主观、理性地去看待设计过程。
产品设计中，参与设计的人员越多，用户设备越多，屏幕越多，设计师就越需创建一套栅格系统来组织内容，使设计内容与细节能适应更多场景。合理的栅格系统可以通过调整布局满足产品各设备尺寸的需求。
有序可依，提升协同效率
对于设计师与团队：栅格系统定义了一套底层的、统一的测量单位，当设计团队内对此达成共识时，可以避免因屏幕适配、比例换算产生的像素偏移，适配多种屏幕，提升精致细腻程度，同时保证了设计稿件中元素属性的一致性和规范化，并有效降低设计师的决策成本，提高不同设计师之间的协同效率。同时避免了设计师与前端工程师在细节上的反复沟通确认，提升了整个开发效率。
布局规律，减少认知成本
对于用户：运用网格系统能够让设计更有秩序和节奏感，规避了不同设计师理解不同造成产出差异的问题，如页面节奏，空白等。在保持与原先展示内容基本一致的情况下，页面信息结构更加清晰，提高阅读效率，减少认知成本，提供一致性体验。
栅格使用列在水平方向上拆分页面，以有组织的方式对元素进行布局，并模块化设计多个页面和组件。同时栅格还定义了一组固定的测量单位，指示每个设计元素遵守的尺寸，间距和对齐方式。
最小单元
网格的基本构成就是单元格，由格子组成网。间距都可以用最小单元来增加或者减小，最小单元格是所有设计元素（从排版到列，框，图标和插图）的几何基础，它为所有创造性的决策提供了结构和指导。所以栅格系统的重要一步就是需要先定义好栅格的原子单元大小，我们以最小单元去定义网格系统。
最小单位推荐 8px
目前 web 端最普适易用最小单位的是 8px，我们利用 8px 建立网格，8 的倍数组成了列、行、框的尺寸以及它们的边距和填充，使用 8 的倍数来定义模块的间距与元素的尺寸。
当我们熟悉最小的栅格单位 8px 以后，能有力的减少决策时间。整个设计的元素大小，尤其是间距可以快捷的在脑海中反应出来，8、16、24、32、40、48、56、64、72、80、88、96、192 等，这里都是 8 的倍数或能被 8 整除。让设计师带着工程实现的思维去考虑页面布局，设计侧和工程侧对页面一致性的解读，能够有效降低设计到实现的转化成本，提高开发效率。也要注意间距不能无脑套 8 的倍数，优先用 8，当跨度太大也可以使用 4 和 12。
那为什么不选择 4，6 或 10？
注意的是最小单位应由实际工作来决定，没有绝对的最小单位数值。在适用性方面，4、6、8、10 这四个数值都基本可以满足。
当使用 4px 时，页面就会被分割的非常细碎，当 8 不够用的时候，就要使用 4 了。
最小单元格的数值选择需要从两方面考虑：
屏幕尺寸和分辨率种类有增无减。使得设计师对 “维护适配性” 的难度越来越大，设计稿导出会有@0.5、@0.75、@1、@1.5、@2、@3 倍多种需求，在 1@倍设计稿，奇数（比如 5px）就会出现半像素偏移。而 6 除以 2 得 3，3 就是奇数了，10 除以 2 的 5，6 和 10 不能被 2 除尽。
使用偶数 8px 可以轻松一致地缩放各种倍数而不失真，大多数流行的屏幕尺寸都可以被 8 整除，足够普适，以 8px 为增量进行缩放可提供大量选项，所以推荐 8px。
列 + 列间距 + 大边距
栅格系统由 3 个部分组成：列、列间距、左右大边距。栅格系统是由列和列间距交替分布形成的，列是栅格的数量单位，虚拟的垂直块，用于对齐内容，我们以百分比或固定值定义列宽。竖直方向根据页面内容是可以无限延伸，所以栅格系统在竖直方向的栅格可以不体现出来，设计时只要在水平方向保持规律变化就可以了。
通常设定栅格数量说的就是列的数量，如 12 栅格就有 12 列、24 栅格就有 24 个列。列间距把控页面留白，数值越大，页面留白越多，视觉效果越松散；反之，页面越紧凑，画片分割的越碎。
大边距就是设计内容区以外的空间。我们在设计中一般将大边距宽度定义为固定值，该值决定每个设计的最小呼吸空间，灵活的边距占据了由列，列间距组成的网格后的剩余空间。左右大边距是计算在栅格的总宽之内的，删格系统的宽度就是列、列边距、大边距之和。
也有弹性大边距，会根据不同的屏幕尺寸而变化，就是页面边距可以随着屏幕尺寸的变化而变化。页面边距在移动设备上通常是 12px 到 40px 之间，在平板设备和桌面设备页面边距变化就相对多了。
容器
我们按照页面结构从组件 – 容器 – 区块 – 页面 – 场景进行依次拼装成最终形成产品设计方案。容器集合了下级组件，也可以是多个复杂元素的集合，文字、图片、按钮。如登录区块是由多个标签、输入框、按钮组成。容器是成组的设计元素，形成了独立的内容或功能盒子。区块嵌套容器，由区块组成了页面内容。
栅格规范的是容器间比例，而非具体宽度。容器大小收到栅格系统的限制，栅格系统可以根据需求被 2 等分、3 等分、4 等分、6 等分、12 等分，具体采用哪种比例的组合需要根据需求来定。栅格系统 / 设备分辨率大小在变换的同时会带动区块大小的变化，从而使容器发生变化，如元素尺寸变化，文字换行等。
如下图，共有 32 个容器。对于紧密相关的内容，请考虑组成区块。页面被分割的越碎时，设计中越难把控。
960 栅格系统
这是一个比较单纯的框架。从 1990 年代后期开始就基于表格的布局开始使用的栅格系统 960 Grid System。与早期计算机相比，虽然今天的屏幕分辨率达到了很高的尺寸，但使用 960 像素的宽度依旧可以确保在许多屏幕上能够正确显示。
960 Grid System，是由 Nathan Smith 开发的 CSS 框架，因为早期的电脑荧幕宽度约为 1024，扣除浏览器的卷轴及边框，为 960px，960 Grid System 有 12 栏位、16 栏位版本，960 正是意味着，12 能被 3、4、6 整除，能建立 3 栏、4 栏、6 栏的版面配置，网页的使用也比较灵活。网页版面可以轻松配置，合并，也不会有畸零数，非常适合排版。
960 Grid System 是使用固定宽度 960px，置中对齐画面的方式呈现在网页上，去除左右两边各 10px 的边距空间，留下中间 940 px 的设计内容区，以 20px 作为槽。
而超出 960 的部分的设计元素，就使用定宽设计。
Bootstrap 网页框架
今天市面上看见的响应式网站，多数使用了一些开源的代码或者框架。而应用最广泛的，就数 Bootstrap 了。
Bootstrap 是 Twitter 推出的一套强大网页框架，是全球最受欢迎的前端开源工具库，它支持 Sass 变量和 mixin、响应式栅格系统、自带大量组件和众多强大的 JavaScript 插件，也提供了快速建立响应式网页的功能。已经更新到 V5.0.1 版本了 Bootstrap 中的栅格系统是一套响应式、移动设备优先的瀑布流式栅格系统。市面上很多前端框架会对 Bootstrap 进行补充或基于 Bootstrap 开发。
Bootstrap 提供的栅格系统，也是一样将内容区分 12 等分。
它将系统分为 12 列，当然也可以通过变量来改变列数和列宽，水槽宽度，屏幕浮动宽度；其实设置屏幕浮动宽度就是我们看到的屏幕自适应，就是根据屏幕宽度来选择显示参数。Bootstrap 中的栅格流只能作为大的布局定义，那么针对最小单位是该用 8、10、15 还是多少也是需要根据需求去做分析。
12 列结构可以进一步分解 4 等分，3 等分大小的模块。
栅格设计的第一步就是创建画布，对于不同设计的项目，宽度设定是不同的。需要注意第一屏重点内容全部显示，浏览器和 Windows 底栏都会占用屏幕的高度空间，第一屏缩减默认高度 -100px (可调整)。
屏幕宽度
设计师有存在从最大的屏幕 1920 着手设计界面的习惯，最后考虑最小的屏幕上的显示效果。这意味着绝大多数的设计都是从大尺寸开始设计的，通常大尺寸的内容和功能更全面。从小往大适配容易，但是从大往小适配问题就特别多。以 1920px 宽设计的界面在面向小尺寸屏幕的时候多数都很不友好，甚至到了部分页面无法正常预览和使用的地步。所以优先设计最小适配屏幕，然后给出适配方案进行调试。
C 端设计的屏幕宽度是找全网平均数值，而 B 端的目标受众更细分、更具体。类似政府、学校、企业等等，计算机都是统一购买的，这种情况并不需要你去统计全网和其它渠道数据，只要了解具体受众使用什么分辨率即可，以它作为主要输出的画布宽度。如果 B 端设计受众屏幕宽度实在不清楚，可以参考蚂蚁中台设计团队统一的画板尺寸为 1440。
是否定宽(版心)
如果是定宽的设计，便不需要考虑自适应与响应式适配屏幕宽度。版心是源用平面上的说法。根据实际情况，定宽设计如果以 1024 的屏幕为内容主体，1366、1440、1536、1600、1920 的屏幕适配 1024 的内容主体，多余的空间为左右大边距，这种方式设计上容易输出，适配方式更加高效，随之就是可用性较低，对于使用高分辨的用户来说，布局会留下很大的空白。如知乎：
还记得第一次做网页练习的时候我使用的定宽为 1000px。
屏幕终端的宽度不等于我们要栅格的宽度。我们在确定栅格区域设计前，先来熟悉一下 web 产品界面的基础模块和分层逻辑，以常见的 B 端布局为例。
根据模块自身属性及功能定义，常见的模块有九类，分别为顶部导航模块、左侧导航模块、页眉模块、页脚模块、主内容模块、左内容模块、右内容模块、抽屉模块、弹窗模块。
全局控制层为常置的功能底层，是提供稳定性和可预测性、必不可少的层级，具体有顶部导航模块、左侧导航模块等；内容层可分为常置展示层，具体有主内容模块、左右内容模块或上下模块等；临时层为动态出现的功能顶层，始终叠加在基础层及内容层上方，是链接上下体验流程的模块，具体有抽屉模块、弹窗浮层模块。
梳理了相关模块所组合的栅格布局。Web 端有三种基础布局和多种扩展布局。一般来说，栅格区域就是指内容层。前面我们提到了定宽(版心)，版心和内容层还是有差别的，版心+两端页边距=内容区。
那其他模块能用栅格吗？当然可以，有需要就用，不过需要注意使用效率。
首先，创建一个低保真或高保真的原型，设计一些基本元素和交互流程之后，考虑最优的列数。列间距的区域不可以放置内容，我们一般会给列间距设定一个定值来确定列宽大小，这个列间距也是模块间的间距。
栅格数量
常见的栅格系统通常被划分为 12 栅格或 24 栅格。划分的格子越多，承载的内容越精细。也有较少项目会根据实际情况也会划分成 16 栅格、20 栅格，移动设备屏幕尺寸小于 PC 屏幕，想要有更灵活发挥空间，就必须采用列宽较小的栅格。
12 栅格
12 栅格系统在流行的前端开发开源工具库 Bootstrap 与 Foundation 中广泛使用，一些商业网站、门户网站通常划分成 12 栅格，适用于业务信息分组较少，单个容器内信息体积较大的中后台页面设计。根据业务场景可以很容易的将 12 栅格区域划分成 2 等分、3 等分、4 等分、6 等分，以及根据等分容器组合的多种不等分场景，组合也是栅格作为一个界面辅助系统非常方便的原因。
24 栅格
24 栅格系统适用于业务信息量大、信息分组较多、单个容器内信息体积较小，场景复杂的页面设计。相对 12 栅格系统，24 栅格系统变化更加灵活，更适合内容比较多样复杂的场景。我们常见的 B 端 web 设计一般选用 24 栅格，栅格系统大小就是 24 列+23 列间距+2 大边距。
Ant 采用了 24 列、23 列间隔的栅格系统。其中间隔数值是固定的，内容区域减去 23 列间隔后，剩下的部分等分成 24 列。
注意：
其内容模块必须位于若干列上，可以任意分割，比如 6×2，3×4，4×3，下面是不同分割方式设计的信息模块。
只要父级模块对齐栅格，子级元素可以不对齐列，同时子模块也可以有自己的栅格系统。
列宽无法永远精准整除，而相差的像素值往往是无法被用户以肉眼察觉的，栅格不是为了每一像素的精确，而是为了保证浏览效果的秩序、协调与统一。
确定列间距与大边距
列间距与大边距选择 8(最小单位)的倍数，网格将更加一致。可以将间距值把常用的数值整理成号码表，间距复用化：小= 8px，中= 16px，大= 24px，x 大= 32px 等等…这样一来，保持一致性更加容易，更加合乎逻辑，并且开发人员也会高兴，因为他们可以根据屏幕元素之间的关系安全地假定间距。
注意：
列间距的数值越大，页面留白间隙越多
列间距的区域不可以放置内容模块，内容区从列间距开始到列间距结束
非常规设计时不需要栅格系统，根据设计场景可自定义。
栅格系统适配过程中需要考虑三个原则:等比缩放、弹性控件、文字流自适应。随着设备多样化，通用的适配方式是自适应与响应式布局，随之就是栅格系统的变化。我们先聊下断点。
断点，用浏览器打开一个网站，检查元素，右上角会显示视窗当前的分辨率，慢慢缩小视窗的宽度，找到页面布局的变化点，就是我们上面说到的断点或者次断点。
断点设计主要考虑基础的 3 端，一般大于等于 1440 为 web 布局，1439-500 为平板布局，小于 500 为手机布局。每经过一个断点，可以改变栅格大小（比如 16 栅格改为 8 栅格），固定改为拉伸，样式（文字、颜色）。制作精良的话可以设计多个断点，如 480、600、840、960、1280、1440 和 1600px。
固定栅格
固定网格的最大特征是在网页收缩过程中，经过一个断点就会自动减少最边缘元素，其他元素基本保持不变。通过在嵌入式块中排列图块，在工具栏中放置图标等，可以用固定的框来形成网格。栅格列数随着浏览器宽度的减少而减少，边缘图块自动换行，或者有时会溢出滚动条。
首先通过最小单位选择一个基本尺寸，然后以基本尺寸的倍数构建每个盒子框，就会出现一个个网格。
流动栅格
流动栅格是元素随着设备尺寸变化而比例变化，当到屏幕大小变化的断点时，列可以增长或收缩以适应可用空间，边缘元素被减掉。但并不是每一个断点都需要去减少元素，可以适当的按照元素的比例进行大小调整。流动布局兼容性高，能更好的适配多分辨率。
流体栅格非常适合编辑内容，仪表板、图像、视频、数据可视化等。对用户而言，缩放事物的大小比缩放可见事物的数量更为有用。
在每个断点处，列数是固定的，在断点范围之间，实际列宽是栅格区域百分比缩放，而不是最小单位倍数。内容区域是动态运动，就需要运用栅格系统。
混合栅格
内容区域流动和固定栅格组合也是常见的做法，混合栅格既有流动的宽度，也有固定宽度。混合布局对用户十分友好，如下图左侧是固定栅格，右侧是流动栅格。
在初期，网页使用的是绝对静态布局为主。静态布局中如果用户的屏幕大于或小于设计预期，结果会出现的滚动条，过长的行以及对空间的不良使用。后随技术发展，为了兼容各种浏览器，出现了针对各设备适配的解决方案，自适应布局。
后来移动互联网爆发，html5 标准发布，与移动设备、平板电脑和智能设备(游戏机)等需要提供了更丰富的功能，用户希望能够使用各种设备访问任何网站，结合自适应的思想，出现了响应式布局的概念——2010 年由 Ethan Marcotte 提出。
自适应
自适应布局是网页内容根据设备的不同而进行适应，来判断当前访问的设备是 PC 端、平板还是手机，为不同终端分别提供独立的前端代码。自适应设计可以更好地适应用户在现场的各种需求，缺点是成本较高。
自适应设计即创建多个布局，每个静态布局对应一个屏幕分辨率范围。比如你对自适应网站的窗口大小进行调整，每经过一个断点就可以得到不同的布局（页面元素位置发生改变），但在每个布局中，没有经过断点时页面元素不随窗口大小的调整发生变化。每经过一个断点，布局和位置是可改变的，也有特殊，如两个断点间等比缩放，可以保留用户在多个设备间的操作习惯。
自适应设计，变化没必要过于复杂，保留必要的功能入口，不必要的可以隐藏给不同设备切换不同的样式，在同一设备下(断点范围下)实际还是固定布局。
响应式
响应式是通过一套代码，无缝匹配符合电脑、平板、手机效果的前端技术，开发成本更低，高适应性；设计成本更低，一套设计应对多端，最大化提升用户的操作体验；响应式不提供自适应性那么多的控制，多端同步生效，减少运营成本，保障业务效率。
一个典型的响应式布局，通过改变浏览器的宽度就会发生响应变化，而不是像自适应经过设备断点时内容才发生改变。响应式布局中会出现诸多差异较小的状态，同样让响应式布局更加的难以测试和预测。
响应式也存在断点，是网页在收缩的过程中的最小范围。当网页到达这个范围以后，网页内部的元素就要进行相应的变化，用来适应屏幕的变化。
响应式设计的前提有两点：1，页面布局具有规律性，元素宽高可用百分比代替固定数值；2，网页图片必须是可伸缩的。这正是栅格系统本身就具有的典型特点，所以利用栅格系统进行响应式是顺理成章和高效快捷。
响应式网页测试工具：我有反应吗？和 designmodo
总结一下：
自适应布局是内容根据终端不同进行适应，响应式布局是网页的布局针对屏幕大小进行响应。响应式布局等于流动栅格，而自适应布局使用固定断点来进行多个布局。 自适应布局给了我们更多设计的空间，因为只用考虑几种不同的状态；而在响应式布局中就会出现上百种不同的状态，虽然绝大部分差异较小。
自适应与响应式如何选择用哪个呢？
页面功能不多，用户交互少，不需要经常升级，响应式设计从运营的难易和维护的便利性考虑会更好，如逻辑简单并且内容大致相同的官网和展示页面；页面个性化多功能方面考虑，自适应设计更合适，用户体验更好，如功能复杂、用户交互频繁的网站。
全平台适配
除此之外，随着移动设备的生产力逐步加强，手机、折叠屏、平板、电脑之间的界限变得模糊，端与端的差距也在缩小。苹果推出 iPadOS，让移动端的便捷和桌面端的超强生产力进一步融合。而从应用的开发而言 Electron、Flutter 等跨系统框架层出不穷，开发者也在不断尝试在不同平台上用一套代码提供同一套服务，减少系统隔阂所带来的维护成本。
尽管全平台系统设计的概念还不成熟，但我们可以看到打造流畅的全平台体验的必要性。这也许会成为下一代应用的基础规则，正如当初的响应式设计。
figma 有三种不同形式的栅格可供选择：统一网格，列和行。支持单个画板栅格系统的使用和隐藏。
嵌套栅格
与其他工具不同，figma 不会在内容层只局限一个栅格，可以建立多层栅格嵌套。可以利用这一点，在盒子内部设计时，再用栅格用作视觉辅助，可以通过颜色和不透明度来区分不同栅格。
figma 可以通过相对调整画布大小，同步拉伸栅格系统。
内容自适应
当我们拖动窗口的宽度，模块会发生自动布局。定义下级元素针对父模块的响应，做到模块变化的同时下级元素的显示也是合理的。比如相对内容左右间距一致、对齐方向一致、尺寸固定等设置。这就是 Sketch/Figma/XD 中的自适应功能。
其实在设计稿时，使用自适应功能频率不高，不是每个区块都需要自适应的。
固定和拉伸混合使用，在内容自适应框架中，可以将一些元素设置为固定，将一些元素设置为填充容器并与固定和拉伸形式相结合使用。
同时可以修改图层透明度为 0，相当于占位，可以占位搭配组件。
共享样式
在创建栅格系统时，可能需要对不同设备尺寸或其他常见用例上的布局进行不同的更改。为了更轻松地将这些栅格应用于框架，文件和项目，可以将其中的几个合并为一个栅格样式(相当于组件)，然后可以从团队库中共享该样式或者自己复用，简单快捷。
同样有三种栅格可供选择，栅格系统统一使用和隐藏。Sketch 里自适应功能不能隐藏某对象占位，而 figma 可以，当位置隐藏后，布局就会进行调整。
sketch 使用栅格设计需先设置一个总宽度尺寸，点击左下角默认设置还可以将自定义的栅格系统设置为默认，方便以后重复调用，但 sketch 只能储存一组栅格系统的数值。
sketch 怎么以最小单位进行移动？
可以在首选项设置最小单位如 8px，按 shift+方向键就能以最小单位进行调整。
这个网站，输入版心和分割数，自动生成栅格方案。
在实际设计过程中，栅格的使用会伴随着限制条件。我们应当明白，栅格只是为设计师提供便捷的辅助工具，而不是限制设计师的工具。
不过从栅格这个工具来说，完全的自由反而是降低效率。如果能够给出一定的限制，反而会使得我们的设计效率提升。我们不必关心每个区域盒子具体值是多少，只需保证它们存在正确的关系。栅格系统是对界面元素进行横向排布时需要遵循的模式，不适用于类似图标与文字间隔的小型元素安排，而是用于大型区块间距的安排。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
决策疲劳在现今互联网深度发展的时代似乎非常常见，面对眼花缭乱的APP页面，我们通常会因为需要做出过多决策而烦躁。那么产品设计者应该如何减少决策疲劳现象，给予用户更好的体验。本文围绕解决用户决策疲劳展开了详细讲述，推荐对此感兴趣的伙伴阅读。
决策疲劳是用户体验圈一个路人皆知的词汇，用于描述人们在某个时期内做出过多决策而导致厌烦的情况。研究表明，它主要发生在人类的认知能力在单位时间内随着时间的延长而减少时。这就是为什么学习、钻研问题，是一件非公众都能做好的少数事件。
在产品设计中，我们要坚持减少用户需要做出决策数量的基本原则。保证用户使用产品来完成一项任务，能够越顺利、越直接。个人在特定时期内被要求做出的决定越多，即使这些决定是微不足道的（比如选择播放那个节目），他们的决策质量也会越低。
当你感到疲倦时，这会显著地影响你的决策能力，而 设计师在为用户设计界面时必须了解到疲劳可能对用户的影响。这个话题很有趣，因为人们在使用你的产品时可能会遇到的认知过载的原因有很多。
本文重点是介绍在你进行下一个 产品项目时减少认知过载的六种方法。
作为用户，每天我们拥有的选择题都在呈指数增长。互联网让我们可以在瞬间访问世界上的内容。如此多的选择会使我们思维迟钝，降低我们的满意度，并可能导致我们对体验感到沮丧而不是变得更好。
当给用户太多选择时，他们往往会感到困惑和迷茫。一个产品可以拥有世界上所有的功能，但是当界面因为选择过多而过于复杂时，它最终给到用户的体验一定很差。《人格与社会心理学杂志》的一项研究表明，当我们有太多选择时，往往会导致决策失误和情绪沮丧。
来自哈佛商业评论的模型
在追求最大化满足商业化可能的产品设计中，老板可能会要求在其产品中包含过多或过少的功能。通过使用哈佛商业评论提供的模型，横轴为功能数量，三个点依次为用户复购最大化、用户终生价值最大化、用户初次购买销售最大化，公司能够根据他们想要的结果找到适合他们的功能数量最佳点。
研究表明，人们更有可能购买提供了有限数量的商品。在这种情况下，他们也会对自己的选择更满意，而不是从购买前的犹豫到购买后的忐忑，从而产生更大的满足感。
关键是很多产品为用户创造了太多的选择，这可能会造成浪费并适得其反。用户可能会浪费时间尝试点击所有可能的产品，而不是按照预期进行实际购买。
在用户体验世界中，关于使用多少次点击以及人脑一次可以接收多少信息，存在许多相关的说法。但最重要的是，产品设计师需要在简单性和功能性之间取得平衡，这样他们就不会要求用户做太多的操作或过多考虑用户的需求遗漏了什么。
最容易被误解的理论之一是乔治米勒的“神奇数字 7”。有人说产品设计应该只有七个菜单选项卡或下拉列表中的七个项目。
这是个谬误，虽然我在某种程度上同意这种观点，因为坚持这样的限制似乎更自然，但我们也必须考虑信息是如何随着社会和我们的大脑发生变化的。当前的互联网会通过网站和大屏手机向我们展示数据，而不是早年的4.0英寸的小屏手机，用户可以轻松地一次看到他们的所有选项，并不是非要强制通过数字7的限制让用户一块很大的屏幕上来回滚动。
同时现在也有一些研究表明，人们有可能喜欢有多种选择的菜单。我们拥有的选项越多越好，因为用户不必花时间深入查找相关信息。
比如主页上最多包含 几十个类别链接的淘宝列表）比仅提供有限选项（如没有子类别的类别）的网站更有用。但这里要强调的是需要考虑实际的用户场景，电商平台的属性导致了要为消费者提供更多的选择，而类似工具产品，尤其是垂直工具产品，在设计选项数量时一定要谨慎。
还有另一个站不住脚的理论：从业者普遍接受但完全不靠谱的“三击规则”，或者更加扯淡的“两击规则”。用户的满意度和事件完成率其实并不一定受几次点击影响，比方说付费流程，缺少必要的流程硬按点击次数把流程缩短，导致用户错误付费而产生的用户体验变差几乎是不可逆的。
比菜单选项卡或下拉列表的数量更重要的是视觉体验。视觉布局可以更轻松地扫描和记住每个选项。根据信息搜索理论，信息线索的持续感知对你的用户体验很重要。
人们在日常生活中要做出很多选择，而太多的选择可能会让人不知所措。当我们因产品特性不得不呈现更多的信息时，重要的是信息组织方式。
你可以去尝试减少选择的数量，但最重要的是你的信息结构。如果你的信息没有组织好，或者给到用户的决策过程中涉及的步骤过多，用户就不会费心去寻找他们想要的东西，因为他们觉得这会花费太长时间或可能没必要去更更努力地探索。
为了在产品上让用户的决策中有更好的转化，我建议去掉任何不必要的东西，例如无关的标签和链接，这些标签和链接会分散用户的注意力，使其无法找到他们正在寻找的东西。同时综合产品特性去考虑实际该有的流程数量和必要选项，平衡简单性和功能性的关系。
现实中我们都会犯错。它可能发生在我们所有人身上！但是，如果用户犯了错误，优秀的产品设计师应该怎么做？
答案是：让用户轻松回到起点。
通过让用户走上正轨，你更有可能留住他们作为用户，而不是导致他们离开你的网站或应用程序。
下面是我在设计用户流程时的一些最佳实践：
导航是任何网站或应用程序的核心。这就是让你的设计能够让每个人都易于访问和使用的原因。设计出到适合你产品的导航系统，对用户体验至关重要。
导航的设计应该直观且易于使用。用户应该始终知道它在哪里，它的意义，以及点击它会去哪。
一个好方法是通过颜色为用户对操作区域进行导航：比如当进行切换、更改等动作时配备不同的颜色，并用文案清楚地说明每个菜单项下是什么功能。
这些小动作有助于使浏览您的网站或应用程序成为一种畅快的体验。
一个例子是 Instapage 登陆页面。如果标题没有箭头，很难看出下方有更多内容：
在设计新界面时，必须尽可能降低受众的学习成本。一个方法是利用他们已经熟悉的模式和习惯。但是你怎么知道这些约定是什么？
下面是三个常见的 设计惯例，这些惯例可以让你的用户在与产品内交互时感觉更熟悉，这有助于减少他们的学习成本，并让他们更快地开始学习你试图传达给他们的任何内容。
简洁的配色方案要远比复杂华丽的配色更有效果。人眼会被颜色所吸引，因此如果你在整个界面中使用简洁的配色方案，人们会更容易找到自己想要的信息而不是被颜色乱神。
不仅要遵循常见的用户体验规则，而且要在一个产品里不停的重复，不要轻易作新颖的尝试，前辈们大多已经帮你尝试过了。
这样的意义在于：
人们使用你的产品感觉更轻松，因为这个产品没什么复杂的新东西（降低了学习成本）。
一个例子是，目前无论你在那个浏览器查看哪个页面，你的菜单栏都会保持在站点的顶部或底部。这会让你产生导航认知，因为它在帮助你决定下一步需要采取什么行动时减轻了学习成本。
图标是在你在表示操作对象是什么的好方法，它们易于理解且具有普遍可识别性，因此非常适合作为交互介质。使用在生活中已经被广泛理解的图标和符号有助于让你的产品内容不会感觉难以理解和过于复杂。
图标一定要广为人知——例如房子。这个图标被普遍认为是“主页”或开始屏幕的图标。垃圾桶也是一样——这个图标被认定为一个垃圾桶图标来删除一个元素。
我们都知道应该以用户为中心进行设计，而不是你自己，但其实不是那么容易。当你处于设计过程中试图弄清楚你的用户需要什么或他们会如何反应时，其实往往会按照自己的喜好走偏。
一个方法是你可以使用一些简单的技巧来确保你在设计时考虑到你的用户。有些人发现从第一人称的角度写下他们的想法有助于将自己想象成最终被服务的用户。
或者某些设计师会讲角色分类，然后全情单线程的专注一个项目，以牺牲时间和效率为代价确保航道的正向。
以用户为中心进行设计的最佳方式是听取用户的意见。当你从事一个新项目并考虑这个产品将如何服务于用户时，请确保在进行原型设计之前先和你的用户聊聊。
可以尝试提出以下问题：
往往你会惊讶于他们可以提供的见解以及他们将期望如何改变你原型的方向。
你可以使用多种用户体验研究方法来确保你在设计时考虑到用户：
不要提供太多的选项或功能让用户不知所措。
每个产品都有自己为用户解决的核心问题，用户希望在产品中获得帮助并快速做出决定。问题是，很多产品经常沉迷于他们产品功能以及他可以为用户实现什么，忘记了如果有太多选项和功能，新用户可能会感到不知所措。
如果你负责一个产品，可以考虑你的用户在面临过多选择或功能时的感受，并尽量优先突出他们最需要的选项或功能。
例如，在电子商务网站中，用户不能从 50 种不同的衣服面料中选择他们最喜欢的材质，如果预先只有三四个选择，可能会带来更好的体验。也可以考虑隐藏一些选项，方法是使用视觉提示，例如类似“探索更多”文字的按钮。
确保将最重要的信息呈现给用户的一种方法是将信息流设计为金字塔形状，首先呈现基本信息，不太重要的信息尽量放在不显眼的地方或者想办法隐藏。
这里提供了六种方法，帮助你减少产品中的决策疲劳，从而使用户更有可能走上正轨，解决他们的问题，并帮助获得更高的转化。产品设计时把自己放到用户的角度去思考，才能更好的服务于用户
文章来源：人人都是产品经理 作者：公众号：真的不一定
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
以下内容主要分成两大部分，第一是聊聊响应式和自适应的区别和原理，以及我们应该如何去设计响应式界面；第二部分也是比较关键的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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
蓝蓝 http://www.lanlanwork.com
