Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

【UIデザイン】アイコンの位置による印象の違い

プログラミング勉強日記

2020年11月13日
UIデザインを紐解く。これだけは押さえたいボタンデザインのポイントの記事で、アイコンの位置によってユーザーへ与える印象の違いがあると学びました。
※学習の備忘録として記録しています。

スクリーンショット 2020-11-13 11.46.25.jpg

左にアイコンがある場合

左にアイコンを置いた際は、詳細ページなどへ『入る』イメージを与えます。

そのため、一覧ページから詳細ページなど下の階層に誘導したいときに使用します。

右にアイコンがある場合

左にアイコンを置いた際は、詳細ページなどへ『移動する・外へ出る』イメージを与えます。

そのため、階層の関係ないページへ別ウィンドウで開くページの場合に使用します。

まとめ

アイコンの位置によって、ユーザーへ与える印象が変わると学びました。

これから、LP作成するときなど意識していきたいと思います。

mikiprogram
2020年4月から学習を始めました。現在、JavaScriptを勉強中です。学習の記録として、プログラミング関係をこれから投稿していきます
https://www.yuito-design.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away