예상 읽기 시간 : 13분 34초 (단어 4050개, 사진 13장)
그림 제작 도구 : Figma, XMind
앱을 소유한 후 체험하는 과정 car , 우리는 애플리케이션에 정보 목록, 게시물 목록, 입소문 목록, 댓글 목록 등과 같은 다양한 유형의 목록 페이지가 많이 있다는 것을 발견했으며 이러한 목록 페이지는 모두 우리에게 동일한 내용을 제공합니다. 느낌: 지저분하고 단어가 빽빽하게 들어 있습니다. 이러한 인터페이스를 다른 동료들에게 보여주고 경험해 본 후 우리가 받은 피드백은 지저분해 보이고 어디를 봐야 할지 모르겠다는 것이었습니다.
이 문장을 디자인 언어로 변환해보면 이러한 인터페이스의 가장 큰 문제점은 정보 수준이 혼란스럽고 시각적 흐름이 좋지 않다는 점을 알 수 있습니다.
이 인터페이스 상태가 사용자에게 미치는 영향은 인터페이스의 첫 번째 시각적 초점을 찾는 것이 불가능하고, 탐색 프로세스가 힘들고, 주요 정보 및 콘텐츠 획득이 비효율적이며, 검색이 어렵다는 것입니다. 이해하다.
기존의 어떤 디자인 디테일이 이런 문제를 일으키고, 이에 상응하는 경험 문제가 발생하는지 더 생각해 보겠습니다. 동시에 해당 최적화 솔루션을 찾으십시오.
위의 내용은 주로 시각적 표현 기법의 관점에서 인터페이스의 세부 사항과 해당 최적화 솔루션을 생각하는 것입니다. 예를 들어 시각적 요소는 크기, 색상, 위치, 거리 등으로 구성되어 사용자에게 명확한 시각적 정보 구조를 제공합니다.
하지만 그보다 더 중요한 것은 인터페이스의 정보를 요약, 정리하고 정보 계층 구조를 명확히 하는 것입니다. 그렇지 않으면 정보가 정확하게 전달되지 않을 수 있습니다. 다음으로 정보 목록을 예로 들어 페이지 정보 수준을 분류하고 최적화 계획을 출력합니다.
정보 목록 페이지에서 사용자의 핵심 행동은 '탐색', 관심 있는 콘텐츠 발견 및 다음 단계(기사를 보기 위해 세부정보 페이지에 들어가거나 관련 정보 열로 점프)를 수행하는 것입니다. ). 우리의 경험 목표는 사용자가 유용하고 흥미로운 정보를 빠르게 얻고 이해할 수 있도록 돕는 것입니다.
페이지에 있는 정보는 '필요한가'와 '중요도'라는 두 가지 차원에서 하나씩 분석해 보는 것이 비교적 간단하다. 각 정보를 표시하는 목적, 어떤 역할을 하는지, 제거할 수 있는지, 제거하면 어떤 영향을 미칠지, 그 영향이 얼마나 클지 등을 생각하고 이를 측정하고 평가해야 합니다. .
위의 모든 분석을 바탕으로 다음과 같은 최적화 아이디어를 도출할 수 있습니다.
렌더링에서는 뜨거운 리뷰의 '불'을 배경과 결합시켰습니다. 배경 프레임의 왼쪽 상단에는 뜨거운 리뷰를 나타내는 '불'의 모양뿐만 아니라 포인트도 있습니다. 댓글 수에 대한 논리적 연결을 강화합니다.
하지만 색상이 회색이고 요소 크기가 너무 작기 때문에 전체적인 효과가 그다지 좋지 않아 조정 및 최적화가 필요합니다.
다음 렌더링은 최종 디자인이 아니며 참고용입니다.
이번에도 페이지 정보 수준의 최적화 시도는 여전히 이전 생각을 따르며, 먼저 현재 상황을 이해하고 문제점을 발견한 다음 그에 맞는 최적화 계획을 찾습니다. 특정 페이지에서는 먼저 페이지 포지셔닝과 디자인 목표를 명확히 하고, 정보 수준을 분류하고, 최적화 포인트를 요약하고, 마지막으로 시각 효과 다이어그램을 출력합니다.
과거에는 인터페이스 디자인을 최적화할 때 항상 '불량한 경험'을 원인으로 삼고 '인터페이스 수정'을 해결책으로 삼은 후 시각 효과 다이어그램 디자인을 시작했습니다. 이번에는 "나쁜 경험"을 개별적인 경험으로 세분화하여 몇 가지 경험과 방법을 요약하여 향후 디자인에 적용하고 지속적으로 최적화하고 개선할 수 있기를 바랍니다.