Contents1.AXURE KURULUMU.............................................................................................................................3

2.FONT AWESOME KURULUMU.............................................................................................................3

http://fortawesome.github.io/Font-Awesome/.....................................................................................3

2.1 FONT AWESOME CHEATSHEET (İCON) KULLANIMI......................................................................3

3.AXURE’A KÜTÜPHANE EKLEMEK.........................................................................................................4

1- Component oluşturmak-düzenlemek için çalışma ortamı sağlayan kütüphane........................4

2-Hazırlanan Component’leri kullanmak için yüklenecek kütüphane.............................................5

4.PANELLER............................................................................................................................................6

4.1.Widgets........................................................................................................................................6

Image..............................................................................................................................................6

Heading 1-Header 2........................................................................................................................6

Label...............................................................................................................................................6

Paragraph.......................................................................................................................................6

Rectangle........................................................................................................................................6

Placeholder.....................................................................................................................................6

Button Shape..................................................................................................................................7

Horizontal Line...............................................................................................................................7

Vertical Line....................................................................................................................................7

Hot Spot.........................................................................................................................................7

Dynamic Panel................................................................................................................................8

Inline Frame..................................................................................................................................12

Repeater.......................................................................................................................................13

TextField.......................................................................................................................................13

TextArea.......................................................................................................................................13

Droplist.........................................................................................................................................13

List Box.........................................................................................................................................13

Check Box.....................................................................................................................................13

RadioButton..................................................................................................................................13

HTML Button................................................................................................................................13

Tree..............................................................................................................................................13

Table.............................................................................................................................................13

Classic Menu –Horizontal.............................................................................................................13

1

Classic Menu –Vertical..................................................................................................................13

4.2.Widget and İnteractions.............................................................................................................13

OnClick.........................................................................................................................................13

OnMouseEnter.............................................................................................................................13

OnMouseOut................................................................................................................................13

OnDoubleClick..............................................................................................................................13

OnContextMenu...........................................................................................................................14

OnMouseDown............................................................................................................................14

OnMouseUp.................................................................................................................................14

OnMouseMove.............................................................................................................................14

OnMouseHover............................................................................................................................14

OnLongClick..................................................................................................................................14

OnKeyDown..................................................................................................................................14

OnKeyUp......................................................................................................................................14

4.2.1.Bazı Widgetlere özgü olaylar...............................................................................................14

4.2.2.Dinamic Panele Özgü Olaylar...............................................................................................15

4.2.3.Sayfa Olayları.......................................................................................................................16

4.2.4.Add case seçeneği...............................................................................................................17

4.3.Widget Properties and Style.......................................................................................................21

4.3.1.Location+Size.......................................................................................................................22

4.3.2.Base Style............................................................................................................................22

4.3.3.Border,Lines +Files...............................................................................................................22

4.3.4.Alignment +Padding............................................................................................................22

4.4.Widget Manager.........................................................................................................................23

5.ÖRNEKLER.........................................................................................................................................23

5.1.Örnek 1.......................................................................................................................................23

Oval bir text Box nasıl yapılır?......................................................................................................23

5.2.Örnek 2.......................................................................................................................................24

Pop-up menüsü nasıl yapılır?........................................................................................................24

5.3.ÖRNEK 3.....................................................................................................................................29

DYNAMİC PANEL İLE DROPLİST NASIL YAPILIR?............................................................................29

5.4.ÖRNEK 4.....................................................................................................................................35

Sayfalar Arası Geçiş Nasıl Yapılır?.................................................................................................35

2

1.AXURE KURULUMU

http://www.axure.com/download

adresinden axuru indirebilirsiniz.

Kurulumunu yaptıktan sonra http://www.axure.com/learn adresinden başlangıç için küçük çaplı bilgiler elde edebilirsiniz.

2.FONT AWESOME KURULUMUhttp://fortawesome.github.io/Font-Awesome/

sitesinde Font-Awesome’u indirin.

İndirdiğiniz Font Awesome dosyasını zipten çıkarın.

Dosya içindeki font’a girip .ttl ve .otf uzantılı yazı stillerini ctrl ‘ye basılı tutarak 2 sini seçin.

Denetim Masasından Fonts’u açın.

