理论:与用户体验的这两年

所属分类: 网页制作 / 应用技巧 阅读数: 1601
收藏 0 赞 0 分享

国内网站真正流行并重视用户体验不超过两年,我相信大部分从业者的研究资历也仅限于此。区别在于,因功底和个体差异影响到的对新概念的理解突破,我的经历大概可以从两个方面来描述:
概念理解:用户体验 —— 以用户为中心 —— 交互设计 —— 信息架构
实践操作:目标 —— 流程 —— 方法 —— 交付物 —— 产品管理
2005年初,在Google搜索结果里链接到的UIGarden第一次看到“用户体验”,那会儿的真实感受,就是作为互联网用户的我们,终于有人关心了。最想做的事情,就是把我常上的那几个网站的设计师拎过来,海扁一顿。

到现在为止,“用户体验”还是最热的口头禅。究其原因,主要是这个词深得人心、朗朗上口,只要说的时候表情严肃点,形象就很专业了(屡试不爽),而且还绝对挑不出逻辑错误。其实就是看似石破天惊,仔细推敲等于啥也没说的典型。
带着这样那样的疑问,我开始试图去了解我们的用户,尝试“以用户为中心”。虽然我不知道用户是谁,但有个基本原则,我是互联网用户,如果我自己都没有满意,凭什么让我的用户满意。老朋友白鸦、臭鱼他们也是这个阶段认识的,那会儿能写的知音很少,几个人凑一块儿,除了抱怨更多的是感慨。
很快,我发现对于操作级的用户体验,绝大部分的用户感受是相通的,反正就是“避免麻烦和制造方便”两个角度,后来才知道这门学问叫“交互设计”。于是在交互思想的引导下,做了很多功课,因为我必须去理解,为什么这么做的体验好?从一个点深入下去,可以拖出来很多东西。
交互交互,显然至少得两个对象,我喜欢用“回合”这个词来量化。比如我用鼠标碰到了某个链接,然后它下划线消失了,这个回合的概念就是我打招呼别人答应。我们都知道,两个人交往,最可恶的就是不表态,不接招也就没破绽。
可能大部分从业者了解用户体验,都是通过“交互设计”的概念。而且在国内流行的相关专业书籍里,也是交互设计占的比例和质量最高,比如《About Face》等重量级权威著作。但是在实践几个阶段后,我慢慢发现,交互设计并不能解决所有问题。比如设计分类的操作模式,交互其实很简单,真正的难点在于拿什么来交互?他们之间的关系如何处理?
2006年初,偶然写了篇Yahoo!的项目工作流程介绍欧洲流程,同行反应出奇的强烈。因为在此之前,大家的意识基本局限在网站只有前后台之分,再细点前台还有结构、表现、行为之分,但都没有上升到产品的高度,也就是说还没有系统理论做支撑。
也是在这份Yahoo!欧洲流程里,我注意并意识到“信息架构”的重要性。查阅大量资料后,5月份写了篇网站的信息架构来阐述自己的观点,但还是不清楚如何把这门综合学科的思想落实到产品概念,与交互如何协作和迭代?如何呈现?
再往后就是漫长的实践过程,优化方法并提高效率。看书除了能见见世面,更重要的是验证自己的想法。在与作者产生共鸣的同时,想清楚为什么,比如最近读的这本《用户体验的要素》,对结构层主要是清晰我的理解,对框架层几乎是重建知识结构,之前的认识太浅散。
曾经设想过某种产品文档的来保证设计实施,贯穿到以产品为中心的开发模式中。因为不管信息架构还是交互设计,结果都会落实到交付物,不然无法把设计结果传达给其他人,也就是说工作无法量化。
线性流程没有高低之分,体现自己的价值,不是说就得否认别人的工作成果,因为我们是团队。各位或许不知道自己的强项,但一定要明白最适合做什么。同样的道理,理解概念不应该尽量扩大一个点,而是搞清楚这个点在整体当中的位置。曾经不管是对搜索引擎优化的偏见,还是对交互设计的怀疑,都源于此,精确定位才有助于正确理解和分工协作。
最后,回到2004年讨论《网站重构》的时候,Web Standards提倡的全兼容无障碍,其实就是以用户为中心思想的一种实施,也讲究用户体验。类似的话题很早就有了,只不过我们大家都没有参透。
更多精彩内容其他人还在看

网页设计技巧:iframe自适应高度的问题

所谓iframe自适应高度,就是,基于界面美观和交互的考虑,隐藏了iframe的border和scrollbar,让人看不出它是个iframe
收藏 0 赞 0 分享

网页色彩对比与调和技巧分享

在对比状态下,色彩相互作用与单一色彩所带给人的感觉不一样,这种现象是由视觉残影引起的。当我们长时间注视某一彩色图像之后,再看白色背景时,眼前会出现色相、明度关系大体相仿的补色图像
收藏 0 赞 0 分享

网页色彩性质的分类

任何颜色都可以使用三原色——红、绿、蓝组合而成,三原色中只有红色是暖色,所以要判断作品颜色的冷暖,可以依据红色成分的多少而定。色调主要由明度与彩度组合而成,用来表示颜色的状态
收藏 0 赞 0 分享

使用Photoshop 制作网页线框图简单实用

这篇文章向大家介绍一套免费的Photoshop 线框图套件,这个线框图套件中包括通知、图片和视频,表单字段,标题,段落,项目符号列表,导航,广告横幅和普通网站的元素,如:搜索框,电子邮件注册表单等等
收藏 0 赞 0 分享

CSS使用技巧总结

偶尔看到一篇CSS常用技巧的总结文章,本人整理了一下,晒出来和大家分享,希望可以帮助你们
收藏 0 赞 0 分享

Web设计师如何制作Retina显屏设备的图片

到目前为止,我们知道苹果设备中支持Retina屏幕技术的有“iPhone”、“iPod”、“iPad”和“Macbook Pro”,这些设备能为用户呈现更细腻、平滑和高质量的图片效果,提高了用户的视觉体验。做为一名Web设计师如何为你的网站创建这些适合Retina显屏设备的图片呢
收藏 0 赞 0 分享

JPG,GIF及PNG各类型的图片格式详细解说

大家都知道网页上面的图像一般用jpg、gif和png这几种格式,他们有什么区别以及在什么场合下使用进行详细介绍看了下面的内容后你可能会有了自己的结论
收藏 0 赞 0 分享

组件化的前端开发流程详细说明

做前端的同学都知道,做的页面多了,东西就会乱,因此我们需要统一一个开发流程,开发流程的好坏,直接影响着页面开发的效率,间接影响游戏的时间为了更好的开发,我们做了一下总结
收藏 0 赞 0 分享

我们在囧途之UI工程师职业感慨

我是一名还不算特别优秀的UI工程师;这个要先说明一下UI不是美工,美工是以图片方案设计为主的岗位,而UI是指用户交互体验的设计
收藏 0 赞 0 分享

分享8款提高网页设计出色的CSS工具

当一个人需要编辑或修改网站设计,CSS发挥着重要的作用;今天就给大家分享8款非常出色的CSS工具,这些工具都是很出名的,能够解决开发当中常见的棘手问题,希望对你开发有所帮助
收藏 0 赞 0 分享
查看更多