本章將討論有效的目標(biāo)導(dǎo)向視覺界面設(shè)計(jì)策略。本書第3部分將童工關(guān)于具體交互與界面習(xí)慣用法的細(xì)節(jié)。
一、視覺藝術(shù)與視覺設(shè)計(jì)
藝術(shù)家表達(dá)自我。設(shè)計(jì)師重點(diǎn)在清晰溝通。實(shí)際關(guān)注的是發(fā)現(xiàn)最適于傳達(dá)某些具體信息的呈現(xiàn)方式。
二、視覺界面設(shè)計(jì)元素
視覺界面設(shè)計(jì)關(guān)注的是如何處理和安排可視元素，傳達(dá)行為和信息。
雕琢視覺界面時(shí)，要謹(jǐn)記一下要素：
2.1情景，情景，情景
（重要的事情說三遍）
2.2形狀
形狀是人們識別一個(gè)對象是什么的首要方式。但是需要更高層次的注意力，因此如果你想抓取用戶的注意力，形狀不是最佳屬性。顏色大小更容易抓住用戶注意力。
2.3大小
較大物品吸引的注意力更多。人們自動(dòng)按照大小排序，認(rèn)為的大得更重要。大小對比可以迅速抓住注意力。但是如果某個(gè)物體非常大或者非常小，區(qū)別物體很難用上其他元素，比如形狀。
大小可以表示有序和量化（數(shù)值大小）
2.4顏色
1、色值（深淺，加白）--對比才有意義。吸引注意力的好工具
2、色調(diào)--色調(diào)的巨大差異能迅速吸引注意力，但用戶往往對色調(diào)有聯(lián)想。 色調(diào)與大小和色值不同，內(nèi)在不是有序和量化的。使用有限數(shù)量的色調(diào)，注意色盲的問題。
3、飽和度（鮮艷還是暗淡，加黑）--對比才能發(fā)揮作用。飽和度是量化的，較高的飽和度與較高色值密切相關(guān)。
4、HSV結(jié)合--上述三個(gè)值共同描述了界面的任何顏色。
2.5方向
某些形狀或者尺寸太小，方向很難觀察，所以最好當(dāng)做次要溝通向量使用。
2.6紋理
紋理很少用來傳達(dá)不同或者吸引注意力，因?yàn)榧y理需要大量注意力來分辨。不過紋理能成為重要的能供性信號。
2.7位置
位置是有序和量化的變量，可以用來傳達(dá)層級消息。空間關(guān)系還可以反過來暗指概念關(guān)系：聚集在一起的物體可以當(dāng)做是相似的。
2.8文字與版面
1、使用高對比度文字--80%對比度
2、選擇恰當(dāng)?shù)淖煮w和大小--小字號最好使用無襯線體。
3、簡潔的組織文字
2.9信息層級
使用視覺屬性的差異，創(chuàng)造信息層級。暫時(shí)式應(yīng)用的信息層級應(yīng)該非常明顯。
2.10動(dòng)作以及隨時(shí)間的變化
動(dòng)效
三、視覺界面設(shè)計(jì)原則
視覺設(shè)計(jì)應(yīng)做到以下幾點(diǎn)：
3.1傳達(dá)風(fēng)格/傳播品牌
3.2帶領(lǐng)用戶厘清視覺層級--使用視覺語言強(qiáng)調(diào)出最重要的，給有關(guān)系的元素建立聯(lián)系，瞇眼測試
3.3在組織的每一層提供視覺結(jié)構(gòu)和流--對齊到網(wǎng)格！！！、創(chuàng)建邏輯路徑（眼睛瀏覽的路徑）、界面元素平衡
3.4在特定屏幕上告訴用戶能做什么--使用圖標(biāo)、傳達(dá)功能感、將視覺符號與對象關(guān)聯(lián)起來、簡單的渲染圖標(biāo)和視覺符號、盡可能預(yù)覽視覺效果
3.5響應(yīng)命令--（參考反饋）
0.1s--響應(yīng)及時(shí)
1s--有響應(yīng)
10s--意識到響應(yīng)變慢，后走神，但能拉回來
10s以上-用戶注意力不在這里了
3.6把注意力吸引到重要事件上--吸引注意力的工具設(shè)計(jì)人們的基本觀察能力，需要解決兩個(gè)挑戰(zhàn)：1、吸引注意力的機(jī)制不在我們有意識的控制之下。2、很難保持注意力信號有效的同時(shí)還保持體驗(yàn)一致
3.7最小化視覺工作量--多余的視覺元素將人們的注意力從那些傳達(dá)能供性和信息的主要對象上轉(zhuǎn)移到他處。
3.8保持簡單--刪減東西，知道破壞了設(shè)計(jì)，再把最后去掉的加上。
四、視覺信息設(shè)計(jì)的原則
以下為7條原則：
4.1加強(qiáng)視覺對比
應(yīng)該為用戶提供可以進(jìn)行相關(guān)變量和趨勢的對比手段，或者時(shí)間前后的對比手段，對比產(chǎn)生情境，是信息更有價(jià)值，更易于用戶理解。
4.2顯示因果關(guān)系
在信息圖形中，闡明原因與結(jié)果
4.3顯示多個(gè)變量
在不影響清晰度的情況下，提供多個(gè)相關(guān)變量信息的數(shù)據(jù)應(yīng)該同時(shí)顯示。在交互式顯示中，用戶可選擇開啟或關(guān)閉變量，使對比更容易，相關(guān)性更清晰。
4.4在一個(gè)界面中整合文本、圖形及數(shù)據(jù)
4.5確保內(nèi)容的質(zhì)量、相關(guān)性和完整性
確保顯示的信息能夠幫助用戶實(shí)現(xiàn)與其所在情境下的特定目標(biāo)
4.6在相鄰空間上顯示事物，而不是按時(shí)間堆積
如果要表達(dá)時(shí)間上發(fā)生的變化，也要安排到相鄰控件，如果是按照時(shí)間堆積，要依賴用戶的短暫記憶，這并不可靠。使用動(dòng)畫會(huì)更有效呈現(xiàn)時(shí)間軸上的變化。
4.7可量化的數(shù)據(jù)就要量化
五、一致性和標(biāo)準(zhǔn)化
5.1界面標(biāo)準(zhǔn)化的益處
單一界面標(biāo)準(zhǔn)能夠通過提高產(chǎn)出和減少錯(cuò)誤，改善用戶學(xué)習(xí)界面的能力和提高生產(chǎn)率。改善易用性和易學(xué)性。
減少開發(fā)量和工作量。
減低維護(hù)費(fèi)用提高設(shè)計(jì)和代碼的重復(fù)利用。
5.2界面標(biāo)準(zhǔn)化的風(fēng)險(xiǎn)
根據(jù)標(biāo)準(zhǔn)創(chuàng)建的產(chǎn)品不可能比標(biāo)準(zhǔn)更好。因此要確保這個(gè)標(biāo)準(zhǔn)規(guī)范了一個(gè)真實(shí)可用的界面。
界面標(biāo)準(zhǔn)不能解決所有的界面設(shè)計(jì)問題。多數(shù)界面標(biāo)準(zhǔn)強(qiáng)調(diào)外觀和感受，而不是更深的交互行為、邏輯和結(jié)構(gòu)。
5.3標(biāo)準(zhǔn)、指南和經(jīng)驗(yàn)法則
標(biāo)準(zhǔn)會(huì)隨著技術(shù)的演化、對用戶和用戶目標(biāo)的理解的演化 而演化。不要僵化的使用準(zhǔn)則，要考慮情境。
5.4什么時(shí)候打破規(guī)則
遵循標(biāo)準(zhǔn)，除非有極好的其他選擇。通過目標(biāo)用戶試用。
5.5應(yīng)用程序之間的一致性和標(biāo)準(zhǔn)
一致不意味著僵化。如果一個(gè)公司的兩款產(chǎn)品毫無關(guān)聯(lián)，面向的用戶也毫無重疊，就沒有必要必須一致。
5.6設(shè)計(jì)語言
通過形狀、顏色、版式，以及這些元素的組合方式，創(chuàng)造恰當(dāng)?shù)那楦猩剩⑷藗冏R別理解產(chǎn)品的模式。理想情況下，人們會(huì)用這些模式與產(chǎn)品的品牌或創(chuàng)造的服務(wù)產(chǎn)生積極聯(lián)想。
最好的設(shè)計(jì)語言以用戶為中心，在產(chǎn)品設(shè)計(jì)過程中演化。每一個(gè)設(shè)計(jì)決策都與其他決策相配合，變化減少到只要求為用戶創(chuàng)造意義、用處和正確的情感色彩。
設(shè)計(jì)語言往往通過標(biāo)準(zhǔn)和風(fēng)格指南傳達(dá)。
