UI设计中的一致性原则
为什么一致性在UI设计中很重要,我们平常挂嘴边的一致性原则到底是什么?一致性原则如何影响用户行为?价值在哪里?
今天我就带大家探讨我们在处理界面的时候,如何遵循一致性原则,该如何去做?
一致性原则的优势
我们遵循一致性的原则目的是为了减少用户认知负荷,用户能够轻易上手使用产品,熟悉的导航路径,熟悉的设计模式。
我们知道,我们的用户是忙碌的,没有耐心,他们不愿意花更多时间来学习使用你的产品。所以我们在做设计时候,就尽量多遵循常用的UI Patterns,它是什么?是一种常用可用性问题的一种通用解决方案。
但是如果一味遵循常有的Design Patterns,会导致我们界面看起来无创新,那么该什么时候突破这种界限,下面我会简单举例说明。
影响它的关键要素
颜色、间距、字体大小、图标一致性、规则一致性、交互操作等,我们在做界面设计时,如何科学把控这些?
这里就要告诉大家一个常用的设计法则“重复”“节奏”“韵律”,学过平面设计的同学应该知道,这几个点吧,在平面设计中运用比较多的种设计方法。
举一个例子,重复如何运用在UI设计中?
重复间距
上两图中,我们看可以看出里面设计采用的间距都是基于8的倍数,并重复运用。有节奏、有韵律的重复使用这些间距,可以产生节奏美。
重复控件
上图facebook截图,UI设计中的一致性原则https://www.aaa-cg.com.cn/ui/2651.html按钮表象层圆角基因一致。如果有大小差异,它们使用参数化原则去定义圆角,大一点的控件圆角大一些,反之亦然。
布局规则
上图是腾讯视频界面截图,我们可以看到他们在布局上制定了一些规则。
一致性原则影响着用户行为
如导航模式;一级导航,二级导航,如果采用常用设计模式,用户基本可以很轻松的找到自己想要的内容。
再来说下颜色如何影响用户行为:比如系统里面定义蓝色是可点击的颜色,那么我们在做设计是时候就要注意,哪些可点击,颜色使用是否合理,同类颜色,表达相同的含义,就不能用在其他意义的元素上。
大原则:相同含义的元素在不同的地方执行相同的操作时候,反馈机制需要一致。
上图左边是ios的开关,右边是materials design 材质设计系统的开关,这两种开关大同小异,它符合用户心理表真,我们日常生活中家里灯开关不就和这个类似吗?所以在我们设计这些就可以尽量遵循用户的心里表真,保持内部外部一致性。
再比如在ios系统里面在对应列表上左滑动是可以对该列表操作的,那么在安卓里面的列表设计就需要慎用左滑操作。
总结
一致性设计大方向为产品有更杰出的体验,在保证用户体验良好的同时,我们需要与同类产品做出差异化竞争设计,这就需要我们平时多观察互联网设计趋势,国外设计趋势,集合自己品牌去打造一套好用的产品。
在产品设计中我们时刻留意着关键元素的一致性的运用,确保产品整体体验一致。
1.颜色:在使用颜色上需要严格去定义,比如绿色用于正确颜色,红色用语错误颜色,蓝色是可以点击颜色,这些都是常用的设计模式。
2.布局/排版:布局遵循最小化设计原则,导航路径清晰可见,一级导航和二级导航一定要区分清楚,二者不可混用,排版布局上尽量遵循格式塔心理学原理。
3.字体:一个app使用一种字体贯穿整个产品设计,字体大小运用重复原则,重复可以使其保持一致性。
4.交互:这里我简单说下,操作模式,反馈机制要符合用户心理表真,常用功能操作流程要和外部环境保持一致性,比如我点击界面上蓝色文字这时候就要有正确反馈机制,而不是出一个弹窗。
5.图标:图标一致性我相信大家都懂吧,以前写了一篇关于图标规范的,有兴趣的可以去看下,5招轻松打造系统图标规范。
UI设计中的一致性原则相关推荐
- UI设计中图标设计的有几大原则
本文由:"学设计上兔课网"原创,图片素材来自网络,仅供学习分享 UI设计中图标设计的有几大原则?一款简练的图标比起同样大小的文字符号,可以表达更多的意义,根据界面的需要,控制图标的 ...
- 在UI设计中如何正确使用颜色
在我们进行UI设计时,颜色往往是我们表达理念重要的一点,但也是我们常常会忽视的一点.颜色其实如同语言一样,我们可以通过颜色的变化组合,来表达不同的情绪. 正确使用颜色不单能让我们吸引到客户,也能更好地 ...
- ui设计中的版式设计_设计中的版式-第3部分
ui设计中的版式设计 and how not to suck at it 以及如何不吸吮它 This is the 3rd and last part of the series. Here we t ...
- [css] ui设计中px、pt、ppi、dpi、dp、sp之间的关系?
[css] ui设计中px.pt.ppi.dpi.dp.sp之间的关系? QQ20150717160352 做了几个移动端的项目之后,深感移动端尺寸换算的必要性,在此做个总结. 先介绍下各自的定义: ...
- 中剪取一种颜色的板块_不知道UI设计中APP界面版式如何排版?来看这个!
UI设计中APP的界面看似只有几个简单的元素组合起来, 所有元素的绘制可以说比较简单: 然而,当一个产品原型出来后,设计师如果单纯按原型来进行设计而不考虑信息化规则, 那么很多时候就会出现不协调的效果 ...
- Ui设计中的动画如何应用,你知道吗?
UI设计中的动效 站在用户的立场对每段动画做出决断,"挺好看的"可不是正确答案. 保持每段动画时间不超过300ms. 避免使用线性动画,它使得动画看起来迟缓.无趣且机械. 99%的 ...
- android弹窗设计,想印:UI设计中弹窗设计的五条基本原则
原标题:想印:UI设计中弹窗设计的五条基本原则 :当你将弹窗设计及使用得恰到好处时,它们就会是非常有效的用户界面元素.它们能帮助用户快速且便捷地达成目标.然而当错误使用时,弹窗却会困扰你的用户.学会如 ...
- UI设计中置灰功能总结
我最近在梳理产品报错场景的过程中,发现"置灰"状态的使用可以有效的提升报错场景中的用户体验.今天我就针对UI设计中置灰功能总结进行简单的说明. 一.置灰 「置灰」是相对于「常态」而 ...
- UI设计中异常状态设计总结
当用户停留任何一个界面,进行任何一个操作都可能发生异常状态.如果接到每个需求都去制定一次异常状态,这样的后果可能会使得产品的不同模块.不同流程,异常状态都不一致.全局规范性被破坏,同时设计师的效率也降 ...
最新文章
- 使iPhone手机持续振动
- DL之Xception:Xception算法的简介(论文介绍)、架构详解、案例应用等配图集合之详细攻略
- SQL语句求解同一人物不同日期,某一属性的差值
- boost::hana::remove_range用法的测试程序
- OpenGL Viewport Array视口阵列的实例
- 10个最常见的数据库缺陷
- jzoj1158-荒岛野人【扩欧,gcd,同余方程】
- javaSE_base04_集合框架
- 哪个html在大部分浏览器下是不隐藏的,前端浏览器兼容性问题总结
- 被尘封的故事鸿蒙轩,被尘封的故事全任务通关人物存档
- php添加开机启动脚本_php-fpm开机自动启动Shell脚本
- mac vscode debug安装调试moodle
- 中学生编程大赛_青少年编程竞赛汇总
- 用 DiskGenius 和 HDD Regenerator 修复硬盘逻辑坏道和隐藏物理坏道
- 警惕Linux的传销投机属性,恢复建立契约商业化社会秩序。
- vscode 编写html 浏览器显示 空白 白屏
- JavaWeb过滤器(Filter)
- t420i升级固态硬盘提升_固态硬盘能提升游戏性能吗
- Faster-RCNN论文及原码解读
- 湖南中医药大学OJ—1140到1149