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

メンタルモデルから紐解く オブジェクト指向的コンポーネント設計 / Mental-Model ...

Tsuyoshi Higuchi
September 07, 2016

メンタルモデルから紐解く オブジェクト指向的コンポーネント設計 / Mental-Model Component Design

コンポーネント指向の設計にメンタルモデルやドメインモデルのような概念を加える事で、コンポーネントに意味を持たせ、設計や評価を行いやすくする方法をまとめました。

*OOUX / Atomic Design / Domain-Driven Design(ドメイン駆動設計) などから得た知見を集約しています。

さらに詳しい内容はこちらの記事にもまとめています。
UIの設計・評価は、Atomic DesignやOOUXのようなコンポーネント指向で
https://medium.com/@tyshgc/ui-component-evaluate-and-design-143917c777bd

Tsuyoshi Higuchi

September 07, 2016
Tweet

More Decks by Tsuyoshi Higuchi

Other Decks in Design

Transcript

  1. P R O F I L E 樋 口 剛

    T S U Y O S H I H I G U C H I Service Designer & UI Developer ϑϦʔϥϯεͰελʔτΞοϓ΍৽͍͠ϓϩμΫτͷ αʔϏεσβΠϯͱ։ൃɾ࣮૷·Ͱߦ͍ͬͯ·͢ɻ @tyshgc
  2. OFF ON εΠον // @flow type Props = { flagment:

    ?boolean }; class Switch extend Component { static defaultProps = { flagment: true }; constructor(props: Props, context: any) { super(props, context); } onSwitchToggle() { //... } render() { //... } }
  3. OFF ON ΍ΔؾεΠον 쎛쎢ؾ // @flow type Props = {

    Motivation: ?boolean }; class MotivationSwitch extend Component { static defaultProps = { Motivation: true }; constructor(props: Props, context: any) { super(props, context); } onMotivationToggle() { //... } render() { //... } }
  4. ར༻ऀ ։ൃऀ Ϊ Ỿ ỽ ϓ Λ ຒ Ί Δ

    αʔϏεΛͭ͘Δ ΍ΔؾΛ Φϯ͠Α͏ εΠον Φϯͯ͠ ΋Β͓͏
  5. ૟আ͢Δ - 14:00 ങ͍෺ - 16:00 ͝൧࡞Δ - 18:00 ब৸

    - 23:00 ૟আ͢Δ - 14:00 ങ͍෺ - 16:00 5P%PϦετ 5P%P ෦඼ ૟আ͢Δ - 14:00
  6. ૟আ͢Δ - 14:00 ങ͍෺ - 16:00 ͝൧࡞Δ - 18:00 ब৸

    - 23:00 ૟আ͢Δ - 14:00 ങ͍෺ - 16:00 5P%PϦετ 5P%P ෦඼ ૟আ͢Δ - 14:00 ίϨΫγϣϯ ΤϯςΟςΟ 6*ύʔπ 5P%PϦετͷߏ଄͸ ஌Βͳͯ͘ྑ͍ 5P%Pͷߏ଄͸ ஌Βͳͯ͘ྑ͍
  7. ૟আ͢Δ - 14:00 ങ͍෺ - 16:00 ͝൧࡞Δ - 18:00 ब৸

    - 23:00 5P%PϦετ { Todos:[ { title: "૟আ͢Δ", id: 1, limitDate: "2016-09-07 14:00", isComplete: true }, { title: "ങ͍෺", id: 2, limitDate: "2016-09-07 16:00", isComplete: false }, ... ] } 4UPSF