过去的2013年和2012年,网页设计理念或多或少受到大公司设计风格的影响。谷歌在过去几年也对其搜索算法进行了多次调整——更加注重网站内容的原创性和易用性。HTML5释放了设计者的思维,这有利也有弊,HTML5动画有时被夸大了。随着移动网络访问的不断增加,响应式设计变得更加重要。下面我们通过一些简单的案例来说明2014年的网页设计趋势。但是,记住,不要过度。并非每种趋势都适合您的客户。作为设计师或Web开发人员,您有责任掌握趋势并定制客户的网站。做好准备,跟随我们一起了解今年的趋势,然后决定如何使用它们。1.扁平化设计当苹果发布iOS7时,并不是所有人都喜欢新的扁平化设计。然后,JonathanIvey知道现在是移除拟物化并引入最小、干净、坚固设计的最佳时机。iOS7发布后,网上出现了大量的扁平化样式,今年也不例外。这不仅适合移动设备,而且还体现了设计的精髓——有效地组织外观和感觉。如果你想掌握扁平化,就来这里学习:《怒赞!2013扁平化设计终极指南》《PS新手教程:轻松掌握四种扁平化设计风格》?Mostlyserious完全扁平化设计和一些动画效果Belancio的扁平化案例设计不是每个网站都适合扁平化设计,例如,你的客户会要求拟物化或3D元素等。对于其他内容比较多的网站,往往可以通过扁平化一些元素来简化网站。2、定制化在定制化更加突出的今天,互联网品牌竞争需要找到一种独特的方式来占领同一目标市场。为客户定制独特的网页设计已经成为一种趋势,尤其是使用HTML5、CSS3、jQuery等技术。许多网站使用具有颜色叠加、模糊等效果的图像。单页网站使用叠加、图像灯箱效果、滚动视差和其他交互效果也很常见。设计师设计网站的方式也有很多,可以考虑艺术字体(下文介绍)、混合字体或其他方法。试试这些资源让定制更方便:《网页特效:滚动视差设计指南》《让网页舞动起来!25个免费的视差滚动插件》16款值得Web开发者收藏的HTML5工具Dolox对整个站点使用视差定制,非常有创意。Hellomonday标题中的指南针方向和可爱的独特视差滚动。定制就是不要过于谨慎,有时候你只需要简单的原创项目就可以让你的网站脱颖而出。#p#3.艺术字体Web字体开辟了一种创造性的Web排版方式。现在,网页设计师不再局限于只使用几种系统字体。在过去的一年里,我们也看到越来越多的网站使用创意字体。还有一个好处就是还可以打印网页字体,大大方便了品牌的统一。艺术字体:清舞飞扬!30款免费高品质英文丝带字体下载25款炫酷闪电字体23款手写英文字体35款深沉神秘的哥特字体极端的,文案内容量大的时候不要使用艺术字体,否则会难以阅读。在这种情况下,您可以选择使用艺术字体作为标题,或者作为点缀。4.滚动讲故事越来越多的站点包含某种形式的滚动故事。通常用于单页网站(尽管这种趋势也可以用于关于或主页),用户向下滚动以查看故事的主要信息。过去,故事通常是通过视差来讲述的,但最近更多的文本和图像被用于视差讲故事,主要是移动端。单页滚动网站示例:视差滚动!我要去的13个鼓舞人心的单页网站!55非常规单页网站设计Everylastdrop使用单页网站设计创建故事,让用户了解社会或环境问题和解决方案。使用丰富的动画让您的访客保持愉悦。Sweez电子商务类还可以使用滚动视差来讲述故事。事实上,基于图像的故事比文本滚动更多,这既有优点也有缺点。太少的文本不利于搜索引擎。作为设计师,你需要做一个权衡,通过设置一些标签让SEO优化更加友好。#p#5.主题区主题区或主角区是一个源自平面设计领域的术语,意思是页面设计的头部采用大图片和少量文字。这种方法通过网站的简短快照在几秒钟内吸引访问者的注意力,使人们眼前一亮,产生好奇心。个人网站经常使用主题区设计,他们的伟大作品可能会产生巨大的影响。Moresleep非常简洁地讲述了他们的工作,以及他们如何使客户受益,并使用尽可能少的文字。Plainmade用一两句话来吸引观众。甚至大多数电子商务网站都使用主题区域,通常使用非常具体的图像来吸引观众。如果您不能将访问者带到主题区域下方,那就很危险。如果用户需要大量滚动才能看到更多内容,很容易迷路。如果是这样,您可以选择固定主导航。6.视频许多网站使用视频而不是文字来讲述他们的故事、介绍他们的产品或提供产品使用说明。视频的伟大之处在于它还增加了网站的搜索可见性,特别是提供了必要的SEO搜索标签。视频的一个缺点是有些访问者更喜欢看到标题和标题,而不是30秒到2分钟的视频,这意味着您需要提供文本替代版本。优秀范例:让网站更生动!网页Onlycoin主题区完美使用视频元素的案例展示视频、文字和图形向下滚动讲述故事,让访问者选择自己喜欢的方式。Savelli-geneve上下导航自动隐藏,让视频显示最大化。7.移动优先2014年,我们将看到更多面向移动的设计。不仅仅是响应式的,而是转向移动定制的网页设计。通常是大字体、长滚动、卡片式内容组织、强调社交媒体等。一些网站不仅对移动设备友好,还希望将网站做成移动应用程序。因此,您还应该了解移动应用程序设计。响应式资源:想学习响应式设计?看看史上最全的响应式设计资源库《来试试响应式设计!25例优秀的响应式网页设计赏析》精选卡片式从上到下展示Mottau,大字体、大按钮、大表格,更有利于移动端阅读。创建您的网站的移动版本,现在大多数人使用智能手机的次数远远多于计算机。响应式设计也是如此,PC端的接入逐渐减少。因此,询问您的客户他们的受众使用什么客户端访问网站,并根据数字建议他们以移动设备为先设计网站,或者拥有移动应用程序。8.极简设计极简设计的趋势由来已久,网站内容很少。随着越来越多的网站强调可用性,极简元素,甚至大型电子商务网站也开始发挥作用。这种类型的网站大多使用一种或两种配色方案,使导航保持简单并有效地组织菜单。图片正在取代文本块,许多人甚至放弃侧边栏,为读者提供更流畅的阅读体验。极简风格资源:《如何设计一个清爽极简的购物网站》《设计趋势!如何打造简约的单页网站设计》《我们为何要在设计中重视“留白”》Danebowen单色,轻松导航Madeofsundays即使是这些电子商务网站也可以保持极简。大多数设计师都知道极简主义网站更强调内容。极简设计剔除不必要的元素,回归设计为内容服务。然而,一些客户要求精简某些区域,例如导航,并使用可爱的插图或排版来加强品牌形象。10.交互设计网站的交互性越来越突出,有组织的交互体验可以与客户建立情感联系。没有Flash的帮助,HTML5和CSS3的结合可以创建丰富的动画效果。事实上,HTML5也是在移动设备上取代Flash的最佳技术。交互资源:优秀的交互设计:19个创意网页任你欣赏《推荐!交互细节中的那些变形金刚》交互设计师必备:50个线框图工具包和在线设计工具Thirththrone主题区独特的说明和文字,向下滚动寻找独特的剪裁点。米侬电商网站简单创意交互效果,把食物拖到面包上试试。Puma让有意义的交流特效游戏慢加载、翻滚动画按钮、滚动动画都成为用户体验中难以忘怀的部分。使用一系列交互效果的网站可以帮助客户更好地找到他们需要的东西,但是,加载网站时要小心,否则它将是一个沉重的HTML5网站。如果您的访问者不喜欢等待(我认为大多数人都喜欢),则应尽量减少交互影响。11.固定导航可用性研究中一个迅速兴起的趋势是固定导航菜单。这种类型通常是固定的顶部菜单,后面是长长的滚动条,或者点击菜单到达页面的某个区域。Wedgeandlever固定导航栏以提高可用性Justinaguilar通过不同的工作示例菜单访问不同的区域。Rook使用大型固定导航。并非所有网站都需要固定导航。如果您有很多内容需要快速访问,请考虑固定导航。事实上,有多少站点应该被修复(标题或侧边栏)并且没有被修复的选项?您还可以预测2014年的其他设计趋势,请在下面的评论中与我们分享。原文链接:http://blog.enqoo.com/blog/2014/01/24/2014-web-design-trends/
