목록의 레이아웃은 뉴스 응용 프로그램에서 흔히 볼 수 있다. 레이아웃은 작은 화면에 여러 개의 정보를 표시할 수 있는 기능을 갖추고 있으며, 사용자는 위아래로 슬라이딩하여 대량의 정보 피드백을 얻을 수 있습니다. 그리고 목록도 이해하기 쉬운 전시 형식이다.
카드 레이아웃은 웨이보, 페이스북 등 소셜 앱에서 흔히 볼 수 있으며, 다른 앱에도 매우 유연한 형태로 등장한다. 각 카드의 내용과 형식은 서로 독립적이고 방해가 되지 않기 때문에 같은 페이지에 서로 다른 카드를 표시하여 서로 다른 내용을 담을 수 있다는 것이 특징이다. 각 카드는 독립적으로 존재하기 때문에 목록보다 정보가 더 풍부할 수 있고, 사용자가 댓글을 달고, 좋아하며, 세부 정보 페이지로 이동하는 단계를 생략할 수 있습니다. 하지만 카드의 정보량이 많기 때문에 한 화면에 여러 장의 카드를 표시할 수 없고 한 화면에 카드 수가 3 장을 넘지 않습니다.
이중 열 카드의 레이아웃 형식은 그림 정보 위주의 app 에서 더 일반적입니다. 예를 들어, Pinterest, 일부 쇼핑몰의 상품 전시 페이지. 이 형식은 카드와 비슷하지만 한 화면에 더 많은 내용, 최소 4 장의 카드를 표시할 수 있습니다. 동시에 왼쪽과 오른쪽 두 칸이 분리되어 있어 왼쪽과 오른쪽 두 칸의 카드 내용을 쉽게 비교할 수 있습니다.
레이아웃 뒤의 동작 논리
그런데 왜 뉴스류용 목록, 사회용 카드, 사진용 2 단 카드인가요?
우리는 사용자 요구와 행동 패턴으로 돌아가서 이 문제를 생각한다.
우리가 뉴스를 볼 때 우리의 요구는 무엇입니까? 대부분의 사람들의 요구는: 한편으로는 최근에 일어난 일을 알고 싶다는 것입니다. 이것은 양의 수요입니다. 반면에, 이 물건이 무엇인지 알고 싶다면, 그것은 심도 있는 독서의 필요성이다. 그러나 수량에 대한 수요는 종종 1 위이고, 심도 독서는 2 위다. 이러한 요구에 따라 사용자가 뉴스를 볼 때의 동작 패턴은 다음과 같습니다. 빠른 대량 탐색 → 필터링 → 판단 → 빠른 대량 탐색:
위 그림에서 볼 수 있듯이 사용자는 뉴스를 볼 때 대량의 정보를 신속하게 처리하고 매우 짧은 시간 내에 자주 의사 결정을 내려야 합니다. 따라서 효율성은 매우 중요합니다. 한 화면에 하나 또는 두 개의 정보 만 표시하는 것은 분명히 적절하지 않습니다. 또한 프레젠테이션 형식에 높은 일관성을 유지해야 하며, 전시된 컨텐츠의 정보량을 엄격하게 통제하는 것도 중요합니다. 높은 일관성을 통해 사용자는 프레젠테이션 형식을 신속하게 이해할 수 있으므로 자신에게 적합한 콘텐츠를 선택하여 필터링 및 판단을 쉽게 할 수 있습니다. 정보의 양을 조절하면 정보 간섭을 줄여 효율성을 높일 수 있다. 이러한 제한으로 인해 목록은 뉴스 전시의 합리적인 형태가 되었다.
마찬가지로, Pinterest 를 사용할 때 우리는 무엇을 원합니까? 가장 적합한 그림을 찾는 것입니다. 가장 적합하고, 유일성이 있고, 비교, 취사, 선택이 있을 것이다. 즉, 사용자가 한 번에 하나씩 탐색하는 것이 아니라 다음 그림과 같이 반복해서 탐색을 비교하는 것입니다.
이 동작 패턴을 기반으로 레이아웃 형식: 1 이 필요합니다. 한 화면에 충분한 내용을 표시 할 수 있습니다. 2. 사용자가 콘텐츠를 쉽게 비교할 수 있습니다. 콘텐츠 자체에 대한 요구 사항도 있습니다: 1. 내용 자체도 빨리 이해할 수 있다. 2. 내용 자체는 비교가능성이 있다.
주방 이야기를 예로 들자면, 서양 음식을 배우는 앱으로, Pinterest 와는 아무런 상관이 없지만 같은 레이아웃을 사용한다. 시각적 미감 등 감성적 해석 외에도 우리는 다른 각도에서 이해할 수 있다.
이런 장면이 밥 먹을 때가 되었다고 가정해 봅시다. 오늘 양식이 먹고 싶어서 매일 주방을 열고 오늘 저녁 식사를 선택했습니다. 이번 주에 이런 양식을 만들 것 같기 때문에 이 선택은 반드시 세심하게 골라야 한다. 맛있을 뿐만 아니라 가치도 높고 조작도 간단하다. 데일리 주방의 첫 화면에는 각종 완제품의 사진이 전시되어 있어서 좋다. 나는 안값을 비교해서 내가 원하는 것을 선택할 수 있다. 그리고 각 요리의 소장번호는 이 요리의 종합 평가를 반영할 수 있을 뿐만 아니라 선택의 난이도를 낮추는 데도 도움이 될 것이다. (윌리엄 셰익스피어, 햄릿, 요리명언) 곧, 몇 번의 비교로, 나는 결국 미트소스 스파게티를 오늘 저녁 만찬으로 선택했다. ...
위의 장면에서 볼 수 있듯이 사용자는 이 앱을 사용할 때 한 번만 선택할 수 있기 때문에 내용을 비교해야 합니다. 동시에, 쉽게 이해할 수 있는 사진과 데이터는 비교하는 데 도움이 된다. 따라서 이중 기둥 카드의 레이아웃은 좋은 운반 모드입니다.
마찬가지로, 우리가 웨이보를 그릴 때 우리의 수요는 무엇입니까? 친구나 관심 있는 사람과 상호 작용하는 것이 더 편리하다. 상호 작용의 전제는 내용을 빨리 건너뛰는 것이 아니라 완전히 읽는 것이다. 따라서 친구의 역학을 탐색할 때의 행동 모델은 다음과 같아야 합니다.
위 그림은 표시된 형식이 최소한 두 가지 조건을 충족해야 함을 보여 줍니다. 첫째, 최소한 두 개의 위도를 전달하는 정보가 필요합니다. 하나는 사용자가 읽을 수 있는 콘텐츠 정보이고, 다른 하나는 사용자가 상호 작용할 수 있는 운영 정보입니다. 둘째, 사용자는 현재 페이지의 내용을 조작하거나 현재 페이지의 작업을 완료할 수 있습니다. 그러나, 이것은 카드의 배치가 가장 합리적이라는 것을 완전히 설명하지 못한다. 이를 위해서는 웨이보 내용의 이해력과 정보의 복잡성을 종합적으로 고려해야 하며, 카드 레이아웃은 비교적 좋은 해결책이다.
카드 디자인 형식이 매우 다양하고 유연하기 때문에 적용 범위도 매우 넓다. 그리고 저는 여기서 더 이상 논의하지 않겠습니다.
요약
각 레이아웃 형식의 특징과 그 뒤의 동작 논리를 결합하면 다음과 같은 결론을 도출할 수 있다.
사용자의 행동 패턴이 효율적이고 빠르게 정보를 필터링하는 경향이 있을 때 목록은 매우 좋은 선택이다.
사용자의 동작에 정보를 반복해서 비교해야 하거나 한 화면에서 더 많은 정보를 얻어야 하는 경우 듀얼 바 카드 레이아웃을 사용해 볼 수 있습니다.
사용자가 표시된 콘텐츠를 소비해야 할 뿐만 아니라 콘텐츠와 상호 작용하고자 할 때 카드 레이아웃을 우선적으로 고려할 수 있습니다.
마지막으로 반성하다.
이 글은 단지 레이아웃 형식의 특징과 그 뒤의 행동 논리를 통해 레이아웃의 적용 범위를 생각할 뿐이다. 분명히, 이런 단일 차원의 사고는 실제 사례에서는 적절하지 않다. 예상치 못한 사용자 행동 패턴 외에 고려해야 할 요소는 다음과 같습니다.
1. 다양한 레이아웃 형식의 시각적 흐름 특성 (하향식 "I" 비주얼 흐름, 이중 열 카드는 위아래로 뛰는 "z" 비주얼 흐름)
2. 정보 전송 우선 순위 (목록은 텍스트 전송에 더 적합하고 카드는 사진 전송에 더 적합)
3. 레이아웃 확장성
4. 브랜드 만들기
기다리다
각 장면에 대해 각 App, 각 페이지, 각 고려 사항이 차지하는 비중도 다르므로 구체적인 문제 분석이 필요합니다. 그러나 어쨌든, 설계 결과는 변화무쌍할 수 있지만, 설계 뒤의 논리는 반드시 따라야 한다.