2024-08-22
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
한 달 전, 우리는 Huawei Hongmeng NEXT 시스템의 푸시를 받은 후 즉시 실습 경험을 했습니다.
아이파너 편집부 파트너들도 번갈아가며 체험해봤다. 모든 사람이 다양한 브랜드의 일상용 메인폰을 가지고 있지만, 순혈 홍멍에 대한 평가는 대체로 동일합니다.
꽤 매끄 럽습니다.
그리고 거의 모든 소셜 플랫폼에서 "#红梦NEXT Smooth and Silky"라는 주제를 볼 수 있습니다. 저도 같은 생각입니다만, 아직 몇 가지 질문이 있습니다.
한 달 간의 심층적인 경험 끝에 저는 화웨이의 새로운 시스템의 구석구석을 발견했습니다. 아마도 눈에 띄지 않을 정도로 미묘했던 이러한 최적화가 비단결 같은 부드러움의 근원일 것입니다.
그래서 오늘은 작은 것부터 큰 것까지, 점에서 표면까지, 정적에서 동적까지 각 디자인의 '터치 주파수'에 따라 Hongmeng NEXT를 살펴보겠습니다.
아이콘은 정말 중요해요
화면은 인터넷의 창이다.
나는 이 진술이 충분히 정확하지 않다고 생각합니다. 휴대폰에서 실제로 "창/채널"이라고 부를 수 있는 것은 애플리케이션이어야 합니다.
WeChat, Weibo, Xiaohongshu 및 TikTok... 그 중 하나 이상은 거의 매시간 클릭됩니다. 시스템의 다른 부분과 비교할 때 앱 아이콘이 가장 자주 클릭됩니다.
앱 아이콘의 디자인은 스큐어모피즘 - 평면도 - 스큐어모피즘 및 평면도의 자유로운 조정 등 여러 개발 단계를 거쳤습니다.
직설적으로 말하면 시뮬레이션과 간결한 스타일 사이를 오가지만, 정확한 정보 전달 + 통일된 스타일이라는 두 가지 디자인 핵심에 지나지 않습니다.
Huawei는 EMUI-HarmonyOS-HarmonyOS NEXT의 3세대 시스템을 통해 점차 자체 아이콘 스타일을 완성해 왔습니다.
새로운 아이콘 스타일은 "Light Simulation"이라고 불리며 다음과 같은 4가지 매우 분명한 특징을 가지고 있습니다.
①아이콘 개요는 간결하고 이해하기 쉬우며, 어떤 역할을 하는지 한눈에 알 수 있습니다.
② 반투명하고 흐릿한 요소를 겹쳐 쌓아 레이어링감을 표현하는데, 순수 준구체화보다 시각적 무게감이 가볍고 순수 평면 스타일보다 입체적이다.
③ 그래픽 가장자리의 하이라이트 처리를 강화하여 전체적인 질감을 높이고, 눈이 핵심 포인트를 더 빠르게 찾을 수 있도록 그래픽의 핵심 요소를 강조합니다.
④아이콘 후면 패널의 색상은 약간의 그라데이션을 가지며, 하향식 조명으로 묘사된 물체는 강한 색상 그라데이션의 충격과 갑작스러움을 피하여 사람의 눈에 더 자연스럽게 보입니다.
위 4가지 포인트의 애플리케이션 디자인은 바탕화면의 아이콘 심볼을 더욱 통일감 있게 보이게 합니다. 가장 직관적인 느낌은 이것이 그룹 토론의 결과가 아니라 팀에 의해 디자인되었다는 것입니다.
물론, "가벼운 유사 물체"는 일반적인 추세일 뿐이며 실제에 더 가깝고 입체적인 스타일을 좋아하는 사람들이 항상 있기 때문에 수동으로 다른 스타일, 즉 가장자리 그림자로 조정할 수도 있습니다. 더 무거워지고, 디테일이 더 구체적이고, 레이어가 더 세밀해지고 색상이 더 밝아집니다.
▲ 왼쪽은 라이트한 스큐어모픽 스타일, 오른쪽은 스큐어모픽 스타일이다.
스큐어모픽 아이콘조차도 여전히 위의 디자인 원칙을 따르고 있음을 찾는 것은 어렵지 않습니다. 통일된 톤은 시스템 아이콘에도 사용됩니다.
제어 센터, 설정 인터페이스, 시스템 애플리케이션 탐색 모음에는 모두 시스템 아이콘이 있지만 일반적으로 텍스트와 함께 표시되기 때문에 쉽게 간과됩니다.
이것은 시스템 아이콘 디자인의 첫 번째 어려움이기도 합니다. 텍스트 레이아웃과 일관성을 유지하는 방법은 무엇입니까? Huawei의 솔루션은 이미지를 시스템 글꼴과 원활하게 연결할 수 있도록 특성화하는 것입니다.
텍스트 두께의 변화에 따라 지능적으로 적응할 수 있으므로 아이콘이 다양한 텍스트 두께에 유연하게 적응하고 시각적 일관성을 유지할 수 있습니다.
우리는 또한 경험 중에 또 다른 세부 사항을 발견했습니다. Hongmeng NEXT의 시스템 아이콘에는 별 플래시, 손전등, Huawei Share, 눈 보호 모드, 절전 모드 등 모두 독점적인 효과가 있습니다.
새로운 시스템은 나타나기, 사라지기, 바운싱, 크기 조정, 교체, 펄스 및 다양한 색상의 조합을 통해 아이콘에 대한 7가지 동적 효과를 설정합니다.
아이콘 디자인과 시스템 유창성 사이의 관계가 무엇인지 생각할 수도 있습니다.
작은 관점에서 보면 아이콘 애니메이션도 시스템의 일부이며 움직임의 일관성과 일관성은 큰 관점에서 볼 때 시스템의 부드러움에 대한 사용자의 인식에 영향을 미치며 아이콘은 시스템에서 매우 자주 나타납니다. 사용자가 터치하는 횟수도 매우 높습니다.
통일되고 조화로운 디자인을 통해 앞뒤로 전환하는 페이지에서 시스템의 그림자를 볼 수 있어 "혼잡함"을 피할 수 있습니다.
따라서 일관된 정적 요소 설계는 시스템이 원활해지기 위한 기초입니다.
물처럼
애플리케이션 및 시스템 아이콘이 배치된 상태에서 구체적인 사용 시나리오를 살펴보겠습니다.
전체 화면 휴대폰의 응용 프로그램 및 시스템 UI 적용은 항상 너무 "폭력적"이라는 비판을 받습니다. 표준 화면 비율의 응용 프로그램을 더 크고 넓게 만들 뿐이며 더 많은 정보를 표시하기 위해 큰 화면을 최대한 활용하지 않습니다. 두 배의 면적. 초창기 태블릿의 게으른 전략과 같습니다.
편안한 인터페이스는 물과 같아야 합니다. 물은 모양이 어떠하든 항상 용기를 완벽하게 채웁니다.
화웨이는 이 "물과 같은" 적응 솔루션을 "반응형 레이아웃"이라고 부릅니다.
창 컨테이너의 크기가 변경되면 인터페이스 요소가 컨테이너 크기 변경에 맞게 자동으로 변경될 수 있습니다.
Huawei는 페이지 배경, 텍스트, 아이콘, 구성 요소 및 기타 요소를 동시에 확장하여 원활한 전환과 인터페이스 적응을 달성합니다.
다양한 구성 요소는 다양한 페이지의 고정 비율에 따라 크기가 조정될 수 있습니다.
페이지가 변경되면 UI의 레이아웃도 그에 따라 변경됩니다. 메모가 좋은 예입니다.
가로 모드에서는 인터페이스가 두 개로 나누어져 왼쪽에 디렉터리 표시줄이 있고 오른쪽에 보조 메뉴가 있습니다. 이는 단일 디렉토리 표시에서 과도한 확장과 과도한 공백을 방지할 뿐만 아니라 수평 화면 공간을 최대한 활용합니다.
보다 구체적인 소형 구성 요소를 적용하기 위해 Hongmeng NEXT는 자체 모양과 정보 밀도를 변경하여 다양한 크기에 적응합니다.
이는 데스크탑 위젯의 디자인 아이디어와 매우 유사합니다. 폴더의 크기를 변경하고 데스크탑의 빈 공간에 맞게 다양한 크기의 서비스 카드를 사용합니다.
반응형 레이아웃 솔루션은 많지만 기본 논리는 완전히 동일합니다.
구석에 숨겨져 있는 이러한 적응 솔루션은 소프트웨어와 하드웨어의 통합도 촉진합니다.
Hongmeng NEXT의 분할 화면이 매우 좋습니다. 기존 솔루션에서는 두 개의 화면을 분리할 수 있으면 작업이 완료됩니다.
그러나 이를 기반으로 새로운 시스템은 작은 창의 모서리도 화면의 R 모서리와 동일한 곡률로 자릅니다.
솔직히 윈도우나 화면의 디자인은 이래야 하는데, 안드로이드 시스템은 너무 많은 브랜드와 모델에 적응해야 하기 때문에 완벽한 적응이 큰 문제가 되었습니다.
그리고 이것은 또한 순혈 홍몽 시스템이 가져오는 추가적인 이점이기도 합니다. 기본 시스템은 이 브랜드의 모델을 제공하도록 설계되었으며 다른 시스템을 고려할 필요가 없습니다.
2D 화면에서 3D 아트 재생
한 달 전, "Hongmeng NEXT의 UI는 어떤 업그레이드가 있었나요?"라고 물으셨다면,
"반투명 유리"라는 특수 효과 레이어가 여러 곳에 추가되었다는 점만 말씀드릴 수 있지만 단일 요소를 추가하는 것만으로는 시스템의 부드러움을 수준별로 향상시키기가 어렵습니다.
그것을 달성하고 사용자에게 "매끄럽다"고 인식되기를 원한다면 실제로는 체계적인 프로젝트이므로 모든 것을 고려해야합니다. 한 달 간의 경험 끝에 나는 순혈 홍몽의 원활한 작동을 두 부분으로 분류했다.
먼저 레이어링을 살펴보겠습니다. 반투명 유리(흐림) 효과는 앱 열기 및 닫기, 네거티브 원 스크린, 드롭다운 검색, 배경 닫기, 화면 분할 및 이동 분할과 같은 장면에서 주로 나타납니다. 윤곽.
이전 시스템에 비해 실제로 더 많은 흐림 효과가 있지만 동시에 추가된 애니메이션과 바탕 화면 아이콘의 크기 조정을 통해 상호 작용 중 현실이라고 부르는 인간 눈의 초점을 맞추고 초점을 맞추는 과정을 시뮬레이션할 수 있습니다. 두 가지가 결합된 효과의 결과입니다.
데스크탑의 리프팅 효과는 스케일링을 통해 시뮬레이션되며, 이는 시스템의 계층적 관계도 직관적으로 반영합니다.
앱 열기, 새 작업 생성, 화면 잠금 해제 등은 모두 상위 및 하위 수준에 속합니다. Hongmeng NEXT는 이러한 유형의 전환에 대해 여러 애니메이션 효과를 설정했습니다.
또한 교차 레벨과 동일한 레벨 사이의 스위치도 있으며 해당 애니메이션도 있습니다.
계층적 관계를 세분화하고 다양한 특수 효과를 적용함으로써 하나는 레이어를 통해 시스템의 입체감을 강화하고 전환을 덜 경직되게 만드는 것이고, 다른 하나는 비선형 애니메이션을 각 전환에 통합하여 작동이 가능하게 됩니다. 더 부드러워진 것 같습니다.
공식 웹사이트의 데모 비디오는 비선형 애니메이션이 유창성에 미치는 영향을 잘 보여줍니다.
Huawei의 계층적 관계 최적화는 큰 페이지 전환에만 국한되지 않고 작은 아이콘에도 중점을 둡니다.
새 시스템의 모든 곳에서 다음과 같은 일회성 애니메이션을 볼 수 있습니다.
검색 상자 강조 표시, 앱 아이콘 확대/축소 또는 기능 키 켜기/끄기 등 이 시스템에서는 항상 모양, 색상, 변위 및 크기 조정과 같은 일련의 방법을 사용할 수 있습니다. 전환이 일어나도록 하세요. 과정이 더욱 자연스러워집니다.
공식 통계에 따르면 전환은 시스템에서 가장 높은 비율을 차지하는 동적 효과 유형으로 60% 이상에 도달합니다. 이것은 또한 많은 사람들이 Hongmeng NEXT를 시작한 후 더 부드러워진 느낌을 받는 근본적인 이유 중 하나입니다. 어디에서나 볼 수 있습니다.
어디에나 있는 '공허의 샘'
동료가 나와 공유한 예가 기억납니다.
오늘날 아이들이 화면을 볼 때 가장 먼저 보이는 반응은 리모컨을 찾는 것이 아니라 손가락으로 클릭하거나 밀어주는 것입니다.
전체 화면 시대에 디지털 제품과 상호 작용하는 신세대의 방식은 완전히 반복되었습니다. 슬라이딩과 탭핑이 대부분의 가전 제품의 입력 방법이 되었으며 Z축 프레스는 죽어가고 있습니다.
피처폰의 버튼은 손에 닿는 느낌이 더 좋고 물리적인 터치 확인이 확실하기 때문에 많은 사람들이 버튼을 놓치게 됩니다.
터치스크린이 비판받는 이유이기도 하다. 피드백 부족이다. 주요 제조사들도 평면 스크린에 안정적인 물리적 움직임을 복원하기 위해 모터 진동(촉각), 음향 효과(청각) 등 다양한 방법을 사용합니다.
시스템 아이콘의 애니메이션은 시각적 확인 기능이 향상되었습니다.
Hongmeng NEXT의 "중력 동적 효과 시스템"은 다양한 동적 효과를 통해 움직이는 동안 물체의 "힘"을 시뮬레이션하여 대화형 작업을 생생하게 만듭니다.
화웨이는 존재하지 않는 스프링에 힘을 구현하여 Hongmeng NEXT의 구석구석을 가득 채웠습니다.
예를 들어, 페이지를 슬라이드할 때 상단, 하단, 왼쪽 및 오른쪽 경계에 "스프링"이 있으며 경계에 도달한 후 매우 자연스러운 리바운드 효과가 있어 끝에 도달했음을 알려줍니다.
일정량의 탄성 공간을 남겨두면 우발적인 접촉을 방지하고 시스템이 너무 민감해져서 밀리미터 수준의 작업에서 힘을 사용하고 조심해야 하는 것을 방지할 수 있습니다.
더욱이, 모든 곳의 가상 스프링은 어느 정도 광범위한 부드러운 작동을 촉진할 수 있습니다. 몸 전체가 단일 동작으로 연결되어 실제 리바운드 효과에 가깝습니다.
물리적 세계의 모션 효과를 복원하면 사용자의 학습 비용을 절감할 수 있으며, "이것이 바로 이렇다"라는 생활 습관에 따라 작동함으로써 새로운 장치와 시스템을 빠르게 시작할 수 있습니다.
이미 제스처 조작이나 홍멍 시스템에 익숙한 사람들에게는 손과의 상호작용이 가장 중요합니다.
공식 Huawei 개발자 웹사이트에는 다음 문장이 있습니다.
애니메이션 효과는 항상 조작에 초점을 맞춰야 하며 사용자의 심리적 기대에 부합해야 하며, 객체의 움직임은 현실 세계에 부합해야 합니다.
제품 엔지니어는 3차원 세계의 모든 것을 2차원 화면으로 압축하기 위해 최선을 다하고, 제품 관리자는 2차원 디스플레이에 실제 세계를 모방하기 위해 머리를 곤두세웁니다.
▲ 사진출처: rauno.com
최종 분석에서 상호 작용 디자인에 대한 심층 연구는 실제로 우리 자신에 대한 더 깊은 이해입니다. 어떤 시나리오에서 슬라이딩이 필요한가요? 전환 중에 특수 효과를 어떻게 정렬합니까? 한 손가락으로 99%의 작업을 처리하는 방법은 무엇입니까?
당신이 나와 같고 버튼 머신에서 전체 화면으로 단계적으로 전환했다면 휴대폰의 대화형 시스템이 실제로 우리에게 더 적합하다는 것을 찾는 것이 어렵지 않습니다. 생각하고 공부할 필요가 거의 없습니다. 그것.
시스템 상호 작용의 존재를 인식하지 못할 때, 이는 시스템에 대한 가장 큰 칭찬입니다. 위의 모든 세부 사항 고려 사항이 제품을 우리 신체의 자연스러운 확장으로 만들었기 때문입니다.
