关于网站里的微博组件改版的介绍详谈(图文)

　　写在前面
　　微博组件是微博开放平台针对第三方接入者提供的不需要开发即可实现网站接入的组件产品。将微博内容输出到第三方网站，用户在第三方网站上即可进行微博互动，分享内容、同步信息至微博，提高第三方网站用户活跃度。改版涉及到微博组件数14个，主要包括好友选择器、发布器、分享窗口等。
　　设计流程
　　与以往的产品改版的流程不一样，此次改版是由UDC和产品协同发起需求，交互设计师发挥最大主观能动性，控制设计中心的输出时间，与品牌视觉、页面构建、产品和开发效率沟通，小步快跑以提升更为良好的用户体验。
　　设计准备
　　找到问题(观察用户，手机反馈，集中梳理)(用户对象：开发者和使用者)——分析(结合场景，透过现象看本质，同时和产品一起结合数据分析)——解决问题(从整体到细节，结合用户需求解决问题)——继续跟进
　　设计过程中遵循的优化体验设计原则
　　原则一 避免让用户思考
　　减少影响用户完成某项"思考"或"任务"的噪音、减少岔路、减少多选题、为用户尽可能的减少操作;为禁用的重要控件，提供相应的提示。
　　如图所示分享窗口，后台直接预置文本，并按照当前页面富文本信息优先、高质量优先的原则默认选择，为用户尽可能的减少操作、减少多选题。同时输入为空或超字数时，分享按钮禁用，强制点击出现相应的提示。
　　与此同时，为了避免用户过多的冗余操作，可以提供个性化默认，为回访用户设置个性化默认选择，这样用户便能更快完成表单。这因为选项常常具有"粘性"，即保持用户之前的选择。 总结来说就是如果值得用户输入，就值得程序记住。用户在微群和微博之间进行切换，后台会保留并记住用户的之前的输入。
　　原则二 层级清晰，降低视觉噪音
　　层级关系需要以逻辑和信息结构为依托，同时需要在视觉上体现出来。但是如果使用过多的线框，厚重的背景，却会让人眼花缭乱——适得其反。其实简单的缩进就可以将层级关系表现出来 。
　　两像素的差别
　　我们可以看到富文本区域于输入框之间有两个像素的缩进，由于富文本的元素比较多，但终归是一个整体，区区两像素就可以将层级模块区分，而不需要增加更多的视觉元素，让页面太过复杂。
　　评论箱的结构
　　评论箱之前为扁平结构，即评论和回复都在同一层级，此时我们常常看到类似一群人在一起的聊天记录，浏览的用户很难明白谁和谁在聊什么样的问题。经过梳理，我们将评论分为两个层级，第一层级为，对该页面内容的评论;第二层级为对评论的回复。如下图所示，评论的回复默认是不显示的，展开后有50px的缩进，来表达出清晰的层级关系。
　　设置的层级
　　第三方的组件运用在外站，通常使用场景和环境很难一一估量。但是共同点就是外站寸土寸金，所以对于帮助类说明类的信息我们选择放在开放平台。开发者想要使用我们的产品的时候，首先需要了解我们的产品是什么，能为开发者带来什么。有了这样的基础，激起了兴趣之后，才会进一步的想去知道如何去使用。所以我们把整个页面分为三大部分——说明、收益和设置。然而文字总是会让额外呢提不起兴趣，那么何不辅助些简单明了的图片来形象的说明呢?
　　原则三 习惯是好帮手
　　习惯使用戶在网站中的体验更加流程，不用花费过多的学习成本来熟悉新的交互。微博有这样的交互，当输入为空或者字数溢出时，强制点击动作按钮，输入框的背景闪动来提示用户输入错误。那么同样是微博的产品，相似的交互完全是可以复用的。因为用户对网站的交互模式已经有了一定的理解，此时对于控件交互，做一些适当的移植，也未尝不是一个省力的好办法，同时还保证了交互的一致性。所以我们将闪动的错误提示移植到未选择微群时，用户就非常好理解下一步该怎么做了。
　　原则四 即时验证
　　不要用对话框来报告常态内容。因为对话框是另一个房间，去之前要有个好理由。 同时对输入的账户或密码，需要即时显示错误，以免表单填完才发现有错误，增加不必要的操作。
　　移动版本分享窗口登录时，输入为空的提示
　　分享到私信，筛选好友及时提示
　　分享窗口输入溢出的气泡提示
　　原则五 提供合适的输入框(文本框、单选按钮、复选框、下拉菜单、列表框)
　　确保输入框的长度能提供有意义的暗示，以帮助人们有效回答问题。如果无法提供暗示，输入框长度尽量保持一致，同时为答案提供足够空间。
　　微博组件中的输入框(微博发布器，微博评论箱，分享窗口等组件)，设计时输入框高度在整个组件中可以考虑一致。
　　选择微群的下拉控件，是根据微群名称的最大字符数选择合适的尺寸(15个中文字符)。此时空间比较充裕，所以选择最大字符数的长度，以减少字符的截断带来的隐藏tips。
　　原则六 根据不同的错误，提供不同的选择
　　首先要从设计上规避一些常见的错误选择出现，然后要去积极地解决每一个级别可能会出现的错误，确保更高比例的用户能有积极的体验。
　　分享到私信的提示
　　原则七 链接生来不平等
　　需要按照用户的需求将链接区分，弱链接和强链接在前端展现出来
　　原则八 使用颜色来吸引注意，使用风格统一的符号
　　颜色能把人的注意力吸引到特定的元素上去，尤其当某个元素的颜色与其他的形成反差时更是如此。我们把重要的操作按钮用较为明显的色彩标识出来。
　　用户更喜欢图形化的东西，而不是单纯的文字。
　　使用风格统一的符号。
　　相似法则(The Principle of Similarity)：是指具有相似特性(如大小、颜色、形状、方向等)的物体，会被观察者从感知和认知角度组合在一起。
　　接近法则(The Principle of Proximity)：观察者看到彼此邻近(空间或时间)的物体时会将它们视为一个整体，并认为它们由相近的含义。
　　原则九 保持一致，考虑标准，但一致性并不意味着僵化
　　规范在很多项目上都会非常强调，尤其是大项目。它可以用来规避掉，由于不同的设计师的设计风格不一致等原因带来的交互、样式上不同，从而造成的体验上的混乱。同时，在版本的交接和新人的加入时，规范也有着非常重要的作用。规范是指导性的，但是我们也不需要拘泥于规范的限制而忽略用户场景。我们需要让网站保持一致，但是这并不意味着僵化。设计之前，考虑标准，如果有变更，前提是需要一个更好的理由。如下图所示，组件上的操作按钮，如果不符合集火条件之前都是置灰，强制点击提示，比如分享。然而在设计评论箱时，我们考虑到，评论内容完全是用户原创，具有一定的输入成本。我们想刺激用户有评论的行为。此时，操作按钮就应为激活态来刺激用户的操作。
　　品牌视觉体验提升
　　此次整体视觉改版，梳理了来自产品、用户等各方面意见和需求。但是提案并不是像想象的那么一帆风顺。在项目过程中，我们也有过很多飞机稿。例如由于一开始微组件的视觉定位存在偏差，面对于依附于微博的站外组件，我们刚开始一味的尝试走统一的路线。没有跳出定势，闷头苦干，导致很多中间方案都胎死腹中。在中期品牌组@王史撞Strong 的介入，吸取经验与教训，并重新梳理了微组件的视觉定位和风格。
　　风格词：weibo;年轻;平台;
　　标准色：红、橙
　　品牌规范：
　　辅助图形：
　　辅助图形是品牌识别系统中不可或缺的一部分。简洁的三角形取自标识的方向键。随意组合，最大化了辅助图形的兼容性和拓展性。给应用设计以最大自由。所谓识别优于回想对事物的识别记忆比对事物的回想记忆要强。
　　辅助图形应用示例：
　　更加优雅的代码
　　之前组件的划分是按照代码的形式，分为iframe和js-sdk。由于产品是不断的迭代更新，而第三方网站调用号js-sdk形式的代码是无法获取到产品的更新，这对产品优化带来很多维护问题。同时js-sdk的代码字段一般在表现层面都比较长，这是因为iframe组件是把代码封装成一个包，第三方直接调用即可;而js-sdk的代码则全部是一个层级的;代码过长对于网站的体验是会有相应的影响的
　　基于这样的背景WBML就应运而生了
　　什么是WBML?
　　WBML (Weibo Markup Language) 是通过新浪微博JSSDK创建的一套简单标记语言，它允许用户使用WBML在网页中嵌入微博组件 (Weibo Widgets)，您也可继续使用iframe或js调用方式，目前仍提供支持。
　　简单的说就是一行js代码，引用一行代码(就是把iframe包在里面)
　　为什么使用WBML
　　方便简单的代码部署方式，一行代码即可调用组件
　　标签语义化的参数定制方式，使用起来更加方便。
　　优于iframe加载速度
　　示例
　　以使用最多的分享按钮为例， 目前的调用方式：

