One UI Design Guidelines Mobile UX Center Mobile Communications Business Samsung Electronics

Size: px

Start display at page:

Download "One UI Design Guidelines Mobile UX Center Mobile Communications Business Samsung Electronics"

우진 하
5 years ago
Views:

1 One UI Design Guidelines Mobile UX Center Mobile Communications Business Samsung Electronics

2 Index Overview Introduction Architecture 1. Structure 2. Theme 3. Responsive UI 4. Margins and keylines 5. Screen optimization Visual design 1. Icons 2. Color 3. Typography 4. Thumbnail radius Component 1. App bar 2. Expandable app bar 3. Bottom bar 4. Bottom navigation 5. Buttons 6. Slider 7. Dialogs 8. List 9. Search 10. Progress indicator 11. First time use 12. Label toast 13. Navigation bar 14. Edit mode 15. Selection control Visual Interaction Auditory design 1. Principle 2. Sound feedback Accessibility

3 Overview

4 OVERVIEW One UI Design Guidelines 4 Overview Introduction One UI 디자인가이드라인을따르면, One UI 의사용자경험을손쉽게적용하고, 삼성모바일에최적화시킬수있습니다. One UI 를앱에적용하면 One UI 가적용된디바이스내의다른앱들과일관성있는사용자경험을제공할수있게되어, 사용자들이새로운앱도친숙하고자연스럽게사용할수있습니다. One UI 는디바이스내에서의일체화된경험은물론, 여러모바일디바이스간에도통합된경험을추구합니다. 플랫폼이달라지더라도새로학습할필요없이원활하게사용하면서해당디바이스에최적화된경험을제공할수있습니다.

5 Architecture

6 ARCHITECTURE One UI Design Guidelines Structure One UI 디자인가이드에서는 One UI 의특징적인사용성과경험에관련된내용을정의합니다. One UI 는사용자가단말을 자연스럽게사용하고, 중요한컨텐츠에집중하는것을도와주기위한디자인원칙을추가하였습니다. 그외주요화면들과 컴포넌트들의구조, 체계, 인터랙션등은안드로이드원칙을따릅니다 안드로이드의화면과주요컴포넌트의구조 잠금화면앱화면홈화면알림앱바다이얼로그

7 ARCHITECTURE One UI Design Guidelines Structure 보는영역과인터랙션영역의구분 One UI 는핸드핼드 (Hand held) 단말에서사용자가화면안의요소들을쉽게조작할수있게디자인되었습니다. 손가락이닫기쉬운높이를기준으로화면위쪽을보는영역 (Viewing area), 아래쪽을인터랙션영역 (Interaction area) 으로나누었습니다. [ 보는영역 ] 타이틀과같이인터랙션이필요없는컨텐츠위주로배치합니다. [ 인터랙션영역 ] 자주사용하는기능버튼들과탭과같은네비게이션버튼등의컴포넌트들을배치합니다. 사용자의액션을필요로하는다이얼로그도화면아래에배치합니다.

ARCHITECTURE One UI Design Guidelines 8 01.

8 ARCHITECTURE One UI Design Guidelines Structure 포커스블락으로컨텐츠강조 One UI 는화면에서강조하고싶은컨텐츠에사용자의시선이먼저갈수있게포커스블락이라는카드타입의컨테이너를지원합니다. 포커스블락의크게둥글려진모서리는형태적특징으로인한시각적주목효과가있으며, 포커스블락의배경색과화면의배경색과대비를크게주면주목효과를더높일수있습니다. 포커스블록에는텍스트, 이미지, 동영상등여러유형의콘텐츠를담을수있고, 하나의포커스블록에콘텐츠하나를담거나여러개를조합해서담을수도있습니다. 안드로이드의컴포넌트중컨텐츠를담는카드, 이미지리스트, 리스트컴포넌트등에적용할수있습니다.

9 ARCHITECTURE One UI Design Guidelines Theme One UI 에선기본테마와함께야간모드를지원합니다. 어두운환경에서도편안하게폰을사용할수있도록야간모드를함께제공하는것을권장합니다 기본테마기본테마는앱의성격에따라화면배경의색을다르게사용할수있습니다. 밝은색의배경을사용하면화면전체적으로명도대비가적어서편안한시각적경험을제공할수있으며, 글자의가독성향상에도도움을줍니다. 밝은테마

10 ARCHITECTURE One UI Design Guidelines Theme 기본테마 어두운색의배경을사용하면포커스블락을적용한컨텐츠나다이얼로그의주목도를높일수있습니다. 특히단말의베젤이검정색일때, 화면에검정색배경을사용하면베젤과화면의경계가불분명해져서, 화면이보다확장된듯한시각적효과를줄수있고, 베젤과화면의경계선이주는시각적간섭도줄일수있습니다. 어두운테마

11 ARCHITECTURE One UI Design Guidelines Theme 야간모드 야간모드는밤시간이나어두운환경에서단말을사용할때에, 눈부심을줄이고눈의피로를덜어주기위해화면을어둡게바꿔주는테마 ( 모드 ) 입니다. 블랙컬러의배경위에컨텐츠와컨트롤들을배치합니다. 블랙컬러의배경위에올라가는포커스블락이나다이얼로그등에도어두운색을사용하여전체화면을어둡게유지합니다. One UI 에서는모든앱에서사용자가원할때나정해진시간에야간모드로설정할수있게제공하는것을권장합니다. subtext 야간모드

