在项目经历过程中，经常看到这样的情形：

领导：我们要做一个…

负责人：好的。

负责人：你们每人设计*套效果图出来；

设计人员：好的…

 等到设计人员（指视觉设计人员，下同）把页面效果图设计好了之后，我们针对效果图进行讨论和筛选确定，以确定最终采用哪套设计方案，这个时候大家各抒己见，领导也根据自己看法对不同作品进行筛选，但这个过程中最经常出现的结果就是：每个方案各有不同，包括布局排版、配色方案、整体风格等，但每个作品都不尽人意之处，最后根据讨论结果确定下了一个方案并提供修改意见，项目进入开发阶段。

这个流程本身没什么问题，只要能保证大家选择的方案执行后能得到大家想要的结果即可，但可悲的是我们经常无法得到满意的结果，包括栏目设置缺乏考虑造成运营不善，页面布局不合理造成用户体验下降等等；出现这样问题原因在于：在这个流程中我们陷入了到底该选择哪套方案、陷入了对不同方案的对比甄别中，而我们却忘记了为什么需要这样的方案，我们最原始的需求和出发点是什么？

今天重点谈谈在这样流程中关于布局排版的问题。

 首先，网页排版布局不应该是设计人员为了美化页面而拼凑排列的，就像经常有视觉设计师说“这个地方看起来很空，我得找个*放上去..”一样，我认为：基于页面美化和丰富界面内容的网页布局排版都是不可取的，因此，布局排版体现的是一个网页中各个模块的重要程度和客户可能的关注重点，合理的布局排版应该且必须承担把《我们想要传达的信息》快速高效地提供给用户的重任。

 那么，网页布局排版的决定因素是什么？

1.  网页排版布局的内容来源于需求：网页中是要展示“新闻动态”、“供应信息”，还是要展示“招标投标”、“用户投票”这个要依据项目最原始的需求和出发点，这个页面要满足用户什么需求就要求他比较具备什么功能模块。

2.  网页排版布局的形式决定于模块的重要程度：一个页面存在多个功能模块，它们的展现形式应该如何，就要考虑各个模块的重要程度，重要信息、重要功能模块“靠上靠左”呈现，这是因为这些地方从位置上讲比较有吸引眼球的优势，要做到“突出重点”。

3.  网页排版布局必须首先尊重用户习惯：上面说了“网页排版布局的形式决定于模块的重要程度”但是不是重要的模块就必须“靠上靠左”呈现呢？

未必！

因为“靠上靠左”这是一个相对的概念，就是说要尽量做到重要的信息放在客户容易发现的位置上，但不同用户使用习惯上是有差异的，这就要求我们要在尊重用户习惯基础上来做好页面排版布局，就拿中文网站页面和英文网站页面来说，一个页面里面要呈现的功能模块相同（模块重要性也一样），但这个时候除了遵守“网页排版布局的形式决定于模块的重要程度”外，应该首先考虑中文用户和英文用户浏览习惯上的差异进行有差别的排版布局了。

 一句话：网页布局排版不能太随意！

建议：在产品开发过程中尽量规范产品开发流程，网页布局排版应该交给交互设计人员来做，而不是视觉设计人员，如果视觉设计人员就是交互设计人员，那也要多加思量该网页布局排版的依据。

从自身项目经历来看，我所做的工作基本完整贯穿整个网站产品开发流程，并且很多项目都是兼顾不同开发阶段的角色，从产品定位、产品概念成型、功能规划、架构搭建、界面设计（原型demo）均有涉及，甚至还有少量的视觉和前端，当然重点工作还是前面几个阶段，至于视觉和前端可以说是在项目资源极度匮乏情况下，不得已勉强应付之举。基于亲历这些项目，深切的体验到“用户体验”始终贯穿产品开发项目的过程，可以说用户体验已经成为产品开发项目不得不遵守的“潜规则”，也是影响产品开发完成后能否得到用户认可、市场认可的重要因素，结合最近拜读Jesse James Garrett的《用户体验的要素》，从不同层面对网站产品开发流程做一个总结和分析，如下图： 

网站产品开发流程

结合上图分析：

