架构图有哪些？很多程序员都不会画

很多程序员画架构图头疼，不知道画什么、怎么画！
分享、评审、述职、答辩，只要你在程序员这个行业，就几乎离不开要画图。[……]

阅读全文 »

网页编辑器也美化，FiraCode 代码专用等宽字体

最近在更新设计导航 HTML 代码时，发现有个样式总是加载不出来，经过细看发现竟然是因为用了中文的双引号导致，但因为网页代码编辑器西文和中文的双引号太相似所以忽略查找这个问题，如此初级的问题却浪费了不[……]

阅读全文 »

如何在网站上添加 google 地图（嵌入式可自定义名称）

为方便用户寻找到公司地址，网站的联系我们页面通常会加入地图，但如果只是图片格式就太不智能了吧，之前我们介绍过《给网站添加百度地图》一文，但如果我们做的是英文网站，并面向的是国外用户呢？那么就需要添加[……]

阅读全文 »

CSS border-radius 新玩法(含可视化生成工具)

这个 CSS 属性对于前端人员一定不陌生，一直以来都把它当作矩形圆角使用，然而，对于喜欢创新的设计师来说，这是不够的，我们要最大化利用 border-radius，让它玩得更出色。

先来看看截图[……]

阅读全文 »

给网站添加百度地图代码，并可自定义定位坐标

有一次给客户网站的联系我们页面添加一张标注有公司地址的百度地图，结果客户反馈说，为什么我的地图不能用鼠标拖动的啊？没想到现在客户要求这么高了，想偷懒一点也不行。经过几番折腾，发现添加百度地图API代码[……]

阅读全文 »

表单密码强度可视化设计

在填写表单密码时，有的会会显示「弱、中、强」的文案来表示你填写的密码强度，这是一种不错的用户体验方式，然而今天我们分享一个更有趣的体验，就是用「可视化」来表达。

这个「可视化」方[……]

阅读全文 »

Tippy.js 玩转鼠标悬停提示信息

网页设计师对 tooltips 鼠标经过提示效果应该不陌生，这种效果虽然可以直接用 css hover 来实现，但是如果想更友好的、更美观的效果，可能就要借助 JS 来实现啦。今天和大家分享的 Tip[……]

阅读全文 »

CSS 或 srcset 让浏览器自动切换 1X/2X/3X 图像

现在很多客户都买高分屏的电脑，如果直接发 JPG 图给客户，会影响设计质量。为了让网站设计效果图更加真实，最近把设计提案直接做成 Web 版，模拟浏览器真实视觉效果，同时能自动识别是否为视网膜显示屏，[……]

阅读全文 »