生活

交互设计分析网站交互设计分析仍然枝繁叶茂

2019-05-15 05:21:35来源:励志吧0次阅读

1 : 站交互设计分析:仍然枝繁叶茂 何处锦上添花

A5创业项目春季招商 好项目招代理无忧

阅读器,作为1神器,帮我们打开了缤纷万千的络世界窗口。而她发展到今天,也诞生了1个又1个的怀神版本,可能有人钟情于她的花梢,有人痴迷于她的速度我们,作为重构工程师,必定要更关注他背后的技术革新,那就是css3的支持了!上次,加菲猫已给我们演示了夸大的css3动画。而这次,我们从细节入手,看看css3遇到weibo,会给人甚么期待 。

固然在这之前,得先了解下造访的各位大侠的神器占比:

PS:(数据来自新浪微博产品数据分析后台的2012年1月份阅读器占比)

图标中可以看出,IE6占比逐步下降,而支持css3的阅读器,也占有了相当的份额,也就意味着,我们1方面可以更多有选择的放弃IE6的兼容,另外,也能够在支持CSS3的高版本阅读器上做更多的推敲。

而具体在哪些细节上可以斟酌锦上添花呢?此文仅做抛砖引玉,探讨下哪些css3的效果可以在产品细节上有所显现,而我们也会在此文以后,尽快在微博的优化中,把提到的这些逐渐上线!

利用伪类提升用户体验

比如说文本,大家在阅读页的时候,常常会用鼠标反选1些文字内容,用来方便阅读。这时候候页文字通常显现高亮白色文字+蓝底背风景显示。以下图:

但是微博主站有不同的皮肤,深深浅浅。当遇到1个暗色皮肤背景,仍然显示蓝底儿白字,那效果就不是特别帅气了。这时候候,其实可以推敲用伪类selection为页文字的高亮提供了设计方案,来改变反选展现效果。鼠标选中文字后可设置相应的背风景和文字色,乃至是透明。简单1个属性就体现了产品对用户操作的关怀,从而提升用户使用感受。

利用渐变字色提升视觉冲击

随着css3的广泛使用,文字色渐变效果也愈来愈遭到设计师和前端工程师的青睐。1个良好的渐变可使文字看起来有质感,恍如刻在纸面上1样,从而给用户1个良好的视觉感受。我们可以利用CSS3支持的文字透明,显示背景渐变的方式来模拟文字渐变。再加上1些过渡动画效果,我们乃至可以摹拟1个简单的跑马灯的效果了。以下图:

哈哈。不过别对这个设计认真。这只是1个示范,不代表我们UDC的品味。

利用鼠标交互提升快感

鼠标点击(click)、滑过(hover)、激活(active)操作还是当今webPC端上重要的几个交互方式。新浪微博上大部份的互动操作也来自于此。以V4宽版为例当前微博主站可以有鼠标交互操作的模块大致包括:顶导,左侧栏导航,勋章列表,feed区,右侧栏皮肤选择按钮,皮肤选择弹层

比如微博左边导航的勋章栏,那里的向下展开操作区,在鼠标滑过时虽然有背风景变换,但略显僵硬。时间久了,或许用户会对这类变换感觉厌倦了。没关系,现在我们可以通过CSS3可以把这里玩儿活。CSS3过渡属性(transition)的出现,可以很好的解决这个问题。通过设定过渡时间,可让这类效果有1个进程化的变化效果,让鼠标滑过的变化效果,用柔和的渐显渐隐来处理。这样便改进了突兀的视觉变化,同时给人1种优雅的操作感受。

那末延伸想象,当点击了勋章展开操作区以后,勋章模块由原来的1行,变玉成部展开。嘭的1下,几10枚勋章跳出来,那这个展开效果是否是也能够采取刚刚那个柔和的方式展开呢?在CSS3诞生之前,这类效果只能通过js帮忙实现。而现在,这类效果交给CSS动画处理再适合不过了。CSS3不但能够控制展开的速度函数,而且可以设置展开内容的透明度。固然,只有高级阅读器可享用哦,亲~

