網(wǎng)頁(yè)界面設(shè)計(jì)

網(wǎng)頁(yè)界面設(shè)計(jì)第1頁(yè)，課件共25頁(yè)，創(chuàng)作于2023年2月網(wǎng)站用戶界面設(shè)計(jì)的原則網(wǎng)站用戶界面設(shè)計(jì)UI設(shè)計(jì)包括的三個(gè)部分什么是UI，什么是UI設(shè)計(jì)UI設(shè)計(jì)的發(fā)展階段第2頁(yè)，課件共25頁(yè)，創(chuàng)作于2023年2月近幾年，有一個(gè)新興的詞在設(shè)計(jì)領(lǐng)域誕生，這個(gè)詞就是“UI”。2000年以前國(guó)內(nèi)的UI設(shè)計(jì)剛開(kāi)始萌芽，但當(dāng)時(shí)做UI等于做平面設(shè)計(jì)，后來(lái)隨著flash的流行，一部分美術(shù)設(shè)計(jì)師開(kāi)始去思考互動(dòng)性。到了2002年一些企業(yè)開(kāi)始重視到UI設(shè)計(jì)的重要性，紛紛把UI部門從軟件編碼團(tuán)隊(duì)里提出來(lái)，開(kāi)始有了專門針對(duì)軟件產(chǎn)品的圖形設(shè)計(jì)師和交互設(shè)計(jì)師。2004年以后隨著手機(jī)，電腦附加軟件，MP3等大量產(chǎn)品上市，UI設(shè)計(jì)也開(kāi)始被提升到一個(gè)新的高度和重視程度。2005年國(guó)內(nèi)的UI設(shè)計(jì)已經(jīng)相對(duì)成熟了，有了專門的職業(yè)分工，也出現(xiàn)了很多不錯(cuò)的UI一線設(shè)計(jì)師與UI設(shè)計(jì)交流組織。在短短的幾年里UI設(shè)計(jì)師越來(lái)越多，設(shè)立UI部門的企業(yè)越來(lái)越普遍，各大院校也出現(xiàn)了和UI相關(guān)的專業(yè)，UI設(shè)計(jì)的組織和網(wǎng)站層出不窮。這一切都預(yù)示著一個(gè)“UI”大時(shí)代已經(jīng)到來(lái)。UI軟件編碼flash平面第3頁(yè)，課件共25頁(yè)，創(chuàng)作于2023年2月UIUI的本意是用戶界面(userinterface)，概括成一句話就是——人和機(jī)器之間的界面。這個(gè)界面實(shí)際上是體現(xiàn)在我們生活中的每一個(gè)環(huán)節(jié)的，例如我們常用的手機(jī)，按鍵和屏幕就是這個(gè)界面，開(kāi)車時(shí)候方向盤(pán)和儀表盤(pán)就是這個(gè)界面，看電視的時(shí)候遙控器和屏幕就是這個(gè)界面，用電腦的時(shí)候鍵盤(pán)和顯示器就是這個(gè)界面。UI包括用戶研究，交互設(shè)計(jì)與界面設(shè)計(jì)三個(gè)部分。UI設(shè)計(jì)在人和機(jī)器的互動(dòng)過(guò)程（HumanMachineInteraction）中，有一個(gè)層面，即我們所說(shuō)的界面（interface）。從心理學(xué)意義來(lái)分，界面可分為感覺(jué)（視覺(jué)、觸覺(jué)、聽(tīng)覺(jué)等）和情感兩個(gè)層次。用戶界面設(shè)計(jì)是屏幕產(chǎn)品的重要組成部分。界面設(shè)計(jì)是一個(gè)復(fù)雜的有不同學(xué)科參與的工程，認(rèn)知心理學(xué)、設(shè)計(jì)學(xué)、語(yǔ)言學(xué)等在此都扮演著重要的角色。用戶界面設(shè)計(jì)的三大原則是：置界面于用戶的控制之下；減少用戶的記憶負(fù)擔(dān)；保持界面的一致性。

第4頁(yè)，課件共25頁(yè)，創(chuàng)作于2023年2月用戶研究交互設(shè)計(jì)界面設(shè)計(jì)第5頁(yè)，課件共25頁(yè)，創(chuàng)作于2023年2月用戶研究包含兩個(gè)方面：一是可用性工程學(xué)（usabilityEngineering），研究如何提高產(chǎn)品的可用性，使得系統(tǒng)的設(shè)計(jì)更容易被人使用、學(xué)習(xí)和記憶；二是通過(guò)可用性工程學(xué)的研究，發(fā)掘用戶的潛在需求，為技術(shù)創(chuàng)新提供另外一條思路和方法（consumerinsight）。所以有：Usabilityisallaboutmakingthingseasiertousesopeoplecanfocusmoreontheworkandlessonthetoolsthathelpthemdothework.

