万网代理
用户名:
密 码:
验证码:
新用户注册   找回密码
   010-51661675
控制面板
帮助中心
支付方式

万网首页

|

注册域名

|

万网空间

|

阿里云主机

|

万网邮箱

|

香港空间

产品购买流程
万网新闻公告
价格总览
域名基本知识
虚拟主机基本知识
万网空间如何备案
FTP软件上传
MSSQL使用帮助
MYSQL使用帮助
Foxmail收发信
Outlook收发信
域名注册服务条款
虚拟主机服务条款
独立主机服务条款
企业邮局服务条款
万网代理 服务总章
相关法律法规
您的位置:万网代理 > 新闻中心 > 帮助信息
   
   

读书笔记:网站设计之页面布局 用户体验呓语

发布人:雅友网络    发布时间:2010-11-17 21:17:59

最近由于自己要做一个小网站,但是还苦于找不到一个合适的美工和设计,只能自己上了。于是便看了一些关于用户体验和UI方面的书。

这个就当是个读书笔记吧。

1、常规的页面布局

常规上来说,我们把网页布局按照分栏的多少分为一栏式,二栏式和三栏式。

对于一栏式页面布局来说,一般在页面上放置一个具有冲击力的图片或者Flash来给用户留下深刻的印象,但是,这样的页面所能够容纳的信息量非常有限。所以常用于企业网站,以及一些小网站的首页,用于让用户记住你的站。此外,对于功能性比较单一的页面,也一般用一栏式布局,比如搜索引擎,注册和登录页面等等。

二栏式布局是最为常见的布局方式,二栏式又分为左宽右窄和左窄右宽式。这两种模式的选择是由于网站的性质所决定的。对于用户来说,他的浏览关注顺序是从左到右,那么窄的部分一般来说都是导航栏,而宽的部分则是主体内容部分,那么用哪一种方式将取决于你的站是内容占主体还是导航占主体,换句话说,是内容驱动导航还是导航来驱动内容。

举个例子,拿当当网来说,一般用户来买东西是有着明确目的的,他知道自己要买的东西是哪个类别,而对于主站的内容只是给用户的一个推荐。但是对于cnblogs来说,显然内容应该是大于导航的。所以其实在我看来,博客园的设计其实是并不合理的。

 

当当网首页

 

cnblogs首页

对于三栏式布局来说,最大的好处就在于容纳的信息量比较大,但是重点不突出,降低了用户对网站的可控性,因此一般意义上不推荐。

当然,如果当用户需要比较多样化的时候,也可以让用户自由来设计布局,多常见于个人博客。

2、页面的通透性

页面的通透性是指尽量使整个页面的模块比例统一,同时通过线条,颜色等视觉元素增加各模块间的区分度,使得用户的视线轨迹可以有规则地通过各个模块,而不会被模块之间不规则的交叉所打断。

此外,根据“F”原则,也应该尽量将重要地,用户所关系地内容放在页面的左上角位置。

3、页面的配色方案

每个网站都要有自己的主色调,主色调指的就是页面色彩的主要色调,总趋势,其他配色的综合不能超过主色调的50%(白色背景除外)。

在选择颜色的时候,不仅仅要考虑颜色本身所代表的含义,如安全,浪漫等,还有考虑以下几种因素。

A. 目标用户群体。不同的用户群体对于颜色的审美爱好以及理解都不同,其中包括性别,年龄,职业等。

B. 当地文化风俗。如中国把红色作为喜庆的颜色,而欧洲大部分却把红色作为杀戮的象征。

C. 网站的类型。如电子商务站一般用暖色调来刺激用户购买,而SNS站则营造一个轻松的氛围。而垂直类网站一般都与自己的领域特色相关。

D. 品牌形象。我总结一句话就是根据自己的Logo以及企业形象来选择色调。比如IBM就一定会选择蓝色作为主色调。

4、页头和页尾

页头分为设计型头部和简约型头部。一般的大型网站,由于已经有着一定的网站知名度,所以无需在通过渲染头部来提高网站对用户的吸引力,加深印象。所以一般采用比较简单的简约型头部,比如新浪,腾讯,都是这样的效果。对于一些小网站来说,采用设计性头部给用户留下深刻印象,创造品牌效应,但是当设计性头部过于繁杂时,却使得内容的容纳量变小,从而造成一种头重脚轻的感觉。所以这个需要设计师的一种折中。

在页头上最重要的就是Logo,在现代网站的设计中,Logo起到两个作用,一个是标识,一个是让用户回到首页。

页尾一般来说并不重要,用户可到达的机会也少,所以尽量地去简化它,避免它占用内容所占据的位置。

5、搜索区

现在的网站一般都带有站内搜索的功能,目前有两种设计方式。

一种将搜索淡化,因为搜索只是一种手段,适用于浏览型网站,我并不鼓励你搜索,而是希望你一条一条地看下去。比如说豆瓣。我希望你去看社区的动态,而不是希望你来豆瓣为了找人。

一种是搜索为主,最简单的就是淘宝。一般来说用户来电子商务站都是有着明确的目的,所以搜索是用户找到他想要商品的最主要方式。

