{"id":5893,"date":"2021-04-29T10:33:22","date_gmt":"2021-04-29T08:33:22","guid":{"rendered":"https:\/\/wordpress.sonova.com\/brand-phonak\/?page_id=5893"},"modified":"2022-03-24T18:18:22","modified_gmt":"2022-03-24T17:18:22","slug":"ph-motion-principles","status":"publish","type":"page","link":"https:\/\/brand.sonova.com\/phonak\/ph-motion-principles\/","title":{"rendered":"PH Motion principles"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Basic elements<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Motion principles<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Elements in motion aim to attract the user’s attention and therefore, they might\u00a0improve the user experience. The motion principles below give you a preview of the look and feel of moving elements and\u00a0an idea of how it can look. The final execution depends on the technical possibilities of the digital application. Further details\u00a0 can be found in the\u00a0<\/span>digital components guideline<\/a>.\u00a0<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"18803-02Loading\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Loading<\/strong><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The motion of loading a website follows the natural loading behavior, where elements move in from below.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t

\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"66945-03SwipeLeft\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Swipe<\/strong><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

This motion indicates a spatial transition of content (e.g image gallery).<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"22087-04PullDown\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Pull down<\/strong><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

This motion\u00a0gives the impression of a rising and falling curtain in order to reveal or hide additional information.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t

\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"50268-05List\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

List<\/strong><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The motion of lists\u00a0confirms hover states and selected items.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t

\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"17264-06Popup\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Pop-up<\/strong><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The background fades in and serves as a canvas for the pop-up window, which moves in from below.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"85632-01Intro\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

App splash-screen<\/strong><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

This motion shows the build up of a splash screen in an\u00a0app. The logo icon fades in on the top\u00a0right corner. The logo\u00a0moves in from below and is positioned in the bottom right corner.\u00a0<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

Basic elements Motion principles Elements in motion aim to attract the user’s attention and therefore, they might\u00a0improve the user experience. … Read more<\/a><\/p>\n","protected":false},"author":11,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"editor_notices":[],"footnotes":""},"folder":[],"class_list":["post-5893","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"\nPH Motion principles - Phonak Brand Platform<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"PH Motion principles - Phonak Brand Platform\" \/>\n<meta property=\"og:description\" content=\"Basic elements Motion principles Elements in motion aim to attract the user’s attention and therefore, they might\u00a0improve the user experience. ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/brand.sonova.com\/phonak\/ph-motion-principles\/\" \/>\n<meta property=\"og:site_name\" content=\"Phonak Brand Platform\" \/>\n<meta property=\"article:modified_time\" content=\"2022-03-24T17:18:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wordpress.sonova.com\/brand-phonak\/wp-content\/uploads\/sites\/28\/2021\/04\/18803-02Loading-1024x795.gif\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/brand.sonova.com\\\/phonak\\\/ph-motion-principles\\\/\",\"url\":\"https:\\\/\\\/brand.sonova.com\\\/phonak\\\/ph-motion-principles\\\/\",\"name\":\"PH Motion principles - Phonak Brand Platform\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/brand.sonova.com\\\/phonak\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/brand.sonova.com\\\/phonak\\\/ph-motion-principles\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/brand.sonova.com\\\/phonak\\\/ph-motion-principles\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wordpress.sonova.com\\\/brand-phonak\\\/wp-content\\\/uploads\\\/sites\\\/28\\\/2021\\\/04\\\/18803-02Loading-1024x795.gif\",\"datePublished\":\"2021-04-29T08:33:22+00:00\",\"dateModified\":\"2022-03-24T17:18:22+00:00\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/brand.sonova.com\\\/phonak\\\/ph-motion-principles\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/brand.sonova.com\\\/phonak\\\/ph-motion-principles\\\/#primaryimage\",\"url\":\"https:\\\/\\\/wordpress.sonova.com\\\/brand-phonak\\\/wp-content\\\/uploads\\\/sites\\\/28\\\/2021\\\/04\\\/18803-02Loading-1024x795.gif\",\"contentUrl\":\"https:\\\/\\\/wordpress.sonova.com\\\/brand-phonak\\\/wp-content\\\/uploads\\\/sites\\\/28\\\/2021\\\/04\\\/18803-02Loading-1024x795.gif\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/brand.sonova.com\\\/phonak\\\/#website\",\"url\":\"https:\\\/\\\/brand.sonova.com\\\/phonak\\\/\",\"name\":\"Phonak Brand Platform\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/brand.sonova.com\\\/phonak\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"PH Motion principles - Phonak Brand Platform","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"PH Motion principles - Phonak Brand Platform","og_description":"Basic elements Motion principles Elements in motion aim to attract the user’s attention and therefore, they might\u00a0improve the user experience. ... Read more","og_url":"https:\/\/brand.sonova.com\/phonak\/ph-motion-principles\/","og_site_name":"Phonak Brand Platform","article_modified_time":"2022-03-24T17:18:22+00:00","og_image":[{"url":"https:\/\/wordpress.sonova.com\/brand-phonak\/wp-content\/uploads\/sites\/28\/2021\/04\/18803-02Loading-1024x795.gif","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/brand.sonova.com\/phonak\/ph-motion-principles\/","url":"https:\/\/brand.sonova.com\/phonak\/ph-motion-principles\/","name":"PH Motion principles - Phonak Brand Platform","isPartOf":{"@id":"https:\/\/brand.sonova.com\/phonak\/#website"},"primaryImageOfPage":{"@id":"https:\/\/brand.sonova.com\/phonak\/ph-motion-principles\/#primaryimage"},"image":{"@id":"https:\/\/brand.sonova.com\/phonak\/ph-motion-principles\/#primaryimage"},"thumbnailUrl":"https:\/\/wordpress.sonova.com\/brand-phonak\/wp-content\/uploads\/sites\/28\/2021\/04\/18803-02Loading-1024x795.gif","datePublished":"2021-04-29T08:33:22+00:00","dateModified":"2022-03-24T17:18:22+00:00","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/brand.sonova.com\/phonak\/ph-motion-principles\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/brand.sonova.com\/phonak\/ph-motion-principles\/#primaryimage","url":"https:\/\/wordpress.sonova.com\/brand-phonak\/wp-content\/uploads\/sites\/28\/2021\/04\/18803-02Loading-1024x795.gif","contentUrl":"https:\/\/wordpress.sonova.com\/brand-phonak\/wp-content\/uploads\/sites\/28\/2021\/04\/18803-02Loading-1024x795.gif"},{"@type":"WebSite","@id":"https:\/\/brand.sonova.com\/phonak\/#website","url":"https:\/\/brand.sonova.com\/phonak\/","name":"Phonak Brand Platform","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/brand.sonova.com\/phonak\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"jetpack_sharing_enabled":true,"distributor_meta":false,"distributor_terms":false,"distributor_media":false,"distributor_original_site_name":"Phonak Brand Platform","distributor_original_site_url":"https:\/\/brand.sonova.com\/phonak","push-errors":false,"_links":{"self":[{"href":"https:\/\/brand.sonova.com\/phonak\/wp-json\/wp\/v2\/pages\/5893","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/brand.sonova.com\/phonak\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/brand.sonova.com\/phonak\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/brand.sonova.com\/phonak\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/brand.sonova.com\/phonak\/wp-json\/wp\/v2\/comments?post=5893"}],"version-history":[{"count":43,"href":"https:\/\/brand.sonova.com\/phonak\/wp-json\/wp\/v2\/pages\/5893\/revisions"}],"predecessor-version":[{"id":10892,"href":"https:\/\/brand.sonova.com\/phonak\/wp-json\/wp\/v2\/pages\/5893\/revisions\/10892"}],"wp:attachment":[{"href":"https:\/\/brand.sonova.com\/phonak\/wp-json\/wp\/v2\/media?parent=5893"}],"wp:term":[{"taxonomy":"folder","embeddable":true,"href":"https:\/\/brand.sonova.com\/phonak\/wp-json\/wp\/v2\/folder?post=5893"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}