网站建设|网站首页这么设计，用户体验更好

时间：2023-10-12 02:36:02 | 来源：网站运营

时间：2023-10-12 02:36:02 来源：网站运营

网站建设|网站首页这么设计，用户体验更好：这是【建站百科】专栏第18篇原创内容，由我在建站行业从业10年、给上万公司搭建过网站的经验总结而来。




hello，艾瑞巴蒂，大梦又来了，今天要说的是作为网站“门面”的网站首页设计。

一、 网站首页的重要性

作为网站全貌及重要信息、产品的展示页，以及流量的入口页，企业网站首页的设计好坏一般决定了用户对网站的第一印象。

人机交互学博士Jakob Nielsen说过：“见到什么比记得什么更容易”。

其实，无论是人还是系统工具，都看颜值。漂亮的排版布局、精致的首页可以让人眼前一亮，可以提升网站的设计感；粗糙的排版、简陋的首页则会降低人们的心理预期。

所以，做好网站的首页设计，有利于增加用户的好感度，从而有兴趣继续浏览，也因此增强用户粘性，为形成良好的用户转化做铺垫。

二、网站首页的设计要点

1、让用户在10秒内知道你是做什么的

“我是谁？”“我要做什么？”不只是哲学问题，也是做网站必须要考虑的问题。

用户通常在搜索引擎中是通过搜索关键词来检索信息的，所以用户的目的通常很明确。

如果用户点进网站首页看完都还没看明白你的网站是做什么的，那大概率是不会进行下一步的深度浏览，更别提提高用户粘性和转化了。

说到增强用户对网站记忆点，就不得不提网站标语，一个好的网站slogan或产品卖点也可以起到事半功倍的作用。

如这个网站，首页图片是一张电吹风，配上文字「你的下一台电吹风，必须是告诉电吹风」。用户一眼就明白，这个网站是电吹风网站。




2、优先展示「新品」

用户都是喜新厌旧的，如果是产品展示网站，记得优先展示新上架的产品。试想一下，如果你是卖服装的，用户点进去发现首页展示的都是去年的旧款，会不会潜意识觉得，你这个网站快要黄了，所以才没有新品？




3、选择合适的布局方式

首页布局设计要根据信息量和页面类型选择合适的布局方式，给重要信息赋予更多空间，体现内容间的主次关系，引导用户的视线流。

如，门户网站的首页由于具有海量的信息，一般较多采用三栏式布局；

品牌官网的首页重点是展示企业实力及业务方向，信息较少，一般采用垂直和水平均居中的布局方式。

新闻网站，新闻内容才是用户最关注的，所以适合采用新闻内容为主的两栏式布局。

4、通过视觉区分，保持页面的通透性
页面设计不规范，容易导致各版块比例不一致，在视觉上给用户凌乱的感觉。

要想保持页面的通透性，可以统一各版块间的比例，通过线条、颜色等视觉元素增加个栏间的区分度，以此俩增加用户阅读的流畅性和舒适性。




5、根据用户浏览习惯安排内容
根据眼动试验结果，用户的注意力往往呈现F形，因此在页面布局设计时，应该尽量将重点内容放置在页面的左上角，右侧放置次要内容。

6、统一布局，提升专业度
如果网站首页选择了合适的页面布局，那么同一类型或同一层级的页面，尽量使用相同的布局方式，避免分栏方式的不同或分栏比例上的差异，从而保持网站的统一性和规范性，使网站更加专业。

三、首页布局的基本方法

网站页面的布局方式决定了该网站页面给浏览者的视觉感受和可用性，因此，网站的首页设计要首先并且着重考虑页面布局。力求将丰富多彩的页面内容在有限的空间里更好的展示出来。

页面布局的构成原则：协调、一致、流动、均衡、强调等。

将网站中的每一个构成要素有效的结合起来，给浏览者美观、实用的网站首页界面。
网站整个页面的构成部分要保持统一风格，使其在视觉上整齐、一致。
网页布局的设计能够让浏览者凭着自己的感觉走，并且页面的功能能够根据浏览者的兴趣链接到其感兴趣的内容上。
将页面中的每个要素有序的排列，并且保持页面的稳定性，适当加强页面的可用性。
把页面中想要突出展示的内容在不影响整体设计的情况下，用色彩间的搭配或留白的方式将其最大限度的展现出来。

四、页面视觉布局种类

有些网站在设计布局时会根据网站的性质考虑网站的普遍性，一般用户会根据自己的喜好浏览网站页面。但是，如果想要自己的网站更有创意、更与众不同，一般不用从头到尾一直兼顾网站的普遍性，只要让浏览者感觉实用性强并且美观大方即可。

网站首页常用的布局方式是满屏式布局、两栏式布局、水平和垂直居中式布局。

1、满屏式布局

满屏式布局结构简单，视觉流程清晰，便于用户快速定位。

采用满屏式布局的首页，信息展示集中，重点突出，通常使用大幅精美的图片或者交互式的动画效果来实现强烈的视觉冲击效果，从而给用户留下深刻的印象，提升品牌效果，吸引用户进一步浏览。

但是由于页面排版方式限制，更适用于信息量小，目的比较集中的网站。因此常用于小型网站首页。

2、两栏式布局

两栏式布局是最常见的布局方式之一，这种布局方式兼具满屏式布局和三栏式布局的优点。

根据占比不同，可以左窄右宽、左宽右窄、左右均等3种。这三种表面上看是比例和位置不同，但实际上影响的是用户浏览的视线以及页面的整体重点。

①左窄右宽：这类布局通常采用左侧导航，右侧内容的设置。用户的浏览习惯通常是从左至右、从上至下，采用这类布局更符合理性的操作流程。适用于内容丰富、导航分类清晰的网站。

②左宽右窄：这类页面通常内容在左，导航在右。结构明显突出了内容的主导地位，引导用户将视觉焦点放在内容上。在用户阅读内容的同时或者之后，才引导其关注更多的相关信息。

③左右均衡：是指两侧的比例相差很小，甚至完全一致。运用此类布局的网站较少，适用于两边信息的重要程度相对较均衡的情况。




3、水平和垂直居中的页面布局

这类布局是指将页面的横向和纵向设计成100%的布局框架，使页面的内容无论在什么大小的分辨率下，都在浏览器的正中间显示。




考虑到计算机显示器的分辨率不同，我们在设计时一般以1024px×768px的分辨率为标准。在1280px×800x的分辨率下，页面的周围肯定要比分辨率为1024px×768px要多出很多空白区域。

以1024px×768px为标准，在设计时如果想要使页面变得最大并且不会出现滚动条的话，横向需设置在1007x之内，纵向则需要设置在566x之内但是这不是固定不变的，考虑到页面的使用空间，也可以适当选择使用其他的数值。







好啦，今天的建站小课堂到这里就结束啦。

如果你有建站需求，可以联系大梦哦~

记得点赞+收藏+关注 @云梦智能 让我看到你的热情哦