用戶研究是一個(gè)跨學(xué)科的專業(yè)，涉及可用性工程學(xué)、人類功效學(xué)、心理學(xué)、市場(chǎng)研究學(xué)、教育學(xué)、設(shè)計(jì)學(xué)等等學(xué)科。用戶研究技術(shù)是站在人文學(xué)科的角度來(lái)研究產(chǎn)品，站在用戶的角度介入到產(chǎn)品的開(kāi)發(fā)和設(shè)計(jì)中。

用戶研究通過(guò)對(duì)于用戶的工作環(huán)境、產(chǎn)品的使用習(xí)慣等研究，使得在產(chǎn)品開(kāi)發(fā)的前期能夠把用戶對(duì)于產(chǎn)品功能的期望、對(duì)設(shè)計(jì)和外觀方面的要求融入到產(chǎn)品的開(kāi)發(fā)過(guò)程中去，從而幫助企業(yè)完善產(chǎn)品設(shè)計(jì)或者探索一個(gè)新產(chǎn)品概念。他是得到用戶需求和反饋的途徑，也是檢驗(yàn)界面與交互設(shè)計(jì)是否合理的重要標(biāo)準(zhǔn)。第6頁(yè)，課件共25頁(yè)，創(chuàng)作于2023年2月這部分指人與機(jī)之間的交互工程，在過(guò)去交互設(shè)計(jì)也由程序員來(lái)做，其實(shí)程序員擅長(zhǎng)編碼，而不善于與最終用戶交互。所以，很多的軟件雖然功能比較齊全，但是交互方面設(shè)計(jì)很粗糙，繁瑣難用，學(xué)習(xí)困難。使用這樣的軟件后，不是使人聰明與進(jìn)步而是讓人感到愚弄與羞辱。許多人因?yàn)椴荒懿僮麟娔X軟件而下崗失業(yè)，這樣的交互使電腦成為讓人恐懼的科技怪獸。于是我們把交互設(shè)計(jì)從程序員的工作中分離出來(lái)單獨(dú)成為一個(gè)學(xué)科，也就是人機(jī)交互設(shè)計(jì)。他的目的在于加強(qiáng)軟件的易用、易學(xué)、易理解，使計(jì)算機(jī)真正成為方便地為人類服務(wù)的工具。第7頁(yè)，課件共25頁(yè)，創(chuàng)作于2023年2月一直以來(lái)界面設(shè)計(jì)工作沒(méi)有被重視起來(lái)。做界面設(shè)計(jì)的人也被稱為“美工”。其實(shí)界面設(shè)計(jì)就像工業(yè)產(chǎn)品中的工業(yè)造型設(shè)計(jì)一樣，是產(chǎn)品的重要買點(diǎn)。一個(gè)友好美觀的界面會(huì)給人帶來(lái)舒適的視覺(jué)享受，拉近人與機(jī)器的距離，為商家創(chuàng)造賣點(diǎn)。界面設(shè)計(jì)不是單純的美術(shù)繪畫(huà)，他需要定位使用者、使用環(huán)境、使用方式并且為最終用戶而設(shè)計(jì)，是純粹的科學(xué)性的藝術(shù)設(shè)計(jì)。檢驗(yàn)一個(gè)界面的標(biāo)準(zhǔn)即不是某個(gè)項(xiàng)目開(kāi)發(fā)組領(lǐng)導(dǎo)的意見(jiàn)也不是項(xiàng)目成員投票的結(jié)果，而是最終用戶的感受。所以界面設(shè)計(jì)要和用戶研究緊密結(jié)合，是一個(gè)不斷為最終用戶設(shè)計(jì)滿意視覺(jué)效果的過(guò)程。界面設(shè)計(jì)是人與機(jī)器之間傳遞和交換信息的媒介，包括硬件界面，軟件界面和網(wǎng)站界面。近年來(lái)，隨著信息技術(shù)與計(jì)算機(jī)技術(shù)的迅速發(fā)展，網(wǎng)絡(luò)技術(shù)的突飛猛進(jìn)，人機(jī)界面設(shè)計(jì)和開(kāi)發(fā)已成為國(guó)際計(jì)算機(jī)界和設(shè)計(jì)界最為活躍的研究方向。

