デスクトップアプリのUIの設計にはどのグリッドを使用すればよいですか？
ITunesデスクトップアプリを再設計していますが、最初のバージョンはグリッドなしで設計されました。デザインの混乱を解消するためにグリッドを使用する必要があると言われました。したがって、1920 x 1080 pxのデザインキャンバスでは、20 pxの列サイズのグリッドを作成しました。アイコンの最小サイズ、マージン、フォントサイズが20pxになるため、このサイズを選択しました。このような方法で、このような細かいグリッドを持つ要素を整列する柔軟性が向上します。
これは正しい方法ですか？この場合に使用できるより良いグリッドはありますか？
視覚的な混乱を減らすためには、別の種類のグリッドが必要だと思います。問題は、ページを同じサイズの小さな長方形の適切なサイズに分割することではないと思います。むしろ、それはページを少数の大きな長方形に分割することであり、目をスキャンするために整然とレイアウトされています。これらの長方形は必ずしもすべて同じサイズである必要はなく、各長方形は必ずしも他の長方形の整数倍である必要もありません。基本的に、ウィンドウを機能領域と視覚領域に分割し、他の効果を損なうことなく、できるだけ少ない「線」を使用して領域を互いにサイズ調整および位置合わせします 。
たとえば、あなたのイラストでは、最大の画像（Cadillacticaの場合）の左端が上記の（女神の）左端のサムネイルの左端と揃っていないことがわかります。同様に、最大の画像の右端は、上の2番目のサムネイル（ニューヨークへの公開書簡）の右端と揃っていません。 （デフォルト）画像のサイズと間隔を調整して、これらが揃うようにします。テキストのマージンとエッジも同様に、線を最小限に抑えるために他のものと揃える必要があります。次のようなものが必要です：
イエールスタイルマニュアル は、最新のテクノロジーの更新を使用する可能性がありますが、グリッドの定義に関して私が知っている最良のガイドラインを持っています。視覚的またはグラフィックデザイングリッドのグーグルは、追加のリソースを生み出す可能性があります。
古いバージョンのOSXヒューマンインターフェイスガイドライン（2008など）は、グリッドのサイズを選択するのに役立つ特定のレイアウトガイドラインを提供するために使用されていましたが、そのコンテンツは最新のHIGで削除されているようです。既存のMacアプリでレイアウトを測定して、使用する可能性のある一般的に使用される寸法を取得できます。
他の人が述べたように、細かいグリッドを持つことは必ずしもあなたが望むものではありません。それを都市のグリッドのように考えてください。あなたは都市のすべての個人roomの間に通りや歩道を持っていませんか？ほとんどの場合、すべての建物の間に通りや歩道はありません。市のグリッドは、より大きなコンポーネントをグループ化し、それらのブロック内には多くのものまたはほんのわずかなものを含めることができますが、それらはすべて街路によって区切られています。
次に、グリッドをレイアウトするときに、まずページを適切な数の列に分割します。これはBootstrapなど、最も優れたWebフレームワークが使用するものであるため、合計12列をお勧めします。次に、ページに必要なコンテンツの種類を決定するときに、必要な行数を決定しますが、そのセット数を固執する必要があるとは感じないでください。列を追加するよりも、行を追加する方が簡単です。
アルバムアートの画像などのコンテンツを追加する場合、完全な正方形でない場合は、コンテンツの最大の寸法を目安にします。次に、それを視覚的に小さな「グリッド」に分割します。これは、コンテンツの一部と情報の行の周りにマージンを作成するためのガイドとして機能するのに役立ちます。
うまくいけば、これらのガイドラインのいくつかが正しい方向に進むのに役立ちます。落胆しないでください！
コンテンツの周りのデザインでグリッドをどのように使用するかについてもう一度考えさせられるAndy Clarkeによるこのプレゼンテーションをご覧になることをお勧めします。
画面に黄金比を適用したり、上記のビデオでも触れたグリッド方式を組み合わせたりする際の素晴らしい注意点について、このスピーカーデッキを一通り見ていきます。
https://speakerdeck.com/malarkey/designing-imaginative-grid-systems-port-80-newport