该有的视觉元素全都有,设计不好到底差在哪里?

编者按:小时候我们很多经验都是来自于寓言故事,故事总能帮你更好地理解一些事情和道理。关于设计,这个道理同样适用。今天的文章,我们就跟着一个设计师的经历来学点什么吧。

我有一个朋友,名字叫做 Jimmy,这的确是一个很普遍的名字。当我认识他的时候,他正供职于一家名为 Shmuckle 的公司,而他正是这家公司的设计师。和所有的设计师一样,他日思夜想梦寐以求的,是成为一名著名的设计师,而乔布斯的经历对他有着不可磨灭的影响。Jimmy 和很多设计师一样,着迷乔教主。好在 Jimmy 的崇拜并不是停留在嘴上,而是身体力行,力图在公司里面推行好的设计。在 Jimmy 的眼中,好的设计应该是直观的、创新且令人愉悦的。

当然,故事的发展如果总是一帆风顺就没有意思了。Jimmy 果然一如正常的剧情推进……他碰到障碍了。

该有的视觉元素全都有,设计不好到底差在哪里?

这一次,Jimmy 正在执行一个重要的项目,这个项目的成败将会直接影响到他的职业生涯。这次的任务,他需要为他们公司的一款产品,重新设计整个控制面板。而就在这次的项目当中,Jimmy 发现他没有办法拿出一套足够优秀的解决方案。好在他还有 Plan B,那就是重新找灵感。Jimmy 开始重新播放他最喜欢的设计类的视频,阅读曾经给他启发的文章,收听其他同行所开设的播客,以期在其中找到感觉或者灵感。

该有的视觉元素全都有,设计不好到底差在哪里?

可惜,灵感并没有如期而至。局面尴尬了。

就在此刻,援手到了。Sarah 是公司的资深设计师,正巧这个时候路过 Jimmy 的工位,看到了 Jimmy 纠结挣扎的样子。这是多么熟悉的场景啊,她早年入行的时候,同样经历过这样的状态,为求一好设计而痛苦不已。如今,她已经能够轻松驾驭不同的需求,足以应对复杂多变的设计项目。

该有的视觉元素全都有,设计不好到底差在哪里?

「Hey Jimmy,老远就看到你正在揪头发,看样子正在构思新设计吧,瞧你这个状态,应该不太顺利吧?」

「诶,客户说让我给他们重新设计整个控制面板。他们觉得不够好使,希望新的控制面板能够更好展示信息,提升效率,最好再把几个比较明显的可访问性问题给解决一下。但是我怎么设计……都觉得不对。客户那边有不少人参与了测试,有人觉得挺棒的,有人又非常讨厌,还有一部分直接说还得接着改。现在,我觉得无能为力,不知道要怎么弄了。」Jimmy 保持着挠头的姿势,盯着屏幕说道。

「别纠结,」Sarah 微笑道:「如果一直盯着问题解决问题是常常会陷入这样的困境的,解决方案其实并不复杂,你需要从根子上来想办法。只要让整个设计方案贴合规则基础稳固了,问题就会迎刃而解了。其实,关键也就是几个基本的设计原则。」

该有的视觉元素全都有,设计不好到底差在哪里?

「虽然这话经常听到,但是真的能行?」Jimmy 狐疑地盯着 Sarah,思忖两秒感觉到大姐头这是要传授秘籍,便摸过小本子,端正坐姿,准备做笔记:「那么,都有哪些原则呢?」

该有的视觉元素全都有,设计不好到底差在哪里?

Sarah 拍了拍 Jimmy 的肩膀,端了杯咖啡,说道:「下楼散步吧,咱们边走边聊。」

「其实,在产品完成之后,是需要基于几个基本的原则来重新审视和调整设计的。」Sarah 喝了一口咖啡,慢慢地开始说。

该有的视觉元素全都有,设计不好到底差在哪里?

保持清晰

Jimmy,如果脑子里面的思路没有梳理清晰,很难做出条理清晰的产品的。因此,在设计产品之前,先应当消除思维中的混乱,有几个事情,在设计的过程中要始终保持关注:

  • 业务目标,客户的问题和需要的功能则会催生设计,而这几个因素之间是存在关系的。
  • 永远不要为了好看而牺牲功能。
  • 下一步要做的事情始终要是不言自明的。
  • 对于最重要的内容,要借助负空间、色彩、字体、图形和其他的 UI 元素来进行突出展示的。
  • 各种尺寸的文本都应该清晰可见。
  • 图标应该精确而锐利。
  • 除此之外,要让设计保持微妙而恰到好处。
  • 通过设计,你的用户应该本能的知道他在哪里,以及该做什么。

该有的视觉元素全都有,设计不好到底差在哪里?

产品的外观最终都是在清晰的设计(或者不够清晰的设计)之下的副产物。清晰的设计意图,最终会转化为清晰的产品设计。——Massimo Vignelli

