Reusable Component UI Design

React.jsで考える再利用性の高いUIデザイン

Transcript

1. Reusable Component UI Design React.jsで考える再利用性の高いUIデザイン Copyright Tsuyoshi Higuchi 2015
2. PROFILE UI Designer Front-End Engineer UX Architect やっています。 Tsuyoshi Higuchi ココにいます。 Gunosy inc. 株式会社グノシー Developer DIV.
3. AGENDA 1. 再利用性とは？ 2. UI Designのプロセスとコンポーネントの関係 3. React.jsのUI Design ワークフロー 4. まとめ
4. 1. 再利用性とは？
5. React.jsのコンセプトの一つとして、次のような ものがあります。
6. Reusable  Components ‘‘ When  designing  interfaces,  break  down  the   common  design  elements  (buttons,  form  fields,   layout  components,  etc)  into  reusable   components  with  well-­‐defined  interfaces.  That   way,  the  next  time  you  need  to  build  some  UI  you   can  write  much  less  code,  which  means  faster   development  time,  fewer  bugs,  and  fewer  bytes   down  the  wire. ‘‘
7. Reusable Components 再利用可能なコンポーネント
8. React.jsは再利用可能なコンポーネント思想を 持ったViewライブラリ。 1. UIコンポーネントを資産化できる 2. テストのしやすさ 3. 学習コストの低さ 注目
9. 2. UI Designと コンポーネントの関係
10. UI Design Micro Design in Macro Design UIデザインとは…
11. Micro Design Macro Design <HEADER /> <FOOTER /> <LIST /> <HEADING /> <FORM /> <BUTTON /> <LINK /> etc… in PAGE Micro Design Micro Intraction Micro Design Micro Design
12. <HEADER /> <FOOTER / <LIST /> <HEADING /> <FORM /> <BUTTON /> <LINK /> etc… Micro Intraction Micro Design Macro Design in PAGE Micro Design Micro Design Micro Design Component Component Component Component
13. Component プロダクト内の ページやレイアウトに 梱包されているもの Micro Design
14. こうしてUIデザインを見ると、 同じ機能や構成を持つものが、 一つのサービスやサイトの中に複数存在する…
15. 機能が同じなのに、 ページ毎に同じようなデザインや実装を 繰り返すのは…
16. 時間の浪費だ
17. プロダクトは違えど、 機能にフォーカスすると構成が同じものが多い。 ページ単位ではそれが見えにくい。
18. 機能をコンポーネントとして扱えば良い
19. 機能が同じであれば、 テストやバグフィクスが行いやすい 機能が同じであれば、 使いまわせるので資産になる 機能が同じであれば、 最小単位でのUX検証も可能になる
20. Reusable Component UI Design
21. これからは、 再利用可能なコンポーネントを デザインしていこう！
22. という前に、 便利なモノが既にある
23. React-Components.com React Rocks Open Souce at Facebook
24. 3. React.jsでの UI Design ワークフロー
25. よくあるワークフロー
26. ワイヤーフレームや ペーパープロトタイピングの作成 動線・導線の検証 UI DESIGN
27. ページ・ステート単位での デザインカンプ（画像）作成 プロトタイピングツールで 遷移など検証 ページやステート毎でカンプとか何枚画像いるんだ… Ajaxの通信エラーやプリローディングなどの抜けが多い
28. スタイルガイドの作成 Staticなフロント実装 MARKUP, CSS,jQuery… スタイルガイドやStaticなフロント実装にjQuery React Wayじゃなくなる…
29. API設計・実装 FRONT-END コア実装 DOMやインタラクション用のNot React Wayなモノを エンジニアが書き直す無駄な作業…
30. インタラクションや スタイルなどフィードバック FEEDBACK 各工程 UIデザイナーは実装コストが見えない そのインタラクションどれほど意味あるの？
31. これまでのフローでは React.jsの価値が下がる
32. Modalを例にReactのDOMで考えてみる
33. Modalの基本セット リストタイトル文 字列 リストタイトル文 字列 リストタイトル文 字列 リストタイトル文 字列 Modal Title overlay modal_close-button modal_main modal_header modal
34. modal.jsx <Modal> <aside class="Component__modal"> <i className="modal_overlay" /> <div className="modal_contents"> { useHeader? && <header className="modal_header"> <h1 className=“modal_title”>{this.modal_title}</h1> <button onClick={this.onCloseHandler} className="modal_close-button" /> </header> } <main className="modal_body"> {this.props.children} </main> </div> </aside> </Modal> モーダルの ラッパー コンポーネント
35. modal_a.jsx var ModalA = React.createClass({ render : function(){ return ( <Modal> <img src="Modal-Prototype-Image-A.png" /> </Modal> ); } }); モーダルの中身 A用のコンポーネント
36. modal_b.jsx var ModalB = React.createClass({ render : function(){ return ( <Modal> <img src="Modal-Prototype-Image-B.png" /> </Modal> ); } }); モーダルの中身 B用のコンポーネント
37. ページ毎にコンポーネントを組み合わせる リストタイトル文 字列 リストタイトル文 字列 リストタイトル文 字列 リストタイトル文 字列 Modal Title A Landing Page リストタイトル文 字列 リストタイトル文 字列 リストタイトル文 字列 リストタイトル文 字列 Modal Title B List Page リストタイトル文 字列 リストタイトル文 字列 リストタイトル文 字列 リストタイトル文 字列 Modal Title A Detail Page
38. landing.jsx var Landing = React.createClass({ render : function(){ return ( <Header> <h1>TOP PAGE</h1> </Header> <Main> <img src=“Landing-Proto-image.png" /> </Main> <ModalA /> ); } }); Landingページ
39. 1. コンポーネントごとに画像を用意する 2. ReactのComponentで画像をラップする 3. 最低限のスタイルだけ記述していく 4. プロトタイプ完了 5. DOMやTransitionの実装を行う プロトタイプの完成
40. 4. まとめ
41. 再利用性の高いコンポーネントを作れば…
42. 1. 統一性を担保できる 2. 運用フェーズや部分的なリニューアルにもデザイン がしやすい 3. エンジニアに無駄な作業をお願いしなくて良い 4. 実装に近い形でモックアップできる 5. コンポーネントの資産が貯まる
43. Reusable Componentsを理解することは、 UIデザイナーにとってマイクロデザイン
44. すべてはコンポーネントに宿る