本文基于工作以來(lái)實(shí)際項(xiàng)目情況，總結(jié)歸納出一些項(xiàng)目原型設(shè)計(jì)時(shí)相關(guān)經(jīng)驗(yàn)，其中也有部分G端原型設(shè)計(jì)時(shí)可能會(huì)存在通用性的要點(diǎn)總結(jié)，希望對(duì)你有所幫助。

一、原型設(shè)計(jì)的定義

原型設(shè)計(jì)是在項(xiàng)目開(kāi)發(fā)過(guò)程中重要的一個(gè)環(huán)節(jié)，指的是產(chǎn)品正式開(kāi)開(kāi)發(fā)前，根據(jù)需求、文字、線(xiàn)條、圖形等組件會(huì)指出產(chǎn)品的框架圖，用于展示產(chǎn)品的交互邏輯、功能布局、以及動(dòng)態(tài)交互效果。

二、原型設(shè)計(jì)的目的與作用

不論是G端還是B端，產(chǎn)品原型設(shè)計(jì)出來(lái)的的目的就是能夠有效傳達(dá)產(chǎn)品的功能、頁(yè)面內(nèi)容、交互邏輯。原型設(shè)計(jì)不僅對(duì)外能夠向客戶(hù)匯報(bào)需求落地的模擬展示，對(duì)內(nèi)能夠?yàn)楹罄m(xù)的開(kāi)發(fā)、測(cè)試和優(yōu)化提供重要依據(jù)。

1、面向客戶(hù)

對(duì)于B端項(xiàng)目而言，客戶(hù)就是企業(yè)，包括企業(yè)的決策者和業(yè)務(wù)人員。

對(duì)于G端項(xiàng)目而言，客戶(hù)就是政府，包括政府決策者（高層領(lǐng)導(dǎo)）、政府管理層（中層領(lǐng)導(dǎo)）、基層業(yè)務(wù)人員。這里我就以G端角度展開(kāi)介紹下：

1）政府決策者

他們一般在機(jī)構(gòu)中基本都是高層領(lǐng)導(dǎo)，主要負(fù)責(zé)一些政策或者重大事項(xiàng)的決策。在一個(gè)信息化項(xiàng)目中，他們的關(guān)注點(diǎn)通常在于項(xiàng)目是否能符合政策導(dǎo)向、項(xiàng)目的標(biāo)桿性體現(xiàn)以及是否有政績(jī)產(chǎn)出。因此原型匯報(bào)時(shí)，需要提供全面的數(shù)據(jù)分析、決策支持、以及可視化展示功能，這些更多是依托于駕駛艙進(jìn)行呈現(xiàn)的，以便與幫助他們更好的掌握業(yè)務(wù)方向和情況，輔助其做出決策判斷。

2）政府管理層

主要指的是中層領(lǐng)導(dǎo)，比如主任、科長(zhǎng)這些負(fù)責(zé)監(jiān)管具體項(xiàng)目?jī)?nèi)容與推進(jìn)的人群，他們的關(guān)注點(diǎn)一般在于項(xiàng)目實(shí)際的運(yùn)行效果和管理效率，比較注重終端用戶(hù)反饋和滿(mǎn)意度，關(guān)心項(xiàng)目的長(zhǎng)期成功和可持續(xù)性。因此原型匯報(bào)時(shí)，需要重點(diǎn)介紹項(xiàng)目背景與業(yè)務(wù)價(jià)值、系統(tǒng)功能與設(shè)計(jì)、數(shù)據(jù)安全性與穩(wěn)定性、實(shí)施計(jì)劃與進(jìn)度以及后續(xù)支持與優(yōu)化等方面。這些側(cè)重點(diǎn)能夠全面展示項(xiàng)目的優(yōu)勢(shì)和價(jià)值，贏得中層領(lǐng)導(dǎo)的支持和認(rèn)可。

3）基層業(yè)務(wù)人員

主要指的是直接操作和使用系統(tǒng)的一線(xiàn)工作人員。他們的關(guān)注點(diǎn)在于系統(tǒng)操作是否流暢性以及對(duì)實(shí)際工作效率的是否有提升。因此原型設(shè)計(jì)時(shí)，需要確保系統(tǒng)界面友好、操作簡(jiǎn)便，能傻瓜式的操作就傻瓜式設(shè)計(jì)。

