微博组件改版的那些事儿

　　两像素的差别

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

　　评论箱的结构

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

　　设置的层级

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

　　原则三 习惯是好帮手

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

　　原则四 即时验证

　　不要用对话框来报告常态内容。因为对话框是另一个房间，去之前要有个好理由。 同时对输入的账户或密码，需要即时显示错误，以免表单填完才发现有错误，增加不必要的操作。

　　移动版本分享窗口登录时，输入为空的提示