利用动画效果吸引眼球

在摄影作品中,讲求布局不要太死,要给照片留口气。鉴戒到页设计中,这个说法一样有它的存在乎义。先看看我们的微博首页,各个模块之间挤在1起,看上去布局有点闷,这时候候候,右上角那个彩虹按钮就成了点睛之笔。

其实这个设计是延续了之前新浪博客的设计。如图

可能当时由于实现本钱的缘由,新浪博客这里使用flash设计了鼠标滑过的动画。我们再来看现在搜狐微博的例子,鼠标划过,柔和展开:

他主要通过js时间来控制按钮外层的class名123的切换,在连续切换3次后模拟了这类柔和的展开效果。

而现在的新浪微博的情况是用户鼠标滑过,彩虹简单跳1下,如果觉得灵气少了点,那末好,我们可以想法加上1些效果看看。

利用css3简单加上1些5角星欢快的旋转飞出,然后淡出的效果。这样给人1种欢快乐泼的感觉,恍如点击里会有1些欣喜。这样既满足了当今诸多互联产品希望给页面添加活泼感的要求,又使得我们的页面不至于太闷,同时更能勾起用户的点击愿望。顺次为5角星飞出的4个瞬间状态,以下图:

是否是很path?固然这只是1个示范,不代表我们UDC的品味。

利用按钮多态效果提升直观感觉

我们设计的时候都会斟酌按钮的3态(即使没有active,少也要保证有link和hover吧)。按钮的3态用来摹拟用户的点击进程,1个好的按钮设计可以大幅增加用户的点击欲,特别是1些电商站上,1个button制作的是不是精良,是不是吸引人点击,乃至可以直接影响到电商站的终究成交量。

而CSS3的到来,通过动画,渐变再加上按钮过渡效果,阴影等属性的使用,则可以更加细致的摹拟全部用户点击的进程,使得用户在全部操作的交互进程都变得愉悦且舒服。比以下图我做的这个结合CSS3 3D所摹拟的立体键盘效果。大家可以看到Z、X、N、M键是被按下的效果,其余是没有被按下的效果,如果用户在长按住按钮的时候,还会出现按键摹拟被按下的进程动画。被按下后光线投影不变,而文字的凹凸感改变。这样便比较精细的摹拟了用户点击进程

看到这,各位看官可能笑了,你这都是纸上谈兵啊,都是还没上线的假想。固然路是1步步走的,饭是1口口吃的,我们不可能1下子就把这么多优化假想1步上线,但其实我们上也有1些细节是用到了css3的些许特性。

比如在刚上线的微公益中多处鼠标划过都应用了过渡属性,使得鼠标滑过效果柔和且优雅。

还有投票项目,用户鼠标滑过参与者小头像,有0.2秒的过渡变化和2像素的绿色阴影分散效果,这样可以良好的提示用户当前所划过的用户。

其实许多交互细节效果是没法体现在设计稿上的,这就需要我们工程师有1定的敏锐和直觉,能够在UE稿出来后就跟交互设计师商议1些具体可行的交互方案,进而提高我们的产品使用体验。

而且css3受累于国内阅读器占比的现状,没法大面积使用。但我想,作为行业内的1分子,从细节入手,逐渐提高自己站在高版本阅读器下的细节品质,多少也会影响到高版本阅读器的推动。如果您由于看了这遍文章,而去升级了自己的阅读器,开始尝试使用firefox和chrome,那这篇文章就成功啦。第1次在UDC博客发博文,让各位大牛见笑了。

2 : 站交互设计分析:仍然枝繁叶茂 何处锦上添花