2、面向內(nèi)部

原型設(shè)計(jì)對(duì)內(nèi)部的作用主要可以明確需求與期望、可以促進(jìn)團(tuán)隊(duì)協(xié)作與溝通、及早發(fā)現(xiàn)并解決問(wèn)題、降低開(kāi)發(fā)成本、提高產(chǎn)品質(zhì)量、指導(dǎo)開(kāi)發(fā)進(jìn)度以及提升決策效率，并且對(duì)內(nèi)部不同角色而言，其意義和作用也各不相同。以下是對(duì)UI、開(kāi)發(fā)、測(cè)試、運(yùn)維以及老板等角色在原型設(shè)計(jì)中的作用的詳細(xì)分析：

1）UI設(shè)計(jì)師

原型為UI設(shè)計(jì)提供了一個(gè)可視化的呈現(xiàn)方式。通過(guò)原型，設(shè)計(jì)師可以展示他們的設(shè)計(jì)思路，包括顏色、布局、字體、圖標(biāo)等元素的使用，以及用戶(hù)與界面交互的方式。這有助于團(tuán)隊(duì)成員和利益相關(guān)者更直觀地理解設(shè)計(jì)，并在視覺(jué)上達(dá)成共識(shí)。

2）開(kāi)發(fā)人員

原型設(shè)計(jì)可以清晰展示產(chǎn)品的功能和界面設(shè)計(jì)，能夠幫助開(kāi)發(fā)理解開(kāi)發(fā)需求，也可以提高他們開(kāi)發(fā)效率，同時(shí)可以根據(jù)原型模擬演示，幫助其發(fā)現(xiàn)潛在的問(wèn)題并能及時(shí)解決。

原型設(shè)計(jì)也可以作為開(kāi)發(fā)進(jìn)度的參考基準(zhǔn)，幫助開(kāi)發(fā)人員規(guī)劃時(shí)間和資源分配，評(píng)估開(kāi)發(fā)周期，確保項(xiàng)目按時(shí)交付。

3）測(cè)試人員

原型設(shè)計(jì)和需求開(kāi)發(fā)文檔，能夠幫助測(cè)試人員制定測(cè)試計(jì)劃，讓他們明確知道哪些功能是需要測(cè)試的，同時(shí)也可以根據(jù)原型模擬演示，提早發(fā)現(xiàn)潛在的問(wèn)題并能及時(shí)解決。

4）運(yùn)維人員

原型設(shè)計(jì)可以幫助運(yùn)維人員了解產(chǎn)品的架構(gòu)和功能布局，有助于產(chǎn)品上線(xiàn)后更好維護(hù)和管理工作。

5）老板

通過(guò)原型直觀的展示產(chǎn)品功能和細(xì)節(jié)，可以讓老板更好的了解產(chǎn)品整體情況，了解產(chǎn)品的核心競(jìng)爭(zhēng)力和市場(chǎng)定位，幫助老板更加準(zhǔn)確地評(píng)估產(chǎn)品的價(jià)值和市場(chǎng)前景。

三、原型設(shè)計(jì)的工具

在產(chǎn)品原型設(shè)計(jì)中，選擇合適、趁手的工具很重要。推薦幾個(gè)常見(jiàn)的原型設(shè)計(jì)工具，它們各有特色，適用于不同的場(chǎng)景和需求：

當(dāng)然，市面上還有很多其他優(yōu)秀的原型工具，比如，即時(shí)設(shè)計(jì)、POP、Balsamiq、UXPin、Adobe Spark、Framer、Sketch、Adobe XD等等，每個(gè)工具都有不同的側(cè)重點(diǎn)，看個(gè)人習(xí)慣、項(xiàng)目需求以及公司情況使用。

四、G端原型設(shè)計(jì)需要注意要點(diǎn)

1、駕駛艙的設(shè)計(jì)

G端駕駛艙的設(shè)計(jì)主要面向領(lǐng)導(dǎo)層，還是對(duì)于駕駛艙的原型設(shè)計(jì)還是很重要的，我這邊總結(jié)了一些產(chǎn)品設(shè)計(jì)時(shí)需要考慮到的要點(diǎn)：

