Not
Bu sayfaya erişim yetkilendirme gerektiriyor. Oturum açmayı veya dizinleri değiştirmeyi deneyebilirsiniz.
Bu sayfaya erişim yetkilendirme gerektiriyor. Dizinleri değiştirmeyi deneyebilirsiniz.
Bu Power Platform İyi Mimarlı Deneyim Optimizasyonu denetim listesi önerisi için geçerlidir:
| XO:06 | Ekran boyutları ve çözümler arasında kullanılabilir ve görsel olarak çekici bir sayfa düzeni sağlama. İçeriği çeşitli şekillerde dinamik olarak oluşturmak için uyarlamalı teknikler kullanın. |
|---|
Bu kılavuzda, çeşitli cihazlarda akıcı şekilde gezinmesi ve uyarlanması kolay ekran düzenleri tasarlama önerileri açıklanmaktadır. Bu yaklaşım, kullanıcıların kullandığı cihaza bakılmaksızın tutarlı ve en iyi görüntüleme deneyimine sahip olmasını sağlar.
Tanımlar
| Terim | Açıklama |
|---|---|
| Görünüm penceresi | Dijital arabirimin içeriğin görüntülendiği web tarayıcısı veya mobil uygulama gibi görünür bölümü. Görünüm penceresi aralıkları genellikle ekran boyutlarına ve çözümlere göre cihaz sınıflarıyla (mobil, tablet ve masaüstü) ilişkilendirilir. |
| Kesme noktaları | Uyarlamalı düzen davranışını belirlemek için kullanılan görünüm noktası aralıklarını tanımlayan belirli piksel değerleri. |
Temel tasarım stratejileri
Yanıt veren düzenler farklı pencere boyutlarıyla esnek ve verimli bir kullanıcı deneyimi sunar. İçeriği ölçekleyerek, öğeleri yeniden düzenleyerek ve metni ve görüntüleri seçerek görüntüleyerek uyarlar. Sorumlu düzenler, ekran boyutlarına bakılmaksızın kullanıcıların gereksinimlerini karşılar.
Tutarlı bir uygulama çerçevesi belirleme
Uygulama çerçevesi her ekranda tutarlı şekilde kullanılabilen bir dizi kontrolden oluşur. Üç ana alt bileşenden oluşur: bir başlık, gezinti ve bir içerik bölgesi. Basit uygulamalar başlık bileşenini kullanma esnekliğine sahipken, daha gelişmiş uygulamalar genellikle birden çok sayfayı etkinleştirmek için kenar gezinmeden yararlanır. Alt bileşenler özelleştirilebilir. Örneğin, genel bir aramayı, uygulamanızın gereksinimlerine uyacak şekilde yan gezintideki başlıkta veya grup öğelerinde birleştirebilirsiniz.
Uygulama çerçevesinin üç ana alt bileşeni:
Başlık, her dahili uygulamanın bir parçası olmak üzere tasarlanmış temel bir bileşendir. Kullanıcılara sistem çapındaki işlevlere erişim sağlayan, kullanıcı arabirimine alışmalarına yardımcı olan ve deneyimler arasında tutarlılık sağlayan alt bileşenlerden oluşur. Uygulama çerçevesinin üst kısmında görünür ve uygulamanın tüm sayfalarında kalır. İsteğe bağlı olarak arama, ayarlar, bildirimler, geri bildirim, profil veya yardım gibi genel komutları barındırabilir. Uygulamanın adı her zaman gösterilmelidir, bu da ideal olarak giriş veya giriş sayfasına tıklanabilir bir bağlantı görevi görür. Başlık, 600 piksel ve altındaki görünümportlarında taşma denetimine taşınan komutlarla yanıtlanmalıdır. Arama girişi genişliği de 1023 piksel ve altında yanıt veriyor.
Gezinti, kullanıcıların bilgileri bulmasına ve görevleri tamamlamasına yardımcı olmak için birlikte çalışan bir denetim sistemidir. Kullanıcıların bir uygulamanın bölümünden bölümüne atlamalarına yardımcı olur. Hiyerarşik olarak, herhangi bir sayfaya veya bölüme eklenmez, ancak diğer içeriğin üstünde vardır. Sayfa içeriği için ek alan boşaltmak için her zaman mevcut olup daraltılmış duruma (raylı durum da denir) en aza indirgenebilir. Daha küçük pencere boyutlarıyla, açılır bir menüyle simge durumuna küçültülebilir. En yaygın gezinme biçimleri arasında üst gezinme ve yan gezinme bulunur. İkisini aynı anda kullanmayın.
İçerik bölgesi ekranın odağını içerir. Tarayıcı penceresinin boyutu içerik çerçevesini ve ana içerik bölgesindeki alanı etkiler. Bu çerçeve, kesme noktasına ve her bileşenin karşılık gelen yanıt davranışına göre uyarılır. Kesme noktası matrisi oluşturma bölümünde daha fazla bilgi edinin.
İçerik bölgesi isteğe bağlı olarak, sayfa üstbilgisi, satır içi yan bölmeler veya içeriğin yer paylaşımını sağlayan paneller gibi tutarlı öğe yerleşimi için kullanılabilen birkaç alt bölge içerebilir.
Tutarlı bir tasarım diline (renk şemaları, tipografi ve düzen yapısı) bağlı olmak, kullanıcıların karışıklık olmadan çeşitli öğeleri hızla tanımasına ve bunlarla etkileşim kurmasına yardımcı olur. Tüm dahili iş uygulamalarında tutarlı bir uygulama çerçevesi deseni ne kadar tutarlı bir şekilde kullanılırsa kullanıcının geri hatırlaması veya zihinsel modeli o kadar güçlü hale gelir. Endüstri standartlarına veya ortak platform modellerine uyumlu hale bu etkiyi daha da geliştirir.
Uygulama çerçevesi belirlendikten sonra her ekranın düzeni uygulama çerçevesinin içerik alanında bulunur.
İçerik bölgesini düşünceli bir şekilde kullanma
Kullanıcılar, bilgilerin kolayca erişilebildiği, metnin kolay okunduğu ve estetiğin kullanılabilirliği engellediği sorunsuz deneyimlere sahip. Temel bilgilerin ilk görünürlüğünü önceliklendirin, sütunlar arasında okunabilirliği sağlayın ve estetik çekicilik için tasarım öğelerini önceliklendirin.
Kaydırmaya gerek kalmadan ekranı açarken gerekli bilgilerin anında görünür olduğundan emin olun. Ekranın en üstüne yakın gezinti seçenekleri, kritik içerik ve eyleme geçilebilir öğeler gibi temel bilgilerin görüntülenmesini önceliklendirin. Yeterli öğeleri görüntüleme ile her öğe için ayrıntılı bilgi sağlama arasındaki dengeyi aşmak çok güç bir iştir. Buna karşılık, tüm olası bilgileri ilk görünümde sağlamak teşvik edici olabilirken, kullanıcıları bunaltırmak ve anahtar öğelerin önemini sulandırmak için çok fazla bilgi riskleri vardır. Daha ayrıntılı içeriğe ilişkin bir bakış sunan ve kullanıcıları daha derine inmeye özendiren kısa özetler veya önizlemeler kullanmayı düşünün. Panolar, büyük miktarda veriyi görselleştirmek için bu amaca hizmet verecek şekilde iyileştirilmiştir.
İçeriği mantıksal olarak düzenlemek ve alanı en üst düzeye çıkarmak için birden çok sütun, bölüm veya gruplandırma ekleyin. Sütun genişliğine çok dikkatli dikkat ederek, metnin aşırı zorlama olmadan okunak kalmasını sağlar. Kullanıcıları yatay olarak sürekli kaydırmaya zorlayan ve etkileşim akışını bozan sütunları fazla daraltmaktan kaçının. Buna karşılık, aşırı geniş sütunlar okunabilirliği engelleyebilir ve kullanıcıların genişletilmiş mesafelerde satırları izlemesini gerektirir. Mevcut alanı verimli bir şekilde kullanırken, rahat okuma yapabilen bir denge için çaba gösterin.
Görsel olarak hoş ve dengeli bir arayüz oluşturmak için görsel öğeleri uygun şekilde boyutlandırıp konumlandırabilirsiniz. Altyazıları ilgili görsellerle veya başlıklarla hizalayın, öğeler arasında tutarlı açıklık sağlar ve kullanıcı gereksinimlerine göre bir hiyerarşiye bağlı kalın. Gereksiz başkaldırmaları düzeltin ve pikselleri en önemli öğelere hayali olarak ayırın. Özellikle gezinti ağırlıklı uygulamalarda veya giriş sayfalarında içerik ve gezinti öğelerini önceliklendirin ve vurgulayıp kullanılabilirlikten kaçınan gereksiz süs eşyasından kaçının.
Altta bulunan bir ızgara, öğeleri tutarlı şekilde düzenlemek için kullanışlı olabilir. Seçilen ızgara davranışı, uygulamadaki her ekranın içerik bölgesinde tutarlı olmalıdır ve bileşen düzeyinde de (kart veya yan bölmeler gibi) uygulanabilir. Web uygulamalarında kullanılan en yaygın ızgara düzeni türü sütun ızgaradır. Yanıt veren ekranların uygulanması için sıvı (veya uzatma) ızgara davranışı önerilir.
Oluşturulmuş düzenler ve gruplandırma desenleri kullanma
Kullanıcı arabiriminde içerik ve öğeleri düzenlemek için yaygın olarak tanınan yapı ve anlaşmalar kullanın. Bu düzenler ve desenler, zaman içinde etkili şekilde iyileştirilmiş ve kanıtlanmış olup, kullanıcılara tanıdık ve sezgisel sunarken, uyarlamalı desenlerin uygulanmasını da kolaylaştırmıştır. Temel senaryolar ve öğeler tanımlandıktan sonra, her biri en iyi etkileşimi sağlayan kurulmuş bir düzen ile eşleyin. Görevin tamamlanmasında önemli olan içeriği ve özellikleri önceliklendirin. Ekranda her zaman görünür ve erişilebilir olması gereken, diğer menüler veya eylemler aracılığıyla hangi öğelerin gizlenebileceğine veya erişilebileceğine karar verin.
Aşağıdaki listede, çok zahmetli olmasa da iş veya üretkenlik uygulamaları için yaygın olarak kullanılan oluşturulmuş düzenler açıklanmaktadır. Tüm bunlar ana içerik bölgesinde yapılabilir.
Giriş/Ana ekranı
Açılış ekranı veya ana ekran, uygulamaya giriş noktası görevi görerek kullanıcılara uygulamanın sundukları veya özellikleri hakkında genel bir bakış sağlar. Bu genellikle, ziyaretçilerin dikkatini çekmeyi amaçlar ve ilk defa yapılan bir görevi tamamlama veya daha fazla içeriği keşfetme gibi belirli bir eylemi gerçekleştirmeyi teşvik eder. Genellikle kahraman görüntüleri ve temiz gezinti seçeneklerini içerir.
Temel işlevlere, gezinti seçeneklerine veya eylem çağrılarına hızlı erişim sağlayan ve uygulama deneyimi için ton ayarlayan karşılama için idealdir. Kullanıcılara etkili bir şekilde yol göstermek için, netlik, kabalık ve sezgisel gezinti önceliklerini belirleyin.
Pano
Pano, kullanıcılara ilgili verilere veya bilgilere kapsamlı bir genel bakış sunan bir uygulama içindeki merkezi merkezdir. Genellikle özelleştirilebilir arabirim öğelerinden veya modüllerden oluşur ve bu sayede kullanıcıların belirli ölçümleri izlemesine veya eylemler gerçekleştirmesine olanak sağlar.
Panolar, kullanıcıların ilerlemeyi izlemesine, eğilimleri çözümlemesine ve bir bakışta bilgili kararlar vermesine olanak tanıyacak şekilde karmaşık veri kümelerine veya çok yönlü işlevlere sahip uygulamalar için uygundur. Analiz platformları, proje yönetimi araçları ve finansal yönetim uygulamalarında özellikle kullanışlıdır.
Şekil
Bir form, kullanıcıların veri girişlerini sağlayan ve genellikle metin, sayı, tarih ve seçim gibi çeşitli bilgi türlerinin girilmesinde kullanılan alanlardan oluşan yapılandırılmış bir düzendir. Formlar kullanıcı girdilerini toplamak, işlemleri işlemek ve uygulamalar içindeki etkileşimleri kolaylaştırmak için gereklidir.
Bunlar genellikle kayıt akışları, ödeme işlemleri, veri giriş görevleri ve kullanıcı girişi veya geri bildirimi gerektiren herhangi bir senaryoda kullanılır.
Varlık/Profil görünümü
Varlık veya profil görünümü, belirli bir varlıkla ilgili kullanıcı profili, ürün listesi veya içerik öğesi gibi ayrıntılı bilgiler sunar. Genellikle açıklayıcı metin, multimedya öğeleri ve ilgili eylemler ya da etkileşimler içerir.
Uygulama içindeki öğelerle ilgili ayrıntılı bilgileri göstermek için oldukça uygundurlar. Kullanıcılara ayrıntılı öngörüler sunar, karar vermeyi kolaylaştırır ve sosyal ağ uygulamalarında bulunan kullanıcı profilleri veya e-ticaret platformlarındaki ürün ilanları gibi belirli varlıklarla katılımı destekler.
Liste sayfası
Liste veya tablo, öğe veya varlık koleksiyonunu genellikle doğrusal veya ızgara düzeninde sunulan, yapılandırılmış bir biçimde görüntüler. Genel olarak tarama ve filtrelemeye yönelik gezinme denetimlerinin yanı sıra, her öğenin kısa özetlerini veya önizlemelerini de içerir.
Liste sayfaları, büyük içerik veya veri kümelerini sindirilebilir bir biçimde sunmak ve kullanıcıların etkili şekilde tarama yapmasını, aramasını ve gezinmesini sağlamak için geçerlidir. Belirli satırlardaki eylemler etkinse, işlem net olmalıdır. Liste sayfaları genellikle içerik yönetimi sistemlerinde, dizin listelerinde, arama sonuçlarında ve haber akışlarında kullanılır.
Mini inceleme (bölünmüş ekran)
Mini inceleme veya ayrık ekran, arabirimi, sol tarafta bir liste ve sağ tarafında bir öğe görünümü görüntülenecek şekilde iki farklı bölüme böler. Liste genellikle öğeler koleksiyonunu içerirken öğe görünümü listeden seçilen öğe hakkında ayrıntılı bilgiler sağlar.
Bu düzen, özellikle kullanıcıların bir öğe listesine hızlı bir şekilde göz atması ve toplu işlemler gerçekleştirme gibi her bir öğeyle ilgili ayrıntılı bilgileri aynı anda görüntülemesi gereken senaryolarda etkili olur. Ürün katalogları, belge yönetimi sistemleri, e-posta veya iletişim istemcileri ve görev yönetimi araçları (örneğin Azure Dev Ops sorgu görüntüleyicisi), normalde bu desene uyan senaryolardır.
Sihirbaz
Sihirbaz, karmaşık bir işlemi tamamlamaları veya belirli bir hedefe ulaşmaları için kullanıcılara, genellikle doğrusal bir biçimde, sıralı adımlar veya görevler dizisi boyunca yol gösterir. Genellikle ilerleme göstergelerini, istemleri ve doğrulama denetimlerini içerir. Sihirbazlar karmaşık süreçleri basitleştirmek, zihinsel aşırı yükü azaltmak ve yabancı görevler veya iş akışları aracılığıyla kullanıcılara rehberlik etme konusunda başarısız olur. Bunlar genellikle katılma akışlarında, kurulum işlemlerinde, çok adımlı formlarda ve karmaşık ayarları veya işlemleri yapılandırma gibi görev tabanlı etkileşimlerde kullanılır.
Belirli gereksinimlere uyacak şekilde standart düzeni oluşturun. Bu süreç, öğe ekleme veya kaldırmayı, öğelerin boyutunu ve konumunu ayarlamayı ve marka kimliğine veya görsel tasarım kılavuzlarına uyacak şekilde stil eklemeyi içerebilir. İçerik ve genel kullanıcı deneyimi için en etkili düzenlemeyi bulmak için standart düzenin farklı yapılandırmaları ve çeşitli kullanımları üzerinde denemeler yapın.
Tüm aygıtlar için tasarım düzenleri
Düzenler, tanımlanan kuralların ve içeriklerin bilerek düzenlenmesinin doruk noktasıdır. İçeriğinizi düşünceli yapılara getirmek çok önemlidir, ancak platformlar ve ekran boyutları arasında tüm bunların net bir hiyerarşiyle birlikte akışını sağlama, ölçeklendirilme mantığı gerektirir. Bireysel olarak, uyarlamalı ve yanıtlayıcı tasarım bu güçlüklerin her birini ele alabilir. Bazı durumlarda, uyarlamalı ve yanıtlayıcı bir tasarım karışımı doğru seçimdir.
Yanıt veren tasarım, içeriğin akıcı olduğu ve değişen biçim boyutuna uyarlanabilir olduğu tek bir düzen kullanır. Bu tasarım tekniği, belirli bir aygıtın özelliklerini denetlemek ve uygun şekilde içerik işlemek için medya sorgularını kullanır. Yanıt veren tasarım bir özellik oluşturmanıza ve bu özelliği tüm ekran boyutları boyunca etkili bir şekilde işleve sahip olmanıza olanak tanır.
Uyarlamalı bir düzen, burada sunulan biçime göre tamamen değişir. Uyarlamalı tasarım, birden çok sabit düzen boyutuna sahiptir ve tarayıcıyı mevcut alana göre belirli bir düzeni yüklemeleri için tetikler. Uyarlamalı tasarıma sahip web siteleri, yanıt veren tasarıma benzer breakpoint'leri algılamak için medya sorgularını kullanır. Ayrıca cihazın özelliklerine göre ek biçimlendirme de kullanırlar. Bu işlem "aşamalı geliştirme" olarak bilinir.
Yeniden konumlandırma
Sayfa elemanlarının konumunu değiştirin.
Pencere boyutu arttıkça bileşimi en iyi duruma getirerek içeriğinizi düzenli, okunabilir ve dengeli tutun. Örneğin, bir mobil görünüm penceresinde dikey olarak yığılmış öğeler, daha büyük görünüm pencerelerinde yatay olarak yeniden konumlandırılabilir. Bu değişiklik, doğal soldan sağa okuma düzenini izler, tasarımda denge oluşturur ve sayfadaki temel öğelere görsel olarak odaklanmasını sağlar.
Yeniden boyutlandır
Sayfa öğelerinin boyutunu ve kenar boşluklarını ayarlayın.
Sayfa öğelerini pencerenin en üstünde daha fazla içerik görüntüleyerek dikey kaydırma gereğini azaltarak zengin bir kullanıcı deneyimi için en iyi duruma getirmek üzere yeniden boyutlandırın. Sayfa kenarlarını, boşluk eklemek ve düzeni dengelemek için ayarlayın; bu da içeriğin nefes almasını sağlar ve tasarımın görsel çekiciliğini artırır. Örneğin, bir kahraman bileşeni, arka plan görüntüsünü daha fazla göstermek için pencerenin tüm genişliğine kadar uzatabilir. Görüntü altındaki içerik genişletilebilir, ancak düzene çeşitli eklemek için farklı kenar boşlukları kullanabilir ve görsel hiyerarşi tanımlamaya yardımcı olur.
Dinamik Düzenleme
Sayfa öğelerinin akışını en iyi duruma getirme.
İçeriği yeniden düzenleyerek, pencere boyutunu ve yönünü dikkate alarak sayfa öğelerinin tam olarak görüntülenmesini sağlayın. Örneğin, daha küçük bir pencerede bulunan tek bir içerik sütunu, iki metin sütunu görüntülemek için daha büyük bir pencerede yeniden taşabilir. Bu teknik, daha fazla içeriğin "kat üzerinde" görüntülenmesini sağlar.
Göster/gizle
İçeriği pencere boyutu ve yönlendirmesi için en iyi duruma getirme.
Pencere boyutuna yönelik içeriği ve yönlendirmesini en iyi duruma getirmek için sayfa öğelerini gösterin veya gizleyin. Bu yanıt verme tekniği, bilgi miktarını görüntüleme bağlamı için uyarlar. Örneğin, küçük bir ekranda görünen kategoriler görüntü, başlık ve bağlantı gibi sınırlı meta verileri görüntüleyebilir, böylece kullanıcının odaklanmasına yardımcı olacak diğer bilgiler görünür hale gelir. Daha büyük bir ekranda, kategoriler kişi, tarih ve kısa açıklama gibi ek meta verileri görüntüleyebilirken, yine de görünüm bağlantısı içinden donatımlar yapabilir.
Yeniden mimari oluşturma
Önemli bilgilere ve eylemlere odaklanmak için sayfa öğeleri ve içeriğini çatallandırın veya daraltın.
Bu yaklaşım, tasarımınızda "aşamalı açıklama" uygulamasına benzer, ancak farklı pencere boyutları ve yönlendirmeler için. Örneğin, pencereyi genişletmek, ayrıntıların yanında öğe listesinin görüntülenmesine olanak sağlar. İçerik arasındaki bu görsel bağlantı kullanıcıların kolayca başka bir öğe seçmesini sağlar. Daha küçük bir ekranda, odak anahtar bilgileri görüntülemeye devam eder.
Kesme noktası matrisi oluşturma
Kesme noktası matrisi, bir uygulamanın tasarımının farklı ekran boyutları ve yönelimlerindeki tepkisel veya uyarlanabilir davranışlarının grafiksel bir tasviri olarak hizmet eder. Genellikle, çeşitli kesme noktalarıyla tasarımın yanıtını ayrıntılandıran yapılandırılmış bir ızgara veya düzen sunar. Her bölüm farklı bir ekran genişliğine karşılık gelir ve bu, tasarımın yapısına, düzenine ve işlevselliğine dair öngörüler sunar. Kesme noktası matrisi, bir web sitesinin veya uygulamanın tasarımının farklı ekran boyutları ve yönlendirmelerinde nasıl yanıt verdiğini göstermek için ekran genişliği, görünüm yönü, tasarım öğeleri, düzen yapısı, içerik sunumu, gezinti, medya ve etkileşimli bileşenlerle ilgili dikkat edilmesi gereken konuları kapsar. Bu yaklaşım her ekranın tasarımının son haline getirilmesine yardımcı olmakla kalmaz, ayrıca önemli bileşen özelliği değişiklikleri açıkça izlendiğinde ve iyi iletişim kurulduğunda da uygulamanın uygulanmasını kolaylaştırır.
Power Platform kolaylaştırma
Model odaklı uygulama formu düzenleri Power Apps Studio kullanılarak yapılandırılır. Form tasarımcısı, form sayfalarının tutarsız yanıt vermelerini sağlayan bir ızgara yapısına öğeler eklemeleri için yapımcıları aralıksız olarak tutar. Özel sayfalar, katıştırılmış tuval bileşenleri ve Power Apps Component Framework kod bileşenleri gibi katıştırılmış özel bileşenlerin, uygulamalarında yanıt davranışını birleştirmesi gerekir. Örneğin, özel sayfaların doğru çalışabilmesi için yanıt verme davranışını saf tuval uygulamasıyla aynı şekilde uygulaması gerekir.
Tuval uygulamaları, yanıt davranışını uygulamak için her bileşeniçin açık yapılandırma gerektirir ve böylece deneyim üzerinde daha fazla denetime olanak tanır. Ekran boyutları uygulama tanımında belirlenir ve konum, davranış, görünürlük ve ilgili diğer özellikleri belirlemek için başvuruda bulunılabilir.