什么是網(wǎng)頁界面設(shè)計 ?

什么是網(wǎng)頁界面設(shè)計？界面設(shè)計(即UI設(shè)計)是人與機器之間傳遞和交換信息的媒介，F(xiàn)aceUI稱包括硬件界面和軟件界面，是計算機科學(xué)與心理學(xué)、設(shè)計藝術(shù)學(xué)、認(rèn)知科學(xué)和人機工程學(xué)的交叉研究領(lǐng)域。下面網(wǎng)頁界面設(shè)計介紹，希望對您有所幫助。 ?

界面設(shè)計(即UI設(shè)計)是人與機器之間傳遞和交換信息的媒介，F(xiàn)aceUI稱包括硬件界面和軟件界面，是計算機科學(xué)與心理學(xué)、設(shè)計藝術(shù)學(xué)、認(rèn)知科學(xué)和人機工程學(xué)的交叉研究領(lǐng)域。近年來，隨著信息技術(shù)與計算機技術(shù)的迅速發(fā)展，網(wǎng)絡(luò)技術(shù)的突飛猛進(jìn)，人機界面設(shè)計和開發(fā)已成為國際計算機界和設(shè)計界最為活躍的研究方向。 ?

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

通過對界面設(shè)計不同需求進(jìn)行的分類以及界面設(shè)計元素對用戶行為的影響，來研究用戶在界面設(shè)計中所體現(xiàn)的重要性。交互性已經(jīng)成為網(wǎng)絡(luò)界面設(shè)計中設(shè)計追求的目標(biāo)。為了使設(shè)計滿足可用性要求，全面的了解用戶特征及多元化要求是十分必要的。這就需要找到正確的方法來記錄和實現(xiàn)多元化的用戶要求。 ?

界面是人與物體互動的媒介，換句話說，界面就是設(shè)計師賦予物體的新面孔。 ?

分類 ?

以功能實現(xiàn)為基礎(chǔ)的界面設(shè)計。交互設(shè)計界面最基本的性能是具有功能性與使用性，通過界面設(shè)計，讓用戶明白功能操作，并將作品本身的信息更加順暢的傳遞給使用者，即用戶，是功能界面存在的基礎(chǔ)與價值，但由于用戶的知識水平和文化背景具有差異性，因此界面應(yīng)以更國際化，客觀化的體現(xiàn)作品本身的信息。 ?

以情感表達(dá)為重點的界面設(shè)計。通過界面給用戶一種情感傳遞，是設(shè)計的真正藝術(shù)魅力所在。用戶在接觸作品時的感受，使人產(chǎn)生感情共鳴，利用情感表達(dá)，切實的反應(yīng)出作品與用戶之間的情感關(guān)系。當(dāng)然，情感的信息傳遞存在著確定性與不確定性的統(tǒng)一。因此，我們更加強調(diào)的是用戶在接觸作品時的情感體驗。 ?

以環(huán)境因素為前提的界面設(shè)計。任何一部互動設(shè)計作品都無法脫離環(huán)境而存在，周邊環(huán)境對設(shè)計作品的信息傳遞有著特殊的影響。包括作品自身的歷史、文化、科技等諸多方面的特點，因此營造界面的環(huán)境氛圍是不可忽視的一項設(shè)計工作，這和我們看電影時需要關(guān)燈是一個道理。 ?

如何學(xué)網(wǎng)頁界面設(shè)計 ?

首先，要學(xué)習(xí)網(wǎng)頁設(shè)計的必備語言——html語言。注意，html語言不是編程語言，而是一種標(biāo)記語言。這種語言的內(nèi)容比較容易學(xué)，而且有一個網(wǎng)頁可以支持html代碼的在線運行，具體的請參考《自學(xué)HTML——在網(wǎng)頁上運行代碼(入門課)》。 ?

2自學(xué)HTML——在網(wǎng)頁上運行代碼(入門課) ?

網(wǎng)頁設(shè)計，一般都要求html語言和css語言結(jié)合使用。css語言是一種建站語言，在網(wǎng)頁設(shè)計里面是不可或缺的。這里推薦一個頁面，叫做runoob，里面可以調(diào)試運行多種語言的代碼，非常適合像我一樣的初學(xué)者學(xué)習(xí)。 ?

要想在網(wǎng)頁上加強特效，就需要學(xué)習(xí)javascript語言。javascript語言是一種動態(tài)類型的語言，是現(xiàn)在設(shè)計各種動態(tài)網(wǎng)頁所必不可少的。 ?

能力充足的話，你還可以學(xué)Java語言。 ?

要有一定的美術(shù)功底。真正的好的圖畫，一般都是不能靠代碼產(chǎn)生的，這樣就需要你具備良好的繪畫能力。當(dāng)然你也可以請會畫畫的朋友幫忙。 ?

