网站首页的设计(转)

news/2024/5/10 17:49:06/文章来源:https://blog.csdn.net/wbj0110/article/details/84596902

网站首页的设计是一件非常让人头痛的事。虽然她看上去很简单:产品经路随便从网站里拿点东西出来,堆出一个看上去靠谱的页面。也正因此,它往往非常麻烦:很多人都可以发表自己的见解,以致最终陷入到无尽的争执中。

首页的设计相对于其他页面要难的原因是,其他页面更多的是解决用户“能做”的问题,而首页的更多要解决用户“想做”的问题。“能做”对应的是可用性,相对容易解决,专家评估、可用性测试都可以很有效地帮助策划师或设计师;而“想做”对应的是PET(Persuation,Emotion,Trust,说服、情感、信任),可能涉及到心理学,消费学,营销学等陌生的知识,设计师在这方面就不再是专家了。

从用户群体分,首页可以分为以下三种用户:不了解的新用户、有兴趣的新用户、老用户。

对于新用户而言,他们势必会问到这些问题:

  • 我在这能做些什么?
  • 这个网站能提供哪些对我很重要的东西?

对于已经有兴趣的用户也会有些其他的疑问:

  • 我应该怎么开始?
  • 我是否必须注册?如果是,应该怎样注册?

总得来说,首页应该解答新用户的疑惑并且帮助他们找到功能的入口;而对于老用户,则需要更明显、快捷的登录入口。《designing for the social web》一书将用户的使用分为几个步骤:不了解——感兴趣——第一次使用——常规使用——有情感。而首页对于前面三个步骤至关重要!

user

这样看来,首页有两个目标:

  1. 让不了解的用户了解网站并产生兴趣,最终促成用户使用。
  2. 让有兴趣的用户尽快开始使用。

从用户的浏览行为,首页又可以分为两种用户:有目标的用户和无目标的用户

Alan Cooper的“目标导向”理念告诉我们,用户的目标驱动任务,有目标的用户直接开始“任务”,我们只要为他们解决可用性的问题。而那些无目标的用户,他们只是随便逛逛,需要首页的PET足够好,将此类用户“转化”成有目标的用户,尽量避免他们“流失”。

target

所以我将浏览首页的用户分为这两类,针对两类用户不同的特点来进行设计,会让我们的思路变得清晰。

design

在首页页设计之前,一定要做的就是调查分析网站用户,是“有目标”的多,还是“无目标”的多,以确定页面上两类模块的比例。一般网站同时兼顾两种用户。但“可用性“和“PET”这两点,存在天然矛盾,前者要求页面清晰,而从后者的角度来说,清晰意味着死板,后者要求页面丰富,而从前者的角度来说,丰富意味着杂乱。故在设计时要注意权衡。为解决上述矛盾,要求“可用性模块”和“PET模块”要明确区分,可以识别,不能相互掺杂。让两类用户能第一时间关注到需要看的部分。可用性是基础,一定要先做好,PET是更高要求,属于上层建筑,切不可为上层建筑放弃基础。

首页的可用性设计

  1. 尊重用户习惯,不要擅自创新,采用用户习惯的网站头,包括主导航,全局导航,搜索,LOGO。
  2. 突出导航信息,对导航内容进行分类,对导航信息进行一定程度的架构。
  3. 尽量保持页面布局规矩,使用网页栅格系统设计页面,最好不出现两列和三列混排的设计。
  4. 模块中使用尽可能简单的列表,简单列表更容易被理解和读懂,且设计运营开发成本低。

首页的PET设计

1、清晰表现品牌和产品服务类型。这首先实现PET中的Trust,只有用户第一时间了解网站品牌和服务(特别是一些大品牌),才能够立即建立用户的信任。但这个实践起来却相当有难度,特别是一些全新的服务,篇幅小了说不清,篇幅大了用户直接略过。可以采用5秒测试来验证此目的有没有达到。

给一个新用户(目标用户)看首页设计5秒,让它说出:

  • 这是什么网站?
  • 这个网站提供什么服务?
  • 首先吸引你的是什么内容?
  • 这个网站和类似竞争对手有什么不一样吗?
  • 你对这个网站和它的服务有没有兴趣?

然后让用户仔细浏览该首页,再纠正上面的答案。另外想要用户容易记你的网站或品牌,你可以把你的网站LOGO放到网站适当位置,而且要配合网站风格,这样会比较容易让用户记住你的网站LOGO,在用户心中留下一定的印象,下次用户访问网站的时候,看到你这个标志就可以知道是你的。

