アニメーションが心地よいマテリアルデザインのUIサンプル５選
徐々に浸透しつつあるGoogleのデザインガイドライン、マテリアルデザインですが、先日ようやく日本語版も公式にリリースされました。 マテリアルデザインやマテリアルモーションは実世界のモチーフを用いて、ユーザーがより直感的にUIを把握・誘導できるようにするためのものです。詳しくは以下の記事をご覧ください。 UIデザインの歴史に学ぶシャドウと奥行きの使い方 この記事ではUIコンセプトやポートフォリオをたくさん掲載しているMaterialUpから、マテリアルデザインを用いたデザイン例をピックアップしてご紹介していきます。すべてCodePenで実装済みの作品なので、裏側のコードを見て実装のヒントに役立ててください。 MaterialUpのオススメUIコンセプト５選 1. ミュージックプレイヤー 楽曲再生アプリのUIコンセプトです。プレイボタンを押すとジャケットやシークバーがレコードのように変わりア
ボタンデザインの歴史と進化から学ぶベストプラクティス
ボタンは私たちにもっとも身近な、ごく普遍的なインタラクション要素です。とてもシンプルなUI要素でありながらも、ここ数十年でそのデザインは大きく変化しましたが、いつの時代も大事なのはその明確さと認知性でした。 この記事では、ボタンデザインの進化を振り返り、効果的なボタンを作るための方法論について見ていきたいと思います。 スタイルの進化 立体的なボタン 昔からOSのボタンデザインは、周りの要素からボタンを見分けるためにレリーフとシャドウを使ってきました。 なぜこのデザインなのかというと、シンプルな原理が基本となっています。ボーダー、グラデーション、ドロップシャドウを使用して背景とコンテンツに対してボタンを引き立たせ、クリックできる要素だということを簡単に識別できるようにしているのです。
コピペで使える！マテリアルデザインなUIアニメーション | UX MILK
近年、UIにおけるアニメーションやインタラクションの重要度が増していますが、それらをデザインしたり実装する際、様々なものを参考にすると思います。 実在するアプリもさることながら、DribbbleやBehanceなどのポートフォリオサイトではデザインコンセプトとしてアップロードされているものも多く、参考になるものはたくさんあります。 中には独創的なものもあって、実用性に欠けると感じるようなものもあるかもしれませんが、それでも固定概念を覆す機会になったり、断片的にインスピレーションを得たりもできますし、何よりも、見ていて楽しいものです。 今回は海外のUIコンセプトをたくさんストックしているMaterialUpからいくつかの作品をピックアップしてご紹介していきます。MaterialUpはその名のとおりマテリアルデザインの文脈を組んだ作品を多くそろえているサイトです。 そして多くのGIFだけのサイ
魅力的なイラストを活用したアプリのUIデザイン７選
Appleは完璧を追い求めることで有名であり、それは 私たちがUpLabsで称賛しているところでもあります。 Appleはとりわけインターフェイスに関しては常に境界線を押しひろげ、 他社にとっては高いハードルを作りあげてきました。彼らはスキューモーフィズムを世の中に広めた企業であり、彼らの方針にコミュニティ全体を従わせたのです。 フラットスタイルの時代となった今もなお、彼らはなんとか自分たちに忠実であり続けようとし、崇高なピクセルパーフェクトなデザインを生み出すための製作者を奨励していました。 より現実的なモチーフのマテリアルデザインなどに比べ、半現実的なディテールのコンセプトは、明快さやエレガントさにおいて劣りますが、芸術的な美学を保つことはできます。 美しいグラデーションや、表現豊かなタイポグラフィ、想像性豊かなアニメーション、滑らかなグラフィック、そして豊富なドローイング を使うこと
Swiftで作られたイケてるUIライブラリたち - Qiita
Spring ★431 手軽にアニメションが行えるライブラリです。SrotyBoardからアニメションの設定を行えるのがいいですね。 インストール Xcodeに手動でドロップします。 サンプルコード アニメションのコードはとってもシンプルです。 ２６種類のアニメションパターンを設定できます。 shake pop morph squeeze wobble swing flipX flipY fall squeezeLeft squeezeRight squeezeDown squeezeUp slideLeft slideRight slideDown slideUp fadeIn fadeOut fadeInLeft fadeInRight fadeInDown fadeInUp zoomIn zoomOut flash デモ デモアプリでアニメションの動きを確認できます。 design+
シリコンバレーのUXトレンド10選 / UX Survival Guidesレポート
先日、サンフランシスコで行われたUX Survival Guidesに行ってきました。10年以上シリコンバレーでUXデザイナーをしているJoe Prestonから最近のUXトレンド、プリンシパルに関するショートトークを聞くことが出来たので紹介します。(次回はプリンシパルについて書きます) https://www.youtube.com/watch?v=NEKvlVYR0SM&index=5&list=PLGkDzKLOoQkk2VaE_QDnE7h4FKlDbJF4Rミニマリゼーションとも呼びます。私たちがデザインを始めた90年代と比べて、非常に変化してきている流れの一つです。 背景、グラデーションや影、線、ラベル、、すべてのものを取り去ることが美しいデザインと考えられるようになっています。例えばグラフはこのようになります。
「次へ」「前へ」がどっちに進むのか分からない問題まとめ
@tkml 心底同意 RT @amachang: 「次へ」「前へ」っていうリンクよく見るけど、もっと時間的な前後が分かる言い方ないのかなー。 2010-02-17 10:54:09
Konami Code Sites
Konamicodesites.com http://konamicodesites.com/ Facebook http://www.facebook.com (Konami Code + Enter, then click or type!) Google Reader http://google.com/reader (you need to log-in) Digg http://digg.com (try it on a page with comments. But not working in Safari 4, booo) Mint http://www.designologue.com/mint Zeno.name http://zeno.name jQuery http://jquery.com Specced for Awesome http://www.specce
エンジニアにもわかる「ユーザーインターフェース設計」
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに 島津悠樹と申します。Yahoo! JAPANのソーシャルメディア系サービスの開発・ユーザーインターフェース（以下UI）設計を担当しています。私からは「エンジニアにもわかる『ユーザーインターフェース設計』」と題し、エンジニアのみなさまに考え方のヒントとなるようなネタをお届けします。 エンジニアの方々にとって、UI設計は、おもしろそう、けれど、どこかとっつきにくい......、そんな印象を持っておられるのではないかと思います。 私も以前はそう思っていました。ですが、とっつきにくさを理由にUI設計をやらないのはもったいない、という思いで試行錯誤した結果、なんとか、UI設計のお仕事をいろいろ担当させていただくことができるようにな
使い易いユーザーインタフェースとは何かを勉強しています。そこで、質問です。使い易いユーザーインタフェースを持ったウェブサイトやソフトウェアを教えてくださ.. - 人力検索はてな
使い易いユーザーインタフェースとは何かを勉強しています。 そこで、質問です。 - 使い易いユーザーインタフェースを持ったウェブサイトやソフトウェアを教えてください - また、それが使い易いと感じた理由を教えてください 条件は以下、 - 一般的なパソコンのディスプレイ、マウス、キーボードで触れるインタフェース - あなたが実際に体験したインタフェース よろしくお願いいたします。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2009/04/wireframe-2.html