浅析网页设计与内容呈现的层次关系

1、有时候，规划师（或需求、交互）把内容呈现的框架草图搭建好后，就直接“丢”给了设计 师，让设计师在画好的框架里去美化内容，出来后的效果，往往达不到规划师（或需求、交 互）预期的目标效果，然后就是反复的修订和磨合。如何改变这样的局 面呢？我想首先规 划师（或需求、交互）的目标要定义清楚，然后要做完善的信息架构分析，内容的主次位置、 版块结构、所占面积都要细化考究，交给设计师的是一个尽量完善完整的框架方案，而设 计师呢，必须全面理解目标及内容划分的原因，几方面结合，才能做出精美的设计作品。举个例子，我们把规划比作“导演”，把需求和交互比作“编剧”，而他们最终输出的内容及框 架图比作“剧本”，把设计师

2、比作“演员”；好的导演会选最好的“剧本”（符合目标消费者心理 需求的故事），选最符合剧本角色风格的“演员”去演绎，在拍摄前，会让演员“熟读剧本”， 体会剧本中角色的气质及内涵，充分了解剧本的主题思想及精髓，完全投入到剧本的情节 中去，整个剧组中的人齐心协力，最后才能成就一部优秀的影视作品。假如，导演或剧本不 好，不管演员演得多职业多卖力，读者也不会买单；反过来，导演或剧本都很棒，而演员 演绎能力很差，部分读者也许会咬牙坚持下去，但他们绝对体会不到故事的精髓。总结一下要点:1、规划（需求、交互）一定要理解并找准目标用户群体的心理需求，框架图不仅仅是草图，要方方面面更加完善的考虑，而不是一边写剧本

3、，一边让演员去表演，感觉不对，再改剧本。2、设计师一定要和规划、需求、交互充分地沟通，要清楚设计目的，清楚内容的组成及理由，读透并理解整个规划的思想精髓，在具体设计的时候，才能更好更直接有效地把内容传 递给目标用户。下面，我举一案例来辅助说明:支付宝和财付通的目标诉求及功能需求是基本一致的，我们来看看他们的首页设计，分别有 什么不同？初步的整体感觉：财富通比支付宝的内容要多，布局要复杂一些，界面要美观。一、外观设计比较：财付通：单从设计角度来分析，色彩和图形的美观度要比支付宝的好。Banner的色彩搭配 漂亮，图标的处理有特色。支付宝：banner的左右两块过渡较生硬（人物和橙色区域）；整个界

4、面缺乏细节设计，不 够耐看。生活好帮手裕活，触蝴生舌群琴手TUlSFtlE 用票订脚信用卡1T敏I专黑代底I购卖辛我布倩|岌队包 演夸花领取域买作双导醐EE前:主旧州抠岐户 口叩0.源主若射忖驹碱斓主骚会亶付、.会 广节割t卡魅问上竞同的通粕 叫付ii全面底均中宥充防和玉时程理一.巨通I 岫通企出阪仃ik解决行尹苞伯如器巍我如那!佑TJF曲心苞蹄宙弟加不月信耳举报屯心有*摄浦思挺据互联肝:青EW钠|期勘1强购飒认还会偷行： & 斧少 s （&詹Eg 骊理3- S关于师F虫喜眯中心I胡的中心I顺茧可赧户安全驻系称11贤讯慈司朋下网定处恃通年料期甘皿时r 皆通管段 1fllEiL2i*pZB2-2

5、0Q40031Ab pay, com 因 XHE任 iflLiflfiP*srJW-值王王 柬鱼孟IB杵计母；O -xEPft.it!着去淀，念坛 使乐跆 宜斟禺乎-吾肌中， tfrlairiia t EP7m-方-me“？ I 机斐讨宝;打击时脾Eh噩嬖K馨o象挡注推j_ .I gTT-X萍I宝71通11忙月作支|尸山1娜！1 个人用户绢躇纳盅1扣# .13 = H至业用户淘IkST略诚J璀行忘切就已三？g法用卡还敏.，|隔猊推广宁甘J?发主社区支代宝噌诵aas铜点吏树:首蛤邑袜.白地址辨E罟;去科安祁传亥宅宙赡至画叶巫 支村宝月P破舆破日伯二、框架结构比较：财付通：从大的块面感觉来分，有1

