UI 设计有哪些规范?如何建立这些规范?

2022-01-27 14:44:21     来源:财讯网

打印 放大 缩小

无论是互联网大厂,还是小公司,无论是成熟产品,还是新产品,都需要做 UI 设计规范,这不是为了显示我们 UI 设计师有多专业,而是 UI 设计规范确实有它实际的价值。

一、UI 设计规范有什么用?

UI 设计规范的作用,概括来说有三点:提升效率、保障质量、统一体验。

交互设计师和产品经理,能根据这套规范快速搭建页面;

视觉设计师,能根据这套规范产出视觉风格统一、细节精良的页面;

前端工程师,能根据这套规范快速推进开发,遇到通用组件不清晰的地方,直接可以查;

运营,在某些时候,也能根据这套规范,自己搭建简单的页面;

用户,根据这套规范指导下设计的产品,使用起来,在视觉、交互方面有统一的体验。

国内一些大厂做得优秀的设计规范案例,比如蚂蚁金服的 Ant Design,饿了么的 Element,已经实现了端到端的体验一致,而且它们组件的丰富程度足够满足大部分使用场景。

二、大厂设计规范参考

想要提升自己对规范的理解和建立规范的能力,多向成熟的大厂规范学,是很有必要的。

推荐你关注即时设计的资源广场,持续分享国内外大厂的设计规范,而且这些资源都可以免费获取。目前已有大厂资源,包括苹果、谷歌、字节跳动、蚂蚁金服、饿了么、百度......

· iOS 15 设计规范和组件库

· ArcoDesign 全套设计资源(字节跳动内部团队打造的企业级设计系统)

· Ant Design 全套设计资源(蚂蚁金服团队打造的服务于企业级产品的设计体系)

· WeUI 设计规范(微信官方出品为微信内网页和微信小程序设计)

· Element 饿了么 设计规范

· Material Design 设计规范

· Harmony OS 设计规范

· 百度智能小程序全套设计资源

三、设计规范的制作方法

这里推荐一个原子设计理论,从这个理论的操作方法中,可以一窥设计规范的制作原理,而且使用起来也比较简单,适合那些处在开发初期,而且规模比较小的团队。

原子设计就是由原子、分子、组织、模板和页面共同协作,创造出用户界面系统的一种设计方法论。

原子设计的五​个阶段分别是:

1.原子。构成页面的基本元素。例如标签、输入,或是一个按钮,也可以为抽象的概念,例如字体、色调等。

2.分子。由原子构成的简单 UI 组件。例如,一个表单标签,搜索框和按钮共同打造了一个搜索表单分子。

3.组织。由原子及分子组成的相对复杂的 UI 构成物 。

4.模版。将以上元素进行排版,显示设计的底层内容结构。

5.页面。将实际内容(图片、文章等)套件在特定模板,页面是模板的具体实例。

原子设计理论的优点是一致、清晰、高效,使用的时候要根据实际情况灵活运用,不求全面,但求实用。

「即时设计」官网地址:https://js.design

 

标签: 规范 建立 这些

相关阅读