UED设计培训
美国上市UED设计培训机构

400-111-8989

热门课程

写给策划看的简版UE入门

  • 时间:2018-01-19
  • 发布:UED培训
  • 来源:教程

关于UE,我脑子中只是一堆混乱的概念和经验,直到我拜读了一本书,对我帮助很大。将脑子中的知识慢慢梳理系统化了。这本书的名字我先卖个关子放在结尾。

书中提炼了四个设计原则,我将其精华部分,结合自己的理解,配上实际的案例,提炼成很干很干的干货,分享给大家。

我们开始吧:

这四个原则分别是:亲密性(Proximity)、重复(Repetition)、对齐(Alignment)、对比(Contrast)。

1、 亲密性

相关的就接近,无关的就走远!

什么是亲密性

简单的说,亲密性原则,就是界面上存在的元素,如果是相互关联的,在物理位置上要尽量接近。反之,不存在关联或者弱关联的,物理位置上要尽量远离。利用这一正一反,可以形成强烈的对比(也是四原则之一)。

看个例子:

写给策划看的最简版UE入门

看上面这个人物属性界面,就利用了亲密性的原则:名字、称谓、帮派……归为一类,气血、法力、攻击……归为一类,根骨、灵性……是一家。我们很容易就能看出这一点,就是因为同类的属性框间距更小、更靠近,这很容易理解,但为什么我们会这么认为呢?

因为利用亲密性,我们把界面上的元素进行了组合,成为了一个个独立的“视觉单元”:

写给策划看的最简版UE入门

对于RPG游戏、策略游戏,常见的就是密密麻麻的属性、列表,如果没有将其界面元素有效组织,让人看花眼只是小事,不具可读性的界面,玩家根本就没有耐心细致品味游戏优秀的数值设计,努力成了白用功。要实现良好的“可读性”,就需要利用亲密性原则,将界面分成一个个“视觉单元”。

利用良好的排版和颜色标记,纵使如此密密麻麻的数据项,也具有极高的可读性:

写给策划看的最简版UE入门

魔兽玩家广为流传的盗贼DPS计算器

为什么要使用亲密性

相信大家都听过“7±2”原则:由于人的大脑处理信息的能力有限,很难一次性记住7个以上信息,所以需要将信息进行整理分组,比如11位手机号码138********,将其拆分成138-****-****就比较容易记忆。

例如记忆圆周率,就是使用拆分组合的方式,将无意义的数字组合、串联,变成有意义的信息,人类才可以突破极限,背诵出惊人长度的数字。

写给策划看的最简版UE入门

同理,如果界面元素过多,人的大脑就会产生不适感,“我不喜欢看这个”,实际上是大脑自己能力不足而引起的……

如何使用亲密性

利用亲密性,可以组合界面中的元素,形成一个个“视觉单元”,将信息的“数量”降下来,同时信息的丰富程度提高,减少混乱,让结构变得清晰。

所以,将相关联的界面元素靠得更近,组建一个个视觉单元,让界面变得整齐有条理。

写给策划看的最简版UE入门

将界面元素进行整合,即使元素很多也不会觉得凌乱

另外,不是说所有界面元素都要进行整合,比如上面例子中的头像,它们成为“孤立元素”,也可以作为一个独立的存在。但是要注意,一个界面上的“孤立元素”和“视觉单元”也不能太多,不然就又违反“7±2”原则,成了另外一种混乱的源头了。

除了物理位置的接近以外,也可以用一些辅助手段来凸显亲密性,例如边框、分隔线,使用的时候要注意,这类元素只是起到辅助显示作用,灰度要低,比如:

写给策划看的最简版UE入门

这样子设计,美术就很明显得知道哪些线条是按钮的边线,哪些线条只是起分隔作用,她们在制作UI时不一定也照着你的样子画一条线,但通过这条线知晓了该部分界面的层次感,她们可以使用内阴影、凹凸效果、投影或是其他方式来实现你的需求。

