達內(nèi)web前端配套課件代碼ui設(shè)計wfd axure

AP原型制作項目基礎(chǔ)與原型制作基礎(chǔ)Unit01上午09:00~09:30作業(yè)講解和回顧09:30~10:20項目流程與信息架構(gòu)設(shè)計10:30~11:2011:30~12:20Axure操作基礎(chǔ)下午14:00~14:5015:00~15:50制作低保真原型16:00~16:5017:00~17:30總結(jié)和答疑項目流程與信息架構(gòu)設(shè)計項目建設(shè)基本流程項目流程與信息架構(gòu)設(shè)計項目流程網(wǎng)站建設(shè)流程需求整理思路需求的獲取需求邏輯分析需求整理基本思路分清主次信息層級設(shè)計做好減法項目建設(shè)基本流程項目流程項目的總體流程包括有調(diào)研階段、研發(fā)階段、測試階段、實施階段等。在研發(fā)階段，項目的流程包括有需求的確認(rèn)、產(chǎn)品架構(gòu)的梳理、交互及框架設(shè)計、原型的制作、UI設(shè)計、前端實現(xiàn)、后臺開發(fā)等基本節(jié)點。項目流程（續(xù)1）網(wǎng)站建設(shè)流程產(chǎn)品策劃制作原型UI設(shè)計前端制作功能實現(xiàn)（后端）圖形頁面整合（前端）測試發(fā)布需求整理思路需求的獲取所謂“需求分析”，是指對要解決的問題進行詳細(xì)的分析，弄清楚問題的要求，包括網(wǎng)站需要什么功能，頁面上都有哪些模塊，各個模塊之間的邏輯關(guān)系等?？梢哉f，在項目當(dāng)中的“需求分析”就是確定項目要“做什么”，要達到什么樣的效果?？梢哉f需求分析是做項目之前必做的。在項目中，需求分析指的是在建立一個新的或改變一個現(xiàn)存的網(wǎng)站時描寫新網(wǎng)站的目的、題材、定義和功能時所要做的所有的工作。需求的獲?。ɡm(xù)1）需求分析是項目中的一個關(guān)鍵過程。在這個過程中，我們需要確定客戶的需要。只有在確定了這些需要后，才能夠分析和找到實現(xiàn)需求的實際方案。需求分析階段的任務(wù)是確定網(wǎng)站項目的功能架構(gòu)。在項目研發(fā)的歷史中，很長時間里人們一直認(rèn)為需求分析是整個項目中最簡單的一個步驟。但在近十年內(nèi)，越來越多的人認(rèn)識到，需求分析是整個過程中最關(guān)鍵的一個環(huán)節(jié)。假如在需求分析時，產(chǎn)品經(jīng)理未能正確地認(rèn)識到客戶的需要的話，那么最后的項目實際上不可能達到顧客的要求，或者網(wǎng)站項目會在無休止的修改中拖延時間，無法在規(guī)定的時間里完工。需求的獲?。ɡm(xù)2）獲取需求有如下常用的方法：（1）參與用戶的日常操作通過親身參加業(yè)務(wù)工作來了解業(yè)務(wù)活動的情況。這種方法可以比較準(zhǔn)確地理解用戶的需求，但比較耗費時間。這種方式適用于功能性項目的需求獲取。（2）開產(chǎn)品會通過與用戶、與需求部門開會座談來了解業(yè)務(wù)活動情況及用戶需求。座談時，參加者之間可以相互啟發(fā)。這個在創(chuàng)業(yè)公司有時會被稱為“頭腦風(fēng)暴”。需求的獲?。ɡm(xù)3）（3）請專人介紹（4）詢問對某些特定的問題，可以找專人詢問。（5）設(shè)計調(diào)查表請用戶填寫如果調(diào)查表設(shè)計得合理，這種方法是很有效，也很易于為用戶接受的。（6）查閱記錄即查閱與原網(wǎng)站項目有關(guān)的數(shù)據(jù)記錄，包括網(wǎng)站的原始版本、需求文檔、歷史瀏覽記錄、用戶數(shù)據(jù)報表等。需求邏輯分析狹義上理解需求分析指需求的分析、定義過程。需求分析就是分析用戶的需求是什么。如果投入大量的人力，物力、財力、時間，開發(fā)出的項目卻無法滿足需求，或者沒有用戶使用，那所有的投入都是徒勞。如果費了很大的精力，開發(fā)一個項目，最后卻不滿足用戶的要求，從而要重新開發(fā)過，這種返工是讓人痛心疾首的（相信大家都有體會）。需求分析之所以重要，就因為它具有決策性、方向性、策略性的作用，它在項目開發(fā)的過程中具有舉足輕重的地位，大家一定要對需求分析具有足夠的重視。在一個大型項目的開發(fā)中，它的作用要遠(yuǎn)遠(yuǎn)大于程序設(shè)計。需求邏輯分析（續(xù)1）簡言之，需求分析的任務(wù)就是解決“做什么"的問題，就是要全面地理解用戶的各項要求，并準(zhǔn)確地表達所接受的用戶需求。需求整理基本思路一、問題識別：是從系統(tǒng)角度來理解項目，確定對所開發(fā)項目的綜合要求，并提出這些需求的實現(xiàn)條件，以及需求應(yīng)該達到的標(biāo)準(zhǔn)。這些需求包括：功能需求（做什么）、性能需求（要達到什么指標(biāo)）、環(huán)境需求（如瀏覽器適配要求、操作系統(tǒng)等）、可靠性需求（不發(fā)生故障的概率）、安全保密需求、用戶界面需求、資源使用需求(網(wǎng)站運行時所需的服務(wù)器資源、數(shù)據(jù)庫大小等)、軟件成本消耗與開發(fā)進度需求、預(yù)先估計以后系統(tǒng)可能達到的目標(biāo)。需求整理基本思路（續(xù)1）二、分析與綜合逐步細(xì)化所有的功能，找出項目中各元素間的邏輯關(guān)系、模塊的功能及設(shè)計上的限制，分析它們是否滿足需求，剔除不合理部分，增加需要部分。最后綜合成系統(tǒng)的解決方案，給出要開發(fā)的項目的詳細(xì)邏輯模型（做什么的模型）。三、制訂項目需求文檔即編制文檔，描述需求的文檔稱為項目需求文檔（說明書）。請注意，需求分析階段的成果是需求文檔，向下一階段提交。信息層級設(shè)計分清主次在確定了需求之后，接下來就要進行信息層級的設(shè)計。將優(yōu)先級高的內(nèi)容優(yōu)先顯示。要區(qū)分好優(yōu)先級，首先應(yīng)該將功能進行分組，然后按照功能需求對其進行排序。用戶在瀏覽我們的網(wǎng)站時，首先看到的應(yīng)該是優(yōu)先級最高的內(nèi)容，放在視覺的焦點位置，其次才是優(yōu)先級次之的內(nèi)容。不能將內(nèi)容一股腦全部丟給用戶，讓用戶自己去區(qū)分優(yōu)先級。信息層級確定了，網(wǎng)站的架構(gòu)就基本確定了分清主次（續(xù)1）分清主次（續(xù)2）（1）一級信息吸引用戶假設(shè)用戶只會在這個頁面停留3-5秒，最能夠吸引用戶繼續(xù)瀏覽的是頁面的核心賣點，是一級信息，它必須少而精，在設(shè)計上要重點展示

