进阶篇17. 原子设计

龸龶龴龱龮Atomic Design龍龊龉龇龅龃龀齼齹齷齵齱齯齭齩齨齤齣齡齷齟齜齛龀齗Brad Frost齆齄齷齀鼼 龸龶龴龱 鼺鼸鼶鼲鼱齯龸龶鼮鼭齹鼫鼪鼩鼨齨齤鼥鼤鼣鼟鼜齱齄齷龸龶龴龱龊龉齗

鼘鼖鼔龅鼓鼑鼍齷鼌鼋鼉

龸龶鼔鼈鼅鼃鼁鼀黽黼黺黹齷黸黵龮黴鼔龅黳齛黯黭黪龴龱齷黧黤鼶鼃鼘黣黡黠黝黯黛默黴鼓龉黖齷黕鼫黑龍齗黡黐齷龸龶黏鼘黍鼅黌龶鼶黋黌龶黏鼘龇黋鼈鼅黊黉黈齷鼁黇黆齗鼘黃黂麿齗

齆麼齩龴龱鼸麹麷麴黏鼘麰麭黂麫齷麨麦齗Brad Frost麣麟麷麞默麝5鼓黡黐齷麗麖鼶麟麷黌麖鼔鼉龸龶鼭黌龶鼭鼁黇黆鼭麕麔麓齭齩齗

Atomic design is atoms, molecules, organisms, templates, and pages concurrently working together to create effective interface design systems.

黴麑齷龸龶鼶麎鼔麼齩龴龱鼸麊麈黼黺黹齷麆麂鼶麀鹼鹻鹸鼭鹵鹳鹯鼭鹮鹭鼶麓鹪齄龅麈黡鹨龇龅龃鹦鹤齷齨齤齗

Atoms include basic HTML tags like inputs, labels, and buttons.

黌龶鼔鹡鹞鼓龸龶黍鼅齷齗麀鹼鼉龅鼓鹵鹳鹯鹜龅鼓鹮鹭麎黏鼘鼈鼅龅鼓鹘鹔鹯鼶黴鼓鹘鹔鹯麎鼔黌龶齗

A search form molecule is composed of a label atom, input atom, and button atom.

鼁黇黆鼔鹡鹞鼓黌龶黍鼅齷齗麀鹼鼉logo 鼭鹎鹋鹇麓鹘鹔鹯黏鼘黍鼅麹麷鹅鹃鼃鹂齷鹀齭鸼鸹——header齗

This header organism is composed of a search form molecule, logo atom, and primary navigation molecule.

鹞鼓鼁黇黆黍鼅龅鼓麕麔齗麕麔黂麫黯麹麷鼘鸵鸱齷鸰鹯鼮鼶鸭鸪齯齭齩鸨鼃鼁鸧黠齷鼁黇黆鼶鼱鼘鸦鸢黴麈鼁黇黆齷鸠鸟鼭鸞鸜鸛鸙麓鸕鹨鼶鸓鼓鼁黇黆鸐黐黍鼅齯龅鼓鸕鹨鸍鸊齷鸇黆齗麕麔鸄鸁齷鼔鸠鸟麓默鼈鼶黋黡鼔黼鷿齷鷾鷼齗

The homepage template consists of organisms and molecules applied to a layout.

齭齩鼔麕麔齷鷻鷹齹齗齄鷵鸭鸪鷴黆齷黧鷲鷾鷼麓鼮鷰鷾鷼——黋黴鷬鼔CMS鼃鷢鷞齷鷜鷙齗

The page stage replaces placeholder content with real representative content to bring the design system to life.

黴鷖鼓麗麖鼸齷黭鷓鼓鼉龸龶鼭黌龶鼭鼁黇黆鼭麕麔鷑鼔黏鼘鸁黉鷏鼱齷麕鷌鼶黋黼鷋龅鼓齭齩鷉鼔黴麈龴龱鷆黹齷黼鷿鷂鷻鶿鶼齗

麣龸龶龴龱鶻鼱黯APP 鹀Instagram鸹齷鸢鶱鼮鼉鶮黴鶬鼮鼸麹麷黏鼘麰麭INS齷麼齩鼔鹼鶩鶮龅鼓龅鼓鶨齷龸龶鼶齜齟黍鶧鼶鶣黼鷿鶿鼅齭齩齷齗

Atomic design applied to the native mobile app Instagram.

齆鸨齩齷鼮黧鼸鼶麹麷黏鼘鶢鹃鶠鶝齷麰麭鼶黍鶜齣齡齷齛龀齗

本书共76小节:

评论 (写第一个评论)