2、 对齐

“不要随意安放界面中的元素!”

所谓对齐原则,就是教你如何安排好界面上各个元素的放置,让元素之间有着清晰的视觉联系,让整个界面看起来精巧、清爽。

对齐的分类

一般来说,对齐有三种:左对齐、居中对齐、右对齐。

还有一种两端对齐(之前文章也介绍过),会让字间距大小不一,产生很难看的效果,所以我们暂且不用。

设计新手都喜欢使用居中对齐,但随着设计经验的丰富,可能居中对齐是你最不常用的一种对齐方式,因为居中对齐很难“驾驭”,容易产生相当不规整的视觉引导线:

写给策划看的最简版UE入门

居中对齐,一般显得比较庄重和正式,例如邀请函,或是游戏中独立存在且想“刻意”让其显得重要的部分,例如大家都喜欢的抽卡:

写给策划看的最简版UE入门

比如,这张邀请函,就是采用居中对齐的设计,居中对齐和竖版设计是一种常见的搭配方式。

写给策划看的最简版UE入门

如何使用对齐

正如上文所说的“不要随意安放界面中的元素”,简单的理解就是:让界面中的每一个元素都有“左对齐、居中对齐、右对齐”三种对齐方式中的任意一种,这不是必须遵守的教条,但对新手很有用。

书中也有提过“每次只是用一种对齐方式”,其原理在于,尽量减少“主要”的视觉引导线的数量,当存在多条视觉引导线时,玩家的眼光会变得无所适从,不知道从哪里开始看起、到哪里结束。

写给策划看的最简版UE入门

界面元素越多就越需要对齐

上面提到的这个例子:

写给策划看的最简版UE入门

上图,Monster Attack是左对齐,如果把下面的说明文字改成居中对齐,会感觉怎么样?如果说明文字过长变成两行,那就是个灾难了……

写给策划看的最简版UE入门

标题下方的文本采用居中对齐就显得特别难看

“只使用一种对齐”应该是有范围限制的,比如同类型的元素,或是同一个视觉单元内部,并不是说一个界面内所有元素都要使用一种对齐方式。

灵活使用

使用对齐还有一个小技巧,一般来说文本内容使用一种对齐方式,但容纳其文本的文本块可以采用另外一种对齐方式。因为文本被文本块包裹,文本块成为了一个新的元素单元,可以不拘泥于原有的对齐方式:

写给策划看的最简版UE入门

把排版和文案做好,让美术同事美化一下,可快速出图

另外,对齐还有一种高级玩法,那就是打破对齐,可以产生强烈的视觉冲击,当然了,这个得看UI设计师的了。这种“打破”的行为,必须是主观能动的有意为之,规则立之不易,破之更难。

写给策划看的最简版UE入门

对齐应该是任何界面的基本要求,如果某个界面连基本的对齐都做不到,那只能说是制作者的态度问题。它是一个“入门容易、精通困难”的技巧,只要稍微留心一点就能做好对齐,但要通过对齐(或是打破对齐)达到更好的界面效果,就需要深厚的经验积累和独到的设计水平了,大家一起努力吧。

3、 重复

重复就是模板,将你的设计模块化。

重复是什么

首先我们得知道一个界面元素,哪些特性可以制造重复,例如:颜色、形状、材质、线条、大小、字体、图形……

所谓重复,就是以上某个同种特性多次出现,造成一种“同类”的感觉,如同上文介绍到的“亲密性”一样,起到将界面元素分组的效果。

写给策划看的最简版UE入门

任务或成就面板,就使用了重复的技巧:相同大小的图标、同种对齐方式,相同的字体、标记、按钮形式……大家一眼就能看出——它们是同一类的。

写给策划看的最简版UE入门

上面这张网页,就是极佳地使用了重复技巧:绿色的标题、字体,正文颜色字体,统一的对齐方式……虽然网页上的元素和文本内容极其庞大,但整个页面看起来极有条理性和统一性。

