网站分析:网页核心内容对视觉表现的影响

  “对信息的优化和提炼永远都是设计的第一步。”这是百度联盟用户体验中心Banner上的一句话。在自己做网页设计的过程中,越来越对这样的概括有了切身的体会和想法。当然,这句精炼的句子其实包含了非常多的内容,我个人认为,至少包括这四个方面:一、从网站的整个诉求来讲,网页上需要放置哪些信息才能更好的实现网站的诉求?哪些信息是需要保留的?而哪些信息是需要放置在其他页面甚至干脆舍弃掉的?二、对于已经确定放置于页面的信息,如何更好的撰写文字、挑选图片才能达成功能性和视觉上美观的完美统一?三、区分信息的重要程度,哪些是重要的,需要着重表现的?而哪些是次要一些的信息?四、区分出信息的主次后,在布局、色彩、尺寸上,即在视觉上如何更好的突出和表现?

  这四个部分的每一部分几乎都有讨论不完的话题,那么在这篇文章中我只就第四个方面,也就是网页上核心内容和视觉表现的关系来梳理和概括一下自己在这方面的一些理解,尽量的将我所考虑到的内容都写出来,同时举一些具体的案例来说明我的观点,便于大家更好地理解。

  一、核心内容对于页面布局的影响

  下图是一个提供WordPress网站建设的公司,在它的主页上从上到下可以看到这样几部分信息:导航、Logo、口号、作品展示、选择我们的理由、联系表单、日志列表、邮件订阅、Twitter信息以及版权信息。其中的第一视觉无疑是公司的口号和作品展示,这就是此网站主页上的核心内容。因为作为一个网站建设公司来讲,直观的让客户知道你是干什么的?干的怎么样?应该是客户最想要了解的内容。那么对于核心内容,在视觉上做了哪些考虑呢?

  我们可以看到,在宣传口号上设计师给”wordpress”这个词应用了非常大的文字尺寸,并且颜色上和其他文字区别开,使用了较深的灰色,强调本公司是建设专门以wordpress为后台的网站。在宣传口号的下方的作品展示图的尺寸很大,宽度达到了540像素,而整个的设计宽度是1000像素,在主页上这样大尺寸的展示图能够非常清晰而直接的让客户看到作品的原貌,从而对于公司的制作水准有了一个直观的印象。而这样的大尺寸的作品展示其实已经隐约的决定了整个网站的布局。想想看,在屏幕的左上方区域摆放上一个宽540像素,高460像素的矩形之后,接下来的区域该放置哪些信息,其实就像是摆放积木一样,按照重要程度挨个放置就行了。当然这并非是唯一的布局方式,但是无论何种布局方式,我们的想法都应该在功能性的考虑的范围内进行。所以创意我们可以有,但是要明白和天马行空的纯创意的区别。

  

  如果上面的页面布局仍然让人觉得中规中矩的话,下面的一个酒店的主页的布局也许会让我们感觉有些新意。可以看到,此设计的背景用了大幅的食物图片,导航和主内容区只占到整个页面高度的三分之一,让背景的图片大面积的呈现出来,和上面的设计一样,这样布局的目的并非单纯是为了标新立异或者是为了视觉上的美观,而是该酒店的特色也许就在于餐饮方面,所以为了对核心内容进行突出,在布局上做了相应的考虑。再下面的一张餐厅也在主视觉部分强调了美味的食物,但两者采用了完全不同的布局方式,虽然各自有信息架构方面的独特考虑,但是也不妨将它们看作同样一种核心内容的两种不同的创意方式。

  

  

  二、核心内容对于色彩方案的影响

  Lofter是网易提供的轻博客服务,其中的信息类型主要有四类:即:图片、音乐、文字、视频。关于Lofer的模板设计,木偶同学在《LOFTER轻博模板设计》一文中对主要展示图片的模板的有如下设计方面的考虑,”该模板通常是为了满足摄影用户,图片展示面积要够大,够爽;模板首页一屏能看多图;背景要暗,突显当前图片;边框的设计让图片更突出,或让图片更精美。”通过分析和理解此设计思路,我们能够发现,其中的图片展示面积要够大,也就是我们上面提到的布局方面的考虑,而背景要暗即是我们这里要讨论的对于色彩方案的影响。

  从木偶同学的完成作品中我们可以看到,按照设计思路做出来的灰色的背景平静而低调,和白色的图片边框和背景形成鲜明的对比,而灰白的色彩方案和色彩多变的图片不会冲突,无论图片怎么变化都能和灰色和白色百搭,所以彩色的图片在白色的背景和边框的映衬下更加抢眼,让照片这样重要的信息在视觉方面得到了充分的表达。

  

  另外的一个例子来自于韩国的搜索引擎服务网站Naver。liuman0722在《高效的设计可视化》一文中针对Naver的设计写到”韩国著名门户/搜索引擎网站Naver旗下的Naver Shopping,其产品定位即提供商品的搜索服务,通过搜索商品名称,可以按照商品类别列出几乎韩国所有的大型电子商务网站提供的该商品链接。所以在界面上,用强对比色调突出搜索功能和导航区(页面左上角的绿色区域)。通过视觉化引导,让用户专注于核心内容,聚焦用户视线的焦点,在白色为主色调的页面,视线会先看到强色调的部分,所以也可以用强色调来突出核心内容,让用户的视觉聚焦在那里。”

  

  所有的视觉设计都是围绕信息来做的,我们必须首先梳理好了信息的内容和结构,才能知道应该在哪里施以重墨,在哪里点到为止。反过来,很多的设计思路和想法可以说本身已经暗含在信息中了,比如我们上面提到的布局和色彩方案。只要提炼和优化好了信息,怎么来做其实在梳理信息的过程中就渐渐的明晰了。

  来源:http://startwmlife.com/web-core-content-of-the-visual-performance/