（一）   网站产品开发阶段（网站前台部分）主要经历：用户需求和网站目标确定、概念设计、原型设计、界面设计与信息设计、视觉设计、前端开发、用户体验测试、产品交付等过程，当然这些阶段划分有时是模糊的，并且根据具体项目有可能增加货删减阶段，或修改阶段名称及工作内容。

（二）   用户体验层次主要结合《用户体验的要素》5层划分标准，从项目开发中用户体验方面工作的递进和重点划分，即战略层、范围层、结构层、框架层、表现层。
其中各层主要工作重点如下：
1.战略层：从用户体验方面，确定用户需求和网站目标（这个阶段的用户需求可以通过分析数据或进行调研得出）；
2.范围层：在战略层基础上，根据用户需求和网站目标，确定网站的功能规格和内容需求，也就是把项目范围做定义，避免项目范围不明确造成无休止的重复返工；
3.结构层：根据范围层定义下来的系统规划，对系统各个模块以及各个模块之间交互流程进行描述和设计，也属于交互设计中的总体设计。
4.框架层：在结构层总体设计基础上进行详细设计，制作各个界面和交互响应DEMO则是框架层的主要工作，也是交互设计中的详细设计阶段，此阶段的交付物即是设计设计的最终依据。
5.表现层：根据框架层设计的DEMO进行视觉设计，视觉设计既要把握战略层意图，突出界面要表达的意思，还要根据框架层DEMO注重提升用户体验和处理视觉效果与用户体验的冲突，因此在表现层视觉设计师既要按照DEMO制作效果图，还必须把握界面用户体验准则和战略意图。

（三）   主要交付物：即是，各个网站产品阶段工作成果的提现，这里列出的是必须产物，根据项目不同有时还有其他不同辅助性文档的产出。
1.用户需求、网站目标确定阶段：（此阶段是在项目可行性得到肯定后开始，也代表项目正式进入开发阶段）主要交付物是BRD、MRD（商业/市场需求描述），即是整个项目的纲领性文件，给予项目成员有一个全局的视角和执行的方向，这项工作主要由开发需求提出方产品经理或由项目经理来完成；
一般这个阶段的辅助性文档还有，《项目人员安排、工作进度安排》等。
2.概念设计阶段：给出整个产品的设计思路，产品整体架构、功能模块规划等，也就是从概念上给出一个完整的产品雏形，可以通过文字或图示的方式来表达所要开发产品的整体构想，主要交付物是有关《产品架构、功能规划》类文档；如下图：

概念设计图例

3.原型设计阶段：在概念设计基础上，对产品构思进行具体化，将产品构思描述成开发人员能够看得清楚、便于沟通的表现形式，此阶段主要在于描述构成产品各个模块的具体规划、以及模块之间的信息传导、交换响应的流程，主要交付物是《功能模块详细描述及流程框图》等。如下图：

原型设计图例1

原型设计图例2

4.界面设计（包括导航设计、信息设计）阶段：对原型设计阶段的交付物进行细化，也就是进行详细设计，此阶段将系统原型进行直观表现，即形成产品DEMO（产品演示），涉及到真实产品的各个界面、各种交互方式、各种响应结果等，交付物即是产品DEMO。

界面设计图例-李宋伟

5.视觉设计阶段：根据公司或项目视觉规范，将产品DEMO实现为产品效果图，这个阶段的交付物即是效果图，也是项目之外人员最直观、可理解的产品形态，同时要根据视觉规范提供效果图中各个元素的定义标准，如按钮规格、字体、字号、文字颜色等。
6.前端开发阶段：根据产品效果图，进行图片分割并制作成网页模版，这个阶段工作包括定义CSS、DIV等，同时还要考虑与后端程序实现的可行性和高效性，交付物就是移交后端开发的页面模版。

 从《网站产品开发流程剖析》图中可以看到，项目阶段、用户体验层次及责任岗位、主要交付物（红色框中①、②、③）中存在某些对应关系，这样就可以从多个角度来分析网站产品开发流程中的各个阶段细节，同时可以看到用户体验贯穿了整个项目开发过程，在产品开发之前、开发过程中、以及开发完成后用户体验都是一个不间断的过程，因此用户体验已经不仅仅是某个岗位、某个部门的事情，而是应该上升到企业产品开发必须注重的战略性问题了。

