乐趣区

移动端UI设计规范指南

从事 UI 设计,一直没看到完整版的 UI 设计规范学习资料,特此总结整理方便大家学习交流~

很多新人在开始做移动端 UI 设计的时候,往往对界面的一些尺寸规范不是十分清楚,对做 UI 设计的基础概念也没有清晰的认识,很多时候都是凭借自己的感觉和经验去绘制界面,心里并没有一个清晰的概念,导致做出来的页面总是不那么尽如人意。本文整理汇总了一些界面设计(iOS 系统)中常用的一些尺寸规范和方法,如控件间距、适配、标注、切图等,设计师在设计时并不一定要严格遵守,但对这些规范应有所了解,并融会贯通。

01.UI 基础概念

02.UI 元素设计规范

03.UI 版式设计规范

04.UI 文字使用规范

05.UI 颜色使用规范

06.UI 输出规范

07.UI 交互介绍

08. 总结

在开始 UI 设计之前必须搞清楚物理像素、逻辑像素、倍率三个词。

屏幕都是由许多像素点组成,每个点发出不同颜色的光,构成我们看到的画面。像我们的熟悉 iphone 6s 屏幕就是由 750 行、1334 列像素点组成的矩阵图。设计师作图所用的分辨率就是指物理像素,简而言之,物理像素 = 分辨率,单位 px

逻辑像素又叫逻辑点,是控制屏幕内容显示多寡的一个单位,单位符号 pt,程序员在开发环节必须将设计师提供的物理像素转换成逻辑像素,并通过逻辑像素来控制页面显示哪些内容。不同设备逻辑像素与物理像素的比例是不同的。每个设备物理像素固定不变,我们调节显示器的分变率其实调节的是逻辑像素。

物理像素在硬件层面构成了液晶屏幕,逻辑像素在软件层面构成了画面图像倍率,1 个逻辑像素对应 1 个物理像素,1pt=1px,倍率 1x,1 个逻辑像素对应 1.5 个物理素,1pt=1.5px,倍率 1.5x,1 个逻辑像素对应 2 个物理像素,1pt=2px,倍率 2x,1 个逻辑像素对应 3 个物理像素,1pt=3px,倍率 3x,倍率 = 物理像素 / 逻辑像素。

由于开发工具不同,逻辑像素在 ios,android 名称不同,ios 是 pt,android 是 dp

那么 ios 设计时选择何种倍率?

要从开发换算、设计成本、效果查看、倍率转换、切图 5 个方面来综合选择。

开发换算,程序员拿到设计师提供的标注图以后,需要将标注中的物理像素转换成逻辑像素,即 px 转换为 pt,这里便涉及到换算的问题。通常设计图中元素尺寸在三位数以内,对于一般人而言三位数以内除以 1 最容易,2 其次,3 最后,本轮排 1x>2x>3x

设计成本,在 2x 逻辑像素下,列表高 60pt,头像高 51pt,二者不可能刚好居中对齐,势必偏移 1pt,手机实际显示偏移 2px;在 3x 物理像素下,列表高 150px,头像高 100px,转换到 1x 逻辑像素,100 不能被 3 整除,势必造成偏移。为保证落地效果,1x 倍率下尺寸必须为偶数,2x 倍率下尺寸必须为 4 的倍数,3x 倍率下尺寸必须为 6 的倍数,本轮排序 1x>2x>3x

效果查看,我们通常会将效果图导入对应设备中进行查看,目前主流设备都采用 2x,3x 倍率,1x 的设计图在主流设备上成倍放大的同时,分割线,描边线也会成倍的放大,如果不对这些细节二次调整,终端效果会很不理想。由于 2x,3x 之间等比缩放跨度不大,故而逻辑像素相同的两个 2x,3x 可以直接查看彼此的效果图,3x 比 2x 效果好些,本轮排序 3x>2x>1x

倍率转换,1x 转换 2x,3x 极为方便;2x 转换为 1x 需要除以 2,转换 3x 需要乘以 1.5 较为便捷;3x 转换 2x 需要除以 3 乘以 2,转换 1x 需要除以 3,比较繁琐,本轮排序 1x>2x>3x

切图,1x 设计图必须另外导出 2x,3x 两套切图,2x 设计图导出 3x 需放大 1.5 倍,3x 导 2x 需要除以 3 再乘以 2,麻烦,本轮排序 2x>3x>1x

综合比较分析,只有 2x 倍率设计图方便向上向下适配转换。

那么在确立 ios 设计尺寸以后,android 是否需要另出一套图呢?答案是看需求,可以一稿配双平台。

在 2x 倍率下,ios 有 640×1136、750×1334、750×1624 三种主流分辨率,android 统一为 720×1280, 两平台采用相同的 APP 设计规范,逻辑像素换算方式一样,程序员根据同一份标注图开发,实现页面中元素尺寸完全相同,在 ios3 种尺寸中 750×1334 也最接近 720p,宽度仅相差 30px, 相差比仅为 0.04 适配无差别,故而可以一稿配双平台,如果对实现效果要求较高,那就需要按 720×1280 再出图。

iPhone X 依然可用 750×1334 设计, 只是高度增加了 290px,尺寸 750*1624(@2x)注意状态栏的高度由原来的 40px 变成了 88px,另外底部要预留 68px 的主页指示器的位置。

退出移动版