频道de变脸

 

频道是产品的门户,用户的窗口,业务的平台, 随着平台上产品的发展,频道的改版那是必然的事情,每次改版的目标和方向都在发生变化,对于设计师而言就意味着又是一个新的产品设计,所以频道改版方法和经验一半靠前人总结,一半靠自己摸索;

一、新手误区:
拿到交互demo就直接对交互稿进行视觉设计,当遇到某个版块放在这个位置不合适的情况下就会直接更改版块位置,发现色彩比较淡就会任意更换色彩或是添加新的设计元素;为了让页面看起来更加饱满

就任意添加推广banner……

这些感性设计貌似看起来是补救的方法就这样随便的被引用到了你的设计中;

当交互设计师看到你自以为欣喜的作品时心中可能按捺住一股怒火:任意更改版块位置、任意添加推广banner、

任意新增版块…..

由于这种太过感性的设计也就造就了混乱的页面,缺失了视觉的美感,一般称之为“随意性设计”!

以上应该是很多设计师都会发生的类似情况。

所以在这里通过实际项目总结了下新手设计频道的流程:

二、新手设计频道的流程

1.了解改版背后的那些事

当设计师接到一个项目的需求的时候都会第一时间看需求文档,经过一轮的理解和梳理之后总会陷入很多的疑问,这些疑问就需要设计师去思考和了解的;简单的一个频道的改版背后总蕴藏着不为人知的秘密,为什么要改版?改版的目的是什么?这都是我们需求去思考和了解的问题

2.理解业务结构

频道是各大业务的集合平台,承担着为用户传递信息的枢纽,频道需要展示各个业务模块,各个业务模块之间却又存在着千丝万缕的关系,怎样合理的规划安排各业务模块存在的位置就需要我们去深入透析各业务的关系和结构,确保模块的合理清晰化

3.对页面做出合理定位

把业务都清晰的了解后就应该结合项目背景和目的对频道做出清晰的定位,频道做成信息承载?功能承载?两者的结合体?面向的用户是谁?等等一系列因素直接影响到合理的定位

4.风格设定

通过沟通和思考之后终于把信息内容确定下来,接下来的就需要对设计定一个方向,这个方向可以是自己的判断和理解,可以是通过对行业相关产品分析之后的产物,具体的视觉产物主要包括:颜色、文字、质感、版式、主题元素

5.设计页面雏形

频道的信息承载比较庞大,一小点的设计变更都会影响到整个全局,最好的方法是对现有的信息和结构100%灰白稿还原,切记是100%还原,这样一个没有上色的频道页面就出来了

6.视觉设计

一个产品就好比新娘,怎样给新娘设计美丽的嫁衣直接体现外界看新娘的眼光;频道是个严谨的产品,色彩的搭配都需要讲究,每个元素的添加的背后都需要支撑的理由,否则勿动!设计是做出来的,没有完美的方案只有最合适的方案,通过尝试去做最终挑选出最好的方案

7.细节调整(规范)

视觉的输出终归到产品本身,再好的视觉表现一旦脱离了产品的本身都将一文不值,减掉赘肉、调整…

8.终稿
通过这些方法设计频道就简单多了!

三、诚信中国频道项目设计实践

背景:现有频道导航维度太多,产品信息层次混乱,买卖家内容定位不明确;频道入口繁杂,缺乏梳理;页面布局受限导致新增业务承载有限;用户活跃度低,无互动两点功能;信息内容滞后更新缓慢;
目标:减少主导航的信息维度,划清买卖家信息结构,重新梳理信息内容明确运营内容 ,新增问答互动方式,交易流程化定位服务,买卖加视角分离

互联网安全产品分析:

淘宝-消费者保障

为消费者提供交易保障服务的产品,在07年接触淘宝购物时候就会通过消费者保障这项筛选功能进行搜索产品,那时对网购安全没有太多的认识,都是通过口碑传递安全保障,时至今日消保已经深入人心,所以在大部分用户的潜意识中带有绿色的手掌上捧着黄色购物袋的标志是比较靠谱的商品。绿色给人以宽容、大度、信赖、保障的感觉。
腾讯-QQ电脑管家
10年的3Q大战的主角之一,QQ电脑管家是腾讯公司的一款免费安全软件,功能包括安全防护、系统优化和软件管理等,从QQ医生一步步升级到现在QQ管家,从最初的一个查杀盗号木马的小工具到现在安全保护、系统优化和软件管理的强大软件,一个盾的外形一直在延续,这种安全的寓意似乎没有其他东西能比它更好的诠释,一个蓝色的盾形里面3块颜色似乎在展示着无比强大的保护功能。蓝色给人以永恒、理智、平静、纯净的感觉。

