사이트를 스트리밍 하는 폭포의 귀여운 작은 세부 사항에 대 한 이야기.

폭포 흐름 레이아웃, 아마도 디자이너는 더 이상 생소 한, Pinterest 2011, 인기가 시작 이후 점점 더 많은 사이트에서 폭포 흐름 스타일 레이아웃 사용 하 여. 꽃잎 그물, 힙 설탕 그물, 헝겊 주머니, 발견, 아름 다운, 버섯 거리, 쇼핑, 어디 손님, 그리고 복사 Pinterest 웹사이트 중국, 수십의 대략적인 견적에에서 모두.

왜 폭포 흐름 선택?

이니까 Pinterest 스타일의 진을 치고 시작 하자는 경험의 관점에서 폭포 흐름 레이아웃 좋은 이유?
작가 겸허 한 의견. 출현으로의 읽기 시대에 패스트 푸드 소비, 폭포 교류 사진, 표시에 대 한 효율적이 고 매력적인, 빠른 언뜻 사용자 모드 폭포 흐름 게으른 로드 모드 동안 더 많은 정보를 얻 및 페이지의 사용자의 마우스 클릭 방지, 마우스 스크롤, 그래서 검색을 짧은 시간에 수 읽기 작은 운영 비용 긴 콘텐츠 경험을 얻을, 더 쉽게 그것에 몰입, 중단 되지 않습니다. 혹시 상품의 눈부신 배열에 매료 되 고의 느낌을 보고 거리 왔다 갔다 걸어?
또한, 폭포 흐름 페이지는 전통적인 매트릭스 그림 레이아웃 패턴, 시각적 수준의 영리한 사용, 시력 및 쉽게 시각적 피로의 임의 흐름에서 다른 패치워크, 넓고 무기한 높은 디자인의 주요 특징입니다.

Pinterest

2011 년에 태어난 Pinterest Tumblr와 많은 소셜 플랫폼에 페이스 북의 뒤에 각 사용자에 대 한 사이트에 한 달 98 분 평균 독립 방문자에 게 달 당 11 백만 액세스가 되었습니다. Pinterest, 폭포 흐름 레이아웃의 창시자로 폭포 흐름 디자인의 방향을 안내 합니다.

1. 최고 흡입 탐색

천장 위쪽 탐색을 사용 하는 이유 클릭 하 여 검색 폭포 흐름 모드에서 신속 하 게 스위치 상단, 및 다음 선택 범주, 흡입 위쪽 탐색을 다시 분류를 사용자가 쉽게 범주를 전환할 수 허용 하는 경우 사용자 제도 디자인 포인트, 흡입 위쪽 탐색 너무 넓은 수 없습니다, 너무 잡기, 되도록 사용자 필요, 그냥 색상 수 없습니다 그것을 조용히 할 수 있는.

2. 주석 앵커 지점 위치

원래 Pinterest 코멘트 상자, 사용자가 설명을 입력 하도록 장려 하기 위한 기본 표시 되도록 설계 되었다. 최근 개정 Pinterest의 코멘트 상자를 설계 되었다: 그림 및 설명의 길이 작은, 코멘트 상자 기본값, 코멘트 작업 버튼을 클릭, 커서 깜박임 동안 설명 상자에 앵커 포인트 때 사용자 입력 텍스트. 기본 댓글 상자가 열립니다 때 그림과 기존 주석 이상 (가까이에 또는 스크린의 높이 보다 큰), 사용자 코멘트 버튼에 의존 하는 경우 설명 상자에 밖으로 롤을 너무 많이 들기 때문에.

3. 경량 보려면를 클릭 큰 그래픽 디자인

올려, 클릭 이동 이미지 원본 사이트에 다시 큰 그림을 빈 영역을 클릭 하십시오. 매우 간편 하 고 캐주얼 독서에 적합 사용자 디자인 논리를 여기에 적응 하는 경우에 특히 쉽습니다 몰입에 세부 정보를 볼 필요를 만족 하는 동안 검색을 만들려고.

4. 부하를 차지, 부드러운 시각적 경험을 유지

연속 스크롤 마우스 휠 탐색 과정에서에서 사용자는 속도가 만족 하지 않습니다 항상, 그래서 양식의 개체 틀 로드 (preload 회색 차트 그림 높이 밖으로), 사용 못하게 화면 로딩 과정 너무 이길,

부드러운, 최대한 시각적 과도 한 유창 사용자의 시각적인 경험을 하도록 할 수 있습니다 동작을 검색 하는 사용자를 방해.

5. 편의 고정 도구

Pinterest 모드 주도 사이트 스트리밍 폭포에 의해 또 다른 날카로운 무기는 그것 도구 핀. 웹 브라우징, 핀 그것은 먼저 자신의 콘텐츠 컬렉션에 대 한 다음 콘텐츠를 만들 사이트의 다양 한 사용자. 그리고 수 Pinterest 온라인 이미지 컬렉션 폴더의 사용자로 서 콘텐츠 여기, 교통 같은 사용자가 걱정 하지 않을 때.

Huaban

