WAP2.0网页设计中的交互细节7篇.docx

《WAP2.0网页设计中的交互细节7篇.docx》由会员分享，可在线阅读，更多相关《WAP2.0网页设计中的交互细节7篇.docx（28页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、WAP2.0网页设计中的交互细节7篇下面是我收集的WAP2.0网页设计中的交互细微环节7篇，供大家参阅。WAP2.0网页设计中的交互细微环节1本文来自：/interaction/1304对于软件来说，每一个新版本的推出都应当是一种进步，不行否认，阿里旺旺版相较于之前的版本的确是有许多的进步，但进步的同时却也有着比之前版本更加难用的特性，比如旺旺的快捷键常常会因为不知道的缘由而无效，比如修改用户名只能自己看到别人看到的恒久是会员名，比如当消息来时不是干脆在旺旺图标上闪动而是要另外弹出一个图标来闪动，比如主面板限制的最小宽度仍旧过宽淘宝网的导航问题之前已经说过了，乱乱的，当然这不然怪设计人员，这应

2、当是出于运营的办法。但比如下面的这个问题就是设计人员的问题了：很明显的我没有退出网站的习惯，登录网站后一直都是干脆关闭阅读器退出的，所以当我再一次打开淘宝网站时就出现这样的状况了。又是“用户名”又是“站内信”的，结果却又显示一个“请登录”，更重要的是“免费注册”在一行灰色字里相当的惹眼！再看淘宝的登录页面，标准登录以及平安登录的切换在Firefox下是无效的，在Firefox下唯一能区分的就是去看地址栏里的地址是http还是https，再看登录按钮边上很常理出现一个注册的链接，然而不要忘了右边还有一个那么大的“现在就注册”按钮，且不说这个注册应当是以按钮的形式还是链接的形式表现了。QQ邮箱里的

3、阅读空间之前有出过一个新的版本，但很不幸那个版本就如百度贴吧一样遭受了“回滚”，然后回滚之后的阅读空间也有一些设计上的问题。比如不知道这里为何会出现一个“全部标为已读”的功能，既然都不情愿看了，那还要把它变成全部已读干嘛？莫非是有数字压抑症？而当QQ好友的空间更新跟订阅的RSS源同时有更新时，这个“全部标为已读”前面又出现一个“阅读全部未读”，这两个功能放在一起，信任有许多用户常常会点错。拍拍网运动频道所存在的这个BUG相对而言要隐藏一些，这个幻灯片在IE下是正常的，但是在Firefox下却显示成一样的标题，而且这个问题只在Firefox下存在，真让人怀疑这是不是个关于Firefox的彩蛋。最

4、重要的是这个问题存在已经不是短时间了，从拍拍新版上线后就始终存在，这个BUG存在的时间已超过一年半之久！之前有对腾讯的工作人员反馈过，然后几个月过去了，依旧如此。WAP2.0网页设计中的交互细微环节2说说目前常用的三种分类显示信息方法：常规翻页 信息滚动翻页 滚动条前者是横向翻页方式，后两者是纵向的信息翻页，分页作为很小的一个组件，大多数网站都不会花费什么精力去设计，设计也大同小异，用户已经运用习惯学习成本为0，但假如能够在细微环节上做的更细致贴心一些，用户的运用体验会有所提升。一、 先来看常规翻页1) 组成结构? 上页+页码+下页? 跳转到_页/第_页”；? 确认”按钮；? 支持键盘操作；2

5、) 运用情景当网页内容较多、不能在限定区域内显示完全时；为了便利用户在多个页面间跳转和快速定位（尤其是按依次翻页），通过翻页设计供应多个页面间的导航。在电商网站3级页、搜寻结果页面等信息量大的页面是很重要的。? 分页的内容是什么类型？? 页面数量有多少？?查看最多的是哪些页面？? 手动全部翻一遍的几率?是否会不按依次翻页，为什么？?是否会查看已翻过的翻页？?翻页是否在列表顶部和底部都出现？?“最终一页”是否肯定要有？?列表顶部什么状况下有翻页？根据用户心理模型，阅读邮箱内容时是反复阅读型，且页面较长，此时须要在顶部添加翻页，但电商网站搜寻结果页和 的用户是在阅读到页面底部时才会有翻页动作，因此

