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

CSS Transform 在 hover 時有殘影

最近在寫一些 css 的效果，主要是利用 css3 的 transform 跟 animation，在一個 div hover 時，有些小特效，像是往上移動，或是某些小元件放大，主要是有用到 scale，不過發現在 hover 時，有時候會殘影，在網路上找到兩個解法，一個是在某 div 加上 image-rendering 屬性，另一個是 backface-visibility，實測之後，image-rendering 非常有用，幾乎是9成機率未再見到 hover 時的殘影，給大家參考 :)

image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;


-webkit-backface-visibility: hidden;
backface-visibility: hidden;


參考文章:
＊Image-rendering 參考文章 : https://css-tricks.com/almanac/properties/i/image-rendering/。文章有提到 :『The image-rendering property defines how the browser should render an image if it is scaled up or down from its original dimensions. 』。

* http://stackoverflow.com/questions/15464055/css-transition-effect-makes-image-blurry-moves-image-1px-in-chrome

BTW 我對 animation 沒有很熟，剛好有機會練到而已 Orz...

做 Mobile Web 的兩三事...

是說編編擔任前端一職至今也兩年了，也有做過幾次 Mobile Web，(雖然稱不上專業...，但是我沒有放棄要努力好好學的意思...)，之前一直想要記錄一下心路歷程，但是一直停留在我那點好幾次分頁的 google 草稿，再加上今年年中有一段懶散，一直沒有寫文章 。

對了，我喜歡片段式的記錄自己學的東西，然後再一次集結起來。

(此圖僅是示意圖而已)

我見過兩種手機版網站的開發的方法

1. 一種是真的當作另一個網站在開發