Thirteen23为Flickr设计软件界面的过程

项目概况
项目名称为“Nostalgia”，是为Yahoo Flickr设计的照片浏览器。通过这个浏览器，用户可以完成在本地电脑上的“遥控”搜索，进行照片管理并且同步到用户的Flickr帐户，当然用户也可以更新在线照片。
Flickr的宗旨是将人们联系在一起，为用户提供一些简单易用的工具，并且提供良好的用户体验 。我们相信这个照片浏览器将会给用户带来更为丰富的体验。
我很喜欢“Expression Blend”。在这个项目中，我只需要按照格式完成一半的工作，剩下的一半就可以直接交给开发人员了。这使得我们的工作效率大幅度提高。
设计草图及设计理念
我们创造了“创意图(mind Map)”，这帮助我们更深刻地思考问题，因为一些问题可能并非我们想象的那样。比如一个客户要求我们重新做一套皮肤，但其实有更多的问题需要解决，这绝不仅仅是设计那么简单。
我们需要解放思想上的种种束缚，把很无聊的任务想象的令人兴奋无比，将艺术家的思维贯穿其中。如果你每天做同样的事情，一定会感到厌倦，你能做的就是把每一个“此时此刻”变得更加新鲜和有趣。


定义版面
在这个阶段要定义全部的版面设计及功能特点设计。这时我们不需要很花哨的图片，而是用方框来代表。这些方框可以直接用“WindowsPresentation Foundation （WPF）”来控制， “Lookless control”一词就是从这里来的 --不要特定的图像，只要特定的功能。

进一步完善
有些理念要实现有些则要放弃。
Settling more into the concept and deciding on whatshould and shouldn’t be done. Some early ideas in terms of defining avisual language and a direction for the visual design to head into.
The semi-transparent overlay in the middle shows thefirst class support for alpha transparency in WPF. Everything that hascolor, or a fill, can also have an alpha mask that is seen throughout.This means you can also have opacity masks—or transparencies that havea gradient alpha.

增加一些颜色
Expression Blend可以帮助设计师很快地完成草稿。另外WPF还有3D设计功能，比如下图左边一栏，可以很直观地看出每个系列中有多少张照片。3D制作很好的整合在整个工具中，设计师完全不需要另外一个工作程序来完成。
Now, I add a splash of color—and make quick prototypesof the controls using Expression® Blend™ to get a feel for things. Thisallows an interaction designer to better understand the problem domainand make better choices in terms of usability. I and thirteen23 believethat the best interaction designers work in tools that allow them totinker.
One of the interesting things to note here are thevolumetric sets on the left. Our challenge was to build a control thatquickly identified how big the set was (how many photos it contained)in a glance. So, we built a volumetric set. Given WPF’s 3D capabilitieswe were able to easily accomplish this. The 3D layer is so integratedthat the workflow is still the same. Traditionally, to add 3D you wouldhave to jump to a different workflow or use some hack. Now, it’s allthere…Simple.

Integration And Collaboration
As mentioned, the interaction design is elevated to adifferent role. The designer now has the ability to get directly intoExpression Blend and do exploration incorporating their own ideasbefore they surface them to a team-level discussion. Essentially whatyou get is Photoshop on steroids. Same fidelity—but it’s real.
On a final note, it is important to realize that .png’sare not dead. Not in the least. Vectors are great, but WPF has alsobeen built from the ground up to have blazing .png rendering speed.Almost so that I have never seen comparable results. That’s somethingto wrap your head around.

Final Image
And, magic…You get beautiful stuff. The final stage isto get the developer in Visual Studio® to make it a reality. Whateverprojects have been created in Expression Blend can be seamlessly openedin Visual Studio. Perfect.