UI設(shè)計和網(wǎng)頁設(shè)計有區(qū)別嗎VIP

UI設(shè)計和網(wǎng)頁設(shè)計有區(qū)別嗎？我們應(yīng)該都了解過設(shè)計的大概種類了。而其中我們都應(yīng)該聽過UI設(shè)計以及網(wǎng)頁設(shè)計吧。很多人都認(rèn)為這倆者是沒有區(qū)別的，其實不然。下面我們來了解下什么是UI設(shè)計什么是網(wǎng)頁設(shè)計吧，最后我們再總結(jié)區(qū)別。

UI設(shè)計是什么UI即UserInterface(用戶界面)的簡稱。UI設(shè)計分為實體UI和虛擬UI，互聯(lián)網(wǎng)說的UI設(shè)計是虛擬UI，一般是指對軟件的人機交互、操作邏輯、界面美觀的整體設(shè)計。好的UI設(shè)計不僅是讓軟件變得有個性有品位，還要讓軟件的操作變得舒適簡單、自由，充分體現(xiàn)軟件的定位和特點。

軟件設(shè)計可分為兩個部分：編碼設(shè)計與UI設(shè)計。UI的本意是用戶界面，是英文User和Interface的縮寫。從字面上看是用戶與界面2個部分組成，但實際上還包括用戶與界面之間的交互關(guān)系。

在飛速發(fā)展的電子產(chǎn)品中，界面設(shè)計工作一點點的被重視起來。做界面設(shè)計的“美工”也隨之被稱之為“UI設(shè)計師”或“UI工程師”。其實軟件界面設(shè)計就像工業(yè)產(chǎn)品中的工業(yè)造型設(shè)計一樣，是產(chǎn)品的重要賣點。一個電子產(chǎn)品擁有美觀的界面會給人帶來舒適的視覺享受，拉近人與商品的距離，是建立在科學(xué)性之上的藝術(shù)設(shè)計。檢驗一個界面的標(biāo)準(zhǔn)既不是某個項目開發(fā)組領(lǐng)導(dǎo)的意見也不是項目成員投票的結(jié)果，而是終端用戶的感受。

與之相應(yīng)，UI設(shè)計師的職能大體包括三方面：一是圖形設(shè)計，即傳統(tǒng)意義上的“美工”。當(dāng)然，實際上他們承擔(dān)的不是單純意義上美術(shù)工人的工作，而是軟件產(chǎn)品的產(chǎn)品“外形”設(shè)計。二是交互設(shè)計，主要在于設(shè)計軟件的操作流程、樹狀結(jié)構(gòu)、操作規(guī)范等。一個軟件產(chǎn)品在編碼之前需要做的就是交互設(shè)計，并且確立交互模型，交互規(guī)范。三是用戶測試/研究，這里所謂的“測試”，其目標(biāo)恰在于測試交互設(shè)計的合理性及圖形設(shè)計的美觀性，主要通過以目標(biāo)用戶問卷的形式衡量UI設(shè)計的合理性。如果沒有這方面的測試研究，UI設(shè)計的好壞只能憑借設(shè)計師的經(jīng)驗或者領(lǐng)導(dǎo)的審美來評判，這樣就會給企業(yè)帶來極大的風(fēng)險。

研究界面

圖形設(shè)計師GraphicUIdesigner

國內(nèi)大部分UI工作者都是從事這個行業(yè)。也有人稱之為美工，但實際上不是單純意義上的美術(shù)工人，而是了解軟件產(chǎn)品、致力于提高軟件用戶體驗的產(chǎn)品外形設(shè)計師。隨著時間的推移，美工這個詞將漸漸淡出。

這些設(shè)計師大多是美術(shù)院校畢業(yè)的，其中大部分是有美術(shù)設(shè)計教育背景，例如工業(yè)外形設(shè)計，裝潢設(shè)計，信息多媒體設(shè)計等。通過比較兩個不同世界(真實與虛擬)的事物，完成更好的設(shè)計。如：書籍對比竹簡。

