UI設(shè)計(jì)基礎(chǔ)知識(shí)課件1目錄

UI簡(jiǎn)介

UI設(shè)計(jì)原則

UI設(shè)計(jì)的工作流程

UI設(shè)計(jì)的界面布局

UI設(shè)計(jì)的色彩搭配

網(wǎng)站UI

手機(jī)UI

軟件UI目錄UI簡(jiǎn)介UI設(shè)計(jì)原則UI設(shè)2UI簡(jiǎn)介

UI即User

Interface(用戶(hù)界面)的簡(jiǎn)稱(chēng)。UI設(shè)計(jì)是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品味，還要讓軟件的操作變得舒適、簡(jiǎn)單、自由，充分體現(xiàn)軟件的定位和特點(diǎn)。

UI設(shè)計(jì)發(fā)展至今可分為：PC端UI（網(wǎng)站和軟件）、移動(dòng)端UI以及游戲UI。3大領(lǐng)域看似相差不多，但就偏重點(diǎn)、設(shè)計(jì)思路、制作規(guī)則等實(shí)際操作上其實(shí)是大相徑庭的。我們將著重介紹網(wǎng)站UI、軟件UI和手機(jī)UI。UI簡(jiǎn)介 UI即UserInterface(用戶(hù)界面)的簡(jiǎn)31、個(gè)性化的視覺(jué)程現(xiàn)2、便捷的交互體驗(yàn)3、統(tǒng)一的整體風(fēng)格4、精致的細(xì)節(jié)訴求UI設(shè)計(jì)原則1、個(gè)性化的視覺(jué)程現(xiàn)UI設(shè)計(jì)原則4UI設(shè)計(jì)的工作流程

分析?

了解產(chǎn)品

的市場(chǎng)定

位、產(chǎn)品

定義、客

戶(hù)群體、

運(yùn)營(yíng)方式

等，提出

可用性設(shè)

計(jì)建議。

架構(gòu)?

制定交互

方式、操

作與跳轉(zhuǎn)

流程、結(jié)

構(gòu)、布局、

信息和其

他元素。

界面?

對(duì)前面所

有工作加

以設(shè)計(jì)，

色調(diào)、風(fēng)

格、界面、

窗口、圖

標(biāo)、皮膚

的表現(xiàn)是

最關(guān)鍵的。

輸出?

配合好開(kāi)

發(fā)人員完

成相關(guān)的

界面結(jié)合。

完善?

可用性的

循環(huán)研究、

用戶(hù)體驗(yàn)

回饋、測(cè)

試回饋，

UI人員把

可行性建

議進(jìn)行完

善。UI設(shè)計(jì)的工作流程 分析 架構(gòu) 界面 輸出 完善51.

界面構(gòu)成要素互聯(lián)網(wǎng)與傳統(tǒng)媒體最大的不同就在于除文字和圖像以外，還包含聲音、視頻和畫(huà)等新興多媒體元素，增加了網(wǎng)頁(yè)界面動(dòng)性。UI設(shè)計(jì)的界面布局1.界面構(gòu)成要素互聯(lián)網(wǎng)與傳統(tǒng)媒體最大的不同就在于除文字和圖6UI設(shè)計(jì)基礎(chǔ)知識(shí)課件7

文字元素作為網(wǎng)站內(nèi)容傳達(dá)的主體，有著其他任何元素?zé)o法取代的重要作用。首先是文字信息符合人類(lèi)的閱讀習(xí)慣，其次因?yàn)槲淖炙即嫒】臻g小，節(jié)省了下載和瀏覽時(shí)間。網(wǎng)頁(yè)中的文字主要包括標(biāo)題、信息、文字鏈接等形式。文字作為占據(jù)頁(yè)面重要比率的元素，同時(shí)又是信息重要載體，它的大小、字體、顏色和排布對(duì)頁(yè)面整體設(shè)計(jì)影響極大。以文字排布為主的網(wǎng)頁(yè)界面，只要文字排布得當(dāng)，版面同樣可以生動(dòng)活潑，分類(lèi)條例清晰，不會(huì)給人單調(diào)感覺(jué)。 文字元素作為網(wǎng)站內(nèi)容傳達(dá)的主體，有著其他任何元素?zé)o法取代的8UI設(shè)計(jì)基礎(chǔ)知識(shí)課件9網(wǎng)頁(yè)中常用的圖形格式包括JPG、GIF和BMP。圖形元素包括標(biāo)題、背景、主圖、鏈接圖標(biāo)四種。圖形往往能引起人們的注意，并激發(fā)閱讀興趣，合理的運(yùn)用圖形，可以生動(dòng)直觀、形象地表現(xiàn)設(shè)計(jì)主題。以圖像作為標(biāo)題和鏈接可以使網(wǎng)頁(yè)具有更好的視覺(jué)效果，配合文字增強(qiáng)生動(dòng)和形象性。

主圖與背景在裝飾性上小有不同，背景是襯托主題，主圖則是突出表現(xiàn)主題。主圖是整個(gè)網(wǎng)頁(yè)的視覺(jué)中心，可以為單調(diào)的文字信息增強(qiáng)活力，能給人強(qiáng)烈的視覺(jué)信息。網(wǎng)頁(yè)中常用的圖形格式包括JPG、GIF和BMP。圖形元素包括10網(wǎng)頁(yè)構(gòu)成中的多媒體元素主要包括音頻、視頻和動(dòng)畫(huà)。

