Mobbin

Mobbin图片

Mobbin是什么网站？Mobbin是素材设计网站。

你有没有过这种时候：接到一个改版需求，脑子里大概知道要什么感觉，但打开设计软件又不知道第一笔往哪画。去Dribbble看吧，图是好看，可落地到真实产品里总差点意思。Mobbin就是冲着这个场景来的——它不搞概念稿，只收录真实上线的App和网页截图。

它到底收了多少东西

说实话第一次打开Mobbin的库，翻半天翻不到底。官方说目前有超过50万张屏幕截图，覆盖1000多款iOS、Android和Web应用。不是随便截两张首页就完事，而是把整个使用流程都拆开存进去了。

• 按应用分类找：社交、电商、金融、工具类，想盯哪个赛道就筛哪个
• 按UI元素找：按钮、导航栏、登录注册页、空状态页，直接搜组件名
• 按交互流程看：从打开App到完成下单，中间每一步怎么跳转都有记录

动起来看比静态图有用

静态截图能看配色和布局，但页面之间的转场、加载状态、弹窗出现的时机，这些光看图是感受不到的。Mobbin有个交互流演示功能，点着点着就能把一整条用户路径走完。我个人觉得这个对做原型特别有帮助，尤其是金融类App那种步骤多的流程，看一遍比读十页文档都清楚。

怎么用才不浪费时间

别一上来就漫无目的地刷。带着问题去搜效率最高。比如你要做个人中心页面，就搜“profile”或者“account”，把主流产品的做法扫一遍，心里大概就有谱了。另外它跟Figma有联动，看到合适的截图可以直接参考尺寸和间距，省得自己反复量。

• 做竞品分析时，把同类App的同一个页面拉出来横向对比
• 写交互说明文档时，直接引用Mobbin的流程截图当参考
• 团队过方案时，拿真实案例说话比拿竞品截图更有说服力

这网站对英文搜索更友好，但界面本身不复杂，点几次就熟了。免费账号能看不少内容，重度使用再考虑升级。反正我现在的习惯是，动手画之前先去Mobbin逛十分钟，比对着空白画布发呆强。