如何定义一套设计语言——设计语言包含什么内容(四)
设计语言是我们传达给用户的调性是一致的,包括:
设计原则
色彩系统
图形
栅格系统
字体
投影
图文关系
1.设计原则
产品的设计不仅仅在于外观和功能方面的体现,更来源于用户的每一次的操作都是流畅最合理的。在网页上浪费鼠标的点击,也是在挥霍用户的好感。
那么在多个部门之间,需要共同协作时,遵循一致的设计原则将使我们的设计有章可循,有迹可查的,系统化的设计语言还可以方便产品的迭代,同时也能提升开发效率和团队协同效率。
一个优秀的产品核心是产品的价值观和设计原则。
设计价值观
设计价值观通常为我们指引了设计方向。
简单:页面设计简洁,交互良好,去除可能造成干扰的设计元素,用户关注的是内容体验,而非单一设计本身。
一致性:设计风格应该是一致性的,不能有太突兀个性化的特征。
专业:好的设计一定是能经得起放大到具体到细节的,经得起推敲的,用户才有更好的体验,设计和开发也有了存在感。就像交朋友一样,我们都希望和具有良好,严谨,专业,可靠这些品质的人做好朋友。
设计原则
设计原则指在设计中按什么标准来执行,是设计系统中必不可少的一部分,例如:
一致性:在页面场景中按钮大小,圆角边框大小,风格是否一致,避免存在多种风格误导用户,减少学习成本。
易用:将组件进行封装,避免重复劳动。
亲密:相关联的元素尽量放在一起。
视觉原则:
对比的根本是避免页面元素过于相似,如果元素不同(大小,颜色,粗细)等不同,就完全做成不同的,这样模块之间有层级关系的变化,可以让用户快速识别到哪些是关键信息。
重复:重复的目的是形成“一致”。不同页面重复出现的颜色,按钮,字体等。既有条理又增加统一性。
亲密性:互相关联的元素靠近形成组,若多个元素,则归纳为一个整体,而不是独立元素。
2.色彩系统
色彩能给人强烈的视觉冲击,是我们看到一个物品首先看到的形状,颜色。
我们在建立设计语言的时候,色彩系统的建立是重中之重。
设计语言中的色彩包括主色(品牌色)、辅助色、灰阶,成功、失败等颜色。色彩系统一旦建立好,以后的设计就根据这些色彩进行设计延展。
其中颜色的使用不仅要考虑整体页面的统一性,还要达到准确传达信息的目的。提高产品的规范性和统一性。
主色
辅助色
色盘延伸
3.图形
图形,即特殊含义的形状,是设计中除了颜色外最重要的元素。
图标、背景图形都是图形的一部分,目的是快速传达信息,降低用户理解成本,美观好看是它的设计初衷。
图标
插画图形,一般有故事性在里面。
4.栅格
栅格系统是将空间分割成有规律的网格,每一个网格称为一个单元,遵循一定规则将界面元素进行横向布局,适用于大型区块间距,以使页面信息更加清晰明了、美观易读。
5.字体
页面中出现最多的就是字体,字体的设计原则有字体,字号,字重,颜色,字间距,行间距,段落间距。
6.投影
在设计中,相比平面,好的投影关系通常能给我们更立体的感觉。
7.图文关系
图文关系的处理能使页面更加协调,统一。
总结
设计语言是比较庞大的系统,一旦完成后,对于基础的颜色,字体不要轻易改动。
以上四部分就是关于如何定义一套设计语言的框架。