web-dev-qa-db-ja.com

ユーザーエクスペリエンスレイアウトの「神聖なグレイル」の1つである「960グリッドシステム」を検討していますか?

レイアウトの「聖杯」はありますか?

私は最近、クライアント(コネチカット大学コープ大学)のWebサイトを再設計しました。そこで、彼らの古いコードにこの記事へのリンクがありました: "http://www.alistapart.com/articles/holygrail"。

さらに調査したところ、「960グリッドシステム」「http://960.gs/demo.html」にも出会いました。

それから私は不思議に思い始めました...「ここで何かが足りないのですか?レイアウトの最高のユーザーエクスペリエンスに関して設計専門家の間で合意はありますか?」

だから、私はあなたにそれを置きます: "レイアウトの「聖杯」はありますか?"

11
jffgrdnr

砂利はありません。レイアウトだけでなく、デザイン全般にも当てはまります。ルール、推奨事項、ヒントはたくさんあります。しかし、Grailsも法律もありません。デザインは科学ではないので、あらゆる法律を回避しがちです。ナタナエルが言ったように、すべての「ルール」には例外があります。それ以上:この種のアサーションはどれも一般的なルールと見なすことはできません。彼らはたまにしか正しくありません。

経験の浅い設計者にとっては、いくつかの「法則」を盲目的に守ることが良いかもしれません。より良い結果を得るのに役立ちます。ただし、そのようなルール(960グリッドシステムなど)の意味を理解している限り、いつそれに従うか、いつ無視するかを決定できます。そして、この理解ははるかに良い結果を達成するのに役立ちます。

10
Kostya

一般的に言って、グリッドシステムを使用することはほぼ常に良いアイデアです。それは、一貫して構造化され、適切に配分され、しかも十分に柔軟な方法でコンテンツを視覚的に整理する(つまり構成する)ための最良のツールの1つにすぎません。あなたはそれをベストプラクティスとして考えたいかもしれません。真のフリースタイルコンポジションアプローチを採用することが理にかなっていない限り、ほとんどの優れたデザイナーはそれらを定期的に使用しています(ほとんどの場合、Webやデスクトップではそうではありません。グリッドの使用を明確にする必要はありません。すべて、BTW)。特定の目的とすべての必要なコンテンツに適している優れたグリッドシステムを設計するには、多少のトレーニングが必要です(少なくとも、タイポグラフィとグラフィックスデザインの同様の分野の経験者なら誰でもできるはずです)。

一方、960gsなど(たとえば、青写真)は、再発明せずにブラウザー間で動作するグリッドシステムを実装する技術的に単純化するための「ちょうど」良いフレームワークです毎回ホイール(ヘック、それがフレームワークの目的です:-))注意してください、あなたはデフォルトではないデフォルトの12または16列グリッドを使用する必要があります。これらの設定は、まあ…出発点としてちょうど良いデフォルトです。 ;-)しかし、最終的には自分でロールしたくなるかもしれません。 とにかく、とにかくグリッドシステムが最初に来ます

たとえば、 http://www.subtraction.com/pics/0703/grids_are_good.pdf および http://www.thegridsystem.org/ 初心者向け。 Mark Boultonは、グリッドシステムを設計する方法についての素晴らしいチュートリアルを持っています: http://www.markboulton.co.uk/journal/five-simple-steps-to-designing-grid-systems-part-1 =

13

No. 960は、ワイヤーフレーミングへの「グリッドへのスナップ」アプローチを提供することにより設計をガイドするのに役立つオプションであり、多くの場合、一般的に良いことであると認められているものを揃えてクリーンに実装する可能性が高くなります。 UXではそのようなプリンシパルには例外があるため、その利点と制限を最初に理解し、適用するUIジョブに適していることを理解せずに960に飛び込まないでください。

5
Nathanael Boehm

私はすでに投稿されたコメントの2番目です。これはUXおよびWebデザインツールボックスの別のツールであり、他のツールと同様に、プロジェクトの性質と長所/短所に基づいて、適切な時期と誤った時期を使用します。 960グリッド自体の。明らかに、htmlプロトタイプの作成を高速化するのに役立ちます。

Omnigraffleでワイヤフレームをすばやく作成するためにレイアウトを使用します。列(12または16)グリッドに一致するようにテンプレートを設定すると、要素を非常にすばやく移動して配置できます。ただし、他の「ルール」と同様に、正当な理由がある場合は、ルールを解除する必要があります。

2
Tom

CSSグリッドシステムは、実際には技術的な「聖杯」です。そして必ずしも神聖な、あるいは聖杯である必要はありません。しかし、プレゼンテーション層のコードの作成にかかる労力を大幅に削減できるという点で、間違いなく便利なツールです。

私は、プレゼンテーションレイヤーの作成にほとんどまたはまったくスキルがない、または興味を持っている多数の開発者がチームにいる大規模なプロジェクトで非常に貴重であることがわかりました。基本的なガイドラインを作成し、オブジェクト指向のCSSメソッドを組み込むと、ページをレイアウトするためのかなり柔軟なシステムになり、手に入る可能性が大幅に低下します。

UXDに関しては、理想的には、完璧なレイアウトは、プロジェクトの特定の設計目標に対応するレイアウトです。 CSSグリッドフレームワークは、その特定のレイアウトを本番環境に導入するのを少し簡単にするだけです。

2
DA01

960グリッドのコンセプトは、非常に多くの異なるユニットで分割できるので気に入っています。グリッドは、それがデザインに合っていることがわかり、スライスするのが非常に簡単になり、列の数にある程度の柔軟性があり、計算により、通常、非常に扱いやすい数値になります。

グリッドシステムに従うことは、プロジェクトがさまざまなWebサイトで共有される可能性のある再利用可能な「ウィジェット」を設計している場合に役立ちます。標準のビルディングブロックは、開発をより簡単かつ迅速にすることができます。

しかし、究極の証拠はユーザーへの影響です。彼らが目標を達成するのに役立ちますか?それは正しいビジネス成果を生み出すのに役立ちますか?その後、素晴らしい!他のアイデアや可能性に自分を制限しないでください...

1
Nathan-W

聖杯とは言えないかもしれませんが、使い始めて以来、構造と美的魅力が確実に向上しています。

私の複雑な複数ページのWebフォームは、それがないと恐ろしいでしょう。

N

0
Nick Fine