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

HTML/XHTML教程
XHTML中不再使用HTML中的一些废弃元素
语义化的HTML结构怎么理解
Web 标准学习 理解结构和表现相分离
html5 标签
HTML5 新事件 小结
HTML5 b和i标记将被赋予真正的语义
HTML是网页制作者必须要学习掌握的
HTML DOCTYPE的缩写
Readonly和Disabled的区别
16进制颜色代码(完全)
H标记要在网页制作中合理使用
abbr标记和acronym标记
知名浏览器对DOCTYPE模式的选择机制
用标准dl,dt,dd标签抛弃table列表
html 标签ID可以是变量
iframe 自适应大小实现代码
HTML5 解析规则分析
HTML减肥 精简HTML标记制作网页
HTML5 File API改善网页上传功能
HTML 5 Reset Stylesheet

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


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

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

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

领导:我们要做一个…

负责人:好的。

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

设计人员:好的…

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

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

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

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

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

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

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

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

未必!

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

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

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

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