通过中国移动官网进入湖南移动http://www.hn.chinamobile.com 网上营业厅，发现提供了两种冲值方式，银联网上交费和工行网上交费，合计着用招商银行进行银联网上交费，不料湖南移动银联网上交费竟然不能使用，截图如下：

既然无法使用，那就只有选择工行网上交费，想着最近刚新办的U盾可以派上用场也不失一种尝试，就兴冲冲，为该号码充值了200元，并查看银行余额已经被扣款了，过来1个多钟头对方还是没有反应收到所冲值费用，感觉不妙，上网再看，原来原因在这：

“一个工行帐号可以为多个手机号码进行交费，但只能对工行帐号开户行所在地市的移动号码进行交费； ”—-也就是说我用深圳的工商银行卡，无法给湖南移动号码充值。

告知湖南移动0731-10086，客服回答说他们查不到，要找深圳工行确认，工行答复不知所云，给了一个什么卖卡的公司电话，搞得一头雾水，最终我认定，是在湖南移动官网付款，理应找湖南移动，最后再次致电0731-10086，另外一个客服小姐才记录并呈报，答复48小时回复。事情解决并不圆满，还没有最终说法，但此时我的疑问是：

1、既然提示“只能对工行帐号开户行所在地市的移动号码进行交费”为何这些信息就放在地下中间，最不显眼的地方？

2、不能正确充值，湖南移动为何还要扣款，难道这不能通过技术手段控制，抑或无条件控制，是否也应该与工行合力避免这种事件发生？

3、外地帐号无法充值，这样是否限制和抑制了网络充值的价值体现，电子商务的优势是否没有充分体现？
这次不愉快的网购体验让我以亲身经历感受到了：

1、中国移动在某些方面还真的不如中国联通（虽然不一定客观，但至少从本次网上充值来看），这也更加坚定了我继续使用联通号码的信心，3G网络的发展，联通的WCDMA标准更是继续使用联通的“战略”理由；

2、中国B2C的发展需要中间商的整合，移动、联通固然有能力建立自己的B2C平台（仅只网上商城网上充值等），但淘宝商城直充中心的用户体验和优惠幅度，完全胜过于移动、联通官网。

延伸思考：虽然目前中国B2C市场呈现一片热闹景象，传统厂商进入B2C行业的意愿和行动越来越强烈，但厂商虽是产品服务的源头，如果配套设施、运营能力、整合能力跟不上，想占据自身产品服务B2C网上市场还是留有悬念，借助优秀中间商的介入或许是获得快速发展的新思路。

相关文章：

网银支付:出错一次折腾一月疲惫一身

网银支付你能否给我多点爱你的理由?

新竞争力认为良好的任务流程必须具备：
•流程可预知
•随时易返回
•简化操作步骤
•杜绝流程错误
……（详见《网站易用性建设A-Z》电子书）

网上银行服务是银行类网站的主要服务项目，是网站用户使用较为频繁的功能，对于网上银行服务，在功能性优化方面重点在于提高流程的合理性、简便性，也即是流程易用性。针对良好任务流程必备的”简化操作步骤”，个人认为：合理、简便的操作流程，表现为用户每一步操作都是必要的、必须的，操作流程上没有累赘的点击，尽量减少冗余点击次数，提高功能使用效率。

然而，就本人体验结果来看，冗余点击却成为了银行类网站易用性方面容易忽略的重点，下面以中国银行和深圳发展银行网站为例，介绍从银行网站首页到成功登陆网上银行的操作过程和点击次数(图例见文后：附插图)。

从图例看来，成功登陆两个银行网上银行，从首页开始都要经过3次点击（包括选择下拉列表），登陆流程均有可优化之处，其中如中国银行的“选择下拉列表”单独制作在一个页面操作，在整体流程中这其实不是“必要的、必须的”，完全可以整合到图3，减少用户的操作深度和页面跳转次数，顺便提一下在图2“下拉列表”中，主要以省级为对象（如广东、北京、新疆），但其中隐含了“深圳”市级对象，对于深圳用户来说具有迷惑性和错误导向性，对选择“广东”或“深圳”进入不具有明确性，本人曾经多次错误进入广东登陆页面，而不能成功登陆，几经试验才发现原来是应该选择“深圳”进入，用户体验考虑不周。

