グラフィックデザインの流れで、ごく稀ですがユーザーインターフェイスのデザインもする事もあります。もちろんそれは設計ではなくて完全に絵だけとなりますが、ユーザーインターフェイスの専門ではないため、資料や参考となるUIを見ながら四苦八苦、試行錯誤しながら制作しています。



そんなUIデザインに大きく力を化してくれるのが、今回紹介する「UIデザインパターン集」です。UIデザインの基本となるデザインをパターン化して紹介してくれています。

詳しくは以下

ただ単にデザインパターンが列挙されているだけではなく、一つのパターンに対して、そのUIの効果や用法が書かれていて、勉強にもなります。

一つ具体的に挙げてみます。例えば「ステップ表示」

■ステップ表示



複数画面に渡る一連の作業が発生する箇所では、常に全体概要を表示するUI。ステップ画面を表示する理由としては、「作業の終わりまでの道のりを示し、離脱率を下げるため。」


■効能
* 一連の手続を行う際に、作業の終わりまでに掛かる時間の目安を知ることができる。

* デジタルな空間の中で、自分がどこにいるのかを把握できる。


■用法
* 画面やコンテンツのそばに、作業ステップの数と、具体的な作業の概要を端的に表示する。たとえば「3.配送先入力」など。

* 作業ステップの数と画面数は対応していると分かりやすいが、必ずしも一致しなくてもよい。

* ステップ表示には、現在位置のしるし を付けておく。

以上です。

デザインするにしてもその役割や意味を知らないと効果的な物はできません。こうしたいけど何が適切か、どういったデザインが最適かなどが分かりやすいです。

専門とされている方には基本すぎるかもしれませんが、UIデザインの引き出しの少ないユーザーインターフェイスを専門としていない管理人には非常にありがたいサイトでした。

UIデザインパターン集

関連記事

---

カーブを嫌うアート集団「NO CURVES」
ミニチュア風写真の撮影方法＆レタッチ再現方法のまとめ
都市を写真に閉じ込めたミニチュア写真集「city shrinker」
靴の上に作られる世界「革靴ジオラマ」
錯覚コンテスト「Best Visual Illusion of the Year」
クリエイティブかつECOな ap bankオフィシャルグッズ
世界一高いLEGOタワーとLEGOアートの世界
持ち物は人を表す！？「FACE YOUR POCKETS!」
カンヌ国際映画祭グランプリ「殯の森」公開へ