DOI QR코드

DOI QR Code

A Study on Mobile Application UI Design Components & Design Guidelines -Focused on the Google Material Design Guidelines-

모바일 애플리케이션 UI 디자인 구성 요소와 가이드라인 연구 -안드로이드 구글 머티리얼 디자인을 중심으로-

  • Jung, Dayoung (Hongik University, International Design School for Advanced Studies) ;
  • Kim, Seung-In (Digital Media Design, Hongik University, International Design School for Advanced Studies)
  • 정다영 (홍익대학교 국제디자인전문대학원 디자인학) ;
  • 김승인 (홍익대학교 국제디자인전문대학원 디지털미디어디자인 전공)
  • Received : 2020.01.03
  • Accepted : 2020.05.20
  • Published : 2020.05.28

Abstract

The purpose of this study is to study the elements that make up the interface design of the applicatio, focusing on Android's Google Material Design Guidelines. and propose a way to produce the UI design guide by categorizing it according to form and combination methods. The components provided by the Materials Design Guidelines were disassembled form and attributes, types, and the characteristics. The components of UI design include surfaces, letters, icons, and media, which enable the creation of UI style guides, and the components for the purpose of exploring and communicating information, with different components and rules of use used for the purpose. Based on these results, I would like to propose design criteria for the interface of mobile applications and how to utilize it effectively.

본 연구는 안드로이드의 구글 머티리얼 가이드를 중심으로 애플리케이션의 인터페이스 디자인을 구성하는 요소들에 관하여 연구하고, 형태 및 조합 방식에 따라 분류하여 UI 디자인 가이드 제작하는 방식을 제안하는 데 목적이 있다. 우선 머티리얼 디자인 가이드라인이 제공하고 있는 컴포넌트들을 분해하여 구성 요소들에 대해 분석하고, 형태 및 속성에 따라 구분하여 유형을 나눈 뒤 각각의 특성에 대하여 조사하였다. UI 디자인의 최소 구성 요소로는 표면, 글자, 아이콘, 미디어가 있고 이러한 요소들은 컴포넌트 적용 사례를 수집하여 공통 규칙을 수립하는 방식으로 가이드를 제작하는 것이 효율적이다. 컴포넌트는 목적에 따라 정보 탐색과 알림, 콘텐츠 전달로 분류할 수 있었는데 속성 및 고려해야 할 점이 달라 각각에 맞는 제작 방식을 연구하였다. 이러한 결과는 모바일 애플리케이션의 인터페이스 디자인을 구성하는 데 있어서 효율적 가이드를 제공하는 데 의의가 있으며, 머티리얼 디자인을 바탕으로 하는 UI 디자인의 지침이 될 것으로 기대한다.

Keywords

References

  1. App Annie. (2019). The State of mobile 2019. https://www.appannie.com/kr/insights/marketdata/the-state-of-mobile-2019
  2. J. W. Yun, (2019), Forecast of Global mobile app market. https://www.hankyung.com/it/article/201810187722g
  3. Nielsen KoreanClick. (2017). Analysis of 'GenerationZ' smartphone usage behavior.http://www.koreanclick.com/english/insights/newsletter_view.html?code=topic&id=433&page=1
  4. E. Jegal & D. H. Choi. (2016). Research of User-eXperience(UX) Design for an Android Application. Asia-pacific Journal of Multimedia Services Convergent with Art, Humanities, and Sociology, 6(3), 1-8.
  5. H. R. Lee, J. H. Baek & Y .C .Mun. (2009). Implementation of Mobile System based on LBS using Design Pattern. Journal of the Korean Association of Geographic Information Studies, 12(1), 26-35.
  6. J. Araujo. (2018). Design Systems : benefits, challenges & solutions. https://uxdesign.cc/design-systems-62f648c6dccf
  7. Google. Material design guidelines. https://material.io
  8. Apple. Human interface guidelines. https://developer.apple.com/design
  9. Microsoft. Fluent design system. https://www.microsoft.com/design
  10. IBM. Carbon design system. https://www.carbondesignsystem.com
  11. Shopify. Polaris design system. https://polaris.shopify.com
  12. Atlassian. Design system. https://www.atlassian.design
  13. A. Holst. (2019). Mobile operating systems' market share worldwide from January 2012 to July 2019. https://www.statista.com/statistics/272698/global-market-share-held-by-mobile-operating-systems-since-2009/
  14. Google Design. (2018). Material makes it possible. https://www.youtube.com/watch?v=m1diVY4Uzjc&feature=emb_title
  15. Google. Information of Material design guidelines. https://developer.android.com/guide/topics/ui/look-and-feel
  16. B. Frost. (2016). Atomic design methodology. http://atomicdesign.bradfrost.com/chapter-2