用戶界面設計與配色方案課件

網(wǎng)頁用戶界面設計與配色方案張夢巧網(wǎng)頁用戶界面設計與配色方案張夢巧1用戶瀏覽網(wǎng)頁方式用戶瀏覽網(wǎng)頁方式瀏覽網(wǎng)頁就像看報紙，你只會看你要找的、關注的東西，以及吸引你的內(nèi)容用戶瀏覽網(wǎng)頁方式用戶瀏覽網(wǎng)頁方式2用戶瀏覽網(wǎng)頁方式比如：查找“十七大”相關內(nèi)容體育新聞吸引了你的興趣用戶瀏覽網(wǎng)頁方式比如：3Don’tMakeMeThink.用戶界面設計基本原則：簡單一目了然關注細節(jié)方便用戶操作遵循習慣用法保持一致性突出重點友好的用戶體驗Don’tMakeMeThink.用戶界面設計基本原則4信息查詢類：以實用功能為主，注重視覺元素的均衡排布，較少裝飾性的元 素，如Yahoo

大眾媒體類：新浪網(wǎng)新聞中心電子商務類：使瀏覽者在訪問時進行愉快的交流是設計的重點，要求既要具備 人們樂于接受的交互性，又要有吸引瀏覽者注意的頁面形式，如 當當書店

交流平臺類：以方便使用為主要特點，指示性強，易于理解，如BBS

網(wǎng)絡社區(qū)類：由于網(wǎng)絡社區(qū)通常不帶有商業(yè)性質(zhì)，因此它的界面設計可以根據(jù) 社區(qū)內(nèi)容充分發(fā)揮創(chuàng)造性，營造一個自由、舒適、愉快的氛圍。宣傳窗口類：從企業(yè)特有形象入手，充分表現(xiàn)企業(yè)文化特征，如Adidas網(wǎng)頁分類網(wǎng)頁分類5大型網(wǎng)站的特點信息量大 涵蓋面廣 結構層次多 業(yè)務邏輯復雜 廣告有條理、有主次地將龐大的信息群整合到一起層級菜單導航搜索分欄分區(qū)域布局大型網(wǎng)站的特點信息量大6網(wǎng)站主要布局1、“同”字型：

是一些大型網(wǎng)站首頁常用的類型，在網(wǎng)頁最上面是網(wǎng)站的標題以及BANNER廣告條，接下來就是網(wǎng)站的主要內(nèi)容，左右分列一些兩小條內(nèi)容，中間是主要部分，與左右一起羅列到底，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權聲明等。2、彎角型：

這種結構和“同”字型很相近，上面是標題及廣告橫幅，接下來的左側是一窄列鏈接等，右列是很寬的正文，下面也是一些網(wǎng)站的輔助信息。在這種類型中，一種很常見的類型是最上面是標題及廣告，左側是導航鏈接。一般用于網(wǎng)站的內(nèi)頁。3、上中下型：

上面是標題或廣告條一類的內(nèi)容，下面是正文，一些文章頁面或注冊頁面等就是這種類型。網(wǎng)站主要布局1、“同”字型：

是一些大型網(wǎng)站首頁常用的類型7網(wǎng)站主要布局4、左右框架型：

這是一種左右為分別兩頁的框架結構，一般左面是導航鏈接，有時最上面會有一個小的標題或標致，右面是正文。我們見到的大部分的大型論壇都是這種結構的，有一些企業(yè)網(wǎng)站也喜歡采用。這種類型結構非常清晰，一目了然。但是這種結構在使用框架時有個問題，即不容易被搜索引擎找到。如果考慮到這一點，盡量少用帶框架的頁面。5、整幅效果型

這種類型常被企業(yè)網(wǎng)站作為首頁，采用大幅圖片或FLASH動畫，在底部加一

"進入"按鈕。作為展示企業(yè)形象來說，這種頁面非常美觀，但是服務型網(wǎng)站盡可能不用這種方式，因為上網(wǎng)速度慢，性格比較急的人往往受不了等待。網(wǎng)站主要布局4、左右框架型：