12 ARCHITECTURE One UI Design Guidelines Responsive UI One UI 는폰, 타블렛, 폴더블폰등다양한단말과, 다양한화면크기, 다양한화면비율을지원합니다. 또한 Samsung DeX 환경도지원합니다. 화면의여러요소들과레이아웃은, 화면의크기, 방향, 해상도, 화면비율에따라맞춤형으로 (Adaptive) 변경되어야합니다. 타블렛과폴더블폰과같은큰화면에선컨텐츠가많이보이게디자인하고, Samsung DeX 에선여러개의윈도우가쌓이는구조와윈도우의크기를고려해야합니다. 홈스크린예시 Phone Folderble Tablet DeX 컨텐츠스크린예시 Phone Folderble Tablet DeX

13 ARCHITECTURE One UI Design Guidelines Margins and keylines One UI 는모서리가둥근화면이나엣지스크린을가진단말을고려하여, 여백영역과키라인 (Keyline) 을정의하고있습니다. One UI 에선화면좌우에 24dp 이상의여백을주고, 정보를표시하거나터치입력을받는화면요소들은그안에배치하는것을권장합니다. 정의 단말을잡은손으로인한원하지않는터치입력을방지하기위해, 터치입력을받지않는여백영역을제공합니다. 특히다이얼러와같이거리가먼버튼을눌러야하는레이아웃에서는좌우여백을충분히주어야합니다. 엣지스크린의경우화면요소를선택할때화면의곡면때문에손가락이미끄러지지않도록화면요소를곡면안쪽에배치합니다. 둥근모서리가둥근화면의경우, 화면요소가가려지지않도록곡면안쪽에배치합니다. 24dp 24dp 24dp 24dp

ARCHITECTURE One UI Design Guidelines 14 05.

14 ARCHITECTURE One UI Design Guidelines Screen optimization One UI 는사용자가화면의여러요소들의크기를본인에게최적화시킬수있도록다양한설정기능을제공합니다. 글자가잘보이게크기를조절할수도있고, 화면이보이는배율을크게, 혹은작게조절할수도있고, 화면해상도와홈화면의배열도변경할수있습니다. 글자크기화면크게 / 작게화면해상도홈화면배열

15 Components

16 COMPONENTS One UI Design Guidelines App bar 앱바는현재화면과관련된정보와액션을제공하기위해사용됩니다. 3 1 뒤로가기 3 액션버튼 2 제목 4 검색버튼 5 더보기버튼 제목 제목은앱제목, 페이지제목이나페이지필터가될수있습니다. 글자수가길어제목을모두표시할수없는경우오른쪽에있는액션부터더보기버튼하위로이동할수있습니다. 화면의모드 ( 다국어 / 글꼴 ) 에따라액션의항목이보이거나숨겨질수있으며, 이경우도위원칙에따라액션버튼이표시됩니다. 액션버튼 액션버튼에는아이콘을사용하는것을권장합니다. 단, 아이콘으로표현하기어려운메뉴들은텍스트버튼을사용합니다. 액션버튼은제목을포함하여 3 개이하로보여주는것이좋습니다. 만약현재화면에서가능한액션이없다면표시하지않습니다. 아이콘예시 텍스트버튼예시

17 COMPONENTS One UI Design Guidelines App bar 더보기버튼 더보기버튼내의각메뉴는실행중인앱이나화면에서선택된요소에영향을줄수있는옵션입니다. 더보기항목중켜기 / 끄기특성이있거나토글액션이필요한경우체크박스를통해제공할수있습니다. 플로팅버튼 / 액션버튼으로제공되지않은나머지메뉴는더보기에서제공합니다. 스피너 기본상태에서스피너는현재선택된값을보여줍니다. 스피너를선택하면가능한모든값을드롭다운메뉴로보여줍니다. 드롭다운메뉴외부영역을선택하면스피너를닫을수있습니다.

18 COMPONENTS One UI Design Guidelines Expandable app bar 확장가능한앱바는확장되거나접힌두가지상태를가지며, 중간에걸쳐진형태는존재하지않습니다. 확장된상태에서위쪽으로 스크롤하면접히고, 접힌상태에서아래쪽으로스크롤하면확장됩니다. 화면전체를활용하여콘텐츠를넓게보고싶은경우 앱바를숨김설정할수있습니다. 폰적용예시 타블렛적용예시 확장되거나접힌상태에서의제목은반드시일치할필요는없으며, 확장된상태에서넓은영역에해당화면에대한유용한정보를줄수있습니다.

19 COMPONENTS One UI Design Guidelines Expandable app bar 폰의경우가로모드일반화면에서확장동작은지원하지않습니다. 멀티윈도우상황에서도스크린너비 480 미만의경우가로, 세로모드둘다지원하지않으며, 480 이상인경우가로, 세로모드모두지원합니다. 단, 폴더블, DeX 의경우스크린너비값에 상관없이확장가능한앱바를적용할수있습니다. 일반화면 스마트폰 세로 가로 태블릿 세로 가로 확장가능한앱바 적용 미적용 적용 적용 멀티윈도우 SW480 세로 가로 SW480 세로 가로 확장가능한앱바 미적용 미적용 적용 적용

20 COMPONENTS One UI Design Guidelines Expandable app bar 확장가능한앱바동작케이스 앱바기본상태의확장 / 접힘여부와상관없이아래로내리거나위로올리는동작으로앱바영역의크기조절이가능함을의미합니다. [ 첫번째단계화면 ] 탭 / 검색창 / 기본줄어든상태의앱바화면모두확장가능한앱바를지원합니다. 기본줄어든상태의앱바예시 검색창포함앱바예시

