人機(jī)交互界面設(shè)計人機(jī)交互與界面設(shè)計212人機(jī)交互基本概念課件

1、汪彩霞人機(jī)交互界面設(shè)計交互設(shè)計界面交互設(shè)計？交互設(shè)計+視覺設(shè)計=界面設(shè)計功能、流程、邏輯形狀、色彩、質(zhì)感好用好看1.2界面設(shè)計1.2.3 Web界面設(shè)計原則1.2.1 Web界面設(shè)計原則1.2.2 Web界面要素設(shè)計1.2.3 界面設(shè)計目的與策劃1.2.3 Web界面設(shè)計原則以用戶為中心一致性簡潔與明確體現(xiàn)特色兼顧不同的瀏覽器良好的導(dǎo)航設(shè)計1 以用戶為中心的設(shè)計原則把用戶放在第一位，重點考慮用戶的需求。既考慮用戶的共性，又考慮用戶之間的差異性；不同類型的Web網(wǎng)站，訪問群體不同；同一類型的Web網(wǎng)站，用戶群也存在年齡、行業(yè)差別。網(wǎng)站示例1 針對女性的網(wǎng)站盡量選用柔和、明快的暖色作為主色調(diào)，給女

2、性瀏覽者以熱情、柔美的感覺。在頁面構(gòu)成上，可選用大量清晰度高的圖片做視覺沖擊。網(wǎng)站示例2 針對男性的網(wǎng)站常采用簡潔明了的表現(xiàn)方式，色調(diào)多由冷色調(diào)構(gòu)成。 1 以用戶為中心的設(shè)計原則網(wǎng)站示例3針對兒童的網(wǎng)站，設(shè)計界面兼具活潑有趣，多一些卡通形象。網(wǎng)站示例4針對老年人的網(wǎng)站，應(yīng)考慮采用較大的字體，直截了當(dāng)?shù)男畔@示和簡單的瀏覽方式?？紤]目標(biāo)用戶的行為方式。行為方式是人們由于年齡、性別、地區(qū)、種族、生活習(xí)俗、職業(yè)、受教育程度等形成的動作習(xí)慣、辦事方法。行為方式直接影響人們對網(wǎng)站的操作使用，是設(shè)計者需要加以考慮和利用的因素。89102 一致性原則Web界面的內(nèi)容和形式應(yīng)一致。內(nèi)容包括：網(wǎng)站顯示的信息，如

3、數(shù)據(jù)、文字內(nèi)容等。形式包括：Web界面設(shè)計的版式、構(gòu)圖、布局、色彩、風(fēng)格等。網(wǎng)頁的形式為內(nèi)容服務(wù)，不同內(nèi)容的網(wǎng)頁用不同的設(shè)計形式。2 一致性原則Web界面自身的風(fēng)格應(yīng)一致。網(wǎng)站標(biāo)識及頁面設(shè)計標(biāo)準(zhǔn)確定后，應(yīng)運(yùn)用到每個頁面上。每個頁面都使用相同的頁邊距；文本、圖形之間保持相同的間距；主要圖形、標(biāo)題或符號旁邊留下相同的空白；若使用圖標(biāo)導(dǎo)航，則各個界面應(yīng)當(dāng)使用相同的圖標(biāo)；頁面上的每個元素要與整個頁面的設(shè)計風(fēng)格一致；文字的顏色應(yīng)和圖像的顏色保持一致，并注意色彩搭配的和諧。1415163 簡潔與明確原則保持簡潔的常用做法是使用醒目的標(biāo)題，通常標(biāo)題采用圖形來表示；限制所用的字體和顏色的數(shù)目；界面上所有的元素

4、都有明確的含義和用途；界面上每一個元素都能讓瀏覽者看到；3 簡潔與明確原則3次點擊原則：通常情況下，訪問者應(yīng)該最多通過3次點擊就能在網(wǎng)站上找到想要的信息。主頁的訪問率為100人次的情況下，下一頁的訪問率會降到30-50人次。有時需要打破3次點擊原則。比如電子商務(wù)網(wǎng)站，用戶可能需3次以上點擊才能找到想要的商品。如果一定遵循3次點擊原則，可能造成一個頁面上必須面對大量的可選商品，這會使用戶感到困惑，甚至索性什么都不買。1920214 體現(xiàn)特色的原則特色鮮明的網(wǎng)站更容易在一瞬間打動它的瀏覽者，留下令人心動的第一印象；應(yīng)清楚Web網(wǎng)站用戶的基本情況，從而在網(wǎng)站設(shè)計時做到有的放矢，呈現(xiàn)關(guān)鍵信息；利用邏輯