重复让界面变得更好

重复和亲密性起到了同样的作用,就是整合同一个类型的视觉单元,将其“捆绑”在一起。区别只是,利用重复,即使两个元素相距十万八千里,你也能知道它们是“一家人”。

人们口中经常说着所谓的“风格统一”,就是重复。

写给策划看的最简版UE入门

星际的UI是“风格统一”的典范

和亲密性的道理类似,虽然可以利用的重复特性很多,但每个特性不要使用次数过多。例如某个绿色标题的条目,一排排下来要十几个之多,那么大脑又要开始抱怨了:“怎么东西这么多……”。

写给策划看的最简版UE入门

傲娇的大脑

合理的做法就是将这些条目再进行分组,就像我这个任务面板一样,将“已完成”和“未完成”的任务用分割线隔开,或者使用标签形式,将其分在两个页面内:

写给策划看的最简版UE入门

任务系统非常丰富的页游、端游,采用的是标签 隐藏式树形标签,来对庞大数量的任务进行分组:

写给策划看的最简版UE入门

总之,重复也是对界面的一种整理方式,让界面元素增加重复特性,可以使其从众多元素中抽出。而且,使用好重复,也可以起到引导用户阅读顺序的作用,比如我们看一篇文章,一开始都会浏览大标题,然后再深入看内容的吧,这种“分层”的方式也是一种引导用户阅读大篇幅文字的方法。

4、 对比

同类的界面元素需要采用重复,不同类的界面元素就要采用对比。所谓对比,就是利用界面单位里某个特性的两个极端,比如边框得粗和细、冷色和暖色、材质的平滑与粗糙、水平或垂直、宽松和紧凑……

要运用好对比,必须避免元素太过于相似,既然要对比,就要对比强烈、截然不同。

写给策划看的最简版UE入门

强烈的对比才能突出你需要的重点

对比不强烈,就会造成冲突,冲突恰恰是“太过相似”而造成的。很多设计者甚至是专职美术,都喜欢用一种“接近的颜色”,殊不知,正是这种接近造成了冲突,看的人不会觉得你在突出它,反而会有“他们本来就是一样的,你哪里搞错了”的感觉。

写给策划看的最简版UE入门

不够强烈的对比只能造成冲突

利用好对比,可以有效增强页面效果——“对比吸引人眼球”,使用对比尤其“不要畏首畏尾”。

不用颜色也可以“对比”

很多UE设计被要求“不需要”颜色,因为可能会干扰到UI的配色设计。即使如此,我们也可以不用颜色就可以表现“色彩”,那就是灰度的调整:

写给策划看的最简版UE入门

在上文“亲密性”中提到的那样,利用灰度,即使不用颜色,也可以营造出一种层次感。

写给策划看的最简版UE入门

相信大家都玩过或听过GB,为什么同样是黑白,GB的画面就比我们小时候玩的电子表或俄罗斯方块更有表现力呢,除了像素区别外,另一个原因就是GB的画面是有16阶灰度。

写给策划看的最简版UE入门

这个小玩意是很多人的回忆吧

写给策划看的最简版UE入门

手机游戏《像素鸽》:即使是黑白的也有很好的画面效果

另外介绍一个小技巧:在使用Axure制作原型时,如果你们团队中的美术对原型图中的颜色有着极端的“厌恶感”,建议打开灰度模式,可将本页面所有的彩色转化成灰度:

写给策划看的最简版UE入门

如同我在本章节开头提到的,要形成对比,也有很多其他的方式。而且既然要对比,就要对比得彻底,胆子要大(这也是书中多次强调的),建议大家也可以用这个标准去要求一下美术大大,只要言之有理,他们是会接受的。

最后

介绍完了四个原则,大家会发现,其实这四个原则并不是相互独立的:亲密性和重复,其实就是增加界面元素的相互的对比;对齐元素,为的是更好地执行亲密性;同样元素使用同种对齐方式,就是利用重复原则……

