手把手教你学网站设计-网页设计10大要诀（下）

时间：2023-09-21 00:06:01 | 来源：网站运营

时间：2023-09-21 00:06:01 来源：网站运营

手把手教你学网站设计-网页设计10大要诀（下）：上期小编为大家分享了《手把手教你学网站设计-网页设计10大要诀（上）》，今天小编接着为大家分享下篇。

6.第六，设计色彩

对于页面来讲，色彩也是至关重要的一环。每个页面都应该有独特的气质，而表达气质的是风格，风格也就是调性，做设计先定调性，这是第一步，也是最关键的一步。色彩可以给人的视觉以第一感官，视觉传达的精髓也在于“首轮效应”，就是视觉冲击力，也叫视觉表现力，这种表现力的强弱，直接决定了文案的表现力。如果学策略看《定位》，学设计看《视觉锤》，那么，正如《视觉锤》中所说，语言是钉子，视觉就是锤子，好的钉子要想打到用户心中，就要用视觉的锤子，通过客户的眼睛，敲进客户的心里，让文案深深的锁定客户的心智。虽然听起来蛮狠的，但是在应用的时候，却没那么容易。

我们都有网购的经验，当看到京东、苏宁、天猫等电商的促销页面时，第一感觉是不是影响你是否往下看？色彩，是不是吸引你的一个很大的原因呢？答案时肯定的。当人看到一个页面时，首先眼睛会受到刺激，刺激眼睛的就是色彩。那么，色彩该如何使用，在网页设计中，应该如何选择色彩呢？

色彩，本没有好坏，只有适不适合，搭配是否符合美的法则，符合美的法则。在这我们先回顾一下过去大学学过的基础知识，形式美法则。形式美法则是人类在创造美的形式、美的过程中对美的形式规律的经验总结和抽象概括。主要包括，对称均衡、单纯齐一、调和对比、比例、节奏韵律和多样统一。我们学过三大构成，平面构成、色彩构成和立体构成，其中，平面构成和色彩构成，可以运用在我们的页面设计之中。

如何选择合适的色彩呢？首先，看所设计的行业属性，其次，看所表达情绪的调性，最后，合理的搭配，谨慎地使用你的色彩。虽然设计师需要大胆的想象，但也要“带着脚铐跳舞”，也就是说，设计需要符合设计的“科学法则”，需要符合“形式美法则”。看似杂乱无章的设计，如果你觉得好看，虽然你说不出来，但请注意，你所看的这个页面，符合“形式美法则”。

好，我们接着说如何配色的问题。选定了行业，选定了调性，接下来，选定一套配色。这套配色不建议太花哨，而是需要以一个主色为基础，搭配其他辅助配色为点缀，并制定出本页面的“设计法则”。比如，底色用什么颜色，页面分为什么结构，是一种底色还是切分为多块底色，是否需要在文字下方再衬一块底色，这块底色是否需要有一个特殊的形状。

再说一下主画面的配色问题，主画面的配色，需要综合考虑字体和图片的搭配，特别要留意的是，主题打字一定要醒目，要与背景色有明线的区分，简单说，就是要“跳出来”。为什么要“跳出来”，是因为这块内容是用户打开网页的第一屏，直接影响到用户是否看下去的行动，同时，第一屏的主题也直接反应出本页面所表达的活动主题思想，所以建议，主题字区域要好好的精心设计，主要考虑的是，主题字与主题图的关系问题。

在用色方面，不同行业也有一套不同的标准，比如，电商促销用什么颜色最好，红色、黄色，为什么，因为红色黄色给人冲动感，激情感，让人产生容易冲动消费的心情。再比如，金融类网站用什么颜色最好，蓝色、橙色，因为蓝色给人信赖感，橙色给人亲和感，当然，需要搭配整体主题去设计。

刚才说的是色相（就是什么颜色），其实色彩还有另外两个指标，明度（俗话说明亮度）和纯度（也叫饱和度）。在明度上，越明亮的色彩，给人越高涨的心情，在纯度上，约纯的色彩，给人越刺激的心情。在色相上，分为冷色和暖色，冷色就是蓝色、绿色、紫色类，暖色就是红色、橙色、黄色类，冷色给人专业、高冷的感受，暖色给人冲动、亲和的感受。表示色彩可以通过一个色环来看，色环上表现了所有的色相。

邻近色，就是在色带上相邻近的颜色，例如绿色和蓝色，红色和黄色就互为邻近色。三原色中，任何一种颜色即是其他两种原色等量混合的补色。在色相环中，处于直径位置的两色互为补色。在色相环中每一个颜色对面(180度对角)的颜色，称为“对比色(互补色)”。把对比色放在一起，会给人强烈的排斥感，若混合在一起，会调出浑浊的颜色，如，红与绿，蓝与橙，黄与紫互为对比色。在色轮上，90度角内相邻接的色统称为类似色，所以在使用色彩的时候，需要考虑到这些基础知识的运用。

这些色彩知识，是作为一个设计师必须烂熟于心的原理，看似轻松的设计用色，都是要靠美学原理支撑，设计就靠这些原理来指导，用色和排版，都需要有理由，不要说凭感觉这种话。

