当前位置：首页 > 实用文档 > 其他范文> WAP2.0网页设计中的交互细节

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

时间：2022-08-23 07:35:04 其他范文收藏本文下载本文

WAP2.0网页设计中的交互细节（通用10篇）由网友“SDYAO”投稿提供，下面是小编帮大家整理后的WAP2.0网页设计中的交互细节，希望对大家带来帮助，欢迎大家分享。

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

篇1：WAP2.0网页设计中的交互细节

适配竖屏横向尺度，禁止出现横向滚屏

常规QVGA机型竖屏状态下，14号字体，单行仅显示13.5个字，资讯频道的新闻短标题要控制在13字以内才能在一行以内完整显示。标题折行会造成在相同空间承载信息量减少；频繁的眼动容易引起视疲劳；在视觉上带来无序松散的感受，

焦点跳转的频度

对非触屏手机，在不影响功能交互的前提下，应尽量减少按键做功。不同的浏览器，通过五向键操纵焦点的跳转方式是有差异的。

在页面中放过多的图片，会增加按键次数。因为QQ浏览器中的设置项——“非链接图片”默认是“可选中”，即无论图片是否带链接都会获得焦点。

UCWeb浏览器焦点跳转示意：

QQ浏览器焦点跳转示意：

篇2：交互细节分析――分页交互设计

说说目前常用的三种分类显示信息方法：

常规翻页信息滚动翻页滚动条

前者是横向翻页方式，后两者是纵向的信息翻页，分页作为很小的一个组件，大多数网站都不会花费什么精力去设计，设计也大同小异，用户已经使用习惯学习成本为0，但如果能够在细节上做的更细致贴心一些，用户的使用体验会有所提升。

一、先来看常规翻页

1) 组成结构

• 上页+页码+下页

• 跳转到__页/第__页”；

• 确认”按钮；

• 支持键盘操作；

2) 使用情景

当网页内容较多、不能在限定区域内显示完全时；

为了方便用户在多个页面间跳转和快速定位（尤其是按顺序翻页），通过翻页设计提供多个页面间的导航。

在电商网站3级页、搜索结果页面等信息量大的页面是很重要的。

• 分页的内容是什么类型？

• 页面数量有多少？

•查看最多的是哪些页面？

• 手动全部翻一遍的几率

•是否会不按顺序翻页，为什么？

•是否会查看已翻过的翻页？

•翻页是否在列表顶部和底部都出现？

•“最后一页”是否一定要有？

•列表顶部什么情况下有翻页？

按照用户心理模型，浏览邮箱内容时是反复浏览型，且页面较长，此时需要在顶部添加翻页，但电商网站搜索结果页和的用户是在浏览到页面底部时才会有翻页动作，因此不必在顶部放翻页。

•是否可以mouseover就显示页面内容？什么时候可以？

设计前考虑完以上问题，针对情况进行取舍设计。

3) 交互分析

•Google翻页

搜索结果首次只提供10个页码；

设计猜想：google开发者认为一般用户在这10页内就能找到想要的内容。

点击任何一页码继续浏览，发现后续提供的页码是：当前页+9；

设计猜想：当用户往下点击页码时，google开发者认为前10页内容不能满足用户，于是将搜索范围放大。

但最多提供20个页码；

设计猜想：但考虑到网页宽度还是不能继续无限制增加页码个数，于是设定最多一次提供20个页码。

•Baidu翻页

始终有第”1“页，中间用”…“表示未显示的页码；

设计猜想：用户翻到后面页码也找不到想要的内容时，会返回第一页重新查找，此时第“1”页是home的作用。

选中页码和mouseover页码样式始终在一个位置不变，不需移动鼠标就可点击下一页，而后页码自动替换状态；

设计猜想：瞄准页码点击较困难，可以减少用户瞄准位置的次数。但没有做完美，用户每刷新一个页面，还是要滚动浏览器条到下方瞄准页码位置。这个微小的友好交互可以运用到轮播图设计中，减少鼠标瞄准操作。

但也最多提供20个页码；

•Sina微博小分页

滚动翻页与翻页的结合使用；

上页与下页放在一起更便于点击；

通常情况下用户按“下一页”的情况最多，那么上页样式可以更简单些；

4) 用户心智模型分析

•以Taobao搜索结果列表页为例：

