閱讀前，思考以下三個(gè)問(wèn)題：1，什么是交互設(shè)計(jì)？2，互聯(lián)網(wǎng)APP的交互設(shè)計(jì)如何做？3，WEB軟件交互設(shè)計(jì)如何做？

設(shè)計(jì)前思考以下十二個(gè)問(wèn)題：1，我的用戶(hù)是哪些人？2，我的用戶(hù)在試圖實(shí)現(xiàn)什么？3，我的用戶(hù)如何看待他們要使用的產(chǎn)品？4，我的用戶(hù)會(huì)發(fā)現(xiàn)哪些體驗(yàn)是吸引人并且是有收獲的？5，我的產(chǎn)品應(yīng)該如何工作？6，用戶(hù)如何同產(chǎn)品交互？7，我的產(chǎn)品功能如何能最有效地組織在一起？8，我的產(chǎn)品以何種方式面向首次使用的用戶(hù)？9，我的產(chǎn)品如何從技術(shù)上體現(xiàn)易于理解、讓人喜歡、易于控制？10，我的產(chǎn)品如何處理產(chǎn)品遇到的問(wèn)題？11，我的產(chǎn)品如何幫助偶爾使用的用戶(hù)或者生手用戶(hù)變得更熟練？12，我的產(chǎn)品如何為專(zhuān)家級(jí)用戶(hù)提供足夠的深度和力度？

第 1 章 我們的感知存在偏差

我們對(duì)周?chē)澜绲母兄⒉皇菍?duì)其真實(shí)的描述。我們感知到的很大程度上是我們期望感知到的。影響我們感知的因素有三個(gè)：經(jīng)驗(yàn)【過(guò)去】，環(huán)境【現(xiàn)在】，目標(biāo)【未來(lái)】

這三個(gè)影響感知的因素對(duì)于用戶(hù)界面設(shè)計(jì)有什么啟發(fā)？

1，避免歧義。避免顯得有歧義的信息，并通過(guò)測(cè)試確認(rèn)所有用戶(hù)對(duì)信息的理解是一致的。當(dāng)無(wú)法消除歧義時(shí)，要么依靠標(biāo)準(zhǔn)或者慣例，要么告知用戶(hù)你期望的方式去理解歧義之處。

2，保持一致。在一致的位置擺放信息和控件。不同頁(yè)面上提供的相同的功能的控件和數(shù)據(jù)顯示應(yīng)該擺放在每一頁(yè)上相同的位置，而且它們還應(yīng)該有相同的顏色，字體和印象等。這樣的一致性能讓用戶(hù)很快地找到和識(shí)別它們。

3，理解目標(biāo)。用戶(hù)去理解一個(gè)系統(tǒng)是有目標(biāo)的。設(shè)計(jì)者應(yīng)該了解這些目標(biāo)，要認(rèn)識(shí)到不同用戶(hù)的目標(biāo)可能不同，而且他們的目標(biāo)強(qiáng)烈左右他們能感知到什么。在一次交互的每個(gè)點(diǎn)上，確保提供了用戶(hù)需要的信息，并非常清晰地對(duì)應(yīng)到一個(gè)可能的用戶(hù)目標(biāo)，使用戶(hù)能夠注意到并使用這些信息。

實(shí)現(xiàn)模型--心理模型--表現(xiàn)模型

以微信為例，工程師設(shè)計(jì)出算法，接口，協(xié)議規(guī)則，利用代碼將功能實(shí)現(xiàn)出來(lái)，這個(gè)過(guò)程叫實(shí)現(xiàn)模型。用戶(hù)方看到的微信是一款方便的社交軟件，這個(gè)感知就叫心理模型。微信為用戶(hù)提供了功能：即時(shí)通訊，分享，閱讀等，產(chǎn)品的這一屬性就叫表現(xiàn)模型。

第 2 章 我們的視覺(jué)經(jīng)過(guò)優(yōu)化更容易看到結(jié)構(gòu)

格式塔7個(gè)原理：接近性，相似性，連續(xù)性，封閉性，對(duì)稱(chēng)性，主體/背景，共同命運(yùn)

