從0 到1開發一款App（三）：設計

我們先回顧一下上篇文章，上篇文章中我們主要講了和產品相關的內容，包括優秀的產品、它們所具備的優秀特質以及《麻雀筆記》的產品思想等，還沒看過的朋友可以點擊下方鏈接進行閱讀：

https://blog.csdn.net/ChrisSen/article/details/95194869

今天這篇文章主要講一下跟設計相關的內容，共分爲三個部分：

1. 設計風格
2. 資源分享
3. 夜間模式

設計風格

軟件的整體設計風格參考了Material Design。

官方網址：https://material.io/design/

Material Design於2014年在Google I/O大會上正式的對外公佈。谷歌之所以會高調的推出Material Design，是爲了能夠引領或者統一安卓的設計以及交互。

Material Design is a visual language that synthesizes the classic
principles of good design with the innovation of technology and
science.

Material Design是一種視覺語言，它將優秀設計的經典原則與技術和科學的創新相結合。

詳細的介紹，大家可以通過上方的鏈接進行查看，在這我就不做詳細介紹了。

值得一提的是Material Design並不是一成不變的，最新版的Material Design很多人都會稱之爲MD2，有點像是第二個版本的意思。在最新版的Material Design中，一個顯著的特點就是：留白。通過很多谷歌系的App你會直觀的感受到這個特徵。

對於MD的新設計風格，我個人非常喜歡。我自己也是喜歡簡潔、極簡的設計風格，所以在新版本中，在保證使用體驗的前提上，能夠把界面做得更簡潔的是我一直的追求。

至於軟件中的一些細節問題我也會不斷的學習，不斷的完善。在新版本中，有兩個地方會做改善：一個是統一背景色，目前的背景色還不夠統一，會導致部分界面看起來不夠協調；第二個是確定主題色，希望通過一個主題色能夠讓軟件整體看起來更加靈動，更有活力。

資源分享

圖標：

1. Google Material Icon
   官方網址：https://material.io/resources/icons/?style=baseline
   
   如果你做的App是MD的風格，使用官方提供的圖標肯定會讓你的軟件更加MD。
   Material Icon提供的圖標種類很多，而且還可以選擇樣式，包括：Filled、Outlined、Rounded、Two-Tone和Sharp。圖標數量並不算太多，但它最大的優勢在於風格的統一性。
2. Iconfont
   官方網址：https://www.iconfont.cn/plus/home/index?spm=a313x.7781069.1998910419.2.cqg1vX
   
   Iconfont是阿里巴巴的矢量圖標庫，數量非常多，風格也很多樣。搜索任何的關鍵字幾乎都會有與之相匹配的圖標。除了常規的圖標，它們來提供了圖標庫，圖標庫的作用是爲了保證圖標的統一性。
   
   在自定義上Iconfont做得也非常的出錯，尋找圖標的時候可以選擇單色還是多色。
   
   在保存的時候，也提供了非常多的自定義選項，包括：顏色、大小以及圖片格式等等。
   

在開發中，這兩個網站基本上就可以完美地解決圖標問題。

插畫：

1. unDraw
   官方網址：https://undraw.co/
   
   提到插畫，我第一個想到的就是unDraw，除了提供了非常多的精美的插畫外，所有的插畫都是開源的，也就是說你可以免費使用而不用擔心版權問題。
   
   如果你覺得配色跟你的App不相配，你也可以自定義主色。
   
2. Ouch
   官方網址：https://icons8.com/ouch/
   
   這個網站是我最近才發現了，上圖中你可以看到“Download all comps”，點擊它你會得到一份插畫大禮包。
   
   每一個文件夾中都提供了諸多精美的插畫，風格多樣，而且很常用。
   
   不要猶豫了，趕快去下載吧！

目前我的App中使用的都是unDraw提供的插畫，後期也會考慮使用Ouch的，實在是太漂亮了。

配色：

1. Material Design Color
   官方網址：https://material.io/design/color/
   
   這個是Material Design推薦的配色，還是那句話：“MD首選”。
   
2. 傳統色卡
   官方網址：https://color.uisdc.com/jp/
   
   如果你喜歡傳統的顏色，這個網站你一定會非常喜歡的。除了日本傳統色彩，也提供了中國的傳統色彩。
   
3. Gradient Hunt
   官方網址：https://gradienthunt.com/
   
   除了單色以外，漸變色也是比較常用的。Gradient Hunt提供了非常多的配色方案，如果你需要漸變色，想必這個網站會讓你愛不釋手。

夜間模式

在最新的Android Q中，谷歌官方已經提供了夜間模式功能。與此同時，Material Design中也加入了Dark Theme相關的主題。

官方網址：https://material.io/design/color/dark-theme.html

夜間模式在《麻雀筆記》中的效果圖：

除了常規的手動切換夜間模式，軟件中我們也支持設置自動夜間模式的時間。夜間模式這一塊，在後續的軟件更新中我們會適配android Q的夜間模式（系統開啓夜間模式，app也自動開啓夜間模式），同時在細節部分也會不斷地優化。