《About Face: 交互設(shè)計(jì)精髓》稱得上是交互設(shè)計(jì)的圣經(jīng)，用“工作必備，常看常新”來形容也不為過。書中的每句話對(duì)平時(shí)的實(shí)踐都有著指導(dǎo)意義。更難能可貴的是，這本圣經(jīng)從1.0到4.0每次版本更新都與時(shí)俱進(jìn)，像4.0還講到特斯拉的車載設(shè)計(jì)。

但遺憾的是，能全部看完這本圣經(jīng)的人不多。原因可能有兩方面：一，500多頁的大部頭，看起來心理壓力確實(shí)太大，很多人想看但不知從何下手；二，翻譯的過程中難免有信息的偏差和錯(cuò)誤，讓很多人看了晦澀難懂、一頭霧水。

因此，我本從書中提取摘要和原則，一方面是想讓讀者對(duì)本書全貌有個(gè)初步的了解，另一方面也是希望這些原則能有益于大家工作。

另外，我也收集了本書的中英文資料（如需要可以加我微信 gold3bear），也是希望方便大家深入學(xué)習(xí)和研究。在文章末尾我預(yù)埋了彩蛋，給對(duì)交互設(shè)計(jì)和產(chǎn)品設(shè)計(jì)有多追求的小伙伴。

第一部分 目標(biāo)導(dǎo)向設(shè)計(jì)

第1章 數(shù)字產(chǎn)品的設(shè)計(jì)過程

如果我們?cè)O(shè)計(jì)的數(shù)字產(chǎn)品能夠讓人們方便地達(dá) 成目標(biāo)，他們會(huì)感到滿意，提高效率，心情愉快。如此一來，人們會(huì)高興 地購買這款產(chǎn)品，還會(huì)推薦他人購買。假設(shè)我們能夠以低成本實(shí)現(xiàn)上述目標(biāo)，就能取得商業(yè)上的成功。表面上，這個(gè)前提一目了然。只要用戶滿意，產(chǎn)品就會(huì)成功。可是為什么仍有那么多的數(shù)字產(chǎn)品難以使用，用起來讓人痛苦呢？為什么不能皆大 歡喜、雙方共嬴？盡管我們一直在更快、更廉價(jià)、更便捷技術(shù)的創(chuàng)新道路 上穩(wěn)步邁進(jìn)，為什么人們?nèi)詴?huì)感到沮喪？一言以蔽之，答案是因?yàn)樵诋a(chǎn)品規(guī)劃和開發(fā)的過程中，沒有把設(shè)計(jì)作為同等重要的基礎(chǔ)環(huán)節(jié)。

• 用戶界面應(yīng)該基于用戶心理模型，而不是實(shí)現(xiàn)模型。User interfaces should be based on user mental models rather than implementation models.

• 目標(biāo)導(dǎo)向的交互設(shè)計(jì)反映了用戶的心理模型。Goal-directed interactions reflect user mental models.

• 交互設(shè)計(jì)不是憑空猜測。Interaction design is not guesswork.

##第2章 理解問題：設(shè)計(jì)研究

任何設(shè)計(jì)成果的評(píng)判標(biāo)準(zhǔn)，都要看產(chǎn)品最終滿足用戶或委托開發(fā)組織需求的程度。不管設(shè)計(jì)師技藝多高超，多有創(chuàng)造力，如果沒有清晰而詳細(xì)地了解其目標(biāo)用戶、問題限制及推動(dòng)設(shè)計(jì)的商業(yè)或組織目標(biāo)，那么成功的機(jī)會(huì)不大。僅僅篩選一下從市場調(diào)查（盡管這對(duì)回答其他類型問題十分重要）之類的定量研究得到的數(shù)字和圖表，很難輕易地深入把握這些主題。
這種行為和組織知識(shí)需要通過定性研究方法來收集。定量研究方法有很多種，每種方法對(duì)理解產(chǎn)品設(shè)計(jì)輪廓都十分重要。

第3章 為用戶建模: 人物模型和目標(biāo)

一旦花了大量時(shí)間進(jìn)行實(shí)地調(diào)查，研究用戶的生活、動(dòng)機(jī)和環(huán)境，接著問題自然而然地產(chǎn)生了：如何利用如此巨大的研究數(shù)據(jù)打造成功的產(chǎn)品？記事本里充滿了對(duì)話記錄和觀察結(jié)果，很可能我們交流過的每 個(gè)人都有些許不同。很難想象，每次做出設(shè)計(jì)決策時(shí)，都要從數(shù)百頁筆記中挖掘有用信息。即便有足夠時(shí)間，這些筆記提供的信息是否有幫助還不 一定。如何使這些數(shù)據(jù)變得有意義？如何辨明重點(diǎn)？我們引入了建模（model)這一強(qiáng)大概念解決上述問題。