8.排列

一個有序的界面能讓用戶輕松的使用。

9.安全性

用戶能自由的作出選擇，且所有選擇都是可逆的。在用戶作出危險的選擇時有信息介入系統(tǒng)的提示。

10.靈活性

簡單來說就是要讓用戶方便的使用，但不同于上述。即互動多重性，不局限于單一的工具(包括鼠標(biāo)、鍵盤或手柄、界面)。

11.人性化

高效率和用戶滿意度是人性化的體現(xiàn)。應(yīng)具備專家級和初級玩家系統(tǒng)，即用戶可依據(jù)自己的習(xí)慣定制界面，并能保存設(shè)置。

UI常見的手機UI

一、確認(rèn)目標(biāo)用戶

在UI設(shè)計過程中，需求設(shè)計角色會確定軟件的目標(biāo)用戶，獲取最終用戶和直接用戶的需求。

用戶交互要考慮到目標(biāo)用戶的不同引起的交互設(shè)計重點的不同。

例如：對于科學(xué)用戶和對于電腦入門用戶的設(shè)計重點就不同。

二、采集目標(biāo)用戶的習(xí)慣交互方式

不同類型的目標(biāo)用戶有不同的交互習(xí)慣。這種習(xí)慣的交互方式往往來源于其原有的針對現(xiàn)實的交互流程、已有軟件工具的交互流程。

當(dāng)然還要在此基礎(chǔ)上通過調(diào)研分析找到用戶希望達(dá)到的交互效果，并且以流程確認(rèn)下來。

三、提示和引導(dǎo)用戶

軟件是用戶的工具。因此應(yīng)該由用戶來操作和控制軟件。軟件響應(yīng)用戶的動作和設(shè)定的規(guī)則。

對于用戶交互的結(jié)果和反饋，提示用戶結(jié)果和反饋信息，引導(dǎo)用戶進行用戶需要的下一步操作。

四、一致性原則

設(shè)計目標(biāo)一致

軟件中往往存在多個組成部分(組件、元素)。不同組成部分之間的交互設(shè)計目標(biāo)需要一致。

例如：如果以電腦操作初級用戶作為目標(biāo)用戶，以簡化界面邏輯為設(shè)計目標(biāo)，那么該目標(biāo)需要貫徹軟件(軟件包)整體，而不是局部。

元素外觀一致

交互元素的外觀往往影響用戶的交互效果。同一個(類)軟件采用一致風(fēng)格的外觀，對于保持用戶焦點，改進交互效果有很大幫助。遺憾的是如何確認(rèn)元素外觀一致沒有特別統(tǒng)一的衡量方法。因此需要對目標(biāo)用戶進行調(diào)查取得反饋。

交互行為一致

在交互模型中，不同類型的元素用戶觸發(fā)其對應(yīng)的行為事件后，其交互行為需要一致。

例如：所有需要用戶確認(rèn)操作的對話框都至少包含確認(rèn)和放棄兩個按鈕。

對于交互行為一致性原則比較極端的理念是相同類型的交互元素所引起的行為事件相同。但是我們可以看到這個理念雖然在大部分情況下正確，但是的確有相反的例子證明不按照這個理念設(shè)計，會更加簡化用戶操作流程。

五、可用性原則

可理解

軟件要為用戶使用，用戶必須可以理解軟件各元素對應(yīng)的功能。

如果不能為用戶理解，那么需要提供一種非破壞性的途徑，使得用戶可以通過對該元素的操作，理解其對應(yīng)的功能。

比如：刪除操作元素。用戶可以點擊刪除操作按鈕，提示用戶如何刪除操作或者是否確認(rèn)刪除操作，用戶可以更加詳細(xì)的理解該元素對應(yīng)的功能，同時可以取消該操作。

可達(dá)到

用戶是交互的中心，交互元素對應(yīng)用戶需要的功能。因此交互元素必須可以被用戶控制。

