位置:首页 » 教程 » 用户体验设计实例:B2C搜索LIST页面设计

用户体验设计实例:B2C搜索LIST页面设计

日期:2010-05-02 阅读:0num
Advertisement
破洛洛文章简介:用户体验设计实例:B2C搜索LIST页面设计.

改版背景

创建专业的电子商务垂直搜索,以及把原有的信息聚合平台转型为在线采购批发交易平台。根据行业特点及交易需要,对原有的零批(小额批发)搜索进行改版,改造为适合行业搜索交易频道,便是这次改版的设计目标。我们搜索产品线的产品经理与用户体验设计师们进行了长达半年的准备工作。 项目组成员将对现有的功能需求,信息架构,视觉色彩,用户体验等,做多视角、多纬度的分析。力求在1688.com上线后,推出另一个电子商务垂直搜索用户体验盛宴。

功能需求取舍

用户体验设计实例:B2C搜索LIST页面设计

在项目中,我们从市场运营那里采集了大量需求,那怎么把这些需求归类整理,挑选出我们目标用户迫切需要的功能点呢?总体来说:以娱乐的心态取舍功能需求,只给最需要的不给最强悍的。

来自运营的需求,来自用户的需求,往往多种多样,可以用千奇百怪来形容,那么如何配合产品规划师、产品经理找到用户最迫切的需求呢?

头脑风暴可以让产品设计团队成员产生很多创意。当收集到大量需求时,其中可能有主要需求与次要需求,客观判断哪些是首先要完成的,哪些是可以放到2期来做的,并制定标准需求优先级与对应时间节点,这样可以保证项目按期完成。

最让人头疼的往往是取舍功能需求,我们应该以什么标准,什么心态来应对呢?最好通过创建一个纸上原型或观察用户的操作,来制定取舍标准,并确保标准里涵盖以下基础点:

  • 用户档案-描述用户的具体特点。特别注意用户在使用网站时的任何问题,如物理限制。(抛弃与用户的特点不匹配的需求)
  • 文本环境分析-研究用户的日常任务、工作流程模式、工作环境和概念框架。这有助于你理解为什么用户对正在测试的网站做出如此反应。(抛弃与用户操作环境不匹配的需求)
  • 可用性目标设定-需要制订质量具体化的目标,它能体现从用户档案中搜集到的需求。测试在某个阶段用户能否完成任务,如果用户受到限制,那就应该重新设定用户的目标。(抛弃与用户目标不匹配的需求)
  • 平台功能和约束-必须确定界面或产品的功能和限制,以界定可用性需求的范畴。这一信息会受用户可用性需求的影响。(抛弃与平台技术能力不匹配的需求)
  • 通用设计指南-必须使用公认的设计准则来设计你的界面。参照网页设计指南制作出来的网页才能在网页浏览器上表现正常。(抛弃与用户体验设计指南不匹配的需求)

产品(交互)体验设计师在做互动设计之前,除了要对需求把关外还要消除项目关系人之间的分歧,满足用户的期望、工程师的期望、销售与市场人员的期望、经理的期望。最后寻找一个各方都能够接受的平衡点,具体阐述请参看:交互设计师怎样和产品团队合作

交互设计优化

用户体验设计实例:B2C搜索LIST页面设计

从设计图到原型的诞生,是一个复杂而又有趣的过程。首先我们怎么完成复杂的设计图呢?前期的市场调研与需求分析为我们提供了第一手好资料,接下来我们要把这些资料逐条分析并提炼需求要点。在头脑风暴讨论中,交互设计师要与产品设计师、需求分析师等一起参加设计图创建的讨论。在讨论中确定商业需求范围、产品需求逻辑、产品规范等,最后总结出一份过程文档。它可能是BRD或FRD,它将是纸上原型的设计指导书。

当交互设计师拿到这个过程文档后,就可以创建设计图中的逻辑架构图和任务操作流程图了。在创建逻辑架构图时,可以选择Camp Tools或Illustrator制作,当然也有人选择Mind Manage制作。不管选用哪一种制作工具只要能把逻辑架构表达清晰即可,这里就不再赘述每种工具的使用方法和优缺点了。同时,交互设计师要始终以信息架构的原则来创建逻辑架构图,确保逻辑信息的完整性、表达信息的一致性、架构信息的简洁性等。在创建任务操作流程图时,通常选择Visio制作。在用Visio制作过程中,重在表达功能点之间的交互,我们可以用Visio中提供的流程图形与流程符号,来表达设计中的关键功能与关键节点。

在经过纸上原型设计之后,交互设计师要与产品规划师、可用性工程师迅速沟通,优化纸上原型。交互设计师会根据纸上原型确定的功能点与信息框架,通过Axure制作出低保真的交互设计原型DEMO。在制作Axure交互设计原型DEMO时候,应该注意的以下几点原则:

  1. 用Axure页面导航结构去构建信息架构。
  2. 页面的命名要有统一的规范标准。例如:一级页面,二级页面,过程页面(状态页、结果页)等都要有统一的标准。
  3. 避免纠结复杂的交互控件实现。要记得Axure是快速原型实现工具,并且网上已经有很多成型的Axure交互设计模板可以直接调用。
  4. 少一点色彩与布局,多一点标注与说明。把色彩与布局的问题留给视觉思考吧,多些减少沟通成本并可消除歧义的注释吧。
  5. Axure交付物也要注意可读性、可及性。把你的交互产出物移交给视觉和前端的时候,记得让他们能很容易看懂你想传达的东西。
  6. 交互设计原型不是必须生成HTML文件并能动态交互。不一定要能动态展示,但必须要能完整清楚传达出你的交互过程。

