伴隨互聯(lián)網(wǎng)的發(fā)展，越來(lái)越多的團(tuán)隊(duì)和企業(yè)開(kāi)始使用自動(dòng)化管理系統(tǒng)。近年來(lái)，各行各業(yè)的B端后臺(tái)管理系統(tǒng)更是應(yīng)運(yùn)而生，并且快速發(fā)展迭代更新，直接推動(dòng)了CMS、OA、 CRM、ERP、POS等系統(tǒng)原型的開(kāi)發(fā)。
相比一般的web頁(yè)面以及其他的互聯(lián)網(wǎng)產(chǎn)品，系統(tǒng)原型模塊更復(fù)雜，層級(jí)更繁復(fù)，僅靠需求文檔無(wú)法滿(mǎn)足溝通需求，因此在開(kāi)發(fā)一個(gè)新系統(tǒng)前，系統(tǒng)原型設(shè)計(jì)的必要性尤為突出。只有通過(guò)全面準(zhǔn)確的系統(tǒng)原型設(shè)計(jì)，才能很好地反映出系統(tǒng)與用戶(hù)的交互，提前驗(yàn)證產(chǎn)品，在原型基礎(chǔ)上進(jìn)一步完善功能模塊，為系統(tǒng)開(kāi)發(fā)做好充足的準(zhǔn)備。
本文將介紹系統(tǒng)原型設(shè)計(jì)的概念和過(guò)程，重點(diǎn)講解管理后臺(tái)系統(tǒng)的原型設(shè)計(jì)實(shí)戰(zhàn)，并推薦幾款精選系統(tǒng)原型模板例子和原型設(shè)計(jì)工具，希望給大家?guī)?lái)幫助。
系統(tǒng)原型設(shè)計(jì)是原型設(shè)計(jì)的一個(gè)細(xì)分領(lǐng)域，它主要是指針對(duì)B端管理后臺(tái)系統(tǒng)而進(jìn)行的原型設(shè)計(jì)。通過(guò)創(chuàng)建一個(gè)簡(jiǎn)化的、可交互的系統(tǒng)模型，系統(tǒng)原型設(shè)計(jì)可以很好的展示和驗(yàn)證系統(tǒng)的功能和用戶(hù)界面。
系統(tǒng)原型設(shè)計(jì)是在軟件開(kāi)發(fā)過(guò)程中的一個(gè)重要階段，根據(jù)不同的業(yè)務(wù)模型，可以采用不同的原型設(shè)計(jì)形式，如低保真原型、高保真原型或可交互原型。
同時(shí)，系統(tǒng)原型設(shè)計(jì)也是產(chǎn)品經(jīng)理、設(shè)計(jì)師和開(kāi)發(fā)者之間溝通需求的重要工具，產(chǎn)品團(tuán)隊(duì)通過(guò)評(píng)審原型，可以快速拉齊思維維度，評(píng)估需求的可行性，提出優(yōu)化和改進(jìn)意見(jiàn)，進(jìn)一步推動(dòng)系統(tǒng)后天策略的實(shí)施。
?。和ㄟ^(guò)原型設(shè)計(jì)，可以模擬用戶(hù)與系統(tǒng)交互的過(guò)程，讓用戶(hù)或客戶(hù)提前了解系統(tǒng)的外觀和操作方式，以便及早發(fā)現(xiàn)和解決用戶(hù)界面設(shè)計(jì)上的問(wèn)題，提升用戶(hù)體驗(yàn)。
?。涸驮O(shè)計(jì)可以幫助開(kāi)發(fā)團(tuán)隊(duì)和客戶(hù)之間更好地溝通和理解需求，通過(guò)原型演示，可以明確和驗(yàn)證系統(tǒng)的功能需求，減少開(kāi)發(fā)過(guò)程中的誤解和變更。
?。和ㄟ^(guò)原型設(shè)計(jì)及早發(fā)現(xiàn)和糾正系統(tǒng)設(shè)計(jì)或功能上的問(wèn)題，從而降低項(xiàng)目的風(fēng)險(xiǎn)。及早解決問(wèn)題可以避免在后期開(kāi)發(fā)階段產(chǎn)生的昂貴的修復(fù)代價(jià)，甚至返工重做。
：用戶(hù)可以通過(guò)與原型進(jìn)行互動(dòng)，提供意見(jiàn)和建議，從而使系統(tǒng)更符合用戶(hù)的需求和期望。
接下來(lái)我們將詳細(xì)介紹系統(tǒng)原型界面的繪制方法，從需求分析到原型落地全面探討系統(tǒng)原型設(shè)計(jì)的過(guò)程。通常，要制作一個(gè)優(yōu)秀的系統(tǒng)后臺(tái)原型，需要包含以下步驟：
接下來(lái)，我們將根據(jù)系統(tǒng)原型的設(shè)計(jì)步驟逐一展開(kāi)講解，每個(gè)設(shè)計(jì)階段用到的工具和方法都不盡相同，一起看看吧~
相比一般的web界面，后臺(tái)的層次結(jié)構(gòu)復(fù)雜，功能上要充分考慮對(duì)前端頁(yè)面的管理，因此后臺(tái)系統(tǒng)對(duì)功能模塊的劃分和頁(yè)面的邏輯梳理要求非常高。
在設(shè)計(jì)時(shí)，要切記后臺(tái)管理系統(tǒng)不是功能的堆積，只有通過(guò)梳理后臺(tái)結(jié)構(gòu)，明確功能之間的關(guān)聯(lián)性和引導(dǎo)方式，才能確保后臺(tái)功能的易用性、操作的流程性以及系統(tǒng)界面的直觀性。
因此，在畫(huà)后臺(tái)原型之前，需要充分進(jìn)行需求分析，首選使用樹(shù)狀結(jié)構(gòu)圖進(jìn)行后臺(tái)功能模板梳理。樹(shù)狀結(jié)構(gòu)圖具有直觀和清晰的展示方式，是功能模板梳理的一種有效的工具，可以完成以下核心內(nèi)容：
完成了核心的功能模塊后，需要考慮各個(gè)模塊如何呈現(xiàn)，也就是需要建立起后臺(tái)系統(tǒng)的核心骨架結(jié)構(gòu)，通常而言，我們需要先對(duì)各個(gè)模塊進(jìn)行優(yōu)先級(jí)劃分，然后選取合理的布局方式進(jìn)行頁(yè)面骨架的建立。
為了清晰的展示頁(yè)面結(jié)構(gòu)，我們需要使用系統(tǒng)原型設(shè)計(jì)工具進(jìn)行頁(yè)面繪制，將核心的頁(yè)面結(jié)構(gòu)呈現(xiàn)出來(lái)，確保布局合理，具有一致性，并且是簡(jiǎn)潔已用的，這樣才能保證好的用戶(hù)體驗(yàn)。
在功能模塊需求確定和頁(yè)面核心骨架確定后，就可以進(jìn)行具體功能頁(yè)面的設(shè)計(jì)了。功能頁(yè)面的設(shè)計(jì)會(huì)按照不同的頁(yè)面需求來(lái)進(jìn)行，這里這里我們將推薦一些最常見(jiàn)的系統(tǒng)軟件原型設(shè)計(jì)進(jìn)行說(shuō)明。
數(shù)據(jù)整合是任何系統(tǒng)軟件都需要的一個(gè)功能模塊，其包含了大量的數(shù)據(jù)信息，并且可以對(duì)數(shù)據(jù)進(jìn)行查看、查詢(xún)、篩選等操作，我們可以使用列表的形式來(lái)直觀地滿(mǎn)足該需求。
列表功能主要用于展示數(shù)據(jù)，可以顯示各種類(lèi)型的信息，如文本、數(shù)字、圖像等。通過(guò)列表，用戶(hù)可以快速瀏覽和查找數(shù)據(jù)，并對(duì)數(shù)據(jù)進(jìn)行排序、篩選和分頁(yè)操作。
列表功能通常提供一些常見(jiàn)的操作，如編輯、刪除、復(fù)制、移動(dòng)等。這些操作可以通過(guò)在列表中的每一行或選中行后的操作按鈕來(lái)執(zhí)行，用戶(hù)可以對(duì)數(shù)據(jù)進(jìn)行修改、刪除或移動(dòng)到其他位置。
列表功能提供了排序和篩選數(shù)據(jù)的能力，以幫助用戶(hù)快速定位和處理感興趣的數(shù)據(jù)，用戶(hù)可以按照指定的字段進(jìn)行升序或降序排序，并使用篩選條件過(guò)濾出符合特定條件的數(shù)據(jù)。
：當(dāng)數(shù)據(jù)量較大時(shí)，列表功能可以支持分頁(yè)或加載更多的方式進(jìn)行數(shù)據(jù)分批加載，通過(guò)分頁(yè)，可以將數(shù)據(jù)劃分為多個(gè)頁(yè)面，使用戶(hù)可以瀏覽不同頁(yè)碼的數(shù)據(jù)。
列表功能通常支持多選操作，用戶(hù)可以通過(guò)選擇多個(gè)行或使用全選功能來(lái)選擇需要進(jìn)行批量操作的數(shù)據(jù)，批量操作可以對(duì)選中的數(shù)據(jù)進(jìn)行統(tǒng)一的操作，如批量刪除、批量移動(dòng)等。
列表功能可以根據(jù)具體需求，支持對(duì)列表中顯示的字段進(jìn)行定制，用戶(hù)可以選擇需要顯示的字段、調(diào)整字段的順序、設(shè)置字段的寬度等，以滿(mǎn)足自己的需求和偏好。
有時(shí)用戶(hù)需要將列表中的數(shù)據(jù)導(dǎo)出為Excel、CSV或PDF等格式，或者直接打印出來(lái)，列表功能可以提供導(dǎo)出和打印的選項(xiàng)，方便用戶(hù)將數(shù)據(jù)用于其他用途或進(jìn)行紙質(zhì)備份。
列表中的每一行通?？梢灾С指嗟牟僮骰蛱峁┰敿?xì)信息的查看，用戶(hù)可以通過(guò)行操作按鈕進(jìn)行特定行的操作，如查看詳情、執(zhí)行特定的動(dòng)作等。
信息列表的原型設(shè)計(jì)，可以采用組件組合的形式，包括：列表、表格、分頁(yè)器、標(biāo)簽欄、輸入框等，完成情況如下圖：
導(dǎo)航設(shè)計(jì)的具體布局會(huì)涉及到前面所講的功能模塊的劃分，系統(tǒng)后臺(tái)通常包含頂部導(dǎo)航和側(cè)邊欄導(dǎo)航，頂部導(dǎo)航的內(nèi)容包含主核心模塊、Logo以及個(gè)人中心。
Logo一般位于頁(yè)面左上角，可以根據(jù)不同的企業(yè)進(jìn)行配置定制化服務(wù)需求，Logo不僅是B端企業(yè)用戶(hù)的標(biāo)識(shí)，也是回到系統(tǒng)首頁(yè)的快速入口。
系統(tǒng)界面原型一般比較復(fù)雜，很多產(chǎn)品層級(jí)甚至達(dá)到3級(jí)或者3級(jí)以上，這種情況下，我們需要使用頂部導(dǎo)航加側(cè)邊欄導(dǎo)航的形式，頂部導(dǎo)航做一二級(jí)，也就是核心木塊，側(cè)面導(dǎo)航做三級(jí)，也就是具體的功能頁(yè)面的入口。
設(shè)計(jì)導(dǎo)航時(shí)需要注意盡量減少層級(jí)，因?yàn)檫^(guò)于復(fù)雜的界面會(huì)對(duì)用戶(hù)造成比較大的使用負(fù)擔(dān)。
個(gè)人中心通常位于界面的右上角，用于賬號(hào)的登錄、退出和切換，除了以上核心功能，也可以在個(gè)人中心整合其他的功能性入口，比如消息通知、自定義設(shè)計(jì)、以及搜索功能等。
數(shù)據(jù)監(jiān)控面板在電商后臺(tái)等Saas產(chǎn)品中很常見(jiàn)，在其他的數(shù)據(jù)分析后臺(tái)也很常用，對(duì)于這一類(lèi)產(chǎn)品而言，數(shù)據(jù)監(jiān)控面板一般位于系統(tǒng)首頁(yè)，顯示整體的數(shù)據(jù)趨勢(shì)，通常包含：產(chǎn)品總用戶(hù)數(shù)、總訂單數(shù)、總銷(xiāo)售額、用戶(hù)來(lái)源、日活、月活、轉(zhuǎn)化率以及對(duì)應(yīng)數(shù)據(jù)的同比、環(huán)比等。
為了清晰的展示各個(gè)數(shù)據(jù)維度，我們?cè)谠驮O(shè)計(jì)時(shí)通常會(huì)利用矩形組件制作信息卡片的方式呈現(xiàn)，為了可視化呈現(xiàn)數(shù)據(jù)裝填，我們結(jié)合使用各類(lèi)圖表組件：
彈出面板在系統(tǒng)后臺(tái)中用于快速設(shè)置信息提示，比如在系統(tǒng)設(shè)置頁(yè)面提交表單時(shí)，會(huì)彈出“提交成功”的提示窗。該效果的制作可以使用彈窗等組件完成。
系統(tǒng)后臺(tái)具有復(fù)雜的頁(yè)面層級(jí)和豐富的功能模塊劃分，因此頁(yè)面切換是最常見(jiàn)的交互方式，制作頁(yè)面切換的效果可以在原型工具摹客RP中使用【選項(xiàng)卡+內(nèi)容面板+輔助畫(huà)板】組合而成的效果，具體操作方式如下：
向主畫(huà)板中拖入一個(gè)選項(xiàng)卡和一個(gè)內(nèi)容面板組件。繪制3個(gè)輔助畫(huà)板，并向輔助畫(huà)板中添加3個(gè)圖片。
設(shè)置內(nèi)容面板的連接頁(yè)面,點(diǎn)擊內(nèi)容面板右上角的圓點(diǎn)，分別連向3個(gè)輔助畫(huà)板。
設(shè)置選項(xiàng)卡與內(nèi)容面板的交互，雙擊選項(xiàng)卡，可以為每個(gè)選項(xiàng)設(shè)置單獨(dú)的交互。分別將3個(gè)選項(xiàng)連向內(nèi)容面板，命令選擇“切換內(nèi)容”，右側(cè)面板分別選擇每個(gè)選項(xiàng)對(duì)應(yīng)的頁(yè)面后，即完成了內(nèi)容切換的設(shè)置。
輪播圖信息可以展示多個(gè)重要信息，可以在摹客RP中使用內(nèi)容面板結(jié)合交互設(shè)計(jì)的方式實(shí)現(xiàn)。
表單頁(yè)是后臺(tái)產(chǎn)品的常用頁(yè)面，具有新增、編輯等功能。使用表單組件可以直接制作基礎(chǔ)表單。
推薦5款后端系統(tǒng)原型模板例子，每個(gè)模板具有不同風(fēng)格和不同的結(jié)構(gòu)系統(tǒng)框架，且涵蓋了大量的常用組件和通用頁(yè)面模板，可以滿(mǎn)足各種系統(tǒng)原型設(shè)計(jì)的需要，快速輸出各種管理信息系統(tǒng)，如CMS、CRM、ERP等系統(tǒng)原型，幫助大家提高輸出效率，節(jié)省原型制作成本。
經(jīng)銷(xiāo)商業(yè)務(wù)管理系統(tǒng)是各經(jīng)銷(xiāo)商用于采購(gòu)銷(xiāo)售、商品庫(kù)存、員工管理等的業(yè)務(wù)管理后臺(tái)，涵蓋采購(gòu)、銷(xiāo)售、庫(kù)存等七個(gè)常用模塊。該原型例子細(xì)節(jié)豐富，且包含了彈窗、時(shí)間選擇器、步驟條等交互效果，組件運(yùn)用上使用了摹客RP的列表、表格、分頁(yè)器、標(biāo)簽欄、輸入框等。
智能充電管理系統(tǒng)具有站級(jí)管理的系統(tǒng)模塊，可實(shí)現(xiàn)對(duì)多級(jí)充電站的集中監(jiān)控和運(yùn)營(yíng)管理，適用于小區(qū)、物業(yè)、單位、停車(chē)場(chǎng)等集中充電場(chǎng)所。該原型主要包含可視化圖表、監(jiān)控中心、管理功能以及統(tǒng)計(jì)報(bào)表等功能模塊。
B2B云端ERP系統(tǒng)是一套購(gòu)銷(xiāo)ERP原型模板案例，可以為購(gòu)銷(xiāo)或其它多種后臺(tái)系統(tǒng)提供參考和借鑒。該例子包含了13+頁(yè)面，不僅覆蓋了系統(tǒng)登錄及注冊(cè)、一套數(shù)據(jù)表盤(pán)風(fēng)格的系統(tǒng)主頁(yè)以及銷(xiāo)售、填單、審核相關(guān)功能，還包含了企業(yè)、員工、角色、日志等系統(tǒng)管理功能以及個(gè)人信息相關(guān)，重置密碼等。
CRM系統(tǒng)是一種廣泛應(yīng)用于B端企業(yè)的客戶(hù)管理系統(tǒng)，主要由業(yè)務(wù)管理、商品管理、客戶(hù)管理3部分構(gòu)成，能夠真實(shí)地反應(yīng)當(dāng)前的營(yíng)收記錄和收支情況，為企業(yè)制定策略提供了重要參考。該例子結(jié)合線(xiàn)下使用場(chǎng)景設(shè)計(jì)，頁(yè)面簡(jiǎn)單、流程完整，能幫助企業(yè)迅速處理并接收各類(lèi)業(yè)務(wù)。
該原型例子是一款智慧樓宇管理類(lèi)系統(tǒng)高保真原型設(shè)計(jì)模板，包括了對(duì)園區(qū)樓宇建筑內(nèi)接入的各子系統(tǒng)設(shè)備進(jìn)行集中監(jiān)控和管理，主要實(shí)現(xiàn)的功能包含：多登錄方式、設(shè)備監(jiān)控（智能照明系統(tǒng)、電梯系統(tǒng)、空調(diào)新風(fēng)系統(tǒng)、消防報(bào)警系統(tǒng)、門(mén)禁管理系統(tǒng)、視頻監(jiān)控系統(tǒng)、信息發(fā)布系統(tǒng)等）、多樣化展示方式（根據(jù)子系統(tǒng)設(shè)備的差異性，提供平面圖、卡片、列表等方式進(jìn)行組合展會(huì)）以及用電、用水、用氣數(shù)據(jù)分析與統(tǒng)計(jì)等能源統(tǒng)計(jì)。
靈活使用一款原型設(shè)計(jì)工具也是系統(tǒng)原型設(shè)計(jì)的關(guān)鍵一步，優(yōu)秀的原型設(shè)計(jì)軟件能幫助我們快速完成界面設(shè)計(jì)和交互設(shè)計(jì)，推薦3款優(yōu)秀的原型設(shè)計(jì)工具給大家。
摹客RP是一款在線(xiàn)原型設(shè)計(jì)工具，它功能比較全面，學(xué)習(xí)曲線(xiàn)低，可以完成界面設(shè)計(jì)、組件設(shè)計(jì)、交互設(shè)計(jì)等核心原型設(shè)計(jì)能。其優(yōu)勢(shì)包含：
組件資源素材庫(kù)豐富，自帶預(yù)設(shè)圖標(biāo)和交互組件，幾千個(gè)圖標(biāo)和組件，退拽即可使用。
內(nèi)置第三方UI組件庫(kù)，比如IOS，Antdesign等，可以快速進(jìn)行UI界面設(shè)計(jì)優(yōu)化。
海量項(xiàng)目模版例子資源，一鍵保存就可以快速?gòu)?fù)用，有很多后臺(tái)模板使用，不用從0開(kāi)始做后臺(tái)設(shè)計(jì)。
學(xué)習(xí)難度低，操作簡(jiǎn)單易上手，且有專(zhuān)門(mén)的客戶(hù)解答微信群，小白用戶(hù)很友好。
交互設(shè)計(jì)能力強(qiáng)大，能制作頁(yè)面級(jí)別以及組件級(jí)別的交互效果，輕松完成頁(yè)面跳轉(zhuǎn)等交互。
Axure RP是一款老牌原型設(shè)計(jì)工具，它功能十分齊全，交互豐富，非常專(zhuān)業(yè)強(qiáng)大，但學(xué)習(xí)成本較高，需要花費(fèi)較多時(shí)間熟悉工具。其優(yōu)勢(shì)包含：
Justinmind是一站式原型設(shè)計(jì)工具，是一款偏向于高保真原型制作的軟件，且更適合設(shè)計(jì)移動(dòng)終端上APP的應(yīng)用。功能強(qiáng)大，集成交互設(shè)計(jì)、設(shè)備適配性、數(shù)據(jù)驅(qū)動(dòng)設(shè)計(jì)、協(xié)作和版本控制、UI庫(kù)和模板、用戶(hù)測(cè)試和反饋等功能于一體。其優(yōu)勢(shì)包含：
開(kāi)發(fā)一款B端后臺(tái)系統(tǒng)難度非常大，通常需要進(jìn)行需求分析、系統(tǒng)原型設(shè)計(jì)、技術(shù)選型、開(kāi)發(fā)、測(cè)試調(diào)試、部署上線(xiàn)以及運(yùn)維等流程。系統(tǒng)原型作為系統(tǒng)開(kāi)發(fā)的起點(diǎn)，重要性不言而喻，它在后臺(tái)開(kāi)發(fā)中起到了快速驗(yàn)證、減少風(fēng)險(xiǎn)、提升用戶(hù)體驗(yàn)和溝通需求的作用，它可以幫助開(kāi)發(fā)團(tuán)隊(duì)和客戶(hù)更好地理解和共享系統(tǒng)設(shè)計(jì)的愿景，并有效地驅(qū)動(dòng)項(xiàng)目向正確的方向發(fā)展，希望以上的內(nèi)容能幫助大家完成系統(tǒng)原型設(shè)計(jì)。返回搜狐，查看更多
