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

1、2014 CUIT School of software人機(jī)交互技術(shù)人機(jī)交互技術(shù)2014 CUIT 人機(jī)交互技術(shù)2主要內(nèi)容l 視覺設(shè)計概念l 基本視覺原則l 視覺關(guān)系原則l 視覺設(shè)計綜合原則2014 CUIT 人機(jī)交互技術(shù)3視覺設(shè)計概念 視覺設(shè)計是針對眼睛官能的主觀形式的表現(xiàn)手段和結(jié)果。 任何界面都要給用戶帶來愉悅的視覺享受。 界面的視覺體現(xiàn)要遵循信息設(shè)計以及交互設(shè)計的基本原則。2014 CUIT 人機(jī)交互技術(shù)4視覺設(shè)計分類 標(biāo)志設(shè)計標(biāo)志設(shè)計 人們可以獲取大量信息，并很大程度地影響自己的生活觀念和生活方式。分為政治性、公益性、文化性、商業(yè)性。 包裝設(shè)計包裝設(shè)計 對書籍的封面及排版等進(jìn)行藝術(shù)化的

2、設(shè)計，提高讀者的閱讀興趣，從而加深對其思想性、文化性和知識性的認(rèn)識。 字體設(shè)計字體設(shè)計 以特定的圖形象征或代表某一國家、機(jī)構(gòu)、團(tuán)體、企業(yè)或產(chǎn)品的符號。簡明、直觀、易識別。2014 CUIT 人機(jī)交互技術(shù)5視覺設(shè)計分類 圖像設(shè)計圖像設(shè)計 指運(yùn)用視覺設(shè)計手段，通過標(biāo)志的造型和特定的色彩等表現(xiàn)手法，使企業(yè)的經(jīng)營理念、行為觀念、管理特色、產(chǎn)品包裝風(fēng)格、營銷準(zhǔn)則與策略形成一種整體形象。 書籍書籍設(shè)計設(shè)計 為達(dá)到有效傳達(dá)企業(yè)特定信息的目的，對文字的筆畫、結(jié)構(gòu)、造型、色彩以及編排等方面進(jìn)行一定的藝術(shù)處理，使其形成鮮明的個性，使人易認(rèn)易記。 廣告設(shè)計廣告設(shè)計 各種手工或電腦的繪畫手段或影像技術(shù)，以及利用復(fù)合方

3、式進(jìn)行創(chuàng)造性的圖像設(shè)計，構(gòu)思巧妙，表現(xiàn)獨(dú)特。2014 CUIT 人機(jī)交互技術(shù)6視覺設(shè)計分類 裝潢設(shè)計裝潢設(shè)計 產(chǎn)品與消費(fèi)者的媒介，它起著保護(hù)商品、介紹商品、美化商品、指導(dǎo)消費(fèi)、便于儲運(yùn)、 銷售、計量等方面的作用。又稱視覺形象識別系統(tǒng)設(shè)計。從發(fā)展的角度來看，視覺傳達(dá)設(shè)計是科學(xué)、嚴(yán)謹(jǐn)?shù)母拍蠲Q，蘊(yùn)含著未來設(shè)計的趨向。 界面設(shè)計界面設(shè)計 界面設(shè)計又叫GUI設(shè)計，包括網(wǎng)頁視覺設(shè)計和各類手執(zhí)（手機(jī)、pad等等）系統(tǒng)的界面視覺設(shè)計（不含交互、體驗），是近些年興起的新興設(shè)計學(xué)科。2014 CUIT 人機(jī)交互技術(shù)7主要內(nèi)容l 視覺設(shè)計概念l 基本視覺原則l 視覺關(guān)系原則l視覺設(shè)計綜合原則2014 CUIT 人

