页面布局

2024-07-11

页面布局（共4篇）

页面布局篇1

摘要：衡量一个商务网站是否成功不仅仅在于访问量, 还在于它所带来的相关效益, 如企业知名度的提升和实际购买行为的增加, 这就对商务网站的设计提出了要求, 本文通过大量案例, 对商务网站设计中的色彩定位与页面布局进行了分析。

关键词：商务网站,色彩,布局

目前, SEO (搜索引擎优化) 已成为众多商务网站提高点击率的一个重要手段, 但SEO主要是从搜索引擎的角度来优化页面, 着眼于关键字在页面中的位置、页面内容的简练等, 而忽略了消费者的偏好和使用习惯, 导致不少网站虽然提高了访问量, 但提高的访问量并没有转化成访问者的购买行为, 甚至不少浏览者进入页面后, 几乎没有停留便关闭网页, 这就要在SEO的基础之上, 通过页面色彩与布局的合理设置, 做到不但能把人“请进来”, 而且能“留下来”。

一.商务网站色彩定位

在人的日常生活中, 视觉提供的信息量是相当大的, 大约为所有感官所能提供信息量之和的80%, 这就决定了一个成功的商务网站在色彩的设置上必须做到:第一要与网站主题一致, 第二要能和谐统一并且吸引人, 从而对网站的主、辅色调的设置提出了要求。色调是指一幅作品色彩外观的基本倾向, 在明度、纯度、色相这三要素中, 某种因素起主导作用, 我们就称之为某种色调。本文主要从主页面的色相的运用来进行阐述。

1、主色调。

网站的主色调是网站主题的体现, 是页面色彩的主要色调、总趋势, 其他配色不能超过该主要色调的视觉面积, 往往用于网页的底色和主要图案。不同的商务网站所适用的主色调是有区别的, 可以从企业形象、产品性质、消费者特征等方面来考虑。

首先, 从企业形象的角度来选择色调是首先考虑的重要方面。主色调中色相选蓝色的大企业居多, 因为蓝色是最冷的颜色, 突出了企业冷静、睿智、不断进取的形象。如微软公司、中国移动通信集团、苏宁电器股份有限公司均选择了蓝色。金融类企业的网站偏向于选择冷色系, 以期带给浏览者稳健强大的感觉。如中国银行、中国建设银行使用了蓝色, 中国农业银行使用淡绿。旅游类网站在选择主色调的时候也往往将目光投向绿色和蓝色, 因为绿色是和平色, 偏向自然美, 蓝色是天空和海洋的颜色, 容易激发人向往自然, 追求宁静的情绪。如南京旅游网、涂牛旅游网采用了绿色, 旅游环球网、携程旅行网采用了蓝色。

其次, 产品的性质也是决定网站主色调的重要因素, 汽车、电脑、电视、音响、仪器等具有金属成分且有相当科技含量的产品, 所选用的色彩往往是蓝色、黑色、白色、灰色。因为蓝色沉稳的特性, 具有理智, 准确的意象, 如联想电脑中国网站采用了淡蓝色;黑色具有高贵、稳重、科技的意象, 如东芝液晶电视-中国官方网站选用了黑色, 以突出其“领先、创新”的企业理念;白色具有高级、科技的意象, 如BMW中国官方网站采用了白色;灰色具有柔和、高雅的意象, 而且属于中间性格, 男女皆能接受, 所以灰色也是永远流行的主要颜色, 如奔驰中国官网的主页从左到右使用了逐渐淡化的灰色, 柔和的感觉暗暗打动浏览者的心, 尽显其Mercedes—给车主带来幸福的寓意。食品类网站通常会选用暖色调中的橙色、红色、绿色。橙色是欢快活泼的光辉色彩, 是暖色系中最温暖的色, 它使人联想到金色的秋天, 丰硕的果实, 是一种富足、快乐而幸福的颜色, 同时橙色也是最使人产生食欲的颜色, 所有橙色通常是食品类网站的首选, 如康维多奶粉中国官网就使用了橙色, 给浏览者 (多为新生儿妈妈) 温馨幸福的感觉;红色是最引人注目的颜色, 是热情、活力、能量的象征, 对于宣传着力于带来活力或温暖的食品可考虑采用红色, 如可口可乐 (中国) 官方活动网站, 打开主页面, 通篇是跳脱的大红色, 所带来的色彩冲击与它“活力永远是可口可乐”的宣传口号非常贴切;绿色所传达的清爽, 理想, 希望, 生长的意象, 往往为保健类食品网站所青睐, 如乐力官方商城就采用了绿色。

