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