UI/UX 設計工作內容解析5-如何相得益彰

 

UI/UX 設計工作內容解析,本篇:5-如何相得益彰

本篇為【UI/UX 設計工作完整剖析】系列的第 5 篇，完整連結如下：
1-為何UI/UX容易搞混？
2-UI設計的優點
3-UX設計的優點
4-無論UI/UX都需研究驗證
5-如何讓UI/UX相得益彰

 

結語：如何讓 UI/UX 相得益彰？

即使 UI 設計 與 UX 設計是截然不同的專業、各自涉及迥異的技能，但它們都是彼此不可或缺的存在。

即使有精雕細琢的介面設計，也無法掩飾笨拙又難用的操作流程；而枯燥乏味的視覺設計也會無法吸引使用者、從而埋沒了出色的使用體驗。

UI 設計師確立使用者介面的外觀，而 UX 設計師安排使用者介面的運作。在 UX 設計師在鑽研如何用有限的篇幅、提供使用者最多又不會過多的資訊時，UI 設計師正在努力讓這些繁雜的訊息精美地呈現在螢幕上。這是一個非常需要合作的過程，也有賴雙方緊密且良好的溝通。

以行動號召按鈕（Call to Action，CTA）為例，看 UX 與 UI 的分工：

1.UX 設計師

提出需要多增加一個按鈕、為何如此能讓使用者滿意、決定如何重新安放所有按鈕。

2.UI 設計師

設計新按鈕的外觀，而其他按鈕也可能受影響而需重新調整如形狀、顏色、大小、特效等外觀。

3.UI、UX 設計師重疊的互動設計

當使用者點下按鈕後將會導向某個頁面，UI 著重在按鈕外觀的能見度與視覺導引；而 UX 則著重在導向的網頁是否能滿足使用者的期待。

如此這般，UI 設計、UX 設計師需要不斷地溝通協作，才能確保彼此的設計都能完美執行、與使用者的期望完美地吻合，最終創造出優秀的使用者介面與體驗。

如果你正在規劃要朝 UI 還是 UX 領域邁進，那麼最重要的還是思考自己對哪種設計類型感興趣。如果還不熟悉設計領域，建議這兩個方面都可以嘗試一下，有了在這兩個領域的實際經驗，不僅可以更了解自己適合哪個領域，也可以使你無論最後選擇哪一個，都能成為更好的設計師！

 

 

 

相關文章:

美女PM/UI設計師真實身分起底！二度就業婦女的斜槓人生

第一次上程式設計課程該選 Python 還是 Java？有什麼差別？

五部人工智慧電影告訴你：未來人類會與 AI 談戀愛⋯⋯還是被毀滅？

人工智慧貓砂盆 - 因愛貓腎病過世 工程師研發預防性貓用醫療品

疫情下的人工智慧發展:AI自動檢測社交距離

疫情中的人工智慧:AI首張專輯"武漢肺炎"問世

人工智慧再突破!從有碼還原成高解析無碼

UI/UX 設計工作內容解析4-皆需研究驗證

UI/UX 設計工作內容解析,本篇:4-皆需研究驗證

 

本篇為【UI/UX 設計工作完整剖析】系列的第 4 篇，完整連結如下：
1-為何UI/UX容易搞混？
2-UI設計的優點
3-UX設計的優點
4-無論UI/UX都需研究驗證
5-如何讓UI/UX相得益彰

 

 

研究是關鍵！無論 UI、UX 都需要研究驗證

UI、UX 若想要盡善盡美，最重要的的就是要做各種事前研究！

無論是 UI 設計 或UX 設計師，都必須先做各種功課——盡可能收集資料、行為數據以研究使用者的需求，思考、分析和預測使用者在當下可能的行為、行為背後的動機以及隨之而來的體驗感受。

而研究所得的數據資料將應用在初版設計上，接著有的 UI、UX 設計師會透過真人測試或使用者訪談，取得使用者最直接的回饋、觀察並記錄使用者使用產品的整個過程、發現需求並構思解決方案，以確定設計能朝著正確的方向前進。