「我记得 Massimo Vignelli 在他的《The Vignelli Canon》中写道,一个混乱而复杂的产品始终是源自于制造者本身的混乱,说明这个人本身内心深处心态复杂而想法混乱。」Sarah 说道。Jimmy 此刻若有所思。

该有的视觉元素全都有,设计不好到底差在哪里?

可操作的界面

「接下来的这一点也同样很重要。我们设计的数字产品必须清晰,也要专注于当前的任务,一个交互性强、可操作性优秀的 APP 才是用户所需要的,而要做到这一点,屏幕上的内容应当始终是最新的,并且始终保持较高的相关性。与此同时,APP  也应当作为用户意图的延伸。如果用户打开了你的 APP,想要解决某个问题,执行某个任务,而你的 APP 做不到这一点,那么情况就很糟糕了。」Sarah 说道。

她停了几秒钟,梳理了一下思路,继续说道:「你看,我们所做的一切都是为了确保我们的方案,能够在正确的环境中,面对着对的用户,解决亟需解决的问题。当然,我们要经历很多次的迭代,才能靠近这一目标。」

该有的视觉元素全都有,设计不好到底差在哪里?

该有的视觉元素全都有,设计不好到底差在哪里?

主观的愿景

「许多设计师和开发者都在说,APP 应该灵活,应该满足所有客户的需求。好吧,Jimmy,这些说法都是胡说八道的。但是有一个说法很真实,也需要你时刻谨记:试图取悦每个人只会带来无尽的压力和痛苦,让你沮丧,失去资源。所以,不要害怕失去一部分用户,真正需要担心的是失去愿景和远见。」

「一个伟大的而足够优秀的数字产品,必须始终清楚它到底是服务于谁的。只有牢记真正的用户,明白他们的需求,才能开发出真正有效的解决方案。最好的数字产品当中,都是藏着愿景的。」Sarah 和 Jimmy 走到了大楼的窗户附近,看着外面来往的人流,Jimmy 忍不住问到:「那其他的用户呢?」Sarah 笑着回答:「当我们满足目前的目标之后,才能顾的上其他的人。我们的目标用户才是核心,其他的人不喜欢,和我们的愿景不匹配,也不用操心。市场上会有其他的应用或者服务能够满足他们,让他们高兴,而我们总是只能身处一个阵营,你不可能什么都拥有。」Sarah 笑着回答 Jimmy 的疑问。

该有的视觉元素全都有,设计不好到底差在哪里?

当人们寻找软件和服务的时候,他们要的并不是功能,他们要的是解决问题的方法,一个和自己相匹配的愿景。——37Signals《Getting Real》

该有的视觉元素全都有,设计不好到底差在哪里?

反馈系统

下一个原则,也是一个很重要的注意事项,那就是反馈。反馈能够帮用户确定操作是否执行了,明白结果是否发生,让用户明白当前的情况:

  • 交互发生时,相应的交互元素应该被凸显出来
  • 进度指示控件应该持续地显示当前状态
  • 动画和声音的加入有助于用户理解交互的状态和结果

「我想你应该知道,即使技术如此的进步,人类本身的生物性决定了我们依然是依靠反馈来确知互动的结果和状态的。我们的身体(视觉或者触感)需要感受到反馈,再像大脑发出信号,而虚拟的界面背后到底在发生什么,需要全面的交互设计传递出来,只有这样用户才不会费劲巴拉地去思考之前的点击或者滑动交互是否操作成功了。反馈给用户的信息也应该是能够被轻松理解的,用户不应该在这个事情上再费劲去思考了。因此,你手边应该有关于心理学、行为学这类能够揭示人类思考的图书,因为它们能够帮你提升技能。」Sarah 喝了一口咖啡,润了润嗓子,带着 Jimmy 又溜达上楼,回到了办公室。

该有的视觉元素全都有,设计不好到底差在哪里?

善用隐喻

「隐喻——我这里说的并不是文学中的隐喻,」Sarah 又提到了一个看似无用但是经常被说起的概念:「你看,UI界面中的设计元素和交互方式和我们的现实生活中的元素和交互方式是如此的相似,这就是借用隐喻将我们的熟悉的元素和交互都投射到虚拟的数字产品当中。这样一来,用户会更快地学会和理解。」

该有的视觉元素全都有,设计不好到底差在哪里?

「正是因为隐喻的存在,现实的经验和虚拟的交互产生了关联,用户交互因此而更加自然地发生。视线随着被精心设计的布局而游移到重点上,用户会下意识地点击被高亮显示的、和现实按钮差不多的交互控件,他们还会下意识地在虚拟的屏幕上滑动,在界面之前自然游走。因此,你有必要了解你的核心用户每天都在使用哪些 APP,他们都是如何交互的。这有助于你吸收经验,消除不良的体验,创造舒适的交互,降低学习的压力,更好地转化。」Sarah 一边说着,一边下意识地模拟着交互并解释道。