1）數(shù)據(jù)溯源可靠

確保駕駛艙所展示的數(shù)據(jù)來(lái)源于政府內(nèi)部可靠、權(quán)威的數(shù)據(jù)庫(kù)或信息系統(tǒng)?，F(xiàn)在政府所有的數(shù)據(jù)化項(xiàng)目都在講數(shù)據(jù)共享，消除信息孤島這件事，因此在項(xiàng)目設(shè)計(jì)時(shí)，能夠從更多官方渠道采集更多相關(guān)聯(lián)的數(shù)據(jù)。比如，我們?cè)谧稣憬胤綄徲?jì)項(xiàng)目時(shí)，審計(jì)署有現(xiàn)成的金三計(jì)劃項(xiàng)目數(shù)據(jù)，浙江省廳有整改管理項(xiàng)目數(shù)據(jù)，因此我們計(jì)劃項(xiàng)目數(shù)據(jù)是從金三回流出來(lái)的，整改問(wèn)題數(shù)據(jù)是從整改系統(tǒng)回流出來(lái)的。

2）數(shù)據(jù)口徑明確

確保駕駛艙展示的所有數(shù)據(jù)統(tǒng)計(jì)的口徑要有根據(jù)。比如之前負(fù)責(zé)的審計(jì)業(yè)務(wù)中，今年計(jì)劃完成項(xiàng)目數(shù)，今年項(xiàng)目完成數(shù)，這兩個(gè)的區(qū)別就在與，一個(gè)是今年計(jì)劃開(kāi)始并且今年完成的，一個(gè)是要包括去年計(jì)劃的項(xiàng)目今年完成的+今年計(jì)劃開(kāi)始并且今年完成的。

3）數(shù)據(jù)呈現(xiàn)要直觀

可以通過(guò)圖形、圖表、儀表盤(pán)等方式，使水更加直觀易懂，便于管理層快速了解業(yè)務(wù)狀態(tài)。（圖片素材來(lái)自已購(gòu)買(mǎi)的Axure駕駛艙模板截圖）

4）數(shù)據(jù)能產(chǎn)生價(jià)值

不需要將所有的數(shù)據(jù)統(tǒng)計(jì)結(jié)果都展示出來(lái)，但是需要確保展示出數(shù)據(jù)是有意義的，盡量找一些和業(yè)務(wù)緊密聯(lián)系的核心關(guān)注點(diǎn)，或者能夠?yàn)闆Q策者提供可分析性質(zhì)的數(shù)據(jù)。比如，內(nèi)審部門(mén)會(huì)收集內(nèi)審人員信息，包括，姓名、性別、出生年月、身份證號(hào)、學(xué)歷、年齡、職稱(chēng)、聯(lián)系電話(huà)、聯(lián)系地址、是否實(shí)際在崗、是否專(zhuān)職、知識(shí)結(jié)構(gòu)、任職履歷等，這些信息都是內(nèi)審指導(dǎo)監(jiān)督時(shí)需要掌握的信息，但是我們不需要把所有信息都放在大屏上呈現(xiàn)，只需要保留核心關(guān)注的數(shù)據(jù)，比如內(nèi)審人員總數(shù)、專(zhuān)職、兼職、年齡、學(xué)歷、職稱(chēng)，其中年齡、學(xué)歷、職稱(chēng)采用圖表展示，能直觀展示出當(dāng)前全市內(nèi)審人員情況。

5）明確數(shù)據(jù)更新機(jī)制

確保駕駛艙中的數(shù)據(jù)能夠?qū)崟r(shí)反映政府機(jī)構(gòu)的最新業(yè)務(wù)情況。駕駛艙上有些數(shù)據(jù)是周期性統(tǒng)計(jì)的，有些是實(shí)時(shí)統(tǒng)計(jì)的，因此需要明確的向客戶(hù)展示出來(lái)，這些信息的更新頻率是怎樣的。頁(yè)面默認(rèn)都是實(shí)時(shí)數(shù)據(jù)展示，比如都是24年最新的實(shí)時(shí)數(shù)據(jù)情況，如果需要周期性統(tǒng)計(jì)，就比如在標(biāo)題寫(xiě)上，近三年審計(jì)項(xiàng)目趨勢(shì)圖，或者默認(rèn)展示最新數(shù)據(jù)，支持客戶(hù)周期性選擇數(shù)據(jù)范圍。

