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

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

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

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

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

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

分類 ?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

?

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

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

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

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

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

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

三.布局控制 ?

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

1、7±2的Miller公式。 ?

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

2、分組處理。 ?

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

四.視覺平衡 ?

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

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

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

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

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

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

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

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

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

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

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

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