6、1个内容区域，banner部分拆分为4个。结构是左、上、下，但因为只是细线框间隔内容区，所以块面的感觉不强烈，内容的布局上就稍显凌乱。支付宝：和财付通一样，11个内容区，但因为设计师采用了背景色来区别不同内容区，有 重要层级显示的引导性，所以，内容不会显得凌乱。页面中凸显的是橙色的banner 口号区， 弱化的是底部信息区，逻辑和顺序感就出来了。三、主要版块内容比较：1、重要的banner区域，都传达给用户什么信息了呢?财富通：大banner被分为4块，安全、方便、优惠以及口号会支付，会生活”除了 口号清 楚明了以外，安全、方便、优惠几个字很小，已经被华丽的图标质感和鲜艳的色彩掩盖了。支付宝：

7、大banner分为2块，左边是代表着用户的大美女，右边是体现实力的宣言“超过2亿用户的安全选择”，辅助小字为：共享简单、安全、快捷的网上支付体验，具有亲合力 的美女，醒目的大标语，传达给用户的信息，支付宝的内容构思很明显比财付通更直接有效。2、主要内容区都有什么呢？财富通：支付服务（含个人和企业），生活好帮手，还没有财富通帐户，支付好帮手，合作 银行，共5块主要内容，两个广告区。 支付宝：两个大按钮（轻松体验、免费注册），动态信息区，个人用户，企业用户，流程演 示，合作伙，公司动态，新手问题，圆形标签图，两个广告区。3、对比一下，同样是11块区域，支付宝呈现的内容更丰富。看看支付宝多出的内容都

8、有些什么作用呢？（1）、两个大按钮：轻松体验（留住不太感兴趣还在疑惑中的用户），免费注册（方便感兴趣的用户，诱导他立即注册）；（2）、动态信息区：即时传达最新信息给用户；（3）、流程演示：图形化的展示，更直观有效的告诉用户操作的简单快捷性；（4）、公司动态：既是新闻窗口也是对用户的一种贴心服务；（5）、新手问题：帮助新手即时快捷地解决问题；（6）、圆形的动态标签图：是企业的品牌宣传，是用户的心声宣言，是综合实力的表现。mnl&is令套付金1活.糠i前a下时更付牛白生活拄备丰 优菟主成！ 丽筮维务 晒中心玲第蕙17.由诉gfl；iffl S1 充，：我的财付通交易管理探枣 收款 仲效安全中心还没

9、有财付通账户？支付服务个人T?财付通祯态台作祖行:诺付活 励会会生活好配手超过2亿用户的安全选择共享简单、安全 倒1的网上支伺怖甄*立驰gTTF硅7f通怕月公宣11*1）：跳!个人即户阿出W睇用责t主忖林-*9EMJSRM.买卖款吏付全过理:前.宣*改F蜒讲四、交互设计细节比较：支付宝还有两处细节设计很体贴：一是“立即充值”按钮处，增加了“送积分”的冒泡效果，属 于诱惑式营销的方式；另一个设计细节是动态信息公告，为了页面简约和节省空间，只放 了一条信息，而一条信息很容易被其他版块内容淹没，设计师对这个区域作了重色处理，让 用户一眼能看到，又不会占用太大空间，同时，右端有5个小圆点，表示信息的轮换，告 诉用户这里有5条信息，目前显示在第几条。2009-07-14 I支付宝开通“信用卡支付”功能啦总结一下：1、财富通的内容规划、版块构成及内容呈现，没有支付宝好，传达给用户的信 息量少；支付宝显得更加专业、更具实力、更贴近用户的心智模型；我相信，支 付宝在做内容规划和版块布局时，是充分分析了目标用