タグ

UIとprogrammingに関するHeavyFeatherのブックマーク (14)

  • Metro UIは「UXアプリ養成ギプス」 : 小野和俊のブログ

    昨日、今日とWindows Developer Days(WDD)に参加してきた。二日間セッションに参加して感じたのは、「Metro UIは『UXアプリ養成ギプス』だ」ということである。 デザインの原則がある。 例えば原則のひとつに、”Content before Chrome”というものがある。これは、「コンテンツを主役にし、ツールバーやメニュー等のコンテンツへの没入を妨げるものは最小限にする」というものだ。 こうしたデザインの原則やガイドラインがきちんと決められている、ということは重要なことではあるが、それ自体はさほど驚くべきことでもない。先日ブログに書いたように、最近の主要なプラットフォームには、大抵UX/UIのデザインガイドラインが定められているからだ。 では私が何に驚いたかというと、Metro UIではこのデザインガイドラインが「半強制」されていることだ。 UX/UIに意識の高い

    Metro UIは「UXアプリ養成ギプス」 : 小野和俊のブログ
  • 続・Android開発のちょっとしたお話 - mixi engineer blog

    こんにちは。横幕です。 今回もAndroid(TM)開発についてお話をしたいと思います。 設定画面の作り込み 今回のトピックは、設定画面のちょっとした工夫の仕方についてです。 Androidでは、PreferenceActivityという設定画面を作るためのActivityが用意されています。 個々の設定項目はXMLで記述し、それをPreferenceActivityがコントローラとして画面を制御するような形になります。 設定画面の大まかな作り方 まずは、どんな設定項目を準備するのかを、res/xml/pref.xmlに定義します。 Androidには予め幾つかの設定方法を用意してあり、例えば項目の一覧の中から1つ選択するListPreferenceや、チェックボックスの状態で設定を変更するCheckBoxPreferenceなどがあります。 また、設定項目のまとまりごとにカテゴライズする

    続・Android開発のちょっとしたお話 - mixi engineer blog
  • プログラマのためのUXチートシート — ありえるえりあ

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

  • ところでiPadアプリってどうやって作るの?てなったときに読む記事

    こんにちわ。4-ROOMSが終了なんてショック過ぎ!やしこです。 最近iPadのデザインに関わる機会がありまして、情報がまだまだ少なかったのでまとめてみました これからiPadのデザインをする方のお役に立てばうれしいです 今回はTwitterクライアントやリーダーで主流な2カラム型のアプリデザインです ePub(電子書籍)の作り方は先月のMDNで特集されていました iPadにしか見られない(WEBにない)仕様 縦横で画面構成が変わる iPadiPhoneと同じく持ち方によって画面レイアウトが変形します。 縦横2パターンデザインする必要があります 意外とデザインをモニタの中だけで詰めていくと忘れる動きなので はじめにワイヤーに盛り込まれているか確認した方が良いと思います。 PopOver 項目の詳細を見たいときは画面遷移ではなくてPopOverとよばれる吹き出しのようなものがオーバーレイし

  • Flashでグニグニ曲がるUIを作る方法 - しっぽのブログ

    前にtwitterアイコンやpixivの画像をプヨプヨすることのできるpuyopixというコンテンツを作りました。 Puyopix -プヨプヨにするよ- このページの右上にあるブログパーツもこれです。 解説をやると言っておいて、ずっと書いていなかったので書きます。 あんまりコードだらけにしても面白くないし、方法の概念的なものを図を交えながら説明していきます。 画像をプヨプヨする方法の概要と、それをUIに応用する方法です。 プヨプヨの実装 骨組みを作る 格子状バネという、わりと普通の実装をしています。 格子状に並んだ各点をばねのように接続します。 バネはお互いの点の距離が一定になるように、2つの点に逆方向の力をかけます。 フックの法則というのがあって、「F = -kx」とかいう式もありますが、プログラムとしての感覚は「来あるべき距離の方向へ、ズレた分の○%だけ加速度をつける」って感じになり

  • iPadアプリ作成日記:書き心地重視のneu.Notesリリース!

    先日予告した「書き心地重視の『手書きメモ』アプリ」、ようやくiTunesストアに並んだのでここで発表させていただく。名前は neu.Notes("neu"はドイツ語で「新しい」という意味)。読み方は「ノイ・ノーツ」。日頃のちょっとしたメモや、ミーティングや授業のノートを取る時に便利な様に、使い勝手と書き心地を最重視して作ったアプリ。無料なので、iPadをお持ちの方は、ぜひともお試しいただきたい(iTunesストア上のneu.Notesへのリンク)。 これを作るきっかけを与えてくれたのは、Adobe Idea。最初に見た時には「やられた」と思った。簡単なメモを取るには十分な機能があるし、何よりもベクター・データのままIllustratorに渡せるという部分がすばらしい。描いた線をなめらかにしてくれる機能もなかなかしゃれている。これで私にとっての「メモアプリ」の座は決まりだと思った。 しかし、

  • RedLine Magazine : 印刷用CSSのお話

    印刷用CSSのお話 最近担当したサイトでは印刷用CSSをたいがいセットにしてます。同業者の方だと経験あるかもしれないですが、昔の鬼級テーブルレイアウトの頃は言われた事なかったんですがCSSを使い始めてから「背景が印刷できない」と、よく言われました。「ブラウザの設定で『背景も印刷する』にチェック入れると出てきますよー。デフォルトではインク節約仕様になってるんすねー(嘘かホントかは知らない)あはははー」とか返してました。 デフォルトの状態で印刷できないってのは問題あるだろってのはもちろんちゃんと分かってたんですよ。ここは背景扱いにしたらデフォ状態で印刷したらエラい事になるぞ、とか使い所の選別はしてましたし。まぁでも「あなた、なんでもかんでも画像化するの大好きなクセに検索対策っ!検索対策っ!さっさと検索対策~!って言うじゃん」とか憤も溜まってました。 印刷用のCSSを用意するようになってからは

  • 「ぽ地図」をダシに考えるウェブ地図の明後日

    LatLongLabでデザイン等を担当しているinuroこと河合 太郎です。今日も座り心地の悪いイスに座ってモニターを眺めてる皆様、少し背伸びをして体をほぐしてみてはいかがでしょうか。 今回はLatLongLabの提供するサービスのひとつ「ぽ地図」を紹介させていただこうと思います。 何ですかそれは? 「ぽ地図」という名前の由来はぽちっと押せる地図です。ではよく分かりませんね。 地図には「六木ヒルズ」「ホテルアイビス」といったように建物の名前が書き込まれています。これらを地図用語では注記と呼びますが、通常は注記は単なる「絵」です。さわってもたたいても何も起こりません。 「ぽ地図」はこれら地図上の注記を直接クリック可能にしたインタラクティブな地図です。注記の上にマウスカーソルが重なると青くハイライトされ、クリックすると左側の情報ペインに建物や店舗の詳細情報が表示されます。情報ペインには店舗の

    「ぽ地図」をダシに考えるウェブ地図の明後日
  • jQuery List – A Blog For Coders & Programmers

    CSS is an acronym that stands for cascading style sheets and refers to a set of instructions that controls the appearance of a web page. The formatting principles of CSS are supported by most browsers include Firefox and IE3. In comparison with HTML, CSS provides more formatting options and finer tuning for instance, instead of being stuck with 7 font sizes one can simply use an infinite number of

  • ユーザーは狭く見る - レジデント初期研修用資料

    Google の新しいブラウザ 「Chrome 」を使った感想。 Chrome は速く感じる 今まで使っていて、なんの不便も感じていなかった Sleipnir が、どうにも調子が悪い。恐らくは中で動いているIE8 の問題なんだろうけれど、 blog の更新だとか、コメント欄の管理だとか、エラーが頻発する。 いい機会なので、常用するブラウザを、Google Chrome に変更したんだけれど、これはたしかに速く感じる。 自分には、技術的なことは何一つ分からないし、普段見ているページのほとんどは、 文字しかないようなページばっかりだから、ブラウザの当の速さ、 内部処理の速さだとか、実装のすばらしさだとか、そういうのは全然分からないんだけれど、 素人がちょっとさわってもびっくりするぐらい、Chrome は速く「感じる」。 このブラウザは、ユーザーへの「速さの見せかた」に、気を遣ってデザインされ

  • JavaScript の不思議な面白さ

    ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog JavaScript と言うと普段自信をもって膨大なプログラムと格闘している諸氏もコード断片のはり付けに終始してしまうことも多いのではないでしょうか。かくいう私も検索エンジン(を使ってコードを書く)プログラマになっていることが多々あります。 JavaScript にあるこのプログラムの自作を妨げるのは、ブラウザごとに仕様が違ったりとか、正しいはずのコードが動作しなかったりと、プログラミング言語としての特殊性が挙げられると思います。特に目的実現の為に必要となる発想は他の言語と一線を画します。 今回は、 題材は、これです。 誰でも一度は使ったことがあるだろう灰色の説明文付きの入力欄ですね。 簡単な例 さて、作ってみましょう、ということ

    JavaScript の不思議な面白さ
  • 画面設計とか外部設計とか、もうやめようよ - masayang's diary

    昨日は特徴(Feature)、粗筋(Story)、脚(Scenario)でちょいと言及した「Feature, Story, Scenarioがごっちゃになりかけている」プロジェクトの人達とお話しする機会があった。 よくよく見ると、FeatureとFunctionとがごっちゃになっていた。 つまり、要件分析の段階で実装のことを考えていたのである。 なぜ、そうなったのだろう? 画面から要件分析をすると、こうなる どうやら要件分析する前の段階で「コンサルタント」の人達が、画面を使ってお客さんと「要件定義」をしていたらしい。 「この画面でこういうデータを入力すると、こんな画面に遷移します」みたいなやりとりがあったのだろう。 紙芝居感覚で交渉できるからわかりやすい。 だけど、先に画面を決めちゃうというのはいくつかの(そして時に致命的な)問題を抱えている。 実装をフィーチャとして捉える可能性。 例え

    画面設計とか外部設計とか、もうやめようよ - masayang's diary
  • ゲームとかアートの話 - SLN:blog*

    近頃表現のプラットフォームとしてゲームが気になってる。もともとは半ば飽和状態になりつつあるprocessing系の作品をぼんやりと眺めているうちに、「こういう作品群の面白さっていうのは、どちらかというとグラフィックそのものの美しさというよりは、その絵のうしろがわにあるシステムの面白さなんだよなー、でもそれが一番完成度高くできてるのってゲームなんじゃないの?」ってふと思ったことがきっかけなんだけど、色々調べるうちに色々と全世界的に面白い動きがあることがわかってきた。あまり考えはまとまっていないのだけど、今回は自分の頭を整理するために分類しておこうと思う。 ■アートとしてのソフトウェア アート作品をつくろうとしてプログラミングしたら結果的にゲーム(的)なものになっていた、あるいはゲーム作品をつくろうとしてプログラミングしたらアート(的)なものになっていた、っていう印象をうけるようなソフト。ハー

  • iPhone向けWebアプリを作ろう(1/4) − @IT

    Safari Web Content Guide for iPhoneを読み解きながら、iPhone/iPod touch上のWebブラウザのSafariで動くWebアプリを作成し、UIを最適化するコツを紹介します。 (編集部) Safari Web Content Guide for iPhoneを読み解く ネイティブアプリケーション開発を可能にするSDKが公開され、一層注目を集めている米アップルのiPhone(Applle Developer)。3Gへの対応がうわさされ、日市場向けの発表も待たれますが、読者の中には、早速iPhone向けのアプリケーション開発にチャレンジしている人もいるでしょう。 しかし、ネイティブアプリケーションを作るにはそれなりにプログラミングスキルが必要ですし、完成したアプリケーションは米アップルが用意する「App Store」経由でしか配布できないといった制約

  • 1