Silverlight Demo(轉帖)

 

What a beautiful, though distracting, flash website! Let's do it in Silverlight!

 

 

This weekend I came across this flash website, in my own personal opinion I thought this site was awesome. It was just really satisfying to use, a great user experience overall.

Those that have followed me blogging know that I like to reproduce flash applications in Silverlight. In my opinion this is the best way to learn a technology…

[Click on the picture to see the beautiful FLASH site in action]

 

So what makes this worthy of reproduction in Silverlight????

The background !

In my humble opinion a RIA’s background can make or break a user’s experience with the application. The background is probably the hardest thing to get right for any application, but when a designer does get it right … man the experience that results is amazing…

This application, again in my humble opinion, has perfected their background. The use of gradient colors, simple repeated shapes, and animations make it a perfect role model for designers/developers everywhere of what you should be thinking of when building your future RIA’s.

 

So lets begin reproducing this in Silverlight ...

 

1. Analyzing the Flash version

So looking at the flash version each area has it's own visual look and color scheme. For this posting we'll take one area, the others are exactly the same but with different color schemes and shape types.

 

Taking the "Contact" area we see that the Color scheme is a simple radial gradient (2 points) going from one color to another. The shape in the picture is a simple vector that is repeated many times randomly, it is the same vector but just resized and opacity changed. [ill go into creating the background gradient and vectors a bit later]

 

When the mouse is moved around you see a beautiful, almost 3D, illusion going on. The shapes seem to move in a fluid like motion in 3D, a fake perspective illusion has been created.

This is how I think they achieved this :

a) several layers where the same exact shape is randomly scattered across the layers. All the shapes are the exact same size but the fake perspective is achieved by gradually scaling down each layer. That is each layer slowly gets smaller giving the fake 3D perspective.

The top most layer is reserved for the sub menu items (the items you click on to move between sub area sections.

As the mouse moves across the screen each layer moves in the opposite direction. The beautiful transition is achieved by each layer moving more slowly then the previous layer.

The picture below is my interpretation of how they achieved this effect.

 

 

2. Each area is a separate usercontrol and there is a MasterPage that holds all the usercontrols on it.

There is a “MasterPage” that dynamically loads each area when needed. And each area is a separate usercontrol.

 

Each Area is a separate usercontrol “scr_*” – see above

In the example of the “scr_Applications” screen we have a rectangle that defines the gradient of the background. It’s just a simple radial gradient.

Ignore the “canLayer1” layer for now as I will talk about that later, suffice it to say that that layer will contain the several layers mentioned in point 1 above that contain the shapes and the sub menu items.

3.  Each shape for each area is a separate usercontrol

 

 

There is nothing special about each usercontrol, they are just simple vector shapes layed out in a grid.

 

 

4. Navigation area is a separate user control.

This user control is used in the MasterPage mentioned in point 2 above. And it’s design surface looks like this…

When one of the links are clicked it raises an event in the masterpage which in turn dynamically hides/shows the relevant area scr* mentioned in step 2 above

 

5. Creating the Layers for each screen area (from step 2 above).

From step 2 above I mentioned at the end to ignore the “canLayer1” layer. Basically we will cover that now…

That layer contains 4 children layers that contain

[canLayer1_Controls] - Sub menu items. This is a layer that contains the sub menu items, which are just user controls that I created earlier..

 

[canLayer1_A] - Randomized shapes scattered around at a size of 100%. At the moment it is an empty canvas waiting to be dynamically populated with shapes.

[canLayer1_B] – Randomized shapes scattered around at a size of 80%. At the moment it is an empty canvas waiting to be dynamically populated with shapes.

[canLayer1_C] – Randomized shapes scattered around at a size of 60%. At the moment it is an empty canvas waiting to be dynamically populated with shapes.

Each of these layers (A,B,C) are filled with shapes in code, I chose to do it this way over using a custom layout control with wired up custom dependency properties because I wanted to build it out in under 10 mins.

Here’s a snapshot of the code used to populate each layer, as you can see it is a very simple snippet of code where we dynamically create several shape instances and throw them into the relevant canvas container....

 

6. Beautiful animation of the layers from step 5 when the mouse moves

The animation of the layers from step 5 complete the experience. It is a simple algorithm that does the following.. When the mouse moves make sure that the top most layer (canLayer1- Controls) moves the least and the bottom most layer (canLayer1-C) moves the most. It’s that simple.. here’s the code snippet, again it’s so simple but yet results in such a beautiful experience..

p.s. there is a translation animation for each layer that is dynamically altered based on the mouse movement. I used a translation animation because it’s so easy to manipulate it in code rather than use a timer based animation..

One of the other main reasons for using a storyboard animation is to get the cool delayed easing when the mouse finishes moving. When the mouse finishes moving but the background slowly stops moving a bit later is easily achievable via easing of points via storyboards however trying to do this easing via a timer and manipulating x,y coordinates manually is a nightmare!

here’s a sample of the xaml for the translation animation

 

Silverlight Demo Version: 

 

 

Conclusion:

 

I could have achieved the same result many different ways, instead of dynamically rendering my shapes in code I could have used a custom layout control that randomly created shapes configured via a dependency property. I chose to do it in code because it was just faster especially when prototyping.

When building out your RIA’s, it’s best to prototype them first as quickly as possible and concentrate on the user experience more than anything. And the main point I wanted to drive home with this post is that a RIA’s background can either make or break the user experience. It isn’t something that should be left to the end to define, it should be something that is properly fleshed out in the beginning of the design process. Get your background’s perfected first and your app will be one step closer towards UX perfection.