（2）二級信息幫助理解有了一級信息的吸引，用戶進一步了解內(nèi)容而可能停留3-5分鐘，這時展示二級信息即提煉的精華內(nèi)容，幫助用戶在盡量短時間內(nèi)理解信息

分清主次（續(xù)3）（3）三級信息詳細(xì)了解前兩類信息基本上能幫助用戶獲取足夠的信息，用戶如果繼續(xù)停留更長的時間去詳細(xì)了解，這類信息量會更多，在設(shè)計上視覺層級會靠后，或通過交互方式展示、提供入口跳轉(zhuǎn)

做好減法信息太多，用戶反而找不到自己想要的東西做好架構(gòu)之后，捋一遍，刪掉不必要的東西頁面只實現(xiàn)最必要的功能，刪繁就簡Axure操作基礎(chǔ)Axure軟件基本操作Axure操作基礎(chǔ)Axure界面介紹面板介紹繪制簡單頁面框架圖設(shè)置頁面基本屬性元件及應(yīng)用繪制框架設(shè)置樣式Axure軟件基本操作Axure界面介紹Axure的正確發(fā)音是“Ack-Sure”，RP則是”RapidPrototyping”快速原型的縮寫，它是一款快速原型設(shè)計工具，能快速幫助設(shè)計者設(shè)計出快捷而簡便的創(chuàng)建基于網(wǎng)站構(gòu)架圖的帶注釋頁面示意圖、操作流程圖、以及交互設(shè)計，并可自動生成用于演示的網(wǎng)頁文件和規(guī)格文件，以提供演示與開發(fā)。Axure界面介紹（續(xù)1）Axure基本界面Axure界面介紹（續(xù)2）1、主菜單工具欄：大部分類似office軟件，不做詳細(xì)解釋，鼠標(biāo)移到按鈕上都有對應(yīng)的提示。2、主操作界面：繪制產(chǎn)品原型的操作區(qū)域，所有的用到的元件都拖到該區(qū)域。3、站點地圖：所有頁面文件都存放在這個位置，可以在這里增加、刪除、修改、查看頁面，也可以通過鼠標(biāo)拖動調(diào)整頁面順序以及頁面之間的關(guān)系。4、axure元件庫：或者叫axure組件庫、axure部件庫，所有軟件自帶的元件和加載的元件庫都在這里，這里可以執(zhí)行創(chuàng)建、加載、刪除axure元件庫的操作，也可以根據(jù)需求顯示全部元件或某一元件庫的元件。Axure界面介紹（續(xù)3）5、母版管理：這里可以創(chuàng)建、刪除、像頁面頭部、導(dǎo)航欄這種出現(xiàn)在每一個頁面的元素，可以繪制在母版里面，然后加載到需要顯示的頁面，這樣在制作頁面時就不用再重復(fù)這些操作。6、頁面屬性：這里可以設(shè)置當(dāng)前頁面的樣式，添加與該頁面有關(guān)的注釋，以及設(shè)置頁面加載時觸發(fā)的事件onpageload。7、元件屬性：這里可以設(shè)置選中元件的標(biāo)簽、樣式，添加與該元件有關(guān)的注釋，以及設(shè)置頁面加載時觸發(fā)的事件；A、交互事件:元件屬性區(qū)域閃電樣式的小圖標(biāo)代表交互事件；Axure界面介紹（續(xù)4）B、元件注釋：交互事件左面的圖標(biāo)是用來添加元件注釋的，在這里我們能夠添加一些元件限定條件的注釋，比如：文本框的話，可以添加注釋指出輸入字符長度不能超過20。C、元件樣式：交互事件右側(cè)的圖標(biāo)是用來設(shè)置元件樣式的，可以在這里更改原件的字體、尺寸、旋轉(zhuǎn)角度等，當(dāng)然也可以進行多個元件的對齊、組合等設(shè)置。8、動態(tài)面板：這個是很重要的區(qū)域，在這里可以添加、刪除動態(tài)面板的狀態(tài)，以及狀態(tài)的排序，也可以在這里設(shè)置動態(tài)面板的標(biāo)簽；當(dāng)繪制原型動態(tài)面板被覆蓋時，我們可以在這里通過點擊選中相應(yīng)的動態(tài)面板，也可以雙擊狀態(tài)進入編輯。面板介紹站點地圖是項目頁面的導(dǎo)航面板,在這里面可以對所有設(shè)計的頁面進行添加、刪除、重命名和組織等。面板介紹（續(xù)1）組件面板中包括有線框圖組件和流程圖組件兩種類型，用這些組件可以進行線框圖和流程圖的相應(yīng)設(shè)計。這里顯示的是所有的組件，后面的一部分是流程圖組件。系統(tǒng)默認(rèn)顯示的線框圖類型的部件。面板介紹（續(xù)2）組件面板中包括有線框圖組件和流程圖組件兩種類型，用這些組件可以進行線框圖和流程圖的相應(yīng)設(shè)計。這里顯示的是所有的組件，后面的一部分是流程圖組件。系統(tǒng)默認(rèn)顯示的線框圖類型的部件。面板介紹（續(xù)3）母版面板：母版是一種可重復(fù)利用的頁面，比如頁面的模板、導(dǎo)航欄、頁首、頁腳等這些類似的元素都可以通過母版來調(diào)用。使用母版的好處是：修改母版時，原型中所有使用該母版的地方都會跟著一起修改。這樣在設(shè)計時可以提高效率并且易于管理。母版的面板和站點地圖有點類似?？梢蕴砑?、組織、編輯。面板介紹（續(xù)4）母版面板面板介紹（續(xù)5）部件屬性：部件屬性面板組位于操作界面的右側(cè)，可以為我們的部件設(shè)置視覺屬性、交互屬性，并且可以對部件進行管理。設(shè)置頁面基本屬性在“項目”菜單下，選擇“部件樣式編輯器”，可對部件樣式進行設(shè)置。設(shè)置頁面基本屬性（續(xù)1）在“項目”菜單下，選擇“部件樣式編輯器”，可對部件樣式進行設(shè)置?？梢栽O(shè)置Axure默認(rèn)的部件樣式，例如鏈接文字等。也可以設(shè)置自定義的部件樣式設(shè)置頁面基本屬性（續(xù)2）在“項目”菜單下，選擇“頁面樣式編輯器”，可對頁面樣式進行設(shè)置。包括頁面背景色、背景圖像、默認(rèn)字體、草圖程度、彩色或是灰度等。這里設(shè)置頁面樣式會對項目下的所有頁面有效設(shè)置頁面基本屬性（續(xù)3）在操作界面的下方也可以設(shè)置頁面樣式，這里設(shè)置頁面樣式操作與項目菜單下的操作方式相同，只是只對當(dāng)前頁面有效。除了可設(shè)置頁面樣式外，還可以設(shè)置頁面注釋、交互動作等基本屬性。元件及應(yīng)用Axure默認(rèn)的元件庫里自帶了很多頁面中常用的元件。除了默認(rèn)元件外，我們也可以下載元件資源安裝使用。默認(rèn)元件常用的有矩形、占位符、輸入框、形狀按鈕、按鈕等。注：

