做前端开发这几年我最大的一个体会是能不能做出好看的界面很多时候不是技术问题而是有没有见过足够多好看的东西并且能快速找到可参考的那一个。我见过不少同事GitHub上的组件库用得飞起但一到自己搭页面就总是那种默认边框、默认间距、灰扑扑的观感最后只能找设计师救场。反过来我也见过一些前端工程师明明不是科班出身但做出来的页面有模有样按钮、留白、层级都拿捏得很准区别就在于他们有一套自己的UI灵感参考体系。这篇文章不打算给你甩一个几十个链接的大杂烩收藏夹而是想从UI参考网站怎么用这个角度把这些资源拆成不同类型讲清楚每种类型适合什么时候查、怎么查、查完怎么转化成你自己的页面。前端和UI的边界本来就越来越模糊现在很多团队里前端要能读懂设计稿甚至要能自己先把页面搭出个像样的雏形。如果你也在往这个方向走那这套方法会比单个链接列表有用得多。1. 先把参考网站分成四类而不是堆一堆链接很多人收藏UI参考网站的方式就是把看到的文章里所有网址复制下来扔进书签栏。结果过了一个月书签栏塞了几百个链接真要做一个首页的时候反而不知道点哪一个。我的做法是按用途分四类每一类解决一个特定问题。1.1 第一类综合灵感池用来解决我完全没想法这类网站的特点是量大、更新快、风格跨界适合在项目还没有方向感的时候去逛。Dribbble和Beauha是最典型的两个但要注意它们的定位不太一样。Dribbble上有很多概念稿看起来特别惊艳但落地要考虑成本Behance上则更多是完整的项目案例可以拆解对方的设计思路、交付物甚至能看到背后的问题定义。国内的话站酷和UI中国其实被很多前端低估了。站酷上有大量中文环境下的界面设计案例特别是后台管理系统、移动端运营页这类很接地气的需求你在Dribbble上反而不容易找到对应案例。UI中国则偏重交互流程和组件细节很多帖子会讲解为什么这样设计对前端理解设计意图很有帮助。综合灵感池的使用策略不是今天没事干逛半小时首页而是带着耳边需求去搜索。比如你要做一个宠物医疗的小程序那可以在Dribbble搜pet clinic app在站酷搜宠物医疗在Behance搜veterinary mobile app。先把关键词吃透再看搜索结果里反复出现的视觉元素那基本就是这个领域的公约数。1.2 第二类真实产品界面库解决我想看某个成熟产品到底怎么排的这一类的价值是被很多人忽略的。Dribbble上好看的概念稿很多但真实线上产品的界面往往受业务、技术、数据量各种约束没那么多花活。如果你想复现那种真实可用又整洁的感觉直接去移动端界面库或者网页布局库看现成产品截图。Mobbin和Page Flows这类网站收集了大量真实App的完整流程截图。Mobbin按App分类你能看到某个产品从登录到主页到详情页的连续截图这对理解信息架构特别有帮助Page Flows则更偏做流程把用户操作路径拆成了连续卡片比如找回密码到底经过哪几步每一步界面长什么样拿到就能直接画流程图或者搭页面。国内能稳定访问的替代品也有比如参考线之类的UI导航站会聚合很多高质量案例。做C端产品的时候我会优先去Mobbin看竞品做B端产品的时候则更多去看Ant Design、Element Plus官方文档里的应用示例以及各类后台模板的演示站。因为这些真实产品的界面都经历过业务打磨页面元素的信息密度、栅格系统、交互反馈都比概念稿更有说服力。1.3 第三类组件规范与设计语言站解决我这套控件到底该长什么样前端开发者和纯设计师在使用UI参考网站时有一个明显区别设计师会关注配色、字体、质感而前端必须多问一句这玩意儿怎么实现成本多高。所以组件规范和设计语言站点应该成为前端UI参考体系里的一个独立类别。Apple的HIG和Material Design规范是所有组件库的底层逻辑来源。比如Material Design把阴影层级分成了好几个档次悬浮操作按钮为什么要放在右下角列表的间距为什么按8dp的倍数计算这些都不是凭空拍脑袋。你哪怕不用Material的组件库也能从规范里学到控件状态怎么定义的方法论。国内项目里最常用的组件库Ant Design和Element Plus都有自己的设计指南。Ant Design的文章写得尤其细会讲为什么按钮要分主次空状态该怎么引导用户Element Plus则更适合Vue技术栈的人直接对照。还有GitHub上一些企业级前端框架比如Vben Admin它在Uni-App不它其实是Vue3后台前端框架虽然本身是代码仓库但它的页面布局、登录页设计、数据看板样式也是一个很值得参考的组件级灵感库。另外如果你喜欢轻量化的界面方案daisyUI这类基于Tailwind CSS的组件库也值得收藏。它展示的是纯CSS就能做出来的现代风格对中小项目特别实用因为不存在组件库引入成本。1.4 第四类动效交互与前端实现案例解决静态好看了点着没感觉界面好看三分之一靠静态视觉三分之二靠交互手感。但大部分UI灵感网站在动效这块都偏弱因为它们展示的是截图。想要看交互动效怎么设计、怎么实现需要专门去这一类站点。Awwwards和SiteInspire是网页设计领域的风向标它们的评审标准里创新交互的权重很高。每次逛完之后你会看到一些滚动动画、鼠标跟随效果、页面切换方式这些放在Web页面上非常加分。CodePen里的很多作品则是实现优先的作者会把HTML/CSS/JS代码挂着遇到有意思的按钮悬停效果、Loading动画、卡片翻转直接看代码就能抢过来用比你自己猜快很多。如果你用的是React或Vue也可以专门关注Framer Motion、GSAP Showcase这类动效库的官方案例页。它们展示的每个效果几乎都有对应的代码文件前端看完可以直接去看API这是设计师参考网站给不了的优势。我在改页面卡顿问题的时候也发现很多炫酷交互在低端机上会掉帧所以这类网站除了让你知道可以做成什么样还要帮你判断值不值得做成这样。2. 为什么收藏了几百个链接仍然做不出好界面我见过太多前端同行手机里存了一堆截图浏览器书签栏里躺着一堆导航站但一打开就开始犯难这个不错那个也好看我到底该用哪个说到底收藏这个动作太简单了真正困难的是从几百张截图中提炼出你自己项目需要的规则。2.1 你收藏的是别人的结果不是别人的决策一张好看的界面截图背后至少有几十个设计决策为什么这个按钮放在这里为什么这个卡片阴影这么大为什么表格的行高如此紧凑如果你只是截图那你看到的只是最终结果没有背后的决策过程。前端做UI落地的优势恰恰在于你比纯设计师更容易倒推出实现逻辑。看到一张后台看板截图你应该快速去拆顶部是用栅格布局排列的统计卡还是弹性布局的图表卡片侧边栏是固定定位还是flex嵌套列表为什么没有用表格而用了卡片每问一个问题你就离可复现更近一步。这个过程我管它叫反向拆解设计稿也是从看到变成懂的唯一路径。2.2 收藏夹里没有检索路径等于没收藏假设你收藏了Dribbble、Mobbin、Ant Design、Awwwards等几十个网站当你需要做一个电商活动页的时候你脑子里能不能立刻反应出应该去哪个网站如果每次都要把收藏夹从头到尾翻一遍那收藏就没有意义。更好的方式是给收藏夹建立检索逻辑:按照项目阶段来分类。比如我们野前端在工作中经常遇到四种阶段不用类型的需求完全没想法去看综合灵感池要看成熟产品怎么排去真实界面库要把视觉语言打成代码去找组件规范站要做动效交互去Awwwards或CodePen。只要把这四类在脑子里固化你就不会出现做一个后台却跑去Dribbble刷概念稿这种南辕北辙的事情。2.3 大多数人默认开始做页面才去找参考其实应该在需求拆解时就用很多前端拿到视觉稿或者产品原型之后第一反应是开始写代码写到一半觉得这个按钮不好看、那个间距不协调才临时去找参考。这个顺序本身就是错的。参考应该在写代码之前看甚至在理解需求的时候就看。我习惯在做技术方案的时候同步做一次UI参考调研。无非就是花十几分钟把这类需求的国内外参考案例翻一遍总结出三到五张截图放到项目文档里。这样既能帮自己明确页面要什么也能让后端知道你这块页面大概长什么样避免后面代码写完了再返工。说句实在话这个习惯帮我省下的改稿时间比我逛参考网站的时间多得多。3. 一套能落地的灵感检索工作流收藏参考网站最终是为了检索。检索这两个字听着很干其实很有趣你可以把它想象成给未来的自己准备一个工具箱需要钉钉子的时候马上就能找到那根合适的。3.1 第一步把浏览器书签整理成四层目录我建议所有人都花一个周末把书签栏清空重建。我的书签结构通常是这样的UI灵感库/综合灵感Dribbble、Behance、站酷、UI中国UI灵感库/真实产品Mobbin、Page Flows、参考线UI灵感库/组件规范Ant Design、Element Plus、Material Design、Apple HIG、daisyUIUI灵感库/动效案例Awwwards、CodePen、GSAP Showcase书签名称千万不要直接用网站原名叫综合灵感01这种而是在前面加一个用途前缀比如找首页灵感-Dribbble、后端造做后台-参考线。这样当你书签栏一多搜索也乱眼睛扫过去潜意识能直接知道这个站是用来做什么的检索效率会高很多。3.2 第二步把需求翻译成可搜索的关键词这一步是很多人容易忽略的。需求通常是一个中文句子比如想做一个支付成功页你不能直接拿支付成功页去Dribbble搜大概率能搜到但角度偏窄。更好的方式是把这个场景拆成几个维度业务类型、页面类型、目标感受、端类型。还是以支付成功页为例可以拆成pricing、success、payment、invoice、receipt、checkout这几个英文关键词再去Dribbble和Behance上搜。同理如果你做大数据展示大屏可以搜dashboard、data visualization、smart city也可以搜中文数据大屏可视化大屏在站酷和UI中国上中文案例反而更多。记住一个原则一个需求至少要准备三组关键词英文通用词、中文场景词、垂直领域词比如医疗、电商、金融。3.3 第三步三分钟速评法把图片变成信息结构看到一张好参考图不要只存下来就完事花三分钟做一次速评。我一般会问四个问题这个页面整体是几栏布局栅格是怎么分级的视觉层级靠什么建立颜色字号间距还是卡片阴影核心操作按钮有几个它如何被突出如果让我用组件库实现它大概对应哪些组件这四个问题回答完你就能在脑子里形成一个大概的组件树。比如看到一张数据看板截图你可能第一反应是左边导航、顶部面包屑、中间主体区三列卡片然后统计卡对应Ant Design的Statistic图表对应ECharts右上角按钮对应Button。到这里参考图就变成了可落地的设计语言不再只是一张好看的图。3.4 第四步建立个人UI灵感卡片定期复盘我用的是最原始也最有效的方式一个云笔记文档专门叫UI灵感卡片。每张卡片包含四部分参考图、来源链接、适用场景、设计要点。设计要点里写的就是上面三分钟速评的结论比如圆角比较大整体偏年轻化表格行距非常紧凑适合高密度数据用了毛玻璃效果但只用于弹窗不是大面积使用。每周五下午我都会花二十分钟翻一下这个文档删除一些已经过时或不再喜欢的卡片同时把同类场景的卡片合并。要像归档代码一样去归档UI灵感。截图一定要标注来源和链接因为以后真在项目里用了你会想回头去检查对方具体是怎么处理某个细节的。3.5 第五步把灵感对应到具体组件库其实从参考到落地卡住前端的最不是不知道怎么实现某个效果而是根本不知道该用哪个技术手段去实现参考图里的效果。所以平时逛参考网站的时候就要有意识地为每张参考图打上组件库标签。看到类似商品详情页的界面就想一下如果我用Element Plus实现商品图片该用Carousel还是自定义Swiper商品描述区用Descriptions组件合适吗看到后台布局就想一下侧边栏用框架自带的Menu组件还是自己封装这步看似简单但能极大缩短开发周期。因为你把查找参考和技术选型合并成了一个动作。久而久之你对组件库的熟悉程度也会从知道有这么个组件变成知道这个组件适合什么场景这种积累很难靠看文档获得必须通过持续对照参考图来训练。4. 实战以后台数据看板为例跑一遍完整流程光讲方法容易飘我拿一个最典型的开发场景来拆给大家看后台管理系统的数据看板页。这个页面几乎每个前端都做过但很多人做出来总感觉很普通其实是参考流程没走完整。4.1 先拆需求不要急着翻网站数据看板的需求表面上就是展示数据图表但仔细一拆它包含的内容完全不小顶部统计卡总营收、订单量、用户数、图表区折线图、柱状图、饼图、最近订单列表、数据趋势筛选器、异常提醒等。这几个模块的信息密度差异很大布局时谁重谁轻就直接决定了页面好不好看。把需求拆完之后我列出的搜索关键词大概是dashboard、analytics、data visualization、admin dashboard、BI系统、管理后台。然后才去对应的网站找参考这比直接逛首页精准得多。4.2 去哪些网站找以及找到什么我会在Dribbble搜dashboard数据看板类截图在Mobbin里搜真实Onboarding不一定Mobbin偏移动端用来搜数据变现工具的移动端页面。B端看板参考但是别忽略Ant Design Pro和Material Dashboard这类开源模板它们本身就是极好的UI参考。实际搜下来最常见到的dashboard参考图基本都有一个共同点左侧窄导航 顶部工具条 中间主体卡片栅格。你会发现统计卡普遍没有边框而是通过卡片底色的深浅做区分图表区通常占据主体位置高度在240像素到300像素之间最下方的表格要么用极简分隔线要么用间隔色区分行。这些规律比任何单张截图都有价值因为它们是可以直接复制到任意后台项目的通用规则。4.3 把参考抽象成设计规则看完参考之后我会写一个简单到只有自己看得懂的规则清单类似这样布局整体采用24栅格统计卡一行四个图表按7:5比例分两列间距卡片内边距统一24px卡片间距16px页面外层留白24px颜色主色用品牌蓝色语义色涨/跌只用于数据和状态标签不能大面积使用字号卡片标题16px数字指标32px表格正文14px层级阴影只出现在弹窗和下拉普通卡片不加阴影靠白色和边框区分这些规则出来后你会发现整个页面的骨架已经定了后面写代码只是照着填空不会来回折腾。4.4 落地到Vue3 Element Plus的技术映射如果你用的是Vue3 Element Plus这时候技术映射就非常简单了栅格布局用el-row和el-col统计卡用el-cardel-statistic图表用ECharts封装成组件最近订单用el-table改成紧凑模式。具体要注意几个地方el-table的默认样式自带大量边框数据看板里通常要去掉竖边框只保留极少的分隔线甚至用斑马纹来代替。统计卡的数字标签趋势小箭头用el-statistic就能实现但它默认样式比较朴素需要自己调icon和颜色。图表自适应大屏是另一个坑。如果你的页面要适配不同分辨率记得给图表容器设一个明确的高度然后用ResizeObserver监听容器宽度变化再调用ECharts的resize()方法。4.5 实测中的两个坑第一个坑是参考图里的信息密度和你真实数据不一致。参考图上可能只有三组统计卡非常清爽但你真实业务有七个指标硬塞进一行就会非常挤。这种情况不能硬抄参考图的布局而要想办法把四个以上指标做成可切换的类型页签这样既保持整体清爽又不丢信息。第二个坑是动效过度。很多dashboard参考图上有数字滚动的动效、图表入场动画很炫但如果页面挂在一个普通办公网络环境数据刷新又频繁这些动画在低性能电脑上就会卡。我在真实项目里通常只保留统计数字的滚动动画而且控制在一秒以内图表动画只保留首次加载的一次后续数据刷新完全不带动画这是为了把性能画在优先级里。5. 如何让UI审美成为一个前端可复用的能力UI参考网站只会越变越多关键不是把每个都记住而是建立一套可持续积累的方法论。前端这个职业很有意思我们的代码能力可以通过组件库不断复用但审美能力却很少有人主动去组件化。其实审美也能拆成一个个小模块放进自己的武器库。5.1 每天十五分钟固定逛站路径我比较推荐的频率是工作日每天花十五分钟不是漫无目的地刷而是周一综合灵感、周二真实产品、周三组件规范、周四动效案例、周五复盘整理。这样做的一个好处是你能从固定节奏里感受到不同类别网站之间的信息差。比如这一周你发现Dribbble上很流行大圆角卡片周五复盘时你就可以去查一下Ant Design何时开始默认改成了圆角风格这种视觉趋势和组件实现之间的关联只有持续观察才能建立。如果时间实在不够哪怕只看三个网站也行但一定要固定一个综合灵感Dribbble或站酷、一个真实产品Mobbin或参考线、一个组件规范Ant Design或Material。这三个搭配起来视觉、场景、实现三个维度就全有了。5.2 看参考时多做成本估算我逐渐养成了一个条件反射看到任何好看的界面效果第一反应不是真好看而是这大概要花多少成本做出来它维护起来有多难。比如毛玻璃效果在静态视觉上行得通但要是页面上有大量动态内容毛玻璃的背景模糊可能会严重影响阅读和性能这时候就要谨慎。比如复杂的滚动动画在不同设备上的滚动触发时机很难调很可能是月抛效果上线两周就砍了。这种成本评估能力是前端和设计师使用参考网站时最大的不同。UI参考网站对你来说不只是美学库更是一个需求池。每一种视觉手段都对应着一套技术方案和维护成本看得多了你才会知道什么需求应该用什么手段。5.3 把视觉趋势沉淀成团队的CSS变量和通用组件光个人学会还不够审美能力要落进项目才有价值。每当我连续看了一段时间发现某个视觉元素反复出现就会和技术组长聊要不要把这个圆角规范、间距规范、阴影等级沉淀到设计变量里大多数团队已经用了less/scss的变量但变量里往往只定义了品牌色和几种字号对于圆角、阴影、间距、过渡时长这些界面气质相关的变量却很少去定义。你可以试着在自己的项目里加一组CSS自定义属性--radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --shadow-card: 0 1px 2px rgba(0,0,0,0.04); --shadow-pop: 0 4px 12px rgba(0,0,0,0.08); --transition-fast: 0.15s ease; --transition-base: 0.25s ease;界面气质就会从默认值变成有设计感的默认值后续每个页面都不需要额外的视觉补丁。5.4 工具组合截图、文档、共享最后说下我日常使用的工具组合不一定是最新潮的但非常稳定。浏览器书签保存四个分类的入口。云笔记保存UI灵感卡片和每张卡片的设计要点。截图软件针对长页面我习惯直接保存整页截图因为界面是上下滚动的只截首屏你会漏掉很多细节。团队共享文档我会把项目好用的参考图放进去让设计师和产品也能直接看到这样大家在评审的时候讨论的是参考图上这个间距是24px而不是我感觉这里有点乱。这套组合里没有任何高门槛工具甚至不依赖某一个网站核心是流程要通收藏入口清晰、提炼要点固定、落地反馈及时。我自己的书签里现在躺着的参考网站数量其实不多大概三十个左右但每个网站的用途我都非常清楚。有人说UI参考网站就是要多、要全我反而觉得少而明确才更有效。当你能把某个网站的使用场景、搜索方法、落地方式都内化成肌肉记忆的时候它的价值远超一百个躺在收藏夹吃灰的链接。前端这行技术迭代很快但审美和判断力的复利效应更长值得每一天花那十五分钟持续积累。
做前端开发这几年我最大的一个体会是能不能做出好看的界面很多时候不是技术问题而是有没有见过足够多好看的东西并且能快速找到可参考的那一个。我见过不少同事GitHub上的组件库用得飞起但一到自己搭页面就总是那种默认边框、默认间距、灰扑扑的观感最后只能找设计师救场。反过来我也见过一些前端工程师明明不是科班出身但做出来的页面有模有样按钮、留白、层级都拿捏得很准区别就在于他们有一套自己的UI灵感参考体系。这篇文章不打算给你甩一个几十个链接的大杂烩收藏夹而是想从UI参考网站怎么用这个角度把这些资源拆成不同类型讲清楚每种类型适合什么时候查、怎么查、查完怎么转化成你自己的页面。前端和UI的边界本来就越来越模糊现在很多团队里前端要能读懂设计稿甚至要能自己先把页面搭出个像样的雏形。如果你也在往这个方向走那这套方法会比单个链接列表有用得多。1. 先把参考网站分成四类而不是堆一堆链接很多人收藏UI参考网站的方式就是把看到的文章里所有网址复制下来扔进书签栏。结果过了一个月书签栏塞了几百个链接真要做一个首页的时候反而不知道点哪一个。我的做法是按用途分四类每一类解决一个特定问题。1.1 第一类综合灵感池用来解决我完全没想法这类网站的特点是量大、更新快、风格跨界适合在项目还没有方向感的时候去逛。Dribbble和Beauha是最典型的两个但要注意它们的定位不太一样。Dribbble上有很多概念稿看起来特别惊艳但落地要考虑成本Behance上则更多是完整的项目案例可以拆解对方的设计思路、交付物甚至能看到背后的问题定义。国内的话站酷和UI中国其实被很多前端低估了。站酷上有大量中文环境下的界面设计案例特别是后台管理系统、移动端运营页这类很接地气的需求你在Dribbble上反而不容易找到对应案例。UI中国则偏重交互流程和组件细节很多帖子会讲解为什么这样设计对前端理解设计意图很有帮助。综合灵感池的使用策略不是今天没事干逛半小时首页而是带着耳边需求去搜索。比如你要做一个宠物医疗的小程序那可以在Dribbble搜pet clinic app在站酷搜宠物医疗在Behance搜veterinary mobile app。先把关键词吃透再看搜索结果里反复出现的视觉元素那基本就是这个领域的公约数。1.2 第二类真实产品界面库解决我想看某个成熟产品到底怎么排的这一类的价值是被很多人忽略的。Dribbble上好看的概念稿很多但真实线上产品的界面往往受业务、技术、数据量各种约束没那么多花活。如果你想复现那种真实可用又整洁的感觉直接去移动端界面库或者网页布局库看现成产品截图。Mobbin和Page Flows这类网站收集了大量真实App的完整流程截图。Mobbin按App分类你能看到某个产品从登录到主页到详情页的连续截图这对理解信息架构特别有帮助Page Flows则更偏做流程把用户操作路径拆成了连续卡片比如找回密码到底经过哪几步每一步界面长什么样拿到就能直接画流程图或者搭页面。国内能稳定访问的替代品也有比如参考线之类的UI导航站会聚合很多高质量案例。做C端产品的时候我会优先去Mobbin看竞品做B端产品的时候则更多去看Ant Design、Element Plus官方文档里的应用示例以及各类后台模板的演示站。因为这些真实产品的界面都经历过业务打磨页面元素的信息密度、栅格系统、交互反馈都比概念稿更有说服力。1.3 第三类组件规范与设计语言站解决我这套控件到底该长什么样前端开发者和纯设计师在使用UI参考网站时有一个明显区别设计师会关注配色、字体、质感而前端必须多问一句这玩意儿怎么实现成本多高。所以组件规范和设计语言站点应该成为前端UI参考体系里的一个独立类别。Apple的HIG和Material Design规范是所有组件库的底层逻辑来源。比如Material Design把阴影层级分成了好几个档次悬浮操作按钮为什么要放在右下角列表的间距为什么按8dp的倍数计算这些都不是凭空拍脑袋。你哪怕不用Material的组件库也能从规范里学到控件状态怎么定义的方法论。国内项目里最常用的组件库Ant Design和Element Plus都有自己的设计指南。Ant Design的文章写得尤其细会讲为什么按钮要分主次空状态该怎么引导用户Element Plus则更适合Vue技术栈的人直接对照。还有GitHub上一些企业级前端框架比如Vben Admin它在Uni-App不它其实是Vue3后台前端框架虽然本身是代码仓库但它的页面布局、登录页设计、数据看板样式也是一个很值得参考的组件级灵感库。另外如果你喜欢轻量化的界面方案daisyUI这类基于Tailwind CSS的组件库也值得收藏。它展示的是纯CSS就能做出来的现代风格对中小项目特别实用因为不存在组件库引入成本。1.4 第四类动效交互与前端实现案例解决静态好看了点着没感觉界面好看三分之一靠静态视觉三分之二靠交互手感。但大部分UI灵感网站在动效这块都偏弱因为它们展示的是截图。想要看交互动效怎么设计、怎么实现需要专门去这一类站点。Awwwards和SiteInspire是网页设计领域的风向标它们的评审标准里创新交互的权重很高。每次逛完之后你会看到一些滚动动画、鼠标跟随效果、页面切换方式这些放在Web页面上非常加分。CodePen里的很多作品则是实现优先的作者会把HTML/CSS/JS代码挂着遇到有意思的按钮悬停效果、Loading动画、卡片翻转直接看代码就能抢过来用比你自己猜快很多。如果你用的是React或Vue也可以专门关注Framer Motion、GSAP Showcase这类动效库的官方案例页。它们展示的每个效果几乎都有对应的代码文件前端看完可以直接去看API这是设计师参考网站给不了的优势。我在改页面卡顿问题的时候也发现很多炫酷交互在低端机上会掉帧所以这类网站除了让你知道可以做成什么样还要帮你判断值不值得做成这样。2. 为什么收藏了几百个链接仍然做不出好界面我见过太多前端同行手机里存了一堆截图浏览器书签栏里躺着一堆导航站但一打开就开始犯难这个不错那个也好看我到底该用哪个说到底收藏这个动作太简单了真正困难的是从几百张截图中提炼出你自己项目需要的规则。2.1 你收藏的是别人的结果不是别人的决策一张好看的界面截图背后至少有几十个设计决策为什么这个按钮放在这里为什么这个卡片阴影这么大为什么表格的行高如此紧凑如果你只是截图那你看到的只是最终结果没有背后的决策过程。前端做UI落地的优势恰恰在于你比纯设计师更容易倒推出实现逻辑。看到一张后台看板截图你应该快速去拆顶部是用栅格布局排列的统计卡还是弹性布局的图表卡片侧边栏是固定定位还是flex嵌套列表为什么没有用表格而用了卡片每问一个问题你就离可复现更近一步。这个过程我管它叫反向拆解设计稿也是从看到变成懂的唯一路径。2.2 收藏夹里没有检索路径等于没收藏假设你收藏了Dribbble、Mobbin、Ant Design、Awwwards等几十个网站当你需要做一个电商活动页的时候你脑子里能不能立刻反应出应该去哪个网站如果每次都要把收藏夹从头到尾翻一遍那收藏就没有意义。更好的方式是给收藏夹建立检索逻辑:按照项目阶段来分类。比如我们野前端在工作中经常遇到四种阶段不用类型的需求完全没想法去看综合灵感池要看成熟产品怎么排去真实界面库要把视觉语言打成代码去找组件规范站要做动效交互去Awwwards或CodePen。只要把这四类在脑子里固化你就不会出现做一个后台却跑去Dribbble刷概念稿这种南辕北辙的事情。2.3 大多数人默认开始做页面才去找参考其实应该在需求拆解时就用很多前端拿到视觉稿或者产品原型之后第一反应是开始写代码写到一半觉得这个按钮不好看、那个间距不协调才临时去找参考。这个顺序本身就是错的。参考应该在写代码之前看甚至在理解需求的时候就看。我习惯在做技术方案的时候同步做一次UI参考调研。无非就是花十几分钟把这类需求的国内外参考案例翻一遍总结出三到五张截图放到项目文档里。这样既能帮自己明确页面要什么也能让后端知道你这块页面大概长什么样避免后面代码写完了再返工。说句实在话这个习惯帮我省下的改稿时间比我逛参考网站的时间多得多。3. 一套能落地的灵感检索工作流收藏参考网站最终是为了检索。检索这两个字听着很干其实很有趣你可以把它想象成给未来的自己准备一个工具箱需要钉钉子的时候马上就能找到那根合适的。3.1 第一步把浏览器书签整理成四层目录我建议所有人都花一个周末把书签栏清空重建。我的书签结构通常是这样的UI灵感库/综合灵感Dribbble、Behance、站酷、UI中国UI灵感库/真实产品Mobbin、Page Flows、参考线UI灵感库/组件规范Ant Design、Element Plus、Material Design、Apple HIG、daisyUIUI灵感库/动效案例Awwwards、CodePen、GSAP Showcase书签名称千万不要直接用网站原名叫综合灵感01这种而是在前面加一个用途前缀比如找首页灵感-Dribbble、后端造做后台-参考线。这样当你书签栏一多搜索也乱眼睛扫过去潜意识能直接知道这个站是用来做什么的检索效率会高很多。3.2 第二步把需求翻译成可搜索的关键词这一步是很多人容易忽略的。需求通常是一个中文句子比如想做一个支付成功页你不能直接拿支付成功页去Dribbble搜大概率能搜到但角度偏窄。更好的方式是把这个场景拆成几个维度业务类型、页面类型、目标感受、端类型。还是以支付成功页为例可以拆成pricing、success、payment、invoice、receipt、checkout这几个英文关键词再去Dribbble和Behance上搜。同理如果你做大数据展示大屏可以搜dashboard、data visualization、smart city也可以搜中文数据大屏可视化大屏在站酷和UI中国上中文案例反而更多。记住一个原则一个需求至少要准备三组关键词英文通用词、中文场景词、垂直领域词比如医疗、电商、金融。3.3 第三步三分钟速评法把图片变成信息结构看到一张好参考图不要只存下来就完事花三分钟做一次速评。我一般会问四个问题这个页面整体是几栏布局栅格是怎么分级的视觉层级靠什么建立颜色字号间距还是卡片阴影核心操作按钮有几个它如何被突出如果让我用组件库实现它大概对应哪些组件这四个问题回答完你就能在脑子里形成一个大概的组件树。比如看到一张数据看板截图你可能第一反应是左边导航、顶部面包屑、中间主体区三列卡片然后统计卡对应Ant Design的Statistic图表对应ECharts右上角按钮对应Button。到这里参考图就变成了可落地的设计语言不再只是一张好看的图。3.4 第四步建立个人UI灵感卡片定期复盘我用的是最原始也最有效的方式一个云笔记文档专门叫UI灵感卡片。每张卡片包含四部分参考图、来源链接、适用场景、设计要点。设计要点里写的就是上面三分钟速评的结论比如圆角比较大整体偏年轻化表格行距非常紧凑适合高密度数据用了毛玻璃效果但只用于弹窗不是大面积使用。每周五下午我都会花二十分钟翻一下这个文档删除一些已经过时或不再喜欢的卡片同时把同类场景的卡片合并。要像归档代码一样去归档UI灵感。截图一定要标注来源和链接因为以后真在项目里用了你会想回头去检查对方具体是怎么处理某个细节的。3.5 第五步把灵感对应到具体组件库其实从参考到落地卡住前端的最不是不知道怎么实现某个效果而是根本不知道该用哪个技术手段去实现参考图里的效果。所以平时逛参考网站的时候就要有意识地为每张参考图打上组件库标签。看到类似商品详情页的界面就想一下如果我用Element Plus实现商品图片该用Carousel还是自定义Swiper商品描述区用Descriptions组件合适吗看到后台布局就想一下侧边栏用框架自带的Menu组件还是自己封装这步看似简单但能极大缩短开发周期。因为你把查找参考和技术选型合并成了一个动作。久而久之你对组件库的熟悉程度也会从知道有这么个组件变成知道这个组件适合什么场景这种积累很难靠看文档获得必须通过持续对照参考图来训练。4. 实战以后台数据看板为例跑一遍完整流程光讲方法容易飘我拿一个最典型的开发场景来拆给大家看后台管理系统的数据看板页。这个页面几乎每个前端都做过但很多人做出来总感觉很普通其实是参考流程没走完整。4.1 先拆需求不要急着翻网站数据看板的需求表面上就是展示数据图表但仔细一拆它包含的内容完全不小顶部统计卡总营收、订单量、用户数、图表区折线图、柱状图、饼图、最近订单列表、数据趋势筛选器、异常提醒等。这几个模块的信息密度差异很大布局时谁重谁轻就直接决定了页面好不好看。把需求拆完之后我列出的搜索关键词大概是dashboard、analytics、data visualization、admin dashboard、BI系统、管理后台。然后才去对应的网站找参考这比直接逛首页精准得多。4.2 去哪些网站找以及找到什么我会在Dribbble搜dashboard数据看板类截图在Mobbin里搜真实Onboarding不一定Mobbin偏移动端用来搜数据变现工具的移动端页面。B端看板参考但是别忽略Ant Design Pro和Material Dashboard这类开源模板它们本身就是极好的UI参考。实际搜下来最常见到的dashboard参考图基本都有一个共同点左侧窄导航 顶部工具条 中间主体卡片栅格。你会发现统计卡普遍没有边框而是通过卡片底色的深浅做区分图表区通常占据主体位置高度在240像素到300像素之间最下方的表格要么用极简分隔线要么用间隔色区分行。这些规律比任何单张截图都有价值因为它们是可以直接复制到任意后台项目的通用规则。4.3 把参考抽象成设计规则看完参考之后我会写一个简单到只有自己看得懂的规则清单类似这样布局整体采用24栅格统计卡一行四个图表按7:5比例分两列间距卡片内边距统一24px卡片间距16px页面外层留白24px颜色主色用品牌蓝色语义色涨/跌只用于数据和状态标签不能大面积使用字号卡片标题16px数字指标32px表格正文14px层级阴影只出现在弹窗和下拉普通卡片不加阴影靠白色和边框区分这些规则出来后你会发现整个页面的骨架已经定了后面写代码只是照着填空不会来回折腾。4.4 落地到Vue3 Element Plus的技术映射如果你用的是Vue3 Element Plus这时候技术映射就非常简单了栅格布局用el-row和el-col统计卡用el-cardel-statistic图表用ECharts封装成组件最近订单用el-table改成紧凑模式。具体要注意几个地方el-table的默认样式自带大量边框数据看板里通常要去掉竖边框只保留极少的分隔线甚至用斑马纹来代替。统计卡的数字标签趋势小箭头用el-statistic就能实现但它默认样式比较朴素需要自己调icon和颜色。图表自适应大屏是另一个坑。如果你的页面要适配不同分辨率记得给图表容器设一个明确的高度然后用ResizeObserver监听容器宽度变化再调用ECharts的resize()方法。4.5 实测中的两个坑第一个坑是参考图里的信息密度和你真实数据不一致。参考图上可能只有三组统计卡非常清爽但你真实业务有七个指标硬塞进一行就会非常挤。这种情况不能硬抄参考图的布局而要想办法把四个以上指标做成可切换的类型页签这样既保持整体清爽又不丢信息。第二个坑是动效过度。很多dashboard参考图上有数字滚动的动效、图表入场动画很炫但如果页面挂在一个普通办公网络环境数据刷新又频繁这些动画在低性能电脑上就会卡。我在真实项目里通常只保留统计数字的滚动动画而且控制在一秒以内图表动画只保留首次加载的一次后续数据刷新完全不带动画这是为了把性能画在优先级里。5. 如何让UI审美成为一个前端可复用的能力UI参考网站只会越变越多关键不是把每个都记住而是建立一套可持续积累的方法论。前端这个职业很有意思我们的代码能力可以通过组件库不断复用但审美能力却很少有人主动去组件化。其实审美也能拆成一个个小模块放进自己的武器库。5.1 每天十五分钟固定逛站路径我比较推荐的频率是工作日每天花十五分钟不是漫无目的地刷而是周一综合灵感、周二真实产品、周三组件规范、周四动效案例、周五复盘整理。这样做的一个好处是你能从固定节奏里感受到不同类别网站之间的信息差。比如这一周你发现Dribbble上很流行大圆角卡片周五复盘时你就可以去查一下Ant Design何时开始默认改成了圆角风格这种视觉趋势和组件实现之间的关联只有持续观察才能建立。如果时间实在不够哪怕只看三个网站也行但一定要固定一个综合灵感Dribbble或站酷、一个真实产品Mobbin或参考线、一个组件规范Ant Design或Material。这三个搭配起来视觉、场景、实现三个维度就全有了。5.2 看参考时多做成本估算我逐渐养成了一个条件反射看到任何好看的界面效果第一反应不是真好看而是这大概要花多少成本做出来它维护起来有多难。比如毛玻璃效果在静态视觉上行得通但要是页面上有大量动态内容毛玻璃的背景模糊可能会严重影响阅读和性能这时候就要谨慎。比如复杂的滚动动画在不同设备上的滚动触发时机很难调很可能是月抛效果上线两周就砍了。这种成本评估能力是前端和设计师使用参考网站时最大的不同。UI参考网站对你来说不只是美学库更是一个需求池。每一种视觉手段都对应着一套技术方案和维护成本看得多了你才会知道什么需求应该用什么手段。5.3 把视觉趋势沉淀成团队的CSS变量和通用组件光个人学会还不够审美能力要落进项目才有价值。每当我连续看了一段时间发现某个视觉元素反复出现就会和技术组长聊要不要把这个圆角规范、间距规范、阴影等级沉淀到设计变量里大多数团队已经用了less/scss的变量但变量里往往只定义了品牌色和几种字号对于圆角、阴影、间距、过渡时长这些界面气质相关的变量却很少去定义。你可以试着在自己的项目里加一组CSS自定义属性--radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --shadow-card: 0 1px 2px rgba(0,0,0,0.04); --shadow-pop: 0 4px 12px rgba(0,0,0,0.08); --transition-fast: 0.15s ease; --transition-base: 0.25s ease;界面气质就会从默认值变成有设计感的默认值后续每个页面都不需要额外的视觉补丁。5.4 工具组合截图、文档、共享最后说下我日常使用的工具组合不一定是最新潮的但非常稳定。浏览器书签保存四个分类的入口。云笔记保存UI灵感卡片和每张卡片的设计要点。截图软件针对长页面我习惯直接保存整页截图因为界面是上下滚动的只截首屏你会漏掉很多细节。团队共享文档我会把项目好用的参考图放进去让设计师和产品也能直接看到这样大家在评审的时候讨论的是参考图上这个间距是24px而不是我感觉这里有点乱。这套组合里没有任何高门槛工具甚至不依赖某一个网站核心是流程要通收藏入口清晰、提炼要点固定、落地反馈及时。我自己的书签里现在躺着的参考网站数量其实不多大概三十个左右但每个网站的用途我都非常清楚。有人说UI参考网站就是要多、要全我反而觉得少而明确才更有效。当你能把某个网站的使用场景、搜索方法、落地方式都内化成肌肉记忆的时候它的价值远超一百个躺在收藏夹吃灰的链接。前端这行技术迭代很快但审美和判断力的复利效应更长值得每一天花那十五分钟持续积累。