• 不要讓用戶感覺自己愚笨。Don’t make the user feel stupid.

• 界面設(shè)計(jì)的關(guān)注點(diǎn)在于單個(gè)主要人物模型。Focus the design for each interface on a single primary persona.

第4章 設(shè)立愿景：場景和設(shè)計(jì)需求

在前兩章中，我們討論了如何收集關(guān)于用戶的定性信息，如何利用信息創(chuàng) 建模型。通過仔細(xì)分析用戶研究結(jié)果以及人物模型及其他模型的綜合體，我們創(chuàng)造了一副清晰的畫面來呈現(xiàn)用戶及其各自的目標(biāo)和用戶目前的情況。接下 來，就到了整個(gè)方法的關(guān)鍵部分：如何利用對(duì)用戶的理解來制訂設(shè)計(jì)方案，既 能讓用戶滿意、對(duì)用戶有所激發(fā)，同時(shí)又能完成商業(yè)目標(biāo)，突破技術(shù)上的限制。

• 設(shè)計(jì)產(chǎn)品行為前，首先定義產(chǎn)品會(huì)做什么。Define what the product will do before you design how the product will do it.

• 設(shè)計(jì)的早期階段，假定界面是魔法。In the early stages of design, pretend the interface is magic.

第5章 設(shè)計(jì)產(chǎn)品：框架和提煉

上一章中我們討論了設(shè)計(jì)過程的前半部分，即利用故事情節(jié)或場景劇本來設(shè)想理想的用戶交互過程，之后從這些場景和其他來源中對(duì)需求進(jìn)行定義。現(xiàn)在我們終于做好準(zhǔn)備，開始設(shè)計(jì)。

• 絕對(duì)不要向利益相關(guān)者展現(xiàn)你不滿意的設(shè)計(jì)方案，那可能正是他們喜歡的。Never show a design approach you’re unhappy with; stakeholders just might like it.

• 用戶體驗(yàn)只有一個(gè)，即形式和行為的設(shè)計(jì)必須相互和諧。There is only one user experience: Form and behavior must be designed in concert.

第6章 創(chuàng)造型團(tuán)隊(duì)合作

在本書的介紹中，我們?cè)岬?#xff0c;目標(biāo)導(dǎo)向方法包含三方面內(nèi)容，即原則、類型和過程。然而，還有一點(diǎn)值得提及——實(shí)踐。本書花費(fèi)了大幅篇幅講述上述 三方面內(nèi)容，我們希望能在本章跟大家分享一些關(guān)于目標(biāo)導(dǎo)向設(shè)計(jì)的實(shí)踐，以及設(shè)計(jì)團(tuán)隊(duì)如何融入更大的產(chǎn)品團(tuán)隊(duì)。 本章主要講述三方面內(nèi)容：一是團(tuán)隊(duì)合作的戰(zhàn)略；二是產(chǎn)品開發(fā)的正確方法；三是整合不同組織間團(tuán)隊(duì)合作的技巧。有些最有趣、最重要的設(shè)計(jì)問題太 大以致無法單獨(dú)解決。通常，這些問題牽扯過多，很難拋開其他問題而單個(gè)解決。

第二部分 設(shè)計(jì)行為和形式

第7章 良好產(chǎn)品行為的基礎(chǔ)

如何做出產(chǎn)品設(shè)計(jì)的決策呢？什么成就了好的設(shè)計(jì)方案呢？測量設(shè)計(jì)質(zhì)量的一個(gè)依據(jù)，就是產(chǎn)品滿足用戶目標(biāo)和需求的能力，以及是否適應(yīng)商業(yè)目標(biāo)和技術(shù)限制。但是產(chǎn)品解決方案是否具有可識(shí)別、可實(shí)現(xiàn)性的特征？我們能否將類似問題的解決方案一般化？要成就好的設(shè)計(jì)是否要求設(shè)計(jì)過程具有普遍適用性？ 答案就在交互設(shè)計(jì)價(jià)值、原則和模式的使用中：設(shè)計(jì)價(jià)值（design values) 為成功、恰當(dāng)?shù)脑O(shè)計(jì)實(shí)踐提供了指導(dǎo)方針；設(shè)計(jì)原則（design principles)為設(shè)計(jì)有用而令人期待的產(chǎn)品、系統(tǒng)和服務(wù)提供了向?qū)?#xff1b;設(shè)計(jì)模式（design patterns) 針對(duì)某些具體的設(shè)計(jì)問題給出了一般方案。

第8章 數(shù)字產(chǎn)品的禮儀