這些是界面構(gòu)成中最吸引人的元素，好的多媒體元素不但可以增加網(wǎng)站的活力還可以有效的提高網(wǎng)站與瀏覽者之間的互動(dòng)交流。網(wǎng)頁(yè)構(gòu)成中的多媒體元素主要包括音頻、視頻和動(dòng)畫(huà)。 這些是界面112.

界面布局網(wǎng)頁(yè)設(shè)計(jì)源于平面設(shè)計(jì)但又與平面設(shè)計(jì)有所區(qū)別不同，相同的是在設(shè)計(jì)中多運(yùn)用平面構(gòu)成的基本原理，不同的是它的大小比較固定，傳載的媒體只限于電子顯示器，這樣就為設(shè)計(jì)者提出了更為苛刻的要求。UI設(shè)計(jì)的界面布局2.界面布局網(wǎng)頁(yè)設(shè)計(jì)源于平面設(shè)計(jì)但又與平面設(shè)計(jì)有所區(qū)別不同12電腦顯示器電腦顯示器13手機(jī)顯示器手機(jī)顯示器14UI設(shè)計(jì)基礎(chǔ)知識(shí)課件15平面的視覺(jué)影響力上強(qiáng)下弱，左強(qiáng)右弱，上部和中上部被稱(chēng)為“最佳視域”，在網(wǎng)頁(yè)設(shè)計(jì)中一些突出的信息，如主標(biāo)題、每天更新的內(nèi)容等通常都放在這個(gè)位置。平面的視覺(jué)影響力上強(qiáng)下弱，左強(qiáng)右弱，上部和中上部被稱(chēng)為“最佳16在電腦上對(duì)畫(huà)面進(jìn)行分割，確定好在什么地方布置什么欄目、大小等。粗略布局使色彩，LOGO，導(dǎo)航條，內(nèi)容圖片等一一實(shí)現(xiàn)。布局細(xì)化在網(wǎng)頁(yè)設(shè)計(jì)中同樣離不開(kāi)平面設(shè)計(jì)中最基本的點(diǎn)、線、面的運(yùn)用。點(diǎn)線面的運(yùn)用在電腦上對(duì)畫(huà)面進(jìn)行分割，粗略布局使色彩，LOGO，導(dǎo)航條，內(nèi)17UI設(shè)計(jì)的色彩搭配UI設(shè)計(jì)的色彩搭配18色彩的基礎(chǔ)知識(shí)色彩的基礎(chǔ)知識(shí)19冷暖色冷暖色20互補(bǔ)色、對(duì)比色、類(lèi)似色和臨近色互補(bǔ)色、對(duì)比色、類(lèi)似色和臨近色21色彩與心理情感色彩與心理情感22一個(gè)與項(xiàng)目相匹配的色彩方案，能夠引導(dǎo)用戶(hù)更好地使用網(wǎng)站，這是件很酷的事情。色彩有冷暖色之分，冷暖色的巧妙運(yùn)用可以讓網(wǎng)站產(chǎn)生意想不到的效果。色彩與人的心理感覺(jué)和情緒也有一定的關(guān)系，一般情況下，各種色彩給人的感覺(jué)是：紅色代表熱情、活潑、熱鬧、溫暖、幸福、吉祥；橙色代表光明、華麗、興奮、甜蜜、快樂(lè)；黃色代表明朗、愉快、高貴、希望；綠色代表新鮮、平靜、和平、柔和、安逸、青春；藍(lán)色代表深遠(yuǎn)、永恒、沉靜、理智、誠(chéng)實(shí)、寒冷；紫色代表優(yōu)雅、高貴、魅力、自傲；白色代表純潔、純真、樸素、神圣、明快；灰色代表憂郁、消極、謙虛、平凡、沉默、中庸、寂寞；黑色代表崇高、堅(jiān)實(shí)、嚴(yán)肅、剛健、粗莽。除了考慮界面設(shè)計(jì)本身的特點(diǎn)外，還要遵循一定的藝術(shù)規(guī)律，從而設(shè)計(jì)出色彩鮮明、性格獨(dú)特的網(wǎng)站。一個(gè)與項(xiàng)目相匹配的色彩方案，能夠引導(dǎo)用戶(hù)更好地使用網(wǎng)站，這是23色彩搭配要注意的問(wèn)題通過(guò)調(diào)整色彩的飽和度和透明度產(chǎn)生變化，使網(wǎng)站避免單調(diào)產(chǎn)生。使用單色例如綠色和藍(lán)色，紅色和黃色就互為鄰近色。采用鄰近色設(shè)計(jì)網(wǎng)頁(yè)可以使網(wǎng)頁(yè)避免色彩雜亂，易于達(dá)到頁(yè)面的和諧統(tǒng)一。使用領(lǐng)近色產(chǎn)生強(qiáng)烈的視覺(jué)效果，能夠使網(wǎng)站特色鮮明、重點(diǎn)突出。以一種顏色為主色調(diào)，對(duì)比色作為點(diǎn)綴，可以起到畫(huà)龍點(diǎn)睛的作用。使用對(duì)比色黑色是一種特殊的顏色，往往產(chǎn)生很強(qiáng)烈的藝術(shù)效果，黑色一般用來(lái)作背景色，與其它純度色彩搭配使用。黑色的使用一般采用素淡清雅的色彩，避免采用花紋復(fù)雜的圖片和純度很高的色彩作為背景色，同時(shí)背景色要與文字的色彩對(duì)比強(qiáng)烈一些。背景色的使用一般控制在三種色彩以?xún)?nèi)，通過(guò)調(diào)整色彩的各種屬性來(lái)產(chǎn)生變化。色彩的數(shù)量色彩搭配要注意的問(wèn)題通過(guò)調(diào)整色彩的飽和度和透明度產(chǎn)生變化，使24網(wǎng)站UI

