在自己的电脑做网站空间,桂林网,网站开发费用摊销时间,网页代做价格假如我们要做一个在线课程学习的系统#xff0c;其中我们需要做的一个功能就是课程信息流的一个展示#xff0c;以等高卡片列表或者瀑布流的方式呈现。首先我们来罗列下这个卡片内应该包括哪些信息点#xff1a;课程名称课程简介分类信息课程评分等级课程文件课时观看学习人…假如我们要做一个在线课程学习的系统其中我们需要做的一个功能就是课程信息流的一个展示以等高卡片列表或者瀑布流的方式呈现。首先我们来罗列下这个卡片内应该包括哪些信息点课程名称课程简介分类信息课程评分等级课程文件课时观看学习人次学习进度这是我们能想到的一些关键信息考虑到必要性剔除了一些其它的非必要的信息需要用户点击进入详情页才能看到。作为一个前端程序员在没有产品和设计的情况下如何通过我们日常开发的一些经验将这八条信息展现在一张卡片上还要保持信息的层次感和布局的合理性这个具有一定的挑战且看我是如何做的吧。标题和简介首先这张卡片上最主要的信息就是课程的标题我们使用稍大而粗的字体来呈现在标题的下面通常是简介我们使用正常小点的字体和标题形成反差即可。另外我们将简介的内容控制在一行显示超出的部门用省略号代替。分类和评分等级分类作为课程的次要信息通常作为筛选的条件我们使用标签的样式用el-tag来展示评分等级自然想到 Element 里面的 Rate 评分组件 el-rate课程文件列表课程文件列表我们摘取文件的名称文件的类型另外需要一个观看的按钮采取横向排列的方式另外考虑到多个文件列表带来的卡片高度不统一问题将默认显示最上面的那个文件其它的采用折叠伸缩的方式在卡片的下面增加了双角头图标作为触发器。课时和观看人次这两个的信息量比较少我们采取左右横向排列的方式观看人数和次数通过图标来区分和简化文字说明学习进度学习进度一开始我很犹豫不知道该如何表达因为如果直接用百分比的数字该如何放放在哪里独立一行显示过于冗余。如果使用控件自然是进度条 el-progress 显示那么如何放是一个问题要显得不那么突兀。为了有效利用卡片的空间不至于让太多的内容导致卡片过高影响信息流的排布。采用绝对定位的方式将进度条细化贴近卡片的底部边框。为了精确的显示进度的详细值利用了 el-tooltip 文字提示组件。前端程序员是最接近用户的如何使产品更美观和易用通常是我们要不断考虑的问题。同时前端也是和产品、设计师接触最多的受到他们的耳濡目染形成我们自己的一套独有的审美和产品思维为什么说是独有的因为我们需要将它们消化吸收然后通过技术手段来进行实现。随着市面上的UI框架越来越多我们已经不用一点一滴地去考虑界面上的每个元素的样式和它们的交互方式。大厂已经利用它们过剩的设计资源帮我们实现了粗粒度的UI实现。我们只需要像搭积木的方式来组合各种组件实现我们的最终的界面。但最终搭建出来的效果也还是需要我们具备一定的设计能力和审美能力。这点我们需要从平时的工作中多用点心去细细揣摩和思考。多利用业务的项目在没有产品和设计师的配合下独立地去完成一个项目中去锻炼。- END -
