在页面导航栏中，常会见到返回、取消与关闭三者按钮。许多同学会弄混它们的使用逻辑，所以写一篇小文帮助各位梳理下。
先抛开图标，我们回到功能本身的含义上看。如果我们不在产品的语境里，就单看「返回」和「关闭」这两个词，你首先会想到什么呢？
当我这么去问自己的时候，脑子里出现的并不只是零碎的词语，而是一些场景和画面。比如我走错路了，需要原路返回；公司复工了，我要返程回去。或者，睡觉时间到了，我该关闭电脑了；饭菜烧好了，我得把油烟机关掉，等等。
如果仔细去想的话就会意识到，语义衍生出来的，都是我们日常生活中的经验和对世界的认知。产品中使用的各种语言，不管是文字也好，或者图标图形也罢，一直都是以我们对它最本能的理解为基础的。所以只要你联想自己对「返回」和「关闭」的看法，就能知道它应该在什么样的产品情境中出现，以及它为什么会出现。
于是，很自然的，我们会把「返回」和「路径」联系在一起，所以「返回」在导航设计中不可或缺。并且「返」也预示着我们会回到之前的路径节点，整个过程是连续性的，不被切断的。而「关闭」就完全不一样了，它一般和我们的动作有关，是一个短暂性的操作，相比返回也显得更为独立。
根据我们对语义的判断，再结合实际产品中「返回」的场景，我们可以概括出「返回」和「关闭」的特征差异。
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设计 龙奕柯
本文要介绍的「Palettable」是一个线上配色工具，Palettable 通过互动方式协助使用者找出最合适的色彩组合，开启网站后会先随机显示颜色，使用者可点选喜欢、不喜欢（或是使用快捷键）重新显示颜色或将颜色固定在页面中，最后就能得出五个搭配好的颜色组合。
依照说明，Palettable 收录数百万设计师的知识结晶，这些颜色可以协助我们产生漂亮的调色盘，利用控制选项亦可个别调整每个颜色，最后汇出带有色码的PNG 图片或固定网址。
网站链接：https://www.palettable.io/
使用教学
开启Palettable 后会随机显示一个颜色，可点选下方的喜欢或不喜欢（快捷键为L 和D），喜欢会将颜色固定并开始选择下一个颜色，不喜欢就会继续演算其他颜色。
每个颜色中间会有HEX 色码，点选下方的设定选项会出现调色盘，可以更直觉选择你要的颜色。
点选喜欢后前一个颜色会被固定，接着就继续选下一个颜色。
在我十分钟的使用经验，重复几次不同的配色组合，发现Palettable 会随着使用者喜欢的颜色而选择更为贴近、可互相搭配且不重复的色彩，这部份相较于其他只能随机选色的服务来说应该更有优势。
持续重复到第五个颜色，Palettable会跳出最多只有5个颜色的提示讯息，点选「Export」汇出结果。
Palettable 支援汇出为固定网址（会带有你刚才选定的五个颜色组合）或是输出为PNG 格式，如果你想把颜色组合保存下来，储存为图片会更易于整理和使用。
下图就是我透过Palettable 建立的配色组合，每个颜色会有预览，下方带有HEX 色码。
值得一试的三个理由：
文章来源：优设 作者：Pseric
新拟态设计（Neumorphism UI）是 2020 年 UI 设计的主要趋势之一，你可以在 dribbble 上看到很多作品，新拟态是基于New+Skeuomorphism 英文单词的拼写。它是一种使用对象阴影的模糊、角度和强度来突显出对象的样式。由于其柔和的阴影和整体的外观，使该设计看起来更加的逼真、未来、现代、真实、有吸引力。
但是老实说，这不是最实用的设计。尝试设计和上线以「新拟态」为整体调性的产品，很有可能让所有人失望，包括你们的同事、用户和可访问性用户（目前有 5700 万美国人患有某种程度的残疾。在上网的用户中，有 54% 的成年人是残障人士，来源于：W3.org）。
根据 W3 的说法，web 和移动端的可访问性包括影响访问的所有障碍，包含：
仅新拟态而言并不支持：视觉、认知、物理方面设计。
让我们深入地讨论为什么新拟态 UI 和 可访问性是无法共存的。
免责声明：我不是可访问性和新拟态方面的设计专家，本文旨在分享一些有关新拟态的一些想法。下面使用的 dribbble 作品仅供参考，以突出我在此问题上的观点。没有一丝评价、嘲笑、不尊重以下设计师的意思，如果你的设计在下面展示了，并且你希望我尽快删除，请及时联系我。
新拟态对视力低下、失明、色盲的用户来说，可辨识性较差。
△ https://dribbble.com/shots/10006635-Neumorphic-Rebound-of-Nomad-iOS-UI-Kit
当设计中带有重要 CTA 按钮时，你经常考虑并注意使它重点突出，并且在页面上容易被识别阅读。但是，当使用新拟态的设计风格时，没有诸如对比度之类的东西，因为按钮的材质与背景是相同的，唯一将它们分开的是角度和各种柔和的阴影。
△ https://dribbble.com/shots/9393020-Mi-Remote-Control-Mobile-app
根据 W3.org 关于移动端可访问性的描述：
与台式机/笔记本电脑设备相比，移动设备更可能用于各种环境中，包括户外。在户外，阳光或其他强光源下更可能产生眩光，这种情况提高了对所有用户使用良好对比度的重要性，并可能加剧视力低下的用户在移动设备上访问对比度差的内容的挑战性。
与对比度问题相关的 WCAG 2.0 成功标准是（原文地址：https://w3c.github.io/WCAG21-zh/#contrast-minimum）：
新拟态让用户思考。
△ https://dribbble.com/shots/9592062-Neumorphism-Smart-Home
一般来说，带有阴影的元素通常比没有阴影的视觉上更加突出。但是，使用新拟态设计时，大多数元素都会漂浮并脱颖而出，在一个屏幕上互相竞争，用户很难轻易理解页面中的视觉层次和信息层级关系，这会导致界面缺少适当的焦点，从而在眼动追踪中造成混乱。
界面上缺少信息层级关系的结果，会对用户的决策过程以及他们的思考过程产生重大的影响。因此，如存在多个可操作的内容，但是信息层级，重点不突出，这会让用户在当前的流程或页面上产生困惑，很难理解正在发生的事情。从而可能导致错误的判断和误操作，好的 UI/UX 不需要让用户思考。
认知和学习障碍影响人们处理信息的方式。例如，它们可以影响人们的感知、记忆、语言、注意力、解决问题和理解力。类别和条件的术语各不相同，包括智力残疾、发育障碍、注意缺陷多动障碍（ADHD）、自闭症、痴呆症、诵读障碍等。
△ https://dribbble.com/shots/9916835-Neumorphism-Smart-Home-app
新拟态会造成混乱：
- 我可以点击吗？
- 选择了什么？
- 不是什么？
- 这是可点击的吗？
- 还是不是？
对象的阶段由内部/外部阴影决定和标识。由于新拟态围绕着各种阴影色调和角度变化，因此用户不禁要问，可点击与不可点击之间的界限在哪里。
△ https://dribbble.com/shots/9938821-Smart-home-app
每个使用新拟态的产品都可以根据其功能和要求有自己的 UI 设计规范，但是由于阴影、角度和浮动水平的不同，由于缺乏一致性，迷失了方向的可操作项，「新拟态」可能会给用户带来麻烦，最终为残疾用户造成身体障碍。
触发可操作性的元素应该足够清晰，以便与不可操作的元素（内容、状态信息等）明确区分。提供元素可操作的明确指示与具有可操作元素（如按钮或链接）的 web 和本机移动应用程序相关，尤其是在交互模式中，可操作元素通常以视觉方式检测（触摸和鼠标使用）。交互元素还必须由依赖于编程确定的可访问名称的用户（例如屏幕阅读器用户）检测到。
△ https://dribbble.com/shots/9838619-Music-Player-Neumorphism-Rebound-shot
从 dribbble 开始的新拟态的设计趋势，应该要在追随前认真地思考，是否适用？这是一个问题。
设计师可以自由地实践和探索他们倾向于哪种趋势或风格……我只是在这里展示和解释为什么「新拟态」和「可访问性」不能并存。我也不是来阻止你练习你的设计技巧（如果有的话，我鼓励每个人练习他们的技巧和探索他们的想法，但希望，考虑它可能对残疾用户的影响以及特殊场景下的实用性的思考）。
不过，我之前在另一篇文章中说过，我会再说一次：现在是 2020 年，作为一个设计师，我认为我们必须重新评估我们在设计实际产品时的设计方式。我们不能为所有人设计，但要排除残疾用户。在可访问性和使所有数字产品都可访问方面，我们还有很长的路要走，但是它必须要在某一个地方开始。例如，它可以从我们把新拟态抛在脑后开始，而从那时起专注于开发一种在美学上令人愉悦但又实用、现实的设计。谢谢。
文字来源：优设 作者：UX Talk
这篇文章来自于 Invision 出品的书籍，围绕规划、设计、构建和实现设计系统的实践经历来指导读者，其中包含了经验丰富专家的真知灼见和一手经验。我很喜欢，也分享给大家，推荐阅读。这是一个系列，一共有 7 章，感兴趣的话，持续关注吧。
20 世纪 60 年代，计算机硬件技术的升级开始超越软件发展的速度。计算机的处理速度变得越来越快，价格也越来越便宜，但计算机软件开发仍然处于缓慢、难以维护的境地，并且还很容易出错。两者之间的差距以及解决这个问题的困境被称之为「软件危机」。
在 1968 年的北约软件工程会议上，道格拉斯·麦克罗伊（Douglas McIlroy）提出了基于组件开发有可能是解决「软件危机」的方法之一。基于组件开发是一种通过复用代码来提高编程潜力的方法，该方法能帮助编程工作更、更易于扩展。这样做既能减少编程工作量又能提升软件开发的速度，让软件更好地运用现代计算机的力量。
在 50 年后的今天，我们又面临着类似的挑战，只不过这一次是在设计领域。在 UI 设计中，设计的角色是在为特定需求量身定做解决方案，所以很难去基于整个应用进行扩展。
你有没有走查过你输出的界面，发现自己使用了几十种类似的蓝色，或者同一个按钮不同的用法，将这些样式组合对应到你设计的每一个 UI 界面，就会意识到一套不成体系的设计是多么的难以维护。
△ 一份 UI 样式走查收集的成果，里面罗列的十几种类似的按钮样式说明之前团队挖的坑有多深。
在这种状态下，设计要跟上开发的速度，公司可以选择做以下三件事：
通过复用设计，设计系统能够帮助团队更好、更快地构建产品——复用性使规范成为可能。这是设计系统的核心和价值。一个设计系统是一个可复用组件的合集，由清晰的规范作为指导，组合在一起构建成各种的应用程序。
50 多年来，工程师们一直在遵循着这个理念执行工作。现在是时候让设计充分发挥其潜力加入他们了。
你可能已经清楚地意识到，设计系统已经成为当今软件行业的一个热门话题，并且理由也很充分。很多企业投资设计系统，因为他们认识到产品体验能够带来竞争优势，不仅能吸引和留住客户，更降低产品学习成本。
在重视设计系统的公司内部，通常能看见这种情况：
如果你是设计师，那么前面所说对设计的投资听起来可能会令你很兴奋，但其实也带来很多挑战。当一个应用由不同的团队负责迭代各自模块的时候，你将如何跨平台设计一致的 UI？又如何使所有团队能够进行快速迭代？当团队的设计师设计出新的独立样式时，你又将如何处理这种不可避免的设计需求？
要了解如何应对上述的挑战，我们要先了解什么是设计系统。设计系统将个体和整体两个概念各自的优点结合在一起。
1. 标准
拥有 MAC 用户界面的技术知识是产品设计的关键因素，但了解用户界面背后的理论，才能够帮助你创造出色的产品。——苹果人机交互指南
为了设计卓越的用户体验，不仅要了解设计系统背后的内容，还要了解其设计的原因。我们一般会通过建立和遵守标准来达成共识，这样做能消除主观性和歧义性，保证产品团队内部不会出现摩擦和混乱。
这套标准的内容涵盖了设计和开发。例如对命名约定、无障碍标准和文件结构等等，帮助团队达成共识，减少出错。
视觉语言是设计标准的核心部分。定义颜色、形状、类型、图标、布局和动效的样式和用法对于创建品牌一致的用户体验至关重要。系统中的每个组件都包含这些元素，它们在表达品牌特性中扮演着不可或缺的角色。
没有标准，决策时就会无据可依。这不仅不能扩展设计，还会造成复杂、差劲的用户体验。
超越平台
视觉语言可以不局限于单一平台，可以在 Web，iOS，Android 和其他平台上延续。将规范文档展示在设计系统网站的醒目位置，能够帮助系统开发者了解组件的样式和交互模式。例如，Google 的 Material Design 就深入到其产品视觉语言的各个层面。
2. 组件
组件是系统中复用代码的一部分，它们充当应用程序界面的基础。组件的复杂性各不相同。将组件简化为单个功能（如按钮或下拉菜单）可以增加其灵活性，使其更易于复用。复杂的组件，如特定类型数据的图表，可以很好地满足其应用场景，但是这种复杂性限制它的使用场景数量。组件的复用性越高，需要维护的次数就越少，规模也就越简单。
基于组件的开发通过复用代码来减少技术开销。建立标准规范了这些组件的用途、样式和用法。两者结合在一起，就相当于为你的产品团队配备了一个清晰的系统，让他们了解到为什么和怎么做。
让我们详细看看设计系统如何帮助你解决一直以来的痛苦。
1. 扩展式设计
随着团队的成长，设计师通常会将注意力集中在应用程序的独立功能区域，如搜索和发现、帐户管理等。这就会导致设计碎片化，就像是一座设计的巴别塔，每个设计师都将他们的设计语言往上添。当设计师单独而不是系统地去解决问题时，就会发生这种情况。
没有通用设计语言统一产品和设计，用户体验就会开始崩溃。当缺乏设计规范时，设计讨论就变得毫无用处。为了使团队内部保持一致，必须要有一个共享的来源——可供参考的官方样式库。
大多数情况下的样式库都是静态的内容，例如设计模版。但是静态的参考几乎立刻就会过时。这就是为什么有的团队会建造像 Shopify’s Polaris 站点这样的网站——一个设计系统站点，用该设计系统构建而成，记录系统的所有方面，包括组件、指南和交互最佳使用场景。因为它是与系统一起构建的，所以它能够保持其永远是的。
对于产品团队而言，内部设计系统站点是最佳、最易访问的共享来源。它提供了一个引力，使团队成员保持一致和同步。
2. 管理你的债务
随着应用程序和团队的时间积累，会慢慢形成债务。这种债务不是金融债务，而是技术和设计债务。这些债务是因为解决独立问题获得的。设计债务由大量不可复用和不一致的样式和惯例组成，而维护它们是不可能完成的任务。随着时间的推移，这些债务的累积会成为减缓增长的巨大负担。
创造行为本身并不会产生债务——就像花钱本身并不会产生金融债务一样。但使用设计系统将使你的设计和代码保持足够简洁，同时仍然允许你进行升级和迭代。
3. 一致的设计
一致且重复使用的标准化组件，使你应用程序的易用性大大提升。标准化的组件还能让设计师花更少的时间关注样式，花更多的时间专注于提升用户体验。
4. 更快的原型
在设计系统下工作，你可以像玩乐高一样快速拼凑流程和交互，构建无数的原型和方案进行快速验证，从而帮助团队快速获得数据和结论。
5. 提高可用性
页面样式的不一致会影响产品的可用性，当 CSS 因为数不清的不一致样式元素和交互增加时，页面加载时间也会加长，这会导致很糟糕的用户体验。它还可能产生冲突的 CSS 和 JavaScript，从而可能破坏你的应用程序。通过使用设计程序，通过构建一个整体的组件库（而不是每页）来避免这些冲突，从而花费更少的时间来保证产品质量。
6. 建立可访问性程序
可访问性在组件级别就可以实现，针对残疾人士、网速较慢和老旧的计算机上进行优化。这是一个建立易用性程序很好的方法， 在第 3 章「构建设计系统」中，Katie Sylor-Miller 解释了设计系统如何帮助你改善产品的可用性，并保证遵守你所在国家/地区的法律。
（译者注：美国残疾人法案于 1990 年 7 月通过并签署，其中有规定网站的可用性必须遵守《美国残疾人法》（ADA）的相关内容。）
即使有上述说的这些好处，在团队内部推行一个设计系统的时候，仍然很难说服团队成员。设计师可能会感到局限或束缚，但通常这些被感知到的弱点正是设计系统的最大优势。
让我们来揭穿那些你在推行设计系统时经常会遇到的误区吧。
误区1：过于局限
误区：负责深入独立业务的设计师看到的设计标准可能会与其他需求的不一样，因此，他们会认为通用的设计系统过于局限，可能无法满足某些特定业务的需求。
现实：设计师通常会设计出自定义的解决方案以满足应用中的独立的业务，从而增加了设计和技术的负担。而使用设计系统，这些被设计的新解决方案可以被反馈到设计系统里面，使每个人都可以使用这些改进方案。
误区2：缺乏创造力
误区：如果设计师被限制在一个设计系统下做设计，那么他将不能去自由地探索设计风格。前端的工作通常包含着各种样式风格的更新。对应用程序的风格进行改版通常不是一个小任务。这也可能是一个很大的风险，因为从事这项工作会移除一部分的旧资源，可能会对可用性产生负面影响。
现实：设计系统的组成部分是相互关联的，这意味着当一个位置进行更改时，这项更改会在整个系统中同步，这使得系统内的样式更新工作变得轻而易举，但影响却大得多。以前是几周甚至几月的工作量，现在可以在一个下午就能完成。
误区3：一劳永逸
误区：设计和构建完设计系统后，工作就完成了。
现实：设计系统是有生命的，这意味着需要不断对其进行维护和改进。但是由于应用是由设计系统的复用性组件提供支持的，因此该应用会自动同步设计系统的改进内容，从而减少维护应用程序的工作量。这就是设计系统提供的扩展能力。
设计系统不是一时流行的方法，也不是未经检验的假设。为了让设计找到与技术的快速发展相匹配的同等方案，基于组件的设计和开发是一种行之有效的可靠解决方案。
现在你已经了解了创建设计系统的真正价值，让我们在下一章中深入探讨实际的设计过程吧。
文章来源：优设 作者：彩云译设计
在B端的UI设计过程中经常要接触到大量的表单设计，且要展示海量数据，因此如何展示更清晰且让用户使用起来更便捷是设计师主要需要考虑的。结合自己在实际工作中遇到的列表类型总结了 web 表格设计的常用基础列表模式，并进行汇总以便后续使用。
一、基础型列表
web列表中的基础表格样式，通常用于横向表格的纵列数据较少时，使页面不需要滑动条也可以展示完全。操作项一般置于页面最右侧，便于用户浏览完全后进行操作。
二、 带有进度条的列表
用于查看数据完成进度，通常与网格型列表搭配使用，方便数据的直观对比，进度条用不同颜色进行区分，降低用户认知负荷。
三、可进行选择、排序、筛选、表头分组且带有冻结列的复合型表格
由于业务场景的复杂性，在B端系统中通常一个表格会涉及到大量复杂的操作，这就需要将多种样式叠加应用提高使用效率，防止用户产生疑惑。此图中用户既会进行单选或者批量选择，也有可能会对数据进行排序、筛选查看，对于专业术语或用户不常见的名词应给予一定的帮助说明。另外由于指标列选项过多，屏幕无法展示完全，还需要将重要列冻结，其他列增加滑动条来展示。
四、用于小计及总计的表格
小计行可能会出现一页多行的情况，用特殊颜色隔开，方便用户快速识别不同部分；总计行一般出现于页面最末端，通常只有一行，文字加粗显示。
五、行冻结、带有角标的可编辑表格
点击带有角标的表格可直接进行编辑更改数值；
整行冻结：当用户向上滚动查看或者翻页时，冻结的行依然悬浮显示于页面顶部。
六、主从型列表-可展开表格
表格默认收起状态，因为 B 端产品的业务数据量通常较大，默认展开多个主从关系表格对服务器的性能损耗较大。因此设定只有当用户点击下转箭头，此表格单独展开。
七、双排文字表格
适用于一屏以内文字内容较多且不需要完全展示时的解决方案。
我们都遇到过这样头痛的问题，当列表字段太多，一屏无法完全展示，这时应该怎么做？当用户需要鼠标频繁去滑动横向滚动条查看一屏以外的信息时，易导致操作成本和对屏幕展示信息的记忆成本提高，而产品的易用性降低。因此提供了除增加滚动条外的另一条解决方案，使用双排文字表格，可节省列表空间，部分内容省略表示，鼠标hover时展示全部内容。
总结：
1.关于对齐方式：随着工作范围的深入展开，发现之前做表格时对对齐方式并未做过多深入研究，导致不同项目的对齐方式并不一致，因此总结出一套方法：文本信息左对齐，因为现代人的阅读方式习惯从左到右，符合正常的心智；数据信息右对齐，更加方便数字大小的直观对比；内容一样居中对齐，视觉上更均衡；表头与信息内容对齐方式一致，给用户视觉上的统一感，降低视觉噪音。
2.当设计师把设计稿交给开发时，虽然已经标好注、切好图同时也包括交互注释，但是不代表开发能把界面表达的跟设计稿完全一样，甚至会有很大偏差。我们在设计的时候会考虑到字体大小、是否加粗、对齐方式等设计层级，但前端在开发时可能并不会注意到这些细节，因此需要保持与前端的良好沟通，包括出具走查文档及当面沟通，更能提高工作的质量和效率。
3.由于B端系统的复杂性，常需要不同的表单样式结合使用，因此还需设计时根据业务场景灵活运用。
文章来源：站酷 作者：小魔女4376
导航菜单对于用户的使用来说尤为重要，本文是我从实际工作出发，结合自身产品和过去经验对于导航进行的一次全面总结。
在任意一个 B 端后台系统中，导航菜单都是不可或缺的一部分，每个导航菜单都有其固定位置，通常这个位置是不可撼动的。所以说：导航菜单是 B 端产品层级重要的交互控件。
对于 B 端产品的用户而言，他们使用导航菜单的目的性很强。
到后台主要是对具体功能进行操作，导航菜单在功能的引导中发挥了巨大作用。因此，其主要的功能就是对 B 端产品进行分发、引导；帮助用户在复杂的后台页面中，寻找出自己真正想要的功能。
导航菜单建议最多不要超过 9 个，最少不要低于 5 个。
原则解释：1956 年乔治米勒对短时记忆能力进行的定量研究，他发现人类头脑最好的状态能记忆含有 7（±2）项信息块，在记忆了 5-9 项信息后人类的头脑就开始出错。
在生活中我们经常会把一长串的数字分成 7 个左右的数组来记忆，这样会使难度降低很多，米勒称这种单位为「组块」。
是不是通过分组记忆以后，自己能记住的更多？这就是 7±2 原则的分组。
通过上面 7±2 原则描述我们明确到：在导航菜单当中，超过 9 个会给用户查找时带来困难，低于 5 个说明导航菜单的分发效率不够。
有人会说，在实际业务中，不会有那么理想，如果需要超过 9 个时，应该怎么办？
超过 9 个时，一定要对菜单进行分组，因为导航过多，用户寻找会十分迷茫，通过分组的方式，能够对菜单进行再次分类，提高查找效率。
举个例子：
比如在微盟、有赞、小鹅通的导航设计当中，微盟、小鹅通有很大不足，我们来一一拆解。
导航菜单隐藏超过两级时，代表着产品在用户的使用规划中，没有深入思考整个用户体验
导航菜单层级越多，用户体验就会越差，你会发现一些拥有三级导航的菜单，都会通过设计优化来实现隐藏导航的合并，从而减少用户操作负担。
比如有赞就是一个典型例子，在有赞零售的导航菜单中其实是有三个层级，但是通过交互层面的优化，将二、三级菜单直接展示出来，形成一个整体，提升了用户体验避免用户层层寻找。
同时在交互上，采用悬停+点击结合的形式，用户既可以通过悬停鼠标进行快捷操作。同时又可以通过点击，确定跳转查看该一级导航下的菜单，能够提高用户的操作效率。
作为导航来说，其操作本身并不多，但是设计上，点击与悬停（hover）之间，还是存在很大差距。
这里想要说明这两个操作本身而言，并没有对与错，但是适用场景的不同，导致在设计属性上存在着较大差异。
鼠标悬停操作
鼠标在悬停时触发的操作时间太短暂，会给用户带来很强烈的挫败感，同时在悬停选择下一级菜单时，鼠标移动悬停也同样会造成这样的结果。因此在设计时，对鼠标悬停时的操作要格外留意。通常在悬停操作当中，只适用于只有一个菜单层级的菜单选项，这样用户在操作时更加方便。
鼠标点击操作
鼠标点击操作多发生于多级导航进行操作，同时鼠标点击的形式，会给用户正向的反馈，用户点击后明确知道菜单栏不会隐藏，因此在两个操作之间进行选择操作时一定要多加思考。
导航菜单广度和深度的区别：
深广度平衡帮助用户进行快速选择，能够对整个产品架构有着第一眼的认识。
当菜单广度过大，我们也能够通过设计的方法来优化导航菜单。
我举一个比较具有代表性的例子：腾讯云。
腾讯云目前拥有大概 100+ 个云产品，他们都分布在导航菜单上，因此在导航设计上，它采取一种新的模式：全部菜单导航、搜索菜单、自定义导航。
在全部菜单中，展示了腾讯云 100+ 个云产品项目，通过搜索进行筛选得到用户想要的菜单。同时在导航栏上，支持用户去自定义 5 个菜单选项，也因此用户将常用的菜单添加至此，更方便用户去寻找。这样在满足业务的前提下，通过一些个性的设计，使 100+个菜单也能够塞得进整个导航中。
当面临菜单深度过深时，通常需要从以下几个方面去考虑。
与产品经理沟通是否到位
这里主要是想通过与产品经理的沟通，了解到菜单的架构设计的原因，以及能否为你的设计进行一次重新的梳理，寻找一些值得优化的点。
建议在寻找产品经理之间，自己能够通过一些思维导图的软件将自己产品的菜单目录全部罗列出来，能够先多思考，为下面的沟通节约时间、提率。
用户体验地图的绘制
在一个 B 端产品中，用户的目的虽然复杂，但是研究用户每一步操作，还是会查找出一些规律，我们可以从这些规律中做些文章。
比如我们之前在一个医疗系统中，根据角色的不同，将医疗角色分为：前台、咨询师、医生、老板这四种角色，每个角色所关心的点都会有所不同。
老板最关心每个门店目前的情况数据，比如门店营业额、门店待客数、每个医生的治疗量以及治疗最少的医生。这些都代表着他不同场景下使用的习惯。
将这些情况分析以后，提炼出核心的需求点。
然后绘制完成他们的用户地图后，根据角色，明确每一个角色的日常操作有哪些，从而确定我们所有菜单所展示的位置以及整个菜单的层级关系。
我将常见的导航区分进行总结，分为以下三种形式。
1. 颜色区分
颜色区分作为最直接最有效的一种形式，这种形式也是后台页面最初的状态，我通常会用颜色区分和移动端顶部状态栏的演变史做对比，就其功能而言他们都有很多相似的点。
微信在 2018 年 12 月份时，发布微信 7.0，将顶部导航由黑色转变为白色，引得大家争论不休，而经过时间不断洗礼，大家也逐渐接受了这个事情，渐渐忘去。
延伸阅读：
2019 年也有类似的事情发生，有几个产品的 WEB 端进行了一系列的大改，YouTube、Twitch、Twitter 都进行了重新设计，他们也不约而同的将块面去除，去掉多余的灰色，通过留白和空间将页面拉开。
这是否是下一个 WEB 端所要追寻的趋势，我还不得而知。
如果 WEB 端都有此改变，那么 B 端产品还会远吗？
说回 B 端设计，颜色上的区分和移动端类似，更多体现在导航层和内容层之间的区别，因为从本质上讲，这两个本身就属于不同的业务模块，通过颜色的区分，是最为直接，最简单的一种方式。
这种形式常见于很多复杂系统，例如：飞书。
左侧导航为深色，能够让用户获得更沉浸的体验，因为屏幕边缘都为深色，用户在使用时能够真正做到有区分。
2. 投影区分
在现如今的移动端产品，投影大行其道，弥散投影，高级投影随处可见，也逐渐影响更多 WEB 端的产品使用投影，增加自身产品 Z 轴空间。
Z 轴空间给导航带来了纵深感，同时也能够在功能层级上，通过分层设计，使页面层级关系明确，引导用户使用导航。
Material Design 设计的出现，正是 Z 轴空间的鼻祖，在我们的屏幕中开辟了第三个设计维度，在 Z 轴上展示增加了更多的交互形式。在几何体系中，Z 轴是 X 轴和 Y 轴之外垂直于屏幕的轴，我们通过引入 Z 轴在交互设计中呈现三维的物理空间感，使页面内容能够得到有效区分。
比如 Teambiton 在页面中运用投影，强化了页面层级的关系：
3. 分割线区分
分割线针对导航功能性不高，同时要满足很高设计感的产品。
分割线太深，页面十分割裂，分割线太浅，页面划分又不明确，因此需要设计师对分割线的把控十分合理。
分割线在 Dribbble 上见到过很多，通过简单的线条加上空间的分割，将导航区与内容区分开，形成很好的视觉感受。如果你是刚开始尝试做导航，不太建议尝试这种形式，因为对于页面空间的把控要十分苛刻。
B 端产品易操作性中，导航可配置操作算得上是一个重要的点。其中最主要是通过配置操作实现导航易用性的提升，而如何让菜单可配置，通常的做法有两种。
1. 我的菜单
如果你的产品是针对多数角色不同的用户进行设计，那么在导航设计时，可以考虑增加一个菜单选项：我的菜单，对于菜单进行标签处理。
设置一个我的菜单，将用户常用的菜单进行添加，能够满足每一位用户的菜单快速选择的需求，通过这样的自定义，用户在常用的菜单下，能够通过我的菜单进行快速跳转。
举个例子：在印象笔记当中，其快捷方式就是可以将用户想要的模块放置在此，可以快速跳转。
2. 角色配置
如果你的产品是为特定几类角色进行服务，那么在导航设计时，可以考虑根据用户角色的不同，给用户不同的导航展示。
通过角色的筛选，对复杂导航进行简化，同时管理员可以根据自身公司的业务不同，给用户配置出不同的角色权限予以满足用户的导航需求，这样在设计层面上能够减少很多不必要的麻烦。
侧边导航是国内的 B 端产品当中最为常见的。
将菜单栏放置在左侧，页面布局上基本为左右结构，将导航菜单放置左侧固定。
因为侧边导航在国内产品中最为常见，因此把它优先提出来讲，国内厂商对于侧边栏导航尤为偏爱，在很多人心目中，感觉就只有侧边导航和其他导航两种导航形式，也就造成了在 B 端产品的发展也逐渐趋同。不过现阶段大家对于 B 端产品的重视，在设计上也开始多元化。话不多说，我们先来看看侧边导航的优点有哪些。
优点
缺点
线上产品：我们拿有赞零售进行举例，他就是一个典型例子。
菜单栏+功能菜单共有 15 个，然后通过导航的间隔将菜单进行分组，最多一个导航菜单共 9 个，满足 7±2 原则。
同时可以看到，有赞在使用三级导航时，通过右侧面积统一展示二、三级导航，方便了用户导航展示的同时，优化了用户的使用体验。
为什么国内B端产品大多数是侧边导航？
我在我的设计剪贴板中有回答过这一个问题，直接分享给大家。
顶部导航在国外的产品当中，算是较为常见的。
将菜单栏放置在顶部，页面布局上基本为上下结构，将导航菜单放置上方固定。
顶部导航早期出现于各类门户网站，比如企业官网，各种咨询类的网站经常会采取这样的导航形式。说回 B 端产品中，顶部导航通常在 B 端产品中也是十分常见的，其中以国外产品最为集中，比如国外 CRM 三剑客：salesforces、hubspot、zoho 都是采取的顶部导航的形式。
优点
缺点
线上产品：
△ salesforce
销售 CRM 传奇人物，千亿美元估值，每年营收百亿美元，无疑是 B 端产品当中的一个标杆。
如果你是做 CRM，或者是 B 端产品，必看的一个竞品。
salesforce 采取的就是一个顶部导航，只是不同的是，salesforce 的顶部导航更多是将页头的功能进行合并叠加，虽然 salesforce 的交互方式不算优秀，但是因为其业务线不断庞大，这样才能支撑其整条业务线。就因为这样的问题，需要设计师在设计时，要考虑到整个系统的一个扩展性问题。做 B 端产品的交互设计有点类似后端同学写代码，我们现在设计的这个交互最少要满足未来一到两年公司的已规划好的产品的扩展问题。
△ hubspot
Hubspot 采取就是顶部菜单，二级菜单下拉展示，同时 Hubspot 是按照角色去划分顶部菜单，能够给用户减轻认知负担，更好的被用户所使用。同时在一些设计小细节上，比如顶部的主题色，既可以提升品牌感，同时在适当时可以作为进度进行一个展示，使用户能够更加深入地感知到其设计。
在 B 端产品中，感觉混合导航也是一个后起之秀。
它的页面布局为顶部和侧边，简单来讲，就是将顶部导航与侧边导航进行结合。通常将一级导航菜单放置顶部，通过一级菜单的点击后，展示侧边的二、三级菜单。在一些拥有复杂的逻辑关系，菜单之间关系分明的产品中，混合导航也越来越被大众所接受。在很多复杂的系统当中，混合导航真的是很不错的一个选择，我们来看看他的优缺点
优点
缺点
线上产品
云产品其实就是一个很好的例子，比如阿里云，他们因为自身产品线众多，对于导航的设计也是以复杂著称，多数情况下，面对这种复杂的导航时都会采取混合导航。他们能够通过混合导航，使用户对于导航每一个功能模块都有一个深刻的认识。
金蝶-星空定位就以 Paas 进行定制销售，分析过他的产品你就会了解到，他一共有 100+ 个菜单，同时算是金蝶的王牌产品，因此对于此类产品，应该着重去了解，也因此，对于每一个模块，都是通过大标题+小标题的形式进行设计，使用户在使用时能够明确知道自己想要什么。
现在各大复杂的产品都会采取混合导航，这样对于产品的架构以及各类菜单层级的分析也会起到很大的帮助。
平台类导航是我们团队内部自己的取名，给他的定义通常是拥有很多模块，比如 Teambition、明道云，拥有很多个模块，通过一个统一的平台进行内容的分发，比如移动端的钉钉、企业微信、纷享销客都采用同样的方式，但在 WEB 端当中，平台导航通常伴随着其他导航同时出现。
比如最近很火的明道云，就是使用了平台导航，他们将自己的产品分别陈列在页面的核心区域，通过对于工作台的设计，形成对页面的展示，同时形成一个平台类的导航，于此相对应的还有钉钉后台管理页面，以及企业微信后台管理页面，他们都是通过一个个平台类的模块对导航进行分发的。
文章来源：优设
蓝蓝设计的小编 http://www.lanlanwork.com
