UI设计中如何做到一致性?

2021-04-09
5198
0

我们的用户是忙碌的,没有耐心,他们不愿意花更多时间来学习使用你的产品。所以我们在做设计时候,就尽量多遵循常用的UI Patterns,它是什么?是一种常用可用性问题的一种通用解决方案。

但是如果一味遵循常有的Design Patterns,会导致我们界面看起来无创新,那么该什么时候突破这种界限,下面我会简单举例说明。

 

影响它的关键要素

颜色间距字体大小图标一致性、规则一致性、交互操作等,我们在做界面设计时,如何科学把控这些?

这里就要告诉大家一个常用的设计法则“重复”“节奏”“韵律”,学过平面设计的同学应该知道,这几个点吧,在平面设计中运用比较多的种设计方法。

举一个例子,重复如何运用在UI设计中?

 

重复间距

上两图中,我们看可以看出里面设计采用的间距都是基于8的倍数,并重复运用。有节奏有韵律的重复使用这些间距,可以产生节奏美。

 

重复控件

上图facebook截图,按钮表象层圆角基因一致。如果有大小差异,它们使用参数化原则去定义圆角,大一点的控件圆角大一些,反之亦然。

 

布局规则

上图是腾讯视频界面截图,我们可以看到他们在布局上制定了一些规则。

比如栏目与栏目之间才有重复使用相同布局,2×3(指单个栏目摆放视频数量),然后接着下面栏目就是1×1,下面又接着2×3,后面栏目将1X1和2X3集合起来,然后重复使用。

这样重复的网格布局,对我们产品有什么好处呢?大家有没有发现目前市面上的视频类音乐类的产品差不多这样布局吗?(这其实就是外部一致性原则)。

因为用户已经熟悉且掌握这种模式,不再需要重新学习

那么如何在这种同质化的产品中脱颖而出呢?布局中可以使用对比,突出核心功能体验,又如还可以内容优于同类产品,品牌特征打造,符号运用。

 

一致性原则 影响着用户行为

导航模式一级导航,二级导航,如果采用常用设计模式,用户基本可以很轻松的找到自己想要的内容。

再来说下颜色如何影响用户行为:比如系统里面定义蓝色是可点击的颜色,那么我们在做设计是时候就要注意,哪些可点击,颜色使用是否合理,同类颜色,表达相同的含义,就不能用在其他意义的元素上。

大原则:相同含义的元素在不同的地方执行相同的操作时候,反馈机制需要一致。

上图左边是ios的开关,右边是materials design 材质设计系统的开关,这两种开关大同小异,它符合用户心理表真,我们日常生活中家里灯开关不就和这个类似吗?所以在我们设计这些就可以尽量遵循用户的心里表真,保持内部外部一致性。再比如在ios系统里面在对应列表上左滑动是可以对该列表操作的,那么在安卓里面的列表设计就需要慎用左滑操作。 

 

总结

一致性设计大方向为产品有更杰出的体验,在保证用户体验良好的同时,我们需要与同类产品做出差异化竞争设计,这就需要我们平时多观察互联网设计趋势,国外设计趋势,集合自己品牌去打造一套好用的产品。

在产品设计中我们时刻留意着关键元素一致性的运用,确保产品整体体验一致。

1.颜色:在使用颜色上需要严格去定义,比如绿色用于正确颜色,红色用语错误颜色,蓝色是可以点击颜色,这些都是常用的设计模式。

2.布局/排版:布局遵循最小化设计原则,导航路径清晰可见,一级导航和二级导航一定要区分清楚,二者不可混用,排版布局上尽量遵循格式塔心理学原理。

3.字体:一个app使用一种字体贯穿整个产品设计,字体大小运用重复原则,重复可以使其保持一致性。

4.交互:这里我简单说下,操作模式,反馈机制要符合用户心理表真,常用功能操作流程要和外部环境保持一致性,比如我点击界面上蓝色文字这时候就要有正确反馈机制,而不是出一个弹窗。

5.图标:图标一致性我相信大家都懂吧。

以上就是本期分享的内容了,希望对各位小伙伴有所帮助~

转载声明:本文来源于网络,不作任何商业用途

免责声明:本文内部分内容来自网络,所涉绘画作品及文字版权与著作权归原作者,若有侵权或异议请联系我们处理。
收藏

全部评论

您还没登录

暂无留言,赶紧抢占沙发
王氏教育是国内专业的CG数字艺术设计线上线下学习平台,在王氏教育,有原画、插画、漫画、影视、3D模型等培训课程,也有学习资源下载、行业社区交流。CG数字艺术学习,来王氏教育。
绘学霸iOS端二维码

IOS下载

绘学霸安卓端二维码

安卓下载

绘学霸微信小程序二维码

小程序

版权声明
本网站所有产品设计、功能及展示形式,均已受版权或产权保护,任何公司及个人不得以任何方式复制部分或全部,违者将依法追究责任,特此声明。
热线电话
18026259035
咨询时间:9:00~21:00
在线客服
联系网站客服
客服微信:18026259035
公司地址
中国·广州
广州市海珠区晓港中马路130号之19
绘学霸客户端(权限暂无,用于CG资源与教程交流分享)
王氏教育 王氏教育