李小帅

先驱版：网易——网聚猪的力量。
直白版：搜狐——上搜狐 吃猪肉。
省事版：百度——百度一下 你就吃到。
专注版：诺基亚——科技以猪为本。
愿景版：飞利浦——让我们养的更胖。
温暖版：佳能——猪肉长在。
炫舞版：佳能 伊克萨斯——你好，猪肉。
悬疑版：联想——人类失去猪肉，世界将会怎样？
年轻版：动感地带——我的猪圈听我的。

自信版：特步——猪一般的感觉。
豪情版：劲霸——给你这样的猪肉，劲霸猪肉，kingboxing。
浪漫版：利群——让猪肉去旅行...
飘逸版：白沙——猪拱白沙，我心飞翔。

迷信版：福星酒——吃猪肉 交好运。
脑残版：自然堂——羡慕我漂亮么？猜的出我多重么？自然堂，猪本来就很美。

草根版：淘宝——淘你猪肉。
使命版：阿里巴巴——让天下没有难吃的猪。
诚信版：支付宝——你敢吃 我敢养。

额外奉上一猥琐版：附言洁——洗洗更好吃...

其他的大家补充啦~~

―■―■ | ■■ | ―■■ | ■■

――■― | ■■ | ■― | ―■ | ―■■ | ■■― | ―――

■―■ | ■ | ―■ | ■■■ | ■■■■ | ■―

■■■ | ■■― | ■―■■ | ■― | ■■

我就说我能用摩斯码写小说么，是真的！

破译请参照摩斯码编译原理图。

阿里巴巴中文站 （资深/高级）交互设计师

工作职责：
1. 根据产品需求制定交互方案，输出产品原型和设计说明文档。
2. 对阿里巴巴现有各产品线进行设计优化，提升用户体验。
3. 标准交互控件的设计、封装，用户体验设计指南/规范的建设和维护。

职位要求：
1. Nice，open，有同理心，擅于换位思考，对新鲜事物充满好奇，擅于发现。
2. 对交互和用户体验设计有深刻理解，并具备自己完整的知识和理论体系。
3. 2年以上互联网体验设计经验，至少独立完成过一个大型完整项目中的交互设计工作。
4. 具备较强的逻辑思维能力和表达沟通能力。擅于说服和达成共识。
5. 丰富的知识和阅历，对用户习惯有研究，具备一定的设计前瞻性。一定的视觉设计和html技能。
6. 工业设计、计算机、视觉传达、心理学、信息学相关背景；资深网虫。

我们提供：
1. 行业内具有竞争力的薪酬福利，以及潜在的长期收益机会。
2. 电子商务领军企业的工作经历和发展平台。
3. 平等、独立的工作氛围，敞亮、宽松的工作环境。

该职位工作地点为杭州。有兴趣或问题请E-mail至 long.lil@alibaba-inc.com。请注明“交互”。


阿里巴巴中文站 （资深/高级）视觉设计师

工作职责：
1. 网站产品界面的视觉设计及在线推广设计。
2. 视觉、情感需求分析，建立产品线视觉模型，对网站产品进行持续视觉优化。
3. 网站视觉标准、用户体验设计指南/规范的建立和维护。

职位要求：
1. Nice，colorful，有气质，热爱生活，乐于观察，擅长图形化表达。
2. 对视觉传达理论和方法有深刻理解，具备优秀的GUI设计理念和方法，熟悉网站界面开发流程。
3. 2年以上GUI设计经验，至少2套完整的让人赏心悦目的设计作品。
3. 优秀的创新意识和创新能力。擅于说服和达成共识。
4. 精通photoshop、illustrator、flash、dreamweaver等常用设计软件；具备一定html知识。
5. 视觉传达、工业设计、艺术设计相关背景。

我们提供：
1. 行业内具有竞争力的薪酬福利，以及潜在的长期收益机会。
2. 电子商务领军企业的工作经历和发展平台。
3. 平等、独立的工作氛围，敞亮、宽松的工作环境。

