ホーム » UX Design » UX-design #Day27(Amazon Alexa) #2

目次

UX-design #Day27(Amazon Alexa) #2

目次

Amazon Alexa ミュージックハブ画面をトレースしてみた!

26日目です。今週からAmazon Alexaの画面をトレースしていきます!自分でも簡単な画面を選んでしまったなと。たまにはいいかなとも思っていますが。だいぶ、spotifyの画面と違いますよね。当たり前ですが。個人的にはSpotifyの方が好きですが、デザインの観点ではこちらもシンプルでわかりやすいものになっていると思います。自分のプレイリストがバレる。では、早速気づいたことを書いていきます!

【UI/UXの観点から気づいたこと】

  • 昨日のデザインからメインコンテンツのみを変更しただけですね。それとヘッダー。ヘッダーにある右の設定の歯車アイコン。他のアプリでも設定はよく歯車が使われるので、ヤコブの法則に従ったデザインだと思いました。
  • 余談ですが、このAlexaのアイコン群、かわいいと思います。灰色一色ではなく、濃いめの灰色と2色ぐらいを組み合わせて、かつcornerが丸くなっているので、可愛らしさが増していると思います。
  • これ、曲など、四角いのが同じようにならんでいたら、情報としては9つ存在することになるのですが、ミラーの法則にしたがってチャンク化しており、まず3つの情報にわけられます。なので認知負荷が低くできています。
  • UIの観点でいうと、画面右端のところで四角が途中で切れています。こうなると、人はその先にも続いているということがわかり、横にスワイプして続きの曲/プレイリストをみることができます。その先にもあるよ!ということを伝えたい時はこのように途中までしか見えないようにするというのがデザインのコツですね。
  • 余談が多くなるのですが、このジャケット写真の画質がAmazon musicのよりもSpotifyの方が綺麗でした。これは元のアプリでの画質が違うからでしょうか。Figmaで拡大してみたら、かなりAmazonの方は粗くて、、、っていう話だけです。

私がトレースしたものについて気づいたことやアドバイスがあれば、コメントいただけると嬉しいです!

またみなさんがこのアプリの画面で気づいがUI/UXについて共有いただけると嬉しいです!!

(この画面についてはもう少し使い方を勉強したいと思います。)

コメントを送る

世界をUXデザインでより良くする
UXコピーでより良くする
明日も一緒に