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