简化UI复杂度的基本步骤

我们常常致力于减少复杂程度,用以改善顾客的体验。安全风险是攸关致命危害,且与时效息息相关的议题,所以谈到设计我们的资安产品界面,我们花非常多时间规划其信息构架。目标是尽可能让客户用最简单的方式接受清楚又透明的信息。

你可能听过「咨询,就在你的指尖」这个口号,然后思考自己设计的介面至少要点击几次才可以找到正在搜寻的咨询。多少次点击是太多?几次是太少?除非你诚心将使用者放在心上,专注思考,要不然 UI 设计是无意义的。

屠龙之旅

当我在设计一个页面时,发现让使用者达到目标的所需信息的微妙平衡。页面上有太多东西,让使用者困惑;太少东西则会造成多余的互动。为了解决这两难的问题,我在整个设计决策过程将使用者摆在中心。

2016715201

让我们想像一下:你的产品是一本书,而使用者是故事的主角。在脍炙人口的故事里,你的主角必需克服挑战,到达恶龙所在的塔。路途上他们得获取正确的知识与经验,才可以使出最后一击。身为设计师的责任就是从旁准备、引导我们的英雄走过这趟旅程。

就跟大多数的故事一样,会分成很多章节。每个章节代表重要的进展或事件,也是我们如何建造使用者经验的梁柱。章节里要放使用者必需花上大量时间或注意力的内容,以我们ThisData來說,這些就是仪表板 (dashboard)、检查日志 (audit log) 和事件细节⋯等等。

2016715202

把整趟体验切为「章节」让我们可以更清楚知道每个章节代表的意义。「仪表板」章节让主角获取概要;「检查日志」让主角找到正确的路;而「事件细节」提供成功屠龙所需的秘密。

准备好主角的故事,借此打造适当的章节,这可以帮助将你的想法形成框架,以及从使用者的角度建立章节。

我们在阅读或聆听故事的时候,总是沈浸其中,迫不及待地想知道接下来会发生什么事情,每个章节紧密连接。这就是设计你自己的产品时,应该设定为目标的质量。

版面布局范本(布局)

一旦章节就定位,充分了解数据会以哪种形式呈现后,再选择版面布局模板。它是清单,还是图表?它得放使用者的头像照片吗?它得要用表单吗?你对这些基本问题的回答,会深深地影响决策树(decision tree)。

2016715203

那么,版面布局模板是什么?这是重复的信息构架,可以不管情境为何,用在不同的画面和页面。相似数据类型的页面,就共享一个版面布局模板。App里面建立版面一致性的好处是:使用者不用重复学习界面(如何操作),不被困惑和干扰中断,真正专注在章节的目标。请尝试将内容分类,至多不超过3–4种布局模板。

内容分层

你可能已經很熟悉 Google 的Material Design哲学,如果还没有的话,我强烈推荐你去看看!Material Design的理念提到,将所有界面上的元素都当成图层,依照重要程度安排群组。像是导航条这样的静态内容就是最顶层级,而动态、互动的内容是最低的。

2016715204

群组对比化

长得差不多的图层会混在一起,引起分心。必需正确地让每个图层在同一个风格有明显区别,这能避免图层都混在一起,凸显让使用者专注的内容。

2016715205

设计小UI元素

像是标签、标记等等小UI元素通常是补充性质的,只能在它们针对于内容有正面贡献的时候使用,请不要落入滥用它们的陷井,最好在有必要强调重要元素的时候使用。

2016715206

请不要为了使用颜色而使用,让调色盘精巧细致。试着先依照情境使用颜色,例如:「绿色很好,红色是不好的」等。

结语

现在我们已经有正确的流程观念了,之后我会分享在Sketch或Photoshop使用,属于实际操作的技巧,帮助您在工作流程上更有效率!

1 1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部