该职位工作地点为杭州。有兴趣或问题请E-mail至 long.lil@alibaba-inc.com。请注明“视觉”并附带作品。

1. {[(0.85+0.35-0.3-0.4)*12+(2.44+1.26)]*3+0.5*3}+0.3*12*4=30.6+14.4
2. y=(x-5.54)*2   (x≥40 x≈=86.27)
3. 以老板为中心的设计。
4. 轻、慎、勤、忍。
5. 回归。

该[指南]版权以及最终解释权为阿里巴巴（中文站）用户体验设计部 及作者李龙（李小帅）所有，转载请注明出处。

什么是布局？
“布局”是指页面内容的尺寸、间距及位置。有效的布局对于帮助用户快速找到他们想要的内容至关重要，并可以在结构外观上令用户感到舒服。

如何设计有效的布局？

1. 具有清晰的视觉层次。布局应当让页面各元素之间的关系和重要性一目了然。你可以通过适当使用下列属性来实现视觉层次：

• 焦点：指用户首先关注的区域。形式上被赋予焦点属性的UI元素一定要表达重要的内容。
• 视觉流：指用户关注区域的顺序。可以根据任务逻辑和用户的浏览习惯来设计恰当的视觉流。好的视觉流应该清晰、合理、顺畅、自然。

• 关联：在逻辑上相关的UI元素应具有清晰的视觉关系。 

              错误：
             
              逻辑上相关的UI元素在空间上被分隔，且没有明显的视觉关联。

• 对齐：使页面工整，信息呈现有序，便于用户扫视。

              错误：
             
              没有对齐影响了页面效果且不便于用户扫视。不要因为功能需要和对极限情况的顾虑而轻易牺牲掉页面的视觉展现。

• 强调：可以根据UI元素间的相对重要程度进行强调。

2.针对用户的阅读模式来设计布局。

• 大部分人的阅读习惯是从左向右，至上而下。

• 阅读分为沉浸式阅读（immersive reading）和扫视（scanning），前者的目的在于理解，后者在于定位。

• 浏览网站时，用户不会沉浸在UI本身，而是沉浸在他们的目标任务中，因此扫视是最常使用的阅读模式。用户只在确信必要时才仔细阅读大量文本。

• 针对扫视的布局设计可以适当强调主要的UI元素，弱化次要的。包括：

             1)将主UI元素放在扫视路径上。
             2)避免将重要信息放在左下角或者页面底端或者需要滚动很多的控件上。
             3)考虑使用渐进展开方式来隐藏次要的UI元素。
             4)将任务相关的重要信息要直接表现在控件上。用户更倾向于关注交互控件上的标签，而不是辅助型的静态文本。
                      错误：
                     
                      用户必须阅读辅助型文本后才能明确“确定”按钮的作用。

                       正确：
                     
                      直接将按钮的作用描述作为控件标签，便于用户理解。
             5）不要展示大段文本，去除不必要的文本。多文本时格式化展示。

注：常规模式也存在例外。眼动议实验指出，真实用户的行为很没有规律。此模式的目的在于帮助你做出更好的决定，而不是精准的描述用户行为。

3.合理利用页面空间。

• 保持页面的视觉平衡。避免拥挤和对空间的浪费。

• 确保关键数据没有被截断，除非数据特别长。

              错误：
             
              有效空间没有被充分利用，从而导致多条关键数据被截断。

• 控件的尺寸和间距恰当，没有不必要的滚动。一个任务尽量在一屏内完成。

• 实际情况中，我们用户的页面空间要小于屏幕分辨率，它会因各种因素而压缩，如：非全屏操作（弹出窗口和对比浏览），浏览器本身及各种辅助栏对屏幕的占用等，设计中要考虑这些情况。

                 
4.不要让布局本身成为突出的UI元素，保持视觉简洁（visual simplicity）。

