🔖 UXUI 해외 인기 아티클 TOP3

🔖 2023년 2월 3주

1️⃣ UX/UI 팁: 모바일 UX 디자인 가이드 

2️⃣ 2023년 UI/UX 디자인 트렌드

3️⃣ 시각 디자인 기초: 레이아웃

1️⃣  UX/UI 팁: 모바일 UX 디자인 가이드

모바일 사용자 경험 디자인(UX)은 모바일 장치를 사용할 때 긍정적이고 매력적인 경험을 창출하는 것입니다. 전 세계 66억 명 이상의 스마트폰 사용자가 하루 평균 4시간을 휴대전화에서 사용하므로 사용자에게 즐거움과 정보를제공하는 경험을 제공하는 것이 그 어느 때보다 중요합니다.

1. 엄지 위치

엄지 손가락 친화적인 탐색 디자인은 화면과 상호 작용할 때 엄지 손가락이 가장 편안한 모바일 장치 영역을 설명합니다. 중요한 링크는 접근하기 쉬운 영역 내에 배치해야 하며, 이러한 영역 내에 있는 작업에 대한 주요 호출을 설계하는 것을 목표로 합니다.

2. 터치 영역

모바일 장치의 터치 영역과 제어 크기는 사용자 엄지 손가락의 손재주와 손재주에 따라 작동해야 합니다. 작은 터치 대상은 사용자를 짜증나게 하고 좌절시킬 수 있으므로 사용자가 쉽게 탭할 수 있을 만큼 충분히 큰 대상을 고려하고 설계해야 합니다.

모바일 아이콘 또는 대상을 48 x 48 픽셀로 구성하는 것이 가장 좋습니다. 이렇게 하면 엄지 또는 손가락이 아이콘 내에 잘 맞을 수 있습니다.

3. 글꼴 크기

글꼴은 명확한 가독성을 제공하는 동시에 디지털 인터페이스의 시각적 정체성과 개성에 필수적입니다. 모바일용으로 디자인할 때 작은 화면 크기를 고려하여 사용자가 콘텐츠를 쉽게 읽고 소화할 수 있도록 더 큰 글꼴을 사용하는 것이 중요합니다.

글꼴 크기를 12포인트 이상으로 설정하는 것이 가장 좋으며 권장 크기는 16입니다. 이렇게 하면 사용자가 장치의 거리를 확대하거나 조정하지 않고도 콘텐츠를 읽을 수 있습니다.

타이포그래피를 고려할 때 다음 사항이 중요합니다.

4. 내비게이션

이해하기 쉽고 명확한 탐색 패널을 통해 사용자는 직관적이고 이해하기 쉬운 방식으로 화면과 플랫폼 영역 사이를 이동할 수 있습니다.

탐색 패널은 전반적으로 사용되는 일반적인 패턴과 친숙한 아이콘으로 깨끗하고 최소한이어야 합니다. 고려된 정보 아키텍처는 플랫폼의 골격 역할을 하는 구조를 생성하여 사용자가 특정 항목을 검색하고 발견할 수 있도록 합니다.

Good

Kohl's를 사용하면 가장 높은 평점을 받은 리뷰나 별표 평점별로 제품을 필터링할 수 있습니다. 이러한 옵션을 통해 고객은 쇼핑의 출발점으로 높은 평점을 받은 제품의 우선 순위를 지정할 수 있습니다.

..👇 더 자세한 내용은 아래 원문에서 확인해주세요.

2️⃣ 2023년 UI/UX 디자인 트렌드

패션, 라이프스타일, 취미, SNS 등 우리 삶의 모든 부분에는 트렌드가 있습니다. 트렌드를 따르는 제품은 사용자의 마음을 사로잡고 시장에 오래 머물 가능성이 높습니다. 모바일과 웹 디자인도 마찬가지입니다.

사람들의 취향이나 효과적인 전략에 따라 매년 변화하는 경향이 있습니다. 숙련된 전문가들은 항상 프로젝트를 최신 상태로 유지하기 위해 그들을 따릅니다. 모바일 앱과 웹 사이트 모두에서 2023년에 인기 있는 UI/UX 디자인 트렌드를 수집했습니다. 비즈니스 오너는 제품에 대한 아이디어를 찾고, 디자이너는 영감, 기능 구현의 새로운 방법 및 기타 중요한 팁을 발견하길 바랍니다.

가상 현실

가상 및 증강 현실은 비디오 게임 산업에서 널리 사용됩니다. 이러한 기술은 디지털 세계를 우리 자신의 물리적 차원과 연결합니다. 이 기능은 사람들의 능력을 확장하고 디지털 개체와 상호 작용할 수 있도록 합니다. 예를 들어 유명한 포켓몬 모바일 게임은 사용자가 AR을 이용하여 도시를 돌아다니며 카메라로 포켓몬을 잡을 수 있도록 합니다.