網(wǎng)站UI

發(fā)展簡(jiǎn)

史設(shè)計(jì)細(xì)節(jié)的發(fā)

展網(wǎng)站UI

未來(lái)趨

勢(shì)和走

向網(wǎng)站設(shè)計(jì)注意

事項(xiàng)網(wǎng)站UI設(shè)計(jì)細(xì)網(wǎng)站UI網(wǎng)站設(shè)25網(wǎng)站UI發(fā)展簡(jiǎn)史

1991年，全球第一個(gè)網(wǎng)站誕生，網(wǎng)址為http://info.cern.ch。早期的網(wǎng)頁(yè)完全由文本構(gòu)成，只有一些小圖片和毫無(wú)布局科研的標(biāo)題與段落。接下來(lái)出現(xiàn)了表格布局，然后是Flash，最后是基于CSS的網(wǎng)頁(yè)設(shè)計(jì)。到目前為止，我們可以把網(wǎng)站建設(shè)的發(fā)展分為4個(gè)階段。這四個(gè)階段分別代表了互聯(lián)網(wǎng)技術(shù)的發(fā)展歷程。網(wǎng)站UI發(fā)展簡(jiǎn)史 1991年，全球第一個(gè)網(wǎng)站誕早期的網(wǎng)頁(yè)完全26第一

純靜態(tài)

代

網(wǎng)站第二

數(shù)據(jù)庫(kù)

代

管理第三

智能建

代

站智能可視化建

站第四

代第一純靜態(tài)第二數(shù)據(jù)庫(kù)第三智能建智能可27設(shè)計(jì)細(xì)節(jié)的發(fā)展早期的網(wǎng)頁(yè)完全由文本構(gòu)成，接下來(lái)出現(xiàn)了表格布局，圖文并茂的純靜態(tài)網(wǎng)站，然后是加入了Flash、視頻、音頻等多媒體動(dòng)畫(huà)的網(wǎng)站，最后是基于web2.0技術(shù)，用CSS設(shè)計(jì)出更具視覺(jué)沖擊力，但加載速度更快的網(wǎng)站。在這期間，文字、鏈接、圖片、按鈕、動(dòng)畫(huà)以及背景都發(fā)生了極大變化。設(shè)計(jì)細(xì)節(jié)的發(fā)展早期的網(wǎng)頁(yè)完全由文本構(gòu)成，接下來(lái)出現(xiàn)了表格布局28單一英文字體各個(gè)國(guó)家的文字文字

各種文字的上百種的字體單一英文各個(gè)國(guó)家文字的上百種29單一的文字鏈接圖文混排和按鈕鏈接鏈接

flash動(dòng)畫(huà)鏈接單一的文圖文混排接鏈接鏈接30圖片靜態(tài)的圖片GIF動(dòng)態(tài)圖片圖片靜態(tài)的圖片GIF動(dòng)態(tài)圖片31按鈕文字按鈕圖標(biāo)按鈕動(dòng)態(tài)按鈕按鈕文字按鈕圖標(biāo)按鈕動(dòng)態(tài)按鈕32文字、圖片GIF動(dòng)畫(huà)FLASH動(dòng)畫(huà)動(dòng)畫(huà)

3D動(dòng)畫(huà)和視頻文字、圖FLASH動(dòng)畫(huà)動(dòng)畫(huà)視頻33背景顏色背景圖片背景動(dòng)畫(huà)背景背景顏色背景圖片背景動(dòng)畫(huà)背景34

未來(lái)趨勢(shì)和走向

網(wǎng)站UI設(shè)計(jì)風(fēng)格從清新到復(fù)古，插畫(huà)手繪到擬真設(shè)計(jì)，無(wú)奇不有。無(wú)論是版面版式，還是設(shè)計(jì)元素，用標(biāo)新立異這個(gè)詞形容絕不為過(guò)。web2.0技術(shù)的支持，使得網(wǎng)站程序更加人性化，而設(shè)計(jì)上也更加追求感官化，網(wǎng)站UI設(shè)計(jì)將向以下的設(shè)計(jì)走向持續(xù)發(fā)展。

技術(shù)上1、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)2、全屏網(wǎng)頁(yè)設(shè)計(jì)3、滾動(dòng)設(shè)計(jì)

