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