界面圖標設計

界面圖標設計第1頁/共77頁界面設計是人與機器之間傳遞和交換信息的媒介，包括硬件界面和軟件界面，是計算機科學與心理學、設計藝術(shù)學、認知科學和人機工程學的交叉研究領(lǐng)域。近年來，隨著信息技術(shù)與計算機技術(shù)的迅速發(fā)展，網(wǎng)絡技術(shù)的突飛猛進，人機界面設計和開發(fā)已成為國際計算機界和設計界最為活躍的研究方向。什么是界面設計第2頁/共77頁界面設計的研究領(lǐng)域人機界面的定義、起源、發(fā)展、研究內(nèi)容及發(fā)展趨勢；人機界面設計中認知心理學、人機工程學、人機界面的藝術(shù)設計、色彩設計等；人機界面設計，硬件人機界面的設計風格、人文關(guān)懷等；軟件人機界面的形式與標準、軟件人機界面設計、Internet網(wǎng)頁界面設計、圖標設計等；人機界面設計評價與可用性測試；新交互技術(shù)及展望，介紹了多通道用戶界面、下一代人機界面展望及附錄。第3頁/共77頁什么是界面設計第4頁/共77頁什么是界面設計第5頁/共77頁什么是界面設計第6頁/共77頁什么是界面設計第7頁/共77頁用戶界面設計的原則軟件用戶界面（SoftwareUserInterface）是指軟件用于和用戶交流的外觀、部件和程序等等。如果你經(jīng)常上網(wǎng)的話，會看到很多軟件設計很樸素，看起來給人一種很舒服的感覺；有點軟件很有創(chuàng)意，能給人帶來意外的驚喜和視覺的沖擊；而相當多的軟件頁面上充斥著怪異的字體，花哨的色彩和圖片，給人網(wǎng)頁制作粗劣的感覺。軟件界面的設計，既要從外觀上進行創(chuàng)意以到達吸引眼球的目的，還要結(jié)合圖形和版面設計的相關(guān)原理，從而使得軟件設計變成了一門獨特的藝術(shù)。通常的講，企業(yè)軟件用戶界面的設計應遵循以下幾個基本原則：第8頁/共77頁用戶界面設計的原則1．用戶導向（Useroriented）原則設計網(wǎng)頁首先要明確到底誰是使用者，要站在用戶的觀點和立場上來考慮設計軟件。要作到這一點，必須要和用戶來溝通，了解他們的需求、目標、期望和偏好等。網(wǎng)頁的設計者要清楚，用戶之間差別很大，他們的能力各有不同。比如有的用戶可能會在視覺方面有欠缺（如色盲），對很多的顏色分辨不清；有的用戶的聽覺也會有障礙，對于軟件的語音提示反映遲鈍；而且相當一部分用戶的計算機使用經(jīng)驗很初級，對于復雜一點的操作會感覺到很費力。另外，用戶使用的計算機機器配置也是千差萬別，包括顯卡、聲卡、內(nèi)存、網(wǎng)速、操作系統(tǒng)以及瀏覽器等都會有不同。設計者如果忽視了這些差別，設計出的網(wǎng)頁在不同的機器上顯示就會造成混亂。第9頁/共77頁用戶界面設計的原則1．用戶導向（Useroriented）原則第10頁/共77頁用戶界面設計的原則2．KISS（KeepItSimpleAndStupid）原則KISS原則就是“KeepItSimpleAndStupid”的縮寫，簡潔和易于操作是網(wǎng)頁設計的最重要的原則。畢竟，軟件建設出來是用于普通網(wǎng)民來查閱信息和使用網(wǎng)絡服務。沒有必要在網(wǎng)頁上設置過多的操作，堆集上很多復雜和花哨的圖片。該原則一般的要求，網(wǎng)頁的下載不要超過10秒鐘（普通的撥號用戶56Kbps網(wǎng)速）；盡量使用文本鏈接，而減少大幅圖片和動畫的使用；操作設計盡量簡單，并且有明確的操作提示；軟件所有的內(nèi)容和服務都在顯眼處向用戶予以說明等。第11頁/共77頁用戶界面設計的原則2．KISS（KeepItSimpleAndStupid）原則第12頁/共77頁用戶界面設計的原則3．布局控制關(guān)于網(wǎng)頁排版布局方面，很多網(wǎng)頁設計者重視不夠，網(wǎng)頁排版設計的過于死板，甚至照抄他人。如果網(wǎng)頁的布局凌亂，僅僅把大量的信息堆集在頁面上，會干擾瀏覽者的閱讀。第13頁/共77頁用戶界面設計的原則3．布局控制第14頁/共77頁用戶界面設計的原則4．視覺平衡網(wǎng)頁設計時，也要各種元素（如圖形、文字、空白）都會有視覺作用。根據(jù)視覺原理，圖形與一塊文字相比較，圖形的視覺作用要大一些。所以，為了達到視覺平衡，在設計網(wǎng)頁時需要以更多的文字來平衡一幅圖片。另外，按照中國人的閱讀習慣是從左到右，從上到下，因此視覺平衡也要遵循這個這個道理。例如，你的很多的文字是采用左對齊〈Align=left〉，需要在網(wǎng)頁的右面加一些圖片或一些較明亮、較醒目的顏色。一般情況下，每張網(wǎng)頁都會設置一個頁眉部分和一個頁腳部分，頁眉部分常放置一些Banner廣告或?qū)Ш綏l，而頁腳部分通常放置聯(lián)系方式和版權(quán)信息等，頁眉和頁腳在設計上也要注重視覺平衡。同時，也決不能低估空白的價值。如果你的網(wǎng)頁上所顯示的信息非常密集，這樣不但不利于讀者閱讀，甚至會引起讀者反感，破壞該軟件的形象。在網(wǎng)頁設計上，適當增加一些空白，精煉你的網(wǎng)頁，使得頁面變的簡潔。第15頁/共77頁用戶界面設計的原則4．視覺平衡第16頁/共77頁用戶界面設計的原則4．視覺平衡第17頁/共77頁用戶界面設計的原則5．色彩的搭配和文字的可閱讀性

