UIデザインは奥が深い！最近のスマホアプリで見かけるアニメーションの素晴らしいアイデアを解説
普段何気なく使用しているUIのアニメーションもその仕組みや効果を理解すると、なるほどと考えされられます。 スマホアプリのUIに使用するアニメーションをGoodな良いものから、Greatな素晴らしいものに変えるUIアニメーションのさまざまなアイデアを紹介します。 Material Motion, IBM Animation Principles, The UX in Motion Manifestoのガイドラインに基づいた、気持ちのいい操作性に優れたアニメーションを楽しむことができます。 Good to great UI animation tips 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 タブのコンテンツをスライドさせるアニメーション カードをタップして詳細を表示するアニメーション コンテンツを表示するアニメーション コ
Nintendo SwitchのUIはなぜ使い勝手がいいのか!? 全員で体験し、“あたりまえ”を磨く任天堂のもの作り【CEDEC 2018】 - ファミ通.com
前述したように、本体機能とはゲーム機本体に最初から内蔵されているソフトウェアのこと。任天堂の家庭用ゲーム機で初めて実装されたのは、2001年に発売された ニンテンドー ゲームキューブで、当時はセーブデータ管理などだった。以降、ニンテンドーDS、Wii、ニンテンドー3DS、WII Uとハードが進化するにつれ、さまざまなシステムやサービスが追加されていった。こうした多機能化に加え、任天堂のゲーム機以外でも多機能でゲームを遊べるデバイスがつぎつぎに出現。そうした状況の中、ニンテンドースイッチも同じ多機能化を目指すことの是非から考え直したそうだ。その結果、たどり着いた答えが“ゲーム機なので、ゲームで遊ぶに特化しよう”と、原点回帰したじつにシンプルなもの。「これがニンテンドースイッチに込められた思いです」と小野氏。つくるものを厳選し魅力を凝縮するとともに、ストレスを感じさせないことを目指した。その実
人はなぜ「分かりやすいデザイン」でも失敗するのか｜Tsutomu Sogitani
これは私が最近よく訪問する日本橋駅直結の商業ビル、東京日本橋ビル内のエレベーターのボタンです。 唐突に質問ですが、このボタンで操作ミスを起こすポイントがあるとすれば、それがどこだか分かりますか？ 説明が必要と思いますが、このビルは7Fがオフィスロビーになっています。駅直結のB1と1Fからは7Fまで直通するシャトルエレベーターがあり、全員7Fで一度降り、セキュリティチェックをし、23Fより上にあるオフィスフロアに入ります。そのオフィスロビーとオフィスフロアを行き来するためのエレベーターのボタンがこれです。 ボタンが23Fから30Fまでしかなくて、下に大きく7Fのボタンがあるのは、そういったビルの構造からです。 私と同行したディレクター（26歳）は、打ち合わせが終わってオフィスフロアからオフィスロビーに帰る際に、操作ミスをしました。それも1度だけでありません。次の打ち合わせの帰りにもまったく同
バッドUIを改善する方法 ― UIの「5つの状態」を考える | POSTD
(訳注：2020/08/22、画像と動画が正しく表示されていなかったためリンクを修正しました。) こんにちは。このブログは12月にO’Reillyから出版予定の私の著書『 Designing Products People Love 』からの抜粋です。ぜひ本も読んでみてください。また、FacebookやTwitter、 Slackなどで活躍されている20人以上のプロダクトデザイナーにインタビューもしています。* 無味乾燥なUIを経験したことはありますか？ 何か が足りないと感じてしまうようなUIを作ってしまったことはありませんか？ もしそうであれば、使い勝手の悪いUIを経験したのだと思います。 使い勝手の悪いUIには進捗インジケータがありません。ユーザにどこで障害が起きたのか知らせてくれません。怖いエラーメッセージでも表示してくれれば、なお良いのですが。わずかなデータのみの奇妙なグラフです
Private Presentation
Private content!This content has been marked as private by the uploader.
よくわかるマテリアルデザインの設計コンセプト | fladdict
iPhoneとAndroidではiPhoneのほうが良くできているが、iOSのフラットデザインとAndroidのマテリアルデザインでは後者の設計が優れている。マテリアルデザインは、デザインとエンジニアリングが高いレベルで融合していて、ロジカルで非常に美しい。 以下、自分の理解をまとめたメモ。 紙とインク マテリアルデザインは「ペーパー」と「インク」のメタファーでできている。 ペーパーの特徴 バーやボタンといった画面上のUIコンポーネントは、バーチャルな紙でできたカードと考える。また、このペーパーは1dpの厚さを持っている。 ペーパーは純白の矩形、あるいはシンプルな円形である。三角や星型といった複雑な形はとらない。そのような複雑な形状や模様はインクが担当する。 現実とことなり、このペーパーは自由に伸縮することができる。 マテリアルデザインにおけるレイアウトは、複数のペーパーを並べたり、重ねた
Googleマテリアルデザインとフラットデザインって結局何が違うの？ - NAVER まとめ[UI/UX]
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
![Googleマテリアルデザインとフラットデザインって結局何が違うの？ - NAVER まとめ[UI/UX]](https://cdn-ak-scissors.b.st-hatena.com/image/square/906da44ffeb8f04e0fadd77dff0ba88ddb9e3b11/height=288;version=1;width=512/https%3A%2F%2Frr.img.naver.jp%2Fmig%3Fsrc%3Dhttps%253A%252F%252Fmaterial-design.storage.googleapis.com%252Fpublish%252Fv_1%252Fsocial.png%26twidth%3D1200%26theight%3D1200%26qlt%3D80%26res_format%3Djpg%26op%3Dr)
スマホUI考（番外編） 顧客やユーザーの要望に全て対応すると、アプリは99%破綻する | fladdict
顧客や上司、ユーザーの場当たりな要望に対応しつづけると、どんなアプリもゴミアプリになる。たとえそれが理にかなった要望であっても。 なぜなら面積の限られたスマホでは「一画面の機能数とボタン数」が、使い易さと品質に深くリンクしているからです。 ということを、エラい人にプレゼンするのがお仕事の今日この頃。でも毎回毎回、同じことを説明するのがシンドイので資料をブログにまとめたいなぁと思うなど。 思考実験として、ここでは架空事例としてTwitterアプリを例に考えてみる。 何かの間違いで、日本の大手メーカーがTwitterを買収すると・・・UIデザイナーが体を張らないと99%ぐらいの確率でこうなるのです。 ここがオリジナル Request1: ダイレクトメッセージをトップ階層に ユーザーからの真っ当な要望。実際にはサービスの本質ではないのですが、要望はかなり多いはず。 ただTwitter社的にはme
リッチに見せるデザインテクニック。美しいぼかしで魅せる 『MAX 塗り』のすすめ。
こんにちは、イメージ担当の長谷川です。 今回は 1px にこだわったリッチな Web や UI デザインを更に立体的で奥行きのある雰囲気にする『MAX 塗り』を取り入れたグラフィック作成手法をご紹介します。 ところで『MAX 塗り』ってご存知ですか？ガンプラなどが好きな方はピンと来たと思いますが、プラモデルなどに興味がない人は全く分かりませんね。 『MAX 塗り』とはプラモデルに立体感を出すためにエッジから中央に向かってぼかしていく、昔からある「ぼかし塗り」や「グラデーション塗り」の技法です。 この技法で塗装されたプラモデルは単純に塗装したものより格段に迫力や存在感が上がります。プロモデラーの MAX 渡辺さんが良く使うプラモデルの塗装技術として通称『MAX 塗り』と呼ばれています。 Web や UI にこの『MAX 塗り』を取り入れる方法は簡単です。 作ったボタンや背景などのグラフィック
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