要學(xué)會使用photoshop軟件，這是做平面設(shè)計必不可少的一款軟件。這款軟件是最常用，也是最容易掌握的一種設(shè)計軟件，可以說比較的平易近人，操作起來也很方便。 ?

如果你實在是懶得自己去設(shè)計網(wǎng)頁，也可以找別人幫忙設(shè)計，不過之前要商量好價格，畢竟設(shè)計網(wǎng)頁不是個輕快的活兒啊! ?

網(wǎng)頁界面設(shè)計的一些規(guī)范 ?

一.用戶導(dǎo)向原則 ?

設(shè)計網(wǎng)頁首先要明確網(wǎng)頁的使用者，要站在用戶體驗立場上來考慮和設(shè)計。要做到這一點，就必須要和用戶溝通，了解他們的需求、目標(biāo)、期望以及偏好等。網(wǎng)頁的設(shè)計者要清楚，用戶之間是有差別的，他們的能力也各有不同。比如有的用戶可能會在視覺方面有所欠缺(如色盲)，對很多的顏色分辨不清;有的用戶的聽覺也可能會有些障礙，對于網(wǎng)站的語音提示反應(yīng)比較遲鈍;而且相當(dāng)一部分用戶的計算機使用經(jīng)驗還很初級，對于復(fù)雜一點的操作就會感覺到很費力。另外，用戶使用的計算機機器配置是千差萬別的，如顯卡、聲卡、內(nèi)存、網(wǎng)速、操作系統(tǒng)以及瀏覽器等都會有所不同。設(shè)計者如果忽視了這些差別，設(shè)計出的網(wǎng)頁在不同的機器上顯示就會造成錯亂。 ?

?

二.簡潔和易于操作原則 ?

簡潔和易于操作是網(wǎng)頁設(shè)計的最重要的原則。網(wǎng)站主要是用于普通網(wǎng)民來查閱信息的網(wǎng)絡(luò)服務(wù)。沒必要在網(wǎng)頁上設(shè)置過多的操作，堆積很多復(fù)雜和花哨的圖片。此原則的要求如下： ?

1、網(wǎng)頁的下載不要超過6秒鐘(普通的家庭寬帶為2M的，速度一般在220kb/s); ?

2、網(wǎng)頁盡量使用文本鏈接，盡量減少大幅圖片和動畫的使用，加快網(wǎng)頁的打開時間; ?

3、操作設(shè)計盡量簡單，并且要有明確的操作提示; ?

4、網(wǎng)站所有的內(nèi)容和服務(wù)都盡量在顯眼處向用戶予以說明等。 ?

三.布局控制 ?

在網(wǎng)頁排版布局方面，很多網(wǎng)頁設(shè)計者還不夠重視，網(wǎng)頁界面設(shè)計排版過于死板，甚至照抄他人。如果網(wǎng)頁的布局凌亂，僅把大量的信息堆集在頁面上，就會干擾瀏覽者的閱讀。一般在網(wǎng)頁界面的版式設(shè)計上所要遵循的原則有： ?

1、7±2的Miller公式。 ?

根據(jù)心理學(xué)家George A.Miller的研究表明，人一次性接受的信息量在7個比特左右為宜?？偨Y(jié)一個公式為：一個人一次所接受的信息量為 7±2 比特。這一原理被廣泛應(yīng)用于網(wǎng)站建設(shè)中，一般網(wǎng)頁上面的欄目選擇*在5～9個之間，如果網(wǎng)站所提供給瀏覽者選擇的內(nèi)容鏈接超過這個區(qū)間，人在心理上就會煩躁，壓抑，會讓人感覺到信息太密集，看不過來，很累。例如Aol.com的欄目設(shè)置：Main、MyAol、Mail、People、Search、Shop、Channels和Devices共八個分類。Msn.com的欄目設(shè)置：MSN Home、My MSN、Hotmail、Search、Shopping、Money和People & Chat共七項。然而很多國內(nèi)的網(wǎng)站在欄目的設(shè)置遠(yuǎn)遠(yuǎn)超出這個區(qū)間。 ?

2、分組處理。 ?

上面提到，對于信息或欄目的分類，不能超過9個。但如果你的內(nèi)容實在是太多，超出9個，就需要進(jìn)行分組處理。如果，你的網(wǎng)頁上有幾十篇文章的鏈接，需要每隔7篇加一個空行或平行線做以分組。如果你的網(wǎng)站內(nèi)容欄目超出9個，如騰訊公司的網(wǎng)站或其它幾個比較*的門戶，有很多個欄目，超過了9個。為了不破壞7±2的Miller公式，在設(shè)計時把比較有代表性的分類加粗，然后再按性質(zhì)分組，最終如下圖分成了6列大的欄目。 ?

