【sketchユーザー必見】仕事を大幅に効率化！オススメの最新Sketchプラグイン7選【WEBデザイナー/UIデザイナー】2021年版
iOSとAndroidのUIの違い | モテモテテクノロジーブログ
こんにちは！ 春なので「愛と恋の違い」について考えているロマンティック佐藤です。 「愛と恋の違い」は人によって解釈が違うと思いますし、発表する場も無いので、 とりあえず今回は「iOSとAndroidのUIの違い」について考えることにしました。 iOSとAndroidのUIの違い 基本的なUIパーツの名称の違い ベースとなるUIの名称もiOSとAndroidで少し違います。 共通認識を持つためには正しく覚えておく必要がありそうです。 戻るボタン iOSとAndroidで大きく違うのは「戻るボタン」です。 iOS ナビゲーションバーの左側に配置されることが多いです。 Android OS標準の物理ボタンとして左下に置いてあります。 Androidのアクションバーの左側に配置されているのは「UPボタン」です。 動き自体は戻るボタンと似ているのですが、前のページ戻るのではなく、親のページを表示しま
ブックマークしておきたい！WebサイトやスマホアプリのUIデザインのアイデアに困った時に、参考になるサイトのまとめ
WebサイトやスマホアプリなどのUIデザインのアイデアに困った時に、参考になる、そして勉強になるサイトを紹介します。 ランディングページ・プロダクトページのレイアウト、UIのさまざまなコンポーネント、アニメーションが気持ちいいインタラクションなど、ブックマークして定期的にチェックしておきたいサイトばかりです。 Mobbin -Latest Mobile Design Patterns デザイン面に優れた最新のスマホ向けデザインのパターンがコレクションされています。100以上のiOSアプリの主要な画面遷移と5,000以上のパターンが厳選されており、自身のライブラリを作成（要登録、無料）することもできます。
UIデザイナー必見！おすすめのiOS向けUIキット・デザイン素材36選 | Web Design Trends
UIデザインの仕事をしている人や、UIデザイナーを目指している人のためにiOSデザインの優れたUIキットをまとめました。UIエレメントや画面、コンポーネント、デザインコンセプトなどがまとめられたUIキットはデザインを学ぶのにぴったりの方法です。 目的に合わせてUIキットをカスタマイズしてみてください。。ナビゲーションバー、ボタン、ログインフォームなどすべてのコンポーネントや画面デザインは簡単に修正することができます。Sketchなどのデザインツールを使ってUIキットを触ってみてください。Sketchのライセンスを購入していない人も、無料体験に登録すれば利用することができます。 今回ご紹介するUIキットはすべて無料で、iOSプラットフォームのために作られているものです。自分で使ってみて優れていると思ったUIキットや、その他の優れているUIキットに厳選してあります。これを読んでいる人が優れたデ
ウォレットアプリに進化した『Kyash』UI・UX刷新のポイント解説 | CAREER HACK
Kyashが大幅の方針変更を行なった。これまでは送金アプリだったが、ウォレットアプリに進化。2018年3月にはUIも刷新。そのポイントについてサービス＆プロダクトデザイナーである成澤真由美さんに解説いただいた。 目次 ・はじめに ・ウォレットアプリ進化までの道のり ［1］現金チャージ機能の追加 ［2］Kyash Visaカードの発行フロー変更 ［3］UI変更にあたって｜ユーザーヒアリング ［4］UI変更にあたって｜segmented controlを不採用した理由 ・おわりに はじめに はじめまして、株式会社Kyashでサービス&プロダクトデザイナーをしている成澤真由美です。 Kyashはおかげさまでリリースから約1年、これまで個人間送金の体験を提供してきました。今後はさらなる飛躍を目指し、送金だけではなく決済を入口とした利用も促進していくことに。 そして2018年3月、これまで備わってい
UIデザインにユーザーストーリーが必要な理由
Tom Brinton氏はBYUを2012年に卒業した後、CitrusBits、Wallaroo Media、CustodyXChangeでUI/UX設計者として働いてきました。彼は優雅なインターフェースをデザインすることが好きです。 あるデザインチームが、クライアントの新しいアプリのモックアップについて話し合っているとします。すると、アプリがどのようにあるべきかついて、チームメンバーはそれぞれ 違う考えを持っているということが明らかになります。こうなると、ミーティングはすぐに、「何が正しいか」というよりも、「誰が正しいか」という議論になってしまいます。 誰もが自分のデザインを守ろうとしますが、誰もユーザーを守ろうとはしません。ひょっとしてあなたにも思い当たる節がありませんか？ このようなときにこそ、ユーザーストーリーを導入する必要があります。 最近では、UI/UXのプロがアジャイル開発で
バッドUIを改善する方法 ― UIの「5つの状態」を考える | POSTD
(訳注：2020/08/22、画像と動画が正しく表示されていなかったためリンクを修正しました。) こんにちは。このブログは12月にO’Reillyから出版予定の私の著書『 Designing Products People Love 』からの抜粋です。ぜひ本も読んでみてください。また、FacebookやTwitter、 Slackなどで活躍されている20人以上のプロダクトデザイナーにインタビューもしています。* 無味乾燥なUIを経験したことはありますか？ 何か が足りないと感じてしまうようなUIを作ってしまったことはありませんか？ もしそうであれば、使い勝手の悪いUIを経験したのだと思います。 使い勝手の悪いUIには進捗インジケータがありません。ユーザにどこで障害が起きたのか知らせてくれません。怖いエラーメッセージでも表示してくれれば、なお良いのですが。わずかなデータのみの奇妙なグラフです
【考察】なぜ『ファイナルファンタジー』シリーズのHPゲージは右下なのか？システムによって変化する最適なUIデザイン - GAME LIFE HACK
今更言うまでもない事ではあるが、ゲーム画面においてHPゲージを始めとした『UI（ユーザーインターフェース）』は重要な要素としてゲーム内に存在しており、HPゲージやMPゲージ、弾薬数、速度計、スコア、そしてレーダーや地図、クエストやコマンド、アイテム欄など様々なもので構成されている。 しかしこういったゲージ類は作品によって大きく異なった位置に割り当てられている。例えば、ある作品では左上に配置されていたHPゲージが、別の作品では左下に配置されていたり、中央上部に表示されているというケースも見たことがあるだろう。 それはなぜだろうか？ なぜ、HPゲージは左上で固定されていないのだろうか？ なぜ、弾薬類の表示は右側に集中しているのだろうか？ なぜ、速度計は右下に配置されているケースが多いのだろうか？ なぜ、コマンドメニューは下側に配置されているのだろうか？ そもそもなぜ、普段遊んでいる時は、このよ
/module_01/
Full HD porno video на greatsimple.ru - XXX видео: смотреть порно бесплатно (секс онлайн) и скачать порно фильмы на телефон/пк. Все фото и видео ролики на этом веб-сайте (greatsimple.ru) являются постановочными и находятся в свободном доступе в сети интернет. Все модели старше 18 лет, согласно 18 U.S.C. 2257 RKRCS. Заходя на этот сайт (greatsimple.ru) вы подтверждаете, что являетесь совершеннолетн
Webサイトやモバイルサイトのワイヤーフレームがたくさん！でレイアウト作りの参考に役立つ「UI TITES」と「UXKITS」 | HTML5でサイトをつくろう
Webサイトやモバイルサイトのワイヤーフレームがたくさん！でレイアウト作りの参考に役立つ「UI TITES」と「UXKITS」 最近、自分の中でWebサイトの参考としてPinterestがとても便利で毎日みてるのですが、かっこよいサイトの他にレイアウトの例としてUIやUXに特化したボードなどもありチェックしています。 そんな時見つけた、Webサイトやスマホサイトを画面構成を作る際にたくさんのモジュールが用意されている「UI TITES」と「UX KITS」がシンプルだけですが組み合わせによって色々なレイアウトが作れるのでとても参考になりますので紹介します。 http://pixelbuddha.net/ui-tiles/ こちらは72個もモジュールがあり無料でダウンロードができます。 PHOTOSHOPデータやイラレデータがありますので、個々のモジュールを組み合わせてWebサイトのワイヤー
結局デザインシステムは何なのか
フロントエンドからの影響 昨年開催されたワークショップ「パターンラボ – 柔軟性と拡張性をデザインに取り込む方法」をはじめ、記事やイベントを通して維持・管理ができるデザインついて情報発信しています。CMS が広く普及して以来、コンテンツ配信を長く続けるための仕組み作りが模索されているものの、デザインは発展途上です。早く作る、効率よく作るまで議論されるものの、デザインをどう維持するのか、どうすれば最低限の品質を担保できるかまで発展しないことがあります。 1977 年に建築家クリストファー・アレグザンダーの著書「 Pattern Language 」で、パターンが街作りに柔軟性と拡張性を持たせると説いています。彼に異論を唱える人もいますし、街に個性が失われるという意見にも一理あります。しかし、彼の考え方が今の情報設計（IA）に多大な影響を及ぼしていることは間違いありません。情報や装いに一貫性を
意外と難しいボタンのお話
ボタン？それともリンク？ 昨年からデザインシステムをテーマにしたセミナーやワークショップを何度か開催していますが、ワークショップに参加した方から「ボタンは難しい」という感想をいただくことがあります。ボタンの見た目を作ることも奥深いですが、もっと難しいのが、いつ、どこで、どのように使うかを共有すること。考え始めると「そもそもボタンとは何か？」といった疑問が浮かび上がります。 フォーム要素と一緒にあれば、ボタンだと断言しやすいです。HTML であればマークアップも <button> になりますし、アプリでも iOS であれば UIButton を使えば良いと判断できるはずです。 文章のあとに「今すぐ始める」というラベルが付いた要素があるとしたら、これはボタンと呼べるでしょうか。角丸のような装飾、注目されやすい色が使われているので、ボタンと見なすことができます。見た目はボタンっぽいですが、果たし
効果的なフォームをデザインする：構造、入力、ラベルおよびアクション | POSTD
画像の出典：form-ux-tips あなたのアプリやサイトを利用する人々にはある一定の目的があります。そしてその目的を達成するために フォームに 記入しなくてはならないことがよくあります。Webやアプリにおいてフォームは、ユーザにとって未だに最も重要な 種類の操作 であるからです。事実、フォームは目的を達成するまでの 過程における最後のステップ と見なされることも多いのです。 フォームは目的達成の手段にすぎません。迅速に混乱なく、ユーザがフォーム入力を完了させられるようにするべきです。 この記事では、ユーザビリティテスト、フィールドテスト、視線計測（アイトラッキング）、そしてユーザからの実際の不満の声に基づく実用的なガイドラインを紹介します。 フォームの構成要素 一般的にフォームは以下の5つの要素から構成されます。 構造 。フィールドの順番、ページの外観、各フィールドとの論理的な関連付け
jQueryでページ上に表示されるローディングのバーを作ってみる ｜ スターフィールド株式会社
スマホのブラウザやYoutubeの動画のページなどで、 ページの上にロードの状況を知らせるバーを見かけます。 画像が多いなど、ページ全体のファイル容量が大きくなってくると、 ページの読み込みが完了するまでに少し時間がかかってしまうことがあります。 サイトを軽くするのが一番適切ですが、 それが難しい場合、このローディングのバーがあると、読み込み状況を知ることができて、 少しだけですが、不安が軽減されます。 スマホでWEBページを見るときはデフォルトのブラウザにこの表示があるので何もする必要はありませんが、 PCでも同様に表示したい時もあるかもしれません。 味の明太子 博多中洲いとや また、↑こちらのサイトのようにローディングバーをデザインの一部に取り込んでしまうのも面白いと思います。 今回は、こちらのサイトも参考に、このトップのローディングバーをjQueryを使って作ってみました。 ↓こちら
デザインやレイアウトの参考になる、管理画面・ダッシュボードのデザインショーケース - NxWorld
Dribbbleで見かけたのを中心に、全体的なデザインや各要素の配置レイアウトなど参考にさせてもらおうと思いメモしていた管理画面・ダッシュボードのデザインが溜まってきたので、自分の整理も兼ねてまとめました。 管理画面やダッシュボードで重要なのは見易さや操作性の高さだと思いますが、デザインにもこだわりたいという場合にいろいろ参考になります。 紹介している中にはデザインをPSDなどの形式でデザイン素材としてダウンロードすることができるものもいくつかあり、ただデザインを見るだけでなく実際にどのようなレイヤースタイルで作成されているかを見たり、それらをベースに自分好みの見栄えに変更することも可能です。 紹介しているデザインでダウンロードできるものを使用する際は、ライセンス等は各自で再度確認してください。
Android InsetDrawableを活用する
タグ等、デザイン的に大きくしたくないけれど、タップに反応させるコンポーネントは、実際にタップできる領域を見た目より大きくとるのが鉄則です。 これを実現する方法が3つあります。 1. Viewの階層で実現する すぐ思いつく方法ですが、Viewが増えるので初心者っぽいです。 <!-- 透明の領域用 --> <FrameLayout ... android:padding="8dp" android:background="@android:color/transparent" > <!-- タグ部分 --> <TextView ... android:paddingTop="2dp" android:paddingLeft="8dp" android:paddingRight="8dp" android:paddingBottom="2dp" android:background="@colo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Blog | Welcome to Adobe Blog
“SuperFish” ドロップダウンメニュー | ヘルプ
UI/UXとは？知っておきたいUI/UXデザイン50の知識
Usability Testing of Inline Form Validation: 40% Don’t Have It, 20% Get It Wrong – Articles – Baymard Institute