4、機(jī)交互技術(shù)81、對齊 視覺元素應(yīng)該以一個或者多個要點(diǎn)對齊，這樣能夠創(chuàng)造出一致性與相符性，增加設(shè)計的整體美感，使人覺得清晰舒適。 “對齊”能夠創(chuàng)造更整齊的版式，讓信息傳達(dá)更加快捷。2014 CUIT 人機(jī)交互技術(shù)9自然引導(dǎo)用戶的瀏覽2014 CUIT 人機(jī)交互技術(shù)10多內(nèi)容頁面排版2014 CUIT 人機(jī)交互技術(shù)11注冊表單2014 CUIT 人機(jī)交互技術(shù)122、80/20法則 在一切大系統(tǒng)中，大約80%的效果是由20%的變量造成的。 80/20法則，對集中資源有很大的幫助。它可以提高設(shè)計的效率。2014 CUIT 人機(jī)交互技術(shù)13線框圖對視覺設(shè)計的重要性2014 CUIT 人機(jī)交互技術(shù)14常用

5、突出和主要功能2014 CUIT 人機(jī)交互技術(shù)153、容易使用 設(shè)計應(yīng)該不需要特別的適應(yīng)或改變，就可以給不同能力的人使用。 感官性：每個人都能理解這個設(shè)計 操作性：每個人都能使用 簡易性：不論使用者的經(jīng)驗、讀寫能力、注意力怎樣，使用都很容易 回旋性：使錯誤及其導(dǎo)致的后果最小化2014 CUIT 人機(jī)交互技術(shù)16多種輸入途徑2014 CUIT 人機(jī)交互技術(shù)17錯誤提示2014 CUIT 人機(jī)交互技術(shù)184、美觀實(shí)用效應(yīng) 人們認(rèn)為美觀的設(shè)計更實(shí)用。好用但不美觀的設(shè)計，接受程度往往不高，也就談不上是否實(shí)用了。 美學(xué)在設(shè)計使用上起到了重要作用。美觀的設(shè)計更能促進(jìn)正面態(tài)度的形成，而且人們會更愿意容忍美觀

6、設(shè)計的缺陷。2014 CUIT 人機(jī)交互技術(shù)19品質(zhì)對人們心理的影響2014 CUIT 人機(jī)交互技術(shù)202014 CUIT 人機(jī)交互技術(shù)21蘋果2014 CUIT 人機(jī)交互技術(shù)225、功能可見性 這一原則是預(yù)設(shè)用途在視覺設(shè)計中的體現(xiàn)。 物品或環(huán)境的某些功能比其他功能更具有可見性。比如圓的輪子。 普通常見的物件用在界面設(shè)計當(dāng)中，可以暗示與現(xiàn)實(shí)一樣的操作。2014 CUIT 人機(jī)交互技術(shù)23按鈕2014 CUIT 人機(jī)交互技術(shù)24圖標(biāo)OS X Mavericks（巨浪）OS X Yosemite（優(yōu)美勝地）2014 CUIT 人機(jī)交互技術(shù)252014 CUIT 人機(jī)交互技術(shù)266、條件反射 把某一

7、刺激和某種身體或者情感的反應(yīng)聯(lián)系起來的一種技巧。 在產(chǎn)品的界面設(shè)計上使用條件反射原則。2014 CUIT 人機(jī)交互技術(shù)272014 CUIT 人機(jī)交互技術(shù)282014 CUIT 人機(jī)交互技術(shù)297、顏色 顏色能賦予設(shè)計更多的視覺樂趣和美感，并且可以加強(qiáng)設(shè)計元素的組織和意義。 顏色的數(shù)目2014 CUIT 人機(jī)交互技術(shù)30 顏色的組合 彩度如果色彩的主要目的是吸引注意力，可以利用飽和色（純色），如果效果和效率是主要目的，則利用去飽和度的色彩。2014 CUIT 人機(jī)交互技術(shù)312014 CUIT 人機(jī)交互技術(shù)32 Kuler colorschemedesigner2014 CUIT 人機(jī)交互技術(shù)