21 COMPONENTS One UI Design Guidelines Expandable app bar 확장가능한앱바 [ 두번째단계이하화면 ] 동작케이스두번째단계이하화면의경우접힌상태가기본이지만, 확장될수있는속성은가지고있습니다. 리스트 / 격자보기, 자세히보기, 검색결과, 다중선택모드에서도확장동작이가능합니다. 자세히보기화면앱바예시 검색창포함앱바예시

22 COMPONENTS One UI Design Guidelines Expandable app bar 확장가능한앱바미동작케이스 아래와같은경우확장가능한앱바는동작하지않습니다. 키보드사용이주된생성화면의경우단, 간단한문자입력을위한화면의경우확장가능 컨트롤러등을사용하여한화면안에꽉차게구성하는경우 이미지, 비디오와같이확장가능한앱바사용시사용자의콘텐츠가잘리는경우 화면내별도의상하스크롤이필요한요소가포함된경우

23 COMPONENTS One UI Design Guidelines Expandable app bar 앱진입시 첫번째메인화면진입시에는앱바가확장된상태로표시됩니다. 두번째단계이하화면에서는앱바가접힌상태로표시되고, 아래로내리는동작으로앱바를확장할수있습니다. 단, 두번째단계이하인경우도확장된상태가유용하다고판단되는경우에는확장가능한앱바를기본으로제공합니다. 이전값으로이동뒤로가기뒤로가기

24 COMPONENTS One UI Design Guidelines Expandable app bar 스냅 (Snap) 위아래스크롤중중간지점에서손가락을뗄경우손가락을떼는시점에임계점을넘는지여부에따라확장과접힘상태가결정되어화면이스냅됩니다. 중간지점에서손가락뗄때스크롤임계점이상? 중간지점에서손가락뗄때스크롤임계점이상?

25 COMPONENTS One UI Design Guidelines Expandable app bar 스크롤멈춤 리스트 / 격자보기등의화면이스크롤동작할때리스트중간에서아래쪽으로스크롤해서최상위리스트로이동하는경우해당화면구조의기본확장 / 접힘여부에따라스크롤멈춤동작여부가결정됩니다. 사용자가해당화면에진입하여보게되는화면을기준으로리스트중간에서스크롤동작시멈춰지는위치가결정됩니다. [ 예시 1] 기본접힌상태인화면의경우리스트중간에서스크롤시최상위리스트에서스크롤멈춤으로동작합니다. 사용자가화면에진입해서보게되는화면이줄어든앱바인상태 리스트중간스크롤 최상위리스트에서스크롤멈춤 최상단리스트에서아래쪽스크롤 동작시확장된형태로제공

26 COMPONENTS One UI Design Guidelines Expandable app bar 스크롤멈춤 [ 예시 2] 기본확장상태인화면의경우리스트중간에서스크롤시스크롤멈춤이적용되지않고확장된앱바화면으로이동합니다. 사용자가화면에진입해서보게되는화면이확장가능한앱바인상태 리스트중간스크롤 스크롤멈춤없이바로확장상태로이동

27 COMPONENTS One UI Design Guidelines Expandable app bar 검색창 검색의사용성이중요한앱인경우검색창을화면에표시할수있습니다. 이때리스트를스크롤하면검색창은사라졌다가다시나타납니다 리스트스크롤과함께검색창숨김

28 COMPONENTS One UI Design Guidelines Expandable app bar 폰적용예시 텍스트 ( 정렬 : 중앙 ) 화면높이의 39.76% 타블렛적용예시 텍스트 ( 정렬 : 중앙 ) 화면높이의 18.78%

29 COMPONENTS One UI Design Guidelines Bottom bar 중요도가높은액션의경우하단바에우선적으로제공합니다. 하단바에는아이콘과텍스트가결합된형태로최대 5 개항목을제공합니다. 본문영역의정보량에따라위아래스크롤시보여주고숨기는동작이가능합니다. 하단바에는더보기를제공하지않고, 항목을좌우스크롤가능하게제공하지않습니다. 또한키보드입력과연관있는항목 ( 취소, 완료, 저장, 다음등 ) 을제외하고키보드위로바를위치시키지않습니다. 폰적용예시 태블릿적용예시

30 COMPONENTS One UI Design Guidelines Bottom bar 액션을위한하단툴바와네비게이션을위한하단탭은정의및동작에차이가있습니다. 상세보기 / 액션화면앱바내액션버튼 하단에중요도높은액션버튼배치 하단툴바 리스트 / 격자보기브라우징이주목적인화면 상단에액션버튼배치 툴바가아닌하단탭

31 COMPONENTS One UI Design Guidelines Bottom navigation 메인탭 하단네비게이션바는메인탭을통해각탭별로최상위화면을전환하는데사용됩니다. 각항목은별도의뷰를가지고있어야하며리스트상하스크롤시에도탭은항상표시됩니다. 텍스트형태로 4 개이하항목 ( 최대 5 개 ) 으로제공하는것을권장하며하단탭의명칭으로화면제목을구성합니다. 탭항목에더보기버튼은제공하지않으며본문을좌우로미는동작으로탭간이동은지원되지않습니다. 또한키보드위로탭을제공하지않습니다. [ 폰 - 세로보기적용예시 ] 메인탭제공화면의경우앱제목이생략되며메인탭이해당앱의대표역할을하는경우메인탭의명칭을상단제목으로제공합니다.

32 COMPONENTS One UI Design Guidelines Bottom navigation 메인탭 [ 태블릿 - 가로분할보기적용예시 ] 가로보기화면에서도항목간격에대한최대값을지정하여일정간격이상벌어지지않도록제공합니다. 여백 w=1 w=1 여백

