狠狠撸

狠狠撸Share a Scribd company logo
さわってみよう Firefox OS




デザイナー目線で Firefox OS を変えよう!
       2012/11/03
自己紹介

   Twitter: @masap
   職業: 組み込みプログラマ(主に Wi-Fi)
   ハッシュタグ: #FirefoxOSjp
Firefox OS の概要
開発状況

   Firefox OS バージョン 1 に向けて開発中
       テスター達によるテスト段階。
       新規機能の取り込みはしない。
       2013年初頭にブラジルにて発売予定。
テスター達の評価

   ポジティブなもの
       フォトビューアが高速
       アイドル時の電池の持ちが良い
       Bluetoothがちゃんと動く
   ネガティブなもの
       キーボードにスペースキーが無い
       Wi-Fi がつながらない
       SMSを読み終えてもSMS通知が消えない
       設定した時刻にアラームが鳴らない
Firefox OSの構造

   3層構造

      Gaia     ユーザーインターフェイス層


     Gecko      レンダリングエンジン     ユーザ空間


                ハードウェア仮想化層

      Gonk

                 Linux カーネル    カーネル空間
Gaia

   Gaia とは
       HTML5 (+ CSS + JavaScript) で書かれた UI。
       UI 自体が HTML5 で書かれているのは Firefox OS だ
        け。
       HTML5 を使っているのでカスタマイズが容易。今日の
        テーマは Gaia のカスタマイズ。
Firefox OS を変えてみる

   UI は全て Gaia で描かれている
   実機にて変えてみる
       起動画面
       電話着信音
デザイナーさんのアイディア求む!
設定画面に華が無い

   地味
アイコン

   何を表しているのかわかりづらい
ウイジェット

    ウィジェット(画面パーツ)の問題点


    小さくて押しづらい
      戻るボタン
                         素人っぽい
                         トグルボタン



     押せるように
    見えないボタン
ウイジェット(その2)

   人間工学に反したデザイン
       入力位置より確定位置が上にある。
                     ユーザーの視線の動き
            確定位置




入力位置
音

   ロック解除时の音が変。
本家に提案する!

   内容によっては本家に取り込んでもらうことも
       GitHubでソースが公開されている。
       こちらの提案を送って受理されれば以後全員がそれを
        使うことに。
まとめ

   スマートフォン自体をデザインするという経験は滅
    多にできないと思うのでこの機会にぜひ!

More Related Content

デザイナー目線で Firefox OS を変えよう

  • 1. さわってみよう Firefox OS デザイナー目線で Firefox OS を変えよう! 2012/11/03
  • 2. 自己紹介  Twitter: @masap  職業: 組み込みプログラマ(主に Wi-Fi)  ハッシュタグ: #FirefoxOSjp
  • 4. 開発状況  Firefox OS バージョン 1 に向けて開発中  テスター達によるテスト段階。  新規機能の取り込みはしない。  2013年初頭にブラジルにて発売予定。
  • 5. テスター達の評価  ポジティブなもの  フォトビューアが高速  アイドル時の電池の持ちが良い  Bluetoothがちゃんと動く  ネガティブなもの  キーボードにスペースキーが無い  Wi-Fi がつながらない  SMSを読み終えてもSMS通知が消えない  設定した時刻にアラームが鳴らない
  • 6. Firefox OSの構造  3層構造 Gaia ユーザーインターフェイス層 Gecko レンダリングエンジン ユーザ空間 ハードウェア仮想化層 Gonk Linux カーネル カーネル空間
  • 7. Gaia  Gaia とは  HTML5 (+ CSS + JavaScript) で書かれた UI。  UI 自体が HTML5 で書かれているのは Firefox OS だ け。  HTML5 を使っているのでカスタマイズが容易。今日の テーマは Gaia のカスタマイズ。
  • 8. Firefox OS を変えてみる  UI は全て Gaia で描かれている  実機にて変えてみる  起動画面  電話着信音
  • 11. アイコン  何を表しているのかわかりづらい
  • 12. ウイジェット  ウィジェット(画面パーツ)の問題点 小さくて押しづらい 戻るボタン 素人っぽい トグルボタン 押せるように 見えないボタン
  • 13. ウイジェット(その2)  人間工学に反したデザイン  入力位置より確定位置が上にある。 ユーザーの視線の動き 確定位置 入力位置
  • 14. 音  ロック解除时の音が変。
  • 15. 本家に提案する!  内容によっては本家に取り込んでもらうことも  GitHubでソースが公開されている。  こちらの提案を送って受理されれば以後全員がそれを 使うことに。
  • 16. まとめ  スマートフォン自体をデザインするという経験は滅 多にできないと思うのでこの機会にぜひ!