The iOS Design Guidelines - Ivo Mynttinen / User Interface Designer
Updated: 18. October 2020 The iOS Design Guidelines Design great-looking apps for Apple iOS devices. Designing iOS apps can be difficult sometimes, but finding correct and up-to-date information about all of Apples’ devices shouldn’t be. These design guidelines will help any designer who’s building neat things for iOS get started within seconds. About these guidelines These guidelines describe how
これはわかりやすい。「 iOS 」各バージョンのデバイス対応一覧表 | 覚醒する @CDiP
素晴らしいですね。 過去の iOS デバイスがどの iOS のバージョンに対応しているかが一目で確認できます。 なるほど、日本で始めて発売された初代 iPod touch は 1.1 – 3.1.3 だったのかぁとか、iPhone 3GS は iOS 6 にも対応しているにも関わらず、第3世代 iPod touch は 5.1.1 でサポート終了なのかとか色々わかるわけです。 iOS 4 の時代が様々なバージョンがあって混沌としていたんだなぁというのがよくわかりますよね。 そういえば、初代 iPad も iOS 6 のサポートからはずれているんですね。うっかりしてました。 うっかりついでに、2年前の8月に買った iPad 3G を解約することもすっかり忘れていました。いやーなんにしても見やすく分かりやすい素晴らしい表ですよね。この表は PDF にて配布されています。興味のある方は こちら
手書きでサイトやアプリデザインする際に便利なテンプレPDF「Sneakpeekit」:phpspot開発日誌
Sneakpeekit | Sketch sheets for Web Designers 手書きでサイトやアプリデザインする際に便利なテンプレPDF「Sneakpeekit」 モックアップ作成ツールは色々ありますが、やっぱり手軽なのは手書きということで印刷して使うタイプの画面デザイン用PDFがiPhone、iPad、PC用等で使える形式で配布されています。 商品ではなく印刷してすぐに使えるのは地味にありがたいですね よーし、パパこれでいいデザインつくっちゃうぞー 関連エントリ Facebookのタイムラインを作る際に便利なPhotoshopテンプレート カッコいいティーザーページ作成用CSS3テンプレート TwitterBootstrapベースのテーマやテンプレートが入手できる「WrapBootstrap」
アイディアは紙から始まる。スマホ、タブレットなどに使えるワイヤーフレーム・テンプレートたち。 – TechDoll.
企画書も原稿も、まずアイディアを紙に書き出すことから始める。そうすることで散らばっていたアイディアが洗練されてまとまっていく。スマホアプリ、ウェブサイト、タブレットのデザインを考えるときも紙から始めるとはかどるよね。 今回はそんなワイヤーフレームの作成に便利なテンプレートをご紹介。UI STENCILSは各デバイスのスケッチブックやステンシルを販売しているおすすめサイト。 UI Stencils Browser Sketch Pad. from Design Commission on Vimeo. Pad Sketch Sheets iPadのスケッチシート。簡単なスケッチはグリッドなしバージョンで、詳細スケッチはグリッドありを活用して。 iPad Idea Sheet 日本語のサイト。原寸大のシート(横向き)、70%縮小シート(縦向き)、50%縮小シート(横向き)の3種類。画面内で縦横
[JS]iOS向けのページ制作に役立つ便利機能がたくさん詰まったスクリプト -iOS.js
iPhone, iPadなどのiOS向けのページを制作するのに役立つCSSやJavaScriptの便利機能をたくさん備えたスクリプトを紹介します。 iOS.js [ad#ad-2] iOS.jsの特徴 iOS.jsのデモ iOS.jsの特徴 iOS.jsではデスクトップのブラウザ向けページとは異なる点を中心に、より簡単に実装できるよう便利な機能がたくさん用意されています。 改善 min-height ページがスクリーンより小さい時は常にアドレスバーが表示されてしまいますが、スクリーン全部を使って表示します。 ※下記にデモがあります。 リンク ページ内の全てのリンクをWebAppで開きます。 100% height 通常「height=100%」はロードした最初の画面の高さを元にしますが、アドレスバーが隠された後のサイズ変更に対応します。 ※下記にデモがあります。 アドレスバー ページがロー
Using the PopoverView in iPad App Development - mobiForge
In the previous article, we saw how to develop a new type of application known as the Split View-based application on the iPad. And one of the new views introduced for the iPad is the PopoverView, which you had a quick glimpse of it in action in the previous article. In this article, I will show you how you can use the PopoverView in your iPad application, not just in a Split View-based applicatio
Using the PopoverView in iPad App Development [Smartphone-Zine]
iPhoneとiPadでの大きなUIの違いであり、iPadに特有のユーザインタフェースであるポップオーバーはどうやって実装しているのだろうか？ サンプルプログラムにポップオーバビューを実装していく。これにより理解を深めていきたい。 ではまず、新しいプロジェクトを作成する。Split View-based Applicationを選択する。 このとき、Use Core Data for storageにチェックを入れる。 プロジェクトを作成したら、早速実行してみよう。左上のボタンをクリックしてほしい。 既にポップオーバービューが実装されている。 さらにポップオーバービューを追加してみる。ビューにボタンを追加し、このボタンをクリックするとさらに詳細のポップオーバービューが表示されるようにする。 まず、ビューを追加する。新規ファイルの追加で、UIViewController subclass
Popovers | iPad Techfirm Lab
popoverは表示中の画面の上にメニューやリストなどを簡単に表示できるビューコンポーネントです。 Popoverの使い方 PopoverはUIPopoverControllerが実現してくれます。 UIPopoverControllerは他のUIViewControllerを表示するコンテンツとして変数に保持します。なので、iPhone用に作成済みのUIViewControllerをそのままPopover表示することが簡単にできます。 簡単にPopoverを表示するために、UIImagePickerControllerをPopoverで表示してみます。以下のメソッドはツールバーに配置した”Popover”ボタンを押された時に呼ばれるメソッドです。 - (void)popover:(id)sender { if (!popover) { UIImagePickerController *
アイコンを移動して［ホーム］画面を整理するには
あまり使わないアプリケーションのアイコンを後ろのほうに移動したり、反対によく使うものは前のほうに移動したりするなど、［ホーム］画面のページをまたいでアイコンを配置したいこともあるでしょう。アイコンを移動する際、アイコンを画面の端までドラッグすると前後のページに切り替わり、好きな場所に配置できます。
iPad業務活用(1)：リモートデスクトップやVPNではダメな理由
「iPadを本格的に業務で利用するプロジェクト」がスタートしたのが今年の３月です。 今から思えば、あまりにも無知で、とても恥ずかしいことばかりですが、 今後、ポストPCとしてiPad等のタブレット端末の本格的な業務利用を検討される企業もあると思いますので、 少しでも参考にしていただくか、「バカなやつらだ」と笑っていただくのもいいのかなと 我々の体験を少しレポートさせていただきます。 SQLServerとASPの組み合わせで社内Webシステムを構築しています。 はじめは、VPNで接続すれば、IE用の画面だけSafari対応する程度で十分だろう、 また、OfficeはリモートデスクトップでiPadからWindowsに接続すればいいかなと かなり安易に考えていました。 そこで、プロジェクトでは機種の選定、回線の選定やルーターなどネットワークの見直し からスタートしたような状況でした。 テストとし
[CSS]iPadの横向きと縦向きでレイアウトを変更するスタイルシート
Portraitモード（縦向き）のグリッド設計 グリッド 768=30+708+30 708=216+30+216+30+216 実装のポイント iPadの横向きと縦向きでレイアウトを変更するには2つのポイントがあります。 METAタグ iPadのスクリーンで等倍に表示されるように、METAタグで設定します。 <meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0" /> スタイルシート 比率を等倍に設定したので、Media Queriesを使用して横向きと縦向きに分岐させます。 /* Landscapeモード（横向き）用 */ #wrap { width:1024px; } @media only screen and (orientation:portrait){ /* Portr
iPhoneやiPadでも綺麗なレイアウトで表示されるWebサイトを制作する為のスターターキット・Skeleton
なかなかシンプルで良かったので ご紹介。人気のデバイス、iPhone やiPadで閲覧してもレイアウトを綺麗 に保てるように設計されたWebサイト のスターターキット。内容物はHTML、 CSS、JavaScriptです。 シンプルな構成ですが、欲しい部分は用意してくれている、と言った感じのスターターキット。なかなか気に入ったのでデモを作りました。 HTML+CSSのシンプルなフレームワークです。グリッドレイアウトを使った美しいレイアウトで、Media QueryによるiPhone / iPadでのアクセス時のレイアウトも最適化されており、jQueryで作るタブコンテンツのサンプルコードもあります。 デモ作ったので、宜しければお好きなデバイスでアクセスして見てください。 Sampleサイト※別窓 iPhoneでアクセス iPhoneでアクセス。 ランドスケープ iPadでアクセス iPad
30 iOS App Icon Designs for iPhone & iPad - DesignM.ag
li > a" data-ddst-label="Navigation Items" data-ddst-no-support="background,border"> li > a" data-ddst-label="Navigation Items" data-ddst-no-support="background,border"> Home Categories Tutorials Resources Inspiration Freelance Interviews Design Freebies About Contact Advertise With Us Write For Us Contact
人気のUIを真似る。Flipboard風iPadアプリモックアップ·FlipView MOONGIFT
FlipViewはFlipboard風のUIを実現するiPadアプリモックアップ。 FlipViewはiPad用のオープンソース・ソフトウェア。iPadやiPhoneアプリでは同じ素材を使っていても見せ方一つで魅力が大きく変わってくる。ただ一覧にするだけでは面白くなく、さらにタップして表示を切り替える際にもアニメーションがあるかないかで印象が変わってくる。 一覧ページ Twitterのストリームの見せ方を電子書籍風にし、インパクトあるものにしてくれるFlipboard、これも見せ方を工夫した面白いアプリの一つだ。そんなFlipboard風の表示を実現しているモックアプリがFlipViewだ。 FlipViewはTwitterのタイムラインを表示しているが、画一的に一覧にしている訳ではない。高さを変えたり、2カラムで並べて表示することで見た目を楽しいものにしている。各ツイートをタップすると拡
iPadアプリ専門のハイクオリティなUIを収集しているダイナミックなギャラリーサイト・Landing Pad
iPadアプリの素敵なインターフェースを専門に 収集しているギャラリーサイト・Landing Pad のご紹介。とってもダイナミックな方法で閲覧 出来るので見てるだけでも楽しいです。クオ リティ重視のようなのでまだ数が多いとは 言えませんが、こういうサイトは覚えておくと 後で困らないですよね。 iPadのアプリを制作しているデベロッパーさんはご覧になってみてはいかがですか。大きな画像なのでイメージもしやすそうです。 Tumblrで作ってるんですねー。１カラムでダイナミックに表示してくれています。どれもクオリティの高いものばかり。 ずらーっと並べてくれてます。 お盆休みだったり、まだ明けたばかりなのでかるーくインスピレーション向上させてみるのも良いのでは。 Landing Pad
タブレット向けタブナビゲーション実装チュートリアル:phpspot開発日誌
Tabbed Navigation: Adding CSS Classes Dynamically | Webdesigntuts タブレット向けタブナビゲーション実装チュートリアル 次のようなタブレットでも押しやすそうなタブナビゲーション実装チュートリアルになっています。 出来上がりをダウンロードすることもできるので活用させていただきましょう。 JavaScriptなんかも使われているみたいです。 関連エントリ iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」 画面をスワイプさせてページ送りができるWordPressプラグイン「iPad Swipe」 iPhone・iPad・Chrome等WebKitベースブラウザのCSS3フォームスタイルテクニック
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
企業・学校向けiOS管理ツール、無料公開
Amazon.com: Online Shopping for Electronics, Apparel, Computers, Books, DVDs & more
iPhone や iPad の画面サイズ早見表 : iPhone プログラミング
iPhoneやiPad等にもWebサイトを最適化するレスポンシブWebデザイン構築に役立つフレームワークやTipsいろいろ