在現(xiàn)實(shí)世界的視覺(jué)場(chǎng)景中，各種格式塔原理不是孤立的，而是共同起作用的。例如，一個(gè)典型的Mac os 桌面通?？梢允痉吨疤岬降?個(gè)原理中的6個(gè)（除了共同命運(yùn)原理）。在典型的桌面中，當(dāng)用戶(hù)一次選取多個(gè)文件或者目錄并拖拽到新的位置時(shí)，就用到了共同命運(yùn)原理（與相似性原理一起）。

同時(shí)用上所有的格式塔原理時(shí)，設(shè)計(jì)可能導(dǎo)致無(wú)意產(chǎn)生的視覺(jué)關(guān)系。推薦的辦法是，在設(shè)計(jì)一個(gè)顯示之后，使用每個(gè)格式塔原理來(lái)考量各個(gè)設(shè)計(jì)元素是否符合設(shè)計(jì)的初衷。

第 3 章 我們探索和利用視覺(jué)結(jié)構(gòu)

信息呈現(xiàn)方式結(jié)構(gòu)化和精煉，遵從圖形設(shè)計(jì)的原則，人們就能更快和更容易地掃描和理解。

結(jié)構(gòu)提高了用戶(hù)瀏覽長(zhǎng)數(shù)字的能力。即使是少量的信息也能通過(guò)結(jié)構(gòu)化使其更容易被瀏覽。電話號(hào)碼和信用卡號(hào)碼就是兩個(gè)例子，為了容易瀏覽和記憶，習(xí)慣上這兩類(lèi)號(hào)碼會(huì)被分割為多個(gè)部分。一個(gè)長(zhǎng)串的數(shù)字可以用兩種方式分隔：用戶(hù)界面明確地為不同部分提供獨(dú)立字段（日期的輸入界面），或者界面提供一個(gè)字段，但允許用戶(hù)輸入時(shí)將號(hào)碼用空格或者其他符號(hào)分隔開(kāi)（信號(hào)卡號(hào)碼）。這兩種方式不僅提高了可讀性，還能防止輸入錯(cuò)誤。

數(shù)據(jù)專(zhuān)用控件提供了更多的結(jié)構(gòu)。結(jié)構(gòu)從分割字段再往前一步就是數(shù)據(jù)專(zhuān)用控件，設(shè)計(jì)者可以用控件而不是簡(jiǎn)單的文本輸入框來(lái)顯示某個(gè)具體類(lèi)型的數(shù)據(jù)的值和接收輸入。例如：日期可以用菜單與彈出日歷控件合并的形式來(lái)顯示和接收。將分段的文本字段和數(shù)據(jù)專(zhuān)用控件合并起來(lái)也可以提供可視化結(jié)構(gòu)，就像電子郵件地址輸入字段所展示的。

視覺(jué)層次讓人專(zhuān)注于相關(guān)的信息。可視化信息顯示的最重要目標(biāo)之一是提供一個(gè)視覺(jué)層次，即信息的布置安排能夠：1）將信息分段，把大塊整段的信息分割為各個(gè)小段；2）顯著標(biāo)記每個(gè)信息段和子段，以便清晰地確認(rèn)各自的內(nèi)容；3）以一個(gè)層次結(jié)構(gòu)來(lái)展示各段及其子段，使得上層的段能夠比下層更重點(diǎn)地被展示。

第 4 章 閱讀不是自然的

（1）我們的大腦時(shí)為語(yǔ)言而不是為閱讀設(shè)計(jì)的。

說(shuō)話和理解口頭語(yǔ)言是一個(gè)自然的人類(lèi)活動(dòng)，人類(lèi)大腦逐漸進(jìn)化出了口頭語(yǔ)言所需的神經(jīng)結(jié)構(gòu)。但閱讀不是，人的大腦沒(méi)有設(shè)計(jì)成能夠天生學(xué)習(xí)閱讀，閱讀其實(shí)是一種人造的，通過(guò)系統(tǒng)的指導(dǎo)和訓(xùn)練獲得的能力。學(xué)習(xí)閱讀就是訓(xùn)練我們的大腦（包括視覺(jué)系統(tǒng)）的識(shí)別模式，大腦要學(xué)習(xí)識(shí)別的這些模式有一個(gè)從低到高的層次。

想知道沒(méi)學(xué)過(guò)閱讀的人看文字是什么樣的，只要用你沒(méi)學(xué)過(guò)的語(yǔ)言和文字打印出來(lái)一段話看看就夠了。