用戶可以用諸如鍵盤、鼠標(biāo)之類的交互設(shè)備通過移動和觸發(fā)已有的交互元素達(dá)到其它在此之前不可見或者不可交互的交互元素。

要注意的是交互的次數(shù)會影響可達(dá)到的效果。當(dāng)一個功能被深深隱藏(一般來說超過4層)那么用戶達(dá)到該元素的幾率就大大降低了。

可達(dá)到的效果也同界面設(shè)計有關(guān)。過于復(fù)雜的界面會影響可達(dá)到的效果。(參考簡單導(dǎo)向原則)

可控制

軟件的交互流程，用戶可以控制。

功能的執(zhí)行流程，用戶可以控制。

如果確實無法提供控制，則用能為目標(biāo)用戶理解的方式提示用戶。

網(wǎng)頁設(shè)計是面試?網(wǎng)頁設(shè)計(webdesign，又稱為WebUIdesign，WUIdesign，WUI)，是根據(jù)企業(yè)希望向瀏覽者傳遞的信息(包括產(chǎn)品、服務(wù)、理念、文化)，進行網(wǎng)站功能策劃，然后進行的頁面設(shè)計美化工作。作為企業(yè)對外宣傳物料的其中一種，精美的網(wǎng)頁設(shè)計，對于提升企業(yè)的互聯(lián)網(wǎng)品牌形象至關(guān)重要。

網(wǎng)頁設(shè)計一般分為三種大類：功能型網(wǎng)頁設(shè)計(服務(wù)網(wǎng)站&B/S軟件用戶端)、形象型網(wǎng)頁設(shè)計(品牌形象站)、信息型網(wǎng)頁設(shè)計(門戶站)。設(shè)計網(wǎng)頁的目的不同，應(yīng)選擇不同的網(wǎng)頁策劃與設(shè)計方案。

網(wǎng)頁設(shè)計的工作目標(biāo)，是通過使用更合理的顏色、字體、圖片、樣式進行頁面設(shè)計美化，在功能限定的情況下，盡可能給予用戶完美的視覺體驗。高級的網(wǎng)頁設(shè)計甚至?xí)紤]到通過聲光、交互等來實現(xiàn)更好的視聽感受。

網(wǎng)頁設(shè)計主要以Adobe產(chǎn)品為主，常見的工具包括FW、PS、FL、DW、CDR、AI等，其中DW是代碼工具，其他是圖形圖像和FL動畫工具。還有最近幾年Adobe新出的EdgeReflow、EdgeCode、Muse。

網(wǎng)站伴隨著網(wǎng)絡(luò)的快速發(fā)展而快速興起，作為上網(wǎng)的主要依托，由于人們使用網(wǎng)絡(luò)的頻繁而變得非常的重要。由于企業(yè)需要通過網(wǎng)站呈現(xiàn)產(chǎn)品、服務(wù)、理念、文化，或向大眾提供某種功能服務(wù)。因此網(wǎng)頁設(shè)計必須首先明確設(shè)計站點的目的和用戶的需求，從而做出切實可行的設(shè)計方案。

專業(yè)的網(wǎng)頁設(shè)計，需要經(jīng)歷以下幾個階段：

需要根據(jù)消費者的需求、市場的狀況、企業(yè)自身的情況等進行綜合分析，從而建立起營銷模型。

以業(yè)務(wù)目標(biāo)為中心進行功能策劃，制作出欄目結(jié)構(gòu)關(guān)系圖。

以滿足用戶體驗設(shè)計為目標(biāo)，使用axurerp或同類軟件進行頁面策劃，制作出交互用例。

以頁面精美化設(shè)計為目標(biāo)，使用PS、AI等軟件，調(diào)整，使用更合理的顏色、字體、圖片、樣式進行頁面設(shè)計美化。

根據(jù)用戶反饋，進行頁面設(shè)計調(diào)整，以達(dá)到最優(yōu)效果。

業(yè)務(wù)邏輯清晰，能清楚的向瀏覽者傳遞信息，瀏覽者能方便的尋找到自己想要查看的東西

