🎨 デザインリソース - デザインをさらに向上させよう！
🌟 紹介
Vant のデザインリソースの宝庫へようこそ！ここには UI デザイナー、プロダクトマネージャー、フロントエンド開発者など、あらゆる方が必要とするデザイン素材が集まっています。色彩の組み合わせからコンポーネントの規格まで、モバイルアプリのデザインをより専門的、統一的、美しいものにするための完全なデザインガイドをご用意しています！
🎯 デザインスケッチ
🎨 コンポーネントデザインスケッチ（Sketch）
この Sketch デザインスケッチはまるでデザインの宝箱のようなもので、丹念に磨き上げられたデザイン規格が詰まっています。色彩の組み合わせ、フォントの選択、コンポーネントのレイアウトなど、すべてモバイル端末向けのベストプラクティスに準拠しており、デザインが美しく実用的になります！
🌈 色彩規格 - アプリをカラフルに彩ろう
私たちの色彩体系は多数のユーザーテストとビジュアル最適化を経ており、それぞれの色には独特の意味と使用シーンがあります。メインカラーからサブカラー、成功の通知からエラー警告まで、すべての色彩は様々なスクリーンと光の条件下で最適な効果を発揮するように慎重に調整されています。
✍️ フォント規格 - テキストに温かみを与えよう
フォントは単なる情報の担体ではなく、ユーザーエクスペリエンスの重要な部分です。私たちのフォント規格は見出しから本文、ボタンから通知まで、様々なテキストシーンをカバーしており、すべてのフォントサイズ、行間、字重は異なるデバイスで最適な読みやすさを提供するように慎重に計算されています。
🧩 コンポーネント規格 - 一貫性のあるユーザーエクスペリエンスを構築
コンポーネントはインターフェースを構築する基本的なブロックであり、私たちのコンポーネント規格は各コンポーネントのサイズ、間隔、状態の変化などの詳細を教えてくれる詳細な取扱説明書のようなものです。これらの規格に従うことで、専門的で一貫性があり、使いやすいモバイルインターフェースを簡単に構築することができます。
🎯 アイコンデザインスケッチ（Sketch）
アイコンはインターフェースのポイントであり、良いアイコンは情報を瞬時に伝え、ユーザーエクスペリエンスを向上させます。私たちのアイコンライブラリには数百の丹念にデザインされたアイコンが含まれており、すべてピクセル単位で最適化され、様々なサイズでもはっきりと見えるようになっています。
🌐 オンラインリソース - いつでもどこでもアイコンを取得
Sketch ファイルに加えて、すべてのアイコンを iconfont.cn にホスティングしているため、いつでもオンラインでアイコンをプレビュー、検索、ダウンロードすることができます。オフィスでもカフェでも、ネットワークがあれば必要なアイコンリソースを簡単に取得できます。
👉 Vant アイコンライブラリ - すべてのアイコンをオンラインで閲覧
📐 Axure コンポーネントライブラリ - 迅速なプロトタイプデザインのための強力なツール
コミュニティの @axure-tczy さんの貢献に感謝します！この Axure コンポーネントライブラリにより、プロダクトマネージャーやインタラクションデザイナーはコンポーネントを一から描く必要なく、モバイル端末向けのプロトタイプを迅速に構築することができ、プロトタイプデザインの効率が大幅に向上します。
💡 使用コツ
🎯 デザインリソースを効率的に使用する方法
- まず規格を理解する：デザインを始める前に、色彩とフォントの規格をよく読み、各色彩とフォントの使用シーンを理解することをお勧めします
- 一貫性を維持する：プロジェクト全体でデザインスタイルの一貫性を維持することで、よりスムーズなユーザーエクスペリエンスが得られます
- 異なるデバイスへの対応：異なるスクリーンサイズと解像度への対応を考慮し、様々なデバイスでデザインが完璧に表示されるようにします
- アクセシビリティに配慮する：色彩のコントラストが障害者向けデザインの標準に準拠していることを確認し、より多くのユーザーがアプリを簡単に使用できるようにします
🔧 デザインツールの推奨
- Sketch：Mac プラットフォームで最も人気のある UI デザインツールで、私たちの主なデザインスケッチは Sketch ベースです
- Figma：クロスプラットフォームのオンラインデザインツールで、チーム協力をサポートし、Sketch ファイルのインポートも可能です
- Adobe XD：Adobe 製の UI/UX デザインツールで、機能が豊富で使いやすいです
- Axure RP：専門のプロトタイプデザインツールで、複雑なインタラクションのプロトタイプ制作に適しています
📚 関連コンテンツ
🔗 デザイン関連ドキュメント
- コンポーネントドキュメント - 各コンポーネントの詳細な使用方法を学ぶ
🎨 デザインのインスピレーション
- Material Design - Google のデザイン言語システム
- Human Interface Guidelines - Apple のデザインガイドライン
- Ant Design Mobile - アリババグループのモバイル端末向けデザイン言語
🛠️ 開発ツール
- Vant CLI - コンポーネントライブラリ開発ツール
- Vant Demo - 公式サンプルプロジェクト
- オンラインテーマエディタ - オンラインでのテーマカスタマイズ
💬 コミュニティ交流
- GitHub Issues - 問題の報告と機能の提案
- Discussions - コミュニティディスカッションフォーラム