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 = 649596;
<
>
$.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-24 09:24 来源:简书网 编辑:cherlee【纠错人评论

A-A+

框架和提炼

设计框架定义了用户体验的整个结构,包括底层组织原则、屏幕上功能元素的排列、工作流程、产品交互、传递信息的视觉和形式语言以及功能性等。可以定义 产品交互框架视觉设计框架工业设计框架 以及 服务设计框架 四种。

定义产品交互框架

交互框架步只是要对高层次的屏幕布局进行定义,还要考虑工作流、行为以及组织。

交互框架的定义过程

步骤详解如下:

步骤一:形势要素举个栗子:考虑产品小巧、轻便还是手机在强光下屏幕变亮黑暗下屏幕变暗情况。

姿态是指用户会投入多大的注意力和产品互动,以及产品行为会对用户投入的注意力作出何种反应。

输入方法是用户与产品之间互动的方式,也受产品的外形和姿态、人物模型的态度、能力和喜好的驱使。举个栗子:键盘、鼠标、拇指版、触摸、遥控器等多种可能过的选择,要确定产品的主要输入方法。

步骤二:功能性元素是针对页面中的数据元素以及显示所做的操作。功能元素包括数据元素操作工具、以及数据元素的视觉和结构化管理方式。举个栗子:手机中显示相册中的照片(数据元素),可以对照片设计保存、删除、点击放大等操作,这些操作都是功能性元素。

步骤三:有了完善的高层次功能和数据元素之后,就可以按照不同功能分组工作,确定各自的层级。需要考虑的问题:

哪些元素需要大片的视觉区域,哪些不需要?哪些元素能够容纳其他元素?哪些元素需要捆绑使用?采用哪种交互模式和原则?等等。。。

步骤四:其实就是我们平时所了解的画原型图。最好由一个交互设计者和“设计沟通者”(老板/商业伙伴)以及一个视觉设计者组成的小组来进行。不过很多公司为了节省成本,都是一个人搞定的。

步骤五:这个过程是可变更和反复的。

语言思维者倾向于使用场景来引导整个设计过程,先构造情境,再分组,最后考虑画原型图。

视觉思维者会更倾向于从图解开始理解过程中的其他部分,先画原型图,再构造情境,最后才查看分类在场景中是否行的通。

步骤六:验证性的场景设计可以根据需要进行调整(或者完全抛弃/重新开始设计)。解决主要的三类验证性场景:

  1. 替代性场景(用微信语音而不是打电话);

  2. 必须使用的场景(二手手机再次出售就要删除原用户所有信息)

  3. 边缘情形场景(想添加两个相同名字的联系人)。

定义视觉设计框架

视觉设计框架包括一下特征:

1.开发视觉体验

比如收集并熟悉相关强大品牌的设计的实例。思考竞争对手,如何用确定的特征区分于对手产品,直到自己拥有独立性为止。

2.开发视觉语言研究

研究包括颜色、大小、小部件处理、整体的外形尺寸和界面的“材料”属性等。栗子:界面看起来像纸还是像玻璃。

3.把已选择的视觉风格应用于原型中

把选定的视觉风格应用于关键屏幕上。

定义工业设计框架

工业设计框架和视觉设计框架类似,但是形势要素和输入法对工业设计有很大的影响。通常遵循以下过程:

1.与交互设计者就形势要素和输入法进行合作

形式(又要好看/成本又低)和行为(又能操作/又能办事)的设计相互和谐。

2.开发粗略的原型

就是随便画个粗略的原型,比如画一个圈代表一块房地产。

3.开发形式语言研究

物理因素,包括形状、尺寸、材料、颜色和装饰等等啦。。。

定义服务设计框架

服务设计通常会影响商业模型,因此构建会早于其他设计。通常遵循以下过程:

1.描述客户旅程

按照客户提供的内容,根据着重点区分服务。

2.创建服务蓝图

比如客服。

3.创建体验原型

采取多种形式实现不同程度的保真。

创造型团队合作