研究發(fā)現(xiàn)，人類與計(jì)算機(jī)及其他交互產(chǎn)品之間的對(duì)待和反應(yīng)方式如同人與人之間的交往。我們與軟件的交互也出于本能，是無意識(shí)行為，也是不可回避的。這個(gè)研究的意義是深遠(yuǎn)的，如果希望用戶喜歡我們的軟件，那么當(dāng)我們?cè)O(shè)計(jì)軟件時(shí)，應(yīng)該讓它表現(xiàn)得像一位舉止得體的人。如果希望用戶能高效地使用我們的如果希望用戶能高效地使用我們的軟件，那么就應(yīng)該將它設(shè)計(jì)得像一個(gè)幫助和支持自己工作的同事。總之， 應(yīng)當(dāng)考慮人與計(jì)算機(jī)在工作上的角色分配。

• 人來思考，計(jì)算機(jī)干活。The computer does the work, and the person does the thinking.

• 軟件應(yīng)該像人一樣體貼。Software should behave like a considerate human being.

• 如果用戶愿意操作，就值得程序記住。If it’s worth it to the user to do it, it’s worth it to the application to remember it.

第9章 平臺(tái)和姿態(tài)

在開始設(shè)計(jì)一個(gè)數(shù)字產(chǎn)品的交互框架時(shí)，要回答的第一個(gè)問題是“什么樣的平臺(tái)（platform)和姿態(tài)（posture)是合適的？”產(chǎn)品的平臺(tái)（platform)可以認(rèn)為是使產(chǎn)品能運(yùn)轉(zhuǎn)起來的軟件和硬件的共同作用體，包括用戶交互和產(chǎn)品內(nèi)部運(yùn)轉(zhuǎn)。常見平臺(tái)：桌面端、網(wǎng)站、 手機(jī)、數(shù)碼相機(jī)……產(chǎn)品的姿態(tài)（posture）是指產(chǎn)品的行為立場，也就是產(chǎn)品對(duì)用戶的展現(xiàn)方式。姿態(tài)討論的是用戶在與產(chǎn)品交互上投入多少精力；以及產(chǎn)品又如何回應(yīng)這些精力投入。這一決定必須建立在了解產(chǎn)品可能的用戶場景和環(huán)境基礎(chǔ)上。常見的應(yīng)用姿態(tài)分為獨(dú)占式、暫時(shí)式、后臺(tái)式……

• 技術(shù)平臺(tái)相關(guān)的決定最好能融入交互設(shè)計(jì)的成果。Decisions about technical platform are best made in concert with interaction design efforts.

• 全屏幕使用獨(dú)占應(yīng)用程序，讓它發(fā)揮最優(yōu)效果。Optimize sovereign applications for full-screen use.

• 獨(dú)占界面應(yīng)該采用保守的視覺風(fēng)格。Sovereign interfaces should feature a conservative visual style.

• 獨(dú)占式應(yīng)用程序可以使用豐富的輸入方式。Sovereign applications should exploit rich input.

• 在獨(dú)占應(yīng)用程序中讓文檔視圖最大化。Maximize document views within sovereign applications.

• 暫時(shí)應(yīng)用程序必須簡單、清晰并且意思明確。Transient applications must be simple, clear, and to the point.

• 暫時(shí)式應(yīng)用程序只使用一個(gè)窗口和視圖。Transient applications should be limited to a single window and view.

• 啟動(dòng)暫時(shí)式應(yīng)用時(shí)，它應(yīng)該處于上一次的位置和配置狀態(tài)下。A transient application should launch to its previous position and configuration.

• 信息亭應(yīng)該針對(duì)首次使用者進(jìn)行優(yōu)化。Kiosks should be optimized for first-time use.

第10章 為中級(jí)用戶優(yōu)化設(shè)計(jì)

大部分技術(shù)產(chǎn)品用戶都了解這種感受，即買回一部數(shù)字家電或下載一個(gè)新 軟件應(yīng)用，就意味著要開始學(xué)習(xí)一種新界面；而這種學(xué)習(xí)過程歷時(shí)數(shù)天，充滿了 挫折感和失望。此外，許多有經(jīng)驗(yàn)的數(shù)字產(chǎn)品用戶也可能會(huì)沮喪，因?yàn)樗麄兛偙划a(chǎn)品當(dāng)作新手。看來很難找到一個(gè)合適的平衡點(diǎn)，同時(shí)滿足新手和專家的要求。

• 不要將培訓(xùn)工具固定化。Don’t weld on training wheels.

• 沒有人愿意永遠(yuǎn)當(dāng)個(gè)新手。Nobody wants to remain a beginner.

• 為中級(jí)用戶而優(yōu)化設(shè)計(jì)。Optimize for intermediates.

• 為常見的導(dǎo)航調(diào)整界面。Inflect the interface for typical navigation.

• 用戶只有獲得充分的回報(bào)，才會(huì)付出相應(yīng)的努力。Users make commensurate effort if the rewards justify it.

• 將用戶想象成為非常聰明但很忙碌的人。Imagine users as very intelligent and very busy.

