Microsoft 디자인 원칙

우수한 디자인 구동 원리

Microsoft 디자인 원칙을 따르면 사용자를 즐겁게 하고 개발자가 자랑스러워할 수 있는 스토어 앱을 빌드하는 데 도움이 됩니다. 앱을 계획할 때 이러한 원칙을 사용하고 디자인 및 개발 시 이러한 원칙에 따라 선택하세요.

최신 디자인 정보

Microsoft는 오랫동안 여러 영역에서 많은 제품을 개발한 기술 선도업체였습니다. 최근에는 디자인에 좀더 집중하는 변화가 시작되었습니다. 이 변화의 특징은 강력한 기초, 흥미롭고 영향력 있는 아이디어, 창의적인 탐색 및 참신한 감각이었습니다. 이 변화의 기초가 Microsoft 디자인 원칙이 되었습니다.

Microsoft 디자인 철학의 전형적인 예는 빠르게 작동하고 입력을 최소화하며 새롭고 업데이트된 정보를 자동으로 알려주는 깔끔한 앱 화면입니다. 사용자는 콘텐츠를 나타내는 컨트롤 대신 해당 콘텐츠를 조작합니다. 또한 시각적 요소가 뛰어난 수준을 자랑합니다.

최신 디자인의 기초

최신 디자인에는 "플랫 디자인" 레이블로 나타낼 수 있는 것보다 훨씬 더 많은 깊이, 특성 및 배경이 있습니다. 디자인 언어는 다음 세 가지 중심축을 기반으로 합니다.

• The Bauhaus: 1919년에 설립된 이 상징적 디자인 학교는 불필요한 모든 것을 제거하는 강력한 디자인 철학을 촉진했습니다. 앱의 핵심 기능을 이해하는 것도 중요하지만 기능을 핵심 기능까지 줄이려면 절제가 필요합니다. Antoine de Saint-Exupéry는 더 이상 제거할 것이 없을 때 완벽해진다고 말했습니다. 단순성은 미적 가치뿐 아니라 유용성까지 제공합니다.

• 국제 입력 체계 스타일(스위스 스타일): 스위스 스타일은 대담하고 명확하며 아름다운 입력의 Microsoft 디자인에 대한 첫 번째이자 가장 중요한 기초가 되었습니다. 이 스타일은 핵심 테마로 명확성, 가독성 및 객관성을 촉진합니다. 이 스타일을 통해 입력 체계 및 화면 효과 둘 다에서 그리드의 필요성과 비대칭 레이아웃 사용을 원칙에 따라 미적 방식으로 구현했습니다.

• 동작 디자인: 동작은 환경에 생명을 불어넣고 우아한 느낌을 전달합니다. 입력 및 디자인과 함께 동작을 사용하여 멋진 영화 타이틀 시퀀스를 만든 Saul Bass 등의 선구자로부터 영감을 받습니다. 뛰어난 동작 디자인은 즐거움을 줄 뿐만 아니라 작업을 수행하는 방법을 사용자에게 설명하는 데에도 도움이 됩니다.

디자인 중심 축에 대한 자세한 내용은 Microsoft의 최신 디자인을 참조하세요.

이러한 영감을 통해 Microsoft 고유 원칙이 결정되었으며, 모든 디자인은 이 원칙을 따릅니다. 이러한 원칙은 Microsoft가 채택한 사항이지만 어떤 면에서는 모든 디자인에 보편적으로 적용되며, Microsoft 플랫폼에서 여러분의 브랜드를 돋보이게 하는 데 도움이 될 것입니다. Microsoft 디자인 원칙은 다음과 같습니다.

• 꼼꼼한 솜씨 발휘
• 적은 노력으로 많은 결과 획득
• 빠르고 유연함
• 진정한 디지털 구현
• 일관된 경험 제공

꼼꼼한 솜씨 발휘

이 원칙은 특정 이유로 첫 번째 원칙입니다. 역사상 생성자, 빌더 및 장인은 작업에 자부심을 갖고 자신을 전문가로 구분했습니다. 이 원칙은 자주 또는 많은 사용자에게 표시되는 가장 작은 세부 정보에 시간, 에너지 및 열정을 할애하는 것과 관련이 있습니다. 그리드에 완벽하게 정렬된 픽셀에서 색, 앱 화면의 입력 체계에 이르기까지 모든 단계에서 완벽하고 세련된 환경을 디자인하는 것입니다. 모든 개발 단계에서 훌륭한 솜씨를 발휘해 보세요.

그리드 활용

그래픽 디자인에서 최신 서체 그리드는 콘텐츠에 일관성을 제공하는 스캐폴딩입니다. 요소의 비례 정렬과 관련해서 미적이고 실용적인 이점이 있습니다. 사용자가 빠르고 편리하게 페이지를 파악할 수 있습니다.

계층 구조 및 밸런스

사용자가 앱의 시각적 계층 구조를 명확하게 알 수 있도록 각 형식의 정보를 다양한 속성으로 표시합니다. 계층 구조의 각 수준이 서로 구분되도록 글꼴 크기, 글꼴 색, 위치 및 공백을 사용할 수 있습니다. 다양한 속성 값을 일관된 방식으로 사용할 경우 사용자가 앱의 각 수준을 즉시 구분하고 알아볼 수 있습니다.

