前言：

什么是产品的信任感？？

指：基于产品为用户提供‘可靠服务、价值依赖’的一种情感体验。

这种体验不仅影响着用户黏性的强弱、业务目标的实现，也影响着不同生命周期下给产品给来的价值。如图：

而在产品与用户间建立信任感的过程中，我惊奇地发现有3个因素贯穿始终：理念 > 内容 > 表现。

‘基于什么样的理念，向用户传递什么内容，并且怎么表现。’

所以，未来3篇文章主要围绕‘信任感的打造’，希望能系统性地认识它，挖掘更多工作上可实用的小技巧。

今天先分享第一篇：信任感的理念层

信任的本质：是让人觉得真诚、可靠、放心等。换句话说，它就是一种‘为用户着想，建立产品温度’的理念/方向，从而引导后续的内容都围绕该理念而进行。

那么，如何才能为用户着想，慢慢建立起对产品的信任感呢？？

既然为用户着想，那么可以试着从‘减少用户的投入成本’切入。

Part1：减少健康投入

健康投入，指用户使用我们的产品，可能会对身体上带来直接或潜在的负担/影响。比如视频看久了，眼睛就会感到酸痛。

针对这些负担与影响进行的一些关怀提示，可以用户提前消除、减轻这些痛苦，拉进与用户间的距离。

不同产品类型拥有专有的关怀点，所以比较通用的主要有5个：使用时长、使用姿势、夜间休息、夜间护眼、音量大小。

a.使用时长提示：

除纯工具类产品之外，大部分用户在产品上都有一定的使用时长（尤其是内容消费类产品），对于‘连续使用N分钟、或者满足特定时长’的用户，可针对该时长进行休息提示。

如有道精品课，在用户观看课程满40分钟 时有个时长提醒：

b.夜深关怀提示：

深夜本身是一个休息的时间，但还是有大量的‘夜猫子’根本停不下来。不管是主动性的娱乐消费，还是被动性的信息/工作处理，都将手机‘进行到底’。

此时对于‘深夜忙碌’中的用户，夜间的关怀就是一个切入点：比如企业微信，会在深夜启动页上展示 ‘夜深了，xxx’的文案提示。

虽然只是简单的一句话，但还是能感受到鹅厂对员工的关怀。

而且不管是C端还是B端，只要有用户在深夜使用产品的可能，都可针对性地给予关怀设计，体现产品的‘人性’。

c.夜间护眼提示：

夜晚周围的光线会变得幽暗，部分手机屏幕会自动变亮。时间一长会严重刺激用户双眼，并造成视觉疲劳（尤其是小学生群体）。

此时对用户进行护眼提示，不失为一个用户关怀点。

再如有道精品课：

d.使用姿势提示：

我们日常都会将手机横过来看视频、看八卦。而且相信各位都有过这样的经历：

当手机长期处于某个屏幕状态+重力倾向时，用户难免会出现手酸脖痛的情况。

此时进行使用姿势的纠正提醒，亦能起到关心用户的效果，从而建立良好的产品印象。

还是以有道精品课为例：

e.音量提示：

这个大伙都知道，过大的音量会影响耳朵听力。一般出现在各种音频、视频的产品与功能中。

Part2：减少金钱投入

没有人不会在意自己的钱包（除非你是对钱不感兴趣...），金钱上的收入与支出很大程度上会影响 人们对某事物的看法。

产品也是如此，若能帮用户减少金钱上的支出，或者带来真实收入。不仅能极大提升用户对你的信任度与黏性，还能增加产品的竞争力。

比如高德地图的打车功能，能显示所有车型的价格预览，帮助用户选择所需价格的车型。

无论是商品优惠券，还是返利。

只要能帮助用户钱包上的‘节源’或‘开流’，都能引发用户的信任感，从而信赖产品。

Part3：减少情感投入

情感投入，是指用户基于内心活动和情绪感受，对某事物所表现出来的一种想法。

这种想法制约着 用户是否接受我们的产品服务。一般体现在：安全性、性价比、真实性 3个方面。

a.安全性 - 放不放心：

人们面对某事物 可能会带来的伤害/损失时，都会有一种本能的“警惕感”。

就拿此次疫情来说，对于有‘出差住房’诉求的用户来说，‘住的安全’是重中之重。因此寻找一家‘无感染、每日消毒、卫生干净’的安全酒店，可以减低用户选择我们的警惕感。

而在酒店列表中，带有‘严格消毒’、‘健康守护’等安全标签的酒店，会给人带来一种安全、放心、信赖的心理效应，从而提升该酒店的转化率。

b.性价比 - 值不值得

性价比是人们衡量‘付出成本与回报价值’间的一种决策依据，没有谁会喜欢付出小于回报的事物。

