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

L-3(P2の枠の中に対象月を入れて、該当フェーズを明るくする形)を軸に、提出期限の1行をなくして収める方法を6通り作りました。どれもカードの行数は「見出し1行+ステップ行+ボタン」のままです。
期限の行を削除・行数はL-3のまま 第6案 第5案 第4案 第1案
前提:343pxに何が入るか
見出し「進捗状況」が約58px、グループチップが約68px、月入りセグメントが約160pxで、使える幅は315pxです。この4つ目に期限(約50px)を足すと約336pxで溢れます。そこで、見出しかグループのどちらかを縮めるか、期限を別の場所へ移すかの6通りにしました。各案に実測幅を付けています。
X

提出期限を1行増やさずに入れる

すべてL-3のセグメント(P2の中に対象月、該当フェーズだけ明るく)を土台にしています。
X-1グループを丸バッジにする推奨
「Aグループ」を丸いAに縮めて、空いた分に期限を入れた案。見出しもフェーズも対象月も期限も、全部そのまま1行に残ります。Aが何かはマイページ側の「提出グループ A」と併せて覚えてもらう形です。
X-2セグメントの中に期限も入れる
P2の枠の中を「4-6月|〜7/31」の2段組にした案。フェーズと対象月と期限が完全に同じ箱に入るので、意味のまとまりは一番きれいです。枠が横に長くなるぶん、P1とP3が相対的に小さく見えます。
X-3見出しを「進捗」に縮める
見出しを2文字にして幅を作り、グループチップは残したまま期限を入れた案。グループ名をきちんと出したい場合はこれです。
X-4期限をボタンの右端へ
右上はL-3のまま触らず、期限をボタンの右端に小さく置いた案。期限は「いつまでに出すか」なので、押す直前に見えるこの位置とは相性がいいです。行は1本も増えません。
X-5期限を申告期限カードへ
年間サイクルのカードからは期限を消し、上の申告期限カードの下に細い区切りで足した案。「期限もの」が1か所にまとまります。下に出しているのはこの案での年間サイクルカードで、L-3そのままです。
X-6期限だけにする(月を省く)
P2の中身を対象月ではなく期限にした案。いちばん短く収まりますが、何月分の提出なのかが画面から読めなくなります。
M

X-1で組んだ画面(工程1〜5)

推奨のX-1で、1サイクルぶんの画面を並べました。5枚を横に並べるため端末は実寸の8割です。