腾讯-诚信保障

在腾讯拍拍网上提供保障服务的产品,它的外形及含义相比消保都比较抽象一点,拍拍的诚信保障的外形可以
理解为抽象的手(当然还可以理解成为其他的)捧出一个心型,在心型上写着“信”,这个感觉更多的是个人
道德上的爱心维护(买家),里面再加个“信”更是想针对卖家的诚信(卖家),意思挺好,这种双重理解较为
困难。
绿色和橙色的搭配给人以灿烂、辉煌、活泼、光明、以及权力的感觉。
上面分析的3个都是给用户提供保障的产品,通过3个产品的分析可以看到3种保障性产品视觉传递给用户的色是:蓝色、绿色、橙色、黄色,而产品频道的色彩都采用产品的VI色

情绪版分析

一系列的分析和总结过后,最后得落实到自己的产品上来;
诚信中国的产品都分别采用蓝色基调作为产品的品牌色,所以在频道色彩定位的时候就很自然得把蓝色沿用进来!
随着色彩定义完成之后就是细节的设计和处理了,这里就不再多谈!
频道是一个与用户交流的平台,做到与用户的无障碍互动,不仅需在内容层面的体现,更重要的是体验上的感触,
良好的用户体验需要设计师情感的注入,用户与产品的共鸣是对体验最好的诠释。

 

  • serena.d

    good···很好的分享

  • zhangqun

    不错的分享,有虚有实。

  • Junlan

    不错,百炼成钢

  • Teng Feng

    小武还有这手~~~学习了~

  • Chuye322

    条理好清晰 学习中

  • Sindy Zhul

    图片版→图文结合版,小5的总结分享越做越精细了

  • Shujian_winston

    条例很清晰,对我在做的频道改版项目的思考有很多启示的地方,赞!

  • HelloUED

    挺好,有较强的可参考性

  • http://drwang86.sinaapp.com/2012/04/16/%e9%a2%91%e9%81%93de%e5%8f%98%e8%84%b8/ 频道de变脸 « DrWang86's Wiki & More

    [...] 原文地址:http://www.aliued.cn/2012/04/16/%e9%a2%91%e9%81%93de%e5%8f%98%e8%84%b8.html [...]

  • Johnson

    挺好的。很清晰!

  • http://liyunde.org/?p=1354 频道de变脸 | 世界朋友

    [...] 文章来源:aliued.cn VN:F [1.9.12_1141]please wait…Rating: 0.0/10 (0 votes cast)VN:F [1.9.12_1141]Rating: 0 (from 0 votes) var jiathis_config = { data_track_clickback:true, appkey:{ "tsina":"1853206401", "tqq":"fdf0028e88304622bd6ec3e1a8a892f1" }, ralateuid:{ "tsina":"1949609680" } } [...]

  • Mack Knight

    功能bug: 诚信保障 栏目 用户受益 列表 onhover时, 箭头附近区域不可点击。 容易造成误解。

  • http://www.nzhufu.com/birthday 生日祝福语

    说得很好,学习啦,做UI的童鞋更应该学习

  • Walltu

    haha,有意思,学习了

  • Darwin Luo

    不错的设计模式,学习了

  • heyuchan

    不断积累,总结得不错啊~~

  • http://cache.fz-dxc.com/c2026/ 龙猫 » 频道de变脸

    [...] 阿里巴巴(中国站)用户体验设计部博客 [...]

  • http://www.zzzla.com/pin_dao_de_bian_lian.html 频道de变脸 | 站长站

    [...] 文章来源:aliued.cn 发表于 网站产品 « QQ社交网络化之路:从查找联系人改版入手 以用户为中心的创新:散论十则 » 敬请 留言, 或从本站 引用本文。 [...]

  • http://www.zzzla.com/pin_dao_de_bian_lian-2.html 频道de变脸 | 站长站

    [...] 文章来源:aliued.cn 发表于 网站产品 标签: 交互稿, 改版设计, 视觉设计, 频道改版 « 完全实战-从零开始配置服务器 数据:新浪微博企业微博发布时间规律研究 » 敬请 留言, 或从本站 引用本文。 [...]