UI 設計進階 3-2：以用戶為中心的設計：兩本書

作者：Hindy

原文地址：uicircle.club/a/168

轉載無限歡迎，但請註明「作者」和「原文地址」。感謝您對作者版權的尊重。

前言

本文是 UI 設計進階系列的第 3-2 篇，系列目錄：uicircle.club/a/128。

在上一篇文章中，我介紹了兩位對「為人而設計」的思想產生深刻影響的人物。在這篇文章中，我將向大家再介紹兩本書，提煉《用戶體驗要素》及《簡約至上》兩本書中的觀點。閱讀本文你也能快速了解為用戶體驗設計的幾個重要理論。

The Elements of User Experience

Jesse James Garrett 在 2002 年出版了這本書，對自己提出的用戶體驗要素進行了更具體的講解。下面是中文版的圖示。

我們作為產品研發人員，在做產品的時候是從下往上考慮的，因此讓我們就按這個順序來介紹好了。

五個層次

產品的內容基本上是由產品戰略層決定的。這些戰略不僅包括了公司想通過網站得到什麼，還包括了用戶想從網站得到什麼。比如一個賣書的電商網站戰略目標就很容易描述：公司則想要賣出書，用戶們想買書。

產品的功能和內容構成了範圍層。比如電商網站經常提供的一個功能，使用戶可以保存之前的寄送地址，令他們可以再次使用它。這個功能（或任何一個功能）是否應該成為產品的功能之一，就屬於範圍層要決定的問題。

結構層用來設計交互邏輯，用戶如何到達某個頁面，在他們做完事情之後又能去什麼地方。賣書網站上點某個書籍分類如文學類，就進入了一個文學類的書籍列表，列表中書的名字、作者等信息，這樣的交互邏輯與信息架構就是結構層來確定。

框架層則是結構層的具體表達方式，用於優化設計布局，也確定了我們頁面上交互元素的位置，以達到產品期望的效果和效率。比如在框架層定義了導航條上各項的排列方式，允許用戶可以瀏覽書籍的不同類別，也可以使用戶在需要的時候，能正確找到購物車的按鈕。

在表現層，我們看到的則是一系列頁面，圖文組成。一些元素是可以點擊的，從而執行某種功能，例如把你帶到購物車裡去。一些圖片就只是圖片，比如一本書的封面。

反思

每一層，我們所關注的內容都是具體的。在最低的層面，我們完全不用考慮產品最終的外觀，只關心它如何滿足我們的戰略（和用戶的需求）。在最高的層面，我們則只關心網站所呈現的具體的細節。將問題分層的好處是顯而易見的：在具體討論某個層面的問題時，可以討論得更加深入且專註，而不是泛泛而談。

圖中的每一層都是根據它下面那層來決定的。這種依賴性也意味著在戰略層上的決定將具有向上的「連鎖反應」。反過來講，也就意味著每個層中我們可用的選擇，都受到其下層中決策的約束。

所以，越是底層（抽象層）的決策越要慎重，企業的戰略選擇一定要小心，對用戶需求有全面理解，否則做到一定程度之後再想改版，牽連就非常大了。且越是大公司、大產品，就越是難以掉頭。

小結

這樣的五個層次提供了一款產品基本的設計框架，保證在創意與設計過程中有序進行，不遺漏重要的內容。而每個層次的工作，其實也都可以對應到我在在 1-2 篇中提到的開發流程。這裡的層次描述了產品本身的構成，我前面的文章則描述開發的工作流程。如果你是新人，理解了這兩塊內容，就已經邁入了半個產品設計的圈子了。剩下的就請多實踐罷。

Simple and Usable

雖然這本書在流行度上完全比不了《用戶體驗要素》，但在我看來裡面的內容卻也是非常精闢，不亞於上一本。

三種用戶類型

書中先提出了三種用戶類型：

• 主流用戶：他們自己不會因為你的技術而使用你的產品，使用你產品的目的是完成某項任務。他們會掌握一些重要功能，但永遠不會產生學會所有功能的想法。
• 專家型用戶：願意探索你的產品或服務，並且會給你提出各種改進建議，少數。
• 隨意型用戶：可能使用過類似的產品或服務，有興趣使用更高級的產品，但卻不願意接觸全新的東西，少數。

把握你的核心用戶，選擇性忽略專家型用戶，因為他們追求主流用戶根本不在乎的功能。也不要保持中立而過於在乎隨意型用戶：這類人數量有限，相對極端，他們的技術水平較好，而且比主流用戶更具有忍耐力。

簡約四策略

設計師常常引用 Mies 的「Less is more」來形容簡約至上的產品設計，但具體如何操作，如何應用在軟體設計中卻只能憑直覺和經驗來決定。而 Giles Colborne 在本書中總結出「簡約四策略」，有效地指導如何在產品中做到簡約，他們分別是：刪除、組織、隱藏和轉移。

