程序是表达思想的媒介，程序员就是把美好的思想翻译成为良好代码的翻译。

网页常用操作：

布局：

为form或者各种元素来布置他们的位置，其实这里不仅仅是位置这么简单，还潜在的包含了逻辑的分析和组合。所以布局不仅仅是为了好看，而且是为了方便理解。方便表达其最真实的本意。
常用的布局：

行：充满父容器的一行，一般用div即可满足

列：充满父容器的一列，可以用table单列布局，或者div浮动布局（inline-block问题多多，当然如果浏览器的兼容要求不高，那么也可以考虑使用inline-block）

段：宽度填充满父容器，但是高度占用多行，比如p标签即是如此

块：占用父容器的一定宽度和一定高度（某些行某些列），比如行内块（span），用div可以模拟

通过对上面的这些描述，可以发现，这些东西要想整齐呢，就要和父容器的行高，列宽对齐。可以想象父容器内部有N多的参考线，然后这些元素布局都和某些线进行对齐即可

渲染：

渲染我的理解就是把设计好的布局和元素显示在页面上。那么渲染可以认为是布局的实现。页面整个加载过程呢，可以认为是对页面上每个元素进行渲染，当这些元素都渲染完成后呢，整个页面也就是完成了。
鉴于程序是表达的这个基础，我为渲染增加了额外的内涵。渲染不只是对渲染元素这么简单，因为页面的元素之间是有关系的，比如table一行的数据，所以放到一行，因为这一行东西一般描述了一个对象的若干属性，是一个完整的内涵。渲染不仅仅是渲染元素，而且是渲染一个个的意义单元。

从这个角度看，我列出常用的意义单元：

列表：列表表示一个类型的如干候选值，他们之间的关系是平行的。候选值本身一般是一维的。那么表示出来，可以是ul，可以是select，也可以是radio，checkbox等。表示一个系列的若干值。

二维表：类似列表，但是候选值一般是多维的。如果只有一维，那么和列表就非常相似。比如，zk中的listbox可以做table也可以左select

标头：一般是简短的文字，用来对网页的结构进行分隔，说明整个网页的内容结构。

标签：一般是简短的文字，用来对后面或者下面的元素进行说明，一般用在form表单中居多，用来说明输入栏位的用途

提示：一般是对标签的补充，或者其他提示信息，比如title，比如alert等

表单：是收集用户资料，用来检测用户需求的地方

文本：大段的文字，一般是在论坛或者博客中，是长篇的正文

插图：额外的相关图片，用来说明文本。文本不同，插图会相应的变化。

图标：与其他提示性元素比如按钮，标头，标签等配合，用来加深对此作用的理解，如果使用不当，反不如不用。一般图标在整个网站构建中是稳定的，风格统一的。

交互：
我认为交互就是大家根据自己的经验和理解，在对网站获取足够的理解后，对网站进行的操作或者探索性操作。对于大多数人来说，交互式通过鼠标或者键盘操作的（触屏）操作的。操作者对页面进行操作的是根据自己的理解，换句话说是根据自己的思想，所以可以这么认为，每次操作时操作者意图和思想的一个体现。由此呢，也和最初设计网页的意图不谋而合。

所以，合起来看，交互就是操作者得思想和设计者（实际上是开发者）思想进行的交互。 @** @（也许以后会发明脑波控制技术，不用动手，这样就真的是两者思想的交互啦！！）。那么再看，设计者表达思想是通过对网页的布局和渲染来表达的，而操作者交互式通过鼠标和键盘表达的，因此呢，中间有需要有个东西来把这个东西衔接起来，即是把网页元素和浏览器事件关联起来。

网页元素和浏览器事件的关联的目的是检测操作者表达的思想。

可以想见，如果一个无聊透顶的人，拿着鼠标乱晃，其移动的轨迹和频率和一个目标明确（比如查询考勤异常的人）移动鼠标的轨迹和频率是完全不同的。

甚至说有些人习惯性的在阅读的时候喜欢眼球跟着鼠标（或者鼠标跟着眼球）走，碰到重点甚至用鼠标滑动或者来回的移动（考虑下那些在树上用各种颜色把自己认为重要的东西涂
上颜色的人），这样我们就可以检测到用户对那些内容感兴趣，他所关注的东西是什么。

再比如，当遇到疑问的时候，会习惯性的思考，而思考的时候，一般是不会同时进行操作的，这是鼠标是暂停的，当鼠标暂停的时候，是不是说操作者在思考，在疑惑（想想你合上书本托着脑袋思考的情形）？
再比如说，当我们查找东西的时候，或来回的翻腾，如果你发现操作者在不同的页面或者一个页面的不同部位来回的翻动时，你是不是觉得自己的导航和重要内容摆放的不是很合理？？
再比如说，当操作者再填写表单的时候，频繁的取查看title提示或者做了比较长久的停顿，那么是不是意味着表单的标签说明不够浅显易懂或者含糊不清呢？导致操作者需要思考良久来做出一个艰难的决定。

综上，可以发现为用户提供点击，输入，拖拽，滚动，跳转，等功能仅仅是让用户在做出决定后有所行动，而这些简单的东西却不能很好的反映出用户在做出决定前得思考，所以在设计网页的时候，就要想办法减少思考时间，尽量直白的表达设计思想。

那么交互设计，我认为包括两个部分，一部分是为操作者提供行为，一部分时辅助操作者进行决定（思考）。如果说程序设计是一门艺术，那么我想加上一句，它来自于生活，忠诚于生活，但是不高于生活。

从行为的角度看，常用的浏览器行为：

单击左键：

单击右键：

双击左键：

双击右键??：

键盘功能键：ctrl shift tab enter space 上下左右导航键，pageup pagedown翻页键

拖拽：有拖拽移动，有拖拽滚动，有拖拽换屏。。。。

关闭：关闭提示，窗口，广告，flash。。。

鼠标移动：

鼠标悬停：

鼠标手势??：

鼠标无节操动作：

从意图的角度看，常有的行为：

登陆：

提交：

阅览：各种弹窗，各种广告，各种晃动，各种配色！！！

注册：我是不是碰到查户口的啦

评定：万恶的验证码，万恶的会员制，万恶的等级制

上一个画面：修改？遗忘？冲突？才明白上一个画面是干嘛的！

下一个画面：

寻找：

复制：

黏贴：

编辑：

重新填写：

返回编辑：

重填某栏位：

保存：

对比：

汇总合并：

切换：

居中操作：不习惯在边边上看东西

全屏操作：不习惯在一堆额外的无关信息中看东西

选中：

查看提示、说明：

搜索：不要老给我过期的东西好不好？？01年的新闻，我去！匹配度太低？我去！！

退出：

发狂：各种郁闷直接导致发狂，直接导致无节操操作

不想透漏隐私：银行卡？密码？身份证？手机号？NO，我顶多给你个邮箱！你呀查户口呢？！

不想填写过多选项：满屏的按钮和input，头大，哥不玩了还不行？

刷新：最常见的原因就是网页打开太慢或者网页打开出现了问题

意图与行为的结合（偶也只能胡诌乱编了，所以，还是留到以后再写吧）

那么如何在没有良好规范的环境下做出良好的交互效果呢？

用户行为收集：（：） 我错了，还是不要这么干了）

虽然没有很好的办法对所有的东西进行良好的概括归纳，但是针对具体类型的应用依然有迹可循：

大量键盘输入类型应用：大量基本资料输入，键盘操作多余鼠标操作

关联编辑设置类型：一般的后台管理系统，鼠标操作多余键盘操作

搜索浏览类型应用：

数据分析类型应用：图标，曲线，对比，合并，分拆等等

评论交流bbs类型应用：大段文本和大段评论

日志博客blog类型应用：大段文本，但是少评论

短消息微博类型应用：社交性大于内涵本身

教程类型（高手）应用：制作个人教程，比如腌制泡菜等

文档分享类型（ishare）应用：

知识内容（wiki）应用：

专业提问回答（stackoverflow，知乎）应用：

视频应用：

音乐应用：

游戏：

在线办公：

....

根据应用的类型，和针对的人群，可以预测到应用的注意点（好吧这里纯属是吹牛）

控件：

你觉得你缺少的是控件吗？你觉得你了解这个控件的本身的内涵吗？

控件和UI画面只是其表，而起本身所代表的内涵才是其里。了解控件的内涵，才能在表达设计思想的时候更加顺心顺手。执着于控件和UI展示本身，而忽略了应用所表达的思想本身，很容易张冠李戴，做出不伦不类的东西。只有其型，而失去了内涵本身。正如前一部分所说，我认为应用其实就是设计者和操作者得思想碰撞，没有把握这个思想的基础上就开始做控件开始设计画面实在是缘木求鱼。

这里我仅仅列出常用的控件：

展示型控件：

图片走廊：

卡片布局：

列表：

二维表：

日历：

目录型控件：

编辑型控件：