2、使用吸引人的图片和标题。说白了就是标题党,虽然这招定被广大设计师唾弃,但它的效果绝对不容小觑。网站首页就像是一本书的封面或是杂志封面,它是用户浏览网站时第一眼看到的,因此,你的首页设计必须第一眼就能吸引用,否则它就失去了首页的用途和目的。你可以看大部分网站的首页,他们都是很吸引人的,你可以全色彩或者只有黑白,也可以利用有吸引力的图像与文字组合来创作你的首页。

3、使用非对称的设计,有主有次,展现丰富性。但注意,非对称设计会增加认知负担,降低可用性。

4、利用好数字来说服用户,因为数字“不会说慌”。比如限量限时促销,突出价格和价格对比等。

5、在首页显示其他用户的活动来说服用户(其他用户购买记录,评价,晒单等)。调查显示,让用户信任一个站点的最有效途径,就是在线其他消费者的意见。

6、视觉设计上要符合产品和服务的定位,在情感上与用户拉近距离。

网站首页的设计是一项非常重要的工作, 在实际项目中还需对更具体的场景进行分析、考虑运营性的需求、对单个模块的交互进行推敲,最终才能得到一个能吸引用户、留住用户的有效首页。

转自:

http://www.biaodianfu.com/index-design.html

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_848098.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

要访问本地IIS 网站,必须安装下列IIS组建: IIS6元数据库与IIS6配置兼容性ASP.NET

2019独角兽企业重金招聘Python工程师标准>>> 这个错误提示,我是在win7一个纯净系统上出现的,一般情况下是没有启用的关系,不是没有安装的关系,解决办法:打开控制面板\程序,打开或关闭windows功能…

discuz 网站空白怎么解决

2019独角兽企业重金招聘Python工程师标准>>> 问题一:前台打开空白,后台可以登陆。解决办法:1.登陆后台 http://域名/admin.php。 2.关闭所有的插件。3.更新缓存,即可解决。问题二:前台后台都是空白。解决办…

OpenCms创建网站的过程示意图——专用OpenCms人们刚开始学习

很多人听说过OpenCms,我知道它的强大,只需下载并安装,最后,我们看到了久违OpenCms,我们看到了它的简单的界面,喜悦之后,但难免困惑。如何用这个东西,我如何用它来网站,从…

站长,不要忘了你的网站是做什么的

随着互联网技术的发展,大大小小的实体行业进入到互联网,站点竞争进入了前所未有的“革命时代”,越来越多的站点了解并熟悉SEO技术,各个行业的站点流量拼抢到达了一种狂热。对搜索引擎是越来越了解并且熟悉其排名模式。如果今天你跟…

1.0 Python 学习网站

1. https://wizardforcel.gitbooks.io/python-doc-27-34/content/Text/2.2.html Python 中文内置函数 1. ★★★★★★ 【 Python 3 学习】 http://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000 2.★★★★★http://www.crifan.com/fi…

如何进行seo

Hexo SEO 优化让你的博客在google搜索排名第一 刚刚建买了域名建了博客,发现在google,百度毛都搜不到,真是悲伤,后来才知道原来是要seo的,所以看了一些文章,然后自己也摸索了一下,终于在让自己的…

啦啦啦,,小网站大功能

1.极简图床:http://yotuku.cn 能够将本地图片地址生成一个网络地址 2.Smallpdf:https://smallpdf.com/ 实现不同文档类型的转换 3.iconfont阿里巴巴矢量图标库:http://www.iconfont.cn/plus 输入想要的图标的描述就可以筛选出相应的矢量图&am…

网站运维之JAVA-SSH框架数据同步问题

一、环境 SSH环境&#xff0c;查询用的是基于Hibernate的配置文件构建了一个SessionFactory&#xff0c;主要代码如下 public class HibernateUtil {private static ThreadLocal<Session> threadLocal new ThreadLocal<Session>();private static Configuration c…

软件架构设计学习总结(12):大型网站技术架构(六)网站的伸缩性架构

网站系统的伸缩性架构最重要的技术手段就是使用服务器集群功能&#xff0c;通过不断地向集群中添加服务器来增强整个集群的处理能力。“伸”即网站的规模和服务器的规模总是在不断扩大。 1、网站架构的伸缩性设计 网站的伸缩性设计可以分成两类&#xff0c;一类是根据功能进行物…

ASP.NET Core 网站发布到Linux服务器

