ExpressionBlend2教程2-一些特性和技巧

[原创]ExpressionBlend2教程2-一些特性和技巧技术|工具2009-05-3013:45:34阅读444评论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随着计算机软件开发分工细节化，微软对已有的产品线进行了调整，在保持原有经典开发工具VisualStudio基础上，又推出了一套新的设计开发工具系列，ExpressionStudio。ExpressionStudio设计工具系列包含四项主要产品：ExpressionBlendExpressionBlend（下称Blend），是一款用于设计桌面和Web应用用户界面的可视化工具。用户可以通过拖拉控件方式创建用户交互界面；另外Blend中，包含一款软件原型建模工具SketchFlow，该工具允许用户快速开发出专业的项目原型，创建设计原型后，以丰富的界面效果展示给客户，该工具将在后文详细讲述。ExpressionDesignExpressionDesign（下称Design），是一款专业的图形图像设计编辑工具，主要是为项目美工设计人员准备，如果你对Photoshop，Fireworks或者Illustrator熟悉，可以把Design看做同类产品，其中使用原理大部分都是相同的，而Design的优势是可以和Blend完美无缝结合，创建图形后，可以直接转换成为XAML，供Blend调用，由于本系列教程是讲述Blend，这里就不再对Design过多描述，在后文用到时，我们将详细讲述。ExpressionEncoderExpressionEncoder（下称Encoder）是一款专业的视频编辑工具，开发人员可以使用该工具编辑视频项目，并发布到Web服务器，Silverlight项目可以在应用中进行高质量播放调用。由于本系列教程是讲述Blend，这里就不再对Encoder过多描述，在后文用到时，我们将详细讲述。ExpressionWebExpressionWeb（下称Web），是一款专业的Web页面设计工具。如果您对Dreamweaver熟悉，可以把Web看做同类产品。Web允许开发人员通过即见即所得的模式，设计和开发符合Web标准的网站。由于本系列教程是讲述Blend，这里就不再对Web过多描述，在后文用到时，我们将详细讲述。既然本系列文章讲述Blend，我想我们应该多了解一些Blend方面的知识。我们一直在说Blend强大，具体它强大在哪里呢？首先作为交互性设计工具，Blend解决了传统开发中开发人员和设计人员配合不容易协调的瓶颈。无论是桌面应用还是Web应用，越来越注重用户体验性，而程序代码设计和美工设计也逐渐被细分化，而两者在项目中的配合是至关重要的，相信有不少开发人员都有过相同的经历和感触，程序开发人员和美工设计人员一遍又一遍的修改框架希望能够达到完美匹配。Blend正是针对该问题推出了一系列的解决方案，例如，在Blend中编辑Silverlight或WPF项目UI代码的同时，也会直接绑定到VisualStudio中，实现双向修改代码功能；在Blend中，可以快速导入PhotoShop图形和Illustrator矢量图，方便项目UI设计。其次，Blend是一款通用的设计工具，支持设计跨平台跨浏览器的Silverlight和WPF应用项目，为了简化设计人员的工作量，Blend支持一个简单的可重复利用的元素叫做行为（Behaviors），设计人员可以直接应用不同的行为到项目中，无需编写任何代码，例如，可以直接应用拖拉行为到项目，让项目支持拖拽控件。在微软Expression官方网站，有大量的行为（Behaviors）代码下载，免费使用。最后是快捷方便的设计方式，以及软件项目原型设计工具SketchFlow。在Silverlight中,VisualStateManager的编辑是很复杂的，如果仅靠VisualStudio进行代码编辑，是非常浪费时间和精力的事情，如果使用Blend进行编辑，会大大的提高效率。另外，使用Blend进行控件的样式和模板设计也是非常方便的，我们将在后文详细描述。值得一提的是SketchFlow，该项目是现在为数不多的优秀建模工具之一。使用该工具，开发人员可以快速的建立项目原型，以Silverlight的方式展示给客户或者项目团队成员，我们将在后文详细描述。通过以上的描述，我们可以清楚明白，从事Silverlight和WPF项目开发，Blend是必不可少的设计工具，学会了Blend会在开发过程中达到事半功倍的效果。也正式以上的原因，才会有了本系列文章教程，本系列教程旨在为了让更多的开发人员了解和学习ExpressionBlend的使用，希望能够让更多的开发人员加入到Silverlight和WPF开发行列。