即使無法進行真人測試，也會透過 A/B 測試、易用性測試（Usability test）等方式在開發時就先測試找出問題，進一步對設計進行修改或優化。

 

推薦閱讀：使用 A/B 測試來改善網站 UI 設計的 30 個例子

而這樣「研究分析、設計開發、測試反饋、修改優化」的流程會重複多次，這樣的開發法又被稱為疊代式開發。與傳統的瀑布式開發相比，疊代式開發能降低風險、提早得到使用者反饋，也具有更高的效率和成功率。

採用這種方法，可以在完全確定設計需求之前就開始進行開發，在一次疊代中先完成一部分設計，再通過使用者的回饋來細化，再開始新一輪的疊代。

對於 UI 和 UX 設計師來說，事前研究都至關重要，也都使用類似的方法，以求規劃出得宜的設計。

本系列文章未完，請點此看下一篇

 

 

相關文章:

美女PM/UI設計師真實身分起底！二度就業婦女的斜槓人生

第一次上程式設計課程該選 Python 還是 Java？有什麼差別？

五部人工智慧電影告訴你：未來人類會與 AI 談戀愛⋯⋯還是被毀滅？

人工智慧貓砂盆 - 因愛貓腎病過世 工程師研發預防性貓用醫療品

疫情下的人工智慧發展:AI自動檢測社交距離

疫情中的人工智慧:AI首張專輯"武漢肺炎"問世

前端工程師基本功:後端技能大公開

 

UI/UX 設計工作內容解析3-UX設計的優點

 

UI/UX 設計工作內容解析,本篇:3-UX設計的優點

 

本篇為【UI/UX 設計工作完整剖析】系列的第 3 篇，完整連結如下：
1-為何UI/UX容易搞混？
2-UI設計的優點
3-UX設計的優點
4-無論UI/UX都需研究驗證
5-如何讓UI/UX相得益彰

 

什麼是 UX 設計？

UX 表示「使用者體驗」（User experience），顧名思義強調的是「使用者的感受」。

為了帶給人們良好的體驗，必須先進行使用者洞察、產品研究、市場趨勢研究，到建立資訊架構、規劃任務流程、繪製線框圖（Wireframe）和與 UI 設計師溝通互動設計與視覺設計間的怎麼互相調和，最後交棒給工程師。

而使用者會得到怎麼樣的體驗，取決他們如何與應用程式互動：希望體驗流暢、直觀？那導引要設計的合乎邏輯；想讓使用者覺得自己有效地完成任務、而不是在打一場戰爭？這都取決於 UX 設計師的功力。

▲ 設計思維是一種以人為本的創新方法，它汲取了設計師的靈感，將人的需求，技術的可能性以及業績成功的需求整合在一起(來源：Unsplash)

當然使用者介面和體驗有著相輔相成、缺一不可，因此 UX設計師會跟 UI 設計師密切合作，這也是為什麼許多人會混淆兩者。不同的是，UI 設計師的任務是確定使用者介面的外觀，而 UX 設計師負責確定使用者介面的結構、功能、操作方式和反饋體驗。

簡而言之，UX 如果設計良好、直觀又流暢，則使用者將獲得良好的體驗；反之則可能會把使用者趕跑，UX 設計師的工作就是努力避免出現第二種情況。那一個好的 UX 設計會具有哪些特色呢？

好的 UX 設計 會具有的優點：

身為 Mailchimp 使用者體驗設計總監的 Aarron Walter 在他的《為情感而設計》（Designing for Emotion）一書中，告訴讀者如何才能讓使用者愛上你的網頁、產品或應用程式。

此書中參考馬斯洛需求理論、提出「使用者需求理論」，成為 UX 設計師思考與決策的重要參考：

▲ 「使用者需求理論」金字塔從底層至頂層依序為：功能性、可靠性、實用性、趣味性

「使用者需求理論」金字塔從底層至頂層依序為：功能性、可靠性、實用性、趣味性。

從金字塔我們可以看出，產品所提供的「功能」是最基本需求；「可靠性」則是指在一定的條件、時間內穩定地達成使用者的需求；「實用性」表示使用者能順利透過產品完成他們的需求、並未來若有相同需求的時候，優先想到你的產品；最頂端的「趣味性」能滿足使用者的心理需求，作為與使用者的情感紐帶，讓使用者對產品產生好感與認同。

