对于设计师来说，遇到设计瓶颈期很正常，入行一段时间后所具备的能力就会达到峰值，无法突破峰值就会遇到瓶颈。主要在设计思维和设计技法层面受限，打开设计思维才能突破瓶颈期，通过积累优秀的案例并进行总结分析，可以更快的打破思维限制。
分享目录
一、趣味性的登录设计
二、瓷片区的趣味性手势交互
三、营造怀旧感的温馨体验
四、趣味性的进度提示设计
五、场景感的点击操作
六、动效引导用户发帖
七、卡通形象强化瓷片区视觉感
八、不改变布局的曝光强化
九、可以晃动的 Banner 图
十、场景感的底部标签栏设计
一、趣味性的登录设计
登录是进入产品的第一道防线，也容易让用户产生排斥感，降低用户的防备心理才能提高登录的意愿度。
盯潮 App 在登录界面中，以潮流元素和商品等内容进行设计，使得页面视觉感丰富。晃动手机时元素也会移动，在掉落或者碰撞手机边缘时配合震动感，让体验变得非常有趣。趣味性的设计降低了用户的排斥感，提升了登录的意愿度和体验感。
二、瓷片区的趣味性手势交互
瓷片区、Banner、金刚区是产品中的三大运营模块，起到提高曝光度达到引流的目的。瓷片区在页面中的布局比较灵活，设计表现也非常丰富。
盯潮 App 在首页瓷片区设计中，以栅格式布局进行区块划分，占比较大的模块类似于 Banner 式表现。通过手势可以任意拖动实现切换，趣味性和互动性相结合，提高了用户的使用乐趣。
三、营造怀旧感的温馨体验
童年的记忆是我们逝去的青春，每每看到小时候的画面，总能勾起我们童年的回忆。最近发现一款结合怀旧感营造设计风格的产品，名字叫“软眠眠”。
这是一款拯救失眠者的治愈系睡眠 App，以一幅小时候生活的环境插画填充界面背景，图标设计也是提取小时候的玩物或者生活用品，视觉风格营造极强的怀旧感。无论是画风还是配色、配乐等，都勾起了我们满满的回忆，带给用户温馨的体验。
四、趣味性的进度提示设计
在完成步骤化和消耗数据等内容表达层面会选择进度条，通过可视化的表达提高用户的理解，减轻信息认知负担。
软眠眠 App 在定制睡眠计划的过程中，完成选项时的进度条设计非常有意思，是一个小孩通过拉动绳子移动。拉动过程中结合动态表达，配合手绘风的表现让人感觉轻松愉快，趣味性的设计也提高了完成选项任务的意愿度。
五、场景感的点击操作
在保障底层操作体验的基础上，设计会越来越讲究细节的体验，逐步强化情感化的融入和场景感的体验。
最近在体验小雞上工 App 时，在找工作的列表设计中加入了“抢”按钮，在点击列表时按钮会有按压的动效过程。模拟抢拍按钮获得机会的体验，营造场景氛围感，提高了设计表达的趣味性。
六、动效引导用户发帖
微动效可以提高功能的吸引力，也能让互动体验变得更有趣，可以通过动效引导功能操作和提高关注度。
腾讯动漫 App 在圈子栏目中，以 IP 形象结合动效强化发帖按钮，以此引导用户参与发帖。动效不仅突出了发帖的关注度，也让发帖按钮设计更有亲和力，进而提升用户的点击欲。
七、卡通形象强化瓷片区视觉感
瓷片区起到强化曝光达到流量引导的作用，提高该模块的吸引力至关重要，视觉感的突出也尤为重要。
会玩 App 在首页“一起玩”的瓷片区设计中，以卡通形象结合丰富的色彩进行表现，各种装扮的形象丰富视觉感。卡通形象设计风格统一，卡片色彩丰富且协调，整体瓷片区视觉冲击力十足。
八、不改变布局的曝光强化
在当前产品结构不变的基础上，如何提高局部内容或者主推内容的曝光度，是产品设计师不断探索的方向。
爱奇艺 App 首页推荐栏目 Banner 图下方，默认情况下以宫格布局推荐影片。前段时间在打开时发现了一个临时设计表达，保持当前结构布局不变，放大了图片填充和推荐影片，整张画面填充宫格，视觉张力十足。该设计表达既不会干扰当前布局，也能强化推荐影片的曝光度，解决方案值得探索。
九、可以晃动的 Banner 图
Banner 可以在创意、造型、互动形式等方面进行设计发挥，也呈现了许多优秀的方案，产品设计师也在不断尝试更多的可能性。
最近在体验盯潮 App 时，发售栏目顶部 Banner 图设计引人关注。当用户左右晃动手机时，Banner 图背景层不动，而文案和产品等元素层会跟着晃动的频率左右移动。可以晃动的 Banner 图非常有意思，成功地吸引了用户的关注度和点击欲。
十、场景感的底部标签栏设计
底部标签栏设计可以在背景、造型、图标等元素中发挥，其中图标设计中的发挥相对更多一些，在背景和造型层面的案例较少，不过最近也发现了一个解决方案。
在体验云游万里长城小程序时，进入之后的小程序底部标签栏设计结合了长城墙面和结构，非常有场景代入感。设计了深色版和浅色版，图标造型设计也融入了长城元素，不失为一种优秀的差异化设计探索。
小结
希望本期的分享可以开启大家更多设计思维，从优秀的设计方案中发现设计的轨迹，复用到后期的项目设计中。本文描述属于个人理解和总结，不足之处欢迎大家留言补充，我们互相进步。
形状设计可以影响整个界面的视觉效果。通过选择适当的形状和排列方式，可以创造出令人愉悦、易于使用和富有吸引力的界面。
在UI设计中，形状设计是一个至关重要的环节。对其选择和排列会直接影响到界面的美观度和用户的交互体验。接下来将详细探讨UI设计中的形状设计，包括其重要性、基本原则和实际应用。
形状可以帮助用户理解和操作界面。一个优秀的形状设计应该具有清晰、简洁和易于理解的特点，我们在平时做设计中，需要将这些原则深入到每一个细节中。
在设计中，形状的识别和理解是至关重要的。一个成功的形状设计应该能够快速地被用户识别并理解。例如，一个常见的形状可以使用不同的颜色和大小来区分主要内容和次要内容，从而引导用户的注意力。
1、形状的一致性
在UI设计中，一致性是一个非常重要的原则。一个好的形状设计应该在整个应用程序中保持一致，从而使用户可以轻松地导航和操作。例如，闲鱼APP里的所有的按钮可以使用相同的形状和颜色，以便用户可以轻松地识别并操作。
2、形状的个性化与品牌识别
一个独特的形状设计可以帮助品牌在竞争激烈的市场中脱颖而出。一个好的形状设计应该能够体现品牌的个性和价值观，从而增强品牌的识别度。使用独特的图标和标志来传达其品牌形象和价值观。例如：小米的logo、京东狗、淘宝天猫。
1、按钮设计
按钮是UI设计中最重要的元素之一。一个好的按钮设计应该具有清晰的形状和易于理解的标签。
按钮形状主要有直角、小圆角、全圆角三种样式。
① 直角按钮具有严谨、力量、高端的特点，适用于大牌美妆、奢侈品类产品；
② 小圆角按钮具有稳定、中性的感觉，适用于用户跨度较大的常规类产品中，例如微信、滴滴、抖音等；
③ 全圆角按钮更加温和、亲切，适用于电商类和儿童类的产品中。
按钮尺寸和比例根据iOS和Android的规范，按钮尺寸至少高于5.5毫米（36 pt），否则用户点击时会较为困难。同时，按钮长度固定，文字长度变化或是按钮长度根据文字长短而变化的设计方式也需要考虑文字距离按钮上下左右边距的比例关系。
总的来说，UI中按钮形状的设计需要结合具体的产品属性和界面风格，以及用户的使用习惯来进行综合考虑。
2、图标设计
图标是UI设计中另一种重要的具有高度概括性和视觉传达性的小尺寸图像元素。可以帮助用户快速地识别和理解功能和信息，是靠文案无法实现的。
例如，天气图标通过其形状、色彩和设计元素直观地传达不同的天气状况和气象信息，帮助人们更好地了解天气状况。又如卫生间男女图标的设计让人们易于识别和理解。
在UI设计中，图标的圆角度通常是怎么定义的呢？
① 大圆角：应用在以圆润、可爱为主要风格的UI设计中，以营造出更加柔和、亲切的视觉效果。
② 小圆角：小圆角作为一种微妙的细节元素，可以增加图标的层次感和细节。在追求设计质感的界面中，适当添加小圆角可以使图标更加精致和有品质感。
③ 无圆角：应用在科技或现代感的UI设计中，以营造出更加硬朗、冷峻的视觉效果。但使用需要克制，过多的直角可能会让整个界面显得生硬和冷感。
补充一点，我发现一个重要细节，就是很多人在计算内圆角数值时都存在困扰。自工作以来，我注意到这个问题影响了很多人，他们不知道如何正确地计算内圆角的数值。为了解决这个问题，通过以下方式帮助大家更好地掌握计算内圆角数值的方法。
3、输入框设计
输入框是用户输入信息的重要区域。在UI设计中，输入框的形状设计可以根据实际需求和设计风格进行变化。以下是一些常见的输入框形状设计：
① 方型输入框：这是最常见的输入框形状，它以方形的形式呈现，可以在其中输入文本或信息。这种设计简单明了，易于使用，适用于大多数场景。
② 圆角矩形输入框：这种输入框在四个角上采用了圆角设计，使得整个输入框看起来更加柔和、友好。这种设计在一些需要强调用户输入的场景下较为常见。
③ 下拉菜单输入框：这种输入框可以让用户从下拉菜单中选择一个选项，而不是直接在文本框中输入。这种设计适用于一些固定选项的场景，可以减少用户的输入操作。
④ 按钮式输入框：这种输入框将输入框和按钮结合在一起，用户可以点击按钮来输入信息。这种设计适用于一些需要强调点击操作的场景，例如站酷的登录。
⑤ 语音识别输入框：这种输入框允许用户通过语音来输入信息，而不是手动输入。这种设计适用于一些需要快速输入或不方便手动输入的场景，例如驾车、写字等。
总的来说，输入框的形状设计应根据实际需求和设计风格来进行选择，同时也要考虑用户的使用习惯和操作体验。
4、导航栏设计
导航栏是UI设计中重要的组成部分之一。它帮助用户在不同的页面之间进行切换和导航。在设计导航栏时，应考虑其位置、颜色和形状等因素。以下是一些常见的导航栏形状设计：
① 顶部导航栏：这是最常见的导航模式，位于页面顶部，可以包含网站的名称、主要的导航选项、搜索框等元素。这种设计简单明了，易于使用，适用于大多数场景。
② 侧边导航栏：这种导航模式位于页面左侧，通常用于二级导航或辅助导航。侧边导航栏可以以垂直或水平方向呈现，根据实际需求进行选择。
③ 底部导航栏：这种导航模式位于页面底部，通常用于一级目录的导航。底部导航栏可以包含网站的名称、主要的导航选项、搜索框等元素。这种设计操作方便，用户体验好，适用于大多数场景。
④ 弹出式导航栏：这种导航模式通常用于移动端应用，通过点击或滑动屏幕上的按钮或图标来唤出导航菜单。弹出式导航栏可以以垂直或水平方向呈现，根据实际需求进行选择。
总的来说，导航栏的形状设计应根据实际的导航模式和设计风格来进行选择，同时也要考虑用户的使用习惯和操作体验。好的导航设计应该简单明了、易于使用，能够提供清晰的信息架构和层级关系，帮助用户快速找到所需内容。
5、作为底纹设计
将形状用作底纹，可以增加图形的视觉层次感和趣味性。尤其是当使用如圆圈、条纹、曲线等形状时，可以使底纹呈现出动态感和动感。
也可以强调文字或图片中的某些元素，用来引导观者的视线，以创造出视觉焦点。比如，在一个沉闷的黑色背景上使用鲜艳的彩色形状作为底纹，可以将观者的注意力集中在那些形状上。
但是，必须着重强调的是，底纹的使用应当与整体的设计风格和主题相得益彰。若应用不当，可能会对画面的整体美感产生破坏性的影响。因此，在决定是否使用底纹时，必须慎重考虑其与整体设计的和谐度。
1、动态形状设计
随着技术的不断发展，动态形状设计已经成为一种趋势。通过使用动画和过渡效果，可以创建更具吸引力和互动性的界面。例如，使用渐变效果来平滑地转换不同的页面或状态。
2、3D和立体形状设计
3D和立体形状设计为UI设计师提供了更多的可能性。通过使用阴影、光照和深度效果，可以创建更立体、更有层次感的界面。例如，使用3D旋转效果来突出主要内容或使用阴影效果来增加界面的深度感。
3、可定制形状设计
随着用户对个性化需求的不断增加，可定制的形状设计变得越来越重要。用户希望根据自己的喜好和需求来调整界面。例如，允许用户自定义选择自己喜欢的页面主题风格。
在UI设计中，精美形状设计的关键是深入理解用户需求，注重细节，保持一致性，勇于创新，不断提高技能水平。这样才能创造符合用户口味的界面，提升用户体验。简洁地说，好的形状设计来源于用户需求、细节、一致性、创新和自我提升。
以上总结仅代表个人观点，如有不足欢迎大家补充互相进步。
企业多产品线模式下，UI体验文化打造、UI设计质量品控5个方面阐述项目快速、规模化提升多产品线整体体验中的方法论和实践经验。
SaaS 产品体验要求越来越高，用户体验已经成为产品竞争力的重要组成部分，怎样在多业务线的产品环境中做好体验设计，本文从贴合业务线的设计规范、敏捷易用的前端组件库、产品研发协作流程保障、UI体验文化打造、UI设计质量品控5个方面阐述项目快速、规模化提升多产品线整体体验过程中方法论和实践经验。
关键词：
用户体验设计；UI设计规范；多产品线；体验文化；UI设计落地
面对多产品体系，多产品线，需要积极寻找和探索适合我们客观情况的最佳实践，我们面临的问题有：
1.过往以功能堆砌为主、基本“能用”，缺乏平台规范和一致性，体验不足。
2.产品线多、体量大。
3.客户对产品体验要求越来越高。
4.产品历史包袱、修复改动困难。
5.对用户体验认知不一，协同、沟通成本高。
6.重复的开发成本。
7.第三方组件与业务的匹配度不佳。
解决以上几大难题，我们启动了UI 设计规范的搭建、UI组件库的开发等，让规范和组件库成为各产品线坚实底座的一部分，使用户体验文化赋能前端和产品经理，协同 QA 力量一起推动产品体验升级，以下整理分享的实践方法适用于中小型UED团队支撑复杂、多业务线的企业，本文尝试从以下几个方面总结和提炼实践经验，跟业界同行探讨。
设计规范体系的搭建对于新的团队，如何从复杂海量的业务场景中制定出一套适用于自己产品的UI设计规范，是第一道待翻越的高墙，完整的设计规范应该是包含视觉规范与交互规范，本文主要针对设计规范实践过程进行阐述。
贴合场景的设计规范：
虽然市面上已经有众多成熟的设计规范体系可供使用，但是当前我们所处的产品阶段、多业务 线以及复杂的业务场景等综合因素，决定了需要重新搭建一套符合我们自己业务场景的设计规 范体系。
UI规范效益最大化：
一旦我们决定制作规范，就要把规范当成一个产品去做。去梳理一套高效合理、可复用的制作流 程，去分析产出什么样的「规范产品」才能产生最大的价值。 依据规范效益模型，在规范的制定中尽可能的提高规范的通用性至90%，先解决统一性，再解决场景细分，打造高质量通用的模式库以提高质量和效率，并力求让更多人从这套设计体系中获益， 从而让规范体系发挥更大的价值。
UI规范制定的策略：
明确用户对设计规范的诉求，构建适合产品的UI设计规范，首先，需要明确规范体系的用户群体经过设计团队多轮调研，确定设计规范面向的目标用户群、基于核心用户的诉求，为后续规范内容框架的制定提供依据。
确定UI设计价值观：
产品历史包袱重，系统结构复杂，在提升用户体验时，内容表达「清晰明确」是第一要务，例如尊重已经形成的用户习惯，优化改造时，注意版本之间的衔接，让用户「清晰明确」，这也是为什么将「清晰明确」作为价值观之首，另外提升效率是企业级产品用户体验的永恒主题，同时兼顾系统的简洁与一致。
梳理UI规范框架：
UI设计规范包括设计价值观、全局规则、组件库、模式库、典型页面、移动端规范和设计资源框架整理主要从以下3个方面进行：
1.梳理现有组件，剔除不使用的部分 。
2.同类竞品的框架借鉴，查漏补缺。
3.场景验证，与业务场景深度结合经过充分论证和梳理，对规范框架做了重新定义，增补了业务缺少的内容。
如上图所示，例如对高频的工具栏组件的补充，典型页面的补充，增加模式库以及全局规则，当前第一个版本的规范框架是基于业务场景优先级最高的内容进行制定，更多的规范内容的增加依托于不断的迭代，逐渐完善规范框架。
规范内容的制定及评审：
组件规范包含：变更记录、组件定义、何时使用、组件的类型、组件的响应。
规范内容制定的原则：
1.有明确场景可依。
2.精简不必要的分支 例如在定义表单规范时，对于表单标签的对齐方式做了统一的约束，标签右对齐，输入框左对齐全局保持统一。
逻辑正确、规则明确易懂：
例如常见的alert （警告提示）名称调整为常驻提示，语义更贴合场景，便于理解。
规则的可拓展性，多场景的兼容性：
产品架构是PC端到移动端的自动适配，因此在组件设计的时候需同时考虑PC端与移动端的对应关系以及两端场景的兼容性。
协作及敏捷迭代：
规范发布后，伴随着实际项目的检验，业务场景的扩充变化，如何高效的对设计规范进行迭代，决定了设计系统能否持续的走得更远，规范内容定期评审，必须通过业务、技术、设计评审，确保规范是可用的、可落地并且易于使用的规范后期不同的规范模块专属人负责，同时有backup，可以帮助走查复盘双重保障规范的质量。
敏捷易用的前端组件库：
复杂的业务场景和多产品线特点，快速打造一套敏捷易用、高质量并符合实际业务场景的前端组件库，是提高产品研发效率、改善UI质量、提升用户体验的关键。
复杂的业务场景和多产品线特点，快速打造一套敏捷易用、高质量并符合实际业务场景的前端组件库，是提高产品研发效率、改善UI质量、提升用户体验的关键。
前端组件库建立目标：
1.提高开发效率，对高频使用、通用组件进行代码化封装，避免重复开发工作。
2.提高开发质量，通过各类业务场景和业务线的锤炼，沉淀组件代码最佳实践。
3.提高产品体验，组件封装代码化，减少在多角色协同中因为理解偏差、信息传递问题等导致的不确定性和结果不可控性，不同业务线、不行项目、共用一套基础代码，保证体验的一致性，组件的组织形式： 结合实际业务场景和原子设计理论，将组件划分为不同颗粒度：基础组件、业务组件、典型页面 组件，以适用于不同研发场景使用。
1.基础组件，基础组件为组件库最小颗粒度，构成系统界面的基本构件。
2.业务组件，在基础组件的基础上，结合具有共性业务特征的业务场景，梳理出具有业务特征的 业务组件。 3.典型页面组件，梳理具有业务特点的典型页面，相比基础组件和业务组件，典型页面更加具体， 为用户提供具有代表性的内容和框架，并准确描述用户最终看到的内容。如列表和左树右表典型 页面组件，作为最为常见的页面结构，各业务场景可复用页面组件，保证了页面组件内各基础组 件的一致性，最大程度的实现不同产品线产品中页面体验的一致性。
推进前端组件库落地执行：
前期设计规范落地到组件库过程中，面临诸多问题和阻碍，比如开发落地质量不高、内容遗漏、 各方理解不一致、验收及修复问题不到位等问题。处理这些问题对UI团队资源造成很大消耗， 通过总结复盘前期组件库落地时的经验和教训，梳理落地执行流程，在新的协作流程下，新一 批的组件开发不论在协作效率和开发质量上都有质的提升。
分层推进：
组件库开发是一个持续迭代的过程，考虑到组件库开发资源极为有限且无专职负责人员，在跟组 件库开发团队协同过程中，我们通过分步开发来解决组件库更新优化的问题并通过不断优化协作流程来助力组件库高效落地。
前端组件库分步开发原则：
1.优先级原则，优先开发适用于业务线普适场景的组件。
2.紧急性原则，对于急需的业务线所需组件优先开发。
3.快速可实现原则，开发实现成本高的组件暂缓处理。
自查走查验收：
组件UI责任人梳理出下属组件需开发落地的细节点，整理为文档，待开发人员完成组件开发后，自行参照UI提供的自查文档，查漏补缺，保障进入UI验收环节的前端组件不会出现较多的缺陷，降低后期走查和沟通修改的工作量，同时监督开发人员提高组件落地还原度和质量。
组件库的持续迭代：
UI团队通过一套标准的流程来把控组件库迭代的质量，在日常工作中经常会收到产品经理或项目 方提出新的组件需求或对现有组件的优化。UI部门作为推动组件库搭建的核心环节，需要以全局 和更深入的视角加以判断把关，保证前端组件库内容的普适性和高质量，避免组件库内容冗余， 降低研发维护成本。
产品研发协作流程保障：
好的过程是好的结果的有力保障，一个业务需求从产生到开发落地需要经过多角色协同、一系 列环节。必须依靠规范的研发协作流程，确保各角色清楚自己职责以及如何跟上下游衔接，同 时我们也希望协作流程能够确保设计资源可以向重点业务模块倾斜，以及发挥各个角色可以发 挥的作用去共同提升产品体验。
UED团队建立之初，我们面临的首要问题是：需求随机，完全取决于各产品线和产品经理 个人，为了解决这个问题，我们制定了UI融入研发体系的流程以解决合理、有效利用UI资 源的问题。
企业级产品特点、多业务线、大量面向管理员用户的具有相似页面结构和交互模式的业务 模块、产品经理跟交互团队人员配比等因素都决定了并非所有需求都需要流转到UI团队进 行设计，在判断哪些需求需要流转至UI团队设计时，我们给出了如下指导性方向：
1.用户量角度，大量终端用户使用的场景，例如订票、报销、采购页面 。
2.用户重要程度角度，核心、重要用户使用的场景 eg.公司领导、决策层。
3.通用性角度，通用组件或框架，需要UI通盘考虑各个业务线场景需求进行设计。 其他需求则主要由产品经理进行设计，UX以评审方式轻度参与。
协作流程迭代，UI验收成为必要一环： 随后我们又面临新的问题：设计还原度差，被公司老板生动的形容为：看设计稿是“精装修”， 开发落地后就成了“毛坯房”了。为尽可能确保设计还原质量，我们在研发流程中明确了所有涉 及前端页面的功能需求都需要在研发协同工具中流转到UI负责人验收，在产品团队TAPD中记 录UI缺陷、标明严重程度，对于 “严重” 级别以上UI缺陷，禁止发版。
UI工期评估合理化：
为了既能尽力配合各产品线迭代计划又要争取合理UI设计时间、保证产出质量，合理评估设计周期对UI人力管理尤其重要。对此，我们对设计需求分成了ABC三级进行评估。 对于A和B级需求，通常模块较大，先有UI设计方案再去分期迭代开发，对于这两类需求，在评估 模型中给出了大致工期概念，比如以月为单位，大于1个月或2个月。
对于C级需求，通常为产品经理先排进某个迭代再来提UI设计需求，设计范围相对明确，我们则结合典型页面数量因子和设计难度因子给出了UI工期大概评估公式，以天为单位。
1.设计难度因子：根据业务线的复杂程度而定，范围为（0.8~1.5）。
2.典型页面数量因子：评估需求范围规模（N）。
UI设计团队在协作过程中面临诸多挑战：产品线多、产品逻辑复杂、研发链路长、各级人员对产品认知及重视程度不一、好的体验设计难落地、沟通成本高等问题，想要解决这些问题，若仅靠UI团队自身力量是不够的，需要动员公司各个环节和人员重视用户体验，共同促进产 品体验提升。
搭建体验文化灌溉机制：
UI部门通过多维度的体验知识内容矩阵、多渠道多场景全员覆盖，普及和加深各级对产品体验 价值的认识，提升产品体验思考力和洞察力，帮助企业以新的视角思考业务、产品研发和用户 体验的关系，赋能产品经理及研发人员高质量的输出，“以用户为中心”和“打造产品极致体验” 的价值观根植与企业文化中，指导研发流程中各项工作最终影响到产品的战略层、范围层、结 构层、框架层和表现层这5个产品体验维度，以实现企业产品的“极致产品体验”目标。 通过搭建体验文化灌溉机制，提升全员体验意识，能为产品研发带来长久的价值：
1.提高设计还原度
2.减少培训成本
3.提升跨部门沟通效率
4.提升UI团队影响力
5.提升客户满意度
体验文化落地实践：
针对不同类型的体验知识，我们采取不同的传播渠道进行透，以期达到最好的效果，避免形式化， 将体验文化渗透、学习落到实处，最终影响产品研发的各个环节。
以下为UI团队在企业体验文化 推广的主要渠道和方法：
极致体验公众号主要发布产品体验的基础原理，体验价值、项目复盘、常见体验问题等深度长文。让公司各级人 员认识用户体验及价值，让用户体验理念深入人心。
体验知识小卡片整理产品体验小的知识点，阅读学习成本低。利用员工碎片时间，对细小体验知识点的学习，积 跬步，至千里。
直播宣讲针对重点且复杂的产品体验内容，如交互规范宣讲、重点问题复盘、产品经理及开发人员应知应 会的知识点，采用宣讲直播的方式，更好的对内容进行详细解说和疑难问题沟通。
体验调研分享UI部门成员对核心竞品进行体验调研，整理分析后对产品经理及相关人员进行分享，赋能产品经 理，为产品的体验设计提供新的思路。
UI团队专业水平一定程度上决定了公司产品体验的上限，持续提升UI自身专业输出能力可以从源头提升公司产品体验。
设计自查：
企业级产品的大量体验问题都是设计基础问题。因此需要设计师不论在内审前，还是内审过程中都要牢记设计原则，查漏补缺，守住底线。我们在部门内部制定了一套适合企业产品的UI自查表来检查设计方案，通过这些自查点来避免产品中出现基础体验问题，从UI设计师自己这里 把好第一道关。
在日常工作中，UI自查表始终占据工区的醒目位置。在评审过程中，大家也会通过线上文档的形 式来对设计原则的条目进行逐一检查。
做好UI内部评审：
设计团队内评审（Design critique）是几乎所有国内外设计团队的普遍、经典做法，可以有效提 高设计产出水平、保证团队对外输出质量。方法是普适的，但具体执行时如何做才能有更好的效果却各有各异。 在如何做好内部评审上，我们进行了如下尝试。 从“全员参与” 到 “组成内部评审委员会” 团队内评审时邀请全员参加，但发现只有少数同事发言，另外一些同事因资历浅、不了解评审产品或者积极性不高给不出建议。同时随着团队成员数量从几个增加到十几个，评审会议的时间成 本大大增加。
选取团队内相对资深和积极提出问题、建议的同事组成内部评审委员会，以月为周期轮流进行， 可以有效分散评审委员在团队内部评审上的工作负荷，并明确一次UI内部评审除了内部评审委员 会还有哪些关联同事需要参加。 关于邀请评审内容关联同事，比如“消息中心” UI评审跟另外一位同事负责的“讨论消息”有关联，则需要邀请这位同事一起评审，以便发现关联问题，整体考虑设计方案。
以上参与评审机制明确在团队内部协作工具上，做到人人清楚。另外，对于评审建议，要做到有 记录、有回应、有跟踪，确保有效发挥了内部评审的价值。
UI设计师的能力模型：不言而喻，UI设计师自身能力的培养是UI品控的重要一环。因此对于设计师能力培养通道上，我 们引入了以下模型。
我们将UI设计师能力归纳成了3x3能力矩阵。这可以设计师在工作中也可以有目的提升自身薄弱环节，同时也让企业对UI设计师的要求更加清晰，除此之外，我们要求UI设计师也需要多了解业务和前端知识，往前多走一步，跟上下游角色更好的衔接，一方面，UI设计师需要理解业务，要能够有半个产品经理的业务知识储备， 如果能站在更高的行业视角对自己所服务的业务领域（向 业务产品经理再迈进一点）有一定的理解是更好的了，另外一方面，UI设计师跟自己的下游-前端 开发工程师也需要很好的衔接上，知道相关前端技术概念、基本页面布局和交互实现逻辑、方法，能够无缝地将界面和交互设计翻译成前端可理解的语言。
对于产品设计师来说，在同质化的环境中我们需要具备突破创意的思维，这样才能输出差异化的设计方案。而创意离不开优秀作品的灵感启发，发现有意思的设计细节也能提高我们的设计思维。
今天黑马哥将会继续为大家带来一些优秀的设计细节，我们一起来反思一下，这样的设计想法为啥自己没有想到呢？
分享目录
一、营造顶部区域视觉感与情感化
二、主题化配图增强视觉感
三、弹幕式标签提高关注度
四、IP 强化底部标签栏图标设计
五、强化动态发布的引导设计
六、连贯性的插画突出卡片特色
七、动态表情化的评价设计
八、场景化的推荐设计
九、上下轮播的 Banner 设计
十、情感化的氛围营造
一、营造顶部区域视觉感与情感化
产品顶部区域的视觉感是吸引用户的关键，在一些功能单一的产品中，强化视觉表现力也是提升产品丰富度的有效形式。
比如麦当劳 App 首页的设计中，顶部区域结合温馨的场景插画进行表达，让你早上打开麦当劳就有种心情愉悦感。动态的太阳微笑画面给你一天好心情，情感化的设计不仅增强了视觉感，也带给用户美好的产品使用体验。
二、主题化配图增强视觉感
封面图在产品规范中相对比较难约束，通过构图、比例、固定元素和配图质量等，在一定程度上可以提高感官体验。如果是在重点突出的内容上面，结合主题化配图也可以增强视觉感。
之前在使用优酷 App 时，当时在重点突出热剧的设计中，就将主题化的内容融入到宫格的配图中。以统一的画面风格和设计表现形式填充封面，增强了视觉表现力，以此突出热剧的吸引力。
三、弹幕式标签提高关注度
在固定的结构布局中如何提高局部内容的关注度，我们需要在不改变结构的前提下进行创意融入。比如动态画面、突出视觉感、内容特异化等等，而最近发现弹幕式标签也是一个不错的选择。
在体验优酷 App 时，在动漫栏目中针对推荐的热播新番，想要突出的动漫结合了弹幕式标签进行强化。动感的节奏会提高用户的关注度，在不改变当前结构的基础上，不失为一种有效的解决方案。
四、IP 强化底部标签栏图标设计
底部标签栏图标是产品设计师经常发挥的场景，在一些节庆主题或者活动中都会定制设计。
优酷 App 在元旦促销活动期间，就将底部标签栏图标设计与 IP 形象结合，默认以促销主题文字展示，点击状态以 IP 形象显示。图标与活动相结合，不仅突出图标视觉表现，也营造了活动氛围感。
五、强化动态发布的引导设计
对于靠内容吸引用户参与度的产品来说，提高用户发布动态的意愿度至关重要，突出动态发布的吸引力也能起到促进作用。
会玩 App 在动态发布的引导设计中给出了不错的思路，未发布动态时会以形象化的空状态设计进行引导。动态发布的按钮旁以俏皮可爱的形象进行引导设计，提高了按钮的吸引力，让用户有种参与的冲动。情感化设计的引导不仅可以增强感官体验，也更容易攻破用户的防备心理。
六、连贯性的插画突出卡片特色
卡片式设计已经成为主流的产品设计趋势，信息的归纳感可以提高识别效率。探索卡片设计的表现特色尤为重要，重点在于卡片造型和内部视觉表现力的发挥层面。
麦当劳 App 在主内容的卡片设计上运用了配送场景插画，连贯性的插画突出了卡片特色。插画场景结合了品牌图形，增强了麦当劳的品牌曝光度；白天和晚上还以不同配色风格和细节进行差异表现，无论是想法还是设计细节都非常不错，是一个挺有创意的案例表现。
七、动态表情化的评价设计
用户评价可以反馈服务的质量，进而做出产品迭代或者服务调整的思路。如何提高用户参与评价的积极性，需要产品设计师多多探索啦！
最近在使用顺丰速运小程序时，完成快递业务之后进行评价，表情化的星级评价非常有意思。不同等级以不同的表情呈现，动态表达非常形象生动，让人不由的挨个体验。动态表情的形式提高了评价的关注度，情感化的表达让用户更愿意参与评价，提高了评价的体验度。
八、场景化的推荐设计
针对电商类产品来说，商品/店铺推荐模块出现频次较高，吸引用户关注度自然成为了设计的首要目标。
在体验 Mars App 时，在生活超市推荐的设计中，模拟了便利店的场景形象。真实感的场景表达带给用户亲切自然的购物体验，同时也提高了用户对于该模块的关注度。
九、上下轮播的 Banner 设计
轮播 Banner 图算是产品设计中最常见的模块，在移动端的设计中通常左右轮播为主，最近体验到上下轮播的案例，打破常规也不失为一种新的设计思路。
在 Mars App 的首页 Banner 图以上下轮播进行交互，左侧固定展示定位城市的天气等信息，提高了 Banner 位置的利用率。Banner 与金刚区悬浮在特定的背景上，带给用户沉浸式的感官体验。
十、情感化的氛围营造
情感化的设计可以让产品更有温度，增加用户对产品的好感度。配合传统节日或者节气主题进行表达是相对比较普遍的形式，会在产品主题和视觉区域进行氛围营造。
在清明节期间体验飞猪旅行 App 时，顶部区域以踏春的场景营造氛围感，还在搜索区域以青团（青团是江南人家在清明节吃的一道传统点心）替代搜索按钮。情感化的设计营造不仅体现了产品的温度，也带给用户对于节日的场景体验。
小结
禁锢我们思维的不是我们的技术，而是我们的眼界和设计感知。发现优秀的设计并总结和转化，才能让我们打开禁锢的思维，在优秀的基础上输出更好的设计解决方案。
本文对于设计的理解阐述属于个人见解，不足之处欢迎大家留言补充，我们互相进步。
作者：黑马青年（vx: heimaux）
本文由 @黑马青年 原创发布。未经许可，禁止转载。
如果说设计思维是设计师做设计的基础，那么用户思维就是你发现和解决问题的能力，到底什么是用户思维？有没有一些具体详细的解释让我们了解它呢？请看分享。
用户思维-环境
说到用户思维第一个必须是用户环境，环境分为设计师的设计环境，以及用户使用你的产品环境，以及物理环境，是不是有刮风、下雨的恶劣天气。
1.你的设计环境
▲上图是大多数设计师平时工作环境，每天早上我们带着一杯星巴克，用着苹果电脑，打开iMAC做着设计，效果图每张图片都精挑细选，我们也理所当然的以为我们的用户也和我们一样，大家都是用的苹果电脑，用的苹果手机？
2.你心中用户的环境
▲很多设计师作品集里面喜欢放用户画像，我们理想的用户画像都像上图一样，用户都是白领，聪明学历高，能很好的看明白你的设计，也会使用。就像我之前做支付宝，也曾以为用户都是如上图所示，其实不是。很多时候用户的场景和我们想象中相差甚远。
3.用户实际的环境
大家都是每天地铁里面，在没有wifi和4G的公交，地铁里。也都是用的大屏设计，各种安卓手机。
▲举个例子，这个「放大镜」，做设计是人都知道是代表「搜索」但是在我们走访线下实际场景时候，下沉到三四线城市的时候，很多时候人们并不认识。
▲三四线城市用户就觉得这个像「平底锅」，不知道是什么意思，这种情况不在少数。
▲家里有一台台式电脑给父母用，有一次打电话给我说，有个流氓软件经常弹窗，我教他们去我的电脑，找到「设备管理器」卸载掉即可，结果，父母问什么是「设备管理器」？
所以，你会发现，用户其实和我们心目中想象的相差甚远。我们觉得很基础的互联网知识，在他们那里可能会很复杂。
4.用户设备环境
机型尺寸：安卓机的机型远远比我们想象的要多，各种超大屏，国内厂商各种千奇百怪的屏幕，这些做设计都需要考虑。
操作系统：不同的操作系统，有华为系统，小米系统，魅族以及各种第三方定制的系统，这些系统上呈现效果，都是需要在设计时候需要去考虑的。
手机分辨率：安卓和苹果屏幕各种大小，和主流的分辨率，设计时候如何适配，才能很好满足主流用户的体验，也都需要设计师提前去规划。
5.用户物理环境
室内环境：用户在室内使用我们产品时候，是不是应该考虑如果是室内，光线可以自动的调节。比如苹果的系统，会根据用户室内室外的光线，调整亮度。
室外环境：用户在阳光下使用，那么亮度变化，阳光下字体识别度等等，都应该考虑进去。比如白天和晚上使用苹果电脑时候的场景，是否有不同，比如iOS系统的设计，也是重复考虑用户实际用户场景。
网络环境：用户在有无限和5G情况下的体验，是不是视频直接播放，减少等待，当用户在地铁手机网络不好时候，视频是不是支持缓存或者提醒用户在使用流量。所以在产品设计时候，重复需要考虑用户这种场景。
▲抖音和腾讯视频，在用户非wifi情况下，会提醒用户当前网络环境，提示用户注意流量使用，除了流量提醒，其实包括网络加载不出来时候，如何设计产品策略都是需要设计时候考虑的。
噪音和隐私：比如在公共场合噪音大的时候，产品体验该怎么优化，有木有可能声音自动调整大，比如微信当你外面很吵时候，直接把语音放耳边，就从外放变成内放了。
▲比如支付宝理财页面，资产和收益显示可以隐藏金额，保护用户隐私情况。以及支付宝在系统后台时候，可以隐藏页面。
总结下，我们平时设计中提到的用户思维，其中关于环境的考虑就包括这些：
用户实际环境
机型尺寸/2.操作系统/3.屏幕分辨率
用户物理环境
1.室内环境/2.室外环境/3/网络环境/4.噪音和隐私
该怎么去做？
1.一部苹果一部安卓机
之前在淘宝天猫时候，有些领导层会要求，必须使用安卓机作为主机，因为只有你去体验安卓机，你才能发现页面和产品有多少问题，苹果本身的系统设计比较好，问题会比较少，但安卓系统没有那么稳定，容易出BUG；所以用安卓机能发现产品更多问题，同时也能让我们更关注到真实用户的感受。
2.换位思考将心比心
简单来说就是做设计要有同理心，懂得如何去“换位思考，将心比心”。要学会用普通用户视角去审视我们的产品问题，用理解的心态去理解用户情绪；从用户的角度看待问题，进而增加更多看待问题的角度，找到更多设计的空间，最后达到解决问题的目的。
之前支付宝时候，提倡管理层要每年去倾听用户声音100小时，老板们需要每月抽时间去当「客服」，看看用户实际用我们的产品，有哪些难用的地方，从而做到真正从产品上解决用户问题。
用户思维-场景
1.理解用户从哪里来要到哪里去
去过迪士尼的朋友都知道，人很多，那么如何让这么多人，有效的去体验更多的项目？就必须根据场景来设计，用户从门口进来，去往哪里，每个项目的设计环节都需要思考清楚。
场景是从哪里来到哪里去：从一个场景到另外一个场景。我记得之前玩过一个迪士尼项目加勒比海盗，里面就把每个环节设计的很符合整体场景。
▲从入口，到航行过程中，到大海里大战，以及故事的高潮，到最后的收尾，都是从一个时间到另外一个时间，就像在电影中亲身经历。其实我们做设计又何尝不是。用户从一个入口，到最终成交转化整个链路。
所以场景思维很重要就是关注用户，每个链路的体验环节，如何去发现其中问题，找到设计撬动点。
2.场景是带时间维度的
时间维度很好理解，是用户在完成任务整个过程中的行为，常见的有前，中，后。我们还是以案例来分析：
买之前：
▲认知：用户打开支付宝想买理财，但他很可能从来没有买过理财产品，那么第一步他可能会去了解产品，了解里面的金融术语，比如七日年化，收益率等等。那么我们在设计时候，就要去思考，如何降低用户的认知，如何用一些浅显易懂的文案让用户理解理财。
▲搜索：用户通过第一步了解了各个理财特点，锁定要买基金产品，然后这个过程中，他会去对比每只基金的收益情况，去寻找适合他的产品。
买之中：
▲判断：用户终于发现了一个比较符合他心中预期的产品，然后会去比较这产品的优缺点，比如它最后想选择，收益在6-8%的一只产品，然后会去思考到底买那一只合适。
▲下单：最后用户选择了这款收益为6%的产品，然后进行交易。
买之后：
▲查看：最后用户购买成功了，购买后，他就会每天来看他这只产品的收益情况，每天的收益，每周收益，以及什么时候卖出去。
▲了解了用户的购买状态，以及场景的时间维度，我们就可以去观察这些链路，去寻找一些设计线索，去发现问题解决问题，场景思维也能帮我们设计更好的决策。其实这个思维在电商中也同样适用。
买之前：
▲认知：双11快到了，你在家门口地铁，公交或者微博广告里面，看见了双11的一个产品广告。其中一个商品吸引了你。
▲搜索：然后你打开淘宝APP，搜索这款产品，通过搜索的入口，进入到了店铺页面。或者你通过外面的广告页面点击到了商品店铺页面。
买之中：
▲判断：你通过店铺页面，看见这个商品正在直播讲解，你希望查看真实的商品情况，于是点进去，发现讲解的内容能让你更好的了解了此商品，你决定去商品详情页准备购买。
▲下单：后面你决定购买，直接淘宝下单付款。
买之后：
▲查看：买完后，你很想用上它，于是你开始查看物流，同时也在担心如果质量不好，你要如何发起七天无理由退款。
以上就是我们说的用户思维里面的场景思维，我们需要了解用户从哪里来到哪里去，同时还需要了解用户购买前，购买中，购买后的心理变化，了解这个过程中的链路问题进行设计优化。
最后
今天这篇分享的用户思维，只是一个基础框架，让我们能利用同理心，了解用户的行为特点，提升我们的用户视角，发现更多的设计问题，进而解决问题，成为一个真正解决问题的设计师。
作者：我们的设计日记
链接：https://www.zcool.com.cn/article/ZMTI2MzA4MA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
01. 按钮设计强弱表现
在整个产品设计中我们要根据信息传递的优先级对按钮设计进行主次区分，设计表达要有强弱差异。按钮设计可以通过大小、填充、描边、色相、饱和度等的不同来进行强弱差异，不同强弱的差异表现出按钮的等级：行动触发、主要、次要、辅助、禁用等。
02. 圆角设置要合理
对于按钮边框来说，我们通常采用全圆角和小圆角居多，这样显得稳重大气。而大圆角按钮并非不可用，只是相对较少，会显得按钮不方不圆的，设计表现显得不够成熟。
全圆角的圆角值等于按钮高度值的一半，而小圆角的圆角值我们通常控制在 1/4H（高度值的四分之一）以内（仅为个人参考，并非绝对值）。
03. 投影设置要用对色彩关系
给一个有彩色系按钮设置投影时，选择无彩色系（比如黑色）也能达到效果，只是为了得到更好的视觉效果，提高用户感官体验。我们也可以尝试基于按钮本身色相来确定投影颜色，这样得到的效果会显得更加干净清爽。
04. 投影的使用勿过度泛滥
虽然投影的运用可以使按钮更有层次感，但是也需要根据具体情况慎用。比如对于一些浅色按钮来说也许投影反而会降低按钮的识别度，使得按钮配色环境显得不够干净清爽。
05. 给按钮文字一点呼吸感
按钮文字和边框的设计要预留一定的留白，不要做“舍不得”的设计，使得按钮给人感觉很拥挤。如果你把控不好可以分析一些按钮的负空间获取经验，看看文字大小和负空间之间是否存在某种比例关系。找到这个比例关系运用到按钮设计中，也许会让你的设计显得更加成熟稳重。
06. 按钮设计别让用户思考
按钮的存在是为了引导用户进行引导式操作，而不是让用户对其产生困惑。按钮设计别让用户思考这是啥，是否可以点击，需要简洁明了的对此操作进行指引。用户已经养成对按钮外观和功能的行为习惯，如果你设计的按钮样式与“标准”差异太大，用户就会产生疑惑，影响使用体验。
07. 样式表达的一致性
当设计元素规范统一时，用户操作过程中的理解成本最低，一致性也因此成为最有力的可用性原则之一。我们在设计按钮的时候要注意样式表达的一致性，比如：按钮形状、色彩定义、风格特征等，这样会使得我们的设计可用性更强。
08. 箭头运用不是字符输入
一些初入职场的设计师会偷懒直接字符输入形成按钮内部所需箭头，这样的表达方式自然显得粗糙些。箭头要当成图标来进行设计，控制好箭头的粗细和文字笔画的粗细值接近，这样显得更有细节和态度。
09. 按钮设计主次分明
通过信息对比才能形成主次之分，按钮设计需要在风格上进行区分，达到层次结构的视觉提示。主要的按钮需要和次要的、辅助的形成差异，最大化突出主按钮的视觉效果，更好的引导用户根据设定的轨迹进行操作。
10. 按钮设计不要让用户误解
在整个项目设计规范中，我们需要避免让用户把非按钮状态的内容进行误判。在确定好按钮样式特征之后，不要在其它场景运用其样式特征或者类似的风格特征，这样会让用户产生错误的认知，因而进行无用的操作。
11. 按钮文本表达要言简意赅
在进行按钮文本思考的时候，尽量减少字符和单词的数量，内容表达言简意赅，只要能够准确传达信息识别度即可。有时候也不一定需要文本，图标可以传递的信息可以考虑文本的减少，也许可以让界面的呼吸感更强。
12. 按钮文本设置切勿换行
单行文字的可读性更高，如果出现换行就会降低可读性。我们在设计按钮的时候，确保文本内容在一行之内显示，如果设计空间不足要考虑文本内容的精简。
13. 特殊场景要灵活转变
底部按钮的运用并非固定不变，不同机型或者特殊场景的考虑需要灵活转变。比如 iPhone X 等类型的机型，由于底部需要预留主页控制器的位置，所以在设计按钮的时候需要考虑上中下的过渡衔接，这样才能带给用户更好的感官体验。
14. 按钮大小要便于点击
按钮需要方便用户进行点击操作，如果用户点击失败或者误点到周边元素，就会带给用户不友好的体验。若是带有文本的按钮，只要文字大小不要小于极限值，通常实现出来的按钮交互热区都会满足点击需求。
如果是纯 icon 的按钮，除了按钮大小需要控制合适以外，也要确保交互热区能够满足点击区域要求。
15. 同属板块按钮大小一致
在同属板块内的按钮设计，我们可以通过按钮的强弱来体现层级关系，不要让按钮大小不一，这样视觉平衡会受到影响。
16. 按钮设计考虑文本最大值
稍微注意细节的设计师也不会让文本的长度超过按钮宽度，这是一个非常明显的错误。但是按钮文本变得很长却是遇见过的，几个字即可表达的意思却使用了过多修饰词。在进行按钮文本思考的时候，要根据最佳的视觉效果设定一个最大值，不要任其无限制发挥，这样会使得最终的视觉效果大打折扣，甚至影响用户感官体验。
17. 保持按钮可读性
按钮设计需要考虑在不同环境下的适应度，确保用户可以一目了然的发现它。现在很多产品都适配了深色主题模式，按钮的配色不能只考虑白色或者浅色背景下的运用，需要考虑大多数背景下的适配。在进行色彩选择的时候，始终保持按钮与背景的高对比度和可读性。
18. 按钮去文本是否合理
关于按钮文本的设置需要结合信息传递的识别性和准确性，虽然纯图标显得设计简洁大方，但是需要考虑图形是否可以准确的表达其含义，不会让用户出现误解或者错误的认知。所以，按钮去文本需要根据文案代表的含义来判断，如果不需要辅助解释也能判断出按钮的意思，那么更为简洁的设计表达效果更佳。
19. 正确判断按钮颜色选择
色彩在设计中是最直观的体现，不同的颜色会传递不同的性格，带给用户认知差异。而按钮的颜色选择也并非随性发挥，需要结合品牌色和辅助色作出判断。
通常比较统一的标准是采用品牌色作为大部分按钮的颜色，遇到一些需要差异化的按钮会选择辅助色来表达，红色或者橙色多为行动刺激作用，不适合在非品牌色的时候滥用。浅灰色或者低饱和度的色系会带有不可用、禁用、失效等属性，需要酌情选择。
20. 按钮位置结合用户体验
引导用户作出选择的按钮应该放在左边还是右边，根据操作系统的不同也引起了设计师们的争议。比如 Windows 系统习惯将确认按钮放在左边，而苹果系统却选择了放在右边，用户运用系统的习惯会影响其行为的适应度。不过要是在移动端个人倾向于将引导用户作出选择的按钮放在右边，更有利于用户点击（特殊人群这里需要除外）。
有时候为了防止用户误操作，我们会将确认操作的按钮放在左边，通过助力设计让用户再次确认。所以，一方面我们要结合操作系统的习惯，另一方面也要结合用户习惯，将按钮放在最合适的位置，便于用户操作。
小结
作为设计师来说，对每一个细小的元素进行深入思考和总结，才能让我们设计出更好的解决方案。一枚小小的按钮设计，其背后也有很多需要探索的东西，本文为大家总结了 20 条经验，相信还有更多值得梳理的细节，期待更多设计伙伴去挖掘。
作者：黑马青年
链接：https://www.zcool.com.cn/article/ZMTIwNzE4MA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
作为产品总监，你一定明白，软件产品成功的关键在于用户体验，而UI设计正是塑造用户体验的核心。简单来说，UI设计就是用户界面的设计，它决定了用户如何与你的产品互动，就像产品的“颜值”和“内涵”，直接影响用户的第一印象和使用感受。UI设计不仅仅是让界面好看，更重要的是好用。 它需要平衡视觉美感与功能实用性，让用户在使用过程中感到舒适、高效、愉悦。
如何提高软件产品中的UI设计水准？ 以下是一些建议：
关于设计思维你了解多少？
设计思维模型对于互联人来说非常重要，经常我们在评价一个候选人时候会说，这个同学系统思考差了点，或者说用户和商业思维不够。那么到底什么是系统思考，设计师该如何学会系统思考，系统思考到底能帮助我们在做设计时候有什么帮助，今天希望我的这个分享能让你了解什么是系统思考，以及它的思考模型是什么。
设计做久了你会发现离不开流程和思维，之前支付宝一位大佬总结下来叫“左手艺术，右手科学”，艺术大家都明白，设计师是感性动物，对于美的追求是大家都是擅长的也非常有发言权，那么科学指的是我们需要通过科学的方法流程，系统的思考问题方式，让设计不止好看，同时也应该符合用户，商业诉求，满足好这3者的平衡点。
所以设计师，除了关注「左手」艺术的部分，同时也需要关注「右手」科学的部分。
设计思维模型不止是一个单一的思维模型，它包含三种思维模型，设计思维，用户思维，产品思维。今天这篇文章，我们先来了解第一个思维，设计思维到底是什么，我们该如何提升设计师的设计思维。
第一个设计思维也是最基础的，就是作为设计师，我们必须了解各大平台的设计规范，这是做任何设计的基础，如果你了解你负责的这个平台规则，那么你的设计就无法迈出第一步，所以对于刚做设计不久的同学，基础思维规范需要去死记硬背背下来，没有这个基础后面都是无用功。
常用的设计规范，比如苹果的设计规范，里面详细讲述了，常用的苹果导航栏高度是多少，苹果的表格视图高度多大，页面中常用的设计字体字号多少，如何去适配不同分辨率，这些基础的设计原则，都统称为设计思维。
谷歌的material规范，也是设计师必须了解的规范，特别是需要了解它在系统层面和iOS的差异化。
设计思维很重要一点，就是要了解基础的审美，以及用户心理学，其中排版运用比较多的格式塔原理，是做设计排版的基础。
相似性原则：我们会潜意识把更紧密的事物归属一组。
相似性原则运用：淘宝网导航菜单就是运用这种原则，根据产品类别一致，进行同类分类，这个就是运用的格式塔紧密设计原则。
封闭性原则：视觉系统自动尝试将敞开的图形关闭起来，从而将其感知为完整的物体而不是分散的碎片。
封闭性原则运用：我们会自动将这些不完整的图形在脑海中封闭起来，形成一个整体图形。如图中海报，虽然文字被遮挡了一部分，或者被一些图形分割了，但是我们脑海中还是会自动脑补出设计画面。
连续性原则：我们的视觉感知系统倾向于连续性，视觉系统倾向于感知连续的形式而不是离散的碎片。
连续性原则运用：Pinterest和ins虽然卡片被下面截断了，但是我们还是会认为它和下面内容是一组的。
焦点原则：一个一面只有一个核心，一个眼睛，引导用户去关注你想表达的重点。
焦点原则运用：少即是多，苹果的很多产品就是运用一个焦点，做到画龙点睛的作业。
地面原则：我们的大脑将视觉区域分为主体和背景，主体包括一个场景中占据注意力的元素，其余都为背景。
地面原则运用：如上图案例中，我们视觉会自动将红色，绿色，蓝色当做背景，页面的几何图形会当为主体，用户的注意力也在上面，在平时做设计时候需要去营造这种空间和层次感。
格式塔是设计很重要基础之一，来源于20世纪的德国，也是作为设计师必须掌握的设计原则，也是你做设计的第一个需要掌握的设计基础。
很多同学刚做设计，很容易在页面中为了体现自己掌握的某种技法，而做过了，或者设计的页面太偏向于个人喜好。这是不对的，我们的设计最终一定要是用户使用的，否则再漂亮华丽的设计都会是昙花一现。
Path的设计在刚出来时候，简直是业内交互和视觉标杆性产品，创新的交互细节，精致的页面表现。都很完美，但是最终也逃不过昙花不现，很大部分原因是产品定位不准，商业思考不够，没有很好解决好用户诉求，最终导致失败。所以在一个成熟的设计中，设计好用比好看更重要，我们要做的就是在这个过程中不断寻找合适的平衡点。
当年Facebook 出品的paper这款产品，也是业内关注度极高，把手势运用到了极致。但最后也逃不过这种命运，几乎移动市场上，没有一个产品是因为好看而活下来的，几乎最后的那些被人们每天使用的产品，都不是因为好看，而是因为好用，满足人们痛点需求。
所以，刚工作的设计师，在设计思维这个层面，一定要明确我们的每一个页面，一定是满足用户完成任务为第一优先级，其次考虑产品整体和品牌，公司大的设计方向挂钩。
工作几年后，作为一个漂亮的设计效果图都不难，很多时候参考下竞品，在竞品基础上去找一些差异化创新，甚至做出一个超越竞品的设计效果图，加上真实动效，好看的图片，精心排版的文案。这些很多设计师都可以做到。但是很多设计师忽略了真正上线后的效果。
上面那个情况，我想大家都经历过，我们效果图做的很好，干净的商品图，标签也很规范。但是实际上线后就是右边效果，各种图上放牛皮癣，以及各种标签。
从业务层面来说，没有错，因为放牛皮癣可能销量更好。但是设计时候，我们是不是可以再往前一步，帮用户思考如果图片上房广告该在展示，如果文案很多时候，标签很复杂的展示规则。
优秀设计师不仅仅能做出漂亮设计图，同时他们也能对内容进行负责，定义好详细是内容规范。
之前淘宝的同事，定完一个电商的KV风格后，还会出一个详细的风格指南，里面会去定义配色，文案话术，字数，以及页面图片的展示规范，这些的目的都是对内容进行控制。
目前很多设计师以为做UI就只有扁平化，以为大公司设计流程都是痛点分析、人群画像、旅程地图、用户调研、方案呈现。各种一堆推导，然后最终的方案简简单单收尾，同时还暴露一个很大问题，风格单一。其实UI真的不止是只有扁平化。
手法一：手绘简笔风格
如果你是设计日记的忠实读者，你一定看过我之前写过一些大厂的设计手法。手绘简笔就是其中一个风格之一，整体风格都是手绘线条配以低饱和度颜色，有很多趣味性和故事融合在里面。
Facebook改版之前的风格就是运用的这套风格，整个页面也更加年轻和时尚。
手法二：分形艺术风格
利用简单的几何图形，不断重复，形成一种新的形式，在一些背景上，一些图形和海报上经常被大量运用，只不过很多设计师并没有关注到这些风格。
Uber之前的规范中，对于全球的各个国家的设计，都是定义了一个国家的基础图形，然后围绕基础图形做出了一系列扩展，这其实就运用到了这个分形重复设计手法。
包括我们熟知是苹果相册图标，chrome浏览器和谷歌相册图标，都是运用这种手法，一个基础图形有规律的变化。
手法三：柔光风格
很多设计师做东西风格比较单一局限，UI发展到今天其实有很多新的风格出现，柔光风格就是其中之一，整体风格呈现出光的折射特征，颜色层次丰富，有明显的光的流动感和方向性。在设计上常用渐变，光斑，流动透明叠加手法，是目前大公司比较主流的一种风格。
整个画面有色彩流动感，背景一般是多色融合，有层次，有流动液体变化。
像这个案例就是色彩上跨度比较大的一个渐变，同时运用白色透明叠加方式处理，细节简单细腻。
支付宝之前芝麻信用的风格我很喜欢，其中就是运用的这套设计手法，背景运用这种虚实，光斑作为层次。
在很多可视化场景中也会运用，比如左图就是运用波浪透明叠加线条作为页面核心焦点，右边页面背景底部运用有层次的渐变和光晕。
手法四 ：纹理风格
这个风格很多人都有印象，特别是韩国设计中大量运用了这种设计，国内电商中也会运用比较多，这种风格就是纹理风格。
淘宝的88会员，我们能看见会员页面辅助元素这些纹理效果作为背景出现在这些页面中，能很好将视觉层次丰富起来。
双11的宣传海报，也是运用这种几何纹理作为视觉层次的装饰。
考拉当年的改版设计，很核心的元素就是这个圆形，以及他的底纹运用效果。
这种底纹效果，很多时候也可以传递出品牌的气质，品牌的调性，左侧音乐播放默认图片，特别有品质感，右侧电商主页面的背景，清晰感觉，后面线条恰到好处。
当然，设计趋势并不止我今天说的这些，其实有很多，作为设计师，设计思维中很重要的点，就是关注趋势，并将他运用到你设计中去，这是必不可少的一项技能。
从这张经典的图中我们可以看出，设计只是一个产品其中很小的一部分，很多设计师以为我们看见的就是一切，其实不是，就像冰山一样，表现层是最上面的一部分，冰山下面其实有很多的内容。
我们来看个案例，比如支付宝：
表现层：
视觉设计师比较容易关注的，圆润的图标，卡片的设计，扁平的风格，2.5D的插画风格，小蚂蚁的微动效，支付宝品牌蓝色，以及一些卡片的动画效果。
框架层/结构层：
顶部的4个金刚设计，也是用户最常用的4个功能，下面14个宫格导航，代表不同的服务入口，小蚂蚁卡片是通知入口，下面营销广告资源位，下面是千人千面或者推荐的服务卡片等等。理财页面也是如此，头部用户数钱，下面业务入口下面不同理财服务。
范围层：
根据用户的诉求，中间的宫格导航是动态变化的，用户也可以去根据内容需要去定义，小蚂蚁通知入口也是如此，一个小喇叭的功能，把所有支付宝的通知都收在这个地方，底部卡片根据用户习惯去展示，比如你经常点外卖那么推送你美食卡片，你比较关注疫情推荐你疫情卡片等等。
战略层：
顾名思义，那就是公司整体战略，从支付宝品牌升级更加年轻化，强化生活服务心智，首页新增外卖到家、果蔬商超医药等便民生活版块，并基于智能算法为用户推荐喜欢的服务，让每个用户拥有更贴心专属的支付宝。
所以其实所有产品都是围绕这样逻辑去设计，我们设计师要明白设计那种趋势手法，只是一部分。我们要不断的去了解最顶层，才能理解产品设计背后的规则逻辑。
今天分享的是设计师需要掌握的思维模型，其中关于设计思维的，我们再来回顾下，设计思维包括哪些：
1.了解基础的设计规范；
2.知道常用设计原则；
3.知道设计是用来用的，而不是艺术；
4.知道设计不止是效果图，对落地负责；
5.知道主流设计趋势和手法；
点线面在用户界面中的应用貌似很少有人写，我挑业余时间进行了大量案例的翻阅分析，发现其中确有规则。
首篇万字长文献给你。
用户界面的本质是资源的互换。
用户为产品提供时间和注意力，产品为用户提供单位时间内最大价值的内容。
当视觉设计师介入其中后，他们的关系可以用这样一幅图表示。
表现层作为用户体验五要素的最具象层面，解决的是产品视觉效果的呈现问题。视觉设计师需要借以合理的版式和视觉手段来保障用户在单位时间内获取最多的内容资源，即实现信息的高效获取。
信息的高效获取来自合理的视觉引导（信息阅读的优先级安排）。我们一直在说的层次清晰、低信噪比、沉浸感等视觉体验在本质上其实都属于合理的视觉引导。
借以实现的手段包括我们熟知的卡片、留白、配色、字体层级、图标等等。这些手段庞杂繁多，体系化的建设必不可少，但是漫长的积累沉淀中很容易被其淹没，而且每种手段背后又是什么样的底层逻辑和依据？
为什么卡片让页面层次清晰？为什么面性图标拥有较高的辨识度？为什么步骤条会有横纵之分？...
而点、线、面解决的就是这些内在逻辑问题，在你熟知它们的特性后，绝大多数的设计手段都可以被其解释和串联起来，并且让你的设计决策和设计推导更加有据可依，而不是简单的“凭感觉”。
如果我们将各种设计手段比喻为各类武学外功招式，那么点线面理论就好像吐纳内功，虽为最基础的入门心法，但其对内息的作用影响着所有招式的发挥。
点、线、面理论最早由瓦西里·康定斯基提出，他所著的《点、线、面》一书最早曾作为包豪斯学院的形式课程进行教学。他将所有艺术的形式都归结于点、线和面三种元素的关系。
康定斯基对于点、线、面的独到思想为设计领域产生了极为深远的影响。我们目前最熟知运用到它的的一个领域就是平面设计领域。通过这个理论，平面中所有的元素都可以看作点、线、面三类形态，并且每类形态的存在、变化和结合，都可以为画面传达出不同的样式和风格。
虽然用户界面设计和平面设计分属于两个完全不同的设计行业，但点、线、面理论是相通的。
点、线、面具有普适性、相对性。前文已经讲过，点、线、面这三种形态存在于所有的元素中。不论是哪种元素都可以用点、线、面来表示。并且，点、线、面之间是相对的，并非对元素的纯粹定义。
比如一个界面中的面性图标，我们可以将其看作一个点，当相对于线性图标时，我们又可以将其看作面。如果这个图标和其他图标一起组成标签栏，那这串图标也可看作线。
下面，我将分为点、线和面三大板块，来讲述每类形态基于自身维度所拥有的特性，并如何通过存在、变化来在界面中发挥着各自的作用，实现合理高效的视觉引导。
正文开始。
万物自一点始。
正如宇宙大爆炸源自一个引力奇点那样，点是万物之源，也是所有元素的基础。点从维度上来说属于零维，它没有办法像线、面那样延伸，这决定了点本身的向心性和自由性。
康定斯基将点描述为“雄辩与沉默”，这句话的意思就是，当点独立存在于一个画面中时，它便开始“雄辩”自己的存在，让自己成为焦点；而当它的数量增加时，点便倾向于“沉默”，并且根据它的排列方式倾向于对应形态的特性。
当一个点独立存在时，点的向心性协助它成为视觉焦点。此时点主要起到定位的作用。
以支付宝首页为例。在以往的界面设计中，我们往往在每个模块标题旁添加一个小小的短线，而这个小短线便是作为定位点引导用户迅速注意到标题，实现不同内容的快速定位。并且作品包装中也常会用到它。
不过在Complexion Reduction去形式化的浪潮洗礼下，这种方式已成为过去式，现在我们会直接用标题本身作为点进行定位。
但是，在其他更多的场景下，仅靠文字其实并不能很好得发挥点的向心性，尤其是一些信息较多、需要迅速辨识的场景下。这时候，我们通常会引入另一种要素——图标来指代它。
图标本身可以用来表意，而独立、精致的特性让它很适合作为点元素来处理。
比如app中的标签栏中的图标就可看作点元素，每个图标以其所具备的向心性帮助我们迅速得聚焦到它所在的位置。列表页的每个字段前也会加入对应含义的图标来帮助用户迅速锚定当前栏目，并且由于图标拥有更高的辨识性，这让阅读变得轻快而富有节奏。
下图所示为Google日历中的活动页表单，当我们将字段前的图标去除时，阅读没有了强定位元素将会缺失节奏，信息获取变得困难和缓慢，影响用户表单的填写。
点是自由、精致的，它不会像线那样有向两端延伸的特性，这意味着它可以进行各种形式、规则的排列组合以契合版面。
在这种分布形式下，点通常以图标的形式进行横向及纵向的排列，并且倾向于线的引导性进行视线引导。
点的横向排列通常见于标签导航栏、单行的金刚区入口等。点的纵向排列通常见于列表布局中。由于点本身对用户注意力的聚焦，点沿着什么方向进行排列时，用户视线便倾向于朝对应的方向移动。
上面所举的Google日历就是这样，单个图标方便定位，而多个线性排布的图标则具备了线的引导性，便于用户的由上至下得快速浏览。ios自带的音乐app和QQ音乐的歌单也同样利用了点化线引导浏览，只是图片和阿拉伯数字的区别而已。
在这种分布形式下，点常常横向排列在界面中（一排内通常不超过5个），作为一个个快捷入口存在，形成网格式布局。
比如金刚区业务入口、书籍等类型的布局都属于网格式。这个布局下的点集合倾向于面元素，界面在这个布局下呈现出富有观赏性的视觉张力，吸引用户眼球，而且网格式的布局引导用户视线均匀迁移，便于视觉区分。
既然讲到这了，不得不提下上面两种形态各自所在的版式——网格布局和列表布局。
通常来说，静态页面中的内容大致可分为图、文两大类。
从形态上看，文本本身具有线那样不断延伸的特点，因此列表的横向版面更适合长文本的展示。而图片、图标通常以固定尺寸的img独立存在，可看作点元素，像上一节所讲的，它既可存在于列表又可存在于网格。
从视觉动线上看，列表布局的动线属于尼尔森等老前辈所提出的F型浏览模式。即用户首先落点于左侧的定位点，再由左向右进行阅读，接着再垂直扫视，当定位到兴趣点后继续由左至右得阅读。这种动线符合人类自然的阅读模式。
并且在由上至下的视线迁移中，用户的注意力势必随着路径的拉长而逐步递减。
而这种递减效应让列表式布局更适合基于产品及用户习惯以某种规律排序。
邮件讯息以时间进行排序，这是基于用户查看最新消息的习惯；电商商品则默认以相关性、销量等因素综合排序（同时买家可以根据价格、销量等进行自定义排序），这是基于用户的购物喜好习惯；直播平台以热度进行排序，这是基于羊群效应制造引流点，同时也刺激用户发布优质内容。并且在特定的排序规律下可以引导用户带有目的的、更迅速得扫视。
但是如果界面变为网格布局，扫视效率将大打折扣，较高的图版率也导致文字信息被过度弱化。
如下图，健身环大冒险并不属于外观型产品，用户更关心的是价格、好评等文字信息，当其变为网格视图时，一方面用户无法根据排序结果迅速垂直扫视，另一方面文字信息被重量级的图片压制，用户无法迅速获取它们。
网格布局通过牺牲宽度来将界面等分为一个个格子，从形态上直接限制了长文本的存在，这让它更适合放置一个个独立的点，比如图片、图标。而文本则落于底部沦为一介辅助。
从视觉动线上看，网格布局倾向于Z型浏览模式。用户视觉动线通常由左至右、再由上至下得进行，并可以“雨露均沾”得在数个点上均匀迁移，注意力递减效应不会像列表布局那么强烈。因此，网格布局非常适合进行不同信息的辨识和区分。
界面中常见的功能业务入口、专辑或者电影的布局、单独店铺中的商品，它们不需要明显的排序处理，并且用户初始行为都是通过图片、图标进行迅速得辨别区分，继而进行交互决策。如果将其列表化处理，不同信息的辨识区分效率将受到影响。
如下图，服装属于典型的外观型商品，当变为列表视图时，商品之间将难以辨识区分。
由此，我们大致可以梳理出两种布局适用情况：
列表：适用于文本为主要展示，或者按照某种规律排序的信息。
网格：适用于图片为主要展示，或者没有排序规则，需要用户通过图片、图标辨识区分的信息。
当然了，这两种布局并非只能选其一，淘宝、京东这类体量庞大的电商平台便为了方便用户习惯，提供了两种布局视图便于用户随时切换以降低决策成本。
另外，它常被作为一类丰富画面层次的手段。当点不再按照横纵方向排列分布时，便可作为图案被用在特定场景的背景中，以降低背景过平过空的感觉。
比如美食杰封面的加载占位图就以与产品相关的各种食材图标随机得组合为图案，饱满的画面减少了用户等待时的枯燥无味。而QQ的群发布功能，在首个卡片背景中便加入了各种学习类的图标随机分布在卡片上，烘托出热闹趣味的氛围，和下面的三个次要功能从卡片背景上迅速拉开层级。
线条是一种简单、轻盈的存在，可以看作是点受外驱力作用下的运动轨迹。它从维度上来说属于一维，不同的外驱力结合使得线可以沿着任意方向自由得延伸，从而让它拥有了高效的引导性、分割性和造型性。
康定斯基在书中以温度去定义线的情感，他将水平线定义为无限冷能的表现形式，将垂直线定义为无限暖能的表现形式。看似晦涩难懂，但联系到现实生活就相对容易理解一点。
现实生活中的水平线通常存在于地平线中，因此给人的感觉是稳定、平和，类似非启动时的“冷”态；而垂直线常见于那些从基线建造、生长的事物，比如高楼大厦、参天巨木，它们都通过能量来实现垂直方向的高低变化，因此给人的感觉是上升、下落、变化等感觉，类似启动后的“暖”态。
而线具备的冷暖态决定了水平和垂直线发挥各自作用时所传达的感受。
线可沿任意方向延伸的特点让它具备了很强的引导性。界面中最常见的就是跑步、地图类app中的路线显示，就是通过线的引导性来显示起点到终点所行进的轨迹。
如果我们将起点和终点对齐归于一条线上时，便可以通过降维的方式将其缩减至单个维度。
时间维度可以引申到界面中的时间轴、步骤条、加载条和音视频中的进度条等，这类维度通常需要加入点元素，通过点的向心性辅助定位。空间维度则引申到滑动页面时出现的滚动条等。
如上文对温度的解释，“暖”态的垂直线象征变化。当我们希望用户能够感知到时间的变化，或者流程需要花费较长时间时，垂直线相对来说是个更好的选择。
比如外卖、快递的订单进度，火车的停靠站点时间，timeline，到账时间等信息，要么需要传达变化感，要么费时较长，因此适合以象征变化的垂直线来进行引导，给予用户变化感、产生需要等待的心理预期。
“冷”态的水平线象征静止。当我们希望用户能够沉浸在这个流程中，感知不到时间的变化，或者流程时间极短时，那就更适合用水平线。
比如airbnb申请成为房东时，会有个需要用户即时填写的分页表单，为了让用户沉浸在填写中，同样以水平线作为它的进度反馈，降低时间变化感。
比如美团买药后的审方页，药师的审方进度是即时性的，通常只需等待十几秒即可。水平的静止感能够让用户产生“当前正在发生”的感觉，避免让用户产生需要等待较长时间的心理预期而离开当前页面。
但是，如果我们将美团审方的进度条改为纵向（去除文案提示），给用户带来的感觉也就大不相同。
下文讲到的分割性也可以以冷暖态来解释。我们希望用户能够专心阅读信息，因此会尽量避免容易带来变化感的垂直分割线。即便迫于信息的划分需要不得不用到，也会尽量降低它的明度和长度。
另外，界面中往往也存在着一条无形的线，它同样也是起着重要的引导作用，只是这类线不仅仅作用于某个特定模块，它还可以作用于整个界面。这条线通常被称作 视觉动线。视觉动线在网格与列表那一节中简单提了下，只是这部分体系太过庞大，后面有时间我会单独写一篇。
很多时候，界面中仅仅以留白进行分隔时，很容易造成信息无法被明确得划分。这时我们往往需要引入额外的形式进行辅助。比如分割线。
分割线通常运用在模块内部信息的分割，虽简单粗暴，但并不能应付更高层级的模块分割。而模块之间的分割通常以面性（分割条）来进行。留白、分割线和分割条三者的分割层级由低到高，通常需要在页面中结合使用。
需要注意的是，线面的分割形式需要尽可能得轻量化，一旦拥有了视觉重量很容易成为噪音，我们需要尽量避免信噪比过低对用户阅读体验的破坏。
为了增加页面的呼吸感，我们很多时候会用留白这种最为轻量的分割方式代替所有的线、面。
这类大留白的特点往往与Complexion Reduction风格相结合，视觉上不仅制造一种舒适的简约感和呼吸感，也减少了页面中线面分割形成的视觉噪音。
Complexion Reduction最早源自Airbnb、Instagram、Medium等产品的页面改版，而后被UX设计师Michael Horton所总结出的设计趋势。苹果在17年所发布的ios11同属于这个风格，这类风格最突出的三个特征就是大标题、面性图标和克制用色。
但是，这种去形式化的分割方法并非适用于全部页面，一般只有在页面模块单一、信息单元字段较少、或者以图片本身作为分割方式的页面才适合使用。
比如ikea和airbnb的首页，它们并不像京东、支付宝有庞大的体量和业务需求，所以很适合全留白的方式。这让它们的首页看上去非常干净清爽，富有呼吸感。
不过，在其他字段信息繁多的界面中，分割线依然是一种高效的分割方式。
我们可以看到，IKEA和airbnb的详情页依旧选择了分割线的分割方式以应对繁多的字段信息，避免全留白带来的层级混乱。
线本身可以沿任意方向自由延伸，形成一条曲线、折线、螺旋线等等。而当线的首尾相连时，便可以勾画出面。
但是，线的闭合性所形成的面仅仅是一具没有量感的空壳。但同时线条本身轻盈的特性让其更加轻量、通透，因此对于一些辨识要求较低、或者需要被弱化的元素来说往往是个不错的选择。
界面中最常见的运用就是幽灵按钮和线性图标。
相比于面性按钮和图标，量感的缺失让其无法在辨识性上胜出，但是在其它地方也各有所长。
幽灵按钮常用于一些次按钮、未选中态以及tag，线性图标常被用于一些次要功能、未选中态以及装饰。
当然，线面也可以根据产品自身需求作类别区分。
比如支付宝和美团这些产品，工具型图标全部线性，而业务型图标全部面性。并且线性图标得益于背景主色色块的反白加成让它们并不会被过度弱化。
虚线是点化线的最简易的表现。
但是因为虚线本身断开的地方太多了，并不适合用于常规信息的分割，它通常适用于一些特定的场景。
比如一些产品中的票券、账单这类特殊场景中，通常会加入虚线进行信息的分割，就是为了映射模拟现实世界中便于撕开的撕票线来增加代入感，减少认知负荷。
虚线另一个特性是不可见性。
这个特性最早可追溯至建筑、机械等行业的制图规范中——以同等点元素所构成的虚线代表对象视觉盲区中的棱边线及轮廓线。
一些漫画或动画作品中当一个东西突然不翼而飞时，往往会留下一个虚线的轮廓。
这种有意思的设定也被设计师引用到了用户界面中。
比如当我们想让用户去上传一个图片时，往往会采取一个虚线的矩形结合按钮进行引导，便是为了告诉用户：嗨这块地还是空的，快来加点料！
比如Pinterest、dribbble以及AntD的图片类upload组件，都采用了这种设定。
另外，这种形式也适用于空状态的表示，比如dropbox。
面可以看作是线的运动轨迹，可以由一个闭合的线生成，也可以由点、线强化自身而来。
康定斯基在书中曾讲到，线的强化加粗，与点不断增大面临同样的问题，即与面之间的临界。
这句话的意思就是，当点、线通过强化自身的面积、宽度后，和面的界限开始模糊，从而具备了面本身的性质。
比如ios11中让人印象深刻的大标题，便是由通过增加每个点的面积（增加每个字的字号），以及笔画的线宽（增加每个字的字重）来趋向于面，以营造出饱满、冲击的视觉张力。
面二维的属性让它可以向四周无限得扩张自己的领土，这个优势让面可以轻松承载各类信息，并且也让它具备了绝佳的视觉张力。
在一个点线面同时存在的画面中，人眼优先注意到的必定是拥有绝对视觉张力的面元素。这意味着面拥有着远胜于前两者的辨识性，或者说，在一部各类元素参演的戏剧里，面更擅长主角。
比如在一个放置了文字的界面中，我们希望其中一段比较重要的文字完全和其他文字区分开，也就意味着这段文字需要进行对比。
我们可以对这段文字加粗、加入颜色等等，这的确能做出一些明显的变化。但是仅仅是对字体本身的强化，一旦界面需要划分层级，就会显得很“平”，造成信息关系的暧昧。
不过，当加入一层淡淡的色块充当文字背景后，便可以制造出极为明朗的层次关系。一方面，这段文字神奇得与其他信息迅速孤立开来，另外，有面作为“靠山”让它变得稍微与众不同，并且相比其他文字能被更快得注意到。
当然，如果你觉得它很重要，那你可以增强文字与背景的颜色对比，给面加入各种各样的颜色。
而当颜色对信息可读性造成影响时，为保证信息的顺利辨识，我们不得不对文字进行反色处理，以此作为视觉落点来强制用户迅速注意到它。这就是我们熟知的反白视觉手段。
面的这种强力属性被用到了界面的方方面面，比如按钮和图标。
相比前面所讲的线性图标，面的辨识性让面性图标可以更快得被识别。因此，界面中一些重要的业务入口通常都以醒目的面性图标存在，并且常以面性图标代表激活、选中时的状态，线性图标代表未激活、未选中时的状态。
不过线性图标薄弱的辨识性并非完全适合标签栏状态的切换。
用户在选中到当前页时，并不代表其他页面彻底弱化了，用户同样需要关注其他未选中的页面。
正因如此，ios11中所有未选中的icon全部由线性更改为了面性。同样的，国内的简书、天猫等产品也进行了图标的改版以提升其他页面的点击率。
对于按钮，面的辨识性为它的层级使用提供了更多可能。
如下图，按钮从样式上来看大致有六种样式，深色、浅色、浅灰色、幽灵、文字和图标按钮，其中面性按钮就占了一半。相比幽灵、文字和图标按钮，三种面性按钮都以面的强辨识性引导用户迅速注意到它。因此面性按钮相对对应更高的层级。
当页面中存在多个功能按钮时，就需要以样式进行主次之分。深色按钮以强烈的颜色对比制造吸引力，因此常以深色表达层级最高的主按钮，而次按钮通常对应层级较低的浅色、浅灰色等样式。
当页面中没有主次功能之分时，按钮的样式通常取决于当前的用户场景及业务需求。
比如知乎的答案详情页面，答主关注按钮是浅灰色样式，就是为了引导用户沉浸在内容中，避免深色样式对阅读造成干扰。而答主个人页的关注变为深色，则是由于用户点击答主头像的行为来自了解更多的动机，即用户对其产生了特定兴趣，在此场景下使用深色样式便是为了引导用户采取社交行为。
另外按钮圆角的转化也是为了强化信息的聚焦。关于圆角的内容可以去我的前一篇文章《写给设计师看的圆角背后的逻辑》，里面有更详细的讲解。
app store同理。商品列表页的按钮一致以浅灰色样式表达，而详情页使用了深色。
我们在按钮样式的选择上，务必需要考虑到当前的用户场景，避免过低的信噪比而影响信息的传达效率。
比如app store列表页中，用户的场景是非特定的浏览行为，如果使用深色按钮将会让其成为视觉焦点，强制用户不断注意到它，致使其成为“噪音”，影响用户对有效信息的获取。
面无限延展的属性让它可以承载各类信息。包括文字、图片或视频元素，异或是元素自由组合所形成的信息单元。
并且我们仅加深界面的背景色，就可以基于面的分割性，通过控制模块间距实现区域的划分。（这里的间距即我们熟知的分割条）
但这种文字墙一般平铺式的布局并不能更好得反映当前模块所在的层次，或者从用户认知上说它们倾向于一个层面上。而且直角矩形的四个顶角所形成的四个焦点，也让用户的视线倾向于发散而非聚焦。直到卡片的出现，问题得以顺利解决。
卡片在我们生活中随处可见，信件、名片、便利贴、甚至是我们的手机屏幕，它们从形态来说都属于面，并且都充分利用了面的承载性来充当一个收纳信息的容器或载体。
信件收纳来信人的寄语，名片收纳对方的个人信息、便利贴收纳事项清单、屏幕收纳用户界面。而且它们方便携带，我们想要知道更多，打开它即可。
2012年I/O开发者大会中，随安卓4.1系统一同惊艳亮相的Google Now首次将卡片展示在了用户界面中。
这种后拟物时代的设计不仅一改Google以往混乱的信息展示问题，而且熟悉的拟物感收获了足量用户的喜爱。初尝甜头之后，Google将卡片应用到了所有的产品，并且将其作为基础元素列入了一门伟大的设计语言中——material design。
你可以在material design中更系统得看到，google通过为界面添加了z轴（海报高度），来拟物映射生活中的一张张卡片。并且通过阴影的浓淡反应卡片所在的高度，通过不同的高度实时反映当前元素的层级关系。
而在ios11中，改版后的app store也使用了大量的卡片进行排列组合，形成格外的清晰的页面层次引导用户的视觉动线。
相比原本平铺直叙的信息，卡片式设计通过以下优点让其风靡设计界——
1.更高效得获取信息
每张卡片都是一个独立的面。从面的辨识性上说，独立和聚焦的特点让卡片与其他内容形成天然的断层，更易形成视觉焦点。
从面的分割性上说，卡片通过牺牲屏幕空间（四周的块外距）的方式让区域的分割相较分割条更为明确，清晰的层次关系便于用户迅速辨识和获取信息。
比如改版后的支付宝，通过引入圆角卡片来引导用户更好得留意到下方的各类生活服务，以实现向生活服务数字平台的转型。
2.更轻量的入口跳转
每个卡片除了承载信息外，都可以作为单独的入口承载内页的所有信息，并且卡片的属性让内页的展示变为了展开而非跳转。
比如app store点击卡片后，便以非线性的展开动画呈现所有内页信息，返回则只需下滑手势即可，轻量而有趣。
3.更多的交互手势
卡片独立的特点让它可排列也可堆叠，这为页面带来了更多的交互方式。
我们可以通过左右滑动（scroll）解锁横向更多的空间，也可以左右轻划（flick）形成类似tinder那样新的产品机制。
比如知乎的书架引入滑动手势展示更多内容，轻划手势切换问题卡片。
4.更舒适的视觉观感
卡片基于自身独立的特征让它成为网格布局的常用载体，富有观赏性的视觉张力让页面更加吸引眼球。
当然，卡片并不是通用的，原本可以靠留白或分割线分割的信息，如果为了视觉效果硬是卡片化处理，就会导致阅读的低效，而且浪费空间。
比如常见的一些feed流，相比卡片，这类同类的信息流更适合以列表来帮助用户迅速得扫视，并节省页面空间。
产品的功能并非完全互相剥离的，很多时候存在包含和平行的关系。
这两类关系分别可以以卡片的嵌套和分割进行处理。前者通过卡片堆砌表达信息的包含关系，而后者则通过视觉分割所形成的点击域传达信息的平行关系。
比如天猫点评页中的金香蕉好物推荐，每个卡片承载了商品信息以及点评信息，通过卡片的嵌套表示出两者的包含关系。而单条推选理由及入口的引导属于平行关系，因此采用了视觉分割来进行划分。
并且前者跳转的是点评详情，后者跳转的页面中包含了所有点评、商品推荐以及我要点评，因此在后者所属的面中加入了淡淡的一层业务主色来强化它的地位。
在支付宝改版后的卡包页中同样进行了一次嵌套处理，以更好得容纳不同的业务并传达各自所在的层级，并且以尺寸和颜色对比进行业务区分。
京东金融的付费业务卡片中存在两个平行关系的功能，因此以分割线形式进行了区域的划分。
同时，它利用了颜色进行了有效的视觉及情绪引导：黑色背景进行反白处理将其作为一个单独的视觉落点，强制用户注意到这里，并且又传达了付费用户所尊享的高级感。
自从ios7转型扁平后，线元素在苹果设计语言中一直占有重要地位，线自身的纤细、轻盈感可以迅速打造apple独有的轻量调性，不仅是按钮、图标的样式，字体本身也更加倾向纤细的字重。
但是，这个僵局在ios11发布的那天被彻底打破。
2017年6月6日，苹果设计师乔纳森仿佛和线有了隔夜仇一般，从解锁页面到原生应用中，原本ios10中曾经被大量使用的线元素基本全部被面元素取代。
比如锁屏页面，所有拨号按钮全部由幽灵样式改为了面性样式，而数字字重的变粗也是一种化面的倾向。这使得按钮及文字更易辨识，并且降低了线圈所产生的视觉噪音。
app store中也同样发生着形态的易主。
你可以在下图中看到，原本的幽灵按钮全部改为了浅灰色面性按钮。用于划分信息的分割线明度也得到了克制。
另外，11代中众所周知的大标题同样也可以看做化面的倾向（通过增加自身的面积），强烈的视觉张力引导用户迅速得进行辨识。
另外，所有的数字全部提至文字的前方，基于用户由左至右的动线更突出产品自身，以点化线的形式更好得引导用户进行扫视。
追求极致的苹果显然不能容忍tab中未选中态下出现的线元素，你可以在ios13中看到，线元素得到了彻底的消除，并且颜色一并得到了克制，再次提升了阅读内容的沉浸感。
ios11中的商品详情页获取按钮也同样使用了面性，深色的强调样式更好得契合了页面所在的用户场景，召唤用户对其感兴趣的商品采取点击行为。
控制中心页面，基于面元素的承载与分割性，所有的信号类功能独立收纳到了卡片中。
亮度和音量的调节则由横向的线性滑竿控制条改为了纵向的面性控制块。一方面增强了两者的辨识力，另一方面，根据菲茨交互定律，面积的增大带来了更好的点击体验。这一点在miui11的控件优化中也得到了应用。
所有的未选中态图标也进行了面性处理，大幅提升了10代中未选中页标签的辨识性。并且每个图标对应的文字也进行了加粗。
纵观ios11中所有形态的变化，我们可以发现这次改版的最终目的是：促进内容的高效获取。
顺从作为苹果历来遵循的设计法则之一，和包豪斯“形式追随功能”设计理念不谋而合。
——设计永远只帮助用户理解内容，但永远不与内容竞争。这一点在ios11的这次“改头换面”中被彻底应用及实现，并且对设计圈影响至今。
点、线、面理论并不像格式塔、尼尔森可用性法则等方法论那样，为设计者提供切实可行的具体指导，它更类似一种内敛的全局观，帮助设计师抛开颜色、质感等额外手段，从宏观的角度以点、线和面的方式将所有的设计元素抽象化处理，让原本杂乱无序的万象有章可循。
最后，以康定斯基的一句话结尾——
此篇完。
蓝蓝设计的小编 http://www.lanlanwork.com