用户输入关键词进行模糊搜索，然后出现相关结果列表，用户需要逐页翻看查找，此时“上一页”“下一页”使用最多,因此要设计的便于点击切换；或间隔两三页查看，因此样式上要区分查看过的页码和未查看过的；前几页浏览的几率最大，当翻到后面相关内容越来越少，用户会想要返回第一页，因此最好一直显示首页；页码数量不宜过长，不要导致用户视觉辨识困难；也不宜过短，以免给用户造成网站信息较少的错觉。

• 信息列表翻页用户心智模型：

用户浏览的信息是关注的信息，会像读报纸一样逐页的浏览下去，因此“上一页”“下一页”用的次数最多；其次是跳转翻页，为体现轻量微博的概念，将传统翻页的中间页码部分简化成下拉菜单，既能标识当前页位置又能翻页切换跳转；

5) 总结

缺点是会打断用户阅读，影响用户关注的主要内容，

优点是条理清晰，便于分段查找信息，后台请求压力小；

与别的组件一样，分页不是单独存在的也要结合使用环境来交互设计。

二、信息滚动翻页

GOOGLE图片

• “无限滚动翻页”，当用户浏览到页面底部，自动刷新页面展示新的信息；

• 连续翻过很多页后，当再无内容可以展示时，自动出现关联信息按钮“查看更多信息”，引导用户去浏览其他相关信息；

• 或需要点击一下才可翻页；

•页面过长时须提供“回到顶部”按钮；

更多贴近用户心智模型，方便阅读浏览。缺点是当一段信息不能及时刷新出来时，无法跳跃浏览其下面的信息。

三、滚动条

1) 滚动条与横向分页优先级

当同时使用滚动条和翻页时，该如何设计。

翻页与滚动条的相辅相成，都是页面过长，为分段呈现内容的方法;

•翻页在滚动条内部

设计猜想：滚动条到最底部方出现翻页。大概出自浏览器，滚动条内放页面翻页；

QQ邮箱

例如浏览器，是因为软件与其内容的嵌套关系；

•有翻页也滚动条，滚动内容不宜过长（PC端产品）

设计猜想：滚动条需要拖动滑块浏览，如果滑块过短便更不容易操作；统计过IE、FF、Office等常用软件，一般滑块高度到8px时就不再缩小。当滑块高度只剩8px时，滚动条的拖动体验就相当的差。

•移动端产品则貌似无限制

设计猜想：不需拖动鼠标，移动端上手动点击是最方便常用的操作；

2) 分页不一定是click跳转的

有上下翻页同时能快速拖动浏览不同页的信息，适用于内容能够粗略浏览的页面；

四、总结

1) 从信息的结构来看，传统翻页是横向信息分段显示，而“无限滚动翻页”属于纵向信息递增显示（随滚动页面信息增长）。

•区分访问过/未访问过的页码样式，能更好的帮助用户记忆，不重复浏览；

• 链接的可点击区域尽量大，方便用户点击，页码间距足够避免用户误点击；

•清晰标识当前页位置，一般处于页码中部；

•可提供批量翻页（如，下10页）；

•页面过长时，增加“返回顶部”;

•不需要“上一页”“下一页”时就不显示，如后者比前者使用更频繁，前者可简化成符号>；

•显示总页数（当不显示总数时，翻到最后一页就不能再翻页了）；

•页码数量不宜过长（一下呈现过多导致视觉混乱，用户翻看页码困难）或过短（特别是搜索结果，会造成网站信息较少的印象）；

•尽量使用首页和末页链接，且放在普通页码区外的固定位置；

•除放第一页外，可选择放前面三页的页码，视觉上稳定些；

•避免花哨交互，精简；

•页码过多时，允许跳转翻页；

2) 同方向分页的Tab与翻页很少同时使用，滚动翻页与滚动条也是如此。但横向与纵向的组件可以交叉配合使用，比如滚动条与翻页。

3) 没有规定横向的一定是翻页，纵向的一定是滚动条，可以发散开来：横向为滚动条，纵向翻页，但此种方式似乎不便于操作。

所有组件的灵魂是用户操作方式。

篇3：细节怎能决定成败？交互设计

写此文的原因是千鸟认真读书和angela对《用户体验的要素》细节的解释，

我承认，我是个粗人。因为懒，很多细节都抱着无所谓的态度，并且特地写篇文章为自己开脱，因为我坚信，大部分的用户跟我一样地懒。

我们时常用“细节决定成败”来激励人，但很多时候，正是这样一句话把很多人带到沟里去了。

在书本中我们有一种理想的解释：人无我有，人有我优！

在一个荒芜的市场里面：

如果你先满足了用户的需求，你就占领了市场的先机，赢得了市场。

