UI UX設計有什麼差異?4個專業手法,教你打造高成交網站!

UI UX設計有什麼差異
分享給好友 0
Twitter
Email

UI UX設計有什麼差異?想知道設計師是如何從無到有,設計出符合商業行為的作品嗎?我從事電商行銷7年中,不斷思索、研究要如何提高網站的轉換率,對於色系的要求、目標客戶的想法,做了很多的研究,隨著時間的累積,最後打造出了年營業額1.6億台幣的跨國電商品牌(我們的故事),每每日日升在設計或更新網站時,我都會跟工程師、設計組、業務部開會討論,結合多方的意見並持續修正後,才能打造出高成交的電商網站,下面將分享我們的思考流程與方法:

UI UX設計有什麼差異?

在電商銷售中,我們不只要顧好頁面的設計感、商品的呈現美感,更重要的是還要設計出能夠讓你的目標客戶感到心動的網站,並提升品牌形象達成購買,因此在設計界中常常會有兩種設計任務,分別為UI、UX設計領域,由這兩者專業的思維與研究做結合,才能真做出會讓人心動的網站,要成為好的設計者並不用天生生下來就是,可以透過後天不斷的練習、進修,從多年累積的錯誤中學習與成長,最終你也能打造出讓客戶覺得你很懂他的有趣網站!

1.UI設計

UI設計全名為User Interface,又稱為使用者介面設計,主要是在外觀的美化、網站的美感、照片的選擇、按鈕的呈現手法、色系的搭配…等外觀為主的設計,要如何深化這方面的能力,首先你必須先瞭解以下幾個設計的基本原理,才能打開的你設計思維,創造更有創意的內容:

1.顏色

顏色能呈現出語言,就像香蕉黑了,你會知道他快壞了,鋼鐵變咖啡色,你知道他生鏽了,用對顏色可以讓客戶感受到你想表達的意思;另外顏色心理學,也能表達出情緒,對於黃色,會讓人感到重點、興奮,在適合的地方加入對的顏色,可有效促成客戶按下按鈕的衝動。Principles of design: Color

圖片源自:goodui

2.平衡

圖片、版面、顏色的對稱與文字段落的對齊等,都能使人感到安全、放心,做網站很重要的是要營造出讓人安心的感覺,不要有太多不平衡的配色、配置,讓人感到安心,才敢繼續購物流程。Principles of design: Balance

圖片源自:goodui

3.對比

人類的眼睛喜歡看對比的東西,不管是顏色的對比、圖片的對比或是文字的對比,都能使人更聚焦在你想強調的主題上,能讓你的資訊更加強烈,促成人們產生行動。Principles of design: contrast

圖片源自:goodui

4.文字排版

工整、整潔的排版,能讓客戶不會那麼痛苦的觀看你的文字,來吸收你的資訊,對於文字的密度、標題的內容、字型,都必須依照主題做好適當的調整,並且避免過度長且連續的文字,才能讓人們更輕鬆的把你的內容看完,產生購買意願。10 Principles Of Readability And Web Typography

圖片源自:goodui

5.一致性

一致性的設計重點在直覺,這在設計中非常重要,如果你的產品很多,則建議每項產品的頁面都保持一致的排版,能讓客戶更快速地了解你的產品,連結按鈕的顏樣式統一,也能讓觀賞的人更輕鬆的了解哪些功能該如何操作,人類的身體本能是在不斷在尋找平衡,你的網頁如果提供一致的風格,能讓人感覺放心且安全,更願意品嚐、觀賞你的網站。Design principle: Consistency

圖片源自:goodui

這裡有些UI設計網站該做與不該做的介紹,會對你的網站設計創意更有幫助!

2.UX設計

UX設計,全名為User Experience,又稱為使用者體驗設計,除了有美觀的設計外,我們還需要設計出符合使用者習慣的功能,UX的精神重在找出目標客戶的問題,並提供解決方式,你可以透過大量的使用者體驗記錄、問卷調查、換位思考、或是以JTBD表格輔助,找出你目標客戶(Persona)的共通點,假設我今天的目標是家庭主婦,那麼我就要想家庭主婦可能視力會沒那麼好,所以網站的字體要比較大、網頁要單純不要有太複雜的功能、按鈕要夠大、縮小到手機介面時要讓文字符合閱讀大小…等的問題進行修正,你可列出類似下面的問題清單,把自己想成消費者提問會碰到哪些問題

圖片來源自UI UX Collection

