素晴らしいディテールを備えたインターフェイスデザインのまとめ -Little Big Details

いつも見ているあのウェブページやアプリのユーザーインターフェイスが備えている素晴らしいディテールに注目し、コレクションしているブログを紹介します。

サイトのキャプチャ

Little Big Details

ブログでは週に1, 2のペースで更新されており、最近のディテールからいくつかチェックしたものを紹介します。

サイトのキャプチャ

iOS Mail

メールのインタラクションを紙飛行機に例えているのがかわいいですね。

サイトのキャプチャ

Google Flight Search Results

Googleのフライト検索のモバイル版では、発着地を示すラインに飛行機が使われています。飛行機のカラーはグリーンがフライト予定通り、レッドが遅れてるサインです。

サイトのキャプチャ

Amazon

Amazonでは注文を完了後に「ありがとうございました」と、ページのタイトルも変わります。

サイトのキャプチャ

Mixpanel

パスワードを変更するとき、古いパスワードの欄には古いデザインのカギ、新しいパスワードの欄には今風のデザインのカギがデザインされています。

サイトのキャプチャ

Colllor

Colllorでは選択したカラー(#2E8A4B)とファビコンのカラーがマッチします。

サイトのキャプチャ

GitHub

表示サイズに合わせて、Privateのタグの向きをアニメーションで変更します。
サイズが小さいと省スペースの縦に。

サイトのキャプチャ

Facebook

交際ステータスを既婚にすると、そのカップルの性別に基づいたアイコンが表示されます。
上は、男男のカップルです。

サイトのキャプチャ

Windows Phone 7

メッセージを送信する際にエラーになると、アプリケーションのアイコンが悲しい表情になります。

サイトのキャプチャ

bitly

ツールページでブックマークレットをブラウザに加えようとすると、キャラクターが応援します。

サイトのキャプチャ

iTunes

iTunesの検索欄にアスタリスク(*)を入力すると、歌のレートで検索ができます。

サイトのキャプチャ

Pinterest

ピンを留める時、元ページのテキストを選択しておくと、キャプションに反映されます。

サイトのキャプチャ

Designspiration

検索する際の、テキストを入力するデザインがかっこいいです。

サイトのキャプチャ

37signals

アクセスしたら、その時の曜日で歓迎のメッセージを表示します。

サイトのキャプチャ

iOS

iOSの[設定]-[一般]-[アクセシビリティ]で読み上げ速度の早さを表現するために、カメとウサギのキャラクターを使用しています。

サイトのキャプチャ

Firefox

FirefoxのMac OS X版では、「進む」ボタンは前のページに戻った時にスライド表示されます。

top of page

©2017 coliss