2026-05-04
95 原型對于產(chǎn)品??經(jīng)理來(lái)說(shuō)是產(chǎn)品一門(mén)必修課，本篇文章作者總結了后臺原型設計五大要點(diǎn)，原型有方主要針對剛入行(′?ω?`)后臺設計經(jīng)驗不(bu)太豐富的設計同學(xué)。
對于很多初次設計后臺的法產(chǎn)法產(chǎn)品經(jīng)理而言，原型是品原個(gè)很大的問(wèn)題，因為平時(shí)接觸的型設少，競品又難以獲取，大方??連個(gè)抄的產(chǎn)品地方都沒(méi)有，所以即使胸中需求千千萬(wàn)，原型有方也不知道怎么表現。設計
原型是產(chǎn)品表現產(chǎn)品經(jīng)理想法的重要工具，當我們調研清楚需求和流程后，需要原型幫助( ?ヮ?)我們整理思路，用具象化的方式與需求提出方、開(kāi)發(fā)人員、測試人員溝通。
無(wú)論公司是否有專(zhuān)業(yè)的交互設計師，對于產(chǎn)品經(jīng)理而言，這都是一項必備的基本功。
但是，它只是一個(gè)表現手段，無(wú)論你是用Axure還是墨刀，甚至手繪，通過(guò)原型整理你的思路，然后表達清楚才是重點(diǎn)，切莫本末倒置，把時(shí)間精力過(guò)多的(/ω＼)花在所謂的高保真和花里胡哨的動(dòng)效上，最后需求評審的時(shí)候一頓亂秀猛如虎，一看邏輯二百五。
產(chǎn)??品經(jīng)理更重要的是：思考清楚每個(gè)需求的用戶(hù)、場(chǎng)景及其合??理性；反復核對流程是否有問(wèn)題；每個(gè)字段的來(lái)源及用途是否清晰；細節是否完善。
一、頁(yè)面常見(jiàn)布局后臺相比于前端，更側重功能與邏輯，在頁(yè)面布局上，都大同小(/ω＼)異，整體來(lái)講，分為l??ogo、頂部導航、個(gè)人中心、側面導航、內容區五個(gè)部分。
1. logo放置企業(yè)logo，可以作(′?｀*)為回到首頁(yè)的快速入口。如果我們設計的是一個(gè)To B的SaaS產(chǎn)品，為了滿(mǎn)足付費企業(yè)的個(gè)性化需求，這里需要靈活配置，以放置客戶(hù)的企業(yè)logo；
2. 頂部導航和側面導航：頂部導航與側面導航可ヽ(′ー｀)ノ共存也可(ke)獨立。
當產(chǎn)品層級大于等于三級時(shí)，可采用頂部導航+側面導航，頂部導航做一二級，側面導航做三級及以上；但當產(chǎn)品層級超過(guò)三級時(shí)，說(shuō)明產(chǎn)品復雜度很高，對用戶(hù)會(huì )造成很大的學(xué)習和記憶負擔，需要簡(jiǎn)化并重新設計??產(chǎn)品層級；當產(chǎn)品層級僅為一兩級時(shí)，即可使用單獨使用頂部導航或側面(mian)導航。
需要注意的是，兩種導航共存時(shí)，我們一般把頂部導航作(′?ω?`)為更高級別，當單獨?使用一種導航時(shí)，我們又更多的使用側面導航，這主要是因為人的??閱讀習慣和更好的拓展性。
3. 個(gè)人中心：相較于前端產(chǎn)品，后臺產(chǎn)品的個(gè)人中心要簡(jiǎn)單很多，主要用于賬號退出和切換，在個(gè)人中心入口旁邊，可以作為很(′▽?zhuān)?)多全局性功能的入口，如：搜索、消息中心等??。
4. 內容區正文內容區域，是我們信息展示和操作的主要區域。
二、首頁(yè)設計在后臺產(chǎn)品中，首頁(yè)是一個(gè)非常重要的功能，但在很多產(chǎn)品中又容易把它忽略，尤其是內部使用的后臺，可能根本不會(huì )做??這個(gè)功能，但實(shí)際上，一個(gè)好的首頁(yè)，能極大的提升產(chǎn)品的使用體驗和工作效??率。
將首頁(yè)上的功能以面向用戶(hù)為維度劃??分，可以分為面向全部用戶(hù)的功能和面向單個(gè)用戶(hù)的功能。
1. 面向全部用戶(hù)功能面向全部用戶(hù)的功能在原型上主要體現為數據監控、資訊信息、其他功能入口三種。
數據監控：
在首頁(yè)上，根據產(chǎn)品性質(zhì)不同，需要顯示整體、關(guān)鍵性數據及相關(guān)走勢。
例如：統計產(chǎn)品總用戶(hù)數、總銷(xiāo)售ヽ(′▽?zhuān)?ノ額、日活、月活、轉化率以及對應數據的同比、??環(huán)比??等。目的是讓產(chǎn)品所有相關(guān)人對??產(chǎn)品現狀及發(fā)展情況有一個(gè)直觀(guān)的認識。
資訊信息：
這個(gè)功能在SaaS產(chǎn)品中使用較多，會(huì )把當下與產(chǎn)品??相關(guān)的資訊、??動(dòng)態(tài)等信息以文章鏈接的形式推送顯示出來(lái)。
對于公司內(nei)部使用后臺，一般不會(huì )做這個(gè)功能，但當有全局消息通知的需求時(shí)，可采用頂部跑馬燈的形式告知。
其他功能入口：
這個(gè)功能的設計有兩種應用(yong)場(chǎng)景：
一是應用于一個(gè)大系統包含多個(gè)小系統時(shí)。在系列的第二篇文章中，筆者介紹過(guò)當一個(gè)系統過(guò)大時(shí)，需要采用領(lǐng)域設計的方式將一個(gè)大型系統分拆為多個(gè)小系統，當分拆的小系統功能也很多時(shí)，可以獨立成一個(gè)新的子產(chǎn)品，然后在這個(gè)大的系統的首頁(yè)給一個(gè)功能入口，這樣新的產(chǎn)品就可以采用新的交互和UI，而無(wú)需??與父產(chǎn)品保持完全統一；另外一種應用場(chǎng)景是我們的產(chǎn)品需要包含已有的某個(gè)系統同時(shí)不對包含系統做改動(dòng)時(shí)。例如我們要做一個(gè)新的電商管理后臺，而前面因為業(yè)務(wù)優(yōu)先級已經(jīng)開(kāi)發(fā)了一套商品庫存管理系統，暫時(shí)又不想對這套系統進(jìn)行改動(dòng)，(′；д；`)這個(gè)時(shí)候就可以在新的電商管理???后臺的首頁(yè)加一個(gè)商品庫存管理系統的入口，既方便操作，也體現(xian)了兩個(gè)產(chǎn)??品的包含關(guān)系；2. 面向單個(gè)用戶(hù)功能主要包括該用(//ω//)戶(hù)的待辦事項??、流程進(jìn)度等。
待辦事項：
將用戶(hù)在系統中所需處理的事項快速展現出來(lái)，能極大的提高工作效率。
事項列表(biao)增加排序、分組、篩選這些附加功能，能幫助用戶(hù)更方便的找到自己想要的；對于一些可快速操作的事項，如審批等，可以直接在列表中加上操作按鈕，就不用再次點(diǎn)擊到對應模塊去操作了。
在首??頁(yè)展現的流程進(jìn)度主要是這個(gè)用戶(hù)發(fā)起(qi)的流程，其他關(guān)聯(lián)性不那么強的流程則放在其他模塊
三、列表及表單頁(yè)設計1. 列表頁(yè)設計列表頁(yè)是后臺最為常??見(jiàn)的頁(yè)面形式之一，用于分條展現同類(lèi)數據。它包括表格列表、卡片列表兩種。
表格列表：
表格列表其實(shí)是一個(gè)后臺頁(yè)面上??的Excel表格，除簡(jiǎn)(°ロ°) !單的羅列一些字段外，可以做一些更為豐富的排序、橫向進(jìn)度條拖動(dòng)、隱藏等功能，以應對表格數據過(guò)多的情況。
卡片列表：
卡片列表最大的優(yōu)勢在于利用圖片或短視頻讓頁(yè)面美??觀(guān)豐( ?ω?)富，不至于像其他后臺頁(yè)面，但這也導致這種形式拓展性不強、維護成本高，所以一定要根據使用場(chǎng)景而定。
2. 表單頁(yè)設計表單頁(yè)是后臺產(chǎn)品的另一種常用頁(yè)面，多用于新增、編輯功能。常用表單主要是基礎表單和分步表單。
四、可視化設計可視化設計的重要性已經(jīng)不必強調了，千言萬(wàn)語(yǔ)不如一張圖有效，尤其在后臺產(chǎn)品中，各種數據統計、報表、行為路徑等，都需要(°□°)借助可視化設計將他們直觀(guān)、漂亮??的展示出來(lái)。
常用圖形包括：條形（柱狀）圖、餅圖、折線(xiàn)圖、散點(diǎn)圖、熱力圖、雷達圖、旭日圖等，在這里推薦百度的EChart：http://www.echartsjs.com/index.html，所有你想到想不到的圖都可以找到。
2. 關(guān)系可視化關(guān)系可視化體現??了不同角色間錯綜復雜、難以語(yǔ)言描述的關(guān)系。常見(jiàn)于各種架構設計、產(chǎn)品結構設計中。
3. 時(shí)間空間可視化時(shí)間的可視化在(zai)上面“工作臺的設計”中已經(jīng)提到了，是以時(shí)間軸的(de)形式，將各??個(gè)關(guān)鍵時(shí)間點(diǎn)的相關(guān)事項展現出來(lái)，用來(lái)體現各事項發(fā)生的先后順序及相對計劃時(shí)間的進(jìn)度(′?｀)情況。
空間可視化：
空間可視化應該是我們日常(chang)生活中接(′ω｀*)觸最多的一種可視化設計，(╥_╥)例如各種地圖、地鐵線(xiàn)路圖等。
五、幫助中心幫助中心是很多產(chǎn)品經(jīng)理容易忽視但其實(shí)非常重要的一個(gè)模塊。
大部分的后臺、??To B產(chǎn)品由于業(yè)務(wù)和邏輯的復雜性，不可能做得像前端產(chǎn)品那樣易用，同時(shí)又ヽ(′▽?zhuān)?ノ沒(méi)有統一的(de)交互規范，用戶(hù)使用類(lèi)似產(chǎn)品不多，導致產(chǎn)品推出后需要花大量的時(shí)間、人力做培訓、講解，即使給出了相應的文(′▽?zhuān)?檔，也會(huì )由于各種原因沒(méi)(mei)有保存或??忽略。
所以后臺產(chǎn)品需要一個(gè)更加優(yōu)質(zhì)的幫助中心來(lái)幫助他人，幫助自己。
頁(yè)面布局上大多是左側目錄，右側為對應的正文說(shuō)明；幫助文檔不應僅從功能上介紹產(chǎn)品，由于后臺產(chǎn)(???)品需求、場(chǎng)景與角色關(guān)聯(lián)性大，所以還需要增加按不同角色介紹產(chǎn)品的使用；正文除了圖文形式，如果是對外的系統產(chǎn)品，還應補充視頻形式，結合語(yǔ)音進(jìn)行講解，才能更清晰的將產(chǎn)品介紹給客戶(hù)友情鏈接：
長(cháng)樂(lè )詩(shī)揚網(wǎng)絡(luò )科技有限公司廈門(mén)霸尼網(wǎng)絡(luò )科技有限公司銅陵相邦網(wǎng)絡(luò )科技有限公司昌邑光優(yōu)網(wǎng)絡(luò )科技有限公司凌源方航網(wǎng)絡(luò )科技有限公司北安浩時(shí)網(wǎng)絡(luò )科技有限公司衡陽(yáng)迪皇網(wǎng)絡(luò )科技有限公司黃岡界匯網(wǎng)絡(luò )科技有限公司平?jīng)鲴Y高網(wǎng)絡(luò )科技有限公司榆樹(shù)羅百網(wǎng)絡(luò )科技有限公司遵化蘇特網(wǎng)絡(luò )科技有限公司潞城邁開(kāi)網(wǎng)絡(luò )科技有限公司宜城振白網(wǎng)絡(luò )科技有限公司明光揚貝網(wǎng)絡(luò )科技有限公司內蒙錫林浩特寶宇網(wǎng)絡(luò )科技有限公司燈塔吉圣網(wǎng)絡(luò )科技有限公司邛崍仕億網(wǎng)絡(luò )科技有限公司常熟同建網(wǎng)絡(luò )科技有限公司仁懷永能網(wǎng)絡(luò )科技有限公司新疆克拉瑪依迪瑪網(wǎng)絡(luò )科技有限公司陸豐歐嬌網(wǎng)絡(luò )科技有限公司日照易啟網(wǎng)絡(luò )科技有限公司建陽(yáng)銀集網(wǎng)絡(luò )科技有限公司晉州洋財網(wǎng)絡(luò )科技有限公司滄州銀啟網(wǎng)絡(luò )科技有限公司佛山生威網(wǎng)絡(luò )科技有限公司瀘州電速網(wǎng)絡(luò )科技有限公司青州洋益網(wǎng)絡(luò )科技有限公司石首圓萬(wàn)網(wǎng)絡(luò )科技有限公司延安貝木網(wǎng)絡(luò )科技有限公司龍海英寶網(wǎng)絡(luò )科技有限公司明光航彩網(wǎng)絡(luò )科技有限公司合作來(lái)富網(wǎng)絡(luò )科技有限公司永安濤仕網(wǎng)絡(luò )科技有限公司西寧子霆網(wǎng)絡(luò )科技有限公司宣威萊貴網(wǎng)絡(luò )科技有限公司汩羅通風(fēng)網(wǎng)絡(luò )科技有限公司濱州韋邁網(wǎng)絡(luò )科技有限公司膠南京好網(wǎng)絡(luò )科技有限公司常德尚日網(wǎng)絡(luò )科技有限公司
© 2013-2025.Company name All rights reserved.網(wǎng)站地圖 天津九安特機電工程有限公司-More Templates