再次, 消费者的特征也是不可忽略的因素。男性网多使用冷色作为主色调, 如怒剑网、男人帮都采用了蓝色。女性网站使用粉红色的较多, 如凤网、魅网在线。紫色也多为女性网站所用, 如。儿童或亲子类网站多用绿色、橙色, 给人生机蓬勃、温馨的感觉, 如中国儿童教育网采用橙色和绿色, 宝宝妈妈网采用绿色。

2、辅色调。

定义了主色调后, 需要在“总体协调, 局部对比, 突出特点”的原则上确定辅色调。网站的辅色调是仅次于主色调的视觉面积的辅助色, 用来烘托主色调、支持主色调, 起到增强主色调的感染力, 使页面更加和谐生动的效果。

用同类色。一般指单一色相系列的颜色, 指通过调整主色调的透明度或者饱和度 (通俗些而言就是将色彩变淡或则加深) , 产生新的色彩, 用于网页。这样的页面看起来色彩统一, 有层次感。如海尔的外文网站, 主色调是浅蓝色, 而辅色调则类颜色稍深的湖蓝色。这种颜色的搭配给人协调感, 产生了微妙的韵律美。

以色相环来划分, 奥斯特瓦尔德颜色系统的基本色相为黄、橙、红、紫、蓝、蓝绿、绿、黄绿8个主要色相, 每个基本色相又分为3个部分, 组成24个分割的色相环。24色相环中相距45度, 或彼此相隔二三个数位的两种色彩, 为同类色关系, 简单的说就是用一个感觉的色彩, 例如淡黄和淡绿色、红和橙色。如拉手网, 主色调为淡红色, 辅色调采用橙色, 主辅色调极为协调, 给人温馨的感觉。

用临近色。色相环中相距90度, 或相隔五六个数位的两色, 为邻近色关系。色调感觉调和又避免单调, 如蓝与紫、黄和绿。

用对比色。色相环中相距135度或相隔八九个数位的两色, 为对比色关系。属于中强对比效果的色组。如蓝色和黄色, 整个页面色彩丰富但不花稍。如薄荷女人网, 主色调为淡红色, 辅色调为绿色, 在突出女性柔美特点的同时, 增强了网站色彩的鲜明感, 也和网站主题相贴切。

用补色。色相环中相隔十二个数位后相距180度的两色, 为补色关系。补色关系的色组, 是对比最强的色组, 给人以强烈的视觉冲击, 如红和绿、黄和紫。使用补色比较容易出彩, 但在配色时要注意通过主辅色调面积的大小, 或以分散形态的方式来缓和过于激烈的对比。如卡卡乐园网, 以红色为主色调, 绿色为辅色调, 红底色衬着蜿蜒分块的绿色, 给人既生动又和谐的感觉。

用黑色。大部分彩色配黑色都会给人留下很深的印象。如EELE中国, 以玫红色为主色调, 以黑色为辅色调, 给人浪漫、时尚的感觉冲击。

除了主、辅色之外, 还有点睛色、背景色的运用, 以及纯度明度的合理安排, 这些都是商务网站设计必须要考虑的。总之, 在商务网站色彩设计时要注意如下几点:不要片面追求出彩, 色彩的选择始终要以适合于读者群为关键, 如视觉刺激较强烈的页面会给年轻人留下深刻的印象, 从而吸引进一步浏览, 但对年长的浏览者却会形成反面效果;网页归根结底是为了传达讯息, 因此色彩的使用要适合阅读, 在阅读的部分要使用对比色;不要使用过多的颜色, 除了黑与白之外, 页面色彩总类不要超过三种。

