我們應該都了解過設計的大概種類了。而其中我們都應該聽過UI設計以及網頁設計吧。很多人都認為這倆者是沒有區別的，其實不然。下面我們來了解下什么是UI設計什么是網頁設計吧，最后我們再總結區別。??

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

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

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

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

　研究界面

　圖形設計師Graphic?UI?designer?

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

??這些設計師大多是美術院校畢業的，其中大部分是有美術設計教育背景，例如工業外形設計，裝潢設計，信息多媒體設計等。?                                                                                             

人與界面?

??交互設計師interaction?designer?

??在圖形界面產生之前，長期以來UI設計師就是指交互設計師。交互設計師的工作內容就是設計軟件的操作流程，樹狀結構，軟件的結構與操作規范(spec)等。一個軟件產品在編碼之前需要作的就是交互設計，并且確立交互模型，交互規范。?

??交互設計師一般都是軟件工程師背景居多，也有視覺設計師轉行進入的。???研究人?

??用戶測試/研究工程師User?experience?engineer???任何的產品為了保證質量都需要測試，軟件的編碼需要測試，自然UI設計也需要被測試。這個測試和編碼沒有任何關系，主要是測試交互設計的合理性以及圖形設計的美觀性。測?

??試方法一般都是采用焦點小組，用目標用戶問卷的形式來衡量UI設計的合理性。這個職位很重要，如果沒有這個職位，UI設計的好壞只能憑借設計師的經驗或者領導的審美來評判，這樣就會給企業帶來嚴重的風險性。?

??用戶研究工程師一般是心理學人文學背景比較合適。???綜上所述UI設計師就是：軟件圖形設計師、交互設計師、用戶研究工程師。

??1.簡易性?

??界面的簡潔是要讓用戶便于使用、便于了解產品，并能減少用戶發生錯誤選擇的可能性。??                                                                                                                                                                                                                                                                                                                                                                            ?2.用戶語言?

??界面中要使用能反映用戶本身的語言，而不是游戲設計者的語言。?

??3.記憶負擔最小化?

??人腦不是電腦，在設計界面時必須要考慮人類大腦處理信息的限度。人類的短期記憶有限且極不穩定，24小時內存在約25%的遺忘率。所以對用戶來說，瀏覽信息要比記憶更容易。???                                                                                                                                                                                                                                  4.一致性?

??它是每一個優秀界面都具備的特點。界面的結構必須清晰且一致，風格必須與產品內容相一致。???                                                                                                        5.清楚?

??在視覺效果上便于理解和使用。??                                                                                                                                                                                                        6.用戶的熟悉程度?

??用戶可通過已掌握的知識來使用界面，但不應超出一般常識。?

??7.從用戶習慣考慮?

??想用戶所想，做用戶所做。用戶總是按照他們自己的方法理解和使用。

通過比較兩個不同世界(真實與虛擬)的事物，完成更好的設計。如：書籍對比竹簡。???8.排列?

??一個有序的界面?能讓用戶輕松的使用。???9.安全性?

??用戶能自由的作出選擇，且所有選擇都是可逆的。在用戶作出危險的選擇時有信息介入系統的提示。???10.靈活性?

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

??高效率和用戶滿意度是人性化的體現。應具備專家級和初級玩家系統，即用戶可依據自己的習慣定制界面，并能保存設置。?

??UI常見的手機UI???一、確認目標用戶?

??在UI設計過程中，需求設計角色會確定軟件的目標用戶，獲取最終用戶和直接用戶的需求。?

??用戶交互要考慮到目標用戶的不同引起的交互設計重點的不同。?

??例如：對于科學用戶和對于電腦入門用戶的設計重點就

不同。?

??二、采集目標用戶的習慣交互方式?

??不同類型的目標用戶有不同的交互習慣。這種習慣的交互方式往往來源于其原有的針對現實的交互流程、已有軟件工具的交互流程。?

??當然還要在此基礎上通過調研分析找到用戶希望達到的交互效果，并且以流程確認下來。???三、提示和引導用戶?

??軟件是用戶的工具。因此應該由用戶來操作和控制軟件。軟件響應用戶的動作和設定的規則。?

??對于用戶交互的結果和反饋，提示用戶結果和反饋信息，引導用戶進行用戶需要的下一步操作。???四、一致性原則???設計目標一致?

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

??例如：如果以電腦操作初級用戶作為目標用戶，以簡化界面邏輯為設計目標，那么該目標需要貫徹軟件(軟件包)整體，而不是局部。???元素外觀一致?

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

??在交互模型中，不同類型的元素用戶觸發其對應的行為事件后，其交互行為需要一致。?

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

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

??軟件要為用戶使用，用戶必須可以理解軟件各元素對應的功能。?

??如果不能為用戶理解，那么需要提供一種非破壞性的途徑，使得用戶可以通過對該元素的操作，理解其對應的功能。???比如：刪除操作元素。用戶可以點擊刪除操作按鈕，提示用戶如何刪除操作或者是否確認刪除操作，用戶可以更加詳細的理解該元素對應的功能，同時可以取消該操作。???可達到?

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

