UED.Alimama.com

常用的清除浮动的方法有以下三种:

此为未清除浮动源代码，运行代码无法查看到父级元素浅黄色背景。

未清除浮动前如图所示：

三种清除浮动方法如下：

1、使用空标签清除浮动。我用了很久的一种方法，空标签可以是div标签，也可以是P标签。我习惯用<P>，够简短，也有很多人用<hr>，只是需要另外为其清除边框，但理论上可以是任何标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动，并为其定义CSS代码：clear:both。此方法的弊端在于增加了无意义的结构元素。

ps:<br clear=”all”/>也可以实现效果，但不清楚使用哪个比较好。呵呵

2、使用overflow属性。此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto，即可！overflow:auto;是让高度自适应， zoom:1;是为了兼容IE6，也可以用height:1%;的方式来解决,注意，zoom不符合W3C标准.

3、使用after伪对象清除浮动。after伪对象非IE浏览器支持，所以并不影响到IE/WIN浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为”.”，但我发现为空亦是可以的。

清除浮动后如图所示：

此三种方法各有利弊，使用时应择优选择，多次实践发现，第三种方法更为可取，既不用添加多余无意义的标签，又实用有效 。

2月13日，阿里妈妈UED的博客换肤项目正式启动，博客对于团队宣传的重要性可想而知，而博客皮肤就像人的外表，没人不希望自己的漂亮些，何况这皮肤是可以主观改变的。翻着这些资料和草稿，我们今天抖一抖，回顾一下换肤的过程吧。

既然要换肤当然得有个目标，作为UED团队，视觉上拉风抢眼，操作上良好的交互性是团队成员一致认同的。

OK，做事从收集情报资料开始。我们首先收集了一些国内比较有名的设计类交互类团队博客的截图，就皮肤的视觉效果和交互性上做了一定分析。从视觉上来看团队博客在设计上特别拉风的并不多，大多是选用稳重干净的颜色与质感。这时矛盾产生了，同样作为团队博客，妈妈到底是要拉风抢眼的外观还是随大流。先不管那么多，两条路都走走，于是有这样一些草稿。

第一稿，只做到了头部设计，似乎有那么些思路，但又没完全放开。

第二稿可以说是第一稿的延续，想法也较为简单，拉风嘛，顶部如果有一幅插话就好了，大致用素材摆弄了一下，如果这稿要深入下去顶部插话至关重要。颜色方便没有过多的考虑，并没选用阿里常用的橙色。

往集团颜色上靠一靠。但似乎一切的一切和UED团队没什么关系，这个思路PASS掉。

 继续拉风着，拉风导航，试验一下罢了。

 阿里妈妈文化衫中大鱼吃小鱼概念的引入，把这样有故事的图案放在博客顶部，博客在设计上会有一些阿里妈妈的味道在。

 念念不舍异性导航条，将其简化一下再加入小鱼概念，整体感觉“妈妈”了。

 抛弃异性导航，纯色简化版小鱼皮肤。

接下来是在白板小鱼的大框架下做了一个小调整的草稿。主要在于导航，标题栏背景以及各标签之间排列的一些尝试。

橙色微玻璃质感，和谐型设计。

干练的橙色风

 紫色版，由于色彩的原因被PASS掉，最终版选用了他的框架结构。

最终版，还是选用了稳重的色彩，顶部的小鱼LOGO显出妈妈团队特质，局部的结构上做了些小创新。

互联网产品的用户体验看着“很美”

这几年来，我们这个行业一直都在谈用户体验，以用户为中心的设计。“用户体验”是指用户访问网站的界面、功能、相关信息的可读性、操作的方便性，交互性等方面的过程中建立起来的心理感受，用户在产品服务过程中的印象和感觉是否满意等。大家都知道用户体验在产品中的重要性，我们集团各子公司也都建立了UCD流程。借用阿里软件的1张UCD流程图：

但真正做产品的都有体会，固然大家都知道用户体验很重要，但如果按上图的流程在项目中从头到尾实施起来还是有很多制约瓶颈。特别在互联网行业，互联网产品开发时间短，变化快,高速发展无标准是其特点。项目中时间摆在那，商业利益摆在那，如果不计成本的做下来，项目的pm，pd想必早跳脚了。这让设计师有时候不得不感叹用户体验看着“很美”。左边是用户，右边是商业，设计师需要去保持两边的平衡。当商业需求与用户体验发生冲突的时候，用户体验设计师有时不得不做取舍——用户体验有时必须先满足商业需求，或者屈尊于技术可行性。这就是用户体验设计师不得不面对的现实。。。。。  