单值录入：比如input，select ，radio等

多值录入：比如checkbox，select（可多选）等

级联录入：比如多个select的级联

区间录入：两个日历的区间录入

多key单值录入：比如根据login name email的模糊查询

勾选录入：比如checkbox

查询录入：比如根据一个关键字查询出一个对象

自动录入：根据其他栏位的值，自动填入

缺省录入：默认值

......

命令型控件：

对控件绑定了处理事件的均可以视为命令型控件，比如按钮，链接，以及可响应的其他的元素等。

==============================================================================================================================

编辑型控件的组装--功能性控件：

可编辑二维表：

可编辑目录：

可编辑组合form：

互斥列表：我有的你不能有，你有的我不能有

查询过滤选择列表：输入条件更详细，则执行过滤，输入条件更简略则执行查询；或者每次都查询

... ...

可编辑型（或组合）控件的值版本：

初始值：会有一个最原始的值，比如直接从服务器取到的数据，如果没有呢，就是空

当前值：每次结束编辑的时候，会有一份数据产生，这里的数据来自控件的值

临时值：在开始编辑和结束编辑之间，控件有一份临时的值

所以呢，如果每次结束编辑的值，都保存下来，这些不同的当前值，就构成了一个个的历史版本。这就是可编辑控件的三值状态。

可编辑型（或者组合）控件的常用操作：

渲染：

初始化：

加载填充：

追加插入：

替换修改：

删除：

初始化值：

开始编辑：

结束编辑：

取消编辑：

取值：

设置值：

格式化值：

取原始值：

取当前值：

取临时值：

不可编辑状态设置：

验证和提示：

联动操作：在组合使用的时候用

销毁：dom销毁交给浏览器即可，但是一些数据和痕迹的清理则需要手动执行

常用的布局：
行：充满父容器的一行，一般用div即可满足

列：充满父容器的一列，可以用table单列布局，或者div浮动布局（inline-block问题多多，当然如果浏览器的兼容要求不高，那么也可以考虑使用inline-block）

段：宽度填充满父容器，但是高度占用多行，比如p标签即是如此

块：占用父容器的一定宽度和一定高度（某些行某些列），比如行内块（span），用div可以模拟

通过对上面的这些描述，可以发现，这些东西要想整齐呢，就要和父容器的行高，列宽对齐。可以想象父容器内部有N多的参考线，然后这些元素布局都和某些线进行对齐即可

渲染：
渲染我的理解就是把设计好的布局和元素显示在页面上。那么渲染可以认为是布局的实现。页面整个加载过程呢，可以认为是对页面上每个元素进行渲染，当这些元素都渲染完成后呢，整个页面也就是完成了。
鉴于程序是表达的这个基础，我为渲染增加了额外的内涵。渲染不只是对渲染元素这么简单，因为页面的元素之间是有关系的，比如table一行的数据，所以放到一行，因为这一行东西一般描述了一个对象的若干属性，是一个完整的内涵。渲染不仅仅是渲染元素，而且是渲染一个个的意义单元。

从这个角度看，我列出常用的意义单元：

列表：列表表示一个类型的如干候选值，他们之间的关系是平行的。候选值本身一般是一维的。那么表示出来，可以是ul，可以是select，也可以是radio，checkbox等。表示一个系列的若干值。

二维表：类似列表，但是候选值一般是多维的。如果只有一维，那么和列表就非常相似。比如，zk中的listbox可以做table也可以左select

标头：一般是简短的文字，用来对网页的结构进行分隔，说明整个网页的内容结构。

标签：一般是简短的文字，用来对后面或者下面的元素进行说明，一般用在form表单中居多，用来说明输入栏位的用途

提示：一般是对标签的补充，或者其他提示信息，比如title，比如alert等

表单：是收集用户资料，用来检测用户需求的地方

文本：大段的文字，一般是在论坛或者博客中，是长篇的正文

插图：额外的相关图片，用来说明文本。文本不同，插图会相应的变化。

图标：与其他提示性元素比如按钮，标头，标签等配合，用来加深对此作用的理解，如果使用不当，反不如不用。一般图标在整个网站构建中是稳定的，风格统一的。

交互：
我认为交互就是大家根据自己的经验和理解，在对网站获取足够的理解后，对网站进行的操作或者探索性操作。对于大多数人来说，交互式通过鼠标或者键盘操作的（触屏）操作的。操作者对页面进行操作的是根据自己的理解，换句话说是根据自己的思想，所以可以这么认为，每次操作时操作者意图和思想的一个体现。由此呢，也和最初设计网页的意图不谋而合。

所以，合起来看，交互就是操作者得思想和设计者（实际上是开发者）思想进行的交互。 @** @（也许以后会发明脑波控制技术，不用动手，这样就真的是两者思想的交互啦！！）。那么再看，设计者表达思想是通过对网页的布局和渲染来表达的，而操作者交互式通过鼠标和键盘表达的，因此呢，中间有需要有个东西来把这个东西衔接起来，即是把网页元素和浏览器事件关联起来。

网页元素和浏览器事件的关联的目的是检测操作者表达的思想。

可以想见，如果一个无聊透顶的人，拿着鼠标乱晃，其移动的轨迹和频率和一个目标明确（比如查询考勤异常的人）移动鼠标的轨迹和频率是完全不同的。

甚至说有些人习惯性的在阅读的时候喜欢眼球跟着鼠标（或者鼠标跟着眼球）走，碰到重点甚至用鼠标滑动或者来回的移动（考虑下那些在树上用各种颜色把自己认为重要的东西涂
上颜色的人），这样我们就可以检测到用户对那些内容感兴趣，他所关注的东西是什么。

再比如，当遇到疑问的时候，会习惯性的思考，而思考的时候，一般是不会同时进行操作的，这是鼠标是暂停的，当鼠标暂停的时候，是不是说操作者在思考，在疑惑（想想你合上书本托着脑袋思考的情形）？
再比如说，当我们查找东西的时候，或来回的翻腾，如果你发现操作者在不同的页面或者一个页面的不同部位来回的翻动时，你是不是觉得自己的导航和重要内容摆放的不是很合理？？
再比如说，当操作者再填写表单的时候，频繁的取查看title提示或者做了比较长久的停顿，那么是不是意味着表单的标签说明不够浅显易懂或者含糊不清呢？导致操作者需要思考良久来做出一个艰难的决定。

综上，可以发现为用户提供点击，输入，拖拽，滚动，跳转，等功能仅仅是让用户在做出决定后有所行动，而这些简单的东西却不能很好的反映出用户在做出决定前得思考，所以在设计网页的时候，就要想办法减少思考时间，尽量直白的表达设计思想。

那么交互设计，我认为包括两个部分，一部分是为操作者提供行为，一部分时辅助操作者进行决定（思考）。如果说程序设计是一门艺术，那么我想加上一句，它来自于生活，忠诚于生活，但是不高于生活。

从行为的角度看，常用的浏览器行为：

单击左键：

单击右键：

双击左键：

双击右键??：

键盘功能键：ctrl shift tab enter space 上下左右导航键，pageup pagedown翻页键

拖拽：有拖拽移动，有拖拽滚动，有拖拽换屏。。。。

关闭：关闭提示，窗口，广告，flash。。。

鼠标移动：

鼠标悬停：

鼠标手势??：

鼠标无节操动作：

从意图的角度看，常有的行为：

登陆：

提交：

阅览：各种弹窗，各种广告，各种晃动，各种配色！！！

注册：我是不是碰到查户口的啦

评定：万恶的验证码，万恶的会员制，万恶的等级制

上一个画面：修改？遗忘？冲突？才明白上一个画面是干嘛的！

下一个画面：

寻找：

复制：

黏贴：

编辑：

重新填写：

返回编辑：

重填某栏位：

保存：

对比：

汇总合并：

切换：

居中操作：不习惯在边边上看东西

全屏操作：不习惯在一堆额外的无关信息中看东西

选中：

查看提示、说明：

搜索：不要老给我过期的东西好不好？？01年的新闻，我去！匹配度太低？我去！！

退出：

发狂：各种郁闷直接导致发狂，直接导致无节操操作

不想透漏隐私：银行卡？密码？身份证？手机号？NO，我顶多给你个邮箱！你呀查户口呢？！

不想填写过多选项：满屏的按钮和input，头大，哥不玩了还不行？

刷新：最常见的原因就是网页打开太慢或者网页打开出现了问题

意图与行为的结合（偶也只能胡诌乱编了，所以，还是留到以后再写吧）

那么如何在没有良好规范的环境下做出良好的交互效果呢？

用户行为收集：（：） 我错了，还是不要这么干了）

虽然没有很好的办法对所有的东西进行良好的概括归纳，但是针对具体类型的应用依然有迹可循：

大量键盘输入类型应用：大量基本资料输入，键盘操作多余鼠标操作

关联编辑设置类型：一般的后台管理系统，鼠标操作多余键盘操作

