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

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

 

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

 

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

 

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

 



 

IT基礎知識

——

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

 

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

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

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

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

 

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

 

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

 

網(wǎng)頁(yè)設計：如果頁(yè)面加載時(shí)間過(guò)長(cháng)，則說(shuō)明內容過(guò)多或內容過(guò)于復雜。圖像文件可以壓縮，資源可以調整和重新導出，頁(yè)面可以修剪多余的內容。

 

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

 

UI：控件必須盡可能地響應，所以界面必須足夠簡(jiǎn)單，交互性是即時(shí)的。

 

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

 

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

 

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

 

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

 

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

——

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

一旦原型被批準，它就會(huì )被發(fā)送給開(kāi)發(fā)人員進(jìn)行編碼。

 

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

——

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

 

Web開(kāi)發(fā)主要分為兩大類(lèi)：

 

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

 

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

 

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

 

用戶(hù)界面(UI)

—

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

 

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

 

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

 

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

 

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

 

用戶(hù)體驗（UX）

——

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

 

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

 

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

 

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