網(wǎng)頁設(shè)計和開發(fā)之間有什么區(qū)別？UI和UX怎么樣？這些劃分意味著什么？為什么有這么多的首字母縮略詞？技術(shù)人員不希望一切都是用戶友好的！？
上圖：網(wǎng)頁設(shè)計實例
如果你是一個
設(shè)計網(wǎng)站的新手，遇到科技行業(yè)的術(shù)語可能會像聽外語一樣 - 除了大多數(shù)外語都有押韻和理由。但是，與網(wǎng)絡(luò)專業(yè)人士合作是每個企業(yè)都應(yīng)該做的事情; 如果你想要一個成功的網(wǎng)站，你可能需要一個翻譯。
這就是本文的用途。如果你正在設(shè)計你的第一個網(wǎng)站或者只是想更好地了解這個行業(yè)，我們尚略
上海網(wǎng)站設(shè)計建設(shè)公司正好在這里解釋和剖析當(dāng)今技術(shù)中最常用和最麻煩的四個術(shù)語：用戶界面，用戶體驗，網(wǎng)頁設(shè)計和
網(wǎng)站開發(fā)。閱讀本文后，您不僅可以了解每個領(lǐng)域的作用，還可以了解您的業(yè)務(wù)最需要關(guān)注的領(lǐng)域。
IT的基礎(chǔ)知識
上圖：iPhone旁邊的網(wǎng)頁設(shè)計筆記本
讓我們從一些基本定義開始，以便在我們深入探討之前緩解您最初的困惑并提供一些背景知識：
- 網(wǎng)頁設(shè)計 - 與設(shè)計網(wǎng)站的視覺效果和可用性相關(guān)的所有內(nèi)容的廣泛范疇。UI和UX設(shè)計以及許多其他領(lǐng)域都包含在網(wǎng)頁設(shè)計中。
- Web開發(fā) - 網(wǎng)站建設(shè)與制作網(wǎng)站的技術(shù)部分，專注于代碼。Web開發(fā)進一步分為“前端”和“后端”，下面將對此進行說明。
- 用戶界面（UI） - 網(wǎng)頁設(shè)計的專業(yè)化，處理人們用來與網(wǎng)站或應(yīng)用程序交互的控件，包括按鈕顯示和手勢控制。
- 用戶體驗（UX） - 網(wǎng)頁設(shè)計的另一個專業(yè)化，這個涉及用戶行為和使用網(wǎng)站或應(yīng)用程序時的感覺。UX設(shè)計封裝了許多其他領(lǐng)域，但從用戶的角度來看它們。
正如您所看到的，這些區(qū)域都不是唯一的，并且存在大量重疊。網(wǎng)頁設(shè)計和網(wǎng)站建設(shè)開發(fā)只是同一個硬幣的兩個方面，UI設(shè)計影響用戶體驗設(shè)計，網(wǎng)頁開發(fā)支持所有這些...它不是關(guān)于哪些字段處理哪些任務(wù)，而是關(guān)于每個字段如何從不同的角度考慮相同的任務(wù)-視圖。
例如，讓我們看一下加載時間，這是每個網(wǎng)站的常見問題。每個字段如何解決加載時間：
- 網(wǎng)頁設(shè)計：如果頁面加載時間過長，則內(nèi)容太多或內(nèi)容過于復(fù)雜。可以壓縮圖像文件，可以調(diào)整和重新導(dǎo)出資源，并可以修剪多余內(nèi)容的頁面。
- Web開發(fā)：為了加快內(nèi)容加載，我們可以嘗試更好的文件壓縮來減少內(nèi)容的文件大小，CSS sprites可以節(jié)省帶寬或內(nèi)容交付網(wǎng)絡(luò)，以改善特定地理區(qū)域的加載時間。
- UI：控件必須盡可能響應(yīng)，因此界面必須足夠簡單，以便瞬時交互。
- 用戶體驗：用戶“離開”的可能性（在片刻之后離開您的網(wǎng)站）會隨著每一秒的加載時間而增加，因此我們應(yīng)優(yōu)先考慮減少主頁和登錄頁面上的加載時間，然后再解決站點范圍內(nèi)的問題。
在一個完美的世界中，您將為每個領(lǐng)域聘請專家或?qū)＜覉F隊，以便您有專家從各個角度查看您的網(wǎng)站。但是，預(yù)算限制通常意味著選擇一個領(lǐng)域而不是另一個領(lǐng)域，或者 逐個項目地雇用自由職業(yè)者。
偶爾你會找到一個聲稱全部成就的人：
- 能夠編碼的設(shè)計師有時會將自己標(biāo)記為一體化軟件包，但實際上他們比兩個獨立的專家更有限（盡管如果你有一個簡單的網(wǎng)站，有時這可能是一個聰明的雇員）。
- UI設(shè)計師與網(wǎng)頁設(shè)計師有許多重疊的技能，因此有些人會互換使用這些標(biāo)題。
- 用戶體驗和用戶界面經(jīng)常被集中在一起，因為它們都是次專業(yè)化。
- 用戶體驗通常被視為其他職業(yè)的技能，甚至在設(shè)計之外，例如產(chǎn)品管理。
這樣的人在緊要關(guān)頭可能很有用，但請記住，所有行業(yè)的杰克都是無人掌握者 - 他們可能知道多個領(lǐng)域的基礎(chǔ)知識，但他們可能只是一個專家，如果有的話。
您還希望區(qū)分網(wǎng)站和應(yīng)用以及桌面和移動設(shè)備。每個工人都有自己的專業(yè) - 一些開發(fā)人員有更多建立移動網(wǎng)站的經(jīng)驗; 一些設(shè)計師專門專注于應(yīng)用程序而從不做網(wǎng)站。同樣，有很多重疊，但如果您正在招聘某個特定項目，請確保您的候選人能夠處理具體細(xì)節(jié)。
那么這些專家中的哪一位可以幫助您實現(xiàn)特定的業(yè)務(wù)目標(biāo)？在雇傭他們時你應(yīng)該尋找什么？讓我們現(xiàn)在深入了解每一個。
網(wǎng)頁設(shè)計
“網(wǎng)頁設(shè)計”是一個古老的術(shù)語，可以追溯到一個人處理網(wǎng)站所有設(shè)計方面的日子。按照現(xiàn)代標(biāo)準(zhǔn)，“網(wǎng)頁設(shè)計師”一詞可能有點模糊; 今天，由于技術(shù)和我們對工藝的更多理解，我們有一個彩虹般的細(xì)分。
上圖：Figgy＆Plum的網(wǎng)站主頁
網(wǎng)頁設(shè)計的子類別包括UI和UX，還包括其他有趣的首字母縮略詞，如IA（信息架構(gòu)，處理網(wǎng)站映射和導(dǎo)航）和CRO（轉(zhuǎn)換率優(yōu)化，微調(diào)網(wǎng)站的設(shè)計以增加銷售，注冊或其他特定動作）。這些子類別中有數(shù)十個，每天都會創(chuàng)建新的子類別，因為設(shè)計師試圖在競爭激烈的市場中獲得更好的工作。
一般而言，網(wǎng)頁設(shè)計涉及網(wǎng)站的視覺和功能。它是一個與各個層面的圖形設(shè)計有著內(nèi)在聯(lián)系的領(lǐng)域，它處理的是視覺傳達(dá)的相同設(shè)計原則。
上圖：Chef Brain app的目標(biāo)網(wǎng)頁
但網(wǎng)頁設(shè)計不僅僅是圖形設(shè)計。無論是使用網(wǎng)站還是應(yīng)用程序，設(shè)計人員都必須了解經(jīng)常變化的功能，技術(shù)限制，數(shù)字趨勢和用戶期望。
網(wǎng)頁設(shè)計還有一定程度的商業(yè)知識：設(shè)計師應(yīng)該了解數(shù)字銷售策略，例如如何設(shè)置“號召性用語”（CTA）按鈕以引發(fā)銷售和電子郵件注冊。網(wǎng)站布局嚴(yán)重影響用戶行為，但由于它的細(xì)微差別，一些設(shè)計師比其他設(shè)計師更擅長。
網(wǎng)頁設(shè)計師處理傳統(tǒng)的圖形設(shè)計問題，如顏色和排版，以及為不同屏幕尺寸選擇最佳美學(xué)等數(shù)字問題。他們還需要了解業(yè)務(wù)概念，如領(lǐng)先和關(guān)閉，以創(chuàng)建布局，使呼吁行動更具吸引力。畢竟，設(shè)計師的職責(zé)有時包括從頭開始制作圖標(biāo)，圖形或界面按鈕，這些都借鑒了這三者的專業(yè)知識。
就具體的工作職責(zé)而言，設(shè)計過程主要取決于設(shè)計師，只要他們在現(xiàn)有的品牌指導(dǎo)下工作。通常，該過程涉及設(shè)計人員創(chuàng)建設(shè)計原型，然后與實際用戶或利益相關(guān)者一起測試這些原型，然后將反饋結(jié)合到未來的設(shè)計中。
設(shè)計師還可以制作線框圖，設(shè)計的裸骨布局以準(zhǔn)備原型，或者模型，像素完美的圖像，除了沒有交互性之外，屏幕將是什么樣子。
原型一旦獲得批準(zhǔn)，就會發(fā)送給開發(fā)人員進行編碼。
招聘網(wǎng)頁設(shè)計師時要注意什么...
- 最重要的是，在找到最適合您的網(wǎng)頁設(shè)計師之前，您需要知道自己想要什么。由于這么多的專業(yè)化，它不是關(guān)于設(shè)計師的好壞，而是關(guān)于他們是否適合你。
- 注意他們的作品。網(wǎng)頁設(shè)計師注重平面設(shè)計，每個人都有自己獨特的藝術(shù)風(fēng)格。
- 尋找您所重視的技能的掌握情況。如果您有一個文本密集的網(wǎng)站，請查看它們?nèi)绾翁幚砼虐妫勺x性和頁面布局。如果您正在建立一個電子商務(wù)商店，看看他們是否知道什么是一個好的產(chǎn)品頁面。
- 他們的首選軟件是否與團隊其他成員的用戶兼容？有許多不同的設(shè)計軟件 - Adob??e Photoshop，Illustrator，InDesign和Sketch，以及UXPin或Balsamiq等原型設(shè)計軟件。請與您的其他工作人員聯(lián)系，了解您的選擇。
- 詢問您的設(shè)計師他們的設(shè)計過程和時間框架。設(shè)計師都有自己的方法和設(shè)計周期，因此請仔細(xì)檢查您是否正在雇用符合您公司文化和時間表的人員。
網(wǎng)站開發(fā)
通過使用代碼來區(qū)分Web設(shè)計和開發(fā)。開發(fā)是事物變得技術(shù)化的地方，但好消息是你不必知道你的開發(fā)人員在談?wù)撌裁矗ūM管它對學(xué)習(xí)基礎(chǔ)知識肯定有幫助）。
網(wǎng)站開發(fā)網(wǎng)站建設(shè)分為兩大類：
前端（也稱為客戶端）：網(wǎng)站（或應(yīng)用程序）在屏幕上顯示的代碼。前端開發(fā)人員負(fù)責(zé)將網(wǎng)頁設(shè)計師的愿景變?yōu)楝F(xiàn)實，通常使用HTML，CSS和JavaScript等計算機語言。當(dāng)然，并非設(shè)計師計劃的所有內(nèi)容都是現(xiàn)實可行的，因此前端開發(fā)人員經(jīng)常與設(shè)計師一起來回工作。
后端（也稱為服務(wù)器端）：“前端”從服務(wù)器上托管的數(shù)據(jù)庫資源系統(tǒng)中提取。后端開發(fā)人員負(fù)責(zé)開發(fā)與管理那些幕后的數(shù)據(jù)庫資源，以及編碼數(shù)據(jù)庫中的數(shù)據(jù)并優(yōu)化數(shù)據(jù)的傳遞方式。他們使用PHP，Ruby，Python，Java或.Net等語言。
同樣，全棧開發(fā)人員也可以處理前端和后端開發(fā)。有時候，對于那些不能雇傭超過一名雇員的初創(chuàng)公司來說，這是一個聰明的選擇，但理想情況下，你們擁有一支具有不同專業(yè)的開發(fā)團隊。
招聘網(wǎng)絡(luò)開發(fā)者時需要注意什么...
- 一定要看看他們是否能說流利的專業(yè)語言。如果您無法區(qū)分，請告訴他們您希望對自己的網(wǎng)站做些什么，并聽取他們的建議。
- 雖然不是必需的，但開發(fā)人員參與設(shè)計過程會很有幫助。例如，開發(fā)人員可以搶先告訴設(shè)計師他們的選擇是否可行，從長遠(yuǎn)來看節(jié)省了修訂時間。您可能希望了解開發(fā)人員與團隊合作的情況，因為有些人更喜歡自主工作。
- 通過功能鏡頭回顧他們以前的網(wǎng)站。一切都按預(yù)期工作嗎？彈出任何標(biāo)志？您可能對開發(fā)了解不足以了解其工作原理，但您當(dāng)然知道成為使用網(wǎng)站的普通人是什么感覺。
用戶界面（UI）
現(xiàn)在我們已經(jīng)解釋了Web設(shè)計和開發(fā)，我們可以從用戶界面設(shè)計開始討論更專業(yè)的領(lǐng)域。UI是每個人都使用的東西，沒有經(jīng)過深思熟慮 - 你不需要知道漢堡包圖標(biāo)的歷史，知道有三行的按鈕是你的菜單。
上圖：通用的圖標(biāo)設(shè)計
這在大多數(shù)網(wǎng)頁設(shè)計領(lǐng)域都是一個持續(xù)的原則：如果他們的工作做得好，你甚至不應(yīng)該注意到它們。這在UI設(shè)計中最為普遍：使用真正直觀的界面，用戶無需考慮使用它。
如果你必須積極考慮如何使用控件，那么它被認(rèn)為是糟糕的UI設(shè)計。搜索您需要的按鈕或花幾秒鐘來確定按鈕的作用，會分散您對使用網(wǎng)站的整體體驗的注意力。UI設(shè)計的目標(biāo)不僅是提供用戶可能想要的所有控件，還要創(chuàng)建用戶一眼就能理解的自解釋控件。
另一個問題是空間管理。UI設(shè)計者必須找到為用戶提供大量選項和節(jié)省屏幕空間之間的愉快媒介。這就是像懸停控件和拉出菜單這樣的技術(shù)。UI設(shè)計師有責(zé)任決定哪些控件需要始終呈現(xiàn)，哪些控件可以忽略不計，完全隱藏或忽略。
上圖：4Links圖標(biāo)設(shè)計
UI設(shè)計通常與另一個稱為交互設(shè)計的字段重合，縮寫為“IxD”。交互設(shè)計專注于用戶與系統(tǒng)交互的所有方式，包括界面以及彈出，聊天和錯誤窗口等區(qū)域。因為交互設(shè)計如此強調(diào)用戶行為，所以它就像UI和UX設(shè)計之間的中間點。
招聘UI設(shè)計師時要注意什么...
- UI設(shè)計師的產(chǎn)品組合應(yīng)該告訴您需要知道的一切。試試候選人以前的網(wǎng)站，看看它有多容易。你能找到你需要的一切嗎？使用網(wǎng)站/應(yīng)用程序令人沮喪或容易？
- 比其他類別更多，尋找您正在招聘的特定項目類型的過去工作。世界上最好的網(wǎng)站UI設(shè)計師可能會為游戲應(yīng)用程序制作界面。雇用具有正確經(jīng)驗的人。
用戶體驗（UX）
從許多方面來看，用戶體驗從用戶的角度來看就像網(wǎng)頁設(shè)計領(lǐng)域。網(wǎng)頁布局如何影響用戶？UI如何影響用戶？當(dāng)您進入高級階段時，UX變得更具戰(zhàn)略性，例如，“我們?nèi)绾卧O(shè)計頁面以使用戶想要注冊？”
社交媒體橫幅的GIF
可以想象，UX設(shè)計還包含了網(wǎng)頁設(shè)計中的許多其他領(lǐng)域。很多人都在談?wù)摗癠I vs UX”，但事實是兩者合作而不是競爭。實際上，有很多重疊，所有類型的網(wǎng)頁設(shè)計師都可以從了解UX方面獲益。這正是UX如何成為一個獨立的學(xué)科 - 雇傭一名個人用戶體驗專家，從團隊其他成員那里解除了其他一些責(zé)任。
雖然起初看起來似乎是多余的，但實際上UX設(shè)計與銷售或轉(zhuǎn)換等業(yè)務(wù)目標(biāo)之間存在直接關(guān)聯(lián)。考慮到人類決策的大部分來自情感和直覺，因此優(yōu)化網(wǎng)站設(shè)計可以鼓勵某些行為并創(chuàng)造更有利于這些行為的氛圍。
因此，用戶體驗設(shè)計師還在圖形設(shè)計原則上汲取了很多：通過大小吸引注意力，用顏色引出正確的情感，在屏幕上創(chuàng)建可預(yù)測的視覺流，并將CTA放置在正確的位置。然而，與傳統(tǒng)的圖形設(shè)計不同，用戶體驗專家還必須考慮其他問題，如交互性和時間安排，使其成為一個完全獨立于其他所有學(xué)科的學(xué)科，同時將它們?nèi)炕ミB。
招聘UX設(shè)計師時需要注意什么...
- 就像UI設(shè)計一樣，您希望從您的候選人“試駕”以前的網(wǎng)站或應(yīng)用程序。它們易于使用嗎？您是否喜歡使用其網(wǎng)站的體驗？
- 如果您沒有預(yù)算聘請單獨的UX設(shè)計師，請向其他領(lǐng)域的候選人詢問他們的UX專業(yè)知識。這些職責(zé)有時可以作為不同團隊的交叉努力來處理; 產(chǎn)品經(jīng)理或營銷人員可以解釋他們想要用戶體驗的內(nèi)容，然后設(shè)計團隊負(fù)責(zé)視覺設(shè)計和實施。
模板網(wǎng)站怎么樣？
如果您使用
WordPress，Squarespace或Wix等模板網(wǎng)站怎么樣？你還需要一個完整的團隊嗎？你需要額外的人嗎？
上圖：弗吉尼亞Vape公司的WordPress主題設(shè)計
模板網(wǎng)站遵循大多數(shù)相同的規(guī)則，但有一些主要的例外：
- 如果您使用的是模板站點，則無需擔(dān)心后端開發(fā)。
- 確保候選人有您在托管您的任何網(wǎng)站的經(jīng)驗。擅長WordPress并不一定意味著擅長Squarespace。
除了這些例外，使用模板站點與任何其他站點類似。根據(jù)您的需求選擇您的設(shè)計師。
你最需要哪一個？
到目前為止，您應(yīng)該能夠區(qū)分網(wǎng)頁設(shè)計和網(wǎng)站建設(shè)開發(fā)，并且您知道“UI vs UX”不如“UI + UX”那么準(zhǔn)確。問題是，如果您不能雇用，那么您應(yīng)該優(yōu)先考慮哪一個他們的專家呢？
這個沒有普遍的答案。因為這些領(lǐng)域都涉及不同的領(lǐng)域，所有這些都取決于貴公司的獨特需求。考慮到您自己的目標(biāo)和缺點，您可能需要比其他人更多的專家。
為了幫助您了解您最需要哪一個，這里是每個領(lǐng)域?qū)ｉT解決的問題的簡短列表。找到下面的最大障礙，并查看解決方案的相應(yīng)字段。如果您已有現(xiàn)有站點，請事先進行一些用戶測試，以查看實際用戶有哪些投訴。
網(wǎng)頁設(shè)計
- 網(wǎng)站沒有響應(yīng)（意味著該網(wǎng)站在移動設(shè)備上看起來不太好）
Web開發(fā)
UI
UX
- 轉(zhuǎn)化率低（流量大但轉(zhuǎn)換次數(shù)少）
- 用戶沒有完成瀏覽相關(guān)內(nèi)容（視頻或博客）
- 支離破碎的訪問，即用戶在一頁之后離開而不是停留和探索
當(dāng)然，一些問題可以通過不同的方法來解決，正如我們在上面的緩慢加載時間的例子中所解釋的那樣。這就是為什么了解您想要優(yōu)先考慮哪些方面非常重要的原因，因此您選擇的任何解決方案都與您的優(yōu)先級最為一致。
網(wǎng)站設(shè)計建設(shè)開發(fā)知識分享，
上海品牌策劃設(shè)計公司，上海網(wǎng)站設(shè)計建設(shè)公司，尚略廣告公司。
本文網(wǎng)址：http://www.jsxhyl.com.cn/news_info.asp?id=3929