作为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 的时候也会更加上手。