找回密码
 立即注册

QQ登录

只需一步,快速开始

qtcxc 活字格认证

高级会员

67

主题

355

帖子

1068

积分

高级会员

积分
1068

活字格认证

qtcxc 活字格认证
高级会员   /  发表于:2022-8-23 12:08  /   查看:7447  /  回复:28
本帖最后由 qtcxc 于 2022-8-23 13:42 编辑

大家  有没有 用基础组件 封装 页面模块和组件的需求?是否有统一ui规范的需求?


下面是我的故事:

最开始刚接触活字格(4.0版本吧)的时候 是按照活字格给的板式直接在页面上放组件,然后越放越多,最后导页面上方和下方组件需要扩展的时候上下相互影响非常难布局。
image.png377775573.png
image.png865705871.png

用了大概1年后,有个小工程,开始尝试将页面拆分成多个不同模块,每个模块用独立页面来设计,实现页面模块之间布局相互不影响,初步做到页面模块复用。
image.png436357421.png
做出来是这样子:
image.png236804503.png



再之后活字格官方发了主题模板,也用过夏超发布的ui框架,确实是好东西,做出来的成品美观了很多:
image.png369739074.png

但是活字格到目前为止还未有一套设计规范,指导界面设计时如何能达到风格的统一,特别是在官方发布了自适应能力后,也还未有使用自适应能力的ui框架。

所以一直想基于最新的自适应能力,设计一套ui规范,不是为了产出ui模板,而是想形成一套规范,能够基于这个规范设计出适用于各种业务场景下的界面,并保持风格的一致,减少ui界面设计过程中调试的时间。

很简单的想法,就是统一一套规范和栅格体系,实现自适应界面布局,实现功能模块组件化,组件完全通过复制粘贴使用,使用后不用再调整,去掉繁琐的适配过程。
目的是不仅仅是使用模板,而是能有一套规范能根据设计者自己需要,设计出自己喜欢的风格的界面系统出来。
image.png980784912.png

image.png282515868.png

image.png774796752.png

image.png511133117.png

image.png830780334.png

image.png383818053.png


这套规范正在工作之余,一点点的一边写一边验证,还未成体系不知道什么时候才能完成正式公布。

本来想着基于8.0 构建,目前看到8.1有我在梳理过程中需要的新能力,可以极大的简化组件的复用问题,所以可能会转到8.1上实现,毕竟官方支持的组件封装才是王道。
做这个事情是想把这几年用活字格的一些经验用法做一些梳理,归总到一起形成一个有体系点的规范,仅仅是个人的经验,也不一定能适合大家用,但是至少能作为一个参考吧。
将以开源的方式发布,基于木兰宽松许可MulanPSL2,可商用不做限制。当然我会在保证质量的情况下才正式发布出来,发布后有兴趣的人可以参与进来一起维护优化。


今天发这个贴子是想看看有没有人感兴趣,做这个事情是否有意义好让自己更有动力做下去。




评分

参与人数 7金币 +671 满意度 +25 收起 理由
Joe.xu + 5
威动的葡萄 + 5
13794930121 + 5
cnsxwxq + 5
djs521720 + 5
willning + 666 赞一个!
swejet + 5

查看全部评分

28 个回复

正序浏览
amtath悬赏达人认证 活字格认证
论坛元老   /  发表于:2023-12-14 10:08:41
29#
后端挺好用了,最大的问题还是前端费事
回复 使用道具 举报
和家
初级会员   /  发表于:2023-12-12 21:50:28
28#
回复 使用道具 举报
137294886
金牌服务用户   /  发表于:2023-12-11 23:56:11
27#
期待大神的作品
回复 使用道具 举报
Aa金砂
高级会员   /  发表于:2023-12-11 16:54:16
26#
顶起来
回复 使用道具 举报
Xaiver
高级会员   /  发表于:2022-9-14 11:31:31
25#
赞,这个可以说是目前个人感受到的活字格最大2个痛点之一。
回复 使用道具 举报
威动的葡萄
注册会员   /  发表于:2022-9-13 10:42:19
24#
回复 使用道具 举报
qtcxc活字格认证
高级会员   /  发表于:2022-9-6 10:24:14
23#
phoben 发表于 2022-9-5 23:43
其实开源的UI框架很多,都有其基础的规范,我做UI框架也是这个目的,不能设计出类似市面上的灵活框架原因是 ...

感谢分享实战经验,里面提到的很多点确实是问题,不过近2年活字格迭代上多少解决了些问题,初步评估基于最新的版本能够做到除了流式布局之外的各种布局方式了。
基本能够形成一整套基础规范(当然还需要抛弃一些传统的布局概念)但90%场景都应该够用。

特别是看到8.1的封装组件能力能够更方便做规范统一的工作了。

基于活字格写规范其实是想让新人少花时间从css,js一个个坑踩一遍。可以拿起就用。

评分

参与人数 1满意度 +5 收起 理由
swejet + 5

查看全部评分

回复 使用道具 举报
phoben讲师达人认证 悬赏达人认证 活字格认证
论坛元老   /  发表于:2022-9-5 23:43:25
22#
其实开源的UI框架很多,都有其基础的规范,我做UI框架也是这个目的,不能设计出类似市面上的灵活框架原因是设计器中布局受限,主要因为以下几点:
1、基于格子的排版造成不够灵活,其实css的grid也是格子,但是是允许嵌套的;
2、相对定位和绝对定位不清晰,活字格没有鲜明的相对和绝对的概念,而是通过拉伸、自适应等概念封装,所以是不能完全自由定义某个中间区域;
3、还是因为格子问题,导致只能整行、整列进行拉伸排列,这对整页破坏性很大;
4、没有隐藏渲染的逻辑,只能隐藏组件,而位置会被留空,在UI框架里是可以通过v-if来取消某些元素的渲染;
5、表格操作,无法识别子页面内的表格,子页面容器本可以解决上面部分问题,但是因为这个不能使用;

总结:我开个脑洞,如果格子能支持继续细分格子,那就好了。这样的话以后的首页可能只需要设置3行2列,然后每个格子再根据需要继续细分格子或者直接嵌入一个子页面。

评分

参与人数 1满意度 +5 收起 理由
swejet + 5

查看全部评分

回复 使用道具 举报
cnsxwxq
银牌会员   /  发表于:2022-9-4 20:02:19
21#
如果需要,我愿意参与,只是怕能力有限,帮不上多大忙。
回复 使用道具 举报
123下一页
您需要登录后才可以回帖 登录 | 立即注册
返回顶部