微公益改版项目总结谈信息整合与体验优化

　　许多事，不懂珍惜已成旧事；许多人，不及用心已成旧人；许多经验，不总结就没有沉淀。呵呵，前两句很有诗意，是摘抄别人的。后一句滥竽充数，却是自己想说的：项目总结是很有必要滴。先附上新版微公益地址，点击传送门：http：gongyi。weibo。com
　　先回顾一下微公益改版项目的相关背景：
　　微公益改版在8月份正式立项，所有设计开发工作完成是在11月初，实际上前期准备工作6月份就已开始。老版微公益是以个人求助产品为主，主要服务对象也是对个人求助项目感兴趣的求助者、捐赠者及公益组织。但在微公益平台上，还有一群爱心人士，他们自发热衷于公益事件的收集、报道与传播，这样一批极具公益事业推动力量的人群却在老版微公益平台上没有被很好的挖掘出来。如果有一套相应的产品机制去很好地组织和引导这群爱心用户，就能使微公益平台成为一个能够自生产与自传播的闭环环境，而非强烈依赖人工运营和热点事件。
　　爱心团就是新版微公益为解决这一问题打造的重点产品。微公益还新推出了转发捐助和微拍卖两个新产品，旧有产品框架已不能兼容。加上老版微公益信息结构与界面设计也不尽人意，模块堆砌、设计保守、扩展性不够都是现实问题。再则，微公益产品的用户活跃度偏低，除去产品辐射的用户群基数较小这一产品本身特性不说，信息传达、使用体验也是重要的影响因素，因此新版需要着重考虑体验优化问题，如何优化各环节流程、降低用户参与门槛贯穿了整个改版思路。
　　从项目背景中可以总结出以下几个项目特点及对应的交互挑战：
　　特点1：新版涉及多条产品线整合。个人求助、转发捐助、微拍卖、爱心团，后面三个都是新产品
　　交互挑战：不管产品架构多庞大、功能分支有多少、逻辑判断多复杂，最终呈现给用户的界面始终要简洁清晰、操作明确，各产品概念又能清楚传达到位。因此做好页面信息布局、页面关系内容间的操作引导很重要。
　　特点2：用户角色众多。与其他微博产品用户构成不同，虽然微公益受众群体较小，但典型用户角色却不少，如果是一个完整的闭环，微公益需要的用户包括：求助者被救者施助者传播者公益组织NGO核实人媒体名人明星商家企业。
　　交互挑战：面对众多角色，如何优化操作流程适应各角色的不同需求。
　　特点3：迫切需要提升产品用户活跃度。
　　交互挑战：做哪些体验上的优化，能够增强用户黏性。
　　特点4：期待全新的界面设计。
　　交互挑战：怎样的界面设计，能够呈现耳目一新的微公益。
　　特点5：缺少原始的数据积累。正如前所说，本次改版后的微公益几乎是全新的，新的产品、新的界面、新的操作、新的体验，所以在用户数据的积累方面比较欠缺。
　　交互挑战：不管是新产品设计或是已有产品体验优化，都期望有具体的用户行为数据作指导，能让每一个方案都有理有据。在数据欠缺的情况下，我们幸运的得到了用研同事的帮助，前期的用户访谈弥补了这一问题。
　　下面讲述一些设计环节中的细节，总结一下处理上述挑战时的尝试与不足：
　　1。产品概念直达用户微公益首页全新架构
　　1）功能展示区
　　首页架构的首要任务是：将微公益下属的几个产品概念在第一时间清晰明确的传达给用户。个人求助是已有产品，用户对微公益的印象也多停留在个人求助项目上，而转发捐助、微拍卖、爱心团对用户来说都是新概念。需求很明确：我们需要给到用户A、B、C、D信息，而到了界面呈现上，体验设计考虑更多的是：用户怎样接收A、B、C、D信息。最简单的方式莫过于产品介绍：微公益新推出XXX、XXX产品，功能特性有XXXX，能帮助你解决XX问题，快来体验吧
　　如此芸芸说了很多，可能效果也就是一厢情愿用户通常对这样的信息视而不见。我们也可以将4个产品做成醒目的功能入口，用户看到大大的转发捐助字样及漂亮的配图，还不知道转发捐助这个产品么？通常这样的方案能达到需求目的，但是从用户角度看，总觉得是在被迫接受产品信息而少了点儿主动的欲望。
　　怎样将信息强推变为主动接收呢，我们尝试了另一种思路：不直接告诉用户产品有什么，而是让用户去决定自己想要什么。将用户需求分为两类寻求帮助的人和想提供帮助的人，向前者提供了我要求助大按钮和全部项目入口，这是个人求助产品的核心；对于后者，我们把几个产品的核心功能（爱心捐款捐赠物品报名志愿者转发微博帮帮他们参与慈善拍卖证实项目信息）进行了拆分重组，对用户来说，想做什么事情点击相应通道就可以了，这样，产品痕迹少了，人情味是乎更多了。此外，为了进一步帮助用户快速了解这些功能通道，在不干扰用户核心视觉及主要操作前提下，还做了一些轻便的交互提示。
　　当然，这个方案有一个潜在的不足点，也是我们在简单原型测试中发现的功能入口多且集中，容易造成用户的操作负担。我们尝试从两个方面降低这个不足，一是对功能按钮进行分组，二是按钮设计上选用轻量、扁平的视觉样式。
　　2）项目推荐区
　　首页的公益项目展示分两部分，热点推荐项目与一般项目，重点是热点推荐板块的设计。首先热点项目必须在首屏有露出，所以我们尽量压缩了Banner高度；其次，旧版微公益有个不好的问题是首页显示的项目长时间都没有变化，用户来看一看，没新鲜劲儿就走了。原因在于项目推荐类别少，推荐形式单一，且设计样式太占页面空间，8个推荐项目就占据了首页全部。在新版设计时我们考虑了三点改进：
　　i）热点项目不在多，而在于精华集中，将热点集中在首屏下方12区域，用户好看好参与，如果意犹未尽，第二屏还有10个一般性项目展示，让部分感兴趣的用户继续深入阅览。
　　ii）如何让项目活起来？吸取旧版单一主题较少变化的缺点，这次我们为用户在后台准备了8个推荐主题，前台显示4个，由运营定期更换，每个主题1个项目，这样主题项目均可变，能够大大提高项目更新频率。
　　iii）4个主题项目可以一次性手动更换。在做换一换的交互时，之前的方案是针对每个主题项目单独切换的，方案评审时发现单个换一换可能更适合商品类的展示操作，但在寻找公益项目场景下，用户需要的是快速捕捉感兴趣的项目，可能做批量更换更合适一些。
　　另外，关于项目图片展示的大小问题，我们也有过一些折腾。最开始走的是现在较为流行的大图设计风格，想以图片吸引用户，尝试后才知道，微公益并不适用，因为公益项目的图片都太惨了，整个首页像是弥漫在一片哀悼之中。针对公益项目的实际情况，我们缩小了求助类项目的图片尺寸，对页面进行了合适的图文排版，但我们仍然保留了微拍卖项目大大的图片设计，因为拍卖项目用的是明星图片，特殊情况特殊处理吧。
　　3）爱心墙
　　在首页的末尾，我们有一个爱心板块，用来显示一直以来用心支持微公益的爱心用户头像，这是一个纯感性的设计，只是想在众多的功能与逻辑之外多一些情感氛围，希望热衷微公益的朋友们都有机会出现在此，头像是由程序设定动态更换的哦
　　4）锁屏背景
　　在现有的众多微博产品设计形态中，首页采用锁屏背景是一次大胆的尝试。头图通栏导航灰色背景是现在微博平台下多数产品的页面形式，当然，我们认可这样的设计形式，这是历经检验的标准模式，用户接受也习惯。然而，我们想让首页有更多的承载内容，但又不想页面显得那么笨重。
　　在前期调研时，我们找了一些较符合微公益产品气质的国外网站，借鉴了一些它们的设计风格，其中锁屏背景也是在那时想到的。如果有一个较轻的背景就固定在那里，浏览页面时，页面上的轻微透明的内容模块从背景上轻轻滑过，像浮萍一样，这就是原始用锁屏背景的想法，但不知道我们最终的界面是否达到了这个效果，我们期待用户的反馈。或者彻底失败，或者毫无感觉，或者有那么一丝新意，就请大家检验了。
　　2。角色用户各取所需项目详情页功能区优化
　　对详情页进行重点优化的是头部项目介绍区的内容和操作引导。老版详情页的项目信息多且杂，几乎占据了整个首屏，晃眼一看，很难抓取到关键信息。像救助对象、目标金额等重点信息缺少突出。主要功能按钮也淹没在了一片文字描述中。新版详情页这块第一是做了信息的排版整理，先抽离出重点信息与重要操作，单独设计，包括求助需求的操作按钮（需要多少捐款、是否需要衣物、需要多少名志愿者）。其次精简次要信息：只保留了标题、求助时间地点及项目核实情况，放置在项目图片旁边；然后再将一些零碎信息如求助类型用icon表示，能缓解文字造成的视觉疲劳。这样，项目介绍区域在不失信息传达的同时就干净清爽多了。
　　该简化的地方不能手下留情，相反，该强化的信息反而要花力气丰富。之前对救助对象的描述较为简略，只是几段文字的堆砌，但在用研访谈中，我们了解到其实真正能打动用户决定捐款的恰恰是对救助对象的细节描述，所以在新版中，我们单独将这部分信息展示出来，并增加了版式设计及添加图片，让这部分文字信息更丰富，希望能做点努力帮助感动到用户。
　　前文也提到微公益的用户群角色较多，在详情页里，我们就遇到三种典型用户：普通用户、公益组织和核实人。之前的设计没有对用户做区分，统一提供捐款按钮。但实际对于公益组织和核实人而言，这两拨用户有自己的使命，核实人以核实项目为主、公益组织以认领项目为主，虽然他们也有可能参与捐款，但毕竟不是主要需求，新版中我们对这三类用户的任务流做了区分，普通用户引导捐款捐物报志愿者；核实人引导去核实项目；公益组织引导认领此项目。并且对于一些特殊状态还进行单独的操作引导，如项目没有启动捐款时会引导用户进行爱心传递转发操作。
　　3。简洁但不简单项目列表信息简化
　　微公益有三个项目列表页，分别聚集了所有的个人求助项目、转发捐助项目、微拍卖项目。对于列表信息，我们的优化目标是：帮助用户更简单、快速的浏览项目、阅读项目及筛选项目。对于旧版来说，信息繁多，所有想给用户看的信息都放出来了，一屏显示不了3个项目，但并不是给出的信息越多，用户就了解得越多，往往需要被用户接受的重要信息已经被淹没了。
　　我们做的第一个优化就是列表信息的精简、整合和突出。我们果断干掉了占3行的详情信息，因为用户来到列表页的目的是快速寻找感兴趣的项目，我们不鼓励他在这里细看详情描述，并且即使用了3行的空间也很难把一个项目说清楚的，所以还不如不说，把宝贵的界面资源留给重点需要突出的信息吧。
　　接下来我们做了信息的整合，大家看到，旧版中有5项单独的信息（发起人、公益支持、救助对象等），这些信息确实很重要，但就这样零碎的堆砌在一起，估计除了占地儿外，也难被用户接收到，我们处理方式是，编写了一句话的格式，将这些零散信息统统装进去，发起人、公益支持、救助对象等信息就包装在了一句文案里，如春苗助医发起，童爱计划基金支持的救助小山行动，一起帮助小山度过难关！查看详情amp；gt；amp；gt；，这样稍微人性化点的语言应该更能让用户接受吧。
　　第三个优化点就是强化关键信息。试想，用户来此寻找项目，除标题、图片外，还有什么是用户最关心的呢，那就是项目需求：捐钱需要捐多少，已完成多少捐款，这个项目热不热，有多少网友参与？物资需要什么物品？志愿者需要多少人？这些信息我们重点在视觉上做了包装，用醒目的icon类型，边框修饰，明确告知用户这个项目目标100000元，已完成25，相信用户会一眼看到。
　　此外，除了信息的处理，左侧导航还有个项目推荐的模块帮帮他，我们让这个模块常驻界面上不随滚动滑出界面，目的是让热推项目让更多人关注到。
　　当然，列表设计有不足的地方。同事在使用后发现一个不足点就是：列表中缺少项目状态信息，如进行中或者是已结束。虽然我们在列表之上提供了一些维度的筛选条件，也包括时间状态的筛选，但用户可能会将注意力集中在列表中，而潜意识里忽略了上方的筛选条件，这也是信息精简后需要配合一些筛选条件进行信息筛选的结果。这个问题我们会做优化，可能会将时间状态提出来置于列表中。
　　4。让爱轻松传递个人求助、转发捐助Feed优化
　　微公益Feed是微公益项目对外传播的重要途径，有很大部分爱心用户都是在主站Feed中参与公益行动的，因此，个人求助、转发捐助Feed体验也很重要。改版后的Feed，在缩略状态下，按钮的文案统一为查看详情而非之前的立即捐款或其他，这个文案也有过反复的讨论与修改。
　　由于主站Feed在缩略状态下实际是张死图，无法单独识别按钮状态，所以我们就无法预期用户点击展开缩略图的行为到底是要捐款还是仅仅要查看详情，在此处一些偏向性太重的文案引导可能就会引起用户的反感，比如捐款，再考虑到不论用户是想看更多还是想捐款，都必须在展开后的状态中完成操作，所以缩略状态下的引导文案就不再纠结了，明确无误的引导用户点击展开就是目的，所以叫做查看详情。
　　对于展开后的状态，我们同样采用了项目列表信息优化的方法对次要信息进行精简及对重要信息进行突出，并且加强了微公益的品牌标识，同样对转发捐助产品在右上角进行了品牌突出。在个人求助Feed的展开状态，我们对用户着重做了2个行为引导，因为之前只有1个立即捐款，那对于只想通过转发行为献爱心的用户如何引导呢，所以要让这两种用户各取所需，及提供了2个引导按钮：立即捐款与爱心转发。
　　对于展开状态底部的推荐信息，原来的设计是一张大的项目图片配上标题参与人数显示在底部，我们测试用户的时候发现，用户无法区分到底是哪个是展开后的项目，问题就在于附加信息太抢眼了，虽然我们的运营目标是让用户多多看见公益项目，但却起到了较大的干扰作用，我们果断的将推荐项目弱化到最低，只显示了一行次链接色的项目标题，这样有主有次信息才更重点和有层级。
　　5。小设计大反响微拍卖的快速诞生
　　微拍卖是微公益下的一个子产品，是将一批明星物品以竞价方式在线拍卖，所得金额全部捐赠给公益项目或公益基金会，对于广大网友来说，这是集爱心与娱乐为一体的公益产品形式，很受用户欢迎。
　　微拍卖也是本次在项目总结中不得不说的一个段落，不仅产品本身充满了设计的乐趣，而且设计过程非常之快却收获了很好的反响，并且在这个过程中，还得到用研同事在用户数据分析上的给力支持，以及构建同事的一些新颖的前端技术。总之，微拍卖的设计过程点滴都值得回忆。
　　1）小巧结构、快速设计
　　微拍卖是一个计划外的产品，为了赶上8月中旬的时尚芭莎慈善晚会，从产品构思到开发完成仅有一个月时间。开发周期如此紧张，所以在前期设计阶段几乎不可能有充裕的时间进行调研、分析、架构，我们采用了最简单的方法：产品、运营、交互花半天时间坐在一起，从信息结构到出价流程到界面UE，再加上运营的一些策略计划，一下午加一晚上的时间已经全部搞定，省去了通常项目中反复的确认环节与繁琐的交付流程，从需求方到设计方面对面，效率让我们自己都很惊讶。
　　但是大家能看见，微拍卖整个产品的结构也很简单，几乎没有多余的页面，只保留了必要的拍品聚合页及拍品详情页外加一个排名页面，主要任务流程就是用户如何加价竞价。正是采用了这样小巧的结构才保证了紧迫的项目排期能顺利完成。此外，在制定微拍卖设计风格的时候，咱们的UI卜酷塔儿可是相当给力的，初稿即获得老大们的一致认可，一次通过，这在通常的项目中也是很少见的。
　　2）主打明星瀑布流
　　做微拍卖比做其他的公益产品有个很爽的地方就是：明星图片优势，比起那些凄惨的公益项目图片，明星图片简直是完美的设计素材，吸引眼球不在话下，所以我们毫不吝啬的呈现明星大图，本来按实际来说拍卖物品就该显示物品图片，不过在真实的效果面前，这点逻辑也就不太重要了。在聚合页里，我们采用了瀑布流设计，再结合明星真人照，整个首页的效果就是星光璀璨，咋眼看去很以为是在拍卖明星呢，第一眼能吸引用户的目的也就达到了。
　　3）新颖的CSS动画效果
　　在做瀑布流首页的时候，我们也得到了前端同学的给力支持，在解决页面加载方式的问题上，我们与young春宇同学讨论是否可以寻求一些新的CSS即可实现的交互效果，最终实现了图片扩散的形式进行页面加载，视觉上更增添了几分优雅
　　4）详情页首屏设计
　　在拍品的详情页面，虽然需要展示的信息也很多，但为了保证拍品效果及出价操作的易
　　用性，我们还是保留了整个首屏的空间用于显示拍品图片及出价操作，为了增强体验效果，对空间的使用毫不保留哈