说说UI设计规范的那些事儿
本文摘要:设计规范对于设计师来讲并很了解,平常工作中也常常用。统一的设计规范不仅有益于设计师提升效率,同样可以帮产品、开发、运营、测试等有关员工对产品的体验有更好的认知。 什

设计规范对于设计师来讲并很熟悉,平时工作中也常常用。统一的设计规范不只有益于设计师提高效率,同样可以帮商品、开发、运营、测试等有关职员对商品的体验有更好的认知。

啥是UI设计规范

通俗来讲,设计规范是围绕在某种风格或者大型设计项目下形成可视化、数据化的规范,针对相对独立的体系打造的统一遵守条约。

UI即User Interface(用户界面),UI设计规范是基于用户界面商品而拟定的一套可复用设计库,也是为了便捷设计师、开发和测试职员一同协作,而遵循的规律和法则。

商品要有可遵循的规范来规范视觉呈现和元素概念,保证日后的迭代可以延续商品所传递的思想和价值,能最大限度保证商品的一致性。

为何要做设计规范

统一商品风格

对于同一个商品的多个页面来讲,统一的设计规范可以使得商品视觉风格维持一致。同时可以保障好的客户体验。

一个大型项目的视觉稿,总是会有几十个甚至是上百个页面。就算自己一手包办全部页面,恐怕也非常难统一各个控件的样式,由于在设计过程中比较容易产生细微的出入,时间长了也会忘记部分参数,致使每一个控件都可能会有细微的差别。

更何况多个设计师一同合作,假如没准时拟定规范,每一个人自由发挥,同一个控件便会出现不一样的样式。

例:同一个商品中,设计师A的按钮是2px圆角,设计师B的按钮做成了8px,同时设计师C页面的按钮又做成了全圆角。

提升开发效率、解决代码冗余问题

通过设计规范,技术员好了解到哪些控件是可以一次性写好并能重复调用,同时在规范的小助手下,技术员在搭建全局共用元素时规则更会加明确。

比如icon、按钮、行间距、字体大小、色值等等。如此既可以提升开发效率,又可以降低推广客户端安装包的大小。

帮新人迅速上手

当新人刚加入团队时,对商品的风格和基调可能不太熟知或者理解不透,可能没办法迅速进入设计工作,这个时候设计规范就可以帮他们迅速上手,提升工作效率,并且也能维持商品风格和控件的统一性。

怎么样拟定UI设计规范

第1步:明确设计原则

设计师要了解的知晓,商品需要传递给用户的设计特点和原则是什么,与整个平台的约束是什么。

在 facebook 的设计语言原则里面,强调了他们的设计价值观:通用、人性、干净、统1、有用、迅速、透明,在 facebook 所有设计中,都将这部分要素作为他们设计的指导准则。

苹果的设计规范包括:完整性、一致性、直接操作、反馈、隐喻、用户控制等。

设计语言系统可以让商品在不同终端、不同场景中的表现维持一致性,也有机会通过植入品牌基因的方法形成视觉锤,提高商品的辨别度与消费者对品牌的认知。

因此,大家在打造设计规范的第一步,是依据公司策略布局,结合此商品的终极目的和商品定位,打造设计准则,明确设计原则,以保证整个设计体系的高效率和一致性,并以此来检验设计的规范性,为具体的设计问题提供解决方法。

第2步:拟定基础规范

任何一款商品都需要拟定基础规范来维持整体的一致性。基础规范包含栅格系统、色彩、字体等最基础的内容,此次以手机端为例来进行说明:

栅格系统

打造横向栅格系统,常见的是12栅格,12栅格最好的地方可以同时被2、3、4整除。因此可以依据具体需要灵活的设计各种模块。当然假如商品比较轻量化,可以依据需要设置6、4甚至2栅格等。

还有一种是网格系统,拟定最小的设计单位,界面中所有间距需要使用最小单位的倍数,包括模块之间的间距、文本之间的间距等。譬如拟定最小单位为4,那样排版时横向和纵向的间距都是4的倍数,譬如8,12,24。依据最小单位拟定间距,包括模块之间间距、文本之间间距等。

