第一站 - 轻松上网从此开始!

上网第一站

当前位置: > 运营 >

网站设计分析:建立良好的视觉层级(2)

时间:2012-12-13 01:00来源:网络 作者:yangyang 点击: 我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
上图是Airbnb的租房信息detail页面,租客在租房时最关心的信息为:房间实景、价格、房东的信息;看它的detail信息,也存在很多种类型,但用户最关心的三

  上图是Airbnb的租房信息detail页面,租客在租房时最关心的信息为:房间实景、价格、房东的信息;看它的detail信息,也存在很多种类型,但用户最关心的三类信息因为位置、占用的面积大小让租客一眼就能掌握房子的基本信息,如有兴趣再继续看更多详情。

  

 

  上图是设计师对数据表格的优化过程,第一版为简单的信息罗列;去掉重复的文案后并将表格本身的设计弱化,突出内容本身,第二版相对清晰了很多;第三版继续将重点进行加粗,改变排列方式可再次减少文案重复情况;第四版是该表格用户调研过程中反映最好的版本,因为用户会长期使用该表格来获取数据,设计将非重点文案进行隐藏,用户鼠标移上后才显示该数据代表的含义,教育过一次后用户再看这个表格就不再受众多解释文案的干扰,直接获取想要的信息;一个看似简单的表格,抓住重点信息,优化空间还是很大的。

  

 

  上图我们团队对alibaba.com提供的服务介绍页面进行改版的项目,改版前的设计层级区分不明显,使得用户进入该页面时不能快速了解服务的概况,来判断是否继续深入了解;而改版后通过大小的对比,呈现抓住用户第一眼印象的信息,初步判断符合自己的需求,用户才会继续浏览。

  3)围绕用户行为设计层次

  把握整体页面的重点是设计的前提,但如何才能判断重点?这需要我们了解用户特征,以及他来到该页面的主要任务是什么,再进行设计能保证我们做了正确的事,否则设计的再有层次感也不一定是用户想要的。

  

 

  支付宝近期在测试新版首页,我们来到支付宝首页最常进行的操作就是登录,而老版首页视觉第一焦点是导航及活动推广位,导航只要在固定的位置,用户在需要时能找到就已经达到目的了,它不应该成为页面的视觉焦点,除非用户经常在导航进行切换以了解网站提供的服务,在这点上新版首页弱化了导航及其他应用入口,强化支付宝本身的品牌传达及登录行为,很符合主流用户的行为习惯

  近期在团队内部推进后台风格的改版,也涉及到这点,左图为后台延续了多年的导航风格,作为操作型界面,用户目的性很强,导航的强化会干扰用户对内容的识别效率,

  右图为根据用户行为特征,弱化导航的设计,这样可以将用户的焦点集中在主内容操作区。

  经过在线调研,得出的数据结论表明:新风格导航虽然在视觉上进行弱化,但寻找某任务入口的点击率要高于老风格,且寻找时间略低于老风格,总体新风格表现更好。

  

 

  相反,如果我们没有足够了解用户的行为特征,如在原有页面上增加新功能,再强化也有可能轻易被忽略,举个我们实际项目例子:

  下面左图框出部分是增加的功能,希望买家在发询盘给供应商时能对当前的采购需求建组并复用上次的内容,在内部讨论时,大家都觉得要强化该选项,让它成为其他内容的统领,然而调研的结果却大相径庭,用户无法理解这块内容或干脆以为是贴的广告内容而忽略;

  调整后的版本把新选项弱化为简单的选择,复用询盘的功能分开,得到了用户和行业专家的认可

  设计和用户期望一致,视觉层级才是有效的。

  

 

  总结一下,建立有效的视觉层级主要从以下四个方面着手:

  1、简约:有选择的展现信息,让用户在有限的信息中发现重点

  2、组织:预先对信息进行科学的分类,整理好优先级,可以得到更好的传播效果

  3、呈现:多种表现方法结合,呈现最好的视觉层级效果,这个点细化后有很多可挖,这里总结了几个点,欢迎继续哈

  4、引导:遵循用户习惯,同时给予适当的引导推荐

  一些拙见,与君共勉:)

  来源:

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发布者资料
第一站编辑 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2012-05-22 19:05 最后登录:2014-08-08 03:08
栏目列表
推荐内容
分享按鈕