UI設計基礎知識課件

UI設計基礎知識課件1目錄

UI簡介

UI設計原則

UI設計的工作流程

UI設計的界面布局

UI設計的色彩搭配

網(wǎng)站UI

手機UI

軟件UI目錄UI簡介UI設計原則UI設2UI簡介

UI即User

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

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

分析?

了解產(chǎn)品

的市場定

位、產(chǎn)品

定義、客

戶群體、

運營方式

等，提出

可用性設

計建議。

架構(gòu)?

制定交互

方式、操

作與跳轉(zhuǎn)

流程、結(jié)

構(gòu)、布局、

信息和其

他元素。

界面?

對前面所

有工作加

以設計，

色調(diào)、風

格、界面、

窗口、圖

標、皮膚

的表現(xiàn)是

最關鍵的。

輸出?

配合好開

發(fā)人員完

成相關的

界面結(jié)合。

完善?

可用性的

循環(huán)研究、

用戶體驗

回饋、測

試回饋，

UI人員把

可行性建

議進行完

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

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

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

網(wǎng)站UI

發(fā)展簡

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

展網(wǎng)站UI

未來趨

勢和走

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

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

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

純靜態(tài)

代

網(wǎng)站第二

數(shù)據(jù)庫

代

管理第三

智能建

代

站智能可視化建

站第四