阅读器,作为1神器,帮我们打开了缤纷万千的络世界窗口。而她发展到今天,也诞生了1个又1个的怀神版本,可能有人钟情于她的花梢,有人痴迷于她的速度我们,作为重构工程师,必定要更关注他背后的技术革新,那就是css3的支持了!上次,加菲猫已给我们演示了夸大的css3动画。而这次,我们从细节入手,看看css3遇到weibo,会给人甚么期待 。

固然在这之前,得先了解下造访的各位大侠的神器占比:

PS:(数据来自新浪微博产品数据分析后台的2012年1月份阅读器占比)

图标中可以看出,IE6占比逐步下落,而支持css3的阅读器,也占有了相当的份额,也就意味着,我们1方面可以更多有选择的放弃IE6的兼容,另外,也能够在支持CSS3的高版本阅读器上做更多的推敲。

而具体在哪些细节上可以斟酌锦上添花呢?此文仅做抛砖引玉,探讨下哪些css3的效果可以在产品细节上有所显现,而我们也会在此文以后,尽快在微博的优化中,把提到的这些逐步上线!

利用伪类提升用户体验

比如说文本,大家在浏览页的时候,常常会用鼠标反选1些文字内容,用来方便浏览。这时候候页文字通常显现高亮白色文字+蓝底背风景显示。以下图:

但是微博主站有不同的皮肤,深深浅浅。当遇到1个暗色皮肤背景,依然显示蓝底儿白字,那效果就不是特别帅气了。这时候候,其实可以斟酌用伪类selection为页文字的高亮提供了设计方案,来改变反选展现效果。鼠标选中文字后可设置相应的背风景和文字色,乃至是透明。简单1个属性就体现了产品对用户操作的关怀,从而提升用户使用感受。

利用渐变字色提升视觉冲击

随着css3的广泛使用,文字色渐变效果也愈来愈遭到设计师和前端工程师的青睐。1个良好的渐变可使文字看起来有质感,仿佛刻在纸面上1样,从而给用户1个良好的视觉感受。我们可以利用CSS3支持的文字透明,显示背景渐变的方式来模拟文字渐变。再加上1些过渡动画效果,我们乃至可以摹拟1个简单的跑马灯的效果了。以下图:

哈哈。不过别对这个设计认真。这只是1个示范,不代表我们UDC的品味。

利用鼠标交互提升快感

鼠标点击(click)、滑过(hover)、激活(active)操作还是现今webPC端上重要的几个交互方式。新浪微博上大部份的互动操作也来自于此。以V4宽版为例当前微博主站可以有鼠标交互操作的模块大致包括:顶导,左边栏导航,勋章列表,feed区,右边栏皮肤选择按钮,皮肤选择弹层

比如微博左边导航的勋章栏,那里的向下展开操作区,在鼠标滑过时虽然有背风景变换,但略显僵硬。时间久了,也许用户会对这类变换感觉厌倦了。没关系,现在我们可以通过CSS3可以把这里玩儿活。CSS3过渡属性(transition)的出现,可以很好的解决这个问题。通过设定过渡时间,可让这类效果有1个进程化的变化效果,让鼠标滑过的变化效果,用柔和的渐显渐隐来处理。这样便改良了突兀的视觉变化,同时给人1种优雅的操作感受。

那末延伸想象,当点击了勋章展开操作区以后,勋章模块由原来的1行,变玉成部展开。嘭的1下,几10枚勋章跳出来,那这个展开效果是否是也能够采取刚刚那个柔和的方式展开呢?在CSS3诞生之前,这类效果只能通过js帮忙实现。而现在,这类效果交给CSS动画处理再适合不过了。CSS3不但能够控制展开的速度函数,而且可以设置展开内容的透明度。固然,只有高级阅读器可享用哦,亲~

利用动画效果吸引眼球

在摄影作品中,讲求布局不要太死,要给照片留口气。鉴戒到页设计中,这个说法一样有它的存在乎义。先看看我们的微博首页,各个模块之间挤在1起,看上去布局有点闷,这时候候候,右上角那个彩虹按钮就成了点睛之笔。

