【九层之台】Web开发教程：8. 设计

8. 设计

写这一章我很惭愧，我自以为自己完全没有设计思维。唯一的一点点设计想法主要都体现在我的“UI设计史有感”那篇文章上了。

网页应用当然离不开设计。在这个UI就是流量的时代，好看的应用、方便的功能，都可以给用户带来愉悦，给你带来收益。但是作为大多数前端工程师，往往很难找到靠谱的美工设计（国家欠我一个美工小姐姐！），所以在自己搞事情的时候还是需要学习一下基础的设计方法。何况，还有组件库呢！

这篇教程主要还是谈一谈如何抄袭（咳咳）借鉴优秀的网页设计。

基本原理

设计基本上包括了以下几个部分，但是有些内容在网页应用上很难实现，有些内容需要格外注意：

• 字体：网页应用无法实现，因为无法保证访问者本地有需要的字体。可以网络加载字体，但是加载量比较大，建议只区分衬线字体和非衬线字体。浏览器会调用本地的字体库。
• 配色：就是配色
• 图标：多用扁平化图标，学习大型应用（例如微软家的Office应用系列）
• 布局：网页应用往往需要响应式布局（兼容不同的设备），因此布局设计往往需要巧妙而富有灵性。例如使用折叠菜单等等。
• 动画：自然流畅不做作，学习谷歌的动画，以突出应用的业务重点为目标

同时，还有几个理念是现代网页交互式设计的基础：

• 扁平化：在当下这个时代，扁平化依然是大多数网页应用的基础设计理念。所有的应用内容都好像是平铺在一张纸上一样，没有过多华丽的修饰以突出应用的业务核心。
• 响应：用户在操作的时候，需要得到迅速的响应。例如用户点击按钮的时候，按钮应当体现出被点击的动态效果，强化用户对自身行为的确认。
• 简洁：应用不是游戏，不需要华丽的特效和背景，突出业务核心，让用户的效率更高是我们的主要目的。
• 统一：整个网页应用应当只采用一种设计风格，避免多种不同的风格杂交。

重视细节：例如CSS中transition属性定义的过渡时间和过渡时间函数，在一个复杂、高级的应用中都需要仔细选择和思考。动画时间不宜太长，也不能短到用户察觉不到。亦或是页面组件之间的边距等等，作为一个好的前端工程师，掌握细节才能掌握用户。

大公司的设计

话不多说，设计这东西，直接去看大公司的设计就好了，各大公司的官网、APP等待都是学习的目标。什么叫大公司？微软、谷歌、苹果，这些公司的网页布局和交互背后，都是世界顶级设计师的设计成果。

什么？你说它们不好看？那是你自己的审美问题。。。

所以，学习就可以了，不需要质疑什么。

接下来给大家简单介绍几个大公司的设计理念，这里并没有具体的实现方法。

ModernUI

这是微软的设计，广泛应用在Windows操作系统上，典型的特征就是纯色色块。所以，ModernUI设计的灵魂就是配色，配色优秀超神，配色差劲还不如白底黑字。比较适合深色系的搭配。

插一句：ModernUI设计很适合做PPT，知乎上有一篇文章教你做出微软风格的PPT，写的很好。

可以去百度一下ModernUI的配色表，也许会比较有用。

AntDesign

阿里巴巴的设计理念，官网在：https://ant.design/ （域名好评）

相比于ModernUI的设计理念，笔者私底下觉得阿里巴巴的蚂蚁设计似乎给人的感觉更温暖温和一点…（也许是错觉）

苹果的设计风格和这个有些相似，都不那么“扁平”，会利用渐变色、半透明、模糊等等实现一些温和的效果。

官网上“色彩”部分有详细的配色表，很好用。此外，蚂蚁设计还对图标等内容有一定的优化和创新。

Material Design

重头戏登场！隆重介绍Google家的Material Design设计理念！作为长盛不衰数十年的顶级巨头（好好夸一夸），Google在各大IT领域依然独占鳌头。你大爷还是你大爷！

Material Design的官方网站在国内好像上不了，但是简单来说有以下几个方面：

• 配色：自己的配色体系，通过色彩引导用户的注意力。多是浅色系的配色。
• 卡片式：最重要的布局理念，所有的组件、模块的四周通过微小的圆角矩形和阴影，渲染出卡片的样式。整个应用就好像若干个卡片层叠起来、铺在一张纸上一样。
• 水波纹：所有的按钮在点击以后都会从触点开始产生水波纹效果，立即给用户显示行为反馈。
• 动画：通过贴近自然的动画模式，引导用户注意重点内容。

组件库

说了半天，除了自己写CSS以外，有没有快速有效的方法实现好看的设计呢？那当然是用已经成型的组件库啦！以前就答应大家推荐几个组件库来着。

组件库的使用方法主要看官网教程了，官网上都有大量的例子，可以查看这些例子的代码，再加上一定的摸索。组件库这么多，说也说不完啊！

Element 系列

首先说说ElementUI吧。官网在https://element.eleme.io/

划重点！ElementUI是一个国内很常用也很好看的组件库，最重要的是，它原生支持了VueCli。

通过安装依赖element-ui并在main.js中引用，就可以在每个组件的模板HTML代码部分使用官网上面的各种漂亮组件。其中，table表格组件尤其有用。

需要注意的是，scoped状态下的CSS对组件库中的组件不生效。

既然是系列，那么就不止ElementUI一个。另一个基于Vuejs的与ElementUI很类似的组件库叫iViewUI，官网在https://iviewui.com/

Material 系列

最近才发现的一个Material Design系列的亲生作品：Vuetify。官网在https://vuetifyjs.com/

这是一个VueCli的插件，也就是通过VueCli控制台的插件进行安装，而不是使用npm安装依赖。相当于是针对VueCli专门设计的，支持的性能也许会更好。

Vuetify的功能极其强大，基本上用得到的Material Design的设计（按钮、输入框等表单）都有，并且也很强大，简单易用。不仅如此，还有很多与布局相关的容器、顶部和侧面菜单等等，自己探索吧！

其它的Material Design的资源有：

• Material Design官网：它只提供了CSS和一部分JS，并没有根据Vuejs框架进行单独设计，所以比较难用。
• MuseUI：很老的一套基于Vuejs框架的组件库，也很好看好用，就是有点臃肿。
• Vue Material：我没用过，看起来也挺好用的
• mdui：这个乱入，跟Vuejs框架没关系，但是官网上面有关于Material Design的介绍

其它组件库

• Bootstrap：非常老牌的组件库，甚至不需要VueCli，可以直接通过CDN引入组件库的CSS和JS，通常搭配Jquery使用，可以方便地制作一些小型网页应用。
• SweetAlert：强烈推荐的弹框组件。这不是组件库，这只是一个弹框组件！适合配合Element系列组件库使用，非常好看！
• ant-design-vue：AntDesign对Vuejs框架的版本，也还比较好用。

其他资源

• pixabay（国内好像不能注册）：上面有海量的高清图片（不太适合网页使用，加载量太大了）
• undraw：海量的矢量图。SVG矢量图在网页上可以大幅度减少网页的加载量，提高网页应用的访问速度
• WeaveSilk：一个AI辅助画图工具，暗色系的设计可能可以用到。也挺好玩的
• Adobe 调色板：自己配色（强烈不推荐）的时候可能会用到
• FontSpider：压缩中文字体包用的

从明天起
细心观察每一个应用
观察他们的细节
优雅的设计带来的愉悦
你要学会把它们重现