以上是 UI、UX 的差異分析與介紹，那它們兩者有什麼相同呢？又要如何才能相輔相成、成為完美的設計呢？

UX 設計人員也常會利用叠代式開發（iteration），即先製作其介面互動的線框稿，並以此獲得使用者的回饋，再將其整合到設計之中，獲得更好的版本。

 

本系列文章未完，請點此看下一篇

 

相關文章:

美女PM/UI設計師真實身分起底！二度就業婦女的斜槓人生

第一次上程式設計課程該選 Python 還是 Java？有什麼差別？

五部人工智慧電影告訴你：未來人類會與 AI 談戀愛⋯⋯還是被毀滅？

人工智慧貓砂盆 - 因愛貓腎病過世 工程師研發預防性貓用醫療品

疫情下的人工智慧發展:AI自動檢測社交距離

人工智慧解碼技術史上最強!細節超清楚的

人工智慧跨及長照,讓世界更溫暖(下) 

 

UI/UX 設計工作內容解析2-UI設計的優點

  

 

UI/UX 設計工作內容解析,本篇:2-UI設計的優點

 

本篇為【UI/UX 設計工作完整剖析】系列的第 2 篇，完整連結如下：
1-為何UI/UX容易搞混？
2-UI設計的優點
3-UX設計的優點
4-無論UI/UX都需研究驗證
5-如何讓UI/UX相得益彰

 

因應隨著對 UI、UX 的認識日漸普及，目前的分工也越來越明確了，接著讓我們來看看 UI 和 UX 究竟是什麼吧。

什麼是 UI 設計？

UI 表示「使用者介面」（User Interface），無論是網頁、手機 APP 或是電腦軟體，只要眼睛所見的頁面都是 UI 設計的守備範圍。

從吸引使用者點擊的按鈕、閱讀的文字、文字輸入欄、空間配置、畫面排版、轉場和任何形式的視覺元素，一同組成一個龐大的視覺佈局。

▲ 這張照片是攝影師 Lubos Volkov 為 UX Store 拍攝的，同時提供了有關「如何成為更好的設計師」的提示。在你的技能達到一定的水平之後，就要不斷地學習新事物。(來源：Unsplash、uxstore.com)

除此之外，UI 也是人和電腦相遇的地方──電腦具備某種功能，人想要利用這些功能，需要進行「輸入」（inputs）和「輸出」（outputs）。介面就是輸入和輸出的規劃安排，讓人們得以應用電腦來創造出他們所需結果。

以上工作由 UI 設計師負責，他們選擇配色方案、按鈕形狀、線條的寬度和文字的字體，精心打磨每一處「眉角」。而一個好的 UI 設計通常具有以下特色……

好的 UI 設計 會具有的優點：

1. 清晰

介面的所有視覺元素皆脈絡分明、一目瞭然，使用者不需要刻意思考每個元素的含意。

2. 熟悉

使用者可以依照過往習慣操作的介面，如：點擊一次為選取、點擊兩次則為打開該項目。

3. 一致性

保持整個介面的風格一致，這樣使用者可以習慣操作模式。

4. 防呆機制

一個好的使用者介面該避免使用者不小心犯錯。

5. 事半功倍

好的介面可以讓使用者以最少的「輸入」達成所需的「輸出」，還能讓有經驗的使用者更有效率操作。

▲ 一名設計師正在繪製 wireframe。(來源：Unsplash)

待設計完成後，UI 設計師會寫上標註和說明，轉交給工程師進行撰寫。因需要與工程師溝通配合，UI 設計師必須跟上科技的進步，對程式語言也要一定程度的了解，避免產生和工程師溝通不良的狀況。而帶有前端工程師及設計師雙技能的人會被稱為「介面工程師」（UI Developer），可以自己設計畫面也自己寫出網頁。

