关于UI的一次讨论——来自项目管理群的讨论

不胜人生一场醉 说:
有没有人听我瞎掰的
Ted-项目经理-北京 说:

huyg-.net-bj 说:

不胜人生一场醉 说:
给点掌声啊
huyg-.net-bj 说:

不胜人生一场醉 说:
今天我发现了一个电脑使用现状，分享一下给大家，同时聊一聊UI的问题
成成-PM-上海 说:

京新-质量管理-bj 说:

不胜人生一场醉 说:
我身边40%的人是电脑初级者，即会使用QQ和看电影的人
50%的人是电脑盲，从来不用电脑的人
会用QQ的人，不会用视频聊天，不知道接收文件在哪里？不知道怎么打开文件？不知道怎么拷贝东西
如果QQ弄出来一个傻瓜版本多好啊
QQ自带媒体播放器，QQ自带资源管理器，QQ设置的时候自动增加一个分类，设置爸妈姐妹，然后就放个视频聊天，把视频转成文字之类
让不懂电脑的人一看就会
我想说的是现在的界面对于大多数人而言还是过于复杂了
玉-cm-bj 说:
嗯 。
不胜人生一场醉 说:
比如手机，不会发短信的人大有人在
不会接听电话的人也很多，我爸妈就怎么都学不会
有没有办法让UI更傻瓜化一些呢？
如果手机傻瓜化一些，就相当于打开了其余50%人的钱袋
这个小草可以思考一下，呵呵
Richard李明-项目主管-北京 说:
早期的电话都很简单啊
不胜人生一场醉 说:
比如iphone定位于中高端人群，压根也没想过低端人群
玉-cm-bj 说:
可是现在的手机越来越复杂，操作。
不胜人生一场醉 说:
假如我们的山寨机考虑一下低端人群，就不会弄那些炫而不实的滑动功能之类的
考虑到低端人群的绝对数量，尽管消费能力有限，其实还是有必要的考虑他们的需求的
玉-cm-bj 说:
因为现在的人都只想在最短的时间里赚到更多的钱，很多都是快速开发，快速销售。
不胜人生一场醉 说:
对，快速占领某些市场
而不是普及市场
再返回我们的应用程序和互联网站
都是密密麻麻的资讯栏，密密麻麻的文字，大量的广告，可能我们还能去看
玉-cm-bj 说:
我周六去一趟电子市场，基本上每个手机专卖店都在做苹果的广告。
不胜人生一场醉 说:
可对于我们父辈的人，尤其是农村的人，一看就眼晕了
不知道该看啥，他们也许想看新闻，可一看那么多东西，反而不知道该看啥了
玉-cm-bj 说:
嗯。我花了一个星期的时间才教会我妈打电话。
不胜人生一场醉 说:
我爸妈现在还是不会用手机
我们的应用程序也是如此，一方面迫于客户的需求压力，一方面何尝不是带有炫耀的成分呢
很久以前我提到过一次曾经公司想开发一款B/S和C/S结合的证券资讯产品
初步尝试了一下，打开整个页面需要40秒时间
每个部分都采用AJAX，每个区域都在不停的转动
是不是过犹不及
凡事希望再简单一些，能够照顾到多数人的感觉，这才是成功的关键，除非你只想某部分人群
我在程序员上看到过一篇关于网站UI的文章
以及我2009年底也曾花了几个月规划过公司的网站
观点不谋而合
主网站框架
栏目
重点资讯 主资讯 推荐资讯/点评
---分割栏目
重点资讯 主资讯 推荐资讯/点评

一级栏目框架
二级栏目
重点资讯 主资讯 推荐资讯/点评
没有分割栏目了
二级栏目框架
主资讯 推荐资讯/点评

基本是三层结构
关于UI，需要强调的是灵活性和标准型
灵活性，我建议用CSS来做到图形和数据的分离
有一次做登陆界面的设计
当时代码写好了，需要美工协助提供登录界面的UI
结果这家伙发给我一个html文件，我一看傻眼了，全文由70、80个图片构成，美丽是美丽，可变成拼图了
打回去重新设计，这次很简约发给我4张图片，却没办法和登录框整合了
图形和数据的分离说起来容易做起来还是很难的
Richard李明-项目主管-北京 说:
赞
不胜人生一场醉 说:
一个是我们不具备先见之明和预见能力
再一个是我们潜意识都希望能够把界面做的好看一些
Richard李明-项目主管-北京 说:
图形小传送能快吧
不胜人生一场醉 说:
理论上用css的图形分割更快
我记得在有一本UI的书中有提到过
能够缓存起来供不同的页面去使用
Ted-项目经理-北京 说:
CSS Sprites？
不胜人生一场醉 说:
规范化
说到规范化，我曾在阿三公司接收过银行系统的培训
对
stone-高级技术经理-想回上海发展 说:
雅虎的前端优化理论里，提倡拼图，这样可以减少请求次数，
不胜人生一场醉 说:
我大致可以描述一下
对于一些从不改变的二选一三选一常量用radio button
对于3个以上10个以内的基本选择使用下拉列表
stone-高级技术经理-想回上海发展 说:
不过UI确实需要尽量的简化，我喜欢简约的风格，我现在公司的老大，就太偏爱那种所谓炫的效果
不胜人生一场醉 说:
对于10个以上的选择使用数据窗口，即数据从数据库或缓存中获取
对于超过30个以上的选择，则使用弹出式窗口，并提供分页功能
lastwinner-pm-bj 说:
超过30个的，还要提供搜索
不胜人生一场醉 说:
对于需要检索条件的查询，使用弹出式窗口+条件输入+查询分页
什么样的需求使用不同的控件是有标准
而且所有的界面的样式风格完全是一致的，
看上去很协调，但不一定很完美
lastwinner-pm-bj 说:
网站可以不用图片也做得很漂亮，当然这样子的CSS成本会太高
中和一下，少部分图片 ＋ 较为强劲的CSS，可以达到最小的网络流量展现最美的页面

