Ant Design - デザイナー向けUI デザイン言語
データを視覚化して処理する能力がなければ、データは役に立ちません。企業の将来は、ユーザーエクスペリエンスを向上させる高度なデータ収集にかかっています。データシートには、このユーザーエクスペリエンスの大部分が含まれています。優れたデータテーブルを使用すると、ユーザーは情報のスキャン、分析、比較、フィルタリング、並べ替え、操作ができ、貴重な洞察を得てアクションを実行できます。
書式設定ルールと現代の現実から見ると、テーブルの設計というのは非常に困難です：アダプティブテーブルの作成などは、地獄を意味します。テーブルはAntの設計でも使用されます。Antd テーブル デザインは、データ中心型のデザイン作成を可能にしてくれます。
Ant Designとは
Ant Designのエンタープライズレベルの製品は、多数の複雑な機能を持ち、頻繁に変更や同時実行を行う、巨大で複雑なシステムです。多くの場合、デザイナーや開発者は迅速に対応することを求められます。同時に、このような製品には類似したページやコンポーネントが多く存在し、一部は安定しており、かつ再利用の可能度が非常に高いです。
Ant GroupのExperience Technology部門は、多数のプロジェクトの実践と要約を行いながら、エンタープライズレベルの製品－Ant Designに対応する設計システムを徐々に磨き上げてきました。「自然」、「確実性」、「意味」、「成長」の4つのデザインバリューに基づき、モジュラー型ソリューションを通じて、生産コストの余剰を削減し、設計者はより良いユーザーエクスペリエンスに集中することができます。
設計リソース
Ant Designは、設計者が高品質な製品プロトタイプを迅速に作成できるよう、完全な設計ガイドライン、ベストプラクティス、設計リソースおよびツールを提供します。
- デザインバリュー
- 設計パターン
- 可視化
- 図解
- 設計リソース
- スケッチツールセット
設計パターン
Ant Designのバリューを遵守する設計モードでは、エンタープライズレベルの製品の設計で繰り返し発生する問題に対する一般的なソリューションを提供し、アプリケーション間のインタラクションを効果的に統合します。
Antdテーブルコンポーネントを使用し、設計パターンに従ってインターフェイスを設計すると、不要な思考コストを削減するだけでなく、インタラクションの確実性と設計の効率まで向上させてくれます。さまざまな固有のビジネスシナリオに適応する必要性を鑑みると、モデルのルールは、ある程度の柔軟性が必要で、互いに分離することはできません。設計モデルの構築ロジックを理解することで、より多くのシナリオ特性を備えたソリューションを導き出すことができます。
原則
値から得られる一般的な設計スキルには、情報を効率的に整理し、ユーザーとインターフェイス間のインタラクションを確立する方法などの原則的な要件が含まれます。
グローバルルール
ナビゲーション、データ入力、データ表示、フィードバック、操作、ヘルプなどの一般的なインタラクティブな動作を標準化することで、コンポーネント要素の標準的な使用方法と柔軟な空間を提供し、それらをまとめて優れたエクスペリエンスを作り出す方法を認識します。
テンプレート ドキュメント
デザインエクスペリエンスに基づいて、フォーム、リスト、データビジュアライゼーション、詳細ページ、ワークベンチ、例外、結果、エディタの一般的なソリューションを要約し、デザイン目標、設計テクニック、および各タイプの典型的なページコンテンツなどのデザインを導入し、設計者がインターフェイスの構築を素早く開始できるようにしました。また、これらの典型的なページをオンラインのAnt Design Pro内でプレビューすることもできます。
Ant Designテーブルとは?
似たようなライブラリが存在する中、Ant Designは際立つ2つの機能を備えています：それがテーブルとフォームです。これらの機能は実はどちらも、単純なコンポーネントではありません。それらについて詳しく説明していきましょう。
Antd テーブル
Ant Designは、デザインの改善のための設計オプションを多数提供しており、Antd テーブルもその一つです。Ant Designを使用すると、コードを使用せずに素晴らしいテーブルを作成することができます。
フォームコンポーネント
Ant Design は、便利でカスタマイズ可能なフォームコンポーネントを多数備えています。
- 入力と入力ナンバーは2つの異なるコンポーネントです。
- DatePickerでは、1日または期間のみが選択可能です。2つ以上の独立した日付を選択する機能を追加する方法は見当たりませんでした。
- RangePickerは、モバイルデバイスに適合しない場合が多いです。2つのDatePickerを使用する必要があります。
- TimePickerは、3つの組み合わせを選択する (時間、分、秒) 形で作られていますが、これは一般的にあまり馴染みがないかもしれません。
- アップロードコンポーネントのAPIは、柔軟性に乏しく見えます。
Antdテーブルを作成する方法
Wondershare Mockitt は、プロトタイピング、レイアウト、ウェブサイト、およびモバイルアプリケーションのためのソフトウェアです。Mockittでは、簡単なドラッグアンドドロップでウィジェット、アイコンを挿入することができ、サイズとフォーマットの変更も可能です。Mockitt は、UI/UX デザイナーが複雑でインタラクティブなプロトタイプをデザインできる優秀なUX ツールですが、使いこなせるようになる時間が必要です。プロフェッショナルな UI/UX デザイナーであれば、 Mockitt を使用して、より複雑な対話型プロトタイプを作成することができます。
Wondershare Mockittは無料で利用可能
Wondershare Mockittはとても魅力的ですが、もしもあまりにも高価だとしたら意味がありませんよね。しかし、Mockittは有効期限なし、完全に無料で試用してみることができます － もちろん無料版でも、複雑なプロトタイプを処理することが可能です。
チームでの協業や、一度に3つ以上のプロジェクトを行いたい場合は 、Mockittの有料メンバーシップ (個人プランまたは法人プラン) にアップグレードが必要です。より多くのツールや機能が使用可能になりますが、それでも年間59ドルしかかかりません。
超直感的な操作性
Wondershare Mockittのインターフェイスは、非常に使いやすくできています。高速ワークフローの実現とチームでの共同作業も非常に重要ですが、その点でも非常に優れています。ドラッグ＆ドロップ操作でも、レイアウトやインターフェイス接続でも、シンプルで分かりやすいので迷うことはありません。
進行中の複数のプロトタイプを閲覧する場合でも、そのうちの１つのリソースをチェックする場合でも、自身のデザインテンプレートを調整したい場合でも、すべてがスムーズに進み、作業を迅速に行うことができます。
Wondershare Mockittは、デザイナーがAnt Designを直接使用できるant designアイコンを提供しています。デザイナーとして、コードを知らなくてもant designアイコンを使用することができます。
1. Wondershare Mockitt 公式ウェブサイトにサインアップする：サイトにアクセスし、「サインアップ」ボタンをクリックして、自身のemailアドレスでアカウントを作成します。
2.Wondershare Mockittは良質なデザインテンプレートを数多く備えています。左上の「リソース」ボタンをクリックすると、Ant Designのテンプレートを見ることができます。
3. Ant Designテーブルテンプレートを選択し、「ライブラリに保存」をクリックします。
4.「作成」ボタンをクリックします。プロジェクト名を設定し、デバイスオプションを選択します。
5. プロジェクトを作成すると、デザインのための数多くのオプションを揃えたダッシュボードが表示されます。
6. ダッシュボードの上部に「ライブラリ」ボタンが表示されますので、[ライブラリ] ボタンをクリックしてください。
7. ライブラリボタンをクリックすると、左側に多くのウィジェットが表示されます。保存されているAnt Designテーブルのフォルダをクリックし、必要なウィジェットを選択して［画面に挿入］をクリックすると、ダッシュボード内のウィジェットを編集することができます。
8.作成したAnt Designは、簡単にエクスポート、共有、ダウンロードすることができます。