在软件和服务开发过程中,我们需要团队合作伙伴来帮助我们解决、评估以及快速确定方案的问题。运转良好的团队可以使产品开发过程更加高效,可以更好的服务于用户。

下面讨论两个层面团队的概念:

  • 核心Team小而专注。一般由各个领域的专业技术人员组成,确保Team能够掌握核心技术。

  • 扩展Team规模较大,有的还按地理位置分布(比如腾讯)。但开发过程中扩展Team至少包括若干个核心Team,专注市场、设计和工程各领域。

与思想小伙伴的合作

合作是为了弥补自己在设计中的考虑不周,以及互补。思想小伙伴需要满足以下几点:

  • 合作前能清晰了解你要解决的问题

  • 向具有创造能力的同事/朋友寻求帮助

  • 可以按照你的思路进行设计或提出一个相反的建议

跨设计领域工作

产品生产周期中,不只是需要跨领域设计者之间的交流。交互设计者必须通视觉和行业设计者进行合作,对决策进行筹划,这样才能保证各个领域都备好了自己需要的资源,从而高效的工作。

责任和权威

产品组织中,开发者的专业经验、市场人员和商业涉众斗要加入产品创造和开发的设计过程中,不同领域设计人员有不同的责任和权威。

1.设计要对目前产品用户目标负责。

关注打造用户体验的最简单、最连贯以及最能激发快乐的机制是什么?

2.可用性要对验证用户对设计预期的反应负责。

关注设计能否传递有用性、可行性和可期待性的承诺?用户是否会按照设计预定的方式使用产品?

3.开发者负责设计的建造。

关注如何快速、可升级并可延伸性的方式传递体验?

4.市场营销负责定义市场机遇,了解客户需求、喜好和动机。

关注如何激发可采纳性?

5.商业领导一般负责商业机遇,保证产品的赢利。

关注产品功能和市场需求最明显的重合点是什么?

融合用户反馈

对设计者来说,用户体验的反馈是敏捷开发最具有价值的副产品。只要恰当的刺激、收集并给予解读,这种反馈极为有用。如果你是设计者,重要的是在新特性或新功能发布时要确定希望从用户反馈中学到什么。反馈点:主要元素进展是否顺利?如何使用?哪些地方用户会出错?哪些功能/设计让用户惊喜?

创建创造性的文化

伟大的团队出现是因为他们置身的现实和虚拟环境能够滋润他们。创造一个积极的有效的组织文化时一个很大的话题,但组织文化的基本元素不可忽视,如何使这些元素获得文化火花:

1.环境的馈赠

小的环境惊喜(大胆的颜色、新材质、有趣的外表),可以为创意的激发提供了外部动力。

2.小的工作场所

能够尽量同外部世界隔绝。遇到难题时可以找个角落,竖起屏障,独立思考。

3.协作的行为准则

在团队中开展工作角色清晰、互相信任、责任感和工作习惯时最基本的。做好自己的本分工作,确保自己的团队小伙伴承担起自己应该承担的责任。

4.容许积极正面的题外话

题外话有可能提供给你意想不到的灵感,容许题外话的团队设计的方案一般也更有趣、更贴心。法则:留点儿迷路时间。

确定设计师的技术水平

设计师的技术水平必须满足设计问题的广度和深度。下面讨论如何思考体验的层次和每个层次需要的技巧:

1.学徒

作出符合设计人物的判断需要大量时间和努力,成长过程中有师傅指导和支持会成长的更快。

2.技术高手

核心团队中比不可少,有更好的创意和想法。

3.专家

为设计团队提供指导和架构,为项目确立范围、确定重点,推动设计开发。

协作是关键

设计者具备与同项目的其他成员合作的能力,因为这些成员能够对整体的用户体验产生影响。协作是为了确保用户体验的所有面能够和谐。最终想要设计出满足用户需求的产品,并实现成功交付,这个过程需要无数人的悉心合作。

作者:Rlss

来源:http://www.jianshu.com/p/fe24255b79b2

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

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