特殊なデザインのUIをプロダクトに実装する by izumi

iOSDC Japan 2021
LT(5分)

特殊なデザインのUIをプロダクトに実装する

rizumi_jp izumi rizumi_jp
4

iOSエンジニアは、時にはUIKitやSwiftUIを純粋に扱うだけでは表現が困難なUIを実装する機会があります。

例えば、バーチャルSNS clusterではデザインのための思想や原則が存在し、そこから生まれた"Cluster Round"というスーパー楕円を用いた曲線表現がUIに活用されています。
この形状はclusterというサービスには「さわりたくなる楽しさ」が存在する、というサービスブランディングをするためにとても重要なものです。

そのようにデザインされたUIをアプリケーションに実装し、ユーザーへ届けるのは我々エンジニアの大事な仕事です。

しかし、UIKit/SwiftUIでスーパー楕円のような形状を再現するには、ベジェ曲線で近似したViewでマスクするなどの工夫が必要です。
それと同時にアプリケーションのパフォーマンスを保つこともエンジニアの責務であり、大量に描画する場合でもフレームレートの低下や画面のカクつきは抑えなければなりません。

そこでこのトークでは、"Cluster Round"という独自のデザインを実装した方法とそのパフォーマンスの改善について、具体例を交えながらお話しします。
また、iOS以外のプラットフォーム(Android/Unity/Web)における実現方法についても時間が許す限りご紹介します。