如何做好网页设计-网页设计小组-好知网

如何做好网页设计

发表于 2015-01-12 • 1035 次查看

如何做好网页设计

    如何做网页设计，该怎么做好网页设计，文章包含了一些大致重点内容，51RGB小编Q群162542073分享的希望对所有学网页设计的朋友有所启发。
1、记住：你能掌控的时间是有限的
    我仅仅用4秒钟就能浏览完平常的页面，因此，你没有足够的时间吸引用户并让他们继续浏览你的网站。也就是说你应尽可能准确的描述你设计的网站是关于什么的。如果它需要让浏览者花费更多的时间去弄明白此网站是关于什么的，他将放弃并离开。
2、记住：用户是略读页面
    当你进入一个房间时，你不会具体的看每一样东西的外表。首先你会注意屋子里面人或物的外形，你环视整个屋子，然后找令你敢兴趣的东西。在第一次浏览网站的时候也会发生类似的事儿，浏览者或用户首先是大体浏览一下。这就需要你引导用户去你想要让他们去的地方。它可能是个登陆按钮、更多内容按钮、或博客文章等等
3、网站的左上角是最明显的位置
    这是大家公认的事实。主要原因是大家都是用这种习惯方式来读书读文章的（从左上角的位置开始），另外早期的网站和应用软件也是基于此方法进行网页设计开发的。我们通常会把LOGO放在左上角，这样是很好的。但是考虑一下加入一个或者两个其他的元素在这个位置让它看起来更明显（注册的链接、搜索的表单、标语等）。
4、了解“F”结构
     一些视觉跟踪调查研究证明，用户浏览网站的视觉路线类似于字母“F”型。最顶部的位置总是能被看到，中间区域仅有一半被看到，再往下只有左边一部分能被看到。当你在设计的时候不知道将一个内容块放到社么位置的时候，你可以去考虑一下这一因素。
5、了解用户忽略什么
    用户都是对广告视而不见的。他们习惯于忽略图片广告和文字广告。避免设计的东西看上去像广告，同时，用户也会忽略大块的文字区域。没有人有时间（更确切的说是耐心！）去阅读大片的文字，他们仅仅是了解页面文章的大意。
6、文字和图片
    一个有趣的事实是。文字比那些绝妙的图片更能够获得注意！如果你想向你的用户传达信息，我建议你使用大的标语文字来代替那些很炫的头部图片……
7、用设计元素来吸引注意
    来吸引注意的好的元素是文字口号，行动纲领的按钮（通常用亮色调），分成1-2-3级，或者就是一个普通的列表……
如果你在写一篇很长的文章，很重要的一件事情就是你要去找小标题。小标题比其他的内容容易获得关注。使用恰当的标题，通过这简单的步骤向用户阐述这篇文章的主题。
8、文字格式
    恰当的文字格式的编排更有意于阅读。不要担心使用过多的段落、加粗、斜体、引用、下划线或者字母大小写……它们都可以让文字块更有视觉冲击力。当然，你也需要用格式化强调一些你认为很重要的文字或者句子，这些能够引导你的读者阅读完全文。
9、使用简洁图片
    我前面已经提及过用户对广告是视而不见的。当你在网页设计过程中使用到图片时，要确保它们不要杂乱、令人讨厌或不被理解。大部分人感觉看杂乱、色彩花哨的图片是比较费劲儿的。图片应该简洁、易理解的。你使用人的脸部图片更容易引起用户的注意，尤其当图片人物的眼睛盯着用户。当然你也可以用目光的方向来引导用户关注某一个方向。
10、使用留白
    使用留白可以给某些元素更多的可视空间，如果某元素与边距或其它元素太近就容易被混淆，那就需要给它留点呼吸的空间。尤其在文字与文字内容之间。不过做网页设计要先学会DIV+CSS网页制作，简单说下怎么入门，其实，怎么开始学习div+css是比较难。对这个东西不了解，不知道怎么入门。对于div+css我入门不久，不到五个月吧，但我现在已经用div+css写出很多个网页了。
    首先你要解决排版的问题，table时代，“table”就可以把整个网页排了。但是Div+css时代，排版的工具就是“div”，“div”就相当于上个时代的table。排版其实就是把网页划分为很多不同的块，也就是不同的div，也相当于table不同的td，块与块之间的关系有横排、竖排、并列、包含等等，当然了这些关系都可以出现在同一个块之中。知道div是划分块的了，就要了解div的分类，div分为两类，一个是“ID”，一个是“class”，你常常在div+css中看到类似这样的代码，比如，div id=”“，div class=”“。id可以看成是父框架，class可以看成是子框架，id可以包含class，当然了你在学习过程中会发现id也可以包含class，class也可以包含class。弄清了div的分类，就要搞清楚样式表，也就是“css”是什么。“css”其实相当于是table时代的样式属性，比如<table boder=0 width:300height:200>这个样式就是说表格没有边框，宽300像素，高300像素。

而把它换成样式表就是border:0;width:300px;height:200px;，以此类推，当然了css的样式类型非常多，学习过程中自然会发现。最后我说div与css怎么联系起来，比如我们做了一个宽300像素、高200像素的id块，名称取为“ok123”，那么这个div我们就要写成<div id="ok123"></div>，为这个id块设置样式就把css部分文件写成 #ok123

{width:300px;height:200px;} ,这样div与css联系起来了。

51RGB在线教育官网指定学习Q群162542073 更多免费教程，素材，源文件等，请前往www.51rgb.com

Illustrator经典案例教程视频 http://www.51rgb.com/mproductzh.aspx?classid=29

Photoshop经典案例大全教程 http://www.51rgb.com/mproductzh.aspx?classid=20

网页设计视频网站链接 http://www.51rgb.com/mproductzh.aspx?classid=31

网络营销教程全集 http://www.51rgb.com/mproductzh.aspx?classid=38
更多视频教程请前往51rgb官网 http://www.51rgb.com

adobe软件 Ps视频 AI视频 DW视频网络营销视频集锦

http://yun.baidu.com/share/home?uk=271892183&view=album

豆瓣网站网页设计小组

http://www.douban.com/group/520499/

奋斗的新浪博客

http://blog.sina.com.cn/u/1748316330