如何設(shè)計一個低代碼設(shè)計器?(如何設(shè)計一個低代碼設(shè)計器程序)
前言
低代碼設(shè)計器,旨在讓用戶舒心。其優(yōu)質(zhì)體驗源于兩大要點(diǎn):操作簡易,響應(yīng)迅速。
低代碼設(shè)計器常用的模塊
物料區(qū)
物料區(qū)不宜過窄,也不能太寬,不能超過屏幕的三分之一。建議放屏幕左邊,從左往右拖拉是大部分用戶的使用習(xí)慣。次選放上邊,和下邊都可,不分伯仲。
設(shè)計區(qū)
設(shè)計區(qū)可以放中間居中,建議面積二分之一或以上。也可以放右邊整個沾滿。
組件屬性設(shè)置區(qū)
若設(shè)計區(qū)居中則可以使屬性設(shè)置區(qū)放最后邊,若設(shè)計器占滿右邊,則屬性設(shè)區(qū)也可以放左邊。但要注意與物料區(qū)之間的重疊,可采用選項卡的形式。
常用的設(shè)計器例子
如圖1所示,第一種設(shè)計,簡潔。
優(yōu)點(diǎn):
l 簡潔
缺點(diǎn):
l 不好擴(kuò)展
圖1
如圖2所示,若有多個設(shè)計區(qū),上下均分。
優(yōu)點(diǎn):
l 簡潔
l 可以同時進(jìn)行設(shè)計
缺點(diǎn):
l 設(shè)計區(qū)狹小
l 擴(kuò)展上限有限
圖2
如圖3所示,若有多個設(shè)計區(qū),左右均分。
優(yōu)點(diǎn):
l 簡潔
l 可以同時進(jìn)行設(shè)計
缺點(diǎn):
l 設(shè)計區(qū)狹小
l 擴(kuò)展上限有限
圖3
如圖4所示,若有多個設(shè)計區(qū),還可以通過頂部tab選項進(jìn)行切換設(shè)計。
優(yōu)點(diǎn):
l 頂部切換能全面切換設(shè)計器,可以是兩種不同的設(shè)計頁面,比如流程設(shè)計器,模型設(shè)計器等,可以獨(dú)立的有自己的物料區(qū)和屬性設(shè)置區(qū)。
l 擴(kuò)展性強(qiáng)
缺點(diǎn):
l 對相同物料的設(shè)計器不好處理
圖4
如圖5所示,若有多個設(shè)計區(qū),把屬性欄也放到左邊進(jìn)行tab切換。
優(yōu)點(diǎn):
l 可以使是設(shè)計區(qū)更大。
l 可以使物料區(qū)更大。
l 極大的擴(kuò)展性。
缺點(diǎn):
l 屬性設(shè)置和物料拖拽不能同時進(jìn)行
l 設(shè)計區(qū)內(nèi)容無法同時設(shè)計
圖5
總結(jié)
在進(jìn)行設(shè)計時,請結(jié)合業(yè)務(wù)復(fù)雜度的實際情況進(jìn)行規(guī)劃,避免盲目追求過度的擴(kuò)展性。對于業(yè)務(wù)模塊,建議進(jìn)行細(xì)致拆分,以便在特定階段能夠迅速調(diào)整布局,提升響應(yīng)速度和靈活性。同時,確保設(shè)計區(qū)和擴(kuò)展代碼區(qū)的空間充足,以便更好地滿足開發(fā)需求。
在界面設(shè)計上,要盡量減少操作的距離,提高用戶的使用效率和舒適度。開發(fā)者在面臨性能與功能之間的權(quán)衡時,需做出明智的取舍;而產(chǎn)品設(shè)計師在追求個性與創(chuàng)新時,也需考慮用戶體驗和實際需求。