違いを見つける
これらの2つの写真を見てください-違いがわかりますか？
よく見ると、それらがわずかに異なっていることに気付くでしょう。 右側の写真：
- もっとシャドー
- グラデーションが濃い
- 2行目ではなく、1行目の単語「in」
左の写真はSketchのスクリーンショットで、右の写真はiOSでの同じデザインのプレゼンテーションです。 このような矛盾は、画像をレンダリングするときに現れます。 フォント、行間隔、影の半径、色、グラデーションのオプション、およびその他のすべての定数はまったく同じです。
ご覧のとおり、レイアウトファイルを実際のコードに変換すると、元のデザインの一部が失われる可能性があります。 以下では、これらのニュアンスの一部を検討し、注意を払う必要があるものと状況を修正する方法を理解します。
なぜこれが重要なのか
モバイルアプリケーションを成功させるには、デザインが不可欠です。 iOSプラットフォームでは特に重要です。ユーザーは、うまく機能するだけでなく見栄えの良い製品に慣れています。
あなたがモバイル開発者または設計者である場合、ごくわずかな詳細がユーザーエクスペリエンスに大きく影響する可能性があることをご存じでしょう。 自分の仕事に真剣に取り組んでいる人だけが、高品質の製品を作成することができます。
アプリケーションの設計が設計段階ほど良く見えない理由はいくつかあります。 あまり明らかではない理由の1つであるSketchとiOSのレンダリングの違いを詳しく見ていきます。
翻訳の難しさ
一部のインターフェイス要素には、SketchとiOSの大きな違いがあります。 次の3つに焦点を当てます。
- タイポグラフィ
- 影
- 勾配
1.タイポグラフィ
タイポグラフィにはさまざまなタイプがあります。この例では、iOSのSketch and UILabelのText要素に対応するものを検討します。
それらがどのように異なるか見てみましょう：
上記の例の主な違いは、テキストが行に分割される方法です。 たとえば、「This text is SF Semibold」で始まる3番目のフラグメントでは、デザインの最初の行は25で終わり、アプリケーションでは「points」という単語で終わります。 テキストブロックでも同じ問題が見られます-改行が一致しません。
もう1つの目立たない違いは、Sketchでは、先頭（線間の距離）と放電（文字間の距離）がわずかに大きいことです。
2つのオプションを課すと、これらの矛盾はすべてすぐに明らかになります。
たぶんそれはフォントの中にあるのでしょうか？ サンフランシスコをラト（非常に人気のあるフリーフォント）に置き換えてみましょう。 その後、次の結果が得られます。
もういい！
行間隔と放電の不一致は同じままですが、無視できます。 それでも、注意してください-テキストを特定の方法で他の要素、たとえば背景画像に重ねる必要がある場合、これらの小さな不一致は目立つ可能性があります。
修正方法
一部には、これらの問題はiOSで使用されるデフォルトのフォント-サンフランシスコに関連しています。 このシステムフォントをレンダリングするとき、iOSはサイズに従って追跡値を自動的に計算します。 自動計算の表は、アップルのWebサイトで入手できます。 SF Font Fixerと呼ばれる特別なプラグインがあり、これらの値をSketchで考慮することができます。 サンフランシスコの書体デザインをお持ちの方にお勧めします。
注：Sketchでは、テキストフィールドがテキストの境界に正確に沿って実行されることを常に確認してください。 これを行うには、テキストを強調表示し、「固定」と「自動」の設定を切り替えてから、目的のフィールド幅を設定します。 余分な空きスペースがある場合、レイアウトに誤った値が含まれるという事実につながる可能性があります。
2.影
レイアウトにタイポグラフィの普遍的なルールがある場合、影に関する限り、すべてがそれほど明確に記述されていません。
上の写真からわかるように、iOSではデフォルトで影が大きくなっています。 これらの例では、長方形の上部の境界線が最も印象的です。
シャドウには、SketchとiOSで異なるオプションセットがあるため、簡単ではありません。 最も重要な違いは、CALayerにはスプレッドなどのカテゴリがないことです。ただし、シャドウを含むレイヤーのサイズを大きくすることでこの問題を回避できます。
シャドウは、SketchバージョンとiOSバージョンではまったく異なって見える場合があります。 レイアウトで影がきれいに見える場合に遭遇しましたが、同じパラメーターでは、アプリケーションがデバイスで起動されたときにほとんど見えないことが判明しました。
修正方法
シャドウをいじる必要があります-シャドウを意図したとおりに表示するには、手動でデバッグする必要があります。 多くの場合、半径を少し小さくし、透明度を少し高くする必要があります。
// old layer.shadowColor = UIColor.black.cgColor layer.shadowOpacity = 0.2 layer.shadowOffset = CGSize(width: 0, height: 4) layer.shadowRadius = 10 // new layer.shadowColor = UIColor.black.cgColor layer.shadowOpacity = 0.3 layer.shadowOffset = CGSize(width: 0, height: 6) layer.shadowRadius = 7
必要な変更のスケールは、色、サイズ、および形状に依存します。この例では、パラメーターを少し修正するだけで済みました。
3.グラデーション
勾配も頭痛の種です。
これら3つの例のうち、違いはオレンジと青のグラデーションでのみ表示されます。 オレンジのグラデーションの場合、Sketchのフローはより水平になりますが、iOSではより垂直になります。 その結果、最終的なアプリケーションでは、グラデーションは一般的にデザインよりも暗く見えます。
青の場合、違いはさらに顕著です-iOSの傾斜角は90度に近いです。 このグラデーションは、左下隅の青、中央の青、右上隅のピンクの3色に基づいています。
修正方法
角度が歪んでいる場合は、おそらく開始点と終了点を変更する必要があります。 これらの変更を修正するには、CAGradientLayerでstartPointとendPointを少し試してみてください。
// old layer.startPoint = CGPoint(x: 0, y: 1) layer.endPoint = CGPoint(x: 1, y: 0) // new layer.startPoint = CGPoint(x: 0.2, y: 1) layer.endPoint = CGPoint(x: 0.8, y: 0)
ここには魔法の式はありません-バージョンが同一になるまで値を変更し、結果を見るだけです。
JirkaTřečákは、グラデーションのレンダリング方法を説明する資料へのリンクを含む素晴らしいコメントを残しました。 コードレベルで問題をより深く研究したい場合にお読みください。
自分で見てください
アプリケーションのデモ版を作成しました。これにより、これらすべての違いが実際のデバイスでどのように見えるかを簡単に確認できます。 上記のすべての例、ソースコード、およびSketchファイルが含まれているため、定数を自分で試すことができます。
これは、問題をチームに伝える良い方法です-電話を与えて、彼らに自分で見てもらいましょう。 画像から画像へ移動するには（この記事のgifイラストのように）、画面をクリックするだけです。
アプリケーションのオープンソースのデモ版をこちらからダウンロードしてください 。
結論
同じ値が同じ結果を生むことを当然と思わないでください。 数字が一致しても、視覚的な表現は異なる場合があります。
一般に、設計を実装した後、追加の反復を行う必要があります。 デザイナーと開発者の共同作業は、高品質の製品を作成する上で決定的な役割を果たします。