而为了让用户降低这种决策依据，除了自我服务/实力的展示外，往往需要一种“参照物”来凸显性价比。

如美团上的‘满减神器’，通过不同的食物/价钱间的对比，让用户买到最具性价比的食物。

而“参照物” 的形式多种多样，不管是竞品数据。

老版本也属于一种竞品

还是是各种优惠信息、额外礼物/礼包、售后服务等等。

目的都是通过该参照物，向用户传递一种‘划算’、‘值得’的心理效应。

c.真实性 - 真不真实：

光是性价比高还只是片面依据，至于内容是否属实，成为了我们与用户建立信任感 中最重要的影响因素。因为没有人喜欢被骗、喜欢虚假事物。

而真实性的建立，在‘电商领域’应该被运用得最多。如大牌背书、证书授权、专家介绍、明星代言、官方保证、销量成绩、用户反馈...等等。

展示自己的真实、最具实力的一面即可，别过度吹嘘与包装，用户又不傻。

Part4：减少脑力投入

人们一向不喜欢复杂的东西，除了不易理解外，更担心因为自己的理解错误，会给带来意外的损失。

帮助用户减少记忆负荷、顺畅完成操作目标，是每个产品必不可少的设计点。

如微信转账，输入数字时会检测对应的数额，减去用户边输入 边计算“这是多少钱”的脑力投入。

而且对比支付宝的转账，微信这点确实做到了‘洞察用户需求’。

再如账号注册，提供‘剩余步骤’能让用户了解 当前处于哪一步、预测完成整个操作还需多久。

Part5：减少体力投入

除了记忆负荷，‘操作负荷’的减少也是一种‘为用户着想‘的方式。我们身边也存在太多这方面的例子：

如手机上，如淘宝的快链弹窗、支付宝的转账提示，都是前置用户的目标，缩短操作流程。

如电脑上，如Mac会保存耳机音量。

下次插入耳机时，会将扬声时的音量，自动调整至上次耳机插入时 所记录的音量。这样就免去了重新调整音量的操作。

以网易云音乐为例：注意 扬声时和耳机插入后 的音量变化.

这些都是帮助用户快速使用，从而减少体力操作的方式。除了前置用户目标、保存记录 外，常见的还有：给予默认值、自动选择/处理、多选与批量等等。

总结：

以上就是关于理念篇的内容，让今后的内容设计有了明确的方向。下面是走查表，平时设计功能、制作界面的时候可以看看，增加产品的温度。领取方式：公众号回复【信任1】

转自：ui中国-

大纲

                    

结语：作为设计师有时会听到需求方表述“这种极少出现的情况，我们可以暂且不管它。”但是细节见真章，所有优秀的体验设计都必须照顾到方方面面的缺省情况。让每个用户的流量价值发挥到最大，产生相互信任的良好的品牌关系。这样的平台生态是良性的，这样的产品会更有流量转化的商业化价值。

转自：ui中国-腾讯动漫TCD

「小宇宙」是即刻团队开发的播客App，目前已上架各大应用商店，仅能通过邀请码使用，导致一时间微博上出现「一码难求」的情况，那它与其他播客App有什么不同?

内容推荐

进入App即展示「信息流」推荐，每日更新3条播客「信息流」推荐，听的时间越长，会推荐越多更加精准的播客内容。那用户如何判断推荐的单集是否有自己想要听的内容呢？如下图所示，页面上单集信息展示条目的空间较大，在首屏约能展示2条的单集内容，除了基础的节目封面、节目名称及单集名称外，小宇宙巧妙地通过将热门评论外显，辅以展示播放量及评论数量，引导用户点击进入二级页面，进而形成转化。

强大的搜索

不同于传统播客App仅能搜节目名称，小宇宙还支持搜索单集和用户，甚至是节目内页的内容也可以搜索到。对于那些「我对栏目本身不感兴趣，只想听其中的某一集」或者「我关注某个人或某个话题，想听听看关于他的一切」的节目，使用单集搜索功能可以更简单地直达所需。

让人惊喜的是，在节目内页长按选中任意词汇可以呼出「智能搜索」功能，这个智能体现在它允许用户选择用magi搜索和用互动百科搜索相关内容。这让我想到了Mac上一款很好用的工具PopClip（通过对文本内容的扩展来提升操作效率），小宇宙的智能搜索对于边听节目边扒关键词的「考据党」来说，无疑会大幅提升在听节目时获取资讯的效率。

更便捷的互动

在单集播放界面，除了常规的进度条拖拽、快速后退/前进等功能外，还有一个点赞功能，用户听到精彩的内容或引起共鸣的部分可以通过点赞进行互动，从点赞功能的反馈到进度条的高度的升起都能够进行实时的反馈，同时也可以帮助其他听众了解单集内容的关注点，以此为⽤⼾营造出符合他当时⾏为和感知的情景，可以达到提高用户的参与度的目的。