如果很多人都进来竞争了，那比的就是服务、体验。

这玩意听上去及其的合理，但是在互联网这个世界里，我们忽略了一个重要的因素：用户习惯和使用环境。

我们永远不要忘记用户来你的网站上是干什么的，比如说获取信息，用户关注的是得到了还是没有得到，得到的是什么？这两点要远远比他怎么得到要重要得多。而且用户明白一个流程之后，很难再去重新适应一个哪怕比他更便捷的流程。

用户对于使用不频繁的功能不会在意是否多了2次点击，页面看上去舒服不舒服。

我举一个极端的例子：我在教我一个朋友使用鲜果阅读器的时候，他经常读很多的博客，并且习惯在友情链接中去找他喜欢的博客：他记了这样一个博客,在他自己博客里面的友情链接中，点开到朋友的博客的友情链接中找一个他经常看的博客。我想，不知道有阅读器难道你还不知道有收藏夹吗？或者把那个博客也加到你的友情链接中吗？

还有使用的环境，比如说IM这样的东西，就我对百度hi参与IM市场的角逐的分析，优化IM本身的体验，不是制胜的关键，而是资源的整合。（PS：今天，刚刚看到的个人信息小调整（好友在线状态拿出来）为的就是迎接hi的到来）。

最近我也一直在比较各大BSP的体验，还有他们的博客气质。问题就出来了：很多小的BSP用户体验那么好，但都被后来的新浪、QQ、百度超越了？是细节吗？有机会总结下我在各种BSP下的感受，

为什么我本身是做交互和视觉的，还要把这说得那么一钱不值呢？

因为现在整个行业还远远没有到要细节来决定成败的时候，整个行业对用户体验的认识刚刚起步，还停留在交互设计和视觉设计的层面上。

包括人们对网页设计的理解也刚刚从“美工”到“交互设计”。而且很重要的一点，“交互和视觉”的非常容易被模仿，如果你的产品在战略和信息架构层面没有足够的优秀，很容易就被抄袭掉了。

为什么我跳出来喊这么一声？

因为整个用户体验的迭代体系中，很多PM都不重视信息架构这个致命的环节，导致的结果是频繁地改版，将错误总结在细节上面。其实说实话，用户体验从60分到90分不难，从90分到95分呢？可能需要花费的代价比前者要大得多。

我们离细节决定成败的路还很遥远！

来自：uitony.com/?p=7

白鸦评论

恭喜TONY.

产品最先解决的问题应该是:有用,然后才是能用和好用.

当一个市场上没有竞争时,细节变的不重要.但这个年代已经不过,因为不能没有竞争,用户的选择太多.

所以细节越来越重要,决定了成败.

关于你对BSP的分析我不赞成.

确实,虽然小BSP的体验大多数都比门户网站作的好但用户还是没有他们多.

这个问题不能按照人的多少来对比,中国有15亿人,永远都可以说”每人一口涂抹就能把美国人淹死”,那是因为我们的人口基数大.但这并不是一句值得炫耀的话.

门户网站的用户基数(包括宣传时可涉及的广度)大,转换率再小也比BSP的人多. 如果连这个都做不到,这些门户网站都应该集体上吊去.

我更愿意用bloger的质量以及内容的质量来对比小BSP和门户bsp之间的区别.这样才公平,才能更好的评估小BSP的价值.

每个bloger的生存质量才是真正体现bsp价值的指标. 就好像我们要按照人均年收入对比说中国不如美国,而不去用中国所有人每年的总收入和美国人的对比.

篇4：移动体验设计不同于网页的交互设计

因为工作的缘故，最近在整理相关的移动手持设备的体验设计思路，顺便贴出来和大家一起讨论交流，下面是adaptive path的Rachel Hinman分享的一段PPT演讲稿，感觉非常有收获，把核心内容整理了一下，来一起看看：

Mobile User Experience: What Web Designers Need to Know

网页设计与移动界面设计的对比（不同纬度）

网页设计师 – 积累型专家

移动界面设计师 – 探索者

网页 – 多平台；

移动 – 唯一识别性

网页 – 关注要表达什么观点和意义 – 任务

移动 – 关注什么能发生 – 可能

网页 – 人和事（语义、社交）

移动 – 地点（时间、空间）相对来说，移动设备的优势在地点，也就是可以帮我们解决时间和空间的关系

网页 – 建议一个情景（空间和环境）

移动 – 融入到真实情景

网页– 参考了不完成的情景模式，过于专注“手段”和“解决方案”，忽略WEB怎么能更好；