第11章 編排與心流

如果產(chǎn)品設(shè)計(jì)的目標(biāo)是讓用戶在使用產(chǎn)品時(shí)生產(chǎn)力更高、更有效、更投入， 就必須讓用戶保持正確的心態(tài)。本章討論人類心理工程學(xué)（mental ergonomics)， 主要講述了如何讓產(chǎn)品支撐起用戶的智力和效率，如何避免破壞用戶在投入生產(chǎn)時(shí)的專注度，這正是我們希望用戶保持的狀態(tài)。

• 不論界面多酷，越少越好。No matter how cool your interface is, less of it would be better.

• 不要用對(duì)話框報(bào)告。Don’t use dialogs to report normalcy.

• 請(qǐng)求原諒，而不是許可。Ask forgiveness, not permission.

第12章 減少工作，消除負(fù)擔(dān)

軟件經(jīng)常包括一些臃腫的交互，要求用戶做不必要的工作。界面交互始終需要用戶做事情；設(shè)計(jì)師（或者是其他更重要的人）須將此種必要負(fù)擔(dān)降至最低， 同時(shí)還能讓用戶達(dá)到目標(biāo)。如果設(shè)計(jì)師和開發(fā)者不注意人們?yōu)椴僮骷夹g(shù)所需的動(dòng)作，就會(huì)產(chǎn)生繁重的用戶體驗(yàn)。用戶得費(fèi)很大力氣才能為他們想要執(zhí)行活動(dòng) 所需的心理模型與設(shè)計(jì)的產(chǎn)品界面匹配上。用戶與數(shù)字產(chǎn)品交互時(shí)執(zhí)行4類工作：認(rèn)知工作、記憶工作、視覺工作、肢體工作。

• 盡可能地消除每一種練習(xí)。Eliminate excise wherever possible.

• 不要愚蠢地打斷進(jìn)程。Don’t stop the proceedings with idiocy.

• 不要讓用戶請(qǐng)求許可。Don’t make users ask for permission.

• 任何輸出之處應(yīng)允許輸入。Allow input wherever you have output.

• 重大改變必須顯著優(yōu)秀。Significant change must be significantly better.

第13章 隱喻、習(xí)慣用法及能供性

隨著Android、WindowsPhone和iOS的降臨，我們正式進(jìn)入了交互設(shè)計(jì)的 后隱喻時(shí)代。早期桌面軟件和手持設(shè)備的擬物化（skeuomorphism)和過度雕琢的視覺隱喻已成過去。現(xiàn)代設(shè)備的UI以內(nèi)容和數(shù)據(jù)為中心，把UI控件的認(rèn)知度降至最低。 這種脫離隱喻之勢姍姍來遲，如此有充足的理由：嚴(yán)格奉行隱喻設(shè)計(jì)毫無必要，卻把界面死死地與物理世界的運(yùn)行機(jī)制捆綁在一起。基于隱喻設(shè)計(jì)的用戶界面還有一大堆其他問題，如沒有足夠多的隱喻、 縮放效果不好、用戶能否識(shí)別出隱喻有待商榷，特別是在跨文化時(shí)。隱喻， 尤其是物理隱喻和空間隱喻，在設(shè)計(jì)大多數(shù)數(shù)字產(chǎn)品時(shí)作用不大。

• 多數(shù)人并不想知道得太多，只想成功地使用產(chǎn)品。Most people would rather be successful than knowledgeable.

• 不要讓界面強(qiáng)行適應(yīng)隱喻。Never bend your interface to fit a metaphor.

• 所有的習(xí)慣用法都需要學(xué)習(xí)，而好的習(xí)慣用法只需學(xué)習(xí)一次。All idioms must be learned; good idioms need to be learned only once.

• 豐富的視覺反饋是成功的直接操作的關(guān)鍵。Rich visual feedback is the key to successful direct manipulation.

• 盡可能用視覺表達(dá)順從。Visually communicate pliancy whenever possible.

第14章 重新思考數(shù)據(jù)輸入、存儲(chǔ)與檢索

在數(shù)字科技的世界中，實(shí)現(xiàn)模型思維在數(shù)據(jù)管理上體現(xiàn)得最明顯：輸入、存儲(chǔ)、檢索數(shù)據(jù)。你遇到多少次這樣的情況：在一組表單中輸入信息，卻彈出令人迷惑的錯(cuò)誤 對(duì)話框，告訴你輸入錯(cuò)誤。或許是在電話號(hào)碼中輸入了連字符，或許是在只能 輸入名字的地方輸入了姓氏和名字，或許不小心在只能輸入數(shù)字的地方敲了文 本。這些問題都源自軟件強(qiáng)迫人們像電腦一樣思考。軟件迫使人們毫無必要地面對(duì)電腦內(nèi)部的數(shù)據(jù)輸入、存儲(chǔ)和檢索機(jī)制。不僅你母親有這個(gè)問題，即便高級(jí)用戶也很容易迷惑或犯錯(cuò)誤。

