よくわかるマテリアルデザインの設計コンセプト | fladdict
iPhoneとAndroidではiPhoneのほうが良くできているが、iOSのフラットデザインとAndroidのマテリアルデザインでは後者の設計が優れている。マテリアルデザインは、デザインとエンジニアリングが高いレベルで融合していて、ロジカルで非常に美しい。 以下、自分の理解をまとめたメモ。 紙とインク マテリアルデザインは「ペーパー」と「インク」のメタファーでできている。 ペーパーの特徴 バーやボタンといった画面上のUIコンポーネントは、バーチャルな紙でできたカードと考える。また、このペーパーは1dpの厚さを持っている。 ペーパーは純白の矩形、あるいはシンプルな円形である。三角や星型といった複雑な形はとらない。そのような複雑な形状や模様はインクが担当する。 現実とことなり、このペーパーは自由に伸縮することができる。 マテリアルデザインにおけるレイアウトは、複数のペーパーを並べたり、重ねた
フラットデザインに似合うボタンが、スライダーを調整するだけで作れるサイト「2.5dBUTTON」 | ライフハッカー・ジャパン
「2.5dBUTTON」はフラットデザインに似合うボタンが作れるサイトです。マウスを乗せるとポコッと立体的に浮き上がるボタンが作成できます。作ったボタンはHTML、CSSごとダウンロード可能です。 以下に使ってみた様子を載せておきます。まず、2.5dBUTTONへアクセスしましょう。 試しにボタンを作ってみました。このようにスライダーを調整するだけで色や形を決めることができます。マウスを乗せると上記のようにポコッと浮き上がります。 HTMLとCSSも自動的に出力されるので、あとはこれらをコピペすればOK。 こちらが実際に使っているときの様子です。YouTubeのロゴを作ったり汎用性が高いですね。ぜひフラットデザインのボタンを作成したいときにご活用ください。 2.5dBUTTON （カメきち）
Google+アプリに新しいデザインが来たのでGoogle I/O 2014で発表される新Androidバージョンでのデザインガイドラインを推測する遊びをしてみた - ひつじのにっき
2014年5月23日、G+アプリに更新があるというので試してみたら既存のデザインガイドラインに無いロックな挙動をしていたので紹介します。 1か月後にはGoogle I/O 2014を控えているこの時期の更新、ということで新しいAndroidバージョンに取り込まれるのだろうなー、とか推測しながら挙動を書き留めました（私自身、すぐ慣れてしまうので忘れないように）。 先にまとめておくと次の通りです。 まとめ カードUIに最適化した一例としてG+アプリをみると良い ActionBarの機能拡張、ブランドカラーの強化 ListView(カードUI)の上部にメニューをだす形が流行りそう いままでもGoogleは自らデザインガイドラインを破ってきたし、時代に合わせて新しいガイドラインに更新している 今回に限らず、Google製アプリでは、アプリごと思想が微妙に違ってるケースがあります。Google+とG
[JS]縦長1ページのスクロール時にさまざまなインタラクションを加えるスクリプト -ScrollStory
ティザーサイトやプロダクトページ、ポートフォリオ、企業サイトなどにも多く採用されているスクロールを前提とした縦長のページにさまざまなインタラクションを加えることができるjQueryのプラグインを紹介します。 Scroll Storyの名の通り、スクロールするごとにさまざまなストーリーを与えることができます。 ScrollStory -GitHub ScrollStoryの特長 ScrollStoryのデモ ScrollStoryの使い方 ScrollStoryの特長 ScrollStoryは、スクロールベースのページとインタラクションをシンプルな実装で作成できます。 スタイルにとらわれない、自由なスクロールベースのページを作成可能。 既存コンテンツの流用だけでなく、新たにオブジェクトを配列で生成することにも対応。 jQuery UIの16種類のイベント・コールバックが利用できます。 アクテ
衝撃！ auスマートパスのサービス入退会ページが刷新、シンプルすぎて言葉を失う素晴らしさ | アプリオ
auが、auスマートパスの各種サービス入会・退会ページを刷新した。以前から退会の方法が分かりづらいという声が多かったことに対応したものと思われる。 あまりにもストレートなデザインに、公式ページかと疑うユーザが出かねないほどのシンプルさだ。 PC向けページ PC向けのページは、auスマートパスのロゴと、それぞれのサービス入会・退会ページへのリンクがとても分かりやすく並べられている。ページ下部（フッター）部分には細いオレンジの線が引かれているが、さらにその線の下には白地が続いている。 スマホ向けページ スマホ向けのページは、更にシンプルだ。 最上部のページタイトルに、au公式サイトであることを示す文言はない。筆者は、このページにたどり着いた際、フィッシングサイトではないかと感じてしまった。 あまりにもシンプルすぎるUIで気づきにくいかもしれないが、右上の黒い縦線は、ナビゲーションを開くためのリ
Googleが黒いバーを廃止、ドロップダウンメニューを一般公開へ フラットなロゴも
Googleは、今後数週間内に従来の黒いナビゲーションバーを廃止し、ドロップダウン方式のナビゲーション・メニューを導入する。 現在、Googleサービスを利用するデバイスは、デスクトップやラップトップだけでなくタブレットやスマートフォンなど多岐にわたるようになっている。そのため、どのデバイスでもシームレスな体験を提供する必要が出てきていた。 右上にドロップダウン方式のアプリランチャーが設置され、クリックするとGoogleサービス一覧が表示される。 また、最近話題になっていたGoogleロゴのフラットデザイン化も実施される。形状とカラーを変更。これまでフラットデザインのロゴは、印刷媒体などで採用されていたが、Web上でも使われることになる。
【UI調査】iOSとAndroidのスイッチ 7種類比較
最近、アプリオでは、スイッチのユーザビリティについての記事を2本掲載した。 【|と◯】知ってる？ アプリや電機のスイッチと電源ボタンの記号の意味 【UI調査】スマホ・アプリのスイッチの意味をユーザは理解できているのか？ いずれの記事も反響が大きく、スイッチのユーザビリティ（使い勝手）に対する読者の関心が高いことが分かった。 iOSとAndroidのスイッチ比較 そこで、一連の記事をまとめる観点から、アプリオ編集部がスマホユーザにアンケート調査を実施した。有効回答数は80件（7番のみ40件）。 実際にiOSやAndroid OSの設定画面やアプリ内で使用されているスイッチの画像を見せ、「スイッチを左に動かした場合」の結果を3つの選択肢（ON・OFF・分からない）の中から選んでもらった。 各スイッチ画像に関して回答者に与えた情報は、スイッチの画像のみ。まずは、同じ条件で、以下の結果を確認してほ
【UI調査】スマホ・アプリのスイッチの意味をユーザは理解できているのか？
1. やはりスイッチの記号は分かりにくい 先日、「【|と◯】知ってる？ アプリや電機のスイッチと電源ボタンの記号の意味」という記事を掲載したところ、予想外に反応が大きかった。 「 | 」と「 ◯ 」は、それぞれIEC（国際電気標準会議）によって国際的に標準化された記号であり、前者が電源ON（オン）、後者が電源OFF（オフ）を意味するものだ。 スイッチに採用されているこれらの記号の意味が分かりにくいことをテーマにした記事だったが、反応の大きさやソーシャルメディア上のコメントなどから、筆者と同様にこれらの記号のみではスイッチのONとOFFを判断しにくいと感じている人が多いことが分かった。 また、スイッチの操作部分上にON・OFF表示があったり、iOSの設定アプリのようにスイッチ内部の操作部分以外の場所にON・OFF表示があると、現在の状態を示しているのか、操作後の状態を示しているのか混乱すると
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事