随笔分类 -  用户体验与交互设计

IE将不再悲剧？
摘要：IE将不再悲剧？ 作者：瓢瓢日期：2010年09月14日分类：前端制作 从事web前端开发1年有余，从最初的div+css，再到现在接触js。对浏览器的认识也从IE开始，说来惭愧Chrome，Safari， Opera 由来已久，我却是因为找参考才关注了一下。 取自John Martz印象深刻的一则漫画，其他浏览器排挤可怜的IE6，让它赶紧回家吃饭，而IE7躲起来装打酱油的。 ... 阅读全文
posted @ 2010-09-29 10:48 白羊与晚霞 阅读(230) 评论(0) 推荐(1)
视觉焦点-剖析网页设计中的几何圆
摘要：视觉焦点-剖析网页设计中的几何圆 作者：叮叮日期：2010年09月27日分类：视觉设计 你的设计为什么平平无奇，为什么吸引不到别人的眼球，这里先来说说什么是焦点（也可以称兴趣中心或者视觉中心），我认为用焦点更能简单准确的阐述。 有人用通俗的方法来诠释焦点，在设计的页面上最吸引人注意的地方，视线上集中交汇的地方，这个位置就叫焦点，在日常生活中我们运用照相机对准人的脸部，那 也是在... 阅读全文
posted @ 2010-09-29 10:06 白羊与晚霞 阅读(269) 评论(0) 推荐(0)
前端开发中的一些用户体验细节
摘要：前端开发中的一些用户体验细节 作者：Jason日期：2010年09月27日分类：前端制作 用户体验已经是一个老生常谈的话题了。我非常赞同某位达人所说的，用户体验设计应该贯穿于产品从萌芽到出生的整个过程，产品原型、视觉设计、前端开 发、后端开发甚至还包括产品测试大家都应该有份。只有各个环节的同学都把这个事儿当事儿了，那么做出来的产品才有可能是好产品。我想，UED团队在这个过 程中... 阅读全文
posted @ 2010-09-29 09:54 白羊与晚霞 阅读(295) 评论(2) 推荐(2)
什么是CSS Sprites？
摘要：“Sprite”(精灵)这个词在计算机图形学中有它独特的定义，由于游戏、视频等画质越来越高，必须有一种技术可以智能的处理材质和贴图，并且要 同时保持画面流畅。“Sprite”就是这样一种技术，它将许多图片组合到一个网格上，然后通过程序将每个网格的内容定位到画面上。 Sprite被定位到一副静态图片上，并且通过简单的程序或硬件即可正确定位到画面上，一... 阅读全文
posted @ 2010-09-21 18:06 白羊与晚霞 阅读(512) 评论(0) 推荐(1)
火狐firefox,IE,网站变灰变黑兼容代码
摘要：内容提要： 大家都知道在IE浏览器中，可以使用一段代码 body {filter: gray;} 用微软的滤镜代码将网站整体去色成为黑白灰色调效果，但是并不兼容firefox等其他非IE浏览器。 　　大家都知道在IE浏览器中，可以使用一段代码 body {filter: gray;} 用微软的滤镜代码将网站整体去色成为黑白灰色调效果，但是并不兼容firefox等其他非IE浏览器。 C... 阅读全文
posted @ 2010-09-16 17:34 白羊与晚霞 阅读(1219) 评论(0) 推荐(1)
中国移动设备用户体验调研报告
摘要：blog, 手机mobile, 用研与可用性, by 张雅秋. 　　本文的目的：向不了解中国移动市场却感兴趣的开发者们介绍市场状况。 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　—— 翻译原文来自Nokia Forum 　　中国消费者多数为手机的重度使用者。例如：手机的娱乐和上网功能被广泛使用。比起西方用户依旧停留在仅使用接听和短信功能阶段，中国用户更喜欢... 阅读全文
posted @ 2010-09-07 11:38 白羊与晚霞 阅读(475) 评论(0) 推荐(0)
用户是如何浏览你的网站的
摘要：事实上，互联网用户浏览网页的习惯和顾客浏览商店中物品的习惯没有多大差别。用户打开一个新的页面，扫视一些文字，并点击第一个引起他兴趣的链接。在 这过程中，页面上有大量的区域用户甚至完全没有看过。大部分用户在页面上寻找他感兴趣且可点击的内容，一旦发现目标，点击行为就会发生，但如果页面不符合 期望，后退或关闭按钮也将马上被点击。 用户是如何浏览你的网站的 1. 大部分时候用户并非在阅读屏幕上的内容，而... 阅读全文
posted @ 2010-09-07 11:13 白羊与晚霞 阅读(201) 评论(0) 推荐(0)
Web设计精确点滴
摘要：这篇文章说实际问题的，所以不多强调，下面是我总结的一些比较突出的细节问题，而且我一直认为这些问题比较严重，正因为这些都是基本问题，很容易解决的，但把这种忽略养成一种习惯性的“经验”那就“杯具”了，然而这些细节问题也不同程度的代表了你的工作态度。1)调整后的毛边当对一个位图的大小进行调整后，正常情况下会留下1px的毛边（如果你注意的话），边界会变得模糊... 阅读全文
posted @ 2010-09-07 11:11 白羊与晚霞 阅读(145) 评论(0) 推荐(1)
Hello! 404
摘要：1. 什么是404 404是一个 http 错误代码，即请求的网页不存在。代码404的第一个“4”代表客户端的错误，如错误的网页位址；后两的数字码则代表着特定的错误讯息。就是当用户输入了错 误的链接时，返回的页面。这样的目的是告诉浏览者其所请求的页面不存在或链接错误，同时引导用户使用网站其他页面而不是关闭窗口离开。 Google简洁的页面与的品牌精神是一致的，包涵基本的... 阅读全文
posted @ 2010-09-07 11:09 白羊与晚霞 阅读(209) 评论(0) 推荐(0)
Web2.0网站趋势分析
摘要：先推荐两个经常介绍Web2.0网站的博客，大家可以直接通过rss订阅。　　分享网络2.0博客：http://www.showeb20.com/　　天涯海角的博客:http://www.web20share.com/ 　　随着大量的web2.0应用被大家接受，我们可以先在豆瓣网看书评后再到卓越或当当买书，在豆瓣网记录我们的阅读过程，参加相应的小组或线下活 动。可以在优酷等视频网站看视频，在各个微博... 阅读全文
posted @ 2010-09-02 15:00 白羊与晚霞 阅读(196) 评论(0) 推荐(0)
页面表达常用方式 （一）
摘要：《页面表达常用方式》是整个“web交互设计方法”中的一部分： 设计师在设计页面时，应该在页面上建立许多视觉层次，引导用户的视觉焦点。把用户的注意力吸引到最重要的元素上，然后才把视线引导到其他重要程度次要的信息上。这样便于用户快捷迅速地找到自己所需，更好的完成阅读、浏览任务。这里介绍几种页面表达的常用方式。 一、页面的浏览顺序 对用户扫描页面的时候进行视线跟踪，这叫做... 阅读全文
posted @ 2010-09-02 14:57 白羊与晚霞 阅读(209) 评论(0) 推荐(0)
Web开发者必须收藏的十大网站
摘要：编辑点评：文中概述了10个工具网站，对提高Web开发者的开发效率和质量非常有帮助。 　　对我们这些Web开发者来说，不计其数的网站，其中有些对我们来说是相当有用的工具。在本文中，我汇编了10个顶有用的网站，可以说每个开发者都应当将这些网站存为自己的书签。 Mysql Format Date　　MySQL Format Date允许你利用MySQL DATE_FORMA函... 阅读全文
posted @ 2010-09-02 14:48 白羊与晚霞 阅读(286) 评论(0) 推荐(0)
从大屏幕到小屏幕迁移的三种设计方案
摘要：由于手机终端纷繁复杂，各种分辨率的屏幕，各种适配不同机型的特殊规则，都对手机网站的设计提出了更多的要求。大屏幕上已有的网站向小屏幕的设备上迁移，是需要经过一些调整的，今天就来探讨三种可用的迁移方式。 拍扁式 手风琴式 棋盘式 一. 第一种 拍扁式 这种形式最简单，也是目前web迁移到wap采用的最多的一种形式，就是把主流的1:2:1三栏布局的web网页拍扁成一个线性的一维的wap页面，比如看这张图... 阅读全文
posted @ 2010-09-02 14:46 白羊与晚霞 阅读(309) 评论(0) 推荐(0)
手机接触点击区域参考值
摘要：屏幕增大，可以显示更多的内容，但是使用触摸屏控件的密度不宜过大，否则不便点击。各个手机和PC操作系统都对可点击的区域都有推荐值： iPhone：最小29×44px。 Windows Phone：推荐9mm/34px，最小7mm/26px，元素之间的距离最小7mm /26px，元素的可视区域是点击区域的60-100%。对于经常使用、会导致危险性操作（比如删除数据）的界面元素、在屏幕角落并且... 阅读全文
posted @ 2010-09-02 10:31 白羊与晚霞 阅读(903) 评论(0) 推荐(0)
弹出窗口与切换页面的对比总结
摘要：分享较早前的一个小总结，关于在选择弹出窗口还是选择切换页面来承载信息时，可用用来判断的几个角度，合适初学者来读。1.弹出窗口与切换页面的区别1） 操作的连贯性 弹出窗口的速度会比打开一个页面的速度要快，响应更及时一些，点击后可以比较快的得到操作的反馈，而切换页面则经常会让用户等待一段时间。实例一：个人中心中，查看好友照片的操作：之前查看照片的操作页面会跳转到该好友的空间“相册̶... 阅读全文
posted @ 2010-09-01 16:17 白羊与晚霞 阅读(337) 评论(0) 推荐(0)
一路走来！-手机QQ游戏2008~2009UI设计分享
摘要：最初 　　在2008版本之前，这个项目都没有UI设计的加入，所有UI界面都是开发自己拼图绘制而成，虽然不是很美观，但是基本功能还是比较完善，依托公司这个大的平台，有一定的用户基数。 接触： 　　刚接触需求的时候还未入职，以前也一直是从事大型网游UI的设计工作，对手机UI的还不是很了解，不过生活就是不断挑战嘛！就根据自己的想法做了几个风格稿，分辨率是176×208，因为当时自己用的手机w5... 阅读全文
posted @ 2010-08-24 18:02 白羊与晚霞 阅读(205) 评论(0) 推荐(0)
浅谈设计的一致性与用户需求
摘要：这两个概念在一般情况下不矛盾，都是满足用户需求，操作一致就好了。但出现矛盾的时候，该怎么办呢？ 在QQ阅读2期中，我们要支持3套皮肤，7套阅读背景。如果是其他公司的产品，没什么可矛盾的，换肤就是换肤，换背景就是换背景。但在QQ软件symbian平台中有一条不成文的规定——0键换肤。这时问题就来了，阅读页面的时候，0键换什么。 公司角度来讲，一致性肯定比较重要，从手机QQ到手... 阅读全文
posted @ 2010-08-24 17:54 白羊与晚霞 阅读(238) 评论(0) 推荐(0)
WAP2.0网页设计中的交互细节
摘要：适配竖屏横向尺度，禁止出现横向滚屏 　　常规QVGA机型竖屏状态下，14号字体，单行仅显示13.5个字。资讯频道的新闻短标题要控制在13字以内才能在一行以内完整显示。标题折行会造成在相同空间承载信息量减少；频繁的眼动容易引起视疲劳；在视觉上带来无序松散的感受。 焦点跳转的频度 　　对非触屏手机，在不影响功能交互的前提下，应尽量减少按键做功。不同的浏览器，通过五向键操纵焦点的跳转方式是有差异的。 ... 阅读全文
posted @ 2010-08-24 17:33 白羊与晚霞 阅读(425) 评论(0) 推荐(0)