[LIVE] How To Build a Magnetic Knob with Arduino & ProtoPie. Register Now.
こんにちは、アプリチームでUIデザイナーをしているtkkwです。 iOS13がリリースされてもう半月ほど経ちましたね、今回はiOS13のデザインの変化をiOS12と比較しながら紹介したいと思います。 1.ダークモード 1-1.アイコン 1-2.フォント 1-3.標準のUIコンポーネント 1-4.配色 2.階層・奥行き 3.コンテキストメニュー 最後に 1.ダークモード iOS13の大きな変化といえばやはりダークモードではないでしょうか。ディスプレイが有機ELの端末だとバッテリーの持ちがよくなる、目の負担が軽減されるなどのメリットがあると言われており、私も作業用端末ではダークモードを利用しています。 公式アプリでは、ダークモードの実装により主にコントラストをとる施策が各所に見られました。 1-1.アイコン WWDC2019で発表されたアイコンフォントSF Symbolsに刷新されています。
iPhone Xが発表されたわけですが、なにこのデザイナー泣かせの変態端末。 iPhoneのUI設計者グレッグ・クリスティが追い出されて、ジョナサン・アイヴがソフトウェア統括となったのが2014年。 iOS7のフラット化あたりから、どんどんとUI設計が置いてけぼりになった感がありましたが・・・ここにきてまたデザイナー泣かせの豪速球が。 ざっくりデザインガイドラインを読んでの、気になったところメモ。 画面サイズ サイズは従来のベースであった4.7インチの375pt x 667ptから、375 x 812ptに。縦方向に145pt追加された。 想定されるインパクト 表示可能な情報量が増える 縦スクロール系コンテンツのコンバージョンが増加 スクロールで隠れるナビゲーションの必要性が低下 画面上部のボタンのコンバージョンが低下 ゲームなどの全画面イラストに、黒枠が出たり、見切れたりする グラフィッ
この文脈では、「編集内容のキャンセル」という処理を続行しても良いかをユーザーに確認しています。続行に同意したい多くのユーザーは直感的に同じ表記の「キャンセル」を押したくなるでしょう。しかしそれでは編集のキャンセルが実行されません。 このキャンセルボタンが意味するのは、「『編集内容をキャンセルする』のキャンセル」なのです。つまり、ユーザーが望み通りに編集内容を破棄するためには、反対側のOKボタンを選ぶべきなのです。このような「キャンセルのキャンセル」は二重否定で意味がややこしくなるので避けなければなりません。 ここで「キャンセルのキャンセル」にならなければ良いということで、次のようにボタン名を変えてみました。 これでもう迷うことは無くなりましたか……？ 私はこの修正は誤りだと判断します。「はい」「いいえ」は結果を予想しにくい表現なので、ダイアログのアクションボタンに用いることはあまり適切では
Most designers today create static mockups to communicate app ideas. But increasingly apps are anything but static, which means as designers we need a better tool for interaction design. Origami is a free toolkit for Quartz Composer—created by the Facebook Design team—that makes interactive design prototyping easy and doesn’t require programming. Quartz Composer is a freely-available Mac OS X appl
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに iOS のヒューマンインターフェースを理解するためにはまず UI 設計の原則を定めた聖典 iOS Human Interface Guidelines を読むことから始めなければなりません。ここにはプラットフォームの特徴からデザインの原則、それぞれの部品が何のためにデザインされたのか、どう利用するのか、iOS を構成する UI の基本指針がまとまっています。 よく、『磨りガラス効果がかっこいい』『アニメーションしておくとイケてる』『ボタンは右配置の方が右手で押しやすい』『流行っているから』……などの観点によって UI の設計が
You’re probably thinking, “I already use Facebook’s and/or Design+Code’s iOS 9 GUI document for Sketch. Why download another one?” Put simply, ours is better. We set out to create a more complete, more up-to-date, more accurate, and more thoughtfully structured iOS UI kit for Illustrator and Sketch. If you use Illustrator, there’s no contest — you won’t find another iOS UI resource remotely close
Copyright © BizReach, Inc. All Right Reserved. ‹#› アプリをゼロからつくるとき、 SketchとProttがいかに便便利利かの話 ~∼アプリ「BizReach」に⾒見見る 企画からデザインまでのワークフロー実例例~∼
こんにちは。デザイナーの権です。 アプリ開発に関わるデザイナーの方々は、仕様とデザインが決まって実装に移る際、どのようにチームでやりとりしていますか？ それぞれの開発体制や状況に合わせて進めていくので、会社によって様々だと思います。弊社でも効率的な開発のために、デザインデータや仕様書、指示書、プロトタイプの準備等、日々試行錯誤しながら最適な方法を探しています。 数ある開発手段の中で今回は、弊社が運営するサービス「iQON」の機能改善やデザインリニューアルに効率的に対応できるよう新たに作成した、デザインガイドラインについてご紹介したいと思います。 デザインガイドライン作成の背景 弊社では1年ほど前からデザイナーが5人に増えたことにより、プラットフォームごとに一人づつオーナーシップをとって制作を進める体制に変更されました。 私も以前は、アプリデザインや広告のデザインなどジャンル関係なく携わって
2015/05/13 ヤフー社内「中級 iOS アプリ開発者」向けに行った講義の資料。Read less
スマホアプリは画面が小さいこともあってデザインをいろいろ試して確認していかなければなりません。そこで使えるのがモックアップ作成ツールなのですが、そのために専用ソフトウェアを購入するのは躊躇してしまう人も多いはずです。そこで今回は使い慣れたPowerPointやKeynoteといったプレゼン作成ソフトウェアを使ってスマホアプリデザインのモックアップが作れるテンプレートやプラグインを提供しているサイトを紹介します。Webサービスとは違って、ダウンロードしてしまえばオフラインでも作成できるのが魅力です。mBaaSお役立ちブログ トップ> ブログ> Tips> PowerPoint/Keynoteでスマホアプリのモックアップを作れるテンプレート/プラグインを一挙紹介！ スマホアプリは画面が小さいこともあってデザインをいろいろ試して確認していかなければなりません。そこで使えるのがモックアップ作成ツー
Few days ago, Apple introduced iPhone 6 Plus. The new iPhone substantially changes the way graphics are rendered on screen. We've made an infographic to demystify this. 320 × 480 375 × 667 414 × 736 320 × 480 750 × 1334 1242 × 2208 1080 × 1920 3.5″ 4.7″ 5.5″ iPhone 6 Plus has screen with lower pixel resolution than the image rendered in previous step. Before the image can be displayed on the scree
iOS/Androidアプリを作る際に理解しておいて欲しい「Model」という役割について説明します。わりと意識していないケースがあるので、チェックしてみてください。
「デザイン = かっこ良くすること」だとは限らない。 デザインとは? 設計 複雑な問題を整理して解決すること わりとエンジニアリングに近い 文章を書く練習をすれば読みやすい文章を掛けるようになるのと同様に、勉強すれば人を困惑させないデザインは作れる。 ヒューマンインターフェースの原則 インターフェース = 接点、境界面、接触面、接合面、仲立ち、橋渡し ヒューマンインターフェース = 人とモノをつなぐもの ヒューマンインターフェースの原則 = アプリがユーザーとコミュニケーションをする時の原則 1.必然性のあるビジュアル 機能と外見が調和しているか？ TPOにあわせた格好をさせる ユーザーとコミュニケーションを取る ドレスコードみたいなもの(例:ゲーム:楽しく、ツール:信頼性ありそうな) 機能に最適な外見を与えることで... 使い方がつたわる。 とっつきやすくなる 2.一貫性 アプリ全体でル
Please ensure you understand and agree with our data protection policy before using this site. FluidUI.com (Fluid UI) uses cookies and saves data on our servers in order to provide the Fluid UI service. This data is gathered in order to provide the relevant functionality for your account. The purpose of this article is to inform you what information we store, when we request it and why we need it.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
