web-dev-qa-db-ja.com

TabBar画像はどのサイズにする必要がありますか?

サイズ100のtabBarのアイコンがあります。

Appleのヒューマンインターフェイスガイドライン をチェックしましたが、画像のサイズは30x30/60x60でなければなりません。

しかし、Tab Bar Controllerの高さは50なので、画像のサイズを50x50に維持しました。

さて、プロジェクトを実行すると、下の見苦しいデザインが表示されます。

enter image description here

デザインが完璧になるように、どのサイズの画像を使用する必要があるか考えていますか?

注:私もテキストを書いていません(例:ホーム、検索など)。タブボタンのテキストは画像自体の中にあります。

91
Fahim Parkar

30x30はポイントであり、30px @ 1x、60px @ 2xを意味し、中間ではありません。また、タブのタイトルを画像に埋め込むのは良い考えではありません。そのようなアクセシビリティとローカライズの結果はかなり貧弱になるでしょう。

101
garrettmurray

Apple Human Interface Guidelines :によると

@ 1x:約25 x 25(最大:48 x 32)

@ 2x:約50 x 50(最大:96 x 64)

@ 3x:約75 x 75(最大:144 x 96)

200
rsc

最新の Apple Human Interface Guidelines:

縦向きでは、タブタイトルの上にタブバーアイコンが表示されます。横向きでは、アイコンとタイトルが並んで表示されます。デバイスと向きに応じて、システムは通常のタブバーまたはコンパクトなタブバーを表示します。アプリには、両方のサイズのカスタムタブバーアイコンを含める必要があります。

enter image description here

enter image description here

私は皆さんに上記のリンクを使用して完全な概念を理解するように要求します。

34
Mihir Oza
5
Allen

私の練習では、標準のiPadタブバー項目アイコンには40 x 40、網膜には80 x 80を使用しています。

Apple参照から。 https://developer.Apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/BarIcons.html#//Apple_ref/doc/uid/TP40006556-CH21-SW1

IOS 7アイコンファミリに関連しているように見えるバーアイコンを作成する場合は、非常に細いストロークを使用して描画します。具体的には、2ピクセルストローク(高解像度)は詳細アイコンに適し、3ピクセルストロークは詳細度の低いアイコンに適しています。

アイコンの視覚的なスタイルに関係なく、ツールバーまたはナビゲーションバーのアイコンを次のサイズで作成します。

約44 x 44ピクセル約22 x 22ピクセル(標準解像度)アイコンの表示スタイルに関係なく、次のサイズのタブバーアイコンを作成します。

約50 x 50ピクセル(最大96 x 64ピクセル)標準解像度の場合、約25 x 25ピクセル(最大48 x 32ピクセル)

2
firelyu