版面設(shè)計(jì)1、歐美簡(jiǎn)潔風(fēng)（扁平化）2、韓國(guó)絢麗風(fēng)3、中國(guó)風(fēng) 未來(lái)趨勢(shì)和走向 技術(shù)上 版面設(shè)計(jì)35響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)能夠適應(yīng)不同尺寸顯示屏的網(wǎng)頁(yè)是現(xiàn)在的潮流，是未來(lái)很長(zhǎng)一段時(shí)間的設(shè)計(jì)趨勢(shì)，那么響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)就是來(lái)解決這個(gè)問(wèn)題的。這種特別的開(kāi)發(fā)方式能保證網(wǎng)頁(yè)適應(yīng)不同的分辨率，讓網(wǎng)頁(yè)要素重組，使其無(wú)論在垂直的平板電腦還是智能手機(jī)上，都能達(dá)到最好的視覺(jué)效果。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)能夠適應(yīng)不同尺寸顯示屏的網(wǎng)頁(yè)是現(xiàn)在的潮流，是未36全屏網(wǎng)頁(yè)設(shè)計(jì)利用精心挑選設(shè)計(jì)的漂亮背景，加上合理的頁(yè)面布局，視覺(jué)沖擊力大可以很好的吸引觀者注意。主要以圖片展示為主，少量文字加上精美的排版使之變得更加吸引人。這個(gè)樣子的網(wǎng)站多用于攝影團(tuán)隊(duì)或個(gè)人作品集展示，雖然簡(jiǎn)單養(yǎng)眼，但是承載信息有限，公司部門(mén)的主頁(yè)很少見(jiàn)這樣的設(shè)計(jì)。全屏網(wǎng)頁(yè)設(shè)計(jì)利用精心挑選設(shè)計(jì)的漂亮背景，加上合理的頁(yè)面布局，37滾動(dòng)設(shè)計(jì)滾動(dòng)設(shè)計(jì)又可分為視差滾動(dòng)設(shè)計(jì)、滾動(dòng)偵測(cè)設(shè)計(jì)和無(wú)限滾動(dòng)模式（瀑布流）三種。視差滾動(dòng)是讓多層背景以不同速度滾動(dòng)，以形成一種3D立體的運(yùn)動(dòng)效果，給觀者帶來(lái)一種獨(dú)特的視覺(jué)感受。鼠標(biāo)滾輪的流暢體驗(yàn)，讓用戶(hù)在觀看此類(lèi)網(wǎng)站時(shí)有一種控制感，簡(jiǎn)單來(lái)說(shuō)這是有響應(yīng)的交互體驗(yàn)。

滾動(dòng)偵測(cè)網(wǎng)頁(yè)設(shè)計(jì)利用CSS將導(dǎo)航欄固定在網(wǎng)頁(yè)頂部、側(cè)面或底部，并將版面內(nèi)容按照導(dǎo)航順序垂直或橫向排布，使得用戶(hù)點(diǎn)擊相應(yīng)導(dǎo)航tab時(shí)頁(yè)面自動(dòng)滑到相應(yīng)頁(yè)面，而點(diǎn)擊內(nèi)容，導(dǎo)航也將隨之改變。這樣的網(wǎng)頁(yè)設(shè)計(jì)頁(yè)面基本不會(huì)跳轉(zhuǎn)，每一個(gè)tab所指向的頁(yè)面內(nèi)容也基本一屏顯示完整，所以在頁(yè)面內(nèi)容的呈現(xiàn)上會(huì)有所局限。無(wú)限滾動(dòng)模式（瀑布流）大大減少了分頁(yè)的數(shù)量，有一些網(wǎng)站內(nèi)容很多，但他們并沒(méi)有簡(jiǎn)單分頁(yè)，而是將那些內(nèi)容垂直排布，當(dāng)用戶(hù)縱向滾動(dòng)時(shí)，內(nèi)容會(huì)不斷更新好像永無(wú)止境。對(duì)于這類(lèi)信息量大，每日更新數(shù)據(jù)塊的網(wǎng)站是比較不錯(cuò)的方案。滾動(dòng)設(shè)計(jì)滾動(dòng)設(shè)計(jì)又可分為視差滾動(dòng)設(shè)計(jì)、滾動(dòng)偵測(cè)設(shè)計(jì)和無(wú)限滾動(dòng)38歐美簡(jiǎn)潔風(fēng)（扁平化）它提供了一種新的設(shè)計(jì)思維，設(shè)計(jì)僅僅采用二維元素，可以說(shuō)是去繁從簡(jiǎn)的設(shè)計(jì)美學(xué)，去掉所有裝飾性的設(shè)計(jì)——陰影、斜面、突起、漸變，拒絕特效，從圖片框到按鈕，再到導(dǎo)航欄都干脆有力，需要極力避免羽化、陰影這樣的特效，注重排版和色彩，可以說(shuō)是對(duì)之前所推崇的擬物化設(shè)計(jì)的顛覆。歐美簡(jiǎn)潔風(fēng)（扁平化）它提供了一種新的設(shè)計(jì)思維，設(shè)計(jì)僅僅采用二39韓國(guó)絢麗風(fēng)韓國(guó)的商業(yè)性網(wǎng)站很具代表性，色彩豐富獨(dú)特，但又不雜亂。韓國(guó)設(shè)計(jì)者運(yùn)用色彩非常得當(dāng)，給人的感覺(jué)要不是淡雅迷人，要不就是另類(lèi)大膽。網(wǎng)站的各個(gè)欄位在表達(dá)不同主題時(shí)，比較喜歡采用不同的色調(diào)。灰色是他們最傾向使用的顏色，因?yàn)榛疑m然顯得比較中庸，但能和任何色彩搭配，極大地改變色彩的韻味，使對(duì)比更強(qiáng)烈。其正文文字也大都采用灰色，局部則喜歡用色彩絢麗的色帶或色塊來(lái)區(qū)分。韓國(guó)絢麗風(fēng)韓國(guó)的商業(yè)性網(wǎng)站很具代表性，色彩豐富獨(dú)特，但又不雜40中國(guó)風(fēng)中國(guó)風(fēng)格的網(wǎng)站，因其氣勢(shì)磅礴，高貴典雅，獨(dú)具韻味而受到很多人的喜愛(ài)，近年來(lái)被大量應(yīng)用于傳統(tǒng)文化、歷史人文景點(diǎn)、地產(chǎn)項(xiàng)目等網(wǎng)站中。數(shù)千年的文明傳承下來(lái)，中國(guó)人有其獨(dú)特的構(gòu)圖審美。對(duì)稱(chēng)美是中國(guó)傳統(tǒng)美學(xué)中重要的一部分，網(wǎng)頁(yè)由于其特殊性，一般用到最多的是左右對(duì)稱(chēng)，再加上文字的豎排以及國(guó)畫(huà)留白的運(yùn)用，使得整個(gè)畫(huà)面有了平衡、和諧、莊重之美。中國(guó)風(fēng)中國(guó)風(fēng)格的網(wǎng)站，因其氣勢(shì)磅礴，高貴典雅，獨(dú)具韻味而受到41網(wǎng)站設(shè)計(jì)的注意事項(xiàng)網(wǎng)站設(shè)計(jì)的尺