（2）閱讀是特征驅(qū)動(dòng)還是語(yǔ)境驅(qū)動(dòng)

閱讀涉及識(shí)別特征和模式。模式識(shí)別可以是自下而上特征驅(qū)動(dòng)的過(guò)程，也可以是自上而下上下文驅(qū)動(dòng)的過(guò)程，因此閱讀也是。

特征驅(qū)動(dòng)閱讀。特征驅(qū)動(dòng)閱讀時(shí)，視覺(jué)系統(tǒng)從辨別簡(jiǎn)單特征開(kāi)始，比如紙張或者屏幕上某個(gè)方向的線段或者某個(gè)圓角的弧線，然后組合成更復(fù)雜的特征，比如夾角/多個(gè)弧線/形狀和圖案等。接著大腦再將某些性狀識(shí)別為字符或者符號(hào)，它們代表了字母/數(shù)字或者在表意文字里的詞。在拼音文字里，不同字母組被感知為詞素和單詞。所有文字里，單詞序列都被理解成帶有含義的詞組/句子和段落。

特征驅(qū)動(dòng)的閱讀有時(shí)被稱(chēng)為“自下而上的”或者“無(wú)語(yǔ)境的”。大腦天生具有識(shí)別線/邊和角等基本特征的能力。相反，對(duì)詞素/單詞和短語(yǔ)的識(shí)別能力就需要學(xué)習(xí)。從對(duì)字母/詞素和單詞進(jìn)行非主動(dòng)的/有意識(shí)的分析開(kāi)始，經(jīng)過(guò)足夠的訓(xùn)練，這個(gè)過(guò)程就能夠變成無(wú)意識(shí)的。顯然，詞素/單詞或者短語(yǔ)越常見(jiàn)，對(duì)它的識(shí)別也就越可能無(wú)意識(shí)。

語(yǔ)境驅(qū)動(dòng)閱讀。語(yǔ)境驅(qū)動(dòng)與特征驅(qū)動(dòng)閱讀時(shí)并行的，但運(yùn)作的方式卻相反，語(yǔ)境驅(qū)動(dòng)的閱讀從完整的句子或者段落的主旨，到單詞和字符。視覺(jué)系統(tǒng)從識(shí)別高層的模式或者事先知曉文字的含義開(kāi)始，接著利用對(duì)文字內(nèi)容的事先了解去弄清楚或者猜測(cè)出高層模式的各個(gè)組成部分應(yīng)該是什么。語(yǔ)境驅(qū)動(dòng)閱讀不可能完全成為無(wú)意識(shí)的，因?yàn)榇蟛糠侄陶Z(yǔ)層和語(yǔ)句層的模式和語(yǔ)境不可能出現(xiàn)得頻繁到能夠形成特定的神經(jīng)出發(fā)的模式。但還是有些例外，比如習(xí)慣用語(yǔ)。

幾十年來(lái)，閱讀被認(rèn)為使用了特征驅(qū)動(dòng)（自下而上）和語(yǔ)境驅(qū)動(dòng)（自上而下）兩種處理方式。除了能夠通過(guò)分析字和詞來(lái)搞清楚一句話的含義，人們還能夠從知曉一句話的含義去判斷其中的詞，或者知道一個(gè)單詞而判斷其中的字母。熟練的閱讀是自下而上還是自上而下呢？

自下而上的語(yǔ)境閱讀對(duì)于較差的閱讀者更重要，因?yàn)樗麄儫o(wú)法進(jìn)行無(wú)意識(shí)的無(wú)語(yǔ)境識(shí)別（即特征驅(qū)動(dòng)）。最有效的閱讀方式是無(wú)語(yǔ)境的/自下而上特征驅(qū)動(dòng)的方式，這需要熟練掌握到無(wú)意識(shí)的程度。盡管與特征驅(qū)動(dòng)閱讀是兩個(gè)并行的閱讀方式，但語(yǔ)境驅(qū)動(dòng)閱讀在如今主要被視為一種候補(bǔ)的方法，只有在特征驅(qū)動(dòng)閱讀存在困難或者不能達(dá)到足夠無(wú)意識(shí)的時(shí)候才起作用。

