디자인28 Daily UI 017 / Purchase Receipt 결제 내역 17번째 과제: Purchase Receipt 결제내역 UI - 결제 내역에 필수로 들어가는 내용은 크게 4 섹션이다. 주문번호 / 구매 상품 / 결제 정보 / 배송지 정보 - 총 결제금액을 미괄식으로 보여주는 서비스: 배달의 민족, 에이블리 - 나는 한번도 사용해보지 못해서 몰랐는데, '주문내역 삭제' 기능이 있었다. 도대체 누가 이 기능을 사용할지 궁금하다. - 무신사의 경우 할인율을 엄청나게 설정해두는데, 이로 인해 소비자가 이득보았다는 감정을 극대화하기 위해 할인금액에 컬러를 사용하여 강조한 것으로 보인다. - 총 결제금액을 두괄식으로 보여주었다. - 결제상세의 경우 총 결제금액을 드롭다운되기 전부터 보여주었다. - 결제 직후 결제 내역 화면이 뜨는 경우, 드롭다운이 다 펼쳐져 있는 상태로 보여준.. 2024. 2. 15. Daily UI 016 / Pop-up Overlay 16번째 과제: Pop-up Overlay 팝업 UI - 회원가입이 짧게 걸린다는 것을 '3초 회원가입'이라는 라이팅으로 어필했다. - 클릭을 유도하고 싶은 버튼은 우측에 둔다. - X 버튼은 오른쪽 상단에 둔다. 2024. 2. 15. Daily UI 015 / On/Off Switch 온오프 스위치 15번째 과제: On/Off Switch 온오프 스위치 iOS 라이트모드와 Google 다크모드 토글을 클론 디자인하였다. * 감기 걸려서 한동안 Daily UI를 못했다 ㅠㅠㅠ 이번 겨울에 독감+감기 총 3번 걸렸음 (집순이인데 도대체 왜 ???) 아무튼 코로나 시국처럼 손 열심히 씻고 마스크도 끼고 다니면서 몸관리해야겠다... Daily UI 챌린지도 다시 시작해보겠습니다 -! 2024. 2. 13. [독후감] 이것이 UX 디자인이다 UX 디자인이란 사용자들의 경험을 이해하고, 그 이해를 바탕으로 디자인하는 것이다. 사용자들의 숨겨진 니즈를 찾아내기 위해 UX 방법론을 적용한다. 사용자가 좀 더 쉽고 편리하게 (물건을) 쓸 수 있게 하려면 어떻게 해야 할까? 사용자들이 제품을 이해할 때 기대하는 바를 이해해야 한다. 사용성은 사용자들의 기대와 예상 시나리오 대로 제품을 설계하는 것이 가장 중요하다. Don Norman 교수가 2002년에 최초로 UX 디자인이라는 개념을 고안해냈다. Norman이 정의한 UX는 UI나 사용성(usability)과는 구별된다. 오히려 UI, 인터랙션, 사용성, 그래픽 등을 모두 포괄하는 개념이다. UX는 제품과 상호작용하는 사용자의 모든 경험을 뜻한다. UX라는 개념을 고안한 사람이 창립한 기업이 Nie.. 2024. 2. 2. Daily UI 014 / Countdown Timer 타이머 14번째 과제: Countdown Timer 타이머 UI 안 그래도 최근에 낼나샵에서 구매한 뽀모도로 타이머를 열심히 사용 중이었는데, 반가운 과제였다. 타이머의 본질은 남은 시간을 보여주는 것이다. 단순 명료할수록 본질에 더 집중할 수 있다. 뽀모도로 타이머의 좋은 점은 숫자가 아닌 눈에 보이는 면적으로 시간을 파악할 수 있다는 것이다. 또한 1분당 면적은 항상 동일하다. 대신 60분을 초과하는 시간은 잴 수 없지만, 애초에 성인 권장 연속집중 시간이 60분이기 때문에 괜찮다. (출처; https://www.newstnt.com/news/articleView.html?idxno=69648#:~:text=%EB%8C%80%EB%87%8C%20%EC%83%9D%EB%A6%AC%ED%95%99%EC%9E%9.. 2024. 2. 1. Daily UI 013 / Direct Message 디엠 13번째 과제: Direct Message 디엠 UI 아이폰 메세지, 카카오톡, 인스타그램 DM, 왓츠앱 메세지, 텔레그램, 슬랙을 레퍼런스 분석하였다. 왓츠앱과 텔레그램은 완전이 애플의 HIG를 그대로 따른 디자인이었다. 거의 아이폰 기본앱같이 느껴진다. 슬랙은 여타 앱과 달랐다. 확실히 사내 조직을 위한 서비스여서 그에 맞는 Form follows function이었다. - 메세지 보낸 시각을 기본적으로 보이게 하였다. 분단위로 메세지를 나누면 적당한 선에서 한번씩 호흡을 끊어주는 기능도 있기 때문이다. (아이폰, 디엠의 경우 대화들을 왼쪽으로 밀어야 시각이 표시된다.) - 예전 대화 기록을 보기 위해 위로 스크롤했을 때, 한번에 Go to the Bottom되는 FAB을 넣었다. - 해당 FAB는 .. 2024. 1. 31. Daily UI 012 / E-commerce Shop 이커머스 쇼핑몰 12번째 과제: E-commerce Shop 이커머스 쇼핑몰 UI 주제는 '신발을 주력으로 스포츠 의류를 판매하는 브랜드'의 '상세 페이지'로 설정하였다. 컨셉은 이미지 중심적이고, 신발을 다각도로 돌려보며 3D로써 파악할 수 있는 상호작용을 넣는 것이다. 이커머스 쇼핑몰은 정보량도 많고, 만들어야하는 페이지도 많다. 처음에는 호기롭게 온라인 의류편집샵을 주제로 잡고 레퍼런스로 29cm, 무신사, w concept를 분석하려고 했는데, 분석만 해도 하루 안에 해낼 수 없는 양이라는 것을 깨달았다. 이는 하루에 한개씩 UI를 쳐내야하는 DailyUI로는 어울리지 않았다. 그래서 스포츠 신발 브랜드로 시장을 구체화했고, 그에 맞게 Nike, Adidas, New Balance 웹사이트를 분석하였다. 이커머스.. 2024. 1. 31. UI 상태 용어 정리 Button / Input Field - Active(Enabled) : 사용자가 상호작용할 수 있는 상태. 버튼이나 링크 등이 클릭 가능할 때 이 상태를 나타낸다. - Inactive(Disabled) : 사용자가 상호작용할 수 없는 상태. 일반적으로 버튼이나 폼 필드가 사용할 수 없거나, 특정 조건을 만족시키지 않았을 때 이 상태가 된다. - Hover : 사용자가 마우스 포인터를 특정 UI 요소 위에 올려놓은 상태. 이 상태는 보통 시각적 피드백(색상 변경, 하이라이트 등)을 통해 나타낸다. - Focused : 키보드 또는 다른 입력 방식으로 특정 요소가 선택된 상태. 주로 폼 필드, 버튼 등에서 사용자가 현재 작업 중인 요소를 나타낸다. 입력중인 상황을 강조한다. - Pressed: 마우스 포인.. 2024. 1. 30. Daily UI 011 / Flash Message 플래쉬 메세지 11번째 과제: Flash Message 플래쉬 메세지 UI Flash Message란? 사용자가 웹사이트나 앱에서 특정 작업을 수행했을 때 잠깐 동안 나타나는 짧은 메시지. 이 메시지는 사용자에게 작업의 성공, 실패, 경고, 정보 등을 알려주는 역할을 한다. 예를 들어, 사용자가 폼을 제출하거나 설정을 변경했을 때, 플래시 메시지는 "저장되었습니다", "업데이트 성공", "잘못된 입력입니다"와 같은 짧은 피드백을 제공한다. 이러한 메시지는 일반적으로 화면의 상단이나 중앙에 잠깐 나타났다가 자동으로 사라지거나, 사용자가 직접 닫을 수 있는 방식으로 디자인된다. 플래시 메시지의 목적은 사용자에게 즉각적이고 명확한 피드백을 제공하여 사용자 경험을 개선하는 것이다. - 사실 Flash Message가 무엇인지.. 2024. 1. 29. Daily UI 010 / Social Sharing 소셜 공유 10번째 과제: Social Sharing 소셜 공유 UI - 네이버 블로그에 공유하기 외에도 url 복사하기 버튼이 따로 있는 점이 좋아서 벤치마킹했다. - url 복사 완료 토스트가 떠야 한다. - 아이콘 그리는 것 재미있다. 그런데 막상 실무에서는 일이 너무 많아서 아이콘 하나하나 그릴 시간이 없어서 에셋 쓴다고 한다 흑흑 - 지금 미리 나만의 에셋 만들어둔다는 생각으로 열심히 그려야지...! 2024. 1. 29. 이전 1 2 3 다음