7.第七，设计字体

现在有很多字体设计师设计的非常棒，但也有很多不得要领的初学者。其实，字体设计，也是一门大学课程，科班出身的设计人员应该有印象。在字体设计中，需要注意的问题，是字体的“性格”。对，不光色彩有“性格”，字体也是有“性格”的。字体分为几种类型，分别是衬线体、无衬线体、书法体、装饰体。虽然文字有欧洲文字、亚洲文字，以及阿拉伯文字三种语系，但同样根据字体的造型原理，将字体区分。为了好理解，我打个比方，衬线体是宋体（也就是带钩的），无衬线体就是黑体（不带钩的），书法体就是毛笔钢笔写出的字体，装饰字体（也叫广告体，是经过设计过的再造字体）。

在网页设计中，特别是主题着陆页的设计中，我们用的是装饰字体居多，因为这种字体最具表现力，而且字不要太细。同时，选择字体后，要对字体进行再造型，如切割、合并、变形、扭曲、倾斜等等，以达到我们想表现的主题气质，或刚猛、或亲和，随页面策划和文案来定。

8.第八，设计插图

在当前互联网时代，卡通造型已经越来越受到企业主的欢迎。一方面，卡通造型没有相片那种放大就模糊的缺点，二方面，不存在使用了他人拍摄的图片而造成侵权的风险，三方面，想找一张合适的位图真的很难。所以，最好的办法就是，自己绘制一幅场景和一系列品牌的卡通吉祥物，或者下载一些现成的矢量场景素材，让你事半功倍。

要注意的是，选择的插图，一定不要有违和感，一定要保持与页面风格的统一性，画风要一致，配色要和谐，位置要恰当。

还有一种着陆页，不是主题活动页，而是静态展示页，相对来说比较理性的那种，这种页面右侧或左侧或上部或下方，可能会放一些广告位。而广告位的设计，色彩同样是很关键的，要注意广告与广告之间的色彩差异，还要注意色彩的明度、纯度，要统一，不要有违和感。在广告的设计中，设计手法也要保持一致，广告中的字体和版式也要保持风格的统一。

9.第九，设计按钮

按钮，其实是画龙点睛之笔。为什么这么说呢，一个画面，当用户看完，设想，如果没有按钮，用户就不会找到品牌的主页，从而没有销售转化的效果，那这个着陆页就失去了作用，没有了意义，所以，在页面之中，一定要有按钮的存在。

按钮应该使用什么色彩、什么形式、什么字呢？是这样的，按钮通常是一张PNG图片，嵌入到页面中的，你可以设置它有特效，也可以没有，字体方面，要用好认的字体，最好能粗大一点，目的是好认，好点，目标明显。色彩方面，分行业，分目的来说。如果是电商，首选红色、黄色，如果是金融投资类，首选橙色。为什么这么说呢？红色给人冲动消费的感受，是最刺激的颜色，橙色给人亲和的感受，但橙色比红色更容易让人不反感，更友好。

按钮的位置也要注意，要么再页面最底部的最中央，要么就在页面中部。至于到底在哪，要看页面上放什么内容。如果最底部是活动细则，你可以把按钮放在细则顶部，原因就是，按钮是用户决定的一个触发点，当用户看的时间越久，可能就越不会点，也有可能根本找不到按钮，所以，设计者需要在适当的火候，放置按钮，让客户点击。

10.第十，出图质量

最后一步就是完稿出图。那么出图同样也是很重要的，设计者需要保证图片的清晰度的同时，还要兼顾图片的质量，也就是多少KB。我们都知道，页面的质量越大，打开速度就越慢，所以，按照常识来讲，页面的大小要控制在500K以内，并且设置在72dpi，RGB模式，这一点非常重要。要做到这一点，跟页面逻辑、页面长度、页面配色、页面元素数量有关。在电脑端如此，在手机端和微站短同样如此，不要忽略PC以外其他尺寸设备的浏览体验。

整体来讲，设计网页就像打一场战役，需要策略、战术的完美配合，需要文案、设计的完美演绎，需要对品牌、对主题的深刻理解。希望以上10点对各位同行，特别是刚入行的同道中人有帮助，哪怕是一点点。另外，因为本人水平有限，才疏学浅，很少写设计技巧，经验不足，如果有表述不当之处或纰漏，还望大家多批评指正，不吝赐教，给我留言，一起交流经验，一起进步吧。

分享一句设计秘籍给大家，相信一定对大家的设计之路有用。

现代主义运动先驱，德国工业设计家，迪特.拉姆斯说过，好的设计意味着尽可能少的设计，简单胜于复杂，平静胜于喧闹，谦虚胜于张扬，小胜于大，轻胜于重，平淡胜于矫饰，和谐胜于分离，平衡胜于张扬，连贯胜于交换，极少胜于极多，中庸胜于过激，明白胜于多元素，系统胜于单个元素。

最后，以巴菲特的一句话作为对大家的忠告，记住一个原则：简单胜复杂。