其实这个设计是延续了之前新浪博客的设计。如图

可能当时由于实现本钱的缘由,新浪博客这里使用flash设计了鼠标滑过的动画。我们再来看现在搜狐微博的例子,鼠标划过,柔和展开:

他主要通过js时间来控制按钮外层的class名123的切换,在连续切换3次后摹拟了这类柔和的展开效果。

而现在的新浪微博的情况是用户鼠标滑过,彩虹简单跳1下,如果觉得灵气少了点,那末好,我们可以想法加上1些效果看看。

利用css3简单加上1些5角星欢快的旋转飞出,然后淡出的效果。这样给人1种欢快乐泼的感觉,恍如点击里会有1些欣喜。这样既满足了现今诸多互联产品希望给页面添加活泼感的要求,又使得我们的页面不至于太闷,同时更能勾起用户的点击欲望。顺次为5角星飞出的4个瞬间状态,以下图:

是不是是很path?固然这只是1个示范,不代表我们UDC的品味。

利用按钮多态效果提升直观感觉

我们设计的时候都会斟酌按钮的3态(即使没有active,少也要保证有link和hover吧)。按钮的3态用来模拟用户的点击进程,1个好的按钮设计可以大幅增加用户的点击欲,特别是1些电商站上,1个button制作的是否是精良,是不是吸引人点击,乃至可以直接影响到电商站的终究成交量。

而CSS3的到来,通过动画,渐变再加上按钮过渡效果,阴影等属性的使用,则可以更加细致的摹拟全部用户点击的进程,使得用户在全部操作的交互进程都变得愉悦且舒服。比以下图我做的这个结合CSS3 3D所摹拟的立体键盘效果。大家可以看到Z、X、N、M键是被按下的效果,其余是没有被按下的效果,如果用户在长按住按钮的时候,还会出现按键摹拟被按下的进程动画。被按下后光线投影不变,而文字的凹凸感改变。这样便比较精细的摹拟了用户点击进程

看到这,各位看官可能笑了,你这都是纸上谈兵啊,都是还没上线的假想。固然路是1步步走的,饭是1口口吃的,我们不可能1下子就把这么多优化假想1步上线,但其实我们上也有1些细节是用到了css3的些许特性。

比如在刚上线的微公益中多处鼠标划过都运用了过渡属性,使得鼠标滑过效果柔和且优雅。

还有投票项目,用户鼠标滑过参与者小头像,有0.2秒的过渡变化和2像素的绿色阴影分散效果,这样可以良好的提示用户当前所划过的用户。

其实许多交互细节效果是没法体现在设计稿上的,这就需要我们工程师有1定的敏锐和直觉,能够在UE稿出来后就跟交互设计师商议1些具体可行的交互方案,进而提高我们的产品使用体验。

而且css3受累于国内阅读器占比的现状,没法大面积使用。但我想,作为行业内的1份子,从细节入手,逐步提高自己站在高版本阅读器下的细节品质,多少也会影响到高版本阅读器的推动。如果您由于看了这遍文章,而去升级了自己的阅读器,开始尝试使用firefox和chrome,那这篇文章就成功啦。第1次在UDC博客发博文,让各位大牛见笑了。

3 : 站设计分析:注意力与交互设计

以人为本的设计,不能不斟酌普通人在1般任务实行中的耐受力问题。由于人的精力有限,再强大的需求,无力去完成也是枉然。精力的有效转化率,是衡量交互设计品质的重点。

1.公式

精力1般由脑力和体力构成。针对互联产品,脑力居前(非生产类站的体力消耗很低)。而脑力的组成又分为注意力、理解力和记忆力。本文将尝试以注意力为例分析交互设计的特点和注意事项。

注意力本身可以集中、分散和转移。集中1般出于明确的需求、潜伏的兴趣;分散则由于信息干扰和不可控的时间;转移1般产生在需求探索阶段。

