今年年初，我到客户现场进行需求沟通，在沟通结束后，客户问了我一个问题，我竟然不知如何回答，只在当时说了：“好的好的，我们会进行优化的。”
当时客户是这么说的：“为什么界面的图标这么普通，毫无新意，能不能设计的好看点。虽然我们是 B 端产品，但这样子的图标真的不好看。”
虽然我心里知道 B 端产品首先是以可用、易用为主的，那么图标也不例外，在评价图标设计的时候，我们首先看图标是否体现了可用与易用，是否让用户通过看图标就可以联想到这个功能是什么（合理、无歧义表达）；同时图标是否符合设计规则，让界面看起来统一与专业。若图标符合以上要素，就可以再来看图标好不好看的问题了。
不过这并不是一位客户的问题，后面我们还遇到了很多客户有类似的问题，一上来就想要视觉层面好看的图标、有创意的图标、颜色丰富的图标。
那 B 端图标设计真的只需要考虑好不好看吗？作为设计者的我们，还能做什么呢？其实，B 端图标设计是带着脚镣在跳舞，小小的图标藏着大大的智慧，下面我们一起来看看吧~
图标也叫 icon，它是对现实世界的概括、抽象、隐喻，在产品软件中，它会向我们传达功能与操作。
有些图标已经成为人人熟悉并一致认同的传播语言，例如删除、设置、男士、女士、刷新、电话、邮件，看到这些图标，人们的反应基本是一致的，无需再多说什么。
图标在 B 端界面的用途我们就不展开长篇大论说了，简单来说图标除了做点缀，还可以直接表达功能与用途。因此，我们可以将 B 端图标分为两大类：示意类图标和半装饰类图标。
1. 示意类图标
示意类图标（也有称之为功能类图标）是指可以向用户示意功能用途的抽象化图形，可以和文字配合使用，也可以单独使用。
该类图标在中后台系统的界面中会比较常用，例如基础组件、导航菜单、状态、功能性模块。示意类图标不仅以可用的方式丰富了界面效果，在一定程度上也缓解了用户的视觉疲劳（试想，全是文字的界面会怎么样）。
2. 半装饰类图标
为什么我们要取名「半装饰类图标」呢？原因在于，在 B 端界面上，不会无缘无故出现纯装饰、毫无寓意的图标，任何图标的出现即便原本是为了装饰，设计者在设计时也需要思考其含义属性。
该类图标会在中后台导航、中后台工作台、Dashboard、B 端网站等地方出现，它们可以让 B 端界面活跃起来。
我们可以发现，某些场景下使用示意类图标会更好（比如基础组件），某些场景下使用半装饰类图标会更好（比如 B 端网站），某些场景下使用任意一类图标都可以（比如中后台导航菜单）。
回到一开始客户的问题：把图标设计的好看点，他说了好几个地方，记得好像有树控件 、导航菜单、按钮等。设计者们需看看目前客户讲的场景是哪个，有些场景不适合亮丽的图标，这会喧宾夺主，例如基础组件中。
我们深刻了解 B 端图标类型的使用场景，在设计决策时会更加得心应手。
虽然示意类图标和半装饰类图标视觉形式不同，但在绘制上的规则是互通的。我们团队输出了一套企业级 B 端图标设计规范，不仅可以帮助新人设计师快速上手，并且可以使团队内设计师高效协作，保证设计结果的一致性。接下来和大家分享下思路，这是一套可复用的方法。
1. 约定图标绘制区域
我们需要给一整套图标约定合适的绘制区域，保证不论哪位设计师输出的图标，均符合设计标准。并且原始图标大小一致，可以保证前端使用也非常友好。
假如都是 48px*48px 区域绘制的图标，它们均缩放到 16px*16px 即可；如果一个是在 48px*48px 画板上绘制的，一个是在 88px*88px 画板上绘制的，它们都缩小到 16px*16px，会导致图标看起来视觉不一致。若期望它们看起来一致，就需要专门为不同画板的图标设计绘制规则。
这里在和大家分享一个小心得：我们团队在约定图标绘制区域时，发现了一个问题。Antd 的图标是绘制在 1024px*1024px 画板上的，但又有一些团队是绘制在 16px*16px，到底应该选取哪种画板呢？经过实际操作后我们发现，画板越大，设计细节可以越丰富。但缩小到小尺寸时，会有小数点的虚边（不过不妨碍前端应用，用户也看不到虚边）。而小尺寸画板绘制图标，画板全在视线范围内，设计师绘制图标时更有安全感。所以，不论用什么尺寸的画板，只要团队成员一致认同即可，不用过于纠结。
2. 设置出血位
除了要让图标绘制到统一的画板中，我们还约定了出血位，要求所有图标均保留出血位（出血位默认使用固定值），出血位起到的作用是：防止设计师图标绘制不小心贴边后，图标在实际应用场景中会出现缺失现象。当然，出血位的默认数值并不是一成不变的，允许设计师在绘制一些特殊形状的图标时，有调整空间，保证视觉平衡。
3. 约定元素调整规则
针对示意类图标：
线条：我们会要求设计师在绘制图标的线条/圆点时默认使用某个数值，然后设定线条粗细/圆点大小的递增或递减规律，例如以 2 的倍数为主基调绘制，默认为 6px 粗细/6px 大小。但允许设计师在绘制图标时，不合适用默认数值的，就按照增减规律去指导设计，如下所示。
圆角：图标采用何种内外圆角设计会影响图标给人的感觉，数值大的圆角会让用户感觉亲切；数值小的圆角会让用户感觉硬朗、专业。采用哪种圆角方式，设计师可以参考产品调性去规定。
针对半装饰类图标：
半装饰类图标在设计上也不是随意为之，除了要可以表达文案内涵外，假如是一整套的图标系列也需要约定元素调整的规则。
例如约定在「几何图形+业务图形」的设计基础上进行发挥，保证图标放到一起具有很强的一致性。并且半装饰类图标还要设定色彩范围（主色、辅色），如此可以让界面色彩不杂乱，严谨有序。可以看到腾讯云官网的图标采用了类似的设计方法。
4. 分层打造秩序
对于图标画板来说，它不是一个平面，它就像楼房一样，是分层的。从底层到最上层的内容依次为：主画板区域、核心内容绘制区域、基础图形参考区域、实际图标。
5. 从基础型拓展
我们在设计图标时，都应该先从基础型开始思考——圆形、矩形、三角形、正方形等，保证设计构图上的节奏感和规整性。当基础型无法满足需要的时，以它们为准向外散发，在遵循设计规范的基础上，做视觉上的平衡和微调。
如果是落到实际软件中应用的，建议所有图标最后都要合并路径，保证图形规整和干净，同时便于正确输出和使用。
在「2.1、约定图标绘制区域」中，我们说到了要为一套图标约定统一的画板区域，但这个事情给设计师造成了困扰，还不止一位设计师问我：“那是不是我不能再用其他尺寸的画板来设计图标了。”答案当然是否定的。约定画板尺寸不是约束，恰恰是在规则中给予了设计师有序拓展的能力。
假如不约定画板尺寸，那么设计师直接放飞，每个图标都有自己的尺寸，并且有些还会出现长方形的形态。毕竟每个人的工作习惯不同、面对的产品不同，直接打开软件画图标是最快的方式。
而首先约定画板尺寸，设计师就会有条理地进行绘制，在遇到特殊情况时进行有序拓展，我们可以称之为场景拓展法。例如设计师可以为 B 端基础组件、工作台常用导航模块、结果页的图标各自设计一套绘制尺寸。
那设计师要怎么判断什么时候采用场景拓展法去设计呢？我们可以优先使用默认画板尺寸设计图标，在遇到特殊场景不允许情况下，采用场景拓展法去执行，针对界面风格有场景区别的，可以规定几类画板尺寸，为不同场景使用。
线型图标与面型图标也是设计师经常在讨论的话题，他们常常讨论「什么情况下使用线型图标，什么情况下使用面型图标」。做过比较多 B 端产品的小伙伴可以发现，没有说哪种场景必须使用线型图标，哪种场景必须使用面型图标，主要还是看当前产品调性合适哪种，并且使用某类型图标后，对界面产生的效果是什么。
例如当界面图标较多时，采用面型图标，会显得页面很重，会把用户视觉引导到图标而不是重点数据上。
线型图标与面型图标在界面中使用，是一项系统工程，是由多方因素决定的。但我们设计师需要保证 B 端界面图标使用的统一性，即便按照场景区分，也需要认真思考，是不是有必要。就如界面字号使用定律一样，建议不要超过 3 种，多了会让界面杂乱，降低界面设计品质。图标也是如此，不论面型还是线型，要站在产品角度去整体把握，而非线型和面型的简单选择。很多 B 端产品是两种类型混用的，但它们很好的划分了使用场景。
这里我总结了一些线型图标与面型图标常用的场景（以 B 端中后台为例，但这并不是唯一选择）：
1. 在导航上（菜单极其多），常见默认用线型，选中用面型。
2. 在导航上（菜单很少，单层），粗一些的线型图标或者面型图标都会用，且会比较个性化，以提升产品整体调性。
3. 在基础组件中，通常使用线型图标，且颜色浅，用户可以把注意力聚焦在信息本身。
4. 在表格数据的状态中，面型和线型是均分使用的状态出现。
5. 在文字按钮中如果要添加图标，让界面展现更丰富，线型按钮居多。假如一旦按钮很多，面型图标会让界面显得太重。
6. 若标题区要出现按钮，面型按钮会使得区块显得更整体。
这里还想和大家说说「视觉尺寸与规范尺寸」的事情。之前遇到设计师这么问：“既然已经约定了图标的设计规范，那是不是就严格按照规范区间来（严格按照基础图形参考区域来），但是有些图标不适合直接套用规范啊。”
是的，其实很多不规则图标是不适合直接套用规范的，就像一份周报格式不是所有岗位都适用一样。如果设计师发现有些图标直接套用规范不可行，是可以根据「视觉大小一致性」进行微调的。这不仅保证了前端开发的便捷，也保证了界面视觉的整洁。
既然是一套 B 端产品层/企业级图标库，那么必须要有规范的命名方式，这样会方便设计师之间的协同，也会更方便开发与设计之间的协作，同时查找效率会提升。
那么命名有什么规律呢？其实只要根据项目的情况，团队内有统一的认知即可。关于命名的中英文，也是视团队而定，各有优缺点。比如是英文，那会方便开发直接用名字，不用重新取名（当然设计师取的英文名开发不喜欢，也会改）；用中文的话，方便检索。
可以是：
尺寸/类型/图标名称/状态
16px/导航/上传/默认
形态/格式/图标名称
面型/方型/新增
模块/图标名称/状态
导航/分享/正常
好用的三方图标库还是很多的，虽然图标库质量参差不齐，但还是在一定程度上解放了设计师天天画图标的痛苦。这里介绍几个图标质量不错的网站：
1. Noun Project
网站链接：https://thenounproject.com
2. Iconfont
3. ICONS8
网站链接：https://icons8.com
4. Font Awesome
网站链接：https://fontawesome.dashgame.com/
5. IconPark
网站链接：https://iconpark.oceanengine.com/home
当客户提出图标好不好看时，是一个正常人的反应，试着想想我们自己，不也总是会很表面得看待一件事情么。因此，客户不会知道原来一个小小的图标也是藏着大大智慧的。不过没关系，当我们了解了小图标内部的大智慧后，我们可以更轻松的驾驭图标了，也可以知道在何种场景下，使用何种图标可以提升界面展示效果，得到客户的好评。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
图标定制设计之一：6大章节！图标设计基础知识全方位入门指南
图标定制设计之二：超全总结！金刚区图标设计的 10 大风格
图标定制设计之三：想让图标更精致？先掌握这11个容易忽略的设计细节！
图标定制设计之四：学会SVG图标的高级用法，界面适配效率翻一倍！
图标定制设计之五：研究微软 Fluent 图标规范后，我总结了这9个知识点！
图标定制设计之六：为什么别人的图标设计又快又好？来看腾讯高手总结的知识点！
图标定制设计之七：客户说B端图标太普通没新意，该怎么解决？
图标定制设计之八：从6个方面帮你快速掌握图标设计规范
图标定制设计之九：不止画图标！5 个金刚区的交互设计思考
最近我在学习使用 Figma，会在社区查找一些大厂的设计系统文件学习，看到一篇微软 Fluent 系统图标规范文档，还挺详细的。其中，我发现有些小点自己平时很少注意到，并且感觉对设计师定义图标规范也有一定的帮助，所以结合个人图标经验挑选部分内容来翻译成一篇文章，便于扩展自己的图标思维。（备注：以下的规范是针对尺寸 24px、线条粗细 1.5px 的图标）
在前一个版本，Fluent 系统图标采用了 MDL2 和 Monoline 图标集合，比较大的特征是直角、方方正正的形状。不过随着 Win 11 系统的发布，我们可以看到 Fluent 系统图标也进行了比较大版本的优化，感知最大的地方就是图标变圆润了。
设计理念有三个准则：熟悉的、友好的、现代的。图标形状遵循了用户熟悉的基本原则，示意上识别清晰，尽量远离隐喻含义。同时，细节处理更友好，采用了圆角和简洁的形状，并有两个主题：线性和填充。
规范化的网格，能促进图标的整体性和统一性，设计师绘制图形元素时也更有条理性。从 24px 图标尺寸开始，比较建议使用网格系统，内容安全区域是 20px，周围有 2px 的内边距。（留内边距主要是考虑个别图标居中分布和体量问题，有些图标元素会超出安全区域，比如修饰符类型图形）
基础形状是网格的基础，正方形、圆形、纵向矩形、水平矩形采用定义好的模板尺寸，在相关图标体量上保持一致的视觉比例。
圆形、矩形、正方形图标体量效果如下。（矩形体量看起来有点偏小，这种问题受限于图标尺寸空间小）
图标线条应当采用一致的粗细，线条末端采用全圆角。
像素对齐很重要，特别是低分屏设备，图标可以看起来很清晰。由于线条粗细是 1.5px，需要保证 1px 是对齐像素的，避免内外都出现虚边。
但在某些特殊场景，为了使图标体量居中分布，就会出现像素不对齐的情况，比如一条竖线。
Fluent 图标改动点较大的可以说是圆角了，传递了更柔和、更友好的体验感受。因此，我们认真打磨圆角的细节，定义了三种圆角数值。大圆角使用在线条直角或钝角处；当使用大圆角感觉形状太圆难以辨别时，我们可以使用中圆角；小圆角用于很小的细节或锐角处。（确实挺细的，也影响了整体的风格。如果追求统一大圆角的话，可能太偏圆润风格，更适合娱乐类产品用户吧）
断口多存在复合图标上，断口间距是 1px。当图形角度堆叠时，圆角中心点需要一致，即外层图形圆角会稍大一点，使线条平滑过渡。（看起来确实挺和谐的）
修改符应当谨慎使用，因为它对于一部分用户来说很难阅读。由于尺寸较小，修饰符元素要尽可能地简洁，常放于图标的右下角。设计师在绘制过程中，修饰符图形可以超出安全区域，使图标视觉感官居中分布。
如果已经建立的图标需要关闭状态，应当遵循模板：斜杠从左上角到右下角 45 度，撑满图标的安全区域。
图标平衡很重要，我们也有测试的两种方法。第一种方法是画一个圆圈，帮助我们更好地感知平衡性。第二种方法是视觉重量测试 ，通过模糊来感知图标的区域面积，从而达到平衡的目的。
随着更多图标的创建，我们必须非常有意识地命名，并尽可能地具有前瞻性，后续才能更好地协作。我们推荐图标命名使用形状的明喻，比如盾牌代替安全，星号代表收藏。
以上就是 Microsoft Fluent 图标规范的一些小翻译总结吧，线条粗细、圆角、居中、体量、平衡、命名等方面还挺多细节可以打磨细化的，希望各位设计师能够结合业务来仔细琢磨，提炼出属于自己产品的图标规范。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
图标定制设计之一：6大章节！图标设计基础知识全方位入门指南
图标定制设计之二：超全总结！金刚区图标设计的 10 大风格
图标定制设计之三：想让图标更精致？先掌握这11个容易忽略的设计细节！
图标定制设计之四：学会SVG图标的高级用法，界面适配效率翻一倍！
图标定制设计之五：研究微软 Fluent 图标规范后，我总结了这9个知识点！
图标定制设计之六：为什么别人的图标设计又快又好？来看腾讯高手总结的知识点！
图标定制设计之七：客户说B端图标太普通没新意，该怎么解决？
图标定制设计之八：从6个方面帮你快速掌握图标设计规范
图标定制设计之九：不止画图标！5 个金刚区的交互设计思考
SVG 格式图标在软件界面中有广泛应用，它与生俱来的矢量属性，使其在高分辨率屏幕上的表现非常完美。SVG 是一个基于 XML 标记语言的开放网络标准格式，拥有跨设备多平台的兼容效果。前面我们有分享过一篇关于 WPS 图标的文章《探索 WPS 3000 个图标设计背后的故事》，得到了很多网友的积极反馈。相信界面设计的小伙伴们都很熟悉 SVG 格式了，这次，我有一个棒的想法想分享给大家：利用 SVG 图标套色，来完成不同界面的适配。
图标套色的简单来说就是利用 SVG 格式的文本属性，使用 XML 格式标准，在 SVG 文档中增加 CSS 样式，通过修改 CSS 样式属性，精准控制 SVG 格式图标颜色，通过修改透明度控制图形显示与否，从而变换图标的风格外观。
基本原理：修改 SVG 的样式，生成不同风格的图标
用处一：颜色适配
这里有几个插件，都用到了“保存”、“打印”这些功能。因为主题色不同，即使是同样外形的图标，还是需要根据主题色的不同输出适配各个插件的图标。采用图标套色的方法，就可以避免这类图标资源的重复输出。
相同功能需要两套不同主题色的图标
用处二：皮肤适配
现在多数软件一般都有皮肤功能，不同用户需求，衍生出风格各异的皮肤，各种颜色，深浅不一，一套图标满足不了所有，为了视觉效果需要对每个皮肤输出特定颜色、风格的图标。图标数量如果很多，投入的成本将随皮肤数量呈几何倍增加，图标套色就可以很好的解决这类问题，只需要通过修改图标颜色和风格即可适配。
通过修改映射配置，可以得到不同颜色的图标
我们先看看图标套色之后的效果：
修改映射配置，可以得到线、面不同风格的图标
简单来说，实现这种效果有下方五个步骤:
套色方法五个步骤
以下方几个图标来做示例：
SVG 示例图标
第一步，确定图标线、面风格
设计师将图标线、面风格确定下来，并保证两者效果上可以兼容，即轮廓一致。
同时兼容线、面两种风格效果
第二步，定义图标颜色
在确定了图标的风格之后，将图标中用到的 7 种颜色，根据一深一浅再拆分为 14 种（具体几种颜色可根据图标设计需要来定），深色用于填充线性图形，浅色用于填充面性图形。
根据线、面风格需要，定义图标的颜色
第三步，给颜色定义样式名
给 14 种颜色，分别定义好 CSS 样式名（样式名遵循 CSS 规则即可）。
给颜色定义样式名
第四步，给 SVG 图标添加 CSS 内部样式
SVG 格式图标默认是没有 CSS 样式，需要手动将 CSS 内部样式添加到 SVG 文档中，并将 SVG 路径颜色与 CSS 样式名关联起来。
给 SVG 添加 CSS 样式
第五步，样式属性配置机制
添加内部样式之后，需要开发小哥哥在软件中增加对 SVG 图标 CSS 样式属性的映射机制。修改映射机制配置文件中 CSS 样式属性，就可以控制图标风格变化。
修改配置代码即可改变图标颜色
完成了以上五个步骤，通过修改软件中的映射机制配置文件，就可以改变图标风格。
了解了步骤方法，我们以 WPS 为例来讲解图标套色在实际案例中的应用：
案例一：前面有提到我们的四大组件，WPS 由文字、表格、演示、PDF 四组件组成。每个组件都有各自的主题色，文字主题色为蓝色，表格绿色，演示橘黄色，PDF 红色。多数图标都含有主题色，但外形是一样的，因各组件主题色不同而导致了很多图标的重复输出。
套色用处之一的颜色适配，可以让图标变色以适应不同的组件色，避免图标的重复。
不同主题色图标的变换效果
案例二：WPS 有推出多个风格各异的皮肤，因为图标数量的关系，无法每个皮肤都输出一套图标，目前只能使用默认的线性图标。也因时间和维护成本而导致图标风格的单一。
套色用处之二的皮肤适配，能使图标改变风格以适应不同的皮肤，既能满足图标风格多样，又能满足时间和维护成本的可控。
不同风格图标的变换效果
案例三：深色模式的配色与浅色模式大相径庭，图标使用的颜色也截然不同，适配需要输出两套图标资源，因不同深浅色模式而导致的图标资源重复输出。WPS 组件功能区的图标有几千个，输出和维护都很费精力。
套色用处之二的皮肤适配，在深浅色模式下也能适用，改变图标颜色以适应不同的深浅色模式，避免图标的重复输出。
深浅色模式下图标的变换效果
通过以上的案例不难发现，SVG 图标套色技术的价值，主要有以下几个方面：
1. 时间和维护成本的降低
利用图标套色方法，设计师只需要输出一套图标资源，就完成了多组件、多风格、深浅色模式适配。开发小哥哥也可以删掉适配用的冗余代码，提升了图标的管理和软件运行效率；
2. 个性化需求的满足
后期可以增加自定义扩展，让用户配置图标风格，更好地满足个性化需求；
3. 服务器资源的节约
更少图标资源，更小压缩包，更少空间和宽带的占用。
采用新技术，帮助设计、开发更好地完成多场景适配，降低了整体流程的执行难度，为项目节省了大量时间，避免过多精力投入在重复工作中，为最终完成目标创造了有利条件。同时也解放了生产力，有了更多的时间可以去关注高价值的项目。
工作中经常能遇到重复的内容，这都有提升和优化的空间，寻找更高效的方法，让工作变得轻松简单。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
图标定制设计之一：6大章节！图标设计基础知识全方位入门指南
图标定制设计之二：超全总结！金刚区图标设计的 10 大风格
图标定制设计之三：想让图标更精致？先掌握这11个容易忽略的设计细节！
图标定制设计之四：学会SVG图标的高级用法，界面适配效率翻一倍！
图标定制设计之五：研究微软 Fluent 图标规范后，我总结了这9个知识点！
图标定制设计之六：为什么别人的图标设计又快又好？来看腾讯高手总结的知识点！
图标定制设计之七：客户说B端图标太普通没新意，该怎么解决？
图标定制设计之八：从6个方面帮你快速掌握图标设计规范
图标定制设计之九：不止画图标！5 个金刚区的交互设计思考
编者按：其实网页或者App中的导航（Navigation）这个概念远不止我们熟悉的导航栏，而是一个更加广的交互概念：引导用户和产品进行有效的交互，实现用户的目标。本文将详细地介绍界面的导航设计。
一个网页或App产品要想有很好的可用性（usability），需要做好的最基本的一点是导航的设计或者说引导用户的设计。如果用户在使用一个网站或者App的时候找不到自己的处在什么位置或者该怎么去到想要的页面，那么视觉效果再怎么有创意或者抓人眼球都无法弥补产品的缺陷。无论你的产品想满足用户什么需求，让用户知道产品当下的状态和每一步操作之后的结果是对用户最基本的尊重。
首先，让我们弄清楚导航这个概念。最基本的含义就是在我们的现实世界中，当我们从一个地方到另一个地方，需要一些引导和指示。英文中Navigation这个词来源于拉丁文，原意就是：操纵船只在海上航行。所以导航就是能够帮助我们到达目的地的行为。导航的其他意思都是建立在这个原意的基础上。
所以回到UX／UI设计上，导航毫无疑问是可用性的一个要点。它可以定义为一系列引导用户成功地与产品互动并且实现他们目标的动作组合或者技巧组合。 用户带着他们的期望和目标来使用你的网站或者产品，作为设计师的你需要给他们提供实现他们目标的最好操作流程。因此当你的导航设计得非常高效，用户体验能得到极大的提升。
在你刚开始设计你的界面时，就要思考怎么设计一个有效的无缝衔接的导航。通过一些可交互的元素，比如按钮（buttons），开关（switches），链接（links），标签（tabs），条（bas），菜单（menus），区域（fields），让用户在不同的界面之间进行切换。
我们工作室的设计思路是，在界面设计的早期就全面地思考导航的设计，包括界面的布局，页面间如何切换，导航元素的放置和具体功能。并且通过低保真原型来进行验证，保证用户能清楚地理解所有重要的操作。如果跳过这一步，设计将有巨大的风险，其他事情有可能到头来都白干了。所以无论，对用户还是客户还是设计团队来讲，做好这最基础的部分是非常有好处的。
菜单是我们最熟悉的具备导航功能的元素，它向用户展示了界面的所有重要选项。基本上，它可以是用动词命名的一系列指令，用户可以用它来指示系统做出动作，像保存，删除等；它也可以是一个用名词命名的目录，用来代表不同内容的集合。
在界面设计中菜单可以放在不同的位置（侧边菜单，顶部菜单，底部菜单等），拥有不同的交互和视觉形式（下拉菜单，上拉菜单，滑动菜单等）。要想设计好菜单的位置、交互和视觉形式，设计师需要经过全面的用户调查，包括目标用户的预期和要求、接受能力和使用情境。好的菜单设计能让用户更快地实现他们的目标，为用户体验打下坚实的基础。
△ 作者：Tubik
这是一个博客APP的界面设计，采用了侧边菜单以及目录的形式，文字直接说明内容，再加上图标来做为辅助的视觉说明。
△ 作者：Ludmila Shevchenko
这个UI概念设计的例子很好的运用了颜色作为标记，这是一种很有效的导航技巧：每个分类的背景色使用了和目录相同的的颜色，这样目录和内容有着非常强的相关性，用户能自然地将他们联系起来。
CTA是用户行为召唤的简称（call to action）。CTA简单来说就是指设计师通过设计，刺激用户去做出一些行动。相应的，CTA元素就是指那些能刺激用户做出行动的交互元素。典型的CTA元素是按钮，标签或者链接。
不管在什么界面，CTA元素都是高效的交互行为的核心，极大的关系到产品的可用性和导航有效性。如果CTA元素的设计不到位的话，用户会产生困惑并且得费劲地去尝试。产品的转化率和用户体验都会大打折扣。这就是为什么CTA元素特别值得注意。无论什么样的界面，它都必须是最瞩目的元素之一，用来直接地告诉用户怎么用这个产品。
△ 作者：Eugene Cameel
一些CTA元素直接用图标形式而没有任何文字说明，但只适用于大家都熟知其含义的图标，比如听筒图标和信封图标。上图这个例子中，这个听筒图标就是这个界面中一个焦点，是一个典型的CTA元素，引导用户快速地实现他们的目标。不需要任何文字说明，用户也能懂点击这个图标的结果。
但是，如果一个图标的含义不是那么明显或者可能造成误解，最好还是加上文字说明。
△ 作者：Tania Bashkatova
上面这个例子是一个关于制作海鲜的网站的着陆页（Landing page）。页面的标题let’s cook还有食材照片是一个CTA，但不是一个可交互的CTA。可交互的CTA是下面这个红色按钮，用户点击这个按钮能看到更多关于不同主题和菜谱的信息。 抓人眼球的颜色强调了页面的视觉层级关系，把用户的注意力拉到关键的交互区域中。
条（Bar）指的是界面中一组用户可以点击的元素，用来快速与产品进行互动，或者还能让用户知道事件的进程。
标签条（Bar）
最基本的条是标签条（Tab bars），常出现在APP界面的底部，让用户能在APP的不同模块间快速切换。
△ 作者：Sergey Valiukh
载入条（Loading bar）
载入条是用来告知某个动作的进展，用户可以通过时间、百分比或者其他信息了解整个过程。
△ 作者：Sergey Valiukh
进度条（Progress bar）
给用户提供反馈，让他们了解事件的进度，比如说计划的事情完成了多少。
△ 作者：Valentyn Khenkin
按钮应该是用得最多的元素了。按钮能让用户在对系统发出指令后得到恰当的反馈。用户通过按钮对系统下命令，跟系统进行交互从而实现他们某个目标，比如发送邮件，买一个东西，下载文件，播放音乐等等这样的指令。按钮之所以那么的常用和对用户那么友好，是因为按钮很好地模仿了人和真实世界里跟物品的交互。
现如今的UI按钮有不计其数的设计样式，能满足很多的设计需求。按钮典型的用途是表明这个地方是可点击，因此需要具有非常高的视觉识别，有着特定的形状还有文字说明它能实现什么动作。设计师通常需要花不少时间好好考虑怎么让按钮很好地融合界面的风格，同时又能在视觉上跳脱出来。
△ 作者：Ernest Asanov
以下是在APP和网页设计中常用的几种具备附加功能的按钮。
汉堡按钮
汉堡按钮隐藏着一个菜单。当用户点击他们的时候，能把菜单调出来。有这个名字是因为它是由三条水平线组成的，看起来就像是汉堡的形式。它是一个典型的交互元素，也是颇具争议的元素。
大多数用户知道点击这个按钮能展开一个菜单，所以不需要额外的说明。汉堡菜单极大地节省了界面的空间，能让界面看起来更简洁，也为其他重要的界面元素腾出了必要的空间。它同时非常适合响应式设计，通过隐藏菜单让整个设计更统一，界面能在不同设备间保持一致。尽管它因为一些缺点而饱受争议，但因为这极大的好处，它目前仍然被广泛的使用。关于这个元素的主要诟病是，对于一些对界面不太熟悉的用户来说，这个比较抽象的设计元素可能会让他们产生困惑。所以，在决定使用汉堡菜单前，应该调查一下目标用户的接受程度和他们的需求。
△ 作者：Ernest Asanov
上图这个概念设计就是用了汉堡按钮把菜单隐藏了起来，从而实现一个简洁的页面布局和视觉效果。
加号按钮（Plus button）
一般通过这个按钮，用户可以实现添加某个内容的动作，比如添加新的联系人，状态，笔记，位置等所有用户在产品里能做的基本动作。有时候，点击这个按钮会出现新的窗口。有时候还会出现一些选项供用户进行选择添加什么内容，这取决于是什么产品。
△ 作者：Sergey Valiukh
上面这个例子就是用户在点击加号按钮后出现了可以选择添加的内容（图片，视频，文字），在选择了之后才会弹出添加内容的窗口。尽管这个操作可能增加一些额外的交互动作，但因为给予了用户选择空间，所以还是对用户很友好的一种设计。
分享按钮（Share Button）
分享按钮顾名思义就是能让用户把内容分享到他们的社交平台账号上。大多数情况下，这个按钮都是用社交平台的Logo作为视觉形象，这样非常易于识别和认知。
同样，这也是一个用户非常好理解的元素，在界面中用得也非常多。因为它很好地模仿了现实世界里人们熟悉的开关概念。关于这个元素的设计，特别要注意的是开和关的状态在视觉上要差别非常明显。这样能避免用户花时间去研究怎样是开怎样是关。很多种的形式对比或者切换动画都可以解决这个问题，从而设计出很好的用户体验。
△ 来源：Tubikstudio
这个案例是来自一款闹钟应用Toonie。动画效果让交互变得更流畅和自然，同时整个控件颜色的改变和滑动元素形态的变化让用户能够轻易地识别出开关的状态。如果你想了解整个App的案例研究，可以到来源查看。
也很好理解，就是让用户在一些选项里选出目标选项。通常包含一个可滑动的列表，上面是一列数值，比如小时，分钟，日期，度量，币种等等。通过滑动列表，用户可以选定想要的数值。这个元素广泛地应用在有时间设定这个功能的界面设计上。
△ 来源：Tubikstudio
复选框是可以用来同时标记多个特定的内容。同样的，也是借用了我们在现实世界里熟悉的概念。我们在考试的时候，或者填调查问卷的时候会在选项前的小方框里涂上颜色作为选中的标记。和开关一样，复选框同样用得很多，主要在设置页面设计里。不过，复选框还有另外一个用得比较多的地方，那就是含有任务管理，待办事项，时间记录等类似功能的App或者网页。
△ 作者：Tubik
上面这个是一个待办事项App的概念设计。用户点击复选框后，表示这个内容已经完成。字体变粗的同时颜色发生了改变，这样就非常明显地把这个已完成的任务和其他未完成的任务区分开来。
界面的导航（Navigation）是用户体验设计的核心之一。毫无疑问，如果你看不到路, 你就去不了你的目的地。用户现在正面对着越来越多的网站和APP产品。越来越多的选择会让用户期望这些产品具备符合他们使用习惯的导航设计。
图标可以定义为一个象征着某个概念或物体的视觉形象，有着加强与受众沟通的目的。会和文字结合一起使用，将想要传达给受众的信息表现出来。在界面设计中，图标通常是象形符号或表意文字，对可用性和成功的人机交互有重要意义 。
毫无疑问，图标的其中一个重要作用是可以有效地替代文字描述。因为比起文字，用户对图片的理解速度更快，所以这个特点能极大提升用户体验，增强产品的导航和对用户的引导。但是，需要注意，即使是轻微的歧义或者误解都会导致糟糕的用户体验。所以在设计图标的时候要做必要的测试，根据目标用户平衡好文字和图标的使用。最有效的方式是同时使用图标和文字，这样大部分用户都不会有问题。电商APP或者网站最常使用这样的形式来给用户足够的信息，让他们能轻松快速地浏览。
△ 作者：Tubik
根据图标的功能，我们可以将它们分为一下几类：
交互式图标（interactive icons）
这类图标具备交互功能。他们是可点击的，能回应用户的要求，触发图标代表的动作。这种图标告知用户按钮、控件或者其他界面交互元素的功能或者特点。在大多数情况下，这类图标的意义明确，不需要文字辅助说明。
△ Tab Bar
△ 菜单概念设计
说明性图标（clarifying icons）
起到说明作用的图标，设计师用它来表示某一个特点或者内容的种类。它有时候不属于界面布局的元素或者并不具备直接的交互功能。经常和文字结合使用。
△ 作者：Tubik
△ 作者：Ernest Asanov
娱乐性和装饰性图标（entertaining and decorative icons）
这类图标注重抓人眼球的视觉效果并非功能，通常用在节日或者特别款的场景。他们能有效地吸引用户的注意力，增强视觉冲击力。
复活节和春天主题的图标：
△ 图片作者：Arthur Avakyan
APP图标（app icons）
在各个平台上可交互的品牌标志，展示品牌和产品的形象。最常见的就是我们手机界面上每一个App的图标，上面通常是品牌和产品的Logo。
△ 作者：Arthur Avakyan
网页图标（favicons）
就是我们经常在网址栏或者书签里看到的URL前面的那个小图标，也是代表着产品或者品牌的形象。能让用户在浏览网页时给他们快速的视觉提示。
搜索区域又常常被称作搜索框（search box）或者搜索条（search bar），代表着用户可以在这个区域内输入想要搜索的内容。它是那些有着很多内容的网站或APP的核心导航元素，像博客，电商，新闻等产品。设计得好的搜索框能让用户轻松地找到想要的信息。因为它能帮助用户省去很多时间和精力，所以它是一个对用户特别友好的界面元素。
它的设计形式有很多种，可以是标签的形态，也可以是引导输入的一条线或者简单的一个搜索图标。大多数情况下搜索框的图标是一个放大镜的样式。基本上所有的用户都懂得这个图标的含义，所以能实现非常直观的导航设计。想要在这个图标上做文章的话，要好好测试一下，因为改得不好的话会严重影响交互和界面的可用性。搜索框还可以加入提供候选项的下拉菜单或者自动填补内容的功能。
△ 作者：Ernest Asanov
另外需要注意的一点是搜索框控件在界面中的位置。在网页设计中，搜索框经常出现在网页的顶部。这是一个很恰当的设计，因为通常网页的顶部区域具有很高的可见性，用户打开网页就看到了，不需要再花时间去找到这个控件。举个反面例子，如果一个电商网站因为搜索框的设计有问题，导致用户没办法快速方便地找到想买的东西，网站销售表现会受到极大的影响。因为现在很多网站都将搜索框放在网页的顶部，所以用户也养成了在那里找到搜索框的习惯。
至于App界面的话，要视具体情况而定，设计师可能面临更多的限制。如果是一个有着大量内容的APP，而且搜索是核心功能之一的话，那么一般放在一个显眼的标签条（tab bar）上。如果搜索并不是核心功能，那么可以把它藏到菜单里或者只在需要的用到的地方显示或者时刻显示出来。
△ 作者：Sergey Valiukh
标签是一个标有关键词的可交互元素。标签其实是给用户提供快速通道的元数据，用户可以通过它快速导航到与关键词相关的所有内容。除了网页或者App本身带有的标签，在很多情况下用户也可以自己创建标签。
△ 作者：Design4users
标签这个界面元素被广泛地应用在用户原创内容平台（UGC）的界面设计里。当用户上传图片、状态到社交网络的时候，可以加上关键词作为标签。上图就展示博客网站Design4Users运用了标签来加强网站的内容导航。通过点击某个标签，能切换到带着这个标签的所有内容的页面。标签是友好的搜索引擎优化（SEO-friendly）技巧，能提高用户搜索内容的成功率。
△ 作者：Unsplash
再举一个例子，上图是图片素材网站Unsplash的界面。当用户想要下载图片时，可以输入描述图片的关键词作为标签。通过这样的形式帮助用户有效地找到想要的图片。我们还可以注意到，输入框内加入了引导用户进行操作的说明，这样更进一步地提高了产品的可用性。设计的细节真的很重要。总而言之，标签是一种用户可以自行创造的导航元素，拉近了界面和目标用户之间的距离。
全面地设计好整个界面的导航不是一件容易的事，需要一些心理学、交互模式、用户测试的基础知识，还需要在项目的早期思考清楚网站或者App的信息架构。但是做好这一点的话，能够让你的产品很好地帮助用户解决他们的问题，给优秀的用户体验打下坚实的基础，让他们对你的产品产生越来越大的粘性。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
手机及小程序界面设计之一：让设计更有说服力的20条经典原则：菲茨定律
手机及小程序界面设计之六：让设计更有说服力的20条经典原则：菲茨定律
手机及小程序界面设计之八：如何适配iPhone X？来看滴滴出行的实战案例复盘！
Z Yuhan：对于手机端的表格设计，本文将为你提供了一些思考方向，希望能够带给你启发。
表格似乎和移动设备很难融合，强行贴上还真有些毁三观。即便是想方设法地避免，也总会有这样那样的原因，而不得不同时面对它们的时候。
其实有很多方法可以优化手机端的表格，但是可能不一定每一种都适合你遇到的情况，所以我整理了一套循序渐进的处理方法。
假设你在设计一款类似微信聊天群的功能，PM给你一张「成员信息表」，并要求你把它放在群成员管理界面上。这张表格里的信息的排列方式也许非常随便，看起来让人摸不着头脑。
△ 组员信息表
首先你需要弄清楚这张表格摆出来的意义是什么。假设这张表格是为了「让群主查看并管理成员」，那么你就能分析得出：
按照重要程度摆放各信息，并合理排序后，表格看起来就更好理解了：
△ 整理后的组员信息表
如果你的情况不允许对表格对形式进行变动，那么可能就真的要用手机端展示表格了。
在确保文字能够看清的情况下，表格很有可能横向展示不全，所以滑动难以避免。以下两点可以优化表格的滑动体验：
这样，复杂的表格至少能够从表面上融入手机界面了：
再仔细看看这张表格，即便不做大的调整，还是有很多地方可以通过微调来改善体验：
优化后，表格看起来更简单了：
手机的窄屏对于表格来说总不是最佳选择，所以如果可能的话，还是避免使用这种形式。
一个人在同一时间的注意力是有限的，大多数情况并不需要像传统印刷品那样，完整列出所有信息。重新思考真实的使用场景和用户心理，你会发现并不需要一次性把所有东西都扔出来。
如果你想要像微信那样，用头像+昵称这种形式，也许很容易被给你表格的人反驳：
你可以筛选出相对有用的信息提供给用户，并用更有意义的方式整理出来：
于是原本臃肿的表格可以被整合重新设计成完全不一样的轻便形式：
本文提供了一些思考方向希望能够带给你启发，以后遇到类似问题，不要老老实实地把表格原封不动地贴到手机上了。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
手机及小程序界面设计之一：让设计更有说服力的20条经典原则：菲茨定律
手机及小程序界面设计之六：让设计更有说服力的20条经典原则：菲茨定律
手机及小程序界面设计之八：如何适配iPhone X？来看滴滴出行的实战案例复盘！
滴滴出行在 iPhone X 发售前就针对其操作特性进行了界面适配，保障了 iPhone X 用户的全面屏操作。现在 iPhone X 的适配结果已经得到了良好的用户反馈，由此我们梳理了移动端界面 iPhone X 的适配方案，并从整个适配过程中探索到万变不离其宗的适配方法，为后续不断更新的多尺寸屏幕提供更好更快的适配思路。
iPhone X 是苹果公司十周年推出的重点产品，无论外观还是技术都有着革命性的创新。让我们先来回顾下 iPhone X 在界面使用体验上都有哪些操作特性。
如果你对 iPhone X 还不够了解，可以看看这些 ：
1. 屏幕变长
因大部分设计师都用 iPhone 8 来做设计稿，所以我们用 iPhone 8 与 iPhone X 做对比。
iPhone 6、iPhone 6s、iPhone 7 与 iPhone 8 屏幕分辨率一致。
iPhone X 使用了 5.8 英寸高分辨率、大圆角显示屏。iPhone X 与 iPhone 8 的显示屏宽度一致都是 375pt ，高度上 iPhone X 高出 145pt，可以在垂直空间多展示约 20% 的画面。
iPhone X 的屏幕分辨率和 iPhone 8 Plus 等相同，使用 @3x 的图像，界面内容由手机硬件遮罩成带圆角和传感器（顶部齐刘海）的形状。所以界面设计时 iPhone X 和 iPhone 8 的设计宽度可以通用 375pt，而实际 iPhone X 的屏幕像素为 375pt×812pt (1125×2436px)，且切图使用 @3x 图片。
乔布斯曾说，手持设备最理想的屏幕尺寸是3.5寸，这是因为单手操作时3.5寸屏幕基本能做到大拇指无障碍全覆盖。但随着人们对手机功能多样化的需求，主流屏幕远大于3.5寸。
iPhone X 是 5.8 寸，屏幕已经超越了绝大多数用户的拇指覆盖范围，这就导致左上和右下角的单手操作不够方便。很多基于 F 型流动视线设计的 App，通常会将重要的功能入口置于左上角，在 iPhone X 上，视线优先和拇指操作未必可以同时满足，这就要求设计师们对操作盲区的功能进行多重考量，评估是否要针对 iPhone X 做出位置调整。
2. 异形状态栏（齐刘海）
iPhone 8 屏幕状态栏高 20pt，iPhone X 状态栏高 44pt 并有齐刘海形状遮罩。状态栏位置显示的信息，在 iPhone X 上受齐刘海遮罩影响，需要特殊考虑展示效果，甚至重新设计信息展示方式避让状态栏，以便保持各屏幕展示效果的统一。
苹果官方不建议采用隐藏或遮挡状态栏的设计，相对 iPhone 8 ，iPhone X 有更高的纵向显示空间足够展示更多的内容，且状态栏显示了对用户有用的信息，除非隐藏状态栏能带来更大的收益，否则还是建议保留。
3. 增加主屏幕指示条
iPhone X 屏幕最底部设置了主屏幕指示条，用户可从屏幕底端使用滑动手势进入主屏幕或切换应用。这些系统的全局操作会优先于App应用的操作。在设计用户沉浸式的产品如视频、游戏时，可以适当的隐藏主屏幕指示条。
主屏幕指示条下方的内容仍是可点击操作的，但要避免在屏幕最底部设置重要操作内容，且要避免使用与指示条相冲突的操作手势。主屏幕指示条只有黑白两种颜色，会根据指示条底部背景自动切换。
4. 设置安全区
从 iOS 11 开始，苹果引入了安全区域的概念。在 iPhone 8 等屏幕上，安全区域默认是除了状态栏以外的屏幕范围。在 iPhone X 上，安全区域默认是除去顶部状态栏以及底部主屏幕指示条周边的范围。
遵照系统安全区的概念进行设计和开发，大多数使用系统标准UI元素（如导航栏、表单、内容集）的应用程序会自动适应设备的新外形，不需手动调整，这样会大量节省开发人员的工作量。所以在这里提倡大家遵照系统提倡的方式进行开发布局，不仅方便 iPhone X 的适配工作，也方便后续 iOS 系统更新以及界面元素的自动匹配。
固定在屏幕上展示的内容应始终在安全区域内，如顶导、底部tab栏等。垂直滚动的内容，如列表，图片流，需要一直延伸到底部，也就是会在安全区之外展示，这样才能确保提供全面屏操作体验。
正是因为 iPhone X 有着许多操作特性，我们的设计方案必须针对 iPhone X 进行适配。以下是针对常见界面元素整理的通用适配规则。
1. 吸顶元素
对于吸顶元素的适配原则是：避让状态栏，内容区吸附于安全区顶部，状态栏背景颜色根据吸顶元素进行调整。
2. 吸底元素
吸底元素的适配原则是：内容平移至安全区底部，界面背景层元素（界面背景色、背景图片、全屏地图等）充满屏幕，主屏幕指示条下方区域与吸底元素颜色协调。
3. 信息流
信息流从主屏幕指示条下方穿过，撑满屏幕显示，滑动浏览信息不受影响。主屏幕指示条下方内容仍可点击，此区域滑动手势优先触发系统操作。信息流最底部内容要保障在安全区内。
4. 全屏元素
全屏元素多为图片、视频、游戏画面、全屏地图等信息，适配规则是：全屏元素在 iPhone X 上仍要保持充满屏幕的状态，要保证图像信息比例正确不变形，并接受硬件传感器齐刘海和圆角遮罩。
因 iPhone X 与 iPhone 8 Plus 都使用@3x图片，所以开屏图片不做单独适配的话可以调取 iPhone 8 Plus 图片裁剪使用。
5. 左右布局元素
最典型的左右布局就是抽屉导航，抽屉拉出后，如果信息卡片和主屏幕指示条交错叠加，就会稍显信息混乱，建议抽屉导航的宽度根据主屏幕指示条的位置进行调整，完整露出或完全遮挡指示条。
6. 居中元素
居中元素在适配中的影响较小，对话框、Toast 提示等均不需单独适配。
以上的适配规则基本可以满足所有场景的基础适配需求。当然还有很多特殊场景，不需要特意保持 iPhone 8 和 iPhone X 展现效果的一致性，这种情况就需要单独设计方案，不是通用规则能满足的了。
滴滴出行针对内部产品做了一套适配指南，几十页满满的适配方案说明，尽可能详尽的将普适规则与特殊规则运用场景举例说明。设计平台将此适配指南发放到各业务部门，由业务方产出自己各功能场景下的适配方案。
在此过程中我们发现，即使规则已经很详尽，Webapp、H5页面等多场景下仍有一些不清楚如何适配，或不能通用适配规则的情况，需要设计平台持续跟进，讲解规则走查适配效果。
造成这种情况的原因大多是因为界面设计的时候没有充分考虑其后期延展，导致多屏幕下不能保持统一样式，无法通用适配规则。这让我们开始思考如何设计界面才能包容多屏幕的展现。
设备屏幕在不断更新，适配需求就是持续的无尽的，iPhone 从 iPhone 4 – iPhone 5 – iPhone 6 – iPhone X ，屏幕尺寸不断在变化，甚至屏幕的形状边界也在变化，更不用说安卓系统各种各样的屏幕尺寸及屏幕形状。例如，夏普AQUOS S2。
设计界面时，如果对市面的主流屏幕挨个设计是有极其高的时间成本的，那怎么才能让适配更从容，不必紧张的跟随手机厂商的发售脚步？是否有提高适配效率的方法？适配可否是一劳永逸的？需要适配的元素有没有一些共性……
带着这些问题不断的思考总结，我们形成了一套自己的设计理念，能够让适配这件事情以一抵百，万变不离其宗，这就是「去边界化」设计。
「去边界化」设计，是指在设计之初把边界限制去掉，定义好界面元素的特性及层级关系后，再套用到屏幕边框之中。与常规设计的区别在于，让内容成为独立且完整的组合体，再根据设定好的变化规则组合到不同的边界中去。这样保障了内容的最大适用程度，且保障各屏幕展示规则的统一性。
目前我们最常做还是手机界面，未来VR、AR 成熟起来，我们所设计的界面就会更大，甚至会大到无形。运用「去边界化」设计，可以让我们更好的适应未来。
另外回到手机界面，我们完成一个设计方案后，也可以运用“去边界化”的方式检查界面元素是否在多屏幕适配上存在问题，减少不必要的适配工作量。
其大无外，其小无内，在界面设计上，我们也需要突破界限，精益求精，让每一个元素都丰富而完整。
1. 定义元素特性
这里的元素特性，除了元素本身的基础功能及操作方式外，从三个角度进行思考，延展性、吸附性、流动性。
这里我们以同倍率，不同尺寸的屏幕适配为例，省略倍率换算方便我们更简单的了解「去边界化」设计。
如下图中，图片、卡片、背景、列表、按钮 等元素可随着屏幕进行延展变化，而icon、文字等为固定大小不会随着屏幕进行变化。
延展变化又可分为：等比延展、横向延展、全部延展。
通常图片、视频元素使用等比延展，保障画面比例统一不变形；列表、按钮 等多采用横向延展，信息量不变高度无需变化；卡片、背景等多根据其承载信息和屏幕背景尺寸进行调整，长宽均跟随变化。
如下图，button 吸附于界面（或安全区）底部，适配到其它屏幕依然保持与界面（或安全区）底部的吸附性。而下图中的toast 提示为界面居中元素，也就是它的吸附性就是界面的中心，适配到其它屏幕仍保持这一吸附属性。
针对流动性的元素主要是定义其容器的延展性和吸附性，流动元素本身大小不变，位置形态上跟随容器进行变化。当然还要考虑元素过多超出容器后的显示方案，是被截断还是省略等等。
如下图，文字图片流在信息容器内进行流动展示。
2. 组织信息结构
从平面维度思考元素关系可以理解为元素间的吸附性，但界面元素不总是在同一个平面上，App 界面通常分为 背景层 、内容层 、操作层 、状态层 ，这些层级在高度上是相互叠加的。
决定元素层级的因素主要是其表达内容的主次关系，重要而紧急元素在最上方，不重要不紧急的元素在最下方。将界面从平面维度填充为立体维度让产品功能更丰富，更贴近人们真实的立体世界，也就更符合用户的认知和操作逻辑。
无论界面的边界如何变化，元素间的层级结构一旦定下是不会随边界变化而改变的。建立元素的纵向层级关系，便于在不同场景保持统一的元素优先级。
在「去边界化」设计中，除了元素自身特性（延展性、吸附性、流动性）清晰，元素间的组合层级关系必须排布合理、逻辑清晰，才能让整个产品层级统一，多屏幕展现层级统一。
3. 元素组件化
我们有讲到界面中所有的元素都不是独立的，有时某几个元素组合表达同一个功能，关系非常紧密，甚至可以捆绑移动，我们把这些功能密切相关的元素进行封装，看做一个完整的大元素，这就是我们常说的组件。
组件化的特点就是详尽每个元素的操作反馈、延展方案、显示容器、极限情况等等场景，然后定义元素与元素之间的吸附关系，操作联动，使其成为一个完整的操作场景。
说到组件化设计，这有一篇必看好文：《进阶必读！可能是最全面的组件化开发与设计指南》。
组件还可以根据功能需求与其它元素自由组合，使得组件可以不断复用，大大提升设计效率，及适配效率。
组件化的意义有很多，可以方便设计元素的复用，方便开发组件的复用，减少代码及元素冗余，方便设计方案的修改等等。横向组件化之于「去边界化」设计，主要是在确立了元素特性及层级关系后，以整合元素成为组件的方式提升设计及适配效率。
以上就是「去边界化」设计理念，包括定义元素三大特性：延展性、吸附性、流动性，然后确定信息的横纵向层级关系，横向功能关系紧密的元素可进行组件化处理。这样整个界面的元素都是层级清晰且不依靠边界的，这时再给界面套用一个屏幕边框就非常有依据了，且能保障所有适配界面具有统一性。
梳理清楚设计理念之后，还需要将上述原则梳理形成设计规范，同步至团队所有成员，以达到团队共识保障最终的效果呈现。
4. 制定设计规范
以规矩为方圆则成，以尺寸量长短则得，设计规范可以帮助设计师快速认知元素特性及使用规则，工作中快速复用通用元素，提升设计效率，且可以通过规范说明对新功能寻求设计指导和参考。
规范的贯彻执行，可以保持产品设计语言与品牌形象的统一，保障在不断更新迭代中产品体验不走样。统一的使用体验可以保障用户流畅的使用产品，快速识别产品功能，简单高效进行操作。此外通过规范说明，可以实现开发人员与设计师的高效沟通，另外，将组件开发形成设计组件库，可以提升开发效率，方便代码的复用。
在「去边界化」的设计理念中设计规范也是不可缺少的环节，把定义好的元素特性和确定的组织结构总结成设计规范，是把理论层面上的探索转换成实践指导。
以上就是完整的「去边界化」设计理念在实际工作中的应用：从定义应用中元素的延展性、吸附性和流动性，到把零散的信息元素组成横向、纵向有序的结构，并把上述特性和结构形成设计规范在设计、开发团队中应用推广。
从苹果发布会开始，滴滴设计团队内部就开始进行着iPhone X的适配工作。了解iPhone X的操作特性、探究滴滴出行应用的适配规范、上线后跟踪反馈等，适配只是一个很小的工作需求，但也可以做的很大，做的很多，我们希望抱着这种极致执行的态度做好每一件事情。
从这次的适配工作中我们不仅看到了 iPhone X ，还看到了未来不断会出现的新产品、新系统等，我们不满足于一次次被动的适配，更希望可以主动的应对变化，所以我们摸索出了「去边界化」设计理念，希望这个理念能对大家的设计工作有所启发，让我们为未来做好准备。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
手机及小程序界面设计之一：让设计更有说服力的20条经典原则：菲茨定律
手机及小程序界面设计之六：让设计更有说服力的20条经典原则：菲茨定律
手机及小程序界面设计之八：如何适配iPhone X？来看滴滴出行的实战案例复盘！
对于刚开始思考 UI 元素尺寸的新人，通常第一反应都是去看官方规范，新人都以为官方设计规范的作用就是告诉你们元素的大小和怎么设置，只要看完了就能懂得如何设计 iOS 或 Android 应用。而实际上，这些规范并不能帮助你们解决这个问题，因为设计规范涵盖的内容远远比这些复杂。
我们想要搞清楚 iOS 和 Android 官方元素的具体尺寸，最好的方法就是去下载它们的官方 UI-Kits，如下图的安卓组件库所示。
官方不会提供一个列表，逐一罗列每个元素的长宽和其它参数，所以想弄明白，要自己在这两套素材库中选中元素查看。如下图这个按钮，我们就能看见它的参数值。
免费获取 → iOS 11设计规范发布了，来下载官方源文件！
在初期，我们想要设计出严格符合官方规范的设计，就可以严格照搬官方的元素设置。但是，即使官方的源文件包含的元素字体已经非常多了，在实际设计过程中，还是会出现它们无法覆盖的设计类型，需要依靠我们自己设置。
还有如字体的应用，官方源文件使用的语言是英文，光是官方应用的两种 SF 字体，就包含了十几种字重，所以我们可以看见文字应用面板中密密麻麻的字体类型。在真实的中文设计场景下，我们是不可能照搬这种规范的。
新人要明白，官方的规范，只是一种建议，我们可以选择遵守也可以选择不遵守。如果一味的照搬这些内容，我们是无法设计出有趣个性化的设计的，比如下面这几款已经看不到 「 iOS 设计 」的应用。
官方的参数决定我们设计的下限，当你不知道该怎么做，或者设计的目标就是以系统原生的体验和视觉为准，那么照搬就行了。后面的文章要说的，就是脱离开这些束缚，正确自定义 UI 元素的尺寸。
UI 和平面不一样的地方，就是极其关注元素属性的具体数值。平面的排版无论是海报或画册，使用百分比、目测的形式就足以让我们做出很多优秀的作品，无需紧盯着其中出现的每个元素的长宽高数值。而 UI 的设计中，无论字体、图标还是按钮，都需要我们严谨地定义它们的长宽高，如下图设计一个按钮的操作。
这么做的原因是因为在电子屏幕中，图像的呈现是由屏幕中的像素点来完成的，像素点是最小的显示单位，一个点只能显示一个颜色，所以如果设置了带有小数点的数值，那么这个元素的边缘就会虚化。所以为了避免这种事情出现，我们就得用整数来定义元素的长和宽。
这当中还涉及到不少比较复杂的屏幕显示原理问题，尤其是和像素倍率相关的基础知识，我会在另外的文章里分享，后面文章所有的长度单位默认以 PT 为准，即 XD 和 Sketch 默认画布的单位，PS 中设计需要在这个基础上乘以2。
只有分隔线，是唯一可以不使用整数的例外，因为 1pt 的分隔线看起来会非常粗，一点也不精致，感兴趣的同学可以自己在 Sketch 或 XD 中画个列表然后用 1pt 的线条做分隔，再导出到手机里观看效果。即使是官方应用，也主要使用 0.5pt 的线条做分隔。
无论在 iOS 或 Android 的规范中，也都提到过使用 8 x 8 的网格做辅助，这导致网上有很多片面的文章会反复强调对元素的尺寸使用 8 的倍数。
实际上，我们在真实的设计环境中，建议大家使用 4 的倍数作为一般元素的尺寸倍率即可，如 8、12、16、20、24等，它的好处我会在后面的文章中做说明。如果发现 4 的倍数无法满足某些特定的需要，如多 4pt 太大，少 4pt 太小，那么我们就可以使用一般的偶数如18、22、26等。
以上就是我们一开始要建立的元素尺寸原则，精简完即：
有了这样的原则，并养成习惯，我们就能在每次设计前对元素尺寸有个大致判断，然后再根据需要按 4 的倍数调整，如下面设计注册登录页面的输入框作为案例。
开始我使用 280 宽，44 高的尺寸，但是觉得有点僵硬，太正式了。这时候反思认为应该是输入框太矮导致的，所以高度上改成 44+(4×2)=52 。这时候又觉得太高了，实际输入内容也没那么宽，于是再对高减 4，宽减 40，获取最终结果。
所以，因为这样的操作原则，决定了 UI 元素的尺寸不是凭感觉用鼠标拖拽出来的（拖动效率太低），而是在元素的属性栏中填入它们的数值。UI 的设计过程就是一个不停键入参数和调整参数的过程。
以上就是对与 UI 元素尺寸定义的第一部分，因为要讲清楚需要花的篇幅太长，所以我会将后面具体的案例讲解拆成 4 部分，分别由控件、文字、图标、组件部分组成。
这里要声明，在我的语系中，控件指的是在界面中最基本的交互单位，如按钮、滑块、开关、分页器等，更复杂的如动态卡片，功能快速入口等，就归入组件中，便于我们理解。
下面，会根据前面定义的规范，分别讲解控件应该使用的尺寸范围：
按钮是界面交互操作中使用最频繁的元素了，当然按钮呈现的形式也多种多样，比如可以是文字、图片、图标、卡通形象等等。在这里，我们只聚焦于矩形的基础按钮。
在进入具体参数的讲解前，要先理解按钮实际上是所有控件中最复杂的一个，并不是因为在设计样式上的复杂，而是因为按钮承载了最多的产品诉求，权重差异极大，例如看下面的案例。
在上图中，可以点击的东西不少，我们就说外观是标准样式的按钮，就有 9 个。而这里面，权重最高的必然是 「加入购物车」。权重最低的，应该是前往新品页。
定义按钮尺寸，我们首先要知道的是，按钮在界面或整个应用中的权重，尺寸和权重是成正比关系的。当然，颜色也是对重要性表现的关键因素，不过不在这里展开。
按钮高度
当我们设计按钮时，优先要从高度入手，再去定义宽。为了便于新手理解，我首先从高度上来匹配权重，分成高、中、低三类：
高权重的按钮，类似登录页的注册、登录，购物详情页的购买，流程页中的下一步，它的最小高度应该从 40pt 开始递增，低于这个大小，那么这个按钮就很难在这个页面起到视觉支撑，因为感觉太细了。
中权重的按钮，类似个人主页的关注、点赞、评论按钮等。这个层级的按钮依旧有比较高频的交互次数，我们必须得保证它易于点击。24pt 是在我经验中便于点击最小的尺寸了。这种按钮通常是组件的一部分，不像层级最高的按钮常常是处于一个孤立的空间，所以高度如果超出 40pt，就会对当前模块产生直观的破坏。
低权重的按钮，就类似查看更多、标签、详情等类型，相对于按钮的交互属性，这类按钮具备更多的提示属性，只要让用户能看见，又不需要太显眼。尺寸不大于 24pt，能容纳内部文字或图形元素即可。
使用上面这种方法，在页面中根据权重定尺寸就可以了。还需要注意的是，不同尺寸的按钮之间，高度的差距不要小于 4 ，否则差异太小不仅拉不开层次，还容易使视觉感受变差。
按钮宽度
主流的按钮都是横向的长方形，正方形也有，但是不能变成纵向的矩形。
按钮的宽度主要和内容挂钩，内容数量越多，按钮自然也就越宽。唯一的例外，只有高权重的按钮，可以无视内容的数量。因为它们需要更多的区域，往往都是撑满屏幕内容区域或全屏的，可以特殊处理。
普通按钮，左右间距距离内容过多，就会让按钮看起来非常的不协调。所以我们要根据内容来设置按钮左右的宽，最大宽度应该小于内容距离上下的 2 倍。
按钮圆角
按钮尺寸还有最后一个属性，就是按钮的圆角设置了。矩形的边角有三种类型，即直角矩形、圆角矩形、半圆矩形。
为矩形设置圆角，是为了让按钮看起来有一定的圆润感不会显得太尖锐，这种圆角的数值赋予要适当，只要超出了一定的范畴，就会对视觉的和谐产生影响，我习惯称呼为——半圆不圆，如下图右侧的错误案例。
所以，我们在设计圆角的过程中，一定要仔细感受圆角在画面中的和谐性。而圆角的设置范围，不大于高度的 1/4。例如，一个24pt的圆角矩形，圆角的尺寸就应该不大于 6pt，如上图的效果。
以上就是按钮相关尺寸定义的说明，当然，在真实的设计需求中可能遇到很多无法满足的情况，这就需要大家多做尝试了。
输入框也是我们比较常用的元素之一，它和按钮有非常接近的外形。最常见的就是登录页账号密码输入框，以及首页上方的搜索栏了。
输入框的使用高度尺寸，常规在 36-56pt 之间。低于 36pt 时则输入框看起来会非常拥挤，比如我用下面学生的案例做个演示。
常见的步进器，就是输入框和按钮的结合。左右有两个用来增加数量的按钮，中间是允许我们直接键入数字的输入框。在尺寸上，它也介于两者之间，高度在 28 – 40 之间。下面我再用学员的作业做次演示，当低于 28 以后，就会发现在屏幕中的占比实在太小了。
步进器中常见的错误，是在我们设置圆角外框时，绘制左右两个按钮，并没有合理的减去内侧的圆角，这是绝对不应该忽略的细节。
下拉菜单要注意包含多种状态，默认、展开和选中。默认状态与输入框类似，主流的高度也使用 36-56pt。但是，当菜单展开后，下方多出来的选项菜单，就值得注意了。
菜单的宽度正常情况下与默认状态相同，而高度根据里面包含的选项数量决定。单行选项，高度是不大于默认的选项框的。新手很容易在弹出菜单中设定过小的高度，使整个控件看起来会非常的别扭。
开关也是按钮的一种形式，通常出现在设置页的列表中，上方就是它主流的几种样式。在设计开关的时候，要先确定一个矩形区域，高度使用 24-32pt，宽度则用 1:2 的比例。如高度使用 28pt，那么宽大致可以使用 56pt。之后再将细节填入。
滑块形式接近开关，通常在中间有一个操作节点，下面有一个用来表示区间的线条。实际上我们该做的就是分别决定它们的尺寸。
节点如果做的太小，不仅会显得难看，而且会让人觉得很难操作。它的直径应该在 16-28pt 之间。而下面的横线，宽度由所在内容区域的宽决定，高度一般在1-4pt 之间。
指示器用来展示元素序列，虽然在 APP 中没有太重要的作用，但既然我们加进去，就要让它看起来和谐。大多数人在定义指示器时，不是太大，就是太小，可以只从后面提供的尺寸中选择，就能保证指示器的尺寸不会出错。
指示器主要是圆形和矩形两种形式：
提示红点也是大多数应用会使用的一个控件，它的大小应该在 24-32pt 之间。作为一个圆形，这个控件设计起来很容易，但设计师往往忽略一件事，那就是如果中间的数值超过 10 变成 2 位以后，要怎么处理。
在设计这样的元素时，我们要用一个矩形元素来表现，即画一个正方形，然后将圆角设成最大，那它看上去就是一个圆形。那么每增加一位字符，我们就需要为这个矩形增加该字符的宽度，可以用左右间距判断。
因为相同字号下，不同英文、数字的宽度都是不一样的，我们要根据实际输入的内容所增加的宽度，去增加圆点的宽度。
最后一个控件，就是分页控件了，安卓中的 Tabs。这个元素在设计时也受到排版空间的影响，较为宽松的排版风格，高度就比较大，若拥挤则反之。
下面是高度：
分页控件主要应用在头部和页面中部的组件中，如下方的案例：
虽然很多时候分页器是没有背景色的，但是背景矩形是必须画出来的，即隐藏填充和描边，这样我们就可以通过垂直居中的方式，来确定中间文字的位置。
一个完整的分页控件，里面会包含两个或以上的选项，所以定义每个选项的宽也是必要的。通常，我们有两种定义方法，一种是选项少时，直接进行均分显示，另一种是选项较多，采取定宽模式，宽度最小建议在 64pt 以上，才不会显得过度拥挤。
分页控件选项处于选中状态时，有的设计是修改背景色，有的是修改文字属性，但今天最常见的就是加入下划线。这个元素如果定义得不好，会让整个控件看起来非常粗糙，它需要在样式中能起到画龙点睛的作用。
下划线分为两种，一种是贴在控件底部的，另一种是在文字下方悬浮的。两种方式线条应该使用的高度都应该不大于 2pt。宽度的定义，第一种和每个选项背景区域相等，第二种则可以在 8-16pt 间（小于文字总宽）。下面是正确设计效果：
前面说到了不少元素的尺寸，那么真实应用的效果会如何呢？下面我就用原型的方式，不考虑样式与色彩将它们组合到完整的页面中去。
可以看到，模块大小很均衡，看上去不会觉得哪些地方太大或太小，只要稍加填充样式，那么就可以变成完整的设计稿了。
这些参数虽然不能覆盖所有特殊的状况和需求，但至少可以保证这些控件不会被设计得很奇怪。当你们没有对于特殊化风格设计的控制能力时，就先学会正确的使用上面的这些参数吧。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
手机及小程序界面设计之一：让设计更有说服力的20条经典原则：菲茨定律
手机及小程序界面设计之六：让设计更有说服力的20条经典原则：菲茨定律
手机及小程序界面设计之八：如何适配iPhone X？来看滴滴出行的实战案例复盘！
1. 理论表述
任意一点移动到目标中心位置所需要的时间，与目标距离正相关，与目标大小负相关。
2. 研究背景
1954 年，Paul Morris Fitts 根据信息类比提出一个假设，该假设能够量化「移动到目标选择任务」这个操作的难度「1」。虽然该假设还未涉及到人机交互中的具体参数，却给了后来的交互研究人员极大的启发。
我们现在经常看到的 Shannon 公式（即上面那个公式）是由约克大学教授 Scott Mackenzie 在 1992 年提出的一个菲茨公式的变体「2」，该变体被广泛地应用于需要指针操作的人机交互系统当中。作为交互设计和 UI 设计的理论基础，它更简洁明了地阐述了时间 T 和目标距离 D 以及目标大小 W 之间的函数关系：因为以 2 为底的指数函数是递增函数，所以，T 与 D 正相关（D 越大 T 越大），而与 W 负相关（W 越大 T 越小）。
人们做出一个移动指针的操作通常需要两步：
菲茨定律所包含的两点内容：
综合两者来看，菲茨定律中的 D 在第一步中起更为明显的作用，而 W 则主要影响第二步。所以菲茨定律所带给我们的启示，主要也是从这两方面入手。
案例1：系统右键菜单，微信弹出菜单
最典型的例子就是菜单，无论是 PC/Mac 中的右键菜单还是微信聊天页里面的加号键都遵循着这一原则。作为用户，点击这类按钮之后一定会有后续的任务和操作，所以这些任务都被安排在了距离所点击区域更近的菜单中。
案例2：夸克和 Safari 的 url 输入框位置比较
另外一个例子是浏览器的搜索栏输入框，现在已经有一些浏览器（比如简单搜索、夸克）会将输入框以及一些其他更常用操作置于底部，这是因为我们正常握持手机时，大拇指离底部更近，所以需要进行点击操作的话底部的输入框操作起来更方便，也更快。
这一点在现今的 APP 中做得已经非常到位了。
案例3：哈罗出行
作为哈罗单车租用操作的入口，页面中的「开锁」按钮做得足够大，用户可以轻易快速地点击到这个使用频率最大的按钮。登录（也就是开始）按钮也是一样的道理。
还有一个比较特殊的就是对于边角的利用，无论是在 Windows 还是在 MacOS 中，边角总是有一些比较重要的操作，比如 Windows 的「开始菜单」（在左下角），MacOS 的 Dock 栏（在底部）以及顶部状态栏，包括 Mac 特有的触发角。
案例4：MacOS 触发角设置
为什么微软和苹果不约而同地选择了在屏幕最边角放置这些权重相当之高的组件或者操作呢？在硬件设备中边角是一个极其特殊的存在，由于指针再怎么移动都不可能超越屏幕边界，只能停留在边界上，所以边界对于用户的操作来说是「无限可触发」的，这有什么意义呢？这意味着对于隐性存在的目标来说，W 趋于无限大。
既然 W 趋于无限大，根据公式时间 T 就趋于常量 a。
结论就是无论指针距离目标物多远，所需要花费的时间都已经达到了理论的最小值，轻松且高效。而在移动 APP 中同样有边角的应用，比如最近拿了 Google Play 设计大奖的 Drops。
案例5：Drops
创新的交互将屏幕底边充分的利用了起来，只要将单词移到底部，就代表用户已经记住这个单词了。注意整个底部都是可以触发的，而不仅仅是脑袋那个圆形区域。本来「移动」这个操作对于「按钮」来说更加繁琐，但是在 Drop 的应用场景下这样的移动反而没有觉得麻烦，滑起来相当带劲。
菲茨定律给我们的启示通常都是正向的，都是以缩短用户的操作时间为主要目标，但也有一些场景需要反其道而行之。比如如果遇到需要用户谨慎的操作时，可以逆向运用菲茨定律，增加操作的复杂度。
案例6：iPhone 关机和微信删除聊天窗
iPhone 的滑动关机延长了用户关机操作的时间，以提醒用户此操作为不可逆，需要谨慎操作。微信也是同理，甚至还缩小了删除按钮的大小，以达到警示的目的。
另一个典型就是弹出窗口的关闭按钮。
案例7：Luckin Coffee 的弹出窗
弹出窗口里一般都包含了开发商的推广、广告、运营活动等等，所以开发商会希望用户花尽量多的时间去注意到它们的内容，这时候鸡贼的开发商会把关闭按钮做得又小又远（远离视觉中心），让用户花更多的时间去寻找和点击它们，效果拔群。
注意点1：D 不能过分短
过分短的间距不仅无法提升操作效率，反而会造成视觉压力从而降低用户体验。
反面案例1：唯物魔改版
按照菲茨定律魔改的唯物登录页面，理应操作得更迅捷方便，然而实际上除了视觉上造成额外的拥挤感、破坏画面负空间构成之外，我尝试着点了一下觉得十分逼仄挤手，所以过度缩减按钮间的间距并不合理。
注意点2：W 不能过分大
大尺寸的点击目标确实能够有效地降低用户操作成本，但是过分大的目标也会很直接地破坏画面的平衡，浪费屏幕空间。并且按钮的可用性与其尺寸并不是呈线性关系，当按钮已经足够大时，再增大就没有什么体验上的提升了，如下图所示。
反面案例2：KEEP 魔改版
与唯物类似，当按钮大到一定程度之后，会对画面造成恐怖的破坏效果。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
手机及小程序界面设计之一：让设计更有说服力的20条经典原则：菲茨定律
手机及小程序界面设计之六：让设计更有说服力的20条经典原则：菲茨定律
手机及小程序界面设计之八：如何适配iPhone X？来看滴滴出行的实战案例复盘！
现在大多数的 PM /交互/ UI 设计师，在设计产品的时候都是以 iOS 为基准 思考产品上的各种功能逻辑、交互状态，而很容易忽略了某些功能在 Android 里并不能「一稿适应两端」，部分产品差异在安卓上是不一样的。
所以本文就讲下 Android 和 iOS 9大产品/交互差异，希望你在日后的产品设计时，可以考虑到更多层面的知识点。
对在于一些虚拟商品的支付上，如 vip 会员、xx币，xx豆。iOS 和 Android 就存在不同的支付规则：Android 基本无限制，无抽成。而 iOS 限制比较多，而且要抽成大约 30% 的手续费。
举个例子：同样充值 30 元，Android 端会得到 300 金币，而在 iOS 中，只有 210 金币。正因这个抽成规则的不同（没办法，这是苹果硬性规定的），才会出现各种平台的虚拟货币，在 Android 和 iOS 中的充值比例是不一样的，如快手：
所以对于虚拟商品在 iOS 端的抽成规则，在产品设计时一定得考虑清楚，因为这关系产品的商业和盈利模式。通常有 2 种解决思路：
A. 让用户承担 30% 的抽成：
同样的价格，iOS 用户得到的商品少些
如同样充值 30 元，Android 端会得到 300 金币，而在 iOS 中，只有 210 金币。像快抖音、陌陌等各种货币充值。
同样的商品，iOS 用户支付更高的费用
如 3 个月的 vip 会员，Android 端定价是 58 元，iOS 端则可以设为 68 元。如优酷、腾讯视频的 vip 会员价格。
B. 公司自己承担 30% 的抽成：
如 iOS 端充值 30 元，公司实收 21 元，但 iOS 用户能得到和 Android 一样的 300 个金币。（理论上是有这个解决思路，但现实中很少有公司去实现，毕竟抽成成本就摆在那里）
另外还需要注意的是：因为抽成规则的不同，对于同一个 ID 的账户余额，在 Android 和 iOS 端中是不能通用的。因此在产品设计时需要将这点告知用户，预防用户犯错、以及恶意刷币。
Android 由于开源的特性，因此对接的都是第三方支付平台，如微信支付、支付宝、银联卡等。 而 iOS 出于系统的封闭性和安全性考虑，只能调用苹果自己的支付系统：登录 Apple ID ，然后用授权的支付方式（支付宝、银联卡）进行付款。
「状态栏」也就是我们手机界面最顶部的电池栏，它除了可以在不同背景里切换颜色外，在交互的触发上，Android 和 iOS 中也各不相同。
iOS ：用户在 Y 轴滚动了很长内容时，点击状态栏可以快速回到初始位置。
Android ：无论用户滚动了多长内容，都是点击无任何效果。
虽然这一交互差异是 iOS 专有的，但它却启发我们一个新的设计思路：在必要的时候，状态栏可以为产品承载新的交互状态。如网易的 LOFTER（ iOS 端），用户离开音乐播放界面时，状态栏就用于显示音乐信息和操作入口，方便用户在浏览其他内容时可以快速关闭音乐，极大提升了用户的操作效率。
这种大多应用于运营的「拉新」场景，为了能让新用户得到好处（红包、优惠券、更好看的内容等）。通常会让新用户下载产品 APP 领取。而由于 Android 与 iOS 的下载方式不同，会带来不同的交互状态和产品逻辑。
Android ：可以在当前页面（后台）下载，也可以在应用商店下载；过程中可以显示进度，且允许用户暂停下载；下载完成后调起安装页面，用户可以取消安装，也可以自动安装……正因为 Android 下载软件的各种便捷性，所以才会带来各种交互状态：未下载、下载中、暂停中、已下载但未安装、已安装。这些都是交互设计师需要特别注意的，每个不同的状态背后都会不同的产品逻辑。
iOS ：只能跳转到 App Store 里下载，所有下载流程和状态都是在那完成的，可以脱离开活动页面，相比于 Android 的下载方式就简单很多。跳转的方式可以是全屏幕，也可以是半屏。
Android ：由于安卓的开源特性，当有新版本时都会提示用户更新，且每个产品内部都带有「版本更新」入口。而更新的方式可分 2 种：
iOS ：而 iOS 端出于对用户体验的考虑，是禁止向用户提示版本更新信息的。这也是为什么绝大部分的 iOS 产品，都是没有「版本更新」入口的原因（像 QQ 、支付宝、百度网盘等大厂产品）。
即使有，点击了也直接跳转到 App Store 查看版本情况。且下载渠道都固定在 App Store 里。理所应当的，软件的更新方式也只能在 App Store 里进行，无法做到与 Android 一样后台下载、后台更新。
在手机键盘里输入文字时，iOS 由于系统的限制，对文字的发送指令只能在键盘上来完成，因此 iOS 用户的交互操作都全部集中在键盘右下角。
而 Android 端就灵活很多，不仅可以在键盘上执行发送指令，也可以在输入栏/搜索栏周边新增操作入口。
长按一张图片后，都会弹出一个列表浮层，因为 iOS 手机只有一个「Home 键」 而已，为方便用户退出浮层才增加了「取消」入口。
而 Android 手机本来就有「返回」虚拟键，安卓用户的退出/返回行为都习惯于通过虚拟键触发，所以多做一个「取消」的意义性不大。
iOS 端一直教育着用户使用「左滑」删除列表信息，所有的删除功能都是支持「左滑」来实现的。
而 Android 系统大部分只能通过「长按」来触发编辑状态，其中就包括了删除功能。
不过现在也有极少数的产品，正在逐渐打破这两端间的「删减」界限，比如网易邮箱（Android）就做到了左滑删除信息。
当我们第一次打开产品、允许了获取消息通知的权限后，所有的信息传输都会基于服务器进行推送。而两端在这块的推送机制又有所不同：
iOS ：所有新信息都会实时推送到你的手机里，即使你关闭了软件，还是一样会收到提示。就算是你处于断网状态，信息也会先储存于苹果服务器，等你联网时再一次性把收到的信息推送给你。既释放手机内存，又不会让用户遗漏有新消息。
Android ：而安卓则不同，你若退出了产品，数据的推送只有等你再次打开产品时，才会通知你有多少新信息。虽然减少了对用户的干扰性，但也增加了服务器数据储存的压力，还容易耽误用户接收新消息。
也就是我们手机的搜狗输入法键盘，在微信聊天内、手机短信里复制了一段内容后，由于 Android 与 iOS 的平台特性差异，会给两端用户带来不同的交互差异。
iOS ：复制完文字后，打开输入法键盘会显示来自剪切板的文字内容。用户只需点击，即可将文字复制在搜索栏、输入栏等需要文字填写的操作区域里，无需触发「粘贴」操作。
Android ：而有些安卓机（如小米/锤子/乐视等)，无论你复制了什么信息（文字、数字、网址等），都很难实现输入法里的「剪切板」功能。用户需要触发「粘贴」功能，才能输入刚刚的复制内容。
而对于特定的信息类型：如网址。用户复制网址往往都带有极强的目标性、搜索性，一些浏览器产品会预判用户这一操作行为，将复制的网址前置展示出来，以抵消 Android 端对于复制文字带来的系统限制。如 QQ 浏览器（安卓端）就有 2 种解法方法：
方法1：利用安卓系统的消息权限，在手机界面的顶部弹出网址栏提示，无论是在微信还是短信中，复制网址后都能快速地触达目标。
方法2：复制网址后打开搜索功能，会将网址自动定位并粘贴到搜索栏中，便于用户查询。
而 UC 和百度也有类似的解决办法：将复制后的广泛信息（文字/数字/网址/邮箱地址等等）嵌入在搜索框下方，用户点击就能搜索。
这也是一种妥当的解决方法，因为用户可复制的信息类型特别广泛、目标不是很清晰。无法准确判断出用户一定会有搜索诉求。所以才将复制后的信息放在搜索框下面，而不是自动粘贴到搜索框中，既考虑了用户目标，又兼顾了操作效率。
以上就是 Android 与 iOS 的差异总结，若有描述得不当请多指教！下面是总结文件。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
手机及小程序界面设计之一：让设计更有说服力的20条经典原则：菲茨定律
手机及小程序界面设计之六：让设计更有说服力的20条经典原则：菲茨定律
手机及小程序界面设计之八：如何适配iPhone X？来看滴滴出行的实战案例复盘！
@布莱恩臣 ：iPhone X 在 2017 年上市以来，全面屏手机就开始逐渐普及。iPhone 8 的 4.7 寸屏幕到目前最新机型 iPhone 11 的 6.1 寸屏幕，以及 Pro Max 系列的 6.5 寸，各种各样的刘海屏、水滴屏、挖孔屏、折叠屏等等屏幕方式随之出现，物理 Home 键都被舍弃改成虚拟按键，甚至是没有虚拟按键的手势滑动操作。
而这些手机都有一个共同的特点，就是屏幕尺寸越来越大。屏幕尺寸变大后，手握手机的方式和界面交互操作方式也随之改变，那对于设计而言，是否也应该随之进行改变呢？
想单手点击屏幕的操作，需要手足够灵活进行一轮操作才能够到屏幕上方，过程中稍有不慎，手机随时会砸地上。作者的手机屏幕已经修了几次，差不多赶上一台二手机的价格了。
在 2013 年，国外设计师 Steven Hoober 发表了一篇《手机界面设计》的研究报告中，对一千三百名手机使用者进行量化研究数据：
据当时研究的数据可以看出，有近半的用户是单手使用手机（现在肯定不止）。当用户单手操作的时候，实际拇指可以触摸到的区域是如下图这样的。绿色区域是拇指的正常操作区域，黄色区域是拇指能触碰到的最大限度范围，红色区域是触摸比较困难的区域。
然而这份研究报告的数据是在 2013 年发布，当时还没有全面屏的出现，如果把上面研究结论的区域，套用到如今的手机屏幕尺寸上，顶部的红色区域会占更大比例。以 iPhone 11 尺寸比例作为参考，如下图：
拇指可操作范围大约在 3 分之 2 的区域，可见想要触碰到红色区域是有一定难度的。也正是因为这份报告只适合当时的手机市场情况，在当今已经不适用了，因此需要重新去考虑如何为大屏幕手机进行界面设计。
根据 2020 年手机UX设计趋势，大屏幕设计将会成为热点。根据数据报告中有说明，2018 年 10 月使用大屏手机的用户比例是16.3%，到 2019 年 12 月，该数据已经上升到 41%，并且会在未来更多新机型的出现中持续上涨。
那随着大屏幕手机的普及，就意味着设计师在设计界面的时候，要为大屏幕手机的使用场景进行界面调整，避免用户难以使用的体验问题。以下是我整理的一些设计建议方案：
1. 头部区域设计更高
通过将标题栏的信息区域放大，尽量把主要操作内容向拇指区域靠近。
2. 常用导航与操作居于底部
比起导航栏放在顶部，更适合大屏幕手机的方式是将导航和重要操作尽量往屏幕底部放置。
3. 手势操作页面切换与返回
抖音和 Instagram story 等短视频应用界面都是通过手势滑动屏幕的方式，对页面进行切换，操作的学习成本很低，而且主要操作也在屏幕底部。这种操作方式也会在今年越来越多地被使用。
4. 提示弹窗从底部升起
常用的弹窗，很多是设计在屏幕中间弹出，为了适配大屏幕，不妨尝试从底部弹出，关键选项都能轻松选择，提高转化率。
5. 使用大卡片
屏幕尺寸变大以后，使用整张大卡片可以让用户浏览内容更专注，大面积的配图和留白，也能提高用户的点击欲望。
除此以外，作为手机厂商，在发布大屏幕手机的时候，就有对界面操作做了一些对应系统级的设计调整，比如界面下拉悬停，键盘单手模式，屏幕边缘滑动返回等等。
大屏幕尺寸已经是趋势，屏幕大意味着内容可以更大限度地得到展示，有利于产品提供更多的服务，不再纠结首屏无法展示完主要内容。在这个信息爆炸的时代，用户也不再满足于小屏幕的浏览方式。可以说，大屏幕已经是无法改变的趋势。与其担心问题到来，设计师更应该思考如何去适应产品的快速迭代，不断更新自己的设计思维模型，更全面思考问题，产出更合理、体验更好的设计方案。
希望本文内容可以对你有所启发。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
手机及小程序界面设计之一：让设计更有说服力的20条经典原则：菲茨定律
手机及小程序界面设计之六：让设计更有说服力的20条经典原则：菲茨定律
手机及小程序界面设计之八：如何适配iPhone X？来看滴滴出行的实战案例复盘！
蓝蓝设计的小编 http://www.lanlanwork.com
