| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
- 피그마속성
- 트리거
- Grid
- fixed width
- UX라이팅
- 그리드시스템
- Figma
- 마이크로카피
- statusbar
- Hug contents
- fill container
- 반응형
- webdesign
- 상단바고정
- 인터랙션
- Grid System
- 성공메시지
- constraint
- 그리드
- 오토레이아웃
- figmainteration
- 피그마
- 마이크로인터랙션
- uxui
- 반응형카드만들기
- interaction
- AutoLayout
- 동작규칙
- resizing
- UXUI Design
- Today
- Total
목록전체 글 (19)
Designer Sunny
Toggle-Switch Guidelines 글을 번역하였습니다. (여러 아티클 참고)들어가기 전 토글 스위치는 20세기 초반에 전기 장치의 발전과 함께 등장하게 되었습니다. 전기 스위치의 다양한 형태가 발전하면서, 다양한 기능과 디자인의 스위치가 만들어졌고, 그 중 하나가 토글 스위치입니다. UI 관점에서의 토글 스위치(Toggle Switch)는 디지털 상에서의 켜기(on) / 끄기(off) 상태 변경을 의미합니다.Toggle : 전환하다 란 의미를 가지고 있으며 스위치는 토글의 역할을 수행하기 위한 장치 입니다. 주로 기능이나 설정을 키거나 끌 때 사용합니다.토글 스위치는 사용자에게 상호 배타적인 두 가지 옵션 중에서 선택하라는 메시지를 표시하며, on이든 off이든 항상 기본값을 갖습니다.그리고 ..
본 글은 를 읽고 공부하면서 정리한 글입니다. # 마주치지 않기를 바라며 우리가 아무리 에러 상황을 만들지 않기 위해 노력해도 예상치도 못한 곳에서 에러는 생기기 마련입니다. 그렇기 때문에 에러를 마주친 사용자에게 이 되도록 글을 써야해요. 하지만 그보다 더 좋은 에러 메세지는 애초에 발생하지 않는 것이죠! #에러메시지 사용자를 중단시켜버리는 에러 메세지 에러메세지는 사용자의 행동을 일시적으로 중단시켜요. 에러가 발생하면, 사용자는 순간적으로 하던 일이 멈춰 갑자기 열성이 푹 식어서 방금까지 잘 이어오던 프로세스를 멈출 수 있어요. 메세지의 내용이 명확하지 않거나 위협적이거나 불쾌하게 만들면 특히나 더 그렇죠. 사용자에게 도움이 되는 에러 메세지 벼랑으로 몰린 사용자에게 에러 메세지는 사용자에게 유일한 ..
사용자는 컴퓨터를 사용한다는 걸 알면서도 컴퓨터와 (사회적 규범에 따라 작동하는)인간의 언어로 상호작용하길 기대한다고 한다. 클리포드 나스교수와 코리나 옌의 ⌜관계의 본심⌟에 따르면 "사람들은 컴퓨터를 다룰 때도 다른 사람을 대할 때와 같은 사회적 규범을 따른다" 마치 노력한 부분 에서는 칭찬을 받고 위험한 상황에는 조언과 경고를 받는 것 처럼 말이다. ex. 뒤로가시면 기존에 입력한 내용들이 저장되지 않습니다. 괜찮으신가요? 그 중, 칭찬받는 것은 사용자가 기대하는 반응 중 하나이다. 아래는 성공메세지로 마무리 되는 예시이다. 사이트 가입 구독서비스 주문 / 제품구매 뉴스레터 신청 구독 최소 무료 가이드 다운로드 고객 문의 파일/프로그램/플러그인 다운로드 및 업로드 이메일 주소 유효성 검사 무료 평가판..
이틀동안 피그마에 새로 업데이트된 variable기능을 연마했다. if문을 적용하여 프로토타입을 만들 수 있어서 기존보다 변수적용을 원활하게 할 수 있게 되었다. 비록 프로토파이처럼 세부적인 설정은 불가능하지만 어느정도 프로토타입에서 보여줄 수 있는 것들을 기존보다 확장해서 설정할 수 있다. 아직 60%정도밖에 이해하지 못했지만 variable로 언어/국적 선택할 수 있는 프로토타입을 만들어봤다. 설정할 것 List 1. 드롭다운 박스 varient (open/close) 2. 하단 버튼 varient (boolean : true/false설정 > 각각 disabled/active state) 3. 언어 선택 유무 Boolean variable(변수명 : input) - 유무에 따라 하단 버튼 활성화 -..
페이징은 쓸어넘기기 입력을 받으면 지정된 크기만큼 컨텐츠를 차례로 보여주는 인터랙션 방식을 구현할 수 있게 합니다. 1. 오브젝트 생성 페이징할 오브젝트들을 만들어줍니다. ( 최소 2개이상) 여백없이 바로 옆에 나란히 배치해줍니다. 2. 그룹화 해주기 1. 오브젝트들을 하나의 그룹으로 묶어줍니다. 2. 페이지별로 보여야하기 때문에 보여지는 영역만큼 컨테이너 크기를 조절합니다. 3. 컨테이너의 속성은 'Paging'으로 설정한 후 scroll방향을 '좌우'로 설정합니다. 4. Clip Sublayers를 체크하면 컨테이너 바깥 영역은 보이지 않습니다.(현재는 예시를 위해 체크 안해놓음) 3. 짜잔 완성 귀여운 고양이가 페이징되고 있습니다. 귀엽죠