如何用项目思维,从零开始建立「设计组件库」?

前段时间,我在某个设计师交流群和知乎发现了同样的问题:有设计师根据目前主流的设计系统(比如Ant Design等),设计出了适合自己公司产品的设计组件库,但是设计方案给到前端工程师时,才得知目前产品的前端框架是基于 VUE 的,或者更老一点的前端框架,所以现阶段使用 React 的 Ant Design 设计系统不合适。 当时发现这个问题之后,就想分享一点我个人在公司建立设计组件库的经验。所以,本文将从「项目思维」的角度,分享如何在公司从 0-1 建立「设计组件库」。 首先,

为什么有人工作才两年,能力就超过五年的设计师?(15)

那些工作两年的设计师,为什么成长速度这么快?本系列邀请了多位设计大咖,为你揭秘他们快速成长的秘诀。 专题阅读:《揭秘设计师快速成长的秘诀》 智超 – 前薄荷设计总监、现饿了么设计师 优设: 您有哪些坚持了三年以上的工作和生活习惯? 智超: 这个问题问得很好,问的是「习惯」,而一般人会问「方法」,比如「有什么方法可以让我变得更厉害?」 其实没有方法是立竿见影,一招鲜吃遍天的。就像学习,听再多高考状元的经验分享,不能长期坚持的都是白搭。就像减肥,坚持不了一个月的方法都

想用 Lottie 做动画?先收下这份常见错误和解决方法总结

Lottie 是 Airbnb 推出的一种 SVG 动画解决方案,它可以跨平台播放,并解决了动画落地难的问题。当设计师做完动画只需使用 bodymovin 将动画导出成文件再传给前端,前端就能非常快速地引入文件和播放动画。对于 Lottie 的初级使用经验,已经有很多分享,所以这篇就不再做赘述。但是实际在使用 AE+Lottie 制作动画的时候往往会碰到各种问题,所以今天我就结合我做的礼物动效案例来和大家分享一下使用这个方案制作动画时常见的错误和解决方法。 使用 AE+Lot

堪称人类之光的新版 QQ 截图,是如何设计出来的?

截图,是将显示设备上所展示的内容截取下来,所生成可视图像,截图的目的是为了保存特定状态下的界面内容。早在 PC 时代,大家在聊 QQ 时就会用 QQ 截图来分享自己所见,截图成为 PCQQ 非常经典的功能之一。 虽然 PC 系统本身就自带截屏功能,但是使用起来并不方便,只能全屏无法局部裁剪,编辑和保存路径也很长。QQ 截图仅需要鼠标轻轻一框,就能快速截取自己想要范围的截图,马上分享给好友。QQ 也持续针对截图体验做了深挖,不断完善截图能力:实时尺寸、色值标记、可重复编辑、自

从超多大厂案例中,我总结了 2020 年值得关注的 9 个交互设计趋势

在过去两个月,从国外的 Google I/O、Apple WWDC、Facebook 开发者大会,到国内的飞聊、QQ改版、豆瓣FM 6.0,可以看到很多关于交互设计上的趋势。 同时,我从日常的产品体验中,整理了一些思考内容,以下是对 2020 年交互设计趋势的展望。 模态展示 在 iOS 13 中,模态面板采用了新的卡片样式,它占据了屏幕 90% 的面积。模态面板拉起时,原有的页面会有一个纵深效果,以灰色状态显示,防止用户和它们发生交互。模态面板可以通过滑动操作下拉关闭,适用

比阿里犸良还强大!Lottie 动效设计完全指南(基础篇)

动效设计,是 UI 设计当中不可或缺的一环。大家对动效的认知也从最初认为动效只是为了美观酷炫,到逐渐理解了动效对于提升用户体验和产品需求的重要作用。而导致这种认知的转变,相当一部分原因是因为硬件性能的发展和动效输出方式的优化。 因为动效实现的过程就是设计师和开发之间互相博弈的过程。设计师可能通过 AE 或者其他工具做出炫酷的效果,和开发对接就懵了。要么无法实现,要么极其复杂。毕竟开发工程师要通过代码把动效实现出来,设计师得用开发所能理解的语言来描述。就如同你能完美地解出一道数

同一个设计稿,为什么别人就能说服甲方?

一直想跟大家分享我所理解的设计中的逻辑学。为什么想讲这个?一来是因为在日常与同事交流工作的过程中经常收到类似「真佩服你能把屁大点事扯出这么多道理」、「评审时你解释的条理可真是清晰」的评价,可能大家觉得我在论述方面确实有所擅长;二来要把人们感情化处理事情、做出决定的感性思维用文字表达,难度实在太大,我只能试着先给大家谈一谈如何运用简单的逻辑思维在设计中思考、辨析和表达。 先给大家讲个生活中的故事。 前段时间我搬新房的时候家里仍有很多设施不全,我就考虑需要准备些什么。首先新房需要

2019年录取通知书设计,怎么一年比一年骚?

@你丫才美工 :2019年各大高校录取通知书陆续出厂,今年,又有哪些令人羡慕的惊艳设计? 每年到这时候美丫姐都要感叹,我读书那会儿咋没有这么好看的录取通知书呢! 相比去年,今年许多高校通知书,除了在视觉上的设计外,还添加了许多「骚操作」,可以说是争奇斗艳了!一起看看今年战况如何! 北京林业大学 去年C位「北京林业大学」今年还是一如既往的秀,咱们先回顾一下去年的样式。 今年的设计沿袭了去年的整体配色,不同的是今年北林一共做了四款,被录取的同学会随机收到其中一种。 以「自然

用实战案例,教你一个让儿童产品更好用的设计方法!

做儿童产品时,你有没有下面的经历: 花了很多精力搭建了完整专业的内容体系。但家长反馈,孩子没有耐心,对内容不感兴趣,每次都需要耗费许多时间来陪着。许多重教学内容的产品(思维逻辑产品、编程机器人等)都有这些问题。 打造了一款交互体验创新的产品,但家长反馈,孩子很难上手或者根本没有体验到产品交互创新的价值。许多软硬件儿童产品会有这个问题。 诸如上述的这些问题,从本质上来说都是产品内容或价值的呈现没有符合用户(孩子)预期,结果就是孩子不感兴趣,不喜欢。 那为什么会出现这些问题? 因

只需一招,再也不怕甲方十二时辰催稿!

十年西域兵,九年不良帅。短短10个字,20年生死磨练一笔勾出。西域血肉拼杀他始终九死不悔,长安的尔虞我诈他仍然情义深藏。所有的这一切让他成为长安的五尊阎罗,总能在纷繁杂乱的痕迹中抽丝剥茧,抓住稍纵即逝的机会。他是孑孓的孤狼,久经战火的刀。 年少成名红尘炼心的李必,则是硬币的另一面。他借助望楼和鼓灯传信构建起覆盖长安一百零八坊的信道,创造「大案牍术」,让博闻强识的徐宾等人组成了处理信息的「大脑」,指引着张小敬这头孤狼在密集的人群中,紧紧攥住若隐若现的草蛇灰线。它是凌空的鹰隼,