인비전으로 만든 프로토타입을 공유하는 방법은 크게 2가지다. 소셜미디어 계정에 공유하는 방법과 URL 또는 EMBED 코드를 통한 공유 방법이다. 현재 공유 가능한 소셜미디어는 슬랙과 드리블이다. 향후 비핸스도 추가될 모양이다. 여기서는 소셜미디어 공유 방법은 소개하지 않는다. 여기서는 URL로 프로토타입을 공유하고, PC 브라우저로 접속해서 테스트하는 방법 위주로 소개한다. 프로토타입을 URL로 공유하면 PC나 스마트폰 등 어떤 디바이스에서든 브라우저를 통해 접속해서 테스트 할 수 있다. 그런데 스마트폰 브라우저에서 접속할 경우 코멘트를 작성할 수는 없다. 코멘트를 주고받으며 커뮤니케이션 하려면 PC 브라우저에서 접속해야 한다. PC 브라우저로 접속한 모습URL로 접속하면 처음 상태는 테스트 모드다. ..
네이버 스마트에디터 3.0 (Web ver.)접속 초기 화면에 레이어 팝업으로 주요 도움말을 보여준다. 스마트에디터 화면 내에 이 동영상(가이드)을 바로 열어볼 수 있는 조그만 장치가 있으면 좋을 듯하다. 카카오 브런치 Brunch (Web ver.)글쓰기 화면에 접속 시 글자편집에 관한 도움말을 애니메이션으로 보여준다. 그 후 사용자가 기능을 처음 사용할 때 그에 해당하는 도움말을 레이어 팝업으로 보여준다. 미디엄 Medium (Web ver.)처음 접속 시 화면 하단에 도움말을 보여준다. 좌우 화살표를 클릭해서 다음 내용을 볼 수 있다. 일부 도움말은 애니메이션을 통해 이해를 돕고 있다. 도움말 맨 마지막에는 이 도움말을 다시 보는 방법에 대한 도움말이 나온다. 끝.
노트정리, 할일목록, 메일 등 폴더 또는 카테고리 기능이 포함된 목록 관리 웹서비스의 사용자 도움말 표현 사례를 모았다. 도움말이 보여지는 시점 및 위치, 도움말로 설명할 내용의 범위에 대해 탐구가 필요하다. 노트정리 ‘에버노트 Evernote’할일목록 ‘원더리스트 Wunderlist’메일 ‘인박스 Inbox by Gmail’ 에버노트 웹서비스계정 생성 후 처음 만나게 되는 화면이다. 하단의 아이콘 옆에 툴팁이 계속 보여진다. 계정관련 내용이 있을 거라는 힌트를 준다. 목록은 비어있지 않다. 에버노트 측에서 사용법을 작성해 놓은 8개의 노트가 목록을 채우고 있다. +(새 노트)를 클릭하면 글쓰기 화면으로 전환된다.이때 화면 레이아웃이 바뀌는데 좌측에 보이던 것들이 사라져 혼란스러울 수 있는 사용자를 위해..
지난달에 10시간 정도 실습과 함께하는 픽세이트 강좌를 수강했다. 간단한 프로토타입은 인비전으로 만들 수 있지만 그보다 좀 더 자세하게 만들 수 있는 프로토타입 도구에 관심이 생겼다. 픽세이트 pixate는 스마트폰용 어플리케이션에 최적화된 프로토타입 제작 도구다. 탭, 스크롤, 드래그 등의 인터랙션과 무브, 스케일, 페이드 등의 애니메이션을 적용할 수 있다. 픽세이트는 레이어 기반의 도구라서 요소별로 인터랙션과 애니메이션을 각각 지정할 수가 있다. 그리고 인비전 보다 애니메이션 효과를 조금 더 다양하게 만들 수 있다. 애니메이션 별로 조절 가능한 속성도 몇 가지 제공하고, 조건을 설정해 그에 따라 반응하도록 할 수 있다. 또한 하나의 요소에 여러 개의 애니메이션 효과를 중첩해서 적용 가능하다. 그것을 ..
관련 글브런치 모바일앱 UI - Part 1 홈, 글목록, 글본문 브런치 모바일앱 글쓰기 글쓰기 화면은 3가지 항목으로 구성된다. 제목소제목내용 글보기 화면은 제목과 커버이미지를 담고 있는 상단과 하단의 내용으로 구분할 수 있는데 상단을 꾸미기 위해서는 글쓰기 화면의 ‘제목’을 이용하면 된다. 브런치 모바일앱에서 상단영역으로 만들 수 있는 유형은 다음과 같다.브런치 모바일앱 커버이미지 유형 배경배경이미지가 화면에 꽉 채워지도록배경이미지가 정사각틀에 맞춰 채워지고 아래에 내용의 일부가 보여지도록배경이미지 없이 제목만 표시 (배경색 선택 가능, 선택하지 않으면 흰색 배경) 제목 정렬왼쪽이나 가운데 중 선택할 수 있다.세로 정렬은 임의로 정할 수 없다. 배경이미지 세로 사이즈에 따라 정해진다. 커버이미지 만들..
- Total
- Today
- Yesterday
- 와이어프레임
- 벅스뮤직
- UI 디자인 툴
- 인비전
- 모바일앱
- UX 디자인 7가지 비밀
- 도미노피자
- 페이코
- 마이크로인터랙션
- 포토샵 CC 2015
- invision
- 피자주문
- 음악앱
- 프로토타입
- 모바일 스케치
- 토스
- sketchApp
- 북노트
- 보헤미안 코딩
- 댄새퍼
- 디자인과 인간심리
- 원더리스트
- 온라인 간편결제
- 카카오페이
- 모바일송금
- 네이버뮤직
- 스케치앱
- 리스트뷰
- rindesign
- 오래가는 UX 디자인
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 |