二、商务网站布局安排

1、主页面。

主页面是兼具网站的封面及目录功能, 是决定网站风格和吸引浏览者的重要页面, 主页面的布局安排在网站设计中具有举足轻重的作用。

骨骼型。骨骼型是最常见的网页布局, 是一种规范化的、理性的分割方法, 类似于报刊的版式。主要分为竖向通栏、双栏、三栏和横向的通栏、双栏、三栏等。一般以竖向分栏为多。这种版式给人以和谐、理性的美。“T”型、“同”型、“回”型等布局都属于骨骼型布局。通栏结构通常适用于信息少、图片多, 以宣传产品和企业形象为目的的网页, 如海尔集团、联想集团网站。二分栏结构一般情况下都是左窄右宽, 在右侧的宽栏中嵌入多个横向的分栏。这种结构效果简练、大气, 个性鲜明, 各功能区域分割清晰, 一目了然, 能够放置较多信息且便于浏览者阅读, 是着重在主页进行产品展示的商务网站进行网页布局的首选。如当当购网、淘宝数码网。三分栏结构在商务网站中最为普遍, 其特点是结构清晰、明确, 通常适合于信息量大、更新速度快的商务网站和综合网站。其结构通常表现为页面顶部为横条网站标志+广告条+导航栏, 下面竖向分为三栏, 若干横栏, 可以放置不同的内容的链接, 如新浪, 第一块竖向三栏从左到右分别为广告、视频、新闻。

自由型。这种结构的随意性比较大, 通过不同形态图形或曲线的运用, 巧妙地安排文字, 达到提升美感、给浏览者较强的视觉冲击的效果, 这种类型的页面往往用在体现创作者的创意, 使浏览者产生共鸣, 但文字通常较少。如奥黛莉网站, 洁白的界面上绽放着淡雅的花, 页面的焦点是花中一美丽女性, 围绕着花简单放置着相关链接。带给浏览者无尽的美感和遐想。

Flash型:这种布局将Flash作为主体内容, 文字说明或栏目条被分布在不显眼的位置, 这种设计较多运用在时尚类网站或网站用来推广相关产品。如雅诗兰黛网站, 深蓝色的底色上演绎着异国风味的flash, 尽显优雅时尚。

Pop (海报型) 型:指页面布局就像一宣传海报, 如薇姿网站, 进入主页, 映入眼帘便是如海报般的一幅画面, 用来推介某一款产品, 清新的界面、明确的主题较易获得访问者的认同感, 并激起进一步浏览下去的欲望。

2、其它页面。

其它页面分为两种, 一种往往是二级页面, 对应于主页面上相应的频道, 内容比较丰富, 需要放置大量的链接和图片, 这种页面布局多考虑采取三栏式;另外一种页面用来放置具体的内容, 页面布局多采用“匡”型结构, 旨在给主内容区更多空间。这种布局上面是标题及广告横幅, 接下来的左侧/右侧是一窄列链接等, 右列/左列是很宽的正文, 下面放置一些的辅助信息, 如相关新闻、留言等。

网页一定要有统一感, 即访问者在浏览同一网站的页面时, 认可所有的页面属于同一网站, 这需要网站所有页面有一致的风格, 也可说网站的每一页面都要遵循网站CI形象设计。

三、结束语

商务网站设计需要从定位、色彩、布局、模块、内容等方面综合考虑, 每一个方面都会关系到网站的成败, 在进行网站设计时, 一定要以商务的眼光, 从企业、消费者的角度出发, 在细节上下功夫, 只有这样, 网站才能在电子商务的大潮中站住脚, 无论是在提升企业知名度, 还是在开拓市场方面起到积极的作用。

参考文献

