UI设计干货！iOS与Android UI设计规范整理工作中大部分UI设计师都是按照IOS的标准来进行产品的UI设计，Android的相关规范很多设计师并不清楚，今天就给大家分享一篇IOS和Android设计规范的文章，希望对大家有帮助哦！ 内容实用，建议大家可以收藏，以后工作中一定用的到的。 一 为什么需要设计规范1.解决多人协作时，同一控件尺寸及使用混乱问题 ，保证设计的一致性。 2.与开发沟通协作，共同制定细则，提升链路间工作效率。 3.保持产品的特性，增强用户认知，并且在后续的迭代中不断的强化。 二 平台当前智能手机主要以iOS及Android两个平台为主。两平台有各自的的设计规范，分别是《IOS设计规范》和《Material Design》。以下主要从设计角度总结对比差异点。 以下是各自规范的设计主题  iOS设计主题清晰（视觉层）以功能驱动设计，文本，图标易读易懂。利用界面元素突出内容表达其交互性。 遵从（交互维度）干净美观的界面和流畅的动效有助于用户理解内容并与之交互。 深度鲜明视觉层级及生动的动效提升用户的体验愉悦感。暗示内容间的从属关系。 Material Design设计主题隐喻源于纸墨，内容层次分明,使用户沉浸在体验中。加入z轴的概念，通过阴影表示元素间的高度差异 鲜明、形象、有意义元素精心选择构建出鲜明、形象的界面，让用户沉浸其中。比如未开锁时下落弹跳，模拟现实物理规律。 合理动效为了吸引用户的注意力，通过动效有效地暗示、指引用户，让物体以连续平滑的方式变化呈现，使用户明白内容间的关系。 以上是两设计规范的落脚点，之后更为详尽的细则其目的都是为了更好的辅助实现这些目标。 三 单位尺寸理清各自平台的单位尺寸，更好的设计输出 PX屏幕的像素点，亦称之为物理像素 PPI为像素密度，就是每英寸屏幕上排列的像素点的数量。 屏幕尺寸的大小与屏幕的对角线长度有关，它的单位是英寸（inch） 对比下图可以发现，相同尺寸下像素密度越大，显示的内容越清晰 。但是如果将1倍的图置于高像素密度的屏幕下，图会变的小。这也就是为什么相同内容我们需要根据不同的分辨率切不同倍数尺寸的图。   PTiOS的开发单位也被叫为逻辑像素。 它是绝对长度，不随屏幕像素密度变化而变化 （这块需要明确的是这里的PT与印刷中的不是一个东西）。 DP称为密度无关的像素 Android中特有的一个灵活的单位，也是不跟随屏幕密度变化而变化的。 字体单位SP （可缩放像素)和 dp 功能一样，但仅用在字体上。1sp 的默认值和 1dp 一样。 Tips 可以这样理解iOS 中的pt和Android开发中的单位dp本质上是一个概念，都是独立像素的意思，只是叫法不一样而已。 四 设计稿尺寸一般为节省人力，都是以一个设计稿尺寸去适配两个平台 iOS设计稿以375x667pt 为主，导出内容可以向上兼容，去适配不同的尺寸。 Android以1080x1920px 为主，当然整个页面长度根据内容决定  导出尺寸 安全区在iPhoneX 之前安全区默认指除了状态栏以外的屏幕范围，而随着iPhoneX顶部刘海和底部Home indicator的出现，在iPhoneX之后的安全域特指除去距上44pt，距下34pt的屏幕区域。  Home indicator集成了原有Home键退出&切换系统应用的功能。（34pt高） 目前仅支持黑白两色，并且开发可以让它固定数秒后消失且不影响系统级的操作；在适配的过程中可以控制该区域内的颜色透明度/ 高度/ 显示或隐藏  五 页面布局对比Android和iOS规范。可以将页面分为三个大部分控件、Bar、页面内容。  1.状态栏 &导航栏iOSiPhone X 及以后刘海屏机型的状态栏高度为44pt 导航栏44pt iPhone 8及早期机型的状态栏高度为20pt 导航栏44pt Android状态栏为24dp 导航栏有两种 常规为 56dp 拓展为128dp 应用栏左右边距为16dp 图标：24x24dp  2.底部标签栏&系统导航iOSiPhoneX 标签栏高度为49pt Home indicator 高度34pt iPhone 8之前的标签栏高度为49pt Tab bar需注意 显示2-5个导航项 图标的大小约为30pt 文字字号为10pt Android它的底部标签栏英文与IOS的叫法有差异但是相同的功能（在最新的规范中增加了这部分） 标签栏高56dp 系统导航48dp 图标 24x24dp 文字激活下是14sp 不激活为12sp Bottom navigation 需注意 1.放置不少于3个 不多于5个标签 2.标签禁止滑动 3.文字避免折行 打点及为了展示缩小文字 4.选中态和非选中态形成足够的对比，避免使用多种低对比度颜色 Ps：Android中底部栏除了最新规范新增的Bottom navigation 以外还包含以下部分，需注意TopBar和BottomBar 只能使用其一，不可共存。 带居中FAB按钮&嵌入式FAB的这种类型的左右两侧最少放一个功能，最多放置两个。 带最右侧FAB按钮此类左侧需放置三到四个功能，但须注意的是不能在左侧放置返回功能。 无FAB按钮需注意在右侧最多出现四个功能  3.点击区域及网格iOS最小触碰区域44*44pt 可以通过刚刚提到控件及布局，可以发现这个44pt无处不在。 Android最小触摸区域48*48dp ，最小点击区域 24dp*24dp 栅格部分谷歌采用的是以8dp为最小原子单位的栅格 ，但是组件内的图标使用4dp网格对齐。组件之间使用8dp网格。可以观察发现Android中的间距及切图尺寸与8关系密切。这个栅格系统是一个辅助设计的工具。需要根据情况实际灵活运用。  六 控件主要梳理常用控件，它们的使用位置，注意事项等，方便在使用过程中参考，也可在此基础上优化。 1.按钮按钮除了是带居中文本的彩色矩形，它还可以是图标，彩色文本。 iOS页面上的主按钮通常都会出现在右上角，辅助类按钮通常位于底部工具栏。 Android主按钮通常作为浮动操作按钮（FAB）显示在底部右侧，辅助类按钮通常位于顶部栏。  2.按钮类型Android中对于按钮类型有较详细的描述，所以主要以梳理它的规范抛砖引玉。 主要归纳为四类 1.文本按钮（低强调）通常用于次要的操作。 2.轮廓按钮（中等强调）比文字按钮强调更多。 3.实心按钮（重点强调突出）使用颜色填充或增加阴影 最为突出强调。 4.图标按钮 将图标直接作为按钮使用。  共性前三类按钮最小宽度 64dp 文字与边框安全间距为 16dp 纯文本按钮左右有 8dp 安全区 切图最小24dp 注意点1.按钮文字避免折行显示，目的是获得最大的可读性 2.按钮文字 简明扼要 3.按钮轮廓不应窄于按钮文字长度 4.不要将图标与文本在按钮中心垂直对齐，以及同一按钮不要出现两个图标 3.FAB按钮Android中还要一个特殊的按钮，可以理解为特殊的实心按钮，它就是浮动动作按钮（FAB）代表应用中最重要的操作。类型分为默认FAB和拓展FAB 默认FAB 由两部分组成  1.容器（通常是圆形，但也不绝对的) 2.图标 默认FAB有两个尺寸 ： 默认（56x56dp） 小型（40x40dp） 内部图标24dpx24dp 页面位置：置于右下角时距离屏幕边缘16dp 拓展FAB由三部分组成  1.容器 2.图标（可选） 3.文本标签 尺寸 高度48dp 内部图标24dp x 24dp 页面位置：置于右下角或底部中央 注意点不要在FAB上面放置其他元素，比如小红点 2.使用的图标表意明确 3.在FAB不使用文字 4.在Tab标签切换时，FAB应该短暂消失，然后在新内容移入位置时重新出现 5.FAB上有关联操作选项最少三个，最多六个  4.Tab选项卡可以方便地在不同分组相同层次结构中进行浏览和切换。 iOS以Segmented Controls控件为主 定义就是两个或多个分段，每个分段都充当一个互斥按钮，段内按钮宽度均是相等的 。 Android有较为详细的指导，现在APP中Tab选项基本是以此演变过来的 交互形式可分为：固定类、可滑动类 Tab 样式分为：图标加文本 /纯文本/纯图标  固定类Tab每个选项卡的宽度均固定，每个标签的宽度是通过将标签数除以屏幕宽度来确定的（这个也不是绝对的），以下是官方的示例，单位是dp。  可滚动类Tab标签没有固定的宽度，是可滚动的，某些选项卡在屏幕外侧。每个选项卡的宽度由其文本标签的长度定义，但要保证两个标签之间的间距统一。  5.选择控件单选框 用于列表中需要选择单个选项的情况 开关 开启或关闭单个项目 复选框 在列表中选择多个项目，多以对勾标识 错误示例第一个单选按钮用在多个选项中，同时也错误的用在应使用开关的场景中 第二个当列表中只能选择一项时，请勿使用复选框  6.常用控件的中英文对照以下是常用的控件中英文，在对接开发时可以更规范的交付内容，当然这里只是名称对照，每个团队都有自己的方式。 七 字体规范两系统都有自己的默认字体，并且排版时有详细的指导，行间距和段间距这部分结合Android中的建议以及实际工作中遇到的问题，进行总结。 iOS中文是苹方（IOS10之后） 英文是San Francisco Android中文是思源黑体 英文是roboto 以下是两平台字号的使用位置梳理 1.行间距为了达到适当的可读性和阅读流畅性，文本行高需要根据每个样式的字体大小和粗细来设定 以下总结适用Android端 这是两行字号为12sp 行高18dp，他的可视字高是黄色这部分，实际行高是蓝色部分，可视间距是紫色部分，整体高度如粉框所示。那么它的可视间距就等于实际行高-字号 2.段间距与行间距类似，比如以下例子 这是两段文字，两行字号为12sp 行高18dp，段间距为18dp 可视间距是紫色部分，但实际段间距是蓝色部分，所以就会出现如果是实际段间距为18dp，那么可视间距大于18dp，如果是可视段间距为18dp，那么实际段间距应为9dp 所以在需要设计时，需要注意以上区别，并在对接开发时表述清楚，尽量避免出现理解差异。 颜色部分每个app都有自己的色彩规范，这里不过多讨论 ，以上是将基础常用的规范进行思考总结，关于图标、动效及其他控件部分，待之后分享给大家。
文章分类：
新闻动态
|