6、不必在顶部放翻页。?是否可以mouseover就显示页面内容？什么时候可以？设计前考虑完以上问题，针对状况进行取舍设计。3) 交互分析?Google翻页搜寻结果首次只供应10个页码；设计猜想：google开发者认为一般用户在这10页内就能找到想要的内容。点击任何一页码接着阅读，发觉后续供应的页码是：当前页+9；设计猜想：当用户往下点击页码时，google开发者认为前10页内容不能满意用户，于是将搜寻范围放大。但最多供应20个页码；设计猜想：但考虑到网页宽度还是不能接着无限制增加页码个数，于是设定最多一次供应20个页码。?Baidu翻页始终有第”1“页，中间用”“表示未显示的页码；设计猜想：用户

7、翻到后面页码也找不到想要的内容时，会返回第一页重新查找，此时第“1”页是home的作用。选中页码和mouseover页码样式始终在一个位置不变，不需移动鼠标就可点击下一页，而后页码自动替换状态；设计猜想：瞄准页码点击较困难，可以削减用户瞄准位置的次数。但没有做完备，用户每刷新一个页面，还是要滚动阅读器条到下方瞄准页码位置。这个微小的友好交互可以运用到轮播图设计中，削减鼠标瞄准操作。但也最多供应20个页码；?Sina微博小分页滚动翻页与翻页的结合运用；上页与下页放在一起更便于点击；通常状况下用户按“下一页”的状况最多，那么上页样式可以更简洁些；4) 用户心智模型分析?以Taobao搜寻结果列表页

8、为例：用户输入关键词进行模糊搜寻，然后出现相关结果列表，用户须要逐页翻看查找，此时“上一页”“下一页”运用最多,因此要设计的便于点击切换；或间隔两三页查看，因此样式上要区分查看过的页码和未查看过的；前几页阅读的几率最大，当翻到后面相关内容越来越少，用户会想要返回第一页，因此最好始终显示首页；页码数量不宜过长，不要导致用户视觉辨识困难；也不宜过短，以免给用户造成网站信息较少的错觉。? 信息列表翻页用户心智模型：用户阅读的信息是关注的信息，会像读报纸一样逐页的阅读下去，因此“上一页”“下一页”用的次数最多；其次是跳转翻页，为体现轻量微博的概念，将传统翻页的中间页码部分简化成下拉菜单，既能标识当前页

9、位置又能翻页切换跳转；5) 总结缺点是会打断用户阅读，影响用户关注的主要内容，优点是条理清楚，便于分段查找信息，后台恳求压力小；与别的组件一样，分页不是单独存在的也要结合运用环境来交互设计。二、 信息滚动翻页GOOGLE图片? “无限滚动翻页”，当用户阅读到页面底部，自动刷新页面展示新的信息；? 连续翻过许多页后，当再无内容可以展示时，自动出现关联信息按钮“查看更多信息”，引导用户去阅读其他相关信息；? 或须要点击一下才可翻页；?页面过长时须供应“回到顶部”按钮；更多贴近用户心智模型，便利阅读阅读。缺点是当一段信息不能刚好刷新出来时，无法跳动阅读其下面的信息。三、 滚动条1) 滚动条与横向分页