Bu seçtiğiniz 2 dosyayı içine tut-sürükle-bırak ile yüklemeye başlayın(Yes-Yes).

Kurulum sonunda stiller arasında ” Font-Aweasome Regular” var ise Kurulum başarılı olmuştur.

Yada

. otf ve . ttl uzantılı dosyalara tek tek açarak install butonuna tıklayabilirsiniz.

2.1 FONT AWESOME CHEATSHEET (İCON) KULLANIMIhttp://fortawesome.github.io/Font-Awesome/cheatsheet/

Adresinden bir icon seçin kopyalayın ve kullanmak istediğiniz yere yapıştırın

Not:Eğer Yazı Tipiniz Font Awesome değil ise boş bir kutu görünecektir dikkat ediniz.

3

3.AXURE’A KÜTÜPHANE EKLEMEKİki Türlü kütüphane Eklemesi yapılabir

1-Component oluşturmak-düzenlemek için çalışma ortamı sağlayan kütüphane

2-Hazırlanan Component’leri kullanmak için yüklenecek kütüphane

1- Component oluşturmak-düzenlemek için çalışma ortamı sağlayan kütüphane

4

2-Hazırlanan Component’leri kullanmak için yüklenecek kütüphane

Select Library ile de oluşturduğumuz library’lerin tamamını “All Library” diyerek görüntüleyebiliriz.

5

4.PANELLER

4.1.WidgetsÖncelikle bize hazır gelen library içindeki widgetleri tanıyalım

ImageBu eleman oluşturacağınız sayfaya resim eklemenizi sağlar.

Image’i tut-sürükle-bırak yaparak sayfanıza ekleyin.

Üzerine çift tıklayarak pop-up ekranından resim seçin.

Image eklendi.

Yada bütün bu işlemler yerine resmi tutun sayfaya bırakın yine resim yüklenmiş olur.

Heading 1-Header 2Başlık oluşturmak için kullanılacak elemanlardır.

Farkları ise Header1 nin yazı boyutu Header 2 den daha büyüktür.

Label Türkçe karşılığı etikettir.İstediğiniz herhangi bir yere bıraktığınızda sayfanızda sadece arka planı olmayan pasif bir yazı göreceksiniz.

ParagraphBir bakıma label ile aynı özelliğe sahiptir.Tek farkı satır ve uzunluğu fazladır.

RectanglePasif bir alan oluşturur.Componentleri gruplamayı sağlar.

Sayfa tasarımı yaparken en fazla kullanacağınız eleman budur.

Diğer elemanlara göre daha fazla şekil alma özelliğine sahiptir. Bu yüzden çoğu yerde işe yarar.

Placeholder Placeholder resim oluşturmanızı sağlar.

Bu elemanı şekillendirdiğinizde(üstüne yazı yazdığınızda,küçük bir resim eklediğinizde vs.) sağ tıklayarak “Convert to image ” dediğinizde hazırladığınız görsel artık resimdir üzerine koyduğunuz farklı bir elemanla birleşmiştir artık .

6

Button Shape

Sağdaki koyu gri noktaya tıkladığınızda içinde bulunan şekillere dönüştürebilirsiniz.

Horizontal LineTek satırlık bir çubuktur.Kalınlığını ayarlayarak kullanabilirsiniz.Renklendirebilirsiniz.

Vertical LineTek sutunluk bir çubuktur.Kalınlığını ayarlayarak kullanabilirsiniz.Renklendirebilirsiniz.

Hot SpotTıklanabilir bir alan oluşturmayı sağlar.

7

Dynamic PanelBu panel sayfayı aktif hale getirir.

Örneğin 1 tane gizli panel 1 tanede görünür panel yapalım ve görünür panele tıkladığımızda gizli panel görünür olsun.

Bunun için interactions eklememiz gerekecek.O konu ilerki konularda daha detaylı incelenmiştir.

8

Görünür panele çift tıklayın.

State1 e de çift tıklayarak içinde bulunan çerçeveye renkli bir Rectangle gömelim.Aynı işlemi görünmez panel içinde yapalım (Farklı renkler olursa daha iyi olur.)

9

Rengini buradan ayarlayabilirsiniz.

İnteractions ekleyelim (tıkladığımızda görünür olması için isimlendirmeyi unutmayın )

