Facebookは独立したデザインの詳細な分析を再設計しました

他のデザイナーの仕事を研究することによって学ぶべき多くがあります。これは、プロのプロジェクトと既存のWebサイトの仕様設計の両方に当てはまります。 Facebookのような大規模サイトは、いくつかの優れた要素やその他のそれほど良くない要素を使って、非常に特定のユーザーエクスペリエンスを提供します。この記事では、私はしたいのですが さまざまなFacebookのデザイン変更を検討して、インターフェイスの概念を分析する 現在のユーザーエクスペリエンスを向上させる可能性があります.

私はDribbbleユーザーからいくつかのカスタムFB再設計を引っ張った。 特定の機能強化と更新されたUI要素. それらがどのように見えるのか、どのように機能するのか、そして それらがどのように使い勝手に影響を与えるのか Facebookでライブ実装されている場合.

合理化されたプロフィールページ

このプロフィールページのデザイン変更は、ヨーロッパのバルカン地方出身のデザイナー、Haris Jusovicによるものです。.

このデザインでは、ページの所有者を強調して、シンプルさを重視しています。 著名なヘッダー写真とプロフィール写真.

タイムラインの投稿はでソートすることができます “最近” または “人気のある” あなたの好みに基づいて。これはユーザビリティにとって大きなもので、特に最近要求されているアルゴリズムの変更に対するTwitterの反発を受けています。.

またボタンの多くはと大きく表示します 余分なパディングと大きなタイポグラフィ. Facebookはインタラクティブであることを意図しているので、ボタンやハイパーリンクのようなアイテムの可視性を高めることは理にかなっています.

全体的にこの概念は感じます コンパクトで軽い膨張. Facebookがインタラクティブな要素にもっと焦点を当て、フォントサイズを大きくすることもできればうれしいです。.

マルチコラムタイムライン

Alejandro Osorioの再設計は、垂直方向の列レイアウトへの方向転換です。このレイアウトは、Facebookユーザーがユーザーのプロフィールページにアクセスしたときに表示されるプロフィールタイムラインビューを表します。.

そのデザインは目覚しいものですが、一部のユーザーにとっては不快感があります。それに頼る 整理する複数ページの列 最近の投稿のタイムラインビューとともに、ユーザーのプロフィールリンク。すべての色と要素はFacebookのデザインスタイルに忠実です。それは確かにFacebookのタイムラインページのように感じます.

しかし、サイドバーの要素の中には、やや混乱を招くものもあります。たとえば、単一のプラス記号の付いた緑色のボタンの横に “フォローする” ボタン。 1つはシンボルだけを使い、もう1つはテキストだけを使います。これはデザインスタイルや他のプロフィール情報と矛盾していると感じます.

私がここで一番好きなのは タイムライン内のデータの明確な構造. すべてが明確に整理され、最近の投稿と人気のある投稿を切り替えるためのサイドバーリンクもあります.

コンテンツ重視の再設計

Facebookのような大規模なWebサイトは、はるかに多くのデータと、そのデータに簡単にアクセスしたいユーザーベースを扱います。 MagicVoltageによるホームページの再設計には、一貫した機能が1つあります。多くのコンテンツが1つのページレイアウトに詰め込まれています。.

Facebookのホームページは、最初にWebサイトにアクセスしたときにユーザーに表示される最初のタイムラインビューです。これには、友人からの最近の投稿、チャットリスト、ゲーム、広告、および今後の誕生日などのその他の関連情報が含まれます。.

このレイアウトの忙しさはそれを素晴らしくそして潜在的に物議をかもしているものにするものです。これらすべてのコンテンツを1ページにまとめると、 とてもナビゲートしやすい - すべてがどこにあるのか実際に学んだら。そして左上のアイコンリンクは、だれかがそれらと対話するのを思いとどまらせるほど曖昧です。.

しかし、この設計を守るために、密集したコンテンツを非常にうまく処理します。あります 要素間に十分な余白 そしてそれは見事に4列のデザインを実行します.

大量のナビゲーション

