人機(jī)交互技術(shù)05

人機(jī)交互技術(shù)第5講視覺設(shè)計(jì)王艷ywang94@主要內(nèi)容

視覺設(shè)計(jì)概念

基本視覺原則

視覺關(guān)系原則視覺設(shè)計(jì)綜合原則視覺設(shè)計(jì)概念視覺設(shè)計(jì)是針對眼睛官能的主觀形式的表現(xiàn)手段和結(jié)果。任何界面都要給用戶帶來愉悅的視覺享受。界面的視覺體現(xiàn)要遵循信息設(shè)計(jì)以及交互設(shè)計(jì)的基本原則。視覺設(shè)計(jì)分類標(biāo)志設(shè)計(jì)人們可以獲取大量信息，并很大程度地影響自己的生活觀念和生活方式。分為政治性、公益性、文化性、商業(yè)性。包裝設(shè)計(jì)對書籍的封面及排版等進(jìn)行藝術(shù)化的設(shè)計(jì)，提高讀者的閱讀興趣，從而加深對其思想性、文化性和知識(shí)性的認(rèn)識(shí)。字體設(shè)計(jì)以特定的圖形象征或代表某一國家、機(jī)構(gòu)、團(tuán)體、企業(yè)或產(chǎn)品的符號(hào)。簡明、直觀、易識(shí)別。視覺設(shè)計(jì)分類圖像設(shè)計(jì)指運(yùn)用視覺設(shè)計(jì)手段，通過標(biāo)志的造型和特定的色彩等表現(xiàn)手法，使企業(yè)的經(jīng)營理念、行為觀念、管理特色、產(chǎn)品包裝風(fēng)格、營銷準(zhǔn)則與策略形成一種整體形象。書籍設(shè)計(jì)為達(dá)到有效傳達(dá)企業(yè)特定信息的目的，對文字的筆畫、結(jié)構(gòu)、造型、色彩以及編排等方面進(jìn)行一定的藝術(shù)處理，使其形成鮮明的個(gè)性，使人易認(rèn)易記。廣告設(shè)計(jì)各種手工或電腦的繪畫手段或影像技術(shù)，以及利用復(fù)合方式進(jìn)行創(chuàng)造性的圖像設(shè)計(jì)，構(gòu)思巧妙，表現(xiàn)獨(dú)特。視覺設(shè)計(jì)分類裝潢設(shè)計(jì)產(chǎn)品與消費(fèi)者的媒介，它起著保護(hù)商品、介紹商品、美化商品、指導(dǎo)消費(fèi)、便于儲(chǔ)運(yùn)、銷售、計(jì)量等方面的作用。又稱視覺形象識(shí)別系統(tǒng)設(shè)計(jì)。從發(fā)展的角度來看，視覺傳達(dá)設(shè)計(jì)是科學(xué)、嚴(yán)謹(jǐn)?shù)母拍蠲Q，蘊(yùn)含著未來設(shè)計(jì)的趨向。界面設(shè)計(jì)界面設(shè)計(jì)又叫GUI設(shè)計(jì)，包括網(wǎng)頁視覺設(shè)計(jì)和各類手執(zhí)（手機(jī)、pad等等）系統(tǒng)的界面視覺設(shè)計(jì)（不含交互、體驗(yàn)），是近些年興起的新興設(shè)計(jì)學(xué)科。主要內(nèi)容

視覺設(shè)計(jì)概念

基本視覺原則

