UI界面设计 ·

作为ui/ux设计师,如何训练自己的洞察力?

本文作者Kathleen Warner为来自美国旧金山的设计师,Kathleen相当乐意与不同语系的读者分享她的想法。有兴趣的朋友可以前往她的网站了解更多。

「平时如何培养对设计的敏锐度?」是设计师朋友们常被问到的问题。现职于Facebook的产品设计师Kathleen以她的经验,提供几项原则与读者分享如何培养洞察力。无论你是不是设计师,都可试试她提供的方法进行练习,逐步提升对设计的敏锐度与鉴别力。

刚踏入设计这行时,觉得自己是个烂咖。

当时还热衷于借鉴Dribbble 热门作品,却没留意到这些元素是如何协调搭配的。若你看过我以前的拙作,画面里太过强烈的阴影与不必要的装饰,可能会让你倒抽一口气。

虽然我不是产品设计鬼才,但我很快就知道如何快速整合我所需的技能。现在我想把这过程中所学到的分享给你,不论你是不是设计师,希望下面这个练习能帮助你,提升对产品的鉴别力与对设计的敏锐度。

 

别只单纯操作App ,请好好研究它

要培养对设计的洞察力,第一步就是换位思考,把自己当成开发这项产品的设计师。打开一个自己常用的app,抗拒想浏览的冲动。我希望你把目光放在眼前的画面,并记住以下几个思考方向:

层级观念(Hierarchy)
首先观察这个app如何引导你的视觉动线,有哪些资讯是被强调的?其次,依照不同功能的重要性,色彩与文字如何相互搭配?

内容(Content)
你会用哪个措辞来总结这次使用体验?哪些内容是明显吸引你的?而哪些地方不是?如何在介面设计中运用留白?

目标(Intent)
为什么有人想使用这款app?它帮用户解决了什么问题?要如何设计才能有效地解决问题?

受众(Audience)
可以试着去拼凑这类产品的使用者肖像,什么样的使用者会去使用这类产品?思考他们的使用情境与你的有什么不同?这类产品设计如何应付这些使用情境?

 

拆解App 界面呈现流程

在下面的GIF 里,我把几个app的界面呈现流程分解成慢动作展示,方便大家去注意画面中的每个元件。当你预期哪个元件会随着动画出现的同时,可能会发现平常没注意到的细节。在观看画面每个元件相继出现时,可以思考看看这些设计背后的原因为何。

 

分解Airbnb 的首页载入画面

Airbnb 为例

一般情形下,搜索栏的输入框都只写「在此处搜索」,然而Airbnb 的输入框却直接以特定城市名作为示范,提示用户可以用系统预设的地名「伦敦」或以其他地名为关键字进行搜寻。即使没有要去伦敦旅行,看到提醒用户在搜寻栏输入关键字的贴心提示,仍会感到开心。
我想知道随着界面载入的「日期」与「入住人数」两个过滤条件的按钮,这样的安排经过多少次迭代?大多数设计通常都是在用户选择地点后,才会加载「日期」这个过滤选项。很好奇人们会如何搜寻、何时会加入筛选条件,取得搜寻结果。

 

分解Twitter 的首页载入画面

Twitter 为例

注意转推数与点赞数是以粗体字标明。
发文时间不只包含日期,连几点几分都标示得相当清楚。为什么这样设计?然而,在app的其他地方,发文时间的标示就比较精简,如有的动态消息的推文会表示为「 5 小时前」,或在个人档案页面会看到「4/14/18」不同的时间标示方式。想想看,这做法有何用意?
底部导览列上头有个输入框,提示你再发表一则推文。但要留意的是,这边用词是写「再发另一则推文吧」(“Add another Tweet.”),而非只是「发一则推文」(“Add a Tweet.”)。

Twitter 会改成「再发另一推文」,目的是让用户更轻而易举地连结推文成串,长篇大论起来更简单。

 

分解Spotify 「最新发行」页的载入画面

Spotify 为例

注意看Spotify 的界面是如何处理正在播放的歌曲。
在「最新发行」(New Releases) 页面,展示的内容包含新曲播放清单、新专辑或单曲。
「周五新曲快报」(New Music Friday) 有标示追踪人数,而「新曲发行雷达」(Release Radar) 的播放清单却无。稍加观察一下,其实「新曲发行雷达」的内容是Spotify 为用户量身定做的播放清单,所以不会有追踪人数。工程师或资料分析师必须爬梳过所有的使用情形,根据不同使用情境,在界面介面上显示相对应标题的歌单。

 

融会贯通,就能打破规则

下次在打滴滴的时候或是等朋友的空余时间,可以打开任何一个App,仔细想想设计师们为何会这样设计。

养成固定分析各类App 的习惯,除了可以培养产品思维,在设计App 的时候也会更加上手。

参与评论