如何设计个人网站首页
大致提纲如下:
○版面布局的窍门
○色彩的搭配
○字体的设置和表格的嵌套
○细微之处见功力
○考虑不同的浏览器和分辨率
○设计好你的banner和位置
○meta标签的重要性
○首页设计的小建议
这里只是关于首页设计的一个引子。让我们来大致了解一下首页设计的步骤。
首页,从根本上说就是全站内容的目录,是一个索引。但只是罗列目录显然是不够的,如何设计好一个首页呢?一般的步骤是:
●确定首页的功能模块
●设计首页的版面
●处理技术上的细节
一).确定首页的功能模块。
首页的内容模块是指你需要在首页上实现的主要内容和功能。一般的站点都需要这样一些模块:
网站名称(logo),
广告条(banner),
主菜单(menu),
新闻(what's
new),
搜索(search),
友情链接(links),
邮件列表(maillist),计数器(count),
版权(copyright).
选择哪些模块,实现哪些功能,是否需要添加其他模块都是首页设计首先需要确定的。
二).设计首页的版面
在功能模块确定后,开始设计首页的版面。就象搭积木,每个模块是一个单位积木,如何拼搭出一座漂亮的房子,就看你的创意和想象力了。
设计版面的最好方法是:找一张白纸,一支笔,先将你理想中的草图勾勒出来,然后再用网页制作软件实现。
三).处理技术上的细节
制作的主页如何能在不同分辨率下保持不变形,如何能在IE和NC下看起来都不至于太丑陋,如何设置字体和链接颜色....等等。
首页设计是整个网站设计的难点和关键,总结出一套较为合理易学的设计方法,从而举一反三,使我们能够更加轻松的完成整个站点的设计制作。
一、网站首页的必要元素虽然首页元素根据企业性质的不同会做改变,但是基本的页面元素必须要具备。如:导航栏、LOGO、Banner、按钮、图片、文字。1、导航栏导航栏如果设计得恰到好处,是会给网页本身增色很多(千万不要太花哨,它属于功能物件,喧宾夺主就不好了)。导航栏有一排、两排、多排、图片导航和Frame 框架快捷导航(民主湖论坛就是这种)等等各种情况的设计。有时候是横排,有时候则是竖排。另外还有一些动态的导航栏,如很精彩的Flash导航。2、LOGOLOGO是网站为了给大家一个比较直观的信息的表达工具。网站的LOGO,一般以静态的居多,也有动态的,但是LOGO的特点都是在表达网站的信息,是一个网站的直接的表现窗口。3、Banner是网站的广告展示,对于引起用户注意和记忆、增强画面效果有重要作用。4、按钮网页中的“用户登录”、“登录按钮”“More按钮”、“个股推荐”等等类似物件,通常都统称为按钮。它是引导用户进入其他页面的一个重要端口。
二、网站首页的整体规划对网站首页设计的整体要求体现在:1.有共性,才有统一,有细节区别,就有层次。2.防止设计与实现过程中的偏差,不要定死具体要放多少条信息。3.设计的各部分,要配合整体风格,夸张一点好像VI。4.不仅页面上各项设计要统一,而且网站的各级别页面也要统一。5.页面要“透气”,就是信息不要太过集中,以免文字编排太紧密。6.不要有太多分散注意力的点。动态闪烁要适中。7.页面留白部分,要根据平面设计原理来设计,请注意,分栏式结构不宜留白。8.还要考虑到浏览器上部占用的屏幕空间,防止图片截断等造成视觉效果不好。9.首页设计图片+导航,这是一种比较强的网站表达,可以根据时间的变化更改图片,一般用在专题网站上,如民主湖电台,还有很多公司的网页。
三、对网站首页功能易用性的要求任何网站都要把这个问题放在第一位。不过大家请注意以下几点:1.导航栏应最先调入,以便常客快速前往所需信息空间。2.页面长度要短,使得用户在信息空间内可迅速移动。3.导航设计方向要一致。支持导航的层次按钮应当从上到下或从左到右,但不要两者都用,不要混用方向。
四、网站首页设计要求体现出气氛情感表达气氛会自然地激发出一种情感,不管它来自图片、颜色、标题或者是动态的广告,只要是来自页面,本身就具备了一种表达思想。气氛的表达是一个网站的灵魂所在,在浏览网页的是时候给人的第一感觉是最重要的,气氛情感也代表着整个网站的主题,是浏览者最容易所到感染的隐藏因素。
头部:LOGO+导航栏(菜单栏)+登录注册(如果有这部分功能的话)+搜索栏(如果有的话)
主体:这是你主要想呈现的主体部分。一般分为产品封面及简介--->各类资讯(行业,公司等文本类信息)--->主体特色(指你网站主体的优势,特点等)
尾部主要以超链接为主:网站协议--->备案信息--->联系方式--->网站介绍--->各大类平台链接(微博,微信等)
1、普通企业网站
就普通企业来说,企业网站主要还是为营销而建立。侧重体现品牌特色,企业竞争力描述,特色产品,方便的联系方式,产品结构等内容。
2、个人型网站
对于个人网站而言,不需要过于复杂的设计,简洁应该是你最先要考虑的问题。其次是需要展示的个性,既然是个人网站就要代表你的个人特性。如果你是设计师,也许你的网站只需要个菜单,其他的空间用于体现你的设计能力。如果你是个普通网友,则偏重于你你网站的特色内容和爱好。
3、中小门户
既然是门户,内容当然会比较多,一般做个两三屏也就够了,不要把一百年也没人看的东西放在首页。那种大大帅帅的BANNER也许都是不必要的,除外是广告位,追求尽量 少的页面空间放尽量多的内容,尽量的用简洁的方式排放你的内容,好像说到设计去了。找个位置,放个导航可能是个不错的做法,没有人喜欢在菜单一层层点下去 寻找他要的东西。你需要分析用户关心的热点,而不是把所有的内容像贴膏药一样贴上去。
4、大型门户
这个门户网站的设计师数量之多,到底应该学习新浪搜狐还是网易?这个应该网易走在了前面,至少他的探索了。但是门户网站的改版是在挑战用户使用的习惯性,所有其实新浪搜狐是在不断的进化中。更多的网站则在美工中下功夫,在内容的选取上基本没什么太多革新。
关于网站首页设计的页面应该包括哪些内容,青藤小编就和您分享到这里了。如果您对页面排版、网站设计、图像处理等有浓厚的兴趣,希望这篇文章可以对您有所帮助。如果您还想了解更多关于平面设计的素材及技巧等内容,可以点击本站的其他文章进行学习。
以上是小编为大家分享的关于网站首页设计的页面应该包括哪些内容?的相关内容,更多信息可以关注环球青藤分享更多干货
这边一般建议放一些自己觉得重要的东西:
第一、首先是首页大图,让网站更加美观
第二、其次就是公司的主营产品或者服务,让用户知道我们是做什么的
第三、接下来就是公司资质,让用户信任我们的网站
第四、之后就可以放我们公司的一些案例了
第五、联系方式不能少
差不多就这么多,也可以按照自己的要求来
网站的首页是一个文档,当一个网站服务器收到一台计算机上网络浏览器的消息链接请求时,便会向这台计算机发送这个文档。当在浏览器的地址栏输入域名,而未指向特定目录或文件时,通常浏览器会打开网站的首页。
网站首页往往会被设计编辑得易于了解该网站的整体信息,具有导航的作用,提供层出不穷的信息,并引导互联网用户浏览网站其他部分的内容。 这部分内容一般构成为一个目录性质的内容。
首页设计第一步需要考虑的是网站首页的友好性。
倘若网站的主页能够提升友好性,那么用户在进入网站之后会有一种显著的信赖感,会名正言顺的进入网站,那般可以提高用户对网站的黏性,从而提升转化率。那么如何做好用户的友好性呢?关键就是要提升网站页面的精美度以及进行合理IDE设计方案,以及提升查找的便利性。
主页设计排版
主页的设计排版务必根据用户的浏览下意识来管理决策,绝大多数用户浏览一个网站页面全是左右边、左边一开始浏览的。因此,主页的设计排版可以采用F方法,那般能够让用户在第一时间看到为重要的信息。
首页导航设计方案
在进行主页设计的那时,导行设计方案全是不能忽视的。一个好的导行能够帮助用户迅速的找寻本身务必的内容,而且查找导致也更很容易进行网站收录,提高网站的权重。
一、设计的任务
设计是一种审美活动,成功的设计作品一般都很艺术化。但艺术只是设计的手段,而并非设计的任务。设计的任务是要实现设计者的意图,而并非创造美。
网页设计的任务,是指设计者要表现的主题和要实现的功能。站点的性质不同,设计的任务也不同。从形式上,可以将站点分为以下三类。
第一类是资讯类站点,像新浪、网易、搜狐等门户网站。这类站点将为访问者提供大量的信息,而且访问量较大。因此需注意页面的分割、结构的合理、页面的优化、界面的亲和等问题。
第二类是资讯和形象相结合的网站,像一些较大的公司、国内的高校等。这类网站在设计上要求较高,既要保证资讯类网站的上述要求,同时又要突出企业、单位的形象。然而就现状上来看,这类网站有粗制滥造的嫌疑。
第三类则是形象类网站,比如一些中小型的公司或单位。这类网站一般较小,有的则有几页,需要实现的功能也较为简单,网页设计的主要任务是突出企业形象。这类网站对设计者的美工水平要求较高。
当然,这只是从整体上来看,具体情况还要具体分析。不同的站点还要区别对待。别忘了最重要的一点,那就是客户的要求,它也属于设计的任务。
明确了设计的任务之后,接下来要想的就是如何完成这个任务了。
二、设计的实现
设计的实现可以分为两个部分。第一部分为站点的规划及草图的绘制,这一部分可以在纸上完成。第二部分为网页的制作,这一过程是在计算机上完成的。
设计首页的第一步是设计版面布局。我们可以将网页看作传统的报刊杂志来编辑,这里面有文字、图像乃至动画,我们要做的工作就是以最适合的方式将图片和文字排放在页面的不同位置。 除了要有一台配置不错的计算机外,软件也是必需的。不能简单地说一个软件的好坏,只要是设计者使用起来觉得方便而且能得心应手的,就可以称为好软件。当然,它应该能满足设计者的要求。笔者常用的软件是Macromedia的Dreamweaver、Fireworks、Flash以及Adobe的Photoshop、imageready,这些都是很不错的软件。 接下来我们要做的就是通过软件的使用,将设计的蓝图变为现实,最终的集成一般是在Dreamweaver里完成的。虽然在草图上,我们定出了页面的大体轮廓,但是灵感一般都是在制作过程中产生的。设计作品一定要有创意,这是最基本的要求,没有创意的设计是失败的。在制作的过程中,我们会碰到许多问题,其中最敏感的莫过于页面的颜色了。
三、色彩的运用
色彩是一种奇怪的东西,它是美丽而丰富的,它能唤起人类的心灵感知。一般来说,红色是火的颜色,热情、奔放;也是血的颜色,可以象征生命。黄色是明度最高的颜色,显得华丽、高贵、明快。绿色是大自然草木的颜色,意味着纯自然和生长,象征安宁和平与安全,如绿色食品。紫色是高贵的象征,有庄重感。白色能给人以纯洁与清白的感觉,表示和平与圣洁。
我们知道,颜色是光的折射产生的,红、黄、蓝是三原色,其它的色彩都可以用这三种色彩调和而成。换一种思路,我们可以用颜色的变化来表现光影效果,这无疑将使我们的作品更贴近现实。
色彩代表了不同的情感,有着不同的象征含义。这些象征含义是人们思想交流当中的一个复杂问题,它因人的年龄、地域、时代、民族、阶层、经济地区、工作能力、教育水平、风俗习惯、宗教信仰、生活环境、性别差异而有所不同。
单纯的颜色并没有实际的意义,和不同的颜色搭配,它所表现出来的效果也不同。比如绿色和金黄、淡白搭配,可以产生优雅,舒适的气氛。蓝色和白色混合,能体现柔顺、淡雅、浪漫的气氛。红色和黄色、金色的搭配能渲染喜庆的气氛。而金色和粟色的搭配则会给人带来暖意。设计的任务不同,配色方案也随之不同。考虑到网页的适应性,应尽量使用网页安全色。
但颜色的使用并没有一定的法则,如果一定要用某个法则去套,效果只会适得其反。经验上我们可先确定一种能表现主题的主体色,然后根据具体的需要,应用颜色的近似和对比来完成整个页面的配色方案。整个页面在视觉上应是一个整体,以达到和谐、悦目的视觉效果。
四、造型的组合
在网页设计中,我们主要通过视觉传达来表现主题。在视觉传达中,造型是很重要的一个元素。抛去是图还是文字的问题,画面上的所有元素可以统一作为画面的基本构成要素点、线、面来进行处理。在一幅成功的作品里,是需要点、线、面的共同组合与搭配来构造整个页面的。
通常我们可以使用的组合手法有秩序、比例、均衡、对称、连续、间隔、重叠、反复、交*、节奏、韵律、归纳、变异、特写、反射等等,它们都有各自的特点。在设计中应根据具体情况,选择最适合的表现手法,这样有利于主题的表现。
通过点、线、面的组合,可以突出页面上的重要元素,突出设计的主题,增强美感,让观者在感受美的过程中领会设计的主题,从而实现设计的任务。
造型的巧妙运用不仅能带来极大的美感,而且能较好地突出企业形象,而且能将网页上的各种元素有机的组织起来,它甚至还可以引导观者的视线。
五、设计的原则
设计是有原则的,无论使用何种手法对画面中的元素进行组合,都一定要遵循五个大的原则:统一、连贯、分割、对比及和谐。
统一,是指设计作品的整体性,一致性。设计作品的整体效果是至关重要的,在设计中切勿将各组成部分孤立分散,那样会使画面呈现出一种枝蔓纷杂的凌乱效果。
连贯,是指要注意页面的相互关系。设计中应利用各组成部分在内容上的内在联系和表现形式上的相互呼应,并注意整个页面设计风格的一致性,实现视觉上和心理上的连贯,使整个页面设计的各个部分极为融洽,犹如一气呵成。
分割,是指将页面分成若干小块,小块之间有视觉上的不同,这样可以使观者一目了然。在信息量很多时为使观者能够看清楚,就要注意到将画面进行有效的分割。分割不仅是表现形式的需要。换个角度来讲,分割也可以被视为对于页面内容的一种分类归纳。
对比就是通过矛盾和冲突,使设计更加富有生气。对比手法很多,例如:多与少、曲与直、强与弱、长与短、粗与细、疏与密、虚与实、主与次、黑与白、动与静、美与丑、聚与散等等。在使用对比的时候应慎重,对比过强容易破坏美感,影响统一。
和谐是指整个页面符合美的法则,浑然一体。如果一件设计作品仅仅是色彩、形状、线条等的随意混合,那么作品将不但没有“生命感”,而且也根本无法实现视觉设计的传达功能。和谐不仅要看结构形式,而且要看作品所形成的视觉效果能否与人的视觉感受形成一种沟通,产生心灵的共鸣。这是设计能否成功的关键。
1、整体网站构架避免用“排比式”
第一屏抓住眼球之后,一般人会先浏览一下整体网站,往下拖动,看看网站大体讲了些什么。虽然底下一片面积比较大,但是千万要要避免的是网站板块的平铺直叙。“排比式”的版块结构是很容易造成疲劳的,因为它让眼睛无从落地。
因此,虽然第一屏以下面积比较宽广,也要做到有主有次,有层次感。一般越左上展示越重要的信息, 越右下展示越次要的信息。这样,用户就能一下子找到需要的东西进行二次点击。
2、第一屏要狠抓眼球
一般网站都不能一屏就展示完,而且一屏就展示完的网站给人过于单薄的印象。这第一屏对于网站的现 象起着第一印象的作用,所以必须第一时间抓住访客的注意力。
首先,第一屏要杜绝密集。不要以为第一屏就要以大量的信息轰炸用户的眼球,这样会把用户轰走的。第一屏尽量不要出现以下东西:a.成段文字;b.文字列表;c.三种以上色彩;d.下拉框。
实际上,第一屏必要的元素就四个:logo、搜索框、导航条和大主题。有了这四样东西,其它的可以酌 情加入,总体的原则就是简洁大方,以诱导点击为导向,不要展示过多实用性信息,尤其字不要太多,这是网站设计的趋势。
3、用图片诱导点击
注意力经济,能够吸引注意力才有机会生存下来,因此图片的意义显得尤为重大。就算是虎嗅网这种以 深度评论文章为主的网站,也会精心挑选图片来增强网站视觉效果,“无图无真相”是互联网上很扫兴的一句话。
因此,建议增加整体网站的图片比例,大图小图结合使用,尤其是小图的使用,对加载速度等技术层面的问题干扰不大,而且让网站看起来更有诱惑力。“小图+标题”的列表形式出现在首页会是非常有点击诱惑的一道风景。
4、让首页标题再“标题党”一些
一把首页上面标题所占的比例较大,成段的文字很少。能够出现在首页上的标题是有限的,所以,这些 不要让这些标题占着茅坑不拉屎,不要出现平庸无聊的标题,否则整体页面的“被点率”就会降低,抵 达内页的访客减少,自然PV量、停留时间等用户指标就会下降。
因此,首页的标题要进行精心设计。到目前为止,以关键词布局为导向的标题不建议大量使用,反而诱导性的标题应该占有大比例。首页标题最大的贡献应该是使首页整体形象鲜活有趣,突出品牌特点,而不是呆呆地布局关键词。
5、让文字排版苗条一些
如果你的访客有幸能够深入到文章页,那是可喜可贺的,但也是压力山大的,因为详情页的停留时间对 SEO效果的影响更大,一般详情页的停留时间应该是最长的。
因此,详情页的文字排版不要让人一看就想跑。让人一看就失去信心的往往是无小标题、大段文字、文 字过小、文字过长这些基本的错误,所以,给文章减肥很有必要。减肥方法就是针对这些基本错误进行改进,大小标题镶嵌其中、多分段、字号14以上。至于篇幅的长短,就看内容质量怎么样了。
另外,建议文章页多穿插几张图片,图文混排是网文的基本要求。
6、网站互动不要太热情
最让人抓狂的销售往往有两种:一种是音量大的,另一种是话太多的,这两种销售都是“强暴型”的销售,是很难征服顾客的。网站的人工客服或者机器人客服就相当于网站的销售,最好不要太主动。互联 网的性质,更强调以用户为主导,看完了,不懂的并且有需要的都由用户发起询问需求。
所以,只要保证你的客服随时在容易看到的地方待命就可以,不要老是愣头青一样地死命弹出、整屏来回悬浮。其实,弹出和悬浮这两个东西已经可以放弃不用了。