スマカクアプリ 年間サイクルUI 第10案

期限バッジは常に明滅させ、日付を大きく「まで」を小さくしました。ボタンの文言も大きくして、中央に寄せています。各案にボタン文言の中心が真ん中からどれだけズレているかの実測値を付けました。
明滅は常時・左余白18px 第9案 第8案 第7案 第1案
中央寄せについて
ボタンは「左にバッジ・右に矢印」なので、バッジが大きいほど文言の中心が右へ押されます。バッジを縦2段にすると横幅が縮み、文言が中央に戻ります。各案の見出しに実測のズレ(プラスは右寄り)を出しているので、数字で比べてください。
E

期限バッジの形(常時明滅・日付を大きく)

どれも「7月31日」を大きく、「まで」を小さくしています。明滅は期限が近いときだけでなく、対応期間中はずっと続きます。
E-1横1行・時計アイコンつき
第9案と同じ横並びで、日付だけ大きくした案。何の日付かはアイコンで示します。バッジが横に長いぶん、文言の中心が右に寄ります。
E-2縦2段推奨
「7月31日」の下に「まで」を置いた案。バッジの横幅が縮むので、文言がほぼ中央に戻ります。日付も大きいまま保てます。
E-3横1行・アイコンなし
アイコンを外して日付をさらに大きくした案。読みやすさは一番ですが、横幅はE-2より広がります。
E-4縦2段・枠のみ
塗りをやめて白い細枠にした案。ボタンの緑が濁らず、明滅も枠で伝わります。
E-5縦2段・文言を完全に中央へ推奨
E-2の右側に、バッジと同じ幅を確保して矢印をその中に入れた案。左右の重さが釣り合うので、文言がボタンのど真ん中に来ます(実測ズレ0px)。矢印の位置は右端のままです。
E-6完全中央・枠のみバッジ
E-5の考え方を枠のみバッジに当てた案。いちばん軽く、文言もど真ん中です。
F

ボタン文言の大きさ

E-2のバッジで、文言だけ3段階に変えました。長い文言(仕訳をチェックする)でも収まるかを下段で確認しています。
F-114px
前回より0.5px大きい程度。まだ控えめです。
F-215px推奨
ボタンの主役として十分な大きさで、長い文言でも余裕があります。
F-316px
いちばん強い案。「仕訳をチェックする」のような長い文言だと、バッジとの間隔が詰まります。
F-415px・長い文言で確認
工程3の「仕訳をチェックする」をF-2の大きさで出したもの。9文字でも中央のまま収まります。
M

推奨の組み合わせで工程1〜5

E-2の縦2段バッジ、F-2の15px、W-cのグレー塗り、C-3のペン風チェックで組みました。端末は実寸の8割です。