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

Slide 1

Slide 1 text

Interface Inventory Dec 19, 2019 s-dev talks ʙαʔϏε։ൃษڧձʙʮେ๨೥ LT େձ 2019ʯ Daisuke Hayashi Travel Product Management Section. Rakuten, Inc.

Slide 2

Slide 2 text

HayashiDaisuke projected.jp

Slide 3

Slide 3 text

3 Consistency AB

Slide 4

Slide 4 text

4 Buttons Accordions Navigations

Slide 5

Slide 5 text

5 " Engineer Design Manager $ Interface Inventory

Slide 6

Slide 6 text

6 1. Interface Inventory 2. 3.

Slide 7

Slide 7 text

7 interface inventory https://bradfrost.com/blog/post/interface-inventory/ inconsistent Interface Inventory

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

9 .ppt .key UI Tabs Buttons Accordions Tabs Buttons Accordions

Slide 10

Slide 10 text

10 1. Interface Inventory 2. 3.

Slide 11

Slide 11 text

- Goal - - - Interface Inventory - -

Slide 12

Slide 12 text

12 1. 2. 3. 4. '

Slide 13

Slide 13 text

Slide 14

Slide 14 text

14 Tips Price Route List OK

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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.