UIの名称まとめ 〜よく見かけるけどあれなんていう名前？〜｜Nviveto
コンポーネントを作るときや開発チーム、クライアントと話をするときに名称が一致していないと何の話をしているんだか、、？となってしまします。 忘れっぽい自分は毎回名前をうろ覚えでつけてしまっていますが、戒めとして記事を書くことでしっかり覚えていきたいと思います。 ※色んなところから引っ張ってきているので正式名称ではない（複数呼び名がある）ものがあるかもしれませんが、ご了承ください。 UIパーツ見づらくてすみませんが、エクセルのシートを画像にしたものを貼り付けていきます Onscreen keyboards画面上にキーボードの図形や文字を表示し、マウスあるいはペンなどのポインティングデバイスや、指先によるタッチ、あるいは十字キーなどで各キーを指定して文字入力を行うもの Onscreen keyboards (iOS) SegmentedControliOS独自のUIで水平方向に配置された複数のボ
つよいUI - transitkix design log
…というものを最近考えていました。「画面デザインのOKももらったし、私の仕事は終わり！あとはエンジニアに指示書を渡すだけ」と一息ついた時にこそ、改めてデザインを見つめなおすべきです。 つよいUIであるための7つの視点 1.本来、そこにあるはずの情報がない場合はどうなりますか？ リストUIで載せる情報が0件、文章が空っぽ、画像がない時など 2.表示する要素が想定よりすごく多い/すごく少ない場合はどうなりますか？ 数字の桁数、文章の行数、文章が入りきれない場合は文中・文末のどこを省略すべきか…など 3.ユーザーさんの立場によって、表示要素に変化はありませんか？ ゲストとログインユーザー、無料会員と有料会員…など 4.ロード中、もしくはロードされるまで何が出ていますか？ 通信中の表示、読み込み中の画像エリア…など 5.予期せぬエラーが起こった時、画面はどうなりますか？ 通信エラー、リンク先のコン
キャンセルのキャンセル問題から考えるダイアログデザイン｜Goodpatch Blog グッドパッチブログ
この文脈では、「編集内容のキャンセル」という処理を続行しても良いかをユーザーに確認しています。続行に同意したい多くのユーザーは直感的に同じ表記の「キャンセル」を押したくなるでしょう。しかしそれでは編集のキャンセルが実行されません。 このキャンセルボタンが意味するのは、「『編集内容をキャンセルする』のキャンセル」なのです。つまり、ユーザーが望み通りに編集内容を破棄するためには、反対側のOKボタンを選ぶべきなのです。このような「キャンセルのキャンセル」は二重否定で意味がややこしくなるので避けなければなりません。 ここで「キャンセルのキャンセル」にならなければ良いということで、次のようにボタン名を変えてみました。 これでもう迷うことは無くなりましたか……？ 私はこの修正は誤りだと判断します。「はい」「いいえ」は結果を予想しにくい表現なので、ダイアログのアクションボタンに用いることはあまり適切では
デザイナーに届けたい…マテリアルデザイン事始め Part.1 - Qiita
2017年DroidKaigi「エンジニアが武器にするMaterial Design」に感化され、わが社でもデザイナー向けマテリアルデザイン勉強会をしてみようと思います。スライド いつの日か「わぁー、イケてるね！（わくわく）」みたいなデザインができる日が来ることを祈って、説明向け資料をまとめていきます。 Part.1 : マテリアルデザインの概観 次回 Part.2 : マテリアルデザインのコンポーネント（小） マテリアルデザインってなんなのさ？ 物質デザイン。デザインパーツを物質として捉え、現実世界のルールに沿うことで、ユーザに直感的な操作を誘導するデザインのこと。 基本の考え方 マテリアルデザインとは紙とインクの要素で出来ている オブジェクトの重なりを物質的に捉える（３次元） 意味のあるアニメーションでより直感的に 紙とインク 紙？ UIパーツは紙でできていると考える。 紙は以下の特徴
クレジットカードフォームの解剖学 | POSTD
オンラインでクレジットカードを使って支払うことは簡単ですよね？この答えはYesでもNoでもあります。Yesの理由は、インターネットが普及された初期からずっとそうしていたから（例：Amazon）。Noの理由は、まったく同じクレジットカードフォームは2つとないからです。 過去20年以上で、私たちはオンライン支払のメンタルモデルを作り上げてきました。「財布からクレジットカードを取り出して、ウェブのフォームに必要なカード情報を入力、そして申込みボタンを押す」というものです。しかし、ユーザーが答えないといけない質問でいっぱいなので、全てを入力するのはとてもややこしい行為になってしまいます。そして言うまでもなく、誰も取扱い説明書なんて読みたくありません。 さまざまな有名ウェブサイト・アプリのクレジットカードフォーム 何かの代金をオンラインで支払う時は、人へ支払う時より2,3倍遅れをとります。端末のボタ
Appleがトップページで自動送りカルーセルをやめた理由
残念ながらページ全体のキャプチャをとっていなかったので下までお見せできませんが、ページのメイン要素となるカルーセルの下にはフッターしかありませんでした。ほんとですw そして、おぉ、さすがApple。 ここでも思い切った選択をしたな〜と思っていたわけです。 ところが！ 数日後にもう一度トップページを見てみたら、あの懐かしの4つのボックスが戻っているではないですか！？ 実は、このレイアウト（巨大ヒーローイメージと4つのフィーチャーボックス）が、何年も続いたAppleの鉄板レイアウトだったわけですが、先日のリニューアルでこのフィーチャーボックスがなくなっていて「ついに、あれもお亡くなりになられたか」と、密かに悲しんでおりました。 その後のこの華麗なカムバックです。 かなり興奮してしまいました。 しかも、スタイルも細かいスペースや背景の扱いがよりシンプルなものに更新されています。 iPadでみると
Perspective Page View Navigation | Codrops
Some effects for a perspective page view navigation where the page itself gets pushed away in 3D to reveal a menu or other items. This navigation idea is seen in mobile app design and we wanted to explore some more effects. Pushing the site content aside to reveal a navigation has certainly become a trend for mobile navigations. The approach reflects some practices in app design where “views” are
ビジネス向けモバイルアプリケーションのUIガイドライン、セールスフォース・ドットコムが公開。アイコンなどダウンロード可能
ビジネス向けモバイルアプリケーションのUIガイドライン、セールスフォース・ドットコムが公開。アイコンなどダウンロード可能 先週13日に、SAPが業務アプリ用のJavaScript製UIライブラリ「OpenUI5」を公開したとお伝えしたばかりですが、今度は、米セールスフォース・ドットコムがHTML5でのビジネス向けモバイルアプリケーションのUIガイドラインやサンプルを多数公開しました。ビジネスアプリ用のモバイル開発環境はHTML5/JavaScriptで急速に充実してきています。 米セールスフォース・ドットコムは先月、新ブランド「Salesforce 1」を立ち上げ、モバイルへ全面的にシフトすることを宣言したばかり。このスタイルガイドは、同社のモバイルへの注力を示すものといえるでしょう。 これまでビジネスアプリケーション向けに、モバイル対応のしっかりとしたスタイルガイドが公開された例はおそら
お願いだからWebフォームではを正しく使ってユーザビリティを上げてくれ | 初代編集長ブログ―安田英久
今日は、Webフォームが「うわ、使いづらい」となってしまわないようにする、意外と対応されていないことが多いHTMLタグ「<label>」について。 HTMLを自分で書かないWeb担当者さんでも、デザイナーさんが作ったフォームに関して最低限これだけはチェックしておくといいですよ、というお話しです。 コンバージョンの要である「Webフォーム」。アクセス解析での改善やEFO（入力フォーム最適化）をしていると思いますが、意外と忘れられていることが多い「<label>」をご存じでしょうか。 フォームの入力項目それぞれの「ラベル（項目名）」を書くためのHTMLの作法なのですが、これをちゃんと使っているかどうかで、フォームの使いやすさがガラッと変わるのです。 一番わかりやすいのは、ラジオボタンやチェックボックス。<label>をちゃんと使っていると、ボタン部分ではなく文字の部分をクリックするだけで項目を
無料でダウンロードできる洗練されたデザインのUIキットいろいろ
わかりやすく、統一感のあるウェブサイトをデザインする時にあると便利なのがUIキットですが、ウェブ開発・デザインに関する情報やコンテンツを扱うブログBest Open Source Resourcesがそんな美しいデザインのUIキットをリスト化しています。明るいグレーやダークなカラー・木目調など、さまざまなパターンのPSDファイルが無料でダウンロードできるため、頭の中のイメージに合わせてコンテンツを選ぶことが可能です。 A Comprehensive Collection of Free UI Kits & Templates | Web Resources | WebAppers http://www.webappers.com/2012/11/12/a-comprehensive-collection-of-free-ui-kits-templates/ ◆01："Pizza" UI K
楽しく作れる！スマホアプリ/サイトのワイヤーフレーム・モックアップ作成支援ツール7選 | DevelopersIO
ワイヤーフレームを楽しく作ろう！ 魅力的なユーザーエクスペリエンスをユーザーに届けるために、ワイヤーフレームはとても重要です。 何より自分自身が楽しんで作らないと、良いアイデアは生まれないものですよね。 ということで「楽しく作れる！」という観点から、おすすめのスマホアプリ/サイトのワイヤーフレームの作成を支援するツールをまとめてみました！もちろんすべて無料で始められます！ では早速どうぞ〜！ Fluid UI http://www.fluidui.com/ プレビュー機能で画面遷移も作れる UIパーツが本物にかなり近い形で表現されています(むしろそのまま？)。UIパーツはWireframe、iPhone、iPad、Android、Android 4.0、Android Tablet、Windows Phoneの中から自由に選べます。かなり豊富です。またオリジナル画像をアップロードして使うこ
ふつうのformをつかいたい - はまちや２ - ニコニコ超会議2012
こんにちはこんにちは！！ はまちや２ (@Hamachiya2) ブロガー、クラッカー。特技は洗濯、趣味は破壊、苦手なことはプログラミング。 WEB+DB PRESS のお便りコーナー担当。 「はまちちゃん」とかで適当にググってください。 無料で プレミアム機能を 使う方法 見つける時間がありませんでした。 何話そう？ プログラムは苦手だし… セキュリティとか興味ないし… そんなわけで普通のことを話します。 本日のテーマ： 『ふつうのformを使いたい』 <form> 電話番号はハイフン抜きの半角で…（はいはい） フリガナはカナで… (カナで名前を学習してしまうのが嫌だけど…) 郵便番号は前と後ろに分けて… (めんどくさいなぁ…) 住所は全角で… (あーはいはい…) … (できた！) (これで送信、と…) ※エラー：住所を正しく入力してください (え、なんで！？) ※住所は全角で入力してく
リッチに見せるデザインテクニック。Appleのデザインのように美しい金属調の質感を表現する方法。 (フェンリル | デベロッパーズブログ)
こんにちは、イメージ担当の長谷川です。 今回は Apple がデザインしている iCloud アイコンのような美しい金属調の質感を Fireworks で表現してみました。 アレンジ次第で水平のエッチングやブラスト加工のようなイメージも簡単に作ることができます。 ぜひ Web や UI デザインの参考にしていただければと思います。 1. ベースのテクスチャを設定する まずグラデーションの設定をします。 長方形ツールで作成するボタンなどのサイズより少し大きいサイズの四角を描き、グラデーションの塗りを円錐にします。 以下のように白とグレーを交互に設定します。右端と左端を同じ色にしないとグラデーションに線が出来てしまいますのでご注意ください。 ここでは濃いグレーを #666666、両端の薄いグレーを #999999 に設定しています。 次にノイズを適用量：10で追加します。これが同心円状のヘアラ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Lightning Design System
F A N T A S Y
ウェブデザインのセンスを磨く！ 2012年下半期洗練されたディテールのUIデザインのまとめ
Loading...
CSS3で実装されたUIエレメントのオープンソースのまとめ -CSS3 Code Snippets | コリス
Loading...
ウェブデザインのセンスを学ぼう、2012年上半期洗練されたディテールのUIデザインのまとめ