我們先回顧一下上篇文章，上篇文章中我們主要講了和產(chǎn)品相關(guān)的內(nèi)容，包括優(yōu)秀的產(chǎn)品、它們所具備的優(yōu)秀特質(zhì)以及《麻雀筆記》的產(chǎn)品思想等，還沒(méi)看過(guò)的朋友可以點(diǎn)擊下方鏈接進(jìn)行閱讀：

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

今天這篇文章主要講一下跟設(shè)計(jì)相關(guān)的內(nèi)容，共分為三個(gè)部分：

設(shè)計(jì)風(fēng)格

資源分享

夜間模式

設(shè)計(jì)風(fēng)格

軟件的整體設(shè)計(jì)風(fēng)格參考了Material Design。

官方網(wǎng)址：https://material.io/design/

Material Design于2014年在Google I/O大會(huì)上正式的對(duì)外公布。谷歌之所以會(huì)高調(diào)的推出Material Design，是為了能夠引領(lǐng)或者統(tǒng)一安卓的設(shè)計(jì)以及交互。

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

Material Design是一種視覺(jué)語(yǔ)言，它將優(yōu)秀設(shè)計(jì)的經(jīng)典原則與技術(shù)和科學(xué)的創(chuàng)新相結(jié)合。

詳細(xì)的介紹，大家可以通過(guò)上方的鏈接進(jìn)行查看，在這我就不做詳細(xì)介紹了。

值得一提的是Material Design并不是一成不變的，最新版的Material Design很多人都會(huì)稱(chēng)之為MD2，有點(diǎn)像是第二個(gè)版本的意思。在最新版的Material Design中，一個(gè)顯著的特點(diǎn)就是：留白。通過(guò)很多谷歌系的App你會(huì)直觀的感受到這個(gè)特征。

對(duì)于MD的新設(shè)計(jì)風(fēng)格，我個(gè)人非常喜歡。我自己也是喜歡簡(jiǎn)潔、極簡(jiǎn)的設(shè)計(jì)風(fēng)格，所以在新版本中，在保證使用體驗(yàn)的前提上，能夠把界面做得更簡(jiǎn)潔的是我一直的追求。

至于軟件中的一些細(xì)節(jié)問(wèn)題我也會(huì)不斷的學(xué)習(xí)，不斷的完善。在新版本中，有兩個(gè)地方會(huì)做改善：一個(gè)是統(tǒng)一背景色，目前的背景色還不夠統(tǒng)一，會(huì)導(dǎo)致部分界面看起來(lái)不夠協(xié)調(diào)；第二個(gè)是確定主題色，希望通過(guò)一個(gè)主題色能夠讓軟件整體看起來(lái)更加靈動(dòng)，更有活力。

資源分享

圖標(biāo)：

Google Material Icon
官方網(wǎng)址：https://material.io/resources/icons/?style=baseline

如果你做的App是MD的風(fēng)格，使用官方提供的圖標(biāo)肯定會(huì)讓你的軟件更加MD。
Material Icon提供的圖標(biāo)種類(lèi)很多，而且還可以選擇樣式，包括：Filled、Outlined、Rounded、Two-Tone和Sharp。圖標(biāo)數(shù)量并不算太多，但它最大的優(yōu)勢(shì)在于風(fēng)格的統(tǒng)一性。

Iconfont
官方網(wǎng)址：https://www.iconfont.cn/plus/home/index?spm=a313x.7781069.1998910419.2.cqg1vX

Iconfont是阿里巴巴的矢量圖標(biāo)庫(kù)，數(shù)量非常多，風(fēng)格也很多樣。搜索任何的關(guān)鍵字幾乎都會(huì)有與之相匹配的圖標(biāo)。除了常規(guī)的圖標(biāo)，它們來(lái)提供了圖標(biāo)庫(kù)，圖標(biāo)庫(kù)的作用是為了保證圖標(biāo)的統(tǒng)一性。

在自定義上Iconfont做得也非常的出錯(cuò)，尋找圖標(biāo)的時(shí)候可以選擇單色還是多色。

在保存的時(shí)候，也提供了非常多的自定義選項(xiàng)，包括：顏色、大小以及圖片格式等等。

在開(kāi)發(fā)中，這兩個(gè)網(wǎng)站基本上就可以完美地解決圖標(biāo)問(wèn)題。

插畫(huà)：

unDraw
官方網(wǎng)址：https://undraw.co/

提到插畫(huà)，我第一個(gè)想到的就是unDraw，除了提供了非常多的精美的插畫(huà)外，所有的插畫(huà)都是開(kāi)源的，也就是說(shuō)你可以免費(fèi)使用而不用擔(dān)心版權(quán)問(wèn)題。

如果你覺(jué)得配色跟你的App不相配，你也可以自定義主色。

Ouch
官方網(wǎng)址：https://icons8.com/ouch/

這個(gè)網(wǎng)站是我最近才發(fā)現(xiàn)了，上圖中你可以看到“Download all comps”，點(diǎn)擊它你會(huì)得到一份插畫(huà)大禮包。

每一個(gè)文件夾中都提供了諸多精美的插畫(huà)，風(fēng)格多樣，而且很常用。

不要猶豫了，趕快去下載吧！

目前我的App中使用的都是unDraw提供的插畫(huà)，后期也會(huì)考慮使用Ouch的，實(shí)在是太漂亮了。

配色：

Material Design Color
官方網(wǎng)址：https://material.io/design/color/

這個(gè)是Material Design推薦的配色，還是那句話(huà)：“MD首選”。

傳統(tǒng)色卡
官方網(wǎng)址：https://color.uisdc.com/jp/

如果你喜歡傳統(tǒng)的顏色，這個(gè)網(wǎng)站你一定會(huì)非常喜歡的。除了日本傳統(tǒng)色彩，也提供了中國(guó)的傳統(tǒng)色彩。

Gradient Hunt
官方網(wǎng)址：https://gradienthunt.com/

除了單色以外，漸變色也是比較常用的。Gradient Hunt提供了非常多的配色方案，如果你需要漸變色，想必這個(gè)網(wǎng)站會(huì)讓你愛(ài)不釋手。

夜間模式

在最新的Android Q中，谷歌官方已經(jīng)提供了夜間模式功能。與此同時(shí)，Material Design中也加入了Dark Theme相關(guān)的主題。

官方網(wǎng)址：https://material.io/design/color/dark-theme.html

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

除了常規(guī)的手動(dòng)切換夜間模式，軟件中我們也支持設(shè)置自動(dòng)夜間模式的時(shí)間。夜間模式這一塊，在后續(xù)的軟件更新中我們會(huì)適配android Q的夜間模式（系統(tǒng)開(kāi)啟夜間模式，app也自動(dòng)開(kāi)啟夜間模式），同時(shí)在細(xì)節(jié)部分也會(huì)不斷地優(yōu)化。

總結(jié)

以上是生活随笔為你收集整理的从0 到1开发一款App（三）：设计的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。