2016の2日目の記事です。XDを用いて、空間を意識したデザインのプロトタイプを制作します。XDは、WebサイトやモバイルアプリのUIデザイン、プロトタイプの作成を、これ1本で実現するまったく新しいUXデザインツールです。(Adobe公式より抜粋)2016年12月2日時点でMac版のみがベータ版として提供中で、Windows版は今年中に提供開始予定です。毎月アップデートが行われ、2017年にも大規模な機能追加が予告されており、今最も熱いプロトタイピングツールとして(一部から)注目を浴びています。僕自身の印象としては、XDの軽快な動作と強力なリピートグリッド機能は単体のツールとしても使い易く、PhotoshopやIllustratorでデザインした各種パーツをXD上で素早く組み上げてプロトタイプまで持っていける柔軟さも気に入っています。XDで最終的なアウトプットを作るというよりも、実装前に動きのイメージをつかんだり、簡単なユーザーテストを行うために使用することが多いです。TOWN」のフロアガイドアプリを制作するという名目で、ユーザーを迷わせないための仕組みとしてアプリ内の立体的空間を把握し、XDが持つ様々なトランジション効果を用いて適切なページ遷移を構築していくことを目的とします。TOWNはS市郊外にある中規模ショッピングモール(という想定)で、地下1階+3階の構造になっています。地下1階は駐車場、1階は食品・外食フロア、2階はファッション関連、3階はエンタメ関連で、それぞれの階に2~3の店舗が入っています。店舗の概要(名前、営業時間等)と詳細(扱っている商品・サービスなど)を伝えるどこにどの店舗があるのかを伝えるの2点と考えます。TOWN内にいる人が目的の店を探す場合は、自分との相対的な位置関係も含めて伝える必要があります。画面をデザインする勢いで名前を付けて3分で作ったロゴを筆頭に、以下のような画面構成でアプリ中の各画面のデザインを行いました。トップページ(フロアを選択)各店舗のページ(概要と詳細)店舗一覧メニューほぼほぼXDのデザインモードだけで完結できるのですが、一部PhotoshopとIllustratorを併用しています。(一部スクロールできそうでできないところがあるのは手抜きです。すみません・・)全部並べるとこんな感じになりました。画面をつなげる次にXDのプロトタイピングモードで各画面をつなげていきます。プロトタイプモードでの一覧XDで表現できるトランジションは以下の4つがあります。なし(即座に切り替わる)ディゾルブ(フェイドで切り替わる)スライド(上に重なりつつ切り替わる)プッシュ(隣と一緒に動いて切り替わる)ここで普通は最終的な動きを想定して上記トランジションから選択しつつ設定していくのですが、比較のためにあえてすべてのトランジションをデフォルトのディゾルブ(イーズアウト0.2s)で組んでみたものが以下になります。(ver.0.0)どうでしょう?まるでパワポのようですね。一応店舗とフロアの位置情報を合わせて伝えるという目的は達していますが、動きがすべて同じなのでフロアの移動なのか店舗の切り替えなのか、店舗の概要と詳細の移動なのかが分かり辛い印象です。空間を意識した画面遷移ではこの平面的なプロトタイプに空間的な動きを取り入れていきます。TOWNの構造を元に以下のルールでトランジションを設定しました。(ver.0.5)なんとなく自分がどこを見ているのか分かり易くなったような気がします。実はすべてのトランジションがイーズアウトの0.2sという設定なので、ちょっと速過ぎてメリハリがないように感じます。イージングを制するものはプロトタイプを制する最後にイージングの種類と時間を調整していきます。コンマ数秒の調整と侮るなかれ、アニメーションの調整によりユーザーに与える印象は大きく変わります。(ver.Final)なんということでしょう。動きも適度な速度になり、より空間を感じられるようになったような気がします。TOWNはあなたの心の中に・・・)まとめ一切プログラム的なものを書かなくても、デザイナーだけで実装後のイメージを手軽に作れてシェアできるのがプロトタイピングのメリットです。そのときになんとなくアニメーションを付けるのではなく、コンテンツに応じて空間を感じ取れるような動きを論理的に構築していくことで、より分かり易く違和感の無い印象を残すことができるかもしれません。あとは関係者にプロトタイプをシェアしつつデザインを作り込むのもよし、簡単なユーザーテストを行なってUIを調整するのもよし、お好きなように進めることができます。ここで作ったサンプルもこれが完成形ではなく、ここからよりユーザー目線で手直ししていくことで理想に近付けることもできるでしょう。versionをこちらにコメント可能でシェアしていますので、「もっとこうしたほうがいい」「ここが分かり辛い」などがありましたらお気軽にコメントを頂けたらと思います。XDに興味を持たれた方は是非こちらからダウンロードして触ってみてください。2016もまだ続いていますので、こちらも宜しくお願いします(参加も絶賛募集中ですよ?)。c5logコメントは受け付けていません。