Image for post
Image for post

2019年10月份,我在 Medium 发表了一篇文章《关于深色模式的一些发现和思考》,从那时候开始我便着手去找个网站做成深色模式,练练手,于是便开始将 Dribbble.com 进行深色模式的尝试。

这套样式在 2020年1月1日在 Stylish 上发布,历经10个多月的更新迭代,现在已经停止维护了(因为样式文本量超出平台限制)。在项目过程中,我发现使用Chrome DevTools 也能对 UI 设计的工作有不少帮助。2021 年刚好是这套样式发布的一周年,在此便记录下来,算是给这个 Side Project 画上一个句号,同时也分享几个在维护该项目中途发生的一些趣事😄。

用 Chrome DevTools 帮助我们更好地进行设计

1.基础的样式检查

打开 DevTools 之后,按 Cmd + Shift + C,再点选网页内的元素,可以 …


Image for post
Image for post

上一篇文章的3.2章节里,提到了 AntD 组件会全局默认使用等宽数字。这对我来说是比较新的概念,所以也花了点时间观察、总结了等宽数字在界面上的几个使用场景,以及普遍的实现方式,正好也可以作为文章记录下来。


Image for post
Image for post
Atomic Design System — Bizy by Ruben Vaalt

转去做 toB 工具三个月了,这段时间做的是从 0 到 1 的 SaaS 工具。实际上我做这类项目的经验比较少,也基本上没有沉淀。所以我趁着这次公司新项目的机会,可以好好的研究下做 PC 后台里的细节。

因为项目时间比较紧,所以使用了大名鼎鼎的 Ant Design 组件来做设计,期望可以快速上线的同时,保证一定的设计质量。

经过这段时间深度的使用 Ant Design 组件进行设计,踩过不少坑,在这里分享一部分出来。如果你也是之前没怎么使用过 Ant Design 组件来进行设计,那么这篇文章也许会对你有点帮助。

目录

一、AntD 还是 AntDV?

二、全局样式

三、字体家族

四、弹窗

五、表格

一、AntD 还是 AntDV?

在使用 Ant Design 做设计之前,我们必须清楚前端工程师使用的什么框架进行开发。一般我们通过搜索 An …


Image for post
Image for post
Photo by Med Badr Chemmaoui on Unsplash

转眼间在互联网行业从事设计工作已经两年多了,工作中发现了几个可以白嫖高清图片、App 图标、收费字体的小技巧,在这里做一番记录,也希望能对正在看文章的你有所帮助。

一、下载网站上未经压缩的高清原图

各类设计网站(如站酷、UI中国、花瓣等)为了节省图片带宽以及提供更快的加载速度,会将用户上传的图片压缩再展示。

此时我们通过浏览器插件、另存为图片等常规方式保存图片,下载到本地的往往是经过压缩的图片。如下图:


Image for post
Image for post

2020 年 3 月下旬,知名设计网站 Dribbble.com 在过去十年中首次做了彻底的重新设计。借着这次机会,并结合近期其他互联网产品的更新迭代,在此记录一下近半年来我观察到的一些设计趋势变化。

一、更通透的页面设计

对比 Dribbble.com 新旧两个版本的首页,新版首页由于去除了顶部导航栏的背景色,整个页面会更通透;而放大作品图片并删除边框,也能让用户更好地聚焦于内容本身,减少干扰。


Image for post
Image for post
Photo by Tyler Lastovich on Unsplash

前段时间写了篇文章记录如何导出 P3 广色域静态图片,恰好最近工作上有需求要用到动画来完成,利用这次机会也记录一下制作支持 Display P3 广色域的 PNG 序列帧、CSS 精灵图和 APNG 三种格式动画的方法。

一、设置工作空间

首先不管使用什么方法,笔者建议先将 AE 的工作空间设置为 Display P3,目的是让设计师在 Display P3 广色域的工作空间内进行工作,更好地预览最终的效果。

将项目的颜色深度调至 16 位色彩,并且将工作空间设置为 Display P3,如图 1–1:


Image for post
Image for post
Photo by Diomari Madulara on Unsplash

一、发现问题

我在公司的电商部门工作,经常会接触到数字、价格,而设计稿也经常会应用在手机 App 或 Web 端上。我在做设计时会经常观察市面上各类应用,途中一个字体使用的问题使我陷入了沉思…

很多时候在 App 内跳转到 Web 页面时,字体(尤其是英文和数字)会有些不同。如图 1–1、1–2:


Image for post
Image for post
来源:苹果官网

近期更新的 iOS 13 重磅推出深色模式,作为一名设计师当然也要蹭下热度把个人网站也适配上深色模式。这篇文章记录了我最近为网站做深色模式时的一些发现和思考。

  1. 省电(在 OLED 屏上尤为显著);
  2. 与环境色接近,减少对眼睛的刺激;
  3. 酷,新潮玩意就是酷!

根据产品调性和使用场景判断,通常情况下社交通讯、工具、影音播放、资讯阅读、运动科技等类型的产品适合使用深色模式。


Image for post
Image for post
Photo by Daniele Levis Pelusi on Unsplash

前一段时间换上了 iPhone 之后,我一直对官网上的描述里的 “Display P3” 挺好奇的,然后上网搜了下,发现了里面大有学问。

下面放上在 Sketch/PS 里导出 Display P3 色域图片的方法,供参考…

一、在 Sketch 中导出 Display P3 广色域图片

首先如果之前没有设置过色中彩配置,请先到首选项中设置默认色彩配置方案(如图 1–1),该设置会在下一个新建文档中生效


Image for post
Image for post

本文记录作者用 Bodymovin 导出动画时遇到的各种各样奇怪问题,并提供可行的解决方案。持续更新

一、渐变色导出异常

Pudge

广州 · LRD.IM

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store