搜索浏览类型应用：

数据分析类型应用：图标，曲线，对比，合并，分拆等等

评论交流bbs类型应用：大段文本和大段评论

日志博客blog类型应用：大段文本，但是少评论

短消息微博类型应用：社交性大于内涵本身

教程类型（高手）应用：制作个人教程，比如腌制泡菜等

文档分享类型（ishare）应用：

知识内容（wiki）应用：

专业提问回答（stackoverflow，知乎）应用：

视频应用：

音乐应用：

游戏：

在线办公：

....

根据应用的类型，和针对的人群，可以预测到应用的注意点（好吧这里纯属是吹牛）

控件：

你觉得你缺少的是控件吗？你觉得你了解这个控件的本身的内涵吗？

控件和UI画面只是其表，而起本身所代表的内涵才是其里。了解控件的内涵，才能在表达设计思想的时候更加顺心顺手。执着于控件和UI展示本身，而忽略了应用所表达的思想本身，很容易张冠李戴，做出不伦不类的东西。只有其型，而失去了内涵本身。正如前一部分所说，我认为应用其实就是设计者和操作者得思想碰撞，没有把握这个思想的基础上就开始做控件开始设计画面实在是缘木求鱼。

这里我仅仅列出常用的控件：

展示型控件：

图片走廊：

卡片布局：

列表：

二维表：

日历：

目录型控件：

编辑型控件：

单值录入：比如input，select ，radio等

多值录入：比如checkbox，select（可多选）等

级联录入：比如多个select的级联

区间录入：两个日历的区间录入

多key单值录入：比如根据login name email的模糊查询

勾选录入：比如checkbox

查询录入：比如根据一个关键字查询出一个对象

自动录入：根据其他栏位的值，自动填入

缺省录入：默认值

......

命令型控件：

对控件绑定了处理事件的均可以视为命令型控件，比如按钮，链接，以及可响应的其他的元素等。

===================================================================================================================================================

编辑型控件的组装--功能性控件：

可编辑二维表：

可编辑目录：

可编辑组合form：

互斥列表：我有的你不能有，你有的我不能有

查询过滤选择列表：输入条件更详细，则执行过滤，输入条件更简略则执行查询；或者每次都查询

... ...

可编辑型（或组合）控件的值版本：

初始值：会有一个最原始的值，比如直接从服务器取到的数据，如果没有呢，就是空

当前值：每次结束编辑的时候，会有一份数据产生，这里的数据来自控件的值

临时值：在开始编辑和结束编辑之间，控件有一份临时的值

所以呢，如果每次结束编辑的值，都保存下来，这些不同的当前值，就构成了一个个的历史版本。这就是可编辑控件的三值状态。

可编辑型（或者组合）控件的常用操作：

渲染：

初始化：

加载填充：

追加插入：

替换修改：

删除：

初始化值：

开始编辑：

结束编辑：

取消编辑：

取值：

设置值：

格式化值：

取原始值：

取当前值：

取临时值：

不可编辑状态设置：

验证和提示：

联动操作：在组合使用的时候用

销毁：dom销毁交给浏览器即可，但是一些数据和痕迹的清理则需要手动执行

行：充满父容器的一行，一般用div即可满足
列：充满父容器的一列，可以用table单列布局，或者div浮动布局（inline-block问题多多，当然如果浏览器的兼容要求不高，那么也可以考虑使用inline-block）

段：宽度填充满父容器，但是高度占用多行，比如p标签即是如此

块：占用父容器的一定宽度和一定高度（某些行某些列），比如行内块（span），用div可以模拟

通过对上面的这些描述，可以发现，这些东西要想整齐呢，就要和父容器的行高，列宽对齐。可以想象父容器内部有N多的参考线，然后这些元素布局都和某些线进行对齐即可

渲染：
渲染我的理解就是把设计好的布局和元素显示在页面上。那么渲染可以认为是布局的实现。页面整个加载过程呢，可以认为是对页面上每个元素进行渲染，当这些元素都渲染完成后呢，整个页面也就是完成了。
鉴于程序是表达的这个基础，我为渲染增加了额外的内涵。渲染不只是对渲染元素这么简单，因为页面的元素之间是有关系的，比如table一行的数据，所以放到一行，因为这一行东西一般描述了一个对象的若干属性，是一个完整的内涵。渲染不仅仅是渲染元素，而且是渲染一个个的意义单元。

从这个角度看，我列出常用的意义单元：

列表：列表表示一个类型的如干候选值，他们之间的关系是平行的。候选值本身一般是一维的。那么表示出来，可以是ul，可以是select，也可以是radio，checkbox等。表示一个系列的若干值。

二维表：类似列表，但是候选值一般是多维的。如果只有一维，那么和列表就非常相似。比如，zk中的listbox可以做table也可以左select

标头：一般是简短的文字，用来对网页的结构进行分隔，说明整个网页的内容结构。

标签：一般是简短的文字，用来对后面或者下面的元素进行说明，一般用在form表单中居多，用来说明输入栏位的用途

提示：一般是对标签的补充，或者其他提示信息，比如title，比如alert等

表单：是收集用户资料，用来检测用户需求的地方

文本：大段的文字，一般是在论坛或者博客中，是长篇的正文

插图：额外的相关图片，用来说明文本。文本不同，插图会相应的变化。

图标：与其他提示性元素比如按钮，标头，标签等配合，用来加深对此作用的理解，如果使用不当，反不如不用。一般图标在整个网站构建中是稳定的，风格统一的。

交互：
我认为交互就是大家根据自己的经验和理解，在对网站获取足够的理解后，对网站进行的操作或者探索性操作。对于大多数人来说，交互式通过鼠标或者键盘操作的（触屏）操作的。操作者对页面进行操作的是根据自己的理解，换句话说是根据自己的思想，所以可以这么认为，每次操作时操作者意图和思想的一个体现。由此呢，也和最初设计网页的意图不谋而合。

所以，合起来看，交互就是操作者得思想和设计者（实际上是开发者）思想进行的交互。 @** @（也许以后会发明脑波控制技术，不用动手，这样就真的是两者思想的交互啦！！）。那么再看，设计者表达思想是通过对网页的布局和渲染来表达的，而操作者交互式通过鼠标和键盘表达的，因此呢，中间有需要有个东西来把这个东西衔接起来，即是把网页元素和浏览器事件关联起来。

网页元素和浏览器事件的关联的目的是检测操作者表达的思想。

可以想见，如果一个无聊透顶的人，拿着鼠标乱晃，其移动的轨迹和频率和一个目标明确（比如查询考勤异常的人）移动鼠标的轨迹和频率是完全不同的。

甚至说有些人习惯性的在阅读的时候喜欢眼球跟着鼠标（或者鼠标跟着眼球）走，碰到重点甚至用鼠标滑动或者来回的移动（考虑下那些在树上用各种颜色把自己认为重要的东西涂
上颜色的人），这样我们就可以检测到用户对那些内容感兴趣，他所关注的东西是什么。

再比如，当遇到疑问的时候，会习惯性的思考，而思考的时候，一般是不会同时进行操作的，这是鼠标是暂停的，当鼠标暂停的时候，是不是说操作者在思考，在疑惑（想想你合上书本托着脑袋思考的情形）？
再比如说，当我们查找东西的时候，或来回的翻腾，如果你发现操作者在不同的页面或者一个页面的不同部位来回的翻动时，你是不是觉得自己的导航和重要内容摆放的不是很合理？？
再比如说，当操作者再填写表单的时候，频繁的取查看title提示或者做了比较长久的停顿，那么是不是意味着表单的标签说明不够浅显易懂或者含糊不清呢？导致操作者需要思考良久来做出一个艰难的决定。

综上，可以发现为用户提供点击，输入，拖拽，滚动，跳转，等功能仅仅是让用户在做出决定后有所行动，而这些简单的东西却不能很好的反映出用户在做出决定前得思考，所以在设计网页的时候，就要想办法减少思考时间，尽量直白的表达设计思想。

那么交互设计，我认为包括两个部分，一部分是为操作者提供行为，一部分时辅助操作者进行决定（思考）。如果说程序设计是一门艺术，那么我想加上一句，它来自于生活，忠诚于生活，但是不高于生活。

从行为的角度看，常用的浏览器行为：

单击左键：

单击右键：

双击左键：

双击右键??：

键盘功能键：ctrl shift tab enter space 上下左右导航键，pageup pagedown翻页键

拖拽：有拖拽移动，有拖拽滚动，有拖拽换屏。。。。

关闭：关闭提示，窗口，广告，flash。。。

鼠标移动：

鼠标悬停：

鼠标手势??：

鼠标无节操动作：

从意图的角度看，常有的行为：

登陆：

提交：

阅览：各种弹窗，各种广告，各种晃动，各种配色！！！

注册：我是不是碰到查户口的啦

评定：万恶的验证码，万恶的会员制，万恶的等级制

