网页核心内容对视觉表现的影响

标签: 设计理论 功能性 | 发表时间:2012-06-10 10:52 | 作者:wantfee
出处:http://startwmlife.com

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

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

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

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

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

580th_layout.jpg

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

580th_hotel.jpg

th_01index4-580.png

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

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

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

580th_lofter.jpg

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

580th_color.png

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

相关文章

相关 [网页 核心 视觉] 推荐:

网页核心内容对视觉表现的影响

- - 飞鱼的声纳
“对信息的优化和提炼永远都是设计的第一步. ”这是百度联盟用户体验中心Banner上的一句话. 在自己做网页设计的过程中,越来越对这样的概括有了切身的体会和想法. 当然,这句精炼的句子其实包含了非常多的内容,我个人认为,至少包括这四个方面:一、从网站的整个诉求来讲,网页上需要放置哪些信息才能更好的实现网站的诉求.

越简单越丰富——极简网页设计视觉呈现技巧

- 阿德 - 腾讯CDC
  如何让杂乱又咄咄逼人的网页变得轻薄简洁而美观,又需保留完整功能、同时很好的区分出重点模块. 这往往是让设计师困扰纠结之源;如何更好的将多余的元素、色彩、形状和纹理剔除,保留重点并梳理清晰的视觉流动方向.   如果一个页面有太多的元素,用户将迷惑于去看哪里或误解每个元素的优先级. 优秀的设计师需要用设计语言将焦点正好引导到正确的内容上,正如提到的,极简的网页视觉能够将最重要的内容带到最前面并为用户避免分散注意力,比如,在一个黑白设计上的任何色斑,都会引起用户的注意力,色彩本身也将成为焦点,这便成为我们即将要展开探讨的小小话题.

Android核心功能

- - 技术改变世界 创新驱动中国 - 《程序员》官网
Android功能模块的概况,就像看Android的“个人简历”一样,帮助我们对它的能力有整体上的认识,进而在应用开发之前可以更好地评估技术上的可能性和风险性. 每个Android开发者都会关心Android到底能够打造怎样的用户界面(User Interface,UI). Android界面框架中最有特色的部分是资源(Resource)和布局(Layout)体系,通过完善的控件库和简明的接口设计,开发者可以尽快搭建自己需要的界面.

matplotlib核心剖析

- - 博客园_首页
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明. matplotlib是基于Python语言的开源项目,旨在为Python提供一个数据绘图包. 我将在这篇文章中介绍matplotlib API的核心对象,并介绍如何使用这些对象来实现绘图.

视觉隐藏内容

- iVane - 进步博客
组内做的一个分享,主题是“视觉隐藏内容”,主要关注隐藏的方式、方法及每种方法对可访问性的影响,并着重分析了a & label元素的可访问性,介绍了使用clip来做视觉隐藏. 内容有点散,但主题明确,其他组的几个同事来要PPT,现在传至slideshare,错误之处,请指正.

视觉隐喻碎碎念

- - 互联网的那点事
在我们做界面设计时,如果使用用户熟悉的来自真实世界的物体的图案来作为界面元素,. 用户会比较容易地学会产品的使用,这种手法就是视觉隐喻(metaphoric). 隐喻范围可以从整个界面到工具栏上的一颗小按钮. 整个界面都用隐喻的设计方法,最典型的例子就是游戏,整个现实的场景搬到游戏里面,用户一看就知道,.

“后视觉设计”时代

- - 阿里巴巴(中国站)用户体验设计部博客
一直想透过某种方式,把自己对视觉设计的一些理解和看法梳理一番. 同时目前团队里的视觉设计师,大多有一些共同的苦恼、疑惑和对前景的不明晰. 希望我的这些理解和看法对大家有所启发,能让大家对自己所从事的职业有更深入的思考.  这是我在某设计师群里说的一句话,里面有一个多年从事运营视觉设计的同学,立马跳出来反驳,最后到了只差骂:“你才死了.

专注核心功能

- 小宇 - 互联网的那点事...
当我还小的时候,出了什么毛病都爱用风油精. 无论是虫叮蚊咬,晕车晕船还是感冒发烧,风油精都能派上用场. 因此当我颇为自豪的向我的小伙伴炫耀道“风油精什么都能治”的时候,他的一句“风油精什么都能治,什么都治不好”着实给我泼了一头冷水. 随着我逐渐长大,我遇到了更多“万能”的产品:能刮胡子能双卡双待能遥控电视的手机、能祛痘美白淡斑保湿去黑头的面膜、能交友能婚恋能看视频能做3D特效的网站等等.

rsync 的核心算法

- - 酷壳 - CoolShell.cn
rsync是unix/linux下同步文件的一个高效算法,它能同步更新两处计算机的文件与目录,并适当利用查找文件中的不同块以减少数据传输. rsync中一项与其他大部分类似程序或协定中所未见的重要特性是镜像是只对有变更的部分进行传送. rsync可拷贝/显示目录属性,以及拷贝文件,并可选择性的压缩以及递归拷贝.