浅析网页界面设计——首页设计

杨科宇曾发表过一篇文章《浅析网页界面设计——首页设计》,文中为我们分享了如何进行首页的界面设计。现转载于此,供大家借鉴学习。全文如下:

首页设计,需开宗明义突出主题

开宗明义,无论是对于一篇文章、一场会议或一部专题片,还是对于一个网站来说,都是必不可少的。那么能为一个网站开宗明义的地方(标签)就是Title(标题)和Description(描述、副标题),而能够为Title和Description提供进一步诠释的就是网站的首页。

展示哪些信息

页面的重要性是建立在它所呈现信息的基础之上,反过来说,页面要向用户展示哪些信息是决定其重要与否的首要指标。在网站页面中,网站标题、副标题、菜单(狭义上的导航,请参看《WEB导航设计》)、用户登录信息、关于、版权信息这几项是网站的基础信息,是一个网站身份的象征,承载着向用户表明网站立场、提供何种产品或劳务、网站自我介绍、如何联系网站的重要使命,在设计页面时,这些信息必不可少。

而网站的首页,除了需要显示以上这些基础信息之外,最重要的是还承担着网站转化率的重任,这也是所有类型的网站首页的最重要任务。如何让网站首页完成这项重要的任务呢?我的理解是把网站所提供的产品或劳务通过版式设计、文案设计、色彩设计之后,展示在首页适当的位置,并使其不受其它信息元素干扰,甚至使其它元素为它(产品或劳务)服务。

突出主题思想

知道了首页需要展示哪些信息,知道了信息之间的权重,如何把信息呈现得更符合信息本身,却不是一件容易的事,需要时间的磨练与经验的积累。就设计本身而言,是一件感性的事,不像数学公式,它缺乏严谨的理论做为指导,所以在工作中,经常出现与Boss、同事意见相左的情况。我个人的经验是在非重要信息的设计上使其具有普适性,在重要信息的设计上突出设计的主题思想,在与Boss、同事讨论时,尽量把讨论的重点放在主题思想的呈现方式与其对转化率(或市场目标)的作用之上。你可以说这是功利的设计,没错,所有的设计都是以商业利润为最终目的。

如何突出

在版式设计上,要求把信息分门别类,让用户在扫描(只为扫描而设计,请参考《Don’t Make Me Think》)页面时保证视觉流的流畅性,在短时间内(3-5秒)发现首页包函哪些区域(如菜单、广告、注册、个人信息、链接、按钮等),方便用户在第一时间内做出选择。在设计过程中,建议严格遵循四个排版的原则,即:对比、对齐、重复和亲密性(请参看《写给大家看的设计书》)。如yahoo.com、renren.com、cnet.com的首页设计。

在文案设计上,副标题的文案设计,要求文案简洁明了、开宗明义,语言、句式的表达需符合网站的整体调性。如人人网的“因为真实,所以精彩”,阿里巴巴的“全求最大的采购批发市场”,babytree.com的“爱、交流、成长”等等。在产品或劳务宣传的文案设计上,要求简短、易懂、描述要完整,语言要情感丰富,具有扇动性,吸引用户注意力,最终促使用户付出行动,这就达到了目的(转化率或点击率)。显示的要素通常包括谁/什么、有多少、何时、何地、如何做、为什么这六大要素(请参看《餐巾纸的背面》)。如人人网、开心网首页的主题表现形式。这些应该是文案设计的工作,但现状是Boss不会专门聘用Copywriter,网页中的文案一般都是由交互设计师来完成,而小公司是由美工来完成。所以,了解一些文案设计知识是很有必要的。

在色彩的设计上,即要符合网站整体特征,又要适合所渲染信息的特征。一般采用同色系或相邻色系对网站基础信息进行渲染,对于突现主题的信息采用基础信息色彩的补色或对比色进行渲染,从视觉上体现信息的权重与逻辑关系,达到突出重要、弱化次要地目的。

