我們?nèi)绻朐诓煌男枨蠓治?，不同的產(chǎn)品設(shè)計(jì)時(shí)，能夠隨心所欲地使用axure來設(shè)計(jì)原型，而不必?fù)?dān)心如何實(shí)現(xiàn)，那么我們必須遵循這樣一句話——工欲善其事，必先利其器。就像一個(gè)設(shè)計(jì)師對(duì)PS的掌握一樣，要成為原型設(shè)計(jì)的一把瑞士軍刀。

那是不是要使用到axure一些高深的技巧才能滿足我們的需要呢，其實(shí)也并不是這樣，我們只需要把工具的常用功能使用好，就足以應(yīng)付日常的原型設(shè)計(jì)了，我們從實(shí)際的例子來看看如何更好地使用axure。

這不是一篇專門介紹技巧的帖子，而是在使用工具的過程中學(xué)習(xí)如何思考，如何能使用系統(tǒng)的基本功能來完成我們的原型設(shè)計(jì)，看看哪些基礎(chǔ)的東西需要我們來掌握。

第一個(gè)例子：按鈕——交互樣式的設(shè)置

axure本身自帶了按鈕的組件，包括Button Shape和Submit，其中Submit的樣式不可以設(shè)置邊框、半徑、背景等樣式，因此不是很方便。而Button Shape即是通過普通的矩形框，設(shè)置一定的屬性而成的，將寬帶和高度設(shè)置成按鈕大小，并設(shè)置好圓角風(fēng)格。而通常情況下，扁平化風(fēng)格的流行，一般是直接拖一個(gè)矩形后直接改樣式，通過設(shè)置它的屬性后作為按鈕使用。

大小我們通過直接選擇圖形然后調(diào)整，設(shè)置默認(rèn)背景色，然后選擇右鍵“交互樣式”：

在彈出的對(duì)話框里，可以看到設(shè)置鼠標(biāo)操作的四種樣式：

為了響應(yīng)樣式變化，我們一般要設(shè)置的屬性值有字體顏色、線條顏色、線寬（例如無邊框）、和填充顏色，這四個(gè)屬性基本滿足了一個(gè)按鈕的幾個(gè)狀態(tài)，最簡單的情況下，只設(shè)置鼠標(biāo)經(jīng)過狀態(tài)，就能表現(xiàn)一個(gè)按鈕的樣子了。

除了按鈕，矩形框要以作為背景、標(biāo)題欄等，用途很廣泛。

點(diǎn)擊查看在線演示

第二個(gè)例子：關(guān)于TAB屬性頁的樣式——開動(dòng)腦筋

當(dāng)我們拖幾個(gè)矩形框來模擬TAB屬性頁的樣子時(shí)，發(fā)現(xiàn)矩形框的排列因?yàn)檫吙虻脑颍蚋髯赃吙虻脑?，?huì)發(fā)現(xiàn)邊框接觸處有兩條線：

處理的方式有幾種：一是將組件之間相互再靠近一個(gè)像素，讓它們邊框重疊，這樣只會(huì)出現(xiàn)一條線，二是將矩形框的形狀換成另外一個(gè)形狀，看看有其它什么形狀：

我們可以看到各種圖形樣式，看看上面的第二個(gè)樣式，沒有下邊框的矩形，這個(gè)恰好可以作為TAB屬性頁的上邊按鈕：

但是發(fā)現(xiàn)上面的三個(gè)TAB之間的豎線比較粗，可以使用上面說的第一種方式，水平向左移動(dòng)它們的位置，讓它們重疊一個(gè)像素，做成下面的樣式

但我們發(fā)現(xiàn)這樣的TAB屬性框還是有問題，第一個(gè)TAB按鈕下方不應(yīng)該顯示邊框，因?yàn)槲覀円w現(xiàn)當(dāng)前選中的屬性頁，但因?yàn)槭呛髞硖砑拥膸н吙虻木匦?，這個(gè)如何處理呢？——每個(gè)組件都可以設(shè)置它在界面上的顯示順序，好了，可以利用這個(gè)屬性，將TAB第一個(gè)按鈕的順序調(diào)整到最上層：

在一開始我們剛接觸時(shí)，不知道這些屬性時(shí)，我們甚至可以用一條白色的線來遮住它，只要能達(dá)到效果，都是有效的方法，雖然它不是最好的方法。

點(diǎn)擊查看在線演示

第三個(gè)例子：如何在輸入框獲得焦點(diǎn)時(shí)改變邊框顏色——組合方法

前兩天有同學(xué)問如何實(shí)現(xiàn)在輸入框獲得焦點(diǎn)時(shí)改變輸入框的顏色？因?yàn)樗l(fā)現(xiàn)axure的邊框是不能改變顏色的，沒有這樣的屬性。

我們可以分析一下這種效果：

1. 輸入框獲得焦點(diǎn)時(shí)，改變邊框顏色：輸入框的獲得焦點(diǎn)事件
2. 失去焦點(diǎn)時(shí)，顏色還原：輸入框的失去焦點(diǎn)事件

既然輸入框沒有邊框設(shè)置，我們是否可以用其它組件代替呢？然后通過輸入框的獲得焦點(diǎn)和失去焦點(diǎn)的事件來改變邊框的顏色，而改變顏色根據(jù)上面的第一個(gè)例子，我們可以通過改變組件【選中】的樣式來實(shí)現(xiàn)，最后將輸入框自身的邊框隱藏掉，這樣就達(dá)到最終我們想要的效果

第四個(gè)例子：聊天氣泡圖標(biāo)——自定義圖標(biāo)，形狀的巧用

聊天氣泡圖標(biāo)，像微信的圖標(biāo)，它是一個(gè)橢圓形+三角形的組件。那么我們利用axure的圖形是否可以實(shí)現(xiàn)呢——答案顯然可以。

我們添加個(gè)形狀，修改形狀為橢圓形，然后再添加再添加個(gè)形狀，設(shè)置為三角形，但我們?nèi)绾芜_(dá)到第二個(gè)圖形的效果呢？

我們發(fā)現(xiàn)圖形是可以旋轉(zhuǎn)的，先將三角形高度調(diào)小一點(diǎn)，然后按住ctrl鍵，移動(dòng)鼠標(biāo)到上面的紅色箭頭指向的選中狀態(tài)的8個(gè)矩形框的四個(gè)中間矩形框處，會(huì)出現(xiàn)旋轉(zhuǎn)的鼠標(biāo)形狀，這時(shí)就可以旋轉(zhuǎn)了（也可以在屬性設(shè)置框里設(shè)置旋轉(zhuǎn)角度，但這時(shí)你不知道設(shè)置的角度值應(yīng)該是多少）

點(diǎn)擊查看在線演示

本文由 @Axure原型設(shè)計(jì)工場(chǎng) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。