10

Artık Run ederek web üzerinden deneyelim

İlk olarak böyle bir ekran gelecek

Üzerine tıkladığımızda ise

11

Şeklinde ekran çıktısı verecek.

Yada başka bir örnek Kenarları oval olan bir TextField kullanmamız gereksin.Normal şartlarda TextField ın Corner-Radius özelliği yoktur.Fakat dynamic panel ile mümkün.

Sayfaya Rectangle ekleyerek sağ taraftan Corner Radius ‘unun değerini arttıralım. Rectangle’ın üstüne Dynamic panel koyalım.Dynamic Panele çift tıklayarak state1 durumuna girerek kutunun içine TextBox ekleyelim ve Kenarlıklarını gizleyelim.

Bu şekilde Run edersek kenarları oval olan bir TextBox elde etmiş oluruz.

Inline Frame Bu widget içine farklı bir sayfa yerleştirebilir scrollarla o sayfada gezinti yapabiliriz.

12

RepeaterTablo oluştururken satır ve sütunlara sayı yerleştiren bi widget’tır .

TextFieldİçine kullanıcıdan girdi alabileceğimiz bir kutu oluşturmamızı sağlıyor

TextAreaİçine yazılan metni scroll ile takip etmeyi sağlar.

DroplistBirden fazla seçenek için tek seçim hakkı sunan bir widget’tır.

List BoxBirden fazla seçeneği scroll yardımı ile seçebileceğimiz bir widget’tır.

Check BoxSeçeneklere onay işareti koymamızı sağlayan widget’tır.

RadioButtonSeçeneklere nokta işareti koymamıza yarayan widget’tır.

HTML ButtonTıklanabilir buton oluşturur.

Treeİsmindende anlaşılacağı gibi birbiriyle ilişkili seçenekleri ağaç yapısıyla listeler.

TableTablo oluşturmak için kullanılır

Classic Menu –HorizontalSadece 1 satır 3 sutun oluşturan bir widget’tır

Classic Menu –Vertical Sadece 3 satır 1 sutun oluşturan bir widget’tır

4.2.Widget and İnteractions

OnClickÜzerine tıklandığında ne yapacaksa onun durumunu ve hareketini belirliyoruz.

OnMouseEnterİşaretçi widetin üzerine geldiğinde yapacaklarını belirtiyoruz

OnMouseOut

İşaretçi widgetten uzaklaştığında olacakları belirtiyoruz

OnDoubleClick

Widget üzerine çift tıklandığında olacakları belirtiyoruz.

13

OnContextMenu

Widget üzerinde fare ile sağ tıklandığında ne yapacaksa onları belirtiyoruz.

OnMouseDown

Widget üzerinde fare ile basılı tutulduğunda gerçekleşecek olaylar tanımlanır.

OnMouseUp

Widget üzerinde fare ile basıldığında başka bir olayı tetikliyor.

OnMouseMove

Widgetin üzerine fare geldiği anda olacak olayları belirliyoruz.

OnMouseHover

İşaretçi birkaç saniyewidgetşin üzerinde durduğunda olacakları belirliyoruz.

OnLongClick

Üzerindeyken fareye uzun basıldığında olacakları belirliyoruz.

OnKeyDown

Widget üzerine bir karakter girildiğinde olacakları belirliyoruz.

OnKeyUp

Klavyeden karaktere basılı tutulduğunda yapacapğı işlemi belirtir.

4.2.1.Bazı Widgetlere özgü olaylar

OnSelectionChange

Droplist’te seçim yapıldığındaki olayları tanımlarız

14

OnCheckedChange

Radio Buttonda seçim yapıldığında olacak olayları belirtiriz.

OnTextChange

Text Field yada Text teki yazı değiştirildiğinde olacak olanları belirtiriz.

4.2.2.Dinamic Panele Özgü Olaylar

OnPanelStateChange

Dynamic Paneli üzerindeki nesneyi yada değeri değiştirme imkanı sunar.

OnDragStart

Paneli sürüklemeye başlayınca oluşacak olaylar için geçerlidir.

OnDrag

Paneli sürüklerken oluşacak olaylar için geçerlidir.

OnDragDrop

Panelin taşınması bittikten sonra oluşacak olaylar için kullanılır.

