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

飘落的枫叶

Artist: Karl Kim Location: Austin, TX Occupation: Visual designer. Making the world of software fun again, and making it look good. Hobbies: Typography, photography, motion graphics Phoebe翻译 项目概况 项目名称为“Nostalgia”，是为Yahoo Flickr设计的照片浏览器。通过这个浏览器，用户可以完成在本地电脑上的“遥控”搜索，进行照片管理并且同步到用户的Flickr帐户，当然用户也可以更新在线照片。 Flickr的宗旨是将人们联系在一起，为用户提供一些简单易用的工具，并且提供良好的用户体验 。我们相信这个照片浏览器将会给用户带来更为丰富的体验。 我很喜欢“Expression Blend”。在这个项目中，我只需要按照格式完成一半的工作，剩下的一半就可以直接交给开发人员了。这使得我们的工作效率大幅度提高。 设计草图及设计理念 我们创造了“创意图(mind Map)”，这帮助我们更深刻地思考问题，因为一些问题可能并非我们想象的那样。比如一个客户要求我们重新做一套皮肤，但其实有更多的问题需要解决，这绝不仅仅是设计那么简单。

登录/注册后可看大图

我们需要解放思想上的种种束缚，把很无聊的任务想象的令人兴奋无比，将艺术家的思维贯穿其中。如果你每天做同样的事情，一定会感到厌倦，你能做的就是把每一个“此时此刻”变得更加新鲜和有趣。

登录/注册后可看大图

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

登录/注册后可看大图

登录/注册后可看大图

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

登录/注册后可看大图

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

登录/注册后可看大图

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

登录/注册后可看大图

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

登录/注册后可看大图