CSP コンポーネントライブラリ

ライブラリの再利用の仕組み：一番下にCSPの基本コンポーネント、その上に汎用マテリアル（フィルター、IDコピー、ユーザープロフィールカード、連番入力ボックス）とプロダクト関連マテリアル（手動レビュー、マシンレビュー、リスク管理、データ）、一番上に各プラットフォームとシナリオパッケージ（手動レビューテンプレート、カスタムダッシュボード、セキュリティ関連データダッシュボード、ホットイベントカレンダー）。ライブ配信、Douyin、EC、Xiguaのセキュリティで再利用されるライブラリの再利用の仕組み：一番下にCSPの基本コンポーネント、その上に汎用マテリアル（フィルター、IDコピー、ユーザープロフィールカード、連番入力ボックス）とプロダクト関連マテリアル（手動レビュー、マシンレビュー、リスク管理、データ）、一番上に各プラットフォームとシナリオパッケージ（手動レビューテンプレート、カスタムダッシュボード、セキュリティ関連データダッシュボード、ホットイベントカレンダー）。ライブ配信、Douyin、EC、Xiguaのセキュリティで再利用される

プロセス

1. Discover

デザイナーやフロントエンド（FE）からの課題を収集
他の関連するデザインシステムについての調査
デザインと開発のスケジュールを優先順位付け

2. Define & Design

以前のデザイナーのデザインを参考にして、一貫性と統一性のためのデザインの背景とビジネスの背景を把握します。
Semiドッキングを直接修正する可能性を評価します。

3. Carry out

持続的な開発を行う
新しいプラットフォームを試してみる実験
PMにそれを直接試してみることをお勧めします

CSP componentとsemi componentの相違点

Semiのレーダーチャート：コンポーネントの数、UIの品質、custom性が高く、interactionの質はやや低く、ビジネスの属性とコンポーネントの機能分割の粒度は低い Semi

CSPのレーダーチャート：コンポーネントの数、UIの品質、interactionの質、ビジネスの属性が高く、コンポーネントの機能分割の粒度もやや高く、custom性は低め CSP

CSPは、semiに基づいて派生したビジネスコンポーネントの派生物です。そのコンポーネントの数、UI品質、およびインタラクション品質は、semiと一貫しており、フロントエンド開発の作業量を減らすことができます。semiは多くのデザインチームに使用されているため、非常にカスタマイズ性が高く、CSPにビジネス属性を付与し、内部でビジネス背景とデザインアプローチを統一し、多くの人々に使用されています。より詳細なユーザーの使用習慣と機能に関わるため、CSPのデザインはより詳細になります。また、semiにも逆向きの力を提供し、より優れたデザインソリューションを提供します。

Branding

ゴールデンサークル（WHY・HOW・WHAT）とブランドの対応：ブランドステートメント、価値提案「Bytedanceが所有する内容安全プラットフォーム」、スローガン、キーワード「保護、テック、安心」、対象者「セキュリティタスク実行者」、製品サポートゴールデンサークル（WHY・HOW・WHAT）とブランドの対応：ブランドステートメント、価値提案「Bytedanceが所有する内容安全プラットフォーム」、スローガン、キーワード「保護、テック、安心」、対象者「セキュリティタスク実行者」、製品サポート

価値観

Cautious

コンテンツ密度が高く、複雑で深いシナリオに役立つ

Flexible

より詳細なビジネスシナリオを提供し、複雑なレイアウトを簡素化し、コンパクトなレビューレイアウトに不要な寸法とスタイルを収集します

Efficient

プラットフォーム型の製品向けに役立ち、ユーザーの効率向上を図り、ビジネス要件に基づいて対話をカスタマイズします

デザイン思考

Atom：色、フォント、icon、丸い角、shadow…
Molecule：Input、Select、Checkbox / radio、Upload、Datepicker…
Organization：Dropdown、Navigation、List、Card、Popover / tooltip…
Modular：Filter、Diff display、Bulk operation…
Page：Form、Data dashboard、Task detail page…

Components Library カタログ

フォント

タイポグラフィ：中国語はPingFang SC、英語はInter。header-1（32、semi bold）からparagraph-small（12、regular）までの文字サイズと、ブランドカラー、機能カラー、カスタムカラー

色

ブランドカラー、セマンティックカラー、カスタムカラーのトークンと、それぞれの hover・active・disabled の状態

カラーパレット：レッド、ピンク、オレンジ、ブルー、ティール、パープル、シアン、アンバー、バイオレット、グレー、グリーン、イエロー、ライム、インディゴ、ライトブルー、ライトグリーンの各10段階と、黒と白

Icon

ライブラリのアイコン一覧

コンポーネント

Button

Interaction Styles

ボタンの状態には、デフォルト(default)、ホバー(hover)、押された、持続状態、および無効(disabled)が含まれています。異なるタイプのボタンのインタラクションは、以下の図に示されています。

Visual Styles

ボタンには4つのタイプ（通常サイズと小さいサイズ）があります：プライマリ、セカンダリ、テルシアリ、およびボーダーレス。各タイプは異なる強調レベルと異なる使用シナリオに対応しています。さらに、バックグラウンドのないボタン、ブロックレベルのボタン、リンクボタン、および分割ボタンもあります。通常のボタンの高さは32pxですが、スペースが制限されている場合、小さいサイズ（24px）のボタンを使用することもあります。