以站信息结构内的各元素为单位,加上每一个页面的所有视觉元素,可以得到站总的注意力项。用户就是利用这些项去满足自己的需求,交互设计则是这些项的描绘者、组织者。如果假定注意力有限,那末每一个项分享到的注意力应当是固定值。加上由于个体差异,兴趣和需求的等级不同,便得到了以下公式

注意力转化率计算公式

其中除需求强度之外,兴趣浓度、时间长度和可视项数量3个值,交互设计都可对其产生影响。

2.兴趣浓度

用户在络上的操作习惯和交互预期,有自己独特的心智模型,有时与现实生活中是不同的。比如现实中我们对图片的要求只是看,挂在墙上或拿在手上。而互联首先是1个超链接整合平台,其次才是1个展现平台。所以上边的图片除看,还被赋予链接的预期。人们对它的期待变得更加丰富。因此,赋予图片更多交互内涵可以直接提升用户的兴趣值。

对兴趣的两个典型设计思想是,图胜于表,表胜于文,还有拟物化设计,包括拟物的文案。可以说对象越具体,人们就越觉得安全和亲切。而亲切有礼的,符合物理定律的,对操作及时反馈的,满足情感需求的设计,都可以为兴趣加分。反之亦然。

不可用状态不是好的设计,特别当激活它的条件比较多时

正是基于人们对图形化的向往,视觉设计才会对交互设计产生不可低估的影响。个人认为交互设计中凡是与兴趣相干的部分,视觉都应当成为重要的参考因素。比如控件的色采,文案的排版,链接的展现方式等等。

3.时间长度

互联交互设计和平常用品交互设计的1个重要辨别,还在于两者的时间观念。现实中,时间是重要本钱,常常影响人的决策和情绪。络环境中,体力和人际负担被充分弱化,时间大部份只是个人脑力本钱。如果需求和兴趣衔接的好,时间乃至可以疏忽。

不说游戏这类极真个例子,以平常产品的加载时间为例,如果以兴趣为导向处理得当(进度条和微型漏斗等时间计算工具属于此列,而预加载则属于需求衔接),用户也不会产生太大抱怨。触及到搜索、寻觅、浏览等注意力分散的情况,用户几近只关心项而不关心时间。

需要注意的是,流程性比较强的任务,开始和结束都要有明确的提示,以避免注意力溢出,造成没必要要的精力消耗。

任务完成提示可以避免精力消耗

4.可视项数量

1般来说,交互设计的重头工作是项设计。如肯定信息结构、元素词典、视觉情势等。为何说可视项数量越大,注意力越小呢?这是由认知特点决定的。选项越多,步骤越长,人越需要耗费理解力。理解力带给人的压力比较大,需要求助于向内的注意力,把注意力的任务属性,转向逻辑属性,造成交互能力下降。加上对注意力转移所使用时间的预期,对鼠标和键盘操作的苛求(体力),人们普遍反感冗杂的表单,页面跳转等情况。因此便出现了响应式展开、弹出泡、弹窗、标签等交互情势。

项的组织和展现方式是大课题

除可以利用好的组织方式来减少可视项数量,元素词典、视觉情势也能够影响兴趣,利用兴趣来提升注意力。以元素词典为例,作用主要发挥在关键词上。如推荐给你听和我们1起听中的1起,你可能会喜欢和朋友们也喜欢中的朋友之类。阿拉伯数字的注意力明显高于中文数字。删除全部的反应速度也要快于清空。如果不斟酌使用环境,删除张3的微博和删除微博,那个效果好?

5.总结

交互设计作为1门进程科学,需要1定的时间和精力消耗。从互联领域看来,由于排除体力因素,注意力变得特别重要。以注意力转化率为契机,我们可以把交互设计向用户体验设计推动1步。

注意力和理解力的结果是记忆力,关于记忆力对交互设计的影响,下次再交换。

来源:

痛经怎么调理根治
经量多有血块的原因
月经后期有血块怎么办
分享到: