|
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設(shè)計的照片瀏覽器。通過這個瀏覽器，用戶可以完成在本地電腦上的“遙控”搜索，進行照片管理并且同步到用戶的Flickr帳戶，當然用戶也可以更新在線照片。
Flickr的宗旨是將人們聯(lián)系在一起，為用戶提供一些簡單易用的工具，并且提供良好的用戶體驗 。我們相信這個照片瀏覽器將會給用戶帶來更為豐富的體驗。
我很喜歡“Expression Blend”。在這個項目中，我只需要按照格式完成一半的工作，剩下的一半就可以直接交給開發(fā)人員了。這使得我們的工作效率大幅度提高。
設(shè)計草圖及設(shè)計理念
我們創(chuàng)造了“創(chuàng)意圖(mind Map)”，這幫助我們更深刻地思考問題，因為一些問題可能并非我們想象的那樣。比如一個客戶要求我們重新做一套皮膚，但其實有更多的問題需要解決，這絕不僅僅是設(shè)計那么簡單。
（點擊圖片看大圖）
我們需要解放思想上的種種束縛，把很無聊的任務(wù)想象的令人興奮無比，將藝術(shù)家的思維貫穿其中。如果你每天做同樣的事情，一定會感到厭倦，你能做的就是把每一個“此時此刻”變得更加新鮮和有趣。
定義版面
在這個階段要定義全部的版面設(shè)計及功能特點設(shè)計。這時我們不需要很花哨的圖片，而是用方框來代表。這些方框可以直接用“Windows Presentation Foundation （WPF）”來控制， “Lookless control”一詞就是從這里來的 -- 不要特定的圖像，只要特定的功能。
進一步完善
有些理念要實現(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è)計師很快地完成草稿。另外WPF還有3D設(shè)計功能，比如下圖左邊一欄，可以很直觀地看出每個系列中有多少張照片。3D制作很好的整合在整個工具中，設(shè)計師完全不需要另外一個工作程序來完成。
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.
（點擊圖片看大圖）
| 
