ピクセルパーフェクトなiOSUIデザインを実装する方法

「ピクセルパーフェクトなデザイン」という言葉は、それが何を意味するのか、何を意味するのかを考えずに、何度も聞いたことがあるでしょう。 ここ数ヶ月、ピクセルパーフェクトなデザインコンセプトの衰退について耳にする可能性がありますが、特にiOS UIデザインに関しては、これらの主張には小さな問題があります。

つまり、ピクセルパーフェクトなデザインの定義は、ほとんどのiOSUIガイドラインのように石に刻まれていません。 人々はそれをさまざまな方法で解釈するため、問題が発生します。ピクセルの完全性は一部の人には受け継がれているように見えるかもしれませんが、別の名前ではありますが、他の人はこの原則を今後数年間使用し続けます。 これは主に命名法の問題です。

ピクセルパーフェクトなUIデザインとは何ですか？

ピクセルの完全性の明確な定義がないため、ピクセルの完全性の設計概念についての私の理解は、すべてがシャープネスと忠実度を最大化するために行われるということです。 デザインが実装されると、どのiPhoneディスプレイでも同じように見え、アーティファクトや問題はありません。

ピクセルパーフェクトなiOSアプリUIを作成するということは、ピクセルを念頭に置いてデザインを作成し、参照されているデザインのすべてのピクセルに至るまで、画面上にまったく同じデザインを実装すると同時に、他のデバイスに応答して適応することを意味します。

しかし、なぜピクセルパーフェクトなデザインなのか？

UIデザイナーは、認識と操作が簡単なインターフェイスを作成するために最善を尽くします。 設計者の作業を尊重し、提供されたとおりにインターフェイスを実装することは、開発者の専門的な義務です。

ピクセルパーフェクトではないアプリでは、ユーザーがアプリを使用したり楽しんだりするのを妨げるような重大な問題が発生する可能性はほとんどありませんが、ピクセルパーフェクトなアプリは間違いなくシャープでクリーン、そして一貫性があります。

AppleのAppStoreは非常に競争が激しいため、全体的な外観とユーザーエクスペリエンスを向上させるためのあらゆる工夫を歓迎します。 アプリを差別化し、見やすくすることで、収益性を高めることができます。

このクイックiOSUIデザインガイドでは、デザイナーと開発者の観点から、基本的なデザイン段階から実装までのプロセスについて説明します。

iOSUIデザインの作成

始めましょう。 ピクセルパーフェクトなアプリケーションは、明らかにピクセルパーフェクトなデザインとして始まります。そして、これらが今日どこから来ているのかは誰もが知っています。

必須のiOSインターフェイスデザインツール

Sketchは、WebおよびモバイルのUI/UXデザイナーのデファクトスタンダードになっていると言っても過言ではありません。 Adobe XDは新進気鋭の代替品ですが、人気の点でSketchに遅れをとっています。

次に、アートボードのサイズを選択します。 現在、さまざまな画面サイズとアスペクト比のiOSデバイスがあり、デザインを作成するには1つのサイズを選択する必要があります。 自動レイアウトのおかげで、他のディスプレイサイズにシームレスに適応します。 必要に応じて、サイズクラスごとに異なるレイアウトバリエーションを作成できます。

ここでの唯一の本当の質問は、設計者がさまざまなディスプレイに設計を適合させることに関する情報を開発者とどのように共有する必要があるかということです。

幸いなことに、Sketchの自動レイアウトプラグインがそれを処理するので、それぞれの仕様を書き留める必要はありません。 デザイナーは、必要な自動レイアウトを設定し、クリックするだけでさまざまな画面サイズにエクスポートするだけで済みます。開発者は、レイアウトの制約を設定する方法を理解し、iPhoneXでも古き良きiPhone5でもすべてが見栄えがすることを確認します。

注：バージョン44以降、Sketchチームはサイズ変更コントロールを大幅に改善し、親のサイズが変更されたときにレイヤーがどのように動作するかをユーザーがより強力に制御できるようにしました。

