1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

UIデザインの基礎について

Last updated at Posted at 2020-10-21

今回は、UIデザインの基礎についてまとめていきたいと思います。

UIの基礎

####コンテンツ > UI
コンテンツやサービスを伴い全体でデザインする。

不要なパーツはどんどん削除する。

####TPO重視
オン(図)とオフ(文字)でメリハリをつける。

同じアプリ内であってもTPOが異なるものは全く別のものとしてデザインしてよい。

世界観の異なるものは一緒に並べず、必ず画面を分けること。

####屋外想定
######コントラストは高くする
室内で見るより画面が見づらくなるためコントラストを高くする。

複雑なレイアウトや演出は避けてシンプルな構成にする。

######アクションは片手操作になることを想定する
荷物を持っていたり、つり革につかまっているなどを想定し、主要な操作が片手でできるか実機に入れて確認する。

####遷移
######無限ループ
友達リスト→その友達のプロフィール、友達の友達リスト→自分のプロフィール・・・という感じで無限ループを作ることができますが、遷移するたびにメモリを消費する。スマホのメモリは少ないのでループしないような整理と構成を心がける。

######キャンセル遷移
戻る方の遷移が考えられていない事が多い。

ダイアログを表示させ、ダイアログから別画面を呼び出したときにキャンセルボタンを押すと、何が表示されるかなど、様々な状況想定のもとに設計をする必要がある。

最後に

UXは映画やドラマみたいなもの、UIはその1フレームのようなものだと考えます。全体の展開を練った上で構成を考えることで面白いUIが作れます。

今回は以上になります。最後まで読んでいただき、ありがとうございました。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?