火星网校
UI设计中的一致性原则
发布时间：2024-03-17 20:56:24 浏览量：326次
为什么一致性在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设计中的12个基本动效
UI设计中的排版设计技巧
审美不好可以学习UI设计吗
热门课程推荐
热门资讯
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
7. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
8. 史上最全，平面设计UI设计必备的77个国内外素材、设计资源网站
ui设计社区,大神太多了。3、behance: https://www.behance.net/ ,著名设计... 对于品牌设计师来说,除了图案素材收集之外,还有一个很重要的,就是设计故...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
10. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
最新文章