??用戶可以用諸如鍵盤、鼠標之類的交互設備通過移動和觸發已有的交互元素達到其它在此之前不可見或者不可交互的交互元素。?

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

??可達到的效果也同界面設計有關。過于復雜的界面會影響可達到的效果。(參考簡單導向原則)???可控制?

??軟件的交互流程，用戶可以控制。???功能的執行流程，用戶可以控制。?

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

??網頁設計是面試???網頁設計(web?design，又稱為Web?UI?design，WUI?design，WUI)，是根據企業希望向瀏覽者傳遞的信息(包括產品、服務、理念、文化)，進行網站功能策劃，然后進行的頁面設計美化工作。作為企業對外宣傳物料的其中一種，精美的網頁設計，對于提升企業的互聯網品牌形象至關重要。?

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

??網頁設計的工作目標，是通過使用更合理的顏色、字體、圖片、樣式進行頁面設計美化，在功能限定的情況下，盡可能給予用戶完美的視覺體驗。高級的網頁設計甚至會考慮到通過聲光、交互等來實現更好的視聽感受。?

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

??網站伴隨著網絡的快速發展而快速興起，作為上網的主要依托，由于人們使用網絡的頻繁而變得非常的重要。由于企業需要通過網站呈現產品、服務、理念、文化，或向大眾提供某種功能服務。因此網頁設計必須首先明確設計站點的目的和用戶的需求，從而做出切實可行的設計方案。???專業的網頁設計，需要經歷以下幾個階段：?

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

??以業務目標為中心進行功能策劃，制作出欄目結構關系圖。?

??以滿足用戶體驗設計為目標，使用axure?rp或同類軟件進行頁面策劃，制作出交互用例。

以頁面精美化設計為目標，使用PS、AI等軟件，調整，使用更合理的顏色、字體、圖片、樣式進行頁面設計美化。???根據用戶反饋，進行頁面設計調整，以達到最優效果。???業務邏輯清晰，能清楚的向瀏覽者傳遞信息，瀏覽者能方便的尋找到自己想要查看的東西?

??用戶體驗良好，用戶在視覺上，操作上都能感到很舒適???頁面設計精美，用戶能得到美好的視覺體驗，不會為一些糟糕的細節而感到不適?

??建站目標明晰，網頁很好的實現了企業建站的目標，向用戶傳遞了某種信息，或展示了產品、服務、理念、文化???主題明確?

??在目標明確的基礎上，完成網站的構思創意即總體設計方案。對網站的整體風格和特色作出定位，規劃網站的組織結構。?

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

??為了做到主題鮮明突出，要點明確，應該使配色和圖片圍繞預定的主題;調動一切手段充分表現網站點的個性和情趣，辦出網站的特點。

充分利用已有信息，如客戶手冊.公共關系文檔.技術手冊和數據庫等。???設計思路?

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

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

??整體性好：一個網站強調的就是一個整體，只有圍繞一個統一的目標所做的設計才是成功的。?

??網站形象突出：一個符合美的標準的網頁是能夠使網站的形象得到最大限度的提升的。?

??頁面用色協調，布局符合形式美的要求：布局有條理，充分利用美的形式，使網頁富有可欣賞性，提高檔次。當然雅俗共賞是人人都追求的。?

??交互式強：發揮網絡的優勢，是每個使用者都參與到其中來，這樣的設計才能算成功的設計。這樣的網頁才算真正的美的設計。???版式設計?

??網頁設計作為一種視覺語言，特別講究編排和布局，雖然主頁的設計不等同于平面設計，但它們有許多相近之處。???版式設計通過文字圖形的空間組合，表達出和諧與美。?

多頁面站點頁面的編排設計要求把頁面之間的有機聯系反映出來，特別要求處理好頁面之間和頁面內的秩序與內容的關系。為了達到最佳的視覺表現效果，反復推敲整體布局的合理性，使瀏覽者有一個流暢的視覺體驗。???色彩作用?

??色彩是藝術表現的要素之一。在網頁設計中，設計師根據和諧、均衡和重點突出的原則，將不同的色彩進行組合.搭配來構成美麗的頁面。?根據色彩對人們心理的影響，合理地加以運用。如果企業有CIS(企業形象識別系統)，應按照其中的VI進行色彩運用。???形式內容?

??為了將豐富的意義和多樣的形式組織成統一的頁面結構，形式語言必須符合頁面的內容，體現內容的豐富含義。???靈活運用對比與調和、對稱與平衡、節奏與韻律以及留白等手段，通過空間、文字、圖形之間的相互關系建立整體的均衡狀態，產生和諧的美感。???三維空間的構成?

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

??網頁上常見的是頁面上、下、左、右、中位置所產生的空間關系，以及疏密的位置關系所產生的空間層次，這兩種位置關系使產生的空間層次富有彈性，同時也讓人產生輕松或緊迫的心理感受。???虛擬現實?

??人們已不滿足于HTML(標準通用標記語言下的一個應用)編制的二維Web頁面，三維世界的誘惑開始吸引更多的人，虛擬現實要在Web網上展示其迷人的風采，于是VRML語言出現了。VRML是一種面向對象的語言，它類似Web超級鏈接所使用的HTML語言，也是一種基于文本的語言，并可以運行在多種平臺之上，只不過能夠更多地為虛擬現實環境服務。???多媒體?