另外,对于搜索框来说,如果你鼓励用户使用搜索框,在页面刚刚打开的时候,就可以让光标在搜索框上,这样用户可以直接搜索内容,而省去了一次操作。但是如果并非如此,就不要让光标在文本框上,因为这样用户变没有办法使用键盘来让整个页面下移。

6、登陆和注册

首先是究竟是淡化登陆注册还是强调登陆注册,这个取决于该站点的目的。两个典型便是新浪和豆瓣。对于新浪来说,需要的只是网站的浏览量,与是否注册关系不大,所以只是将登陆弱化,没有登录一样可以享受基本所有权利,其中包括“匿名”评论等功能。而豆瓣以及很多SNS站点都需要来通过用户注册来扩展好友关系,所以在豆瓣的首先都是将登陆注册放在最显眼的位置,然后用一些优点来煽动用户注册。

但是个人认为随着SNS站点的逐渐做大,虽然不会像新浪等资讯站一样如此弱化用户的登陆注册,但是也不会在将登陆注册变为浏览,发帖等必须的一部,而会将匿名作为可选的一项。而新浪等资讯站随着发展,也会逐渐地走向社交网络,从而在网络中达到一种资讯站与SNS的折

 

7、关于广告

广告从来都是互联网的主要盈利手段之一。可是不得不承认,没有人喜欢看广告。因此广告主和用户之间总是存在着无可避免的直接矛盾,而且一定意义上,网络广告没有任何约束,这也就导致了网站广告的混乱和不合理性。

但是我们在网站中穿插广告时,应该保证我们自己网站不会影响用户的浏览。

首先,据调查,用户最能接受的广告形式是游动式广告和横幅式广告,而弹出广告和邮件广告是用户最讨厌的。

其次,从布局上看,我们不能让广告切断页面的相关内容,因为很多用户一旦看到广告就会习惯性地认为该页面的内容已经中止,不在继续浏览了,所以这样的话会影响整个网站内容的关联性。

然后,我们要避免过多的广告同时出现。也要规范网站广告的尺寸大小。

8、表单的布局设计

这里就从注册来看,这个是最典型的表单。

从布局上讲分为三种方式,其中包括垂直对齐,左对齐和右对齐。

垂直对齐的优势在于可大量减少眼睛一动和填写表单的时间,但是缺点在于增加了垂直的空间,当注册项较多时,会增加页面的滚动。适用于搜集的信息和资料是熟悉的,需要较少的完成时间。

左对齐便于用户浏览标签,同时会减少垂直空间。但是如果某标签过长,则会造成文字与文本框距离过远。适用于对所需的信息不熟悉,而且标签文字不会太长。

右对齐则让左边参差不齐的空包让用户很难快速检索表单要填写的内容。

另外,在设计时,最好将注册时相关的项进行分组,这样可以让用户以尽可能少的视觉元素来分出关系,避免视觉噪音。

对于很多选项来说,不妨提供默认选项,来尽量减少用户的操作。并且给予适当的提示来给予用户帮助,记得一定是适当的,不要过多。

此外,还可用一些较大的字体以及间距,不要让用户产生局促感。

9、模块标签

模块标签,就是用于页面内某模块中,在内容上方使用一列标签形式的链接进行切换。

使用模块标签时,首先一定要具备一个最基本的前提,内容必须都相对独立,不能存在上下文的关系。

在设计模块标签与下面模块内容时,我总结为两点:突出对比和加强关联。

突出对比是说,突出已选中标签和未选中标签的对比,而加强关联是说加强以选中标签和其内容模块的关联。

10、按钮

首先要用较大的,与背景色形成鲜明对比的按钮来使所需主要强调的按钮从网页中跳跃出来。

其次,我们需要根据按钮的主次来选择性强调和弱化某按钮。但是同一个方式的弱化,可能到另一个方面则会是强调。这个需要根据经验来结合之前的知识来考虑。

还有也要注意按钮的摆放位置,比如说用户的视线是从上向下,从左至右,这样用户也会依照这样的顺序做出选择。

11、反馈

Nielsen可用性原则中有一条痕重要的原则,就是系统必须提供必要的反馈。其中包括成功提示和失败提示。

成功提示是最简单的一种提示,他应该仅仅起到提示的作用,而不该中断用户的操作。我们应该只需要让用户知道就可以了。不应该让用户进行任何不必要的操作,比如弹层就是一个非常愚蠢的做法。

失败提示是很重要的提示,从理论上说分为两种方式,一种是直接在网页上用文字提示,一种是弹出警告框来提示。但是我个人认为弹出警告框是非常不可取的,因为最重要的一点是alert的时候会发出声音,这样的用户体验是非常差的,所以自己做一个弹出层倒是一个折中的做法。

还有一个很重要的是错误页面,比如说404页面,优秀的404页面应该能够改善用户的不良体验,减少用户的挫败感,还应该将用户引导到他原本打算去往的相关联的去处,以减少用户的流失率。

