본문 바로가기

반응형

UI디자인입문

(3)
UI 디자인 가이드 : Infinite Scroll 출처 : https://brunch.co.kr/@august9/291 무한 스크롤은 페이징 방법 중에서도 매우 인기 있는 디자인 유형입니다. 특히 모바일에서처럼요. 무한 스크롤를 활용해서 사용자 경험, 잠재 고객 창출등에 영향을 줄 수 있습니다. 무한 스크롤링이란 브라우저 스크롤 막대가 페이지 하단에 도달하는 것을 방지하는 것 을 말합니다. 사용자가 페이지를 더 아래로 스크롤할 때마다 콘텐츠가 확장되어 새로운 콘텐츠가 추가됩니다. 무한 스크롤은 연속적(무한하게)으로 스크롤하는 형태일 수도 있고, 사용자가 계속 스크롤을 선택/선택 해제할 수 있는 "더 보기" 옵션으로 단축할 수도 있습니다. *아래에서 무한 스크롤(Infinite Scroll)과 더 보기(Load More) 버튼에 대해 한차례 다룬 바 있습..
UI 디자인 가이드 : List vs Grids 출처 : https://brunch.co.kr/@august9/288 목록 타입 : 리스트와 그리드 list vs grids 검색 결과 혹은 아이템 목록의 형태를 가진 UI 구성, 가장 대표적인 두가지 타입의 뷰 모드를 알아봅니다. 리스트 모드와 갤러리뷰, 카드뷰라고도 불리는 그리드 모드입니다. 서비스의 어디에서나 사용할 수 있겠지만 주로 검색 결과, 아이템 카탈로그 및 뉴스 피드를 중점적으로 살펴보겠습니다. 이 선택을 통해 사용자가 우리의 콘텐츠와 상호 작용하는 방식과 사용자가 수행할 작업이 결정됩니다. 페이지 요약 1. 소개 1.1 그리드 뷰와 리스트 뷰의 차이 1.2사용자는 어떤 모드에 있고 가장 중요하게 여기는 건 무엇인가요? 1.3 이미지 사용 1.4 인지 부하 2. 그리드 뷰(Grid view..
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..

반응형
LIST