如何从0到1建立UI设计规范

设计规范一直是我们设计师需要关注的,毕竟设计规范能增强团队之间的协作能力、工作效率。设计规范如果考虑不到位,往往会出现规范太空洞缺乏实际指导意义、规范太死板影响设计发挥等问题。

今天,三石就把自己经常用到的几个小方法交给大家。

1、色彩规范

2、信息层级

3、控件统一

4、界面布局

1、色彩规范

色彩规范主要表明色彩的色值和使用范围,如主色调、辅助色、功能色、字体色等。在选择主色调时,首先确定产品的调性、用户对象和所要表达的气氛,以及利用色彩所希望达到的目的,色彩取向决定了这个产品的风格。

产品的辅助色可用主调色的邻近色,也可用对比色。确定主色和辅助色之前,建议应用到各种页面中去看看实际效果,因为每个页面的使用环境都不同,反复验证后才能确定最终的色彩方案。

一般情况下,可选择一到三种辅助色配合使用,整个产品的色彩最好控制在四种颜色之内。

产品文字中一般会有一级标题、二级标题、一级正文、二级正文、提示文字、辅助文字等,为了区分层级便于浏览,通常会根据产品需要把字体颜色深浅分成3到5个层级,常见的有#333333、#666666、#999999这个组合,这个组合的层级区分比较分明,适应性比较广,因此有一定的参考价值。

2、选择字体

文字是APP中最核心的元素,是产品传达给用户的主要内容,我们可以看到在不同品牌之间都有自己的字体规范。首先根据产品定位、用户群体选择合适的字体。同时也对字号做一个全局的规划。在同一个界面内,尽量用不同的字号去区分信息层级。可参考下图

另外字体的数量应保持在3种之内,能用2种就不要用3种,能用1种就不要用2种。

3、控件统一

在产品中按钮控件的复用度是很高的,同样的一个确定按钮也会根据页面环境不同来设定不同宽高尺寸。

需要注意的是,即使按钮宽高不同,按钮样式也需要统一宽高比例、描边、直角、圆角、色值、文字区域、字体、字间距等,以保证按钮样式的统一。

另外,在一般情况下,按钮会有四种鼠标状态。不同颜色的按钮之间,相同的鼠标状态也需统一视觉效果。比如同层级的蓝色和绿色按钮放在一起,这2个按钮在hover状态下的明度变化看起来应相对统一。

4、界面布局

不同类型的产品通常会采用不同的布局方式。总结我们在做页面设计时,注意以下几点即可

1、整体视觉统一

2、间距统一

3、页面整洁有序

4、提供足够的交互区域

结语

实践出真知,落实规范才是目的,不要为了规范而去做规范,每一个好的规范都是经过不断更新与迭代迭。

推荐阅读更多精彩内容