熟練的讀者也許會(huì)在基于特征閱讀被糟糕的信息展示方式干擾時(shí)轉(zhuǎn)向基于語(yǔ)境的閱讀。還有，在使用這兩種閱讀方式去解讀看到的文字時(shí)，語(yǔ)境中的暗示有時(shí)比特征更有優(yōu)勢(shì)。作為一個(gè)基于語(yǔ)境閱讀的例子，到英國(guó)旅游的美國(guó)人有時(shí)會(huì)將“to let”標(biāo)志看成“toilet”，因?yàn)樵诿绹?guó)他們更容易看到“toilet”，但幾乎從來(lái)沒(méi)有見(jiàn)過(guò)“to let”這個(gè)短語(yǔ)，他們平時(shí)使用對(duì)應(yīng)的短語(yǔ)是“for rent”。

對(duì)于較不熟練的閱讀者，基于特征閱讀不是無(wú)意識(shí)的，而是有意識(shí)的/費(fèi)勁的。因此，他們大部分的閱讀使用基于語(yǔ)境的方式。這種不得已的基于語(yǔ)境的閱讀和非無(wú)意識(shí)的基于特征的閱讀消耗了短期感知能力，導(dǎo)致對(duì)內(nèi)容缺少理解。他們不得不把注意力放在解讀一串串單詞上，導(dǎo)致沒(méi)有更多精力構(gòu)建語(yǔ)句和段落的含義。這就是為什么差的閱讀者可以大聲讀完一段文字，卻不清楚究竟讀了什么。

為什無(wú)語(yǔ)境（自下而上）的閱讀在某些成年人中無(wú)法無(wú)意識(shí)呢？有些人在兒童期沒(méi)能獲得足夠的閱讀經(jīng)驗(yàn)，讓特征驅(qū)動(dòng)的識(shí)別過(guò)程變成無(wú)意識(shí)的，他們長(zhǎng)大后就覺(jué)得閱讀在精神上是費(fèi)勁和壓力重重的，因此也就避免閱讀，這持續(xù)加劇了他們?cè)陂喿x能力上的不足。

（3）熟練閱讀和不熟練閱讀使用大腦的不同部位

（4）糟糕的信息設(shè)計(jì)會(huì)影響閱讀

糟糕的書(shū)寫(xiě)或者顯示會(huì)將熟練閱讀者無(wú)意識(shí)的無(wú)語(yǔ)境的閱讀降低為有意識(shí)的基于語(yǔ)境的閱讀，增加記憶負(fù)擔(dān)，從而降低閱讀速度和理解能力。對(duì)于非熟練閱讀者，糟糕的文字顯示可能會(huì)完全阻礙閱讀。

不常見(jiàn)和不熟悉的詞匯。軟件中阻礙閱讀的常見(jiàn)方式之一是使用用戶(hù)不熟悉的詞匯，即使是熟練的閱讀者在遇到不常見(jiàn)的詞匯時(shí)，大腦也需要使用非無(wú)意識(shí)的處理方式。

難以辨認(rèn)的書(shū)寫(xiě)和字型。自下而上/無(wú)語(yǔ)境/無(wú)意識(shí)的閱讀是對(duì)字母和單詞基于視覺(jué)特征的識(shí)別。因此，一種具有難以辨認(rèn)的特征和形狀的字型就很難閱讀。

微小的字體。對(duì)目標(biāo)用戶(hù)的視覺(jué)系統(tǒng)來(lái)說(shuō)小到難以識(shí)別的字體，閱讀起來(lái)非常費(fèi)勁，文字還不如不要。

嘈雜背景下的文字。文字中和周?chē)囊曈X(jué)噪聲能夠干擾對(duì)特征/字符和單詞的識(shí)別，使我們退出基于特征的無(wú)意識(shí)閱讀模式，而進(jìn)入有意識(shí)的基于語(yǔ)境的閱讀模式。在軟件的用戶(hù)界面和網(wǎng)站中，視覺(jué)噪聲經(jīng)常來(lái)自設(shè)計(jì)師將文字放在有圖案的背景上，或者正文和背景的反差太小。

信息被重復(fù)的內(nèi)容淹沒(méi)。視覺(jué)噪聲也能來(lái)自文字本身。如果連續(xù)多行文字里有許多重復(fù)內(nèi)容，讀者接收到的相關(guān)反饋就太少，不知道自己正在讀哪一行。另外，這也讓人很難從中提取出重要的信息。