而 UI 設計師有時也會與「平面設計師」（Graphic designer）一同被討論，他們同樣關心美學、同樣要使介面充滿魅力、引人注目並切和主題，但平面設計師不需考慮「使用者怎麼操作」的問題，平面設計基本上也不需要被操作；而 UI 設計師則要思考如何引導使用者操作並完成任務，故兩者還是大不相同的。

 

本系列文章未完，請點此看下一篇

 

相關文章:

美女PM/UI設計師真實身分起底！二度就業婦女的斜槓人生

第一次上程式設計課程該選 Python 還是 Java？有什麼差別？

五部人工智慧電影告訴你：未來人類會與 AI 談戀愛⋯⋯還是被毀滅？

人工智慧貓砂盆 - 因愛貓腎病過世 工程師研發預防性貓用醫療品

疫情下的人工智慧發展:AI自動檢測社交距離

人工智慧解碼技術史上最強!細節超清楚的

人工智慧跨及長照,讓世界更溫暖(上)

 

UI/UX 設計工作內容解析1-為何UI/UX容易搞混？

 

UI/UX 設計工作內容解析,本篇:1-為何UI/UX容易搞混？

---

本篇為【UI/UX 設計工作完整剖析】系列的第 1 篇，完整連結如下：
1-為何UI/UX容易搞混？
2-UI設計的優點
3-UX設計的優點
4-無論UI/UX都需研究驗證
5-如何讓UI/UX相得益彰

UI vs. UX 設計 - 為什麼容易搞混？

有許多人把UI 設計 和 UX 設計 常常被混在一起使用、或將兩者視為同一種專業，也有不少公司開出「UI 設計師」的職缺，卻要求應徵者兩種能力兼而有之。

除了因對 UI、UX 不甚了解外，其中一個原因是 UX 包含的事情較為廣泛：從介面設計、視覺風格、程式功能和運作效能等等都是其中一環，與 UI 設計或多或少有所重疊。而且許多專業設計師對這兩種專業都有涉獵，久而久之就常見 UI、UX 並稱的狀況了。

▲ UI、UX 設計雖為不同專業，但在某些方面會有重疊。(來源：Asinthecity)

 

本系列文章未完，請點此看下一篇

 

 

相關文章:

前端工程師該懂的後端技能 : MySQL教學-DDL DML DQL DCL

使用 Java、Python、C 等 22 種程式語言寫出「Hello World」！

人工智慧電影/影集：Netflix《我的全像情人》探討人與 AI 是否有真愛

介面、體驗大不同！UI設計/UX設計工作內容完整剖析

人工智慧貓砂盆:1.研發的背後竟暗藏不為人知的辛酸

疫情中的人工智慧:AI自動檢測社交距離

台灣首位人工智慧歌手雅婷,發表首張專輯"武漢肺炎"

 

UI/UX設計師的設計真心話

來看看UI/UX設計師的設計真心話,也許對各位學習者有幫助!

UI設計師的設計心理學指南

• 發布： UI培訓
• 來源： UI知識
• 時間： 2020-01-20 17:38
• 分享到：

---

最近學習了米勒定律和希克定律。 其中關於如何提升視覺感知，我覺得應該對於學習 UI 和 UX 的人有幫助，其中有一條：平均每個人在記憶時候最大數量為7個。

另外一條是：眼睛是獲取大量信息的強大工具。 大部分數據被無意識地吸收。 視覺感知是設計領域的重中之重，特別是產品設計師，作為設計師需要去了解和運用這些定律，提升用戶視覺感知。

什麼是視覺感知

視覺感知是人們能夠獲得信息，並由大腦進行處理的最有成效的方法。 人的眼睛有著接收及分析視像的不同能力，從而組成視覺。 腦部將眼睛接收到的物象信息，分析出四類主要信息就是有關物象的空間、色彩、形狀及動態。 有了這些數據，我們可辨認外物和對外物作出及時和適當的反應。

視覺感知的特點

速度快，所有信息以圖形存儲，人眼閱讀圖像比文字更快，在絕大多數情況下，人們感知圖標和插圖的圖片元素比文字更快。 大部分用戶是視覺驅動的，所以視覺感知機制通常應該在設計過程中考慮，研究裡面有幾條規則挺有意思:1.人眼閱讀圖像比文字更快。 2.人們需要約1/10秒來獲得視覺場景或元素的一般感知(該速度對於文字表達基本不可能的)。 3.大腦儲存重要的信息片段通常由固定為視覺圖像，即使它們是通過文字感知得到的。

