11th Street App UI UX分析レビュー
こんにちは〜ソフトラプスです。
今日はモバイルアプリ11番街を分析してみましょう。
最近、YouTubeのメディアデザイナーはモバイルUI UXの10の原則を非常によくまとめました。
彼を元に11番街アプリを分析してみましょう。
モバイルレイアウトをデザインしたりベンチマークするときは、分析が最も重要です〜！
10のモバイル原則と一緒に見てみましょう！！
最初。フォントサイズ
モバイルアプリでは、フォントサイズはかなり重要です。
大きすぎるか小さすぎると、Webアプリの読みやすさがひどく落ちるそうです。
だから原則のようなものを書き留めておくのに1rem基本で12pxに合わせて
それより小さくないように設計することが重要です。そして最大サイズはその2倍の24pxを越えないのが一番良いそうです。
11番街はそれに答えでもするように硬く合わせられていますね！
第二。ボタンのサイズを大きくする
モバイルアプリを作成するときに最も多く間違いを犯すと、ボタンのサイズが非常に小さくなります。
しかし、ボタンのような機能的な要素は直感性を高めるべきです。
ちょっと見たときに何が目的かをユーザーに認識させることが最も重要です。
11番街では、メインボタンはサイズを大きくし、色の違いで重要度を示したことがわかります。
第三。アイコンを統一する
Webアプリのアイコンは、そのプラットフォームのイメージであり、色、アイデンティティを表すとしても過言ではありません。
アイコンの数が少ないと統一させるのは難しくありませんが、
その数が指数関数的に増えれば、同じ感じのアイコンを作るのは難しいと言えます。
彼を中心に11番街のアイコンを見ると、ちょっと疑わしいかもしれないと思います。
アイコンが大きさや感じがちょっとした感じを少し受けますが。
このような場合は11番街やクパンのようにカテゴリが多分多くのプラットフォームではよく見られる現象です。
それでも機能的な部分や商品カテゴリーなど、大分類では感じを統一しようとした感じが強くなります。
その他のアイコンは暗い灰色とポイントで11番街特有の赤色で感じを与えた部分が良かったです。
第四。アクセスしやすいフォントカラー
フォントは色だけでその目的が明確に伝わることができます。
それでフォントが最も重要だと言うのか見ます。
11番街同じ場合はクーポン登録、受け取るような機能的な場合は赤系列、
商品到着日などの場合は、青系列で読みやすさを高め直感性を容易にした部分が際立っています。
第五。統一感のあるレイアウト
ウェブサイトを初めて入るとき、人々は本能的に内部のコンテンツよりも
彼を構成するレイアウトが最初に目に入るという。
丸い感じなら丸い感じ、斜め感であれば斜め感、こんな感じですね。
11番街は、角と硬く落ちるレイアウトを選択したようです。
その一般的な border-radius も見えません。
このような斜めのデザインは、プラットフォームの信頼性を高め、仕事をうまくやるように感じさせます。
間違えばデザインには気にしないように見えるかもしれませんが、
11番街は電子にあたるようによく製作したようです。
第六。コンテンツ内の階層
実際、上で説明したように、斜めのデザインは間違っている間、デザインには気にしないように見えるかもしれません。
このような場合にコンテンツ間の階層を表現して強弱調整を行うと
何か多彩に見え、内容がいっぱいのように見せることができますが。
11番街では重要な部分のフォントサイズを育てたり厚みを与えてテーマをよく表したし、
領域としてもどうしても退屈できる白い背景の中で特別な部分は
微妙な強調をbackground-colorにしておいたのがわかります。
7番目。ボトムナビゲーションバー
下部のNavバーが原則の1つとして出てくるとは知りませんでした。
最近、モバイルUIには下のNavバーがよく入っているようです。
上部に位置するだけでは確かに不足しています。
下部ナビゲーションで最も重要なのは直感性と読みやすさです。
アイコンが週になっているので、アイコンの形だけを見てください。
そのボタンがどのような機能を果たしているのか、ユーザーはすぐに気付く必要があります。
そして、あまりにも多いと読みやすさが落ちるので、本当に重要な部分を選ぶことができるはずです！
11番街のような場合は少し不思議な部分がありました。
ハンバーガーバー（メニューボタン）、アマゾン、マイページのような場合には、アイコンが何をするのかすぐに気付くことができた。
宇宙パス広告ボタンや本商品リストボタンはすぐ気づくにはぎこちない部分がありました。
navにいるべきか疑問も少し聞きましたが皆さんの考えはどうですか？
8番目。コンテンツ間の余白
マージンと呼びます。コンテンツ間の間隔はサイトの読みやすさです
高めてくれ、審美的にももっとゆったりと見えるようにしてくれます。
ウェブでは知らなくてもモバイルではスクロールの長さはあまり重要ではないということです。
11番街では若干は余裕が少なく見える感じです。
コンテンツ間の間隔が8px程度です。
中に含まれる情報が多ければそうかもしれませんが、実際のモバイルで見たとき
大きく不便だという感じは受けられませんでしたが、ちょっとぴったりついているという感じはいただきました。
9番目。コンテンツ間のグループ化。
コンテンツ間のグループ化はカテゴリを大分類し、それを視覚的に
差別化できるかというのがカギだ。
使用したい目的を見つけやすく、ユーザーが利用するのに不便がないことが重要です。
この部分において11番街は分類をとてもよくしておいた感じです。
文字を読まなくても、レイアウトだけで私が見ているものがどのカテゴリにあるのかがわかるという感じを受けました！
10番目。レイアウト
モバイルは、デバイスがデスクトップほど大きくはありません。
だから、アプリのレイアウトをキャッチするときに細かく分割されていると、何か複雑に見え、目に入らないようになります。
一つ一つ丁度情報が見えるのがユーザー体験にももっといいでしょう？
11番街のような場合には一旦大きく大きく割れています。
中のコンテンツが目によく入ってきます。ギャップはもう少し広げることができるようです
思いがけますが、全体的な質感はしっかりしていて不快ではありません。
カテゴリーはちょっと細かく分かれていますが、11番街はカテゴリが多分多いので、そうできると思います。
どうでしたか？今後、当社のソフトラプスはUI UXベース
理論とベンチマークでWebアプリを分析してレビューを上げる計画です。
頑張ってくれるから皆さんの思いをコメントで残してください～！
今後ユーザーが使いやすく見やすいアプリ
たくさん出てほしいと私たちここで挨拶します〜！ありがとうございます。
댓글
댓글 쓰기