デザインの設定

それは素晴らしいことのように聞こえますが、デザインの作成に使用するサイズはまだ選択していません。 David SmithのiOS統計によると、すべてのiPhoneユーザーの57％が4.7インチのディスプレイに依存しており、iPhone 6 / 6sで導入され、その後iPhone7や最近発売されたiPhone8でも使用されています。

皆さんは今ではAppleの4.7インチのディスプレイに精通していると思いますが、数字の人でない場合は、1インチあたり326ピクセル（PPI）の750x1334ピクセルのディスプレイについて話します。 これは標準のRetinaディスプレイであり、コードでは解像度の半分になります。 したがって、 375x667ピクセルから始めることをお勧めします。

次に、iOSUIデザインがシャープネスを最大化することを確認する必要があります。 この目標を達成するには、ピクセルフィッティングをオンにする必要があります。

ピクセルフィッティングがある場合とない場合の単純な長方形の例を次に示します。

ベクターオブジェクトを編集するときは、ラウンド：フルピクセルを使用します。

これらは明らかに基本的なものであり、SketchのピクセルパーフェクトなiOS UI要素の詳細については、公式チュートリアルを確認する必要があります。

開発者はLottieライブラリを使用して簡単に再生できるため、複雑なベクトルアニメーションを自由に使用できます。 スケーリングアーティファクトに悩まされることなく、モバイルデバイスでAdobeAfterEffectsアニメーションを再生できます。 JSONファイルを開発者に提供するだけで、それだけです。

可能な限りsRGBカラープロファイルを使用してください。 広色域ディスプレイでsRGBが十分でない場合は、色またはグラフィックアセット（1つのsRGBと埋め込みカラープロファイルを備えた別のsRGB）のいずれかを提供する必要があります。 カラープロファイルの詳細については、必要に応じてAppleのHIDガイドラインを参照してください。

ピクセルパーフェクトな結果のためのカスタムコード

すごい！ これで、ピクセルパーフェクトなデザインを作成するのに十分な知識が得られました。 開発者とどのように共有しますか？ 明らかに、ツールボックスにアクセスする必要があります。

適切なツールの選択

デザイナーの作業を開発者と共有するための非常に便利なツールがあります-Zeplin。 それを使用するだけで、開発者はUIデザインが機能することを保証するために必要なほとんどすべての情報を入手できます。グラフィックアセット、デザインで使用されるフォントと色、テキストなどです。 iOSに含まれていないフォントを使用した場合に備えて、この時点で設計者が提供する必要があるのはフォントファイルだけです。

もう1つの優れたツールは、ベクター画像からコードを生成できるPaintCodeです。 PaintCodeは、SVGパスとカラーデータを使用してSwiftまたはObjCクラスを生成します。 PaintCodeを使用すると、式や変数などを使用して、ボタンのパッシブ/アクティブ状態、アップ/ダウン状態、動的テキスト、変数からのアニメーションなどを作成できます。

明らかにXcodeといくつかの標準的なiOS開発ツールに依存する必要がありますが、それについては後で説明します。

チャットアイコンのグラデーション背景のベースカラーを変更するなど、デザインアセットの特定の部分のみを動的に更新する必要がある場合に非常に便利です。 そして、便利なボーナスとして、あなたのアプリは体重を減らします。

さて、開発者はついに必要なものをすべて手に入れました。では、ピクセルパーフェクトなデザインを完全に実装するにはどうすればよいでしょうか（駄洒落を許してください）。

ツールの設定と同期

Zeplinを使用すると、設計者がすべてを正しく設定していれば、必要なほとんどすべてのものを入手できます。 何かが見落とされたり不明確になったりした場合、Zeplinは効果的なコメント機能を提供し、設計者と開発者が潜在的な問題をすばやく特定して解決できるようにします。 すべてが正しく行われたとしても、コメントはフィードバックやマイナーな改善に使用できます。

