素晴らしいディテールを備えたインターフェイスデザインのまとめ -Little Big Details
Post on:2012年11月12日
いつも見ているあのウェブページやアプリのユーザーインターフェイスが備えている素晴らしいディテールに注目し、コレクションしているブログを紹介します。
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012111202.png)
ブログでは週に1, 2のペースで更新されており、最近のディテールからいくつかチェックしたものを紹介します。
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012111201-01.png)
メールのインタラクションを紙飛行機に例えているのがかわいいですね。
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012111201-02.png)
Googleのフライト検索のモバイル版では、発着地を示すラインに飛行機が使われています。飛行機のカラーはグリーンがフライト予定通り、レッドが遅れてるサインです。
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012111201-03.png)
Amazonでは注文を完了後に「ありがとうございました」と、ページのタイトルも変わります。
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012111201-04.png)
パスワードを変更するとき、古いパスワードの欄には古いデザインのカギ、新しいパスワードの欄には今風のデザインのカギがデザインされています。
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012111201-05.png)
Colllorでは選択したカラー(#2E8A4B)とファビコンのカラーがマッチします。
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012111201-06.png)
表示サイズに合わせて、Privateのタグの向きをアニメーションで変更します。
サイズが小さいと省スペースの縦に。
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012111201-07.png)
交際ステータスを既婚にすると、そのカップルの性別に基づいたアイコンが表示されます。
上は、男男のカップルです。
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012111201-08.png)
メッセージを送信する際にエラーになると、アプリケーションのアイコンが悲しい表情になります。
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012111201-09.png)
ツールページでブックマークレットをブラウザに加えようとすると、キャラクターが応援します。
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012111201-10.png)
iTunesの検索欄にアスタリスク(*)を入力すると、歌のレートで検索ができます。
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012111201-11.png)
ピンを留める時、元ページのテキストを選択しておくと、キャプションに反映されます。
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012111201-12.png)
検索する際の、テキストを入力するデザインがかっこいいです。
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012111201-13.png)
アクセスしたら、その時の曜日で歓迎のメッセージを表示します。
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012111201-14.png)
iOSの[設定]-[一般]-[アクセシビリティ]で読み上げ速度の早さを表現するために、カメとウサギのキャラクターを使用しています。
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012111201-15.png)
FirefoxのMac OS X版では、「進む」ボタンは前のページに戻った時にスライド表示されます。
sponsors