The Ultimate Guide to An Effective UI Design

사용자의 88% 가 단 한 번의 나쁜 경험 후에 앱이나 사이트를 다시 방문하지 않는다는 사실을 알고 계셨습니까 ? 이것은 단지 미학을 넘어 사용자 경험에 결정적인 영향을 미치는 UI 디자인의 중요성을 보여줍니다. 다음 가이드에서는 "UI란?" 설명부터 사용자 인터페이스를 디자인할 때 알아야 할 모든 것을 다룹니다. 2022년 및 그 이후의 최신 UI 트렌드 공유에 이르기까지 핵심 요소에 대해 논의합니다. UI 디자인이란 무엇입니까? 사용자 인터페이스 디자인의 약자 UI 디자인은 응용 프로그램의 최종 모양과 느낌을 지원하기 위해 디지털 제품의 그래픽 레이아웃을 만드는 프로세스를 말합니다. 여기에는 이미지, 애니메이션, 슬라이더, 텍스트 필드, 버튼 등과 같이 사용자가 상호 작용하는 다양한 요소가 포함됩니다. 좋은 UI 디자인은 친숙한 사용자 경험으로 이어지기 때문에 모든 소프트웨어 개발 프로세스의 일부가 되어야 합니다. 이제 인터페이스를 디자인할 때 사용할 수 있는 요소를 살펴보겠습니다. UI 디자인 – 모든 디자이너가 숙지해야 하는 UI 요소 사용자 인터페이스를 디자인하는 동안 사용할 수 있는 다양한 UI 요소 가 있습니다. 세 가지 범주로 나눌 수 있습니다. 입력 요소 입력 요소는 가장 인기 있는 카테고리입니다. 그들은 사용자가 나이, 구매 이유 등과 같은 모든 종류의 정보를 제공하도록 요구합니다. 입력은 텍스트, 그래픽 또는 오디오를 포함한 다양한 형식으로 올 수 있습니다. 입력 요소는 다음과 같은 형식을 취할 수 있습니다. 드롭다운 콤보 상자 버튼 토글 텍스트/비밀번호 필드 날짜 선택기 체크박스 라디오 버튼 확인 대화 상자 출력 요소 출력 요소는 입력 요소로 수행하는 작업의 결과입니다. 그들의 성격은 결코 중립적이지 않습니다. 경고, 경고, 성공 또는 오류를 표시합니다. 예를 들어, 지원되지 않는 형식의 이미지를 업로드하면 "지원되지 않는 이미지"라는 메시지가 표시되고 다른 형식의 이미지를 제공해야 한다는 것을 즉시 알 수 있습니다. 도우미 요소 세 번째 범주는 출력 또는 입력 범주 내에 배치할 수 없는 모든 요소에 대한 포괄적인 용어에 속합니다. 이름에서 알 수 있듯이 사용자가 사이트의 내용을 이해하고 인터페이스를 탐색하는 데 도움이 됩니다. 도우미 요소는 세 가지 하위 범주로 더 세분화할 수 있습니다. Navigational , 인터페이스를 탐색하는 데 도움이 됩니다. 몇 가지 예에는 메뉴, 이동 경로, 링크 목록 등이 있습니다. 현재 사용자 여정의 어느 단계에 있는지 또는 웹 사이트가 현재 실행 중인 프로세스를 알려주는 정보 입니다. 진행률 표시줄, 아이콘 및 도구 모음이 모두 좋은 예입니다. UI가 무엇인지 이해하려면 주요 UI 디자인 요소를 아는 것이 중요합니다. 출처: 스택오버플로 다양한 UI 구성 요소를 함께 유지하는 컨테이너/그룹 . 이러한 요소는 대부분 팝업, 사이드 바 및 위젯 형태로 제공됩니다. 좋은 예는 아래 이미지와 같은 뉴스레터 가입 상자입니다. UI 디자인 요소의 예 상자에는 클릭 가능한 CTA "가입" 요소, 입력 상자 및 정보를 제공하는 일부 텍스트가 있습니다. UI 디자인 요소 간의 차이점을 이해하는 것이 왜 중요한가요? 위의 세 그룹에서 볼 수 있듯이 출력, 입력 및 도우미 요소는 모두 다른 용도로 사용됩니다. 즉, UI 디자이너는 동일한 그룹에 속하는 요소를 적절하게 구분해야 합니다. 예를 들어 온라인 식료품점 페이지에 필터를 추가한다고 가정해 보겠습니다. 검색 결과에 "채식" 제품만 표시되기를 원합니다. UI 관점에서 다음과 같은 여러 입력 요소를 볼 수 있습니다. 올바른 옵션을 탭할 수 있는 라디오 버튼 목록 목록 , 피팅 요소를 찾고 "채식주의자"를 클릭할 수 있습니다. 오른쪽 제품 태그를 스크롤하고 탭하는 드롭다운 (일반적으로 옵션은 알파벳 순서로 나열됨) "비건"뿐만 아니라 "무설탕" 또는 "공정 무역"과 같은 다른 요소도 선택할 수 있는 확인란 . 어떤 것을 UI로 선택해야 하는지 알기 위해서는 사용자의 목표를 이해하고 사용자가 목표를 완료할 수 있도록 간단하고 편리하게 만들어야 합니다! 사용자 목표와 상호 작용 단순화에 대해 말하면 다음 섹션으로 이어집니다. UI 디자인의 최고의 원칙 UI 디자인이란 무엇입니까? 사용자의 삶을 쉽게 만듭니다. 이것이 성공적인 UI 디자인의 핵심 원칙 입니다. 진행 중인 디자인 프로세스의 중심에 사용자를 배치하여 참여도와 유지율을 높일 수 있습니다. 사용자가 행동하는 방식을 배우기 위해 데이터를 사용하면서 생각하는 방식을 이해하는 것입니다. 그 결과 사용자의 요구와 기대를 충족시키는 보다 세련된 제품이 탄생했습니다. 그리고 기대치가 높습니다. 사용자가 온라인에서 많은 시간을 보내면서 그 어느 때보다 까다로워졌습니다. 그들은 비록 깨닫지 못하거나 그것을 'UI 디자인'이라고 부르더라도 훌륭한 사용자 인터페이스의 모양과 느낌을 알고 있습니다. 사용자가 앱이나 사이트를 탐색하는 데 어려움을 겪으면 어떻게 될까요? 그들은 X 아웃. 제거되었습니다. 따라서 사용자 여정을 단순화하기 위해 올바른 원칙을 적용하는 것이 비즈니스에 매우 중요합니다. 시작하려면 다음을 수행해야 합니다. 1. 화면당 작업 및 단계 최소화 사용자는 가능한 한 적은 수의 클릭이나 탭으로 원하는 곳으로 이동할 수 있어야 합니다. 이것은 공간이 중요하고 탐색 기술이 크고 대담하며 엄지에 친숙해야 하는 작은 화면을 가진 장치용 사용자 인터페이스를 디자인할 때 특히 중요합니다. 모바일 화면 미학과 의도 모두에서 디자인에 초점을 맞추십시오. 페이지 또는 화면이 무엇에 관한 것인지, 사용자가 알아야 할 사항 및 수행해야 하는 사항이 명확해야 합니다. Amazon 결제 페이지를 예로 들어 보겠습니다. 초점은 항목과 가격에 있으며 세부 정보와 배송 옵션은 자동으로 채워지며 '구매'를 누르기만 하면 됩니다. 시간은 소중하며 사용자의 관심을 끌기 위해 경쟁하는 회사가 너무 많기 때문에 작업과 조치를 간소화하지 않고는 경쟁자에게 '군중을 잃는' 위험을 감수할 수 없습니다. 2. 인지 부하 감소 밀리언 달러 홈페이지 를 기억 하십니까? 인지 과부하의 놀라운 예입니다. 당신의 눈은 밝은 색상의 얼룩과 거의 읽을 수 없는 단어를 가로질러 깜박입니다. 카지노, 아마도 또는 소규모 소매업체와 같은 비즈니스를 선택할 수는 있지만 또 다른 화려한 픽셀 광고가 눈을 사로잡기 전에는 그 이전에 있었던 모든 것을 잊어버렸습니다. 인지 부하는 뇌에서 대역폭을 차지하는 정보의 양입니다. 그리고 인터페이스를 디자인할 때 목표는 사용자가 필요로 하지 않는 방해 요소를 줄이는 동시에 필요한 정보를 쉽게 분석하거나 상호 작용할 수 있도록 하는 것입니다. 일반적인 예는 사용자가 이미 클릭한 링크의 색상을 전환하는 것입니다. 어떤 페이지를 방문했는지 기억할 필요 없이 사용자는 자신이 방문한 페이지를 한 눈에 볼 수 있습니다. 훌륭한 UI 디자인은 사람들이 생각할 필요가 없다는 것을 의미 합니다. 작업은 직관적이며 사용자는 작업을 완료할 수 있도록 하는 배후에서 능숙한 디자인 기술을 알지 못합니다. 3. 대화가 종료되어야 함을 확인하십시오. 마지막으로 온라인에서 항목을 구입한 시간을 생각해 보십시오. 3막에서 분명한 '내러티브 호'가 있었다. 처음에는 다양한 제품을 탐색합니다. 중간에 제품을 선택하고 결제를 진행합니다. 마지막으로 주문 확인서를 받습니다. 그것은 만족스럽습니다. 세상을 이해하는 가장 쉬운 방법이기 때문에 우리의 두뇌는 원인과 결과에서 큰 영향을 받습니다. 이 공을 벽에 던지면 튕겨 나갈 것입니다. R2D2가 청사진을 보유하고 있다면 루크는 데스 스타를 파괴할 수 있습니다. '구매'를 클릭하면 제품이 장바구니에 담겼다는 알림을 받습니다. 각 단계에서 '추가됨' 알림과 같은 피드백을 추가하여 사용자 작업에 '3막 구조'를 적용합니다. 4. 명확한 다음 단계 제공 얼마나 자주 웹 페이지의 끝까지 스크롤하여 Arrakis만큼 황량한 웹 페이지를 찾았습니까? 여행이 갑자기 중지되어 위로 스크롤하거나 뒤로를 클릭하거나 탭을 닫을 수 있습니다. 앱이나 사이트가 같은 실수를 하지 않도록 하십시오. 사용자가 원하는 위치에 도달하도록 도왔습니다. 하지만 그 다음은 어떻게 될까요? 방향 프로세스 경로 방법 UI 디자인의 핵심 부분은 사용자에게 여정을 안내하는 것입니다. 미묘하게(또는 그렇게 미묘하게) 다음에 어디로 가야 하는지 또는 무엇을 해야 하는지 알려줍니다. 클릭 유도문안 버튼의 위치와 기능을 고려하십시오. 데이터를 사용하여 사용자 의도와 배치에 초점을 맞춰 참여를 극대화하세요. 사용자 인터페이스 디자인의 기본 원칙 가이드에서 자세히 알아보십시오. 상위 3가지 사용자 인터페이스 디자인 실수와 이를 피하는 방법 사용자 인터페이스를 디자인할 때도 일련의 위험과 잠재적인 실수가 따릅니다. 대부분은 쉽게 피할 수 있으므로 여러 전문가에게 연락하여 관찰 내용을 공유해 달라고 요청했습니다. 다음은 우리가 수집한 11가지 사용자 인터페이스 디자인 실수 중 세 가지입니다. 1. 사용성보다 창의성을 더하다 CellPhoneDeal 의 CEO인 Josh Wright는 기업이 눈에 띄기 위해 너무 열심히 노력하는 경우가 많으며 이는 사용성에 부정적인 영향을 미친다고 말했습니다. 기억에 남는 UI를 디자인하는 것이 좋지만 너무 많은 이미지나 애니메이션으로 어수선하게 만드는 것은 결코 좋은 생각이 아닙니다. 앱이나 웹사이트를 사용하기 너무 어렵게 만들 수 있습니다. 그리고 관심을 끄는 대신 사용자가 사용하지 못하도록 하고 경쟁자의 손에 넣을 수 있습니다. 대신 사용성에 중점을 두고 UI가 눈에 좋을 뿐만 아니라 직관적이어야 합니다. 2. 디자인 트렌드에 지나치게 의존 CRACKITT 의 설립자인 Deepasha Kakkar 는 기업이 종종 트렌드의 희생양이 된다고 지적했습니다. 그리고 우리 모두 알다시피 트렌드는 왔다가 사라지기 때문에 초기 평가 없이 맹목적으로 따라가는 것은 실수입니다. 성능 메트릭을 살펴보고 변경이 필요한지 확인하십시오. 그렇지 않은 경우 다른 사람들이 모두 하기 때문에 하지 마십시오. 최신 트렌드를 기반으로 제품을 수정하기로 결정했다면 먼저 이를 뒷받침하는 데이터가 있는지 확인하십시오. 그렇지 않으면 많은 시간과 비용을 낭비할 수 있습니다. 3. 실체에 대한 UI 디자인 스타일 또 다른 일반적인 장애물은 spacelift.io 의 제품 디자이너인 Arek Nowakowski가 말한 것처럼 "실질보다 스타일"을 두는 것 입니다. Arek은 경력 전반에 걸쳐 쓸모없는(또는 존재하지 않는) UX를 아름다운 브랜딩으로 마무리하는 디자이너의 사례를 많이 보았습니다. 이러한 프로젝트는 '보기'만 하고 '수행'하지 않기 때문에 실패에 대비합니다. 좋은 비유는 바퀴가 없는 자동차를 생각하는 것입니다. 차량이 의도한 매우 기본적인 작업을 수행하고 원하는 위치로 이동하지 못한다면 입이 떡 벌어지는 외부와 내부는 중요하지 않습니다. 이 실수를 해결하기 위해 Arek는 웹사이트나 앱의 순서도부터 시작하여 잠재 고객 사이에서 가설을 검증할 것을 제안합니다. 가정이 사실로 입증되면 UI에 포함하는 것을 고려할 수 있습니다. 여기서 핵심은 일관성입니다. 그렇다면 디자인 일관성은 무엇을 의미합니까? 이에 대해서는 다음에 논의합시다. UI 및 UX 디자이너를 위한 최상의 디자인 일관성 사례 디자인 일관성이란 무엇입니까? 디자인 일관성은 모든 플랫폼에서 시각적 및 기능적 요소를 균일하게 유지하는 것입니다. 이를 '디자인 예측 가능성'이라고 부를 수도 있습니다. 사용자가 X 동작을 수행할 때 모바일, 태블릿 또는 데스크톱에서 항상 Y가 발생합니다. 간단한 예: 앱은 대화 상자의 오른쪽에 녹색 '예'를 표시하고 왼쪽에 빨간색 '아니오'를 표시합니다. 사용자가 이것에 익숙해지면 모든 UI 디자이너가 갈망하는 것처럼 행동이 본능적이 됩니다. 그러나 특정 화면에서는 배치가 뒤집힙니다. 갑자기 사용자가 잘못된 옵션을 선택하고 있습니다. 그들은 의심을 가지고 미래의 모든 선택을 주시하고 엄지손가락은 각 상호 작용에 대해 너무 오래 맴돌고 있습니다. 일관성 없는 디자인은 귀하와 귀하의 사용자 간의 계약을 깨뜨립니다. 최고의 디자인 일관성 사례 1. 사용자 중심의 UI 및 UX 디자인 연구 수행 두 가지 질문에 답하여 연구를 시작하십시오. 사용자가 원하는 것은 무엇입니까? 사용자는 무엇을 기대합니까? 솔루션을 설계하기 전에 사용자의 사고 방식에 대해 알아야 합니다. 그들은 귀하의 앱을 다운로드했고 귀하의 사이트를 클릭했습니다. 하지만 왜? UI와 UX는 데이터와 공감의 칵테일로 가득 차 있습니다. 프로토타이핑 종이 연필 lo fi 사용자의 요구 사항을 파악했으면 사용자의 기대에 집중하세요. 이는 디자인 친숙도를 기반으로 구축됨을 의미합니다. Google은 온라인 검색 방식을 결정했습니다. Facebook은 우리가 친구들과 소통하는 방식에 영향을 미쳤습니다. 아마존은 우리가 쇼핑하는 방식을 정의했습니다. 이 페이지의 홈페이지 버튼은 어디에 있습니까? 왼쪽 상단. 망설이지 마세요. 순수한 온라인 일관성. 2. 제품 디자인 패턴 정의 '3의 법칙'은 일관성을 유지하는 데 도움이 됩니다. 사용자 작업을 최소한으로 유지하려고 합니다. 즉, 현재 위치에서 원하는 위치까지 세 번만 탭하거나 클릭할 수 있습니다. 여러 가지 방법으로 이 작업을 수행할 수 있습니다. 디자인 계층: 사용자의 주의를 유도하여 가장 많이 사용되는 섹션을 눈에 띄게 만듭니다. 브랜딩: 브랜딩은 색상 팔레트에서 목소리 톤에 이르기까지 당신을 돋보이게 하는 것입니다. 항상 당신뿐입니다. 구성 요소: 다양한 대화형 요소가 균일하게 작동해야 합니다. 진행률 표시줄은 항상 진행률 표시줄입니다. 템플릿: 모든 플랫폼에서 레이아웃을 표준화하고 템플릿은 일관성을 유지하는 효율적인 방법입니다. 3. 일관된 작업 구축 사용자가 제품이 어떻게 작동하는지 알기 를 원합니다. 일관된 작업은 사용하기 쉬운 디자인 흐름을 만듭니다. 사용자는 X 작업이 Y로 이어진다는 사실을 알게 되면 해당 지식을 제품 전체에 적용합니다. 그들은 그것에 대해 생각할 필요조차 없을 것입니다. 일관된 작업을 구축할 때 기존 영향과 자신의 디자인을 활용합니다. 4. 일관된 콘텐츠 만들기 사본을 일관성 있게 유지하십시오. 특히 특정 용어를 사용할 때 사용자와 '대화'하는 방식은 제품 전반에 걸쳐 유지되어야 합니다. 일관성은 사용자의 흐름을 유지하면서 명확성을 만듭니다. 브랜딩 측면에서 사용자는 자신이 다른 사람이 아니라 귀하와 함께 있다는 사실을 기억해야 합니다. 콘텐츠는 표준화된 방식으로 제시되고 행동해야 합니다. 이것을 디자인할 때 사용자 목표를 중앙에 배치하십시오. 5. 커뮤니케이션 유지 커뮤니케이션의 가치는 과소평가될 수 없습니다. 사용자는 작업을 수행할 때 승인을 좋아합니다(예: 선택을 할 때 차임벨). 진행률 표시줄이 완벽한 예입니다. 인터넷은 인내가 미덕이라고 가르쳤습니다. 즉각적이지 않으면 사용자는 무슨 일이 일어나고 있는지 알고 싶어합니다. 사용자는 '올바른 작업'을 했는지 또는 제품이 올바르게 작동하는지 궁금해 해서는 안 됩니다. 고민은 방황으로 이어집니다. 팀 협업 토크 커뮤니케이션 일관성은 또한 내부 커뮤니케이션에 달려 있습니다. 팀의 모든 구성원은 단일 비전과 이를 구축하는 데 각자의 역할이 어떻게 도움이 되는지를 위해 노력하고 있습니다. UXPin 과 같은 코드 기반 UI 도구를 사용하여 아이디어 구상부터 구현까지 디자인 일관성을 강화하세요 . 이를 통해 개발자가 사용하는 것과 동일한 '라이브 코드' 요소로 경험을 만드는 디자이너 간의 클라우드 협업이 가능하므로 제품이 귀하의 비전과 일치합니다. 디자인 일관성 가이드: UI 및 UX 디자이너를 위한 모범 사례 에서 일관된 디자인 유지에 대해 자세히 알아보십시오 . 전문가들이 말하는 '좋은 UI 디자인'의 의미 이제 UI 디자인의 원칙을 살펴보고 몇 가지 일반적인 실수에 대해 논의했으므로 전문가에 따르면 좋은 디자인의 특징은 무엇인지 살펴보겠습니다. 사용자 인터페이스 디자인에는 반응성이 필요합니다 ExaWeb Corporation 의 기술 책임자는 특히 Google이 2019년에 모바일 인덱싱을 상위 검색 순위 요소의 일부로 만든 후 응답성의 중요성을 강조합니다. 장치에 관계없이 좋은 사용자 경험을 제공합니다. 그러나 응답성은 화면 크기 최적화를 넘어 속도와 성능을 포함합니다. 이러한 이유로 Google 표준을 준수하고 UI 디자인이 모든 기기에서 표준을 충족하는지 확인하는 것이 중요합니다. UI 디자인은 공감해야 합니다 Mantra Design 의 디자이너 Greg Findley 는 가장 중요한 좋은 UI 디자인 특성 중 하나는 사용자의 요구에 대한 공감이라고 말합니다. 주로 UX와 관련된 문제라고 생각할 수도 있지만, 그 뒤에 있는 프로세스가 아니라 사용자가 상호 작용하는 것은 UI라는 사실을 잊어서는 안 된다고 그는 주장합니다. 마음은 좋은 것 같은 사랑 Greg는 UI가 일반적인 사람들의 행동을 반영해야 한다고 말합니다. 인터페이스 또는 해당 메시지가 전환에 너무 초점을 맞추면 사용자가 사이트나 앱을 포기하고 여정에서 너무 일찍 구매 방향으로 밀려난다고 느낄 수 있습니다. 그는 다음과 같이 자문해 볼 것을 제안합니다. 인터페이스는 사용자가 처음 봤을 때 어떤 느낌을 줍니까? 그들은 두 번째, 열 번째, 그리고 오십 번 반복해서 그것을 어떻게 경험합니까? UI는 제품 수명 주기의 모든 단계에서 공감 유지를 어떻게 지원합니까? 본질적으로 Greg가 요약한 것처럼 인터페이스가 어떻게 느껴지고 감정적으로 공명하는지에 따라 괜찮은 UI 디자인과 훌륭한 UI 디자인 사이의 모든 차이를 만들 수 있습니다. 이것들은 디자이너가 우리에게 말한 좋은 UI 특성 중 일부일 뿐입니다. 좋은 UI 디자인은 최소한이어야 합니다. 비타민a K 의 UX/UI 및 디지털 제품 디자이너인 Karla Fernandes 는 모든 제품의 목적은 사용자가 문제를 해결하거나 사용자 경험 연구 중에 식별된 목표를 달성하도록 돕는 것이어야 한다고 말합니다. 최소한의 UI 디자인은 시각적 계층을 가질 뿐만 아니라 사용자 주의를 촉진하고 정보 과부하를 줄이는 색상, 글꼴 및 비율을 사용하여 그렇게 합니다. 이것은 무엇보다도 간격을 두고 신중하게 이미지와 애니메이션을 선택하여 달성할 수 있습니다. 반응형 화면 Karla는 또한 사람들이 친숙함을 좋아한다는 점을 강조합니다. 반복적인 패턴 이나 요소 를 사용하면 그들이 어떻게 돌아가는지 알게 될 테니 안심할 수 있습니다. 결국 이것은 제품의 유용성에 긍정적인 영향을 미치고 사람들의 삶에서 제품의 역할을 재확인합니다. 전문가로부터 더 많은 조언을 얻으려면 전용 UI 디자인 문서 를 읽어보세요. 사용자 인터페이스를 빠르게 조롱하기 위한 모범 사례 1. 스케치 시간 – 우리는 시간이 충분하지 않은 것 같으므로 실패할 운명(또는 어쨌든 완전히 실행 불가능함)이 될 수 있는 개념을 디지털 방식으로 작업하는 데 낭비하고 싶지 않습니다. 스케치는 더 빠르고 저렴하며 더 빠른 UI 목업을 만드는 데 이상적입니다 . 펜과 종이만 들고 오세요. 정확도가 낮고 완성된 제품처럼 보이거나 느껴지거나 기능하지 않을 수 있습니다. 그러나 이는 팀에 귀하의 비전에 대한 명확한 아이디어와 이에 접근하는 최선의 방법을 제공할 것입니다. 2. 모바일 퍼스트 작게 시작하십시오. 이 경우에는 작은 화면입니다. 모바일은 청중의 상당 부분이 있는 곳이므로 비즈니스 관점에서 의미가 있습니다. 그러나 모바일 우선 접근 방식은 목업, 프로토타입을 만들거나 최신 아이디어를 와이어프레임으로 만들 때 실용적인 디자인 이점도 제공합니다. 모바일 우선을 위해 제작하면 가장 중요한 콘텐츠만 포함하게 됩니다(공간이 중요하기 때문에). 그런 다음 자르기보다 더 큰 화면에 추가 콘텐츠를 추가하여 확장하기가 더 쉬워지며, 이는 일반적으로 역추적 및 복잡한 디자인으로 이어집니다. 3. 그리드 시스템 그리드 시스템은 인생의 모든 최고의 것들과 마찬가지로 여전히 다소 논쟁의 여지가 있습니다. 그러나 최근 몇 년 동안 인기가 높아져 효율적이고 일관된 모형을 제작해야 하는 디자이너에게 필수적인 도구가 되었다는 사실은 부인할 수 없습니다. 그리드를 사용하면 혼란스러울 수 있는 상황에 질서를 부여할 수 있습니다. 조직화된 그리드 시스템은 콘텐츠의 최적의 간격, 크기 및 계층 구조를 결정하는 데 도움이 됩니다. 수평 격자가 가장 일반적이지만 타이포그래피를 개념화하는 경우 수직 격자를 구현하는 것이 편리할 수 있습니다. 그리드 디자인 더 빠른 UI 목업을 위한 19가지 모범 사례에 대한 기사와 웹 UI 디자인 모범 사례 에 대한 전자책을 읽고 더 많은 팁을 얻으십시오 . 반응형 디자인과 적응형 디자인 중 어느 것이 가장 좋을까요? 반응형 디자인이란? 반응형 디자인은 사용자가 사용하는 화면 크기에 따라 유연하게 조정됩니다. 여러 CSS 미디어 쿼리를 사용하여 장치의 디스플레이 또는 크기를 결정하고 응답으로 스타일을 변경합니다. 어댑티브 디자인이란 무엇입니까? 적응형 디자인은 중단점을 기반으로 하는 정적 레이아웃을 제공합니다. 따라서 사용자가 760 너비 화면에 있으면 항상 760 레이아웃이 표시됩니다. 대부분의 적응형 디자인 팀은 6가지 화면 크기에 대한 적응형 디자인을 만듭니다. 320 480 760 960 1200 1600 반응형 및 적응형 디자인의 장단점 적응형 디자인을 시작하려면 더 많은 작업이 필요합니다. 디자이너는 최소 6개의 화면 크기에 맞게 디자인해야 합니다. 그러나 반응형 디자인에는 복잡한 문제가 있으며 적절한 미디어 쿼리를 사용하지 않으면 디스플레이 문제에 취약합니다. 이는 사이트가 완전한 데스크톱 경험을 제공할 때 가장 두드러집니다. 우리 모두는 이것의 수확물에 왔습니다. 운이 좋고 사이트가 로드되면 크롤링 속도가 느려집니다. 미디어 쿼리를 배포하면 도움이 될 수 있지만 반응형 사이트는 모바일 화면 크기에 맞게 특별히 설계된 사이트만큼 빠르지 않습니다. 적응형 경로를 선택할 때 UXPin과 같은 UI 도구를 선택하면 여러 중단점을 도입하여 장치 간에 화면 일관성을 유지할 수 있습니다. 무료 평가판 을 사용하면 이것이 얼마나 쉬운지 알 수 있습니다 . 더 나은 것 – 적응형 또는 반응형 디자인? 이 모든 것을 염두에 두고 디자이너를 위한 최선의 선택은 무엇입니까? 디자인 선택은 사용자로부터 시작됩니다. 답변: 귀하의 사용자는 누구입니까? 그들은 어떤 장치를 사용합니까? 이러한 지식을 갖추면 필요에 맞는 디자인을 더 쉽게 만들 수 있습니다. 대부분의 사용자가 960 화면에서 사이트에 액세스할 때 콘텐츠의 우선 순위를 지정하고 최적화할 화면 너비를 알고 있습니다. 귀하의 결정은 귀하가 기존 사이트를 보유하고 있는지 여부에 의해서도 영향을 받을 것입니다. 디자인 세계에서 반응형은 선택이 되었습니다. 채택률은 전용 모바일 사이트와 거의 일치하며 약 1/8 사이트에서 반응형 디자인을 실행합니다. 그러나 인기가 항상 좋은 것은 아닙니다. 아주 영리한 테스트 중 하나 는 즉시 사용 가능한 반응형 디자인이 사이트 로드 시간에 심각한 영향을 미치는 것으로 나타났습니다. 즉, 엄격한 최적화가 절대적으로 필요합니다. 적응형 디자인에는 더 많은 투자가 필요하지만 일반적으로 모바일 우선 작업에 더 나은 선택이 될 것입니다. 반응형 디자인 대 적응형 디자인: 디자이너를 위한 최선의 선택은 무엇입니까 ? 이제 우리는 UI 디자인과 응답성의 원칙을 사용하여 뛰어난 사용자 여정을 효율적으로 만드는 것에 대한 명확한 아이디어를 얻었습니다. 이제 모바일 및 랜딩 페이지 UI 를 완성하는 방법에 대해 더 세부적으로 살펴볼 때 입니다. 모바일 UI 마스터하기 모바일 앱 디자인이란 무엇입니까? 모바일 UI는 모바일 화면에 표시되는 모든 것입니다. 사용자가 그것을 보거나 탭하거나 스와이프하거나 다른 작업을 수행할 수 있다면 모바일 사용자 인터페이스의 일부입니다. 전 세계적 으로 거의 170억 개의 모바일 장치 가 작동하고 있습니다. 미국의 3억 명 이상의 스마트폰 사용자 가 연간 3,300억 달러 이상을 지출 합니다. 무시할 수 없는 거대한 시장이며 경쟁이 치열한 디지털 공간(감히 말 하겠습니까 ?) 디지털 공간에서는 올바른 인상을 주는 것이 중요합니다. 모바일 디자인에는 문제가 없습니다. 더 작은 화면과 터치 기반 상호 작용을 통해 모바일에서 인터페이스를 디자인하는 원칙 은 기존의 데스크톱 디자인과 다릅니다. 모바일 인터페이스 디자인을 위한 팁 1. 명확한 비전 제시 모든 프로젝트는 비전으로 시작해야 합니다. 팀과 주요 이해 관계자에게 명확한 목표를 전달했습니다. 구체적이고 가능한 경우 시각 자료를 사용하십시오. 프로젝트에 참여하는 모든 사람은 귀하의 비전이 무엇이며 비전을 전달하기 위해 필요한 것이 무엇인지 이해하고 회의를 떠나야 합니다. 이 단계에서 최종 제품에 영향을 줄 수 있는 모든 요소에 대응합니다. 예를 들어, 귀하의 아이디어가 브랜드 색상이나 사용하는 개발 도구와 어떻게 조화를 이룰까요? 이러한 방식으로 프로젝트를 시작하면 설계 및 개발 프로세스를 보다 효율적으로 만드는 데 도움이 됩니다. 최종 목표는 여러 부서를 거쳐 필터링된 해석을 바꾸는 것이 아니라 재생성할 때마다 점점 더 많은 기능이 추가됩니다. 2. 디자인 반복 '점진적 향상'은 디자인을 완벽한 지점까지 지속적으로 개선하는 방법을 설명합니다. 제품을 만드는 데는 기업에서 절약할 수 있는 거의 모든 리소스가 필요합니다(몇몇 리소스는 사용할 수 없음). 대신 개발자가 모듈을 점진적으로 개발하는 것과 동일한 방식으로 아이디어를 반복하여 충실도가 높은 프로토타입으로 작업하고 싶습니다. 작게 시작하여 효과가 있는 것과 그렇지 않은 것을 확인하고 초기 비전과 실제로 일치하는 제품을 구축하는 것이 훨씬 쉽습니다. UXPin의 Merge 와 같은 UI 디자인 소프트웨어는 효율적인 점진적 향상을 달성하는 좋은 방법을 제공합니다. 더 이상 끝없이 왔다갔다하거나 매번 요소를 재설계할 필요가 없습니다. 완전한 대화형 '라이브 코드' 구성 요소를 사용하여 디자이너는 최종 제품과 정확히 같은 모양, 느낌 및 기능을 가진 디자인을 만들 수 있습니다. 3. 유니폼 유지 모바일 인터페이스는 일관된 디자인을 제공해야 합니다. 모바일 디자인의 일관성이 데스크탑 디자인보다 더 중요하다고 주장할 수도 있습니다. 최소한 우리가 컴퓨터 앞에 앉아 있을 때 두뇌는 전환됩니다. 버튼, 아이콘 및 색상을 균일하게 유지하십시오. 주요 조치의 배치도 일관성을 유지해야 합니다. 우리가 휴대폰을 스크롤할 때, TV를 반쯤 시청할 때 우리는 엄지손가락이 무엇을 두드리는지에 대해 생각 하고 싶지 않습니다. 본능적이어야 합니다. 모바일 UI 에 대해 자세히 알아보세요 . 랜딩 페이지 UI 이해하기 사용자 친화적 랜딩 페이지 UI를 만드는 방법 감정 유발 브랜드 색상, 톤 및 이미지는 비즈니스 성격의 핵심 부분입니다. 그들은 당신을 만드는 것입니다. 당신이 신생 기업이든 베테랑 기업이든, 이들은 모두 사용자에게 의미가 있어야 하며 방문 페이지에 반영되어야 합니다. 초기 설계 단계에서 다음을 결정합니다. 소통하는 메시지 전달하고자 하는 감정들 제시할 성격 귀하의 답변은 귀하의 디자인 형태를 알려줄 것입니다. 온라인 명상 서비스를 제공한다고 가정해 보겠습니다. 랜딩 페이지는 차분한 색상, 차분한 톤, 충분한 호흡 공간이 있는 가벼운 디자인이 필요합니다. 색상 심리학의 힘도 무시하지 마십시오. Canva 에 따르면 '85%의 소비자는 색상이 특정 제품을 선택할 때 가장 큰 동기를 부여한다고 생각하는 반면, 92%는 시각적인 외관이 가장 설득력 있는 마케팅 요소라고 생각합니다.' 이미지 사용 사용자의 관심을 끌고 싶을 때 이미지는 매우 강력합니다. 우리는 이미지에 끌립니다. 이미지는 우리 DNA의 일부입니다. 움직이는 차량과 사람의 얼굴은 시선을 사로잡는 데 특히 효과적입니다. 실제로 매우 효과적이어서 사용자는 사진 속 인물의 시선을 자연스럽게 따라갈 것입니다. 방문 페이지 디자인에서 이러한 트릭을 사용하여 사용자가 어딘가를 보도록 지시하거나 작업을 수행하도록 합니다. 그러나 이미지 배치가 페이지의 구성 흐름을 방해하지 않는지 확인하십시오. 이미지6 1 이미지5 출처: 워드스트림 A/B 테스트 실행 A/B 테스트는 방문 페이지의 사용자 친화성을 측정하는 가장 좋은 방법 중 하나입니다. 예를 들어 서로 다른 클릭 유도문안을 사용하여 두 가지 버전의 페이지를 만드는 것을 볼 수 있습니다. 사용자의 절반은 페이지 A를 보고 나머지 절반은 페이지 B를 보게 됩니다. 이제 어느 것이 더 많은 클릭 또는 가입을 생성하는지 등을 확인할 수 있습니다. 승자가 생기면 계속해서 A/B 테스트를 만들고 멈출 수 없는 랜딩 페이지를 만들 때까지 디자인을 다듬을 수 있습니다. 추가 사용자 테스트를 위해 다른 UI 디자이너와 일반 사용자의 포커스 그룹을 통해 디자인을 실행합니다. 방문 페이지 UI 에 대한 가이드를 확인하세요 . UI 디자인 소프트웨어 선택하기 최고의 UI 디자인 도구 기능 1. 이미지 기반 또는 코드 기반 소프트웨어를 선택할 때 많은 이미지 기반 도구를 접하게 될 것입니다. 디자이너가 인터페이스를 빠르게 목업 할 수 있기 때문에 디자인 세계에서 매우 일반적입니다 . 패드와 연필과 같은 소프트웨어입니다. 아이디어의 초기 불꽃을 머리에서 화면으로 가져오는 데 좋습니다. 그러나 그들은 그 이상으로 갈 수 없습니다. 기능적 요소가 아닌 이미지를 다루고 있습니다. 그것들 은 유형의 제품으로 발전하기에는 너무 생생하고 멋지게 보일 뿐입니다. 코드 기반 UI 소프트웨어를 사용하면 이미지 기반 도구처럼 멋진 디자인을 만들 수 있습니다. 그러나 개발자가 사용하는 것과 동일한 코드로 빌드된 UI 구성 요소를 사용합니다. 디자인은 처음부터 끝까지 일관성을 유지하고 디자인 및 개발 프로세스를 간소화하여 배포 속도를 높입니다. 2. 기능적 충실도 devs와 핸드오프를 통해 고군분투 ? '설명하기 지겹지 만 이렇게 보여야 하나... '? 당신이 상상했던 것과 거의 비슷한 완성품을 보고 당황스럽습니까? 그런 다음 디자인에서 기능 충실도 수준을 높여야 한다는 신호입니다. 저충실도 디자인은 외관만 제공합니다. 이것은 개발자가 실행 가능한 모델로 변환하는 것을 어렵게 만듭니다 . UXPin 에서 만든 것과 같은 충실도가 높은 디자인 은 실제처럼 보이고 작동합니다. 디자인과 개발에 사용되는 구성 요소를 조화시켜 모든 사람이 같은 페이지에 있습니다. 비전은 다른 모든 것과 마찬가지로 일관성을 유지합니다. 3. 함께 일하기 연결된 세상에서 커뮤니케이션과 협업은 그 어느 때보다 쉬워졌습니다. UI 소프트웨어가 이상한 것이 아닌지 확인하십시오. 도구는 함께 작업하고, 최신 업데이트를 공유하고, 프로젝트에 대해 채팅하는 것을 그 어느 때보다 간단하게 만드는 데 맞춰져 있어야 합니다. 클라우드 기반 설계 도구 는 팀 내 및 부서 간 격차를 해소 합니다. 협업 접근 방식을 강조하는 UXPin은 팀이 실시간으로 동일한 설계에 대해 작업하고, 공유 라이브러리에 액세스하고, 피드백을 수집하고, 원격 브레인스토밍 세션을 수행할 수 있도록 합니다. 목업에서 전달까지 단일 온라인 도구에서 전체 디자인 프로세스를 관리할 수 있습니다. 정보에 입각한 선택을 하려면 UI 소프트웨어 도구 에 대한 가이드를 읽으십시오 . 2022년 최고의 UI 및 UX 트렌드 2022년은 UX와 UI 디자인에 어떤 영향을 미치나요? 사용자 인터페이스 디자인 업계의 주요 동향을 확인하십시오 . 1. 로티 애니메이션 롯데애니메이션 의 인기는 계속 높아지고 있습니다. 한 연구에 따르면 지난 4년 동안 애니메이션 기법에 대한 검색이 2300% 급증했습니다. Lottie Animation은 애니메이션을 정말 빠르게 만들 수 있는 오픈 소스 JSON 기반 도구입니다. 그러나 이것을 단순한 GIF로 착각하지 마십시오. 로티는 더 작지만 훨씬 더 나은 이미지 품질을 제공합니다. 또한 디자인을 더 잘 제어할 수 있으므로 사이트에 표시하기 전에 각 디자인을 빌드하고 테스트할 수 있습니다. 롯데 파일 UI 디자인 최근 UI 디자인 분야 에서 애니메이션 이 부활하고 사용자의 관심을 끌 수 있는 기업이 많아짐에 따라 Lottie의 사용자 기반이 성장할 것으로 기대합니다. 2. 코드 기반 도구 디자인 및 개발 팀이 항상 눈을 마주치는 것은 아닙니다. 그렇죠? 디자인은 이런 모양의 제품을 원하지만 개발팀에서는 그런 식으로 작동하지 않을 것이라는 것을 알고 있습니다... 특히 원격으로 작업할 때 이러한 문제를 해결하는 것은 종종 통신 단절의 경우이기 때문에 까다롭습니다. 아무도 같은 언어로 말하지 않습니다. 프로세스의 좌절로 인해 팀은 코드 기반 설계 도구로 전환하고 있습니다. 제품의 모양만 정확하게 표현할 수 있는 이미지 기반 소프트웨어와 달리 코드 기반 UI 도구는 라이브 코드 구성 요소를 사용합니다. 디자이너는 개발자가 사용하는 것과 동일한 코드로 빌드된 요소를 사용하여 대화형 고품질 프로토타입을 자유롭게 제작할 수 있습니다. 즉, 프로토타입은 사이트나 앱 에서와 같이 작동하며 개발자는 이미 각 요소의 기능에 익숙합니다. 3. 음성 UI UI와 UX는 엄밀히 말하면 시각적인 용어로 생각하기 쉽습니다. 결국 가장 일반적으로 나타나는 곳입니다. 그러나 음성 사용자 인터페이스 에서 잠을 자지 마십시오 . Google, Amazon 및 Apple은 모두 AI 기반 스마트 스피커로 VUI 주류를 도왔습니다. 거의 모든 최신 스마트폰에는 이제 음성 기능이 있습니다. 그리고 2025년까지 음성 및 음성 인터페이스 시장은 거의 250억 달러 에 달할 것 입니다. 오디오 청중을 위한 디자인은 새로운 기회(및 몇 가지 도전 과제)를 가져오는 중대한 변화입니다. 그러나 사용자는 점점 더 음성 UI에 익숙해지고 편안해집니다. 2022년은 제품과 상호 작용하기 위한 새로운 접근 방식을 탐색하기에 적절한 시기일 수 있습니다.