学果网合作机构 > 学校机构 > 西安天琥教育欢迎您!

咨询热线 13761176062

西安网页设计培训:网页设计排版需要注意的几个事项

发布时间:2019-01-11 14:53:37

设计网页要注意什么
1
设计网页要注意什么
我们在设计网站首页时尽可能的简化,并加速打开网站的速度,所以我们必须省出那些花哨的页面。下面介绍设计网页要注意什么,希望这些内容可以帮助到您。
设计网页要注意什么
1、网页打开时间不能超过4秒
页面访问只有4秒,如果一个网站打开的时间超过了浏览者等待的时间,那么浏览者将会失去兴趣,最终的结果是浏览者去别的网站,这就意味着:我们在设计首页时尽可能的简化,并加速打开网站的速度。所以我们必须省出那些花哨的页面,当然如果有那些漂亮页面那更好啊。那前提必须是要在4秒内打开你的网页。
2、首页重在引导浏览者的目光
首页重在引导浏览者的目光,不要让网站用户进了你的网站就像迷了路一样,找不到了方向。打个比方,你走进一个房间的时候,你不可能看到房间里所有的东西。你第一眼注意的是房间里有没有人,然后再去注意能吸引你眼球的东西。当浏览者第一次访问网站也是这样子的。当浏览者第一次访问你的网站时,需要你来引导他们来访问网站。
3、网站的黄金宝地是左上侧
众所周知,网站的左上侧是浏览者最先注意的地方。这是因为人们阅读的习惯造成的(从左上角开始阅读)。再加上早期的网站也是按这个方式设计的。所以我们常常把LOGO放在左上角。当然你还可以在这里加入更重要的东西。
4、字母F型的阅读模式
跟据一些眼球追踪的数据表明,阅读者在看一个网页的路径,像一个字母"F"。这表明浏览者最先注重的地方有,头部,三分之一处,和左侧。所以我们要想一下如何把网站最重要的部分放在这几个地方。
5、网站的用户会忽视哪些内容
浏览者会忽视广告。他们会忽视横幅广告或文字广告。因此要避免网页的设计看起来像广告似的。还有浏览者也会忽视大块的文本。没有人会有很多的时间去看那一大部分的文本只为获得一个网站的主要内容。所以我们要尽量的简化文本。在重要的地方加添加一些能吸引人的东西。
6、文本与图片
这是一个有趣的事实。文字比任何静态图形更加吸引浏览者的眼球。如果你想给浏览者传递一个信息,那么我建议你使用文字来代替静态的图形。
7、吸引眼球的设计元素
我们来看一下哪些元素可以吸引浏览者的眼球:有煽动性的口号和按扭(通常使用明亮颜色),如果你要写一篇文章,那么你首先要确定好文章的标题。好的标题可以吸引浏览者的目光。便于让浏览者更好的抓住文章的重点。
8、要使用正确的文本格式
不要害怕使用段落,粗体,斜体,引用文字,下划线或者大字字母任何可以让你的文本更加受吸引的方式。当然有时你需要使用引导语句,来引导读者的目光。
9、慎重用图片
上面说过,浏览者会忽视广告。当你在设计图形的时候要确保它们不是太过于繁杂和混乱不理解。人们会觉得繁杂的图形和色彩丰富的图形会很难看。所以你要避免这种事的发生。
10、留出空白空间
不要把设计元素推杂在一起,要留空白。这特别是适用于文本。
2
手机网页设计排版需要注意的几个事项
1.安全宽度与扩展区域让页面适应主流分辨率
与PC上网页的做法一样,确定一个安全宽度,把重要信息控制在640PX宽度内(以iphone分辨率为安全宽度。目前主要浏览器在iphone4S下的首屏高度如下,可以根据具体页面投放的渠道做相应的首屏高度。
2.控制图片的大小
专题的头图一般有很强的视觉,对于手机用户来说,加载一张图片的等待时间比PC上成本大很多,如果一个页面加载时间超过5秒,70%的用户会选择关闭,那么再出彩的专题也没办法呈现再用户面前了,所以需要对设计稿做折中的处理。
在做头部的延展区域(超出640px范围),推荐使用纯色,渐变,可以平铺的素材,以便于减少头图的大小,提高加载速度,并且延展区域可以无缝连接。模糊的背景可以最大限度的压缩图片质量。
3.字体
手机中的字号一般上电脑中的两倍,一般在电脑中用的12px的字体在手机网页中就该使用24px。在设计的过程中,也要使用iOS和安卓默认渲染的字体,以便更真实的还原真实环境。在规范的专题中,主要字号控制在3个,大中小都有一个区间。避免随意用字体字号,并且字号必须上整数。
4.控件交互区域适合触控
手机专题的主按钮高度大于80px,并且根据活动的需求放在首屏内。文字链接上下的间距大于80px,手指在屏幕上热区最小感应是44px。
5.移动端网页少用跳转
手机用户的网络环境不如PC用户,页面的跳转会对用户产生更大的心理效力,如果在手机页面中能把信息合理的展示在一个页面中最佳。如果非要跳转,咱们可以用些假装不是跳转的方式,比如展开,浮出等。减少用户产生的不安全感。
3
网站设计需要注意的事项
1、搜索引擎不友好
搜索引擎对于难以处理和识别的打字稿、复数、连字号等等各种各样的问题,搜索的准确度会降低。显然,如果搜索引擎刻意去迎合这种错误使用的话,会伤害到所有的搜索使用者。
一个相关的问题是,搜索引擎区分结果是依靠文档的重要性,而只是按照内容关联次数简单地进行结果区分。
当找不到信息的时候,搜索是用户的救生索。即使有高级搜索功能,建议还是使用简单搜索,搜索形式应该是一个简单的录入框,就像我们常见的那一种。
设计网页要注意什么
2、使用PDF文件做为在线阅读
用户讨厌在浏览的时候跳出PDF文件,因为那会打断用户的浏览过程,因为普通的浏览器按钮无法工作,因此即使如打印或保存文档这样简单的事情也会变得复杂。由于其版面设计是基于纸张优化的,因此文字的字体很少会和用户的流量其窗口相适应。没有了平滑的滚动浏览,有的只是超小号的字体。
更糟糕的是,PDF文件内容是分块的,很难浏览。
PDF是对于印刷及发行手册等和其他需要打印的大文件来讲是很合适的,使用它的目的只是为了保留它的信息使其网页上浏览成为现实。
3、未改变已访问链接的颜色
一个好的浏览历史能够帮助你了解目前的位置,因为那是你浏览的起点。知道过去和现在的位置反过来使得决定下一步去哪里变得容易了。链接是这些浏览过程中的一个关键因素。用户可以不去访问那些没有用处的地址,相反,他们会访问那些对他们有帮助的链接地址。
最重要的是,他们知道哪些网页已经访问过了,这样就不必一次又一次访问同一个历史页面。
但是这些好处只是基于一个重要的假设:由于网站提供不同的颜色显示,用户可以分辨出哪些链接访问过,哪些链接没有访问过。如果访问一个链接后颜色没有发生变化,那么用户很可能会感到迷惑并无意中反复访问同一历史页面。
4、文字未排版
将所有文字堆积在一起是一种可怕的体验,浏览这样的文字将是痛苦的经历。
在线写作,并不是为了打印,需要让用户能很好地阅读,下面是几个改进的要点:
使用子标题
使用列表
突出关键字
使用小段落
反金字塔结构
简单的写作风格
5、固定字体大小
CSS样式不幸让网站有权禁止浏览器的“改变字体大小”的功能,并使得网站有一个固定的字体大小。对于大多数人的年龄超过40岁的人来说,这个固定地文字大小实在太小了。
尊重用户的喜好,让他们按照自己的需要修改文字的大小,同时,明确字体大小是相对的,而非绝对显示像素的数量多少。
6. 网页标题搜索引擎不友好
搜索是用户发现网站的最重要途径,搜索用户找到一个独立网站的最重要的方法。网页的标题是你吸引新用户或老用户从搜索列表中定位到你网站的主要工具。
4
网站设计模板结构要注意哪些
网站结构规划应该注意哪些问题?
1.URL设计。URL也是可以包含关键词的,比如你的网站是关于电脑的,你的URL中可以包含“PC”,因为它在搜索引擎眼里通常是“电脑”的同义词。URL不要太长,层次尽量不要超过4层,这个就点到为止。
2.栏目设计。栏目通常是与导航相关联的,设计时应该考虑网站整体的主题,用户可能会对哪些内容感兴趣,栏目名称最好是网站的几个主关键词,这样也方便利用导航的权重。
3.关键词布局。理论上每一个内容页都应该有它的核心关键词,同一个栏目下的文章,尽可能围绕栏目关键词展开。一个简单粗暴的办法就是直接用栏目关键词的长尾词。
有的客户可能对于网站的结构规划不知道是什么东西,反正网站可以打开,可以用就可以了,其他就不想管了,也不知道怎么样去处理!其实一个网站的规划是非常重要的,如果一开始定位不对,后面又要推倒重建,这样浪费的是时间和金钱!规划做得好的网站,后期还是有很多的拓展空间的!
模板设计应该注意哪些细节?
1.权重结构顺序。整个页面的html中(注意是html,而不是显示出来的版面),越靠前的位置,权重越高。由此引申出来,“title”、keyword、description三个标签,因为最靠前,权重最高。其次通常是导航,也是基本上是最靠上的,权重也非常高。再次就是文章标题和正文。这是根据html的前后来排序的。
2.因为搜索引擎首先要遵循W3C标准,所以,W3C定义的一些本来就是用来表示重要信息的标签,权重自然就高,比如,特别是h1,用来表示当前页面最重要的信息,一般每个页面只能有一个,其权重估计与title相当,也通常是用来放当前页面的标题,当然也有为了提高首页权重,用h1来放置logo或首页链接,都是可以的。另外还有em、strong这样的标签,用来表示强调,一般认为strong权重高于标签,同样也是加粗作用,但我们认为从SEO的角度看是没有权重加强的。
3.css或者js代码对搜索引擎来说通常是无意义的,尽量使用单独的文件来存放,或者在允许的情况下放到html尾部去
说到这个不得不提一下页面三要素了,很多人都知道页面三要素是什么东西,当然也有不知道的,不知道的我们不去管他,我发现有一些网站会将TKD这三个顺序倒过的来,感觉这样不是很好,还有的就是用了多个H1标签的,人家官方都规定是一个页面只有一个H1了,有一些程序员不知道为了方便就死命放上去,结果坑了SEO。