个人使用
收藏设计参考时，把“哪里好”也写下来
保存设计参考时，补上一句“喜欢哪个细节”和一句“准备在自己的项目里试什么”。把网页 URL 与具体观察一起留在 linqlo，重新开始制作时，就更容易知道这份参考能帮上什么忙。
这是表现收集视觉氛围的生成插画，并非真实网站，也不是可直接套用的设计素材包。
从“喜欢这个氛围”再往前走一步
刚发现一个好看的网站时，颜色、照片、文字似乎都很吸引人。几天后重新打开，记得喜欢它，却想不起当时具体想借鉴什么，又要从头看一遍。
不用一次分析整个页面。先记一个观察：“营业时间旁边就是预约入口”“照片周围的空白，让我更容易看清旁边的说明”。把关系说清楚，才能看出哪些想法也适合别的主题。
从四个角度中，选一个这次要看的重点
看配色时，除了喜欢哪些颜色，也看各自的作用。背景、正文、重要操作分别用了什么颜色？“绿色很好看”可以进一步写成“背景比较克制，让我更容易注意到预约入口”。没有做过测试时，把效果写成自己的观察。
看留白时，说明是哪两部分之间的距离。是照片四周、标题与正文之间，还是不同信息组之间？“留白很多”不如写清让自己注意到的具体关系。
看导航时，观察读者确认哪些信息后可以继续行动。了解营业时间、地点或活动内容之后，怎样进入预约或联系页面？只记住按钮颜色，还不足以说明这条路径为何值得参考。
看文案时，留意它回答了什么问题。不只摘下按钮上的几个字，也看操作前有哪些说明、是否容易理解下一页是什么。自己觉得顺畅，不等于已经证明所有访客都会这样使用。
假设要做一个咖啡馆活动页面
设想为咖啡馆的周末活动制作介绍页。下面的参考网站 A、B、C 和制作内容，均为虚构例子。
网站 A 用来观察预约入口。如果备注只有“很清爽”，制作时很难用上。可以改为：
观察位置：营业时间附近的预约入口。 借鉴点：先提供参加判断所需的信息，再给出下一步。 本次尝试：活动时间和人数说明之后，放报名方法。
网站 B 用来观察标题。“喜欢字体”可以改成“短标题后跟一句解释，让我更容易顺着信息分组阅读”。自己的活动页也可以试试这种关系，但文字要根据真实活动内容重新写。
网站 C 只看照片的呈现方式：“横向照片展示了室内纵深。自己的页面要选择能让人理解活动空间的照片。”这比“照片很大”更能指向下一步。每个参考各自负责一个问题，便于在同一个项目里取舍。
这是用于比较颜色、留白与画面裁切的生成插画，不代表真实网站的测试结果。
把观察放回项目里
在 linqlo 建立“咖啡馆活动·参考”收藏夹，保存各页面的 URL。可以先只保存网址，再编辑“备忘录”。尽量选择能回到具体参考位置的页面，不要只存看不到那个细节的首页。
标题可以写“网站 A｜预约入口”“网站 B｜标题和说明”，把用途一起标出来。也可以手动添加“导航”“文案”“照片”等标签，用自己以后会查找的词。相比增加许多标签，先写清该看哪里更有用。
如果页面会随屏幕大小改变布局，可以补一句“在手机上看到的”或“宽屏电脑布局”。下次显示不同，也有线索回顾当时的观察。网站本身也可能更新，准备使用参考时应重新打开原页面。
真实 Web 版编辑界面中展示的 example.com 链接为虚构示例。备忘录与标签是手动填写的示例。
换成自己的内容后，再检查一次
参考中的布局，不一定适合自己的文字量和照片。要用真实内容确认：活动时间和地点是否清楚，报名入口是否容易找到。检查的重点应回到最初想解决的问题，而不只是有没有做得像参考。
如果希望使用对方的照片、文字或其他素材，需要另行确认使用条件及所需许可。保存参考 URL 与把别人的素材发布到自己的页面，是两个不同的决定。
完成后，可以补写实际采用的部分：“保留了在实用信息旁安排下一步的思路；照片比例按自己的素材调整。”这样，下次打开收藏时，看到的不仅是喜欢的网站，也有自己当时的设计思考。
相关指南
用自己的链接，开始实践。
创建免费账号即可开始，无需信用卡。
免费开始整理书签