6）數(shù)據(jù)下鉆

通過(guò)用戶(hù)的操作（如點(diǎn)擊、拖動(dòng)、縮放等）實(shí)現(xiàn)數(shù)據(jù)穿透，便于用戶(hù)更加精準(zhǔn)地掌握業(yè)務(wù)運(yùn)行中的問(wèn)題和挑戰(zhàn)，為制定有效的政策措施提供數(shù)據(jù)支持。

7）駕駛艙也要美觀

在直觀性、美觀性、信息層級(jí)清晰層面去設(shè)計(jì)。不同以往的G端系統(tǒng)能用就行的狀態(tài)，現(xiàn)在也需要在美觀方面多下些功夫，這些需求旨在提升用戶(hù)體驗(yàn)和滿(mǎn)意度，同時(shí)確保駕駛艙能夠準(zhǔn)確、高效地傳達(dá)數(shù)據(jù)和信息，為決策提供有力支持。

8）響應(yīng)式布局

確保駕駛艙在不同設(shè)備（如電腦、平板、手機(jī)等）上都能保持良好的顯示效果，提升跨平臺(tái)兼容性。能夠根據(jù)屏幕尺寸和分辨率自動(dòng)調(diào)整布局和圖表大小，確保數(shù)據(jù)和信息在任何設(shè)備上都能清晰展示。

2、業(yè)務(wù)后臺(tái)設(shè)計(jì)

考慮到政府信息化的產(chǎn)品，買(mǎi)單的一般都不是使用的，對(duì)于業(yè)務(wù)后臺(tái)的實(shí)際操作人員更多是基層業(yè)務(wù)人員使用。因此在原型設(shè)計(jì)中需要保證不增加基層業(yè)務(wù)人員和工作量，能提高他們的工作效率是最好的。具體每個(gè)項(xiàng)目的業(yè)務(wù)也不同，因此我總結(jié)了一些共性特點(diǎn)：

1）簡(jiǎn)化操作流程

A：業(yè)務(wù)操作路徑要清晰：通過(guò)明顯的分類(lèi)層級(jí)，或者導(dǎo)航菜單設(shè)計(jì)，幫助用戶(hù)快速找到所需功能。比如可以使用一些頂部菜單、側(cè)邊導(dǎo)航、下拉菜單形式，讓用戶(hù)清楚的知道該去哪里做事情。（圖片來(lái)自于Element 截圖）

B：減少功能拆分：盡可能的操作步驟放在一起操作，避免將任務(wù)節(jié)點(diǎn)拆分夠多。如果一個(gè)業(yè)務(wù)流程很長(zhǎng)，在設(shè)計(jì)時(shí)就存在很多步驟的情況，對(duì)應(yīng)也會(huì)產(chǎn)生很多的頁(yè)面交互，這樣會(huì)導(dǎo)致用戶(hù)操作耐心下降，因此盡量簡(jiǎn)化操作步驟，盡量在讓那個(gè)同一個(gè)角色在一個(gè)環(huán)節(jié)能做的多做一些事情。

C：減少不必要的頁(yè)面跳轉(zhuǎn)：能在一個(gè)頁(yè)面展示出現(xiàn)的信息，盡量不要增加跳轉(zhuǎn)。可以通過(guò)一些彈窗、折疊面板、抽屜或者合并頁(yè)面形式。

2）優(yōu)化布局和展示

A：重要入口優(yōu)先展示：將重要的功能入口提升到更高的優(yōu)先級(jí)，使其更加顯眼和易于訪(fǎng)問(wèn)。比如，可以使用較大的按鈕、醒目的顏色等方式來(lái)突出顯示。

B：界面要簡(jiǎn)介，布局合理布局：界面應(yīng)簡(jiǎn)潔明了，易于理解和操作。同時(shí)可以將常用的功能按鈕和操作區(qū)域放置在顯眼位置，方便用戶(hù)快速訪(fǎng)問(wèn)。

