모바일디자인에서 미니멀리즘의 미학
by Nick Babich ( translated by Elly )
디자인은 사용자 참여를 이끌어내는 가장 중요한 요소중 하나입니다. 사용자들이 심플한 인터페이스를 선호함에 따라 UI는 매우기본적이고 필수적인 요소만 남겨두는 것이 성공적인 UI 열쇠가 되었습니다. 미니멀리즘은 구조와 기능의 완전한 조합입니다. 명확한 구조는 강한 힘을 가집니다. — 명료한 line, 여유로운 여백 그리고 미니멀한 그래픽 요소들은 혼란스러운 주제를 다룰 때에도 심플하게 보입니다.
가장 미니멀한 디자인은 간결하고 명료하고 지속적으로 사용 가능해야 합니다. 그리고 여러분의 인터랙션 시스템은 이런 명확한 비쥬얼 커뮤니케이션을 통해 사용자들이 문제를 해결하는데 목표를 잡아야 합니다. 왜냐하면 미니멀한 앱이 훌륭한 사용성을 가지고 있기 때문입니다. 쉽게 찾을수 있는 심플한 앱이 좋은 커뮤니케이션을 할 수 있습니다. 미니멀리즘을 구현하고 싶다면 다음을 살펴보세요.
단일 색상 조합
너무 많은 색상들은 부정적 인상을 주지만 단일화 색상체계는 사용자 경험을 개선시킵니다.
여기에 칼러 지표들이 있습니다. 이를 활용하면 칼러 체계 만드는 것이 쉬우니 참고하세요.
특히 초보자에게 유용할 것 같습니다. ;
· 단색 조합 단색조합은 여러 톤, 음영, 그리고 한 채도 내 여러 색상들로 이루어 집니다. 한 색상(HUE)내의 채도(saturation)와 명도(brightness)를 조절함으로써 다양한 칼러와 색상체계를 만들어 낼수 있습니다.
블루 색상 단일 조합 Image credit: Smashing Magazine
Image credit: Dribbble· 유사색 조합 유사색 조합은 색상원형표에서 주위 칼러 3개정도 사용하는 것 입니다. task 우선순위에 따라 유사색을 이용하면 가장핵심task를 강조하고 task 순위도에 따라 이루어 지는것을 시각적으로 보여주기 용이 합니다. (가장 중요한 항목은 가장 선명한 색을 사용하고, 낮은 task 행위들은 더 밝거나 좀더 약한 색상들 칼러로 지정해 줍니다.)
노란색과 오렌지색 음영을 유사색 사용조합으로 예를 들어보겠습니다. Image credit : tuts+
Clear app for iOSBlur 효과
블러 효과는 인터페이스내에서 레이어들과 계층구조 간의 역할 지정을 통해 논리적인 해결책인 미니멀 UI로 떠오르고 있습니다. 이를 테면 블러효과가 레이어된 화면은 사용자가 flow를 이해하기 좋습니다. 또한 디자이너는 다른 메뉴를 사용해보고 화면을 완전히 덮게끔 할수도 있습니다.
야후! 날씨 앱을 살펴 보겠습니다. 야후 날씨앱은 각 날씨 위치에 맞는 멋진 사진을 보여줍니다. 그리고 더 디테일한 정보를 살펴 보기 위해서 탭하면 날씨 데이터가 보여 집니다. —디테일한 날씨 정보는 바로 나타나고 배경은 뒤에 블러처리가 됩니다. 이는 매우 직관적이고 이전 위치로 돌아가는데 이초이상 걸리지 않습니다.
Yahoo! weather app for iOS한개의 앱, 한개의 글자체
여러개 폰트를 사용하면 여러분의 앱은 통일감이 떨어져 보이고 엉성해 보입니다. 한 스크린에서 폰트의 수를 줄이는 것이 타이포그래피 힘을 강화시켜 보일 수 있습니다. 한 앱을 디자인할때 여러글자체가 아닌 weight, style 그리고 size를 조절해서 타이포그래피를 강조했는지 생각해보세요.
일반적으로는 여러분 앱에서 한 폰트만 사용하세요.
여러분의 앱에 사용될 폰트를 고를때, 우려가 된다면 플랫폼 default 기본폰트를 따르는 것이 가장 안전합니다.
-애플은 모든플랫폼에 일괄적으로 샌프란시스코 폰트 패밀리를 사용합니다. (iOS9를 위한 the San Francisco폰트는 SF-UI 라고 불립니다)
-Roboto 와 Noto는 구글안드로이드와 크롬에서 표준 서체입니다.
한 스크린에 사용하는 폰트를 줄이는 것이 타이포그래피를 강조하는 것입니다Dribbble.Data Spotlight
여러분이 어떤 데이터를 강조하고 싶을 때 큰폰트와 색상을 이용해야합니다.
일반적 조합에서는 중립 색상을 사용하고 사용자 행동을 유발하고자 하는데에는 색상을 강조한다면, 초점을 두고자하는 행위를 하게끔 유도할 수 있습니다.
반면에 중성색과 밝은 강조색 조합은 비쥬얼적으로 가장 주목을 끌기 쉬운 색조합입니다. Image credit: Smashing Magazine큰 폰트와 강조된 색상은 부가적인 비쥬얼 힌트소스없이 특정한 영역에 사용자들의 관심을 이끌어냅니다. 이는 정보를 모으기 쉬운 경험입니다.
커진 폰트와 팝칼러는 스크린내 특정영역에 사용자 관심을 이끌어 냅니다. Image credit: Dribbble 라인이 아닌 요소와 여백으로 나누기
line과 divider들은 한 스크린내에서 특정한 영역과 카테고리를 명확하게 나눌때 사용됩니다. 그러나 이러한 요소들을 너무 많이 사용하는 것은 복잡한 인터페이스를 만듭니다.
line과 divider를 덜 쓰는것이 인터페이스를 더 깨끗하고 모던하고 기능적으로 보이게 합니다.
사각형 덩어리, 여백 또는 색상과 같은 방법들로 콘텐츠를 나누는 다른 방법도 있습니다. 구글캘런더 앱은 line대신에 공간과 음영을 사용하여 영역 나눔을 하는 좋은 예입니다.
공간은 비쥬얼적으로 명확하고 캘린더 앱의 개선된 사용성을 제공합니다.아이콘 : 선과 면
아이콘그래픽은 기능과 콘텐츠를 나타내는 비쥬얼 언어입니다. 아이콘들은 심플해야 하며 인지되어 즉시 이해가 되야 합니다. iOS7 때부터 많은 미니멀리스트 UI는 선과 면 아이콘이었습니다. 이 글에서 컨셉 자체에 비판을 하지는 않겠지만, 대신에 우리는 실용적인 면에 초점을 맞추겠습니다. — 같은 아이콘의 선과 면 아이콘입니다.
시계 아이콘(선과 면타입)Image credit: icons8탭바에 있는 아이콘을 보세요. 바 아이콘들은 앱 네 다른 영역으로 이끄는 네비게이션과 같은 역할을 하기 때문에 어떤 방식으로든 해당 영역 아이콘이 강조 되서 잘 보이는 것이 매우 중요합니다. : 활성화되고/선택된 상태임을 완전히 보여줘야 합니다. 이는 탭과 컨트롤 인지를 활성화 시킵니다.
Apple AppStore 탭바. Image credit: viget결론
미니멀리스트 인터페이스와 다른 디자인 기술들이 좋은 디자인을 만드는 방법이지만, 그것 자체가 목표는 아닙니다. 궁극적인 목표는 우리 인터페이스를 단순화하여 더 기능적이고 사용성 높게 만드는 것 입니다. 심플하게 flow를 만들고, 명확하게 시각화하여 디자인을 용서하는 것이 매끄러운 디자인을 만들어 줍니다.
Originally published at babich.biz
translated by Korean Elly
추신
안녕하세요 UX 업계에 종사하고 있는 Elly 입니다.(꾸벅 상냥모드)
제가 받아보는 외국 UX글중에 좋은 글들을 한글로 공유하고자합니다. (한글로 번역을 하면서 좀 더 매끄럽게 전달하기위해서 부분 표현 삭제와 어투등이 수정되었습니다.)
이는 1차적으로 제가 영어에 famillar 하기 위함이고
2차적으로 공유함으로써 여러분과 저가 좀더 풍부해지리라 믿기때문입니다.
감사합니다.
원문 : https://uxplanet.org/the-art-of-minimalism-in-mobile-app-ui-design-b21aa671dd7f#.krhs02ip7
