交互大廚的私房書單！10本「交互模式」的好書幫你進(jìn)階學(xué)習(xí)！

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

流程篇：《交互大廚的私房書單！10本「流程方法」的好書幫你進(jìn)階學(xué)習(xí)！》
設(shè)計(jì)原則篇：《交互大廚的私房書單！10本設(shè)計(jì)原則的好書幫你進(jìn)階學(xué)習(xí)！》

• Book.1《金字塔原理》
• Book.2《網(wǎng)站交互設(shè)計(jì)模式》
• Book.3《界面設(shè)計(jì)模式》Designing Interface
• Book.4《網(wǎng)站設(shè)計(jì)解構(gòu)》有效的交互設(shè)計(jì)框架和模式
• Book.05《勝于言傳：網(wǎng)站內(nèi)容制勝寶典》
• Book.06《Web表單設(shè)計(jì)》
• Book.07《社交網(wǎng)站界面設(shè)計(jì)》
• Book.08《搜索模式》
• Book.09《標(biāo)簽：標(biāo)記系統(tǒng)設(shè)計(jì)實(shí)踐》
• Book.10《Web信息架構(gòu)》
• Book.11《移動(dòng)應(yīng)用UI設(shè)計(jì)模式》

交互模式是什么？為什么要先學(xué)習(xí)它們

學(xué)習(xí)烹飪必須從認(rèn)識(shí)食材、練習(xí)刀工入手，學(xué)習(xí)交互設(shè)計(jì)也必須從交互模式開始。

模式Patterns，最早來自建筑設(shè)計(jì)，指可復(fù)用的建筑構(gòu)件；某些建筑物看起來風(fēng)格相同，因?yàn)樗鼈兪褂昧孙L(fēng)格統(tǒng)一、制式化的磚瓦、廊柱、裝飾紋樣。強(qiáng)調(diào)模式，主要因?yàn)橐恢滦允墙换ピO(shè)計(jì)的核心原則，即所謂“外觀一致、操作一致、反饋一致”。

模式認(rèn)知是基本功，每一個(gè)交互設(shè)計(jì)人員從新手走向成熟的必經(jīng)之路。下面介紹11本相關(guān)圖書，希望大家順序研習(xí)。

Book.1《金字塔原理》

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

對(duì)，《金字塔原理》的確是一本信息架構(gòu)教程！愛信不信……如果系統(tǒng)的學(xué)習(xí)交互設(shè)計(jì)，它應(yīng)該是第一本入門書籍。

學(xué)習(xí)如何清晰地表達(dá)（語言、文字），就是建立邏輯思維的過程。寫作優(yōu)秀的人，一定邏輯清晰；優(yōu)秀的交互設(shè)計(jì)人員一定可以提供層次清晰的文檔。

 

Book.2《網(wǎng)站交互設(shè)計(jì)模式》

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

請(qǐng)注意，書名正解應(yīng)為“網(wǎng)站交互的設(shè)計(jì)模式”，第一部分快速介紹了設(shè)計(jì)方法（甚至包含了用戶調(diào)研）；第二部分介紹了107種常見web交互模式（pattern），包含一部分移動(dòng)web模式；第三部分介紹了可行性（可用性）測(cè)試，評(píng)估網(wǎng)站的方法。

手冊(cè)型書籍，建議交互設(shè)計(jì)師人手一本，常見web交互設(shè)計(jì)問題在本書都能找到答案，完全掌握本書內(nèi)容，約等于野生狀態(tài)下從事web交互設(shè)計(jì)3年工作經(jīng)驗(yàn)。

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

 

Book.3《界面設(shè)計(jì)模式》Designing Interfaces

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

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

1.這個(gè)模式是什么。

2.適用什么樣的場(chǎng)景。

3.這個(gè)模式的特點(diǎn)。

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

 

Book.4《網(wǎng)站設(shè)計(jì)解構(gòu)》有效的交互設(shè)計(jì)框架和模式

本書系統(tǒng)講述框架Framework、模式Pattern、組件Component三者的關(guān)系（只用了一個(gè)章節(jié)），其他章節(jié)講了三者的具體應(yīng)用。

若干本講交互模式的書籍中，相同的東西也許稱呼不太一樣，請(qǐng)交叉閱讀進(jìn)行對(duì)比。

連續(xù)介紹了三本交互模式的專著，如果一直研習(xí)下來，對(duì)模式的內(nèi)涵和用法，應(yīng)該已經(jīng)融會(huì)貫通，甚至已經(jīng)可以上手做出一些“很棒的原型”。

 