10、优先级当同时运用滚动条和翻页时，该如何设计。翻页与滚动条的相辅相成，都是页面过长，为分段呈现内容的方法;?翻页在滚动条内部设计猜想：滚动条到最底部方出现翻页。也许出自阅读器，滚动条内放页面翻页；QQ邮箱例如阅读器，是因为软件与其内容的嵌套关系；?有翻页也滚动条，滚动内容不宜过长（PC端产品）设计猜想：滚动条须要拖动滑块阅读，假如滑块过短便更不简单操作；统计过IE、FF、Office等常用软件，一般滑块高度到8px时就不再缩小。当滑块高度只剩8px时，滚动条的拖动体验就相当的差。?移动端产品则貌似无限制设计猜想：不需拖动鼠标，移动端上手动点击是最便利常用的操作；2) 分页不肯定是click跳转的

11、有上下翻页同时能快速拖动阅读不同页的信息，适用于内容能够粗略阅读的页面；四、 总结1) 从信息的结构来看，传统翻页是横向信息分段显示，而“无限滚动翻页”属于纵向信息递增显示（随滚动页面信息增长）。?区分访问过/未访问过的页码样式，能更好的帮助用户记忆，不重复阅读；? 链接的可点击区域尽量大，便利用户点击，页码间距足够避开用户误点击；?清楚标识当前页位置，一般处于页码中部；?可供应批量翻页（如，下10页）；?页面过长时，增加“返回顶部”;?不须要“上一页”“下一页”时就不显示，如后者比前者运用更频繁，前者可简化成符号；?显示总页数（当不显示总数时，翻到最终一页就不能再翻页了）；?“上一页”“下一

12、页”位置固定；?页码数量不宜过长（一下呈现过多导致视觉混乱，用户翻看页码困难）或过短（特殊是搜寻结果，会造成网站信息较少的印象）；?尽量运用首页和末页链接，且放在一般页码区外的固定位置；?除放第一页外，可选择放前面三页的页码，视觉上稳定些；?避开花哨交互，精简；?页码过多时，允许跳转翻页；2) 同方向分页的Tab与翻页很少同时运用，滚动翻页与滚动条也是如此。但横向与纵向的组件可以交叉协作运用，比如滚动条与翻页。3) 没有规定横向的肯定是翻页，纵向的肯定是滚动条，可以发散开来：横向为滚动条，纵向翻页，但此种方式好像不便于操作。全部组件的灵魂是用户操作方式。WAP2.0网页设计中的交互细微环节3初

13、，我负责了对公司“深度匹配”产品进行了一次全面的用户体验规划，对产品整体的设计开展供应了用户视角的依据，过程收到了PD同学和业务团队的一些不错的反馈。在这里和大家共享一下这个设计推导过程。新设计师在进行交互设计时，很简单干脆进入详细的界面层的设计思索，而整个过程中的前期推导过程却很简单被忽视，在这个案例中会着重前期推导的部分。基于提炼的方法论先放出一张我在设计过程中提炼的设计思维完整的流程图，案例中的整个设计规划过程也基于该图的阶段过程绽开，本文范围主要针对概念到定义页面的这部分。上图可以看出我们的整个转化过程涉及产品从概念到元素的始终，不同阶段的侧重点和目的各不相同，且每个阶段的转化节点都基

14、于客观实际的实线关联，以保证由始至终的需求转化不失真。以此来看，整个设计过程就是一个不断Zoom in（放大聚焦）的过程，基于用户本源需求不断详细化。在验证我们的设计是否符合目标的时候，我们也须要不断的Zoom out（缩小），从更整体视角去俯视。接下来我们起先看这个设计过程。全局OK，我们首先来看一下用户在外贸中的主要行为，用户需求的基本概念是什么？下图可以看到，买家和卖家首先要达成订单意向，然后买家得到货物，卖家得到货款，这样就完成了外贸的整个过程，我们的网站服务也是基于这个模式绽开。让我们Zoom in一下.“深度匹配”是什么？我们定义它的目标是：促成买家卖家达成订单意向，简洁说就是撮合

