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 = 638447;
<
>
$.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-01-04 10:35 来源:UI中国 编辑:cherlee【纠错人评论

A-A+

6.不易寻找到的页面

即便用户已经拥有了他们所需要的一切东西,他们可能依旧不知道如何去寻找它们。结果是他们会费尽脑力去寻找他们所需要的。作为每个用户体验都不可或缺的元素,导航条应该放在显眼的地方,从而给用户信心去任意浏览网站而不用去担心会迷路。这时就需要信息架构发挥作用了。

Image title

(Image: Mojo Yogurt)

如果你认为汉堡图标非常糟糕的话,Mojo Yogurt则会让你见识见识什么是山外有山,你需要将鼠标滑过左上角的图标来显示出导航菜单。虽然围绕着Logo有个小的动效,但就整个屏幕的颜色和动效来说,它并不够明显。

Image title

(Image: Mojo Yogurt)

解决方法:

根据用户的喜好来理清你的信息架构。你的目标用户群可能并不认可你的做法,所以要从他们那里学习如何来组织网站。卡片分类试验会告诉你你的用户将会如何对页面和话题进行分类。

Image title

1、索引卡片上的内容   

2、预先设定的分类   

3、将索引卡片放置在相应的分类中。

要了解信息架构更多的知识,阅读Dan Brown的“信息架构八准则”。在这仅有的五页里,他概要阐述了每个设计师都应该知道的八项信息架构准则。比如说多项划分的准则(例:运用一些不同的分类方法来适应不同用户的思维模式)。

除了有效的信息架构外,如果你还想通过组合页面和菜单项来避免冗余该怎么办?设计工作室Waaark通过把工作室的简介,团队成员和联系信息这三个页面合并到一个页面来简化他们的导航。

Image title

(Image: Waaark)

如果确实有比其他功能重要的功能时,运用视觉技术来吸引他们的注意力。比如增加尺寸,添加动效或运用亮色以及对比色来吸引用户眼球。

Image title

比起新客户来讲,Paypal更关注老用户,并通过将登陆键设置在最吸引眼球的白色背景上。

或者可以用小说式架构(下图解释什么是小说式架构)来展示信息,特别是用一个相应的图形,但前提是,所有的这些元素都是易于理解的。

Image title

(右上图即为小说式架构,它就像是在给用户讲故事而不是干巴巴的列出各个项目)

7.内部的不连贯性

假如一个网站的首页用蓝色文本+下划线代表链接,而其他的页面仅仅只用蓝色文本却并没有加下划线。当用户浏览其他页面时就会停下来去想,“它没有下划线,这还是个链接么?”他们甚至可能不会再去关心链接,而会被其他页的不统一性分散注意力从而影响整体的用户体验。

排版错误和语法错误是一样的。请你记住,最棒的用户体验就是不被用户所注意到,而像上面的错误通常都会被注意到。一个元素是否与网站其他元素具有内在连贯性,是否与其他网站元素具有连贯性(比方说图标)都是至关重要的。在这些例子中,用户都必须花费一些时间来进行思考和处理,因而它们占用了用户的工作记忆。

Image title

SIPhawaii到处都是大写,包括字体大小和数字价格。你甚至都想不到去点击汉堡图标,因为它和其他网站上的汉堡图标都不一样。(鹿:加了矩形和阴影跟少先队三道杠一样)

解决方案:

保持统一的一种风格来贯穿整个网站,但说来容易做来难,因为这种错误往往是无意的。一个风格指南将会大有用处。它收集了全球所有的设计决策,当设计师需要它们的时候,就能被轻松的找到。因为类似于背景色、图片尺寸和标题排版这种细节容易被忽略,所以参考现成的会对设计有所帮助。

Image title

(Image: Lonely Planet)

在视觉和功能上都具有一致性的一个极好的例子就是Pinterest。不论你想要什么风格的照片,它们的格式都是一致的。标题、描述、作者、网站、收集和活动都使用了相同的字体和排版并且在每张卡片的同一个位置所展示出来。错落有致的排版给了用户更多的视觉吸引力。如果你理解其中的一张卡片,那么你就能明白他们所有的卡片。

Image title

附言:

Steve Krug说“不要让我思考”,或多或少表达出了用户们的心声。交互设计就像航行,路上所有的气流颠簸——比如说认知过载——都会影响航行的状态。设计师务必要利用一切机会去迎合用户,所以不要让他们想的太多。

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

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(); });