《ExpressionBlend2教程2-一些特性和技巧》由会员分享，可在线阅读，更多相关《ExpressionBlend2教程2-一些特性和技巧（5页珍藏版）》请在金锄头文库上搜索。
1、原创 Expression Blend2 教程 2- 一些特性和技巧技术 | 工具 2009-05-30 13:45:34 阅读 444 评论 1 字号：大中小 这篇我总结了自己在实际操作中理解的 Blend 的特点，以及积累起来的一些小技巧因为我也没有系统的学习过 Blend 一切都是在摸索中前进所以一些我的理解可能并不正确，应该有很多是由于我的无知所造成的 所以不敢保证本文绝对的正确对于末尾提及的一些观点，欢迎讨论：）1. Blend 在像素对齐方面 存在很大问题 是中文应用的一大瓶颈 前篇介绍里面已经提到了，Blend 里面是打不出来像素字体的，它的所有字体都是平滑的。这使得设计师无法使
2、用清晰易读的宋体，在平滑的情况下，雅黑的易识别性比宋体强的多，也更美观：（截图被博客压缩） Blend 可以外部导入图片，但是你要小心图片的布局。如果你设置一个图片的位置不是写死的，那它很可能会变得模糊。举个例子，我把图片放在 Grid 里面，图片的对齐方式设置为居中对齐，Grid 的宽度设置为自动适应窗口大小，如果我这样做，当窗口的宽为奇数&图片本身宽为偶数时（或者窗口宽度为偶数&图片的宽度为奇数），图片就会变得模糊。示例如下：（由于图片被博客压缩，效果不明显） 技巧：这个问题的解决方案，只有把图片的位置写死，尽量不要采用居中对齐的布局方式，以保证图片是清晰的。但有时候多个布局层叠较深时，上
3、一层的对齐方式，也会直接影响图片的显示效果。这样就只有忍受了。这也就是为啥我说这是 Blend 的很大问题。这些问题的根源可能是由于 Blend 是基于矢量绘图的，所以导致 Blend 制作的界面，和其他软件界面看起来就不一样，感觉就是有点糊糊的。Flash 也是矢量的，在图像方面同样存在像素对齐不准、模糊的问题，但是 Flash 的文字却是清晰的像素字体。2. 设计师不知觉充当了前段开发的角色应用 Blend 的一个最大优势在于，设计师用 Blend 制作好界面后，程序员可以直接拷贝 Xaml 到程序里面。实际上，Blend 相当于一个自动生成代码的工具，设计师在不知觉中就完成了程序界面部分
4、的工作量。这也便是保障了软件的最后效果和设计师的设计稿完全一致的条件。既然设计师完成了部分代码，那么就不可避免的需要考虑性能问题。案例：在网易相册客户度的开发前期，作为团队中的美术，我也是临时起步现学现用的 Blend，当时我不考虑什么性能（其实当时的开发人员也不熟悉 WPF，也不清楚什么影响性能），我还是像使用 PS 一样的使用 Blend，把界面的不同元素按组分类、层叠，以便于日后的管理、修改。 后来技术说，Border 比较耗性能、投影效果耗性能、层次太深耗性能但是这些如果让技术去改的话，直接就会导致了界面效果的变化，所以后来我又从头到尾的修改了界面的层次结构，能用 canvas 的就不
5、用 Grid，能用 Rectangle 的就不用 Border，原本的层次编组太深的，也都改成钱层次的。其实如果设计师一开始就知晓这些，设计的时候多留意一下，后期就不需要返工维护了。技巧：1、 越是易用的布局，越是耗性能。Grid 很强大，border 很好用，canvas 很难定位，但是 canvas 效率最高。2、 图层的层次不要太深，结构不要太复杂。其实道理是一样的，在 PS 里面如果你编组很多，组里面又嵌套很多组，你会发现这个 PSD 会变得很大，并且编辑的时候很卡。3、 给图层起有意义的名字。设计师得认识到，在 Blend 里面画的每一个图案，都是对应在 XAML 里面的一段代码。程
6、序员是会直接拷贝黏贴到工程里面的。为了使工程更易维护，设计师最好给每个图层起一个有意义的名字，说明它是做什么的。比如我在画一个按钮的高光时，这个图层就叫做“HeightLight”，画描边的图层就叫做“Border”这是一个很好的习惯，即使是使用 PS 也应该给每个图层取好名字。这种做法应该包含在一个设计规范里面，这样做的好处在于当别的设计师要使用你的 PSD 的时候，就能很好控制了，就像使用自己原创的 PSD 一样。在以前的工作中也遇到过类似的问题，当我要用别人的 PSD 时，完全要疯掉了！一百多个图层，我想提取出一个元件，但是都有哪些图层是属于这个元件的？！所以最好的做法，一起工作的人约定
7、好 PSD 文档的结构规范，合理的编组、命名。3、WPF（Silverlight ）项目的设计流程建议的流程是：1. 用 PS 等设计软件，设计出软件的最终效果，或者叫概念稿 2. 对照概念稿，和开发人员交流界面布局的方案。之所以要和开发交流，因为这步非常重要！决定了整个界面的构架方式 3. 使用 Blend 重绘概念稿，制作出最终的实现样式 其实大家会发现，相对于传统的网站项目，第一步是设计师做的，第二步和第三步实际上是前端开发的工作。 但由于 WPF 的界面，和网页不一样（只要切图、再贴图就好了），WPF 里面设计师要用 Blend 来绘制界面，要使出来的界面直接可用，在上面提及的性能方面
8、，设计师就要考虑在内。而对于界面里的动画部分，就更加需要设计师来完成制作。设计师不可能通过文字描绘说“我要这样的效果” ，然后让技术去做出来。 总得来说，WPF 的优点和缺点一样的明显。 对于新技术，个人观点，设计师必须摒弃只是做图片的想法。现在贴图的界面已经开始过时了：网站产品，随着网络带宽的提升，国内也会流行起像日韩那样的 Flash 酷站；在软件应用方面，传统的 MFC窗口已经被看腻，我相信很快就会被类似 WPF 这种技术取代。各种炫丽的应用很快就会冒出来。（这些炫丽的界面是否好，就是另外一个问题了） 未来的界面趋势肯定是动态的！设计师有了更大的发挥空间，作为代价，设计师需要掌握更多的技
9、能！4、没事多按 ctrl+S 随时保存文档.Blend 还是挺耗性能的，爆机比较常见。也可能我这台电脑比较慢吧。多保存总没错 ：P随着计算机软件开发分工细节化，微软对已有的产品线进行了调整，在保持原有经典开发工具 Visual Studio 基础上，又推出了一套新的设计开发工具系列，Expression Studio。 Expression Studio 设计工具系列包含四项主要产品：Expression Blend Expression Blend（下称 Blend），是一款用于设计桌面和 Web 应用用户界面的可视化工具。用户可以通过拖拉控件方式创建用户交互界面；另外 Blend 中，包
10、含一款软件原型建模工具 SketchFlow， 该工具允许用户快速开发出专业的项目原型，创建设计原型后，以丰富的界面效果展示给客户，该工具将在后文详细讲述。Expression Design Expression Design（下称 Design），是一款专业的图形图像设计编辑工具，主要是为项目美工设计人员准备，如果你对 Photoshop，Fireworks 或者 Illustrator 熟悉，可以把Design 看做同类产品，其中使用原理大部分都是相同的，而 Design 的优势是可以和Blend 完美无缝结合，创建图形后，可以直接转换成为 XAML，供 Blend 调用，由于本系列教程是
11、讲述 Blend，这里就不再对 Design 过多描述，在后文用到时，我们将详细讲述。Expression Encoder Expression Encoder（下称 Encoder）是一款专业的视频编辑工具，开发人员可以使用该工具编辑视频项目，并发布到 Web 服务器，Silverlight 项目可以在应用中进行高质量播放调用。 由于本系列教程是讲述 Blend，这里就不再对 Encoder 过多描述，在后文用到时，我们将详细讲述。Expression Web Expression Web（下称 Web），是一款专业的 Web 页面设计工具。如果您对Dreamweaver 熟悉，可以把 We
12、b 看做同类产品。Web 允许开发人员通过即见即所得的模式，设计和开发符合 Web 标准的网站。由于本系列教程是讲述 Blend，这里就不再对Web 过多描述，在后文用到时，我们将详细讲述。既然本系列文章讲述 Blend，我想我们应该多了解一些 Blend 方面的知识。我们一直在说Blend 强大，具体它强大在哪里呢？首先作为交互性设计工具，Blend 解决了传统开发中开发人员和设计人员配合不容易协调的瓶颈。无论是桌面应用还是 Web 应用，越来越注重用户体验性，而程序代码设计和美工设计也逐渐被细分化，而两者在项目中的配合是至关重要的，相信有不少开发人员都有过相同的经历和感触，程序开发人员和美
13、工设计人员一遍又一遍的修改框架希望能够达到完美匹配。Blend 正是针对该问题推出了一系列的解决方案，例如，在 Blend 中编辑Silverlight 或 WPF 项目 UI 代码的同时，也会直接绑定到 Visual Studio 中，实现双向修改代码功能； 在 Blend 中，可以快速导入 PhotoShop 图形和 Illustrator 矢量图，方便项目UI 设计。其次，Blend 是一款通用的设计工具，支持设计跨平台跨浏览器的 Silverlight 和 WPF 应用项目，为了简化设计人员的工作量，Blend 支持一个简单的可重复利用的元素叫做行为（Behaviors），设计人员可以
14、直接应用不同的行为到项目中，无需编写任何代码，例如，可以直接应用拖拉行为到项目，让项目支持拖拽控件。 在微软 Expression 官方网站，有大量的行为（Behaviors）代码下载，免费使用。最后是快捷方便的设计方式，以及软件项目原型设计工具 SketchFlow。 在 Silverlight 中, VisualStateManager 的编辑是很复杂的，如果仅靠 Visual Studio 进行代码编辑，是非常浪费时间和精力的事情，如果使用 Blend 进行编辑，会大大的提高效率。 另外，使用Blend 进行控件的样式和模板设计也是非常方便的，我们将在后文详细描述。 值得一提的是 SketchFlow，该项目是现在为数不多的优秀建模工具之一。使用该工具，开发人员可以快速的建立项目原型，以 Silverlight 的方式展示给客户或者项目团队成员，我们将在后文详细描述。通过以上的描述，我们可以清楚明白，从事 Silverlight 和 WPF 项目开发，Blend 是必不可少的设计工具，学会了 Blend 会在开发过程中达到事半功倍的效果。 也正式以上的原因，才会有了本系列文章教程，本系列教程旨在为了让更多的开发人员了解和学习 Expression Blend 的使用，希望能够让更多的开发人员加入到 Silverlight 和 WPF 开发行列。
