menu

09.12.19

category

comments

0

trackbacks

0

permalink

Designing iMandalArt : UIのアニメーション

iMandalArt が2.0にアップデートされました。
バックアップや OPML 形式の書き出しなど、機能面でとても強化されましたね。
待ち望んでいたユーザさんにとっては特に実のある内容だったと思います。ぼくも嬉しい!
まずは実装してくれたプログラマーさんに敬意を表したいと思います。
IMG_0964.PNG
さて、こんな機会なので少しだけ iMandalArt の開発裏話?でも書こうかと思います。
ぼくは User Interface Designer として開発に関わっているわけですが、
iMandalArt の特徴の一つでもある階層移動のアニメーションがとても気に入っています。
今日はそのお話。


Flash によるホットモックの作成
最初に作ることになったのは動きをプレゼンするためのホットモックでした。
ホットモックを作ったことで、動き方の「共有」がプログラマーさんとできたのは非常によかったです。
経験上、言葉での説明では動きの共有は難しいことはわかっていたのですが
こういう形で共有することが最善の結果を生み出すことを知ることができたのは大きな成果でした。

fig1.「tap here」をクリックしてみてください。


タイムライン情報の提供
もちろんこのFlashを見るだけでは実装するに足り得る情報ではないので、
Flash上のタイムラインをプリントアウトしてイージングなどのコメントを記したものも提供しました。
感覚的にわかるホットモックと具体的な数値で示されたタイムラインが実装の際の手助けとしてはとても有効だと感じました。
timeline.png
fig2. flashのタイムライン


というわけで、ここまでが UIデザイナーであるぼくの仕事でした。
ここからはプログラマーさんに委ねられ、そのじっくり丁寧な実装によって今あるようなアニメーションが実現された訳です。

動き1つとっても上のような工程を経てようやく形になっているんですよね。
とても骨が折れる作業ですが、みんながそれをどこかで楽しんでいる、
そんなふうにつくられたアプリケーションが iMandalArt です。

もし興味をもっていただけたら、ホーム画面に加えていただければ嬉しいです。

add your comment

Name
Mail
URL

comments

up down

comments


up down