本文轉(zhuǎn)自知乎，作者相關(guān)信息在本文底部
要制作一個(gè)優(yōu)秀的后臺(tái)原型，我認(rèn)為主要就分為三個(gè)部分：
1.對(duì)于后臺(tái)功能模塊的結(jié)構(gòu)和頁面邏輯有清晰的認(rèn)識(shí)
2.能夠熟練的使用原型工具
3.優(yōu)秀的設(shè)計(jì)風(fēng)格和設(shè)計(jì)規(guī)范
1是基礎(chǔ)，2是進(jìn)階，3則是讓原型變得出色的點(diǎn)綴。
-
那么首先聊聊怎么樣保證后臺(tái)的功能結(jié)構(gòu)和頁面邏輯的清晰合理。 很多人畫原型都有一個(gè)習(xí)慣，就是不管想沒想好，直接就開始打開原型工具先拉幾個(gè)框，或者就照一個(gè)自認(rèn)為非常不錯(cuò)的網(wǎng)站后臺(tái)開始照葫蘆畫瓢，這在我看來都是極其危險(xiǎn)的。網(wǎng)頁后臺(tái)不同于一般的web界面，他對(duì)于功能模塊的劃分和頁面的邏輯要求是非常高的。一方面網(wǎng)站后臺(tái)的層次結(jié)構(gòu)相比之下要復(fù)雜的多，另外一方面，網(wǎng)頁后臺(tái)的功能更偏向于對(duì)前端頁面的管理，這就導(dǎo)致了功能之間的關(guān)聯(lián)性和引導(dǎo)可能就要弱得多，這樣的情況下，如果沒有很好的理清后臺(tái)的結(jié)構(gòu)就開始畫原型，那么最后做出來的后臺(tái)管理系統(tǒng)很可能就是功能的堆積，功能易用性和操作的流程性都很難得到保障。
我將這一步需要注意的事項(xiàng)總結(jié)為以下幾點(diǎn)，也是我在繪制后臺(tái)原型時(shí)時(shí)刻謹(jǐn)記的：
-
畫原型之前，先理清后臺(tái)管理的功能模塊，通過樹狀結(jié)構(gòu)圖來幫助自己劃分頁面和模塊。大概是下面這樣（僅供參考~~~）
結(jié)構(gòu)圖 -
理清模塊之后，就可以著手設(shè)計(jì)后臺(tái)管理系統(tǒng)的骨架，我個(gè)人分為三種：主模塊（主要分為哪些獨(dú)立的功能模塊），次級(jí)分類（每個(gè)功能模塊又有哪些次級(jí)的功能分類），功能事件（具體到每個(gè)功能頁面內(nèi)存在哪些主要的操作），大概的布局方式大概如下三種：
1）頂部選項(xiàng)卡劃分主模塊，左側(cè)邊欄劃分次級(jí)分類
12）左側(cè)邊欄漢堡包樣式的層級(jí)分類（大概就是worktile的側(cè)邊欄樣式）
3）左側(cè)邊欄二級(jí)分類列表浮出
3
思維導(dǎo)圖幫助理清思路很有幫助。
思考的路線應(yīng)該是自上而下，在進(jìn)行模塊劃分時(shí)不要拘泥于具體的某個(gè)界面的展現(xiàn)形式。
結(jié)構(gòu)和邏輯的清晰（骨架）>功能頁面的設(shè)計(jì)（具體到某個(gè)頁面怎么設(shè)計(jì)）>優(yōu)化性質(zhì)的功能設(shè)計(jì)（是否需要預(yù)覽，實(shí)時(shí)存儲(chǔ)等功能）>用戶體驗(yàn)
必要時(shí)， 可以犧牲用戶初次使用的學(xué)習(xí)成本，初次使用的學(xué)習(xí)成本是可以為用戶熟練掌握后的使用效率讓步的
盡量遵循親密/對(duì)比/重復(fù)/對(duì)齊的四原則。
對(duì)于重要但是不知道如何放置的功能，可以考慮放在頂欄的右側(cè)，而不是放在主模塊上（例如把發(fā)布任務(wù)放到一堆XX管理中）
借鑒并不可恥，腦補(bǔ)尤為可怕。
頻繁的彈窗并不是好的選擇（必要時(shí)該彈還是要彈的），如果可以的話，展開和右側(cè)浮出半頁都是不錯(cuò)的解決方式。
作者：卿詞
鏈接：https://www.zhihu.com/question/31859504/answer/54462808
來源：知乎
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
