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