[1]、黎芳.网页设计与配色实例分析[M].北京:兵器工业出版社, 2006

[2]、李玲玲.关于“网页布局”方式的研究[J]职业技术学院学报.2011 (2)

[3]、张统宣, 牛渭敏.门户网站网页界面色彩设计[J], 2010 (4)

页面布局篇2

一、首先要树立意识：遵循常规，尊重用户

要打造一个优秀的网站，必须要正视这个现实，也就意味着要做到：遵循网站常规、尊重用户习惯。

所谓网站常规，也就是在长久的磨合和锤炼以来，网站所沉淀下来的惯用做法，用户已习以为常不以为意，就像吃饭喝水一样自然。这种常规，遵守了的利益不明显，打破它的代价却会有点大——用户到你的网站上找不到自己想找的东西，拔脚走人。

网站常规如下：

显而易见的菜单栏，贯穿页面顶部

网站徽标位于所有页面左上角

搜索输入框位于所有页面右上角

功能导航位于页面顶部或最下面，比主导航略小或视觉感觉略弱。

优秀页面的成功要点：

简洁：(1)控制内容数量，(2)控制风格种类，风格一致便于识别：信息较多时要呈现一致的格式。(3)善用空白区、内容框和色彩有助于用户看到，

要勾划出这些区域，不要让内容太杂乱。注意一点，色彩会提升彩色框中内容的重要性。所以，要善用，不能滥用。

清晰：(1)标题让人一目了然：每个版块都要有标题。(2)清晰的图片引人注目，模糊的图片会被无视。

二、然后从分析自己、分配版面开始

好网站的第一步：

明确优先级：明确用户来网站的任务Top10，明确各内容模块的优先级

合理分配版面，突显最重要元素：划分页面的优势区，把最高优势区分给最高优先级，一一对应

然后就是遵循以上说到的“简洁”和“清晰”原则。

有时也难以避免失败(用户找不到要找的东西、页面主要图片成了用户回避的对象)，失败通常有如下原因：

低级错误是网站方面的设计失败：优势错配以至于给用户完成任务碍事了;术语不清晰以至于用户视而不见

有些问题是用户方面的原因：广告盲(用户已习惯忽视貌似广告的一切东西);用户类型(搜索型还是浏览型);惯性行为(用户个人特点)

三、具体研究，对症下药

对具体网站的眼动研究

设定任务后，对每个任务可采集的定量数据

c 任务完成时间

a 用户体验评级

b 任务完成成功率

c 任务完成时间

d 错误路径

研究方法

a和b可以结合起来评定网站是否基本可用。再加上c可以说明网站是否高效好用。d可以解释c为何冗长。发现d问题以后也可就出错点进行轨迹图分析。

研究要点

对被访者的仔细观察

对其视线转换的清晰解读

对网页布局的全面了解

浅析网页设计中的页面布局篇3

页面布局也称页面构图设计,其主要任务是将WEB页面合理分割成用于安排文字、图像等各种屏幕元素的区间。一个精美的网页,不仅体现在页面内容的精彩,还要有效地利用页面的有效显示空间,创造出合理的布局模式。

随着网页制作技术和浏览者需求的提高,访问者不再愿意看到只注重内容的站点,设计者只有将网页内容和色彩通过合理布局、协调搭配,将网页中具有闪光性的内容加以强化,这样既可以将设计者的思路淋漓尽致的表达出来,同时也可以留住太过“挑剔”的访问者。由此可见,页面的布局在网页设计中起着举足轻重的作用,那么如何才能使页面布局合理分配?这恰恰是网页设计者感到最棘手的问题,本文对网页设计的布局进行简要分析。

1 网页布局类型

在进行网页布局之前,首先要明确页面布局设计成何种类型,常见的网页布局类型有“国”字型布局、“厂”字型布局、“框架”型布局、“封面”型布局、“flash”型布局,下面分别论述。

