[筆記] 手機 APP 畫面的分類

今天大概翻了一下一本跟 app ui/ux 有關的書，筆記一些東西，因為在 google 的過程中發現有些東西我蠻想記錄下來的 :P 不過 UI 元件我沒有特別紀錄，因為 ios 跟 android 還是有點差別，要寫的話就要分開紀錄了。


手機 APP 畫面簡略來分，可分為 :
(1) 起始畫面
(2) 主畫面
(3) 列表頁
(4) 詳細頁面
(5) 其他，像是登入畫面, input 畫面, 管理畫面...

(1) 起始畫面，以使用場景來看有
- Splash
App 準備啟動時的畫面 (但其實有時候 app 載入很快的話，你可能看不到，我曾經有朋友跟我分享過他接過一個 app，對方不管怎樣都希望載入 app 時出現 splash... XD)

想看一些 splash 畫面: http://www.mobile-patterns.com/splash-screens

-Walk-Through 逐一介紹畫面:
walk through 漫步的意思，通常這個畫面出現在你第一次開啟該 app 時才會看到，主要是導覽你關於該 app 的一些介紹。有點類似 web 的 slideshow，一張一張的刷掉，然後就會退出，讓你正式的開始用該 APP。

想看一些 walk through 的設計: Walkthrough UI Design 

- Coach Mark 教練標記
教練標記我覺得跟 walk throught 很類似，只是他把你的視覺帶到更實際的界面上引導你，什麼地方或是什麼按鈕可以發生什麼樣的事情。

想看一些 Coach Mark 的畫面: http://www.mobile-patterns.com/coach-marks

- Empty Data Set 空資料狀態
沒有資料時的畫面樣式。

想看一些 Empty Data Set: http://www.mobile-patterns.com/empty-data-sets

(2) 主畫面
嚴格來說主畫面才是整個 app 的重頭戲，而起始畫面可能不一定是必要，看情況，有些時候有，也許對使用者體驗會蠻好的。主畫面是 App 的門面，也會擺放其他操作的 UI 元件，像 navigation...。

(3) 列表畫面
列表畫面是最常看到的畫面，大部份的資料都會比列表作為呈現，只是 UI 設計不同。列表畫面最常見的例子有:   搜尋結果, timeline 顯示, 訊息紀錄, 簡訊紀錄,  媒體相簿。

列表畫面的一些 sample: http://www.mobile-patterns.com/lists

(4) 詳細畫面
詳細畫面通常都是 user 操作流程最底 (或者說步驟比較深) 的畫面，但詳細畫面也很重要，因為這個畫面往往才是 uesr 一直想知道的內容。說起來也蠻有趣的，有一種目的地是在最深處，可是要怎麼讓 user 走到對的地方，這就跟 app 的流程設計跟引導設計比較有關係 :)

詳細畫面的 sample: http://www.mobile-patterns.com/detail-views

IOS 與 Android 的 Design Guide
IOS 的 design principle
Android 的 design principle


APP 的 UI 怎麼優化
這我沒有特別的想法(也許我想的是錯的)，但我覺得不能說是優化，先想著什麼東西很多餘，像是避免混淆使用者的元件應該都要拔掉或是換掉。(比方說用第三方免費的 icon，但是 icon 沒有用對，或是表達的意思不夠清楚)。

整個打掉重新設計也是一種方法....。

說到這也有個小故事，上個禮拜跟一個做 app 的朋友團隊聊天，大家在設計 app 的時，總是會不小心把 web 有的功能也都放到 app 的設計裡去，然後變成煩惱生煩惱，本來只是一行字的東西，變成一個 icon，最後變成一個 icon 點了之後要出現 menu...，捨去法好像在設計 content 很多的題目上好像真的很難 XDD



這一兩年寫 Web 的心得: 好像越來越多人喜歡把 Mobile Web 設計得很像 APP，但好像也有人喜歡把 APP 的感覺做成 Web...，覺得有點奇妙... 說不出哪裡奇妙。不知道有沒有發案主連自己做的 app 是真 App 還是 web  包起來的 app 都不知道。只能說我覺得這個市場有點複雜....有點奇妙...

參考連結:

http://www.appdesignserved.co/  一些 app 的設計，看了眼睛會很舒服 :D 或是去看 behance~

https://medium.com/sketch-app-sources