对于深圳发展银行来说，完全可以将图2供用户选择的入口：“注册用户登录”和“卡折登陆”整合到图1中，在首页就给予用户“可预知性”，使整个操作流程更加清晰简便，提高网站易用性，增强用户体验。

冗余点击作为以突出功能性为主的银行类网站来说，其易用性“是好是坏”只有由亲身体验得来，也是比较容易被忽略的问题，只有从细节上充分注重用户体验才能将服务做得更好、更专业，这完全印证了冯老师网络营销细节的完善永无止境中提到的“网络营销细节致胜” 核心理念—“细节源于专业，细节体现专业”。

附插图：

1.中国银行插图

图1-中国银行首页

图2-中国银行地区分行下拉列表

图3-中国银行网上银行登陆界面

2.深圳发展银行附插图

图1-深圳发展银行首页

图2-深圳发展银行网上银行登录入口选择

图3-深圳发展银行网上银行登陆界面

作者：李宋伟       出处：电子商务page
原创文章，转载须保留文章内链接，并注明作者、出处！

 
然而，这是一种按照网站设计者思维分类的产品搜索方式，缺少尊重用户体验，也无法体现用户的自主性，通过产品目录寻找到的是分类下所有产品的列表，未能体现用户的个性化需求（比如产品具体参数），用户需要在大量产品列表页面间通过翻页寻找产品。
此时，强大的产品搜索功能将大大提高用户寻找商品的方便性，也尊重用户的自主需求和搜索习惯，同时采用产品对比功能有效的激发用户购买行为，如上图中“对比选中的宝贝”。通过本人自身的网上购物体验，发现淘宝网的产品搜索功能做的非常出色，下面请看其搜索功能截图：
图2、笔记本电脑按主要属性划分：（点击属性分类即可进该属性下的产品列表）
 
图3、笔记本电脑搜索功能框：
 

从图2、3可以看出在淘宝上搜索笔记本可以先通过点击主要属性划分进入相关产品分类（如根据品牌、屏幕尺寸等），并且是可以逐项递进进行搜索，然后还可以使用搜索框进行更加个性化的搜索。
其中，笔记本电脑可进行搜索条件限定的有：品牌、CPU平台、硬盘容量、内存容量、笔记本显卡类型、屏幕比例、 CPU频率、显存容量、光驱类型、价格区间、售后服务、上市时间。
可加入其他搜索条件有：关键字、 出卖方式（一口价、拍卖）、 阿里旺旺在线 、 全新、 二手 、闲置、 团购、 代购、 消费者保障计划、所在地、免运费、即将结束、抵价券、爱心宝贝、全球购等。
从上面可以看出，产品搜索限定条件来源于产品数据库中产品属性的细化（如上品牌、CPU平台、硬盘容量等），也就是说产品的个性化搜索是建立在产品属性的细化上，所以产品数据库中必须按照产品类别不同细化产品属性，并在产品发布的时候进行准确录入，如下图4：

清晰合理的产品目录是电子商务网站的“脊梁骨”，而完善的产品搜索功能对电子商务网站来说如虎添翼，一个电子商务网站如果还停留在整站商品的全文模糊搜索，让你的用户通过N次的列表翻页寻找商品就犹如大海捞针。
试想，一个连商品都无法准确搜索到的网站，能留住用户、甚至产生购买行为吗？通过以上分析可以得出以下结论：完善产品搜索功能是商务网站的必修课，而搜索功能的完善建立在产品属性的细化之上。

作者：李宋伟       出处：电子商务page
原创文章，转载须保留文章内链接，并注明作者、出处！

1.从搜狐博客的管理后台来看确实比较整洁明了，占用页面空间小（宽度大约800像素），给人简洁的操作界面和简便额度操作流程，项目清晰、分类规范、不杂乱，个人认为比新浪博客后台易用性方面做得出色。

2.最出色的地方是在发表文章时，添加分类十分方便，可以在发表文章过程中随时添加，充分考虑到用户的即兴写作，而不像新浪等其他博客那样需要重新返回添加分类页面，这样用户所写的内容也无法保存，搜狐在这方面考虑的非常人性化。