时间: 2024-10-03 07:47:03

网站分析:网页核心内容对视觉表现的影响的相关文章

网页核心内容的视觉表现方式

"对信息的优化和提炼永远都是设计的第一步."这是百度联盟用户体验中心Banner上的一句话.在自己做网页设计的过程中,越来越对这样的概括有了切身的体会和想法.当然,这句精炼的句子其实包含了非常多的内容,我个人认为,至少包括这四个方面:一.从网站的整个诉求来讲,网页上需要放置哪些信息才能更好的实现网站的诉求?哪些信息是需要保留的?而哪些信息是需要放置在其他页面甚至干脆舍弃掉的?二.对于已经确定放置于页面的信息,如何更好的撰写文字.挑选图片才能达成功能性和视觉上美观的完美统一?三.区分信息

网页核心内容和网页色彩方案与网页布局的关系

文章描述:网页核心内容对视觉表现的影响. "对信息的优化和提炼永远都是设计的第一步."这是百度联盟用户体验中心Banner上的一句话.在自己做网页设计的过程中,越来越对这样的概括有了切身的体会和想法.当然,这句精炼的句子其实包含了非常多的内容,我个人认为,至少包括这四个方面:一.从网站的整个诉求来讲,网页上需要放置哪些信息才能更好的实现网站的诉求?哪些信息是需要保留的?而哪些信息是需要放置在其他页面甚至干脆舍弃掉的?二.对于已经确定放置于页面的信息,如何更好的撰写文字.挑选图片才能达成

分析网页的内容,除正则表达之外还有其他什么方法?

问题描述 分析网页的内容,除正则表达之外还有其他什么方法?请问一下,这个网页标题和内容的正则表达示怎么写呢?http://news.sina.com.cn/c/2007-04-11/161112753911.shtml 解决方案 解决方案二:UP解决方案三:还有啊,比入字符串的indexOf(),,lastIndexOf()...等等...************************************************想不出短信?来http://www.9gaoxiao.com解

正则-java如何抓取不同网站不同网页的内容

问题描述 java如何抓取不同网站不同网页的内容 请教大神们如何用java抓取不同网页(不同网站)相同属性的内容,如图: 用同一个java程序或正则一次性抓取图片上标注的内容(注:有很多这样的网页). 解决方案 内容一般在table或者div中,找出特征匹配,截取字符串就行了 解决方案二: 对于HTML标签,最好用XML解析类库,通过XPATH等方式来查找,这样简单,也不会容易出错,正则表达式处理这个比较麻烦,而且容易出错 解决方案三: 应该用到了,网络请求协议http!

百度如何判断网站核心内容

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 搜索引擎蜘蛛把页面代码送回搜索引擎服务器后,SE是如何判断页面中最核心的内容呢?先说下Kyw认为的搜索引擎运作过程的前几个步骤: 1. 蜘蛛下载A页面,送回服务器. 2. 服务器寻找A页面的核心内容位置,然后去除HTML代码. 3. 寻找网页核心内容-- 我不确定GOOGLE.百度.YAHOO!是否真的有"判断核心内容"这

对网站分析认识上的10个误区(下)

本文分析了当下网站分析中的十大误区,共分两篇来概述,以下是后五种误区,上篇请查看此处 误区六:Bounce Rate越高,页面质量越糟 一般大家都会认为Bounce Rate(蹦失率)是用来衡量页面质量的.一般而言,这是正确的,但却不能说bounce rate高高在上就一定是页面质量糟糕造成的. 首先,bounce rate并不只由页面质量决定,同样也受到流量质量的影响.举个极端的例子,如果你的页面文案做的极具诱惑,但是访问者却全部都是不懂汉语的,你的landing page仍然会有很高的bou

页面标记法网站分析及数据捕获原理

[前言] 网站分析如何获得数据,其实有很多种方法.例如利用服务器日志数据,或者是在客户端装一些监视软件.页面标记法网站分析获取数据的方法跟前二者都不一样,但一经出生,就艳惊四座,迅速成为主流方法.我的博客(http://www.chinawebanalytics.cn)实际上几乎所有的话题都是基于页面标记法的.今天的文章,带朋友们一起再次了解什么是页面标记法的网站分析,以及我们日常所读的Omniture Site Catalyst或是Google Analytics网站分析报告中的数据,都是怎么

网站分析常用的指标

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 最近开始学习网站分析,边学边把重要的内容记下,也算作是自己复习.网站分析采用的指标可能有各种各样的,根据网站的目标和网站的客户的不同,可以有许多不同的指标来衡量.常用的网站分析指标有内容指标和商业指标,内容指标指的是衡量访问者的活动的指标,商业指标是指衡量访问者活动转化为商业利润的指标. 一.网站分析的内容指标 转换率 Take Rates

SEO网站分析:如何进行评分(四)

如果你一直在关注本系列文章,你或许已为自己的网站找到了很好的战略性的SEO计划.在第一部分中,我们确定了衡量SEO计划成功的基本标准.通过制定的基本标准和论证性数据,我们进入了第二部分--网站分析,并建立了电子表格,以帮助分析和评估网站的架构.URL结构和链接结构等. 在第三部分中,我们回顾了网站的导航.网页模板.层叠模式板本以及用于建立网站关键词搜索的第二级网页结构.我们按照0-10分几个档次对网站的链接和导航进行评估打分,并根据上部导航.左右导航.页脚和http://www.aliyun.c