#033: Photoshop 搜索

CSS-Tricks 上有很多内容。这也是它的设计有点挑战的原因之一。虽然我们可以保持设计简洁,但我们可能无法做到“极简”,因为网站上有太多值得关注的内容,这些内容构成了网站的本质。

也就是说,搜索在 CSS-Tricks 上非常重要。它被大量使用,每天有数百次搜索。如果我们能使搜索更显眼、更明显,我们甚至可以改进它。我希望人们使用搜索。我知道它运作良好,帮助用户找到他们想要的东西对每个人都有益。此外,从心理上讲,我认为以一种大而明显的方式提供搜索,表明了对网站内容的自信。

一个大的蓝色方框,上面有一个放大镜(通过我们的图标字体),位于头部位置,这将适合我们。蓝色在灰色上的对比非常醒目,传达了可点击性。

我们设想,当点击放大镜时,蓝色框会扩展成一个搜索框。它最初保持关闭状态的原因是:1)我们可以利用头部区域的额外空间放置我们的顶级赞助商;2)放大镜实际上可能比表单字段更显眼。

搜索表单包含您预期的内容:一个搜索字段和一个按钮。但它还有一些可以点击的链接,可以缩小您执行的搜索范围。我们将在即将到来的屏幕录像中使其真正起作用。