网站首页如何设计-阿里云开发者社区

开发者社区> 云建站助手> 正文

网站首页如何设计

简介: 网站首页这么设计,用户体验更好
+关注继续查看

一、网站首页的重要性
作为网站全貌及重要信息、产品的展示页,以及流量的入口页,企业网站首页的设计好坏一般决定了用户对网站的第一印象。
人机交互学博士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之内但是这不是固定不变的,考虑到页面的使用空间,也可以适当选择使用其他的数值。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9493 0
网站制作与网页设计的区别
以下为学做网站论坛关于“网站制作与网页设计的区别”讲解视频教程。 https://cloud.video.taobao.com//play/u/96402691/p/2/e/6/t/1/50090046529.mp4 很多朋友可能会有一个误解,就是认为网页设计就是网站制作。
530 0
Tomcat修改默认网站首页目录
vim /app/tomcat/conf/server.xml #appBase 定义站点目录 #docBase 定义首页目录 ... ...  
1117 0
网站首页head区代码规范
一个标准的网页首先head区是需要比较规范的! head区是指首页HTML代码的和之间的内容。 必须加入的标签 1.公司版权注释 2.网页显示字符集 简体中文: 繁体中文: 英 语: 3.网页制作者信息 4.网站简介 5.搜索关键字 6.网页的css规范 (参见目录及命名规范) 7.网页标题 xxxxxxxxxxxxxxxxxx .可以选择加入的标签 1).设定网页的到期时间。
556 0
经典网页设计:20个美丽的 iPhone App 网站设计
  经常能看到很多精心设计的精美 iPhone 应用程序网站。似乎设计师都很喜欢 Apple 风格的设计,创造干净,简单和优雅的网站。设计师创造鼓舞人心的布局,用漂亮的图片,大量的空白和漂亮的版式,而不是简单地创建一个随机的页面来显示他们的应用程序。
1039 0
经典网页设计:30个新鲜出炉的扁平化网站设计《上篇》
  最近,你会发现大家都在讨论扁平化网页设计。每个人都想要它,因为它很酷,因为它是目前的趋势。扁平化设计,因其简单性和关注用户,去除了很多网站的不必要的元素,例如沉重的背景图片,渐变,斜面和其他一切使空间杂乱的东西。
729 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13176 0
Asp.net MVC 仿照博客园的简单网站首页 列表设计
本来我打算采用ajax提交请求,异步的请求获取数据,但是我发现如果这样的话就会拖慢开发的进度,拖长时间。所以在这篇博客中仿照首页的列表设计其实和左侧列表网站分类采用了同样的方式,通过局部视图的方式呈现。
1250 0
+关注
云建站助手
阿里云面向企业/个人用户提供一站式建站产品及服务,包括自助型模板建站工具【云速成美站】,个性化定制设计官网产品【云企业官网】。关注云建站助手,掌握产品最新动态。
74
文章
3
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载