该有的视觉元素全都有,设计不好到底差在哪里?

内容的一致性

「接下来我们还是用案例来说明一下,会更容易理解。」说着 Sarah 坐到椅子上,并且打开电脑屏幕,说道:「比如我们要做一个日历,你认为它应该是网格,还是做成列表?」Jimmy 挠头想了一下,迟疑道:「恩……我们应该坚持使用网格的样式。它更加紧凑也更加有条理,我说的对吗?」

「其实这取决于用户的主要目标是什么。如果这个日历元素是出现在报告文档当中,应该是用网格的样式还是列表的样式呢?一样的,这要看情况。我们是否要在每个应用中都使用全局导航?同样是需要基于上下文情况来决定的。一致的设计不止是表面样式上的一致,还需要从需求、内容、用户使用场景和体验上来保持一致性。如果在特定的情况下,独特的设计能够带来更大的价值,那么这是有意义的,这种特殊情况下不同是有必要的。」Sarah 细心地为 Jimmy 解释道。

良好的设计,应该是特定语境经过评估后定制的副产物,而不是脱离使用场景而凭空创造出来的,否则,无论多么炫酷都是不合时宜的。——Massimo Vignelli

该有的视觉元素全都有,设计不好到底差在哪里?

防御性设计

「最后要说的,是防御性设计。」Sarah 转身对着 Jimmy,然后说道最后一个规则。

「防御性设计?什么东西?」Jimmy 感觉今天学到了不少,最后这个原则也被他写到小本子上了。「这个啊,也就是大家常说的直觉性设计。」Sarah 微微一笑。

「我知道!乔布斯以前就经常说这个概念!」Jimmy 终于找到一个他足够熟悉的概念,兴奋不已。

「可是,你真的知道什么是直觉性的设计么?」Sarah 看着兴奋的 Jimmy 卖了个关子。

「预测用户行为?然后在用户要执行下一个操作之前帮他解决需求?」Jimmy 狐疑地问道。

「是也不是。它并不是让你去预测用户的行为,防御性设计是为了避免出错。无论你如何谨慎地去做设计,总会有错误发生,无论你做过多少调研,你计划有多么妥帖,你的产品总会需要一个备用方案来规避问题。」Sarah 说道:「防御性设计,是让你找到可能会出现的问题。」

相信我,你的产品如果给了用户负面的体验,他们绝对不会忘记。

「我还是没明白你的意思……」Jimmy 习惯性地挠头。Sarah 耐心地开始解释:「以开车为例来说明这个事儿吧。当你开车的时候,总会尽量避免道路上各种可能出现的危险情况,比如鲁莽驾驶的大货车,三心二意横穿马路的行人,懵懂无知在路边打闹的儿童,甚至野外窜上马路的野鹿,等等。同样的,作为设计师,我们需要预料到可能会出现的问题,以及始终保持专注来修复这些问题。这样我们就不会破坏整个用户体验。我们要有良好的防御性的设计意识,维持住体验,改善体验。」Sarah 说到这个地方的时候,Jimmy 感觉她身上散发着某种光芒。

该有的视觉元素全都有,设计不好到底差在哪里?

然后 Sarah 起身,带着 Jimmy 回到他的工位。「怎么样,这些东西你都记下来了吗?」Sarah 打趣地歪着头看着低着头还在琢磨的 Jimmy,如同大男孩一样的 Jimmy 惊讶地抬头问道:「什么意思?这就是全部嘛?难道只有这些?」

Sarah 呼出一口气,微笑着对 Jimmy 说道:「好了好了,设计原则、规则、规范、技巧有太多,可是对于每个人,每个公司而言,都有属于自己的一套方法和策略。你可以尽兴地去探索,但是即使你不知道全部,也可以借助你所熟知的几个原则和策略,拿出足够优秀的设计。我把我最熟悉的、掌握地最娴熟、体会最深刻的几个原则分享给你,它们足以帮你开启一条走向好设计的道路,我觉得你要是真的体会到了,就已经能够拿出比别人更好的东西了。其他的设计原则,只要你有耐心和时间,还可以继续探索。该工作啦。」

尾声

就像 Sarah 说的,设计原则太多了,谁又规定死了具体有几条呢?每个人心中的哈姆雷特都不一样,每个人眼里的哈利波特又何尝是一样的呢?

最重要的问题在于,许多人知道原则,却并不会在设计项目当中运用它们。洞悉每个设计项目当中的重点,了解客户的需求,明白首要的设计目标,在产品和用户之间,找到平衡点,用心地思考,利用好设计原则这一利器。

收藏 28
点赞 1

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。