View
413
Download
2
Category
Preview:
Citation preview
1
Mobile design pattern gallery
2
저자소개
Mobile design pattern gallery
3
책소개
- 11개의 category로 모바일 패턴을 분류
- 90개 mobile app design pattern
- 1000개 스크린샷
- 2판(2014)은 1판(2011)에 비해 Mobile design pattern 들이 더욱 Mobile centric 하기 됨
Mobile design pattern gallery
4
How do we learn these patterns?
- 5살 아들이 구름에 대한 패턴을 배우는 예시
- Best tool = Picture
- 언어로 설명이 힘든 미묘한 차이를 그림을 통해 학습함
Mobile design pattern gallery
design inspiration을 위한 source로 활용
그림들을 보면서 내가 디자인하는곳에 어떤게 적합한지 스스로 판단
다양한 기기의 앱을 쓰면서 적용해보기
5
저자 생각 (서문)
- 모바일 디자인 패턴은 시간이 없을때 필요함
- 1판(70개 패턴)에 비해 mobile-centric한 20개 패턴이 추가되어 총 90개 패턴
- Mobile-centric: 데스크탑, 웹 메타포를 넘어섰다
- OS별로 디자인 패턴은 달라져야 한다 (2011년과는 달리..) (특히 navigation)
- 디자인 하려는 OS를 최소 6주는 사용할 것을 강하게 충고한다
- 모바일 앱 스토어의 리뷰들을 꼭 읽어봐라
Mobile design pattern gallery
6
Mobile design pattern gallery
7
Mobile design pattern gallery
8
책소개
Mobile design pattern gallery
9
책소개
Mobile design pattern gallery
가장 먼저 고려해야할 고정된 top menu
숨겨진 top menu
2차적인 navigation
10
Navigation
Mobile design pattern gallery
- Os neutural design
- 단점: 중요도가 강조되지 않음
11
Navigation
Mobile design pattern gallery
- hierarchal navigation (apple)
- long item name + 설명에 적합
12
Navigation
Mobile design pattern gallery
- 다른화면 navigation없이 빨리 정보파악할때 적합
13
Navigation
Mobile design pattern gallery
- live content (뉴스 레시피 사진) - 위계가 없고 자주 업데이트될때 적합
14
Navigation
Mobile design pattern gallery
- OS별로 가이드가 존재 - IOS 5개로 제한
15
Navigation
Mobile design pattern gallery
- 가끔있다
16
Navigation
Mobile design pattern gallery
- OS별로 가이드가 존재 - 너무 많이 담으면 안 됨
17
Navigation
Mobile design pattern gallery
- 요새 잘 안씀
18
Navigation
Mobile design pattern gallery
- 빨리빨리 content를 볼때.. - Mobile에 적합한 패턴 - 카드메타포를 통한 어포던스를 줌
19
Navigation
Mobile design pattern gallery
- 많은 category있을때 - 가로 스와이프 어포던스 - thin 하게 만듬
20
Navigation
Mobile design pattern gallery
21
책소개
Mobile design pattern gallery
22
Mobile design pattern gallery
Forms- 창의성을 발휘하지말고 평범하게 - 한 화면에서 해결이 되게 - 짧고 간결하게
23
Mobile design pattern gallery
24
Mobile design pattern gallery
Tables- 많은 기업 앱이 빡빡한 table 원함 - 저자의 결론 안 된다
- Fixed column - grouped row
앱에서확인할수있는검진 결과 데이터는?
PHR서비스의 목적
정보 접근성 생활습관 개선 확인VS
모든 정보가 담겨 있어야한다. 쉽게 알 수 있는 요약된 정보
강원삼성:일부 소견만 정리,위험 질환/위험 요인(문진 포함)을 정리해서 제공
4. 검진결과 논의사항 건강검진연계 건강관리 서비스Mobile design pattern gallery
검진데이터 예시
리스트/분류기준? 아이콘/신체기관별
강북삼성 한화:MyHealthUp
4. 검진결과 논의사항 건강검진연계 건강관리 서비스Mobile design pattern gallery
4. 검진결과 논의사항 건강검진연계 건강관리 서비스
검사별/연도별데이터
검진데이터 예시
아산병원
1depth/ref,정상범위표시
Mobile design pattern gallery
1
3
전후 결과와 비교:
미션수행 전/후 또는 작년의 검사 결과와 비교하고자 하는 요구
2 붉은 색으로 이상수치 알림
정확한 수치 보다는 이상여부에만 관심이 있다.
악화/완화 표시
정확한 수치적 차이 보다 악화/완화만에 관심이 있다.
0 One-depth:
이미 요약된 정보(25개). 한 뎁스 더 들어갈 필요가 없다.
4
3. 검진결과 논의사항 건강검진연계 건강관리 서비스
건강 검진 결과 화면
주요질환과 관련있는 수치들 grouped row
건강검진연계 건강관리 서비스Mobile design pattern gallery
29
Mobile design pattern gallery
되도록이면 가리고 context맞춤정보 제공
30
Mobile design pattern gallery
OS별 가이드를 따르자
31
Mobile design pattern gallery
32
Mobile design pattern gallery
Charts- simple하게 - 복잡한 chart는 interactive 하게 e.g)data point 하지말기 (tab누르면..) - 연관된 여러 차트는 대시보드로
simple data point dash board interactive 하게
33
Mobile design pattern gallery
34
Mobile design pattern gallery
35
Mobile design pattern gallery
36
Mobile design pattern gallery
37
Mobile design pattern gallery
38
Mobile design pattern gallery
Anti-pattern- 새로운 UI 시도 x (overall ux concept을 개선하라)
39
Mobile design pattern gallery
감사합니다
Recommended