上一个画面：修改？遗忘？冲突？才明白上一个画面是干嘛的！

下一个画面：

寻找：

复制：

黏贴：

编辑：

重新填写：

返回编辑：

重填某栏位：

保存：

对比：

汇总合并：

切换：

居中操作：不习惯在边边上看东西

全屏操作：不习惯在一堆额外的无关信息中看东西

选中：

查看提示、说明：

搜索：不要老给我过期的东西好不好？？01年的新闻，我去！匹配度太低？我去！！

退出：

发狂：各种郁闷直接导致发狂，直接导致无节操操作

不想透漏隐私：银行卡？密码？身份证？手机号？NO，我顶多给你个邮箱！你呀查户口呢？！

不想填写过多选项：满屏的按钮和input，头大，哥不玩了还不行？

刷新：最常见的原因就是网页打开太慢或者网页打开出现了问题

意图与行为的结合（偶也只能胡诌乱编了，所以，还是留到以后再写吧）

那么如何在没有良好规范的环境下做出良好的交互效果呢？

用户行为收集：（：） 我错了，还是不要这么干了）

虽然没有很好的办法对所有的东西进行良好的概括归纳，但是针对具体类型的应用依然有迹可循：

大量键盘输入类型应用：大量基本资料输入，键盘操作多余鼠标操作

关联编辑设置类型：一般的后台管理系统，鼠标操作多余键盘操作

搜索浏览类型应用：

数据分析类型应用：图标，曲线，对比，合并，分拆等等

评论交流bbs类型应用：大段文本和大段评论

日志博客blog类型应用：大段文本，但是少评论

短消息微博类型应用：社交性大于内涵本身

教程类型（高手）应用：制作个人教程，比如腌制泡菜等

文档分享类型（ishare）应用：

知识内容（wiki）应用：

专业提问回答（stackoverflow，知乎）应用：

视频应用：

音乐应用：

游戏：

在线办公：

....

根据应用的类型，和针对的人群，可以预测到应用的注意点（好吧这里纯属是吹牛）

控件：

你觉得你缺少的是控件吗？你觉得你了解这个控件的本身的内涵吗？

控件和UI画面只是其表，而起本身所代表的内涵才是其里。了解控件的内涵，才能在表达设计思想的时候更加顺心顺手。执着于控件和UI展示本身，而忽略了应用所表达的思想本身，很容易张冠李戴，做出不伦不类的东西。只有其型，而失去了内涵本身。正如前一部分所说，我认为应用其实就是设计者和操作者得思想碰撞，没有把握这个思想的基础上就开始做控件开始设计画面实在是缘木求鱼。

这里我仅仅列出常用的控件：

展示型控件：

图片走廊：

卡片布局：

列表：

二维表：

日历：

目录型控件：

编辑型控件：

单值录入：比如input，select ，radio等

多值录入：比如checkbox，select（可多选）等

级联录入：比如多个select的级联

区间录入：两个日历的区间录入

多key单值录入：比如根据login name email的模糊查询

勾选录入：比如checkbox

查询录入：比如根据一个关键字查询出一个对象

自动录入：根据其他栏位的值，自动填入

缺省录入：默认值

......

命令型控件：

对控件绑定了处理事件的均可以视为命令型控件，比如按钮，链接，以及可响应的其他的元素等。

===================================================================================================================================================

编辑型控件的组装--功能性控件：

可编辑二维表：

可编辑目录：

可编辑组合form：

互斥列表：我有的你不能有，你有的我不能有

查询过滤选择列表：输入条件更详细，则执行过滤，输入条件更简略则执行查询；或者每次都查询

... ...

可编辑型（或组合）控件的值版本：

初始值：会有一个最原始的值，比如直接从服务器取到的数据，如果没有呢，就是空

当前值：每次结束编辑的时候，会有一份数据产生，这里的数据来自控件的值

临时值：在开始编辑和结束编辑之间，控件有一份临时的值

所以呢，如果每次结束编辑的值，都保存下来，这些不同的当前值，就构成了一个个的历史版本。这就是可编辑控件的三值状态。

可编辑型（或者组合）控件的常用操作：

渲染：

初始化：

加载填充：

追加插入：

替换修改：

删除：

初始化值：

开始编辑：

结束编辑：

取消编辑：

取值：

设置值：

格式化值：

取原始值：

取当前值：

取临时值：

不可编辑状态设置：

验证和提示：

联动操作：在组合使用的时候用

销毁：dom销毁交给浏览器即可，但是一些数据和痕迹的清理则需要手动执行

列：充满父容器的一列，可以用table单列布局，或者div浮动布局（inline-block问题多多，当然如果浏览器的兼容要求不高，那么也可以考虑使用inline-block）
段：宽度填充满父容器，但是高度占用多行，比如p标签即是如此

块：占用父容器的一定宽度和一定高度（某些行某些列），比如行内块（span），用div可以模拟

通过对上面的这些描述，可以发现，这些东西要想整齐呢，就要和父容器的行高，列宽对齐。可以想象父容器内部有N多的参考线，然后这些元素布局都和某些线进行对齐即可

渲染：
渲染我的理解就是把设计好的布局和元素显示在页面上。那么渲染可以认为是布局的实现。页面整个加载过程呢，可以认为是对页面上每个元素进行渲染，当这些元素都渲染完成后呢，整个页面也就是完成了。
鉴于程序是表达的这个基础，我为渲染增加了额外的内涵。渲染不只是对渲染元素这么简单，因为页面的元素之间是有关系的，比如table一行的数据，所以放到一行，因为这一行东西一般描述了一个对象的若干属性，是一个完整的内涵。渲染不仅仅是渲染元素，而且是渲染一个个的意义单元。

从这个角度看，我列出常用的意义单元：

列表：列表表示一个类型的如干候选值，他们之间的关系是平行的。候选值本身一般是一维的。那么表示出来，可以是ul，可以是select，也可以是radio，checkbox等。表示一个系列的若干值。

二维表：类似列表，但是候选值一般是多维的。如果只有一维，那么和列表就非常相似。比如，zk中的listbox可以做table也可以左select

标头：一般是简短的文字，用来对网页的结构进行分隔，说明整个网页的内容结构。

标签：一般是简短的文字，用来对后面或者下面的元素进行说明，一般用在form表单中居多，用来说明输入栏位的用途

提示：一般是对标签的补充，或者其他提示信息，比如title，比如alert等

表单：是收集用户资料，用来检测用户需求的地方

文本：大段的文字，一般是在论坛或者博客中，是长篇的正文

插图：额外的相关图片，用来说明文本。文本不同，插图会相应的变化。

图标：与其他提示性元素比如按钮，标头，标签等配合，用来加深对此作用的理解，如果使用不当，反不如不用。一般图标在整个网站构建中是稳定的，风格统一的。

交互：
我认为交互就是大家根据自己的经验和理解，在对网站获取足够的理解后，对网站进行的操作或者探索性操作。对于大多数人来说，交互式通过鼠标或者键盘操作的（触屏）操作的。操作者对页面进行操作的是根据自己的理解，换句话说是根据自己的思想，所以可以这么认为，每次操作时操作者意图和思想的一个体现。由此呢，也和最初设计网页的意图不谋而合。

所以，合起来看，交互就是操作者得思想和设计者（实际上是开发者）思想进行的交互。@**@（也许以后会发明脑波控制技术，不用动手，这样就真的是两者思想的交互啦！！）。那么再看，设计者表达思想是通过对网页的布局和渲染来表达的，而操作者交互式通过鼠标和键盘表达的，因此呢，中间有需要有个东西来把这个东西衔接起来，即是把网页元素和浏览器事件关联起来。

网页元素和浏览器事件的关联的目的是检测操作者表达的思想。

可以想见，如果一个无聊透顶的人，拿着鼠标乱晃，其移动的轨迹和频率和一个目标明确（比如查询考勤异常的人）移动鼠标的轨迹和频率是完全不同的。

甚至说有些人习惯性的在阅读的时候喜欢眼球跟着鼠标（或者鼠标跟着眼球）走，碰到重点甚至用鼠标滑动或者来回的移动（考虑下那些在树上用各种颜色把自己认为重要的东西涂
上颜色的人），这样我们就可以检测到用户对那些内容感兴趣，他所关注的东西是什么。

再比如，当遇到疑问的时候，会习惯性的思考，而思考的时候，一般是不会同时进行操作的，这是鼠标是暂停的，当鼠标暂停的时候，是不是说操作者在思考，在疑惑（想想你合上书本托着脑袋思考的情形）？
再比如说，当我们查找东西的时候，或来回的翻腾，如果你发现操作者在不同的页面或者一个页面的不同部位来回的翻动时，你是不是觉得自己的导航和重要内容摆放的不是很合理？？
再比如说，当操作者再填写表单的时候，频繁的取查看title提示或者做了比较长久的停顿，那么是不是意味着表单的标签说明不够浅显易懂或者含糊不清呢？导致操作者需要思考良久来做出一个艰难的决定。

