如何设计网站的主页?

2022-03-25 08:00:00

设计主页的首步是设计布局。就像传统的报纸和杂志编辑一样,我们将网页视为报纸和杂志,用于排版和布局。虽然动态网页技术的发展使我们倾向于学习场景编剧,但网页布局设计的固定基础仍然需要学习和掌握。它们的基本原则是共同的。你可以抓住要点,从一个例子中得出推论。布局指的是浏览器看到的完整页面(可以包含框架和层)。因为每个人的显示分辨率都不同,所以同一页面的大小可能是640*480像素、800*600像素、1024*768像素和其他不同的大小。版面是将图片和文本以最适合浏览的方式排列在页面的不同位置。你可能会注意到“匹配”是一个不确定的形容词。什么最合适?对不起,小编不能也不能给你一个完整正确的答案。就像有人想知道成功的秘诀是什么一样,胜利者只能建议你最容易成功的方法和方式,但不可能有成功一步的“秘诀”告诉你。在设计思考系列的第四篇文章中,我们谈到了网站的整体创意。布局也是一个创意问题,但它比网站的整体创意更容易、更规则。让我们首先了解布局的步骤:

我觉得新的草稿页面就像一张白纸,没有任何表格、框架和传统的东西。你可以尽可能多地运用你的想象力来描绘你所想的“场景”(我们建议你使用一张白纸和一支铅笔,当然还有Photoshop等等)。这属于创作阶段。不讲究精致整洁,不必考虑细节功能。它只能粗略地勾勒出创造力的轮廓。尽可能多地画,最后选择一个满意的剧本继续写作。

粗略布局基于草稿,您确定需要放置的功能模块排列在页面上。(注:我们在“主页设计-简介”中提到了功能模块,主要包括网站标识、主菜单、新闻、搜索、友情链接、广告条、邮件列表、柜台、版权信息等)。注意在这里必须遵循突出要点和平衡和谐的原则,把最重要的模块,如网站标志和主菜单放在最显眼的位置,然后考虑二次模块的发射。

最终确定粗略布局、细化和具体化。(只有依靠你的智慧和经验、影射和联想,你才能做出创造性的布局。)

在布局的过程中,我们可以遵循以下原则:

1.正常平衡——也称为“对称”。它主要强调秩序,可以达到稳定、诚实和信任的效果。

2.异常平衡——即非对比形式,但也包括平衡和节奏。当然,它们是不均匀的。这种布局可以达到强调、不安和高度关注的效果。

3.对比——所谓的对比,不仅使用颜色、色调等技巧来表达,还涉及古今、新旧、贫富等的对比。

4.凝视——所谓凝视,就是利用页面上人物的视线,使观看者模仿跟随的心理,从而达到凝视页面的效果。一般来说,它通常以凝视星星的形式出现。

5.Blank-Blank有两个功能。一方面,它显示了其他网站的,另一方面,它也显示了网页品味的优越性。这种表达方法对于显示网页样式非常有效。

6.尝试用图片解释——这种方法对于无法用语言说服或表达的情绪特别有效。图片讲解的内容可以向游客传达更多的心理因素。

虽然上面的设计原则很枯燥,但如果我们能理解并将它们应用到页面布局中,效果会非常不同。例如,如果网页的白色背景太弱,可以快速添加一些颜色;布局分散,可以用线条和符号串联;如果左边的单词太多,你可以在右边插入一张图片来保持平衡;表格太规则了。您可以尝试使用导向角度。经过不断的尝试和深思熟虑,你的网页将变得明亮:)

看看我们经常使用的布局形式:

1.“T”结构布局。所谓的“t”结构。它指的是页面顶部带有横条网站徽标+广告条的布局,左侧为主菜单,右侧为内容。因为菜单栏的背景很深,整体效果类似于英文字母“t”,所以我们称之为“t”布局。这是网页设计中使用最广泛的布局。这种布局的优点是页面结构清晰,主次分明。对于初学者来说,这是最简单的布局方法。缺点是规则很严格。如果你不注意细节,人们就很容易“忽略细节”。

2.“口”布局。这是一个象形的声明,也就是说,页面上通常有一个上下广告条。左边是主菜单,右边是友情连接,中间是主要内容。这种布局的优点是它充分利用了布局,并且有大量的信息(我的主页的主页属于这种布局)。缺点是页面拥挤且不够灵活。还有四面空旷,只有中间的窗户设计,如网易墙纸站。

3.“三”字布局。这种布局主要用于国外网站,但在国内不多。它的特点是页面上有两个水平色块,将整个页面分为四个部分,大多数色块上都有广告条。

4.对称对比布局。顾名思义,采用对称布局,半暗半亮,这通常用于设计场地。优点是视觉冲击力强,缺点是很难将这两个部分有机地结合起来。

5.弹出式布局。Pop引用了广告术语,这意味着页面布局就像一张宣传海报,以一张漂亮的图片作为页面的设计中心。常用于时尚网站,如Elle com。其优点显而易见:美丽迷人。缺点是速度慢。作为一种布局,它值得我们学习。

以上总结了互联网上常见的布局。事实上,有许多独特的布局。关键在于你的创造力和设计。对于版面设计技巧,这里有四条建议你可以考虑:1.增强视觉效果;2.提高副本的可见性和可读性;3.统一的视觉;4.新鲜度和个性是版面的较高境界。