網(wǎng)頁設(shè)計、網(wǎng)頁開發(fā)、UI和UX：有什么區(qū)別？發(fā)布者：本站     時間：2022-04-01 09:04:21

網(wǎng)頁設(shè)計和開發(fā)有什么區(qū)別？那么UI與UX呢？這些劃分是什么意思？為什么有這么多縮寫？？難道技術(shù)人員不希望一切都對用戶友好！？

 

如果您剛開始設(shè)計網(wǎng)站，那么接觸科技行業(yè)的術(shù)語會感覺很像聽一門外語——除了大多數(shù)外語都有韻律和理由。如果您想要一個成功的網(wǎng)站，您需要與一家專業(yè)的網(wǎng)頁設(shè)計公司合作。

 

這就是本文的目的。如果你正在設(shè)計你的第一個網(wǎng)站，或者只是想更好地了解這個行業(yè)，素馬設(shè)計在這里解釋和剖析當(dāng)今科技中最常用和最麻煩的四個術(shù)語：UI、UX、網(wǎng)頁設(shè)計和網(wǎng)頁開發(fā)。閱讀本文后，您不僅會了解每個領(lǐng)域的作用，還會了解您的業(yè)務(wù)最需要關(guān)注的領(lǐng)域。

 

有心人寫給有心人的文章很長，如果您有建站需求，或者您向往網(wǎng)頁設(shè)計工作，請耐心閱讀。

 



 

IT基礎(chǔ)知識

——

讓我們從一些基本定義開始，以減輕您最初的困惑，并在我們深入研究之前為您普及一些背景信息：

 

網(wǎng)頁設(shè)計-與設(shè)計網(wǎng)站的視覺效果和可用性相關(guān)的所有內(nèi)容的廣泛類別。UI和UX設(shè)計以及許多其他領(lǐng)域都包含在網(wǎng)頁設(shè)計中。

Web開發(fā)——制作網(wǎng)站的技術(shù)部分，專注于代碼。Web開發(fā)進一步分為“前端”和“后端”，如下所述。

用戶界面(UI)—一種專門的網(wǎng)頁設(shè)計，處理人們用來與網(wǎng)站或應(yīng)用程序交互的控件，包括按鈕顯示和手勢控件。

用戶體驗(UX)—網(wǎng)頁設(shè)計的另一種專業(yè)化，它處理用戶在使用網(wǎng)站或應(yīng)用程序時的行為和感受。UX設(shè)計封裝了許多其他領(lǐng)域，但從用戶的角度來看待它們。

 

正如您已經(jīng)看到的那樣，這些領(lǐng)域都不是排他性的，并且存在大量重疊。Web設(shè)計和開發(fā)只是同一枚硬幣的兩個方面，UI設(shè)計影響UX設(shè)計，Web開發(fā)支持所有這些……與其說哪個領(lǐng)域處理哪些任務(wù)，不如說每個領(lǐng)域如何從不同的角度考慮相同的任務(wù)-看法。

 

例如，讓我們看一下加載時間，這是每個網(wǎng)站的常見問題。每個字段如何處理加載時間：

 

網(wǎng)頁設(shè)計：如果頁面加載時間過長，則說明內(nèi)容過多或內(nèi)容過于復(fù)雜。圖像文件可以壓縮，資源可以調(diào)整和重新導(dǎo)出，頁面可以修剪多余的內(nèi)容。

 

Web開發(fā)：為了加快內(nèi)容加載速度，我們可以嘗試更好的文件壓縮來減小內(nèi)容的文件大小，使用CSSsprite來節(jié)省帶寬，或者使用內(nèi)容交付網(wǎng)絡(luò)來縮短特定地理區(qū)域的加載時間。

 

UI：控件必須盡可能地響應(yīng)，所以界面必須足夠簡單，交互性是即時的。

 

用戶體驗：用戶“彈跳”（片刻后離開您的網(wǎng)站）的可能性隨著加載時間的每一秒而增加，因此在解決整個網(wǎng)站范圍內(nèi)的問題之前，我們應(yīng)該優(yōu)先減少主頁和登錄頁面的加載時間.

 

您還想?yún)^(qū)分網(wǎng)站和應(yīng)用程序以及桌面和移動設(shè)備。每個工人都有自己的專長——一些開發(fā)人員在構(gòu)建移動網(wǎng)站方面有更多經(jīng)驗；一些設(shè)計師只專注于應(yīng)用程序，從不做網(wǎng)站。同樣，有很多重疊之處，但如果您正在尋找網(wǎng)站合作公司，請確保您的候選公司能夠處理這些細節(jié)。

 