移动 – 移动设备是一个媒介，他专注于它能做什么，同时，理解并依据情景，专注于需求；不用过多考虑启发思维和技术约束，因为它们变化比较快

网页 – 以任务为中心，强调目标和观点；

移动 – 尽量展现可能，提供给用户关联情景下的可能选择；

优秀的移动体验是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、Social、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 page metaphor. Boulders to pebbles.

总结：移动体验的核心是关注用户所处“场景”的需求；设计做到直接了当（扑克牌的思路）；产品研发需要探索移动设备的独有性以及所处环境的“一切可能”需求，

移动体验设计不同于网页的交互设计

，

本文来自：www.moond.com/lab/?p=119

篇5：整体到细节的交互设计规划交互设计

初，我负责了对公司“深度匹配”产品进行了一次全面的用户体验规划，对产品整体的设计开展提供了用户视角的依据，过程收到了PD同学和业务团队的一些不错的反馈。在这里和大家分享一下这个设计推导过程。

新设计师在进行交互设计时，很容易直接进入具体的界面层的设计思考，而整个过程中的前期推导过程却很容易被忽略，在这个案例中会着重前期推导的部分。

基于提炼的方法论

先放出一张我在设计过程中提炼的设计思维完整的流程图，案例中的整个设计规划过程也基于该图的阶段过程展开，本文范围主要针对概念到定义页面的这部分。

上图可以看出我们的整个转化过程涉及产品从概念到元素的始终，不同阶段的侧重点和目的各不相同，且每个阶段的转化节点都基于客观实际的实线关联，以保证由始至终的需求转化不失真。

以此来看，整个设计过程就是一个不断Zoom in（放大聚焦）的过程，基于用户本源需求不断具体化。在验证我们的设计是否符合目标的时候，我们也需要不断的Zoom out（缩小），从更整体视角去俯视。

接下来我们开始看这个设计过程。

全局

OK，我们首先来看一下用户在外贸中的主要行为，用户需求的基本概念是什么？

下图可以看到，买家和卖家首先要达成订单意向，然后买家得到货物，卖家得到货款，这样就完成了外贸的整个过程，我们的网站服务也是基于这个模式展开。

让我们Zoom in一下..

“深度匹配”是什么？我们定义它的目标是：促成买家卖家达成订单意向，简单说就是撮合服务。这是买卖家在外贸行为中的首要的一环。

当我们的用户目标和产品目标清楚之后，怎么做？

让我们继续Zoom in..

基于外贸专家提供的一些依据，我们以外贸过程中的用户行为建立起对应的产品用户行为概念模型，这样以来用户在整个过程中，主路径、任务目标就非常清晰了，交互设计后续展开有了基本骨架。

继续 Zoom in..

对应上图的纯用户行为视角，再稍微细化一下，把他转化为产品的用户行为流程图，把抽象的信息结构化。比如，上图中报价只是一个箭头表示信息流买家，而实际的网站行为中，报价需要买家主动去查看。所以该行为被结构化成一个标准网站行为术语“查看”。整体着眼，我们可以观察到不同用户的目标，行为，产生的信息，以及之间的关联和流向，

上图已经很清楚的描述了该产品中的用户行为逻辑，但是作为设计的需求还是不够具体。

我们还得继续Zoom in ..

我们把这些结构化的信息基于用户情景转化为页面架构关系，如下图。注：因为一些原因，我们隐去了图片中的部分名称。

上图中，和前一张图进行对照，之前结构化的行为和信息，被转化成了不同的页面来进行承载，而本身的逻辑关系依然没变化，和之前完全一致。（仅因为用户的管理需求增加了管理部分）我们可以观察到不同的用户有完全不同的情景和操作页面，同时之间的信息又是互相关联的，整个流程最终能到达目标闭环。

PS：基于这个图，我们可以观察出用户的页面环境应分为不同的角色独立展开..

继续Zoom in …

接下来，我们要对所有的页面进行一下归纳如下。注：因为一些原因，我们隐去了具体页面名称。

去掉了那些箭头联系后，我们单独来看这些页面，是不是发现很有规律，非常的有结构？整理下来，页面需求非常清晰了（可以评估工作量啦.. 哈哈），如下

主页

表单

操作提示

详细页面

收件箱

列表

编辑页

在这个基础上，我们根据每个页面本身的形态来定制统一框架，再基于页面承载的信息和功能进行布局，整个交互设计就已经基本OK了。当然在具体的页面中还会有更加细化的设计，我们可以依据我们的设计组件和设计规则来完成，在这里就不展开赘述了

