移动端UI设计规范「小白干货」

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


一,关于UI规范的理解

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



二,本文从八个方面全面阐述 UI 规范

01.UI基础概念

02.UI元素设计规范

03.UI版式设计规范

04.UI文字使用规范

05.UI颜色使用规范

06.UI输出规范

07.UI交互介绍

08.总结


三,UI 基础概念

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



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


确立双平台设计尺寸750x1334以后,务必要清楚APP界面的基本构成。


状态栏,用来呈现信号,时间,电量等信息,高20pt,宽通栏,位于APP界面顶部,可以改变底色与APP统一。

导航栏,导航作用,位于状态栏下方,底色一般为APP主色,高44pt,宽通栏一般显示主题也可以放搜索等控件。

标签栏,让用户在不同的子任务,视图和模式中进行切换,位于APP底部,高49pt,宽通栏,一般放3-5个图标。

工具栏,放置着用于操作当前屏幕中各对象的控件,位于APP底部,高44pt,宽通栏

搜索栏,用于搜索,高可自定义,宽也可自定义或通栏,可位于导航栏上方也可以放在下方范围栏,只和搜索一起出现,高宽可自定义,位于搜索栏下方。



内容视图是APP主要内容,常见的有5种视图形式。


列表形式,每条列表可以是单独的图片或者文本,也可以图文混合,并用分割线分区

卡片形式,将同类形式归纳到一个矩形或者圆角矩形当中,卡片可堆叠,覆盖,移动,美化。

集合视图,将同类信息用平铺的形式展现,一般图片为主,文字为辅。

图片形式,纯图片展示。

文字形式,纯文本形式。


控制元素用于控制显示APP内容。

页面控制器,告诉用户当前处于第几个页面,常见于banner。

分段式控件,将一个页面分到2-5个类别,常见于导航栏上下方。

选择器,常用于选择信息,调节数值。

文本框,常用与信息输入。

进度条,展示任务或进程进度。

刷新视图,提示用户正在刷新。



临时视图用于临时显示APP重要信息,或提供额外功能或选项。

警告视图,必须包含标题,或标题加正文,包含一个或多个按钮。

操作列表,用户某个行为操作触发,包含两个或以上按钮。

模态视图,占据整个屏幕,包含当前任务所需文字和控件,通常也会包含一个完成和一个取消按钮。


四,UI 元素设计规范


启动图标(设计时不需要做圆角,做圆角只是为看实际效果)。

启动图标栅格系统


iOS界面尺寸及栏高


Android界面尺寸及栏高


8像素原理,由于iOS技术开发以320x480px为标准开发的,所以设定尺寸为1,算出各个尺寸的比例。各个尺寸比例的值乘以4时,各个尺寸都能够满足是整数,且保证开始是不会模糊。又因为@2x切图设计稿尺寸为640x960px,所以设计最小的尺寸单位为8px


8像素原理优势,保证在双平台的大部分机型开发中不会出现模糊变形的问题。使用8px原理只需要一套设计稿,减少设计师的工作量,提升效率。


在移动端页面的设计中,页面中元素的边距和间距的设计规范是非常重要的,一个页面是否美观、简洁、是否通透和边距间距的设计规范紧密相连。


全局边距,全局边距是指页面内容到屏幕边缘的距离,整个应用的界面都应该以此来进行规范,以达到页面整体视觉效果的统一。



在实际应用中应该根据不同的产品气质采用不同的边距,让边距成为界面的一种设计语言,常用的全局边距有32px、30px、24px、20px等等,当然除了这些还有更大或者更小的边距,但上面说到的这些是最常用的,而且有一个特点就是数值全是偶数。以iOS原生态页面为例,“设置”页面和“通用”页面都是使用的30px的边距,以微信和支付宝为例,他们的边距分别是20px和24px。通常左右边距最小为20px,这样的距离可以展示更多的内容,不建议比20还小,否则就会使界面内容过于拥挤,给用户的浏览带来视觉负担。30px是非常舒服的距离,是绝大多数应用的首选边距。



卡片间距,在移动端页面设计中卡片式布局是非常常见的布局方式,至于卡片和卡片之间的距离的设置需要根据界面的风格以及卡片承载信息的多少来界定,通常最小不低于16px,过小的间距会造成用户的紧张情绪,使用最多的间距是20px、24px、30px、40px,当然间距也不宜过大,过大的间距会使界面变得松散,间距的颜色设置可以与分割线一致,也可以更浅一些。


以iOS(750*1334px)为例,设置页面不需要承载太多的信息,因此采用了较大的70px作为卡片间距,有利于减轻用户的阅读负担,而通知中心承载了大量的信息,过大的间距会让浏览变得不连贯和界面视觉松散,因此采用了较小的16px作为卡片的间距。


还有一种是不留边距,通常被应用在卡片式布局中图片通栏显示,比如站酷APP(当然站酷APP也进行了改版,首页已经采用了不通栏的卡片式设计)。这种图片通栏显示的设置方式,更容易让用户将注意力集中到每个图文的内容本身,其视觉流在向下浏览时因为没有留白的引导被图片直接割裂,造成在图片上停留更长时间。