那么，眾多的網(wǎng)站設(shè)計公司中哪些可以幫助您實現(xiàn)特定的業(yè)務(wù)目標(biāo)？雇用他們時應(yīng)該注意什么？類似素馬設(shè)計這樣的網(wǎng)頁設(shè)計公司，就能很好的全程提供服務(wù)，創(chuàng)建完善而出色的網(wǎng)站。

 

素馬設(shè)計擁有十余年的服務(wù)歷程，專業(yè)的服務(wù)團隊，出色用戶體驗設(shè)計，擅長通過網(wǎng)站產(chǎn)品塑造企業(yè)特質(zhì)，設(shè)計好、工藝好、服務(wù)好；這樣的優(yōu)良設(shè)計公司非常適合長期合作，同樣非常適合熱愛設(shè)計的設(shè)計師加入其中一起向未來。

 

網(wǎng)頁設(shè)計

——

“網(wǎng)頁設(shè)計”是一個有點古老的術(shù)語，可以追溯到一個人處理網(wǎng)站所有設(shè)計方面的日子。按照現(xiàn)代標(biāo)準(zhǔn)，“網(wǎng)頁設(shè)計師”這個詞可能有點含糊。今天，由于技術(shù)和我們對工藝的日益了解，我們有了彩虹般的細分。

 

網(wǎng)頁設(shè)計的子類別包括UI和UX，還包括其他有趣的首字母縮略詞，如IA（信息架構(gòu)，處理站點映射和導(dǎo)航）和CRO（轉(zhuǎn)換率優(yōu)化，微調(diào)站點設(shè)計以增加銷售、注冊或其他特定的行動）。這些子類別有幾十個，隨著設(shè)計師試圖在競爭激烈的市場中獲得更好的工作，每天都會創(chuàng)建新的子類別。

 

一般來說，網(wǎng)頁設(shè)計與網(wǎng)站的視覺效果和功能有關(guān)。這是一個在各個層面都與平面設(shè)計有著內(nèi)在聯(lián)系的領(lǐng)域，并且處理視覺傳達的相同設(shè)計原則。

 

但網(wǎng)頁設(shè)計不僅僅是平面設(shè)計。無論是使用網(wǎng)站還是應(yīng)用程序，設(shè)計師都必須了解經(jīng)常變化的功能、技術(shù)限制、數(shù)字趨勢和用戶期望。

 

網(wǎng)頁設(shè)計中還有一定程度的商業(yè)訣竅：設(shè)計師應(yīng)該了解數(shù)字銷售策略，例如如何放置“號召性用語”（CTA）按鈕來吸引銷售和電子郵件注冊。網(wǎng)站布局嚴重影響用戶行為，但由于它非常細微，一些設(shè)計師比其他設(shè)計師更擅長。

 

網(wǎng)頁設(shè)計師處理傳統(tǒng)的圖形設(shè)計問題，如顏色和排版，以及數(shù)字問題，如為不同的屏幕尺寸選擇最佳美學(xué)。他們還需要了解領(lǐng)導(dǎo)和結(jié)束等業(yè)務(wù)概念，以創(chuàng)建使號召性用語更具吸引力的布局。畢竟，設(shè)計師的職責(zé)有時包括從頭開始制作圖標(biāo)、圖形或界面按鈕，這需要三者的專業(yè)知識。

 

至于具體的工作職責(zé)，設(shè)計過程主要取決于設(shè)計師，只要他們在現(xiàn)有的品牌準(zhǔn)則范圍內(nèi)工作。通常，該過程涉及設(shè)計人員創(chuàng)建設(shè)計原型，然后與實際用戶或利益相關(guān)者一起測試這些原型，然后將反饋整合到未來的設(shè)計中。

 

設(shè)計師還可以制作線框、設(shè)計的基本布局，以準(zhǔn)備原型或模型，即屏幕外觀的像素完美圖像，除非沒有交互性。

 

一旦原型被批準(zhǔn)，它就會被發(fā)送給開發(fā)人員進行編碼。

 

網(wǎng)絡(luò)開發(fā)

——

網(wǎng)頁設(shè)計和開發(fā)的區(qū)別在于代碼的使用。開發(fā)是事情變得技術(shù)化的地方，但好消息是你不必知道你的開發(fā)人員在說什么，只要他們知道（盡管學(xué)習(xí)基礎(chǔ)知識肯定有幫助）。

 

Web開發(fā)主要分為兩大類：

 

前端（又名客戶端）：網(wǎng)站（或應(yīng)用程序）如何在屏幕上顯示的代碼。前端開發(fā)人員負責(zé)將網(wǎng)頁設(shè)計師的愿景變?yōu)楝F(xiàn)實，通常使用HTML、CSS和JavaScript等計算機語言。自然，并非設(shè)計師計劃的所有事情都切實可行，因此前端開發(fā)人員經(jīng)常與設(shè)計師來回工作。

 

