あるiPhoneアプリの解説記事を書くために、アプリ内の設定項目を確認していたところ、以前から気になりつつも放置していた疑問に筆者は直面した。 その疑問とは 「アプリやOSの設定画面などに使われるスイッチは、どちらがオン(ON)でどちらがオフ(OFF)か分かりにくいことがある。なぜ、分かりにくいのか?」 ということだ。 アプリのスイッチの意味が分かりにくい? 基本的にiPhoneやAndroidの日本向けアプリではオン・オフの表現が用いられていることが多いようだが、中には上の画像のように | と ◯ の表現が用いられるアプリも存在する。また、Android端末でも機種によっては同様の表現が設定画面などで使われている。 はたして | と ◯ の表現でオンとオフの区別を自然に行うことができるのだろうか。以前から、筆者の心の中に、この小さな疑問がくすぶり続けていたのだ。 前提として確認しておくが
2013-02-16 【iPhone】UIデザイン向上をサポートをするOSS 5つ iOSオープンソースライブラリ徹底活用作者: 菊田剛出版社/メーカー: 秀和システム発売日: 2012/12メディア: 単行本 クリック: 6回この商品を含むブログ (1件) を見る書き終えて、なんとなくタイトルに少し違和感が。。。日々色々なアプリがリリースされていますが、様々なアプリUIを提供してくれます。 中には、ClearやPathのような奇抜(というと言い過ぎ?)なUIなものもあれば、標準UIコンポーネントから構築されたアプリまで、様々です。ただ、ある著名なアプリや、これは便利!というようなUIというのは自然と広まり スタンダードになっていく傾向もあります。例えば、下にぐいっとひっぱって更新。 元々どのアプリで実装されたものかわかりませんが、TwitterやFacebookなどでも実装され
【スマートフォンのユーザビリティチェックリスト】 1.小さくし過ぎない、詰め込み過ぎない 2.バラつきを無くす 3.タップしたオブジェクトは反応させる 4.画面遷移アニメーションを設定する 5.画像の解像度はきちんと合わせる 6.実装側でもデザインする 7.ローディング中も画面操作できるようにする 8.真っ白なローディング画面を避ける 9.更新頻度の低いコンテンツはローカルで保持する 【スマートフォン向け開発】ユーザビリティチェックリストを作ってみた http://masaki0720.tumblr.com/post/19192937336 【Android設計のポイント】 Android では画面上になるべくボタンをおかないAndroid 端末ボタンを効果的に使うAndroid には Notification、ウィジェットもある
Tweet アニメーションや効果音が、たまらなく気持ちいいアプリがある。スワイプした時の動き、ボタンを押した時の効果音、ピンチアウトのユーザーインターフィエス。ちょっとしたギミックが、そのアプリの魅力を決定的なものにする。 今回は、UIが斬新なiPhoneアプリを集めた。同じ感覚の人がいると嬉しい。 Daily Routine 1日のルーティンワークを設定して通知するアプリ。カラフルなスロットを上下に動かした時の、マーブルの曲線がとても綺麗だ(動画 00:05)。 関連記事:時間にくさびを打って24時間を習慣化する Daily Routine | Lifehacking.jp Daily Routine - YouTube Tweetbot 小気味よいアニメーションと効果音がクセになるアプリ。とりわけ、ツイートを左右にスワイプした時の動きと音がたまらない(動画 01:30)。また「ツイート
iUI - Mobile web framework for high-end devices スマホサイト作成のフレームワーク「iUI」が新しくなっている件。 jQueryMobileも便利なのですが、iUIはiPhone発売当初からあるフレームワークで、ルールにそってHTMLを記述するだけでiPhoneアプリのようなページを作れるのが魅力のフレームワークです。 公開当初はgoogle codeとかにホスティングされているだけでしたが専用のカッコいいページもできてる模様。 iPhone, iPad, Android にも対応していて、便利に使えるようになっているようです テーマデザインも色々選べるようになりました。 ビデオプレゼンテーションや、デモを落として試してみましょう 関連エントリ コンポーネント満載のスマフォ向けWEBサイト作成フレームワーク「ChocolateChip-UI」
いくつか同じようなギャラリーサイトは ありますが、こちらもなかなか見やすか ったのでメモ。スマートフォンのUIの パターンギャラリーサイトです。スマー トフォンに限らず、通常のWebサイトの パーツデザインの参考にもなりそうです。 特にスマートフォンのUIは細かい部分のこだわりが見られてとても参考になりますので見ておいて損は無いかと思います。 シンプルな作りです。パーツはカテゴリで分けられていて探しやすいです。ちょっと重いかな・・ 例えばこちらはグリッドのカテゴリ。同じ幅、同じ高さという限られた空間の中で、様々な工夫が見られます。 クリックするとその場でLightbox風にポップアップします。iTuneへのリンクもあるので確認しやすいですね。 同じようなギャラリーサイト 似たようなサイトは沢山あるので合わせてチェックしてみてはいかがでしょう。 Mobile UI Patterns pttr
iPhone-like drag scroller test iPhone風にドラッグして画面をスクロールするUIが作れるjQueryプラグイン。 画面をドラッグしてずらすことで画面をスクロールできます。こういうUIをつくろうと思っても1からつくると大変そうなので覚えておくとよさそう。 ドラッグ&ドロップで要素移動。 デモはあじけない単なる四角形ですが、画像なんかをおけば使いかた次第で楽しいものが作れるかも。 関連エントリ iPhone用サイトを作成する際に便利なjQueryプラグイン「iPhone UI」 iPhoneのロック解除風UIでCAPTCHAするjQueryプラグイン「QapTcha」 コンポーネント満載のスマフォ向けWEBサイト作成フレームワーク「ChocolateChip-UI」
コンポーネント満載のスマフォ向けWEBサイト作成フレームワーク「ChocolateChip-UI」 2011年04月06日- ChocolateChip-UI コンポーネント満載のスマフォ向けWEBサイト作成フレームワーク「ChocolateChip-UI」 ダウンロードしたサンプルにはかなりの量のiOSアプリ風のUIが含まれていて、これスマフォサイト用のインタフェース作成には困らないんじゃないかという感じです。 リストのUI 読み込み画面 アイコン付きテーブル ちょっとUIを変えてみる例 サムネイル付きリスト ちょっとデザインを変える 普通のリストも。 デザインを変えたリストも ラベルつきのリスト ボタンや、ON/OFFも スライダーも 背景の模様も自由に変えられます ボタンも豊富 ツールバーデザイン。アイコンを入れたり色々 更にカラフルなボタンやアイコンのみのボタンも。 タブも作れます
iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」 2011年02月17日- Skinkers Labs : TouchSwipe iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」。 タッチパネルを触って左にスライド、右にスライドといった操作をスワイプといいますが、このイベントを取得するjQueryプラグインのご紹介です。 1本指だけではなく、2本指でスワイプした際のイベントを取ることも出来ます(それぞれ区別可能) ブラウザ上でiPhoneアプリっぽい動作を簡単に実現できますね。 demoをiPhone等で見てみましょう(違和感なくスワイプできるはずです) 1本指スワイプのデモ 2本指スワイプのデモ スワイプを使った画像ギャラリー 実装はjQueryベースということでや
この三ヶ月ではてなブックマークiPhoneアプリの新バージョンとAndroidアプリを開発してきました。 両方共担当はエンジニアid:ninjinkunとデザイナーid:kudakurage、総合ディレクションid:nagayamaです。同じ開発者がiPhoneアプリとAndroidアプリ両方を作った事例として、なかなか面白いのではないかと思います。開発期間はちょうどそれぞれ一ヵ月半ずつでした。 自分にとってもブクマチームに移動してから初めての大きな仕事だったので、両方共思い入れがあるプロダクトです。開発話と一緒に、スマートフォンアプリを作る際の流れや、気を付けていることなどをまとめようと思います。(長いです) 開発プロセス iPhoneもAndoirdも開発の流れは基本的に一緒で、以下のような流れになります。 機能の検討 UIの検討 実装 ざっくり並べただけではWebサービス開発と変わり
Titanium Mobile は JavaScript で iPhone/Android のアプリ (not Webアプリ) を開発できる開発環境。詳しくは Titaniumで始めるモバイルアプリ作成の基礎知識 (1/3):Web技術でネイティブアプリを作れるTitanium(2) - @IT などに解説があります。 少し時間があったので、JavaScript で作るというのがどんな感じか試してみました。作ったアプリは こんな感じで TableView があり、選択すると WebView でアプリ内ブラウザが立ち上がる、ブラウザはツールバーで「戻る」や「リロード」が可能。あとはタブコントロールがあったり・・・という単純なもの。初期起動画面のサイトリストは、HTTP でローカルに立てたサーバーから JSON で読み込んでいます。 Web上のドキュメントを見ながら2, 3時間試行錯誤で一応の
つくる社のまえだ(@monoooki)です。今回はiPhoneゲームかなぶんのデザインリニューアルについてご紹介します。 担当した作業はアプリのUIデザインでしたが、基本的にいつもやっているWebデザインと同じ要領で進めることができました。コーディングやチェック環境が減った分、気楽に出来たと思います。 旧バージョンの問題点について ゲーム画面に出てくる女の子(かなこちゃん)が、男児ユーザーに不評 海外展開をしたいので、性別、国、年齢を問わないニュートラルな雰囲気にしたい その他、ゲーム画面のあちこちを整えて欲しい 石原さんのお子さんは男兄弟なのですが、ゲーム画面に女の子が出てくるのをあまり好まなかったようです。自分もそうでしたが、小学生くらいの年齢だと女の子の絵の入ったものは気恥ずかしくて、あまり持つことはありませんでした。現状は大きいお友達成分がやや含まれています。 想定しているユーザー
Technical Note TN2262: Preparing Your Web Content for iPad appleのサイトにiPad用のサイト作成準備のためのページが上がっていました。 USの発売日に30万台発売ということで、日本でもそれなりに売れることが予想出来ますが、今後iPad用にページを最適化する場合に覚えておくとよさそうです。 メモついでにご紹介。 UserAgent UAはiPadが入ってWebKitベースなので、AppleWebKit となるみたいです。 Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10 プラグインは使わない Fla
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く