评论页的输入框常驻于页面底部，点击后输入框高度延伸，引导用户评论互动，此时用户如果是通过单集播放界面进入的评论页面，还会出现标记时点的选项，勾选后评论内容即带上了单集内容的时点。而时点高亮色+下划线的表现形式可以引导用户聚焦注意力和点击进行内容的收听，当其他用户点击带评论中的时点即可直接跳转至对应时间点播放单集内容，为⽤⼾之间的互动建⽴起羁绊，方便用户间的讨论交流，进而提升了点击率和单集的收听率。

另外，在用户输入评论时，输入框并不是以模态的形式出现，在用户评论的过程中依然可以滚动页面进行交互操作，这样做的好处在于不打断用户操作的连续性。以iPhone X的屏幕高度为例，除去标题栏+评论输入框+键盘高度外，留给评论本身的空间仅有大约1/3左右，在空间有限的情况下，用户滚动屏幕查阅感兴趣的评论或针对性进行回复的行为非常连贯，非模态的处理可以进一步降低用户互动的门槛。

这里有一个改进小建议，输入框内的预制文案可以换成引导性更强的内容或由系统自动生成一个场景适合的评论，这样不需要用户自己思考写什么内容，降低用户评论操作的成本，提高用户参与度。

小宇宙目前在社交上的尝试处于用户友好型状态，用户可以查看他人的播客订阅列表，发现同好，即「相近信息的收集爱好者容易获得共鸣」。如果这个有共同兴趣爱好的人刚好是用户收听的主播，就可以很容易拉近听众和主播的距离，主播对于听众来说不再是手机屏幕后面冷冰冰的声音，他更像你的一个朋友，你可以去了解他的喜好，讨论共同话题，更好地跟他进行互动。

情感化共鸣

不同的主题表达了不同情感，针对不同的社会群体的设计风格也会有所不同。

回到产品本身，小宇宙根据播客节目封面的主题色来适配不同播客信息页的视觉风格，营造出适合不同播客风格的氛围，以此来传达不同播客节目的特点。

若在热门的单集下评论，且评论点赞数最高，小宇宙领航员（官方账号）会给你留言，告知「你的评论上首页啦！」，通过这种与用户互动的方式激起⽤⼾的情感认同，提升用户评论的积极性。

点击「加入播放列表」，通过动效形式给予用户反馈，让信息的展示更生动自然，为产品增添趣味性的同时，给予用户更美好的操作体验。

下拉刷新动效中以「宇宙」图形为载体，将产品的Logo融入了其中，赋予产品独有的个性和灵气，让用户切身感受到这是一个可以探索的「宇宙」，而不是一个冰冷的工具，在减少用户等待过程中引发的负面情绪的同时强化了品牌形象。

可以改进的地方

产品中使用了较多无文字按钮，对于初次使用的用户来说存在一定认知负荷，不知道这些都是什么功能。

存在相同样式的图标承载不同功能操作的问题：「播放列表」功能在「我的播客」页中点击后是加入播放列表操作，而在播放列表模态弹窗中，点击后进入播放列表的编辑状态，同个样式的按钮承载了不同功能操作，容易引起用户困惑，带来冗余的学习成本。

当你收藏了一篇文章，收藏按钮状态从「收藏」变为「已收藏」，点击「已收藏」可以取消收藏状态，这是用户对于两个状态切换已有的认知。而小宇宙的加入播放列表功能，在点击加入播放列表后，再次点击「播放列表」按钮，会提示「已在播放列表」，而不是通常认知中的「取消加入播放列表」，容易带来认知错误。

列表右侧的「已订阅」按钮，视觉感知上像是不可点的状态，点击后提示「已取消」，再次点击提示「订阅成功」。对于有明显状态变化的功能性操作可以省去toast，这里通过「已订阅」和「订阅」状态的按钮样式变化已经给予用户清晰的传达反馈，再次提示反而多余。

小宇宙的体验分析就到这里，总的来说虽然存在一些需要优化的细节（毕竟还处于邀请码体验阶段），但是设计师可以学习的设计亮点有很多，感兴趣的小伙伴可以下载体验一番，也欢迎大家一起留言交流。

文章来源：优设    作者：风景是行走的树

做项目的时候准备把js项目重构成ts项目，需要把文件后缀改成ts，一个bat脚本搞定，命令如下：

@echo off

rem 正在搜索...

for /f "delims=" %%i in ('dir /b /a-d /s "*.js"') do ren "%%i" "%%~ni.ts" rem 搜索完毕 @pause

把脚本放到根目录下，双击运行完就可以了

新拟物化设计只是一种风格吗？