(2)“厂”字型布局。也称拐角型,指页面顶部为横条网站标志+广告条,下方左面为主菜单,右面显示内容的布局,因为菜单条背景较深,整体效果类似英文字母“T”,所以又称之为“T”形布局。这是网页设计中用的最广泛的一种布局方式。这种布局的优点是页面结构清晰,主次分明,是初学者最容易上手的布局方法。缺点是规矩呆板,如果细节色彩上不注意,很容易让人“看之无味”。

(3)“框架”型布局。左右框架型:这是一种左右分为两页的框架结构,一般左面是导航链接,有时最上面会有一个小的标题或标志,右面是正文。我们见到的大部分的大型论坛都是这种结构的,有一些企业网站也喜欢采用。这种类型结构非常清晰,一目了然。

上下框架型:与上面类似,区别仅仅在于它是把页面分为上下两页的框架。

综合框架型:上面两种结构的组合,相对复杂的一种框架结构,较为常见的是类似于“拐角型”布局,只是采用了框架结构。

几种框架结构的一个共同特点就是浏览方便,速度快,但结构变化不灵活。

(4)封面型布局。这种类型基本上是出现在一些网站的首页,大部分为一些精美的平面设计结合一些小的动画,放上几个简单的链接或者仅是一个“进入”的链接。这种类型大部分出现在企业网站和个人主页,如果处理得好,会给人带来赏心悦目的感觉。优点显而易见,漂亮吸引人。缺点是速度慢,作为版面布局还是值得借鉴的。

(5)Flash型布局。其实这与封面型结构是类似的,只是这种类型采用了目前非常流行的Flash,与封面型不同的是,由于Flash强大的功能,页面所表达的信息更丰富,如果其视觉效果及听觉效果处理得当,绝不亚于传统的多媒体。

综上所述,在进行网页布局时,应根据具体情况选取不同的布局结构,如果内容比较多,可以考虑用“国”字型;页面内容不太多或者初学者,可以考虑用“厂”字型布局;如果做一个时尚类站点,Flash型和封面型是首选。在实际应用中也可以把几种布局结合在一起并稍做变化,即变化型布局。

2 网页布局技术

目前,网页设计的软件大多使用Dreamweaver,在使用Dreamweaver设计网页时,一般用于页面布局技术的有以下几种。

(1)表格布局。早期的网站很多都是采用表格布局,其实表格主要是用来组织和显示数据的,而不是承载网页布局的重任,优势在于可以有效地定位网页中不同的元素,而又不用担心不同元素之间的影响。表格布局直观,设置方便,初学者容易上手,使用表格的一个有利方面是众多浏览器全都支持。缺点是table会造成页面代码的可读性非常差,在多重嵌套的时候不仅代码比较乱,而且页面下载速度受到影响,不符合W3C网页标准,网站不便于维护,现在大中型网站一般不用表格来布局。

(2)框架布局。框架可以非常方便地完成网页的导航工作,可以把网页划分为若干个区域,每个区域可以分别显示不同的网页内容,而且不存在相互干扰的问题。如果能有效的运用框架,能使网页更加整洁、清晰。同时每个框架内容的改变不会刷新其他框架的内容,从而节约了网络数据流量,减少了页面下载次数,提高网页速度。

使用单独的框架只能完成简单的页面布局,通过框架互相嵌套使用,可以实现多方向的区域分割能力,但每个网页所使用的框架数量最好不要超过3到5个,采用过多的框架会增加下载网页所需的时间,影响网页的浏览速度,对于内容多、布局复杂的网站不宜采用框架布局,且框架结构的页面兼容性不好。

(3)DIV+CSS布局。随着网络技术的不断发展,早期的表格、框架布局方式越来越不能适应新的要求。新的web标准逐渐普及,一种基于DIV+CSS的新型网页布局方式开始流行,一些大型门户网站都已经完成了网站重构。

DIV是HTML中的一个元素,是容器性质的,DIV元素是用来为HTML文档内大块的内容提供结构和背景的,不用CSS技术,可以有效地页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。简单地说,DIV用于搭建网站结构(框架)、CSS用于创建网站表现(样式/美化)。