综上，可以发现为用户提供点击，输入，拖拽，滚动，跳转，等功能仅仅是让用户在做出决定后有所行动，而这些简单的东西却不能很好的反映出用户在做出决定前得思考，所以在设计网页的时候，就要想办法减少思考时间，尽量直白的表达设计思想。

那么交互设计，我认为包括两个部分，一部分是为操作者提供行为，一部分时辅助操作者进行决定（思考）。如果说程序设计是一门艺术，那么我想加上一句，它来自于生活，忠诚于生活，但是不高于生活。

从行为的角度看，常用的浏览器行为：

单击左键：

单击右键：

双击左键：

双击右键??：

键盘功能键：ctrl shift tab enter space 上下左右导航键，pageup pagedown翻页键

拖拽：有拖拽移动，有拖拽滚动，有拖拽换屏。。。。

关闭：关闭提示，窗口，广告，flash。。。

鼠标移动：

鼠标悬停：

鼠标手势??：

鼠标无节操动作：

从意图的角度看，常有的行为：

登陆：

提交：

阅览：各种弹窗，各种广告，各种晃动，各种配色！！！

注册：我是不是碰到查户口的啦

评定：万恶的验证码，万恶的会员制，万恶的等级制

上一个画面：修改？遗忘？冲突？才明白上一个画面是干嘛的！

下一个画面：

寻找：

复制：

黏贴：

编辑：

重新填写：

返回编辑：

重填某栏位：

保存：

对比：

汇总合并：

切换：

居中操作：不习惯在边边上看东西

全屏操作：不习惯在一堆额外的无关信息中看东西

选中：

查看提示、说明：

搜索：不要老给我过期的东西好不好？？01年的新闻，我去！匹配度太低？我去！！

退出：

发狂：各种郁闷直接导致发狂，直接导致无节操操作

不想透漏隐私：银行卡？密码？身份证？手机号？NO，我顶多给你个邮箱！你呀查户口呢？！

不想填写过多选项：满屏的按钮和input，头大，哥不玩了还不行？

刷新：最常见的原因就是网页打开太慢或者网页打开出现了问题

意图与行为的结合（偶也只能胡诌乱编了，所以，还是留到以后再写吧）

那么如何在没有良好规范的环境下做出良好的交互效果呢？

用户行为收集：（：） 我错了，还是不要这么干了）

虽然没有很好的办法对所有的东西进行良好的概括归纳，但是针对具体类型的应用依然有迹可循：

大量键盘输入类型应用：大量基本资料输入，键盘操作多余鼠标操作

关联编辑设置类型：一般的后台管理系统，鼠标操作多余键盘操作

搜索浏览类型应用：

数据分析类型应用：图标，曲线，对比，合并，分拆等等

评论交流bbs类型应用：大段文本和大段评论

日志博客blog类型应用：大段文本，但是少评论

短消息微博类型应用：社交性大于内涵本身

教程类型（高手）应用：制作个人教程，比如腌制泡菜等

文档分享类型（ishare）应用：

知识内容（wiki）应用：

专业提问回答（stackoverflow，知乎）应用：

视频应用：

音乐应用：

游戏：

在线办公：

....

根据应用的类型，和针对的人群，可以预测到应用的注意点（好吧这里纯属是吹牛）

控件：

你觉得你缺少的是控件吗？你觉得你了解这个控件的本身的内涵吗？

控件和UI画面只是其表，而起本身所代表的内涵才是其里。了解控件的内涵，才能在表达设计思想的时候更加顺心顺手。执着于控件和UI展示本身，而忽略了应用所表达的思想本身，很容易张冠李戴，做出不伦不类的东西。只有其型，而失去了内涵本身。正如前一部分所说，我认为应用其实就是设计者和操作者得思想碰撞，没有把握这个思想的基础上就开始做控件开始设计画面实在是缘木求鱼。

这里我仅仅列出常用的控件：

展示型控件：

图片走廊：

卡片布局：

列表：

二维表：

日历：

目录型控件：

编辑型控件：

单值录入：比如input，select ，radio等

多值录入：比如checkbox，select（可多选）等

级联录入：比如多个select的级联

区间录入：两个日历的区间录入

多key单值录入：比如根据login name email的模糊查询

勾选录入：比如checkbox

查询录入：比如根据一个关键字查询出一个对象

自动录入：根据其他栏位的值，自动填入

缺省录入：默认值

......

命令型控件：

对控件绑定了处理事件的均可以视为命令型控件，比如按钮，链接，以及可响应的其他的元素等。

===================================================================================================================================================

编辑型控件的组装--功能性控件：

可编辑二维表：

可编辑目录：

可编辑组合form：

互斥列表：我有的你不能有，你有的我不能有

查询过滤选择列表：输入条件更详细，则执行过滤，输入条件更简略则执行查询；或者每次都查询

... ...

可编辑型（或组合）控件的值版本：

初始值：会有一个最原始的值，比如直接从服务器取到的数据，如果没有呢，就是空

当前值：每次结束编辑的时候，会有一份数据产生，这里的数据来自控件的值

临时值：在开始编辑和结束编辑之间，控件有一份临时的值

所以呢，如果每次结束编辑的值，都保存下来，这些不同的当前值，就构成了一个个的历史版本。这就是可编辑控件的三值状态。

可编辑型（或者组合）控件的常用操作：

渲染：

初始化：

加载填充：

追加插入：

替换修改：

删除：

初始化值：

开始编辑：

结束编辑：

取消编辑：

取值：

设置值：

格式化值：

取原始值：

取当前值：

取临时值：

不可编辑状态设置：

验证和提示：

联动操作：在组合使用的时候用

销毁：dom销毁交给浏览器即可，但是一些数据和痕迹的清理则需要手动执行

段：宽度填充满父容器，但是高度占用多行，比如p标签即是如此
块：占用父容器的一定宽度和一定高度（某些行某些列），比如行内块（span），用div可以模拟

通过对上面的这些描述，可以发现，这些东西要想整齐呢，就要和父容器的行高，列宽对齐。可以想象父容器内部有N多的参考线，然后这些元素布局都和某些线进行对齐即可

渲染：
渲染我的理解就是把设计好的布局和元素显示在页面上。那么渲染可以认为是布局的实现。页面整个加载过程呢，可以认为是对页面上每个元素进行渲染，当这些元素都渲染完成后呢，整个页面也就是完成了。
鉴于程序是表达的这个基础，我为渲染增加了额外的内涵。渲染不只是对渲染元素这么简单，因为页面的元素之间是有关系的，比如table一行的数据，所以放到一行，因为这一行东西一般描述了一个对象的若干属性，是一个完整的内涵。渲染不仅仅是渲染元素，而且是渲染一个个的意义单元。

从这个角度看，我列出常用的意义单元：

列表：列表表示一个类型的如干候选值，他们之间的关系是平行的。候选值本身一般是一维的。那么表示出来，可以是ul，可以是select，也可以是radio，checkbox等。表示一个系列的若干值。

二维表：类似列表，但是候选值一般是多维的。如果只有一维，那么和列表就非常相似。比如，zk中的listbox可以做table也可以左select

标头：一般是简短的文字，用来对网页的结构进行分隔，说明整个网页的内容结构。

标签：一般是简短的文字，用来对后面或者下面的元素进行说明，一般用在form表单中居多，用来说明输入栏位的用途

提示：一般是对标签的补充，或者其他提示信息，比如title，比如alert等

表单：是收集用户资料，用来检测用户需求的地方

文本：大段的文字，一般是在论坛或者博客中，是长篇的正文

插图：额外的相关图片，用来说明文本。文本不同，插图会相应的变化。

图标：与其他提示性元素比如按钮，标头，标签等配合，用来加深对此作用的理解，如果使用不当，反不如不用。一般图标在整个网站构建中是稳定的，风格统一的。

交互：
我认为交互就是大家根据自己的经验和理解，在对网站获取足够的理解后，对网站进行的操作或者探索性操作。对于大多数人来说，交互式通过鼠标或者键盘操作的（触屏）操作的。操作者对页面进行操作的是根据自己的理解，换句话说是根据自己的思想，所以可以这么认为，每次操作时操作者意图和思想的一个体现。由此呢，也和最初设计网页的意图不谋而合。

所以，合起来看，交互就是操作者得思想和设计者（实际上是开发者）思想进行的交互。@**@（也许以后会发明脑波控制技术，不用动手，这样就真的是两者思想的交互啦！！）。那么再看，设计者表达思想是通过对网页的布局和渲染来表达的，而操作者交互式通过鼠标和键盘表达的，因此呢，中间有需要有个东西来把这个东西衔接起来，即是把网页元素和浏览器事件关联起来。

网页元素和浏览器事件的关联的目的是检测操作者表达的思想。