矩形、占位符、形狀按鈕都有很多形狀可以變化、彼此之間也可以相互轉(zhuǎn)換。

繪制簡單頁面框架圖繪制框架按照需求，繪制出頁面原型的框架設(shè)置樣式設(shè)置繪制部件的樣式制作低保真原型頁面原型制作制作低保真原型基本屬性設(shè)置制作頁面原型原型導(dǎo)出添加鏈接添加簡單交互效果預(yù)覽原型發(fā)布原型鏈接添加頁面原型制作基本屬性設(shè)置為整個項目設(shè)置頁面基本屬性，包括字體、內(nèi)容的居中對齊等。制作頁面原型根據(jù)需求，將首頁及內(nèi)頁的原型制作完成。鏈接添加添加鏈接定義鏈接可以讓一個組件響應(yīng)一個動作時（如鼠標(biāo)點擊、飄過）鏈接到其他頁面。在Axure里提供了四種鏈接方式：1、鏈接到設(shè)計中的頁面；2、連接到外部網(wǎng)址或文件；3、重新載入當(dāng)前頁面；4、返回上個頁面。添加鏈接（續(xù)1）可以將鏈接添加給文字，操作方式是選中文本，在工具欄中找到添加文本鏈接的按鈕，然后在彈出的對話框中為文本設(shè)置鏈接。添加鏈接（續(xù)2）也可以將鏈接添加給元件，操作方式是選中元件，在右側(cè)的部件屬性中為元件添加交互動作，選擇一個事件，然后在彈出的對話框中為元件設(shè)置鏈接。添加簡單交互效果在右側(cè)的部件屬性面板中也可以為元件添加其他的交互動作，選擇一個事件