超全UI设计规范,带你了解规范设计全流程 - 优设网 - UISDC

超全UI设计规范,带你了解规范设计全流程

2018/07/28 32190评论区

今天分享给大家的是如何定义一套设计语言。设计语言,貌似很火的一个词,无论是国内大的团队还是小的团队,都需要做设计规范,好像没有就不够专业,UED 的价值就不够高,关于设计语言的参考也特别多,最出名的莫过于苹果和谷歌,也是设计语言的鼻祖。

一、为什么需要设计语言

1. 对内

上图,应该是很多设计团队都遇见的情况,一个按钮很多尺寸,颜色,大小,有时候我们已经有了规范,但是由于业务方各种要求,要个性化,要不一样,导致整个 APP设计变的很混乱,这是我们设计中经常遇见的,很多 APP 因为缺少基础规范,导致 APP 每个页面都不一样,设计师都是按照个人的主观经验做设计,导致风格层次不齐,缺乏统一性,所以对内,很多时候设计语言是为了解决统一性和效率为前提下,避免开发工程师重复开发一些组件。

2. 对外

对外,统一的品牌符号,品牌特征,有助于加深产品在用户心中的印象,统一的颜色和交互形式能帮助用户加深对产品的熟悉感和信任感,一个好的设计语言本身可以在体验上为产品加分,试想一下,当你走进星巴克的时候,发现 LOGO 变了,咖啡的包装换了,是不是会觉得是山寨的感觉,就好比汉堡XX,虽然都是同样的薯条汉堡,但是总感觉是山寨,好的品牌规范,能够更好创见一致性的体验。

二、设计语言解决什么问题

1. 一致性

在整个平台中创造一致性,颜色、按钮、字体、品牌一致性,给用户安全感与熟悉感,同时解决设计师因为个人特征导致界面不统一问题。

2. 明确设计原则

让每一个设计师很清楚的知道,我们产品需要传递给用户的设计特征和原则是什么,以及整个平台的约束是什么,比如我们平台特征是年轻,活泼,那么我们有对应的设计规范,比如圆角按钮,渐变色。设计师就得在这个约束下去进行设计,就不能设计成直角或方正的图形,因为和整个设计原则不匹配。

3. 效率

提升效率,对于一些我们经常用到的组件、颜色、分割线、按钮、图标、字体、tab、表单等组件,如果提前设计统一好,能大大减少重复性设计,能让设计师更加专注在设计品质上,提升效率,对于基础的颜色、字体、间距可以提前开发好,减少重复性开发。

4. 多平台统一

我们现在处于一个各种设备的时代,各种屏幕尺寸,平板电脑,笔记本,各种安卓机器,各种厂商自定义的系统等等,我们的设计需要在这些平台上运行,就必须保证设计的统一性。

三、设计语言包含哪些内容

前面我们已经说了,设计语言的重要性以及设计语言解决了什么问题,那么到底设计语言里面应该包含哪些内容,我们应该如何去定义这些内容呢?

1. 设计原则

https://airbnb. design/building-a-visual-language/

Airibnb 在建立他们设计语言之前,先根据整个产品公司定位,价值观,先得出他们整一个设计语言的关键词:

  • 统一:每个设计应该是统一的,不能有太多个性差异化的特征;
  • 关于内容:用户应该更多关注的是内容,而非设计本身;
  • 确定的:在设计中减少不确定的因素,和预期。

https://www. facebook. com/notes/facebook-design/facebook-design-principles/118951047792/

同样的,在 facebook 的设计原则语言里面,也首先强调了他们的设计价值观:通用,人性,干净,统一,有用,快速,透明,在 facebook 所有设计中,都围绕这几个点去作为他们设计指导准则。

https://developer. apple. com/ios/human-interface-guidelines/overview/themes/

苹果设计规范,建议每一个接触 UI 的同学都应该去学习,苹果的设计规范包括:完整性,一致性,直接操作,反馈,隐喻,用户控制等。

所以我们在建立一个设计语言的第一步,先应该建立一个设计准则,关于设计准则如何定义,我会在后面的文章里面和大家详细讲解。

2. 色彩系统

设计中三大元素,色彩,字体,图形,那么第一步我们在建立一个系统时候,色彩是很重要一部分,我们需要定义好我们整个系统的色彩架构体系,色彩体系一旦建立好,后面我们的设计都将围绕这些色彩进行设计,色彩包括:品牌色、辅助色、字体黑白灰颜色、不可用颜色、超链接颜色、成功或失败颜色等等。

