[译]顾虑越少,设计越好。

<blockquote>在设计过程中,存在的可能性越多,需要进行的思考就越多。</blockquote>

美国心理学家 Barry Schwartz 在 The Paradox Of Choice 这本书中写到,排除一些选择可以大幅度的减少焦虑。

最优解不是成为一个完美主义者,而是让最为人所赞同的决定变得可行,这可以让我们共同创造出最佳体验。


1. 限制变量

为了制作出高度精确的概念,如果我们要考虑所有潜在的变量,那将会有很多,而如果我们在早期就限制和定义这些变量,制作过程会变得很明朗。

有了这个经验,限定某些变量组之后,我们预测在创造过程中如何产生几倍的效果变得更加简单了。

减少选择不会导致独创性的减少。我们假设把围绕预先制定好的规则来创造概念作为一个限制,但是作为设计者我们可以创建我们自己的规则,完全掌控创造它们的过程。

尺寸与间距

UI 设计的每个方面都需要围绕一个系统进行,以此来改善节奏感并在一个项目成长的时候帮助保持尺寸与间距的一致性。一个我爱用的像这样的系统是 modular scale,它可以使制定尺寸变得便利,它可以通过指定任意的比例来测量、设定某个元素或者某个整体中负空间的尺寸。

一旦我们采用了某个比例,modular scale 会使得定义尺寸和间距变得更加简单。

尽管它在栅格,排版,垂直空间以及一个布局的综合方面减少了变量,来使这个设计达到一个易操作的层次,但是它仍然提供了令人愉悦的美感和韵律。设计 UI 相当容易。

栅格

栅格系统是一个绝佳的设计方法,当把内容实现成具体的 UI 界面的时候,它不仅可以对页面内容组织的方式加以限制,还可以简化实现方式。但是,栅格经常被不加思考的采用,变成了一个被当作万金油的方案。大多数设计师都没有意识到,相对于使用万金油方案,专门设计一款适用于你产品的栅格系统会是更好的一个方案。

栅格系统可以减少影响布局的变量。

这意味着理想情况下应该提前对内容的大致情况有一个清晰的了解,以便于思考如何设计出最适合于特定内容的栅格系统。根据预存的资源和品牌指南来考虑商业限制,例如一个拥有具体空间规则和要求的 logo,或者可能是有着具体的固定单元的广告。

内容的类型也是一个因素。设计时还需要考虑到内容的不同类型,如商品包装、新闻出版物、博客或者是简单的引导页,它们之间的差异十分之大。要考虑到布局是以图片为主还是以文字为主。要理解 eye-scanning patterns 和它们是如何对一个视觉层次产生作用,这会对设计很有帮助,

对商业和内容的重要限制理解的越深刻,采用栅格系统并作出布局决定就越容易。

字体

我觉得字体是 UI 设计最重要的方面,因为它占据了网页的 95%,是信息交流的驱动力量。

尽管像 modular scale 这样的系统可以应用在尺寸和行距上,但是字体族和风格是被限制的。一个 UI 布局不应该超过两个字体类型和多个字重。规则可以拓展到如何应对摘要和标题。

颜色

使用调色板很容易过度用心。几种色调就可以产生一个充足并且一致的视觉效果。通常在一开始我们有 5 种色卡就够了。

诸如 Adobe Color CC 之类的工具可以使预定义一个调色板变得非常容易。

大部分品牌应该采用了一个主要的或者重要的颜色以及一些中立的或者差异的色调来实现。一开始的时候,界面中并不需要用到 15 种不同明度的颜色。最佳的做法应该是从单一的明度起步然后逐步增加更多不同的明度。

图片

我们如何把图片插入到 UI 中在很大程度上是由内容的上下文所决定的。如果我们对那个有一个大致的了解,我们可以为我们的图片创建一个起始点,这些图片有着比例,尺寸,形状和论述等等的变量。我们可能会发现我们不需要那么多。

限制我们图片的变量可以强制的获得更好的一致性,并且使得在长期过程中管理图片资源变得更加容易。这对标志来说也是一样。

对于图片的比例和尺寸我们确实需要的有多少变量?


2. 尽早的创建一个风格指南

作为一个概念上的 UI 项目,创建和维护一个风格指南或者模式库变得越来越重要。这将建立设计准则来帮助项目扩展,维护节奏感和一致性。如果我们正在事先定义变量,为它们写文档是一个好的方法。相比于没有文档来说,拥有一份文档在未来进行决策的时候会更加容易。

根据项目的情况,有时候创建一个风格指南是一件奢侈的事,经常需要依据未来的计划进行改动。这也是为什么大部分风格指南都在最后一分钟或者是在项目完成后才准备好,当然这仍然是个好习惯。但是对于风格指南来说有着大量致力于预期设计和发展的主张和论证,它可以为早期概念化打好坚实基础提供帮助。

