スクリーンショット_2018-12-29_22

UIトレース#10

年末感がすごい出てきて、ああ年末なんだとすごく感じます。CMとか街の広告がお正月モード全開ですねよね。残り少ない今年を全力でやっていきたいと思います。

twitter のUIトレースが終わりました!途中の2週間の中断を含めると合わせて1ヶ月もかかりました。Sketchの使い方に徐々に慣れてきてからは格段に作業スピードが上がったので、もしこれから始めるならばもっと短い時間でできると思いますが、そいう風に思えたといことは少なくとも成長できたのかなとおもいます。

そんな作業を振り返っての気付きについてまとめたいと思います。

文章で書くとまとまりがなくなりそうなので以下、箇条書きにしていきます。


Fontについて

・使っているのはSF Pro Text, Hiragino Sans。サイズは12〜20。
・12が使われていたのは設定欄の説明文。ツイートは13px。
・欧文と和文が混ざっている場合は、フォントサイズではなく、並べた時のサイズ感が同じになるようにしている。
・同じセル内に違う文章が並ぶ場合は、フォントサイズ、太さ、色の3つのうちの最低2つを変えることで優先順位をつけている。
・重要度が高い文章の方が色が濃い。フォントサイズが違くても色が同じならそちらが次点で重要。
・ツイート内は行間をフォントサイズよりも2px大きくすることで、読みやすくしている。


色について

・グレーカラーがベース。割ありとしてはメインカラー(ここではTwitterブルー)は2割程度の印象。
・色が明るく鮮やかになる程使う量を限定することでよりその色の印象を際立たせることができる。
・アプリ内での、ポジティブな行動にはイメージカラー、ネガティヴな行動には赤が使われている。
・白は#ffffffが使われているが、黒は#000000が使われていない。
・グレーカラーも青系のグレーが使われていて、メインカラーとの統一感を外さないようにしている。


構造について

・フッターにアイコン、ヘッダーはページ名。
・サービス名、アプリのアイコンが画面にない。アイコンはスマホのホーム画面とアプリを開いた時に出るのみ。
・フッターの編集は不可。フッターに表示されているのがメインサービスで、この4つの間はスワイプで移動できない。固定表示されているのでする必要がないからか。
・スワイプするとメニュー画面。メニューにはフッターに表示されているのとは違う、サブ的なサービスが表示されている。
・設定の画面は、いくつかのパターンを内容や説明の文章量によってつか分けている。細かい設定はストレスをなるべく感じさせないように分かりやすくスイッチや、チェックをつけるようになっている。


とりあえず箇条書きにするとこんなかんじでした。ここから自分で見返して、さらに仮説を立ててどうしてそうなっているのかを考えていきたいと思います。

この記事が気に入ったらサポートをしてみませんか?