Patterns / New
Loading
Waiting feels shorter when people can see that something is coming together. Show the shape of what's next, keep the page usable, and never leave them guessing.무언가 모이고 있다는 게 보이면 기다림은 짧게 느껴집니다. 다음에 올 것의 모양을 보여 주고, 화면은 계속 쓸 수 있게 두며, 사용자가 추측하게 만들지 않습니다.
Skeleton to content스켈레톤에서 콘텐츠로
Press Reload. Rows keep their exact height, so nothing shifts when the content lands.새로고침을 눌러 보세요. 각 행이 높이를 그대로 유지해 콘텐츠가 도착해도 화면이 흔들리지 않습니다.
- MMina미나Joined Sunday trail run일요일 트레일 러닝에 참여했어요
- JJae재Shared 4 photos from the market마켓 사진 4장을 공유했어요
- SSora소라Is looking for a tennis partner테니스 파트너를 찾고 있어요
Choose by wait time기다리는 시간에 따라 고르기
A flash of loader feels slower than no loader at all.순간 깜빡이는 로더는 로더가 없는 것보다 느리게 느껴집니다.
Skeleton for content, spinner inside the button that was pressed.콘텐츠에는 스켈레톤, 누른 버튼 안에는 스피너.
Show how far along it is and what's happening.얼마나 진행됐는지, 무슨 일이 일어나는지 보여 줍니다.
Let people leave and notify them with a toast when it's done.다른 곳으로 이동할 수 있게 하고, 끝나면 토스트로 알립니다.
Usage사용 가이드
Be optimistic for small actions작은 동작은 낙관적으로
Update likes, saves and chip toggles instantly, then sync. Roll back with a toast if it fails.좋아요, 저장, 칩 토글은 즉시 반영하고 나중에 동기화합니다. 실패하면 토스트와 함께 되돌립니다.
Don't make people wait for a server round-trip to see a heart turn red.하트가 빨개지는 것을 보려고 서버 왕복을 기다리게 하지 않습니다.
Load in place제자리에서 로드
Keep the header, filters and already-loaded items on screen while new content loads.새 콘텐츠를 불러오는 동안 헤더, 필터, 이미 불러온 항목은 화면에 둡니다.
Don't replace the whole screen with a centered spinner. People lose their place.화면 전체를 가운데 스피너로 바꾸지 않습니다. 사용자가 위치를 잃습니다.
Button loading state버튼 로딩 상태
Keep the button's width, swap the label for a spinner + 'Saving...', and disable repeat presses.버튼 너비를 유지하고 레이블을 스피너 + '저장하는 중...'으로 바꾸며, 중복 누름을 막습니다.
Don't let the button shrink to a spinner. The layout jumps and the label disappears.버튼이 스피너 크기로 줄어들게 두지 않습니다. 레이아웃이 튀고 레이블이 사라집니다.
Loading messages로딩 메시지
| Context맥락 | Message메시지 |
|---|---|
| Feed피드 | Finding moments nearby...주변 모먼트를 찾고 있어요... |
| Upload업로드 | Uploading 2 of 3 photos...사진 3장 중 2장 올리는 중... |
| Matching매칭 | Connecting you with people who like hiking...등산을 좋아하는 사람들과 연결하는 중... |
| Background백그라운드 | We'll let you know when your album is ready.앨범이 준비되면 알려 드릴게요. |