15、服务。这是买卖家在外贸行为中的首要的一环。当我们的用户目标和产品目标清晰之后，怎么做？让我们接着Zoom in.基于外贸专家供应的一些依据，我们以外贸过程中的用户行为建立起对应的产品用户行为概念模型，这样以来用户在整个过程中，主路径、任务目标就特别清楚了，交互设计后续绽开有了基本骨架。接着 Zoom in.对应上图的纯用户行为视角，再略微细化一下，把他转化为产品的用户行为流程图，把抽象的信息结构化。比如，上图中报价只是一个箭头表示信息流买家，而实际的网站行为中，报价须要买家主动去查看。所以该行为被结构化成一个标准网站行为术语“查看”。整体着眼，我们可以视察到不同用户的目标，行为，产生的信息，以

16、及之间的关联和流向，上图已经很清晰的描述了该产品中的用户行为逻辑，但是作为设计的需求还是不够详细。我们还得接着Zoom in .我们把这些结构化的信息基于用户情景转化为页面架构关系，如下图。注：因为一些缘由，我们隐去了图片中的部分名称。上图中，和前一张图进行比照，之前结构化的行为和信息，被转化成了不同的页面来进行承载，而本身的逻辑关系依旧没改变，和之前完全一样。（仅因为用户的管理需求增加了管理部分）我们可以视察到不同的用户有完全不同的情景和操作页面，同时之间的信息又是相互关联的，整个流程最终能到达目标闭环。PS：基于这个图，我们可以视察出用户的页面环境应分为不同的角色独立绽开.接着Zoom i

17、n 接下来，我们要对全部的页面进行一下归纳如下。注：因为一些缘由，我们隐去了详细页面名称。去掉了那些箭头联系后，我们单独来看这些页面，是不是发觉很有规律，特别的有结构？整理下来，页面需求特别清楚了（可以评估工作量啦. 哈哈），如下主页表单操作提示具体页面收件箱列表编辑页在这个基础上，我们依据每个页面本身的形态来定制统一框架， 再基于页面承载的信息和功能进行布局，整个交互设计就已经基本OK了。当然在详细的页面中还会有更加细化的设计，我们可以依据我们的设计组件和设计规则来完成，在这里就不绽开赘述了总结回顾刚才的这个过程，会发觉，我们的交互设计就是一个不断基于需求的本源Zoom in的一个推导过程，

18、在这个过程中，每个细化过程都基于上一步的清楚目标开展，环环相扣。这样的方法可以让我们设计的每个步骤都有系统化的支撑，不会偏离主要的目标。在设计工作结束后，我们再通过Zoom out的方式来反向验证，来检验最终的设计是否符合了最初的设计目标。（想让我演示一下Zoom out的童鞋，请把本文倒序阅读）以上是基于个人设计思路方法的一个由粗到细的推导过程案例，可以应用在新产品的设计、老产品的优化、设计评估等过程中，希望能给大家带来一些帮助。欢迎大家和我探讨：电子邮箱: ruihang.tianrh:/tianruihang 欢迎关注WAP2.0网页设计中的交互细微环节4将来的CSS太让人兴奋了：一方面

19、，是全新的页面布局方式；另一方面，是酷炫的滤镜、颜色等视觉效果，这些CSS，受开发者追捧，被杂志和博客文章遮天蔽日地介绍。假如说这些特性是CSS华丽的一面，那我们来看看它朴实的一面：很不起眼的东西，如选择器、单位、函数（方法）。我常常说这是繁琐的东西，但我意思是它们能干美丽的活，这就是我要共享的。怎么说呢，让我们看看这些效果最好的朴实的CSS细微环节这些细微环节远远没有那些酷炫的CSS效果那么引人注目。它们有些已经存在一段时间了，但值得我们更好地相识，而有些则刚刚面世。虽然不起眼，但是它们可以提高我们的工作效率以虚心的姿态。相对单位聪慧又有前瞻头脑的开发者们已经运用相对单位了如em或者百分比所