33 COMPONENTS One UI Design Guidelines Bottom navigation 보조탭 보조탭은현재보여지는화면의카테고리를나누는경우에사용됩니다. 보조탭은텍스트형태로상단에서제공되며고정상태혹은 5 개이상의경우스크롤가능한형태로제공될수있습니다. 본문을좌우로미는동작을통한탭간이동을지원합니다. [ 폰적용예시 ]

34 COMPONENTS One UI Design Guidelines Bottom navigation 탭문자열 하단네비게이션탭의문자열은기본폰트크기기준으로한화면에모든탭을표시해야하고예외적으로스크롤가능하게적용할수있습니다. 1. 기본폰트크기에서좌우밀기동작시흔들림없는고정상태로제공합니다. 2. 다국어변경시에도기본폰트크기기준으로고정상태로제공합니다. 3. 스크롤가능하지않게하기위해각탭은 N 글자수이하로번역및축약하여제공합니다. 단, 하단탭에서축약된문구일지라도앱바에서는전체문자열로표기하고, 가로모드로전환하거나태블릿에서는전체문자열로표기합니다. 4. 예외케이스로, 큰글자적용으로인해글자가탭영역을불가피하게초과하는경우스크롤가능하게적용합니다. [ 폰적용예시 ] 세로보기 가로보기

35 COMPONENTS One UI Design Guidelines Buttons 플랫 (Flat) 버튼과레이즈드 (Raised) 버튼을상황에맞게선택적으로사용합니다. 한화면에플랫버튼과레이즈드버튼을혼용하여사용하지않습니다. 버튼사용예시 [ 플랫버튼사용예시 ] 플랫버튼은툴바, 다이얼로그등에서불필요한레이어를피하기위해사용합니다. [ 레이즈드버튼사용예시 ] 레이즈드버튼은복잡한화면에서놓칠수있는기능을강조하기위해사용합니다. 대부분플랫레이아웃에외곽색상을더해표시합니다. 레이즈드버튼은본문내텍스트, 이미지의조합으로인해버튼을구분하기어려울때사용합니다.

COMPONENTS One UI Design Guidelines 36 06. Slider 사용자는슬라이더를통해특정값범위내에서설정을변경할수있습니다.

36 COMPONENTS One UI Design Guidelines Slider 사용자는슬라이더를통해특정값범위내에서설정을변경할수있습니다. 볼륨, 화면밝기등을조절하는데사용할수있으며사용자가선택한변경값에따라즉시피드백을제공합니다. 상태별슬라이더 일반 클릭 포커스 비활성화 [ 밝기조절예시 ] [ 볼륨조절예시 ]

37 COMPONENTS One UI Design Guidelines Dialog 사용자의액션을필요로하는다이얼로그팝업은하단에서제공합니다. 사용자가액션을할수없는경우 ( 예시 : 진행중로딩만표시되고취소불가 ) 에는화면의중앙에서제공합니다. 드롭다운의경우터치된위치에서제공합니다. 정보의가치가낮은항목을삭제할경우확인팝업없이즉시삭제합니다. ( 예시 : 사용자콘텐츠손실이없는경우, 재생성 ( 원복 ) 이쉬운경우 ) 기능실행시기능에대한단순한설명이나피드백을주는팝업은제공하지않습니다. ( 예시 : 모든메시지읽음확인팝업 ) 팝업내용의중요도에따라최초 1 회만제공할지항상제공할지에대한결정이필요합니다. 중요한팝업인경우항상제공하며최초 1 회의성격을가진팝업사용은지양합니다. ( 법률정보제외 ) 제목 / 설명 / 버튼조합예시

38 COMPONENTS One UI Design Guidelines Dialog 선택활동예시 날짜 / 시간선택예시

COMPONENTS One UI Design Guidelines 39 07. Dialog 상황별메뉴예시 연관된옵션에대한상황별메뉴팝업은리스트 / 격자보기에서탭 & 홀드시제공합니다.

39 COMPONENTS One UI Design Guidelines Dialog 상황별메뉴예시 연관된옵션에대한상황별메뉴팝업은리스트 / 격자보기에서탭 & 홀드시제공합니다. 이때제목없이드롭다운으로제공하는것을권장합니다. 색상선택예시 두가지형태의색상선택기를제공합니다. 바형태로제공하여현재작업하고있는이미지를보면서동시에색상을선택할수있도록하거나더상세한색상을원할경우고급색상선택기를통해선택할수있습니다.

40 COMPONENTS One UI Design Guidelines Dialog 폰적용시 최소너비 100% 최소너비 50.56% 타블렛적용시 최소너비 60% 최소너비 37.5%

41 COMPONENTS One UI Design Guidelines List 리스트는수직적으로배열된여러개의아이템을하나의연속적인요소로표시합니다. 폰적용시 타블렛적용시 X X = 세로보기모드너비

42 COMPONENTS One UI Design Guidelines List 제목 리스트내본문중제목영역은한줄로제한하며, 보조텍스트는글자수의제한은없습니다 제목 보조텍스트 1 2 부제목 필요시그룹핑된리스트항목들에대한부제목을제공할수있습니다.

43 COMPONENTS One UI Design Guidelines List 개수 이메일, 메시지등콘텐츠를포함하는리스트의경우하단에리스트의총개수를표기하는카운터영역을제공합니다.

COMPONENTS One UI Design Guidelines 44 09. Search 많은양의정보중에서사용자가원하는콘텐츠를빠르게찾을수있게하기위해검색기능을지원합니다.

44 COMPONENTS One UI Design Guidelines Search 많은양의정보중에서사용자가원하는콘텐츠를빠르게찾을수있게하기위해검색기능을지원합니다. 사용자가검색어를입력하기전에최근입력한검색어나자주사용된조건을기반으로추천항목들을보여주고, 자동완성기능을제공함으로써더욱만족스러운검색경험을제공할수있습니다. S Finder 리마인더검색예시

