タグ

UIに関するruiccのブックマーク (15)

  • UI Design Dos and Don’ts - Apple Developer

    Formatting Content Create a layout that fits the screen of a device. Users should see primary content without zooming or scrolling horizontally. Learn more Touch Controls Use UI elements that are designed for touch gestures to make interaction with your app feel easy and natural. Learn more

    UI Design Dos and Don’ts - Apple Developer
    ruicc
    ruicc 2014/03/23
    見て分かるUIデザイン。詳しくはiOS Human Interface Guidelines
  • ソシオメディア | iPhone の当たり判定を検証した

    スマートフォンやタブレットなどのモバイルデバイス向けにUIをデザインする際には、タッチ操作に適したコントロール表現を追求しなければいけません。 タッチ操作に適したコントロール表現とは、前回書いたジェスチャもありますが、それ以前に、ボタンやリンクなどのUI要素を指で押しやすい大きさにすることが大切です。 パソコン画面のマウスポインターと違って、タッチスクリーンにおいて指でボタンをタップする場合、指がそのボタンを覆い隠してしまうので、意図した場所に正しく触れているのか分かりにくく、またボタン自体の視覚的なフィードバックも確認しづらいという課題があります。 またマウスポインターではピクセルレベルで画面上の座標を指し示すことができますが、指先ではそのような細かい操作はできません。 ですからタッチデバイスでは、ボタンやリンクが細かく密集しているようなデザインは大きなストレスになります。 最低限の大き

    ソシオメディア | iPhone の当たり判定を検証した
    ruicc
    ruicc 2013/04/13
    エリア拡張とタッチポイントのシフトは感じてた
  • GUI Architectures

    Graphical User Interfaces provide a rich interaction between the user and a software system. Such richness is complex to manage, so it's important to contain that complexity with a thoughtful architecture. The Forms and Controls pattern works well for systems with a simple flow, but as it breaks down under the weight of greater complexity, most people turn to “Model-View-Controller” (MVC). Sadly M

    GUI Architectures
    ruicc
    ruicc 2012/11/13
  • matarillo.com: UIパターン

    UIパターン 追記 この記事の一部を加筆・修正したものを「開発者が知っておくべき、6つのUIアーキテクチャ・パターン」として@ITに転載しています。 MVVMを追加した上で、アプリケーションモデルとMVVMをプレゼンテーションモデルのバリエーションとして位置づけました。 MVPの2つのスタイルとして、監視コントローラとパッシブ・ビューを説明しました。 まえがき Martin Fowlerの"GUI Architectures"を訳したので公開しようと思ったのだが、FAQページに「EAA developmentとかDSLなんかは商業出版するんで例外ってことで」と書いてある。面倒だったので翻訳の公開はやめて、「自分の理解を書く」というスタイルにしようと思う。 Fowler氏が説明しているのは 「フォームとコントロール」、「モデルビューコントローラー (MVC)」、「プレゼンテーションモデル」、

    ruicc
    ruicc 2012/11/13
  • O'Reilly Japan - インタフェースデザインの心理学 : ウェブやアプリに新たな視点をもたらす100の指針

    デザインは相手から反応を引き出すための大事な要素です。買ってほしい、読んでほしい、行動を取ってほしいなど、相手の反応を誘い出すためにデザインをします。人間の行動原理を理解していないデザインは相手を混乱させるだけで目的の結果を得ることができません。書ではすべてのデザイナーが知るべき100の指針を実践例とともに紹介します。すべてが科学的な研究から導き出されたものです。これらの指針を理解してデザインすれば、人間の思考や行動、遊び方にマッチした直観的で人を引きつける製品――印刷物、ウェブサイト、アプリケーション、ゲーム――を作れるようになります。 翻訳者によるサポートページ。 サンプルPDF ● 「前付〜#008まで」(53MB) 目次 1章 人はどう見るのか 001 目が受け取る情報と脳が私たちに伝える情報は微妙に違う 002 対象の「あらまし」をつかむのは中心視野より周辺視野の役目 003 

    O'Reilly Japan - インタフェースデザインの心理学 : ウェブやアプリに新たな視点をもたらす100の指針
  • プログラマのためのUXチートシート — ありえるえりあ

    はじめに http://msdn.microsoft.com/ja-jp/library/aa511258.aspx の 「Windows ユーザー エクスペリエンス ガイドライン」 「ガイドライン」 主に「コントロール」 の抜粋です。 以下の基準で抜粋しました Web UIに応用可能 実用的かつ具体的 自明ではない プライマリUIを目立たせる プライマリ UI 要素を強調するには、以下に従います。 - プライマリ UI 要素は、視線の通り道に配置します。 - タスクを開始する UI 要素は、左上隅または中央上に配置します。 - コミット ボタンは、右下隅に配置します。 - 残りのプライマリ UI は、中央に配置します。 - コマンド ボタン、コマンド リンク、アイコンなど、注意を引き付けるコントロールを使用します。 - 大きなテキストや太字のテキストなどの目立つテキストを使用します。 ユ

  • コレは...! 「柔らかいタッチパネル」を用いた「揉めるディスプレイ」(動画)

    コレは...! 「柔らかいタッチパネル」を用いた「揉めるディスプレイ」(動画)2010.09.09 11:008,183 立体的で柔らかなタッチパネル技術「PhotoelasticTouch」の開発を電気通信大学が進めています。 従来の平面的なタッチパネルディスプレイは、表示されたコンテンツに指先で軽く触る程度のことしか出来ず、さらに触れた際の触覚フィードバックも乏しいものでした... が、いよいよこの技術によって、映像を実際につねったり揉めるようになるんです! さぁ!ワクワクしてきましたよ! 「PhotoelasticTouch」の特性については次のように解説されています。 PhotoelasticTouch は、透明弾性体の持つ光学的特性を応用して、液晶ディスプレイと組み合わせることにより圧力のかかっている部位を認識しています。 これまでに知られている弾力性のある応力計測デバイスでは、

    コレは...! 「柔らかいタッチパネル」を用いた「揉めるディスプレイ」(動画)
    ruicc
    ruicc 2010/09/10
    タッチパネルじゃなくてカメラなのか。うまいな。しかしこれ映像から元の力の再現は出来るんかな。
  • 「iPadは使いにくい」:米のUI専門家が批判 | WIRED VISION

    前の記事 ネットは「偏った意見」を強化するか:研究結果 「米国初の洋上風力発電」:反対運動で難航 次の記事 「iPadは使いにくい」:米のUI専門家が批判 2010年5月13日 IT コメント: トラックバック (0) フィードIT Brian X. Chen 『iPad』はインターフェースの勝利と称されている。しかし、あるユーザビリティーの専門家はこのほどiPadについて、インターフェースに一貫性がなく明確でないという批判を発表した。インターフェースに標準が設定されていないため、それぞれのアプリが違ったように動くのだという。 一部からは「ユーザビリティーの王様」とも呼ばれるJakob Nielsen博士は今週、『iPad』の使いやすさを評価する93ページのレポートを発表した。このレポートは、34種類のアプリとウェブサイトをテストした7人のユーザーからのフィードバックを基に作成されている。

    ruicc
    ruicc 2010/05/14
    興味深い。指標がないならApp同士のUI戦争でもはじまるのかな。
  • 第39回 名前の効用 | WIRED VISION

    第39回 名前の効用 2010年1月13日 (これまでの増井俊之の「界面潮流」はこちら) 人間社会では、様々なものを識別するのに「名前」が利用されています。名前の無い人はいませんし、およそ人間が利用したり表現したりするものには名前がついており、様々なものを指定したり区別したりするのに利用されています。 ふだんの生活で名前はあまりにも当然のものとして利用されているため、計算機の利用やコミュニケーションにおいてもなんらかの名前を使うのが当然だと考えられていました。 通信相手を指定するには電話番号やメールアドレスのような名前が使われますし、データやWebページを指定するにはファイル名やURLのような名前が使われます。計算機の名前/プリンタの名前/アプリケーションの名前/...など、計算機で利用されるあらゆる対象は名前で区別されます。しかし、これらを扱うのに当に名前が必要なのか、実は疑問です。

    ruicc
    ruicc 2010/01/14
    CUIでも逆引き検索できれば問題ないだろうか。
  • Engadget | Technology News & Reviews

    Doctor Who is back, louder and more chaotic than before

    Engadget | Technology News & Reviews
  • Home

    Debra Ansell’s edge-lit rainbow illuminates seven acrylic “arcs” so that each glows with its own colors — with RGB LEDs on both ends for color mixing effects! Code it on a CPX and celebrate #CircuitPythonDay2024, or on an ESP8266 to display real-time weather conditions.

    Home
    ruicc
    ruicc 2009/04/22
  • モバイルサイト構築前に知っておきたいユーザビリティ10のポイント(第1回) | モバイルサイト構築のユーザビリティいろは

    端末特性に応じたユーザビリティの考え方最も身近で、どこでも気軽に使えるインターネット端末となった携帯電話。端末の急速な普及とハイスペック化にともない、携帯電話向けインターネットサービスによるマーケティングが各企業で格的に取り組まれるようになっています。PC向けWebサイトと同様、携帯向けWebサイト(以降“モバイルサイト”)の構築においても当然、ユーザビリティの高いサイトを構築することが各企業のビジネスによい影響をもたらすことは必然です。 しかし、モバイルサイトでは、これまで各企業が構築・運用してきたPC向けWebサイトと比べると、画面サイズや1ページで表示できるページ容量制限、キャリアごとの違いなど、モバイルならではの制約があります。それらを踏まえたうえで、どうすればモバイルサイトでユーザーにメッセージを正確に伝えることができ、ストレスなく利用できるユーザビリティの優れたサイトを実現で

    モバイルサイト構築前に知っておきたいユーザビリティ10のポイント(第1回) | モバイルサイト構築のユーザビリティいろは
  • リッチインターネットアプリケーションの実装時に検討したい30のUI

    でも近日発売の「Designing Web Interfaces」から、リッチインターネットアプリケーションを作成するための30のユーザーインターフェイスを紹介します。 30 Essential Controls サンプルは、一部jQueryベースのものに変更しています。 01. Auto Suggest

  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
  • UIデザインガイドラインのまとめ : could

    UIUXガイドライン UIデザインガイドラインのまとめ デザインガイドラインは、実際同じようなガイドラインを作るときだけでなく、UIデザインを考える際にも役立つ貴重な資料です。今まで個別で紹介したことはありますが、今回は一挙にまとめてリストアップしてみました。 Introduction to Apple Human Interface Guidelines 個人的に UI デザインガイドラインといえばこれ。日語訳も大変便利です Apple User Experience Guides ソフトウェア開発向けですが、イントロダクションあたりは参考になります iPhones Human Interface Guidelines 会員登録すると見れる PDF 資料ですが、上記のリンクからブラウザ上で観覧することが出来ます Windows User Experience Interaction G

    UIデザインガイドラインのまとめ : could
  • 1