最近正火的新拟物化风格（Neumorphism）在 2019 年底，设计师 Alexander Plyuto 所提出的「Skeuomorph Mobile Banking」作品中亮相。之后不仅被选为 2020 年界面趋势，又称为 soft UI。但这种风格在真实世界落地时，可视性上受到许多争议。

确实，新拟物化风格它算是一种风格，但又不是只有视觉上的风格这么简单，它延伸出来的议题，其实是扁平化跟拟物化之间的战争。

拟物化与扁平化的瑜亮情结

拟物化是 Apple 在早期设计中大量使用在界面上呈现对象属性、材质的方式。然而在 2013 年 ios7 发布时，Apple 开始为了画面简洁大量将界面元素扁平化，紧接着 Google 在 2015 年发布了 Material Design，宣示扁平化在 UI 设计中扮演着主导趋势的角色。2020 年真是百家争鸣的一年，首先是 BMW 发表的扁平化新 logo，接着是这一波新拟物化的反击。究竟代表新拟物化可能夺回界面风格主导权？或仅是 2020 年昙花一现的视觉风格呢？

扁平化VS 拟物化，我们可以思考的五件事

我认为新拟物化的概念其实是融合扁平化与拟物化的集大成，它建立在扁平化风格之上，又将组件带入了拟物化的元素，提高用户的判断力。不过在纠结于扁平化与拟物化哪个比较好时，有五个议题是可以让 UI、UX 设计师去思考的。

1. 多数年长者对于扁平化界面提供的视觉元素暗示无法理解。

大家身边一定都有那种已经把 Line 操作得滚瓜烂熟，但是每次要用 Line 加好友时，还是不知道怎么操作的长辈。最早期当人类还没进入屏幕时代前，我们所使用的界面大多是实体产品上的控制界面，而这些界面上的每个开关、按钮，都只有一个输入源，对应到一个功能（一对一），我们因此就这样与产品进行简单的交互动作。然而在屏幕上这个简单的交互模式被改变了，像是用键盘跟鼠标可以辅助我们，在系统中进行抽象与复杂的无限多任务（一对多）。

△ 你偏好用哪个微波炉加热咖啡呢？Image credit:Bence Mózer

让我们再来看看对长辈最重要的 Line 加好友功能，我们先不论这个功能在整个 APP 中被埋得多深，因为找到加好友的入口真的对长辈来说是看缘分～

在我引导长辈找出二维码画面的经验中，发现他们都是用死记的方式，把下一步要按哪个键、在画面的哪一个角落，记下来。但由于加好友功能并不是每天都会操作的，因此在学习上的效果，就像是高中时没有把课文理解、吸收就硬死背下来一样困难。

我们来看看「显示行动条码」在扫描二维码画面中，是否真的具有可以被点选的暗示。在扫描画面背景单纯的时候（如下图情况 1），「显示行动条码」的 button 底色是有透明度的黑、扁平化后没有阴影提供可以按的暗示，不过因为有大圆角的造型，勉强还是可以诱使人点点看；但一般情况下，扫面画面背景不会那么理想的无其他干扰（如下图情况2），button 原本的透明黑完全融入了后面的背景，这时候只剩下「显示行动条码」的文字，已经不具备可以被点选的提示。

△ 情况 2 中，显示行动条码的 button 看起来可以按吗？

扫描画面中的外框有一定的透明度，在可操作暗示（affordance）上已经不具有实体的特征，如果又放上有透明度的 button 在上面，让人充满不确定性，年长者无法将这样的情况与现实生活中的经验联想在一起。

2.以颜色做区别真的是最好的方法吗？

你知道同一个颜色，每个人看起来会不一样吗？而不同颜色在不同环境下，却又能看起来像同一个颜色吗？

不同意新拟物化设计的人中，有人主张运用颜色的引导用户操作界面的色彩元素不能从界面设计中抽离。但事实上，不同年龄、性别，视觉锥细胞中的活跃程度不一样。同一个颜色，不同人看，明度跟彩度会有差异。基于种种现实，由色彩的引导是好还是坏呢？

例子1：关于人类的视觉锥细胞

同一个颜色，不同人居然会看成不同颜色？

为什么阿嬷喜欢买大红大紫的衣服？这个偏好除了受到个人喜好影响外，也关系到阿嬷视觉锥细胞的活跃度。老年人在上了年纪后，部分视觉锥细胞开始退化，因此对于蓝色、绿色这类冷色系的颜色，老年人会开始接受不到这个区段的光带来的刺激。因为视觉锥细胞对冷色系的刺激降低，导致阿嬷在菜市场逛街时会被偏暖色系的物品吸引。所以会买热情系服饰不是阿嬷本人的意图，而是老化的锥细胞在作祟。

例子2：关于学习观察颜色这件事

不同颜色居然看成同一个颜色？

