在做视觉设计时,如何高效地使用图标是一门学问:该使用什么样的图标?图标该放在哪里?大小如何?图标的使用是否帮助用户更好更快的理解内容,亦或是增加了他们的理解负担甚至产生误导?今天恰好看到了一篇很好的文章,可以帮助我们了解该如何使用图标来支持内容,故翻译如下:

为什么使用图标?设计就是传达信息:如果你的网站不能吸引用户,这个问题不在于你分享的信息有多重要、有多刺激。在访问一个网站的最初,大多数用户首先扫描页面来寻找视觉上看着有趣的内容,只有某些事物引起了他们的注意力,他们才真正开始阅读。图标是一个简单、有效的方式吸引用户阅读你网站上的内容。


More »

原则:

1. 我们测试的是产品可用性,不是使用者的个人能力

2. 尽量不要打断用户的操作

3. 尽量让用户独立完成

4. 测试环境和场景任务应当尽量符合用户使用产品的真实环境

5. 要让测试用户感觉到自己是被充分尊重的,尽量使其心情平和放松

其他:

1. 每次用户测试前先要把测试用电脑的缓存和历史记录清除。

2. 测试前一定要做预测试,把发现的问题记录下来,并在测试前把问题解决。

3. 用户到体验室后,不要马上开始,先和用户聊聊天,拉拉家常。让他放松,告诉用户先休息几分钟,过会我们正式开始,再向您介绍本次测试的主题等等。考虑准备一些和用户的沟通的东西。

4. 要和用户说明本次测试的产品、测试的目的、和测试大致的步骤以及可能花费的时间。

5. 注意和用户沟通的语气,语速要慢。如果担心用户对自己表达的内容没有完全理解,可以说“我把我的意思表达清楚了吗” 和用户说话时要尽力看着用户,保持微笑。

6. 过程中请尽量不要打断用户。

7. 用户碰到问题情绪记得事先安抚用户。如“这个问题很多用户都碰到了”或“这个问题不是很重要,我们先放放。”


More »

这周心血来潮,翻看了现在比较流行的几个JS脚本框架的底层代码,虽然是走马观花,但也受益良多,感叹先人们的伟大……

感叹是为了缓解严肃的气氛并引出今天要讲的话题,”javascript面向对象编程”,接下来,我们围绕面向对象的几大关键字:封装继承多态,展开。

封装:javascript中创建对象的模式中,个人认为通过闭包才算的上是真正意义上的封装,所以首先我们先来简单介绍一下闭包,看下面这个例子:

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">// < ![CDATA[
  function myInfo(){
    var name ="老鱼",age =27;
    var myInfo = "my name is" + name + "i am" + age +"years old";
    function showInfo(){
      alert(myInfo);
    }
    return showInfo;
  }
  var oldFish = myInfo();
  oldFish();
// ]]></script>

是不是很眼熟呢?没错了,这其实就是一个简单的闭包应用了。简单解释一下:上面的函数myInfo中定义的变量,在它的内嵌函数showInfo中是可访问的(这个很好理解),但是当我们把这个内嵌函数的返回引用赋值给一个变量oldFish,这个时候函数showInfo是在myInfo函数体外被调用,但是同样可以访问到定义在函数体内的变量。oh yeah!

总结一下闭包的原理吧:函数是运行在定义他们的作用域中而不是调用他们的作用域中。其实返回一个内嵌函数也是创建闭包最常用的一种方法!

如果觉得上面的解释太抽象的话,那么我们一起重塑上面的函数,看看这样是否层次鲜明一些:

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">// < ![CDATA[
  var ioldFish = function(name,age){
    var name = name,age = age;
    var myInfo = "my name is" + name + "i am" + age +"years old";
    return{
      showInfo:function(){
        alert(myInfo);  
      }
    }
  }
  ioldFish("老鱼",27).showInfo();
// ]]></script>


More »

这一段时间,我在进行“09帮助中心升级”项目,负责其中的白板和视觉设计,总算和Axure有了第一次的正式会晤。由于之前已经零散地学习过一些Axure的基础教程,也因Axure易用性还是挺高的,在制作大部分白板时,倒也得心应手。可…制作某个页面白板,需要使用Tab页签的时候,我碰到了问题--我不想通过刷新页面来达到效果…于是,我在网上寻求解决方案,找到了一大堆用Axure制作的Tab页签的样例文件和Axure源文件,可对于新手用户来说,理解起来还是有些困难。揣摩一番后,我总算明白了如何制作,现把整个过程整理了一下,希望能对同为新手的朋友有些帮助。(在往下看前,您需对Axure的工作环境有大致的了解,在此,我不对其进行讲解了^_^)

