UI/UX設計簡介

要有吸引嘅網頁介面,又要有好嘅用戶體驗,就要兼顧UI同UX,但到底咩係UI/UX,兩者又有咩唔同?一文令你輕鬆了解UI/UX,打造成功網站。

點樣先係一個好嘅網站?吸引嘅介面設計定係順暢嘅瀏覽體驗?其實兩樣都好重要!一個虛有其表嘅網站,係無辦法令到用家對品牌留低好印象,但如果只著重功能,又無辦法喺市場中突顯自己,從而吸引到客群。
所以,當為自己品牌建立網站時就要考慮UI同UX。佢地個名雖然好似,但所涉獵嘅範疇係有唔同,而最重要係UI同UX係不可分割嘅,缺少任何一方都會影響用戶嘅使用體驗。咁到底咩係UI?咩係UX?

淺談 UI (User Interface)用戶介面

UI(User Interface)全名為用戶介面,著重介面外觀同所呈現嘅感覺。除咗考慮到設計美學,亦注重頁面嘅便利性,所以版面中每項視覺元素都同UI相關,例如按鈕設計、配色、字體、插圖及動畫等。簡單而言,當要設計網頁介面嘅視覺元素時就會需要UI。

咁UI係咪只講求美觀?

當然唔係!UI亦好注重用戶感受,只係主要用設計嚟配合UX嘅內容規劃,令用戶對網頁留低好印象。正所謂:「細節決定成敗。」UI設計師需要相當注重細節。所以,不論係字體大小、配色定圖像,每項元素都要經過精心設計。

出色嘅外觀設計唔止令到網頁更吸引,更重要係可以建立品牌形象,令品牌喺整個市場中更為突出。簡單舉例,當諗起鮮黃色、紅色同埋M字,相信唔少人都會諗起麥當奴,而佢地嘅網站同樣以相同配色為主,籍此特顯品牌形象。呢個例子正反映出不論係網站定App,UI/UX設計對品牌形象都發揮至關重要嘅作用,亦影響住潛在客戶點看待一個品牌。

淺談 UX(User Experience)用戶體驗

UX(User Experience )全名為用戶體驗,著重於用戶需求同使用習慣, 確保瀏覽網站嘅過程係合乎用戶嘅期望,所以用戶研究(User Research)、介面嘅內容鋪排及使用體驗都會同UX相關。

UX對於網頁設計嘅前期係相當重要,除咗要考慮到網頁嘅功能性,最主要係研究使用者嘅行為並作出分析。所以,UX設計師會透過實用性測試(Usability Testing),嚟觀察用戶同網站嘅真實互動,從而制訂出一套流暢嘅用戶體驗,確保用戶喺使用過程中唔會有任何障礙。

咁UX係咪只做用戶研究,唔會考慮到設計?

其實UX都要考慮到頁面設計,例如介面中嘅資訊架構(Information Architecture )、圖文嘅擺放及按鈕嘅互動形式等,都係UX要考慮嘅範圍。只係UX比較著重於骨幹設計(Wireframe、Prototype)、網站地圖(Sitemap)等網站結構上嘅安排,令到用戶瀏覽網站時更易搵到想要嘅資訊,從而提升使用者體驗。

一圖了解UI、UX相異

簡單而言,UI著重呈現比使用者嘅感覺,UX則重視使用者嘅體驗。雖然UI同UX所涉獵嘅範圍有所唔同,但都有互相重疊嘅地方。

UI (用戶介面)UX(用戶體驗)
定義使用者同”產品/服務”連繫嘅介面使用者對”產品/服務”嘅體驗
重視呈現比使用者嘅感覺介面嘅外觀及互動使用者行為及習慣使用過程嘅邏輯同功能 

工作項目
字體設計、字型大小、用色、插圖、動畫效果等用戶研究、骨幹設計(Wireframe、Prototype)、使用流程、網站地圖(Sitemap)
網頁嘅互動設計、內容鋪排網頁嘅互動設計、內容鋪排
出發提升用戶體驗及滿意度提升用戶體驗及滿意度

