반응형 ᴜx/ᴀʀᴛɪᴄʟᴇ29 드롭다운(dropdown) 메뉴 디자인 필수 가이드 사용자가 옵션을 선택할 수 있는 UI 컴포넌트는 많다. 체크박스, 라디오 박스, 토글, 스테퍼, 드롭다운 메뉴. 각각 고유한 장단점이 있으며, 사용자로부터 요구하는 입력의 성격에 따라 사용해야 한다. 이 글의 경우 드롭다운 메뉴에 초점을 맞추고 사용 사례, 유형, 상태 및 모범 사례에 대해 설명하겠다. 대부분의 정보는 Nielsen Norman Group과 Baymard Institute의 글을 읽는 데서 유래한다. 드롭다운 메뉴 구조 - Label 선택해야 할 항목을 사용자에게 알림 - Field Icon (선택사항) 필요한 정보의 유형을 표시하여 라벨을 지원 - Search Bar (선택사항) 20개 이상의 옵션으로 구성된 메뉴에 대해 사용자가 원하는 옵션을 쉽게 찾을 수 있도록 돕기 위해 사용 - .. 2020. 6. 17. 프로토타이핑 UI : 필요한 툴 찾기 디자인은 끊임없이 진화하고 복잡해지고 있다. 사용자 인터페이스 설계는 더 이상 아이콘의 와이어프레임과 디자인에만 국한되지 않는다. 오늘날, 디자이너들은 그래픽 소프트웨어와 프로토타이핑 툴을 포함하여 단순함에서 정교함에 이르기까지 다양한 유용한 도구들을 가지고 작업한다. 웹 애플리케이션을 만들든, 모바일 애플리케이션을 만들든 프로토타이핑 제작에는 준비와 전문 소프트웨어가 필요하다. 그러나 프로토타이핑 툴의 수가 매년 증가함에 따라 어려운 선택을 해야 한다. 어떤 툴을 사용하면 가장 효율적이고 효과적으로 작업할 수 있으며 가장 유용한 프로토타입을 만들 수 있을지 고민해야한다. 이 글에서는 가장 인기 있는 프로토타이핑 툴의 장단점을 살펴보기로 한다. 우리 회사 UX팀의 디자이너들에게 그들이 가장 좋아하는 프로.. 2020. 6. 16. 2020년, 어떤 UI 디자인 툴을 사용해야할까? 2020년, 오늘날의 시장은 UI 설계 도구로 가득 차 있다. Sketch가 사용자 인터페이스를 정교하고 단순하게 제작할 수 있도록 효율적인 툴을 출시한 이후, 많은 회사들이 디자인 툴 시장 점유율의 일부를 차지하기 위해 노력해왔다. UXtools에서 실시한 '2019년 디자인 툴 설문조사'를 살펴보면, 지난해 Sketch가 선두를 달렸던 것과 비교해서 꽤 많은 툴이 Sketch를 따라잡은 것을 볼 수 있다. 2019년 가장 인기 있는 UI 디자인 도구 설문조사 결과 2018년 가장 인기 있는 UI 디자인 도구 설문조사 결과 내가 관찰한 '툴의 성장, 툴을 사용한 나 자신의 경험, 그리고 이러한 툴들에 대한 다른 디자이너들의 경험'에 따르면, 1~2년 안에 Sketch, Figma, Adobe XD가 주.. 2020. 6. 12. UI / UX 디자이너를 위한 짧고 유용한 디자인 Tip Steve Schoger의 Twitter 모음 'Little UI Details'는 이해하기 쉬운 이미지로 UI 디자인의 다양한 요소를 다룬다. 확인해본 결과, 최신 업데이트는 지속적으로 이루어지지 않는다. 하지만 기본적이지만 놓칠 수 있는 디테일에 대해 쉽게 설명해주기 때문에 한 번쯤 훑어볼만하다. 01. 부정적인 링크에 대한 교묘한 액션 유도 부정적인 이차적 액션에 대한 미묘한 연결고리는 종종 큰 굵기의 버튼보다 더 잘 작동한다. (확인과 관련된 액션을 더 확실히 할 것!) 02. 최소한의 라인 사용 테두리가 너무 많으면 디자인이 정신없어 보일 수 있다. 03. 텍스트 정렬 텍스트를 정렬하는 것은 디자인을 정리하고 콘텐츠의 가독성을 높이는 쉬운 방법이다. 04. 텍스트 컬러 조정 순수한 회색 텍스트는.. 2020. 6. 4. 실제 UI 디자인 - 타이포그래피 앱에 아이콘, 사진 또는 여러 컬러 팔레트가 없을 수 있다. 하지만 디지털 솔루션은 텍스트 콘텐츠 없이는 존재할 수 없다. 텍스트는 솔루션을 이해할 수 있게끔 한다. 어떤 사람들은 디자인의 90%가 타이포그래피라고 말한다. 올바른 타이포그래피를 사용하면 솔루션의 사용자 경험이 크게 향상될 수 있다. 올바른 설정 덕분에 사용자는 콘텐츠를 더 쉽게 소비하고 더 많은 참여를 할 수 있을 것이다. 타이포그래피란? 타이포그래피는 활자를 배열하여 표시하거나 인쇄할 때 언어를 읽을 수 있도록 호소력 있게 만드는 기법과 기술이다. 글꼴 vs. 활자체 우리 모두는 동의어로 글꼴과 서체 용어를 사용한다. 하지만, 그들의 의미는 다르다. 글꼴은 하나의 특정 서체, 크기, 무게로 소개된 텍스트 문자의 시각적 표현이다. 예를 .. 2020. 4. 23. 라디오 버튼과 체크박스가 공존할 수 없는 이유 라디오 버튼과 체크박스는 오랫동안 사용자 혼란을 일으키는 구성요소였다. 이 요소들은 종종 같은 맥락에서 사용되지만, 완전히 다르게 보인다. 디자이너와 개발자들은 그 차이를 알고 있지만, 그것은 그들이 일을 통해 그것을 배웠기 때문이다. 그 차이를 전혀 배우지 못한 사용자들은 어떨까? 사용자에게 차이점을 가르쳐야 한다는 사실은 이 두 요소가 직관적이지 않다는 것을 보여준다. 그들의 외관만으로는 기능면에서 약간의 차이가 있다는 것을 전달할 수 없다. 이 시각적 단서는ㅡ점과 체크마크ㅡ 옵션 선택 이외의 사용자에게 특별한 의미를 부여하지 않는다. 따라서, 라디오 버튼과 체크박스의 공존은 UX의 일관성 원칙을 위반한다. 디자이너와 개발자들은 항상 그래왔기 때문에 그들의 공존에 의문을 제기해 본 적이 없다. 그러나.. 2020. 3. 24. 이전 1 2 3 4 5 다음