• 出錯(cuò)可能不是程序的問題，但是程序的責(zé)任。An error may not be your application’s fault, but it is your application’s responsibility.

• 審核，不要編輯。Audit, don’t edit.

• 自動(dòng)保存文檔和設(shè)置。Save documents and settings automatically.

• 把文件放在用戶能找到的地方。Put files where users can find them.

第15章 防止錯(cuò)誤，通知決定

數(shù)字革命早期，對(duì)話框和消息在軟件應(yīng)用的圖形界面中占據(jù)著很大比例， 告訴用戶他們做錯(cuò)了什么，或者警告用戶，計(jì)算機(jī)或軟件由于實(shí)際或臆想的技術(shù)限制，無法處理你的請(qǐng)求。如今，由于計(jì)算、存儲(chǔ)和通信速度增加了不知道幾個(gè)數(shù)量級(jí)，先進(jìn)的編程工具和技術(shù)同樣有長足進(jìn)步，這兩類錯(cuò)誤信息中的第二類基本沒有了。而第一類錯(cuò)誤信息，責(zé)備用戶犯錯(cuò)誤，也已經(jīng)開始消失（至少在消費(fèi)者和移動(dòng)應(yīng)用程序領(lǐng)域）。設(shè)計(jì)者發(fā)現(xiàn)了更好的方法以防患于未然，允許用戶進(jìn)行撤銷操作，此外還賦予用戶在操作之前預(yù)先看到結(jié)果的魔法。關(guān)于錯(cuò)誤 防止和決定通知的這三種策略，就是本章的主題。

第16章 為不同的需求而設(shè)計(jì)

正如第一部分所談到的，人物模型和場景有助于將設(shè)計(jì)工作重點(diǎn)放在實(shí)際 用戶的目標(biāo)、行為、需求和心理模型上。除了人物模型能讓設(shè)計(jì)工作抓住重點(diǎn)外， 一些持續(xù)性的可概括的用戶需求模型也能告訴我們應(yīng)該如何設(shè)計(jì)產(chǎn)品。本章將 探討滿足一些廣為人知的需求所需的策略：易學(xué)性（learnability)和幫助(help)、 可定制性(customizability)、本地化（localization)和全球化(globalization)，以及無障礙性（accessibility)。

• 給用戶提供一個(gè)現(xiàn)成模板庫。Offer users a gallery of ready-to-use templates.

第17章 整合視覺設(shè)計(jì)

作為交互設(shè)計(jì)師，你需要花費(fèi)大量精力理解產(chǎn)品的用戶，還要花時(shí)間雕琢界面的行為和內(nèi)容的呈現(xiàn)，幫助用戶達(dá)到目標(biāo)。不過，如果沒有投入大量工作清晰地告訴 用戶有哪些內(nèi)容，如何與內(nèi)容交互，那么上述努力就白費(fèi)了。對(duì)于交互產(chǎn)品，這 種溝通幾乎總是視覺的，借助顯示器完成（就定制硬件而言，也可以通過物理 屬性來傳達(dá)某些產(chǎn)品行為。）本章將討論有效的目標(biāo)導(dǎo)向視覺界面設(shè)計(jì)策略。第3部分將提供更多關(guān)于具體交互與界面習(xí)慣用法的細(xì)節(jié)。

• 表明這是什么用視覺；明確這是哪一個(gè)用文字。Visually show what; textually tell which.

• 行為不同的元素要在視覺設(shè)計(jì)上明顯區(qū)分。Visually distinguish elements that behave differently.

• 從視覺上傳達(dá)功能和行為。Visually communicate function and behavior.

• 刪減東西，直到破壞了設(shè)計(jì)為止，再把最后去掉的東西加上。Take things away until the design breaks, and then put that last thing back in.

• 遵守標(biāo)準(zhǔn)，除非有極好的其他選擇。Obey standards unless there is a truly superior alternative.

• 一致不意味著僵化。Consistency doesn’t imply rigidity.

第三部分 交互細(xì)節(jié)

第18章 為桌面應(yīng)用而設(shè)計(jì)

當(dāng)代桌面應(yīng)用的界面都源自施樂(Xerox)的Alto，它是1973年施樂公司的 PARC研究中心開發(fā)出來的一個(gè)實(shí)驗(yàn)性計(jì)算機(jī)系統(tǒng)。在發(fā)明Alto的同時(shí)，PARC 的研究者們創(chuàng)造出了現(xiàn)代桌面UI典范的四大支柱：窗口（Window)、圖標(biāo) （Icon)、菜單（Menu)、鼠標(biāo)（Pointer)，簡稱為 WIMP。Alto的使用者能夠以WYSIWYG（What You See Is What You Get ，即“所見即所得”）的方式，在系統(tǒng)中對(duì)文檔進(jìn)行創(chuàng)建、編輯和查看等功能。Alto，以及它的后繼者——施樂Star，在商業(yè)上失畋了，但它們?cè)谧烂嬗?jì)算機(jī)上的創(chuàng)新，為日后的普及做出卓越的貢獻(xiàn)。

