產(chǎn)品原型設(shè)計(jì)教材(編輯修改稿)
2025-02-27 17:41 本頁(yè)面
【文章內(nèi)容簡(jiǎn)介】 面板中，可以通過(guò)工具欄和右鍵菜單來(lái)修改流程圖形狀的風(fēng)格和屬性。另外，已經(jīng)繪制好的流程形狀可以通過(guò)控件右鍵菜單中的“編輯流程形狀 ” 的子菜單進(jìn)行流程圖形狀的轉(zhuǎn)變。 可以在流程圖控件上 分配一個(gè)引用頁(yè)面 ，如果流程圖控件引用了一個(gè)頁(yè)面，控件上的文本會(huì)變成頁(yè)面的名稱，修改頁(yè)面的名稱時(shí)流程圖相應(yīng)頁(yè)面的名稱也會(huì)變化。 在原型中點(diǎn)擊引用了頁(yè)面的流程控件可以自動(dòng)鏈接到頁(yè)面中。 在 頁(yè)面導(dǎo)航面板 中拖拉頁(yè)面到線框圖或流程圖中，將會(huì)創(chuàng)建一個(gè)引用了頁(yè)面的流程圖控件。流程圖控件上所引用的頁(yè)面可以通過(guò)在控件上的右鍵菜單 “編輯流程圖形狀 ” 進(jìn)行編輯和清除。 引用頁(yè)面后，控件左上角會(huì)有一個(gè)“頁(yè)面”圖標(biāo)進(jìn)行標(biāo)識(shí)。 也可以根據(jù)頁(yè)面導(dǎo)航面板中的頁(yè)面層級(jí)關(guān)系自動(dòng)產(chǎn)生流程圖（在頁(yè)面上點(diǎn)擊右鍵，選擇“生成流程圖”），但所生成的流程圖只是根據(jù)你所選擇的頁(yè)面和子頁(yè)面的層級(jí)關(guān)系，并且會(huì)自動(dòng)引用對(duì)應(yīng)的頁(yè)面。一些沒(méi)有頁(yè)面的流程需要手動(dòng)添加。 現(xiàn)在演示一下流程圖做法，并且在流程圖內(nèi)引用現(xiàn)有頁(yè)面、拖拉頁(yè)面進(jìn)流程圖。 ? 右鍵 — 頁(yè)面類型 ? wireframe：頁(yè)面類型定為線框圖，文件圖標(biāo)顯示頁(yè)面圖標(biāo)。 ? flow：頁(yè)面類型定位流程圖，文件圖標(biāo)顯示流程圖標(biāo)。 ? 由于頁(yè)面有兩種類型， wireframe與 flow，所以要善于用這兩種標(biāo)記頁(yè)面，從而讓人理解你的意圖。我總結(jié)大致這兩種標(biāo)記可以如下利用。 ? flow圖為父頁(yè)面， wireframe圖為子頁(yè)面：先畫流程圖，然后根據(jù)流程圖構(gòu)建頁(yè)面關(guān)系。這樣在流程圖的指引下結(jié)構(gòu)頁(yè)面關(guān)系，可以更清晰的理解頁(yè)面框架。 ? wireframe為父頁(yè)面， flow為子頁(yè)面：為頁(yè)面線框圖中的特殊部分做流程解釋?？梢詫?duì)頁(yè)面的細(xì)節(jié)部分進(jìn)行詳盡的解釋。 18 高級(jí)交互設(shè)計(jì) ——?jiǎng)討B(tài)面板 動(dòng)態(tài)面板是我們經(jīng)常使用到的動(dòng)態(tài)效果展示控件，可以讓你的原型中實(shí)現(xiàn)高級(jí)的動(dòng)態(tài)交互功能。動(dòng)態(tài)面板包含有多個(gè)狀態(tài)（ states），每個(gè)狀態(tài)可包含一系列控件。任何時(shí)候都只有一個(gè)狀態(tài)是可見(jiàn)的，或這整個(gè)動(dòng)態(tài)面板可以被隱藏。 結(jié)合交互動(dòng)作，可以讓動(dòng)態(tài)面板的狀態(tài)進(jìn)行隱藏、顯示和改變。像其它控件一樣，可以在控件面板中拖拉動(dòng)態(tài)面板控件，將動(dòng)態(tài)面板控件添加到線框圖中。 在線框圖中，雙擊動(dòng)態(tài)面板可以打開(kāi)一個(gè)“動(dòng)態(tài)面板狀態(tài)管理 ” 對(duì)話框，在對(duì)話框中你可以創(chuàng)建、重命名、重新排序、刪除和編輯動(dòng)態(tài)面板的狀態(tài)。 第一個(gè)狀態(tài)是動(dòng)態(tài)面板的默認(rèn)狀態(tài)。在對(duì)話框中選中一個(gè)狀態(tài)，然后點(diǎn)擊“編輯狀態(tài) ” 按鈕，就可以中打開(kāi)一個(gè)狀態(tài)線框圖進(jìn)行狀態(tài)設(shè)計(jì)。狀態(tài)設(shè)計(jì)和線框圖設(shè)計(jì)是一樣的，狀態(tài)線框圖中的藍(lán)色虛線外框表示動(dòng)態(tài)面板的范圍邊界。 19 高級(jí)交互設(shè)計(jì) ——?jiǎng)討B(tài)面板 可以設(shè)置動(dòng)態(tài)面板在默認(rèn)是隱藏狀態(tài)，比如鼠標(biāo)懸停在某一區(qū)域時(shí)，才顯示此區(qū)域的詳細(xì)內(nèi)容，詳細(xì)內(nèi)容可以使用動(dòng)態(tài)面板編輯，只有鼠標(biāo)懸停在某一控件上時(shí)才觸發(fā)顯示，平時(shí)為隱藏狀態(tài)。 只要選擇動(dòng)態(tài)面板，右鍵菜單選擇“編輯動(dòng)態(tài)面板 設(shè)為隱藏 ” 即可。這將會(huì)隱藏面板內(nèi)容，動(dòng)態(tài)面板的遮罩會(huì)由藍(lán)色變?yōu)辄S色。 交互動(dòng)作可以引發(fā)動(dòng)態(tài)面板的交互。在“交互事件屬性 ” 對(duì)話框中包含了以下可以引發(fā)動(dòng)態(tài)面板交互的動(dòng)作：選擇其中一個(gè)動(dòng)作后就可以和動(dòng)態(tài)面板進(jìn)行交互，并且可以在對(duì)話框下部的“編輯操作描述 ” 選擇一個(gè)要鏈接的狀態(tài)。 在控件注釋和交互面板中，一定要在“標(biāo)簽”輸入框中對(duì)動(dòng)態(tài)面板進(jìn)行標(biāo)識(shí)，以后就可以引用這個(gè)動(dòng)態(tài)面板。如果沒(méi)有為動(dòng)態(tài)面板指定標(biāo)簽名稱，動(dòng)態(tài)面板會(huì)被標(biāo)識(shí)為“ Unlabeled” 。不光動(dòng)態(tài)面板，所有會(huì)產(chǎn)生交互的控件都需要指定“標(biāo)簽”名稱，以方便我們進(jìn)行交互引用。 20 高級(jí)交互設(shè)計(jì) ——?jiǎng)討B(tài)面板 現(xiàn)在我們演示一下使用動(dòng)態(tài)面板實(shí)現(xiàn)如下效果： 點(diǎn)擊某一控件，顯示一個(gè)動(dòng)態(tài)面板。動(dòng)態(tài)面板設(shè)關(guān)閉按鈕，點(diǎn)擊后，關(guān)閉（隱藏）動(dòng)態(tài)面板。 鼠標(biāo)懸停某一控件，顯示一個(gè)動(dòng)態(tài)面板。鼠標(biāo)移出此控件后，動(dòng)態(tài)面板自動(dòng)關(guān)閉（隱藏）。 三則標(biāo)簽分別顯示不同的內(nèi)容，點(diǎn)擊相應(yīng)的標(biāo)簽顯示相應(yīng)內(nèi)容，當(dāng)前激活的標(biāo)簽加亮狀態(tài)，未激活標(biāo)簽暗色狀態(tài)。 某浮動(dòng)窗的收起、展開(kāi)狀態(tài)切換。 鼠標(biāo)懸停某一動(dòng)態(tài)面板，切換顯示另外一種狀態(tài)。 21 高級(jí)交互設(shè)計(jì) ——圖片翻轉(zhuǎn) 剛才我們演示了“鼠標(biāo)懸停某一動(dòng)態(tài)面板，切換顯示另外一種狀態(tài)?！边@是使用 OnMouseEnter、 OnMouseOut事件加動(dòng)態(tài)面板實(shí)現(xiàn)的。不使用 OnMouseEnter, OnMouseOut和動(dòng)態(tài)面板，也可實(shí)現(xiàn)圖片翻轉(zhuǎn)、按鈕樣式翻轉(zhuǎn)。 拖入圖像控件到線框圖中，右鍵菜單選擇“編輯圖片 導(dǎo)入輪換圖片 ” ，然后選擇一張鼠標(biāo)懸停后的圖片。導(dǎo)入成功后，圖片左上角會(huì)多一個(gè)“黑白”小方框 。用鼠標(biāo)移入到 “黑白”小方框上進(jìn)行效果預(yù)覽。 基本效果 輪換效果 矩形、占位符控件同樣具備翻轉(zhuǎn)樣式的設(shè)定，把矩形控件拖到線框圖中，右鍵菜單選擇“ 編輯按鈕形狀 編輯輪換樣式 ” ，在設(shè)置翻轉(zhuǎn)樣式對(duì)話框中可以修改翻轉(zhuǎn)的樣式，比如字體、字色、填充樣式等。應(yīng)用樣式后，在線框圖中用鼠標(biāo)移入到線框圖中按鈕左上角的“黑白”小方框上進(jìn)行效果預(yù)覽。 現(xiàn)在演示一下圖片形式的輪換效果和矩形控件的輪換樣式。 22 高級(jí)交互設(shè)計(jì) ——菜單 菜單控件用于創(chuàng)建簡(jiǎn)單的彈出菜單。菜單控件分為垂直菜單和水平菜單，可以通過(guò)控件面板中拖拉菜單控件到線框圖面板中創(chuàng)建菜單，默認(rèn)情況下菜單帶有 3個(gè)菜單項(xiàng)。 雙擊菜單項(xiàng)可以編輯菜單文本，通過(guò)工具欄可以對(duì)菜單加底色、字體和其它樣式。右鍵單擊選擇編輯菜單，在彈出的菜單邊距編輯器對(duì)話框中可設(shè)置邊距。還可以增加、刪減下級(jí)子菜單的操作。 菜單的設(shè)計(jì)比較簡(jiǎn)單，需要注意的是， 菜單也可以編輯輪換樣式 ，不光針對(duì)菜單全局，還可以針對(duì)某一系列子菜單項(xiàng)設(shè)計(jì)單獨(dú)的輪換樣式。 現(xiàn)在演示一下菜單的創(chuàng)建，以
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號(hào)-1