Marcelo Silvaによって作成された、このいわゆるFacebook 2.0の再設計は、本当に見るべき光景です。彼のデモのレイアウトはタイムラインと部分的に隠されたチャットの連絡先で更新されたホームページを表示します.

このデザインの大きな部分は 階層型ナビゲーションシステム. 二次リンクを表示するアイコンリンクを持つ一次ナビゲーションがあるのが好きです。上記のスクリーンショットでは、ユーザーは次のリンクを持つプロファイルアイコンを選択しています。 最近の履歴を閲覧してプロファイルを編集する.

Facebookの伝統的な四角い写真とは異なり、Marceloのデザイン変更 円形の写真に向かって選ぶ. このスタイルは、タイムラインとチャットリストの両方に遍在しています。.

Mアシスタント＆最近の活動リスト

Steven McCabeによるFBの再設計については、まだ多くのことが述べられています。実際には、ゲームや最近の活動のような多くの分野が見事な改装で完全に再設計されました.

スティーブンのデザインは Facebookの現在の配色よりはるかに暗い. これは、サイドバーとメインページのコンテンツとの間のコントラストが強くなるため、これが好きです。 Facebookの現在のホームページはこのコンテンツの大部分を含んでいますが、時間が経つにつれて背景に溶け込むことができます.

ヘッダーはまだ通知を示すために赤い泡を使用します。右サイドバーで友人からの最近の活動をソートする機能を備えたトレンドの投稿とニュースフィードもあります。.

一番下には、FacebookのM用の小さな箱があります。 シリと同等 Facebookユーザー向け.

この機能は再設計ではあまり注目されていませんが、Stevenは本当に彼のコンセプトを現代のFacebookテクノロジーを表すものにするために全面的に行きました.

4列タイムラインレイアウト

日本のデザイナー、亀谷翔さんによる4-colのホームページリニューアルです。これらすべての列 ページ全体に広がる, 幅と高さの両方.

左端のサイドバーは、ゲーム、アプリケーション、ページ、開発者向けリソース、その他の類似アイテムへの従来のFacebookリンクに重点を置いています。次に、すべてのデザイン変更の中で最も多様性の高いコンテンツ列があります。これは、ステータスの更新や写真の追加に関する従来のリンクを維持するのではなく、代わりに 隠れたオプションを使ったミニマリストのアプローチ.

右側の2つのサイドバーには、ユーザーのアバターやゲームのアイコンなど、他のすべての写真が含まれています。このデザインはまだ誕生日、チャット、そして友人の推薦のようなすべての最新情報を保持します.

このデザインは非常に多様ですが、Facebookの機能の核心に当てはまります。それは完璧な再設計ではないかもしれませんが 4列レイアウトの可能性を示しています.

ダークチャットリスト付きのシンプルなUI

Ben Hartleyの再設計の目標は、シンプルさと繊細さです。レイアウトは、大きなページ要素にいくつかのドロップシャドウを付けたフラットなデザインコンセプトの組み合わせを使用しています.

多くのブランド商品は同じままであり、彼はFacebookの伝統的な青/グレーの配色に頼っています。しかし、アイコンのいくつかが再設計されたことに気付くでしょう。 小さいか単純な （または両方）.

このレイアウトもに依存しています 円形アバター そして 共有された画像のための十分なスペースを提供します 投稿あり私は本当に彼を楽しんでいます 暗い配色と小さなステータスアイコンでチャットリストを更新.

ベンの再設計はまだ少し雑然としているように感じますが、それはずっと簡単に感じます。これは、ブラウザでUXを調べなくてもユーザーエクスペリエンスを測定するのは難しい設計です。しかし一見するとそれはようです 見やすい そして タイムラインコンテンツを消費するためのより多くのスペースを提供します.

要約

これらの例は主にFacebookに焦点を当てていますが、学んだ教訓はどのWebサイトにも適用できます。優れたユーザーエクスペリエンスデザインは、あらゆる言語の壁を超えており、デジタルクリエイティブプロセスの重要な部分です。.

この分析からアイデアを借りたり、自分のプロジェクト作業に同様のアイデアを実装したりすることもできます。また、関連性のあるFacebookの再設計を見つけた場合は、自分の分析でコメントを共有してください。.