寸Web命名規(guī)范網(wǎng)頁(yè)制作規(guī)范Web排版網(wǎng)站設(shè)計(jì)的注意事項(xiàng)網(wǎng)站設(shè)計(jì)的尺Web命名規(guī)范網(wǎng)頁(yè)制作規(guī)范We42網(wǎng)站設(shè)計(jì)尺寸

目前比較流行的電腦顯示器的尺寸為800*600、1024*768、1125*864、1280*720、1280*768、1280*960、1280*1024、1366*768、1680*1050、1920*1080，而目前主流設(shè)計(jì)網(wǎng)站頁(yè)面的寬度一般為950、1002、1190、1260、1900，設(shè)計(jì)寬度始終要比顯示器的實(shí)際大小窄20像素，而頁(yè)面的高度則可以根據(jù)內(nèi)容的多少而進(jìn)行調(diào)整，這為的是給右側(cè)的滾動(dòng)條留有一定的空間。網(wǎng)站設(shè)計(jì)尺寸 目前比較流行的電腦顯示器的尺寸為800*60043在圖上呈現(xiàn)文字Web命名規(guī)范文件命名的原則：以最少的字母達(dá)到最容易理解的意義。

一般文件及目錄命名規(guī)范：每一個(gè)目錄中應(yīng)該包含一個(gè)缺省的html文件，文件名統(tǒng)一用index.htm

，文件名稱(chēng)統(tǒng)一用小寫(xiě)的英文字母、數(shù)字和下劃線的組合，盡量按單詞的英語(yǔ)翻譯為名稱(chēng)。例如：aboutus(關(guān)于我們)。

多個(gè)同類(lèi)型文件使用英文字母加數(shù)字命名，字母和數(shù)字之間用_分隔。例如：news_01.hm。注意，數(shù)字位數(shù)與文件個(gè)數(shù)成正比，不夠的用0補(bǔ)齊。例如共有200條新聞，其中第18條命名為news_018.htm圖片的命名規(guī)范：名稱(chēng)分為頭尾兩兩部分，用下劃線隔開(kāi)。頭部分表示此圖片的大類(lèi)性質(zhì)。

涉及到交互行為的元素命名:

凡涉及交互行為的元素通常會(huì)有正常、懸停、點(diǎn)擊和已瀏覽等不同樣式，命名可參考以下規(guī)則:

鼠標(biāo)懸停:hover

，點(diǎn)擊：click

，已瀏覽：visited。如:搜索按鈕:btn-search、btn-search-hover、btn-search-visited在圖上呈現(xiàn)文字Web命名規(guī)范文件命名的原則：以最少的字母達(dá)到44網(wǎng)頁(yè)制作規(guī)范在圖上呈現(xiàn)文字形象設(shè)計(jì)規(guī)范：使用標(biāo)志（logo）標(biāo)準(zhǔn)色做為主體色，采用web安全色之內(nèi)的色彩。標(biāo)準(zhǔn)字體：原則上定義兩種，一種中文字體，一種英文字體（不包括文本內(nèi)容字體）內(nèi)容編輯規(guī)范：內(nèi)容必須遵守我國(guó)《計(jì)算機(jī)信息網(wǎng)絡(luò)國(guó)際聯(lián)網(wǎng)安全保護(hù)管理辦法》的規(guī)定。標(biāo)題力求簡(jiǎn)短、醒目、新穎、吸引人。正文杜絕錯(cuò)字、別字和自造字，簡(jiǎn)體版中不得夾雜繁體字，譯名要按我國(guó)規(guī)范。新技術(shù)使用規(guī)范

：兼容瀏覽器，保證下載速度，照顧最多數(shù)的用戶(hù)。導(dǎo)航規(guī)范：簡(jiǎn)單、清晰，建議不超過(guò)3層的鏈接。導(dǎo)航的文字要簡(jiǎn)明扼要。連續(xù)性頁(yè)面應(yīng)加入上一頁(yè)，下一頁(yè)按鈕，頁(yè)面過(guò)長(zhǎng)應(yīng)在底部加上go