最后,请交互设计师们把自己当成真正的产品设计师,你们对产品与项目的责任不低于项目(产品)经理。

视觉色彩优化

用户体验设计实例:B2C搜索LIST页面设计

IBM一直被人们称蓝色巨人(Big Blue):信任、可靠。可口可乐是红色:活力、热情。颜色不仅仅作为这些公司的标识,还把它们加以理想化了。

不可否认,色彩改变了我们对于所见事物的反应“颜色”。不同的配色方案,给人以不同的感受,或顽皮、或深沉;或冷淡、或热情;或别致、或邋遢;或充满活力、或安静;或阴郁、或活泼;或端庄、或幼稚;或朴实、或浪漫;或专业、或业余;或炽热、或阴森。色彩选择,决定了人们在第一眼看到网站时的感觉。因此,色彩是Web设计者手中最普遍,也是最强大的工具。我们说“设计=解决问题”,而视觉设计,就是“用视觉语言去解决逻辑问题”。

在2002年,一个研究小组得到了一些有趣的发现。斯坦福Web可信性项目开始了解是什么因素让人们对网站产生信任或者不信任,而很多因素在他们的发现中都很明显:公司声誉、客户服务、出资人,还有广告,这些都会让用户决定该网站是否值得信任。但是最重要的因素——在他们列表中排在第一位的——却是网站的视觉风格和美感。

交互设计领域著名的大师,Donald Norman,总结说:“积极的情感增强了创造性和广度优先的思考,而负面的情感集中在认知上,增强深度优先处理并把干扰降到最少;积极的情感让人们更能容忍一些困难,在寻找解决方案的时候变得更灵活而有创造性。”当人们开始喜欢某些界面的时候,它们事实上会变得更可用。

电子商务垂直搜索LIST页面的视觉优化,风格上我们通常会支持品牌。目标上传达出一种强烈的品牌信息,如“阿里巴巴的橙色系列,“1688的Logo”。但是品牌识别不止是图标和广告词。它遍布在阿里巴巴项目产品设计、阿里巴巴的网站,以及阿里巴巴的材料中——事实上,品牌对配色方案的选择、字体、图形、词汇表,体现在各个方向。

视觉设计师制作了内容相同而风格不同的上百个界面,然后产品规划与设计团队成员集体投票,选择一个最合适的风格定位。在设计与选择的过程中,如果我们很了解目标用户,那么他们的内在反应和情感反应是可以预见的,并且可以预见的程度还相当惊人。答案就在于实际情况下很多因素的结合:

  • 颜色-让色彩更具有可读性,少一点颜色,多一点价值。
  • 排版-根据字体的选择,文字颜色的选择,再看内在的、情感上的因素来布局。
  • 规模-避免空间过度拥挤。
  • 角度和形状-尖锐的角度、线交叉点或多个线条汇聚的地方,使用这些焦点把用户的眼光引导到你希望的地方去。
  • 重复出现的视觉主题-角落处理模式可以给用户带来视觉旋律。
  • 文本-选择形散,神不散的字体与文本颜色。
  • 图片-节制性的使用装饰性图片,在功能性GUI里谨慎使用,因为会分散用户注意力。
  • 文化因素-如果要表达明显的文化含义,考虑下将要面对的受重。

针对电子商务搜索LIST页面用户体验设计,视觉优化不是万能的,但是没有视觉优化阶段是万万不能的。

前端代码优化

用户体验设计实例:B2C搜索LIST页面设计

文件越大,用来下载和显示页面的时间就越长。请记住:文件总体积,指的是构成Web页面的所有文件,包括:HTML、外部CSS、外部JavaScript、图像、声音以及视频在内的文件的大小。在这些文件中,HTML、CSS、以及JavaScript文件只是文本文件,因此,常常相当紧凑。而图像、声音,以及视频文件通常都很大,存在下载问题。

公共网站的页面大小,从每页小于20K到每页大于100K(包括页面的所有图形文件)。究竟应该有多大,即使是所谓的专家在这个问题上,也普遍存在着分歧。如果你的网站需要专业品质的图形,那么就不可能遵守“20K定律”。但是,如果目标受众的Internet连接速度慢,或者目标受众的耐性有限,你就不得不放弃那令人难以抗拒的漂亮图像,转而遵守关于“20K定律”的限制。怎么样为有限的文件体积做事先的规划呢?

  • 把大部分的CSS和JavaScript文件放入外部文件。只在网站第一次引用这些文件时,才进行下载。之后,网站上任何页面都可以重复使用这些文件,而无需再次下载。
  • 重复使用不同页面的图形、音频和视频。因为这些文件也是在第一次时,才进行下载。
  • 不要使用不必要的图形、动画或声音。无论是出于实用性的考虑,还是为了增强网站的吸引力,每个文件都应该有清楚的存在于网站上的理由。一个用于导航,大尺寸、具有吸引力的图像映射,同时具备了实用和美观两种用途,就像待售产品的照片一样。另一方面,应该去掉那些只起到填充空白作用的图形。
  • 在可能的情况下,使用小尺寸图像,而不是大尺寸图像。因为在其他因素相同的条件下,与大尺寸图像相比,小尺寸图像的下载速度更快。例如:你可能使用一个平铺(重复)显示在背景上的小尺寸图像,代替单个的大尺寸背景图像。
  • 尽量减少特殊导航按钮,每个按钮都具有独特的措辞和翻转效果,则需要下载100个不同的图像。相反地,50个文本链接(具有CSS提供的翻转效果),只需很小的下载代价。

