第一种是这样，称为右对齐/左对齐，左边的标签右对齐，右边的输入框左对齐（来自yahoo）：

第二种是左对齐/左对齐，左边的标签左对齐，右边的输入框左对齐（来自Google）：

另一种方式是标签在上，输入框在下（来自豆瓣）：

（以上源页面版权归各网站所有，红色或绿色的指示线为作者添加。） 

这三种方式各有什么不同呢？

从视觉流来看，右对齐/左对齐强调的是标签和输入框这一对元素之间的关系（从左到右，它们在距离上最接近），缺点是，如果左边的标签长短差别很大，就会造成参差不齐很难看的页面；左对齐/左对齐的布局削弱了这种标签－输入框的对应关系，但是很方便从上到下浏览所有的输入标签，当然，如果左边的标签长短差别大，也会造成距离过远，难看的页面；上下布局则兼顾了标签和输入框之间的关系，以及从上到下的很好的逻辑顺序，它的缺点是，不适合输入框太多的情况。

左右两种布局在中文界面上也许可以取得一致，即，让所有的标签长度一致，在左对齐的同时也右对齐，中文真是一门奇妙的语言，在英文页面上，就很难做到这一点了。

 问题：

什么时候应该采用右左布局，什么时候应该采用左右布局？

为什么我说上下布局不适合输入框太多的情况？

我的回答：

1、右左布局：当输入框为多个并且类别相同，字段长短较一致时，建议采用右左布局；

2、左右布局：当输入框多，但类别不一致时采用；

3、上下布局：当输入框较少，但是引发的提示或帮助较多时，建议采用；不适合输入框多的情况，因为页  面占用较大，跨度较大；连贯性不强，但是易于区分；

     今天看到了这样一篇文章“我对最近这个交互设计项目的总结”和我的现在的处境一样，公司为了大家学习，也买了《About Face 2》，看了近半年了，好像也没有什么长进，今天也总结一下把；

   结合图说一下我对项目的看法把：

（借用朋友的图片）图示中写的很详尽，确实给了我一些指导，在我的项目中，首先我定义了使用系统的人，和他们使用系统的目的，合理的拆分出来我们要用系统给用户提供什么（who？what？）；

    其次，我了解了我的主要角色和次要角色甚至是反面的，使用的方式是用word画头脑风暴图示，从主要的工作中，找到他每天，每周，每月要做的主要事情和次要事情（how）；

    再次，我梳理了他们的任务，哪些是他的核心工作，哪些是辅助工作，甚至为了提高工作效率，可以提供哪些更多的增值服务；

    而后，“跟踪”了解他的使用习惯，验证我在上一步记录下来的工作，验证合理性和他实际操作的习惯；包括他日常桌面上的便签，还有那画花的日历等等，记录下来，用拼图的少儿技巧，累计他的习惯；再制作卡片，让用户对自己测试，适当的为自己排序，当然，我会尽量避免不用引导性的词语；有用了一些“会议访谈－－专题采访”的方式，有目的的挖掘我想要的东西；

    最后，整理成用户角色文档，包括他的使用习惯，他的主要职责，他的环境照片，他的工作流程，以及他个人的系统需求；这样用户角色调研就告以段落了，下面是分析阶段；

    按照梳理好的用户角色文档和业务流程图，画交互图（在纸上，用铅笔），就像Ami说的一样，用别针把一个一个流程夹好，相似的流程放到一个档案袋中，再梳理一下总的流程框架，划分系统的主要流程和辅助流程，用图示表示直接的关系，分析整理，搭建好系统界面的框架；

    框架好了，接下来我就按照大功能点，再次梳理流程草图，制作visio界面demo，请流程分析师和需求人员，听我演示流程的场景，提出疑问和修改意见；最后自己整理成visio，紧接着，对界面流程的页面跳转做细致的交互，从每一个下拉，每一个窗口的名称，甚至按钮用图标还是文字等都做一致性的定义，输出初稿界面；有界面了，有了讨论的依据就可以找用户测试了，记录我的失误和不足，反复测试修改；（当然我只能做到打印出来界面，口述讲解）

    这就是我开发的过程，其实还有很多不足的地方和困难，今天要看柯南了，明天继续呀！！