top按鈕。網(wǎng)頁(yè)制作規(guī)范在圖上呈現(xiàn)文字形象設(shè)計(jì)規(guī)范：使用標(biāo)志（logo）45?文字或者透明Web排版?標(biāo)志是網(wǎng)站最重要

的部分之一，可使用

與主題色相反的顏色。在圖上呈現(xiàn)

選擇純度

度較低的背景，文字

用較為突出的亮色。?鏈接是網(wǎng)站中不可

缺少的，做了鏈接的

文字應(yīng)清晰，明了。?網(wǎng)頁(yè)標(biāo)題是網(wǎng)站的

指航標(biāo)，要清晰、明

了，層次分明。

網(wǎng)頁(yè)

鏈接網(wǎng)頁(yè)標(biāo)志網(wǎng)頁(yè)標(biāo)題網(wǎng)頁(yè)文字?文字或者透明Web排版?標(biāo)志是網(wǎng)站最重要在圖上呈現(xiàn)?鏈接是46手機(jī)

UI

手機(jī)UI

發(fā)展簡(jiǎn)

史設(shè)計(jì)風(fēng)格的發(fā)

展用戶(hù)界面發(fā)展

趨勢(shì)手機(jī)UI

手機(jī)UI

設(shè)計(jì)尺

寸設(shè)計(jì)規(guī)

范注意事

項(xiàng)手機(jī)UI設(shè)計(jì)風(fēng)手機(jī)UI設(shè)計(jì)規(guī)47手機(jī)UI發(fā)展簡(jiǎn)史從1983年第一部手機(jī)誕生以來(lái)，從最初的“大哥大”到蘋(píng)果多點(diǎn)觸控用戶(hù)界面，界面屏幕所占據(jù)手機(jī)的比例越來(lái)越大。在整個(gè)手機(jī)用戶(hù)界面中，容括屏幕圖像、觸控按鍵、文字等無(wú)形界面和按鈕、屏幕等有形界面。

手機(jī)ui設(shè)計(jì)是手機(jī)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)，手機(jī)UI設(shè)計(jì)一直被業(yè)界稱(chēng)為產(chǎn)品的“臉面”，好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品味，還要讓軟件的操作變得舒適、簡(jiǎn)單、自由，充分體現(xiàn)軟件的定位和特點(diǎn)，界面也從狹義的圖形界面發(fā)展到廣義的交互界面設(shè)計(jì)。下面，我們首先從智能手機(jī)系統(tǒng)的發(fā)展歷史開(kāi)始說(shuō)起，梳理一下交互設(shè)計(jì)的發(fā)展：手機(jī)UI發(fā)展簡(jiǎn)史從1983年第一部手機(jī)誕生以來(lái)，從最初的“大48設(shè)計(jì)風(fēng)格的發(fā)展

在蘋(píng)果一統(tǒng)高端智能手機(jī)市場(chǎng)的時(shí)期，喬布斯曾帶領(lǐng)蘋(píng)果的設(shè)計(jì)師團(tuán)隊(duì)打造了一個(gè)擬真化UI體驗(yàn)的傳奇，而隨著喬納森·

艾維操刀iOS

7，擬真化被蘋(píng)果拋棄，扁平化設(shè)計(jì)成為2013年移動(dòng)應(yīng)用平臺(tái)設(shè)計(jì)的潮流。設(shè)計(jì)風(fēng)格的發(fā)展 在蘋(píng)果一統(tǒng)高端智能手機(jī)市場(chǎng)的時(shí)期，喬布斯曾帶49擬真

扁

的設(shè)格。它始于2007年的喬布斯的手機(jī)革命，據(jù)蘋(píng)果公司內(nèi)部人士透露，也正是喬布斯把麻布材質(zhì)、木質(zhì)書(shū)架、實(shí)體書(shū)效果等諸多擬真元素帶到了設(shè)計(jì)當(dāng)中。蘋(píng)果公司先是將這種設(shè)計(jì)風(fēng)格其用到iOS的用戶(hù)界面設(shè)計(jì)上，然后擴(kuò)展到了OSX

Mountain

Lion桌面系統(tǒng)等其他平臺(tái)。在2011年喬布斯逝世后，蘋(píng)果動(dòng)蕩不斷，在原軟件設(shè)計(jì)主管斯科特·

福斯特離職后，設(shè)計(jì)師艾維被任命操刀iOS

7設(shè)計(jì)，他主張簡(jiǎn)潔的扁平風(fēng)格，擬真化設(shè)計(jì)逐漸淡出蘋(píng)果UI界面。擬真（

個(gè)擬真化UI體驗(yàn)的

）是

操

多

一種人們常在

維

（Flat7

設(shè)計(jì)，化被蘋(píng)

人認(rèn)為

擬真與扁平化的發(fā)展歷史

在蘋(píng)果一統(tǒng)高端智能手機(jī)市場(chǎng)的時(shí)期，喬布斯曾帶領(lǐng)蘋(píng)果

平化

計(jì)師團(tuán)隊(duì)打造了一

Skeuomorphism

傳奇，而隨著喬納森·

艾

扁平化

刀iOS

）

，擬真并不像許

果拋棄，

的，來(lái)源與德國(guó)公司Metro

