Adapt

사용 시기

/impeccable adapt은 하나의 컨텍스트를 위해 만들어진 디자인을 다른 컨텍스트에서 작동하게 만들기 위한 것입니다. 데스크톱에서 모바일, 모바일에서 태블릿, 웹에서 인쇄, 독립형에서 임베디드, 대시보드에서 이메일. 소스 디자인은 탄탄하지만 다른 브레이크포인트, 터치, 다른 컨테이너에서 무너질 때 사용하세요.

처음부터 반응형을 만드는 것이 아닙니다. 그것은 /impeccable로 시작하고 반응형 우선으로 레이아웃을 구상하세요. Adapt은 “모바일은 생각해본 적 없어요”에 대한 보완입니다.

작동 방식

스킬은 4가지 컨텍스트 적합 차원을 통해 작동합니다:

1. 브레이크포인트와 유동 레이아웃: 다중 컬럼을 싱글 컬럼으로 붕괴, clamp 범위 조정, 디자인이 실제로 깨지는 곳에 새 브레이크포인트 도입.
2. 터치 타겟: 최소 44px 터치 영역, 인접 타겟 간 충분한 간격, 필요한 경우 시각적 경계보다 큰 탭 영역.
3. 탐색 패턴: 데스크톱 사이드바가 모바일 하단 내비게이션이나 슬라이드아웃으로, 조밀한 툴바가 메뉴로, hover 상태에 터치 대응.
4. 콘텐츠 우선순위: 무엇이 보여야 하는지, 무엇이 disclosure에 접힐 수 있는지, 무엇이 해당 컨텍스트에서 완전히 제거될 수 있는지 결정.

타협 불가한 규칙: 적응하되 절단하지 마세요. 중요한 기능이 불편하다는 이유만으로 모바일에서 사라질 수 없습니다. 맞추는 방법을 찾거나, 인터랙션을 재설계하거나, 데스크톱에서 정말 중요했는지 재고하세요.

직접 해보기

/impeccable adapt the settings page for mobile

예상 변경:

• 3컬럼 그리드가 섹션 헤더가 스티키 구분선 역할을 하는 싱글 컬럼으로
• 사이드바 탐색이 콘텐츠 위의 수평 스크롤러로 이동
• 토글에 8px 세로 패딩 추가하여 44px 터치 타겟 충족
• 인라인 도움말 텍스트가 hover에서 탭하여 공개로 이동
• “위험 구역” 섹션이 되돌릴 수 없는 액션을 포함하고 사용자에게 명확히 보여주기 위해 모바일에서는 붕괴 대신 완전히 확장

주의 사항

• 기능 절단하기. 모바일 버전이 데스크톱이 할 수 있는 것을 숨기면 그것은 적응이 아니라 퇴보입니다. 기능을 위해 싸우세요.
• 모바일을 “더 작은 데스크톱”으로 취급하기. 모바일은 다른 컨텍스트입니다: 엄지, 방해, 짧은 세션. 뷰포트 너비가 아닌 컨텍스트에 적응하세요.
• 이후 /impeccable harden 건너뛰기. 반응형 레이아웃은 엣지 케이스를 드러냅니다. adapt 후 harden을 실행하여 320px에서만 나타나는 것을 잡으세요.