• 减少内容和展现上的嵌套层级。

• 减少控件不同尺寸的数量，例如，在界面上只使用一两种按钮宽度。

• 采用轻量级的分组和分割方式，可以用布局本身和分隔符代替分组框。

• 使用尽量少的对齐线。

5.选择与页面类型相匹配的版式。在设计之初，应充分考虑页面承载的内容、功能和属性，继而选择适合该页面的版式。不合适的版式会造成用户的阅读困扰，降低任务的完成效率。

标准和规范：

1.栅格化：

• 我们所说的栅格化是指在网页设计工作中对栅格系统的建立和应用。网页栅格系统来源于平面栅格系统，它以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。

• 栅格化可以使信息呈现工整简洁、美观易读，降低页面开发和运维成本。它结构变化相对灵活，扩展性强。

2.以8px为横向栅格单位：

• 以8px为横向栅格单位，页面所有元素宽度都可以是2的倍数，包括图片和版块宽度，这样可以在一定程度上加快页面（特别是对于J-PEG图片）的渲染速度（基于计算机内部二进制的运算机制）。其在扩展和兼容性上也有一定优势。

• 在阿里巴巴中文站中，布局间距的最小单位为8px，布局区块采用32px（8px*4）和24（8px*3）两种粒度单位，分别组成以下两种可实现的栅格系统：

        32px:适用于市场、社区等相关页面
       

        24px:适用于旺铺相关页面
       

3.页面定宽：

• 自适应可以根据浏览器显示情况自动调整页面宽度，但是因为用户水平方向的聚焦范围有限，所以当页面过宽时，用户的浏览和操作成本会增加；而当页面过窄时（如用户同时开启两个浏览器对比查看商品搜索结果），自适应则会导致布局变形和内容错乱。给页面规定宽度可以避免这些问题。

• 在综合考虑当下主流分辨率情况、浏览器外观对显示空间的占用、人机工程学中对水平视角和聚焦范围的规定以及8px单位等多种因素后，我们认为960px是一个相对更加合理的页面宽度。在阿里巴巴中文网站中，推荐使用定宽960px的页面，去除左右各4px的边距，中间的可视宽度为952px。

百度所谓的框计算，核心概念就是由“识别用户的输入文字”提升到“理解用户的真实意图”。比如，你在文本框中输入“今天几号？”，搜索引擎会给你显示日历告诉你今天是8月24，而不会只是拆分关键字后罗列相关搜索结果。如此般的人机交互，心有灵犀点一下就通，看上去十分梦幻，但仔细分析后你会发现，这个框计算，只是又诓了我们一下而已。

1.框计算只是包装了一下互联网发展的方向。
我不认为对用户真实意图的了解是需要专门拿出来炒的概念，不管是基于用户行为轨迹的分析，还是根据检索习惯对输入文本包含的内在语义进行判断，都是尝试理解用户真实需求的一种手段。说白了，这就是设计中所谓的“人性化”，整个互联网人都在这么追求。只不过有的人润物无声，将对用户的理解融入血液；有的人则老曲常弹，黄了的瓜却一遍遍刷绿漆。

2.百度这样包装是为了强行拉客。
那百度为什么非要包一下？百度的野心是从信息入口变成需求入口，甚至整合所有API，变成互联网生活平台。百度最终要培养用户一个习惯：产生任何需求都通过百度来解决。然而这是一个漫长而艰辛的建立过程，光靠技术潜移默化太慢了，不如包装忽悠来的爽快。我不需要你慢慢培养这个意识，我只需要你接受我传达给你的观念。这个做法虽然流氓，但的确事半功倍，能在短时间内给百度带来人、关注和认可。

3.其实这种类似的功能google早就有。
百度宣传中提到的对天气查询、时刻表查询和数字计算等的自动识别，其实是google早已实现的。