总结

回顾刚才的这个过程，会发现，我们的交互设计就是一个不断基于需求的本源Zoom in的一个推导过程，在这个过程中，每个细化过程都基于上一步的清晰目标开展，环环相扣。这样的方法可以让我们设计的每个步骤都有系统化的支撑，不会偏离主要的目标。在设计工作结束后，我们再通过Zoom out的方式来反向验证，来检验最终的设计是否符合了最初的设计目标。（想让我演示一下Zoom out的童鞋，请把本文倒序阅读…）

以上是基于个人设计思路方法的一个由粗到细的推导过程案例，可以应用在新产品的设计、老产品的优化、设计评估等过程中，希望能给大家带来一些帮助。

欢迎大家和我探讨：

电子邮箱: ruihang.tianrh@alibaba-inc.com

: weibo.com/tianruihang 欢迎关注

篇6：细节思考表单交互设计二表单校验设计思考

你是否经常碰到在填写表单时，提交无数次却还是无法通过校验的情况;或者你是否在为不知道填写中哪里出现错误而抓狂;再或者你是否碰到过当你填写了一大堆信息，之后点击按钮提交时，校验报错的同时，你发现你所填写的所有的信息都被清空;或者你还碰到过很多很多校验当中出现的问题，那么我们现在就开始进行表单校验设计的思考，

那校验有哪些情况呢?

1、 READY?

提到校验，我们往往会联系到提交表单后出现的错误提示类信息，但是其实在填写表单前的提示信息与表单填写校验有着莫大的关系。

此类提示信息能够帮助用户在填写表单前，降低出错的可能性。它出现的形式分为以下几类：

a) 简要提示——有如：icon，icon+文字，文字，暗提示。

出现情况：一般提示信息比较简短，能够让用户一目了然的记住，并且不干扰表单的填写项。

alipay.com付款页面

alibaba.com注册

b) 复杂提示——以缩略信息或icon来显示，通过点击和hover进行查看。

出现情况：提示信息内容较多，需要用户仔细阅读，并且无法简单记忆，直接全部显示会影响整个表单填写，因此此类情况需要hover或者点击操作进行查看。hover或者点击后有浮层，蒙板，或者跳转新页面等情况。

taobao.com机票登机人填写页

ctrip.com机票登机人填写页

c) 限制操作——在表单填写前，对某些需要填写或者操作项会有一些disabled的状态，只有当某些条件被激活用户才能进行操作。

出现情况：当填写项与项之间带有关联性，前面的填写项会影响后面填写项的内容或状态;或当填写项较少，填写项均可以即时校验，就可以将主提交操作项做状态限制。

livestream.com机票登机人填写页

d) 其他提示——填写表单的时候，还有一种比较特殊但又更简单明了的提示，例如：使用图片说明。

出现情况：当填写表单项的提示说明很难用文字清晰表述，这时候可以使用图片，视频等辅助方式来帮助用户快速理解。

alipay.com水电煤缴费页面

2、 ING~

当您浏览完整体的表单，接下来就是进行填写的步骤。在填写的过程中，我们会碰到很多类型的校验，比如：即时校验的友情类提示，即时校验的警示提示，关联性校验的提示。即时的校验也分为三种状态一种是on focus后的帮助提示、输入中的校验、lost focus后的校验。

出现情况：提示信息内容较多，需要用户仔细阅读，并且无法简单记忆，直接全部显示会影响整个表单填写，因此此类情况需要hover或者点击操作进行查看。hover或者点击后有浮层，蒙板，或者跳转新页面等情况

a) 即时校验的友情类提示

即时校验的友情类提示不是提交时无法通过的出错警示，而是给到用户一些更合理的建议或者帮助。

Ctrip.com填写登机人页

(当你选择了儿童票时会提示儿童票的某些特定限制。当你输入的出生日期与你之前选择的购买类型不一致的时候会建议你去购买更合适的类型，但并不强制。)

Buy360.com的注册页

(当onfocus的时候会出现下方帮助提示类信息，当然也有很多网站会做成暗提示，

)

163.com的注册页

(当onfocus的时候会出现右边密码的强度，会根据你输入密码的改变而提示你的密码强弱。)

b) 即时校验的警示提示

即时校验的警示提示是属于错误类提示，这类错误会影响表单无法提交。

警示提示类的校验重要级别非常高，因此在颜色和位置上都需要非常明显。有很多网站甚至将出错内容和出错后如何修改的建议都放在了该提示中显示。

