当前位置: 首页 >文章 > 像苹果Google一样做设计语言,带你了解全流程(上)
收藏
分享

像苹果Google一样做设计语言,带你了解全流程(上)

举报SkySky发布于 2020-12-101214阅读0点赞
超全UI设计规范,带你了解设计规范全流程...


大家是如何定义一套设计语言。设计语言,貌似很火的一个词,设计团队都在做设计规范,好像没有就是不够专业,UED的价值就不够高。


关于设计语言的参考很多,最出名的莫过于苹果和谷歌材料设计,也是设计语言的鼻祖,后面我将对设计语言,如何去创一个设计语言,设计语言包含什么,希望通过几期分享,帮助大家能很好的掌握这项技能。



为什么需要设计语言?


对内



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



对外



对外,统一的品牌符号,品牌特征,有助于加深产品在用户心中的印象,统一的颜色和交互形式能帮助用户加深对产品的熟悉感和信任感,一个好的设计语言本身可以在体验上为产品加分,也能够更好创造一致性的体验。



设计语言解决什么问题?


一致性


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



明确设计原则



让每一个设计很清楚知道,产品需要传递给用户的设计特征和原则是什么,以及整个平台的约束是什么,比如我们平台特征是安全感,方正,有对应的设计规范,比如小圆角,方正图形。那么设计师就得在这个约束在去进行设计,就不能设计成圆形,可爱的图形,因为和整个设计原则是违背的。



效率


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



多平台统一


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



设计语言包含哪些内容?


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


1.设计原则


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

统一:每个设计应该是统一的,不能有太多个性差异化的特征。

关于内容:用户应该更多关注的是内容,而非设计本身。
确定的:在设计中减少不确定的因素和预期。



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



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


所以在建立一个设计语言的第一步,应该建立一个设计准则。



2.色彩系统


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


▲ 主色盘


▲ 辅助色盘



▲ 色盘延伸

3.图形


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



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



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



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



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



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



▲ 图标规范

4.栅格系统


栅格系统是为了页面中更好的布局,保证布局统一性,栅格系统里面又分最小单位和间距。



▲ 在airbnb中对于间距,运用了8的倍数,所有的规范都是很有弹性的,8,16,24,48,64来建立。



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



▲ 网格系统中的行



▲ 网格系统中的水槽



▲ 网格系统中的边距



5.字体


界面中出现最多的内容,字体,字体除了传统意义上大小之外,还有字间距,行间距,字重对比等,还有字体颜色等等。



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



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



▲ 字体颜色,什么时候用品牌色,成功,错过,超链接出错等等各个状态的颜色如何去定义。



6.投影


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




7.图文关系


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



总结 

设计一个系统是一个很复杂的过程,前期一般需要比较高阶的设计来完成,设计系统完成后,对于基础的颜色,色彩,字体不要随意去改动,成本会比较高,至少需要保证这些字体颜色,一两年不要大的变化,今天和大家分享了一个设计系统,一个设计语言的大概框架,后续我将会拆解里面每个模块,逐步和大家分享如何去设计一个语言!



0条评论
别默默看啦~登录/注册一起参与讨论吧~

暂无评论

请选择举报理由

违反法律法规

侵犯个人权益

有害网站环境

更多训练营>>

为你推荐 · 训练营(全勤打卡报名费全额返累计全额返用户133,794人)

【6月】7天轻松入门C4D小练习
距离开班仅剩2天125人已报名
【6月】人像后期案例实操训练营
距离开班仅剩10天50人已报名
【7月】7天轻松入门C4D小练习
距离开班仅剩22天3人已报名
猜你喜欢
AI 神技能教你打造渐变花

2018-08-03

凉老湿 发表

AI 神技能教你打造渐变花
iOS14 设计规范独家翻译 它来了!

2020-11-16

酸梅干超人 发表

iOS14 设计规范独家翻译 它来了!
UI/UE | 产品体验日记(04)

2020-11-22

大漠飞鹰CYSJ 发表

UI/UE | 产品体验日记(04)
Figma让设计变得更轻松

2021-06-02

幺零三记 发表

Figma让设计变得更轻松
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习90000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了20,292
并提交了87份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 90000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证