这是什么

西瓜、Thindpad、iPhone、百事可乐、著名作家、二战。当你看到这些名词时,脑海里不由的浮现出它们的特征。比如你看到“著名作家”时,可能想到了鲁迅,而英国人看到“著名作家”时,很可能想到的是莎士比亚;再比如看到“二战”这个名词,你可能想到了“狗日的”,而犹太人想到的可能是“希特勒”。这与用户的知识背景有很大的关系。在进行网站页面设计时,用户知识背景也必须考虑其中,我曾见过一领导在与同事们讨论页面设计时,在白板上画分类列表,一直是把它画在左侧,并以列表式呈现。这个现象足以说明,他所接触到的分类列表可能多数呈现在页面左侧,所以他无意识的也认为分类列表应该在左侧,换句话说,放在右侧或其它地方,就不是分类列表了。或许我定义得有些极端,但这个现象确实能反应出知识背景对用户习惯的影响是不可估量的。

所以,在设计时,网页界面应该设计得要像网页界面,软件界面设计得要像软件界面,游戏界面设计得要像游戏界面,广告设计的要像广告。千万不要为了得到视觉上的创新,把界面设计成了四不像。或许这种观点显得过于保守,但有利于把风险降到最低。其实网站最吸引用户的地方是内容的质量,而并不是花哨、绚丽的视觉设计。视觉设计的主要目的在于采用合适的视觉元素表现出内容的权重与逻辑,属于配角。在小品《我是主角》中,也很明确的突出了配角与主角应该各自扮演好自已的角色,作为配角的视觉设计不能抢了主角(内容)的戏。

不要纸上谈兵

赵括纸上谈兵害人害已。理论是可以通过学习得到,而经验只能在实践中获取。眼下最近正参与一个项目的策划,打算以它为标本,对网页界面设计相关的事项做进一步的讨论。

原文链接:http://www.yangkeyu.com/archives/273

 

时间: 2024-08-30 11:38:08

浅析网页界面设计——首页设计的相关文章

浅析网页设计中的“马云式”风格

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 马云作为中国的电子商务教父,说话形象生动有感染力很容易让人记住,做事稳健迅速风格显著,甚至连长相也很有特点,非常容易被别人记住.旗下的阿里巴巴网站设计风格也是非常有特点的.我称之为"马云式"风格.如何让一个不太熟悉网页的人迅速知道你这张网页要表达什么东西,这非常重要.马云在一次访谈中自称自己只会发邮件,打字速度也很慢,也不

网页界面交互设计:系统的用户体验的衡量标准

文章描述:精益用户体验(UX):摆脱只注重结果的工作(留意互动机构的区别之处). By Jeff Gothelf from SmashingMagazine.com翻译&编辑:DamnDigital, (转载请说明翻译来源, 尊重我们的努力) 网页(以及交互设计,界面设计,等)传统上是基于可交付的形式来执行.框架.网站地图.流程图.内容清单.分类系统.原型和规范文档(又称"The Spec"),帮助定义网站在其起步阶段的执行.这些结果构成了一个系统的用户体验的衡量标准. 随着时

网页界面设计:商务Web应用程序设计流程和准则

文章描述:商务web应用程序的界面设计.   在smashingmagazine上看到这篇文章,讲的是Web应用程序设计流程和准则等方面,也许对大家有所帮助.翻译比较仓促,错误地方请多指教,查看原文点这里. 商务Web应用程序的界面设计 商务Web应用程序的设计常常被人们所忽视.我看到许多程序,它们既不符合商业目标,也不满足用户需求,它们有很差的用户体验,并造成了商业利润的损失.更夸张的是,有些设计师根本没有参与整个程序的开发流程,而是把全部职责都推给了开发人员. 对于擅长前端和后台技术的工程师

网页设计技巧:能影响观众的网站首页设计

