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翻譯

項(xiàng)目概況
     項(xiàng)目名稱為“Nostalgia”，是為Yahoo Flickr設(shè)計(jì)的照片瀏覽器。通過(guò)這個(gè)瀏覽器，用戶可以完成在本地電腦上的“遙控”搜索，進(jìn)行照片管理并且同步到用戶的Flickr帳戶，當(dāng)然用戶也可以更新在線照片。
     Flickr的宗旨是將人們聯(lián)系在一起，為用戶提供一些簡(jiǎn)單易用的工具，并且提供良好的用戶體驗(yàn) 。我們相信這個(gè)照片瀏覽器將會(huì)給用戶帶來(lái)更為豐富的體驗(yàn)。
     我很喜歡“Expression Blend”。在這個(gè)項(xiàng)目中，我只需要按照格式完成一半的工作，剩下的一半就可以直接交給開(kāi)發(fā)人員了。這使得我們的工作效率大幅度提高。

設(shè)計(jì)草圖及設(shè)計(jì)理念
    我們創(chuàng)造了“創(chuàng)意圖(mind Map)”，這幫助我們更深刻地思考問(wèn)題，因?yàn)橐恍﹩?wèn)題可能并非我們想象的那樣。比如一個(gè)客戶要求我們重新做一套皮膚，但其實(shí)有更多的問(wèn)題需要解決，這絕不僅僅是設(shè)計(jì)那么簡(jiǎn)單。

    我們需要解放思想上的種種束縛，把很無(wú)聊的任務(wù)想象的令人興奮無(wú)比，將藝術(shù)家的思維貫穿其中。如果你每天做同樣的事情，一定會(huì)感到厭倦，你能做的就是把每一個(gè)“此時(shí)此刻”變得更加新鮮和有趣。

定義版面
    在這個(gè)階段要定義全部的版面設(shè)計(jì)及功能特點(diǎn)設(shè)計(jì)。這時(shí)我們不需要很花哨的圖片，而是用方框來(lái)代表。這些方框可以直接用“Windows Presentation Foundation （WPF）”來(lái)控制， “Lookless control”一詞就是從這里來(lái)的 -- 不要特定的圖像，只要特定的功能。

進(jìn)一步完善
有些理念要實(shí)現(xiàn)有些則要放棄。

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可以幫助設(shè)計(jì)師很快地完成草稿。另外WPF還有3D設(shè)計(jì)功能，比如下圖左邊一欄，可以很直觀地看出每個(gè)系列中有多少?gòu)堈掌?D制作很好的整合在整個(gè)工具中，設(shè)計(jì)師完全不需要另外一個(gè)工作程序來(lái)完成。

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.