2

UI要素のサイズ、特にボタンに関するiOSのUIデザインのベストプラクティスは何ですか。私の例では、すべてのボタンはテキストではなく画像に基づいています。

2つのアプローチが見えます

絶対サイズ

プロ：

  • 画像ベースのボタンは再スケーリングを必要とせず、ぼやけを回避します
  • インターフェイス デザイナーでの簡単なセットアップ

短所：

  • ボタンは他の UI 要素に比べて大きなディスプレイ (iPad2 と iPhone 4) では小さく見えます。

相対サイズ

プロ：

  • ボタンは、すべてのディスプレイの解像度と密度で UI 全体の外観が向上します。

短所：

  • ボタンがぼやけて見える場合があります
  • インターフェイスビルダーの制約はもう少し複雑になります

私は何かを忘れましたか？それとも私はそれを間違えましたか？

今のところ、画面に対して完全にUIを設計していました。ボタンの幅が画面幅の 10% で、縦横比が 1:1 であるとします。UI が完全に相対的な場合、すべてのデバイスですべてが一貫しているように見えました。しかし、私の質問は @2x 密度ボタンのシナリオから始まりました。iphone 4 の幅 (ポートレート モード) は 640 ですが、ipad2 の幅は 768 です。@2x、10% のボタン イメージを幅 77px または 68px で作成する必要がありますか? ダウンスケーリングはアップスケーリングよりも優れているため、77 と言えます。

さて、これは私の質問につながります：

UI を設計するためのベスト プラクティスは何ですか? ボタンの画像デザインはどうすればいいの？

4

2 に答える 2

0

iOS で画像ボタンをレイアウトするための究極のアプローチはないと思います。それは常に、何を達成しようとしているかによって異なります。

あなたの場合、次のアプローチをお勧めします。

  1. レイアウトの制約を使用して、ボタンを適切に配置します。
    間隔の制約のみを使用し、幅や高さの制約は使用しないでください!

  2. ボタンの画像を設定します (Interface Builder またはコードで)。@1x、@2x、@3x の 3 つの解像度すべて
    で各画像アセットを提供してください。

  3. 複数のボタンが一列に並んでいる場合は、それぞれに異なる水平圧縮抵抗の優先順位を付けます。これにより、ボタンがすべて画面に収まらない場合に、1 つ (または複数) のボタンが収まるように縮小されます。

にイメージを割り当てるとUIButton、そのイメージによってボタンの が決まりますintrinsicContentSize。したがって、ボタンは自動的に画像のサイズを取得し (優先度の高い制約が他に存在しない場合)、絶対に必要な場合にのみ縮小されます (上記の番号 3. を参照)。

このアプローチは、ボタンの横に柔軟なスペースを残している場合にのみ可能です。たとえば、画面を 3 つの列に均等に分割するつもりで、各ボタンが列の幅全体を占める必要がある場合は、画面サイズが小さいデバイスの画像をシステムに縮小させる以外に選択肢はありません。ボタン自体のサイズを変更できるかどうか、またはスーパービューからボタンの幅 (または高さ) を強制する必要があるかどうかによって常に異なります。

于 2016-06-17T14:41:48.643 に答える
0

通常、問題はテキストが引き伸ばされたことです。

これに従ってストレッチ領域を設定できます: https://developer.apple.com/library/ios/recipes/xcode_help-image_catalog-1.0/chapters/SlicinganImage.html

グラデーションを使っていて引き延ばすとぼやけてしまう場合は、Core Graphicsでグラデーションを描く必要があります。

于 2016-06-17T13:49:45.013 に答える