开发者

Similar web UI experience as we see on Windows Phone 7

开发者 https://www.devze.com 2023-02-11 05:42 出处:网络
I like Windows Phone 7\'s interface experience. I find it very innovative compared to other interfaces (be it mobile, desktop or web). Yet it\'s still no less usable. All in all a very good shift from

I like Windows Phone 7's interface experience. I find it very innovative compared to other interfaces (be it mobile, desktop or web). Yet it's still no less usable. All in all a very good shift from the usual in the right direction.

Some of the effects could be used in web interfaces to enhance the experience without sacrificing usability and intuitiveness.

Effects I'm talking about:

  • perspective animation when you click on a particular hub on the home screen)
  • elements executing animation in different times (hub being clicked moves last)
  • horizontal slide with different slide amounts (titles and background images move less than screen width which gives it a feeling of depth dimension)
  • etc.

2 questions

  1. Do you know of any public website that uses at least one of the aforementioned effects and does that without the use of plugins (like Flash or Silverlight)?

  2. Is there any JavaScript library that would provide such effects (at least the different delay and different amount sliding technique)?

Extremely simplified example

I've t开发者_高级运维aken some time to put up a simplified example of transition effect that could be adopted on mobile devices and simulates at least a bit of the fine Windows Phone 7.x transitions.

Just click on any tile and see others zoom out and slide to left.

Let me know what you think about this example.

Something came out just these days

Take a look at this HTML demo written by Microsoft (or one of its partners). Blew my mind away as being the closest to WP7 experience! Amazing!


The delay and sliding should be easily handled by jQuery, but I am not aware of someone who has alredy bundled up something to directly emulate the WP7 interface. Sounds like a fun project.

0

精彩评论

暂无评论...
验证码 换一张
取 消