顏色是影響網(wǎng)頁的重要因素，不同的顏色對人的感覺有不同的影響，例如：紅色和橙色使人興奮并使得心跳加速；黃色使人聯(lián)想到陽光，是一種快活的顏色；黑顏色顯得比較莊重，考慮到你希望對瀏覽者產(chǎn)生什么影響，為網(wǎng)頁設計選擇合適的顏色（包括背景色、元素顏色、文字顏色、鏈節(jié)顏色等）。為方便閱讀軟件上的信息，可以參考報紙的編排方式將網(wǎng)頁的內(nèi)容分欄設計，甚至兩欄也要比一滿頁的視覺效果要好。另一種能夠提高文字可讀性的因素是所選擇的字體，通用的字體（Arial，CourierNew，Garamond，TimesNewRoman，中文宋體）最易閱讀，特殊字體用于標題效果較好，但是不適合正文。如果在整個頁面使用一些特殊字體（如Cloister，Gothic，Script，Westminster，華文彩云，華文行楷），這樣讀者閱讀起來感覺一定很糟糕。該類特殊字體如果在頁面上大量使用，會使得閱讀頗為費力，瀏覽者的眼睛很快就會疲勞，不得不轉(zhuǎn)移到其他頁面。

第18頁/共77頁用戶界面設計的原則6．和諧與一致性通過對軟件的各種元素（顏色、字體、圖形、空白等）使用一定的規(guī)格，使得設計良好的網(wǎng)頁看起來應該是和諧的?；蛘哒f，軟件的眾多單獨網(wǎng)頁應該看起來像一個整體。軟件設計上要保持一致性，這又是很重要的一點。一致的結(jié)構(gòu)設計，可以讓瀏覽者對軟件的形象有深刻的記憶；一致的導航設計，可以讓瀏覽者迅速而又有效的進入在軟件中自己所需要的部分；一致的操作設計，可以讓瀏覽者快速學會在整個軟件的各種功能操作。破壞這一原則，會誤導瀏覽者，并且讓整個軟件顯的雜亂無章，給人留下不良的印象。當然，軟件設計的一致性并不意味著刻板和一成不變，有的軟件在不同欄目使用不同的風格，或者隨著時間的推移不斷的改版軟件，會給瀏覽者帶來新鮮的感覺。第19頁/共77頁用戶界面設計的原則7．個性化

