2010年8月9日月曜日

Android UI Design Tips

Android UI Design Tips
という資料があったので、日本語でまとめてみました。

Android UI Design Tips




■ UIを意識すべきなのはどうして？
　　良いUI　
　　　→ ユーザーが洗練された質に気が付く
　　　　　→ 評価が良くなる
　　　　　　→ アプリのランキングが良くなる
　　　　　　　　→ さらにたくさんのインストール＆購入につながる

■ Agenda

　　1. やるべきことと、やっちゃいけないこと

　　2. デザイン哲学と考慮すること

　　3. 絶対に使うべき UI framework の機能・特徴

　　4. 新しい UI デザインパターン

　　5. アイコンとガイドライン



■ やるべきことと、やっちゃいけないこと

　＊ やっちゃいけないこと

　　・単に他のプラットフォームのUIを移植しない！
　　　　・ユーザーがプラットフォームとアプリが合っていると感じるべき
　　　　・アプリのブランドとプラットフォームとのバランス

　　・modal progress と確認用ダイアログを使い過ぎない！

　　・柔軟性を持つ！（absolute-positioned layout はダメ）

　　・px単位を使わない！（dp(dip)やspを使う）

　　・小さい文字はダメ！


　＊ やるべきこと

　　・すべてのリソースに対して、high density screen 用バージョンを用意する

　　・ボタンやリストアイテムなど、明らかにタップするものは大きくする

　　・Android のアイコンガイドラインにしたがう

　　・適切なマージン／パディングを使う

　　・D-pad とトラックボールをサポートする

　　・activity stack を適切に運用する

　　・orientation changes（画面回転）を適切に処理する

　　・theme/style, dimension, color resources を使用して
　　　冗長性を減らす

　　・visual and interaction designer(s) と一緒に仕事する!!!



■ デザイン哲学と考慮すること

　＊ Android デザイン哲学

　・ Clear vs. "simple"
　　　明確 vs シンプル

　・ Conetnt vs chrome
　　　内容 vs 外観のカスタマイズ

　・ Consistent yet engaging
　　　一貫性があり魅力的
　　　　- エレガントなバリエーション

　・ Enhanced by the cloud
　　　クラウドで機能強化
　　　　- ユーザー環境をデスクトップとモバイルで維持する


　＊ good interface design の原理

　　1. ユーザーにフォーカスする

　　2. 正しいものを可視化する

　　3. 適切なフィードバックを示す

　　4. 予測可能にする

　　5. fault-tolerant にする


　＊ ユーザーにフォーカスする

　　・自分のアプリのユーザーを知る
　　　　- 年齢・スキルレベル・文化・身体障害、などなど
　　　　- あなたのアプリで彼らが何をしたいのか？
　　　　- 彼らはどんな種類のデバイスを使うのか？
　　　　- どこで／いつ／どのように 彼らがそのデバイスをつかうのか？
　
　　・'user-first' mentality （ユーザーを第１に考えて）でデザインする

　　・実際のユーザーに早く／しばしばテストしてもらう


　＊ 正しいもの可視化する

　　・もっとも一般的な（頻繁に使われる）操作が、すぐ見えてすぐ操作できるべき
　　　　＝ 左上が一番目がいきやすい

　　・付属的な機能は MENU ボタンに割り当てることができる


　＊ 適切なフィードバックを示す

　　・ すべてのインタラクティブなUI要素は、少なくとも4個の状態
　　　（default, desabled focused, pressed など）を
　　　を使って持つようにする

　　・ 1つのアクションの効果は、明確に見える（＝わかる）ようにする

　　・ 控えめだけど十分なプログレスインジケータを表示する


　＊ 予測可能にする

　　・ ユーザーが期待することをする
　　　　- activity stack の適切な運用
　　　　- ユーザーが見ることを期待する情報とアクションを示す
　　　　（テストと観測が必要）

