网站设计教程

北京网站设计-企迪设计师专业美院毕业的设计师，对色彩搭配、网站结构布局，以及用户体验都有非常好的把控，对于设计行业来讲，网站设计也变成企业的标配设计之一，下面北京网站设计公司小编来分享下网站设计教程。

1.网站界面尺寸设置

网站的首要，首当其冲的就是尺寸。尺寸，顾名思义，就是说的页面的高度和宽度，而根据实际需要，又分为不同载体的尺寸需要适应。

普及一个小常识，尺寸我们用分辨率来表示，分辨率的单位是像素，也就是px，英文是pixel，在屏幕上展示的尺寸通常就用px表示。px值需要设置72px，多了和少了都不行，而印刷才需要设置300px分辨率，配合米和毫米等这样的计量单位。

接着说，根据载体不同，尺寸也大致分为电脑版，手机版两种。这两种尺寸是有区别的。比如，电脑版侧重大屏幕展示体验，手机版侧重窄小屏幕显示体验，因为在小屏幕手机去看大尺寸的页面，字体会小的令人看不见，所以需要设计两个尺寸，或者，如果想两个尺寸可以通用，就要有意识的把电脑版的字号放大很多，设计区域也要居中紧凑的排布。

通常，设计页面的宽度比较容易，因为电脑屏幕的宽度我们已知，而页面内容说不好，需要根据实际内容调整，所以先确定页面宽度。

页面的宽度，取决于当前全球用户所使用的电脑显示器屏幕的尺寸。

一般来说，如果采用无自适应程序去制作的页面，需要格外考虑用户屏幕的可视范围，特别是小屏幕的笔记本电脑的展示效果。

因为页面没有自适应能力，也就是没有根据屏幕的大小来缩放页面内容的话，就会看不全核心设计区域的内容。通常市面上笔记本电脑的宽度，最小在1200像素左右，所以，无自适应的页面，文字设计区域要控制在1000px~1200px以内，而旁边的延伸宽度，是为了大屏幕而准备的，如果没有左右延伸区域，大屏幕电脑看上去就很难看，页面就显得很小。

再说一下页面高度的设置。页面高度，由于是根据内容多少而定，但不建议超过3屏，因为页面如果太长，一是会导致客户没有耐心看完，二是会导致页面质量太重而加载速度慢，影响用户体验，所以高度在3000px以内为佳。

2、页面程序

设计页面再好，没有好的程序支持同样白搭。谈网站设计，不论是官网设计、网页设计还是电商页面设计，设计人员都需要懂技术原理，不然很难将设计很好的完美落地。就像机器人，只有一副好看的皮囊，是无法运作的，需要程序去支持，才能动起来。那么先说一下，网站用的哪些程序做的。

做页面，过去通常使用的是静态HTML格式语言编写，动态效果会用到JAVA，以及C+语言，不过那些都已经过时了，如果但凡想做动态页面，有的人会说使用FLASH制作网页，但是FLASH有许多硬伤，同样已经没人用FLASH做页面，而是专注用FLASH做动画视频了。那么现在通常做网页都用什么程序写呢？答案是HTML5。

这个HTML5简称H5，是大概3年前由微软发起，后来飞速发展了几年，到2014年才被广泛应用。H5的兴起，无疑对网站开发起到了推波助澜的作用，网页的设计大量的引用H5动态设计，那么H5有哪些好处呢？H5首先是解决了动态的问题，让页面活起来了。过去，要实现动态，简单的可以用JAVA实现，复杂的动态则需要用FLASH去搭配完成，再嵌入到页面之中。那样做的缺点很明显，一个是FLASH占的质量比较大，容易导致用户打开页面卡顿，从而关闭网页，二是因为FLASH是写死的，因此搜索引擎无法抓取FLASH中的关键词，进而导致网站很难被搜索引擎检索到，这是FLASH站点的核心痛点。

所以，很多客户会忍痛选择了全静态页面作为网站的官网，虽然那样会缺乏活力。所以，设计人员会考虑加入GIF动画和简单的导航JAVA点击动态效果，当然，那只是简单的动态，根本没有革命性的动态去发挥余地。

随着互联网化的新数码时代的到来，智能手机已经越来越普遍，每个人都用用N个移动设备，已经不仅拥有笨重的台式机，而更愿意将各种终端移动办公娱乐。比如手机、平板、PC和TV，需要无线互联，因而出现了云技术，连接了所有的移动终端设备，让人和设备永远分不开。说这些的用意，在于强调各终端作为载体的界面，对设计人员和程序人员的开发影响。

拿到一个网页设计需求后，首先看这个页面的实现形式，是单一JPG图片嵌入，还是复合HTML图文程序，这两种设计起来是两个思路。如果是JPG形式，那么侧重考虑的就是页面的单张图片质量问题，如果是HTML形式，就要侧重考虑动态实现和图文精准定位问题。