AG商標(biāo)糾紛，更名為ModernUI，現(xiàn)今一般冠名“扁平化”）。在20世紀(jì)初，Hochschule

für

Gestaltung俗稱(chēng)包豪斯提出的“為建筑而生的設(shè)計(jì)學(xué)校”的主張，把工藝技術(shù)提高到與視覺(jué)藝術(shù)平等的位置，從而削弱傳統(tǒng)的等級(jí)劃分的工業(yè)設(shè)計(jì)的理念事實(shí)上就是扁平設(shè)計(jì)的開(kāi)始。后來(lái)歷經(jīng)簡(jiǎn)約（Simple）設(shè)計(jì)時(shí)代（20世紀(jì)初期）、波普（POP）設(shè)計(jì)時(shí)代（20世紀(jì)50年代）、極簡(jiǎn)主義（Minimal

Art）設(shè)計(jì)時(shí)代20。扁平設(shè)計(jì)一直在發(fā)展、變化。擬真50擬真與扁平化的界面特點(diǎn)和優(yōu)缺點(diǎn)

擬真特點(diǎn)界面：模擬真實(shí)物體的材質(zhì)、質(zhì)感、細(xì)節(jié)、光亮等。交互：人機(jī)交互也擬真化，模擬現(xiàn)實(shí)中的交互方式。優(yōu)點(diǎn)：界面令用戶(hù)感到熟悉，而且傳達(dá)了豐富的人性化的感情。缺點(diǎn)：過(guò)度追求設(shè)計(jì)會(huì)造成不必要的信息誤解和過(guò)載負(fù)擔(dān)，影響用戶(hù)體驗(yàn)。增加開(kāi)發(fā)者的負(fù)擔(dān)，與日趨簡(jiǎn)潔的硬件設(shè)備風(fēng)格背道而馳。

扁平化特點(diǎn)界面：去掉所有裝飾性的設(shè)計(jì)——陰影、斜面、突起、漸變，拒絕特效，從圖片框到按鈕，再到導(dǎo)航欄都極力避免羽化、陰影這樣的特效，注重排版和色彩。交互：去掉了冗余的界面和交互，而使用更直接的設(shè)計(jì)完成任務(wù)。優(yōu)點(diǎn)：界面和交互簡(jiǎn)約，信息更直觀，信息量更大。缺點(diǎn)：新用戶(hù)使用需先學(xué)習(xí)與適應(yīng)，且傳達(dá)的感情不豐富。擬真與扁平化的界面特點(diǎn)和優(yōu)缺點(diǎn) 擬真 扁平化51擬真與扁平化的設(shè)計(jì)要點(diǎn)擬真扁平化1、可用性2、熟悉3、美學(xué)/懷舊1、幾何擬物2、復(fù)色方案3、矩陣語(yǔ)言擬真與扁平化的設(shè)計(jì)要點(diǎn)擬真扁平化1、可用性1、幾何擬物52中國(guó)風(fēng)—UI設(shè)計(jì)的另一走向

隨著2006年“中國(guó)元素國(guó)際廣告創(chuàng)意大賽”的創(chuàng)辦，中國(guó)風(fēng)廣告在國(guó)內(nèi)外廣告界引起了極大反響，第一屆就收到來(lái)自世界40多個(gè)國(guó)家地區(qū)的作品，5000多份。

在2007年和2008年結(jié)合社會(huì)時(shí)事發(fā)起了分別以“中國(guó)元素-奧運(yùn)精神”和“盛世中國(guó)紅”為主題發(fā)起了第二屆和第三屆“中國(guó)元素國(guó)際廣告創(chuàng)意大賽”。

2009年，在

以“中國(guó)力量！”為主題的第四屆大賽也已經(jīng)成功舉辦。

伴隨著大賽的開(kāi)辦和進(jìn)行，在中國(guó)廣告界引領(lǐng)了一股風(fēng)潮，包括長(zhǎng)城獎(jiǎng)、艾菲廣告獎(jiǎng)在內(nèi)的很多其他廣告節(jié)的參賽作品和獲獎(jiǎng)作品中運(yùn)用"中國(guó)元素"的比例越來(lái)越大，中國(guó)風(fēng)廣告也得到了消費(fèi)者的認(rèn)同和歡迎。隨著這幾年古典文化越來(lái)越多的出現(xiàn)在我們?nèi)粘Ｉ钪校艽擞绊懀謾C(jī)Ui也將會(huì)慢慢的加入進(jìn)來(lái)，也算是一場(chǎng)中國(guó)古典文化的文藝復(fù)興吧！中國(guó)風(fēng)—UI設(shè)計(jì)的另一走向 隨著2006年“中國(guó)元素國(guó)際廣告53UI設(shè)計(jì)基礎(chǔ)知識(shí)課件54UI設(shè)計(jì)基礎(chǔ)知識(shí)課件55UI設(shè)計(jì)基礎(chǔ)知識(shí)課件56UI設(shè)計(jì)基礎(chǔ)知識(shí)課件57用戶(hù)界面發(fā)展趨勢(shì)扁平化擬真化中國(guó)風(fēng)用戶(hù)界面發(fā)展趨勢(shì)扁平化擬真化中國(guó)風(fēng)58手機(jī)UI設(shè)計(jì)尺寸

移動(dòng)端設(shè)備屏幕尺寸非常多，碎片化嚴(yán)重。尤其是Android，你會(huì)聽(tīng)到很多種分辨率：480x800,