4.百度目前实现的还只是demo。
我十分怀疑目前百度只是匹配了几个概念宣传中用到的关键词而已，根本没有做意图分析。感兴趣同学的可以分别搜一下“列车时刻表”和“列车”，看一看老百到底有没有体会你的真实意图。之后再对比一下google的搜索结果，看看哪个对你更有用。

Wednesday, August 12, 2009
红十字会的女护士学员手持点燃的蜡烛参加南丁格尔的纪念活动。摄影师：Junji Kurokawa

Tuesday, Aug 04, 2009
一只溺爱孩子的天鹅母亲将6只小天鹅全部藏在她的翅膀之下,Bicton公园，英国。

                团队创意T恤图案。你看见了什么呢？

公司的新园区大体上还是让人满意的，设施基本是没得挑，身处荒郊野外仗着地价便宜，想盖啥盖啥（TNND）。之前曾疯传这里面有自己的电影院，可是目前为止我见过的最大场面也就一中型礼堂，怀疑是谣起者把投影仪当成了放映机；目前里面部分装修还没完成，有些地方空气污染严重，道听有两位身处重灾区的mm轻度甲醛中毒歇菜了。大家人心惶惶，都怕从新大楼的先驱变成先烈，现在八仙过江各护各裆，放眼望去，整个办公区里就是防毒面具口罩力克醛盆栽竹炭包柚子皮菠萝和力度伸的天下... 囧z

傻瓜大手笔添置一枚电钢，我真心求教，学弹两首歌，终于千辛万苦之后宣告成功，但基本上都是建立在对琴键位置及点击顺序的记忆上。我这人自认不缺悟性记性甚至是对艺术的鉴赏力，可就是没有音乐细菌，扯着嗓子喊着dou，实际上却能唱出8个音，具体是哪个那还是随机的。这点经常被傻瓜嘲笑，但我真的有个疑问，当初谁规定在这个音频音高上一定要叫do呢，我就是喊fa，怎么了？--b

之前跟某总监吃饭时学了个牛逼算法，能用营收利润率总股本和市盈率一步导出未来股价。但我所说的牛逼并不是指这个算法本身，而是用它算出的阿里股价是吓人的且算法本身看上去又没有任何问题。惊艳和暗爽之余又不禁感慨，这帮所谓的领路人们啊，就是擅于给别人画饼，并且还能让这帮人相信，这个饼是可以吃的。

一个UI上的“反馈信息”主要有两种分类角度：

    从形式上分：
        ● 工具/信息提示  （Tool/Info Tips）
        ● 就地信息 （In-place Messages）
        ● 气球状通知 （Balloons）
        ● 对话框  （Dialog Boxes）

    从内容上分:
        ● 信息 （Info）
        ● 警告 （Warning）
        ● 错误 （Error）
        ● 确认 （Confirmation）

    注：这里没有用到“alert”这个概念，因为它是一种“形式（对话框）+内容（四种都有）”的组合应用。它是从“作用”的角度来分的。

