2021年5大UI/UX設計趨勢,美國最具指標性的財經商業雜誌發表了(下)
本文為下篇，上篇請看此連結
3D 圖形仍是潮流不減，尤其是當 UI/UX 設計師創建更容易和快速。Oganes 說道在今年最喜歡的 3D 趨勢之一，是將現實生活中的人類描繪成藝術卡通人物。它創造一種美學上令人愉悅的設計，與我們每天在屏幕上看到的逼真圖像不同。我們公司經常將 3D 元素添加到 2D 照片中，以創建比平面照片更多細節的深度。
科技蓬勃發展的正在改變世界，使用者與電腦的對話，不再只是滑鼠鍵盤的輸入，如同：Apple的Siri，通過語音與系統進行互動的方式。探討以下目前語音介面設計趨勢迅速發展的要點：
相關文章:
2021年5大UI/UX設計趨勢,美國最具指標性的財經商業雜誌發表了(上)
目錄
美國最具指標性的財經商業雜誌「《富比士》（Forbes）」，近期竟跨領域地提出 2021 年UI/UX 設計的5大趨勢！
《富比士》所屬之「富比士機構委員會（Forbes Agency Council）」的其中一個成員、也是「數位比佛利行銷策略公司（Digital Beverly Marketing Solutions）」的CEO Oganes Vagramovich Barsegyan就提出了5個今年掀起熱潮的 UI/UX 設計趨勢。
全球發生在線上的交易活動早在激增中，加上新冠（COVID-19）疫情讓民眾在家中使用手機、iPad、電腦等進入電商消費的模式，已取代以往的實體門市。消費者們已融入數位服務的生活，習慣、行為已有大大的改變。
如今網站上的UI（使用者介面）設計，就相當於實體店面的裝潢，且比以往更加重視美感。UI介面設計的變化以下五個 UI/UX 設計趨勢觀點：
UI/UX 普遍正朝著極簡主義美學，玻璃擬態長期保持領先的流行趨勢，從配圖到整個操作流程的介面、按鈕使用同一種色系，以不同層次結構和深度的呈現，顯得不會單調枯燥。網站避免繁雜的資訊或低解析度照片，保持觀看者能清楚閱讀，增加停留在網站上的時間。
如以下影片所示，玻璃擬態主要基於背景模糊與磨砂的效果，營造出漂浮在空間中的穿透、朦朧感。比如：蘋果與高盛銀行共同發行信用卡「Apple Card」 科技、時尚的設計，出於玻璃擬態的概念，視覺宛如漂浮在半空中的透明卡片，隨著消費類別改變不同柔和的顏色。
重複無奇的排版文字會產生視覺疲乏，需要產生亮點為觀看者帶來視覺刺激。敢於大膽破格的用字，凸顯出設計師是否有獨特的思維，更容易受到關注。不同的字體造型，產生不同的情緒與印象，即使是誇張或用於開箱文的標題，搭配合適的UI/UX設計，令人感到新穎不失傳統的美感。
大膽的字體風格是吸引網站訪客的必要條件，視覺上不是要呈現對人大吼大叫般的緊張感，比較像是微妙的語氣說道「看這裡」。此外，可嘗試在同標題中組合不同的字體，兼具可讀性與可視性的特點。
具有線條、形狀和角度的抽象藝術歷久不衰，現今煥然一新仍是受到關注，歸功於形狀和顏色兩者結合在一起表達想法，並以自由流動、非線性的方式表達創作。
許多企業喜歡抽象和幾何藝術，因為化繁為簡，具有簡練、醒目、形式感強的UI/UX視覺特點。增加鮮明高對比的顏色，創建富有表現力的外觀，而不會分散用戶的注意力。獨特創新的融合於畫面並不拘一格，體現出商業中的樂趣。
比如：試著使用抽象幾何地圖的設計，取代網站上的傳統地圖，觀看者肯定會記住您的位置。
下篇請看此連結
相關文章:
UX/UX 按鈕設計掌握7原則,優化電商轉換率!超實用的!快進來看看啊(下)
本文為下篇，上篇請看此連結
目錄
循序漸進的按鈕順序如同使用者和系統之間的對話，在 UI 設計的過程中，不斷反問自己或換位思考，使用者點選按鈕的步驟，會希望達成什麼目的，並進行相對應的設計。比如：上一頁/下一頁的按鈕，左右方向的箭頭按鈕是常見呈現方式。
為了增進 UX 使用者體驗，會在同個頁面上增加各式各樣的按鈕，一不小心數量會比預期來得多，便會產生分流降低點擊率。比如：如果主要目的是想讓使用者點選頁面下載按鈕，使用者可能因為點選其他連結而離開頁面。盡量將用於引導的選單與分類選項的按鈕樣式區隔開，確保使用者點選到目標按鈕。
藉由人的五官體驗，在按鈕的設計上傳達聲音與動態效果加深使用者的體驗，試著營造出如同按鈕圖示呈現的舒適情境，當使用者點選時，產生音頻或視頻響應式的回饋。如果使用者未接收到任何回饋時，通常會認為系統沒有接收到指令，而不斷的重複點選，便會導致多次不必要的操作。
方便點選的按鈕還有許多值得探討的 UI 設計技巧，以上所述的7個基本要點常用也是最容易忽略的一部分。優化按鈕設計的各種細節，探索各個細節對目標的點選，更能達成自己所理想的轉換成效。
相關文章:
按鈕在網站上出現的頻率是相當高的，猶如實體店面的動線，協助顧客快速找到目標。隨著線上的商業發展蓬勃，網站設計上開始重視使用者觀看版面的體驗（UX），如何透由按鈕的佈局轉換為交易，並進一步提升營收。
雖然現今的網站美輪美奐，還是會存在配色違和、無法找到搜尋功能或資訊不知所云的情況。隨著響應式網頁設計(Responsive Web Design，簡稱 RWD）的普遍，改善同時在手機、iPad與電腦不同裝置顯示問題，在版面中搭建使用者與系統之間的互動操作流程，仍不能缺少按鈕作為基礎視覺元素。
按鈕的設計不只是簡單的一個圖示，任何讓我們感到舒適方便的操作，都是有規律可循的。UI/UX 設計過程嘗試揣摩使用者心理，加入外觀美學、色彩學等知識創建而成，分成以下7個基本要點說明：
建立按鈕需要使用正確的樣式，依照按鈕產生的狀態設計不同外觀，包含：大小、形狀、顏色、陰影等因素組成，再搭配上合適的字體與間距，藉由簡單的觸控、按下去即可達到目的，讓人享受到即時的強烈滿足感。
線上虛擬按鈕的視覺性，來自接觸實體按鈕的體驗和認知根深蒂固，UX 使用者體驗塑造出的習慣行為和文化影響著設計的直觀性和易用性。
以下是大多數用戶熟悉的幾個按鈕示例：
除了容易點選的按鈕樣式，保持與周遭文字適當的留白避免視覺干擾。
使用者閱讀內容的同時，會搜尋版面可點選的功能按鈕，比如：下一頁、產品介紹等，如果使用者在視覺上尋找的時間愈久，若找不到按鈕，便不會知道它的的存在，愈容易感到網站不好使用。
為了和使用者不要玩追逐按鈕的遊戲，因此使用一致性的排版設計，便會提高使用者的發現的效率與準確度。普遍於環環相扣的傳統標準佈局，足夠的留白與簡潔使版面不會太擁擠，即使不是強烈鮮明的按鈕，依然隨著閱讀動線吸引使用者輕鬆的點選。
帶有誤導性資訊的按鈕標示，容易讓使用者感到迷惑。設計標示按鈕文字時，為了傳達出每個按鈕的作用，便需要簡短、有邏輯且適當的文字，讓使用者清楚了解點選按鈕後的結果，盡快獲得自己想要的內容，太拐彎抹角的說明只會讓使用者跟內容之間的距離變得更遠。
比如下列案例
不明白此對話框中的“確定”和“取消”代表什麼。大多數使用者只會疑惑“當我點選‘取消’會發生什麼事？”
與其按鈕標示“OK”，不如使用“Remove”，清楚的表達按下去後會發生的事情。如果“刪除”是一個潛在的危險操作，可以使用強烈的顏色來提醒。
按鈕圖示讓 UI 觸控尺寸大於可視尺寸，確保互動可靠性，按下按鈕應該是一個簡單的任務，如果使用者無法成功地輕點按鈕，或在操作過程中感到無所適從，這會帶來負面的體驗，並且浪費時間。
按鈕的大小反應著在屏幕上優先順序，愈是優先的重點便會是愈大的按鈕表示，或是使用鮮明的對比色來凸顯，增加使用者的注意力。而在操作 UI 使用者介面過程中，按鈕需考慮對使用者觸控的友好度，按鈕太小，往往導致會有輸入錯誤的情況發生。
麻省理工學院觸控實驗室的研究發現，指尖的平均值在 10-14 mm之間，指尖為 8-10 mm。這使得 10mm x 10mm 成為合適的最小觸控尺寸。
相關文章:
UI/UX 設計工作內容解析,本篇:5-如何相得益彰
本篇為【UI/UX 設計工作完整剖析】系列的第 5 篇，完整連結如下：
1-為何UI/UX容易搞混？
2-UI設計的優點
3-UX設計的優點
4-無論UI/UX都需研究驗證
5-如何讓UI/UX相得益彰
即使 UI 設計 與 UX 設計是截然不同的專業、各自涉及迥異的技能，但它們都是彼此不可或缺的存在。
即使有精雕細琢的介面設計，也無法掩飾笨拙又難用的操作流程；而枯燥乏味的視覺設計也會無法吸引使用者、從而埋沒了出色的使用體驗。
UI 設計師確立使用者介面的外觀，而 UX 設計師安排使用者介面的運作。在 UX 設計師在鑽研如何用有限的篇幅、提供使用者最多又不會過多的資訊時，UI 設計師正在努力讓這些繁雜的訊息精美地呈現在螢幕上。這是一個非常需要合作的過程，也有賴雙方緊密且良好的溝通。
以行動號召按鈕（Call to Action，CTA）為例，看 UX 與 UI 的分工：
提出需要多增加一個按鈕、為何如此能讓使用者滿意、決定如何重新安放所有按鈕。
設計新按鈕的外觀，而其他按鈕也可能受影響而需重新調整如形狀、顏色、大小、特效等外觀。
當使用者點下按鈕後將會導向某個頁面，UI 著重在按鈕外觀的能見度與視覺導引；而 UX 則著重在導向的網頁是否能滿足使用者的期待。
如此這般，UI 設計、UX 設計師需要不斷地溝通協作，才能確保彼此的設計都能完美執行、與使用者的期望完美地吻合，最終創造出優秀的使用者介面與體驗。
如果你正在規劃要朝 UI 還是 UX 領域邁進，那麼最重要的還是思考自己對哪種設計類型感興趣。如果還不熟悉設計領域，建議這兩個方面都可以嘗試一下，有了在這兩個領域的實際經驗，不僅可以更了解自己適合哪個領域，也可以使你無論最後選擇哪一個，都能成為更好的設計師！
相關文章:
第一次上程式設計課程該選 Python 還是 Java？有什麼差別？
五部人工智慧電影告訴你：未來人類會與 AI 談戀愛⋯⋯還是被毀滅？
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 設計師會透過真人測試或使用者訪談，取得使用者最直接的回饋、觀察並記錄使用者使用產品的整個過程、發現需求並構思解決方案，以確定設計能朝著正確的方向前進。
即使無法進行真人測試，也會透過 A/B 測試、易用性測試（Usability test）等方式在開發時就先測試找出問題，進一步對設計進行修改或優化。
而這樣「研究分析、設計開發、測試反饋、修改優化」的流程會重複多次，這樣的開發法又被稱為疊代式開發。與傳統的瀑布式開發相比，疊代式開發能降低風險、提早得到使用者反饋，也具有更高的效率和成功率。
採用這種方法，可以在完全確定設計需求之前就開始進行開發，在一次疊代中先完成一部分設計，再通過使用者的回饋來細化，再開始新一輪的疊代。
對於 UI 和 UX 設計師來說，事前研究都至關重要，也都使用類似的方法，以求規劃出得宜的設計。
本系列文章未完，請點此看下一篇
相關文章:
第一次上程式設計課程該選 Python 還是 Java？有什麼差別？
五部人工智慧電影告訴你：未來人類會與 AI 談戀愛⋯⋯還是被毀滅？
人工智慧貓砂盆 - 因愛貓腎病過世 工程師研發預防性貓用醫療品
UI/UX 設計工作內容解析,本篇:3-UX設計的優點
本篇為【UI/UX 設計工作完整剖析】系列的第 3 篇，完整連結如下：
1-為何UI/UX容易搞混？
2-UI設計的優點
3-UX設計的優點
4-無論UI/UX都需研究驗證
5-如何讓UI/UX相得益彰
UX 表示「使用者體驗」（User experience），顧名思義強調的是「使用者的感受」。
為了帶給人們良好的體驗，必須先進行使用者洞察、產品研究、市場趨勢研究，到建立資訊架構、規劃任務流程、繪製線框圖（Wireframe）和與 UI 設計師溝通互動設計與視覺設計間的怎麼互相調和，最後交棒給工程師。
而使用者會得到怎麼樣的體驗，取決他們如何與應用程式互動：希望體驗流暢、直觀？那導引要設計的合乎邏輯；想讓使用者覺得自己有效地完成任務、而不是在打一場戰爭？這都取決於 UX 設計師的功力。
▲ 設計思維是一種以人為本的創新方法，它汲取了設計師的靈感，將人的需求，技術的可能性以及業績成功的需求整合在一起(來源：Unsplash)
當然使用者介面和體驗有著相輔相成、缺一不可，因此 UX設計師會跟 UI 設計師密切合作，這也是為什麼許多人會混淆兩者。不同的是，UI 設計師的任務是確定使用者介面的外觀，而 UX 設計師負責確定使用者介面的結構、功能、操作方式和反饋體驗。
簡而言之，UX 如果設計良好、直觀又流暢，則使用者將獲得良好的體驗；反之則可能會把使用者趕跑，UX 設計師的工作就是努力避免出現第二種情況。那一個好的 UX 設計會具有哪些特色呢？
身為 Mailchimp 使用者體驗設計總監的 Aarron Walter 在他的《為情感而設計》（Designing for Emotion）一書中，告訴讀者如何才能讓使用者愛上你的網頁、產品或應用程式。
此書中參考馬斯洛需求理論、提出「使用者需求理論」，成為 UX 設計師思考與決策的重要參考：
▲ 「使用者需求理論」金字塔從底層至頂層依序為：功能性、可靠性、實用性、趣味性
「使用者需求理論」金字塔從底層至頂層依序為：功能性、可靠性、實用性、趣味性。
從金字塔我們可以看出，產品所提供的「功能」是最基本需求；「可靠性」則是指在一定的條件、時間內穩定地達成使用者的需求；「實用性」表示使用者能順利透過產品完成他們的需求、並未來若有相同需求的時候，優先想到你的產品；最頂端的「趣味性」能滿足使用者的心理需求，作為與使用者的情感紐帶，讓使用者對產品產生好感與認同。
以上是 UI、UX 的差異分析與介紹，那它們兩者有什麼相同呢？又要如何才能相輔相成、成為完美的設計呢？
UX 設計人員也常會利用叠代式開發（iteration），即先製作其介面互動的線框稿，並以此獲得使用者的回饋，再將其整合到設計之中，獲得更好的版本。
本系列文章未完，請點此看下一篇
相關文章:
第一次上程式設計課程該選 Python 還是 Java？有什麼差別？
五部人工智慧電影告訴你：未來人類會與 AI 談戀愛⋯⋯還是被毀滅？
人工智慧貓砂盆 - 因愛貓腎病過世 工程師研發預防性貓用醫療品
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 表示「使用者介面」（User Interface），無論是網頁、手機 APP 或是電腦軟體，只要眼睛所見的頁面都是 UI 設計的守備範圍。
從吸引使用者點擊的按鈕、閱讀的文字、文字輸入欄、空間配置、畫面排版、轉場和任何形式的視覺元素，一同組成一個龐大的視覺佈局。
▲ 這張照片是攝影師 Lubos Volkov 為 UX Store 拍攝的，同時提供了有關「如何成為更好的設計師」的提示。在你的技能達到一定的水平之後，就要不斷地學習新事物。(來源：Unsplash、uxstore.com)
除此之外，UI 也是人和電腦相遇的地方──電腦具備某種功能，人想要利用這些功能，需要進行「輸入」（inputs）和「輸出」（outputs）。介面就是輸入和輸出的規劃安排，讓人們得以應用電腦來創造出他們所需結果。
以上工作由 UI 設計師負責，他們選擇配色方案、按鈕形狀、線條的寬度和文字的字體，精心打磨每一處「眉角」。而一個好的 UI 設計通常具有以下特色……
介面的所有視覺元素皆脈絡分明、一目瞭然，使用者不需要刻意思考每個元素的含意。
使用者可以依照過往習慣操作的介面，如：點擊一次為選取、點擊兩次則為打開該項目。
保持整個介面的風格一致，這樣使用者可以習慣操作模式。
一個好的使用者介面該避免使用者不小心犯錯。
好的介面可以讓使用者以最少的「輸入」達成所需的「輸出」，還能讓有經驗的使用者更有效率操作。
▲ 一名設計師正在繪製 wireframe。(來源：Unsplash)
待設計完成後，UI 設計師會寫上標註和說明，轉交給工程師進行撰寫。因需要與工程師溝通配合，UI 設計師必須跟上科技的進步，對程式語言也要一定程度的了解，避免產生和工程師溝通不良的狀況。而帶有前端工程師及設計師雙技能的人會被稱為「介面工程師」（UI Developer），可以自己設計畫面也自己寫出網頁。
而 UI 設計師有時也會與「平面設計師」（Graphic designer）一同被討論，他們同樣關心美學、同樣要使介面充滿魅力、引人注目並切和主題，但平面設計師不需考慮「使用者怎麼操作」的問題，平面設計基本上也不需要被操作；而 UI 設計師則要思考如何引導使用者操作並完成任務，故兩者還是大不相同的。
本系列文章未完，請點此看下一篇
相關文章:
第一次上程式設計課程該選 Python 還是 Java？有什麼差別？
五部人工智慧電影告訴你：未來人類會與 AI 談戀愛⋯⋯還是被毀滅？
人工智慧貓砂盆 - 因愛貓腎病過世 工程師研發預防性貓用醫療品
UI/UX 設計工作內容解析,本篇:1-為何UI/UX容易搞混？
本篇為【UI/UX 設計工作完整剖析】系列的第 1 篇，完整連結如下：
1-為何UI/UX容易搞混？
2-UI設計的優點
3-UX設計的優點
4-無論UI/UX都需研究驗證
5-如何讓UI/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 是否有真愛
全球首屆元宇宙時裝周, 遇到瓶頸 複刻20年前的失敗? 目錄 元宇宙時裝周參與盛況 叫好不叫座？新興技術的行銷瓶頸 由虛擬實境平台 Decentraland 所舉辦的「元宇宙時裝週」（Metaverse Fashion Week...
