评委评语 ------------------------------------------------------------------------------------------- 刘小龙 方云科技 副总经理、墨刀公开课官方认证讲师、原型模板专家 1、整体的组件复用度较高 2、相对细节个人觉得可以提升、如配色、间距、大小、icon等 3、部分组件应用上个人觉得会对复用有一定影响的是文字组件部分是应用矩形内文字的方式,而没有应用文字,可能对服用的整体替换上有较多的调整工作 --- 游轶 海外产品经理、墨刀公开课官方认证讲师、原型模板专家 1.丰富的WEB后台组件库,具有较高的复用性。 2.美中不足的原型页面结构不太清晰,在模板运用中检索组件会带来一定阻碍。 --- 赵瑞祥 58集团高级产品设计师、前百度凤巢商业产品经理、墨刀公开课官方认证讲师、原型模板专家 很出不错的比赛作品,也是一个很有肌肉的PC端WEB组件库,整体涵盖的功能较多,其中NS流程图的功能设计比较智能,基本满足常规复用性。但是方案的信息架构不太清晰,没有一个足够简单明了的检索目录,且组件在视觉化上缺少美感。 --- 刘亚辉 进口汽车电商平台产品负责人、光环NPDP辅导员、墨刀公开课官方认证讲师 对web后台不错的组件整理,提供了多种功能模块的实现方案,对页面状态、母版等功能应用灵活,有较强的复用性。 功能逻辑流程体现不够清晰。 --- 马晓 简历专家、乔布简历创始人 & CEO 整体涵盖功能较多且比较完整,特别是组件页内的流程图、树状组件等简直就是做ERP同学的福音,非常实用,复用性极高,但是整个产品中的功能结构会有些不清晰,另外视觉上整体配色布局上缺乏美观。 --- 黑马青年 行设课堂创始人、前网易、携程设计师、站酷千万人气推荐设计师、UI中国十佳设计师 WEB端后台组件库整理得比较完整,复用性比较强。不过整体的布局、配色、细节表现上稍微有些欠缺,算是美中不足。 --- 金亦冶 Ping++ 创始人 & CEO 组件较为全面的WEB后台组件库,具有较高的复用性。非常清晰定义了组件类型以及表格和表单的嵌套使用方式。 整体的布局还可以继续优化,组件库还可以逐个进行深入丰富。 --- 闫刚 清博大数据研发中心副总经理、安徽大学产品设计讲师 1、原型提供了丰富的元件交互,具有很强的复用性。 2、在交互逻辑上有一些小问题,包括按钮范围等方面的细节体验也需要进一步增强。 --- 朱耀华 创研股份产品总监、墨刀公开课官方认证讲师、原型模板专家 组件数量较多,有很强的复用性,可以作为web后台的基础性建设;缺少视觉美观度。 作品介绍 ------------------------------------------------------------------------------------------- 来了,来了,B端产品福利来了!首页、表格、表单、对话框、流程图、树形表单等等应有尽有,而且跟官方组件组件不一样的地方是,这里的组件可是都带交互的哦! 经常跟后台原型打交道的B端产品同学可能会有同感:客户需求差异化,产品更注重业务逻辑的实现方式,然后就是要做的页面内容多,样式调起来比较麻烦,在官方的表格控件没上线之前,做B端原型真的是一种折磨。不过做B端原型也有一个比较好的特点:那就是组件的复用率很高,特别是表格和表单。考虑到墨刀官方自带的WEB端组件偏少,所以这次的参赛作品主要还是针对补充现有的ELEMENT组件库(基本可以覆盖90%以上的B端业务场景了),总体风格上参考了时下比较热门的前端WEB框架Vue Eement Admin。 【页面结构】 一、首页。这里基本做了全交互,点击和悬停效果都有,同时多设计了两款皮肤。 二、功能页。由于是日常业务里面最常用的模块,目标是直接复用页面后增减组件、切换组件状态再做标题改名就完成原型制作,最大程度的降低同质化的重复劳动。 2.1 页面布局。作为盒容器元素,前端研发会懂的,不解释! 2.2 表格。不夸张的得说,做后台有一半以上的功能是在做表格。点击表格可以切换风格; 2.3 对话框。那么另一半就是基本在做它了!这里提供了两大类共8个类型的对话框; 2.4 抽屉。使用场景和对话框差不多,主要区别在于抽屉的页面范围大,比对话框会“装”!这里提供了四个方向共10个不同类型的抽屉; 2.5 标签页。多用于展示同级的不同状态下的筛选页面和搭配步骤条的流程审批页面。这里提供了三个可替换表头和四个不同方向的布局; 三、组件页。这里应该是大家最喜欢逛的地方。 3.1 流程图。基于“拼图”组件化思路,用墨刀画了一个简单版的流程图组件,基本图形和布局都帮你画好了,你只需要复制组件至所需位置,切换至对应状态展示,再加上箭头就可以了。友情提示:如需画复杂的流程图请切换至专业软件; 3.2 导航菜单。一般菜单涉及跳转,用静态页面即可。这里为有更高追求的刀友们提供了5种不同类型的导航交互组件; 3.3 静态组件。这里提供了步骤条、富文本和404报错页面等,如需直接就可以拿去用,非常方便; 3.4 交互组件。这里有按钮、消息提示、进度条、穿梭框等等,全都是自带交互效果的,请都点点看; 3.5 树形组件。 这个功能是专为ERP场景打造的,非常实用啊,有木有?! 功能介绍完了,再提供点用时间堆出来的“爬坑”经验给后面的参赛人员吧: 1、不推荐做全局组件的皮肤替换方案,动态组件背景推荐设置透明化方案,方便全局改颜色; 2、同一个页面内动态组件的范围不要相互重叠,会影响点击等事件的触发; 3、如果要编辑被上层组件遮挡的下层组件内容,把上层组件都隐藏掉就行了,不要手动置顶; 4、动态组件内部不能置入动态组件,如需多个动态组件相互条件嵌套,请把它们放一个页面内,再通过不同的页面状态来实现; 5、做动态组件前尽可能地把所有元素都做好然后再添加状态,不需要展示的元素可以隐藏处理(方法跟ps处理图层一样),因为神奇移动的效果只在同一元素对象上生效。 最后提示下:由于本作品的组件集中度很高,很多组件是分布在各个页面上的不同状态内的,请根据页面的高亮提示多点点(有20个页面限制啊,不能做太多),然后还有彩蛋哟~
此言话不多
努力成为全栈。目前负责B端产品,兼职WEB前端。