詳細画面を作るこのレッスンでは、前回レッスンで作成した、投稿画面から詳細画面へ移る詳細画面の作成を行っていきます。ブックマークUIデザインUXデザインプロトタイピング公開日:2019/11/30最終更新日:2020/01/26目次1.詳細画面を作成準備2.ナビゲーションバーを変更する。今回作成する画面このレッスンでは、上記図1の検索画面を作っていきます。iPhoneXSのフレームを作成し、高さを1137pxに変更し、フレーム名を「Detail」に変更します。次に前回レッスンで作成した「lv3/bar/navi」、「lv3/bar/TabBar」をAssetsから図3のように配置します。詳細画面準備12.ナビゲーションバーを変更する。ナビゲーションバーのコンポーネントを以下のように変更します。ナビゲーションバー3.サムネイルの配置Assetsから「lv1/img/Post」を配置します。サムネイルの配置4.投稿内容のコンポーネントを作成する投稿内容のコンポーネントを作成していきます。109pxで作成し、カラースタイルを「FFFFFF」に設定し、「lv2/cell/user」から16px下に「lv2/detail/discription」を配置します。次に、「lv2/detail/discription」の下に、「lv1/line/border」の配置を行い、配置した4つのコンポーネントとオブジェクトを全て選択し、「lv3/detail/Post」にコンポーネント化を行います。投稿内容コンポーネント25.材料のコンポーネントを作成する「lv2/detail/discription」から24px下に図8のプロパティーのテキストラベルを作成します。44pxで作成し、カラースタイルを「FFFFFF」に設定し、配置します。材料のコンポーネント2「lv1/line/border」を「Rectangle」の上に配置を行い、343pxにリサイズします。材料のコンポーネント3図11のプロパティーのテキストラベルを垂直中心揃えで配置します。材料のコンポーネント4上記で作成した、「Rectangle」「lv1/line/border」「テキストラベル×2」を全て選択し、「lv2/list/material_cell」にコンポーネント化を行います。図12のように複製し、テキストラベルを個々に変更し材料コンポーネントの完成です。材料のコンポーネント56.作り方のコンポーネントを作成する「lv2/list/material」から24px下に図8のプロパティーのテキストラベルを作成します。63pxで作成し、カラースタイルを「FFFFFF」に設定し、を配置します。作り方のコンポーネント2「lv1/line/border」を「Rectangle」の上に配置を行い、343pxにリサイズします。作り方のコンポーネント4先程作成した、Ellipseの上に図17のプロパティのテキストラベルを配置し、Ellipseとテキストラベルを選択し「lv1/number/label」にコンポーネント化します。作り方のコンポーネント5「lv1/number/label」から右16pxに図18のプロパティのテキストラベルを配置します。配置後、上記で作成した、「lv1/line/border」、「Rectangle」、「lv1/number/label」を全て選択し「lv2/list/make_cell」にコンポーネント化を行います。