不胜人生一场醉 说:
对头，我不是java和架构专家
但在带南京项目做压力测试的时候也发现了这方面的问题
比如1000并发测试，遇到有问题的页面，需要了解页面上每个组件的生存周期，确实会发现个别图片上存在很大的迟缓
再接上面，所以后来我在带一个报表portal team的时候，就充分学习了阿三界面的做法
所有的控件和数据可通过XML实现配置，包括数据窗口
我个人小时候学过中国画和素描，也在大学时搞过宣传和版面设计，对艺术还算有一定的眼光，但对UI没有专门的经历

Richard李明-项目主管-北京 说:
厉害厉害
lastwinner-pm-bj 说:
UI与美工的工作是紧密结合的
不胜人生一场醉 说:
关于UI界面的统一问题，我可以举个例子
有一次在深圳联通做Call Center项目
工作流、知识库、公告便签大概200~300个页面
需要调整成统一的风格
开发的时候，全都是以需求为主的，也没想过UI统一问题
需要统一的时候，咋办
只好建了一个CSS的文件
然后逐页修改其中的class或ID标签
大家都知道web页面中的table和div标签很难调整
一不小心就乱了套
有时候一个页面要调整半天时间
每个页面还需要增加一个打印功能，咋办
只好每个页面复制一份，改成文件名_print.jsp的格式
然后继续修改其中的css
一共几个人花了一个月才把这几百个页面调整完毕
如果换成内置好的CSS，没准，改个头文件的指向就over了
综述一下
对于UI呢
我的看法是中庸就好，不要过于炫丽，在简单和主流之间平衡吧
Richard李明-项目主管-北京 说:
嗯，没法使用模板？
不胜人生一场醉 说:
合理的设计程序，预留一些标签，充分发挥CSS的功能
其次呢做好规划和标准化工作
over了

真累
Ted-项目经理-北京 说:
预留一些标签是指什么
不胜人生一场醉 说:
class和id标签留给将来的css
最好是在做一些标准化的模板，随时可以查看效果
Richard李明-项目主管-北京 说:
嗯
Ted-项目经理-北京 说:
我想问个关于页面入口数量的问题
不胜人生一场醉 说:
呵呵，说来听听，我只是瞎掰而已，绝非专家
Ted-项目经理-北京 说:
为了提高用户操作的方便性，一个功能页面可能会有许多的入口，也就是被多个界面调入，但是这样做在实现返回功能的时候会比较复杂，而且会对将来的维护造成不便，怎么设计能解决这

个矛盾呢
不胜人生一场醉 说:
提供复用性，尽量一开始规划好一些相应的入口出口参数和设计工作
建议建立一个网状关系示意图
提高
做适当的冗余
Ted-项目经理-北京 说:
我现在的做法就是尽量简化入口，一个功能界面尽量减少调用页面
lastwinner-pm-bj 说:
Ted的问题，只存在如何平衡的做法，不存在如何解决的说法
不胜人生一场醉 说:
从程序的角度是对的
没有绝对的做法
Ted-项目经理-北京 说:
从用户的角度来说，如果一个功能入口太多也不见得就是一个便利
不胜人生一场醉 说:
还有一个办法，把页面组件化分割
lastwinner-pm-bj 说:
例如dvbbs/discuz等，他们在后续高版本的论坛设计的时候，就会考虑换肤的问题，这样就如小醉说的，换一套CSS模板，网站页面风格就变了，很方便
Ted-项目经理-北京 说:
换颜色还是比较简单的，如果换布局风格就难了，对CSS设计人员要求太搞
lastwinner-pm-bj 说:
另外更高一级的模板，就如blog那样的，可以定制各个区域的位置，不同的模板有不同的展现，这就绝不是变动下css就可以做到的
变格局需要做到CSS与格局设计分离，各司其职
不胜人生一场醉 说:
页面组件化分割，呵呵
差不多就这个意思
Ted-项目经理-北京 说:
组件太多对于并发访问的反应时间是不是会有影响
Jimmy-求职中（项目经理/开发经理）-北京 说:
一开始就需要规划好好，什么样的div中放什么样的内容，后期通过CSS换风格就容易了。
不胜人生一场醉 说:
传统的方式看来，一个页面内进行整体显示会对用户的体验造成不良影响
基于Ajax的方式可以提高用户的体验，而且局部静态化、缓存化、伴随着局部刷新应该可以更加有利于并发访问吧
Jimmy-求职中（项目经理/开发经理）-北京 说:
得具体分析吧，我看过有的页面是第一次加载的时候就先加载一个页面，然后再对里面的组件数据用Ajax的方式加载。这样服务器端收到的请求次数多了很多，如果该页面的数据量不是很大

的话。这样子做并发性会更差
不胜人生一场醉 说:
应该这么看
4次传输250k的数据会比一次传输1M的数据要快一些，呵呵
Ted-项目经理-北京 说:
为何？
Jimmy-求职中（项目经理/开发经理）-北京 说:
但是服务器需要开4个服务线程
不胜人生一场醉 说:
不过ajax也有自己的问题
一个是XML的开销，一个是浏览器并发数的限制
Richard李明-项目主管-北京 说:
数据传输是分段进行的，数据越长，数据包就越多
不胜人生一场醉 说:
关键的因素是
使用Ajax可以实现页面的局部刷新，但是如果页面的每个部分都改变了，为什么不重新做一次服务器请求呢
一部分的改变更适合ajax
Jimmy-求职中（项目经理/开发经理）-北京 说:
XML的开销可以用JSon代替，这个能大幅度减少传输数据量