UI디자인가이드 (4) 썸네일형 리스트형 Card UI 디자인 가이드 출처: https://brunch.co.kr/@august9/244 Card UI란? Card UI는 Single Case에 대한 콘텐츠와 작업을 포함하는 UI 구성 요소를 말합니다. Card에는 다양한 요소가 포함될 수 있겠지만 그것들이 담은 내용은 모두 한가지(동일한) 토픽이어야함을 전제합니다. Card UI의 목적은 긴 텍스트를 피하고 검색 가능한 콘텐츠를 더 많이 렌더링하기 위함입니다. 사용자는 디자인 관점에서는 카드의 개념에 익숙하지 않을 수 있지만 실제 카드를 모티브로했기때문에 사용법을 바로 인지할 수 있습니다. 그럼 왜 인기가 있을까요? Card는 콘텐츠를 단순화하는 것처럼 보이기 때문에 특히 인기가 있습니다. 특히 모듈방식으로 사용되어서 서로 다른 내용을 담은 Card 아이템이라도 함께 구.. UI 디자인 가이드 : 로딩 상태 표시 버튼 출처: https://brunch.co.kr/@august9/279 버튼의 로딩 상태 표시하기 When You Need to Show a Button’s Loading State 우리가 사용하는 버튼에는 활성화(enabled) 및 비활성화(disabled) 상태 외에 로드(loading) 상태도 존재할 수 있습니다. 보통은 작업이 몇 초 이내에 완료되기 때문에 일반적인 네트워크 상황에서 버튼 로딩 상태가 사용자에게 표시되지 않는 경우가 많지만 네트워크에 문제가 있거나 기타의 이유로 평소보다 더 많은 시간이 걸리는 경우 사용자에게 상태에 대한 어포던스를 제공하지 않는다면 에러 발생 확률이 높아집니다. Action Errors(사용자 액션 오류) 사용자는 작업이 완료되는 데 예상보다 오랜 시간이 걸리는 경우.. UI 디자인 가이드 : Search & browsing 출처 : https://brunch.co.kr/@august9/287 검색 결과를 위한 사이트와 컨텐츠 사이트를 디자인할 때 사용자가 '어떤 모드'의 행동을 하려고 하는지를 염두에 두어야 합니다. 사용자는 '검색 모드'을 하려고 하나요? 아니면 '탐색 모드' 작업을 하려고하나요? 이는 사용자 여정(Customer Journey Map) 을 가장 잘 지원하도록 플랫폼을 설계하는 방법을 결정하는 데 도움이 됩니다. 페이지 요약 검색 모드(Search)와 브라우징 모드(Browsing)의 차이 탐색/브라우징이란? 검색이란? 각 모드는 UI에 어떤 영향을 줄까요? 탐색 및 검색 모드가 함께 작동하는 경우? 마무리 참고 1. 검색 모드와 브라우징 모드의 차이 사용자가 검색 창에 무언가를 입력할 때에는 아마도 다음.. UI 디자인 가이드 : 쉬운 컬러 팔레트 만들기 8단계 쉬운 컬러 팔레트 만들기 8단계 서비스를 만들면서 메인 컬러만 정해 놓은 상태에서 컬러 팔레트를 만들기 위해 고민해본 적이 있으신가요? 쉽고 간단하게 컬러 팔레트를 만들 수 있는 예시를 보여드릴게요. 게다가 제법 수리적인 방법이랍니다. :) Create a Color Scheme Around Any Color in 8 Easy Steps Step1. 색상 모델은 HSL로 설정합니다. 일반적으로 컬러 피커는 #DB17DF와 같은 16진수 값으로 설정되어있습니다. 쉬운 진행을 위해 이 모드를 HSL로 변경합니다. HSL은 Hue, Saturation, Lightness를 의미합니다. 컬러피커 셋팅하기 Step 2. 메인 컬러를 선택합니다. 우선 #DB17DF로 예를 들어 설정할게요. 메인 컬러 선택 Step.. 이전 1 다음
