可能对于一些人来说，流利说是一份工作，而对于我来说，流利说却是一段深刻的旅程，改变了我的生活，也塑造了我的性情、人格。从 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面板的每个像素点可以单独发光，当使用深色模式时，部分像素点被熄灭，只点亮部分像素，屏幕的一部分相当于处在休眠状态，所以会更加省电。
在深色模式下，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设计夹
将要分析的竞品排了个期，从最难最不熟悉的开始。为什么从最难的开始，可能是个人习惯吧，吃掉最难的那个，后面就会更上手。突然想起之前读的一本书「吃掉那只青蛙」，很不错的一本书，有时间去温习下。
一个产品，其实会有很多功能点，有核心的主要功能，也有一些辅助功能，也会有一些让你忽略，但关键时刻很需要的应急功能，而这些点都需要去整理出来。
这一点很重要，要先熟悉产品。如果对产品都不熟悉，那还是先不要做竞品分析。因为很难判断竞品的功能和风格是否也适合当前产品，因为对产品的不熟悉，会产生误判。
当然，产品的目标人群，产品定位，适用范围等等，都会影响产品分析。
所以，花时间熟悉自己负责的产品，是不能跳过的。
1. 制定时间规划
最好事先做好时间规划，可以有一整块的时间，这样分析产品时，思绪也会比较完整和连续，可以更专注。计算大概分析一个产品需要花费的时间，最好不要用零碎时间来做，这样只会增加时间上的代价，也会增加挫折感；
2. 确定分析的目的
在「竞品分析」中，想要得到的结论和重点是什么。比如重点可能是产品的报表功能、产品的代码审核功能等等，目的的确定能让分析更有针对性，减少干扰。无目的随意分析，得到的结果也会是零乱不堪，最后只是在浪费时间。
3. 寻找帮助者
每个产品，都有其不一样的特性和产品逻辑，你不一定能够完全 cover 到，甚至有些点就是比较难理解的，特别是偏技术性的名词，这时若有技术同学的帮助，就会如虎添翼。所以最好可以事先找一位产品相关的技术同学，询问这段时间是否有空，帮助你解答一些问题。
个人建议：能够在网上查到的资料，就不要先问人，除非时间成本特别高。一方面也是提升自己解决问题的能力，另一方面，也是节省彼此的时间。对方愿意帮你解决问题，不代表你要把所有问题一股脑倒给他，自己了解后再问，也是对对方的尊重，大家的时间都同样宝贵。
4. 其他tips
如果是内部公司产品，提前确认是否需要权限，提前申请好，减少正式开始后，还要等待审批时间。外部产品可以提前找好网站，可以咨询的客服入口，如果是付费竞品，咨询是否可以向财务申请报销等等。
1. 像个用户一样去使用产品
很多时候，设计师的职业病，会让我们过多注重视觉享受，而忽略作为用户，想要的有时候只是功能可用。今天不管你把「扫一扫」功能做得多美，美得像个艺术品一样，可是当扫码付款的时候，怎么也扫不出来，那种站在店家前面忐忑不安，怎么也无法完成付款，后面一堆人等你，你仿佛听见后面其他顾客窃窃私语地讨论着发生什么事情。那种场景我相信你不想经历，同样我们也不应该让用户来经历。
我的项目主管，一直都有提醒我，要像个小白来使用和设计我们的产品。这句建议，也一直在提醒着我。如果站在高姿态来俯视用户，我们就很难真正的「懂」用户，进而很难设计出真正满足用户需要的产品。
这是竞品分析，但是我们也需要转换自己的角色，变成用户。这样能更明白究竟竞品带给用户是便利，还是麻烦。有时适时抽离「设计师」的角色，会让你更能去体会用户的感受。
所以，先去用这个产品吧，然后才会有然后。
2. 如何去使用竞品
一个产品的使用，总是有它的使用场景，手机端的就更多样了，简直无所不在。B 端产品可能会相对少，一般是在办公场景或是特定场景。
可以像个编剧一样，给自己写点剧本，加点情节，塑造一个角色，假设竞品是电商方向，你可以想像，自己是一个刚毕业的社会新人，你可能没多少钱，你可能刚拿到你人生第一桶金，你想买件衣服犒劳自己，或许你会是数码控，你关注已久的佳能单反在双 11 中有优惠等等，然后再去预想接下去的情节，在购物方面会考虑的问题，或许是好用，或许是有趣等等。
也可以做任务式去使用产品，比如以电商为例，任务可以是买件喜欢的衣服，从搜索产品，到找到喜欢的衣服，添加购物车，提交订单，等待发货，收货，确认收货。这一个完整的流程走下来，就会体验产品功能是否好用，搜索结果是否符合预期等等。
3. 记录
使用产品的过程中，会遇到很多情况，有些是可预期的，有些是不可预期的。有些让人觉得很好用，有些却会让人受挫。将这些情况都记录下来，有助于分析产品的可用性程度和满意度。
上面这些只是举例说明，在竞品当中可能遇到的一些问题，也可以去反思自己的产品是否也会这样让用户感到困惑。有时候，太熟悉自己的产品，会自认为产品很完美，会理所当然认为「大家都这么认为」……
记录问题、原因，感受并截图为证（有必要可录屏），后期可追溯。写得越详细越好，后面整理的时候会更清晰。
4. 各个击破-功能了解
在熟悉整个产品后，就需要对产品的各个功能进行分析了解、梳理。了解竞品的核心功能是什么，核心功能在解决用户什么问题，是否真的解决了用户的痛点，其他功能又在整个产品当中充当什么样的角色。
将竞品的功能与本产品功能对比，不只是对比有无，更进一步地去想，为什么有这个功能，为什么没有这个功能，有或没有是否会提高用户的使用效率，用户的留存，用户的体验等等。
功能多不代表好，如果功能不能给用户带来益处，其实它的存在只是增加开发成本而已。
其实竞品分析中，最难的是总结归纳。做了一堆的分析后，结论是什么呢，这个结论如何写呢？
可以先从设立分析目的开始，找到中心轴线，然后再慢慢延展开来。在要做总结报告时，你会欣喜地发现最初设立目标是多么的重要。
文章来源：优设 作者：箴盐设计
财务和金融相关的应用是一个相对专业的分支，在这个领域当中创造体验优异的设计并不是一件简单的事情。身为资深设计师Taras Bakusevych 在这篇文章当中，分享了10个确保这类产品足够优秀的核心设计原则。
互联网时代的人们早就受够了信息爆炸，我们每天都会经系统推送、应用通知、微信、电话、短信等各类渠道收到大量消息。有多久你没有查收自己的邮箱？就算打开邮件，又有多少推荐内容让你有兴趣进一步了解？是 EDM 老了没用了？真正的原因，可能是我们一开始就错误地忽视了 EDM 设计。
对于 95 后以及更年轻的群体来说，EDM 确实是个上了年纪的概念。EDM（Email Direct Marketing）也叫 Email 营销、电子邮件营销。企业向目标客户发送 EDM 邮件，建立同目标客户的沟通渠道，向其直接传达相关信息，用来促进销售转化。
这个起源于上世纪 80 年代中期，正式诞生于 90 年代的早期互联网产物现在已经三十多岁了。时至今日，EDM 早已成为了全球公认的网络营销重要方法之一，其卓越效果为互联网人数十年的实践所证实。但 EDM 在我国的应用还处于非常低级的水平，不仅没有系统的理论，在实践中也存在许多误区。
在这样一个重视审美与强调更新及时的时代，EDM 邮件朴实无华的外表与「一旦发出就固定呈现」的内容特质显得有些格格不入。作为用户体验设计师，我们可以做什么让 EDM 不落伍呢？
首先，我们可以在设计层面上避免 EDM 邮件被邮箱软件识别为垃圾邮件，不带敏感词语或内容、淡化商业广告色彩、减少数字与附件使用都有助于降低被邮箱系统屏蔽的风险。我们更可以在全量发送前，对指定邮箱进行小范围测试以确保邮件发送成功率。
其次，从其历史来源来看，早期的 EDM 来源于垃圾邮件，这使人们对其本能地缺乏好感，存在排斥心理。因此 EDM 的节奏和时机必须做好控制，对邮件发送的各类数据做好统计，掌握用户的阅读习惯，能更好地提升邮件的打开率。
邮件内容需要设计为一定的格式来发送，常用的邮件格式包括纯文本格式、HTML 格式和 Rich Media 格式，或者是这些格式的组合。一般来说，HTML 格式和 Rich Media 格式的电子邮件比纯文本格式具有更好的体验效果。但 Rich Media 格式的电子邮件易造成邮件过大，并且无法确保用户在客户端均能够正常显示，所以在设计时我们优先选择 HTML 格式邮件。
与网页不同，我们无法针对不同设备做邮件内容相应的适配设计，兼顾设备特性的通用模版也就成为了设计时的必要关注点。对用户来说，一封邮件阅读体验很差，那么无论邮件的内容多么精彩、多么吸引人，最终的结果也可能只会被丢弃在一边。因此，我们通常会按照移动端尺寸对邮件界面进行设计，注意字体大小、最佳尺寸以及链接按钮的大小等。
除此以外，邮件中链接的定义也应得到我们充分的重视。由于邮件中的链接我们同样无法预先针对不同打开设备进行单独编辑，在有条件的情况下我们可以对链接所跳转的页面进行响应式设计以确保高质量的跨端浏览体验，或者我们也可以采用默认跳转路径而后重定向的传统方式。
EDM 营销与一般的营销方式最大的区别是：EDM 是一对一的沟通，让用户感觉到尊重，让他感觉到这是为他所建立并且是他所独享的沟通方式。在标题、正文的文案上强调「我」，在内容上也应如此。用户在意什么，我们就发送什么。把握住用户关注的信息，帮助用户收集支持 TA 做决策所需的信息。当我们发送邮件给用户，给予其操作行为的反馈或提醒时，不要浪费这最好的营销机会。优先提供给用户与之行为或特征相关的服务与帮助，其次通过个性化服务或产品推荐促进购买或注册转化，有助于我们将营销机会转化为实际销售成果。
做好个性化对 EDM 内容模型要求颇高，但从设计角度讲，我们完全可以以原子设计思维实现邮件内容模块的低成本创建与复用。以通用设计模块为「壳」，内容与组合规则为「核」，快速响应 EDM 的运营需求。
以上 5 点就是我结合近期项目经验所得。EDM 虽老，但设计可以让 EDM 老而弥新。祝经你精心设计的 EDM 邮件，一经发出，封封有回应
文章来源：优设 作者：鱼子酱聊设计
今天和大家聊一个很多朋友常年卡在 P5/P6 需要关心的命题——如何从业务出发打造具有商业价值还能兼顾用户体验的设计，此篇不谈理论，就通过 4 个经典的重量级产品案例就给大家安排明白啥是「一拳超人」式体验设计——就一个字「强」。
滴滴出行应该属于大家的高频使用 app，但是使用的功能一般还是集中在叫车流程，所以大家可能不太会关注到 CDX 设计团队一个非常核心的设计成果——xpanel。
简单来说 xpanel 就是一个附着于第一信息架构层级上，垂直 Y 轴且支持 X 轴拓展滑动的 Feed 卡片位。内容上分为「消息卡片」「主体卡片」「拓展卡片」三个维度，首屏保障除了「消息」与「主体」外三分之一「拓展卡片1」的露出。
但在简单的交互背后蕴藏的是基于业务的 UGD（用户增长设计）设计思考，这里引用 2018IXDC 会上滴滴主讲人的原话来说就是：
对特定场景垂直领域的深耕和挖掘，寻找「接触点」，帮助获取更多的功能、内容、服务、特性、品牌、运营甚至是喜好……进而实现业务的「有效增长」（转化、变现、留存）。
通俗一点解释就是 xpanel 利用主卡与拓展卡之间的信息架构关系，把拓展卡平衡的分为几类，比如「与产品功能相关的卡片」「与运营相关的卡片」等。
把本来被 LBS 地图一屏内抢占的空间通过简易的交互模式补偿回来了，这样既不打破用户的核心体验 focus 在地图与主卡上，同时又增强了运营、功能的玩法与拓展，可谓双赢。
根据这几年滴滴 xpanel 的线上应用，拓展卡片基本挖掘涵盖了以下场景的露出：优惠福利、出现卡券、会员体系、安全相关、出行提醒、拉新导流、运营活动等，未来可拓展的价值内容会更多。看着各路出行类 app 又纷纷长期沿用 xpanel 的设计，想必线上的数据反馈应该也是很正向的。
在上篇文章《多维度解析 | 抖音vs快手的产品设计策略差异》中的商业化模块里简要提及过抖音的 Topiew 超级广告位，这里单独拿出来和大家解析一下它究竟有多6。
从功能角度看，它是一个从开屏延续到端内视频信息流的广告位，占据了用户从进入抖音的第一视觉。
从交互角度看，topview 主要展现以开屏沉浸式视频 3s 播放→淡出互动转化组件 3s（完美融入原生视频信息流），剩余操作手势与功能等同原生视频信息流。
在这样一个有着 1 亿+第一曝光的产品位置，单纯只做常规静态开屏稳当入账不香吗？事实是抖音确实让它不香了，没有创新就没有新的收获。基于业务和当前产品形态下的交互模式使抖音有一个天时地利的优势——沉浸式体验，在这样的交互模式下给视频化的开屏提供了很好的承接入口。从开屏开启到融入信息流，在交互形态的切换中又为广告内容的播放时长赢得了更多时间。
更可怕的一点是 3s 播放后融入原生视频信息流中的 TopView 除了正常收割广告转化带来的单量，还可以通过右侧的主页链接轻松引流进行粉丝沉淀（今天就算你不买，先关注我，成为我的潜在用户，来日我再推一个新商品视频，你可以第一时间看见也许感兴趣就买单了）。
说完这些大家仔细回忆一下平常我们接触的有视频广告的视频平台，别说 60s、30s，15s 我们都嫌长，但为啥 TopView 显得相对没那么惹人烦呢（上次留的思考题）？个人认为除了抖音在选择合作品牌时会倾向符合平台气质的品牌合作（细数它合作过的品牌：Mac、宝马、林肯、vivo 等）保障广告质量和提供「跳过」外，直接融入信息淡出的互动组件会不仅会给用户新奇感，还会激发用户的互动欲望。
最后看一组数据（与宝马合作数据），曝光数：1.1 亿+；有效播放率：53.82%；点击率：13.26%。所以你猜一个最长可以展示 60s 的品牌视频内容、同时进行品牌粉丝沉淀、良好体验带来更高有效播放的亿级曝光广告位能值多少钱？
2016 年淘宝启动了一个项目要做一款内容化栏目——以视频为主，每晚更新一期，类比「一千零一夜」的故事。
那么在满满当当的淘宝运营区里该选择哪一个来试玩这个有趣的「新栏目」呢？是在头部的 10 宫格里再挤进去一个图标呢？还是在热门推荐里挤出一个 tab 呢？还是做一个悬浮的右下角的运营位？显然都不太合适。
根据这款产品每晚 6 点钟才可以使用，早上 7 点就会消失的游戏规则，最适配它的入口是一个不占界面原生空间，同时又有一定仪式感的位置。于是下拉 loading 的大空区成为了设计师们考虑的阵地。
△ 不知道这个banner为什么要排挤我
但地方选好了，又有了新顾虑。因为 iOS 的用户基本被系统洗脑了下拉手势，对于他们来说下拉=刷新，贸然在下拉刷新的手势基础上再叠加一个无关联的结果显然是有风险的。因此从交互上需要界定 2 个维度的指标来保障新栏目的体验。
反复试错 2 个指标数据的实际体验之后，新栏目有了安身之所，赐名「二楼」。进入「二楼」的整体交互和现在的短视频产品玩法基本雷同，全屏竖滑切换，小图标带货。下拉加载位的开发，从普通 loading 动效到运营位的植入基本被各类电商平台轻松复刻了，因此这一切看上去更没什么了得，但对于原创来说那毕竟是 4 年前。
谈到豆瓣我算是半个老用户了，豆瓣自身是个比较复杂的集合多条业务线分支（「小组」「同城」「阅读」「音影」……）的多生态产品，这里我们主要拿它 18 年 6.0 大改版中影音模块的详情页大改造来说事儿。
△ 可能有很多人已经忘记6.0前的豆瓣电影详情页长啥样了，带你回顾一下。
看完对比图，视力正常的朋友乍一看都能看出 6.0 版详情页整容得有多成功。但具体成功在哪里，可能不仅仅是好看这么简单。
大背景从海报上智能取色虽然不算是什么稀奇的做法，但是加了适度的渐变应用在这里也可以说是非常的恰到好处了。另外深底色和视觉比重加大的外链区都突显了「第三方播放」与「购票选座」的视觉感知。让用户沉浸在电影详情中并引导他们走向「豆瓣的主要收入来源之一——电影票分销与第三方视频播放产品引流」正好是 6.0 豆瓣改版一个「小小的目标」——更务实（商业化）。
从交互层面看，且不说评论头部吸底这个事情是不是也是因为 6.0 商业化的影响（评论区增加「话题」进行重点运营），这个交互本身我觉得还是很强大的。强大的体现在于良好的空间收纳能力与信息拓展能力。我给它起了个好听的名字叫-叠加上滑板（不好听也认了吧，毕竟也没有内部人员告诉我他们是不是起名字了）
这里可能又会有很多人质疑它与用户已洗脑的上滑手势之间的冲突，这点解释起来和上文淘宝「二楼」有些类似，区别是豆瓣并没有做上滑速度 or 距离的临界值，只是把滑动区域做了隔离。而对比它的效仿者 boss 直聘，人家倒是在交互上做了进一步优化，适配自己的产品情况做了上滑叠层卡隐藏和上滑距离临界值。
这个故事告诉我们，要抄也要抄得比人家的交互更优秀才不丢人昂。
文章来源：优设 作者：Nana的设计锦囊
今天跟大家聊聊设计中焦点配色这个话题。焦点这个词对于设计师来说应该不会感到陌生，但是这节课我们主要是从色彩的角度，来看看焦点在设计中的作用以及色彩焦点的重要性。首先我们要知道设计的目的就是通过视觉来传达信息，而视觉的表现形式是有一定规律性的，在这些众多的规律性当中，其中有一条就是通过色彩来实现，而焦点配色就是色彩设计中最有效的一个手段。
其实无论是绘画、摄影还是我们的设计，都存在大量的焦点配色，只是我们平时没有特别去注意而已。比如莫奈的这幅《日出·印象》，我们来尝试分析一下焦点的设置和移动。
我想绝大多数人都应该是这种移动路线，也就是在大面积灰色调和冷色调中先被强暖色的太阳所吸引，然后是近景全黑色的船，接着顺延到另一条船上，当然每个人都会有所不同。
比如也可能是这种从远景到近景的顺序。
也可能有的人是从近到远的观看顺序，但是无论你是哪一种，都不重要，为什么？
因为无论你的视线是怎么移动的，都不会影响到我们最终焦点的归属。大家可以感受一下，当你看这幅画的时候，无论你先看哪后看哪，最终你的眼睛都会被这个橙红色的太阳所吸引，这就是色彩焦点的魅力。
我们再来看一个摄影作品，这个跟刚才那幅画来比，焦点就更加清晰了，而且这里也不需要焦点的移动，很明显焦点就是这个人物。
但是这个焦点是怎么通过色彩得到强化的呢？可能有的人会说这么明显的人物肯定是焦点啊，但是你可以尝试把人物后面的暖色光去掉看看，虽然人物同样是这个画面的焦点，但是一定没有现在这样抢眼，因为暖色和背景的冷色形成了强烈的对比。
所以无论是绘画、摄影还是我们接下来会看到的设计，其中都会包含一种故意的或者是有意识的色彩焦点的安排，而这种焦点的形成是怎么实现的呢？其实就是通过色彩对比，因为有色彩对比必定产生焦点，即使没有焦点我们也会努力去寻找焦点。我们联想下平时的生活就会发现，无论是我们看到一幅画面，或者是置身于一个真实的环境中，我们都会不自觉地去寻找色彩最突出或者最醒目的东西，这就是作为人的一种本能，也就是自然而然地去寻找焦点。
下面我们来看一些设计作品，我们看这三个界面，不能说没有焦点，有，就是图片，准确地说应该是没有色彩焦点，所以我们接收到的就是图片加上信息排在一起，我们很难在短时间内区分出哪些是重要信息哪些是次要信息。我们不知道视线应该落在哪里，因为没有突出的东西，这种不知所措会让看的人感到不舒服，这就是没有焦点会造成的一种情况。
同样这三个界面，我们什么都不变，只是在想强调的部分填充一个颜色，这样就会让看的人可以通过色彩毫不犹豫地感受到焦点，这种交互才是人性化的交互，而这个简单的过程其实就是色彩设计。
我们再来看一个更加简单易懂的，比如现在这个，就是在一个蓝色背景上编排纯白的文字，可能通过字号和距离的安排我们也知道孰轻孰重，但是如果从色彩的角度来看还不够，因为没有形成让人快速识别的焦点。
如果在想强调的地方，适当的填充一个颜色，那么瞬间就有了焦点，而这个颜色和背景色的对比越强，焦点就越明显。
我们看这个海报，当我们看到这个画面的时候首先注意到的是什么？
首先注意的肯定是上方的图片，其次会根据信息的层级大小去看主标题，然后是次要信息。这种没有设置色彩焦点的形式，虽然不太会影响信息的阅读，但我们不妨试试有色彩焦点的情况。
当原本就是画面中比较重要的标题信息和突出的英文被填充红色之后，焦点就产生了并且得到强化。
这时候当我们再看这个作品，就可以在短时间内迅速获得信息，如果想继续了解也可以继续阅读，这就是有焦点和没焦点或者焦点不突出的差别。
我们看这个 banner，这里我们不说它的版式怎么样，我们就看色彩和焦点，这个画面有什么问题呢？就是焦点设置错误，什么意思？
也就是大家看这个画面的时候，虽然都会先看月饼的图片，然后是标题到进入专场，但是大家发现没有，你的视线总会被中间这个粉色的花瓣吸引。
就是那种你不想看它，但是又不得不看的感觉，因为这个花瓣的颜色完全没必要出现在这里，因为它不是信息，为什么要充当焦点呢？这就是焦点错误。
我们把花瓣去掉试试，这样焦点就很清晰明确了。
现在我们知道了有焦点和没焦点的差别，那焦点的设置其实也是有多种情况的。我们就拿这个网页来举例，版式部分保持不变，你想突出哪里就在哪里设置焦点。我们来看看通过色彩把焦点安排在不同的地方，这个页面产生什么样的效果。
比如我们可以把焦点设置在上半部分，也就是顶部的品牌和导航区域。
也可以把焦点设置在主标题的文字信息上。
还可以设置在底部区域，形成色块。
当然也可以是自由式的焦点设置，强调你想强调的部分，这种情况下就有了焦点的移动。
通过之前的案例分析我们总结一下有焦点的好处：首先它满足了人的生理需求，其次满足了视觉传达的需求，最后满足了审美的需求。也就是说我们所要做的视觉设计是需要传达信息的，你得让受众看到你的信息才行，而要想有效的让人看到信息，焦点的设置就要满足前面三个需求，如果没有满足，一定程度上说明你的作品是失败的。实际人都是充满惰性的，也都不喜欢延迟，当人们看到所有的信息在它应该在的位置，不需要眼睛和大脑再去阅读，这时候就得到了一种观看和阅读的满足感。
说了这么多焦点的好处，下面我们就来看看如何通过配色形成或者强化焦点。首先我们要知道的就是焦点是通过对比实现的，而这里包括了色相对比形成焦点、冷暖对比形成焦点、深浅对比形成焦点、有彩色与无彩色对比形成焦点、花色与纯色对比形成焦点、色彩面积对比形成焦点。
首先我们来看色相对比形成焦点，这里的色相对比通常是指互补色或对比色之间的对比，因为色相差异越大越容易产生焦点。比如这个海报就是蓝色和黄色的互补色对比，当然需要注意的是，我们所列举出的这些对比并不是单独存在的，它们往往都是相互结合的，比如这个海报最明显的就是色相上的互补色对比，当然你也可以说是冷暖对比，同时也包括面积对比。
这个网页作品，蓝色与绿色形成了色相上的对比，同时它们二者又与背景形成了有彩色与无彩色的对比。
这个圣诞主题的 banner，整体是大面积的暗红色，这就让人物头顶的绿色圣诞树成为了焦点，也就是色相对比中通过对比色形成焦点。
然后是冷暖色对比产生焦点，这个版面很简单，就是文字编排加上背景，但是很明显，通过在强调的地方使用蓝色与背景的粉红色形成一种冷暖对比，让焦点一目了然。
这个同样也是红色与蓝色的冷暖对比强调焦点，让人一眼就能抓住重点。
这个同样也是通过冷暖对比形成焦点，只不过这个画面并不是单一焦点的形式，是多个焦点从大到小或从近到远的移动。
如果色相对比不够明显，那么通过单一色彩或近似色彩的深浅对比也可以很好的形成焦点，同样纯度和明度差异越大越容易产生焦点。比如这个画面中的焦点面包与背景形成的就是深浅对比。
这个画面整体是褐色的基调，但是杯子中的茶汤是比背景更亮一些的颜色，所以它自然而然地就成为了画面的焦点，而且这个焦点也是符合这个版面的设计逻辑的。
这个页面的背景是偏深一些的粉红色，当然图片肯定是这个画面的第一焦点，但除此之外，这个画面中还有另外两个焦点，就是比背景偏暗一些的嘴唇，这就是利用深浅色对比形成焦点。
焦点的作用以及如何强调焦点都很好理解和操作，但是设置焦点背后的原理是什么呢？就是我们之前讲过的色彩营销，因为设计的目的是通过视觉传达信息，而传递信息的目的是为了营销，所以答案也就很明了了。也就是如何设置焦点以及让谁成为焦点，这背后的逻辑要依据营销的目的，换句话说焦点的设置一定要满足以上的需求，假如设置了错误的焦点，就会适得其反，倒不如不设置焦点了，这个道理大家一定要明白。
我们接着往下看，下一个就是有彩色与无彩色对比产生焦点。比如我们看上面这个海报，图片整体是黑白的，只有雨伞的部分是红色，非常醒目的被凸显出来，当然就是第一焦点，其次就是红色的标题性文字。因为黑色与红色很好的对比效果，所以类似这种形式的摄影作品大家也一定见过很多，就是整体是黑白，个别地方用红色的形式。
虽然这个网页页面上的有彩色并不是单一色彩，但是与背景黑色的搭配，整体上依然是有彩色与无彩色搭配所产生的对比，从而产生焦点。
这个虽然也是有彩色与无彩色的对比，但是这个很巧妙，因为设计者并没有直接在主标题上填充有彩色，而是在标题下方使用了一个有彩色的色块，这也是一种变相突显焦点的方式。
接下来是花色与纯色对比产生焦点，这个算是很常见很通用的一种形式了，尤其是照片上编排文字的形式，如果图片本身的色彩就比较丰富，那么文字色必然要使用单一的色彩才能保证很好的识别。
这个杂志封面的背景是由多种色彩所形成的插画图形，而人物一身黑色位于中间形成了第一焦点，其次是位于人物上的绿色文字，可以说既是有彩色与无彩色的对比，又是有彩色与花色之间的对比。
这个海报上的图片虽然色彩并没有多纯，但是由于色彩比较分散，所以可想而知，在它上方编排文字难免会造成识别度很低的情况，所以设计师也很巧妙地使用了添加色块的方式，利用这种图片花色与色块纯色的对比来突出焦点。
最后就是通过色彩面积大小产生焦点，这种面积的对比可以说是非常常见的，可以说大部分有色彩焦点的画面都是之前的那几种形式与面积对比的一个结合，但是并没有谁重要谁不重要一说，就比如这个海报上的红色圆形，无论你是把它的面积放大，还是把它换成和蓝色相近的颜色，焦点的效果都没有现在的好。所以我们在具体设计配色的时候千万不要有强迫症，因为这些方法往往都是结合使用的。
这个也是面积对比产生的焦点，同时又有蓝色与红色的冷暖对比。
这个页面也是，通过在大面积绿色调中使用一个红色块，快速形成对比，从而确定焦点。
以上我们主要讲解了通过配色形成焦点的一些方法，但其实细心的同学就会发现，这里面还是有一些潜规则的，有的是和色彩有关，有的可能和色彩无关。比如说同样的色彩或同样大小的对象，具象的东西比抽象的东西容易形成焦点、人物比场景或风景容易形成焦点、图像比文字容易形成焦点、标题文字比内文容易形成焦点、暖色比冷色容易形成焦点、强对比比弱对比容易形成焦点，最后我们就分别来看一下。
具象的事物比抽象的事物容易形成焦点，这个似乎没什么可说的，大家应该都能明显的感觉到，就比如这个海报，即使人脸的周围有着密密麻麻的抽象图像，我们的注意力依然在人脸的部分。
人物要比场景更容易产生焦点，比如这个海报，同时存在两张图片，虽然上方的图片是一匹马不是人，但是道理是一样的，我们的视线总是想关注这个马的眼睛，而下方的海水我们可能只是一扫而过。
图片比文字更容易形成焦点，这个也是无需多说的一点，因为即使都是黑白的图片和文字，我们也会首先注意到图片，这是图片所具有的天然魅力。比如这个海报，假如我们把图片遮掉，那么红色的「魂」字毋庸置疑就是第一焦点，因为在一堆黑色文字中它实在太显眼了，但是加上人物图片的话，就没有多少人会去关注「魂」字了。
标题比内文更容易产生焦点，这是因为标题所具有的天然优势，也就是面积优势，比如我们看这个海报，其实它这里的标题使用与图片一样的蓝色并不是很突出，虽然日期和副标题使用了色相对比，也确实成为了焦点，但是对于主标题的影响并不是很大，我们依然不会忽略掉主标题，这就是面积原因所造成的，因为它足够大。
暖色比冷色更容易形成焦点，这个海报就是一个很好的说明，因为海报中两个图片大小相当，唯一的区别就是一个是暖色一个是冷色，那么哪个更吸引你呢？一定是暖色，如果你说你就是被冷色所吸引那也没关系，但是你自己保留意见，我不接受反驳。
最后就是强对比大于弱对比，比如我们看这个海报，其实本身背景色上有色相的对比，但是因为对比不够强，所以就让上方的红色成为了焦点，因为红色与整体背景形成了强烈的深浅对比。
简单总结一下，首先我们通过一些案例说明了色彩焦点的重要性，也就是满足了人的三种需求：生理需求、视觉传达的需求以及审美的需求。其次我们讲解了如何形成或强调焦点，也就是通过一些色彩对比来实现。最后补充了一些焦点配色中存在的潜规则，也就是哪些内容或形式具有形成焦点的天然优势。当然这一切的落脚点还要归到视觉传达以及色彩营销上。
文章来源：优设 作者：研习设
距离上一次介绍 The Stocks 已经超过五年，前段时间无意间浏览到这个网站，才想起我以前好像也写过文章，不过网站现在变得不太一样而且内容又更完整了，非常推荐加入收藏，因为真的很方便。如果你还不知道 The Stocks，它整合各种设计相关免费资源，最早只有将一些免费图库整合在一起，让找图的使用者透过侧边栏选单快速切换各个不同图库网站，加速搜寻图库的效率。
在全新的 The Stocks 2 除了免费图库，加入配色工具、免费图标、免费影片、免费字体和 Mockups 素材网站共六种项目，相较于早期来说在资源数量上增加不少，现在一样可以从网站侧边选单选取你要浏览的素材类型，The Stocks 就会出现一整排的网站列表让使用者直接选择，再从这些网站去寻找你要的免费资源。
对于平常会需要搜寻设计相关资源的使用者来说，The Stocks 是很好用的工具。
不过 The Stocks 现在会加入一些赞助商「推荐」内容，如果使用者进入这些服务，也有付费购买的话 The Stocks 开发者就能获得回馈（其实就是 Affiliate），网站主要还是以收录免费服务为主。
网站链接：http://thestocks.im/
使用教学
开启 The Stocks 网站后会随机显示一个免费图库，The Stocks 主要功能列在左侧，点选选单上的网站名称会将网页显示于右侧，方便在各个外部网站跳转和搜寻，不过有些网站不允许被嵌入其他页面，这时候就会以开新分页方式替代。
左上角是 The Stocks 收录的免费资源类型，包括免费图库、配色工具、免费图标、免费影片、免费字体和 Mockups 素材网站，点选后下方的网站列表就会实时更新。
有些标示为 Featured 就是本文前面提到的赞助商推荐内容，大多都是付费服务，例如销售相片图片的 Shutterstock、iStock 图库，如果有在找图的朋友应该不陌生，其实很多免费图库也是透过刊登付费图库广告来获取收益。
当然 The Stocks 收录的网站仍以免费资源居多，点选后就能快速浏览网站，如果操作上发现有些问题或无法正确显示，亦可搜寻该网站名称直接在浏览器开启。
最近因为疫情关系，很多公司改为在家上班，如果要开会就会透过一些视频会议软件例如 Zoom ，The Stocks 也有提供 Zoom 适用的免费虚拟背景（特别是家里背景很杂乱的朋友可以稍微隐藏一下），这些素材可以在网站右上角 Zoom Virtual Backgrounds 找到。
值得一试的三个理由：
文章来源：优设 作者：Pseric
每个平台都会存在标签，我们可以根据自身平台属性，打造一套属于自己的标签体系，几个思路点分享给大家（今天我们仅讨论不可点击标签，也就是展示型标签）。
咱也没整那么多官方定义了，我个人认为标签就是为了让用户快速看到关键信息，找到感兴趣的内容。
比如，我喜欢看玄幻类漫画，如果看到有「玄幻」的标签：
就会多关注一下。
再比如，我去网上买硬盘，希望质量能有所保证，那「自营」标签，对我来说吸引力就很大：
这就是标签最核心的作用。
其实分类的方法有很多，产品、交互、视觉都有不同的分类方式，而且每个平台的属性又各不相同。所以这么复杂的情况下，我们必须保持清晰的原则，避免思路混乱。
根据自身平台内容，我尝试了一种分类方式，推荐给大家参考，按照场景与优先级来进行标签分类。
场景分为：
优先级分为：
有了这样的划分，我们就可以根据需求进行自由匹配了：
根据平台目前的需求（以后根据需求可以拓展或者合并），我们可以分为6种型式：
1. 封面上的标签（强调型）
我们采用品牌色来强调标签，一般用在首页频道，这种标签不能同时出现太多，否则会太花哨太乱：
2. 封面上的标签（普通型）
多个封面同时有标签的情况也是存在，比如分类页，封面上都有评分，这时候我们就需要采用普通型（非强调）的标签，也就是黑色降低透明度：
封面上的标签暂时就这两种，以后也可以根据需求进行扩展。
3. 文字后的标签（特殊型）
特殊型在视觉上是最重的，因为除了颜色是填充色外，形状也是异形的：
4. 文字后的标签（强调型）
强调型形状上不做异形，但颜色上使用品牌色进行填充：
5. 文字后的标签（普通型）
普通型的标签，标签颜色会用有色相的彩色，文字使用品偏色或者其他辅助色：
6. 文字后的标签（弱化型）
弱化型会对标签的视觉重量再次减弱，采用灰色标签：
我们可以再看下这六种标签的整体视觉策略：
我用图片给大家概括一下
两种封面上的标签：
四种文字后的标签：
这种方式可以参考，但还是要根据自身内容来进行实际分类，只要能分得清楚、透彻，那就是好的分类。
其实整个标签部分，最重要的还是上一步，想清楚如何分类。
有了分类之后，再进行规范的细化，相对来说就没那么复杂了，注意以下几个点即可。
标签的高度，很简单，不解释：
标签的宽度，因为字数不同，所以宽度是不固定的，但我们可以规定文字的左右安全边距：
标签的文字颜色、大小、粗细、极限值，其中极限值就是规定下标签最大字数，一个标签整几十个字，快成作文了，也不太合适，是吧：
标签的背景色，不同类型的标签颜色不同，但需要符合整体视觉策略和设计规范：
这些属性规范好，基本就够用了
文章来源：优设 作者：
医疗行业的交互设计，跟其他行业有何不同？有什么要特别考虑的点？设计师应该注意哪些方面？
产品体验设计通道中有条简单好记的定义： 1+X。
「X」这个字母常被定义为更多可能性，它的诞生往往是为了更好地服务行业与产品。
例如在医疗健康行业中，不再只有C端用户，我们要面对医院管理人员、患者、医护人员还有企业用户等；环境也不单是线上场景，它可能是医院、企业大楼、社康、疾控中心等等；合作方式同样独特，我们做出的任何一个设计都是需要客户过目的，每一个字段甚至都涉及到生命健康与安全，所以会要求我更高标准地了解行业与用户，促使我们在项目前期去不断学习和应用一些用户研究知识，使设计更加贴近用户。
过往经历中，总结了用户研究在各阶段的介入场景和方法，接下来会具体讲下在医疗健康项目中的运用。
企业健康项目是从一个合作开始的，公司的行政部门想要通过我们提供的健康管理产品来提升员工整体的健康水平，并将该方案进行复制从而提供一个企业健康管理的行业解决方案。
的确，员工是一个企业的宝贵财富，健康有活力的员工群体对提升企业生命力有着非同一般的影响。通过网络文献调研，我发现国内企业的亚健康状况并不乐观。
△ 国内企业健康现状
第一阶段用研——产品定义与设计方向
为了更了解员工和企业的真实情况和痛点，我们规划了用研计划，列出了三个用研目标：
目标1: 员工们的主要健康问题都是什么？
通过和企业方的沟通，我们发现员工的体检报告是挖掘健康问题的源头，于是我们由此开始研究。
首先，我们拿到了历年的公司员工体检数据统计（脱敏分析），整理出体检问题的Top10。
△ 腾讯2018年体检数据统计
获许可，我们也随机向外发放问卷，了解到一些公司职工最想要改善的问题。
△ 某大厦的用研报告（仅作为分析用）
目标2：企业现在所提供的服务有哪些问题，该如何改善？
B端: 由于这是一个B to C的项目，我们优先会去采访企业端遇到的问题，沟通发现企业都会投资提供的健康设施（体检，食堂，健身房等），其中很多设施并没有被充分利用，或是没有得到合理的分配，现有的线上预约流程也存在很大的后台计算成本。
△ 腾讯提供的健康服务与设施（非疫情期间拍摄）
C端: 通过公司内部招募和访谈了20名员工，我们总结为三个主要痛点：
△ 员工在体检健康中遇到的痛点
以上，我们也对企业客户与员工用户的诉求有了初步的了解。
△ B&C两端诉求分析
目标3：如何定义产品目标与设计目标？
通过以上分析，和其他合作团队一同讨论了体检与健康管理行业的现状和盈利点，我们最终确定了产品方向：通过加入AI技术，分析用户过往体检数据来给用户推荐最合适的体检套餐，帮助用户解析体检报告转化为更加易懂的方式，加强与医疗服务的定制化连接；并智能定制最适合员工的管理方式和行为，充分利用起公司资源。
△ 产品形象与定义
通过对整体流程的用户情绪地图分析，我们得出设计的关键词：专业，贴心，安全
△ 阶段情绪地图分析
知识点1: 访谈与问卷调研
不要一上来就直奔主题，可以先问一些简单回答的问题和闲聊，让用户进入放松状态时再聊重点问题。且要时刻关注受访用户的状态，比如：是不是开始疲惫，回答过于发散以及表达意思模糊等等。遇到这些问题，需要随时做调整。
访谈的时候最好不要单独行动，要有1个主导访谈的，一个记录的。如果访问过程很长，有条件以及受访者允许的情况下，可以进行录音有助于后期的整理。
访谈结束后，最好是当场，或者至少应该是当天就完成本场次的访谈记录和总结工作。因为根据遗忘曲线，人在20分钟后将遗忘42%的内容，而1天后则将遗忘74%。即使有录音笔记录，你也会忘掉很多细节的，诸如表情，用户的潜台词等等。想到的设计解决方案也可以先记录下来但不急于放到总结当中去。
第二阶段用研——产品与设计验证
确立了目标和方向，我开始从体检预约和检后管理两部分来进行设计，由于在前期建立了用研机制，我们会定期对重要版本的内容和信息设计进行测试验证，并让用户基于我们定义的设计标准来打分，判断是否达到了专业，贴心与安全。
卡片分类-测试内容与排序
在检后的体检报告解读中，我们需要对解读结果进行结构化展示，方便用户快速获取有用信息，提高阅读效率，由此我们运用了卡片分类法，让用户对其重要性的排序，得知对用户来说体检异常中的单项的指标解释>危害性>指导措施。
△ 卡片测试与分析
可用性测试-测试架构与信息形态
体检解读的首页我们绘制了三个版本的方案，来突出不同的信息通过制作原型demo来进行可用性测试，让用户选出最喜欢的并说明原因，最终选择出一个最优方案。
△ 体检解读首页可用性测试与分析
从弹窗内容组合到内容的体检解读指标的可视化设计我们都做了用研测试版本
△ 体检解读内页信息测试稿
最终得到更加符合用户认知的体检解读设计。
△ 体检解读设计
灰度测试与深度访谈
由于某些需求时间紧迫，例如体检预约，当时很快就要到体检季，于是我们快速搭建框架和基础功能的设计，细节疑问点列出后进行灰度版本测试，并对前期招募的种子用户进行测试访谈，总结现存版本的问题，同时我们也访问了企业侧，把他们的优化诉求纳入考虑。
△ 体检预约访谈脚本与测试结论
比如企业要求突出安全感，福利感与智能推荐，减少后台结算成本等，我们便通过明确隐私授权认知的全页面弹窗以及简化体检预约流程，2步变1步，增强页面福利与智能推荐的感知渲染来满足客户要求，也得到了满意的赞赏。
△ 隐私授权设计
△ 体检预约设计
以上的用研方法其实可以运用在大多数的项目中，于是我在后续的腾讯健康模块设计中也常会去使用，例如疫苗设计中的闪屏方案测试等等。需要注意的是用研应该被列入到日常的流程中去，而不能作为临时安插，需要在项目实施前就进行用研计划的拟订，才能保证我们和用研同学有条理地客观的进行调研和验证。
知识点2:卡片与可用性测试
就医流程是看似并不陌生的场景，痛点也非常明显，就是常被提到的「三长一短」问题（挂号时间长，支付时间长，问诊时间短），于是在进行线上就医服务设计时，很多人会认为没什么好特别调研的，竞品也非常多。
然而其实在设计中，最害怕的就是「我以为」。记得在做某医院的就医服务项目时，由于就医环境和用户非常复杂，所以我们在做这个项目时坚持去到了前线进行了实地考察与影子观察法，才发现了新的洞察。
实地考察中的望闻问切
说来很巧，现场的调研方法其实和中医中的「望闻问切」有异曲同工之妙。
△ 医疗场景用研方法
「望」：可理解为影子观察法：选择最能反映问题的时间和场景去观察用户行为，发现痛点，经过几天的观察我们发现早上8-10点是医院看病的高峰期，也是排队最严重，院内最拥挤的时期，所以我会在这两个小时集中观察和记录患者以及医生的状态。
「闻」：即为倾听，其实也是访谈法中很重要的一个原则，多让用户去诉说，减少自己的主观判断干扰用户的完整陈述，如果记不下可以录音。
「问」：根据我们想要了解和观察到用户的行为进行提问。
「切」：这里和中医中的切诊接触不同。是指切身去体验患者的感受，比如我会根据自己身体的某些不舒服去挂号体验流程，情景带入。
以上的实地考察后，我在第一时间用我们设计师的手法来记录整理：体验地图分析，并通过讨论提炼出设计的关键点：引导，连接，合并与转化。
△ 用户体验地图与关键点分析
知识点3:影子观察法
用户体验地图的落地应用
这四个设计关键点其实来源于痛点描述中的一些高频提到的情况，拿引导和连接这两个点来说明。
引导：通过观察发现，用户在嘈杂的就医环境中本处于极度焦虑紧张的状态，对信息阅读和处理的速度低于平时的好几倍，因此我们需要提供具体的，正向的引导。
△ 精准预约设计
连接：通过访谈和自己实际的体验发现，许多线上和线下的服务之间是断层的，一方面需要流程上连接我付了款下一步要去哪，怎么拿药；另一方面我们也发现线下的引导设计是一个非常重要的连接机会点。
于是我们从线上和线下两方面进行了连接，提供了一套整体的解决方案。
△ 候诊与取药签到设计
△ 医院物料布局与落地布置
通过用户关系图了解了每个相关利益人的人群要素和诉求，在设计中不仅会考虑针对他们的设计，也结合体验地图中的机会点引出了设计原则，作为设计的指导和验证标准。
△ 相关利益人分析与设计原则
测试与收获
上线后，我们穿上志愿者的衣服，去往前线进行现场解说和用户测试，经过一个月的努力，真实感受到了现场效率的提升和满意度的提高，院方和使用过的用户都非常满意，这也让我们设计师切实感受到了欣慰和成就感。
△复旦大学附属肿瘤医院病理会诊 整体服务上线前后对比
这得益于我们能长时间与用户在一起，真实地听到了他们的声音与感受，也把想法落地去帮助他们解决了问题。这个过程中，让我们发现类似的垂直领域需要去到前线自己去感受，而不是隔着屏幕去观察，每个人的思考角度会不同，会发现新的问题和洞察。
知识点4:用户体验地图
在医疗数据分析的场景中，我们面对的客户是政府和医院领导。相信在做TO B设计的小伙伴经常会遇到这样的问题：客户时间比较难约，给的调研时间有限；决策层客户思考的比较广而泛，很难深入用研。
基于这样的问题，我们想出了一个根据客户群体层级，区别调研的方法。
梳理角色
去年年初，我们曾走访多家公立和私立医院，优先通过管理层梳理出了关于数据处理上报的流程。他们对数据的关注度和处理顺序往往是有一个自下而上的上报过程，基层人员进行每个月度和季度的数据汇总，分析与简单的可视化表现，上报给部门管理和上级管理者进行审核提炼，最终给到管理决策者一些关键现象和趋势和对比。
由此提醒了我们，想要提供一个完整的数据解决方案，就需要绘制角色面板，区别调研目的与手段。
△ 医院层针对数据的处理流程
分角色的沟通用研
我们确立了针对基层人员，中层管理者以及决策管理者的用研目标并展开了差异化的沟通用研，我们会每个角色找1-2人和我们3-4个同事坐在一起，以焦点小组的方法一同脑暴某一数据场景和所需数据。
△ 医院数据现场用研
数据研究与总结应用
根据对医院不同角色的沟通梳理出了一些总结点，运用到了产品和设计中。
第一：我们发现了管理者们最关注的一些医院数据的形态，并打算把基础数据尽量以对比，警示等手段进行分析与场景描述。便于管理者直观获取他想要获取的辅助决策信息。
第二：根据不同角色提供针对性的角色面板，并梳理出个角色关注的数据模块和现象。
第三：各角色具体数据字段的梳理与总结，并进行了频率的标注便于后续的设计面板规划。
第四：调研中发现领导层在看数据时需要来回切换系统，且看起来没有一个统一的路径和条理，因此我们也和对方沟通，通过故事化的手法进行数据分析的流程体验设计，层层深入和下钻，从现象挖掘到问题本质。更加符合了用户看数据的顺序和认知。
△ 长沙超脑项目设计版图
除此之外，我们后面的产品和设计的汇报也会根据角色的差异来进行内容的调整，让听我们说话的人可以快速理解我们想要达成共识的内容，加快沟通效率，提升了在客户心里的印象。
这个过程中，通过用研让用户感觉到我们懂他们，并让其增加了参与感，对产品和设计都是一个推进器。
知识点5：TO B/G客户用研
说了那么多设计师在用研技能上的应用，也许有人会有这样的疑问：如何可以不断提升自己在各方面学到的技能呢？一年前读到《刻意练习》这本书，给了我一些启发，在此总结给大家，希望对你们有帮助：
1. 制定具有定义明确的特定目标
「提升专业」是个很大的词，所以我们往往定了一个很大的目标，然后被各种事情拖着然后抛之脑后。因此拆分目标才是第一步。比如最开始做交互时我发现自己在归纳场景时总会缺失，再比如每次自己在汇报总结时，耗时过长，缺乏重点，那么这些都可以被列入要提升的小目标，总之目标不要太泛太难实现，这样实现起来会更加容易，也更容易坚持和自我激励。
2. 持续学习与专注练习
研读多本相关专业书籍，并应用的项目中去。这是我的一个目标也是方法。投入项目后，我们往往会陷入事件当中，甚至会就一个点和产品争论不休。但其实跳出来，去看些新思路不妨为一个好方法。
比如我最近在读《感官心理学》这本书，提到人们对于「软」和「硬」的触感印象会延伸到女性和男性的联想上，提到女性人们自然都会有柔软的印象，男性则会有刚硬事物的联想，这也就充分佐证了对于不同性别上的设计形态差异。类似的小实验可以帮助我们的设计更有说服力。
大多时候理论知识很枯燥，也难以一时间就可以用到，但只要你读过，在需要的时候它就会突然跑出来给你灵感。
专注是我一个单线程人的特点，我很难在一个时间里同时处理多件事，所以我会每天根据要完成的训练目标，把时间进行划分，个人感觉这的确产出效率也会高一些。
3. 一定要有反馈
每一次的练习必须要得到反馈，这也是评审的重要性。但其实不同的目标点可以对应方面的专家，不仅限于leader了，同事也是很好的老师，比如我会去发现身边汇报比较厉害的同事，帮我把关。只要遇到问题，一定不会放过去问用户研究同学的机会。
某方面没有老师怎么办？让用户告诉你！首先我会常用可用性测试的方式去检测自己的方案中的信息传达，交互反馈等等在进步，另外我也会在每个项目后整理一个小总结，来记录自己的思考与进步
另外，以下是我在用户研究学习中读过的几本书，推荐给大家～
面对飞速发展的现在，各行业的产品也都在积极转型，例如开始涉足TO B行业和客户，开始研究00后的新生代用户，面对新事物我们设计师更要保持敏锐的眼光，利用自身的设计洞察能力去挖掘新的问题与方法，于是新的技能和方式也开始出现，所以我们一直认为产品体验设计师没有一个固定的能力模型，还是要根据你所从事的行业和产品来发现所需的技能点去发挥价值。学习的过程中，我们成就项目的同时也在慢慢成就自己。
文章来源：优设 作者：腾讯 April
蓝蓝设计的小编 http://www.lanlanwork.com