OnSwipeLeft

Panel sağdan sola kaydırıldığında oluşacak olaylar için geçerlidir.

OnSwipeRight

Panel soldan sağa kaydırıldığında oluşacak olan olaydır.

OnLoad

Sayfa yüklenirken dinamic panelde oluşacak olaylar için geçerlidir.

OnSwipeUp

15

Panel aşağıdan yukarıya doğru sürüklendiğinde oluşacak olan olaydır.

OnSwipeDown

Panel yuklarıdan aşağıya kaydırıldığında gerçekleşecek olaydır.

OnScroll

Panlde bbulunan scroll bar ı aşağı yada yukarı sürüklediğimizzde gerçekleşecek olaydır.

OnResize

Paneli boyutlandırmak için kullanacağımız olaydır.

4.2.3.Sayfa Olayları

OnPageLoad: 

Sayfa yüklenirken oluşacak durumlar için

OnWindowResize:

Browser boyutlandırıldığında oluşacak olaylar içn

OnWindowScroll: 

Scrol hareket ettirildiğinde oluşacak olaylar için geçerlidir.

OnPageClickHiçbir yerinde widget bulunmayan bir sayfanın herhangi bir yerine tıklandığında oluşacak olaylar için geçerlidir.

OnPageDoubleClick

Hiçbir yerinde widget bulunmayan bir sayfanın herhangi bir yerine çift-tıklandığında oluşacak olaylar için geçerlidir.

OnPageContextMenu

Hiçbir yerinde widget bulunmayan bir sayfanın herhangi bir yerine sağ-tıklandığında oluşacak olaylar için geçerlidir.

16

OnPageMouseMove

Fare herhangi bir bölümü taşıdığında oluşacak olaylar için kullanılır.

OnPageKeyDown 

Herhangi bir karaktere basıldığındfa oluşacak olayldır.

OnPageKeyUp

Bir karaktere basılı tutulduğunda oluşacak olan olaydır

4.2.4.Add case seçeneği

Şimdi buradaki seçenekler ne işe yarıyor ona bakalım

17

4.2.4.1Links

Current Window

Bulunulan sayfada işileme devam etmek için kullanılır.

New Window/Tab

Yeni sekmede açmak için kullnılır.

Popup Window

Safyanın önüne uyarı biçiminde küçük bir sayfanın gelmesi için kullanılır.

Parent Window

Pop-up a tıklandığında ana sayfada yapılacak değişiklikler için kullanılır.

Close Window

Bulunulan sayfayı kapatır.

Open Link in Inline Frame

Sayfa yüklenirken yönlendirmeler yapmamızı sağlar.(Kendi çerçevesi içinde)

Open Link in Parent Frame

Ana sayfaya yönlendirmeyi sağlar.

Scroll to Widget (Anchor Link)

Sayfada scroll un yerini belirler.

Bring to front

Seçilen widgetin diğerlerinden üstte durmasını sağlar.

Treat as lightbox

Arkaplan rengi oluşturarak istenilen widgeti öne getirir ve arkadaki sayfayı yıne gösterir(Alertleri vs. bu özellik ile yapabiliriz.)

18

Treat as flyout

Arkaplan rengi oluşturarak istenilen widgeti öne getirir ve arkadaki sayfayı gizler.

Push/pull widgetsWidgetin öne çıkıp arkaya gitmesini sağlar.

4.2.4.2.Widgets

Show

Gizli olan widgeti görünür yapar.

Hide

Görünür olan widgeti görünmez yapar.

Toggle Visibility

Bir widgetin tıklanabilir olmasını sağlar.

Enable

Bir widgetin aktif-seçilebilir olmasını sağlar..

Disable

Widgetin pasif olmasını sağlar.

Move

Widgeti belirlenen koordinatlara taşır.

Expand Tree Node

Ağaç widgetinin düğümlerini genişletir(Açılan menü düşünebilirsin)

Collapse Tree Node

Ağaç widgetini düğümlerini küçültür.

19

4.2.4.3.Masters

Sayfada tasarladığımız bir widgete sağ tıklayarak “Convert to Master” dediğimizde bu listede ismini göreceğiz.Bu widgeti oluşturacağımız diğer sayfalarda direk kullanabilmek için çeviridk.

