在这之前我得先提及一本书──《简约至上：交互式设计四策略》。这本书基本算得上是交互设计的入门必读书籍了，非常适合身处项目环节中上游的人员阅读与学习。
作者 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耍家
知名的免费图标网站 Iconfinder 要和大家一起对抗新冠病毒，和图标设计师联手推出一系列「防疫免费图标集」（Coronavirus awareness icons），超过 200 个与公共卫生、病毒传播相关图标，这些图案包括常见的 PNG 和 SVG 格式，可以将它们加入标志、海报、传单或类似的内容使用。
如果你想要制作广告牌，提醒在这个区域要洗手或戴口罩，这里有免费图标可让信息更容易被阅读。
依照 Iconfinder 网站说明，这些图标可用于洗手说明、卫生建议或是其他预防病毒传染散播的提醒信息，所有图标采用 Creative Commons BY-SA 3.0 授权释出，使用时需要标示出处，并以相同方式分享。
网站链接：https://www.iconfinder.com/p/coronavirus-awareness-icons
值得一试的三个理由：
前往 Iconfider 的「Coronavirus awareness icons」网站，就能看到这套专为对抗新冠病毒提供的免费图标集，点选 Download all icons 下载打包好的完整图标。
在网站中展示一些收录在这套图标集的防疫相关图案，每套图案都有不同风格，例如以单纯线条为主的设计，或是采用平面化设计的彩色图标，可以依照自己的需求选择。当然你也可以按下右上角的按钮前往 Iconfinder 找到这套图标的完整版本。
下载后就能取得完整的图标集，依照不同名称分类，有些是 SVG 格式，有些则包括 SVG 和不同大小的 PNG 文件，其中有个 iconfider_freebies.zip 在解压缩后还能取得一些和防疫相关的图标。
值得一试的三个理由：
文章来源：优设 作者：Pseric
Persona，在国内通常被称为「用户画像」，其概念最初由 Alan Cooper 在 1999 年提出。由于用户画像具备帮助人们在设计过程中聚焦于目标用户的需求，促进团队中不同利益相关者的沟通等作用，而逐渐成为被广泛使用的经典设计工具。也正是由于其经典地位，我们往往对用户画像在各类设计场景中的出现习以为常，却很少去对这一工具进行反思。本文将基于用户画像的研究现状，对其存在的问题与局限进行综述和归纳。
Matthews 等学者为了探究设计师以及经验丰富的用户体验专家对用户画像的实际看法，从北美一家科技公司招募了 14 名设计师作为参与者。值得一提的是，这家公司拥有庞大且富有影响力的设计团队，另外这 14 名参与者中，在设计领域有 10 年以上工作经验的人数过半。通过访谈的方式，Matthews 发现，大多数参与者在实际工作中都不会使用到用户画像，并分析了为何不用的 4 类原因。我将 Matthews 等原文中的 4 类原因归纳为以下 3 条。（下文中出现的 D1、M3、B1 等序号是参与者的编号）
1. 太过抽象
D1：如果你只向他们（指开发团队）展示用户画像，他们是不会相信的。只有当他们看到用户画像背后有足够的数据支撑，他们才可能相信。
其实，不止是设计师有这样的看法，Basecamp（原37signals）的创始人 Jason Fried 在他的一篇博文里曾这样说：它们（指用户画像）是模拟的、抽象的、虚构的，我不认为你能为一个压根不存在的人创造出优秀的产品。
2. 缺少人情味
M3：我认为，有很多细节和微妙之处是无法通过对用户画像的描述而传达的，我也不认为有人能像用户画像那样思考或行事。坦白地说，我一直对用户画像以及它的用途充满怀疑，我觉得它更像一个沟通工具。
缺少人情味的另一点在于：用户画像太过理想化。
B1：他们（指用户画像）描述了最为完美的用户（对所设计的系统有着超乎寻常的热情），以及最为匹配的情节。而真实的用户并不像这样，因此，用户画像并没有很多作用。
3. 属性无用，甚至有误导作用
我们知道，一个用户画像在被创建的过程中，往往会被赋予若干个属性，常见的基本属性包括：年龄、职业、居住地等等。在访谈中，有些参与者表示，那些被赋予在用户画像身上的属性没什么用处。
A1：用户画像的数据完全没有用。如果它是一个真实的人，我可能还会关注，但它本身不是一个真实的人，是那些添加在它身上的装饰让其看起来像真实的人，我觉得这是无用的。
还有一些参与者认为，用户画像身上的属性和细节太过分散，导致偏离了本应关注的重点。
L1：在创建用户画像的过程中，我常常发现，那些原本次要的方面反而变得更加突出了。你会发现，那些与关键维度并非真正相关的细节，像技能、工作职责、对软件和工具的熟悉程度，这些细节很容易提出，因为它们也同样容易去沟通和理解。然而，随之而来的代价是，把更为重要的细节给丢掉了。
1. 代表多少
Chapman 等学者指出，任何一个用户画像都仅仅只能代表潜在用户群体中的某一小部分。那创建多个用户画像是否可行呢？可行是可行，但这又引出了一个新的问题：当用户画像的数量增多时，它的可记忆性是降低的，相应也降低了它在设计中起到的作用。多个用户画像往往存在着信息冗余的问题，过多的用户画像还会大大增加设计决策的成本。对于通过大数据自动生成的用户画像，数量过多这一问题尤为明显：有时会产出成千上百个用户画像。
2. 属性越多，涵盖面越窄
既然用户画像所代表的是真实用户，那么，它涵盖的真实用户数量能否通过某种方法预估出来呢？上文中我们提到的属性（如年龄、职业、居住地等），为用户数量的预估提供了可能。基于以上问题，Chapman 等展开了定量分析的研究。他们一共选取了 8 个数据库，其中 6 个是通过市场调研得出的真实用户细分与特征数据库，另外 2 个则通过多元数据模拟出来。然后，逐一地去增加用户画像的属性数量，并依次与数据库进行匹配。实验的结果如下图所示。不难发现：当用户画像被赋予的属性增加时，它涵盖的真实用户比例是降低的；而属性数量增加至 9 个以上后，各个数据库的匹配率都很低。对此，Chapman 等的建议是在创建用户画像时，最好能对其涵盖的用户数量进行大致的评估，而不是简单的假设。
△ 属性越多，涵盖面越窄
1. 偏低的投入产出比
前文中有提到，Matthews 等通过访谈去了解设计师对用户画像的看法，但这项研究还不足以观察到设计师是如何将用户画像运用到实际工作中的。基于这块研究的缺失，学者 Friess 另辟蹊径，从民族学的角度出发进行了探索。她采用的方法是：选取了一家位于美国的设计公司，对它其中一个团队的设计决策过程进行全程地观察与录音。该设计团队由 4 名核心成员组成，在设计决策开始前，其中 2 名团队成员已经花费了数周时间，通过调研创建了 8 个用户画像，并输出了长达 20 页的用户画像文档，供团队其他成员阅读。Friess 对收集到的录音片段进行话语分析后发现：在整个设计决策过程的话轮中，用户画像被提及的比例仅为 3% 左右。而且，在这为数不多的 3% 中，85.3% 的比例又是由那 2 名创建用户画像的成员提出。长达数周时间所创建的用户画像，换来设计决策过程中约为 3% 的提及率，这个投入产出比或许值得我们对用户画像的运用重新进行思考。
2. 过于主观的代入
有这样一种用户画像，它完全源于设计师对问题的主观看法与偏见。更为通俗地讲，是设计师先主观地提出了设计概念，然后创建用户画像去支撑其概念，美其名曰「以用户为中心」的设计。这种类型的用户画像由 Jones 等学者提出，他们称其为「promotional personas」。Jones 等在伊利诺伊大学香槟分校教授设计类的课程，在长达 5 年的时间里，通过对学生们在课程所创建的用户画像进行观察，他们对用户画像的几种模式进行了归类，而「promotional personas」就被归在了「bad personas」这一类别中。Jones 等还举出了一个他们在课程中观察到的例子：有学生设计了一款闹钟，这款闹钟可以让用户以天为单位自定义规划一整个月的闹铃时间。然后她做了一些调研，调研后发现身边朋友们的作息都很规律，在时间管理工具上的使用频次也较低，因此不太可能去用她所设计的那款闹钟。然而，她之后却提出了一个与调研结果完全相反的用户画像，该用户画像每天醒来的时间都很不同，而且经常由于睡过头而错过重要的事情。
设计师凭借自己的直觉与经验去创建用户画像这种方式，尽管也能在设计中起到一定作用，但如果将用户画像完全当做支撑主观设计概念的工具，甚至不惜背离调研结果，用户画像就彻底地沦为一种形式了。这样的用户画像，对整个设计过程都是有害无益的。
3. 无法取代真实用户的参与
既然用户画像能作为真实用户的代表，那么，对于参与式设计（participatory design）这种需要真实用户直接参与的方式，用户画像是否能替代真实用户呢？Bodker 等学者基于电子政务的项目，探究了用户画像对参与式设计是否有支撑作用。通过 4 个案例进行观察，Bodker 等发现：尽管用户画像能促进设计师在实际的参与式设计开始之前去更多地聚焦于用户，但在参与式设计的过程中，并不能让设计师更贴近真实用户的处境，反而可能分散设计师的注意力，让其偏离对真实用户参与情况的关注。这样一来，也无法说明用户画像本身对参与式设计具有支撑作用。因此，如果要采用参与式设计，在条件允许的情况下，建议还是让真实用户参与其中，用户画像可能并不能取代真实用户。
尽管上文总结和归纳了用户画像的种种问题与局限，但这些并不能否认用户画像作为一种工具，对设计过程所起到的帮助。问题和局限的提出，旨在帮助我们更多地去理解这一工具，细分它适合的设计场景，探索能否结合其他工具以弥补它的短板和不足，从而达到更好的使用效果。
文章来源：优设 作者：陈梦蝶 驴妈妈UED
不管是做 UI 设计还是画插画，有很多同学觉得自己是因为天赋不够所以对色彩的敏感度不够，其实不然。一个可能是大家总结的太少，从来都是凭感觉和运气去配色，但配色都是有讲究的。本文不会给大家重复讲解什么是 rgb，什么是 hsb，什么是 cmyk 或者什么三原色，这些大家都可以从网上直接搜到。我今天要给大家分享的是人们是如何认识色彩，并且在产品设计中使用的。
大家都知道，对于不同的颜色，我们对其的感知是不同的，有人觉得暖色在前，冷色在后。暖色更醒目，冷色不醒目。那这是什么原因呢？首先我们要知道眼睛内存在两种感光细胞：视锥细胞和视杆细胞，视杆细胞能够感知光线强弱但无法感知颜色，而视锥细胞却相反，视锥细胞内还有 3 种对不同频率光敏感的细胞。我们经常会用到视锥细胞，而视杆细胞却用的少，更多的是在黑暗的环境中使用的多。
视锥细胞的三种类型分别是低频、中频和高频视锥细胞，分别对红、绿、蓝三种颜色的光敏感。而且这三个视锥细胞分别也有重合的部分。低频视锥细胞对整个可见光频谱都敏感，它的范围包含的比较广，特别是对于频谱中段的黄色到红色部分更加敏感。但是像高频的紫色几乎只有蓝视锥细胞可以感知。
大家在平时生活中都能看到，在马路上、机动车道上以及一些警示牌都会采用黄色、橙色等标识，因为这些非常醒目。更容易被红视锥细胞感知到，但如果你的标识用的是冷色调那这个交通事故可能要发生的频繁得多。
1. 人对色彩边缘的对比更加敏感
我们来做个实验，如下图，大家觉得在中间的灰色块是纯色还是渐变色，可能很多同学看上去都会觉得是个渐变色，但其实它就是一个纯色，不信的同学可以自己在工具中尝试一下。
但如果你把这个色块拿出来后，不在这个环境中直接进行边缘对比，那就不会出现渐变的情况了。光说原理，我们也来看一下在产品设计中需要注意的地方，因为在 UI 界面设计中我们通常需要把一些图片、卡片叠加放置，这样就会造成边缘视觉的对比，本来不明显的两个元素重叠之后变的很明显，例如一些标签的背景色和页面整体的背景色。
如果你想要让两个颜色接近的元素具有识别度，那么最好将这两个元素进行重叠摆放而不是分开摆放。另外，如果是卡片样式的设计，背景色一定不要过于灰暗也不要过于浅白，过于深的话会让卡片轮廓过于明显而导致整体看上去显脏以及很明显的对比，显得不自然和舒适。如果过于浅的话也会导致信息的不聚焦。
还有，为什么被框起来的文字会看上去更加有点击的欲望其实也是这个道理，因为文字和背景叠加产生的轮廓只是文字的轮廓，在我们的第一印象中只是一种符号。当它被赋予颜色之后，我们才会意识到它需要我们去注意或者可被点击，但依然不够明显，所以为了强化可点击这个感觉，我们才用了线框、背景色、箭头等方式。
1. 加深品牌印象与品牌感
一般来说，产品都会有一个品牌的主色。而这个品牌的主色也通常会运用在外面的产品界面中，所以例如闲鱼、马蜂窝等，主色都采用了黄色，黄色具有非常活泼、有趣、好玩的特性，无论是线上还是线下都使用了这个品牌黄色，从每一个线上元素的主色，到线下包装的印刷色。
但一定要注意的是，如果品牌的主色偏灰偏暗的话，可能不太适合线上的产品进行通用。例如之前的严选、云集、711便利店、宜家等产品的主色都是偏深和暗的，所以在线上的界面用起来会非常不和谐，和整体偏浅色、轻的风格对比起来太强烈，引起不适。
而且线上觉得还不错的颜色，由于印刷的原理，实物也会更加偏低饱和和偏暗。
2. 引导用户视觉凹增加易读性
我们在《如何有理有据做设计，而不是凭感觉？》里提到了人们如何阅读信息，提到了一个视觉凹的概念。所以在界面中，什么样的地方使用色彩是有讲究的。所以在这里通常会需要使用颜色的地方在于希望引导用户和吸引用户注意的地方才会使用色彩。例如下方产品，使用了高亮色来引导用户视觉。
当然色彩的运用也会将整个页面的层级凸显出来，而不单纯的用中性色来区分层级。
3. 区分信息交互的状态
同样是上两张图，大家可以清晰的看到，美团中的附近热卖好点、满减标签、价格，其实都只具备信息的呈现，但不具备交互的特征和状态。但淘票票中的「4.7万」和「展开」却不一样，「展开」使用了辅助蓝色，这里的展开就具备这个文案所描述的这个控件具备的交互特性──点击后将隐藏的文字展示出来。蓝色一般我们都会使用在某个可点的链接上，当然也会有其他的色彩来表示可点击。
所以不是所有的元素都要赋予颜色，这样会使整个页面非常混乱。
另外，UI 设计中主色除了引导用户的作用外，也可以表示当前正被激活的信息状态。例如爱奇艺 app 中播放详情页面，当前版块标签和正在播放剧集的激活状态。
4. 营造氛围传递热度
色彩除了上方所述的字段中的不同使用，在图片和整体氛围营造中也起了很大的作用，目前很多 2c 的产品往往会在界面氛围的营造中运用一些手段。例如导航栏、底部标签栏上的图标，或者在首页营销版块的瓷片区域都会用品牌色在活动时段内进行氛围打造。
在色彩的心理学上，大家都知道每个颜色具有一定的性格特征和表达。而且都会有正反两面，可以看下方多种色彩的描述。
然而其实很多的产品使用的色彩和我们所认知的会有一些差别，比如咖啡品牌的主色选择，在我们常规人之中，咖啡应该是褐色、棕色，但是大家看到星巴克、瑞幸、漫咖啡其实都用了和咖啡本质没什么关系的颜色。
在瑞幸刚出来的时候，很多人其实不太习惯把这个蓝色和咖啡结合起来，但是为了塑造品牌差异化，瑞幸一直将「蓝色」作为品牌的主基调，「小蓝杯」这一称呼不但让消费者感到亲切，也在众多的咖啡中有了属于自己的记忆点。在这支广告片中，主基调同样是使用蓝色，不但符合了当下消费者的视觉偏好，也在为用户留下记忆点之后，让用户在看到蓝色时自然而然地想到瑞幸咖啡。
但凡各位使用了这样的配色，保证各位过不了试用期，相信我。所以大家千万要避开。
高饱和度的色彩
高饱和度的色彩，会让人产生「幻觉」！让人产生视觉疲劳，例如我将饿了么这个界面的色调调整一下大家看一下，不亮瞎算我输。
灰部使用过多的配色
为什么很多时候我们总觉得界面脏兮兮的。是因为我们在界面或者配色中使用了过多的低饱和度、灰度较多的配色，所以这也是要避免的。
没有规律且过多的配色
让界面或者插画看起来非常混乱。一般来说颜色的使用也需要有侧重点，所以我们常用的方法是6、3、1的色彩配比。
荧光色
荧光色绝对不可以使用在 UI 界面中，尤其是主色。
太轻柔的颜色
在很多 dribbble 的飞机稿中，经常能看到这样的配色和练习。无论是在练习中还是实际项目中，这样的界面也完全无法让用户看到想看的信息，没有重点且轻飘飘的感觉。
现在很火的新拟物化设计
说真的，这样的风格确实耳目一新，但个人觉得可能不会成为主流。因为它就和第五种一样：信息可识别性很差。且不谈色弱的人群，就正常的用户来说大面积的白色+饱和度低的元素结合，感觉就是得了「白内障」。另外我们常说的一点就是所有元素都强调就等于什么都没有强调，这样的风格在每一个元素都具有阴影的情况下都在争先恐后让用户感知，原则是轻量化却又需要那么多阴影，这样就有点自相矛盾的感觉。
为了营造这样的「新拟物」的轻量氛围，还不得不在整个界面中简化大部分元素，能不加文字就不能加文字。有一句话一直非常影响我做设计：「设计是需要被简化的，但是简化的过程一定不简单」。所以不是单纯的简化所有元素为了达到这个风格的目的。
不要将对抗色重叠
例如下方，两种对抗色重叠后会引起视觉闪烁的感觉。
1. 定义主色
首先我们必须要说，色彩肯定是需要结合产品和用户的定位去指定和提炼的，所以前期会需要去做一些研究，例如用户画像，品牌冲刺或者是情绪板等方法。得到几类「真实的虚拟用户」，从而确定一些主色的方案。然后我们在主色的选择中需要避开上面提到的坑，并且对市面上的 app 进行总结，我们发现大部分的产品色，简单来讲在我们 HSB 模式中取色都在一个固定的范围，就像这样。
在上文中也说到用色比例的 631 法则，所以在选取辅助色的时候我们需要定义好辅助色可以用在什么地方。例如知乎，其实辅助色没有非常明显的一种或者两种，都是多色的辅助色方案，都在一个配色的系统中选取颜色即可。大部分产品目前都是这样的策略，一个主色搭配多个辅色，如果有其他独立的板块可能需要重新定义专属的配色策略。
2. 定义中性色
其次再定义中性色，比如字体和线条以及背景色。字体是为了让信息有对比，显示层级，那么通常给 2-3 种层级即可，至少 2 种，至多 3 种。在选择 3 个层次的中性色文字时，给大家一个建议：标题/正文文字颜色 HSB 的 B 值不要大于 20，备注和次要文字 b 值不要大于 50，默认文字不要大于 80，大家可以去尝试一下，且中性色不得使用纯黑。
文章来源：优设 作者：应俊
广告圈「门槛低」、「是个人都能做」，这种印象可能来源于，世界上最出名的广告公司之一——奥美的创始人，他是个厨师。除了当过厨师，还做过推销员，调查员，政治秘书，还种过几年地，最后成了 1960 年代，极负盛名
1914 年夏天，一战爆发了。在伦敦郊区的萨里郡，一个商人正脸色凝重坐在椅上发呆。他破产了，战争将一切都化为乌有，这对商人的儿子而言，意味着再也吃不到冰淇淋了。这个孩子刚满 3 岁，名字叫大卫·奥格威。
作为英格兰的名门望族，奥格威一家都不是吃素的。父亲和兄弟是名人，爷爷是富商。所以即使破产了，奥格威也能上贵族学校，先后受教于艾丁堡斐特思公学及牛津大学，成为众人眼中的「明日之星」。
然而他并没有毕业，他用自己的行动证明了自己是个弟弟，两年的大学时光，奥格威逢考必挂，最后被牛津大学扫地出门。他既没有文凭，也没有钱，索性在美琪饭店当起了实习厨师。
凭着天生的聪明才智，奥格威很快在美琪饭店混得风生水起。1932 年，一个月黑风高的晚上，法国总统保罗·杜梅像往常一样，来到了饭店享用晚餐，当吃到奥格威做的一款甜品后，不自觉地发出了由衷的赞叹：「C’est bon！」（法语：好吃死了！）
三周后，杜梅总统就死了，当然这不是因为吃了奥格威的甜点，而是吃了一个苏联人的子弹。
面对闷热的后厨，繁重的工作压力，让奥格威苦不堪言。奥格威选择结束了厨师生涯，回到了英国推销起了炉具，这个炉灶，就是鼎鼎大名的 AGA（雅家）。2015 年 3 月，AGA 曾在北京举办过一场发布会，现场一套蓝色 AGA TC 炉灶售价人民币 28 万元。
每天出入饭店、古堡、修道院的奥格威，业绩月月拿销冠，公司还委托他写了一本销售手册。奥格威当时甚至想过把「如何将炉具卖给盲人主妇」这些细节也写下来，这份推销书后来被《财富》称为「有史以来最好的销售手册」。
1936 年，他的哥哥为他在伦敦一家广告公司谋得实习的机会。此时的奥格威还是个广告菜鸟。他的创作「秘诀」，是从芝加哥订购一份美国剪报，挑选好广告一字不落抄袭，然后提交给他的英国客户。
由于表现出色，公司决定送他到国外学习美国广告技术，为时一年。这一年，他收获颇丰，不仅学业有成，而且邂逅了 18 岁的女学生。二战爆发的那一年，他们喜结连理。
△ 奥格威和他太太合照
1938 年，奥格威移居美国，在盖洛普咨询公司任研究员，为好莱坞制片商做民意调查。天赋异禀的奥格威能在开拍前预测出电影的票房，误差<10%。一时间迪士尼、华纳、米高梅纷纷上门求合作。
△ 在街头做民意调查的奥格威
1939 年 9 月，二战爆发，次年法国沦陷。凭借数据领域的造诣，奥格威受邀加入英国情报机构，出任英国驻美使馆二秘。战后他辞去了公务员工作，做起了农民，农作物是大烟。奥格威甚至迷上了这段采菊东篱下的农耕日子，但他深知自己无法以务农为生。
于是 1948 年，奥格威回到纽约，用 6000 美刀创办了自己的公司，取名「奥美广告」。在麦迪逊大街贴出一个别出心裁的招聘海报，上面传达了三点内容：
至此，奥美广告公司正式成立。算上奥格威共两名员工，整天大眼瞪小眼。为了活下去，奥格威接了当时能够接到的所有订单。包括一个毫不知名的小制衣厂哈撒韦。当时他们告诉奥格威，只有 3 万美元预算，却想和知名衬衣品牌竞争。
当时奥格威都快哭了。预算少要求极高，还不因为效果而解约。但谁让他叫大卫呢，过人的天赋让他的广告在全国走红，仅用 3 万美元，让销售额翻了三番。使这家默默无闻了 100 多年的衬衫品牌，一夜之间闻名全国。更令人无法想象的是，这个创意被沿用了 25 年。
广告为产品增添了来自远方的神秘感，激发读者对狂野的无限遐想。「传达一种特别的信息以取悦读者」。这本来是奥格威准备的 18 个方案中被否决的一个，但他想，给其中一只眼睛戴个眼罩也无妨，于是在影棚的路上买了个眼罩交给模特。
随后，劳斯莱斯花了 5 万美元找奥格威做的一支广告再次成为经典，在时速 60 英里时，这辆新款劳斯莱斯车内最大的噪声，来自它的电子钟。不用多说了，时至今日这依然是最有名的汽车广告之一。这些广告让奥美的名声如日中天，赢得客户如探囊取物。
后来广告界盛传，说奥格威是一个奇才，好几家大广告公司都提出收购意向时，奥格威却回绝了。多年后他回忆，如果当时诱他以金钱，他肯定就屈服了，但他们却以为奥格威在乎的是「创作的挑战」。
与其说创作是一种挑战，还不如说是一种依据特定原则的模式生产，他甚至禁止员工使用「创作」形容他们的工作。因为在奥格威看来，好的广告是「99% 的调查研究+ 1% 的灵感」。例如奥格威发现标题加入感情色彩的词可强化广告效果，经过几百个词的测试，「Darling」（亲爱的）一词高居榜首。于是他将它运用到多芬的广告，后来多芬成为了同类产品中最畅销的品牌。不久奥格威表示，他并不知道洗澡时使用电话是危险的。
奥格威出生名门，却家道中落，是牛津的明星，却被扫地出门，他为法国总统下过厨，也给国王当过特工。他对市场一无所知，从未写过一篇文案，直至 38 岁尚未正式涉足广告业，口袋只有区区的 6000 美元原始资金……但 3 年之后，这个一度黯淡的男人已在行业发光发热，犹如创造了一个奇迹。
1963 年，奥格威著书《一个广告人的自白》。可以说奥格威是一个超越了时代的牛人，他里面的一些理论，对我们现在做电商一点都不过时，有兴趣的小伙伴可以买一本看看。
奥格威凭借他独特的人格特征和洒脱的世界观征服了许多人，那么他的魅力到底在哪，不妨让我们走进他的思想世界，亲身领略一番这个奥美开山鼻祖的风采。
1973 年，奥格威正式退休。他在童话般美丽的法国多佛，买下一座 700 年历史的古堡，过起了隐居生活。从那时起，路过的游客们，时常看到这样一幅画面：一个晴天的午后，阳光透过一棵 17 世纪的冬青树，将星星点点遍洒小径。小径的一旁，一个衣衫褴褛的老头儿，正在仔细地修剪玫瑰花枝。老头儿的嘴里碎碎地念叨着：「终于，可以安心做个农民咯~」
在他的广告帝国之中，他的影响力深广依旧，直至 1999 年最终逝去。奥格威的故事到这就结束了，而离新的篇章，奥美中国的故事也并不遥远了。
让我们把时间拨回到 1979 年，彼时随着改革开放的深入，《文汇报》宣布了商业广告的正式回归。奥美广告快速响应政策的变化，于同年推出中国大陆地区的第一支作品——雷达表广告正式出道。如今再提起雷达表，相信很多 60、70 后依然对当年那则「轰动」的老广告印象深刻。
1997 奥美中国在华推出大众桑塔纳，这款车型很快红遍大江南北。当时的广告语「拥有桑塔纳，走遍天下都不怕」使用了近十年。在 1978 年年底，中国改革刚刚拉开崭新的序幕，当时的德国大众是唯一既愿意提供技术，又肯投入资金的汽车公司，可以说大众陪伴中国人从贫穷走向富裕，国人对着大众品牌有着不同的感情。
再把时间轴往后拨一下，来到千禧年的后 4 年，2004 年「我的地盘听我的」成为了年轻人最潮流、最个性的语言之一，奥美为中国移动「动感地带」所做的数字营销战，为奥美中国赢得了第一座戛纳国际创意节狮子奖杯。
作为客户品牌，「动感地带」并不是中国移动的第一个品牌，早在「动感地带」之前，「全球通」和「神州行」两大品牌早已存在，可以说，中国移动当时非常精准地找到了年轻人这个用户群体。在「动感地带」推出的第一年，中国移动就快速发展了 1000 万「动感地带」用户。
在 2011 年，大卫·奥格威迎来百岁诞辰，奥美进驻中国 20 周年，作为创始人的奥格威应该十分欣慰。而在 2012 年奥美中国凭借 「可乐手」在戛纳国际广告节首次斩获奥美亚太区首个「全场大奖」。
这个新颖的平面设计是可口可乐公司「快乐畅开」营销活动的环节。「快乐畅开」旨在为全世界人们的生活带来欢笑和快乐。这个标新立异的设计清晰地传达了分享的概念。整个视觉表达仅仅由两个显而易见的独特元素组成：「动感飘舞的丝带」和「经典曲线瓶」， 它们都是可口可乐全球使用的商标元素。
不得不羡煞旁人的是，这个广告是一个 20 岁仍在设计学校念书的香港设计师完成的。
奥美中国的故事也差不多完结了，最后放一些我收集的奥美广告，或许里面的 idea 会让你拍案叫绝。
由香港奥美公司为肯德基制作的平面广告，利用鸡翅的外形和火焰联系起来，用视觉暗喻突出肯德基鸡翅的热，辣的卖点。
由泰国奥美公司为乐高制作的平面广告，小孩通过玩乐高玩具拼凑自己的梦想。
由巴西奥美公司为 Petz 创建的平面广告，宠物可以成为一个很好的伴侣，去倾听主人的说话。
Amnesty International，德国奥美公司为国际特赦组织制作的平面广告，难民看窗外的景象像在看电视一样，我们可以关掉它，但他们不能。
德国奥美公司为海洋守护者协会制作的平面广告，塑料垃圾正在淹没我们的海洋，他们吃什么你就吃什么。
美国奥美公司为海明威基金会制作的平面广告，再现了书本里的故事，《老人与海》、《死在午后》。
印度奥美公司为曼妥思公司制作的平面广告，恶魔附身都被酸得逃之夭夭。
法国奥美公司为可口可乐公司制作的户外广告，两只手的负空间形成了可口可乐最经典的曲线瓶。
由印度奥美公司为世界自然基金会制作的平面广告，利用树的外轮廓，拼凑出三只可爱的小动物，树木拯救野生动物，野生动物拯救树木。
日本奥美为 ADOT 制作的平面广告，语言可以消灭战争。
泰国奥美公司为 Poly-Brite 制作的印刷广告，高吸水性抹布，强调产品的卖点。
由泰国奥美公司为乐高制作的平面广告，对于任何大小的想象。
奥美中国为 Saky 设计的平面广告，刮掉顽固食物。
越南奥美为世界自然基金会制作的平面广告，犀牛角和人的指甲是完全一样的材料，还想要吗？
由巴西奥美为克拉罗制作的平面广告，只需要一个字母就能造成车祸，请不要开车发信息。
文章来源：优设 作者：研习社
在页面导航栏中，常会见到返回、取消与关闭三者按钮。许多同学会弄混它们的使用逻辑，所以写一篇小文帮助各位梳理下。
先抛开图标，我们回到功能本身的含义上看。如果我们不在产品的语境里，就单看「返回」和「关闭」这两个词，你首先会想到什么呢？
当我这么去问自己的时候，脑子里出现的并不只是零碎的词语，而是一些场景和画面。比如我走错路了，需要原路返回；公司复工了，我要返程回去。或者，睡觉时间到了，我该关闭电脑了；饭菜烧好了，我得把油烟机关掉，等等。
如果仔细去想的话就会意识到，语义衍生出来的，都是我们日常生活中的经验和对世界的认知。产品中使用的各种语言，不管是文字也好，或者图标图形也罢，一直都是以我们对它最本能的理解为基础的。所以只要你联想自己对「返回」和「关闭」的看法，就能知道它应该在什么样的产品情境中出现，以及它为什么会出现。
于是，很自然的，我们会把「返回」和「路径」联系在一起，所以「返回」在导航设计中不可或缺。并且「返」也预示着我们会回到之前的路径节点，整个过程是连续性的，不被切断的。而「关闭」就完全不一样了，它一般和我们的动作有关，是一个短暂性的操作，相比返回也显得更为独立。
根据我们对语义的判断，再结合实际产品中「返回」的场景，我们可以概括出「返回」和「关闭」的特征差异。
1. 返回
连续性：按照产品的页面层级顺次跳转。但存在特殊情况，因为有些产品定义的功能出入口是不一致的，在信息架构层级已经做了一定的优化，所以返回不一定会按原来的路径回去，可能会按产品既定的路径。比如网易云音乐歌曲播放页进入直播后返回不是到播放页。
整体性：在产品功能页面关联性较强的功能中，「返回」需要连接各个页面与层级之间的架构关系，因此「返回」作为操作节点，可以帮助产品功能的各个页面之间建立联系，维持产品的整体性。
2. 关闭
非连续性：用于产品中的临时内容或临时动作，比如弹窗或活动页，与上一级页面没有直接关系。
独立性：非产品原生内容或是产品内的独立内容。比如小程序、浏览器标签等。
3. 返回和关闭的使用场景
知道了返回和关闭的特征后，我们可以从两者的使用角度上再去梳理一下。
现在产品中关于返回和关闭有三种状态：
1 和 2 的情况很好理解，我们只要根据前面各自的特征去看就能够理清场景。
3 的情况会有特殊性，因为它同时具有返回和关闭这两种看起来相矛盾的特性。其实这是由内容决定的，当内容同时具有独立性和整体性时，就需要支持两种操作。如小程序可以作为一个独立功能，但其本身又可以看作是一个完整的小产品，具有自己的页面结构和页面层级。所以小程序对于它所属的产品，我们有关闭的需要，小程序内的页面导航又需要返回来实现。
除此之外，产品可能开始只有返回，后面临时出现关闭按钮，比如微博「疫情地图」中使用「小区疫情查询」和「7×24 小时疫情快讯」后会出现关闭功能（帮助用户快速退出）。
这里我们可以从连续性和非连续性的角度看，产品针对具有复杂层级和内容的页面设计了顺次（返回）和跳页（关闭）的导航方式，其中关闭随实际情境出现。以此为用户提供了更为灵活的导航路径，来同时满足用户逐级深入、连续返回浏览和选择性查看、临时关闭的需求。
针对于「关闭」，它和「取消」会有重叠的含义，所以有时并不能很好地去区分这两个功能表达的应用场景。于是，我们可以借用之前的方式，先把「取消」单独拿出来理解。
一般来说，「取消」意味着行为过程中，还有后续行为，整个过程没有完成，当下后悔了，因此取消了当前操作。它更倾向于表达我们主动去做了什么改变，然后中途放弃了。
比如，想煮个饭，于是下了米，倒了水，定时，确认（取消），完成（关闭）。
这时候中间如果突然不想煮饭了，在定时之后，就停止当前行为，那就是取消。但点了确认并完成煮饭之后，这个行为就结束了，只能关闭。因此，它们之间就是行为上的差异。
就好比，打开微信公众号文章，内容已经加载出来，行为已经产生并结束，这时候左上角就一定是关闭。而发朋友圈的时候，左上角是取消，那是因为行为过程还在继续，没有发布，所以可以取消。而发布之后，就无法取消，想要关闭，也就只能删除这条朋友圈了。
所以在操作行为中的页面，左上角最好是使用「取消」。
当我们对词的含义有了进一步思考后，就可以去看它们在产品中的表现了。
比如广告的关闭、推荐内容的关闭。都是产品自身提供的内容，用户不想看到就选择关掉了，没有试图去改变什么。
包括内容页面，或者活动页面，被点开，且加载完成呈现出来之后，这个行为就结束了，没有取消的概念，只有关闭。
再比如，选择图片文件时的取消，微信发朋友圈、微博发帖时的取消等等，我们能发现都是用户主动采取了什么措施，但是又后悔了所以选择取消。
或者如游戏设置，就不适合用关闭，会让用户在理解上产在歧义，比如用户设置到一半，不想设置了，那现在关闭的话，设置是生效了么？所以用取消会更合适。
这些时候，不存在关闭的概念，因为没有内容可以关闭，只能是取消当前行为。如果使用关闭，与该场景下的用户行为不符，反而增加了用户对文案的理解成本。
简单来说，取消强调的是放弃改变，关闭强调的就只是抉择。
不过这里也有一个特殊例子，就是，微信公众号文章转发给好友，左上角是关闭，而钉钉里面内容转发给朋友，就是取消。为什么呢？
在一些特殊场景之下，「关闭」是包含「取消」的。
好比刚才煮饭的例子，现在的电饭煲很高级，如果在过程中不想继续了，拔掉电源就是完全关闭了，但同时这个行为也包含了人不想继续煮饭这个行为，想取消掉了，所以这时候关闭是包含取消的。它跟文章加载完成，已经呈现出来，是不一样的。
而上面这个微信与钉钉的例子，就存在这种包含关系。比如，内容已经加载完，要分享给好友，这时候加载出来的好友列表已经出现，只是选择发送给谁的问题，用户可以关闭已经加载完成的好友列表页面，或者理解为用户打算取消当前行为。
不过这样的设计并不建议大家将其定义为关闭，因为毕竟行为还在继续，使用取消反而更容易理解也更符合场景定义。
譬如，PC 的弹窗经常会同时出现叉（指代关闭）和取消，虽然操作的结果都是使弹窗消失，但是用户的操作目标是不一样的，事实上这里提供了两种选择，即我不想做决定，我要关掉弹窗，以及我决定现在不这么做，我要取消这个动作，这里的关闭其实就暗含了取消的动作。
在 PC 端，我们有足够的空间为用户提供不同的选择，给予用户充分的自主控制权，以满足他们对功能的不同期待。而在移动端，我们需要删减或合并功能，所以当用户同时产生重叠的诉求时，我们往往会选择当下最符合用户心境的功能，这是「场景细化」的结果。这也能解释为什么现在很多 PC 产品的弹窗中也只会保留取消，而不提供叉（指代关闭）的选择。因为用户面对功能不知所措、不做决定的情况已经越来越少，更多的用户已经明确地知道自己应该怎么做。
这就是「取消」和「关闭」的差异，以及移动产品对两者的取舍的根本原因。
同样的，有一些页面，取消和关闭都会用叉的图标来表示，只是在不同情境中，这个叉同样可以理解为取消，关闭，以及取消或关闭。差异点跟上述内容相同。
返回、取消和关闭看起来简单，深入分析后又显得复杂，但相对复杂的分析都只是为了能简单地去运用。在这个问题中，每个人都可以从自己日常的经验出发，然后在产品不同的语境里去体会一个词语、一个图标背后隐藏着我们什么样的认知和使用的习惯。
那由这个问题延伸的，其实还有产品的导航方式，页面出入口的设计差异，产品中整体与独立，连续与非连续的内容结构，原生与非原生页面的差异等等。
小问题同样可以见大，但我们也不需要过度思考，本来问题的解读角度就是因人而异的，也无法面面俱到，上面的只是我的理解方式。设计还是需要回归到用户和产品的目标，再去结合场景和产品业务的使用模式才能得出合理有价值的方案。
文章来源：优设 作者：呆呆U理
最近方正集团负债千亿，被银行申请破产重整的消息让众多设计师兴奋不已，心里暗自在想，那方正字库一万多款字体是不是就可以免费使用了？醒一醒，不太可能，身为设计工作者，尊重他人的设计和拥有版权意识是很重要的。
方正字库属于北京北大方正电子有限公司，而这个公司是方正集团的子公司。就算方正集团真的破产倒闭了，根据我国法律，方正字库何去何从也跟这两家公司的法人是否一致有关，如果一致，那么就可能被收购重组，如果不一致，那么就继续独立运营。关键是，无论是什么结果，方正字库里所有的字体都是有版权的，如果随意商用，就会导致侵权，乃至把整个公司都赔进去。
直接去网页搜索，便有数不清的方正字体侵权案例。大到电影和游戏的宣发，小到淘宝店铺的页面，只要你使用了方正字库的必须购买版权才可商用的字体，都有可能收到来自方正字库的律师函。那么该如何避免字体侵权呢？其实最好的方法就是使用免费可商用的字体，或者乖乖去买下字体的使用权。
一篇文章告诉你，该怎么判别字体是否侵权：
如果你实在要免费用方正字库的字体的话，那么就选择「方正黑体简体、方正书宋简体、方正仿宋简体、方正楷体简体」这四种字体吧，已经向方正字库授权服务官方求证过，这四款字体可以直接免费商用，不需要书面授权。
不过有那么多免费、适用度广、并且可以商用的字体，为什么要执着于方正呢？优设标题黑和优设好身体这两款字体，无论是做 banner、海报还是文字设计都很合适，还没拥有的设计师们快来下载。
优设标题黑：
优设好身体：
还有优设精心为大家挑选整理成的 2020 年免费可商用中文字体最全合集，链接给你们，正好需要的话，就快去下载使用。
最后，介绍两个可以查询和下载免费可商用字体的网站。
1. 字由网
网站链接：https://www.hellofont.cn/home
第一个是字由网，虽然需要下载客户端激活字体进行使用，不过截至今日，字由拥有 511 款免费可商用字体，对比一下乱用字体可能产生的侵权费用和烦恼，还是下载客户端性价比比较高。
网站及使用介绍：
2. 猫啃网
网站链接：http://novicehou.gz01.bdysite.com/
第二个是猫啃网，是免费开源可商用的公益字体网站，截至今日，网站上共有 155 款字体，可供设计师们选择和下载使用。
文章来源：优设
讲一个老东家的故事。一次产品迭代会上，老板在台上讲到打算重构 C 端产品框架，想重整标签栏的标签设定。可在讲到这一部分的时候卡壳了，迟迟说不出「标签栏」这个控件名，气氛有些尴尬。这时一名产品经理说道：底部导航栏！会议得以继续。
不全错，这么说也算能理解。控件在界面底部，能引导用户切换页面。但如果标签栏把导航栏的名字占了……那原本的导航栏应该叫什么呢？顶部标题栏？那导航栏里的内容控件又应该叫什么？左上角或者右上角的按钮？
接地气的名称让我们一听就懂，直到有一天你打算跳槽，你拿着自己的作品到下家面试，设计总监几个术语啪啪把你问得不知所云。这些「死控件」、「死栏目」在页面上不可或缺，在设计每一个页面时你以为对它们早已了如指掌，偏偏在关键时刻，它们却六亲不认了。
「我又不走形式主义，为什么一定要说专用名词呢？接地气的名称不是挺好吗，沟通。」很简单的道理，如果名词和概念都混淆不清，有没有花功夫在 UI 设计领域进行深度专研也就一目了然了，还何以谈论如何将它们运用自如呢？
这样的经历，让我产生了一个想法。是时候做一些知识内容沉淀与分享了，不能让更多的人走我踩过的坑。第一期我们便来讲一讲导航栏。
导航栏 Navigation Bar，也简称为 Navbar。一定会有不少刚入门的 UI 新人，在诸多的 Bar 控件中，难以区分它所指代的区域。
在 iOS 上，导航栏是指显示在应用程序顶部，位于状态栏下方的容器区域，层级应高于当前页面内容。
在安卓上，Google 公司在 Material Design 中也赋予了它同样的定义，但是却给了它另一个名称，顶部应用栏（Top App Bar）。
△ iOS与安卓的规范与命名区别
请务必要记住：导航栏是用于构架当前屏幕的内容，阐述当前屏幕的状态，并且起到连接父子级页面层次结构的作用。所以回到开头的小故事，为什么标签栏不能叫做底部导航，因为标签栏是构架了多个屏幕之间平级页面的内容切换，和「导航」的定义没有关系。
一个基本的导航栏容器一般承载的信息可能会有：标题、导航按钮、内容控件按钮、其他控件（比如搜索栏、分页标签或分页控件等），千万别忘了还有分割线。（比如微信的导航栏）
1. 导航栏标题
时间倒退回 2017 年以前，这时候的移动端规范下的导航栏还是循规蹈矩的，样式单一。但随着 iPhone X 等一系列全面屏手机相继问世后，移动设备在屏幕高度上有了进一步的扩展，界面设计在一屏内的发挥空间也随之增加。iOS11 发布后，大标题导航栏设计风格兴起，随后被引入平台规范。
于是现在 iOS 与 Material Design 在导航栏上也都定义了两种导航栏标题规范，常规标题与大标题。
常规标题是指在高度为 88px（iOS@2x下）的导航容器中，居中放置一个当前页面的标题。标题字号一般为 34px-38px（34px 为 iOS 标准规范，但实际项目中可以尽量在不小于 34px 标准的情况下根据设计需求确定）。
△ 常规导航不同标题字号的案例及视觉效果
大标题是将导航栏高增加到 192px（iOS@2x），保留高度为 88px 的导航容器来承载内容控件按钮，将标题下坠居左。iOS 的标准规范定义大标题的字号为 68px。但由于英文有大小写区分，在视觉上有一定的层次表现，而中文因为缺少一定的层次结构，并且相同字号的中文视觉大小大于英文，所以大多数时候我们在进行大标题设计时，会适当缩小，一般为 56px-64px 居多。
△ 大标题不同标题字号的案例及视觉效果
大标题导航栏的优点毋庸置疑，页面留白更多，呼吸感更强，大气现代、格调更高，因为页面标题巨大，能够帮助用户快速确认当前所处位置。采用统一的大标题，让页面布局风格快速统一。但缺点也显而易见，因为增加了导航栏的高度，导致屏幕利用率降低，一些通过广告变现或更加注重一屏内内容呈现的应用便中和了常规导航与大标题导航的优缺点，进行了风格改进。
△ 改进的大标题案例
那我们如何在常规标题和大标题之间抉择呢？这可不单单是设计风格的问题，还受产品定位与功能的影响。苹果的设计师在 Apple Music 中实验并验证了一条结论——在内容非常丰富、层级结构较深的产品当中，大标题能够帮用户快速确认自己的位置。
所以我理解的适合使用大标题风格的产品一定是：突出内容呈现而不是功能繁琐的；产品定位更偏向于现代或文艺艺术的；需要快速统一界面风格的。而层级结构需不需要很深，这并不一定，我反而觉得功能越单一、产品体量级越轻的应用，越适合大标题。
所以如此看来，国内使用大标题成功的案例就为数不多了，这可能与中文字体还有国内 app 产品功能都比较繁琐的原因有关，真正做到了使用大标题快速帮助用户确认自己位置，并且结合了产品特性与风格的，我认为人人都是产品经理的移动端在这方面做得非常棒。
2. 导航按钮及内容控件按钮
iOS 规定导航按钮位置仅能用于放置返回按钮，可以添加一个层级的面包屑，帮助用户有效地明确当前页面层级；Material Design 中，不仅可以放置返回按钮，还另有作用，菜单图标-用于打开导航抽屉或者关闭图标-关闭工具栏。
△ iOS与安卓的导航按钮区域区别
这一点与 iOS 的定义有着天壤之别，iOS 非常明确地赋予了工具栏的定义，并且将导航栏和工具栏（Toolbars）彻底地分离开，典型案例就是 Safari。
△ iOS明确地将导航栏与工具栏分离开
在内容控件上 iOS 与 Material Design 也大相径庭，Material Design 不去限制你的内容控件多少，因为它提供了溢出菜单，并可以根据屏宽的变化，自适应释出和收纳溢出菜单中的控件。
而 iOS 则规定我们，要给内容控件按钮足够多的空间，必要的时候，隐藏导航栏标题也未尝不可。
那么真实的项目中，我们往往为了快速落地，会存在一稿适配双平台的情况。这时候我们应该遵从哪一个平台的规范呢？答案是：许多大厂的做法已经向我们验证，规范不分家。
在 iOS 诸多的应用中溢出菜单早已普及，尽管这是 Material Design 提出的设计理念。
△ Material Design的溢出菜单也被运用在iOS端
虽然国内遵从 Material Design 进行 Android 应用设计的情况相对较少，但它提供的设计理念与方案却并不局限在安卓平台。
3. 分割线
分割线只是一种体现形式，我想要表达的是，别忘记区分导航栏与内容界面的视觉层级关系。Matetial Design 提醒我们，顶部应用栏可以与内容位于同一高度，但滚动时，请增加导航栏的视觉高度，让内容在其后方滚动。而 iOS 则默认采用了背景模糊的方式区分了导航栏与内容区域的层级关系。
△ 区分导航栏与内容区域的层级关系
缺少视觉分割会让用户分不清导航栏与内容界面，它们看起来会更像一个平级。对用户视觉区分内容主次其实是极不友好的。
4. 其他控件
关于其他控件，iOS 只在规范中提及到了分页控件。苹果设计师考虑到部分场景在当前页面中还存在信息层级结构划分，此时建议可以在导航栏中使用分段控件。
但国内的应用程序早已将导航栏容器的作用发挥到，基于导航栏层级始终高于内容区域的特性，我们通常可以将分段控件、分页标签、搜索栏等等用户可能随时使用的工具放在导航栏中。
△ 导航栏通常会承载的其他控件
导航栏是几乎每一个界面都必定存在的控件，正因为无法轻易删减，逃不掉就必须用好它，不然很容易沦为页面的减分项。
设计好导航栏不仅仅是视觉上的工作，表现的方式、承载的按钮与组件、滚屏时的组合操作还能给用户带来极大的体验增益。
文章来源：优设 作者：
2019下半年，阿里巴巴旗下B2B业务平台1688官宣了全新的战略升级目标：针对工业领域进行全面升级支撑，坚持“品牌正品、品质服务”，聚焦在内容、服务和用户上，致力于打造需求驱动的C2M新模式。重塑市场格局，加速制造业流通数字化升级。
伴随着业务的整体升级，工业品牌PC首页作为买卖家感知业务价值的门面和流量承接的关键场景，需要同步升级才能更好的满足买家需求，提升买家体验。
三大升级目标
1、 提升内容与买家匹配精准度：从旧版的数据分析来看，搜索和导航栏UV占比超过70%，其他区块尤其二屏及以下点击率很低，说明市场大部分的内容对用户没有吸引力，需要为用户推荐更丰富、更精准的内容才能把用户留下。
2、 提升内容框架合理性：旧版场景框架结构较为混乱，内容组合自由度过高，采购链路不清晰导致用户体验不佳。且随着内容的更新，旧的框架和新的内容也无法匹配，需要升级框架使采购链路清晰化，提升用户体验。
3、 提升工业品牌业务认知：随着业务打法的升级，工业品牌的核心理念也进行了升级，新版的工业品牌市场需要提升用户对平台价值的认知，树立品牌正品的心智。
升级策略
一、 围绕买家分层升级内容，提升内容与买家匹配精准度
定义用户感兴趣的内容，从买家分层做起。我们沿着围绕买家身份进行个性化导购场景推荐的思路，以用研提供的买家核身数据资料为基础，再结合运营提供的经验，提炼出不同身份的用户画像，抽象出他们的采购特性。
然后新增了一个专门的个性化身份场景模块，进行有针对性的商品、商家、工具推荐，实现人、货、场的个性化匹配。
除了新增的个性化身份场景外，首屏新增了三个固定营销位，聚焦在典型买家的普遍诉求上：新人活动、金融活动和服务(物流/发票)专场，打造以贸易商/电商为核心，门店/企业自用为辅助客群的营销+工具一体化流量圈。同时新增了低价场景，以日为单位，折扣幅度更大的“每日特惠”，用低价的硬通货提升用户粘性促进转化，强化用户对工业品牌的认知。
二、 打造营销+工具扁平阵地，从内容框架升级提升体验
1、 采购链路清晰化
定义每一屏用户的核心诉求，提供有效的、符合用户预期的对应内容
2、 简化容器形式：突出内容降低阅读成本
以首屏设计为例，以不同底色分隔区块，省略所有不必要的间距分隔，使首屏的整体性更强，形式更紧凑聚焦。
三、 营造「数字工业」氛围，提升用户对市场感知，塑造品牌正品心智
导购场景里的品牌打造，核心价值在于强化市场形象，让用户感知到平台价值，认知平台特性。工业品的电商网站那么多，除了内容层，表现层我们也需要和其他网站有显著区分，具有自己的“个性”，给用户不一样的体感。
所谓“个性”即是品牌定位。我们从工业品牌的平台定位出发，聚焦业务本质的核心理念和价值优势上，再结合用户视角的感知倾向，最后推导出数字化、工业感两个核心关键词。然后顺着关键词进行具像化发散，再从具象元素中筛选出典型的，抽象的融入到页面中落地，从而打造「数字工业」的品牌形象。
标准色&ICON
工业品牌从1.0版本开始就一直采用的是黑黄配色，黑灰色取自金属，黄色则是机械设备、工业产品(如安全帽)上的常用漆色，这两种颜色是工业场景中最具代表性、通用性的常见色，容易让用户感到熟悉而引起情感共鸣。为了品牌的延续性，3.0仍然保持了黑黄的主配色，并在此基础上新增了四种从工业品行业场景中提取的重色调冷色，增加配色上的丰富度和拓展性。ICON设计上运用粗重的线条，硬朗的方角，塑造沉稳、严谨的体感。
图形&动效
为了营造具有科技感的数字化氛围，在设计中融入了一些从HUD风格中抽取出的元素。如每日特惠模块中的动态表盘和标注数据变化，会呼吸的闪烁button和hover状态下出现的定位框。前者表达了数字化的概念的同时强调了折扣幅度、板块特性，后者则算是操作时出现的小彩蛋。
立体组货场景导购：3D化的场景还原导购，直观的体现线下生产场景的线上“数字化”的概念，不仅易让用户产生代入感，也增加了页面导购专业度与视觉丰富度。
升级后整体数据提升明显
结语
此次PC整体升级，根据买家分层新增了更精准匹配的场景推荐，优化了内容框架，营造了数字工业的氛围来塑造具有平台特性的市场形象。当然在项目的过程中，也因为项目周期内的一些局限性，让产品还有很多优化完善的空间，后续仍需继续挖掘买家诉求，通过不断的探索和创新，提升买家体验。
文章来源：站酷 作者：CBU设计 龙奕柯
蓝蓝设计的小编 http://www.lanlanwork.com