• 無論是運(yùn)用哪種交互習(xí)慣用法，都要考慮實(shí)際運(yùn)用場景的客觀情況。The utility of any interaction idiom is context-dependent.

• 對(duì)話框是一個(gè)房間，去之前要有個(gè)好理由。A dialog box is another room; have a good reason to go there.

• 將功能置于需要它們的窗口中。Provide functions in the window where they are used.

• 用菜單來提供一條學(xué)習(xí)的途徑。Use menus to provide a pedagogic vector.

• 禁用掉不適用的菜單項(xiàng)。Disable menu items when they are not applicable.

• 相同的命令要使用相同的視覺符號(hào)。Use consistent visual symbols on related commands.

• 工具欄為有經(jīng)驗(yàn)的用戶提供快速訪問常用功能的途徑。Toolbars give experienced users fast access to frequently used functions.

• 所有工具欄和圖標(biāo)控件都應(yīng)該使用工具提示。Use ToolTips with all toolbar and iconic controls.

• 瀏覽和選擇任務(wù)要同時(shí)提供鼠標(biāo)和鍵盤支持。Support both mouse and keyboard use for navigation and selection tasks.

• 用光標(biāo)形狀變化表明元鍵的用法。Use cursor hinting to show the meanings of metakeys.

• 單擊意味選擇數(shù)據(jù)或?qū)ο?#xff0c;或改變控件狀態(tài)。Single-clicking selects data or an object or changes the control state.

• 雙擊意味著單擊再加上動(dòng)作。Double-clicking means single-clicking plus action.

• 在對(duì)象或者數(shù)據(jù)上按下鼠標(biāo)意味著選擇。Mouse-down over an object or data should select the object or data.

• 在控件上鼠標(biāo)按下意味著預(yù)備動(dòng)作；鼠標(biāo)釋放意味著執(zhí)行動(dòng)作。Mouse-down over controls means proposing an action; mouse-up means committing to an action.

• 要讓選中這種狀態(tài)，在視覺上明確而醒目。Mouse-down over controls means proposing an action; mouse-up means committing to an action.

• 拖放候選對(duì)象必須在視覺上表明它們的接受能力。The selection state should be visually evident and unambiguous.

• 拖動(dòng)光標(biāo)必須在視覺上表明源對(duì)象。Drop candidates must visually indicate their receptivity.

• 任何可滾動(dòng)的拖放目標(biāo)對(duì)象都必須支持自動(dòng)滾屏。Any scrollable drag-and-drop target must auto-scroll.

• 所有拖動(dòng)都要去顫動(dòng)。Debounce all drags.

• 任何要求精確對(duì)齊的程序必須提供精確滾動(dòng)的游標(biāo)工具。Any program that demands precise alignment must offer a vernier.

第19章 為移動(dòng)設(shè)備和其他設(shè)備而設(shè)計(jì)

2007 年6月，蘋果發(fā)布了iPhone，幾乎一夜間，移動(dòng)設(shè)備的定義發(fā)生了翻天覆地的變化。它徹底取代了原來糟糕的用戶體驗(yàn)。現(xiàn)在，iPad、Android和微軟的多點(diǎn)觸摸平板的銷量不斷增加。對(duì)于很多人來說，這樣一種非常方便的計(jì)算設(shè)備，想用的時(shí)候按下開關(guān)就立即能用，關(guān)閉時(shí)可以立即保存上次的狀態(tài)，并且允許直接的多點(diǎn)指尖輸入，這一切的一切，都遠(yuǎn)遠(yuǎn)優(yōu)于傳統(tǒng)的桌面軟件、優(yōu)于傳統(tǒng)的點(diǎn)指輸入設(shè)備。本章的大部分篇幅，將介紹在設(shè)計(jì)手機(jī)和平板類的移動(dòng)設(shè)備時(shí)的注意事項(xiàng)及其設(shè)計(jì)原則。本章后面，我們還將簡要討論一下其他設(shè)備平臺(tái)的界面，包括公共信息臺(tái)、公共設(shè)備、車載設(shè)備的界面。

• 大多數(shù)移動(dòng)應(yīng)用是暫態(tài)的。Most mobile apps have transient posture.

• 要限制動(dòng)畫式屏幕轉(zhuǎn)換的次數(shù)和出現(xiàn)的方向。Limit the number and direction of animated screen transitions.

