デザインシステム構築 はじめの一歩 Interface Inventory

B3ceac584d1074ced858a1299dd887fd?s=47 Daisuke Hayashi
December 19, 2019

デザインシステム構築 はじめの一歩 Interface Inventory

Interface Inventory は、プロダクト上に存在するUIコンポーネントを分類し、一貫性のないものを可視化するアクティビティです。Interface Inventory について、楽天トラベルでの事例を交え紹介します。

B3ceac584d1074ced858a1299dd887fd?s=128

Daisuke Hayashi

December 19, 2019
Tweet

Transcript

  1. 1.

    Interface Inventory Dec 19, 2019 s-dev talks ʙαʔϏε։ൃษڧձʙʮେ๨೥ LT େձ

    2019ʯ Daisuke Hayashi Travel Product Management Section. Rakuten, Inc.
  2. 8.

    8 .ppt .key Tabs Buttons Accordions Typography Headings Text elements

    Lists Images Logo Icons Image with caption Image type 1 Media Video Player Audio Tables Buttons Forms Text Inputs Select Menus Radio/ Checkbox Inputs Navigation Primary Navigation Tabs Breadcrumbs Components Carousels Accordions Brad Frost
  3. 13.

    13

  4. 15.

    15 Atomic Design Atoms Molecules Organisms Buttons Accordions Price Navigations

    Route List Atoms Container Flags Badge Buttons Tags Input Controls Dividers Molecules Accordions Tables Route Icon + Text Alert Tooltip Navigations Price Balloon Organisms Form Modals Toast Search Pagenation Card Dialogs Hero Header, Footer Progress Indicator Carousel List Calendar Breadcrumbs
  5. 16.

    16 Atomic Design Spec Atoms Molecules Organisms Buttons Accordions Price

    Navigations Route List Buttons Accordions Navigations Price Route List height: 44px or 36px; min-width: 90px; background: #54822B; 36px button is available if there are many buttons on one screen.