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