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