🔖 UXUI 해외 주간 아티클 TOP3

🔖 2022년 3월 2주 TOP3

2022년 web3 블록체인 트렌드

이 아티클은 새로운 유형의 애플리케이션에서 몇 가지 일반적인 주제와 트렌드, UXUI의 좋은 예와 나쁜 예를 탐구할 것입니다. 앞서 NFT시장을 다루는 블록체인에서 NFT를 구매하는 UX에 대해 논의한 바 있는데, 여기서는 모든 블록체인 웹사이트와 애플리케이션에서 공통적인 주제를 탐구해보겠습니다.

트렌드

1.지갑을 연결하세요💸

2.실제 화폐💰

3.공통적인 네비게이션 🔎

4.데이터 및 통계🧩

5.흑백 미니멀 UI 🎱

..

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

"엄지 기반 디자인"과 UI가 아래로 이동하는 이유

전화 화면은 점점 커지고 사용자 인터페이스는 움직이고 있습니다.

📍트렌드 관찰 vs 트렌드 메이킹

트렌드 관찰은 자존심이 강한 디자이너의 작업에서 오랫동안 중요하고 필수적인 부분이었습니다. 우리는 트렌드를 따라 새로운 제품과 서비스에 대한 수요를 예측하고, 올바른 브랜드 개발 전략을 만들고, 유망한 틈새 시장을 찾고, 소비자의 욕구를 예측하고, 더 나아가 그들과의 효과적인 커뮤니케이션 채널을 구축합니다. 때때로 우리는 반대 방향으로 가기 위해 패션 트렌드를 관찰합니다.

누구의 눈치도 보지 않고 트렌드를 따르거나 나만의 독특한 제품을 만드는 것은 개인의 선택이며 때로는 매우 어려운 선택입니다.

그러나 트렌드의 의식적인 사용이 확실히 의미가 있는 한 가지 예가 있습니다. 트렌드의 시각적 또는 스타일적 구성 요소만이 아니라 트렌드가 매우 유용할 것이라는 사실을 기반으로 하는 경우입니다. 예를 들어, 사용성 또는 환경 친화성과 관련된 모든 것에서 말입니다.

이러한 추세 중 하나는 사용자 인터페이스를 아래로 이동하는 것입니다. 소위 말하는 하단 탐색입니다. 사용자가 모바일 장치를 잡고 조작하는 방법에 대한 가장 잘 알려진 연구자는 Steven Hoober와 Josh Clark입니다.

📍스마트폰 사용 예

스마트폰 사용은 세 가지 기본 손잡이로 정의되며 우리는 종종 그 사이를 이동합니다. 이것의 핵심은 거의 모든 경우에 세 가지 주요 그립이 가장 일반적이라는 것입니다.  49%는 한 손으로 전화기를 들고, 36%는 한 손으로 전화기를 잡고 다른 손의 손가락이나 엄지손가락으로 두드리고, 나머지 15%는 양손으로 블랙베리 기도 자세를 취하고 두 엄지손가락을 두드린다고 Josh Clark은 말합니다. Steven Hoober는 사용자의 75%가 엄지손가락 하나만으로 화면을 터치한다는 사실을 발견했습니다.  그래서 "엄지 기반 디자인"이라는 개념이 나온 것입니다.

전화기가 작았을 때 대부분의 지역은 쉽게 접근할 수 있었습니다.  화면이 커짐에 따라 전화를 설정하지 않고 상단을 만지는 것이 거의 불가능해졌습니다.  일부 전화 제조업체는 "손가락을 키워라"라고 생각했습니다. 삼성의 7인치 갤럭시 W 및 이와 유사한 화면이 큰 기기는 휴대폰과 태블릿의 경계를 모호하게 만듭니다.

📍모바일 웹 및 하단 탐색

하단 탐색은 때때로 웹에서 나타납니다. 아이디어 자체는 매우 간단합니다. 탐색 컨트롤을 더 아래로 이동하고 만족합니다. 예를 들어 탐색 모음을 맨 아래에 배치하면 사용자가 메뉴 아이콘을 더 쉽게 클릭할 수 있고 보조 항목은 위로 이동할 수 있습니다. 기본적으로 순서를 바꾸면 됩니다. 모바일 앱은 탭 바 패턴과 함께 이 논리를 사용합니다. 이것은 그 자체로 새로운 아이디어는 아니지만 여전히 앱 디자인에서만큼 웹 디자인에서 인기가 있지 않습니다. 이제 사용자 인터페이스를 아래로 이동하는 접근 방식과 하단 탐색을 성공적으로 구현한 예를 제시할 때가 된 것 같습니다.