5、結(jié)構(gòu)有序組織、開發(fā)頁面設(shè)計原型，通過測試和逐步精煉，形成網(wǎng)站的明確特點。2324255 兼顧不同瀏覽器的原則網(wǎng)站的瀏覽者可能使用不同類型和版本的瀏覽器。opera瀏覽器，火狐瀏覽器（Firefox），Safari，谷歌瀏覽器（ Chrome ）等；IE瀏覽器的版本：IE 6，IE 7，IE 8，IE 9，IE 10。以某一個瀏覽器的某一個版本為依據(jù)編寫的網(wǎng)頁程序，可能在其它的瀏覽器或其它版本上不能正常顯示。根據(jù)用戶瀏覽器分布情況來確定所面向的瀏覽器類別和版本，并在盡可能多的瀏覽器中測試網(wǎng)站。6 明確的導(dǎo)航設(shè)計的原則導(dǎo)航系統(tǒng)是網(wǎng)站的路徑指示系統(tǒng)，用于指導(dǎo)瀏覽者有效地訪問網(wǎng)站。Web導(dǎo)航應(yīng)該幫助用

6、戶理解他們在哪里、他們能去哪里、他們怎樣獲得其他信息。好的導(dǎo)航系統(tǒng)可以使用戶以一種滿意的方式找到需要的信息。導(dǎo)航系統(tǒng)的設(shè)計應(yīng)從使用者的角度出發(fā)，力爭簡便、清晰和完整一致。2829301.2.4 Web界面要素設(shè)計1.2.1 Web界面設(shè)計原則1.2.2 Web界面要素設(shè)計1.2.3 界面設(shè)計目的與策劃 我們要設(shè)計怎樣的界面，并以何種形式完成它？ 要回答好這一問題，我們就必須明確： 網(wǎng)站建設(shè)的目的 網(wǎng)站信息的內(nèi)容 我們還是以網(wǎng)站為例： 網(wǎng)站設(shè)計形式 1.2.4 Web界面要素設(shè)計1.2.4 Web界面要素設(shè)計Web界面規(guī)劃文化與語言內(nèi)容設(shè)計Web界面布局Web界面色彩Web界面的文本設(shè)計Web界

7、面的動畫與多媒體Web界面上的導(dǎo)航1 Web界面規(guī)劃明確網(wǎng)站的目標(biāo)和用途；網(wǎng)頁布局、元素設(shè)計應(yīng)以網(wǎng)站的目標(biāo)為中心，從各方面表現(xiàn)站點的目標(biāo)；在制定建立站點的目標(biāo)時，應(yīng)將站點作為一種文化、一種藝術(shù)來看，力求在設(shè)計Web頁面時追求藝術(shù)效果與美感；確定了Web頁面設(shè)計目標(biāo)后，需要確定Web網(wǎng)站的用戶群體，進(jìn)行以用戶為中心的設(shè)計，既考慮用戶的共性，又考慮用戶的差異。2 文化與語言全球服務(wù)型的網(wǎng)站應(yīng)考慮不同國家的不同類型的文化與語言環(huán)境。Google的中文網(wǎng)站、百度網(wǎng)站通過圖片體現(xiàn)中國的傳統(tǒng)節(jié)日。外交部網(wǎng)站、Nvidia（英偉達(dá)）網(wǎng)站提供多種語言。當(dāng)網(wǎng)站有多種語言版本時，應(yīng)考慮不同的文化背景。阿拉伯語的書

