Axure RP - Kullanıcı Arayüzü

Axure'u kurduğunuzda, aşağıdaki ekran görüntüsünde gösterildiği gibi bir arayüzle karşılaşacaksınız.

Bu ekran, siz göstermemeyi tercih edene kadar her zaman başlangıçta gösterilecektir.

Bu ekranda aşağıdaki seçeneklere sahipsiniz -

• Axure'da Yeni Bir Dosya Başlatın
• Mevcut bir Axure projesini açın

Şimdi Axure ile yeni bir dosya oluşturalım.

“YENİ DOSYA” düğmesine tıkladığınızda, yeni bir prototip oluşturmak için aşağıdaki ekran karşınıza çıkacaktır.

Yukarıdaki şekilde gösterildiği gibi çalışma alanı 6 bölüme ayrılmıştır.

• Pages
• Libraries
• Inspector
• Outline
• Masters
• Tasarım Alanı

Bu kısımları tek tek geçelim.

Sayfalar

Bu bölüm, üzerinde çalıştığınız sayfaları gösterir. Bu sayfalar, aşağıdaki gibi varsayılan bir ağaç yapısında gösterilmektedir. Ana sayfada aşağıdaki alt sayfalar bulunur.

Ev

Page 1

Page 2

Page 3

Verilen yapı ile devam edebilir veya ihtiyacınıza göre değiştirebilirsiniz. Bunu yapmak için, herhangi bir sayfaya sağ tıklayın, ardından Ekle, Taşı, Sil, Yeniden Adlandır, Çoğalt, vb. Gibi seçenekler sunulur.

Mevcut farklı araçların çoğu gibi, bu bölüm de prototipinizdeki sayfalarla etkileşim kurmanıza olanak tanır. Amaçlanan prototipteki ekranları planlamak için kullanabilirsiniz.

Kitaplıklar Bölmesi

Kitaplıklar bölmesinde, prototip için gereken denetimlerin çoğu mevcuttur. Bu bölümde bulunan tipik kontroller şunlardır - Kutu, Görüntü, Yer Tutucu, Düğmeler, vb. Axure RP, uygulama alanlarına göre kategorize edilmiş zengin bir UI kontrolü seti sağlar.

Yukarıdaki şekilde (a) gösterildiği gibi, kitaplıklar - Ortak, Formlar, Menüler ve Tablo ve Biçimlendirme gibi kategorilere sahiptir. Uygulamayı açtığınızda tüm bu kategoriler genişletilir. Kolaylık sağlamak için bu ekran görüntüsünde daraltılmıştır.

Ortak kitaplıklar arasında temel şekiller, düğmeler, başlık metni, Sıcak Nokta, Dinamik panel vb. Bulunur.

Axure RP ile tüm prototipleme gereksinimleriniz için Hot Spot adı verilen çok etkili bir kontrol vardır. Bu kontrolü kullanarak, kullanıcı arayüzündeki neredeyse tüm kontrollere tıklama etkileşimi sağlayabilirsiniz. İlerleyen sayfalarda bir örnek verilecektir.

Form kitaplığında, adından da anlaşılacağı gibi Liste Kutusu, Onay Kutusu, radyo düğmesi, metin alanı ve metin alanı kontrolleri bulunur. Bir kullanıcı giriş formu tasarlamak için, kitaplığın altındaki bu bölümdeki kontrolleri kullanabilirsiniz.

Menüler ve tablolar geleneksel bir yapıya sahiptir. Bu tür bir yapı, belki yatay veya dikey formda, Menüler ve tablolar adı verilen bu kitaplığın altında mevcuttur.

Son olarak, ancak en az değil, yapışkanlar, işaretçiler ve okları içeren İşaretleme kitaplığı geliyor. Çoğunlukla bu, prototipinizde ek açıklamalar için kullanılacaktır.

Tasarım Alanı

Bu, UX mühendisleri için gerçek oyun alanıdır. Bu alan, ihtiyacınıza göre prototipleri oluşturmak için kullanılacaktır. Başlamak için aşağıdaki ekran görüntüsünde 6 numara ile vurgulanan alana bakın.

Bu alanda, istediğiniz kontrolleri kütüphaneden sürükleyip bırakabilirsiniz. Kütüphaneyi kullanarak hızlı bir menü çubuğu oluşturalım.

