ラベル UI の投稿を表示しています。 すべての投稿を表示
ラベル UI の投稿を表示しています。 すべての投稿を表示
2013/05/31

[書評]モバイルデザインパターン

モバイルデザインパターン― ユーザーインタフェースのためのパターン集
Theresa Neil
オライリージャパン
発売日：2012-09-24
ブクログでレビューを見る»
モバイルアプリデザインのベストプラクティスのカタログ本です。
実際のアプリのスクリーンショットを用いて
それぞれのデザインパターンについて説明しているので用途がイメージしやすいです。
アンチパターンについても書かれているので
開発したアプリがアンチパターンに陥っていないか確認するのに良いと思います。
基本的には良い本なんだけど私が嫌いなデザインの本にありがちな何点かの問題があるため☆5とは行かず。
  1. 説明とスクリーンショットがページをまたぐ。
  2. 説明の文末に対象の図番号を記述するので読み終わるまでどのSSについての説明なのかわからない。
  3. 実際の UI なのでその他のコンポーネントが多くてどの部分について説明しているのかわかりにくい。
  4. 実例を見ながらの説明なので説明文がなんとなくまとまっていない。
上記の4点のせいで何回も説明とスクリーンショットを見比べなければならないので頭に入って来にくかったけど
付録でデザインパターンと簡潔な説明がわかりやすく載っていたので良しとする。

デザインパターンの種類とスクリーンショットは以下のページにあります。
Mobile Design Pattern Gallery: UI Patterns for iOS, Android and More

他にもモバイルアプリデザインパターンを集めたサイトがたくさんあります。
Pttrns — Mobile User Interface Patterns
Mobile Patterns
MOBILE PATTERNS
Patterns of Designdiscovering the best in iOS app design
TapFancy – An iPhone app design showcase and gallery
TappGala: The Best in Mobile Interface Design
Android App Patterns
Tumblrにスクリーンショットがたくさんアップされているので参考フォローしておくのもいいかもしれません。
lovely ui
Well-Placed Pixels
Android niceties
以下のサイトは Android アプリの挙動のパターンを解説していて Android を使わない人に便利かな。
Android Interaction Design Patterns |

デザインパターンも大事だけどまずはデザインガイドラインを知ることから始めないといけませんね。
Design | Android Developers
Icon Design Guidelines | Android Developers
iOSヒューマンインターフェイスガイドライン(pdf)
iOS Human Interface Guidelines: Introduction
このエントリーをはてなブックマークに追加
タグ: , , , , ,
2013/03/31

画像の重ね方メイキング ~ HTML5validなOGPとかTwitterCardsとかjQueryUIとかTwitterBootstrapとかgoogle-code-prettifyとか

HTML/CSS/JavaScriptを駆使した画像の重ね方 | DevAchieveで制作した
サンプルページ「Way to cover an image with another image」で
色々普段使わないものを使ったので忘れないようにメモしておく。

HTML5validなOGP設定

後述の Twitter Cards が HTML5invalid だよーというのを聞いて
バリデーションにかけてみたら見事にエラーが出てきた。
xmlns 属性による指定ではなく、 prefix 属性で指定しなさいということらしい。
<html lang="ja" prefix="og: http://ogp.me/ns#">
関連
The W3C Markup Validation Service
OGPの記述後もValidなHTML5文書にするマークアップ方法のメモ｜Blog｜Skyward Design
The Open Graph protocol

Twitter Cards

Twitter Cards を指定すれば Web でツイートを開いた時にサイトの情報を表示できるので指定してみた。
Way to cover an image with another imageの指定で言えば以下のような感じ。
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="http://wada811.github.com/sample/imageCover/index.html">
<meta name="twitter:title" content="Way to cover an image with another image">
<meta name="twitter:description" content="HTML/CSS/JavaScriptを駆使した画像を重ねる方法のまとめ。HTML5(Canvas)/CSS3もあるよ！画像は@kazoo04氏のアイコン素材を使わせて頂きました！ありがとうございます！">
<meta name="twitter:image" content="http://wada811.github.com/sample/imageCover/img/kazoo04-background.png">
<meta name="twitter:site" content="@wada811">
<meta name="twitter:creator" content="@wada811">
しかし、これは HTML5invalid である。name 属性に知らない値が設定されているのでエラーになる。
Twitter Cards meta - HTML5 Validation issue | Twitter Developersのコメントには
name を property に変えれば良いと書かれている。
試しに以下のプレビューツールで確認すると問題なく表示されることがわかる。
Preview your Twitter Card | Twitter Developers
ちなみにキャッシュがあるようで適当な指定でツイートしてしまうと
その後、指定を変えてもしばらくは反映されないので注意。
無用なトラブルを避けるために確認はプレビューツールでしよう。
関連
Twitter Cards | Twitter Developers

jQueryUI で リッチなタブ UI を作る

適当にソースコードを載せたらコレ以上に縦長になってしまうし、jsdo.itみたいな表示がしたかったので
探したらjQuery UIのタブが良さそうだった。
実装も簡単だし、他の UI も便利そうだったから色々使っていきたい。
関連
Tabs | jQuery UI

Twitter Bootstrap

Twitter Bootstrap は前にも使ったことあるけど一応。
Canvas で合成した画像を作成するときのボタン用に。
あとソースコード表示にも使った。
関連
Buttons | Base CSS | Bootstrap

google-code-prettify

