【网页设计教学】10个要诀 - 迅速提升你的设计触觉
一个网页，设计是非常重要的！
即使你的Programming能力很强，但若缺乏设计触感，制造出来像中小学生作品一样，便显得不够专业了，用家也不会信任你。
这篇「网页设计教学」，我将与大家分享10个设计要诀，希望你看完后，即使没有读过design，也能迅速提升自己的设计触觉！
- 字体
- 文字粗幼，行距，字距
- 对齐
- 空间
- 颜色
- 相片
- 对比
- 动态元素
- 训练设计触觉
- 跟足Template
准备好了没有? 我们开始吧!
设计要诀1 - 字体
很多新手在设计网页时，往往忽略了字体的重要。
他们只选用一款内置字体 - san serif，来建立整个网页。
其实字体能影响用家对网页的印象，让人知道你的网页是否专业。我们来看看Spotify网页：(https://www.spotify.com )它看起来是不是很不错？
当我一把字体换成另外一款，整个网页给人的感觉顿时便差了很多呢！因此，字体对设计网页而言是非常重要的。
设计网页时，我们通常会用两种字体：一款是给标题，一款是给内文。
标题
字体通常粗、扁，字与字之间也要保持距离。常见的英文标题字体有：
1.League Gothic（https://www.fontsquirrel.com/fonts/league-gothic）
2.Roboto（https://fonts.google.com/specimen/Roboto）
3.Roboto Condensed（https://fonts.google.com/specimen/Roboto+Condensed）
4. Oswald（https://fonts.google.com/specimen/Oswald）
5.Raleway（https://fonts.google.com/specimen/Raleway)
内文
字体以易读，易看为首要原则。常见的英文内文字体是Open Sans。（https://fonts.google.com/specimen/Open+Sans)
对比
「对比」是平面设计中的一个非常重要的概念。利用对比，我们可以把用家的视角，集中到某个我们想他们看到的位置。
在这里，内文字体简单易读，标题字体则较粗较扁，放在一起便可形成对比。透过利用字体的对比，我们可让读者把注意力放到标题上，再让他们细看内文。
中文字体
如果是中文字的话应该怎么选择字体？由于中文字库太大，我们不可像英文般，随心所欲地上载自己需要的字体到网页上。
因此，你可使用Google Font上有限的中文字体，如：Noto Sans TC。（https://fonts.google.com/specimen/Noto+Sans+TCs/)
利用粗幼的配合 ，标题粗一点，内文幼一点，也可以做到不错的对比效果。
设计要诀2 - 文字粗幼，行距，字距
除了字体外，文字粗幼、行距、字距，也十分重要！
标题
在写标题时，你会否发现自己总是差了些东西？很多时，正正就是少了粗幼及字距，感觉就差很远了。
标题字体通常粗一点(font-weight)，字与字之间的距离(letter-spacing)也要阔一点，感觉则很不同了！
由此可见，以上的每一个元素，都有其用处。放在一起后，你就可以一步一步说服用家购买你的产品。
行距
为了做到一目了然的效果，内文的行距便很重要了。
有行距：
没有行距
看！一旦没有合适行距，感觉又差很远了。
如果你不知道什么的行距才合适，你可以参考 medium.com上内文行距。
在以上的段落中，行与行的距离是line-height:1.58，约是1个字的高度。段与段的距离则约是2-3字的高度。
这个行距，能够让人阅读得很舒适呢！
设计要诀3 - 对齐
接下来，「对齐」也是一个非常重要的概念，让你的文章看来连贯、一置。试试幻想，网页上有两条隐形的直线。你的内容通常会整齐地放在线内。<?p?>
线内的内文通常可以置左，置中，置右，或justify，但一定要注意全文保持一置性！
设计要诀4 - 空间
新手很容易忽略空间的重要性，因此你要注意每一个section与每一个section保持空间。绝不要害怕过多的空间，放胆地加多点空间吧！这样读者看起来更舒适！
专注阅读
空间感可以让人更专注于内文，不会因为过长而不愿阅读（too long didn’t read)。
我们来看看这两个例子吧！
有空间：
少点空间：
你看，少了一点空间，感觉是不是有点不一样？
网页优美
空间感除了让人专注阅读外，也可以令网页变得更elegant。
看看Andstudio的网站：（https://andstudio.com）
你看多优美！
当我没有足够的内容，希望用家专注单一的内文，例如是：新闻的详细页面，我便把网页左右的空间拉大。这样，整个网页会看起来更优美，读者看也会更专注呢！
设计要诀5 - 颜色
我们也可注意颜色的运用。不同的颜色，带给人不一样的感觉。
主色
通常，网站有一个主色。这个主色通常是Logo的主要颜色。
比方说，Airbnb的这个网站，它的Logo主色是粉红色。因此，网站的主色便是粉红色。
Airbnb 主页：（http://airbnb.com）
你看！它的主要按键、一些小元素等，都以主色（粉红色）为中心。
辅助色
除了主色外，我们还使用辅助色，让网站看起来更丰富。辅助色以1-3种便足够，过多的辅助色反让网站感觉混乱。我们继续看看Airbnb的例子吧！
在上述的例子，airbnb这个网站，绿色、黑色及白色便是辅助色。然而，你应该如何选择辅助色呢？
第一个方法，我们可借助color wheel这个网站。当你选择了base color后，便可点击左方的triad, complementary, Analogous等，便可寻找辅助色。
另外一个方法，当然是看看好的设计师使用怎样的颜色配搭，然后再作参考！你可以在google搜寻color palette best ，也可以找到不同网站的颜色配搭。
你便会看到50个漂亮网站的颜色配搭，非常有参考价值！
设计要诀6 - 相片
有些看起来漂亮的网页，多以相片组成。照片在网页上，扮演著一个非常重要的角色。无论你的网页设计有多好，使用不漂亮的照片，网页也不可能漂亮。让我们看看Airbnb网页：
你觉得这个网页挺漂亮呀！对吗？
这个网站的设计，其实非常简单。让你觉得漂亮的，其实是网页上的照片！因为网站的照片都很漂亮，所以你觉得整个网站，也很不错！
那么应该在哪里获得漂亮的照片呢？
你可以找个专业的摄影师为你拍摄！不然的话，你可使用stock photo（图库）。要付费的图库，我使用 shutterstock 。它基本是最齐全的了。
免费图库的话，我推介pexels 它的图片既专业，又没有版权，可以免费使用！
其他免费图库网站: 背景图/免费图库大全 - 38个高质+免费的图库网站
插画的话，我会通常会使用一些「flat design pack」，例如：envato elements
最后，如果你的图是用作背景图，并且在上面要放文字的话，我们通常会在图片上加上黑色，或白色filter，让照片上的文字更显眼。
原图：
有filter：
制成品：
设计要诀7 - 对比
在「字体」部分，我已说明对比是设计中，一个非常重要的概念。利用对比，我们可以把用家的视角，更容易集中到某个我们想他们看到的位置。
比方说，粗，大标题与幼，较细内文的对比，让读者更容易注意标题。
除了粗幼、大小的对比，颜色也是带出对比的一个重要元素。
设计师想这个「Start」的按键更加让人注目，因此使用了蓝色底色。
设计要诀8 - 动态元素
一个出色的网页，通常有一些动态元素，让整个网站看起来更生动。
基本的动态元素可以分为3种：
- Page Load 动画
- Page Scroll 动画
- Mouse 互动
1. Page Load 动画
Page Load 动画就是在你输入网址后，由空白一片，到完全显示你网站的过程。你可参考asiaone.com
我非常不喜欢Page Load 动画只有Loading Bar的网页，因为如果Load的时间太久，用家便会不耐烦地离开网站。
如果只有Loading Bar的话，我建议你不要使用Page Load 动画。写得好的网页，是不会出现这种情况，我们会先显示容易Load的元素，让用家没有等待的感觉。
2. Page Scroll 动画
Page Scroll 动画就是当你Scroll你的网页时，网页的元素以不同的形式所呈现。
我喜欢比较简洁，慢一点的Page Scroll 动画，例如Fade In, Fade in + Slide Up 等等。
3.Mouse 互动
Mouse 互动就是跟据你滑鼠（Mouse) 的动作，作出相应的动画。最常见到的，就是Mouseover，按键变色。
这个变色也有穚妙。好的编程师通常会在变色时加上一个transistion，例如：transition: all 0.3s ease，让变色时有渐变效果。
设计要诀9 - 训练设计触觉
大家学习了以上8个要诀后，有没有觉得自己的设计触觉好了一点？
想训练个人设计触觉，就是要多看一些好的设计，仔细研究它们每一个细节，Pay attention to every details！以下的网页，收集了一些设计漂亮的网页，大家可以多看看呀！
1. behance.net
这个一定要看，就像设计师的Facebook，十分常用。
除了网页设计外，它还有很多其他不同的设计，例如Logo，平面设计等等。
它是网页设计界的权威，有很多漂亮的作品。
它收集了很多Landing Page的设计，也做得很不错！
相信大家只要多看漂亮的作品，想想设计师为何要这样做的话，你的设计触感也会有进步的！
设计要诀10 - 跟足Template
最后，你发现你的设计触觉，真的很差的话，做网站时尽量使用Template。
找一个Template，有你需要的设计元素，然后只是更改里面的内容，图片等等。设计、文字大小、文字数量，甚至颜色也不要更改！以我的经验，若你设计触觉不好，用Template时改得愈多，便愈不漂亮。
Template:
自己网页：
如果你的照片是漂亮的，文字数量是一致，出来的效果是会和Template一样！
结语
大家学习了以上10个要诀后，有没有觉得自己的设计触觉好了一点？
你也可以参考这篇教学的影片版:
希望你在阅读这篇教学后，你的设计触感能有所提高！