??網絡資源的優勢之一是多媒體功能。要吸引瀏覽者注意力，網頁的內容可以用三維動畫、FLASH等來表現。但要由于網絡寬帶的限制，在使用多媒體的形式表現網頁的內容時不得不考慮客戶端的傳輸速度。???便于使用?

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

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

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

??在必要時適當使用動態“Gif”圖片，為減少動畫容量，應用巧妙設計的Java動畫可以用很小的容量使圖形或文字產生動態的效果。但是，由于在互聯網瀏覽的大多是一些尋找信息的人們，仍然建議您要確定您的網站將為他們提供的是有價值的內容，而不是過度的裝飾。???反饋與溝通

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

??因此，如果是產品或服務介紹網站，應該有留言、電話、在線咨詢等功能或信息呈現。?

??在企業的Web站點上，要認真回復用戶的電子郵件和傳統的聯系方式如信件.電話垂詢和傳真，做到有問必答。最好將用戶的用意進行分類，如售前一般了解.售后服務等，由相關部門處理，使網站訪問者感受到企業的真實存在并由此產生信任感。???測試改進?

??測試實際上是模擬用戶詢問網站的過程，用以發現問題并改進網頁設計。應該與用戶共同安排網站測試。???內容更新?

??企業Web站點建立后，要不斷更新網頁內容。站點信息的不斷更新，讓瀏覽者了解企業的發展動態和網上職務等，同時也會幫助企業建立良好的形象。?

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

1.?輸入控件的自動聚焦和可用鍵盤切換輸入焦點???使用JavaScript實現頁面加載完成后立即自動聚焦(focus)到第一個輸入控件。可用TAB鍵(IE缺省實現)或方向鍵切換聚焦到下一個輸入控件。?

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

??不要在提交按鈕上加入onClick=”…”這樣的JavaScript代碼。???3.鼠標動作提示和回應?

??對用戶的鼠標定位操作，當移動到可響應的位置上時，應給予視覺或聽覺的提示。?

??4.盡可能早的在客戶端完成輸入數據合法性驗證???輸入數據的合法性檢驗應該在客戶端使用JavaScript進行驗證。除非驗證只能在服務器端完成，否則驗證工作應在最早能完成的情況下進行。?

??5.根據應用場景決定在表單頁面和提交后返回頁面間是否使用中間過渡頁面?

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

??6.防止表單重復提交處理?

??對提交按鈕點擊后做變灰處理避免在網絡響應較慢情況下用戶重復提交同一個表單。使用頁面過期失效避免用戶后退瀏覽重復提交表單。?

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

??一般而言，首頁上鏈接可以使用target=”_blank”屬性打開新窗口，而其他頁面上的鏈接都應使用原窗口或彈出窗口。如果鏈接頁面內容相對原頁面來說不重要，是附屬性質的，可以使用彈出窗口方式。?

??8.盡可能少的排列可選項，盡可能少的安排操作步驟???根據用戶操作習慣安排盡可能少的操作菜單選項，同時要保證盡可能少的操作步驟。?

??9.操作邏輯無漏洞，保證數據是操作安全的?

??多個頁面間的操作和同個頁面上的多個操作間的邏輯關系在設計上是安全和嚴謹的。保證不會出現不被允許的用戶操作組合，至少不會因為用戶的不適當的操作導致出錯。???首先從感念上去區分：?

??網頁設計是基于瀏覽器的編碼呈現的?

??UI設計意思是用戶界面設計，主指用戶使用界面設計、人機交互界面設計，分為界面(GUI)和交互。?

??軟件界面設計：軟件分為2種，BS和CS，具體概念可以去百度搜索，BS是基于瀏覽器展現的，就比如一般的管理平臺，或者郵箱之類的;?

CS一般是需要安裝才能使用的軟件，比如QQ、360、或者我們手機上的應用。?

??軟件界面是用戶使用的，所以比較注重用戶的使用，并且不同設備上的使用形式也不同，比如醫院的機器，地鐵站售票機器，銀行辦理業務機器等都要考慮人與機器之間的交互，乃至我們的電腦系統都是考慮與機器的交互的。???網頁設計的交互算人機交互嗎??

??網頁設計的交互基本都是邏輯性的交互，不屬于人機交互，所以網頁設計不屬于UI設計。?

??如果還有疑惑的話，可以查下UI設計的由來，是由過去操作機床的界面延伸過來的。?

??還有些人吧平面設計也歸為UI設計，那就更不對了。UI設計現在這么火爆也是因為手機應用屬于UI設計，當智能手機之前只有做軟件才叫UI設計，做網站還是叫網站設計。

以上【 UI設計與網頁設計的區別 】的內容由達設互動（http://www.allclubs.com.cn）為您提供，本文網址 ： http://www.allclubs.com.cn/wangzhanjianshezhishi/122.html ，轉載請注明出處！更多有關深圳網站建設，微信小程序、電商平臺建設、系統開發等互聯網應用服務都可以聯系我們。熱線：130 7784 6582