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

UI設(shè)計(jì)基礎(chǔ)知識(shí)UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件2021/3/261UI設(shè)計(jì)基礎(chǔ)知識(shí)UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件2021/3/2UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件2021/3/262UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件2021/3/262目錄

UI簡介

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

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

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

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

網(wǎng)站UI

手機(jī)UI

軟件UIUI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件2021/3/263目錄UI簡介UI設(shè)計(jì)原則UI設(shè)UI簡介

UI即User

Interface(用戶界面)的簡稱。UI設(shè)計(jì)是指對軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品味，還要讓軟件的操作變得舒適、簡單、自由，充分體現(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設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件2021/3/264UI簡介 UI即UserInterface(用戶界面)的簡1、個(gè)性化的視覺程現(xiàn)2、便捷的交互體驗(yàn)3、統(tǒng)一的整體風(fēng)格4、精致的細(xì)節(jié)訴求UI設(shè)計(jì)原則UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件2021/3/2651、個(gè)性化的視覺程現(xiàn)UI設(shè)計(jì)原則UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件UI設(shè)計(jì)的工作流程

分析?

了解產(chǎn)品

的市場定

位、產(chǎn)品

定義、客

戶群體、

運(yùn)營方式

等，提出

可用性設(shè)

計(jì)建議。

架構(gòu)?

制定交互

方式、操

作與跳轉(zhuǎn)

流程、結(jié)

構(gòu)、布局、

信息和其

他元素。

界面?

對前面所

有工作加

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

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

格、界面、

窗口、圖

標(biāo)、皮膚

的表現(xiàn)是

最關(guān)鍵的。

輸出?

配合好開

發(fā)人員完

成相關(guān)的

界面結(jié)合。

完善?

可用性的

循環(huán)研究、

用戶體驗(yàn)

回饋、測

試回饋，

UI人員把

可行性建

議進(jìn)行完

善。UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件2021/3/266UI設(shè)計(jì)的工作流程 分析 架構(gòu) 界面 輸出 完善U1.

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

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

主圖與背景在裝飾性上小有不同，背景是襯托主題，主圖則是突出表現(xiàn)主題。主圖是整個(gè)網(wǎng)頁的視覺中心，可以為單調(diào)的文字信息增強(qiáng)活力，能給人強(qiáng)烈的視覺信息。UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件2021/3/2611網(wǎng)頁中常用的圖形格式包括JPG、GIF和BMP。圖形元素包括網(wǎng)頁構(gòu)成中的多媒體元素主要包括音頻、視頻和動(dòng)畫。

這些是界面構(gòu)成中最吸引人的元素，好的多媒體元素不但可以增加網(wǎng)站的活力還可以有效的提高網(wǎng)站與瀏覽者之間的互動(dòng)交流。UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件2021/3/2612網(wǎng)頁構(gòu)成中的多媒體元素主要包括音頻、視頻和動(dòng)畫。 這些是界面2.

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

網(wǎng)站UI

發(fā)展簡

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

展網(wǎng)站UI

未來趨

勢和走

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

事項(xiàng)UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件2021/3/2626網(wǎng)站UI設(shè)計(jì)細(xì)網(wǎng)站UI網(wǎng)站設(shè)UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件20網(wǎng)站UI發(fā)展簡史

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

純靜態(tài)

代

網(wǎng)站第二

數(shù)據(jù)庫

代

管理第三

智能建

代

站智能可視化建

站第四

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

各種文字的上百種的字體UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件2021/3/2630單一英文各個(gè)國家文字的上百種UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件20單一的文字鏈接圖文混排和按鈕鏈接鏈接

flash動(dòng)畫鏈接UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件2021/3/2631單一的文圖文混排接鏈接鏈接UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件202圖片靜態(tài)的圖片GIF動(dòng)態(tài)圖片UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件2021/3/2632圖片靜態(tài)的圖片GIF動(dòng)態(tài)圖片UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件20按鈕文字按鈕圖標(biāo)按鈕動(dòng)態(tài)按鈕UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件2021/3/2633按鈕文字按鈕圖標(biāo)按鈕動(dòng)態(tài)按鈕UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件20文字、圖片GIF動(dòng)畫FLASH動(dòng)畫動(dòng)畫

3D動(dòng)畫和視頻UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件2021/3/2634文字、圖FLASH動(dòng)畫動(dòng)畫視頻UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件2背景顏色背景圖片背景動(dòng)畫背景UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件2021/3/2635背景顏色背景圖片背景動(dòng)畫背景UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件20

未來趨勢和走向

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

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

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

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

寸Web命名規(guī)范網(wǎng)頁制作規(guī)范Web排版UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件2021/3/2643網(wǎng)站設(shè)計(jì)的注意事項(xiàng)網(wǎng)站設(shè)計(jì)的尺Web命名規(guī)范網(wǎng)頁制作規(guī)范We網(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)站頁面的寬度一般為950、1002、1190、1260、1900，設(shè)計(jì)寬度始終要比顯示器的實(shí)際大小窄20像素，而頁面的高度則可以根據(jù)內(nèi)容的多少而進(jìn)行調(diào)整，這為的是給右側(cè)的滾動(dòng)條留有一定的空間。UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件2021/3/2644網(wǎng)站設(shè)計(jì)尺寸 目前比較流行的電腦顯示器的尺寸為800*600在圖上呈現(xiàn)文字Web命名規(guī)范文件命名的原則：以最少的字母達(dá)到最容易理解的意義。

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

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

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

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

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

鼠標(biāo)懸停:hover

，點(diǎn)擊：click

，已瀏覽：visited。如:搜索按鈕:btn-search、btn-search-hover、btn-search-visitedUI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件2021/3/2645在圖上呈現(xiàn)文字Web命名規(guī)范文件命名的原則：以最少的字母達(dá)到網(wǎng)頁制作規(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)容必須遵守我國《計(jì)算機(jī)信息網(wǎng)絡(luò)國際聯(lián)網(wǎng)安全保護(hù)管理辦法》的規(guī)定。標(biāo)題力求簡短、醒目、新穎、吸引人。正文杜絕錯(cuò)字、別字和自造字，簡體版中不得夾雜繁體字，譯名要按我國規(guī)范。新技術(shù)使用規(guī)范

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

top按鈕。UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件2021/3/2646網(wǎng)頁制作規(guī)范在圖上呈現(xiàn)文字形象設(shè)計(jì)規(guī)范：使用標(biāo)志（logo）?文字或者透明Web排版?標(biāo)志是網(wǎng)站最重要

的部分之一，可使用

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

選擇純度

度較低的背景，文字

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

缺少的，做了鏈接的

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

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

了，層次分明。

網(wǎng)頁

鏈接網(wǎng)頁標(biāo)志網(wǎng)頁標(biāo)題網(wǎng)頁文字UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件2021/3/2647?文字或者透明Web排版?標(biāo)志是網(wǎng)站最重要在圖上呈現(xiàn)?鏈接是手機(jī)

UI

手機(jī)UI

發(fā)展簡

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

展用戶界面發(fā)展

趨勢手機(jī)UI

手機(jī)UI

設(shè)計(jì)尺

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

范注意事

項(xiàng)UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件2021/3/2648手機(jī)UI設(shè)計(jì)風(fēng)手機(jī)UI設(shè)計(jì)規(guī)UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件2手機(jī)UI發(fā)展簡史從1983年第一部手機(jī)誕生以來，從最初的“大哥大”到蘋果多點(diǎn)觸控用戶界面，界面屏幕所占據(jù)手機(jī)的比例越來越大。在整個(gè)手機(jī)用戶界面中，容括屏幕圖像、觸控按鍵、文字等無形界面和按鈕、屏幕等有形界面。

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

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

艾維操刀iOS

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

扁

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

Mountain

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

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

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

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

）是

操

多

一種人們常在

維

（Flat7

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

人認(rèn)為

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

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

平化

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

Skeuomorphism

傳奇，而隨著喬納森·

艾

扁平化

刀iOS

）

，擬真并不像許

果拋棄，

的，來源與德國公司Metro

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

für

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

Art）設(shè)計(jì)時(shí)代20。扁平設(shè)計(jì)一直在發(fā)展、變化。UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件2021/3/2651擬真擬真與扁平化的界面特點(diǎn)和優(yōu)缺點(diǎn)

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

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

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

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

2009年，在

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

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

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

480x854,

540x960,

720x1280,

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

640x1136,

750x1334,

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

xxdhpi,xxxdhpi幾種分辨率的機(jī)器。UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件2021/3/2660手機(jī)UI設(shè)計(jì)尺寸 移動(dòng)端設(shè)備屏幕尺寸非常多，碎片化嚴(yán)重。尤其各種分辨率從橫向上來看：mdpi：

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

這里需要說明一點(diǎn)的是：設(shè)備的尺寸和分辨率沒有絕對的關(guān)系，不是說屏幕大的手機(jī)就一定更清晰。我們再來看一組數(shù)據(jù):UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件2021/3/2661各種分辨率從橫向上來看：mdpi：360左右Hhdpi：4320*480屬于mdpi，480*800、480*854、540*960屬于hdpi，720*1280屬于xhdpi，1080*1920屬于xxhdpi。對于設(shè)計(jì)師，還需要關(guān)注屏幕長寬比，才知道以怎樣的尺寸和比例來設(shè)定畫布。請看六種分辨等比例縮放圖：UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件2021/3/2662320*480屬于mdpi，480*800、480*854、注意事項(xiàng)光線明暗細(xì)

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

弱化增加空白空

間只用適合的

字體UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件2021/3/2663注意事項(xiàng)光線明暗細(xì)黑白優(yōu)先保增加空白空UI設(shè)計(jì)基礎(chǔ)知識(shí)pp設(shè)計(jì)規(guī)范整體性、一致性個(gè)性化視覺元素的規(guī)范UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件2021/3/2664設(shè)計(jì)規(guī)范整體性、一致性個(gè)性化視覺元素的規(guī)范UI設(shè)計(jì)基礎(chǔ)知識(shí)軟件UI軟件UI

軟件UI發(fā)

展簡史

未來趨勢

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

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

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

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

1.0

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

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

1.0允許使用鼠標(biāo)，可以在程序之間進(jìn)行切換，可以調(diào)整窗口大小和最小化窗口。這套系統(tǒng)在當(dāng)時(shí)非常流行。UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件2021/3/2667Windows1.0的UI還完全是MS-DOS的風(fēng)格。1Windows

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

Word和Excel軟件。這個(gè)還是沒有脫離dos，已經(jīng)初具規(guī)模。UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件2021/3/2668Windows2.0發(fā)布于1987年。為我們帶來了第一版M1991年的Windows

3.1讓W(xué)indows成為IBM-PC的標(biāo)配系統(tǒng)，這也是最后一款看上去還殘存MS-DOS風(fēng)格的Windows系統(tǒng)。UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件2021/3/26691991年的Windows3.1讓W(xué)indows成為IBMWindows

95讓1995年成為PC歷史上的一個(gè)里程碑。這套系統(tǒng)完全洗掉了MS-DOS的痕跡，整個(gè)界面煥然一新，帶來了在當(dāng)時(shí)猶如從科幻電影走出來的UI；IE瀏覽器，回收站，還有開始菜單這些元素成為Windows的經(jīng)典標(biāo)志。Windows

95也成為至今為止所有Windows系統(tǒng)的界面藍(lán)本。UI設(shè)計(jì)基礎(chǔ)知識(shí)ppt課件2021/3/2670Windows95讓1995年成為PC歷史上