Book.5《勝于言傳：網(wǎng)站內(nèi)容制勝寶典》

通過學(xué)習(xí)模式，大家已經(jīng)可以設(shè)計(jì)基本的原型啦，這次主要介紹內(nèi)容設(shè)計(jì)書籍。

實(shí)際工作中，剛剛?cè)胄械慕换ト藛T，普遍問題就是：界面不說人話。

1.正確的文字排版，區(qū)分標(biāo)題、副標(biāo)題、正文、列表、指示性文字。

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

3.導(dǎo)航文案不是寫對(duì)聯(lián)，不需要四字對(duì)仗。

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

5.一個(gè)按鈕應(yīng)該使用提交、確認(rèn)、保存。

6.表單如何提示驗(yàn)證錯(cuò)誤，如何降低用戶挫敗感

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

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

諸如以上問題，都是內(nèi)容設(shè)計(jì)。

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

 

Book.6《Web表單設(shè)計(jì)》

在學(xué)習(xí)基本W(wǎng)eb交互模式和內(nèi)容設(shè)計(jì)之后，大家一定一定一定要系統(tǒng)學(xué)習(xí)表單設(shè)計(jì)。如果沒有表單，交互設(shè)計(jì)就和平面設(shè)計(jì)沒區(qū)別了。

HTML標(biāo)簽中，約1/4與表單直接有關(guān)系；設(shè)計(jì)便利、低用戶成本的表單，是提升產(chǎn)品轉(zhuǎn)化率的最核心技能之一。

《Web表單設(shè)計(jì)：點(diǎn)石成金的藝術(shù)》首選書籍，篇幅并不長(zhǎng)，實(shí)體書目前已經(jīng)絕版。本書系統(tǒng)介紹了Label位置、Tab順序、容錯(cuò)、智能填充、反饋等重要模式，同時(shí)提供了大量可用性測(cè)試結(jié)果，理論和實(shí)踐依據(jù)結(jié)合。

另外一本書《Web表單設(shè)計(jì)：創(chuàng)建高可用性的網(wǎng)頁表單》作為備選，也可以讀一讀。

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

 

Book.7《社交網(wǎng)站界面設(shè)計(jì)》

也許，你并非正在設(shè)計(jì)社交類產(chǎn)品；然而，幾乎所有的產(chǎn)品都會(huì)涉及到注冊(cè)、登錄、個(gè)人中心、會(huì)話等功能，它們看似基礎(chǔ)和簡(jiǎn)單，其則變化無窮；想系統(tǒng)學(xué)習(xí)一些基本招式，那就看看這本《社交網(wǎng)站界面設(shè)計(jì)》吧。

Passport和Profile是兩條基礎(chǔ)的產(chǎn)品線，與注冊(cè)轉(zhuǎn)化、日活用戶息息相關(guān)；社交網(wǎng)站是這方面的行家里手；正確地進(jìn)行設(shè)計(jì)，規(guī)劃密鑰系統(tǒng)和身份系統(tǒng)，對(duì)產(chǎn)品未來擴(kuò)展性非常重要。

可見性區(qū)分，是社交的重要玩法；整個(gè)系統(tǒng)的封閉屬性決定了關(guān)系鏈沉淀，也決定了社交天性當(dāng)中的興趣點(diǎn)。

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

另外一本《SNS網(wǎng)站構(gòu)建》也是介紹社交產(chǎn)品的，可作為備選讀物。

Book.8《搜索模式》

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

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

在面試中Hozin經(jīng)常會(huì)用一道筆試題： ?某個(gè)原生APP中，使用Search Input實(shí)現(xiàn)對(duì)姓名、手機(jī)號(hào)、訂單號(hào)的分類搜索，說說如何設(shè)計(jì)界面？

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

 

Book.9《標(biāo)簽：標(biāo)記系統(tǒng)設(shè)計(jì)實(shí)踐》

如果只推薦一部信息架構(gòu)書籍，Hozin肯定會(huì)選擇這本，而不是“大白熊”。標(biāo)簽是搜索的近親，“信息之間相互離散”的具體表現(xiàn)，突破一切關(guān)系，讓任何離散的內(nèi)容建立關(guān)聯(lián)。

本書介紹三種元數(shù)據(jù)入手，以信息學(xué)和生活實(shí)踐作為論述，一步一步結(jié)識(shí)了標(biāo)簽系統(tǒng)和傳統(tǒng)分類的差異，并且還一腳深入到標(biāo)簽的堂兄——推薦系統(tǒng)。