8、寫方式為從右向左。2 文化與語言阿拉伯語的書寫方式為從右向左。不同國家和地區(qū)適用的顏色可能不同，不同地區(qū)的網(wǎng)頁內(nèi)容應(yīng)符合該地區(qū)的貨幣單位、時間格式等習(xí)慣。不同語言文字的結(jié)構(gòu)不同，在設(shè)計頁面布局時需要分別考慮。表達(dá)同樣含義的語句，通常德語語句的長度大于英語語句，英語語句的長度大于漢語語句。37383940413 內(nèi)容設(shè)計Web界面的內(nèi)容要符合確定的設(shè)計目標(biāo)，面向不同的對象要使用不同的口吻和用詞。面向消費者的網(wǎng)站應(yīng)使用通俗的詞匯、引人注目的廣告方式、個性化并有趣味性的語言。面向?qū)I(yè)人員的網(wǎng)站應(yīng)使用科學(xué)、嚴(yán)謹(jǐn)、準(zhǔn)確的詞語和表達(dá)方式，避免可能造成的任何誤解。4 Web界面布局布局設(shè)計應(yīng)做到布局合理、有

9、序、整體化。常用Web頁面布局的形式：“口”字形布局左右結(jié)構(gòu)布局上下結(jié)構(gòu)布局封面型布局自由式布局4 Web界面布局“口”字形布局頁面頂部為網(wǎng)站的標(biāo)題、橫幅廣告條以及網(wǎng)站的導(dǎo)航等；網(wǎng)頁的左右分列兩小條內(nèi)容，中間是主要部分；網(wǎng)頁的最下面是一些基本信息，如：聯(lián)系方式、版權(quán)聲明等；這種布局是使用最多的一種布局。4546474 Web界面布局左右結(jié)構(gòu)布局Web頁面的頂部有標(biāo)題或者無標(biāo)題，頁面的主要部分分為左右兩部分，一般左面是導(dǎo)航鏈接，右面是正文。論壇多采用這種結(jié)構(gòu)；企業(yè)網(wǎng)站也常采用這種結(jié)構(gòu)。優(yōu)點：結(jié)構(gòu)清晰、一目了然。4 Web界面布局上下結(jié)構(gòu)布局Web頁面的最上面是標(biāo)題，下面是正文。新聞發(fā)布系統(tǒng)、內(nèi)容

10、介紹頁面或注冊頁面等多用這種類型。4 Web界面布局封面型布局多出現(xiàn)在網(wǎng)站的首頁；通過精美的平面設(shè)計結(jié)合動畫，給人帶來賞心悅目的感覺；頁面上通常僅包含簡單的鏈接或沒有任何提示；常出現(xiàn)在企業(yè)網(wǎng)站和個人主頁中。4 Web界面布局自由式布局是上述幾種類型的結(jié)合和變化4 Web界面布局使用什么樣的布局沒有固定的模式，需要具體情況具體分析；內(nèi)容較多時，可以考慮“口”字形結(jié)構(gòu)的布局；如果介紹的主題較單一時，可以考慮上下結(jié)構(gòu)布局；如果想展示企業(yè)形象或個人主頁想要展示個人風(fēng)采，可以考慮封面型布局。5 Web界面色彩網(wǎng)站給人的第一印象來自視覺的沖擊，顏色元素在網(wǎng)站的感知和展示上扮演著重要的角色。企業(yè)或個人的風(fēng)格

11、、文化和態(tài)度可以通過網(wǎng)頁中的色彩混合、調(diào)整或者對照的方式體現(xiàn)出來，因此確定網(wǎng)站的標(biāo)準(zhǔn)色彩很重要。不同的色彩搭配可以產(chǎn)生不同的效果，并可能影響到訪問者的情緒。5 Web界面色彩色彩理論中紅、綠、藍(lán)為三原色；其它的色彩可以通過三原色調(diào)和而成；HTML語言中的色彩表達(dá)使用三原色的數(shù)值（RGB）來表示。顏色分為彩色和非彩色；非彩色指黑、白、灰；彩色是指除了非彩色以外的所有色彩。專業(yè)機(jī)構(gòu)的研究表明：彩色的記憶效果是黑白的3.5倍。5 Web界面色彩網(wǎng)站的標(biāo)準(zhǔn)色彩一般不超過3種。標(biāo)準(zhǔn)色彩主要用于網(wǎng)站的標(biāo)志、標(biāo)題、主菜單和主色塊，給人以整體統(tǒng)一的感覺；其它色彩作為點綴和襯托，不能喧賓奪主。應(yīng)避免使用可能有文

