本文作者Kathleen Warner為來(lái)自美國(guó)舊金山的設(shè)計(jì)師，Kathleen相當(dāng)樂(lè)意與不同語(yǔ)系的讀者分享她的想法。有興趣的朋友可以前往她的網(wǎng)站了解更多。

「平時(shí)如何培養(yǎng)對(duì)設(shè)計(jì)的敏銳度？」是設(shè)計(jì)師朋友們常被問(wèn)到的問(wèn)題。現(xiàn)職于Facebook的產(chǎn)品設(shè)計(jì)師Kathleen以她的經(jīng)驗(yàn)，提供幾項(xiàng)原則與讀者分享如何培養(yǎng)洞察力。無(wú)論你是不是設(shè)計(jì)師，都可試試她提供的方法進(jìn)行練習(xí)，逐步提升對(duì)設(shè)計(jì)的敏銳度與鑒別力。

剛踏入設(shè)計(jì)這行時(shí)，覺(jué)得自己是個(gè)爛咖。

當(dāng)時(shí)還熱衷于借鑒Dribbble 熱門作品，卻沒(méi)留意到這些元素是如何協(xié)調(diào)搭配的。若你看過(guò)我以前的拙作，畫(huà)面里太過(guò)強(qiáng)烈的陰影與不必要的裝飾，可能會(huì)讓你倒抽一口氣。

雖然我不是產(chǎn)品設(shè)計(jì)鬼才，但我很快就知道如何快速整合我所需的技能?，F(xiàn)在我想把這過(guò)程中所學(xué)到的分享給你，不論你是不是設(shè)計(jì)師，希望下面這個(gè)練習(xí)能幫助你，提升對(duì)產(chǎn)品的鑒別力與對(duì)設(shè)計(jì)的敏銳度。

別只單純操作App ，請(qǐng)好好研究它

要培養(yǎng)對(duì)設(shè)計(jì)的洞察力，第一步就是換位思考，把自己當(dāng)成開(kāi)發(fā)這項(xiàng)產(chǎn)品的設(shè)計(jì)師。打開(kāi)一個(gè)自己常用的app，抗拒想瀏覽的沖動(dòng)。我希望你把目光放在眼前的畫(huà)面，并記住以下幾個(gè)思考方向：

層級(jí)觀念(Hierarchy)

首先觀察這個(gè)app如何引導(dǎo)你的視覺(jué)動(dòng)線，有哪些資訊是被強(qiáng)調(diào)的？其次，依照不同功能的重要性，色彩與文字如何相互搭配？

內(nèi)容(Content)

你會(huì)用哪個(gè)措辭來(lái)總結(jié)這次使用體驗(yàn)？哪些內(nèi)容是明顯吸引你的？而哪些地方不是？如何在介面設(shè)計(jì)中運(yùn)用留白？

目標(biāo)(Intent)

為什么有人想使用這款app？它幫用戶解決了什么問(wèn)題？要如何設(shè)計(jì)才能有效地解決問(wèn)題？

受眾(Audience)

可以試著去拼湊這類產(chǎn)品的使用者肖像，什么樣的使用者會(huì)去使用這類產(chǎn)品？思考他們的使用情境與你的有什么不同？這類產(chǎn)品設(shè)計(jì)如何應(yīng)付這些使用情境？

拆解App 界面呈現(xiàn)流程

在下面的GIF 里，我把幾個(gè)app的界面呈現(xiàn)流程分解成慢動(dòng)作展示，方便大家去注意畫(huà)面中的每個(gè)元件。當(dāng)你預(yù)期哪個(gè)元件會(huì)隨著動(dòng)畫(huà)出現(xiàn)的同時(shí)，可能會(huì)發(fā)現(xiàn)平常沒(méi)注意到的細(xì)節(jié)。在觀看畫(huà)面每個(gè)元件相繼出現(xiàn)時(shí)，可以思考看看這些設(shè)計(jì)背后的原因?yàn)楹巍?

分解Airbnb 的首頁(yè)載入畫(huà)面

以Airbnb 為例

一般情形下，搜索欄的輸入框都只寫(xiě)「在此處搜索」，然而Airbnb 的輸入框卻直接以特定城市名作為示范，提示用戶可以用系統(tǒng)預(yù)設(shè)的地名「?jìng)惗亍够蛞云渌孛麨殛P(guān)鍵字進(jìn)行搜尋。即使沒(méi)有要去倫敦旅行，看到提醒用戶在搜尋欄輸入關(guān)鍵字的貼心提示，仍會(huì)感到開(kāi)心。

我想知道隨著界面載入的「日期」與「入住人數(shù)」兩個(gè)過(guò)濾條件的按鈕，這樣的安排經(jīng)過(guò)多少次迭代？大多數(shù)設(shè)計(jì)通常都是在用戶選擇地點(diǎn)后，才會(huì)加載「日期」這個(gè)過(guò)濾選項(xiàng)。很好奇人們會(huì)如何搜尋、何時(shí)會(huì)加入篩選條件，取得搜尋結(jié)果。

分解Twitter 的首頁(yè)載入畫(huà)面

以Twitter 為例

注意轉(zhuǎn)推數(shù)與點(diǎn)贊數(shù)是以粗體字標(biāo)明。

發(fā)文時(shí)間不只包含日期，連幾點(diǎn)幾分都標(biāo)示得相當(dāng)清楚。為什么這樣設(shè)計(jì)？然而，在app的其他地方，發(fā)文時(shí)間的標(biāo)示就比較精簡(jiǎn)，如有的動(dòng)態(tài)消息的推文會(huì)表示為「 5 小時(shí)前」，或在個(gè)人檔案頁(yè)面會(huì)看到「4/14/18」不同的時(shí)間標(biāo)示方式。想想看，這做法有何用意？

底部導(dǎo)覽列上頭有個(gè)輸入框，提示你再發(fā)表一則推文。但要留意的是，這邊用詞是寫(xiě)「再發(fā)另一則推文吧」(“Add another Tweet.”)，而非只是「發(fā)一則推文」(“Add a Tweet.”)。

Twitter 會(huì)改成「再發(fā)另一推文」，目的是讓用戶更輕而易舉地連結(jié)推文成串，長(zhǎng)篇大論起來(lái)更簡(jiǎn)單。

分解Spotify 「最新發(fā)行」頁(yè)的載入畫(huà)面

以Spotify 為例

注意看Spotify 的界面是如何處理正在播放的歌曲。

在「最新發(fā)行」(New Releases) 頁(yè)面，展示的內(nèi)容包含新曲播放清單、新專輯或單曲。

「周五新曲快報(bào)」(New Music Friday) 有標(biāo)示追蹤人數(shù)，而「新曲發(fā)行雷達(dá)」(Release Radar) 的播放清單卻無(wú)。稍加觀察一下，其實(shí)「新曲發(fā)行雷達(dá)」的內(nèi)容是Spotify 為用戶量身定做的播放清單，所以不會(huì)有追蹤人數(shù)。工程師或資料分析師必須爬梳過(guò)所有的使用情形，根據(jù)不同使用情境，在界面介面上顯示相對(duì)應(yīng)標(biāo)題的歌單。

融會(huì)貫通，就能打破規(guī)則

下次在打滴滴的時(shí)候或是等朋友的空余時(shí)間，可以打開(kāi)任何一個(gè)App，仔細(xì)想想設(shè)計(jì)師們?yōu)楹螘?huì)這樣設(shè)計(jì)。

養(yǎng)成固定分析各類App 的習(xí)慣，除了可以培養(yǎng)產(chǎn)品思維，在設(shè)計(jì)App 的時(shí)候也會(huì)更加上手。