ゼロからサービス 音声SNS編⑩
最後のパートの設定画面です。
制作UI
制作で意識したこと
情報設計
・シンプルに
・項目のグループ化（プロフィール、アカウント、その他で大きく分類）
・検索バーを設置
→どこにどのような設定画面があるか（分類が）わかりにくいため
UI
・背景色に対して、コントラストを付ける
・ボーダーを使わずグループを明示的に分ける
参考
設定画面はどのサービスにもあるため、iPhoneの設定画面、Twitter、Instagram等々のサービス設定画面を参考に。
設定画面ってほとんど同じじゃない？と思っていましたが、それぞれのサービスで違いがあり、深い！
1つ感じたことは、設定画面の内容ってサービスのコンテンツに比べるとやや難しい。
シンプルかと思いきや、複雑な内容を示していることが多く、ユーザーが迷子になることが多いなぁ。と感じました。
その中でもiPhoneの設定画面は感覚的に分かりやすく、さすがだなぁと思いました。
グルーピングや反復、感覚的にわかるアイコンの使用など、デザインの基本に忠実な構成でとても勉強になりました。
画面設計
今回はiPhoneの設定画面を参考に、「プロフィール」「アカウントに関するもの」「それ以外に関するもの」に分けて画面を作っていきました。
設定画面のグループ化
設定画面で想定される項目
プロフィール
・プロフィールには、プロフィール画面で表示される情報の設定を行う（プロフィール文とか）
アカウントに関するもの
・アカウントはサービスを利用する際のアカウントに関すること全般を設定できる
その他
・その他は、サービスを利用する際の大きな設定等
ログアウト
・ログアウトのみ、サービスを利用するためのその他の設定項目とはことなるので、独立したグループとしている
パターン出し
カードで表示するパターンや枠線で区切るパターン等、いくつかパターン出しを行いました。
枠線を使い過ぎてしまうと、情報量が多くなり、画面全体の印象が複雑になってしまうと考え、枠をなしにし、コントラストによりグループごとの境界がわかるように心がけました。
Vol.1では特に検索バー内のテキスト、BGともにコントラストが弱いです。
Vol.2では、BGでコントラストAAとなっているため、一目瞭然コントラストが強くなっています。
色の使い方で印象やわかりやすさは左右されてしまうことも学びました。
まとめ
音声SNSの最後のフェーズである設定画面まで完走しました～ぱちぱち！
0の状態からリサーチして情報設計して、UIを作ることをサービス全体を通してやり切ることができて学ぶことが多すぎました！
長くなってしまった音声SNS編もやっと終わりが見えてきました…
一連の作成画面をまとめていきます！
続く…
この記事が気に入ったらサポートをしてみませんか？