계층 구조	부족한 계층 구조

큰 텍스트, 고대비. 앞의 예제에서 "threads"는 선택한 피벗 항목의 머리글입니다. 아래에 표시되는 콘텐츠의 컨텍스트를 설정합니다. 머리글은 고대비(검은색 위의 흰색)이며 페이지에서 선택한 항목을 알려줍니다. 다른 항목의 머리글은 더 낮은 대비(검은색 위의 회색)를 사용하며 덜 강조됩니다.

다음으로 가장 큰 텍스트. 스레드 목록에서 가장 중요한 세부 정보는 메시지를 주고받는 사람의 이름입니다.

가장 작은 텍스트. 각 메시지의 첫째 줄이나 2줄은 다음으로 중요합니다. 색을 통해 읽은 메시지와 읽지 않은 메시지가 서로 구분되고 이름과도 구분됩니다.

간격 및 맞춤. 스레드 간에는 더 많은 공간을 사용하고 스레드 내에서는 더 적은 공간을 사용하여 계층 구조를 표시합니다. 메시지의 타임스탬프를 오른쪽 정렬하면 알아보기 쉽습니다.

부족한 계층 구조. 계층 구조가 없으면 페이지의 의미를 잘 이해하기 어렵고 읽기도 힘들어집니다. 미적인 측면도 잃게 되지만 그보다 더 중요한 점은 유용성 측면까지도 잃게 된다는 것입니다.

정체성

앱의 개성을 가장 잘 반영하는 서체를 찾아보세요. 앱을 보완하고 정의에 도움이 되는 서체의 몇 가지 예는 다음과 같습니다.

The New York Times 앱. 기존 서체는 이 뉴스 소스의 진지한 특징을 반영합니다.

Camera360. 이 앱의 서체는 현대적이고 세련된 느낌을 줍니다.

개요 및 검사 목록

• 공을 들여 세부적인 부분을 만드세요.
• 안전하고 안정적으로 앱을 사용하세요.
• 균형, 대칭 및 계층 구조를 사용하세요.
• 앱의 새로운 레이아웃인 그리드에 앱 레이아웃을 맞추세요.
• 장애가 있는 사용자를 비롯하여 최대한 많은 사용자층이 이용할 수 있도록 앱을 만드세요. 접근성: 디자인 지침을 참조하세요.

적은 노력으로 많은 결과 획득

이 원칙은 앱을 핵심 기능으로 제한합니다. 크롬이 아니라 콘텐츠를 고려하세요. 콘텐츠는 사진, 메일, 뉴스 기사 등 여러 형태를 사용합니다. 크롬을 제거하여 가장 관련된 요소만 화면에 유지하세요. 또한 가능한 경우 콘텐츠 자체에서 탐색 요소를 만듭니다. 명확한 몰입형 환경 규칙을 사용하세요. 화면의 각 요소에 가치와 명확한 용도가 있어야 합니다.

이 원칙이 직관의 포기를 의미하는 것은 아닙니다. 탐색 요소를 통해 사용자가 앱을 조작하는 방법을 찾을 수 있으면 디자인이 성공한 것입니다. 뛰어난 디자인은 직관과 축소의 적절한 균형을 이루고 명확하면서도 아름다운 최종 결과물을 생성합니다.

크롬이 아니라 콘텐츠

사용자가 콘텐츠를 직접 조작할 수 있게 하세요. 크롬을 제거하고 글꼴, 크기 및 색을 이용하면 콘텐츠를 더 쉽게 알아볼 수 있습니다. 이 예제에서는 이름과 제목을 더 쉽게 읽을 수 있습니다.

콘텐츠 중심	불필요한 크롬

관련된 콘텐츠 표시

관련된 명령과 기능은 명확하며 쉽게 이해하고 조작할 수 있습니다.

개요 및 검사 목록

• 평범한 요소를 많이 사용하는 대신 눈에 띄는 몇 가지 요소만 사용하세요.
• 크롬 앞에 콘텐츠를 배치하세요.
• 시각적이고 직접적인 내용에 중점을 두어 사용자가 좋아하는 내용에 몰입하게 하면 나머지 콘텐츠도 탐색하게 됩니다.
• 사용자의 신뢰를 이끌어 내도록 하세요.
• UI의 중복을 줄이세요.

빠르고 유연함

이 원칙은 응답성이 뛰어난 몰입형 환경이 되도록 합니다. 매력적인 애니메이션, 전환 및 예기치 않은 응답을 촉진하지만 인터페이스에 생기를 불어넣고 사용자를 즐겁게 합니다. 이 원칙은 사람과 작업을 기술보다 중시합니다.

앱이 태블릿 앱 또는 휴대폰 앱인 경우 "이동 중"인 사용자에게 유용한 앱은 간단하고 빠른 사용 시나리오에 중점을 둡니다. 이러한 사용 사례의 경우 속도 및 초점과 관련해서 사용자가 원하는 것을 정확하게 제공하고 뛰어난 디자인을 유지하는 데 집중하세요.