12、化禁忌的顏色，以及會給色盲用戶帶來問題的顏色。在新加坡紅、綠、藍(lán)色很受歡迎，視紫色、黑色為不吉利，黑、白、黃為禁忌色；捷克、斯洛伐克： 紅、藍(lán)、白是積極的，黑色視為帶有消極的含義。5 Web界面色彩網(wǎng)站的色彩搭配應(yīng)考慮如下原則：色彩的鮮明性：網(wǎng)站的色彩要鮮明，容易引人注目色彩的獨特性：與眾不同的色彩，使得用戶對網(wǎng)頁的印象深刻色彩的適合性：色彩和網(wǎng)頁要表達(dá)的內(nèi)容氣氛相適合色彩的聯(lián)想性：不同色彩會產(chǎn)生不同的聯(lián)想，選擇色彩要和網(wǎng)頁的內(nèi)涵相關(guān)聯(lián)藍(lán)色想到天空黑色想到黑夜紅色想到喜事6 Web界面的文本設(shè)計文本不要太多，以免轉(zhuǎn)移瀏覽者注意力。要選擇合適的顏色，以便使文本和其它界面元素一起產(chǎn)生一個和諧的視覺

13、效果；文本的顏色應(yīng)該一致，讓用戶可以容易地確定不同文本和顏色所代表的內(nèi)容。選擇的字體應(yīng)和整個界面融為一體；一旦已經(jīng)為某些元素選擇了字體，應(yīng)該保證其在整個網(wǎng)站中應(yīng)用的一致性。網(wǎng)站中可能會使用多種字體，但是同一種字體應(yīng)該表示相同類型的數(shù)據(jù)或者信息。6 Web界面的文本設(shè)計通過合理設(shè)置頁邊框、行間距等，使Web界面產(chǎn)生豐富變化的外觀和感覺。應(yīng)該重視標(biāo)題的處理。標(biāo)題一般無分級要求，其字形一般較大，字體的選擇一般具有多樣性，字形的變化修飾則更為豐富。 如：以方正字體為例，欄目標(biāo)題是大黑體、文章標(biāo)題是超粗黑體、正文是平黑體。一般情況下，頁面中的字體不要超過三種，如果希望有更多變化，應(yīng)盡量采用字體相同的字族

14、。6 Web界面的文本設(shè)計6061字體設(shè)計在商業(yè)美術(shù)設(shè)計領(lǐng)域，屬于較難的課題，它是圖形設(shè)計的一支。在界面設(shè)計中，不需要設(shè)計者擅長字體設(shè)計，但是其應(yīng)該掌握字體的使用原則。信息之文字標(biāo)志及口號性標(biāo)語信息之文字7 Web界面動畫與多媒體圖形、圖像、動畫、音頻和視頻等多媒體元素可以彌補(bǔ)平淡文本的不足，增強(qiáng)Web界面的藝術(shù)表現(xiàn)力。因此，在設(shè)計Web網(wǎng)頁時有必要考慮使用不同類型的多媒體元素，使得網(wǎng)站更生動，而且有吸引力。在設(shè)計動畫和多媒體元素時需要考慮帶寬以及瀏覽器的支持能力。豐富的多媒體展現(xiàn)形式可以增強(qiáng)Web界面的藝術(shù)性和趣味性，但是過多的使用多媒體元素會降低瀏覽速度，影響訪問效果和質(zhì)量。初稿方案定稿方

15、案/8 Web界面上的導(dǎo)航對于Web站點來說，需要包含導(dǎo)航條，用戶利用導(dǎo)航的提示在信息的空間中移動。真實世界的導(dǎo)航觀點在Web中常被采用。Web導(dǎo)航應(yīng)該幫助用戶理解他們在哪里、可以去哪里、怎樣獲得想要的東西。導(dǎo)航的設(shè)計應(yīng)充分考慮可見性、標(biāo)記和導(dǎo)航元素的布局。8 Web界面上的導(dǎo)航Web頁上僅有五個基本區(qū)域可放置導(dǎo)航元素：頂部底部左側(cè)右側(cè)中央討論找兩個自己熟悉的商業(yè)網(wǎng)站，總結(jié)其在設(shè)計上的5條優(yōu)點，根據(jù)自己的使用習(xí)慣，提出該網(wǎng)站可以進(jìn)一步改進(jìn)的地方。1.2.5 界面設(shè)計目的與策劃1.2.1 Web界面設(shè)計原則1.2.2 Web界面要素設(shè)計1.2.3 界面設(shè)計目的與策劃目的與策劃 如果我們要對網(wǎng)站進(jìn)