第20頁/共77頁界面設計的分類軟件界面設計手機界面設計播放器界面設計游戲界面設計系統(tǒng)界面設計UI界面設計家用電器界面設計第21頁/共77頁界面設計的分類軟件界面設計第22頁/共77頁界面設計的分類手機界面設計第23頁/共77頁界面設計的分類播放器界面設計第24頁/共77頁界面設計的分類游戲界面設計第25頁/共77頁界面設計的分類系統(tǒng)界面設計第26頁/共77頁界面設計的分類UI界面設計第27頁/共77頁界面設計的分類界面圖標設計：第28頁/共77頁界面設計的分類文化界面設計界面圖標設計：第29頁/共77頁界面設計的分類賣場圖標設計界面圖標設計：第30頁/共77頁課程作業(yè)1、自選內(nèi)容分別設計兩套不同風格主題的界面（包括背景和圖標）場景風格，模擬現(xiàn)實生活的場景，采取攝影，手繪或其他表現(xiàn)方式設計出場景化的多媒體界面（例圖）第31頁/共77頁課程作業(yè)1、自選內(nèi)容分別設計兩套不同風格主題的界面（包括背景和圖標）其中一套為個性化自我介紹的界面。場景風格，模擬現(xiàn)實生活的場景，采取攝影，手繪或其他表現(xiàn)方式設計出場景化的多媒體界面（例圖）2、界面背景要求：整體感強，色彩與圖形與圖標風格一致且有內(nèi)在聯(lián)系3、圖標要求：圖標與圖標之間保持一定的整體性，按鈕與連接內(nèi)容之間有內(nèi)在的呼應關(guān)系4、界面規(guī)格：1024X76872dpi5、作業(yè)說明：界面背景圖標6、評分標準：準確性趣味性藝術(shù)性7、交件形式：電腦稿件（圖標和綜合效果兩套）8、交件時間：課時內(nèi)完成第32頁/共77頁圖標設計：一、關(guān)于圖標定義：圖標設計從某個角度來說，圖標有點類似標志、徽標都是為了讓人們能夠被它吸引記住。第33頁/共77頁圖標設計：一、關(guān)于圖標2、圖標類型程序圖標:指的是那些能夠在桌面上單擊、選擇、移動、雙擊執(zhí)行命令的圖標，類似于“我的電腦”“回收站”等等。多數(shù)運用于（電腦、掌上電腦、智能手機、操作系統(tǒng)等）工具欄圖標：指的是那些位于工具欄，通過單擊選擇該工具，然后在畫面可以進一步執(zhí)行命令的圖標?！案袷剿ⅰ被爻贰啊白煮w加粗”等（多數(shù)運用于操作軟件等，常見的PS)按鈕圖標：那些位于面板上，形似現(xiàn)實生活中的按鈕。（常見的遙控器、觸摸屏）第34頁/共77頁圖標設計：程序圖標:指的是那些能夠在桌面上單擊、選擇、移動、雙擊執(zhí)行命令的圖標，類似于“我的電腦”“回收站”等等。多數(shù)運用于（電腦、掌上電腦、智能手機、操作系統(tǒng)等）第35頁/共77頁圖標設計：工具欄圖標：指的是那些位于工具欄，通過單擊選擇該工具，然后在畫面可以進一步執(zhí)行命令的圖標?！案袷剿ⅰ被爻贰啊白煮w加粗”等（多數(shù)運用于操作軟件等，常見的PS)按鈕圖標：那些位于面板上，形似現(xiàn)實生活中的按鈕。（常見的遙控器、觸摸屏）第36頁/共77頁圖標設計：圖標屬性：1、圖標尺寸：48*48、32*32、24*24、16*16像素一般設計都為正方形2、色深度：windows支持32位圖標。顏色是2的24次方加上一個8位alpha通道可以產(chǎn)生透明的效果。第37頁/共77頁圖標設計：圖標設計軟件：1、ps、illustrator、AxialisIconWorkshop(圖標編輯設計)等都可以，但是ps設計制作時需要運用像素繪圖的工具是一款功能強大的圖標設計工具。它被用來創(chuàng)建、提取、轉(zhuǎn)換、管理和發(fā)布Windows(R)圖標。通過它，你能創(chuàng)建、導入和保存所有的Windows(R)圖標(ICO)和圖標庫(ICL)。它支持新的帶Alpha通道圖像（a.k.a.平滑透明度）的WindowsXP圖標。在這個版本中，你甚至可以打開Macintosh(R)圖標并將其轉(zhuǎn)換為Windows(R)格式。AxialisIconWorkshop將許多的特殊功能完美的整合在一個工作區(qū)中。第38頁/共77頁圖標設計：圖標設計風格：1、水晶系列圖標設計第39頁/共77頁圖標設計：圖標設計風格：2、透明水晶風格第40頁/共77頁圖標設計：圖標設計風格：3、卡通風格第41頁/共77頁圖標設計：圖標設計風格：4、懷舊風格第42頁/共77頁圖標設計：圖標設計風格：5、馬里奧透明風格第43頁/共77頁圖標設計：圖標設計風格：6、創(chuàng)意風格第44頁/共77頁圖標設計：圖標設計風格：7、立體風格第45頁/共77頁圖標設計：圖標設計風格：8、立體風格第46頁/共77頁圖標設計：圖標設計風格：9、手繪卡通風格第47頁/共77頁圖標設計：圖標設計風格：10、可愛卡通風格第48頁/共77頁圖標設計：圖標設計注意點：1、構(gòu)思時利用發(fā)散性思維進行創(chuàng)意聯(lián)想2、創(chuàng)作時注意圖標設計的可識別性3、設計時注意圖標設計的一致性（比如光源一致性）4、圖標設計注意盡量避免文字的出現(xiàn)5、設計過程（首先：草稿繪圖，其次：電腦框架，再次：電腦上色）第49頁/共77頁移動設備界面設計：1、移動設備界面設計概況2、移動界面設計的特征3、移動設備界面設計與一般圖形化用戶界面設計的異同4、移動媒體基本界面的設計5、欣賞第50頁/共77頁移動設備界面設計：1、移動設備界面設計概況移動設備界面，主要指手機、PDA(個人掌上電腦）等移動設備的圖形UI界面，這個是我們接觸最為緊密的數(shù)字界面，也是使用最為廣泛的數(shù)字界面。手機的發(fā)展過程：1973年手機被發(fā)明，80年代初商用移動電話出現(xiàn)。第51頁/共77頁移動設備界面設計：手機的發(fā)展過程：1973年手機被發(fā)明，80年代初商用移動電話出現(xiàn)。戰(zhàn)地通訊設備第一部完全意義上的手機（無顯示屏）第52頁/共77頁移動設備界面設計：手機的發(fā)展過程：1973年手機被發(fā)明，80年代初商用移動電話出現(xiàn)。只有按鍵、聽筒、和話筒等硬件界面，是固定電話的延續(xù)。80年代末，帶有簡單顯示屏的手機出現(xiàn)了，但是只能是顯示一些數(shù)字和固定文字大哥大摩托羅拉3200第53頁/共77頁移動設備界面設計：手機的發(fā)展過程：1973年手機被發(fā)明，80年代初商用移動電話出現(xiàn)。只有按鍵、聽筒、和話筒等硬件界面，是固定電話的延續(xù)。80年代末，帶有簡單顯示屏的手機出現(xiàn)了，但是只能是顯示一些數(shù)字和固定文字移動設備尚未發(fā)展到圖形界面階段90年代后，手機開始完善基本通訊功能基礎上加入一些附加功能，比如電話簿、短信游戲等，但是顯示屏仍然是小屏幕、低分辨率、單色顯示、鈴聲單一、靠鍵盤輸入。第一款翻蓋手機保護按鍵（3-4）萬第54頁/共77頁移動設備界面設計：手機的發(fā)展過程：進入21世紀，移動設備依賴一個大爆發(fā)的發(fā)展，手機開始大屏幕、雙屏幕、彩屏等手機鈴聲效果也越來越好，播放MP3；輸入方式變?yōu)殒I盤、觸控、語音輸入并存；手功能也涵蓋了通訊、娛樂、協(xié)同工作、生活、學習等諸多方面，所謂的智能機。第55頁/共77頁移動設備界面設計：移動設備界面獨特特征：移動設備界面與圖形化用戶界面在特征上有許多相似之處，都是具有可視性、交互性、透明性、直接操作性，但是自身又有獨特性。1、顯示設備：常見手機屏幕分辨率96*65、96*96、128*96、128*128、160*160、160*128、176*144、220*176、240*176、320*240等。這么混亂的分辨率，無法設計通用性界面。2、輸入設備：低端產(chǎn)品使用按鍵作為輸入、高端采用按鍵與觸控筆結(jié)合，有的配備小規(guī)模的電腦鍵盤。因此移動設備我們就必須考慮產(chǎn)品的輸入特點(諾基亞E61）第56頁/共77頁移動設備界面設計：移動設備界面獨特特征：移動設備界面與圖形化用戶界面在特征上有許多相似之處，都是具有可視性、交互性、透明性、直接操作性，但是自身又有獨特性。3、交互方式：一般方式有圖像、聲音、震動輸入形式主要是按鍵和觸控筆操作，如今發(fā)展迅速諸如靠改變手持角度實現(xiàn)屏幕的變化，移動屏幕內(nèi)容和放大縮小功能。4、消費形態(tài)A、用途不同B、用戶細分和個性化（潮流型、商務型、娛樂型等）C、地域差異明顯第57頁/共77頁移動設備界面設計：移動設備界面與一般圖形化用戶界面設計的異同：1、為特殊的屏幕而設計：移動設備的屏幕小，分辨率低，也讓屏幕空間是寶貴的摩羯們元素的體量就不能過大，一方面，需要在有限的空間了表現(xiàn)界面元素，另一方面界面元素要承擔起語義的表達、易于操控、視覺美好的功能，界面設計要盡量讓用戶得打最大的可用屏幕空間，進入獨立操作窗口。第58頁/共77頁移動設備界面設計：移動設備界面與一般圖形化用戶界面設計的異同：2、為特殊操作方式設計：移動設備采用按鍵或者觸控筆配合來進行操作，界面設計應充分考慮這些操作方式的特點，找到最合適的方案。比如要選取一定的選項，如果是使用一個兩向的方向鍵，那么選項設計成滾動菜單比較有效，如果使用一個四向的方向鍵，那么選項設計成宮格式的圖標有效率，如果使用一個兩向的方向鍵去選擇宮格式圖標，用戶就會產(chǎn)生困惑。第59頁/共77頁移動設備界面設計：移動設備界面與一般圖形化用戶界面設計的異同：3、為特殊導航方式設計：在屏幕較小的情況下，移動設備界面的功能結(jié)構(gòu)往往采取單一樹形結(jié)構(gòu)的組織方式無法再各功能項中自由跳轉(zhuǎn)，往往要回到上級菜單重新選擇。為了盡可能改善這種情況，在導航上，應提供方便的返回功能；在同一級菜單中，盡量在一屏中顯示全部選項；各級菜單都有直觀明確的標題；在組織功能上，應合理將功能分級、歸納符合用戶思維習慣，并能對用戶起到正確的引導作用。第60頁/共77頁移動設備界面設計：移動設備界面與一般圖形化用戶界面設計的異同：4、為目標用戶進行個性化設計：5、與產(chǎn)品外觀相適應我們的移動設備界面有其特定的產(chǎn)品作為載體，圖形界面與產(chǎn)品外觀相互呼應。同一風格的界面設計與產(chǎn)品外觀相得益彰，構(gòu)成一個完美的整體。比如，一款金屬感高科技感的手機，界面設計成一種非常女性化的設計，那么給人感覺就是不倫不類。第61頁/共77頁移動設備界面設計：手機界面設計幾個要點：1、定制界面版式2、視覺效果3、視覺元素的設計第62頁/共77頁移動設備界面設計：手機界面設計幾個要點：1、定制界面版式A、iIdle（手機待機界面）、mainmenu（主菜單）、submenu（二級菜單）、thirdlevelMenu（三級菜單）第63頁/共77頁移動設備界面設計：手機界面設計幾個要點：1、定制界面版式B、界面構(gòu)成的基本單位狀態(tài)區(qū)標題區(qū)操作功能區(qū)公共導航區(qū)第64頁/共77頁移動設備界面設計：手機界面設計幾個要點：1、定制界面版式B、界面構(gòu)成的基本單位狀態(tài)區(qū)標題區(qū)操作功能區(qū)公共導航區(qū)表示手機目前運行狀態(tài)及事件的區(qū)域，可以包含信號、電池強度、運營商名稱。狀態(tài)區(qū)不是必須存在，可依據(jù)交互需求進行取舍。主要是LOGE、版本以及相關(guān)的圖文信息是軟件的核心部分，也是界面面積最大部分，包含列表、焦點、滾動條、圖標等不同元素不同層級的界面包含的元素不同，需要根據(jù)具體情況搭配使用。也稱之為軟鍵盤區(qū)域，它是對軟件操作進行宏觀控制區(qū)域，所見即所得，它可以保存當前結(jié)果、切換當前操作模塊、退出系統(tǒng)、實現(xiàn)對軟件的靈活操控第65頁/共77頁移動設備界面設計：手機界面設計幾個要點：2、視覺效果手機的視覺效果應該遵循給用戶舒適、生機與活力的原則，通過視覺感官刺激增加用戶的親和力，適應不同用戶的不同心理特征。第66頁/共77頁移動設備界面設計：手機界面設計幾個要點：2、視覺效果A、簡約明快型(適合色彩支持較少顏色的彩屏手機）基于大塊顏色和線條的組合方式，不乏大氣，簡約且精到、精彩。點線面基本元素的形狀構(gòu)成結(jié)合色彩的純凈搭配，干凈利落，給用戶帶來輕松的感受。第67頁/共77頁移動設備界面設計：手機界面設計幾個要點：2、視覺效果A、簡約明快型(適合色彩支持較少顏色的彩屏手機）在設計的過程中基于上述風格設計的思路，在視覺效果的設計上需要參考如下方法：1、結(jié)合界面圖形設計的隱喻性，圖標圖形盡量是間接的平面圖形，盡量使用像素化的表現(xiàn)形式2、展現(xiàn)圖形界面的精到之處，合理的使用線條和色彩的漸變，確保細節(jié)的完美體現(xiàn)3、把握界面設計整體色調(diào)的同時注意在圖標和線