不要对用户说“是你的问题”
事件回放：今天出门逛街路过达芙妮，顺便进去看了下鞋子。立刻看到一双很喜欢的白色船鞋，比较像漆皮，有压纹，上面还有个小蝴蝶结，破跟，是我找了很久之后终于找到的中意的款式。我平时是穿37或者38码的，既然是皮鞋，自然小一点比较好，于是要求拿37的。结果37的拿来一看，大了。于是又要了36码的，穿上后觉得，36码的居然合适。虽然脚面有点压，但此时营业员Ａ对我说，这个鞋子穿穿会大的。我想也行，虽然230米的价格有点小贵，但还是我能接受的范围内，再说老妈说她帮我买，机不可失，于是要求拿一双36的。Ａ进去找了一下后对我说，36的没了，只有柜面上给人看的那个，但是也算是新的。好吧，我也不在意，就拿来穿一下吧。结果一双36码的鞋子穿在脚上，走了一圈后发现左脚居然偏大，右脚合适。虽然走路的时候，左脚的鞋子不会掉下来，但是走路总是有点感觉难受的。于是开始犹豫起来，会不会是36码的鞋子一直放在外面被人试大了？询问着是否还会进新货，这样下次等进新货的时候我再来试鞋子。于是营业员们开始急了，怕我不买了。开始纷纷说，人的脚本来就是有大小的，BLABLABLA……我本也是个耳根子软的人，在店里面走了几圈，也没有要脱下来的样子。其实只不过是段自我内心挣扎的过程，但是营业员B急了，可能是店里位置比较大的，跑过来非常肯定非常有气势地说“这鞋子就是这样的”，我没听她的，继续在自我斗争，在店里走了几步，突然听到她说“这个又不是皮的，穿着穿着不会变大的”无语，A和B居然说法还不一样。我在和妈妈商量，其实内心很犹豫，是非常想买的，只是担心买回去，穿出去会不舒服。此时她突然问我“如果我不和你说没有货了，我拿进去擦擦干净，再和你说是新的呢”我就楞了，这句话说了啥意思？我非常疑惑地说“我的脚是有感觉的呀”，接下去她楞了，然后说“这不是鞋子的问题，是你的脚的问题，人的脚都有大小的”我就气结了……说：“好的，是我的问题，我不买总行了吧。”然后就把鞋子脱了，走出店了。
这件事情我总觉得很搞笑，一个店员对你说，是你的问题，好吧，既然是我的脚的问题，我还花钱把这个买回去，岂不是连脑子都有问题了？难道她期望她这么说一下我会把这双我有问题的鞋买回去么？
这件事的教训如下：
- 不要跟用户争论是“谁的问题”。
用户抱怨，代表他希望能够有一个更好的解决方案。否则的话，直接出门，替换产品，根本不会来和你讨论问题出在哪里。 - 永远要明白沟通的关键。
当我说等进新货我再来的时候，不是说我不要这件产品，而是我希望能够找到来解决这双鞋子偏大的问题的最优方案。但是不能直接替换的话还会有很多替代方案，可能穿一双摩擦力大的袜子，或者加一个半码鞋垫。可惜这个营业员只是以为我不满意这不是双里面拿出来的新的鞋子，嫌东嫌西的。如果这位营业员B能够找到关键在哪里，对我说一声“我们送你个半码鞋垫好了”，我自然会很乐意地买下来。毕竟我要的不是打折，而是鞋子能穿。 - 不要对自己太自信满满。
如果一直是A在我旁边的话，看在A陪着我试了几双，拿来拿去很辛苦，产品本身问题不是很大的情况下，我会购买的。可惜这个B小姐自认为很厉害，很有优势，冲上来以非常“专业”的口吻说自己产品是没问题的，于是犯了大忌。放低姿态，保持用户的优越感，没人会花钱买罪受。 - 时刻自我反省
请问我这位一直以来穿37或者38码鞋子的人，怎么会穿你36码的鞋子还会大？就算鞋子样板有大小，不是按照标准尺寸做已经是个问题了。这种问题和营业员说也没用，但是卖东西的，将心比心吧。不是说要卖自家的产品就一定要把它说的是perfect的。
很久以前如果我还没上班的时候，我可能会抓紧和妈妈一起出去购物的机会，错过了以后我自己就买不到，委屈一下，其他问题我回去解决好了。可惜现在我上班了，我只是比较懒，但是只要我想，我有能力去别家更高档、服务态度更好的商店去购买我要买的东西，我何必在这里受气，看这位店员的脸色呢？
很久以前也没有“体验”这个说法，那是因为用户别无选择，一家独大。可是现在选择多了，很多产品都能满足需求，又如何取胜呢？于是这些附加价值，被冠了一个很好听的词“体验”，说白了就是打着心理战术的非常浅显的销售技巧而已。
某次在张江和UCD的朋友们吃饭的时候，聊到了iPod的设计，很多用户在第一次根本就不会使用，不知道怎么用。同时有个朋友liliyun（没记错的话应该是）也问了个问题，是不是要分开说。虽然一开始我们并不知道怎么去使用它，这是一个问题。但同时，一旦我们会使用后，就会觉得很方便。这个例子给我的印象挺深刻，我们在设计的时候，到底设计哪个呢？这是不是和可用性相违背了呢？今天在地铁上坐到位子了，于是翻开随身带的从UCDChina借来的书《情感化设计》，中文版P65突然就看到了这么一段。
第一块由”Time by Design”制作，展示了在运用独特的方式显示时间的反思的快乐，它必须通过解释猜可以被理解。这块手表在本能上也是吸引人的，但是，主要的魅力还是在于它独特的显示。它显示的时间比传统的手表或者数字手表更难阅读么？是的，但是它具有极好的基本概念模型，满足了我的一个良好的行为水平的设计的准则：它只需要解释一次，从那时起，它就是显而易见的。因为它只有一个单独的控制器，设置表岂不是不方便？是不方便，但是炫耀这块手表和解释它的操作使反思上的快乐超过了这些困难。我自己有一块，正像厌烦我的朋友们要证实我要抱怨的那样，我自豪地向任何表现出有一点点兴趣的人解释它。反思上的价值超过了行为上的困难。
的确是很好的解释了上次吃饭时提出的问题。iPod可能在本能设计上分数不高，但是在行为设计和反思设计上却取得了巨大的成功。那个手表的图没找到，不过要是我的话，我也会非常喜欢的。
这几天也在思考一个问题，所有的产品都在提高可用性。但是如我以前对会熟练使用Maya的人的崇拜，正是因为它很难用，所以谁能够使用，我会非常地崇拜它。这是不是一种反思呢？
反观下功能性产品，还是以满足用户需求为前提。它功能好，所以用户愿意去学。并且学完之后的反思会有非常大的快感及成就感。并且这样的产品，由于功能的强大，能够掩盖可用性差的缺点。
好吧，其实应该这么说：
从用户体验的角度出发，虽然使用难度大，但是能够满足强大的需求，于是也正如《用户体验的要素》中所说，流程后端的错误，被流程前端的成功所掩盖。（为免混淆概念，没有用上端和下端）接下来，从情感化角度出发，虽然其行为水平上分值不高，但是一旦用户熟练操作，那种成就感自豪感以及随之带来的市场需求远远大于学习时所花的成本，满足了这一用户的反思水平的价值。这便是产品如此成功的原因。
OK，多看书果然是好事~真是学无止境~
小小地说一下，今天把书合上时，突然发现了兔子的签名。原来这本书是他捐赠的，觉得真是有意思。可惜我上次捐书忘记签名了。下次也签一个在书上。
怎样设计“帮助”更有效
今天参加UCD书友会时讨论的话题，满有意思的。只不过在讨论的时候，一直在接受信息，自己的想法倒是变地模糊起来，很难阐述。说到这里，觉得这个题目的设计也少许有点问题。我们在讨论“更”的时候，应该有变量和定量。今天讨论的太多变量，在那么多变量下，是无法说哪个“更有效”的，如果换个话题，如“怎么设计‘注册帮助’更有效”，大家讨论的基质一样，那我们的讨论可能也能够更有效。至少我不会开始变地模糊。
OK，说回帮助的话题，我简单整理下自己的思路。
产品及需要“帮助”的内容：
电子商务类：关键步骤当然在于“怎么选东西”，“怎么付费”，要帮助用户顺利地去走一个购买流程。
WEB 2.0类：不是很熟悉所谓的WEB 2.0，但总的说来，感觉上很像是用户从某种方面成为了雇员，因为是用户在无形中创造的内容。那么这个，就是要帮用户怎么去创造内容。
软件类：软件的范围很广了，初级地说，至少要帮助用户理解哪个东西是干什么用的。至于怎么去用，就属于技巧类的知识，不该出现在软件帮助中。
帮助的分类形式：
提示类帮助：比较被动接受信息。在过程中起到提示作用，好像旁边做了一个人，你做一个动作，他说一句这个怎么怎么。
归档类帮助：比较主动去寻找信息。主要在于建立一个“知识库”，帮助手册。让用户有地可寻。
帮助的表现形式：
文字：比较适合解释概念性问题。
图片：比较适合解释操作性问题。
视屏：同“图片”，比较适合解释操作性问题，及流程性问题。
用类似于“百度知道”的解决方案来设计“帮助”，有点混淆了我们要讨论的主旨。如果发生一个在百度知道上面有个人提问“怎么使用百度知道？”的情况，真的是有点让人失笑。我个人认为“百度知道”也是一个WEB 2.0产品，如果要搭建一个都是由用户上传问题，用户解答，那么势必也必须设计一个“帮助”，至少要让用户知道怎么去提问，怎么去回答。
结合帮助表现形式，也就是说，“文字帮助”帮助用户了解这个产品是干什么的，以及告诉用户某些规则。“图片帮助”或者“视屏帮助”就可以帮助用户顺利地走一个创造内容的过程。
“提示类帮助”和“归档类帮助”的相互结合，则变为了一个网站构架问题，那些分散在知识库外的TIPS如何于集中在知识库内的详细帮助相结合，表达内容统一，结构合理。
进一步上升到用户细分，如何判断哪些用户需要“提示类帮助”，如何判断用户需要的帮助内容，如何方便高级用户撤销“提示类帮助”。
或者再一步细化到网站界面，“提示类帮助”怎么出现，“归档类帮助”如何分类及设计帮助导航。
所以，几种结合，缺一不可。只是如何组合这些元素，则需要在产品需求上进行详细设计。
啊列…… 好像说了半天等于啥都没说…… 随便从哪个点延伸一下，举几个例子，没准又能出好多篇东西…… HOHO…… 真是篇概念性的随笔啊……
Vector
Flash: Open Flash -> New File -> Import AI File
Blend: Open Design -> New File -> Import AI File -> Export XAML -> Open Blend -> New Project -> Add Existing File
Both of them support vector images. But in Blend, we cannot import vector directly. We need use Design to export XAML file or just draw in Blend.
Bitmap
The pixel in Flash is better than the effect exported from Blend.
Project Review
小小地在这里检讨一下，上个星期对我来说做了一个失败的项目。何谓失败，目前来说，没能够按时交付任务，就是失败。
有点自责，其实是不应该出现这种情况的。想起以前王经理在培训时说的话，项目周期越是短，越是考验项目经理的管理能力。绝对不是在项目最后，出现紧急情况时让每个人都来找他以显示其伟大；能够舒舒服服喝茶，悠闲没事干，确能使整个团队安安稳稳地交付任务，才是一个成功的项目经理。最近总是不断回忆以前在接受管理培训时的内容，回顾过去，看看现在，发现自己的确有点自我放松了。
尽管说是一个“prototype”，但其也有一个开发周期。尽管开发周期只是一天，但从接到需求->明确需求->修改图片->AS脚本->完成->测试->修改->发送，这样一个流程丝毫没有遗漏。随着要求的增多，修改成本逐渐变大，当1个小时的修改时间，变成了2个，甚至3个小时，1天中的有效工作时间就变地格外地需要精打细算。这个问题以前之所以没能看出来，是因为项目过于简单，并且没有“交付时间”这样一个概念。做不完？大不了加班嘛。第二天能够完成就行了。可是总是依赖于“加班”，是非常不利的情况，我们变地过分被动，没有时间自我发展，不能有效计算“工作效率”。对于一个开发周期为一年的软件产品来说，用Flash开发的只是一个“交互原型”，用来测试某一块局部的设计可用性和开发可行性。可是对于一个Flash产品里说，当可用资源固定，开发要求加大，势必会使开发周期拉长，风险增大。我们之前没有很好地意识到这种情况，使得当我们在做其他分心的事情时，也觉得，没有关系，反正可以等下做。于是便出现了项目最后延时交付。
对于这次情况，我觉得有如下几点需要检讨：
- 制作前没有有效沟通
有一个修改的地方，其实早在几天前就有提出了，可惜我没有做好有效的沟通，没有进行确认，导致在最后一天还是有修改要求。更没想到就是修改工作导致了项目延时。下次在沟通方面一定加强确认。 - 事先没有预估工作量
中途有会议，在会议延时的情况下，没有对自身工作进行预估，及时调整。其实可以适当降低会议优先级，先回去工作。 - 成员之间没有沟通好
有个修改地方，由于没有沟通好，两个人都以为说清楚了，实则不然。这个错误在最后测试时体现了出来，在已经延时的情况，又增加了修改时间。果然沟通是关键。 - 没有引入项目开发流程
一直以来，我们的产出都名为“prototype”，于是忽略了项目开发流程。其实在有复杂交互的“prototype”之前，应该也有一个低保真的逐帧动画原型来确认交互效果。通俗地说即是使用0.5hr时间确认效果，使之后的2hrs时间工作更有效。 - 工作量不明确
最后，身体是革命的本钱，连续加班最不利的，自然是身体了。这几天经常出现的情况是，下班了，才发现来不及，带回家去做。以后的情况，还是要多做合理的计划，明确工作量，根据制作修改优先级，安排到下班之前能够做完的工作，不能完成的及时调整。即使是加班，也必须是有计划地加班。
下个星期开始工作时要注意：
- 及时确认效果，不要心存疑问
- 明确工作任务及职责
- 明确工作量，若有完不成的及时做沟通区别优先级
- 每天开始预留0.5hr作为项目讨论，明确该明确的
- 每周有个内部review，做一下工作总结，提出问题，讨论改进方法，确认下周工作
Anyway，这对于发展中的团队来说，这次延时未尝不是一件好事。只有失败，才能促使我们面对问题，走向成熟。
Create Vector Images by XAML
A trick, this is not a tutorial for how to draw an image in Expression Design. Just want to let you know before you accustom to use that software, you could convert to XMAL if you draw in Adobe Illustrator.
I did a draft quickly in Illustrator as a sample.
Open Expression Design.
Create a new document, then import .ai file. It will have a little bit change on layer but keep the vector effect.
Actually we need do some small change to make it more organized. For now, I just show a quick sample. Expression Design could import .ai file then export XAML file.
Open XAML file by Expression Blend.
However, it is not enough. There are too much unused child elements in side. The layer could be reorganized like the one in Illustrator:
Compare the layer structure of two products, it has opposite arranged. We are used to working with the obvious layer in Adobe product - the top layer contains the front element. But in Expression Blend, it use parent/child relationships like tree. Children are on the top. Microsoft shows it in the slide “Intro To Expression Blend”.
It probably is easy to have some understanding of XAML when compare the image layer with the codes if someone use CSS before. Since I don’t know XAML well, please allow me to explain it later on.
End.
Play Layer in Blend (3)
Look at different container and structure solutions, the visual effect are completely same, but the XAML codes from prototype are totally different. As a designer - focus on visualization and interaction, maybe on the solution 1, it was already OK in prototype phase. We don’t need spend too much time on finding suitable solution. Even we find Solution 3 looks better, but is solution 3 usable for developer? Not sure. There may be solution 4, 5, 6…
In retrospect, the XAML code which could be really carried by developer is:
1. Color, thickness, cornerradius, etc. which designer could edit by Properties panel without writing XMAL codes themselves.
2. Path, shape, etc. vector images created by XAML.
These XAML codes will be still effect even developer change the container type. Actually they should be carried. Otherwise, the UI design work will be lost.
To sum up, only when designers know the whole picture, can XAML codes be effective for developers.
The next questions:
What is standard?
What could be done by XAML?
Do we mix the “effective prototype” and “effective resource”?
Do we really need use STANDARD XAML codes in interactive prototype phase?
How much is it efficient for the whole process from design to develop?
End.
Play Layer in Blend (2)
Continue the topic – Create a right click menu like the one in Microsoft Word
Solution 1
Since the background is a rectangle with roundness, I use “border” as the main container of right click menu.
Then, place a “grid” within the “border” so that I can work with multiple child elements.
Continue set button layer and background layer like the basic structure basic on the grid container, “StackPanel” is the best choice I think.
Until now, there is no any visual change. I just set the structure of the menu. The reason I choose “StackPanel” as button layer is the button will stack into a single line automatically. I don’t need adjust the position. And the “StackPanel” height will adjust automatically with the content inside.
Finally, draw a “Rectangle” and “line” as the background.
OK, so far we get effect we want. As experiment, I’d like to try another way.
Solution 2
Start from “grid” as the main container of right click menu. I found it has less child object. I think maybe it would be more controllable than Solution1 on my side.
Solution 3
I found a problem when zoom in, the corner doesn’t match.
If I set roundness of the rectangle, the other side will look strange.
I know the problem could be solved by margin. But think about a better one, I realized it would better choose “border” as the background layer. Actually, the effect of “StackPanel” takes “Rectangle” and “Path” could be visualized by “border”.
Even “border” is better. It could control BorderThinckness and CornerRadius of each side and corner.
The final one would be:
Download Expression Blend source file
Play Button Template in Blend
I’m writing to have a basic understanding of button template in blend. This is not a step-by-step tutorial.
Create a simple glass button as ample:
Preview: 
First, add a button and choose “edit a copy”.
Name the template. It would be a Resource.
In the template, we could play visual effect directly by panel. The ContentPresenter means editable area for different buttons.
Back to the window, edit the content inside the button. And we could add shadow effect by “Bitmapeffect”.
Obviously, it will keep the layer as “ContentPresenter” in the template.
End.
Play Layer in Blend (1)
With the new technology from Microsoft, designer are trying to find a way that make developer carry the visualization code directly from the prototype, so that UI design work wouldn’t lost when developer create UI from scratch. Even we guess some animation effect created in prototype could also be carried by developer. If so, not only designer can ensure the interactive design solution is feasible, but also could not disturb developer.
But before the prediction accomplished, we should know the standard element in final product, and follow the same one in prototype. Otherwise, developer is not able to use the code in prototype.
To have a better understand, let’s play the basic element in Blend – layer.
Basic Knowledge
What is layout?
•Layout Panel Controls (or “container” controls).
•Provide automatic layout behavior to children inside of them.
•You can nest panels inside of other panels.
Windows Presentation Foundation, and therefore Expression Blend, implements layout through LayoutPanel controls. You can think of LayoutPanel controls as containers as that is the function they serve. The purpose of these LayoutPanel controls is simply to contain other objects and control their placement and sizing. The specific placement and sizing behavior is determined by the type of LayoutPanel control chosen. There are a number of options to meet different needs.
From "Intro To Expression Blend Sildes"
Types of Layer 
Texts from "User Guide"
My understanding was the layer is quite similar in the block element in CSS, but it integrated automatic behavior in different container. It is intelligent but we should have clear structure in the mind when using. Here are some small practices which could make problem obvious.
Right click menu
Sample: Create a right click menu in Blend like Microsoft Word.
It looks easy at first sight. There are two columns, col1 has light grey background, and col2 has options left aligned.
Actually the option is across the spilt line.
So the basic structure will be like 2 layers: 
First of all, I’d like to finish the basic object - option button.
Button
Create a button template, then draw a “border” takes “ContentPresenter” inside.
Both “padding value” of “border” and “margin value” of “ContentPresenter” can set the space of the text in the button template.
Like I mentioned above, the layer is quite similar in the block element in CSS, they have the same principle when adjusting layout of two blocks. In XAML, each container has own behavior, why I choose “border” be the container here is it could change background color, border and roundness easily in right panel.
OK. The effect of the button is done.
Developer probably does not need to create a button again after he gets this file. Everything is inside the XAML code.
Furthermore, we could convert all the value we set to resource by “Advanced property options”. After that, the value will keep in the resources panel, visual designer could make changes only in Resource.
If we find a way to keep the visual resource in a XAML file individual, visual designer could change the interface easily just like edit CSS file. It looks perfect.
Well, let’s back to the whole right click menu from a button.