Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

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

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

  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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

×