在开始的时候正确创建一个基本的风格指南不仅可以早早建立原则来减少设计抉择,还可以作为一个基础设施帮助参与和添加主要的内容。

在开始的时候制作一个东西不意味着它需要是完整的——可以差的很远。这些风格在早期总是会演变出许多的可能性,一个项目变得越大,它的边界也就越清晰越严谨。


3. 基于模块的优先级和适应性

在基于模块的设计系统中,例如 Brad Frost 的原子设计,布局可以在具体的关键区域外进行制定。模块可以在各种各样的布局里面重复使用。界面被当作系统对待而不是页面,使用基于模式的设计和部署是进程中的一个重要环节。

这是一个很好的方法,它使得 UI 设计更加容易管理,但是为了使它更加有效率我们不得不优先考虑关键区域,并让关键区域周围的所有内容去适应它们。这样将会相应的确定视觉连贯性

确定关键区域

我们的设计应该围绕重要的部分进行。每个区域的优先级是由它在界面内的内容或者功能所决定的,这是这个问题基本答案。

通过首先聚焦于重要的区域,我们正在减少此后的设计抉择,因为随后的区域不得不进行变通来适应已经建立的周围内容。

聚焦于关键区域

一旦高优先级的区域已经被确定下来,对于这些关键的区域需要高度关注并且将它们完成。这个观点主要是指,在适应次要区域之前,我们需要确保它们是简单可用并且符合所有的要求的。


4. 让它为每个人工作

几千年来设计师们都一直尽力做一件事——高效的沟通。我们持续不断地在视觉和听觉方面,迭代重构一个对于用户而言更为友好的沟通方式。

随着我们从广阔的潜在用户群不断的获得信息,为了从中得到尽可能多类型的人群信息,优化获取方式变得迫在眉睫。

无障碍使用是一件因祸得福的事情

迎合更广泛的用户听起来意味着更多的工作,把无障碍使用视作为革新的障碍是很诱人的。但是,遵循最新的标准会是件因祸得福的事,尤其是如果它们已经成为习惯了。

在设计期间的例子包括一系列的要求——我们需要一个最小的字体尺寸用在文本主体,或者是正文和背景资料之间的一些有意义的差异,或者是触摸设备上更大的链接区域。

这不仅仅是关于残障人士的。

无障碍使用不仅仅是为了服务残障人士,一些人可能会这样暗示,但其实也是服务于那些用着老式设备和浏览器的用户,他们的设备往往无法支持所有的最新特效和提升。意识到这些标准并且遵守它们将会很自然的减少设计抉择。


5. 使用经过考验和测试的模式

事实是,当用户遵循数百个普遍的设计模式的时候,这些设计模式他们已经从多年的使用和了解过程中完全吸收了,所以现在用户凭借直觉发现界面。一旦我们开始打破传统模式并且发展新的趋势,我们会发现让一种新模式完全变成用户的直觉会花费大量的时间。

制作原创的 UI 模式是可行的,但是我们不应该对常见的方式心怀顾忌——毕竟它们的成功是有理由的。

少考虑重新创造,聚焦于美感是我们的一线希望。基于已建立的模式进行原创的工作仍然是可行的。

对于成功的设计模式我们了解和融入的越多,作为设计师我们需要做的选择就越少。我们不需要考虑什么可能会起作用,转而去考虑什么将会起作用。


最后的注意事项

对于这些方法中的一部分方法来说,单独使用可能对于减少我们的思考量和抉择帮助不大,或者说无法大幅度的改善我们的设计。但是把它们合并在一起,持续获取好的反馈,可以使得设计更好 UI 的这件事变得相当容易。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,117评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,328评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,839评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,007评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,384评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,629评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,880评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,593评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,313评论 1 243
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,575评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,066评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,392评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,052评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,082评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,844评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,662评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,575评论 2 270

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,569评论 25 707
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,629评论 1 92
  • 我们人类的世界约5.1亿平方千米,拥有的陆地与海洋,都广阔无垠。而蜗牛们的世界很小,虽然他们时常只有一处花园,一棵...
    乔诗伟阅读 1,780评论 6 21
  • 这次戒烟比较低调,没有通知亲朋好友,没有沐浴更衣,只在空间发了条说说。戒烟却很成功,到今天应该有十天左右,零星抽过...
    有也无阅读 415评论 1 0
  • 这个学期很意外的做了幼儿园的老师,而且只有一个人带,确实有点累,不过很开心和小孩在一起很单纯,没什么要忌讳的。每个...
    梅傲独峙阅读 115评论 0 0