建站资讯

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

2015-10-07 13:43:51

浏览:

当前,互联网时代已经相对比较成熟,对于设计行业来讲,网站设计也变成企业的标配设计之一。官方网站设计好,是不是就到此为止了呢?不,我们要让这个网站被人搜索到,就像伞

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

 

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

 

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

 

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

 

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

 

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

 

6.第六,设计色彩

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

7.第七,设计字体

 

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

 

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

 

8.第八,设计插图

 

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

 

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

 

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

 

9.第九,设计按钮

 

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

 

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

 

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

 

10.第十,出图质量

 

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

 

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

 

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

 

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

 

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

作者: edit
手把手教你学网站设计-网页设计10大要诀
当前,互联网时代已经相对比较成熟,对于设计行业来讲,网站设计也变成企业的标配设计之一。官方网站设计好,是不是就到此为止了呢?不,我们要让这个网站被人搜索到,就像伞
长按图片保存/分享

深圳网站建设公司

启邦互动,深圳网站建设公司,致力于帮助深圳企业提供公司网站建设,手机网站建设,外贸网站建设,电商网站建设,学校网站建设

网站建设资讯

联系方式

深圳市龙华区大和路翠湖商务中心0210

Call us : + 137 2425 9054

Email us : service@sz-qibang.com

在线咨询

您好,请点击在线客服进行在线沟通!

联系方式
热线电话
400-12346578
上班时间
周一到周五
E-mail地址
123456@qq.com
扫一扫二维码
二维码
添加微信好友,详细了解产品
使用企业微信
“扫一扫”加入群聊
复制成功
添加微信好友,详细了解产品
我知道了