3）優(yōu)化操作功能

A：支持批量操作：提供批量刪除、批量修改等批量操作功能，減少用戶(hù)的重復(fù)操作。

B：使用拖拽拖放功能：對(duì)于需要排序或調(diào)整布局的功能，可以采用拖拽與拖放的方式，使用戶(hù)能夠直觀地操作并快速完成任務(wù)。比如，排課表中可以將課程推拽到對(duì)應(yīng)的空格中。

C：智能提示和輔助操作：在用戶(hù)輸入時(shí)，提供智能提示功能，如自動(dòng)補(bǔ)全、下拉選擇等，幫助用戶(hù)快速輸入正確的內(nèi)容。比如可以支持輸入的選擇器，輸入關(guān)鍵字后可以精準(zhǔn)匹配出對(duì)應(yīng)的。

D：列表操作功能要浮動(dòng)：如果列表很長(zhǎng)，會(huì)造成橫向混動(dòng)情況，導(dǎo)致操作功能需要橫向滾動(dòng)之后才可以操作，最好是，可以將，操作功能固定在右側(cè)，不隨著橫向滾動(dòng)。

E：簡(jiǎn)化表單填寫(xiě)：對(duì)于需要用戶(hù)填寫(xiě)的表單，盡量簡(jiǎn)化填寫(xiě)項(xiàng)，避免冗余信息。能采用導(dǎo)入形式的盡量用導(dǎo)入，能用智能分析解析的，用智能分析。比如可以一鍵導(dǎo)入文件，通過(guò)智能解析，提取用戶(hù)所需關(guān)鍵信息直接幫其錄入系統(tǒng)，客戶(hù)只需要核對(duì)信息準(zhǔn)確性，信息不對(duì)的支持修改即可。

4）提供及時(shí)反饋與引導(dǎo)

A：操作反饋要要明顯、及時(shí)：在用戶(hù)進(jìn)行操作時(shí)，提供即時(shí)的反饋信息，如加載狀態(tài)、操作結(jié)果等。這有助于用戶(hù)了解當(dāng)前狀態(tài)，避免誤操作或重復(fù)操作。

B：引導(dǎo)性設(shè)計(jì)：通過(guò)顏色、圖標(biāo)、文字等方式，引導(dǎo)用戶(hù)進(jìn)行正確的操作。例如，可以使用高亮顯示、箭頭指示等方式，引導(dǎo)用戶(hù)關(guān)注重要信息或進(jìn)行下一步操作。比如流程審批時(shí)，通常用步驟條來(lái)引導(dǎo)客戶(hù)業(yè)務(wù)操作。

5）幫助用戶(hù)數(shù)據(jù)統(tǒng)計(jì)和總結(jié)

A：建立數(shù)據(jù)臺(tái)賬：根據(jù)客戶(hù)業(yè)務(wù)常統(tǒng)計(jì)的一些數(shù)據(jù)情況，直接設(shè)計(jì)出一些匯總統(tǒng)計(jì)表單，便于客戶(hù)一鍵導(dǎo)出，核對(duì)查看，比如，問(wèn)題臺(tái)賬，報(bào)表臺(tái)賬之類(lèi)的。

B：數(shù)據(jù)可視化：后臺(tái)也需要數(shù)據(jù)分析，這部分主要是給中層領(lǐng)導(dǎo)或者業(yè)務(wù)人員統(tǒng)計(jì)查詢(xún)使用，便于通過(guò)條件選擇直接獲取業(yè)務(wù)數(shù)據(jù)。具體不需要太負(fù)雜，可以是一個(gè)小型的圖表統(tǒng)計(jì)，也可以是一個(gè)數(shù)據(jù)統(tǒng)計(jì)。

以上是我對(duì)原型設(shè)計(jì)的一些理解，其中包含一些G端原型設(shè)計(jì)中牽涉到一些要點(diǎn)總結(jié)，文章內(nèi)容純個(gè)人經(jīng)驗(yàn)和見(jiàn)解，如有不對(duì)，望各位大佬能夠留言指出，謝謝～