Recommend Apple Human Interface Guidelines

43ce16de3a74c75adc7dfd6194801452?s=47 asmz
October 21, 2019

Recommend Apple Human Interface Guidelines

UIデザインを考える全ての人たちに捧げる Apple Human Interface Guidelinesのススメ
Talked at Sendai Frontend Meetup #2

43ce16de3a74c75adc7dfd6194801452?s=128

asmz

October 21, 2019
Tweet

Transcript

  1. 2.

    asmz.beer 誰なのか? • Akira Shimizu / asmz (@_asmz) • https://asmz.beer/

    • 株式会社ビデオマーケット 仙台オフィス • iOS / Android エンジニア • 個人開発:IT勉強会検索アプリ ◦ https://eventech.asmz.beer/
  2. 3.

    asmz.beer 本日の内容 • ターゲット ◦ Apple Human Interface Guidelinesを読んだことがない人 ◦

    UIデザインに関わるエンジニア、デザイナー、ディレクター • 目標 ◦ 案外Webデザインに通ずるところがあるな、と思ってもらえる ◦ 思わず全部読んじゃう ◦ 実際にサービスに取り入れちゃう
  3. 7.

    asmz.beer Apple Human Interface Guidelinesとは • 主要デザインテーマ、デザイン原則 • アプリのアーキテクチャ ◦

    ナビゲーション、モーダル、Loading、etc ... • ビジュアルデザイン ◦ レイアウト、アニメーション、ダークモード、 etc ... • 基本ユーザインタフェース ◦ Bars、Views、Controls デザインに対する 大局的な指針 大局的な指針や原則を 踏まえた、 実装ガイドライン 単にUI部品の紹介や利用方法を集めた リファレンスドキュメントではない
  4. 10.

    asmz.beer なぜiOSエンジニア以外もHIG? • General design principles ◦ Metaphors from the

    real world ◦ Direct manipulation ◦ See-and-point (instead of remember-and-type) ◦ Consistency ◦ WYSIWYG (what you see is what you get) ◦ User control ◦ Feedback and dialog ◦ Forgiveness ◦ Perceived stability ◦ Aesthetic integrity • Design Principles (iOS) ◦ Aesthetic integrity ◦ Consistency ◦ Direct manipulation ◦ Feedback ◦ Metaphors ◦ User control Human Interface Guidelines: The Apple Desktop Interface (1986) iOS Human Interface Guidelines (2017) 時代やデバイスが変わっても、普遍的な部分は 変わらず現在まで受け継がれている WebのUIデザインにおいても 適用できるはず
  5. 14.

    asmz.beer Design Principles(デザイン原則) 01 Aesthetic Integrity (美的整合性) 02 Consistency (一貫性)

    03 Direct Manipulation (直接的な操作感) 04 Feedback (フィードバック) 05 Metaphors (メタファーの利用) 06 User Control (ユーザによる制御)
  6. 15.

    asmz.beer 01 Aesthetic Integrity(美的整合性) • アプリの外観や動作は、そのアプリの目的や機能と整 合性が取れたものにする アニメーションやイン タラクションを利用 楽しませ、引き込ませ

    るようなデザイン 気を散らさない 控えめな装飾 標準UI部品を用いる など、動作を予測しや すいデザイン 没入型アプリ ・ゲーム ・エンタメ 実用型アプリ ・ビジネス ・データ管理 ・医療系
  7. 22.

    asmz.beer まとめ • Apple Human Interface Guidelinesとは ◦ 「人間とコンピュータがどう対話すべきであるのか」という、インタ フェース設計全般における普遍的な考え方を定義したもの

    ◦ 長らく受け継がれてきたデザイン原則に基づき、具体的にどのよ うにインタフェース設計すべきかを導いてくれるガイドライン
  8. 23.

    asmz.beer まとめ • WWDC 2017 Essential Design Principlesより The goal

    isn't to make a beautiful app, or a well-organized app, or a simple app or a focused app. Those things are all really important, but they're not the real goal. (インタフェース設計の)目標は美しいアプリ、整然としたアプリ、シンプルなアプリ、フォーカスしたアプリを 作ることではありません。これらは全て非常に重要ですが、本当の目標ではありません。 The real goal is about serving the human beings or positively affecting the lives of the people who use the apps that you make. 本当の目標は人間に奉仕すること、また、そのアプリを利用する人々の生活にプラスの影響を与えること です。 テクニカルな部分だけでなく、より人間的なレベルで ターゲットを理解し、インタフェース設計することが重要
  9. 24.

    asmz.beer 参考 • Apple Human Interface Guidelines ◦ https://developer.apple.com/design/human-interface-guidelines/ •

    WWDC 2017 Essential Design Principles ◦ https://developer.apple.com/videos/play/wwdc2017/802/ • PEAKS はじめてのUIデザイン(書籍) ◦ https://peaks.cc/books/ui_design • Macintosh から iPhone へ受け継がれるデザイン原則 ◦ https://goodpatch.com/blog/hig-design-principles/ • iOS ヒューマンインタフェースガイドラインの原則 ◦ https://qiita.com/usagimaru/items/9b55daa4d88b0bb98f38 • たまたま見つけた昔の HIGのミラーサイトらしきもの ◦ http://mirror.informatimago.com/next/developer.apple.com/documentation/macos 8/HumanInterfaceToolbox/HumanInterfaceGuide/humaninterfaceguide.html