未来五年内，这五项创新可能会改变全球各地人们的工作、娱乐和生活方式。当然，这并不都是 IBM 的想法……我们只是通过最近一项名为“InnovationJam”的在线头脑风暴讨论会，收集了 104 个国家或地区的 15 万参与者的想法，另外还收集了 IBM 研究实验室和业务咨询智囊团的深入见解。

请花五分钟了解一下“未来五年中的五项创新”：

• 人们能够从全世界的任何地方以远程方式接受医疗保健服务
• 曾经只能在科幻小说中看到的实时语音翻译将变得司空见惯
• 将出现 3 维因特网
• 采用纳米技术解决环境领域的多个重大问题
• 移动电话能更准确地“读懂”我们的想法

很酷，听说过，但是实施起来还不清楚怎么去搞呀，但是看到IBM好像很有信心做好的样子，期待出炉呀

上图，是实时翻译的插图，  好像我英语烂也没有什么关系了～～

上图，是web三维的效果，呵呵，可以悠闲地坐在自己家中，以虚拟方式逛商店、和专家交流，甚至可以试穿衣服。或者可以虚拟地重新布置家中的某个房间：摆放不同的用具、尝试各种橱柜样式和颜色等等。

那不就是足不出户了，还可以尝试不同的饰品和美食了，酷  

连接：http://www-900.ibm.com/ideasfromibm/cn/fiveinfive/010807/index.shtml

但是项目组中的配合一直是不顺利的，所以我请教了一些朋友，了解一下他们是怎么处理UE和项目成员的关系的，

就像（http://www.ucdcn.com/?action_viewnews_itemid_233.html）阿斯兰说的“现在部门的UE工作逐渐走向了正轨，回想起来，觉得能有今天的工作氛围是十分不容易的。”是呀，一个新的角色进入，对传统项目成员造成的冲突原来是这样的复杂；

其实我和朋友的经历是瞒像的，他在**的UE工作是从“可用性测试”开始的，我也是，都是在没有参与到前期工作中去，很多可用性问题被发现时已是为时已晚。只能写一些我对软件试用的感受而已，而且刚进入没有很专业的方式和方法。

之后，我开始负责一个全程项目的UE工作，同时公司的领导都是很支持的，刚开始，我也是按照可用性工程的流程安排工作。先了解用户，从他们的操作习惯和每天的工作重点调研开始；再通过流程分析师书写的业务流程，经过需求对系统功能点的把握，最后又策划界面框架，设计、评估、测试流程。。。但是经过几个月的工作实践，发现精力不够，并且像“阿斯兰”说得那样，“再加上后期的测试、改进，会使项目进度变慢。”不止如此，传统项目中的角色都不适应UE的介入，认为UE一旦介入设计界面就是UE的工作，他们认为从UCD的角度来说，都应该是UE的工作，在项目中，就不免有了抵触的心态；

其实，根据项目和时间的积累，大家应该会更好的沟通合作才是，下面摘来交互设计的流程，希望同行的，非同行的项目中人事了解，我认为只有彼此了解对方的工作，才可以更好的配合！

原文连接http://www.ucdcn.com/?action_viewnews_itemid_163.html

交互设计师的工作其实就是写说明文档和画流程图和反复讨论,和反复讲道理.贯穿产品开发的整个过程,调控产品,用户,技术,美术,策划,商业决策之间的交互关系.

其实同行都有这样的困惑，可以参看“阿斯兰”的心声，写的很好，很贴切呀。

http://del.icio.us/　 del.icio.us,
http://shuqian.qq.com/　 QQ书签
http://cang.baidu.com/　百度收藏
http://myweb.cn.yahoo.com/　雅虎收藏+
http://www.google.com/bookmarks　 Google Bookmark
http://favorites.live.com/　 Live Favorites

 

很眼红，这几个我都没有用过，但是看xiaoxiao那么辛苦，我也试用一下。。。

一、 以上六种收藏夹产品，你经常用的是哪一个？哪一个没用过？如果以上产品没有你用过，请列出来你正在用的产品。 

我好像都不经常用呀，用过遨游的收藏夹，有一个帐号就可以在不同的机子上记录自己的收藏了，结果是不喜欢他的显示页面的方式，所以也丢掉了。。。

昨天我原本想试用一下QQ的，但是好像找不到地方，不知道是不是这里，要是对的话，好像不是很好用呀！

理由一：（下图）输入了连接和名称后，我不知道应该点击“添加”还是“确定”，当我输入后我点击了“添加”，结果就是只有名称没有地址

