web-dev-qa-db-ja.com

正しいウィンドウ寸法

更新：この質問はOSを模倣することではなく、特にネイティブで非常にランダムに見える場合の理想的な寸法についての詳細であることを明確にするためです

WindowsとMac OS Xの両方で動作するアプリケーションをAdobe AIRで構築しています。

私はウィンドウにchrome独自のUIを与えていますが、実行中のOSを維持しています（たとえば、タイトルバーボタンが左または右に配置されるなど）。

AppleまたはMicrosoft開発者ネットワークのいずれかでガイドラインを見つけることができなかったため、Windows 8のスクリーングラブを選択し、自分のバージョン用にウィンドウを再描画しました。

私がWindows 8（デスクトップモード）で見つけたのは、ウィンドウのエッジの周りに6ピクセルの間隔があり、1ピクセルの内側のシャドウと外側のシャドウがあることです。タイトルバーの高さは29ピクセル、最大化すると22ピクセルになります。

タイトルバーのボタンはさらにわかりやすく、最小化、最大化は26x20px、閉じるボタンは45x20pxです。最大化モードでは、高さが19ピクセルに縮小されます。

上記のすべてのサイズをデモするために作成したグラフィックは次のとおりです。

enter image description here

問題はなぜランダムなサイズなのか？いつものように、私がこのようなことをするとき、私は16px、24px、または32pxアイコンのいずれかで、44pxのタイトルバーのようなことをします。つまり、すべてが偶数であり、パディングと位置付けが簡単です。

たとえば、閉じるボタンの幅は45ピクセルですが、アイコンは8x7ピクセルであるため、片側に18ピクセル、反対側に19ピクセル、上部に7ピクセル、下部に6ピクセルのパディングがあります（最大化状態で高さを19ピクセルにすると、上部と下部は6ピクセルになります）。 。 ランダムな間隔に方法はありますか？

私がWindowsで最も気付いたことは、すべての異なるアプリにアイコンのサイズとウィンドウの境界の寸法（Visual Studio、Officeなど）のわずかなバリエーションがあることです。

人々はウィンドウクロームにどの寸法を使用していますか？そして、この種のものについてのガイドラインはありますか？

guidelineswindows-8
8
Cameron

なぜランダムなサイズですか？ランダムな間隔に何らかの方法はありますか？

フルスクリーンモードとフリーフローティングスクリーンモードで異なるからといって、ランダムなものにはなりません。違いは、フリーフローティングウィンドウよりもフルスクリーンモードでトップバーを押すほうが簡単なテストと同じかもしれません。全画面表示で、マウスを上に移動すると、そこにとどまります。フリーフローティングウィンドウでは、より注意深く、つまりヘッダーを大きくする必要があります。しかし、確かに知るには、適切な部門のマイクロソフト社員である必要がありますが、私はそうではありません。

人々はウィンドウクロームにどの寸法を使用していますか？そして、この種のものについてのガイドラインはありますか？

マイクロソフトは、この問題に関する優れた記事を公開しています ウィンドウサイズと画面へのスケーリングのガイドライン（Windowsストアアプリ） ここで、ウィンドウクロムについて次のように述べています。

次の表は、アプリを設計する際に考慮すべき最も重要な画面サイズを示しています。

Fullscreen screen size 
(effective pixel resolution)  |  Device description
1366x768                         Tablets, convertibles, and many laptops (16:9 aspect ratio) 
1920x1080                        Large laptops and devices (16:9 aspect ratio) 
800x1280 and 1280x800            Portrait-first small devices (16:10 aspect ratio) 
1024x768 and 768x1024            Landscape-first small devices (4:3 aspect ratio) 
1371x857 and 857x1371            Small devices (16:10 aspect ratio) 
2560x1440                        Very large all-in-one device (16:9 aspect ratio)

enter image description here

一般にアプリを対象としていますが、フォームウィンドウでも同様に機能します。

1
Benny Skogberg

私は個人的にあなたのように偶数で行く傾向があります。私はしばしば10の単位に基づいて物事の間隔とサイズを決定します。これは主に、Photoshopでデザインしているときに、Shift +矢印キーを押すと他の多くのアドビ製品が要素を10ピクセル移動するためです。これは、私が単に数字にこだわることができないことを防ぎます。

時々10の単位で行くことは多すぎる。そのときは5を使用します。たとえば、アイコンが30pxでは小さすぎるが40pxでは大きすぎる可能性があるため、35を試してみます。

それでも「正しく表示されない」場合は、一度に1ピクセルずつ拡大または縮小します。ここで、26pxまたは11pxなどの測定値を取得する傾向があります。

また、12のユニットは非常にうまく機能すると思います。 2、3、4、6で均等に分割できます。かなり便利です。

ボーダーのような小さな要素の場合、私は1、2、4を使用する傾向があります。これは、科学に基づくのではなく、単に好みに基づく個人的な好みです。

0
Klewless Lewis