4.2.4.4.Repeater

Add Item to Repeater

İstenilen widgeti tekrar ekler.

Add to Selected Items

Seçilen elemanı dataya ekler

Remove From Selected Items Elemanı Seçilen elemanlar arasından siler.

Edit Selected Items

Seçilen elemanı düzenler.

Delete Selected Items

Seçim yapılabilecek elemanlardan siler.

Add Filter

Sorgu kullanarak elemanları filtrele.

Remove Filter

Bütün filtreleri sil yada birini sil.

20

4.3.Widget Properties and Style

1-Location-Size

2-Base Style

3-Borders,Lines + Files

4-Alignment+Padding

21

4.3.1.Location+SizeWidgetin sayfadaki koordinatlarını ayarlayabiliriz.

Hidden Widgeti gizlememizi sağlar.

4.3.2.Base StyleBurada default olarak “Default ” stil var.İstersek kendimize göre bu değerleri değiştirip yeni stil oluşturabiliriz

4.3.3.Border,Lines +Files çerçeve rengini değiştirmemizi sağlar.

Çerçeve kalımlığını değiştirmemizi sağlar.

Çerçeve stilini değiştirmemizi sağlar.

Sadece Line’lar için geçerlidir (Düz bir çizgiyi ok şeklinde kullanabiliriz.)

Corner Radius Rectangle için kullanılan kenar yumuşatma aracıdır.(ovallik kazandırı.)

Arkaplan rengini belirtir.

Dışardan gölge vermemizi sağlar

Transparanlığını ayarlayabiliriz

Üst ve Sol taraftan içeri doğru gölge vermemizi sağlar

4.3.4.Alignment +Padding

Yazıyı swağa ve sola göre konumlandırır.

22

Yazıyı üst ve alta göre konumlandırı

Satırlar arası mesafeyi ayarlayabiliriz.

Yazıyı çerçeveye mesafeli olarak yerleştirir.

4.4.Widget Manager Burada sayfada hangi widgeti kullandıysak isimlendirdiğimiz şekilde yada default ismiyle çıkar.

Widget tanımları,bölüm tanımlamaları bitti.Şimdi küçük örneklerle anlamaya çalışalım.

5.ÖRNEKLER

5.1.Örnek 1

Oval bir text Box nasıl yapılır?Öncelikle bir rectangle al ve sayfaya yerleştir

Widget Properties and Style kutusundan Corner Radius değerini arttır(default 0)

İçine Dynamic Panel hizala.

Dynamic Panele çift tıkla ve State1 ede çift tıkla yada state 1 i seçip

tıklarsak yine düzenleme sayfasına gideceğiz.

Dynamic Panelin içine girdikten sonra çizgilerin arasına bir TextBox yerleştirin

Text Box seçili durumda Widget Properties and Style kutusundan properties seçeneğine gelip Hide Border dersek kenarlarını gizlemiş oluruz.

Ve Run edelim gördüğünüz gibi artık oval bir textbox ımız var.

Bu tür işlerde aynı yolları izleyerek devam edebilirsiniz.

Bazı widgetlerin Hide Border özelliği yok onları nasıl yaparız?

Bu tür widgetlerde 2 çözüm var

1.Vertical ve Horizontal line kullanarak(Renkleri arkaplan rengiyle aynı olacak şekilde) kenarlarını kapatabiliriz.

23

2-State1 in içindeki kutunun boyutunun 2 şer santim dışına yerleştirerek kenarları yok edebiliriz.

5.2.Örnek 2

Pop-up menüsü nasıl yapılır?

İlk olarak yapmamız gereken tasarlayacağımız sayfa boyutunda bir Dynamic Panel koyalım ve isimlendirelim .

Dynamic Panele çift tıklayarak State1 seçeneğini editleyelim

İçindeki alanı

Opacity (%70 olacak şekilde) ayarını değiştirelim

Üzerine gelmesini istediğiniz pop-up menusunu tasarlayın.

24

Şimdi Ana Sayfaya Dönüp Dynamic Panel arkada kalacak şekilde sayfa tasarımını yapın ve pop-up’un gelmesini istediğiniz buton yada seçeneğe action ekleyelim

