画面、ピクセル、要素のサイズについて

こんにちは、ユーザー名。 私は最初の投稿を、多数の新しいディスプレイ形式の出現と進行中のピクセル密度の競争に関連した緊急の問題に捧げたいと思います。 拡張現実眼鏡、スマートウォッチ、4Kモニター、さらに幅広いタブレットやラップトップなどのデバイスの出現に照らして、最適なグラフィック要素/テキストのサイズとその測定方法を検討する必要があります。 Android開発者は、間違いなく「はい、もちろんdpで！」と叫ぶでしょう。 しかし、実践は物事がもう少し複雑であることを示しています。

問題

インターフェイスデザイナーの重要なタスクの1つは、ユーザーにとって快適に製品のビジネス目標を実現できるようにする要素の最適なバランスを作成することです。 位置以外に要素を区別する方法はそれほど多くありません。

1. 大きさ
2. 色とトーン
3. 境界線（黒と白の平面と背景に触れることで個々のオブジェクトを描画するための視覚的中心のプロパティに関連付けられた特別な方法）
4. テクスチャとグラフィックの彩度

明らかに、異なるデバイス用に単一のインターフェースを開発する場合、設計者はこのインターフェースの詳細の同様の比率だけでなく、テキストおよびグラフィック要素の最大の可読性も想定しています。 同時に、David Ogilvyは、広告ポスターはどんな距離でも読むことができないが、最も見そうなシナリオの距離ではそのようでなければならない（そして要素の適切なバランスを持たなければならない）と指摘します。 対話型デバイスのインターフェースの場合、表示シナリオは非常に異なりますが、機能シナリオは通常保存されます。 さまざまなプラットフォームでのレイアウトに精通している人にとって、問題は明らかに発生します。シナリオに関係なく、目に見える角度空間の必要な場所を占めるように要素のサイズを指定する方法ですか。

あらすじ

Appleが最初のMacintoshシリーズのコンピューターを発売した1980年代半ばに、ppi標準（1インチあたりのピクセル数）との類似性が現れました。 これらのコンピューターには、1インチあたり72ピクセルの9インチスクリーン対角線がありました。 それでも、Appleは独自のエコシステムを作成する立場を取りました。そのため、当時の技術的能力の範囲で、ppiはApple ImageWriterのdpi（インチあたりのドット数）のちょうど半分に選ばれ、画面上の要素のサイズが紙上のサイズと正確に一致することが保証されました。 ただし、これはAppleコンピューターにのみ適用されました。他のメーカーは、能力と市場法に従ってさまざまなppiを使用していたためです。 コンピューターをプリンターのセットトップボックスと見なすことにより、Photoshopの[イメージの再サンプル]チェックボックスが表示され、削除してもイメージの解像度はサイズに影響しませんが、印刷品質に影響します。







一方、モニターの解像度と対角線は飛躍的に成長し始めました。 Mac 128kの解像度が512x342ピクセルだった場合、1996年までに同じ会社は対角線13.3インチで当時の驚異的な解像度である1024x768pxのApple Multiple Scan 15ディスプレイをリリースしました。 この値は、対角線に関係なく、さらに12年間、最も一般的な画面解像度のままでした。



ある種の標準を開発する試みにもかかわらず、消費者セクターの2000年代半ばまでに、解像度と対角線の画面に数百のバリエーションがありました。 専門市場については、標準化がある程度尊重されるべきであると思われますが、状況はさらに悪化しました。 製造業者は、非常に珍しいパラメーターの専門家向けのモニターを作成しました。これは蒸気機関車のようなもので、1年間使用されなくなる傾向がありました。



2008年に、対角17インチ、解像度1920x1200pxのノートパソコンLenovo Y710-200を購入しました。 残念ながら、その瞬間、私も、どうやらLenovoも、これがラップトップにとって大きな利点であるという考えを持っていませんでした：132ppi！ プロのモニターでさえも低いppiであり、医療用モニターや宇宙デバイスモニターなどの非常に特殊な技術ではすでに高い値を観測できましたが、今年Kopin Corporationは技術研究のピークの製品である2272ppiのデバイスを導入しました。 個人的には、この画面では720pまたは480pのビデオが非常に小さかったため、HD品質のビデオ（1920x1080）のみを見ることができました。 同じ状況から、初心者の設計者として、デバイスから要素のサイズが独立していることを自己実現することになりました。 ところで、驚くべきことですが、Windows Vistaはスケーリングに非常にうまく対処しました。



2010年、Steve JobsはRetina（「網膜」）と呼ばれる高精細ディスプレイを導入しました。 同時に、彼のプレゼンテーションで、彼は網膜のppiが人間の目のppiを上回っており、したがって理想と考えられていると述べました。

