联系我们 face+ 关于 服务 案例
首页 案例 服务 关于 face+

ui设计语言运用法则,让你的设计更完美

Time: 2020-01-19

UI设计所涉及到的内容是非常多的,其中还包括了语言的运用,这就让许多新手设计师头疼不已了,因为语言的运用太难了,下面我们跟随小编一起来了解一下ui设计语言的相关资料吧。


ui设计语言运用法则

法则一、语言使用的准确性

  如果用户无法准确理解ui设计中的信息,那么用户后续的操作就会出现相应的阻碍,会降低用户的操作效率。这也就要求设计师在使用语言时一定要准确,尽可能不要产生歧义,不要让用户产生过多的思考。

  法则二、语言使用的通俗性

  有的设计师认为语言专业能够提升ui设计的质量和等级,然而并非如此。我们的软件是给广大用户使用的,而不是给专业技术人员使用的。尽量不要使用专业术语,因为大部分用户根本不理解语言的意思。

  法则三、语言使用的一致性

  在具体的表述方面,ui设计师也需要注意同一事物的说明要使用同一个词语,否则会给用户造成不必要的困扰。例如,如果你使用了“查找”,就不要在同样的情况下使用“搜索”,这样更有利于用户的理解。

  法则四、语言体现情感关怀

  用户对于语言是比较敏感的,因此我们尽量不要使用“警告”“禁止”等不友好的语言,可以使用“温馨提示”“请勿”以及一些比较时尚的网络用语。总之,语言上的使用,要给用户亲切、友好、轻松的感受。


1.jpg

(图片来自网络)


  ui设计语言构建元素

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

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

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


2.jpg

(图片来自网络)


  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这些比例经过前辈验证也是做合适视觉尺寸。


  其实ui设计语言虽然看起来比较复杂,但是只要掌握了它的应用法则,相信你也可以在ui设计时随心所欲的运用语言,让你的设计更完美哦!


合作咨询

上海(总部)

上海市浦东新区郭守敬路498号22号楼
021-61057328
service@faceui.com

办公地址地图

北京

北京市东城区后永康17号A座
010-64015620
service@faceui.com

办公地址地图

成都

四川省成都市锦江区东大街牛王庙段100号
028-62790929
service@faceui.com

办公地址地图
首页 | 案例 | 服务 | 关于 | face+ | 智见

Copyright © 2009-2022 FaceUI design. All rights reserved


沪ICP备13044459号-5

上海办公地点地图
北京办公地点地图
深圳办公地点地图
在微信中搜索faceui
或保存二维码在微信中打开