DIV+CSS网页布局最主要的优势体现在:表现和内容相分离,将设计部分剥离出来放在一个独立样式文件中,HTML文件中只存放文本信息,大大提高页面浏览速度;易于维护和改版,只要简单修改几个CSS文件就可以重新设计整个网站的页面;提高搜索引擎对网页的索引效率,搜索引擎将更有效地搜索到你的网页内容。

DIV+CSS布局虽然功能强大,但是完全都用它来做,太费时费力,对于初学者来说,需要一个深入学习的过程,才能灵活掌握,笔者认为用table+CSS也是不错的组合。table+CSS布局方案即HTML表格和CSS的混合使用,可以实现表格布局,CSS修饰页面效果,这样既利用了HTML表格的方便性与兼容性,又利用了CSS的修饰效果美化页面。使用table+CSS布局,对于构建小型个人网站来说,是个比较快捷方便的办法。

3 网页布局方法

网页布局的方法有两种,第一种为纸上布局;第二种为软件布局。下面分别加以介绍。

(1)纸上布局。准备若干张白纸和一只铅笔,在纸上画出页面的布局图,可按照以下三个步骤进行:

草案:尽可能发挥想象力,将想到的“景象”画上去,这属于创造阶段,不讲究细腻工整,不必考虑细节功能,只以粗陋的线条勾画出创意的轮廓即可,尽可能多画几张,最后选定一个满意的作为继续创作的蓝本。

粗略布局:在草案的基础上,将需要放置的功能模块安排到页面上,这里必须遵循突出重点、平衡谐调的原则,网站标志、主菜单等重要的模块放在最显眼、最突出的位置,然后再考虑次要模块的摆放。

定案:将粗略布局精细化,具体化,反复调整后确定最终的布局方案。根据智慧和经验,旁敲侧击多方联想,才能制作出具有创意的布局。

(2)软件布局。如果不喜欢用纸来画出你的布局意图,那么还可以利用软件Photoshop来完成这些工作。Photoshop所具有的对图像的编辑功能用到设计网页布局上更加得心应手。不像用纸来设计布局,利用Photoshop可以方便的使用颜色,使用图形,并且可以利用层的功能设计出用纸张无法实现的布局意念。

无论用哪种方法进行页面具体布局,都需要考虑以下几方面的问题:

(1)页面尺寸。由于页面尺寸和显示器大小及分辨率有关系,一般分辨率在800x600的情况下,页面的显示尺寸为:780x428个象素;分辨率在1024X768的情况下,页面的显示尺寸为:1007x600。从以上数据可以看出,分辨率越高,页面尺寸越大。

在网页设计过程中,向下拖动页面是唯一给网页增加更多内容的方法。除非能肯定站点的内容能吸引大家拖动,否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容,最好能加上页面内部链接,方便访问者浏览。

(2)整体造型的选择。整体造型是指页面的整体形象。对于页面的造型,可以充分运用自然界中的不同形状以及它们的组合:矩形、圆形、三角形、菱形等。

对于不同的形状,所代表的意义是不同的。如矩形代表正式、规则,很多ICP和政府网页都是以矩形为整体造型;圆形象征柔和、团结、温暖、安全等,许多时尚站点喜欢以圆形为页面整体造型;三角形代表力量、权威、牢固、侵略等,许多大型的商业站点为显示它的权威性常以三角形为页面整体造型;菱形代表平衡、协调、公平,一些交友站点常运用菱形作为页面整体造型。在实际应用中,一般会综合多种图形进行设计,可能某种图形的构图比例占的多一些。

(3)页头的设置。页头又可称之为页眉,页眉的作用是定义页面的主题。一个站点的名字大多都显示在页眉里,这样,访问者能很快知道站点的内容。页头是整个页面设计的关键,它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。