色彩

色彩规范要标明色彩的色值和用范围,包含主色、小助手色、状况用色、文本色等。

假如用到渐变色,需要标注渐变色的色值和角度。

夜间模式需要额外注明日间和夜间模式下各个颜色的对应色值。

字体

字体规范需要提取出各个场景下用到的字号,加以整理和说明,需要让其他设计师明确的理解哪种场景用哪种字号。各个字号的行高也需要标明,不然容易出现参差不齐的行间距,影响阅读体验。

第3步:拟定控件规范

控件等于由色彩、文字、图形等组成的一个个小元素,遵循基础规范,包含图标、按钮、标签、分页器、气泡、提示框等。控件部分已经是一个比较庞大的内容,所以以下我只做一小部分的示范。

图标

为保证不同形状的图标在视觉上维持大小一致,需要制作一个图标绘制模板和图标制作说明。说明中标明图标的圆角、描边的粗细等。

按钮

按钮依据主次关系,一般分几种不一样的尺寸与种类,需要标明在哪种场景下用哪一种按钮。按钮的颜色、字体字号都遵循该商品的色彩规范、字体规范。按钮一般有三种状况:常规状况、点击状况和失效状况,部分状况下可能会存在加载状况,因此需要标明按钮在这部分状况下的样式。

第4步:拟定组件规范

组件由多个控件组合而成,因此需要在基础规范和控件规范比较健全的状况下再去拟定。组件一般包含导航、表单、弹窗、浮层、加载、缺省状况等。同样以下只做一小部分的示范。

导航

导航分为顶部导航栏、底部导航栏、分段器、楼层定位等。

以顶部导航栏为例,标题应该注意文字的极限值,图标地方和间距要考虑最小可点击地区,热区之间不可以重叠。

UI设计规范注意点

规范打造机会

规则从无到有些拟定并不是1日完成的,也并不是先拟定了设计规范再着手进行界面改动,两者应该同时进行。

在经过一次版本升级后,才有一个确定的设计规范,不然非常可能被所谓的规范束缚住手脚,到头来还是东拼西凑毫无可遵循的规范可言,那拟定设计规范的意义就没有了。

最好机会是在完成风格定位后开始着手基础规范和控件规范,依据基础控件进行其他页面拓展,然后打造组件规范,并后期逐步健全规范,如此可以承上启下高效完成工作。

规范的尺度与范围

有时做新页面,假如非常死板的100%遵循规范,做出来的视觉成效可能不怎么样,太过全方位的规范会干扰设计师发挥。

一些特殊场景下,规范需要灵活变通。

例:部分强烈营销推广活动场景中,顶部导航、主内容的上下左右间隔可遵循统一的设计规范,其他依据不同场景进行了自由发挥,从而给用户带来完全不同的视觉感受。

出色的设计规范既能统一方向和基本参数,又能预留无数的可能性来保证扩展性。因此适合地把控好设计规范的尺度与范围,需要在拟定规范的过程中,将需要遵循的部分需要进行详细说明。

准时迭代规范

在完成v1.0版规范后,商品还会一直迭代,商品改版过程中一定会不断优化设计。因此,在商品迭代过程中需要对旧规范进行更新优化,不适合的、过时的规范需要准时同步总结,并准时公告到项目有关职员。要不然,陈旧的规范没办法帮设计工作的拓展,反而会导致一种负面影响。

最后

另外,还有不少内容没展开说,譬如创建和维护规范化组件库的方法之1、Sketch Libraries。

Libraries功能可以帮大家创建独立的、可以被多个文件统一调用的Symbols库。将所有些控件和组件制作成一个个Symbols,当你修改了Libraries源文件,有关的变化也会同步更新到所有些项目文件当中。这对于界面元素愈加标准与统一,对于商品的维护和迭代愈加效率。

期望小伙伴们在构建自己商品的设计规范时,要围绕商品的设计原则,针对目的用户拟定设计规范,做到简朴、易懂、能落地。

本文由 @张蕾 原创发布于每人都是商品经理,未经作者许可,禁止转载。

题图来自Unsplash,基于CC0协议。

相关内容