ユーザープロファイルの設計: 上書きの使用方法

UI/UXデザイナーが手がけているソフトウェアプロジェクトの種類(フィンテック、ブロックチェーン、eコマースのアプリ)に関係なく、ほとんどすべてのプロジェクトが共通の1つの画面を共有しています。この場合、ユーザーの個人情報を含むアプリの部分について話しています...彼のプロフィール。

はい、表面的には、すべてがケーキのように見えます。画像、名前、パスワード、保存ボタンに加えて、さまざまなオプション設定を含める必要があります。これはすべて真実ですが、この単純さはありふれたシナリオにのみ適用されます。ソフトウェア製品の具体的なビジネスケースを深く掘り下げると、ユーザープロファイル画面が少し複雑になる可能性があります。内部レベルから請求、検証まで、プロファイル画面に関しては、悪魔は細部に宿っています。

コンポーネントが豊富なユーザープロファイルケースを設計する必要がある場合は、ギアアップする時が来ました。最適なUXシナリオを定義し、それを表現するための最適なコンポーネントを選択するといういくつかの課題に直面することになります。次に、最初のプロトタイプのイテレーションでUXテストを実行した後、ワイヤーフレームの変更と改善を行います。そして、はい、ワイヤーフレームをできるだけ早く改善する必要があります。

さらに、このお馴染みのフレーズである「できるだけ早く!」にこだわって、ピクセルパーフェクトな事前定義されたSketchコンポーネントとIndigo.Designパターンを使用してUXコンセプトを構築する方法を紹介しましょう。

Let’s Begin

最初の紙のスケッチがすでに終わっているので、画面の前にいて、Sketchを始める準備ができています。これが最初のきちんとした驚きです(ポジティブな雰囲気のためだけに驚きを使用することに固執しましょう):

Indigo.Design UI Kitsを使用するときに、デザインコンセプトに最も近いパターンの1つを簡単に挿入できるため、空白のアートボードからどのように開始するかを考えるのに時間を無駄にする必要はありません。

Indigo.Design製品チームの一員として、さまざまなユースケースに役立つパターンをさらに作成できることを楽しみにしています。ですから、特定のユースケースが必要な場合は、遠慮なくお問い合わせください。モックアップを添付して、よりよく説明することもできます。

次のステップは、特定の要件に従って既存のユーザープロファイルパターンを設定することです。変更を追跡するために、変更されたパターンの隣に最初のパターンを保持します。

これは、別のプロファイル画像表現を選択した後の結果です。

アバターの下にあるオプションから、右下隅のアイコンの背景色、アイコンの種類、テキストの色、プレースホルダーテキストなどをすばやく定義できます。

ご覧のとおり、初期パターンにはいくつかの入力があり、最初の入力はフォーカス状態で表され、残りはフィルド状態です。もちろん、状態を変更したい場合は、状態オプションから簡単に変更できます。

この例では、アイドル状態を選択したので、その結果を受け取ります。入力を指定するときにかなり役立つのは、その動作を明確に記述することです。たとえば、パスワードが正しく入力されていないか、正常に入力されているかをメモします。これは、状態ドロップダウンから再度設定できます。必要な状態を選択した後、入力は垂直に完全に分散されます。

入力のレイアウトを変更して、線の代わりにボックスを表示する場合はどうなるでしょうか。心配いりません、このように変更するだけです...

…そして、完全ピクセルのボックス化された入力を受け取ります。言うまでもなく、そのレイアウトを好む場合は、他のすべての入力に対してそのレイアウトに固執する方がよいでしょう。

次に、接尾辞、接頭辞、アイコンなど、より複雑な入力が必要な場合はどうでしょうか。私たちのライブラリは、いくつかのケースをカバーする簡単に編集可能なテンプレートを提供します。まずは初期条件から見ていきましょう。

次に、プレフィックスとサフィックスのアイコンを使用して入力を取得する方法を確認できます。

おそらく、プレフィックスとサフィックスの色とアイコンの種類の両方を編集できるアイコンを編集する必要があります。

さらに進んで、入力ではなく別のコンポーネントを使用する場合は、プロファイルパターンを切り離して、小さいコンポーネントを編集する必要があります。

プロファイルを編集するときにスイッチオプションが必要になることが非常に多いため、Indigoライブラリからそのようなコンポーネントを追加して編集しましょう。

パターンは既に切り離されているため、別のオプションを追加した後で入力を削除して、位置合わせの基点として使用することをお勧めします。

正確な位置合わせの後、オフセットの間に収まるようにスイッチコンポーネントを引き伸ばすだけです。

最後に、不要な入力またはフィールドを削除し、スイッチラベルを編集します。

プロファイル設定がより複雑な場合は、ユーザーを別の画面またはより深いレベルに移動するアイテムを追加する必要がある場合があります。このような場合は、リストアイテムを使用することをお勧めします。

まず、ライブラリからコンポーネントとして追加し、次に画面上の任意の場所に配置し、幅を調整して画面サイズを固定します。最後に、ラベルを変更することを忘れないでください。

私が追加したい重要な注意点:オーバーライドメニューからコンポーネントを追加しないでください。コンポーネントリストの一番上に配置されているため、非常に魅力的であることはわかっていますが、適切なオプションパネルから構成するよりも、最初にコンポーネントの初期フォームを追加する方が適切です。

それだけです！お約束通り、Sketch UIライブラリを使用すると、生産性が向上します。しかし、これはほんの始まりに過ぎず、よりエキサイティングなIndigo.Design機能(デザインのコード生成方法など)については、今後の記事で明らかにする予定です。