1. <script charset="utf-8" type="text/javascript">// <![CDATA[ (function(){
2. var _w = 72 , _h = 16;
3. var param = {
4. url:location.href,
5. type:'3',
6. count:'1', /**是否显示分享数，1显示(可选)*/
7. appkey:'', /**您申请的应用appkey,显示分享来源(可选)*/
8. title:'', /**分享的文字内容(可选，默认为所在页面的title)*/
9. pic:'', /**分享图片的路径(可选)*/
10. ralateUid:'', /**关联用户的UID，分享微博会@该用户(可选)*/
11. language:'zh_cn', /**设置语言，zh_cn|zh_tw(可选)*/
12. rnd:new Date().valueOf()
13. }
14. var temp = [];
15. for( var p in param ){
16. temp.push(p + '=' + encodeURIComponent( param[p] || '' ) )
17. }
18. document.write('<iframe allowTransparency="true" frameborder="0" scrolling="no" src="http://hits.sinajs.cn/A1/weiboshare.html?' + temp.join('&') + '" width="'+ _w+'" height="'+_h+'"></iframe>')
19. })()
20. // ]]></script>

使用WBML后，一行代码即可调用：

1. <wb:share-button></wb:share-button>

改变参数，以tag方式传入即可

1. <wb:share-button language="zh_tw"></wb:share-button>

最后，感谢@Eason-Shao 对我的指导，@阿bingben @王史撞Strong @柳明 大师级的设计，@青春的猴小野 @ice木木 牛逼的页面和神级的产品开发们。
文章来源：微博UDC