接著你可以將你的解決方案用User Jurney Map(使用者地圖)呈現,構想客戶在哪一個步驟會碰到什麼問題?哪一步驟跳出哪個連結,能夠增加他的順暢度…等

圖片來源自UI UX Collection

另外,你也可以使用Double Diamond model (雙鑽石模式),探索目標客戶的痛點

圖片來源自Thought works

雙鑽石模式起始點是從最左邊的Trigger引發點開始的,你的目標客戶會碰到一個問題,接著你會開放式了的去解這項問題Underetand,再來縮小定義這些問題Define,作為可達成的目標和計畫Vision & Plan,接著開放式探索Explore解決這項問題的方法,並通過學習Learn、建立Build、測量Measure逐漸除錯,最終建立Create這項問題的解決方法,完成問題解決Solution,你可以從雙鑽石模式的思維中獲得更有創意的解決方法,讓你的目標客戶感到你的用心,重視使用者體驗細節的設計網站,會讓你更容易達成電商購買!

3.其他細分3種設計師


在一些比較大型的公司中,會分別對UI UX設計部門,再細分成兩種職業的設計師,分別如下:

1.視覺設計師
任務:對於各種畫面的美感呈現,與文字編排細節做更細緻的編修,視覺設計師聚焦在畫面的完整度,常常會再放大檢視每項作品的大小部件是否有問題,這項工作其實UI設計師也可以完成,不過我想大公司將其拆開來檢視,最主要應該是為了給UI設計師不同的靈感激發,也算是外部考核的一個動作。
常用的工具有:Photoshop、Sketch。

2.互動設計師 , 又稱做動態設計師
任務:大公司常常需要設計大量的APP,裡面的選單跳出畫面呈現、圖案出現方式、點影片跳出小視窗..等動畫,就是他們的工作,網站或APP中有了動態設計,會讓頁面呈現得更活潑、且時尚,我也很喜歡在設計的網頁中加入互動選單或是圖片Fade in的功能,讓網站不會這麼死板,這項工作也可以由UI設計師完成,不過如果需要有複雜的動畫呈現,就需要專門人員用CSS語言進行編寫。
常用的工具有:AfterEffects、Composer、Core、Origami、Flash。

3.UX研究員 , 又稱為使用者研究員
任務:研讀大量的市場資訊、消費者回饋問題、實際訪談..等客戶的使用感想,為使用方式作出完整的解決方案,不管是網站還是產品設計,最重要的就是提供客戶價值,幫客戶解決某個領域關鍵的痛點,所以由專門的人員描繪出精準的客戶Persona樣貌,能夠讓後續的設計更精更準!

以上三項就是UI UX設計系分的人員任務,與專業負責事項,各位可以斟酌對各項任務列出專案追蹤每個階段的成效,並通過不斷的測試,看看網站的轉換率是否有提升,或是跳出率有下降,你可以在網站安裝GA工具,對網站進行深部的研究與調整,相關連結:GA是什麼?

4.訓練你的美感


恭喜你瞭解了UI UX這兩項專業設計師都在用的設計原理,今後能讓你更專業的設整理出好的網站,不過只有單單了解原理還不夠,想成為好的設計者,你需要的是長時間對設計知識與美感的累積,你可以透過大量觀摩各種網站的製作方式、視覺呈現圖像學習,並且長時間訓練你的眼睛去看各種設計,想像如何去改善看到不好的設計,就能慢慢訓練你的美感,現在網路很發達,你可以找一些設計相關的網站:比如Dribbble,在上面看到些很棒的作品,可以先搜集起來、慢慢累積,未來有相關案件時就能夠使用,透過這樣不斷的練習與搜集,你才能知道哪個設計做得好,哪個不夠好需要再提升。

下面推薦些我也很愛看的時尚設計網站,鼓勵大家多多上去看那些作品:

  • onepagelove.com 大量的一頁式網站作品。
  • awwwards.com  許多獲獎的網站作品,能給我很多靈感。
  • dribbble.com  很多設計師分享的作品。
  • pttrns.com 手機介面設計的相關作品。
  • uimovement.com 有大量的UI設計作品,很酷的網站,能用老外的創意呈現美感。

一直以來日日升在設計網站都是用上面的方式進行,碰到靈感匱乏時,我們會去國外的網站搜集資料吸收靈感,並和網站工程師、設計部、業務部三方的資料討論,來達成真正能滿足目標客戶喜好的網站,想找日日升設計精緻的網站,也可以查看我們的服務

分享給好友 0
Twitter
Email

OTHER POSTS