为何深色模式看起来不自然？它的实用性到底怎么样？深色模式是不是对眼睛更健康？结合文献，我们一起来探究深色模式的种种！
在过去的几年中，深色模式一直是用户最期待的一个功能。你可以自由切换你喜欢的模式来适应当前的场景，iOS和Android也都在2019年布局了系统级的深色模式，深色模式可获得出色的视觉体验，尤其是在弱光环境中……有助于你专注地开展工作，因为内容会较为显眼，而颜色加深的控制项和窗口则会隐入背景之中。但真是这样吗，或者只是一种实际上弊大于利的操作？
虽然各种软件界面的色调和颜色会有所不同，但是对深色模式的处理方式都是在深色背景上显示明亮文本和界面元素的配色方案。相比之下，在浅色背景上显示深色文本和界面元素的配色方案，在这里我们称之为浅色模式。
而事实上，深色模式比浅色模式早了几十年。在其最初的阶段，深色模式并不是一种有意的解决方案，而仅仅是当时计算显示设备是阴极射线管（CRT），且只能显示单色的显示，屏幕看上去就是黑的，黑底白字或者黑底绿字就是计算机行业的早期状态。直到1980年代彩色显示器发明后，微软视窗系统上线之后，黑底显示才退出主流。苹果在1984年推出“麦金塔”个人电脑，第一次发布采用图形用户界面，由此开启了计算机屏幕白底显示的主流之路。
ibm 5151单色监视器
浅色模式出现的确切时间很难确定，但可以追溯到施乐Parc图形用户界面，它也极大地影响了早期苹果的“麦金塔”和其他操作系统，该界面使用了以白色背景为主的深色文本和界面元素。它与显示技术的进步和现代图形用户界面的出现密切相关。这种能够显示色彩的且更先进的RGB CRT显示器拉开了浅色模式的序幕。
1973年的施乐Alto是最早使用轻型接口模式的计算机之一
深色模式的实用性有多少，每个人看法也不一样。尽管深色模式的界面可能不像浅色模式那样观感清晰，但深色模式的界面却具有一定的魅力，可以让你联想到新颖，高端，精致，神秘，力量，奢华这些词。但是，黑色也是一种会引起人们强烈的情感一个颜色，并且在过度使用时很容易使人无法承受。
2019年9月，苹果公司上线深色模式（Dark Model）时，在官网上如是宣传道。从iPhone到Mac，当库克决定在苹果公司几乎所有产品上线深色模式、甚至要求所有在AppStore上架的应用都必须兼容深色模式时，安卓阵营的谷歌、华为、三星等头部公司也纷纷在其手机中推出了深色模式，相应地从WhatsApp到微信等全球主流的应用也都推出了深色模式。
但是，想要获得良好的深色模式是相对比较难的。一方面，深色模式迫使放大瞳孔来捕获必要的视觉信息，从而导致整体清晰度的降低。而同时界面中高亮的部分又迫使我们的瞳孔缩小去适应亮度，以便提高清晰度。这也就能理解为什么白色背景上的黑色文本在你的眼睛中通常会显得更清晰的原因。
扩大的瞳孔让光线更多，但感觉到的锐度受到损害
行业对深色模式追逐的群羊效应，也进一步加剧、放大了一个见解：深色模式对眼睛更友好更健康！
但是，事实并非如此。对于一些有散光的人来说，在某种程度上深色模式对他们的眼睛来说更糟糕，深色模式比浅色模式更友好更健康的科学仍有待讨论。斯坦福·拜尔斯眼科研究所的眼科专家对此表示：“鉴于文献中的数据，我认为深色模式对眼睛没有任何的友好和健康。” 这种深色模式对眼睛疲劳和潜在的眼睛健康的影响时，使用时间可能比设备的亮度或亮度更重要。
根据美国验光协会的说法称，大多数人的眼睛在某种程度上都患有散光，但通常不会引起注意。据美国眼科学院统计，每三个美国人中就一个存在散光的情况，1.5亿美国人需要佩戴眼镜来矫正视力；香港理工大学针对2700多人的临床检测发现，在21岁的30岁的香港人中，近40%以上患有100度以上散光。
一起看下面的说明性图像。即使你有完美的视觉，你也很可能在黑色背景上看到白色文字周围的光晕。
浅色模式与深色模式
如果增加文字并降低文字的大小，这种效果可能会更强：
右边的图像你应该会看到更多的光晕，如果你有散光症状，深色模式可能会让你看屏幕更费劲。在深色模式下，虹膜打开以接收更多的光，并且瞳孔的变形在眼睛上产生了更加模糊的焦点，因此，当你在深色屏幕上看到浅色文本时，其边缘似乎渗入黑色背景，也就是所谓的“光晕效果”。虽然深色模式可能更适合夜晚等弱光环境下使用，但不一定能帮助更好地阅读，对于散光患者来说，可能还会加剧视疲劳。
当然，从实用性上讲，深色模式也有它的好处，深色模式利用OLED屏幕在纯黑的背景下不发光的特性，确实能有效的省电，让你的电子设备续航上提升很大，这也是很多人一直在追求深色模式的一个重要原因，只要手机续航强比啥都重要！这也可能是苹果公司决定在几乎所有产品上线深色模式的一个原因。
另外深色模式更有利于给用户营造一种沉浸体验，对于视觉娱乐应用尤为如此。当你想突出显示特定类型的内容时，深色模式会特别有用。豆瓣、数字尾巴、网易云音乐是我常用的几个软件，它们都已经适配了深色模式。在这种模式下你的目光会更加注意到电影的海报、数码产品和充满活力的音乐专辑上。
豆瓣、数字尾巴、网易云音乐的深色模式
一是由于我们人脑的组织结构造成的，从多年来的多项科学研究和调查得出的结论是，从物种进化来看，人类99%的时间都是在白天中活动，人脑更倾向于在浅的背景上显示深色的图像。所以无论白天还是黑夜，浅色的背景都可以让你更快地专注于显示的元素，而深色的背景则使其难以辨别文字和视觉界面元素，从而影响你的阅读效果并最终使你的眼睛疲劳。 其实从世界各地多个洞穴中发现的史前壁画也能说明为什么我们倾向于喜欢浅色模式。
追逐猎物的狮子，法国Chauvet Cave，约公元前30,000-28,000
德国帕绍大学曾经做过一次测试。在该研究要求参与者阅读屏幕上的正极性（白色背景上的黑色文本）或负极性（黑色背景上的白色文本）的文本。随后，参与测试的人员会执行基本的校对任务，例如查找拼写或语法错误。研究人员还测量了每种模式下参与者的阅读速度。结果是所有参与者在正极性条件下的表现都会更好，他们检查出更多的错误以及阅读的速度更快。
可读性差异
另一个学习发现正极性对于在显示器上读取小文本特别有利。人脑具有更快的可读性，更喜欢在光线背景下显示的深色文本和物体。
二是由于含有大量蓝光的光源会使我们眼睛不舒服，当我们谈论屏幕对眼睛的潜在破坏性影响时，我们通常是在谈论“蓝光”，这是由短、高能量波长构成的光谱的一部分。研究发现蓝光可能是导致眼睛疲劳的一个因素，但指出长时间不眨眼的干眼也是导致眼睛疲劳的一个更严重的原因，当然也有是因为字体太小，以及散光这样的原因。
当我们身处暗室或是在黄昏或夜晚时，眼睛会切换成不同的视觉模式；在弱光环境下，人眼会从对绿色敏感变成对高能量蓝光敏感，这代表我们在大量的接收蓝光，因此对刺眼强光的敏感度会增强。这类情形对驾驶人而言并不陌生，当他们被来车车头灯的强光照射时，特别是使用现代化氙气灯或LED头灯的车辆，可能会暂时丧失视力。
平板电脑、智能手机和其他电子显示屏，不仅改变了我们所接触的光谱，也使我们的视觉行为发生转变。我们必须意识到，我们现在用于“近距离”视物的时间比以往多得多，这通常是因为背景亮度太暗所致。
在德国光学公司蔡司官方网站上，对于蓝光也作一分为二的评价：“好处是当外界环境变亮也就是蓝光较多时，身体便释放出血清素—它是其中一种快乐荷尔蒙以及皮质醇—这是一种压力荷尔蒙。这两种荷尔蒙能让我们保持清醒，富有活力，同时也应用于冬季抑郁和失眠的治疗中。但过多的紫外光和蓝紫光可能会对肉眼造成损伤，除了可能导致令人难受的结膜和角膜发炎，也可能会破坏眼睛的晶状体（例如白内障），尤其是伤害我们的视网膜（黄斑病变）。”
在WWDC 2019大会上，苹果宣布了iOS13的深色模式功能，在令人兴奋之余，作为设计师和开发人员，我们应该考虑的该如何去实现它。苹果和安卓已经发布了为应用程序设计深色模式的设计指南。当然，没有硬性规定要求遵循他们提供的设计指南，这些只是指导原则。
由于Material Design设计语言的原因，投影的占比是非常大的。在浅色模式下还好，但这不太适用于深色模式，因为深色背景上的黑色阴影在视觉上不容易察觉，为此安卓还提供了在深色模式下不同层级的卡片与投影上的参考。
根据设计文档来看，iOS背景为纯黑色，色值为＃000000，Google 则更喜欢深灰色，色值为＃121212。
通过提供的设计指南，我们可以轻易上手来设计和开发我们的软件，但要注意的是深色模式并不是简单的与浅色模式颜色对调，必须为所有的元素进行单独配色。
浅色模式下的白色不会在深色模式下转换成纯黑色
这样也就能理解为什么很多软件并没有全部去适配新的深色模式，一方面使用场景决定的，另一方面就是深色模式并不是简单地换个换个颜色就行，很多元素需要重新设计和开发。
在去年的 WWDC 大会上，苹果人机交互团队的设计师曾对 macOS 的深色模式使用场景做了进一步的解释。
他指出，只有阅读浏览或是内容创作型 App 才需要长期启用深色模式，比如文字或代码编辑。它们会借助黑底白字的高对比度特性来让用户视线保持集中，其它大部分软件对于深色模式的需求反而并不强烈。
或则你可以通过使用场景去选择，在明亮的环境中使用浅色模式，在昏暗的环境中使用深色模式。
但是在大多数情况下，真正帮助你避免眼睛疲劳的是不要整天盯着屏幕，而不是纠结到底用深色还是浅色模式。
转自：站酷-
微信是一种生活方式。作为月活超 10 亿的国民级产品，它有着独特的设计之道。
同时，微信也是互联网界的一个异类，张小龙曾在微信公开课上回应道：「我们只是守住了做一个好产品的底线，居然就与众不同了」。
好产品自然是体验和价值至上。下面，我就为大家解读微信的用户体验设计。
先从最简单的二次确认讲起。
微信针对首页消息和收藏列表的删除操作，做了二次确认的微创新。像同类 IM 聊天工具，如 iOS 短信、Facebook Messenger、飞聊等等，二次确认都是采用底部系统弹窗。这样做，从程序架构的角度来看兼容性和通用性更强。
而从体验设计的角度来看，则刚好相反，因为从第一次删除操作，到第二次确认系统弹窗。之间的目标距离太长，耗时也就变长了。根据菲茨定律（Fitts’ Law），获取目标的时间取决于目标的距离和大小。这意味着提升交互的效率，不仅需要减少距离，同时还要增加目标大小。
△ 收藏列表
回过头看来微信，就是这样设计的。二次确认是在第一次的基础上延展，距离几乎为 0，同时，目标按钮的宽度也增加了几倍，大大地提升了交互效率。
其实，商业和用户体验往往是有冲突的。而微信广告很好的平衡了这一点。
通过丰富有趣的互动体验式创意，或画圆、或画方、或画爱心，吸引大家主动参与互动。
1. 开放首条评论
另外，首条评论功能让品牌像朋友一样与大家对话，利用明星效应，从而带动更多人参与评论，有效提升评论区活跃度和广告点击率。
△ 朋友圈刘雯广告
以刘雯发布的朋友圈广告为例，大表姐把款的 vivo X30 系列手机交到你手中，并在首条评论中邀请你帮她拍照。数十万用户积极回复刘雯，评论率高于历史均值 40 倍+，「你这么漂亮怎么拍都好看」、「天天给你拍」，大表姐的魅力折服了众多用户，有效提升了品牌的亲和力与好感度。
2. 打开仪式 · 最强震动级别
在交互方面，如果你是 iPhone 用户，可以体验到 Taptic Engine 线性震动马达，通常力度由轻到重分别是 Light、Medium、Heavy。在打开广告的那一刻，它给你的是最强震动级别，满满的仪式感！整个微信应该找不到第二个这样级别的震动了。
再举一个震动的例子，当你的好友拍摄了时刻视频后，可以看到 TA 的头像右上角多了一个蓝色的小圈圈，双击它就能看到好友的时刻视频了。
当然，你双击没有拍摄时刻视频的好友，TA 的头像会左右晃动，并且会有 Failure 的震动反馈，动画和震动节奏完美匹配，这个体验就像你解锁 iPhone 输错密码时的震动是一样的。
△ 没有时刻视频时的反馈
我们做产品设计时也一样，对于用户的操作，应当给予清晰明了的反馈，帮助用户更好地理解信息。
微信的起步阶段是基于手机来做 App，不基于 PC 来做，PC 端只是辅助，而现在，它的跨平台能力也逐渐增强。
一周前，微信 PC 版「微信测试版 for Windows」发布了 2.9.0 的内测，同步了移动端的新功能，主要有两点：
支持打开小程序，也可以玩「贪吃蛇」「跳一跳」等小游戏了。
△ Windows 微信客户端
另外，此前的微信 PC 端只支持引用文字消息，也没有达到手机上引用消息的视觉效果。此次更新中，还新增了很多支持的应用类型，包括但不限于图片/视频、表情包、公众号链接、小程序、文件等。
如此看来，Mac 端的更新也不远了，可以期待一下。
最近的微信更新了，除了引入深色模式之外。值得一提的是，语音消息的交互体验得到了优化，上滑转文字更方便了。
此前的方式是按住说话，滑到转文字按钮，说完松开手指后，才把语音解析成文字。
现在交互则少了一步操作，达到了实时边说边转文字的功能。别小看这一步界面上的优化，它背后代表的是微信语音识别能力上的技术突破。
△ 语音实时转文字
微信有很多隐性和显性的锚点，隐性锚点就比如你打开的这篇文章，关闭后，再重新点进来，还是显示上次阅读的位置。
△ 订阅号列表
显性的锚点就比如上面这个：当你刷公众号列表时候，如果有新文章更新，标题栏会出现一个锚点按钮，点击它让你快速回到顶部，方便查看文章。
△ 朋友圈「跳到还没看的位置」
基于此，在新版微信朋友圈中，增加了一个「跳到还没看的位置」。很多信息流产品是往下刷内容，直到给你一个分界线提示：下面内容已经看过了。而微信这是一个逆向操作，我认为这个功能还是很有必要的，因为经常会有刷朋友圈刷到一半聊天退出去，当回来查看朋友圈时，需要重新拉到底部，费时费力。
《在你身边，为你设计》一书中有提到语音听筒播放的优化。大家都知道，手机带有距离感应器，在感应到耳边贴近时，屏幕会关闭以节省电力，并且避免由于耳朵与屏幕的触碰导致的误操作。
微信在聊天界面中，也启用了距离感应，以实现手机贴近耳边时，自动将语音从扬声器切换到听筒进行播放，这样你可以用最自然的姿势来听语音，这是一个很好的体验。
但要完美地实现这个体验，就需要解决距离感应器的时延问题。播放语音时，如果你非常迅速地将手机移至耳边，这时候距离感应器并不会同样迅速地对这个动作产生反馈。大约在延迟了 300 毫秒后，感应器发出信号，微信将 iPhone 的屏幕关闭。而在这个时间内，你的耳廓极有可能已经触碰到了 iPhone 的屏幕上。触碰的位置大部分时候是左上角的返回按钮区域。于是很容易出现手机移至耳边，语音戛然而止。
△ 延时响应判断流程图
为了解决这个问题，微信设计了一个解决办法：在响应返回操作时，先等待 500 毫秒，这时候如果侦听到距离感应器有发出信号，则认为是贴耳的动作，此情况下不执行返回操作，如上图所示。而 500 毫秒的延时大部分时候你是不会感知到的。这一解决办法极大降低了贴耳时候的误操作。
在微信的产品设计中，我们看到了交互的细微迭代和背后的技术突破，我们看到了商业创意与用户体验的平衡。给用户带来希望，让创造者体现价值，这就是微信的设计之道。
文章来源：优设 作者：洋爷
缺省页指页面的信息内容为空或信息响应异常的状态；设计缺省状态的作用不仅是引导用户在异常边界状态的操作提示，同时也是安抚用户体验情绪的重要场景；更重要的是为边界场景营造出良好用户体验。通过分析缺省状态产生的原理，从而更为准确地把握交互缺省页的设计原则。
谈到缺省页面可能是设计师最容易忽略输出的范围，可能直到对接的开发同学提出来，「这个页面，如果没有数据的时候，该怎么显示啊？」。为了更好地把控设计缺省页交互状态，首先要了解缺省页出现的原理。App 页面内容（包括图片、文字、数据字段等等）都是请求服务器数据，顺利返回后，正常显示到客户端页面。在了解清楚基础实现逻辑后，就可以开始梳理、整理缺省状态的设计思路。
△ 图1 缺省状态的场景梳理图
缺省状态包括：系统层、信息层、空白层。
系统层：指当用户请求服务器时，返回提示请求提交失败，并检测到失败原因时呈现的页面；例如：加载失败、服务器异常、无网络等；页面一般会有重新请求的快捷按钮。文案上可做失败原因的细分描述，也可节约成本使用网络异常的统一文案。
信息层：请求服务器数据成功，但返回的数据异常的页面；例如：内容已删除、内容已下架、内容不存在；文案内容以提示数据类型的缺失为主。显示形式除了常有的全屏缺省图，还会出现在数据列表下单一内容缺失的缺省模块化的情况，例如：单一作品在书架上显示已下架。
空白层：请求服务器数据成功，但显示无数据；内容页在无数据时需要缺省状态进行表达；例如：页面空数据、搜索无结果等。空白页面属于正常网络显示场景，所以一般会在缺省页附带有相似属性模块的用户引导，争取用户重复消费的目标，满足用户的操作的诉求。
最后根据每个不同的缺省状态，梳理产品相对应的场景。逐一根据场景特点来设计页面内容。那缺省页的设计有哪些表现形式呢？
没有用心设计的缺省页无法给用户带来良好用户体验，并可能给用户带来困扰，如下图：某小众直播平台的拉新邀请页面，无邀请记录状态下没有任何有效反馈信息，用户不能明确得知到底是网络问题还是账号同步出错，亦或者是没有一次邀请。正确的缺省页设计内容理应明确表达出符合用户心理预期的视觉场景表达（图形）；和使用易理解和语法恰当地表达当前的异常状态（标题）甚至于引导用户解决问题的文案描述。
△ 图5 缺省页的错误示范
1. 视觉图案+文案
此类缺省设计形式一般应用于表达系统性无响应或初始空白态的缺省场景。视觉图案一般使用 app 吉祥物或主色调延展出的 icon 或插画来表示缺省状态；文字：通常为「标题」或「标题+描述」结构；标题通常是表达出现缺省的原因；描述文案则说明结束缺省状态的解决办法，如「请检查网络是否顺畅」 等等。
2. 视觉图案+文案+引导
此类缺省设计形式一般运用于需要用户引导操作来达到业务目标的缺省场景。在视觉图案+文案的基础上加入引导模块，主要作用于避免用户在数据边界的状态下，会因为无法达到操作目的而提高的跳出率。引导模块的内容包括：相似属性内容，相似行为目标按钮或解决缺省状态操作按钮，加入引导，用户进行某项行为或者感知某些信息，对于功能的教学和使用频率的提升有着重要作用。引导模块的形式也是日新月异，逐渐变成新用户业务引导的作用，不仅限于页面平铺，也可以做成固定气泡微动效，例如：抖音的发布缺省页。
缺省页除了常规的提示型设计方法，还有许多其他的设计技巧，帮助用户在遇到困难，更好地安抚用户的情绪。这些设计技巧有些是替代原来的缺省内容，让用户有更多的消费空间与深度。有些是拓展缺省状态的补充内容，让用户不容易跳出页面，增加用户的消费时长。具体如下：
1. 使用推荐内容
缺省状态中的空白层非常影响边界情况的用户体验，提出一种假设，是否可以刻意推荐相同属性的内容呢？这样的界面既不会显得苍白无力又可以留住用户的注意力。相似性的内容也可以解决用户目标的迫切性。所以说，这种方法非常适合内容型产品中使用。例如：新用户在打开电商产品的购物车时候，理应是空白无消费行为的操作记录。那么平台方通过用户画像与热门排行算法推荐了一个商品流。这样可以解决用户无目标性挑选的诉求，增加消费时长。至于产品如果确定用户画像的推荐算法，可以通过获取第三方登录的个人基本数据之后，才给我推荐了数据库内相对应标签的热门商品，这样推荐的精准度也会高些。
2. 使用缓存
是否使用缓存内容代替缺省状态？根据产品特性来判断，工具类、金融类等同类型产品不适合使用缓存；因为用户交互操作的数据必须保持实时性与真实性。而内容型、电商类等类型产品适合使用缓存来代替缺省状态；理由：用户消费内容的转化路径是先消费后转化的行为特点，不存在系统操作门槛，且缓存内容可以代替产品的缺省状态，安抚用户操作失败所带来跳出率过高的风险。
3. 情感化表达
当缺省页给到用户时，通常省时省力的做法就是老老实实告诉用户当前的状态，最多配上一个具有通识性的灰色 icon。但是，秉持着以用户体验为己任的时代，我们其实可以把缺省内容表达得更加生动形象一些。在这里会加入一些情感化的表达，而不是仅仅只是做到准确的目标而已，比如加上活泼的插图故事，或者把文案写得更加拟人化、戏剧化一些。这些配图在让用户明白当前的状态的同时，往往也能引发用户会心一笑，从而弥补空白页面带来的失落感甚至可以带给用户一些正面的情感。如下图：
4. 提供新任务
通常缺省页的引导模块都着眼于解决当前任务。如果碰到没有解决方案的情况（例如：404，服务器崩溃等）可以提供给用户具有情感共情的新任务，让他们暂时忘记无法达到目标的挫败感，又有体谅的情怀。帮助建立正向积极的品牌价值观。例如：访问腾讯网时访问失败的时候，网页除了显示 404 状态之外，还会显示腾讯「宝贝回家」的公益寻人计划。将缺省页与公益内容相结合，不仅改善到用户缺省状态。也贯彻腾讯价值观「用户为本，科技向善」的输出。一个好的缺省页也可以承担社会责任，让公益传播到每个角落。
△ 图10 腾讯网404公益任务缺省页
结语：作为设计师有时会听到需求方表述「这种极少出现的情况，我们可以暂且不管它。」但是细节见真章，所有优秀的体验设计都必须照顾到方方面面的缺省情况。让每个用户的流量价值发挥到最大，产生相互信任的良好的品牌关系。这样的平台生态是良性的，这样的产品会更有流量转化的商业化价值。
文章来源：优设 作者：腾讯动漫TCD
通过一些案例进行比较与实验，探索如何将 UI 深色模式设计得更好。
iOS 作为 UI/UE 设计的风向标，一直是行业的引领者，不管你愿不愿意承不承认，他的每一次更新变化总能带动 UI 设计行业的一些大大小小的变革，并且产生更多的追随者，比如当年的 iOS7 开始的扁平化设计风格，对后续设计风格的影响直到现在已经 7 年了。
在最近半年，iOS 在 UI 设计风格上最大的变革莫过于 DarkMode（深色模式），在 DarkMode 之前，我们熟悉的 UI 界面往往都是浅白色界面为主，而从 iOS13 开始正式使用了 DarkMode，界面突然可以变深色了，苹果官方说这样设计可以让眼睛更舒服地长时间阅读，为革命保护视力，而且更加省电增长续航，具体结果我们不得而知，需要科学家们去验证了，但是对于我们设计师来说带来的挑战就是要「黑白无常」了。
其实 DarkMode 从测试版算起已经差不多推出了有半年的时间了，一些知名的 APP 产品早已经有了自己的兼容方案，同时 iOS 原生界面也给了我们很多最佳实践案例，按道理大家对于 DarkMode 的设计方式方法应该已经掌握了差不多了，但直到这几天微信正式推出了自己的 DarkMode 兼容方案，才发现对 DarkMode 的探索还需要设计师们多多努力。谨以此文表达一下自己的观点，不妥之处敬请海涵。
列表视图（TableView）是 iOS 中最常见的界面组件，一般常见于设置与栏目列表页面：
iOS 设置界面的浅色模式和深色模式看起来都非常协调。
下面我们看看微信发现页面，这个页面和 iOS 设置是很相似的。
如果单独看微信发现页面的浅色模式实际效果还是不错的。
但是直接转换到深色模式下就感觉突然差的很多了，甚至可以说是有点难看，这次微信真的做了一次黑天鹅？
到底是什么原因让微信发现页面在深色模式下视觉体验如此之差呢？
我们不妨将两个功能布局都相似的深色进行放在一起进行一下比较：
组成色彩分析：
在色彩这块在这两个页面中微信和 iOS 基本保持一致，四层灰度设计能更好的保持页面整体干净整洁且层次分明，但是在 A 背景色上，微信的背景色选择了黑色偏绿的颜色，应该是微信设计师还是想体现出产品的标志色原色。
文字的颜色也较 iOS 略微深一点，但是在整体上影响并不大。
看来在主要色彩上并没有什么问题，那么为什么微信这个界面与 iOS 界面比起来视觉上要感觉差一些呢？
下面来看一下图标
图标设计分析：
图标上的差别主要在于线宽与外框，微信采用无外框统一线宽的线形图标，iOS 采用的是有外框剪影图标。
我们我们把图标进行互换会怎么样呢？
观察到了吗？别看错了！
是的，我故意把位置做了对调，左边是 iOS，右边是微信。替换图标后的微信明显加分不少，整个界面都整齐多了，而 iOS 换了图标后明显变得不够整齐了，潦草很多。
那么结论是微信的无框线性图标在深色模式下兼容有问题？是的，的确如此。但是等一下，还有一些细节你注意到吗？换了图标的微信界面和之前的 iOS 界面比起来明显还是有点不够整齐，为什么呢 ？
我们回过头来从细节再看一下 iOS 界面。
我们按照这个思路把刚才微信替换图标界面再排序一下！
△ 界面视觉体验明显整齐了很多是不是！
疑问：
为什么细线图标和无框图标会在深色背景表现不够好，而在浅色背景下就没问题呢？
是不是所有的 UI 都会存在这样的问题呢？
我们再来看一些例子：
看来结论是一样的，线性图标在深色背景下的表现都是差强人意，反观带框图标适应性很强，浅色和深色模式下均能良好的适配，我来分析一下原因。
当年伽利略用望远镜往天上看，发现木星比金星大，换成肉眼看后金星则比木星大。他认为是眼睛的某种视觉特性造成了这种现象。
德国物理学家赫尔曼把这种错觉称为辐照错觉，就是说在黑暗背景下，亮度越高的物体看起来面积越大。
再来看一张图片
哪个圆圈看起来更大，显然是黑色背景下的白色圆形，实际上这只是一种错觉，所有圆圈是一样大。
光亮刺激会使得神经元产生非线性放大作用，导致刺激比实物本身看起来更大，白色圆形更亮，所以看起来更大一些。
线性图标是用线条勾画图案达到隐喻效果，一般线粗是 2px~6px 像素。
设计师在设计时都是以最终视觉作为参考，而设计稿本身多是浅色背景，所以在浅色背景的映衬下图标视觉会显得稍大，视觉基本是平衡的，假如设计是 4px 而呈现出的效果其实是 6px 左右。
是不是觉得哪里有点不对了？按照这个逻辑黑色背景下白色线图标不应该是视觉更大、更明显吗？
我们还需要考虑一个因素，那就是色彩，之前的几个界面案例的线性图标都是彩色的，特别是黑色背景下，不同色彩的图标放在一起，会有明显的忽大忽小的感觉，会让界面感觉非常凌乱。
是不是感觉黄色最大，红色的最小？但是其实是一样的，这还是相同形状的，要是图标形状不同感受会更明显。
看一个实际中的例子：
由于都是单色线性图标，在浅色和深色下表现还都不错的，但是单色图标略显界面单调，并不太建议这么设计。
毫无疑问，未来的 UI 场景需要适配多背景色风格，图标除了具备好看隐喻之外，更需要具备抗干扰性。
带框图标是一个不错的解决方法，大胆预测带框图标会将成为未来一段时间图标设计主流！
在这之前我得先提及一本书──《简约至上：交互式设计四策略》。这本书基本算得上是交互设计的入门必读书籍了，非常适合身处项目环节中上游的人员阅读与学习。
作者 Giles Colborne 在书中提出了四个令交互设计成果最大化的简易策略：合理删除、分层组织、适时隐藏和巧妙转移。这四个策略几乎成为我设计与优化每一个页面时的自我指导方针。
我参阅了大量的应用，想总结出它们是如何运用导航栏来给产品赋能的。竟然很巧地发现，再花式的导航栏设计也难逃「四策略」手法。
首先，导航栏作为一个独立控件，它本身就已经是「分层组织」策略的一种表现形式。接下来我们来看看，优秀的产品设计是如何运用另外三种策略来设计好导航栏的。
导航栏不能轻易删除，但凡事没有绝对。什么时候我们可以合理地删除导航栏呢？
Nike Run Club（下文简称NRC）是耐克官方出品的一款跑步记录 APP。既然做产品要站在用户角度出发，那我们就来复原一下主要功能的用户使用场景。
当你的老板要求你一天出 150 个界面设计的时候，你怕了，准备跑路，同时又不想浪费一天中任何一次记录运动的机会。于是你打开 NRC，你的目的很明确：认真地跑路，并记录运动。
点击「开始」按钮，当你一旦开始跑步，手机基本就不再使用了，直到跑步结束。
△ NRC在运动状态下的界面删除了导航栏
在用户记录跑步这样一个单一事件中，NRC 知道你会专注运动，很少存在关注其他功能、浏览其他页面的可能性。于是 NRC 可以很干脆地删掉导航栏，而返回按钮用了界面中的「结束」按钮代替。
滴滴出行在呼叫快车时也做了删除导航栏的处理。用户一旦发单，开始呼叫司机时，呼叫页面内的所有操作都只聚集在界面下方的一个视觉区域内。
△ 滴滴出行在呼叫过程中删除了导航栏
上面两个删除导航栏的示例有什么共通点呢？
第一，用户在当前页面的事件状态明确，不需要导航标题提醒用户当前在什么位置，用户也极少可能在当前页面发生其他事件操作，于是完全可以去除导航标题与内容控件。
第二，虽然删除了返回按钮，但都采用了很典型的「费茨定律」，就算用户误操作，也能便捷地撤销正在发生的事件。反而这比循规蹈矩地运用导航栏来承载返回按钮合理了许多。
△ 费茨定律简易图解
既然导航栏内所有的规范元素都有可取代方案，为什么不删除它呢？正如 Giles Colborne 在书中告诉我们的：大胆地删除，但也不要极端到盲目删除。
隐藏和删除看起来十分相似，但其实不然。我们如何区分这两个技巧呢？
隐藏最常见的情况是，当导航栏的出现会成为打扰用户沉浸体验的障碍时，我们会选择隐藏，例如看视频、浏览图片等显示全屏媒体的场景，有导航栏反而会分散用户的注意力。
△ 显示全屏媒体时需要隐藏导航栏
不知道你有没有发现到一个细节，在大多数情况下，需要沉浸体验的页面不但会隐藏导航栏，同时也会隐藏状态栏，导航栏中载有当前页面的标题、导航按钮和内容控件；状态栏中会载有时间、Wi-Fi 等系统设备信息。
iOS 在人机交互指南中提醒我们，显示全屏媒体时，请考虑暂时隐藏状态栏，但请避免永久隐藏。如果没有状态栏，当用户需要查看时间或其他设备信息时必须离开应用。设计师应该让用户可以使用简单的手势重新显示隐藏的状态栏。
△ 用户可以方便地查看时间或其他设备信息
另一种情况是当前页面非常注重一屏内容展现时，我们会隐藏导航栏。
京东在用户搜索了商品之后，头部有三个信息栏，非常冗长。分别是：
△ 京东搜索商品后屏幕头部的信息栏
用户在搜索了商品之后，向上滑动页面，京东会隐藏导航栏和全局筛选栏。
一是因为用户搜索关键词后，滑动页面大概率表示已经开始在挑选商品，这时候可以大胆地猜测用户行为，认为搜索与排序的重要级下降了，搜索结果垂直内容筛选的重要级上升了，便可以只保留下重要的操作。
二是可以让内容区域高度增加，隐藏顶部两个栏目区域可以大致增加一个商品位的提前露出，增大了商品触达用户的可能性。这不就是 UI 设计为商业目标赋能的一个案例吗？
△ 隐藏导航栏，增加了屏幕利用率
基于导航栏层级始终高于页面内容的特性，随着用户划出第一屏，许多 APP 做了重要内容或重要控件转移到导航栏的设计。
豆瓣在影评讨论区，用户上滑页面时，会将当前影片的信息转移到导航栏。其实这种转移很常见，许多内容社区 APP 都有这样的交互设计，比如浏览的公众号文章，再回到顶部试试。方便用户时刻知道自己当前所浏览的内容是关于哪一个主题的。这一类转移是单纯站在用户体验角度的考量。
△ 豆瓣在屏幕滚动后转移影片信息到导航栏
但如果你仔细观察，有一类转移却是综合了用户体验与产品目标的共同抉择。如果你再稍微了解一点该产品背后的故事，甚至可以让你洞悉到，为了巩固产品的调性和目标，PM 和 UI 们在页面设计时做了多少细枝末节的引导。
知乎在用户浏览当前问题时向上滑动页面，也会像豆瓣一样，将当前问题标题转移到导航栏上，但与此同时会将「写回答」的操作也转移到导航栏。标题转移是出于用户体验，和大多数内容社区的做法大同小异；而「写回答」的按钮转移，正符合知乎想要打造一个内容交流社区的产品调性，他们希望刺激用户进行问答互动，多输出 UGC 内容，希望用「写回答」的按钮转移进一步激发用户创作内容的可能性。
△ 知乎转移「写回答」让用户更方便地进行问答互动
京东在店铺首页上滑页面时，会将「关注」按钮转移到导航栏，方便用户在浏览的过程中可以随时收藏店铺，增加了用户对品牌店铺的关注度和复购的可能性。京东靠自营模式发家，近几年来开始慢慢重视 B2C 市场，在这个小小的关注按钮上，是不是可以算略显端倪呢？虽然我不能非常肯定，可能提高用户收藏操作只是为了辅助京东更好地进行营销权重划分，不过「关注」按钮的转移，确实能为 B2C 业务的渗透提供一份助力。
△ 京东转移「关注」让用户更方便地收藏店铺
所以我这里说到的「转移」的目的，其实和 Giles Colborne 在书中讲到的并不十分一致，Giles Colborne 是希望设计师将当前页面低频、冗杂的操作转移到另一个页面中去，而我提到的「转移」反而是产品越注重什么功能，越可以利用导航栏层级的先天优势来实现转移。
合理删除、分层组织、适时隐藏和巧妙转移已经是我做设计和分析界面常用的一个手法，它并不一定是万能的，但是它多多少少可以辅助我们做出更合理的设计。
这篇文章想要告诉大家的是，在平台规范里的导航栏是死板又相对静态的，但在四个策略的辅助下，结合用户的操作手势，也可以将它变得十分灵活，帮助页面实现更好的用户体验。不要被规范限制的太死，转换设计师的角色变成用户，你可以研究出更多好玩的操作。随便打开一个应用，去研究研究，你可能会乐在其中的。
文章来源：优设 作者：UCD耍家
如今我们的生活，到处都是大幅图像广告，纷扰喧闹的各类短视频与直播。这是一个快节奏时代，我们更倾向阅读图像。为什么我们偏爱图像视觉超过文字？从人类进化角度来看，原始时代的祖先通过五感感知着这个世界，其中通过视觉来感知判断生活，其他四感辅助之。即使后面我们发明了文字，但发展至今，对图像的本能吸引力依旧强烈。因为在我们认知的潜意识里图像相较于文字更能让我们快速轻松理解并记忆。
图像如此重要，设计作品中当然也必不可少。因为图片，它能一定程度上决定画面基调；引导视觉流程；调剂平衡多段文字信息的枯燥性，让阅读变得轻松容易。
在UI设计中，我们经常需要把设计输出物拿给产品经理或者其他有设计决断力的人看，UI设计中图片使用的好与坏，能很大程度上影响着决策者的感知，以及你的设计过稿率。
如下左图：商品视角、调性、细节，都没有右图来的统一、有质感。单看这两张图，会让用户有这样的心理感知：左图感觉像山寨盗版商城；右图则会认为是严肃官方认证商城。所以，在同样页面布局下，不同的图片使用与处理，能让UI页面的品质有较大的感知差异。
图片的使用如此重要。那么，我们在正式做UI设计前，首先需要弄清楚图片在页面的占比情况以及后续图片的支撑来源问题。
在构思UI页面阶段，首先需要了解以下两个问题：1.图片区域占比问题；2.图片来源问题。当页面图片占比多，且让用户自定义，那么需要预估到APP上线后设计可控率会降低。换句话说，实际上线效果会不尽人意。如下图：由于淘宝和网易严选平台属性不同，在图片品控上就有着不同的视觉感受。当然，不是说淘宝做的不好，而是当一个平台集纳不同的店铺，不同调性的产品类型，即使有图片规范，也难如统一品类、调性的产品来的统一。
弄清图片内容的可控性问题后，开始进入设计环节，那么我们该如何选择图片？
在不同的场合有恰当合适的场景搭配，是十分基础且重要的事情。在UI设计中，任何一个部分的设计以及元素运用都需要为产品服务。图片也不例外。如果你是厨房类APP，头图选用小清新感的图片，就显得不够合适，带有环境食材元素的图片才更让用户有共鸣。
2.是否能清晰表达产品核心内容？
图片是否主体明确？能一眼正确无误的传达核心内容？会不会因为其他元素元素抢了主体视觉，找不到视觉重点？
3.是否美观、有品质、让人想拥有？
图片是否能表达美好生活以及美好品质的向往？光影关系是否自然？图片是否高清有细节？
当明白图片如何选择后，还想和你分享一些冷门且重要的图片过稿小技巧。记下来，将大大提升你的设计过稿率。
漂亮图片有很多，如果我们都以漂亮为基准，找出来的图片也会形色各异。由于用户的实际使用场景是：浏览一个完整APP，统一风格调性比美更重要。如果商品角度不一样；饱和度高低不同；抽象与具象等，都会形成产品不统一，用户视觉不适应等问题。
有时我们为了赶时间，直接用图片填充插件，让图片区域自动填充。但我还是想要给到你这样一个建议：一个专业且成熟的设计师，即使是设计初稿，也不能随便拿张图，凑合一下。任何时候的汇报，都需要有着处女座对于事物的完美要求，过自己这关。因为任何时候你的表达与表现，都形成了你在别人心目中专不专业的看法，从而影响着后续的设计话语权问题。如下图都是商城陈列页面，右侧的图片给出上线的实际效果，更贴合产品，方便设计决策者给出建议方向，或做出决策。
我们都是视觉动物，不管你是否愿意承认：我们常常通过视觉表象，才决定是否愿意去更深入的了解某个东西。
设计就是在做产品视觉表象的表达，我们需要尽可能使用贴切的，漂亮的图片。让UI视觉看起来更加美观，让用户愿意停留，认可以及信赖平台。
转自：站酷-丘丘的设计笔记
对于以下场景，你是不是有那么一点点熟悉：
视觉A：「视觉 B，把你之前的稿子发我下，我的页面里也有组件 A」
视觉A：「稿子里的组件 A 怎么跟视觉 C 刚刚发群里的不一样啊，我以哪个为主？」
视觉B：「刚刚业务通知组件 A 得修改，这次大促有 30+ 个页面都用到，这修改量这么大咋办？」
交互A：「这个 tab 上的文字看不清」，视觉A：「我觉得挺清晰的了」
开发：「为什么每次给的设计稿，明明长得都差不多，可尺寸就差了几个像素，我又得写新的样式表进去」
以上的对话，在大型且多人合作的项目中尤为常见。
随着大促项目体量越来越大，参与人员越来越多，这些问题越发明显，直接影响了活动的视觉统一性和整体的工作效率。因此我们开展了营销组件库的设计。
组件库就是界面设计常用控件或元件的集合，「组」是设计元素的组合方式，「件」由不同的元件组成。
其工作方式和乐高原理差不多，玩家（设计师）通过小元件（设计元素）或组件（模板）的不同组合形式，层层搭建和嵌套，最终组成建筑（页面）。
△ 乐高W16搭建过程，图片来自「什么值得买」
△ 页面设计过程
1. 保证用户体验的一致性
对于大促这种含有多个子项目，涉及到 30+ 的页面同期输出的复杂项目，每个独立的子项目虽然在需求上有一定区别，但整体的用户体验需要满足基本的一致性，减少用户认知和负担，提高用户的使用效率。组件库的建立，其统一的设计语言能保持设计结果的统一性，避免多人多风格的现象。
2. 提升效率
不同行业、不同产品、不同项目的组件库因其业务特点不同，其差异会非常大。那怎样的组件库才能满足「大促营销类」的项目需求？
分析研究
行业设计：行业优秀的设计系统、组件库搭建思维，以及其源文件，是最宝贵的学习资源。
主站设计：保证全站设计的一致性的同时，也是重要的学习参考；
过往问题：对过去项目的横向和纵向对比和分析，理解业务结构以及特点，从需求出发，拆解页面表达结构和所需组件的特点。
设计方向
通过前期的分析，明确了针对营销大促类组件库的设计方向：
拆分重组的组件化思维，解决模板灵活性和一致性的诉求
在设计方法上，我以 2013 年 Brad Forst 提出的原子设计方法论作为指导。方法的本质其实就是将页面拆解为最小元素（原子），然后原子可以演变成分子，分子通过多维度的组合形式成为组织，再到模板，最终生成页面（原理如下图）。
营销需求的多变性体现在分子的组合方式各不相同，但其共用特征是最小元素（原子）基本相同，因此统一最小元素，定义其组合的规则，即可从源头把控设计的一致性。同时通过特定的组合原则，设计师结合各项目需求根据组合和应用原则（布局、文字等）进行设计，从而实现其灵活性。
原子设计理论延展阅读：
明确了设计方向和设计方法后，结合营销项目自身的特点，开始了组件库的设计实施，整体流程如下：
梳理组件库
将近几期具有典型代表的页面收集整理分析，主要是为了以下 2 个方面的内容
ps：组件库强调的是通用和复用，因此无需把所有模块都纳入整理清单，做「合适」的，而不是大而全但可能臃肿的组件库。关于这个组件库的体量应该如何选择，可以看下文末的参考文献。
设计环节
梳理完组件库，按照原子设计方法论组件嵌套的形式进行组件设计。在 Brad 的概念里，是将系统分为了 5 个层级，但针对营销业务的多变性，要满足复用性和灵活性，越往上的层级复用性越差，因此在现阶段，采用了 3 个层级「原子-分子-组织」构成营销组件库。
「全局考虑」在设计的整个过程中，需考虑每个组件后续的使用场景以及设计师的使用方法，利用 sketch 功能（symbol 嵌套、丰富的配置项、响应式设计等），可以设计出一个高通用性的组件（如下图），以此达到增强每个组件的复用性，以及精简组件库的目的。（因文章篇幅受限，详细内容可见文末参考文献）
下面为每一个层级的详细设计：
第一层：「原子」是最基本和最小颗粒度的单位，工作中常以「元素」命名，例如：颜色、文字、图标、分割线等
布局：系统布局规范，需要通过统一的设计元素和间距规范去引导使用者们使用并且能够适配不同屏幕尺寸，目的是达到一致性，可适配、可控性原则。
「网格系统」通过前期的研究，网格系统采用的是目前最常用的「8点网格」，能更好地适配不同屏幕尺寸，2 倍的变化均能更好地保持偶数，不出现小数点的情况。
「设计原则」遵循格式塔理论：建立良好的信息层级，能让用户快速获取和理解有用、感兴趣的信息，并产生下一步行为。
颜色体系：「色值标准」为保证文本可识别性，结合Web内容无障碍指南（WCAG）2.0标准，做了以下定义：
颜色对比度检测工具：https://contrast-finder.tanaguru.com/
「衍生色设定规则」规律性设定衍生色，更好地打造页面信息层级
根据以上规则设定颜色体系
文字体系：项目中字体根据实现类型分为系统字体以及图片字体
「系统字体」为了较好的用户浏览体验，设计中优先采用开发直接写的系统实现的字体类型，不会因适配而产生文字不清晰或做图时不同系统渲染效果不同导致的不统一。
「图片字体」考虑到版权，以及字体在不同系统下渲染差异化的原因，选择了免费商用的思源黑体。
基础原子：「灵活性设置」充分考虑应用场景，利用 sketch 功能提高其包容性和灵活性。
第二层：「分子」原子排列组合构成了分子，工作中多以「模板」命名，例如：品牌模板、单品模板等
「局部到整体，整体到局部」原子和分子，其实是一个系统中，相互依赖的元素。因此在分子的设计过程中，会遇到原子包容性不足的情况，因此实际设计中，是不断在原子分子之间切换设计，不断完善各自的设计。
第三层：「组织」原子、分子排列组合构成了组织，工作中多以「模块」命名，例如：商品列表、内容卡片、入口模块、瀑布流图等
「保持克制，宁缺毋滥」该层面设计时，「局部影响整体，整体影响局部」的关系体现得更为明显，会在原子/分子/组织三个层面不断切换，进一步完善各个层面的设计。但过程中需保持克制，所有的设计应是围绕「复用性」和「灵活性」进行设计的，而非组合方式越多越好，多即意味着一致性在一定程度会受到影响。因此，应是从过往项目中，预测未来可能出现的情况，穷举后提取通用的组合规则后进行设计。
过程中多尝试不同方案设计，结合实际项目测试，择取最优方案。
整理设计文件，输出设计规范文档和使用说明。除了整理设计文件，梳理设计规范外，组件库相当于一个产品，需要有一份使用说明，为用户提供基础学习，提升团队成员的使用效率。
4. 迭代设计和维护
一个优秀的组件库绝不是 30 天速成班就结束的项目，而是一款产品，需有专人长期的跟进和维护，例：优化组件包容性；补充组织的种类等，从而逐步建立起适用于团队的组件库。
1. 打造组件库的几个关键步骤
2. 项目成果
组件库在 19 年双 11 项目中的应用，统一性显著提升，对比往年节省 76 人/天，平均效率提升 30%，其中主会场提升了 50%。
3. 项目反思
4. 设计小感悟：
这里讨论的是从细节处提升表单的设计
最近一直在做公司的内部办公项目，涉及到了排版和表单的问题最多，而且大部分都是来自于网页端的改版，因此在画界面的时候，关于表单里很多小细节都不太清楚，并且界面十分的冗长，因此就想把这段时间关于表单的设计做一个简单的总结，希望能帮到大家。
我们今天换个角度来说，最近学了原子设计，所以我们从原子的角度上将表单拆开来说，让我们更全面细节的了解表单，分为以下六个模块：结构、标签、操作、帮助、验证、反馈，首先我们先了解一下表单是什么？
表单是我们在网页和APP中使用频率比较高的模块，大多是数据采集的功能，并且都是需要用户自己填写或者编辑的，因此会在很多功能模块中见到，例如12306的信息填写页，个人中心信息、评论和动态发布以及登录页等等。
我从项目当中最深切的感受就是产品太抠了，网页上的信息哪个都舍不得删，整个搬下来，导致页面使用下来用户的体验很差，虽然很多时候表单里的一些内容是无法去掉的，但是还是希望能够简化表单，如下图所示：
用户注册表单时要一并填写姓名和生日，这种与注册无关的信息填写除了增加用户的提高留时间之外，降低对产品的好感度
信息的填写最好是从用户相对无抵触的信息开始逐渐到隐私的信息，而不是一开始就让用户萌生退意，如下图所示：
自如的房东签约里的内容个人觉得门槛还是挺高的，刚选择完自己的行业，就要填写公司的名称和地址，以及学历信息，这种比较隐私的问题一开始就让用户填写，其实会让用户对这个产品萌生退意。
如果实在是信息量很大但一定要在一个界面里展示，那么就将相关的内容进行分类组合，并且通过增加一些额外的空间或者主标题来分类。如下图所示：
12306、爱彼迎以及知乎的个人信息填写都比较多，但是将信息分类以后，就增加了页面呼吸和节奏感，从而帮助用户更加轻松完成表单。
而且这里在设计的时候需要注意的一个是分割形式，上图的三个例子分别使用了背景分割和留白分割，其中留白分割在填写时使用的比较多，因为大家要注意的是在编辑状态是有很多填写提示的下划线，背景分割或者分割线分割势必会造成视觉上分割感更强，因此在编辑状态留白风格是比较好的选择办法。
但是展示的时候分割线确实比较好的选择办法，如下图所示：
在表单中，标签问题比较多的在于标签的位置放在那里，我们经常看到的有左对齐、右对齐、顶部对齐和浮动标签。如下图所示：
浮动标签和顶部对齐目前来说是使用的比较少的情况，这种位置符合自然视线，能够快速帮助用户完成表单，但是却用的不是很多，因为关于表单的填写，产品还是希望用户能够慢下来的，通过左右阅读，让用户仔细阅读标签，如下图所示：
目前手机端使用较多的是右对齐为主，毕竟用户理解和填写速度都属于适中。
在操作的设计问题上，我们一般拿不准的就是不知道按钮要放在界面右上角还是下方，我们先说第一种：
这是目前不管是设计还是使用，都是界面中出现频次比较高的一种方式，如下图所示：
这种形式适用于界面信息内容不多，并且用户的可控性比较强，在UGC的产品中较多出现。
优势：按钮的视觉层级不是很高，方便用户更专注于当前页面的填写
缺点：按钮在右上角，不太方便用户一只手操作。
用主题色作为按钮的主色，并且固定在界面底部位置，如下图所示：
优点：位于屏幕下方，方便用户点击，同时视觉层级高能够吸引用户的注意力
缺点：会遮挡表单，导致用户会错过一些信息，因此这样的按钮大部分都是会放在信息不重要或者不用完全都填写的表单界面上。
这里的底部与第二种不同，第二种是固定在界面的底部，但是这种是固定在表单的底部，如下图所示：
优点：符合用户的阅读习惯，同时能够引导用户将表单信息看完，因此这种比较适合用在表单有必填项目的表单中使用。
缺点：如果表单内容比较少，在视觉上就会显得拥挤
帮助提示大多出现在产品的登录页和隐私信息的填写界面，不同的步骤需要考虑不同的情况。
未填写时给与用户的提示，这种情况是最常见的表单形式，如下图所示：
将需要用户填写的表单信息给予的一定的提示和解释，安抚用户在面对大量需要填写信息时的情绪。
填写验证后出现报错或者不符合要求时，需要作出反馈，可以有下图几种情况：
上图中两种不同的情况，针对性的报错和局部的报错，都分别代表了不同的场景，个人认为针对性的报错在登录页的报错上也能够极大的提高用户的体验。
在用户未对当前页面有操作时，按钮需有不同的表现形式，让用户对操作的行为及结果有预先的心理感知，如下图所示：
很多操作前的按钮都会置灰，显示不可点击的状态，除了给用户提示之外，也是为了避免误操作，当然现在还有一种方法就是如果误触页面会有提示
点击按钮后给页面增加一些微动效，提起用户的兴趣，同时提升表单的转化率。
转自；站酷-潘团子
本文分享国际化司机端首页改版完整思考过程，化繁为简提升司机使用效率，提升产品用户体验。
随着滴滴国际化业务脚步不断加快，司机端始终是作为承载全球化业务运力的基础保障。
同时，在移动通信技术高速发展的背景下，不同国家间的传输速度与硬件设备差距正在不断缩小，用户对应用产品的期望由基础的可接受、可使用、功能齐全，向更易用、简约、更为专注的产品使用体验上转变。
在新阶段下，「为全球司机用户提供一个「克制」「可依赖」的产品使用体验」、「为业务拓展提供有力的体验支撑」是体验设计团队在新的阶段下提出的目标。
2018 年 9 月我们与产品同学深入拉美当地对司机侧进行为期 2 周的产品体验调研。虽然在当地的时间较为短暂，但是我们依旧感受到了拉美国家的习俗文化和人文特点。
相比中国人的含蓄内敛，巴西与墨西哥人显然更加热情随和。
在巴西，这个世界上假期最多的国家，处处体现着人们对生活的享受才是自始至终的追求。无论是世界杯一个月狂欢长假，还是周末下午两点开门的商区，总会让人羡慕的同时刷新你对享受生活的认知。
而娱乐至上的墨西哥人，热情友好，能歌善舞，我们常说的放飞自我在这里几乎成为墨西哥人每天的生活常态。他们喜欢享受当下，后天下之忧而忧。他们觉得工作赚钱就是为了更好的休息，大多数人每天都是开朗乐观的处世态度。
同样，落后的基础建设、糟糕的交通状况、教育水平低下、价格昂贵的电子产品以及相对不太稳定的社会环境，也是它们共同存在的问题。
在当地，我们通过实地调研与用户访谈等方式，针对产品体验的问题与司机进行面对面沟通。收集了很多宝贵的用研资料与司机诉求，如司机希望平台为他们推荐订单引导，司机希望获得更多的实时动态讯息和司机每天都可以查看自己的收入状况等，集中体现在效率、感知、体验这三大方面。
其次，伴随着业务的不断增长，越来越多的功能使得我们的产品变的更加复杂，旧版的框架布局早已是不堪重负，无论是现存的体验优化问题，还是未来业务功能的拓展问题，旧的框架体系都是难以为继，无法再通过简单的修补来满足用户和业务未来的诉求。
改版升级对产品本身来说是一件非常重要的事情，需要对多方因素进行慎重考虑。经过多次的沟通讨论，权衡改版对产品可能产生的利弊关系，采用小步快跑，快速试错，分阶段分模块的方式进行。
首页既作为承载核心功能（发车）的载体又是其他重要板块的分发的入口，在内容呈现与用户感知上都存在很大的体验提升空间；我们通过拆解业务中长远需求规划得知，大多数重点需求依赖于首页框架布局，而现存首页框架无法满足业务诉求；在竞品的改版中首页的变化最大，并在司机群体中取得比较正向的反馈；通过上述分析，决定率先对首页进行优化改造。
首先我们与产品、运营侧进行深入讨论，结合用户访谈整理的用户诉求，对此次首页改版的目标达成一致。
在旧版的框架体系中，大量信息在首页呈现，功能层级复杂，重点功能难以突破和查找，关联较弱的信息架构严重影响和分散了司机的关注点。随着业务模式不断扩展，首页新需求类型逐渐增多，一套更加具备灵活的拓展能力和管理能力的首页框架尤为重要。
首先我们将旧版的首页布局打破重建，对现有模块进行整理。功能相似、定义模糊、司机操作相对低频的模块进行合并、删减。
对司机高频操作模板进行场景划分，将相关信息进行聚合处理，通过对入口的强化，来明确司机对不同模块的认知。
出车管理
将与出车相关信息进行组织聚合，结合司机不同的使用场景，将功能与模块进行结合，加强认知，减少司机多余的思考与判断，快速响应，提升工作效率，同样也为业务在有关出车功能方面提供灵活可拓展的组件框架。
收入管理
通过显示司机最关注的今日收入信息，为司机提供方便快捷的查看功能，使司机更专注于工作本身。同时对收入管理入口起到了强化认知作用。
信息管理
对关于个人相关的信息通知及功能操作进行聚合，方便司机对个人信息进行快速查看，提高查看效率。
通过对框架模块的标准化定义，后续的业务需求便可以进行归类管理，根据不同需求的不同属性，结合功能使用场景，选择合适的模块进行展示，提高司机使用效率同时增加首页的业务框架扩展能力。
通过对框架的重构，有效的解决了首页信息承载压力过大，功能层级复杂的问题，同时地图的面积相比旧版首页也大幅增加，信息呈现更加简洁、轻量。
出车操作作为首页的核心功能，通过调研得知，司机普遍反映在旧版首页中存在出车操作感知弱、收出车状态区分不明显的问题，对司机的操作体验和感知体验造成了比较大困惑。
在首页改版过程中我们着重对出车操作进行了设计分析，基于对业务的了解和竞品的分析，得出以下三个结论：
通过「两强一弱」，减少司机困惑提升发单效率的同时，间接的延长司机的在线时长。
完成页面设计后我们发现，操作按钮通过静态视觉角度去表达收出车空间位置关系是十分困难的，仅通过 Toast 提示会造成用户理解的断层，于是提出使用动效去进行「搭线」串联，搭线发车前按钮的点击和收纳后的位置提醒进行视觉体验上的串联，从而达成感知增强，解决视觉体验层面不容易解决的问题。
丰富的订单奖励活动是我们与竞品相比重要的竞争优势，司机在完成定量订单的同时提供了更多的额外收入。查看每日奖励活动，已成大多数司机每日上线必做的事情。
与旧版相比，在新版首页中通过提升奖励入口层级，缩短了查看奖励活动操作路径，从而方便司机快速查看。
通过首页透传的奖励卡片，司机在首页即可获取到推送的奖励相关信息，及时获取到奖励预告和进度，提升了司机工作效率的同时加强了司机对奖励活动的感知。
在经历了快速奔跑的粗放阶段，我们也在思考司机端产品究竟以怎样的品牌气质传递给海外的司机群体。
在当地，我们在司机心目中更像是合作伙伴，凭借真诚互利的态度赢得了当地司机的用户。
真诚、热情与融合我想这就是我们想要传达的核心品牌情感，而克制、可依赖将作为产品体验的设计原则贯穿始终。
颜色系统
司机端颜色系统在基于现有品牌色基础上，结合不同国家颜色文化的理解，新增加符合本地化的辅助色系，以提升产品的亲和力，传递品牌情感。
文字系统
针对司机用户的操作使用场景，对文字字号梯度进行提升，通过文字粗细、颜色、大小加强信息对比度，使司机在更多复杂场景下可快速获取重要信息，提升阅读体验。
在此次改版中新引入 Barlow 与 DIN Alternate 字族作为模式数字展示字体，两款字体分别为 Android 及 iOS 系统下默认包含字体，相比 Roboto 与 SF Pro text 两款字族，在数字展示上更为明确、识别性更强，同时因为自身「纤瘦」的特性，在屏幕横向面积上节省更多空间。
业务在不同的阶段有不同的侧重方向及打法，设计侧根据业务所处阶段应及时的调整自身的目标定位，快速响应，积极探索设计的机会和突破点，在不同的阶段发挥自身价值，助力业务达成共同目标，为用户创造更便捷的产品使用体验。
首页改版从立项到设计再到研发，多部门同学紧密配合，在有限的时间内最大化的完成预期上线效果。
全量上线后，通过问卷对首页改版进行满意度收集，司机对新版首页的满意度平均值高达 93%。取得的成绩离不开每一位参与改版的同学支持，也得益于国际化团队自始至终对产品体验的重视与认同。
作为司机端体验升级的第一步，首页改版只是一个开始，希望通过不断的打磨优化，秉持初心，为全球司机提供更克制、可依赖的出行平台。
文章来源：优设
运营类活动是在某一段时间内进行的，有明确业务目标（业务转化、品牌传播）及营销群体，依赖游戏化手段带来优秀用户体验，从而获得成功的一类活动。
1. 生命周期短
运营类活动生命周期较短，常在某一段时间（可能是周期性的），一般跟随时节热点或者运营节奏来进行。较短的生命周期给设计、开发、数据等带来较大挑战，设计程式化提供基本设计思路，组件化降低设计成本。
2. 业务目标明确
运营类活动一般以产品营销、品牌运营为目标，发放各类优惠券大众目标用户，从而带来业务转化，或者营销企业品牌，比如常见的年底 h5。
3. 有一定故事场景及氛围
运营类活动需要较强的故事场景。良好的场景设计、氛围营造可以带来沉浸式的用户体验，与用户建立情感共鸣。从而提升用户参与度、带来好的业务转化。
故事场景结合时节热点，同时考虑活动需要营造的体感氛围。
4. 人群细分
运营类活动的特征在发起之初就有特殊的运营目的和特定特征的用户群体。为实现最优的业务转化，需要在设计之初明确活动覆盖的用户人群。同时在各个环节都能考虑到特定用户群体的不同需求，尤其是在业务转化的过程中，好的人群细分往往带来事半功倍的效果。
5. 游戏化
引入游戏机制及游戏元素。
运营类活动结合时节热点，通过富有故事性的视觉传达（插图、动效、声音等设计元素）带给用户沉浸式的体验，与用户建立情感共鸣，从而有效的鼓励用户行为。
沉浸体验的营造对设计师提出了更高要求，可以从活动设计的故事感、用户代入感、产品互动感、主体差异感几个方面来思考入手。
运营类活动中广泛应用了游戏化机制和元素，它们是活动成功的有效保障。设计时综合考虑业务及用户需求，从用户动机激励、行为引导的角度出发，将运营活动游戏化。可以在活动参与深度的各个阶段引导用户操作，从而达成活动目标。以下列举了运营活动中常见的用户动机，后续我会从用户参与路径出发，尽可能详细的描述在用户参与的每一个阶段起作用的为动机，以及实现的手段。
大奖带来的诱因效应
动辄百万的大奖奖励几乎已经成为运营活动的标配，在动机理论中，用户行为的产生来源于需要，需要导致内驱力，引发行为，从而推动用户实现特定的目标。当目标的诱惑力很大时，即使没有内部驱动也能激发行为。这也是众多运营类活动大奖存在的理由。
占便宜的心理
爱占便宜是人的本性，从心理学角度讲，占便宜就像是额外得到的惊喜和奖赏，可以让人产生满足感！用户在这种心理作用下，会为了小利益去做出设计预设的行为，将业务需求设置在‘占便宜’的路径中可有效提高参与、转化率。比如在设计中用中奖动态弹幕来强化用户参与的动机，提高参与率。
有趣和好奇心
人天生具有好奇心，它帮助我们适应不断变化的环境、发现新的资源，是一种「无法抗拒」的行为动机。在运营活动中，用户会被有趣的活动页面，未知的规则设计所吸引，从而开始主动「探索」。这也是用户参与的动机之一，设计中精致的 UI、有效的页面信息传达保证了用户好奇的有效性。
即时反馈及阶段性成就
「即时反馈」是沉迷现象发生的原因。学习之所以痛苦正是因为其反馈链路太长，你只有在考试或者应用到所学知识时才能获得反馈，还有可能是负面的。在活动设计中，每一次用户操作都会有及时、细腻的反应，可以给用户带来精神愉悦，同时设计的阶段性成就又给用户带来成就感，用户会不知不觉中在活动中越走越远。
随机奖励的多巴胺效应
人类的本能热衷于冒险，随机的、不确定的奖励能够刺激大脑分泌多巴胺，带来愉悦感，从而刺激用户行为的重复。在活动设计中，常用到这一理论，比如抽奖机制。
所有权与拥有感
当用户感到他们拥有或控制某样东西时，会自然而然的强化它的属性、发挥其价值。尤其是通过适当的付出和自身努力，用户还可能不合理的高估其价值。在活动设计中，常使用户通过易实现的行为获得权益，通过「幸苦操作」强化了拥有感，提升其心理价值，从而促进用户对权益的使用。
稀缺性与用户渴望
稀缺性的心理学原理在于人们想要获得某样东西的原因仅仅是它太罕见，或者无法立刻获得。它破灭了人们对情况的控制感，人们会为了重获控制而采取行动。设计时，可以利用这种心理鼓励用户做出期望的行为。常见的有时间限制、权利限制等。
使命感/社交影响/损失规避……
运营类活动中数据和策略思维是保证活动效果最大化的有效手段。活动需求提出时，即考虑可能的参与用户细分；活动开始时，考虑引流途径和引流方式、物料的差异化；活动进行时，根据用户细分策略化任务推送，根据埋点数据监测积极调整相关设计元素。事无巨细才能确保活动成功。
文章来源：优设
蓝蓝设计的小编 http://www.lanlanwork.com