這是一種左右為分別兩頁的框架8主頁設計——準備工作網(wǎng)站定位網(wǎng)頁的用戶，考慮潛在用戶網(wǎng)頁的主要功能、任務確定主要內(nèi)容主頁設計——準備工作網(wǎng)站定位9主頁的任務站點的ID和使命站點層次搜索導讀內(nèi)容更新友情鏈接快捷方式注冊讓用戶看到正在尋找的東西吸引用戶的精彩內(nèi)容告訴用戶開始的地方建立可信度和信任感主頁的任務站點的ID和使命讓用戶看到正在尋找的東西10主頁設計 建立清楚的視覺層次 把頁面劃分為明確定義的區(qū)域 色塊、分欄、標簽頁

另一個示例主頁設計 建立清楚的視覺層次11主頁的設計混亂中，不能忘記傳達整體形象主頁應該具有的作用：這是什么網(wǎng)站？網(wǎng)站上有什么？我能在這里做什么？為什么我應該在這里，而不是別的地方？主頁的設計混亂中，不能忘記12網(wǎng)頁設計的主要元素網(wǎng)站LOGO簡要的說明文字、口號這是什么網(wǎng)站？網(wǎng)站上有什么？我能在這里做什么？為什么我應該在這里，而不是別的地方？網(wǎng)頁設計的主要元素網(wǎng)站LOGO13網(wǎng)頁設計的主要元素導航欄幫助用戶找到想要的東西告訴用戶當前位置告訴用戶如何使用網(wǎng)站網(wǎng)頁設計的主要元素導航欄14網(wǎng)頁設計的主要元素導航欄持久導航頁面導航持久導航應該包括5個必要元素：站點ID返回首頁搜索欄欄目實用工具讓導航部分以一致或相似的外觀出現(xiàn)在同樣的位置：讓用戶確定自己的位置，仍然在網(wǎng)站上只需要了解一次即可為用戶提供方便保持風格一致網(wǎng)頁設計的主要元素導航欄15網(wǎng)頁設計的主要元素搜索欄網(wǎng)頁設計的主要元素搜索欄16網(wǎng)頁設計的主要元素圖片、動畫效果

圖片要好尤其宣傳類網(wǎng)站、注重界面主要內(nèi)容

確定網(wǎng)站的主要內(nèi)容，既能體現(xiàn)網(wǎng)站任務，風格，又不能沒有更新廣告 做好用戶體驗網(wǎng)頁設計的主要元素圖片、動畫效果17主頁設計主頁設計18主頁設計示例

阿里巴巴網(wǎng)站主頁設計示例19不好的用戶體驗1.超長的頁面下載時間2.無限制的使用flash及圖片3.網(wǎng)站頁面過長4.不友好的導航 不友好的導航是最影響用戶操作的，不能讓用記很方便的找到自己想到的內(nèi)容，用戶來到一個頁面不知如何返回上一頁，不知道當前頁面是在哪個欄目下的，這樣的網(wǎng)站很-可能用戶來了一次就不會再來了。

5.過期的信息不好的用戶體驗1.超長的頁面下載時間20不好的用戶體驗6.死連接或連接錯誤7.孤立的頁面8.頁面沒有視覺差異 頁面沒有視覺差異，頁面設計很“平”缺少“層次感”，缺少視覺沖擊力和亮點，或者視覺沖擊力突出的并不是網(wǎng)站的主體內(nèi)容 把一大堆信息鋪天蓋地的展示到瀏覽者的眼前，你認為他會記住多少？頁面設計要吸引并引導瀏覽者來觀看想推廣的內(nèi)容或產(chǎn)品，當然對網(wǎng)頁“層次感”的設計平不是簡單的。用一些純度高的顏色來實現(xiàn)，要根據(jù)頁面的環(huán)境及周邊元素綜合考慮不好的用戶體驗6.死連接或連接錯誤21不好的用戶體驗9.鏈連沒有標準的表現(xiàn)形式 如果是圖片加的連接要在圖片下標出“點擊圖片見大圖“"更多"10.惡意插件，惡意彈出窗口

11.浮動窗口廣告不能關閉12.欺騙用戶13.太深的鏈接路徑不好的用戶體驗9.鏈連沒有標準的表現(xiàn)形式22配色方案紅色系紅色的色感溫暖，性格剛烈而外向，是一種對人刺激性很強的顏色。紅色容易引起人的注意，也容易使人興奮、激動、緊張、沖動、還是一種容易造成人視覺疲勞的顏色。

在眾多顏色里，紅色是最鮮明生動的、最熱烈的顏色。因此紅色也是代表熱情的情感之色。鮮明紅色極容易吸引人們的目光。

