Zipic もシステム コントロールを使用しているのに、見た目が少し異なるのはなぜでしょうか? ZipicのUIは、「The Design Book for Everyone」の4つの基本原則、すなわち近接性、整列、反復、コントラストを厳格に遵守しています。これらの4つの原則はシンプルで理解しやすいだけでなく、UIを次のレベルに引き上げる最もシンプルで実現可能な方法でもあります。 近接性：関連する要素はグループ化されています。Zipicの圧縮リストでは、各ファイル項目のサムネイル、ファイル名、サイズ、圧縮率が並べて表示され、視覚的なまとまりを形成しています。一方、異なるファイルは明確に区切られています。ユーザーは、どの情報が同じ画像に属しているかを一目で容易に判別できます。設定パネルも同様に機能別にグループ化されており、出力設定と品質設定はまとめて表示され、「出力パス」と「圧縮品質」が混同されることはありません。 配置：すべての要素は視覚的に繋がっている必要があります。Zipicのサイドバー、リストビュー、詳細パネルでは、同じ要素内のすべてのテキストが配置されています。些細なことのように思えるかもしれませんが、配置が乱れているとインターフェース全体が「プロフェッショナルではない」印象を与えてしまいます。SwiftUIの`alignment`パラメータは頻繁に使用されます。`.leading`、`.trailing`、`.center`は、コンテンツの種類に応じて選択する必要があります。 反復：一貫したビジュアル要素が全体に散りばめられています。Zipicは角の半径を均一に保ち、クリック可能なテキストはすべて同じ色を使用しています。アイコンのスタイルも一貫しており、すべてSFシンボルを使用するか、すべてカスタムアイコンを使用することで、雑多な組み合わせを避けています。この一貫性により、ユーザーは「パッチワーク」ではなく「完成された製品」だと感じます。 コントラスト：重要な情報を強調表示しましょう。圧縮率はユーザーが最も関心を持つ情報なので、青いグラデーションラベルで表示します。ファイル名は二次的な情報なので通常のフォントを使用し、元のサイズはさらに重要度が低いためライトグレーを使用します。主要な情報と二次的な情報を明確に区別することで、ユーザーはどちらのオプションをクリックすればよいかすぐに分かります。 これら4つの原則はシンプルに聞こえますが、真に習得するには絶え間ない調整が必要です。私のアプローチは、コードを書いたらまず実行して効果を確認し、何か「おかしい」と感じたら、これら4つの原則を使って確認することです。関連する要素が十分に近接していないか？配置に問題がないか？繰り返し要素に一貫性がないか？強調表示すべき要素が十分に強調表示されていないか？