Twitter Bootstrap のソースコード表示に使われている google-code-prettify を今回は使った。
Twitter Bootstrap と組み合わさった時の表示がいまいちだったのでスタイルをいじった。
.prettyprint {
    margin: 0 !important; /* Twitter Bootstrap が pre.prettyprint に margin-bottom をつけるため */
    overflow-x: scroll;
}
関連
Bootstrap：google-code-prettify

Canvas で複数枚の画像を描画、合成する

先人のおかげでほとんど苦労せずに描画することができた。
Canvas ってサイズ指定を CSS でできない？気のせいか効かなかったので JavaScript で指定した。
参考
Canvasに画像を複数枚重ねて描画するには » RIAxDNP
sinatra + html5_canvas + jquery 画像ドラッグドロップでファイル保存 - 麺処　まつば
このエントリーをはてなブックマークに追加
タグ: , , , , , , ,
2012/09/10

[書評]日経ソフトウエア 2012年 06月号

日経ソフトウエア 2012年 06月号 [雑誌]
日経BP社
発売日：2012-04-24
ブクログでレビューを見る»
矢野りんのデザイン業務レポート、
プログラミングでコレがやりたい！40選、
初めて作るスマホアプリ、Androidのここに注意！、
深津貴之の使いやすいiPhoneアプリの作り方。
付録は「HTML5逆引きポケット事典」という小冊子。
日経ソフトウエア　ダウンロード - 2012年：ITpro

矢野りんのデザイン業務レポート

上から順にやってもらう場合、リスト型のUIだとユーザーが何をすればいいのか戸惑うかもしれない。
リスト型の UI は階層構造をイメージさせるのでどこかに「飛んで」いく場合には向いてないかも。
「飛んで」いくならボタンなどがいい。ちゃんとした説明文とわかりやすい文言のボタンが良い。

プログラミングでコレがやりたい！40選

「ナンプレを解くプログラムを作りたい」というトピックは深さ優先探索を使っていて参考になった。
「迷路の最短経路を発見したい」というトピックは幅優先探索が使われていてAtCoderで解くときに役立ちそう。
すごく雑多で微妙。

初めて作るスマホアプリ iPhoneアプリを1時間で作る

難しいことを一切解説せずに3分クッキングやりましたな感じ。InterfaceBuilder の使い方だけ学べる。

Androidのここに注意！ セキュリティ対策のツボ

対象読者のレベルが上ったり下がったりしたのは気のせいだろう。
そういえばAndroid Security 安全なアプリケーションを作成するためにをまだ読めてない。
今回のAndroid特集はセキュリティ特集とかマニアックな感じのネタが多かったような。

深津貴之の使いやすいiPhoneアプリの作り方

iPhoneアプリ設計の極意 ―思わずタップしたくなるアプリのデザインの訳者であり、
iPhoneアプリ開発者として有名な@fladdictさんの記事。
アプリ開発者はPCの電源を切ってペーパープロトタイピングしよう！という話。
ピグマサインペン 0.5mmで輪郭を描き、コピックというマーカーで面を塗るらしいです。
紙は75×50mmのポストイットがiPhoneの画面と全く同じサイズ(！)でいいんだそう。
アイディアをメモして、画面も作れるし、貼れるので一覧もできるし画面遷移もわかりやすくていいらしい！
1ページの記事だったけどどの記事よりも価値のある記事だと思った。

おまけ

「インターン女子C#を学ぶ」が終わってしまい、「マンガでスキルアップC#プリミティブ」が始まりました。
妖精さんにいろんな物をさらっと教える感じで「インターン女子」と比べると浅く感じたのは気のせいか。
付録の小冊子は「HTML5逆引きポケット事典」で、表紙に何故か栃木のアイドルユニットがいるという謎。
HTML5のタグの解説というより、広義のHTML5で Canvas API, Web Storage API, Geolocation API,
Drag and Drop API, File API, Text Selection API, Web Messaging API,
Web Worker API, Offline Web Applicaitons の解説とサンプルコードがあって結構いい感じ。当たりの付録です。

日経ソフトウエア 2012年 06月号 [雑誌]
日経ソフトウエア 2012年 06月号 [雑誌]
このエントリーをはてなブックマークに追加
タグ: , , , , , ,
2012/09/04

[書評]ウェブデザインのつくり方、インターフェイスデザインの考え方。

ウェブデザインのつくり方、インターフェイスデザインの考え方。
矢野りん
発売日：2011-09-26
ブクログでレビューを見る»
Webデザインの基礎知識を幅広く解説した本。
Webデザインを始めたい人が読むのにちょうど良いボリューム。
デザインと言ってもアートなものではないのでプログラマも知っておいていいと思う。

「新しいウェブデザインの技法大全」と表紙にあるけどそこまでのものではないような気がするけども
一般的にWebデザインについて言われていることについてまとまっているので概要を知るのに役に立つ。

だいたいのことは知っていたけどオブジェクトとアクションに分けて分類するという考え方は知らなかった。
あと、カテゴリ分けの手法でLATCH法というのは知らなかった。
Location:位置, Alphabet:アルファベット, Time:時間, Category:分野, Hierarchy:階層で情報を分類する手法。
考え方が結構参考になる。

ウェブデザインのつくり方、インターフェイスデザインの考え方。
ウェブデザインのつくり方、インターフェイスデザインの考え方。
このエントリーをはてなブックマークに追加
タグ: , , , ,

タグ(RSS)