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