視覺關(guān)系原則視覺設(shè)計(jì)綜合原則1、對齊視覺元素應(yīng)該以一個(gè)或者多個(gè)要點(diǎn)對齊，這樣能夠創(chuàng)造出一致性與相符性，增加設(shè)計(jì)的整體美感，使人覺得清晰舒適。“對齊”能夠創(chuàng)造更整齊的版式，讓信息傳達(dá)更加快捷。自然引導(dǎo)用戶的瀏覽多內(nèi)容頁面排版注冊表單2、80/20法則在一切大系統(tǒng)中，大約80%的效果是由20%的變量造成的。80/20法則，對集中資源有很大的幫助。它可以提高設(shè)計(jì)的效率。線框圖對視覺設(shè)計(jì)的重要性常用突出和主要功能3、容易使用設(shè)計(jì)應(yīng)該不需要特別的適應(yīng)或改變，就可以給不同能力的人使用。感官性：每個(gè)人都能理解這個(gè)設(shè)計(jì)操作性：每個(gè)人都能使用簡易性：不論使用者的經(jīng)驗(yàn)、讀寫能力、注意力怎樣，使用都很容易回旋性：使錯(cuò)誤及其導(dǎo)致的后果最小化多種輸入途徑錯(cuò)誤提示4、美觀實(shí)用效應(yīng)人們認(rèn)為美觀的設(shè)計(jì)更實(shí)用。好用但不美觀的設(shè)計(jì)，接受程度往往不高，也就談不上是否實(shí)用了。美學(xué)在設(shè)計(jì)使用上起到了重要作用。美觀的設(shè)計(jì)更能促進(jìn)正面態(tài)度的形成，而且人們會(huì)更愿意容忍美觀設(shè)計(jì)的缺陷。品質(zhì)對人們心理的影響蘋果5、功能可見性這一原則是預(yù)設(shè)用途在視覺設(shè)計(jì)中的體現(xiàn)。物品或環(huán)境的某些功能比其他功能更具有可見性。比如圓的輪子。普通常見的物件用在界面設(shè)計(jì)當(dāng)中，可以暗示與現(xiàn)實(shí)一樣的操作。按鈕圖標(biāo)OSXMavericks（巨浪）OSXYosemite（優(yōu)美勝地）6、條件反射把某一刺激和某種身體或者情感的反應(yīng)聯(lián)系起來的一種技巧。在產(chǎn)品的界面設(shè)計(jì)上使用條件反射原則。7、顏色顏色能賦予設(shè)計(jì)更多的視覺樂趣和美感，并且可以加強(qiáng)設(shè)計(jì)元素的組織和意義。顏色的數(shù)目顏色的組合彩度如果色彩的主要目的是吸引注意力，可以利用飽和色（純色），如果效果和效率是主要目的，則利用去飽和度的色彩。Kulercolorschemedesigner8、像素像素是用來計(jì)算數(shù)碼影像的一種單位。這種最小的圖形單元在屏幕上顯示的是一個(gè)染色點(diǎn)。像素化設(shè)計(jì)廣泛應(yīng)用在網(wǎng)頁設(shè)計(jì)和界面設(shè)計(jì)中，是用來衡量設(shè)計(jì)品質(zhì)的。圖標(biāo)主要內(nèi)容

視覺設(shè)計(jì)概念

基本視覺原則