20、以，开发者们了解这个问题：往往因为元素的继承性而须要运用计算器作为协助工具来计算大小。例如，现在普遍的做法是给页面的字体设置全局尺寸，然后用相对单位来定义页面中其它的元素。CSS也许会这样写：html font-size: 10px; p font-size: 1.4em; 这样写是没问题，直到有个子元素须要设置一个不同的字体大小，比如，在这样的标签当中：The cat sat on the mat.假如你要设置span的字体大小为1.2em，你须要做什么？拿出计算器，算算1.2除以1.4是多少，结果如下：P span font-size: 0.85714em; 这个问题不局限于em。假如用百

21、分比来创建响应式的流式布局网站，而百分比是与容器相关的，所以，假如要定义一个元素为它的容器的40%，它的高是75%，宽则须要设置为53.33333%。很明显，这很不便利。根相关的长度单位为了修复字体大小定义的问题，现在可以运用单位rem（root em）。rem同样是相对单位，但是它所对应的是固定的基本值，这个固定的基本值也就是文档的根元素的字体大小（在HTML文件中，就是html元素）。假设和上个例子一样，同样设定10px的字体大小为根元素的大小，那么CSS这样写就OK了：P font-size: 1.4rem; p span font-size: 1.2rem; 这两个CSS规则都是相对于

22、根元素的字体大小，这样的代码更加优雅和简便，特殊是在设置简洁的数值如10px或者12px的时候。这样和运用px值很相像，不同点在于rem是可扩展的。在整篇文章介绍的特性中，rem特性相对来说是兼容性比较好，高级阅读器都能支持，包括IE9在内，除了Opera Mobile。窗口相关的长度单位觉得rem单位很酷吧，假如还有另外一组单位能解决百分比的问题，那就更酷了。它和rem的道理相像，不同点在于，它相对的不是文档的根元素，而是相对于设备窗口本身的大小。这两个单位就是vh和vw，即是相对于窗口大小的高和宽。每个单位在前面加上数字，代表的是多少个百分比。div height: 50vh; 在上面的例

23、子，高度被设定为窗口高度的一半。1vh相当于一个百分比的窗口高度，所以50vh即是50%的窗口高度。假如窗口大小变了，那么这个值也随之变更。这相对百分比来说，好处是不须要担忧父容器，不管它的父容器如何，10vw的元素会始终是10%的窗口大小。相应地，有vmin单位，相当于vh或者vw的最小值，最近还宣布有vmax单位会被加到规范文档里面（虽然在这篇文章发布的时候还没有）。现在支持这个特性的有IE9+、Chrome和Safari 6。运算式的值假如你在做响应式的流式布局网站，常常会遇到混合单位的问题用百分比设置栅格，但是又用固定像素宽度设置margin。如：div margin: 0 20px;

24、width: 33%;假如布局只用到padding和border，你可以运用box-sizing来解决，但是对于margin就无能为力了。更好、更敏捷的方法是运用calc函数，设置不同单位之间的数学方程式，如：div margin: 0 20px;width: calc(33% - 40px);它不仅可以用来计算宽，还可以用来计算长度假如有必要，还可以在calc()里面再加calc()。这个特性IE9+和Firefox都支持，Firefox须要加上 -moz- 前缀（在版本16或17可能不用加前缀），Chrome和Safari也支持，但须要加上 -webkit- 前缀，然而，移动Webkit还

25、不支持。加载字体库的部分字体优越的性能往往很重要，尤其是市场上各种各样的移动设备导致连接速度的差异和不确定性更加体现了这个重要性。其中一个加快页面加载速度的方法，就是削减外部文件个数，font-face的一个新属性unicode-range就是为此而生。这个属性就是unicode-range（编码范围），代表的是编码字体的参数范围。在加载外部文件的时候，只有那些被运用的字体才会被加载，而不是整套字体库。下面的代码演示了如何从foo.ttf字体库中仅加载三个字体：font-face font-family: foo;src: url(foo.ttf);unicode-range: U+31-33

