【UIUX】20170514_Facebookアプリをトレースしてみた

どうも、ayaconasutaです。ひっそり更新。

UIデザイナーになるべく日々鍛錬を重ねている(つもり)です。

 

前回のinstagramに続き、今回はfacebookアプリをトレースしてみました。

facebookは頻繁にデザインを変更すると言われていますが、

実際トレースしている間にも変更していました。(一時的かもしれませんが)

 

トレースしたのは、

  • フィード画面
  • お知らせ画面

  • メニュー画面

  • アルバム画面

の4つ。早速見ていこー。

 

f:id:ayaconasuta:20170514140306p:plainf:id:ayaconasuta:20170514135149p:plainf:id:ayaconasuta:20170514152255p:plainf:id:ayaconasuta:20170514140833p:plain

※左から、⑴フィード画面、⑵お知らせ画面、⑶メニュー画面、⑷アルバム画面

※アルバムは個人情報満載だったので実際の写真は載せていません。

 使用フォント...SF UI Text、Hiragino Sans

 

◼︎気づいたこと

その1.

instagramと同様、1つのまとまり内での要素が必ずしも均一サイズではなかった

例えば⑵お知らせ画面。

7つのお知らせが並んでますが、一番上だけサイズが違う。それ以外は高さ80pxなのに対して、一番上「リマインド」は81.5px。

どこで幅をとっているかというと、微妙に行間を広くとっているように見受けられる。

f:id:ayaconasuta:20170514143923p:plain

 ※一番上とそれ以外のお知らせを重ねてみると、微妙に一番上の方が行間の幅をとっている。

パッと見てわかるレベルの違いではないゆえ、なかなか難しい。

可能性として、1.5pxの拡がりが余裕を持たせ、窮屈感を与えないからが考えられる。

もう1つ、アルバム画面。

こちらは、123.5px*123.5pxの画像(小)が3列、244.5px*375pxの画像(大)に並んでいるけれど、スキマは縦も横も2pxと2.5pxとまちまち。 

instagramと比較すると面白い。

相違点として、facebookは画像のレイアウトが大小ランダムに配置されていることが見てすぐにわかるが、スキマのサイズが違う。(instagramは1px均一)

 

その2.

Facebookって、こうグレーの背景レイヤーに、白のコンテンツが乗っているイメージなのですが、トレースしていて、画面によって背景グレーの色が違うことにも気づいた

(1)フィード画面では、グレーが#D3D6DAであるのに対し、

(3)メニュー画面では、グレーが#F2F2F2。(薄いw)

上の自分のアイコンフィールドとのスキマがそれぞれ8pxと38pxで、確かに8pxが薄いグレーだと境界がぼやけるし、38pxが濃いとそこに注意がいきそう。

 

そもそもスキマのサイズの違いは、こんなところかな。

(1)フィード画面

・「投稿を促したい」ので「今なにしてる?」フィールドを大きし注意を引く一方で、、ファーストビューで他の投稿コンテンツを把握できるくらいのサイズに収めている。

・フィードに載ることを理解させるため、他のコンテンツとの区切りは狭くしている。

(3)メニュー画面

・プロフィール画面に飛ぶためのリンクなので、小さい。

・自分のアカウントでログインしている、という帰属感を出すため、他のメニューバーとは間を空けサイズを変える等して、差別化している。

 

 まだまだ気づいた小さなこだわりはありつつ、くどくなるので一旦ここまで…。そのうちinstagramfacebookの詳細比較をやりたいな。

 

次回はTwitterか、気分を変えてairbnbをトレースしようと思います。