文章标签 ‘交互设计’ 的存档

• 交互设计小贴士

  日期：2009.11.15 | 分类：交互设计 | 评论数：0

  通过创建一个“备忘箱”或剪贴簿来存放你曾经尝试或在别处见过的东西，从而构建你自己的设计观点和方法的档案库。在里面加入一些摘自于杂志和研讨论文的图片、草图和剪辑。经常翻阅它，并反思一下从中你可以学到什么。同时，把你的个人资源与你的同事分享。

  在一个设计项目中，保存你提出的所有东西。你会很容易忘记将过程归档。当你迫切需要某个东西时，白板上却长期空空如也，没有起到提醒的作用。在每天工作结束时，让工作小组的每一名成员审视一下这个记录，并从中选择一项作为第二天讨论的第一件事情。如果你设计的每一个方面都不能合理地说明这个历史记录的一些相关内容，那么，你得仔细思考你的设计是如何进行的。

  时刻关注生活——读一些有关建筑学、人文科学、经济学的书籍和一些最新科学和社会学的调查结果。大量的报刊杂志都会在这方面对你有所帮助——例如：《经济学家》、《新科学家》和《墙纸》。但是要记住，同时精通人文科学和自然科学的人寥寥无几——你周围的其他人将可能补充你的设计。

  如果你的设计中没有将现场（如人种学的观察值和在现场的纵向评估）和非现场（如现场后数据分析和实验室试验）放在同等重要的地位，那么你应当考虑矫正这两点的平衡。
  把程序设计员纳入设计过程中。这样做不仅是因为你想进行联合讨论，而且还因为计算机科学——它就是关于如何对资源和复杂性进行管理和组织的——会提供很多关于如何构造一个界面的信息。

  原文来自Matt Jones和Gary Marsden的《移动设备交互设计》P119

• 关于top置顶的交互体验

  日期：2009.11.07 | 分类：JavaScript, 交互设计 | 评论数：0

  “TOP置顶”这个大家我想都不陌生，一般都用在网站底部，起到快速返回页面顶部的作用，节省用户浏览页面的时间。

  谈谈我的一些体验吧！

  先看当下一些的网站对“top置顶”的应用:

  大家熟悉的QQ校友

  

  QQ空间

  

  飞跃梦想博客(这个风格好像很多人都在用哦)

  

  他们都有一个共同的体验，那就是给用户一个缓冲的过程，而不是直接飙到顶部。

  大多的网站应用方式都是直接给个空的链接，如：href=”#”;这样的置顶很僵硬，很呆板。

  本博客底部就用到的缓冲的体验效果，大家不妨看完本文去体验一下哦

  说了这么多，还没告诉大家如何去实现，方法有点小难度，当然对于js比较牛的人来说，那就小菜一碟了。。

  只看代码：

  /**
   * 回到页面顶部
   * @param acceleration 加速度
   * @param time 时间间隔 (毫秒)
   **/
  function goTop(acceleration, time) {
  	acceleration = acceleration || 0.1;
  	time = time || 16;
  
  	var x1 = 0;
  	var y1 = 0;
  	var x2 = 0;
  	var y2 = 0;
  	var x3 = 0;
  	var y3 = 0;
  
  	if (document.documentElement) {
  		x1 = document.documentElement.scrollLeft || 0;
  		y1 = document.documentElement.scrollTop || 0;
  	}
  	if (document.body) {
  		x2 = document.body.scrollLeft || 0;
  		y2 = document.body.scrollTop || 0;
  	}
  	var x3 = window.scrollX || 0;
  	var y3 = window.scrollY || 0;
  
  	// 滚动条到页面顶部的水平距离
  	var x = Math.max(x1, Math.max(x2, x3));
  	// 滚动条到页面顶部的垂直距离
  	var y = Math.max(y1, Math.max(y2, y3));
  
  	// 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小
  	var speed = 1 + acceleration;
  	window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
  
  	// 如果距离不为零, 继续调用迭代本函数
  	if(x > 0 || y > 0) {
  		var invokeFunction = "goTop(" + acceleration + ", " + time + ")";
  		window.setTimeout(invokeFunction, time);
  	}
  }
  

  调用：

  TOP
  

  大家慢慢研究一番就明白了哈。。

  给看下效果：

  http://www.86ue.com/download/blog/200911/top.html

  看完货效果不错吧。

  PS:兼容IE6/7 火狐3.5以上版本

• 交互设计表格

  日期：2009.11.05 | 分类：交互设计 | 评论数：0

  说：在一个房间里丢了一根针，你需要找到它，你会用什么办法？
  答：扫把；吸铁；放大镜。。。粉笔。。。
  Ok，使用粉笔？请看下图↓

  

  划分区块，每个找过的地方做个标志。可能不是很快找到，但绝对有效。表格能确保我们不遗漏。

  说：2个山，能组成几个字 ？
  答：出，屾，王。。。（我继续想想）
  Ok，我们使用表格。

  

  正常的应该都出来了吧。不是每个人都才思敏捷，但表格能帮我们穷举，得出正确结果。

  回到主题，我们说说交互设计表格。
  先说交互设计师的烦恼：
  你是不是常常觉的状态没有考虑全，一遍一遍的琢磨？
  你是不是常常觉的跟需求方交流费尽口舌，对方还糊涂？
  你是否常常一个接一个的场景描述，且大部分都是重复的文字？
  Ok，我们来看下交互设计表格能否解决我们的大部分烦恼。

  表格说明：划分2个纬度——页面元素和用户行为。最左边一列是页面可见元素（包括光标）；最上面一行，是用户的行为（尽量按操作流程）。中间交叉的为场景描述。

  举例分析：客户端的二级登录

  

  针对以上内容，交互设计表格（只针对交互内容）如下↓：

  

  表格中提到的状态图如下：

  ↓图例1：未行动

  

  ↓图例2：请您输入用户名

  

  ↓图例3：X密码有误，请重新输入

  

  ↓图例4：正在登录

  

  ↓图例5：！超时，请重新登录!

  

  此方式，在工作中，运行良好。利于检测和交流。

  ok，希望交互设计表格能对你也有帮助。

  感谢：http://ued.icafe8.net 分享