发现网页中的信息与交互

  两周前,在一家知名互联网媒体公司做内部沙龙交流。有朋友问我,做为产品设计、用户体验师或交互设计师,在设计网站时有哪些事情要做?

  互联网发展到现在,各种产品形态种类繁多,眼花缭乱。但再复杂的网站都是由页面构成的,而无论什么样的页面,都只有两样东西需要考虑:一种是让人看的元素;另一种是让人操作的元素。我这样的解释比较通俗,也并没有很好的把概念抽象出来,目的是为了方便记忆。“让人用”和“让人操作”这两件事情,就是我们常说的信息设计和交互设计。

  信息设计:

  互联网虽然是个虚拟的世界,可我一直坚信任何互联网产品都可以找到现实版的映射。Win7新增的便签纸功能非常的方便,而它的现实版例证就是3M公司发明的及时贴产品。而设计类似京东商城的产品时,当我们无法找到正确的路径时,总会拿西单大悦城做类比。

  不光产品可以映射,信息设计工作其实有点像现实中的杂志设计,编辑在制作一本杂志时。首先要在考虑各种因素后(包括:聆听用户、杂志定位、文章质量等),决定若干内容的排序和展现,例如:广告放在哪?名人的报道在第几页?专栏如何放?当这些问题解决后,还要考虑专栏放在某一个页面时,图文等元素如何排版。

  总之,内容结构和内容布置的所有问题都可以归结为信息设计,也就是设计那些网站或页面中“让人看”的元素。信息架构是一门高深的学问,我只讲几点个人体会:

  1.展现用户想看到的。页面中的信息,大部分要以用户为导向,用户想看什么,就提供什么。

  2.展现你想让用户看到的。用户明确的需求一定要满足,但是很多人来到网站则只有预期没有需求,是来随便逛逛的。可以花些心思引导这部分人,把你最想给用户看到的内容展现出来。

  3.符合人类的视觉系统习惯。人类的视觉是从左到右、从上到下的浏览习惯,眼球长时间看单一的文字,或单一的图片墙都会发生视觉疲劳等等。

  交互设计:

  交互设计指的是人机交互,人指用户,机就是网站系统。交互设计的工作量集中在能够被响应的区域。比如:超链接、按钮、输入框、单选多选、List选择等等,这些元素提供了人机交互的可能性,也就是所说的“能操作”的元素。交互功能是希望用户做某些事,或用户想达到下一个目标必须做的事情。

  交互操作的成本是远高于流量页面的信息,所有转化率的损失是不可避免的。有一次看到某网站的首页,弹出率(用户只浏览了这一个页面就离开了)超过 50%,我就对网站的产品人员和交互人员说只有两种可能:第一,网站根本找不到用户想要的;第二,交互设计太差,无法到下一步,于是选择离开。

  1.别让用户思考。用户会说:你想让我做什么就直接告诉我吧。网站和软件是唯一没有说明书的产品(如果有说明书,也很少有人会看)。如果设计的交互功能不伦不类,用户研究了半天还是不知所云,那你就死定了。用户的离开是对糟糕交互设计的最大惩罚。

  2.别让用户烦躁。5年前,在一个网站注册需要花超过5分钟,复杂的填写项目像是在办移民添表格一样,而且一旦填写错误,你就必须重来一遍。现在再去看看你能想到的网站吧,30秒钟就可以完成,只需要填写用户名和密码,其他类似生日、性别等“让人烦”的信息全部被去掉了。

  产品经理或者交互设计师可以抽象出这部分是信息设计,那部分是交互设计,这样可以更好的分工和安排工作。但是用户全然不知这些,对用户来讲没有信息和交互的概念,每个网页对用户来说都是一个整体,要么满足需求、让我舒服,然后留下;要么不满足需求、让我烦躁,迅速离开。因此我们可以分开工作,但是从体验角度很多事情还是要统一考虑的。

时间: 2024-10-22 06:40:22

发现网页中的信息与交互的相关文章

求教如何通过python抓取网页中表格信息

问题描述 求教如何通过python抓取网页中表格信息 刚刚开始学习python 不清楚如何通过python抓取网页中的表格信息 比如给定一个student.html 里面有学号.姓名.性别等信息 怎么样写才能够输入学号 读出其他信息? 解决方案 用正则表达式,表格数据放在table->tr->td中 解决方案二: 输入学号然后服务器在给你其他数据,应该是一个post的过程-你可以抓包看一下整个过程-至于提取特定的信息,你可以先看下整个表格的结构,再有针对性的写个正则表达式来提取出信息- 解决方

