Axure原型文檔設(shè)計(jì)(共10頁)

1、精選優(yōu)質(zhì)文檔-傾情為你奉上一、 Axure概況1、 Axure是什么：Axure是一款設(shè)計(jì)原型文檔的軟件原型文檔是什么？原型文檔可以理解為是一個(gè)頁面（或者應(yīng)用、甚至軟件）的草圖。以圖形形式等比例展現(xiàn)出你想要的頁面效果，比如各欄目的安排、各欄目的展現(xiàn)形式（文字列表或者縮略圖等）。設(shè)計(jì)者只需要在意整個(gè)頁面布局是否合理、用戶體驗(yàn)如何，不用在意背景要什么顏色、用什么圖形。這是美工的工作。2、 Axure有什么特色：與其他設(shè)計(jì)工具不同的是l Axure除了能設(shè)計(jì)出頁面原型表現(xiàn)形式，他還能做出一些交互效果。實(shí)現(xiàn)本地交互功能。讓美工和程序員快速理解你要的效果，減少溝通成本。l Axure能生成一個(gè)網(wǎng)頁形式展

2、現(xiàn)的頁面，能更清楚直觀地看到頁面的布局二、 Axure界面介紹區(qū)域：站點(diǎn)地圖。你可以自行刪除增加及重命名。也許舉個(gè)例子，你會(huì)更明白：假設(shè)你在設(shè)計(jì)一個(gè)專題，你需要首頁、文章頁、列表頁。那么你可以設(shè)計(jì)在同一文件中區(qū)域：主編輯區(qū)。頁面排版等都在這個(gè)區(qū)域進(jìn)行區(qū)域：部件區(qū)。提供各種部件讓設(shè)計(jì)者使用，如：矩形、文本框、下拉框、按鈕等區(qū)域：查看部件的尺寸及坐標(biāo)。如下圖區(qū)域：交互功能設(shè)置區(qū)設(shè)計(jì)者可以設(shè)置：某個(gè)按鈕點(diǎn)擊時(shí)的交互（點(diǎn)擊后彈窗或點(diǎn)擊后進(jìn)入一個(gè)列表等）某個(gè)部件鼠標(biāo)移入及移出時(shí)的交互區(qū)域：動(dòng)態(tài)面板編輯要做交互就需要有動(dòng)態(tài)面板，這個(gè)區(qū)域就是編輯動(dòng)態(tài)面板的區(qū)域三、 基礎(chǔ)使用：初學(xué)者可以先不使用交互功能，只使

3、用普通部件功能畫出草圖。所以初學(xué)者最常用到的區(qū)域只有先確定你的頁面寬度既然是原型，那么就需要我們等比例來設(shè)置頁面，布局和排版才能再最終頁面中體現(xiàn)。建議以寬度960/980為基礎(chǔ)來設(shè)計(jì)原型。如下圖：如果是活動(dòng)頁面，設(shè)定要你第一屏需要顯示的內(nèi)容至少要到什么位置，在頁面上表現(xiàn)給美工。接著就可以用各種部件開始畫原型了：畫原型使用的部件，可以在部件區(qū)找到使用方法是拖曳需要的部件到編輯區(qū)即可，部件可以隨意拉伸縮放移動(dòng)位置等。以下介紹幾種常用的部件：【水平菜單】通常是用來做導(dǎo)航，如下：【圖像】頁面中經(jīng)常需要使用到縮略圖或者各種圖片，可以直接使用圖像部件來代替。拖曳到編輯區(qū)后，雙擊圖像，還可以導(dǎo)入本地圖片到編

4、輯區(qū)axure也支持直接截圖到編輯區(qū)粘貼。比如你這時(shí)候需要在頁面中表示一張圖片，也許可以這么做：又或者你想在頁面中布局一個(gè)可以切換的幻燈片，也許你可以這么做：【文本面板】文本面板可以直接輸入文字，在文本面板上輸入的文字，生成到頁面中是可以復(fù)制的。如下圖：【矩形】矩形是最常用來表示板塊的部件比如你需要在頁面中添加一個(gè)經(jīng)驗(yàn)心得的板塊以及一個(gè)視頻的板塊經(jīng)驗(yàn)心得板塊采用文字標(biāo)題形式展示，視頻板塊采用縮略圖加標(biāo)題形式。那么你可以這么做：第一步：將矩形拉到編輯區(qū)，移動(dòng)到合適的位置上。第二步：使用文本面板部件，輸入兩個(gè)板塊的名稱及需要用文字標(biāo)題展示的形式。第三步：使用圖像部件，表示需要用縮略圖展示的形式，如