后端（又名服務(wù)器端）：“前端”從托管在服務(wù)器上的數(shù)字資源系統(tǒng)中提取。后端開發(fā)人員管理這些幕后資源，對數(shù)據(jù)庫中的數(shù)據(jù)進行編碼并優(yōu)化數(shù)據(jù)的交付方式。他們使用PHP、Ruby、Python、Java或.Net等語言。

 

同樣，全棧開發(fā)人員是可以同時處理前端和后端開發(fā)的人。有時，對于無法負擔(dān)超過一次招聘費用的初創(chuàng)公司來說，它們是一個明智的選擇，但理想情況下，您應(yīng)該擁有一整支具有不同專業(yè)知識的開發(fā)人員團隊。

 

用戶界面(UI)

—

現(xiàn)在我們已經(jīng)解釋了網(wǎng)頁設(shè)計和開發(fā)，我們可以討論更專業(yè)的領(lǐng)域，從用戶界面設(shè)計開始。UI是每個人都無需過多考慮就使用的東西——您無需了解漢堡圖標(biāo)的歷史即可知道三行按鈕是您的菜單。

 

這是大多數(shù)網(wǎng)頁設(shè)計領(lǐng)域的一個持續(xù)原則：如果他們的工作做得很好，你甚至不應(yīng)該注意到他們。這在UI設(shè)計中最為普遍：有了真正直觀的界面，用戶無需考慮即可使用它。

 

如果你必須積極思考如何使用這些控件，這被認為是糟糕的UI設(shè)計。搜索您需要的按鈕或花幾秒鐘弄清楚按鈕的作用都會分散您對使用網(wǎng)站的整體體驗的注意力。UI設(shè)計的目標(biāo)不僅是提供用戶可能想要的所有控件，而且還創(chuàng)建用戶一眼就能理解的不言自明的控件。

 

另一個問題是空間管理。UI設(shè)計師必須在為用戶提供大量選擇和節(jié)省屏幕空間之間找到快樂的媒介。這就是懸?？刂坪屠霾藛蔚燃夹g(shù)的產(chǎn)生方式。UI設(shè)計師的職責(zé)是決定哪些控件需要始終呈現(xiàn)，哪些可以忽略不計，可以完全隱藏或忽略。

 

UI設(shè)計通常與另一個稱為交互設(shè)計的領(lǐng)域相吻合，縮寫為“IxD”。交互設(shè)計專注于用戶與系統(tǒng)交互的所有方式，包括界面以及彈出窗口、聊天和錯誤窗口等區(qū)域。因為交互設(shè)計非常強調(diào)用戶行為，所以它就像是UI和UX設(shè)計的中間點。

 

用戶體驗（UX）

——

在許多方面，從用戶的角度來看，UX就像網(wǎng)頁設(shè)計領(lǐng)域。網(wǎng)頁布局如何影響用戶？UI如何影響用戶？當(dāng)您進入高級階段時，用戶體驗變得更具戰(zhàn)略性，例如“我們?nèi)绾卧O(shè)計頁面以使用戶想要注冊？”

 

可以想象，UX設(shè)計還包含網(wǎng)頁設(shè)計中的許多其他領(lǐng)域。很多人都在談?wù)摗癠IvsUX”，但事實是兩者是一起工作而不是競爭。事實上，有太多的重疊，所有類型的網(wǎng)頁設(shè)計師都可以從了解一點用戶體驗中受益。這正是用戶體驗如何成為一門獨立學(xué)科的原因——聘請個人用戶體驗專家可以減輕團隊其他成員的一系列其他責(zé)任。

 

盡管乍一看似乎是多余的，但實際上用戶體驗設(shè)計與銷售或轉(zhuǎn)化等業(yè)務(wù)目標(biāo)之間存在直接關(guān)聯(lián)。考慮到人類決策的大部分來自情感和直覺，優(yōu)化網(wǎng)站設(shè)計可以鼓勵某些行為并營造更有利于這些行為的氛圍是有道理的。

 

出于這個原因，用戶體驗設(shè)計師還借鑒了圖形設(shè)計原則：用尺寸吸引注意力，用顏色引發(fā)正確的情緒，在屏幕上創(chuàng)建可預(yù)測的視覺流，并將CTA放置在正確的位置。然而，與傳統(tǒng)的平面設(shè)計不同，用戶體驗專家還必須考慮額外的問題，如交互性和時間，使其成為一門完全獨立于所有其他學(xué)科的學(xué)科，同時又與所有其他學(xué)科相互關(guān)聯(lián)。