[&] CSS Nite LP33 #2

CSS Nite LP33
----------------
UIデザインのパターン化と効果的な実践方法 池田 拓司（クックパッド）

クックパッドだけじゃなくて、いろいろなアプリのスクリーンショットを見ながら
みなで考えながら見ていきます。
http://tikeda.net

サービス全体のデザイン、ユーザー体験の責任
フロントエンド基盤
サービス

●UIデザインのパターン化とは
●スマートフォンの基本UIパターン
●メッセージUIの比較と特徴
●アイコンのパターン
●パターンを使ったプロトタイプ
●終わりに

UIデザインのパターン化とは？
画面をコンポーネント単位に分割
設計していくなかで使うものを選んでいく。
機能やユーザー体験に合わせて各コンポーネントをチョイス

こんなことに使える
いろんなものを見て、知ることができるので、
引き出しを増やす
パターンを使って考えることで、早くプロトタイピングすることができる。

「なんか横からシュッと出てくるやつ！」
「タップしたら、ポワンて開いてしばらくしたら閉じる感じ」
「トグルになってて切り替わる感じ」

メンバー間の共通言語を作る

パターンを使うことで、いつも同じような、
だいたいこういう時にはこういう動き、
自然な操作を提供することができる。

●デザインの引き出しを増やす
●素早くプロトタイプができる

●スマートフォンの基本UIパターン
いろいろなタイプの画面があります。
いくつかの種類に分けられます。

導入画面／トップ画面／一覧画面／詳細画面／入力．管理画面

画面のパターンによってよく使うUIがある。
プラットフォームに最適なもの

iOS Human Interface GUideline
Android Design

プラットフォームにガイドラインがある
プラットフォームに最適な UI

iOS
画面中央に画像タイトル
左側に前の画面のタイトル名を入れたバックボタン

トップバーと、タブバー
スピナー、セグメンテッドコントロール

ユーザーの動線
　検索
　具体検索
　お気に入り
　メールのリンク

バルーン・ツールチップ
ダイアログ・アラート
トースト

どれも正解も間違いは無いのですが、
どういう文脈か、どいう特徴かで使い分けができる。

●ダイアログ
確実に伝えられる一方、画面が増えるため乱用するとストレス
危ないアクションを事前に確認するのに有効
iOSもAndroidも標準のものがある

●トースト
確実に伝えられない一方、ユーザーの行動を妨げない
想定どうりのアクション完了後に表示するのに有効
Androidアプリでは標準のものがある。

●バルーンツールチップ
ユーザーがアクションを行った場所を的確に示していれて気がつきやすい
標準のものは無い

●アイコンのパターン
さまざまなアイコン
どれが何のアイコンかわかりますか？

http://www.slideshare.net/mobile/schoowebcampus/20131225schoo

●似通ったアイコン
更新・リリード、右か移転、同期／更新、リプレイ・リトライ

パターンだけを使っていても、新しい試みができない。
新しいアイコン、
「送信する」アイコンが紙飛行機に
紙飛行機は、中国発祥で、世界中で使われる

Androidオフィシャルのデザインデータ
クックパッドの事例、
一つの共有ファイルにして管理しています。
サービス全体でアイコン、iOS, Android ではと異ならないように、
一つのリソースを複数人で共有することで誤解をうまないように。

アイコンの期限を知る
readymag.com/shuffle/ui-symbols/

パターンを使った実践
CSS Frameworks
cssnite.jp/archives/post_2503.html

デザインデータ作成の効率化
Phootshop でデザインデータを読み込めるようになった。
既存のコンポーネント集の活用

Flinto のパターンを使って検討
http://www.flinto.com/
トラジションのパターン