<p> [데브멘토 동영상] 모바일 웹/앱 기획 및 실무적용을 위한UX 가이드3부</p> <p> 김의준 유비즈밸리 부장</p> <p> LCD 크기와 관계 없이 최적으로 노출될 수 있는 화면 구성</p> <p> 터치를 고려한 레이아웃</p> <p> 기획자 고려사항</p> <p> Pivot을 고려한 디자인 방법</p> <p> CSS로 표현할 수 있는UI</p>

1. UX정의
디자인 측면 정보설계측면
Desirable
Credible
Usable
매력적 디자인
디자인 신뢰성
사용하기 쉬운 UI
사용자가 어떤 시스템, 제품, 서비스를 직·간접적으로 이용하면서 느끼고 생각하게 되는 총체적 경험
Useful
Accessibl
e
Findable
유용한 콘텐츠
접근성 극대화
네비게이션 일반화
Valuable 고객만족 제고

2. 기획 시 고려사항

3. 기획 시 고려사항

4. 기획 시 고려사항

5. 기획 시 고려사항
?

6. 기획 시 고려사항

7. 기획 시 고려사항
단말기 LCD사이즈와 관계없이 최적
으로 노출될 수 있는 화면구성 기획
출처 : http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.html

8. 기획 시 고려사항
터치를 고려한 레이아웃
리스트 세로길이 고려
페이징 버튼형식 고려
링크요소간 배치 고려
Touch
Touch

9. 기획 시 고려사항
기획자 고려사항
네비게이션 일관성
(Back버튼 반드시 제공
바로가기 버튼 제공
(모든 서브 페이지 제공)

10. 기획 시 고려사항
기획자 고려사항
키보드 영역 고려
Value Picker 영역 고려
주소창 숨김, 보임 고려
Toolbar
Browser bar
Status bar
Keyboard
First & default value
Second value
Third value

11. 디자인 시 고려사항 Pivot을 고려한 디자인
Pivot 고려한 디자인 방법
Width를 고해상도에 맞춰
제작
이미지를 그라데이션으로
배경색과 동일화

12. 디자인 시 고려사항 Font Size 정의
서비스 사용고객층에 따른
폰트정의
40~60대 14~15pt
20~30대 10~12pt
14pt~15pt 10pt

13. 디자인 시 고려사항 CSS활용 디자인
CSS로 표현할 수 있는 UI
탭
그라데이션
그림자
링크 및 버튼
글상자 및 테이블
이미지로 탭 표
현
CSS로 탭 표현