去年ぐらいはレスポンシブ対応のナビゲーションというとハンバーガーメニューばかりでしたが、最近ではスクリーンサイズに合わせるだけでなく、コンテンツや階層構造に合わせたナビゲーションが増えてきました。 Webページやスマホページのレスポンシブ対応サイトで最近よく見かけるナビゲーションのアイデアや実装方法を紹介します。
フォームのセレクトボックスは多くの選択肢を配置できる便利な要素ですが、他のフォームと操作性が異なるため一連の流れで入力しにくいのが弱点です。 セレクトボックスの操作性を改善し、デザインも簡単に変更できるスクリプトを紹介します。Quickの名前の通り、すぐに選択できるようになります。 通常のセレクトボックスの挙動 セレクトボックスは、タップとクリックの2つのオペレーションがあります。これはフォームの他の要素と操作性が異なり、ユーザーをフォームの一連の流れから外してしまうものです。 そこで注目すべき点は、通常セレクトボックスの選択肢の中にはより多く選択されるものがあることです。上記の例だと、「はい」「いいえ」が多いでしょう。 Quick[select]は、セレクトボックスの選択肢の中から、いくつかを表示させておくことができます。
My previous short article about gratuitous animation really struck a chord with people. The response has been phenomenal and it’s been awesome reading others’ frustrations with overly animated UIs. To be clear, I’m not anti motion design for UIs. Far from it. I have a problem with animation that serves only to get in the way of the end user. One of the clearest signs of a competent UI designer is
UIデザイン時の「ユーザーの使いづらい」には2パターンある。350万ダウンロードの家計簿アプリ「Zaim」が教える、UI改善の失敗談。 今回は350万ダウンロード突破、家計簿アプリの「Zaim」さんにお話を伺いました。ユーザーが伸びたタイミングや、UI改善の失敗談など。 ※株式会社Zaim 代表取締役 閑歳 孝子さん。 「Zaim」の近況について 「Zaim」のユーザー数は今どのぐらいですか? 閑歳: 2011年7月にリリースして、350万ダウンロードを超えています。OSで言うとiOSの方が多いですが、最近はAndroidも伸びています。今も広告費は使っていません。 今までに、ユーザーが大きく伸びたタイミングはありますか? 閑歳: 去年はダウンロード数がグッと伸びた印象があります。2013年の終わり頃から、スマホをみんなが本当につかうようになって、すごく高齢者と若年層が増えました。 データ
あなたのアプリケーションではユーザーにいくつの許可を求めていますか?例えばiOSの写真アプリケーションであれば、「カメラロール」「カメラ」などの許可を求めるポップオーバーが初回起動時に表示され、ユーザーはそれぞれを許可する必要があります。 もしここでユーザーが「カメラ」の許可をしなかった場合には、まず写真を撮影すること自体ができなくなります(仕様にもよりますが一応シャッターを切ることはできても、真っ暗な写真になります)。ここでようやくユーザーはおかしいと気づくことになりますが、どのようにこの状態を改善すれば良いのかわかっていることは少ないでしょう。 ヘルプなどの項目に書かれている場合もありますが、設定 → プライバシー → カメラ → アプリ名を探してトグルをオンにするという複雑なタスクを行わなければいけません。しかし、そもそもヘルプにさえ辿り着けなければアプリがおかしいと感じ、星1の評価
2014.11.19 / UI 画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール Tomohiro Suzuki クライアントやディレクターから渡された画面遷移図を元にワイヤーフレームを作ってみると、後から足りない画面が次々に発見された、または画面内の情報がどこに繋がるのか分からないといった経験はありませんか? この画面遷移図というものは本来は制作範囲の全体像と構造を明確にし、必要な画面というものを洗い出したりするものです。通常のWebサイトであれば、従来のような画面遷移図でも問題ないかもしれませんが、多くのインタラクションが発生するサービスの設計では複雑化しやすく、何度も情報を行き来して確認することになるため時間がかかります。 原因のひとつとして、画面遷移図では画面名のみを記載して繋げていくことになるため、必要な情報が不足していることが挙げられます。その結果、本来で
サークルやダイヤモンドのエレメント、半透明のパネル、ソリッドなライン、同一色相のグラデーションなど、最近のWebトレンドを使い細部までしっかりと作り込まれたコーポレートサイト、ポートフォリオ、ランディングページなどのページレイアウトやUIキットが揃ったPSD素材を紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く