破洛洛首页

破洛洛论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 220|回复: 0

[转载] 如何建立一份移动UI设计规范?

[复制链接]

628

主题

633

帖子

1777

积分

高级会员

Rank: 4

发表于 2019-3-12 09:10:09 | 显示全部楼层 |阅读模式
在多人团队里,通常不同的设计师负责不同的流程,如果没有UI设计规范,不同的设计师就会对相同的组件做出不同的方案。产生大量重复工作,效率比较低。而制作设计规范和UI KIT之后,则可以直接利用KIT里的组件快速搭建好页面,把设计师从基础工作中释放出来,大大提升设计效率。
目录
一、为什么要建立规范
  • 用户体验一致
  • 塑造品牌感
  • 利于多人协作
  • 方便维护和更新,减少冗余内容
二、规范的适用范围
  • 适用于处于成长期和成熟期的产品。
  • 规范不是越全越好。适合就是最好。
三、如何建立规范
  • 整理产品的组件和复用的内容
  • 基础规范(栅格 间距 基础网格  颜色 字体 )
  • 组件规范(按钮、导航、弹框、缺省图、标签、列表、卡片等等)
一、为什么要建立设计规范?
1 利于多人协作,提高效率
2 增强一致性,塑造品牌感
制作和遵循设计规范,能够保证整个产品的交互效果和视觉风格、乃至文案的统一性,提升用户的体验。
3 减少冗余内容,方便维护和更新
同类内容使用一样的组件,能够降低输出的内容量,减少冗余的控件和代码。同时也便于维护,在迭代时进行统一的更新和应用。
4 利于工作交接
方便设计团队和其他团队交接,如果团队有人员变动,也方便后续入职的同事能够通过规范迅速熟悉产品,快速上手。
二、规范的适用范围
前面的文章我提到过,如果产品处于启动期的话,这个时候最重要的事情是圈到第一波用户,让自己活下去。在这个阶段产品会频繁的改版、验证,迭代非常快,整个团队可能都处于拼命加班的状态。在这种情况下做设计规范文档显然事倍功半,一个是浪费人力资源,另外就算做了,在频繁更新的背景下也很难去执行。
因此设计规范文档更适合于那些跨越0-1阶段的产品,这个时候产品已经用有了一定的用户,团队也会扩张。这个时候我们可以选择制作基础的设计规范,比如栅格、配色、字体、图标规范等等。对于成熟期的产品来说,大版本更新的周期是非常长的,这个阶段通常会制作更为详细的设计指南、设计原则、do & don’t、品牌书、图标手册等等。
三、如何建立设计规范
电商类的产品对于大家来说都是比较熟悉的,就算不从事这个方面,日常使用也会很频繁,所以此次案例我们以下面这个电商APP作为示范。
做规范时通常会有这两种情况:
1、不打算进行大版本更新的产品
对于小版本迭代的产品来说,建立规范只需要在sketch里把所有设计稿进行归拢和分类。直接根据现有的稿子梳理出规范,再对不符合规范的文件进行调整即可。
2、新版本 新规范
而对于需要做新版本并且建立新版本规范的产品来说,在做设计稿之前,我们就需要先统一一些基础的内容,比如颜色、字体、栅格等等,然后在设计过程中去制作KIT、对基础的规范进行补充。
四、基础规范
1 制定统一的栅格系统
因为现在都是一稿适配多端,所以首先需要确定设计的基准尺寸,是基于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 字体
字体规范最需要注意的是提取出各个场景下需要用的字体和字号。
需要注意的是,要标注上应用场景方便其他人理解。不然其他成员也并不知道到底什么时候应用一级标题、什么时候用二级标题。


阅读全文


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|破洛洛 ( 黔ICP备14000367号  |版权声明

GMT+8, 2019-5-23 08:58 , Processed in 0.180921 second(s), 25 queries , Gzip On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表