{"id":234366,"date":"2022-03-29T10:45:31","date_gmt":"2022-03-29T10:45:31","guid":{"rendered":"https:\/\/letsbecool.com\/?p=234366"},"modified":"2024-02-24T12:41:32","modified_gmt":"2024-02-24T12:41:32","slug":"3-main-tips-for-app-ui-design","status":"publish","type":"post","link":"https:\/\/letsbecool.com\/tr\/3-main-tips-for-app-ui-design\/","title":{"rendered":"Mobil Uygulama Kullan\u0131c\u0131 Aray\u00fcz\u00fc (UI) Tasar\u0131m\u0131 i\u00e7in 3 \u0130pucu"},"content":{"rendered":"[et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;0px|||||&#8221;][et_pb_row _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;0px|||||&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;0px|||||&#8221;]<p>Kullan\u0131c\u0131 aray\u00fcz\u00fc tasar\u0131m\u0131 ya da UI (User Interface), g\u00fcn\u00fcm\u00fczde hem kullan\u0131c\u0131lar\u0131n hem de tasar\u0131mc\u0131lar\u0131n mobil uygulamalarda ve web sitelerinde s\u0131kl\u0131kla g\u00f6zetti\u011fi bir konu haline geldi. Tasar\u0131mc\u0131lar en yeni UI trendlerini takip edip, tasar\u0131mlar\u0131n\u0131 geli\u015ftirmeye \u00e7al\u0131\u015f\u0131rken, kullan\u0131c\u0131lar\u0131n da bu geli\u015fmeler kar\u015f\u0131s\u0131nda aray\u00fcz tasar\u0131m\u0131ndan beklentileri her ge\u00e7en g\u00fcn de\u011fi\u015fmektedir. Bu sebeple tasar\u0131mc\u0131lar UI ile ilgili en g\u00fcncel trendleri takip etmeli ve \u00f6nemli tasar\u0131m ipu\u00e7lar\u0131n\u0131 g\u00f6zden ka\u00e7\u0131rmamal\u0131d\u0131rlar.<\/p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=&#8221;3_5,2_5&#8243; _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;|auto|-28px|auto||&#8221; custom_padding=&#8221;0px|||||&#8221;][et_pb_column type=&#8221;3_5&#8243; _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221;][et_pb_image src=&#8221;https:\/\/letsbecool.com\/wp-content\/uploads\/2022\/03\/ux-store-ukeUH3KbMWU-unsplash-scaled.jpg&#8221; alt=&#8221;ui-ux-design-book-and-there-is-some-wireframes-for-a-mobile-app&#8221; title_text=&#8221;ux-store-ukeUH3KbMWU-unsplash&#8221; _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;18px|||||&#8221;][\/et_pb_image][\/et_pb_column][et_pb_column type=&#8221;2_5&#8243; _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221;]<h2><strong>UI Tasar\u0131m Nedir?<\/strong><\/h2>\n<p>Kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) tasar\u0131m\u0131, tasar\u0131mc\u0131lar\u0131n cihazlarda aray\u00fczler olu\u015fturmak i\u00e7in g\u00f6r\u00fcn\u00fcm veya stile odaklanarak tasar\u0131mlar\u0131n\u0131 ger\u00e7ekle\u015ftirdikleri s\u00fcre\u00e7tir.Tasar\u0131mc\u0131lar bu s\u00fcre\u00e7te kullan\u0131c\u0131lar\u0131n kullan\u0131m\u0131 kolay ve zevkli bulduklar\u0131 aray\u00fczler olu\u015fturmay\u0131 ama\u00e7lar. Yani UI, g\u00f6rsel tasar\u0131m\u0131 ifade eder ve do\u011frudan kullan\u0131c\u0131n\u0131n duygular\u0131na hitap eder.<\/p>\n<p>Tasar\u0131mc\u0131lar\u0131n ana amac\u0131 kullan\u0131c\u0131lar\u0131n olumlu duygular\u0131na hitap edebilmek, yani onlar\u0131n ihtiya\u00e7lar\u0131n\u0131 en iyi \u015fekilde kar\u015f\u0131layabilmektir. Bunu yaparken de UI tasar\u0131mc\u0131lar\u0131 kullan\u0131c\u0131lar\u0131n bir \u00fcr\u00fcnle yapt\u0131\u011f\u0131 t\u00fcm etkile\u015fimleri ve davran\u0131\u015flar\u0131 ara\u015ft\u0131r\u0131r ve tasar\u0131mlar\u0131n\u0131 bu g\u00f6stergelere dayanarak haz\u0131rlarlar.<\/p>\n<p>\u00d6zellikle teknolojinin geli\u015fmesi ve kullan\u0131lan mobil cihazlar\u0131n art\u0131\u015f\u0131yla birlikte UI tasar\u0131m \u00f6nemini art\u0131rm\u0131\u015ft\u0131r.<\/p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;||4px|||&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;-21px|||||&#8221;]<p>\u00c7\u00fcnk\u00fc art\u0131k benzer i\u015flevlere sahip bir\u00e7ok uygulama bulunmaktad\u0131r ve pazarda ayr\u0131\u015fmak konusunda rekabet g\u00fcn ge\u00e7tik\u00e7e artmaktad\u0131r. Kullan\u0131c\u0131lar tasar\u0131m\u0131n\u0131 ve fonksiyonelli\u011fini uygun bulmad\u0131\u011f\u0131 uygulamalardan h\u0131lz\u0131ca vazge\u00e7ebilmektedir. Bu y\u00fczden rakiplerinin \u00f6n\u00fcne ge\u00e7ebilmek i\u00e7in tasar\u0131mc\u0131lar\u0131n, UI tasar\u0131mla ilgili en son trendleri takip etmeleri ya da tasar\u0131mla ilgili yeni ve ilgi \u00e7ekici yollar ke\u015ffetmeleri gerekmektedir.<\/p>\n<h2><strong>Mobil Uygulama Kullan\u0131c\u0131 Aray\u00fcz\u00fc (UI) Tasar\u0131m\u0131 i\u00e7in 3 \u00d6nemli \u0130pucu<\/strong><\/h2>\n<h3><strong><\/strong><\/h3>\n<h3><strong>\u00a0 \u00a01. Sade ve Basit Ol<\/strong><\/h3>\n<p>Ul tasar\u0131m\u0131n amac\u0131 kullan\u0131c\u0131 ile ba\u011flant\u0131 kurmak ve uygulamay\u0131 kullan\u0131c\u0131 g\u00f6z\u00fcyle haz\u0131rlamakt\u0131r. Bu noktada UI tasar\u0131mc\u0131lar i\u00e7in sadelik ve basitlik olduk\u00e7a \u00f6nemlidir. Aray\u00fcz kafa kar\u0131\u015ft\u0131r\u0131c\u0131 ve belirsiz olmamal\u0131d\u0131r. Tasar\u0131m kullan\u0131c\u0131n\u0131n uygulamayla ilk etkile\u015fime girdi\u011fi andan itibaren basit ve anla\u015f\u0131l\u0131r olmal\u0131d\u0131r.<\/p>\n<p>Sade ve kullan\u0131c\u0131 dostu bir aray\u00fcz\u00fcn en \u00f6nemli bile\u015fenlerinden biri de yaz\u0131 tipidir. Fazla kal\u0131n, italik ya da b\u00fcy\u00fck yaz\u0131 tipleri kullan\u0131c\u0131lar\u0131n g\u00f6z\u00fcn\u00fc yorabilmektedir. Ya da bir uygulamada farkl\u0131 yaz\u0131 tiplerinin kullan\u0131lmas\u0131, kullan\u0131c\u0131n\u0131n kafas\u0131n\u0131 kar\u0131\u015ft\u0131rabilmektedir. Bu sebeple uygulaman\u0131n her a\u015famas\u0131nda yaz\u0131 tipinin tutarl\u0131 ve anla\u015f\u0131labilir olmas\u0131 olduk\u00e7a \u00f6nemlidir.  Ayr\u0131ca \u00e7ok fazla metin kullan\u0131m\u0131ndan da ka\u00e7\u0131n\u0131lmal\u0131d\u0131r. Yo\u011fun ve uzun metinlerin kullan\u0131m\u0131 yerine g\u00f6rsel \u00f6\u011feler kullan\u0131larak, sadelik vurgulanmal\u0131 ve uygulama kullan\u0131c\u0131 i\u00e7in en basit hale getirilmelidir.<\/p>\n<p>Kullan\u0131c\u0131lar\u0131n uygulamalar\u0131n\u0131z\u0131 k\u00fc\u00e7\u00fck ekranlarda g\u00f6r\u00fcnt\u00fcleyece\u011fini ve kullanaca\u011f\u0131n\u0131 unutmay\u0131n. Uygulamada kullan\u0131c\u0131lar\u0131n dikkatini da\u011f\u0131tacak ve uygulamay\u0131 karma\u015f\u0131kla\u015ft\u0131racak \u00e7ok fazla \u00f6\u011fe varsa d\u00f6n\u00fc\u015f\u00fcm oranlar\u0131n\u0131z da ayn\u0131 oranda az olacakt\u0131r.<\/p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=&#8221;1_2,1_2&#8243; _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;4px||0px|||&#8221;][et_pb_column type=&#8221;1_2&#8243; _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;]<h3><b>\u00a0 \u00a02. Buton Yerle\u015fimi ve Boyutuna \u00d6nem Verin<\/b><b><\/b><\/h3>\n<p><span style=\"font-weight: 400;\">UI tasar\u0131mc\u0131lar i\u00e7in bir di\u011fer g\u00f6zden ka\u00e7\u0131r\u0131lmamas\u0131 gerekilen nokta ise butonlar\u0131n yeri ve kullan\u0131lan \u00f6\u011felerin boyutlar\u0131d\u0131r.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Uygulaman\u0131z\u0131 d\u00fc\u015f\u00fcn\u00fcn, e\u011fer siz yaln\u0131zca bir kullan\u0131c\u0131 olsayd\u0131n\u0131z \u00e7\u0131k\u0131\u015f butonu i\u00e7in sa\u011f taraf\u0131 m\u0131 yoksa sol taraf\u0131 m\u0131 kullanmak isterdiniz ya da hepsinden farkl\u0131 olarak sol alt k\u00f6\u015feyi mi? Mobil uygulama standartlar\u0131na g\u00f6re kullan\u0131c\u0131lar\u0131n parma\u011f\u0131 \u00e7\u0131k\u0131\u015f\u0131 ya da geri gitme se\u00e7ene\u011fini ararken hangi tarafa y\u00f6nelirdi?<\/span><span style=\"font-weight: 400;\"><\/span><\/p>[\/et_pb_text][\/et_pb_column][et_pb_column type=&#8221;1_2&#8243; _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221;][et_pb_image src=&#8221;https:\/\/letsbecool.com\/wp-content\/uploads\/2022\/03\/kelly-sikkema-gcHFXsdcmJE-unsplash-scaled.jpg&#8221; _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; alt=&#8221;a-women-is-drawing-spme-wireframes-for-a-mobile-app-design&#8221; title_text=&#8221;kelly-sikkema-gcHFXsdcmJE-unsplash&#8221; sticky_enabled=&#8221;0&#8243;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;3px|||||&#8221;][et_pb_column _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; type=&#8221;4_4&#8243;][et_pb_text _builder_version=&#8221;4.9.4&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243; custom_padding=&#8221;0px|||||&#8221; custom_margin=&#8221;||-208px|||&#8221;]<p>Ayr\u0131ca butonlar\u0131n boyutlar\u0131 da olduk\u00e7a \u00f6nemlidir. Butonlar uygulaman\u0131zla orant\u0131l\u0131 olarak kullan\u0131c\u0131lar\u0131n rahat bir \u015fekilde dokunabilece\u011fi boyutta ve tutarl\u0131 olmal\u0131d\u0131r. Yani, butonlar kullan\u0131c\u0131 taraf\u0131ndan kolayca g\u00f6r\u00fclebilecek ve t\u0131klanabilecek boyutta olmal\u0131d\u0131r. Bunu sa\u011flarken de kullan\u0131c\u0131y\u0131 yormayacak renkler ve boyutlar tercih edilmeli, bo\u015fluklar ve butonlar orant\u0131l\u0131 bir \u015fekilde kullan\u0131lmal\u0131d\u0131r.<\/p>\n<h3><strong>\u00a0 \u00a03. Duyarl\u0131 Tasar\u0131ma (Responsive Design) \u00d6nem Verin<\/strong><\/h3>\n<p>Dikkate al\u0131nmas\u0131 gereken bir di\u011fer \u00f6nemli husus, kullan\u0131c\u0131lar\u0131n tasar\u0131mla \u00e7e\u015fitli \u015fekillerde etkile\u015fime girebilmesidir. Android ak\u0131ll\u0131 telefonlar, iOS ak\u0131ll\u0131 telefonlar, daha b\u00fcy\u00fck ekranlar, daha k\u00fc\u00e7\u00fck ekranlar iPad'ler ve tabletler kullan\u0131c\u0131lar\u0131n uygulaman\u0131z\u0131 kullanaca\u011f\u0131 cihazlardan birka\u00e7\u0131d\u0131r. UI tasar\u0131mc\u0131, tasar\u0131m\u0131n\u0131 t\u00fcm bu cihazlarda e\u015fit ve tutarl\u0131 bir \u015fekilde kullan\u0131yor olmal\u0131d\u0131r. UI tasar\u0131m\u0131n ba\u015far\u0131l\u0131 oldu\u011funu g\u00f6steren en b\u00fcy\u00fck etkenlerden biri duyarl\u0131 tasar\u0131m, yani kullan\u0131c\u0131n\u0131n ayn\u0131 uygulamay\u0131 farkl\u0131 cihazlarda ne \u00f6l\u00e7\u00fcde ayn\u0131 \u015fekilde kullanabildi\u011fidir.\u00a0<\/p>\n<p><em>Bu UI tasar\u0131m ipu\u00e7lar\u0131 UI tasar\u0131mc\u0131lar\u0131n kullan\u0131c\u0131 etkile\u015fimi konusunda en \u00e7ok dikkat etmesi gereken bile\u015fenlerdir. Tabii ki UI tasar\u0131m yaln\u0131zca bu bile\u015fenlerle s\u0131n\u0131rl\u0131 de\u011fildir fakat bu bile\u015fenler UI tasar\u0131m\u0131n yap\u0131 ta\u015flar\u0131 niteli\u011findedir. Bu UI tasar\u0131m ipu\u00e7lar\u0131 tasar\u0131mc\u0131 olarak b\u00fcy\u00fcmenizi sa\u011flayarak ayn\u0131 zamanda kullan\u0131c\u0131lar\u0131n\u0131z\u0131n hayatlar\u0131n\u0131 da kolayla\u015ft\u0131r\u0131r.<\/em><\/p>\n<p>&nbsp;<\/p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]","protected":false},"excerpt":{"rendered":"<p>User interface design or UI (User Interface) has become a hot topic that users and designers often overlook in today&#8217;s mobile applications and websites. While designers are trying to follow the latest UI trends and improve their designs, users&#8217; expectations from interface design are changing day by day in the face of these developments. For [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","inline_featured_image":false,"footnotes":""},"categories":[21,1],"tags":[],"class_list":["post-234366","post","type-post","status-publish","format-standard","hentry","category-article","category-uncategorized"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/letsbecool.com\/tr\/wp-json\/wp\/v2\/posts\/234366","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/letsbecool.com\/tr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/letsbecool.com\/tr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/letsbecool.com\/tr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/letsbecool.com\/tr\/wp-json\/wp\/v2\/comments?post=234366"}],"version-history":[{"count":5,"href":"https:\/\/letsbecool.com\/tr\/wp-json\/wp\/v2\/posts\/234366\/revisions"}],"predecessor-version":[{"id":234376,"href":"https:\/\/letsbecool.com\/tr\/wp-json\/wp\/v2\/posts\/234366\/revisions\/234376"}],"wp:attachment":[{"href":"https:\/\/letsbecool.com\/tr\/wp-json\/wp\/v2\/media?parent=234366"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/letsbecool.com\/tr\/wp-json\/wp\/v2\/categories?post=234366"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/letsbecool.com\/tr\/wp-json\/wp\/v2\/tags?post=234366"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}