用戶體驗良好，用戶在視覺上，操作上都能感到很舒適

頁面設(shè)計精美，用戶能得到美好的視覺體驗，不會為一些糟糕的細(xì)節(jié)而感到不適

建站目標(biāo)明晰，網(wǎng)頁很好的實現(xiàn)了企業(yè)建站的目標(biāo)，向用戶傳遞了某種信息，或展示了產(chǎn)品、服務(wù)、理念、文化

主題明確

在目標(biāo)明確的基礎(chǔ)上，完成網(wǎng)站的構(gòu)思創(chuàng)意即總體設(shè)計方案。對網(wǎng)站的整體風(fēng)格和特色作出定位，規(guī)劃網(wǎng)站的組織結(jié)構(gòu)。

Web站點應(yīng)針對所服務(wù)對象(機構(gòu)或人)的不同而具有不同的形式。有些站點只提供簡潔文本信息;有些則采用多媒體表現(xiàn)手法，提供華麗的圖像、閃爍的燈光、復(fù)雜的頁面布置，甚至可以下載聲音和錄像片段。好的Web站點把圖形表現(xiàn)手法和有效的組織與通信結(jié)合起來。

為了做到主題鮮明突出，要點明確，應(yīng)該使配色和圖片圍繞預(yù)定的主題;調(diào)動一切手段充分表現(xiàn)網(wǎng)站點的個性和情趣，辦出網(wǎng)站的特點。

充分利用已有信息，如客戶手冊.公共關(guān)系文檔.技術(shù)手冊和數(shù)據(jù)庫等。

設(shè)計思路

簡潔實用：這是非常重要的，網(wǎng)絡(luò)特殊環(huán)境下，盡量以最高效率的方式將用戶所要想得到的信息傳送給他就是最好的，所以要去掉所有的冗余的東西。

使用方便：同第一個是相一致的，滿足使用者的要求，網(wǎng)頁做得越適合使用，就越顯示出其功能美

整體性好：一個網(wǎng)站強調(diào)的就是一個整體，只有圍繞一個統(tǒng)一的目標(biāo)所做的設(shè)計才是成功的。

網(wǎng)站形象突出：一個符合美的標(biāo)準(zhǔn)的網(wǎng)頁是能夠使網(wǎng)站的形象得到最大限度的提升的。

頁面用色協(xié)調(diào)，布局符合形式美的要求：布局有條理，充分利用美的形式，使網(wǎng)頁富有可欣賞性，提高檔次。當(dāng)然雅俗共賞是人人都追求的。

交互式強：發(fā)揮網(wǎng)絡(luò)的優(yōu)勢，是每個使用者都參與到其中來，這樣的設(shè)計才能算成功的設(shè)計。這樣的網(wǎng)頁才算真正的美的設(shè)計。

版式設(shè)計

網(wǎng)頁設(shè)計作為一種視覺語言，特別講究編排和布局，雖然主頁的設(shè)計不等同于平面設(shè)計，但它們有許多相近之處。

版式設(shè)計通過文字圖形的空間組合，表達(dá)出和諧與美。

多頁面站點頁面的編排設(shè)計要求把頁面之間的有機聯(lián)系反映出來，特別要求處理好頁面之間和頁面內(nèi)的秩序與內(nèi)容的關(guān)系。為了達(dá)到最佳的視覺表現(xiàn)效果，反復(fù)推敲整體布局的合理性，使瀏覽者有一個流暢的視覺體驗。

色彩作用

色彩是藝術(shù)表現(xiàn)的要素之一。在網(wǎng)頁設(shè)計中，設(shè)計師根據(jù)和諧、均衡和重點突出的原則，將不同的色彩進行組合.搭配來構(gòu)成美麗的頁面。根據(jù)色彩對人們心理的影響，合理地加以運用。如果企業(yè)有CIS(企業(yè)形象識別系統(tǒng))，應(yīng)按照其中的VI進行色彩運用。

形式內(nèi)容