26、;这点对于运用字体图标的页面尤其有用。我测试过，运用unicode-range，加载字体文件的时间平均削减了0.85秒，也不是小数目了。当然，你可能不会这么想。这个属性，目前可以在IE9+、Webkit阅读器（如Chrome和Safari）中运行。新的伪类单位和值都应当好好利用，但是，让我更兴奋的是选择器和伪类。完善的选择器模式，即使只有少数阅读器支持，都让我兴奋不已。引用乔布斯的话：你要把栅栏的里面修得和外面一样美丽，即使别人看不到里面因为你自己知道。我第一次运用:nth-of-type()的时候，简直是一次突破，就像我冲出了思想的桎梏。好吧，我有些夸张了。但有些新的CSS伪类，的确值得狂热

27、一番。否定伪类你也许不知道:not() 伪类的好，除非你亲自实践一番。带有参数的:not() 其实就是一般的选择器不是复合选择器。一组元素加上选择器 :not()，表示满意这个参数的元素会被解除出去。听起来有些困难吧？但是事实上特别简洁。假设：要对项目列表的奇数行进行选择，但是最终一行除外。假如是以前，须要这样写：li color: #00F; li:nth-child(odd) color: #F00; li:last-child color: #00F; 现在，通过设定:last-child作为否定伪类的参数，就可以把最终一个元素解除，这样少了一行代码，从而更加的简洁和易维护。li col

28、or: #00F; li:nth-child(odd):not(:last-child) color: #F00; 否定伪类看起来并没有什么惊人之处，你可以不用它，但是它还是挺好用的。我曾经把它用在基于Webkit的项目当中，优势还是挺明显的。说实话，它是我最喜爱的伪类之一。是的，我有最喜爱的伪类。在本文提到的特性当中，否定伪类是兼容性最好的，它被IE9+和高级阅读器支持（不须要加阅读器产商前缀）。假如你熟识jQuery，你可能习惯用它版本1.0起先就有了，以及相像的not()方法。“适用于”伪类:matches()伪类可以用一般的选择器、复合选择器、逗号隔开的列表或任何的选择器组合作为参数。

29、太棒了！但是，它能做什么？:matches()伪类最强大的地方就是聚合多行选择器。例如，要选择父容器里面其中几个不同子容器里面的p元素，在这之前，代码或许会写成这样：.home header p,.home footer p,.home aside p color: #F00;有了:matches()伪类，就可以把共同点提取出来，缩减代码量。该例子里面，选择器的共同点是以home为起点、以p为终点，所以可以用:matches()把中间的全部元素集合起来。是不是有些困惑？看看代码就明白了：.home :matches(header,footer,aside) p color: #F00; 这其实

30、是CSS4的一部分（准确地说，是CSS选择器第四等级），这份规范文档还提到将会有类似的语法（以逗号隔开的复合选择器）应用于:not()伪类。兴奋ing！目前，:matches()可以在Chrome和Safari阅读器中运行，但是要加上前缀-webkit-，Firefox也支持，但是要根据旧的写法:any()，同时要加上-moz-前缀。你爱上这些朴实的CSS细微环节了吗？这篇文章讲到的特性，最赞的一点是它们解决了现实的问题，从琐碎而繁复的选择器到建立响应式网站的新挑战。事实上，我期盼每一个特性被运用到最一般的项目当中。新特性如滤镜可能很直观很华丽，但是我更情愿发觉隐藏在深处的好用小技巧。在主动探

31、究的过程中，每一个特性可以让你的职业生涯更顺当想到这里，就不会觉得繁琐了。WAP2.0网页设计中的交互细微环节5写此文的缘由是千鸟仔细读书和angela对用户体验的要素细微环节的说明，我承认，我是个粗人。因为懒，许多细微环节都抱着无所谓的看法，并且特地写篇文章为自己开脱，因为我坚信，大部分的用户跟我一样地懒。我们时常用“细微环节确定成败”来激励人，但许多时候，正是这样一句话把许多人带到沟里去了。在书本中我们有一种志向的说明：人无我有，人有我优！在一个荒芜的市场里面：假如你先满意了用户的需求，你就占据了市场的先机，赢得了市场。假如许多人都进来竞争了，那比的就是服务、体验。这玩意听上去及其的合理，