3.智能的标签自动选择，你完全可以不用具备关键词意识，只要你写好文章并点击“提取标签”按钮，系统会自动为你选择最合适的TAG标签，免去自己添加的麻烦，特别是对于关键词意识不强的初级用户，是一个很实用的功能，该功能也符合搜索引擎对关键词收录的原则。比起新浪博客那就一个爽啊，新浪的标签栏放在文章内容框下边，而且颜色跟底色太相近了，不易发现，很多时候都忘记了添加标签，并且要命的是它示例性的填充了标签内容在上面，你一不注意就以为那是不用自己填写的，一点提交就把这事给忘了。

4.登录框设计比较合理直接在页面顶部显示，方面用户输入，而新浪登录框是弹出页面，这要考虑到浏览器的拦截，还有要经过一次点击的等待，所以搜狐博客在这方面的用户体验工作做得比新浪博客足。

5.模块的添加、移动比较方便，对于个性化要求高的年轻群体还是有很大吸引力的，也体现搜狐对使用者心理需求的很好把握。
 
当然搜狐博客也并非完美，说了这么多优点，该挑点毛病了：

1.美中不足的是，发表日志文章、管理博客按钮应该是博主最经常点击的按钮，他却偏偏跑到顶部地址栏下面，由于惯例习惯，让我在页面找了没找到，正郁闷间，抬头才发现，好家伙原来跑到这里来了。

 2. 浏览速度：由于“声色版”页面的修饰图片占用了很大的版面，图片下载速度有点慢，如果网速稍微差点的用户，体验效果不理想。同时视频框和需要缓存视频内容，总体来说对网络带宽要求比较高。（对视频功能有特殊要求的用户除外）

3. 页面版头是用了大幅的图片，占用了大量的空间，博客是提供给用户写作的网上平台，突出的是文字内容，从网络营销的角度来说，这个地方也是“黄金广告位”应该主要突出文章内容，不应该放置太多无畏图片。当然对于个性比较鲜明的用户来说这倒无伤大雅。

   作为用户，我们都希望运营商能够为我们提供更优质、更人性化的服务，互联网竞争如此激烈，如何满足用户的需求、让用户满意，是每个运营商必须直接面对的问题，但我建议你先关注、并做好用户体验。

作者：李宋伟       出处：电子商务page
原创文章，转载须保留文章内链接，并注明作者、出处！

此时心情不知应该高兴，还是郁闷，想想一笔错误的扣款到退还，经历9月27到10月22号，时间将近一个月，虽说其中有节假日，倘若是数额巨大的款项，如此长时间的煎熬实属难忍，况且在我咨询有关单位的时候，得到的答复都是模棱两可的，其中如chinapay VS 广州银联，chinapay VS 广发银行，广州银联 VS  广发银行的答复有的甚至是互相矛盾，确实让人担心。

回顾这次的网银支付出错的追寻退款过程，为此事电话chinapay、广发银行、广州银联不下20次，而且得到的答复都不是能直接解决问题或明确答复，所以个人认为中国网上支付的安全机制和流程处理机制还不是很完善，一笔交易在交易方客户端无法得到完整查证。

同时经过此次事件，我还是要感谢上海银联chinapay、广州银联客服人员的服务，他们的服务态度确实很不错，虽然一个问题多次得不到但他们的服务态度确是让人无可挑剔的，并且回访也做得比较周到，广发客服也是做的比较好，在我23号查询确认款项没多久，广发客服还电话通知我款项已入帐，看看这20来个电话还是没有白打。

服务质量归服务质量，中国电子商务要发展终究需要安全高效的网上银行支付系统的支持，此次出错，让感觉到担忧的是，网上银行作为一种便捷高效的支付方式，在正常情况下让我们获得了良好的体验，但对于类似的特殊事件的处理，是否也应该体现网银支付的优势呢？快捷高效在出错处理中也应该得以体现方显网银支付的竞争力。

同时对于此类事件是否能避免发生，既然只支持上海卡支付，为何在广东卡支付的时候确实扣取款项了呢？假如能在技术上防范于未燃，我也不用折腾这一个月，相关客服人员也可以免除这么多咨询电话的骚扰！

经过此事，本人提醒广大网友，在充分享受网银支付方便快捷服务的时候，请时刻保持谨慎，小心操作，避免出现 “折腾一月疲惫一身”。

作者：李宋伟       出处：电子商务page
原创文章，转载须保留文章内链接，并注明作者、出处！

