今年已经是 2020 了，各位作为时代的弄潮儿，上网冲浪是生活中的不可或缺，丰富的冲浪生活中必不可少的当然是买买买，面对琳琅满目的商品图与文案，用户怎样才能快速抓到重点？或者说，怎么样才能让信息出现在合适的位置？
首先我们要了解浏览信息这个动作的本质和特征，浏览的本质就是大脑通过眼睛去提取信息，是一个传达→解码的过程，在这个过程中又存在一些特性，我们可以利用这些特性去进行一些更的信息传达。
受阅读习惯影响，人们阅读的起始端都是在左侧，结合依据尼尔森等老前辈发布的眼球轨迹研究报告可知，视觉浏览习惯呈「F」型且是不受控的潜意识习惯；同时可以延伸出例如「E」、「Z」等浏览模型，我们可以根据这些视觉模型的特性，结合产品的战略层目标，将信息放置在合适的位置，已达到信息传达率的最大化。
了解了基本的视觉浏览模型，那我们的地基就已经搭建好了，接下来我们来看看地基搞定之后的结构要怎么去布局。
首先我们需要清晰产品的属性，电商平台的本质是物品的交易，因为线上的特殊性，产品中图片与文案对于平台的 GMV 就存在最直接的关系。这个时候，单元布局的轮廓就出来了，就是「商品图+关键词文案」。
同时，不同平台战略方向、发展阶段、团队规模等因素的不同，所针对的用户群体、消费阶层、心智、审美等各个因素都会大不相同，有时候甚至在同一平台中针对不同的活动、不同的品类进行细致的场景划分，产生不同的单元结构以满足商业目的上的需要。
720° 全方位了解平台的属性特征后，我们就可以开始利用这么信息来搭建基本的单元结构了。
例如平台主攻下沉市场，用户群体多为三四线，这个时候用户吸引点在于商品的价格与卖点关键词，这时候我们就可以拉大关键词文案的占比，缩小图片的占比，让他们关注的内容尽可能多的进入他们的眼睛，吸引购买意向模糊的用户点击，增加购买意向明确的用户匹配商品的速度，已达到 GMV 的提升。
简单来说，过程中需要考虑到平台因素所产出的图片尺寸/比例/精致度/是否统一等，与文案搭配所呈现的是否适用当前消费场景及用户心智，是否可以提升用户的转化率，是否可以提升平台的下单率。
单元的架构是多样且复杂的，就像一块七巧板。重点就在于对于产品属性和用户行为、场景、心理等特征的分析，需要权衡各个关键点的重要性，把用户需要看到的信息、我们想让用户看到的信息、用户希望看到的信息以合适的结构状态呈现给他。
我们将大体架构搭建好之后，剩下的就是要把细节元素给点亮，让他们起到一个点睛的效果。
细分一下，其中涉及到的细节元素大致为活动标签、折扣标签、跳转按钮等常规的分子部件，在结构中，图片、商品名称、价格是用户关注的重点，其他的部件则起到辅助刺激的作用。图片和商品名称的大体结构我们在上一步已搭建了，剩下来我们看看这些小部件该如何合理归置。
先从标签说起。整体框架出来了，用户所需要了解的商品信息就已经基本呈现了，这个时候用户心智上更多的主观意向，寻找合适的商品，而标签的出现，更像是一剂兴奋剂，强烈告诉用户：「这个品热度第一！」、「这个品是款！」等我们刺激用户的声音，增强用户查看的欲望。
这个时候疑问来了，那放哪里合适呢？
活动标签，多为显示该商品的热度、促销主题、排名等一些大的状态性的信息，为的是在用户心理层面给这个商品带来更多的好感度，放置的位置可以结合具体场景去分析，可以考虑与商品图进行结合放置。
遵循由上而下滑动的交互原理，我们可知在每个单元的顶部会是滑动浏览时第一被眼睛识别的信息，而且可以利用这个心理去给还没看到具体商品的用户进行一个心理铺垫，比如商品的品质、权威性等，先入为主的进行心理建设，再结合视觉浏览模型，合适的位置就出来了。
次要信息比如倒计时、商品折扣、商品特点等辅助信息，结合布局场景考虑，有的可与图片一起放置增强品质感，有的可与文案一起放置增加决策信息，有的可与价格一起放置，刺激用户进行决策，是很有灵性的一个点睛之笔。
最后是按钮，在这里的按钮可以理解为浏览过程的一个闭环节点，也是一个操作的终结点，是最后的临门一脚。位置当然是在右侧最为合适，降低操作难度，同时也是整个单元的一个视觉终结点，浏览完流程之后决定是否点击跳转。当然，你可以利用你的方式去引导或刺激用户点击，你可以的。
文章来源：优设 作者：阿类杂碎面
大纲
结语：作为设计师有时会听到需求方表述“这种极少出现的情况，我们可以暂且不管它。”但是细节见真章，所有优秀的体验设计都必须照顾到方方面面的缺省情况。让每个用户的流量价值发挥到最大，产生相互信任的良好的品牌关系。这样的平台生态是良性的，这样的产品会更有流量转化的商业化价值。
转自：ui中国-腾讯动漫TCD
「小宇宙」是即刻团队开发的播客App，目前已上架各大应用商店，仅能通过邀请码使用，导致一时间微博上出现「一码难求」的情况，那它与其他播客App有什么不同?
进入App即展示「信息流」推荐，每日更新3条播客「信息流」推荐，听的时间越长，会推荐越多更加精准的播客内容。那用户如何判断推荐的单集是否有自己想要听的内容呢？如下图所示，页面上单集信息展示条目的空间较大，在首屏约能展示2条的单集内容，除了基础的节目封面、节目名称及单集名称外，小宇宙巧妙地通过将热门评论外显，辅以展示播放量及评论数量，引导用户点击进入二级页面，进而形成转化。
不同于传统播客App仅能搜节目名称，小宇宙还支持搜索单集和用户，甚至是节目内页的内容也可以搜索到。对于那些「我对栏目本身不感兴趣，只想听其中的某一集」或者「我关注某个人或某个话题，想听听看关于他的一切」的节目，使用单集搜索功能可以更简单地直达所需。
让人惊喜的是，在节目内页长按选中任意词汇可以呼出「智能搜索」功能，这个智能体现在它允许用户选择用magi搜索和用互动百科搜索相关内容。这让我想到了Mac上一款很好用的工具PopClip（通过对文本内容的扩展来提升操作效率），小宇宙的智能搜索对于边听节目边扒关键词的「考据党」来说，无疑会大幅提升在听节目时获取资讯的效率。
在单集播放界面，除了常规的进度条拖拽、快速后退/前进等功能外，还有一个点赞功能，用户听到精彩的内容或引起共鸣的部分可以通过点赞进行互动，从点赞功能的反馈到进度条的高度的升起都能够进行实时的反馈，同时也可以帮助其他听众了解单集内容的关注点，以此为⽤⼾营造出符合他当时⾏为和感知的情景，可以达到提高用户的参与度的目的。
评论页的输入框常驻于页面底部，点击后输入框高度延伸，引导用户评论互动，此时用户如果是通过单集播放界面进入的评论页面，还会出现标记时点的选项，勾选后评论内容即带上了单集内容的时点。而时点高亮色+下划线的表现形式可以引导用户聚焦注意力和点击进行内容的收听，当其他用户点击带评论中的时点即可直接跳转至对应时间点播放单集内容，为⽤⼾之间的互动建⽴起羁绊，方便用户间的讨论交流，进而提升了点击率和单集的收听率。
另外，在用户输入评论时，输入框并不是以模态的形式出现，在用户评论的过程中依然可以滚动页面进行交互操作，这样做的好处在于不打断用户操作的连续性。以iPhone X的屏幕高度为例，除去标题栏+评论输入框+键盘高度外，留给评论本身的空间仅有大约1/3左右，在空间有限的情况下，用户滚动屏幕查阅感兴趣的评论或针对性进行回复的行为非常连贯，非模态的处理可以进一步降低用户互动的门槛。
这里有一个改进小建议，输入框内的预制文案可以换成引导性更强的内容或由系统自动生成一个场景适合的评论，这样不需要用户自己思考写什么内容，降低用户评论操作的成本，提高用户参与度。
小宇宙目前在社交上的尝试处于用户友好型状态，用户可以查看他人的播客订阅列表，发现同好，即「相近信息的收集爱好者容易获得共鸣」。如果这个有共同兴趣爱好的人刚好是用户收听的主播，就可以很容易拉近听众和主播的距离，主播对于听众来说不再是手机屏幕后面冷冰冰的声音，他更像你的一个朋友，你可以去了解他的喜好，讨论共同话题，更好地跟他进行互动。
不同的主题表达了不同情感，针对不同的社会群体的设计风格也会有所不同。
回到产品本身，小宇宙根据播客节目封面的主题色来适配不同播客信息页的视觉风格，营造出适合不同播客风格的氛围，以此来传达不同播客节目的特点。
若在热门的单集下评论，且评论点赞数最高，小宇宙领航员（官方账号）会给你留言，告知「你的评论上首页啦！」，通过这种与用户互动的方式激起⽤⼾的情感认同，提升用户评论的积极性。
点击「加入播放列表」，通过动效形式给予用户反馈，让信息的展示更生动自然，为产品增添趣味性的同时，给予用户更美好的操作体验。
下拉刷新动效中以「宇宙」图形为载体，将产品的Logo融入了其中，赋予产品独有的个性和灵气，让用户切身感受到这是一个可以探索的「宇宙」，而不是一个冰冷的工具，在减少用户等待过程中引发的负面情绪的同时强化了品牌形象。
产品中使用了较多无文字按钮，对于初次使用的用户来说存在一定认知负荷，不知道这些都是什么功能。
存在相同样式的图标承载不同功能操作的问题：「播放列表」功能在「我的播客」页中点击后是加入播放列表操作，而在播放列表模态弹窗中，点击后进入播放列表的编辑状态，同个样式的按钮承载了不同功能操作，容易引起用户困惑，带来冗余的学习成本。
当你收藏了一篇文章，收藏按钮状态从「收藏」变为「已收藏」，点击「已收藏」可以取消收藏状态，这是用户对于两个状态切换已有的认知。而小宇宙的加入播放列表功能，在点击加入播放列表后，再次点击「播放列表」按钮，会提示「已在播放列表」，而不是通常认知中的「取消加入播放列表」，容易带来认知错误。
列表右侧的「已订阅」按钮，视觉感知上像是不可点的状态，点击后提示「已取消」，再次点击提示「订阅成功」。对于有明显状态变化的功能性操作可以省去toast，这里通过「已订阅」和「订阅」状态的按钮样式变化已经给予用户清晰的传达反馈，再次提示反而多余。
小宇宙的体验分析就到这里，总的来说虽然存在一些需要优化的细节（毕竟还处于邀请码体验阶段），但是设计师可以学习的设计亮点有很多，感兴趣的小伙伴可以下载体验一番，也欢迎大家一起留言交流。
深色模式该从何处着手设计又要考虑哪些因素？一起来看看~
其实回顾我们常用的APP，有很多都更新了深色模式，而且每个APP对深色的定义和设计都有差异。
实际上深色模式已经来临，而且在很多产品中都能发现它的身影，之后也会愈加流行。那么设计师面对深色模式，该从何处着手设计又要考虑哪些因素呢？
本文就为大家提供一份全面的总结。文章目录如下：
1. 需求趋势
过去一年以来，Android 10和iOS 13上都适配了深色模式，而且Apple和Google也一直致力于将资源和注意力投入到深色模式中，这也让深色模式备受用户的关注。
2. 专注内容
深色模式在弱光环境下具有更好的可读性，让我们更专注于眼前的屏幕。同时深色的背景会降低内容周围元素的影响，特别是以图片和视频为主的应用，让用户更专注于内容。
作为内容消费型应用的Netflix ，把深色背景作为默认设计样式，深色的设计让用户更能集中注意力，延长使用时间。
3. 减轻刺激
相对于其他颜色，深色系的设计在夜晚看着最舒服。可能晚上玩手机不用担心光线太刺眼，但是深色模式对护眼并没有什么帮助，只能说可以减少对眼睛的刺激。
4. 提高续航
深色模式更省电只适用于OLED屏幕。OLED面板的每个像素点可以单独发光，当使用深色模式时，部分像素点被熄灭，只点亮部分像素，屏幕的一部分相当于处在休眠状态，所以会更加省电。
在深色模式下，Apple重新审视了iOS中UI样式和颜色的含义，让我们来看看在iOS上设计深色模式带来的变化。
语义化颜色（Semantic Colors）
所谓语义化颜色，就是不再通过某一固定的RGB色值来描述颜色，而是根据用途来描述，让界面元素可以自动适配当前的外观模式。
淘宝团队就参考了苹果官方的适配建议，通过语义化颜色的方式进行适配，使适配成本大幅降低。设计师根据不同UI元素的特性先期制定颜色语义化规则，进而技术在框架层面通过「颜色自动反转」技术实现颜色反转。
系统颜色
除了语义化颜色，Apple还提供了9种预定义的系统颜色，在浅色和深色模式中，这些颜色会动态变化，支持整个系统的外观，同样也可以自适应选定的界面样式。
模糊与动态效果
在iOS13上，苹果引入了4种模糊效果和8种动态效果，它们自动适应iOS界面样式。这是在浅色和深色模式下不同的模糊效果。
苹果还在iOS深色模式排版套件中引入4种动态效果，其中3种为叠加效果，1种分隔效果。
谷歌提供了广泛的文档支持，帮助设计师了解深色主题如何在Android生态系统中运行。
Elevation（阴影）
UI界面元素间的投影最能让用户清晰地感知用户界面的深度。在设计深色主题时，组件将保留与浅色主题相同的默认阴影组件。Elevation越靠上, 颜色就会越浅。
无障碍性与对比
深色UI设计中的背景应足够暗以显示白色文本。设计师要注意背景和文字之间至少使用15.8:1的对比度。这样可以确保将正文放在最前面时，能通过WCAG（Web内容无障碍指南，使网站内容更容易访问）的AA标准。
颜色
深色模式必须避免饱和的颜色，以免引起眼睛疲劳。相反，设计师应专注于使用不饱和的颜色，以增加清晰度。主色和辅色的选择还取决于对浅色和深色UI主题的考虑。
文字不透明度
在深色背景上设计浅色文字时，高度强调的文字不透明度为87％；一般提示文字的不透明度为60％；禁用文字的不透明度为38％。
苹果和谷歌都利用各自的设计原则，为深色模式设计做准备工作。在实际设计过程中，不单需要这些基本原则，更重要的是要注意设计深色模式的实用要点。
设计深色背景时不是简单的把白变成黑，而是对背景使用比较暗的色调，以减少眼睛疲劳。
在浅色模式中，我们倾向于用细微的阴影来传达界面深度，使用起来更加自然。但是在大多数深色模式下，阴影的效果并不明显，通常用颜色的深浅来传达界面的层级关系。
关键点：注意应用场景
在知乎的深色模式中，背景的设计从深到浅使用了三级灰度，让页面的层级更分明。
一级灰度的应用场景主要是大的背景色，使用面积相对比较大颜色最深；二级灰度的应用场景是选项的背景色，根据选项的数量设置使用面积，位置排布比较灵活；三级灰度的颜色最浅，使用面积最小，通常用在分割线中。
白底黑字和黑底白字带给我们的用眼体验是不一样的。设计不当的深色模式常常因为强对比而变得很刺眼，同时为了提高对光线的吸收虹膜会张得更开，更容易造成眼部疲劳。
关键点：文字间的对比
深色模式中，文字的用色通常是纯灰色，不同位置的文字例如标题、正文和注释使用深浅不同的颜色作对比。上图是深色的微信，就利用这种方法来区分不同文字内容，展示文字层次关系。
另外每个应用的定位都不一样，界面中想传达的信息也有差异，所以要注意不同的设计思路。
关键点：文字与背景的对比
已经更新深色模式的应用主要分为两大类，一类属于工具型应用例如QQ、微信、百度网盘等，这类应用追求的是信息的有效传达，在设计时文字内容和背景色的区分比较明显。
上图是百度网盘的深色模式，可以看出来标题文字与背景有很明显的对比，保障了用户使用时的可操作性和易读性。
这样的设计不需要用户过于沉浸式的阅读，只需要帮助用户快速找到有用的信息并方便使用，这是工具型应用在设计深色模式时必备的原则。
另一类属于内容型应用例如知乎、简书等，这些应用更注重沉浸式的阅读体验，因为用户通常会在某个界面中停留很久来查看内容，所以需要文字与背景的低对比度为阅读营造柔和的氛围。
简书的深色模式中，文字与背景的对比关系就设计得很弱，整个界面呈现出灰色调，这样的设计有助于在弱光环境下的长时间阅读和浏览。
深色模式应该避免使用特别鲜艳的颜色，较高的明度和饱和度会与深色背景形成强烈的对比，让页面的可读性变差并加深刺激。
关键点：降低色彩明度
在由浅变深的过程中，知乎对改变了界面中所有图标的颜色。界面里面的图标和主题按钮的色彩，在色相、饱和度上都没有变化，但是明度被不同程度的降低，保证了在不同光照条件下的内容的可读性。
这是深色模式中处理色彩的一种方法，虽然在浅色界面中，我们更喜欢鲜艳的颜色，但明度低的颜色更适合深色主题。匹配这两个模式另一个比较好的方法是创建互补的色板。
无论深色或者浅色，都只是产品向用户呈现的一种界面状态，最终的目的是为了更良好的使用体验。
不管选择什么样的模式，都要记得从产品自身出发，并牢记这几点：
文章来源：优设 作者：Clip设计夹
财务和金融相关的应用是一个相对专业的分支，在这个领域当中创造体验优异的设计并不是一件简单的事情。身为资深设计师Taras Bakusevych 在这篇文章当中，分享了10个确保这类产品足够优秀的核心设计原则。
为何深色模式看起来不自然？它的实用性到底怎么样？深色模式是不是对眼睛更健康？结合文献，我们一起来探究深色模式的种种！
在过去的几年中，深色模式一直是用户最期待的一个功能。你可以自由切换你喜欢的模式来适应当前的场景，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耍家
蓝蓝设计的小编 http://www.lanlanwork.com