UI設(shè)計基礎(chǔ)知識課件

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

UI簡介

UI設(shè)計原則

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

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

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

網(wǎng)站UI

手機UI

軟件UI目錄UI簡介UI設(shè)計原則UI設(shè)2UI簡介

UI即User

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

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

分析?

了解產(chǎn)品

的市場定

位、產(chǎn)品

定義、客

戶群體、

運營方式

等，提出

可用性設(shè)

計建議。

架構(gòu)?

制定交互

方式、操

作與跳轉(zhuǎn)

流程、結(jié)

構(gòu)、布局、

信息和其

他元素。

界面?

對前面所

有工作加

以設(shè)計，

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

格、界面、

窗口、圖

標、皮膚

的表現(xiàn)是

最關(guān)鍵的。

輸出?

配合好開

發(fā)人員完

成相關(guān)的

界面結(jié)合。

完善?

可用性的

循環(huán)研究、

用戶體驗

回饋、測

試回饋，

UI人員把

可行性建

議進行完

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

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

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

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

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

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

網(wǎng)站UI

發(fā)展簡

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

展網(wǎng)站UI

未來趨

勢和走

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

事項網(wǎng)站UI設(shè)計細網(wǎng)站UI網(wǎng)站設(shè)25網(wǎng)站UI發(fā)展簡史

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

純靜態(tài)

代

網(wǎng)站第二

數(shù)據(jù)庫

代

管理第三

智能建

代

站智能可視化建

站第四

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

各種文字的上百種的字體單一英文各個國家文字的上百種29單一的文字鏈接圖文混排和按鈕鏈接鏈接

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

3D動畫和視頻文字、圖FLASH動畫動畫視頻33背景顏色背景圖片背景動畫背景背景顏色背景圖片背景動畫背景34

未來趨勢和走向

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

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

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

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

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

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

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

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

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

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

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

鼠標懸停:hover

，點擊：click

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

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

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

的部分之一，可使用

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

選擇純度

度較低的背景，文字

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

缺少的，做了鏈接的

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

指航標，要清晰、明

了，層次分明。

網(wǎng)頁

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

UI

手機UI

發(fā)展簡

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

展用戶界面發(fā)展

趨勢手機UI

手機UI

設(shè)計尺

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

范注意事

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

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

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

艾維操刀iOS

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

扁

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

Mountain

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

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

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

個擬真化UI體驗的

）是

操

多

一種人們常在

維

（Flat7

設(shè)計，化被蘋

人認為

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

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

平化

計師團隊打造了一

Skeuomorphism

傳奇，而隨著喬納森·

艾

扁平化

刀iOS

）

，擬真并不像許

果拋棄，

的，來源與德國公司Metro

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

für

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

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

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

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

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

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

2009年，在

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

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

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

480x854,

540x960,

720x1280,

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

640x1136,

750x1334,

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

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

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

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

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

弱化增加空白空

間只用適合的

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

軟件UI發(fā)

展簡史

未來趨勢

和走向設(shè)計細節(jié)注意事項設(shè)計技巧

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

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

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

1.0

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

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

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

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

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

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

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

95也成為至今為止所有Windows系統(tǒng)的界面藍本。Windows95讓1995年成為PC歷史上的一個里程碑。69Windows

98界面設(shè)計看不出有什么大的改動只是功能上稍微有些改進。Windows98界面設(shè)計看不出有什么大的改動只是功能上稍702000年發(fā)布的Windows

ME基本上也是Windows

98的加強版，具備一些沒有很大突破性的新功能，這套系統(tǒng)的銷量并不好。因為大家都知道不久之后就會有Windows

XP。2000年發(fā)布的WindowsME基本上也是Windows71Windows

XP標志性的桌面。WindowsXP標志性的桌面。72Windows

Vista的半透明UI是這套系統(tǒng)最大的價值。2006年微軟發(fā)布了Windows

Vista，這套系統(tǒng)最終并沒有流行起來，人們寧愿選擇硬件要求不那么高的Windows

XP。Vista的真正價值可能是它的界面風(fēng)格。WindowsVista的半透明UI是這套系統(tǒng)最大的價值。73Windows

8將保留Windows的傳統(tǒng)操作界面，不過在這之上將會加入一層Metro

UI作為有利于觸控的界面。Windows8將保留Windows的傳統(tǒng)操作界面，不過在74未來趨勢和走向扁平化半扁平化水晶半透明中國風(fēng)未來趨勢和走向扁平化半扁平化水晶半透明中國風(fēng)75扁平化扁平化76半扁平化半扁平化77水晶半透明水晶半透明78中國風(fēng)中國風(fēng)79設(shè)計細則注意事項圖標按鈕字體留白設(shè)計細則注意事項圖標按鈕字體留白80軟件UI設(shè)計原則易用性規(guī)范性幫助設(shè)施合理性美觀與協(xié)調(diào)性菜單位置

