1. まとめトップ

[改善?] iOS 7のUIは本当にいいの? [改悪?]

iOS最大の変化とも言われるiOS 7のユーザインターフェイス。改善なのか改悪なのか、細かく見ていきます。

更新日: 2013年12月19日

5 お気に入り 15796 view
お気に入り追加

iOS 7のパララックス効果やアプリ起動時等のズームエフェクトで酔ってしまう人が出ている模様。

★ Appleのデザインガイドライン

Appleがソフトウェア開発者に向けて書かれたデザインガイドラインには、以下の3つのポイントが書かれています。やや抽象的ですが、目指している方向が示されています。

服従 ( Deference ) : UIはユーザによるコンテンツの理解や、すべき操作方法を分かりやすくするが、コンテンツとUIが並列関係になることはない。

コンテンツがメインで、ユーザインターフェイスはサブということ?

明快 ( Clarity ) : テキストはあらゆるサイズで読みやすく、アイコンは精密で明快、装飾は目立たせすぎずに適切、そして機能性を重視したデザインである。

iOS 7 - デザイン @ Apple

層化 ( Depth ) : ヴィジュアルレイヤ ( 層化UI ) とそのリアルな動きがユーザの満足と理解を高める。

iOS 7 - デザイン @ Apple

★ iOS 7のデザインはいわゆる "フラットデザイン" ではない

一見、ちまたでよく見られるフラットデザインを採用したようにも見えるiOS 7ですが、よく見ると、単なるフラットデザインではないことが分かります。

iOS 7は、ジョニー・アイブ曰く「新しいタイプの奥行き表現」。レイヤーとディメンショナリティ(次元性)に溢れています。そして全く新しいタイプのアニメーション。
 例えば新しい天気のアイコンのような、加速度計によって計算された、視差効果(Parallax Effect)を使った奥行き表現もそうです。

iOS 7にはスピードとユーザビリティに力点が置かれていますが、そのために快適さが犠牲になっている面もあります。ただAndroidユーザーが使う分には、逆に問題ないはずです。iOS 7のルック&フィールは、Androidにより近いものになっているからです。

★ "一般的な" フラットデザイン5箇条

フラットデザイン5箇条
・グラデーションを使わない!
・質感は無視して、とにかく塗りつぶし!
・形に迷ったら正方形!
・カラフル大事! ビタミンカラーよりもちょっとくすませて!
・整列して並べて、気持ちよく配置!

iOS 7では、グラデーションは排してはいません。

★ グラデーションは使用可, 上側と下側のどちらが明るくてもいい

http://9to5mac.com/2013/06/10/welcome-to-ios-the-first-install-gallery/

・グラデーションを使うかどうかに、明確なルールはあるのだろうか。見た目の統一感に欠ける。

・グラデーションによって、人間はそれに凹凸を感じるが、背景に影が落ちていないため、違和感を感じる。

・グラデーションの向きも、電話は上が明るく、メールは下が明るく、不統一であるのも違和感につながる。

・背景と同じ色のアイコンは、背景のとけ込んでしまう。

重要なのは、(過度な)装飾がなくても、ユーザーがアプリの機能を理解できるようにすること、そしてユーザーの期待どおりに動作するよう、アプリを慎重にデザインすることです。これは当たり前のように思えますが、そう簡単なことではありません。

★ ボタンには "枠" はつけず "文字の色" でボタンだと理解させる

iOS 7では、ボタンには枠や塗りはあまり使われていない。コンテンツの邪魔をしないように、なるべくコンテンツを制御するボタン類の装飾を排除する方向のように見える。ただし、それでは何が押せるものか分からないため、色をつけて押せる箇所を示すようになっている。

http://9to5mac.com/2013/06/10/welcome-to-ios-the-first-install-gallery/

・アプリケーション毎にテーマカラーというものがあり、その色によってユーザ操作を受け付けることを表現する。

タイマー終了時の通知画面

http://9to5mac.com/2013/06/10/welcome-to-ios-the-first-install-gallery/

・日本語ではほとんど意味がありませんが、グループ名は大文字を使って目立たせようとしている模様。「DO NOT INCLUDE」など。

1 2 3





コンピューター・ガジェット・天文・カメラ関連に興味があります。この方面の情報コレクションがみなさんのお役に立てればと思います。 Twitter : _crane_



  • 話題の動画をまとめよう