ただし、ご存知のとおり、必ずしも計画どおりに進むとは限らないため、アプリで使用するカラーパレットをデザイナーが提供したとしても、開発者が色を選択する必要がある場合があります。

これを適切に行うには、ツールを同期する必要があります。

• ディスプレイのカラープロファイルをsRGBに設定します。[システム環境設定]-[ディスプレイ]-[カラー]に移動し、 [sRGBIEC61966-2.1 ]を選択します。

• Digital Color Meterまたはその他のカラーピッカーツールで、 sRGBでの表示を選択します。

• XcodeカラーパレットのカラープロファイルがデバイスRGBに設定されていることを確認します。

注：画像にはカラープロファイルを埋め込むことができます。 この場合、この画像から正しい色を取得したい場合は、ツールをこのプロファイルに適合させる必要があります。 幸いなことに、これは例外であり、そのようなケースをあまり頻繁に経験するべきではありません。

Xcode 9では、必要に応じてベクターデータを保持することを忘れないでください。 アプリのサイズが大きくなりますが、これにより、任意の表示サイズで画像を使用できるようになります。 ただし、iOS 10以前のバージョンのAppleのモバイルOSでは、追加のベクターデータを使用して画像を拡大することはできません。

代わりに、古いバージョンのOSは従来のスケーリングメカニズムを使用し、元のサイズを超えてスケ​​ールアップすると画像がぼやけたままになります。 この特定の問題に関する追加情報については、Appleの公式ドキュメントを確認してください。

最後に、開発者は、サイズと距離が元のデザインと可能な限り一致することを確認する必要があります。 Zeplinに疑わしい情報がある場合は、画面ルールを変えて、さまざまなiOSUIコンポーネント間の距離を測定できます。 それらの1つは、多くの実用的な機能を備えた画面上の定規であるxScopeです。

iOSUIデザインに命を吹き込む

iOS UIデザインの実装に関しては、ストーリーボード、XIB、カスタムコードから選択できるいくつかのアプローチがあります。

• ストーリーボード-画面と画面間のナビゲーションを視覚化しますが、あるコントローラーから別のコントローラーにデザインを継承するオプションはありません。

• XIB-継承しやすい1つの画面またはその一部を視覚化します。 Xcode 9より前は、上下のレイアウトガイドを使用するオプションはありませんでしたが、Xcode9ではセーフエリアを使用できます。

• コード-これまでで最も柔軟なオプションですが、すぐに視覚化することはできません。

ストーリーボードの場合、デザインをフローに分割する必要があります。たとえば、LoginFlow.storyboard、SettingsFlow.storyboard、NewsFeedFlow.storyboardなどです。 そうすれば、ストーリーボードを軽量に保つことができます。

UI要素をブロックにグループ化します。 これにより、すべての制約のサポートが簡素化されます。 画面に上から下に表示されるので、怠惰になって名前付きビューを順番に配置しないでください。 下が上のものの上に表示されることに注意してください。 これにより、さまざまなビューをすばやく見つけることができます。

グループ化されていない要素とグループ化された要素については、次の例を参照してください。

左右に整列しているオブジェクトが複数ある場合は、それらをオフセットしてエッジに整列させないでください。 より良いアプローチは、前の要素に揃えるか、幅の制約がある特別な_ffsetview_を実装することです。 将来、オフセットを変更する必要がある場合は、これにより多少簡単になります。

IBで色を使用するには、Xcodeカラーピッカーの下部にパレットを用意します。

注：アプリのiOSの最小バージョンが11の場合、アセットカタログの[名前付きの色]オプションを使用できます。

まとめ

それでおしまい。 次に、結果をQAチームに送信し、すべてが正常であることを確認して、出来上がりです。 ピクセルパーフェクトなアプリの準備が整いました。

この記事の目的は、ピクセルパーフェクトなiOS UIデザインの直線的でシンプルな例を提供し、可能な限り短い時間で最高の結果を得ることにありました。 UIデザイナーと開発者の間のコラボレーションは、必ずしもこれほど単純で摩擦のないものではありませんが、それは別の記事の問題です。