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