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

什么是網(wǎng)頁(yè)界面設(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)頁(yè)界面設(shè)計(jì)介紹，希望對(duì)您有所幫助。 ?

界面設(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)域。近年來(lái)，隨著信息技術(shù)與計(jì)算機(jī)技術(shù)的迅速發(fā)展，網(wǎng)絡(luò)技術(shù)的突飛猛進(jìn)，人機(jī)界面設(shè)計(jì)和開發(fā)已成為國(guó)際計(jì)算機(jī)界和設(shè)計(jì)界最為活躍的研究方向。 ?

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

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

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

分類 ?

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

以情感表達(dá)為重點(diǎn)的界面設(shè)計(jì)。通過(guò)界面給用戶一種情感傳遞，是設(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ì)。任何一部互動(dòng)設(shè)計(jì)作品都無(wú)法脫離環(huán)境而存在，周邊環(huán)境對(duì)設(shè)計(jì)作品的信息傳遞有著特殊的影響。包括作品自身的歷史、文化、科技等諸多方面的特點(diǎn)，因此營(yíng)造界面的環(huán)境氛圍是不可忽視的一項(xiàng)設(shè)計(jì)工作，這和我們看電影時(shí)需要關(guān)燈是一個(gè)道理。 ?

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

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

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

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

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

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

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

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

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

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

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

設(shè)計(jì)網(wǎng)頁(yè)首先要明確網(wǎng)頁(yè)的使用者，要站在用戶體驗(yàn)立場(chǎng)上來(lái)考慮和設(shè)計(jì)。要做到這一點(diǎn)，就必須要和用戶溝通，了解他們的需求、目標(biāo)、期望以及偏好等。網(wǎng)頁(yè)的設(shè)計(jì)者要清楚，用戶之間是有差別的，他們的能力也各有不同。比如有的用戶可能會(huì)在視覺(jué)方面有所欠缺(如色盲)，對(duì)很多的顏色分辨不清;有的用戶的聽(tīng)覺(jué)也可能會(huì)有些障礙，對(duì)于網(wǎng)站的語(yǔ)音提示反應(yīng)比較遲鈍;而且相當(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ì)造成錯(cuò)亂。 ?

?

二.簡(jiǎn)潔和易于操作原則 ?

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

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

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

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

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

三.布局控制 ?

在網(wǎng)頁(yè)排版布局方面，很多網(wǎng)頁(yè)設(shè)計(jì)者還不夠重視，網(wǎng)頁(yè)界面設(shè)計(jì)排版過(guò)于死板，甚至照抄他人。如果網(wǎng)頁(yè)的布局凌亂，僅把大量的信息堆集在頁(yè)面上，就會(huì)干擾瀏覽者的閱讀。一般在網(wǎng)頁(yè)界面的版式設(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)頁(yè)上面的欄目選擇*在5～9個(gè)之間，如果網(wǎng)站所提供給瀏覽者選擇的內(nèi)容鏈接超過(guò)這個(gè)區(qū)間，人在心理上就會(huì)煩躁，壓抑，會(huì)讓人感覺(jué)到信息太密集，看不過(guò)來(lái)，很累。例如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)。然而很多國(guó)內(nèi)的網(wǎng)站在欄目的設(shè)置遠(yuǎn)遠(yuǎn)超出這個(gè)區(qū)間。 ?

2、分組處理。 ?

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

四.視覺(jué)平衡 ?

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

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

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

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

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

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

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

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

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

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

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

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