您的地位: 首页 > 艺术设计 > 设计实际 > 网页核心内容对视觉表示的影响
回到列表 浅析平面与网页设计的差别性
 网页核心内容对视觉表示的影响

作者:飞鱼的声纳 时间: 2012-06-26 文档类型:协作网站供给 来自:飞鱼的声纳

“对信息的优化和提炼永久都是设计的第一步。”这是百度同盟用户体验中间Banner上的一句话。在本身做网页设计的过程当中,愈来愈对如许的概括有了亲身的领会和想法主意。固然,这句精华精辟的句子其实包含了异常多的内容,我小我认为,至少包含这四个方面:一、从网站的全部诉求来讲,网页上须要放置哪些信息才能更好的完成网站的诉求?哪些信息是须要保存的?而哪些信息是须要放置在其他页面乃至干脆舍弃掉落的?2、关于曾经肯定放置于页面的信息,若何更好的撰写文字、遴选图片才能达成功能性和视觉上美不雅的完美同一?3、辨别信息的重要程度,哪些是重要的,须要侧重表示的?而哪些是主要一些的信息?四、辨别出信息的主次后,在构造、色彩、尺寸上,即在视觉上若何更好的凹陷和表示?

这四个部分的每部分简直都有评论辩论不完的话题,那么在这篇文章中我只就第四个方面,也就是网页上核心内容和视觉表示的关系来梳理和概括一下本身在这方面的一些懂得,尽可能的将我所推敲到的内容都写出来,同时举一些详细的案例来解释我的不雅点,便于大年夜家更好地理解。

一、核心内容关于页面构造的影响

下图是一个供给WordPress网站扶植的公司,在它的主页上从上到下可以看到如许几部分信息:导航、Logo、标语、作品展示、选择我们的来由、接洽表单、日记列表、邮件订阅、Twitter信息和版权信息。个中的第一视觉无疑是公司的标语和作品展示,这就是此网站主页上的核心内容。由于作为一个网站扶植公司来讲,直不雅的让客户知道你是干甚么的?干的怎样样?应当是客户最想要懂得的内容。那么关于核心内容,在视觉上做了哪些推敲呢?

我们可以看到,在宣传标语上设计师给”wordpress”这个词应用了异常大年夜的文字尺寸,并且色彩上和其他文字差别开,应用了较深的灰色,强调本公司是扶植专门以wordpress为后台的网站。在宣传标语的下方的作品展示图的尺寸很大年夜,宽度达到了540像素,而全部的设计宽度是1000像素,在主页上如许大年夜尺寸的展示图可以或许异常清楚而直接的让客户看到作品的原貌,从而关于公司的制造水准有了一个直不雅的印象。而如许的大年夜尺寸的作品展示其实曾经模糊的决定了全部网站的构造。想想看,在屏幕的左上方区域摆放上一个宽540像素,高460像素的矩形以后,接上去的区域该放置哪些信息,其实就像是摆放积木一样,按照重要程度挨个放置就好了。固然这并不是是唯一的构造方法,然则不管何种构造方法,我们的想法主意都应当在功能性的推敲的范围内停止。所以创意我们可以有,然则要明白和天马行空的纯创意的差别。

580th_layout.jpg

假设下面的页面构造依然让人认为中规中矩的话,下面的一个酒店的主页的构造或许会让我们感到有些新意。可以看到,此设计的背景用了大年夜幅的食品图片,导航和主内容区只占到全部页面高度的三分之一,让背景的图片大年夜面积的出现出来,和下面的设计一样,如许构造的目标并不是纯真是为了别具一格或许是为了视觉上的美不雅,而是该酒店的特点或许就在于餐饮方面,所认为了对核心内容停止凹陷,在构造上做了照应的推敲。再下面的一张餐厅也在主视觉部分强调了美味的食品,但二者采取了完全不合的构造方法,固然各自有信息架构方面的独特推敲,然则也无妨将它们看作异样一种核心内容的两种不合的创意方法。

580th_hotel.jpg

th_01index4-580.png

2、核心内容关于色彩筹划的影响

Lofter是网易供给的轻博客办事,个中的信息类型重要有四类:即:图片、音乐、文字、视频。关于Lofer的模板设计,木偶同窗在《LOFTER轻博模板设计》一文中对重要展示图片的模板的有以下设计方面的推敲,”该模板平日是为了满足摄影用户,图片展示面积要够大年夜,够爽;模板首页一屏能看多图;背景要暗,突显以后图片;边框的设计让图片更凹陷,或让图片更精细。”经过过程分析和懂得此设计思路,我们可以或许发明,个中的图片展示面积要够大年夜,也就是我们下面提到的构造方面的推敲,而背景要暗等于我们这里要评论辩论的关于色彩筹划的影响。

