《마이크로인터랙션 – 디테일에 강한 인터랙션 디자인》 댄 새퍼 (2015.5) 마이크로인터랙션의 네 가지 요소 ①트리거, ②동작규칙, ③피드백, ④순환과 모드 중 NOTE1에서 트리거와 동작규칙에 대해 정리했었다. 여기서는 동작규칙부터 이어서 나머지 부분을 정리하려고 한다. 관련 글 《마이크로인터랙션 – 디테일에 강한 인터랙션 디자인》 NOTE 1 1. 동작규칙 제한된 선택 항목과 세심한 기본값동작규칙을 최소한으로 하는 가장 좋은 방법은 사용자의 선택을 제한하는 것이다. 마이크로인터랙션 전체에 걸쳐 기본 선택값을 잘 준비해 두면 사용자가 중간에 뭔가를 선택해야 할 필요조차도 없을 것이다. 모든 마이크로인터랙션이 하나의 행동을 하고, 그 행동이 다음으로 연결된다. _88주요한 선택 항목은 딱 하나만 있는 ..
인비전 invision에서 반응영역 hotspots 지정한 뒤 할 수 있는 것반응영역 지정 후 Link To에서 목적지를 선택한다.목적지는 추가해 놓은 화면 이미지 중에 하나가 될 수도 있고, 현재 화면의 다른 부분으로 이동이 될 수도 있고, 프로토타입 이미지 순서상에서 이전 화면이나 다음 화면이 될 수도 있다. 다음의 옵션 중에서 선택 가능하다. Another point on this screen 현재 화면의 다른 부분으로 이동Link Back / Close (last screen visited) 현재 화면을 닫음(현재 화면이 열리기 직전 화면이 나타남)Screen as Overlay 이미지를 선택해서 현재 화면 위에 겹침 (팝업이나 햄버거메뉴 등 화면의 일부만 가리며 등장하는 이미지를 화면 위에 띄울..
스케치앱에서 도형 Shape을 선택 후 드래그해서 확대나 축소를 하면, 도형에 적용했던 테두리 두께 Border와 모서리 곡선값 Radius은 그대로 유지된채 도형의 크기만 조정된다. 도형을 다루다보면 때로는 테두리와 곡선값이 내가 확대나 축소한 만큼 동일하게 늘어나거나 줄어들기를 원할 때가 있다. 그 방법을 소개한다. 도형의 크기조절 방법 3가지1. 드래그 2. 인스팩터에서 Size값 변경 3. Scale툴 이 중에서 드래그와 Size값으로 크기를 조절하면 Border와 Radius는 원래 설정을 그대로 유지한다. 그런데 스케일 Scale툴을 사용해서 크기조절을 하면 Border와 Radius도 같은 비율로 조절된다. Scale툴로 크기조절을 하면 Radius, Border값도 같이 조절된다.
***덧붙이는 글 2017.5.11이 글이 작성된지 1년이 지났습니다. 그 사이 인비전의 변화가 눈에 띄더라고요. 제가 인비전 관련하여 작성한 내용중에 다음 3가지 부분에서 변화가 있었어요. 아래 글의 스크린샷과 실제 인비전 서비스 화면에서 차이가 있으니 혼란을 겪지 않으셨으면 합니다. 새 프로토타입 생성 화면 : 모양 변경Screen as Overlay : 설정 옵션 추가프로토타입 공유 도구 : 임베드 코드 제공 기능 삭제 인비전 집중 스터디 4회차. 그동안 드문드문 인비전 Invision에 로그인해서 훑어보고, 이미지 몇 개 추가해서 기본 제스처와 트랜지션을 적용해 링크를 걸어보며 맛만 보았었다. 그러면서 생긴 몇 가지 궁금증을 체크만 해두었는데 지난주부터 집중적으로 자세히 들여다보았다. 그간의 스터..
웹 기반 프로토타이핑 서비스를 제공하는 인비전 invision에서 출시한 UI 디자인 보조 툴 크래프트 craft를 사용해 봤다. 크래프트는 요소복제와 더미데이터 삽입을 간편하게 해주는 스케치앱과 포토샵의 서트파티 프로그램이다. 크래프트에는 가이드 생성 기능과 아직 오픈되지 않은 프로토타이핑 기능도 포함되어 있는데 여기서는 요소복제와 더미데이터 삽입 기능을 소개한다. 스케치앱 플러그인 컨텐츠 제너레이터로 더미데이터 자동 삽입의 맛을 본지 며칠 만에 크래프트를 알게 되었는데 기능이 훨씬 좋다. 삽입되는 이미지의 느낌도 마음에 든다. 텍스트 더미 데이터에 한글도 사용할 수 있다. 다운로드 및 설치다운로드 https://www.invisionapp.com/craft 다운로드 후 실행하면 어도비 크리에이티브 클..
《마이크로인터랙션 – 디테일에 강한 인터랙션 디자인》 댄 새퍼 (2015.5) 책에는 마이크로인터랙션이란 이것이다. 라는 식의 명확한 정의가 나오지는 않는다. 곳곳에서 많이 사용되고 발견되는 추상적인 어떤 개념에 마이크로인터랙션이라 이름을 붙이고, 경쟁이 심한 요즘이기에 그것이 중요한 이유를 경험 디자인과 연결 지어 이야기하고, 그 개념이 가지고 있는 네 가지 요소와 특징을 설명한다. 그리고 책 전반에 걸쳐 그 추상적인 개념이 관여되어 있는 사건과 사례들을 소개한다. (PC와 스마트폰, OS, PC 소프트웨어와 모바일앱, 조명, 교통카드 자판기, 토스터, 슬롯머신, 식기세척기 등등) 이 책을 읽으면 내가 발견한 것이 마이크로인터랙션이라 할 수 있는지 아닌지를 구분하고, 마이크로인터랙션을 디자인하기 위해 ..
스케치앱 Sketch 3.7 스케치앱 스터디 2주차원하는 모양을 자유자재로 만들 수 있도록 숙달시키기 위해 핀터레스트에서 맘에 드는 이미지를 골라서 따라 만들어 보았다. 내가 주로 쓰는 효과는 거의 다 만들 수 있었다. 1. 스케치앱으로 그래픽 요소를 만들기 위해 참고할 점 원형 라인 그래프 만들기 원형 라인 그래프를 그릴 때 패스 편집 모드로 들어가서 자르기 원하는 구간에 맞춰 앵커를 추가하고 Scissors 를 사용해 잘라내면 편하다. [Layer - Paths - Scissors] Outer Glow 효과 만들기스위처를 만들 때 포토샵에서의 습관대로 Outer Glow를 찾았는데 없었다. Shadow에서 X, Y 좌표값을 0으로 하고, Blur값만 적용하면 아우터글로우 효과를 만들 수 있다. 필요한..
- Total
- Today
- Yesterday
- 카카오페이
- 인비전
- 원더리스트
- 페이코
- 스케치앱
- 보헤미안 코딩
- 네이버뮤직
- 와이어프레임
- rindesign
- 모바일송금
- 피자주문
- 프로토타입
- 마이크로인터랙션
- 디자인과 인간심리
- 포토샵 CC 2015
- 모바일 스케치
- 온라인 간편결제
- 북노트
- 토스
- invision
- 도미노피자
- 리스트뷰
- 오래가는 UX 디자인
- UX 디자인 7가지 비밀
- UI 디자인 툴
- 벅스뮤직
- 음악앱
- 모바일앱
- 댄새퍼
- sketchApp
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |