用户体验是一个老生常谈的话题。在进行 UI & UX 设计时，我们经常会忽略一些细节，虽然我们并没有觉得有什么问题，但往往会极大地影响用户的体验，从而影响整个产品。作者在本文中提出了 6 条提升用户体验的微技巧，一起来学习吧！
在设计高效、易读和漂亮的 UI 界面时，只需要小的改动就能让你的设计眼前一亮。在这篇文章中，我为你带来了另一些容易付诸实践的 UI 和 UX 微技巧。这些技巧只需很小的改动就可以帮助你提升用户体验。让我们开始吧！
如果你有一个设计项目，可以让你在颜色选择方面有比较多的自由，不要总是倾向于用彩虹般的颜色来进行设计。
如果你走的是彩虹路线，你很快就会发现很多内容看起来都不匹配。简单地使用一个基础色，然后将该颜色的色调和明暗进行变化并应用，可以令你的设计更加协调和一致，并且看起来更专业，而不需要那些闪亮的彩虹和需要色彩理论学位。
UI 可以是干净的、极简的和直截了当的，这毋庸置疑。但不能以牺牲用户体验为代价。对于像选项菜单这样简单的东西，要确保用户只需快速浏览一下，就能够找到选择的项目。
你不需要在这里追究更多细节。简洁的粗体就足够让用户轻松的分辨出他们选中的目标，而且他们的输入已经得到反馈。
当涉及到长篇文字内容时，你可能会倾向于使用灰色的中间色调，这可能没什么问题。但如果你同时使用更轻字重的字体，就会发现这影响了这段内容在任何尺寸屏幕上的可读性。
不要让用户因为这种原因退出页面。可以通过将文字的颜色加深来简单地解决这个问题，让每个人都更加易读。对于较轻字重的字体，只需将其颜色加深几个级别，就能显著的改善其可读性。
你希望用户的眼睛每次都能快速、有效地注意到页面上最重要的元素，并将认知的努力降到最低。通过使用视觉层级原则，如字体大小、字重、颜色和布局，仅举几例，你可以通过这些技巧轻松地把最重要的元素放在突出位置。遵循这些原则有助于改善用户的体验，并有助于引导用户以更直接、准确地方式使用产品。
在用户进行操作之前，特别是点击某些 CTA 按钮之前，要确保他们不会被蒙在鼓里，知道接下来会发生什么。在执行操作之前，始终让用户清楚地了解他们在点击突出显示的 CTA 按钮时可以期待些什么。改善每一步的用户体验，不要让他们在旅程中任何一个触点产生疑问。
CTA 按钮在页面中哪怕不是最重要的部分，也是最重要的之一，让它在页面中突出出来!
不要让用户将它与页面上其他类型的元素（例如通知或标签）混淆。它需要很容易地被分辨出来，而这可以通过简单地为 CTA 设置单独一种颜色就做到。当然，你可以在尺寸、形状等方面做更多的细节，但只要为你的 CTA 保留一种颜色，仅此一点就可以减少大部分问题。
我希望通过这几条简短的小贴士，你能意识到对你的设计进行小的调整也能带来完全不一样的用户体验。
译者：吴鹏飞；授权获取：吴鹏飞；审核指导：王翎旭；
本文由@三分设 翻译发布于人人都是产品经理，未经许可，禁止转载。
题图来自 Unsplash，基于 CC0 协议。
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
毫无疑问，表格之于B端产品而言是及其重要的一部分，那么，如何系统掌握B端产品中的表格设计呢？本文作者从表格设计规范与交互逻辑两个角度提出了15点建议，干货满满，希望对你有帮助。
表格作为B端产品中重要的界面组成部分，承载着内容展示、数据记录等多重任务。每家产品的表格看起来构成差不多，但在交互细节上仍然有很多好的地方值得我们仔细思考。
本次通过整理10条B端表格设计规范+5条B端表格交互逻辑，系统掌握B端产品中的表格设计～
表格内的信息通过对齐，会更加规范易理解，给用户视觉上的统一感，且视线流动顺畅，能够让人快速捕捉到所要的内容。
默认展示的列数为3-8列，如果需要展示更多列数，则需要优先固定展示重要列，其余的列的内容会以滚动条滑动而展示出来。
有操作时需固定，操作项不固定时无法快速定位会降低操作效率；重要信息固定，有利于快速获取重要的内容。
宽度的尺寸大小自适应，但需要根据文字的重要性显示，重要文字内容优先完整显示。（如果由于屏幕小表格会出现省略，就要考虑多一个浏览器自带的title提示。）
注：当第一列是序号或多选项时，列宽不需要太宽，这样视觉不会显得空洞。
字符不要多，如果文字太多，就需要做文字信息精简化。同样，对于专业术语或用户不常见的名词应给予一定的帮助说明。
表格内容较多且有长文本时，长文本缩略展示；表格内容较少时有长文本，长文本换行展示。
表格中经常会出现空数据或无数据的情况，留白处理会给用户造成一定的困惑和误解，是系统没有加载出来吗？明智的做法，使用「-」填充显示。图片为空时使用图片占位符。
同一项目中的操作列命名应该保持统一，例如：常规增、删、改、查命名为新增、删除、编辑、详情。
操作项超过三个时，将操作低频折叠收起，可以帮助页面突出更加重要的信息，减轻空间压力，减少干扰。
给数据做升降区分可以快速判断数据的趋势，国内数据升图标默认为红色，降的为绿色。
全局操作为无需选择数据内容即可进行的操作，常见的有新增、导入、筛选。
批量操作就是对表格的多行数据同时操作，常见的有导出、删除。
全局和批量都不属于单个对象因此需要放在表格外，操作具体的位置排放根据操作的重要程度一次从左到右递减。
条纹颜色：标题背景色透明度60%左右；（条纹颜色视觉上应该比标题栏弱一点）鼠标hover颜色：主题色透明度10%。
当阅读丰富且繁多的表格时，由于屏幕有限，用户不得不拖动横向或纵向滚动条来阅读信息。
固定表头，能够让用户明白当前单元格内信息的属性而不至于不知道该信息的意思。固定表头也是一种界面友好性的体现。
可以让无序信息内容进行有序排列，排序分为升序和降序，一般用在数据、时间、数量上。
允许调整列的宽度来查看更加完整的缩略数据。被截断的数据，默认支持鼠标悬停时浏览器自带title显示完整数据。
呈现大型数据集时，水平滚动是不可避免的，通过横向滚动查看其它数据。将首列进行固定（若包含勾选操作，则一起固定），以便用户将数据与对象进行对应。
若表格是分页处理的，分页会放在上部、下部或上下部均有，分页固定省去了用户需要翻到顶部或底部进行操作的麻烦。
作者：谭檀檀
本文由 @Clippp 授权发布于人人都是产品经理，未经作者许可，禁止转载
题图来自 Pixabay，基于 CC0 协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
前人留下的一些设计原则能够帮助我们更好地进行页面以及产品的设计，让用户有更好的体验。本文对帕累托法则进行了介绍，希望能帮助大家在以后的设计中更好的理解与运用。
威廉·斯特伦克（William Strunk）说过：“优秀的设计师有时会无视设计法则，但当他们这样做的时候，通常会有一些补偿性的措施，除非你确定你能做得那么好，否则最好还是遵守这些法则”，所以设计师需要对一些通用性的法则有所理解，做好相应的知识储备，以便在需要时从中找寻相通的规律和事务的本源。
设计常常是以一种美观且富有规律的形态出现，不论大家是何种姿态、什么样的知识背景，一旦踏入设计领域之后就会忍不住的去寻求设计法则，探索期背后的设计规律，因此经过长期沉淀，一些大佬和前辈们留下了大量的通用设计法则。
今天，笔者就说说帕累托法则，希望能帮助大家在以后的设计中更好的理解与运用。
19世纪末，意大利经济学家和工程师维尔弗雷多·帕累托（Vilfredo Pareto）发现，自家花园中80%的豌豆产自于20%的豌豆荚，在随后研究土地所有权和财富不平等的问题中，再次发现意大利 80%的土地属于 20%的人。
20世纪初，由管理学家约瑟夫·朱兰（Joseph Juran）将其命名为帕累托法则，即80%的结果是20%的原因造成的，并且号召关注「重要的少数」而不是在「琐碎的多数」当中投注精力。后续在经济学中得出结论（80%的财富掌握在20%的人手里）更加证实了帕累托法则的观点。
帕累托法则有很多不同的叫法，如帕列托法则、关键少数法则、二八法则、巴莱特定律、最省力的法则、不平衡原则等，后续笔者将其称为「80/20法则」。
其实，80/20法则是一个较为抽象的概念，可以理解为：大部分的效果由少数几项关键的因素来决定。在实际的场景中，“大部分”不是精确的80%，“几项关键因素”也不是固定的20%，数据会有所浮动，可能是70%+30%或者90%+10%，但不管这些数字如何波动，其背后蕴含的规律（集中的投入将产出大于预期的结果）是不变的，并且生活中存在的许多不平衡现象，都与这个规律相当接近。
80/20法则并不受人为直接控职，更多时后是自然而然的形成，其适用领域非常广泛。早期大多数用于社会、经济、管理以及工程等领域，而在80年代末就已经有设计师将其设计领域，在各行各业中，已经有大量的案例证明了 80/20原则：
70年代中期出现图形化界面，而到80年代末，80/20法则就已经被设计师引用在设计规范当中，后续经过不断的发展及优化，现已深入设计中的方方面面，PM用来处理KPI、UX用来划分权重、UI用来决策版面布局等。
界面设计中该如何应用80/20法则，这就需要设计师时刻注意如何让用户更快找到目标、如何更顺畅的完成任务以及如何拥有更愉悦的心理感受。例如80%的用户只会用到20%的功能，那么设计师就应该将80%的时间、精力集中在这20%的功能上，不断迎合用户需求以及使用体验。
80/20法则能够帮助我们提供决策思路、梳理设计方向，通过前面的了解，我们应该清楚了产品80%的用户只会用到20%的功能，而80%的收益也恰恰来自于20%的付费用户，甚至低于20%。
虽然一直呼吁尽量满足所有用户，但产品团队的重心始终要围绕着20%来进行，从产品到设计、再到开发测试，都能以此为方向制定问题的解决方案。
任何一款产品都不能忽略主次，每隔一段时间就要重新评估功能价值，以备后续的更新迭代，针对非关键性的80%切勿耗费过多的精力，以免喧宾夺主，不仅得到不好的反馈、还会带来不必要的损失，吃力不讨好。
对于已经过期的核心（曾经20%）功能，需要及时降低权重以及精力的消耗，不然即便是掌声一片、也可能无法变现。
用20%的部分创造80%的价值，并不意味着只关注20%的关键性指标、其它的就可以被忽略，这样做表面上看是挺诱人，但会让其他很多指标停滞，呈现出产品过度优化的情况，造成短时间内隐藏的负面影响。
团队应该要有众览全局的眼光，考虑到各指标间的相互影响，可视情况而定将时间和精力合理分配，如90%+10%、80%+20%、70%+30%等，只要是将大部分用在关键性指标上即可。
在UI设计中，我们会将主要精力花费在20%的页面设计上，例如APP底部标签栏的几大主页或其它重要的一/二级页面，会花费更多的心思去构思不一样的布局、表现手法，将设计功底凸显出来。而剩下80%的页面就相对机械化，会使用一些常规样式以及复用的方式像搭积木一样快速完成，成本之低、效率之高毋庸置疑。
同一个页面的设计方式也是如此，设计师将大量心思放在首屏及位置靠上的功能上，待超过一屏后下滑时，设计也会逐渐轻量、组件化，这有助于节省产品、设计、开发更多的时间。
用户浏览屏幕时，眼球移动的顺序通常都是从左到右、从上到下（基于网页浏览眼动测试），这种移动轨迹很像字母「F」，这也让F型布局成为网页设计中效率最高的方式之一，所以设计师通常会将重要的信息放在左上角或左侧，不重要的信息放在右侧。
如下面这张眼动测试图，F型布局也正好诠释了80/20法则合理性与可行性，在页面中20%的关键区域，吸引了用户80%的注意力。
很多产品因为业务功能的庞大，一股脑的将信息全部展示出来，看起来十分臃肿，用户不能快速找到自己想要的信内容，就会失去信心。
优酷APP首页将热门频道和点击频率较高的频道显示在顶部导航中，如精选、电视剧、电影、最新院线等，而其他更多的分类则隐藏在频道选项卡中，将少量（≈20%）重要的内容放在明显的位置，目的就是为了让大部分用户更快触达，提高了产品的易用性。
在一些选项列表中，由于选项数量的庞大，会给用户增加使用难度。
例如，使用美团购买火车票在选择地址时，面对超长的地址列表，逐个查看或通过字母筛选，都要花费一定的时间和操作成本，即便可以通过码字搜索来完成，但因为自行输入有很多的不可控性，能让用户选择的就不要让其输入。
对于地址列表，除开自动定位和搜索历史，运用80/20法则就能很好的解决这一问题，系统将约20%高频选择的热门城市作为单独的模块放在全部列表之前，提高了大部分用户的搜索效率。
极简风格的界面设计跟80/20法则在精神上保持着高度的一致，剔除多余、无用的元素，而保留的每一个元素都是有目的、有针对性的，也是绝对必要的存在。在极简主义设计中，视觉上简单干净，大部分都是通过通过留白来衬托关键性元素的存在，让用户更加聚焦于主要功能/信息。
奥卡姆剃刀指出「如无必要，勿增实体」，需知页面中每多一个元素都会增加视觉“噪声”，意味着用户需要花费额外的时间和理解成本，对用户体验的影响是很大的。那么问题来了，当产品需要增加一项需求量小但确实存在的功能，该怎么处理？
这时我们可以将奥卡姆剃刀原则作为最终的评判标准，是否需要增加上述所说的功能，就要看看能否很好的控制团队开发成本和用户体验成本。
其实在80/20法则中，很多小众但确实存在的功能需求基本很难抵消所造成的用户体验损失，所以即便实现了这个需求，也很难分配出20%的精力去维护与迭代，甚至“俺耳盗铃”般的将其遗忘，但这个视觉“噪声”一直存在，如果事先能分析出这种结果，这个需求根本不需要增加。
在2004年长尾模型才被提出来的时候，很多人认为这是在颠覆80/20法则，它们的曲线长得很像，但结论完全相反，那条长长的“尾巴”（非关键的80%）所占据的长度几乎与头部的（关键的20%）高度相当，这说明收益虽低，但这么多数量的累积，依然值得重点关注。
所以有很多企业在采集差异化战略时运用了长尾理论，例如小米搭建的全品类商城用的是长尾理论。
乍一听好像很有道理，难道80/20法则被推翻了吗？事实并非如此，长尾理论的成立必须要满足两个条件，第一是尾巴真的足够长（小众需求确实非常多），第二长尾巴能被用户发现（庞大的用户量），这两个条件缺一不可。例如京东、淘宝、微信、支付宝等，其前提都是建立在大规模、且海量的用户资源之上，不管多么隐蔽、多小的动能，总能拥有一些不错的曝光度，所以才能发挥长尾模型的作用。
说道这里，大家应该就明白了，那些中小型的产品对长尾模型大多是望尘莫及，所以在你的产品规模、用户量没有达到一定的级别之前，就不要妄捧长尾模型，用好80/20法则就好。
80/20法则在实际工作中是一个相对普遍的定律，它能让我们灵活思考设计问题，更好的为用户服务，虽然80/20法则也存在一定的争议，但还是适用于觉绝大多数的场景，在关键时候使用，能帮助我们准确的找到问题点，在有限的时间和精力下快速作出优化决策并、关注核心功能，最终达成目标。
专栏作家
大漠飞鹰；公众号：能量眼球，人人都是产品经理专栏作家。致力于产品需求的驱动、产品体验的挖掘，利用设计的手段为受众用户带来更好的体验，即好看、好用。
本文原创发布于人人都是产品经理，未经许可，禁止转载。
题图来自 Unsplash，基于 CC0 协议。
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
都是交互反馈和提示组件，大家可能会疑惑：文字气泡 Tooltips 和气泡卡片 Popover 的区别是什么，两者之间的应用场景如何？本文对两者的差异进行总结，希望对你有所帮助。
同样都是交互反馈及提示组件，你可能会疑惑：文字气泡 Tooltips 和气泡卡片 Popover 有什么区别？分别有哪些特定的使用场景？
本文就来详细分析下这两个组件的区别和联系，帮助你做好应用。
气泡卡片（Popover）是当用户点击 / 鼠标移入元素时，就会弹出气泡式的卡片浮层。当对于某个元素有更多的解释性描述和相关操作时，这些内容可以收纳到元素的气泡卡片中，根据用户的操作行为进行展现。
其用法特征是：
1. 用户可以在浮层卡片上进行相关操作，也即气泡卡片可以并需要承载更复杂的内容和交互功能。
2. 卡片中可以包括的内容有：文字说明，图片内容，操作按钮，相关链接等等。
3. 组件功能侧重于：承载信息和操作。即收纳并在需要的时候展示与该元素内容相关的信息和操作。这些信息的特征通常是：
文字气泡（Tooltips）是相对简单的文字提示气泡框。用户使用鼠标移入元素后显示提示，移出后提示消失。
其用法特征是：
1. 文字气泡通常不承载复杂的信息和操作，仅提供一段文案解释，也即用户在文字气泡中不能做除阅读外的其它操作。
2. 该组件功能侧重于：解释说明。即对局部内容或元素进行文字性的解释说明。通常来说该气泡是对其载体本身的解释，比如：
有同学看过 Ant Design 组件库提供的组件样例，会觉得气泡卡片 Popover 是白色背景，而文字气泡 Tooltips 是半透明黑色背景。
其实这两个组件的背景颜色上的差异并不是重点，因为这两个组件都可以使用其他颜色（比如带有透明度的品牌色）做背景底色。颜色并不具备唯一标准。AntD 就提供了多种颜色的文字气泡样式：
也许你已经发现，即使我们将一个组件的使用规范和应用场景解释得再全面，在使用时也总会出现一些特殊的业务需求和应用场景无法严格按照规范来执行。
面对复杂多样的业务需求，我们更应该学会：在理解业务需求的基础上，合理调整组件的使用方式和样式。
组件的规范对设计师来说并不应该是限制或约束，而是一种能够帮助我们快速实现产品设计一致性，保证基础体验的快速方式。
专栏作家
元尧，人人都是产品经理专栏作家。
本文原创发布于人人都是产品经理，未经许可，禁止转载。
题图来自 Unsplash，基于 CC0 协议。
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
关于“管理模式下是否需要确认按钮”这一问题，作者结合自己最近的一次设计方案复盘，从三个维度展开分析，希望对你有所启发。
需求：在课程章节页面，老师希望可以对章节、单元编辑名称和调整顺序。
设计问题：
最开始想到的就是放在章节单元后，增加更多 icon，用户点击更多进行章节单元的编辑删除，拖拽直接调整排序。可是这种设计方式让章节看起来复杂很多，而且老师使用频率很低，一般只有在学期刚开始，备课时设置，后期几乎不再会进行调整。
为了降低页面复杂度，我把编辑排序放在统一入口，点击后，再进行操作。我给这个入口命名为管理。点击管理，进入到管理模式，调整章节、单元的名称和层级结构。
实时保存就是用户的每一步操作都会立即生效。比如一些标题的编辑，鼠标hover上去会展示输入框，光标消失即保存成功。或者知乎编辑文章时，也会告诉你保存中。
实时保存相较于确认保存少一步操作路径，每一步操作立即生效同步更新，相对来说效率较高。由于人们总是会忘记收尾工作，实时保存也避免了让用户承担忘记点击确认按钮而使数据丢失的风险。
实时保存也有缺点，比如当用户想要反悔撤销的话，就会比较困难。一般会根据具体需求搭配撤销按钮、历史版本等方式，给用户一个反悔撤销的机会。
用户进行的一系列操作，都不会立即生效，而需点击确认（保存等）按钮后，所有操作才会生效。比如飞书管理后台对于会议室预约规则的设置。默认是查看模式，修改字段进入编辑模式，展示取消、保存按钮，点击保存更新修改，取消则回到编辑前的状态。
这种方式的好处是，减少用户修改过程的心理压力。用户在修改过程中可以随意调整，内容不会被同步，修改好后点击确认按钮统一保存，内容同步。
为什么用户在编辑时会有心理压力？重点就在于同步给谁，以及同步的内容是什么。
内容修改后只同步给自己。
例如微信标签管理，进入管理模式后，对于标签的排序，删除都实时保存更新，没有确认按钮。标签修改后的结果只会同步给自己，而自己在管理标签的过程已经知道了修改结果，如果增加确认按钮倒显得较为繁琐。
内容修改后会同步给其他用户。
例如飞书管理后台对于会议室预约规则的设置，设置结果会影响其他用户预约会议室，比如能不能约、几点能约，所以同步设置结果就必须要谨慎一些。而多一步确认（保存）按钮可以帮用户再次确认自己的操作行为，让同步结果更谨慎。
以上可以总结为，如果内容修改后只同步给自己，则实时保持更便捷。如果内容修改后会同步给其他用户，则需考虑增加确认按钮让操作行为更谨慎。具体还需考虑内容本身。
如果内容对其他用户影响不大，也可以使用实时更新。
比如飞书管理后台对于会议室名称的修改，修改后，光标移开即保存成功。会议室名称对于用户来说只有信息的传递，没有功能上的制约，甚至也不影响用户行为目标。可以思考下，当用户想约会议室时，什么会影响用户决策？比如位置-用户会考虑距离是否合适、或者状态-是否当前被占用等，但会议室名称几乎不会影响用户预约决策。所以内容对用户影响较小，使用实时更新。
编辑者对于内容的重视程度。
比如知乎内容发布后，二次编辑，需点击保存更新才会同步给其他人。创作者写文章耗费了自己的时间成本，好的内容可以帮创作者带来流量和价值感，所以创作者会更重视文章内容的完整性。而实时同步编辑过程所展示的内容是不完整的，会影响读者阅读内容的感受。所以点击保存更新，统一同步内容可以避免这些问题的发生。
回到自己的产品上，老师对于章节的管理操作会同步给学生，调整结果会影响学生查看章节结构。作为学生，主要任务是完成章节或者单元下的学习活动。所以调整的内容并不影响学生完成学习任务，按照我们所总结的规则，内容对于同步者影响不大，可以使用实时更新。
再来看编辑者对于内容的重视程度。老师会在学期前开始备课，管理层级结构属于备课环节，教学内容一般都是固定的，所以后期调整层级结构的频率很低。操作行为低频且优先级不高，内容固定，对于老师来说，重视程度一般。所以也可采用实时更新。
由于老师编辑章节或单元已有保存按钮，如果管理模式还存在保存操作的话，对于编辑功能来说需 2 次保存才算是真的保存，理解成本过高。选择实时保存方式更合适。
根据以上 3 点，我的方案选择实时保存，实时更新。
以上是我对于工作内容中关于管理模式的复盘思考，最终设计方案的产出还是需要结合自己产品的业务，在体验和功能的权衡之下做出最合理的设计。
关于第三部分排序放在下次在写….
本文由 @阿青 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议。
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
编辑导语：在做UI设计时，定义并统一颜色规范对产品设计和团队整体推进具有重要作用，本篇文章通过一个国外大厂真实的颜色组件升级案例为我们分享了统一颜色规范的好方法，一起来看。
Hi，我是彩云。咱们平时在做UI组件库的时候，会遇到一个问题，定义了很多颜色但在团队合作的时候，却依然还是会根据每个设计师自己的喜好来配色，很难将颜色规范很好的统一起来。这其中有一个很严重的问题就是对于颜色的命名和管理不够清晰，那么今天这篇文章通过一个国外大厂真实的颜色组件升级案例，希望能帮你解决这个难题。
我们花了几个月的时间改进了设计系统 Cobalt 中颜色的处理方式。颜色是 UI 的基本元素：它们构成视觉语言，帮助定义品牌，并被开发和设计师每天用在产品设计中。
但如果我们在使用颜色上没有明确的指导原则，如颜色被团队中的设计师按喜好使用时，将会导致产品看起来非常混乱。
我们APP中的不一致例子
接下来我会告诉你，我们是如何做好颜色规范以及在整个项目中面临的挑战，正如你将看到的，这个项目并不像看上去那么简单：
如何通过 Getaround 在设计和技术方面管理颜色概述这个系统的局限性，并说明我们如何改进它什么是语义颜色我们是如何实现它的，以及它带来的优势！
和许多设计团队一样，我们使用 Figma 作为我们的主要设计工具。我们的颜色被放在“基础”库中，可以在其中找到我们在产品中使用的所有常见样式，例如字体样式、颜色、图标等。这个库提供了我们每天使用的专用系统库（iOS、Android、Web、电子邮件）。颜色名称过去是基于它们的外观。例如：紫色颜色是我们的主要颜色，而石墨色是基本文本的常规颜色。
在我们的APP中，曾经会用相同的系统来管理颜色。此外，还有一些语义颜色，但仅限于 iOS，开发用的也不多。
在使用这个系统时，团队反复面临同样的问题：如何确保从一位设计师到另一位设计师以相同的方式使用颜色？如果没有适当的指导原则，我们如何确保开发很好的还原？如果明天我们必须用全新的配色方案来改造我们的品牌，要怎么快速统一？让我们试着找出我们是如何陷入这种境地的？
所有设计师都使用相同的色板，但自 2019 年 Getaround 品牌重塑以来，除了引入不一致之外，没有明确关于如何使用它们的规范，所以设计师在选择颜色时迷失了方向。然后他们将开始建立自己的参考资料，每个设计师都有不同的配色想法。
例如：设计师应该在所有这些灰色阴影中为次级文本选择哪种灰色？颜色命名在这里不是很有帮助
以前品牌的一些旧颜色仍在使用（按钮上的蓝色阴影，标题……）。到现在也没有真正的行动计划来迭代它们。
旧驱动器品牌
在 2021 年初，我们有机会为我们的 iOS 和 Android APP来制定长期的 UI 规划。我们问自己“5年后我们的APP会是什么样的？”。我们会回顾， Getaround 品牌是如何成为我们视觉方法中心的。
以上是我们品牌和设计团队在 2020 年完成的全面工作的一小部分致力于设计系统的 Cobalt 团队借此机会重新考虑了颜色系统。然而，为了使这一目标成为现实，我们面临着一些挑战：
我们如何确保每个设计师都可以依赖易于理解和使用色彩系统？拥有一个简单系统将加快使用速度。
我们如何确保从一开始就设计出易于使用的颜色？
我们如何才能使系统易于维护并符合现在和未来的行业标准（例如：暗模式）
在我们的探索阶段，在 Figma 的共享环境中工作促使我们保存和记录我们所做的设计决策。就像我们应该如何命名我们的强调色：（主要？强调？）我们还测试了APP界面在黑暗模式下的外观，以及如何正确支持这一点。我们应该创建一个单独的调色板还是为每个组件都创建一个深色版本？
我们开始与开发讨论这个问题，以了解他们有什么解决方案来处理这些问题。语义颜色的概念很快就被开发人员提出来，因为他们知道并且很好地使用了这个概念。但对于设计师来说，又要如何准确理解呢？
语义指的是根据颜色的使用方式而不是色调来命名颜色的方法。
例如，你可以将颜色命名为“成功”或“积极”，因为它指的是含义，而不是“绿色”或“翡翠绿”。甚至可以根据颜色在屏幕上的应用方式来命名颜色，例如背景颜色、按钮背景颜色、文本颜色、图标颜色等……
语义颜色并不新鲜，越来越多的产品开始采用这种方式来定义颜色。我们可以从下面一些大厂的颜色规范来学习google
显然，这种颜色系统有很多优点。因此，现在让我解释一下我们如何在实践中将这个概念应用到我们的产品中。
我们的新颜色系统由两部分组成：
基础调
我们与品牌团队密切合作，他们定义了一个全新的品牌，我们在工作时会围绕这个品牌考虑。该品牌的每种颜色都采用多种色调进行调整，以创造更大的灵活性，一次构建成为基础调色板。它代表可以在产品中显示的所有可能颜色。团队可能不会全部使用它们，但他们会选择在产品中效果最好的那些。
基础调色板
语义颜色建立在用作参考的基础调色板之上。正如我之前解释的，命名不再是指颜色的“外观”（洋红色、棕色、绿色……），而是指UI 元素它们被应用于（文本、图标、按钮、背景……）以及该元素的状态（活动、非活动、成功……）。请参阅此处的命名法和一些示例：
语义颜色结构和示例这意味着来自基础调色板的颜色可以用于多种语义颜色：
这就是我们根据这个新原则重新调整颜色命名的方式：
我们通过设计师和开发进行了内部用户测试，以确定命名语义颜色的最佳方式。我们尝试了很多不同的命名方法，发现过于详细的命名系统对于我们的团队和产品的规模来说维护和使用太复杂了。我们决定做一些简单的维护，同时在命名方面有足够的延展性。
语义颜色侧重于颜色的用途。它消除了设计师和开发对使用什么颜色的盲目猜测，因为视觉语言直接传达了设计决策。
例如：在这里，颜色命名使设计师更容易做出正确的选择。在我们的原则中， *Accent* state 用于交互元素。
语义颜色可以适应不同的主题。语义颜色的名称始终相同，但它的外观可能会根据所选模式而改变。例如，语义颜色“主背景”可以指浅模式下的“白色”和深色模式下的“黑色 500”。根据用户选择的模式，将自动显示正确的颜色。这对我们的设计系统来说是一个真正的游戏规则改变者，因为它将使它更加面向未来。
明暗模式下的语义颜色 Primary.Background
如果我们将来要更新颜色，使用语义颜色也会变得更容易。假设我们想要将我们的主色更改为蓝色。我们只需要将基础调色板中的“紫色”更新为“蓝色”。与该颜色相关的所有语义颜色也将神奇地更新。另一种情况可能是更新特定 UI 元素的颜色，例如按钮，而无需触摸使用紫色颜色的其他元素。
在这种情况下，我们只需要更新 ButtonBackground.Primary 颜色，非常简单。如果没有该系统，更新颜色将需要经过大量 QA 以确保将更改应用到任何地方。
这个系统似乎很容易使用，但设计师仍然有一些问题：
为了帮助设计师选择颜色，我们创建了一个交互式指南，列出了所有可能的颜色组合。我们在 figma 原型中创建了这个指导原则，每次更改设计系统颜色时都会更新该规范。它突出了允许的语义颜色组合，以最大限度地保持一致性。
点击可以查看大图Figma 中内置的语义色彩交互指南
采用这种新的颜色系统产生了一些变化：
1）我们从“Foundation”库中提取颜色，并将它们分为深色和浅色模式。这一举措使我们能够使用 Figma 开关功能轻松地将设计文件从? Light 切换到 ? Dark 模式。这也使库更轻且更易于维护。
2）语义颜色已在我们的 iOS 和 Android 应用程序上成功实现，我们现在正在努力在我们网络平台上使用相同的系统。我们很快就会有一个集中的配色方案来处理所有系统上的颜色。
总结下今天学到的内容：
（授权截图）
作者：Fabien Gavinet，译者：彩云Sky
原文链接：https://medium.com/getaround-eu/colors-that-make-sense-505d0f3509c1
本文由 @彩云Sky 翻译发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash，基于CC0协议。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
编辑导语：各大APP的图标都各有特点，图标的设计也是一门学问。在这篇文章中，作者全面解析了各类APP图标设计背后的用意，一起学习一下吧。
如果说一个人的脸面、衣着打扮是给陌生人的第一印象，那么APP的应用图标风格与气质就是留给新用户的第一印象，关系着用户是否对这个APP感兴趣、是否会打开应用介绍、是否会点击下载按钮起着决定性的作用。
一个好的应用图标有着无限可能，无形中对用户产生强大的吸引力，并有一种想要了解的冲动，况且图形本身就能让人充分发挥想象力，这就是为什么不管在哪个应用市场第一眼看到的是应用图标，而非应用名称。
在一部手机就能解决很多问题的互联网时代，相信每个人都有下载几十上百个APP，琳琅满目的列表，应用图标是否能在第一时间抓住用户眼球（目标明确或铁粉除外）非常重要，一个视觉传达清晰且有吸引力的图标能提升用户点击率，即便用户只使用过一次，相对来说，印象也会更深刻。
本文根据笔者对大量应用图标的分析、结合设计准则进行总结，希望能帮助大家在设计过程中规避掉一些常见的问题，欢迎一起探讨、取长补短、共同进步。
应用图标代表产品的外在形象，设计的精美与否决定着用户的第一印象，是否产生打开的欲望跟当前图标的视觉所传达的内涵有最直接的关系。应用图标虽然不同于设计LOGO，表现方式也千变万化，但必定有自身的设计准则要去遵守，利用设计的手段将视觉传播的价值最大化。
首先，应用图标需要尽量简约。过于复杂的图标会增加用户的理解成本、甚至误导用户，但如果过于追求简约，缺乏细节、个性化以及必要的隐喻信息，也会因过于单调，造成表意不明确等问题。
简约并非简单，设计师需要通过专业的知识进行合理的简化，以提升应用图标的设计品质，方便用户在不同场景中都能清晰的辨认。其次，需表意明确、易于理解。
应用图标代表的是产品的行业属性、功能作用或与众不同的优势，要让用户第一眼就能识别出所代表的含义，贴近用户的心理预期。
简约易识别是应用图标必备的基础属性之一，这也是为什么大部分产品都将logo作为应用图标主视觉的原因，因为logo设计考虑到了方方面面以及后续延展的问题，即便有些logo较为复杂，也会通过提取局部元素、吉祥物、主体色等方式来强化应用图标属性，给用户形成独特的记忆，以提升应用的下载量和使用率。
应用图标应该与产品的属性、品牌有极强的关联性，通过品牌延展赋予产品更强的生命力，让用户从接触应用图标的第一眼开始、再到后面的使用，整个过程始终都能保持清晰且统一的品牌认知，通过和谐统一的视觉效果，带来更好的用户体验。
应用图标需要与品牌之间必须保持高度的一致，着重从以下几点体现：
1）LOGO
毫无疑问，用品牌logo作为主体图形是最佳选择，结合品牌色搭配使用，能将产品核心理念、品牌形象的传播效果达到极致，在APP应用市场中，大家会发现大多数产品都在使用logo作为应用图标的主视觉图形。
2）品牌色
品牌色即主体色，将贯穿APP所有页面的元素组件。众所周知，每种颜色都有其特定的含义，能传递给用户不同的心理感受。用主体色作为应用图标的背景色，可以烘托出产品的情感氛围，并与进入应用后的主体色遥相呼应，以最小的视觉跳跃性将前后关联，强化用户对产品的记忆感知。
3）IP/吉祥物
吉祥物属于品牌logo延展的一部分， 也是产品的灵魂。当logo较为复杂时，因移动设备应用图标位置空间有限，logo细节无法在短时间被用户捕捉，不宜展示时，使用IP/吉祥物或其局部元素代替也是不错的选择。
4）产品名称
如果说logo是产品的脸面，通过暗示和隐喻给用户无限遐想并让用户记住它的样子，那么名称的出现就相当于产品主动进行了自我介绍，并让用户知道如何称呼它。
将产品名称作为应用图标需谨慎使用：首先，文字传达的信息量有限：其次，用户对于图形的理解效率要优于文字；再者，应用图标都会有对应的产品名称展示（应用市场在右、桌面在下方），多少有些信息重复。
所以大家见到的应用图标主体是产品名称的不外乎两种情况，一种是产品本身将名称设计成字体logo，例如美团、懒饭；另一种是将产品名称作为logo的辅助信息提示，例如缤纷生活。
以上是应用图标与品牌属性关联最常见的四种方式，在设计中可灵活搭配，使用两种及以上的方式组合，能将品牌传播的途径发挥到最大值。
笔者上小学时，曾经在一次彩铅绘画作业中得到了老师的真心夸赞，但内心却备受打击。老师对着我画的桃子说“这西红柿画的太像了”。
举这个例子似乎并不恰当，但结果是惊人的相似，笔者想要陈述的一个观点是，不要让你辛苦做出的设计成为别人的嫁衣，让用户误以为这是其他企业的“某某某…”产品。
目前，应用市场中的APP数量巨大，且还处于增长的趋势，同行业的图标设计同质化相当严重。想要让自身产品应用图标脱颖而出，就有必要在设计之前做好竞品分析，借鉴竞品的优点，在突出自身产品核心特征、属性的基础上，还要用不同的表现手法突出其差异性，给用户留下独特的印象，避免同质化。
应用图标在设计完成之后（测试小组）、上线后（用户反馈）进行可用性测试，主要针对图标对用户的吸引力、识别度等问题作进一步优化，以确保图标在不同场景中都能被用户清晰识别并提升印象。
虽然可用性测试存在设计之后，但这一环节至关重要，它决定着产品的下载量以及使用率。
单色图标通常以品牌色作为背景色、logo以反白的形式呈现，既能突出品牌色、还能用于烘托主体图形，不过这种方式仅适合色值单一的logo，多色值可能会与背景色产生融合或色彩反差太大影响视觉传达效果。另外，如果logo视觉重量较大，也可使用白色背景+原品牌色logo，这样会更直观。
单色应用图标虽然色彩比较单一、表现形式也受到局限，但视觉清晰、简洁且识别性强，如果能运用其他设计手法丰富图标细节就再好不过了。
多色图标使用了两种及以上的颜色，更多是直接使原多色彩的logo图形+白色背景，无需任何加工，控制好尺寸规范就行。如果是运营推广所需，如春节、618、双11等活动，会对应用图标加以其他色彩烘托、点缀元素或标签等，色彩就会更多，但一般都具有时效性，活动过期即图标复原。
多色图标的细节、层次更加丰富，设计时确保各色彩搭配协调，一旦因色彩过多造成视觉混乱，就得不偿失了。
无论是单色还是多色，添加渐变会让应用图标更加细腻、耐看。渐变的表现手法应用广泛，简单的渐变能让图标细节丰富，同时也具备空间感和微立体感。
设计渐变色图标需注意图形衔接处的对比度，花里胡哨的渐变色会拉低品质感，要确保色彩的和谐，让图标视觉清晰且容易识别。
单色、多色或是渐变都可通过调整不透明度、图层叠加的方式来丰富应用图标细节，相比纯粹的渐变，立体感和空间感更强。使用颜色叠加需注意色彩对比及明暗关系，否则会衍生出脏乱的颜色。
环形构图为主，由多个元素复制并以统一的中心点、旋转角度，旋转衍生出一个主体图形。这种应用图标的设计构图饱满、色彩丰富，能给用户传递出轻松愉快的视觉体验。
需要注意的是，由于颜色较多，至少在三种颜色及以上，否则无法构成色环类的主体图形（错觉）。如果没有超强的配色功底，最好按照色环的顺序依次取色，即便没有太大的优势，但至少不会出错。
一个好的应用图标应该是多元素、多信息结合运用，才能达到更好的效果。虽然大部分主体图形使用了logo，但并不影响设计师们对其进行拆解，提取局部元素、色彩、名称等信息进行二次创作，从原则上来说，是一次线上logo的设计。
应用图标种类繁多，切不可盲目跟风，需经过认真的分析、研究，找到最适合自身产品的才是最重要的，且每种类型并非独立，在条件允许的情况下还能跨类型灵活搭配、相互组合。
1）单中文字体
仅次于图形logo的表现方式，通常会在产品名称中提取一个具有代表性的文字对笔画、结构等进行再设计。基于国人文化的优势以及对汉字的敏感度，既能降低用户对应用图标的认知成本、还能根据产品特性设计出差异化的视觉效果。
不过因为文字笔画的原因，单个文字提取难度较大，避免信息传递有误或影响识别度，建议选择笔画较少且具有特性/代表性的文字，若达不到条件，最好选择其他表现方式。
2）多中文字体
使用两个及以上汉字，大多直接将产品名称用在图当中，对用户来说更容易记忆，有利于品牌推广。相比单字体，设计感会受到一定的局限，不宜做过于夸张的表现方式，因文字较多，设计时一定要注意文字的协调与可读性。
多文字图标建议将字数控制在2~6个范围内，3字以内一行显示，超过3字即两行显示且最多不超过两行，否则会影响图标的识别效果。
3）中文、图形组合
适当添加带有产品特性的辅助图形，用引导或指向性的方式对文字进行强调，图标细节会更丰富，可以突出产品想要传达的信息、以及不同的气质，还能增加图标的形式感和趣味性。注意添加的图形不要过于复杂，不然会让信息混乱，适得其反。
4）中文图形化
根据单个字体笔画的特点进行巧妙的变形或延展，会让你的应用图标更具设计感、品质好。这种方式对设计功底的要求较高，需要确保字体的识别度，切勿霸王硬上弓，如果是为了设计而设计，就违背的信息传播的初衷。
5）中文、IP形象组合
由产品名称和IP形象组合而成，这种方式能通过品牌IP不同的视觉形象带给用户情感化的体验，让产品更具亲和力，拉近与用户之间的关系。例如，IP的喜、怒、哀、乐表情变化分别对应用户不同的心理感受，以加深用户对产品的印象及品牌认知。
1）单英文字体
单英文字体通常是提取产品名称拼音首字母或英文首字母进行创意设计，跟中文字体相比，基于字母本身线条的简洁及流畅性，再结合产品特点，很容易设计出兼具美感、高识别度的应用图标。
需要明确一点，不管如何创意，也仅局限于在26个英文字母中选择，如果想设计出差异化的应用图标，对设计师来说，是一个很大的挑战。
2）多英文字体
跟多中文不同，中文产品名称在移动端基本不会超出6个字，而全拼音或英文名则多达十几位甚至更多，为了用户能更好容易识别、记忆，依然是提取不同拼音或单词的首字母（中文全称）进行设计。
多英文的应用图标很很容易形成独有的产品简称，更利于用户记忆，但字母一定不要过多，如果无法删减，那就只突出特定的2~4个字母。
3）其他类型
字母与图形、IP形象组合以及字母图形化，其表现方式、设计原则与中文字体图标类似，这里不做过多阐述。
1）数字设计
人们对于数字来说是非常敏感的，不存在文化差异或认知误区，基于数字便于记忆且容易识别的特点，将数字图形化后应用到图标当中，会让产品具有亲和力，有利于品牌传播。单纯的数字过于简单，需增加一些细节，丰富图标层次，让其具备独特的记忆点，不然会显得单调。
2）符号设计
每个符号都有特定的含义，因此，在选择符号作为应用图标之前，首先需要了解清楚该符号是否能体现出产品属性以及想要表达的意思，例如“¥”适合攒钱、理财相关的应用，而“+-×÷”则适合用于计算器或数学相关的应用；其次，符号跟数字一样，都比较简单，需经过二次创作后才会使用。
1）线性图形
线性风格的应用图标能给人一种简洁轻快的感觉，设计师通过提取产品的品牌信息、功能服务等进行创意设计，将得到的关键词以一条或多条线段组成高度抽象的图形来达到信息传播的目的。
通常以反白的形式出现，背景可以是单色、渐变色或加以辅助图形点缀。
线性图形非常适合文艺类简约风格的应用，通过不同的线条带给用户不同的心理感受，例如直线代表大方、专业、正直；斜线代表张力、速度；曲线代表流畅、飘逸及柔软等。
设计时，切记图形不能过于复杂，否则会影响其辨识度，增加用户的认知成本，也不利于品牌推广。
2）面性图形
也可称之为剪影图形，根据产品属性，将日常生活中被大众所熟知的动物、植物、食品、工具、玩具…等事物进行简化，通过刻画事物的造型轮廓来形成独立的剪影图形。
高识别度的剪影图形会让整体看起来非常醒目，提高信息传播的效率，只要控制好造型，即便把图标缩到很小也能清晰辨认。
因现实世界中事务的复杂性，被提炼出的图形如果细节过多会显的复杂且不够干练、细节过少则难以辨认，所以需要对图形进行创意加工，最终以确保应用图标的功能和美感兼具。
3）几何图形
几何图形在应用图标中使用的很广泛，可以是线性或面性，表现形式也非常丰富，利用几何图形通过单独、组合、布尔运算等方式形成简单且个性化的创意图形，带给用户简约、现代、空间、热闹等不同的心理感受。
几何图形构图简洁，设计形式丰富多样，想设计出具备设计感和差异化的应用图标，很考验设计师的创意能力。
对纯色剪影图形增加太多细节，无疑是将其“大卸八块”，变成一堆零件，但通过多色、渐变、图层样式等表现手法设计成卡通形象，就完全不一样了。
卡通形象能体现出产品的生命力、亲和力，以及直观且易于理解和记忆的特质，对品牌形象的塑造、传播起到了很好作用。
在画卡通形象时，需要注意产品主用户群体的年龄段，切勿一开始就把活泼可爱作为卡通形象的代名词，避免绝对低龄化的表达，同时需要设计师有一定的绘画功底。
利用人体的局部元素，如眼睛、嘴巴、手足、头部等，再结合常见的表情动作进行图形化设计，相当于给原本冷冰冰的图形赋予了生命力，传达出不一样的情感，而且用户原本就对人体元素敏感度更高，更容易打动用户并形成较强的记忆。
拟人化的应用图标会显得亲民，便于拉近与用户之间的关系，适度在抽象的图形上加入情感化（动作/表情）表达，能生动、形象的体现出产品独有的特性。
如果想要较强的视觉冲击力，建议元素不要过多，最好是对某个单一的元素作放大或特写处理，让用户看到更多的细节，也可用夸张、比喻、衬托等表现手法强化特点。
拟物化图标使用的比较少，它更偏向于某种行业类型，例如工具、游戏类型的应用，通过超接近于现实世界中的物体造型，基本不需要用户思考，一眼就能理解，但也正因为这种特性，信息量的传播受到很大局限，仅适合单一且大众化的信息传达。
在如今，想同时融入行业、属性、品牌等多元化内容的信息化时代，显然不太实用了。
应用图标背景通常以单色、渐变色居多，除此之外，还可以添加与主体图形相呼应的辅助图形背景，以丰富图标的视觉层次。图形背景一定是为衬托或突出主体图形的辅助存在，切勿过分表达，以免喧宾夺主。
当主体图形的结构、色彩不是很复杂，且产品面对的是年轻化用户群体时，可通过色彩拼接、晶格化或多种鲜明的色彩渐变等方式设计出炫彩效果，色彩表现丰富的应用图标，能带给用户更强的视觉冲击力。色彩可多但不可乱，需要把控好色彩之间的对比关系。
常见于在特定的节日中，例如618、双11、双12及传统节日等，产品会存在促销、打折活动，为了更早的让用户知道，会在应用图标的某个区域以标签的方式出现，起到引导用户的作用。
不过这种表现方式具有时效性，活动截止即图标样式复原。
通过配色或节日相关的元素点缀，营造出一种感同身受的节日氛围。例如：春节期间，部分应用图标背景会调整为红色，并使用灯笼、烟花、文案等元素点缀，制造出普天同庆、与用户同乐的喜庆感，或者在高考期间鼓励学生，少了套路、多了真诚，给用户留下较深的印象。
通过元素的大小、长短、虚实、稀疏、方向以及不同的色彩、明暗关系等方式进行对比，形成强烈的反差效果，同时兼具张力和美感，这也是应用图标设计中很常见的技法表现之一。
对称在自然界中随处可见，在互联网设计中也是如此，应用图标中的主体图形以对称的方式呈现，能给用户平衡、和谐的感觉，也让图标更具有观赏性。
将应用图标中的主体图形分割，赋予不同的颜色、样式等，明确层级划分，可提升图标的美感。例如：将色块分割成不同的比例、形状，就能组合成一个完整的熊猫图形（百度搜“熊猫剪影”图片）。
如果适合使用0.168黄金比例分割就再好不过了，这是被公认为最具美感的比例。
将相同或相近的图形以某种规律连续性的排列，相比单调的图形，会更加饱满。重复性的表现手法以大小、色彩、位置、形状等作为出发点进行有序的排列，最终形成一种规律、整齐的节奏和艺术感。
需要注意的是基础图形不能过于复杂，一定是有规律的重复，否则会让图形变的混乱，无法形成整体。
在保证识别度清晰的前提下，将两个或以上的元素相互重叠、交叉在一起，能形成前后左右的层级关系，制造空间感，同时也能将多个图形关联在一起，避免图标元素零散或单调，让整体性更强，丰富用户视觉感知。
正负形也是常见的表现手法之一，利用正图为底，通过减去底层挖空的方式突出（错觉）负形，将产品特征、属性及服务多途径的传达给用户，可谓是“一石二鸟”。
正负形图标能将信息传播最大化，且设计感十足，好的正负形图标能给用户形成独特的记忆点，但设计时需要注意正、负衔接的顺畅度，否则无法清晰的传播信息。
通过产品属性、功能或特点进行思维发散，例如：夏天，我们会想到空调、海滩、冰淇淋、比基尼、裙子（女性）、夜空等一系列相关联的事和物，搜集起来并做好整理归类，确定大致的设计方向。
确定了大致的设计方向，就去找同行业、同类型或相似的应用图标分析其形状、配色、组合类型等，取长补短，这也是避免同质化非常重要的一个环节，帮助自己在后续设计出具备差异化的应用图标做铺垫。
可以从产品名称或功能属性方面找出产品最想传达的核心信息，并提炼出关键词。切记，关键词不可脱离带水、表意不明确，一定要够精炼、能表达出核心内容。关键词在精不在多，如果太多，需要通过层层递进，筛选出“一主三辅”，要知道这关系着后续应用图标传达信息的精准度。
将上一步得到的关键词转化成抽象图形，进行视觉化提炼，这时应用图标的雏形已经形成，再结合前面所提到的图形分类、表现手法以及注意事项等，进入图标绘制流程。关于图标设计规范及原则，在之前的《图标篇 | 图标设计必备的基础知识！》文章中有详细说明，这里不做阐述。
基本图形绘制完成后，通过添加点缀、辅助图形、背景处理等方式丰富图标细节，进行精细化处理，使其更精致，具备高识别度及品质感。
分别通过移动端应用商店列表、应用详情、设置中应用列表、桌面以及WEB商店等，对不同位置的大小、不同的桌面背景进行虚拟测试，以确保在不同场景中都能被用户高度识别，如果这些问题等着被用户发现，很可能给产品带来不利的影响。
需要对iOS和Android系统各输出一套图标，iOS只需一个1024px的切图便能适配所有，且无需设定圆角。Android则需要多套切图规范，如512px、198px、144px、96px、72px、48px，圆角半径以512px为基准设定为90px（参考值）。
这些固定的尺寸规范并不在技术能力范畴，如果实在不清楚，需要用时就“百度一下”一大把，或直接找开发人员拿尺寸都不是难事。
首先，笔者要感谢耐心看到这里的小伙伴，希望总结的内容能帮到大家，在前期设计中作为资料参考，避免出现常见的问题，防止进入误区。
其次，要想设计出优秀的应用图标仅看上述内容是远远不够的，少不了平时的多看、多练、多思考，需日积月累，逐渐提升自己的视觉审美、造型提炼、执行效率等多方面设计能力。
应用图标的总结分享就到这里了，对你有帮助的话就给笔者点个赞吧，如果有不同意见，欢迎在评论区交流或指正，以便查漏补缺，共同进步。
大漠飞鹰；公众号：能量眼球，人人都是产品经理专栏作家。致力于产品需求的驱动、产品体验的挖掘，利用设计的手段为受众用户带来更好的体验，即好看、好用。
本文原创发布于人人都是产品经理，未经许可，禁止转载
题图来自Unsplash，基于 CC0 协议
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
编剧导语：折叠菜单是在页面中垂直堆叠的菜单列表，通过展开/折叠来显示或隐藏更多菜单内容。APP中的折叠菜单该如何设计呢？本文作者分享了折叠菜单的设计解析及设计应用，一起来看看吧！
大家好，这里是设计夹，今天为大家分享的是「折叠菜单」。
折叠菜单(Accordion)，又称手风琴菜单，是在页面中垂直堆叠的菜单列表，通过展开/折叠来显示或隐藏更多菜单内容。
接下里通过讲解折叠菜单的构成、样式和设计解析来更进一步了解折叠菜单的运用～
折叠菜单的状态包括收起、展开、悬停、选中、禁用状态等。
在折叠菜单中，通常用“V形”图标表示菜单展开/收起的状态。“V形”图标可以在左侧，也可以放在右侧，用来表示状态。
除了使用最常见的“V形”图标，还可以用以下图标来代替：上/下填充图标；加号/减号；向上/向下箭头。
当我们把展开图标放在右侧的情况下，我们可以面板左侧设计一些图标，来增强菜单的含义，并让页面看起来更精致。
在某些场景下，还可以通过使用不同的颜色，更加直观地分隔每个菜单。
在页面设计中，大多数情况下都是使用封闭式折叠面板。
通过一条浅色的的分隔线将不同的菜单分隔开，这种样式的优点是可以节省一些竖向的屏幕空间，尤其是在移动端屏幕尺寸较小的情况下。
分离式折叠面板常用在桌面端中，每个菜单的展示更清晰，设计样式更简洁。
突出显示菜单展开的状态，这样在多个折叠菜单打开的情况下，用户也能清晰找到需要的信息。
常用的突出显示的方式有：增加阴影、背景填充、轮廓描边等。
例如在页面背景是白色的情况下，我们可以使用透明度很低的灰色作为下拉菜单的背景，更清晰地展示展开的菜单。另外，还可以为下来菜单填充和品牌色一致的颜色描边，起到强调品牌的效果。
通过在主菜单的下面添加已选择的内容，这样在不需要展开面板的情况下，用户就能知道选择了哪些内容，进一步提高操作效率。
当已选内容太多时，我们不可能将这些内容全部在主菜单罗列出来，在这样的情况下，可以使用数字徽标的形式来展示已选择的菜单数。这样的设计有点像购物车中不断变化的数字徽标，告诉用户加购的数量。
通过在折叠面板中添加提示文案，起到辅助作用，展示更多和菜单相关的信息。这种设计形式更适合用在移动端中，在有限的屏幕尺寸上尽可能多的展示内容。
等宽使用：在移动端中使用等宽的折叠菜单，方方便用户点击操作。
侧边栏：将折叠菜单放在侧边的导航抽屉中，点击左上角的图标来展开菜单项。
菜单筛选：将侧边栏与折叠面板配合使用，实现菜单筛选的功能。
侧边导航：和移动端类似，桌面端最常用的方法是把折叠菜单放到页面左侧，作为网页的侧边导航使用。
过滤器：根据桌面端的页面布局结构，折叠菜单可以放在页面左侧或右侧，实现精确查找、内容过滤等功能。
以上就是折叠菜单的设计解析及设计应用，希望通过这些知识能帮你进一步了解折叠菜单的用法。
「组件系列」的其他文章，近期也会不断更新，欢迎大家关注~
作者：Clippp，微信公众号：Clip设计夹。每周精选设计文章，专注分享关于产品、交互、UI视觉上的设计思考。
本文原创发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自 Pixabay，基于CC0协议。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
编辑导语：B端产品的展现形式包含了很多类型，标签页、弹窗、悬浮层等等。本篇文章中作者分享了如何正确的呈现B端产品，让产品的交互体验更加丝滑。感兴趣的小伙伴们快来一起看看吧，希望对你有所帮助。
在B端产品操作中，需要高频率地打开各类链接和按钮，如果点击后需要展示新的内容，那么展现形式就包含了很多种类型，标签页、新页面、悬浮层、弹窗、抽屉等等。
在面对数量庞大的B端页面、组件、交互场景下，应该选择哪种展示形式就变成了一个棘手的问题。
本篇分享就将集中在解决如何选择正确的呈现形式上，让产品的交互体验更顺滑。
网页是一种可视化的UI界面，也是一种内容载体，它是浏览器访问网站后显示的主要对象，也是浏览器展示内容中层级最高的单位。
在同一个网站中，如果我们想要访问其它网页，就需要点击按钮或链接触发，这时候，打开新网页的方式就有两种，在新窗口/标签中打开（_blank）或者在本窗口/标签中打开（_self）。
不管是哪种，本质上都需要浏览器重新加载新的页面。对于一般的企业官网、新闻网站来说，这种加载的模式没有太大的问题，因为操作频次相对适中，用户中间会有比较长的时间停顿下来查看页面的内容信息。
而B端项目则不同，虽然也有不少查看页面信息的需求，但是包含了更多需要短平快完成操作目标的使用场景，比如修改个标题，更改商品价格，添加分类字段等。
如果所有高频操作的场景，都要重新加载页面，使用起来的 “顿挫感” 是非常强的，降低使用体验。
早期的网站加载内容必须刷新页面，所以顿挫感是难以解决的，只能想办法减少跳转流程来提升用户体验。
随着网页技术的发展，异步处理（AJAX数据交换方式）技术的应用，让网页的内容可以通过不刷新或加载新网页的形式加载和显示。
简单解释，就是早期的网页加载完成以后就是 “静止” 的，里面所有内容是固定的（不是HTML的静态）。而异步处理，就是让页面中的指定模块处于 “运动” 的状态，客户端可以在不重载网页的情况下只加载和更新这个模块的内容。
比如下面的案例，设置不同的条件选项，在过去的网页中只能重载页面更新，而使用异步处理就可以直接和服务器请求数据刷新这个图表模块，而不用重载整个页面。
所以，在B端项目中，我们不再是只有重载网页一个选项，而有了其它的选择，如下图所示。
其中，网页展示作为一个基础展示对象，我就不多做介绍了。我会通过分别介绍其它几个内容的载体，帮助大家区分它们和重载页面有何不同，以及如何正确选择内容加载形式。
首先介绍浮层，它是我对通过悬浮在页面基础内容之上的内容层的统称。例如各类气泡、提示框、下拉菜单，都是浮层的表现形式。
浮层是比较底层的形式，其展示内的容完全不需要使用一个新的页面，且和触发的元素有较强的视觉联系（对比弹窗）。
浮层并不是由内容的多和少决定的，复杂的浮层可以包含非常多的交互选项和内容信息，导致我们很容易和下方解释的弹窗搞混。
比如客户端软件常见的隐藏式侧边栏，搜索栏中展开的复杂面板，都是浮层的一种而不是弹窗。
浮层最大的特点，源自它的位置定义逻辑，它会和触发它的元素具有非常紧密的位置关系，而不是像弹窗一样无差别显示在界面或浏览器视图的固定区域。
如果我们想要显示内容，完全没到用一个新页面展示的地步（如搜索建议面板），且和触发它的控件有较强的联系，就可以考虑使用浮层来展示。
弹窗，也是一种悬浮在基础内容之上的内容层，它和浮层的不同之处，就在于弹窗通常是居中固定的显示区域，和触发它的元素没有什么位置联系。并且，弹窗可以包含的内容量级也是高于浮层的。基础的弹窗包含强提示弹窗，或类似注册登录这种表单弹窗。
而高级的弹窗，则类似下方案例，约等于打开一个独立的网页。
之所以使用这些高级弹窗作为页面载体，原因就是对原触发页面的使用和关注并没有结束，需要支持快速关闭当前的窗口并返回原来的页面中去。
比如在一个非常长的列表中，你下滑了几十页的高度，肯定不想放弃掉当前的页面位置，所以Behance或者花瓣等应用，都采用窗口模式加载新页面。
或者类似一个列表页面中需要大量创建新的数据，这些数据又不复杂。于是就通过弹窗表单的形式，快速完成创建并在原页面中再次点击 “新增” 按钮。
高级的弹窗使用除了保持原页面位置、高频操作等防止加载的原因之外，还有个更重要的特征，就是强制吸引用户的注意力到窗口上。
因为弹窗主要以模态 （Modal，后方有黑色遮罩）居中显示，通过深色蒙版进行前后隔断，凸显弹窗区域，意味着我们强制让用户关注眼前的信息和任务。
如果我们想要显示的内容，需要保留原页面状态，减少页面跳转数量，又需求用户强行关注，就可以使用这种模式展示。
最后，就是最难选择，也最容易和其它组件搞混的抽屉了。
抽屉本身的特征包含悬浮属性，覆盖在原页面之上。而我们常见的侧边栏、侧边菜单并不能和抽屉画上等号，因为他们会占用画布的实际显示区域，和原有内容同层。
比如下方案例中，Jira左侧导航（不分左右）可以隐藏收入，页面内容变大，这是侧边栏。而点击列表选项，右侧弹窗的窗口覆盖原有页面，才是抽屉。
和高级的弹窗类似，抽屉也可以当成一个独立的页面展示信息。但它和弹窗不同的是，抽屉通常是从页面的右侧展开，没有遮挡左侧的空间。它的主要特征是还需要在原页面进行交互。
比如Teambition案例中的列表，我们每开一个抽屉都还可以直接点击原列表的其它选项切换下一个抽屉，省掉关闭步骤或者原页面被遮挡的情况。
它比较适合应用在表格/列表环境中，作为表格/列表内容的详情页形式展开，这样用户可以在一个页面中快速查看不同列表的具体信息或编辑。并且，表格/列表本身的特征会将标题放在最左侧，也方便抽屉的切换。
也因为这种特性，抽屉不太需要使用模态和遮罩将左侧内容遮挡掉。如果需要通过遮挡来吸引用户注意力，那么这种情况往往更适合使用弹窗。
所以，如果不想通过新页面打开的列表详情内容，且不是强制要求用户聚焦的任务，就可以使用抽屉的形式展现。
以上就是几种基本的内容展现形式说明，时间关系还有后半部分关于如何站在系统框架级的角度使用内容载体的分享，我会留在下次分享。
如果有关于这部分的实际项目疑问，也可以在下方留言。
我们下篇再见～
作者：酸梅干超人；公众号：超人的电话亭
本文由 @超人的电话亭 原创发布于人人都是产品经理。未经许可，禁止转载。
题图来自 Unsplash，基于CC0协议。
专栏作家
韩叙，微信公众号：运营狗工作日记，人人都是产品经理专栏作家。原猫眼电影产品运营专家，创业时经历了0到1的艰辛，在百度时规划了海量用户的玩法。从业10年，专注互联网运营领域，包括产品运营、用户运营、社区运营和UGC运营。
本文原创发布于人人都是产品经理，未经许可，不得转载。
题图来自Unsplash，基于CC0协议。
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
编辑导语：产品设计上的许多细节都有可能影响到用户的产品使用体验，进而影响到产品的打开率以及留存率等。这就要求产品设计师在交互体验层上结合一定小技巧，以提升用户体验。本篇文章里，作者结合案例，总结了一些UI技巧，一起来看看吧。
对于很多设计师来讲在设计界面过程中往往会忽略掉很多的细节，比如卡片的排版、文字的排版、各种状态的反馈等等，特别是刚入行的设计师在做页面时往往是直接拿到竞品的页面搬运到自己产品上，这种做法理论上不会让自己的页面出错。
但是很多人往往忽略了一点，就是别人这么设计的目标是什么，是否会匹配自己的设计目标，如果不了解这些贸然地去搬运设计，那么时间久了会养成一个不好的习惯，需要设计师去进行设计时可能就会遇到很多难点，作为初级设计师或者刚入行的设计师，前期可以去进行搬运设计，但是一定要了解别人为什么这么做。
接下来将分享12个设计上的小技巧，大部分在日常设计中都会遇到，了解到这些设计细节，可以让我们的界面更加高效、易用、美观提升用户体验。
我在做界面时可以时常利用交互手势去帮助用户提升操作效率，避免繁杂小操作步骤。
左图中针对单条消息的操作汇聚到了icon内，对于用户理解成本比较高，当用户想要去删除或者屏蔽消息时需要通过聚合入口才能完成操作，大大的提升了用户操作成本。
我们可以在类似的消息场景或者其他列表形式的场景中，添加一些交互手势，随着手机系统的更新，用户的操作习惯已经被各大产品培养的非常成熟，并不用担心用户无法操作的情况，增加手势有弊端也有优势，右图中手势增加了用户首次使用的学习成本，但是降低了高频功能的操作成本，这个理论上是可以接受的。
利用拇指定律把关键的操作入口元素等，放置右侧提升用户操作效率。
左图中把按钮放置了模块左下侧，这样是不利于用户进行操作，当然如果整个模块的热区都是同一个，这样并没有什么问题，用户点击卡片区域任何位置都能够完成下一步操作，如果出现一个模块内存在多个热区入口，而用户想要到达目标必须通过按钮点击才能进入，那么左图中的排版位置就会提升用户的操作时间。
当一个页面内出现多个相同模块或者一个模块出现多个热区入口时，按钮点击区域有限，我们设计时就可以利用拇指定律进行排版，如右图中布局，将按钮放置右侧可以便于用户在右手操作时快速到达目标，因为国内使用右手的人数远远大于左手用户，所以我们需要满足大部分的体验，合理利用拇指定律。
相关定律：费兹定律、拇指定律。
对于我们来讲很多东西是简单的，但是不乏会有一些用户是陌生的，对于他们来讲可能会有填写成本。
左图中理论上并不是错，我们经常设计表单时都会用的提示话术，但是我们需要考虑更多维度的东西，对于我们来讲填写这种表单非常简单，例如个别用户，可能会临时忘了邮箱格式，又或者输入手机号时多填了一位数等等情况，用户错误一次操作步骤就会多一步，反之就是降低使用产品时的体验。
如右图中，我们设计时可以更改提示的话术，帮助用户把问题前置，当用户看到提示邮箱时就会按照格式去填写，通过把手机号的位数拆分，让用户更好的记忆数字，这样无论对产品还是用户都没有任何损失，反而能降低错误频率。
无论是页面还是模块，用户在阅读时是已扫读的方式进行浏览，我们需要保证页面的文字元素具备一定的规律，以此来提升阅读效率。
左图中可以看到，文字与输入框放在同一列进行展示，这样一方面不利于后续的文字扩展，通常这种表单填写的页面，在页面中都是具有很大的空间位置，这样排布会造成视觉上的不规律和拥挤，降低了筛选效率，当然如果是模块区域很小的情况下，可以适当的进行使用。
右图中我们把文字与输入区域上下排布，虽然文字长短不一，但依据对齐原则在竖列情况看是具备对齐规律的，有效地提升信息筛选效率。
我们在做系统功能模块时需要注意添加功能点击引导，用户对此类消息模块认知上会默认不可点击，因此需要我们加以引导。
我们常见的消息模块内容为两种，一种是互动类消息即用户与用户，另一种时是系统消息即产品推送的内容。
前者基于用户习惯而言用户已经没有使用成本默认是可以进行点击交互，后者因为部分产品会把系统消息作为展示的形式给用户，但是有些产品的系统消息却是可以点击交互，这就导致了用户认知上出现了混乱，左图中像系统通知功能通知其实从视觉上看，并不具备点击欲望，因此可能会对用户造成错误的理解。
当我们在设计时需要注意，若消息列表中存在系统类消息并且可以进行交互，在设计时可以添加向箭头、红点提示等方式告知用户可以点击，如果该功能有数据指标，这种方式也同样能赋能产品指标。
目前市场上产品几乎都有深色版本，我们在设计时深色版本的颜色时需要注意饱和度的高低，同样的饱和度在黑色背景上会比白色背景上更加亮，这跟人的视觉感官有很大的关系，因此我们在做黑色版本时需要注意是否调整饱和度。
在黑色背景中使用过高的饱和度会刺激眼睛，很多深色版本都是从白色模式通过反向颜色直接调整，而彩色元素会直接运用到深色中，那么就会造成一个问题，因为我们习惯在白色模式下看颜色，忽然切换到黑色中看彩色刺激程度非常高“就像黑夜中忽然打开手电筒”，对眼睛的伤害很高。
我们在设计深色版本时可以根据产品主色降低饱和度，包括图标等元素，以此来缓冲对用户视觉感官的刺激，目前很多大厂的处理方式是直接在彩色元素上添加一层黑色透明遮罩进行处理，这样无需在添加更多的颜色规范。
在设计模块或者页面时不建议使用特殊字体来突出文字层级，这样会导致视觉不统一，以及开发成本增加。
左图中灰色字使用了特殊字体，看起来虽然好看，但在实际开发中会导致开发成本增加，我们产品一般使用的是系统字体，若使用特殊字体需要让开发同学添加对应字体包，这样会导致我们的产品包的内存过大，除非产品中默认一直使用该特殊字体，这样才有使用的价值。
一般系统字体就能够满足我们的设计需求，在UI设计中我们可以通过不同的字体粗细来调整文字层级，这样能够保证视觉更加统一，减少产品包大小。
在设计时需要注意多个入口在同一位置时，需要把它们进行层级划分，避免影响用户决策。
图中可以看到，两个面性按钮非常明显的在模块中，当用户在浏览页面中很容易出现困惑，到底需要点击哪个才能购买预定，因为两个都是面性无法快速进行定位入口，这样不仅影响用户决策效率，还会影响产品点击率。
建议设计类似模块中时，无论是pc还是移动端都需要对入口进行结构划分，这样能够使用户在浏览页面时快速定位到入口，提升决策效率，做体验是解决用户的思考时间。
在UI设计中使用图标时，要保持一致性，确保他们共有相同的视觉风格，相同的重量，填充和描边。不要混搭。
可以看到左图中的图标并不统一，线性里面掺杂着面性点缀，这在UI设计中严重违背了一致性的原则，会导致我们的页面不够严谨专业。
在设计图标时，首先要保证图标风格一致，其次在这个基础上保证图标的描边粗细、视觉占比重量、颜色等，不要出现混搭风格。
在设计页面模块时，可以多利对比度的方式来体现设计的表现力，鲜明直接的色值能够直接表达事物的性质以及特点，通过对比，也能够更加清晰的强调设计中的重点，这样给用户的印象会更深刻，同样会给产品带来一定的趣味性。
左图中单看视觉也没问题，只是在表现上图标与背景融入到一块了，导致视觉表现力较差，在设计中如果符合产品风格的前提下，我们可以避免这种方式，这种方式虽然具有视觉效果但不够强，对用户的记忆点不够深刻。
设计到类似的模块时我们可以利用对比的关系，以此突出视觉元素，通过颜色焦点引导用户关注，强化用户印象同时还能增加页面的视觉表现力和氛围感。
在设计图文叠加的卡片或者页面时，我们需要注意不同明度的图片上，文字识别是否有阻碍，一般情况会通过遮罩方式避免这个情况。
左图中在深色图片下字体的可读性是没有问题的，但当出现文字底部区域的图片相对复杂时便会影响识别，第二种情况当图片明度过高时文字同样无法识别，试想一下，一张白色调性的图片上放文字，那基本无法看清，严重影响阅读体验。
在界面设计时如果遇到类似的卡片，建议在文字区域添加渐变遮罩的方式，以此保证文字的识别度，或者添加纯黑色透明遮罩进行处理，这样可以兼容不同环境的图片与文字的重叠，保证基本的阅读体验。
UI设计中经常会遇到弹窗，弹窗是需要配合页面遮罩来让用户进行专注操作，不同的遮罩透明度所带来的专注度也不同。
左图中我们看到，遮罩的透明度过低，我案例设置的是17%，此时弹窗内容与页面内容结构上区分并不是很明显，一般弹窗是用来让用户跳脱页面内容，从而浏览弹窗内容，转变用户目标，当弹窗无法聚焦时便很难达到目标，并且视觉上层级更加混乱。
右图中案例我把透明度调整到了37%，我们此时再看弹窗很容易就忽略页面内容，因为灰色越高，遮挡度越高，用户跳脱感就越强，这样我们可以让用户专注弹窗内容，同时视觉结构上也区分很明显
作者：爱吃猫的鱼；公众号：防脱发药水
本文由 @爱吃猫的鱼 原创发布于人人都是产品经理。未经许可，禁止转载。
题图来自Pexels，基于CC0协议
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
蓝蓝设计的小编 http://www.lanlanwork.com