這些交互設計必備書籍，但你也許都沒讀過；初次接觸交互設計，這11本書，剛好夠讀一年，你的技能將會有質的飛躍。

流程篇：《交互大廚的私房書單！10本「流程方法」的好書幫你進階學習！》
設計原則篇：《交互大廚的私房書單！10本設計原則的好書幫你進階學習！》

• Book.1《金字塔原理》
• Book.2《網站交互設計模式》
• Book.3《界面設計模式》Designing Interface
• Book.4《網站設計解構》有效的交互設計框架和模式
• Book.05《勝于言傳：網站內容制勝寶典》
• Book.06《Web表單設計》
• Book.07《社交網站界面設計》
• Book.08《搜索模式》
• Book.09《標簽：標記系統設計實踐》
• Book.10《Web信息架構》
• Book.11《移動應用UI設計模式》

交互模式是什么？為什么要先學習它們

學習烹飪必須從認識食材、練習刀工入手，學習交互設計也必須從交互模式開始。

模式Patterns，最早來自建筑設計，指可復用的建筑構件；某些建筑物看起來風格相同，因為它們使用了風格統一、制式化的磚瓦、廊柱、裝飾紋樣。強調模式，主要因為一致性是交互設計的核心原則，即所謂“外觀一致、操作一致、反饋一致”。

模式認知是基本功，每一個交互設計人員從新手走向成熟的必經之路。下面介紹11本相關圖書，希望大家順序研習。

Book.1《金字塔原理》

朋友提問：除了“大白熊”，還有什么信息架構的書啊？

對，《金字塔原理》的確是一本信息架構教程！愛信不信……如果系統的學習交互設計，它應該是第一本入門書籍。

學習如何清晰地表達（語言、文字），就是建立邏輯思維的過程。寫作優秀的人，一定邏輯清晰；優秀的交互設計人員一定可以提供層次清晰的文檔。

 

Book.2《網站交互設計模式》

傳說中的“大黃本”，正文足足600頁，近百萬字，厚度超過1元硬幣直徑。

請注意，書名正解應為“網站交互的設計模式”，第一部分快速介紹了設計方法（甚至包含了用戶調研）；第二部分介紹了107種常見web交互模式（pattern），包含一部分移動web模式；第三部分介紹了可行性（可用性）測試，評估網站的方法。

手冊型書籍，建議交互設計師人手一本，常見web交互設計問題在本書都能找到答案，完全掌握本書內容，約等于野生狀態下從事web交互設計3年工作經驗。

出版于2009年，目前已經買不到（二手也買不到），掃描件PDF請自助搜索。

 

Book.3《界面設計模式》Designing Interfaces

傳說中的“鴛鴦”，如果買不到“大黃本”，讀讀這本也好（推薦兩本都讀）。

第一版和第二版均有中文版，第一版雖然薄一些，但是印刷質量更好。手冊型的書籍，詳盡介紹了每個模式的三個特征：

1.這個模式是什么。

2.適用什么樣的場景。

3.這個模式的特點。

在方法論層面，信息架構、格式塔原理均有涉獵；有多少種模式（組件）可以解決單選問題？答案就在其中，附錄詞匯索引，簡直就是交互設計小百科。

 

Book.4《網站設計解構》有效的交互設計框架和模式

本書系統講述框架Framework、模式Pattern、組件Component三者的關系（只用了一個章節），其他章節講了三者的具體應用。

若干本講交互模式的書籍中，相同的東西也許稱呼不太一樣，請交叉閱讀進行對比。

連續介紹了三本交互模式的專著，如果一直研習下來，對模式的內涵和用法，應該已經融會貫通，甚至已經可以上手做出一些“很棒的原型”。

 

Book.5《勝于言傳：網站內容制勝寶典》

通過學習模式，大家已經可以設計基本的原型啦，這次主要介紹內容設計書籍。