人們喜歡簡單易用、值得信賴、適應性強的產品，而複雜的產品不可持續。增加的功能越多，就越難發現真正對用戶有價值的新功能。盲目添加的新功能早晚會成為垃圾功能。並且增加複雜性也意味著遺留代碼越來越重，導致產品維護成本越來越高，也越來越難以靈活應對市場變化。因此我們推崇簡約的設計。

刪除或是省略功能可以讓設計師專註於把有限的重要問題解決好，也有助於用戶心無旁騖地完成自己的目標。書中提到了很多刪除時的要點，我在這歸總了一些：

• 避免錯刪。要總覽全局，確定優先順序，保證只交付那些真正有價值的功能和內容。
• 關注核心。與新增功能相比，用戶更關注基本功能的改進。
• 砍掉殘缺功能。砍掉實現得不夠理想的功能也是很重要的，問題絕非「為什麼應該去掉它」，而是「為什麼要留著它」。
• 假如用戶……。如果你想的只是怎麼製造新問題或者猜測用戶看重什麼，那麼「假如」的價值就不大了。比起不斷「假如」，還是去發現問題罷。
• 不要單純因為用戶要求就增加功能。
• 方案比流程重要。如果在設計的時候只盯住流程，那麼結果很可能會創造更多的功能去處理出現的各種異常情況、問題和細節。要退一步想，把注意力集中到用戶的目的上，問自己「還有其他的解決方式嗎？」
• 減少用戶的負擔。去掉那些可有可無的選項、內容和分散人們注意力的玩意兒，可以減輕用戶的負擔，讓用戶更專心、效率地完成任務。
• 別讓選擇太多。在面對過多的選項和按鈕時，人們一般都會不知所措，選擇有限，用戶決策更快。
• 消除錯誤。在設計簡單的體驗時，關鍵的一步是確定哪些地方需要錯誤信息，從中找出常見的問題，消除錯誤的來源。
• 精簡的信息呈現。刪除混亂的視覺元素、精簡文案等。

組織是簡化設計的另一個重要策略，通過某些角度來整理組織鬆散的信息和元素。下面是一些要點：

• 分塊。選擇 7±2 個項組織在一起。（出自美國心理學家 George A. Miller 1956 年發布的論文《The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information》，論述人的短時記憶能力的廣度為 7±2 個信息塊。另，本書中提的是 7±1，我懷疑是處錯誤。）
• 圍繞行為進行組織。首先要理解用戶的行為：他們想做什麼，先做什麼後做什麼。
• 分類標準分明。
• 搜索。如果想設計簡單的用戶體驗，最好先對內容有效地組織，然後再考慮如何設計搜索。
• 時間和空間。比如按時間順序來排序內容。一些實體對象可以按空間來組織，比如商場的地圖。
• 有組織的視覺設計。這點涉及基礎的平面設計，後面有機會的話再具體介紹。

隱藏部分功能是一種低成本的方案。但是，到底該隱藏那些功能呢？

• 不常用但不能少的。比如修改個人資料功能。
• 自定義功能。比如在 Word 里用戶可以自定義默認顯示哪些功能。但自定義本身是件非常耗時、又專業的事，因此隱藏起來，留給專家用戶用罷。
• 漸進展示。某些功能會包含少數核心的供主流用戶使用的控制功能，另有一些為專家級用戶準備的擴展性的精準的控制功能。隱藏這些精準的控制功能是保持設計簡單的不錯選擇。
• 適時出現。只在合適的時機、合適的位置上顯示相應的功能，比如很多字典 app 支持選詞翻譯。
• 提示與線索。界面中包含細小的線索，恰到好處地提示隱藏功能的位置和用處。

設計簡單體驗的一個秘密，就是把正確的功能放到正確的平台或者正確的系統。

• 在設備之間轉移。比如曾經的電視遙控器按鈕眾多，現在電視將各種功能入口放入系統，令遙控器極度簡化。
• 向用戶轉移。搞清楚把什麼工作需要交給計算機，什麼工作可以留給用戶，以此來精簡產品。
• 創造開放式體驗。聰明的設計師的簡化秘訣中經常有一條，就是讓一個組件具有多種用途。比如鎚子科技將手機聽筒和距離感測器結合，達到了視覺上的簡潔。

小結

利用好簡約四策略，在工作中反思自己的產品和設計，看看是否將核心功能精準地傳達給用戶了，自己的設計是否還能更加精簡、高效、友好。

總結

「以用戶為中心的設計」思想是近年來用戶體驗設計領域最重要的核心，不止是因為提出者諾曼的解釋，更重要的是它確實為我們的產品設計提供了指導思想，可以說成就了數字產品界的「designing for people」。

免費獲取完整 PPT，請關注公眾號 uicircle，回復「兩書」即可。

UI 設計進階系列目錄：uicircle.club/a/128。

如果你想提升設計能力，亦或充實自己的周末，歡迎加入我們的會員社區??

→點這報名

參考閱讀

• 《用戶體驗要素：以用戶為中心的產品設計》：book.douban.com/subject/6523997/
• 《簡約至上：交互設計四策略》：book.douban.com/subject/5394309/
• The Magical Number Seven, Plus or Minus Two：en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two