5、下圖：矩形，精彩拿來畫框架結(jié)構(gòu)，在畫彈窗的是要注意：直接輸入的文字是不可以復(fù)制的哦，最好是在矩形里面放個(gè)文本面板?！景粹o】最直觀展現(xiàn)自己是一個(gè)按鈕的部件美工一看就知道這個(gè)是按鈕，就要有個(gè)按鈕的樣兒比如你想在你的頁面中加幾個(gè)進(jìn)入小工具的按鈕，可以如下：【文本框】文本框你沒概念？那舉個(gè)例子吧，就是那種可以在里面輸入東西的框框。比如搜索框。所以當(dāng)你想要一個(gè)搜索框的時(shí)候，也許你可以運(yùn)用上文本框以及按鈕，如下：【下拉列表框】可以有多個(gè)選項(xiàng)存在，讓用戶選擇。也許你覺得剛才做的那個(gè)搜索有點(diǎn)太沒誠意了，你應(yīng)該幫用戶分類一下，那么我們可以運(yùn)用下拉列表框，于是你的搜索框，變成了這個(gè)樣子：其實(shí)你還可以更有誠意。雙擊

6、下拉列表框這個(gè)部件，可以添加你需要的下拉選項(xiàng)。設(shè)置幾個(gè)選項(xiàng)之后，記得勾選一下默認(rèn)要顯示的那個(gè)，然后再點(diǎn)擊確定于是，就會(huì)變成這樣了根據(jù)需要畫完原型文檔后，別忘記加上廣告條，評(píng)論等。如下圖：還有一些 平時(shí)我們用得相對(duì)少點(diǎn)，但是也很有用的部件：【水平線】這個(gè)部件通?？梢杂脕碜鲎⑨?。比如你需要一個(gè)箭頭，告訴設(shè)計(jì)師和程序一些重要信息。那么你可以先拉一個(gè)水平線到編輯區(qū)然后你可以在最上面，設(shè)置這條橫線的粗細(xì)、線條顏色、箭頭方向等設(shè)置完可以有下面的效果：然后你可以加一些注釋：【復(fù)選框】?？梢哉宫F(xiàn)給你這樣的效果：四、一些注意事項(xiàng)：1、 一定要按照頁面寬度980/960的基礎(chǔ)上，來設(shè)計(jì)你的原型。盡量按你設(shè)想的頁面

7、實(shí)際效果（大小、位置、樣式）設(shè)計(jì)。2、 當(dāng)你在設(shè)計(jì)專題原型的時(shí)候。請(qǐng)注意一些縮略圖尺寸要保持一致，避免上線后縮略圖因拉伸而模糊的問題。比如：首頁的視頻縮略圖尺寸是110X80，那么如果你內(nèi)頁有調(diào)用到最新視頻，那也請(qǐng)?jiān)O(shè)置為110X80。3、 不要遺漏掉廣告條的位置：首頁：通用廣告，尺寸960X90。（自己專題還可以預(yù)留廣告位）內(nèi)頁：通用廣告、側(cè)邊欄動(dòng)漫廣告、評(píng)論上方的廣告4、 收藏按鈕、分享按鈕、評(píng)論、首頁底部友情鏈接、糾錯(cuò)、投稿箱，不要省略、忘記。5、彈窗樣式盡量統(tǒng)一；彈窗里面文字要可以復(fù)制的，可修改的6、如果有必要，請(qǐng)用文字說明注釋說明頁面中，哪些圖片或者文字是需要你可控的。7、活動(dòng)設(shè)計(jì)好之后，把不需要、沒用的頁面刪除掉；不然生成出來的頁面會(huì)很多活動(dòng)原型設(shè)計(jì)注意細(xì)節(jié)：1、登錄賬號(hào)后信息展示清楚（米米號(hào)、多多號(hào)、4399賬號(hào)、陣營、退出、分?jǐn)?shù)、排名、邀請(qǐng)等），不要丟失。2、要考慮好登錄前后，頁面情況；綁定、未綁定情況3、翻頁統(tǒng)一樣式（中間數(shù)字會(huì)變化的難設(shè)計(jì)）4、不要、少用游戲里面的圖片，干擾美工的設(shè)計(jì)思維5、廣告橫幅、獲獎(jiǎng)banner等設(shè)計(jì)，一起提交設(shè)