모바일 디자인 패턴 갤러리

1

Mobile design pattern gallery

2

저자소개


3

책소개

- 11개의 category로 모바일 패턴을 분류

- 90개 mobile app design pattern

- 1000개 스크린샷

- 2판(2014)은 1판(2011)에 비해 Mobile design pattern 들이 더욱 Mobile centric 하기 됨


4

How do we learn these patterns?

- 5살 아들이 구름에 대한 패턴을 배우는 예시

- Best tool = Picture

- 언어로 설명이 힘든 미묘한 차이를 그림을 통해 학습함


design inspiration을 위한 source로 활용

그림들을 보면서 내가 디자인하는곳에 어떤게 적합한지 스스로 판단

다양한 기기의 앱을 쓰면서 적용해보기

5

저자 생각 (서문)

- 모바일 디자인 패턴은 시간이 없을때 필요함

- 1판(70개 패턴)에 비해 mobile-centric한 20개 패턴이 추가되어 총 90개 패턴

- Mobile-centric: 데스크탑, 웹 메타포를 넘어섰다

- OS별로 디자인 패턴은 달라져야 한다 (2011년과는 달리..) (특히 navigation)

- 디자인 하려는 OS를 최소 6주는 사용할 것을 강하게 충고한다

- 모바일 앱 스토어의 리뷰들을 꼭 읽어봐라


6


7


8

책소개


9

책소개


가장 먼저 고려해야할 고정된 top menu

숨겨진 top menu

2차적인 navigation

10

Navigation


- Os neutural design

- 단점: 중요도가 강조되지 않음

11

Navigation


- hierarchal navigation (apple)

- long item name + 설명에 적합

12

Navigation


- 다른화면 navigation없이 빨리 정보파악할때 적합

13

Navigation


- live content (뉴스 레시피 사진) - 위계가 없고 자주 업데이트될때 적합

14

Navigation


- OS별로 가이드가 존재 - IOS 5개로 제한

15

Navigation


- 가끔있다

16

Navigation


- OS별로 가이드가 존재 - 너무 많이 담으면 안 됨

17

Navigation


- 요새 잘 안씀

18

Navigation


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

19

Navigation


- 많은 category있을때 - 가로 스와이프 어포던스 - thin 하게 만듬

20

Navigation


21

책소개


22


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

23


24


Tables- 많은 기업 앱이 빡빡한 table 원함 - 저자의 결론 안 된다

- Fixed column - grouped row

앱에서확인할수있는검진 결과 데이터는?

PHR서비스의 목적

정보 접근성 생활습관 개선 확인VS

모든 정보가 담겨 있어야한다. 쉽게 알 수 있는 요약된 정보

강원삼성:일부 소견만 정리,위험 질환/위험 요인(문진 포함)을 정리해서 제공

4. 검진결과 논의사항 건강검진연계 건강관리 서비스Mobile design pattern gallery

검진데이터 예시

리스트/분류기준? 아이콘/신체기관별

강북삼성 한화:MyHealthUp

4. 검진결과 논의사항 건강검진연계 건강관리 서비스Mobile design pattern gallery

4. 검진결과 논의사항 건강검진연계 건강관리 서비스

검사별/연도별데이터

검진데이터 예시

아산병원

1depth/ref,정상범위표시


1

3

전후 결과와 비교:

미션수행 전/후 또는 작년의 검사 결과와 비교하고자 하는 요구

2 붉은 색으로 이상수치 알림

정확한 수치 보다는 이상여부에만 관심이 있다.

악화/완화 표시

정확한 수치적 차이 보다 악화/완화만에 관심이 있다.

0 One-depth:

이미 요약된 정보(25개). 한 뎁스 더 들어갈 필요가 없다.

4

3. 검진결과 논의사항 건강검진연계 건강관리 서비스

건강 검진 결과 화면

주요질환과 관련있는 수치들 grouped row

건강검진연계 건강관리 서비스Mobile design pattern gallery

29


되도록이면 가리고 context맞춤정보 제공

30


OS별 가이드를 따르자

31


32


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

simple data point dash board interactive 하게

33


34


35


36


37


38


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

39


감사합니다