8、338、像素 像素是用來計算數(shù)碼影像的一種單位。這種最小的圖形單元在屏幕上顯示的是一個染色點(diǎn)。 像素化設(shè)計廣泛應(yīng)用在網(wǎng)頁設(shè)計和界面設(shè)計中，是用來衡量設(shè)計品質(zhì)的。2014 CUIT 人機(jī)交互技術(shù)34圖標(biāo)2014 CUIT 人機(jī)交互技術(shù)352014 CUIT 人機(jī)交互技術(shù)36主要內(nèi)容l 視覺設(shè)計概念l 基本視覺原則l 視覺關(guān)系原則l 視覺設(shè)計綜合原則2014 CUIT 人機(jī)交互技術(shù)371、圖形背景關(guān)系 格式塔感知原理：人類的感知系統(tǒng)會把刺激分為“圖形元素”和“背景元素”。 設(shè)計中要把圖形和背景區(qū)分清楚，以便讓焦點(diǎn)集中、盡量避免認(rèn)知混亂。2014 CUIT 人機(jī)交互技術(shù)38圖形和背景的區(qū)分 圖形有明

9、確的形狀，而背景沒有 背景在圖形后面延續(xù) 圖形似乎離設(shè)計師較近，在空間中有明確的位置；背景似乎離設(shè)計師較遠(yuǎn)，在空間中沒有明確的位置 在地平線以下的被視為圖形；在地平線以上的被視為背景 靠下面區(qū)域的一般被看作圖形；靠近上面區(qū)域的一般被視為背景。2014 CUIT 人機(jī)交互技術(shù)392014 CUIT 人機(jī)交互技術(shù)402、一致性 對于用戶體驗來說，在一個系統(tǒng)中，相似的部分用相似的方法是對用戶更好的學(xué)習(xí)，減少用戶學(xué)習(xí)的成本。 一致性分為四種：美觀、功能、內(nèi)部和外部。 美觀的一致性指的是風(fēng)格、外觀的統(tǒng)一。2014 CUIT 人機(jī)交互技術(shù)41蘋果廣告字體Myriad Pro2014 CUIT 人機(jī)交互技術(shù)

10、42蘋果廣告字體Myriad Pro2014 CUIT 人機(jī)交互技術(shù)432014 CUIT 人機(jī)交互技術(shù)443、強(qiáng)調(diào) 把注意力帶到一個文字或圖像區(qū)域的技巧。 通常設(shè)計師需要使用這個手段來把用戶的注意力帶到設(shè)計師希望用戶看到的信息上。但如果使用不當(dāng)，“強(qiáng)調(diào)”就會失去作用，使得相應(yīng)的區(qū)域造成負(fù)面影響。 顏色是強(qiáng)調(diào)的常用手段。2014 CUIT 人機(jī)交互技術(shù)452014 CUIT 人機(jī)交互技術(shù)462014 CUIT 人機(jī)交互技術(shù)474、圖像符號 圖像符號是利用圖像，來詮釋展現(xiàn)要表達(dá)的行為、物體和概念，使之更容易發(fā)現(xiàn)、辨識、學(xué)習(xí)和記憶。 圖像符號包括：相似、舉例、象征和強(qiáng)制。2014 CUIT 人機(jī)交

11、互技術(shù)48相似 利用視覺上相似的圖形，指出行為、物體或者概念。2014 CUIT 人機(jī)交互技術(shù)49舉例 用經(jīng)常與行為、物體或者概念相關(guān)的實(shí)物圖像為例。變現(xiàn)復(fù)雜的行為、物體或者概念。2014 CUIT 人機(jī)交互技術(shù)50象征 用圖像代表抽象的行為、物體或者概念。 象征與舉例的區(qū)別在于，前者不會在操作中用到，后者的圖形是在實(shí)際中出現(xiàn)，并被用到的。2014 CUIT 人機(jī)交互技術(shù)51強(qiáng)制 用于行為、物體或者概念無關(guān)的圖像來表達(dá)，必須通過學(xué)習(xí)才能了解。 一般來說，強(qiáng)制符號只能用在跨文化交流或長期使用的行業(yè)標(biāo)準(zhǔn)上。2014 CUIT 人機(jī)交互技術(shù)525、干擾效應(yīng) 干擾效應(yīng)是指大腦同時處理多個問題的時候，會