꽃잎 그물 이전 "클래스 Pinterest" 사이트, 사용자가 구성 하 고 그들의 마음에 드는 사진을 수집 하는 간단한 컬렉션 도구와 함께 사용자를 제공 하는 사회 공유 사이트에 대 한 관심에 근거 하 여 위치 중 하나입니다. 꽃잎 비슷합니다 Pinterest 디자인에 경험, 하지만 그들의 디자인의 친밀 한 세부 사항을 몇 가지 있다.

1.icon + 제목, 탐색 더 간결한 확인 합니다.

Title 속성은: 요소에 대 한 추가 정보를 지정 합니다. 이 정보는 일반적으로 도구 설명 텍스트 (도구 설명 텍스트) 표시는 요소 위로 마우스를 이동 하는 때. 즉, 마우스 가져가면 힌트의 제목을 통해 가져올 수 있는 사용자가 더 많은 정보.

콘텐츠 주도 웹 사이트 프레임 워크 이므로 주로 경량 디자인, 그래서 네비게이션의 꽃잎도 매우 단순한 단어 없이 아이콘의 장소 사용할 수 있습니다. 그래서 아이콘 + 레이아웃의 절감을 극대화 하는 제목 절감 구조, 뿐만 아니라 사용자의 혼동을 하지

2. 주제별 페이지 디자인-꽃잎 매주의 적시성

꽃잎 주간 최신 인기 콘텐츠는 사용자에 게 방법 중 하나를 제공 하는 방법. 간단한 페이지 집계 방법 중 하나의 관심사를 탐구 하는 사용자를 위해 뿐만 아니라 가장 인기 있는 콘텐츠를 통해.

3. 오른쪽 페이지 큰

홈 페이지에서 때 다이어그램의 세부 정보를 보면, Pinterest, 달리 꽃잎 페이지, 방문의 형태를 걸릴 및 사용자가 오른쪽 화살표는 더 큰 하는 동안 아트 보드에서 다른 콘텐츠를 볼 수 있습니다 오른쪽 페이지, 클릭의 더 많은 영역을 보여주는. 차별화, 무의식적으로 도움 사용자가 오른쪽 화살표 오른쪽 페이지를 클릭 하 여 선택할 통해 대 지에 머물러도 사용자를 알릴 수 있습니다.

광

Guang.com2012 올해의 시작 부분에, 웹사이트는 사용자가 손쉽게, 그들의 자신의 소비에 더 적합 하는 것이 좋습니다 수 있도록 전념 하 고 있다. 핀과 같은 일반적인 클래스 Pinterest 웹 사이트에서 컬렉션 도구가지고 있지 않습니다, 폭포 교류의 주요 프레 젠 테이 션 모드 중 하나입니다.

1. 숫자의 매력

디자인의 전반적인 의미에서 광 활기찬 웹사이트, 큰 쇼핑몰 같은 분위기, 더 대조의 정확한 화신의 숫자를 통해 내부 상품의 눈부신 배열입니다. "6600 것 같아서", "2,876 권장된 아기," 정확한 숫자 알고는 여기에 콘텐츠를 많이 사용자를 확인 하 고 더 많은.

2. 물리적, 화학적 디자인 맛의 감각을 증가

테마 거리 여유롭게 압 연, 간격 라인의도 감각을 함께 도보와 산책 느낌 하지 않습니다.

작은 로켓 스타일 돌아가기 상단, "된 장" 빠른 느낌 인가요?

웹 디자인 이것이 사랑의 디자인, 사랑 웹사이트 사용자가 느낄 수 있도록 재미의 작은 요소 들의 적절 한 사용, 사이트의 관심을 추가할 수 있습니다.

3. 기능 작동은 간단 하다.

폭포 시내에는 광에 유일한 작업은 "같은". 수집, 컬렉션 및 역할의 데이터 정렬 하 고 싶다. 간단한 작업에는 사용자 콘텐츠 관리를 용이 하 게. 간단 하 게 작업, 낮은 사용자의 학습 비용, 더 많은 콘텐츠 그들은 기여.

요약:

속담, 세부 결정 성공 또는 실패, 일부 따뜻한 작은 세부 사항 가진 시대의 왕에 대 한 사용자 경험 감동 사용자, 사용자가 유지, 무의식적으로 귀하의 사이트에 머물 더, 더 편안 하 게 사용할 수 있습니다.

물론, 각 세부의 생산 현장, 군중 및 디자인 목적 세 가지 측면의 사용에 따라 달라 집니다. 소스를 다시 디자인은 궁극적으로 제품 요구 사항 및 서비스의 실현 그리고 전체 라이프 사이클의 제품 수요가 지속적으로 최적화 된 변경. 사용자 그룹 및 데이터의 집합체에 변경 사이트 또한 내용의 지속적인 개정, 인터넷 제품 사용자 경험 디자인 경험 축적은 항상 끝 없는 경험 및 지속적인 실험과 탐험. 이러한 유형의 업데이트 반복 분석 기사의이 종류를 일치 시킬 수,이 작은 원고를 던져 모든 때 단점, 부담 없이 벽돌을 모두 환영 합니다!

출처: http://udc.weibo.com