不同颜色却看起来很像，有可能是光线造成，也有可能是使用者必须学习去观察才知道的。日本的 JR 跟 Metro 系统，有着完整且细腻的视觉辨识系统。设计师理想中的情况是，我们将每条路线定义成不同颜色，可以让使用者更容易学习辨识路线。

但实地走访过东京的地下铁跟 JR，常常会发现跟错指示，才发现是潜意识辨认错文字或是颜色。我自己遇到过的经验是，在新宿站想要找都营大江户线时，因为在改札口看到了同样粉红色的标志，原本已经要哔卡进去，才发现那是京王新线的 IC 入口标志。

△ 新宿驶的改札口前，有两个同为粉红色的引导指标

所以说，高龄者或是天生视觉锥细胞有缺陷的人对于颜色无法清楚辨认外；大部分人可以借由学习来增强色彩辨识，除了可以对相似颜色进行更细节的判别外，也可以学着辨认不同光线（暖光、冷光）下造成的色彩差异。

但是，当我们在设计中，迫使用户学习、习惯我们制定颜色的意义。可能会在新手 onboarding 时造成适应上的负担，也有可能让他们在使用别的系统造成错乱。

3. 对于颜色被定义的意义各个文化、区域、种族都相同吗？

在不同文化之下，对于色彩的观察与运用也不一样，举个大家可能都有发现的例子，当你在不同城市旅游的时候，有没有发现不同城市的优先座颜色不一样？你能猜得出来，哪一个是台北捷运上优先座的颜色吗？

△ Image credit:wikipedia.org

当颜色在不同约定成俗下，有不一样的意义，又刚好缺乏文字或图像引导的时候，可能会让使用者解读成不同的意义。例如：红色具有热情、喜气、带来财运的意涵，但同时又具有危险的警示意义。

当设计师觉得红色可以引起使用者的注意，而把 button 设计为红色时，却可能让没看清楚文字的用户，认为按下这个 button 是危险的举动。

△ Image credit:photoAC

4. 光与影（明亮面跟阴暗面）给使用者的可操作暗示（affordance）一样吗？

新拟物化设计中假设了人在使用界面时，会运用与生俱来能判断光影效果的能力。这是真的吗？让我们来做个小实验：

为什么在台北车大厅席地而坐的人，会选择坐在黑色的棋盘格上呢？如果根据人类从大自然中所得到的可操作暗示来说，有阴影的地方可以提供人类休憩的功能，例如树阴下的阴影处。

△ Image credit:中央社、wikipedia.org

如果这样说得通的话，代表光亮的区域对人来说是可以行走、活动的地方；而阴影处则是休息与暂停处。

根据以上的推测，我们做个小实验，把车站中的 2 个不同区域的地面上分别涂上白色与黑色，来让受测者选出哪些区域可以暂停，哪些区域可以走动：

问题Ａ：假设你要在车站的大厅等朋友，你会选择站在哪里等他呢？

假设：受测者会选 2，因黑色区域（影子）让人觉得可以暂停、休憩。

结果：符合假设

1：白色柱子前的白地面 32.5％； 2：白色柱子前的黑地面 67.5％

问题Ｂ：哪一边的楼梯是往上的方向呢？

假设：大家会选 1，因为黑色区域（影子）让人觉得可以踩上去。

结果：符合假设

1：白色立面＋黑色地面 61.3％；2：黑色立面＋白色地面 37.8％

由实验Ａ、Ｂ可得证，虽然实验结果符合先前假设，大多数的受测者可从阴影判断要走哪条路，但还是有不少（30%以上）的受测者不认同。所以在用使用光亮阴影的设计暗示时，还是会遇到使用者感知的不同的问题。

5. 深度认知不同是导致判断物体距离的能力受影响，也就是所谓的视差。

新拟物化设计中，将界面组件以类 3D 的方式呈现，使用户在操作界面时必须去感知界面组件的远近以判断重要性，而在深度认知上有障碍的用户此时就会受到挑战。用户可能会遇到，不知道哪个组件才是浮在最上面、最重要的；若界面中的组件有三种以上的阴影深浅，会让用户在判断时要更花脑力判定物件在立体空间中的深浅。

总结

新拟物化风格中的光影表现提供了使用者人类最原始的操作意图：可操作暗示，是一个好的出发点，然而必须针对 APP 性质的不同而有所改良。在设计较走生活风格理念，而操作界面不复杂的 APP 时，非常适合用新拟物化风格来诠释：例如电子书服务、音乐软件；但在设计功能导向，且有大量信息化图表的界面，例如：移动网银，还是需要以扁平化的界面为主要信息架构，新拟物风格可能会是极少量界面元素中，拿来呈现生活中真实物的质感（例如：用户的信用卡）、或是作为亮点（例如：优惠卡片）的呈现方式，此类型 APP 中最重要的卡片与图表对于此种风格，一定要谨慎使用，必定三思三思再三思。