反馈信息的定义和设计原则：
   （一）工具/信息提示 （Tool/Info Tips）

        定义：
        工具/信息提示 （以下统称为“提示”）是指一个小的弹出窗口，用于标注或精确描述被指向对象，例如工具栏控件、图标、图形、按钮、链接等。提示可以看作是渐进展开式控件（Progressive Disclosure）的一种形式。

       简要原则：
        1. 触发方式为鼠标悬停，当用户单击控件、移动鼠标、或是提示超时后移除。提示本身不需要用户进一步的交互。
        2. 提供的是除错误、警告和状态描述之外的辅助型信息内容。主要任务的必须信息不要使用提示，应该直接放在UI里。
           
        3. 提示的信息应简洁、实用。避免不带格式的大段文本（难以阅读）；避免提供用户显而易见的信息或只是重复屏幕上的文字。
             错误：
           
             错误：
            
        4. 设定合理的显示时间:
                 显示:指为了显示提示，鼠标指针须保持不动的时间，一般为0.5s。
                 重现:指鼠标指针从一个目标移到另一个目标上后须保持不动的时   间,一般为0.1s。较短的重现时间能方便用户连续查看。
                 移除:指提示在多长时间后将自动消失，一般为5s。
        5. 按照统一的方式使用提示，通过提高可预见性来提高它的可发现性。如果为某些对象提供了提示，就也应当为所有类似的用户可能想获取辅助信息的对象提供提示。前提是必须确保这些提示是有用的，且符合原则2。
        6. 避免遮挡用户可能会去查看或者操作的对象，即使会造成鼠标指针与提示的分离。这样的分离问题不大，因为对象和其提示之间的关系仍然非常清晰。
             错误：
           
             正确：
           

        7. 慎用提示。不要把提示当成设计的补救手段。如果图形、按钮或其他对象需要用户反复查看提示才能理解的话，这其实就是不好的设计。应当对设计进行修改。

                “反馈信息”的分类及简要设计原则（2/3）
                “反馈信息”的分类及简要设计原则（3/3）

更多照片->

书灯，灯、书架、书签的三位一体。把书放在书签上就关灯, 拿起再读时则亮, 与生活中的读书体验完美契合。把它放在床头, 还会每天都提醒你读书。由四位法国设计师 Jun Yasumoto, Alban Le Henry, Olivier Pigasse, Vincent Vandenbrouck 共同设计:

我想到的两个问题是：
1.书看完用不到书签的时候，得为了关掉它而刻意拿东西盖上。这意境一下子就差了很多。
2.貌似没有荧光提示，黑暗中只能凭借空间记忆去摸索，得当心把书碰到地上去。

ps: 如果你不读书，只读kindle，这玩意还是别买了。单看上去，长的还蛮诡异的一个。

听说个事情，产品人员A拿着类似如下的这张图跟交互设计B说：这个页面的原型我替你做好了，你让C开始视觉设计吧... ...

听完挺郁闷的，不仅是为交互的工作价值被无视而唏嘘，也是在为公司的招人不慎而忧虑，怎么就让这些不懂事的混进来了呢，影响团队质量啊。

不能忍了，今天就以这个图中最简单的文本框为例，简要的说一说交互到底是干什么吧：

一个交互在听到或看到这个方案时一般会考虑这么几个基本问题：

1. 确实需要这个东西么？
用户确实需要在这里输入、编辑文本或数值么？如果是，OK，那确实需要。

2.这个东西是什么，用什么最合适？
必须是文本框么？如果是，那需不需要带微调组件？；输入数据受哪些限制么？把所有要输入的有效值都罗列出来是否可行，如果是，那单选列表框、下拉列表、可编辑的下拉列表是否更加方便?甚至是滑块呢？如果用户需要对所有有效值进行尝试性输入并希望立即得到反馈的话，滑块无疑是最合适的。（用ps的回想一下你“crtl L”、 “crtl U”后的使用情景。）

 3.这个东西该长什么样子？
需要输入的数据是格式化的还是非格式化的，系统能把非格式化的输入自动识别成格式化数据么？如果不能而需要采用连续文本框（就类似于输入CD-key的那种组框）的话，自动离开（切换焦点）功能是否需要，规则怎么定？；如果可以做成单一文本框，那长度应该定成多少，才能既避免内容遮挡引发的不必要滚动，又能节省屏幕空间还不给用户造成输入前的心理压力？

4.交互方式是怎样的？（文本框还有交互方式？是的，有，而且还不少）
是否需要辅助输入和自动完成功能？数据对齐方式是什么？内容非空的情况下，获得焦点时是全选显示还是插入光标？（这取决于用户需求，选中文本框是为了替换删除里面的内容，还是插入补充继续完善？前者全选，后者光标。这个问题很影响用户体验，但又经常被忽略掉）   另外，文本框内容的校验规则以及提示/反馈的样式，也需要非常全面而深入的考虑，因为之前有写过一篇文章来浅析这个问题，这里就不废话了。

