アイコン - Windows apps
アイコンによって、アクション、概念、または製品を簡略化したビジュアルが提供されます。 意味をシンボリックイメージに圧縮することで、アイコンは言語の障壁を越え、貴重なリソースである画面スペースを節約するのに役立ちます。 優れたアイコンは、文字体裁やその他のデザイン言語と調和するものです。 彼らは比喩を混ぜず、必要なものだけをできるだけ迅速かつ簡単に伝えます。 アイコンは、アプリ内およびアプリの外部に表示できます。
ユーザ・インターフェースのためのイージングカーブをつくる | POSTD
フラットデザインの導入以来、アニメーションの質が、今までにないほど、優れたインターフェース作成のために必要不可欠なものとなっています。モーションデザインを通して、製品の総体的なブランドエクスペリエンスを左右するようになり、製品を、市場の他のものと差別化する要素となりました。アニメーションは複雑なインタラクションを簡素化し、優れたデザインを記憶に残るユーザエクスペリエンスにしました。では、質の高いアニメーションはどのように作られるのでしょうか？ イージングカーブは多くの要となるコンポーネントの1つで、適切なアニメーションをとり、素晴らしいものに作り上げます。 問題なのは、イージングカーブがどのように機能するかについての理解が、少々難しいということです。 前回の記事 After Effects to CSS で触れたタイミング関数への興味の派生としてこの記事を書きましたが、この記事を読むことで
Pixateでアプリのインタラクションモックアップが捗りそう
インタラクションのモックアップ ネイティブアプリを作っていて、いわゆるインタラクション・アニメーションの部分をモックアップできるツールの必要性を感じたので @hiloki さんに聞いたツールをいくつか試してみました。 The Next Generation of Mobile Interaction Design | Pixate Justinmind: Interactive wireframes for web and mobile Briefs 昔ながらに Flash を使うという選択肢もあった気はしますがせっかくなので、そういう用途に特化したツールを探したかった次第。（メンバーに Flash 使えるひとがいなかったという事情もある） Pixateがよかった The Next Generation of Mobile Interaction Design | Pixate 結果、一番
よくわかるマテリアルデザインの設計コンセプト | fladdict
iPhoneとAndroidではiPhoneのほうが良くできているが、iOSのフラットデザインとAndroidのマテリアルデザインでは後者の設計が優れている。マテリアルデザインは、デザインとエンジニアリングが高いレベルで融合していて、ロジカルで非常に美しい。 以下、自分の理解をまとめたメモ。 紙とインク マテリアルデザインは「ペーパー」と「インク」のメタファーでできている。 ペーパーの特徴 バーやボタンといった画面上のUIコンポーネントは、バーチャルな紙でできたカードと考える。また、このペーパーは1dpの厚さを持っている。 ペーパーは純白の矩形、あるいはシンプルな円形である。三角や星型といった複雑な形はとらない。そのような複雑な形状や模様はインクが担当する。 現実とことなり、このペーパーは自由に伸縮することができる。 マテリアルデザインにおけるレイアウトは、複数のペーパーを並べたり、重ねた
デカスマホで使いづらいアプリにありがちなデザインと対処法
スマートフォンはデカくなっても手は元のまんまです。親指で快適に素早く使うにはデザインはどう工夫すればいいの？ 注意すべきポイントをまとめてみました。 親指操作をベースにデザインする デザインの専門家Steven Hooberさんが携帯1,333台の使用状況を調べてみた結果では親指操作の人は全体の75%、片手操作の人は49%でした。 日本でも片手の人が多いですけど、大型画面（4インチ以上）だと一番上にコントロールバーがあったりすると親指が届かなくて大変ですよね。
小さい子どもにコンピュータを触らせるということ - ビスケットのあれこれ
ビスケットは，開発して新しい機能を追加したときなど，必ず子どもたちが使っている様子を自分目で見てどんな風に使っているかを見てきます（最近はその暇が無くて他人に任せていたりして，かなりまずいんですが）．3年前くらいの面白いエピソードをご紹介しましょう． ちょうど，Androidタブレットで動くビスケットを開発していて（これはまた一般には配布していません．実験環境だけです），それがどのように子どもたちに使われるか見に行きました．僕としても指で直接操作するタブレットのUIの開発は初めてで．実は，マウスとタッチペンの操作は結構似ています．どちらも，非常に小さいエリアを結構正確にポイントできて，ドラッグもできますから．どちらかというと，ペンの方がドラッグが得意でしたね．小さい子はマウスクリックが全然出来ないとか（ボタンを押すときに指先だけ押すということができないので，手を握ってしまって，その結果マウ
モバイルアプリの最小タップサイズを考える | dotproof
モバイルアプリのUIデザインで難しいのはターゲットとなるデバイスの画面サイズに様々なサイズのものがあるということです。画面の大きさにはいろいろあっても人間の手や指のサイズはほぼ誰でも同じですから、どんな画面サイズであっても確実に押せるようなUIのサイズというのを把握してデザインしないと大変使いにくいものになってしまいます。 例えばiOSの「ヒューマンユーザーインターフェースガイドライン」では「タッチ可能な領域のサイズを約44ｘ44ポイントにしなさい」とし、サンプルとして電卓アプリの画面が紹介されています。 “Give tappable elements in your app a target area of about 44 x 44 points. The iPhone Calculator app is a good example of fingertip-size control
iOSのカスタム画面遷移64種類を試せるサンプルコードを公開しました - Over&Out その後
リポジトリだけつくって、ずっと放置してた 「iOS のカスタム画面遷移ギャラリーアプリ」 にやっと手をつけて、64種類 を試せるようにして公開しました。 https://github.com/shu223/AnimatedTransitionGallery なぜつくったのか iOS 7 から UIViewControllerAnimatedTransitioning および UIViewControllerTransitioningDelegate プロトコルが追加され、カスタム画面遷移（トランジションエフェクト）が格段に実装しやすくなりましたが、結局のところ実際のアニメーション部分は自分で実装する必要があります。 で、カスタム画面遷移は UIViewController の実装とは切り離せるようにAPIが設計されていて、使い回しやすい ので、こうして一カ所にまとまっていてすぐに試せて見比
HCD-Net
人間中心設計（HCD）専門家制度は、人間中心設計推進機構（HCD-Net）が実施する専門家認定制度です。 人間中心設計専門家とは 受験応募要領 資格更新手続き HCD認定ニュース 認定者一覧 認定専門家インタビュー
ペーパープロトタイピング入門 – 第1回 どうして紙でプロトを作るのか | fladdict
ペーパープロトタイピング講座シリーズ。第1回は導入編。 第1回はの導入編。ペーパー・プロトタイピングとは何なのか、何故必要なのか。そして導入することで、どんな利点があるのかを説明する。 ペーパー・プロトタイピングって何？ ペーパー・プロトタイピングとは、紙で実際にアプリやサイトを「実装する」ことである。 通常の開発においてコンテンツが使いやすいかどうかは、開発が終盤になるまでわからない。このため「作ってはみたが使いにくい」や「いまさら後戻りできない」という問題が発生する。UIや手触りが重要なモバイル系のアプリにおいて、これは致命的な問題になる。ペーパープロトタイピングはこの問題を低コストで解決する。 紙とペンで動作モックを作成することで、本実装を行う前に、素早く手戻なく検証を行うことができる。これにより、仕様書策定や実装前にPDCAのサイクルを実現できる。作業負荷の高い本実装を行う前に軽く
人間中心設計の基礎 - UXploration
人間中心設計機構が HCD-Net ライブラリーシリーズの第1弾として出版した「人間中心設計の基礎」を読了しました。恐らく、日本初となる人間中心設計（HCD）の専門書です。大学、大学院の教材としての利用も想定されているため読むのに骨が折れそうになりましたが、HCD のこれまでからこれからをアカデミックにまとめた良書です。 人間中心設計の基礎 (HCDライブラリー (第1巻)) 黒須 正明 近代科学社 2013-06-03 売り上げランキング : 2041 Amazonで詳しく見る by G-Tools 『本書は、こうした人間中心設計に関する現時点での最新情報をまとめたもので、概論書ないしはテキストという位置づけのものである。読み風にはまとまっていないため、多少読むのに骨が折れるかもしれないが、是非、通読し、人間中心設計の何たるかを理解し、その考え方や方法論を身につけていただきたい。』－「は
名古屋市:名古屋市公式ウェブサイトのアクセシビリティ（利用しやすさ）への配慮について（名古屋市）
インターネットの普及により、高齢者や障害者にとってもウェブサイトは重要な情報源となっています。しかし、情報を提供する側が適切に対応をしなければ、高齢者や障害者がウェブサイトから情報を取得できない、操作ができないという問題が発生します。 「ウェブアクセシビリティ」とは、高齢者や障害者等、ウェブサイトの利用になんらかの制約がある方や、利用に不慣れな人々を含めて、誰もがウェブサイトで提供される情報や機能を支障なく利用できることを意味します。
【iOS7】フラットデザインUI実装に役立つライブラリのまとめ - Qiita
iOS7で採用されたフラットデザインっぽいUIを、現行iOS（〜6.x）で実装する際に役立つライブラリ（OSS）をまとめました。後半ではiOS7っぽく下のビューをブラーかけて半透過表示するライブラリや、パララックス表示するライブラリも紹介しています。 FlatUIKit フラットデザインなUIコンポーネント詰め合わせ。ソースをみると、ほとんどのコンポーネントが該当するUIKitコンポーネントのカテゴリやサブクラスとしてつくってあって、使いやすそうです。 UI7Kit iOS5, iOS6 で iOS7 の見た目を実現するUIKitのサブクラス集。 iPhone Flat Design UI フラットデザインのサンプル集的なXcodeプロジェクト。コンポーネント化されて使い回せるわけではありませんが、こう設定すればこういう見た目にできるのか、という参考になります。 QBFlatButton
スワイプで画面を横に切り替える ViewPager の利用方法
この資料ではスワイプ操作で横方向に画面を切り替える UI を実装する方法を紹介します。 スワイプ操作による横方向の画面切り替えは、主にスクリーンマップ内の同レベルの情報ナビゲーションに利用することが一般的です。 例えば、Google Play ではホーム画面から、"APPS" や "GAMES" といった一段階下のレベルに移動した後は、横方向のスワイプナビゲーションが大いに活用されています。 例えば "APPS" では "HOME"、"TOP PAID"、"TOP FREE"・・・などが横方向に並べられ、それぞれが縦方向のリストとして情報閲覧できるようになっています。 Android の開発者サイトでも、スクリーンマップ内の兄弟関係のブラウズにはベストプラクティスとして Lateral Navigation (横方向ナビゲーション) が推奨されています。 スワイプ操作で画面を横に移動する
Androidで「Path」のメニューっぽいものを実装してみる
お久しぶりです。アライドのザックこと高畑です。 以前からかっこいいなぁと思っていたPathの「ヒュン！ヒュン！ヒュン！」って飛び出るのメニュー部分をAndroidで実装してみたいと思っていたので、今回このブログを書くにあたって 良い機会なので、それっぽく動くように頑張って実装してみました。 とりあえず、完成系はこんな感じになりました。 Pathっぽいメニューのレイアウトを用意 <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_gravity="center_vertical" android:layout_width="match_parent" android:layout_height=
ノンデザイナーこそ押さえておきたい! UI/UXが学べる神スライド7選 | Find Job ! Startup
競合に負けないWebサービスをつくるため、UI（User Interface）、UX（UserExperience、ユーザー体験）にこだわるのは、もはや常識。良いUI/UXはチーム全員で考えることが、良いサービスをつくる秘訣です。 エンジニアやWebディレクターも学んで損はしません。もちろん、本職デザイナーの方々にも役立つ7つのスライド厳選まとめです！ 目次 基礎知識 １．UXのためのUIデザイン ２．UX is not UI ３．ククパド美ちゃんと学ぶ！クックパッドのUI改善プロセス：前編 応用編（Webサイト） ４．ククパド美ちゃんと学ぶ！クックパッドのUI改善プロセス：後編 ５．コンテンツで改善する UI デザインの極意 応用編（スマホアプリ） ６．UI＆UX / 重要なのは、毎日さわって嬉しいUI UX! 応用編（タブレットアプリ） ７．ニコニコ超デザイン-
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Daydream App Quality Requirements | Google VR | Google for Developers
How to Implement Flipboard Animation on Android - OpenAphid-Engine
Pathのようなメニューを簡単に作る - [開発] - AwesomeMenu![Pathのようなメニューを簡単に作る - [開発] - AwesomeMenu](https://cdn-ak-scissors.b.st-hatena.com/image/square/499b199a34a112c34daf1dae70ca0d8c20a80d71/height=288;version=1;width=512/https%3A%2F%2Fblogger.googleusercontent.com%2Fimg%2Fb%2FR29vZ2xl%2FAVvXsEhZibclQwSf8Js7PFSOKQdZHyZOR7PAWw8vZ3ZNOjfoXMy4yaXlwlvkw0vN5UPaUkPHlwCEZdPuFhyphenhyphenwGqz7PoHwIMIjqF0cDuPx7P8S_hrm9A_G8Ogz4KCUH-XgQIJKybiVpMP80JfMb32X%2Fw1200-h630-p-k-no-nu%2F%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%2B2013-01-20%2B22.29.46.png)
第2回 UX/UIデザインのプロセスと具体例 -UX編-