文章来源：优设    作者：Muse Chang

可能对于一些人来说，流利说是一份工作，而对于我来说，流利说却是一段深刻的旅程，改变了我的生活，也塑造了我的性情、人格。从 2013 年作为第 7 号员工加入流利说，为之效力6年，从最早期民房创业，到纳斯达克 IPO，这段经历，我自认为颇具一个理想主义者的传奇色彩，有些故事，是我愿意，也值得分享的。

老王（流利说 CEO 王翌）以前总借他恩师的话说，人这一辈子能做一两件漂亮事就不错了。我觉得，流利说，算我过去做的一件漂亮事。以前，我也常和同事说，如果你现在一切的经历，在日后不足以用故事说与人听，可能你现在经历的还不够痛，你还不够刻苦。所幸，过去的经历，给我留下了几个故事。

这一次，我想分享当初选择加入流利说的故事，分享这个过程中我的思考、行动。一方面，单纯的想记录这段故事。因为随着年岁增加，记性却是退减的。文字是最好的保存记忆的方式；另一方面，常常遇到设计师朋友们聊如何选择工作机会，遇到创业的邀约机会怎么判断、决策的问题，我希望这个故事，能给遇到此类问题的朋友一些启发。

好，听故事吧。

缘起

2012 年，我退出了联合创立一年半的公司。而在一年半以前，我从阿里云公司离开，放弃了一笔可观的 RSU 股票，当时，我是阿里云最早的 28 位设计师之一。结束创业后，2012 年 11 月 14 日 19:17，我发了一条微博，表示想看看新的机会。这条微博，有 16 个转发。其中有 1 个转发，被流利说联合创始人 Ben 看到，他把这条微博转发给了联合创始人王翌（流利说 CEO）。

在此之前，我和 Ben、王翌素不相识，网友都谈不上。Ben 之所以看到那条转发，是因为他关注好友里面，有一位正是我一款浏览器插件产品 – 微博急简 的用户。

有一颗创作的心 – 微博急简

△ 使用「微博急简」前后，微博主页的对比

容我多说几句，介绍一下微博急简这款产品。2011 年左右，新浪微博的使用体验，非常糟糕，逐步商业化带来的各种广告，让原本不好的体验，变得更加让我无法容忍。很快，一个叫 stylish 的 Chrome 插件工具，在微博设计/技术圈子里流传。用户安装 stylish 插件后，通过修改 CSS 来定制自己的微博体验。同时，你还可以把 CSS 分享给其他用户。

这太好玩了！我按自己的使用喜好，给自己订制了一套极简体验的新浪微博。玩了几天后，我决定做一个改善微博体验的浏览器插件。为什么要重新做一个插件呢？我认为，stylish 的使用门槛、操作成本都太高，仅仅是专业人士的玩具。我希望普通人，也可以通过一键安装浏览器插件，获得舒服的微博体验。因此，我给插件取名 – 微博急简。看得出来，我是多么急迫的想简化微博的体验。

两周后，微博急简就上线了。几个版本后，体验就趋于稳定。高峰的时候，有 10 万左右的用户使用，相关微博话题有 600 万。有很多行业内的大咖成为我的用户，像冯大辉、少楠、方军等。获得了很多用户的好评，最让我嘚瑟的是现任丁香园产品总监少楠的评价：用一个插件秒杀了新浪UED团队。

通过微博急简这个产品，我想分享以下几点：

• 设计师应该对体验保持敏感度。不要被体验糟糕的产品破坏了味蕾；
• 如果有机会，就要试图去改变它；
• 出于兴趣，单纯的为自己做设计、创作。即使没有金钱回报；

这三点，既是我的观点，也是我的特质。正是因为这样的特质，才遇到后面加入流利说的契机。

面对首次邀约

回到故事主线。

我发完那条微博后的 1 小时，王翌就给了我微博私信。老实说，今天是我第一次注意到这个「相隔 1 小时」的时间细节。王翌的行动力、执行力，对于人才的执着追求，着实让我佩服。这不仅仅是对我，对流利说早期的员工，以及后面的核心员工，都是如此。

他的消息里，有三个关键词：exciting、团队成立 2 个月、移动教育。对于这条消息，我礼貌的回应，但内心其实是「呵呵」的。即使，我看到他 LinkedIn 主页上 Google PM 的经历，很亮眼。呵呵的原因是，这个公司太早期了，才两个月。2013 年，移动教育是啥东西？而且，创始人还这么不务实，动不动就标榜是一个 exciting 的机会。