我想你应该知道网站主页对整个网站的来说是非常重要的,哪么我们如果让它能吸引你的观众(访问用户)?这就取决于你的设计了,网站首页一般包含:导 航菜单.搜索栏.网站LOGO.目录以及其它内容,还有就是能一眼看到你网站就知道这是做什么的.我们除了让首页设计得有吸引力外,还得使它有其它功能或 是一些引导性信息.下面我们将告诉你能影响观众的网站首页设计的10个要点. 1. 让它能吸引访客 摘自: Art 4 Web 首先,网站首页就像是一本书的封面或是杂志封面,它是用户浏览网站时第一眼看到的,因此,你的首

深色调网页界面设计注意事项

深色调的网站设计是比较流行的,它能营造出简洁.富有创造性的效果. 它能满足一些客户对网页设计风格的要求.然而,它并不能适用于每一个客户对网站设计风格的要求,设计师应根据实际情况而定. 尽管深色调的设计风格能做到引人注目的效果,但很多设计师不知道如果有效的使用它来打动.吸引浏览者. 深色调网页设计经常出现的问题是不易读.没有吸引力.很少打破传统的设计模式. 这片文章,我们将讨论一些如何让你的下一个深色调网页设计更能吸引.打动广大浏览者的方法和技巧,真正做到让你的设计表达你的创意. 最近的http:

网页设计Tips:能影响观众的网站首页设计

中介交易 SEO诊断 淘宝客 云主机 技术大厅 我想你应该知道网站主页对整个网站的来说是非常重要的,哪么我们如果让它能吸引你的观众(访问用户)?这就取决于你的设计了,网站首页一般包含:导航菜单.搜索栏.网站LOGO.目录以及其它内容,还有就是能一眼看到你网站就知道这是做什么的.我们除了让首页设计得有吸引力外,还得使它有其它功能或是一些引导性信息.下面我们将告诉你能影响观众的网站首页设计的10个要点. 1. 让它能吸引访客 摘自: Art 4 Web 首先,网站首页就像是一本书的封面或是杂志封面,

PhotoShop制作win7移动导航网页界面设计教程

用PhotoShop制作window7移动导航网页界面效果,简洁大方的效果,喜欢的同学可以试着做一下! photoshop教程效果图: 1.创建一个新的文档600 × 400像素 2.前景色为#1592d7和背景颜色为#136da2.选择渐变工具,径向渐变. 3.选择自定义形状 4.画出如图路径 5.新建一层,前景色设置为白色,选择钢笔工具,然后在路径上面右键,选择填充路径 6.右键路径,选择删除路径 分类: PS入门教程

支付宝和财付通的网站首页设计不同之处

对于网页设计师一定要和规划.需求.交互充分地沟通,要清楚设计目的,清楚内容的组成及理由,读透并理解整个规划的思想精髓,在具体设计的时候,才能更好更直接有效地把内容传递给目标用户.因此规划(需求.交互)一定要理解并找准目标用户群体的心理需求,框架图不仅仅是草图,要方方面面更加完善的考虑,而不是一边做规划一些做框架草图. 为了说明上面的规划与设计,下面以支付宝和财付通的首页对比来做说明: 支付宝和财付通的目标诉求及功能需求是基本一致的,我们来看看他们的首页设计,分别有什么不同? 初步的整体感觉:财富

设计理论:网站首页设计需要突出主题思想

网页制作Webjx文章简介:设计网站首页的技巧总结. 首页设计,需开宗明义突出主题 开宗明义,无论是对于一篇文章.一场会议或一部专题片,还是对于一个网站来说,都是必不可少的.那么能为一个网站开宗明义的地方(标签)就是Title(标题)和Description(描述.副标题),而能够为Title和 Description提供进一步诠释的就是网站的首页. 展示哪些信息 页面的重要性是建立在它所呈现信息的基础之上,反过来说,页面要向用户展示哪些信息是决定其重要与否的首要指标.在网站页面中,网站标题.副