今年（2014年）で見かけて気になったものやダウンロードしたデザインUIキットのまとめです。 そのままデザイン素材として使用するだけでなく、パーツやカラーの組み合わせ方を参考にしたり、どのようなレイヤースタイルで作られているかなど制作時のヒントに繋がる場合もあると思います。 紹介しているUIキットを使用する際は、ライセンス等は各自で再度確認してください。
今回はWebアプリケーションの画面作成に関する話です。かつて業務システムというのはエンジニア自身が画面を作ってロジックを実装して提供していました。UIがただコンポーネントを貼付ける程度だったからです。 しかしWebアプリケーションの時代になって、UIの制作が難しくなってきています。デザインの自由度が高いためです。しかし今後さらにWebアプリケーションが活用されていく中ではエンジニアもそれなりの画面を素早く開発できるようになっていかないといけない時代になっています。 そこで今回はUIフレームワーク、多彩なコンポーネントを備えたデザインフレームワークをまとめて紹介します。 iPhone/Android/Windows Phone対応のモバイルWebアプリフレームワーク「ChocolateChip」 モバイルWebサイトをネイティブ風にするUIライブラリは昔から多数存在しますが、今回はその最新版
5. 端的に言うとこういうこと • Model と それ以外を分ける • Objectのライフサイクルと参照関 係の整理理をしよう • ⾮非同期制御でState Machineを活⽤用 しよう 11つずつ説明していくよ 7. まずは「MMooddeellって何？」っ てことよね。 MMooddeellが意味する範囲は広い のよ。 基本的にはアプリケーション データの本質的な処理をする のがMMooddeellに相当するわ。 といってもピンとこないから、 「何がMMooddeellでないか？」を 考えるとわかりやすいよ。 8. 簡単に言うとMMooddeellは アプリの中でUUIIに関係しない部分 つまりUUIIに関係する部分はMMooddeell ではないわ UI=User Interface: ユーザの操作を受け付けたり何かを表⽰示をする部分
アプリケーションの画面に対してボタンを押したり入力を行い、正しい結果や答えが返ってくるか？ ユーザーインターフェイスを含むテストコードの開発は一般に手間がかかり面倒であり、テスト用のライブラリやフレームワークが欠かせません。 Googleは、Android用のUIテスト自動化のためのフレームワーク「Espresso」をテクノロジープレビューとして公開しました。 Espresso - android-test-kit - a fun little Android UI test API - Testing Tools For Android - Google Project Hosting EspressoはこれまでGoogle社内で、Google DriveやGoogle Maps、Google+など30種類のアプリケーションのテスト自動化に使われてきました。 特徴は、軽量でシンプルな記述
19. Matteo Penzo氏のEyeTracking検証結果では http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php 1. Left-Aligned Labels(左寄せ) 2. Right-Aligned Labels(右寄せ) 3.Top-Aligned Labels(上寄せ) ✕ ⃝ ◎ → 項目が少ないならこっち → 項目が多い時に有効 → 一番ストレスが大きい → ストレスが最小、ログイン画面 → スクロールが必要な場合とか → 使っちゃダメ 20. 人間工学的観点では、視点の動きが重要 - Path To Completion - 視点の導線は一本に。 http://www.slideshare.net/lorielue/form-design-best-practices-t
Helpshiftというモバイルアプリ用のサービスが凄い。ユーザのフィードバックを出来る限り欲しいアプリ開発者やスタートアップはぜひオススメ。iOSとAndroidにネイティブSDKで組み込む。 こういうサービスをずっと探してたんだけど、なぜか今までよいのがなかった。やっと出てきて嬉しい。 なぜ欲しかったか 製品開発ではユーザの意見を詳しく聞いたり、ユーザがいかに低コストでフィードバックしやすい状況を作るかが凄く重要。 Webサービスだとユーザがすぐにサービス提供者側とチャットできるoLarkとか、素晴らしいサービスがいっぱいあるんですよ。 ただ、ネイティブアプリには似たようなサービスがなかった。 iPhoneアプリでよくあるのは、アプリ内にフィードバックボタンがあって、それを押すとメールで送信するモーダルが立ち上がるもの。 ただ、メール設定してなかったら動かないし、メール送るのって思った
FurattoはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア（Apache License 2.0）です。 最近流行のフラットデザインでサイトを作ってみたいと思いつつ、そのデザインフレームワークを使いこなすのが大変…と感じている方はFurattoを試してみましょう。BootstrapをベースにしたフラットUIデザインが実現できます。 ボタンデザイン。四角い、立体感のないデザインです。 カラーバリエーションも良くあるフラット系になっています。 ボタンにアイコンを載せることもできます。 画像。丸く表示もできます。 囲みをつけることもできます。囲みの色も変更可能です。 テーブル表示。こちらは通常のテーブルです。 ちょっと詰まった感じのテーブル。 行ごとの色変更も可能です。 レスポンシブなテーブルもありますが、幅をスマートフォンサイズまで縮めるとうまく表示できませんで
CSS with a minimal footprint.Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes. * We can add correctly :) the numbers above are individu
Provides extra visual weight and identifies the primary action in a set of buttons
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