理由二：（下图）当我没有填写完全部信息时，出现了下图“请输入完整的信息”；我认为这样不够简洁，在这样的情况下，可以自动跳转到要求我输入的点，用不同的颜色提示即可，没有必要弹出，弹出后，我依然不知道怎么填写，这样对一个初级用户来说是不合理的，因为在上一步，我已经把名称和地址都输入了；

理由三：命名重复时，没有提示，可以继续添加；好像也是不能分组把？

理由四：（下图）钩选和点选可以同时存在，会不会有影响呢？好像是钩选的可以查看，点选的可以删除？但是给了我很多疑惑！

理由五：（下图）如何误操作“删除全部”时，没有提示，让我再次确认，删除后有没有恢复之前记录，对我的记录造成了不便！

     其实我还是存在本机的几率大些，因为ie给了我一个很方便的存储方式，还有就是，入口比较简单，在看什么页面的时侯都可以进入收藏，并且记录了当前所查询的相关信息，也有合理的分类，不舒服的就是一做系统，忘记导出，就over了。

上面对QQ的看法，只是我个人意见，一个初级用户的看法，说不定多数地方不对，xiaoxiao不要扁我呀！


二、请列出你经常用的收藏夹的最优的交互点，请从入口到使用结束描述。请分析这种模式为什么好，可以从角色上分析上，比如角色入口、角色的类别、角色的活跃度。分析要点请用1>,2>,3>, …列出。

      角色：计算机可以熟练操作把，对软件有很多的分析，但是对网络管理还是初级用户；我和兔子很像吧，平时使用的是本机的收藏夹，它的优势就是快捷、方便。
     因为开QQ了才能，用QQ标签保存（目前我是这样用的，有什么好方法可以call我），所以我任务不便捷，而且在qq里面打开也不方便的；QQ的功能很多，聊天做的很好，但是其他的功能我很少用到呀！（QQ太强大了）

我用IE比较多：

1、             入口：简洁，随时性比较好，重要的是他的添加是距离我操作最近的地方，这一点，google的工具条也很好用的，但是必须我的每台电脑上都装（上班一个，家里一个，有时还用笔记本），呵呵，要用的地方比较多；

2、             角色：我是一个移动主义者，保存的几率比较高，但是是有阶段性的，一般经常操作的网址，我会记住开头，这样ie自动有记录，方便，快捷，娱乐性的网址我会放在收藏夹中，但是我是一个经常做系统的人，所以希望能够有一个随时可以添加的，可以保存在网络上的，这样最好了；

3、             活跃度：不用说了，总是以“80年代后”自居，是高活跃的网民，每天都会保存地址，所以分类对我很有效；

 
三、反之，请列出你认为某一个产品中交互最不好的地方，并提出你的改进意见。如果你有成熟的观点，不妨一一列出。

没真正使用过也不好说什么，我不愿用的原因是因为还要上网打开网址，输入密码什么的太麻烦。兔子这条，本身就是他的缺点所在；

这也是我的想法，没有真正好好体验，所以不成熟，我会继续关注～～～


四、你对收藏夹这类产品有什么看法？想说多少就说多少吧，请用1>,2>,3>, …列出。

     1、收藏夹用处很大的，起码不用把别人的网站都在博客中建立连接

2、随时性很重要，希望可以在触手可及的地方快速添加，并且不需要我的输入

3、移动性要强，在不同的机子上保留了相同的记录

4、个性化分类设置要多，但是要简洁明了

5、操作简洁，查询便利

6、其实右键添加到一个地方，使用时右键选择，是一个我认为简洁的想法哟～～

呵呵！这样就差不多了把，想到什么我会及时提出讨论呀！


五、列出你对收藏夹设想的功能，可以超前一点，web x.0一点，想法怪异一点…都可以。
如果可以离线使用兔子简直和我的想法一样，还有我要增加的是 可以使用快捷键，一键跳出我的收藏，而且这个收藏夹要记住我（好像不太现实）

六、你对QQ书签的感觉如何，如果现在给你一个机会，让你来作QQ书签的交互，你会怎么设计？
    要是改善QQ书签，我觉得应该让我们大家先知道，再便捷我的操作，让我想要的时侯可以随心所欲的跳出来！

                                                                作者：xibei 2007-06-05

项目管理成功之道：做好简单的事情(转载)