経験豊富なプレゼンターとして、ジョブズは一般の人々を感心させましたが、cultofmac.comの専門家によると 、彼は約2〜3回変装していました。







この写真 （Retina搭載のデバイスで開く）は、ジョブズの声明がどのように真実であるかを理解するのに役立ちます。 正常な視力を持つ人は、この画像で中央に1ピクセル幅の白と黒のストライプと2ピクセル幅のサイクル（近くの黒と白のストライプ）を簡単に見つけることができます。

目の角度分解能が限られているため、サイズが異なり、ユーザーからの距離が異なる画面のppiも異なることを理解しておく必要があります。 たとえば、iPhoneの場合、この値は952ppi程度、iPadの場合は769ppiである必要があります。

状況

これまで、ピクセルの履歴に関連する多くの問題があります。 ピクセルで指定されたサイズがすべての意味を失ったことは非常に明白です-ウィキペディア上でのみ、モニターの異なるppi値の数が200を超えているため、要素のサイズは常に異なります。 Google は 、開発センターでいくつかの測定単位を説明しています。

• px-画面の実際の物理ピクセルに対応するピクセル（ピクセル）
• inおよびmm-インチおよびミリマイター（インチおよびミリメートル）、物理単位
• pt-ポイント、画面の物理的な1/72インチ
• dp-密度に依存しないピクセル（密度に依存しないピクセル）、物理ピクセルの密度に基づき、160 dpi画面（1dpは約1px）に対応する抽象的な単位
• sp-スケールに依存しないピクセル（スケールに依存しないピクセル）、Webレイアウトのemの類似物

ちなみに、Microsoftはデフォルトでdp = 1/96の論理インチを考慮し、そのdpiはコントロールパネルで設定できます。 物理的な値を使用する場合、基本的なSI単位の導関数としてミリメートルを使用することがベストプラクティスであることに注意してください。

タイトルの「ユニバーサル」に最も近いのは、サイズの基本的な最適サイズ値を何らかの方法で知っていた場合、sp / emユニットです。 最適化に関するデザイナーの実際に直感的なアイデアは、Webレイアウトに次のハックを引き起こしました。

• htmlタグにはfont-sizeが割り当てられます。Nxx、N =値、xx =ピクセル/ミリメートル/インチ（タブレットの場合、通常3mmを使用します）。
• それ以降のすべての要素サイズでは、いわゆるrem（root em）が使用され、常にhtmlタグのfont-sizeで指定された値に等しくなります（ただし、その子ではありません）。
• bodyタグは、テキスト自体のフォントサイズを指定します。

