滴滴出行在 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？来看滴滴出行的实战案例复盘！
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 魔改版
与唯物类似，当按钮大到一定程度之后，会对画面造成恐怖的破坏效果。
参考资料
