1、實驗報告學院：計科院專業(yè)：班級：成績：姓名：學號：組別：組員：實驗地點：實驗日期：指導教師簽名：預習情況操作情況考勤情況數(shù)據(jù)處理情況實驗 5 項目名稱： 交互設計要素之圖標 1、 實驗目的理解圖標在人際交互中的作用，理解基本的圖標設計技術方法，能夠根據(jù)一定的設計要求設計圖標。2、 實驗內(nèi)容2.1 圖標在人機交互中的作用圖標是圖形界面中最為重要的交互元素。用戶除了通過文本獲取系統(tǒng)發(fā)出的信息外，主要就是靠識別圖標來理解系統(tǒng)。為什么圖標在交互設計中如此重要？原因是多方面的：l 圖標比文本更易回憶和識別。也就是說，用戶更容易記住圖標而不是文本的內(nèi)容。l 圖標比文本更易于搜索和定位。由于圖標之間的差異對

2、比更強，因此用戶在圖標環(huán)境下更容易找到需要的對象（如某個功能按鈕）。l 圖標比文本更節(jié)省屏幕空間。圖標表達的豐富性使得能在方寸之間實現(xiàn)冗長文本所要表達的含義。l 圖標比文本更通用。對于有多國語言版本的軟件，使用圖標能改善文本翻譯上的缺陷，盡管不同文化下可能對某一圖標理解上可能有差異。2.2 圖標設計的技術基礎設計圖標就是要將一定的含義轉(zhuǎn)化為圖形，或者說把文字語言“翻譯”圖形語言。盡管圖標設計屬于美術設計范疇，不過圖標設計并非盲目入手，參考過往的范例能夠得到很好的啟發(fā)。同時，通過理解圖標的表達方式及基本構(gòu)成，能讓圖標設計有一定的規(guī)范可循。2.2.1 圖標的主要表達方式l 象形圖象形圖在圖標設計中

3、最為典型。圖標與圖標所表達的含義有直接的對應關系。如郵件圖標：l 表意符號表意符號是表示思想或者概念的符號。圖標與其說表達的含義不一定有直接的對應關系。如保存文件圖標：l 抽象形狀一些數(shù)學、邏輯、科學等符號，又或者音樂符號，語言中的標點符號都可以作為抽象形狀表示一定的含義。典型例子是提供幫助信息的圖標：。不過用戶未必能理解這些符號背后的含義。l 語標符號所謂語標符號，是指表示一個詞（組）的符號。典型例子有，IE瀏覽器的圖標：。這在軟件界面設計上也較為常見。2.2.2 圖標的構(gòu)成圖標設計可以從最基本的構(gòu)成開始。所有的圖形都可以被分解為點、線、區(qū)域。線和點作為構(gòu)成圖形的基本元素能夠組合產(chǎn)生復雜的符

4、號，同時可以通過連接線形成基本的幾何形狀來創(chuàng)建區(qū)域。點、線和區(qū)域構(gòu)成了圖標設計的基本組合，這些組合通過與現(xiàn)實生活中的事物對應，就能形成表達一定含義的圖標。當然后續(xù)還有很多工作要做，例如渲染顏色，立體化等等，這樣才能成為一個真正有實用價值的圖標。下圖a-e展示了圖標的基本構(gòu)成以及演變過程。進一步，可以利用組合一些已有的基礎圖標來得到含義更為豐富的圖標。下面是幾個典型的例子。除此之外，為了獲得表示動作、運動以及方向，常用各種線條和箭頭。例如光線、聲波表達，又例如打開文件夾圖標中的箭頭的使用，都是很好的借鑒例子。更多的例子還有，表示運動的加速線，和抖動線等等。2.2.3 圖標的大小和顏色一般來說，圖

5、標應該是正方形的。常用的尺寸有32×32像素、48×48像素、64×64像素或者128×128像素。顏色方面，技術上可以支持16色或者256色，然而實際上，一個圖標最好只使用較少數(shù)量并且易于區(qū)分的顏色，這樣有助于用戶的記憶和識別。2.2.4 其他要點含義清晰，易懂是圖標設計的最重要也是最基本的要求。一些設計的原則要點可供參考：l 圖標要符合習慣。例如，搜索是一個放大鏡圖標，主頁是一間屋子，而一輛小推車代表商務網(wǎng)站的購物車。圖標作為一種語言，盡管沒有十分嚴格的規(guī)范，但許多約定俗成是必須遵守的。這樣才能地設計出圖標。已有的基本圖標是實現(xiàn)有效且快速設計圖標的基

6、本素材。l 圖標要盡量簡單。過多的圖標細節(jié)實際會對用戶造成困難。因此在表達方式、顏色、線條上不能過于復雜。l 圖標的含義要盡量明確。同樣一個放大鏡圖標，用在文件系統(tǒng)中表示的是搜索功能，但用在圖像處理軟件中卻是表達放大圖像的含義。因此圖標的含義實際需要在一個具體的情景（上下文）中確定。這一點跟文字語言中的多義詞是一樣的。一些必要的組合和改動能有效地明確圖標所表達的含義，例如用于放大圖像的圖標往往通過組合“放大鏡”和“+”號來進一步明確圖標說要表達的含義。作業(yè)（1） 分析你所用的手機軟件系統(tǒng)界面，列出你認為的系統(tǒng)中表達最好的圖標和表達最差的圖標（最好能用圖片說明），說明你的分析理由。個人認為手機系

7、統(tǒng)中表達最好的圖標是計算器圖標和電話圖，因為兩個圖標都能形容地表達也其功能，只要看一眼就知道他的功能所在。而表達最著的是照相機和快訊圖標，照相機圖標看不出他的功能，而快訊圖標則不知是什么東西，兩個都不能表達出其功能。（2） 假設現(xiàn)在要為某圖書館的讀者服務軟件界面設計兩套圖標方案，設計如下功能按鈕的圖標：l 用戶狀態(tài)信息查詢按鈕l 圖書檢索功能按鈕l 圖書續(xù)借功能按鈕l 缺書登記功能按鈕l 用戶意見反饋功能按鈕最后，請為該軟件設計一個標志性圖標，該圖標將顯示在程序的標題欄以及快捷方式等地方。圖標大小格式設定為32×32像素。提示：可以先收集各種圖標素材獲得啟發(fā)并構(gòu)思新圖標，但必須是自己原創(chuàng)的圖標。可以自行使用各類圖標編輯軟件設計圖標。例如：visual studio 2005中，新建Windows應用程序項目后，選擇菜單：項目->（項目名）屬性，查看“資源”標簽頁，選取“添加資源->添加新圖標”，進入圖標編輯環(huán)境進