《網(wǎng)頁設計》課件-11.2 任務一 設計睿歐電子商務網(wǎng)站的原型

SAMPLE項目十一電子商務網(wǎng)站綜合實例任務描述——睿歐電子商務網(wǎng)站結(jié)構(gòu)和層級1技術(shù)引進——了解產(chǎn)品原型軟件Axure2新手試煉——根據(jù)電子商務網(wǎng)站原型設計頁面3411.2任務一設計睿歐電子商務網(wǎng)站的原型任務實施——制作睿歐電子商務網(wǎng)站原型1任務描述——睿歐電子商務網(wǎng)站結(jié)構(gòu)和層級ABOUTME本任務將完成睿歐電子商務網(wǎng)站的原型制作，通過使用Axure將整個站點中的所有頁面和交互效果制作出來，以保證網(wǎng)站在設計開發(fā)過程中的反復修改，提高工作效率，完成網(wǎng)站原型公司簡介和店鋪展示頁如圖所示。2技術(shù)引進——了解產(chǎn)品原型軟件AxureABOUTMEAxureRP是美國AxureSoftwareSolution公司的旗艦產(chǎn)品，是一個專業(yè)的快速原型設計工具。讓負責定義需求和規(guī)格、設計功能和界面的專家能夠快速創(chuàng)建應用軟件或Web網(wǎng)站的線框圖、流程圖、原型和規(guī)格說明文檔。作為專門的原型設計工具，它比一般創(chuàng)建靜態(tài)原型的工具，如Visio、Omnigraffle、Illustrator、Photoshop、Dreamweaver、VisualStudio、FireWorks要快速、高效。目前AxureRP的最新版本為8.0，軟件界面如圖所示。ABOUTMEAxureRP8.0的工作界面看起來非常的簡單，結(jié)構(gòu)清晰，非常方便用戶使用。界面中各區(qū)域如圖所示。ABOUTME1.菜單欄菜單欄位于軟件界面的最頂端。按照功能劃分為文件、編輯、視圖、項目、布局、發(fā)布、團隊、賬號和幫助8個菜單，如圖所示。每個菜單中包含同類的操作命令。用戶可以根據(jù)要執(zhí)行的操作類型在對應的菜單下選擇操作命令。2.工具欄AxureRP8中的工具欄由上半部的基本工具和下半部的樣式工具兩部分組成，如圖所示。下面針對每個基本工具按鈕進行下介紹。ABOUTME3.面板在AxureRP8中一共為用戶提供了5個功能面板，分別是頁面、元件庫、母版、檢視和概要。默認情況下，這5個面板分為2組，分別排列于視圖的兩側(cè)，如圖所示。3任務實施——制作睿歐電子商務網(wǎng)站原型ABOUTME01在Axure中分別將圖片元件、三級標題元件、文本段落元件和矩形元件拖入到頁面中，并修改文字標題，完成首頁面結(jié)構(gòu)原型，如圖所示樣式。在“頁面”面板中創(chuàng)建網(wǎng)站頁面結(jié)構(gòu)，完成效果如圖所示。ABOUTME02繼續(xù)使用相同的方法，完成其他頁面原型的制作，店鋪展示頁面效果如圖所示。將“熱區(qū)”元件從“元件庫”多次拖入頁面中，頁面效果如圖所示。ABOUTME03選擇一個熱區(qū)元件，雙擊“檢視”面板中的“鼠標單擊時”事件，如圖所示。在彈出的“用例編輯”對話框中雙擊“打開鏈接”動作，在右側(cè)選擇要打開的頁面，如圖所示。ABOUTME04使用相同的方法，為其他幾個熱區(qū)添加動作，完成效果如圖所示樣式。05執(zhí)行“文件>保存”命令，將文件保存，單擊軟件界面右上角的“預覽”按鈕，在瀏覽器中查看制作效果和交互效果，如圖所示樣式。4新手試煉——根據(jù)電子商務網(wǎng)站原型設計頁面ABOUTME網(wǎng)站原型設計制作完成后，設計師既可以根據(jù)原型開始設計網(wǎng)站頁面。由于已經(jīng)將網(wǎng)站的布局和交互都確定下來了，設計師在設計頁面時，只需要考慮頁面的美觀性即可。大大的減少了設計師的工作復雜度。ABOUTMEPPT模板下載：/moban/行業(yè)PPT模板：/hangye/節(jié)日PPT模板：/jieri/PPT素材下載：/sucai/PPT背景圖片：/beijing/PPT圖表下載：/tubiao/優(yōu)秀PPT下載：/xiazai/PPT教程：/powerpoint/Word教程：/word/Excel教程：/excel/資料下載：/ziliao/PPT課件下載：/kejian/范文下載：