One UI
ワンUI / 2018– / 양식 / 플랫폼 화면 언어
삼성이 Galaxy를 위해 정한 설계 언어다. 엄지가 가장 쉽게 닿는 높이에서 화면을 갈라 위쪽을 보기만 하는 영역, 아래쪽을 만지는 영역으로 삼고, 제목은 위에 두고 버튼과 탭과 대화 상자는 아래로 모은다. 내용은 모서리를 크게 굴린 상자에 담고, 바탕은 흰색 아니면 순수한 검정, 강조는 파랑 하나로 좁힌다.
한눈에 판단
시각적 특징
- 화면 위쪽은 제목과 여백만으로 채워지고 만질 수 있는 부품이 하나도 놓이지 않는다
- 모서리를 크게 굴린 카드 모양 상자에 글과 이미지가 한 덩어리씩 담긴다
- 위쪽 제목은 펼친 상태와 접힌 상태 둘만 가지며 중간 높이에서 멈추지 않는다
- 어두운 주제에서는 바탕이 순수한 검정이 되고 그 위에 파란 강조만 얹힌다
적합한 용도
- 큰 휴대 기기 화면에서 한 손 엄지만으로 모든 조작에 닿도록 부품을 아래로 모으고 싶을 때
- 목록 화면을 구분선이 아니라 둥근 상자의 모음으로 다시 짜고 싶을 때
이 양식 사용하기
짧은 지침을 프로젝트에 적용하거나 구조화된 사양을 AI 도구에 넘길 수 있습니다.
자세한 제작법과 출처제작 규칙, 실제 사례, 비교, 연구, 인용 형식
사전 항목
- 타이포그래피
- 제목은 위쪽 영역의 높이를 다 쓸 만큼 크게 잡고 본문과의 차이를 과감하게 벌린다. 접혔을 때의 제목은 펼친 상태와 다른 짧은 문구로 두어도 된다.
- 구성
- 엄지가 닿는 높이에서 화면을 둘로 나눈다. 위에는 제목과 여백만 두고 누르는 것, 전환하는 것, 확인을 요구하는 것은 모두 아래로 모은다. 좌우 여백은 24dp 아래로 내리지 않는다.
- 재료
- 모서리는 12dp에서 26dp 정도로 크게 굴린다. 바탕은 #fafafa와 #000000 둘 중 하나로 하고, 강조는 파랑 하나로 좁혀 그 밖의 색은 화면에 들이지 않는다.
- 주의
- 보기만 하는 영역에 누를 수 있는 부품을 두면 화면을 위아래로 나눈 이유가 사라지고 그저 여백만 넓은 화면이 남는다.
- 더 읽을거리
- the definition of the area split in the Structure chapter of the One UI Design Guidelines / the rule permitting different wording for an expanded heading and a collapsed one / how One UI borrows Android's colour category mechanism
관련 항목
- Material Design (マテリアルデザイン)공통 인상: Trust.One UI와 Material Design 비교
- Bento Grid (ベントーグリッド)공통 인상: Trust / Intimacy.One UI와 Bento Grid 비교
플랫폼 화면 언어 더 보기
플랫폼 화면 언어에서 공통 인상이 많은 항목을 우선해 골랐습니다.
- GNOME Clearlooks (GNOME Clearlooks)공통 인상: Intimacy / Trust / Calm.
- Adwaita (アドワイタ)공통 인상: Calm / Trust.
- GOV.UK Design System (GOV.UK デザインシステム)공통 인상: Trust / Calm.
이 항목을 인용하기
사전은 링크되기 위해 있다. 글을 쓰는 자리에 맞는 형식을 그대로 가져가면 된다.
- Link
- https://indexstyle.org/ko/styles/one-ui
- Markdown
- [One UI — IndexStyle](https://indexstyle.org/ko/styles/one-ui)
- HTML
- <a href="https://indexstyle.org/ko/styles/one-ui">One UI — IndexStyle</a>