COMPONENTS One UI Design Guidelines 45 10. Progress indicator 진행표시기는특정액션의진행상황을나타낼때사용합니다. 동작완료및진행사항을알수있을때는진행상태바를사용합니다.

45 COMPONENTS One UI Design Guidelines Progress indicator 진행표시기는특정액션의진행상황을나타낼때사용합니다. 동작완료및진행사항을알수있을때는진행상태바를사용합니다. 진행상태바예시이메일 현재작업에영향을주지않도록전체화면을가리지않고아래와같이앱바등제한된영역을통해제공하는것을권장합니다. 진행상태서클예시 WiFi 진행상태서클은동작이즉시실행되지못하고일정시간이상걸릴때피드백을주기위해사용하나동작이완료되는시간을알수없을때에한해최소한으로사용하는것이좋습니다.

COMPONENTS One UI Design Guidelines 46 11.

46 COMPONENTS One UI Design Guidelines First time use 사용자가앱에처음으로진입했거나기능을실행했을경우시작 (Welcome), 불러오기 (Loading), 항목없음페이지를제공할수있습니다. 첫진입화면케이스 [ 시작페이지 ] 사용자에게앱에대한간략한설명이나법적인고지가필요한경우시작페이지를제공합니다. [ 불러오기 ] [ 항목없음 ] 앱실행시불러오는시간이걸릴경우로딩페이지를제공합니다. 보여줄수있는항목이없는경우새로운항목을추가하기위한바로가기버튼이나상태를표시하는문구를제공합니다.

47 COMPONENTS One UI Design Guidelines Label toast 라벨토스트를통해텍스트가없는아이콘타입구성요소에대해추가정보를제공할수있습니다. 해당구성요소위에서탭 & 홀드동작으로텍스트설명을제공합니다. 텍스트없이아이콘만으로구성된경우, 아이콘과텍스트혹은텍스트만으로구성된요소중화면상의제약에의해텍스트크기를고정할수밖에없는요소에대해적용합니다. 이경우, 시스템폰트값과관계없이모든화면에서제공합니다. 수초가지나거나사용자가화면을터치하면사라지게됩니다. 라벨토스트제공중토스트외영역을선택했을때해당영역에대한동작을바로실행합니다. 별도의동작이없는상태표시줄, 텍스트로만이루어진버튼, 아이콘과텍스트결합버튼중큰사이즈폰트적용이가능한경우는적용하지않습니다. 탭 & 홀드를다른동작으로사용하는앱의경우도앱지정동작을우선으로하여라벨토스트를표시하지않습니다.

48 COMPONENTS One UI Design Guidelines Navigation bar 네비게이션바는앱디자인에맞춰불투명, 반투명, 투명 3 가지종류중하나를적용합니다. 투명과반투명은설정및테마에영향을받지않습니다. 16:9 비율상태에서는항상검정색으로표시됩니다. 배경설정 기본 테마적용 어두운테마 당사테마적용앱 밝은테마 어두운테마 당사테마미적용앱 밝은테마 그외미지정앱 타사앱

49 COMPONENTS One UI Design Guidelines Edit mode 편집모드는실시간저장이불가능하거나변경사항을취소할수있는화면을말하며, 사용자트리거 ( 저장 / 완료 ) 로해당사항을반영합니다. 폰적용예시 확인버튼은하단에제공합니다. 단, 가로보기에서는본문영역이줄어드는것을방지하기위해상단에제공합니다. 세로모드 가로모드 폰 키보드적용예시 키보드제공시키보드위로확인버튼을제공합니다. 세로모드 가로모드

50 COMPONENTS One UI Design Guidelines Edit mode 태블릿적용예시 [ 신규항목생성시 ] 세로보기에서는전체보기로제공합니다. 가로보기에서는오버레이팝업으로제공하며, 위치는가운데로정렬합니다. 오버레이팝업의외곽지역을탭할경우뒤로가기와동일하게동작합니다. 제목, 액션등은가로와세로모드에서동일하게제공하는것을권장합니다. X X = 세로보기화면너비 [ 기존항목편집시 ] 보여지는상황과편집될때의상황은최대한유사하게제공합니다. 분할보기에서편집은해당되는영역에서제공하고, 신규추가의경우전체화면이나오버레이팝업형태로제공합니다. 편집과무관한영역은어둡게처리하며, 어두운영역터치시에는뒤로가기와동일하게동작합니다.

51 COMPONENTS One UI Design Guidelines Selection control 옵션메뉴에서편집버튼으로직접진입하거나여러개의아이템중하나를길게누르면선택모드로진입합니다. 선택모드진입전에는상황별메뉴를보여주지않습니다. 선택모드에진입하면앱바와툴바는선택모드로변경됩니다. 선택모드에서는선택된아이템에따라액션항목이변경됩니다. 선택된항목의수는앱바에숫자로표시됩니다. 앱바의라디오버튼을선택하면모두선택으로동작합니다.

52 COMPONENTS One UI Design Guidelines Selection control 선택모드진입시액션바제공시점 1. 편집버튼을통해선택모드로진입하는경우편집버튼이선택되는시점에액션바를제공합니다. 2. 길게누르기로진입하는경우손가락을떼는시점에 ( 항목선택이완료된후 ) 액션바를제공합니다. - 하단콘텐츠가려짐이슈로인해, 화면하단에위치한콘텐츠에대해선택모드에진입하여해당항목이선택되었음을시각적으로보여준뒤손가락을떼는시점에액션바를제공합니다. - 진입후손가락떼기전까지연속된스크롤을통해항목선택중인경우스크롤을완료하고손가락을떼는시점에액션바를제공합니다. - 일반화면에서의탭 (Tab) 에서는액션바를표시하지않습니다. 선택된항목이없는경우하단액션바는표시하지않습니다. 손가락떼는시점에표시

