|
概覽 功能性原型設計系列是一系列幫助您實(shí)現原型設計流程的文檔。閱讀后您能了解到核心概念、原型設計的益處、產(chǎn)品選型討論及其它技術(shù)資源。 為何設計用戶(hù)界面原型？ 通常來(lái)說(shuō)，設計用戶(hù)界面(UI)原型的最佳時(shí)機是從草圖設計過(guò)渡到實(shí)際軟件時(shí)。UI的原型設計能幫助您在這個(gè)轉換過(guò)程中理解設計構架及應用要求。 更重要的是它能在一些場(chǎng)合提供針對潛在客戶(hù)和投資者要求形象的設備功能演示。原型設計越復雜，就圍繞該設計的支持建立和反饋收集而言，UI原型設計的價(jià)值就越大。 最后，原型設計人員能夠圍繞其建立起的全局觀(guān)來(lái)進(jìn)行原型的特性設計和功能添加。這種UI原型設計的優(yōu)勢在于能為您節省資金、縮短開(kāi)發(fā)時(shí)間，并最終獲得更好的產(chǎn)品。 
圖1. LabVIEW中的UI設計 (從UI 興趣組中獲得代碼.) 本指南將研究使用NI LabVIEW軟件來(lái)實(shí)現UI的原型設計。LabVIEW是一款高級圖形化編程語(yǔ)言，它具有內置的前面板，使其成為快速開(kāi)發(fā)高度自定義UI的理想工具。LabVIEW能夠幫助用戶(hù)在設計和建模的周期中輕松添加功能性，最小化設計中的重復工作。通過(guò)LabVIEW，您可以快速進(jìn)行UI的原型設計，在整個(gè)原型設計過(guò)程中進(jìn)行修改，并將它部署到成品中。 創(chuàng )建實(shí)體模型 輸入控件和顯示控件是LabVIEW應用的輸入和輸出。用戶(hù)可在代碼編寫(xiě)之前，甚至確定最終應用構架之前創(chuàng )建所有需要的輸入和輸出，并設計前面板。該UI的實(shí)體模型在確定用戶(hù)真正需要的輸入和輸出時(shí)非常有用，用戶(hù)可以利用它來(lái)改善需求文檔。通過(guò)實(shí)體模型，用戶(hù)可創(chuàng )造出切實(shí)的、易于理解的模型，并能在整個(gè)流程直至原型的最終設計甚至部署中使用。
圖2. UI 實(shí)體模型 以簡(jiǎn)明和功能實(shí)現為原則創(chuàng )建實(shí)體模型，并輔助需求文檔和界面設計，如圖2。如果您為投資人和潛在客戶(hù)設計，您一定希望實(shí)體模型具有最終產(chǎn)品的感覺(jué)。從簡(jiǎn)單的、雜亂堆疊的到有吸引力的、直觀(guān)的并不是一件困難的事，您可以在本文之后的敘述中找到一些小竅門(mén)。 添加功能性 UI原型設計的下一步就是向實(shí)體模型中添加功能性，使用戶(hù)可以與前面板進(jìn)行交互，通過(guò)菜單來(lái)調整控制，并通過(guò)采樣數據或隨機生成數來(lái)觀(guān)測結果。您可以通過(guò)向框圖中添加處理用戶(hù)與前面板之間交互的構架來(lái)實(shí)現。 這種方法的特點(diǎn)在于進(jìn)行UI原型設計的同時(shí)還定義了軟件設計的結構。如果這一步做得足夠好，接下來(lái)的整個(gè)原型設計過(guò)程都可以建立在該結構的基礎上。在設計的早期您可以將示例（仿真）數據用于該結構中以盡可能仿真原型設計的功能性，并且可以在算法設計時(shí)一步一步替換掉這些數據。
圖3. 添加到實(shí)體模型中的狀態(tài)機構架 UI原型設計的小技巧 現在您應該已經(jīng)看到建立UI實(shí)體模型，并通過(guò)示例（仿真）數據來(lái)實(shí)現功能是多么快速，一切只需關(guān)注前面板的外觀(guān)和布局。UI形式和種類(lèi)的多樣性使得原型設計的技術(shù)主要取決于應用的需求。然而，以下概念可應用于多數UI原型設計。 為測試或示例（仿真）數據創(chuàng )建“控制器” 控制器部分是臨時(shí)添加入前面板的，您可以通過(guò)它來(lái)改變采樣示例（仿真）的行為。如果您有已保存下來(lái)的真實(shí)測試數據，便可以通過(guò)它來(lái)從文件加載不同數據集，或者修改生成示例（仿真）數據的參數。
圖 4. 冷卻系統UI的控制器 規劃示例（仿真）數據的控制有助于展示UI的所有狀態(tài)及對不同輸入的響應。即時(shí)修改示例（仿真）數據的能力對測試原型設計中的實(shí)際算法而言是一個(gè)非常重要的優(yōu)勢。 選擇有效的方式來(lái)生成示例（仿真）數據 生成示例（仿真）數據的方法可以非常簡(jiǎn)單。LabVIEW中的Express VI和完整的信號生成函數面板使得再復雜的自定義波形也能輕松生成。所采用的方法主要取決于您的目標對象 – 您是試圖給潛在投資人留下深刻影響，還是僅僅想在根據功能原型的要求開(kāi)始編寫(xiě)代碼之前向團隊中的其他成員展示整體概況。
圖5. 一定范圍內的隨機數生成 (根據正態(tài)分布)
圖6. 用戶(hù)控制樣本大小的連續循環(huán)整數
圖7. 用于生成模擬和數字波形的Express VI 使用來(lái)自文件的真實(shí)數據 如果可以的話(huà)使用真實(shí)數據總是很有說(shuō)服力的，即使在模擬極端環(huán)境時(shí)采用了部分人為生成的數據集，在UI實(shí)體模型中使用真實(shí)數據對于潛在投資人和客戶(hù)來(lái)說(shuō)都是強有吸引力的，且可以成為談?wù)摕狳c(diǎn)。 示例（仿真）數據的生成有無(wú)數的變化。重要的一點(diǎn)是通過(guò)使用LabVIEW，您能夠快速輕松地生成復雜示例（仿真）數據，從而將您的關(guān)注點(diǎn)集中到真實(shí)UI上，而非示例（仿真）數據的生成上。 利用層次和透明度 LabVIEW支持導入圖像的透明度設置。使用透明度和層次設置，您可以通過(guò)導入的圖像和簡(jiǎn)單的控制創(chuàng )建出有吸引力的UI元素。 導入圖像 按照一定的風(fēng)格創(chuàng )建自定義控制和向控制中導入圖片。用圖片式控制代替文本框來(lái)實(shí)現可視化的信息傳遞。 您可以看到應用以上概念實(shí)現的冷卻系統VI具有很好的可視性。使您向投資人和客戶(hù)作展示時(shí)收到非常好的效果。
圖8. 吸引人的冷卻系統UI 原型設計流程中的重復 一旦完成UI的原型設計，您便可以通過(guò)添加 I/O、編寫(xiě)聯(lián)系原型與真實(shí)世界的代碼，來(lái)著(zhù)手將它集成到您的物理原型中。在產(chǎn)品設計周期中重復時(shí)，您的UI可能隨著(zhù)添加的要求而改變，或者換一種顯示能夠更加直觀(guān)。通過(guò)LabVIEW，您可以隨著(zhù)設計要求的進(jìn)展輕松更新UI。 部署選項 您在創(chuàng )建了完整功能的原型后無(wú)需將原型UI拋棄。通過(guò)LabVIEW，您可以將應用部署到各種目標上，包括觸摸屏和嵌入式系統。您還可以通過(guò) LabVIEW內置的Web服務(wù)創(chuàng )建終端機應用，使得任何有互聯(lián)網(wǎng)接入的地方都能連接到您的應用。這樣便能實(shí)現諸如通過(guò)智能手機控制應用程序等功能。 下一步 在設計流程的早期進(jìn)行UI原型設計能夠節省資金、縮短開(kāi)發(fā)時(shí)間，并最終獲得更堅固和成功的產(chǎn)品。LabVIEW是一種高級圖形化編程語(yǔ)言，是快速設計高級自定義UI原型的極佳工具。了解更多關(guān)于LabVIEW中UI設計的技術(shù)方面問(wèn)題，可參閱以下相關(guān)資源。更多關(guān)于下一步原型設計流程的信息，返回功能性原型設計系列。 NI公司供稿 |
