UI设计规范.docx
- 文档编号:27574903
- 上传时间:2023-07-03
- 格式:DOCX
- 页数:39
- 大小:5.79MB
UI设计规范.docx
《UI设计规范.docx》由会员分享,可在线阅读,更多相关《UI设计规范.docx(39页珍藏版)》请在冰豆网上搜索。
UI设计规范
UI设计规范
文档更新历史
序号
文档版本
编写/修订人
更新内容
更新日期
1
1.0
2
3
一、概述
1.为什么要建立设计规范
很多设计师都觉得,整个项目只有自己一个设计师,所有的设计稿都是自己一个人做的,风格肯定都是统一的,所以没必要花那么长时间去做一个没有用的东西。
但其实规范的本身并不是只给设计师用的,他更大的作用是对于整个团队,比如方便和开发之间的沟通,帮助他们制作统一的组件,以后用到的时候直接调用。
而对于设计师来说,也不用重复做图、重复标注,改动一个的时候就能同步所有,大大提高了工作效率。
而且有时候就算设计稿是同一个人的,也很难保证前后界面的参数是一致的,毕竟人的精力有限,事情多的时候,很容易出现记忆偏差。
可能你在前面颜色、图标、模块间距做的是这样的,到后面相同模块的时候,就会做成另外一个样子。
这种小问题到后面再去修改不但浪费时间,还容易漏掉,而前期花时间定义好规则,并整理好规范,能够有效避免这个问题,磨刀不误砍柴工。
2.设计规范的作用
设计规范能为团队解决不少问题,并提升工作效率,主要体现在以下三个方面:
2.1解决多人协作时控件混乱问题
一个大型项目的视觉稿,往往会有几十个甚至是上百个页面。
对于第一次做这种大项目的设计师,如果在视觉风格成型后没有做规范的话,哪怕自己一手包办全部页面,恐怕也很难统一视觉样式。
在创作阶段设计其他页面时,如果没有规范来指导,设计过程中很容易产生细微的出入,导致每个控件都会有细微的差别,经常会做着做着就出现控件不一致的问题,比如A页面的按钮是4PX圆角,B页面的按钮又做成了6PX圆角,再后来做的C页面的按钮又做成了2PX圆角。
如果一直埋头苦干赶页面,没检查出这些问题,页面做的越多错误就越多,到时候几十个页面的控件都要修改,那可真是苦不堪言啊。
一个人做页面尚且会出现这种样式不统一的问题,更何况是多人协作。
因此,在进行多人协作一个项目前,可由主视觉设计师出一份视觉规范,其他一起协作的几个设计师遵循这个规范,才能把控视觉统一性,提高效率,减少返工率。
另外,当新人加入团队的时候,他们对产品的品牌基因可能理解不透,这时设计规范就可以帮他们快速上手,并且保持产品的统一性。
2.2解决开发效率、代码冗余问题
如果没有做规范,就拿按钮这个常见的控件来举例,程序员不知道具体的规范,每个程序员用代码写了A页面的按钮样式,然后在开发B页面时又要重新用代码写按钮样式,页面越多程序员的工作量也就越大,影响项目进度,代码也会越来越臃肿。
如果做了规范,程序员从视觉规范中了解到哪些控件是可以一次性写好并能重复调用。
在规范的辅助下,程序员在搭建全局共用元素时规则更加清晰明了,如按钮、行间距、字体大小、色值等等。
另外,对于末端界面没有规范到的角落和由规范控件组成的新页面提供了有效参考,比如规范中已经列出的5种常用弹窗样式,后来需求迭代时出现由原有规范样式混搭组成的新弹窗,这时程序员就可以借鉴原有5种弹窗里的标题、间距、按钮等样式去完成该工作。
2.3解决产品迭代中品牌形象会走样问题
产品在迭代过程中,往往是小版本进行几个功能的迭代比较多。
如果没有做规范,在多次迭代过程中会忘记设计初衷,同样一个TAB控件,可能会出现多种不同样式的TAB,举一反三,这种太随意的设计会让产品控件混乱,导致品牌形象走样,看起来很不协调,像是几个风格不同的设计师共同完成的半成品。
有了规范,后续迭代中也能保持设计初衷,遵循定制好的设计规范,维护好品牌形象。
就算是后来加入新的设计师,新的设计师也能通过主设计师做好的规范,统一品牌形象。
规范能使产品在不断更新迭代中保持品牌形象不走样,保持产品特性,产品的规范统一增加了用户使用认知,不同程度有效提升用户体验。
二、UI设计整体规范
1.命名规范
很多UI设计师对于“命名”是没什么概念的,他们都是随随便便地用一些没有特定意思的字母去给页面命名,这是不好的。
因为统一的、规范的命名对我们自己的文件整理有很大的帮助,后期修改文件、图层的时候更加方便快捷,而且规范的命名也显得我们自身比较专业。
而且,如果命名不统一,团队之间的成员很难达成共识,任务交接时需要很大的学习成本。
而更重要的是,有规范的命名可以极大的节省程序开发的时间成本,减少很多不必要的沟通与重复切图的概率,程序员完全可以直接使用的我们切片而不更改切片的名称,后期我们更换切图,只要切片名称不变,开发看都不用看直接替换就可以了。
1.1所有命名全部为小写英文字母
在程序员的代码里只有小写的英文字母,如果你给出的命名全是中文的,那么他们是一定会更改的,所以命名全部用小写的英文字母是最基本的规则。
有些人会觉得写这么多英文太麻烦,但其实为了自己专业能力的提高,这种规范的命名方式是必须要经历的过程,当你习惯了这样的命名方式后,你的成就感会油然而生。
1.2命名格式
一个大型项目会分很多模块,每个模块由不同的设计师来独立完成,还有人会专门管理公共的组件,如tabbar、navbar等等,这种情况下就会分为两种切图,一种是通用类型的切图,还有一种就是各个模块特有的切图。
(1)通用切片命名格式
组件_类别_功能_状态@2x.png
举例:
tabbar_icon_home_default@2x.png(对应中文:
标签栏_图标_主页_默认@2x.png)
(2)模块特有切图命名规则
模块_类别_功能_状态@2x.png
举例:
mail_icon_search_pressed@2x.png(对应的中文为:
邮件_图标_搜索_默认@2x.png)
我们的原则就是清晰的表达出切片的具体内容并且没有重复的名称。
(要注意,命名中不能含有空格)
1.3常用英文单词
如果所有命名都写为全称,名字就会特别长,所以我们可以将一些常用的英文单词进行缩写,减少工作成本与开发代码资源。
至于怎么缩写,只要整个团队能够达成共识并且输出一份缩写清单,任何缩写规则都是可以的。
命名时常用的英文单词列表:
bg(backgrond背景)
nav(navbar导航栏)
tab(tabbar标签栏)
btn(button按钮)
img(image图片)
del(delete删除)
msg(message提示信息)
pop(popup弹出)
icon(图标)
selected(选中)
disabled(不可点击)
default(默认)
pressed(按下)
back(返回)
edit(编辑)
content(内容)
2.交互设计规范
一般情况在交互设计规范里,我们需要注意简化操作,能一步完成的交互绝不要分两步操作。
还得注意用户习惯,因为大部分用户都有固化思维,我们作为设计师应该尊重数据,尊重用户选择,不能太随意,太强调个性化。
减少干扰也是我们必须要考虑的,减少界面元素的不确定因素,方便用户快速找到自己想要的,这是我们理想目标。
让页面快速响应,也是我们追求的效果,加快用户读取的响应速度,能够避免从远程取数据的,就尽量避免。
界面友好这是必须的,不要让界面把用户挡在外面,所以除了根据需求提供视觉解决方案以外,在设计的过程中适当地加入一些小细节使交互界面更加友好。
3.图标设计规范
很多设计师以为UI设计就是设计图标。
虽然事实并非如此,但图标的设计在整个UI设计中是比较基础的一个环节。
图标与品牌标志一样,在设计时都需要做适当的减法,应该尽量用简约的线条去表达其含义,应该尽量避免出现线条结构过于复杂的设计,而且整体的图标都需要保持风格一致,例如图标的线条粗细、边角弧度、图标高度宽度比例、风格等等。
3.1像素对齐
需要严格的做到像素对齐,尤其是在做较小尺寸的图标时,如果不严格的遵循像素对齐,那最终的显示效果就会出现问题。
3.2多用布尔运算
在做图标的时候,能用基本图形进行布尔运算的时候,尽量不要使用钢笔,这样做的好处有如下几点:
●让你的图标更加规范
●对图形结构理解更加深刻
●后期更改形状更加方便
3.3独特的风格
在做系列图标的时候,一定要在前期给图标设定一个风格及原则,使之看起来与众不同。
在这里值得一提就是,我们在做线性图标时,一定要保证描边粗细相同、圆角相同,如果这些基础的规则都没有遵循,那也就谈不上风格的统一、创新了。
3.4视觉大小统一
在进行图标设计的时候,我们会使用栅格辅助线来帮助我们更加严格谨慎,但一定不要被辅助线困住,学会灵活运用,保持视觉上的大小统一。
在如今的APP设计环境当中,一些APP设计大牛都一直强调,设计师要为有品牌意识。
那么,在图标的设计中,我们也必须强调“品牌性”,简单的说就是把品牌中的抽象的概念变成具象化的图形,把品牌主副色调应用到图标设计中。
同时建议大家每个星期完成一个主题的作品,提升自己的平面设计能力。
4.图片处理规范
这块我们需要确保图片统一性,让图片色调色温需统一,还有图片比例需统一,这样看上去才比较统一舒服。
还需要注意图片细节处理,比如,图片精度不够、杂色太多可以使用PS滤镜处理好;而图片尺寸建议统一为偶数值,方便前端技术人员开发;另外图片边缘避免与白色背景融合,可以在边缘位置加色;为了配合标题字体,图片可以局部调亮或调暗等等细节。
5.视觉设计规范模板(针对不同的项目单独建立)
5.1布局规范
5.2颜色规范
5.2.1主体颜色规范
5.2.2文字颜色规范
5.2.3辅助颜色规范
5.3字体/字号规范
5.4控件规范
5.5图标规范
5.6图片规范
三、移动端UI设计规范
1.设计尺寸规范
从目前市场主流设备尺寸来看,我们要用1080x1920PX来做安卓设计稿尺寸。
以1080x1920px作为设计稿标准尺寸的原由:
①从中间尺寸向上和向下适配的时候界面调整的幅度最小,最方便适配。
②大屏幕时代依然以小尺寸作为设计尺寸,会限制设计师的设计视角。
③用主流尺寸来做设计稿尺寸,极大的提高了视觉还原和其他机型适配。
(sketch用户以540x960来做设计稿)
界面设计控件尺寸:
2.APP版式设计规范
版式设计又叫做版面编辑,即在有限的版面空间里,将版面的构成要素如文字、图片、控件等根据特定的内容进行组合排列。
一个优秀的排版要考虑到用户的阅读习惯和设计美感,在UI设计中版面设计的原则有哪些呢?
2.1对齐
对齐是贯穿版式设计的最基础,最重要的原则之一,它能建立起一种整齐划一的外观,带给用户有序一致的浏览体验。
2.2对称
对称是宇宙间的设计哲学,是对立统一规律的本质属性,呈现出一种和谐自然的美,在应用界面的设计中,引导页设计、注册登录输入框和按钮等无一不是对称的设计。
2.3分组
物以类聚,人以群分。
分组是将同类别的信息组合在一起,直观的呈现在用户的面前,这样的设计能够减少用户的认知负担,在移动端界面的设计中最常见的分组方式就是卡片,为用户选择提供专注而又明确的浏览体验。
3.界面文字设计规范
文字是APP中最核心的元素,是产品传达给用户的主要内容,所以说文字在APP的设计中是非常重要的,那么,文字的字体如何选择,字号如何设定,是否加粗,颜色如何设置?
在一款APP中字号范围一般在20-36之间(@2x),当然iOS11中出现了大标题的设计,字号还是要根据产品属性酌情设定。
另外需要注意的一点是所有的字号设置都必须为偶数,上下级内容字号极差关系为2-4号。
关于字体:
在iOS9推出之前设计师普遍采用华文黑体、谷歌思源、冬青等字体进行设计,iOS9推出了苹果自己的字体——苹方!
自此之后苹方字体被广泛应用于移动端设计中。
关于字体颜色和是否加粗:
字体的颜色设置我们一般很少用纯黑色,一般用深灰色和浅灰色、细体和粗体(注意要用字体本身的字重,不能用PS的加粗功能)来区分重要信息和次要信息,进行信息层级的划分。
4.内容布局
在APP的设计中内容的布局形式多种多样,这里介绍最常用的两种布局形式,列表式布局和卡片式布局。
4.1列表式布局
列表式布局方式非常普遍,随便打开一个APP,基本都存在这种布局方式,其布局形式的特点在于能够在较小的屏幕中显示多条信息,用户通过上下滑动的手势能获得大量的信息反馈。
而列表也是一种非常容易理解的展示形式。
以我们最常用的微信和QQ为例,其“信息”页面都是采用的列表式布局,在采用这种布局形式的时候要注意列表舒适体验的最小高度是80px,最大的高度要视内容的多少而定。
4.2卡片式布局
形式非常灵活。
其特点在于,每张卡片的内容和形式都可以相互独立,互不干扰,所以可以在同一个页面中出现不同的卡片承载不同的内容。
而由于每张卡片都是独立存在的,其信息量可以相对列表更加丰富。
在使用卡片式布局的时候要注意卡片本身一般是白色的,而卡片之间的间距颜色一般是浅灰色,当然不同产品风格颜色可能不一样,有些是浅灰色偏蓝等。
双栏卡片的布局形式,比较常见于以图片信息为主导的App。
例如一些商城的商品陈列页面。
这种形式与卡片式类似,但它能在一屏里显示更多的内容,至少4张卡片。
同时,由于分开左右两栏的显示,用户可以更加方便地对比左右两栏卡片的内容。
5.界面图片设计比例
在UI设计中,对于图片的尺寸和比例没有严格的规范,设计师往往凭借经验和感觉设置一个看起来不错的尺寸,但事实上我们是有章可循的。
运用科学的手段设置图片的尺寸,可以获得最优的方案,常见的图片尺寸有16:
9、4:
3、3:
2、1:
1和1:
0.618(黄金比例)等。
这些比例不无根据,它们都和图片尺寸有关。
16:
9是根据人体工程学的研究,发现人的两只眼睛的视野范围是一个长宽比例为16:
9的长方形,4:
3是勾三股四弦五,在摄影中非常常见……。
6.建立统一风格的图标
在应用界面的设计中,功能图标不是单独的个体,通常是由许多不同的图标构成整个系列,它们贯穿于整个产品应用的所有页面并向用户传递信息。
一套APP图标应该具有相同的风格,包括造型规则、圆角大小,线框粗细,图形样式和个性细节等元素都应该具有统一的规范。
通过分析以上三组图标可以得出:
他们具有统一的色彩,统一的圆角大小,统一的线框粗细,那综合起来也就是具有统一的风格,给用户高度统一的视觉体验。
7.切图规范
7.1设计切图的原则
设计切图输出的目的是跟下游的工程师团队协同工作,那么在团队协作过程中首先应该保证切图输出能够满足工程师设计效果图的高保真还原的需求。
其次切图输出应该尽可能的降低工程师的开发工作量,避免因切图输出而导致的不必要的工作量。
最后输出的切图应当尽可能的压缩大小,以降低APP的总大小,提升用户使用时的加载速度。
所以切图输出应当做到切图精准、便与协同和压缩大小。
7.1.1切图资源尺寸必须为双数
众所周知智能手机的屏幕大小都是双数值,比如iphone7的屏幕分辨率是750*1334px。
切图资源尺寸必须为双数是为了保证切图资源在工程师开发时是高清显示。
因为1px是智能手机能够识别的最小单位,换句话说就是1像素不能在智能手机被分为两份。
所以如果是单数切图的话手机系统就会自动拉伸切图从而导致切图元素边缘模糊,进而造成开发出来的APP界面效果与原设计效果差距甚远。
7.1.2为了提升APP使用速度,尽量降低图片文件大小
在切图资源输出中图标切图输出是很重要的部分,比如新手引导页、启动页面、默认图、广告图等。
图片切图一般情况下文件大小都是相对较大,不利于用户在使用app过程中加载页面。
因此图片切图要尽量压缩图片文件的大小。
7.1.3可点击部件应当注意其点击区域不小于88px
44px的点击区域数值是在iphone3(320×480px)普通显示屏下制定出来的,在手机分辨率大幅提升的现在,这个数据自然要与时俱进。
在iphone7(750*1334px)的Retina显示屏下44px点击区域就变为了88px。
但无论是320*480px尺寸下的44px还是在750*1334px尺寸下的88px,换算成物理尺寸后大致是在7mm-9mm之间。
早在人机工程学的研究中曾得出结论,认为人类舒适的触击范围需在7-9mm的大小。
所以空间尺寸也经常出现88px的数值,比如菜单栏的高度便是88px。
7.1.4可点击部件要把相关状态都切图输出,比如正常状态、点击状态
在切图过程中不仅要输出正常状态的切图,更要注意不要遗漏其他状态的切图。
这个也是设计师经常会出现的失误,比如在按钮切图的过程中可能会忽略点击切图的状态。
所以设计师在做设计图是最好尽量把页面中会出现的各种状态展示出来,避免后期切图的时候遗漏状态。
7.2切图输出类型
7.2.1桌面图标切图输出
app的桌面图标会被运用在很多不同的地方展示,比如手机桌面、APPstore、手机的设置列表,所以app桌面图标需要很多个不同尺寸的切图输出。
两个平台对相应桌面图标设计输出尺寸也不尽相同,在输出的时候要把双平台的这些尺寸全部输出切图。
桌面图标切图只需要提供直角的图标切图即可,手机系统会自动生成圆角效果。
7.2.2系统图标切图输出
7.2.2.1一套图适配双平台
ios平台(iphone6plus版本除外)和安卓平台公用44*44px切图素材,即可实现一套切图适配两个平台的开发。
7.2.2.2适配大屏幕
为了适配iphone6plus、iphone7plus单独切一套比原有44*44px切图大1.5倍的切图,即66*66px大小的切图。
7.2.3图片类切图输出
图片类切图主要是指启动页、新手引导页、默认提示、广告图等需要完整切图的图片。
同一类型的图片切图一般要保持同样的大小尺寸以便于工程师开发使用。
另外一般这些切图的文件较大在切图过程中需要控制切图文件的大小。
7.2.3.1全屏切图
7.2.3.2局部切图
7.2.3.3空白页提示
7.2.4动效元素切图输出
动效元素切图一般是指在app中加载动效所需要的切图元素,比如qq的下拉加载动效就是由若干张切图连续播放形成的动画效果。
这些图片按照序号排序播放我们页把他们叫做序列切图。
序列切图是在做UI设计的过程中必然会遇到的问题,这种切图要求要保证动效播放时的流畅自然,是需要设计师仔细斟酌的。
7.2.4.1序列图切图
7.2.4.2序列图实现效果
7.2.5可拉伸元素切图输出
可拉伸元素一般是指按钮、输入框等切图过程中可以对切图进行瘦身压缩的元素。
这些元素通过瘦身压缩可以极大地见效图片的大小提升用户在使用app中的加载速度。
在ios中这种切图方式叫做平铺切图,在安卓中这种切图方式叫做点九切图法。
7.2.5.1横向拉伸切图
7.2.5.2竖向拉伸切图
7.2.6无需切图的部分
再设计切图输出中很多元素是不需要输出的,直接使用系统原生的设计元素修改参数即可。
作为设计师需要知道哪些元素是需要切图,哪些元素是使用系统自带的避免不必要的切图。
比如文字、卡片背景、线条和一些标准的集合图形是不需要提供切图的。
例如搜索框只需要在标注中表明尺寸大小、圆角大小、描边粗细、色值即可,工程师会根据设计效果通过代码实现这种效果。
7.3设计稿标注
当界面设计定稿之后,设计师需要对界面进行标注给开发工程师在还原界面时进行参考。
借助一些专业的标注工具有利于我们提高工作效率,常用的标注工具有MarkMan或PXCook。
在一份设计稿中需要标注的内容是文字的字号大小、粗细、颜色、不透明度;界面的背景颜色、不透明度;各个图标、列表、文字之间的间距。
界面标注的作用是给开发工程师提供参考,因此在标注之前需要和开发工程师进行沟通,了解他们的工作方式,标注完成之后宣讲你的注意事项,以更快捷高效的完成工作,并且最大限度的完成视觉高的还原。
四、电脑端UI设计规范
参照UI设计整体规范,此处不再赘述。
五、规范运用时的注意事项
1.把握规范建立时机
规范建立的时机很重要,太早或者太晚都会给后续迭代带来很多麻烦。
如上图所示,如果在创作初期就做设计规范,这时视觉风格还没成型,投入太多精力去做规范,在视觉风格定位后,之前做的视觉规范又要推翻重做,因此太早做设计规范会造成没必要的返工。
如果等V1.0上线后才开始做规范,已经错过了最佳时机。
因为在V1.0开发的后半部分的两大工作是设计师拓展页面和程序员进行开发,在设计师拓展页面的阶段,如果没有设计规范的指导往往会很难保持视觉统一性,这时把页面交到程序员手里,同样一个控件在各个页面中的呈现样式却不一样,混乱不协调的控件库会对程序员造成困扰,从而影响开发进度。
在程序员前期开发阶段,如果有了规范,就可以快速根据规范搭建控件库,高效完成工作。
因此,最佳时机是在完成风格定位后做规范,可以承上启下高效完成工作。
2.非重要界面不进行规范设定
记得以前刚接触设计规范的时候,觉得设计规范就像一本设计圣经可以非常细致全面的指导设计工作,然后我对全部界面都做了详细的规范,花了很多时间和精力做出的设计规范多达几十页好几十个细分模块,最后实际应用时发现自己被这份设计规范打脸,因为有时做新的页面,如果死板的100%遵循了规范,做出来的视觉效果不好;如果完全抛开设计规范,那之前做的过于全面的规范等于白做了,可见太过全面的规范会影响设计师发挥,并不是一件好事。
所以,整理规范时,应只针对控件、色值、质感、动效、品牌元素等重要界面进行规范设定。
3.把握规则弹性
采用28原则只能针对产品80%的界面进行规范。
这里讲的80%和20%是一个相对的概念,80%代表色彩、按钮、字体、间距等重要内容,这些内容需要进行详细的规范说明。
另外的20%是指某些控件是不可复用并且不重要的,这种20%的内容不需要花费精力做进规范里。
这个28原则需要设计师根据具体情况具体分析,作出更适合当下的设计。
如果对所有界面进行100%规范,一方面会束缚设计师的发挥,另一方面也会影响产品迭代的设计弹性,比如一个产品官网进行了100%规范,需求迭代时要在导航加上一个活动入口,这时如果死板的遵循原先的导航规范来加这个活动入口,视觉效果和活动数据效果可能并不理想,所以在面对这类需求的时候,适当的做出导航调整也是可以的。
4.规范持续迭代
在完成v1.0版规范后,产品还会一直迭代,产品改版过程中必定会不断优化设计。
如果设计师没有跟着产品改版的节奏去迭代视觉规范,一般会出现两种情况:
一是被原规范的旧样式束缚,死板的遵循最初的规范,长久下去会出现视觉样式过时的问题。
二是改版中用了新的视觉风格,没有及时总结归纳成规范,这样一来又会出现品牌形象走样的问题。
所以在产品迭代过程中需要对旧的规范进行更新优化,不好的、过时的规范需要及时同步归纳,并及时通知到项目相关人员。
要不然,陈旧的规范起不到帮助设计工作的开展,反而是一种负面影响。
5.具有规范执行力
有两种规范是缺乏执行力的:
第一、规范内容不具体,缺少对核心模块的细节说明。
各个模块缺少必需的说明,比如色彩模块中有主色却缺少辅助色的说明,按钮模块中缺少滑过、点击、不可点状态的说明,字体模块缺少字体磅数的分布设定。
这种没有核心内容的规范,没有参考价值,规范的作用几乎等于零,其他参与
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- UI 设计规范
![提示](https://static.bdocx.com/images/bang_tan.gif)