實際工作中，剛剛入行的交互人員，普遍問題就是：界面不說人話。

1.正確的文字排版，區分標題、副標題、正文、列表、指示性文字。

2.條目化內容，提供祈使句和短內容，方便掃讀。

3.導航文案不是寫對聯，不需要四字對仗。

4.合理使用代詞你、我、我們。

5.一個按鈕應該使用提交、確認、保存。

6.表單如何提示驗證錯誤，如何降低用戶挫敗感

7.忘記密碼、找回密碼、登錄遇到問題？在語境上的區分。

8.如何避免認知上的歧義，保證基本易用性。

諸如以上問題，都是內容設計。

內容是信息的載體；特別是文本內容，更是重中之重；完全可以把內容理解為一種細分的交互模式，進行練習和研究。

 

Book.6《Web表單設計》

在學習基本Web交互模式和內容設計之后，大家一定一定一定要系統學習表單設計。如果沒有表單，交互設計就和平面設計沒區別了。

HTML標簽中，約1/4與表單直接有關系；設計便利、低用戶成本的表單，是提升產品轉化率的最核心技能之一。

《Web表單設計：點石成金的藝術》首選書籍，篇幅并不長，實體書目前已經絕版。本書系統介紹了Label位置、Tab順序、容錯、智能填充、反饋等重要模式，同時提供了大量可用性測試結果，理論和實踐依據結合。

另外一本書《Web表單設計：創建高可用性的網頁表單》作為備選，也可以讀一讀。

注意：因屏幕空間和觸發條件的巨大差異，web表單和移動端表單完全不同。

 

Book.7《社交網站界面設計》

也許，你并非正在設計社交類產品；然而，幾乎所有的產品都會涉及到注冊、登錄、個人中心、會話等功能，它們看似基礎和簡單，其則變化無窮；想系統學習一些基本招式，那就看看這本《社交網站界面設計》吧。

Passport和Profile是兩條基礎的產品線，與注冊轉化、日活用戶息息相關；社交網站是這方面的行家里手；正確地進行設計，規劃密鑰系統和身份系統，對產品未來擴展性非常重要。

可見性區分，是社交的重要玩法；整個系統的封閉屬性決定了關系鏈沉淀，也決定了社交天性當中的興趣點。

理論上說，積分/頭銜系統服務于社交，是社交的一部分，本書中有涉獵。

另外一本《SNS網站構建》也是介紹社交產品的，可作為備選讀物。

Book.8《搜索模式》

搜索，是“信息之間相互離散”的具體表現。簡單易用的搜索功能，背后是算法工程師的巨大努力：敘詞表的建立，排序規則、本地化結果、個性化結果、興趣關聯……好用的搜索，仿佛是知心朋友，與用戶感同身受。

《搜索模式》是本次首選書籍，提供了10種常見模式，在實際使用中，可能會遠遠超出本書的范圍。幾乎所有的電商平臺都會有專門團隊負責搜索產品。搜索也是投訴率較高的功能，更是用戶放棄使用的災難性原因。一款好用的搜索需要長時間打磨，即便讀了本書，還是需要用心地與研發、運營團隊通力配合。

在面試中Hozin經常會用一道筆試題： ?某個原生APP中，使用Search Input實現對姓名、手機號、訂單號的分類搜索，說說如何設計界面？

感興趣的朋友可以在回復作答，提供草圖/低保真原型。

 

Book.9《標簽：標記系統設計實踐》

如果只推薦一部信息架構書籍，Hozin肯定會選擇這本，而不是“大白熊”。標簽是搜索的近親，“信息之間相互離散”的具體表現，突破一切關系，讓任何離散的內容建立關聯。

本書介紹三種元數據入手，以信息學和生活實踐作為論述，一步一步結識了標簽系統和傳統分類的差異，并且還一腳深入到標簽的堂兄——推薦系統。

