更多课程 选择中心


UI培训

400-111-8989

UI设计师是如何构建设计语言的


一个好的设计作品,是经过设计师不断地修修改改,添加删减,反反复复的一个过程之后呈现出来的作品,所以,一个好的设计师也是经过不断地学习,不断地练习才会做出好的作品。优秀的设计是一门语言,那么优秀的设计师是如何构建设计语言地呢?

UI设计师是如何构建设计语言的

一、为何构建设计语言

1、品牌形象:随着公司发展会衍生一系列线上产品以及线下物料,设计语言的构建大大统一传达了公司品牌形象,产品后续迭代中也不会混乱,更有效的维护企业品牌形象,加深用户印象,有效提升用户体验。

2、用户体验:线上产品的设计语言更注重用户体验,比如不同的界面边距和字号大小,产品的基调也会不同,用户的情绪感受也不一样。所以在构建设计语言时,首先要了解产品特性以及使用场景和使用人群,确定好产品方向再着手构建设计语言如何传达给用户合适的设计体验。

3、开发效率:统一的设计组件可以大幅度提高开发者的时间效率以及项目周期,还有就是在项目后期迭代或修改时,统一的样式可以快速修改。减轻了设计对接和开发实现的负担。

二、语言构建

1、颜色:无论UI还是平面,颜色是视觉传达的最核心也是最基本的语言,不同的主色,会给人不同的视觉感受,同样的主色不同的配色,视觉感受也会不同。在设计中确定好主色后,配色的选择也较为关键。界面设计中除了背景色、字体颜色、图标以外,后期上传的产品图以及轮播图都要规范。

2、字体:字体的设定包括字号、字重、行距、颜色对比以及界面间距留白的协调性。Material Design对字体标题和内容文字的大小刚好是1.6倍,接近黄金比例,所以字体的处理也要有所考究。构建文字在界面美观和基调同时,更要注重用户可读性,分清主次关系。字体种类在界面中应存在一种或者两种,不可出现三种字体。字号和字颜色避免过于接近,导致无法分清关系。正文行间距一般为字号的1.5~1.8倍之间。

3、形状:形状的使用在界面设计中也最为常见,最多的就是直角和圆角,以及带有品牌元素的形状。不同的形状传达的情绪也不同,比如说尖锐的和弧度的,包括圆角大小不同视觉感也不同。根据重复原则,如果某个形状在界面中重复使用时很容易加深用户对于产品的印象,就像很多设计师设计icon时结合产品特性以及logo的设计基因相结合。

4、图标:接着上面形状的理解,图标的风格设计也要和界面的其他设计元素应保持统一的设计语言,实现产品界面中所有视觉设计的一致性。图标设计构成通过形状、边框、颜色、圆角、大小、肌理等来延续传达在界面的基调和品牌基因。

5、网格:网格系统目前比较成熟的设计布局工具,设计中使用一套规范的间距,来保持产品的一致性,网格间距以倍数方式,比如1X,2X,3X,4X。比如现需设计一个让用户感受到轻松愉悦的页面,可以使用较大的栅格间距比例,以12为基准,比如间距一律使用12,24,36,48。如果是信息较为紧密的,则可以使用8的倍数,如8,16,24,32等。不同的界面信息承载使用网格也不同,界面空间留白不同,界面风格也会不同。比如:Airbnb界面边距48px,整体产品调性简约大气;马蜂窝的界面,侧重于突出图片,因此页面内容区域比例会比较大。

6、图片比例:对于图片比例,设计师有的往往凭感觉设定,但最好合理的使用图片规范,常见的图片尺寸有16:9、4:3、3:2、1:1和1:0.618这些比例经过前辈验证也是做合适视觉尺寸。

三、界面呈现

由于界面和产品需求不可预期性,构建设计语言无法100%的的满足所有界面,根据界面最终呈现在不影响设计方向前提下,以及产品后期可迭代空间,可以进行局部调整设计方案。

对于设计师来说,他们设计的作品就像是自己孩子,是有生命的,设计师在设计一件作品的时候会放入一些自己的想法在里边,让这件设计作品更加的有灵性。所以想要成为好的设计师,不仅仅得有技术,还需要有自己的想法。这样做出来的作品才会被大众喜欢。

预约申请免费试听课

填写下面表单即可预约申请免费试听! 怕学不会?助教全程陪读,随时解惑!担心就业?一地学习,可全国推荐就业!

上一篇:提高你UI设计能力的四种方式
下一篇:如何保持设计水平不断进步

ui设计中设计风格发展历程

UI设计初学者该如何学习UI

零基础UI会用到哪些软件?

photoshop零基础学习

  • 扫码领取资料

    回复关键字:视频资料

    免费领取 达内课程视频学习资料

Copyright © 2023 Tedu.cn All Rights Reserved 京ICP备08000853号-56 京公网安备 11010802029508号 达内时代科技集团有限公司 版权所有

选择城市和中心
贵州省

广西省

海南省