从0 到1开发一款App（三）：设计

我们先回顾一下上篇文章，上篇文章中我们主要讲了和产品相关的内容，包括优秀的产品、它们所具备的优秀特质以及《麻雀笔记》的产品思想等，还没看过的朋友可以点击下方链接进行阅读：

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

今天这篇文章主要讲一下跟设计相关的内容，共分为三个部分：

设计风格
资源分享
夜间模式

设计风格

软件的整体设计风格参考了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的新设计风格，我个人非常喜欢。我自己也是喜欢简洁、极简的设计风格，所以在新版本中，在保证使用体验的前提上，能够把界面做得更简洁的是我一直的追求。

至于软件中的一些细节问题我也会不断的学习，不断的完善。在新版本中，有两个地方会做改善：一个是统一背景色，目前的背景色还不够统一，会导致部分界面看起来不够协调；第二个是确定主题色，希望通过一个主题色能够让软件整体看起来更加灵动，更有活力。

资源分享

图标：

Google Material Icon
官方网址：https://material.io/resources/icons/?style=baseline

如果你做的App是MD的风格，使用官方提供的图标肯定会让你的软件更加MD。
Material Icon提供的图标种类很多，而且还可以选择样式，包括：Filled、Outlined、Rounded、Two-Tone和Sharp。图标数量并不算太多，但它最大的优势在于风格的统一性。
Iconfont
官方网址：https://www.iconfont.cn/plus/home/index?spm=a313x.7781069.1998910419.2.cqg1vX

Iconfont是阿里巴巴的矢量图标库，数量非常多，风格也很多样。搜索任何的关键字几乎都会有与之相匹配的图标。除了常规的图标，它们来提供了图标库，图标库的作用是为了保证图标的统一性。

在自定义上Iconfont做得也非常的出错，寻找图标的时候可以选择单色还是多色。

在保存的时候，也提供了非常多的自定义选项，包括：颜色、大小以及图片格式等等。

在开发中，这两个网站基本上就可以完美地解决图标问题。

插画：

unDraw
官方网址：https://undraw.co/

提到插画，我第一个想到的就是unDraw，除了提供了非常多的精美的插画外，所有的插画都是开源的，也就是说你可以免费使用而不用担心版权问题。

如果你觉得配色跟你的App不相配，你也可以自定义主色。
Ouch
官方网址：https://icons8.com/ouch/

这个网站是我最近才发现了，上图中你可以看到“Download all comps”，点击它你会得到一份插画大礼包。

每一个文件夹中都提供了诸多精美的插画，风格多样，而且很常用。

不要犹豫了，赶快去下载吧！

目前我的App中使用的都是unDraw提供的插画，后期也会考虑使用Ouch的，实在是太漂亮了。

配色：

Material Design Color
官方网址：https://material.io/design/color/

这个是Material Design推荐的配色，还是那句话：“MD首选”。
传统色卡
官方网址：https://color.uisdc.com/jp/

如果你喜欢传统的颜色，这个网站你一定会非常喜欢的。除了日本传统色彩，也提供了中国的传统色彩。
Gradient Hunt
官方网址：https://gradienthunt.com/

除了单色以外，渐变色也是比较常用的。Gradient Hunt提供了非常多的配色方案，如果你需要渐变色，想必这个网站会让你爱不释手。

夜间模式

在最新的Android Q中，谷歌官方已经提供了夜间模式功能。与此同时，Material Design中也加入了Dark Theme相关的主题。

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

夜间模式在《麻雀笔记》中的效果图：

除了常规的手动切换夜间模式，软件中我们也支持设置自动夜间模式的时间。夜间模式这一块，在后续的软件更新中我们会适配android Q的夜间模式（系统开启夜间模式，app也自动开启夜间模式），同时在细节部分也会不断地优化。