非デザイナーによるUIトレースその31年以内TweetTwitterのiOSアプリ、YouTubeのiOSアプリと続いて、第3弾はGmailをやってみた。今回はふと気が向いてAndroid版としてみた。以下の方針は第1弾、第2弾と同じ。(自分の土俵は情報&UIの構造設計なので)カラーリングやフォント解析はビジュアルのプロに任せるただし今回はAndroid版ということで、手持ちのPixel3からスクリーンショットを取得。デザイナーやエンジニアならご存知の通りAndroidはサイジングの思想がiOSとは異なる。以下ではpx単位で記述しているが、単位はdpとしてもいい1/3にリサイズするので0.3333...px単位に(これのせいで計測が大変だった...)さぁやってみましょう。スタディ結果0.3333...pxとなるものは1/3pxと表記します。ホーム画面1(レイアウト)左右方向のマージンが14+2/3pxで統一。元のサイズでは44pxとなる。文字要素の上下マージンは(文字自体が占める領域が不明のため)ちゃんとは測れていない。検索ボックスの上下幅は46px(元サイズで138px)。これは覚えておくと便利そう。3種類ある丸アイコンのサイズは全部バラバラ。ホーム画面2(文字まわり)文字サイズは3種類。強調文字は15px、本文は13+1/3px、補助文字は11pxくらい。本文サイズに対して上方マージンを加味するとline-heightが135%になる。ホーム画面3(モーダルウインドウ)モーダルの内部マージン(CSSで言うpadding)も、14+2/3pxで統一されている。丸アイコンのサイズはHOME画面の3種類のアイコンとまた違うサイズ。RadiusはHOME画面の検索ボックスと同じで7px。メニューメニュー中身の左右マージンも14+2/3pxで統一されている。文字サイズはHOME画面と共通のもの。リスト高さは44px。覚えておいて損はなさそう。YouTubeアプリでもあったように、リストのセットを上下マージンで挟む。メール新規作成HOME画面やメニューと異なる文字サイズルールが出現。余白が多く、明確なボックスの境界が分からないのであまりサイズ測定できない。モーダルウインドウ小マテリアルデザインでよく出てくる、モーダルウインドウの中身のリストも高さは44pxと共通。7+1/3pxがで挟んでいる。(横幅1080px)使ったツール:Sketchデザイン要素ごとのまとめ私が感じた傾向を整理しておきます。ヘッダーiOSと異なり明確なヘッダー領域というのがなさげ。ユーティリティエリアと言うのか分からないが、電池残量や時計のエリアは22pxで確保の模様。左右マージンだいたい14+2/3pxで統一。上下マージンルールが分かりづらい。いうかルールが無い?文字サイズ読ませる画面と書かせる画面でルールが異なるように思われる。書かせる画面の方が大きい。読ませる画面で確認したサイズは、15px、13+1/3px、11px。書かせる画面で確認したサイズは、18+1/3px、17pxリスト高さ44pxというルールっぽい。そのリストを、7+1/3pxのマージンで挟むルール。疲れたので後回しにする。あと数例Android版を解析すると、iOSとAndroidでの傾向差が分かるかもしれない。次もAndroidをやってみる。(仕事で利用頻度激高)SlackMessengerあと忘れないように書いておくと、そのうちWebアプリやダッシュボード系のUI計測をしたい。思いつくものがあまりない。ワイヤーフレームをphpで書いてみるアプリの全画面スクリーンショットを作るにはpiiicというアプリが便利google+1ボタンを設置しました。あと影響とか将来についてちょっこっと感想。スマホアプリコメントコメントをどうぞ(承認後に反映されます)返信をキャンセルする。(8)aboutわたしについて楽器と機材を紹介するライブ情報リンク当サイトについて意識低い系UXストラテジストいまさしのライフログFacebookRSS著者:いまさし都内の某デジタルエージェンシーで働く意識低い系UIストラテジスト。休日はジャズベーシスト兼ゲーマー。imasashi.net。