2013年2月7日木曜日

Staccal v2.0.0のデザイン変更点


先日リリースしたStaccalのv2.0.0ですが、メジャーバージョンアップを期に、UI回りのデザインを幾つか変えました。

UIをデザインする方にとって、何か参考になるかもしれないので、それぞれの変更点と変更の意図などまとめてみました。何かのお役に立てば嬉しいです。




長くアプリのバージョンアップを続けていると、ふと大幅にデザインを変えてしまいたい衝動に駆られる事が(よく)あります。

それは開発時に、デザインを突き詰める事が出来なかった点だったり、または特に何も考えずに出来上がってしまったデザインだったり、はたまた自分の中でデザインのブームが変わってしまったという事もあります。

しかし、現在公開してるバージョンのデザインに慣れ親しんでいるユーザーの方にとっては、たとえ新しいデザインが正しいものであったとしても、あまり大幅なデザイン変更はユーザビリティの低下に繋がる事が多々あります。

その為、デザインの変更は現行の機能とテイストを損なわない範囲で慎重に行いました。




1.予定のポップアップ



元のデザインの問題点として認識していたのが、立体感が乏しい為、背景のカレンダーとの境界が曖昧になっていた点でした。境界がはっきりしない為、カレンダーのどの予定を指しているのかが伝わりにくいデザインだと思います。

これに対して、ポップアップの立体感を向上させる為にフチの白い線を0.5pt から 1ptに変更し、ポップアップの上部だけにしました。

更にドロップシャドウの縦位置をやや下にずらして、ポップアップの矢印が強調されるように変更しました。



2.メニューボタン


今回のデザイン変更で最も悩みどころだったのがメニューボタンです。背景のデフォルトのテクスチャが少々暗く、太陽光の下だとボタンが非常に見にくい、という問題がありました。

このデフォルトのウッドのテクスチャは、Staccalのアイコンにも使っている為、言わば「アプリの顔」の様なものと考えていました。

従い、現行の雰囲気を損なわず、かつ視認性の問題を改善できるように慎重にテクスチャを作りました。あとはボタンが背景に溶け込まないように、ボタンの立体感を向上させる為にボタンのグラデーションを調整しました。



3.設定画面のボタン類


設定画面のナビゲーションバーについているセグメントコントロールですが、従来のものがどちらを選択しているのか判りにくい、という問題を感じていました。

これを改善する為に、非選択の状態は文字色をグレーに変更し、選択している状態は背景色を暗くする事で、テキストが強調されるようにしました。

あとは、セグメントコントロールのアイテム間の縦線(dividerImage)が手抜きのためデフォルト状態だったので、この機会にボタンのデザインに合わせました。

加えてナビゲーションバーのボタン全般が、従来フラットなデザインでボタンとしての存在感が乏しかった為、グラデーションを付けて立体感を出す事で、改善を図りました。



4.カレンダー設定画面のボタン


今回のデザイン変更で最も大きく変更したのが、カレンダーの設定画面のセルのデザインです。

このセルが果たす役割は
・カレンダーの表示/非表示の切り替えが出来る
・カレンダーの色が判る

の2点ですが、従来のデザインではON/OFFはチェックボタンを用意し、カレンダーの色を表すドットの2つのアイテムを並べていました。2アイテムの中間には、チェックボタンを強調する為に、縦線でセルを区切るというデザインにしていました。

当初はこれで良いと思っていたのですが、画面からごちゃごちゃした印象を受けるようになったので、アイテムを減らしてシンプルなデザインにしました。



チェックボタンとカレンダーのドットを一つのアイテムにまとめ、ON/OFFの切り替えとカレンダー色の表示を同時に出来るボタンを制作しました。

加えて、小さいボタンの押しにくさの印象を軽減するために、セルの高さを以前よりも多めに設けてスペースを作っています。



5.アプリのアイコン


最後ですが、アプリのアイコンを変更しました。
これは具体的な問題があった訳ではありませんが、ファーストバージョンのリリース当初よりも、Photoshopの技能が向上した事があり
・ページのカール
・カレンダー内のレイアウト
・カレンダーのフォント
・リングの位置ずれの修正
・光の当たり方

など色々直しました。


昨年末より、Dribbbleというデザイナーのポートフォリオのサービスへの参加資格を得る事が出来ましたので、こちらに出展するためのデザイン変更でした。何点か作品を上げているので、よければ見ていって下さい。
http://dribbble.com/goando


以上、v2.0.0のデザイン変更でした。