《Axure原型設(shè)計基礎(chǔ)》項目5 頁面搭建及跳轉(zhuǎn)

Axure原型設(shè)計基礎(chǔ)項目五頁面搭建及跳轉(zhuǎn)學習目標1.掌握簡單頁面的搭建方法。2.掌握設(shè)置頁面跳轉(zhuǎn)的方法。5.1搭建簡單的頁面矩形元件是最常用的元件之一,其交互樣式和交互事件均比較多。選中矩形元件,既可為其添加內(nèi)容,也可以改變元件的圓角和形狀等。文本框元件的樣式比較少,所以常和矩形元件一起使用。可以在元件屬性面板中給文本框元件設(shè)定特殊的輸入格式,用來調(diào)用移動設(shè)備上不同形式的鍵盤,可選格式:文本、密碼、E-mail、number、phonenumber、url、搜索、文件、日期、month、time。還可以給文本框添加提示文字,并編輯提示文字的樣式(提示文字會在單擊文本框時消失)。5.1.1登錄頁面如圖5-1所示的登錄頁面為常見的簡單頁面。圖5-1登錄頁面5.1.2元件樣式的添加1.添加外部陰影選中要添加外部陰影的元件,在菜單欄或元件樣式面板單擊外部陰影按鈕,進行外部陰影的設(shè)置。陰影的顯示位置分為3種情況:(1)四周都有陰影。把偏移的x、y值都設(shè)為0,如圖5-2所示。圖5-2四周都有陰影(2)上側(cè)、左側(cè)有陰影。把偏移的x、y值都設(shè)為負數(shù),如圖5-3所示。圖5-3上側(cè)、左側(cè)有陰影(3)下側(cè)、右側(cè)有陰影。把偏移的x、y值都設(shè)為正數(shù),如圖5-4所示。圖5-4下側(cè)、右側(cè)有陰影2.圓角的設(shè)置選中要設(shè)置圓角的元件,在該元件的左上角會出現(xiàn)一個黃色的倒三角形,鼠標懸停在該圖形上,按住鼠標左鍵左右拖動即可,如圖5-5所示;也可以在元件樣式面板中的“圓角半徑”文本框中直接輸入值,如圖5-6所示。圖5-5更改樣式圖5-6輸入圓角半徑3.圓角顏色的設(shè)置可通過菜單欄中的邊框、線型、填充按鈕設(shè)置元件的邊框樣式以及填充色,如圖5-7所示;也可以在元件樣式面板中進行設(shè)置,如圖5-8所示。圖5-7通過菜單欄設(shè)置填充色圖5-8通過樣式面板設(shè)置填充色4.交互樣式——鼠標懸停鼠標懸停交互樣式常作用于單個元件,只有在預覽的時候,才會顯示交互效果。5.2生成與預覽同樣一個原型,執(zhí)行預覽和生成命令后,在瀏覽器的地址欄里顯示的地址是不一樣的。按“F8”鍵或選擇“發(fā)布”菜單中的“生成HTML文件”命令可打開“生成HTML”對話框,如圖5-9所示。圖5-9文件路徑單擊“生成”按鈕之后,瀏覽器地址欄顯示的就是我們剛才設(shè)置的文件夾路徑。按“F5”鍵或單擊“發(fā)布”菜單中的“預覽”命令進行預覽時,在瀏覽器中的地址欄將顯示以“”開頭的網(wǎng)址,“”就是本機的IP地址。以這種方式打開原型的效果就像把HTML文件上傳到網(wǎng)站服務(wù)器,然后通過輸入網(wǎng)址打開,如圖5-10所示。圖5-10打開效果5.3頁面之間的跳轉(zhuǎn)5.3.1單擊“登錄”按鈕跳轉(zhuǎn)到百度首頁選中“登錄”按鈕,添加交互事件。依次選擇“鼠標單擊時”-“打開鏈接”-“當前窗口”-“鏈接到URL或文件”,在文本框中輸入“”,就能夠?qū)崿F(xiàn)單擊“登錄”按鈕時在瀏覽器當前窗口打開百度首頁的效果,如圖5-11所示。5.3頁面之間的跳轉(zhuǎn)圖5-11添加交互事件5.3.2用例編輯窗口及作用用例編輯窗口包含用例名稱、添加條件、添加動作、配置動作、組織動作等功能,相應的作用及用例見表5-1。表5-1用例編輯窗口多項功能及作用在Axure用例中,動作是由上到下執(zhí)行的,所以設(shè)置好順序至關(guān)重要。就像我們在收衣服的時候必須先打開窗戶,再收衣服,最后關(guān)閉窗戶,打亂順序就會出現(xiàn)問題。5.3.4添加用例在Axure中,一個觸發(fā)事件可以添加多個用例,一個用例可以添加多個動作。項目小結(jié)選中矩形元件,即可為其添加內(nèi)容或設(shè)置元件