如何建立一份移动UI设计规范?

标签: 视觉设计 UI UI设计 设计规范 | 发表时间:2019-03-05 11:17 | 作者:设计 达人
出处:http://www.shejidaren.com

作者:白鹭漫谈 在多人团队里,通常不同的设计师负责不同的流程,如果没有UI设计规范,不同的设计师就会对相同的组件做出不同的方案。产生大量重复工作,效率比较低。而制作设计规范和UI KIT之后,则可以直接利用KIT里的组件快速搭建好页面,把设计师从基础工作中释放出来,大大提升设计效率。 目录 一、为什么要建立规范
  • 用户体验一致
  • 塑造品牌感
  • 利于多人协作
  • 方便维护和更新,减少冗余内容
二、规范的适用范围
  • 适用于处于成长期和成熟期的产品。
  • 规范不是越全越好。适合就是最好。
三、如何建立规范 
  • 整理产品的组件和复用的内容
  • 基础规范(栅格 间距 基础网格  颜色 字体 )
  • 组件规范(按钮、导航、弹框、缺省图、标签、列表、卡片等等)

一、为什么要建立设计规范?

1 利于多人协作,提高效率 2 增强一致性,塑造品牌感 制作和遵循设计规范,能够保证整个产品的交互效果和视觉风格、乃至文案的统一性,提升用户的体验。 3 减少冗余内容,方便维护和更新 同类内容使用一样的组件,能够降低输出的内容量,减少冗余的控件和代码。同时也便于维护,在迭代时进行统一的更新和应用。 4 利于工作交接  方便设计团队和其他团队交接,如果团队有人员变动,也方便后续入职的同事能够通过规范迅速熟悉产品,快速上手。

二、规范的适用范围

前面的文章我提到过,如果产品处于启动期的话,这个时候最重要的事情是圈到第一波用户,让自己活下去。在这个阶段产品会频繁的改版、验证,迭代非常快,整个团队可能都处于拼命加班的状态。在这种情况下做设计规范文档显然事倍功半,一个是浪费人力资源,另外就算做了,在频繁更新的背景下也很难去执行。 因此 设计规范文档更适合于那些跨越0-1阶段的产品,这个时候产品已经用有了一定的用户,团队也会扩张。这个时候我们可以选择制作基础的设计规范,比如栅格、配色、字体、图标规范等等。对于成熟期的产品来说,大版本更新的周期是非常长的,这个阶段通常会制作更为详细的设计指南、设计原则、do & don’t、品牌书、图标手册等等。

三、如何建立设计规范

电商类的产品对于大家来说都是比较熟悉的,就算不从事这个方面,日常使用也会很频繁,所以此次案例我们以下面这个电商APP作为示范。 做规范时通常会有这两种情况: 1、不打算进行大版本更新的产品 对于小版本迭代的产品来说,建立规范只需要在sketch里把所有设计稿进行归拢和分类。直接根据现有的稿子梳理出规范,再对不符合规范的文件进行调整即可。 2、新版本 新规范 而对于需要做新版本并且建立新版本规范的产品来说,在做设计稿之前,我们就需要先统一一些基础的内容,比如颜色、字体、栅格等等,然后在设计过程中去制作KIT、对基础的规范进行补充。

四、基础规范

制定统一的栅格系统 因为现在都是一稿适配多端,所以首先需要确定设计的基准尺寸,是基于iphone8?还是iphone 8P?或者1080*1920等等……每个公司设计稿的基准都不一样,我们是以一倍图为基准进行设计的,所以我这里的基准尺寸就是375*667,单位为pt。 栅格一种情况是制定网格系统,网格系统的话首先要制定最小的设计单位,比如淘宝的最小单位是3,掌阅的最小单位是4,airbnb的最小单位是6……定好最小设计单位之后,界面中所有间距采用最小单位的倍数。 假定我们最小单位4的网格,排版时横向和纵向的间距都是4的倍数,比如8、12、24。 第二种情况是可以直接建立横向栅格系统,常用的是12栅格,12栅格比较好的地方是能够同时被2、3、4整除,因此能够根据具体需求灵活的设计各种模块。当然如果产品比较轻量化,是不需要这么复杂的栅格的,可以根据需求设置6、4甚至2栅格等等。 2 色彩规范 色彩规范主要表明色彩的色值和使用范围,一般会从品牌色、辅助色、基础色、状态用色等等。如下图所示。 如果产品常用到渐变的话,需要注明渐变的角度以及渐变色的色值。包括产品如果有夜间模式的话,要额外注明日间和夜间模式下各个颜色的对应色值。当然这里的夜间模式说的是真·夜间,而不是微博那种直接加一个黑色透明度蒙层的伪·夜间。 额外提一句,重要内容和正文内容要保证文本的可识别度,WCAG指南中指出,文本和背景色的对比度需要达到3:1。大家可以通过 https://webaim.org/resources/contrastchecker/ 的颜色对比检查器来核对颜色。我这里的品牌色和强调色对比度为3:1和6.3:1,而辅助颜色(比如标签)的对比度则在2-3之间。 3 字体 字体规范最需要注意的是提取出各个场景下需要用的字体和字号。 需要注意的是,要标注上应用场景方便其他人理解。不然其他成员也并不知道到底什么时候应用一级标题、什么时候用二级标题。 4 图标 通常来说图标分为两种,功能性图标和展示性图标。 功能性图标是为了引导用户理解和操作,需要表现精确和简介,方便用户识别其含义。功能性图标常规状态下为无彩色。 展示性图标通常为页面入口,会有更多形状、颜色、质感的表达,吸引用户的注意力和点击欲望,强调差异性,比如各种品类区的图标、徽章、等级图标等等。 图标规范通常来说会先定一些基础尺寸,梳理好各个页面的图标尺寸,进行整合,最后确定好几个基础尺寸,比如我这里的基础尺寸是4个。功能层级一致的图标尺寸要一致。 为了保证不同形状的图标在视觉上保持大小一致,会制作一个图标的基础制作说明。制作说明里会统一图标的圆角、描边的粗细;如果是涉及到展示性图标的话,还会有图标的视角选择、配色的选择、以及如何表现质感等等等等 5 默认图 电商APP的话有大量的产品图片,所以我们也把默认的占位图样式进行了统一。因为我们这里样式都是一致的,所以采用了统一的规范,如果有多种默认样式,或者有其他类型的占位图,需要分别进行说明。