設(shè)定獨特性快捷方式

組合安全性多窗口的應(yīng)用與系

統(tǒng)資源軟件UI設(shè)計原則易用性規(guī)范性幫助設(shè)施合理性美觀與協(xié)調(diào)性菜單位81軟件UI設(shè)計技巧暫時不可操作的菜單命令項一般要

屏蔽變灰建立動態(tài)菜單，提高軟件的靈活性正在起作用的菜單命令旁打上選中標記（√）生成彈出式菜單，增強軟件的可操

作性為命令選項增加快捷鍵

窗體設(shè)計用右指向的箭頭引出級

聯(lián)菜單

菜單設(shè)計對相關(guān)的命令用分隔條

進行分組照顧用戶的

感覺軟件UI設(shè)計技巧暫時不可操正在起作用為命令選項用右指向的對相82謝謝觀賞！謝謝觀賞！83UI設(shè)計基礎(chǔ)知識課件84目錄

UI簡介

UI設(shè)計原則

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

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

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

網(wǎng)站UI

手機UI

軟件UI目錄UI簡介UI設(shè)計原則UI設(shè)85UI簡介

UI即User

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

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

分析?

了解產(chǎn)品

的市場定

位、產(chǎn)品

定義、客

戶群體、

運營方式

等，提出

可用性設(shè)

計建議。

架構(gòu)?

制定交互

方式、操

作與跳轉(zhuǎn)

流程、結(jié)

構(gòu)、布局、

信息和其

他元素。

界面?

對前面所

有工作加

以設(shè)計，

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

格、界面、

窗口、圖

標、皮膚

的表現(xiàn)是

最關(guān)鍵的。

輸出?

配合好開

發(fā)人員完

成相關(guān)的

界面結(jié)合。

完善?

可用性的

循環(huán)研究、

用戶體驗

回饋、測

試回饋，

UI人員把

可行性建

議進行完

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

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

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

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

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

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

網(wǎng)站UI

發(fā)展簡

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

展網(wǎng)站UI

未來趨

勢和走

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

事項網(wǎng)站UI設(shè)計細網(wǎng)站UI網(wǎng)站設(shè)108網(wǎng)站UI發(fā)展簡史

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

純靜態(tài)

代

網(wǎng)站第二

數(shù)據(jù)庫

代

管理第三

智能建

代

站智能可視化建

站第四

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

各種文字的上百種的字體單一英文各個國家文字的上百種112單一的文字鏈接圖文混排和按鈕鏈接鏈接

flash動畫鏈接單一的文圖文混排接鏈接鏈接113圖片靜態(tài)的圖片GIF動態(tài)圖片圖片靜態(tài)的圖片GIF動態(tài)圖片114按鈕文字按鈕圖標按鈕動態(tài)按鈕按鈕文字按鈕圖標按鈕動態(tài)按鈕115文字、圖片GIF動畫FLASH動畫動畫

3D動畫和視頻文字、圖FLASH動畫動畫視頻116背景顏色背景圖片背景動畫背景背景顏色背景圖片背景動畫背景117

未來趨勢和走向

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

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

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

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

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

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

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

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

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

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

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

鼠標懸停:hover

，點擊：click

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

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

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

的部分之一，可使用

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

選擇純度

度較低的背景，文字

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

缺少的，做了鏈接的

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

指航標，要清晰、明

了，層次分明。

網(wǎng)頁

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

UI

手機UI

發(fā)展簡

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

展用戶界面發(fā)展

趨勢手機UI

手機UI

設(shè)計尺

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

范注意事

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

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

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

艾維操刀iOS

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

扁

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

Mountain

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

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

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

個擬真化UI體驗的

）是

操

多

一種人們常在

維

（Flat7

設(shè)計，化被蘋

人認為

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

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

平化

計師團隊打造了一

Skeuomorphism

傳奇，而隨著喬納森·

艾

扁平化

刀iOS

）

，擬真并不像許

果拋棄，

的，來源與德國公司Metro

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

für

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

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

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

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

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

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

2009年，在

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

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

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

480x854,

540x960,

720x1280,

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

640x1136,

750x1334,

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

xxdhpi,xxxdhpi幾種分辨率的機器。手機UI設(shè)計尺寸 移動端設(shè)備屏幕尺寸非常多，碎片化嚴重。尤其142各種分辨率從橫向上來看：mdpi：

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

這里需要說明一點的是：設(shè)備的尺寸和分辨率沒有絕對的關(guān)系，不是說屏幕大的手機就一定更清晰。我們再來看一組數(shù)據(jù):各種分辨率從橫向上來看：mdpi：360左右Hhdpi：4143320*480屬于mdpi，480*800、480*854、540*960屬于