32、但是在互联网这个世界里，我们忽视了一个重要的因素：用户习惯和运用环境。我们恒久不要遗忘用户来你的网站上是干什么的，比如说获得信息，用户关注的是得到了还是没有得到，得到的是什么？这两点要远远比他怎么得到要重要得多。而且用户明白一个流程之后，很难再去重新适应一个哪怕比他更便捷的流程。用户对于运用不常见的功能不会在意是否多了2次点击，页面看上去舒适不舒适。我举一个极端的例子：我在教我一个挚友运用鲜果阅读器的时候，他常常读许多的博客，并且习惯在友情链接中去找他喜爱的博客：他记了这样一个博客,在他自己博客里面的友情链接中，点开到挚友的博客的友情链接中找一个他常常看的博客。我想，不知道有阅读器莫非你还不知

33、道有保藏夹吗？或者把那个博客也加到你的友情链接中吗？还有运用的环境，比如说IM这样的东西，就我对百度hi参加IM市场的角逐的分析，优化IM本身的体验，不是制胜的关键，而是资源的整合。（PS：今日，刚刚看到 的个人信息小调整（好友在线状态拿出来）为的就是迎接hi的到来）。最近我也始终在比较各大BSP的体验，还有他们的博客气质。问题就出来了：许多小的BSP用户体验那么好，但都被后来的新浪、QQ、百度超越了？是细微环节吗？有机会总结下我在各种BSP下的感受，为什么我本身是做交互和视觉的，还要把这说得那么一钱不值呢？因为现在整个行业还远远没有到要细微环节来确定成败的时候，整个行业对用户体验的相识刚刚起

34、步，还停留在交互设计和视觉设计的层面上。包括人们对网页设计的理解也刚刚从“美工”到“交互设计”。而且很重要的一点，“交互和视觉”的特别简单被仿照，假如你的产品在战略和信息架构层面没有足够的优秀，很简单就被抄袭掉了。为什么我跳出来喊这么一声？因为整个用户体验的迭代体系中，许多PM都不重视信息架构这个致命的环节，导致的结果是频繁地改版，将错误总结在细微环节上面。其实说实话，用户体验从60分到90分不难，从90分到95分呢？可能须要花费的代价比前者要大得多。我们离细微环节确定成败的路还很遥远！来自：/?p=7白鸦评论恭喜TONY.产品最先解决的问题应当是:有用,然后才是能用和好用.当一个市场上没有竞

35、争时,细微环节变的不重要.但这个年头已经不过,因为不能没有竞争,用户的选择太多.所以细微环节越来越重要,确定了成败.关于你对BSP的分析我不赞成.的确,虽然小BSP的体验大多数都比门户网站作的好但用户还是没有他们多.这个问题不能根据人的多少来对比,中国有15亿人,恒久都可以说”每人一口涂抹就能把美国人淹死”,那是因为我们的人口基数大.但这并不是一句值得炫耀的话.门户网站的用户基数(包括宣扬时可涉及的广度)大,转换率再小也比BSP的人多. 假如连这个都做不到,这些门户网站都应当集体上吊去.我更情愿用bloger的质量以及内容的质量来对比小BSP和门户bsp之间的区分.这样才公允,才能更好的评估小

36、BSP的价值.每个bloger的生存质量才是真正体现bsp价值的指标. 就似乎我们要根据人均年收入对比说中国不如美国,而不去用中国全部人每年的总收入和美国人的对比.WAP2.0网页设计中的交互细微环节6因为工作的原因，最近在整理相关的移动手持设备的体验设计思路，顺便贴出来和大家一起探讨沟通， 下面是adaptive path的Rachel Hinman共享的一段PPT演讲稿，感觉特别有收获，把核心内容整理了一下，来一起看看：Mobile User Experience: What Web Designers Need to Know网页设计与移动界面设计的对比（不同纬度）网页设计师 积累型专家

