Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

2013sguヒューマンインターフェース論009

第九回講義時使用スライドです。

  • Login to see the comments

  • Be the first to like this

2013sguヒューマンインターフェース論009

  1. 1. ヒューマンインターフェース論Vol.9そが としおき曽我 聡起北海道文教大学 外国語学部・国際言語学科13年6月16日日曜日
  2. 2. “ヒューマンインターフェースの原則”(iOSヒューマンインターフェイスガイドライン,Apple)アクティビティインジケータ、日付と時刻のピッカー、…、角丸矩形ボタン(pp.162)、…バー、コンテンツビュー、Alert、…、 コントロール(pp.155)、…iOS UI要素の使用方法のガイドライン(pp.117)13年6月16日日曜日
  3. 3. “ヒューマンインターフェースの原則”(iOSヒューマンインターフェイスガイドライン,Apple)iOS UI要素バーコンテンツビューAlertコントロール…アクティビティインジケータ日付と時刻のピッカー角丸矩形ボタンヒューマンインターフェースフェイスの原則13年6月16日日曜日
  4. 4. “ヒューマンインターフェースの原則”(iOSヒューマンインターフェイスガイドライン,Apple)ヒューマンインターフェースフェイスの原則ユーザがどのように考え、どのように作業するかに基づき、ユーザインターフェイスは魅力的で、シンプルで、論理的でなければならない。アプリケーションの機能性が上がり、ユーザの愛着心も高まります。13年6月16日日曜日
  5. 5. 実際の例:テキスト例のように、同一コンテンツをスマートフォン用にCSSとJavaScriptで変更しているWebAppは増えている。例:Amazon例:Touch Lab独自インターフェースにも注目。13年6月16日日曜日
  6. 6. 実際の例:13年6月16日日曜日
  7. 7. 実際の例:13年6月16日日曜日
  8. 8. 2.4 jQueryによる簡単なふるまいの追加ページへの動的な振る舞いの追加Header:ナビゲーション部分(自己紹介∼ソフトウェア開発)に動的な振る舞いを追加CSS+JavaScrript(jQueryを利用(p.11参照))13年6月16日日曜日
  9. 9. 2.4 jQueryによる簡単なふるまいの追加iPhoneでアクセスした際(ウィンドウ幅で判断)「メニュー」ボタンを追加する。13年6月16日日曜日
  10. 10. 2.4 jQueryによる簡単なふるまいの追加「メニュー」ボタンの構造:P.24-25画像とテキスト(「メニュー」)を併用して表現。CSS(id “header div.leftButton”および “headerdiv.pressed”)で適用。デザインは "HIガイドライン"(アップル)を参照。バー > NavigationBar13年6月16日日曜日
  11. 11. 2.4 jQueryによる簡単なふるまいの追加javaSceipt:p.25-26宣言部分(<script type=…>)を追加。ここでは、二つのJS(iphone.jsとjquery.js)を使用する。テキストエディタを使い、iphone.jsの関数部分を作成して「iphone.js」ファイルとしてhtmlと同一階層に配置する(拡張子.js)。13年6月16日日曜日
  12. 12. 2.4 jQueryによる簡単なふるまいの追加javaSceipt:p.26addClass(class):指定した要素に、CSSクラスを追加する。$(#header ul).addClass(hide);13年6月16日日曜日
  13. 13. 2.4 jQueryによる簡単なふるまいの追加javaSceipt:p.26addClass(class):指定した要素に、CSSクラスを追加する。$(#header ul).addClass(hide);例:<div id="header"><h1><a href="./">Jonathan Stark</a></h1><div id="utility"><ul><li><a href="about.html">自己紹介</a></li>13年6月16日日曜日
  14. 14. 2.4 jQueryによる簡単なふるまいの追加javaSceipt:p.26addClass(class):指定した要素に、CSSクラスを追加する。$(#header ul).addClass(hide);例:<div id="header"><h1><a href="./">Jonathan Stark</a></h1><div id="utility"><ul><li><a href="about.html">自己紹介</a></li>例:<div id="header"><h1><a href="./">Jonathan Stark</a></h1><div id="utility"><ul class= “hide” ><li><a href="about.html">自己紹介</a></li>#header ul.hide {display: none;}→ここの箇条書項目(ul)は全て消える。13年6月16日日曜日
  15. 15. 2.4 jQueryによる簡単なふるまいの追加javaSceipt:p.26append(content):各要素に引数で指定したコンテンツを追加する。13年6月16日日曜日
  16. 16. 2.4 jQueryによる簡単なふるまいの追加例:<div id="header"><h1><a href="./">Jonathan Stark</a></h1>13年6月16日日曜日
  17. 17. 2.4 jQueryによる簡単なふるまいの追加例:<div id="header"><h1><a href="./">Jonathan Stark</a></h1>例:<div id="header"><div class="leftButton" onclick="toggleMenu()">メニュー</div><h1><a href="./">Jonathan Stark</a></h1>「メニュー」というコンテンツに、CSSクラス“leftButton”を適用し、クリックした際には“toggleMenu”という関数を呼び出す。13年6月16日日曜日
  18. 18. 2.4 jQueryによる簡単なふるまいの追加javaSceipt:p.26togleClass(class):指定したCSSクラスが要素に無ければ追加し、あれば削除する。$(#header ul).toggleClass(hide);$(#header .leftButton).toggleClass(pressed);13年6月16日日曜日
  19. 19. 2.4 jQueryによる簡単なふるまいの追加javaSceipt:p.26togleClass(class):指定したCSSクラスが要素に無ければ追加し、あれば削除する。$(#header ul).toggleClass(hide);$(#header .leftButton).toggleClass(pressed);「メニュー」がクリックされる度に、 以下が追加・削除される。・“ul”の “hide”・class= “leftButton”と “pressed”(ボタンのデザインがクリックされる度に変わる)13年6月16日日曜日
  20. 20. 2.4 jQueryによる簡単なふるまいの追加CSSに “pressed”クラスを追加:p.27ボタンを押した際のデザインを変更する。13年6月16日日曜日

×