html { font-size: 22px; } body { font-size: 14px; line-height: 1rem; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このエレガントなソリューションにより、セルサイズが明らかにremの値に等しいモジュラーグリッド上に要素を自動的に構築できます。 それにもかかわらず、レイアウトの利点にもかかわらず、すべて同じ制限があります。視覚的な認識に対して絶対的なサイズに要素を設定する方法は明確ではありません。



この問題を理解するためには、生理学をさらに深く掘り下げる必要があります。

バイオニクス

視覚装置は、明るい光によって励起される単純な光受容体の進化の結果として現れました。 同時に、自然は4つの選択肢を生み出しました：軟体動物の目、上皮から形成される、広範囲の光波を見る能力を持つ、哺乳類の目は、神経組織から形成され、もともと物体の形と動きを見つけることを目的としていました、立方体のクラゲの部屋の目、昆虫のファセットの目。 兆候として、ビジョンは生存のための非常に有用なツールであることが証明されており、したがって、人間の進化は（人自身とともに） 約50万年しか続きませんでした。



詳細を説明することなく、眼は生物学的水晶体であり、その底部にはrod体と錐体の受容体マトリックスの層が並んでいると言えます-光に反応して神経インパルスを作り出し、脳にさらに入り込む特殊な細胞です。 ただし、たとえば、網膜には、横方向の抑制に関与する情報の一次処理に直接関与するアマクリン細胞の層があることに注意してください：明るい拡散照明の場所でのパルス数の減少と照明の急激な違いの場所の増加。 したがって、このシステムは、網膜上に落ちたり、網膜に沿って移動する影のエッジを強調表示するのに役立ちます。そのため、白い背景の黒いテキストが読みやすくなります。 これは、神経生理学者が網膜と視索を視覚情報の処理の参加者、したがって脳の一部と見なす理由の1つです。



平均して、人の垂直方向の視野は約135度、水平方向-155です。さらに、眼の両眼能力と色能力は、その領域で異質です。





出所



視力（カメラの解像度の類似物）を決定するために、スネレンテーブルが使用されます-さまざまなサイズの文字の行、記号のサイズと幅が選択され、特定の距離で1分の弧の角度を締めます。 この場合、視力は標準と考えられ、人は6メートルの距離（6分の弧に相当）から6行目の文字を区別します。 科学研究では、ランドルトリングを使用するのが慣例です。これにより、活版印刷の記号やタイプの認識にエラーが発生することなく、データをより客観的に評価できるようになるためです。 ロシアでは、ランドルトの指輪はS.ゴロビンによって改作され、スネレンのテーブルはゴロビンの学生D.シフツェフによって調整されました。







サイコオプティックハロルドブラックウェルは、目の解像度の概念を、光度とコントラストの関数の角度パラメーターとして表現しました。 彼の研究によれば、この角度は非点オブジェクトのスポットを決定するためのアークの約0.7分であり（スポットがポイントではないため、観測者には少なくとも2ピクセルが必要です）、結果としてアークの最小解像度は0.35分になります。



視覚的明瞭度の現代の研究では、1度あたりのサイクル（サイクルは線の黒と白のペアを意味します）という用語を使用し、1度あたり77サイクルの値を提供します。 繰り返しになりますが、最小ループ幅は2ピクセルであるため、0.39分のアークが発生します。



100 * 100 * 60 * 60 / (0.3 * 0.3) = 400



単純な計算により、目の角度空間を考えると、網膜の光受容体の総数に非常に近い値が得られます。



明確な視界の領域は、オブジェクトの最小許容サイズとその解像度のかなり明確なアイデアを提供しますが、周辺領域の知覚のメカニズムは、無意識のスキャンと優先順位付けの原因となるため、多少異なります。 たとえば、中心窩領域（いわゆる黄色の斑点）で最大の解像度と認知的焦点を持つという人間の目の特性により、 Spritzなどのサービスは（目の動きの欠如による「遅れ」を減らすことに加えて）明確な視覚領域に単語を配置することができます。



さらに、上の図は、要素の推奨サイズの明確なアイデアを提供します。 インターフェースを快適に配置するために、現在のシナリオで注意が集中するインタラクティブな要素は黄斑領域（7°x 5.5°）を超えてはならず、それが配置されているブロック/グループ/リストは明確な視野の領域でなければなりません（ 16-20°x12-15°）。 この事実は、認知分析の分野が原則として非常に小さいため、小さな画面が少ない情報を意味しないというGoogleが提案した仮説を間接的に支持します。





明確な視野のより詳細なビュー。 異なる受容体活性のゾーン間の比率は、実際には黄金比に対応することが示されました。

最適

さらなる研究により、最も客観的な推奨事項が明らかになりました。

• 重要な要素は、少なくとも20分のアークを必要とします
• アークの推奨サイズ20〜22分
• 16分未満の弧の文字要素は避けてください。
• 良好な人間の視覚の解像度=アークの0.4分
• 平均解像度（すべての年齢を含む）=〜1分のアーク

距離に応じて要素のサイズを計算する式：

 h = 2 *d * Tan(x/2)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

どこで

h =要素の高さ

d =ミリメートル単位の距離

x =ラジアンで表された要素サイズ（ラジアンでのアーク分 ）



ミリメートル単位の推奨フォントサイズ（21分のアーク）の丸め計算の例

距離	大きさ
400	2.4
500	3.1
600	3.7
700	4.3

Oculus Riftのように、この式に従って眼に近接しているデバイスは、理想的には2000より大きい値の巨大なppiを持つ必要があることに注意してください。

結論

上記の推論に基づいて、さまざまなデバイスでのレイアウトの問題の解決に関する次の結論に達することができます。

• モニターの製造元は、画面からの距離をおよそ決定するために、ドライバーを介してOSに物理サイズを常に通知する必要があります。
• OSは、要素をパーセント単位でスケーリングするだけでなく、モニターからのデータに基づいてサイズdpを計算できるため、要素は目に見える角度空間で必要なスペースを占有します。
• 追加のキャリブレーションでは、カメラからのデータを使用して、目からモニターまでの平均距離を推定できます。
• 明らかに、午前-アーク分（アークの程度）自体が最も普遍的な単位です。 さらに、午前1時は、平均的なモニターの対応する古典的な1pxラインの目の最適なラインの太さをよく表します。

現時点では、既存の方法でこの問題を解決する唯一の方法は、ユーザーエージェントを介してデバイスパラメーターを見つけ、そのためのモジュラーグリッドのrem変数を調整することです。 ただし、このソリューションはおそらく、数十種類のデバイスで植字を分析およびテストできる大企業にのみ適しています。



PS正確なデータを記述するいくつかの段落では、ソースは変更されずに翻訳されました。