為了將豐富的意義和多樣的形式組織成統(tǒng)一的頁面結(jié)構(gòu)，形式語言必須符合頁面的內(nèi)容，體現(xiàn)內(nèi)容的豐富含義。

靈活運用對比與調(diào)和、對稱與平衡、節(jié)奏與韻律以及留白等手段，通過空間、文字、圖形之間的相互關(guān)系建立整體的均衡狀態(tài)，產(chǎn)生和諧的美感。

三維空間的構(gòu)成

網(wǎng)絡(luò)上的三維空間是一個假想空間，這種空間關(guān)系需借助動靜變化.圖像的比例關(guān)系等空間因素表現(xiàn)出來。在頁面中，圖片、文字位置前后疊壓，或頁面位置變化所產(chǎn)生的視覺效果都各不相同。通過圖片、文字前后疊壓所構(gòu)成的空間層次不太適合網(wǎng)頁設(shè)計，根據(jù)現(xiàn)有瀏覽器的特點，網(wǎng)頁設(shè)計適合比較規(guī)范、簡明的頁面，盡管這種疊壓排列能產(chǎn)生強節(jié)奏的空間層次，視覺效果強烈。

網(wǎng)頁上常見的是頁面上、下、左、右、中位置所產(chǎn)生的空間關(guān)系，以及疏密的位置關(guān)系所產(chǎn)生的空間層次，這兩種位置關(guān)系使產(chǎn)生的空間層次富有彈性，同時也讓人產(chǎn)生輕松或緊迫的心理感受。

虛擬現(xiàn)實

人們已不滿足于HTML(標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用)編制的二維Web頁面，三維世界的誘惑開始吸引更多的人，虛擬現(xiàn)實要在Web網(wǎng)上展示其迷人的風(fēng)采，于是VRML語言出現(xiàn)了。VRML是一種面向?qū)ο蟮恼Z言，它類似Web超級鏈接所使用的HTML語言，也是一種基于文本的語言，并可以運行在多種平臺之上，只不過能夠更多地為虛擬現(xiàn)實環(huán)境服務(wù)。

多媒體

網(wǎng)絡(luò)資源的優(yōu)勢之一是多媒體功能。要吸引瀏覽者注意力，網(wǎng)頁的內(nèi)容可以用三維動畫、FLASH等來表現(xiàn)。但要由于網(wǎng)絡(luò)寬帶的限制，在使用多媒體的形式表現(xiàn)網(wǎng)頁的內(nèi)容時不得不考慮客戶端的傳輸速度。

便于使用

如果人們看不懂或很難看懂您的網(wǎng)站，那么，他如何了解你的企業(yè)信息和服務(wù)項目呢?使用一些醒目的標(biāo)題或文字來突出您的產(chǎn)品與服務(wù)。并且即使您擁有最棒的產(chǎn)品，如果客戶從您的網(wǎng)站上看不清楚您在介紹什么或不清楚如何受益的話，他們是不會喜歡您的網(wǎng)站的，這對于網(wǎng)頁設(shè)計而言是失敗的。

導(dǎo)向清晰

網(wǎng)頁設(shè)計中導(dǎo)航使用超文本鏈接或圖片鏈接，使人們能夠在您的網(wǎng)站上自由前進或后退，而不必讓他們使用瀏覽器上的前進或后退。我們在所有的圖片上使用“ALT”標(biāo)識符注明圖片名稱或解釋，以便那些不愿意自動加載圖片的觀眾能夠了解圖片的含義。

快速下載時間

很多的瀏覽者不會進入需要等待5分鐘下載時間才能進入的網(wǎng)站，在互聯(lián)網(wǎng)上30秒的等待時間與我們平常10分鐘等待時間的感覺相同。因此，建議在網(wǎng)頁設(shè)計中盡量避免使用過多的圖片及體積過大的圖片。主要頁面的容量應(yīng)確保普通瀏覽者頁面等待時間不超過10秒。

非圖形內(nèi)容

