Expression Blend 简单教程
[原创] Expression Blend 2教程1-介绍
技术| 工具2009-05-28 19:40:23 阅读323 评论2字号：大中小
本来只想写一篇简短的Blend介绍，没想到一写就写了一下午。。希望对初学Blend的同学们有所帮助
前面的工具介绍部分，建议直接跳过，看最后那个实例就好了！很多东西要自己摸索一下就明白了！
1. 什么是Blend？
要了解Blend是什么需要先了解的是Microsoft的Silverlight和WPF（Windows Presentation Foundation）
来自维基百科的简单介绍Microsoft Silverlight WPF
这是一个面向设计师的简单教程关于技术背景方面就不多说了简单的说，Blend是微软搞出来让设计师为WPF或Silverlight创建用户界面的一个设计工具个人认为他的最大优点在于“设计将可原封不动地用于最后的产品中…开发人员不再需要尝试重建它们…”
这让开发人员和设计师都是那么的欣喜若狂啊！
如果和设计师熟悉的Adobe系列作比较，Blend之于WPF（Silerlight）就如Flash之于Flex
2. Blend可以做什么
制作界面是Blend的本职工作，但如此强大的工具在手，只要你像叉蓝一样爱动脑筋，它能起的作用就不只是这些：P
Blend可以很轻松的添加事件、增加响应（当然Flash也可以做到，但我认为Blend更加易用轻松，可能是由于我并不那么熟悉Flash…）所以当受够了Axure的折磨时，我突然意识到如果用Blend就可以做出更高保真的应用原型！不再是简单呆板的页面跳转，不再需要测试人员按固定的路线操作，Blend可以制作出保真度非常高的原型。
对于大型产品，前期的可用性测试怎么样得到更多的信息，以便对产品进行改进？条件允许的话，当然是做保真度更高的原型。而又如何快速开发出高保真原型？我认为Blend 和Flash在这方面，具备了应对这个难题的能力。
3. 了解Blend界面结构
“wo~ 好酷的界面”很多同事从我身后走过时，都会有这个反应…
但我并不喜欢Blend的界面：
第一，字体是“糊的”，现在知道，这种平滑字体是Blend的“特色”。个人认为这将成为中文应用程序里的一个很大弊端，设计师无法再使用被广大用户接受的12点宋体。雅黑成了退一步的选择。
第二，或许已经用惯了Adobe系列，个人认为这种常用的工具型软件，黑乎乎的颜色太浓厚了，挺累的
界面结构：
1. 最左侧一列和Adobe的一样，是一些设计用的工具，如选取工具、拾色器、填充，详细的下面介绍
2. 第二列上部分是触发器，可以给各个控件增加响应（比如鼠标移上一个按钮时，按钮有个什么变化）
这块面积虽然不大，但却是WPF的核心呀！所有神奇炫丽的响应效果，都是通过这里添加事件，再制作动画。
3. 第二列下部分，可以理解为类似图层的概念制作动画的时候，这里会出现类似Flash 里的时间轴
4. 白色区域即为画布，右上角有三个标签，可以切换三种视图
Design：既是上面截图中的样子
XAML：转到界面的代码，界面所有内容都是用XAML定义的，包括画一段路径，都对应在XAML里面的一条代码。设计师一般不需要看XAML视图。
Split：视图分两栏，上方是design，下方是XAML。当选中设计视图里的元件时，下面就自动跳至对应该元件的那段。
这个和dreamweaver是一样的呀~
5. 最右侧一栏有三个Tab分页，分别是
Project：和项目相关的内容，工程的文件结构（在这里可以导入外部的图片资源）Properties：当在画布绘制了什么元件时，选中该元件后，这里就会显示和这个元件相关的属性。属性面板是最为常用的一个面板，如果你不想写XAML，那么整个界面的布局、对齐方式、描边等等，都可以再属性面板完成设置。（这个和Flex的属性面板的功能基本一致）
Resources：资源面板用到的不多，里面显示了所有的自定义样式。比如我制作了一个button，buttonStyle就成为一个资源，我在应用程序里使用到按钮的地方，都可以使用这个样式。（这个基本就相当于Flex里面CSS的Style，不过Blend可以完全自由定义一个元件的外观。而在Flex里，可以改变的CSS非常有限，除非用Flash制作元件再导入成资源）
4. 工具面板常用工具介绍
Selection：和Adobe的类似，用来选中图层（组）。选种一个组（例如Grid），双击后进入这个组的编辑（这个和Flash是一样的，双击后进入编辑这个元件的视图）。这个工具没办法选中一个组里面的子内容。
Direct Slection：可以直接选中任和图层（未锁定），即使它被包含在一个组里面。可以选中路经里的节点，拖动节点等
Brush Transform：自由变换渐变色，控制方向、中心点…这个比PS好用多了，PS
里面要拖动渐变只能无数次的尝试，达到一个好的效果这个可以随意变换渐变，很方便
布局：在界面架构里用到的各种布局。这块内容有很大学问，这里就不详细说明了
个人感觉Blend的布局，比Flex里的布局类型更多、更好用一些，每种布局的特点很明确，控制起来很方便。
控件：软件应用里常见的控件都在这里了，如果没有你想要的东西，点下面的那个“>>”
可以搜出更多更复杂的控件。
当你使用这些控件时，控件的皮肤会直接绑定到系统的主题。不过你可以自己定制Style，再把Style应用到具体控件实例上。自定义控件的Style不是特别容易，尤其是类似Slider、ComboBox这种情况多变、复杂的控件，让人想吐血…
5. 用Blend做一个最简单的应用界面！
俗话说的好，少看书多做事！做过一个你就知道，Blend是多么容易啦！
任务：我们要搞一个简单的应用，上面只有一个按钮，点击一下按钮，界面的空白部分就会显示“Hello world！”
Step 1 新建一个工程
新建完成后，恭喜你得到了一张空白的画布！
可以在属性面板设置Width和Height，属性面板就不介绍了，自己摸索去吧！
Step 2 画这个按钮
可以直接拖动按钮控件到画布中，但是这样的按钮太丑了（样式是系统主题的样式）！俺这么有美感的人怎么可以用这么丑的按钮？所以我决定画一个和我一样帅的按钮！（时间有限。。没有画很帅啦）
这是一个Rectangle（画按钮随便用什么都可以，我这里选了Rectangle）
在属性面板，你可以控制它的圆角、描边色、填充色、在面板中的对齐方式等等
Fill既是填充色Stroke是描边OpacityMask是半透明蒙版
对于颜色，我可以选纯色也可以是渐变如果是渐变的话，就可以使用上面提到的自由变化工具自由控制
提一下，Blend里面的颜色是8位16进制的，如上面的#FF6E6228 一般Adobe的颜色是6个数值，Blend的后六位和Adobe的一样，就是RGB色值。前两位是透明度的意思，FF 就是不透明00就是0%的透明度
这里的RadiusX和RadiusY 设置了圆角，为4PX。注意，Rectangle的圆角是四个角都一样的，既无法只设置上面两个是圆角，下面两个是直角。真的需要这种形状时，可以使用布局里面的Border，它可以对每个圆角进行设置！但是Border作为一种布局，它比Rectangle 耗性能的多。
Layout这里我设置了这个矩形宽120 高40 水平居中对齐，垂直底对齐，并且距离底边（Margin）40个像素。
让这个矩形变成按钮！选中这个矩形后，点击Blend菜单栏上的Tools，下拉列表里面有一个Make Button，弹出如下对话框：
是滴，这个就是传说中的Style了，起个名字，点击OK。你发现你的矩形已经成为了一个Button。
在属性面板的Common Properties栏目，你可以更改button上的文案内容，在Text栏目，你可以设置文字的样式
在Brush栏目，我们发现内容和刚才的不一样了（因为我们刚才选中的是一个Rectangle，而现在这个东西已经是一个Button了！），通过修改Forground的颜色，你可以改变文字的颜色。
经过一番改动，现在我们的按钮变这样咯：
现在的问题是，我怎么继续修改这个button的样式呢？或者说，我的矩形哪去了？
不着急，右键里有一个Edit Control Parts ->Edit Template这样我们就进入了编辑这个样式的状态。
这时候你会发现，图层面板里面的内容变了，这里显示的是ButtonStyle的内容。我们的Rectangle就在这里。
你可以在这里添加更多东西，把按钮搞得更加华丽。注意，ContentPresenter是自动生成的按钮上文案的那个图层，如果删掉，字就不见了。
对于一个按钮，你可以通过触发器面板添加各种响应和事件（这里就不详述，之后更具体的教程里再详细介绍）
双击画布区域，就可以回到外面的window编辑状态。
一个简单的按钮到这里就画好了！
Step 3 写“Hello World”
可以使用Lable、TextBlock写文字：
这里用了Lable，通过属性面板，你可以改变字体大小、颜色，布局都可以调整好，最后效果:
Step 4 增加事件
我们的任务是：点击按钮的时候，文字出现。
1. 先隐藏文字
点击选中文字图层，在属性面板的Appearance栏目，把Visibility设置为Hidden
2. 给按钮加事件
点击选中按钮，在触发器面板，点击“+Event”
下面设置为when button. Click is raised 点击右边的“+”
弹出了对话框，问我们是否创建一个Srotyboard，点ok
这个时候界面进入了动画编辑状态，出现了时间轴
我们在0秒处，选中textbox层，在属性面板，把它的Visibility设置为Visible 一系列操作后：
要暂停时间轴的记录，点击红色的按钮（你一定能看到的，这里就不截图了）
要退出这个Soryboard的编辑，点击上面截图里，OnClick1 右侧的X （这个实在太难找了。。之前我一直没找到。。）
Step 5 最后一步，运行！
按F5 看看运行效果吧！
点击按钮后：
[原创] Expression Blend2教程2- 一些特性和技巧
技术| 工具2009-05-30 13:45:34 阅读239 评论1字号：大中小
这篇我总结了自己在实际操作中理解的Blend的特点，以及积累起来的一些小技巧因为我也没有系统的学习过Blend 一切都是在摸索中前进…所以一些我的理解可能并不正确，应该有很多是由于我的"无知"所造成的所以不敢保证本文绝对的正确对于末尾提及的一些观点，欢迎讨论：）
1. Blend在像素对齐方面存在很大问题是中文应用的一大瓶颈
·前篇介绍里面已经提到了，Blend里面是打不出来像素字体的，它的所有字体都是平滑的。这使得设计师无法使用清晰易读的宋体，在平滑的情况下，雅黑的易识别性比宋体强的多，也更美观：（截图被博客压缩…）
· Blend可以外部导入图片，但是你要小心图片的布局。如果你设置一个图片的位置不是写死的，那它很可能会变得模糊。举个例子，我把图片放在Grid里面，图片的对齐方式设置为居中对齐，Grid的宽度设置为自动适应窗口大小，如果我这样做，当窗口的宽为奇数&图片本身宽为偶数时（或者窗口宽度为偶数&图片的宽度为奇数），图片就会变得模糊。示例如下：（由于图片被博客压缩，效果不明显）
技巧：这个问题的解决方案，只有把图片的位置写死，尽量不要采用居中对齐的布局方式，以保证图片是清晰的。但有时候多个布局层叠较深时，上一层的对齐方式，也会直接影响图片的显示效果。这样就只有忍受了。这也就是为啥我说这是Blend的很大问题。
这些问题的根源可能是由于Blend是基于矢量绘图的，所以导致Blend制作的界面，和其他软件界面看起来就不一样，感觉就是有点糊糊的。Flash也是矢量的，在图像方面同样存在像素对齐不准、模糊的问题，但是Flash的文字却是清晰的像素字体。
2. 设计师不知觉充当了前段开发的角色
应用Blend的一个最大优势在于，设计师用Blend制作好界面后，程序员可以直接拷贝Xaml到程序里面。
实际上，Blend相当于一个自动生成代码的工具，设计师在不知觉中就完成了程序界面部分的工作量。这也便是保障了软件的最后效果和设计师的设计稿完全一致的条件。
既然设计师完成了部分代码，那么就不可避免的需要考虑性能问题。
案例：在网易相册客户度的开发前期，作为团队中的美术，我也是临时起步现学现用的Blend，当时我不考虑什么性能（其实当时的开发人员也不熟悉WPF，也不清楚什么影响性能），我还是像使用PS一样的使用Blend，把界面的不同元素按组分类、层叠，以便于日后的管理、修改。
后来技术说，Border比较耗性能、投影效果耗性能、层次太深耗性能……但是这些如果让技术去改的话，直接就会导致了界面效果的变化，所以后来我又从头到尾的修改了界面的层次结构，能用canvas的就不用Grid，能用Rectangle的就不用Border，原本的层次编组太深的，也都改成钱层次的。
其实如果设计师一开始就知晓这些，设计的时候多留意一下，后期就不需要返工维护了。
技巧：
1、越是易用的布局，越是耗性能。Grid很强大，border很好用，canvas很难定位，但是canvas效率最高。
2、图层的层次不要太深，结构不要太复杂。其实道理是一样的，在PS里面如果你编组很多，组里面又嵌套很多组，你会发现这个PSD会变得很大，并且编辑的时候很卡。
3、给图层起有意义的名字。设计师得认识到，在Blend里面画的每一个图案，都是对应在XAML里面的一段代码。程序员是会直接拷贝黏贴到工程里面的。为了使工程更易维
护，设计师最好给每个图层起一个有意义的名字，说明它是做什么的。比如我在画一个按钮的高光时，这个图层就叫做“HeightLight”，画描边的图层就叫做“Border”…
这是一个很好的习惯，即使是使用PS也应该给每个图层取好名字。这种做法应该包含在一个设计规范里面，这样做的好处在于当别的设计师要使用你的PSD的时候，就能很好控制了，就像使用自己原创的PSD一样。在以前的工作中也遇到过类似的问题，当我要用别人的PSD时，完全要疯掉了！一百多个图层，我想提取出一个元件，但是都有哪些图层是属于这个元件的？！所以最好的做法，一起工作的人约定好PSD文档的结构规范，合理的编组、命名。
3、WPF（Silverlight）项目的设计流程
建议的流程是：
1. 用PS等设计软件，设计出软件的最终效果，或者叫概念稿
2. 对照概念稿，和开发人员交流界面布局的方案。之所以要和开发交流，因为这步非常重要！决定了整个界面的构架方式
3. 使用Blend重绘概念稿，制作出最终的实现样式
其实大家会发现，相对于传统的网站项目，第一步是设计师做的，第二步和第三步实际上是前端开发的工作。
但由于WPF的界面，和网页不一样（只要切图、再贴图就好了），WPF里面设计师要用Blend来绘制界面，要使出来的界面直接可用，在上面提及的性能方面，设计师就要考虑在内。而对于界面里的动画部分，就更加需要设计师来完成制作。设计师不可能通过文字描绘说“我要这样的效果”，然后让技术去做出来。
总得来说，WPF的优点和缺点一样的明显。
对于新技术，个人观点，设计师必须摒弃只是做图片的想法。现在贴图的界面已经开始
过时了：网站产品，随着网络带宽的提升，国内也会流行起像日韩那样的Flash酷站；在软件应用方面，传统的MFC窗口已经被看腻，我相信很快就会被类似WPF这种技术取代。各种炫丽的应用很快就会冒出来。（这些炫丽的界面是否好，就是另外一个问题了）未来的界面趋势肯定是动态的！设计师有了更大的发挥空间，作为代价，设计师需要掌握更多的技能！
4、没事多按ctrl+S 随时保存文档...
Blend还是挺耗性能的，爆机比较常见。。也可能我这台电脑比较慢吧。多保存总没错：P