最近被甲方客户虐的体无完肤，反复的修改，反复的推翻，在加班空隙之间，正好想到把手上案例拿出来分享，简单介绍一下方寸之间的复杂交互是如何实现。首先看图：
这块筛选条件逻辑如下：
- 先判断有多少条件，如果大于两条，就只显示两条，多余部分隐藏起来，在页面正中显示向下箭头图标；（图1）
- （接上条）在只显示两条条件情况下，点击向下箭头，显示所有条件，并把向下箭头改为向上箭头；（图2）
- （接上条）在显示所有条件情况下，点击向上箭头，收起到只显示两条条件，箭头仍保持向上；（图3）
- （接上条）在只有两条条件且箭头向上的情况下，再次点击箭头向上，就可以完全收起条件区域；（图4）
- 条件分为两种情况，正常情况如（图1）第一行“机构级别“，在一行中罗列出所有属性，超出部分隐藏截断，点右侧的”更多“或”多选“按钮才能展示；
- 条件的另一种情况，数据海量情况如（图1）第二行”调度机构“，那就按首字母 A~Z 方式，给条件的属性做分类；
- 条件的属性选择之后，会在条件区域下方出现选择结果，如（图3）文本框上方，并可点叉叉取消刚才的选择；
- 模糊搜索文本框在输入文字时，每输入一字，会罗列出所有首字同输入内容的属性，如（图4），这叫”文本框智能提示“；
现在看到的图片配上文字，也许能清楚的说明这块区域的功能，但实际工作中，很难用精准的语言表达清楚要做的事情，所以前端工作量蔓延主要在与这里，经验丰富的程序员会事先把风险点列出来，讨论后再进行工作，新手只能步步趟雷，祈祷好运。
如何解决这个问题？那就需要专业的人事先做好规划，专业人员可绘制出可交互原型（推荐Axure或Visio软件），普通用户可直接在纸上或word中绘制，并在边上加上注释。
为什么要给这样一个区域设计的如此反人类，只有四个字”用户体验“。我个人并不是很喜欢这种交互方式，网页中各个元素互相争夺视觉焦点，其实设计最高境界是”少即是多“，如百度的首页。
正好借这个机会普及下软件（网站）开发的几个岗位：
- 写出上文逻辑条件（1）~（8）文案的角色是产品经理
- 能用 Axure或Visio画出交互图的角色是交互设计师
- 能画出漂亮效果图（1）~（4）的角色是界面设计师（UI、美工）
- 能把这些图片转换为HTML页面的角色是前端工程师
- 能接入真实的后台数据，并上线让用户看到效果的角色是软件工程师（程序员）
- 做好了看看有没有问题的角色是测试员；
- 上面每件事都懂一点的是项目经理。
- 当最不能忘了最后拍板、掏钱的幕后黑手，甲方！