用戶界面設(shè)計(jì)與配色方案PPT課件

. 1、網(wǎng)頁用戶的界面設(shè)計(jì)和配色方案，張夢(mèng)巧，2、用戶瀏覽網(wǎng)頁的方式，用戶瀏覽網(wǎng)頁的方式，就像看報(bào)紙一樣，只能看到你正在尋找的、關(guān)注的以及吸引你的內(nèi)容。、3、使用者瀏覽網(wǎng)頁的方式，例如尋找十七大相關(guān)內(nèi)容的體育新聞，會(huì)吸引您的興趣。 4、dontmakemethink .用戶界面設(shè)計(jì)的基本原則：簡(jiǎn)單地著眼于細(xì)節(jié)，用戶操作可以按照慣用方法保持一致性，保持重點(diǎn)友好的用戶體驗(yàn)5、信息查詢類別：以實(shí)用功能為主，注重視覺要素的平衡，裝飾要素少， 雅虎大眾媒體類：新浪網(wǎng)絡(luò)新聞中心電子商務(wù)類：讀者在訪問時(shí)進(jìn)行愉快的交流是設(shè)計(jì)的重點(diǎn)人們喜歡接受的互動(dòng)性，尋求引起讀者關(guān)注的網(wǎng)頁形式。 比如書店的交流平臺(tái)類：以使用方便為主要特征，指示性強(qiáng)，易于理解。 例如，BBS網(wǎng)絡(luò)社區(qū)類：因?yàn)榫W(wǎng)絡(luò)社區(qū)沒有商業(yè)性質(zhì)，其接口設(shè)計(jì)可以根據(jù)社區(qū)內(nèi)容發(fā)揮創(chuàng)意，創(chuàng)造自由、舒適、愉快的氛圍。 宣傳窗口類：從企業(yè)特有形象開始，企業(yè)文化特征如阿迪達(dá)斯、網(wǎng)頁分類、6、大型網(wǎng)站特征、信息量大量復(fù)蓋的廣告結(jié)構(gòu)層次多業(yè)務(wù)邏輯復(fù)雜廣告十分齊全，主要集中了巨大信息群的層次菜單導(dǎo)航檢索區(qū)域?qū)泳W(wǎng)站的主要布局，1，同字體：在一些大型網(wǎng)站的主頁中經(jīng)常使用的網(wǎng)頁頂部是網(wǎng)站的標(biāo)題和BANNER廣告欄，然后是網(wǎng)站的主要內(nèi)容，左右有幾個(gè)小項(xiàng)目2、角度型：這種結(jié)構(gòu)接近“同”字形，上面是標(biāo)題和廣告橫幅，下面的左側(cè)是窄列的鏈接等，右邊的列是寬正文，下面也是一些網(wǎng)站的輔助信息。 在此類型中，標(biāo)題和廣告位于頂部，導(dǎo)航鏈接位于左側(cè)。 它通常用于網(wǎng)站的內(nèi)部頁面。 3、上中下型：上面是標(biāo)題和廣告那樣的內(nèi)容，下面是正文，一部分報(bào)道頁面和登錄頁面等就是這種類型。8，網(wǎng)站的主要布局，4，左右框架類型：這是左右分別為兩頁的框架結(jié)構(gòu)，一般左邊是導(dǎo)航鏈接，頂部有小的標(biāo)題和標(biāo)題，右邊是正文。 我們看到的大部分大型論壇都是這樣的結(jié)構(gòu)，一些企業(yè)網(wǎng)站也喜歡采用。 這種類型的結(jié)構(gòu)非常清楚，一目了然。 然而，在使用框架時(shí)，這種結(jié)構(gòu)存在搜索引擎難以被發(fā)現(xiàn)的問題。 考慮到這一點(diǎn)，盡量不要使用帶框架的頁面。 5、整體效果型這種類型，以企業(yè)的網(wǎng)站為主頁，采用大照片和FLASH動(dòng)畫，大多在底部安裝“前進(jìn)”按鈕。 為了展示企業(yè)的形象，這個(gè)頁面非常漂亮，但是服務(wù)型網(wǎng)站盡量不使用。 因?yàn)榫W(wǎng)速慢，性格急躁的人等不及。9、準(zhǔn)備主頁設(shè)計(jì)、在網(wǎng)站上查找網(wǎng)頁的用戶、潛在用戶的主要網(wǎng)頁功能、考慮任務(wù)確定主要內(nèi)容10、在主頁任務(wù)、站點(diǎn)ID和任務(wù)站點(diǎn)層次更新搜索指導(dǎo)內(nèi)容友誼鏈接簡(jiǎn)短11、主頁設(shè)計(jì)建立清晰的視覺水平，將頁面分為區(qū)域顏色區(qū)塊、區(qū)塊和頁簽頁面的其他范例，分別定義清晰的區(qū)塊、區(qū)塊和頁簽頁面，讓使用者的精彩內(nèi)容在使用者開始尋找的地方建立信任度和信任度網(wǎng)站上有什么？我在這里能做什么？為什么我應(yīng)該在這里而不是在別的地方？13，網(wǎng)站設(shè)計(jì)的主要要素，網(wǎng)站標(biāo)志的簡(jiǎn)要說明，口號(hào)是什么？ 網(wǎng)站上有什么？我在這里能做什么？為什么我應(yīng)該在這里而不是在別的地方？ 14、網(wǎng)頁設(shè)計(jì)的主要元素，導(dǎo)航欄應(yīng)找到用戶想要的內(nèi)容，告知用戶當(dāng)前位置，網(wǎng)頁設(shè)計(jì)的主要元素，導(dǎo)航欄持久性導(dǎo)航頁面持久性導(dǎo)航應(yīng)包含五個(gè)必要元素。 站點(diǎn)ID返回到主頁搜索欄的實(shí)用程序可以導(dǎo)航部分匹配或以類似的外觀出現(xiàn)在同一位置： 16，web設(shè)計(jì)的主要元素，用戶可以確定自己的位置，也可以在站點(diǎn)上，只需要了解一次，就能使用戶保持樣式的一致性網(wǎng)站設(shè)計(jì)的主要要素，照片，動(dòng)畫效果照片特別注重宣傳類網(wǎng)站，界面的主要內(nèi)容，確定網(wǎng)站的主要內(nèi)容，表現(xiàn)網(wǎng)站的任務(wù)，風(fēng)格，廣告更新，用戶體驗(yàn)，18，網(wǎng)頁設(shè)計(jì)，19主頁設(shè)計(jì)阿里巴巴網(wǎng)站，20，不好的用戶體驗(yàn)，1 .長頁面下載時(shí)間2 .無限使用flash和圖片3 .長頁面4 .不友好的導(dǎo)航對(duì)用戶的操作最有影響，用筆記找不到自己的想法，用戶來頁面怎么5 .過期的信息，21，壞的用戶體驗(yàn)，6 .死亡聯(lián)系和連接錯(cuò)誤7 .孤立的頁面8 .頁面沒有視覺上的差異，頁面設(shè)計(jì)缺乏“水平感”，缺乏視覺上的沖擊力和亮點(diǎn)，或者強(qiáng)調(diào)視覺上的沖擊力是網(wǎng)站內(nèi)容在讀者眼前頁面設(shè)計(jì)必須吸引讀者，引導(dǎo)他們觀看想要推進(jìn)的內(nèi)容和產(chǎn)品。 當(dāng)然，頁面的“層次感”設(shè)計(jì)水平并不簡(jiǎn)單。 要以多種高純度的顏色實(shí)現(xiàn)，必須綜合考慮頁面環(huán)境和外圍元素，22、不良的用戶體驗(yàn)，9 .如果鏈沒有標(biāo)準(zhǔn)的表現(xiàn)形式，則附加在圖像上的連接是“點(diǎn)擊圖像“更多”10 .惡意插件， 惡意彈出窗口11 .浮動(dòng)窗口廣告不關(guān)閉，12 .欺騙不了用戶，13 .深鏈接路徑，23，配色方案，紅色系顏色溫暖，性格剛健外向，是對(duì)人刺激性強(qiáng)的顏色。 紅色容易引起人的注意，也是容易引起人興奮、興奮、緊張、興奮、視覺疲勞的顏色。 在許多顏色中，紅色是最鮮艷、最生動(dòng)、最熱烈的顏色。 紅色也是表示激情情緒的顏色。 鮮艷的紅色容易吸引人們的眼睛。 24、配色方案、紫色系象征女性化，象征高貴與奢侈、優(yōu)雅與魅力，也象征神秘與莊重、神圣與浪漫。 另一方面也有孤獨(dú)等意思。 紫色的亮度是彩色飽和度中最低的。 紫色的低亮度給人一種無聊而神秘的感覺。 紫色中紅色成分多，華麗和諧。 紫色加少量黑色，沉重，悲傷，恐懼，莊嚴(yán)。 在紫色中加入白色，優(yōu)雅甜美，充滿女性魅力。紫色多用于以女性為對(duì)象，以藝術(shù)作品的介紹為中心的網(wǎng)站，但是在很多大公司的網(wǎng)站中，含有神秘色彩的紫色是最受歡迎的，但是很少在大面積上使用。25，配色方案，橙色系是輕快，喜悅，收獲，溫暖，時(shí)尚效果，喜悅，能量的色彩。 色譜中橙色有興奮度，是最亮的顏色。 華貴而溫暖、興奮而給人熱烈的感覺，也是令人振奮的顏色。 具有健康、活力、勇敢自由等象征意義，給人以莊嚴(yán)、尊大、神秘等感覺。 在網(wǎng)站顏色中，橙色適用于視覺要求高的時(shí)尚網(wǎng)站，是關(guān)注、香味的顏色，也常用于味覺高的食品網(wǎng)站，是容易引起食欲的顏色。 26、配色方案、黑色系：純度、色相、亮度最低無彩色。 象征力量、沉默、虛空，莊嚴(yán)肅然，有時(shí)意味著不吉和罪惡。 黑色代表死亡和悲傷，不要有反復(fù)無常的感覺。 黑色與多種顏色構(gòu)成良好的對(duì)比度和諧關(guān)系，運(yùn)用范圍廣。 黑色是最強(qiáng)的搭配顏色。 黑色也經(jīng)常用來表現(xiàn)帥哥。 黑白兩種顏色的組合，通?？梢员憩F(xiàn)出城市化的感覺，在現(xiàn)代派的頁面設(shè)計(jì)中經(jīng)常被使用。 27、配色方案，綠色系冷溫色之間，以中庸的顏色，綠色性格最平穩(wěn)、穩(wěn)定、寬容。 柔順、平靜、滿足、優(yōu)美、受歡迎的顏色。 也是網(wǎng)頁上使用最廣泛的顏色之一。 以自然的色彩，象征生命與希望，和平與安全，發(fā)展與生機(jī)，舒適與平靜，放松與休息，自然與健康，具有緩解眼疲勞的作用。 常用于與自然、健康相關(guān)的網(wǎng)站。 綠色也被許多企業(yè)的公關(guān)和教育網(wǎng)站使用。 222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222 2威軟俱樂部網(wǎng)站界面設(shè)計(jì)分析，網(wǎng)站用戶定位：俱樂部成員學(xué)院和學(xué)校的學(xué)生指導(dǎo)員和老師家長的公司職員對(duì)有興趣的俱樂部的訪問途徑：學(xué)院大堂31、威軟俱樂部網(wǎng)站接口設(shè)計(jì)分析網(wǎng)站的主要功能模塊：個(gè)人資料章程歷代成員展示交流平臺(tái)發(fā)布個(gè)人博客的活動(dòng)合作公司留言簿有了新的友誼鏈接。 特點(diǎn)：信息量少更新內(nèi)容少，更新速度慢訪問量少的結(jié)論：宣傳網(wǎng)站類型，設(shè)計(jì)靈活強(qiáng)調(diào)俱樂部形象，精神有更新內(nèi)容，32，威軟俱樂部網(wǎng)站接口設(shè)計(jì)分析LOGO口號(hào)俱樂部精神： Thespiritoftheclub， namelypragmatism、cooperationinnovation、fullymanifeststhedevelopmentgoallsofsos、whichareint