界面圖標(biāo)設(shè)計(jì)-課件

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

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

用戶(hù)界面設(shè)計(jì)的原則5．色彩的搭配和文字的可閱讀性顏色是影響用戶(hù)界面設(shè)計(jì)的原則6．和諧與一致性通過(guò)對(duì)軟件的各種元素（顏色、字體、圖形、空白等）使用一定的規(guī)格，使得設(shè)計(jì)良好的網(wǎng)頁(yè)看起來(lái)應(yīng)該是和諧的。或者說(shuō)，軟件的眾多單獨(dú)網(wǎng)頁(yè)應(yīng)該看起來(lái)像一個(gè)整體。軟件設(shè)計(jì)上要保持一致性，這又是很重要的一點(diǎn)。一致的結(jié)構(gòu)設(shè)計(jì)，可以讓瀏覽者對(duì)軟件的形象有深刻的記憶；一致的導(dǎo)航設(shè)計(jì)，可以讓瀏覽者迅速而又有效的進(jìn)入在軟件中自己所需要的部分；一致的操作設(shè)計(jì)，可以讓瀏覽者快速學(xué)會(huì)在整個(gè)軟件的各種功能操作。破壞這一原則，會(huì)誤導(dǎo)瀏覽者，并且讓整個(gè)軟件顯的雜亂無(wú)章，給人留下不良的印象。當(dāng)然，軟件設(shè)計(jì)的一致性并不意味著刻板和一成不變，有的軟件在不同欄目使用不同的風(fēng)格，或者隨著時(shí)間的推移不斷的改版軟件，會(huì)給瀏覽者帶來(lái)新鮮的感覺(jué)。用戶(hù)界面設(shè)計(jì)的原則6．和諧與一致性通過(guò)對(duì)軟件的各種元素（顏用戶(hù)界面設(shè)計(jì)的原則7．個(gè)性化

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