五、页面组件

页面组件通常包括导航栏、工具栏、弹框、列表、卡片、空状态等等,按照原子设计理念来说,还可以把组件拆分为原子、分子等更小的基础设计组件,比如角标、标签、按钮、图像、优惠券、选择器、进度指示器等等 页面组件除了梳理出规范之外,通常会整理成一整套UI KIT,保存为sketch文件日常拖拽使用,或者导入为Libraries直接调用。当然,也可以直接在KIT上备注出规范和注意事项,具体输出什么格式这个看团队的需求即可。 因为组件部分是一个比较庞大的内容,需要根据具体产品 1按钮 按钮一般有悬浮按钮、填充按钮、线框按钮和文本按钮等类型。其中悬浮按钮具有最高的优先级,属于强引导型按钮。 按钮通常会有三种状态,常规状态、点击状态和不可用状态。因此在规范中需要标明按钮在这三种状态下的样式,比如颜色、投影、圆角、文字大小等等 除此以外,也可能会有加载状态,也就是在点击按钮后,如果有1S以上的数据延迟,通常会考虑触发按钮的加载状态。加载状态的按钮样式为按钮上显示进度指示器。 2 导航 对现有页面的导航进行收拢和分类,比如我这里分类为常规标题样式、标签样式、搜索框样式、无标题样式、字母导航…… 标题需要注意文字的极限值,ICON尺寸和位置的话要考虑最小可点击区域,我这里icon的尺寸设置为24pt,但是热区是44pt,所以要注意间距的设置,热区不能重叠。 3 标签 标签通常有多个使用场景,我们可以对标签进行分组,比如运营类标签、内容属性标签、筛选标签等等 然后对每类的标签统一样式、文字内边距以及说明适用场景。 4 弹窗 弹窗是为了提示和通知用户而位于页面内容之上的一种控件。它是引导用户专注于某一项任务,用户可以通过操作来关闭弹框。弹框包含模态(对话框、操作菜单)和非模态(toast、 snake bar等)两种形式。 模态弹窗需要定义蒙层的样式(颜色、透明度),以及弹框内的文字说明和按钮。 我这里拿一个对话框的规范进行举例,这是一个无ICON的双按钮对话框,因此在这里我们需要说明标题、正文文本、按钮以及背景遮罩的信息,还有字号、行距、文字极限值、文字色、按钮的状态等等…… 除此之外,组件类的规范可以配上常用案例、don’t&do,会更方便团队人员理解,防止错误状况。 5 列表 列表是由多个等宽的行组成的、按照一定规律排列的连续条目。列表在一些资讯类产品里会有更多的组合形式。我这款产品里用到的列表主要是单行和双行列表,那么我们就整理出对应的列表类型和需要说明的事项。

六、结语

写这篇文的初衷,是因为从去年底我建立公众号,并且在站酷发表了一些文章,得到了很多人的认可。很多粉丝私信我各种问题,陆续有人问我设计规范怎么做、交互规范什么样之类的问题。但是公司内部的文件确实没有办法公开分享,所以我就想说,那不如专门写一篇文章详细教大家制作移动UI设计规范吧。 这篇的基础部分我做的比较详细,组件部分写的有些概括,主要是因为组件部分不是通用的,要根据自己的稿子进行整理和归纳,归纳好之后做好标注和规范说明即可,这部分是一个罗列的内容,所以就不必展开了…… 当然还有很多内容没有展开说,比如在Sketch里把KIT制作成Libraries统一使用,但是我想作为一篇设计规范入门教程目前应该足够了,更多的内容我在后续开新文去补充吧。

下载规范文档

