iOS ヒューマンインターフェースの原則 - Qiita
はじめに iOS のヒューマンインターフェースを理解するためにはまず UI 設計の原則を定めた聖典 iOS Human Interface Guidelines を読むことから始めなければなりません。ここにはプラットフォームの特徴からデザインの原則、それぞれの部品が何のためにデザインされたのか、どう利用するのか、iOS を構成する UI の基本指針がまとまっています。 よく、『磨りガラス効果がかっこいい』『アニメーションしておくとイケてる』『ボタンは右配置の方が右手で押しやすい』『流行っているから』……などの観点によって UI の設計が決められることがありますが、そういうことではないのです。いや実際かっこいいかわいいだとかの感覚は重要なのですが、見た目が何となくそれっぽいだけでは優れた UI とは言えません。磨りガラスでも何でも必ずそこには意味があります。だからこそ HIG に書かれた思想
もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った - Qiita
はじめに Webサービスやアプリを企画したり、立ち上げたりする際にプロトタイピングツールや、ExcelやPowerpoint、Illustraterなどを駆使した謎のファイルで画面遷移図を描くことがある。 こういう図を元に仕様を決めて行って、サービスを作っていくのは以下の点で困る。 画面遷移図が保守されない。 書くのが非常に面倒くさい ユーザーのモチベーションの流れが追いづらく、見た目ばかりに注目してしまうものになりがち マシンリーダブル(ソフトウェアで構造を取り出せない)でない。 このような欠点があってどうにも扱いづらい。 そんなわけで、markdown風のテキストから簡単に画面遷移図を描けないかなとコンパイラを作成し、次にそれをインタラクティブに編集できるエディタを作成した。 UI Flows図について 画面遷移図的なものを書く際に、僕が個人的につかっていた表現方法として、UI Flo
Your UI isn’t a Disney Movie
My previous short article about gratuitous animation really struck a chord with people. The response has been phenomenal and it’s been awesome reading others’ frustrations with overly animated UIs. To be clear, I’m not anti motion design for UIs. Far from it. I have a problem with animation that serves only to get in the way of the end user. One of the clearest signs of a competent UI designer is
Android(Chrome)とiOS(Safari)でe.touchesの挙動が違う - あんパン
touchstart等のtouchイベントの引数eにe.touchesが含まれていて、その中にタッチしている指の情報が順次入る。 指Aを押下 指Bを押下 指Aを離す 指Aを押下 以上の操作をするとiOSでは [指A] [指A, 指B] [指B] [指B, 指A] と情報が入るのに対してAndroidは [指A] [指A, 指B] [指B] [指A, 指B] と情報が入るので注意が必要。見分けるにはe.touches[n].identifierを使う。ちなみにこのidentifierも違っていて、Androidだと0, 1, 2...となるが、iOSだと256808260, 256808261...みたいな値が入る。 指の押下時にAndroidではidentifierを0から順に見て空いてる値があったらそれを割り当ててidentifier順でソートしていて、iOSはidentifierを最大
Unity5 MecanimのStateMachineBehaviourと戯れる - テラシュールブログ
Unity5で唯でさえややこしいMecanim（アニメーション管理システム）に新しくStateMachineBehaviourが追加されました。 この機能はMecanimのステート管理機能の各ステートに振る舞いを設定できる機能です。各ステート毎に振るまいを設定することで、コンポーネント側から現在のステートを確認するといった事をせず動かせるようになります。 目次 目次 使い方 使って遊んでみる 下準備 振る舞いの登録 アニメーションの設定 使い方 StateMachineBehaviourを継承したクラスを用意し、AddBehaviourボタンを使って振る舞いを登録するだけです。StateMachineBehaviourでは幾つかのコールバックがあります。 OnStateEnter：ステートに入った時に呼ばれる OnStateUpdate：毎フレーム呼ばれる OnStateExit：ステート
UnityのuGUIで「UIのアニメーション制御」 - テラシュールブログ
目次 目次 UnityのuGUIで「UIのアニメーション制御」 uGUIでアニメーション アニメーションの作成手順 画面の準備 AnimatorとAnimationClip作成 キーフレームの登録 AnimationControllerの設定 AnimationControllerをスクリプトで制御する 感想 ライセンス 関連情報 UnityのuGUIで「UIのアニメーション制御」 UnityのアニメーションシステムのMecanimは、2Dで見た場合は複雑な上に面倒なので使い勝手が少し悪いですが、まあ使えなくはないです。むしろ凝ったUI表現を組もうと思った時、意外と使えるかもしれません。 特にUI全体を動かすようなアニメーションの場合、各アイテムの動きを合わせやすいAnimatorはちょっとだけ便利かもしれません。 ・・・単純なUI操作の場合、Tween使ったほうが楽だと思いますが。Ani
Unity ゲームUI 実践ガイド | コラム
Unite 2015 Tokyo の資料など セッションで使用したスライドを公開します。動画については近々Unite公式サイトにアップされる予定です。 前半：TextやImageの視覚効果を効果的に使うには (左右キーで次のスライドに移動できます) 後半：Unite2015 uGUIの拡張と応用 2015 4/16 池和田 Uniteに登壇します 来週から開催されるUnite 2015 Tokyoに本書の著者ふたりが登壇します。 自分（池和田）はuGUIでエフェクトを実装することをテーマに、時村さんはuGUIの拡張をテーマにお話しさせていただきます。 発表内容が盛りだくさんのため、リハーサルではお互い大幅に時間をオーバーしてしまい、内容を詰めざるを得ないのですが、かなり駆け足の発表になることは間違いありません。 Unite Unite 2015 Tokyo 4/14(火) 10:30
Unityの2DやuGUIのパフォーマンス最適化についての7つのTips - テラシュールブログ
最適化というか、改善する話です。 モバイル向けに作った時に妙に遅かった場合、この辺りの要因が絡んでいるケースが多い印象です。この辺りは作る際に確認しながら作ると、後々痛みが少なくて良いかなと思います。 目次 目次 プロファイラで確認する エディタ上で動かすプロファイラの注意点 メソッド毎の負荷について DrawMeshを抑える バッチングされない謎の理由 バッチングしやすくする為には フィルレートに気をつける よくあるフィルレートで死ぬパターン フィルレート対策 uGUIにおけるフィルレート対策 Unity 2Dにおけるフィルレート対策 解像度を下げる ゲーム画面は低解像度、UIは高解像度 バッチについて注意すべき事 フォントの扱いについて テクスチャ更新時のスパイク 2つの対策 UIを動かす（変形させる）コストについて 物理演算について その他… VSYNCについて Tweenとか Pi
Unity 用の超シンプルなトゥイーンエンジン Uween を作りました
2014年Dec8日Unity 用の超シンプルなトゥイーンエンジン Uween を作りました こんにちは。オインクゲームズのデザイナーの新藤です。MUJO では UI やエフェクトの実装、モーションデザインを担当しました。 MUJO のような動きのあるタイトルを作る際には、プログラマティックにアニメーションを制御する技術が必要不可欠です。なぜかといえば、ゲームの状況に応じて変化する部分が大きいからですね。例えば現在のスタック数によって、スタック時に飛び散るタイルの数が変わったり、大きさによって速度やスケールが変わったり、あるいはモーションが単調にならないように揺らぎやディレイを入れてみたり…。 このようなことを実現するために、MUJO では「トゥイーン」を使用して、全てスクリプト制御でモーションを作成していました。トゥィーンとは、簡単に言えば「何秒であそこまで移動する」と命令しておけばあと
Feathers UI
Cross-platform user interface components for creative frontend projects Dozens of UI controlsMix and match a variety of UI components, including buttons, sliders, toggles, scrolling lists, layout containers, navigators, and more. See all UI components → Cross-platformBuild stunning, GPU-accelerated user interfaces on a variety of platforms — including mobile devices, desktop computers, and web bro
yoko_net Blog : UIButtonでボタン押下時に画像を切り替えるtips
2012年11月29日21:56 カテゴリ技術関連iOS関連 UIButtonでボタン押下時に画像を切り替えるtips ついイラっとしたので書いてみた、今は反省している。 iOSアプリとか作ってるとボタンをよく使いますよね、そうボタン。 内部的にはUIButtonと呼ばれるオブジェクト。 こいつ意外とクセがあって色々ハマるので備忘録と、 全国のiOSアプリ開発者の利便性向上の為にtipsを書いておきます。 ※先日エヴァQを見た影響で若干チルドレン口調になっていますがシンクロ率に問題はありません ・UIButtonに指定するImageとbackgroundImageは別モノですよ これ、冗談じゃなく本当に分かり辛いんですよ。 特にInterfaceBuilder（Storyboard含む）でボタンに画像を 「ボタン領域に画像をドラッグしてセット・・・、ボタン領域に画像をドラッグしてセット・・
おっぱいでUX語る
この実況を見て気づいてしまった UXの各期間は「おっぱいでマッピングできる」 予期的UX: おっぱいを触りたいと願う 一時的UX: おっぱい鑑賞する触る揉む エピソード的UX: おっぱい揉んだ日の思い出'' 累積的UX: 「おれは、おっぱいを揉んだことがある」と自信を持つ ぼうくん | VoQn 🎨 @VoQn { 予期的UX: おっぱいを触りたいと願う, 一時的UX: おっぱい鑑賞する触る揉む, エピソード的UX: おっぱい揉んだ日の思い出, 累積的UX: 「おれは、おっぱいを揉んだことがある」と自信を持つ } なので、UX、完全におっぱいで語れる #気づき #jsおじさん 2014-03-27 22:13:13
【衝撃】NGUI作者がUnite 2013で新GUIを語る
Unite 2013でUnity4.3に新GUIはまだ搭載されないニュースは失望があった一方、新GUIの検討内容に関する発表は驚きも沢山あった！！ ------------ 新GUIであるDNFGUIに関するUnite発表資料 http://tasharen.com/unity/unite.ppt August 28 2013 DNFGUIとは？ 有志のコミュニティにより名づけられた新GUIのニックネームUIシステムにおける「Duke Nukem Forever」（いつまでも発売されない事で有名だったゲームタイトル）となってほしいとの願い UnityGUIの歴史を辿ると・・・ 即時モードGUI（いわゆるOnGUI） 開発者ベースのUIシステム保持モードGUI（Unity GUIとしてUnite登場） 次のフレームまで保持 アーティストの使い勝手を向上しかし実際には魅力がイマイチだった・・・
UIの改悪がUXを改善させる場合 - A Successful Failure
2013年01月20日 UIの改悪がUXを改善させる場合 Tweet Good UI≠Good UX UIとUXについてはその理解について多くの議論がなされてきた。たとえば、Googleの及川氏は「写真が語るUXとUIの違い」というエントリにおいてコーンフレークの例を元にUIとUXについて説明したが、その後、ERATOの渡邊氏が「1分でわかるUIとUXをわかりやすく説明する写真とお話」というエントリにおいて、ATMを例によりわかりやすい説明を挙げている（次の写真は当該エントリからの引用）。 この例ではたとえUIが素晴らしくても、そのATMは時間がかかるため、長い待ち時間ができ、結果としてUXが損なわれる場合を示している。 しかしながら、実際にはATMの劣悪なUIが悪いUXの原因となっている可能性があり、本当にこのATMのUIは素晴らしいのかという疑問が残る。つまり「Good UI ≠ Go
『デザイナーがデザインしたとおりになっているかは...』
少し昔を思い出してました。当時いた会社の制作物のデザインは、一時期ほぼすべて巨匠とよばれるベテランデザイナーがやってたのですが、ぼくはPMの立場でわりとぞんざいに扱っていました。 入社した頃はデザインセクションとシステムセクションが半々だったのですが、受注額に年々差が付いて行きいつしか人数比でエンジニア9に対しデザイナー１くらいまで減っていました。 そして経験の浅いPMであるぼくは、デザインの適正価格があまりみつもれず500万のiPhoneアプリ開発だと50万円くらいとか、価格比もそんな割合にしていました。UIデザインを頑張ると開発工数も連動して、あるいは数倍に跳ね上がることを知ってたので、案件が炎上しないようデザインにこだわったアプリを受注することを嫌ったのです。 そして受注した後僕は巨匠にこう言います。 「この案件、予算少ないんで雑なデザインでいいですよ」 しかし、巨匠はきっちり仕事を
レスポンシブ対応のフラットなUIフレームワーク·Furatto MOONGIFT
FurattoはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア（Apache License 2.0）です。 最近流行のフラットデザインでサイトを作ってみたいと思いつつ、そのデザインフレームワークを使いこなすのが大変…と感じている方はFurattoを試してみましょう。BootstrapをベースにしたフラットUIデザインが実現できます。 ボタンデザイン。四角い、立体感のないデザインです。 カラーバリエーションも良くあるフラット系になっています。 ボタンにアイコンを載せることもできます。 画像。丸く表示もできます。 囲みをつけることもできます。囲みの色も変更可能です。 テーブル表示。こちらは通常のテーブルです。 ちょっと詰まった感じのテーブル。 行ごとの色変更も可能です。 レスポンシブなテーブルもありますが、幅をスマートフォンサイズまで縮めるとうまく表示できませんで
iOSアプリのUIを爆速で激ヤバにする2つのライブラリ
iOSアプリのUIを爆速で激ヤバにする2つのライブラリ：生産性ガチアゲなオープンソースiOSライブラリ（2）（1/4 ページ） ゼロからiOS SDK開発を始める新規開発者でも超高速・高品質な開発を可能にするオープンソースのライブラリを目的別に紹介していく連載です。実際にライブラリを組み込みながら技術的な側面も併せて詳細に説明していきます。今回は、Clearのような折り畳みやFlipboardのような本めくりエフェクト、Twitterのようなプルリフレッシュを実現する方法を紹介します。 「あのアプリのあの機能」を実現するEGOTableViewPullRefreshとMPFoldTransitionを使ってみた 「良いアプリの条件」というと何が思い浮かぶでしょうか。例えば、誰も実現してない機能を実装していたり、パフォーマンスが良かったり、動作が安定していたり…… とさまざまな意見があると思
jQuery UI 1.10 日本語リファレンス | js STUDIO
このサイトについて jQuery UIの日本語リファレンスです。 jQuery UIの本家サイト(英文) の内容を翻訳して作成していますが、誤訳や誤記があると思いますのでその点についてはご了承ください。 もし、誤訳などの間違いを見つけましたら、 @tomof まで教えていただければ幸いです。 このリファレンスではjQuery UIのバージョンは1.8以上を対象としていますので、それ以前のバージョンについては当てはまらない 箇所もあると思いますので注意してください。 また、1.8以降のバージョンによる違いについて、なるべく記述しているようにはしていますが、内部処理やclass名の変更等、全ては書ききれてはいないので、 詳細について知りたい場合は公式サイトでの確認をお願いします。 jQuery UI 1.9アップグレードガイド(英文) jQuery UI 1.10アップグレードガイド(英文)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
やはりお前らのiOS7対応は間違っている
Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの？〜
