沉浸式体验是让人专注在当前的目标，全身心投入并感到愉悦和满足，从而忽略时间的流逝。应用到界面上则是更强调聚焦内容，减少不必要的打扰。本次研究与实践针对视频场景中视频所呈现的画面，通过精细化的设计，在多样化的手机屏幕中呈现时，能够带给用户更为沉浸的视频观看体验。
视频播放器中视频画面当然是最主要的内容，以此作为突破点进行思考：
· 最大化画面视野：通过改变视频画面本身的大小，减少页面“留白”，让用户更聚焦视频画面，观看视频时更专注。
· 最佳视线观看位置：将不同高度的视频按照页面结构去布局视频画面，通过画面避让状态栏、顶底bar结构的方式，使画面更加整洁，减少
元素混乱带来的干扰，同时整体位置偏上展示，视线落点更加舒适。
· 观看体验连续性：视频浏览过程中，非必要不打断视频浏览，在进行如查看评论、临时退出播放器等行为时，保证视频播放的连贯性，方
便用户多操作。
01.视频画面裁剪
随着时代的发展，为提升消费者对手机的操作体验，智能手机逐渐多元化，手机屏幕尺寸迭代更快、更加丰富多样。手机作为视频很重要的生产端，手机屏幕尺寸的多样化影响到产出视频尺寸的多样化，同时用户可通过视频编辑工具任意编辑视频尺寸，最终生产的视频尺寸比例自由度非常高。据不完全统计视频平台中视频尺寸达22万多种，用户使用机型近300种，在视频尺寸多样性及视频展现媒介多样性的现状下需要兼容性更强的裁剪及展现规则才能带给用户更好的观看体验。
我们要做的就是将不可控的视频资源和不可控的浏览视频设备设计为可控的视觉展示效果，并最大化视频画面。减少环境干扰，给用户带来沉浸式感官体验。
视频宽撑满手机屏宽后，将视频尺寸分为四类：
1) 视频高度>手机屏高
视频画面宽度撑满屏幕后，视频整体居中于屏幕，居中裁剪视频多余画面。
注：不允许画面高度撑满屏幕，宽度自适应导致画面左右留黑效果。
2) 视频高度=手机屏高
视频居中于屏幕，刚好填满屏幕，不需要裁剪处理。
3) 1:1<视频高度<手机屏高
此类尺寸较复杂、难处理，于是将限制裁剪面积和展示位置相结合，保证裁剪面积和位置可控。结合视频平台资源尺寸和业务目标来确认理想展示效果，反推定义最大裁剪面积，根据显示位置多次判断视频放大后是否符合既定裁剪面积，最终确定当前视频的显示方式。同时支持根据不同视频业务进行个性化定制，并且将裁剪面积云控处理，根据业务内不同时期的诉求限制比例来灵活调整展示效果，双端也可分端定义数值；横向协同及迭代成本极低，便于快速上线验证效果。
4) 横版视频（高宽比≤1:1）
横版视频在手机屏幕中面积占比较小，画面可识别度和饱满度稍有欠缺，轻微扩大画面视野，画面浏览更加清晰有冲击力。以不影响内容理解为前提，根据自身平台视频尺寸占比及视频内容特点规定固定比例或比例范围适度放大。
锦上添花，引入文字内容识别
为避免因裁剪规则而裁剪到视频关键文字对视频内容获取有障碍的问题，发挥百度强大的AI技术优势，引入文字识别技术及视觉展现规则，进一步提升视频展现样式的可控性，同时能够通过尽量少损失画面达到画面放大的效果，平衡画面沉浸感和完整性的关系。
左右文字被裁剪情况：文字左右设置安全距离，保证安全距离在屏幕内。如果安全区超出屏幕，则按照上方描述的裁剪规则进行退档显示（满屏至不裁剪之间的档位），直至文字不被裁剪。极端情况退档至最后一档，视频画面不裁剪。
横版资源文字左右被裁剪情况：按照固定尺寸退档
上下文字被裁剪情况：文字上下设置安全距离，保证安全距离在屏幕内。如果安全区超出屏幕，则按照上方裁剪规则进行满屏至不裁剪之间的档位进行退档显示，此情况只会从全屏一档显示退至二档显示。
裁剪面积、展示比例、文字安全距离等数据都通过云控的方式下发，灵活配置到不同业务中，保证裁剪规则一致的同时又能针对不同业务进行定制展现，也可快速调整并支持上线实验，来验证适合自己产品的展示效果。
02.智能满屏
通过裁剪方式放大画面视野之外，还通过让用户自主交互操作再次放大画面视野，调整到自己喜欢的观看视频的方式。相较于上方默认裁剪放大，满屏方式更加激进极致，画面放大更多。开启方式通过面板功能按钮开启智能满屏外，增加便捷交互开启手势，用户可双指放大快速开启。
由于满屏是用户主动操作放大行为，可以接受文字内容被裁剪，但也需要有节制的放大，避免带来画面裁剪过多视觉体验不佳的问题。为了保证95%以上资源撑满全屏，达到放大画面视野极致体验。同时最大画面裁剪面积不超过一定比例（根据自身业务视频资源判断），将视频资源细分为3类进行不同效果处理：
1.可继续放大至满屏的视频，则进行满屏展现。
2.不可继续放大的视频，如果继续放大会导致裁剪画面过多影响观看完整度与观看体验，则保持上方提到的裁剪规则，不做另外处理。
3.横版视频统一放大至固定尺寸，可根据自身业务资源进行放大尺寸的定义。
通过布局合理、舒适的画面位置，也能提升浏览过程中用户体验的沉浸感。人的视觉中心一般会在物理中心的偏上方，于是在设计中我们将视频画面放在屏幕偏上的位置，用户视线落点更加舒适，一般是用户在浏览页面时最先注意到的地方。同时视频在页面偏上的位置，能减少下方标题等信息过多对视频画面的遮挡。
为了精细化处理不同比例的视频资源，竖版视频和横版视频根据页面效果分别定义了最佳观看展示位置。
竖版视频：高于1:1的视频，按照页面结构布局视频画面，避让状态栏、顶底bar操作，避免与页面结构冲突带来画面凌乱不美观的问题，同时能减少画面参差带来的干扰，增加沉浸浏览感受。
横版视频：等于矮于1:1的视频，画面按照屏幕高度比例展示在偏上的区域，高度比例可云控便于灵活调整。
01.视窗挤压
为了满足用户在视频场景多角度信息获取，在不打断用户视频浏览的基础上建设视窗挤压交互体验，提升观看视频的相对沉浸感。在视频场景观看评论时会弹起半屏面板，遮挡住视频内容，导致用户无法在浏览评论的同时观看视频内容。对短视频重度用户来说，对同时看评论和看视频习惯的用户有挑战。通过视窗上移动挤压功能，在浏览面板内容时不对视频内容打断，弱化面板内容给用户带来的影响。
视窗高度固定，画面宽高比越小画面内容越小，观看体验不友好，所以竖版视频对压缩后的显示尺寸进行干预，定义最小视频画面展示比例，尽量扩大画面视野，保证观看视频的舒适度。
02.悬浮小窗
在不打断用户视频浏览的基础上还建设了悬浮小窗交互体验，旨在为用户提供完善优质的视频消费体验。用户进行其它操作时仍保留视频后台播放，同时也能在屏幕角落观看到缩略图大小的视频播放窗口，可以从任何页面中观看视频，我们同时也保留了部分视频基础操作。观看体验连续性让用户对视频有绝对的主控感，提升用户使用体验的满意度。
沉浸式体验设计是帮助用户减少画面干扰，让用户专注于当前的视频浏览，忽略时间的流逝进入心流状态。我们通过放大画面视野，增强画面冲击力的方式减少干扰，并解决在视频画面尺寸、手机屏幕分辨率极多的复杂情况下，保证画面效果的稳定和可控，并且不会受阻于未来手机机型的扩充发展，普适性极强。同时通过视窗挤压、悬浮小窗的交互体验专注于当前的视频浏览不被打断，进一步提升视频看播沉浸式体验。后续我们将不断探索视频场景沉浸度提升方式，为用户带来更加舒适的观看使用体验。
作者：百度MEUX
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
● 京东金融 App 首页三大改版
3.x 版本到马上上线的 4.x 版本，公司的战略方向以及产品运营方向都在不断的变化（有接触过京东金融 App 的人都知道视觉变化很大）。作为公司的移动端产品，既要满足用户体验和需求，又要满足内部业务的扩展。所以我们要不断优化各种布局和细节，把用户体验和内部需求做到最好。
3.X 版本是我接首页优化的第一个版本。改版期间我们经历了很多，除了本身业务以外，更重要的是我们发现之前首页有很多问题。其实优化产品最基本的方法就是发现了一些问题，然后去解决这些问题。问题可能是产品问题、业务需求扩展、运营需求满足，最后才是体验和视觉。这些问题能得到解决产品就能得到优化。
以账户为中心是当时产品的主要方向，整体都在强调财富管理。所以之前的界面在账户为主和业务扩展上都存在很大问题，一是业务拓展存在局限性，二是账户感不强。
经过一大堆方案和设计图的轰炸，最终确定了大的方向，突出理财金额和业务和信贷业务。把一些数字突出放大，让用户打开产品既能看到自己想看到的东西。账户感的体现我们把数字和一些文字说明当成首屏最主要的东西，少一些运营，少一些 banner 。就像是在银行打出的纸质账户信息，上面很少会出现广告。
▲ 还是之前的方法，经过上线一段的时间去发现问题。随着业务和功能的增多，原来的布局已支撑不了公司方向的支持这是之一。之前的视觉也有一些缺陷，进入 App 整体看上去没有重点的，纯白色很干净但是也没有能跳出来吸引眼球的东西，也不能把重要业务区别与其他业务。
这次增加了一些产品本身频次的功能，如扫一扫、签到、每天领券等。还有怎么样能突出重点业务的展示，让用户在视觉局部上有所重点。业务的扩展性通过左右横滑来实现。
▲ 怎么样能把多量的业务，重新布局到有限的界面里，而且不能降低用户的使用体验，是我们这一版要解决的问题。就是化繁为简。
这次我们把业务场景划分成「赚钱」「花钱」「借钱」，相对应是「理财」「白条购物」「现金借贷」。使用三个Tab 签和最简单的布局方式来排版。用户理解相对也会变的容易，界面整体看起来也简单明了。
首页的改版看似简单，其实背后有很多的付出。不断的优化讨论、不断的视觉方案，我们不断在寻找新的突破，希望能让各个方面都达到最大效能。
● 理财日历
「理财日历」是整合用户关于所有金融业务的，按照时间线索智能提醒和自动完成的一款产品。
· 产品目标：帮助用户记录金融事件和跟钱相关的事件，例如理财到期、白条还款事件、生活缴费事件等等。一条 时间线可以把用户所有的事件联系起来的。让用户把时间用在更重要的事情上。
· 产品关键性词语：时间、自动记录、提醒、设置自动完成
当我们进入 App 时，需要进行很多不同的操作，进入到不同的业务线页面才能完成我想要做的事情。这时整合业务聚合内容就变的很重要。需要有一个平台把跟用户强相关的金融事项和其他事项整合，这样就不用花费很多时间来处理各种事件。
日历是一个强时间线的用户固有思想形态，我们需要把除了基础的时间、记录事件和日常提醒功能做好外，还要让用户习惯这里面有跟我理财相关的事项。针对使用产品用户的特征，在视觉布局上不能难以接受，日历主要的时间、每天事项、后续事项查询和增加事项都要合理排布。
为了增加日历的整体氛围，除了时间的排布，我们为每一个月和每一个节气增加了插画。每一条信息的分类都用 icon 表示，突出强弱，增加氛围。
日历添加事项和设置页面，以进度的感觉让用户去更好的完成事项的设置。推荐事项也是用户最常用的、最容易跟时间所对应的事项。
日历的分享模块是很重要的一个细节，我们希望它能更好的去传达这是一款有温度的产品。它也是对外发声的一个利器。
怎么样才能激发用户分享的欲望呢，用户打开界面的分享动机是什么？我们知道用户分享有几点：有用的、有趣的、相互比较、用户认同等等。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：程大专 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
Hi，我是彩云。咱们平时在做 UI 组件库的时候，会遇到一个问题，定义了很多颜色但在团队合作的时候，却依然还是会根据每个设计师自己的喜好来配色，很难将颜色规范很好的统一起来。这其中有一个很严重的问题就是对于颜色的命名和管理不够清晰，那么今天这篇文章通过一个国外大厂真实的颜色组件升级案例，希望能帮你解决这个难题。
我们花了几个月的时间改进了设计系统 Cobalt 中颜色的处理方式。颜色是 UI 的基本元素：它们构成视觉语言，帮助定义品牌，并被开发和设计师每天用在产品设计中。
但如果我们在使用颜色上没有明确的指导原则，颜色被团队中的设计师按喜好使用时，将会导致产品看起来非常混乱。
我们 APP 中的不一致例子
接下来我会告诉你，我们是如何做好颜色规范以及在整个项目中面临的挑战，正如你将看到的，这个项目并不像看上去那么简单：
1. 在设计方面
和许多设计团队一样，我们使用 Figma 作为我们的主要设计工具。我们的颜色被放在“基础”库中，可以在其中找到我们在产品中使用的所有常见样式，例如字体样式、颜色、图标等。这个库提供了我们每天使用的专用系统库（iOS、Android、Web、电子邮件）。
颜色名称过去是基于它们的外观。例如：紫色颜色是我们的主要颜色，而石墨色是基本文本的常规颜色。
2. 在技术方面
在我们的 APP 中，曾经会用相同的系统来管理颜色。此外，还有一些语义颜色，但仅限于 iOS，开发用的也不多。
在使用这个系统时，团队反复面临同样的问题：
让我们试着找出我们是如何陷入这种境地的？
1）没有明确的颜色使用规范
所有设计师都使用相同的色板，但自 2019 年 Getaround 品牌重塑以来，除了引入不一致之外，没有明确关于如何使用它们的规范，所以设计师在选择颜色时迷失了方向。
然后他们将开始建立自己的参考资料，每个设计师都有不同的配色想法。
例如：设计师应该在所有这些灰色阴影中为次级文本选择哪种灰色？颜色命名在这里不是很有帮助
2）旧品牌的设计包袱
以前品牌的一些旧颜色仍在使用（按钮上的蓝色阴影，标题……）。到现在也没有真正的行动计划来迭代它们。
旧驱动器品牌
在 2021 年初，我们有机会为我们的 iOS 和 Android APP 来制定长期的 UI 规划。
我们问自己“5 年后我们的 APP 会是什么样的？”。我们会回顾，Getaround 品牌是如何成为我们视觉方法中心的。
以上是我们品牌和设计团队在 2020 年完成的全面工作的一小部分
致力于设计系统的 Cobalt 团队借此机会重新考虑了颜色系统。然而，为了使这一目标成为现实，我们面临着一些挑战：
1）制定指导原则
我们如何确保每个设计师都可以依赖易于理解和使用色彩系统？拥有一个简单系统将加快使用速度。
2）颜色能通过可用性标准
我们如何确保从一开始就设计出易于使用的颜色？
3）易于维护并符合未来趋势
我们如何才能使系统易于维护并符合现在和未来的行业标准（例如：暗模式）
在我们的探索阶段，在 Figma 的共享环境中工作促使我们保存和记录我们所做的设计决策。就像我们应该如何命名我们的强调色：（主要？强调？）
我们还测试了 APP 界面在黑暗模式下的外观，以及如何正确支持这一点。我们应该创建一个单独的调色板还是为每个组件都创建一个深色版本？我们开始与开发讨论这个问题，以了解他们有什么解决方案来处理这些问题。
语义颜色的概念很快就被开发人员提出来，因为他们知道并且很好地使用了这个概念。但对于设计师来说，又要如何准确理解呢？
1）什么是语义颜色？
语义指的是根据颜色的使用方式而不是色调来命名颜色的方法。
例如，你可以将颜色命名为“成功”或“积极”，因为它指的是含义，而不是“绿色”或“翡翠绿”。
甚至可以根据颜色在屏幕上的应用方式来命名颜色，例如背景颜色、按钮背景颜色、文本颜色、图标颜色等……
2）从基于外观的配色方案到基于语义的配色方案
语义颜色并不新鲜，越来越多的产品开始采用这种方式来定义颜色。我们可以从下面一些大厂的颜色规范来学习
google： https://material.io/design/color/the-color-system.html#color-theme-creation
Apple： https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color
Shopify： https://polaris.shopify.com/design/colors#navigation
Asana： https://asana.com/brand
显然，这种颜色系统有很多优点。因此，现在让我解释一下我们如何在实践中将这个概念应用到我们的产品中。
3）深入研究语义颜色
我们的新颜色系统由两部分组成：
基础调色板
我们与品牌团队密切合作，他们定义了一个全新的品牌，我们在工作时会围绕这个品牌考虑。
该品牌的每种颜色都采用多种色调进行调整，以创造更大的灵活性，一次构建成为基础调色板。它代表可以在产品中显示的所有可能颜色。团队可能不会全部使用它们，但他们会选择在产品中效果最好的那些。
基础调色板
语义颜色，语义颜色建立在用作参考的基础调色板之上。正如我之前解释的，命名不再是指颜色的“外观”（洋红色、棕色、绿色……），而是指UI 元素它们被应用于（文本、图标、按钮、背景……）以及该元素的状态（活动、非活动、成功……）。
请参阅此处的命名法和一些示例：
语义颜色结构和示例
这意味着来自基础调色板的颜色可以用于多种语义颜色：
这就是我们根据这个新原则重新调整颜色命名的方式：
我们通过设计师和开发进行了内部用户测试，以确定命名语义颜色的最佳方式。
我们尝试了很多不同的命名方法，发现过于详细的命名系统对于我们的团队和产品的规模来说维护和使用太复杂了。我们决定做一些简单的维护，同时在命名方面有足够的延展性。
1）语义色彩嵌入设计原则
语义颜色侧重于颜色的用途。它消除了设计师和开发对使用什么颜色的盲目猜测，因为视觉语言直接传达了设计决策。
例如：在这里，颜色命名使设计师更容易做出正确的选择。在我们的原则中， *Accent* state 用于交互元素。
2）解锁黑暗模式
语义颜色可以适应不同的主题。语义颜色的名称始终相同，但它的外观可能会根据所选模式而改变。例如，语义颜色“主背景”可以指浅模式下的“白色”和深色模式下的“黑色 500”。根据用户选择的模式，将自动显示正确的颜色。这对我们的设计系统来说是一个真正的游戏规则改变者，因为它将使它更加面向未来。
明暗模式下的语义颜色 Primary.Background
3）语义颜色高效灵活
如果我们将来要更新颜色，使用语义颜色也会变得更容易。假设我们想要将我们的主色更改为蓝色。我们只需要将基础调色板中的“紫色”更新为“蓝色”。与该颜色相关的所有语义颜色也将神奇地更新。
另一种情况可能是更新特定 UI 元素的颜色，例如按钮，而无需触摸使用紫色颜色的其他元素。在这种情况下，我们只需要更新 ButtonBackground.Primary 颜色，非常简单。
如果没有该系统，更新颜色将需要经过大量 QA 以确保将更改应用到任何地方。
4）颜色组合指南
这个系统似乎很容易使用，但设计师仍然有一些问题：
为了帮助设计师选择颜色，我们创建了一个交互式指南，列出了所有可能的颜色组合。
我们在 figma 原型中创建了这个指导原则，每次更改设计系统颜色时都会更新该规范。它突出了允许的语义颜色组合，以最大限度地保持一致性。
Figma 中内置的语义色彩交互指南
采用这种新的颜色系统产生了一些变化：
1）我们从“Foundation”库中提取颜色，并将它们分为深色和浅色模式。这一举措使我们能够使用 Figma 开关功能轻松地将设计文件从 Light 切换到 Dark 模式。这也使库更轻且更易于维护。
2）语义颜色已在我们的 iOS 和 Android 应用程序上成功实现，我们现在正在努力在我们网络平台上使用相同的系统。我们很快就会有一个集中的配色方案来处理所有系统上的颜色。
总结下今天学到的内容：
1）发现并准确描述团队在使用颜色时遇到的问题
2）如何从提出设想，到以新的方式来定义颜色
3）如何通过语义化颜色来使得大家更方便的使用颜色，我们也可以在自己的组件库中多使用语义化的颜色来进行命名管理，这样团队协作才会更加高效。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
快速迭代的产品存在着同质化趋向，如何做出差异性？如何将品牌精神向外传达？如何在有限的时间内，满足产品需求的同时带给用户更好的
体验感，进而体现设计的价值呢？静态画面动起来或许是个不错的选择！
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
Hi，我是彩云。界面是用户在与任何产品、APP 或平台交互时看到的内容，用户体验就是建立在坚实的界面设计基础之上的。所以，如果你想要在 UI 设计上提升能力，应该多去思考界面设计背后的原因。
今天会跟大家分享一些被广泛运用的界面设计规则，它们能快速使得你的界面设计更干净、高效。
用更容易让用户理解（说人话）的引导文案，提升使用体验。
（彩云注：下面 2 个案例中，左侧的“购物车”和“库存 2”太过于术语化，右侧的“仅剩 2”和“加入购物车”更加贴近用户的日常理解。大家平时工作的时候，也一定要注意界面中的文案，尤其是说明文字，控件文字等等，这个点经常容易被忽略。）
良好的对齐方式，可以增强内容的可读性，让用户的视线更容易扫描。
（彩云注：左侧的“之”字形视动线比较难阅读，且不够专业；右侧的垂直对齐增强了可读性，也让设计看起来更加统一，能够快速的提升设计细节。）
使用图标、动画作为标签，有助于更轻松地理解内容，它使界面看起来更加理性和丰富，能瞬间抓住用户的眼球。
（彩云注：左侧的导航相较于右边，很难第一时间准确识别它的意思，增加图标后不仅更快看清，视觉上也更加美观。）
大段的长句会让内容变得难以阅读。为了获得好的体验和 UI，应该注意拆分内容，并使用项目符号突出关键点，利用拆分好的内容块让用户更快抓住重点。特别是在“功能说明和条款条件”或任何声明时，提炼要点有助于提升用户体验，这样也不至于让用户直接忽略。
（彩云注：左侧的大段文字我想应该没多少人会去阅读，右边的至少还能在短时间内快速看看几个关键词。）
进度条帮助用户追踪流程，它也能使查看上下步骤更加容易。线上购物，表单填写，申请流程等场景使用这种格式能很好的简化流程。
（彩云注：左边的表单 UI 不方便跟踪进度和流程，右边的表单把进度放在顶部能帮助用户清楚的知道流程进度。）
错误提示一定要明确，易于理解，方便用户进行下一步的操作。如果用户不理解界面上出现的错误，用户就会感到很失望，可能会放弃接下来的流程。在 UI 设计时，在正确的地方用通俗的语言说明问题，以避免歧义，这一点非常重要。
（彩云注：我常常遇到各种出错，但出现的提示太过于术语化，也没有提示在正确的地方让我非常苦恼。）
从菲茨定律（Fitt’s Law）中我们应该知道，目标区域的距离和外观与所采取的行动成正比。因此，为了将注意力集中在转化按钮上，按钮应该准确放置在合理位置上。此外，按钮的大小应该易于点击，避免用户因尝试点击时不方便而流失。
（彩云注：左侧的按钮不在正确的决策位置以及按钮太小，右侧的按钮简洁明了并且符合用户的心理预期，能够让用户更快决策并点击。）
颜色是 UI 中不可缺少的部分，它能影响用户使用应用时的情绪。正确地使用颜色将使 UI 看起来更加丰富合理。
（彩云注：左侧的蓝色按钮颜色并不符合用户对于删除的心理预期，右侧的红色按钮对用户的心理预期有危险和警告，用红色代表删除能够让用户集中注意力关注这一特殊的操作。）
用单列展示内容，能更好地帮助用户扫描。当你的应用和网站上要展示大量信息时，将所有信息垂直对齐时，能更好的保持用户关注度。
当用户准备登录或注册你平台的时候，把所有可用的社交媒体登录尽量放在首位。这将避免用户填写表格时付出额外的认知负担和时间消耗而流失。首先使用社交媒体账号，能很好地增加点击率。
在用户做选择的时候，需要清晰地告诉用户选中的到底是哪一个选项。模棱两可的颜色会增加用户的认知负担。更少的颜色和清晰的选中状态能让用户获得更好的体验。
（彩云注：左侧的问题在于选中状态不清晰且选项的颜色过于丰富，右侧的选中状态清晰且选项颜色只有 2 种，选中和非选中，体验会更好。）
如果想给信息分组，使用留白是最好的方式。加条线作为分组符号会在界面中增加了一个额外元素，空白能让 UI 看起来更加干净和优雅。用线分组的情况适用于类似 Twitter、Medium 之类的重内容平台等场景。
保持设计的一致性，能够降低功能复杂度并让用户更快决策，一致性设计让用户更快熟悉操作而不需要太多思考。（彩云注：左侧的选项圆角不一致，会让用户思考为什么这里会有不同，而右侧的一致性选项设计，能让用户忽略内容外的干扰。）
在搜索输入栏添加适当的占位符，提示用户可以在平台上搜索和找到的内容，这样可以提供用户参考并带来更好的用户体验。
以上这些就是在设计数字产品体验时应该遵循的 14 个基本规则，这些点虽然基础，但却经常被人忽略。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
编者按：其实网页或者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？来看滴滴出行的实战案例复盘！
蓝蓝设计的小编 http://www.lanlanwork.com