480x854,

540x960,

720x1280,

1080x1920，而且還有傳說(shuō)中的2K屏。近年來(lái)iPhone的碎片化也加劇了：640x960,

640x1136,

750x1334,

1242x2208。手機(jī)尺寸在最新的規(guī)范網(wǎng)址中，官方為我們提供了有mdpi,hdpi,xhdpi

xxdhpi,xxxdhpi幾種分辨率的機(jī)器。手機(jī)UI設(shè)計(jì)尺寸 移動(dòng)端設(shè)備屏幕尺寸非常多，碎片化嚴(yán)重。尤其59各種分辨率從橫向上來(lái)看：mdpi：

360左右Hhdpi：480左右(1.5倍)xhdpi：720左右(2倍)xxdhpi：1080左右(3倍)xxxdhpi：1440左右(4倍)

這里需要說(shuō)明一點(diǎn)的是：設(shè)備的尺寸和分辨率沒(méi)有絕對(duì)的關(guān)系，不是說(shuō)屏幕大的手機(jī)就一定更清晰。我們?cè)賮?lái)看一組數(shù)據(jù):各種分辨率從橫向上來(lái)看：mdpi：360左右Hhdpi：460320*480屬于mdpi，480*800、480*854、540*960屬于hdpi，720*1280屬于xhdpi，1080*1920屬于xxhdpi。對(duì)于設(shè)計(jì)師，還需要關(guān)注屏幕長(zhǎng)寬比，才知道以怎樣的尺寸和比例來(lái)設(shè)定畫(huà)布。請(qǐng)看六種分辨等比例縮放圖：320*480屬于mdpi，480*800、480*854、61注意事項(xiàng)光線明暗細(xì)

微的把握學(xué)會(huì)在圖片上呈現(xiàn)文字黑白優(yōu)先保持干凈簡(jiǎn)潔做好強(qiáng)調(diào)和

弱化增加空白空

間只用適合的

字體注意事項(xiàng)光線明暗細(xì)黑白優(yōu)先保增加空白空62設(shè)計(jì)規(guī)范整體性、一致性個(gè)性化視覺(jué)元素的規(guī)范設(shè)計(jì)規(guī)范整體性、一致性個(gè)性化視覺(jué)元素的規(guī)范63軟件UI軟件UI

軟件UI發(fā)

展簡(jiǎn)史

未來(lái)趨勢(shì)

和走向設(shè)計(jì)細(xì)節(jié)注意事項(xiàng)設(shè)計(jì)技巧

設(shè)計(jì)原則軟件UI軟件UI 未來(lái)趨勢(shì)設(shè)計(jì)技巧64軟件UI發(fā)展簡(jiǎn)史2000年傳入國(guó)內(nèi)，國(guó)內(nèi)最早專(zhuān)業(yè)從事UI的公司還是我們的民族軟件——金山，據(jù)說(shuō)在2000年已成立人機(jī)界面組，只有2個(gè)人。2001年2月出版的《軟件創(chuàng)新之路》中文版，在技術(shù)專(zhuān)著角度強(qiáng)調(diào)了交互與界面的重要性，為UI概念被廣泛認(rèn)可做好了鋪墊。

2001年到2003年之間，國(guó)內(nèi)大小公司相繼設(shè)立UI職位。因?yàn)楫?dāng)時(shí)從事web

design非常不景氣，整體水平低下，市場(chǎng)環(huán)境糟糕。2003年隨著ChinaUI論壇的上線，此概念開(kāi)始在數(shù)字設(shè)計(jì)領(lǐng)域聲名鵲起。同年5月，由金山轉(zhuǎn)會(huì)騰訊的唐沐主導(dǎo)了QQ發(fā)展史上革命性的界面升級(jí)。耳目一新的QQ界面給粉絲們帶來(lái)了極大驚喜，在外觀和人性化方面做了較大改善。從此各大IT公司開(kāi)始重視UI，中國(guó)的PC端UI從此開(kāi)始正式走上舞臺(tái)。下面，我們看一下windows的發(fā)展史，來(lái)了解PC界面設(shè)計(jì)的發(fā)展變化。軟件UI發(fā)展簡(jiǎn)史2000年傳入國(guó)內(nèi)，國(guó)內(nèi)最早專(zhuān)業(yè)從事UI的公65Windows

1.0

的UI還完全是MS-DOS的風(fēng)格。1985年，微軟發(fā)布了Windows

1.0。這款系統(tǒng)雖然使用了圖形操作界面，不過(guò)看上去也只不過(guò)是給MS-DOS加了一張皮。Windows

1.0允許使用鼠標(biāo)，可以在程序之間進(jìn)行切換，可以調(diào)整窗口大小和最小化窗口。這套系統(tǒng)在當(dāng)時(shí)非常流行。Windows1.0的UI還完全是MS-DOS的風(fēng)格。166Windows

2.0發(fā)布于1987年。為我們帶來(lái)了第一版Microsoft

Word和Excel軟件。這個(gè)還是沒(méi)有脫離dos，已經(jīng)初具規(guī)模。Windows2.0發(fā)布于1987年。為我們帶來(lái)了第一版M671991年的Windows

3.1讓W(xué)indows成為IBM-PC的標(biāo)配系統(tǒng)，這也是最后一款看上去還殘存MS-DOS風(fēng)格的Windows