163.com的注册页

Buy360.com的注册页

c) 关联性校验

关联性校验是所填写项之间会有相互影响的逻辑关系，后一项的填写是否正确会取决与前几项的填写内容。

Buy360.com的注册页

(设置密码填写项与确认密码填写项不一致时会提示错误。)

招商银行信用卡支付页

携程旅行计划创建页

(旅行计划目的地1和目的地2的时间段有冲突时就会提示错误。)

3、 ACTION!

当您填写完表单，开始触发提交按钮的时候，表单会开始进行表单提交后的校验。目前比较多的有两种，一种是逐条提示，另一种是一次性全部提示。

a) 逐条提示

逐条提示是在提交表单后，虽然有多项错误，但是每次提交只按顺序显示一条错误。逐条告知错误提示，会导致用户改完之后再次提交又需要重复修改，视线流上下来回，不停的修改不停的提交，多次操作才能完成整个表单的过程。

yihaodian.com注册页

b) 一次性全部提示

一次性全部提示是在提交表单时将所有错误全部罗列。

Yahoo.com注册页

Hotels.com预订页

(该网站设计不仅将所有错误一次性全部罗列在填写框右侧，并且提交按钮的hover状态再次将所有错误呈现，点击某项错误会直接锚点跳转至该错误填写区域。)

思考：

出错提示有4个基本原则：即时反馈出错提示，出错提示的位置显示恰当并且明显突出，提示信息内容清晰易懂，一次性显示全部出错提示。

除了这些基本的设计原则，在设计表单的校验中，还会有很多让我很纠结的点，以下罗列一些我个人认为比较好的经验。

1、在设计校验时虽然需要考虑到出错提示的明显突出，但是在实际情况中，会和页面的空间大小和布局相关，需要考虑实际情况来定夺。

2、尽量避免不必要的错误，一是自动喷入值;二是限制型操作;

比如，在身份证填写项中填写了身份证信息时，如果下面还需要填写出生日期，完全可以直接喷入身份证上的出生日期值。

3、有的错误校验会自动修正一些信息，但是这类行为请不要忘记告知用户。

4、友情类提示的校验重要级别永远低于警示类错误校验，在视觉和交互的位置上应该酌情考虑。

5、错误信息出现的位置视觉等效果应该统一，并且在位置上保持在用户可见的范围内。

6、页面自动锚记至出错项处，如果是多条可锚记至第一项，最好还能on focus至出错的填写项。

7、不要轻易清空用户填写的内容。

8、错误提示不仅显示错误点，更可以推荐用户一些正确填写建议。

9、出现了错误提示后，再次on focus至填写项时，不要隐藏错误提示。

作者：S++

篇7：404网页中的设计

404是一个http错误代码，即请求的网页不存在，代码404的第一个“4”代表客户端的错误，如错误的网页位址;后两的数字码则代表着特定的错误讯息。就是当用户输入了错误的链接时，返回的页面。这样的目的是告诉浏览者其所请求的页面不存在或链接错误，同时引导用户使用网站其他页面而不是关闭窗口离开。

Google简洁的页面与的品牌精神是一致的，包涵基本的出错提示和问题描述

1.为什么需要404页面

搜索引擎蜘蛛在请求某个URL时得到“404”状态回应时，即知道该URL已经失效，便不再索引该网页，并向数据中心反馈将该URL表示的网页从索引数据库中删除，当然，删除过程有可能需要很长时间;而当搜索引擎得到“200”状态码时，则会认为该URL是有效的，便会去索引，并会将其收录到索引数据库，

所以，自定义404错误页面不仅是增强用户体验的好做法，而且对搜索引擎也是相当重要的。

2.良好的404页面应该遵循的理念

①提供简明的问题描述，用轻松的话语消除访客的挫败感，使得访客转到某个地方而不是后退。

②提供合理的解决方案，辅助访客完成访问目标。

③提供个性化的友好界面，提升访问体验。

用幽默的语言和亲切的贴纸画面打消用户的挫败感

3.NO!拒绝乏味

一个拥有良好设计的404错误页面可以帮你避免失去用户的信任，潜在地建立你的用户关系并能留住你的用户，使其在浏览你的网站的时间更长。下面给大家带来一些创意的404界面设计参考，希望你能喜欢它们并能从中获取灵感：

方法①：整体一致性

404页面同样需要保留本站的基础元素，让它看起来还是你的网站，让用户迷茫的时候能够回想起自己为何身在此处;

