모바일 디자인 패턴 갤러리

1. 1
Mobile design pattern gallery

2. 2
저자소개
Mobile design pattern gallery

3. 3
책소개
- 11개의 category로 모바일 패턴을 분류
- 90개 mobile app design pattern
- 1000개 스크린샷
- 2판(2014)은 1판(2011)에 비해 Mobile design pattern 들이 더욱 Mobile centric 하기 됨
Mobile design pattern gallery

4. 4
How do we learn these patterns?
- 5살 아들이 구름에 대한 패턴을 배우는 예시
- Best tool = Picture
- 언어로 설명이 힘든 미묘한 차이를 그림을 통해 학습함
Mobile design pattern gallery
design inspiration을 위한 source로 활용
그림들을 보면서 내가 디자인하는곳에 어떤게 적합한지 스스로 판단
다양한 기기의 앱을 쓰면서 적용해보기

5. 5
저자 생각 (서문)
- 모바일 디자인 패턴은 시간이 없을때 필요함
- 1판(70개 패턴)에 비해 mobile-centric한 20개 패턴이 추가되어 총 90개 패턴
- Mobile-centric: 데스크탑, 웹 메타포를 넘어섰다
- OS별로 디자인 패턴은 달라져야 한다 (2011년과는 달리..) (특히 navigation)
- 디자인 하려는 OS를 최소 6주는 사용할 것을 강하게 충고한다
- 모바일 앱 스토어의 리뷰들을 꼭 읽어봐라
Mobile design pattern gallery

6. 6
Mobile design pattern gallery

7. 7
Mobile design pattern gallery

8. 8
책소개
Mobile design pattern gallery

9. 9
책소개
Mobile design pattern gallery
가장 먼저 고려해야할 고정된 top menu
숨겨진 top menu
2차적인 navigation

10. 10
Navigation
Mobile design pattern gallery
- Os neutural design
- 단점: 중요도가 강조되지 않음

11. 11
Navigation
Mobile design pattern gallery
- hierarchal navigation (apple)
- long item name + 설명에 적합

12. 12
Navigation
Mobile design pattern gallery
- 다른화면 navigation없이 빨리 정보파악할때 적합

13. 13
Navigation
Mobile design pattern gallery
- live content (뉴스 레시피 사진)
- 위계가 없고 자주 업데이트될때 적합

14. 14
Navigation
Mobile design pattern gallery
- OS별로 가이드가 존재
- IOS 5개로 제한

15. 15
Navigation
Mobile design pattern gallery
- 가끔있다

16. 16
Navigation
Mobile design pattern gallery
- OS별로 가이드가 존재
- 너무 많이 담으면 안 됨

17. 17
Navigation
Mobile design pattern gallery
- 요새 잘 안씀

18. 18
Navigation
Mobile design pattern gallery
- 빨리빨리 content를 볼때..
- Mobile에 적합한 패턴
- 카드메타포를 통한 어포던스를 줌

19. 19
Navigation
Mobile design pattern gallery
- 많은 category있을때
- 가로 스와이프 어포던스
- thin 하게 만듬

20. 20
Navigation
Mobile design pattern gallery

21. 21
책소개
Mobile design pattern gallery

22. 22
Mobile design pattern gallery
Forms
- 창의성을 발휘하지말고 평범하게
- 한 화면에서 해결이 되게
- 짧고 간결하게

23. 23
Mobile design pattern gallery

24. 24
Mobile design pattern gallery
Tables
- 많은 기업 앱이 빡빡한 table 원함
- 저자의 결론 안 된다
- Fixed column - grouped row

25. 앱에서 확인 할 수 있는 검진 결과 데이터는?
PHR 서비스의 목적
정보 접근성 생활습관 개선 확인
VS
모든 정보가 담겨 있어야한다. 쉽게 알 수 있는 요약된 정보
강원삼성: 일부 소견만 정리, 위험 질환/위험 요인(문진 포함)을 정리해서 제공
4. 검진결과 논의사항 건강검진연계 건강관리 서비스Mobile design pattern gallery

26. 검진 데이터 예시
리스트 / 분류기준? 아이콘 / 신체기관별
강북삼성 한화: My Health Up
4. 검진결과 논의사항 건강검진연계 건강관리 서비스Mobile design pattern gallery

27. 4. 검진결과 논의사항 건강검진연계 건강관리 서비스
검사별 / 연도별 데이터
검진 데이터 예시
아산병원
1 depth / ref, 정상범위 표시
Mobile design pattern gallery

28. 1
3
전후 결과와 비교:
미션수행 전/후 또는 작년의 검사 결과와 비교하고자 하는 요구
2 붉은 색으로 이상수치 알림
정확한 수치 보다는 이상여부에만 관심이 있다.
악화/완화 표시
정확한 수치적 차이 보다 악화/완화만에 관심이 있다.
0 One-depth:
이미 요약된 정보(25개). 한 뎁스 더 들어갈 필요가 없다.
4
3. 검진결과 논의사항 건강검진연계 건강관리 서비스
건강 검진 결과 화면
주요질환과 관련있는 수치들 grouped row
건강검진연계 건강관리 서비스Mobile design pattern gallery

29. 29
Mobile design pattern gallery
되도록이면 가리고
context맞춤정보 제공

30. 30
Mobile design pattern gallery
OS별 가이드를 따르자

31. 31
Mobile design pattern gallery

32. 32
Mobile design pattern gallery
Charts
- simple하게
- 복잡한 chart는 interactive 하게
e.g)data point 하지말기 (tab누르면..)
- 연관된 여러 차트는 대시보드로
simple data point dash board interactive 하게

33. 33
Mobile design pattern gallery

34. 34
Mobile design pattern gallery

35. 35
Mobile design pattern gallery

36. 36
Mobile design pattern gallery

37. 37
Mobile design pattern gallery

38. 38
Mobile design pattern gallery
Anti-pattern
- 새로운 UI 시도 x (overall ux concept을 개선하라)

39. 39
Mobile design pattern gallery
감사합니다