視覺感知規律心理學家提到的視覺記憶感知三個核心規律，很簡單也好記憶:

1.集中：要記住一件事情或大量的數據，需要集中精力。 否則，數據將在短期記憶裡上被丟棄的機率很高。

2.聯想記憶：大腦裡其實有個巨大的網絡連接，我們會自動將感知到的新的片段能和舊的片段聯繫關聯，感知就會越強，也在設計中也就是常說的用戶習慣。

3.重複：不斷去重複激活一些片段，直到達到長期識別為主。 基於這3個點的的規律我們需要在視覺中可以去運用，通過設計強調突出我們想表達的內容，突出重要信息，通過簡單的交互讓用戶和他之前的經驗關聯。

視覺感知如何運用1.通過圖標加強感知

2.減少數量加強感知關注度在設計中很重要，如果同時提供了幾個選項，按鈕，選項，用戶的短期記憶會花費更多的時間和精力來考慮，這時候隨時可能會讓用戶跳失。 米勒定律：每個人在工作記憶時候最大數量為7個。 人的大腦短時記憶容量約為“7”。

希克定律：人​​們選擇的元素越多，越難選擇。 一但選擇點很多，越是猶豫，分散，特別在電商設計裡面，我們需要平衡所有的信息，給予用戶最有用信息和行動點。

3.通過圖像強化感知

除了圖標，還可以通過圖像來強化感知力，我們應該掌握圖像處理的手法，通過不同的形式來組織內容，圖片沒有秘密也最直接，最能被記憶

4.通過導航強化感知

導航是可用性的關鍵因素。 通過tab移動，能記住用戶路徑和數據;因此，設計導航時候，交互和視覺一致和清晰很重要。

5.通過直接的表達加強感知

關於顯示或隱藏的各種菜單的討論目前有很多，我們重要的是要記住，界面的關鍵目標應該是用戶清楚地了解發生了什麼。 他想要的操作在那裡。 因此，關於漢堡包菜單，滑塊，隱藏層次的導航和內容的操作設計應該梳理好頁面功能層級設計，不要去隱藏一些核心操作。

6.通過多媒體藝術加強感知除了以上，還可以通過視頻，音頻，動效，3D等。 通過這種刺激，不僅設計師可以創造更多創意，而且對不同的人記憶加強，比如618，雙11, 造物節一些動效，音頻對大家記憶刺激很強。

視覺感知心理學，更多幫助我們在做設計時候，了解人們是如何與世界互動，哪些元素影響他們的行為。 通過設計去改變引導用戶，管控好用戶使用路徑，能更好幫助產品成功。

免責聲明：文章內容轉載自公開網絡，如有侵權，請聯繫我們刪除。

參考連結:

5G時代來臨,你不得不知2020 UI 趨勢(上)

UI設計之配色攻略:5個黑色的設計意義和用法(上)

UI設計之配色攻略:5個黑色的設計意義和用法(下)

網路行銷的7大秘訣(共四集)-1.概論與內容行銷

網路行銷的7大秘訣(共四集)-2.SEO與EDM

網路行銷的7大秘訣(共四集)-3.社群行銷與CRO

2天考取Google Ads證照！新手廣告投放攻略

擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師

44歲媽咪順利轉職網頁設計師, 家庭事業都得意

零基礎如何花 14 小時考取 GoogleAds 認證？五種 GoogleAds 廣告不藏私攻略

從無到有 挑戰14小時取得Google證照

Audi.福斯利用UI 設計成功落實數位優先,但做法卻是...(下)

最新首用UI設計落實數位優先,知名車廠奧迪.福斯做到了!我們來看看他們是怎麼做到的(下)

本篇為福斯 UI 設計篇，關於Audi的 UI 設計，請點此連結
以及 此連結

不落後於 Audi，福斯跟進「數位優先」視覺辨識

