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

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

Transcript

1. Interface Inventory Dec 19, 2019 s-dev talks ʙαʔϏε։ൃษڧձʙʮେ๨೥ LT େձ 2019ʯ Daisuke Hayashi Travel Product Management Section. Rakuten, Inc.
2. HayashiDaisuke projected.jp
3. 3 Consistency AB
4. 4 Buttons Accordions Navigations
5. 5 " Engineer Design Manager $ Interface Inventory
6. 6 1. Interface Inventory 2. 3.
7. 7 interface inventory https://bradfrost.com/blog/post/interface-inventory/ inconsistent Interface Inventory
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
9. 9 .ppt .key UI Tabs Buttons Accordions Tabs Buttons Accordions
10. 10 1. Interface Inventory 2. 3.
11. - Goal - - - Interface Inventory - -
12. 12 1. 2. 3. 4. '
14. 14 Tips Price Route List OK
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
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.
17. 17 Tips Navigations Tab " Engineer ( )
18. 18 1. Interface Inventory 2. 3.
19. 19 " Engineer Designer Consistency New Designer Design Manager
20. Wantedly https://www.wantedly.com/projects/386000