前进独辟蹊径！网站设计的框元素运用

网页设计中使用轮廓框元素的案例不多。但实际上，这些纤细的、整洁的轮廓框效果有效。为了效率的较大化，轮廓框一般采用纯色线条，这样便能产生前景与背景的明显对照。黑和白，是较传统的配色，以其对比强烈，效果突出而著称。因此很多轮廓框采用了白色线条。除了颜色，线条的粗细也是一大考量，纤细的线条让人感觉精致细腻，粗厚的线条显得异常醒目。

下面，大宛网络收集了一些网页设计中轮廓框应用的案例，感慨来收吧！

前进网站设计：Flinders Street Station Design Competition
这个网站由一大堆轮廓框组成，线条很厚。轮廓框中填充了柔和的色调，功能为按钮。

前进网站设计：Romain Briaux
午夜巴黎。醒目而又精致的轮廓框让整个网站看起来很高端。

前进网站设计：Husenbaba
极简主义，看起来很“新鲜”，非常原创、纯净的网页设计。设计师很明智的选用了纤细的线条，起到了很好的用户引导作用。

前进网站设计：Hotel Lago di Garda
恬淡的配色，舒适的体验，轮廓的加入稍稍收束了整体的轻盈感，加入了一点精致的韵味。

前进网站设计：Makers Quarter.
粗厚的有些“肥胖”的轮廓框。白亮的色彩让轮廓框非常的醒目，与整体页面也能够很好的协调。

前进网站设计：Pureplexity
精致的条纹风格，非凡的背景图像，纤细的线条让视觉效果变得流畅。扁平风格中的质感。

前进网站设计：Quechua
颇为有趣的设计，重叠的轮廓线非常的有味。

前进网站设计：LCDV.
轮廓框和标题紧密结合，超级纤细的字体，和奢华、壮观的背景相得益彰，营造出淡雅的品味。

前进网站设计：Hexaedro
3个六边形蜂巢轮廓框，与众不同，内含简练的图标，纤细的字体，再加上纯黑的背景，嗯，视觉的“美味佳肴”

前进网站设计：Exsud Creative.
细线条配粗字体，醒目。

前进网站设计：Life of Pi

前进网站设计：iErnest.
左右上角各一个，基本导航，视觉效果也不错。

前进网站设计：BeFIT.
干净整洁，利用轮廓框来表现链接和菜单。

大宛网络（前进网站建设）结论：
轮廓框就像烹饪中的调味品一样，能起到化肥腻为鲜美的作用——能够将复杂精致的背景变得简约。而且轮廓框的强烈对照作用也不容忽视，也可起到打造视觉焦点的作用。这种风格的案例较少，因此如果在设计中采用轮廓框，会非常不拘一格，赶紧“框”起来吧！