▲ 新的福斯LOGO設計由原本的「仿3D」變回2D平面icon，就可零違和地嵌入於更多裝置的UI視覺設計。
而 2019 年 7 月，德國的另一間汽車公司-福斯汽車也宣布將推出全新 LOGO。同年的 9 月 10 日，在法蘭克福國際車展前夕的「福斯之夜」上，福斯正式發布了全新的品牌標誌——也是將原本的立體風 Logo「平面化」，也表示品牌接下來的將有嶄新的商業策略。

▲ 福斯LOGO進化史-一切的LOGO變化都是為了符合當時的UX
由以上影片我們可以看到：2019 年的新 LOGO 整體造型依然使用字母「V」和「W」上下組合的形式，不過變得更簡單直觀。原先設計成浮雕概念的立體造型，改為平面化 2D 風格，「V」和「W」兩個字母中間的空隙變大，「W」的底部和外部圓圈完全脫離，留下了空間。
其實「扁平化」是現代數位時代的設計趨勢，除了福斯，許多知名廠商的 LOGO 也都改頭換面、採用扁平化的設計，如 Google、YouTube、Netflix、ebay、Citroën等。
扁平化 UX 設計為去除陰影、漸層和反射光澤等3D要素，通常使用高亮度的色彩，搭配無襯線字體，呈現出簡約現代風格。目的為減少不必要的裝飾元素，將核心元素明確傳達，除了LOGO，UI設計也正流行扁平設計。
同時，這種簡約的設計無論在傳統印刷輸出、電視或螢幕相對較小的智慧手機上，都能更好更快地呈現，也更符合現今數位化的潮流。

新LOGO也是新戰略

值得注意的是，福斯這次不只換了Logo，連品牌識別聲音也換了。過去福斯汽車的廣告，結尾都是低沉渾厚的男性嗓音，但福斯大破大立，請到了德國著名的女演員露易絲‧海爾姆（Luise Helm）獻聲，打破多年聲音形象，改以溫暖、愉快、自信的女性聲音取代。以後的福斯廣告都將使用女聲來宣讀「福斯」品牌名了。

▲ 福斯熱門主打車款「Golf 8」廣告即為女聲宣讀品牌名稱
新LOGO的同時展現了福斯汽車朝向電動化新時代發展的決心。
福斯汽車準備電動化轉型雖已有一段時日，但關鍵轉捩點是在2016年，當時福斯集團（Volkswagen AG）爆出廢氣排放超標醜聞：福斯在美國銷售的車款中植入規避官方檢驗的軟體，在官方檢驗時自動調整數字以通過廢氣排放標準，但實際上這些車輛排放廢氣全超標10至40倍。
這起醜聞發生後，福斯集團便改變策略，朝新替代能源發展。
福斯近期全力主打的，就是在法蘭克福車展亮相的電動車ID.3，是全世界首款採用碳中和製程的電動車款，已在歐洲地區正式接單。明年系列車款ID. CROZZ SUV、ID.BUZZ、ID.VIZZION和ID.BUGGY等各式電動車也將陸續加入。
福斯第一款全電動車以「3」命名，代表正式在電動車領域踏出關鍵一步，與為了成為全球車壇的電動車領導品牌的決心。
現在是汽車產業全速往電動車發展的重要時間點，老牌車廠換上新裝，在這個新戰場的表現如何，就讓人拭目以待了。



參考連結:

Audi.福斯利用UI 設計成功落實數位優先,但做法卻是...(上)

Audi.福斯利用UI 設計成功落實數位優先,但做法卻是...(中)

學好Unity3D.下個任天堂遊戲由你開發

工程師能不能光看電影就知道是Python還是Java?(上)

工程師能不能光看電影就知道是Python還是Java?(下)

口頭簡報讓你緊張到說不出話嗎?人工智慧教練幫你訓練好口條!!

2天考取Google Ads證照！新手廣告投放攻略

擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師

44歲媽咪順利轉職網頁設計師, 家庭事業都得意

零基礎如何花 14 小時考取 GoogleAds 認證？五種 GoogleAds 廣告不藏私攻略

從無到有 挑戰14小時取得Google證照