UIキットとアイコンセットのリソースを使用してAdobe XD CCでアプリをデザインします。
add-emoji_1000x560

iOS用のApple UI Design Resourcesとは異なる要素を使用するアプリをデザインしています。XDで使用可能なUIキットのいずれかをダウンロードして、お気に入りのプラットフォーム用にデザインしましょう。

add-emoji_step1

製造元のツールキットで提供されているUI要素を使用できます。独自の楽しい要素を作成することもできます。Adobe StockやCreative Cloudマーケットでバリエーションを探すこともできます様々なライブラリとアイコンセットにある笑顔の絵文字のサンプルをいくつか示します。

add-emoji_step2

アセットをコピーしてデザインにペーストするのは簡単です。iOS用のシステムキーボードおよび「スマイリーと人々」の絵文字を使用するアプリ用のカスタムチャットコンポーネントをデザインしました。

add-emoji_step3

自動アニメーションアクションを使用して、プロトタイプモードでいくつかの中間チャット画面を作成し、アートボードを結び付けました。自動アニメーションでは、XDは同じ名前のレイヤーまたはレイヤーグループを探し、それらの間の違いをアニメーション化します。このデザインでは、アートボードの上半分の要素をグループ化し、グループにChatという名前を付けました。

add-emoji_step4

これで、アプリをデザインしてプロトタイプを作成するときに、様々なUIキットのデザイン要素を使用して時間を節約できます。

02/22/2019

Adobe Stock提供元:SFIO CRACHO

このページは役に立ちましたか。