[分享] 好UI爛UI大車拼02 用陰影增添層次感

看板AndroidDev作者 (妖精尾巴魔導士)時間10年前 (2014/09/21 13:43), 編輯推噓0(000)
留言0則, 0人參與, 最新討論串1/1
網誌好讀版: 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 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 123.194.161.233 ※ 文章網址: http://www.ptt.cc/bbs/AndroidDev/M.1411306985.A.010.htmldementia:轉錄至看板 Design 09/21 21:45 dementia:轉錄至看板 Digital_Art 09/21 21:45
文章代碼(AID): #1K7jNf0G (AndroidDev)