2012 年 9 月 26 日 追記しました。 要約エントリー。 元記事 : iPhone 5 website teardown: How Apple compresses video using JPEG, JSON, and <canvas> アップルのサイトの iPhone5 のページにある「スライドしてアンロック」のアニメーションが、信じられない実装になっている、という話。簡単に要約してみた。(ミスなどの指摘は @lowply までお願いします) もともと h.264 と WebM の動画フォーマット戦争でブラウザ互換性の問題がまだ残っている上、iPhone などは「再生ボタン」を押さないと再生できなかったりするので、こうした短いアニメーションに video タグを使うことは最適解ではなかったらしい。 そこで発想の転換をして、Retina MBP のページでは、蓋が開くたった 2
そこには目と脳の働きが関係していました! iOS 5、新デザインの1つには設定メニューにあるボタンの変更があります。iOS 4の角丸のデザインよりもさらに丸っこいボタンになっています。そして、人はどうやら丸いボタンの方を好むそうです。その理由は目と脳の動き。四角い物よりも丸い物の方が目に止まりやすく、脳が認識しやすいと言われています。中心窩の人の目は丸い物の方が四角い物よりも数段早く処理できるのだそうです。人が丸っこい物を好むのは、目と脳が重労働を強いられないより楽な動きだからなのです。又、丸い物は中心に注意を集めるので、中のコンテンツ(文字や記号等)に目の意識を集中させることができます。四角は逆に外へと注意をひきます。つまり、iOS 4の四角ボタンのデザインだと外へと注意をひかれているのに逆らって中に持って行かないといけません。iOS 5の丸ボタンならば自然と中へと意識がいく、目にも脳に
開発部の井上(@inonb)です。12月に位置情報サービス・ロケタッチのAndroidアプリをリリースしました。ぜひお試しください。 さて、今回はAndroidアプリのUIまわりについて書いてみたいと思います。 iPhoneアプリに比べて、AndroidアプリのUI仕様は、わりとWebに近いところがあります。Webの仕事の経験があるデザイナーさんは入りやすいところもあるのですが、マルチディスプレイ対応など面倒なところもあります。 デザイナーさんに聞かれた質問について簡単にまとめてみたいと思います。 1. iPhoneアプリのデザインって流用できますか? 流用はできるだけ避けたいです。 たとえばTwitterやFacebookのアプリなど、両プラットフォームに多くのユーザーを持つアプリを見ても、iPhoneとAndroidではデザインが変わっているのが分かると思います。 Androidのデザ
この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日本のスマホサイトは2年間でこんなに変わった iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」(スマホサイト)を開設する企業が増えている。当初はiPhone(iOS)の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 ここでは、Web制作者が見ておきたいスマートフォンサイトを紹介する。実務で参考にできるように、対象を日本語の企業サイトに絞り、業種別に分類してまとめた。スマートフォンサイトの制作に入る前にチェックしておこう。
This is how we implemented metrics in recent apps I’ve worked on: Right before the app shipped we’d go thru the app and anywhere something interesting happened, we’d add a metric by naming it and inserting a line of code to trigger the metric. Some header file would contain all the metric names. Later after the app shipped we’d need to answer a question like: How many of our users are using a spec
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers Kevin Yank氏がWhat Makes a Good 404 Page? - SitePointにおいて、404 page not foundのページの例としてhttp://idzr.org/404を紹介している。http://idzr.org/404は現在策定が進められているCSS 3D Transforms Module Level 3の機能を使って背後に文字のアニメーションを表示するというもの。Webkitで実装されているためSafariやChromeで閲覧できるほか、iPhoneのSafariからも動作を確認できる。 Safari 4 on Mac OS Xでの閲覧例 Chrome on Windows XPでの閲覧例 iPhone
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く