微博组件改版的那些事儿

时间:2014-09-14

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

  • 共4页:
  • 上一页
  • 4/4下一篇
    上一篇:我们能从Google的全新UI中学到什么 下一篇:用数据辅助设计-搜索中的实践

    相关文章

    最新文章