2023년에는 가상 현실이 다른 영역, 특히 전자 상거래에서 눈에 띄게 향상될 것입니다. AR을 통해 회사는 최고 관점의 제품을 제시하고 잠재 고객에게 더 가까이 다가갈 수 있습니다. IKEA Place 모바일 앱이 완벽한 예입니다. 회사 가구를 집에 가상으로 배치하고 배치해 자신의 취향에 맞는지 확인할 수 있습니다. 잠재 고객에게 제품을 홍보하는 완벽한 방법입니다.

Facebook Meta와 같은 VR 툴킷을 사용하면 사용자가 자신만의 디지털 세계를 만들고 서로 상호 작용할 수 있습니다. 이러한 기술은 회의, 강의, 연구 등에 적합합니다. 이러한 디지털 환경을 통해 기업은 블록체인을 사용하여 제품을 제공하고, 온라인으로 판매할 수도 있습니다.

최근 연구에 따르면 AR을 기반으로 한 제품과의 상호 작용은 전환율이 94% 더 높다고 합니다. 이 기술을 통해 고객은 제품을 이리저리 옮기거나, 입어보거나, 집 안 곳곳에 놓을 수 있기 때문에 놀라운 일이 아닙니다.

이러한 UI 트렌드는 웹사이트에도 확산되고 있습니다. 화장품, 의료 및 소매 회사는 AR의 이점을 누릴 수 있습니다. 기술은 온라인 상점, 메신저, 스트리밍 서비스, 소셜 네트워크 등을 실제로 향상시킵니다.

더 빠른 페이지 로드 속도

이 경향은 웹 사이트 응답을 높이는 데 목적이 있습니다. 페이지가 로드되는 동안 기다릴 여유가 있는 사람은 거의 없습니다. 우리 대부분은 탭을 닫고 다른 리소스로 전환합니다. 약 70%의 소비자가 로딩 속도가 웹사이트에서 무엇이든 구매하려는 욕구에 영향을 미쳤다고 말했습니다. 회사가 막 제품을 출시할 때 빠른 대응은 매우 중요합니다. 느린 속도는 명성 또한 손상시킵니다.

그렇기 때문에 UI/UX 디자이너는 웹 개발자와 함께 페이지 응답을 최적화해야 합니다. 예를 들어 비디오 파일 형식, 이미지 무게, 서버 안정성 등의 작업이 있습니다. 사용되는 서체의 수가 줄어드는 것도 워크플로 속도를 높이고 디자인을 개선하는 데 도움이 됩니다.

웹사이트의 모바일 버전의 경우 AMP(가속 모바일 페이지)를 사용할 수 있습니다. 이는 Google의 오픈 소스 프로젝트로, 특수 HTML 및 CSS 버전을 사용하여 스마트폰에서 페이지 속도를 높입니다. 일반 웹 페이지와 비교하여 AMP 버전은 2.5초 더 빠르게 로드됩니다. 결과적으로 사용자 전환 및 유지뿐만 아니라 경험을 향상시킵니다.

크로스 플랫폼 개발에 집중

매일 우리는 태블릿, 스마트폰, 데스크톱, 스마트워치 등 다양한 종류의 기기를 사용합니다. 일부 기기에는 고유한 운영 체제가 있습니다. 영향력을 확산하기 위해 회사는 사용 가능한 모든 플랫폼에서 애플리케이션 또는 웹 사이트를 제작하는 것을 고려해야 합니다.

각 장치에는 UI/UX 디자인과 관련된 것을 포함하여 고유한 특수 요구 사항과 특성이 있습니다.

걸음 수 추적 앱은 스마트폰에서 멋지게 보일 수 있습니다. 하지만 화면 공간이 너무 작기 때문에 스마트워치에서는 완전히 다른 인터페이스를 가져야 합니다. 또한 사용자는 기기를 전환할 때 다양한 경로를 거치게 되는데, 그 부분에 대한 연구가 필요합니다.

학습

우리는 최신 머티리얼 디자인 가이드라인을 연구하고 Todoist와 가장 관련이 있는 구성요소와 관행을 평가함으로써 프로젝트를 진행했습니다.

프로젝트가 2021년 2월에 시작되었을 때, Material 2는 디자인 시스템의 가장 최신 버전이었습니다. Material 2는 이미 출시된 지 꽤 되었기 때문에 Material에 대한 디자인 변경 사항은 곧 2021년 5월 Google I/O 이벤트에서 발표될 것으로 예상했습니다. 변경 사항이 반복될 것으로 예상했기 때문에 기다리기 보다는 일을 병행하며 진행해나갔습니다.

앱 전체에서 변경하고 싶은 25개의 구성 요소와 UI 패턴을 확인했습니다. 변경 사항에는 버튼, 형태, 메뉴, 시트, 탐색 창, 앱 바, 시스템 표시줄, 텍스트와 색상 스타일 등이 포함됩니다. 구성 요소 변경 사항과 Google의 머티리얼 디자인 가이드라인에 대한 참조 링크가 포함된 Dropbox Paper 문서에 테이블 보기를 만드는 것으로 시작했습니다.