在必要時適當(dāng)使用動態(tài)“Gif”圖片，為減少動畫容量，應(yīng)用巧妙設(shè)計的Java動畫可以用很小的容量使圖形或文字產(chǎn)生動態(tài)的效果。但是，由于在互聯(lián)網(wǎng)瀏覽的大多是一些尋找信息的人們，仍然建議您要確定您的網(wǎng)站將為他們提供的是有價值的內(nèi)容，而不是過度的裝飾。

反饋與溝通

讓客戶明確您所能提供的產(chǎn)品或服務(wù)并讓他們非常方便地訂購是您獲得成功的重要因素。如果客戶在您的網(wǎng)站上產(chǎn)生了購買產(chǎn)品或服務(wù)的欲望，您是否能夠讓他們盡快實現(xiàn)嗎?是在線還是離線?

因此，如果是產(chǎn)品或服務(wù)介紹網(wǎng)站，應(yīng)該有留言、電話、在線咨詢等功能或信息呈現(xiàn)。

在企業(yè)的Web站點上，要認(rèn)真回復(fù)用戶的電子郵件和傳統(tǒng)的聯(lián)系方式如信件.電話垂詢和傳真，做到有問必答。最好將用戶的用意進行分類，如售前一般了解.售后服務(wù)等，由相關(guān)部門處理，使網(wǎng)站訪問者感受到企業(yè)的真實存在并由此產(chǎn)生信任感。

測試改進

測試實際上是模擬用戶詢問網(wǎng)站的過程，用以發(fā)現(xiàn)問題并改進網(wǎng)頁設(shè)計。應(yīng)該與用戶共同安排網(wǎng)站測試。

內(nèi)容更新

企業(yè)Web站點建立后，要不斷更新網(wǎng)頁內(nèi)容。站點信息的不斷更新，讓瀏覽者了解企業(yè)的發(fā)展動態(tài)和網(wǎng)上職務(wù)等，同時也會幫助企業(yè)建立良好的形象。

注意不要許諾你實現(xiàn)不了的東西，在你真正有能力處理回復(fù)之前，不要懇求用戶輸入信息或羅列一大堆自己不能及時答復(fù)的電話號碼。如果要求訪問者自愿提供其個人信息，應(yīng)公布并認(rèn)真履行個人隱私保承諾。

1.輸入控件的自動聚焦和可用鍵盤切換輸入焦點

使用JavaScript實現(xiàn)頁面加載完成后立即自動聚焦(focus)到第一個輸入控件?？捎肨AB鍵(IE缺省實現(xiàn))或方向鍵切換聚焦到下一個輸入控件。

2.可用Enter(或Ctrl+Enter)鍵提交，確保和點擊提交按鈕的效果是相同的

不要在提交按鈕上加入onClick=”…”這樣的JavaScript代碼。

3.鼠標(biāo)動作提示和回應(yīng)

對用戶的鼠標(biāo)定位操作，當(dāng)移動到可響應(yīng)的位置上時，應(yīng)給予視覺或聽覺的提示。

4.盡可能早的在客戶端完成輸入數(shù)據(jù)合法性驗證

輸入數(shù)據(jù)的合法性檢驗應(yīng)該在客戶端使用JavaScript進行驗證。除非驗證只能在服務(wù)器端完成，否則驗證工作應(yīng)在最早能完成的情況下進行。

5.根據(jù)應(yīng)用場景決定在表單頁面和提交后返回頁面間是否使用中間過渡頁面

根據(jù)應(yīng)用場景，決定是否顯示接收表單頁面(表單頁面和提交后返回頁面間的中間過渡頁面)，以及使用何種方式顯示接收表單頁面。

6.防止表單重復(fù)提交處理

對提交按鈕點擊后做變灰處理避免在網(wǎng)絡(luò)響應(yīng)較慢情況下用戶重復(fù)提交同一個表單。使用頁面過期失效避免用戶后退瀏覽重復(fù)提交表單。

7.頁面鏈接是打開新窗口、使用原窗口還是彈出窗口的原則

一般而言