(4)文本的位置。文本在页面中多以数行或者块出现,它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限,文本放置的位置灵活性非常小,而随着dhtml的兴起,文本已经可以按照自己的要求放置到页面的任何位置。

(5)图片和多媒体的利用。图片和文本是网页的两大构成元素,缺一不可,也是美化页面和说明内容必须的媒体。处理好图片和文本的位置成了整个页面布局的关键,而你的布局思维也将体现在这里。除了文本和图片,还有声音、动画、视频等其它媒体。虽然不是经常被利用到,但随着动态网页的兴起,它们在网页布局上也将变得非常重要。

4 结束语

当前,网络的飞速发展使网页设计技术不断提高,也给网页设计人员带来了更大的挑战,如何把网页的内容与形式完美地结合,增强网站的吸引力,不仅要精通网页制作的技术,还需要设计者具有较高的艺术修养和审美情趣,页面布局的好坏在很大程度上取决于设计者的艺术修养水平和创新能力。熟悉网页布局的技巧,具有较高的艺术修养水平,制作出适合用户的、具有个性风格的精美网页,是每个网页设计人员的追求。

摘要：网页是网站构成的基本元素,决定网页是否吸引浏览者的重要因素之一是网页的合理布局。本文阐述了在整体上把握好页面布局的重要性,介绍了网页布局的常见类型,对网页布局的技术和方法做了详细地分析。

关键词：网页设计,网页布局,技术,方法

参考文献

[1]刘霆雨.完美网页设计与制作[M].北京:人民邮电出版社,2007:13-15.

[2]扬森香,聂志勇.网页设计与制作案例教程[M].北京:北京大学出版社,2009:7-9.

页面布局篇4

以前做项目得到一个经验，就是在立项前，不需要拿个布好局的页面出来讨论，因为我们觉得，在方向还未清楚的时候，讨论页面细节可能是浪费时间，

这一回，战略部的新partner给了我一个不同的启示。按说她的工作是在我上游，可是在最开始的实际操作中，她却把工作走到了我的下游，直接做了一个页面出来，把功能点、内容全都画好了…… 我一阵吃惊，对比着我自己的proposal，我跟她说，你这个东西，同事们能接受吗，因为他们都不知道方向在哪里，你却让他们看细节。

后来我明白她的做法了。这个是“结果导向”——不把页面先做出来展示一下，你面对那些不太懂产品原理的同事，是无法真正将讲解传递到他们的内心的。即便洋洋洒洒的文档在方向和细节上都非常完美了，但对其他业务部门的同事来说，可能仍是抽象或概念化的。在这个时候，不是说他们无法理解产品经理展示的东西和陈述的事实，而是，他们可能没法儿透露真正想要的东西——他们要么直接向你“投降”，认为非常好，要么是半懂不懂，连自己的观点也忘记了，再要么是根本反对，陷入跟你空泛PK的陷阱。

Partner用这个很具体、很简陋，但是又把功能点与内容展示出来的“结果页”，把参与讨论的同事内心想要的东西，“逼”了出来，而且越是陷入细节点的讨论，对方的需求就越明晰，比简单陈述一个概念要好很多，

比如针对“结果页”，参与讨论的同事有这番说话：

· 我觉得网友的评论摆得太下面了，占比太小；

· 我觉得相关在线医生交流这里，实际不可操作，因为运营投入太大，每个月要消耗掉好多钱；

· 页面非常好，没有问题，但是觉得评论这块还是没有突出；

……

这个时候，对方想要什么，我们心里就有谱了。这比针对某个概念（比如“提高互动比例”）进行不断地陈述、PK，要高效很多。

在此基础上，后来我对自己的proposal进行陈述，感觉就相当esay了。在表达的穿透性上，似乎达到更好效果。下来我就跟战略部的这位partner说，我们简直是完美的配合。这其实同一目标的不同方向，像挖隧道一样，从两头挖，最终还是要把隧道打通。

————————

【页面布局】推荐阅读：

网站页面布局07-30

CSS页面布局及样式设计实验报告05-16