四.視覺平衡 ?

網(wǎng)頁設(shè)計時，各種元素(如圖形、文字、空白)都要有視覺平衡作用。根據(jù)視覺原理，圖形與一塊文字相比較，圖形的視覺作用要大一些。所以，為了達(dá)到視覺平衡，設(shè)計網(wǎng)頁時需要以更多的文字來平衡一張圖片。另外，按照*人的閱讀習(xí)慣是從左到右，從上到下，因此視覺平衡也要遵循這個這個原則。例如，你的很多的文字是采用左對齊〈Align=left〉，需要在網(wǎng)頁的右面加一些圖片或一些較明亮、較醒目的顏色。 ?

通常情況下，每張網(wǎng)頁都會設(shè)置一個頁眉部分和一個頁腳部分，頁眉部分通常放置一些Banner廣告或?qū)Ш綏l及網(wǎng)站LOGO，而頁腳部分通常放置聯(lián)系方式和版權(quán)信息等，頁眉和頁腳在設(shè)計上也要注重視覺平衡。同時，也決不能低估空白的價值;網(wǎng)頁上所顯示的信息非常密集，這樣不但不利于讀者閱讀，甚至?xí)鹱x者反感，破壞該網(wǎng)站的形象。在網(wǎng)頁設(shè)計上，適當(dāng)?shù)牡胤皆黾右恍┝舭?，精煉和升華你的網(wǎng)頁的形象及美感，使得頁面變得簡潔。 ?

UI設(shè)計和網(wǎng)頁美工的區(qū)別是什么 ?

首先需要對UI設(shè)計和網(wǎng)頁美工各自的職責(zé)范疇進(jìn)行解讀： ?

UI設(shè)計：UI其實是用戶界面(User interface)的簡稱 ，而用戶界面是指人和機器互動過程中的界面。UI設(shè)計就是設(shè)計人機交互過程中所需的元素和步驟。以移動端的手機為例，手機上的界面都屬于用戶界面。用戶通過這個界面向手機發(fā)出指令，手機根據(jù)這些指令所產(chǎn)生相對應(yīng)的反饋。而設(shè)計這套界面視覺的人被稱呼為UI設(shè)計師。 ?

美工：一般是指對平面，色彩 ，基調(diào)，創(chuàng)意等進(jìn)行堆砌的技術(shù)人才，分為平面美工、網(wǎng)頁美工和三維美工。一般需要精通Photoshop等設(shè)計軟件。美工專業(yè)大部分因為電子商務(wù)的興起而發(fā)展的職業(yè)，主要負(fù)責(zé)公司形象包裝、網(wǎng)站優(yōu)化、產(chǎn)品宣傳畫冊、電子商務(wù)專題設(shè)計等工作。 ?

UI設(shè)計和美工的區(qū)別在于： ?

1.美工，顧名思義，就是美化網(wǎng)站的外表。更深層次的就是突出網(wǎng)站本身的內(nèi)涵。而UI設(shè)計師這一職位的真正含義并非是美工(或者說絕不是僅僅做“美化”工作而已)。 ?

2.準(zhǔn)確的說UI設(shè)計師是指專門研究和設(shè)計產(chǎn)品的用戶使用界面，目的是在滿足功能的前提下通過圖形界面的合理設(shè)計使用戶更容易理解和操作，從而提高產(chǎn)品在用戶心目中的形象。 ?

3.兩三年前的網(wǎng)頁考慮更多的是界面的好看，所以做靜態(tài)界面的人都叫美工，基本上頁面的結(jié)構(gòu)都不用考慮了，都是固定的了，要做的就是客戶喜歡什么風(fēng)格把它做出來就行。而這兩年網(wǎng)頁要求交互性有效性越來越強，用戶體驗也受到了重視 ，在設(shè)計的要求設(shè)計師從用戶的使用角度去安排設(shè)計，這就是UI設(shè)計師。 ?

4.不容置疑，UI是IT的一部分，而且是一種只有在IT發(fā)展到一定程度才會出現(xiàn)的產(chǎn)物，IT的發(fā)展經(jīng)歷了從功能的實現(xiàn)到對美的追求到人性化;同時它也是美術(shù)的范疇，因為它是以審美為基礎(chǔ)去配合用戶動作的過程。所以，只能實現(xiàn)功能的IT產(chǎn)品已經(jīng)不能滿足用戶的需要求了，而只從美術(shù)的角度去考慮也會導(dǎo)致忽略用戶使用方面過程方便性。 ?

5.所以，總的來說UI和美工的區(qū)別在于UI主要關(guān)注的是用戶的操作體驗，而美工則是頁面效果，注重更多的頁面知識。 ?