瑞幸小程序中提取的开源UI库22组件,有哪些具体功能特点?
- 内容介绍
- 文章标签
- 相关推荐
谁懂啊家人们!最近在厦门找前端工作空档期,我居然养成了个怪习惯——每天点杯瑞幸坐那盯它家小程序看!不是馋咖啡,主要是它家小程序做得也太顺了吧?丝滑到想把界面拆开来看看里面到底藏了啥宝贝。盯久了才发现,原来那些看起来简简单单的按钮卡片里藏着好多贴心到骨子里的设计细节。 客观地说... 干脆一不做二不休,把里面22个常用组件全「抠」出来整理成了个开源库——LKCN UI!今天就跟大伙唠唠,这些从瑞幸「挖」来的组件到底牛在哪?
先说说那个加购控件:比女朋友还懂你想要啥
菜单页每个商品右下角那个「+」号变加减框的小东西——我愿称它为「最懂用户懒癌」设计Top1!平时数量是0的时候就只冒个蓝色小加号在那戳着, 界面清清爽爽不占半分地方;真要点的时候啪一下弹开成带减号、数字、加号的三格控件——动画还带点Q弹感!不是那种生硬切屏式切换,是像按棉花糖一样软软乎乎砸进手里反馈——谁用谁知道有多戳心!
一言难尽。 我当时拆这个组件时候特意把逻辑扒得干干净净:核心判断就一句「当前值是不是小于最小值」——小于就只给个孤单单蓝色加号钮;大于等于才展开完整三件套。代码行数不多,但用户那点「怕麻烦」的心被拿捏得死死地~
价格显示玩出花活:一眼就让你觉得「赚大了」
最后强调一点。 这年头卖东西搞促销谁不会划条删除线?但瑞幸家价格能让你盯着看三秒才反应过来「哦这折扣真大」——它把价格拆成三段耍流氓呢!人民币符号小小的灰灰地缩在最左边装低调;整数部分用又粗又大字体怼你眼球中央;小数点和小数部分又缩回去一点点当陪衬。
谁懂啊家人们!最近在厦门找前端工作空档期,我居然养成了个怪习惯——每天点杯瑞幸坐那盯它家小程序看!不是馋咖啡,主要是它家小程序做得也太顺了吧?丝滑到想把界面拆开来看看里面到底藏了啥宝贝。盯久了才发现,原来那些看起来简简单单的按钮卡片里藏着好多贴心到骨子里的设计细节。 客观地说... 干脆一不做二不休,把里面22个常用组件全「抠」出来整理成了个开源库——LKCN UI!今天就跟大伙唠唠,这些从瑞幸「挖」来的组件到底牛在哪?
先说说那个加购控件:比女朋友还懂你想要啥
菜单页每个商品右下角那个「+」号变加减框的小东西——我愿称它为「最懂用户懒癌」设计Top1!平时数量是0的时候就只冒个蓝色小加号在那戳着, 界面清清爽爽不占半分地方;真要点的时候啪一下弹开成带减号、数字、加号的三格控件——动画还带点Q弹感!不是那种生硬切屏式切换,是像按棉花糖一样软软乎乎砸进手里反馈——谁用谁知道有多戳心!
一言难尽。 我当时拆这个组件时候特意把逻辑扒得干干净净:核心判断就一句「当前值是不是小于最小值」——小于就只给个孤单单蓝色加号钮;大于等于才展开完整三件套。代码行数不多,但用户那点「怕麻烦」的心被拿捏得死死地~
价格显示玩出花活:一眼就让你觉得「赚大了」
最后强调一点。 这年头卖东西搞促销谁不会划条删除线?但瑞幸家价格能让你盯着看三秒才反应过来「哦这折扣真大」——它把价格拆成三段耍流氓呢!人民币符号小小的灰灰地缩在最左边装低调;整数部分用又粗又大字体怼你眼球中央;小数点和小数部分又缩回去一点点当陪衬。