可以想见，如果一个无聊透顶的人，拿着鼠标乱晃，其移动的轨迹和频率和一个目标明确（比如查询考勤异常的人）移动鼠标的轨迹和频率是完全不同的。

甚至说有些人习惯性的在阅读的时候喜欢眼球跟着鼠标（或者鼠标跟着眼球）走，碰到重点甚至用鼠标滑动或者来回的移动（考虑下那些在树上用各种颜色把自己认为重要的东西涂
上颜色的人），这样我们就可以检测到用户对那些内容感兴趣，他所关注的东西是什么。

再比如，当遇到疑问的时候，会习惯性的思考，而思考的时候，一般是不会同时进行操作的，这是鼠标是暂停的，当鼠标暂停的时候，是不是说操作者在思考，在疑惑（想想你合上书本托着脑袋思考的情形）？
再比如说，当我们查找东西的时候，或来回的翻腾，如果你发现操作者在不同的页面或者一个页面的不同部位来回的翻动时，你是不是觉得自己的导航和重要内容摆放的不是很合理？？
再比如说，当操作者再填写表单的时候，频繁的取查看title提示或者做了比较长久的停顿，那么是不是意味着表单的标签说明不够浅显易懂或者含糊不清呢？导致操作者需要思考良久来做出一个艰难的决定。

综上，可以发现为用户提供点击，输入，拖拽，滚动，跳转，等功能仅仅是让用户在做出决定后有所行动，而这些简单的东西却不能很好的反映出用户在做出决定前得思考，所以在设计网页的时候，就要想办法减少思考时间，尽量直白的表达设计思想。

那么交互设计，我认为包括两个部分，一部分是为操作者提供行为，一部分时辅助操作者进行决定（思考）。如果说程序设计是一门艺术，那么我想加上一句，它来自于生活，忠诚于生活，但是不高于生活。

从行为的角度看，常用的浏览器行为：

单击左键：

单击右键：

双击左键：

双击右键??：

键盘功能键：ctrl shift tab enter space 上下左右导航键，pageup pagedown翻页键

拖拽：有拖拽移动，有拖拽滚动，有拖拽换屏。。。。

关闭：关闭提示，窗口，广告，flash。。。

鼠标移动：

鼠标悬停：

鼠标手势??：

鼠标无节操动作：

从意图的角度看，常有的行为：

登陆：

提交：

阅览：各种弹窗，各种广告，各种晃动，各种配色！！！

注册：我是不是碰到查户口的啦

评定：万恶的验证码，万恶的会员制，万恶的等级制

上一个画面：修改？遗忘？冲突？才明白上一个画面是干嘛的！

下一个画面：

寻找：

复制：

黏贴：

编辑：

重新填写：

返回编辑：

重填某栏位：

保存：

对比：

汇总合并：

切换：

居中操作：不习惯在边边上看东西

全屏操作：不习惯在一堆额外的无关信息中看东西

选中：

查看提示、说明：

搜索：不要老给我过期的东西好不好？？01年的新闻，我去！匹配度太低？我去！！

退出：

发狂：各种郁闷直接导致发狂，直接导致无节操操作

不想透漏隐私：银行卡？密码？身份证？手机号？NO，我顶多给你个邮箱！你呀查户口呢？！

不想填写过多选项：满屏的按钮和input，头大，哥不玩了还不行？

刷新：最常见的原因就是网页打开太慢或者网页打开出现了问题

意图与行为的结合（偶也只能胡诌乱编了，所以，还是留到以后再写吧）

那么如何在没有良好规范的环境下做出良好的交互效果呢？

用户行为收集：（：） 我错了，还是不要这么干了）

虽然没有很好的办法对所有的东西进行良好的概括归纳，但是针对具体类型的应用依然有迹可循：

大量键盘输入类型应用：大量基本资料输入，键盘操作多余鼠标操作

关联编辑设置类型：一般的后台管理系统，鼠标操作多余键盘操作

搜索浏览类型应用：

数据分析类型应用：图标，曲线，对比，合并，分拆等等

评论交流bbs类型应用：大段文本和大段评论

日志博客blog类型应用：大段文本，但是少评论

短消息微博类型应用：社交性大于内涵本身

教程类型（高手）应用：制作个人教程，比如腌制泡菜等

文档分享类型（ishare）应用：

知识内容（wiki）应用：

专业提问回答（stackoverflow，知乎）应用：

视频应用：

音乐应用：

游戏：

在线办公：

....

根据应用的类型，和针对的人群，可以预测到应用的注意点（好吧这里纯属是吹牛）

控件：

你觉得你缺少的是控件吗？你觉得你了解这个控件的本身的内涵吗？

控件和UI画面只是其表，而起本身所代表的内涵才是其里。了解控件的内涵，才能在表达设计思想的时候更加顺心顺手。执着于控件和UI展示本身，而忽略了应用所表达的思想本身，很容易张冠李戴，做出不伦不类的东西。只有其型，而失去了内涵本身。正如前一部分所说，我认为应用其实就是设计者和操作者得思想碰撞，没有把握这个思想的基础上就开始做控件开始设计画面实在是缘木求鱼。

这里我仅仅列出常用的控件：

展示型控件：

图片走廊：

卡片布局：

列表：

二维表：

日历：

目录型控件：

编辑型控件：

单值录入：比如input，select ，radio等

多值录入：比如checkbox，select（可多选）等

级联录入：比如多个select的级联

区间录入：两个日历的区间录入

多key单值录入：比如根据login name email的模糊查询

勾选录入：比如checkbox

查询录入：比如根据一个关键字查询出一个对象

自动录入：根据其他栏位的值，自动填入

缺省录入：默认值

......

命令型控件：

对控件绑定了处理事件的均可以视为命令型控件，比如按钮，链接，以及可响应的其他的元素等。

===================================================================================================================================================

编辑型控件的组装--功能性控件：

可编辑二维表：

可编辑目录：

可编辑组合form：

互斥列表：我有的你不能有，你有的我不能有

查询过滤选择列表：输入条件更详细，则执行过滤，输入条件更简略则执行查询；或者每次都查询

... ...

可编辑型（或组合）控件的值版本：

初始值：会有一个最原始的值，比如直接从服务器取到的数据，如果没有呢，就是空

当前值：每次结束编辑的时候，会有一份数据产生，这里的数据来自控件的值

临时值：在开始编辑和结束编辑之间，控件有一份临时的值

所以呢，如果每次结束编辑的值，都保存下来，这些不同的当前值，就构成了一个个的历史版本。这就是可编辑控件的三值状态。

可编辑型（或者组合）控件的常用操作：

渲染：

初始化：

加载填充：

追加插入：

替换修改：

删除：

初始化值：

开始编辑：

结束编辑：

取消编辑：

取值：

设置值：

格式化值：

取原始值：

取当前值：

取临时值：

不可编辑状态设置：

验证和提示：

联动操作：在组合使用的时候用

销毁：dom销毁交给浏览器即可，但是一些数据和痕迹的清理则需要手动执行

块：占用父容器的一定宽度和一定高度（某些行某些列），比如行内块（span），用div可以模拟
通过对上面的这些描述，可以发现，这些东西要想整齐呢，就要和父容器的行高，列宽对齐。可以想象父容器内部有N多的参考线，然后这些元素布局都和某些线进行对齐即可

渲染：
渲染我的理解就是把设计好的布局和元素显示在页面上。那么渲染可以认为是布局的实现。页面整个加载过程呢，可以认为是对页面上每个元素进行渲染，当这些元素都渲染完成后呢，整个页面也就是完成了。
鉴于程序是表达的这个基础，我为渲染增加了额外的内涵。渲染不只是对渲染元素这么简单，因为页面的元素之间是有关系的，比如table一行的数据，所以放到一行，因为这一行东西一般描述了一个对象的若干属性，是一个完整的内涵。渲染不仅仅是渲染元素，而且是渲染一个个的意义单元。

从这个角度看，我列出常用的意义单元：

列表：列表表示一个类型的如干候选值，他们之间的关系是平行的。候选值本身一般是一维的。那么表示出来，可以是ul，可以是select，也可以是radio，checkbox等。表示一个系列的若干值。

二维表：类似列表，但是候选值一般是多维的。如果只有一维，那么和列表就非常相似。比如，zk中的listbox可以做table也可以左select

标头：一般是简短的文字，用来对网页的结构进行分隔，说明整个网页的内容结构。

标签：一般是简短的文字，用来对后面或者下面的元素进行说明，一般用在form表单中居多，用来说明输入栏位的用途

提示：一般是对标签的补充，或者其他提示信息，比如title，比如alert等

表单：是收集用户资料，用来检测用户需求的地方

文本：大段的文字，一般是在论坛或者博客中，是长篇的正文

插图：额外的相关图片，用来说明文本。文本不同，插图会相应的变化。

图标：与其他提示性元素比如按钮，标头，标签等配合，用来加深对此作用的理解，如果使用不当，反不如不用。一般图标在整个网站构建中是稳定的，风格统一的。