第8頁(yè)，課件共25頁(yè)，創(chuàng)作于2023年2月網(wǎng)站用戶界面（WebsiteUserInterface）是指網(wǎng)站用于和用戶交流的外觀、部件和程序等等。我們經(jīng)常上網(wǎng)，會(huì)看到很多網(wǎng)站設(shè)計(jì)很樸素，看起來(lái)給人一種很舒服的感覺(jué)；Apple網(wǎng)站很有現(xiàn)代感，能給人帶來(lái)意外的驚喜和視覺(jué)的沖擊；而相當(dāng)多的網(wǎng)站頁(yè)面上充斥著怪異的字體，花哨的色彩和圖片，給人網(wǎng)站制作粗劣的感覺(jué)。網(wǎng)站界面的設(shè)計(jì)，既要從外觀上進(jìn)行創(chuàng)意以達(dá)到吸引眼球的目的，還要結(jié)合圖形和版面設(shè)計(jì)的相關(guān)原理，從而使得網(wǎng)站設(shè)計(jì)變成了一門獨(dú)特的藝術(shù)。通常的講，網(wǎng)站用戶界面的設(shè)計(jì)應(yīng)遵循以下幾個(gè)基本原則：第9頁(yè)，課件共25頁(yè)，創(chuàng)作于2023年2月1．用戶導(dǎo)向（Useroriented）原則

設(shè)計(jì)網(wǎng)頁(yè)首先要明確到底誰(shuí)是使用者，要站在用戶的觀點(diǎn)和立場(chǎng)上來(lái)考慮設(shè)計(jì)網(wǎng)站。要作到這一點(diǎn)，必須要和用戶來(lái)溝通，了解他們的需求、目標(biāo)、期望和偏好等。網(wǎng)頁(yè)的設(shè)計(jì)者要清楚，用戶之間差別很大，他們的能力各有不同。比如有的用戶可能會(huì)在視覺(jué)方面有欠缺（如色盲），對(duì)很多的顏色分辨不清；有的用戶的聽(tīng)覺(jué)也會(huì)有障礙，對(duì)于軟件的語(yǔ)音提示反映遲鈍；而且相當(dāng)一部分用戶的計(jì)算機(jī)使用經(jīng)驗(yàn)很初級(jí)，對(duì)于復(fù)雜一點(diǎn)的操作會(huì)感覺(jué)到很費(fèi)力。另外，用戶使用的計(jì)算機(jī)機(jī)器配置也是千差萬(wàn)別，包括顯卡、聲卡、內(nèi)存、網(wǎng)速、操作系統(tǒng)以及瀏覽器等都會(huì)有不同。設(shè)計(jì)者如果忽視了這些差別，設(shè)計(jì)出的網(wǎng)頁(yè)在不同的機(jī)器上顯示就會(huì)造成混亂。第10頁(yè)，課件共25頁(yè)，創(chuàng)作于2023年2月2．KISS（KeepItSimpleAndStupid）原則

KISS原則就是"KeepItSampleAndStupid"的縮寫(xiě)，簡(jiǎn)潔和易于操作是網(wǎng)站設(shè)計(jì)的最重要的原則。畢竟，網(wǎng)站建設(shè)出來(lái)是用于普通網(wǎng)民來(lái)查閱信息和使用網(wǎng)絡(luò)服務(wù)。沒(méi)有必要在網(wǎng)站上設(shè)置過(guò)多的操作，堆集上很多復(fù)雜和花哨的圖片。該原則一般的要求，網(wǎng)站的下載不要超過(guò)10秒鐘（普通的撥號(hào)用戶56Kbps網(wǎng)速）；盡量使用文本鏈接，而減少大幅圖片和動(dòng)畫(huà)的使用；操作設(shè)計(jì)盡量簡(jiǎn)單，并且有明確的操作提示；網(wǎng)站所有的內(nèi)容和服務(wù)都在顯眼處向用戶予以說(shuō)明等。

