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

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

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

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

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

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

分類(lèi) ?

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

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

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

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

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

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

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

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

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

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

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

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

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

一.用戶(hù)導向原則 ?

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

?

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

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

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

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

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

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

三.布局控制 ?

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

1、7±2的Miller公式。 ?

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

2、分組處理。 ?

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

四.視覺(jué)平衡 ?

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

通常情況下，每張網(wǎng)頁(yè)都會(huì )設置一個(gè)頁(yè)眉部分和一個(gè)頁(yè)腳部分，頁(yè)眉部分通常放置一些Banner廣告或導航條及網(wǎng)站LOGO，而頁(yè)腳部分通常放置聯(lián)系方式和版權信息等，頁(yè)眉和頁(yè)腳在設計上也要注重視覺(jué)平衡。同時(shí)，也決不能低估空白的價(jià)值;網(wǎng)頁(yè)上所顯示的信息非常密集，這樣不但不利于讀者閱讀，甚至會(huì )引起讀者反感，破壞該網(wǎng)站的形象。在網(wǎng)頁(yè)設計上，適當的地方增加一些留白，精煉和升華你的網(wǎng)頁(yè)的形象及美感，使得頁(yè)面變得簡(jiǎn)潔。 ?

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

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

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

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

UI設計和美工的區別在于： ?

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

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

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

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

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