View
1.236
Download
4
Category
Preview:
DESCRIPTION
WCAN 2014 Autumnで発表した「ウェブデザインにおける動きの演出について」のスライド
Citation preview
ウェブデザインにおける 動きの演出について
アップルップル 山田拓生
山田拓生@yokozunat有限会社アップルップルデザイナーdotgraphy.com
課題
CSS、JSで動きの実装が求められるチーム内でのイメージの共有
ゴール
ユーザーが楽しく使い続けてくれる動きのあるサイトが作れるようになる
3つのポイント
UIアニメーションインタラクション伝え方とテスト
1POINT
2POINT
3POINT
UIアニメーション1POINT
UIアニメーションを集めたサイト UIアニメーション1POINT
http://hoverstat.es/ http://useyourinterface.com/
Hover States / The best new & interesting interaction design Use Your Interface
UIアニメーションの目的 UIアニメーション1POINT
楽しさを伝える変化を伝える
1
3
移動を伝える焦点を絞る
2
4
楽しさを伝える1
楽しさを伝える1
https://www.apple.com/jp/iphone-6/Apple - iPhone 6
楽しさを伝える1
http://votd.tv/
VOTD.tv - Recognising a talented industry.
移動を伝える2
移動を伝える2
http://www.soleilnoir.net/dreamon/#/findlostSoleil Noir • Dream on
移動を伝える2
https://medium.com/Medium
変化を伝える3
変化を伝える3
http://type.method.ac/Kern Type, the kerning game
変化を伝える3
http://www.hugeinc.com/
Huge. Digital agency.
焦点を絞る4
焦点を絞る4
http://anyilu.com/ANYI LU | Pre-Fall Available Now
焦点を絞る4
http://pluralapp.com/#/homePlural App - News Reader, Social Browser & Media Center
生き生きとした動きをつけるために
アニメーションのタイミング技法1983/03
ハロルド・ウィテーカー, ジョン・ハラス
UIアニメーション1POINT
UIアニメーション1POINTオーバーラップアクション
犬の体が先に動き耳としっぽが後からついてくるアニメーションのタイミング技法 P60 参照
UIアニメーション1POINTタイミングの階層構造
UIアニメーション1POINT
演出のストックを増やそう自然界の動きを理解しよう
UIアニメーションまとめ
インタラクション2POINT
インタラクション2POINT製品の最小単位のインタラクション
マイクロインタラクションDan Saffer
2014/03
インタラクション2POINTマイクロインタラクションの構造
トリガールールフィードバックループとモード
ex.ボタンが押された時
ex. 入力内容が間違っていたので
ex. エラーメッセージを表示する
ex.3回エラーだったらログインできなくする
1
2
3
4
動きの演出
インタラクション2POINTフィードバックの役割
ルールを理解してもらうためフィードバックは…
インタラクション2POINT
https://gumroad.com/Gumroad
インタラクション2POINT
http://www.shopify.com/
Ecommerce Software, Online Store Builder, POS - Free 14-day Trial by Shopify
インタラクション2POINTインタラクション時のアニメーションの効果
動きをつけることによって注意を促すことができるアニメーションが多すぎるとストレスを感じるただし…
利用者は作業をしているときは視界が狭くなる
インタラクション2POINTインタラクションまとめ
動きをつけると注意を促せるが使いすぎるとストレスに
フィードバックはルールを理解してもらうためのもの
伝え方とテスト3POINT
プロトタイピングの種類 伝え方とテスト3POINT
手描きのスケッチ
Adobe After Effects を使う
Google Web Designerを使う
実際にコードを書く
1
2
3
4
手描きのスケッチ 伝え方とテスト3POINT
動きが正確には伝わらないクライアントに伝えにくい
スピーディー弱み
強み
Adobe After Effects 伝え方とテスト3POINT
コードに置き換えづらい
イメージしている正確な動き弱み
強み
Google Web Designer 伝え方とテスト3POINT
Google Web Designer 伝え方とテスト3POINT
HTML、CSS、JSで作られているためパラメーターなどをそのまま流用できる
強み
実際にコードを書く 伝え方とテスト3POINT
時間がかかる
コードをそのまま使える弱み
強み
アニメーションのガイドライン 伝え方とテスト3POINT
プロセス 伝え方とテスト3POINT
Julie Zhuo Junior / Designers vs. Senior Designers ̶ The Year of the Looking Glass ̶ Mediumhttps://medium.com/the-year-of-the-looking-glass/junior-designers-vs-senior-designers-fbe483d3b51e
新人デザイナーとベテランデザイナーの図
GitHubBacklog
デザイナーもバージョン管理を使おう 伝え方とテスト3POINT
テスト、テスト、テスト 伝え方とテスト3POINT
テストを繰り返して磨き上げる
伝え方とテストまとめ 伝え方とテスト3POINT
早くイメージを共有できるように、ツールをうまく使う
早めにアウトプットし、短いスパンでテストを繰り返す
本日のまとめ
UIアニメーションの動きの研究をしよう
動きのあるインタクラクションの目的を考えよう
テストを繰り返して磨き上げよう
1
2
3
参考にした資料 伝え方とテスト3POINT
Design in Motion. The new frontier of Interaction Design // Speaker Deckhttps://speakerdeck.com/myinteraction/design-in-motion-the-new-frontier-of-interaction-design
Web Design / Motion Design // Speaker Deckhttps://speakerdeck.com/valhead/motion-design
インタフェースデザインの実践教室――優れたユーザビリティを実現するアイデアとテクニックhttp://www.oreilly.co.jp/books/9784873116082/
Animations ̶ Web Fundamentalshttps://developers.google.com/web/fundamentals/look-and-feel/animations/
iOSヒューマンインターフェイスガイドライン : アニメーションhttps://developer.apple.com/jp/devcenter/ios/library/documentation/userexperience/conceptual/mobilehig/Animation/Animation.html#//apple_ref/doc/uid/TP40006556-CH57-SW1
Thanks
Recommended