視覺關(guān)系原則視覺設(shè)計(jì)綜合原則1、圖形——背景關(guān)系格式塔感知原理：人類的感知系統(tǒng)會(huì)把刺激分為“圖形元素”和“背景元素”。設(shè)計(jì)中要把圖形和背景區(qū)分清楚，以便讓焦點(diǎn)集中、盡量避免認(rèn)知混亂。圖形和背景的區(qū)分圖形有明確的形狀，而背景沒有背景在圖形后面延續(xù)圖形似乎離設(shè)計(jì)師較近，在空間中有明確的位置；背景似乎離設(shè)計(jì)師較遠(yuǎn)，在空間中沒有明確的位置在地平線以下的被視為圖形；在地平線以上的被視為背景靠下面區(qū)域的一般被看作圖形；靠近上面區(qū)域的一般被視為背景。2、一致性對于用戶體驗(yàn)來說，在一個(gè)系統(tǒng)中，相似的部分用相似的方法是對用戶更好的學(xué)習(xí)，減少用戶學(xué)習(xí)的成本。一致性分為四種：美觀、功能、內(nèi)部和外部。美觀的一致性指的是風(fēng)格、外觀的統(tǒng)一。蘋果廣告字體MyriadPro蘋果廣告字體MyriadPro3、強(qiáng)調(diào)把注意力帶到一個(gè)文字或圖像區(qū)域的技巧。通常設(shè)計(jì)師需要使用這個(gè)手段來把用戶的注意力帶到設(shè)計(jì)師希望用戶看到的信息上。但如果使用不當(dāng)，“強(qiáng)調(diào)”就會(huì)失去作用，使得相應(yīng)的區(qū)域造成負(fù)面影響。顏色是強(qiáng)調(diào)的常用手段。4、圖像符號(hào)圖像符號(hào)是利用圖像，來詮釋展現(xiàn)要表達(dá)的行為、物體和概念，使之更容易發(fā)現(xiàn)、辨識(shí)、學(xué)習(xí)和記憶。圖像符號(hào)包括：相似、舉例、象征和強(qiáng)制。相似利用視覺上相似的圖形，指出行為、物體或者概念。舉例用經(jīng)常與行為、物體或者概念相關(guān)的實(shí)物圖像為例。變現(xiàn)復(fù)雜的行為、物體或者概念。象征用圖像代表抽象的行為、物體或者概念。象征與舉例的區(qū)別在于，前者不會(huì)在操作中用到，后者的圖形是在實(shí)際中出現(xiàn)，并被用到的。強(qiáng)制用于行為、物體或者概念無關(guān)的圖像來表達(dá)，必須通過學(xué)習(xí)才能了解。一般來說，強(qiáng)制符號(hào)只能用在跨文化交流或長期使用的行業(yè)標(biāo)準(zhǔn)上。5、干擾效應(yīng)干擾效應(yīng)是指大腦同時(shí)處理多個(gè)問題的時(shí)候，會(huì)出現(xiàn)思考放慢且不準(zhǔn)確或者錯(cuò)誤的現(xiàn)象。設(shè)計(jì)過程中要預(yù)防干擾，避免讓思維沖突。警示類提示要醒目而且要有足夠的警示，一定要用紅色。提示類的信息不要那么警示，選用淺橙色、淺綠色或者淺灰色等。

紅色綠色6、沉浸沉浸就是一種極度的專注，甚至喪失對周圍真實(shí)世界的感受，這種情況通常由喜悅或滿足感引起。7、重復(fù)重復(fù)是指重復(fù)一個(gè)操作直至達(dá)到特定結(jié)果為止的過程。系統(tǒng)并不是越復(fù)雜越高級，而是越體貼人的認(rèn)知才叫高級。8、容易識(shí)別在多媒體、網(wǎng)絡(luò)出版發(fā)展迅速的今天，設(shè)計(jì)師對于信息的識(shí)別要求日益增高，要盡量避免渾濁的視覺表達(dá)，要將信息傳達(dá)清晰可辨。淺色背景要使用深色的字，深色的背景上使用淺色的字。9、映射映射反應(yīng)了兩者之間的聯(lián)系和關(guān)系。好的映射主要是設(shè)計(jì)、行為、意義中的相似性功能。主要內(nèi)容

視覺設(shè)計(jì)概念

基本視覺原則

視覺關(guān)系原則

視覺設(shè)計(jì)綜合原則1、模擬模仿熟悉的物體、生物或者環(huán)境的特性，利用這些特性所具有的優(yōu)勢，可以通過模擬來達(dá)到某種目的。設(shè)計(jì)中的模擬有三種方式：表面模擬、行為模擬和功能模擬。視覺設(shè)計(jì)中的模擬，更多的是表面模擬。這與流行的擬物化設(shè)計(jì)比較類似。2、奧卡姆剃刀奧卡姆剃刀定律：如無必要，勿增實(shí)體。即簡單有效原理，切勿浪費(fèi)較多東西去做用較少的東西同樣可以做好的事情。簡單的設(shè)計(jì)比復(fù)雜的設(shè)計(jì)好，不必要的元素會(huì)降低設(shè)計(jì)的效率，并會(huì)增加無法預(yù)期的后果。3、圖片優(yōu)勢圖片比文章更有吸引力和記憶力。用戶對圖文混排的頁面更容易回憶起圖片而不是文章，同時(shí)用戶在瀏覽網(wǎng)頁的時(shí)候在圖片上的停留時(shí)間明顯高于文字。4、大草原偏愛研究表明，人們傾向于偏愛大草原般的環(huán)境：開闊的