新闻资信
news credit
浅析设计与内容呈现的关系
2012-1-15

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

      举个例子,我们把规划比作“导演”,把需求和交互比作“编剧”,而他们最终输出的内容及框架图比作“剧本”,把设计师比作“演员”;好的导演会选最好的“剧本”(符合目标消费者心理需求的故事),选最符合剧本角色风格的“演员”去演绎,在拍摄前,会让演员“熟读剧本”,体会剧本中角色的气质及内涵,充分了解剧本的主题思想及精髓,完全投入到剧本的情节中去,整个剧组中的人齐心协力,最后才能成就一部优秀的影视作品。假如,导演或剧本不好,不管演员演得多职业多卖力,读者也不会买单;反过来,导演或剧本都很棒,而演员演绎能力很差,部分读者也许会咬牙坚持下去,但他们绝对体会不到故事的精髓。

佛山网站建设_佛山网站制作_佛山网站设计_佛山网站_佛山网页设计_佛山网页建设_佛山网页制作

总结一下要点:

      规划(需求、交互)一定要理解并找准目标用户群体的心理需求,框架图不仅仅是草图,要方方面面更加完善的考虑,而不是一边写剧本,一边让演员去表演,感觉不对,再改剧本。

      设计师一定要和规划、需求、交互充分地沟通,要清楚设计目的,清楚内容的组成及理由,读透并理解整个规划的思想精髓,在具体设计的时候,才能更好更直接有效地把内容传递给目标用户。

下面,我举一案例来辅助说明:

支付宝和财付通的目标诉求及功能需求是基本一致的,我们来看看他们的首页设计,分别有什么不同?

初步的整体感觉:财富通比支付宝的内容要多,布局要复杂一些,界面要美观。

一、外观设计比较:

财付通:单从设计角度来分析,色彩和图形的美观度要比支付宝的好。Banner的色彩搭配漂亮,图标的处理有特色。

支付宝:banner的左右两块过渡较生硬(人物和橙色区域);整个界面缺乏细节设计,不够耐看。


二、框架结构比较:

财付通:从大的块面感觉来分,有11个内容区域,banner部分拆分为4个。结构是左、上、下,但因为只是细线框间隔内容区,所以块面的感觉不强烈,内容的布局上就稍显凌乱。

支付宝:和财付通一样,11个内容区,但因为设计师采用了背景色来区别不同内容区,有重要层级显示的引导性,所以,内容不会显得凌乱。页面中凸显的是橙色的banner口号区,弱化的是底部信息区,逻辑和顺序感就出来了。

 

三、主要版块内容比较:

1、重要的banner区域,都传达给用户什么信息了呢?

财富通:大banner被分为4块,安全、方便、优惠以及口号“会支付,会生活”除了口号清楚明了以外,安全、方便、优惠几个字很小,已经被华丽的图标质感和鲜艳的色彩掩盖了。

支付宝:大banner分为2块,左边是代表着用户的大美女,右边是体现实力的宣言“超过2亿用户的安全选择”,辅助小字为:共享简单、安全、快捷的网上支付体验,具有亲合力的美女,醒目的大标语,传达给用户的信息,支付宝的内容构思很明显比财付通更直接有效。

2、主要内容区都有什么呢?

财富通:支付服务(含个人和企业),生活好帮手,还没有财富通帐户,支付好帮手,合作银行,共5块主要内容,两个广告区。

支付宝:两个大按钮(轻松体验、免费注册),动态信息区,个人用户,企业用户,流程演示,合作伙,公司动态,新手问题,圆形标签图,两个广告区。


3、对比一下,同样是11块区域,支付宝呈现的内容更丰富。看看支付宝多出的内容都有些什么作用呢?

两个大按钮:轻松体验(留住不太感兴趣还在疑惑中的用户),免费注册(方便感兴趣的用户,诱导他立即注册);

动态信息区:即时传达最新信息给用户;

流程演示:图形化的展示,更直观有效的告诉用户操作的简单快捷性;

公司动态:既是新闻窗口也是对用户的一种贴心服务;

新手问题:帮助新手即时快捷地解决问题;

圆形的动态标签图:是企业的品牌宣传,是用户的心声宣言,是综合实力的表现。


四、交互设计细节比较:

      支付宝还有两处细节设计很体贴:一是“立即充值”按钮处,增加了“送积分”的冒泡效果,属于诱惑式营销的方式;另一个设计细节是动态信息公告,为了页面简约和节省空间,只放了一条信息,而一条信息很容易被其他版块内容淹没,设计师对这个区域作了重色处理,让用户一眼能看到,又不会占用太大空间,同时,右端有5个小圆点,表示信息的轮换,告诉用户这里有5条信息,目前显示在第几条。

总结一下:

      财富通的内容规划、版块构成及内容呈现,没有支付宝好,传达给用户的信息量少;支付宝显得更加专业、更具实力、更贴近用户的心智模型;我相信,支付宝在做内容规划和版块布局时,是充分分析了目标用户的心理需求的。

      财富通的视觉设计能力强,色彩和质感的体现都比支付宝好,banner处的3个图标很时尚美观,甚至前卫,但真正传递给用户什么信息?值得思考;支付宝的视觉设计,从页面的表现来看,技能应该没有财富通强,但设计师充分考虑了内容的呈现,主次关系,从整体效果来看,是更成功的商业视觉设计师。