做为技术出身的交互设计师,可以不断探索新的技术带来的变革(例如:html5)。无论何时,页面打开速度是给用户的第一印象,也是提升用户对网站满意度的重要因素,并且前端代码的优化将会给用户带来舒适地操作体验!

用户体验原则制定

用户体验设计实例:B2C搜索LIST页面设计

在设计前我们要遵从一种通用性的用户体验设计原则,在设计后我们要能总结归纳出只适合此产品的用户体验规则。

设计前设计思路:

  1. 以用户为中心的设计:设计必须是满足用户需求的、可行的,其次才是可产生商业价值的。
  2. 操作入口明确:任何一个产品都要有明确、合理的入口。
  3. 不歧视特殊人群:色盲、肢体残疾人士可以完成基本操作。
  4. 任务可被完成:任务在无外界影响下可以被完成。
  5. 问题可被解决:用户在任务中出现的问题,在无外界影响下可以被解决。
  6. 简洁自然,清晰易懂:用简洁、自然、用户可理解的形式表达信息。
  7. 突出重点,一目了然:用户的第一关注,将是设计中要表达的重点信息。
  8. 导航明晰、有效:导航明确清晰、有效,分类彼此独立、完全穷尽。
  9. 避免迷路:任何位置都能明确“我在那里?这里有什么?从这里能去哪里?”。
  10. 深广度平衡:单个页面上可见菜单项的数目与层级结构中级别的数目平衡。
  11. 习惯延续,必要延伸:用户的操作习惯必须延续,在用户可接受的范围之内适当延伸与引导。
  12. 符合用户心智模型:用户对功能的预期与实际操作的结果保持一致。
  13. 操作一致性:相同类型的命令或操作产生同样的效果。
  14. 及时、有效、友好:第一时间针对用户的操作作出有效、友好的反应。
  15. 避免出错:针对用户可能出现的错误,通过系统来避免错误的发生。
  16. 一次点击:尽可能减少完成任务所需要的操作次数。
  17. 别让我思考:用户的第一反应所产生的操作正确、有效。
  18. 最小记忆负担:避免用户需要记忆5条以上的数据。
  19. 最简化:帮助信息精简,准确描述,段落不超过3段,句子不超过30字。
  20. 适时帮助:当用户需要帮助的时候才提供帮助。
  21. 二倍、一个:方案设计数量增加两倍或减少到单位数量时,仍可适用该设计方案。
  22. 以简化繁:尽量使用简单、原生的交互方式解决复杂的用户交互行为。
  23. 符合栅格:页面布局符合栅格系统标准。
  24. 符合标准设计模式:交互控件符合DPL设计模式标准。

设计后体验原则:

  1. 启发式交互:让创新的界面具有教学功能。
  2. 速度第一:页面打开速度的重要意义已经超过了某些页面的普通功能。
  3. 即时有效:控件的反馈应该是即时的,而不是让用户去无限等待。
  4. 少即是多:操作起来足够的简单快速,页面功能也很强大。
  5. 个性化操作:满足交易型用户的口味,也可以同时满足浏览型用户的操作习惯。
  6. 可发现性:让一切应该在那时间看到的元素,一目了然吧。
  7. 简洁性:应用程序足够的干净,什么时候该出现,什么时候该消失,不给用户带来困扰。
  8. 差异化:这里的差异化指的是让用户能很容易辩识相同纬度的元素之间的差异,例如相关搜索的展示方式。

其实,在设计前,我们会参考大量的通用性设计原则;在设计后,我们才会发现:对于项目有针对意义的原则也就很少的几条。这个时候需要靠设计师自己的逻辑归纳能力,把最重要最迫切的用户体验设计原则抽象出来。

快速迭代与可用性测试

用户体验设计实例:B2C搜索LIST页面设计

