“由理有剧”系列以”我们怎样理解暗黑模式“为开篇，缘由作者正在任职的工作是 TO B 产品交互及界面设计，入职时正值公司整体产品线升级迭代，用户界面从浅色模式向暗黑模式探索的阶段。这个探索阶段面临的本质问题便是“到底什么是暗黑模式”，同时“我们为什么要用暗黑模式”的问题也随之而来。
为了给公司同事阐述这两个问题，作者搜集了大量资料，翻阅了相关产品系统所给出的设计文档，重点围绕“什么是暗黑模式”展开，逐步推敲其中的理论原理，总结出便于理解的文字内容。这样做的目的简单有二，一是与产品、开发、测试方面的同事能够达成向暗黑模式优化升级的共识；二是能够让我们的各个产品线更从容地去拥抱暗黑模式的到来。
文章大纲
1、是什么？
2、为什么？
随着 iOS 13 和 Android 10 的正式发布，“暗黑模式 (Dark Mode)”一词逐渐走入了我们的视野，“暗黑模式是什么？”这个问题也一度霸占了Google搜索榜首。想要深入了解暗黑模式，也许我们可以换一个角度，从用户界面的演进历史中寻找线索，从而帮助我们更好地理解暗黑模式。
作者自从拜读了《苹果三剑客》，对于用户界面的前世今生才有了更深的了解，苹果的产品发展史，某种程度上也可以称为用户界面的演进史。废话不说，下面让我们一起简单聊聊。
计算机诞生的早期，其显示器一直以“暗黑模式”面向操作者，其缘由是早期的显示技术一直被CRT主导，CRT释义为“阴极射线显像管”，在19世纪末被研制出来，因为制造原理相对简单，所以CRT一直是早期电脑显示的主力，但在上世纪80年代之前仅支持单色显示。
下面两图分别为苹果公司于1977至1980年间生产发售的 Apple II 及 Apple III 型计算机
图中显而易见，两款计算机的显示方式均为单调的黑底白字或绿字，呈现出一种“暗黑模式”的视觉效果。苹果公司的 Apple II 和 Apple III 两支产品线一直以这种“暗黑模式”面向用户。这也反映了早期的计算机以输入代码执行数字运算作为主要功能，但是这从另一方面反应出：未来计算机会借助不断成长、成熟的电子技术，必将掀起一场接一场的变革，用户界面也随之不断地革新。
上个世纪80年代之后，CRT彩色显示技术成熟，逐渐流行普及到各个电子行业，但当时主流的计算机操作系统并没有“图形界面”这个概念，所以大部分计算机产品依旧延续了先前黑色背景的显示方式。
直到1983年1月9日，在年度股东大会上，苹果宣布了两款将在未来的计算机行业中占据关键地位的产品：一款叫 Apple Lisa （丽萨，老乔的第一个女儿），苹果第一台（也是全球第一款）基于图形用户界面（GUI）的计算机，也就是 Macintosh 的前身；另一台叫 Apple IIe ，是已获高度成功的 Apple II 系列的新一代进阶产品。
Apple Lisa 向主流个人电脑行业介绍了一种全新的鼠标控制的图形用户界面，宣布向单调的黑白用户界面告别。
运用形象的图标、方便的下拉菜单和重叠的窗口，替代了此前一贯使用的输入文字命令，Lisa的图形用户界面开启了消费者与个人电脑交互方式的革新之路。尽管Lisa存在诸多缺点，如定价过高，功能缺失、运行缓慢等，但它的图形用户界面依然给它赢得一阵喝彩。
Lisa的GUI影响如此深远，以至于诸多电脑制造商纷纷加入鼠标控制的GUI领域，争相模仿。就在Lisa首次亮相十个月后，微软于1983年11月推出了Windows操作环境。（对于此事，老乔总是公开谴责微软的盖茨抄袭他的产品创意，甚至想让盖茨吃官司，两位大佬一直不合也是业界皆知，跑题了...）
///一个有意思的事儿：今年7月份，一位外国的苹果粉在Twitter上发布了一条关于 Apple IIe 型计算机的动态，内容展示了自己使用 Apple IIe 型计算机进行智能化任务的过程，如发送推文、在Evernote中写作、发送电子邮件，甚至控制智能家居（如下图）。要知道，这台计算机生产发售至今已有37年的时间。由此感叹，不得不说苹果对于产品的品控做到了那个时代的。
1984年，苹果发布了个人计算机 Macintosh（麦金塔），Macintosh 延续了 Lisa 的图形界面语言，并向世界普及了图形用户界面（Graphic User Interface）的概念，从而开启了以白色为底色的图形交互时代。
Lisa获得的一些成就在 Macintosh 上体现的淋漓尽致，包括灵活的鼠标、点阵影像图、桌面的布局、形象的图标、相称的字体、屏幕上方的下拉菜单和重叠的窗口，这些也得益于日益成熟的显示技术和不断进步的计算处理技术。形象生动的图形设计和界面交互一直是老乔最引以为傲的杰作，不得不说，老乔对于计算机行业甚至是设计行业都有着极高的敏感度和先于旁人的前瞻性。（当然，这里的主语应该是苹果）
Macintosh 产品的成功，不是苹果一味地迎合计算机消费市场，而是利用创新的方式引导市场，引领计算机行业向人性化的用户界面发展、迈进。
至此，我们也彻底地向“暗黑模式”说了再见，全面拥抱“浅色模式”的到来。
麦金塔搭载的 System 1 打破了字符终端的模式，浅色的界面风格一直持续到 System 6 都没有显著的改变。直到1991 年的 System 7 开始引入彩色，图标也增加了隐约的灰色，蓝色和黄色阴影。System 7 系列中的 7.6 版本正式被苹果公司改名为 Mac OS ，而这一年是1997年。
与此同时，微软的 Windows 从黑屏的 DOS 发展到全屏幕的 Windows 1，再到较为成熟的 Windows 3，最后演变到奠定当今 Windows 界面基础的炫丽多彩的 Windows 95。用那个时代的眼光来看，微软的变化是相当惊人的，微软俨然成为了一匹计算机行业的黑马，一路赶超苹果成为行业霸主，而苹果因为因循守旧，在界面设计上从领先掉到了最后。
此后，从 Mac OS 8 到 Mac OS X Server 1.0 ，苹果一直专注于改善操作系统和优化界面表现，直到2001 年 3 月，经历了四个开发者预览版和一个公共测试版之后的 Aqua 界面终于跟随 10.0 正式发布，发布后改变了人们对计算机界面的印象，在随后的10年里苹果一直沿用这套界面风格。
OS X 系列用户界面较大的更新来自于2007年10月发布的 10.5 Leopard 豹，虽然基本的界面仍为 Aqua 和其糖果滚动条，但新加入了一些铂灰色和蓝色，另外重新设计的 3D Dock和更多的动画交互使得新界面看上去 3D效果更强，此外还改进了 Finder、半透明菜单条并新增了最初只用于 iTunes 的 Cover Flow界面。
整体来说，Mac OS X 10.5 Leopard 豹 这一版本的用户界面相比之前有了翻天覆地的变化，灵活生动的图形语言和交互体验重新得到了用户青睐，苹果也以此，再一次走上了引领潮流之路，使得多彩的“浅色模式”成为用户交互界面的主流。
苹果开创性的界面图形语言也延续到了移动设备领域。
2007年的初代iPhone作为苹果公司第一个移动设备产品（iPhone1代）首次亮相市场，惊艳了整个行业，iPhone搭载的 iPhone OS 和后来更名为 iOS 的系统，延续了 Mac OS 用户界面的设计语言。在历代iPhone上可以看到没有物理键盘侵占空间的屏幕，精美的的方块图案整齐的排列开来，颜色丰富且耐看。
依稀记得当时的我们，还玩着黑白屏幕上的俄罗斯方块，还敲打着物理键盘上的九宫格，挪鸡鸭也表示永不为奴。
2010年堪称iPhone史上最重要的一年，苹果推出了“改变一切”的iPhone 4，并对其用户界面进行了革新。
生动的拟物化设计风格正式成为业界潮流，这也使得UI行业逐渐热了起来，苹果的界面设计规范也顺势成为了主流的移动端设计规范。
苹果以此作为移动端界面设计的基础，沿用到之后的iPhone系列中，期间iOS系统的风格保持依旧，只有 iPhone 5S 搭载的 iOS 7 做出了图标由拟物化向扁平化的改变，但整体都以“浅色模式”作为主流的用户界面视觉模式。
在 Mac OS 的系统上，用户可以通过“通用设置-外观”来对整体界面进行浅色、深色的切换，可以看出，苹果早已把“暗黑模式”纳入到他们的开发队列中，也就是说，“暗黑模式”的概念主要来源于苹果的 Mac OS，这也为“暗黑模式”的正式登场埋下了伏笔。
自从有了这个概念之后，很多网站都为用户提供了“浅色”和“深色”两套界面，便于用户根据自己的习惯或爱好进行切换。在 Mac OS 之后，很多 App 和 Android 定制 ROM 也加入了所谓“深色模式”的支持，其中也不乏 Web 端的网站、系统等。
北京时间2019年6月4日，果粉期待已久的苹果WWDC19如期而至。
发布会上，库克一如既往地优先调侃了Andriod系统一番….（苹果一直喜欢用数据说话，想了解的同学可以回顾一下发布会的视频）
言归正传，在发布了一系列硬件之后，库克终于介绍了大家期待已久的 iOS 13。新发布的 iOS 13，除了提升系统流畅度和增加系统稳定性外，还介绍了其他提升用户体验的优化。
其中，最为引人注目的“暗黑模式”即将亮相于新系统。
发布会表示，暗黑模式可以“改善电池寿命，改善视力不佳和强光下的人的可视性，以及在弱光环境中更好地使用设备”。
“Wow，beautiful！”、“That’s beautiful！”、“That’s so beautiful！”发布会的主持人一边演示使用在暗黑模式下的App应用，一边不由自主地发出赞美。这也许也受到了老乔的影响，犹如在剧场舞台中心的话剧演员，有着一种无可比拟的自信和气场。
但有意思的一点是，主持人展示了 iOS 13 暗黑模式的开发团队合照，从极客穿着到赛博朋克式的暗黑摇滚装扮，这一戏剧性的变化似乎在告诉大家：“玩，我们也是认真的。”
发布会上简单演示了暗黑模式下的漂亮界面，虽然没有过多地阐述暗黑模式的开发细节，但是这标志着暗黑模式“重新”登上历史舞台。
我们从苹果产品发展史中，不难发现苹果对于用户体验的理解是具有创造性的，总是能先于用户发现用户的潜在需求。苹果产品的发展史也可以称之为用户界面的演进史，从早期黑色背景的计算机桌面发展到以浅色为主的用户界面，再到 iOS 13 正式发布的“暗黑模式”，这一过程貌似是在“返祖”，但这些始终是围绕以用户体验为中心的改变和突破。
“暗黑模式”是什么？抛开技术理论，简单理解就是降低用户界面在设备上的亮度，以深色的背景、较低的对比度、灰阶的色彩来呈现用户界面，提升用户使用产品的体验。
上面我们提到了，根据 Apple 官方的说法，暗黑模式可以“改善电池寿命，改善视力不佳和强光下的人的可视性，以及在弱光环境中更好地使用设备”。
我们可以围绕这个说法，结合我们与设备、环境的关系进行探讨。
随着人们对智能设备的依赖性越来越强，设备使用的时间也高频覆盖了白天到黑夜，夜晚使用的频率更是与日俱增，所以暗光环境的使用需求被实实在在地摆到了台面上。以设计职业为例，在阿里巴巴 UCAN 2019 设计大会上分享的数据结果显示：设计师群体夜晚的工作时间通常在5-6个小时…
不是在加班就是在加班路上的我们更习惯于在夜间工作，夜间安静的环境更能让我们专注设计、灵感爆棚。但这也在另一方面表达了我们需要设备更加符合我们在弱光环境下的视听需求。
Dark Mode 由此应运而生，使用暗色模式可以缩小屏幕显示内容与环境光强度的差距，可以保证使用者在暗光环境下使用设备的舒适度。也就是说 Dark Mode 可以降低屏幕的整体视觉亮度，降低对眼睛的视觉压力，再也不用怕夜晚的设备屏幕刺瞎我们的双眼了。
但这里我们要理解一个概念，“降低对眼睛的视觉压力”并不等同于所谓的“护眼”，夜晚使用暗黑模式的设备，实际上并没有改变屏幕的“频闪”问题，所以说用户看屏幕的时候依旧会有视觉疲劳的症状，所以各位大佬还是晚上少看屏幕，多爱护眼睛吧。
想象一下，我们在电影院看电影时，为什么要全场关灯？
甚至有些APP， 在影片的下方也会有一个模拟关灯效果的按钮，来让整个手机屏幕变黑， 只剩下视频画面的部分，这都帮助我们可以更专注、更沉浸在当前的内容下，也就是所谓的“沉浸感”。
这其中的原理就是色彩本身是具有层级关系的，深色会在视觉感官上自动后退，浅色部分则会向前延展，这样对比强烈的层次关系可以让用户更注重被凸显出来的内容和交互操作；尤其在信息负责界面内层级关系的合理拉开对操作效率都有明显的促进作用。
这一点在股票交易软件上就是最好的验证，目前来看全世界绝大多数的股票软件采用的都是负极性，也就是暗色底的设计方式。红色和绿色代表的涨或跌（不同国家颜色表示可能不一样）在这样的深色背景下就会特别显眼，还有一些颜色比如蓝色用于某些数据的走势图。这样的显示帮助用户更好地集中精力在数据获取上，更快地做出决策。
这里所提到的消费品味是来自用户层面的潜在心理需求。
从心理学角度而言，颜色可以影响观者的感受和情绪，这直接影响到用户对于一个事物的判断和选择，这就像我们消费购物一般，有时候我们的消费不完全是为功能、实用性买单，而更加看重的是一个产品的外观属性，当产品的外观符合我们的消费审美甚至超越预期时，我们往往会更快地做出消费选择。
而黑色在积极层面的外在直观表现为高贵、庄严、镇定、神秘，这代表着黑色相比其他颜色存在着更多的可能性，这也造就了黑色成为百搭色，可以作为其他颜色的底色、陪衬色进行使用。暗黑模式也存在同样的心理暗示，沉稳、神秘的黑色会让用户联想到产品的稳定和高级，提升用户的心理信任度，迎合用户的消费品味。
最后才探讨耗电功效方面的问题，算是一个压轴问题了，在某种程度上说，智能移动设备目前最大的矛盾是性能与电池功效的博弈。如果去微博等社交网站进行搜索可以发现，为了省电而使用深色主题或者说黑暗模式的用户大有人在，尤其是一些中高端采用 OLED 屏幕的手机。这是为什么？
暗黑模式省电的作用来源于 OLED 这种材质的特性，这种屏幕经过多年发展如今已经取代了 LCD 在中高端手机上的地位。和 LCD 依赖于背光不同，OLED 自发光的特性使得屏幕能够独立控制单个像素是否发光，也就是说画面越黑，采用 OLED 屏幕的手机就越省电。下图做了一个简单的理解示例，每一列的格子代表亮度，在不同亮度下有相对应的耗电量显示，闪电的亮度代表耗电量的多少。
理解了简单含义，我们再来看一下Notebookcheck上对于OLED功耗的专业研究数据。在使用 OLED 屏幕时，屏幕上显示的内容决定了功耗。当屏幕基本全黑时（OLED <1% White），OLED 屏在任何亮度下的功耗都保持恒定。显示了白色内容的屏幕，功耗曲线会随着亮度提高而逐渐变陡。
上面的可视化图表相对来说可能需要一定的理解时间，让我们翻译简化一下。
上图显而易见，OLED屏幕的耗电量不仅受到亮度高低的影响，关键在于在OLED屏幕显示了什么，有多少区域是浅色甚至是白色的，有多少区域是深色甚至黑色的，深色区域占比越高，相比较之下OLED屏幕也就越省电。这也就证明：OLED屏幕在使用以深色为主的显示模式时，能够降低耗电量，提升供电效率，也就是改善电池寿命。
///题外话：关于为什么我们的智能设备普遍采用OLED屏幕，可以参考Notebookcheck（文本链接），小伙伴们可以自行研究。
文章来源：站酷 作者：强强0075
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
之前，我们已经将「复杂应用程序」定义：为支持广泛的、非结构化的目标或专业领域用户的非线性工作流的任何应用程序。复杂应用程序在其支持的工作流程和最终用户的类型上当然有所不同（比如从科学家到军事专业人员再到金融分析师），但是复杂的应用程序通常具有相似的品质。
例如，复杂的应用程序经常出现：
（1）以专业知识为专业用户提供支持；
（2）帮助用户浏览和管理大型基础数据，并启用高级感官分析或数据分析；
（3）通过未知或可变的基础任务支持问题的解决或达成最终目标；
（4）需要在多个角色，工具或平台之间进行切换或协作；
（5）减轻执行中高影响力（或高价值）任务的风险，因为在高风险情况下，高额损失（例如收入甚至生命）会受到威胁。
尽管差异很大，但所有复杂的应用程序都面临许多相同的挑战，无论是创建这些复杂应用程序的从业人员，还是依赖于它们进行工作的最终用户。
考虑到设计人员和研究人员在处理这些应用程序时面临的共同挑战，本文概述了8条复杂应用程序设计准则：
研究表明，当引入一个应用程序或系统后，用户更喜欢立即开始使用它，而不受其复杂程度的限制。相较于花费大量时间学习使用教程、文档或其他类型的帮助或设置内容，用户更有动力开始他们的任务。（这种现象被称为活跃用户的悖论。）虽然在任务或安全关键领域中仅依靠试错学习来进行应用是危险且不适当的，但一定程度的边做边学永远是必需的，因为在培训课程或手册中不可能涵盖一个系统的所有使用。
支持用户立即开始探索界面这一偏好，允许他们通过尝试和错误来学习界面，而不会导致工作损失或不可弥补的损害。
例如，限制了用户执行长时间操作的能力，而看不到这些操作的结果。实时仪表板建构支持这一原理，其中仪表板元素预览在建构时会实时更新。用户不必等到任务结束就可以查看其操作结果是否符合其意图。
在大多数情况下，即使是复杂应用程序的用户也往往会处于中等水平。换句话说，大多数用户在自己的设备上使用系统时，并没有过渡到真正的专家使用水平。许多用户会感到满足，这意味着他们将继续使用满意的（通常是低效的）方式来完成任务，而不是花费时间为他们的工作流程寻找最佳解决方案。随着时间的推移，这种行为将导致难以置信的生产力断层，因为用户将花费数年甚至数十年的时间，以低效的方式日复一日地使用同一个系统。
通过为用户的工作寻找通俗易懂的沟通方式和更有效的方法，帮助他们转变为使用更有效的方法并打破其根深蒂固的行为模式。
例如，与其仅仅依靠冗长的教程或手册（甚至是写得很好的），还不如在整个应用程序中嵌入加速器或附加功能的上下文学习线索。上下文学习提示是仅在当前任务的上下文中提供给用户的提示。当用户将鼠标悬停在工具栏菜单项上时，提示一种更快完成任务的方法的工具提示支持这一原则。
复杂应用程序的用户通常在非线性工作流中执行广泛的非结构化目标。对于这些工作流程，用户可能不知道他们的确切最终目标，而是需要分析数据以寻找答案。即使存在一个制定良好的最终目标，用户通常也不会遵循一组已知的、顺序的子任务来实现它。但是，出于必要，该系统必须具有某种结构：与用户交互的物理界面以及随着时间推移完成的某种线性过程。
死板、线性的工作流强迫用户从开始到结束完成一组操作，没有退路或顺序上的灵活性。通过避免这种死板的工作流，允许用户在任务序列中具有灵活性。
例如，提供方法允许跳过前面的步骤，回溯前面的步骤，以及从任何步骤流畅地移动到任何其他步骤。再比如，面包屑中灵活的交互式序列图使用户可以返回之前的步骤，而不会丢失进度。
复杂应用程序用户经常面临漫长的等待，工作也经常被打断。例如，复杂的数据分析可能需要花费数小时甚至数天的时间，而大多数复杂应用程序用户所面临的高复杂性的环境可能会导致其工作意外中断。即使没有计划外的中断，为实现目标而执行的子任务的复杂性和可变性也要求用户在任务执行过程中将大量信息保存在工作存储器中，而这些信息很容易在他们改变方向时丢失。
通过允许用户在工作期间记录他们的行动和思维过程，减轻工作记忆负担，并帮助用户在工作流中断或中断后恢复任务。
允许用户添加和存储有关特定数据、图表或其他元素的开放式注释是支持此原理的一种方法。例如，在复杂的数据建模或分析期间，用户输入的注释可以在稍后时刻提醒用户创建模型的原因，以及他们创建模型时试图回答的问题。
复杂应用程序用户通常跨多个工具和多个工作区工作。即使用户大部分工作主要依赖于一个专用应用程序，他们仍会出于多种原因而频繁切换应用程序。例如，当主要软件不支持该操作时，可以从在线数据库中收集数据，查找和参考文章或其他外部文档，或者在其他应用程序中做自己的注释和评论。即使是在主应用程序中，存在软件附加组件或其他启用应用程序中各种专门功能的可选软件包，用户也可能在不同的环境或工作空间之间转换。
通过支持从一个环境转换到另一个环境（包括主应用程序内部和外部），减少工具切换的负担。
减少工具切换负担的一种方法是简单地接受这个生态系统，并在主要应用程序和经常使用的第三方工具之间设计连接点。例如，复杂的工作通常需要协作和报告。将数据集导出到Excel或将图像导出到PowerPoint的内置功能，使用户在试图编译报告和演示文稿时节省宝贵的时间，否则将花费在转换数据或屏幕快照图像上。
复杂的应用程序通常旨在适应广泛的用途。例如，环境机构用来测量和跟踪蜜蜂生产的分析监测软件也可能被汽车公司用来监测机器故障。使用场景的多样性一方面使复杂的应用程序非常强大，但另一方面又常常非常混乱。此外，复杂的应用程序通常必须同时支持新手和专家用户，并且专家用户可能需要新手用户很少访问的高级功能。
通过在不降低应用程序功能的情况下，地减少界面内混乱的外观，帮助用户管理在复杂应用程序中普遍存在的选择、特性和功能过载问题。
分阶段公开是一种减少混乱的方法，仅在选项与手头任务或重点项目相关时才向用户显示选项。例如，只有在复杂表单或向导中选中相关字段后才显示高级参数或设置，这就是与复杂应用程序相关的分阶段公开的一个例子。
即使在界面中有效地减少了混乱，也不是所有的元素和信息都能（或应该）一次显示出来。有些信息必须放到二级层次；然而，次要信息通常是必要的，以作为有关主要层次的信息的决定的上下文参考。
通过允许用户在不离开主屏幕或环境的情况下访问和查看补充信息，简化主信息和辅助信息之间的转换，并帮助用户将主信息置于上下文中。
仪表板通常支持此原理，例如，当用户将鼠标悬停在图表或图形中的特定点上时，它允许用户在工具提示中查看更的定量数据。
复杂应用程序用户执行的许多任务需要高度的视觉搜索。举几个例子：用户可能需要在巨大表格中的表格视图中查找和区分相关数据。系统警报必须引起用户对界面相关部分的注意，以便用户可以及时注意到并纠正潜在情况。在仪表板上简单地查看和理解数据可视化也有一个重要的可视化搜索组件。在复杂的应用程序中，大量竞争信息和元素可能会阻碍这些任务。
通过在视觉上突出关键元素（例如，让它们从周围元素中脱颖而出），帮助用户找到重要信息并对其采取行动。值得注意的是，突出重要信息并不总是意味着要强调这些信息（例如，明亮的颜色或加重字体粗细）。去掉不必要的元素可以同样、甚至更有效地使重要信息在视觉上显得突出。
例如，删除无用的多余图形或视觉元素可以让留下的数据脱颖而出。仪表板模块从数据元素中消除了不明显的、难以理解的插图，从而减轻试图在仪表板上定位数据的用户的视觉搜索负担，支持这一原则。
复杂的应用程序是多种多样的，支持各种用户类型和工作流；然而，类似的挑战存在于各种领域的复杂应用程序中。遵循这8条设计准则优化复杂的应用程序：
1. 边做边学
2. 帮助用户采用更有效的方法来完成任务
3. 提供灵活而流畅的途径
4. 帮助用户跟踪动作和思考过程
5. 协调多个工具和工作空间之间的转换
6. 减少混乱而不降低能力
7. 简化主要和次要信息之间的转换
8. 视觉上突出重要信息
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
不知道大家有没有听过这么一个故事：某家餐厅销量一直不太好，老板究其原因也没有查明白到底是为啥，明明选址在闹市区，价格也很实惠，就是卖不出去；后来老板请了个“大师”帮忙一探究竟，大师说你家盘子颜色不行，换成橙色保准牛X；老板立马认购了一批橙色盘子，从那以后以后这家餐厅火爆了，王境泽都觉着香的不行…
听完这个故事，自此我幼小的心灵里把橙色和食欲划了等号。这个烙印直到我从业前几年还一直这么觉着。同时间段，在9年义务教育的美术课本上，我得到了有生以来第一次对色彩这门学问的细致输入，了解到了各种颜色对应的含义与情绪：
这种色彩与情绪的映射关系在我的脑袋里根深蒂固 / 无法磨灭，直到有那么一场面试或者汇报，面试官/老板问我，“为什么你要选择这个颜色作为品牌色呢？”
面对着一手塑造出来的社交应用，我解释到：“因为红色代表着热闹，这个颜色会赋予这款产品热闹的氛围”。坦诚的讲，这个解释自信但空洞，颜色本身并无好坏和指向，只看你用在了什么地方，不讲究场景就别轻易定性。
这也侧面反映出来惯性思维的不断吞噬着你我的思路，过往的“经验”可以让人习以为常，也可以让人尴尬不已，取决于是否洞察的到。如果抛弃惯性思维，到底如何去定义一款产品的主色呢？
说实话选取一个颜色作为品牌色是一个战略决策过程，一般来说行业里一定存在一种主流颜色，像旅游行业的携程/去哪儿和途牛，还有以淘宝为代表的电商行业通常是喜庆的大红大橙。
显而易见基于这个逻辑下，有3个做法，一条路是顺势而为，一条是逆向而去，还有一条是另辟蹊径。这块的选择一定程度上并不是设计师可以决定的，需要结合整个业务的方向去判断；在旅游行业里马蜂窝选择了逆向而去，在直播行业里抖音就选择了另辟蹊径。
我们试着揣测下抖音和马蜂窝的想法，在产品的定位和策略的打法上，他们更注重的是差异化，走反方向的路突出品牌，试图在用户的心里站得住。通过这个例子你或许会发现，黑色未必死气沉沉，ta也可以色彩斑斓；黄色未必只象征尊贵，ta也可以代表青春和希望；颜色没有偏向，只看使用在什么场景上。
主色的选择更需要贴合业务战略的发展，也更多的偏向于主观。给业务提供思路和方向，判断不好业务方向的时候，多提供思路帮助其更好的匹配颜色。
以往的面试里，我这种好事的面试官就特别喜欢问侯选人一个问题：“一个色相里有那么多色号，为什么你定了这个色号作为品牌色？”大部分候选人乍一听都是面露难色，心里大概想着这人是个傻X吧，能问这种问题，哈哈哈哈哈哈；废话不多说，我来简单分享下我的方法：
首先以黑白两色（#000000-#FFFFFF）作为起始点设置10个梯度，然后把第一个模块定义的色相扔进去，只需要调整HSB中的H就可以，这样一顿操作下来你就得到了一个完整的色彩序列：
第二步，基于序列主观调整下颜色，确定主色的同时确保其在黑白2种背景上对比度大于4.5：1（wcag色彩可用性标准），理论上来讲梯度中间是最合适的，饱和和亮度足够就可以。
上图是我用到的色彩可用性测试工具-color review（https://color.review/）
当你准备好了以上所有工作，最后一步就是拓展色系了；这里采用负能量补给站小商店的品牌色“叛逆橙” #FF774A（H15 S71 B100） 作为主色并结合下google的方法开始拓展色系。
首先 - 确认同色系辅助色：我们将主色的色相加减 30° （谷歌是以10为梯度，但色相变化不大，为了效果我们以3倍作为最小单位）获得2个新颜色，即同色系辅助色。
其次 - 确认对比色辅助色，将主色的色相加上 180° 获得其互补色，即对比色系辅助色。为了和主色的类似色对应，取互补色的同类色（色相加减 15°）和类似色（色相加减 30°）。从中选取需要的颜色作为最终的对比色系辅助色。
根据色彩需求取同类色2和类似色1作为最终的对比色系辅助色，这样，我们得到了主色和四个辅助色；同理你可以推理出无色彩倾向的中性色系（这里就不展开赘述）。
最后你可以通过编码的方式，赋予每个颜色一个token（密钥），方便团队的配合和使用。
以上就是我在选取色彩的大概思路，市面上也有很多讲颜色的好文，分享大家去找找。
随着工作经验/时长的不多增加，我们往往会对事物的存在习以为常，思维的惯性会困住我们追根溯源的想法，但需求和场景是千变万化的，所有的方法也都针对的是通用场景，标准化的解决方案未必适用你当下的处境；试着在熟悉的环境用敏锐的洞察和科学的方法突围也许是最好的办法。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
也不知道从什么时候开始，我们给颜色定了性
不知道大家有没有听过这么一个故事：某家餐厅销量一直不太好，老板究其原因也没有查明白到底是为啥，明明选址在闹市区，价格也很实惠，就是卖不出去；后来老板请了个“大师”帮忙一探究竟，大师说你家盘子颜色不行，换成橙色保准牛X；老板立马认购了一批橙色盘子，从那以后以后这家餐厅火爆了，王境泽都觉着香的不行…
听完这个故事，自此我幼小的心灵里把橙色和食欲划了等号。这个烙印直到我从业前几年还一直这么觉着。同时间段，在9年义务教育的美术课本上，我得到了有生以来第一次对色彩这门学问的细致输入，了解到了各种颜色对应的含义与情绪：
这种色彩与情绪的映射关系在我的脑袋里根深蒂固 / 无法磨灭，直到有那么一场面试或者汇报，面试官/老板问我，“为什么你要选择这个颜色作为品牌色呢？”
面对着一手塑造出来的社交应用，我解释到：“因为红色代表着热闹，这个颜色会赋予这款产品热闹的氛围”。坦诚的讲，这个解释自信但空洞，颜色本身并无好坏和指向，只看你用在了什么地方，不讲究场景就别轻易定性。
这也侧面反映出来惯性思维的不断吞噬着你我的思路，过往的“经验”可以让人习以为常，也可以让人尴尬不已，取决于是否洞察的到。如果抛弃惯性思维，到底如何去定义一款产品的主色呢？
说实话选取一个颜色作为品牌色是一个战略决策过程，一般来说行业里一定存在一种主流颜色，像旅游行业的携程/去哪儿和途牛，还有以淘宝为代表的电商行业通常是喜庆的大红大橙。
显而易见基于这个逻辑下，有3个做法，一条路是顺势而为，一条是逆向而去，还有一条是另辟蹊径。这块的选择一定程度上并不是设计师可以决定的，需要结合整个业务的方向去判断；在旅游行业里马蜂窝选择了逆向而去，在直播行业里抖音就选择了另辟蹊径。
我们试着揣测下抖音和马蜂窝的想法，在产品的定位和策略的打法上，他们更注重的是差异化，走反方向的路突出品牌，试图在用户的心里站得住。通过这个例子你或许会发现，黑色未必死气沉沉，ta也可以色彩斑斓；黄色未必只象征尊贵，ta也可以代表青春和希望；颜色没有偏向，只看使用在什么场景上。
主色的选择更需要贴合业务战略的发展，也更多的偏向于主观。给业务提供思路和方向，判断不好业务方向的时候，多提供思路帮助其更好的匹配颜色。
以往的面试里，我这种好事的面试官就特别喜欢问侯选人一个问题：“一个色相里有那么多色号，为什么你定了这个色号作为品牌色？”大部分候选人乍一听都是面露难色，心里大概想着这人是个傻X吧，能问这种问题，哈哈哈哈哈哈；废话不多说，我来简单分享下我的方法：
首先以黑白两色（#000000-#FFFFFF）作为起始点设置10个梯度，然后把第一个模块定义的色相扔进去，只需要调整HSB中的H就可以，这样一顿操作下来你就得到了一个完整的色彩序列：
第二步，基于序列主观调整下颜色，确定主色的同时确保其在黑白2种背景上对比度大于4.5：1（wcag色彩可用性标准），理论上来讲梯度中间是最合适的，饱和和亮度足够就可以。
上图是我用到的色彩可用性测试工具-color review（https://color.review/）
当你准备好了以上所有工作，最后一步就是拓展色系了；这里采用负能量补给站小商店的品牌色“叛逆橙” #FF774A（H15 S71 B100） 作为主色并结合下google的方法开始拓展色系。
首先 - 确认同色系辅助色：我们将主色的色相加减 30° （谷歌是以10为梯度，但色相变化不大，为了效果我们以3倍作为最小单位）获得2个新颜色，即同色系辅助色。
其次 - 确认对比色辅助色，将主色的色相加上 180° 获得其互补色，即对比色系辅助色。为了和主色的类似色对应，取互补色的同类色（色相加减 15°）和类似色（色相加减 30°）。从中选取需要的颜色作为最终的对比色系辅助色。
根据色彩需求取同类色2和类似色1作为最终的对比色系辅助色，这样，我们得到了主色和四个辅助色；同理你可以推理出无色彩倾向的中性色系（这里就不展开赘述）。
最后你可以通过编码的方式，赋予每个颜色一个token（密钥），方便团队的配合和使用。
以上就是我在选取色彩的大概思路，市面上也有很多讲颜色的好文，分享大家一波：
Ant Design 色板生成算法演进之路 - https://zhuanlan.zhihu.com/p/32422584
设计系统色彩 -https://uxplanet.org/designing-systematic-colors-b5d2605b15c
随着工作经验/时长的不多增加，我们往往会对事物的存在习以为常，思维的惯性会困住我们追根溯源的想法，但需求和场景是千变万化的，所有的方法也都针对的是通用场景，标准化的解决方案未必适用你当下的处境；试着在熟悉的环境用敏锐的洞察和科学的方法突围也许是最好的办法。
但需求和场景千变万化，实际操作不能那么程式化，最终还是要回归到具体使用场景去定义，文章里面的规则和公式只是指导，在必要的时候可以打破。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
或这样：在优先考虑所有功能之后，关键利益相关者改变了主意，您必须重新计划所有事情。两种情况都发生在我的团队和同事身上。
功能优先级的成功或失败是因为一件小事，在这里最终处决答案之前，我不会让您感到疑惑。关键因素是选择标准。但是首先是第一件事。让我们看看可能出什么问题，然后我们将讨论减轻这些风险的方法。
产品团队努力做出正确的权衡，并在资源有限的情况下嫁入无数种选择。通常，决策是协作活动的结果，例如点投票，价值对体积画布，MoSCoW，Kano模型等。
尽管这些技术是由不同的人发明的，但它们的工作原理基本上是相同的：团队成员将带有所有功能构想的便笺贴在板上，然后将最有希望的构想入围。打分或投票给这些想法打分，或者根据每个功能的可行性，可取性或创新性沿纵向分布它们。
当您邀请专家参加时，这样的民主表现就非常有用，这些人是内在地知道这个话题的人，或者像丹麦物理学家尼尔斯·玻尔（Niels Bohr）说的那样，“犯了当团队中的每个人都是专家时，票数的分配将表明最佳想法。所有可能在非常紧张的领域犯下的所有错误”。
但说实话：讲习班通常具有办公室政治的味道。例如，一个研讨会可能会吸引对您的建筑不感兴趣的高能干利益相关者，或者您可能必须邀请失去动力并影响整个团队工作的非必要专家。那就是为什么在房间中只有两个或三个可以做出明智决定的人变得如此容易的原因。
并且，作为协调人，您急切希望提出最共识的意见，而当专家的声音与非专家的声音相同时，这就会成为问题。
即使，您有专家参与，他们也可以代表不同的领域和领域。因此，他们将做出不同的选择。如此，即使对于有知识和熟练的人来说，理性思考也不是另一种方式。
人类必须应对许多同时发生的思维过程，并面临180多认知偏见。启动效应就是一个例子：在研讨会之前一个人发生的事情会影响他们在研讨会期间的行为。因此，如何确保专业知识（而不是个人喜好或情感）驱动功能优先级？
之后几乎不可能猜测每个选择背后的原因-除非您以某种方式提前支持理性思考。
商业并非全是娱乐和游戏：团队必须根据数据做出艰难的决定，将自己的异想天开，品味和偏见插入门外。作为促进者，您当然不想根据利益相关者的喜好或当下的感受来做出业务决策，对吗？但是，在许多练习中，“我喜欢这个主意”与“这将帮助我们的公司成长”一样，值得信赖。
优先活动的另一个陷阱是度量系统，例如：
对一个人而言，获得一定数量的选票或特殊计量单位的目的是为了在优先排序过程中平衡意见。但是他们没有考虑有人对现实的看法有何不同，更不用说全球团队的文化差异了。的方面可能对另一个人无关紧要。
例如，如果我听到美国客户说的是“好”而不是“很棒”或“很棒”，那我就知道自己有麻烦了。这意味着他们不太满意。但是“好”是欧洲普遍赞美的表现。投票也如此：S大小的任务对内部高级布局开发人员来说是一回事，而对于市场顾问则意味着另一回事。
而且，现在很多人都精通“设计思维”和“敏捷”，可以下意识地操纵选票或有意利用尺度系统的模糊性来推动自己的想法。
如果团队成员之间的争执失控，您将花费大量时间徒劳，并且无法及时达成共识。严重恶劣的是，辩论最终将导致会议室中潜在的影响力的利益相关者所提倡的想法的被迫同意。那么，如何更好地处理优先级？
在我的一个项目中，我们正在设计一个复杂的解决方案，其中涉及技术，业务流程以及全球数百个人的专业知识。因此，我们不能狭义地定义功能的期望值（例如用户满意或可用），因为它不仅仅与最终用户或界面有关。
我们的团队确定了解决该解决方案中受益的五种利益相关者类型，并且我们提出了一个描述性规模来评估功能。它既考虑了利益相关者的覆盖范围，也考虑了该解决方案可以帮助他们解决的任务的重要性。
当然，我们可以使用1到5的简单比例，其中1代表值，5代表最高值。但这并不能使我们清楚每个功能的价值在现实中意味着什么。从而，在真空中评估项目始终具有挑战性。“低”有关什么？“中等”比例又是什么？公认会出现这样的问题。
同样，我们决定添加真实的描述。代替抽象的“低”，“中”和“高”，我们根据该功能的实现应涉及大量劳动力和金钱来打分。我们知道，可以在一定程度上决定所需工作水平的因素是我们可以自己完成还是仅与第三方一起完成。
结果，数字获得了意义。
后来，我们创建了一个结合了多个特征的书呆子表。这有助于我们检查某个功能是否具有均衡的合理性，可取性和获利能力-简单，是否可以做到，客户是否期望并为企业赚钱。
根据您的项目，条件可能会有所不同。一个项目可能需要您评估潜在的收入和实施工作，而在另一个项目中，您可能必须重点关注易用性，预期的部署工作和估计的维护成本。如何，方法都保持不变：首先，定义基本标准，然后建立可行的量表，最后进行评估。
如何建立这样的规模？从极限开始-最小和最大标记。1（或0）是什么意思？5、10或意味着什么？
当定义了最小和最大标记时（在上面的示例中为1和5），您可以为中间标记（3）然后为其余标记（2和4）写一个描述。这种方法有助于在标记定义之间保持或多或少近似的增量。
在表中排名不同，画布提供了更灵活的表示形式和更独特的获胜者。但是，如果使用模糊的标准，则可能会破坏整个练习。
从到高的标度的主要问题是它们的分类性质。任何想法的作者都不会承认它的价值不高。他们将坚持自己的立场，说服团队成员将便签贴放在“低-低”区域之外的任何位置。另外，您可能会发现所有“局外人”想法都属于实力较弱的利益相关者。
“困难”可能意味着任何事情，但“需要外部专业知识和资源”可以更好地说明这种困难。期望值也不会：“解决已证明的严重痛苦”是一种过滤器，它不会让有人提出没有任何证据支持的想法-无论是用户研究，客户支持票证还是市场分析。
该方法简化了优先级排序，但是以花费一些时间来准备规模，特别是在准备简洁的部门名称上花费了时间。
在使用这类画布时，请注意交通灯的颜色编码。对于最终的输出演示文稿，这可能是一个不错的选择，但是在研讨会中，这将增加偏见，使人们不愿意让自己的选票最终出现在红色区域。
投票是达成共识的快捷方式。匿名时，所有选票均被接受且权重替代。投票授权谦虚的利益相关者，并降低等级障碍。但是，这也掩盖了每个单独选择背后的原因。最大的挑战是，参与者需要以某种方式立即权衡所有可能的标准，并迅速选择（并希望明智地选择）。
在与客户的许多计划会议中，我都加入了经典的点投票，并且常常产生一些决定，我们稍后会完全改变。自然，我想避免双重工作。因此，在一次会议中，我们尝试了增强版，并为具有不同专业知识的人员分配了特定的颜色-绿色代表客户语音的“保持者”，蓝色代表有财务思想的人，红色代表可以评估可行性的技术专家。
首先，这种方法使我们了解了人们在做出选择时可能会想到的想法。其次，我们缩小了获奖者名单。仅有几张便条纸从这三种颜色中获得了票数，并被同时认为对客户有利可图，有价值。
这种方法使我们能够专注于最好的功能，而不会被单方面有前途的项目所干扰。通过经典投票，我们通常会有5至7名决赛选手。多元化的投票显示只有两个或三个符合所有标准的最高创意。
有一种话语可能会破坏优先级：“投票给您最喜欢的功能”，或者改写为“现在选择您喜欢的想法”。这些话打开了主观地狱的大门，并向您的团队发出了幻想和推测的正式邀请。
不要给这些无益的指示，而是要使人们处于理性的情绪中，并帮助他们倾听内在的理性声音。
主观性是人性的一部分。我们不可避免地要做出情感决定，但是有一些方法可以使选择减少一些偏见。主持人无法控制专家头脑中正在发生的事情，但是我们可以尝试使团队成员处于正确的决策状态。我推荐两个基本的东西来简化决策过程：
随意使用这些 优先练习的Miro模板。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
项目有自己的生命周期，我们作为设计师也应该学会变通，在项目的不同生命周期采用不同的设计策略，脱离现实情况空谈体验往往难以推进……
设计的本质是解决问题，守住内核，保持匠心……
动效对产品的可用性体验有多维度的影响。在界面中动效不仅仅是一种视觉装饰，它能够提升产品的参与度并扩展交流的范围。
本文追根溯源，先从动效的起源讲起，一步步推进与产品、体验之间的关系，最后通过案例分析动效设计的原理和应用。一起来看看吧～
一、动效设计的起源
动效与用户体验的结合相对较新，其根源是迪士尼动画设计的十二个条基本原理。迪士尼动画原理是为了讲故事而提炼出的基本的物理运动规律。这些原理能让绘制的卡通角色移动和表演，但不能充分满足现代UI界面的交互需求。
为了弥合这个差距，动效专家Canedo Estrada改编的《动效设计的10条原理》更适合应用到数字产品设计中。
在围绕界面元素建立用户体验时，重新定位动效原理的关键在于：
二、动效设计与用户体验
在讨论动效设计的原理之前，重要的是要强调动效不仅仅是装饰，而是一种用来帮助用户体验的行为。动效设计涉及两种基本的交互类型：实时和非实时。
实时
当用户在屏幕上点击UI元素时，实时交互提供即时反馈，会对用户的操作做出即时响应。
非实时
非实时交互发生在用户操作后，这意味着用户需要经过短暂的转场才能看到结果，然后再继续。
另外动效设计通过四种不同的方式来提升产品的可用性：
1.期望：当用户与界面交互时，他们期望看到哪些行为？动效是否符合预期或引起混乱？
2.连续性：交互在整个体验中是否发生一致的运动行为？
3.叙述：触发的动作是否与满足用户意图的事件的逻辑进程相关联？
4.关系：UI界面的空间、美学和层级结构如何相互关联并影响用户的决策？动效如何影响各种元素的关系？
三、产品动效设计原理
这里提供12种动效设计原理的解析，每一种对应不同的案例，从更直观的角度来解读抽象的原理。
1、缓动(Easing)
缓动效果模拟了现实世界中对象随时间加速或减速的方式。它适用于所有运动的UI元素。下图中的卡片和对应的椅子移动速度很快，但由于缓动效果它们可以平稳地受到控制。
2、偏移和延迟(Offset & Delay)
当多个UI元素同时快速移动时，用户倾向于将它们组合在一起，而忽略了每个元素自身的功能性。
偏移和延迟会在移动的UI元素之间创建层级结构，并传达它们相关但又不同的消息。元素的时间、速度和间距不是完全同步的，而是交错排列从而产生一种微妙的“一个接一个”的效果。
当用户在屏幕之间穿梭时，偏移和延迟表明存在多个交互选项。
3、父子关系(Parenting)
父子关系将一个元素的属性链接到其他元素中。当父元素中的属性更改时，子元素的链接属性也会更改，同时所有元素的属性都可以相互链接。
在下图中，将父元素(蓝色滑块)的位置与子元素(灯泡发光效果&光照强度)相关联。当父元素左右移动时，子元素的发光效果的范围和光照强度的数值会发生变化。
父子关系在元素间创建关系并建立层级结构，允许多个元素同时与用户交互。因此这种效果非常适用于实时交互中。
4、转换(Transformation)
当一种UI元素变成另一种形式时就会发生转换。例如，转换展示了下载的开始、中间和完成状态——下载按钮转换为进度条，进度条转换为完成图标。
从UX角度看，转换效果告知用户元素的状态发生了变化并将信息传递给用户，提高了用户的认知度。
5、数值变化(Value Change)
数值的变化(数字、文本或图形）在数字界面中非常丰富，从银行APP到日历到电商网站的各种产品中都会出现。
在某种程度上，数据的动态表达和交流可能会对数据的价值产生影响。例如下图中的数值被动态引入，向用户显示他们有能力影响数据，提升了参与活动的意愿。
6、遮罩(Masking)
遮罩是对界面上的部分内容进行战略性的显示和隐藏。通过改变元素的形状和比例，在改变元素效果的同时允许元素本身保持可识别性。因此，照片和插图等视觉形式是理想的选择。
从可用性的角度来看，设计师可以通过遮罩向用户展示产品正在进行一系列的交互。
7、覆盖(Overlay)
二维空间中没有深度，元素只能沿X或Y轴移动，叠加在界面中创造出前景/背景相区分的位置关系。通过模拟深度，覆盖可以根据用户的需要隐藏和显示元素。
在使用覆盖时，信息层级结构是重要的考虑因素。例如，用户在笔记应用中首先应该看到的是笔记列表，然后使用覆盖来显示每个笔记的辅助选项，如删除或归档。
8、克隆(Cloning)
克隆是将现有的对象拆分成新对象,这是一种突出显示重要信息或交互选项的方法。
通过克隆将元素与界面相链接，如果元素只是突然出现或消失没有关联性，那么用户将缺乏信心去交互。
9、模糊(Obscuration)
想象一扇磨砂玻璃门，虽然看不清门后的东西但是我们能察觉到门后事物的存在。
模糊的工作原理是一样的。它为用户提供提示，让用户意识到自己正在操作的界面之后还有其他的层级结构。导航菜单、密码屏幕和文件窗口是常见的示例。
10、视差(Parallax)
当两个(或更多)元素同时以不同的速度移动时会构成视差效果。
视差的主要目的是划分层级结构：
视差引导用户点击可交互的元素，同时允许非交互的元素保留在屏幕上并保持设计的统一性。
11、维度(Dimensionality)
维度使界面元素具备具多个方向的交互，这种行为是使元素看起来是可折叠、可翻转、浮动的或具有深度。
作为一种叙述性工具，维度意味着元素的不同侧面是相互联系的，并且可以实现无缝的屏幕过渡。
12、平移与缩放(Dolly & Zoom)
平移与缩放通过视角的变化能产生更多空间上的体验，逐级递进显示更高级别的细节。
平移：点击元素后发生距离远近的平移，用户的视点会越来越接近图像。(一个人拿着照相机走到一朵花前面近距离拍摄)
缩放：用户的视角与图像的距离保持不变，但图像在屏幕中的比例会增加。(这个人站在原地不动，只利用相机的变焦功能使花显得更大)
四、总结——动效即交流
互动体验要求动效具备敏捷和微妙的形式。坚持动效设计原理，即使最基本的界面元素也能成为交流的复杂媒介。
动效设计与产品用户体验之间的关系正在迅速成熟，而且动效跨越了二维屏幕上元素的抽象运动和3D世界中对运动的感知之间的鸿沟。
文章来源：UI中国 作者：Clip设计夹
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
你觉得设计系统重要吗？那目前手里的设计系统是在灵活运用？还是落灰、摆设？你对设计系统理解有多深？它在你的设计中有多大的用处？节省时间、减少出错率、视觉一致性还是仅仅觉得就应该有个规范？那怎么避免设计系统带来了统一和便利，但同时失去了变化和新鲜感？
设计系统是今年来热门的话题之一，想要带来良好的用户体验，设计系统就是其中重要的一环，那它和设计规范、设计模式、设计语言、设计原则有什么关系？
设计系统用一套连贯组织、相互关联的模式和共享实践以达到数字产品的目的。简单的说就是一系列可重用的组件和它们的使用指导文档，在制作这些组件的过程中会考虑到公司的设计理论和品牌化(颜色，文案，字体等等)，所以它们也通常包括在设计系统里。设计系统为公司的各种产品提供了基石和指导。是一种动态的，是需要维护与改进的。
设计模式是一种经常性，可重复使用的解决方案，可用于解决设计问题，我们经常会说解决整个方案我们要运用什么样的设计模式。
设计语言是把设计作为一种“沟通的方式”，用于在特定的场景中进行内容与信息的传递。设计语言可以理解为由品牌基因+设计规范+多场景应用三大要素组成的一套设计应用规范系统。
设计原则可以理解为设计语言中的语法，是构建设计语言系统的起点，用于传达品牌主张或设计理念，它将指引业务设计执行的方向。
比如Airbnb的设计原则可以简单归纳为几点：
设计规范对于设计师来说并不陌生，日常工作中也经常使用。围绕在某种风格或者大型设计项目下形成可视化、数据化的标准，针对相对独立的体系建立的统一遵守条款。统一的设计规范不仅有利于设计师提升效率，同样可以帮助产品、开发、运营、测试等相关人员对产品的体验有更好的认知。
我曾经加入一个设计团队，看到平台风格不统一，当时很自豪很坚定的制定了一套平台设计规范，从色彩体系、文字体系、icon体系、botton体系以及其他的一些UIKIT体系，还有交互方面。当时一心想着有这个规范宝典在手，平台统一性指日可待，没想到这个规范就成了我自己的规范，仅仅是我在自嗨。
为什么已经建立设计规范了，还是没能解决平台统一的问题？这里延伸出另一个问题，为什么其他设计成员不用？协作不起来？是它不够好？我严格按照标准来，为什么推不起来？
那要追溯到设计体系的目的是什么？它的意义何在？
1-建立统一的设计文化体系
2-保证多团队成员共同参与的项目视觉一致性
3-提升品牌调性
4-节省与研发人员的沟通成本
5-将元素组件化，提升设计师和程序员的工作效率
6-可以帮助设计人员有针对性地对视觉元素进行优化和迭代。
7-在用户层方面，对某产品的体验一致性得到落实
8-减少设计出错率
……
整体可以归纳为
规范定义的基础是围绕某种风格或者设计文化。对内统一，一个品牌的设计风格，是要有别于同类竞品的，比如阿里云、腾讯云，他们各自都有自己的品牌调性。在对外上两个品牌是做到了对外区分，一眼可以识别出来。他们有各自规定的一套设计语言、设计规范。这样才能在协作上达到对内统一。我们都不希望在阿里云的网站，各个页面的设计差异明显，像跳转到其他平台。而这些针对用户层一致性都是非常重要的体验。
多个设计成员协同一个产品，迭代与更改规范都能更快的同步。可以试着想象一下一个几十人的设计团队，如果没有统一设计规范，那网站会变成什么样子。
在UI还原中，设计需要经常与前端进行沟通“这里这里这样做，那里那里这样做”，对于每一块的设计，前端都会询问你，这样大大增加了沟通的成本，把时间花在了无效的事情上。
设计规范统一后，减少了无效沟通，可以更专注创新方向，比如：要改变预先设定的一个辅助色，无论是设计还是开发，修改组件的颜色，全局使用到这个组件的地方都会改动，大大节省了设计时间。
做品牌的时候需要制定一整套VI规范手册，那平台同样也需要统一的品牌感。建立统一的文化体系可以让用户无论处在哪个页面都会有熟悉感、掌握感。统一的元素、视觉风格、交互方式，更加突出该品牌应有的调性。无论你在听网易云音乐还是QQ音乐，看到界面都可以立马识别出这是哪个app。
你能分出哪个是网易云播放界面，哪个是QQ音乐播放界面吗？
设计经常碰到设计完后需要修改一个点，然后就要找出设计稿中所有相同的地方进行修改，这样很容易漏，统一规范后只需要修改组件即可。尽可能的避免错误的出现。
设计规范的意义这么强大，对网站及品牌有至关重要的作用，那为什么还会出现没有应用起来的情况呢？
很多设计师会说：“设计不就应该是变化多端的吗？就是要表现创新力呀？制定了设计规范是不是就失去了变化和新鲜感？那设计还有什么意义？开发都可以做设计的事情了。”
这里就要看对设计规范理解的深度—设计规范是分层次的，平台规范归根结底是为了确保产品的易用性，是为了减少用户的学习成本
底层基础元素也可以说是全局样式，比如色彩规定、文字大小、icon线/面、botton体系等一些基础的元素，给用户一种统一的视觉形象，在跨界面、跨端、跨系统间有熟悉感，从而潜移默化地进行品牌的渗透。
对组合自由度较低的基础组件做精简的样式变化限定，对组合自由度较高的复合组件减少过于局限的限定条件，考虑各种拓展的可能性。组件在制定过程中要考虑多种状态，多种可能。
设计规范是需要迭代的，而不是我只要制作出来就放那了，就像女生买衣服，去年的衣服已经配不上今年的我，嘻嘻
~~希望我每天都有新衣服穿，做梦中～
设计体系最大的重要性毋庸置疑就是规范节省人力，设计师可以更多的时间去发挥创造性。
很多设计师觉得统一了规范，那我的创造性从哪发挥，界面都长的差不多。在设计中，设计目的是解决商业或用户的问题，并不仅仅是为了有创意而引入新的样式或交互方式。
有了设计体系，统一了整体品牌风格，不用把精力花费在比如调整间距、对齐元素等琐碎的事情上，更多的回去关注更全局的设计策略。
它仅仅是设计软件上可复用的组件，所以可由设计师独立完成，这种想法是错误的，是需要来自不同角色支持和参与的，这里包括前端、品牌、动态设计、 用户研究等。
有时候会想只要完成了规范就大功告成了，其实不然，对待设计规范就像对待产品一样，是需要维护和改进的，包括两个方面：一种是对内部使用的开发以及同事，一种是对用户的，应该定期收集用户以及同事的反馈，确保及时更新迭代。
1-提高设计开发效率，最显而易见的好处就是，组件库的可复用性。
比如像表格、弹窗、颜色等。一些基础的组件只需要做一次。
2-确保设计一致性，为用户提供连贯一致的用户体验，设计的一致性让用户能缩短的学习使用产品的周期，让他们能够预见他们的操作所带来的改变。
网站统一的视觉规范、交互体验，会让用户产生一种掌控感。
3-设计系统促进了公司内部的合作和交流，一个成功的设计系统是需要跨功能团队参与，设计系统因此促进了公司内部不同职位的合作和交流，这种文化的建立也会帮助公司更有效地推出新的产品或服务。
已经了解了规范的目的/意义，那该怎么去着手呢？
在制定规范前期，不应该是一个人规定这个规范，设计团队的成员应积极参与，前期先把规范的基调定好，人人都参与进来了，规范也就能更好的运营，当时我就是一个人定了规范，只是单纯把规范发给其他设计人员，他们没有参与，自然不会使用规范，对里面的设计元素没有加深理解。
这个主导人建议让全队专业能力最强的人辅助产品战略分析进行。有全局把控能力，这样能把纰漏降到。
大家一般说的设计规范是界面的视觉规范，从UI的定义，User Interface—用户界面，用户与界面之间的交互关系，可以归纳规范其实可以包含两大类，一类是视觉规范，一类是交互规范。
视觉规范可以给用户传达统一的品牌形象，确保视觉一致性。后期的设计元素须复合规范的原则。
交互规范可以减少用户的学习成本，让用户有归属感。交互规范在制定的过程中，需要写好交互规则与条件，不然后期维护会混乱。像盖房子一样，地基都没打稳的话，整个楼都是偏的。
那在使用规范时，一定要遵循规范里的要求进行应用，否则会乱套，不仅起不到统一的品牌风格，反倒会给人一种一团糟、完全不专业的感觉。体验好是一个产品的竞争力。
节点和公司的进度搭边，看当前的产品是应该先独立风格还是先统一基础规范。
1-固定的设计风格规范，比如：google的“扁平”，微软的“磁贴”，可以全局使用，并且时间保持的相对长久。这些设计风格在前期就完成了独立与其他风格的区分。后期再进行拓展。这种比较适规模比较大的团队，定好基调，不会走偏。
2-不断优化的设计规范，根据公司的节奏，有些产品目前比较迫切的是需要界面统一性、交互统一性。基础做完以后，进而考虑产品固定风格。这种比较适合小团队协作。可以随时调整。
利用粒子构成的原理与三维解构，一个组件被科学的三维解析后由粒子再构成，理论上几乎能够满足所有的UI样式需求。这样所有组件构成元素都可变，高度灵活
建立单个元素——设立简单组件——构成复杂组件——形成模板——最后组成页面。
并不是每个时刻都能够直接使用完整的组件，元素是我们工具库必不可少的部分，它可以更大的方便你修改组件，再造组件以及特殊的排版，方便拖拉拽。
规范组件命名，方便查找、方便协作。
一键导出/同步组件到Sketch模板。
标注方面，目前我们团队使用的是蓝湖私有化。
一般情况下，公司有不同的产品线，且都需要长期的开发与迭代。
公司中，越来越多的设计师加入，设计风格需要统一。
设计体系里面包含了设计语言、设计规范，需要与前端、品牌、动态设计、 用户研究等沟通，还是需要迭代优化的，这是非常繁琐耗时的项目，初期会非常的艰难，当设计师开始做组件时，也是非常耗时的工作，需要考虑不同场景下的使用情况以及设计的延展性，都需要投入大量的设计人力。
聊了这么多，大家对设计系统有了一定了解，建立好设计系统可以事半功倍，以此提升效率才能提升UED价值。
思考点：
1-对于设计团队只有一两个人的时候，是否需要建立设计系统？
2-你是否愿意把时间花费在前期建立设计系统，后期更多时间用于创造性地东西？
3-建立设计系统前很枯燥，你会怎么坚持，怎么让设计体系价值更大化？
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
文章来源：站酷 作者：玛丽的设计笔记
在设计工作中，你可能会遇到这样一种场景：甲方爸爸开发了一款产品，委托你进行包装推广，但是甲方对于设计将要解决的需求并没有明确定义，或者只给出了行为层的建议，好比高端、大气、上档次，低调、奢华、有内涵balabala，甚至发来带有魔幻主义色彩的参考图，上来就要求出几版方案先看看，这些情况在服务中小型企业时十分常见。
这种情况怎么办？
无视甲方的奇葩要求？凭着自己的经验干？还是顺着甲方的偏好干？毕竟人家是金主吖？
恐怕都难有好结果。
对于设计师是自找改稿，毕竟你连将要解决的问题都不清楚，自然无法有效的论证“设计为什么这么做”，这就相当于把方案的主导权拱手让给了非专业的甲方。而甲方如果思维跳跃“很有想法”，你就有改不完的稿子了。
对于甲方而言，则可能买回一堆无用品，毕竟方案出街后面向的用户其实是甲方的客户，靠设计师和甲方拍脑袋本身是舍本逐末，解决不了问题，用户才是真“爹”。
so，一切以主观为意志的设计行为都不明智，最终很可能落得一个双输的结局。
正确的做法是怎样的呢？
这种情况下就需要设计师上升到产品思维的高度，与甲方沟通推进，乃至于进一步的用户调研。
一个面向市场的产品，被制造出来一定是为了满足市场上某一类用户的需求缺口，否则它就没有存在的理由。而设计是为产品赋能的角色，所以在确定设计将要解决什么问题，以及产生洞见的过程中，一定是围绕“用户需求”为中心，只有真正明确了这一点，你的设计才是有意义的。
那么，如何搞明白用户需求呢？
接下来我会从“什么是用户需求、如何通过做用户调研、如何萃取用户需求”这三个部分来和大家分享，如何通过洞察用户需求，来帮助我们更好的设计。理解了这些能够帮助你提升一个段位（配合收藏+点赞食用更佳）。
一、用户需求都有哪些？
在介绍具体的方法论之前，首先你得知道用户需求都有哪些。 人的需求通常可以分为“功能需求”和“情感需求”两大类，分别由左右脑管控。
功能需求，是显而易见的外在具体需求。
比如找工作你会关注工资、五险一金、福利待遇，买电脑会看内存、CPU、屏幕大小，点外卖会看价格、送餐速度。功能需求是用户的“左脑”需求，也是用户基本想要的东西。
情感需求，则是与之相对的，隐性的、抽象的内在心理层次需求。
比如这家火锅店的服务太周到了，让我感觉心里暖暖的，喝一杯星巴克，体验到白领小资的情调，穿上这套西装，让我感觉自己像明星模特。情感需求同样重要，它是感性驱使，用户“右脑”情绪上的需求。
李叫兽曾在《十四天改变计划》课程中的产品战略模块细分出了十类用户需求
这些同样可以归纳为“功能需求”和“情感需求”这两大类。
A功能需求：低价、性能、便捷性、可达性、降低风险。
B情感需求：高端、定制化、新颖、过程体验、理想自我。
给大家解读一下：
A1-低价
低价，是解决了“用户曾经因为价格原因无法获得的，现在可以获得了”的需求。
比如我们身边各种无节操的促销活动▽
拼夕夕动不动的砍一刀▽
拼夕夕一言不合就轰炸的红包▽
这些都是切中低价需求的设计，low不low且不说，但它们是成功有效的。
反之如果把一个促销页做成买不起的样子，那注定是个失败的设计。毕竟商业设计从来不是自我陶醉的做出一些高逼格的东西，而是在不同情景下使消费者内心与行动上买单。
A2-性能
性能，解决的是“满足用户对某项功能追求”的需求
比如Intermarché 橙汁▽
为了进一步强调产品“新鲜”的特性，在包装上白底黑字印上了超大的数字时间，表示生产日期。这一设计巧思，使产品上市当天便获得5000万次社交媒体曝光，一个月内销量增长了4600%。
深泽直人的仿生包装▽
通过对产品包装的色彩、造型，甚至工艺质感上的直观呈现，来表达产品“原生态”的特性，帮助商品在琳琅满目的货架上脱颖而出，大大增加产品售出的机会。
A3-便捷性
便捷性，解决的是“降低非货币成本”的需求。
比如亚马逊▽
amazon作为全球商品品种最多的网上零售商，所主张的就是“降低你线下购物的时间成本”，包括亚马逊的标志传递的也是“从A到Z，应有尽有”的概念。
再到联邦快递▽
不论是标志中隐含的箭头，还是对外的品牌创意广告，都是在强调“24小时使命必达”的强大的货运能力。解决的同样是用户的“便捷性”需求。
A4-可达性
可达性，是解决“获得过去难以获得的某些东西”的需求。
比如数码相机▽
在胶卷相机时代，拍完了照片得洗出来后才能看到拍的好不好，而数码相机的设计，让你可以实时看到拍摄后的样子，达到了以前达不到的功能，解决了以前不能解决的问题。
美图秀秀▽
你可以让自己变得更加苗条，更美丽。以前只有设计师经过专业学习才能P出好看的照片，现在普通人也可以轻易的对自己的人像实现美化。同理，都是“可达性”的需求切入。
A5-降低风险
降低风险，是解决“降低本次消费带来风险”的需求。
比如神州专车▽
用滴滴你可能会遇到黑车、黑司机，之前也闹出过这样的新闻，神州专车则捡大品牌的漏，通过自营车辆专门解决打车过程隐患的风险，解决的就是“降低风险”的问题，在对外推广中也都是在强调专业和安全。
以上是功能性需求，那么情感需求呢？
B1-高端
所谓高端，切中的是马斯洛需求模型中的尊重需求“身份认同”。
比如小罐茶▽
我给朋友送礼希望摆上一盒茶叶，朋友就知道这茶很贵，不需要解释也能体现我对朋友的重视，自然就需要稳定价格和品质的品牌。小罐茶则抓住了茶类的这一空白地带，顺利打入市场，设计的调性同样都是围绕这一策略服务。
B2-定制化
定制化，解决的是“满足用户特定功能与体验”的需求。
比如柠檬盒子▽
根据消费者的健康情况，量身定制满足消费者每日所需的维生素，从对外的广告到带有姓名的产品包装，都是在强调“定制性维生素”的品牌定位，这种差异化打法，让柠檬盒子从保健品中脱颖而出。
B3-新颖
新颖，是解决“消费者对过去陈旧市场不满，追逐潮流”的情感需求。
比如味全每日的拼字饮料▽
通过包装的货架创意呈现，与消费者形成互动，最终形成社交媒体自传播，上市后每个月的销售额都有同比40%的成长。
Milgrad牛奶▽
最近也是在社交平台上形成现象级刷屏，为品牌省下不少广告费。
二厂汽水▽
去年夏天的老牌新造，成功逆袭成为网红品牌，年销近三个亿。这些都是从情感性需求“新颖”的角度切入。
B4-过程体验
过程体验，是解决了“ 消除用户在完成某个任务的过程中所存在的阻碍”的需求。
比如海底捞▽
餐厅高峰期经常人满为患，排队体验差。海底捞则会在你排队等待的时候，提供免费美甲、护手、零食...等等各种周到服务，赢得了口碑传播。如果你留心观察，你会发现海底捞的标志也是用了一个打招呼的气泡Hi，来强调服务为先的品牌定位，解决的是情感需求中的过程体验。
B5-理想自我
理想自我，解决的是“帮助用户成为更理想的自己”的需求。
比如Odorono止汗剂▽
1912年智威汤逊著名广告人詹姆斯·杨，在帮助客户推广面向女性群体的止汗剂时，砍掉了原来“出汗是一种疾病”的推广策略，推出了一条新的至今人被人津津乐道的策略：“出汗将会影响你的人际关系，让你不再受男性欢迎”，这一策略在美国形成现象级轰动，遭到女性愤怒的同时，也成功帮助Odorono打开了女性市场，是“理想自我”的典型应用。
受于篇幅，以上十点讲的比较概括，这些案例很多都非常经典，感兴趣大家可以自己百度搜索。
通过这些案例你会发现，设计其实有很多种“玩法”。
讲这十点的意义，一是启发大家在实际工作中思考多个角度可能性，先把思路做多，而不是只局限在通过设计强调产品的某一功能特点，接着着眼于形式，那样很可能我们一开始的切入点就没找对。
另一方面，让大家对这两类需求有更具体的认识，你会发现这些“玩法”都是基于用户需求而存在，不是直觉或玄学更不是毫无章法的创意。设计是基于严谨思考推理的解决问题的过程，而解决的问题无非归纳为理性的“功能需求”与感性的“情感需求”这两类。
那么应该如何发现用户到底有怎样的需求呢？支撑依据是什么？
固然不是靠甲方拍脑袋，更不是靠设计师拍脑袋，而是靠“用户调研”。
二、如何做用户调研？
想想看你都接触过哪些调研方式？
常见的调研方式包括问卷法、后台数据法、访谈法、观察法等等。这些调研方式前两者属于“定量型”，后两者属于“定性型”，它们有不同的侧重点与优缺点。
1.定量型
定量型调研侧重于“广度”，是通过大数据，量化用户的行为偏好。包括：
●后台数据法
通过产品APP或者平台的后台来提取用户操作数据，来获取用户的选择偏好。
举个例子，比如你将要设计某个电商产品详情页，那么你就可以提取该电商平台的后台数据，通过品类下关键词的搜索词频，来获取用户的真实需求，作为设计方向的指导依据。具体可以参考南孚充电宝详情页的设计过程。
这种调研方式的优点，是能快速获取到用户真实的显性需求，缺点是受限于互联网产品或科技类产品。所以对于小众产品，一般会采用第二种定量调研方式。
●问卷法
对覆盖用户以问卷的形式采访，也是最常见的调研方式。比如可以通过目前的主流问卷平台：问卷星、金数据、腾讯问卷等渠道来取样，问卷法的优点是操作简单，易扩散，能够获取到大量的基础反馈数据，缺点是获取到的信息深度十分有限，基本只能获得自己预设范围内的反馈，毕竟大部分用户根本不关心你问卷的填空题。
整体而言，定量性调研只能获取到用户行为层面的显性数据，对于用户为什么会产生这些行为是没有答案的，所以一般情况下还需要定性型调研来配合。
2.定性型
定性型调研侧重于“深度”，是聚焦少量人群，洞察行为背后真实想法的方式。包括：
●访谈法
针对某一类问题，与少量不同的目标用户约谈，通过沟通，挖掘他们行为背后更深层的情感需求。
举个例子，比如肯德基曾经推出了一款特价咖啡，为了从主要竞争对手星巴克手中抢夺用户，当时访谈了很多用户，调查他们选择或不选择星巴克的原因。最终发现购买星巴克的大多数人是为了星巴克提供的附加价值，如第三空间、品牌体验等，包括发现很多人喜欢拿着星巴克的杯子自拍；而不买星巴克的原因是认为咖啡本身太贵，原料不具有性价比。
最后肯德基推出了“咖啡为了觉醒，不是为了凹造型”的广告来攻击星巴克。暗示星巴克的购买者是追求面子、摆造型的肤浅的人，而肯德基咖啡的使用者却是“聪明的消费者”。这种通过对用户行为背后价值观的挖掘，帮助肯德基更好的拉进了产品与受众的心理距离，争取到更多的潜在顾客。这也是定性调研的意义所在。
那么具体来说，访谈的过程中有哪些要点呢？
1）以人为本
将关注焦点始终放在对方身上，而不是对问题清单上固定的内容进行提问和记录。
2）不断追问
问原因、问细节、问感受。你为什么觉得它好？你觉得它好在哪里？你当时是怎么想的呢？这些追问能帮助我们挖掘到用户行为背后，更深层的想法与价值观是怎样的，这也是定量调研无法触及到的部分。
3）留意情感表达
关注对方背后的情感是怎样的？比如随着第二步，留意对方有没有感觉上的形容词并顺着追问。“你说到上次的购买体验很糟糕，能具体说说当时的情况吗？”这些都能帮助我们捕捉到那些没有被用户说出来的隐藏情感需求。
需要注意的是，有时候用户可能并不知道自己的真实需求是什么，或者不愿意说。所以在用户访谈的过程中，不仅要着眼于对方说出来的需求，还需要去观察用户没有说出来的需求，这里就涉及到第二种方法：“观察法”。
●观察法
什么是观察？观察不等于“看”，而是调用你的眼睛、耳朵，以及所有感官去感知，并用心去揣摩用户行为背后的原因。
举个例子，脑白金创始人史玉柱当年在做产品调研的过程中，经常会找小区楼下和老头老太太聊天，询问他们：如果有一个便宜但很好的保健品你会购买吗？不会，如果更便宜呢？还是不会。
史玉柱通过对不同老人的接触与观察发现，老人对自己是很抠门的，他们更愿意把钱留下来给自己的儿孙。但是，如果是别人送给自己的，尤其是自己的儿孙买给自己的，他们则很乐意接受。一方面能感受到儿孙的孝心，另一方面可以和其它老人炫耀。后来脑白金团队花了大量时间钻研如何把送礼这件事说的好，才诞生了那句经典的广告语。诸如此类的伟大洞见，很多都来自于观察中诞生。
那么应该如何来观察呢？其实可以有很多角度：
1）观察自己
自己作为用户试用一遍产品，就相当于换位思考一遍，记录自己整个过程的使用感受，优点是能获得直观的反馈。缺点也很明显，就是你的体验不一定和其它用户是一致的，毕竟每个人的认知和偏好是不同的，萝卜青菜各有所爱，所以只能作为参考和验证方向。
2）观察用户真正在乎的事
用户有时候会“说谎”。就像史玉柱问老人是否买保健品他们回答“买不起”，但显然不是真买不起只是抠门不愿意买而已。再比如你问人为什么会买几万块的品，他的回答大概率是像精致的做工致敬，而不会说是为了身份认同。亦或者，用户可能会给出受限于自身认知的答案，好比如果在过去时代，你问用户理想的交通工具是怎样的，它可能说想要一匹更快的马。面对这些情况，你就需要抽丝剥茧，揣摩用户行为背后的用意，而不是执着于具体回答。
3）观察极端用户
极端用户是指消费群体的天平两端。比如很多游戏公司，都会着重调研初次接触游戏的新手玩家，和职业玩家的反馈，这两波人群就是极端用户，因为他们可能会放大被普通用户被忽视的需求。同理，如果你要推广某产品，去研究初次消费以及最频繁消费的那两波人群，观察他们的需求上怎样的。这并不是指用少数人的需求代替多数人，而是从极端用户身上寻找启发，用来向大多数普通用户验证，他们可能会给你带来宝贵的回馈。如Odorono止汗剂广告的成功，就是从对极端用户的观察中产生洞见。
4）观察用户的变通行为
很多时候，用户并不会注意到某个产品或设计中体验不好的地方，他们往往只会认为“它们本身就是这样的”。你能想象旅行箱的轮子，是在旅行箱发明之后的200年后才加上的吗？在这之前他们都使用推车来运输行李箱。所以，你可以观察用户在使用过程中是否有采用变通方式，有没有“两波三折”的过程，或者是否有“蹩脚”的行为，来判断某些不合理的地方，捕捉这些未被满足的需求。
以上是关于定量型与定性型的调研方式和技巧分享。
而当我们通过这些调研方法，拿到一堆庞杂的数据，又该如何的利用这些数据产生洞见，帮助我们做出更好的设计呢？我们还可以通过一些技巧萃取用户需求，转化成具体的解决对象，帮助我们产生创新想法。
三、如何萃取需求？
关于萃取需求，主要给大家介绍两个实用的方法工具。
1.用户画像
“用户画像”是一个使用频率非常高的工具，它是建立在用户调研的结果之上，通过找到优先级比较高的需求，虚构出“典型人物”，来代表和还原一群人的行为特征。
目的一是“总结”，将用户调研的结论，用更直观、可视化的方式呈现，帮助团队更好的了解用户，促进共同决策。
二是“移情”，建立与用户的同理心。帮助我们从用户视角出发，更好的领会对方的需求和痛点是什么。
这就像打仗前，在地图上勾画敌人的行军路线，帮助我们催生策略与洞见。
怎么做用户画像？
第一步，找出工作目的与用户需求的交集。比如你将要设计一则广告，目的是说服用户购买某产品，那么你就要找出用户购买这个产品的动机是什么，以及为什么会产生这样的动机？这些就是你工作目的与用户需求的交集。
第二步，提炼出用户需求的共性，将调研数据合并同类项，提炼出那些覆盖面广，权重最高的几个共同点需求。
第三步，将画像具象化。用更直观生动的方式演绎用户需求和用户特征。
一般来说，一个用户画像包括：
1）用户的基本信息：肖像、名字、性别、年龄、工作等等。
2）用户与调研主题相关的特征描述：比如性格、兴趣、习惯等等。
3）用户的动机与痛点描述：他想要什么？为什么想要这些？阻拦他达到目标的障碍是什么？
前两个是显性数据，通过定量型调研就能拿到，最后一个是定量性与定性型调研综合的结果，也是画像的核心。
举个小栗子，南孚充电宝的电商详情页设计，经过前期后台数据调研，和用户访谈。
得知用户购买充电宝的场景有：
1）外出旅行 2）出门逛街 3）商务出差。
用户对充电宝的特征和偏好有：
1）希望容量大，够用。2）希望体积迷你，方便携带。3）希望是大品牌，更安全有保障。
那么我们就可以勾勒出一张用户画像，如下所示。
这样一张画像就完成了。当然一张画像只能代表一部分群体，不能代表全部类型的用户，所以按照调研需求，可以分别勾勒出多张不同的用户画像。具体数量取决于想要覆盖的人群。比如还可以有：王小丽38岁，公司高管，经常旅游······周小芳22岁，大学生，喜欢逛街·····
在确定了用户画像之后，再给大家介绍第二种启发创作思路的工具：用户触点地图。
2.用户触点地图
所谓用户触点地图，也叫服务蓝图，或者用户旅程地图，也就是研究用户是怎样与我们的产品&服务发生接触的，一共有哪些接触点，每一次会接触有怎样的体验？将这一连串接触点像地图一样呈现出来，从而帮助我们汰劣留良。
海底捞在这方面做的就特别好，它将用户从进店到离店的整个体验过程，细分出了N多个接触点，从进店、带位、点餐、用餐、结账、甚至上洗手间，都面面俱到的顾及客人需求，你排队不耐，给你擦鞋、美甲，你用餐时担心头发沾上味道，给你发圈，你孩子哭，给你带娃······
而用户触点地图在其中的意义，则是一个有效的整体体验规划工具。通过触点地图的绘制，你可以知道用户在各个环节下，在想什么、要什么、有什么感受，帮助我们提炼出待改善或是创新的机会点，完善整体体验。
怎么绘制用户触点地图?
很多专业书籍和文章会讲的很复杂，但其实关键就两步：
1）横坐标画出用户使用产品从“始”到“终”的过程，
2）纵坐标画出三种感受，分为满意、一般、糟糕。并在坐标内填充各个关节的体验是怎样的。
举个例子，我经常会收到一些求职者的简历作品集，但是在这一个过程体验有时候并不好，比如文件太大，有的文件打不开，有的干脆发过来源文件或者网址······如果把这个体验过程从始（收到email）到终（保存联系）画出来，可能是这样的。
如果在这之前就针对这一过程，从用户的角度出发绘制了用户触点地图，那么你就能很大程度避免这些误区。这也是绘制用户触点地图的主要意义。
最后再啰嗦一句，用户触点地图不仅能帮助我们建立整体认识，避免踩雷，还能帮助我们找到关键节点，更合理的分配资源。这里涉及到一个诺奖级别的配套知识点“峰终定律”。
所谓峰终定律，指的是人们在经历了一次事件后，只会记住两个因素，一个是事件的高潮，即为“峰”，还有一个是事件的结束，即为“终”。这一定律在服务体验中经常被用到。
比如在宜家的购物流程中有很多负体验，迷宫般的路线、有时还得自己搬运产品。但是看到精致优雅的产品，以及结束后的1元冰淇淋，会让我们觉得整体的体验还是不错的，愿意下次再来。正是因为在关键时刻和结尾带给我们的体验是正峰值。
这给到我们最大的启示是，任何商业以及设计行为，能调用的资源是有限的，而我们可以通过在关键节点与结尾，制造正峰值，达到资源的更大化利用。
比如在很多日本的设计上都有这样的小巧思。
蘑古力零食，吃完以后，盒子最里面写着“无论何时，都请再来享受一刻小憩”。
拉面馆喝完最后的拉面汤才看得到碗底写着“谢谢”。顾客对店主肯定的同时，也获得了店主的感谢。
这些小彩蛋，都是对用户终值体验的提升，甚会因此细节而留意，成为回头客。
这些何不是精妙的设计？
设计是一门科学的艺术，我们要懂得利用社会上已被证实的方法论，避免行为的盲目性。这比单纯的从速成派大师那里学一些水面上的术，重要太多了。
总结一下本文讲述的内容。
设计不是玄学也不是直觉，它是有逻辑的满足用户需求的过程，而调研则是洞察用户需求与创新之源。
关于「如何洞察用户需求」这个话题。
首先，我们分析了用户的需求有两类，一类是“功能需求”，它是表面的、理性的，另一类是“情感需求”，它是深层的、感性的。功能需求包括但不限于低价、性能、便捷性、可达性、降低风险；情感需求包括但不限于高端、定制化、新颖、过程体验、理想自我，这些都能启发我们思考不同方向的可能性。
其次，介绍了两类基础的调研方法，分别是“定量型”与“定性型”。定量调研侧重于广度，如后台数据法、问卷法，能帮助我们获得大量显性数据；定性调研侧重于深度，如访谈法、观察法，能帮助我们捕捉用户行为背后的原因，这些也都是洞察用户需求的基本功。
最后，我们介绍了两种萃取用户需求的工具，分别是“用户画像”与“用户触点地图”。用户画像是提炼用户关键需求，虚构出具体人物来代表一类人群，是一种可视化的用户需求总结方法，同时也能帮助我们切换视角，与用户同理共情，催生创新想法。 用户触点地图是细分出用户接触产品的各个环节，帮助我们汰劣留良，发现机会点，以及更合理的分配资源。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
排名榜单数据在我们日常生活中经常会遇到：
比如微博、抖、快的热搜榜单、各省份之前的GDP对比、双11的现场的榜单数据等等
都会涉及到，可以说排名数据已经涉及到了我们生活中的方方面面。
那我们应该如何做好榜单排名数据可视化呢？
我们常遇到的榜单排名数据主要分为两种：
↑ 榜单排名数据分类
一种是无数据的排名，也就是只有排名和名称；
另外一种就是有数据的排名，也就是包含了具体的数值；
那么，本篇文章我将按无数据的排名和有数据的排名，给大家带来，当我们遇到榜单排名数据时，应该如何将图做的更好看！
总共涉及到大于15种可视化表现形式，希望能够对你有所帮助！
最简单的方法，我们可以从排名的数字本身去做优化，比如将排名数字1、2、3....去做内容的填充丰富，改为TOP1、TOP2、TOP3...或者NO.1、NO.2、NO.3...
还可以基于数字本身所处的环境去做优化，比如在其底部加入填充形状垫底，让数字排名更突显出来（如正方形、矩形等等）。
通过这两种形式，可以让单调的排名数字有了更多的细节，内容更丰富，展示更好看。
↑ 基于数字本身去做优化的案例
在数字本身变化的基础上我们还可以加入对文字的变化，比如在文字的底部垫上形状（如圆圈、条形图等等）。这样通过对数字和文字本身的设计强调，就从整体上得到了优化。
↑在文字底部垫上圆圈，在整体上突出设计感
虽然排名没有具体的数值，无法生成条形图，但是依旧可以通过等比缩放的矩形来强调文字，比如倒立金字塔和横向柱状图。
↑通过矩形形成倒立金字塔和条形图，在整体来突出设计感
如果排名数据内容所传达的主题是品类、物品、或者城市，那么就可以借助icon来丰富可视化。
排名的数据如果涉及的是品类中的细分物品，比如生活中常见到的吃的、穿的，用的，那么就可以使用定制插画来丰富排名可视化。
当我们的排名数据中涉及到了人物、品牌、产品之间的排名时，我们可以通过与之对应的头像、品牌LOGO、产品实景图来丰富排名的可视化表现。
如果排名数据讲的是省份之间的排名对比，那么我们就可以借助地图元素来丰富排名的展示。但是如果要用到中国地图，一定要注意使用中国标准的地图，当然基于设计的风格，你也可以使用简约风格，去掉地图元素，只保留可视化的部分。
排名数据也可以借助视觉背景模板来做变化，比如在涉及某个主题排名榜单时（如淘榜单、星数榜单等）就可以通过背景视觉元素来突出排名。
其实这种背景视觉模板，对可视化的要求并不高，你只需将排名通过单一表格的形式展示出来，但需要一个很强的视觉背景版来做衬托，这样，做好一个模板，其余的榜单都可以进行复制使用了。
如果数值单一，那么可以通过常规的可视化表现形式进行展示（如基础柱状图、饼图、圆圈大小、直角三角形柱状图、180°变形柱状图等等）。
结合第一节讲到的基础排名样式再加上横向柱状图来进行展示。这样的排名展示形式简单、直观，特别适合单一排名数据之间的对比展示。
如果排名数据中数值所传达的是占比，那么便可使用饼图或圆圈大小的形式对排名数据进行展示。
通常我们会使用常规的竖向柱状图来表现数值的大小，但其实还可以对其进行一点点变形，比如将柱子的右侧直角边去掉，那么就变身成为了直角三角形柱状图。
这时如果排名的文字比较多，我们还可以将排名和文字置于柱子的上方进行展示，一方面节省了空间，另一方面在视觉上也起到了美观度。
柱状图的变种，在《如何做出比别人好看的柱状图？》系列文章中有讲到，大家对如何实现这种形式感兴趣的可以看下之前的文章，同样的排名数据也可以基于180°的变种柱状图来进行展示。
除了基础的可视化展示和排名数据结合外，如果排名数据所涉及的是一些主题元素（如生活中吃的、穿的、用的等等）。那么就可以将基础的可视化和icon、头像、产品实景图、插画等等去做结合来丰富可视化。
当排名的数据中，还多了一列数据涉及到分类， 那么就可以使用桑基图来进行可视化的展示（如国家属于什么地区、公司属于什么行业、城市属于什么省份等等）。对如何实现桑基图感兴趣的可以看看之前发的桑基图教程。
4 排名连线图展示
如果我们的排名数据中，还涉及到了年份的排名变化，比如省份之前的年度排名，那么就可以使用排名连线图，通过线段的上下连线走向来看省份之间排名的上升或下降，同时这种数据还非常的适合做成动态柱状、折线图（在后面会讲到）。
如果我们的排名数据中，还涉及到了年份的排名变化，比如省份之前的年度排名，那么就可以使用排名连线图，通过线段的上下连线走向来看省份之间排名的上升或下降，同时这种数据还非常的适合做成动态柱状、折线图（在后面会讲到）。
和第一节讲到的地图一样，如果排名数据中涉及到了地理位置数据，那么可以结合地图进行排名数据的展示。通常情况下，完成地图可视化后，可将具体的排名信息以表格的形式罗列在地图的空白区域内，这样结合地图和具体的详细排名数据，就会更加的直观和丰富。
如果我们的排名数据维度非常的丰富，数据所包含的信息点在3个以上，那么就可以通过将多种可视化的表现来进行结合，通过组合式的可视化来进行展示。
排名数据也可以通过简单的动态柱状图来进行展示。如果只是单一的排名没有涉及年份的变化，那么可以通过柱子从上到下一个一个地出现来进行展示（如下图左),如果涉及到年份的变化， 那么就可以通过柱子随着年份的上升或下降来进行动态的展示（如下图右）。
动态柱状图的实现方法也很多，我在想做出漂亮的图表，这12个网站不能错过！中有讲过，可以通过flourish网站（https://flourish.studio/）来快速的实现。同时如果想自己DIV得到更定制化版本的动态柱状图，也可以使用B站UP主见齐的开源可视化项目（http://r6d.cn/JdYy）进行实现。
同样的我们还可以通过动态折线图的形式进行展示，这种表现形式主要看的是排名的趋势变化，同样的，借助flourish网站（https://flourish.studio/）就可以实现这种动态折线图的展示效果。
当然，我们的排名数据也可以使用现在市面上很火的3D可视化的表现形式来进行展示，比如随着摄像机移动的3D柱状图、还有基于主题而自定义化的3D场景排名展示等等。
将基础的柱状图，通过3D立体柱状图的形式进行展示，排名的结果并不是啪的一下直接公布，而是随着镜头慢慢地公开，对观众来说随着镜头的视角观看有一种慢慢揭秘的感觉！
如果我们的数据，所要传达的信息非常富有主题场景感，那么就可以通过3D场景渲染的形式进行展示，比如下图GIF中，在表现《哪个国家上班族工作时间最长》就可以将各个国家的学生，置于一个教室中，再通过镜头的移动位移来进行展示。
这种展示形式，实际投入成本还是很大的，从建模到渲染至少也需要2-3天的时间。所以最好基于一个好的选题再选择这种形式，要不然就会出现”虽然视频本身展示酷炫，但是由于选题不好，最终播放量不高“的尴尬情况。
比如说，当我们在时间非常紧急的时候，排名数据如果是和地理数据相关的，那么我们会尽量避免使用地图元素来丰富可视化，因为这会增加我们审核检查地图正确性的时间成本。我们可采取常规的可视化表现形式进行展示，虽然会丢失掉一些美观度，但是正确性会有更高的保障。
基于文章内容，需要在图中重点强调某些数据时，可通过填充颜色、框选、重点信息丰富(比如展示TOP3)的形式来对排名进行强调.
排名数据看似简单，但其实所包含的展示形式和细节还是非常多的。希望当你在遇到排名数据时，这篇文章能够对你有所帮助！
文章来源：站酷 作者：邹磊ZouL
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