javascript-python爬虫如何抓取包含JavaScript的网页中的信息

问题描述 python爬虫如何抓取包含JavaScript的网页中的信息 这里本科生一枚..做本研要求抓取一些数据碰到了一些问题求指教> <我想要抓取汽车之家上关于供应商的一些数据,然后在车型详情页里找到了关于供应商的框架源代码如下(只截取有用部分):<br> //属性<br> document.domain = "autohome.com.cn";<br> var page=1;<br> var parameters = {

从网页中采集信息然后输入到另人上软件中,用C#如何编写

问题描述 我是一个淘宝卖家,最近想优化产品的上下架时间,要首先去淘宝网把各产品上下架时间分布采集下,导出到EXEL并对数据进行处理然后再将处理完的数据一个一个输入到另一个软件中.这样操作太费精力,有没有哪个大神知道具体怎么用C#写一个辅助工具 解决方案 解决方案二:上猪八戒找人帮你制作吧采集的话用webclient可以下载,但是导入的话,自己做就比较麻烦了.

请教ASP.NET网页中错误信息显示设置的问题

问题描述 这是一段示例代码,当校验控件满足错误条件时,显示错误信息<asp:TextBoxID="TextBox1"runat="server"></asp:TextBox><asp:RangeValidatorID="RangeValidator1"runat="server"ErrorMessage="请输入范围在10~20之间的数值"ControlToValidate=&

手机网站交互设计中的信息设计

在手机上浏览信息,存在着太多的局限,手机屏幕小注定了一页不能显示太多的信息,环境光线的变化注定页面设计不能过于花哨,流量限制注定不能有太多的图片和样式. 如果让你的用户直接在手机上浏览为web所设计的网页,即使是经过一些手机浏览器的优化,体验还是会很糟糕,甚至有时候会让人难以忍受. 如何调整信息展现方式,使内容能在小屏幕的手机上也更友好的展现呢?接下来我将通过一些原理和实例来阐述自己的观点. 首先,老祖宗Ben Shneiderman的交互设计8项黄金法则我们要铭记于心,因为这些法则也是适用于移

网页标准研究:用CSS实现网页中鼠标交互的方法

css|标准|交互|鼠标|网页 我们浏览网页的时候,经常会遇到一些交互的效果.例如容器在鼠标移上去的时候,会发生一些变化.这些效果,可以用多种方法来实现.现在我们要解决的是如何在CSS中写脚本实现交互效果. CSS代码如下: .show {width:600px;height:58px;margin:50px auto 0 auto;line-height:58px;border:1px solid #c00;background:#f0f0f0;text-align:center;/*webj

软件开发-安卓,jsoup,解析网页中的javascript的内容,提取信息

问题描述 安卓,jsoup,解析网页中的javascript的内容,提取信息 开发-安卓,jsoup,解析网页中的javascript的内容,提取信息-jsoup解析javascript"> 这个是网页地址:http://www.bilibili.com/mobile/subchannel.html#tid=33 以下是抓取到的网页源码,以图片发出,实在不好意思了,可是好像因为这个而发不出来了,现在安全起见还是以图片的形式发出,或者可以上该链接获取,我是用ie仿真为windows phon

《HTML5 开发实例大全》——1.31 在网页中显示联系信息

1.31 在网页中显示联系信息 https://yqfile.alicdn.com/37f80a150194ce838dd513a03d9c67545e197f93.png" > 实例说明 在HTML 5 中,可以使用< address >标记元素定义文档作者或拥有者的联系信息.如果 < address > 元素位于 < article > 元素内部,则它表示该文章作者或拥有者的联系信息.通常的做法是将< address >元素添加到网页的头

如何提取网页中想要的信息并保存到text文件中

问题描述 如题,如何提取网页中想要的信息并保存到text文件中! 解决方案 解决方案二:该回复于2011-04-11 10:56:55被版主删除解决方案三:把网页中想要显示的内容转发(或者提交)给一个servlet控制器在控制器里面通过IO然后写到text中去解决方案四:提取的话,用正则过滤.解决方案五:引用2楼javaxiaochouyu的回复: 把网页中想要显示的内容转发(或者提交)给一个servlet控制器在控制器里面通过IO然后写到text中去 提取网页中想要的内容,这个怎么弄呢··初研