从木偶同窗的完成作品中我们可以看到,按照设计思路做出来的灰色的背景沉着而低调,和白色的图片边框和背景构成鲜明的比较,而灰白的色彩筹划和色彩多变的图片不会抵触,不管图片怎样变更都能和灰色和白色百搭,所以黑色的图片在白色的背景和边框的映托下加倍抢眼,让照片如许重要的信息在视觉方面取得了充分的表达。

580th_lofter.jpg

别的的一个例子来自于韩国的搜刮引擎办事网站Naver。liuman0722在《高效的设计可视化》一文中针对Naver的设计写到”韩国有名门户/搜刮引擎网站Naver旗下的Naver Shopping,其产品定位即供给商品的搜刮办事,经过过程搜刮商品称号,可以按照商品种别列出简直韩国一切的大年夜型电子商务网站供给的该商品链接。所以在界面上,用强比较色彩凹陷搜刮功能和导航区(页面左上角的绿色区域)。经过过程视觉化引导,让用户专注于核心内容,聚焦用户视野的核心,在白色为主色彩的页面,视野会先看到强色彩的部分,所以也能够用强色彩来凹陷核心内容,让用户的视觉聚焦在那边。”

580th_color.png

一切的视觉设计都是环绕信息来做的,我们必须起首梳理好了信息的内容和构造,才能知道应当在哪里施以重墨,在哪里点到为止。反过去,很多的设计思路和想法主意可以说本身曾经暗含在信息中了,比如我们下面提到的构造和色彩筹划。只需提炼和优化好了信息,怎样来做其其实梳理信息的过程当中就逐步的了了了。

本文链接:http://kostschema.com/design/doc/2012/8781.asp 

出处:飞鱼的声纳
义务编辑:bluehearts

相干文章 更多相干链接
设计方舟第一站之细节
浅谈网页设计中的色彩实际
栅格体系延续美学
再设计Redesign
关于边框和底色的那一些大事(一)
作者文章
强质感高光风格网页表示手段总结
热点搜刮:CSS Fireworks 设计比赛 网页制造 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大年夜福“敬•天然”设计大年夜赛开启
国际体验设计大年夜会7月将在京举办
中国国防科技信息中间标记征集
云计算若何让安然成绩可控
云计算是多半企业唯一拥抱互联网的机会
阿里行云
云手机年关巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网不雅"
1499元买真八核 云OS双蛋大年夜促
首届COCO桌面手机主题设计大年夜赛
栏目最新 栏目最新列表
国外创意名片设计观赏
情浸染界面
线下项目任务流程(归结篇)
线下项目任务流程(分析篇)
繁复而不简单-Practise平面设计
培养用户的应用习气
优良名片设计
专题头图的机密兵器
别让UED忽悠你(2):若干钱一斤
别让UED忽悠你(1):生成的抵触
分享按钮

蓝色幻想版权申明:除部分特别声明不要转载,或许授权我站独家播发的文章外,大年夜家可以自在转载我站点的原创文章,但原作者和来自我站的链接必须保存(非我站原创的,按照本来自一节,自行链接)。文章版权归我站和作者共有。

转载请求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不克不及抹去我站点水印。

特别留意:本站所供给的摄影照片,插画,设计作品,如需应用,请与原作者接洽,版权归原作者一切,文章如有侵犯作者版权,请与我们接洽,我们将急速删除修改。

您的评论
用户名:  口令:
解释:输入精确的用户名和暗码才能参与评论。假设您不是本站会员,你可以注册 为本站会员。
留意:文章中的链接、内容等须要修改的缺点,请用申报缺点,以利文档及时修改。
不评分 1 2 3 4 5
留意:请不要在评论中含与内容有关的告白链接,背者封ID
请您留意:
·不良评论请用申报管理员,以利管理员及时删除。
·尊敬网上品德,遵守中华人平易近共和国的各项有关司法律例
·承当一切因您的行动而直接或直接招致的平易近事或刑事司法义务
·本站评论管理人员有权保存或删除其管辖评论中的随便任性内容
·您在本站发表的作品,本站有权在网站内转载或援用
·参与本评论即注解您曾经浏览并接收上述条目
推荐文档 | 打印文档 | 评论文档 | 申报缺点  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大年夜家看的色彩书1》
《跟我去喷鼻港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开辟宝典》
《赢在设计》
锋利开辟—jQuery内核详解与实际
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2