タグ

UIに関するqualitasのブックマーク (6)

  • 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(グラデーション・ブラー)と呼ぶこともあります。通常のブラー効果(ぼかし、ガウスブラー)とは様相が少し異なります。 例えば次のイメージはProgressive blurの例です。通常のボカシ表現とどこが違うのかわかりますか? Progressive blur(プログレッシブ・ブラー)の例 Gaussian blur vs. Progressive blurわかりやすい比較用の画像を用意しました。まずは通常のGaussian blur(ガウスブラー)です。 Gaussian blurGaussian blurは一般的なブラー効果です。ご覧のように与えた一つの半径パラメータのみで均一

    Progressive blur効果を用いたUI表現|usagimaru
  • Functional Animation In UX Design — Smashing Magazine

    When it comes to providing pleasure or delight in our websites and apps, animations contribute a lot. But always remember that they must be functional first. In this article, Amit Daliot shows us video examples that show functional animation. The following rules map well to every animation Amit encountered so far. They helped him to assess animations that he saw in interfaces, and they are a stron

    Functional Animation In UX Design — Smashing Magazine
  • 日本中の「UI/UX」の参考になるスライド資料を気合いで全部集めました!(たぶん) | BtoBサービスキューレーション Boxil(ボクシル)まとめ!

    UI/UX」はもはやWEBデザインやアプリ開発において、無くてはならない存在となっています。実際にWEBサービスやアプリに触れて確認することも大事ですが、資料でまとめて勉強するのもありですよね! そこで今回は、日中の「UI/UX」に関する資料を気合いで全部集めてみました!(たぶん) それでは、早速みていきましょう! UIデザインとUXの超基礎「UI Design & UX for ENGINEER」

    日本中の「UI/UX」の参考になるスライド資料を気合いで全部集めました!(たぶん) | BtoBサービスキューレーション Boxil(ボクシル)まとめ!
  • オラクル、モバイル用エンタープライズUIのデザインガイドラインを公開「Oracle Alta User Interface」

    オラクルは「Oracle Alta User Interface」(オラクル・オルタ・ユーザー・インターフェース)との名称で、エンタープライズ用モバイルアプリケーションのユーザーインターフェイスに関するガイドラインを公開しました。 ガイドラインは4つの原則「モバイル・ファーストのデザイン」「シンプルで整理されたレイアウト」「明確な情報階層」「ユーザー・エクスペリエンスを向上する直感的なコンポーネント」に基づいており、「Style」「Components」「Patterns」「Examples」の4つから構成されています。 Styleではデザインの原則や配色、アイコン、フォントなどについて。Componentsはボタン、チェックボックス、ゲージ、リスト、パネル、テーブルなどUIを構成する部品について。Patternsは、画面の遷移、ダイアログ、ナビゲーションバー、通知などについて。Examp

    オラクル、モバイル用エンタープライズUIのデザインガイドラインを公開「Oracle Alta User Interface」
  • 説得力がグンと上がる!UIデザインの心理学

    オライリーから出ている「ユーザーインターフェースデザインの心理学」から使えそうなものを実例を踏まえピックアップ!これでUIデザイン説明の説得力をあげよう! 情報は一度にすべて見せるのではなく、そのとき必要なものを段階的に開示させた方がよい。 デザイナーが犯しがちな失敗は一度に大量の情報をユーザーに与えてしまうことです。 情報は一度に大量に与えるのではなく、その時点で必要としている情報だけを与えるほうが様々なニーズに対応することができます。 ユーザーの中には大まかな説明でよい人もいれば、詳細を知りたがっている人もいます。 つまりどういう事? 情報は一度に見せるのではなく段階的に見せる 重要なのはクリック回数ではない。クリックのたびに必要な情報が手に入るのであればユーザーは喜んでクリックする 誰がいつ何を必要としているかを理解する。各段階で何を必要としているか的確に把握していないと、この手法は

    説得力がグンと上がる!UIデザインの心理学
  • 1