内容间距,一款APP除了各种栏(状态栏、导航栏、标签栏、工具栏)和控件icon就是内容了,内容的布局形式多种多样,这里不去探讨内容具体应该如何去布局,我们来说一说内容的间距设置问题。


先来介绍一下格式塔原则中的一个重要的原则就是邻近性,格式塔邻近性原则认为:单个元素之间的相对距离会影响我们感知它是否以及如何组织在一起,,互相靠近的元素看起来属于一组,而那些距离较远的则自动划分组外,距离近的关系紧密。来看下图,左图中的圆在水平方向比垂直距离近,那么,我们看到了4排圆点,而右图则看成4列。


在UI设计中内容布局时,一定要重视邻近性原则的运用,比如在下面这款轻芒阅读APP的主界面中,每一个应用名称都远离其他图标,与对应的图标距离较近,保持亲密的关系,也让用户的浏览变得更直观,如果应用名称与上下图标距离相同,就分不出它是属于上面还是下面,从而让用户产生错乱的感觉。



再来看一个案例,日日煮APP,上面图片与文字较近,下面图片与文字较远,所以我们清晰的知道文字是属于上面的图片的。


在APP的设计中内容的布局形式多种多样,这里介绍最常用的两种布局形式,列表式布局和卡片式布局


列表式布局方式,非常普遍,随便打开一个APP,基本都存在这种布局方式,其布局形式的特点在于能够在较小的屏幕中显示多条信息,用户通过上下滑动的手势能获得大量的信息反馈。以我们最常用的微信和QQ为例,其“信息”页面都是采用的列表式布局,在采用这种布局形式的时候要注意列表舒适体验的最小高度是80px,最大的高度要视内容的多少而定。自如(列表高110px)和唯品会(列表高106px)列表式布局。



卡片式布局,形式非常灵活。其特点在于,每张卡片的内容和形式都可以相互独立,互不干扰,所以可以在同一个页面中出现不同的卡片承载不同的内容。而由于每张卡片都是独立存在的,其信息量可以相对列表更加丰富。在使用卡片式布局的时候要注意卡片本身一般是白色的,而卡片之间的间距颜色一般是浅灰色,当然不同产品风格颜色可能不一样,有些是浅灰色偏蓝等。


双栏卡片的布局形式,比较常见于以图片信息为主导的App。例如一些商城的商品陈列页面。这种形式与卡片式类似,但它能在一屏里显示更多的内容,至少4张卡片。同时,由于分开左右两栏的显示,用户可以更加方便地对比左右两栏卡片的内容。



界面图片设计比例,在UI设计中,对于图片的尺寸和比例没有严格的规范,设计师往往凭借经验和感觉设置一个看起来不错的尺寸,但事实上我们是有章可循的。运用科学的手段设置图片的尺寸,可以获得最优的方案,常见的图片尺寸有16:9、4:3、3:2、1:1和1:0.618(黄金比例)等。



这些比例不无根据,它们都和图片尺寸有关。16:9 是根据人体工程学的研究,发现人的两只眼睛的视野范围是一个长宽比例为16:9的长方形,4:3 是勾三股四弦五,在摄影中非常常见……


建立统一风格的图标,在应用界面的设计中,功能图标不是单独的个体,通常是由许多不同的图标构成整个系列,它们贯穿于整个产品应用的所有页面并向用户传递信息。一套APP图标应该具有相同的风格,包括造型规则、圆角大小,线框粗细,图形样式和个性细节等元素都应该具有统一的规范。


通过分析以上三组图标可以得出:他们具有统一的色彩,统一的圆角大小,统一的线框粗细,那综合起来也就是具有统一的风格,给用户高度统一的视觉体验。



系统图标栅格系统


系统图标栅格系统,视觉比例保持一致的栅格范例:圆形图标视觉张力较小,所以撑满整格;方形图标视觉张力较大,所以适当缩小;竖长图标一般上下撑满格,左右留间距;横长图标一般左右撑满格,上下留间距。

系统图标示例


通过系统图标栅格系统完成的APP图标效果演示(功能型图标

通过系统图标栅格系统完成的APP图标效果演示(非功能型图标




公共控件-重要按钮



公共控件-次级按钮




公共控件-较弱按钮


公共控件-选择&单选

公共控件-选项卡

公共控件-标签




未完。。。








作者:小肥羊

https://zhuanlan.zhihu.com/p/80343288

随机推荐
HTTP中GET与POST的区别
加密解密基础
CentOS 上安装最新版本的 Node.js
SQL表名,应该用复数还是单数
windows下安装expressjs
使用阿里云储 ossutil 自动备份 CentOS 服务器
微信支付接口返回“签名错误”的排查方法
设计的四个基本原则
详解 RESTful API 中的动词覆盖
javascript中this对象的指向问题