当一个JPG页面做好之后，接下来就是需要考虑切图问题，哪些图是一定要切出来的？按钮、注册表、动态区域的底图，是需要单独切出来的。如果是一个HTML页面，如果区域划分功能比较多，就都需要切图切出来，在PS中分为一个个模块，切成PNG图片之后，再用HTML工具写入语言，把切片嵌入网页，再调试，调试过程中，会出现各种诸如对齐这样的问题。HTML的制作时间和精力，都比纯JPG页面要大很多。如果要用到动态，比如动画效果，需要单独对动态对象写语言，让它动起来，然后不断调试，更复杂一些。因此，现在最常用的页面设计还是JPG图片的形式做的。那么，具体要用哪种程序做呢？我认为，持续用时间比较久的页面通常用HTML或H5设计，一次性的或者短期活动推广页面通常用JPG形式，因为相对来说更快。

3，页面逻辑

谈到页面页面逻辑，我想打个比方。比如你有很好看的外表，很好看的衣服，很好看的身材，但是，如果头和身体的比例搞错了，严重吗？其实，页面也是有“身材比例”的。页面的逻辑，通俗来讲，其实就是说的，页面上放啥，放多少，先放啥后放啥，让人先看啥后看啥，诸如这些问题。

一个好的页面逻辑，是贯穿文案、图片的主脉络，没有这条主线，就像大楼没有根基，不知道为什么要盖楼，会导致最后盖出来的楼歪歪扭扭，不知是什么东西，当然也不会好看，所以，页面逻辑何其重要不言而喻。

那么好，现在来讲一下如何来策划页面逻辑。你需要知道这个页面想要表达什么，想要传达给客户什么核心要素，分清楚一二三，级别不要太多，也不要试图表达太多，要知道，太多也没人看的完。思考过后，再将你的思路列到一个文档之中，再次梳理，删减掉那些客户不想看的，也不需要客户看的信息点，切记不要表达太多信息量，要精练总结，层次感要规划出来。

4，文案策划

当页面逻辑搞清楚之后，就可以进入到文案撰写的步骤了。通常，文案是有专人负责的，但有时候是由策划师或设计师来撰写的。关于文案，我的个人建议是，文案撰写，需要顺承页面表达的逻辑性，兼顾设计排版的美观性，最好有全局眼光，这样再往下执行的时候，才不会导致反复修改文案。一个好的文案，就像一个谋士，一个好的设计，就像一个将军，一个好的策略，就像一个元帅，在出兵打仗之前，这三种职能的团队成员，最好能碰一碰，一起进行讨论，提高工作效率。

在文案的撰写过程中，需要注意的是，言简意赅，主次分明，渲染主题，谨慎描述。

5，设计布局

当以上步骤做好，设计师就准备出马了。设计着陆页前，拿到文案和要求后，设计师要先将页面合理的布局。建议拿出一张白纸，画出页面的宽度和预期高度，再打开文案，对照文案，在纸上用笔勾勒一个布局图。就像排兵布阵，火枪手排在哪，弓弩手排在哪，骑手排在哪，文字排在哪，图片排在哪，首先要在大脑中有一个印象，做到胸有成竹心不乱。

在布局页面时，要注意页面的“骨骼”。也就是说，分几大块，大致可分为，头部、躯干和底部。在头部和底部的设计中，大致我们应该有“模板”，就是根据官网页面的头尾来设置，通常做法是做的一摸一样，但有时候需要精简内容，毕竟是着陆页，更突出的是活动主题。页面的“躯干”部分，是要再细分的，比如有三个活动，那么设计师就要分为三块来设计图文组合。

“躯干”的上部分，一般是采用一个大的主画面来表达，做过电商页面的都知道，这一块是画面的脸面，一定要做的炫酷，做出活动味道来。中部，也是主体部分，主要是将躯干的四肢合理的摆上去，有条不紊，切忌杂乱无主次关系。下部分，通常是对本活动的细节描述和介绍，这部分不建议过于抢镜，让这部分处在配角的位置比较合理。

关于头、躯干、尾巴的关系分出来，再分躯干中的上中下，都分出来后，将文字大标题单独摘出来，占位，再把活动描述与大标题做一个组合，然后再把要配的相应图片区域规划出来，基本上框架图就搭好了。搭好框架，再反复对照策略逻辑进行检测，如果有不符合用户视觉习惯的结构，随时修改。

要留意的是，页面最好不要超过三屏，避免结构太长和细节太繁琐。

6，设计色彩

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

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

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

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

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

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

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

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

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

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

7，设计字体

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

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

8，设计插图

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

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

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

9，设计按钮

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

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

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

10，出图质量

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

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

分享一句设计秘籍给大家，相信一定对大家的设计之路有用。好的设计意味着尽可能少的设计，简单胜于复杂，平静胜于喧闹，谦虚胜于张扬，小胜于大，轻胜于重，平淡胜于矫饰，和谐胜于分离，平衡胜于张扬，连贯胜于交换，极少胜于极多，中庸胜于过激，明白胜于多元素，系统胜于单个元素。