李小帅

在两年之前的更早，因为喜欢荷兰和西班牙，所以我的每届球赛都比别人短，现在跟别人一样长了，我却高兴不起来，荷兰踢的难看了，西班牙没有劳尔了，在身边一起看球的很多人也都散落了。。。

没有灵魂的关注与欢庆，世界于我杯具了。

1. 儿童节，公司有活动，来了不少宝宝和孩子。整个园区都是明亮的眸子和粉嫩的小脸蛋。

2. 我一直很看好的一位91年实习生美眉今天入职。晚上电话面试偶遇另一位90后美眉。

3. 这老中青三代的画面对比一下子让曾经自诩和被诩为青年才俊的我直观而深刻的感觉到，老了。

4. 我曾经理性的分析，那只是一个数字和其所带给人的对未来预期的变化而已，并没有真正影响什么。但这种问题真的自我麻痹起来操作上还是蛮有难度的。终究还是不可抑制的羡慕和无奈。

5. 悲凉的时候适合听豁达的歌。“江山笑，烟雨遥，涛浪淘尽红尘俗世几多娇”~~呵呵，一会准备练练手，弹一弹，找找洒脱的范儿。

6. 年轻的人呀，你们要快乐啊...

 未能抛得杭州去，一般勾留是此湖。

 PS: 介hero的拍照效果还是挺让人意外滴。

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

自信版：特步——猪一般的感觉。
豪情版：劲霸——给你这样的猪肉，劲霸猪肉，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，这玩意还是别买了。单看上去，长的还蛮诡异的一个。