今天请早点下班好吗? UI/UX 21年9月30日 编辑 天猫设计 取消关注 关注 私信 鲁迅先生曾说过: 国庆要过好,下班得趁早。 *鲁迅:又是你们是吧 国庆假期就在明天!今天也是帮助大家提前下班的一天!希望今天小编带来的推荐能够帮你更快开启宝藏假期。 01. Cargo: 是建站工具也是艺术宝库 首先小编为大家推荐一个 B 格拉满的宝藏网站——Cargo。原本是建站工具站点出身的它,主要服务艺术家,设计师群体。它所提供的高品质模版屡受好评,特别适合展示设计作品。 不过我们今天更要推荐的是它的「推荐案例」部分。在「Cargo in Use」部分,Cargo 精心收录了来自全球新锐设计师、艺术家的作品网站,包含了平面设计、绘画、装置、行为艺术等多种艺术展现形式。当然这些网站都是使用该建站工具搭建的。这些范例整体风格相对实验性,在创意枯竭的时候找找灵感,或是单纯“陶冶情操”都是极好的。 ▲ Cargo 网站(截图仅用于展示) ➡️ 传送门 ⬅️ https://cargo.site/ 02. Rotato: 快速制作设计展示动画 节前的你可能很需要做一次设计分享。Rotato 可以帮助你更进一步。 Rotato 的页面和工作流与日常设计软件接近,在流程上更加精简,基本上选择需要用于展示的设备类型,将 界面设计图(当然也支持动画)拖入,就可以实时渲染合成展示图。你还可以对渲染背景、设备颜色、灯光及反射做相应的调整。 当然,Rotato 也有各种动画选项与预设帮助你生成动态的 Demo,甚至还可以解析 Sketch 文件实现分层动效果。渲染时间官方宣称平均只要 4 分钟。有这样的工具加持,今天的你也许可以提前结束工作啦。 ▲ Rotato 官网(截图仅用于展示) 同事:别卷了别卷了,就你卷。 ➡️ 传送门 ⬅️ https://www.rotato.app/ 03. Animate.css: 跨浏览器动画库 要与前端同学们沟通动画效果的实现了?也许这个动画库能够帮助你们。 平时在工作时经常使用到一些动效,有时候仅靠描述很难和开发对齐。比如说要做一个“抖动效果”,可能需要先去尝试写一个函数或做一个动画效果再导成开发可用语言(如 Lottie)进行沟通。 Animate.css 这个项目网站整理了 50 多种常见动效,并且带有代码参数,不管是设计师自己学习模拟还是前端沟通都是非常方便的。 ▲ Animate.css 项目网站(截图仅用于展示) ➡️ 传送门 ⬅️ https://animate.style/ 04. Code My UI: 你的 UI 实现案例大全 在你需要更多 UI 实现的案例参考的时候,Code My UI 也许是一个很不错的选择。 这个网站精心挑选了各种在设计中可能出现的案例,比如文字效果、图标、导航等(偏向网页设计一些),对应的实现代码直接附在案例中,方便你使用修改。非常适合简单效果还原或者创意类网页搭建。 ▲ Code My UI 网站(截图仅用于展示) ➡️ 传送门 ⬅️ https://codemyui.com/ 05. Pixilart: 在线像素画绘制工具 也许需要一些像素风素材吗,不需要打开繁重的软件,打开 Pixilart 就可以快速绘制了。 界面可以说是「像素画专精版」的 Photoshop,网站流畅无延时,预设的笔刷工具非常好用,连内置的文字工具是像素化的,可以一口气完成风格统一的插图。同时它支持动画逐帧绘制,直接输出 gif,体验非常友好。 ▲ Pixilart 绘制页面(截图仅用于展示) ➡️ 传送门 ⬅️ https://www.pixilart.com/draw 06. DaFont: 多风格字体库 重点在于推荐各种风格主题的字体库网站,与其他字体推荐网站一样,可以输入相应文字来预览字体效果。 查找时如果筛选勾选「Public domain / GPL / OFL」以及「100% Free」就可找到纯免费的字体,可以下载进行使用(如果是其他标识,大家要注意版权限制哦)。 ▲ Dafont 网站(截图仅用于展示) ➡️ 传送门 ⬅️ https://www.dafont.com/ 最后小编的话 国庆节前最后一个工作日, 无限次期待下班和一个好天气。 好好准备休息吧。 预祝大家国庆节快乐, 设计愉快。 编辑/作者:一条河 想要加入天猫设计吗? 欢迎下方扫 内推二维码 或邮箱投递简历和作品集! 本篇文章来源于微信公众号: 天猫设计 天猫设计