タグ

ブックマーク / note.com/usagimaruma (2)

  • Reflective UI実践:現実世界が映り込むUI表現|usagimaru

    Reflective UIと呼ばれる表現がにわかに注目されています。そのいくつかの事例紹介や、私自身が実際に実装してみてどうだったかの所感を書き留めておこうと思います。 Reflective UIとはReflective UIとは、光や映像の反射表現を活用してUIの質感を高めた表現を指します。ジャイロや加速度センサーを使って擬似的に反射を表現したり、カメラで取り込んだ映像をUIのテクスチャとして活用して、より現実感を持たせた表現などがあります。 カメラを使う場合、例えばフロントカメラでユーザーの顔や背後の映像を撮影しリアルタイムに加工して、テクスチャとしてUIの見た目に反映します。これがスマートフォンで実装されるとまるでGUIが鏡のように映り込む質感を持った物体かのように錯覚するので、「クールな新しい表現」として注目されています。 Reflective UIに明確な分類や定義があるかは定か

    Reflective UI実践:現実世界が映り込むUI表現|usagimaru
  • Progressive blur効果を用いたUI表現|usagimaru

    Progressive blur(プログレッシブ・ブラー)というのは、少し前からにわかに流行り出しているUIのスタイリングに関する表現の一つです。Variable blur(可変ブラー)、Gradient blur(グラデーション・ブラー)と呼ぶこともあります。その見た目は通常のブラー効果(ぼかし、ガウスブラー)とは少し異なります。このアーティクルでは、UIにおけるProgressive blur(またはVariable blur)の概要とAppleプラットフォームでの技術検証を紹介しつつ、後半では簡単な経緯やデザインとしての考慮事項を解説します。 例えば次のイメージはProgressive blurの例です。通常のボカシ表現とどこが違うのかわかりますか? Progressive blur(プログレッシブ・ブラー)の例 Gaussian blur vs. Progressive blurわ

    Progressive blur効果を用いたUI表現|usagimaru
  • 1