• Grafiksel arayüzler ve bunların geliştirilmesi için araçlar. Win32 API Kullanarak Grafiksel Kullanıcı Arayüzü Oluşturma

    Geliştirirken Uygulama programları oluşturmak yararlı görünüyor GUI. Aslında bu, kullanıcı tarafından programlama yapılmadan belirli bir sınıfa ait görevlerin hesaplanması için bir ortamın oluşturulmasıdır. Kural olarak, bu tür sorunların tekrar tekrar çözülmesi bekleniyorsa, çeşitli parametrelere sahip görevler için bu tür arayüzler geliştirmek mantıklıdır. Bu durumda, kullanıcının belirli bir parametre seçimiyle problemi çözmenin sonuçlarını (genellikle grafiksel biçimde) elde etmesine yardımcı olan bir grafik arayüzün geliştirilmesi tavsiye edilir. Böyle bir arayüz, öğrenme görevleri oluştururken de kullanışlı olabilir, çünkü bu durumda öğrenci asıl dikkatini programlamaya veya problemi çözmeye değil, gerekli parametreleri seçmeye, sonuçları analiz etmeye ve anlamaya harcar.

    Yukarıdan kısa tanıtım bilimsel ve / veya eğitimsel problemleri çözerken grafik arayüzün zorunlu unsurlarının şunlar olması gerektiği açıktır:

    1. Grafiksel hesaplama sonuçlarını görüntülemek için bir veya daha fazla pencere.

    2. Görev parametrelerinin değerlerinin ayarlandığı ve/veya değiştirildiği birçok düzenlenebilir pencere.

    3. Hesaplama işlemini başlatmanıza ve durdurmanıza, sonuçları yeniden çizmenize, görevden çıkmanıza olanak tanıyan kontrol düğmeleri.

    4. Açıklayıcı etiketler (statik metin).

    Elbette kaydırılabilir listeler, birçok seçenekten birini seçmek için radyo düğmeleri vb. gibi başka kontroller de mümkündür, ancak bu derste yalnızca ayrıntılı olarak listelenen dört türe bakacağız. Şekil 8'de gösterilmektedir en basit arayüz, yakın frekanslara sahip iki harmonik salınımın eklenmesiyle oluşan vuruşları incelemek için yaratılmıştır. Şekilden de görülebileceği gibi yukarıdaki unsurların tümü içinde mevcuttur.

    Böyle bir arayüz oluşturmak için grafik çıktının işlevlerini ve ayrıca özel fonksiyon, bir çizimle etkileşimli kullanıcı etkileşimi için tasarlanmıştır. Bu fonksiyona uicontrol denir. Ancak işi basitleştirmek ve MATLAB sisteminde aynı tipte arayüz elemanları oluşturmak için özel program Bu, neredeyse kod yazmadan görsel programlama düzeyinde gerekli öğeleri oluşturmanıza olanak tanır.

    Pirinç. 8. “Dövme” problemini çözmek için en basit grafiksel kullanıcı arayüzü

    9.1. Arayüzün görünümünü oluşturma

    Bu bölümde, grafiksel (görsel) programlama araçlarını kullanarak bir grafik arayüzün (GUI -GraphicsUserInterface) görünümünü geliştirmek için MATLAB kullanımına bakacağız. Bir arama için görsel editör MATLAB komut penceresine rehber yazmanız gerekir. Bilgisayarınızın hızına göre belirlenen belirli bir süre sonra Şekil 9'da gösterilen iki yeni pencere açılacaktır. Bunlardan biri kontrol paneli (Kontrol Paneli, soldaki şekilde) ve form veya çizim alanıdır (Şekil, sağdaki şekilde). Bu pencereler üst üste gelebilir, ancak netlik sağlamak adına onları yan yana yerleştirdik. Rehberi çağırmadan önce rehber yoksa yukarıda gösterilen resim ekranda görünecektir. dış mekan çizimi. Kılavuz işlevi bir çizim çizildikten sonra çağrılırsa boş bir çizim yerine açılır. Bir grafik arayüzün oluşturulmasını en baştan ele alacağız.

    Bir GUI oluşturmadan önce, arayüz olarak sahip olmak istediğiniz şeyi "yansıtmak" iyi bir fikirdir. Grafik açısından üç farklı sinyalin üç alt pencerede görüntülenmesine ilişkin bir örneği ele alacağız. yüksek seviye alt grafik(3,1,k) operatörleri tarafından belirlenecektir; burada k, grafiğin numarasıdır. Ayrıca,

    Pirinç. 9. Genel form görsel grafik editörü ve pencereleri düzenle

    Grafiklerin bulunduğu gerçek alt pencerelerin sağında, düzenlenebilir üç pencerenin olmasını istiyoruz

    üçünün sayısal değerlerini girebileceğiniz / düzenleyebileceğiniz

    değişkenler. Bu değişkenlerin keyfi değerler almasına izin verin.

    Bu sunumda düzenlenebilir onay kutularımızı donatmayacağız.

    koy, girilen değerlerin herhangi bir koşulu karşılayıp karşılamadığı, ancak bu durum

    Olabilmek. Bu değişkenlere N, R, C diyelim. bu örnek hesaplama anlamına gelir

    Terminallere N numaralı bir sinyal uygulandığında RC devresindeki akım ve R ve C dirençtir.

    Devredeki iyon ve kapasitans ( Detaylı Açıklama görevler, bkz. ana paragrafın 10. paragrafı

    manuel metin).

    Arayüzümüz değerin değiştirilmesine izin vermelidir

    N, R ve C değerleri üçe bölünmüş halde

    biri diğerinin üstünde alt pencere sinyali (voltaj,

    terminallere uygulanan), sinyalin türevi

    la ve direnç voltajı U r . Dışında

    grafikleri ve düzenlenebilir pencereleri görüntülemek için pencereler

    Çalıştır Çıkış

    giriş arayüz paneline yerleştirilmelidir -

    iki düğme daha - ÇALIŞTIR - programı çalıştır

    Pirinç. 10. Arayüz görünümü

    hesap ve ÇIKIŞ - işin sonlandırılması ve silinmesi

    grafik penceresi.

    İlk adım gelişmek dış görünüş arayüz. geçsin

    ön taslağımıza göre arayüz şöyle görünmeli

    aşağıdaki gibi (Şekil 10). Bu arayüzün elemanları üç penceredir

    grafik çıkışı (kontrol paneli açısından eksenler), üç statik yazıtlar N, R, C(metin), üç veri girişi/düzenleme penceresi (düzenle) ve iki düğme (basın).

    Grafiklerin görüntüleneceği alt pencereler oluşturmak için şekilde sağda gösterilen düğmeyi kullanın (pencere ve eksenler). Kontrol panelinde bu öğeye tıklayıp fareyi çizim paneline hareket ettirerek farenin ucunda olacak çarpı işaretini buraya yerleştirmeniz gerekir.

    ilk alt pencerenin sol üst köşesinin olması gereken yer. Basma ve tutma sol düğme fare, ortaya çıkan dikdörtgeni çıkarmanız gerekir doğru boyutlar. Bundan sonra diğer iki pencerenin inşası prosedürü benzer şekilde tekrarlanır.

    Sağda gösterilen düzenleme düğmesi düzenlenebilir giriş kutuları oluşturmak için kullanılır. Eksenli alt pencereler oluştururken olduğu gibi kullanılır. İlk olarak, bir giriş dikdörtgeninin oluşturulduğu, haç yüklü bir fare belirir.

    Şekil paneli başlıkları, yukarıda açıklandığı şekilde sarmalayan ve hizalayan metin düğmesi kullanılarak oluşturulur. Statik metin alanı içinde herhangi bir metnin görünmesi için,

    yazıt, düğmeyi kullanarak çağrılan özellik editörüyle çalışmak gerekir. Özellik editörü veya kullanarak iki kez dokununçizim panelinde karşılık gelen nesnenin üzerine farenin sol tuşu.

    Düğmeler oluşturmak ve yerleştirmek için Bas etiketli paneli kullanın. Düğmeyi yerleştirme ve boyutunu seçme yöntemi, yukarıda düzenleme penceresi ve statik metin penceresi için açıklanan yöntemle tamamen aynıdır.

    Bu şekilde oluşturulan çıktı ve düzenleme pencereleri, statik metin pencereleri ve düğmelerin yanı sıra diğer nesneler de Hizalama Araçları paneli kullanılarak hizalanabilir ve aralarında belirli boşluklar ayarlanabilir.

    Bunu yapmak için kontrol panelindeki ilgili düğmeye tıklayın; hizalama paneli görünecektir. Herhangi bir eylemin gerçekleştirileceği bir dizi nesneyi ayarlamak için, Shift tuşunu basılı tutarken her birine tıklayarak bunları seçmek gerekir. Seçilen nesneler işaretlenir

    karşılık gelen nesnelerin etrafında siyah noktalar. Herhangi bir nesnenin (düğme, pencere vb.) boyutunu değiştirmeniz gerekiyorsa, bu nesneye farenin sol tuşuyla tıklamalı ve herhangi bir nesnenin boyutuyla aynı şekilde gerekli boyutu değiştirmek için fareyi kullanmalısınız. Windows pencereleri.

    Resim panelindeki grafik nesnelerle çalışırken, resim panelini tam ekrana açmanız (Windows penceresinin ilgili düğmesini kullanarak) ve resim panelindeki tüm nesnelerin boyutunu seçmeniz önerilir.

    Tüm nesneler varsayılan olarak piksel cinsinden boyutlandırıldığından, bu durum, çıktı penceresi yeniden boyutlandırıldığında düğmelerin ve/veya pencerelerin üst üste gelmesine neden olabilir. Böyle istenmeyen bir durumdan kaçınmak için, tüm nesnelerin boyut birimlerini boyutsuz değişkenlere (pencere boyutunun kesirleri) ayarlamak gerekir. Bu boyuta normalize edilmiş boyut denir. Bunu yapmak için kontrol panelindeki düğmeye tıklayarak özellik editörünü aramanız gerekir.

    Özellik editörü yazma. Özellik düzenleyicinin üst penceresinde girdiğimiz tüm nesneleri seçtikten sonra (Ctrl tuşunu basılı tutarak ve farenin sol tuşuyla nesneleri seçerek), özellik düzenleyicinin alt penceresinde Birimler özelliğini (ölçü birimleri) buluruz. ve farenin sol tuşuna tıklayarak seçin. Bundan sonra, editörün orta kısmında, özel bir pencerede, solda Birimler özelliği ve sağda, geçerli özellik değerlerini içeren bir açılır listenin bulunduğu bir değer seçim penceresi görünecektir. Units özelliği normalleştirilmiş olarak ayarlanmalıdır. Benzer şekilde, FontUnits özelliğinin değerini (yazı tipi boyutu için ölçü birimleri) ayarlamanız gerekir. Bu, pencere yeniden boyutlandırıldığında yazı tipi boyutunun değişmesini sağlar.

    Etiketleri düğmelere ve statik metin alanına yerleştirmek için uygun nesneyi (veya çift ​​tıklama doğrudan çizim alanında veya özellik düzenleyicinin üst penceresinde) ve özellik düzenleyicinin alt penceresinde String özelliğini bulun ve seçtikten sonra tırnak işaretleri arasına gerekli metni girin (örneğin, 'Başlat' ilgili düğmede). Her bir çıkış penceresinin üzerine başlıklar ayarlamak için, ilgili pencereyi seçmeniz ve alt penceresinde Title özelliğini bulmanız gereken özellik düzenleyicisini8 çağırmanız gerekir.

    8 Özellik düzenleyicisi yalnızca kontrol panelindeki düğme kullanılarak değil, aynı zamanda

    ve karşılık gelen nesneye çift tıklayın.

    Dipnot: Widget'ları (grafik kullanıcı arayüzünü oluşturan görsel öğeler, bunların düzenini, boyut politikasını, sinyal yuvası bağlantılarını, grafik arayüz öğelerini ve bunların kullanımını) inceliyoruz.

    13.1 Widget'lar

    Widget'lar grafiksel kullanıcı arayüzünü oluşturan görsel öğelerdir.

    Widget örnekleri:

    • Düğme (QPushButton sınıfı);
    • Etiket (QLabel sınıfı);
    • Giriş alanı (QLineEdit sınıfı);
    • Sayısal sayaç alanı (QSpinBox sınıfı);
    • Kaydırma çubuğu (QScrollBar sınıfı).

    Qt, kullanıma hazır yaklaşık 50 hazır grafik öğesi sınıfına sahiptir. Tüm widget'ların ana sınıfı QWidget sınıfıdır. Dikkatlice ele alacağımız görsel öğelerin tüm temel özellikleri ondan miras alınmıştır. Bir örnekle grafik arayüzlü program geliştirmenin yollarını keşfetmeye başlayalım.

    Haydi yaratalım boş dosya proje. Proje sihirbazını çalıştırın ve Projeler (Projeler) bölümündeki öğeyi seçin Diğer Proje. Daha sonra bir proje türü seçin. Boş Qt Projesi. Aşağıdaki içeriği proje dosyasına ekleyin:

    TEMPLATE = app #Qt modülleri kullanacağız QT += widgets #Add widgets modülü, widget'larla çalışmak için (Qt5 için gereklidir). HEDEF = widget#Yürütülebilir KAYNAKLARIN adı += \ main.cpp

    Şimdi oluşturalım basit bir program yazıyı görüntüleyeceğimiz bir pencere ile. Pencerenin boyutunu ve başlığının metnini ayarlayın, ayrıca resim yazısının yazı tipini de ayarlayın. Bunu yapmak için aşağıdaki içeriğe sahip bir main.cpp dosyası oluşturalım:

    #katmak #katmak int main (int lArgc, char * lArgv ) ( // Pencere programını başlatan ve yapılandıran bir QApplication nesnesi oluşturun, // QApplication olay döngüsünü kullanarak yürütülmesini kontrol edin lApplication (lArgc, lArgv); QLabel lLabel; // Bir QLabel oluşturun widget - label lLabel.setText ("Ben widget'ım!"); //Etiketin metnini lLabel.setGeometry(200, 200, 300, 150); //Boyutları ayarlayın - konum (x, y) genişlik ve yükseklik Hizalama metnini ayarlayın lLabel.setAlignment(Qt::AlignHCenter | Qt::AlignVCenter); //QFont sınıfı yazı tipi parametrelerini ayarlamak için kullanılır. //Arial Black yazı tipi ailesini ve boyutu 12'yi seçin. QFont lBlackFont(" Arial Black " , 12); lLabel.setFont(lBlackFont); //Etiketin yazı tipini ayarlayın lLabel.show(); //Etiketi ekranda göstermek için show() yöntemini çağırın return lApplication.exec(); //Başlat exec() komutunu çalıştıracak program //loop olay işlemeyi yürütür - Program kullanıcının eylemlerini bekler ve işlemlerini gerçekleştirir. )

    Gördüğünüz gibi, Qt'deki arayüzleri oluşturan elemanların kendi konumları ve boyutları vardır - sözde "geometri" - ve bu nedenle ekrandaki karşılık gelen dikdörtgen alanı kaplarlar (bkz. Şekil 13.1). Ayrıca her öğenin davranışını ve görünümünü belirleyen ayarlar vardır.


    Pirinç. 13.1.

    Bir yapı oluşturmak için widget'lar "parça - bütün" ilkesine göre bir hiyerarşi halinde düzenlenir. Widget'ların her biri başka widget'lar içerebilir. Çok görsel unsur içerdiği öğelerin "üst öğesi" (ana bileşen) haline gelir. Bu tür ilişkilerin C++'daki kalıtımla, yani bir programdaki sınıflar arasındaki ilişkilerle karıştırılmaması gerektiğini unutmayın. Widget'lar arasındaki ilişkiler, nesneler arasındaki ilişkilerdir. Bu ilişkinin birkaç sonucu vardır:

    • ana öğe, alt öğenin silinmesinden sorumlu olacaktır: ana pencere öğesi silinirse, tüm alt öğeleri otomatik olarak silecektir;
    • ana widget, alt widget'ları kendi içine yerleştirir; alt widget'ların ebeveynin dışına çıkan kısımları görünmez olacaktır;
    • Ana widget'ın durumunun bir kısmı alt widget'lara aktarılır - bu, görsel öğeye uygulanan bazı özellikler (görünürlük, etkinlik) ve stillerle ilgilidir.

    Ebeveyni olmayan widget'lar (widget'lar Üst düzey), programdaki ayrı pencerelere benziyor. Bir örnek düşünün. Yeni projemize ParentExample adını verelim. Proje dosyası bir GUI projesi için olağan ayarları içerecektir:

    ŞABLON = uygulama HEDEF = ParentExample QT += widget'lar

    Ana pencere olarak kullanacağımız widget için yeni bir sınıf oluşturacağız. Bu kategori için Dosyalar ve Sınıflar (Dosyalar ve sınıflar) C++ bölümünü seçin ve C++ Sınıfını seçin (bkz. Şekil 13.2).

    Bir sonraki adım pencerede bazı öğeler oluşturmaktır. Bunu yapmak için parentwidget.cpp dosyasını açın ve sınıf yapıcı kodunu değiştirin. Öğeleri görüntülemek için bunları sınıf yapıcısında oluşturmak ve ParentWidget'ı bunların babası olarak ayarlamak yeterlidir. Parentwidget.cpp kodu şuna benzer:

    #include "parentwidget.h" #include #katmak #katmak ParentWidget::ParentWidget (QWidget * parent) : QWidget (parent) ( //Üst widget'ı belirterek bir etiket oluşturun - bu, ParentWidget sınıfının bir örneğidir. QLabel * lLabel=new QLabel (this); // Sola göre konum üst köşe ebeveyn widget'ı. lLabel ->setGeometry(50, 0, 100, 30); lLabel ->setText("TextLabel"); //Etiket üzerindeki metin. //Bir düğme oluşturun, ebeveyni, geometriyi ve metni ayarlayın QPushButton * lPushButton = new QPushButton (bu); lPushButton->setGeometry(50, 50, 100, 30); lPushButton->setText("PushButton"); //Giriş alanını yaratın, "ana"yı, geometriyi ve metni ayarlayın QLineEdit * lLineEdit = new QLineEdit (bu); lLineEdit ->setGeometry(50, 100, 100, 30); lLineEdit ->setText("LineEdit"); lLineEdit ->selectAll(); // Giriş alanındaki metni vurgulayın (sadece örnek olarak) // Son olarak ana widget'ı yeniden boyutlandırın setGeometry(x(), y(), 300, 150); //ve pencere başlığı metnini ayarlayın setWindowTitle (" parent widgetExample "); )

    Ana öğe ParentWidget olduğundan, etiket (QLabel), düğme (QPushButton) ve metin alanı (QLineEdit) onun içindedir. Alt widget'ların konumu, ebeveynin sol üst köşesine göre ayarlanır. Bu, programımızın penceresinin boyutu ve konumu değiştirilerek kolayca doğrulanabilir. Elementleri nasıl yarattığımıza dikkat edin Kullanıcı arayüzü V dinamik bellek yeni operatörü kullanarak. Bu, ParentWidget yapıcısı tamamlandıktan sonra öğelerin kaldırılmamasını sağlar.

    14 Ocak 2014, 09:10

    Grafiksel kullanıcı arayüzü tasarımı

    • Arayüzler

    giriiş

    İÇİNDE modern dünya Milyarlarca bilgi işlem cihazı. Daha daha fazla program onlar için. Ve her birinin, kullanıcı ile makine kodu arasındaki etkileşimin "kaldıraçları" olan kendi arayüzü vardır. Ne olduğu şaşırtıcı değil daha iyi arayüz etkileşim o kadar etkili olur.

    Ancak tüm geliştiriciler ve hatta tasarımcılar kullanışlı ve anlaşılır bir grafik kullanıcı arayüzü oluşturmayı düşünmüyor.

    Kendim için şu soruları sorarak başladım: genel ilkeler, ne arayüz elemanları (EI) nasıl bir tasarıma sahip olmaları gerektiğini, nereye doğru şekilde yerleştirmeleri gerektiğini ve nasıl davranmaları gerektiğini oluşturmaktır.
    Aşağıda bu sorulara cevap vermeye çalışacağım.

    Genel İlkeler


    Hangi EI oluşturulmalı?


    EI'nin tasarımı ne olmalı?

    Aslında EI tasarımı ayrı bir makale konusu. Burada her şeyi hesaba katmanız gerekir: renkten, şekle, oranlardan bilişsel psikolojiye kadar. Ancak yine de birkaç ilkeye dikkat çekmeye değer:

    EI ekranda doğru şekilde nasıl konumlandırılır?


    EI nasıl davranmalı?


    Gözaltında

    Bu makale, arayüz tasarımı ilkelerine ilişkin en kapsamlı rehber olma iddiasında değildir. Grafik kullanıcı arayüzü (GUI), psikolojiyle yakından iç içe geçmiş, bilim adamlarının zihinlerini ve yüzlerce sayfa kitap ve çalışmayı meşgul eden geniş bir konudur. Bu kadar küçük bir formatta konunun bütünlüğünü ifade etmenin bir yolu yok. Ancak uyum temel prensipler, daha kullanıcı dostu arayüzler oluşturmanıza ve tasarım sürecini basitleştirmenize olanak tanır.
    İlginiz için teşekkür ederiz.

    Edebiyat

    Jeff Raskin, "Arayüz: bilgisayar sistemlerinin tasarımında yeni yönler"
    Alan Cooper, “Arayüz hakkında. Etkileşim Tasarımının Temelleri"
    Alan Cooper, "Psikiyatri hastanesi hastaların elinde"

    GUI standardı.

    Biri büyük değişiklikler bilgisayar endüstrisinde - grafiksel bir arayüzün ortaya çıkışı. Peki, Windows uygulamalarının nasıl görünmesi gerektiğini tanımlayan GUI standartlarını benimsemeye ihtiyaç mı vardı? Macintosh'ta vb. Hatta satıcıların uygulamalarını özel olarak uyarladığı sertifika programları bile var. Windows simgesi. Bu birkaç nedenden dolayı yapılır.

    Windows veya Mac'in avantajlarından biri standart görünümleridir. Bunlardan birinde çalışmayı öğrendiğinizde geri kalanın size ait olduğunu düşünün. Çoğu Windows uygulaması aynı kuralları kullanır; dolayısıyla bunlardan herhangi birinde bir dosyayı nasıl açacağınızı, kaydedeceğinizi, yazdıracağınızı, kapatacağınızı ve kopyalayacağınızı bilirsiniz. Standart Arayüzçok kullanıcı dostu. Uygulamalarınızın, kullanıcıların çalışmayı öğrendiği diğer Windows uygulamalarına benzemesini sağlamaya çalışmanız gerekir. Yedi tane var Genel İlkeler GUI geliştirme. Bunları öğrenip takip ederseniz uygulama tasarımınız iyi olacaktır.

    GUI geliştirmenin yedi ilkesi.

    Yedi Genel GUI Tasarım İlkesi Microsoft Windows Arayüz Kılavuzu'ndan alınmıştır. Kendi standartlarınızı oluşturabileceğiniz planı oluştururlar. Bu plan geliştiricilere ve kullanıcılara iki önemli fayda sağlar. Öncelikle uygulamalar profesyonel görünüyor. İkincisi, işlevseldirler, diğer uygulamalarla tutarlıdırlar ve kullanıcıların öğrenmesi kolaydır.

    Elbette bir uygulamanın başarılı olabilmesi için iyi yazılmış ve kullanışlı olması gerekir; temel gereksinim budur. Bahsettiğimiz ilkeler geliştiriciye basitçe düşünme fırsatı verir.

    1. Kullanıcının uygulamayı kontrol etmesine izin verin.

    2. Nesne/eylem paradigmasını takip edin.

    3. Tutarlı olun.

    4. Uygulamalarınızı basit ve anlaşılır hale getirin.

    5. Uyum için çabalayın.

    6. Kullanıcı geri bildirimi sağlayın.

    7. Hoşgörülü olun

    Birinci prensip: Kullanıcının uygulamayı kontrol etmesine izin verin.

    Kullanıcının uygulamayı yönetmesi, yani uygulamanın her modülüne başka bir modülden erişebilmesi gerekir. Daha önce bu tür erişim için hiyerarşik bir menü kullanılıyordu.


    Diyelim ki kullanıcı yeni bir client eklemek istiyor.Örnekte kullanıcının ACCOUNTS RECCIEVable modülüne gitmesi ve oradan yeni bir client eklemesi gerekiyor. Ne yapacağını nasıl biliyor? Muhtemelen bu uygulamadaki deneyimimden. GUI dünyasında, kullanıcı Şekil 2'de gösterildiği gibi menüden Yeni komutunu ve ardından Müşteri'yi seçer. Bunda modern sistem Dosya menüsünden yeni müşteri, satıcı veya stok girişi ekleyebilirsiniz. Bu, satıcı ekranındayken müşteri kaydını değiştirmenize veya bunun tersini yapmanıza olanak tanır. Kullanıcının artık karmaşık ve kafa karıştırıcı hiyerarşik menüyü anlamasına gerek yok.

    İkinci İlke: Nesne/eylem paradigmasını takip edin.

    Nesne/eylem paradigması, sistemdeki tüm nesneler üzerinde herhangi bir işlemin gerçekleştirilebileceğini belirtir. En basit ve en bariz örnek müşteri tabanı destek ekranıdır (Şekil). Ekranda bir dizi düğme bulunur ve düğmelerin her biri, seçilen istemci hakkındaki bilgiler üzerinde bazı eylemler gerçekleştirmenize olanak tanır. Silebilir, düzenleyebilir, yazdırabilirsiniz vb. Belirli bir istemci üzerinde gerçekleştirilebilecek eylemlerin uygun zamanlarda mevcut olması veya mevcut olmaması gerekir. Örneğin bir müşteri kaydı düzenleme modundayken Sil ve Yeni düğmeleri devre dışı bırakılmalıdır.

    Üçüncü prensip: Tutarlı olun.

    Tutarlılık GUI geliştirmenin en önemli ilkelerinden biridir. GUI - kullanıcıların keşfetmesine izin ver daha fazla uygulama eski programlardan daha Ve bunların hepsi tutarlılık ilkesi sayesinde. Bir kullanıcı yeni bir uygulamayla karşılaştığında zaten aşinadır. ana komutlar: Dosyaları açın, yazdırın ve kaydedin. Bu platformlarda geliştirilen uygulamalar genellikle birbiriyle tutarlıdır.

    Bu nedenle yeni uygulamalar oluştururken tutarlı olun. Eklemek gerekirse Yeni giriş Yeni (Yeni) komutunu kullandınız, her yerde kullanın. Bu kelimeyi başkalarıyla değiştirmemelisiniz - örneğin Ekle 9 ekle kelimesi). Tutarlılığınız sayesinde kullanıcılar, Yeni komutunu gördükleri her yerde yeni bir giriş eklemek için onu kullanabileceklerini bilecekler.

    Dördüncü ilke: Başvuruyu basit ve anlaşılır hale getirin.

    Bu düşüncenizi şu şekilde ifade edebilirsiniz: jargon kullanmayın. İki düğmeli bir ekran var. Biri “Veritabanını paketle” diyor, diğeri ise “Silinmek üzere işaretlenmiş kayıtları kaldır” diyor. İkinci giriş kesinlikle kullanıcı için daha anlaşılır olacaktır.

    Uygulamaları geliştirirken arayüzde programlama argosunu kullanmak çoğu zaman cazip gelebilir. Mümkün olduğunca bundan kaçınmaya çalışın.

    Beşinci İlke: Uyum için Çabalayın

    Siyah beyaz olsa bile bu ekranın önemli bir estetik kusuru var: Beyaz arkaplan ve üzerindeki zıt nesneler. Şek. Aynı ekran renk açısından oldukça dengeli görünüyor.

    Windows milyonlarca renk kombinasyonunu aktarabilir. Bu, hepsinin kullanılması gerektiği anlamına mı geliyor? Tabii ki hayır. Basit, sakin renkler seçmeli ve bazı programcıların bazı nedenlerden dolayı hoşuna giden rastgele karışımlarından kaçınmalısınız.

    Altıncı prensip. Kullanıcı geri bildirimi sağlayın.

    Başvurunuzun tamamlanması uzun süren bir süreç olduğunu düşünün. Bu süre zarfında ekranda aşağıdaki içeriğe sahip bir mesaj görüntülenebilir: "Program çalışıyor, lütfen bekleyin." Uygun çözüm; ancak kullanıcı askıda olmadığını nasıl biliyor? Bu nedenle programda her şey yolunda olsa da uygulamaya “üç parmakla selam” (Ctrl + Alt + Del) vermesi çok muhtemeldir.

    Kullanıcıya sürecin hangi kısmının yapıldığını göstermek daha iyidir. Daha sonra gereksiz yere programı yarıda kesmeyecek, işin ne kadar ilerlediğini değerlendirebilecek, süreç tamamlanana kadar başka işler yapabilecek. Böylece kullanıcı verimliliği yaklaşık yüzde 25 oranında artacak. Bu sonuç, ölçüm cihazının ekranda görüntülenmesiyle elde edilebilir. Genellikle "100 girişten 10'u işlendi" veya "%40'ı tamamlandı" gibi mesajlar görüntülenir. Daha da iyisi, hem işlenen kayıtların sayısını hem de bunların yüzdesini gösterin."

    Yedinci Prensip: Hoşgörülü Olun

    Her birimiz bazen yanlışlıkla yanlış düğmeye basarak bir kaydı sildik. Bu nedenle kullanıcıya fikrini değiştirme veya yeni gerçekleştirilen eylemleri iptal etme fırsatını bırakın. Süreç sürerse uzun zaman, büyük miktarda veriyi değiştirir veya kullanıcının oluşturmasını gerektirir destek olmak Bir işlemi gerçekleştirmeden önce uygun bir uyarı vermelisiniz.İki kez onay gerektiren ve ardından şifre isteyen uygulamalar gördüm. Programlarınızın bu düzeyde bir korumaya ihtiyacı var mı? Belki. Geliştiricinin görevi, işin herhangi bir aşamasında hata yapması durumunda kullanıcıya yardımcı olmaktır.

    GUI Standardında Sözleşmelerin Önemi.

    Gördüğünüz gibi GUI tasarım prensipleri oldukça basittir ve ekran oluştururken kullanılmalıdır. Ancak ekranı tasarlamadan önce nasıl görüneceğini belirlemeniz gerekir. Boyutlarını, yazı tiplerini, renklerini, mesaj stillerini vb. seçin. Bu soruları önceden çözerek çalışmalarınızı önemli ölçüde hızlandıracaksınız. Daha sonra yazı tipi veya mesaj stiline gelince, sadece standarda bakarsınız.