得，今天正好有空，就来聊聊我平时做网站首页设计时，都上哪儿找参考这事儿。这活儿干久，有时候脑子真会卡壳，不知道新的首页该做成啥样，或者客户要求新颖，自己肚里那点存货就不够用。

一开始嘛我也是没啥头绪。项目来，要求做个“大气”、“有设计感”的首页。我就先在脑子里过一遍以前做过的，或者看过的觉得还不错的。但这样想出来的东西，总感觉差点意思，不够新，或者不一定适合手头这个项目。

瞎找阶段，碰运气

我就是直接打开搜索引擎，输入“网站首页设计”、“优秀网页设计”之类的关键词瞎搜。这方法，怎么说，效率不高。搜出来的东西五花八门，好多都是广告，或者是一些质量不咋地的模板站，参考价值不大。有时候翻半天，眼睛都花，也没找到几个真正能启发灵感的。

偶尔也能撞大运，碰到一两个做得确实不错的网站。这时候我就会赶紧把网址记下来，或者截个图存着。但这种方式太被动，完全是碰运气。

开始有目的地找“窝点”

后来我就琢磨，肯定有专门的地方能看这些设计？就像找图片素材有专门的图库一样。于是我就开始留意，也问问同行的朋友。

慢慢地，就知道几个设计师扎堆的地方：

• 视觉效果图多的地方： 像 Dribbble 这种地方，设计师挺多，发的图也漂亮，主要是界面截图或者小动效。有时候刷着刷着就停不下来，能找到不少新鲜玩意儿。还有 Pinterest，那上面图更多，啥都有，搜“web design layout”或者“homepage inspiration”能出来一大堆，跟逛画报似的，得有选择地看。
• 专门收集好网站的： 有些网站就是专门收集那些他们觉得设计得不错的成品网站。比如 Awwwards 或者 CSS Design Awards 这种（虽然我一般不看重啥奖不奖的），它们会展示整个网站，你能点进去实际体验一下，这个就比较直观。还有一些更纯粹的，就是展示列表，像画廊一样，比如 Landingfolio 专门收集落地页，有时候做活动页或者产品介绍页特别有用。
• 看代码实现的： 有时候不光是看样子，还想知道某些效果咋实现的，特别是 CSS 相关的。这时候一些 CSS 相关的画廊网站就派上用场，比如 CSS-Tricks Gallery（虽然主要是文章，但案例不少）或者 Codepen（这个更偏向代码片段，但首页效果也很多）。

我还发现，有些国内的设计平台，像那个即时设计、Pixso 啥的，它们自己搞的资源社区里，也有不少用户上传的设计稿或者模板，有时候也能淘到点东西，比较接地气。

我的使用习惯和心得

现在我基本就固定用那么几个顺手的。找灵感的过程大概是这样：

第一步，明确需求： 先搞清楚这回首页的核心目的是是展示品牌形象？是引导用户注册？还是卖货？不同的目的，设计侧重点肯定不一样。

第二步，关键词搜索和浏览： 根据需求，去上面提到的那些地方，用相关的关键词搜。比如要做电商首页，就搜“ecommerce homepage”；要做科技感的，就搜“tech website design”。然后就开始快速浏览，看到眼前一亮的，就停下来仔细看看。

第三步，截图和归类： 看到好的设计，不管是整体布局、配色方案、某个交互细节，还是字体搭配，我都会截个图。然后，我会在电脑里建个文件夹，比如按项目名，或者按“首页灵感”建一个，里面再分几个子文件夹，像“布局参考”、“色彩搭配”、“按钮样式”、“导航设计”这样，把截图分门别类放进去。

第四步，消化吸收，不是照搬： 这一步最关键。找参考不是为抄袭，是为启发思路。我会对着收集来的这些图片，分析它们好在哪儿？为什么这么设计？哪些元素可以用到我的项目里？怎么结合项目的具体需求进行改造？有时候可能是 A 网站的导航方式，加上 B 网站的色彩感觉，再结合 C 网站某个模块的排版，揉合成自己的东西。

特别注意： 不能光看“好看”的图。很多飞机稿（就是设计师自己做着玩，没上线的）可能视觉效果炸裂，但实际用户体验或者实现成本很高。所以我更倾向于看那些已经上线的、真实的网站案例，这样更有参考价值。

基本上，我找网站首页设计参考就是这么个过程。从一开始的没头苍蝇乱撞，到后来找到几个固定的“窝点”，再到形成自己的一套收集、整理、吸收的方法。工具是死的，人是活的，关键还是得多看、多想、多练，慢慢培养自己的设计感觉。今天就先啰嗦这么多，希望能给有需要的朋友一点小小的启发。