{"id":24174,"date":"2011-08-22T10:09:05","date_gmt":"2011-08-22T08:09:05","guid":{"rendered":"http:\/\/www.iphone-ticker.de\/?p=24174"},"modified":"2011-08-22T10:13:25","modified_gmt":"2011-08-22T08:13:25","slug":"der-4-pixel-rhythmus-eine-neue-maseinheit-zur-interface-gestaltung","status":"publish","type":"post","link":"https:\/\/www.iphone-ticker.de\/der-4-pixel-rhythmus-eine-neue-maseinheit-zur-interface-gestaltung-24174\/","title":{"rendered":"Der 4-Pixel Rhythmus im iOS: Eine neue Ma\u00dfeinheit zur Interface-Gestaltung"},"content":{"rendered":"<p>iPhone-Entwickler die derzeit an ihren Benutzeroberfl\u00e4chen schrauben, haben, vor allem wenn es um die Gestaltung der Eingabe-Elemente geht, vor allem eine Zahl im Hinterkopf: Den 44-Pixel Block. <\/p>\n<p>Folgt man Apples &#8222;Human Interface Guidelines&#8220; (<a href=\"http:\/\/developer.apple.com\/library\/ios\/documentation\/userexperience\/conceptual\/mobilehig\/MobileHIG.pdf\">PDF<\/a>), sollten alle Kn\u00f6pfe, Schieberegler, Buttons und Auswahl-Elemente mindestens 44px x 44px messen, um so ein komfortables Antippen des ausgew\u00e4hlten Blocks zu erm\u00f6glichen. Kleinere Kn\u00f6pfe lassen sich mit dem Zeigefinger nur unzureichend treffen, gr\u00f6\u00dfere wirken wie ein Schluckauf im sonst so einheitlichen Erscheinungsbild der meisten iPhone-Anwendungen. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.iphone-ticker.de\/wp-content\/uploads\/2011\/08\/44pixelschmixel.jpg\" alt=\"\" title=\"44pixelschmixel\" width=\"464\" height=\"236\" class=\"aligncenter size-full wp-image-24178\" srcset=\"https:\/\/images.iphone-ticker.de\/wp-content\/uploads\/2011\/08\/44pixelschmixel.jpg 464w, https:\/\/images.iphone-ticker.de\/wp-content\/uploads\/2011\/08\/44pixelschmixel-300x152.jpg 300w\" sizes=\"auto, (max-width: 464px) 100vw, 464px\" \/><\/p>\n<p>iOS-Entwickler Aen Tan hat sich der 44px-Logik jetzt in dem ausf\u00fchrlichen Essay &#8222;<a href=\"http:\/\/aentan.com\/design\/new-visual-proportions-for-the-ios-user-interface\/\">New Visual Proportions for the iOS User Interface<\/a>&#8220; angenommen und kritisiert das bislang wenig hinterfragte UI-Modell scharf. <\/p>\n<p>Entwickler die Apples 44-Pixel-Schema implementieren, w\u00fcrden zu oft auf Kompromisse bei der Interface-Gestaltung setzen. Anstatt ihre Bildschirme aus kleineren Teilmengen des Daumen-gro\u00dfen Abstands aufzubauen, kommt \u00fcblicherweise die 20px hohe Statusbar zum Einsatz, 29px gro\u00dfe Button zur Navigation und 49px hohe Tab-Bar-Elemente wie etwa in der Musik-Applikation w\u00fcrden regelm\u00e4\u00dfig verbaut. <\/p>\n<p><!--more--><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.iphone-ticker.de\/wp-content\/uploads\/2011\/08\/4pixelrhythmo.jpg\" alt=\"\" title=\"4pixelrhythmo\" width=\"464\" height=\"305\" class=\"aligncenter size-full wp-image-24176\" srcset=\"https:\/\/images.iphone-ticker.de\/wp-content\/uploads\/2011\/08\/4pixelrhythmo.jpg 464w, https:\/\/images.iphone-ticker.de\/wp-content\/uploads\/2011\/08\/4pixelrhythmo-300x197.jpg 300w\" sizes=\"auto, (max-width: 464px) 100vw, 464px\" \/><\/p>\n<p>Eine Unsitte, gegen die Aen Tan mit dem 4-Pixel Rhythmus nun das passende Rezept gefunden zu haben scheint. Gliedert man das iPhone interface in kleine Bl\u00f6cke von 4px x 4px lassen sich die Bedienelemente auf dem ganzen iPhone-Bildschirm in Gruppen von 4, 8, 16 und 32 Pixeln H\u00f6he anlegen.<\/p>\n<blockquote><p>So you see as Apple added more and more fea\u00adtures with\u00adout recon\u00adsid\u00ader\u00ading the lay\u00adout, the visual integrity barely holds itself together with com\u00adpro\u00admises and arbi\u00adtrari\u00adness. [&#8230;] I recently exper\u00adi\u00admented with an alter\u00adnate approach in design\u00ading the UI for Lik\u00adables for iPhone, with a 4-pixel rhythm. No major no minor. Just 4 pix\u00adels as a basic inter\u00adval unit. [&#8230;] The beauty of using a 4-pixel rhythm is that lit\u00adtle change is needed to mod\u00adify cur\u00adrent native ele\u00adments into the new pro\u00adpor\u00adtions. The sta\u00adtus bar can remain as 20-pixel tall. The height of but\u00adtons can be bumped from 30 to 32 pix\u00adels. The tab bar can drop a pixel to 48-pixels tall. The nav\u00adi\u00adga\u00adtion bar with prompt can be 72-pixels tall instead of 74.<\/p><\/blockquote>\n<p>Ein ausgesprochener Lese-Tipp. <\/p>\n","protected":false},"excerpt":{"rendered":"<a href=\"https:\/\/www.iphone-ticker.de\/der-4-pixel-rhythmus-eine-neue-maseinheit-zur-interface-gestaltung-24174\/\"><img width=\"150\" height=\"150\" src=\"https:\/\/images.iphone-ticker.de\/wp-content\/uploads\/2011\/08\/44pixelschmixel-150x150.jpg\" class=\"alignright tfe wp-post-image\" alt=\"\" decoding=\"async\" loading=\"lazy\" \/><\/a><p>iPhone-Entwickler die derzeit an ihren Benutzeroberfl\u00e4chen schrauben, haben, vor allem wenn es um die Gestaltung der Eingabe-Elemente geht, vor allem eine Zahl im Hinterkopf: Den 44-Pixel Block. Folgt man Apples &#8222;Human Interface Guidelines&#8220; (PDF), sollten alle Kn\u00f6pfe, Schieberegler, Buttons und Auswahl-Elemente mindestens 44px x 44px messen, um so ein komfortables Antippen des ausgew\u00e4hlten Blocks zu [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":24178,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[88],"tags":[78,3917,5661],"class_list":["post-24174","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-entwickler","tag-design","tag-entwickler","tag-ios"],"aioseo_notices":[],"rest_api_enabler":[],"_links":{"self":[{"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/posts\/24174","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/comments?post=24174"}],"version-history":[{"count":5,"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/posts\/24174\/revisions"}],"predecessor-version":[{"id":24182,"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/posts\/24174\/revisions\/24182"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/media\/24178"}],"wp:attachment":[{"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/media?parent=24174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/categories?post=24174"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/tags?post=24174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}