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

行业资讯 admin 发布时间:2023-11-22 浏览:138 次

  这篇文章想与大家分享的是:网页设计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大实战要诀会在下期讲述,想要了解的小伙伴请继续关注!

在线咨询

点击这里给我发消息售前咨询专员

点击这里给我发消息售后服务专员

在线咨询

免费通话

24h咨询:400-888-8888


如您有问题,可以咨询我们的24H咨询电话!

免费通话

微信扫一扫

微信联系
返回顶部