Bsport体育Bsport体育很多新人在开始做 UI 设计的时候，都是凭借自己的感觉和经验去绘制界面，心里并没有一个清晰的概念，导致做出来的页面总是不那么尽如人意，有时甚至需要反复修改，十分消耗精力。

　　这就说明他们缺乏 UI 设计师的一项基础能力：规范能力。为了避免重复造轮子，反复掉入同样的陷阱，阅读并熟知主流平台的设计规范，是非常有帮助的。

　　本文整理汇总了设计师常用的一些 UI 尺寸规范和方法大全以及 UI 设计语言和原则，如控件间距、适配、标注、切图等，设计师在设计时并不一定要严格遵守，但对这些规范应有所了解，并融会贯通。

　　注：本文部分干货知识点来源于知群全链路设计师系列课程-UI 设计部分，文末有试听课程彩蛋~

　　首先，Android 平台、iOS 平台的设计规范并非 UI 设计设计规范的全部，它是一个更广的概念范畴。一个公司，甚至一个团队都可以制定自己的设计规范。

　　视觉设计规范是指对设计的具体技术要求，是设计工作的规则。包含了目标、功能、技术指标，以及限制条件等。

　　视觉设计规范要确定⼀般可用性原则和审美常识下的避免犯错的方法，以及一旦出现错误后的补救方案。规范的第一个目的是减少设计过程中出错的次数ｕｉ设计，针对新手设计师、第三方团队，可以很好地做到经验传递，迅速了解上手。减少标注时间，提高前端开发质量。

　　获得该设计规范针对范围内的关键点，包括设计方向和设计元素，以通过项目设计的过程，达到团队成员的更加密切的配合效果。促进多人协作，解决视觉不统⼀现象。

　　塑造形象以及应用的规范。主要包含了标识的标准制图，配色字体等。以及常用的搭配方式。⼀个企业或者⼀个产品，都有相应的品牌视觉识别系统（VIS）。品牌视觉识别系统是视觉设计最好的参考基础，既然是⼀种指导体系或者说是参考，那么也相应地会有品牌的规范。

　　平台理念、遵循规范的好处、某种应用的生态。比如 Google 和 Apple 制定的规范。针对第三方的规范，主要旨在让这些第三方的设计更兼容平台应用。通常制定了大的方向和规则。并且会提供很多基础的设计元素和插件。

　　：侧重在产品设计和实现层，内容清晰并且实用，标注详尽，方便设计师们使用。更注重个性化的部分。

　　Material Design 规范在于统一 Google 多种平台下的一致性，代表 Google 全新的体验。 包含丰富的色彩、空间的层次、流畅的动效、多样的组件。

　　谷歌的想法是让谷歌平台上的开发者掌握这个新框架，从而让所有应用就有统一的外观，就像是苹果向开发者提出的设计原则一样。

　　Material Design 是基于三维空间的设计语言。 包含光线、材质、阴影。在 Material 环境中，虚拟灯光照射整个场景。

　　Material 有自身固定不变的外在特征和内在行为逻辑 ，理解这些固有的属性有助于实际的设计项目。

　　Material 借鉴了现实物理世界中的物质特性，并将其运用在虚拟三维空间中的 Material 元素上， 有利于帮助用户理解信息层级，同时可以统一各应用之间的体验。

　　投影提供了元素深度和运动方向的重要视觉线索；在运动中，投影提供了元素移动方向及高度变化。

　　在整个 iOS 系统中，每一种尺寸下的文本信息都应该是易读的，图标应该是精确易懂的，每一个装饰应该是精巧适当的，而且更加需要注重功能驱动设计的原则。利用留白、色彩、字体、图像和界面元素巧妙的突出重要内容并传达其不同的交互性。

　　在简洁美观的界面中清晰流畅的动画效果可以帮助用户更容易理解内容并与之进行交互，而不会对用户的操作产生干扰。 内容全屏显示时，半透明或者模糊处理的方式可以提示用户更多的内容。 减少使用边框，渐变及阴影可以使界面轻 量化，突出显示内容（内容优先）。

　　不同的视觉层次和逼真生动的动画效果 可以表达界面更深层次的内容，赋予了界面活力，使用户对界面内容更容易理解。易于发现并易于触摸的元素可以提升用户体验的愉悦感，用户在操作功能时不至于在迷失。 当用户在浏览内容时，流畅的转场效果提供了一种纵深感。