之前我们部门的分享会上大家讨论过这个话题，怎么去做互联网产品的用户体验？如何尽量好的去达到用户，商业，技术三者的统一？如何快速迭代的开发产品？这边我先抛砖谈谈看法。

首先用户体验师必须去学着了解产品背后的商业背景、读懂BRD,PRD,将产品规划中必须达到的目标和你认为有碍于用户体验的点抽取出来，去挖掘需求背后的目的。

其次UCD流程中一些影响到产品发展的关键点应该尽量去实行。

在概要阶段：用户体验师要把PD需求文档中抽象的功能转化为用户需求。通过选择通过做概念图、信息架构（建立层次逻辑关系）、建立用户场景（了解服务的人群，更好审视产品）等方法来定产品的大方向。

在详细设计阶段：设计有完善交互流程的原型demo（这个阶段如果条件允许可以进行低保真demo的可用性测试，把产品交互上一些问题尽早的暴露出来。）在原型评审后跟进视觉设计。在前端完成页面后，最好进行次高保真的可用性测试，确保不会在开发好后才发现产品有大问题。

由于很多项目时间紧急，可能都没法进行可用性测试，设计师首先要会审视自己的设计哦！

下面介绍一些基本的可用性原则和规则：

7±2 原则

由于人类大脑处理信息的能力有限，它会将复杂信息划分成块和小的单元。根据乔治A米勒（George A. Miller）的研究，人类短期记忆一般一次只能记住5-9个事物。这一事实经常被用来作为限制导航菜单选项到7个的论据；然而关于神奇的“7，加2或者减2”还是引起了激烈的讨论。因此目前还不清楚是否7±2原则能、可能或应该应用到web中。米勒的研究

2秒原则

一个松散的原则，即用户没有必要对某些系统响应等待2秒以上的时间，比如应用程序转换和开始的响应时间。选择2秒有点武断，但确是一个合理的数量级。可靠的原则就是：用户等待时间越少，用户体验越好。[可用性优先]

3次点击原则

根据这个原则，如果用户在3次点击中无法找到信息和完成网站功能时，用户就会停止使用这个网站。换句话说，这个原则强调明确的导航，逻辑架构和后续站点的层次结构。在大多数情况下，点击的次数是无关紧要的；真正重要的是，游客总是能知道他们现在在哪，他们去过哪，他们接着将会去哪。如果用户感觉他们对该系统如何运作有个充分的了解的话，甚至10次点击，用户都会觉得OK。

80/20原则（帕累托原则）

帕累托原则（也被称为重要少数法则和因素稀疏原则）指出，80%的效应来自20%的原因。这是商业中的基本经验法则（“80%的销售额来自20%的顾客”），但也可以应用于设计和可用性。举例来说，我们可以通过确定那些贡献80%利润的20 ％的用户、客户、活动、产品或程序，并最大限度地注意对他们适用，来显著提高效应。[帕累托原则在维基百科]

8个接口设计的金科玉律

作为接口设计研究的成果， Ben Shneiderman提出并收集了一些从经验中启发而来，适用于大多数交互系统的原则。这些原则适用于用户接口设计，也适用于网页设计。

1. 争取保持一致性

2. 为老用户提供可用的快捷方式

3. 提供有益的反馈

4. 设计结束功能的对话框

5. 提供简单的错误处理

6. 允许简单的逆转功能

7. 提供控制感。支持内部控制点

8. 减少短期记忆

费茨定律

由保罗费茨（Paul Fitts）发表于1954年，费茨定律模拟了人类活动，以目标距离和目标规模大小为函数，预测了迅速移动到目标区所需时间。该法通常应用到鼠标的移动，访客就必须从A点移动到B点。例如，这个规则对于如何放置内容区域，以更实用的方式，最大化内容可及性和提高内容点击率，是非常重要的。

倒金字塔

倒金字塔是一种在文章开头表达总结文字的写作风格。这种方式使用了新闻业中著名的“瀑布效应”，新闻作者试图让他们的读者即时知道他们的报道的主题。文章以总结开头，接着是关键点，最后那些次要的细节，如背景资料。由于网络用户需要即时的满足，这种倒金字塔写作风格，对于网络写作和更好的用户体验是非常重要的。就像尼尔森的支持

满意

网络用户不喜欢用最佳方式找到他们寻找的信息。他们对最合理和最健全的解决问题方案不感兴趣。相反，他们永远扫描他们认为“足够好”的quick’n'dirty解决方案。在网络中，这种方式准确地描述了用户的满意：用户使用一个“足够好”的方案解决问题——即时在长远看来一些替代方案能够更好地满足他们的要求。