惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

爱范儿
爱范儿
腾讯CDC
博客园 - 司徒正美
A
About on SuperTechFans
H
Help Net Security
J
Java Code Geeks
C
Check Point Blog
B
Blog RSS Feed
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
MongoDB | Blog
MongoDB | Blog
U
Unit 42
Hugging Face - Blog
Hugging Face - Blog
Last Week in AI
Last Week in AI
MyScale Blog
MyScale Blog
V
Visual Studio Blog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
I
InfoQ
H
Hackread – Cybersecurity News, Data Breaches, AI and More
F
Fortinet All Blogs
博客园 - 聂微东
酷 壳 – CoolShell
酷 壳 – CoolShell
GbyAI
GbyAI
博客园 - 【当耐特】
雷峰网
雷峰网

少数派

派早报:Google 发布 Fitbit Air 等 - 少数派 「新人报到」確認需求,再開始 - 少数派 从 SOLO 独立开发者社区,我看到了越来越多开发者开始做自己的产品 - 少数派 我怎么管理那些"不常做,但总会忘"的生活事项 - 少数派 人形机器人量产元年,数据才是具身智能的“生死线” - 少数派 BuhoLaunchpad 高度还原 Mac 启动台:开发历程与思考 - 少数派 五年陪伴依然不舍,DIY 换壳后让罗技 MX Master 3 继续服役 - 少数派 新玩意 240|少数派的编辑们最近买了啥? - 少数派 一日一技|为什么你应该关闭 iOS 的键盘声音 - 少数派 我做了个插件和 Skills,一键提取任何网站的设计规范 Design.md - 少数派 住在三四线城市的你,该开始录播客了 - 少数派 甘南秘境,大白高国 - 少数派 AI的审美:谁让把我变成川内倫子 - 少数派 返工怎能不烦恼,打工人片单总有一部是你的「嘴替」 - 少数派 为了让「上厕所」更健康,我做了一个小工具 - 少数派 AI + Skill,能够让生成的文章去除 AI 味吗? - 少数派 新玩意|韶音OpenDots ONE 耳夹式耳机 - 少数派 《美满》| 在每一个春天的晚上相爱(362) - 少数派 新玩意|优篮子 PS01 MagSnap 磁吸支架 - 少数派 自我整合手记 | 我开始早睡了:用稳定规则,为自由托底 - 少数派 用龙虾(OpenClaw)两个多月,我最深的12个体会 - 少数派 听歌时间到,12 张你可能错过的 2025 华语乐坛好专辑 - 少数派 承诺能追吗 - 少数派 macOS 26启动台没了? 我做了个不一样的App启动器 - Keboard - 少数派 《四海为家的人》| INTJ对话INTJ(361) - 少数派 你发过的那些黑历史,是时候一次清干净了 - 少数派 新玩意:安安静静玩,越玩越专注:计客密码机 - 少数派 iPad 用户首次体验 Android 平板:vivo Pad6 Pro - 少数派 数据逻辑强 - 少数派 极北行+ | 一路向北,探访日本至北之地 | 001 - 少数派
Mac 上好用的设计走查工具-【透察】APP - 少数派
2023-10-16 · via 少数派

透察-它能给谁提供帮助

hi,你是一位设计师或是一位前端研发吗?或者你是一位需要自己一张张对比设计图和实现效果的运营或测试人员?

如果是,恭喜你这篇文章以及介绍的APP,一定能给你的工作带来巨大的惊喜。如果不是,也欢迎耐心浏览看看,毕竟你可能有亲朋好友从事类似的工作,我保证这会是个好工具的。

设计与开发中最大的痛点

在互联网和软件开发过程中,设计师和研发同学经常这样合作:

步骤1:设计师给出高保真的设计图,研发实现后告诉设计师,可以走查了,来吧~

步骤2:设计师需要就一个项目中,每一张设计图的多个设备尺寸、缩放大小、分辨率 来对比原图和实现图的区别,对尺寸、颜色、字体、元素间距等关键因素进行肉眼比对,并记录下来问题清单,提交给研发同学;

步骤3:研发同学收到问题清单,一边吐槽“我明明做得和设计图一样啊!”一边改实现;

步骤4:在这个过程中还可能出现,双方商议后修改原始设计图;

步骤5:重复步骤2~4,直到设计师认为实现效果已符合预期,或者设计师对研发的预期已经无法再降低为止。

在这个过程中,肉眼对比差异、记录问题清单、标识问题、反复沟通核对都是非常耗费耐心的 dirty work。现在好了,我们有透察 app来提供帮助。

透察-它是什么

透察是一个专为Mac用户设计的工具,它通过一个半透明的浮层导入图片,可将此浮层挪到任何窗口,用来做实时对比。

透察-它能做什么

设计师的利器

设计走查功能

设计师们再也不需要来回切换软件或者使用其他工具来比对设计图与实际页面了。透察允许设计师在浮层上直接添加设计图,并将其直接覆盖在iOS模拟器、Chrome浏览器、手机投屏等真实页面上。

可以支持多种形式的应用走查

网页端页面-你可以将透察直接拖到浏览器窗口上;

app端页面-你可以用将手机和电脑相连,或者直接手机投屏到电脑上;

本地应用-你可以将透察的浮层拖到本地应用上,用于对比。

实现实时比对

这意味着,设计师可以轻松地查看和比对页面的还原度,迅速找出UI实现上的问题,大大提高工作效率。

工程师的新伙伴

全局取色功能

工程师们在开发过程中常常需要获取页面上的某个具体颜色。透察的全局取色功能使得这一过程变得极为简单,仅需点击即可获得电脑屏幕上任意位置的颜色值。

全局标尺和网格功能

这些功能为工程师们提供了强大的辅助,让界面的对齐、元素的间距都可以得到精准的测量。

使用场景举例

1. 当设计师进行设计走查时,他们可以轻松地比对设计图与实际页面,确保每一个细节都得到了准确的呈现。

2. 工程师在开发或调试界面时,可以用全局取色功能获取颜色值,或利用全局标尺和网格功能确保元素位置的准确性。

不止如此,还有这些……

透察不只是一个简单的小浮层,它还有如下功能提供一些小小的惊喜:

快捷键:支持自定义快捷键,快速唤起或隐藏,以及实现更多的快捷交互;

灵活布局:??

不止用于走查:当你上传的是设计图,它可以用来走查;但当你上传的是你画的小猫小狗梦中情人,嗯那它就是电子相框~

下载方式

可以在App Store 搜索“透察”,获取最新版本。

目前安装包才 5.5M,非常轻量,不占空间,下载下来看看吧!

我们在持续更新迭代中,欢迎试用和反馈!