🔖 2021년 10월 3주 TOP3

🔖 2021년 10월 2주 TOP3

iOS 15 UI 디자인 변경 사항

iOS 15가 출시되었으며 OS에 꽤 흥미로운 UI 변경 사항이 있습니다.  홈 화면에서 가장 큰 시각적 차이는 완전히 새로운 날씨와 지도 아이콘입니다.  일반적인 스타일은 더 만화적인 스타일로 향하고 있으며, 날씨 아이콘은 글라스모픽(glassmorphic) 모양의 구름이 있고 지도에 대담하고 강한 색상이 있습니다.

또한 새 지도 아이콘은 운전과 기타 교통 수단 모두에서 길찾기 기능에 초점을 맞추고 있습니다.

날씨와 지도 앱도 새로워졌습니다. 날씨는 이전보다 더 많은 정보를 표시하더라도 아름다운 애니메이션과 전반적으로 더 친근한 분위기를 갖게 되었습니다.  지도는 이제 익숙해져야 할 일부 색상 선택과 함께 정보의 명확성에 훨씬 더 중점을 뒀습니다.

UI 혁명?

지금까지 가장 큰 혁명은 사파리(Safari)에 있었습니다.  주소 표시줄은 이제 키보드에 더 가까운 하단에 있으며, 탭 간에 이동하려면 스와이프(swipe)할 수 있습니다.  이것은 처음에는 정말 어색했습니다. 몇 년이 지난 지금, 저는 이것이 실제로 어떻게 더 쉽고 더 나은 방법이 될 수 있는지 확실히 알고 있습니다.

저는 또한 애플(Apple)이 그런 과감한 움직임을 두려워하지 않는다는 사실을 좋아합니다. 그것은 우리가 익숙한 것에서 크게 벗어나는 무언가를 테스트하는 것입니다.  특히 많은 사람들이 UI를 "강제적으로" 사용해야 하는 상황에서 미래의 UI를 발전시키는 방법입니다.  그것은 우리가 웹을 어떻게 사용하는지에 대한 흥미로운 발견으로 이어질 수 있습니다.

실수를 인정합니다

한편, 그들은 또한 불편한 필드 내 타임피커(time-pickers)를 되돌렸습니다.  그 실험은 잘 되지 않았기 때문에, 익숙한 큰 피커(picker)가 이를  대체하는 것은 좋은 일입니다. 그 경험은 작은 팝업에서도 여전히 작은 텍스트 필드 내에서 스크롤하는 것보다 훨씬 더 친숙하고 간단합니다.

이러한 업데이트에 대해 어떻게 생각하십니까?  대부분의 경우 변화는 매우 미묘하고 반복적인 업데이트에 가깝지만, 보다 혁신적인(사파리, Safari)를 도입하고 더 나은 패턴을 가져오기 위해 정보에 입각한 결정을 내리는 과정을 보는 것이 흥미롭습니다.  iOS 16이 사라피(Safari) 주소 표시줄을 다시 맨 위로 이동할지 누가 알겠습니까?  그러나 적어도 그들은 새로운 것을 시도했습니다.

.  .

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

크기의 중요성 : 디자인에 적용된 피츠의 법칙

눈치 채셨다면, 비상 버튼은 항상 큰 빨간색 버튼이며, 자동차의 브레이크 패들은 항상 세 개의 페달 중 가장 큽니다.

자주 사용하고 즉각적인 주의가 필요한 버튼은 항상 더 크고 눈에 잘 띄는 버튼입니다. 따라서 자연스럽게 접근하기가 더 쉬워지거나, 최소한 더 쉽게 접근할 수 있게 됩니다.

키패드도 마찬가지입니다. 가장 많이 사용되는 버튼 (Ctrl, Shift, Backspace, Enter 및 Space)은 키패드 모서리에 배치되어 손가락을 쉽게 뻗을 수 있으며 나머지 버튼보다 상대적으로 큽니다.

이 모든 것은 잘 조사된 연구인 피츠의 법칙을 기반으로합니다.

피츠의 법칙에 대한 연구

1954년 폴 피츠에 의해 처음 연구된 이 정신 모델은 결국 인간 운동의 가장 연구된 모델 중 하나가 되었습니다.

그는 한 지점을 목표물로 이동하는 데 걸리는 시간이 목표물의 크기에 반비례하는 반면, 둘 사이의 거리에 정비례한다는 것을 확인했습니다. 또한 이동 속도가 빨라지고 대상이 작을수록 오류가 발생하기 쉽습니다.

간단히 말해서, 더 작은 목표를 쉽게 또는 정확하게 달성하는 것이 더 어렵고 더 많은 시간이 소요됩니다.

당신은 피츠의 법칙 모델을 직접 실험해 볼 수 있습니다. 빨간색 원을 가능한 한 빨리 클릭하여 오류를 최소화하는 것이 가장 좋습니다.

피츠가 프로덕트 디자인에 미치는 영향

디자이너는 피츠의 법칙을 적용하여 프로덕트의 사용성을 개선 할 수 있습니다.