事因本人将参加29日义乌中国小商品城网站新版上线新闻发布会，为了在义乌中国小商品城网站（www.onccc.com）新闻发布会后赶回深圳办事，我选择了在国航网站购买电子客票，而当我老老实实按照步骤进行操作，到了支付票款的时候，我选择的是中国银联在线支付，并选择了广发银行点击进入支付，进入了银联的支付网关，我按照要求填入了信用卡号、密码、有效期限、附加码等点击支付按钮，提示支付已成功并且又弹出会话超时。

感觉不对劲，进入国航网站查询，订单状态仍是等待支付；马上回到广发网银查看，已扣款，扣款信息也发到手机，奇怪……纳闷许久…..，打电话到国航查询，已经过了半个小时，得到答复订单作废，客服人员态度超热情，不仅不给我尽快解决问题，而是更关心我耽误了行程，极力建议我再下个订单从新支付一次，对这种服务真的要向他们说声“感谢”，查询无果，转而打通发卡行电话，得到答复是交易还未入账，需要等两天，虽然心里着急，但我心里倒是清楚，有凭有据不可能这样就“下落不明”，在打回国航，态度又是奇好，得到答复结算技术部门开会，无法查询…，郁闷等待中……. ，估计在义乌小商品城回深圳的行程要收影响了。

又过一天，国航再次答复“技术开会中”，天啊哪来这么多会议啊，连个值班的都没有，就这样打了不下十次……..，又过了两天终于他们给我回电话，并告知我的支付没有成功，款没有收到，为了避免造成不明不白的损失，我努力联系国航、银联、广发，但三方都有说辞，到现在我还不知款项到底在那里，能否追回。根据上海银联的提示，除上海发行广发卡外，其他地区官方卡不能通过银联网关支付，我的款项在广发卡扣后第二天再过5个工作日，就能自动退回，但心里我真的没底，到底能否顺利收回这笔款项。

本来被义乌中国小商品城网站新版上线的喜庆气氛感染的心情，却无端被这网银支付问题搞得心情特别不爽。经过多方电话求证，我也要自我深刻检讨一下，作为一个在网络混了几年的网虫，我的大意疏忽了银联支付界面限于“上海地区开户”的提示，但同时我要为自己因此而造成的精神和实际损失做抗议：

1.为何银联限制上海地区开户的卡才能支付，但我输入的是广东的卡号，银联为何要让银行扣了我的款，而不做出拒绝或提示，如果做出拒绝或提示不就避免这类事情的发生了吗？

2.同时我也相信对于很多互联网用户来说，对于网站并不明显的提示是比较容易疏忽的，为何这些工作不在可能发生前就加以考虑呢？

3.网银支付的确改变了生活的方式，为足不出户完成交易、支付创造了可能，提供了极大的方便，但谁又愿意“偶尔”碰上像这样的倒霉事呢？

在互联网诚信机制不完善的情况下，电子商务发展阻力很大一部分源于支付安全的考虑，安全因素是造成很多人不敢涉足网银支付的原因。经过这次经历，我想说“网银支付想说爱你不容易啊！你能否给我多点爱你的理由！”。

作者：李宋伟       出处：电子商务page
原创文章，转载须保留文章内链接，并注明作者、出处！

虽然知道你们广告费用收入颇高，但这种严重损害用户体验的广告能否有所收敛，本来在与阿里的竞争中就不具优势，还把页面的搞得面目全非，如果不是因为研究的需要，我已经被这些“强势”的广告吓跑，并且对这个网站丧失信心，或许我不是你的目标用户，但作为你的网商用户，他们难道会对你这些强硬的广告手段乐意接受吗？

经过体验这些广告给我主要影响有：

            1.影响了页面加载速度

            2.全屏广告浪费我等待时间 

            3.弹出广告切换了我要浏览的页面 

            4.漂浮广告严重影响了我的视线并影响我对漂浮广告下页面元素的点击

            5.让用户对平台上信息公正性产生质疑（虽然早知有关键字排名）

………………….

看来要在慧聪获取你想要的信息还是需要有足够的耐心来等待，因为慧聪正在用广告考验每一个登录者的耐心和忠诚度。

作者：李宋伟       出处：电子商务page
原创文章，转载须保留文章内链接，并注明作者、出处！