Örnek - Menü Çubuğu

Kitaplıklardan Menüler ve Tablo altında, Klasik Menü - Yatay denetimi tasarım alanına sürükleyin .

Kontrolü tasarım alanına sürükledikten sonra aşağıdaki ekranı göreceksiniz.

Yukarıdaki ekranda gösterildiği gibi Axure RP, bir menüde istenen metni gösterecek kadar akıllıdır. Axure RP, bir menü çubuğu olduğu düşünülerek, kumandada Dosya, Düzenle ve Görüntüle menülerini otomatik olarak oluşturmuştur.

Okun işaret ettiği gibi, denetçi bölümü kontrolün özelliklerini gösterir. Karmaşık prototipler oluştururken benzersiz tanımlama için kontrolünüz için bir ad oluşturmak üzere bu bölümü kullanın.

Bu kontrole TestMenu olarak bir isim verelim. Bu ismi ilerleyen örneklerde kullanacağız.

Sayfa Özellikleri

Bir prototip planlarken, kullanıcı ve dolayısıyla prototipin sergileneceği / görüntüleneceği cihaz hakkında net bir fikre sahip olmak mantıklıdır. Prototip ile en iyi etkileşim deneyimi için Axure, sayfa özelliklerini ayarlama özelliği sağlamıştır.

Yukarıdaki şekilde gösterildiği gibi, 3 numara ile gösterilen alan, sayfa özellikleri bölümüdür. Bu bölümde, etkileşimler açılır menüsünü ve Uyarlanabilir alt bölümünü görebileceksiniz.

Bu bölümleri ayrıntılı olarak tartışalım.

Interactions sectionsayfa ile olası etkileşimler (vakalar) ile ilgilenir. Gördüğünüz gibi, etkileşim durumu OnPageLoad, sayfa yüklendiğinde olayları işler. Prototiplerin çoğunda, UX mühendisleri ilk izlenimi yaratmak için bir animasyon koymayı tercih ediyor. Animasyonu göstermek için bu belirli olay genellikle OnPageLoad durumunda tetiklenir.

Benzer şekilde, diğer durumlar şunlardır - OnWindowResize, OnWindowScroll. Daha Fazla Etkinlik açılır menüsünde, sayfayla ilgili etkileşimleri yapılandırmak için desteklenen diğer durumları görebilirsiniz.

İle Adaptive sectionAxure RP, duyarlı bir web tasarımına giriyor. Günümüzde web siteleri için bir deneyim tasarlamak yeterli değil, bununla birlikte işletmeler, web siteleriyle birlikte var olmak için mobil siteleri tercih ediyor.

Farklı ekran boyutlarından ve düzenlerinden görüntülendiği şekliyle aynı sayfa, farklı uyarlanabilir görünümler oluşturur. Genellikle, uyarlanabilir görünümler cep telefonları ve tabletler için tasarlanmıştır. Axure, bu uyarlanabilir görünüm özelliğini sağlar, böylece UX mühendisleri, prototiplerin duyarlı yönünü en baştan kavrayabilirler.

Widget için Denetçi Bölmesi

Pencere Öğesi Etkileşimleri bölmesi, Axure'daki en kritik bölümdür. Tasarım alanındaki herhangi bir parçacığa tıklayarak bu bölmeyi görebilirsiniz.

Önceki bölümde kullandığımız menü öğesinin bir örneğini düşünün. TestMenu adlı menü öğesini seçin ve aşağıdaki ekran görüntüsünde vurgulanan bölümü inceleyin.

Özellikler sekmesinde görebileceğiniz gibi OnMove, OnShow, OnHide ve OnLoad gibi farklı etkileşimler vardır. Bunlar, bir bütün olarak Menü kontrolüne özeldir.

Şimdi, menü kontrolünden Dosya'yı tıklayın.

Pencere Öğesi Özellikleri bölmesinde etkileşim türlerinde bir değişiklik fark edeceksiniz. Ayrıca, bu menü öğesi için bir ad verme esnekliği sağlar. Örnek olarak OnClick vakasını alalım.