Butonu seçin

OnClick olayını seçin

Bring to Frontu Seçin ve sağ taraftan neyi getireceğini seçin (Yani ilk başta isimlendirdiğiniz dynamic Panel ismini tik leyeceksiniz.)

Bring “İsimlendirdiğiniz pop-up dynamic paneli ismi” to Front şeklinde bir olay yazması gerekiyor

Run dediğiniz zaman olay oluşturduğunuz butona gelin ve tıklayın.

İstediğimiz gibi çalışıyor.

Peki bir özellik daha ekleyeli Örneğin pop-up dışında bir yere tıkladığımızda pop-up kapansın yada bir kapat butonumuz olsun ve basınca pop up kapansın

İki işlemde aynı olaydan oluşur birinde buton üstüne tanımlanır diğerinde de

Bu çerçeveye tanımlanır.Hadi birini yapalım.

25

Üstteki olayları geçiyorum sadece buton üstüne tanımlanmış olan olayı gösterelim.

Soldaki gibi bir sayfa tasarladım Admin Panele(ismi önemli değil) bastığınız zaman pop up gelmesini istiyorum.

Şeklinde pop –up geldi .Geri döne bastığımızda Ana sayfaya gitmesini bekliyoruz.

26

Ve gördüğünüz gibi oldu.Şimdi koduna bakalım.

27

POP UP dediği panel sayfa tasarlanmadan önce oluşturduğumuz paneldi hatırlarsanız.

Burada yaptığımız tam olarak

Admin Panele bastığında POP UP paneli öne çıksın(Arkası transparnda zaten)

POP UP içinde GERİDÖNBUTONU na basarsanda Bu POP-UP panelini sakla demek istiyor.

28

5.3.ÖRNEK 3

DYNAMİC PANEL İLE DROPLİST NASIL YAPILIR?

Öncelikle 2 Adet Dynamic Panel alarak başlayalım Bir tanesi görünmez olmalı(Seçenekleri saklamalı ve sadece üzerine basıldığında görünür yapmalıyız.)Diğeri görünür olmalı(Seçtiğimiz seçeneği göstermek için).Görsel olarak devam edelim.

29

Burada 2 panelden birini görünmez yapıyoruz

State1 ‘e çift tıkla

.

Görünmez olana çift tıklayarak Seçenek listesi gelecek kısmı düzenliyoruz(istediğiniz elemanları kullanablirsiniz resim bile olur yani)

30

Aynı şeyleri Label içinde yapmalısınız.

31

Şimdide Görünür Panelde seçtiğimiz seçenek nasıl görünecek diye düzenliyoruz. + dan Hangi seçenekleri kullanacaksak onları yazalım.

32

Hepsine çift tıklayarak Görünür paneldeki şekillerini tasarlıyoruz.

Şimdi Görünür Panelin On Click olayını dolduralım

33

Son görsellerimiz şu şekilde olacak.

Axure Görüntüsü

Görünür Panele Tıklamadan Önce

34

Tıkladıktan Sonra

Seçenek 1 i seçtikten sonra

Eğer droplink teki gibi Aşağı ok butonu koymak isterseniz Görünür Panele ne tanımladıysanız(action) onada tanımlamanız yeterlidir

35

5.4.ÖRNEK 4

Sayfalar Arası Geçiş Nasıl Yapılır?Geçiş yapılmasında rol oynayacak bölgeye Interaction kısmından onClick seçeneğine gelin ve

şeklinde ayarlayın ve Run edin Rectangle a bastığınızda diğer sayfaya yönlendirileceksiniz.

Not2:Eğer prosfesyonel olması gerekmeyen bir component tasarlamak isterseniz yapacağınız sayfanın ekran görüntüsünü alın.Sayfanıza İmage widgeti ile resmi orijinal boyutunda yükleyin ve her bölümü kenarlarını köşelerini dikkate alarak tasarlayın.Her tasarladığınız kompanentten sonra asıl resmi sağ tıklayarak order seçeneğinden Ön e taşıyın.Ve bütün componentler bittikten sonra İlk eklediğiniz resmi silin ortaya yaptığınız componentlerden oluşan düzenli bir sayfa kalacaktır.Kısa zamanda çok iş yapmanızı sağlar.

36