• 用教程引導(dǎo)首次使用的用戶。Use guided tours to orient first-time users.

• 用覆蓋層展示手勢的用法。Use overlays to explain gestures.

第20章 網(wǎng)頁設(shè)計(jì)

今天，需要安裝在電腦本地的軟件越來越少。并且現(xiàn)在，網(wǎng)頁已經(jīng)成為了人與人之間，以及企業(yè)與客戶之間的最重要、最流行的溝通渠道。這意味著網(wǎng)頁體驗(yàn)的質(zhì)量是無比重要的，隨著越來越多、越來越復(fù)雜的軟件行為轉(zhuǎn)移到網(wǎng)頁上， 網(wǎng)頁的交互能力也必須要達(dá)到和軟件相當(dāng)?shù)乃健Ｔ谝酝?#xff0c;視覺設(shè)計(jì)師關(guān)注“視覺和感覺”，信息構(gòu)架師關(guān)注內(nèi)容結(jié)構(gòu)。而現(xiàn)在，這些知識(shí)和經(jīng)驗(yàn)是不夠用的。在GitHub上可以很容易找到優(yōu)秀的UI組件。不過，即使手邊有這些大量的現(xiàn)成組件，我們也仍然無法很好地回答一些既重要又簡單的問題：我們?cè)鯓幼霾拍芮∪缙浞值貪M足用戶的需求和想法，如何才能利用好這些部件，開發(fā)出具備良好和連貫用戶體驗(yàn)的產(chǎn)品。

• 采用永久固定的頁眉來保持情境。Use persistent headers to maintain context.

• 帶有橫向鏈接的“面包渣”讓導(dǎo)航更快捷。Breadcrumbs with lateral links help speed navigation.

• 自動(dòng)填充、自動(dòng)推薦、分面搜索可以讓用戶更快地找到所需的東西。Auto-complete, auto-suggest, and faceted search help users find things faster.

• 讓滾動(dòng)變得更投入。Make scrolling an engaging experience.

• 無限滾動(dòng)與網(wǎng)站頁腳是互斥的習(xí)慣用法。Infinite scrolling and site footers are mutually exclusive idioms.

• 如果你的網(wǎng)站只有一個(gè)版本，一定要把它設(shè)計(jì)成自適應(yīng)。If you have only one version of your site, make it responsive.

第21章 設(shè)計(jì)細(xì)節(jié):控件和對(duì)話框

雖然不同平臺(tái)上的一些視覺設(shè)計(jì)是不同的，但大部分平臺(tái)上的控件和對(duì)話 框是一樣的，它們是用戶與各個(gè)數(shù)字產(chǎn)品的通用交互語言。這些標(biāo)準(zhǔn)的東西，在大部分的GUI開發(fā)庫里都有，存在著被濫用或誤用的可能。本章將概要介紹一些通用的GUI交互控件，還將討論他們適合使用的環(huán)境。

• 鏈接用于導(dǎo)航，按鈕用于動(dòng)作。Use links for navigation and buttons for action.

• 用圖標(biāo)來區(qū)分列表中重要的文本項(xiàng)。
  Distinguish important text items in lists with graphic icons.

• 絕不要水平滾動(dòng)文本。Avoid scrolling text horizontally.

• 有界輸入要使用有界控件。Use bounded controls for bounded input.

• 僅供輸出的文本用非編輯控件（顯示控件）顯示。Use noneditable (display) controls for output-only text.

• 把主要的交互操作放在主窗口內(nèi)。Put primary interactions in the primary window.

• 對(duì)話框適用于放那些主交互流之外的功能。Dialogs are appropriate for functions that are out of the main interaction flow.

• 對(duì)話框非常適合用來整理關(guān)于單一主題或應(yīng)用程序功能的信息。Dialogs are appropriate for organizing controls and information about a single domain object or application function.

• 在功能對(duì)話框的標(biāo)題中使用動(dòng)詞。Use verbs in function dialog title bars.

• 在屬性對(duì)話框的標(biāo)題中使用對(duì)象的名字。Use object names in property dialog title bars.

• 區(qū)別對(duì)待模態(tài)對(duì)話框與非模態(tài)對(duì)話框。Differentiate modeless dialogs from modal dialogs.

• 不要在非模態(tài)對(duì)話框中使用終止命令按鈕。Do not use terminating button commands for modeless dialogs.

• 不要?jiǎng)討B(tài)地改變終止命令按鈕的標(biāo)簽。Don’t dynamically change the labels of terminating buttons.

• 應(yīng)用程序無響應(yīng)狀態(tài)，必須通知用戶。Inform the user when the application is unresponsive.

• 絕不要用臨時(shí)型對(duì)話框作為錯(cuò)誤對(duì)話框或確認(rèn)對(duì)話框。Never use transitory dialogs as error messages, alerts, or confirmations.