虽然，王翌后续一直联系我，但我基本是忽略的状态。期间，我短暂的加入了一个朋友的创业公司。2013 年 1 月底，春节前的几天，我再次收到王翌的私信：流利说 App 即将上架，想约我再聊一聊。于是，我们约在文二西路白鸦（有赞创始人）的贝塔咖啡。



△ 贝塔咖啡馆

那天晚上，王翌给我展示了流利说最早的 App，程序其实还不太稳定。但他仍旧极具信心的表达了对于语音互动的看好，以及发出盛情邀请。我对这个 App 的产品与交互的第一印象，是好的，但对于王翌的第一印象却是复杂的，既觉得这人有激情、有想法，同时又觉得不太靠得住，夸夸其谈，他太会说了。

深色模式该从何处着手设计又要考虑哪些因素？一起来看看~

其实回顾我们常用的APP，有很多都更新了深色模式，而且每个APP对深色的定义和设计都有差异。

实际上深色模式已经来临，而且在很多产品中都能发现它的身影，之后也会愈加流行。那么设计师面对深色模式，该从何处着手设计又要考虑哪些因素呢？

本文就为大家提供一份全面的总结。文章目录如下：

选择深色模式的原因

1. 需求趋势

过去一年以来，Android 10和iOS 13上都适配了深色模式，而且Apple和Google也一直致力于将资源和注意力投入到深色模式中，这也让深色模式备受用户的关注。

2. 专注内容

深色模式在弱光环境下具有更好的可读性，让我们更专注于眼前的屏幕。同时深色的背景会降低内容周围元素的影响，特别是以图片和视频为主的应用，让用户更专注于内容。

作为内容消费型应用的Netflix ，把深色背景作为默认设计样式，深色的设计让用户更能集中注意力，延长使用时间。

3. 减轻刺激

相对于其他颜色，深色系的设计在夜晚看着最舒服。可能晚上玩手机不用担心光线太刺眼，但是深色模式对护眼并没有什么帮助，只能说可以减少对眼睛的刺激。

4. 提高续航

深色模式更省电只适用于OLED屏幕。OLED面板的每个像素点可以单独发光，当使用深色模式时，部分像素点被熄灭，只点亮部分像素，屏幕的一部分相当于处在休眠状态，所以会更加省电。

平台设计指南

1. iOS平台深色模式设计

在深色模式下，Apple重新审视了iOS中UI样式和颜色的含义，让我们来看看在iOS上设计深色模式带来的变化。

语义化颜色（Semantic Colors）

所谓语义化颜色，就是不再通过某一固定的RGB色值来描述颜色，而是根据用途来描述，让界面元素可以自动适配当前的外观模式。

淘宝团队就参考了苹果官方的适配建议，通过语义化颜色的方式进行适配，使适配成本大幅降低。设计师根据不同UI元素的特性先期制定颜色语义化规则，进而技术在框架层面通过「颜色自动反转」技术实现颜色反转。

系统颜色

除了语义化颜色，Apple还提供了9种预定义的系统颜色，在浅色和深色模式中，这些颜色会动态变化，支持整个系统的外观，同样也可以自适应选定的界面样式。

模糊与动态效果

在iOS13上，苹果引入了4种模糊效果和8种动态效果，它们自动适应iOS界面样式。这是在浅色和深色模式下不同的模糊效果。

苹果还在iOS深色模式排版套件中引入4种动态效果，其中3种为叠加效果，1种分隔效果。

2. Android平台深色模式设计

谷歌提供了广泛的文档支持，帮助设计师了解深色主题如何在Android生态系统中运行。

Elevation（阴影）

UI界面元素间的投影最能让用户清晰地感知用户界面的深度。在设计深色主题时，组件将保留与浅色主题相同的默认阴影组件。Elevation越靠上, 颜色就会越浅。

无障碍性与对比

深色UI设计中的背景应足够暗以显示白色文本。设计师要注意背景和文字之间至少使用15.8:1的对比度。这样可以确保将正文放在最前面时，能通过WCAG（Web内容无障碍指南，使网站内容更容易访问）的AA标准。

颜色

深色模式必须避免饱和的颜色，以免引起眼睛疲劳。相反，设计师应专注于使用不饱和的颜色，以增加清晰度。主色和辅色的选择还取决于对浅色和深色UI主题的考虑。

文字不透明度

在深色背景上设计浅色文字时，高度强调的文字不透明度为87％；一般提示文字的不透明度为60％；禁用文字的不透明度为38％。

深色模式的设计要点

苹果和谷歌都利用各自的设计原则，为深色模式设计做准备工作。在实际设计过程中，不单需要这些基本原则，更重要的是要注意设计深色模式的实用要点。

1. 背景灰度

设计深色背景时不是简单的把白变成黑，而是对背景使用比较暗的色调，以减少眼睛疲劳。

