Embed Size (px)
DESCRIPTION
Citation preview
Androidアプリ向け
ユーザインタフェースの
パターン紹介
流行のアプリのUIを探る
安藤幸央 @yukio_andoh
足立昌彦 a.k.a @adamrocker
all images : Flickr (CC)
12012年2月12日日曜日
Google Moderatorhttp://goo.gl/i0Aac
#devfestxj
22012年2月12日日曜日
32012年2月12日日曜日
Say Goodbye to the Menu Button
Google、AndroidのMenuボタンに“告別”
42012年2月12日日曜日
52012年2月12日日曜日
62012年2月12日日曜日
72012年2月12日日曜日
82012年2月12日日曜日
https://sites.google.com/site/devfestxsapporo/document
92012年2月12日日曜日
Pattern
102012年2月12日日曜日
112012年2月12日日曜日
パターン = 型
122012年2月12日日曜日
パターン = 定石（じょうせき）
132012年2月12日日曜日
パターンはデザイナーの仕事？
142012年2月12日日曜日
パターン、UX、UIは定石のある学べるテクニック
152012年2月12日日曜日
人々が心地よいと感じる環境を分析
253パターン
町・コミュニティ建物
構造・施行インテリア
162012年2月12日日曜日
172012年2月12日日曜日
182012年2月12日日曜日
192012年2月12日日曜日
ソフトウェア開発におけるデザインパターン
コンピュータプログラミングでのデザインパターン（型紙、よくある型）
過去のソフトウェア設計者が発見し編み出した設計ノウハウを蓄積し、名前をつけ、再利用しやすいように特定の規約に従ってカタログ化したものである。(Wikipedia)
GoF（ゴフ：Gang of Four：4人の奴ら）
202012年2月12日日曜日
GoFデザインパターンオブジェクトの生成に関するパターン
抽象的な工場／構築者／構造メソッド／原型／一人っ子
プログラムの構造に関するパターン
接続装置／橋／合成物／装飾者／見かけ／軽量級／代理人
オブジェクトの振る舞いに関するパターン
責任の連鎖／命令／通訳／繰り返し／調停者／形見／観察者／状態／戦略／ひな形メソッド／訪問者
212012年2月12日日曜日
UI Patterns
222012年2月12日日曜日
それが革新的で無い限り標準にしたがうべきであるヤコブ・ニールセン
232012年2月12日日曜日
ルールは破ってもよいが無視してはならないティモシー・マサラ
242012年2月12日日曜日
ゲシュタルトの法則近接（Proximity）
類同（Similarity）
連続（Continuity）
閉合（Closure）
共通運命（Common Fate）
面積（Area）
対称性（Symmetry）参照：ゲシュタルトの法則（イディア）
252012年2月12日日曜日
ヒックの法則ユーザーの意思決定にかかる時間は、選択行為におけるエントロピー量に比例する。単純に、メニューなどでは選択肢が増えるほど意思決定に時間がかかる。（ソシオメディア 用語集より）
262012年2月12日日曜日
272012年2月12日日曜日
フィッツの法則入力装置を使ってものを指し示すときにかかる時間を計測するモデル。面積が大きく、現在の位置から近いものほど、指し示しやすい。（ソシオメディア 用語集より）
282012年2月12日日曜日
Design Patterns（公式）http://developer.android.com/design/
292012年2月12日日曜日
302012年2月12日日曜日
iPhone / iPad の真似？
312012年2月12日日曜日
Web の真似？
322012年2月12日日曜日
Design Principles原理／原則／法則
332012年2月12日日曜日
驚くような方法で
342012年2月12日日曜日
リアルなオブジェクトで
352012年2月12日日曜日
自分のものに感じられる
362012年2月12日日曜日
教えてあげる
372012年2月12日日曜日
シンプルな文言で
382012年2月12日日曜日
文字より画像（印象）
392012年2月12日日曜日
決定はユーザーに
402012年2月12日日曜日
メニューは必要項目だけ
412012年2月12日日曜日
現在位置がわかるように
422012年2月12日日曜日
データは消して無くさない
432012年2月12日日曜日
同じように見えるものは同じ動きをする
442012年2月12日日曜日
余計な通知はしない中断させない
452012年2月12日日曜日
使い方を覚えるきっかけを
462012年2月12日日曜日
失敗した時は、なぜかではなく回避方法を
472012年2月12日日曜日
複雑な作業を小さなステップにステップごとに達成感を
482012年2月12日日曜日
エキスパートになったかのような気分に
492012年2月12日日曜日
重要なものは素早く使えるすべての操作が平等では無い
502012年2月12日日曜日
Trends流行
512012年2月12日日曜日
ImmersiveExperience
没入感
522012年2月12日日曜日
Let content be the hero.コンテンツが王様
Gabe Campodonico (Evernote)
532012年2月12日日曜日
ImmersiveExperience
TwitBird
Safari
Google App
and more....
542012年2月12日日曜日
Fluid Interface
流れるようなインタフェース
552012年2月12日日曜日
Fluid Interface
Google+
Twitter 公式アプリ
and more....
→
562012年2月12日日曜日
Fluid Interfacepath
Before <-> Now <-> After
572012年2月12日日曜日
Circle
582012年2月12日日曜日
Circle
592012年2月12日日曜日
kooaba
602012年2月12日日曜日
texture&
solid
612012年2月12日日曜日
texture & solid
622012年2月12日日曜日
632012年2月12日日曜日
Clear
642012年2月12日日曜日
iOS の移植同時開発
652012年2月12日日曜日
use top tabs
662012年2月12日日曜日
use top tabs
672012年2月12日日曜日
No back button in UI
682012年2月12日日曜日
Use Android Platform icons
692012年2月12日日曜日
Using Action Bar
702012年2月12日日曜日
アンチ・パターン
712012年2月12日日曜日
tool tip & tutorial screen
722012年2月12日日曜日
Tools
732012年2月12日日曜日
Android Design Previewhttp://code.google.com/p/android-ui-utils/
iOSならiScreen
742012年2月12日日曜日
UI Stencilhttp://www.uistencils.com/products/android-stencil-kit
752012年2月12日日曜日
Books
762012年2月12日日曜日
Mobile DesignPattern Galleryhttp://mobiledesignpatterngallery.com/
772012年2月12日日曜日
トレードオフ上質をとるか、手軽をとるか
ケビン・メイニー
ISBN 978-4833419369
782012年2月12日日曜日
ICONHANDBOOK
http://www.fivesimplesteps.com/products/the-icon-handbook
ISBN: 978-1-907828-04-1
792012年2月12日日曜日
iPhoneアプリ設計の極意
思わずタップしたくなるアプリのデザイン
http://www.oreilly.co.jp/books/9784873115023/
802012年2月12日日曜日
Resources
812012年2月12日日曜日
公式資料を参照Android 標準のガイドライン
http://developer.android.com/design/index.html
iOS ヒューマンインターフェイスガイドライン
https://developer.apple.com/jp/devcenter/ios/library/documentation/MobileHIG.pdf
Windows Phone ユーザエクスペリエンスガイドライン
http://msdn.microsoft.com/ja-jp/library/hh202915(v=vs.92).aspx
822012年2月12日日曜日
Sites
832012年2月12日日曜日
Android Designhttp://developer.android.com/design/
842012年2月12日日曜日
Matias Duarte interviewhttp://www.theverge.com/2012/1/12/2703021/android-matias-duarte-live-special-announcement
852012年2月12日日曜日
Android Interaction Design Pattenshttp://www.androidpatterns.com/
x
862012年2月12日日曜日
Mobile UI Patternshttp://mobile-patterns.com/
872012年2月12日日曜日
Patterns of Designhttp://www.patternsofdesign.co.uk/
892012年2月12日日曜日
Inspired UIhttp://inspired-ui.com/
902012年2月12日日曜日
Mobile Design Pattern Galleryhttp://www.mobiledesignpatterngallery.com/mobile-patterns.php
912012年2月12日日曜日
iOSpirationshttp://www.iospirations.com/
922012年2月12日日曜日
drribbblehttp://dribbble.com/tags/mobile
962012年2月12日日曜日
creatticahttp://creattica.com/mobile/latest/
972012年2月12日日曜日
Beautiful Pixelshttp://beautifulpixels.com/category/iphone/
982012年2月12日日曜日
Thank you !!@ yukio_andoh
all images : Flickr(CC)
992012年2月12日日曜日
NEXT → @adamrocker
1002012年2月12日日曜日
