Metro
メトロ / 2010–2015 / 양식 / 마이크로소프트 UI
아이콘보다 글자를 주인공으로 세운 윈도우폰의 플랫 언어다. 큰 타이포그래피와 단색 라이브 타일, 화면 끝을 지나쳐 흐르는 구성이 교통 사인의 명료함을 UI로 옮겨 와, iOS 7보다 앞서 플랫 시대를 열었다.
한눈에 판단
시각적 특징
- 주인공이 된 글자
- 단색 타일
- 화면 밖으로 이어지는 구성
- 제거된 크롬
적합한 용도
- 뉴스나 날씨를 훑는 대시보드를 테두리 없이 구분해 만들 때
- 실내 안내 표시나 사이니지를 멀리서 한 단어로 읽히게 할 때
이 양식 사용하기
짧은 지침을 프로젝트에 적용하거나 구조화된 사양을 AI 도구에 넘길 수 있습니다.
자세한 제작법과 출처제작 규칙, 실제 사례, 비교, 연구, 인용 형식
사전 항목
- 타이포그래피
- 제목을 본문의 다섯 배 이상으로 잡고, 가는 굵기 그대로 거대하게 키운다
- 구성
- 제목을 화면 밖으로 흘리고, 타일은 크고 작은 두 종류의 직사각형만으로 짠다
- 재료
- 그림자도 테두리도 쓰지 않고, 바탕은 검정이나 흰색, 면은 채도 높은 단색으로 칠한다
- 주의
- 테두리도 그림자도 걷어낸 결과 누를 수 있는 타일과 단순한 제목의 구분이 사라져, 사용자가 화면의 어디를 만질지 헤매게 된다
- 더 읽을거리
- from Zune HD to Windows Phone 7 / the transit-signage influence behind the name / the inheritance into Fluent
관련 항목
- Flat Design / Vector Minimalism (フラットデザイン / ベクターミニマリズム)공통 인상: Trust.Metro와 Flat Design / Vector Minimalism 비교
- Swiss (スイス・スタイル)공통 인상: Trust.Metro와 Swiss 비교
자주 혼동되는 것
마이크로소프트 UI 더 보기
마이크로소프트 UI에서 공통 인상이 많은 항목을 우선해 골랐습니다.
- Fluent 2 (フルーエント2)공통 인상: Trust / Technique.
- Windows 95 Interface (Windows 95 インターフェース)공통 인상: Trust / Technique.
- Ribbon (リボン)공통 인상: Trust / Technique.
이 항목을 인용하기
사전은 링크되기 위해 있다. 글을 쓰는 자리에 맞는 형식을 그대로 가져가면 된다.
- Link
- https://indexstyle.org/ko/styles/metro
- Markdown
- [Metro — IndexStyle](https://indexstyle.org/ko/styles/metro)
- HTML
- <a href="https://indexstyle.org/ko/styles/metro">Metro — IndexStyle</a>