在浅色模式中，我们倾向于用细微的阴影来传达界面深度，使用起来更加自然。但是在大多数深色模式下，阴影的效果并不明显，通常用颜色的深浅来传达界面的层级关系。

关键点：注意应用场景

在知乎的深色模式中，背景的设计从深到浅使用了三级灰度，让页面的层级更分明。

一级灰度的应用场景主要是大的背景色，使用面积相对比较大颜色最深；二级灰度的应用场景是选项的背景色，根据选项的数量设置使用面积，位置排布比较灵活；三级灰度的颜色最浅，使用面积最小，通常用在分割线中。

2. 文字对比

白底黑字和黑底白字带给我们的用眼体验是不一样的。设计不当的深色模式常常因为强对比而变得很刺眼，同时为了提高对光线的吸收虹膜会张得更开，更容易造成眼部疲劳。

关键点：文字间的对比

深色模式中，文字的用色通常是纯灰色，不同位置的文字例如标题、正文和注释使用深浅不同的颜色作对比。上图是深色的微信，就利用这种方法来区分不同文字内容，展示文字层次关系。

另外每个应用的定位都不一样，界面中想传达的信息也有差异，所以要注意不同的设计思路。

关键点：文字与背景的对比

已经更新深色模式的应用主要分为两大类，一类属于工具型应用例如QQ、微信、百度网盘等，这类应用追求的是信息的有效传达，在设计时文字内容和背景色的区分比较明显。

上图是百度网盘的深色模式，可以看出来标题文字与背景有很明显的对比，保障了用户使用时的可操作性和易读性。

这样的设计不需要用户过于沉浸式的阅读，只需要帮助用户快速找到有用的信息并方便使用，这是工具型应用在设计深色模式时必备的原则。

另一类属于内容型应用例如知乎、简书等，这些应用更注重沉浸式的阅读体验，因为用户通常会在某个界面中停留很久来查看内容，所以需要文字与背景的低对比度为阅读营造柔和的氛围。

简书的深色模式中，文字与背景的对比关系就设计得很弱，整个界面呈现出灰色调，这样的设计有助于在弱光环境下的长时间阅读和浏览。

3. 图标/按钮

深色模式应该避免使用特别鲜艳的颜色，较高的明度和饱和度会与深色背景形成强烈的对比，让页面的可读性变差并加深刺激。

关键点：降低色彩明度

在由浅变深的过程中，知乎对改变了界面中所有图标的颜色。界面里面的图标和主题按钮的色彩，在色相、饱和度上都没有变化，但是明度被不同程度的降低，保证了在不同光照条件下的内容的可读性。

这是深色模式中处理色彩的一种方法，虽然在浅色界面中，我们更喜欢鲜艳的颜色，但明度低的颜色更适合深色主题。匹配这两个模式另一个比较好的方法是创建互补的色板。

结论

无论深色或者浅色，都只是产品向用户呈现的一种界面状态，最终的目的是为了更良好的使用体验。

不管选择什么样的模式，都要记得从产品自身出发，并牢记这几点：

• 了解趋势：熟悉深色模式流行起来的原因，以及苹果和谷歌对此的相关研究。
• 找对方向：在准备设计深色模式前，要先了解清楚产品对应的平台、满足的标准。

• 掌握要点：设计深色模式更多要求的是颜色上的变化，利用灰度色阶拉开背景颜色，把握文字与背景间的强弱关系，适当降低图标的明度和饱和度。

文章来源：优设    作者：Clip设计夹

蓝蓝设计 魏华写

     在承担ui设计项目中，常常碰到一些客户不给设计师看己往的软件或本公司设计师设计但没有被客户认可的设计方案，怕限制设计师的思路。那究竟给设计师参考会不会限制设计师的思维呢？

     实际上不会的，这是更多维度了解客户的思考和角度，排除己被尝试过的选项。

     在进行一个ui 设计前，深度方面应该要了解业务，用户角色，环境生态，交互流程，关键功能，核心价值，用户体验的峰值点和难点在哪里…….总之了解的越深越好。

     宽度方面，要看到竞品分析，行业趋势，国内外优秀案例欣赏，专业文章观点，应该是可以拓展设计师的思维。

     设计最核心的目标应该在于解决问题，而不是单纯的让界面好看。

      优秀的设计师要明确解决问题的目标，博采众长，独立思考，看众多的竞品是看众多的解题思路，多方位角度看问题。各产品资源，核心技术不同，取舍不同，理解信息架框，运营思路，用户特征，技术实现可能性，不会只照着您给的资料比猫画虎。

       因此，我认为，放心的给设计师参考资料吧，互相的了解，沟通越多，越容易出好的作品。

这五张图是最近蓝蓝设计的稿件，展现从一个模糊的概念性需求到一个可视化概念性方案的设计过程。