Day14_ UI設計也是hen重要! 別讓用戶使用你的APP時，還要花腦筋思考!
By Jouyu - 3月 21, 2019
身為手機重度使用者的你我，在使用app上，應該都遇到過不好用的app吧！所謂的不好用，可能是功能無法解決你的需求，或無法預期的情況(比如一直閃退)，再來就是APP畫面，會讓你我產生不知所以然的情況。對！就是介面設計無法讓你我make sence，然後出現一堆黑人問號。然後？然後？然後我們就卸載了！
 |
| 用到爛卻能真實呈現感受的黑人問號圖 |
來！讓我們一起學習app介面設計心法
設計核心與原則
首先，我們確認設計核心與原則-功能優先，不為美觀。等等！你上面不是說介面設計很重要，怎麼現在又說功能優先，不為美觀？嗯，我並不是說美觀不重要，而是我們必須分優先級(好用>好看) ，設計功能的本意是要解決用戶需求，如果沒辦法解決問題，介面再美也是會被卸載。此外，也要能讓使用者一眼看出重點，介面可以走可愛甜美風、可以絢爛夢幻、也可以專業簡潔，但如果讓使用者看得眼花撩亂，結果也是被卸載again。
視覺呈現4項法則
相關性：相關功能、資訊放在一起一般來說，會讓使用者認為彼此是有相關性的，在做搜尋時，可以減少花費的時間與精力。此外，必須要適當地留白，讓使用者可得到適度放鬆，應該不會有人想看被佔滿整個畫面的app吧！？得不到資訊，還被視覺轟炸。
e.g. 卡片式設計，相同類型的投資軟體放在一起，簡單又清楚。
對齊：一條隱形的線引導使用者閱讀
亞洲人閱讀習慣是左上至右下 ，因此，最重要的資訊可以從左上開始排列至右下。以文章內容字數多寡，排版上也有差別，如果文字多，採取置左齊頭排列，比較好閱讀，避免置中，否則會因為裝置大小不同產生排版問題。文字少，則可以採置中排列，兩旁留白，可以聚焦閱讀。
 |
| 置左齊頭排列好閱讀 |
重複：統一和提高視覺吸引力
同樣以文字數量來看，若文字多，可採明體搭配襯線字，一個字體筆畫有粗有細，閱讀起來比較不會有壓力。而文字少，可採黑體搭配非襯線字，字體筆畫粗細一樣，聚焦閱讀就不會是問題。再來，使用顏色不超過5種，可以用相近色搭配，風格要統一。
對比：強調畫面中的唯一重點
 |
| 上排大標左邊的紅色箭頭 |
對比，可以是字體粗細大小顏色的對比，可以是水平垂直排版的對比，可以是圖片大小的對比，也可以打破排版規則。以上圖為例，這張頁面主要傳達有哪些可以幫助投資的軟體，除了整齊一致的文字排列顏色大小，有對比效果的就是紅框內的箭頭，導引你的視線往下閱讀。
別讓用戶迷路
我相信你我應該曾經用過那種使用路徑不是很明確的app，會弄不清楚自己現在身在app何處。
以我自己最近用的一款app-碎碎念記帳，這個app可以設定一個角色(可以是爸爸或媽媽)在你每筆記帳時可以跟你互動，我個人是蠻喜歡互動設計，就像在Line裡面與人對話的感覺。不過，有個地方，我真的就會常常迷路(紅框)，主要是因為我無法很明確將圖示表達的功能意義連結上，常弄不清楚圖示代表什麼意思，另外是，功能會重複出現在其他頁面上，讓我更加混亂，無法清楚使用路徑。
以我自己最近用的一款app-碎碎念記帳，這個app可以設定一個角色(可以是爸爸或媽媽)在你每筆記帳時可以跟你互動，我個人是蠻喜歡互動設計，就像在Line裡面與人對話的感覺。不過，有個地方，我真的就會常常迷路(紅框)，主要是因為我無法很明確將圖示表達的功能意義連結上，常弄不清楚圖示代表什麼意思，另外是，功能會重複出現在其他頁面上，讓我更加混亂，無法清楚使用路徑。
 |
| 碎碎念記帳畫面 |
不迷路4原則
 |
原則1：知道自己在哪裡
透過標題列(上排)，讓使用者知道自己目前在哪個頁面。
原則二：知道要找的東西在哪裡
透過導引列(下排)，從大方向先找。
原則三：知道如何到達要找的地方
之前在頁面瀏覽時，點擊愛心即可收藏，透過願望清單，即可立即了解之前記錄起來的資訊。
最近瀏覽也是個可以回顧曾經看過的資訊的好幫手，即使不是當時有興趣的資訊，但當你有需求時，再回過頭來找，也不至於花太多時間。
互動設計
介面互動的5個小細節
習慣:與現實世界的關聯性，擬物化 e.g.iphone (現在大多改為扁平化)及使用者習慣
線索：讓使用者知道可以互動，誘使使用者展開行為
配對：做了這個動作哪個部分會有反應要讓使用者能預期
回饋：使用者做了之後會得到回應，不論正確或是錯誤行為
給鼓勵之後，手手變實色，上面多個+1
例外：預設值/錯誤情境/無資料情境/等待情境/極端數值處理
信箱帳號輸入錯誤，立刻被檢測出提醒糾正修改。
0 意見