App UI 設計詳解，如何設計出好看好用又好棒的App
Posted On 2024 年 2 月 5 日
圖/文: 視覺設計部 Ann Hsing
隨著智慧型手機越來越普及，人手一台手機，多家公司除了網頁版的網站之外也紛紛推出了app提供使用者操作選擇。使用者在操作app下，普遍會比網站有更好的體驗，除了app本身就是為行動裝置量身打造之外，也多會加上針對行動裝置特有的細節，使整體操作上更貼近、符合使用者的切身需求，下面就讓我們來看看在我們以往製作（提案、實際發布）的案例中，有哪些特別的設計是針對app做的～
符合操作習慣的調整-拇指法則(Thumb Zone)
針對單手使用移動裝置的習慣，資深互動設計師steven hoober 曾在 2013 年針對 1300 位使用者做過相關的研究並產生了下面的數據：
– 單手使用手機比率 49%
– 以右手拇指操控的比率 67%
– 以左手拇指操控的比率 33%
「單手使用手機的比率為49%，其中以右手拇指操控的比率 67%；左手操控比率為33%」
透過這份調查可以得知，幾乎一半以上的使用者會單手使用手機，並高達六成會使用右手拇指做操作，並且也會有三成利用左手拇指操作，左手操作的比例也可以於做介面規劃時納進考量。
左右拇指的觸及範圍可以參考 2016 年 samantha 提出的模型，顯示了再使用一個 4.7 寸手機的情況下，女生能觸及的範圍，如下圖所示：綠色是輕易可以觸碰到的，橘黃色區域是需要伸展、移動抓握區域，而紅色則是較難碰到的地方。
這樣看起來在螢幕越來越大的趨勢下，使用者可觸及的範圍會逐漸往下移動，左右手可觸碰的區域也大不相同。再更大的螢幕範圍，左右手可觸及範圍相對來說會差異更大。
再此之後，也越來愈多 UX 設計師開始重視單手使用手機的情況。
在上圖案件上我們提供了左右手操作選項供習慣不同的使用者做調整，讓功能選單更容易被觸及。利用小細節提升使用上的便利性，並更符合行動裝置的互動行為，讓不管是在左手還是右手的使用者在使用上都能達到單手操作。
現在是什麼情況告訴我-反饋、提示樣式
反饋事件的用意主要是讓用戶操作時可以清楚知道是否成功點擊該功能、引導/提示用戶操作行為。
以往的習慣會讓使用者對操作的理解有著約定俗成的作用。以最普遍的按鈕樣式來說舉例說明，下面兩張圖，我們會覺得視覺上按起來凸起的按鈕可以點選，看似按下的按鈕則是已點選的狀態，這來自於我們現實生活中的操作行為認知，對於光線的理解通常是從上往下的，而按鈕點選後顏色會較深的感受通常是來自手部在遮擋光線下造成的陰影加深了原本實體按鈕的感受。
我們對顏色也會有一定程度上的認知，紅色通常會給我們緊急、危險的感受，綠色則帶有成功、完成的語意。最常見的會是流程的完成頁或結果頁，在畫面上的圖示如果是紅色或暖色系，我們就會下意識地覺得：哦！這個東西出問題或失敗了！
所以如果明明流程走完沒問題也是成功的文字訊息，但icon卻是紅色的，則會讓使用者花更多時間去理解內容或造成誤解，除非你的app整體用色就是暖色調就另當別論了。
另外，Launch screen 在操作上的重要性也是非常高的，最常見的方法為：Skeleton page design、Splash page design
Skeleton page design
Skeleton page design 是頁面還沒完全載入之前，以灰色方塊的動態閃爍呈現當前頁面大致輪廓，在即將出現資訊的位置上加上灰色的骨架樣式作為引導提示，再逐漸載入到完整的畫面，好處是可以讓使用者預期畫面的長相，也可以讓畫面之間的跳換更加流暢。
Facebook就是一個常見的例子，讓使用者可以預期即將出現的內容，且感到跳轉的畫面是流暢並快速的。
Skeleton page design
最常見的就是開啟app時會出現的整面的覆蓋畫面加上app的logo，有動態跟靜態的，如果載入時間過長靜態的畫面很可能會讓使用者注意力發散、甚至感覺流程被打段。這個方式只適合用於開啟app的第一步，跳轉頁面則會以其他方式取代。
畫面的跳轉時間也會影響使用者的流程體驗，根據MIT的研究，人的等待時間如果在一秒內，將會認知自己還在原本的使用者流程中，超過一秒則會開始分心，超過10秒就會覺得使用者流程被打斷。但以目前app來說，兩個並行使用為大宗～
現在是什麼情況告訴我-反饋、提示樣式
有鑒於手機一屏內可視範圍較桌機小很多，在畫面設計時必須要妥善的規劃範圍、部分內容，讓一視屏範圍可以達到最好的利用效果。
下圖為常見的header與選單固定方式，在卷軸滾動時會固定在畫面的最頂端，但這樣的做法在RWD的情況下需要因應螢幕高度變小進行選單內容的隱藏，才不會壓縮到手機尺寸下使用者瀏覽資訊的範圍。
除此之外，螢幕範圍變小也會影響到部分內容的排列樣式，畫面中呈現的物件也要有讓使用者有可以滑動的視覺感受，而行動裝置最常見的呈現方式如下圖，常常會看見這樣區塊卡片式的左右、上下排列內容，呈現的內容會是裁斷的呈現方式，我們的大腦就會自動把形體完整化，讓使用者會有內容物可滑動、還有可多內容的感受。
上圖藍色的區塊為大腦會自動補齊的範圍，這種視覺心理稱之為「連續性」，是在說明我們會把相同形體的事物自動看成是連續的狀態，並自動填補失去的資訊，利用這樣的操作，我們可以把很多相同的資訊內容堆疊起來，讓小尺寸的空間也能做妥善利用。
現在是什麼情況告訴我-反饋、提示樣式
現在很多網頁點進去滿滿的彈跳視窗，主要的內容幾乎都被遮蔽了，甚至文章閱讀到一半還要突然給你一個滿版的動態彈跳視窗強迫你看完，想關還要找半天他的關閉按鈕到底在哪裡，除了沒辦法好好閱讀內容之外還是對耐心的考驗，耐心被消磨光後就是點選關閉視窗的按鈕了，網路上有一個有趣的網站可以模擬這樣的操作 https://how-i-experience-web-today.com/detail.html# 流程下使用者的體驗 。
雖說彈跳視窗惱人又擾民，但他的存在還是有其必要性，可能是重要提示性的訊息、或是簡單表單的呈現，哪些時候我們必須使用到彈跳視窗呢？
基本上依照不具侵入性、不打斷使用流程為主要依據，並減少一個網站中彈跳視窗的數量，不要一跳二跳三跳讓使用者難以辨識操作路徑且難以關閉，如果真的想要推播廣告性質的彈跳視窗，也許可以考慮在使用者閱讀完內文、閒置一段時間後再跳出，提升使用者使用網站的意願、降低跳出率。
而內容也不建議過多、以在一視屏內容完整閱讀為主，避免使用者必須在小小的畫面中還需操作或填寫過多的內容，畢竟彈跳視窗最主要的目的是傳達必要資訊而不是打斷使用流程。
以上就是在app設計過程中容易遇到的幾個要點的其中一部份，UI設計博大精深要討亂實在不是短短三言兩語可以說完的，這幾項算是比較常被提出問題的點，如果能在初期就多加留意，app設計的易用性一定可以提升。
訂閱偉康科技洞察室部落格，掌握最新科技趨勢！
專人協助
由偉康業務人員為您詳細說明偉康的解決方案，以及相關產業經驗。
About The Author
