介绍
Web Design = 图形设计 + Web设计
需要软件
图片编辑软件
- Adobe Photoshop
- Pixlr: http://pixlr.com
- Gimp: http://www.gimp.org
向量编辑软件
- Adobe Illustrator
- Apache OpenOffice Draw: https://www.openoffice.org/product/draw.html
- Inkscape: http://inkscape.org
屏幕设计软件
- Adobe XD
- Figma(有免费版，推荐): http://figma.com
- InVision: http://invisionapp.com
- Sketch: http://sketch.com
网页设计的心理学因素
网页设计其实设计的不是网页，而是用户的心理。这样才能达到网站的目的：让用户下单，了解自己公司等。
镜像效应
网页的用户非常容易受到网站内容，尤其是图片的影响，如果看到的是欢乐的镜头，用户也会心情好。
从众心理/社交验证
很多网站都会把其社交媒体上用户的反馈展示在页面中，这样更容易获得新用户的信任。
或者，展示一些合作伙伴的名字，LOGO等。
颜色对心理的暗示
比如：绿色容易让人放松。
推荐这个网站：https://www.empower-yourself-with-color-psychology.com/
字体
关于字体
- 必须可读(legibility)：字体自身，大小，颜色等
- 符合美学标准（Aesthetics）
几种字体：
- Serif: 包含装饰的字体。
- Sans-serif: 不含装饰的字体。可读性更好，但美观程度略差
- Script：类似人类手写的字体
字体选择
在设计时需要注意一种层级结构，需要用户首先关注的可以考虑使用加粗字体显示。所谓加粗，其实往往也是一种颜色的改变，比如，由灰色变为黑色。
需要注意调节字符间距。每行文字最好不要超过12个单词，否则可能导致用户不想阅读。
行间距同样很重要，比如：当行间距过大时，用户的注意力可能会集中到行间距上，而不是文本上。
最经典的几种字体
有些设计师在选择字体时非常挑剔，下面是最常见的几种字体：
- Garamond, 1532
- Bodoni, 1788
- Century Expanded, 1900
- Futura, 1930
- Times Roman, 1931
- Helvetica, 1957
通常可以在Google Web Font中找到替代的字体。
推荐免费中文字库：https://chinesefontdesign.com/oppo-sans-chinese-font-free-commercial-font-download.html
关于字体大小
推荐使用这个网站：https://type-scale.com/
在这个网站上可以选择字体，大小等，预览对应的H1-H4样式。对于一般页面，H1-H4应该足够了。
关于字体设计
每更换一种字体时，用户的脑中需要重新适应，因此，在同一个页面中，不要使用太多不同的字体，一般一到两种就足够了。比如，一种字体用作标题，另一种字体用作正文。
行间距非常重要，否则将会影响页面的可读性。同时，过于小的行间距可能会让用户感到紧张。
如果想要强调一个单词，可以使用加粗，更换颜色等方式，但不应使用多种方式进行强调。
在使用文字时，要遵循现有的一些约定，比如带下划线的文字，不同颜色的文字往往代表的是一个链接。
图片
决定什么样风格的图片
- 相片
- 电脑设计的图片：更能表达复杂的流程/背后的抽象故事等。
- 手绘图片
选择和正确使用图片
可以让专业的设计师来设计独有的图片，这样更能保持网站的唯一性。
同时还可以使用一些图片网站，比如：
在选择图片的时候需要考虑：
- 图片质量
- 图片的布局是否能够和文字配合，比如，图片偏左，右边有空间可以放置文字。
- 图片的背景色是否和文字有明显的对比，以确保文字的清晰度。
图片压缩：https://tinypng.com/
页面布局
布局的基本原则
- 让用户能够快速找到需要的信息
- 吸引眼球
在设计任何页面的时候，肯定有大，中，小的不同页面元素。同时需要考虑不同元素间的对比，以突出主要元素。
网格系统
在使用Grid的时候，由于现在屏幕尺寸非常大，因此需要在两边留白，否则用户需要从左到右扫描才能获取到信息。
另外，网格的单元格之间的空白也很重要。
关于颜色
理解颜色的内在涵义
比如：
- 绿色：代表自然
- 蓝色：天空的颜色，代表自然，乐观
- 红色：热情，爱
- 黑色：在西方文明中代表死亡
- 白色：在东方文明中和死亡关联
更多讨论请参考：https://www.empower-yourself-with-color-psychology.com/meaning-of-colors.html
可以选择这个工具创建调色盘（创建一组较为协调的颜色）并预览：https://color.adobe.com/create/color-wheel
这个工具还能根据上传图片来自动生成配色：https://color.adobe.com/create/image
在使用颜色的时候，需要注意60-30-10规则：
- 60%元素将使用主要颜色
- 30%元素将使用次要颜色
- 10%元素将使用第三种颜色
界面层级结构Hierarchy
由于人类大脑的认知特性，我们必须要注意页面的层级结构并通过层级结构传递给用户相关信息：什么最重要，什么是次要的，什么是最次要的。
实现层级结构的几种方式
- 通过元素大小
- 通过颜色来突出重点
- 位置：比如在很多网站的price plan中，推荐选项的位置会与众不同
wireframe的作用
设计页面的布局。推荐工具：https://www.figma.com/
Figma
Figma是和Sketch的有力竞争对手，主打网页端设计。当然，也有对应的Apple/Windows客户端软件。另外，如果想要在网页端使用系统字体的话，需要安装对应的插件。
在设计师完成设计后，可以分享一个Figma的链接，开发者就可以根据设计开始实现代码了。
推荐使用Figma to Code这个插件，一键生成CSS/Tailwind代码。
Figma中提供了基本的交互演示，可以分享交互对应的链接让别人能够看到你的设计。
在Figma中创建自己的设计系统
比如，可以定义一个卡片，其中包含图片，标题，及文字。这样在通过复制粘贴重用这个组件时，就会继承所有组件的属性。更改父组件样式，会影响子组件。当然，如果更改子组件样式，不会影响父组件。
关于UX/UI
在设计页面的时候，肯定要想好一些基本的UX问题，否则用户可能不会在页面停留（平均而言bounce rate，站点的bounce rate非常高，毕竟大家的时间都很宝贵）
- 站点的目的，我为什么要看这个页面
- 导航清晰，用户随时知道自己在看什么
- 主次一目了然，每个页面都要重点突出
针对不同类型网站的设计考虑因素
电子商务网站
- 如何突出产品，展示不同的产品线
- 提交订单页面的体验一定要好，同时需要考虑多步提交，在第一步时确保用户输入邮件，这样在用户没有提交订单时可以追踪用户。
商业网站
- 一定要描述清楚这家公司是做什么的，为什么要选择它
- 关于这家公司的Story
- 其他客户对这家公司的反馈，这样就容易建立起新用户对公司的信任
- 如果客户想要联系的话，提供非常方便的联系方式，比如：邮件列表，联系电话，公司地址等
博客/媒体网站
- 内容展示页面的设计尤为重要
- 图片的使用
- 类别的使用
教育类网站
- 内容必须吸引用户
- 明确的学习目标，学习路线
个人网站
- 通过可视化来展示自己/经历/故事
- 个性
- 方便的联系方式
