[UIトレース] １．Twitter

UIトレースを始めてみました。

Twitterアプリのホーム画面をトレースしたので、そのときのメモと一緒に結果を投稿します。
例によって人に見せられた出来ではありませんが、とにかく公開します！（決意）

#トレースの流れ

今回は、トレース元をiPhoneXのTwitterアプリ（公式）をトレースしました。アプリはSketchを使用しています。

まず、トレース元となる画像をアートボードの横に並べて、
箱の大きさなどを計測せずに見たママを自分の感覚で配置していきました。（画像真ん中：未計測トレース）

その後、トレース元の画像に箱などを並べながら実際の大きさ計測しつつ、
未計測トレースに反映させました。

これから以下は、その時の備忘録メモとその感想です。

#全体像

各要素の大きさは4の倍数で設計してある。
※しかし、iPhoneX解像度が375pxと奇数なので、その調整のため-1pxしてある場合もある。

padding-top　12px
padding-bottom　3px？（4じゃない？）
padding-leftは16pxだが、
padding-rightは以下の通り微妙な配置。
16px：ツイート部の画像右端とピシャリハマる。同オプションボタンと1px被ってしまう。
15px：オプションボタンとピシャリハマるが、この場合画像右端と1pxの隙間が生まれる。
12px：右下の新規ツイートボタンとハマるが、他のどの要素とも並んでいない。

疑問点
iPhoneナビゲーションバーの部分で、
左marginが16+4px、右marginが12+2pxほどとってある。
この4の倍数以外の余白の部分がアイコンによるものなのか他に意図があるのかはわからなかった（左余白ならAM/PMの表示分で余裕がある？）。
これはガイドラインを読むしかない（英語辛い）

#ヘッダー

heightは44pxで、iOSのナビゲーションバーと同じ高さをとってある。
→どこかのUIトレース指南記事で、その高さを推奨されているというコメントがあったような？（要確認）

paddingは、6px 0px 6px 16px？
右のTop Tweetsボタンは右端でも反応するから、ボタン要素の中で空間をとってあると予想した。
ここまで書いて、paddingというより上下方向の中央揃えで配置してあるんだろうということに気がついた。

#ツイート部

##ツイートセクション

#全体像の繰り返しだが 、padding-rightが16pxではツイートオプションボタンのアイコンと被った。
画像プレビューがwidth287px：height161pxと4の倍数から外れているのも気になる。
悩みながら作業を進めていたが、ふと参考元がダークモードにしていたことに気が付き、つまりborderがあることを全く計算に入れてなかった。

iPhoneX解像度375pxと4の倍数376との1pxの調整を、
padding-right: 15pxとすることで行っており、
画像プレビューは288px：160pxで配置してるのではないか。（heightを161pxと誤認したのは、参考元画像のスクリーンショットを撮った際にアンチエイリアスで滲んだ分を1pxと考えてしまったのかも）

リプライなどの４つのボタンについては、
アイコンサイズが16✕16pxかな？と思ったらリツイートは20✕16pxだったり、
4つのボタン間にpadding（左右）の規則性が見当たらなかったり、
右の共有ボタンの右側にはpaddingが配置されてなかったり（なのでアイコン大のボタン）
と、私ではまだ意図が読めないことが多かったため保留に。
paddingの上は8px、下は11pxだった。

##NewTweetボタン（画面右下の青いボタン）

これはiPadのTwitterアプリを開いて問題が解決した。

ボタンが不自然に右下の端に配置されていて、縦置き／横置きの場合でも配置が変わらなかったので、絶対位置で配置してあると判断。
margin-tight: 12px
margin-bottom: 12px

ツイートセクションとのアライメントをあえて崩すことでボタンを目立たせる狙いがあるのかもしれない。

#フッター

メインナビゲーションのheightは44pxで、ヘッダーと同じ大きさ。
ナビアイコンの画像サイズはwidth: 24px／height: 24pxの正方形で、
その周りはpadding: 12px 35px 8px;で配置されている。
4番目のダイレクトメールアイコンのpadding-rightだけが34pxで1pxの調整を行っている。

ナビゲーションセクションの下にあるHomeバーは、40pxで配置されている。念の為タップして見たが反応はなかった。

#感想・考察

まず、楽しかった。時間を忘れてトレースしていた。

またそれと同時に、あまりに時間がかかりすぎていて少し落ち込んでいる。
たった１画面のスクショをトレースして、考えをまとめるだけで１日潰れてしまった。

そして、そのまとめた考えも浅いなーという印象で、かつ情報としてまとまりがない（"考えをまとめた"とはどういうことなのか）。

考えをまとめたというからには、この人くらい綺麗にまとめたい。

なんにしても、まずは第一歩ということで。

お疲れさまでした。