交互：
我认为交互就是大家根据自己的经验和理解，在对网站获取足够的理解后，对网站进行的操作或者探索性操作。对于大多数人来说，交互式通过鼠标或者键盘操作的（触屏）操作的。操作者对页面进行操作的是根据自己的理解，换句话说是根据自己的思想，所以可以这么认为，每次操作时操作者意图和思想的一个体现。由此呢，也和最初设计网页的意图不谋而合。

所以，合起来看，交互就是操作者得思想和设计者（实际上是开发者）思想进行的交互。@**@（也许以后会发明脑波控制技术，不用动手，这样就真的是两者思想的交互啦！！）。那么再看，设计者表达思想是通过对网页的布局和渲染来表达的，而操作者交互式通过鼠标和键盘表达的，因此呢，中间有需要有个东西来把这个东西衔接起来，即是把网页元素和浏览器事件关联起来。

网页元素和浏览器事件的关联的目的是检测操作者表达的思想。

可以想见，如果一个无聊透顶的人，拿着鼠标乱晃，其移动的轨迹和频率和一个目标明确（比如查询考勤异常的人）移动鼠标的轨迹和频率是完全不同的。

甚至说有些人习惯性的在阅读的时候喜欢眼球跟着鼠标（或者鼠标跟着眼球）走，碰到重点甚至用鼠标滑动或者来回的移动（考虑下那些在树上用各种颜色把自己认为重要的东西涂
上颜色的人），这样我们就可以检测到用户对那些内容感兴趣，他所关注的东西是什么。

再比如，当遇到疑问的时候，会习惯性的思考，而思考的时候，一般是不会同时进行操作的，这是鼠标是暂停的，当鼠标暂停的时候，是不是说操作者在思考，在疑惑（想想你合上书本托着脑袋思考的情形）？
再比如说，当我们查找东西的时候，或来回的翻腾，如果你发现操作者在不同的页面或者一个页面的不同部位来回的翻动时，你是不是觉得自己的导航和重要内容摆放的不是很合理？？
再比如说，当操作者再填写表单的时候，频繁的取查看title提示或者做了比较长久的停顿，那么是不是意味着表单的标签说明不够浅显易懂或者含糊不清呢？导致操作者需要思考良久来做出一个艰难的决定。

综上，可以发现为用户提供点击，输入，拖拽，滚动，跳转，等功能仅仅是让用户在做出决定后有所行动，而这些简单的东西却不能很好的反映出用户在做出决定前得思考，所以在设计网页的时候，就要想办法减少思考时间，尽量直白的表达设计思想。

那么交互设计，我认为包括两个部分，一部分是为操作者提供行为，一部分时辅助操作者进行决定（思考）。如果说程序设计是一门艺术，那么我想加上一句，它来自于生活，忠诚于生活，但是不高于生活。

从行为的角度看，常用的浏览器行为：

单击左键：

单击右键：

双击左键：

双击右键??：

键盘功能键：ctrl shift tab enter space 上下左右导航键，pageup pagedown翻页键

拖拽：有拖拽移动，有拖拽滚动，有拖拽换屏。。。。

关闭：关闭提示，窗口，广告，flash。。。

鼠标移动：

鼠标悬停：

鼠标手势??：

鼠标无节操动作：

从意图的角度看，常有的行为：

登陆：

提交：

阅览：各种弹窗，各种广告，各种晃动，各种配色！！！

注册：我是不是碰到查户口的啦

评定：万恶的验证码，万恶的会员制，万恶的等级制

上一个画面：修改？遗忘？冲突？才明白上一个画面是干嘛的！

下一个画面：

寻找：

复制：

黏贴：

编辑：

重新填写：

返回编辑：

重填某栏位：

保存：

对比：

汇总合并：

切换：

居中操作：不习惯在边边上看东西

全屏操作：不习惯在一堆额外的无关信息中看东西

选中：

查看提示、说明：

搜索：不要老给我过期的东西好不好？？01年的新闻，我去！匹配度太低？我去！！

退出：

发狂：各种郁闷直接导致发狂，直接导致无节操操作

不想透漏隐私：银行卡？密码？身份证？手机号？NO，我顶多给你个邮箱！你呀查户口呢？！

不想填写过多选项：满屏的按钮和input，头大，哥不玩了还不行？

刷新：最常见的原因就是网页打开太慢或者网页打开出现了问题

意图与行为的结合（偶也只能胡诌乱编了，所以，还是留到以后再写吧）

那么如何在没有良好规范的环境下做出良好的交互效果呢？

用户行为收集：（：） 我错了，还是不要这么干了）

虽然没有很好的办法对所有的东西进行良好的概括归纳，但是针对具体类型的应用依然有迹可循：

大量键盘输入类型应用：大量基本资料输入，键盘操作多余鼠标操作

关联编辑设置类型：一般的后台管理系统，鼠标操作多余键盘操作

搜索浏览类型应用：

数据分析类型应用：图标，曲线，对比，合并，分拆等等

评论交流bbs类型应用：大段文本和大段评论

日志博客blog类型应用：大段文本，但是少评论

短消息微博类型应用：社交性大于内涵本身

教程类型（高手）应用：制作个人教程，比如腌制泡菜等

文档分享类型（ishare）应用：

知识内容（wiki）应用：

专业提问回答（stackoverflow，知乎）应用：

视频应用：

音乐应用：

游戏：

在线办公：

....

根据应用的类型，和针对的人群，可以预测到应用的注意点（好吧这里纯属是吹牛）

控件：

你觉得你缺少的是控件吗？你觉得你了解这个控件的本身的内涵吗？

控件和UI画面只是其表，而起本身所代表的内涵才是其里。了解控件的内涵，才能在表达设计思想的时候更加顺心顺手。执着于控件和UI展示本身，而忽略了应用所表达的思想本身，很容易张冠李戴，做出不伦不类的东西。只有其型，而失去了内涵本身。正如前一部分所说，我认为应用其实就是设计者和操作者得思想碰撞，没有把握这个思想的基础上就开始做控件开始设计画面实在是缘木求鱼。

这里我仅仅列出常用的控件：

展示型控件：

图片走廊：

卡片布局：

列表：

二维表：

日历：

目录型控件：

编辑型控件：

单值录入：比如input，select ，radio等

多值录入：比如checkbox，select（可多选）等

级联录入：比如多个select的级联

区间录入：两个日历的区间录入

多key单值录入：比如根据login name email的模糊查询

勾选录入：比如checkbox

查询录入：比如根据一个关键字查询出一个对象

自动录入：根据其他栏位的值，自动填入

缺省录入：默认值

......

命令型控件：

对控件绑定了处理事件的均可以视为命令型控件，比如按钮，链接，以及可响应的其他的元素等。

===================================================================================================================================================

编辑型控件的组装--功能性控件：

可编辑二维表：

可编辑目录：

可编辑组合form：

互斥列表：我有的你不能有，你有的我不能有

查询过滤选择列表：输入条件更详细，则执行过滤，输入条件更简略则执行查询；或者每次都查询

... ...

可编辑型（或组合）控件的值版本：

初始值：会有一个最原始的值，比如直接从服务器取到的数据，如果没有呢，就是空

当前值：每次结束编辑的时候，会有一份数据产生，这里的数据来自控件的值

临时值：在开始编辑和结束编辑之间，控件有一份临时的值

所以呢，如果每次结束编辑的值，都保存下来，这些不同的当前值，就构成了一个个的历史版本。这就是可编辑控件的三值状态。

可编辑型（或者组合）控件的常用操作：

渲染：

初始化：

加载填充：

追加插入：

替换修改：

删除：

初始化值：

开始编辑：

结束编辑：

取消编辑：

取值：

设置值：

格式化值：

取原始值：

取当前值：

取临时值：

不可编辑状态设置：

验证和提示：

联动操作：在组合使用的时候用

销毁：dom销毁交给浏览器即可，但是一些数据和痕迹的清理则需要手动执行

通过对上面的这些描述，可以发现，这些东西要想整齐呢，就要和父容器的行高，列宽对齐。可以想象父容器内部有N多的参考线，然后这些元素布局都和某些线进行对齐即可

渲染：
渲染我的理解就是把设计好的布局和元素显示在页面上。那么渲染可以认为是布局的实现。页面整个加载过程呢，可以认为是对页面上每个元素进行渲染，当这些元素都渲染完成后呢，整个页面也就是完成了。
鉴于程序是表达的这个基础，我为渲染增加了额外的内涵。渲染不只是对渲染元素这么简单，因为页面的元素之间是有关系的，比如table一行的数据，所以放到一行，因为这一行东西一般描述了一个对象的若干属性，是一个完整的内涵。渲染不仅仅是渲染元素，而且是渲染一个个的意义单元。

从这个角度看，我列出常用的意义单元：

