Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Reusable Component UI Design

Reusable Component UI Design

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

Tsuyoshi Higuchi

March 30, 2015
Tweet

More Decks by Tsuyoshi Higuchi

Other Decks in Design

Transcript

  1. PROFILE UI Designer Front-End Engineer UX Architect やっています。 Tsuyoshi Higuchi

    ココにいます。 Gunosy inc. 株式会社グノシー Developer DIV.
  2. 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. ‘‘
  3. Micro Design Macro Design <HEADER /> <FOOTER /> <LIST />

    <HEADING /> <FORM /> <BUTTON /> <LINK /> etc… in PAGE Micro Design Micro Intraction Micro Design Micro Design
  4. <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
  5. 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> モーダルの ラッパー コンポーネント
  6. modal_a.jsx var ModalA = React.createClass({ render : function(){ return (

    <Modal> <img src="Modal-Prototype-Image-A.png" /> </Modal> ); } }); モーダルの中身 A用のコンポーネント
  7. modal_b.jsx var ModalB = React.createClass({ render : function(){ return (

    <Modal> <img src="Modal-Prototype-Image-B.png" /> </Modal> ); } }); モーダルの中身 B用のコンポーネント
  8. ページ毎にコンポーネントを組み合わせる リストタイトル文 字列 リストタイトル文 字列 リストタイトル文 字列 リストタイトル文 字列 Modal

    Title A Landing Page リストタイトル文 字列 リストタイトル文 字列 リストタイトル文 字列 リストタイトル文 字列 Modal Title B List Page リストタイトル文 字列 リストタイトル文 字列 リストタイトル文 字列 リストタイトル文 字列 Modal Title A Detail Page
  9. 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ページ