From Aodaa

1. No.1 新蛋的伸缩符分析 Hepo 2009-5-30

2. 一件（社交性）礼物，如果没有精美的包装，那么，接收者对它的重要性会打折； 一个项目交付的程序，如果没有厚厚的文档，那么，接受者，会对它的价值产生怀疑； 一个再小的产品，如果没有 UE 上的文档描述，那么，设计相关者，会对它指手画脚。 以上，都是常见的现象。 作为一个 UED 的成员，要遵循以下的守则。 1 ，提供 solution ，而不是 result ；专业一些，容忍一些。 2 ，慎重，但仍要反复推演、试验；要知道过去、现在、将来的某些态势。 3 ， UE 是寻找真相的一个过程，而很多时候，真相是没有真相的，所以，变得更聪明一些。

3. 另外， 1 ，我们自己的事情都忙不过来了，组织大到一定程度，设计原则的制定都可以衍生出一个部门；我们很小，但是基本上的事情都要顾全，所以，我们自己都忙不过来。 2 ， UED 是因为职能划分而成的，而不是因人设岗并最终形成的部门，组内的一些伙伴还存在这样的问题，一、 UE 的认知仅是雏形，但是外向表现过于自信；二、对 UE 的重视仍然是一种被动式的；三、过于主观，而这种主观过于个人性，并非同理心的真正体现。 鉴于此，此次对新蛋（ www.newegg.com.cn ）的一个细节做分析，它很典型。希望伙伴们能够最终跳出“如果我是用户”，这个过于狭隘的场景扮演。 努力，就会有所获得。这并不是在所有地方都会成为正比的，但有一点可以肯定的是，在昊达，它就是可以成正比的！

4. 我们今天的焦点就在分类导航栏的右侧的收缩按钮上。 先自问自答： 就这么一个操作钮，简单么？ 如果只把自己当做一个 UI ； ok ，答案是显而易见的：简单！

5. 1 ，请自行登陆 http://www.newegg.com.cn 2 ，然后注意左侧的分类导航栏 3 ，再老实回答，每个大分类后的减号符，（第一反应下）你知道它什么用途么？

6. Ok ，我们遇到了第一个问题： 为什么一个操作性的符号，容易被误认为修饰性的符号？ Ok ，我们再衍生出去一个问题： 在 UI 设计中，我们允许不允许纯粹修饰性的符号？

7. Ok ，我们遇到了第一个问题： Question 1 ： 为什么一个操作性的符号，容易被误认为修饰性的符号？ Ok ，我们再衍生出去一个问题： Question 2 ： 在 UI 设计中，我们允许不允许纯粹修饰性的符号？ Answer 1 ： 预设用途出错了！ Answer 2 ： 尽量避免使用，所以，可以给一个肯定的答案：不允许！

8. Question 3 ： 什么叫预设用途？ Question 4 ： 预设用途为什么会出错？ 解释这些问题，倒有意思了。 Answer 3 ： 预设用途，比如你穿着 Dior 、 Gucci 的衣服，去天桥摆摊乞讨，你会失败的，因为这些物品的预设用途不是如此；同样，有下滑线的文字预设为一个链接，红色可以预设为警告，文本框预设为可输入文字。这就叫做预设用途。 Answer 4 ： 预设用途出错，多数情况是因为场景的变化。很费解？打个比方，在你做学生的时候，遇到了问题，或者还没有遇到问题的时候，你向老师请教或者他主动教导，这就是“老师”这个元素的预设用途；预设用途本身是可以继承性学习的，所以，当一个学生向“工作人”这角色转变的时候，就是场景的变化，当遇到一个前辈，你就觉得，他教导你是一个理所当然的。这就是一种“前辈”的预设用途。可是场景发生了什么变化呢？一个是你付钱（学费），一个是你收钱（工资）。

9. Question 5 ： 什么叫预设用途的继承性学习呢？ Answer 5 ： 所谓的继承性学习，简单的说，那就是“直觉”。打个比方，你用大吸管能喝饮料，用小吸管也能喝。这个类比性继承，就是继承性的预设用途。 听起来很费解？ “ 直觉”的另外一种说法，就是“想当然”。 比如一个人偷过东西，那么，当有东西遗失的时候，他最容易再度成为被怀疑的对象。这个就叫做“想当然”，或者说，预设用途的继承性学习。或者用一个词来说明：触类旁通。

10. Question 6 ： 预设用途有分类么？（补充问题） Answer 6 ： 要延伸开来说一下，预设用途的分类。它可以简单的进行分类，那就是主动的和被动的。 所谓主动的，那就是用户一眼看过去（无鼠标移动），他就知道当前的某个元素的用途和使用方法了。比如一个按钮，一个链接，看起来就是要被 点击 的。 而被动的，则是要通过某些特定的行为（比如鼠标移动）激发预设作用。比如改变窗口大小的时候，光标发生了什么变化呢？ 这里要遵循一个原则， 页面的主体性操作，主动的预设用途，要尽可能的覆盖全 。

11. Ok ，我们回到正题，来详细具体的解释：新蛋网的分类导航的伸缩按钮的预设作用有比较大的出错概率？ d 组件 1 组件 2 一，如红线框内，这是一个整体 A ，分为组件 1 ，组件 2 ，组件 1 为“手机通讯”，组件 2 为“ -” ；组件 2 是指向组件 1 的。 二，下方的“手机、手机配件、对讲机”又是一个整体 B ，它是指向 A 的。 三， B 位于 A 的下方，比较容易体现出指向性和隶属性来，但并不表示 B 一定要位于 A 的下方。这些方位的确定是要根据客观的场景决定的。

12. d 组件 1 组件 2 Ok ，我们来做一个对比，用 windows 的资源管理器。有没有发现，如果把它里面也划分组件 1 、组件 2 的话，其排布位置刚刚跟 newegg 上时相反的。 Question ： why ？ Answer ：组件 1 在组建 2 之前，强调的是行为；在之后，强调的是补充性操作。 这么说吧，如果“ -” 在“手机通讯”之前，表示的是“收起它”；而在其之后，表示的是“它是可以被收起的”。

13. 组件 1 组件 2 这就是 win 系统中窗口操作的指示图标。 1 ，“ -” 号的由来和它的继承性（预设作用）有更进一步的体会了么？ 2 ，请自行回答，为什么这里的“ -” 号的非正中的。 刚才用了 win 系统的资源管理器做对比，你或许应该会有些明白，新蛋这个补充性操作符，为什么要用“ -” 号了。 但这还不够。我们再对比一个素材。

14. 组件 1 组件 2 对比这些素材，你现在能明白为什么新蛋网在这块的预设作用，给用户的认知会发生偏差了么？ 预设是没有“ -”“+” 的对比；整体 A 不具备容器的特性；“ -” 在非窗口中的场景，得不到很好的结果指示 .etc Question ：现在能否明白，找茬是件多么简单的事情？

15. OK ，本次就到此结束。留下些问题 Q1 ：新蛋这样的设计，可以评判为错误的么？ Q2 ：一些费解的设计，能不能理解成一种避免被使用的设计？ Q3 ：新蛋的缩、展操作，不能记忆其状态，你怎么看待这种情况？ Q4 ：如果站在纯粹的 UE 角度，你觉得新蛋的这个设计，有什么改善的措施？ Q5 ：你需要一个明确的结果么？ Q6 ： Are you qualified ？