var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?aecc9715b0f5d5f7f34fba48a3c511d6"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); fet.setAlias({IMG_URL: "http://img.chinaz.com/"}) var contentid = 643199;
<
>
$.getJSON(APP_URL+'?app=system&controller=content&action=stat&jsoncallback=?&contentid='+contentid); function win() { var w = $(window).width(); var d = 1000; var t = 30; //30为容器宽度1/2 $('.post-prev').css({'left':(w-d)/4-t}); $('.post-next').css({'right':(w-d)/4-t*2}); } window.onresize = function() { win(); } win();
(function() { var s = "_" + Math.random().toString(36).slice(2); document.write('
'); (window.slotbydup=window.slotbydup || []).push({ id: '1080348', container: s, size: '468,60', display: 'inlay-fix' }); })();
您的位置:站长之家首页 > 建站 > 经验 > 正文
(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=13215756937974215344' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();
(function() { var s = "_" + Math.random().toString(36).slice(2); document.write('
'); (window.slotbydup=window.slotbydup || []).push({ id: '2847071', container: s, size: '680,60', display: 'inlay-fix' }); })();
(function() { var s = "_" + Math.random().toString(36).slice(2); document.write('
'); (window.slotbydup=window.slotbydup || []).push({ id: '2847058', container: s, size: '300,60', display: 'inlay-fix' }); })();

2017 年网页设计的十大趋势

2017-01-12 09:12 来源:IT程序狮 编辑:cherlee【纠错人评论

A-A+

6. 数据可视化

现如今,数据和分析越来越重要。而大品牌服务商正为用户提供了一个查看自己网站的统计数据的机会。

通过可视化的数据展示来增加用户与数据间的交互。当涉及让用户更好的表达时,丰富多彩的图表会特别有用。例如你可以使用 Tableau 来创建吸引用户注意的图表。

7. 减少图库图片,增加真实照片

这是一个简单却有趣的网页设计趋势。 在过去几个月浏览网站的过程中,我们发现使用图库图片的网站在不断的减少。作为用户,我们更愿意看到那些能够表明公司或业务的照片,而不只是一张通用的图片。

我也有这样的感觉,网页设计师宁可不选择图片,也不会使用图库图片。

摄影是一种艺术的表现形式,却被人们遗忘了若干年。但在2017年它会强势回归。然而,铭记于心的事情是你网站的服务目的是什么。因此,上述的一切,包括网站图像的选择,请务必要这样做。

个人照片(团队照片)同样很受欢迎——请给品牌一个门面

不仅真实图像的使用率在不断的增长,而且像卡通、漫画以及其他插图的使用比例也在增加。尤其是在一些科技类的社区中,通常会用一则漫画来谈论特定的主题或阐述一些细节。

8. Material Design

近年来,由 Google 推出的材料设计语言正稳步的推广到其应用程序中,包括 Gmail,Google 地图,Google 云盘和 YouTube 。而早在 2013 年,材料设计就以搜索词的形式出现了,但直到 2015 年它才成为了主流。

它是一种在页面上创建具有意义的层次排版结构的设计方法,在移动和响应用户动作的同时,将用户的焦点绘制到不同的区域。他们称后者为材料动效。而材料设计则是利用几何形状从视觉上来增强他们网站的体验。

由于它具备极大的灵活性,以及所有设备的兼容性,它也越来越受欢迎。

这是一个关于材料设计及其未来的持续讨论。要详细了解材料设计,请参阅Google上的简介。

9. 长滚动页网站

它是一个拥有利弊的长滚动页网站。总而言之,我们看到了越来越多的长滚动页网站的出现,例如 Facebook,Twitter 或 Instagram 。它们看似无底,然而又很成功。

在 Facebook,Twitter 和 Instagram 网站上,用户通过长时间滑动页面,来不断的刷新与浏览新的内容。作为慵懒的人类,我们已经习惯了现在的行为方式。许多网站也都在摒弃菜单和标签选项,取而代之的是将所有内容放在一个长长的页面上。而网站也可以拆解为图像、文字与视频,用以增添一些让人们感到有趣的体验。

那么,就继续愉快地滚动吧!

10. 字体排印越来越大

字体排印越来越大,并且更大胆。

2016 年我们已经看到了字体的大小与外观设计的增长,但这种趋势不会很快就停止。品牌名称将会变得更大、更醒目,甚至会全屏出现。而动态的颜色与纹理也将添加到那些有趣、充满活力的字体中,并创造出一个让你“哇”的效果。

无论是用于绘图,还是用来吸引用户的注意,字体排印工作都在有条不紊的进行着。而大型字体的排印可以有效地打破网格的界限,尤其针对那些拥有较长滚动页面的网站。

总结

虽然,我们认为这份列表上的所有内容都相当不错的,但不要尝试将每一个趋势都纳入到你设计的新网站上。它们中的一些适合为企业服务,而你也可以选择一些客户需要和想要的样式和功能。同时,不要尝试太多不必要的功能,这样会立刻降低网站的用户体验。所以,请谨慎的选择,最重要的是要有创意。

感谢你的阅读,如果觉得文章不错,不妨点个赞。

注:由于译者水平有限,欢迎大家多多指正;本文版权归原作者所有。

注:相关网站建设技巧阅读请移步到建站教程频道。

var cpro_id = "u2312054";
  • 0
  • 0
  • 收藏

看过本文的人还看过

document.write(unescape('%3Cdiv id="hm_t_48595"%3E%3C/div%3E%3Cscript charset="utf-8" src="http://crs.baidu.com/t.js?siteId=aecc9715b0f5d5f7f34fba48a3c511d6&planId=48595&async=0&referer=') + encodeURIComponent(document.referrer) + '&title=' + encodeURIComponent(document.title) + '&rnd=' + (+new Date) + unescape('"%3E%3C/script%3E'));
(function(){var c="//cpu.baidu.com";var a=function(){var e=document.createElement("script");e.id="cpu-block-entry";e.src=c+"/js/cb.js";document.head.appendChild(e)};var b=function(g){var h={msg:g.toString()||"no err msg",line:g.lineno||-1};var f=document.createElement("img");f.src=c+"/msg?m=block&e="+encodeURIComponent(JSON.stringify(h))};try{window.feedsbycpu=window.feedsbycpu||[];window.feedsbycpu.push({siteId:'1045726',blockId:'2167',display:"auto"});document.getElementById("cpu-block-entry")||a()}catch(d){b(d)}})();
document.write(unescape('%3Cdiv id="hm_t_59635"%3E%3C/div%3E%3Cscript charset="utf-8" src="http://crs.baidu.com/t.js?siteId=aecc9715b0f5d5f7f34fba48a3c511d6&planId=59635&async=0&referer=') + encodeURIComponent(document.referrer) + '&title=' + encodeURIComponent(document.title) + '&rnd=' + (+new Date) + unescape('"%3E%3C/script%3E'));
var jd_union_unid="350267405",jd_ad_ids="1469:6",jd_union_pid="CPbz65SSKhCN0IKnARoAIKCX5a0BKgA=";var jd_width=640;var jd_height=90;var jd_union_euid=""; var p="ABYOUhlZEAobN1Eaa0pGT1plRB9IXyJDB1oJJV1WWggrCRZGbHszXCh3ZBFTMx0zZnVvfTN%2FDRkOIgVRGF4RCxIPVytZEQMRAFMeWhEyImYnKxB7CiJYEUYGJQIXAlMTUhAGFQZSGVglAw%3D%3D";
(function(){ var appid = 'cy2rgHwBn0Qe', conf = 'prod_07a96b1f61097ccb54be14d6a47439b0'; var doc = document, s = doc.createElement('script'), h = doc.getElementsByTagName('head')[0] || doc.head || doc.documentElement; s.type = 'text/javascript'; s.charset = 'utf-8'; s.src = 'http://assets.changyan.sohu.com/upload/changyan.js?conf='+ conf +'&appid=' + appid; h.insertBefore(s,h.firstChild); window.SCS_NO_IFRAME = true; })()
var cpro_id="u1529699"; (window["cproStyleApi"] = window["cproStyleApi"] || {})[cpro_id]={at:"3",rsi0:"670",rsi1:"230",pat:"1",tn:"baiduCustNativeAD",rss1:"#FFFFFF",conBW:"1",adp:"1",ptt:"0",titFF:"%E5%BE%AE%E8%BD%AF%E9%9B%85%E9%BB%91",titFS:"14",rss2:"#000000",titSU:"0",tft:"0",tlt:"1",ptbg:"90",piw:"0",pih:"0",ptp:"0"}
(function() { var s = "_" + Math.random().toString(36).slice(2); document.write('
'); (window.slotbydup=window.slotbydup || []).push({ id: '2847007', container: s, size: '300,140', display: 'inlay-fix' }); })();
var jd_union_unid="350267405",jd_ad_ids="1329:6",jd_union_pid="CLXr3dmjKhCN0IKnARoAIPyX+rcBKgA=";var jd_width=300;var jd_height=250;var jd_union_euid=""; var p="ABsDUx1cEwAVN1Eaa0pGT1plRB9IXyJDB1oJJV1WWggrEB13cwEqWA91QghUJVJBE2RxWFNIOxkOIgVRGF4RCxIPVytZEQMRAFMeWhEyImYnKxB7CiJYEUYGJQIXA1YcUxYHEABQGl0lAw%3D%3D";
var cpro_id="u2311734"; (window["cproStyleApi"] = window["cproStyleApi"] || {})[cpro_id]={at:"3",rsi0:"300",rsi1:"250",pat:"17",tn:"baiduCustNativeAD",rss1:"#FFFFFF",conBW:"1",adp:"1",ptt:"0",titFF:"%E5%BE%AE%E8%BD%AF%E9%9B%85%E9%BB%91",titFS:"",rss2:"#000000",titSU:"0"}
var cpro_id="u1515570"; (window["cproStyleApi"] = window["cproStyleApi"] || {})[cpro_id]={at:"3",rsi0:"300",rsi1:"300",pat:"1",tn:"baiduCustNativeAD",rss1:"#FFFFFF",conBW:"1",adp:"1",ptt:"0",titFF:"%E5%BE%AE%E8%BD%AF%E9%9B%85%E9%BB%91",titFS:"14",rss2:"#000000",titSU:"0",tft:"0",tlt:"1",ptbg:"90",piw:"0",pih:"0",ptp:"0"}
var cpro_id="u1529681"; (window["cproStyleApi"] = window["cproStyleApi"] || {})[cpro_id]={at:"3",rsi0:"300",rsi1:"380",pat:"6",tn:"baiduCustNativeAD",rss1:"#FFFFFF",conBW:"1",adp:"1",ptt:"0",titFF:"%E5%BE%AE%E8%BD%AF%E9%9B%85%E9%BB%91",titFS:"14",rss2:"#000000",titSU:"0",ptbg:"90",piw:"0",pih:"0",ptp:"0"}
(function(){ var adScript = document.createElement('script'); adScript.src = 'http://img.chinaz.com/js/chinaz.js'; document.getElementsByTagName('head')[0].appendChild(adScript); })();
//文章详细页字体切换 $('.newsTitleBox .tabTxt span').click(function() { var bigSize = 'fz16'; var size = $(this).attr('size'); if( size == bigSize) { $(this).addClass('current').siblings().removeClass('current'); $('.newsMainBox').addClass('fz16'); } else { $(this).addClass('current').siblings().removeClass('current'); $('.newsMainBox').removeClass('fz16'); } return false; }); $(window).scroll(function() { //newFixedBox跟随滚动 var h = $(window).height(); var top = $(window).scrollTop(); var newFixedBox = $('.newFixedBox').prev().offset(); var fixedTop = newFixedBox.top; if(top>=fixedTop+344) { var h1 = parseInt($('#content').children('.main').height()); if(parseInt(top) + 340 < h1){ $('.newFixedBox').css({'position':'fixed','top': 0}); }else{ $('.newFixedBox').css({'position':'absolute','top': h1-510}); } } else { $('.newFixedBox').css({'position':'static', 'top':0}); } /* return true;*/ }); //微信二维码 $('.weixinBar .closeIcon').click(function() { $(this).parent().parent().hide(); }); $('#addError').click(function(){ art.dialog({ width:'800px', height:'500px', id: 'test', title: '文章纠错', content: '

       姓名:

联系邮箱:

文章标题:

纠错内容:

   验证码:

', lock: true, fixed: true, ok: function () { $this = this; if($('#contact').val()==''){ this.shake(); $('#contact').focus(); return false; }else if($('#content').val()==''){ this.shake(); $('#content').focus(); return false; }else if($('#article_seccode').val()==''){ this.shake(); $('#article_seccode').focus(); return false; } $.getJSON('http://app.chinaz.com/?app=contribution&controller=tg&action=add&jsoncallback=?', $("#tg").serialize(), function(data){ if(data.status=='success'){ $this.size('200px',100).content('提交成功,谢谢!').button({ id: 'button', value: '好的', disabled: false }); }else{ $this.size('200px',100).content(data.status).button({ id: 'button', value: '好的', disabled: false }); } } ); $this.size('200px',100).title('请稍等').content('提交中..'); $('.d-button').hide(); return false; }, okValue: '提交', cancelValue: '取消', cancel: function () {} }); return false; }); function holdpic(){//控制内容区域的的图片大小并为过大的图片添加查看原图 var options = { imageLoading:IMG_URL+'js/lib/lightBox/lightbox-ico-loading.gif', imageBtnPrev:IMG_URL+'js/lib/lightBox/lightbox-btn-prev.gif', imageBtnNext:IMG_URL+'js/lib/lightBox/lightbox-btn-next.gif', imageBtnClose:IMG_URL+'js/lib/lightBox/lightbox-btn-close.gif', imageBlank:IMG_URL+'js/lib/lightBox/lightbox-blank.gif', auto_resize:false }; $('#ctrlfscont').find('img').each(function(){ var img = this; if (img.width > 600) { img.style.width = "600px"; img.style.height = "auto"; //$(img).removeAttr('height'); var aTag = document.createElement('a'); aTag.href = img.src; $(aTag).addClass('bPic') .insertAfter(img).append(img) .lightBox(options); } }); $('#fulltext').click(function(){ $('.pagebreak').html(''); $.getJSON(APP_URL+'?app=article&controller=article&action=fulltext&jsoncallback=?&contentid='+contentid,function(data){ context = data.content; $('#ctrlfscont').html(data.content); $('.pagebreak').hide(); holdpic(); }); }) //digg.get(contentid, 'supports'); digg.get(contentid); } $(window).load(function(){ holdpic(); });