关于进度条,据研究表明,超过1秒就要提供相应的提示信息,比如进度条,而超过10秒就不仅仅需要提示信息,还需要提供完成的百分比。

12、其他个人想法About验证码

比如说验证码,验证码是用来防止恶意注册的,但是不是用来防止正常用户的,我们不应该让用户因为验证码产生挫败感。如果让我设计一个验证码,我会将英文的“O”和数字的“0”,英文的“L”和数字的“1”都排除在验证码之外。

此外我有个想法是觉得,首先,密码是在post回去的过程中是无法保存原有状态的,所以唯一的办法只能是ajax回发验证。但是在何时Ajax,只能是在失去焦点时。所以我认为最好把验证码放在页面最顶端,这样用户比较容易离开焦点从而触发Ajax验证。

本文来源网络:万网代理 www.yayb.com


现在时间:2018-6-23 12:42:16
 相关资讯:  
【重要】域名暂代实名认证通知 2017-5-17 10:48:04
【重要】域名实名认证通知 2017-5-17 10:47:29
域名实名认证公告 2017-3-20 13:24:28
万网8月25日凌晨官网系统升级 2012-8-24 20:13:41
哪款万网企业邮箱更适合我? 2011-1-20 19:17:26
不加www的域名,网站为什么不能访问? 2011-1-20 19:15:52
新手选购虚拟主机必须做的事情 2011-1-20 19:15:21
什么是万网智能双线虚拟主机? 2011-1-10 22:37:52
访问网站出现Directory Listing Denied 是什么原因? 2011-1-10 22:37:20
万网空间与免费空间区别 2011-1-9 21:58:14
万网个人做网站需注意的三大网站建设事项 2011-1-6 23:40:41
万网空间网站中木马了怎么处理 2011-1-6 23:40:17
怎样方便的管理我的万网邮箱? 2011-1-5 23:55:25
万网主机Service Unavailable出现原因及解决方法 2011-1-5 23:54:47
万网空间404错误页面设置办法 2011-1-5 23:54:08
万网空间IIS连接数和在线人数的关系 2011-1-5 23:53:40
关于元旦假期期间暂停国内域名资料审核通知 2011-1-3 1:20:19
网站更换域名万网空间的注意事项 2011-1-3 1:18:37
万网空间使用unix虚拟主机有哪些优点? 2011-1-3 1:17:36
万网空间如何选择数据库? 2011-1-3 1:17:11
如何解决万网空间unauthorised 2011-1-3 1:16:51
万网空间常见的四个错误及解决方法 2010-12-30 0:29:15
中文.香港域名即将推出通告 2010-12-28 22:03:16
万网国内空间和国外空间如何选择 2010-12-26 19:10:29
万网服务器云平台升级维护通知 2010-12-23 20:07:05
如何预防万网邮箱中毒? 2010-12-23 20:02:36
万网空间数据库MSSQL和MYSQL有什么区别? 2010-12-23 20:02:03
万网空间支持JMAIL组件么? 2010-12-23 20:01:37
互联网热潮微博团购网购 2010-12-23 20:00:24
服务器的稳定性对百度优化的影响 2010-12-21 23:50:50
关注CN域名注册的减少与未来 2010-12-21 23:50:14
万网空间IIS链接人数过多是什么原因 2010-12-20 22:39:52
网站为什么会出现“Service Unavailable”的提示? 2010-12-20 22:37:32
购买美国空间常见的四大误区 2010-12-20 22:36:57
网站访问很慢一般是什么原因 2010-12-20 22:33:39
选择万网虚拟空间个人网站成败之关键 2010-12-18 2:09:11
网站迁移万网虚拟主机的正确操作方法 2010-12-16 20:27:29
市面上最好的企业邮箱:万网绿色G邮箱 2010-12-16 20:26:03
选择虚拟主机的20个注意 2010-12-16 20:24:36
万网虚拟主机服务的分类 2010-12-16 0:17:58
为什么外贸网站要使用万网企业邮箱 2010-12-14 21:31:07
万网代理及分销合作伙伴合作协议 2010-12-13 19:48:37
万网国际域名注册信息更新提醒通知 2010-12-13 19:46:43
万网企业邮箱1G变3G,免费加邮 2010-12-13 19:46:09
万网G主机已经支持fsockopen函数 2010-12-13 1:46:01
万网标准建站加速智能建站成熟 2010-12-13 1:44:59
当前虚拟主机的三种流量限制 2010-12-12 0:49:20
万网空间为何要使用独立IP? 2010-12-12 0:48:49
万网主机万网空间机房介绍 2010-12-11 0:46:24
中小型企业如何选择万网虚拟主机 2010-12-11 0:43:50
站点地图 | 关于我们 | 工作机会 | 联系方式 | 帮助中心 | 设为首页 | 加入收藏
Copyright 2013 All Rights Reserved
咨询电话:010-51661675 Email:postmaster@yayb.com
客服QQ:[客服01] [客服02] [客服03]
地址:北京市丰台区右外大街6#404 邮政编码:100069
《中华人民共和国电信与信息服务业务》信息产业部备案号 京ICP证050062号