写在前面
新浪微博组件是新浪微博对外开放服务平台对于第3方接入者出示的不必须开发设计便可完成网站接入的组件商品。将新浪微博內容輸出到第3方网站，客户在第3方网站上便可开展新浪微博互动交流，共享內容、同歩信息内容至新浪微博，提升第3方网站客户活跃度。改版涉及到到新浪微博组件数14个，关键包含朋友挑选器、公布器、共享对话框等。
设计方案步骤 与过去的商品改版的步骤不1样，此次改版是由UDC和商品协作进行要求，互动设计方案师充分发挥最大主观性能动性，操纵设计方案管理中心的輸出時间，与品牌视觉效果、网页页面搭建、商品和开发设计高效率沟通交流，小步快跑以提高更加优良的客户体验。
设计方案提前准备 寻找难题(观查客户，手机上意见反馈，集中化整理)(客户目标：开发设计者和应用者)——剖析(融合情景，透过状况看实质，另外和商品1起融合数据信息剖析)——处理难题(从总体到细节，融合客户要求处理难题)——再次跟进
设计方案全过程中遵照的提升体验设计方案标准
标准1 防止让客户思索
降低危害客户进行某项"思索"或"每日任务"的噪声、降低岔道、降低多选题、为客户尽量的降低实际操作;为禁用的关键控制，出示相应的提醒。
如图所示共享对话框，后台管理立即预置文字，并依照当今网页页面富文字信息内容优先选择、高品质优先选择的标准默认设置挑选，为客户尽量的降低实际操作、降低多选题。另外键入为空或超篇幅时，共享按钮禁用，强制性点一下出現相应的提醒。
与此另外，以便防止客户过量的冗余实际操作，能够出示个性化化默认设置，为回访客户设定个性化化默认设置挑选，这样客户便能更快进行表单。这由于选项经常具备"粘性"，即维持客户以前的挑选。 总结来讲便是假如值得客户键入，就值得程序流程记牢。客户在微群和新浪微博之间开展切换，后台管理会保存并记牢客户的以前的键入。
标准2 等级清楚，减少视觉效果噪声 等级关联必须以逻辑性和信息内容构造为借助，另外必须在视觉效果上反映出来。可是假如应用过量的线框，厚重的情况，却会令人头晕眼花缭乱——得不偿失。实际上简易的缩进便可以将等级关联主要表现出来 。
两像素的区别
大家能够看到富文字地区于键入框之间有两个像素的缩进，因为富文字的元素较为多，但终究是1个总体，小小两像素便可以将等级控制模块区别，而不必须提升更多的视觉效果元素，让网页页面太过繁杂。
评价箱的构造 评价箱以前为扁平构造，即评价和回应都在同1等级，此时大家经常看到相近1群人在1起的闲聊纪录，访问的客户很难搞清楚谁和谁在聊甚么样的难题。历经整理，大家将评价分成两个等级，第1等级为，对该网页页面內容的评价;第2等级为对评价的回应。以下图所示，评价的回应默认设置是无法显示的，进行后有50px的缩进，来表述出清楚的等级关联。
设定的等级 第3方的组件应用出外站，一般应用情景和自然环境很难11估算。可是相互点便是外站寸土寸金，因此针对协助类表明类的信息内容大家挑选放在对外开放服务平台。开发设计者要想应用大家的商品的情况下，最先必须掌握大家的商品是甚么，能为开发设计者带来甚么。有了这样的基本，激发了兴趣爱好以后，才会进1步的想去了解怎样去应用。因此大家把全部网页页面分成3绝大多数——表明、盈利和设定。但是文本一直会让附加呢提不起兴趣爱好，那末为何不輔助些简易明了的照片来形象的表明呢?
标准3 习惯性是好助手 习惯性应用戶在网站中的体验更为步骤，无需花销过量的学习培训成本费来熟习新的互动。新浪微博有这样的互动，当键入为空或篇幅外溢时，强制性点一下姿势按钮，键入框的情况闪烁来提醒客户键入不正确。那末一样是新浪微博的商品，类似的互动彻底是能够复用的。由于客户对网站的互动方式早已有了1定的了解，此时针对控制互动，做1些适度的移殖，也何尝并不是1个省劲的好方法，另外还确保了互动的1致性。因此大家将闪烁的不正确提醒移殖到未挑选微群时，客户就十分好了解下1步该如何做了。
标准4 及时认证
不必用会话框来汇报常态內容。由于会话框是另外一个房间，去以前要有个好理由。 另外对键入的账户或登陆密码，必须及时显示信息不正确，以防表单填完才发现有不正确，提升无须要的实际操作。
挪动版本号共享对话框登陆时，键入为空的提醒
共享到私信，挑选朋友立即提醒
共享对话框键入外溢的气泡提醒
标准5 出示适合的键入框(文字框、单选按钮、复选框、往下拉菜单、目录框)
保证键入框的长度能出示成心义的暗示，以协助人们合理回应难题。假如没法出示暗示，键入框长度尽可能维持1致，另外为回答出示充足室内空间。
新浪微博组件中的键入框(新浪微博公布器，新浪微博评价箱，共享对话框等组件)，设计方案时键入框高宽比在全部组件中能够考虑到1致。
挑选微群的往下拉控制，是依据微群名字的最大标识符数挑选适合的规格(15个汉语标识符)。此时室内空间较为充足，因此挑选最大标识符数的长度，以降低标识符的断开带来的掩藏tips。
标准6 依据不一样的不正确，出示不一样的挑选 最先要从设计方案上避开1些普遍的不正确挑选出現，随后要去积极主动地处理每个级別将会会出現的不正确，保证更高占比的客户能有积极主动的体验。
共享到私信的提醒
标准7 连接生来不公平
必须依照客户的要求将连接区别，弱连接和强连接在前端开发呈现出来
标准8 应用色调来吸引住留意，应用设计风格统1的标记 色调能把人的留意力吸引住到特殊的元素上去，特别当某个元素的色调与别的的产生反差时更是这般。大家把关键的实际操作按钮用较为显著的颜色标志出来。
客户更喜爱图型化的物品，而并不是单纯性的文本。
应用设计风格统1的标记。
类似规律(The Principle of Similarity)：是指具备类似特点(如尺寸、色调、样子、方位等)的物件，会被观查者从认知和认知能力角度组成在1起。
贴近规律(The Principle of Proximity)：观查者看到相互相邻(室内空间或時间)的物件时会将它们视作1个总体，并觉得它们由相仿的含意。
标准9 维持1致，考虑到规范，但1致性其实不代表着僵化
标准在许多新项目上都会十分强调，特别是大新项目。它能够用来避开掉，因为不一样的设计方案师的设计方案设计风格不1致等缘故带来的互动、款式上不一样，从而导致的体验上的错乱。另外，在版本号的工作交接和新人的添加时，标准也是有着十分关键的功效。标准是具体指导性的，可是大家也不必须拘泥于标准的限定而忽视客户情景。大家必须让网站维持1致，可是这其实不代表着僵化。设计方案以前，考虑到规范，假如有变动，前提条件是必须1个更好的理由。以下图所示，组件上的实际操作按钮，假如不符集火标准以前全是置灰，强制性点一下提醒，例如共享。但是在设计方案评价箱时，大家考虑到到，评价內容彻底是客户原創，具备1定的键入成本费。大家想刺激性客户有评价的个人行为。此时，实际操作按钮就应为激活态来刺激性客户的实际操作。
品牌视觉效果体验提高
此次总体视觉效果改版，整理了来自商品、客户等各层面建议和要求。可是提议其实不是像想像的那末1帆风顺。在新项目全过程中，大家也是有过许多飞机稿。比如因为1刚开始微组件的视觉效果精准定位存在误差，应对于依附于于新浪微博的站外组件，大家一开始1味的尝试走统1的线路。沒有跳出来定势，闷头苦干，致使许多正中间计划方案都胎死腹中。在中期品牌组@王史撞Strong 的干预，汲取工作经验与经验教训，并再次整理了微组件的视觉效果精准定位日风格。
设计风格词：weibo;年青;服务平台; 规范色：红、橙
品牌标准： 輔助图型：
輔助图型是品牌鉴别系统软件中不能或缺的1一部分。简约的3角形取自标志的方位键。随便组成，最大化了輔助图型的适配性和扩展性。给运用设计方案以最大随意。所谓鉴别优于回想对事情的鉴别记忆力比对事情的回想记忆力要好。
輔助图型运用示例：
更为雅致的编码
以前组件的区划是依照编码的方式，分成iframe和js-sdk。因为商品是持续的迭代更新升级，而第3方网站启用号js-sdk方式的编码是没法获得到商品的升级，这对商品提升带来许多维护保养难题。另外js-sdk的编码字段1般在主要表现层面都较为长，这是由于iframe组件是把编码封裝成1个包，第3方立即启用便可;而js-sdk的编码则所有是1个等级的;编码太长针对网站的体验是会有相应的危害的
根据这样的情况WBML就应运而生了
甚么是WBML?
WBML (Weibo Markup Language) 是根据微博JSSDK建立的1套简易标识語言，它容许客户应用WBML在网页页面中嵌入新浪微博组件 (Weibo Widgets)，您也可再次应用iframe或js启用方法，现阶段仍出示适用。
简易的说便是1行js编码，引入1行编码(便是把iframe包在里边)
为何应用WBML
便捷简易的编码布署方法，1行编码便可启用组件
标识词义化的主要参数订制方法，应用起来更为便捷。
优于iframe载入速率
示例
以应用数最多的共享按钮为例， 现阶段的启用方法：
- <script charset="utf⑻" type="text/javascript">// <![CDATA[ (function(){
- var _w = 72 , _h = 16;
- var param = {
- url:location.href,
- type:'3',
- count:'1', /**是不是显示信息共享数，1显示信息(可选)*/
- appkey:'', /**您申请办理的运用appkey,显示信息共享来源于(可选)*/
- title:'', /**共享的文本內容(可选，默认设置为所属网页页面的title)*/
- pic:'', /**共享照片的相对路径(可选)*/
- ralateUid:'', /**关系客户的UID，共享新浪微博会@该客户(可选)*/
- language:'zh_cn', /**设定語言，zh_cn|zh_tw(可选)*/
- rnd:new Date().valueOf()
- }
- var temp = [];
- for( var p in param ){
- temp.push(p + '=' + encodeURIComponent( param[p] || '' ) )
- }
- document.write('<iframe allowTransparency="true" frameborder="0" scrolling="no" src="http://hits.sinajs.cn/A1/weiboshare.html?' + temp.join('&') + '" width="'+ _w+'" height="'+_h+'"></iframe>')
- })()
- // ]]></script>
应用WBML后，1行编码便可启用：
- <wb:share-button></wb:share-button>
更改主要参数，以tag方法传入便可
- <wb:share-button language="zh_tw"></wb:share-button>
最终，谢谢@Eason-Shao 对我的具体指导，@阿bingben @王史撞Strong @柳明 高手级的设计方案，@青春年少的猴小野 @ice木木 牛逼的网页页面和神级的商品开发设计们。
文章内容来源于：新浪微博UDC
