闇雲にディズニー映画みたいなアニメーションを GUI に実装するのはもうやめよう - Qiita
はじめに 本稿は UI Design Advent Calendar 2015 – 9日目の GUI アニメーションに関する記事です。 アニメーションの12の基本原則と GUI ディズニーの アニメーションの12の基本原則/12 basic principles of animation というのがありまして、要はこの原則に沿ってアニメーションを制作すればまるでそれが生きているかのような動きをする、平たく言えばディズニーっぽい動きになる、というものです。http://the12principles.tumblr.com がとてもわかりやすいので、うちいくつかを転載しておきます。 SQUASH & STRETCH ANTICIPATION FOLLOW THROUGH & OVERLAPPING ARCS ビデオ解説：The illusion of life これらを見ただけでも、『あー、デ
iPhoneの「3Dタッチ」に抱く懸念 ユーザーは機能に気づくことができるか
3D Touchで利用できるPeek（ピーク）。コンテキストメニューのように、よく行う操作を呼び出したりできます（撮影：松村太郎） Appleが発表した次期iPhone、「iPhone 6s」と「iPhone 6s Plus」に採用された新しいユーザーインタフェース「3D Touch」が話題です。新型のiPhoneにおける最大の見どころと評価する人も多いこの機能は、Appleいわく「次世代のマルチタッチ」。タッチパネルの操作では今や一般的になった、複数の指を使ったスワイプやピンチ操作に次ぐ、iPhoneならではの新しい操作です。 指でガラス面を強く押し込むと、押し込んだ強さに応じて「Taptic Engine」が振動を起こし、それと同時にPeek（ピーク／のぞく）やPop（ポップ／飛び出す）と呼ばれる動作を起こせるこの機能は、ソフトウェア（iOS）とハードウェア（iPhone）を一体で開発
クレジットカードフォームの解剖学 | POSTD
オンラインでクレジットカードを使って支払うことは簡単ですよね？この答えはYesでもNoでもあります。Yesの理由は、インターネットが普及された初期からずっとそうしていたから（例：Amazon）。Noの理由は、まったく同じクレジットカードフォームは2つとないからです。 過去20年以上で、私たちはオンライン支払のメンタルモデルを作り上げてきました。「財布からクレジットカードを取り出して、ウェブのフォームに必要なカード情報を入力、そして申込みボタンを押す」というものです。しかし、ユーザーが答えないといけない質問でいっぱいなので、全てを入力するのはとてもややこしい行為になってしまいます。そして言うまでもなく、誰も取扱い説明書なんて読みたくありません。 さまざまな有名ウェブサイト・アプリのクレジットカードフォーム 何かの代金をオンラインで支払う時は、人へ支払う時より2,3倍遅れをとります。端末のボタ
アップルとグーグルのガイドラインに学ぶスマホWebデザインの要点（スライド付） | ベイジの社長ブログ
スマートフォン対応させるWebサイトが急増しています。しかし、スクリーンが小さくタッチ操作がメインのスマートフォンでは、デスクトップ向けWebサイトのデザインで培ったノウハウの多くが通用しません。このような時代におけるスタンダードなデザインルールを学ぶために、弊社デザイナーの荒砂を中心に、Appleが公開しているiOS Human Interface Guidelineと、Googleが公開しているMaterial Design Guidelineの比較を行いました。（以降、両者をガイドラインと略します） スマートフォン向けのWebサイトのデザインを考える上で、アプリのUIデザインの定石を知ることは重要です。なぜなら、スマートフォンにおいてはWebサイトをブラウズする機会は14％しかなく（comScore調査／2014）、多くの時間をアプリの中で過ごしているためです。さらにユーザは「これは
よくわかるマテリアルデザインの設計コンセプト | fladdict
iPhoneとAndroidではiPhoneのほうが良くできているが、iOSのフラットデザインとAndroidのマテリアルデザインでは後者の設計が優れている。マテリアルデザインは、デザインとエンジニアリングが高いレベルで融合していて、ロジカルで非常に美しい。 以下、自分の理解をまとめたメモ。 紙とインク マテリアルデザインは「ペーパー」と「インク」のメタファーでできている。 ペーパーの特徴 バーやボタンといった画面上のUIコンポーネントは、バーチャルな紙でできたカードと考える。また、このペーパーは1dpの厚さを持っている。 ペーパーは純白の矩形、あるいはシンプルな円形である。三角や星型といった複雑な形はとらない。そのような複雑な形状や模様はインクが担当する。 現実とことなり、このペーパーは自由に伸縮することができる。 マテリアルデザインにおけるレイアウトは、複数のペーパーを並べたり、重ねた
ショートカットキーはマウスより遅い - WirelessWire News
CTRL+Xでカット、CTRL+Vでペースト。 ショートカットキーの使い方を覚えると、パソコンの達人になったような気分になりますよね。 しかし、実際にはショートカットキーを使用すると、マウスでメニューから「編集」「ペースト」を選ぶよりも平均2秒も遅いのです。 「そんなバカな」 と思いますよね。 しかし、これはTogことブルース・トグナッツィーニがAppleでMacintoshの開発を担当した際に行った膨大な実験の結果、解ったことなのだそうです。 これはTogのWebページでも詳しく紹介されています。 しかし2秒とはとても信じられません。 むしろ逆のようにさえ感じます。 しかしTogの主張によれば、我々ユーザはショートカットキーを選ぶのに2秒かかっているものの、ショートカットにたどり着くまでの時間を喪失している、つまりプチ記憶喪失状態になっているというのです。 こんな不思議な話が、慶應
Timesheet.js - Beautiful time tables with HTML, JavaScript and CSS …
Timesheet.jsVisualize your data and events with sexy HTML5 and CSS3. Create simple time sheets with sneaky JavaScript. Style them with CSS and have mobile fun as well … Just include Timesheet.js and configure your data. No external dependencies, no jQuery needed and of course no Angular.JS! Just a few lines JavaScript to generate a beautiful HTML5 layout and some really delicious CSS to be customi
Macのトラックパッドの操作性のすごさを知らない人に伝える記事 - 非天マザー by B-CHAN
トラックパッド（Trackpad）はAppleの大発明 みなさん、こんにちは！ B-CHANです。 ボクが愛読しているブログの著者の、id:cardmicsさんがこんな記事を書いていました。 スライドパッドでパソコン作業が出来る人は、尊敬に値する！私ならあまりの作業効率の悪さにイライラしてしまって使えません。 - SONOTA 記事を読む限り、cardmicsさんはミスをしています（cardmicsさんゴメンナサイ、あえてこう書いているだけなので気になさらぬよう。悪意はまったくありません）。 そのミスとは、 世の中のスライドパッドをひとくくりに評価してしまっている 最初に言っておきますが、ボクは特定の企業のファンではありません。MicrosoftのファンでもAppleのファンでもありません。 非天マザーを読んでくれている人は知ってるでしょうが、これはずーっと言い続けています。 どこかの企業
【デザインまとめ】綺麗なデザインの管理画面 40種類
今日は管理画面のデザインを、まとめてみました。いつもより多めな40種類です。トレンドを反映してか、フラットデザインが多いですね。 通常の静的なサイトのデザインとは異なり、投稿がある場合無い場合とたくさんのパターンを考えながら制作しなければならないので、デザイン力が問われます。これらを日本語に置き換えるとまた違って見えたりするのですが、ひとまず、ご参考になればと思います。 ▼ The Kamarel デモサイト ▼ Apricot Bootstrap デモサイト ▼ The Vira デモサイト ▼ Cameo デモサイト ▼ DefOne デモサイト ▼ Pixit デモサイト ▼ AdminEx デモサイト ▼ Odin デモサイト ▼ Minimal デモサイト ▼ Delighted Flat デモサイト ▼ Tisa Premium デモサイト ▼ Adminre デモサイト ▼
開発者は必見? GoogleがAndroidアプリのUXアンチパターン動画を公開 - すまほん!!
BlackBerryのドキュメンタリーTVドラマが北米で配信！2023-11-28 23:30:17yagi BlackBerry スマートフォン登場以前のガラケー時代に一世を風靡し、その後スマホの普及によって徐々に姿を消していったBlackBerry。今年3月にその盛衰を描いた映画「BlackBerry」が放映されましたが、今回そのTVドラマ版が放映されていたことが分かりました。PhoneArenaが伝えています。TVドラマ版は映画版を各話45分の全3部作に分割した内容で、約14分の映画版非公開映像も含むとのこと。11月13... Google Pixel 8シリーズ、大手携帯三社が取り扱い2023-10-05 12:28:04會原 auGoogleKDDINTT docomoPixel ドコモ、au、ソフトバンクの大手携帯三社はGoogleが発表したPixel 8シリーズの取扱を発表し
Animation & UI - YI
ロボットアニメを見ていると、コックピットやコンピュータのディスプレイ等、デザインされているモニターグラフィックスが気になってくる。単純にかっこいい悪いという視点もあるし、私は特にグラフィックの勉強をした訳ではなかったので知らなかったのだが、ヤコブ・ニールセン博士のユーザビリティの五原則などに則って見る視点もあるようだ。 http://allfesta.com/robot_anime_ui_01/ 劇場版機動戦士ガンダム00のモニターグラフィックスのデザインについては、デザイナーの海老川氏が色々とtweetしている。 togetter.com ガンダムハルートのマルートモードに移行する時の画面など本当に一瞬だが、3人の人格同調に対応した3つのOSが展開する様子がわかる。よく見るとOSのブロックの中に2つずつカメラアイの意匠があり、六つ目のマルートモードを表している。細かい。 またラスト付近で
なぜクライアントJavaScriptの単体テストを書くのが難しいか、考えてみた - mizchi's blog
ってsinonのスタブ漏れを探しながら何度目かわからない感じにキレてた。 とにかく仕事でJSのテスト書くのが辛いので考えてみる。比較的JSのテストに慣れてる自分ですら辛いのだから、世界はもっと辛いに間違いない。サーバーサイドのnode.jsの話ではない。 JavaScriptで完結しない 構造がHTMLの構造と密結合している。装飾や位置、表示/非表示はCSSによって制御されている。 クライアントJSはHTMLと密結合しており、CSSからビューは影響を受ける。それらがネットワークの結果を受け非同期に振る舞いを帰る。その最終的な値を取得するのが難しい。 もちろんサーバーサイドだってDBやネットワークという外部リソースを扱うが、モックの手法が確立しているし、局所的な複雑度は、JSの方がはるかに多い。 言語仕様が貧弱 mochaやjsmineはrspecを真似てるけど、本質的にJavaScript
デザインの7か条『誰のためのデザイン？ 認知科学者のデザイン原論』 - RyoAnna
USBメモリをパソコンに挿すと引っかかる事がある。コネクタの半分が空洞、半分が突起になっているため、2分の1の確率で引っかかる。これは、マークやランプを上に向けて挿さないユーザーが悪いのだろうか。『誰のためのデザイン？ 認知科学者のデザイン原論』の著書ノーマンは、このような事例をデザイナーの問題だと主張する。 ノーマンによるデザインの7か条。 外界にある知識と頭の中にある知識の両者を利用する。 作業の構造を単純化する。 対象を目に見えるようにして、実行のへだたりと評価のへだたりに橋をかける。 対応づけを正しくする。 自然の制約や人工的な制約などの力を活用する。 エラーに備えたデザインをする。 以上のすべてがうまくいかないときには標準化をする。 例えば、4番の「対応づけ」の悪い例は、部屋の電灯スイッチ。一般的なスイッチは縦と横に4つ並んでいるが、実際の電灯の配置とは一致していないため、どこを
UIの進化を止めるうんこユーザーに我々はどう立ち向かうべきか
「基本的に運営側がすることが正しいんですよ Webの世界ってそういう論理で動いてるんですよ」理論 実はここで言われている@masarakkiさんの意見はすごくわかる。「最高にクール」なUIがクソユーザー（便宜上、UIの良さがわからないユーザーを本エントリではそう呼ぶ）によって阻止されるのは中の人としては決して喜ばしいことではない。 ユーザーは「最高にクールなUI」がわかるか？ まずこの問いから始めたい。一般ユーザーは「最高にクール」なUIがわかるか？ 答えはNOだ。彼らは「使いやすい」UIはわかっても「クール」なUIはわからない。そして「使いやすい」というのは結局各人の主観に依るものなので、この「使いやすい」UIというのは参考にはできても信用はできないものである。 この話を読んで真っ先に思い出した１つの話がある。 フラットデザインや新機種が評判どうか、というのはAppleにとっては意味が無
3秒で消える写真、6秒動画、140文字が世界を征服している理由 - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
無料で資料をダウンロード SEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする ＞＞ 写真が数秒で消滅することで米国で大人気の写真共有サービス「Snapchat」がFacebookから3000億円の買収オファーを受けて断ったニュースに衝撃を受けて、以前訳して寝かせていたこの記事を紹介したくなりました。インターネットの今を理解し、そしてウェブサービスの成功の秘訣を考えるにはヒントになる記事かもしれません。 — SEO Japan 制約メディア。それは、ユーザーにプラットフォーム上でコンテンツを作成することを勧めるが、意図的な制約が付いている革新的な製品カテゴリだ―恐らく、Twitterの140文字が最も有名な例だろう。 今ではこういったアプリは非常にたくさんあり、中でも成功している
お願いだからWebフォームではを正しく使ってユーザビリティを上げてくれ | 初代編集長ブログ―安田英久
今日は、Webフォームが「うわ、使いづらい」となってしまわないようにする、意外と対応されていないことが多いHTMLタグ「<label>」について。 HTMLを自分で書かないWeb担当者さんでも、デザイナーさんが作ったフォームに関して最低限これだけはチェックしておくといいですよ、というお話しです。 コンバージョンの要である「Webフォーム」。アクセス解析での改善やEFO（入力フォーム最適化）をしていると思いますが、意外と忘れられていることが多い「<label>」をご存じでしょうか。 フォームの入力項目それぞれの「ラベル（項目名）」を書くためのHTMLの作法なのですが、これをちゃんと使っているかどうかで、フォームの使いやすさがガラッと変わるのです。 一番わかりやすいのは、ラジオボタンやチェックボックス。<label>をちゃんと使っていると、ボタン部分ではなく文字の部分をクリックするだけで項目を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootstrap 5 & Vanilla JavaScript - Free Material Design UI KIT
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
Android Pattern Cookbook で見るトレンドの変遷
指輪形ウェアラブルデバイス『Ring』が国内初披露！本当に魔法のようだった - 週刊アスキー
