*이 글은 개인적인 학습을 위한 글입니다. 자동번역기의 기계적인 번역과 디자인용어의 번역이 학습에 혼동을 주는 부분이 있어 서툰 영어실력임에도 불구하고, 나와 같은 고충을 겪고 있을 사람들에게 조금이나마 도움이 되었으면 하는 바람으로 작성하게 되었습니다. 수정사항은 감사히 받겠습니다. 

iOS를 위한 디자인

iOS 는 다음과 같은 테마를 담고 있습니다:

  • 존중. UI는 사람들이 콘텐츠를 이해하고 상호작용할 수 있도록 돕는 것이지, 겨루기위해 있는 것이 아닙니다.

  • 명확성.텍스트는 어느 사이즈에서도 읽을 수 있고, 아이콘은 명료하고 정확합니다. 또한 장식은 섬세하고 적절합니다. 명확성에 중점두어져 있는 기능은 디자인의 동기를 부여합니다. 

  • 깊이. 시각적인 계층구조와 현실감 있는 동작은 활력을 주고 사용자들에게 보다 쉬운 이해와 사용의 즐거움을 높여줍니다.

image: ../Art/weather_app_7_2x.png

당신이예전의 앱(App)을 리디자인 하는 것이든 새로운 것을 만드는 것이든, 이와 같은 방법으로 작업에 접근 할 것을 고려해주세요:

  • 첫째, 앱의 핵심기능과 UI를 살펴보고 그 둘의 관련성을 확인합니다.

  • 다음으로,UI 디자인과 사용자 경험을 알리기 위한 iOS 테마를 사용하세요. 불필요한 요소들이 없도록 주의깊게 디테일과 장식을 추가해주세요.

  • 마지막으로,사용자들이 가능한 한 많은 상황에서 앱을 즐길 수 있도록 다양한 장치와 모드에 적용할 수 있는 UI로 디자인해야 합니다.

이러한 과정을 통해서, 선례에 도전할 것을 준비하고, 가정에 의문을 제기하며, 콘텐츠와 기능에 맞추어진 초점이 모든 디자인을 결정하는 이유가 될 수 있도록 제작하세요.

컨텐츠에 따르세요

선명하고 아름다운 UI와 유동적인 모션이 iOS의 경험을 강조 하지만, 사용자의 컨텐츠가 그 중심에 있습니다.

여기에 당신의 디자인이 기능을 향상시키고, 사용자의 컨텐츠에 따르는 것을 확실하게 하는 몇가지 방법이 있습니다.

image: ../Art/weather_focus_2x.png

전체화면을 이용하라. 날씨는 이 방법의 좋은 예시입니다.위치의 현재 날씨에 대한 전체화면을 아름답게 활용한 묘사는 시간당 정보를 위한 여분의 공간에서 가장 중요한 정보를 즉시 전달합니다.

물리적이고 사실적인 것에 대한 시각적 지표를 재검토하라.베젤, 그라디언트, 그림자효과는 콘텐츠를 압도하거나 대립되는 요소로 이어지기도 합니다. 대신 콘텐츠에 초점을 맞추고 UI 가 지원하는 역할을 맡도록 합니다.

image: ../Art/restrain_visual_indicators_2x.png
image: ../Art/embrace_translucency_2x.png

반투명한 UI요소가 뒤의 콘텐츠를 암시하게 하라 . 컨트롤 센터와 같은 반투명한 요소들은 상황을 제공하고, 사용자들이 보다 많은 컨텐츠를 볼 수 있도록 도우며, 무상신호를 보냅니다. iOS에서 반투명한 요소들은 라이스페이퍼를 통해 보는 것과 같은 표현으로 컨트롤 센터 바로 뒤에 콘텐츠들만 흐리게 하고, 나머지 부분들은 흐리게 하지 않습니다.

명확성을 제공하라

명확성을 제공하는 것은 콘텐츠가 당신의 앱에서 가장 우선적이게 하는 또 다른 방법입니다. 가장 중요한 내용과 기능을 명확하고 상호작용하기 쉽도록 만드는 방법이 여기 있습니다.

image: ../Art/use_white_space_2x.png