4種標記系統，5個常見的設計陷阱（及解決方法），沉淀了大量實用的設計方法，簡直就是居家旅行、殺人越貨必讀之經典。 關于受控詞表（敘詞表）的介紹，本書比“大白熊”更清晰易懂。

Book.10《Web信息架構》

終于輪到“大白熊”出場！多年以來，研究信息架構的朋友不斷反饋：真的根本啃不動……

Hozin強烈不建議初學者閱讀本書，如果連續學習前面推薦的9本交互模式相關書籍，再翻開“大白熊”：哇塞，似曾相識啊，好親切哦。

沒錯，“大白熊”的確講了信息架構，但是，它首先也是一本交互模式書籍；不夸張的說，80%的篇章，在前9本書中都有更詳盡的描述；“大白熊”只是把經典模式重新組織了一下，然后加上了一些信息架構講解。

一直以來，“大白熊”最特殊的部分就是關于敘詞表和受控詞表，這部分不如Book09《標簽》描述的清晰；第四版“大白熊”書名改為《信息架構：超越Web設計》，換湯不換藥。

再次強調，如果要學習交互設計模式，一定按照Hozin推薦的順序，一本一本的讀。

 

 

Book.11《移動應用UI設計模式》

從Web設計過渡到APP設計，短暫痛苦，也實在沒什么書籍推薦。原生APP讓交互設計仿佛變得簡單，變得缺乏變化，變得步調一致。

“小公雞”長成“大公雞”，這本書的厚度增加了一倍。從“導航”、表單、表格、搜索、圖表、幫助系統……Web需要10本書才說清楚的事情，《移動應用UI設計模式》一本書就全部囊括。

生活中，簡單和博大精深之間存在一種矛盾：舒適區讓你習慣飯來張口衣來伸手，學習會讓你痛恨渺小的自己；沒什么事情是生來簡單，一定要保持復雜的獨立思考。

 

后記

或許，很多交互設計老手、大牛，會對本篇推薦的圖書不屑一顧。誠然，在野生狀態下，摸索三五年，一樣可以成為高手。

“學習交互模式”和“直接模仿競品”有哪些明顯區別？

模式，來自前人總結。通過系統學習+正確使用，大家可以輕松的站在巨人的肩膀上，創新也變得有的放矢。

運用交互模式優勢顯而易見：

1. 削減實現成本

在技術實現領域，HTML標記、C/S窗體本身就是一套模式系統，它們生來就是可復用、模式化的。

2. 保證用戶體驗

只要合理使用交互模式，交互設計至少可達到優良水平，可用性測試變得簡單。

3. 一致性

外觀、操作、反饋容易達到一致，方便用戶學習和跨平臺使用。

4. 方便溝通

“需要設計一個的半透明浮層，蓋住整個界面，讓用戶只能選擇保存文檔或者取消保存，”

“模態LightBox，確認保存或取消”

不學習交互模式，直接模仿競品，可以嗎？

當然可以！但是，請明確如下問題：

1. 競品是優秀的設計么？

如果不學習模式，能建立優秀的客觀標準么？誰會模仿一個拙劣的設計？

2. 模仿和借鑒有區別么？

知其然，不知其所以然，只能永遠模仿；了解設計模式，方可庖丁解牛，按圖索驥。

3. 如何超越競品？

設計是一門遺憾的藝術。硬碰硬，與競品比長處，正面交鋒；田忌賽馬，彌補競品的缺陷；去其糟粕，取其精華。

認識食材，練習切菜，目的是讓掌握食材的特性；刀工是基礎，決定基礎口感；刀工甚至決定了火候。

歡迎關注作者的微信公眾號：「Hozin」

「設計書單推薦」

1. 交互設計丨從初級到高級交互設計師的私人推薦書單
2. 字體設計丨8位頂尖字體設計專家推薦的設計書單
3. 新人專屬丨專屬于新人設計師的私人推薦書單

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量200萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com