　　・ 適切なアフォーダンスを使う
　　　　- もしそれがクリック可能なら、クリック可能だとわかるようにする！！

　　＊＊　もし複雑な操作が必要ならば、デザインを考えなおすべき！　＊＊


　＊ fault-tolerant にする

　　・意味があるものだけ、操作可能にする
　　　　- UI要素を適切に Enable/Disable する

　　・不可逆的なアクションの数を制限する

　　・確認ダイアログは '使わない'('undo') ようにする
　　　　- 実際は、できるだけ少ない modal dialog を使う
　　　　　だって目障りだもん

　　"If an error is possible, someone will make it. "
　　　- Donald Norman, author, The Design of Everyday Things



　＊ デザインで考慮すること

　　・物理的なスクリーンサイズ
　　・解像度
　　・縦画面 ＆ 横画面
　　・主要なUIインタラクションメソッド
　　　　- タッチスクリーン
　　　　- Dパッド／トラックボール
　　・ソフト／ハードキーボード

　　・デバイスによって、方法が異なる可能性があるということに対する
　　　意識はすごく重要

　　・デバイスのUIバリエーションについてCDDを読んで学ぶ
　　　　- http://source.android/com/compatibility

　　・スクリーンサイズと解像度に対応する
　　　　- http://developer.android.com/resources/dashboard/screens.html



■ 絶対に使うべき UI framework の機能・特徴

　・<RelativeLayout>

　・１つの .apk にすべてのリソースを含む
　　　- drawable
　　　- drawable-hdpi
　　　- drawable-mdpi
　　　- layout
　　　- layout-port
　　　- layout-land
　　　- layout-large-land
　　　- layout-large-port

　　・システムが runtime時にどのリソースを使うか選択する

　・9-patch drawables (foo.9.png)
　　・CSS3 border-image に似てる
　　・border pixels が拡張可能な領域を示す
　　・ -mdpi と -hdpi バージョンを用意する！！

　・Selector (state list) drawables
　　・状態(state) （desabled, pressed, focused, default...）
　　　によってボタンの色や画像をかえる

　・Layer drawables (XML + PNGs)
　　　foo_border.9.png + foo_mask.9.png
　　　　　　　+ Drawable.setColorFilter(0xA4C639, ...);
　　　　　→ Rendered output (resizable w/9-patch)


■ 新しい UI デザインパターン

もともとは、Google I/O 2010 の Android UI design patterns で話された内容
http://code.google.com/events/io/2010/sessions/android-ui-design-patterns.html

　・Dashboard

　・Action Bar

　・Quick Actions

　Google I/O 2010 では、これに加えて

　・Search Bar

　・Companion Widget

　が紹介されている

　詳しくはこちら http://dl.google.com/googleio/2010/android-android-ui-design-patterns.pdf


　＊ Dashboard



　　"このアプリで何ができるのか？"
　　"新しくなったことはなにか？"

　　を表示

　　- Recommendations
　　　・ 3 - 6 個の重要なアプリセクションにフォーカス
　　　・ what's new にハイライトする
　　　・ Be flavorful （魅力的に！）ー ここが第一印象


　＊ Action Bar



　　"よく使うアクションをすばやく行う"
　　　・検索、リロードなど

　　- Recommendations
　　　・アプリのキーやアプリ全体のアクションを画面上にみせる
　　　・場所の感覚を伝えるのに役立つ
　　　・アプリ内で一貫して使う
　　　・'home'メカニズムを提供する - logo や 専用ボタン
　　　・状況に依存したアクションは使わない！！


　＊ Quick Actions



　　"このオブジェクトで何ができるのか？"


■ アイコンとガイドライン

　http://developer.android.com/quide/practices/ui_guidelines/icon_design.html

　新しいアイコンスタイル
　　・Tactile（触感）

　　・Rendered

　　・Forward Facing（正面向き）

　　・Top-lit（トップから照明）

