※ [本文轉錄自 AndroidDev 看板 #1K7jNf0G ]
作者: dementia (妖精尾巴魔導士) 看板: AndroidDev
標題: [分享] 好UI爛UI大車拼02 用陰影增添層次感
時間: Sun Sep 21 21:42:59 2014
網誌好讀版：
http://thisblogexist.pixnet.net/blog/post/106826021
~ ~ ~ 本文開始 ~ ~ ~
在今年6月Android I/O，Material Design亮相。相信只要對手機UI設計有所
涉獵的人都不陌生。
Material Design其特色之一「陰影」－－利用影子來增加元件之間的層次感
，如果能適度地使用陰影，UI便會更有格調。
這次麵下要介紹一款APP，它巧妙地使用了陰影。
http://pic.pimg.tw/thisblogexist/1411296962-509320682.jpg
經典案例1號：適度使用陰影增添層次感
　APP資訊
　APP名稱：tawkon手机辐射报警器
　版本資訊：2.0.3.6（Android）
http://pic.pimg.tw/thisblogexist/1411129258-2432749229.png
這款APP有啟動畫面（splash screen）。一般來說，使用者多會希望APP一開
啟就是操作頁面，因此啟動畫面或動畫往往只是一種干擾。
然而，也不是所有的啟動畫面都會令人反感：
1. 當使用者比較有耐心的時候
　　比方說休息、在家、或是只想用手機打發時間的時候，這和APP的使用場
　　合有很大的關係。
2. 啟動畫面很美
　　廠商或開發者希望多秀幾次logo，可是使用者只想看到養眼的畫面。
3. 不得不加點東西的時候
　　有時候因為網路連線、讀取資料庫等等，只有一個中間圈圈在轉，不只單
　　調更讓使用者沒安全感，這時候加個背景是再好不過了。
　　值得注意的是，與其放logo，改成一個跟下一頁相似的畫面可能更為加分
　　（請參照延伸閱讀1）。
http://pic.pimg.tw/thisblogexist/1411129259-933534284.png
在兩個地方，我們看到這款APP運用了陰影效果，上圖是其一，下圖是另一個
有用到陰影的地方。
從上圖的中間部分，也就是「分頁按鈕」，我們可以看到影子效果將整個畫面
切成上、中、下三個視覺區塊。上方區塊給人的感覺最厚、與使用者最近，中
間區塊次之，下方區塊最遠。
除了陰影之外，顏色對比和那個小箭頭的設計都是值得留意的部分。
http://pic.pimg.tw/thisblogexist/1411129259-3193395477.png
這是tawkon的對話框。
和前面「分頁按鈕」不同的地方是，中間多出一條有點突兀的細線。很罕見的
設計。
會這樣做的主要原因，大概是因為兩顆按鈕是「平等」的，沒有誰先誰後、誰
重誰輕之分的關係，然後又為了配合陰影的設計，所以在中間加了一條細線。
本篇完。請耐心等候續集……
延伸閱讀：
1. 合適的 APP 啟動畫面 - Desiring Clicks
http://0rz.tw/n5r65