任何知识都是工具,不让它成为束缚你的镣铐。

所以这四个原则,不是像教科书里的公理一样需要去一条一条地去执行,反而需要融会贯通环环相扣。你的某个按钮设计、某个排版方式,可能满足多个设计原则,当你看到一个好的设计时,它可能不仅仅只是使用了一种设计原则,可以是使用了多个原则,或是某个原则被多次使用……

那么总结这个四原则的意义何在呢。当我们看到一个好的设计,只是觉得美,嘴里说好,但总结不出为什么好哪里好。这四个原则就可以像地图一样,指引我们往“好”的方向走。

写给策划看的最简版UE入门

纵使没有明确的路,那也要走正确的方向

这本书就是Robin Williams的《写给大家看的设计书》,强烈推荐大家去看。这边书介绍的案例极其丰富,我只是将其结合了自己策划工作中的一些问题。其他方面的设计,比如书籍、海报等,本书的知识都很有用。

写给策划看的最简版UE入门

UE设计也有很多其他的好书,比如《简约至上》、《用户体验要素》等等。书很多,大家的时间精力有限,有选择地阅读,“书是工具”,重要的还是要应用到实践上来。

策划需不需要学习UE知识?

大家只要随便翻看一本《XX产品经理入门》、《XX交互设计入门》,你会发现,同一个团队的不同岗位,所被要求的岗位工作很多都是交叉的。比如,做UE,有的说是产品经理做的,有的说是交互设计师做的。这说明,同在一个团队,大家都倾向于“做多”,而不是“做少”,每个人的工作职责,除了核心工作,不是这么的泾渭分明,“哪里有空缺,哪里就需要人补上”。

写给策划看的最简版UE入门

原型设计

如果您从事的是应用开发而不是做游戏,UE就是一个比较重要的岗位。游戏策划需不需要做UE,这是由本团队成员实际能力情况决定的,至少目前绝大部分的游戏开发团队,是没有专门设UE岗的,就算有也不表示你一丁点UE知识都不需要懂。

游戏也是软件,也有界面交互,也强调“用户体验”,至少本人从新入职到现在,一直都没有停止过原型设计的工作。

而且,做UE真的很好玩。

写给策划看的最简版UE入门

我也承认自己不是这么一个纯粹的策划,平时不只是写文档、做图表、和各位程序美术大大撕逼。也偶尔沉迷于用Axure做各种效果、学习一下UI制作。和各位美术大大们的交流一直都很好,至少我知道描边、投影、渐变、内发光、色相、钢笔……而不是“给我一个五彩斑斓的黑色”的那种货。

总之,学多不如学少,如果您觉得学UE对自己策划职业生涯没有用,您可以出门左转去学学数值、学学系统,或者学学写剧情,总有你需要学习的。

写给策划看的最简版UE入门

“斜杠青年”

文章终于写完了,在写之前“雄心壮志”,想打造一篇条理清晰、论点突出的优质教程,结果写得仓促,写完一看好像还是有点乱……大家如果还有什么疑问,欢迎留言,或者有什么Axure的问题也可以问我。另外大家如果看得起我,有自己做的不是很满意的原型图,也可以发给我,我尽我一点微薄之力帮各位兄弟看看,有空帮忙修改不收钱哈哈哈……

感谢大家阅读由UE设计教程栏目分享的“写给策划看的简版UE入门”希望对大家有所帮助,更多精彩内容请关注UED培训官网


免责声明:本文由小编转载自网络,旨在分享提供阅读,版权归原作者所有,如有侵权请联系我们进行删除

上一篇:如何建立一个UE设计体系?
下一篇:这些“不好看”的网站,用户体验反倒还不错?

UI设计中扁平图标绘制的终极指南

6条黄金原则,让你更懂UE设计

解读色彩的情感效应!与设计形影不离

设计懒癌福音!移动端顶部栏设计总结拿去不谢

选择城市和中心
贵州省

广西省

海南省