12、出現(xiàn)思考放慢且不準(zhǔn)確或者錯誤的現(xiàn)象。 設(shè)計過程中要預(yù)防干擾，避免讓思維沖突。2014 CUIT 人機(jī)交互技術(shù)532014 CUIT 人機(jī)交互技術(shù)54 警示類提示要醒目而且要有足夠的警示，一定要用紅色。 提示類的信息不要那么警示，選用淺橙色、淺綠色或者淺灰色等。 紅色 綠色 2014 CUIT 人機(jī)交互技術(shù)556、沉浸 沉浸就是一種極度的專注，甚至喪失對周圍真實(shí)世界的感受，這種情況通常由喜悅或滿足感引起。2014 CUIT 人機(jī)交互技術(shù)562014 CUIT 人機(jī)交互技術(shù)572014 CUIT 人機(jī)交互技術(shù)587、重復(fù) 重復(fù)是指重復(fù)一個操作直至達(dá)到特定結(jié)果為止的過程。 系統(tǒng)并不是越復(fù)雜越高級，而

13、是越體貼人的認(rèn)知才叫高級。2014 CUIT 人機(jī)交互技術(shù)592014 CUIT 人機(jī)交互技術(shù)608、容易識別 在多媒體、網(wǎng)絡(luò)出版發(fā)展迅速的今天，設(shè)計師對于信息的識別要求日益增高，要盡量避免渾濁的視覺表達(dá)，要將信息傳達(dá)清晰可辨。 淺色背景要使用深色的字，深色的背景上使用淺色的字。2014 CUIT 人機(jī)交互技術(shù)612014 CUIT 人機(jī)交互技術(shù)622014 CUIT 人機(jī)交互技術(shù)639、映射 映射反應(yīng)了兩者之間的聯(lián)系和關(guān)系。好的映射主要是設(shè)計、行為、意義中的相似性功能。2014 CUIT 人機(jī)交互技術(shù)64主要內(nèi)容l 視覺設(shè)計概念l 基本視覺原則l 視覺關(guān)系原則l 視覺設(shè)計綜合原則2014 C

14、UIT 人機(jī)交互技術(shù)651、模擬 模仿熟悉的物體、生物或者環(huán)境的特性，利用這些特性所具有的優(yōu)勢，可以通過模擬來達(dá)到某種目的。 設(shè)計中的模擬有三種方式：表面模擬、行為模擬和功能模擬。視覺設(shè)計中的模擬，更多的是表面模擬。這與流行的擬物化設(shè)計比較類似。2014 CUIT 人機(jī)交互技術(shù)662014 CUIT 人機(jī)交互技術(shù)672014 CUIT 人機(jī)交互技術(shù)682014 CUIT 人機(jī)交互技術(shù)692014 CUIT 人機(jī)交互技術(shù)702014 CUIT 人機(jī)交互技術(shù)712、奧卡姆剃刀 奧卡姆剃刀定律：如無必要，勿增實(shí)體。即簡單有效原理，切勿浪費(fèi)較多東西去做用較少的東西同樣可以做好的事情。 簡單的設(shè)計比復(fù)雜的設(shè)計好，不必要的元素會降低設(shè)計的效率，并會增加無法預(yù)期的后果。2014 CUIT 人機(jī)交互技術(shù)723、圖片優(yōu)勢 圖片比文章更有吸引力和記憶力。 用戶對圖文混排的頁面更容易回憶起圖片而不是文章，同時用戶在瀏覽網(wǎng)頁的時候在圖片上的停留時間明顯高于文字。2014 CUIT 人機(jī)交互技術(shù)732014 CUIT 人機(jī)交互技術(shù)742014 CUIT 人機(jī)交互技術(shù)754、大草原偏愛 研究表明，人們傾向于偏愛大草原般的環(huán)境：開闊的空間、散布的樹木，綠綠的草坪。 景觀設(shè)計，廣告設(shè)計以及其他需要創(chuàng)造或描述自然環(huán)境的設(shè)計中，可以考慮使用大草原原