娶了UI設計師的Python工程師-北歐生活

本文為下篇，上篇請看此 連結 5. 按鈕在版面上的順序位置 循序漸進的按鈕順序如同使用者和系統之間的對話，在  UI  設計的過程中，不斷反問自己或換位思考，使用者點選按鈕的步驟，會希望達成什麼目的，並進行相對應的設計。比如：上一頁/下一頁的按鈕，左右方向的箭頭按鈕是常見呈現方式。 6. 避免過多的按鈕分散注意力 為了增進  UX  使用者體驗，會在同個頁面上增加各式各樣的按鈕，一不小心數量會比預期來得多，便會產生分流降低點擊率。比如：如果主要目的是想讓使用者點選頁面下載按鈕，使用者可能因為點選其他連結而離開頁面。盡量將用於引導的選單與分類選項的按鈕樣式區隔開，確保使用者點選到目標按鈕。 7. 加入音效或動畫產生互動 藉由人的五官體驗，在按鈕的設計上傳達聲音與動態效果加深使用者的體驗，試著營造出如同按鈕圖示呈現的舒適情境，當使用者點選時，產生音頻或視頻響應式的回饋。如果使用者未接收到任何回饋時，通常會認為系統沒有接收到指令，而不斷的重複點選，便會導致多次不必要的操作。 方便點選的按鈕還有許多值得探討的  UI  設計技巧，以上所述的7個基本要點常用也是最容易忽略的一部分。優化按鈕設計的各種細節，探索各個細節對目標的點選，更能達成自己所理想的轉換成效。

按鈕在網站上出現的頻率是相當高的，猶如實體店面的動線，協助顧客快速找到目標。隨著線上的商業發展蓬勃，網站設計上開始重視使用者觀看版面的體驗（ UX ），如何透由按鈕的佈局轉換為交易，並進一步提升營收。 雖然現今的網站美輪美奐，還是會存在配色違和、無法找到搜尋功能或資訊不知所云的情況。隨著響應式網頁設計(Responsive Web Design，簡稱 RWD）的普遍，改善同時在手機、iPad與電腦不同裝置顯示問題，在版面中搭建使用者與系統之間的互動操作流程，仍不能缺少按鈕作為基礎視覺元素。 按鈕的設計不只是簡單的一個圖示，任何讓我們感到舒適方便的操作，都是有規律可循的。 UI/UX  設計過程嘗試揣摩使用者心理，加入外觀美學、色彩學等知識創建而成，分成以下7個基本要點說明： 1. 互動式的按鈕設計 建立按鈕需要使用正確的樣式，依照按鈕產生的狀態設計不同外觀，包含：大小、形狀、顏色、陰影等因素組成，再搭配上合適的字體與間距，藉由簡單的觸控、按下去即可達到目的，讓人享受到即時的強烈滿足感。 線上虛擬按鈕的視覺性，來自接觸實體按鈕的體驗和認知根深蒂固， UX  使用者體驗塑造出的習慣行為和文化影響著設計的直觀性和易用性。 以下是大多數用戶熟悉的幾個按鈕示例： 帶有方形邊框的按鈕 帶圓角的按鈕 帶陰影的按鈕 幽靈按鈕 除了容易點選的按鈕樣式，保持與周遭文字適當的留白避免視覺干擾。 2. 方便搜尋版面上的按鈕位置 使用者閱讀內容的同時，會搜尋版面可點選的功能按鈕，比如：下一頁、產品介紹等，如果使用者在視覺上尋找的時間愈久，若找不到按鈕，便不會知道它的的存在，愈容易感到網站不好使用。 為了和使用者不要玩追逐按鈕的遊戲，因此使用一致性的排版設計，便會提高使用者的發現的效率與準確度。普遍於環環相扣的傳統標準佈局，足夠的留白與簡潔使版面不會太擁擠，即使不是強烈鮮明的按鈕，依然隨著閱讀動線吸引使用者輕鬆的點選。 3. 指令清楚的按鈕標示與說明 帶有誤導性資訊的按鈕標示，容易讓使用者感到迷惑。設計標示按鈕文字時，為了傳達出每個按鈕的作用，便需要簡短、有邏輯且適當的文字，讓使用者清楚了解點選按鈕後的結果，盡快獲得自己想要的內容，太拐彎抹角的說明只會讓使用者跟內容之間的距離變得更遠...