第11頁(yè)，課件共25頁(yè)，創(chuàng)作于2023年2月第12頁(yè)，課件共25頁(yè)，創(chuàng)作于2023年2月3．布局控制關(guān)于網(wǎng)站排版布局方面，很多網(wǎng)站設(shè)計(jì)者重視不夠，網(wǎng)站排版設(shè)計(jì)的過(guò)于死板，甚至照抄他人。如果網(wǎng)站的布局凌亂，僅僅把大量的信息堆集在頁(yè)面上，會(huì)干擾瀏覽者的閱讀。一般在網(wǎng)站設(shè)計(jì)上所要遵循的原理有：（1）Miller公式。根據(jù)心理學(xué)家GeorgeA.Miller的研究表明，人一次性接受的信息量在7個(gè)比特左右為宜?？偨Y(jié)一個(gè)公式為：一個(gè)人一次所接受的信息量為7±2比特。這一原理被廣泛應(yīng)用于網(wǎng)站建設(shè)中，一般網(wǎng)站上面的欄目選擇最佳在5～9個(gè)之間，如果網(wǎng)站所提供給瀏覽者選擇的內(nèi)容鏈接超過(guò)這個(gè)區(qū)間，人在心理上就會(huì)煩躁，壓抑，會(huì)讓人感覺(jué)到信息太密集，看不過(guò)來(lái)，很累。例如微軟公司的網(wǎng)站的欄目設(shè)置：Highlights、Latestreleases、Usingyourcomputer、ForBusiness、ForITProfessionals、ForDevelopers共六項(xiàng)。Apple的欄目設(shè)置也是六項(xiàng)。然而很多國(guó)內(nèi)的網(wǎng)站在欄目的設(shè)置遠(yuǎn)遠(yuǎn)超出這個(gè)區(qū)間。第13頁(yè)，課件共25頁(yè)，創(chuàng)作于2023年2月第14頁(yè)，課件共25頁(yè)，創(chuàng)作于2023年2月3．布局控制（2）分組處理。上面提到，對(duì)于信息的分類，不能超過(guò)9個(gè)欄目。但如果你的內(nèi)容實(shí)在是多，超出了9個(gè)，需要進(jìn)行分組處理。如果，你的網(wǎng)站上提供幾十篇文章的鏈接，需要每隔7篇加一個(gè)空行或平行線做以分組。如果你的網(wǎng)站內(nèi)容欄目超出9個(gè)，可以采用顏色區(qū)分或者是框架來(lái)區(qū)分。如google公司的網(wǎng)站，就是一個(gè)分組的很好的框架區(qū)分的例子。共有N多個(gè)欄目，超過(guò)了9個(gè)。為了不破壞Miller公式，在設(shè)計(jì)時(shí)就是使用了分組的方式：第15頁(yè)，課件共25頁(yè)，創(chuàng)作于2023年2月第16頁(yè)，課件共25頁(yè)，創(chuàng)作于2023年2月第17頁(yè)，課件共25頁(yè)，創(chuàng)作于2023年2月4．視覺(jué)平衡網(wǎng)站設(shè)計(jì)時(shí)，也要各種元素（如圖形、文字、空白）都會(huì)有視覺(jué)作用。根據(jù)視覺(jué)原理，圖形與一塊文字相比較，圖形的視覺(jué)作用要大一些。所以，為了達(dá)到視覺(jué)平衡，在設(shè)計(jì)網(wǎng)站時(shí)需要以更多的文字來(lái)平衡一幅圖片。另外，按照中國(guó)人的閱讀習(xí)慣是從左到右，從上到下，因此視覺(jué)平衡也要遵循這個(gè)道理。例如，你的很多的文字是采用左對(duì)齊〈Align=left〉，需要在網(wǎng)站的右面加一些圖片或一些較明亮、較醒目的顏色。一般情況下，每個(gè)網(wǎng)站都會(huì)設(shè)置一個(gè)頁(yè)眉部分和一個(gè)頁(yè)腳部分，頁(yè)眉部分常放置一些Banner廣告或?qū)Ш綏l，而頁(yè)腳部分通常放置聯(lián)系方式和版權(quán)信息等，頁(yè)眉和頁(yè)腳在設(shè)計(jì)上也要注重視覺(jué)平衡。同時(shí)，也決不能低估空白的價(jià)值。如果你的網(wǎng)站上所顯示的信息非常密集，這樣不但不利于讀者閱讀，甚至?xí)鹱x者反感，破壞該網(wǎng)站的形象。在網(wǎng)站設(shè)計(jì)上，適當(dāng)增加一些空白，精煉你的網(wǎng)站，使得頁(yè)面變的簡(jiǎn)潔。第18頁(yè)，課件共25頁(yè)，創(chuàng)作于2023年2月5．色彩的搭配和文字的可閱讀性顏色是影響網(wǎng)站的重要因素，不同的顏色對(duì)人的感覺(jué)有不同的影響，例如：紅色和橙色使人興奮并使得心跳加速；黃色使人聯(lián)想到陽(yáng)光，是一種快活的顏色；黑顏色顯得比較莊重，考慮到你希望對(duì)瀏覽者產(chǎn)生什么影響，為網(wǎng)站設(shè)計(jì)選擇合適的顏色（包括背景色、元素顏色、文字顏色、鏈接顏色等）。通常情況下，一個(gè)頁(yè)面內(nèi)盡量不要使用超過(guò)4種色彩，太多的色彩容易讓人感覺(jué)沒(méi)有方向、沒(méi)有側(cè)重。當(dāng)主題色確定好以后，考慮其他配色時(shí)，一定要考慮其他配色與主題色的關(guān)系，要體現(xiàn)什么樣的效果；另外還要考慮哪種因素可能占主要地位，是明度、純度還是色相。