16、行界面設(shè)計，就必須先明確建設(shè)網(wǎng)站的原因。如： 建立網(wǎng)站是為了銷售產(chǎn)品，還是進(jìn)行商業(yè)服務(wù)。 你的目標(biāo)用戶是誰，他們能從你的網(wǎng)站上得到什么。 你想從網(wǎng)站中獲得怎樣的回報。 即使目標(biāo)相似，具體的設(shè)計方案也會根據(jù)客戶的不同情況而有所差別，這些差別反映出網(wǎng)站的特殊性。 1.2.5 界面設(shè)計目的與策劃目的與策劃 明確目標(biāo)的過程，就是找出客戶的優(yōu)勢、特色和行銷方式的過程。 如果客戶并不知道提供什么資料比較好，設(shè)計師可以問以下幾個問題來引導(dǎo)客戶。1.2.5 界面設(shè)計目的與策劃目的與策劃 問題1：你要建設(shè)網(wǎng)站的目的是什么？參考答案：為業(yè)務(wù)、服務(wù)做廣告。電子商務(wù)、銷售產(chǎn)品。事業(yè)宣傳，文化、觀點傳播。為供求雙方建立

17、平臺式網(wǎng)站。提供公益服務(wù)。這個問題能夠確定網(wǎng)站媒體的屬性，答案多為多選。1.2.5 界面設(shè)計目的與策劃目的與策劃 問題2：你設(shè)想中的網(wǎng)站規(guī)模是多大？ 參考答案：很小，現(xiàn)有的資料能放下就行，以后很少添加新內(nèi)容。從最小的規(guī)模開始，然后逐步擴(kuò)大，最終網(wǎng)站內(nèi)容是全面而豐富的。相當(dāng)復(fù)雜，欄目眾多。資源豐富，更新快，積累快。不太好說將來怎么發(fā)展，走著看的。1.2.5 界面設(shè)計目的與策劃目的與策劃 問題2：你設(shè)想中的網(wǎng)站規(guī)模是多大？網(wǎng)站的規(guī)模將決定網(wǎng)站設(shè)計時選擇怎樣的框架結(jié)構(gòu)。如果網(wǎng)站更新快，積累快，框架設(shè)計就要針對未來加入的信息多做一些保留，結(jié)構(gòu)要靈活一些。如果網(wǎng)站內(nèi)容多，就很容易想到使用豎分欄式結(jié)構(gòu)。1

18、.2.5 界面設(shè)計目的與策劃目的與策劃 問題3：目標(biāo)用戶的統(tǒng)一特征是什么？或者說，誰在看？ 參考答案：分銷商或是終端用戶。15-20歲之間的青少年或是20-30歲的青年。收入在5000元左右的灰領(lǐng)或是萬元收入以上的白領(lǐng)。藝術(shù)院校的學(xué)生或是藝術(shù)愛好者。男性瀏覽者居多或是女性居多。只是給我客戶公司的負(fù)責(zé)人看的，但都是外國人。1.2.5 界面設(shè)計目的與策劃目的與策劃 這個問題非常重要，它決定了網(wǎng)站的定位，也決定了是否能將正確的信息傳遞給正確的人。1.2.5 界面設(shè)計目的與策劃目的與策劃 問題4：網(wǎng)站的收入來源是哪幾個部分？ 參考答案：我不靠網(wǎng)站本身賺錢，僅僅是給國外的客戶看，他們需要的話就會下訂單。網(wǎng)站廣告、在線游戲。瀏覽者可直接在網(wǎng)站上購物，這就是主要來源。我的網(wǎng)站賣的是信息，VIP會員可以看到更多的東西。網(wǎng)站沒有