여백을 많이 사용하라. 여백은 중요한 정보와 기능을 더 뚜렷하고 이해하기 쉽도록 만듭니다. 또한 평온하고 차분한 느낌을 주며, 앱이 더 효율적이고 중점 두어 보이게 합니다.

색상이 UI를 단순화하게 하라. 노트 안의 노란색과 같은 ㅡ 기본색은 중요한 상태를 강조하고 미묘하게 상호작용하고 있는 모습을 나타내줍니다. 또한 앱에 일관된 시각의 테마를 제공합니다. 내장되어있는 앱들은 어둡고 밝은 배경, 모든 색조와도 잘 맞는 깨끗하고 명료한 시스템 색상군을 사용합니다.  

image: ../Art/notes_color_2x.png
image: ../Art/mail_message_fonts_2x.png

시스템폰트를 사용함으로써 가독성을 보장하라. iOS 시스템폰트는 읽기 쉽고 어떠한 사이즈에서도 잘 보이도록 자동적으로 자간과 행간이 조정되어 있습니다. 당신이 시스템폰트를 사용하든 개인용 폰트를 사용하든, 사용자가 다른 글꼴크기를 선택했을 때 당신의 앱이 응답할 수 있도록 동적 유형을 채택해야 합니다.

경계가 없는 버튼을 수용하라. 기본적으로 모든 바의 버튼들은 경계가 없습니다. 콘텐츠 영역에서, 경계선이 없는 버튼은 문맥과 색상, 그리고 상호작용을 나타내기 위한 행동을 요구하는 타이틀을 사용합니다. 그리고 그것의 의미가 통했을 때, 콘텐츠 영역버튼은 얇은 테두리, 혹은 구별가능하도록 색상이 더해진 배경을 표시할 수 있습니다.

image: ../Art/contact_card_2x.png

소통에 깊이감을 사용하라

iOS 계층과 위치를 전달하고 사용자가 화면상의 개체들 사이에서 관계를 이해할 수 있도록 구별된 레이어들 안에서 콘텐츠를 보여줍니다.

image: ../Art/folder_2x.png

반투명의 배경을 사용하고, 그것이 홈 화면에 떠있는 것처럼 보이게 함으로써, 폴더는 그 콘텐츠를 홈화면의 나머지 앱으로부터 분리시킵니다.

미리알림은 다음과 같이 보여짐으로써 레이어 목록을 표시합니다. 사용자가 하나의 리스트를 작업할 때 나머지 리스트들은 화면 하단에 모입니다.

image: ../Art/layered-reminders_2x.png
image: ../Art/cal_year_2x.png

달력은 년, 월, 일을 보여줌으로써 이동했을 때 사용자가 계층구조와 깊이를 느낄 수 있도록 향상된 전환방법을 사용하였습니다. 여기에 표시된 스크롤 되는 연도를 보면서 사용자는 오늘의 날짜를 바로 볼 수 있고, 다른 캘린더 작업을 수행할 수 있습니다.

사용자가 달(month)을 선택했을 때, 년(year) 이 확대되고 달보기가 드러납니다. 오늘의 날짜는 강조되어있고 연도별로 보는 것은 돌아가기 버튼으로 보여집니다. 이렇게하여 사용자가 어디 있는지, 어디로부터 왔는지, 어떻게 뒤로 돌아가는지 알 수 있습니다.

image: ../Art/cal_month_2x.png
image: ../Art/cal_day_2x.png

날짜를 선택하였을 때도 유사한 전환이 나타납니다 : 달 별로 보기는 선택된 날짜의 시간별 보기가 보여지고 화면 상단으로 현재 주(week)를 밀면서 나누어진 상태로 보여집니다. 각각의 전환으로 캘린더는 년,월,일의 계층구조 관계를 강화시킵니다.


'UI Design Basics' 카테고리의 다른 글

Modal Contexts  (0) 2015.04.30
Starting and Stopping  (0) 2015.04.28
Adaptivity and Layout  (0) 2015.04.24
iOS App Anatomy  (0) 2015.04.23
Designing for iOS  (0) 2015.04.22
Posted by jyunipark

댓글을 달아 주세요