53 COMPONENTS One UI Design Guidelines Selection control 선택모드진입시인터랙션 선택모드에서검색창사용시리스트를움직이지않고리스트레이아웃을유지한상태로선택모드에진입합니다.

54 Visual design

55 VISUAL DESIGN One UI Design Guidelines Icons 명확한메타포 아이콘은쉽게인지되고, 의미하는바와기능을쉽게이해하기쉽게디자인되어야합니다. One UI 의아이콘은사용자들에게익숙하고명확한메타포를사용합니다. 단순하고모듈화된형태 복잡한형태나많은종류의형태가사용되면한눈에알아보기가어렵습니다. One UI 의아이콘은형태를단순화하고, 같은형태를반복해서사용하여쉽게인지될수있도록디자인합니다.

56 VISUAL DESIGN One UI Design Guidelines Icons 구성방식 동일한집짓기블록 (building block) 을이용해다양한모양의집을짓는것처럼아이콘디자인에서도동일한구성요소를사용해서일관성을향상시킵니다. 부드러움과예리함 One UI 의인터페이스에서전반적으로둥근형태를사용하고, 아이콘에서도이에어울리는둥근획을사용합니다. 그러나획의모서리는각을살려두어둥근형태와대비를이루며디테일을표현합니다.

57 VISUAL DESIGN One UI Design Guidelines Icons 아이콘컬러앱아이콘은각기능에어울리는컬러를사용하고, 서로조화를이루는색조의컬러팔레트를사용, 시각적일관성을높입니다. 앱에서는사용하는컬러는아이콘과같은컬러을다른톤으로사용합니다. [ 앱아이콘컬러 ] Primary Color Secondary Color Primary Color Secondary Color Primary Color Secondary Color

58 VISUAL DESIGN One UI Design Guidelines Icons One UI 의앱아이콘

59 VISUAL DESIGN One UI Design Guidelines Color 안드로이드의 Material theme 은카데고리화된컬러팔레트시스템을제공하여, 한카데고리의컬러값을변경하면같은카테고리에속하는화면요소들의컬러값이한꺼번에변하게할수있습니다. 컬러팔레트시스템을잘이용하여앱을설계하면, 앱의스타일을쉽게변경할수있습니다. 색상카테고리 주요색상 어두운주요색상 제어활성화색상 앱아이콘, 플로팅액션버튼, 입력영역, 선택된아이템등 앱바텍스트, 텍스트버튼, 다이얼로그버튼, 아이템없음텍스트등 체크박스, 라디오버튼, 스위치등 One UI 컬러팔레트의활용예 Primary #0074d4 Primary #15b76d Primary dark #109e5dv Primary dark #0074d4 Color control active #0bc26e Color control active #4297ff White #fafafa Black # White #fcfcfc Background # Black # Decline #f64141 시스템 전화

60 VISUAL DESIGN One UI Design Guidelines Color 컬러를사용할때는각컬러가가지고있는의미와특성을고려하여, 컬러를적용하려는요소가가진의미와어울리는컬러를사용합니다. 컬러는보통긍적적인의미와부정적인의미를모두가지고있으며문화권에따라의미의차이가있음을고려해야합니다. 분류 컬러 빨간색 경고, 위험, 금지, 따뜻함, 강함, 열정 초록색 안전함, 평화로움, 좋음 (Good), 자연, 환경, 풍부함 파란색 효율 (Efficiency), 지능적 (Intelligence), 평온함

61 VISUAL DESIGN One UI Design Guidelines Typography One UI 에서제목, 부제목, 텍스트버튼, 탭컴포넌트에사용되는단어와문장의첫글자는대문자, 나머지글자는소문자로표기합니다. [ 이전 ] [ 변경 ] 앱바 앱바 다이얼로그버튼 다이얼로그버튼 메인탭 메인탭 레이즈드버튼 레이즈드버튼

62 VISUAL DESIGN One UI Design Guidelines Typography One UI 는기본적으로 Roboto 폰트를사용합니다. 각컴포넌트에서폰트크기는아래와같이적용하는것을권장합니다. Roboto 글꼴집합 분류 폰트스타일 폰트크기 최소폰트크기가시성을위한권장값

63 VISUAL DESIGN One UI Design Guidelines Thumbnail radius 포커스블락이나이미지썸네일등에모서리를둥글게처리한블락을사용할때, 화면배열과사용처에따라아래와같이반경값 (Thumbnail radius) 을권장합니다. 형태 = 직사각형 Radius=26dp 형태 = 직사각형 Radius=26dp 형태 = 직사각형 Radius=20dp 형태 = 직사각형 Radius=12dp

64 VISUAL DESIGN One UI Design Guidelines 64 Visual interaction

65 VISUAL INTERACTION One UI Design Guidelines Visual interaction principle 비쥬얼인터랙션은사용자가화면요소들의구조와기능을이해하기쉽도록도와주고, 사용자의행동을유도할할수있습니다. 움직임은끊김없이부드럽게연결되고, 정교하고유려하게디자인되어야합니다. Intuitive 화면요소들의구조와기능의이해를돕고, 사용자의행동을유도할수있게합니다. [ 예시 1] 카드가세로로쌓인구조에서는카드가세로방향으로이동하도록디자인되었습니다.