... ...

以上这些，都是交互设计应该考虑的事情，而且是最基本的、最常见的、未作针对性深入挖掘的。你还觉得交互的工作就是拖个控件出来摆摆位置然后生成个demo么？

现在公司们对员工的要求越来越高高，既要懂那个又要懂这个，UE的要有市场嗅觉，产品的要能设计交互demo... ...我觉得这种风气误导性很强，还是术业有专攻吧，把自己的本分做好最重要。最怕的就是那些自己的本分都做不好，又不了解别人的本分是什么的主儿。

全力做好你该做的并尊重信任你的同伴，这是一个专业而优秀的团队中，每个人必须具备的素质。

Office 中的Groove功能非常强大，是团队协同办公的利器，唯一令人不满的是其在长时间工作后对硬盘空间占用极大（所有工作组文件均同步备份在本机）且非常不方便处理，例如，当我退出工作组后，我就无法对冗余文件进行查找及删除等操作。

但如果换种模式，不用系统默认的标准工作组、而是通过自定义文件夹来建立工作组的话，就能在很大程度上解决这个问题。

文件夹工作组的具体优势体现在：

1.存储位置自定，对系统友好。

2.文件“格式化”可视化，不想要的时候方便找到并删除。

3.可以随时更改下载（同步）属性。

文件夹工作组的建立步骤如下：

1.     打开某个文件夹，用groove同步，使其成为工作组，邀请其他团队成员加入。

2.     其他团队成员接受邀请，并在本地也建立该同步文件夹。

建立好后，这个文件夹就变成了一个groove workspace，能像标准工作组一样，同步文件、自动通知、即时通讯，实现团队协同工作。

当退出或删除工作组后，文件夹工作组的同步标志消失，成为普通文件夹，此时你可以对其进行任意的文件管理操作，不想要的话可以马上删掉，而不必像标准workspace一样，留着那些有名无影的文件，偷偷的耗费你的系统资源了。（图略）

文件夹工作组保留了标准工作组中的“邀请、管理、更改下载选项和chat ”等基本功能，裁剪了“问题追踪、讨论区、绘图板、日历、会议”等可自定义的辅助应用，从实际工作情况来看，对项目协同影响其实并不大，而这种模式又能带来如上所述的诸多好处。因此从性价比上来说，还是很值得推荐的。

稍微试用了几天，总体上有这么几个感觉：

1.原理上与其他原型工具大同小异，基本上都是“制作分状态页面—>定义事件关联—>定义交互效果”的套路。

2.从功能上看，Fc像是ImageReady、Flash和Axure 的结合，操作形式上有Balsamiq Mockups的影子,熟悉这几款软件的同学上起手来应该是很快的。

3.与其他相关设计软件无缝集成，可直接导入.ai和.psd文件并将artwork们转化成交互设计组件。这是奥多比平台带来的天生优势，但仅凭这点并不能像卖点中强调的那样可以在根本上提高原型制作效率，该画好的还是要画好，该沟通的还是要沟通。

4.基于flex的丰富功能，什么淡入淡出啊，3D旋转啊，都能轻松实现，的确非常适合“效果控”们来炫自己的设计方案。

5.延续奥多比系列的一贯作风，身高体重转身慢，对机器性能有一定要求，用着“卡”，再用“卡卡”。

6.平台、技术和客户端优势还是比较明显的，预计其以后可能会成为主流的原型设计工具（特别是在RIA的大趋势下）。

7.现在的Beta 1版本稳定性欠佳，经常失效，且容易造成ps等的系统错误。还是应了我的内句老话，beta版就是为了崩溃而存在的。

具体的操作教程这里就不写了，推荐给感兴趣的同学们一个比较易懂的E文视频吧：Flash Catalyst and Flex 4: Part 1  Part 2