当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 经验分享:关于网页布局排版的流程问题

HTML/XHTML教程
CSS基础:设计网页常用规范详解
CSS教程:十步学会用css建站
CSS基础:24条网页布局开发小技巧
CSS教程:在网页布局中简单实现垂直居中的办法
css基础教程:颜色和文本属性的控制
专家总结:网页设计师必须遵守的十条守则
html技巧:超级链接a的提示和打开方式
css教程:学习背景图像属性background
例说网页Semantics:Html/Xhtml是否真正符合标准
IE7与web标准设计系列教程:前言
IE7与web标准设计系列教程:更丰富的CSS选择符
IE7与web标准设计系列教程:修正引起页面布局混乱的祸首
web标准教程:IE6和IE7的共存
web标准:IE多版本共存的解决方案:IETester
CSS基础教程:认识CSS选择符
web标准:比较IE6与IE7,放纵的孩子与严厉的父亲
学好标准CSS的模型是否必须放弃IE?
CSS教程:如何处理有冲突的CSS规则
教你用html和css写出漂亮正规的Blog
CSS基础:如何避免table强迫症

HTML/XHTML教程 中的 经验分享:关于网页布局排版的流程问题


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-03-17   浏览: 133 ::
收藏到网摘: n/a

网络上形形色色的网站,网页布局排版各有差异(当然除了完全copy),但为何布局排版存在差异呢,不同布局排版的目的是什么呢?是否有什么依据可循呢?若有,这些被遵守的依据又是基于什么考虑的呢?

在项目经历过程中,经常看到这样的情形:

领导:我们要做一个…

负责人:好的。

负责人:你们每人设计*套效果图出来;

设计人员:好的…

 等到设计人员(指视觉设计人员,下同)把页面效果图设计好了之后,我们针对效果图进行讨论和筛选确定,以确定最终采用哪套设计方案,这个时候大家各抒己见,领导也根据自己看法对不同作品进行筛选,但这个过程中最经常出现的结果就是:每个方案各有不同,包括布局排版、配色方案、整体风格等,但每个作品都不尽人意之处,最后根据讨论结果确定下了一个方案并提供修改意见,项目进入开发阶段。

这个流程本身没什么问题,只要能保证大家选择的方案执行后能得到大家想要的结果即可,但可悲的是我们经常无法得到满意的结果,包括栏目设置缺乏考虑造成运营不善,页面布局不合理造成用户体验下降等等;出现这样问题原因在于:在这个流程中我们陷入了到底该选择哪套方案、陷入了对不同方案的对比甄别中,而我们却忘记了为什么需要这样的方案,我们最原始的需求和出发点是什么?

今天重点谈谈在这样流程中关于布局排版的问题。

 首先,网页排版布局不应该是设计人员为了美化页面而拼凑排列的,就像经常有视觉设计师说“这个地方看起来很空,我得找个*放上去..”一样,我认为:基于页面美化和丰富界面内容的网页布局排版都是不可取的,因此,布局排版体现的是一个网页中各个模块的重要程度和客户可能的关注重点,合理的布局排版应该且必须承担把《我们想要传达的信息》快速高效地提供给用户的重任。

 那么,网页布局排版的决定因素是什么?

1.  网页排版布局的内容来源于需求:网页中是要展示“新闻动态”、“供应信息”,还是要展示“招标投标”、“用户投票”这个要依据项目最原始的需求和出发点,这个页面要满足用户什么需求就要求他比较具备什么功能模块。

2.  网页排版布局的形式决定于模块的重要程度:一个页面存在多个功能模块,它们的展现形式应该如何,就要考虑各个模块的重要程度,重要信息、重要功能模块“靠上靠左”呈现,这是因为这些地方从位置上讲比较有吸引眼球的优势,要做到“突出重点”。

3.  网页排版布局必须首先尊重用户习惯:上面说了“网页排版布局的形式决定于模块的重要程度”但是不是重要的模块就必须“靠上靠左”呈现呢?

未必!

因为“靠上靠左”这是一个相对的概念,就是说要尽量做到重要的信息放在客户容易发现的位置上,但不同用户使用习惯上是有差异的,这就要求我们要在尊重用户习惯基础上来做好页面排版布局,就拿中文网站页面和英文网站页面来说,一个页面里面要呈现的功能模块相同(模块重要性也一样),但这个时候除了遵守“网页排版布局的形式决定于模块的重要程度”外,应该首先考虑中文用户和英文用户浏览习惯上的差异进行有差别的排版布局了。

 一句话:网页布局排版不能太随意!

建议:在产品开发过程中尽量规范产品开发流程,网页布局排版应该交给交互设计人员来做,而不是视觉设计人员,如果视觉设计人员就是交互设计人员,那也要多加思量该网页布局排版的依据。

本文来源:http://www.ebpage.cn/index.php/archives/273