이 구성 요소 목록은 변경 사항의 범위와 복잡성을 계획하기 위한 논의의 출발점이었습니다. Twist와 Dropbox Paper 코멘트에서 디자인과 개발 팀 간의 긴밀한 비동기식 토론을 통해 범위와 복잡성에 대한 결정을 조기에 내리고 프로젝트를 위한 탄탄한 기반을 마련할 수 있었습니다.

..👇 더 자세한 내용은 아래 원문에서 확인해주세요.

3️⃣  시각 디자인 기초: 레이아웃

사용자를 화면의 가장 중요한 부분으로 매끄럽게 그리고 안내합니다.

레이아웃은 인터페이스를 통해 독자를 안내하기 위해 요소를 정렬하는 방법입니다. 레이아웃은 사용자 측에서 디자인의 생산성과 효율성을 향상시키기 위해 다양한 의도를 유도하기 위해 다양한 컨텍스트에서 사용될 수 있습니다.

외부 세계에서 찾을 수 있는 가장 유명한 레이아웃 중 하나는 맥도날드가 만든 패스트푸드 조립 라인으로, 회사의 효율성과 이익을 높이는 생산 시간을 개선하려는 의도로 역할, 작업 및 시간을 지정합니다.

그리드 시스템을 포함하지 않는 레이아웃에 대한 이야기는 없습니다. 디자이너는 그리드 시스템을 구조로 사용하여 디자인에 구체적이고 일관된 측정을 제공하는 레이아웃을 생성하며, 이는 디자인이 여러 장치에 표시되는 데에도 도움이 됩니다. 레이아웃은 디자이너가 콘텐츠가 표시되는 방식과 인터페이스의 동작 방식을 정의할 수 있는 부동산 프레임워크입니다.

모듈식 레이아웃은 디자인 캔버스(아트보드, 페이지, 화면 등)를 독립적으로 작동하고 여러 디자인 간에 생성, 교환 또는 재정렬할 수 있는 더 작은 하위 분할로 분할하는 방법입니다.

여러 플랫폼용으로 설계하는 동안 모듈도 중요합니다. 디자인을 재정렬하여 여러 장치에 표시할 수 있습니다. 모듈의 크기는 콘텐츠의 의도, 강조, 우선순위에 따라 달라질 수 있지만 열의 수 측면에서 설정해야 하므로 그리드 시스템을 먼저 설정하는 것이 중요합니다.

시장에서 우리는 여러 디스플레이 해상도를 찾을 수 있으며, 이것이 바로 우리가 이들에 걸쳐 작동할 수 있는 그리드 시스템을 만드는 이유입니다. 가장 일반적인 그리드 시스템은 12열 그리드 시스템입니다. 유연성과 6개의 가능한 대칭(1, 2, 3, 4, 6, 12열로 분할)과 훨씬 더 많은 비대칭 레이아웃으로 분할할 수 있는 기능 때문입니다.

UI를 볼 때 레이아웃이 분할된 열 수를 식별할 수 있지만 여전히 사용된 그리드 시스템을 알아야 합니다. 다음 예에서는 6개의 열 레이아웃이 표시되지만 배경에는 여전히 12개의 열 그리드 시스템이 남아 있습니다.

6열 레이아웃

6열 레이아웃과 동일하게 디자인할 수 있는 여러 레이아웃 구성이 있지만 꽤 일반적인 구성도 있습니다.

이 디자인에서는 사용된 레이아웃에 단 1열(전체 12열 그리드)이 있음에도 불구하고 여러 섹션이 강조 표시(빨간색 윤곽선으로 표시됨)되어 있습니다. 이는 내부 요소가 테이블이나 탐색 모음과 같은 고정된 구조를 가지고 있지 않기 때문입니다. 콘텐츠에 따라 동적 측정 및 정렬이 있는 경우 혼란을 피하고 화면의 실제 상태를 적절하게 중화하는 1열 레이아웃을 사용하는 것이 좋습니다.

2열 레이아웃

이 레이아웃은 아래 예와 같이 화면을 2등분(6/6)으로 나눌 때 대칭이 될 수 있습니다. 그러나 그리드를 사용하면 섹션의 요구 사항이나 목적에 따라 열의 크기를 조정할 수 있습니다. 아래 예제에서는 설계에서 2개의 열 레이아웃을 사용하지만 공간의 비대칭 분포(9/3)를 사용합니다. 이것은 구성 요소가 더 많은 계층 구조를 가지고 있고 디자인의 주요 상호 작용 부분이기 때문입니다.

..👇 더 자세한 내용은 아래 원문에서 확인해주세요.

🎄from.designer 

🗓️ 행사 일정 & UXUI 자료 

디자이너 공유, UXUI 스터디 참관, UX 발표자료 공유등 다양한 정보를 노션에서 확인하세요.

💭 단톡방 가입문의  (2,070명)

🎥 유튜브 UXUI 자료 영상  

🔖 이메일 

📍 SNS   @from.designer 페이스북 , 인스타그램