4種標(biāo)記系統(tǒng)，5個(gè)常見的設(shè)計(jì)陷阱（及解決方法），沉淀了大量實(shí)用的設(shè)計(jì)方法，簡(jiǎn)直就是居家旅行、殺人越貨必讀之經(jīng)典。 關(guān)于受控詞表（敘詞表）的介紹，本書比“大白熊”更清晰易懂。

Book.10《Web信息架構(gòu)》

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

Hozin強(qiáng)烈不建議初學(xué)者閱讀本書，如果連續(xù)學(xué)習(xí)前面推薦的9本交互模式相關(guān)書籍，再翻開“大白熊”：哇塞，似曾相識(shí)啊，好親切哦。

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

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

再次強(qiáng)調(diào)，如果要學(xué)習(xí)交互設(shè)計(jì)模式，一定按照Hozin推薦的順序，一本一本的讀。

 

 

Book.11《移動(dòng)應(yīng)用UI設(shè)計(jì)模式》

從Web設(shè)計(jì)過渡到APP設(shè)計(jì)，短暫痛苦，也實(shí)在沒什么書籍推薦。原生APP讓交互設(shè)計(jì)仿佛變得簡(jiǎn)單，變得缺乏變化，變得步調(diào)一致。

“小公雞”長(zhǎng)成“大公雞”，這本書的厚度增加了一倍。從“導(dǎo)航”、表單、表格、搜索、圖表、幫助系統(tǒng)……Web需要10本書才說清楚的事情，《移動(dòng)應(yīng)用UI設(shè)計(jì)模式》一本書就全部囊括。

生活中，簡(jiǎn)單和博大精深之間存在一種矛盾：舒適區(qū)讓你習(xí)慣飯來張口衣來伸手，學(xué)習(xí)會(huì)讓你痛恨渺小的自己；沒什么事情是生來簡(jiǎn)單，一定要保持復(fù)雜的獨(dú)立思考。

 

后記

或許，很多交互設(shè)計(jì)老手、大牛，會(huì)對(duì)本篇推薦的圖書不屑一顧。誠(chéng)然，在野生狀態(tài)下，摸索三五年，一樣可以成為高手。

“學(xué)習(xí)交互模式”和“直接模仿競(jìng)品”有哪些明顯區(qū)別？

模式，來自前人總結(jié)。通過系統(tǒng)學(xué)習(xí)+正確使用，大家可以輕松的站在巨人的肩膀上，創(chuàng)新也變得有的放矢。

運(yùn)用交互模式優(yōu)勢(shì)顯而易見：

1. 削減實(shí)現(xiàn)成本

在技術(shù)實(shí)現(xiàn)領(lǐng)域，HTML標(biāo)記、C/S窗體本身就是一套模式系統(tǒng)，它們生來就是可復(fù)用、模式化的。

2. 保證用戶體驗(yàn)

只要合理使用交互模式，交互設(shè)計(jì)至少可達(dá)到優(yōu)良水平，可用性測(cè)試變得簡(jiǎn)單。

3. 一致性

外觀、操作、反饋容易達(dá)到一致，方便用戶學(xué)習(xí)和跨平臺(tái)使用。

4. 方便溝通

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

“模態(tài)LightBox，確認(rèn)保存或取消”

不學(xué)習(xí)交互模式，直接模仿競(jìng)品，可以嗎？

當(dāng)然可以！但是，請(qǐng)明確如下問題：

1. 競(jìng)品是優(yōu)秀的設(shè)計(jì)么？

如果不學(xué)習(xí)模式，能建立優(yōu)秀的客觀標(biāo)準(zhǔn)么？誰會(huì)模仿一個(gè)拙劣的設(shè)計(jì)？

2. 模仿和借鑒有區(qū)別么？

知其然，不知其所以然，只能永遠(yuǎn)模仿；了解設(shè)計(jì)模式，方可庖丁解牛，按圖索驥。

3. 如何超越競(jìng)品？

設(shè)計(jì)是一門遺憾的藝術(shù)。硬碰硬，與競(jìng)品比長(zhǎng)處，正面交鋒；田忌賽馬，彌補(bǔ)競(jìng)品的缺陷；去其糟粕，取其精華。

認(rèn)識(shí)食材，練習(xí)切菜，目的是讓掌握食材的特性；刀工是基礎(chǔ)，決定基礎(chǔ)口感；刀工甚至決定了火候。

歡迎關(guān)注作者的微信公眾號(hào)：「Hozin」

「設(shè)計(jì)書單推薦」

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

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量200萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com