検索 UI まとめてみた。｜あき
検索 UI を作る機会があったので、リファンレンスを集めた。あたまの整理をかねてパターン分け。 パターン一覧 1. フリーワード型 2. サジェスト型 3. グループ型 4. あとからフィルター型 5. 条件指定型 6. レコメンド型フリーワード型キーワードで検索。入力中に検索結果がリアルタイムに変わるものが多い。 良いところ シンプル。入力と同時に検索結果を表示できるので、最短で検索対象へたどり着ける。 イマイチ キーワードが間違っていると、対象へたどり着けないことがある。 感想 タスク管理やシンプルなファイル管理に多く採用されていた。 複雑な検索条件が不要。ユーザーが検索対象のキーワードを把握している場合に有効そう。見つける、というよりも、ショートカット的な役割に近い。サジェスト型キーワードを入力すると、検索候補が表示。 良いところ キーワードを正確に把握していなくても対象へたどり着け
Semantic UI
Design Beautiful Websites Quickly Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. Concise HTML Semantic UI treats words and classes as exchangeable concepts. Classes use syntax from natural languages like noun/modifier relationships, word order, and plurality to link concepts intuitively. Get the same benefits as BEM or SMACSS, but wit
iOSアプリデザインリニューアルの舞台裏の舞台裏 - クックパッド開発者ブログ
技術部の松尾(@Kazu_cocoa)です。 iOSアプリデザインリニューアルの舞台裏でも書かれていた、" 修正期間中は毎日夜間にアプリケーションの全画面のスクリーンショットを記録するスクリプトを実行し、画面崩れが起きてないか、新デザイン未反映の画面はないか、進捗状況の確認に利用していました。"の舞台裏を少し書いてみようと思います。 はじめに モバイルアプリケーションのテスト環境はまだまだ成長中で、様々なツールが飛び交っていることかと思います。ここでは、E2Eテストに対しての話題に絞り、使っているツール、シナリオの書き方、クックパッドでは、という話しをします。この記事におけるE2Eテストは、UIからの操作によりユーザの操作を模倣して実施するテスト、という意味合いです。 ツール E2Eテストを自動化する為のツールの選定には以下を気にしていました。 OSの更新に追従できそうなもの 特別なテスト
小さい子どもにコンピュータを触らせるということ - ビスケットのあれこれ
ビスケットは，開発して新しい機能を追加したときなど，必ず子どもたちが使っている様子を自分目で見てどんな風に使っているかを見てきます（最近はその暇が無くて他人に任せていたりして，かなりまずいんですが）．3年前くらいの面白いエピソードをご紹介しましょう． ちょうど，Androidタブレットで動くビスケットを開発していて（これはまた一般には配布していません．実験環境だけです），それがどのように子どもたちに使われるか見に行きました．僕としても指で直接操作するタブレットのUIの開発は初めてで．実は，マウスとタッチペンの操作は結構似ています．どちらも，非常に小さいエリアを結構正確にポイントできて，ドラッグもできますから．どちらかというと，ペンの方がドラッグが得意でしたね．小さい子はマウスクリックが全然出来ないとか（ボタンを押すときに指先だけ押すということができないので，手を握ってしまって，その結果マウ
facebookの"Building Paper"はすべてのiOSエンジニアが見るべき
huin Job : Software Engineer(iOS, Android) Use : Objective-C, Swift, Java Like : Gadget, Apple, Photography, Art, Design, UI, UX More posts by huin. 日本のAppStoreでは未だ公開されていないfacebookの「Paper」ですが、 そのUIは実験的ながらも非常に高い完成度で個人的にはすごく好きなアプリです。 良いアプリがあれば "どうやって作っているのか" が気になるのがイチiOSエンジニアの性なんですが、facebook自体がPaperの裏側について説明した動画をしていて、非常に良い内容だったので紹介します。 なんのイベントなのかはよくわかってないのですが、 公開日は4/18なので比較的最近だと思います。 当然英語なので理解は浅いのです
楽しく作れる！スマホアプリ/サイトのワイヤーフレーム・モックアップ作成支援ツール7選 | DevelopersIO
ワイヤーフレームを楽しく作ろう！ 魅力的なユーザーエクスペリエンスをユーザーに届けるために、ワイヤーフレームはとても重要です。 何より自分自身が楽しんで作らないと、良いアイデアは生まれないものですよね。 ということで「楽しく作れる！」という観点から、おすすめのスマホアプリ/サイトのワイヤーフレームの作成を支援するツールをまとめてみました！もちろんすべて無料で始められます！ では早速どうぞ〜！ Fluid UI http://www.fluidui.com/ プレビュー機能で画面遷移も作れる UIパーツが本物にかなり近い形で表現されています(むしろそのまま？)。UIパーツはWireframe、iPhone、iPad、Android、Android 4.0、Android Tablet、Windows Phoneの中から自由に選べます。かなり豊富です。またオリジナル画像をアップロードして使うこ
モバイルデザインパターン
モバイルアプリのUIパターンを手軽に参照できるリファレンス。主要なプラットフォームで動くモバイルアプリの画面例を400点以上使いながら、ユーザーインタフェースの定番パターンをグラフィカルに解説します。本書で紹介する68個の基本パターンと5個のアンチパターンが、使いやすいモバイルアプリをデザインするうえでクリアしなければならない設計上の課題を解決してくれます。 掲載UIパターン： ナビゲーション、フォーム、テーブルとリスト、検索、並べ替え、フィルター、ツール、グラフ、誘導、フィードバック、アフォーダンス、ヘルプ、アンチパターン サンプルPDF ● 「監訳者まえがき〜1章まで」（15MB） 監訳者まえがき 賞賛の声 序文 まえがき 1章 ナビゲーション 1.1 主要なナビゲーション 1.1.1 Springboard（スプリングボード） 1.1.2 List Menu（リストメニュー） 1.1
iPhone/iPadアプリデザインで使っているツール
企画やらUIを考えるツール iPhone Idea Sheet（PDF） 三階ラボさんのアイデアシート（PDF）。 iPhoneの枠だけじゃなく、ナビゲーションバーやタブバー、ステータスバーが書きやすいように、うっすら線が入っていてGOOD。 印刷して何枚か持ち歩いている。何か作りたいなーどうかなーと思ったら、手書きでワーっと書く。このシート自体が美しいので、いいもの作れそうな気がしてくる。 紙なので、対面でのブレストやら打ち合わせしながら書き込みやすい。 Cacoo（Web） UIの構想がまとまってきたら、Cacooで清書してチームで共有。 iPhoneの各パーツのステンシルが揃っているので、きれいに、わかりやすく作れる。SkypeミーティングのときにみんなでCacoo触りながら話したりとかしている。 Interface HD（iPad App） iPad上で、iOSパーツを組み合わせて
ゆめいろデザイン｜ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ
はじめは今までと同じように、カンプを作ってからコーディング、というやり方でした。 しかし、そのやり方だとトラブルが多いんです、なぜか。 ブレイクポイントとかで揉めたりすることが多いです。 早い話が、いままでの制作のやり方は、レスポンシブWebデザインでは無理だということです。 allWebクリエイター塾の菊池 聡さんは、「レスポンシブWebデザインでは、いままでの仕事のやり方は通用しない。いずれはブラウザでデザインする時代がくる」と、某セミナーで言っていました。 実際、最近は、ブラウザでデザインする、いわゆる「インブラウザ・デザイン」で制作することが多くなってきています。最近は、ほぼ7割くらいです。 最近、久しぶりにFireworksでカンプを作りましたが、「以外とPhotoshopやFireworksでカンプを作るのが面倒だな」と感じました（ちょっといらついていたような気がするのは気のせ
2つ目のiOSアプリケーション：ストーリーボード
2つ目のiOSアプリケー ション：ストーリー ボード 目次 2つ目のiOSアプリケーションの作成について 4 At a Glance 5 モデルレイヤの設計と実装 5 マスタシーンと詳細シーンの設計と実装 5 新規シーンの作成 5 問題の解決と次のステップの考察 6 関連項目 6 入門 7 プロジェクトの新規作成 7 デフォルトプロジェクトのビルドと実行 9 ストーリーボードとそのシーンの調査 12 まとめ 15 モデルレイヤの設計 16 データユニットの決定とデータオブジェクトクラスの作成 16 Data Controllerクラスの作成 21 まとめ 27 マスタシーンの設計 31 Master View Controllerシーンの設計 31 Master View Controllerの実装 35 アプリケーションデリゲートでのアプリケーションの設定 37 まとめ 39 詳細シー
KLab iPhoroid UI 発表！〜AndroidでリッチなUIを簡単に〜
umjammer です、 弊社の Android 案件の成果物として、リッチなUIを簡単に使用することができるUIコンポーネント群、名付けて「KLab iPhoroid UI」をここに発表します。 Android 案件を進めていく上で、お客様から言われる要件の一つとして「iPhone と同じようなUIにしてもらえませんでしょうか？」というのがあります。やはりスマートフォンと言えば iPhone というイメージが世間では強いのでしょうか？ Android には Android UI のポリシーが云々というのはありますが、そこはお客様の要望なので… そして Android のデフォルトで用意されている UI のみでは iPhone の様なリッチな UI & UX を再現するのは困難です。 サードパーティーも頑張って様々なリッチな UI を WEB に発表していますが、イメージの多用、メモリ管理
SIMILE Widgets
Free, Open-Source Data Visualization Web Widgets, and More This is an open-source “spin-off” from the SIMILE project at MIT. Here we offer free, open-source web widgets, mostly for data visualizations. They are maintained and improved over time by a community of open-source developers. Links Documentation Wiki Mailing list Code changes Code Repository Blog Old Google Code Wiki Old MIT Simile Wiki
iUI - Mobile web framework for high-end devices
Create mobile websites & webapps with a native look-alike in no time. You don't need to have any HTML5, CSS3 or Javascript skills. iUI supports iOS, Android, Rim OS6, MeeGo, Bada, WebOS, ... smartphones and tablets. Most recent desktop browsers are ok too! Create multi-column navigation menus for your tablet users. Works on iPad, and also most Android tablets.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
User Experience Stack Exchange
iPad Mini, 新型iMac, iPod Touch もちろんiPhone5などいろいろ、最近のAppleが発表したプロダクトのモックアップ用の素材のまとめ
Mobile Patterns - UI UX Inspirational Gallery for iOS and Android
Custom Controls for iOS, iPadOS, macOS, tvOS, and watchOS - Cocoa Controls
layer8.sh
Technical Note TN2123: CrashReporter
http://www.mobiledesignpatterngallery.com/mobile-patterns.php