ajike switch

ajike switchの更新をメールでお伝えします!

8年以上ajikeが蓄積したデザイン思考とUXデザインの知見を発信し続けるブログ<ajike switch>の更新情報を無料でメールにてお知らせ致します。

×

「ユーザーインターフェースのためのパターン集」から学ぶ、スマホのUIパターン

勉強会からのブログシリーズです(第二弾)。

===============
第一弾はこちら
スマホでPDFをダウンロードするときの許容容量について
===============
第二弾は「スマホ デザインパターンについて (UI集)」です。

目次
・参考書籍について
・デザインパターン集(UI集)
・勉強会資料

1. 参考書籍について
今回は 「モバイルデザインパターン ユーザーインターフェースのためのパターン集」を題材としました。
http://www.oreilly.co.jp/books/9784873115689/

モバイルアプリのUIパターンを手軽に参照できるリファレンス。主要なプラットフォームで動くモバイルアプリの画面例を400点以上使いながら、ユーザーインタフェースの定番パターンをグラフィカルに解説します。本書で紹介する68個の基本パターンと5個のアンチパターンが、使いやすいモバイルアプリをデザインするうえでクリアしなければならない設計上の課題を解決してくれます。

ざっと読みましたが、構成/モックアップを作る際の引き出しとしてその都度参照するのがよいのではないかと思います。
原著のサイトにはキャプチャも乗っているので手元に書籍が無い場合でもその時に必要な機能(フォーム,テーブル等)がはっきりとしていれば参照できます。
http://mobiledesignpatterngallery.com/mobile-patterns.php

2. デザインパターン集(UI集)

UIまとめ集はいろいろありますが、パターン別に参照できるものを整理しました(8コ)。
基本的に iphone のデザインパターンについてになります。

1. MobileMozaic , a gallery the very best designed iphone applications
http://www.mobilemozaic.com/
パターンに加えて、カテゴリ(ニュース,音楽,金融等)での検索も可能

2. Inspired UI
http://inspired-ui.com/
iPhone,Android毎の検索も可能

3. pttrns
http://pttrns.com/
キャプチャが大きい

4. Mobile Patterns
http://www.mobile-patterns.com/
“最新の追加” があるので新しいパターンを参照可能(Twitter music もあがってた)

5. Patterns
http://www.patternsofdesign.co.uk/
iPadもあり

6. lovely ui
http://www.lovelyui.com/
“empty data sets”等、特徴的なパターン分けがある

7. Mobile Design Pattern Gallery :
http://www.mobiledesignpatterngallery.com/mobile-patterns.php
本記事で参照している書籍のサイト

8. Meerli
http://iphone.meer.li/

3. 勉強会資料
社内勉強会では本書で扱われているデザインパターンの中で「ツール」について詳しく話し合いました。
中でも “Buttons are a Hack(ボタンは小細工だ)” という考え方が興味深かったです。

servi