iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 11
0
自我挑戰組

30 天開發 Android App 的流水帳系列 第 11

Day 11:如何設計美麗的 App 畫面?

自行開發若沒有設計師的提供的畫面,工程師要如何想像呢?

Material Design

對 Android 工程師來說,對 Material Design 並不陌生,官方網站也提供許多的資訊哪些是好或是不好的做法。不是很確定自己的想法是否可行,可以先看看 guildeline 的指示,回頭檢視自己的畫面。

除了 Material Design 之外,還有什麼可以參考的?

觀察你手上的 App

看看你喜歡什麼 App 的畫面或是互動,然後觀察為什麼你喜歡這些細節。然後把這些細節試著套用在你的 App 上面,也許沒那麼好,但是基本的互動跟畫面還是會有的。舉例來說,想做列表頁 就去看看手上的 App 有沒有這些介面可以參考,像是連絡人、LinkedIn 的連絡人介面、LINE 聊天列表等等。

看看別人的設計

看著美美的設計,然後看看自己怎麼樣達成這樣的畫面。不知道該無麼辦,在 Google 下關鍵字,可以看到許多的作品可範本,下面提供一些網站分享給大家,可何去找一個合適的 App 設計範本

  • Behance:蠻多元素可以參考的,雖然 App 介面比較少,但其他設計的元件其實蠻多的。
  • Pinterest:有關鍵字跟 Tag 設計,在搜尋結果用瀑布流顯示,交錯顯示的方式可以一次看到很多的資訊
  • Collectui:最大的特色就是側邊有主題分類,可依據自己的需求去尋找
  • Dribbble:不僅限於 App 有各種各樣的作品的聚集地

畫面的優化,要從何下手呢?

看了一些畫面,想要像下面兩張截圖做一些調整

  • 上:https://www.pinterest.com/pin/412079434654555083/
  • 下:https://www.pinterest.com/pin/356277020520586479/
    https://ithelp.ithome.com.tw/upload/images/20200923/20130546g6KloY9jw0.png
    https://ithelp.ithome.com.tw/upload/images/20200923/20130546wPyZ1OL7ed.png

調整方向有 3 個

  • 調整 toolbar 的顏色,想把現在的紫色改成白色
  • 每一個 item 有圓角並帶陰影
  • 各自的 item 的單色背景色可以自訂

明天就來開始調整 toolbar 的顏色!


上一篇
Day 10:30 天挑戰,第 1 個里程碑 - 雛型
下一篇
Day 12:來改 App Toolbar 顏色吧
系列文
30 天開發 Android App 的流水帳32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言