摘要: 一、如何理解本条内容:一个“简单”和“复杂”的例子在我和开发人员沟通一个项目需求的时候,他们频频慨叹Mockup的设计所考虑情况之细致,很多程序要实现的预判和“非基础功能点”让开发人员望而却步不情愿去实现。相比较设计师为了让用户避免出错而绞尽脑汁去设想和考虑,开发人员更倾向于直接给到一个只能容许的操作行为,其他非法请求全部报错:“程序是严谨的,他错,我报错,以不变应万变。简单一点不好吗?”程序员们甚至笑言:“考虑他们的体验那么多,我们开发的体验真不好,please,咱们能不能不要把事情搞那么复杂”。在这个例子里,程序员看来,对于用户在和系统交互的过程中可能出现的各种情况均予以考虑,找寻用户理解 阅读全文
posted @ 2011-05-25 11:28 likozhang 阅读(189) 评论(0) 推荐(0) 编辑
摘要: 写在前面的话关于《交互设计实用指南》,我们最近收到很多朋友的反馈,有支持的也有批评的,在此一并感谢了,有你们的关注,我们才能走得更远。《交互设计实用指南》其实是收集和总结了交互设计上的一些问题,肯定有很多老生常谈的东西,是不是老生常谈其实不是问题,“问题在于,这些老生常谈的东西有没有被积累,有没有被传承,有没有被体系化。”(青云语)《交互设计实用指南》的读者群涵盖了许多行业,而且就算是交互设计专业的读者也存在经验和水平的差异,所以读者们对《交互设计实用指南》有很多不同的声音。我们期待你们的声音,你们的认可是对我们的支持,你们的批评是对我们的鞭策,有了你们我们才能把事情作得更好,为行业作出更大的 阅读全文
posted @ 2011-05-25 11:27 likozhang 阅读(292) 评论(0) 推荐(0) 编辑
摘要: 虎年ued第一篇,年前写完,今天发出来给大家分享!先给互联网上的梦想者们拜个晚年!以前经常吃公司旁边的食堂,人多,排队。夏天的时候,我们总要找一个靠窗口通风好的地方坐,没有空调只有风扇,风扇很多,开关都集中在一个地方,应该是方便操作人员统一管理,有时自己头上的风扇没开,当我要去开这个风扇时,麻烦来了,很多排的风扇开关,到底哪个是我头上的呢?生活中有很多总让我们感觉莫名其妙,或者停下来需要思考的情况,有时不得不求助,到了互联网上,可能很多情况发生了也没什么求助的方法,只能自己猜,不猜了就只好关掉。网页上每项内容都有可能迫使我们停下来,进行不必要的思考。比如内容信息看不懂,操作功能不明确。例如,文 阅读全文
posted @ 2011-05-25 11:26 likozhang 阅读(216) 评论(0) 推荐(0) 编辑
摘要: 有一次去超市换货,本能的找到服务中心,服务中心说这个业务在超市旁边一个房间里,由于忘记带小票,那个小房间的人让我去另外一个小房间调电脑里的记录,调出来我拿着记录单去了卖货的地方才换货。其实超市退换的需求也不少,整个过程服务态度很好,但是很麻烦。其实我们日常生活中很多事情,办起来过程很罗嗦,办事的工作人员说这是应该的,都这样做,可应该不应该,谁是评判标准呢?交互设计一个很重要的目地就是让用户方便快捷的执行任务和完成工作。在互联网产品的交互设计中,尽可能的消除每一个附加工作,做到尽可能一次操作而完成任务。一次操作是个概念,并不是完成任务只能点击一次,而是减少用户操作次数。使之提高工作效率。交互产品 阅读全文
posted @ 2011-05-25 11:25 likozhang 阅读(192) 评论(0) 推荐(0) 编辑
摘要: 相信大家对街边林林总总的房产中介并不陌生,那么我们先看看下面这张图片。图1从右侧这家店的橱窗里,我们能迅速分清哪些是租房信息哪些是售房信息。因为店家很贴心的将房产信息进行归类,并且在视觉上做了一些划分,让我们对信息能一目了然。借这个小案例引出我们今天要分享的话题:深广度平衡。1. 什么是深广度?其实“深广度”本身并不是一个单一的概念。在网站的信息架构中,有一种组织结构叫做树形结构:网站首页视为链接层级中第一级,与其有从属关系的页面视为链接层级中的第二级,一般称其为二级页面。通过二级页面又可以继续得到第三级页面,依此类推可以得到一个完整的树形链接结构。这样一个完整的链接结构,我们称它为树形结构。 阅读全文
posted @ 2011-05-25 11:24 likozhang 阅读(260) 评论(0) 推荐(0) 编辑
摘要: 交互设计实用指南系列(7)–避免迷路2010年01月22日 | 设计探讨, 交互设计实用指南任何位置都能明确“我在哪里?这里有什么?从这里能去哪里?”迷路可不是一件好玩的事情,试想你驾车行驶到高速公路分叉口时,却看不见任何路牌,那该会怎样地困惑、沮丧、愤怒和恐惧。为了避免迷失方向,我们发明了各种导航工具,大到卫星定位系统,小到指南针,人类在这一事情上,极具创意。在网站上迷失方向,虽然不是什么生死攸关的事,但会带来许多负面影响,如:用户体验下降、任务不能完成,用户流失等。我们可以通过良好的导航系统来避免这个情况发生。好的导航系统可以帮助人们找到在网站中的位置,并帮助他们制定更好的查询策略,增进对 阅读全文
posted @ 2011-05-25 11:23 likozhang 阅读(211) 评论(0) 推荐(0) 编辑
摘要: 导航标签彼此互斥、完全穷尽。导航标签其实就是一种文字表达形式,我们用标签来代表网站上的各种分类信息。比如“联系我们”这个标签,代表的内容通常会包括公司名称、电话、地址、邮箱等信息。它可以是文字,也可以是图片。在英文里被称作“Label”,并不同于我们常说的“tag”标签云图。说简单一点,我们就是要为网站的信息做分类,并为它们起一个通俗易懂的名字。这其实是任何人都可以做的一件事情,所以在导航设计流程中,它的重要性也常常被忽略。在设计产品时,常会听到这样的话:“这个栏目该叫什么名字?恩。。。先别管吧,把更重要的工作做了再说。”然而,站在用户的角度,导航标签代表的是整个网站的内容、产品的结构,他们必 阅读全文
posted @ 2011-05-25 11:22 likozhang 阅读(255) 评论(0) 推荐(1) 编辑
摘要: 看到这张照片,我们一眼能够看到天宏(图中这位UED俊男)的眼睛。我们能从他的表情里读出一些他的性格。一张好的摄影作品,最重要的一点,就是这个照片是否有焦点,照片的主题是否一目了然。而摄影作品的用光、构图、景深等等手法,其实就是在让一个照片能够有其焦点,并且利用这些艺术手法来烘托气氛,提升主题。 一个优秀的页面亦如此:应当突出重点,一目了然。相信大家也知道,一个用户在浏览网页的过程中,只是扫描页面,而不会像是在看书似的阅读每一处地方,每一行文字。一个网页呈现在用户面前的时候,应该在5秒之内,就能理解:这个页面是干什么的?我大致能通过这个页面做些什么?接下来我该去哪里? 我们网站上的每个页面都可以 阅读全文
posted @ 2011-05-25 11:21 likozhang 阅读(216) 评论(0) 推荐(0) 编辑
摘要: 我们生活在信息繁杂的社会,尤其是在互联网时代,人们开始通过网络开始接触越来越多的信息,那么,如何获取/传递有效而准确的信息将非常重要。在网页交互设计中,我们提出:信息获取和传达的过程必须是简洁清晰,自然易懂。这样用户才能够有效的获取这些信息,并迅速作出决定。1.什么是“简洁自然,清晰易懂”?简洁清晰:使信息最简化“少即是多”。提倡使用最少的元素来表达最多的信息。如果信息繁杂,将使用户承担大量的信息负担,造成信息过载,影响效率,不能帮助用户解决问题。自然易懂:使用用户语言用户获取信息的方式多样,并且对信息的理解程度也各有不同,所以使用用户平时使用和理解的表达方式去传递信息,更可以被用户所接受。2 阅读全文
posted @ 2011-05-25 11:20 likozhang 阅读(271) 评论(0) 推荐(0) 编辑
摘要: 任何一个交互过程的操作,对于用户来说都有学习成本,谁也不能保证所有人都可以准确无误地走完一个流程。交互设计师在设计时应该考虑适时地给用户相应的帮 助,这一点非常重要。适时帮助,是指在用户使用流程中,在需要的时候能及时地得到帮助;反之,在不需要帮助的时候,不要出现信息干扰。不及时的帮助会造成用户使用进程中断,或者增加用户达成目标的难度。无效的帮助则可能给用户造成干扰,影响用户完成任务。“适时帮助”是一个偏正结构,首先是帮助,然后制约条件是适时。我们分开来讲。在理想的交互设计状态下,我们当然希望用户在使用过程中”无师自通”,但受制硬件、使用环境、用户层次等各种原因,有一个”老师”帮助用户是非常必要 阅读全文
posted @ 2011-05-25 11:19 likozhang 阅读(203) 评论(0) 推荐(0) 编辑
摘要: 可及,通俗的说是“可以达到”,加上主语和宾语,在“交互设计”这个大的语境下,含义应该是“用户可以达到自己的操作目标”,这不是和“有效性—用户的操作是有效的”重复了吗?其实,在交互设计实用指南中,“可及”是一个狭义的概念,是放在有效性下面的,具体解释为“色盲、肢体残疾等特殊人士可以完成基本操作”。更扩展一下,这个特殊人群应该还包括老人儿童,文盲等对信息使用不擅长的人。也就是说,交互设计实用指南所定义的“可及”就是“信息可及”。具体解释为在产品设计应用过程中,应当考虑到特殊人群的使用状况,让这部分用户享受无障碍设计带来的便捷,在浏览,使用网页时能很顺畅的使用该网页所提供的相关资源。交互设计主要考虑 阅读全文
posted @ 2011-05-25 11:18 likozhang 阅读(250) 评论(0) 推荐(0) 编辑
摘要: “操作入口明确”,就是指产品的任何一个功能都要有明确、合理的入口。“操作入口”,指的是产品内部不同模块之间的转接元素,例如在Web产品中,按钮控件、输入框、文字链等都属于操作入口;“明确”指的是入口的视觉感是清晰的、可识别的;“合理”是指入口的出现是符合用户操作逻辑的,适时的。之所以要提出“操作入口明确”,是因为用户在使用产品的过程中,往往遵循的是可分析的行为逻辑。对于产品本身而言,必须有相对应的操作提示来引导用户最有效地获取信息,还原为实现层面就是明确、合理的操作入口。如果说首页是整个网站的门户,那么操作入口就是连接各个子页面的枢纽。设计师的终极目的, 就是通过对这些枢纽的优化让用户利用最有 阅读全文
posted @ 2011-05-25 11:17 likozhang 阅读(342) 评论(0) 推荐(0) 编辑
摘要: 交互设计(Interaction Design, 缩写 IxD 或者 IaD),是定义、设计人造系统的行为的设计领域。人造物,即人工制成物品,例如,软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。交互设计在于定义人造物的行为方式(the “interaction”,即人工制品在特定场景下的反应方式)相关的界面(Wikipedia)。通过对界面和行为进行交互设计,从而可以让使用者使用人造物来完成目标,这就是交互设计的目的。从用户角度来说,交互设计是一种如何让产品易用,有效而让人愉悦的技术,它致力于了解目标用户和他们的期望,了解用户在同产品交互时彼此的行为,了解“人”本身的心理和行为 阅读全文
posted @ 2011-05-25 11:16 likozhang 阅读(249) 评论(0) 推荐(0) 编辑
摘要: 公司项目需求中有一个类似于新浪微博新消息提示的定位框的效果,例如:这个在很早以前其实已经写过,请移步:http://www.css88.com/archives/1943当浏览器滚动的时候,要浮层要移除浏览器界面视区的时候,修改其position属性,让其浮动在窗口的上沿显示就可以了,position:fixed,可以在IE7+和其他浏览器下浮动层平滑固定定位,由于IE6前辈不支持fixed属性,使用position:absolute属性代替,重新计算top值。具体代码如下:01/**02* @author 愚人码头03* 类似于新浪微博新消息提示的定位框04* 更多http://www.cs 阅读全文
posted @ 2011-05-24 09:08 likozhang 阅读(685) 评论(0) 推荐(0) 编辑
摘要: 实现RIA的技术平台种类繁多,各有优缺点,但是对于不同的开发者来说,哪一种更适合呢?Rich Internet Application(富互联网应用程序,简称RIA),一种全新的Web应用程序架构,它结合了桌面软件良好的用户体验和web应用程序易部署的优点,很快获得了企业的青睐。 近年来,各大开发平台供应商相继推出新的技术来支持RIA的开发,从Ajax到SilverLight,从Apollo和AIR到Flex和Flash,从JavaFX到Laszlo,各种技术粉墨登台,以期成为大家关注的焦点。然而,作为应用系统开发厂商,开发团队和开发者,在RIA大潮中,选择什么样的技术,让自己更好地构建RIA 阅读全文
posted @ 2011-05-05 16:22 likozhang 阅读(8188) 评论(0) 推荐(0) 编辑
摘要: IE6 bug到底令我们前端开发头痛我就不多说了说实话,很多东西我一直在回避IE6的BUG,比如不用半透明的PNG。。。但是毕竟IE6还将长期存在,而且IE6在中国比例目前还绝对多数,所以我们无法回避。逃无可逃,退无可退!现整理收集《【IE6的疯狂系列】IE6 bug大全》仅供参考。如果大家发现IE6或者IE7的BUG,并愿意共享,请您留言,来邮件:feiwen8772@qq.com,或者QQ:148246293,本人将尽快总结这里,和大家一起分享。【IE6的疯狂之一】IE6中奇数宽高的BUG:http://www.cnblogs.com/liko/archive/2011/04/28/203 阅读全文
posted @ 2011-04-28 15:45 likozhang 阅读(707) 评论(1) 推荐(1) 编辑
摘要: 大家可能都知道IE6下使用DXImageTransform.Microsoft.AlphaImageLoader滤镜(用于PNG32 Alpha透明)后链接不能点击的BUG,大家也都知道只要在a标签上加相对定位的属性(position:relative)就可以点击了。见demo页面中的例子1:http://www.css88.com/demo/ie6bug_filter/(使用IE6查看);非常好!但是如果在使用滤镜容器的中加上绝对定位,悲剧发生了!a标签上加相对定位的属性(position:relative)链接依然不能点击!见demo页面中的例子2:http://www.css88.com 阅读全文
posted @ 2011-04-28 15:41 likozhang 阅读(300) 评论(0) 推荐(0) 编辑
摘要: 还真不知道这个题目这么写,暂时就用这个吧。今天同事给我看了一个display:none引起的3像素的BUG,非常奇怪!从来没碰到过display:none还能引起这种bug。看代码:1<divstyle="width:300px; margin:20px; border:1px solid #000; overflow:hidden; zoom:1;">2<divstyle="background:green; width:10px; float:left; height:300px;"></div>3<divs 阅读全文
posted @ 2011-04-28 15:40 likozhang 阅读(423) 评论(0) 推荐(0) 编辑
摘要: 一 css的优先级今天有人跟我说css hack中用!important来区分ie6,因为ie6不支持!important,是的在很早以前我也是用过这种方法写hack,但是后来就基本不用了。本来我对他谁的ie6不支持!important也没什么异议,可是正好在前几天正好用个这个!important属性解决了一个样式优先级的问题,而且是支持ie6的,这是为什么呢?到底ie6支不支持!important呢?首先我们来看看!important这个属性的作用:!important是用来提升样式优先级的,我们知道样式是有优先级的。我们先看看css的优先级的几个基本的规则:ID选择器(形如#id{}) & 阅读全文
posted @ 2011-04-28 15:39 likozhang 阅读(243) 评论(0) 推荐(0) 编辑
摘要: 在前端开发中,经常会用到css的position:absolute来使层浮动,前通过left,top,right等属性来对层进行定位,但ie6对left,top,right等属性的解释和ie7,ie8及firefox、chrome等不一致。在父层使用position:relative;和padding(当然0值除外)后,ie6中层的定位起始坐标是从padding后的位置算起,而其他则从层的真实位置算起,而非被padding改变后的那个位置。这点造成使用position:absolute进行层定位时ie6与其他浏览器的表现不一样。目前解决办法,使用csshack,_left针对ie6进行重设。另 阅读全文
posted @ 2011-04-28 15:38 likozhang 阅读(747) 评论(0) 推荐(0) 编辑