タグ

UIに関するzbihのブックマーク (42)

  • http://tapsplusapps.com/ios7-template.html

    zbih
    zbih 2013/08/05
  • Template for iOS 7 App Icons

    New application icons have a lot of changes: essentially different way to round the corners, increased size for the iPhone, a specific grid construction and other. We create absolutely new psd template with all known sizes of app icons for iOS 7. It contains: — slices for fast png export — known icon sizes (new ones for iPhone) — new vector grid — smartobjects for easy preview of different sizes —

    Template for iOS 7 App Icons
    zbih
    zbih 2013/08/05
  • タッチスクリーンの代替としての人体

    自分の身体へのタッチはどこに触れているかを正確に感じ取れるが、これはどんな外部機器にも勝るフィードバックである。そのうえ、自分の身体を置き忘れることは決してない。 The Human Body as Touchscreen Replacement by Jakob Nielsen on July 22, 2013 日語版2013年8月5日公開 新しいユーザーインタフェースには、今のユーザーエクスペリエンスの中心となっているフラットなコンピュータ画面を超越しているものが多い。例えば、MicrosoftのKinectは部屋全体をインタラクションスペースに変えるが、そこではユーザーの身体の動きがシステムのコマンドになる。拡張現実システム(いくつかのGoogle Glassアプリケーションのような)ではそのアウトプットを現実の物体の上に投影するが、例としては、整備士が見やすくするための温度表示を

    タッチスクリーンの代替としての人体
    zbih
    zbih 2013/08/05
  • Interactive shell for blockdiag

    Interactive shell for blockdiag (for non IE browers) Source: { A -> B -> C; B -> D; } Diagram:

    zbih
    zbih 2013/06/24
  • ソシオメディア | フラットデザインはUIを進化させるか

    ウェブやアプリのデザイナーであれば、ここ1〜2年のUIトレンドであるフラットデザインについてご存じだと思います。すでにこのトレンドを意識して実践しているかもしれません。今回はフラットデザインの特徴とそのポテンシャルについて考えてみます。 フラットデザインとは、画面に表示するボタンやメニューなどのUI要素を非常に平坦な見た目にするという表現手法です。ウェブでもアプリでも今やこのフラットデザインを取り入れているものが沢山ありますが、中でも代表的なのは、Windows 8 の Modern UIGoogle の一連のサービスでしょう。 フラットデザインと言っても、もちろん明確な定義があるわけではなく、フラット度合いは様々に試されていますが、一般的な特徴をあげてみます。 UI要素の「塗り」に、グラデーションやテクスチャを使わず、単色にする ドロップシャドウやベベルといった立体感を出す表現を用

    ソシオメディア | フラットデザインはUIを進化させるか
    zbih
    zbih 2013/05/02
  • ソシオメディア | iPhone の当たり判定を検証した

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

    ソシオメディア | iPhone の当たり判定を検証した
    zbih
    zbih 2013/04/23
  • UI研究の第一人者・増井俊之が目指す「コロンブス指数」の高い発明とは?【連載:匠たちの視点-増井俊之】 - エンジニアtype | 転職type

    慶應義塾大学 環境情報学部 教授 増井俊之氏 1959年生まれ。ユーザーインターフェースの研究者。東京大学大学院を修了後、富士通半導体事業部に入社。以後、シャープ、米カーネギーメロン大学、ソニーコンピュータサイエンス研究所、産業技術総合研究所、Appleなどで働く。2009年より現職。携帯電話に搭載される日語予測変換システム『POBox』や、iPhone日本語入力システムの開発者として知られる 「理想的なインターフェイスってどんなものだと思います?」 そんな問いかけにどう答えるか困っていると、慶應義塾大学環境情報学部の増井俊之教授は、少し間を置いて、自身が考えるユーザーインターフェースの質について教えてくれた。 「泥酔していても使えること。それが大事だと思うんです」 「泥酔していても~」とは、使い方に頭を悩ませたり、身体的な能力の差や言葉、文化の違いによらず、誰にでも簡単に使えるとい

    UI研究の第一人者・増井俊之が目指す「コロンブス指数」の高い発明とは?【連載:匠たちの視点-増井俊之】 - エンジニアtype | 転職type
    zbih
    zbih 2013/04/18
  • Google Glassのスペック発表──500万画素カメラや12Gバイトのストレージを搭載

    Googleは4月15日(現地時間)、メガネ型ウェアラブル端末「Glass」の「Glass Explorer」版の主な仕様を明らかにした。 500万画素のカメラでは720pの動画も撮影可能で、16Gバイトのフラッシュメモリを搭載し、12Gバイトをユーザーが利用可能。クラウドストレージ「Googleドライブ」と同期する。 ディスプレイの解像度は、“25インチの高精細画面を8フィート(約243.8センチ)離れて見るのと同等”となっている。 音声には骨導振動子を採用している。ネットワークはWi-Fi(IEEE 802.11b/g)とBluetoothに対応する。 GlassはBluetoothに対応するあらゆる携帯電話と連係できるとなっているが、Glassを設定するための「MyGlass」アプリはAndroid 4.0.3(コードーネーム:Ice Cream Sandwich)以上搭載の端末に

    Google Glassのスペック発表──500万画素カメラや12Gバイトのストレージを搭載
  • http://blog.iaspectrum.net/2012/07/30/interviewwithy/

    See related links to what you are looking for.

    zbih
    zbih 2013/04/13
    シリアスw
  • 品質向上のための仕事

    UXの基礎となる仕事は完了した訳ではない。身近で、重要で、多くの人々があきらめているような問題を発掘し、対応する努力をすることが、結果的には経験の質を向上させることにつながる。 黒須教授 2013年4月8日 UXが時代のキーワードとなり、現在はそこに関係者の関心が集中しすぎているきらいがある。しかし、その基礎となる仕事が完了してしまった訳ではない。結果的にユーザビリティという言葉を耳にする頻度も低下してきたが、そうした点については、伝統的なユーザビリティ活動をしている人々は不満を持っているし、最近の動きにはついて行けないという発言まで聞こえてくる。来、密な関係をもちながら推進されるべき活動であるにもかかわらず、UXの基礎となるユーザビリティなどの品質向上のための活動に光があたらなくなってしまうことは望ましいことではない。 僕は、UXの基礎には、品質特性(ユーザビリティを含む)、感性特性、

    品質向上のための仕事
    zbih
    zbih 2013/04/10
  • Icons | Font Awesome

    The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

    Icons | Font Awesome
  • Junior - A front-end framework for building HTML5 mobile apps with a native look and feel.

    A front-end framework for building HTML5 mobile apps with a native look and feel. CSS3 Transitions optimized for mobile performance. Swipable carousels using flickable.js. Integration with backbone.js views and routers. Ratchet CSS UI components. Try loading this page on a mobile phone or try our "simulator" to the right. Download ‌ Installation Javascript Dependencies modernizr zepto zepto flicka

  • Ratchet

    Ratchet: Prototype iPhone apps with simple HTML, CSS and JS components.Getting started Once you've downloaded Ratchet, here's what to do next. 1. Create your pages Use these docs as a reference for all the available components and piece together the pages of your app. Customize the style too - make the prototype all your own. 2. Connect pages with push.js Read about push.js then start connecting y

  • HTMLを使ってiOSアプリのモックアップを手早く作るフレームワーク·Ratchet MOONGIFT

    RatchetはHTML/CSS/JavaScriptを使ってiOSアプリのモックアップを素早く作るフレームワークです。 iPhoneアプリを開発する際にまずプロトタイプを作ることが多いですが、Xcodeなどを使って作っていては時間がかかると感じるかも知れません。そこでもっと手軽に手早くモックが作れるRatchetを使ってみましょう。 デモサイトです。 ヘッダー、フッターは動かないでスクロールします。 チケットページに遷移しました。 フォームです。奇麗です。 設定ページ。ボタンの色も指定できます。 こちらはキッチンシンク。 タイトルだけでもこんなにパターンが。 タブバーも色々。 ボタンも大きさ、バッジ付きなど色々。 リスト。 リストにバッジをつけられます。 ボタン付きバッジ。 フォーム。 Ratchetの利点はHTML/CSS/JavaScriptで構成されているということです。記法に沿っ

    HTMLを使ってiOSアプリのモックアップを手早く作るフレームワーク·Ratchet MOONGIFT
  • ネイティブライクなスマートフォンWebアプリを開発するフレームワーク·Junior MOONGIFT

    JuniorはBackbone.jsやRatchetを使って スマートフォン向けにコンテンツを提供する方法は主に二つあります。一つはネイティブアプリ、もう一つはWebアプリです。Juniorはネイティブ並みのWebアプリを開発するためのフレームワークを提供します。 右側にあるのがデモアプリです。横スクロール可能なスライドはflickable.jsを使っています。 こんな感じで写真が切り替わります。 ネイティブ風のUIはRatchetを使っています。 Pushstate APIを使っているのでBackボタンなどがちゃんと動きます。 Juniorはその他、ビューやルーティングについてBackbone.jsを使うなど単体で特別な機能を提供するのではなく優れたライブラリを上手に組み合わせて提供しています。しかしこれらのライブラリを組み合わせることで手早くスマートフォン向けのWebアプリが開発できる

    ネイティブライクなスマートフォンWebアプリを開発するフレームワーク·Junior MOONGIFT
  • Breaking down Amazon's mega dropdown

    The hover effects on Amazon’s big ‘ole “Shop by Department” mega dropdown are super fast. Look'it how quick each submenu fills in as your mouse moves down the list: It’s instant. I got nerd sniped by this. Most dropdown menus have to include a bit of a delay when activating submenus. Here’s an old Khan Academy dropdown as an example: See the delay? You need that, because otherwise when you try to

    Breaking down Amazon's mega dropdown
  • Leap Motion+ホログラム=超未来(動画)

    小型センサーで高精度ジェスチャー入力を可能にしたLeap Motion。これ単体でも十分に未来ですが、ホログラムを組み合わせるとさらなる超未来生活が手に入りそうです。 ロビー・ティルトン(Robbie Tilton)さんが構築したこのシステムは、ペッパーズ・ゴーストと呼ばれる視覚トリックで4面プリズムに地球の映像を投影し、擬似的にホログラムを浮かびあがらせています。 空中で手を動かすとLeap Motionのセンサーが感知して地球を回転させたりできるのですが、これはかなり気持ちよくハマりそうですね。こうした生活が実現できるのはまだ少し先の未来になりそうですが、いつかこんな風景もありきたりの日常になるんでしょうか? [Robbie Tilton via Badass Javascript via Hacker News] Rumi(Eric Limer 米版)

    Leap Motion+ホログラム=超未来(動画)
    zbih
    zbih 2013/03/13
  • Pixate

    Saying farewell to Pixate. When we launched Pixate, our mission was to change the way mobile apps were prototyped. We joined Google just over a year ago to continue our mission, and to pursue a broader vision of changing the way products were designed and built. While a lot of the ideas we’ve been developing could work inside the Pixate framework, we believe we can have a larger impact if we move

    Pixate
    zbih
    zbih 2013/03/07
  • APP|Leap Motion

    Say hello to the second generation of our iconic hand tracking camera We remove boundaries between physical and digital worlds - for anyone, anywhere. Say goodbye to hardware… Say hello to human technology. Our hand tracking and haptics are powering the next wave of human potential. No controllers. No wearables. No touchscreens. Just natural interaction.

    APP|Leap Motion
    zbih
    zbih 2013/02/28
  • Focals by North

    We are excited to announce today that North has been acquired by Google. We founded North (then Thalmic Labs) in 2012 with an optimistic vision for the future in which technology becomes an invisible, helpful part of our everyday experience. Technology seamlessly blended into your world: immediately accessible when you want it, but hidden away when you don’t. Early on, our focus was on new forms o

    Focals by North
    zbih
    zbih 2013/02/28