タグ

**DevelopmentとUIに関するelectrica666のブックマーク (10)

  • Googleが採用するUXデザイン手法「3対1の法則」とは デザイン会社 ビートラックス: ブログ

    先週アップしたエシカルデザインに関する内容に関して、具体的にどのようにして“正しいデザイン”を行えば良いのかという質問が寄せられた。 一つの方法は、UXピラミッドの原則に従ってプロダクトの体験価値を検証したり、UXハニカムを活用する方法もある。 それらに加えて今回紹介したいのは、GoogleAndroidチームが採用しているUXデザイン手法である。とてもシンプルですぐにでも活用できる内容になっている。 進化するデジタルプロダクトに対するUXデザインアプローチサービスのデジタル化やDXが進む中で、多くのプロダクトにおける「完成」という概念がなくなり、デザインは常に進化し続ける必要性が出てきた。特にユーザー体験においては、デバイスの進化やユーザーの感覚の変化などを考慮し、常に改善を続けなければならない。 では、実際にどのようにデザインの良し悪しを判断すれば良いのだろうか?継続的にバージョンア

    Googleが採用するUXデザイン手法「3対1の法則」とは デザイン会社 ビートラックス: ブログ
  • クックパッド流UIの作り方 - takeshi nagayama's blog

    なんか突然東京行きたくなったので、ひょひょいと行ってきた。 たまたま立ち寄ったクックパッドっていう会社でクックパッドUIの作り方という勉強会してたので、偶然持ち合わせていたはてなステッカー渡したりおいしい料理いただいたりした。 UI/UXのためのSass 池田さん / サービスデザイン部 Sass / Haml (エンジニア・デザイナー問わずに) Github デザイナーもpull req 一つのサービスを複数チームで開発 各デバイスで速いサイクルでの開発 Sassとは → ぐぐれ 全体のデザインを束ねる → デザインガイドライン ガイドライン Sassで統一的なものを提供する 画像を使わずにCSSでデザインするメリット mixinをつかって統一できる 画像編集がいらない プロパティの変更によってデザインに幅をもたせる事ができる mixinの中身は応用がきくような仕組みにしておく 検証を

    クックパッド流UIの作り方 - takeshi nagayama's blog
  • 何故、エンジニアはUIのセンスがないか。

    何故、エンジニアUIのセンスがないのか、という自分にも当てはまるようなことについて書いてみる。 まずエンジニアがダメなUIを作ってしまう理由について、いくつかの仮説を立ててみる。 1.その画面を作るエンジニアは全てを知りすぎていて、もはやわからない人の気持ちがわからない説 2.エンジニアITリテラシーは高いけど、自分ができることを人に理解できるように説明するのは下手説 3.技術的に実現する方に興味が偏って、ハナからUIの使い勝手に興味が無い説 4.国語力がない、自分が実現する文脈を表現するのはできるが、ユーザーの文脈に配慮した言葉を想像する力が無い説 5.仕様書を読まない、人の言う事を聞かない説。例えばOSが定めているユーザーインターフェースガイドラインに従わないので、UIパーツが意図した使い方をしておらず統一性に欠ける。 6.わかりやすい色や文字、レイアウトに関する知識が無い。センス

    electrica666
    electrica666 2012/05/22
    この辺地味に次の世代のパラダイムでキモになってきそうな。そこに断絶があるのは否めない。
  • [CSS]ネガティブホバーに違和感アリ、ポジティブホバーのススメ

    ポジティブホバーのデモページ ホバー時のキャプチャ [ad#ad-2] ネガティブホバーとポジティブホバーの考察 直感的に 最も大切なことは、間違っているように思われない、ということです。 ホバー時に期待するものとしては、なにかしらの反応があると予想しませんか? 例えば、ページに遷移するリンクをクリックしようとした際、そのリンクがあなたから逃げてしまうことは望まないでしょう。その箇所に注意が向けられるように分かりやすくなることは、直観的に理解ができるとも言えるでしょう。 この感覚はUIデザイナー・デベロッパーにとって、とても大切ことです。 そして、この直感をもたらすものが、ポジティブホバーです。 どちらがよいのか? 答えはもちろん、ポジティブホバーです。 ホバー時には、そのアピアランスには加えるようにします。 アピアランスをポジティブにするには、下記の方法があります。 通常時:下線無し 下

  • 見えない「先」は存在しない。 - シニア現場の隅っこ。was使いやすさを考えてみる。(アクティブシニア・シルバー層の現場から)

    私の好きな話↓ 『徒然草』 第52段.仁和寺にある法師 略すと、お坊さんがお参りに行ったのに、途中で勝手に勘違いして帰っちゃって最後まで行かなかった。マジウケル。(By兼好法師)という内容である。 シニア層のネット操作を見ていると、いつもこの話を思い出す。 Nさんは65歳男性。 インターネットを初めて2カ月になる。 「年末はインターネットをやろうと思ったのに、楽しくなくてすぐ閉じちゃった。」と仰る。 インターネッ子(笑)としては聞き捨てならない言葉である。 「どんなものを見てみたいですか?」 「何があるかわからないから、何も見れない」 「テレビとか見ていて、気になるものをとにかく入れてみればいいんですよ」 「例えば・・・」と、色々見たくなるキーワードをぶつける。 「なるほど、自分が調べたいものを出せばいいんだ。 でも、調べても、何が出てくるかわからないし ただ見ているだけだから、出来ること

    見えない「先」は存在しない。 - シニア現場の隅っこ。was使いやすさを考えてみる。(アクティブシニア・シルバー層の現場から)
    electrica666
    electrica666 2012/01/27
    きっと僕らも歩んできた道なんじゃないのかと思うんですよね。んでリテラシーってのは不可逆なもので直接の想定は難しくなるから実地での体験は大切なものであると。
  • iPhoneよりマリオ、Googleより茶道――チームラボが考える「和製UI」 (1/2) - ITmedia +D モバイル

    iPhoneのユーザーインタフェース(UI)は確かにかっこいいが、進化の仕方があまりに西洋的。もっと日的なアプローチがあるんじゃないか」 11月15日、「Web2.0 Expo」の講演でこう話したのは、チームラボの猪子寿之社長だ。同社は、検索エンジン「SAGOOL」など独自サービスを展開する一方、「iza!」(産経デジタル)、「ワッチミー!TV」(フジテレビラボLLC)、サントリー公式サイトのサイト内検索機能、日立「Wooo」のトップページFlashなどを構築。UIとデザイン、検索・マッチング技術に強みを持つベンチャーだ。 「UIは、しょうがない奴だと思ってる」と猪子社長は言う。例えば携帯電話のボタン。電話をかけたり、携帯サイトを見るには何度もボタンを押さなくてはならないが、ユーザーはボタンを押したい訳ではなく、電話で話したりサイトを見たいだけ。つまり「ボタン」というUIは「仕方ないか

    iPhoneよりマリオ、Googleより茶道――チームラボが考える「和製UI」 (1/2) - ITmedia +D モバイル
    electrica666
    electrica666 2011/08/15
    Google,Apple的な体験も蔓延しちゃって、次の体験を市場は求めてたりするんじゃないかと。技術革新で想像の領域もどんどん広がっていくのがわかる。
  • Titanium Mobile を使って、シンプルなRSSリーダーを作る | バシャログ。

    こんにちは!最近はTitanium MobileでiPhoneアプリを作りたいと思っていろいろ遊んでいるtanakaです。 Titanium Mobile は スマートフォンアプリ(iPhone, Android)を作るためのツール群です。 Titanium Mobile を使うと JavaScript を使ってネイティブアプリケーションを作ることができます。 今日はシンプルなRSSリーダーを作る方法をご紹介します。 完成イメージ アプリの大まかな仕様 iPhone をターゲットにします RSSの取得に Titanium.Yahoo.yql を使います 取得した記事一覧を TableView で表示します 記事タイトルがタップされたら記事ページを表示します 準備 開発環境には次の準備が必要です。 iOS SDK(+XCode), Titanium Developer (Titanium を

    Titanium Mobile を使って、シンプルなRSSリーダーを作る | バシャログ。
  • 画像を使わずCSS3だけで尖ったBack・Nextボタンを作る方法

    CSS3だけで、iOS風のBackやNextの尖ったナビゲーションボタン作る方法ないかな〜と探していたところ、良記事があったので紹介します。Androidで確認してませんが、webkit向けなのでたぶんAndroidでも大丈夫だと思います。Androidはひと工夫必要そうです。 CSS3 Wizardry -Back and Next Buttons Revisited- CSS3 Wizardry -Subpixel Rendering- Buttons Revisitedの方が改良版で疑似要素バージョンみたいです。原理はSubpixel Renderingの方がわかりやすいです。 ポイントとなるHTML ボタンを構成する要素はこれだけ。 <!--ボタン要素--> <div class="button bordered back"> <span class="label">Back</s

    electrica666
    electrica666 2011/05/14
    こういうのって大事だよな。味がある。
  • 官能のUIデザイン - SLN:blog*

    ちょっと前にJonas Erikssonさんというデザイナーのつくった「76-Synthesizer」という架空のiPhoneアプリUIデザインがめちゃくちゃセクシーで驚いたんですよ。色っぽいとしか表現しようがない。 最近のiPhone/iPadアプリのデザインとか見てると、ものすごくよくできているものがたまにあって、フォトリアリスティックなんだけど真俯瞰でUIっぽさを担保している...みたいな独特の質感になってる。こういうデザインって、UIデザインの歴史としてとらえると、まず、OSで描画できるグラフィックが32ビットになったことからはじまり、Photoshopの機能の充実、デザインのメソッド化、Illustratorのグラデーションマップ芸の成熟なんかも影響して、結構自然な流れのように感じちゃうんだけど、グラフィックデザイン史として見るとかなり特異な状況になってきているんじゃないかとい

    electrica666
    electrica666 2011/05/03
    インスピレーション向け。
  • iOSの分断化がよ〜くわかる写真 - masayang's diary

    Engadget: Android の分断化問題がよく分かる一枚の写真 (あほくさいので略) 開発者は別にして、一人で何台もAndroid携帯を保有する人はいないでしょ。なので、ボタン配置で悩むのってのは機種変更の時くらいではなかろうか。むしろ重視したいのは「同じハードの上で走るアプリケーションの操作一貫性」なわけでしょ。 で、iPhone/iPadでケチつけたいのはまさにそこなんよね。 YouTube →Shareボタンがあるので押してみる。 →メールでリンクを送る、ことしかできない。 Bloomberg →この矢印がついたアイコンを押すと... →メールでリンクを送る、ことしかできない。 Telegraph →共有機能はない。というか、見つけることができない。 Reuters News Pro →矢印アイコンを押すと... →メール、Twitter、Facebookで共有できるよ、とい

    iOSの分断化がよ〜くわかる写真 - masayang's diary
    electrica666
    electrica666 2010/12/31
    よくわかるわー
  • 1