素材名称:UI设计规范PDF.zip 格式:PDF 下载链接: https://pan.baidu.com/s/13EGxD7GmDTxVl0Dnw7sXlg 提取码: bpjq


(ノ◕‿◕)ノ*:・゚✧ 查看最受欢迎 301 个设计网站 *:・゚✧ヽ(◕‿◕ヽ)

UI设计QQ群 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论

相关 [何建 移动 ui] 推荐:

如何建立一份移动UI设计规范?

- - 设计达人
作者:白鹭漫谈 在多人团队里,通常不同的设计师负责不同的流程,如果没有UI设计规范,不同的设计师就会对相同的组件做出不同的方案. 而制作设计规范和UI KIT之后,则可以直接利用KIT里的组件快速搭建好页面,把设计师从基础工作中释放出来,大大提升设计效率. 目录 一、为什么要建立规范. 方便维护和更新,减少冗余内容.

移动客户端UI设计指南

- - 博客 - 伯乐在线
最近整理电脑,发现有篇11年编写的内部培训的交互指南,整理了一下,去除涉及公司机密的部分,分享给同行. 因为是AI格式的,嘻嘻当时为了臭美,就用AI编写排版的,所以只能给大家分享PNG图片了. 综合了爱疯、安卓、疯7的交互原则,适用于移动设备,比如其中的按钮尺寸、视觉大小、触控大小,唯一遗憾的是,没把字体的设计原则列进去.

10个必备的移动UI设计资源站

- - 优设(UISDC)
正如大家看到的,现在许多人都使用手机访问互联网,所以这让越来越多的公司去开发或重构新的web解决方案,因为他们认识到自己的项目有效的运行在各种移动设备上是多么的重要. 现在市面上存在太多流行的移动设备了,网页设计师们也不得不跟随潮流适应技术发展和变化规律,这些小巧的用户界面设计技能已经让一小部分愿意改变自己的同学们尝到了甜头,有付出就有收获.

文章: Calatrava:自由构建UI的跨平台移动框架

- - InfoQ cn
移动是未来计算的趋势,越来越多的人使用移动设备来访问互联网. 但是目前至少三大平台:iOS、Android、移动Web. 相比桌面Web,移动用户需要更好的体验、界面和设计. 然而移动设备受限于电池、不可靠的网络连接和小尺寸屏幕. 创业者之翼为创业新星免费提供甲级办公场所,详情请点击. 2012RIA天地行•西南游戏开发者大会11月25日,火热报名中.

携程移动端 UI 界面性能优化实践

- - IT瘾-geek
作者简介:南志文,携程研发经理,曾负责App整体技术框架的架构研发与实践,现负责酒店业务的迭代更新及App架构、性能优化. 曾先后就职于阿里巴巴、巨人网络. 《程序员》杂志 10 月刊,作者发表了. 《携程移动端架构演进与优化之路》文章第一部分:架构演进. 紧接着,作者基于前文对携程移动端性能优化实践进行了总结.

32套免费的网页、移动设备UI元素和模板

- 壮壮爱 - 互联网的那点事...
对于项目管理,良好的时间安排和组织是必不可少的. 以网页设计为例,当你想准时交付一个项目时,有几个时间因素需要你考虑. 如果你能够有效地利用时间,可以肯定你将能按时甚至提前完成你的项目. 这就是为什么你应该考虑用何种方式去组织管理你的时间. 如果你能正确地使用合适的工具,网页设计对你来说将是小菜一碟,你可以在网上找到这些免费的工具,这些工具将帮助你更快更有效地完成你的线框图,并且看起来像设计过的成品一样.

移动手持及平板电脑和网页应用设计UI规范

- Guan - 所有文章 - UCD大社区
Official user interface (UI) and user experience (UX) guidelines from the manufacturers, links to which you can find below, are a source of inspiration for mobile web and app design.

15 个优秀的移动 UI 设计 激发你的创作灵感

- - 雷锋网
俗话说,熟能生巧,UI设计师快速提高设计创作能力的最佳办法就是不断地练习,但我们不提倡闭门造车. 要有丰富的创作想象力,要多看前人的设计,获得创作灵感并在别人的基础上创新. 最重要的是,借鉴优秀设计师的作品可以减少很多时间,少走很多弯路. 来自美国 TNW的设计编辑Harrison Weber 为我们带来了15大优秀的移动UI设计,或许可以激发很多设计师的创作灵感.

分享10种针对不同类型的移动APP UI设计模式

- - 盒子UI
10种针对不同类型的移动APP UI设计模式,搞自《移动应用UI设计模式》一书,在书中用户体验设计师Theresa Neil,介绍了包括反模式在内的10种不同类型的设计模式. 无论你正在设计一款简单的iPhone应用,还是开发适用于当前市场上所有流行移动操作系统的应用,这些设计模式都能助你一臂之力.

移动手持及平板电脑和网页应用设计UI规范(英文)

- 书皮 - 互联网的那点事...
Official user interface (UI) and user experience (UX) guidelines from the manufacturers, links to which you can find below, are a source of inspiration for mobile web and app design.