作為設計師,如何訓練自己的洞察力?

原文為 How to develop an eye for Design,本文章已經過作者同意翻譯並轉載,歡迎分享文章連結。

原作者 Kathleen Warner 為來自美國舊金山的設計師,Kathleen 相當樂意與不同語系的讀者分享她的想法。有興趣的朋友可以前往她的網站了解更多。若對這篇文章有任何提問,Kathleen 歡迎讀者到她的推特與她互動。

為什麼挑選這篇文章?「平時如何培養對設計的敏銳度?」是設計師朋友們常被問到的問題。現職於 Facebook 的產品設計師 Kathleen 以她的經驗,提供幾項原則與讀者分享如何培養洞察力。無論你是不是設計師,都可試試她提供的方法進行練習,逐步提升對設計的敏銳度與鑑別力。

本文譯者為 AAPD編輯 Wan-Ting,如有翻譯上的錯誤或不順暢之處還請多多指教,有任何建議也歡迎隨時告知。

剛踏入設計這行時,覺得自己是個爛咖。

當時還熱衷於刻出 Dribbble 熱門作品,卻沒留意到這些元素是如何協調搭配的。若你看過我以前的拙作,畫面裡太過強烈的陰影與不必要的裝飾,可能會讓你倒抽一口氣。

雖然我不是產品設計鬼才,但我很快就知道如何快速整合我所需的技能。現在我想把這過程中所學到的分享給你,不論你是不是設計師,希望下面這個練習能幫助你,提升對產品的鑑別力與對設計的敏銳度。

別只單純操作 App ,請好好研究它

要培養對設計的洞察力,第一步就是換位思考,把自己當成開發這項產品的設計師。打開一個自己常用的應用程式,抗拒想瀏覽的衝動。我希望你把目光放在眼前的畫面,並記住以下幾個思考方向:

階層性 (Hierarchy)

首先觀察這個應用程式如何引導你的視覺動線,有哪些資訊是被強調的?其次,依照不同功能的重要性,色彩與文字如何相互搭配?

內容 (Content)

你會用哪個措辭來總結這次使用體驗?哪些內容是明顯吸引到你的?而哪些地方不是?如何在介面設計中運用留白?

目標 (Intent)

為什麼有人想使用這款應用程式?它幫用戶解決了什麼問題?要如何設計才能有效地解決問題?

受眾 (Audience)

可以試著去拼湊這項產品的使用者群像,什麼樣的使用者會去使用這項產品?思考他們的使用情境與你的有什麼不同?這項產品設計如何應付這些使用情境?

拆解 App 介面呈現流程

在下面的 GIF 裡,我把幾個應用程式的介面呈現流程分解成慢動作展示,方便大家去注意畫面中的每個元件。當你預期哪個元件會隨著動畫出現的同時,可能會發現平常沒注意到的細節。在觀看畫面每個元件相繼出現時,可以思考看看這些設計背後的原因為何。

分解 Airbnb 的首頁載入畫面

以 Airbnb 為例

先來個小暖身:

  • 一般情形下,搜尋欄的輸入框都只寫「在此處搜尋」,然而 Airbnb 的輸入框卻直接以特定城市名作為示範,提示用戶可以用系統預設的地名「倫敦」或以其他地名為關鍵字進行搜尋。即使沒有要去倫敦旅行,看到提醒用戶在搜尋欄輸入關鍵字的貼心提示,仍會感到開心。
  • 我想知道隨著介面載入的「日期」與「入住人數」兩個過濾條件的按鈕,這樣的安排經過多少次迭代?大多數設計通常都是在用戶選擇地點後,才會加載「日期」這個過濾選項。滿好奇人們會如何搜尋、何時會加入篩選條件,取得搜尋結果。
分解 Twitter 的首頁載入畫面

以 Twitter 為例

幾個觀察方向:

  • 注意轉推數與按讚數是以粗體字標明。
  • 發文時間不只包含日期,連幾點幾分都標示得相當清楚。為什麼會這樣?然而,在應用程式的其他地方,發文時間的標示就比較精簡,如有的動態消息的推文會表示為「 5 小時前」,或在個人檔案頁面會看到「4/14/18」不同的時間標示方式。想想看,這做法有何用意?
  • 底部導覽列上頭有個輸入框,提示你再發表一則推文。 但要留意的是,這邊用詞是寫「再發另一則推文吧」(“Add another Tweet.”),而非只是「發一則推文」(“Add a Tweet.”)。[1]
分解 Spotify 「最新發行」頁的載入畫面

以 Spotify 為例

幾個觀察方向:

  • 注意 Spotify 介面是如何處理正在播放的歌曲。
  • 在「最新發行」(New Releases) 頁面,展示的內容包含新曲播放清單、新專輯或單曲。
  • 「週五新曲快報」(New Music Friday) 有標示追蹤人數,而「新曲發行雷達」(Release Radar) 的播放清單卻無。稍加觀察一下,其實「新曲發行雷達」的內容是 Spotify 為用戶量身定做的播放清單,所以不會有追蹤人數。工程師或資料分析師必須爬梳過所有的使用情形,根據不同使用情境,在用戶介面上顯示相對應標題的歌單。

融會貫通,就能打破規則

下次在搭 Lyft [2] 的時候或是等朋友的空擋,可以打開任何一個 App,仔細想想設計師們為何會這樣設計。

養成固定分析各類 App 的習慣,除了可以培養產品思維,在設計 App 的時候也會更加上手。

想聽聽你們的意見!請別客氣,隨時與我聯繫並讓我知道你的想法!我將盡己所能提供協助。若你對這類主題有興趣,想瞭解更多的話,請造訪 Hack Design,看看我開設的線上課程:如何縮短創意與實務間的落差

譯註

  1. Twitter 會改成「再發另一推文」,目的是讓用戶更輕而易舉地連結推文成串,長篇大論起來更簡單。

另附相關新聞:

推特推串文新功能 連珠炮推文更輕鬆

Twitter officially launches ‘threads,’ a new feature for easily posting tweetstorms

2. Lyft 為美國知名叫車服務業者,與 UBER 為美國目前旅遊和交通類 APP 排名前兩位的公司。

AAPD是 As A Product Designer 的簡寫我們希望提供產品設計師所需要的各種資訊,並且致力在平台上創造更多的交流與互動。我們關注於UI設計、UX設計、設計師的個人成長、設計趨勢與產業動態等並分享這些資訊,期望降低每位設計師成長的過程中所遇到的阻礙。我們期待這裡成為一個設計知識的媒介,讓每一位來到這裡的人都可以得到滿滿的收穫,並且讓每一位身為產品設計師的人都能為自己正在創造的事物感到驕傲。

--

--

AAPD — As A Product Designer
AAPD — As A Product Designer

We share digital product design experiences & help designers find their purpose and passion. Follow our Medium Publication ↑ and Facebook http://fb.me/aapd.tw