列表：列表表示一个类型的如干候选值，他们之间的关系是平行的。候选值本身一般是一维的。那么表示出来，可以是ul，可以是select，也可以是radio，checkbox等。表示一个系列的若干值。

二维表：类似列表，但是候选值一般是多维的。如果只有一维，那么和列表就非常相似。比如，zk中的listbox可以做table也可以左select

标头：一般是简短的文字，用来对网页的结构进行分隔，说明整个网页的内容结构。

标签：一般是简短的文字，用来对后面或者下面的元素进行说明，一般用在form表单中居多，用来说明输入栏位的用途

提示：一般是对标签的补充，或者其他提示信息，比如title，比如alert等

表单：是收集用户资料，用来检测用户需求的地方

文本：大段的文字，一般是在论坛或者博客中，是长篇的正文

插图：额外的相关图片，用来说明文本。文本不同，插图会相应的变化。

图标：与其他提示性元素比如按钮，标头，标签等配合，用来加深对此作用的理解，如果使用不当，反不如不用。一般图标在整个网站构建中是稳定的，风格统一的。

交互：
我认为交互就是大家根据自己的经验和理解，在对网站获取足够的理解后，对网站进行的操作或者探索性操作。对于大多数人来说，交互式通过鼠标或者键盘操作的（触屏）操作的。操作者对页面进行操作的是根据自己的理解，换句话说是根据自己的思想，所以可以这么认为，每次操作时操作者意图和思想的一个体现。由此呢，也和最初设计网页的意图不谋而合。

所以，合起来看，交互就是操作者得思想和设计者（实际上是开发者）思想进行的交互。@**@（也许以后会发明脑波控制技术，不用动手，这样就真的是两者思想的交互啦！！）。那么再看，设计者表达思想是通过对网页的布局和渲染来表达的，而操作者交互式通过鼠标和键盘表达的，因此呢，中间有需要有个东西来把这个东西衔接起来，即是把网页元素和浏览器事件关联起来。

网页元素和浏览器事件的关联的目的是检测操作者表达的思想。

可以想见，如果一个无聊透顶的人，拿着鼠标乱晃，其移动的轨迹和频率和一个目标明确（比如查询考勤异常的人）移动鼠标的轨迹和频率是完全不同的。

甚至说有些人习惯性的在阅读的时候喜欢眼球跟着鼠标（或者鼠标跟着眼球）走，碰到重点甚至用鼠标滑动或者来回的移动（考虑下那些在树上用各种颜色把自己认为重要的东西涂
上颜色的人），这样我们就可以检测到用户对那些内容感兴趣，他所关注的东西是什么。

再比如，当遇到疑问的时候，会习惯性的思考，而思考的时候，一般是不会同时进行操作的，这是鼠标是暂停的，当鼠标暂停的时候，是不是说操作者在思考，在疑惑（想想你合上书本托着脑袋思考的情形）？
再比如说，当我们查找东西的时候，或来回的翻腾，如果你发现操作者在不同的页面或者一个页面的不同部位来回的翻动时，你是不是觉得自己的导航和重要内容摆放的不是很合理？？
再比如说，当操作者再填写表单的时候，频繁的取查看title提示或者做了比较长久的停顿，那么是不是意味着表单的标签说明不够浅显易懂或者含糊不清呢？导致操作者需要思考良久来做出一个艰难的决定。

综上，可以发现为用户提供点击，输入，拖拽，滚动，跳转，等功能仅仅是让用户在做出决定后有所行动，而这些简单的东西却不能很好的反映出用户在做出决定前得思考，所以在设计网页的时候，就要想办法减少思考时间，尽量直白的表达设计思想。

那么交互设计，我认为包括两个部分，一部分是为操作者提供行为，一部分时辅助操作者进行决定（思考）。如果说程序设计是一门艺术，那么我想加上一句，它来自于生活，忠诚于生活，但是不高于生活。

从行为的角度看，常用的浏览器行为：

单击左键：

单击右键：

双击左键：

双击右键??：

键盘功能键：ctrl shift tab enter space 上下左右导航键，pageup pagedown翻页键

拖拽：有拖拽移动，有拖拽滚动，有拖拽换屏。。。。

关闭：关闭提示，窗口，广告，flash。。。

鼠标移动：

鼠标悬停：

鼠标手势??：

鼠标无节操动作：

从意图的角度看，常有的行为：

登陆：

提交：

阅览：各种弹窗，各种广告，各种晃动，各种配色！！！

注册：我是不是碰到查户口的啦

评定：万恶的验证码，万恶的会员制，万恶的等级制

上一个画面：修改？遗忘？冲突？才明白上一个画面是干嘛的！

下一个画面：

寻找：

复制：

黏贴：

编辑：

重新填写：

返回编辑：

重填某栏位：

保存：

对比：

汇总合并：

切换：

居中操作：不习惯在边边上看东西

全屏操作：不习惯在一堆额外的无关信息中看东西

选中：

查看提示、说明：

搜索：不要老给我过期的东西好不好？？01年的新闻，我去！匹配度太低？我去！！

退出：

发狂：各种郁闷直接导致发狂，直接导致无节操操作

不想透漏隐私：银行卡？密码？身份证？手机号？NO，我顶多给你个邮箱！你呀查户口呢？！

不想填写过多选项：满屏的按钮和input，头大，哥不玩了还不行？

刷新：最常见的原因就是网页打开太慢或者网页打开出现了问题

意图与行为的结合（偶也只能胡诌乱编了，所以，还是留到以后再写吧）

那么如何在没有良好规范的环境下做出良好的交互效果呢？

用户行为收集：（：） 我错了，还是不要这么干了）

虽然没有很好的办法对所有的东西进行良好的概括归纳，但是针对具体类型的应用依然有迹可循：

大量键盘输入类型应用：大量基本资料输入，键盘操作多余鼠标操作

关联编辑设置类型：一般的后台管理系统，鼠标操作多余键盘操作

搜索浏览类型应用：

数据分析类型应用：图标，曲线，对比，合并，分拆等等

评论交流bbs类型应用：大段文本和大段评论

日志博客blog类型应用：大段文本，但是少评论

短消息微博类型应用：社交性大于内涵本身

教程类型（高手）应用：制作个人教程，比如腌制泡菜等

文档分享类型（ishare）应用：

知识内容（wiki）应用：

专业提问回答（stackoverflow，知乎）应用：

视频应用：

音乐应用：

游戏：

在线办公：

....

根据应用的类型，和针对的人群，可以预测到应用的注意点（好吧这里纯属是吹牛）

控件：

你觉得你缺少的是控件吗？你觉得你了解这个控件的本身的内涵吗？

控件和UI画面只是其表，而起本身所代表的内涵才是其里。了解控件的内涵，才能在表达设计思想的时候更加顺心顺手。执着于控件和UI展示本身，而忽略了应用所表达的思想本身，很容易张冠李戴，做出不伦不类的东西。只有其型，而失去了内涵本身。正如前一部分所说，我认为应用其实就是设计者和操作者得思想碰撞，没有把握这个思想的基础上就开始做控件开始设计画面实在是缘木求鱼。

这里我仅仅列出常用的控件：

展示型控件：

图片走廊：

卡片布局：

列表：

二维表：

日历：

目录型控件：

编辑型控件：

单值录入：比如input，select ，radio等

多值录入：比如checkbox，select（可多选）等

级联录入：比如多个select的级联

区间录入：两个日历的区间录入

多key单值录入：比如根据login name email的模糊查询

勾选录入：比如checkbox

查询录入：比如根据一个关键字查询出一个对象

自动录入：根据其他栏位的值，自动填入

缺省录入：默认值

......

命令型控件：

对控件绑定了处理事件的均可以视为命令型控件，比如按钮，链接，以及可响应的其他的元素等。

===================================================================================================================================================

编辑型控件的组装--功能性控件：

可编辑二维表：

可编辑目录：

可编辑组合form：

互斥列表：我有的你不能有，你有的我不能有

查询过滤选择列表：输入条件更详细，则执行过滤，输入条件更简略则执行查询；或者每次都查询

... ...

可编辑型（或组合）控件的值版本：

初始值：会有一个最原始的值，比如直接从服务器取到的数据，如果没有呢，就是空

当前值：每次结束编辑的时候，会有一份数据产生，这里的数据来自控件的值

临时值：在开始编辑和结束编辑之间，控件有一份临时的值

所以呢，如果每次结束编辑的值，都保存下来，这些不同的当前值，就构成了一个个的历史版本。这就是可编辑控件的三值状态。

可编辑型（或者组合）控件的常用操作：

渲染：

初始化：

加载填充：

追加插入：

替换修改：

删除：

初始化值：

开始编辑：

结束编辑：

取消编辑：

取值：

设置值：

格式化值：

取原始值：

取当前值：

取临时值：

不可编辑状态设置：

验证和提示：

联动操作：在组合使用的时候用

销毁：dom销毁交给浏览器即可，但是一些数据和痕迹的清理则需要手动执行