居中對(duì)齊的文字。在大部分熟練閱讀者的閱讀過(guò)程中，高度無(wú)意識(shí)的一方面就是眼動(dòng)。當(dāng)自動(dòng)閱讀時(shí)，我們的視線被訓(xùn)練成回到同樣的水平位置，同時(shí)向下移一行，如果文字時(shí)劇中或者右對(duì)齊，每行的水平起始位置就不一樣了。自動(dòng)眼動(dòng)因此會(huì)將我們的視線帶到錯(cuò)誤的位置，我們就必須有意識(shí)地去調(diào)整視線到每行的實(shí)際起始位置。這使得我們不得不退出無(wú)意識(shí)狀態(tài)，閱讀速度一下就慢下來(lái)。詩(shī)歌和婚禮請(qǐng)柬上的文字劇中對(duì)齊或許是可以的，但對(duì)于任何其他類(lèi)型的文字，居中就是缺點(diǎn)了。

對(duì)設(shè)計(jì)的啟示：支持，而不是干擾閱讀。

熟練的閱讀大部分基于對(duì)特征/字母和單詞的無(wú)意識(shí)識(shí)別，識(shí)別越容易，閱讀也就是越快越容易。相反，非熟練的閱讀需要語(yǔ)境提示的幫助。交互系統(tǒng)的設(shè)計(jì)者可以遵循一下準(zhǔn)則來(lái)為閱讀提供支持：

1）保證用戶(hù)界面里的文字允許基于特征的無(wú)意識(shí)處理有效地進(jìn)行，可以通過(guò)避免之前描述的破壞性缺陷做到。這些缺陷包括難以辨認(rèn)的活太小的字體，帶圖案的背景和居中對(duì)齊。

2）使用有效的，高度一致的詞匯。

3）將文字格式設(shè)計(jì)出視覺(jué)層次，以便使瀏覽更輕松，如使用標(biāo)題，列表，表格和視覺(jué)上加強(qiáng)了的單詞。

（5）軟件里要求的閱讀很多都是不必要的

除了會(huì)影響閱讀的設(shè)計(jì)錯(cuò)誤外，很多軟件的用戶(hù)界面還顯示了太多的文字，用戶(hù)要讀的遠(yuǎn)遠(yuǎn)超過(guò)實(shí)際所需要的。

對(duì)設(shè)計(jì)的啟示：盡量少讓人閱讀

（6）對(duì)真實(shí)用戶(hù)的測(cè)試

設(shè)計(jì)者應(yīng)該將設(shè)計(jì)在目標(biāo)用戶(hù)群中測(cè)試，從而確信用戶(hù)能夠快速輕松地閱讀所有要重要信息，利用原型和部分實(shí)現(xiàn)的功能，一些測(cè)試可以在早期就做，但在發(fā)布之前仍需測(cè)試。

第 5 章 色覺(jué)是有限的

我們的視覺(jué)系統(tǒng)對(duì)顏色對(duì)比度更敏感，而不是對(duì)絕對(duì)亮度敏感。

區(qū)別顏色的能力取決于顏色是如何呈現(xiàn)的。（1）深淺度。兩個(gè)顏色越淺（不飽和），就越男將它們分開(kāi)。（2）色塊的大小。對(duì)象越小或者越細(xì)，就越難辨別它們的顏色。（3）分隔的距離。兩個(gè)色塊之間離的越遠(yuǎn)就越男區(qū)分它們的顏色，尤其是當(dāng)它們之間的距離大到眼球需要運(yùn)動(dòng)時(shí)。

色盲。在顏色呈現(xiàn)上影響交互系統(tǒng)設(shè)計(jì)準(zhǔn)則的第四個(gè)因素是，使用的顏色是否能夠被常見(jiàn)類(lèi)型的色盲用戶(hù)區(qū)分開(kāi)。最常見(jiàn)的色盲是紅綠色盲。

影響色彩區(qū)分能力的外部因素。（1）彩色顯示屏的差異。（2）灰度顯示器。（3）顯示器角度。（4）環(huán)境光線。這四種外部因素通常都不是軟件設(shè)計(jì)者能控制的。因此，設(shè)計(jì)者們應(yīng)記住他們并不對(duì)用戶(hù)的觀看體驗(yàn)具有完全的控制。