66 VISUAL INTERACTION One UI Design Guidelines Visual interaction principle Intuitive [ 예시 2] 앱은가로방향으로병렬적으로쌓여있는구조이기때문에, 앱화면을이동할때에는가로방향으로이동하도록디자인되었습니다 최근앱잠금화면현재앱홈화면 4

67 VISUAL INTERACTION One UI Design Guidelines Visual interaction principle Intuitive [ 예시 3] 다이얼로그는손이닿기쉽도록화면아래쪽에서내비게이션바위로올라오고, 아래로내려가면서사라집니다.

68 VISUAL INTERACTION One UI Design Guidelines Visual interaction principle Seamless 손의움직임을따라자연스럽게움직이고, 화면전환이끊김없이부드럽게연결되어야합니다. [ 예시 1] 확장가능한앱바는손가락의움직임을따라확장 / 수축되면서보여지는정보가달라집니다 0% 28% 50% 100%

69 VISUAL INTERACTION One UI Design Guidelines Visual interaction principle Emotional 화면요소들의움직임과트랜지션효과를정교하고유려하게디자인합니다. [ 예시 1] 탭버튼을선택할때선택된탭의텍스트레이블과하단의점선의움직임과버튼전체에적용되는 Ripple effect 는손가락이화면에붙었다가떨어질때그움직임에유기적으로반응하여손맛을느껴지게합니다. 이를통해탭이동을명시적으로알려주는것은물론, 손맛이라는감성을전달합니다.

70 VISUAL DESIGN One UI Design Guidelines 70 Auditory design

71 AUDITORY DESIGN One UI Design Guidelines Principle UX 에서사운드는시각정보를보조할수있는중요한정보전달수단입니다. 시스템이나앱의상태를상태에대한정보를주거나인터렉션에대한피드백을전달하는데소리를이용하여시각적인경험을보조할수있고, 때로는시각정보가부족한상황에사운드를이용해정보를효과적으로전달할수있습니다. 사운드디자인원칙 1. 일관성있게사용 사운드피드백은적절한곳에서일관성있게사용해야합니다. 예상치못한곳에서제공되는사운드는사용자를혼란스럽게하고시스템을이해하고예측하기어렵게합니다. 2. 긍정적인사운드피드백제공 목적을달성하고과제를완료한시점에긍적적인사운드피드백을제공하면, 사용자는보다좋은경험과그의미를잘기억하게됩니다. 3. 반복적인사운드사용지양 청각적인자극은시각적인자극보다더사용자를성가시게할수도있기때문에, 아무리좋은사운드라도과도하게사용하거나동일한사운드를반복해서듣게해서는안됩니다. 예를들어사진을업로드할때의사운드피드백은, 사진이업로드되는동안반복적으로사운드피드백을주는것보다업로드가완료되는시점에한번만피드백을주는것이더현명합니다.

72 AUDITORY DESIGN One UI Design Guidelines Sound feedback 피드백 사운드피드백은사용자가시스템이나앱에전달하는행동에대한확신을주고, 그결과를이해하고예측하는데도움을줍니다. 예를들어전화앱에서 통화 버튼을눌렀을때 통화연결음 을제공함으로써, 사용자에게전화발신이성공적으로되었음을알려주고상대방과통화할준비를하도록도와줍니다. [ 통화연결, 통화종료 ] 멜로디의상행을통해통화가연결되었음을명확히인지할수있게하고, 통화종료시에는멜로디의하행으로연결해제를명확히인지할수있게합니다. 전화연결 전화종료 [H/W 볼륨키를이용한벨소리음량조절 ] 현재벨소리의음량수준을명확히알수있도록음량수준에따라제공하며, 단음형태의소리로제공합니다. 음량조절 [ 유선 / 무선충전의시작 ] 유선 / 무선충전기와연결을한뒤, 충전이시작됨을알수있도록, 상행의멜로디로제공합니다. 충전기연결

73 AUDITORY DESIGN One UI Design Guidelines Sound feedback 알림과경고사운드는즉각적인주의를끌거나환기시키는데중요한역할을할수있습니다. 특히사용자가어떤일에집중하고있을때, 인지적인간섭을적게하여작업몰입상태를깨지않고필요한정보를전달할수있습니다. [ 통화중알림을받는경우 ] 통화에방해가되지않으면서도인지성을높이기위해 4 번의반복된톤을사용하며, 통화음량과같은레벨로제공. 통화중알림 [ 무음모드에서소리모드로전환 ] 소리모드로전환되었음을인식할수있도록해야하며, 모드가실행됨을알리는상행멜로디로제공. 무음모드종료 브랜딩과아이덴티티독창적이고일관된사운드톤을적용하여브랜드이미지와아이덴티티를나타낼수있습니다. One UI 사운드는은하계느낌을표현하는톤과함께자극적이지않은온화한음색으로 One UI 시스템의개성을표현하고일관된청각적경험을전달합니다.

74 AUDITORY DESIGN One UI Design Guidelines 74 Accessibility

