Dev Fest X (Sapporo) Android UI Patterns

Preview:

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

Pinterest

TwitBird

Safari

Google App

and more....

542012年2月12日日曜日

Fluid Interface

流れるようなインタフェース

552012年2月12日日曜日

Fluid Interface

Facebook

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日日曜日

instagram

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日日曜日

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日日曜日

pttrnshttp://pttrns.com/

882012年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日日曜日

lovely uihttp://www.lovelyui.com/

932012年2月12日日曜日

TapFancyhttp://tapfancy.com/

942012年2月12日日曜日

TappGalahttp://www.tappgala.com/

952012年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日日曜日