代第一純靜態(tài)第二數(shù)據(jù)庫第三智能建智能可27設計細節(jié)的發(fā)展早期的網(wǎng)頁完全由文本構(gòu)成，接下來出現(xiàn)了表格布局，圖文并茂的純靜態(tài)網(wǎng)站，然后是加入了Flash、視頻、音頻等多媒體動畫的網(wǎng)站，最后是基于web2.0技術，用CSS設計出更具視覺沖擊力，但加載速度更快的網(wǎng)站。在這期間，文字、鏈接、圖片、按鈕、動畫以及背景都發(fā)生了極大變化。設計細節(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設計風格從清新到復古，插畫手繪到擬真設計，無奇不有。無論是版面版式，還是設計元素，用標新立異這個詞形容絕不為過。web2.0技術的支持，使得網(wǎng)站程序更加人性化，而設計上也更加追求感官化，網(wǎng)站UI設計將向以下的設計走向持續(xù)發(fā)展。

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

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

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

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

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

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

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

多個同類型文件使用英文字母加數(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)文字形象設計規(guī)范：使用標志（logo）標準色做為主體色，采用web安全色之內(nèi)的色彩。標準字體：原則上定義兩種，一種中文字體，一種英文字體（不包括文本內(nèi)容字體）內(nèi)容編輯規(guī)范：內(nèi)容必須遵守我國《計算機信息網(wǎng)絡國際聯(lián)網(wǎng)安全保護管理辦法》的規(guī)定。標題力求簡短、醒目、新穎、吸引人。正文杜絕錯字、別字和自造字，簡體版中不得夾雜繁體字，譯名要按我國規(guī)范。新技術使用規(guī)范

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

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

的部分之一，可使用

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

選擇純度

度較低的背景，文字

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

缺少的，做了鏈接的

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

指航標，要清晰、明

了，層次分明。

網(wǎng)頁

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

UI

手機UI

發(fā)展簡

史設計風格的發(fā)

展用戶界面發(fā)展

趨勢手機UI

手機UI

設計尺

寸設計規(guī)

范注意事

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

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

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

艾維操刀iOS

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

扁

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

Mountain

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

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

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

個擬真化UI體驗的

）是

操

多

一種人們常在

維

（Flat7

設計，化被蘋

人認為

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

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

平化

計師團隊打造了一

Skeuomorphism

傳奇，而隨著喬納森·

艾

扁平化

刀iOS

）

，擬真并不像許

果拋棄，

的，來源與德國公司Metro

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

für

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

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

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

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

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

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

2009年，在

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

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

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

480x854,

540x960,

720x1280,

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

640x1136,

750x1334,

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

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

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

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

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

弱化增加空白空

間只用適合的

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

軟件UI發(fā)

展簡史

未來趨勢

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

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

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

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

1.0

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

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

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

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

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

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

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

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

98界面設計看不出有什么大的改動只是功能上稍微有些改進。Windows98界面設計看不出有什么大的改動只是功能上稍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的真正價值可能是它的界面風格。WindowsVista的半透明UI是這套系統(tǒng)最大的價值。73Windows

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

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

設定獨特性快捷方式

組合安全性多窗口的應用與系

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

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

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

窗體設計用右指向的箭頭引出級

聯(lián)菜單

菜單設計對相關的命令用分隔條

進行分組照顧用戶的

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

UI簡介

UI設計原則

UI設計的工作流程

UI設計的界面布局

UI設計的色彩搭配

網(wǎng)站UI

手機UI

軟件UI目錄UI簡介UI設計原則UI設85UI簡介

UI即User

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

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

分析?

了解產(chǎn)品

的市場定

位、產(chǎn)品

定義、客

戶群體、

運營方式

等，提出

可用性設

計建議。

架構(gòu)?

制定交互

方式、操

作與跳轉(zhuǎn)

流程、結(jié)

構(gòu)、布局、

信息和其

他元素。

界面?

對前面所

有工作加

以設計，

色調(diào)、風

格、界面、

窗口、圖

標、皮膚

的表現(xiàn)是

最關鍵的。

輸出?

配合好開

發(fā)人員完

成相關的

界面結(jié)合。

完善?

可用性的

循環(huán)研究、

用戶體驗

回饋、測

試回饋，

UI人員把

可行性建

議進行完

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

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

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

網(wǎng)站UI

發(fā)展簡

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

展網(wǎng)站UI

未來趨

勢和走

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

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

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

純靜態(tài)

代

網(wǎng)站第二

數(shù)據(jù)庫

代

管理第三

智能建

代

站智能可視化建

站第四

代第一純靜態(tài)第二數(shù)據(jù)庫第三智能建智能可110設計細節(jié)的發(fā)展早期的網(wǎng)頁完全由文本構(gòu)成，接下來出現(xiàn)了表格布局，圖文并茂的純靜態(tài)網(wǎng)站，然后是加入了Flash、視頻、音頻等多媒體動畫的網(wǎng)站，最后是基于web2.0技術，用CSS設計出更具視覺沖擊力，但加載速度更快的網(wǎng)站。在這期間，文字、鏈接、圖片、按鈕、動畫以及背景都發(fā)生了極大變化。設計細節(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設計風格從清新到復古，插畫手繪到擬真設計，無奇不有。無論是版面版式，還是設計元素，用標新立異這個詞形容絕不為過。web2.0技術的支持，使得網(wǎng)站程序更加人性化，而設計上也更加追求感官化，網(wǎng)站UI設計將向以下的設計走向持續(xù)發(fā)展。

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

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

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

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

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

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

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

多個同類型文件使用英文字母加數(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)文字形象設計規(guī)范：使用標志（logo）標準色做為主體色，采用web安全色之內(nèi)的色彩。標準字體：原則上定義兩種，一種中文字體，一種英文字體（不包括文本內(nèi)容字體）內(nèi)容編輯規(guī)范：內(nèi)容必須遵守我國《計算機信息網(wǎng)絡國際聯(lián)網(wǎng)安全保護管理辦法》的規(guī)定。標題力求簡短、醒目、新穎、吸引人。正文杜絕錯字、別字和自造字，簡體版中不得夾雜繁體字，譯名要按我國規(guī)范。新技術使用規(guī)范

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

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

的部分之一，可使用

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

選擇純度

度較低的背景，文字

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

缺少的，做了鏈接的

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

指航標，要清晰、明

了，層次分明。

網(wǎng)頁

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

UI

手機UI

發(fā)展簡

史設計風格的發(fā)

展用戶界面發(fā)展

趨勢手機UI

手機UI

設計尺

寸設計規(guī)

范注意事

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

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

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

艾維操刀iOS

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

扁

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

Mountain

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

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

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

個擬真化UI體驗的

）是

操

多

一種人們常在

維

（Flat7

設計，化被蘋

人認為

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

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

平化

計師團隊打造了一

Skeuomorphism

傳奇，而隨著喬納森·

艾

扁平化

刀iOS

）

，擬真并不像許

果拋棄，

的，來源與德國公司Metro

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

für

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

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

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

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

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

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

2009年，在

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

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

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

480x854,

540x960,

720x1280,

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

640x1136,

750x1334,

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

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

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

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