篇8：爱上朴实的CSS细节网页设计

未来的CSS太让人兴奋了：一方面，是全新的页面布局方式；另一方面，是酷炫的滤镜、颜色等视觉效果，这些CSS，受开发者追捧，被杂志和博客文章铺天盖地地介绍。

如果说这些特性是CSS华丽的一面，那我们来看看它朴实的一面：很不起眼的东西，如选择器、单位、函数（方法）。我经常说这是繁琐的东西，但我意思是它们能干漂亮的活，这就是我要分享的。

怎么说呢，让我们看看这些效果最好的朴实的CSS细节——这些细节远远没有那些酷炫的CSS效果那么引人注目。它们有些已经存在一段时间了，但值得我们更好地认识，而有些则刚刚面世。虽然不起眼，但是它们可以提高我们的工作效率——以谦虚的姿态。

相对单位

聪明又有前瞻头脑的开发者们已经使用相对单位了——如em或者百分比——所以，开发者们了解这个问题：往往因为元素的继承性而需要使用计算器作为辅助工具来计算大小。例如，现在普遍的做法是给页面的字体设置全局尺寸，然后用相对单位来定义页面中其它的元素。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。如果用百分比来创建响应式的流式布局网站，而百分比是与容器相关的，所以，如果要定义一个元素为它的容器的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规则都是相对于根元素的字体大小，这样的代码更加优雅和简便，特别是在设置简单的数值如10px或者12px的时候。这样和使用px值很相似，不同点在于rem是可扩展的。

在整篇文章介绍的特性中，rem特性相对来说是兼容性比较好，高级浏览器都能支持，包括IE9在内，除了Opera Mobile。

窗口相关的长度单位

觉得rem单位很酷吧，如果还有另外一组单位能解决百分比的问题，那就更酷了。它和rem的道理相似，不同点在于，它相对的不是文档的根元素，而是相对于设备窗口本身的大小。

这两个单位就是vh和vw，即是相对于窗口大小的高和宽。每个单位在前面加上数字，代表的是多少个百分比。

div { height: 50vh; }

在上面的例子，高度被设定为窗口高度的一半。1vh相当于一个百分比的窗口高度，所以50vh即是50%的窗口高度。

如果窗口大小变了，那么这个值也随之改变。这相对百分比来说，好处是不需要担心父容器，不管它的父容器如何，10vw的元素会一直是10%的窗口大小。

相应地，有vmin单位，相当于vh或者vw的最小值，最近还宣布有vmax单位会被加到规范文档里面（虽然在这篇文章发布的时候还没有）。

现在支持这个特性的有IE9+、Chrome和Safari 6。

运算式的值

如果你在做响应式的流式布局网站，经常会遇到混合单位的问题——用百分比设置栅格，但是又用固定像素宽度设置margin。如：

