实用网页小工具——栅格宽度计算

  • 经验类型教程
  • 经验属性原创文章
  • 经验版权署名-非商业性使用
2165 0 10 2020-10-16

「把一个界面平分成12列,每列间隔16个像素,那每个单元格宽度是多少?」



大家好,我是灰色执照~

上周,微信设计群的朋友在学习的时候,看到「草帽」在 figma 教学视频中使用了一款比较实用的网页小工具 对栅格的宽度进行计算 


但是这款工具需要访问丹麦的一个网站,无法科学上网的朋友是没办法使用的(部分企业是禁止翻墙的,对网络还会有限制和监控,比如不让你访问淘宝、京东……等非工作相关的网站)。


于是,他希望我也做一款类似的产品。


经过设计群里的一番讨论,大家觉得这个网页小工具虽然和大名鼎鼎的栅格插件GuideGuide非常相似,但是在交互和使用上,又比GuideGuide更加的直观和好用。


作为服务设计师的开发者,我一直强调自己要和广大群众打成一片,去真正了解大家的需求,提供有价值的服务。让更多的设计师喜欢上「灰大设计」这个品牌, 让更多的设计师真正受益


我从来都是说的很少,做的很多。灰色执照绝对是实干家,在他的电脑里面有个文件夹,记录着大量的,由各个群成员提出的一些好想法和设想。如果时间允许,灰大都会努力的去实现这一个一个小需求。也欢迎你拉我进你的设计群~


▲微信群当时的聊天截图




   言归正传,我们来看看最新的产品吧  

▲新产品截图 



这是一款计算栅格的工具,你只要输入相应的数值,网页的中间就会显示对应的效果。

可以说是所见即所得~


对于这样的问题:“把一个界面平分成12列,每列间隔16个像素,那每个单元格宽度是多少?”你使用这个工具后,分分钟就可以搞定。因为他足够直观。不得不说,丹麦设计师的这个交互想法非常不错,

不过呢…...


▲Figma里面最牛逼的功能



大家访问「灰大设计导航
https://www.pslkzs.com/nav.php
点击导航头部这个地方,就可以使用这个工具了。



这个实用小工具的介绍就到这里,有什么意见或建议记得给我留言反馈~

Powered by Froala Editor

全部评论:0

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票