{"id":2946,"date":"2014-05-30T16:16:50","date_gmt":"2014-05-30T16:16:50","guid":{"rendered":"http:\/\/webninjataylor.com\/library\/?p=2946"},"modified":"2014-06-18T17:11:47","modified_gmt":"2014-06-18T17:11:47","slug":"designing-for-ios","status":"publish","type":"post","link":"https:\/\/webninjataylor.com\/library\/designing-for-ios\/","title":{"rendered":"Designing for iOS and Android"},"content":{"rendered":"<h2>iOS Notes<\/h2>\n<p>From Apple&#8217;s <a href=\"https:\/\/developer.apple.com\/library\/ios\/documentation\/userexperience\/conceptual\/mobilehig\/MobileHIG.pdf\" target=\"_blank\">iOS Human Interface\u00a0Guidelines<\/a>)&#8230;<\/p>\n<ul>\n<li>Defer to content\n<ul>\n<li>Take advantage of the whole screen<\/li>\n<li>Reconsider visual indicators of physicality and realism<\/li>\n<li>Let translucent UI elements hint at the content behind them<\/li>\n<\/ul>\n<\/li>\n<li>Provide clarity\n<ul>\n<li>Use plenty of negative space<\/li>\n<li>Let color simplify the UI<\/li>\n<li>Ensure legibility by using the system fonts<\/li>\n<li>Embrace borderless buttons<\/li>\n<\/ul>\n<\/li>\n<li>Use Depth to Communicate\n<ul>\n<li>Enhanced transitions to give users a sense of\u00a0hierarchy and depth<\/li>\n<\/ul>\n<\/li>\n<li>iOS App Anatomy\n<ul>\n<li>Four main categories: bars, content views, controls, and temporary views<\/li>\n<\/ul>\n<\/li>\n<li>UIKit defines UI objects and objects that implement functionality, such as gesture\u00a0recognition, drawing, accessibility, and printing support<\/li>\n<li>A UI element is considered to be a type of view<\/li>\n<li>To manage a set or hierarchy of views in your app, you typically use a view controller<\/li>\n<li>A screen generally corresponds to a distinct visual state or mode<\/li>\n<li>Start instantly with useful content (avoid splash screens) because people spend no more than a minute or two evaluating a new app<\/li>\n<li>Avoid asking people to supply setup information<\/li>\n<li>Delay a login requirement for as long as possible<\/li>\n<li>Think carefully before providing an onboarding experience<\/li>\n<li>In general, launch in the device\u2019s default orientation. On iPhone, the default orientation is portrait; on iPad,\u00a0it\u2019s the current device orientation. If your app runs only in landscape orientation, you should always launch in\u00a0landscape and let users rotate the device if necessary<\/li>\n<li>Supply a launch image that closely resembles the first screen of the app<\/li>\n<li>When your app restarts, restore its state so users can continue where they left off<\/li>\n<li>Save user data as soon as possible and as often as reasonable<\/li>\n<li>Save the current state when stopping at the finest level of detail possible<\/li>\n<li>Never quit an iOS app programmatically. People tend to interpret this as a crash.\n<ul>\n<li>If all app features are unavailable, display a screen that\u00a0describes the situation and suggests a correction<\/li>\n<li>If only some app features are unavailable, display either a\u00a0screen or an alert when people try to use the feature<\/li>\n<\/ul>\n<\/li>\n<li>Layout\n<ul>\n<li>Make it easy for people to interact with content and controls by giving each interactive element ample\u00a0spacing. <strong>Give tappable controls a hit target of about 44 x 44 points.<\/strong><\/li>\n<li>Be prepared for changes in text size. Users expect most apps to respond appropriately when they choose a\u00a0different text size in Settings.<\/li>\n<\/ul>\n<\/li>\n<li>Users should always know where they are in your app and how to get to their next destination<\/li>\n<li>Users Know the Standard Gestures\n<ul>\n<li>Tap, drag, flick, swipe, double tap, pinch, touch and hold, and shake<\/li>\n<\/ul>\n<\/li>\n<li>As much as possible, integrate status and other relevant feedback information into your UI<\/li>\n<li>Make it easy for users to make choices. For example, you can use a picker or a table view instead of a text\u00a0field, because most people find it easier to select an item from a list than to type words.<\/li>\n<li>Don\u2019t take space away from the content people care about<\/li>\n<li>Resist the temptation to display your logo throughout the app<\/li>\n<li>In general, use a single font throughout your app<\/li>\n<li>Every app needs a beautiful app icon. It\u2019s not unusual for people to base their initial opinions about your app\u2019s\u00a0quality, purpose, and reliability solely on the look of your app icon.<\/li>\n<li>It\u2019s a good idea to use the built-in icons as much as possible because users\u00a0already know what they mean.<\/li>\n<li>Support the Retina display. Make sure that you supply @2x assets for all artwork and graphics in your app.<\/li>\n<\/ul>\n<h2>Android Notes<\/h2>\n<ul>\n<li><a href=\"https:\/\/developer.android.com\/design\/style\/metrics-grids.html\" target=\"_blank\">Metrics &amp; grids<\/a><\/li>\n<li><a href=\"https:\/\/developer.android.com\/design\/style\/iconography.html\" target=\"_blank\">Iconography<\/a><\/li>\n<li>As you build your app for Android, don&#8217;t carry over themed UI elements from other platforms and don&#8217;t mimic their specific behaviors<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>iOS Notes From Apple&#8217;s iOS Human Interface\u00a0Guidelines)&#8230; Defer to content Take advantage of the whole screen Reconsider visual indicators of physicality and realism Let translucent UI elements hint at the content behind them Provide clarity Use plenty of negative space Let color simplify the UI Ensure legibility by using the system fonts Embrace borderless buttons [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[144],"tags":[145],"class_list":["post-2946","post","type-post","status-publish","format-standard","hentry","category-web-shots","tag-mobile"],"_links":{"self":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/2946","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/comments?post=2946"}],"version-history":[{"count":15,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/2946\/revisions"}],"predecessor-version":[{"id":3099,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/2946\/revisions\/3099"}],"wp:attachment":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/media?parent=2946"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/categories?post=2946"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/tags?post=2946"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}