本章聚焦于五個層次中的表現(xiàn)層瞒爬，內(nèi)容上強調(diào)了視覺設(shè)計的目的弓柱，并介紹了界面和品牌維度的感知設(shè)計。本篇筆記共4611字疮鲫，預(yù)計需要8分鐘完成閱讀吆你。
互聯(lián)網(wǎng)產(chǎn)品的“感知設(shè)計”主要集中于視覺設(shè)計弦叶；值得注意的是俊犯，視覺設(shè)計不局限于“頁面UI設(shè)計”，而是根據(jù)產(chǎn)品的定位和具體設(shè)計中的呈現(xiàn)需求設(shè)計表現(xiàn)方案伤哺。
在頁面內(nèi)燕侠，我們主要通過頁面的對比和一致性來規(guī)劃視線的落點和移動軌跡，從而實現(xiàn)對用戶注意力的規(guī)劃立莉，進(jìn)而落實底層設(shè)計绢彤。頁面內(nèi)的視覺設(shè)計結(jié)果將以design comp 的形式出現(xiàn)。
在比頁面更高的維度上蜓耻，我們則希望通過產(chǎn)品與公司維度的一致性維持來優(yōu)化用戶的品牌觀感茫舶，并通過配色方案和排版進(jìn)一步傳達(dá)和強化品牌。產(chǎn)品甚至企業(yè)維度的感知設(shè)計方案應(yīng)當(dāng)以風(fēng)格指南的形式在團(tuán)隊中同步刹淌。
框架層確定了界面的要素和關(guān)系饶氏，在確定的頁面結(jié)構(gòu)的基礎(chǔ)上，表現(xiàn)層開始處理設(shè)計的感知呈現(xiàn)問題有勾。表現(xiàn)層是五層模型中最具象的一層疹启，這一層也是用戶首先注意到的地方。
感知設(shè)計與視覺設(shè)計
無論是與產(chǎn)品或服務(wù)的交互蔼卡，還是人與人喊崖、人與世界的交互，這些都是通過我們的感覺器官來進(jìn)行的。而表現(xiàn)層的設(shè)計就是對“產(chǎn)品在人類感官層面的感受”的設(shè)計荤懂。
感官感受包括視覺茁裙、聽覺、觸覺势誊、嗅覺和味覺五大類：
- 嗅覺和味覺：互聯(lián)網(wǎng)or軟件用戶體驗設(shè)計師通常不需要關(guān)注這方面呜达；
- 觸覺：工業(yè)設(shè)計領(lǐng)域會很關(guān)注用戶和產(chǎn)品間的物理接觸。在振動設(shè)備的支持下粟耻，基于屏幕交互的產(chǎn)品(手機查近、手持游戲設(shè)備)也開始由觸覺體驗了〖访Γ【個人印象很深的包括PS4手柄的震動霜威，還有小米手機的鍵盤和卸載程序震動。由于觸覺當(dāng)前階段應(yīng)用的“稀缺性”册烈，合理應(yīng)用觸覺設(shè)計會帶來更大的情感互動戈泼；但是同樣需要避免濫用】；
- 聽覺：聲音既可以傳遞特定的信息（如警報赏僧、提示音）大猛，也可以讓產(chǎn)品變得更個性；
- 視覺：是互聯(lián)網(wǎng)產(chǎn)品向用戶傳遞信息的主要途徑淀零，也是用戶體驗設(shè)計的核心模塊挽绩。
視覺設(shè)計(的目標(biāo))是什么
視覺設(shè)計決定了用戶的“第一眼印象”，同時驾中，表現(xiàn)層也是我們向用戶傳遞信息的具體層面唉堪。
因此，視覺設(shè)計不僅僅是“美術(shù)”肩民，或者說視覺上的愉悅感受唠亚。相比于“是否具有美感”，視覺設(shè)計的評估核心更應(yīng)該是“方案是否運作良好”持痰、是否服務(wù)于產(chǎn)品灶搜，包括以下兩方面：
- 視覺設(shè)計是否完成了對結(jié)構(gòu)的傳遞：視覺設(shè)計應(yīng)當(dāng)強化結(jié)構(gòu)，保證用戶對選項的體驗更清楚明了工窍；
- 樣式與格式的選擇是否與品牌形象等產(chǎn)品戰(zhàn)略定位相符合割卖。
頁面內(nèi)部的視覺設(shè)計
用戶使用產(chǎn)品時，我們主要通過視覺要素來實現(xiàn)內(nèi)容和功能的呈現(xiàn)移剪。正如 Chapter5的信息架構(gòu)中所提到究珊，我們希望給用戶呈現(xiàn)合理且有意義的信息，讓用戶以較小的心智成本來理解和使用信息纵苛，在頁面的視覺設(shè)計中同樣如此剿涮。
視覺設(shè)計中言津，我們希望通過對界面的視覺焦點以及視覺移動軌跡進(jìn)行規(guī)劃設(shè)計，來減少用戶的迷萌∈裕或負(fù)擔(dān)悬槽，幫助用戶獲取信息。而通過頁面的對比和一致性瞬浓，我們可以規(guī)劃視線的落點和移動軌跡初婆。
視覺焦點與視線的設(shè)計
界面的視覺焦點以及視覺移動軌跡是判斷視覺設(shè)計方案合理性的重要因素。
視覺落點/視覺焦點猿棉，就是看到頁面時磅叛，用戶的視線首先會落在什么地方。通過尋找視覺落點萨赁，我們可以發(fā)現(xiàn)弊琴，頁面設(shè)計中的哪個設(shè)計要素會第一時間吸引用戶的注意（比如obsidian的blue topaz對正在編輯的段落有高亮，在編輯長篇文檔時感覺非常好用）杖爽；
一般地敲董，我們希望視覺落點和戰(zhàn)略目標(biāo)相匹配，即用戶第一眼注意到的東西要么滿足產(chǎn)品目標(biāo)（例如宣傳）慰安，要么滿足用戶目標(biāo)（解決用戶問題）腋寨。
視覺移動軌跡，就是眼睛掃視頁面時的無意識移動路徑化焕。
通過尋找視覺移動軌跡萄窜，我們可以判斷用戶的瀏覽是否流暢、我們是否成功引導(dǎo)用戶完成目標(biāo)锣杂。
- 視覺移動軌跡應(yīng)當(dāng)是一條流暢的路徑脂倦；如果元素的視覺設(shè)計缺少輕重番宁、用戶的眼睛在各種要素間跳來跳去元莫，用戶就會感到設(shè)計“擁擠”或“忙碌”（典型如很多早期的網(wǎng)站，要素密集蝶押、超鏈接很多踱蠢、樣式無顯著差異）
- 適當(dāng)在用戶的目標(biāo)完成路徑上做出引導(dǎo)；重點是棋电，引導(dǎo)不應(yīng)分散用戶對“能完成目標(biāo)的信息或功能”的注意力茎截，且不要用太多細(xì)節(jié)嚇倒用戶。
視線的覺察
覺察視線赶盔、評估視覺設(shè)計時企锌，有條件的話可以使用精密的眼球追蹤儀器，不過于未，簡單的肉眼測試也可以實現(xiàn)對頁面視覺設(shè)計的評估撕攒。
通過用戶或自己來評估視覺設(shè)計的方法包括
- 簡單詢問用戶或自己陡鹃，視覺的落點在哪、看東西時是怎么移動的抖坪；
- 可以通過瞇眼萍鲸、斜看、從遠(yuǎn)處走近等方法來發(fā)現(xiàn)頁面中最吸引眼球的元素擦俐。需要注意的是脊阴，我們需要了解的是眼睛無意識移動的落點和軌跡，應(yīng)避免想太多干擾結(jié)果蚯瞧；
- 一般情況下嘿期，人們的本能視覺移動軌跡應(yīng)當(dāng)遵循一致的模式；如果部分用戶的測試結(jié)果和其他用戶不同埋合，有可能ta反饋的是有意識控制下的結(jié)果秽五。
通過對人共有的視覺刺激反應(yīng)的研究，我們可以使用一定的視覺手段來實現(xiàn)注意力的吸引或分散饥悴。
視覺設(shè)計手段：對比與一致性
在頁面內(nèi)的視覺設(shè)計中坦喘，我們常使用對比作為吸引用戶注意的手段；同時通過一致性西设，我們可以減少用戶的迷惑瓣铣，提升視覺傳達(dá)的效率。
對比：當(dāng)一個元素在設(shè)計中顯得與眾不同時贷揽，用戶會本能地對之投射注意力棠笑，這就是對比的效果。
- 什么是對比：對比是基于“無對比”出現(xiàn)的禽绪。
- 沒有任何突出元素的頁面也稱為視覺上的中性布局頁面蓖救。在“灰色”的中性布局頁面中，用戶的視線可能會四處游離印屁；
- 當(dāng)頁面內(nèi)存在差異化足夠顯著的內(nèi)容時循捺，這個內(nèi)容會一下子抓取到用戶的目光。
- 為什么要對比：通過與眾不同的元素與普通元素的對比雄人，我們可以
- 吸引用戶注意力从橘，幫助用戶聚焦到界面的關(guān)鍵部分；例如對關(guān)鍵內(nèi)容(戰(zhàn)略性內(nèi)容)础钠、錯誤提示等進(jìn)行強調(diào)恰力；
- 幫助用戶理解頁面導(dǎo)航元素間的關(guān)系；
- 傳達(dá)信息設(shè)計中的概念群組(“打組”旗吁，例如標(biāo)題采用更醒目的格式踩萎，可以實現(xiàn)對文本的分組)。
- 如何對比：對比的核心在于“突出需要突出的內(nèi)容”很钓。
- 突出方法包括 顏色香府、醒目的圖形等等翻具；
- 對比的核心不是差異，而是“突出”——不僅僅要有足夠讓用戶分辨出來的差異回还，還要能讓用戶分辨出“哪個是我要抓住的重點”裆泳；
- 只突出需要強調(diào)的內(nèi)容：不要濫用“突出”，強調(diào)過多內(nèi)容只會讓用戶困惑柠硕。
對于“書”這個產(chǎn)品工禾，對比的效果同樣顯著。
大片段的正文通常采用中性布局蝗柔，用戶線性地閱讀并獲取信息恩静；標(biāo)題采用特殊格式牙丽，保證用戶在線性的瀏覽過程中可以下意識了解“這是一塊新內(nèi)容”寂恬，另外骤视，有一些書會通過加粗等特殊格式的文本來強調(diào)重要信息。
對比不一定需要在文本上下工夫——例如電商往往不會對文本做強調(diào)處理胁编，讓用戶自由瀏覽商品圖片厢钧，再根據(jù)圖片去抓取對應(yīng)信息（選擇商品時如此，閱讀商詳頁也是）嬉橙。
一致性：在通過對比傳達(dá)和強調(diào)信息的同時早直，我們可以通過保持頁面內(nèi)的一致性來避免用戶的焦慮或迷惑。
- 什么是一致性：(個人理解)一致性的根本在于“避免混亂”市框。頁面內(nèi)部的一致性包括元素和布局等霞扬。
- 為什么需要一致性：
- 通過一致的秩序來輔助傳達(dá)信息，減少用戶的困惑枫振、迷茫和焦慮（比如喻圃，可以幫助用戶識別“blocks”，以及塊與塊之間的關(guān)系）粪滤；
- 通過規(guī)范視覺元素的大小斧拍、風(fēng)格等，提高設(shè)計中的復(fù)用性额衙，提升設(shè)計師工作效率饮焦。
- 如何保持一致性：
- 將視覺元素的大小保持一致尺寸怕吴，例如相同元素概念的按鈕窍侧；
- 平面設(shè)計中的
基于柵格線的布局也可以應(yīng)用于網(wǎng)頁設(shè)計（參考上方附圖）。- 通過柵格转绷，我們可以在支持頁面?zhèn)€性化布局的同時伟件，保證頁面的視覺秩序是一致的；
- 需要注意议经，在將柵格應(yīng)用到屏幕交互式產(chǎn)品時需要加以變通斧账，切忌生搬硬套谴返。設(shè)計標(biāo)準(zhǔn)和其他工具一樣，都是為了產(chǎn)品設(shè)計服務(wù)的咧织。
品牌層面的視覺設(shè)計
產(chǎn)品與公司維度的一致性維持
上一節(jié)我們介紹了如何通過“頁面內(nèi)部的一致性”來幫助用戶獲取信息嗓袱。而產(chǎn)品甚至企業(yè)層級的一致性則更多地作用于品牌維度，希望傳遞一個“統(tǒng)一的品牌識別形象”习绢、提升訪問者對企業(yè)的印象渠抹。
- (產(chǎn)品)內(nèi)部一致性：在同一個產(chǎn)品的每一個層級，產(chǎn)品的的設(shè)計都應(yīng)該體現(xiàn)品牌識別的一致性闪萄。小到icon風(fēng)格梧却，大到結(jié)構(gòu)，同一個產(chǎn)品的設(shè)計風(fēng)格往往會保持一致败去；
- (產(chǎn)品)外部一致性：在同一家企業(yè)的其他產(chǎn)品中放航，也需要反映出相同的設(shè)計方法(例如mac和ios系統(tǒng)的風(fēng)格打通)。
統(tǒng)一的視覺呈現(xiàn)有助于提升訪問者對企業(yè)的印象圆裕，傳遞企業(yè)形象的同時广鳍，也給用戶強化“這家企業(yè)對自身的定位很明確”的認(rèn)知。
在實際工作中吓妆，產(chǎn)品的設(shè)計往往是逐步進(jìn)行的搜锰，過程中會出現(xiàn)分批甚至分團(tuán)隊。
想要保持設(shè)計方法的一致耿战，我們需要提前確定統(tǒng)一方案：
- 確定方案的基礎(chǔ)是對網(wǎng)站框架深刻理解蛋叼；確定各環(huán)境(界面、導(dǎo)航剂陡、信息設(shè)計)中反復(fù)出現(xiàn)的設(shè)計元素狈涮，并抽象出共性的設(shè)計方案。
- 具體產(chǎn)品設(shè)計中鸭栖，我們會將方案中確定的元素應(yīng)用到具體的環(huán)境：
- 避免重復(fù)設(shè)計相同元素歌馍，減少成本的同時也保證了一致性；
- 應(yīng)用時需要避免生搬硬套晕鹊，元素應(yīng)當(dāng)在具體的整體場景中與其他元素和諧共存松却。
- 即使是同一個功能，在不同環(huán)境下的呈現(xiàn)可能是不同的(結(jié)賬頁的結(jié)算可以加大尺寸溅话、設(shè)計為紅色晓锻，但產(chǎn)品定制頁面的結(jié)算按鈕可能需要為擁擠的其他元素進(jìn)行妥協(xié))
這個確定的“方案”應(yīng)當(dāng)從屬于Chapter7產(chǎn)出物中的“風(fēng)格指南”，類似公司的組件庫等基礎(chǔ)建設(shè)飞几。
品牌形象的強化：配色方案和文字樣式
譯本將 typography 翻譯成了“排版”砚哆，看了下原文，我感覺這里主要還是指字體屑墨，因此改為了“文字樣式”躁锁。
色彩纷铣，很可能是向外界產(chǎn)地品牌識別的最有效方法之一。典型如可口可樂战转、UPS搜立、柯達(dá)，它們的紅槐秧、棕儒拂、黃在公眾腦海中創(chuàng)造了一個強烈的感覺。
品牌的“色彩”不僅僅是核心色色鸳，而是一個配色方案社痛。
- 配色方案在強化企業(yè)品牌的同時，也能減少設(shè)計選擇命雀、提高設(shè)計效率蒜哀；
- 標(biāo)準(zhǔn)配色方案彼此和諧合作，保證了網(wǎng)站配色的對比性和一致性吏砂。
配色的選擇需要服務(wù)于產(chǎn)品：
- 通過設(shè)置前景色和背景色撵儿，我們可以讓用戶潛意識中了解我們的意圖（通常我們會將更亮或更醒目的色彩設(shè)計為前景色、應(yīng)用于需要獲取注意的元素狐血，將更暗淡的色彩設(shè)計為不需要跳出頁面的背景色）淀歇；
- 選擇顏色時，我們既要保證相近元素應(yīng)用的一致性匈织，也要在選色時選擇色度差異到足夠讓用戶明確區(qū)分的不同顏色(色卡里的其他顏色）浪默。
此外，不同配色方案傳達(dá)的品牌感受也會有差異缀匕。例如下圖中纳决，右側(cè)偏色后呈現(xiàn)更深沉的顏色，沒有左側(cè)原方案的活潑感乡小，感覺更嚴(yán)謹(jǐn)阔加、守舊、刻板满钟。
配色對產(chǎn)品體驗的影響
除了色彩胜榔，文本的樣式風(fēng)格也是企業(yè)品牌識別的重要要素。例如蘋果電腦湃番、大眾汽車夭织、倫敦地鐵等，這些品牌甚至通過定制字型來傳達(dá)強烈的品牌印象牵辣。
不過即使沒有到定制的程度摔癣，我們依然可以善用字體設(shè)計來傳達(dá)形象。選用字體時需要注意：
- 選用大面積使用的文本(正文)時一定要兼顧可讀性纬向，例如Helvetica或者Times這些大眾字體择浊；
- 在大文本元素、導(dǎo)航中的標(biāo)簽元素等特殊文本元素中逾条，我們完全可以應(yīng)用更有個性的字體琢岩；
- 需要注意，字體和色彩等視覺設(shè)計的原則是一致的：風(fēng)格服務(wù)于信息傳遞师脂。
- 字體是為了滿足溝通需求担孔，而不是為了制造混亂；
- 只有在需要傳達(dá)不同信息時吃警，才需要使用不同的風(fēng)格糕篇。不同風(fēng)格應(yīng)當(dāng)有足夠的差異，但仍需要保持統(tǒng)一性酌心。
設(shè)計合成品和風(fēng)格指南
如果說線框圖是框架設(shè)計的產(chǎn)物拌消，那么類似地，視覺設(shè)計的產(chǎn)出物就是 視覺模型(visual mock-up) 或者 設(shè)計合成品(design comp)安券。
design comp 展示了選定的組件最終組成的可視化產(chǎn)品墩崩。
- design comp的組件是上一層已選定的組件（即基于框架層進(jìn)行設(shè)計）；
- design comp 中的組件一定與線框圖中的組件一一對應(yīng)侯勉，但不一定與線框圖布局一致（布局鹦筹、視覺關(guān)注是表現(xiàn)層的設(shè)計范圍）；
- design comp需要將各個獨立組件結(jié)合為一個有機整體（視覺設(shè)計服務(wù)于產(chǎn)品址貌，產(chǎn)出物需要和諧統(tǒng)一）铐拐。
除了服務(wù)于單次設(shè)計的設(shè)計圖，出于品牌層的一致性考慮练对，我們也需要為我們的設(shè)計系統(tǒng)維護(hù)一份記載決策的權(quán)威性文檔——風(fēng)格指南(style guide)余舶。
- why：風(fēng)格指南作為文檔，可以很好地留存信息：
- 風(fēng)格指南可以保留最新的標(biāo)準(zhǔn)與一貫的風(fēng)格取向锹淌，確保企業(yè)級別的一致性匿值；
- 風(fēng)格指南可以幫助企業(yè)留存知識，防止由于人員流失或遺忘造成的知識丟失赂摆。
- 隨著時間的推移挟憔，決策原因會從記憶中逐漸消失；文檔可以很好地記錄哪些是“特殊環(huán)境下解決某個具體問題的臨時決策”烟号，那些事“為了形成將來的設(shè)計工作的基礎(chǔ)而有意識做出的決策”绊谭。
- what：風(fēng)格指南中需要包括哪些內(nèi)容：
- 風(fēng)格指南的第一部分應(yīng)當(dāng)是需要在產(chǎn)品全局應(yīng)用的要素標(biāo)準(zhǔn)，包括設(shè)計柵格汪拥、配色方案达传、字體標(biāo)準(zhǔn)、標(biāo)志應(yīng)用指南等等；
- 風(fēng)格指南中應(yīng)當(dāng)包含模塊或功能級別的元素標(biāo)準(zhǔn)記錄宪赶，以便于后來的成員進(jìn)行決策宗弯；
- 風(fēng)格指南是對視覺設(shè)計所有元素的匯總，大到產(chǎn)品的整體風(fēng)格搂妻，小到單個元素的設(shè)計標(biāo)準(zhǔn)蒙保；
- 總之，風(fēng)格指南需要覆蓋產(chǎn)品所有層級的設(shè)計欲主，為決策提供足夠的細(xì)節(jié)邓厕。
- how：風(fēng)格指南建設(shè)的注意點：
- 風(fēng)格指南應(yīng)由專門的成員甚至部門來負(fù)責(zé)，且執(zhí)行風(fēng)格指南的團(tuán)隊?wèi)?yīng)具備較高權(quán)限扁瓢。在有多個負(fù)責(zé)團(tuán)隊的大企業(yè)中尤甚详恼。