為方便閱讀網(wǎng)站上的信息，可以參考報(bào)紙的編排方式將網(wǎng)站的內(nèi)容分欄設(shè)計(jì)，甚至兩欄也要比一滿頁(yè)的視覺(jué)效果要好。另一種能夠提高文字可讀性的因素是所選擇的字體，通用的字體（Arial，Vedana，Garamond，TimesNewRoman，中文宋體）最易閱讀，特殊字體用于標(biāo)題效果較好，但是不適合正文。如果在整個(gè)頁(yè)面使用一些特殊字體（如Cloister，Gothic，Script，Westminster，華文彩云，華文行楷），這樣讀者閱讀起來(lái)感覺(jué)一定很糟糕。該類特殊字體如果在頁(yè)面上大量使用，會(huì)使得閱讀頗為費(fèi)力，瀏覽者的眼睛很快就會(huì)疲勞，不得不轉(zhuǎn)移到其他頁(yè)面。第19頁(yè)，課件共25頁(yè)，創(chuàng)作于2023年2月6．和諧與一致性通過(guò)對(duì)網(wǎng)站的各種元素（顏色、字體、圖形、空白等）使用一定的規(guī)格，使得設(shè)計(jì)良好的網(wǎng)站看起來(lái)應(yīng)該是和諧的?；蛘哒f(shuō)，網(wǎng)站的眾多單獨(dú)網(wǎng)站應(yīng)該看起來(lái)像一個(gè)整體。網(wǎng)站設(shè)計(jì)上要保持一致性，這又是很重要的一點(diǎn)。一致的結(jié)構(gòu)設(shè)計(jì)，可以讓瀏覽者對(duì)網(wǎng)站的形象有深刻的記憶；一致的導(dǎo)航設(shè)計(jì)，可以讓瀏覽者迅速而又有效的進(jìn)入在網(wǎng)站中自己所需要的部分；一致的操作設(shè)計(jì)，可以讓瀏覽者快速學(xué)會(huì)在整個(gè)網(wǎng)站的各種功能操作。破壞這一原則，會(huì)誤導(dǎo)瀏覽者，并且讓整個(gè)網(wǎng)站顯的雜亂無(wú)章，給人留下不良的印象。當(dāng)然，網(wǎng)站設(shè)計(jì)的一致性并不意味著刻板和一成不變，有的網(wǎng)站在不同欄目使用不同的風(fēng)格，或者隨著時(shí)間的推移不斷的改版網(wǎng)站，會(huì)給瀏覽者帶來(lái)新鮮的感覺(jué)。第20頁(yè)，課件共25頁(yè)，創(chuàng)作于2023年2月7．個(gè)性化（1）符合網(wǎng)絡(luò)文化企業(yè)網(wǎng)站不同于傳統(tǒng)的企業(yè)商務(wù)活動(dòng)，要符合Internet網(wǎng)絡(luò)文化的要求。首先，網(wǎng)絡(luò)最早是非正式性、非商業(yè)化的，只是科研人員用來(lái)交流信息的。其次，網(wǎng)絡(luò)信息是只在計(jì)算機(jī)屏幕上顯示而沒(méi)有打印出來(lái)閱讀，網(wǎng)絡(luò)上的交流具有隱蔽性，誰(shuí)也不知道對(duì)方的真實(shí)身份。另外，許多人在上網(wǎng)的時(shí)候是在家中或網(wǎng)吧等一些比較休閑，比較隨意的環(huán)境下。此時(shí)網(wǎng)絡(luò)用戶的使用環(huán)境