モバイルWebアプリとネイティブアプリのUIの違いについてモバイルWebアプリとネイティブアプリでUIはどう違うの？と聞かれたので、思いつくものをまとめてみました。 他にアイデアがあれば教えてください。 https://twitter.com/horaotoko UI differences between mobile web app and native app.
もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った - Qiita
はじめに Webサービスやアプリを企画したり、立ち上げたりする際にプロトタイピングツールや、ExcelやPowerpoint、Illustraterなどを駆使した謎のファイルで画面遷移図を描くことがある。 こういう図を元に仕様を決めて行って、サービスを作っていくのは以下の点で困る。 画面遷移図が保守されない。 書くのが非常に面倒くさい ユーザーのモチベーションの流れが追いづらく、見た目ばかりに注目してしまうものになりがち マシンリーダブル(ソフトウェアで構造を取り出せない)でない。 このような欠点があってどうにも扱いづらい。 そんなわけで、markdown風のテキストから簡単に画面遷移図を描けないかなとコンパイラを作成し、次にそれをインタラクティブに編集できるエディタを作成した。 UI Flows図について 画面遷移図的なものを書く際に、僕が個人的につかっていた表現方法として、UI Flo
小さい子どもにコンピュータを触らせるということ - ビスケットのあれこれ
ビスケットは，開発して新しい機能を追加したときなど，必ず子どもたちが使っている様子を自分目で見てどんな風に使っているかを見てきます（最近はその暇が無くて他人に任せていたりして，かなりまずいんですが）．3年前くらいの面白いエピソードをご紹介しましょう． ちょうど，Androidタブレットで動くビスケットを開発していて（これはまた一般には配布していません．実験環境だけです），それがどのように子どもたちに使われるか見に行きました．僕としても指で直接操作するタブレットのUIの開発は初めてで．実は，マウスとタッチペンの操作は結構似ています．どちらも，非常に小さいエリアを結構正確にポイントできて，ドラッグもできますから．どちらかというと，ペンの方がドラッグが得意でしたね．小さい子はマウスクリックが全然出来ないとか（ボタンを押すときに指先だけ押すということができないので，手を握ってしまって，その結果マウ
『デザインは8の倍数でできている』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか？」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ（サイズ）を指します。 【第１部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p
Android Design in Action: Common UX Issues (Japanese)
今回は Android アプリでよく見かけるさまざまなデザイン上の問題を、デザイン・ガイドラインに則ってご紹介します。 デザイン・ガイドラインは絶対的な基準ではありませんが、高品質なアプリを目指す上で役に立つヒントが詰まっており、Android アプリの UI/UX デザインにあたってまず参考にしていただきたい資料です。詳しくは http://d.android.com/design をご参照ください。 日本の Android 開発者のための公式 Google+ コミュニティ Android Development - Japan もよろしくお願いします。 https://plus.google.com/communities/115564198961961475282 #adia #common
マイクロインタラクション
UIのディテールをほんの少し工夫するだけでUXは劇的に改善します。本書では効果的なマイクロインタラクション――ひとつの作業だけをこなす最小単位のインタラクション――の意味、有効性、デザイン手法を学びます。マイクロインタラクションを「トリガー」「ルール」「フィードバック」「ループとモード」に分解して豊富な実例とともにていねいに解説し、さらにプロトタイプやドキュメント作成、テストといった実践的な手法も紹介します。マイクロインタラクションを活用すれば、ありふれた製品も顧客を引きつける魅力的な製品に生まれ変わらせることができます。ドナルド・ノーマン推薦書！ 翻訳者によるサポートページ。 本書に寄せて ――ドナルド・ノーマン 賞賛の声 まえがき 謝辞 意見と質問 1章 マイクロインタラクションのデザイン 1.1 機能ではないが侮れない存在 1.1.1 大規模なマイクロインタラクション 1.2 マイク
スマホUI考（番外編） UIやUXを劇的に改善する、『ビッグオー駆動型開発』とは | fladdict
いま『ビッグオー駆動型開発』とよばれる開発手法が、業界の一部で注目を集めている。 その理由は非常にシンプルだ。『ビッグオー』は非常に安価で簡単な手法でありながら、従来の開発手法に比べ劇的にUIやUXを改善できるためである。 製品コンセプトのような上流から、ボタンのレイアウトといった下流工程、さらにはグロースハックやプロモといったリリース後のフェイズまで一つの手法でユーザビリティを評価できる。この汎用性がビッグオー駆動開発の大きな特徴であり、導入時の利点となる。 今回はこのビッグオー、の概要と具体的なやり方について論じたい。TwitterのUI拡張予言以来、久しぶりのUI系エントリである。 ビッグオー駆動開発とは何か？ ビッグオー駆動開発は、正式には『OKAN Driven Development（オカン駆動型開発）』とよばれる開発手法である。 これは自分のオカンを指標とすることで、低コスト
魅せるUIの作り方 | iOS 7エンジニア勉強会
10. UIGravityBehavior UIGravityBehavior* gravityBeahavior = [[UIGravityBehavior alloc] initWithItems:@[self.square1]]; gravityBeahavior.gravityDirection = CGVectorMake(0.0f, 1.0f); gravityBeahavior.magnitude = 1.0f; gravityBeahavior.angle = -M_PI/2.0; •重力の強さと方向を設定可能 11. UICollisionBehavior UICollisionBehavior* collisionBehavior = [[UICollisionBehavior alloc] initWithItems: @[self.square1, self.squ
Modern Android Design? - Just posted a blog
What’s Modern Android Design? Androidでアプリの操作にはざっくりと分けると以下の部品があります。 Navigation (主にコンテンツの移動など使われるもの) ActionBar (画面上部にあるバックや検索やサブメニューなどがある領域) Menu (メニューキーを押したときに出てくるオプション領域) 先週Modern Android Designというエントリを書きましたが、実際アプリではどのようにデザインされているか調べました。 全体の設計に大きな影響を与えるナビゲーションに着目して2つに分けました。 GitHub Ted Twitter Evernote Food Flipboard Gmail Google Music Google+ pixiv recipes Trulia umano YouTube Navigation Tab Navig
モバイルデザインパターンとゲームUI
ゲームデザイナの水島です。少し前の話題ですが、aimingでランチの時間に読書会をやってました。 テーマはこれです。オライリー・ジャパンの『モバイルデザインパターン――ユーザーインタフェースのためのパターン集』。 ナビゲーション、フォーム、リスト、フィルター…という具合に、モバイルのアプリケーションのさまざまなパターンを網羅的に収集・命名して解説していく、というシンプルな本です。普段我々が目にするアプリのほとんどの定型が詰め込まれてます。 この本ではゲームのUIは扱ってませんが、近年のタッチデバイスのゲームは、iOSやandroid標準のUIを模したものがどんどん増えてます。iOSのユーザーインターフェースガイドラインでは、“ゲームなどの没入型アプリケーションの場合は、完全にカスタムのコントロールを作成することが望ましい”とされており、標準のUIを使う必要はないことを示唆しています。でも実
PopApp Magazine - Popular Magazine
About Us Welcome to PopApp.in, your trusted source for the latest news, information, and insights. We are dedicated to delivering high-quality content that informs, engages, and entertains our diverse readership. Our MissionAt PopApp.in, our mission is clear: to provide you with accurate, unbiased, and timely news that matters. We believe in the power of information to shape perspectives, drive co
楽しいBADUIの世界
悩みを抱えたユーザインタフェースたちがいると依頼を受け、とあるホテルに訪問診療にきているDr. ナカムラ．さて，今日の患者さんたちはどのような悩みを抱えているのでしょうか・・・ 原稿はPDFでアップロードしていますので、… 続きを読む »
【スマートフォン向け開発】ユーザビリティチェックリストを作ってみた
最近はスマートフォン系の開発から離れてしまっているので、感覚が鈍らないうちに（備忘録も兼ねて）スマートフォン向け開発（主にネイティブアプリ開発）におけるユーザビリティチェックリストを作ってみました。 ちなみに、このチェックリストは以下が前提となっていますのでご了承ください。 ・独自性を生み出すようなものではない ⇒現在のスマートフォンアプリのメインストリームの中で、アプリの印象をより洗練されたものにするためのポイントです。 ・案件の内容に関わらず意識すべきポイント ⇒ある程度汎用性の高いチェックリストになっているとは思います。 それでは、全てベーシックな内容ではありますが、その中でも特に基本的なものから説明していきます。 ※僕がiPhoneユーザーということもありiPhoneの画面イメージばかりが並んでいますが、全てAndroidでも使えるチェック項目です。 小さくし過ぎない、詰め込み過ぎ
ソーシャルウェブサービスのプロトタイピング - Zerobase Journal
ソーシャルウェブサービスを開発する際には実機ベースのプロトタイピングが有効。ペーパープロトタイピングを凌駕するためにはアジャイルな開発思想と実践的スキルの双方が必要。受託開発においては体制や契約形態も重要。 ペーパープロトタイピングは有効な手法ですが、ことソーシャルウェブサービスにおいては、あまり有効ではないかもしれません。それよりは、実機による迅速なプロトタイピングのほうが有効だと考えています。 ペーパープロトタイピングとは: スクリーンに表示されるべきUI部品を紙で用意し、その紙を並べ替えたり、取り除いたりしながらUIを設計する方法のことです。プロトタイピングの本質は試行錯誤することにありますが、他のどんな手法よりもそのスピードが速い手法であり、ソフトウェアのUI設計にはよく用いられる方法です。次の動画を見ていただければイメージがつかめるかと。 「なぜ、そんなにもUIにこだわるのか？」
Webデザイン最新トレンド ～イマドキUIのつくりかた 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
あとちょっと良いサイト ATOCHOTTO
オブジェクトベースのUIデザイン術。 基本 1.デザインリサーチでゴールやタスクを把握 2.オブジェクトとアクションに分けモデリング 3.デザインパターンを使いながらメイキング 補足 すべては立証ではなくひらめきのために行う。 ネーミングと概念の定義が重要。 リサーチやモデリングの結果を詰め込むのではなく、同時進行でアイデアを考え、着地にいたらないものは外していく。 詳細はOOUX – オブジェクトベースのUIモデリング モデルの背景 デザイン組織の支援の相談には自社の組織にデザイナーないしデザインに親和性が高い人材がいないということがある。 実際には人数の多い組織であれば、全くいないということもなく、ワークショップなどをすると親和性の高そうな人材がいることもある。しかし製品レベルで影響を与えているということはないのである。 流出モデル そこで、デザイナーないしデザインと親和性の高い人材の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ロリポップ！マネージドクラウドUI/UXの裏側にあるもの
Flat UI - Free Bootstrap Framework and Theme
UI＆UX / 重要なのは、毎日さわって嬉しい UI UX!
IDEA * IDEA