在项目执行过程中,难免会有一些突发事件或需求变更,这时候我们需要一个严格的项目质量管理控制体系,来保证项目的质量的同时还要保证项目的进度。我们要通过快速迭代的方式来把之前的疏漏或错误进行修复,不要怕犯错误,应该勇于快速修正错误。一般快速迭代的开发机制是配合可用性测试(简约版启发式评估同步进行的。

针对现有启发式评估流程上复杂,实现成本比较高的特点,进行的改进与精简,立足于机动性强,实现简单方便,灵活性更高的特点。我创新了一种简约版启发式评估的方法,适用于重要度和紧急度都高的项目。

根据who-how-what策略来快速开展简约版启发式评估,其中who-how-what为贯穿整个过程的主线,并且评估过程也分who-how-what三个部分,三个部分概括为6个字:准备-评估-报告。

具体可用性测试操作方法请参考:如何快速开展简约版启发式评估

定性与定量结合的数据分析

用户体验设计实例:B2C搜索LIST页面设计

可用性测试会产生大量的需要你检查的数据。测试完成后,你可能会得到下面一些数据:

  • 测试中的问题列表。
  • 测试中关于时间、错误和其他性能测试数据,还包括调查问卷中的主观评分。
  • 日志、笔记和调查问卷中测试者的评论。
  • 测试团队的笔记记录。
  • 测试参与者的背景资料数据。
  • 测试过程的录像,可以从测试房间的多个角度获得。

当将所有获得的数据都输入Excel完成后,就可以分析这些数据来发现一些趋势和问题。但是,问题也来了,正如马克.吐温所说,总存在着“谎言,可憎的谎言和数据”的问题,特别是对于一些推论性的数据而言,很容易造成数据误读。

一个有用的处理数据的技术是对其进行三角形化。这种方法可以清楚地看出整个数据中每组数据是如何影响其他各组数据的。三角形的每个顶点对应一种不同类型的数据:

  • 问题列表。
  • 日志和调查问卷中的数值(定量)数据。
  • 测试者的评论和测试团队的观察。

根据可用性目标和测试前确定的数值标准来对数据进行检验,从而确定哪些问题位于三角形内部。

排除数据误读的方式,还有很多这里谈到的只是众多方式的冰山一角。对于电子商务搜索LIST页面用户体验优化,未来我们也不将止于此,好了接下来听听大家怎么说吧?

相关文章
  • 用户体验设计实例:B2C搜索LIST页面设计 用户体验设计实例:B2C搜索LIST页面设计

    破洛洛文章简介:用户体验设计实例:B2C搜索LIST页面设计. 改版背景 创建专业的电子商务垂直搜索,以及把原有的信息聚合平台转型为在线采购批发交易平台.根据行业特点及交易需要,对原有的零批(小额批发)搜索进行改版,改造为适合行业搜索交易频道,便是这次改版的设计目标.我们搜索产品线的产品经理与用户体验设计师们进行了长达半年的准备工作. 项目组成员将对现有的功能需求,信息架构,视觉色彩,用户体验等,做多视角.多纬度的分析.力求在1688.com上线后,推出另一个电子商务垂直搜索用户体验盛宴. 功能

  • 用户体验:从app加载页面道开去 用户体验:从app加载页面道开去

    用户体验:从app加载页面说开去 好的交互设计的评判标准之一是"别让我等",但互联网产品总是受制于实际的网络问题.移动端产品则更为明显,2G.3G环境下加载不够给力,wifi环境也未必每次都是那么顺利.因此"别让我等"更像是种奢望,我们倒应该思考的是"如何优雅而不令人烦躁的等".与之最直接关联的就是app加载页面的设计. 一个app加载页面,大致分为3类: 一.启动加载页 启动加载是我们打开app的第一眼所看到界面.会给用户留下该产品的第一印象.

  • 用户体验:从app加载页面聊开去 用户体验:从app加载页面聊开去

    用户体验:从app加载页面说开去 好的交互设计的评判标准之一是"别让我等",但互联网产品总是受制于实际的网络问题.移动端产品则更为明显,2G.3G环境下加载不够给力,wifi环境也未必每次都是那么顺利.因此"别让我等"更像是种奢望,我们倒应该思考的是"如何优雅而不令人烦躁的等".与之最直接关联的就是app加载页面的设计. 一个app加载页面,大致分为3类: 一.启动加载页 启动加载是我们打开app的第一眼所看到界面.会给用户留下该产品的第一印象.

  • 新漫笔(二)用户体验:用户注册表单中的“年份”设计乱象 新漫笔(二)用户体验:用户注册表单中的“年份”设计乱象

    新随笔(二)用户体验:用户注册表单中的"年份"设计乱象 新随笔(二)用户体验:用户注册表单中的"年份"设计乱象 上午,我因为一些原因,想再注册一个新QQ号,当我注册时,我发现一个有趣的事儿,在用户注册页的表单选项"年份"选择中居然有"1895年", 有意思,难道QQ觉得4亿用户还是太少,希望古人在那边也使用上QQ. (哈,谁能告诉我上图中显示的验证码是什么?看来QQ不光是防止机器人注册,连人类都挡在门外了.) 我停下了注册,看

  • 新漫笔(二)用户体验:用户注册表中的“年份”设计乱象 新漫笔(二)用户体验:用户注册表中的“年份”设计乱象

    新随笔(二)用户体验:用户注册表中的"年份"设计乱象 新随笔(二)用户体验:用户注册表单中的"年份"设计乱象 上午,我因为一些原因,想再注册一个新QQ号,当我注册时,我发现一个有趣的事儿,在用户注册页的表单选项"年份"选择中居然有"1895年", 有意思,难道QQ觉得4亿用户还是太少,希望古人在那边也使用上QQ. (哈,谁能告诉我上图中显示的验证码是什么?看来QQ不光是防止机器人注册,连人类都挡在门外了.) 我停下了注册,看看

  • 交互设计实例分析:自然用户界面大胆设计 交互设计实例分析:自然用户界面大胆设计

    破洛洛文章简介:交互设计实例分析:自然用户界面大胆设计. 今天ifanr上有一篇<手势操作(自然用户界面)再探讨>,观点保守,论据不足. Android的菜单确实难用,难以记住界面是否有菜单.Plam将菜单放置在状态栏的左边,保证了触摸屏也能使用菜单,但也有弊端.菜单放在界面左上角,宽28像素,难以点击.请拿出你的手机,右手去点击大屏幕的左上角.要么大拇指伸过去,要么其余四指抬起才能点到左上角,甚为别扭. 弹出的菜单通常要么是无关紧要的功能,要么重要.如果功能无关紧要,那不如将菜单放置在启动程

  • CSS网页设计实例:15个用CSS设计的网页表单实例 CSS网页设计实例:15个用CSS设计的网页表单实例

    网页制作Poluoluo文章简介:CSS网页设计实例:15个用CSS设计的网页表单实例. 我们都知道,表单是网页的重要组成部分,它是网站与用户进行交互的窗口.然而表单中固定的诸如说明文字.输入框.提交按钮等元素,使得表单设计略显乏味,难有创新,这一点不少Web设计师深有体会.好的Web设计师就是可以在平凡处挖亮点,让表单设计或耳目一新,或整洁素雅.下面就来看这样的15个基于CSS的优秀表单设计. 以下译自:Coolest 15 css based html forms rarely seen 中

  • 用户体验设计实例:阿里搜索框优化建议 用户体验设计实例:阿里搜索框优化建议

    网页制作poluoluo文章简介:阿里输入框交互尝试.启发式评估及优化建议. ·设计目的: 1) 在不影响现有用户使用习惯的前提下,提升搜索输入流程的便利性: 2) 在有限的空间内,增强首页搜索操作的历史回溯能力,减少老用户的搜索操作成本,提高他们的搜索效率: 3) 对新用户的搜索引导更丰富,增加搜索的趣味性: ·设计方案草稿: ·主要流程 1) 进入页面,光标默认放置在输入框内,支持用户直接输入操作.同时,光标后跟随当前搜索维度下的输入提示信息:(如图1.1) 图1.1 2) 在图1.1页面状

  • 用户体验设计实例:网站搜索的设计 用户体验设计实例:网站搜索的设计

    破洛洛文章简介:交互设计细节--搜索. 一 推荐字 关于推荐关键词放置位置的问题: 推荐字在框下:普遍认为放在下面好一些,从版面美观度考虑,从给用户的冲击力和干扰程度考虑: 推荐字在框上:有时搜索框上面会放分类等tab,推荐关键字易被认为作分类:但具体放在上面给用户带来的干扰程度,是否会让很多用户很讨厌,笔者认为来搜索的用户普遍目的性较强,会下意识自动过滤掉自己不需要的内容,此时的用户是很难被干扰到的,可放心放到搜索框之上:但可能喜欢清爽一些或有洁癖的用户比较希望什么都不要放. (图为 迅雷看看

  • 注重用户体验:电子商务网站空搜索设计

    网页制作poluoluo文章简介:空搜索指的是:不在搜索框里输入任何内容,直接点击搜索按钮. 下午的时候群里一个童鞋列出了一些电子商务网站对于空搜索的处理结果,然后引发了一个关于空搜索处理的讨论.这里,空搜索指的是:不在搜索框里输入任何内容,直接点击搜索按钮. 可以肯定的是,造成空搜索的用户的比例应该不大,主要是误操作,当然也不排除向我这样的探索者.但是作为电子商务网站用户体验的一部分,这个地方必须要考虑到. 我们先来看看主流电子商务网站的处理结果(这里不需要讨论搜索引擎的返回结果,因为它就是做

  • 用户体验设计实例:系统分析iPhone通知的设计 用户体验设计实例:系统分析iPhone通知的设计

    破洛洛文章简介:分析设计优秀的iPhone通知. 当应用需要提醒用户关注某件事情的时候,希望1.引起用户的关注;2.不使用户感到烦躁不安:3.不希望中断用户的操作:4.引领用户到达该去的地方:5.当用户需要的时候可以再次找到该提醒.这些要求看似简单,实则需要耗费一番的设计功夫.本篇文章,就要系统的分析一下iPhone上通知的设计. 一.通知的样式 (一).视觉界面 iPhone系统自带的消息通知形式有两种,分别是Badge Notification和Alert Notification.IOS5

  • 用户体验设计实例分析:网页表单设计 用户体验设计实例分析:网页表单设计

    网页制作poluoluo文章简介:随着网络的发展,人们通过各种方式使用它.今天,网络购物,跟朋友或者不认识的人聊天,管理银行账户,以及一些日常应用,共享照片或视频,等等.事实上,只要能在线使用的应用基本上都已经有了. 原文:http://visitmix.com/Articles/Web-Forms-for-People 作者:Luke Wroblewski 译者:江力 随着网络的发展,人们通过各种方式使用它.今天,网络购物,跟朋友或者不认识的人聊天,管理银行账户,以及一些日常应用,共享照片或视

  • 用户体验:10条有用的网站可用性设计参考 用户体验:10条有用的网站可用性设计参考

    网页制作poluoluo文章简介:这里是能够帮助你提高你的网站的用户体验的10条有用的可用性结论和指南. 每个人都会赞同可用性是网站的一个很重要的方面的说法.无论你是在做一个作品集网站.网上商店还是网络应用,让你的页面对用户来说可以容易和快乐的使用是一个关键.这些年,很多人在网站和界面设计的很多方面完成了很多的研究,这些结论在帮助我们提高我们的工作方面很有价值.这里是能够帮助你提高你的网站的用户体验的10条有用的可用性结论和指南. Form标签最好放到字段的上面 UX Matters的一份研究发

  • 浅谈网站的用户体验(一)搜索体验

    网站的用户体验有很多方面的体现,比如,网页的设计是否符合人机工学原理,网站的设计是否美观大方等等,这篇文章主要说说网站的搜索体验,其他方面的用户体验将陆续推出. 这里说的网站搜索体验指的是网站在搜索引擎中体现所涉及的用户体验,网站被搜索引擎收录后,会出现在搜索结果页,很多的SEO也都很注意这个结果的展示,那么怎样的设计才是比较好的搜索体验设计呢?大体从以下几个方面来分析: 1.搜索结果页收录条目的标题设计 搜索结果页收录条目的标题设计反映在我们的网站上也就是网页标题的设计,对于一个网页的标题标签

  • 设计实例分析:搜索SNS视觉设计全过程 设计实例分析:搜索SNS视觉设计全过程

    网页制作poluoluo文章简介:白社会视觉设计诞生记. 说实话,我还真没在公共场合真正好好说说白社会诞生的过程,她的样子是如何被我们一步一步勾勒出来的.这次,借助UED Blog的即将开张,算是正式的公布出来吧. 在接到白社会设计任务的时候,当时的SNS漫天飞舞的设计样式都是facebook.开心.校内的样式,那时,我们就想,如何突破?如何脱离那随处可见的信息架构.页面布局模式以及视觉元素,让人起码在第一感受上不觉得这是一个市面上千篇一律的SNS的皮. 这其中,我们尝试了很多的创新,情境故事般

  • GOOGLE用户体验设计师谈Google的十大设计原则 GOOGLE用户体验设计师谈Google的十大设计原则

    破洛洛文章简介:在一次讲座上,Jon Wiley--Google的"用户体验设计师"(User Experience Designer)--提到了Google的十大设计原则. 在一次讲座上,Jon Wiley--Google的"用户体验设计师"(User Experience Designer)--提到了Google的十大设计原则. 1. 有用(Useful):以用户为焦点,关注他们的生活.工作和梦想. 2. 快速(Fast):争取节省每一个毫秒. 3. 简单(Si

  • 网站用户体验:意见反馈—小功能大设计 网站用户体验:意见反馈—小功能大设计

    意见反馈的功能,大家都已经熟悉的不能再熟悉了,却往往在设计的时候忽略掉这个功能,使产品在上线之后没有渠道供用户去反馈,造成初始产品信息收集出现障碍.或者是这个功能设计的太过随意,让用户在使用的时候非常不顺畅,用户体验很差,这样就造成用户反馈问题积极性的下降,也降低了用户的参与度.一个线上产品,没有用户热心的来反馈问题,这是比较可怕的,因为这就等于关闭了与用户交流的一扇窗,不得不靠闭门造车来解决问题,虽然说的有点夸张,但也说明了这个小功能的重要性. 意见反馈的主要功能就是在产品里提供一个入口让用户

  • 网站用户体验分析:小议国民性和Web设计 网站用户体验分析:小议国民性和Web设计

    本文意在通过对当代中国民众的共性和心态上的思考,从更加人性化的角度考量和设计web产品的用户体验.之所以称作"小议",一是因为"国民性"这个题目很大,也很敏感, 几篇文章无法说尽;再者本人阅历有限,个人观点的bias难以避免;同时,也希望引发大家的一些反思.而"Web设计"则指网络上的用户体验设计的各个方面(图1). 阅读全文 图1:用户体验的4个元素 前言 国民性这个议题,自然没有那么简单,泱泱大国.数千年历史.十亿以上的人口,追述到漫长的封建

  • 来看这25个用户体验极佳的网站动效设计 来看这25个用户体验极佳的网站动效设计

    不为用户体验而做的动效都是炫技.经常有同学问小编有木有能运用到实战中的动效设计 ,来看今天这组网站就对了!第一个网站就是那个输密码时会捂眼睛的猫头鹰官网,连注册的动效都特别有趣,来体验一把真正的动效吧. ReadMe.io 尽管用不上这服务,点击 Get Start Now 按钮后,小编还是被那只萌萌的猫头鹰吸引去注册了. Paranoid Android Italio Underbelly Interactive Infographic Babel Anonymous Zurb Manifes

  • 日本没有用户体验——从日本的生活品质看设计 日本没有用户体验——从日本的生活品质看设计

    国内近些年开始流行用户体验,从互联网到传统行业,都开始讲究用户体验.这也是时代发展的产物,国人已经不能满足于早期的"有就行",在竞争激烈的市场环境中开始追求品质,谁家的东西好用才选谁. 用户体验不是单独的个体,它是系统中所有环节必不可少的部分. 小日本没有把用户名体验单独拿出来的说法,他们所有的建筑设计.工业设计.包装设计.服务业.制造业等领域,过程中是必须处理好和人的关系.一位Panasonic的工程师在介绍未来智能家庭产品时说:"这里所有的投影仪.触控板.灯光.相机.地板

最新文章
  • 一种非常好的优化手段

    http://www.mittrchinese.com/wordmap.php --cut-- manhere在2011-03-02 21:55:4回答到: 这种做法放在小站早K了 benzhe在2011-03-02 22:09:1回答到: 这是讽刺吧... ihacku在2011-03-02 22:13:0回答到: 发现他们并没有sitemap 这么搞好么 Kenyth在2011-03-02 22:16:4回答到: 晕... 之前跟一个专门搞 SEO 的共事过,对各种花招多有所了解.不过这个页

  • Mac下TotalFinder的免费替代品: XtraFinder

    http://www.trankynam.com/xtrafinder/ 功能列表: • Tabs (experimental). • Dual Panel & Dual Window. • Arrange folders on top. • Cut & Paste. • "Copy Path" menu. • "Show Hidden Items", "Refresh", "New File", "

  • QQ电脑管家:怎么设置下载保护的弹窗提醒? QQ电脑管家:怎么设置下载保护的弹窗提醒?

    您可以进入实时防护设置中心,选择"自动删除木马文件",或进行其他弹窗提醒的设置.

  • 孩子早恋后有那些表现?

    孩子早恋后有那些表现? 1.孩子变得特别爱打扮,注意修饰自己,常对着镜子左顾右盼. 2.成绩突然下降,上课注意力不集中. 3.活泼好动的孩子突然变得沉默,不愿和父母多说话. 4.在家坐不住,经常找借口外出,瞒着父母到公园.歌厅等场所,有时还说谎. 5.放学回家喜欢一个人躲在房间里,或待在一边想心事,时常走神发呆. 6.情绪起伏大,有时兴奋,有时忧郁,有时烦燥不安,做事无耐心. 7.突然对描写爱情的文艺作品.电影.电视感兴趣. 8.突然喜欢谈论男女之间的事. 9.背着家长偷偷写信,写日记,看到别人

  • 人像美姿让照片看上去更美丽 人像美姿让照片看上去更美丽

    基本原则一 头.躯干.四肢尽量不在一个平面. 人像示例: 摄影师 钱多多 让模特的手和身体分开,不管是张扬狂野的身体张力,还是唯美浪漫的牵起裙摆,都会让照片更精彩耐看. 人像美姿基本原则二 挺胸.收腹.撅臀. 人像示例: 摄影师 钱多多 让模特把她最美最曼妙的身材表现出来,拍照要学会扬长避短. 人像美姿基本原则三: 肩线.胯线不平行. 人像示例: 摄影 钱多多 当然也要注重平衡,任何姿态的倾斜.屈伸在两腿之间都有一个身体的重心线,如同钟摆一样,钟摆摆向弧形的顶端,也就是人体运动的最大限度,平衡感

  • 惊!大人被鬼压床 小孩看到了鬼? 惊!大人被鬼压床 小孩看到了鬼?

    从小妈妈就说我的眼睛特别亮,小时就经常因为看到那些东西而长长无缘无辜的大哭. (1)两个月前一天的晚上10点左右,和我两个双胞胎小外甥(6岁)在单位的棋室(在3楼)下棋,整个楼上没有别人,屋里开的是日光灯,窗户玻璃可以映 出我们的影子,刚玩了一会,就看见老大不停的看窗户,我以为他害怕,就问他你在看什么,他说窗户里有个穿红衣服的人在看我们下棋,我头发一下子就给吓直 了,我看了看窗户明明是我们三个人的影子,他说那个人就在我旁边站着呀,我让老二看看,但他只能看到我们三个,看老大一点也不向吓唬我的样子,

  • 网络营销常用方法及术语 网络营销常用方法及术语

    最近看到一些刚接触网络营销的朋友,对于网络营销一些常用的方法以及概念性的东西都不是很了解,在交谈中说到软文营销.IM推广等这些的方法时他们就不知道是什么意思.在此小篇整理一部分常用的网络营销方法和术语,希望对新人有帮助,高手看到就请绕行. 什么是网络营销? 以国际互联网络为基础,利用数字化的信息和网络媒体的交互性来辅助营销目标实现的一种新型的市场营销方式.简单的说,网络营销就是以互联网为主要手段进行的,为达到一定营销目的的营销活动.(摘自百度百科) 搜索引擎优化/SEO: 利用搜索引擎的搜索规则

  • 高露洁冰爽新注册用户得QQ红钻_仅限3天_每天500个

    高露洁冰爽新注册用户得QQ红钻_仅限3天_每天500个,详情如下 活动是高露洁活动更新的www.poluoluo.com 不知道 是 每天前500 还是每天抽奖500.... 大家打开活动地址 http://ice.qq.com/rule/default/ [点奖品,然后拉下去就看见了]

  • 如何申请腾讯名人博客?

    1. QQ空间用户.如非QQ空间用户,请首先注册开通QQ空间. 2. 原创用户,空间已发表日志至少20篇以上,能保持至少每周更新2次日志,博客内容50%以上和游戏相关,内容健康有思想性的用户. 3. 博学之,审问之,慎思之,明辨之,笃行之.独立自信,有自己看问题的视角和主见,游戏相关精英领域实力出众,经常就游戏博客公共话题发言.对新知识.新理念.新潮流有强烈需求的用户,可破格开通名人博客. 4. 信任腾讯精英博客的用户. 5. 游戏博客相关领域介绍:如果您符合以下领域要求,便请勇敢的报名吧. 游

  • qq语音听不到声音的解决方法 qq语音听不到声音的解决方法

    qq语音听不到声音的解决方法: 1.先选择要聊天的对象,在弹出的聊天对话框中选择视频设置,操作见下图: 2.在弹出的语音视频对话框中,选择"语音"页签,如果声音输入和声音输出为下图所示的windows默认设备,那就恭喜你,听不见你声音的问题就要解决了. 3.如果声音输入和声音输出均是windows默认设备,请展开下拉列表框,请分别选择您的声卡对应的输入和输出设备,当然也要注意下调节mic的音量和音箱.听筒的音量,保存退出. 4.上面都完成了,能听见声音了没,不行的话,再改个设置看看,将

热门推荐
  • IE7与web标准设计(1) IE7与web标准设计(1) IE历来被web标准的拥护者所诟病,而当FireFox横空出世以后,更多的网页制作者开始关注web标准设计.看着FireFox的市场占有率不停的上升,微软终于推出了IE7.但IE7是否真的能够力挽狂澜,是否真的能够得到用户的信任,是否真的能够得到网页设计者的认可呢? 且看<IE7的web标准之道>系列文章,和你一起见证IE7的改变! 两份报表 什么也别说,让我们从一张统计图表开始.这是我的博客在最近一段时间内(2008年1月1日--2008年2月15日),统计出来的关于浏览器类型的报表: 浏览
  • 谢旭人一行视察世界工厂网运营情况 谢旭人一行视察世界工厂网运营情况 12月16日上午,原财政部长.现全国社保基金理事会理事长谢旭人,省人大副主任张大卫,郑州市市委副书记.市长马懿以及20余名省人大代表一行来到世界工厂网视察项目运营情况. 谢旭人一行听取世界工厂网CEO乔景亮汇报网站运营情况 谢旭人理事长.张大卫副主任和代表们仔细参观了世界工厂网.中国中部国际贸易电子商务服务基地,了解和询问了各个项目整体运营情况,认真听取了世界工厂网CEO乔景亮对各个功能领域的专业介绍并给予高度评价. 世界工厂网作为全球最大的制造型电子商务平台,为实体生产厂家提供全方位的电子商务
  • 风景摄影的光圈与快门运用时机 风景摄影的光圈与快门运用时机 在拍摄风景时,相机所使用的光圈可不像拍摄人像那样,并不是使用大光圈就能拍出美丽作品,而快门的运用也需要视题材的不同来做作决定.当然在面对不同的拍摄环境下,这些看似是真理的相机设定并不是铁一般的规则,懂得从中做变化的人,才能真正拍出好风景哦! 光圈的表现 光圈主要的作用是调整进光量.开启光圈后,只有合焦的地方才会清晰呈现,合焦点以外的地方,影像就会较模糊.如果缩小光圈,原先模糊的地方就会比较清晰.光圈叶片愈小,其合焦点前后清楚的范围就变得愈大,这前后清楚的范围称之为景深.浅景深常用在特写的作品上,
  • 论微信搞怪头像营销:已经由头转向PP了! 论微信搞怪头像营销:已经由头转向PP了! 在2012年的时候,让我记忆犹新的一种微信头像是那种歪脖子头像,就是那种动漫的歪脖子头像,让人看了以后忍不住想把脖子往左或者往右歪!这种头像的起因是一个新浪微博的博友设计的.当时算是深受广大微友的喜爱啊!不但霸占了微信.还霸占了扣扣!然后终究只是昙花一现. 今年大有赶超前年之势,前段时间在微信朋友圈流传甚广的一种右上角微信头像+1的头像.这种头像让有强迫症的患者忍不住都去点击一下.因为这种头像跟未读消息的状态是一样的!冯东阳我虽然没有强迫症状,但是还是忍不住点了一下,最后又忍不住把他给删除了!因
  • dwr兑现搜索自动补全功能(键盘鼠标均可,类似百度) dwr兑现搜索自动补全功能(键盘鼠标均可,类似百度) dwr实现搜索自动补全功能(键盘鼠标均可,类似百度) 上段时间想做一个百度等搜索自动提示补全的功能.于是从网上弄了点资料实现了第一个版本,但光标事件没有实现.于是又从网上弄了点资料,这个版本的作者我记不清楚了,对他说声对不起,由于这个版本的数据是在页面上写的死数据,所以个人把这个地方改成用DWR从后台取的数据,数据封装形式为List<javaBean>.修改后完成鼠标,方向键,ESC键以及失去焦点后所有的功能.程序中你也可以把AutoComplete类修改成两个参数的类,我这里还是沿用三个参数