[筆記] 手機 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~

留言

張貼留言

若你看的文章,時間太久遠的問題就別問了,因為我應該也忘了... XD

這個網誌中的熱門文章

[Android] 筆記 手機上測試自己的 APP

解決fatal: Not a git repository (or any of the parent directories): .git錯誤

[Android 筆記] 設定 ImageView 的圖檔來源