div {margin: 0 20px;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还不支持。

加载字体库的部分字体

优越的性能往往很重要，尤其是市场上各种各样的移动设备——导致连接速度的差异和不确定性——更加体现了这个重要性。其中一个加快页面加载速度的方法，就是减少外部文件个数，@font-face的一个新属性unicode-range就是为此而生。

这个属性就是unicode-range（编码范围），代表的是编码字体的参数范围。在加载外部文件的时候，只有那些被使用的字体才会被加载，而不是整套字体库。下面的代码演示了如何从foo.ttf字体库中仅加载三个字体：

@font-face {font-family: foo;src: url('foo.ttf');unicode-range: U+31-33;}

这点对于使用字体图标的页面尤其有用。我测试过，使用unicode-range，加载字体文件的时间平均减少了0.85秒，也不是小数目了。当然，你可能不会这么想。

这个属性，目前可以在IE9+、Webkit浏览器（如Chrome和Safari）中运行。

新的伪类

单位和值都应该好好利用，但是，让我更兴奋的是选择器和伪类。完善的选择器模式，即使只有少数浏览器支持，都让我兴奋不已。引用乔布斯的话：你要把栅栏的里面修得和外面一样漂亮，即使别人看不到里面——因为你自己知道。

我第一次使用:nth-of-type()的时候，简直是一次突破，就像我冲出了思想的桎梏。好吧，我有些夸张了。但有些新的CSS伪类，确实值得狂热一番。

否定伪类

你大概不知道:not() 伪类的好，除非你亲自实践一番。带有参数的:not() 其实就是普通的选择器——不是复合选择器。一组元素加上选择器 :not()，表示满足这个参数的元素会被排除出去。听起来有些复杂吧？但是实际上非常简单。

假设：要对项目列表的奇数行进行选择，但是最后一行除外。如果是以前，需要这样写：

li { color: #00F; }li:nth-child(odd) { color: #F00; }li:last-child { color: #00F; }

现在，通过设定:last-child作为否定伪类的参数，就可以把最后一个元素排除，这样少了一行代码，从而更加的简洁和易维护。

li { color: #00F; }li:nth-child(odd):not(:last-child) { color: #F00; }

否定伪类看起来并没有什么惊人之处，你可以不用它，但是它还是挺实用的。我曾经把它用在基于Webkit的项目当中，优势还是挺明显的。说实话，它是我最喜欢的伪类之一。

是的，我有最喜欢的伪类。

在本文提到的特性当中，否定伪类是兼容性最好的，它被IE9+和高级浏览器支持（不需要加浏览器产商前缀）。如果你熟悉jQuery，你可能习惯用它——版本1.0开始就有了，以及相似的not()方法。

“适用于”伪类

:matches()伪类可以用普通的选择器、复合选择器、逗号隔开的列表或任何的选择器组合作为参数。太棒了！但是，它能做什么？

: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; }

这其实是CSS4的一部分（确切地说，是CSS选择器第四等级），这份规范文档还提到将会有类似的语法（以逗号隔开的复合选择器）应用于:not()伪类。兴奋ing！

目前，:matches()可以在Chrome和Safari浏览器中运行，但是要加上前缀-webkit-，Firefox也支持，但是要按照旧的写法:any()，同时要加上-moz-前缀。

你爱上这些朴实的CSS细节了吗？

这篇文章讲到的特性，最赞的一点是它们解决了现实的问题，从琐碎而繁复的选择器到建立响应式网站的新挑战。实际上，我期待每一个特性被使用到最普通的项目当中。

新特性如滤镜可能很直观很华丽，但是我更愿意发现隐藏在深处的实用小技巧。

在积极探索的过程中，每一个特性可以让你的职业生涯更顺利——想到这里，就不会觉得繁琐了。

篇9：这些有问题的细节设计网页设计

本文来自：www.prower.cn/interaction/1304

对于软件来说，每一个新版本的推出都应该是一种进步，不可否认，阿里旺旺版相较于之前的版本的确是有很多的进步，但进步的同时却也有着比之前版本更加难用的特性，

比如旺旺的快捷键经常会因为不知道的原因而无效，比如修改用户名只能自己看到别人看到的永远是会员名，比如当消息来时不是直接在旺旺图标上闪动而是要另外弹出一个图标来闪动，比如主面板限制的最小宽度仍然过宽……

淘宝网的导航问题之前已经说过了，乱乱的，当然这不然怪设计人员，这应该是出于运营的主意。但比如下面的这个问题就是设计人员的问题了：

很显然的我没有退出网站的习惯，登录网站后向来都是直接关闭浏览器退出的，所以当我再一次打开淘宝网站时就出现这样的情况了。又是“用户名”又是“站内信”的，结果却又显示一个“请登录”，更重要的是“免费注册”在一行灰色字里相当的显眼！

再看淘宝的登录页面，标准登录以及安全登录的切换在Firefox下是无效的，在Firefox下唯一能区别的就是去看地址栏里的地址是http还是https，

再看登录按钮边上很常理出现一个注册的链接，然而不要忘了右边还有一个那么大的“现在就注册”按钮，且不说这个注册应该是以按钮的形式还是链接的形式表现了。

QQ邮箱里的阅读空间之前有出过一个新的版本，但很不幸那个版本就如百度贴吧一样遭遇了“回滚”，然后回滚之后的阅读空间也有一些设计上的问题。

比如不知道这里为何会出现一个“全部标为已读”的功能，既然都不愿意看了，那还要把它变成全部已读干嘛？难道是有数字压抑症？

而当QQ好友的空间更新跟订阅的RSS源同时有更新时，这个“全部标为已读”前面又出现一个“阅读全部未读”，这两个功能放在一起，相信有很多用户经常会点错。

拍拍网运动频道所存在的这个BUG相对而言要隐蔽一些，这个幻灯片在IE下是正常的，但是在Firefox下却显示成一样的标题，而且这个问题只在Firefox下存在，真让人怀疑这是不是个关于Firefox的彩蛋。最重要的是这个问题存在已经不是短时间了，从拍拍新版上线后就一直存在，这个BUG存在的时间已超过一年半之久！之前有对腾讯的工作人员反馈过，然后几个月过去了，依然如此。