37、移动界面设计师 探究者网页 多平台；移动 唯一识别性网页 关注要表达什么观点和意义 任务移动 关注什么能发生 可能网页 人和事（语义、社交）移动 地点（时间、空间）相对来说，移动设备的优势在地点，也就是可以帮我们解决时间和空间的关系网页 建议一个情景（空间和环境）移动 融入到真实情景网页 参考了不完成的情景模式，过于专注“手段”和“解决方案”，忽视WEB怎么能更好；移动 移动设备是一个媒介，他专注于它能做什么，同时，理解并依据情景，专注于需求；不用过多考虑启发思维和技术约束，因为它们改变比较快网页 以任务为中心，强调目标和观点；移动 尽量呈现可能，供应给用户关联情景下的可能选择；优秀的移动体验

38、是Great Mobile Experiences：独有的are uniquely mobile设计Tips：弄清晰手机能供应什么；弄明白需求和解决方案的不同；关注于什么能让移动设备更独特；赐予情景支持are sympathetic to context情境是关于如何去理解人、地点、事情的关系Context is about understanding human relationships to the people, places and things in the world.关系的定义也许包括了语义、社交、空间、时间的关系Relationships are Semantic、Socia

39、l、Spatial、Temporal设计Tips：为部分关注和中断而设计design for partial attention and interruption削减认知时间和机会成本Reduce cognitive load and opportunity cost疯狂的想象Ideate in the wild清楚-简洁-干脆speak their power设计Tips：移动关注的不是任务，是全部围围着用户的信息；Say good-bye to “done”.思索全部的可能性Think possibilities, not tasks去掉界面中的隐喻，直截了当dismantle the p

40、age metaphor. Boulders to pebbles.总结： 移动体验的核心是关注用户所处“场景”的需求；设计做到干脆了当（扑克牌的思路）；产品研发须要探究移动设备的独有性以及所处环境的“一切可能”需求，移动体验设计不同于网页的交互设计，本文来自：/lab/?p=119WAP2.0网页设计中的交互细微环节7404是一个http错误代码，即恳求的网页不存在，代码404的第一个“4”代表客户端的错误，如错误的网页位址;后两的数字码则代表着特定的错误讯息。就是当用户输入了错误的链接时，返回的页面。这样的目的是告知阅读者其所恳求的页面不存在或链接错误，同时引导用户运用网站其他页面而不是关

41、闭窗口离开。Google简洁的页面与的品牌精神是一样的，包涵基本的出错提示和问题描述1.为什么须要404页面搜寻引擎蜘蛛在恳求某个URL时得到“404”状态回应时，即知道该URL已经失效，便不再索引该网页，并向数据中心反馈将该URL表示的网页从索引数据库中删除，当然，删除过程有可能须要很长时间;而当搜寻引擎得到“200”状态码时，则会认为该URL是有效的，便会去索引，并会将其收录到索引数据库，所以，自定义404错误页面不仅是增加用户体验的好做法，而且对搜寻引擎也是相当重要的。2.良好的404页面应当遵循的理念供应简明的问题描述，用轻松的话语消退访客的挫败感，使得访客转到某个地方而不是后退。供应合理的解决方案，协助访客完成访问目标。供应特性化的友好界面，提升访问体验。用幽默的语言和亲切的贴纸画面打消用户的挫败感3.NO!拒绝乏味一个拥有良好设计的404错误页面可以帮你避开失去用户的信任，潜在地建立你的用户关系并能留住你的用户，使其在阅读你的网站的时间更长。下面给大家带来一些创意的404界面设计参考，希望你能喜爱它们并能从中获得灵感：方法：整体一样性404页面同样须要保留本站的基础元素，让它看起来还是你的网站，让用户迷茫的时候能够回想起自己为何身在此处;