예) 인터페이스의 핵심을 아래로 이동시키는 방향의 플래그십은 단연 One UI를 가진 삼성입니다. 화면 하위 60%에서 인터페이스와의 모든 상호작용이 이루어지며, 물론 13개의 iOS에서 애플도 마찬가지입니다.

📍하나의 UI 디자인 가이드

iOS와 macOS는 각각 사람들이 기기를 사용하는 다양한 방식에 기반한 사용자 상호작용을 위한 디자인 패턴과 규칙을 정의합니다. 예를 들어 스와이프하여 삭제, 작업 시트 명령 및 화면 하단의 컨트롤과 같은 iOS 규칙은 핸드헬드 장치의 터치 상호 작용에 최적화되어 있습니다. 마찬가지로 전용 키 및 키보드 단축키, 메뉴 명령 및 창 상단의 컨트롤과 같은 macOS 규칙은 키보드, 마우스 및 트랙패드 상호 작용과 별도의 디스플레이에 최적화되어 있습니다.

통제를 아래로 옮기는 것이 의심할 여지 없이 전통적인 최고 경영진보다 승리한 다른 예 중에는 Apple과 Google 제품의 비교가 있습니다. Apple 지도와 Google 지도 애플리케이션을 비교해 보겠습니다. 첫 번째는 하단 탐색 패턴을 사용하고 두 번째는 더 전통적으로 보입니다. 어느 것이 더 유용할 것 같습니까?

Apple과 Google의 다른 유사한 제품인 번역 앱을 살펴보겠습니다. 우리는 같은 것을 보게 될 것입니다. Apple 제품에서 모든 주요 요소가 맨 아래로 이동하여 응용 프로그램을 보다 사용자 친화적으로 관리할 수 있습니다.

한동안 하단 탐색을 사용해 온 거대 브랜드의 두 가지 다른 예는 Instagram과 Tinder입니다.

..

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

모든 디자이너가 가지고 있어야 하는 10가지 Figma 플러그인

1. Lorem ipsum

'Lorem ipsum'을 생성하여 텍스트 레이어를 더미 텍스트로 채웁니다. 'Lorem ipsum'을 생성할 모든 텍스트 레이어를 선택한 다음 '생성'을 클릭하세요. 각 레이어에 대해 고유하게 생성됩니다. '자동 생성'은 선택한 레이어를 기존 프레임에 맞게 'Lorem ipsum'의 완벽한 양으로 자동으로 채웁니다.

2. 스왑

선택한 두 개의 개체를 쉽게 바꿀 수 있습니다.

사용하는 방법:

3. Figma에서 HTML, CSS, React 등으로!

라이브 웹사이트를 Figma 디자인으로 변환

4. 콘텐츠 릴

콘텐츠를 찾아보거나 검색하여 게시된 텍스트 문자열, 이미지 & 아이콘 모음을 찾습니다. 기존 콘텐츠에서 필요한 것을 찾는 데 문제가 있나요? 추가를 사용하여 자신만의 텍스트 &이미지 콘텐츠를 만들 수 있습니다.

5. 이미지 추적기

'이미지 트레이서'는 흑백 비트맵 이미지를 추적하여 벡터 레이어로 변환합니다. 이미지 추적기를 실행할 때 선택한 레이어를 가져와 하나의 이미지로 결합합니다.(이미 벡터인지 여부에 관계없이) — 그런 다음 '흑백'으로 변환하고 새 벡터 레이어로 추적을 시도합니다. 옵션 팝업의 드롭다운을 '원본 이미지'에서 '처리된 이미지'로 변경하여 추적 중인 이미지를 볼 수 있습니다.

6. 비블

Bibble은 이런일들을 도와줍니다.

7. Figma를 Sketch/XD로 변환

한 번의 클릭으로 디자인을 Figma에서 Sketch, Adobe XD 또는 After Effects로 변환하고 내보낼 수 있습니다.

..

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

🎄from.designer 

🗓️ 행사 일정 & UXUI 자료 

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

💭 단톡방 가입문의  (1,900명)

🎥 유튜브 UXUI 공개 영상  

🔖 이메일 

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