페이스 북은 독립적 인 디자인의 심층 분석을 재 설계
다른 디자이너의 작업을 연구하면 많은 것을 배울 수 있습니다. 이는 전문 프로젝트와 기존 웹 사이트의 사양 설계 모두에 해당됩니다. 페이스 북과 같은 대형 사이트는 좋은 요소와 기타 좋지 않은 요소로 매우 특별한 사용자 경험을 제공합니다. 이 게시물에서 나는 인터페이스 개념을 분석하기 위해 다양한 Facebook 재 설계 검토 현재 사용자 경험을 향상시킬 수있는.
필자는 Dribbble 사용자로부터 몇 가지 맞춤 FB 재 설계를 뽑았습니다. 특정 향상 및 업데이트 된 UI 요소. 이 아이디어를 어떻게 보는지, 어떻게 작동하는지, 그리고 그들이 유용성에 어떻게 영향을 줄 수 있는지 Facebook에 실시간으로 구현되는 경우.
능률화 된 프로필 페이지
이 프로필 페이지 재 설계는 유럽의 발칸 지역 출신 디자이너 인 Haris Jusovic이 담당합니다..
이 디자인에서 그는 더 단순한 페이지 소유자를 강조하여 탁월한 헤더 사진 및 프로필 사진.
타임 라인 게시물을 기준으로 정렬 할 수 있습니다. “충적세” 또는 “인기 있는” 귀하의 취향에 따라. 이것은 특히 최근에 위임 된 알고리즘 변경에 대한 트위터의 반발로.
또한 많은 버튼이 여분의 패딩과 더 큰 타이포그래피. Facebook은 상호 작용하기위한 것이기 때문에 단추와 하이퍼 링크와 같은 항목의 가시성을 높이는 것이 좋습니다..
전반적으로이 개념은 느낀다. 작고 가벼운 부 풀리. 대화 형 요소에 중점을 둔 Facebook 사이트를보고 글꼴 크기를 늘리는 것이 좋을 것입니다..
다중 열 타임 라인
수직 열 레이아웃으로 향하는 것은 Alejandro Osorio의 재 설계입니다. 이 레이아웃은 Facebook 사용자가 사용자의 프로필 페이지를 방문 할 때 볼 수있는 프로필 타임 라인보기를 나타냅니다..
디자인은 눈에 띄지 만 일부 사용자에게는 불쾌감을 줄 수 있습니다. 그것은에 의존 정리할 여러 페이지 열 최근 게시물의 타임 라인보기와 함께 사용자의 프로필 링크 모든 색상과 요소는 Facebook의 디자인 스타일에 그대로 머물러 있습니다. 페이스 북 타임 라인 페이지처럼 느껴진다..
그러나 사이드 바 요소 중 일부는 다소 혼란스러워합니다. 예를 들어 옆에 단일 더하기 기호가있는 녹색 버튼 “따르다” 단추. 하나는 단지 심볼을 사용하고 다른 하나는 텍스트 만 사용합니다. 이 디자인 스타일 및 기타 프로필 정보와 부합하지 않는 느낌.
내가 여기서 가장 좋아하는 것은 타임 라인에서 명확한 데이터 구조. 모든 것이 명확하게 구성되며 최근 게시물과 인기 게시물을 전환하는 사이드 바 링크가 있습니다..
콘텐츠 - 고밀도 재 설계
페이스 북과 같은 더 큰 웹 사이트는 더 많은 데이터와 그 데이터에 쉽게 접근하기를 원하는 사용자베이스를 다루고있다. MagicVoltage의 홈페이지 재 설계에서는 일관된 기능 하나를 발견 할 수 있습니다. 한 페이지 레이아웃에 많은 컨텐츠가 쌓여 있습니다..
Facebook의 홈페이지는 처음으로 웹 사이트를 방문했을 때 사용자가 보게되는 초기 타임 라인보기입니다. 친구의 최근 소식, 채팅 목록, 게임, 광고 및 다가오는 생일과 같은 관련 정보를 포함합니다..
이 레이아웃의 바쁜 성격은 그것이 중대하고 잠재적으로 논쟁의 여지가있는 것입니다. 이 모든 내용을 한 페이지에 넣으면 매우 쉽게 탐색 할 수 있습니다. - 일단 모든 것이 어디에 있는지 실제로 배우면. 그리고 왼쪽 상단의 아이콘 링크는 누구와도 상호 작용하지 못하도록 막연합니다..
그러나이 디자인을 지키기 위해 밀도가 높은 내용을 잘 처리합니다. 저기있다. 요소들 사이에 많은 공백이있다. 4 열 디자인을 훌륭하게 실행합니다..
방대한 내비게이션
마르셀로 실바 (Marcelo Silva)가 만든 소위 페이스 북 2.0 재 설계가 실제로 볼 수있는 광경입니다. 그의 데모 레이아웃은 타임 라인과 부분적으로 숨겨진 채팅 연락처가있는 업데이트 된 홈페이지를 표시합니다..
이 디자인의 큰 부분은 계층 적 네비게이션 시스템. 나는 보조 링크를 표시하는 아이콘 링크가있는 기본 탐색 방법을 좋아합니다. 위의 스크린 샷에서 사용자는에 대한 링크가있는 프로필 아이콘을 선택합니다. 최근 기록 검색 및 프로필 편집.
Facebook의 전통적인 정사각형 사진과 달리 Marcelo의 재 설계 원형 사진을 선택합니다.. 이 스타일은 타임 라인과 채팅 목록 모두에 편재되어 있습니다..
M 길잡이 & 최근 활동리스트
스티븐 맥케이브 (Steven McCabe)의 FB 재 설계에 관해서는 많은 이야기가 있습니다. 사실, 게임과 최근 활동과 같은 많은 부분이 완전히 새롭게 재구성되었습니다..
스티븐의 디자인은 페이스 북의 현재 색 구성표보다 훨씬 어둡다.. 사이드 바와 기본 페이지 콘텐츠간에 더 많은 대조를 만들기 때문에 나는 이것을 좋아합니다. 페이스 북의 현재 홈페이지는 대부분이 콘텐츠를 가지고 있지만 시간이 지남에 따라 배경과 섞일 수 있습니다..
헤더는 여전히 빨간 거품을 사용하여 알림을 나타냅니다. 최신 사이드 바에있는 친구의 최근 활동을 정렬 할 수있는 트렌드 소식과 뉴스 피드가 있습니다..
맨 밑에는 Facebook의 M을위한 작은 상자가 있습니다. 시리와 동등한 Facebook 사용자를위한.
이 기능은 재 설계에서 많은 주목을받지는 못했지만 스티븐은 실제로 자신의 개념을 현대의 페이스 북 기술.
4 열 타임 라인 레이아웃
일본 디자이너 Sho Kameya가 만든 또 다른 4-col 홈페이지 재 설계가 있습니다. 이 모든 열 페이지 전체를 스팬하다, 너비와 높이 모두.
왼쪽 사이드 바는 게임, 앱, 페이지, 개발자 리소스 및 기타 유사한 항목에 대한 전통적인 Facebook 링크에 중점을 둡니다. 다음은 모든 재 설계 중에서 가장 다양한 내용 열입니다. 이것은 업데이트 상태 / 사진 추가를위한 전통적인 링크를 유지하지 않지만 숨겨진 옵션을 가진 미니멀리스트 접근법.
두 개의 오른쪽 사이드 바에는 사용자 아바타 및 게임 아이콘과 같은 사진이 포함되어 있습니다. 이 디자인은 여전히 생일, 채팅, 친구 추천과 같은 모든 업데이트를 유지합니다..
이 디자인은 매우 다양하지만 Facebook의 핵심 기능에 충실합니다. 완벽한 재 설계가 아닐 수도 있지만 4 열 레이아웃의 가능성을 보여줍니다..
어두운 채팅 목록이있는 단순화 된 UI
Ben Hartley의 재 설계의 목표는 단순함과 예민함입니다. 레이아웃은 평면 디자인 컨셉과 큰 페이지 엘리먼트의 드롭 섀도우의 조합을 사용합니다.
많은 브랜드 항목은 동일하게 유지되며 Facebook의 전통적인 파란색 / 회색 색상 체계에 의존합니다. 그러나 아이콘 중 일부가 다시 디자인되었음을 알 수 있습니다. 작거나 단순한 (아니면 둘다).
이 레이아웃은 원형 아바타 과 공유 된 이미지를위한 충분한 공간을 제공한다. 게시물이 있습니다. 나는 정말로 그를 즐긴다. 더 어두운 색 구성표와 작은 상태 아이콘으로 업데이트 된 채팅 목록.
Ben의 재 설계가 아직 조금 어수선 해 진다고 느끼는 동안, 그것은 훨씬 더 간단하게 느낀다. 이것은 브라우저에서의 UX 연구없이 사용자 경험을 측정하기위한 까다로운 설계입니다. 그러나 한눈에 그것은 보인다 찾아보기 쉽다. 과 타임 라인 컨텐트를 소비 할 여지가 많다..
마무리
이 예들은 주로 Facebook에 초점을두고 있지만, 배운 교훈은 어떤 웹 사이트에도 적용될 수 있습니다. 뛰어난 사용자 경험 디자인은 모든 언어 장벽을 뛰어 넘으며 디지털 제작 프로세스의 핵심 요소입니다..
이 분석에서 아이디어를 빌리거나 자신의 프로젝트 작업에서 유사한 아이디어를 구현할 수도 있습니다. 또한 관심있는 Facebook 재 설계가 자신의 분석과 의견을 자유롭게 공유 할 수 있다면.
