狠狠撸
Submit Search
フ?ロトタイヒ?ンク?の目的?范囲?ツール
?
3 likes
?
3,363 views
T
theguild
Follow
笔颈虫补迟别勉强会で使用した资料です。
Read less
Read more
1 of 28
Download now
Download to read offline
More Related Content
フ?ロトタイヒ?ンク?の目的?范囲?ツール
1.
プロトタイピングの目的?範囲?ツール Partner : Satoshi
Omiya (webtron Inc.)
2.
プロトタイピングの目的
3.
何のためにプロトタイピングするか? ? デザインやアイディアの試行錯誤 ? ユーザビリティの向上 ?
デザインや設計の評価 ? 実装時の手戻りを減らす ? チーム内やクライアントとの合意形成 ? デザイナー?エンジニア間の意思疎通 など
4.
プロトタイピングの役割は大きく2つ ? デザインやアイディアの試行錯誤 ? ユーザビリティの向上 ?
デザインや設計の評価 ? 実装時の手戻りを減らす 開発ツール ? チーム内やクライアントとの合意形成 ? デザイナー?エンジニア間の意思疎通 コミュニケーションツール 様々なプロトタイピングサービスの 登場により役割が大きくなってきた
5.
プロトタイピングの范囲
6.
プロトタイピングの范囲 後期初期 それぞれの范囲に适したプロトタイピングツールを使おう アイディア 画面デザイン 画面遷移 全体構造 手触り?使い心地 フィードバック 低 高 詳細度 開発フェーズ
7.
范囲に适したプロトタイピングツール
8.
開発フェーズ 後期初期 手触りや使い心地 フィードバック 詳細度:低 詳細度:高 アイディア?画面デザインの検討 画面遷移や 全体構造の検討 ペーパー プロトタイピング
9.
ペーパープロトタイピング ペンやマーカーを使って画面デザインのアイディアを出しているところ
10.
ペーパープロトタイピング 実寸でプリントアウトした画面を切り刻んで「オズの魔法使い」などの手法でユーザビリティテストを行う
11.
ペーパープロトタイピングパッド THE GUILD ではプロトタイピングに特化したレポート用紙「Paper
Prototyping Pad」をつくりました
12.
ペーパープロトタイピングパッド iPhone実寸のグリッド入り&各種ガイド線付なので NavigationBar や
TabBar なども簡単に線を引けます
13.
ペーパープロトタイピングパッド https://goo.gl/qujtfI
14.
開発フェーズ 後期初期 アイディア 画面デザイン 手触りや使い心地 フィードバック 詳細度:低 詳細度:高 画面遷移や全体構造の検討
15.
画面遷移や全体構造の検討 複数画面を登録し、各画面をリンクさせていくタイプ
16.
画面遷移や全体構造の検討 画面内に配置したHotSpotに遷移先画面をリンクして画面遷移をシミュレートできます
17.
画面遷移や全体構造の検討 LIVESHAREなどデザインレビュー、作業者間コミュニケーションのサポート機能が豊富
18.
画面遷移や全体構造の検討 ペーパープロトタイプと連携しやすい機能が特徴
19.
マイナスを0に近づける ユーザビリティや設計の整合性などを検証してリファインし、不具合や瑕疵をなくす アイディア、画面デザイン 画面遷移や全体構造 実用的品質(Pragmatic Quality)は、もはや当たり前に
20.
UXの捉え方:Hassenzahlのモデル ユーザがUXをどう捉えているかを説明 内?容 表?現 機能性 インタラクション 製 品 の
特 徴 実用的属性(Pragmatic Attributes) 操作性 刺激?共感?喚起 快楽的属性(Hedonic Attributes) 顕 在 的 な 製 品 の 特 性 状 況 魅力 楽しさ 満足 結 果 よいUXの醸成には「実用的品質」と「快楽的品質」が求められる Hassenzahl, 2003
21.
0をプラスに 手触りや使い心地といった快楽的品質(Hedonic Quality)を高めていく 手触り?使い心地?フィードバック
22.
インタラクションデザインの重要性 Android の Material
Design ガイドラインでは画面遷移時のパーツの動きなどが細かく定義されている
23.
インタラクションデザインのプロトタイピング デザインスキルに加えエンジニアリングスキルが必要とされるため 十分に検討することや満足のいく成果を出すことが難しい部分 デザイン能力 エンジニアリング能力 ビジュアル?モーションデザインをユーザの操作によってどのように変化するかを動的に定義する必要がある +
24.
開発フェーズ 後期初期 画面デザイン アイディア 詳細度:低 詳細度:高 手触りや使い心地フィードバックを検討 画面遷移や 全体構造の検討
25.
Origami パッチと呼ばれる要素を線で繋いでいくことで、インタラクティブなモックアップを作成することができます
26.
Principle 複数の画面間の遷移のシミュレートができ、かつインタラクティブなUIも作ることができる
28.
ありがとうございました
Download