国内互联网近几年发展迅速，在很多方面都超过了一些其他国家互联网的发展阶段。随着国内互联网产品竞争日趋激烈，很多企业都把目光投向了用户量庞大的海外市场。而疫情对于全球经济的影响更是加速了海外市场的数字化进程。据 Sensor Tower 数据显示，2020年Q1全球移动互联网应用下载量达336亿次，同比增长了20.3%。
产品出海的第一道屏障就是语言。但若想打造一款能够适应海外市场的产品，只完成不同语种的翻译是远远不够的。在产品设计的过程中，我们需要考虑两个方面：国际化与本土化。
国际化+本地化的策略，也就是“glocal—global+local”，指的是结合国际统一和地区差异。这种策略在统一的前提下，通过灵活配置保障地区的个性化体验，既能满足统一维护提升产品效率，也能保障当地用户的特殊诉求，是一种性价比很高的设计方案。
产品设计的国际化
产品的国际化，即全球化。国际化的通用设计能够为产品打造一个全球统一的形象与内核。
Chrome的不同地区首页功能与样式基本一致
一套通用的设计系统和设计规范，既可以帮助我们在产品的国际化设计中 树立产品调性，又可以保证操作的 一致性，同时提升设计的 高效性。阿里旗下面向东南亚市场的购物平台Lazada在开发之初，通过使用Fusion Design的设计系统，大大节省了设计的时间。在如此复杂的电商业务场景之下，整套产品的设计最终仅3靠个设计师就完成了。
设计系统对产品研发成本的影响
除此之外，一致的内核也能够帮助企业在全球范围内建立起统一的品牌形象，增强 品牌的识别度与知名度。
产品设计的本土化
想要让产品在某一个市场上站稳脚跟，对于本土化的思考是必不可少的。本土化的核心是 因地制宜，根据地区差异相应调整产品策略。
UC浏览器在不同地区的首页布局
为什么说本土化对于产品的出海非常重要？其原因并不难理解。Charles Eames说过，“Recognizing the need is the primary condition for design.” 任何设计的本质都脱离不开对需求和问题本身的理解。好的设计是在对需求、动机、心理、环境等相关因素有了充分了解之后所产出的解决方案。
针对海外设计研究的思维框架
在考虑产品的本土化时，我们需要关注到用户的需求是什么、是否仍然成立，用户的行为模式是什么样的，以及整个外在社会物质、精神环境等方面的状况。蚂蚁金服团队通过海外本土化设计实践，总结出了一套“环境-人-需求“的研究框架，列出了可以去调研的多个方面。
蚂蚁金服-“环境-人-需求”出海产品设计研究框架（做了小部分修改）
需求（价值）
首先，我们要做的第一步判断就是原来的 用户需求是否成立。产品在原市场想要解决的问题，是否在新的市场仍然存在，即我们的产品是否 有用？这个问题的答案决定了原先的产品是否对于该市场的用户是有 价值的。如果有价值，那么就可以深入探索如何让用户用起来；如果没有价值，那么就需要进一步判断是否要继续开拓这个市场，以及如果继续开拓这个市场，在原有的产品形态上，我们能否通过改造的手段让它符合在新市场的用户群中挖掘出来的、不一样的 新价值？达到了“有用”的标准，我们则需要开始考虑“ 好用”的问题。只有满足“好用”这一条件，产品才能够被用户用起来、从而真正在新市场落地。在实现“好用”的过程中，我们可以关注以下几个层面的影响因素：
生活形态、价值观
生活环境与社会环境会塑造当地用户的生活形态与习惯。下图分别是日本和北美地区的新闻资讯类App。同样是推送新闻资讯，两者在表现形式上却大相径庭。可以看出日本的新闻App布局紧凑、信息量大、页面坪效很高；而北美的新闻App则更注重突出重点内容，信息密度相对来说并不高。
日本-新闻资讯类App
北美-新闻资讯类App
这种差异的背后，其实是两地上班族生活形态的差异。日本城市小、人口密度大，上班族通勤大多会选择地铁。而北美地区面积大，大部分人会驾车上班。驾车的人双手需要长时间控制方向盘，同时开车也需要持续注意路况，只能在间隙中查看新闻内容；而乘坐地铁的人双手更加自由，也有较长的通勤时间需要消磨，故可以接受更多的信息，也能够接受更繁琐的操作。
北美（左）和日本（右）各自的生活形态
有时候，某个地区的用户长期习惯的操作模式，会与主流的操作模式有所差异。设计师junu在个人博客中讲述了他为Melon（一个韩国主流音乐播放器）进行体验优化的一段经历。他发现Melon当时的播放操作逻辑比较冗长，用户需要先点选列表中的多首乐曲，再点击底下的播放键，此时Melon会将用户所选歌曲自动生成一个列表并进行播放。这和当时Spotify等音乐播放器“点击即播放”的主流交互逻辑相比，要更复杂和麻烦，尤其是在用户只是想要立即听到某一首歌曲的时候。因此，junu 提议引入“点击=播放”的操作方式。但当他们设计出了这样的优化方案后，却发现在测试过程中老用户们对这样的交互方式感到陌生和沮丧。基于用户反馈，最终，他们采取了一个折中的方案，既保留了原先的复选框作为多选操作的区域，让用户仍然能够选择乐曲生成列表并且播放；同时又引入了点击单曲直接播放的操作。相比第一版优化方案，用户的接受程度有了明显提升。
Melon播放器的点选操作逻辑
设备环境
10年前，高端大屏幕手机在东南亚和非洲市场普及率并不高，因此产品出海时需要考虑当地常见的设备是什么，并作出相应的适配。近几年，随着市场经济的发展以及中国手机的成功出海，即使是东南亚和非州的发展中国家，高端移动设备的普及率也已经很高，这为设计师在考虑通用性的过程中减轻了不少负担。不过，在为每个地区的用户做产品设计时，仍然需要调研清楚当地设备的使用情况，比如什么样设备更流行、普及率更高；如果某一地区的设备不够发达，那么设计的操作也需要考虑到设备不同所造成的差异。
业态/监管
在不同的国家或者地区，各个行业的标准与制度也可能存在很大区别。例如财会软件行业中，在北美和英国占据了重要市场份额的Quickbooks、Xero等公司，却无法成功打入欧洲一些国家的市场。因为财会软件本身的功能、流程设计与当地的财务制度是紧密相关的。在这样的情况下，欧洲本土的企业显然会对当地的政策和制度更加熟悉，也更容易设计出符合当地企业与会计需求的财会产品。
2015年，Airbnb进入中国市场。在最初的市场调研和用户调研之后，针对本土化，他们所迈出的第一步就是根据中国的业态环境对产品的前10%和后10%做了改造。其中，产品的前10%指的是登录这一类用户开始使用产品所需要进行的步骤，而后10%指的则是支付等用户完成一个完整流程所需要进行的操作。因为当用户进入到产品主要链路中时，其功能流程基本相通（搜索地点、挑选房间、浏览信息等），不需要做过多的改变；但产品的前10%和后10%则决定了用户能不能把产品用起来并不遇到障碍。因此，针对登录的部分，爱彼迎将原先的Facebook等第三方登录替换成了微信与微博账号的登录；而在支付的部分，爱彼迎引入了支付宝与微信支付的方式，打破了中国本土用户进入产品和完成订单的壁垒。
Airbnb产品中国本土化的“前10%与后10%”策略
社会经济
社会经济环境的不同代表着社会阶层状况的不同，它会影响人们在消费时的行为方式。蚂蚁金服在调研菲律宾市场时发现，当地拥有银行账户的人口仅占了总人口的34%，同期中国拥有银行账户的人口则占了总人口的85%。而这34%的人基本上都是当地的富人及中产阶层。在贫富分化严重的菲律宾，大部分普通民众是没有银行账户的。这一人口学特征很大程度影响了蚂蚁金服电子钱包业务对菲律宾目标用户的描绘，继而影响了产品各个层面的设计。
文化/宗教
在各个文化/宗教里存在着不同的意象，也会有各自的表达方式与禁忌等等。在某个文化下表示友好的行为，在另一种文化下可能是一种冒犯。这些都是在设计时需要去注意的。除此之外，在不同的文化/宗教语境下，人们会有不同的行为模式与价值取向，这里我们会引入一个模型——霍夫斯泰德文化维度模式，来对这一问题进行更详细的解读。
霍夫斯泰德文化维度模式（Hofstede’s Model of Cultural Dimensions）
霍夫斯泰德文化维度模式是荷兰心理学家吉尔特·霍夫斯泰德提出的用来衡量不同国家文化差异的一个理论框架。它可以帮助我们对于不同文化群体的价值观有一个较为全面的了解，从而更明白该文化群体中人们的行为倾向。此理论总结了衡量各文化价值观的六个维度：
使用他们官方网站（https://www.hofstede-insights.com/）上的 Culture Comparison Tool，可以查询到各个国家的文化维度指数，也可以选择不同的国家进行对比。
在为特定地区的用户设计产品时，我们可以以从这些维度去解读他们的行为倾向，并据此提出相应的解决方案或者设计方案。滴滴团队在开拓墨西哥市场时，根据墨西哥的文化维度指数在产品的本土化上制定了从功能到外观等不同层面上的设计策略。
墨西哥地区的文化特征指数
滴滴墨西哥的本土化设计策略
这类源于文化差异的设计差异并不少见。在淘宝等国内的电商平台上，“按照销量排序”是一个被高频使用的功能，消费者们认为什么产品买的人多，什么产品就更好。这样的观念也催生了一大批店家刷单的行为。但当在北美的电商平台亚马逊上，我们会发现并没有按销量排序这个选项。因为美国的用户相对来说个人主义更强、更相信自己的判断和选择，他们不认为他人推荐的就一定是好的。
国内外电商平台对比
在企业即时通讯工具行业，国内的主流产品，如企业微信、钉钉等，都选择了蓝色这一比较沉稳的颜色作为主色调，在产品功能的形态上也偏向于严肃。而海外的办公产品Slack，视觉色彩更加丰富；整体的产品定位也更加活泼欢乐，常常会有“不严肃”的表达，比如在界面多处都使用了emoji。这样的产品形态差异，其背后是两种文化在放纵（享乐）/克制（严肃）这一维度上的差异。
企业微信与slack的产品风格对比
内容本土化
除了功能框架上的设计需要考虑本土化外，产品中运营内容的本土化也是不可轻视的一环。Spotify Design 团队在《 Designing for Belonging: Why Image Localization Matters 》一文中，记录了他们对于内容本地化的一些经验和思考。同样，内容的翻译仅仅是本土化的第一步。在地区之间区别不大时，完成内容的翻译便能够满足其他地区的需求。如下图中 “浴室歌单（ Songs to sing in the shower）”的播放列表，列表上的文案一经翻译，就能够推送给德国、波兰、以色列、意大利等一众国家的用户。但当内容的阅读群体有着更显著的差异时，仅仅翻译是不够的。在看到这张图片的时候，其他人种比如亚洲人可能就不会产生很强的代入感，也会缺少对产品的一种归属感（这个产品并不是为”我“设计的）。
Spotify "Songs to sing in the shower" 歌单
下图展示的是Spotify另一个歌单—— “快乐时光（ Happy Hits)" 的封面在不同国家的呈现形式。可以看到，面对文化差异更大的群体时，Spotify在保持了统一的样式风格的基础上，针对每一个国家和地区都展示了当地人在他们的生活中“快乐”的样子。这种本地化内容更加贴近当地用户，也能够让用户产生更强的连结感与共感。
Spotify "Happy Hits" 歌单
结语
回到那句话 —— ”Recognizing the need is the primary condition for design.“ 产品的出海其实只是我们在设计中会遇到的一种场景，在这个特定场景下我们的设计思考与其他场景下是互通的。如果仅仅完成了翻译这一步，那我们就忽视了在新市场下另一群用户的特征、需求、使用情景、操作习惯等关键信息。无论是不是在为产品的出海而设计，我们始终应该保持对用户的好奇，让最终的设计实现我们期望达成的目标。
文章来源：UI中国 作者：酷家乐用户体验设计
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导语：在一个团队里，成员之间“协同合作”是非常有必要的，比如一些岗位没办法完全理解设计师的想法，多沟通可以避免一些不必要的摩擦；在出现问题时，现在自己的环节找找问题，再进行沟通；本文作者分享了关于精准还原设计稿的环节，我们一起来看一下。
UI设计师作为展示产品形态的执行层，产品上线前走查视觉与交互还原是必经环节。
设计师可能都遇到过一个问题，作图时连一像素的分割线都纠结好几次，但是开发完的效果却不尽人意，UI验收不通过；然后前端这边委屈的想拿出藏在键盘下的四十米大刀找你来血拼。
我们经常会听到身边的设计师与开发哥的一些对话，关于对齐、大小、间距等设计还原问题经常会讨论很久；甚至有时会觉得，几个像素的间距是不是有必要这么纠结？
「还原」是指事物恢复到原来的状况或形状，互联网中的「设计还原」是说开发后实际界面和设计稿效果有偏差，进行设计校对。
一直以来，设计验收都不太受重视：
不同的项目类型还原度也不同：用户产品>B端产品>后台；对于用户产品最好是能做到像素级还原。
在这个快速发展、迭代、更新的时代，互联网产品的用户体验重视度越来越高，而其中的产品设计还原也成为了工作流中重要的一环。
我相信每一名UI设计师，心里应该都有一个前端能100%还原设计稿的梦想，毕竟那是我们艰苦奋斗的劳动成果。
而视觉还原的高低与否，则直接取决于设计——开发——测试这些环节的协作质量；不仅仅影响上线产品的用户体验，还影响着作为产品设计最后一环的工作质量。
经过走访UI/UX设计师、前端工程师和测试工程师的还原设计图的工作场景。
深究原因后，线上效果的失真率其实涉及到设计、前端开发、测试这三个环节，分析造成这种现象出现的原因大概有以下几点：
了解开发依据哪些规则还原设计稿，前期的准备工作是重中之重，设定好每一个细节规则，后期落地还原时才会将页面的失真率降到最低。
UI 设计中，设计规范是设计还原一个关键步骤；一个好的规范应该是高效的、简单易懂的。
设计规范通常可以把颜色、字体、组件等内容制定成规范，不仅仅保证视觉的一致性，也极大方便样式和组件的复用，后期的维护和开发；在规范的辅助下，开发在搭建全局共用控件时规则更加清晰明了，如按钮、行间距、字体大小、色值等等。
3.1.1 色彩规范
颜色是设计中最重要的元素，颜色的运用与搭配决定设计的品质感；在 UI 设计中，颜色的使用规范主要在于：品牌主色、文本颜色、界面颜色（背景色、线框色）等。
3.1.2 字体规范
文字是APP主要信息的表现，尤其是新闻阅读、社区APP等制定标准的设计规范和良好的排版方式，用户使用APP也觉得毫无疲劳感，这一点很重要。
不同的字体气质不一样，并且不同场景下带给人的感受也不一样；所以需要在设计的时候考虑到字体的设计效果，然后在设计规范中注明；主要规范标准字的大小，标准字要注意跟上文的标准色进行组合，突出APP重要的信息和弱化次要的信息。
3.1.3 图标规范
在 UI 界面中，具有标识性质的图形就是图标。作为 UI 设计中重要的设计模块，产品的每个页面中都有可能存在图标。
设计规范中，图标一般按照用途分为两类：应用图标、功能图标。
图标还应该根据不同的功能需求设计不同的状态：如常态、选中态、点击态等。
应用图标：各种应用程序的识别标志，在应用商店里下载的一些应用程序的标志。
功能图标：规范中最好标明图标格式与使用方式。比如 Web 设计，图片可以使用 iconfont 管理，可生成代码交付给前端开发；如果是原生 APP，那么需要标注图标导出格式与尺寸。
3.1.4 图片规范
图片作为界面设计的重要组成部分，需要标明尺寸规范，分为不同用途的种类。
3.1.5 控件规范
控件是指产品界面中可操作的部件，与组件是有一些区别的：控件翻译为 Control，组件翻译为 Component。
通俗的解释说法就是组件为多个元素组合而成，控件为单一元素组合而成。
常用的 UI 控件（Control）：按钮、输入框、下拉列表、下拉菜单、单选框、复选框、选项卡、搜索框、分页、切换按钮、步进器、进度条、角标等。
3.1.5.1 按钮
按钮有 5 个状态：正常、点击、悬停、加载、禁用。
需要在规范中分别罗列出这五个状态，标注上对应的按钮填充色、边框色、圆角值、按钮宽度和高度，按钮文本大小、颜色值；如果是图标按钮的话，除了上述参数值以外，还需要标注 icon 和按钮文本之间的间距，icon 图标的大小。
3.1.5.2 输入框
用于单行信息录入文字上下居中显示，支持键盘录入和剪切板输入文本，对特定格式的文本进行处理：密码隐藏显示、身份证、卡号分段显示，标注宽高。
3.1.5.3 选择
选择可分为单选与多选，并且也有五种不同状态：未选择、已选中、未选悬停、已选失效、未选失效项，规范中需展示出所有效果状态。
3.1.5.4 进度条
用于向用户展示步骤的步数以及当前所处的进程。
3.1.6 缺省页
常用的 UI 组件（Component）：表格、对话框、提示条、气泡提示、日期选择器、多级选择器、标签输入框、组合框、上传等。
如果UI忽略规范，前端在不知道有可复用组件的情况下，很可能每一次都要手动书写代码；写的代码越多，遗漏掉细节和犯错的可能性越大，导致效率降低。
最关键的是——对于今后的迭代，前端又得一个页面一个页面修改。
3.2.1 组件的好处
统一性：
高效性：
延续性：
3.2.2 组件化的特点
3.2.3 组件化分类
我们根据当下现有的业务场景和对往后一段时期的业务发展方向进行规划，将组件库的组件类型分为通用组件和业务组件；一般业务组件库是不对外的，所以在Ant Design官网只能看到通用组件部分。
3.2.3.1 通用组件
指适用范围广，扩大频次高，可重复使用多个业务且不包含业务逻辑。某些导航栏，按钮，吐司，弹窗等。我们将通用组件细分为五个子类别：基础组件，导航，数据录入，数据展示，操作反馈。
2.3.2 业务组件
这类组件对比通用组件而言最大的特点就是包含了一系列业务属性，跟产品功能有重叠的关联性，因此影响到适用范围可能仅限于于1〜2个业务系统或特殊场景，且复使用频次不高。毕竟使用场景特殊也有限，放出参考意义不大。
2.3.3 组件化搭建流程场景
组件化的搭建在两种场景下进行：
1）产品立项前就开始组件化，在产品0到1之前，拥有一套组件和设计规范。设计师可以从以前项目的组件库和设计规范直接套用并修改，这样项目前期设计做起来更加方便且省时省力少挖坑。
2）产品经历过0到1后，产品趋于成熟，这个时候开始做组件化。组件化搭建最多会有六个步骤，分别为：梳理类目、场景走查、问题分析、方案设计、生成插件库、验证开发。
具体的组件化设计升级流程我总结成了下图：
当团队搭建完成组件化之后，接下来就是成员间的使用，这一过程有业务需求产生组件模板、组件模版形成页面、页面形成页面流程和页面流程形成用户体验。
组件库重建之初无法一应俱全，是需要后续设计师不断的维护与迭代的。
关于设计输出，现在很多像蓝湖、zeplin、Pxcooker这种标注软件把设计师从手动标注解救出来，往往把视觉稿在蓝湖一扔就完事，前端开发完界面视觉还原度还是不高。
因为标注软件只能负责生成元素的尺寸、样式，遇到复杂样式即使你反复衡量的一些像素，开发还是会漏掉——这样很有可能出现视觉灾难。
所以，一些复杂而又关键的页面我建议可以贴心的做些手动标注，主动告诉开发重要性和注意点。
我们现在工作中会有两种标注情景：
3.3.1 运营标注
因为很多数据是后台传输到前端，有图片、有文字，每个内容都需要给运营设置一个上传标准。
3.3.2 开发标注
开发标注是从设计稿落地成代码的主要参考，除了蓝湖提供的标注，我们还需要写一些重要部分设计说明，例如：模块区分、局部特殊设计（该内容根据自身产品而确定）。
3.3.2.1 常规手动标注
3.3.2.2 特殊模块/页面划分说明
复杂的表单设计，是很具有代表性的复杂页面，根据页面的布局进行原型化示例，帮助前端更好的搭建代码框架。
关于切图，切图之前应跟开发确定好输出的格式和尺寸，确定应该用 SVG，一倍图或是两倍图，SVG体量小渲染质量好，单色使时还能替换颜色；PNG则通常用在实景图，一倍图和二倍图则根据实际需要进行输出。
如果要做分层动画，那我们就涉及到分层切图，如果桌面端和手机端样式差别较大，那我们需要和开发沟通好如何实现，是否需要特殊切图；所有的特殊切图合特殊样式，我们都应该提前跟开发沟通好。
设计-开发这个环节的协作质量对视觉还原起着决定性的重要影响；但是，由于本身的工作性质，我们和开发之间沟通是个棘手又麻烦的历史遗留难题；设计师与开发鸡同鸭讲从而导致视觉还原度低下的局面，几乎每天都在上演。
俗话说“知己知彼百战百胜”，如果设计师能够了解一些基本的开发术语以及开发流程，就可以更好的打破沟通隔阂。
那网页设计稿的实现具体是怎样操作的呢？
步骤可以概括如下：
3.5.1 设计师的要了解的「盒子模型」
3.5.1.1 什么是盒子模型
在开发的工作流当中反复提到的盒子模型。虽然不需要完全了解前端是怎么通过代码来落地你的设计稿的，但你一定要知道什么是「盒子模型」。
「盒子模型」是前端的基础知识，在「盒子模型」理论中，页面中的所有元素都可以看成一个盒子，并且占据着一定的页面空间。
一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两个方面来理解：一是理解单独一个盒子的内部结构，二是理解多个盒子之间的相互关系。
3.5.1.2 盒子模型的组成
每个元素都看成一个盒子，盒子模型是由 content（内容）、padding（内边距）、margin（外边距）和 border（边框）这 4 个属性组成的；此外，在盒子模型中，还有宽度 width 和高度 height 两大辅助性属性。
举一个真实界面示例，我们在浏览器中打开「开发者模式」可以看到网页的样式代码以及当前界面是如何通过「盒子模型」来布局的。
前端并不能简单的像UI画图时一样，随意地拖放一个可见元素到某一个位置；他们要通过把每一个元素装进一个「盒子」中，再去界面中定位它所处的位置。
3.5.1.3 了解盒子模型对于UI的好处
当你摸清了前端是如何布局实现你的设计稿后，你在作图的过程中就会开始懂得站在落地的角度思考问题，善用「盒子」，将界面中每一块布局「盒子化」。
我举一个示例，如果我们不使用「盒子」，当我们在做一个卡片时，前端并不知道UI是如何定义每一个元素的间距；比如，然后将这一个间距套用在他也不知道应该设置为多高的「盒子」当中。
所以UI在出稿时就带入「盒子模型」思维，合理地构思好每一块元素的布局，一方面可以帮助自己在输出页面时，布局更加合理；另一方面可以在前端落地时辅助前端准确还原。
优秀的设计离不开开发人员的落地支持，作为设计师，协同开发人员完成设计落地也是工作中重要的一环。
做好以下几点，站在开发人员的角度为他们“多想一步”，高质量的设计还原指日可待。
在进行设计还原的时候我更希望大家把设计评审的环节重视起来，之前也有详细的讲到过《如何进行设计评审》的，因为我认为评审对于设计还原的意义是把问题前置化。
通过设计评审可以把改版视觉变化最大的地方和开发说明清楚，这些改版布局框架改变都会增加开发工作量；这个环节把握好了，那基本都能实现出来，特殊情况除外，比如前期忽略了一些后台数据的问题。
有些细微的地方需要我们特别像开发说明，也加深他们的印象，在实现时候就减少出错；像开发走读的时候，只把关键核心点，规则讲清楚；我们前面每走一步，都是为了后面我们检视还原度的时候要轻松一些，开发也轻松一些，就比如前期基础没打好，后面深入很难。
设计师做好会议记录（记录问题及解决方案，以及达成的共识），并且在会议结束后以邮件形式发送前端们，抄送产品和运营，确保会议内容的传达到位；让设计师与前端工程师相关问题达成一致，提升工作效率。
在开发紧张环节中，即使我们前面所有工作都准备好了，也很难避免开发不找我沟通；这时候我们要积极回应他们，并且和他们一起处理问题。
比如某些难度大一点的页面，开发实现效果和设计稿差异不小；那么这时候，开发会截一张他们实现的效果图给你看，这时你就要仔细去找问题，不要一口咬定就是开发的原因；先沟通具体原因，然后找出解决办法，如果是标注出现问题，比如标注标死了，页面不灵活，适配局限性很大。
在视觉走查的时候我们可以把test环境下的页面和设计稿拿出来对比，走查头部、尾部等位置是否完整统一，按钮样式、反馈状态、报错等样式是否统一；是否有缺少的场景和状态，根据任务流程对场景和状态进行排查，保证设计的完整性。
这里给大家推荐两个视觉走查方法：
1）大家来找茬法
验收的时候，我们需要把开发实现后的效果截图，然后再去和设计稿做对比。
我们可以直接把截图放在设计图上方，降低透明度，大致比对下，就知道哪里不太对，然后再具体标注需要修改地方的参数。
2）页面重构走查
走查还原的时候，在Chrome浏览器的空白处右键点击检查，找到里面的Computed窗口，我们可以找到具体的文字、间距、投影等属性。
有时候一些比较细微的调整，我们可以双击具体的数值进行调整，调整到自己满意之后再给到具体的数值给开发；这样就不用在我们摇摆不定的情况下，造成双方的困扰
4.3.1 确保可用性
设计任务流程，进行设计走查，在移动App端，我们所设计的应用是建立在手指点击操作的基础上进行使用的。
我们的手指不像鼠标一样能够精确定位和响应，所以我们需要在设计的过程中确保可点击的区域能够较为明显的识别。
4.3.2 确保易读性
文本内容是大部分产品的重要组成部分，所以文本的排版是非常重要的（很多人说中文排版不好看，那是因为你不会用中文排版的方式去做排版）；确保文字清晰、易阅读是在文字处理上的必须保证的。
在众多设计原理中，格式塔原理一直被广泛应用，它可以很好的梳理界面信息结构、层级关系，从而提升设计的可读性；在自查过程中，我们可以通过格式塔原理检验页面中的元素是否符合标准。
4.3.3 反馈机制
当用户和产品需要交互时，会使用不同的模式反馈信息或结果，为用户在各个阶段提供必要、积极、及时的反馈，避免过度反馈，以免带来不必要的打扰。
常见的三种反馈信息如下，大家可以在此基础上自查是否有反馈、反馈是否传达清晰，是否对用户有即时的响应等细节
4.3.4 动效还原
动效这块是产品中比较高规格的一个存在，所以在使用的过程中一定要谨慎，不能随意加入多余的动效，导致在使用产品的过程中出现问题。
在我走查的经验多了以后，发现 最容易造成落地页面与设计稿视觉差异的，其实就是颜色与间距还有图标的视觉错觉。不要小看这两个细节元素，把控不好它们会让落地页面效果大打折扣。所以在进行页面还原的可以着重对比一下几点:
4.4.1 分割线
在验收的时候要特别注意分割线的问题，分割线是在所有屏幕上都是1px，但是很多程序员没有注意这个，或者说设计师在开发前没有特别说明；程序员就写成了1pt，因为pt是1x下的单位，px是实际单位。
所以在做分割线的是，单位需要是「px」，这样才能保证每个屏幕的分割线都是1像素。
下面主要以3个主要场景来分点解释分割线的标注：
4.4.2 投影
阴影作为一个重要的视觉元素，让主元素和其他元素从背景中“弹出”并拥有深度，更好地将信息层级呈现给用户。
常规投影与弥散阴影推荐使用css代码完美实现；特殊情况下还需提前与开发人员沟通权衡各种方式的利弊，选择适合项目产品的实现方式。
结合自己实际的工作经验和与开发人员沟通的心得，实现弥散投影的方法，可以通过两个方法实现：
1）切图对接开发人员
虽然切图可以解决这个问题，但是切图也有一些弊端，因为每个卡片都使用切图的话，会使开发的包变大，可能会出现加载慢、闪退等情况，这些体验也是很糟糕了；所以在这个过程中的一些问题务必要提前与开发人员及项目人员沟通好。
2）CSS代码实现
常规情况下，效果都比较好，但是也会遇到一些遇到异常情况，比如不规则形状，通常用代码也比较复杂，这个时候需要提前与开发人员沟通切图情况，避免后期一些问题。
在做设计的过程中，我们需要更好地理解下游的工作，达到一个高效的沟通。
不管是哪一种方法，没有对错之分，关键是要懂得“权衡利弊”，提前与开发人员沟通到位；只要是适合自己公司项目且能够高效还原设计稿的方法，都是值得一用的。
4.4.3 文字行高
文本间距也是影响落地效果的关键因素之一，文本间距指的是——纯文本与其他元素之间的间距。
UI出稿时应该注意 文本行高可能导致前端的测量误差，文本间距主要的原因是 sketch 与 ios 系统中字体的行高不同；最简单的解决方法是通过手动调整 sketch 中字体的行高，业界常用的行高是字体 size 的1.2或者1.4倍，实际这两个值都是够不准确的。
首先我们要理解什么是行高（line-height）。
我以 Sketch 为例，当我们设置了一个70px的文本，Sketch 会默认给我们设置文本为98px行高，文本的上下会包含一定的空白像素。
如果UI不设定行高规范，落地过程中就会出现以下问题：
行高的解决办法：
面对行高的问题，我一般会在设计的过程中，输出规范行高（可以是x倍行高，也可以是具体的行高值，如28px的多行文本行高为40px），和前端进行对接落地。
最简单的解决方法是通过手动调整 sketch 中字体的行高，业界常用的行高是字体 size 的1.2或者1.4倍，实际这两个值都是够不准确的。
最近看到了一个新的公式可以同步开发根据字号设置行高。
设字号为x，行高=x+2ceil（x/10），ceil（）的意思是向上取整数 L（行高） 比如：12 + 2 * ceil(12/10) = 16。
注意这里适用于单行行高，由于多行涉及到的排版问题不仅仅是行高带来的，有机会的话可以单独聊一下。
推荐DoraemonKit 是一个功能平台，能够让每一个 App 快速接入一些常用的或者你没有实现的一些辅助开发工具、测试效率工具、视觉辅助工具；而且能够完美在 Doraemon 面板中接入你已经实现的与业务紧密耦合的一些非通有的辅助工具；并搭配滴滴的dokit平台，让功能得到延伸，接入方便，便于扩展。
4.4.4 视觉重心修正
在设计上为了保证界面的视觉平衡，往往不是设计软件直接精准对齐，我们总是会通过调整间距、大小或者角度补齐一些负空间，让画面保持视觉平衡。
还有设计中通常向右箭头来表示模块入口，当我们把箭头和文字右对齐，箭头视觉上会更外突；这时候我们会往里面缩进1至2像素，但是切图完给完全不知情的前端后，设计师要主动讲解一下，或者写进规范里。
项目会有些需要展示logo的地方， 有的圆形、有的长方形、有的纯文字，尺寸差距比较悬殊。
这种情况下，我们需要给他限制一个高度，在这个高度以内，再根据logo本身的体量来调整图形的大小，处理好logo的视觉平衡。
特殊场景在设计过程中常常会被忽略，等到在现实中碰到才会意识到缺失异常状态会非常尴尬，所以大家在完成主流程设计后，一定也要考虑到特殊场景。
大家可以参照以下几种场景对设计进行自查优化调整：
1）网络异常
考虑到网络异常情况时，通常产品会通过异常状态页面或者交互反馈来告知用户当前的异常状态和如何解决问题（解决方案引导、刷新、toast）。
2）服务器异常
服务器异常状况较少出现，时间也较短，通常不提示具体原因，设计处理方式为在新页面展示缺省页，文案+插画的形式给予用户提示及重试引导。
3）空状态
空状态指的是页面中无内容，主要的几个情况，设计师需要根据不同的场景给出文案+插画的表现形式引导用户：
4）内容缺失
内容缺失展示效果的考虑，设定页面图片缺失的占位图。
5）加载页面的表达方
考虑网络加载或者数据加载的时候会等待几秒钟，通常产品会有一个简单页面的占位图形式来减轻用户在等待时的焦虑感；可以是loading，也可以是整体页面的刷新动效。
设计还原的时候最后还还看一下不同机型适配的问题。保证不同机型的界面呈现效果一致。
4.6.1 动态眼光
手机适配的时候很多设计师会遇到一个问题，就是在750*1335的屏幕上做的设计图；但是适配到640*1136的屏幕上就有元素放不下，所以设计师在出图时需要用动态的眼光去考虑问题。
知识点：在简单的界面中，由于本身界面的内容比较少，确定位置就会比较难，因为要考虑到不同的界面内容要怎么放才能保持视觉统一；这个时候可以先将界面中的信息分成不同的几个部分，先保证每个部分内的固定内容，再确定自适应的内容。
4.6.2 固定适配内容
在简单的界面中，由于本身界面的内容比较少，确定位置就会比较难，因为要考虑到不同的界面内容要怎么放才能保持视觉统一；这个时候可以先将界面中的信息分成不同的几个部分，先保证每个部分内的固定内容，再确定自适应的内容。
4.6.2.1 图标或按钮
4.6.2.2 搜索框
4.6.2.3 Y轴间距
一般来说，Y轴的间如果在相近的组件里，都会是固定的，不会有变化。
4.6.2.4 图片
像这种图片的列表或者，十字纵横的头像或文字，大小都是固定的，变得会是间距或者数量，如下图所示：
对于比较复杂的模块，快速找到将以上所说的固定因素和自适应因素，除了能够让标注效率大大提高之外，还能够找到合适的适配方法，避免出现开发完成后才发现某机型适配效果不理想的情况。
4.6.3 自适配内容
自适配内容也给大家梳理出来。
4.6.3.1 文字弹性适配
文字流指在多行文字的情况下，文字数量变化会影像页面布局和元素大小，如下图所示：
文字弹性适配一般涉及的是宽度适配，宽度适配普遍使用的是间距适配，即定好左右页边距，中间弹性拉伸。
当文字左右两边有内容的时候，我们需要标明文字可显示的范围，也就是说它最多能显示几个字——这种方式可以做到较好的适配，也是做快速常用的适配方法。
4.6.3.2 banner
这里说的图片是指banner或者feed流里的图片，适配的方法大多都是自适应，界面中的元素间距和数量不变，元素尺寸进行等比缩放，比较适用于固定比例；但尺寸随屏幕宽度变化的元素，如下图所示：
对于比较复杂的模块，快速找到将以上所说的固定因素和自适应因素，除了能够让标注效率大大提高之外，还能够找到合适的适配方法，避免出现开发完成后才发现某机型适配效果不理想的情况。
假设视觉还原上真的出了问题，首先要寻找原因，是自己没做到位？还是对方没理解你的想法？
我感觉可以按照以下几个方法去做：
设计团队内部先弄明白改版的意义，画好标注色值、像素的示意图和文档，做好产品原型等任何能让对方不需纠结，直接可以上手的工作。
做好前期的准备工作，尽可能的多做思考，完善设计稿；尤其是边界情况，把自己的问题留给自己，这样可能产生的设计还原问题就会大幅减少。
多向开发同学请教，即便遇到技术确实难以实现的情况，不要逃避或者过于固执，了解具体原因，不断累积自己的技术知识；自己的专业、努力是赢得程序员尊重的前提，赢得他们的尊重你才能顺利开展工作。
这是一个比较复杂而且需要长期努力的话题，每个公司都会有其实际情况存在，团队越大，情况越复杂。
设计师团队或者个人的话语权如果很弱，确实会面对十分被动的处境；首先需要说明的是，话语权是赢得的，而不是赋予的；想要改善被动的局面，要认清所处的环境，问题的症结，调整定位，并付出努力；只有证明了设计确实能够解决问题，甚至驱动商业价值，才会逐步提升话语权。
完成一项任务时最重要的是团队的思维模式是否统一，设计师在乎用户体验，工程师只在乎开发成本，那问题没办法达成一致是很正常的。
想要让大家认同你的看法，就要在平常不断的潜移默化影响别人；比如没事多跟公司其他人聊产品、聊体验、聊感受，慢慢给他们灌输体验的重要性。
只要你的话题有趣，人有趣，没有人会拒绝跟你聊；时间长了，整个团队的思路就会有所转变。
设计师自己可以先按优先级去排布还原顺序，看这1像素是否对当前产品重要性。
在搞清楚产品进度、优先级的情况下，记录所有还原问题，自己标记优先级，整理完毕后一次性给他，再跟程序员解决方案和时间；也可以与开发同学共同摸索一套双方都能接受的清单模式，标明问题，修改建议，重要层级，根据实际情况详细说明或者简要说明，能够当面沟通更佳。
良好的团队合作氛围是有效的润滑剂；好的合作关系如同一条战壕里的战友，哪怕多年后回想起来，也应该是一起冲锋陷阵的光辉岁月。
设计师应该认识到自己在整个项目流程中的位置，不卑不亢，把麻烦留给自己，不要推卸责任或者互相推诿，逐步打造自己的声誉和气场。
一个优质的项目落地是各部门协同合作的成果，就像我们玩游戏，后期高质量的输出也需要前期优秀的辅助来打铺垫。
在“协同作战”的基础上，灵活运用规范、标注和走查的方法来主动推动项目的进行；不仅可以让设计稿得到最大程度的还原，也可以提升我们协作能力和对环节的把控能力。
任何问题只要多交流，会避免很多阻塞情况；出于设计师的角度当然都希望每一张视觉稿得到100%的还原；因为用户只看你上线效果，但是往往排期紧张需要一些取舍，我希望能在有限的时间内做到最好。
在后期视觉验收的时候，我们可以换位思考，把自己当做程序员，站在他们的角度去思考问题；怎么样的验收方式会更方便开发修改，减少重复返工的次数，情愿验收标注的时候多花10分钟，也要把修改意见写详细，帮开发节省时间，反过来也帮我们自己减少了二次验收的成本。
文章来源：人人都是产品经理 作者：郝小七
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
设计到了瓶颈时候需要打破瓶颈的好方法就是否定，否定自己之前做的一切东西开始去探索学习新的设计方向与用户体验。
AJAX之父Jesse James Garrett在2007年出版了一本名为《用户体验要素》的书，提出了从5个要素自下而上的建设用户体验；从最早这本书针对web端的设计到现在移动互联的app设计，因为其超强的普适性和实战指导性被广为流传为UX设计中经典的项目创建与研究的方法论。
2008年，当你宅在宿舍玩游戏，发现已经很晚了，你打开饿了么APP，点了一个蛋炒饭，半个小时后就有人把饭给你送到宿舍。你禁不住说道“Aha，原来在这个APP中可以足不出户就能吃到身边的美食！”
2015年，当你在学校散步，发现有很多辆小黄车，然后下载一个APP就可以将车子骑走，你会禁不住说道“Aha，原来共享单车可以这么便宜就随便骑呀！”
好的产品一定是企业服务能力的体现，要保证每一个产品功能都能落地实施，否则产品只是镜花水月。没有能力去支撑的产品都是耍流氓。因此要基于企业的发展布点规划，每一个我们做出的核心决定，都应该建立在我们确切了解的基础上。
但一个好的软件之初应该去怎么思考未来设计的方向呢？通过5w1h指导我们更加全面的考虑问题并高效解决问题。
弗洛伊德认为，如果将人的整个意识比喻成一座冰山的话，那么浮出睡眠的部分属于意识的范围，淹没在水下的那片深不可测的部分属于意识的范围，而链接意识和无意识的那层面属于前意识的状态，这就是著名的“冰山理论”。
无意识设计是深泽直人提出的理论，是指通过有意识的设计实现无意识的行为。无意识并不是真的没有意识，而是人们知道自己需要某些东西，但还没有意识到到底需要什么。
以商场购物流程为例把握整体环节
用户体验顾名思义就是“用户使用产品时的心理感受”。用户体验可能来自产品给用户留下的第一印象，也可能来自用户长期以来感受到的正面或者负面影响。理想的用户体验是用户感到高兴、满足、骄傲甚至是爱上这款产品。
通过问卷调查等方式对用户进行调研，收集用户对产品的反馈，分析用户认为本产品中最有价值的功能点是什么？做了什么关键动作才认识到产品有这个功能点的？收集汇总产品的一些关键功能点之后进行分析，思考产品想要解决用户最大的痛点是什么？产品是如何解决这一痛点的？竞品是如何解决这一痛点的？我们与他们的解决方式有什么不同？如何让用户认识到产品的价值等。
通过上面用户超市购物逻辑的分析/发现/了解/反思，可以精确的了解到当前电商软件设计中的分类/购物车/购物卷/配送等功能的设计应用的必要性。
战略层中明确了用户需求和产品目标后，范围层就要确定做哪些功能、提供什么内容来实现产品目标。
上图可看同样的购物app首页功能却有着极大的不同，拼多多与京东还是以传统的电商页面为主，而得物（毒）却以一种展示形式呈现出来。为什么得物要以展示性功能进行首页的展示，而京东和拼多多要以商品为主去展示整体功能呢？
在我看来因为面对用户整体的不同，整体功能和展现内容也有不同的展现，如计划需求型的商品有固定的需求或者确定的购物计划才去进行需求型购买。而对于潮牌的用户群体是因为在购物现场见到某种产品或某些营业推广、广告宣传，提示或激起顾客尚未满足的消 费需求，从而引起消费欲望决定购买，其实这是购物现场刺激的结果，是的一种刺激冲动型消费。
好的产品设计是顺势而为，而不是重新定义用户体验，更全面地了解用户画像，可以帮助我们作出更有方向，更符合用户需求。
在设计主要的页面的时候需要问自己几个问题，功能导向是否符合产品目标？核心功能板块是否缺失？页面布局是否一致等问题。
通过观察以上的功能但是却又有很大的不同，在拼多多首页的设计以产品为主，而得物app却以用户分享页面为主；拼多多设计风格为一种较为“接地气”的页面，得物app却以一种“高端时尚”的页面。
为什么要以这两种风格去设计这两款软件呢，同样是国内大的电商平台，为什么一个风格高端时尚一个“低端混乱”？
模拟用户的行为，当一个产品可以模拟用户的行为，将用户代入真实的情境中，用户就会对产品产生深刻的认同感。在以用户画像进行分析，当一个60岁的叔叔，晚上5点准备为一家人去做晚饭之前，去给家人买菜。他是更喜欢去高端的专卖店去买还是去一个脏乱的菜市场去买菜呢？结果显而易见在会更加倾向于市场，因为市场给人最直观的印象就是价格便宜，能以最便宜的价格去买到自己想要的物品。
再进行一个用户画像进行分析，一个00后的潮男，他要为自己买一款好看的球鞋，他的购买路径是什么呢？首先他需要去了解什么样的什么品牌款式的鞋才是最时尚的，其次他会选着一个最专业的品牌专卖店或者大的电商平台去进行购买，因为这样能给他最大的品牌保障。
通过以上这两点才能更加诠释一个产品的设计方向和最佳的用户体验。
根据尼尔森F模型，我们可以得出几个心理暗示：
用户快速扫视时，具体的文字并不重要
多用小标题、短句引起阅读者注意
将重要的内容放在最上边
其实，拇指操作热图最早是由设计师Steven Hoober于2011年的书《Designing Mobile Interface》中使用，其中的绿色部分被他称为“单手握持时拇指触摸最舒适的区域”。这些区域的测量是通过1333份观测分析总结出来的，这些分析数据还表明，49%的用户习惯于单手握持手机，用拇指操控屏幕，而用另外一只手做其他的事情。同样是基于当年的这些报告，还获取了以下信息：
36%的用户会双手环抱手机，用其中一只手的拇指操控屏幕
15%的用户会用双手握持手机并用两手的拇指操控屏幕，其中90%的用户操作时习惯屏幕竖着，而10%的用户偏向于横屏操作。
结合触屏拇指热区和推导模型，将高频操作放在最容易点击位置，降低用户使用成本，提升用户体验。
合格的设计师能够绘制风格统一的图标，而优秀的设计师能够创造风格独特的图标。我们是否能够在最求大小一致、圆角一致、线宽一致、视觉一致和配色一致的同时，为它的视觉表现力加入更多的创意呢？
心理学认为，情感是人对客观事物是否满足自己的需求而产生的态度体验，当这种需求得到满足时，人们会产生愉悦、喜爱、幸福的情感。延伸到APP设计中，在产品加入情感化设计可以成为用户之间的感情的传递桥梁，增加用户对产品的好感度。情感化设计不是轰轰烈烈，有的时候仅仅是一个icon，一个图片一句话。情感化设计让产品变得有温度，让用户获得愉悦的使用体验，这些简单的细节设计充满了积极的情绪。它满足产品的功能性和易用性的同事追求更高层次的目标。
情感化设计在空白页设计中发挥着巨大的作用，他通过设计手段来减轻用户在看到一个毫无内容的页面时产生的挫败感。
Tabs是APP设计中最常见的控件之一，它帮助界面进行快速的信息分类导航。在视觉表现形式上，Tabs和标签栏同样也分为选中状态和未选中状态，一个好的Tabs既要有设计感又符合产品特性。在一个APP中有许多的界面，每一个界面又有许多的元素，那些同类的元素应保持统一的设计样式。通常个人中心的人形剪影，它代表着用户，因此可以在展示用户头像和用户形象的界面中延展使用。或者独特的产品外观、logo、ip形象，也可以作为视觉符号的一种，延续到其他的界面中。这样这个界面就被统一的设计元素联系起来了，给用户始终如一的一致感，增加了极强的品牌效应。并将这种情感投射到产品，从而提升用户对产品的认同感和忠诚度。
我们还可以从品牌基因中获取灵感，品牌作为用户熟知的形象是个绝佳的来源。从品牌形象中提取具有独特气质的视觉符号作为Tab选中状态，既让界面视觉独一无二，又进一步强化了用户对品牌形象的认知。
作为中国最大线上购物平台之一的天猫，其品牌最显著的特征就是那只大脑袋小身体的黑猫，而它的“猫头”也成为天猫每一次品牌推广的必要元素。其中最受瞩目的就是“猫头”
联合营销海报的设计，已成为天猫与大品牌一起联合营销的传统项目，通过设计创意淋淋尽职地表达出厂商的品牌精神和各自倡导的生活方式。
从品牌图形中提取具有鲜明特征的形状作为设计语言，也是一种设计风格的最好表现。
文章来源：站酷 文章作者：大峰_Design
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务你是否和我有同样的困惑，常常无法客观看待自己的设计，优化的时候又常常不知从哪里下手，看到别的产品设计又无法给出具体的判断依据。
今天学习一下用户体验的结构化衡量标准。不管是日常工作还是作品提升，都可以作为一个方向性的指导。
要想读懂一个信息，多少文字才能解释清楚（认知成本）？网页加载多长时间才算合理（时间成本）？要设置摄像机的时间和日期，设定多少个步骤才算合理（操作成本）？
首先我们来了解一下通用设计法则之——成本效益法则
成本效益法则的概念
百科含义：成本效益法则指的是要从“投入”与“产出”的对比分析来看待“投入（成本）”的必要性、合理性，即考察成本高低的标准是产出（效益）与投入（成本）之比，该比值越大，则说明成本效益越高，相对成本越低；考察成本应不应当发生的标准是产出（效益）是否大于为此发生的成本支出，如果大于，则该项成本是有效益的，应该发生。
从设计的角度来看，成本效益法则一般是用来评估伴随着新功能或新元素出现新增加成本的最后财务回收状况。
用户价值 = 新体验 - 旧体验 - 切换成本
从用户角度来看，成本效益法则也可以用来提高设计的品质。如果与设计互动的相关成本大于收益，就是不良设计；相反，如果效益大于成本，就是优秀设计。用户成本一般包括认知成本、操作成本、时间成本。
体验 = 效益 - 认知成本 - 时间成本 - 操作成本
例如：把走一段路到展览馆看展当作成本，把看展的趣味程度当作效益，如果趣味程度超过走路的成本，那么这个展览设计就是优秀设计。
优秀的展览设计效益大于成本
糟糕的展览设计成本大于效益
每个设计的品质都可以用成本效益法则来进行衡量。如果与某项设计互动之后，用户觉得获得的效益高于此次互动的相关成本，即是优秀的设计；相反，如果成本高于效益，即是糟糕的设计。
怎么做？
若想提高体验的价值，可以从两方面入手：1. 提高效益；2. 降低成本。
提高效益更多是产品层面的决策，所以站在设计师的角度，这篇重点从如何“降低成本”展开。降低成本主要有三方面：降低认知成本、降低时间成本、降低操作成本。
PART 1
降低认知成本
1. 减少冗余信息
a. 去掉累赘文案
为了避免客诉，设计常常会“被迫”在首页做冗长的文案提示，比如美团民宿的“今天入住、明天离店”的文字提示，彷佛在跟着文案做“今天入住+明天离店=1晚”的数学题，过于平铺直述反而增加了用户思考。而且过于具体的文案在小字显示的效果下阅读性也不够好，反而增加了用户阅读文案的认知负担。
同样是 1 晚，Airbnb的文案表达简洁明了，日期间的横杠足以理解是从哪天到哪天的含义。
如果说Airbnb是国外产品，调性不同，那么像马蜂窝的解决方案也是层次与阅读都更加清晰易懂的方式。
b. 去掉多余选项
招行银行的首页功能并不是我会经常要用的功能，但是却无法像支付宝那样自定义编辑首页的功能icon，去掉不需要的功能入口。
2. 内容好理解，减少思考，减少记忆
a. 文案与图片匹配度
文案与图片的契合度高更够帮助用户更有效的理解内容，App Store的推荐卡片在这方面表现的非常优秀。
b. 结构框架好理解——格式塔原理
接近原则中指明物体之间的相对距离会影响我们感知它们是否以及如何组织在一起。京喜首页功能模块区分的相对距离差别不够大，加上商品图的视觉干扰，更加影响信息层次的区分。而淘宝的模块信息分组则清晰明确，信息辨识度高，视觉干扰少，能够有效减少用户区分信息的思考。
c.记忆的局限，降低记忆负担
人们工作记忆的容量有限，大约是 4±1。由于短期记忆的局限，设计师应该确保用户可以简单地识别信息，但不能从之前的对话中回想信息。
比如我们经常会发现考试中的选择题比简答题更容易，这是因为选择题要求我们去识别答案，而不是在记忆里回想答案。
再例如搜索，当搜索结果出现时，我们的注意力自然地从输入的词汇转移到了结果上，因此好的设计应该在搜索结果页展示搜索词。把点击过的结果变色也是帮助用户记忆已点过的内容。
知乎的搜索结果不记忆已阅览的内容，而谷歌搜索则帮助用户记忆已阅览过的内容。
3. 优先级：信息层级
a.用户优先级、b.功能优先级、c.视觉优先级
d.交互优先级
常见的是弹窗按钮，需要区分信息优先级，不让用户产生选择困扰。
4. 文字、图标的识别性、易读性
美团Tab icon简洁明了，图形与含义符合，文案简洁清晰。而悦会则显得复杂难以识别，不仅文案复杂，易读性比较差，图标也没有准确表达其寓意。
5. 一致性
a. 内部的一致性、b. 交互逻辑的一致性、c. 元素的一致性、d. 语词的一致性、e. 信息架构的一致性
f. 视觉的一致性
Airbnb的版式从banner到下面的标题分类，对齐方式与字体对比都保持一致风格，图标和插图都是线与线面的风格。对比之下，携程的设计语言则相对不够完整，不仅icon风格不太一致（面和线都有），banner运营位的版式也是比较随意的（文案没有统一的排版规范）。
6. 提示、引导、反馈
好的引导反馈能够大大赋能业务目标，相对于躺平的关注引导，好好住的类似提示引导，则生硬了很多，特别是两句文案的切换动作比较刻意，加的笑脸表情也跟引导关系不大。而躺平的引导非常的萌，文案与形象风格都很nice，加上形象手指的动态效果，使引导非常的自然讨喜。
7. 符合用户习惯
比如，Windows 与 Mac 系统的软件关闭方式。使用windows电脑时，我们形成了右上角关闭的操作习惯。后来开始用Mac电脑，关闭入口都在左上角，在一段时间内，每次关闭都要找一下关闭按钮在哪里。由于Mac的关闭方式没有比windows产生显而易见的体验提升，改变操作习惯成本高，部分用户可能会认为Mac的关闭操作不好用。
当然，假如最开始用的是 Mac 电脑，后面再使用 Windows 电脑，也会感到 Windows 不好用，这是先入为主的观念，一旦产生习惯，改变习惯将产生一定的学习成本。
PART 2
降低时间成本
1. 扭转用户对时间的感知
今日头条通过懒加载的方式，将文字内容优先显示，并且将图片位用默认底色先显示出来，用户可以在图片加载出来之前先看文字内容，大大避免了等待的焦虑。我们应该避免像移动营业厅这样的空白加载页面。
2. 增加等待过程中的价值
王者荣耀游戏开始前的加载界面会有小技巧的提示，等待的时间可以学习一些小技巧。
PART 3
降低操作成本
1. 先价值吸引后行动（先浏览后登陆）
每日瑜伽可以先浏览内容，想要了解更多的时候才引导登录，降低了操作成本。而keep却必须要先登录才可以浏览里面的内容，增加了使用门槛。
2. 预测用户行为
滴滴出行根据用户经常使用的地点预测用户要去的地方，一键选择地址更便捷。
3. 主动替用户选择
美团外卖支付时主动帮用户选择极速支付选项，一方面让用户更便捷，另一方面也能增加银行卡账户的绑定，赋能业务。
4. 简化关键节点
淘宝确认订单自动选择优惠券，简化了关键流程，降低操作成本，提高下单转化。现在很多购物平台也都实现了这一点。
5. 减少手动输入操作
以闪送为例，自动读取复制信息——一键粘贴——智能识别——自动填充信息，减少了用户的手动输入操作，大大提高了体验的质量与效率。
降低成本的误区
是不是成本越低，这项设计就是越优秀的设计呢？在成本效益法则下，绝不是成本越低，效益就越高，设计决策需要把互动产生的效益考虑在内。
如果一个交互的复杂度能够提高交互产生的效益，那么就应该适当的增加交互的复杂度。
比如我们常用到的密保键盘，打乱的数字顺序能够防止偷窥者从手势位置窃取密码，因此这项交互成本的提高相应的能够大大了我们资产账户的安全效益。
所以，必要时是可以通过提高成本换取更高的收益。但同时如果技术允许，通过手机短信验证登录与面容识别这种成本更低安全系数更高的方式，还是更好的选择，要根据具体的场景具体对待。
总结
每个设计的品质都可以用成本效益法则来进行衡量。如果与某项设计互动之后，用户觉得获得的效益高于此次互动的相关成本，即是优秀的设计；相反，如果成本高于效益，即是糟糕的设计。
设计师运用成本效益法则提升用户体验的维度主要在降低用户的认知成本、时间成本、操作成本。
降低认知成本包括：减少冗余信息；内容好理解，减少思考，减少记忆；优先级：信息层级；文字、图标识别性，可读性，易读性；一致性；提示、引导、反馈；符合用户习惯。
降低时间成本包括：扭转用户对时间的感知；增加等待过程中的价值、趣味性、小贴士。
降低操作成本包括：先价值吸引后行动；预测用户行为；主动替用户选择；简化关键节点；减少手动输入操作。
同时我们也要注意降低成本的误区，并不是成本越低越好，如果提高成本可以换来更高的效益，也要具体情况具体对待。
文章来源：站酷 作者：水原七秒
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
交互设计之父的阿兰·库珀，最为人熟知的就是这句话：“除非有更好的选择，否则就遵从标准”。
a. 费茨定律，它是在1954 年 ，由保罗.菲茨心理学家 Paul Fitts 首先提出，当时用来预测从任意一点到目标中心位置所需时间的数学模型，在人机交互和设计领域的影响力最为广泛和深远。
b. 定义：从一个起始位置移动到一个最终目标所需的时间由两个参数来决定，到目标的距离和目标的大小
（上图中的 D与W），用数学公式表达为时间 T = a + b log2(D/W+1)。
c. 费茨定律，在产品设计中的价值是提高产品的可用性和易用性。例如：界面设计中，按钮等可点击对象要合理的设置大小尺寸才能容易操作，所以在移动应用中，图标按钮会增加点击热区范围，以便用户轻松点击按钮，做到
产品设计上的可用性和易用性。
费茨定律的思考分析，如下图所示 。
1. 可点击对象的设计，需要设计合理的大小和尺寸。功能设计的越大，用户越容易点击操作，交互效率越好。
2. 界面设计的屏幕边缘或角，适合放置像菜单栏或按钮这样的设计元素，如果边角是目标，它们可无限高或无限宽，更容易触达到操作目标。不管你移动了多远，点击操作最终都会停在屏幕的边缘，并定位在按钮的上面。
3. 界面设计中，出现在用户正在操作的对象旁边的删除列表（右滑删除）比下方弹出选择对象容易操作，右滑删除交互可以被用户打开得更快，更有效率，因为不需要移动到屏幕的其他位置，就可以删除多余的列表。
4. Apple的iOS人机交互设计指南中指出，按钮的点击热区大于44x44pt，这样操作按钮才会让用户觉得容易使用。
5. 费茨定律案例：用户在使用产品时，比较重要的操作，我们会放在移动端应用的屏幕边缘处，方便我们的
用户点击操作产品的功能图标。如下图所示。
2. Hick’s Law / 席克定律（希克法则）
我们看一下，席克定律的数学公式表达是 : RT= a+blog2 ( n )。RT 表示反应时间，a 表示跟做决定无关的总时间，b 表示根据对选项认知的处理时间实证衍生出的常数，n 表示同样可能的选项数。
在人机交互的界面设计中，选项越多，意味着用户做出决定的时间就越长。
分布操作，专注当前行为，就可以节约用户作出决定的时间。如下图所示。
其他符合席克定律的案例，如下图所示：
a. 对于用户，低频率功能或不太重要的功能，可以收纳起来。比如：个人中心的设置功能模块。如下图所示：
b. 分布操作，专注于当前的行为设计，如下图所示：
c. 在人机交互设计中，我们对核心功能选项做好设计上的归类，可以提升用户做选择的效率。
比如：我们帮助用户选择 5 种核心的功能需求，它首先划分了旅游场景下的功能分类，让用户对分类进行选择。
然后进入选择机票入口，这样我们极大的化解了用户面对很多旅游功能选项的难度和纠结，节约了用户做决定的
时间。
d. 做好分类选择，可以提高交互体验设计的效率，选择你想要的商品并购买。如下图所示。
3. 神奇数字 7 ± 2 法则
1. 因为美国认知心理学 George A Miller 的研究，人们短时记忆广度大约为7个单位（字母、数字、中文等），也就是说每次只能处理 5 到 9 件事情。
2. 人的大脑认知信息的能力有限，所以我们通过把信息分组和模块分类，以此来认识和思考一些复杂性的问题。
3. 神奇数字 7 ± 2 法则，应用范围很广。例如我们记忆的电话号码，可以分成三组数字：159 5555 6666 ，
这样分组记忆起来就会容易很多。
4. UI 界面的导航设计，为了给用户提供明确的设计向导，两种导航（底部导航栏和顶部导航栏）的栏目设计通常都控制在 5 个之内，栏目功能过多用户不容易记忆，5 个之内的导航设计方便用户记忆和快速操作。
5. 移动应用的交互设计规律。神奇数字 7 加减 2 法则同样适用，蚂蚁金服的品类区的核心功能模块的设计，悬浮卡片上只显示 8 个 功能图标，如下图所示。
6. 同一类功能和同一层级的元素出现时，数目一般控制在 5-9 个，如下图所示。
7. 如果超过 5 个，可以右滑选择你想要的产品功能，如下边的右图所示。
8. 神奇数字 7±2 法则，运营广告图设计要抓住重点去设计，更好的引导用户去浏览内容和产品的交互体验。
如下图所示，数字符号标注-突出重点，主图、主题、操作按钮、主色氛围等，我们会作出优秀的运营设计。
根据格式塔的心理学思考 ：当对象离得太近的时候，人的意识会认为界面元素之间是相关的。
在交互设计中，界面设计中的接近原则是对相似信息及功能类别进行内容分组和布局设计的优化设计。
接近法则在界面设计中的作用，能够直接影响到用户与产品界面之间的视觉互动，来引导用户的浏览及点击交互行为。因此，相似的内容和功能模块应该彼此靠近，而关联性较弱的内容应该保持大一点的间距。
接近法则运用的目的：在视觉上通过组与组的区分，来划分功能模块之间的关联性，让界面变得更加清晰，同时帮助用户在浏览页面时，能够清楚的看到到各个内容模块之间的关联性，就是视觉信息的划分和分组展示。
如下图所示。同一类的功能可分为一组，组内使用浅灰色的分割线来表达。而关联性弱的功能模块，组内的可以用浅灰色的分割面表达，拉开组与组之间的距离，做好视觉信息的划分效果。
a. “复制粘贴之父” Larry Tesler (1945-2020) 说过，“任何事物都具有其固有的复杂性，无法简化”。
引入第三方登录，减少注册账号的复杂步骤，节约用户登录或注册这一流程上所耗费的步骤和时间。
复杂性守恒定律，认为每一个产品设计的过程中，都有其固有的复杂性，存在着一个临界点，超过了这个点产品设计的过程就不能再简化了，你只能将固有的复杂性从一个地方转移到另外一个地方。
b. 以用户为中心的产品设计，交互设计应尽量简化用户层面上的交互设计的过程。比如：顶部导航栏的更多图标，就是将常用的功能整合并隐藏在首页设计的更多功能模块中。如下图所示。
a. 防错原则，认为大部分的意外都是由产品设计上的疏忽，而不是人为的操作疏忽。所以我们可以通过改变产品
体验设计把过失率降到。
我们在设计过程中，要从用户维度出发，做设计前思考用户的使用场景，预测到他们有可能发生的误操作状态，
做到操作前给用户的温馨提示、操作中的实时告知、操作后给用户的及时反馈。
b. 防错原则是著名的品质管理专家新乡重夫提出来的。原则最初是用于工业管理，在交互设计中也可以使用。
比如图 1，今日幸运星主题，分享给好友帮忙砍价。在没有满足条件时，通过弹窗来提示用户去邀请好友，以此
来完成产品设计的任务。
比如图 2，请输入验证码的弹窗，验证码错误，您还可以重复 3 次，只有信息都输入正确时，用户才能完成的这个界面任务，如下图所示。
简单有效原理，被称为“如无必要，勿增实体”（Entities should not be multiplied unnecessarily），即如有两个
功能相等的设计，那么选择最简单的、视觉干扰比较少的设计。在其他条件相同的情况下，要求得越少的那个就
越好，越有价值。
a. 合并多余流程，点击极速支付，支付成功弹窗提示。
b. 高频率使用的产品界面，保持清爽的设计感。
c. 优先展示核心功能，减少点击次数。如下图所示。
图 1，界面中清晰的品牌色的底部操作按钮，可以明确的引导用户去选择优质的理财产品。
图 2 ，摩拜单车首页，用户最关注的功能是扫码开锁的核心功能，方便用户直接操作，提高交互效率。
d. 苹果官方网站的简约设计做的很棒。苹果公司用一种很和品质感的设计提供了足够多的内容，网站的文案，交互和图片都比较集中展示，网页设计没有放一些使用户分心的广告和不重要的内容。如下图所示。
总结：
1. 在产品设计领域，有很多经过时间检验过的定律，可以作为产品设计的指导原理。作为交互设计之父的
阿兰·库珀，他最为人熟知的就是这句话 ：“ 除非有更好的选择，否则就遵从标准 ”。
2. 交互设计的定律，能够帮助产品设计师对界面上的各种视觉元素进行合理思考，从而发现一些用户使用场景中的可用性问题。从产品设计的维度思考看，我们来改善产品设计的操作效率和用户的满意度。设计服务于产品、设计服务于商业。
a. 什么是用户体验地图 ？
定义：用户体验地图，是一种梳理产品体验问题的设计工具。展示的就是用户在使用一款产品和设计服务的过程中，每一个阶段的体验、用户对产品直观的心理感受。将用户的所做、所思都展现出来，便于团队设计师全面思考产品带给用户的体验，挖掘设计的优化点。例如，你去三亚去度假旅游，用户体验地图就是用图形的形式，可视化的表达，将你在三亚的一天活动情况记录下来，其中包含你这段时间去过的旅游景点，以及在每个旅游景点的用户
体验感受。
思考用户体验地图，适合在产品设计的那几个阶段绘制？
1. 原型制作前，设计师从直观感觉的角度看，我们要了解自己的产品为用户提供了什么功能、交互体验，同时协助我们的产品设计团队，做好产品功能的体验设计。
2. 产品上线时，我们可以结合用户调研、可用性测试等方法论。以此获取用户的美好体验和真实的心理感受，来帮助我们公司的产品设计发现问题，以此作为产品设计的迭代优化的方向或者寻找新的创意设计机会点来解决问题。
a. 我们做好用户体验地图的两个优点：
1. 产品设计的体验目标是让用户用起来，感觉到产品具有可用性、好用性、易用性，那么产品设计也应该从用户
视角出发，用户从产品那个触点点击进来，怎样点击交互下一步，怎样保持对产品的活跃度，如何传播分享；定位用户使用产品过程中的体验痛点。
2. 真正思考用户需要什么功能，让更多用户参与进来，换位思考我们产品带给用户具体什么感受，全局性的思维去思考产品的体验，与团队成员、产品交互设计、开发部门和项目负责人等达成一致性的共识、有效沟通和协作，一起制作出解决方案。
b. 思考用户体验地图的价值点
1. 基于用户使用场景的设计是基于用户达到某个体验设计目标的一系列场景的分析与产品思考，理解用户在每一个使用场景下的痛点及需求分析，同时结合用户的上一场景，思考用户下一步的体验目标，我们可以通过做好体验设计，来引起用户情感上的共鸣。
2. 使用用户体验地图，团队成员可以从用户的痛点出发，让产品设计师、团队成员全面的思考产品体验，从用户
体验地图中来挖掘产品设计的机会点。
以途牛用户体验地图为例，如下图所示。
我们运用用户体验地图时，作为设计师或参与者需要切换成用户视角、第一次使用者的角度去思考，去发现产品体验上的问题，同时解决产品体验中遇到的问题，提升用户体验的满意度。
制作用户体验地图时，四个关键点的思考：
1. 明确我们的核心用户人群等; 2. 研究用户的使用场景。3. 做好用户的访谈和调研。4. 制作好用户体验地图。
制作用户体验地图的具体步骤如下：
1. 前期准备工作：
我们可以先做用户的深度访谈、用户对产品反馈、产品设计的走查和交互的走查、产品的数据分析、同行业的竞品分析、访谈用户等方法，获取大量真实可靠的资料。
我们就会认识到：思考用户在使用产品设计的过程中产生的行为数据、用户体验和用户内心的真实感受。我们也可以思考产品的设计思路、产品的核心用户人群等，以此作为我们制作用户体验地图过程中的重要参考和依据，知道用户到底需要什么功能和流程，来帮助用户解决问题。
2. 用户调研的方法如下：
我们可以先采访用户或者做好调研和记录，将我们的采访或调研记录的内容做好整理归档，团队成员一起来拆解和记录用户的行为、用户的直观感受和用户心中真实的想法。
3. 我们要梳理好关键产品设计任务的流程，就是用户在使用产品功能的过程中，会面临很多不同的场景或复杂的设计流程和体验设计的目标。然后我们再撰写用户完成每个关键任务的时间：比如，对于我们日常所见的查找功能而言，用户希望更快的查找到自己想要的产品功能和体验目标。
我们再写出关键产品任务的用户操作产品时的行为：
指的是用户当下在做什么，通常是用 “我+动词” 来表示，例如：我购买基金产品。
4. 我们再确定好关键节点，写出用户调研过程中的痛点思考、用户的满意度思考，放在对应的行为点的下方。
我们思考和分析用户的痛点、用户满意度的调查，判断用户的情绪变化。分析结束后，需要将以上三类信息都写下来，方便后续整理分组。把行为按照达成用户目标的逻辑顺序整理出来，并做好归类。例如：美团 App 的例子中分为 4 个阶段，如下图所示。
5. 我们来判断：用户在每个阶段，体验产品设计任务中所产生的情绪高低的不同值，并把它们连成一条线，这样就形成用户的情绪曲线。
6. 也就是说，制作用户体验地图过程中，我们要思考用户每个行为背后的痛点和产品设计上的机会点。
最后，制作好一张实用性很强的用户体验地图，以此来挖掘用户的痛点问题，我们可以更好的去挖掘产品体验设计中的设计机会点，如下图所示。
网上的案例欣赏，出境购物的用户体验地图，如下图所示。
总结：
1. 我们制作用户体验地图，注重的是团队成员的洞察分析能力和对产品的思考能力，我们要用心思考产品设计中的核心用户的痛点和产品设计中的机会点，我们要输出一套符合用户价值、商业价值和和产品功能价值的体验设计方案，以此解决用户的体验问题，把产品做的更好，让用户使用产品过程中，产生愉悦感。
2. 制作用户体验地图的价值是，不仅能使我们以“用户视角”的维度去思考，引导团队和设计师去思考问题并做好
产品的体验设计。同时我们也可运用“全局性的设计思维” 去思考产品体验设计，去发现产品问题并解决产品设计中遇到的体验问题，让我们产品带给用户的是：产品设计的可用性、好用性和易用性的价值。
文章来源：tob.design 作者：峻溪POINTV
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
2021年的第一篇万字长文，文章主题是一次偶然的反思中总结出的设计师思维进阶的过程，详细讲述了我在两年间从一名应届非科班设计师成长为一名高级体验设计师的思维进阶过程。与一篇UI教程、一篇交互分析的文章不同，这篇文章希望能够从底层的思维层面帮助你明确自己的状态，并提供一个快速进阶的思路，所谓授人以鱼不如授人与鱼正是这个道理。
一：前言：灵感与反思
灵感始末
最初，在一个偶然的机会读到一本规范相关的书籍，然后我开始反思自己是否有积累成系统的设计规范、设计技能树，为了验证这一点，我便以设计一个弹窗为例子开始模拟演绎，演绎完毕后进一步思考，我是如何积累这些方法论或思维模型的？正因此发现了我作为非科班设计师，从最初开始自学设计到如今晋升到高级体验设计师的思考方式的转变。进一步从现象中探究原因，于是输出了本文。
如何设计一个弹窗？
在做任何需求的时候，甚至是一个极小的需求，你有没有持续思考过？有没有进一步思考过？又有没有刻意、主动完善设计思路，积累思考模型？如果没有，你可以从接下来这个思考案例中反思一些东西。
设计弹窗时，我画的第一个元素——弹窗的矩形背景时，是如何思考的，考虑了哪些元素。进一步设计我还要考虑哪些因素？下面是我的瞬时思考能整理的有效信息。
方法1：根据弹窗内容进行界定（根据内容极限情况，及你的设计系统定义的间距来控制整个弹窗的尺寸）
方法2：根据固定比例，主要适用于移动端，例如3比4的矩形比例较美观，计算弹窗面积与屏幕整体面积的比例、计算留白与弹窗的比例、参考黄金比例Golden Ratio、白银比例Silver Ratio等。
方法3：根据你的系统定义的栅格进行界定，如小弹窗使用1/4,1/3,1/2，大弹窗使用1/2,2/3,3/4栅格。
方法4：栅格+比例，方法3界定宽度，方法2界定高度 。
设计延展性：考虑弹窗内的内容发生变化时的自适应情况，内容过多的极限情况/内容过少的极限情况。 自适应的规则，弹窗窗口尺寸的延展方式（横向拓展/纵向拓展）
交互：弹窗又叫模态视图，其通过遮罩突出弹窗视区，在蒙层遮罩上方的最高层，根据通用规则，大部分情况我们不应当在弹窗上再次叠加界面层。若弹窗场景下有新的纵深层，如下一级操作或内容界面，此时如何处理？
如下方，PC端google drive，就在结构上使用类平级跳跃的形式来“借面板”解决新的操作需求。
而再下方的IOS使用的bottom sheet则采用了完全不同的解决方案，表面上似乎是违背了弹窗模态上重复叠加的规则，但在移动端一屏仅仅解决一个问题、完成一个任务的语境下，反而更加合理。（而这些成熟的模式、范式，或者说设计单元，正是在主动思考和被动思考阶段设计师需要积累的设计经验，它们将作为设计师知识库中的组成部分，指导设计并进一步提效和促使设计合规）
常规易用性：如退出机制——关闭的解决方案，通过关闭按钮退出，那关闭按钮尺寸在当前弹窗尺寸下定义为多少合适，视觉尺寸与hover实际可点击尺寸分别是多少？PC端是否只能使用关闭按钮退出？点击空白区域退出是否更，如下方的dribble，点击上方黑色空白区域即可退出，而无相关经验的用户也可以在右上角看到关闭icon的暗示线索。
场景与业务背景：详细了解当前需求的业务背景与场景，进一步概览整体业务背景，即兼顾其他可能性的业务场景。如我设计的B端系统包括办公室类工作场景，同时也包括站立、远距离观看屏幕的工作场景，这将涉及到信息能否直观清晰的被传达、获取。当前需求的业务是主流场景？可向上向下兼顾大部分同系统的其他业务场景？还是无法兼顾而需要同时列出更多场景来制定通用规则？以我所设计的B端系统为例，较高频的出现在弹窗下存在下一级操作或展示页面的场景，因此我考虑在工作空闲时输出一份弹窗场景下有纵深的下一级信息或操作的解决方案，并将其作为产品相同场景的应用解决方案。
视觉合规性：保证主要信息的对比度，清晰度，保证所有信息传递和展示时的节奏和梯度优先级。从字号到字重再到段落行高间距等，从弹窗中ICON的样式选择，到Icon语义清晰度等。
...
如果进一步思考，其实可以思考more and more。你会发现，从基础的结构涉及的栅格，到基础的视觉合规性涉及到的字体设计、icon设计。再到交互涉及到的典型设计单元，通用交互模型范式等，在设计一项内容前，我们有很多的思考空间，或者称之为思考机会点更为合适。将充足的思考纳入设计过程后，初期设计时间线被拉长，但长远来看避免了思虑不足引发的风险与反复更改的成本，合理的设计预测与分析则向上向下兼容未来场景，提高设计输出物的通用性与成效，即所谓的磨刀不误砍柴工。
那么这样成熟（我自己其实是伪成熟，还不够完善和系统）的思考过程，分析过程是如何学习或者说培养的？
二：设计思考的三个阶段
这其实是我接下来要讲的正题，我将设计中的思考分为三个阶段，无思考——主动思考——被动思考，这是一个初期线性发展，后期循环迭代的过程。其实我定义这一套思考阶段的分级是在短暂的灵感爆发后立即输出的，来源于我对自己2年间从一个非科班新手到如今高级体验设计师思考逻辑的发展变化的回顾。我发现其确实有迹可循，在地铁上很兴奋很兴奋的头脑沸腾过程中快速记录下大纲，到了工位立即记录并输出。
无思考阶段
大意为，新手设计师，或没有刻意练习、思考、总结的习惯的设计师，最初由于没有通用的设计经验、没有相关成熟设计模型或组件与设计单元的使用和设计经验，因此设计一个新内容实际为从0开始，此时设计师可能会单凭直觉 随意设计，例如设计弹窗就随便画一个矩形，然后随机调整。或者使用成熟的组件系统，直接套用，纯粹执行。这就是处于 0思考阶段，凭直觉设计（注意和直觉性设计区分开，直觉性设计是从用户的维度定义的，即用户可以单凭直觉理解设计，这也是我们常说的可供性"affordance"原理）
主动思考阶段
而主动思考阶段的起点是，随着设计师接触的工作范围、工作内容、合作对象的扩大或增加，及接触同类工种（其他设计师、设计leader）的输出思考过程、输出物、行为模式、思维模型等等设计价值观与执行模式等信息后。
前者会使新手设计师（或没有有意识的反思、总结沉淀的初中级设计师，或刚刚转换行业的各等级设计师）逐渐暴露并意识到自己的问题，大概率可能涉及到输出物质量、规范性、平台或行业壁垒造成的经验缺失等。
后者则是一个对比与发现的过程，即接触到更优质的输出物，更合规的输出过程，更的设计流程、协作流程等等。可能是被动接受的，如leader或同事的分享，及日常工作中为提高团队整体效率而被灌输的新的工作方法和进入新公司要强制适应的新的工作流，也可能是主动接受，如发现同事设计到输出的质量和效率等远优于自身而自发去了解，学习。
因此，在主动思考阶段，会有一个从发现问题到解决问题的过程，是不是和设计本身的职能很像，而在这个过程中，设计师自身就是被设计的对象，即如何解决自己身上存在的问题？如何使自己变得更完善更优秀？
你可以回顾下，在你初入行业时，最热情的接纳各种信息、知识、经验的阶段，你当时的状态是什么样的？概括来讲就是遇到感兴趣的内容-发现自己在此间的不足-了解学习并掌握。从基础的某个视觉效果的实现方式，到某个设计方法论、某个解决典型问题的交互设计等。
主动思考阶段与兴趣（对某个领域的衷情）、个人行为习惯（自学习惯，求知与自发研究的习惯）、周边环境等因素有关。因此核心是与本人、其他个人（同事，设计圈关系人）、团队相关。某些人天生对未知事物、信息及技能有浓厚的兴趣，所以会自发的广泛接收各种新的信息，并在这个过程中养成思考总结的习惯（比如在下），同理，个人在大学期间，甚至成长过程中有养成良好的自学习惯，有订立目标并逐步实现的习惯，他们会长期甚至一直处于主动思考阶段。另一种情况则是周边环境，社交关系人对你所产生的主动及被动的影响，如leader布置课题及学习计划，同事，好友，行业人员的协作共创活动，分享会等。
所以，主动思考阶段应该是优秀设计师需要长期自发维持的一个设计状态，持续的发现身边的问题，发现自身的不足，发现新内容新趋势新动态。并在发现新的内容并与自身能力模型对比的过程中，发现不足并持续思考和输入信息，反思，输入，巩固，沉淀。是一个升级打怪的过程更是一个知识资本的原始积累阶段，与无思考阶段相比，由于它是一个主动，刻意学习的过程，因此积累知识的效率要远远高于懵懂状态的初级设计师。（这应该也能解释为什么一些没有进入主动思考阶段的设计师，工作四五年却被一些一两年的新人设计师赶超）。
从新人设计师“无思考”阶段到主动思考阶段关系到一个设计师能否完成初级到中级的进阶。主要差别则是输出物的不确定性（初级）与输出质量趋于稳定并持续迭代提升（中级）。
这个思考阶段线性过程的第一个门槛，虽然是初中级设计师面临的门槛，却是能持续影响设计师整个设计生涯的关键转型点，奇异点。就像先赚它一个亿中所谓的一个亿启动资金。跨过这个门槛，设计师会迎来第一个爆发期，中级设计师我的理解是下限清晰，上限无穷。即在主动思考阶段，设计师可以将个人设计能力，从技巧到方法推动到一个较高上限的地步，概括定义———拥有在从事行业领域内输出高质量设计方案的能力。
如何跨过新手期，从无思考到主动思考？
刻意练习与学习
最优解是从兴趣到发现，即培养兴趣，调动兴趣去开展某个内容或者技能的研究学习，并逐步掌握为自身技能树的一部分。次解则是从目标到强制规划自我再到研究学习和逐步掌握。以兴趣为老师是最易收获的方法，但确定目标并刻意学习才是大多数人要走的路。完美解则是兴趣驱动同时严格规划。在我作为非科班设计师开始自学到工作的早期，每天固定不变的是大量浏览作品，大量阅读文章，大量练习技巧，后面逐渐选择性浏览，选择性阅读，选择性练习。这期间发生了什么？是综合当前工作场景和设计趋势等各方条件后的缜密思考所做的决策，也就是一个反思的过程，从发散到收束，以提高在当前工作场景下的个人能力，集中精力在核心能力的提升上。
也是这种能力使我快速B端转型C端，使我在上手新软件Figma后由一个新手使用者快速蜕变为讲师、分享输出者。刻意练习和学习的能力与倾向，应当在主动思考阶段养成为习惯。
What——How——Why
从浅层思考到深层思考，最简单的就是所谓的黄金圈法则。What仅仅让你了解到所见是什么,能提高你的审美，积累设计相关的表层信息。而当你思考How时，你将掌握如何实现该效果的能力。再进一步，当你开始思考Why时，你终于探寻到设计的本质，该设计是在遇到了一个什么设计课题、问题的基础上提出的，解决了什么问题，如何解决的，有没有更优解？目前的解法能否纳入自己的知识库？
T型构建能力模型
T型中纵深为你所对应的领域、行业、业务强关联的能力。 以UIUX为例，其中又以基础UI界面输出能力为例。
视觉：布局结构、栅格、字体、配色、间距、ICON及插画绘制、对应平台尺寸规范...
交互：信息架构、业务梳理、导航设计、流程设计、原型设计、交互演绎
业务：当前从事行业、细分领域、细分到业务的理解程度，细分需求的业务背景的理解程度
横向为拓展能力，通用能力如经常讲的共情能力，沟通能力，协作能力，逻辑思维能力，复盘输出能力等等。除此之外还有特殊能力，比如UI UX以插画 ，3D作为特殊能力项。
关注环境
在最初定义主动思考阶段时，我就讲过个人觉醒主动思考的过程中，他人和环境的影响因素十分关键，因为这是一个发现不足然后去解决问题的过程。整体环境如整个大的设计团队，及细分的每个设计组，从小环境到大环境都有相当多的团队沉淀和个人沉淀可以供你吸收成长。如我们设计团队定期举办的月度会议包含超高质量的分享，公共Drive保存有设计团队成立来的所有设计输出积淀。再如你的设计小组的定期分享，以及你身边拥有个人特长能力的同事们，关注优秀的内容，优秀的解决问题的思路，身边就是老师，万物都是书。例如我从C端转型B端后，在一两个月内快速融入团队，期间从不同的同事身上学到了时间管理（正经的）、项目管理、规范体系的制定等特长能力，而我给团队成员的反馈是智能组件系统的制定方法同时搭建了一套常用智能组件，大大提升了复用界面的设计效率，至少百分五十以上。没有对应的环境和社会关系人，靠自己闷头苦学很难有这样的效果 。
善用工具
这里专指记录，输出类工具，例如印象笔记。从旧的设计过程中获得收获与经验的核心在于复盘。忌讳对所知和所得模棱两可，因此需要在记录，总结的复盘过程中真正巩固从设计思考和实践中获得的反馈，并进一步加深为自身的持续性积淀。没有复盘过的设计师可能不会意识到，你的每一个需求设计经过一次复盘后都有可能发现新的问题，思虑不足的点或者仍然未解决的痛点等，当然也很可能发现能持续复用的思路、设计模块等优质资源。
除了笔记类工具，公开分享甚至私人交流都可以作为复盘工具，在这个过程中你会回顾自己的设计流程和思考过程，并在言辞交锋间发掘新的机会点。因此当你完成一次自我感觉良好的需求设计乃至小的版本迭代后，尝试着与身边的工具人同事沟通，尝试在设计小组内分享，在筹备分享与交流思路时，对于该需求的设计思路便跃然而纸上了。
被动思考阶段
被动思考阶段有两个核心特征，这里的被动不是指倾向性，而是指无意识且自动处理信息的状态。可以理解为游戏中的被动技能。
第一个特征，即达到在主动思考的基础上，持续积累和迭代知识库的信息，然后将设计规范，典型范式，通用经验思考模型等内化后的阶段。
何谓内化，抓起超烫的茶杯会自动放开手，反应速度不会超过零点几秒，这就是人自我保护机制的内化，即整个过程已经不需要刻意去思考和酝酿，而是在无意识的过程中自发的做出反应，完成系统的思考并形成一个规范的方案建议。
与主动思考阶段相比，主要差别在于对已有能力的使用熟练度，调用效率，及思考的全局性。
说的通俗些，遇到一个设计问题时，处于主动思考阶段的设计师会在遇到设计问题后，从过往经验，相似解决问题的思路中筛选，寻找一个合适的解，这些解是零散的，且需要设计师主动去回忆甚至浏览历史文件来搜集。而对于被动思考阶段的设计师来讲，若是面对一个较为熟悉的设计问题，如一个弹窗设计，此时该设计的解答方案会自然而然的出现在脑海，并且存在多个方案进行对比，并且每个方案都完整全面，从业务的考量到体验的权衡，再到业务与体验的相互平衡。方案如何推进，按照经验会遇到哪些阻力，需要说服哪些利益相关者，案例如何演示，有否有设计还原类风险？如何解决等等。
因此，处于被动思考阶段的设计师能够自然并的调用个人积累的成体系的技能和经验以及执行和推进设计的流程，从输出设计到推动方案落地一气呵成，宛若天成。在没有一定思考和实践经验积累的情况下，主动思考阶段的设计师则可能需要花费成倍的时间在方案探索输出再到落地的过程上，期间遇到的典型性问题则会一点点被消化并推动设计师向被动型晋升。
第二个特征则是视野与维度，视野也就是常挂在我们口中的全链路视野，维度则指的是看待问题或方案的更高维度。这一特征使用实际案例来说明或许更易于理解，
案例1微信红包早期推广的案例
微信红包作为微信的一个核心功能，初期花费大量成本推广并成为一个现象级“产品”，作为产品设计师，底层的视觉设计师与交互设计师在产品视觉交互逻辑等方面投入较大精力，他们只需要将自己负责的需求完成，输出达标的基础方案，可能会聚焦于如何设计红包样式更易于理解，如何设计红包样式能赋予其可供性，帮助用户快速理解产品与现实中的红包的映射关系，在进一步可能要考虑不同年龄阶层对红包样式的接受度，而交互设计师可能要考虑如何缩短用户路径，使红包开启的愉悦感能够最的被用户触达。
而此时产品负责人是如何考虑该红包功能设计的？答案是通过微信病毒式传播，的绑定银行卡，为微信支付业务铺路。绑卡才是当时该产品设计的核心。这就是维度的差异，同一个产品，不同的岗位不同的身份，不同阶段的设计师看到的会是不同的维度视角，更高的维度往往意味着更长远的考虑，意味着碾压式的决策。“为支付业务奠基”与“纠结红包是否要带花纹”相比，维度视野的差距，高下立判。
案例2与设计团队负责人评审 Logo方案
上图是该提案的部分PPT，在一次品牌LOGO提案的评审过程中，我花费较多的精力去宣讲Logo的品牌理念和故事，分析图形的演化过程，同时输出多个方案用于对比。设计负责人一针见血的指出几个核心问题。
第一点，在设计过程中不要过早的给图形设计融入颜色，颜色是第二层信息会干扰设计过程，当然也会干扰需求方的理解过程。一次只阐述一件事情，设计图形，讲解图形就使用灰度模式。
第二点，给群体及普通需求方宣讲可以使用较多包装或附上比较详细的设计思路，而需要给企业级Boss过稿时则切记简化一切过程，开门见山，直接铺陈LOGO图形，对不同利益相关者采用不同的策略。
第三点，该品牌LOGO的单独设计输出物看起来不错，但需要置于我们跨国的多个产品品牌构成的总的品牌体系中，判断其品牌一致性等问题，一致的产品品牌效果不仅能阐释品牌归属，同时也能很大程度上降低推广成本。作为设计师，既要细化到每一像素，又要高屋建瓴从全局层面考虑问题。
当你收到的反馈或建议都是你从来没有考虑到的问题和想法时，这有可能就是维度的差异。
资源3：周陟 《设计师如何解决全过程问题》
周陟分享的《设计师如何解决全过程问题》是一个全局性与高纬度思考的典型案例。该分享详细的阐述了设计师如何从产品的底层框架，结合业务的思考，市场趋势、历史数据对比分析，定义核心设计问题并探索设计方案的过程。
其中即有低维度的设计师底层能力方面的阐述，如从产品用户体验五个层面的设计思考（战略层、范围层、结构层、框架层、视觉层）到具体的可读性、视觉舒适度等具体的设计问题。更有高纬度的市场销售趋势、不同手机厂商间的用户流失流转情况、市占率、信任度等业务层思考。从上帝视角，全览产品各个阶段的场景及问题，并在对比分析中聚焦核心问题，探索方案去持续解决。
我们可以用一个超级朴实的方式来阐述主动思考阶段和被动思考阶段的差异。当一个设计师处于主动思考阶段，你可以把他置于他所熟悉的设计领域，他将会输出高质量的设计物，能够较好的解决当前遇到的设计问题，体验问题。
而一个被动思考阶段的设计师，你可以把他置于有一定相关性的各个设计领域（比如互联网方向的设计不能被置于广告方向），他会在较短的时间内理解不同领域的特征和需求，并输出高质量的解决方案，且能够兼顾各个利益相关者，主动推动产品实现进度，并提前规避各类问题。这其中的差别在于，是否有自己沉淀的一套解决问题的方法和过程，是否将通用设计经验系统化，是否有足够广阔的视野及更高的维度。这也映射了你是一名所谓的UI设计师，还是一名高级体验设计师，前者限制在一个领域内，后者已然破圈。
如何从主动思考阶段跨越到被动思考阶段
在体验设计的领域，主动思考阶段的设计师与被动思考阶段的设计师，在单纯的设计能力上，其实没有太大的差距，即输出物本身没有太大差距。都能够快速输出达标的设计方案，解决大部分体验类问题。那么关键差距提现在哪里？
其一是从设计到落地的总的效率。主动思考阶段的设计师在整个设计过程中需要频繁的遇到问题，并陷入陷阱，然后持续的纠正方案，一步步推进，踩着荆棘摸到最终方案所在的那块石头。而被动思考阶段的设计师只需要在知识库中的成熟方案中选择一条更加应景的路，多个方案已经摆在那里，而设计师只需要去考虑低维到高维的一系列影响因素，从基础体验，用户习惯，再到业务和战略上的布局，最终选择全局视野下最正确的方案。
第二点差距在于可能性，被动思考阶段的设计师有精力和能力去思考如何把方案做到超标准，超出需求本身的要求，超出利益相关者的期待（如需求方和开发人员）。我们经常会讲行业标准这个词，作为一个设计方案的基础判断标准，但行业标准永远不是上限。微信的撤回功能，从仅撤回到撤回后可编辑就是一次体验上的超标方案。
第三点则是打通上下游的能力，即涉及到上游的需求理解与转化，详细的设计项目还会涉及到用研类信息的接受与转化，下游则涉及到开发还原的质量与效率问题。在有意识的关注设计全流程和生命周期的情况下，被动思考阶段的设计师可以更轻松的管理设计并反馈到整个项目的开发周期上。
想要从主动思考阶段跨越到被动思考阶段，我总结以下三个建议。
从输入到梳理
首先是核心的底层设计能力方面，表面上是基础能力与通用能力的的刻意学习锻炼，而关键在于对知识体系的梳理。在我们初入职场逐渐积累设计经验的过程中，一些典型的设计过程，流程，针对某个领域甚至模块的典型解决方案，将其拆解汇总然后梳理分类，不论使用印象笔记等笔记产品，还是思维导图等脑图类产品，都能够帮你实现这个目的。
忍受立即获得解决方案的诱惑
其次，在真正开始做项目时，主动思考，刻意将个人知识库梳理的信息与项目需求进行对照，主动回忆和验证积累的方案，尽可能多的罗列场景，罗列可能性，不要被第一时间想到的方案所诱惑而止于此。设计师在遇到一个设计问题后，会第一时间想到的方案往往是最普通，未经思考的初步方案，但往往该方案可以一定程度上解决当前的问题。此时设计师需要强制自己从最简单的方案中脱离，进一步思考，并大量的举例、演绎，探索更多机会点，调动脑海中更多可能性的方案。每当想要就此停下时，反问自己，我能否做的更好，是否有更好的方案可以解决这个问题。
视野和维度来源于广泛阅读、案例、及复盘
被动思考阶段的设计师横跨了高级体验设计师到设计专家这个范围。抵达这个阶段的设计师视野将拓展至整个企业机构，而不局限于设计团队的个人的视野。除了强大的解决设计问题的能力，相较于普通设计师，他们往往有更高的思考维度，全局性的设计视野，此类中后设计生命周期中的经验往往需要通过阅读、项目实践等多个方面持续输入，然后复盘并沉淀为自己的经验。
因此这要求设计师广泛的阅读各类设计项目总结，参考实际案例，并在真实的项目中持续计划、尝试、验证，然后复盘。需要脱离设计师基础能力层面的视野，更多的关注解决问题的思路与流程，最终掌握的设计思路或能力可以称之为通用性设计解决能力。
当然，上面所讲的都是我从个人思考方式的转变中总结出来的经验，其目的是分享设计师应该如何思考？不同阶段应该聚焦于哪些问题领域才能最大化提升思考方式的进阶速度等问题，而不是在讲设计师如何从初级进阶到高级，进阶到体验专家（非设计师位阶的进阶）。因为不同企业对不同位阶、不同专供方向的设计师有不同的具体要求，比如设计leader可能更倾向于业务的理解与把控度，设计推进，研发流程中不同团队成员间的沟通合作等能力 。
如果有关于此的疑问，我只能以我的理解解答，不论是什么位置的设计师，判断其位置层次的标准必然是由上层的企业来制定的，而企业制定规则的出发点源于利益本身，换言之，你能获得的位置和你能够为团队和企业贡献的利益正相关，所以我们很容易理解，设计师的职业后期或者用于解决超级复杂的设计问题， 以对应的价值映衬其收入，偏具体设计能力层面，或者用于承担全局性企业需求，如带领设计团队支撑某个业务线，偏业务理解和统筹方面。
从线性流程到循环往复的迭代过程
我们回顾一个努力的设计打工仔的职业生涯，首先，一个新手设计师从纯粹执行的无思考阶段，进阶到主动思考阶段，当他的基础设计能力不断进阶后，开始拓展视野，思考业务，并在大量的项目锻炼中形成自己的一套成熟的设计方法论，从设计思考流程到具体的设计流程，从而进阶到被动思考阶段。但这是一个理想化的描述，真实情况是，设计师会在这三个阶段中循环往复，而甚至有些设计师可能会在前两个阶段循环往复。
人都有惰性，你我都如此。在主动设计思考阶段，因为一次小长假，因为种种原因，我们可能会退步回无思考的阶段。持续性学习是一件 令人兴奋的事，也是一件需要莫大毅力的事情。技巧经验会随着时间消磨，这是设计师需要警惕的问题，因为这个行业就是如此，我们只能变化，只能持续不断的学习。
而当将经验与成体系的思考范式内化后，设计师会养成核心的通用设计解决问题的能力。此时，设计师期去接触一个新的领域，不再需要从0开始，而是可以使用自己积累的通用设计能力，来指导和规范化新的设计领域的需求，并快速融入该领域。而新的领域的经验与视野会被纳入你的整体设计理解中。
从主动思考，到经验内化，不断脱离舒适区，纳入新的设计领域、新的视野维度，在这个过程中使个人的通用设计能力螺旋进步。
最佳启动：消灭设计的不确定性
我知道，我的读者中有很大一批人都处于设计能力良莠不齐，没有系统的设计思路与设计流程，介于初中级设计师之间的状态。而当今国内的设计领域也是如此，初中级别的设计师完全饱和，而企业对高级体验设计师又求而不得，这种人才断层既有培训爆火下的积弊，也和设计门槛与岗位收益相关，大环境无法改变，能改变的只有自身。
在这里，我总结一个更简单的设计思路，只要你按照该方法去执行和反思，应该会有很大的收获。即从今天开始，对你所接到的每个设计需求都提出唯一一个标准——消灭不确定性。现在停下来询问自己，你接到的每个需求，对于你输出的设计结果，你认为其最终效果是确定的吗？换言之，你认为你的设计真的解决了该需求的问题了吗？
你只需要把你个需求设计的思考分为设计前和设计后。
设计前请思考，我如何设计这个需求能确定以及肯定的解决这个问题，没思考清楚前不要动手设计，想到第一个方案后也不要动手设计，继续思考，延迟设计决策。
如果你乍一想到的方案自己都认为模棱两可，那不要执行设计。此时发挥主观能动性去思考，我如何能够获得相关信息，来辅助我做出这个设计决策，我需要去参考一些竞品？我需要列出目前存在的疑问点，或者我无法解决的问题点去询问设计专家设计leader？或者我把场景，整体的体验流、用户操作流都列出来，然后继续埋头探索方案？
千万千万不要在方案还没想清楚前就开始设计，这将输出无意义的方案，且浪费大量时间，千万千万不要在想到第一个方案后立即开始设计，这将不会给你带来任何进步，以后遇到相同场景你也仅有一个可选方案，千万千万不要忽略竞品忽略他人闭门造车。
千万千万试着思考尽可能多的方案，乃至输出多个方案（仅指体验设计类，而不是视觉设计）。作为体验设计师，必须锻炼的技能是方案演绎能力，在脑海中演绎可能的方案，如果有精力则可以借助工具甚至把演绎过程记录输出。 如下方我进行的一个需求的方案演绎与思考。
设计前保证方案确定性，第一关要能够经受自己的逻辑考验，当你探索多个方案后最终确定了一个符合业务场景，同时体验良好的方案，作为设计师自己给该方案打上一个“确定”的标签，此时再去执行并输出，而这过程中的思路，从纠结到决策都是最终设计输出的关键证明，既能提高设计说服力，又能锻炼个人能力，而这正是初级设计师容易忽略的部分。
设计后的确定性则是指，产品还原与产品验证方面。产品还原度是设计稿的视觉确定性，确保开发还原的线上效果与设计一致，这不仅仅要靠开发的努力，更要有设计师的具体标注说明的辅助。验证则是产品上线后的必要环节，不论是预先根据业务指标设定埋点，还是设计师通过各种途径获得用户反馈，最终都要保证你所设计的产品体验的确定性是达标的，确定解决了需求提到的问题，确定能满足用户需求。若没有，则重复这个过程，重新思考然后设计。
作为设计师，应该理解自己也能作为设计对象。在我看来，设计师就是遇到一个问题解决一个问题，遇到两个解决两个，直到面前再也没有问题。所以当不清楚自己该如何设计，下一步该如何做时？你只需要思考，把解决当前的迷惑作为一个需求，去思考，深入思考，列出所有可能性，不管是百度还是询问同事查阅资料，总归在思考后，你会有所收获。
结语
最后，我们一直在思考，在定义，到底什么是设计？
我自己一直遵循的理念是——设计解决问题，形式追随功能。
而有人说设计是做选择（决策），有人说设计是永远做正确的事情。
事实上这些说法都有其正确性，也都有各自的评价标准，因为场景，趋势，市场各种因素都在发展变化， 设计最终要兼顾场景兼顾各种利益相关者，在正确的时间做正确的选择并最终做到正确的事情。
解决问题有多个方案 ，设计师需要在其中做出抉择，选择最佳方案，最佳方案如何判断的？对当下场景，对主流用户，对更多利益相关者来讲是更正确的选择。那它就是最终方案。
当设计被置于真实的环境，真实的市场下 实际上其倾向性和评价标准一直在发展变化从最初重视觉到重体验再到重商业。设计倾向性一直在变就像设计潮流，唯一不变的是设计师面对复杂的场景和问题时一如既往的优雅的解决问题的思路，并帮助设计师让世界变的更美好。
文章来源：UI中国 作者：AI-玲玲
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
2020 年，新冠疫情席卷全球，后疫情时代的需求也促使设计师们不断提出更有意义的医疗解决方案。作者梳理了医疗保健类 APP 的类型，从产品的研究、功能特性、导航、颜色等角度提出了针对医疗保健 APP 的一系列设计建议，简单直观的界面、便捷的功能，以及积极的情感，才能使用户接受并喜欢原本 “令人生畏” 的医疗产品。
△ Justas Galaburda 绘制的插画
在移动应用市场中，的应用类别是 “游戏”，而 “健康与健身” 类勉强跻身前十名。2020 年是十分艰难的一年，但也创造了很多机会，例如，移动应用市场中医疗行业的产品大热，受到多方关注，这类产品直接影响人们的健康行为，可以使人们的生活更加轻松愉快。
为此，大批创业人士开始关注医疗这一领域。首先，你需要制作一个功能强大的 APP，因为如果一款产品不能交付使用的话，它就一文不值。但是，这种功能必须通过设计能力来呈现。一个好的医疗保健 APP 设计，应突出其最重要的细节，引导用户进行操作，并提出下一步建议，从而产生必要的行动。APP 本身可以成为有效的潜在客户开发工具和公司的主要产品。对于一个健康或医学相关的产品来说，用户界面或用户体验设计尤为重要。
△ George Frigo 设计的呼吸检测 APP
本文将探讨一些医疗保建 APP 设计的成功案例和经验，这对设计师和企业来说都很有帮助。
值得注意的是，“医疗保健类 APP” 是一个综合性概念，涵盖了许多与健康和医学相关的数字产品。
医疗保健 APP 类型很多，包括但不限于：
这似乎是一个相当宽泛的主题（例如，卡路里计数 APP 和医学教育解决方案相差甚远，却都属于这个领域）。但是，有一些通用的设计方案，可以提高任何一款 mHealth APP 的易用性。（ mHealth（Mobile Health，移动医疗或移动健康）：通过移动设备提供与医疗相关的服务，例如，通过 PDA、移动电话和卫星通信来提供医疗信息和医疗服务等。）
△Victor Nikitin 的医疗类 APP
一款 APP，即使它不是企业的主要产品，也可能具有巨大的价值。例如，用于医疗工作的配套 APP，能够为客户提供信息和服务，从而减轻员工的负担。如果一款医疗保健类 APP 是企业的主要产品（例如，健身或冥想 APP），因为没有硬核的业务场景支持，会有很大的风险。有时，这类 APP 设计中的不足会导致用户完全放弃使用它。
为了避免这种情况，我们来看看设计医疗保健 APP 的 12 个要点，以及它们如何帮助设计师们设计出更具针对性、更直观、更的 APP。
△ Anatoly 设计的 Healthcare APP
1. 研究 – 成功的第一步
在制作 APP 界面原型之前，你需要了解产品的目标受众是谁，他们的地理分布、社会人口特征以及心理特征是什么。因为没有一种产品可以满足所有人的需求。用户的兴趣和能力决定了他们如何与 APP 进行交互。因此，回答以下问题将对你有所帮助：
一般来说，患者和医生都会使用医疗保健类 APP（假设我们将生活方式类 APP 的用户也视为患者）。这两类用户在功能和 UI 设计方面有不同的需求。
医务人员通常需要快速找到一些数据项，例如 EHR / EMR、药物规格、诊断和治疗建议、参考材料等。但是，患者希望能与尽可能少的信息进行交互，且这些信息应该简单易懂。因为这类用户中有很多是老年人，或是存在某些障碍的人。
只有在进行适当的用户研究，并得出相应结论后，设计师才可以着手进行医疗保健类 APP 的设计。
△ Chahua 设计的健康管理 APP
2. 每一个案例都简洁明了
对于一般人来说，医学是一门复杂的学科。所以在设计医疗保健类 APP 时，请尽可能地让它们保持简单，这有助于让用户平静下来，并保持专注。
“复杂性是你的敌人。很多傻瓜都可以让事情变复杂，而让事情变简单是很困难的。” — 理查德·布兰森
为了让医疗类 APP 看起来很重要并给人留下深刻印象，而将其界面做得过于详细，是没有意义的。即使该产品是为医务人员设计的，也最好 让界面和逻辑易于理解。
△ lgor Savelev 设计的医疗类 APP
在设计医疗保健类 APP 的用户界面时，请提供有意义的用户引导，并 使界面直观易懂。否则，用户可能会在触达该应用核心内容之前就对其体验感到沮丧。
如果该 APP 清晰明了，医生及患者双方都更容易接受。这样一来，用户易于学习上手。即使它是针对医疗的解决方案，人们也不会感到不习惯。
为帮助用户在比较舒适的节奏下了解产品功能，请使用渐进呈现的原则，逐步为用户提供指示。从新手指引开始，将应用程序中的每个操作分成可管理的小模块，每次仅提供一个指引。（渐进呈现（progressive disclosure）：每次只展示用户当前需要的信息，引导人们平缓地由简单状态进入复杂状态。例如将原本复杂的逻辑隐藏起来，通过更易于认知的界面形式帮助人们轻松完成最为基础的任务。）
另外，采用被动输入、自动输入、调整键盘和动态验证字段的方式，能够限制用户必须输入的信息量。
所有医疗信息必须由受过相关教育且具备专业知识的专家提供。否则，内容要么不完整，要么包含错误，对于医疗产品来说是不可接受的。
△ yurig 为医生设计的医疗类 APP
3. 功能和特性
医疗保健类 APP 的 功能及特性取决于其用途和目标受众。例如，医疗中心 APP 需为用户提供个人帐户，在该帐户中，用户可查看其就诊记录、就诊建议以及预约情况。如果没有安全加密的视频会议和通讯功能，远程医疗 APP 将毫无意义。毕竟医疗类 APP 依赖的是可靠且有用的通知。
主页承载着一个 APP 的主要功能。请试着回答这个问题：用户为什么使用你的 APP？或与之类似的 APP 呢？如果用户访问 APP 是为了记录或接收某些信息，或是联系医生，查看他们的进程等，那么这个功能应该位于 APP 的主页。
重要的是，正如前文所提到的，避免一次性出现太多功能，从而造成混乱。不可否认的是，这种情况经常发生在老版本的 APP 上。这些 APP 常常不断添加新功能，偏离焦点，以至于只有专家用户才能理解它。
（专家用户（super-users）：专家用户在生活中愿意给予企业反馈，主动做口碑，或是积极分享、点赞等，这些无法以价钱衡量，却能在品牌价值传递、产品创新、营销推广等经营各环节，为企业带来实质贡献。）
根据帕累托原理（二八法则），80％ 的用户倾向于使用不超过 20％ 的功能。因此，务必确认哪些功能对用户来说是最重要的。
（帕累托原理（ Pareto’s principle）：也称二八法则。在任何特定群体中，重要的因子通常只占少数，因此控制具有重要性的少数因子，即可控制全局。）
△ Manoj Dalvadi 设计的 Medicine APP
4. 便于探索与享受的导航
清晰的导航结构是一个有效的医疗保健类 APP 的必要条件，也是医疗保健类 APP 用户界面设计的基础。没有清晰的导航，APP 是不会被广泛使用的。完善的导航意味着率和易用性，这对用户来说是十分有价值的。医疗专业人士需要的是能够快速开展工作的应用，因为他们花费了太多时间在处理电子健康档案（EHR）上。一项由斯坦福医学院展开的调查发现，医生花费在每个病人身上的时间，有 62% 是用于处理电子健康档案。如果针对医务人员的 APP 不够简洁，那 APP 便失去了使用价值。同样的，对于患者来说，他们也不会喜欢混乱的导航，即使当前的任务不是很重要。
重要的信息应放在明显的位置，并在必要时提供详情。根据 3 次点击原则，系统应保证用户在 3 次点击之内，找到所需信息。
为了使 APP 导航结构清晰，可采用标准的 APP 导航组件，如汉堡菜单、标签栏或抽屉式导航等。
△ Alex Samofalov 设计的医疗类 APP
一般来说，APP 的颜色选择取决于目标受众以及该 APP 的主题。
医疗保健类 APP 设计通常采用中性色调，尤其是冷色调的蓝色和绿色，背景一般为 白色。设计师这样做是为了达到以下效果：利用柔和的色彩和医疗保健行业的联系，缓解用户焦虑并增加可信度。因此，在医疗保健类 APP 的用户界面中，亮红色或黄色是很少见的。
△ Adam Sokołowski 设计的医疗类 APP — Pharmagy
但是，考虑到医疗类软件的多功能性，颜色选择并没有特别的限制。主要思路是，这类 APP 的整体外观应营造积极的印象，不应引起焦虑、恐惧或其他不良情绪。
例如，深色的健身 APP 看起来优雅且有品味：
△ Saepul Rohman 的 UI 设计—健康及锻炼类 APP
而亮色为 APP 增添了许多活力：
△ Michal Parulski 设计的移动健身 APP
APP 的个性化定制是近年来最显著的设计趋势之一。特定的功能与特定的用户模式相适应，并且系统会暗示用户下一步可执行的操作，以免被用户忽略。
这些技术的目标是，帮助用户更快地利用 APP 解决问题。因此，有必要识别和分析用户模式，并跟进他们的变化。
正如每个人都有着不同的健康状况，用户希望他们所使用的 APP 也能提供同样独特的体验。除此之外，在非医疗保健行业，也有 33％ 的用户会因个性化程度不足而卸载应用程序。
在设计医疗保健类 APP 时，可以使用许多自定义选项，如颜色主题、个性化通知、交互元素，以及利用 AI 定制个性化推荐等。
△ Jawad 设计的在线咨询 APP
无障碍的 UI 设计对任何 APP 来说都很重要，对于医疗类 APP 尤为重要。
移动医疗解决方案针对的是不同年龄，具有不同视觉和听觉能力、身体和心理特征的用户。因此，医疗保健类 APP 主要功能的设计，应保证每个潜在用户都能访问。请考虑可能存在的限制，并努力克服它们的负面影响。例如，有晕动症的人不会喜欢过多的动效。
但这并不意味着一个医疗保健类 APP 的界面中只能有两种颜色，也并非所有文本字号都要非常大，但这确实意味着设计师将面临一些挑战。对于医疗保健类 APP 来说，其中的挑战也许相对多一些。无障碍设计能带来更多的机会，而不是负担。试着从浏览 W3C 网页中关于无障碍指南的内容开始，尝试使用色盲模拟器，如下图这种。
无需多言，试试移动端无障碍设计的常用方式：将主要元素的尺寸控制一个拇指大小的区域中、添加将视图改为水平模式的选项，以及放大文本的选项等。
△ keithar 的对比度分析仪和色盲模拟器
医学不仅复杂，而且通常令人生畏，即使涉及的医学内容不多。一个比较聪明的办法是使 APP 看起来与医学毫不相干。这将消除用户因刻板印象而产生的压力，并使体验更加愉悦。
除了使用柔和的颜色，还可以在用户使用 APP 的不同阶段 推送鼓舞人心的消息、有趣的图片、欢快的语音或其他元素。医疗保健类 APP 用户界面中的图像和图标，应始终带给用户积极、愉悦的情绪，并 营造一种无痛感和安全感。
△ Mahdieh Khalili 设计的冠状病毒 APP
当产品已具备现成的网站，企业方甚至设计师为了降低制作成本，可能会想从产品的网页版中 “借鉴” 一些解决方案直接应用在移动端设计中，这很可能导致用户拒绝使用 APP。
用户与移动设备间的交互不同于与电脑间的交互。移动设备的屏幕比显示器屏幕或笔记本屏幕小。此外，用户与移动设备交互的方式不同于在电脑上进行的操作。在移动设备上，我们做任何事情都依赖手指的移动，不愿意输入冗长的文本，但同时希望系统能更快地工作。
一般来说，尽管 APP 中的导航也很重要，但对于移动设备而言，更需关注的是交互设计。在大多数情况下，人们喜欢使用网站来获取信息，使用 APP 来完成任务。此外，APP 还集成了智能手机的功能，如加速度传感器和摄像头，这也是导致 APP 的用户界面设计与 Web 版有所不同的原因。
△ Grace Saraswati 设计的健康健身类 APP
视觉吸引力与功能性之间的平衡是非常重要的。医疗保健类 APP 必须便捷，且不能分散用户对内容的注意力。
图形元素，包括动画，应始终以满足使用目的为前提，来考虑是否需要，如数据输入，以及说明用户与系统间的微交互等。不能仅仅因为它看起来不错而添加。不要过度使用渐变和阴影，要将用户注意力集中在主要信息上。字体也只需选择一种，可以通过改变字号和其他特征（如斜体、粗体）来做区分。
使用简单的配色方案可以更清晰地传达品牌信息，并创造更好的导航效果。
△ Dibbendo Pranto 的健康及活动追踪交互设计
你可能会在某些点上考虑，是否要借鉴一些竞争对手的成功案例。好吧，如果这有用的话……一方面，抄袭其他产品是不明智的，因为 它们的设计可能并不完善。你采纳的可能是竞争对手的错误决策，以至于阻碍 APP 的未来发展。
另一方面，你应该先对其他应用进行分析，对竞品进行研究。应该参考用户以前使用其他 APP 的经历，并进行借鉴，从而降低用户的学习成本。添加太多创意会使 APP 显得很烦人，用户需要花大量时间去习惯并学习操作。为此，可以参考苹果制定的人机交互指南（Human Interface Guidelines ）和谷歌制定的材料设计指南（ Material Design）。
“用户大部分时间是花在别人家的网站上。” — 雅各布定律
（雅各布定律：用户在其他千千万万个网站中积累经验，学会如何使用网站，当一个网站跟其他网站一致时，用户会立刻知道该如何操作，但如果违反了雅各布定律，用户会毫不犹豫地离开。）
必须根据品牌、服务和产品细节来进行设计。例如，健身类 APP 与医学计算器有着很大区别。设计必须完全符合目标受众的要求、APP 的功能细节及主题场景等。
△ Martyna Zielińska 的医疗提醒 APP
最后，重要的是要记住，每个设计师都有自己的观点，认为这个或那个决定是合理或有效的。他们可能会对 APP 架构和导航的一致性，严谨的设计解决方案，以及产品的实用价值深信不疑，以至于忘记了测试。通过不断的实践，设计师提高了自己的共情能力，可以更好地理解用户需求。但事实上，直觉和经验带来的潜在陷阱也会给应用带来负面影响。
只有在分析用户与 APP 界面交互的相关数据后，才能得出相对准确的结论。测试有助于及时获得反馈，覆盖 APP 中的所有行为场景，并检查交互模式。
用户的积极参与是成功的关键。相关测试受众的年龄、职业、地理位置、性别、文化和宗教背景等要尽可能接近目标受众，越接近越好。尽可能多地让他们使用 APP 的主要功能并收集反馈。
△ Alex Samofalov 设计的患者卡片 APP
设计所关注的并不仅仅是颜色和字体，而是创造价值和解决业务问题的能力。健康是一个敏感且具有挑战性的问题，需要特别注意。设计师们一直努力地在医疗类 APP 极高的安全性及可用性要求与界面美观性之间取得平衡。
经过深思熟虑的医疗保健用户体验和 UI 设计是一种极好的工具，它能凭借简单直观的界面、便捷的功能以及它所带来的积极情感等，吸引用户参与体验。
文章来源：优设网 作者：TCC翻译情报局
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
做To B的同行都知道，降本增效一直是企业中后台绕不开的热点话题，现任公司业务涵盖仓（WMS）、运（TMS）、配、人（HRM），所做项目虽功能各异，但是有一个共同点-大量使用表格。本文受有赞设计师@美芳的启发，将我日常工作通过优化表格来提效的思路整理成文章，一方面是对企业后台的数据表格作一个简单的阶段性总结，另一方面给部门做一个年终分享。
表格是展现数据最为清晰、的形式之一，它也是B端产品和设计师每天接触最多的组件，常和排序、搜索、筛选、分页等其他界面元素一起协同。在企业级中后台中，常应用于：
一次性浏览大量信息-很多图表类型无法展示数据特点，而表格是组织大量信息通用性最高的一种表达方式，既可陈列信息，又可以表达信息之间的关系；
信息之间需对比-表格的归纳与分类，便于用户快速查询其中的差异与变化和关联；
快速确定并执行多种复杂操作-如对信息进行搜索、筛选、增删改等。
通常表格的组成元素以及相关元素会有多个部分，根据不同粒度的用户目标将其解构为三部分：
数据查看：表格的核心-显，用户用来阅览、对比和分析数据。
数据过滤：辅助作用，承载表格的查功能，将数据过滤，方便用户快速查询定位数据，一般位于表格上方。
数据操作：辅助作用，承载表格的增删改的功能，比如常见的“新增”、“删除”、“编辑”按钮。
首先，我们要明确，什么是一个好的表格？笔者认为好的数据表格可读性要强，应便于用户对信息进行快速的扫描、查询、过滤、分析等操作，以获取数据并快速准确地完成目标任务。一个结构清晰的布局能大大提升用户对信息的接收速度和理解程度，拆分到表格的设计目标就是：易读、易查找、易操作。
数据检索区可以看作表格的导航，按预定目标过滤出某种具有特定性质的数据，将操作者所关注的数据展示到前面，便于快速查看查看、对比、分析信息的操作过程。从用户角度出发，按不同粒度的数据检索方式分为3种方式，分别对应不同程度的用户。
搜索：当用户有相对明确的选择目标时，需定点查看，数据多且杂乱无规律；
筛选：用户目标相对比较模糊，游离于一个大概的范围时，通常用于一些有清晰分类的数据；
标签：查看无交集的数据内容，通常伴随时间、状态的流转。
搜索可以帮助用户在巨大的信息池中缩小目标范围，快速而准确的定位到目标数据，并速获取需要的信息。由于考虑到用户需要手动输入，很难保证精准搜索，原则上所有搜索均为模糊搜索，必要精准搜索的地方使用筛选功能，给用户提供筛选选项。通常上端搜索栏不被限定搜索范围，可以全部搜索。
优点：减少精准搜索带来的记忆负担
缺点：容易把不相关的
优点：搜索匹配精准度高
缺点：不方便，每次只能对单一条件进行搜索
筛选可以帮助用户缩小数据范围，逐步找到想要的内容；或者当用户的目标就是查看某一范围的数据时，筛选将是一种十分快捷的方式。在企业级中后台产品中，筛选的使用场景通常是后一种。
优点：空间利用率高，起到了很好的收纳作用
缺点：无法直观看到所有筛选项
优点：操作效率高，筛选项一目了然，支持输入更多筛选条件
缺点：空间利用率低，不适合选项太多的情况
优点：筛选当前列，更直观，一般情况下表单左侧数据筛选频次越高
缺点：筛选的内容仅限于特定、单次列的筛选，对于首次使用者来说陌生，交互形式需要学习
使用场景：标签切换一般用于和时间、状态的流转有关，且没有交集的数据内容。主要样式有基础、卡片、胶囊等。
优点：根据标签，可以很清楚知道划分，切换tab就可以筛选内容。
缺点：分类需覆盖选项，并且保证每一项没有交集，分类不能过多，超过7±2个选项可选择下拉筛选。
提升用户体验的一个小细节：默认用户最关注的选项，而非全部，这样可以缩短查询路径，同时给出条目，让用户清晰明了每个选项的数量，便于操作。
在企业级中后台中，用户查看的数据往往属性较多且不唯一，通过简单的检索方式很难定位到目标数据，所以，在实际使用时，常会将大量非交叉关系的属性进行罗列，搜索、筛选、标签切换组合出现，形成多属性组合检索。这种检索更适合于专家用户，他们对于目标数据有明确的定位，知道可以通过哪些属性定位到自己想要的数据。
平铺显示
选用对用户决策有意义、操作频次高的属性作为直接展示的组合检索条件，建议数量最好不超过5个（7±2法则）。
优点：大而全能最大限度避免检索条件疏漏的可用性问题
缺点：易用性不高。大而全可能为用户带来繁杂的第一印象，都是重点等于没有重点，增加用户的决策时间。
折叠展示
如果多属性组合检索中的一部分检索条件不是高频率使用的，但又是必须存在的；则可通过折叠的方式将这部分检索条件隐藏起来，将高频率使用的、数据覆盖面广的1-3个属性直接展示出来。
在设置组合检索项时，应考虑每一项检索甚至是多属性组合检索是否有必要。需从实际场景出发，根据用户对各个检索项的使用频率及组合检索项的数量，来决定组合检索项是直接展示还是折叠展示；以及哪些属性直接展示，哪些属性折叠展示，为各检索项安排合理的展示方式。
产品现状：前言中提过，我司业务涵盖WMS、TMS、HRM，业务极其复杂，数据种类字段众多，使用的检索方式为组合筛选平铺展示，一半以上的页面筛选项超过了9个（不符合7±2原则），大而全的检索方式一方面占据首屏大部分空间，导致首屏屏效低；另一方面用户在寻找具体筛选条件时，仿佛大海捞针，增加了用户决策时间。因后台数据涉密，将下图-招聘中可公开的页面作为案例来可大家分享。
设计优化方向：
业务目标-提升招聘人员的检索效率 ；
设计目标-缩短检索路径，减少检索区占用的屏幕空间，提高首屏屏效，将展示区域更多留给表格；
设计策略-按照用户场景检索路径、检索频次设计信息
但还有2个关键问题：用户场景有哪些？查询路径是什么？哪些检索频次高？依据从何而来呢？通常有两种方式：
依据一：数据埋点，每个操作埋个PV（点击量）,一个月后再看每个操作的数据量；
依据二：用户调研，通过【问卷投放】或【用户访谈】，深入理解用户真实使用场景以及与业务之间的关系。
我采用的用研方式是用户访谈，原因是由于招聘人员和我们产研人员在一个园区，调研方便，得出数据的时间比埋点短；而相比【问卷投放】，用户访谈能细到具体某个字段在场景中的作用。访谈的过程因为篇幅原因就不在此具体讲述，大家可根据自己的实际情况选择适合的用研方式。
访谈中了解到，招聘人员的工作是发布岗位信息，快速招到合适的人。因此他们在该页面的TOP场景就是对岗位上下架，即【新增】和【删除】，而检索的TOP场景有哪些呢？
1.对上架中的已招满的岗位进行下架处理，完整的检索路径为岗位状态>岗位名称>项目
2.设置岗位佣金，因佣金会根据需求方要求及紧急程度动态变化，完整的检索路径为岗位名称>佣金排序
3.汇报招聘进度，对于个别需求量大、急聘的项目，领导特别重视，经常需要导表。完整的检索路径为急聘>岗位名
通过场景得出高频检索为【岗位状态】、【岗位名称】、【急聘】，其他如【项目】和【城市】检索条件只是当岗位名称重复时来进行组合筛选，但该场景在我们业务中很少遇到，如【仙林店诚招配送员】，门店重合率很低。
访谈中我们已经得到了用户对各个检索项的使用频率，那信息排序的原则是：按使用频率，用户目标高于业务逻辑，而改版前并非是按照使用频率排序的。再回到用户场景，在汇报招聘进度时需要检索的【急聘】并不在检索项中，需要和产品经理反映这一点
直接展示高频检索项【岗位状态】、【岗位名称】和【急聘】，其他低频项折叠至高级筛选，【项目】、【城市】
【创建人】作为下拉筛选，查询路径较长，同时将字段组合放置在搜索选项中，采用带标签的搜索，因【岗位名】频次远高于其他字段，默认展示【岗位】
优化后如下图所示：
数据查看区主要用于数据的显，用于对比、浏览，而B端后台的表格中展示的数据往往多且杂，数据种类、字段众多，10-20字段很普遍。这就需要我们在设计的时候先一步对数据进行梳理归纳，提高数据的易读性。我在对我们后台表格进行优化时，会先通过四个维度来自检，然后再有针对性的进行优化。
在讲提升数据查看区的易读性前，我们先来看看该区的结构。数据查看区主要由表头、行、列、单元格四个部分组成。
表头：说明数据的内容，可以包含筛选、排序等功能起到数据解释作用，
行和列：对本行/本列数据的描述，可以理解为是表格的骨架，是用户快速扫描并接收表格布局的关键要素
单元格：表格的主体内容，承载用户的每一条数据，也是整个表格的核心
表格设计的本质是信息内容的有效传达，就表格本身而言应该是隐型的，应该让用户注意力聚焦在核心内容上，多做减法。
基于对实际业务需求、目标用户诉求及其行为的理解，列数尽量控制在7±2，列举用户更为关注的数据，用户需要的非重点、辅助性信息可以在详情中展示。
如果不同用户想看到的信息侧重不同，可以让用户自定义列的展示。在默认情况下仅展示最常用、最重要的几个指标（如下图）。这样做的好处是，首先，用户能在表格上方看到所有的指标名称，避免了原来需要横向拖拽才能浏览到所有指标的情况；其次，用户可以根据自己的需要，自由的选择显示所需指标，隐藏不必要指标，减少干扰。但需注意系统应记住用户上一次的自定义列设置，减少用户重复操作。
表头，概括每列的主要信息，在用户使用表格中，起到数据解释作用，让数据能与之进行匹配，使用户能够看懂。表头在能够概括的情况下，尽量简炼、准确，一般可根据上下文关系来进行减短简化，以达到节省表格头部空间和减轻视觉压力的作用。
一个简单的检验表头是否精简的方法是：少一个字不可，通俗易懂的说法就是字数再精简用户就不明白意思了。可以让其他同事体验产品，看有没有一些名词定义让用户产生误解。
对于比较复杂的表头，可以定义一个专有名词，鼠标hover上去对专业术语或用户不常见的名词给予该字段的详细解释，同时满足新手、普通、专家用户的需求。
如果表格数据可以自我解释，表头就不是必须的。如电子邮件的表格，就不需要列标签，因为发件人和邮主题的区分度比较高。
表格中所承载的数据信息才是主体，在进行表格设计时，尤其要注意去除所有非必要的视觉元素，让用户将注意力集中在数据信息上，而不是无关的边框、底色等。所有的视觉元素应该为更好的帮助用户阅读而服务，除此之外，再精美的设计都是对表格的破坏。
去掉竖向分割线：水平分割线能显著减轻长表格在垂直方向的视觉重量，加快大量数值的对比工作。
而竖向分割线的作用是即使缩减元素之间的距离也能区分不同元素，但如果使用了合适的对齐方式分，竖直分隔线就会很多余的。即使要用，也要非常淡，不能妨碍快速浏览。
不使用斑马线：数据量不大且易分辨的情况下，斑马线在很多时候也是没有必要的，因为它们是同一类数据，而且水平分割线就已经能够明显区隔。
分割线的样式尽量轻盈，无关的边框不要抢视觉，数据才是主体，突出内容。
去掉不必要的装饰和颜色，如icon、标签等，虽然能够帮助组织数据、更直观的传达信息，但物极必反，少即是多，要注意克制这些元素的使用。标签能用线性就不用面性，做到轻盈，否则表格中最重的就是标签。
在产品的品牌设计中，字体是规范中的重要一环。然而在设计表格时，简约至上才是关键，尽量避免任何装饰性字体。虽然文本不能够建议你具体使用哪种字体，但数字建议使用Helvetica Neue、Helvetica等其他等宽字体，文本最好不要出现以下情况
不要出现衬线字体：因为个性会产生阅读噪音，不利于用户对数据的理解和思考。
不要出现全大写字体：因为它很难读，需要转化思维。
不要出现使用斜体：易引起视线疲劳，影响阅读。
不要出现多种字体：保持风格统一。
在开发同学的眼中，单元格高度=内容高度+上间距+下间距，在实现设计稿时，通常也是按照这个方式来写的，而不是像设计同学一样按照文字的尺寸来计算间距。其中，文字行高建议设为字号的1.5倍，上下间距设为字号的1.2倍。
当然，在很多很多通用化产品中，存在多个设备屏幕分辨率的差异，为了让每一个分辨率下的产品都能够有较好的展示效果，可设置舒适、标准、紧凑三种高度来满足需求，提供切换按钮让用户自己控制显示密度。
合适的填充和边距对于视觉设计至关重要，以保证易读性。定义列的间距时，我通常的做法是N1保持不变，将N2定义一个最小值，N2再根据表格的宽度自适应变化。表格主要适配到这个最小宽度，这一步骤通常的设计系统的初期就要完成，一方面可根据自己项目目前情况，按照导航宽度等固定尺寸确定最小的表格宽度，这样在处理最小尺寸时，可以有一个明确的边界，同时能与开发同学进行理解沟通。当表格宽度大于页面宽度，固定首尾列，左右滑动。
合适的对齐方式能够提升数据的浏览效率。表格内信息的纵向列对齐（符合格式塔心理学中相近原则）能够很好的形成视觉引导线。通过对齐，会让表格更加规范易理解，给用户视觉上的统一感，视线流动更顺畅，让用户快速的捕捉到所需内容。
文本左对齐：更的阅读浏览顺序，包括非比较型和固定长度的数字，如日期2020-12-04（补0是数字书写规范）、编号1948696等；
数值右对齐：金额、长度、高度等，数字是从右往左读的，通过数值位数的长短即可对比数值的量级和大小，方便数值的比对。这是因为在对比数字时，首先看个位，然后十位、百位等；
最后一列右对齐：通常是操作，即使没有纵向分割线也能很好的起到分隔的作用，视觉上看表格是一个方方正正的格子，比较整齐；
当表格单元格中没有相应数据时，要避免直接留出空白单元格。空白格容易造成用户的困惑甚至误解，用户会搞不清楚到底是没有数据，还是根本没有值？正确做法是，数据不存在（数据库中没有该字段）用“-”，没有数量（数据库中有该字段）用“0”，且小数点后位数、单位，都要与上下单元格保持一致。
在Web端，数据量动辄上万条，容易出现浏览器响应太慢或者浏览器内存溢出的情况。使用分页器有哪些优点呢？
分页可以缓解服务器的加载压力，每翻一页加载该页的页面，缩减单次加载的数据量来缩短等待加载的时间，从而达到少量多次的体验。这就是为什么哪怕是移动时代了，很多表格还是使用分页组件。
分页可以跳跃查看数据，灵活性更高、步骤更短。
表格设计大原则是整张表不要超过一屏，每一页的默认行数：10行以上，减少翻页的次数。但考虑到每个用户的使用习惯，在给出默认行的数量后，可以让用户自定义每页的显示的数量，相比于跨屏翻页而言，向下滚屏会更便利。
当表格数据无数据时，翻页控制按钮不可见。
我在接手我们后台产品之初，在对业务人员进行角色调研时就收到反馈到有些页面非常难用，有些就很好用。为什么会出现这样的情况呢？如下图所示，被投诉的表格单操作项就有6个，一方面容易误操作，另一方面左侧的数据展示内容有限，易读性很差。
对于单条数据操作频繁的场景，我的方法是，当超过三个操作项时，将操作低频折叠收起。这样做的优点是界面简洁明快，信息密度低，可以帮助页面突出更加重要的信息，减轻空间压力，减少干扰。
工作中常常会遇到单元格数据过多的情况，常见的方法有两种：
定义一个单元格长度或字数限制，超过该范围以"..."显示，鼠标悬停时出现气泡显示完整内容。
多行显示，这种方法让平铺直叙，让用户可以直接了当的看到所有信息，在B端使用层面上还是不错的，但是超出三行就会挤占行高度，建议不要超过两行，超出可“...”显示。
数据过多时，单元格长度如何定义？超过哪个范围“...”显示呢？
定义长度的依据：根据业务字段，防重复。保证用户在扫视的时候，对重要字段能快速区分、对比。
新增一条数据后，这条数据应该被放在表格的哪里呢？这是个和表格默认排序有关的问题。
表格数据应该默认按添加的时间排序，还是应该按某个字段的名称排序？
如果我们默认按某个字段排序，比方说岗位列表里增加一条“广深常温B2C 叉车员”的字段，而首字母G的数据在表格中极大概率不靠前。这时就会出现一个问题，用户要在茫茫数据中找到刚增加的那一条数据，或者用户根本不知道自己增加的数据已经被插入在了表格里了，这会让他们觉得自己的操作失败了。
解决这个问题的一个方法就是按照数据添加时间排序，默认创建的在最上面，体验上创建完反馈，马上就出现了变化，且针对数据的操作频率较高，方便用户发现与查找。同时也可以用带排序的表头，让用户自定义排序。
前面内容降噪有讲到尽量控制列数在7±2，非重点内容通过更深的入口查看，关于详情查看可以分为跳转和点击详情。
跳转：把 ID、名称等唯一性标志的字段加上超链接，直接显示链接色或者开始不显示，鼠标hover上去才显示链接色，点击可以查看该条记录的详情。
详情：在操作列中增加“详情”功能，点击查看详情。
关于表格详情查看的展现形式，按可承载的信息量由少到多依次分为折叠展开、弹窗、抽屉、及新增页面四种类型。
直接在表格里展开（可以是详情，也可以是二级表格），无需打开新页面即可查看附加信息，防止用户迷失。
适用场景：信息量较少的情况
弹窗是一种中断用户当前操作并对其进行补充、或者对当前操作进行强制反馈的交互形式，需要用户进行强交互，它可以保留用户当前进程的情况下，指引用户完成一个特定的操作。主要分为模态弹窗与非模态弹窗两种形式：
通常这类弹窗只会在屏幕上短暂停留，几秒就会消失，也因此用户感受不到他的存在。它的缺点也非常明显，展示时间较短，不适合展示重要信息、不能承载大量文案。在详情查看页面中并不适用，此处就不再进行拆解。
位于浏览器的主页面核心区域，需要用户对它做出相应交互，弹窗才会消失。
优势：通过全局的半透明黑色能够让用户更加聚焦，集中精力去处理好当前事情，能够通过透明度展示背景，让用户了解到自己并没有离开当前页面
劣势：打扰用户，感到强烈的中断的感受
适用场景：数据详情体量不大，页面内容较轻时。同时，不需要参照上级页面内容，有快速回退的诉求。
侧滑抽屉相比弹窗减少了页面层级和隔离感，有较强的连贯性，适合与原页面具有连贯结构的内容的展示。单击行链接将表格转换为左侧的列表项目和右侧的其他详细信息，这让用户能够解析大型数据集，而且在涉及到多个项目时不会丢失位置。可自定义上下左右四个方向，一般右侧滑出最为常见。
适用场景：详情页的内容较多时，且有快速切换主体的诉求。
新增页面几乎是万能的，无论页面内容量是多少、页面间是否连贯、以及使用频率怎样，都可以使用。新增页面又分为：覆盖当前窗口以及新窗口跳转两种形式，在场景上可以根据两者差异进行选择。
在详情查看中，二级页面使用频率是非常高的，需要用户在A与B页面之间进行来回切换，这时候考虑页面反复出现是否流畅，是否有切换成本的产生，本着产品效率至上的原则，新增的页面建议新开一个窗口跳转而非覆盖，如下图：
适用场景：当详情页承载内容过多且里面的操作相对复杂时。
数据操作主要是针对表格数据的增、删、改，从控制范围可分为：单行操作、批量操作、全局操作。
单行操作也称行内操作，常见的显性与隐性两种方式。显性操作，操作项显示在行内，直观明了；隐性操作，鼠标悬停时才显示操作项，界面简洁，留更多的空间给需要查看的数据内容，减轻空间压力，减少干扰
显性操作，文字按钮操作项一般不多于三个，图标按钮不多于四个时，操作项跟在行条目后面；当超过时，建议将相对低频操作选项折叠收起，点击"更多"或“...”下拉显示。操作按钮致灰时，鼠标选中可显示原因。
隐性操作，如果行操作不那么重要，或者说行操作过于啰嗦影响用户阅读时，可将所有的操作进行隐藏，当用户鼠标悬停时进行展开所有操作。这种方式能上满足用户快速查看与编辑的需求，但是在实际使用中，用户的初次使用门槛较高，需要有一定的学习成本。
适用于数据量较大的表格，通常把操作放在表外部上方，这样操作更便捷，同时便于批处理和单个操作。批处理操作模式允许用户对一行或多行对象执行操作，通常与复选框操作配合使用，并在选中复选框后激活表上方操作按钮，如删除、批准、拒绝、复制之类的操作，这将节省用户时间，避免重复对多行进行相同操作。
统揽全局，无需选择数据内容即可进行的操作，常见的【新增】、【导入】操作。
三种操作：两个在表格外，一个在表格内，那么很自然的我们会遇到一个问题，一个功能该放在哪呢？下面我通过一个案例来说明。
产品现状：在HRM系统中，不同的权限使每行的数据拥有不同的操作项，而且这些操作因为视觉特征比较显眼，容易分散用户的注意力，且因表格空间有限，操作区的各操作项过于接近，误操作率相对较高。
设计优化方向：
业务目标-提升数据操作效率 ；
设计目标-降低误操作率，让用户聚焦内容；
设计策略-控制操作项的显示数量，将操作项分类
习惯上我们会认为一行数据是对某一个对象实例的描述，比如在上图表格中，一行数据是对某个待入职员工的描述，包括他的姓名、工号、在职状态等等。所以表格内的操作也是针对这个对象的。
一般我会把一次只能针对一个对象操作的功能放在表格内，比如【详情】和【编辑】，因为查看详情不太可能一次查看多个对象，编辑修改信息也是。那么反过来，不属于任何一个对象实例的功能就需要放在表格外的操作栏，比如说【新增】。另外一种需要放在表格外的功能是批量操作，因为批量操作需要对多行数据进行同时操作，也不是属于单个对象实例的。以此为依据将图中操作分类如下：
大家应该也有遇到过按钮像案例中【删除】、【入职生效】既可以作为行内操作，也可以作为批量操作的问题。作为行内操作，优点是更便捷，；表外作为是批量操作，这样更方便的同时操作多个数据，但如果只是操作单个数据时就会增加用户的操作步骤。或者两种方式都提供，虽然更灵活但是会让页面比较冗余。
其实怎么选择还是要根据具体业务场景来决定，首先判断这俩操作是不是高频功能。在我们的业务功能中，已入职和离职的员工在该页面不能操作删除，且【删除】是相对低频地，完全可以只提供单个删除功能。【入职生效】作为高频功能，与产品经理讨论后提供行内操作和批量操作，选择这个方案的原因是，该功能作为行内操作已上线运营了1年时间，移除会产生学习成本。
批量操作常见的摆放位置有三种形式。
方案一：和全局操作一起置于表左上方或右上方
因批量操作需要勾选左边复选框，放置在表右上方不符合操作动效，本着效率至上的原则，此处不考虑放在右上方。
优点：操作项信息前置能清楚的知道有哪些功能，无需用户记忆
缺点：但当批量操作较多时，会挤占页面空间，导致操作按钮很多，不易查找
方案二：默认不显示，勾选激活后显示于表左上方
优点：减少了相应的视觉噪音，业务拓展性强
缺点：有一定的学习成本，没有勾选时不知道有该操作项
方案三：直接显示于表左下方，但需勾选激活后操作
优点：上内容下操作，符合操作动线
缺点：和分页放置一起不易于业务拓展
根据我司业务，综合考虑后选择方案三，放置于表的左下方。
单行操作根据操作频率优先级为入职生效>详情>删除>编辑，其中编辑和删除属于低频操作，可折叠隐藏。批量操作-导出也是低频操作。最后定稿方案如下：
2B产品应该着眼于业务，本文是根据我司业务提供了一个表格设计基本指南，在具体项目中，你可能需要根据产品特性和用户需求进行调整。但是表格设计的原则应该是通用的：
从用户阅读表格的目标出发设计表格的内容和布局
从提高用户阅读速度的功能角度出发进行表格的视觉设计，避免过度设计
当表格指标、数据过多时，提供一些自定义的工具帮助用户自助选择出最需要的数据条目
文章来源：tob.design 作者：佩奇一只居
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
伴随技术的发展与人们需求层次的变化，新趋势年年都有，有的新趋势由于用的人多了，使设计作品逐渐饱和，慢慢失去了新意，有的趋势则会为企业不断地带来灵感，产生更多的“化学”反应。
今天，TCC 情报局从这篇国外大神的趋势里总结了 8 条影响 2021 年的用户体验设计趋势，以及可能面临的挑战。只有充分利用这些趋势来创造视觉表现力强且具有可用性的产品，我们设计的产品才可能被更多用户接受并喜爱。
2020 年无疑对全世界来说都是面临挑战的一年，新冠疫情的爆发使大多数人都体验了一把在家办公的 “乐趣”（作为一名大学在职教师，我也终于实现了多年以来睁眼就能上班的愿望）。腾讯会议、腾讯课堂、钉钉几乎成了每一位 “网红”，不对，是教师电脑里的必备软件。对于打工人来说，能够在家与同事进行线上协同办公，也成为了刚需。像 Teambition 这样能够实现多人协同办公的工作学习套件，使人们不但做到工作进度的实时同步，还做到了在家也能 996（泪目）。
△ 基于虚拟现实 VR 和增强现实 AR 的会议软件 Spatial
类似的办公协作工具，在国外也广受欢迎，Zoom 的股价在一年内上涨了 600%，Google 也加快更新了 Workspace 办公效率套件。可见这些产品在未来将会取得进一步发展，创造出更为成熟的虚拟办公生态系统。
△ 远程协作已经成为工作中的一部分
△ Divan Raj 设计的远程会议应用
△ Dmitriy Kharaberyush 对远程会议系统 Zoom 进行了 Redesign
在设计领域，设计工具的协同性也是设计师们比较关注的话题，Sketch 的使用痛点便是协作的问题，尤其对于后疫情时代来说，人们意识到了在线协同办公的重要性后，Figma 便以它惊艳的协同能力成功出圈，备受青睐，也成为了 Facebook 设计师们的御用工具。
△ 适合 macOS Big Sur 系统的全新 Sketch
增强现实（AR）和虚拟现实（VR）技术早已悄悄进入我们的日常生活，AR 上妆、VR 看房不再新鲜。2020 年，由于新冠疫情的影响，虚拟现实重新进入大众视野，成为人们关注的重点。
△ 将 AR 技术融入线下实体书店
Facebook 对 VR 和 AR 也越来越重视，公司旗下也会推出 VR 旅行、三维艺术品创作、AR 室内设计和博物馆等应用程序，还有用于教育的 VR 游戏等。
△ 博物馆指南程序结合 AR 技术
尤其对于教育领域来说，虚拟现实技术所具备的仿真性、开放性和安全性的特点，不仅可以使学生在学习过程中身临其境，还能打破时空限制进行集中教学，同时能模拟各种情景，不必担心有安全隐患。
△ 直播课程 Unacademy Plus 提出应用 AR 技术的概念版
过去，人们一直认为虚拟现实仅是一项娱乐技术，比如手游 “阴阳师” 的 AR 召唤，使无数人想起当非酋的日子；大多数人首次接触 VR 技术，也是在商场里偶然尝试了类似 VR 大摆锤这样的游戏，然后被吓得连连尖叫（不是我）。如今，这项技术在各个领域的广泛应用才是我们要讨论的话题，其在医疗、教育和艺术领域实现的跨越式发展，成为必然趋势。
△ 阴阳师 AR 召唤阵图
相信在未来，将 AR 和 VR 技术融入更多的数字产品和服务，也会给设计师们的创作带来无限可能。
在现代工具和技术的帮助下，设计师的工作流程得到了大大的简化，智能化与生成式设计也成为一大趋势。各大软件开发公司也争相推出了一系列智能化工具组，以帮助打工人们更快速的完成工作任务（也有可能是在跟打工人们抢饭碗）。这些智能化工具组可以分析大量现有数据，找出其特性，然后根据所提供的数据生产新的特性。这些工具可以帮助我们：自动生成多种布局，选择视觉风格，生成演示模型、优化设计细节。
△ 设计团队关注效率，使用组件化的协作方式
Sketch 中添加了颜色变量和组件视图的新功能，使保持颜色一致性和使用组件变得更加容易。
值得思考的是，在技术越来越成熟和智能的现代社会，如何平衡所谓人工和智能呢？生成式设计不仅仅在帮助我们更的工作，另一方面，在未来也可能夺走本属于我们的工作，毕竟 “鹿班” 的出现一度使 “美工们” 陷入恐慌。但是作为未来的设计师，我们必须相信，机器可以通过数据来相互学习，但它们还远远不能独立思考，不能在美学、情感化等问题上与人类竞争，人类所需处理的问题，远比机器要复杂。
△ 鹿班智能设计平台
疫情期间，为了避免用手触碰电梯按键，我们看到很多电梯都放置了纸巾、牙签等物品，哪怕如今国内病毒有所控制，我们也已经习惯用钥匙来戳一戳电梯按键。此后，语音声控电梯在武汉防疫战线调试运行。
众所周知，科幻超英电影中，总会为我们展现未来世界的面貌，语音交互技术在此类电影中早已不是什么先进技术。早在 2014 年《超凡蜘蛛侠 2》上映之时，电影中就有个值得注意的小细节，女主角格温（私心：超英系列最爱女主）所在的科技公司奥斯本总部的电梯，就可以通过语音交互来说出自己要去的楼层，同时还可以和漂亮的人工智能小姐姐对话。
△ 电影《超凡蜘蛛侠 2》奥斯本科技公司总部电梯内场景
△ AI 驱动的智能语音助手
除了语音交互，你们的身边可能早早的就出现过体感交互的例子。例如微软为 X-box 360 推出的外设周边 Kinect，就采用了体感交互技术，操作者可以通过自己的肢体去控制系统，实现与游戏的互动。你只需站在大屏幕前，挥动手臂，即可完成一系列翻阅、确认等操作，回想一下，你有没有在商场里见过对着屏幕过疯狂切水果的熊孩子，体感交互技术正在慢慢跟上他们灵活的速度（年轻人不讲武德）。去年 8 月，苹果获得了一项专利，该专利显示或许有一天我们可以通过空中手势来控制 AirPods Pro。
△ X-box 360 推出的外设周边 Kinect
△ 体感交互助力 Apple watch，未来可能在表带中也植入肌电传感器
△ 硬件设备结合应用程序进行运动数据记录
综上，其实无论是语音交互还是体感交互，都不是新兴的科技了，毕竟我们和 Siri 的骂战都持续了好多年。但是相信到了 2021 年，伴随便捷、安全、无接触等后疫情时代的需求，无接触式交互会得到更多广泛的应用。
随着 C4D 的大热，3D 设计近几年一直活跃在大众视野中，目前大多应用在营销活动、数据可视化、游戏等需要表达空间感和氛围感的项目里，还没有大规模的应用在日常的线上产品中。
△ 使用 3D 风格设计的游戏网站
△ Slava Kornilov 设计的车载导航系统
当 2020 年苹果全球开发者大会发布了 macOS Big Sur 系统后，趋势又产生了新的改变，Big Sur 中应用了大量新拟态风格的 3D 效果图标。这一波操作必然是引起了大量争议，期间涌现出一批对这套图标进行优化的作品，拟物的热潮就这么被重新点燃，3D 技巧细腻而自然的表现方式必然会引起大量设计师的关注。
△ 3D 风格的苹果系统图标
△ Flu AR Fluent 仪表盘
△ 3D 空间展示数据
伴随着 VR 和 AR 技术的发展，2021 年 3D 风格会更加流行，无论是从操作性，还是视觉效果的角度，3D 风格都可以产生极大的突破。得物 APP 等线上商城纷纷开通了 AR 虚拟试鞋的功能，帮助用户在足不出户的情况下体验 “真实上脚” 的效果。
△ AR 试鞋的功能已经普及
△ 基于 AR 导航的线上商店
精彩的动画故事会吸引所有年龄段的用户，毕竟谁都年轻过，都喜欢充满奇幻元素和大胆想象的画面。在界面设计中加入动画元素，使简约的界面和有趣的动画相结合，不仅能吸引用户，还能增添互动时的新奇感。
△ 加载动画可以充分发挥创意
奇特好玩的界面动效和微交互已经不算 2021 年的新趋势了，但趣味动画的其他应用方式仍值得我们探讨。毕竟任何动态演示都能比静态图像或纯文本更能清晰有效的传达你的品牌故事，并让人轻松的看进去（尤其你可能是个“阅读障碍患者”）。
微软的设计团队常常用动画技术制作宣传片来展示公司的新产品，2020 年较为火爆的是关于 Fluent Design 的系列动画，下面这条经典作品传达了如何将 Fluent Design 引入到 Office 移动端软件中，且共享相同设计元素。动画演示巧妙的展现了新图标元素的构成，轻快的配乐配合图标们可爱的变形，可以单片循环一整天。
△ 将 Fluent Design 应用于移动端的动画宣传片
△ Fluent Design 宣传片的剧照，采用 3D 动画的元素
设计中的动画应该是有目的和有意义的，不仅要赏心悦目，也要能够解决问题或传达概念。动画最重要的目的是解释、简化和加速交互过程，让用户不经意间嘴角上扬。
2021 年，趣味的动画不仅仅是一种纯粹的装饰和娱乐，其在设计中的广泛应用将持续成为设计师们热议的话题，好玩的动画就在那里，看你怎么用了。
有一种工程量很大的设计趋势，其页面布局和交互操作都特别复杂，使用复杂的动画、渲染、插画，用创新的交互吸引用户进行互动，鼓励用户不断进行探索。这种风格常常被用在技术型或创意型产品的网站上，可以表现出科技感和独特感，体现出公司或团队的能力。
△ Nathan Riley 设计的概念网站未来反思
△ Berezhnoy Eugene 设计的数据星球
△ Senko Holographic 设计的网站首页，鼠标移动可与页面进行交互
采用这种趋势设计的网站并没有统一的风格，而是各有各的特色，每一个的交互形式都极其创新，因为制作成本较高，通常是针对品牌定制化，下面将推荐几个优质的网站，小伙伴们可以自己去试一试。
△ 设计师 Louis Ansa 个人作品网站
△ 3D 风格的苹果系统图标
△ Flu AR Fluent 仪表盘
△ 3D 空间展示数据
伴随着 VR 和 AR 技术的发展，2021 年 3D 风格会更加流行，无论是从操作性，还是视觉效果的角度，3D 风格都可以产生极大的突破。得物 APP 等线上商城纷纷开通了 AR 虚拟试鞋的功能，帮助用户在足不出户的情况下体验 “真实上脚” 的效果。
△ AR 试鞋的功能已经普及
△ 基于 AR 导航的线上商店
精彩的动画故事会吸引所有年龄段的用户，毕竟谁都年轻过，都喜欢充满奇幻元素和大胆想象的画面。在界面设计中加入动画元素，使简约的界面和有趣的动画相结合，不仅能吸引用户，还能增添互动时的新奇感。
△ 加载动画可以充分发挥创意
奇特好玩的界面动效和微交互已经不算 2021 年的新趋势了，但趣味动画的其他应用方式仍值得我们探讨。毕竟任何动态演示都能比静态图像或纯文本更能清晰有效的传达你的品牌故事，并让人轻松的看进去（尤其你可能是个“阅读障碍患者”）。
微软的设计团队常常用动画技术制作宣传片来展示公司的新产品，2020 年较为火爆的是关于 Fluent Design 的系列动画，下面这条经典作品传达了如何将 Fluent Design 引入到 Office 移动端软件中，且共享相同设计元素。动画演示巧妙的展现了新图标元素的构成，轻快的配乐配合图标们可爱的变形，可以单片循环一整天。
△ 将 Fluent Design 应用于移动端的动画宣传片
△ Fluent Design 宣传片的剧照，采用 3D 动画的元素
设计中的动画应该是有目的和有意义的，不仅要赏心悦目，也要能够解决问题或传达概念。动画最重要的目的是解释、简化和加速交互过程，让用户不经意间嘴角上扬。
2021 年，趣味的动画不仅仅是一种纯粹的装饰和娱乐，其在设计中的广泛应用将持续成为设计师们热议的话题，好玩的动画就在那里，看你怎么用了。
有一种工程量很大的设计趋势，其页面布局和交互操作都特别复杂，使用复杂的动画、渲染、插画，用创新的交互吸引用户进行互动，鼓励用户不断进行探索。这种风格常常被用在技术型或创意型产品的网站上，可以表现出科技感和独特感，体现出公司或团队的能力。
△ Nathan Riley 设计的概念网站未来反思
△ Berezhnoy Eugene 设计的数据星球
△ Senko Holographic 设计的网站首页，鼠标移动可与页面进行交互
采用这种趋势设计的网站并没有统一的风格，而是各有各的特色，每一个的交互形式都极其创新，因为制作成本较高，通常是针对品牌定制化，下面将推荐几个优质的网站，小伙伴们可以自己去试一试。
△ 设计师 Louis Ansa 个人作品网站
△ 注重设计与科技结合的团队 Letters
△ 科技公司官网 Farm
体验后你会发现这类网站的视觉效果大多很惊人，交互方式充满想象力。为了实现效果，团队会产出高质量高标准的设计、投入大量的研发成本。当然，成也萧何，败也萧何，特别的交互使页面逻辑与我们常用的网站大相径庭，吸引眼球的视觉使页面繁琐花哨，会导致信息难以顺利传递至用户。这违背了可用性原则和无障碍设计理念，如果想要使用这样的方式设计产品，一定要在创新和可用性中找到平衡点。
在这个新时代，社会发展十分迅速，整体节奏都很快，互联网产品的操作效率需要随之加快，用户体验的每一步流程都要仔细斟酌，是否还能再精简一些、再快捷一些，我们的目的是帮助用户更的完成目标，因此轻量化体验必然是永恒的课题。最明显的例子就是登陆功能的简化，从早期的账号密码，到后来的验证码登陆、第三方账号登陆、人脸识别登陆，用户已经不需要记住密码，也不需要一步一步的输入信息，一切都变得更加快速、更注重实用性。试想会不会有一天，人们一出生就得到一个永久账号呢。
△ Surja Sen Das Raj 设计的极简风 APP
不光是交互操作，界面的视觉风格也正朝着轻量化设计的方向前进，如果你一直在留意 Dribbble 热门作品，会发现大部分都具备简洁清爽的特点。极简的配色和核心功能的突出，可以帮助用户聚焦于重点信息；同时，我们可以结合信息层级的整合来降低用户的外在认知负荷，进一步减少用户的学习成本，使用户更容易集中注意力；不仅如此，我们还可以适当为核心元素添加一些微动效，使界面更具有温度感的传递操作反馈。
△ Akshay Devazya 设计的求职 APP，注重页面 Z 轴的空间感
△ Dmitriy Kazarov 设计的极简风官网
△ Choirul Syafril 设计的云存储后台界面
△ 可爱的微动效交互
随着科技的飞速发展，轻量化可能是未来各个行业产品设计的趋势。以游戏行业为例，从早期风靡的单机游戏到现在随时可以面对面开黑的手游，主流玩家渐渐将自己的游戏阵地转移到手机上，无论是画面精致度还是游戏流畅感，手游都可以提供优质的体验，今年火遍全球的游戏英雄联盟也发布了手游版本。还有一个轻量化的案例，就是我们的小程序，微信、支付宝、百度纷纷发布了自家的小程序，我们已经可以在一个 APP 里使用多家公司的产品功能了。
设计趋势是循环的。用户体验设计的新趋势每年都会推陈出新，但也有很多趋势，几年后又会卷土重来，这也是为什么复古总会成为一种潮流。设计是手段，不是目的。 比起紧随潮流，更重要的是理解趋势背后的价值和意义， 创造有价值的设计作品，趋势就会成为你的那阵东风。
文章来源：优设网 作者：TCC设计情报局
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
互联网下半场，所有的比拼都在产品体验；然而“体验”是一个非常抽象的词，我们怎么把一个抽象的概念拆解成可落地执行的策略，作用到企业中后台产品上，怎么衡量策略的有效性，这一直是我们团队面临的重大课题。
业界关于体验度量的经验
目前关于“体验度量”比较成熟的理论模型当属 Google 的 HEART 模型，另外还有 ISO 9126 软件质量模型和Davis 的 TAM 技术接受模型。后人在此基础上进行了很多实践，譬如 SAP 的用户体验问卷（UEQ）、Oracle 的客户体验价值公式（CX）等。公司内部各个 BU 也在不断的尝试和探索，譬如新零售技术团队的 TES 模型。技术团队研发效能的 DEVA 模型，国际 UED 语音设计的 HII 模型，阿里云的 QoUE 模型。纵观这些模型和实践，大多是主观数据和客观数据的结合。
我们团队也曾提出过 TECH 、PTECH 模型，但由于模型的操作门槛较高、对埋点数据有不少要求，难以推广到各条业务线。痛定思痛后，我们决定重新回归业务，回归“体验度量”的初心，去繁从简，提高通用性。
企业中后台产品的特点
企业级中后台产品最大的特点是任务性质非常明确；用户使用这类产品通常是为了解决某个确定的问题点，期待用新的解决方式降本增效。
桌面研究也表明：可用性问题是软件行业的普遍问题：在英国，一般商用计算机用户只有30%-40%的有效生产率；软件缺陷中，48%是可用性问题。
正是基于上述原因，我们尝试提出了“两章一分”的标准，分别从设计验收、可用性测试、易用度分数等三个维度对产品体验进行体检和把关。
什么是「两章一分」
1. 设计验收章
“设计验收章”主要有 3 个维度：产品还原度、任务流程跑通率、单页面加载时间。
产品还原度：指技术同学的最终产出与设计稿之间的差异；
汇总人工智能线、技术风险线等 5 个产品近 1 年的可用性测试结果。除功能、性能问题外，高频体验问题主要集中在“帮助引导”、“操作反馈”、“任务流程”、“概念术语”、“功能入口”这 5 个方面。同时，结合之前项目沉淀的设计经验和设计工具，我们最终将“产品还原度”的子维度定为“信息导航”、“帮助引导”、“操作反馈”、“文案名词”；每个子维度用 2-3 句描述来进行评分。
任务流程跑通率：验收确认能跑通的主干任务流程数，在所有主干任务流程数中的占比；举个例子，设计稿中枚举了 10 条主干任务流程，验收发现其中 9 条已跑通，那么任务流程跑通率就是 9/10*100%=90%。
单页面加载时间：接入雨燕性能指标数据的产品看“首次有效渲染时长 fmp”这个指标；未接入的产品直接主观判断，超过 3 秒的视为不合格。
2. 可用性测试章
“可用性测试章”也在验收阶段执行，同样有三个参评维度：最终完成率、人均求助次数和高阻碍页面。
我们没有考虑将可用性测试的常用指标——操作时长作为参评维度，主要原因是企业中后台产品类型多、使用场景复杂程度各自不同：用语雀创建企业空间只需要 5 分钟；用云凤蝶搭建一个后台页面可能需要 60 分钟，用 sofa stack 创建并发布一个应用可能需要 2-3 个小时……难以确定可以作为标准的具体操作时长。
3. 易用度分数
“易用度分数”标准为 5.5 分。
「两章一分」的实践
截至 2020 年 9 月，已有 58 个 产品实践过“两章一分”系列方法，基本覆盖平台设计团队支撑的重点项目及 UV 超过 100 的产品。详细数据如下图：
完整体验“两章一分”的 18 个产品，仅可用性测试就帮助发现 364 个问题，平均每个产品发现 20 个问题；其中，“九州2.0 发布部署”发现问题数多达 53 个。
设计验收：共创式验收
企业中后台产品生产阶段中，由于一般没有专门的测试同学，因此设计验收都是由设计师或 PD 单独执行，没有作为必选环节，有时候甚至会因为开发周期紧张而直接略过；既没有方法论，又缺乏仪式感。
“两章一分”的实践中，我们首次践行“共创式验收”，以项目组会议的方式，邀请各个角色共同参与到验收环节中：如果产品没有什么技术门槛，那么各个角色分别独立操作核心流程；如果产品有一定的技术门槛，则由技术同学操作核心流程，同时共享屏幕，其他同学从旁观察。操作完毕后，项目组内共同讨论发现的体验问题，并将问题落地到 Aone 中进行排期管理落地。
可用性测试：引入“技术支持”+圈定测试人数+ 线上测试降成本
企业中后台产品通常有一定的技术门槛，以 SOFAstack的测试任务为例：
使用 sofaboot 技术栈，创建 “hello world” 应用，通过“经典版”发布部署模式发布成功。
测试过程中经常会出现一些涉及到底层技术系统的问题，非设计同学能解决，因此我们建议做企业中后台产品的可用性测试时，需要配备至少一名技术支持同学，以备不时之需。
Jakob Nielsen 在 2000年提出测试 5 人就能发现 85%的可用性问题；结合我们的实际业务场景：有些产品真实客户非常难找；前期“共创式验收”已跑通核心主干流程；因此我们将测试人数限制为 3 人。
我们开始实操案例时，恰逢疫情期间，于是就引入了线上远程测试的方式；后续实践下来，发现远程测试能在观察、分析阶段显著降低执行成本。
通过钉钉或阿里郎发起视频会议，邀请参加测试和观察的同学入会，请测试用户共享操作屏幕，主持人录屏捕捉用户操作轨迹，PD、技术等项目组成员从旁观察。测试结束后，使用语音转文本工具，快速将音频转成文字。这种模式最大的好处有两点：
执行阶段的多样化
最开始提出“两章一分”的时候，我们原本希望这套标准能被作为判断产品体验是否好用，能否上线的标准之一；但实际并未推动成功。这里面有很多原因，其中一个非常实际的问题是很多产品需要调用线上数据库才能跑通核心流程，在测试阶段没法跑通；这就导致在测试阶段做可用性测试无法真实还原用户场景。
此外，设计师或 PD 新接手某款产品时，也希望能通过可用性测试的方式来快速了解产品问题。回归到“两章一分”的初心——帮助产品发现体验问题，因此，我们拓展了方法的执行阶段，不再局限于测试或验证阶段，只要场景适合，都可以用。
产品简介
LinkE 研发运维中心是云通未来 Serverless 战场的重要产品；业务方希望用该产品来整合研发同学日常高频使用的研发、运维、中间件平台，大幅减少平台割裂和跳转，提供沉浸式的产品体验。
目前该产品还处于 0-1 建设的阶段。
实践过程
结果用户在任务 2 遇到高阻碍页面，导致可用性测试结果为“不通过”，任务 2 的易用度分为仅 4.4 分，显著低于 5.5 分的参考标准；最终发现 30+ 问题点，并推动 PD 思考产品逻辑设置是否合理。
实践效果
在实践过程中，我们发现企业中后台产品的典型场景大致可以分为 4 个场景；不同场景面临的设计项目有所偏重；不同设计项目在体验度量方面的切入点也有所不同。譬如：云凤蝶是一个典型的沉浸式画布页面，所有操作几乎都是通过编辑器属性面板来调整，那么如何来评估编辑器的效率呢？通过一系列实践和思考，我们提出可以通过“高频属性查找、配置的步骤数和时间”、“设置相同组件属性的耗时变化”等指标进行衡量。以下是我们根据不同典型场景、设计项目提出的体验度量切入点。
「两章一分」的未来
经过 S1 长达几个月的探索：我们制定了“两章一分”的标准；对 30+ 产品进行了易用度分数的测试，捕捉分数基线；提炼实操方法技巧，并赋能给各位设计师；联合设计师和业务方跑通近 20 个案例。不管是问题发现数量，还是设计师、业务方的主观反馈，都让我们坚定“两章一分”在企业中后台产品体验优化中是一个相对有效的模式。为此，S2 我们打算继续深化。
我们团队当前支持的企业中后台产品以 0-1 阶段产品为主，PD 通常缺少用户意识和体验优化手段，这就导致了设计稿还原度较差、产品上手门槛较高。针对这一现状，我们尝试性地提出了“两章一分”这个评价标准，从设计验收、可用性测试、易用度分数 3 个维度来评价产品当前的体验现状。
通过 S1 50+ 产品的实操，我们一边不断完善评价标准和实操经验，一边总结体验度量经验；共帮助 18 个产品发现 364 个产品，并在 link 、sofa 等重点产品线中落地到业务生产环节中，在业务方层面收到良好反馈。
在这过程中，我们总结了适合不同场景、不同设计项目的体验度量切入点，验证了这种方式在当前企业中后台产品中确实有效。后续我们将尝试细化标准，闭环案例，对内对外发声等方式，更好地推动体验思维在企业中后台产品生根发芽；同时，也期待能跟对这块感兴趣的同行朋友们多多交流。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝 http://www.lanlanwork.com