這次參加Webstock 2016，有幸聽到許多大師級的人來演講，頗令人興奮。
(... 好吧我老實說，我報名之前根本不知道這些人是大師。)
這篇是關於Luke Wroblewski (http://www.lukew.com) 在主會前一天所舉辦的全天workshop所做的一些摘記。
Luke最近的一本書是2011年出版的 "Mobile First" (http://www.amazon.com/Mobile-First-Luke-Wroblewski/dp/1937557022/ref=sr_1_1?ie=UTF8&qid=1455328842&sr=8-1&keywords=Mobile+first)。
如果不知道這個人在幹什麼的，建議去底下的網址，點選一些他最近幾年的演講影片來聽聽看，多半會有不少收穫。
http://www.lukew.com/presos/
甚至他的Twitter上面所寫的每一條東西，都值得了解一下。
這個workshop的執行方式也很特別。在第一堂課聽完他講的前言(大致上不脫上面那個網址裡面各種投影片的在整理)之後， 就問大家今天想問什麼任何跟手機app/網頁的UI相關的問題，然後他就直接把提問條列出來。接著驚人的東西開始了...
每個人問的任何問題，他都可以翻出一段他以前做好的投影片、影片，當場講給你聽。各種統計數字、圖表一應俱全。一整天下來他解答了二三十個問題，每個都有一段投影片可以對那個問題說明!
這簡直是活的百科全書啊!!!
(或者是全世界的手機開發、設計人員問的都大同小異... oops)
好吧，摘錄幾個有趣的重點(以下的摘記，若未註明是手機還是電腦，那就是以手機為主角)。
數字方面的摘記
- Smart phone花了四年就突破PC的數量了，而這兩者之間的趨勢線圖，極度不成比例。
(來源: http://www.lukew.com/ff/entry.asp?1954)
- Facebook內建的瀏覽器，是世界上"手機出廠內建的瀏覽器"以外的最大瀏覽器。所以要測試你的mobile web的狀況，一定要測試它在Facebook內的開啟狀況。
(來源: http://www.lukew.com/ff/entry.asp?1954)
- 然後，在app和手機版網頁之間的蹺蹺板...
(來源: http://www.lukew.com/ff/entry.asp?1954)
- 65% 的智慧型手機使用者，在最近一個月沒有下載任何app。
想法上的摘記
- Lots To Learn vs. Lots To Unlearn - 關於手機，由於它只有不到十年的歷史，所以我們還有很多手機上的行為、設計是有待探索(Luke用的詞是"Learn")的。而在探索手機的同時，我們也要同時學習如何忘掉(Luke用的詞是"Unlearn")電腦上的很多已知。 ---
- Out of sight, out of mind - 畫面上看不到的東西，使用者幾乎不會太試圖去找尋。所以，重要的功能要直接做在使用者看得到的icon或按鈕，不要藏在目錄選單中。（我: 目前不管是Android或iOS都有material design guide，可是事實上這些指引只是讓你的app跟別的app行為一致，但對於讓你的app"易於上手"上，一點幫助都沒有。現在流行的side drawer menu或是Android的options button，都是讓你的app沒辦法讓使用者發掘到你最重要的功能的元凶)。
- 今年開始的app設計趨勢可能會往"gooey"這類的東西發展。(按下去會有ㄉㄨㄞ ㄉㄨㄞ 的彈跳感的元素)
- Obvious always wins。做得明顯好用，好過符合material design。
- 設計手機版網頁時，找一下"Responsive Navigation Design"來找靈感。
- 某個關於responsive 的pattern參考網址該讀一讀: http://bradfrost.com/blog/post/revisiting-the-priority-pattern/
- Design principle不應該寫太模糊的概念，應該具體化。例如，"universal", "clear", "human", "transparent"這類的字眼都是無用的，它們在你後續的設計過程中，無法成為幫助你的準則。
實作上的摘記
- 手機版的網頁，不應該只是把原本的電腦網頁做排版(舉了一個例子，某學校的網站，經過手機編排以後，大小是令人瘋狂的320px * 26115px)，而是必須要整個網站重新設計一次他的階層、編排，以便同時符合電腦和手機。
- 75%的使用者會在頁面完全載入之前開始進行捲動 - 意思就是放在畫面最上端的元素，其實最不容易被看到。
- Carousel Gallery這類的輪播圖片，經過統計，只有1%的人會去按左右的按鈕。此外，第一張圖片被點擊的機率，比後面所有圖片被點擊的機率通通加起來還多很多 （我: 比如說，第一張圖片被點擊的機率是80%，後面所有圖片通通加起來是20%)
- 下拉式選單需要最多的使用者操作行為 (至少三次點擊)，所以除非不得已，否則想盡辦法不要用。最蠢的就是用下拉式選單來選擇數字之類的。
- 圖片小訣竅1: 如果圖片A是100KB，然後把圖片A放大2倍 (200%)，然後存檔時用0% quality儲存為圖片B，則B的大小約為A的一半，但是 - 把B放在畫面上，用跟A一樣大的像素顯示時，兩者不容易看出不同。
- 圖片小訣竅2: Facebook的"快速預覽圖"(例如，個人封面照)，是把原本的圖片縮小很多被以後存下來，然後使用原尺寸顯示，就能得到模糊的快速預覽。