配色方案紅色系23配色方案紫色系象征著女性化，代表著高貴和奢華、優(yōu)雅與魅力，也象征著神秘與莊重、神圣和浪漫。另一方面又有孤獨等意味。

紫色的明度在有彩色的色度中是最低的。紫色的低明度給人一種沉悶、神秘的感覺。在紫色中紅的成份較多時，顯得華麗和諧。紫色中加入少量的黑，沉重、傷感、恐怖、莊嚴的感覺。紫色中加入白，變得優(yōu)雅、嬌氣，并充滿女性的魅力。

紫色通常用于以女性為對象或以藝術作品介紹為主的站點，但很多大公司的站點中也喜歡使用包含神秘色彩的紫色，但都很少做大面積使用。

配色方案紫色系24配色方案橙色系

輕快、歡欣、收獲、溫馨、時尚的效果，是快樂、喜悅、能量的色彩。

在整個色譜里，橙色具有興奮度，是最耀眼的色彩。給人以華貴而溫暖，興奮而熱烈的感覺，也是令人振奮的顏色。具有健康、富有活力、勇敢自由等象征意義，能給人有莊嚴、尊貴、神秘等感覺。在網(wǎng)頁顏色里，橙色適用于視覺要求較高的時尚網(wǎng)站，屬于注目、芳香的顏色，也常被用于味覺較高的食品網(wǎng)站，是容易引起食欲的顏色。

配色方案橙色系25配色方案黑色系：

純度、色相、明度最低的非彩色。象征著力量、沉默、虛空，莊嚴肅穆，有時又意味著不吉祥和罪惡。黑色代表死亡、悲哀，別有一種變幻無常的感覺。 黑色能和許多色彩構成良好的對比調(diào)和關系，運用范圍很廣。 黑色是最有力的搭配色。 黑色也常用來表示英俊的男人。 黑白兩種顏色的搭配使用通常可以表現(xiàn)出都市化的感覺，常用于現(xiàn)代派頁面設計中

配色方案黑色系：26配色方案綠色系冷暖色之間，屬于較中庸的顏色，這樣使得綠色的性格最為平和、安穩(wěn)、大度、寬容。是一種柔順、恬靜、滿足、優(yōu)美、受歡迎之色。也是網(wǎng)頁中使用最為廣泛的顏色之一。

是自然之色，象征生命與希望、和平與安全、發(fā)展與生機、舒適與安寧、松弛與休息、自然與健康，有緩解眼部疲勞的作用。

經(jīng)常用于與自然、健康相關的站點。綠色還經(jīng)常用于一些公司的公關站點或教育站點。

配色方案綠色系27配色方案常用的顏色系列：藍色系列中性灰系列粉色系列黑色系列橙色系列綠色系列配色方案常用的顏色系列：28威軟俱樂部網(wǎng)站界面設計分析網(wǎng)站定位：威軟俱樂部屬于學院直屬的一個學生組織機構建站目的：主要用于對外宣傳，展示學院俱樂部風采，讓外界了解學生交流的平臺網(wǎng)站傳達的整體形象：俱樂部的精神

威軟俱樂部網(wǎng)站界面設計分析網(wǎng)站定位：29威軟俱樂部網(wǎng)站界面設計分析網(wǎng)站用戶定位：俱樂部成員學院及學校學生領導和老師家長公司人員以及任何相關的對俱樂部感興趣的人訪問途經(jīng)：學院主頁鏈接、搜索引擎調(diào)和眾口，又不乏創(chuàng)新風格威軟俱樂部網(wǎng)站界面設計分析網(wǎng)站用戶定位：30威軟俱樂部網(wǎng)站界面設計分析網(wǎng)站主要功能模塊：簡介章程歷屆成員項目展示交流平臺公告?zhèn)€人博客課余活動合作單位留言簿納新友情鏈接特點：信息量小更新內(nèi)容少、更新速度慢訪問量小結論：屬于宣傳網(wǎng)站類型，設計靈活突出俱樂部形象、精神有更新內(nèi)容威軟俱樂部網(wǎng)站界面設計分析網(wǎng)站主要功能模塊：特點：31威軟俱樂部網(wǎng)站界面設計分析 LOGO

口號 俱樂部精神： Thespiritoftheclub,namelypragmatism,cooperationandinnovation,fullymanifeststhedevelopmentgoalsofSOS,whichareinternationalization,industrialization,high-qualityandhigh-speed.

主要內(nèi)容項目展示簡介章程