Difference between revisions of "Coach mark"
Navigation menu
From Design pattern
(→Coach Marks - 화살표) |
|||
| (15 intermediate revisions by 4 users not shown) | |||
| Line 1: | Line 1: | ||
| − | 앱을 | + | Coach mark 는 앱을 실행한 후, 사용자가 앱의 아이콘이나 메뉴 등을 이용하는 방법에 대해 도움말을 제공하는 패턴이다. 보통 앱을 처음으로 실행할 때 화면위에 blur 효과를 통해 자동으로 나타나며 '다시 표시하지 않음' 혹은 '다음부터 열지 않기' 등의 체크박스를 통해 재실행하지 않도록 설정할 수 있다. |
| + | |||
| + | === With this pattern, we can solve... === | ||
| + | * 화면 위에 투명한 layer를 띄워 아이콘 별 기능을 소개하거나, 화살표로 직접 아이콘을 가르키며 각 메뉴나 기능에 대해 안내한다. | ||
| + | * [[Walkthroughs]]는 튜토리얼 형식으로 앱 처음 시작 시 앱에대한 전반적인 도움말을 제공하는 반면, Coach mark는 앱을 실행 후 앱을 실행하는데 필요한 아이콘이나 메뉴등에 대한 설명을 보여준다. | ||
| + | * 다음에 앱을 실행 시 활성화 되지 않게 옵션을 선택할 수 있으며 체크박스를 선택하지 않고 종료하게 되면 매번 앱 실행 시 나타날 수 있다. | ||
| + | |||
| + | === Example === | ||
| + | [[file:Coach_mark.JPG|310px]] | ||
| + | |||
| + | ---- | ||
== Translucent layer == | == Translucent layer == | ||
| − | |||
홈 화면 위에 반투명한 화면을 덮어 그 위에 각 메뉴에 대한 도움말을 표시한다. | 홈 화면 위에 반투명한 화면을 덮어 그 위에 각 메뉴에 대한 도움말을 표시한다. | ||
| + | |||
| + | === iOS_Muv === | ||
| + | {{#Widget:Vimeo|id=96600615|width=300|height=533}} | ||
=== iOS_원터치알림 === | === iOS_원터치알림 === | ||
{{#Widget:Vimeo|id=96554824|width=300|height=533}} | {{#Widget:Vimeo|id=96554824|width=300|height=533}} | ||
| − | === | + | === iOS_ziny news === |
{{#Widget:Vimeo|id=96554834|width=300|height=533}} | {{#Widget:Vimeo|id=96554834|width=300|height=533}} | ||
| − | === | + | === iOS_Vodio === |
{{#Widget:Vimeo|id=96554486|width=300|height=533}} | {{#Widget:Vimeo|id=96554486|width=300|height=533}} | ||
=== Android_TMON === | === Android_TMON === | ||
{{#Widget:Vimeo|id=96421131|width=300|height=542}} | {{#Widget:Vimeo|id=96421131|width=300|height=542}} | ||
| − | |||
| − | |||
| + | ===Android_Power amp === | ||
| + | {{#Widget:Vimeo|id=93208258|width=300|height=528}} | ||
| + | |||
| + | ---- | ||
== Arrow == | == Arrow == | ||
| − | |||
화면 안에서 특정 기능을 수행하기 위한 동작이나 버튼에 대해 그 위치를 화살표로 표시하고 간단한 설명을 보여준다. | 화면 안에서 특정 기능을 수행하기 위한 동작이나 버튼에 대해 그 위치를 화살표로 표시하고 간단한 설명을 보여준다. | ||
| Line 28: | Line 41: | ||
=== iOS_CamCard === | === iOS_CamCard === | ||
{{#Widget:Vimeo|id=96554508|width=300|height=533}} | {{#Widget:Vimeo|id=96554508|width=300|height=533}} | ||
| + | |||
| + | === iOS_Powerlamp === | ||
| + | * 처음 App 실행 시 간단한 사용방법을 사용자에게 알려준다. | ||
| + | {{#Widget:Vimeo|id=93208258|width=300|height=528|start=4s}} | ||
| + | |||
=== Android_Samsung galaxy note === | === Android_Samsung galaxy note === | ||
{{#Widget:Vimeo|id=94814136|width=300|height=455}} | {{#Widget:Vimeo|id=94814136|width=300|height=455}} | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
[[Category:Provide user guide]] | [[Category:Provide user guide]] | ||
Latest revision as of 15:08, 15 July 2014
Coach mark 는 앱을 실행한 후, 사용자가 앱의 아이콘이나 메뉴 등을 이용하는 방법에 대해 도움말을 제공하는 패턴이다. 보통 앱을 처음으로 실행할 때 화면위에 blur 효과를 통해 자동으로 나타나며 '다시 표시하지 않음' 혹은 '다음부터 열지 않기' 등의 체크박스를 통해 재실행하지 않도록 설정할 수 있다.
Contents
With this pattern, we can solve...
- 화면 위에 투명한 layer를 띄워 아이콘 별 기능을 소개하거나, 화살표로 직접 아이콘을 가르키며 각 메뉴나 기능에 대해 안내한다.
- Walkthroughs는 튜토리얼 형식으로 앱 처음 시작 시 앱에대한 전반적인 도움말을 제공하는 반면, Coach mark는 앱을 실행 후 앱을 실행하는데 필요한 아이콘이나 메뉴등에 대한 설명을 보여준다.
- 다음에 앱을 실행 시 활성화 되지 않게 옵션을 선택할 수 있으며 체크박스를 선택하지 않고 종료하게 되면 매번 앱 실행 시 나타날 수 있다.
Example
Translucent layer
홈 화면 위에 반투명한 화면을 덮어 그 위에 각 메뉴에 대한 도움말을 표시한다.
iOS_Muv
iOS_원터치알림
iOS_ziny news
iOS_Vodio
Android_TMON
Android_Power amp
Arrow
화면 안에서 특정 기능을 수행하기 위한 동작이나 버튼에 대해 그 위치를 화살표로 표시하고 간단한 설명을 보여준다.
iOS_Feedly
iOS_CamCard
iOS_Powerlamp
- 처음 App 실행 시 간단한 사용방법을 사용자에게 알려준다.
Android_Samsung galaxy note