UI/UX設計係點樣互相配合?

上文都提到UI同UX係相輔相成嘅關係,兩者都同等重要,咁成個設計流程到底係點?

大多數情況下,網頁設計都會先完成UX,再考慮UI。情況就同起屋一樣,要先了解屋主嘅需求同生活習慣,再去規劃屋內嘅空間同所需傢俬,之後再為屋主設計個人化嘅房屋,考慮牆色同傢俬風格。

同樣地,當要打造網站,了解用戶需求同習慣就係第一步。當完成用戶研究後,UX設計師就會按分析規劃整個網站嘅瀏覽流程,打造出網站嘅骨幹,再交比UI設計師為網站進行外觀上嘅設計,為網站進行配色、制定字體風格、加入插圖及動畫效果等。當完成初步設計後,又會再經實用性測試嚟進一步提升網站嘅使用體驗,多數要經過數次嘅測試同改善,先會有最後成品。

UI/UX對網頁設計有幾重要?

一個內外兼備嘅網站就要做好UI同UX,透過兩者互相配合,一嚟提高網站轉換率,二嚟建立品牌形象。

透過UX嘅用戶研究可更了解使用者習慣,從而設計出更貼心嘅服務。以內容鋪排為例,按用戶認為重要及次要嘅嘅資訊以邏輯擺放,會令用戶輕易搵到想要嘅資料,大大提升使用體驗,自然有助提高網站轉換率。其次,一個配有UX嘅網站,會按使用者習慣設計每一步嘅行動,從而提升瀏覽體驗,令用戶對品牌留低好印象。

另外,對於想增加營銷嘅網店而言,就需要注意行動呼籲按鈕(Call To Action Button), UX設計師會為CTA按鈕創作注目嘅字眼,如: 限時優惠、瀏覽建議等,並放喺當眼處嚟吸引用戶去瀏覽更多內容,從而增加銷售。

而UI就係令到網頁介面更上一層樓,透過字形、圖像、用色及版面設計等強化品牌形象,加深同用戶嘅聯繫。此外,UI亦可以運用設計嚟吸引用戶作出行動,例如透過增強按鈕同背景嘅顏色對比,令CTA按鈕更為顯眼。此外,恰當嘅用色亦會有助使用者了解每個動作,當出錯時顯示紅色、正確時顯示綠色,會令用家對網站使用體驗更為滿意,自然會降低跌出率(Bounce Rate)。所以,UI唔止係設計美學咁簡單。

結論

總括而言,UI同UX嘅關係密不可分,一個出色嘅網站除咗要有吸引嘅介面,更要重視網站帶比用戶嘅體驗。只有透過UI同UX嘅通力合作,先可以打造出一個成功嘅網站。希望大家係設計網站時,都要記得兼顧兩者,唔好顧此失彼。

Facebook
Twitter
LinkedIn
WhatsApp
Email

我哋嘅服務

幫助創業者利用網站增加生意

訂閱實用網上推廣資訊

資料只用作發送電郵並可隨時取消訂閱

目錄

網站域名指南

Domain Name中文就係域名,係一串文字方便我哋用嚟識別網絡上主機嘅位置,例如google.com其實背係係指向緊背後主機嘅IP Address。

Instagram Bio Link 工具

Instagram Post個度無得放撳得到嘅Link,Instgram Bio又只可以放一條Link,想方便人了解更多嘅時候就要用Link in bio嘅服務去整合一啲你想比其他人喺Instagram到睇嘅Link啦。

免費公司域名Email

用自訂域名開一個電郵賬戶其實唔難。以下係一系列免費及收費嘅自訂Email服務,簡單整理各服務嘅優點缺點同價錢,助你輕鬆開一個公司email account。

想喺網上推廣你嘅生意?

想了解更多網上推廣資訊?

立即加入THE PADDING嘅電郵名單,我哋會將不定期發佈嘅實用資訊同最新文章發送到你嘅電郵

所收集資料只用作發送電郵之用並且可隨時取消訂閱