라이브 방식

라이브 타일은 생기가 넘치고 매력적인 반응형 타일입니다. 또한 새 메일 알림에서 자주 가는 바의 특별 음료에 대한 내부 팁 제공에 이르기까지 상상하는 모든 것을 실행할 수 있습니다.

동작

연속되는 느낌을 만들고 앱이 의미 있는 동작 사용을 통해 스토리를 진행할 수 있게 하세요. 동작은 사용자에게 작업을 시작하거나 여러 형식의 작업을 구분하라는 메시지를 표시할 수 있습니다. 탭하면 잠금 화면이 튀어서 위로 밀 수 있음을 표시합니다. 항목의 종료 전환은 해당 항목을 다시 살짝 밀어서 표시하는 방법을 암시합니다.

개요 및 검사 목록

• 사용자 상호 작용에 반응하고 다음 상호 작용에 대해 준비하세요.
• 터치 및 직접적인 조작에 맞게 디자인하세요.
• 동작을 사용해 사용자를 즐겁게 만드세요.
• 이전 및 이후 상황에 매끄럽게 연결하세요.

진정한 디지털 구현

이 원칙은 디지털 도메인에서 가능한 무한한 혁신 가능성을 수용합니다. 스큐어모피즘은 해당 디자인 비유를 알리기 위해 실제 세계의 규칙과 속성을 찾습니다. 하지만 Microsoft는 매체의 능력, 언어 및 고유한 가능성을 수용합니다.

Bauhaus 디자인 학교에서 불필요한 디자인 요소를 제거하도록 가르친 것처럼 이 원칙에서는 가죽 또는 질감 효과, 스티치, 음영, 반사 등의 디지털 표현 기법을 사용하지 않도록 권장합니다. 보다 강력하고 확장 가능한 디자인 언어를 수용하세요. 이는 진정한 디지털 원칙의 기초가 됩니다.

정보 포함

아이콘 그래픽만이 아닌 정보 그래픽을 구현하세요. 정보 전달은 주요 목적이며 불필요한 세부 사항으로 인해 손실되면 안 됩니다. 정보 그래픽 방법을 채택하면 보다 명확한 콘텐츠, 작업 가능한 정보 및 주의 집중의 장점이 있습니다.

아이콘 그래픽	정보 그래픽

개요 및 검사 목록

• 통신을 통해 동적이고 생기가 넘치는 앱을 만드세요.
• 입력 체계를 아름답게 사용하세요.
• 진하고 생생한 색상을 사용하세요.
• 사용자가 서로 연결된 상태로 유지할 수 있도록 클라우드에 연결하세요.

일관된 경험 제공

이 원칙은 고유의 작업을 통합하고, 가능하면 공통 에코시스템에 맞추며, 필요에 따라 혁신하는 것입니다. 서로 다른 플랫폼의 앱 및 사용자 시나리오가 하나의 친숙한 환경과 단일 브랜드로 함께 작동하도록 작업을 고려하세요. 사용자는 친숙한 환경을 선호하며 조작하는 각 화면에 대한 재학습을 원하지 않습니다. 따라서 Microsoft 소프트웨어 및 서비스의 공통 플랫폼에 구축하세요. 설정된 공통 컨트롤, 제스처, 조작 패턴, 애니메이션 및 공통 인증 및 저장소 클라우드 서비스를 기반으로 사용자 환경을 구축합니다.

즉, 완전히 새로 고안하지 마세요. 혁신은 위대하지만 사용자 환경을 희생해서는 안 됩니다. 또한 모든 앱은 사용자에게 공감을 일으키는 특정 목소리 톤을 전달합니다. 음성에 접근하는 방법을 확인하고 앱에서 음성을 사용하는 방법을 고려하세요. 앱에 적합한 사항을 확인하고 유효성이 입증된 기능을 에뮬레이트하세요.

플랫폼 고려

Microsoft 장치 및 폼 팩터의 에코시스템 전체에서 앱이 작동할 수 있는 방법을 고려하세요. "이 장치의 특성은 무엇인가?"란 질문을 자신에게 던지고 이러한 고유 장점에 맞게 환경을 최적화합니다. 여러 플랫폼을 사용하면 하나의 플랫폼용 빌드에서 불가능한 시나리오에 대한 디자인 기회가 제공될 수도 있습니다.

개요 및 검사 목록

• UI 모델을 사용하세요.
• 앱 계약에 참가하여 시나리오를 완성하려면 다른 앱과 함께 사용하세요.
• 도구 및 템플릿을 사용하여 일관성을 향상시키세요.

브랜드의 시각적 표시에 관계없이 뛰어난 디자인의 원칙이 적용됩니다. 원칙에 다른 디자인은 사용자에게 안정적인 환경을 제공합니다.

관련 항목

Windows 스토어 앱 계획

Windows 스토어 앱용 탐색 디자인

Windows 스토어 앱용 명령 디자인

터치 조작 디자인

Windows 스토어 앱용 UX 지침

유용한 Windows 스토어 앱 만들기

Windows 스토어 앱의 접근성

디자인 원칙 및 언어: 독자적인 견해