用户体验分析：微博组件改版的那些事儿

　　微博组件是微博开放平台针对第三方接入者提供的不需要开发即可实现网站接入的组件产品。将微博内容输出到第三方网站，用户在第三方网站上即可进行微博互动，分享内容、同步信息至微博，提高第三方网站用户活跃度。改版涉及到微博组件数14个，主要包括好友选择器、发布器、分享窗口等。

　　设计流程

　　与以往的产品改版的流程不一样，此次改版是由UDC和产品协同发起需求，交互设计师发挥最大主观能动性，控制设计中心的输出时间，与品牌视觉、页面构建、产品和开发效率沟通，小步快跑以提升更为良好的用户体验。

　　设计准备

　　找到问题(观察用户，手机反馈，集中梳理)(用户对象：开发者和使用者)——分析(结合场景，透过现象看本质，同时和产品一起结合数据分析)——解决问题(从整体到细节，结合用户需求解决问题)——继续跟进

　　设计过程中遵循的优化体验设计原则

　　原则一 避免让用户思考

　　减少影响用户完成某项”思考”或”任务”的噪音、减少岔路、减少多选题、为用户尽可能的减少操作;为禁用的重要控件，提供相应的提示。

　　如图所示分享窗口，后台直接预置文本，并按照当前页面富文本信息优先、高质量优先的原则默认选择，为用户尽可能的减少操作、减少多选题。同时输入为空或超字数时，分享按钮禁用，强制点击出现相应的提示。

　　与此同时，为了避免用户过多的冗余操作，可以提供个性化默认，为回访用户设置个性化默认选择，这样用户便能更快完成表单。这因为选项常常具有“粘性”，即保持用户之前的选择。 总结来说就是如果值得用户输入，就值得程序记住。用户在微群和微博之间进行切换，后台会保留并记住用户的之前的输入。

　　原则二 层级清晰，降低视觉噪音

　　层级关系需要以逻辑和信息结构为依托，同时需要在视觉上体现出来。但是如果使用过多的线框，厚重的背景，却会让人眼花缭乱——适得其反。其实简单的缩进就可以将层级关系表现出来 。

　　两像素的差别

　　我们可以看到富文本区域于输入框之间有两个像素的缩进，由于富文本的元素比较多，但终归是一个整体，区区两像素就可以将层级模块区分，而不需要增加更多的视觉元素，让页面太过复杂。

　　评论箱的结构

　　评论箱之前为扁平结构，即评论和回复都在同一层级，此时我们常常看到类似一群人在一起的聊天记录，浏览的用户很难明白谁和谁在聊什么样的问题。经过梳理，我们将评论分为两个层级，第一层级为，对该页面内容的评论;第二层级为对评论的回复。如下图所示，评论的回复默认是不显示的，展开后有50px的缩进，来表达出清晰的层级关系。

　　设置的层级

　　第三方的组件运用在外站，通常使用场景和环境很难一一估量。但是共同点就是外站寸土寸金，所以对于帮助类说明类的信息我们选择放在开放平台。开发者想要使用我们的产品的时候，首先需要了解我们的产品是什么，能为开发者带来什么。有了这样的基础，激起了兴趣之后，才会进一步的想去知道如何去使用。所以我们把整个页面分为三大部分——说明、收益和设置。然而文字总是会让额外呢提不起兴趣，那么何不辅助些简单明了的图片来形象的说明呢?

　　原则三 习惯是好帮手

　　习惯使用戶在网站中的体验更加流程，不用花费过多的学习成本来熟悉新的交互。微博有这样的交互，当输入为空或者字数溢出时，强制点击动作按钮，输入框的背景闪动来提示用户输入错误。那么同样是微博的产品，相似的交互完全是可以复用的。因为用户对网站的交互模式已经有了一定的理解，此时对于控件交互，做一些适当的移植，也未尝不是一个省力的好办法，同时还保证了交互的一致性。所以我们将闪动的错误提示移植到未选择微群时，用户就非常好理解下一步该怎么做了。

　　原则四 即时验证