长期以来&#xff0c;使用.NET开发的应用只能运行在Windows平台上面&#xff0c;而目前国内蓬勃发展的互联网公司由于成本的考虑&#xff0c;大量使用免费的Linux平台&#xff0c;这就使得.NET空有一身绝技但无法得到广大的施展空间&#xff0c;.NET平台被认为只适合开发企业内…

《流量的秘密: Google Analytics网站分析与优化技巧(第3版)》一2.3 了解网站分析数据的准确性...

本节书摘来自异步社区《流量的秘密: Google Analytics网站分析与优化技巧(第3版)》一书中的第2章&#xff0c;第2.3节&#xff0c;作者【英】Brian Clifton&#xff0c;更多章节内容可以访问云栖社区“异步社区”公众号查看 2.3 了解网站分析数据的准确性 流量的秘密: Google A…

优质免费在线学习网站

文章翻译 by / 林本托 Tips 作者&#xff1a;Steven Ryan 原文地址&#xff1a;Build your career with free online courses 现在网上已经有很多非常优质的在线学习网站&#xff0c;更让我们感到开心和幸运的是&#xff0c;很多网站竟然是免费的&#xff0c;所以放着这么多好的…

网站安装打包 新建网站[四][文件解压] 上

在新建网站之前&#xff0c;就是要把打包好的项目拷贝一份到IIS指定的路径上&#xff0c;同时&#xff0c;还要为个别目录设置相应的访问权限! 于是就产生了两件事&#xff1a; 1。拷贝-》[这里我是采用RAR打包&#xff0c;然后解压] 2。设置权限 如果是用拷贝方式&#xff0c;…

云服务器 ECS 建站教程:部署Java Web

部署Java Web项目Tomcat 作为一个开源且免费的 Java Web 服务器&#xff0c;常用来作为 web 开发的工具。它可以托管由 servlet&#xff0c;JSP 页面&#xff08;动态内容&#xff09;&#xff0c;HTML 页面&#xff0c;js&#xff0c;样式表&#xff0c;图片&#xff08;静态内…

Python版——博客网站七 部署Web App项目

2019独角兽企业重金招聘Python工程师标准>>> 开源地址&#xff1a;https://github.com/leebingbin/Python3.WebAPP.Blog 一、何为 DevOps DevOps&#xff08;英文Development和Operations的组合&#xff09;是一组过程、方法与系统的统称&#xff0c;用于促进开发&a…

【第二期】如何制作属于自己网站的音乐播放器 - 该换了

大家好&#xff0c;欢迎喜欢我的朋友继续关注我的技术文章&#xff0c;话说现在的东西越来越快了&#xff0c;更新的不是你所想象的到的。 接着上次的讲&#xff0c;对于企业的建站&#xff0c;现在大多数都是使用公司中成熟的类库构架网站的速度不是你能想象的&#xff0c;就拿…

linux网站dos攻击自动封15分钟,简单的shell脚本结合awk实现防止对web服务的dos攻击...

一 实验环境鄙人使用的是centos 6.8操作系统 需要安装iptables(常见的linux系统貌似都会自动安装iptables)这条可以忽略 awk也需要安装没有的话就用yum装下吧当然最重要的是web服务 我这里使用的是apache 对日志进行分析 当然你也可以分析其他的日志嘛 只是拿web服务来当…

解决网站快照内容被篡改跳转被挂马的问题

首先请各位网站运营者&#xff0c;检查下网站从百度点击进去&#xff0c;是否跳转到了恶意网站上了&#xff0c;直接输入网址则不会跳转的这个情况。再一个查看网站在百度里的首页快照是否是自身网站的内容&#xff0c;如果出现一些跟网站不相关的内容。 比如&#xff1a;恶意内…

【网站制作设计】建议这三个基本要求你一定要掌握!

做什么事情都要有一定的基本尺度来衡量自己&#xff0c;当然&#xff0c;在网站制作设计过程中&#xff0c;我们应该需要衡量网站制作基本标准&#xff0c;那网站建设到底应该符合什么样的标准呢?又有哪些掌握哪些可以使网站制作得更为完善呢?下面&#xff0c;我们重点一起来…

为在Windows Azure上的网站配置自定义域名

本篇体验给Windows Azure上的网站自定义域名&#xff0c;首先"CNAME"和"A记录"是必须了解的概念。 假设&#xff0c;在Windows Azure上的网站域名是&#xff1a;x.chinacloudsites.cn CNAME 通过CNAME&#xff0c;可以把诸如mywebiste.com, www.mywebsite.…