20140515 digital media publishing user interface design

デジタル出版 インタラクティブインター

フェースデザイン- AppCrossプラットホームコーチ

ング

資策會創研所 簡陳中 Anthony Chien

http://www.appcross.tw

マンマシンインターフェースデザイナー

まるで本当の本みたいだが、本を超えた！

使いやすさ

ディザイ ラビリティ

E-マガジンの主題内容はユーザーのニーズを満足できる。

ブランド 経験

対話型コンテンツの操作が簡単で使いこなす。

ユーザーは会話型デザインのいい体験に楽しんでいる。

ユーザーはマガジンのブランドの全体的にいいイメージを持っている。

ニーズ

新しいメディアデザイン 新しいデザインの心

ユーザーインターフェース(UI) vs.

ユーザー エクスペリエンス(UX)

電子書籍の作り方

UI = UX

電子書籍の作り方

ユーザーインターフェース ユーザー経験

What is UI ? ユーザーインターフェースとは人とデバイスの出会の場である。ユー

ザーはデバイス機能を利用しインプットとアウトプットを行う。イン

ターフェースとはインプットとアウトプットのプロセス配置で、ユー

ザーはデバイスの機能を運用してほしい結果に導くこと。

電子書籍の作り方

電子書籍の作り方

UI の目標 ユーザーが最も短い時間でインターフェース操作を馴染んでミッション

を完成するのがUIの目標。使えるだけじゃいいUIデザインとは言えない。

ユーザーが楽しんでいて、そしてリピートするこそいいデザインである。

What is UX ? As (role), I want to do (goal), so I can (reason) ユーザー経験のデザイン、ユーザーインターフェースデザイン、ビジュ

アルスタイル、プログラム効能と機能等を含んで、長期な観察と詳細分

析と通してユーザーのアクティビティパータンと利用の習慣を知る。

つまり、ユーザー経験である。

電子書籍の作り方

ユーザー設計三元素包括：

電子書籍の作り方

ユーザー Users

使用シーン Context

內容 Content

電子ストーリーのメインユーザーが児童で、設

計上は主にマルチメディアの運用で、画像を中

心に、文字、動画、音声、音效、音樂等を補助

することによってあるストーリーのシーンを表

現し、読むときに読者と高度インタラクティブ

な接触をする。

電子書籍の作り方

ユーザー は誰 ?? 異なるイ-ブックの内容よって目標ターゲットも違う。

電子マガジンのメインユーザーが大人で、設計

上も內容の提示を中心に、文章を中心に画像で

補助し、チャプターのコンテンツにインタラク

ティブ元件でユーザーを誘導操作し、読む価値

を高める。

電子書籍の作り方

文化 環境 ユーザー 活動

動機

目標と任務

知識と習慣

情緒と能力

注意力

利用シーンContext ユーザーのメンタルモデルによって状況設計する。メンタルモデルとは

ユーザーが自分自身の経験と直感で、デバイスインターフェースと会話

を取ること。メンタルモデルを構築することでユーザーの会話シーンを

予測できるので、事前に会話のプロセス定義をデザインすることで、

ユーザーのニーズを満足する。

行動デバイス

ユーザーインターフェース

1. 画像は手で操作、拡大できる。保存、シャアに自由。

2. 従来な読む習慣の維持：注記、マーク、ノート

3. 目だけのリーディングじゃなくで、マルチメディア音声、映像

を結合することで全方位の読む体験を提供。

4. いつでも本を出す、保存、読むことができる。

本から電子書籍へと進化する

電子書籍の作り方

インターフェースデザイン準則 Interface Design Principal

電子書籍の作り方

電子書籍の作り方

1. インタラクティブオブジェクトの分かりやすさ デザインオブジェクトを明確にする必要があり、インターフェイスのデ

ザインもユーザーが一目ですべての機能ステップの操作方法を理解でき

るようにする必要がある。

インタラクティブボタンが初期設定のままで、ボタンは、（図1）点滅·フェージング（図2）異なる色（図3）異なる形状 によって区別されている。

(圖一) (圖二) (圖三)

電子書籍の作り方

2. インターフェースの一致性

デザインのスタイルは一致しないといけない、色の処理もインター

フェースの置き場所も。