　　由于手机屏幕尺寸的碎片化，为了用同一个尺寸的设计稿适应不同的屏幕，我们可以用 1 倍、2 倍、3 倍这样的关系把所有的屏幕尺寸对应起来。

　　⼀般来说，为了节省设计师和开发的⼯作量，会直接选⽤ iOS 的 1 倍尺⼨（Sketch）来进行设计。在输出切图时，需要和开发商沟通确认需要输出⼏倍图，iPhone ⼀般是 2x、3x ，Android 则尺⼨较多。

　　图标（icon）设计是 UI 设计师的基本功的重要标准，图标是一种抽象的、跨语言的符号，是 UI设计中最不可或缺的视觉元素。

　　设计师设计时，通常只用设计一个 App Store 的图标（1024×1024 px ），这是最佳设计尺寸。其他尺寸可用 iOS 图标生成器自动输出一套，小尺寸图标单独微调下细节即可。

　　iOS 系统会自动切割圆角，所以在设计图标时，我们只需根据 App 图标的尺寸输出直角的图片即可。

　　：由于我们的拇指有一定的大小，所以图标的大小必须要让拇指有效点击，最小尺寸不能小于：48dp*48dp（Android规范推荐）。实际上，44dp-48pd 之间的点击大小都是可以接受的。

　　：为了不误触图标旁边的元素，图标与周围应保持一定的距离，间距为：8dp。

　　在一些极端情况，允许可点击范围小于 48*48dp，例如： 文章中的链接、日期选择器。

　　一套界面中，任何“可点击的元素”尺寸不能小于 44*44dp；一套界面中，任何可点击的图标与周围的距离不能小于 8dp。

　　由于 iOS 和 Android 的栏位有不一样的叫法，所以在这里先做一个对比，大家可以看看他们各自的特征和名称。

　　在工作中，这些名称可能会被混着叫，并且 iOS 和 Android 这些栏的名字每次更新的时候也有一些变化，所以大家也不用太区分在每个系统分别叫什么名字，只要能表达清楚和沟通清楚即可。

　　对于 App 来说，贯穿整个产品的导航设计都应该是直观和可预期的。借助导航，新老用户都可以平滑顺畅地跳转到 App 的任意位置。但是受制于有限的屏幕空间和不同的内容优先级，设计一个可见性和易用性都不错的导航并不是一件容易的事。

　　卡片设计在 Android 的设计里是重点，卡片是用来显示由不同元素组成的内容的便捷方式Bsport体育。它们也适合用来展示拥有不同尺寸和操作的元素。

　　卡片的内容和数量可以有很大的差异。卡片集合中的每一个卡片都可以包含独特的数据集，例如含操作的选项列表、含操作的笔记、含图片的笔记。

　　：是一组需要用户完成的任务，例如需要创建一个日历，就需要输入标题、日期、地址和时间。

　　：列表需要通过一定的逻辑顺序做排列，让内容容易被浏览。例如：字母表、数字、时间顺序、用户偏好。

　　：带图标和元图标的双行列表，带缩略图和无文字的双行列表，单双行列表混合的列表。

　　：带头像的三行列表，带文字、缩略图和无文字的三行列表，双行、三行混合的列表。

　　文字按钮能够很好地与页面主要信息进行关联，但又不会让用户失去对信息的关注。它们可以放在一个对话框里面，也可以放在一个卡片内。

　　当线型按钮放在文字按钮旁边时，可以作为高强调按钮；放在面型按钮旁边时，作为低强调按钮ｕｉ设计。

　　在一组相关联的按钮中，只能有一个按钮被选中并呈现活跃状态。 选择一个按钮时，原来被选中的按钮被取消选择。

　　感恩看到最后，如果有帮助，可以持续关注Bsport体育，后期继续更新互联网行业的设计师、产品经理的学习内容、学习方法。

　　昆哥在互联网行业工作了 15 年，从无艺术功底到学设计专业，从交互到产品，从 to B 到 to C，从打工到创业，一路摸爬滚打，不断从零基础入门，还和很多业内资深的朋友参与产品经理课程的教研，也了解产品经理的系统知识。

　　希望个人的经验能给大家提供有价值的参考，内容稍长，但全是干货，还有福利。

　　下面是知群全链路设计师课程试听申请入口。如果有同学需要系统的提升自己作为设计师的能力，或者想零基础转行，想深入的了解一下互联网行业，可以申请一下，目前对知乎的同学是免费开放的：

　　认真学习完五天课程还可以获得包含 100 多个知识点的互联网岗位能力地图，加油！