使用色彩的準(zhǔn)則。在依賴(lài)顏色來(lái)傳遞信息的交互軟件系統(tǒng)中，遵循以下5條準(zhǔn)則，以保證用戶(hù)能夠獲取信息。

（1）用飽和度、光度以及色相來(lái)區(qū)分顏色。比main采用輕微的差別，確保色彩之間有較高的反差。一個(gè)測(cè)試顏色差異的辦法是在灰度模式下觀察。如果你不能在灰度模式下區(qū)分出不同的顏色，那么這些顏色之間的差別就不夠。

（2）使用獨(dú)特的顏色。例如黑白紅綠黃藍(lán)。

（3）避免使用色盲的人無(wú)法區(qū)分的顏色對(duì)。這樣的顏色對(duì)有深紅和黑、深紅和深綠、藍(lán)色和紫色以及淺綠和白色。不要在任何深色背景上使用深紅色、藍(lán)色或者紫色。相反，在淺黃色和淺綠色背景上應(yīng)該使用深紅、藍(lán)色和紫色。用在線色覺(jué)障礙模擬器檢查網(wǎng)頁(yè)和圖像，看它們?cè)谟胁煌X(jué)障礙的人看起來(lái)是什么樣子的。

（5）將強(qiáng)烈的對(duì)抗色分開(kāi)。將對(duì)抗色放在一起會(huì)產(chǎn)生令人難受的閃爍的感覺(jué)，因此也必須避免。

第 6 章 我們的邊界視力很糟糕

處于人們邊界中的暗色靜止物體經(jīng)常不被注意到；邊界視野中物體的運(yùn)動(dòng)通常會(huì)被察覺(jué)。

中央凹的分辨率與邊界視野的分辨率比較

邊界視覺(jué)有什么用

電腦用戶(hù)界面中的例子

讓信息可見(jiàn)的常用方法

（1）放在用戶(hù)所看的位置上。當(dāng)與圖形用戶(hù)界面交互時(shí)，人們的注意力在可預(yù)期的地方。在西方社會(huì)，人們傾向從左上角向右下角掃描表單和控件。當(dāng)移動(dòng)屏幕上的指針時(shí)，人們通常看著它所在的位置或者將要移動(dòng)到的地方。當(dāng)人們點(diǎn)擊一個(gè)按鈕或者鏈接時(shí)，通?？梢约僭O(shè)他們正看著它，至少在點(diǎn)擊之后的一小段時(shí)間里再看。設(shè)計(jì)者可以利用這個(gè)可可預(yù)計(jì)性將出錯(cuò)消息擺放在期待用戶(hù)可能看到的地方。

（2）標(biāo)記出錯(cuò)誤。用某種方式顯著地標(biāo)記出錯(cuò)誤并清晰地指明出錯(cuò)了。這通常只要將出錯(cuò)消息擺放在它所指的地方即可，除非這會(huì)將出錯(cuò)消息放到離用戶(hù)可能看到的位置非常遠(yuǎn)的地方。

（3）使用錯(cuò)誤符號(hào)來(lái)明顯地標(biāo)記出錯(cuò)誤或者錯(cuò)誤消息。

（4）保留紅色以呈現(xiàn)錯(cuò)誤（信息）。習(xí)慣上，在交互的計(jì)算機(jī)系統(tǒng)里，紅色暗示警告、危險(xiǎn)、問(wèn)題、錯(cuò)誤等。使用紅色來(lái)標(biāo)記其他信息會(huì)到hi誤解。但假設(shè)你在為斯坦福大學(xué)設(shè)計(jì)網(wǎng)站，它的學(xué)校顏色是紅色，或者你為中國(guó)市場(chǎng)設(shè)計(jì)，在哪里紅色被認(rèn)為是吉祥、積極的顏色。你該怎么辦？那就使用另一種顏色代表錯(cuò)誤，用錯(cuò)誤符號(hào)標(biāo)記或者使用其他更強(qiáng)大的方法。

讓用戶(hù)注意到信息的重武器：請(qǐng)小心使用。例如，彈出對(duì)話框中的信息，聲音，閃爍或者短暫的晃動(dòng)。