목표는 사용자의 작업 영역과 작업 관련 버튼 사이의 거리를 줄여 생산성을 높이고 커서 이동을 최소화하는 것입니다. 또한, 인터페이스의 가장 적합한 상호작용 요소의 크기를 추정하는 데에도 적용됩니다.

다음은 SlideShop이 왼쪽 하위 카테고리 표시 줄의 '장바구니 추가'버튼을 교체하여 참여도를 8.9% 증가시키고 장바구니에 추가하는 비율을 34% 증가시킨 방법에 대한 사례 연구입니다.

..

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

플랫 디자인 vs 머티리얼 디자인 일부 역사

앱, 웹 사이트 또는 기타 시각적 및 대화형 경험을 만들 때 많은 의사 결정 프로세스가 관련됩니다. 레이아웃, 콘텐츠 및 전체적인 디자인은 최종 제품이 어떻게 보일지에 큰 영향을 미칩니다. 프로젝트가 성공하기를 원한다면 현명한 선택을 해야 합니다. 그리고 제 말을 믿으세요. 그렇게 쉬운 일이 아닙니다. 전체 다중 페이지 지침은 이러한 작업에 따른 약간의 고통을 덜어주기 위해 작성되었습니다. 이에 대해 자세히 살펴보겠습니다.

오늘 아티클에서 우리는 그러한 지침 중 2가지에 대해 논의할 것입니다. 또는 플랫 디자인과 머티리얼 디자인이라고 하는 디자인 시스템이라고 해야 할까요? 그것들은 무엇이며 목적은 무엇이며 어떤 것을 선택해야 합니까(있는 경우)? 더 이상 고민하지 않고 시작하겠습니다!

일부 역사

그래서 초기에는 혼돈이 있었고... 나머지 이야기는 잘 아실 겁니다. 하지만 진지하게, 우리가 지금 알고 있고 사랑하는 웹사이트와 앱의 시대가 시작되었을 때 (유비쿼터스 GIF를 제외하고) 그 사이에는 거의 일관성이 없었습니다. 오해하지 마세요. 지금은 모두 똑같아 보이지 않지만 적어도 가독성, 균형 잡힌 색상 팔레트, 때로는 전체 디자인 시스템과 같은 몇 가지 기본 원칙을 공유합니다!

디자인 시스템

디자인 시스템 얘기가 나와서 말인데, 정확히 무엇인가요? 간단히 말해서, 디자인 시스템은 균형 잡힌 디자인 지침을 형성하기 위한 규칙, 원칙 및 제약 조건의 집합입니다. 좋은 디자인 시스템은 모든 제품이 비슷하고 연결되어 있다고 느끼는 생태계와 같아야 합니다. 아주 기본적인 설명이지만, 원한다면 이 멋진 Muzli 블로그 게시물에서 이 흥미로운 개념에 대해 자세히 알아볼 수 있습니다.

스큐어모피즘

스큐어모피즘은 가상 사용자 인터페이스(UI)에 사용된 가장 영향력 있는 디자인 시스템 중 하나입니다. 그 배경에는 가상 요소가 실제 상대방을 느끼고, 보고, 대표할 수 있도록 하는 것이 있습니다. 그림자와 그라디언트를 많이 사용합니다.

스큐어모픽(skeuomorphic) 디자인을 통해 실제 객체에 익숙한 사용자가 가상 세계로 쉽게 전환할 수 있습니다. 그 좋은 예가 2007년에 출시된 iOS(당시에는 iPhone OS) 운영 체제를 탑재한 오리지널 iPhone입니다. UI를 통해 사용자는 가상 전자책을 읽거나 연락처 목록을 스크롤할 때 집과 같은 편안함을 느낄 수 있습니다.

아이폰과 아이패드가 최초라는 사실을 감안할 때, 그들은 다음과 같은 디자인과 트렌드에 많은 영감을 주었습니다. 모바일 기기의 등장과 함께 스큐어모피즘의 사용이 정점에 달했지만, 곧 Windows 8(2012), iOS 7(2013), Mac OS(2014)와 같은 제품이 다른 디자인 시스템으로 전환되면서 스큐오모피즘의 사용이 중단되었습니다.

스큐어모피즘은 여전히 예전만큼 많지는 않아도 꽤 많은 응용 프로그램과 이를 뒷받침하는 지지자가 있습니다. 왜 그럴까요? 대부분 그것의 기본 원리 때문입니다. 가상 환경에서 실제 개체를 모방하는 것은 매우 제한적일 수 있습니다. 현대 UI가 점점 더 복잡해짐에 따라, 변화가 이루어져야 했습니다.

보다 현대적인 디자인 시스템은 (특히 젊은 사용자들로부터) 대부분 긍정적인 반응을 보였지만, 일부는 스큐어모피즘이 다시 돌아오기를 바랍니다. 개인적으로, 저는 현재의 디자인 트렌드를 좋아하고,  "오래된" 트렌드가 눈에 띄는 복귀를 할 방법을 찾지 못하고 있습니다. 하지만 누가 알까요? 단지 시간이 말해 줄 것입니다.

..

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

🎄from.designer 

🗓️ 행사 일정 & UXUI 자료 

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

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

🎥 유튜브 UXUI 공개 영상  

🔖 이메일 

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