对于刚开始思考 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 魔改版
与唯物类似，当按钮大到一定程度之后，会对画面造成恐怖的破坏效果。
参考资料
