本章將討論有效的目標(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形狀

形狀是人們識(shí)別一個(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理需要大量注意力來分辨旭旭。不過紋理能成為重要的能供性信號(hào)谎脯。

2.7位置

位置是有序和量化的變量，可以用來傳達(dá)層級消息持寄≡此螅空間關(guān)系還可以反過來暗指概念關(guān)系：聚集在一起的物體可以當(dāng)做是相似的。

2.8文字與版面

1稍味、使用高對比度文字--80%對比度

2咸产、選擇恰當(dāng)?shù)淖煮w和大小--小字號(hào)最好使用無襯線體。

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á)功能感熟空、將視覺符號(hào)與對象關(guān)聯(lián)起來藤巢、簡單的渲染圖標(biāo)和視覺符號(hào)、盡可能預(yù)覽視覺效果

3.5響應(yīng)命令--（參考反饋）

0.1s--響應(yīng)及時(shí)

1s--有響應(yīng)

10s--意識(shí)到響應(yīng)變慢息罗，后走神掂咒，但能拉回來

10s以上-用戶注意力不在這里了

3.6把注意力吸引到重要事件上--吸引注意力的工具設(shè)計(jì)人們的基本觀察能力，需要解決兩個(gè)挑戰(zhàn)：1迈喉、吸引注意力的機(jī)制不在我們有意識(shí)的控制之下绍刮。2、很難保持注意力信號(hào)有效的同時(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(shí)別理解產(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á)。