看了about face4一段時(shí)間了，感覺看書不做筆記不輸出就像白看了，所以學(xué)些總結(jié)學(xué)著做一份筆記，也是借由這個(gè)機(jī)會(huì)督促自己看下去看完。有參考網(wǎng)易云課堂的這個(gè)視頻講解系列，看一遍視頻再看書效果會(huì)比較好，視頻的內(nèi)容非常的精煉，看書的時(shí)候正好可以把不懂的地方或者一些一句帶過的細(xì)節(jié)看一遍。目前的這個(gè)結(jié)構(gòu)還是書中原本的結(jié)構(gòu)，有少部分也做了概括。
一、視覺藝術(shù)與視覺設(shè)計(jì)
藝術(shù)家：表達(dá)自我。限制越少越好。
視覺設(shè)計(jì)師：清晰溝通。（目標(biāo)導(dǎo)向的方式）努力以易于理解和使用的方式來(lái)呈現(xiàn)行為和信息，支撐組織的品牌目標(biāo)及任務(wù)角色目的。
二、視覺界面設(shè)計(jì)元素
除了上面這幾個(gè)還有情景。用戶使用產(chǎn)品的環(huán)境，黑暗？光亮？走動(dòng)？坐地鐵？邊坐家務(wù)邊使用？把這些當(dāng)作限制條件去考慮視覺設(shè)計(jì)。
大?。?/b>大小屬性在傳遞層次的時(shí)候很重要。大小差異足夠大的話完全可以吸引注意力，有序（人們會(huì)按照物體的大小排序）和量化（傾向于給這些差異賦予相對(duì)數(shù)量）變量。
顏色（色相、明度、純度?） ? ? ??色相：色相的巨大差異能夠迅速吸引注意力，色相不同各國(guó)的含義也均有不同，色相不是有序或者量化的，行業(yè)里會(huì)計(jì)認(rèn)為紅色負(fù)、黑色正，證券藍(lán)色買、紅色賣這個(gè)可以用。明度：對(duì)于突出的元素，明度深淺是吸引注意力的好工具。純度：純度跟色相明度一樣也是吸引注意力的好工具，與較高的明度密切相關(guān)。
位置：位置是有序和量化的變量，有利于傳達(dá)層級(jí)消息，F(xiàn)型的閱讀順序，重要內(nèi)容放在左上角，屏幕上聚集在一起的元素可以當(dāng)做是相似的。
動(dòng)效：運(yùn)動(dòng)的東西／元素可以迅速吸引的注意，隨時(shí)間的變
形狀：
形狀是認(rèn)識(shí)一個(gè)對(duì)象是什么的首要方式，人們傾向通過輪廓來(lái)識(shí)別對(duì)象。如果目的是抓住用戶的注意力則形狀不是最好的表達(dá)方式。
紋理：紋理能夠成為重要的能供性信號(hào)，陰影看上去可以點(diǎn)擊，恰當(dāng)?shù)氖褂眉y理能夠改善用戶界面的易學(xué)性。
文字：英文避免全部使用大寫，要付出更大的注意力。使用高對(duì)比度的文字，80%的對(duì)比度；選擇恰當(dāng)?shù)淖煮w和大小，無(wú)襯線字體在屏幕上更容易閱讀，襯線字體使用平滑技術(shù)來(lái)緩和，小于10px最好使用鋸齒無(wú)襯線字體；簡(jiǎn)潔組織文字。
三、視覺界面設(shè)計(jì)原則
1、傳達(dá)風(fēng)格／傳播品牌
在開始設(shè)計(jì)產(chǎn)品界面之前要理解品牌調(diào)性。例如photoshop與creative suite相似與adobe其它的應(yīng)用軟件相似，可以看出是一家的產(chǎn)品；outlook與office其它的產(chǎn)品也有相似性；apple系列產(chǎn)品也是。這種相似性可以理解為品牌的調(diào)性，設(shè)計(jì)在此基礎(chǔ)下展開。不過一旦產(chǎn)品線非常多涉及到不同領(lǐng)域似乎就很難把握了。
詞云／關(guān)鍵詞。也就是一組形容產(chǎn)品的詞匯，一般在產(chǎn)品設(shè)計(jì)開始時(shí)期會(huì)概括出產(chǎn)品的幾個(gè)特性然后圍繞這幾個(gè)關(guān)鍵詞去展開，確定一些顏色、設(shè)計(jì)風(fēng)格走向。
2、帶領(lǐng)用戶厘清視覺層次
用戶界面需要?jiǎng)?chuàng)建清晰的視覺層級(jí)。使用基本的顏色、大小、位置這些視覺元素區(qū)分層級(jí)級(jí)別，減弱不重要的視覺元素。
建立關(guān)系。經(jīng)常使用的元素可以放在一起減少鼠標(biāo)移動(dòng)，可以讓用戶清晰地知道這些任務(wù)、數(shù)據(jù)、工具是關(guān)聯(lián)的。不必同時(shí)使用但具有相似功能的可視覺上組織在一起。
3、在組織的每一層提供視覺結(jié)構(gòu)和流
屏幕上的每一個(gè)元素都要盡可能的水平或者垂直對(duì)齊，謹(jǐn)慎做出不對(duì)齊元素的決定，實(shí)現(xiàn)差異化效果。可通過控制各個(gè)元素的視覺重量來(lái)實(shí)現(xiàn)不對(duì)稱平衡，瞇眼測(cè)試。
良好的網(wǎng)格是模塊化的，足夠靈活、適應(yīng)變化、保持一致性。布局可精確到屏幕到50%、20%、三分之一，讓這種比例很突出、干脆、明確。設(shè)計(jì)良好的網(wǎng)格可以提高屏幕的可讀性，用戶可以快速的學(xué)習(xí)和找到界面元素，減少界面設(shè)計(jì)的迭代，方便修改和擴(kuò)展。
布局上構(gòu)建出高效邏輯路徑，F(xiàn)型閱讀順序，從上到下從走到右。相同的元素相同的位置，重要元素次要元素輔助元素之前的流動(dòng)要有序。
4、在特定屏幕上告訴用戶能做什么（能供性）
能共性分解成設(shè)計(jì)布局的空間和內(nèi)容分類、圖標(biāo)、視覺符號(hào)，以及在可能時(shí)預(yù)覽視間距效果。視覺上將相關(guān)功能分組，提供空間上的使用情境。
效率類的程序使用精確、保守渲染的圖標(biāo)更合適。圖標(biāo)同時(shí)表達(dá)動(dòng)作和動(dòng)作施加的對(duì)象更容易理解，在圖標(biāo)下標(biāo)注文字或者提示。注意一些可能會(huì)發(fā)生各國(guó)家歧義的動(dòng)作圖標(biāo)。
視覺上不同的符號(hào)代表不同的對(duì)象類型，如單選、復(fù)選、滑塊。用視覺元素向用戶傳達(dá)結(jié)果，盡可能提供預(yù)覽，可以讓用戶可以清晰的知道不同設(shè)置／功能帶來(lái)的不同，如改變字體大小之后馬上就可以看見，也有些比較復(fù)雜的像word里面的邊距預(yù)覽可以直接看出不同。
5、響應(yīng)命令
hover、click后用戶需要看到某種響應(yīng)。
0.1s－1s之間，提供細(xì)微的視覺線索。
達(dá)到10s提供線索告知延遲，如使用循環(huán)動(dòng)畫和估計(jì)使用的時(shí)間。
大于10s，顯示提示解釋原因，顯示運(yùn)行進(jìn)度更新，配上有禮貌的提示，讓用戶可以返回任務(wù)。
6、把注意力吸引到重要事件上
智能手機(jī)上的通知欄可以讓用戶知道一些信息。吸引力的機(jī)制不在我們的意識(shí)控制之下，在屏幕上用強(qiáng)烈的對(duì)比來(lái)呈現(xiàn)就能把用戶從現(xiàn)有的工作中吸引過來(lái)，但要注意合理使用，誤用會(huì)顯得粗魯。
7、保持簡(jiǎn)單 最小化視覺工作量
使用簡(jiǎn)單的幾何形狀、有限的色盤、顏色以較為不飽和的顏色或中性顏色為主，適當(dāng)加入高對(duì)比對(duì)顏色用來(lái)強(qiáng)調(diào)。
任何的差異的存在都要有足夠的理由，如無(wú)必要?jiǎng)t可以舍棄。如間距、字體大小差距比較小的時(shí)候調(diào)成統(tǒng)一。
用最少的視覺和功能元素發(fā)揮最大的效能?！案軛U”在界面中使用一個(gè)元素來(lái)表達(dá)多重相關(guān)的意圖。一個(gè)按鈕下展開有多個(gè)相近的功能。
四、視覺信息設(shè)計(jì)的原則
“將清晰的思考視覺化”在充分理解觀看者的認(rèn)知任務(wù)和遵從一些設(shè)計(jì)原則才能設(shè)計(jì)出優(yōu)秀作品
加強(qiáng)視覺對(duì)比。同一個(gè)對(duì)象不同操作后的前后變化提供預(yù)覽，同一對(duì)象不同時(shí)間維度的變化曲線。
顯示因果關(guān)系。信息圖形中，闡明原因和結(jié)果，告訴用戶其行為的可能結(jié)果或提供如何完成操作的暗示。
顯示多個(gè)變量。在不影響清晰度的情況下，顯示多個(gè)變量，用戶可以選擇開啟關(guān)閉其中的某個(gè)變量，使對(duì)比更容易，相關(guān)性更清晰。
在一個(gè)界面中整合文本、圖形、數(shù)據(jù)。多個(gè)維度更易于用戶理解信息，是高效率的結(jié)合。
確保內(nèi)容的質(zhì)量、相關(guān)性、完整性。高質(zhì)量的內(nèi)容利于用戶增加信任感。
在相鄰空間上顯示事物，而不是按時(shí)間堆積。靜態(tài)信息顯示，使用動(dòng)畫會(huì)更有效地呈現(xiàn)時(shí)間軸上的變化。
可量化的數(shù)據(jù)就要量化。如餅狀圖能讓用戶更好的理解相關(guān)數(shù)據(jù)。
五、一致性和標(biāo)準(zhǔn)化
一致性意味著產(chǎn)品的不同模塊要有相似的外觀、感覺、行為。如蘋果微軟都樂于鼓勵(lì)自己的開發(fā)人員和第三方開發(fā)人員創(chuàng)建運(yùn)行與自己平臺(tái)外觀感覺都很像的程序，為用戶提供無(wú)縫而舒適的用戶體驗(yàn)。
益處：減少錯(cuò)誤、提高產(chǎn)出，提高易用性和易學(xué)性；利于軟件開發(fā)商，降低客戶培訓(xùn)技術(shù)支持的費(fèi)用，減少開發(fā)時(shí)間和工作量；降低維護(hù)費(fèi)用，提高設(shè)計(jì)和代碼復(fù)用率。
風(fēng)險(xiǎn)：標(biāo)準(zhǔn)一般強(qiáng)調(diào)的是界面外觀和感覺，很少涉及到界面更深的行為、高層次的邏輯、組織結(jié)構(gòu)，同時(shí)也缺乏使用情境。
界面標(biāo)準(zhǔn)適合作為具體的指導(dǎo)準(zhǔn)則和經(jīng)驗(yàn)法則。因?yàn)楝F(xiàn)有的規(guī)范也會(huì)不斷的修改完善。
打破：當(dāng)習(xí)慣用法被目標(biāo)用戶使用后，大多數(shù)人認(rèn)為明顯更好，就是將其用于界面的最好理由。
一致性和標(biāo)準(zhǔn)：一致性并不代表僵化，特別在一致性不恰當(dāng)時(shí)，界面和交互風(fēng)格指南必須隨著軟件成長(zhǎng)、演化。一個(gè)公司多種軟件產(chǎn)品時(shí)候要考慮的問題。
設(shè)計(jì)語(yǔ)言：編寫風(fēng)格指南有助于設(shè)計(jì)師合理和簡(jiǎn)化設(shè)計(jì)語(yǔ)言。最好的設(shè)計(jì)語(yǔ)言以用戶為中心，在產(chǎn)品設(shè)計(jì)過程中演化。如微軟metro設(shè)計(jì)語(yǔ)言的磁貼tiles 網(wǎng)頁(yè)和移動(dòng)端均有用到。