　　・Synecdoche（提喩法、代喩：一部で全体を、
　　　または全体で一部を比喩で表現する方法）

　　・Diverse shapes, materials（さまざまな形状、質感）
投稿者 時刻:
ラベル: ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)

'},ClipboardSwf:null,Version:'1.5.1'}};dp.SyntaxHighlighter=dp.sh;dp.sh.Toolbar.Commands={ExpandSource:{label:'+ expand source',check:function(highlighter){return highlighter.collapse;},func:function(sender,highlighter) {sender.parentNode.removeChild(sender);highlighter.div.className=highlighter.div.className.replace('collapsed','');}},ViewSource:{label:'view plain',func:function(sender,highlighter) {var code=dp.sh.Utils.FixForBlogger(highlighter.originalCode).replace(/'+code+'');wnd.document.close();}},CopyToClipboard:{label:'copy to clipboard',check:function(){return window.clipboardData!=null||dp.sh.ClipboardSwf!=null;},func:function(sender,highlighter) {var code=dp.sh.Utils.FixForBlogger(highlighter.originalCode).replace(/</g,'<').replace(/>/g,'>').replace(/&/g,'&');if(window.clipboardData) {window.clipboardData.setData('text',code);} else if(dp.sh.ClipboardSwf!=null) {var flashcopier=highlighter.flashCopier;if(flashcopier==null) {flashcopier=document.createElement('div');highlighter.flashCopier=flashcopier;highlighter.div.appendChild(flashcopier);} flashcopier.innerHTML='';} alert('The code is in your clipboard now');}},PrintSource:{label:'print',func:function(sender,highlighter) {var iframe=document.createElement('IFRAME');var doc=null;iframe.style.cssText='position:absolute;width:0px;height:0px;left:-500px;top:-500px;';document.body.appendChild(iframe);doc=iframe.contentWindow.document;dp.sh.Utils.CopyStyles(doc,window.document);doc.write('

'+highlighter.div.innerHTML+'

');doc.close();iframe.contentWindow.focus();iframe.contentWindow.print();alert('Printing...');document.body.removeChild(iframe);}},About:{label:'?',func:function(highlighter) {var wnd=window.open('','_blank','dialog,width=300,height=150,scrollbars=0');var doc=wnd.document;dp.sh.Utils.CopyStyles(doc,window.document);doc.write(dp.sh.Strings.AboutDialog.replace('{V}',dp.sh.Version));doc.close();wnd.focus();}}};dp.sh.Toolbar.Create=function(highlighter) {var div=document.createElement('DIV');div.className='tools';for(var name in dp.sh.Toolbar.Commands) {var cmd=dp.sh.Toolbar.Commands[name];if(cmd.check!=null&&!cmd.check(highlighter)) continue;div.innerHTML+=''+cmd.label+'';} return div;} dp.sh.Toolbar.Command=function(name,sender) {var n=sender;while(n!=null&&n.className.indexOf('dp-highlighter')==-1) n=n.parentNode;if(n!=null) dp.sh.Toolbar.Commands[name].func(sender,n.highlighter);} dp.sh.Utils.CopyStyles=function(destDoc,sourceDoc) {var links=sourceDoc.getElementsByTagName('link');for(var i=0;i');} dp.sh.Utils.FixForBlogger=function(str) {return(dp.sh.isBloggerMode==true)?str.replace(/
|<br\s*\/?>/gi,''):str;} dp.sh.RegexLib={MultiLineCComments:new RegExp('/\\*[\\s\\S]*?\\*/','gm'),SingleLineCComments:new RegExp('//.*$','gm'),SingleLinePerlComments:new RegExp('#.*$','gm'),DoubleQuotedString:new RegExp('"(?:\\.|(\\\\\\")|[^\\""\\n])*"','g'),SingleQuotedString:new RegExp("'(?:\\.|(\\\\\\')|[^\\''\\n])*'",'g')};dp.sh.Match=function(value,index,css) {this.value=value;this.index=index;this.length=value.length;this.css=css;} dp.sh.Highlighter=function() {this.noGutter=false;this.addControls=true;this.collapse=false;this.tabsToSpaces=true;this.wrapColumn=80;this.showColumns=true;} dp.sh.Highlighter.SortCallback=function(m1,m2) {if(m1.indexm2.index) return 1;else {if(m1.lengthm2.length) return 1;} return 0;} dp.sh.Highlighter.prototype.CreateElement=function(name) {var result=document.createElement(name);result.highlighter=this;return result;} dp.sh.Highlighter.prototype.GetMatches=function(regex,css) {var index=0;var match=null;while((match=regex.exec(this.code))!=null) this.matches[this.matches.length]=new dp.sh.Match(match[0],match.index,css);} dp.sh.Highlighter.prototype.AddBit=function(str,css) {if(str==null||str.length==0) return;var span=this.CreateElement('SPAN');str=str.replace(/ /g,' ');str=str.replace(/');if(css!=null) {if((/br/gi).test(str)) {var lines=str.split(' 
');for(var i=0;ic.index)&&(match.index/gi,'\n');var lines=html.split('\n');if(this.addControls==true) this.bar.appendChild(dp.sh.Toolbar.Create(this));if(this.showColumns) {var div=this.CreateElement('div');var columns=this.CreateElement('div');var showEvery=10;var i=1;while(i<=150) {if(i%showEvery==0) {div.innerHTML+=i;i+=(i+'').length;} else {div.innerHTML+='·';i++;}} columns.className='columns';columns.appendChild(div);this.bar.appendChild(columns);} for(var i=0,lineIndex=this.firstLine;i0;i++) {if(Trim(lines[i]).length==0) continue;var matches=regex.exec(lines[i]);if(matches!=null&&matches.length>0) min=Math.min(matches[0].length,min);} if(min>0) for(var i=0;i

Blogger Syntax Highliter

Version: {V}

http://www.dreamprojections.com/syntaxhighlighter

©2004-2007 Alex Gorbatchev.

'},ClipboardSwf:null,Version:'1.5.1'}};dp.SyntaxHighlighter=dp.sh;dp.sh.Toolbar.Commands={ExpandSource:{label:'+ expand source',check:function(highlighter){return highlighter.collapse;},func:function(sender,highlighter) {sender.parentNode.removeChild(sender);highlighter.div.className=highlighter.div.className.replace('collapsed','');}},ViewSource:{label:'view plain',func:function(sender,highlighter) {var code=dp.sh.Utils.FixForBlogger(highlighter.originalCode).replace(/'+code+'');wnd.document.close();}},CopyToClipboard:{label:'copy to clipboard',check:function(){return window.clipboardData!=null||dp.sh.ClipboardSwf!=null;},func:function(sender,highlighter) {var code=dp.sh.Utils.FixForBlogger(highlighter.originalCode).replace(/</g,'<').replace(/>/g,'>').replace(/&/g,'&');if(window.clipboardData) {window.clipboardData.setData('text',code);} else if(dp.sh.ClipboardSwf!=null) {var flashcopier=highlighter.flashCopier;if(flashcopier==null) {flashcopier=document.createElement('div');highlighter.flashCopier=flashcopier;highlighter.div.appendChild(flashcopier);} flashcopier.innerHTML='';} alert('The code is in your clipboard now');}},PrintSource:{label:'print',func:function(sender,highlighter) {var iframe=document.createElement('IFRAME');var doc=null;iframe.style.cssText='position:absolute;width:0px;height:0px;left:-500px;top:-500px;';document.body.appendChild(iframe);doc=iframe.contentWindow.document;dp.sh.Utils.CopyStyles(doc,window.document);doc.write('

'+highlighter.div.innerHTML+'

');doc.close();iframe.contentWindow.focus();iframe.contentWindow.print();alert('Printing...');document.body.removeChild(iframe);}},About:{label:'?',func:function(highlighter) {var wnd=window.open('','_blank','dialog,width=300,height=150,scrollbars=0');var doc=wnd.document;dp.sh.Utils.CopyStyles(doc,window.document);doc.write(dp.sh.Strings.AboutDialog.replace('{V}',dp.sh.Version));doc.close();wnd.focus();}}};dp.sh.Toolbar.Create=function(highlighter) {var div=document.createElement('DIV');div.className='tools';for(var name in dp.sh.Toolbar.Commands) {var cmd=dp.sh.Toolbar.Commands[name];if(cmd.check!=null&&!cmd.check(highlighter)) continue;div.innerHTML+=''+cmd.label+'';} return div;} dp.sh.Toolbar.Command=function(name,sender) {var n=sender;while(n!=null&&n.className.indexOf('dp-highlighter')==-1) n=n.parentNode;if(n!=null) dp.sh.Toolbar.Commands[name].func(sender,n.highlighter);} dp.sh.Utils.CopyStyles=function(destDoc,sourceDoc) {var links=sourceDoc.getElementsByTagName('link');for(var i=0;i');} dp.sh.Utils.FixForBlogger=function(str) {return(dp.sh.isBloggerMode==true)?str.replace(/
|<br\s*\/?>/gi,'\n'):str;} dp.sh.RegexLib={MultiLineCComments:new RegExp('/\\*[\\s\\S]*?\\*/','gm'),SingleLineCComments:new RegExp('//.*$','gm'),SingleLinePerlComments:new RegExp('#.*$','gm'),DoubleQuotedString:new RegExp('"(?:\\.|(\\\\\\")|[^\\""\\n])*"','g'),SingleQuotedString:new RegExp("'(?:\\.|(\\\\\\')|[^\\''\\n])*'",'g')};dp.sh.Match=function(value,index,css) {this.value=value;this.index=index;this.length=value.length;this.css=css;} dp.sh.Highlighter=function() {this.noGutter=false;this.addControls=true;this.collapse=false;this.tabsToSpaces=true;this.wrapColumn=80;this.showColumns=true;} dp.sh.Highlighter.SortCallback=function(m1,m2) {if(m1.indexm2.index) return 1;else {if(m1.lengthm2.length) return 1;} return 0;} dp.sh.Highlighter.prototype.CreateElement=function(name) {var result=document.createElement(name);result.highlighter=this;return result;} dp.sh.Highlighter.prototype.GetMatches=function(regex,css) {var index=0;var match=null;while((match=regex.exec(this.code))!=null) this.matches[this.matches.length]=new dp.sh.Match(match[0],match.index,css);} dp.sh.Highlighter.prototype.AddBit=function(str,css) {if(str==null||str.length==0) return;var span=this.CreateElement('SPAN');str=str.replace(/ /g,' ');str=str.replace(/');if(css!=null) {if((/br/gi).test(str)) {var lines=str.split(' 
');for(var i=0;ic.index)&&(match.index/gi,'\n');var lines=html.split('\n');if(this.addControls==true) this.bar.appendChild(dp.sh.Toolbar.Create(this));if(this.showColumns) {var div=this.CreateElement('div');var columns=this.CreateElement('div');var showEvery=10;var i=1;while(i<=150) {if(i%showEvery==0) {div.innerHTML+=i;i+=(i+'').length;} else {div.innerHTML+='·';i++;}} columns.className='columns';columns.appendChild(div);this.bar.appendChild(columns);} for(var i=0,lineIndex=this.firstLine;i0;i++) {if(Trim(lines[i]).length==0) continue;var matches=regex.exec(lines[i]);if(matches!=null&&matches.length>0) min=Math.min(matches[0].length,min);} if(min>0) for(var i=0;i

ページビューの合計