Human Interface Guidelinesを読んでみる〜基本要素〜
何を読むのか
https://developer.apple.com/jp/design/human-interface-guidelines
こちらの日本語訳されたHuman Interface Guidelinesを読みます。
（日本語訳が登場したのは最近らしいです）
なぜ読むのか
日頃iOSエンジニアとして仕事をしていますが、デザイナーの方々とミーティングをする上で最低限のデザイン知識は必要だと感じることがありました。
Human Interface Guidelinesを読むことで、デザイナーの方々とより建設的な議論ができるようになるのでは？と期待して読み進めていこうと思います。
どう読むのか
項目は以下6つに分かれていました
それぞれかなりのボリュームがあるので、この中から基本要素→コンポーネント→パターンの順に読んでいきます。
これらを選んだ理由は業務で必要になりそうな項目だったからというシンプルなものです。
基本要素を理解する
高度な体験を実現する上で、デザインの基本要素がどのように役立つかを理解します。
どのように役立つかを理解できるのは良さそうですが
いきなり基本要素を理解すると言っても、基本要素自体がかなりのボリュームです。
アクセシビリティ
アプリアイコン
ブランディング
カラー
ダークモード
アイコン
画像
没入体験
インクルージョン
レイアウト
マテリアル
モーション
プライバシー
右から左
SF Symbols
空間レイアウト
タイポグラフィ
表現
とはいえ全部は必要なさそうです（例えば「右から左」など）
iOSエンジニアとして関わりが多い部分としてはアプリUIを作るところなので、カラー、ダークモード、アイコン、レイアウトあたりを読んでいきます。
カラー
カラーを適切に使用することは、コミュニケーションの強化、ブランドイメージの喚起、視覚的連続性の提供、状態やフィードバックの伝達、情報の理解につながります。
ベストプラクティスの気になった箇所を見ていきます。
ゲーム以外のアプリではカラーの使用を控えめにする。ゲーム以外のアプリでカラー数を増やしすぎると、情報が明確に伝わらず、ユーザの集中力を削ぐ可能性があります。重要な情報に注意を向けるため、またはインターフェイスのパーツ同士の関連性を示す目的で、控えめにカラーを使うことをおすすめします。
つまり基本的にカラー数は控えめにするべきで重要な情報ということをユーザーに伝えたい時に使っていく訳ですね。デザインが上がってきた段階でカラー数が多かったり、注意を向けたくない部分に色が使われていたら一度確認しても良さそうということですね。
同じカラーを別の意味に使わない。インターフェイス全体でカラーの使い方を一貫させます。状態や操作の可否といった情報を伝達するためにカラーを使う場合は、特にこの点に注意してください。例えば、アプリでテキストをタップして詳細を表示できることを示すために青を使ったとします。この場合、アプリでカラーによらない視覚的インジケータ（シェブロンや矢印のアイコンなど）によって操作の可否を伝える場合でも、操作可能なテキストに青以外のカラーを使うと分かりにくくなります。
これも同じで、別の意味に使われている色がある場合は確認した方がいいですね。
ダークモード
ダークモードはシステム全体の外観設定で、暗いカラーパレットを使用して低照度環境で快適な表示体験を実現します。
ベストプラクティスの気になった箇所を見ていきます。
両方のモードでコンテンツが快適に読めるかをテストする。例えば、ダークモードで「コントラストを上げる」や「透明度を下げる」がオンになっている場合（どちらかの場合も両方の場合も含む）、暗い背景にある暗いカラーのテキストが読みにくくなる場所ができる可能性があります。また、ダークモードで「コントラストを上げる」をオンにすると、暗いテキストと暗い背景との間でのコントラストが下がる可能性があります。視力が良好なユーザは、テキストのコントラストが低くても読めるかもしれませんが、そのようなテキストを読めないユーザも多く存在するかもしれません。ガイダンスは、カラーとエフェクトを参照してください。
ダークモードでさらに設定が加わった場合にどう見えるかまで考慮するのは大変そうですね。
場合によってはインターフェイスにダークな外観のみを使用することを検討する。例えば、臨場感のあるメディア視聴アプリでは、UIを目立たせずにメディアに集中できるようにするため、常にダークな外観を使用した方がよいかもしれません。
ダークモードのみのアプリはたまに見ますが、ガイドラインにも記載あったのは初めて知りました。
アイコン
効果的なアイコンとは、ユーザがすぐに理解できる形で特定の概念を表現するグラフィックアセットです。
ベストプラクティスの気になった箇所を見ていきます。
アプリのすべてのインターフェイスアイコンで視覚的な一貫性を維持する。カスタムのアイコンのみを使用する場合でも、システムが提供するアイコンと組み合わせる場合でも、アプリのすべてのインターフェイスアイコンで、サイズ、細かさのレベル、線の太さ、視点を統一する必要があります。アイコンの視覚的な重みによっては、ほかのアイコンとの視覚的な一貫性が保たれるように、大きさを調整する必要がある場合もあります。
アプリのすべてのアイコンでサイズを統一するべき。。。これは当然のような気もするが実際にはできてない事例も多そうですね。
カスタムのインターフェイスアイコンを作成する場合は、PDFやSVGなどのベクターフォーマットを使用する。ベクターベースのインターフェイスアイコンは、高解像度ディスプレイで自動的に拡大されるので、高解像度版を提供する必要はありません。逆に、アプリのアイコンなどの画像に使用するPNGには、シェーディング、テクスチャ、ハイライトなどの効果が含まれるので、拡大に対応していません。そのため、PNGベースのインターフェイスアイコンでは、それぞれについて複数のバージョンを提供する必要があります。または、カスタムのSF Symbolを作成し、シンボルの強調度合いが周囲のテキストと一致するように倍率を指定することもできます。ガイダンスは、SF Symbolsを参照してください。
PDFやSVGの使用がガイドラインでも推奨されていたのは知らなかったですね。
レイアウト
さまざまなコンテキストに適応する一貫したレイアウトを使用すると、アプリがより使いやすくなり、ユーザがお気に入りのアプリやゲームをどのデバイスでも楽しめるようになります。
ベストプラクティスの気になった箇所を見ていきます。
相対的重要性を伝えるために配置を活用する。多くのユーザは、上から下、先頭側から末尾側というように、横書きの文章を読むときの順で項目を見ていくので、特に重要な項目は、ウインドウ、ディスプレイ、視野の左上付近に配置しておくと基本的にうまくいきます。
重要な項目は左上付近に配置するべきなんですね。知らなかった。
テキストサイズの変更に対応できるようにしておく。ユーザは、ほとんどのアプリで異なるテキストサイズが選択できるものと期待します。テキストサイズの変更に対応するためには、レイアウトの調整が必要な場合があります。アプリ内でのテキストの表示についてのガイダンスは、タイポグラフィを参照してください。
ユーザーはそうなのか。テキストサイズが変わるとUIに大きく影響するが、そこも考慮してくださいということですね。。。
以上、気になるところのみですが基本要素をサクッと読みました。
続きます〜
この記事が気に入ったらサポートをしてみませんか？