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

推荐阅读:
《超独特!优秀网格布局网页20例》
《超个性!30个引人入胜的产品展示网页设计》
《免费下载!25款精致的WordPress模板》

下面,本文收集了一些网页设计中轮廓框应用的案例。

Olivier Staub
此网页设计一反传统,对菜单采取了简化设计,蔚为壮观的全屏图像滚动。厚重的轮廓狂和粗字体极具视觉冲击效应。

独辟蹊径!网页设计中的框元素运用

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

独辟蹊径!网页设计中的框元素运用

Ola Kvernberg.
干净整洁,颇具视觉吸引力。设计师成功的融入了个人风格,极具创意和吸引力的主页。尽管主页采用了单色设计,但是紫色轮廓框线条很好的进行了调和,让整体显得错落有致。

独辟蹊径!网页设计中的框元素运用

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

独辟蹊径!网页设计中的框元素运用

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

独辟蹊径!网页设计中的框元素运用

Mixture
又是一例极简风格网页设计,通过对轮廓框的运用,提高了网页的整洁感和适用性。网站的内容跟原型设计有关,那么使用轮廓框再合适不过了。

独辟蹊径!网页设计中的框元素运用

Un autre expo.
架构分明,组织有序,信息呈递高效。设计师利用轮廓框作为导航,剔除了华而不实的装饰,提供了整洁的即视感。

独辟蹊径!网页设计中的框元素运用

Hotel Lago di Garda
恬淡的配色,舒适的体验,轮廓的加入稍稍收束了整体的轻盈感,加入了一点精致的韵味。

独辟蹊径!网页设计中的框元素运用

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

独辟蹊径!网页设计中的框元素运用

Pureplexity
精致的条纹风格,非凡的背景图像,纤细的线条让视觉效果变得流畅。扁平风格中的质感。

独辟蹊径!网页设计中的框元素运用

Quechua
颇为有趣的设计,重叠的轮廓线非常的有味。

独辟蹊径!网页设计中的框元素运用

Steve Angello
单色照片背景,以轮廓框作为导航,放置在页面的右下角,排列紧密,像是绘画作品上的署名一般,给用户带来灵活的触动感。

独辟蹊径!网页设计中的框元素运用

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

独辟蹊径!网页设计中的框元素运用

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

独辟蹊径!网页设计中的框元素运用

Exsud Creative.
细线条配粗字体,醒目。

独辟蹊径!网页设计中的框元素运用

Life of Pi

独辟蹊径!网页设计中的框元素运用

iPolecat
看看这个网页的页底!真的很棒,很简洁!很赞的轮廓框微件。

独辟蹊径!网页设计中的框元素运用

iErnest.
左右上角各一个,基本导航,视觉效果也不错。

独辟蹊径!网页设计中的框元素运用

Rafal Wasniowski
用户引导友好,通过线条将用户的注意吸引至一条一条的轮廓框。很有新意的创意。

独辟蹊径!网页设计中的框元素运用

BeFIT.
干净整洁,利用轮廓框来表现链接和菜单。

独辟蹊径!网页设计中的框元素运用

结论
轮廓框就像烹饪中的调味品一样,能起到化肥腻为鲜美的作用——能够将复杂精致的背景变得简约。

而且轮廓框的强烈对照作用也不容忽视,也可起到打造视觉焦点的作用。

这种风格的案例较少,因此如果在设计中采用轮廓框,会非常不拘一格,赶紧“框”起来吧!

原文地址: designmodo
优设网翻译:@MartinRGB

================关于优设网================
"优设网uisdc.com"是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
PS礼仪手册:网页设计师必须修炼的内功技法,更是不可或缺的WEB设计指南http://hao.uisdc.com/ps/
设计微博:拥有粉丝量60万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

独辟蹊径!网页设计中的框元素运用
 

收藏
点赞

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。