△ 主色盘

△ 辅助色盘

△ 色盘延伸

3. 图形

△ 图形,设计中很重要元素之一,我们插画风格图形如何定义,图标,背景图形都属于图形一部分。

△ 插画在设计运用类型有几种,比如 atlassian 对于他们插画类型进行了规范,插画需要有隐秘和故事性在里面,插画必须有构建的感觉,定义了人物特征以及颜色规范。

△ 包括对于空白页图形定义

△ 对图标风格定义,包括色彩关系

△ 对于头像,定义了有五官和无五官风格定义

△ 包括整个规范的正确示范和错误示范等等

△ 图标规范等等

4. 栅格系统

栅格是为了保证页面中更好的布局,保证布局统一性。

栅格系统里面又分最小单位和间距,在 airbnb 中对于间距,他们运用了8的倍数,所有的规范都是很有弹性的,8,16,24,48,64来建立。

△ 网格系统中的列,也有叫栏

△ 网格系统中的行

△ 网格系统中的水槽

△ 网格系统中的边距

5. 字体

界面中出现最多的内容字体,字体除了传统意义上大小之外,还有字间距、行间距、字重对比、字体颜色等等,后面系列文章中,我会详细告诉大家如何定义字体。

△ 字重,顾名思义就是字体粗细,通过字重可以加强层级

△ 字体大小以及运用场景,字体在界面中什么样场景运用多大字号,以及对应的字间距,行间距等等都是需要我们去定义的。

△ 字体颜色,什么时候用品牌色,成功,错过,超链接出错等等各个状态的颜色如何去定义,后面文章我会详细说明。

6. 投影

在设计系统中我们需要定义好投影关系,投影需要去定义不同的强度大小,以满足页面中需要,一般通过透明度,以及投影远近来定义。

7. 图文关系

图片和文字在界面中如何处理,多色调如何运用,黑色图片上放文字怎么处理,白色图片放文字如何处理都是需要我们去详细定义的。

总结

设计一套设计语言是一个很复杂的过程,前期一般需要比较资深的的设计师来完成,设计完成后,对于基础的颜色,字体不要经常变动,成本会比较高,至少需要保证这些基础元素,一年内不要频繁变动,今天和大家分享的只是一个大概框架,后续我将会拆解里面每个???,逐步和大家分享如何去设计一个语言。

欢迎关注作者的微信公众号:我们的设计日记,每周分享最新设计趋势和设计经验,科学设计方法。

图片素材作者:RedWood Studio

「有效制作设计规范的实用方法」

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址://www.35yjw.cn/ui-design-specification-process

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

转场动效 优设专访 设计师 扁平化设计 交互设计师 优设大课堂 界面设计 排版布局 职场 配色 视觉设计 素材下载 web前端开发 设计流程 设计师专访 AI教程 设计理论 平面设计 神器下载 字体下载 设计趋势 用户体验设计 psd下载 海报设计 设计规范 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里

  • 动画频遭侵权敲响知识产权保护警钟 2019-03-26
  • 【互动话题】一句话形容过完年的你 2019-03-26
  • 安农大选配50名资深教授担任产业联盟“盟主” 2019-03-26
  • 权威论坛:伟大思想在实践中绽放真理光芒 2019-03-25
  • 超励志的新疆小伙艾山江弹唱《南山南》 2019-03-25
  • 南宁高新区提前完成全年财政收入任务 2019-03-25
  • 绝美景色给游人带来惊喜 四万多人端午游黄山 2019-03-25
  • 观星地旅行地中国国家地理网 2019-03-24
  • 广东省发布灯具及照明装置产品等产品质量专项监督抽查结果 2019-03-24
  • 苍井空果宝酱组合《我最宅》MV首播 苍老师大秀舞技 2019-03-24
  • 澳洲导盲犬毕业秀!爱同行,不拒绝,为ta们转发倡议! 2019-03-23
  • 《查理九世》有了电影版 秦昊在片中出演父亲 2019-03-23
  • 尿毒症大叔直播唱歌成网红 乐观精神感动网友 2019-03-23
  • 詹姆斯不太可能加盟凯尔特人,但绿衫军将保持活跃 2019-03-22
  • 【中国梦·大国工匠篇】“景德镇拉坯第一人”占绍林:手艺“满意”前谢绝资本加入 2019-03-22
  • 981| 655| 187| 758| 188| 157| 693| 257| 559| 537|