ios 7でのuiデザイン | ios 7エンジニア勉強会
Post on 15-Jan-2015
28.396 Views
Preview:
DESCRIPTION
TRANSCRIPT
iOS 7 UIの考え方ヤフー株式会社CMO室 藤原 亮
ID:@ryospl
13年10月8日火曜日
Agenda1. iOS 7デザイン理念2. iOS 7 UIへのアプローチ 3. Yahoo! JAPANでのデザイン事例
13年10月8日火曜日
1. iOS 7デザイン理念
13年10月8日火曜日
iOS 7 Design Resources
https://developer.apple.com/library/ios/design/ iOS 7 Design Resources - Apple Developer
13年10月8日火曜日
iOS 7 3つのテーマ
UIはユーザによるコンテンツの理解やコンテンツとの対話を助けるが、コンテンツと競合しない。
テキストはどのサイズでも読みやすく、アイコンは精密で明快、装飾は目立たず適切、そして機能性を重視したデザイン。
ヴィジュアルレイヤ（層化UI）と、そのリアルな動きがユーザの学習に効果がある。
1. 控えめ(Deference)
2. 明瞭(Clarity)
3. 奥行き(Depth)
13年10月8日火曜日
質感や本物らしさの再考ベゼル、グラデーション、ドロップシャドーを多用すると「重い」UI要素になり、コンテンツより目立つ。
1. Defer to Content
フルレイアウトを有効活用装飾や枠の使い方を再考し、情報内容を画面いっぱいに表示。
控えめ
半透明なUI要素を使って、奥に何があるか見えるように半透明な要素には、作業の流れを示し、より詳しい内容があることを認識させ、あるいは一時的な要素であることを明示する働きがあります。
13年10月8日火曜日
2. Provide Clarity 明瞭
簡潔な色遣いにする。鍵となる色（たとえば「Notes」の黄色）で、重要箇所を強調し、操作可能な場所であることをそれとなく示すことができます。また、一貫した視覚テーマを与えることにもなります。
ホワイトスペースを活用。うまく利用すると、重要な情報や機能が目につき、理解しやすくなります。また、穏やかで落ち着いた雰囲気を作り、集中しやすくする効果もあります。
システムフォントを使って読みやすさを確保する。
境界なしのボタンを活用する。状況によっては、際立たせることも
13年10月8日火曜日
3. Use Depth to Communicate 奥行き
「Calendar(カレンダー)」は画面遷移の都度、年、月、日の間の階層関係を組み替える。
年単位のビュー（図）をスクロールすると、即座に今日の日付を確認し、カレンダーに関する他の作業ができるようになっています
ある月を選択すると、年単位のビューが拡がるような動きの後、月単位のビューが前面に出てきます。
月単位のビューを切り離し、現在の週を画面の上方に追いやるような動きの後、該当する日を表す時間単位のビューが現れます。
年 月 日
13年10月8日火曜日
2. iOS 7 UIへのアプローチ
13年10月8日火曜日
iOS 7 UI
iOS 7Android 4.x
ミニマリズム＆レイヤーデザイン完全フラット
13年10月8日火曜日
1. コンテンツファースト
2. 透過レイヤーUI
3. 非スキューモーフィズ
UI設計時のポイント
ラベル / レイアウト / アイコン 重要性増
Apple iOS7http://www.apple.com/jp/ios/
13年10月8日火曜日
トランジション（アニメーションエフェクト）
ビジュアル以外での視覚効果によるユーザー学習。
Apple iOS7http://www.apple.com/jp/ios/
13年10月8日火曜日
なぜ、フラットが流行？
13年10月8日火曜日
現実社会に存在する物を模したユーザーインタフェース
Skeuomorphism Minimal Designあまり使用しない機能のせいでシステムが肥大化することを避け、必要最小限の機能に絞って設計すること。
メタファの限界 メタファ ＝ 何かに例えた表現
13年10月8日火曜日
3. Yahoo! JAPANでのデザイン事例
13年10月8日火曜日
iOS 7 Redesign iOS 6 Design
iOS 6 Design
天気
Copyright (C) 2013 Yahoo Japan Corporation. All Rights Reserved.
13年10月8日火曜日
iOS 7 Redesign iOS 6 Design
知恵袋
Copyright (C) 2013 Yahoo Japan Corporation. All Rights Reserved.
13年10月8日火曜日
ユーザーセグメントなりのミニマルデザインを考える。
13年10月8日火曜日
ご清聴ありがとうございました。
13年10月8日火曜日
top related