在制作这个教程时,我使用的是Axure RP Pro 5,为了让教程更简单,我们这次制作的Tab只有3个页签,分别为tab 1、tab 2、tab 3。

第1步:

拖动widget面板中的Dynamic Panel控件到线框图工作区中(如图1) ,蓝色区域的大小由我们要制作的Tab页签的大小决定,超出蓝色区域的元素皆不显示。

图1

第2步:

双击动态面板(即蓝色区域)打开一个动态面板状态管理器(Dynamic Panel State Manager)对话框,在对话框中你可以创建、重命名、重新排序、删除和编辑动态面板的状态(如图2)。

图2

为了便于记忆,我们对动态面板状态管理器进行以下编辑(如图3):

a.在Dynamic Panel Label中输入“Tab页签设计”(可依据你的喜好设置,最好能易识别和记忆)

b.单击“state 1”,呈选中状态,点击右侧“Rename”按钮,重命名为“tab 1”

c.在 Add new state的右侧输入框中输入“tab 2”,点击“Add”按钮。重复操作,添加“tab 3”。

图3

第3步:

双击动态面板状态管理器(Dynamic Panel State Manager)中的“tab 1”,在蓝色虚线框内绘制tab 1的页面,效果如图4。

图4

第4步:

a.选中含有“tab1”文字的上圆角矩形框,双击控件交互面板(Annotations&interactions)中的OnMouseEnter(这个教程是通过鼠标的滑动来切换各个页签,如果想通过鼠标点击进行切换,则双击OnClick),弹出交互场景属性面板(Interaction Case Properties),在面板中的step2中勾选Set Panel state(s) to State(s)相应的,会在step3中出现“Set Panel state to State”(如图5)。

图5

b.点击Panel state to State,弹出Set Panel state to state面板,勾选“set Tab页签设计state to state”,此时,step2中出现“Set Tab页签设计 state to tab 1”,单击tab 1,选择要显示的状态,这里选择tab 1。

同理,为含有“tab 2”和“tab 3”的上圆角矩形框添加交互行为,只是在b步骤中单击tab1选择显示状态时,分别选择tab 2、tab 3。效果如图6

图6

第5步:

全选tab1页面,ctrl+c复制。双击“动态Tab页签设计”动态面板,弹出动态面板状态管理器(Dynamic Panel State Manager)对话框,在panel state中双击tab 2,ctrl+v粘贴tab1页面。更改tab1上圆角矩形和tab2上圆角矩形的填充色,并更改内容。效果如图7所示。

图7

第6步:

依据第5步的操作,我们完成tab 3的设置。

第7步:

点击主菜单―Generate->Prototype (F5)或工具栏上的Prototype按钮,在打开的 Configure HTML Prototype对话框中,可以对原型进行配置和生成。配置完毕后,点击Generate按钮生成原型。

完毕,bow~

RegExp对象的语义和使用:

  • 检查字符串匹配
  • 获取字符串中的部分内容
  • 在原字符串的基础上构建一个新的字符串(包括添加、删除和修改)

构建一个RegExp对象主要有两种方法:

  • 使用literal,如/\w/g
  • 使用构造函数,如 new RegExp(/\w/)

构建RegExp对象有以下几个注意点:

  • literal常用来构建非runtime产生的静态的RegExp对象
  • literal之后可以直接添加flag用来对匹配字符串的执行结果进行限制,常用flag包括g和i,分别用来表示全局匹配(global)和忽略大小写匹配(case-insensitive)
  • RegExp构造函数的第一个参数提供该对象的pattern,如果pattern是一个RegExp literal,那么就不能提供第二个参数(即指定flag)。如果pattern是一个string,那么可以使用第二个参数
  • RegExp构造函数常用于构建runtime产生的动态RegExp对象
  • RegExp的pattern为string时所有literal中的”\”都必须写成”\\”,因为”\”在string中需要被转义
  • 以上两种方法构建的都一个javascript对象,因此/\w/ == /\w/返回false


More »

Page1...34567...11