75 ACCESSIBILITY One UI Design Guidelines Principle One UI 는신체적인상황이나성별에관계없이누구나동등하고배려깊은사용자경험을지향합니다. One UI 의접근성은 WCAG (Web content accessibility guideline) 준수를위해노력합니다. 접근성디자인원칙 1. Consideration 사용자의입장이되어세밀하게고려합니다. 삼성은모든사용자가더욱쉽게제품을사용할수있도록고민합니다. 다양한방법론의리서치를진행하여보다가까이에서사용자의목소리를귀담아듣고, 사용자를진심으로이해하고자노력합니다. 제품사용에취약한사용자들도편리하게삼성의제품을사용할수있도록, 사용자의입장을세밀하게고려하여제품개발에적용합니다. 2. Comprehensiveness 모두를위한, 차별없는디자인을추구합니다. 삼성은모든사용자가신체적제약에구애받지않고제품의기능을사용할수있도록차별없는디자인을추구합니다. 그어떤사용자도제품을사용하는데소외되지않도록, 제품기획에서부터개발, 검증까지모든단계에서장애를가진사용자의유형별로고려해야할요소들을체계화한디자인원칙과가이드라인을가지고일합니다. 3. Coherence 제품의구분없이동등한접근성을제공합니다. 삼성의제품들은신체적제약이있는사용자들도편리하게사용할수있도록다양한접근성기능을제공하고있습니다. 또한지속적인연구개발을통해삼성이제공하는모든제품군을동등한수준으로편리하게사용할수있도록접근성기능을확장해나가고있습니다. 4. Co-creation 함께만듭니다. 삼성은각분야의전문가들로구성된접근성전담조직을운영하여장애를가진사용자들도당사의제품과서비스를어려움없이사용할수있도록교육하고있습니다. 장애인임직원, 전문연구기관, 장애인커뮤니티와의협업으로사용자에게보다더유용한접근성기능들을제품에적용하기위해노력합니다.

76 ACCESSIBILITY One UI Design Guidelines Vision 접근성기본영역은다음과같습니다. 시각 : 전맹, 저시력, 색각이상자들을위한 Voice assistant 및다양한시인성향상설정을통해시각적인도움을제공합니다. 청각 : 청력에이상이있는사람들이제품을잘사용할수있도록청각보조설정을제공합니다. 입력및동작 : 삼성스위치제어, 보조메뉴등의기능을통해지체장애인의원활한제품사용을돕습니다. 시각 [ 텍스트 ] 텍스트캡션과이미지를제외하고, 보조기술없이도콘텐츠또는기능이손실되지않게최대 200% 까지텍스트크기를조정할수있도록권장합니다. 텍스트크기를 200% 이상증가 글자크기 ( 기본 0 에서 8 단계로조절 )

77 ACCESSIBILITY One UI Design Guidelines Vision 시각 [ 색상 ] 정보를전달하거나, 동작을유도하는등의시각적수단으로색상을단독사용하지않도록권장합니다. 기본 색상조정 - 흑백 [ 대비 ] 전경색과배경색의명도대비비율은 4.5:1 이상이되도록권장합니다. 폰트크기 (dp) Regular 폰트 Bold 폰트 ~12 Minimum 4.5:1 Minimum 4.5:1 13 Minimum 4.5:1 Minimum 4.5:1 14 Minimum 4.5:1 Minimum 3:1 17 Minimum 4.5:1 Minimum 3:1 18 Minimum 3:1 Minimum 3:1 19~ Minimum 3:1 Minimum 3:1 작은텍스트 - 배경과전경의대비가최소 4.5:1 을준수하는것을강하게권장합니다. 큰텍스트 (Normal : 18dp 이상, Bold : 14dp 이상 ) : 배경과전경의대비가최소 3:1 을준수하는것을강하게권장합니다.

78 ACCESSIBILITY One UI Design Guidelines Vision 시각 [ 버튼강조 ] 버튼이잘보이도록색상을더해표시합니다. 버튼임을인지하고판단성과정확성을높일수있도록도와줍니다. 버튼강조설정

ACCESSIBILITY One UI Design Guidelines 79 03. Hearing 청각 [ 소리감지 ] 청각장애인이특정한소리를감지하지못할경우에대비하여소리인식시시각적, 진동피드백을제공합니다.

79 ACCESSIBILITY One UI Design Guidelines Hearing 청각 [ 소리감지 ] 청각장애인이특정한소리를감지하지못할경우에대비하여소리인식시시각적, 진동피드백을제공합니다. [ 모든소리끄기 ] 청력이없는사용자가디바이스에서예기치못하게발생하는소리로인해주변사람들에게피해를주는것을방지합니다. [ 좌우소리균형 ] 좌우청력이다른장애인을위하여이어폰사용시좌 / 우음량의비율을조절할수있는기능을제공합니다. [ 모노오디오 ] 한쪽귀의청력이없는사용자를위하여이어폰사용시스테레오 / 모노로변경하는기능을제공합니다

80 ACCESSIBILITY One UI Design Guidelines Interaction and dexterity 입력및동작 [ 삼성스위치제어 ] 지체장애인의원활한디바이스사용을위해입력방법을등록하여사용할수있도록인터페이스를구성합니다. 스크린인터페이스에서포커스를이동하며액션메뉴를활성화한뒤선택한동작을메뉴를통해수행합니다. 스크린터치, 외장액세서리, 카메라를통해동작수행이가능합니다. 액션메뉴 완료

81 ACCESSIBILITY One UI Design Guidelines Interaction and dexterity 입력및동작 [ 보조메뉴 ] 물리적인키조작, 화면의특정영역접근, 고난도터치동작등을어려워하는상지장애인이조력자의도움없이디바이스및화면조작을가능하게합니다. 액션메뉴음량화면전환

View Licenses and Services (customer)

View Licenses and Services (customer) 빠른 빠른 시작: 시작: 라이선스, 라이선스, 서비스 서비스 및 주문 주문 이력 이력 보기 보기 고객 가이드 Microsoft 비즈니스 센터의 라이선스, 서비스 및 혜택 섹션을 통해 라이선스, 온라인 서비스, 구매 기록 (주문 기록)을 볼 수 있습니다. 시작하려면, 비즈니스 센터에 로그인하여 상단 메뉴에서 재고를 선택한 후 내 재고 관리를 선택하십시오. 목차