web-dev-qa-db-ja.com

フォームの最大幅に必要な提案

私のチームはフォームビルダーツールを構築しています。公開されると、携帯電話から27インチのモニターまで、ユーザーがフォームに入力するために使用できるいくつかの入力デバイスが存在する可能性があります。

ブラウザーウィンドウを完全に開いた場合にフォームが27インチモニターでとる最大幅-3360×2100/4kについてのアイデアをお聞かせください。

3
UX-Geek

まず、最適な読みやすさの原則がすべてに適用されることを考慮する必要があります。 A45〜75文字の幅は適切と見なされます、66文字が最適です。

ただし、一部の調査では 95-100cpl(1行あたりの文字数)の方が効果的です の場合は常にそうであるとは限りません。また、フォームにはパディングとマージンが含まれている可能性があるため、75-80cplの周りはすべて問題ないはずだと思います

しかし、もちろん、これはフォントサイズやその他のデザイン上の問題の影響を受けます。また、メディアクエリとレスポンシブサイズを考慮する必要があります。以下の簡単な比較を行って、70文字(必要に応じてスペースを数える)で12〜16ピクセルのArialフォントを使用しました。

enter image description here

ご覧のように、360pxの幅は小さなフォントで問題なく機能しますが、推奨される最小値は小さなデバイスをカバーするために320pxなので、マージンを数えるにはさらに小さくする必要があります。そして、最も一般的なサイズminus30/40pxをカバーするように拡大できます。例えば:

290px --- 450px --- 730px(ここで停止するので、これはの最大幅になりますフォーム要素

追加のリソース

3
Devin

ここで、覚えておくべきことがいくつかあります。カップルだけを強調するには、線の長さと柔軟なグリッドを検討します。

読む文学によって異なりますが、読むのに最適な行の長さは15から20ワードの間です。これは、読みやすさに関しては、フォームの幅にある程度影響します。

ただし、他にも考慮すべきことがあります。使用しているデバイスの幅に応じて、さまざまな柱グリッドに流し込むことができるフォームユニットを作成することをお勧めします。各ユニットには、凡例と必要なコンテキスト指示とともに、1つまたは2つのフィールドを含めることができます。次に、これをページに流し込むと、画面の幅に応じて自動的に順番に配置されます。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

最終的に、これはフォームの幅を決定するものになります:フォントサイズ、最適な読み取りの長さ、フォームの単位/グリッド

1
Andrew Martin