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

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

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

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

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

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

分類 ?

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

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

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

如何學網(wǎng)頁界面設計 ?

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

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

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

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

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

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

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

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

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

一.用戶導向原則 ?

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

?

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

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

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

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

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

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

三.布局控制 ?

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

1、7±2的Miller公式。 ?

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

2、分組處理。 ?

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

四.視覺平衡 ?

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

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

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

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

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

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

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

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

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

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

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

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