OnClick- OnClick durumu, prototipi çalıştırırken denetimi tıklattığınızda denetimin davranışını tanımlar. Bu, sayfa gezinme, menü açılır penceresi vb. Gibi çeşitli etkileşimleri etkinleştirir.

Notes Pane- Denetçi bölmesinin kendisinde, Notlar adlı bir alt bölüm vardır. Notlar bölmesinde, seçiminizin kontrolü için hatırlamanız gereken belirli noktalar ekleyebilirsiniz.

Bir sonraki bölümde bir örneğe daldığımızda bu noktalar netleşecektir.

Izgaralar ve Kılavuzlar

Maksimum düzeyde kalite ve hassasiyete sahip bir prototip için, UX mühendisleri bir kontrolü diğer kontrolle hizalama / konumlandırma becerisine ihtiyaç duyar.

Örneğin, bir giriş açılır penceresi göstermek istediğinizi düşünün. Bu açılır pencere ekranın tam ortasında gösterilecekse, ekranın genel boyutlarına ihtiyacınız vardır. Ayrıca, ekranın tam ortasına hizalamak için, onu uygun şekilde hizalamak için ızgaralara sahip olmanız gerekir.

Axure, tasarım alanınızı etkin bir şekilde kullanabilmeniz için Izgaralar ve Kılavuzlar özelliğini sağlar.

Mevcut Izgaraları ve Kılavuzları görmek için tasarım alanına sağ tıklayın ve aşağıdaki ekran görüntüsünde gösterilen içerik menüsü açılır.

Şimdi, mevcut seçenekleri anlayalım.

Grid- Bağlam menüsünde gösterilen ilk üç seçenek ızgaralarla ilişkilidir. Izgarayı Göster, Izgaraya Yapış ve Izgara Ayarlarıdır.

• Show Grid- Izgarayı Göster etkinleştirildiğinde, ızgarayı tasarım alanında aşağıdaki ekran görüntüsünde gösterildiği gibi görebileceksiniz. Bu, kontrolleri ekrandaki diğer kontrollerle hizalamak için çok kullanışlıdır.

• Snap to Grid- Izgaraya Yapış etkinleştirildiğinde, kontroller, etraftaki ızgaralara göre otomatik olarak eklenir. Bir kontrolü sürüklediğinizde bu davranışı görebileceksiniz ve kendisini yakındaki ızgaraya bağlayacak.

• Grid Settings- Bu iletişim kutusunda Izgaralarla ilgili daha fazla ayar mevcuttur. Aşağıdaki ekran görüntüsünde gösterildiği gibi, ızgara arasındaki boşluk, ızgara türü vb. Bu iletişim kutusunda mevcut olacaktır. Size kolaylık sağlamak için tip kesişim ızgaralarını seçebilirsiniz.

Guides - Aşağıdaki ekran görüntüsünde gösterildiği gibi bağlam menüsünde, ilk ayırıcıdan sonraki seçenekler kılavuzlarla ilgilidir.

Kılavuzlar için yaygın olarak kullanılan seçenekleri ele alacağız.

• Show Global Guides- Bu kılavuzlar, tasarım alanında hem yatay hem de dikey cetvellerden sürüklediğinizde görünür olacaktır. Kendiniz deneyin!

• Show Page Guides- Kılavuzlar, sayfa düzeyinde de mevcuttur. Bu kılavuzlar, dikey ve yatay cetvellerden sürüklediğinizde oluşturulur. Global Kılavuzlardan daha yaygındır. Bir sayfa kılavuzuna sahip olmak, sayfa düzeyinde tasarımın esnekliğini artırır.

• Show Adaptive Guides- Farklı uyarlanabilir görünümler için sayfaların tasarlanması söz konusu olduğunda, uyarlanabilir kılavuzların yerinde olması faydalı olacaktır. Bu seçenek, nesneleri farklı uyarlanabilir görünümler arasında hizalamak için kullanılacak uyarlanabilir kılavuzların görünürlüğünü sağlar.

• Snap to Guides- Tasarım alanında farklı ekran öğelerini düzenlerken, bu işlevsellik nesnelerin kılavuzlara yaslanmasını sağlar. Bu, ekrana belirli bir nesneyi yerleştirdiğinizde ve onu diğer nesneye göre düzenlediğinizde kullanışlıdır.