互联网已经深入人们生活的各个角落，无论什么设备我们都能访问互联网，当我们遇到一个新事物的时候，出现的第一个念头可能就是上网搜索一下，而在显示出的搜索结果中，新事物的官方网站介绍尤其被我们看中。

    但怎么才能让人们眼前一亮记住官方网站呢？

    这就要对网站做一些“特别的”设计，国内网站大多都很符合国人的审美和用户习惯，作为设计师我们千万不能只局限于国内的网站，放眼国外，拿来为我所用，也是设计的一个“进阶技能”，最近看的一个日本关于寺院的网站就让我十分惊喜，每次翻页的时候，会有一个不规则矩形从顶部飘下来，我对寺院并不想过多了解，但这小小的设计一直吸引着我不断翻页下去，想看看这些飘下来的图形最后会组成什么，这样细小的设计最后导致我翻到了页面底部，页面停留的时间也够长（做SEO的应该了解，页面停留时间对于网站优化也很有帮助）。最后，这些细小的设计居然感动了我，让我找到了与页面交互的乐趣，无疑，这个网站页面设计是成功的！

    那么，接下来对网页设计中感动人的设计做了下总结，分了五大类，希望对大家在设计中有所帮助，也可以互相交流。

  幽灵按钮  

    哈哈，说起幽灵按钮大家应该都不陌生，它也叫线框按钮、空按钮，大约从2014年开始不断流行，继承于ios7扁平化设计的理念，在许多感觉高端的网页中大量运用，尤其是国外网站，真是对幽灵按钮运用到了极致，各种细微的交互变化，让人爱不释手！

幽灵按钮交互有4种变化：空心/实心变化、线框变化、形状变化、外切元素变化。

空心/实心变化很容易理解，大家很常见，下面这几种例子值得参考：

元素变化例子

形状变化例子

元素变化例子

线框变化例子

元素变化例子

这些细节的变化总是让人愿意去重复碰触，十分让人感动

运用场景：大图片背景（带来大气、灵动、科幻感），纯色背景（带来轻巧、简约感）

  巧用折叠  

    折叠在网页中运用还是很少的，但在后台界面设计中运用的比较多，网页中运用的多运用在筛选项里、功能项里，折叠的优点有很多，比如压缩页面或者模块高度，整合功能作用使页面看起来更简洁整齐。还有一种就是导航的折叠，让导航收缩成面包图标，十分讨巧，这样也对做响应式网站很有帮助。

  图文交互  

    图文交互网页设计我们也看到很多，但大多数网页图是图，文是文，两个元素相敬如宾，互不想干，失去了很多层次感。图文可以叠加设计、位移设计、元素点缀设计，这样多层次的使用，会使你的网站焕然一新，可观赏性大大增加！

  时间过渡  

    鼠标经过效果有很多，但大多数前端在设计时只进行了切换，往往不会考虑两种切换间过渡效果，这就需要设计做好交互沟通，简单的时间过渡不只是能让页面有玩味，更能增加页面的生命感和呼吸感，但要注意时间的把控，让过渡更顺滑自然

  中轴线对称设计  

    大多数网页设计师遵循页面内容区固定宽度的设计方法，这样的设计可以保证不出错、容易元素对齐，大大增加美观度和栅格系统运用，但在这里我介绍下中轴线对称设计的妙处，中轴线设计就是以页面中心线为轴进行设计，向两边延伸，做出对称的页面，当然这里面用上栅格系统再好不过了，它模块间不规整的变化给页面带来跳跃性，视觉焦点更突出，但在视觉信息规律整合上增加了难度（因为人往往喜欢发现规律，从而降低视觉信息的接收敏感度，把第一视觉放在信息上。）所以，对于中轴线设计就仁者见仁智者见智了，不过主要用于展示且容易整合信息额网页可以尝试一下

    讲了这5大块内容，大家应该有所理解，细小的设计带来页面的友好度、有趣性，都会给我们到来感动，那你还等什么！

Powered by Froala Editor