从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,是为了能够引领或者统一安卓的设计以及交互。

从0 到1开发一款App(三):设计_第1张图片

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你会直观的感受到这个特征。

从0 到1开发一款App(三):设计_第2张图片

对于MD的新设计风格,我个人非常喜欢。我自己也是喜欢简洁、极简的设计风格,所以在新版本中,在保证使用体验的前提上,能够把界面做得更简洁的是我一直的追求。

从0 到1开发一款App(三):设计_第3张图片

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

资源分享

图标:

  1. Google Material Icon
    官方网址:https://material.io/resources/icons/?style=baseline
    从0 到1开发一款App(三):设计_第4张图片
    如果你做的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
    从0 到1开发一款App(三):设计_第5张图片
    Iconfont是阿里巴巴的矢量图标库,数量非常多,风格也很多样。搜索任何的关键字几乎都会有与之相匹配的图标。除了常规的图标,它们来提供了图标库,图标库的作用是为了保证图标的统一性。
    从0 到1开发一款App(三):设计_第6张图片
    在自定义上Iconfont做得也非常的出错,寻找图标的时候可以选择单色还是多色。
    从0 到1开发一款App(三):设计_第7张图片
    在保存的时候,也提供了非常多的自定义选项,包括:颜色、大小以及图片格式等等。
    从0 到1开发一款App(三):设计_第8张图片

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

插画:

  1. unDraw
    官方网址:https://undraw.co/
    从0 到1开发一款App(三):设计_第9张图片
    提到插画,我第一个想到的就是unDraw,除了提供了非常多的精美的插画外,所有的插画都是开源的,也就是说你可以免费使用而不用担心版权问题。
    从0 到1开发一款App(三):设计_第10张图片
    如果你觉得配色跟你的App不相配,你也可以自定义主色。
    从0 到1开发一款App(三):设计_第11张图片
  2. Ouch
    官方网址:https://icons8.com/ouch/
    从0 到1开发一款App(三):设计_第12张图片
    这个网站是我最近才发现了,上图中你可以看到“Download all comps”,点击它你会得到一份插画大礼包。
    从0 到1开发一款App(三):设计_第13张图片
    每一个文件夹中都提供了诸多精美的插画,风格多样,而且很常用。
    从0 到1开发一款App(三):设计_第14张图片
    不要犹豫了,赶快去下载吧!

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

配色:

  1. Material Design Color
    官方网址:https://material.io/design/color/
    从0 到1开发一款App(三):设计_第15张图片
    这个是Material Design推荐的配色,还是那句话:“MD首选”。
    从0 到1开发一款App(三):设计_第16张图片
  2. 传统色卡
    官方网址:https://color.uisdc.com/jp/
    从0 到1开发一款App(三):设计_第17张图片
    如果你喜欢传统的颜色,这个网站你一定会非常喜欢的。除了日本传统色彩,也提供了中国的传统色彩。
    从0 到1开发一款App(三):设计_第18张图片
  3. Gradient Hunt
    官方网址:https://gradienthunt.com/
    从0 到1开发一款App(三):设计_第19张图片
    除了单色以外,渐变色也是比较常用的。Gradient Hunt提供了非常多的配色方案,如果你需要渐变色,想必这个网站会让你爱不释手。

夜间模式

从0 到1开发一款App(三):设计_第20张图片

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

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

从0 到1开发一款App(三):设计_第21张图片

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

从0 到1开发一款App(三):设计_第22张图片

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

你可能感兴趣的:(从0到1开发一款App)