同じチァプターのデザインテーマは類似または同一である必要があります。ユーザー過去の使用経験に従い操作、またインターフェースの相互作用をすることがます。すべての色、ボタンやその他の機能配置が画一的にしなければならない。

電子書籍の作り方

3. タイムリーなフィードバック ユーザーに今進行していることを知らせ、操作の過程に会話取ることで

有効的にユーザーに”ここを押して”というようなヒントを与え、また”

これはインタラクティブなオブジェクト”であることを提示するだけ

じゃなく、追加情報も提供している。

（図I）ドロップリフレッシュ機能は、グラフの変更によて更新を通知。 （図2）Plant Nannyはボタンを2秒長押して音声を出す。(図3）押すとホバー効果が現れる。(図４) 2ステージアイコンを押すとより多くの情報を表示する

(圖一) (圖二)

(圖三)

(圖四)

電子書籍の作り方

4. ユーザー操作モード

操作モードはユーザー普段の習慣に一致すると、ユーザーは過去の経験

にしたがって操作モードに反映する。ハンドオペレーションやインタラ

クティブ元件をデザインする時に、生活経験との結び付きを注意すべき。

左図はユーザーの経験運用( video放送、拡大縮小、削除、情報…などのicons )直感でビデオをクリック放送、或はプラグインを操作する。右の図はタッチiconのサイズを設計するときに注意すべき事項である。

電子書籍の作り方

5. Discoverability ヒントを提供する 操作しやすいインターフェースを設計し、プラグインのヒントを提供す

ることで、ユーザーは簡単にインターフェース検査よりインタラクティ

ブ効果のある元素を見つける。

はじめてユーザーに適切なインタラクティブヒントを提供するときに、左の写真の例だと、章節の切り替えについて、今何ページと矢印を付けて、ユーザーを誘導する。右の図例だと、インタラクティブな写真に說明文章を付けて、直接ユーザーに操作方式を告知する。

電子書籍の作り方

6.スケーラビリティと柔軟性 デバイスインターフェース應用 違うデバイスには違う使用モードがある。デジタルの時代に、インター

フェースデザインを作るときに、デバイスのサイズ或は縦横のインター

フェース変換を考慮すべき、柔軟的に配置を変換するほうがいい。

デジタルコンテンツは異なるデバイスで閲覧されるので、設計する前にインタラクティブコンテンツとデバイス表現を考えて、画面配置は違うインターフェースでも閲覧できるよう切り替える(左圖)縦か横式(右圖)

電子書籍の作り方

7. Reliability 身に付けられる インターフェースがわかりやすく、ユーザーがすぐコントロールできる

よう、その需要を満足できるように設計すべき。

ユーザーは操作說明を持って操作方法を勉強し、毎期の電子雑誌も同じiconsで指示することで、ユーザー學習の負担を減らし、これはまさに前も触れたように操作の一致性、名詞統一

New Media Digital Content Production Solution ニューメディア デジタルプロダクション ソリューション (APP CROSS)

AppCrossプラットフォーム

電子書籍の作り方

Step1

制作したい電子書籍籍

のテーマを考える

AppCross電子書籍の製作フロー(1/2)

Step2

テーマに関連するデータ

を集め、素材を整理

し、アウトラインを決

める

Step3

InDesignを使用した電子書籍のコンテンツ

をレイアウトします。また、AppCross

プラグインでインタラクティブな効果

が追加されます。電子書籍の編集完

了後エクスポートすると、パッケージ

ングされたzipファイルができます。

AppCross フラットホーム介紹

電子書籍の作り方

Step4-1

i Tunesを使用してエクスポート

後のzipファイルをiPad上の

AppPreviewにインストールでき、

すぐにiPadで完成後の電子書籍

籍をプレビューできます。

AppCross電子書籍の製作フロー(2/2)

Step4-2

ステップ4-2: zipファイルをAppCrossServer

にアップロードし、パッケージング配信

を行い、AppStoreにパッケージ追加を

行うと、世界中のユーザーがダウン

ロードできるようになります。

AppCross プラットホーム介紹

電子書籍の作り方

Indesign Plugin

AppCrossプラットフォーム介紹

• 17種類のプラグインを提供し、デバイス特性に聞く、動く、触る、感動に結合した

インタラクティブモードデザイン

• 即時なプレビュー機能

1.スタマイズ機能 2. インターネットサービス

3. カスタマイズ機能

4. エクスポートと プレビュー