web-dev-qa-db-ja.com

UX Designerは、Pixels、Ems、または別の測定単位で設計する必要がありますか?

レスポンシブサイト用のワイヤーフレームファイルを設定するための資料を入手しています。しかし、CSSピクセルvsピクセルvs emsの詳細を読んだ後、サイトを設計する最善の方法を決定して、開発チームと設計を伝達することはできません。これは、フォントサイズに関しては特に困惑します。

そして今、クアッドHDスクリーンの登場により、ファイルをどのように構成し、開発者と物事のサイズを伝える方法が本当にわかりません。考え?

11
AmK

私はこの質問がこの質問に答えることを願っていますが、これは私の個人的なプロセスです:私はPSDモックアップのフォントサイズを参照目的でのみ使用し、ほとんど「相対」サイズとして使用します。次に、デザインが承認された後、アセットと共に、個別のhtml/CSS基本ファイルをスタイルガイド(スタイルタイルのようなもの)として作成し、すべてのフォントの実際のサイズを定義して、応答性の観点からどのように表示されるかを確認します(サイズはモバイル用に微調整する必要がある場合があります)。

特に、スタイルガイドで使用する単位については、emsまたはパーセントを使用します。

例: http://codepen.io/nicholaspetersen/full/wdyGI/

8
Ana Santos

密度に依存しないピクセル

あなたが探しているように聞こえるのは 密度非依存ピクセル です。 @ 2xサイズで作業している場合でも、最終的な結果は同じです。コードはFont-size:24pxのままです。デスクトップとモバイル。

高密度の画面では、画像やアイコンなどの視覚要素に特定のソリューションが必要ですが、基本的なコードには必要ありません。

技術への転換は開発者次第です。利用可能なメソッドは、ほとんどの場合、ピクセルの基盤に依存します。 ( http://pxtoem.com/ などのツールを使用)

グリッド

5pxまたは8pxのグリッドで作業してみてください。これにより、コミュニケーションと計算が容易になります。つまり、「マージンはグリッド* 2またはグリッド/ 2にする必要があります。これにより、シナリオを設計が解釈しなければならない場合の速度が上がります。これは、設計仕様が十分に具体的でない場合によく起こります。 グリッドの技術的な側面 を読んで、あなたが本当に好きになってほしい。

デザインからコードへ

プラットフォームによっては、設計をコードに変換するツール( zeplin など)を入手できます。

3
Tom.K

あなたの質問に答えるには:

短い答え-いいえ。

より長い回答-いいえ、ただし、より多くのガイダンスを提供すると、開発に役立ちますか?

基本的なスタイルの基本ルールを定義すると、おそらくチームの助けになるだけでなく(スタイルガイドさえありますか?)、見た目と動作についてスケール感が得られます。

デザイナーは、必要なすべてを確実に機能させるために、デザインにスケール感を持たせる必要があります。

設計と実装の間の強力なコラボレーションは優れたソリューションの鍵です。そのため、設計の詳細に注釈を付けることができるほど、開発者は作業を簡単に行うことができます。

これはアジャイル開発方法論の弱点の1つになる可能性があります。開発者はドキュメントを望んでいないため、外観や動作に関するこれらの質問のいくつかに答えるには、設計仕様が絶対に必要です。

1
SteveD