• 所有交互的習(xí)慣用法都有其適用范圍。All interaction idioms have practical limits.

• 不要堆疊選項(xiàng)卡。Don’t stack tabs.

• 錯(cuò)誤對(duì)話框愚蠢地停止進(jìn)度，應(yīng)該避免。Most error dialogs stop the proceedings with idiocy.

• 讓錯(cuò)誤不可能發(fā)生。Make errors impossible.

• 當(dāng)軟件告訴用戶他們失敗時(shí)，用戶會(huì)覺得受到了羞辱。Users get humiliated when software tells them they failed.

• 做，不要問。Do; don’t ask.

• 讓所有的動(dòng)作都可以撤銷。Make all actions reversible.

• 給用戶提供非模態(tài)反饋，避免用戶犯錯(cuò)。Provide modeless feedback to help users avoid mistakes.

• 很高興，你看到了結(jié)尾，我在這里埋了個(gè)彩蛋：

回看青蔥歲月，在大學(xué)的時(shí)候，我選擇的是工業(yè)設(shè)計(jì)，因?yàn)橄胍鲆豢盍钊朔Q道的產(chǎn)品，也拿了一些獎(jiǎng)項(xiàng)。但是我不滿足于繪圖和建模，更希望把產(chǎn)品做出來，所以畢業(yè)后做了一段時(shí)間程序員，現(xiàn)在又在做產(chǎn)品經(jīng)理。不管角色怎么變，我心中的夢(mèng)沒有變：“做一款人人稱道的互聯(lián)網(wǎng)產(chǎn)品”。

但我也相信，像喬布斯、雷軍、張小龍那樣產(chǎn)品大神，也不是一朝一夕的煉成的。除了對(duì)夢(mèng)想的熱情和努力以外，更重要的是機(jī)遇。

今年年初，我們團(tuán)隊(duì)開始在打造一款人工智能產(chǎn)品，希望能夠利用AI來改變?nèi)藗兊膶懽鞣绞胶土?xí)慣。過程中也有很多艱辛和挑戰(zhàn)，但我覺得是值得的。這是我對(duì)于產(chǎn)品設(shè)計(jì)師有5條最基本的用人標(biāo)準(zhǔn)：

1. 本科及以上學(xué)歷，計(jì)算機(jī)或者設(shè)計(jì)類專業(yè)為佳： 我并不是相信學(xué)院派，但相信大學(xué)期間養(yǎng)成的思維能力對(duì)人的一生有重要影響，所以科班出身為佳，但不是絕對(duì)；

**2. 熟悉WEB端或移動(dòng)端軟件設(shè)計(jì)、交互設(shè)計(jì)、UI設(shè)計(jì)規(guī)范：**我并不是墨守成規(guī)的頑固派，但我相信好的設(shè)計(jì)不是靈光一現(xiàn)，而是站在前人的肩膀上，先熟悉再超越，不懂行業(yè)規(guī)范的人，只能是外行和初學(xué)者；

3. 懂技術(shù)（設(shè)計(jì)），有開發(fā)（設(shè)計(jì)）經(jīng)驗(yàn)為佳： 我并不是希望設(shè)計(jì)師去敲代碼，而是希望把產(chǎn)品腳踏實(shí)地做出來，光有天馬行空的想象是不夠的，懂技術(shù)可以幫助你更好的理解為什么要這樣做，也能更好地和開發(fā)溝通；但是如果是技術(shù)出身的同學(xué)，光會(huì)敲代碼也是不夠的，必須要有設(shè)計(jì)思維，懂設(shè)計(jì)可以幫助你更好地理解為什么要這樣做；

4. 自驅(qū)力強(qiáng)，有責(zé)任心，善于溝通，有全局觀，有邏輯思維，有目標(biāo)導(dǎo)向性，有效分清楚輕重緩急，與團(tuán)隊(duì)共進(jìn)退： 這一系列是日常的工作思維和方式，因?yàn)槲覀兪莿?chuàng)業(yè)團(tuán)隊(duì)，更需要溝通、責(zé)任心，而且你還要逐漸承擔(dān)產(chǎn)品經(jīng)理的角色，學(xué)習(xí)能力也相當(dāng)?shù)闹匾?#xff1b;

5. 了解人工智能相關(guān)技術(shù)，有寫作和總結(jié)的習(xí)慣，對(duì)文字創(chuàng)作感興趣： 我們做的是人工智能寫作產(chǎn)品，如果自己的產(chǎn)品都不熱愛、不去使用，我相信是不可能做出好產(chǎn)品的，如果你沒有寫過文章可以繞道而行。

如果對(duì)于此職位有興趣，也可以私信我。微信 gold3bear

總結(jié)

以上是生活随笔為你收集整理的万字干货，交互设计精髓105条设计原则(附中英PDF资料)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。