Adobe XD CCでデザインをサイズ変更して、別のデバイスサイズ用のレイアウトを作成します。
create-webpage-header_1000x560

様々なデバイスレイアウトの基礎として使用するモバイルwebページ用のヘッダーをデザインしました。その後、レスポンシブサイズ変更を使用して、タブレットサイズとデスクトップサイズ用のアートボードを再作成しました。レスポンシブサイズ変更が有効になっている場合は、XDを使用して、デザイン内で要素を拡大縮小および整列する方法を決定できます。

レスポンシブサイズ変更を使用する前に、アートボード上でレイヤーを最適に配置する方法を試してみることが重要です。自動設定と手動設定の組み合わせを使用して、デザイン内のオブジェクトのサイズ変更やピン留めをおこなうこともできます。

create-webpage-header_step1

テストの結果を次に示します。一部のケースでは、オブジェクトを個々の要素として残しました。他のケースでは、様々な方法でグループ化しました。このデザインに対して最適に機能したのは、アイコンをグループ化してから、ロゴをアイコンのセットとグループ化する方法でした。この構造では、自動設定が適切に動作して、固定の高さと適切な要素間の間隔でロゴとアイコンがアートボードの左上と右上に固定されました。

アートボードの端との相対でのオブジェクトの配置をピンク色のサイズ変更十字線がどのように示しているかに注目してください。

create-webpage-header_step2

基本のデザインの完了後、要素をコピーし、新しいタブレットサイズのアートボードにペーストし、レスポンシブサイズ変更をオンにしました。さらに、デザインの中央にある大きなロゴとタグラインに対して手動設定を無効にして、すべての要素を選択し、ドラッグして新しいアートボードに入れました。独自のデザインをドラッグする場合は、拡大縮小と再配置の対象になるものと対象外のものに注意してください。

create-webpage-header_step3

このデザインに対しては設定がうまく動作しました。大きなロゴとタグラインは手動で調整する必要がありました。

create-webpage-header_step4

レスポンシブサイズ変更により、モバイルアプリのデザインをすばやく再利用して、タブレットとweb用のレイアウトを作成できました。

create-webpage-header_step5

各レイアウトをゼロから再作成しなくても、異なるデバイス用にデザインできる方法をご確認ください。

02/22/2019

Adobe Stock提供元:Weidong

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