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

　　这篇文章想与大家分享的是：网页设计10大实战要诀，为了方便理解，今天以网页设计中可能会用到的一种叫“着陆页”的网页为例。

　　当前，互联网时代已经相对比较成熟，对于设计行业来讲，网站设计也变成企业的标配设计之一。官方网站设计好，是不是就到此为止了呢？不，我们要让这个网站被人搜索到，就像伞兵着陆一样，需要制作一个让搜索引擎看到的页面，这就是所谓的着陆页。那么设计着陆页有没有什么讲究的？和普通官网和电商主题页设计有什么不同呢？现在，本人就带各位朋友了解一下设计着陆页需要留意的10个核心要点。

　　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.第五，设计布局

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

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

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

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

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

　　后面5大实战要诀会在下期讲述，想要了解的小伙伴请继续关注！