B2C商城的订单退款和售后流程——axure原型图详解

前一段时间接到任务，要做一个B2C的商城，自有品牌的，基于前面的电商经验，其他模块很快上手，唯独订单模块困扰了我好久，尤其是订单的退货退款和售后流程，与订单的正向流程密切相关，什么时候该展示什么数据，什么功能，退款单的状态对订单状态的影响等等，接下来我将用axure原型图一一讲解。

电商原型案例怎么写好呢 电商原型图一整套

电商原型案例怎么写好呢 电商原型图一整套

电商原型案例怎么写好呢 电商原型图一整套

在做订单流程这一块，参考了很多大神的文章，还有各种开源的商城软件，都过于理论化，实性不强，对于新手来说没有一个实的axure原型讲解，都是在用流程图告诉大家退款售后有哪些步骤，但是没有一个具体的案例来分析。相信我，你是不可能一上来就做到像很多文章里写得很完美订单管理系统的，况且文章中连原型图都没有。其实，即使是天猫和京东，在售后方面也是有取舍的，设定好规则才能让系统跑通，而不是说能够应付所有的异常情况。在设计之前，要考虑很多看似基础，却需要重视的规格，比如：

1.是否支持部分退款，部分退货？

2.是否支持换货？

3.是否支持多次申请退款/退货？

4.如果在售中时申请退款被拒绝了，还可不可以申请售后？

5.部分退款时，自动收货时间到了怎么办？如果退款申请拒绝了，订单状态怎么继续走？

我这些只是举例了冰山一角，对于订单管理的确有很多异常分支情况和用户错误作。那我在这里既然说要用案例具体去讲订单的逆向流程，我就先要规定好我们商城的订单规则：

1.待发货前可以申请一次退款，发货后可以申请一次售后（退货/退款）

2.一笔订单多种商品只能分开申请退款，不支持对订单申请退款，意思是有一种商品时就是全退，有多种商品时就是只能部分申请退款。

3.订单中暂不含优惠券，只包括运费，在待发货时部分退款，后一笔申请会退运费；在已发货后申请售后就不再退运费，其他原因走人工

以上就是我对订单的设置的前提条件，有了前提条件，我再去跟技术评审，就让他们心里也感觉到靠谱一些，毕竟次的时候他们提出了很多漫无边际，非常离谱但是也会出现的异常情况，一开始得时候我真的很苦恼，后来才发现是我没有设定规则，没有规则，技术同学当然怕出现出现异常情况程序不知道怎么跑了。

用户端订单页面

关于订单的具体流程我就不多讲了，大家都知道的，待付款，待发货，待收货，交易成功，待评价，那我们先来看看我是如何对订单设置布局的

所展示的，一笔订单分为商品作栏，交易状态栏和作栏，对于商品作栏我是分开的，所以一笔订单有多种商品时在申请退款的时候，一定是单个申请的；交易状态栏是合并在一起的，这是对订单整体进度的状态显示，在部分退款时显示的订单状态；后作栏在确认收货前都是合并在一起的，对整个订单的签收，当状态为交易成功时，则会显示商品的评价入口。

那么这里就涉及这三块的状态和作功能的切换，我们先来看一下 退款单过程状态 对商品作栏的显示影响

我前面有讲，当处于待发货状态时，商品作入口为“申请退款”；当已发货后，商品作就为“申请售后”，那退款单的状态先去影响了商品作栏的显示。具体的细分状态我在中已经详细列出来了，包括异常情况该如何处理。

在看完退款单对商品作的影响后，再来看看退款单对订单状态的影响，注意，退款单与订单是多对一的关系，退款单和商品也是多对一的关系，所以才会有申请一次退款被拒绝了，还可以申请一次售后（退款/退货）。下图是 退款单结果状态 对订单状态的影响

可以看出来每一种订单都有部分和全部两种影响，这里要注意，全部并不是一次对订单提交的退款申请，而是查看到订单中是不是所有商品都有退款单，并且都有结果。通过这样表格的分析整理，会很清晰理解订单状态随退款单的变化。

用户端退款单界面

前面讲了订单页面中订单状态的变化，具体的订单详情我就不做过多说明了，因为大家参考其他网站也可以很直观的看到，接下来看退款管理的界面

根据我之前的设置的退款规则，这里的退款单一定是一种商品一个退款单（可能包含多件，因为规定申请退款是不能选择退款数量，要么全退，要么联系，因为后台可以修改退款金额）。退款单分为两种，仅退款和退货退款，在待发货时只能申请仅退款，在发货后可以选择申请退款或者是申请退货，但是只有一次机会！

这里很多人就会说我不考虑用户体验问题，首先我想说京东一上来退款退货规则也不完善，当然发展到今天他仍然还有很多不好的地方，当用户的退货申请被拒绝了你作为用户怎么办？京东的什么时候上线过，那个时候你只能网上发发牢骚。商城是从0到1，订单模块版的就是用户能下单，能退款，能退货。至于为什么用户不能一次申请所有商品的退款，为什么不能设置一种商品的退货数量等，后期会加上批量选择退款商品，设置退货数量等，不断优化退款和退货的流程图。

这篇文章很适合产品新人来了解基础的退款退货的原型图设计，毕竟这里不包含优惠券，没有拆单，也没有调仓等等，所以大家看了文章觉得还可以的点个赞~不喜勿喷

这里就没有展示具体的详情页面，所以可以底下留言找我要原型图~

怎么写电商系统PPT介绍

之前任职的是一家电商软件产品公司，很典型的乙方特征。由于是KA业务，基本的业务应对思路是把客户的业务诉求通过一套以我方产品为原型进行定制开发的系统来支持。所以会遇到各种甲方爸爸一上来就要求给方案，给标准产品方案呢，“爸爸们”认为不精准对标不满意；要好好写呢，需要补充大量内容，不知如何下手，对售前顾问来说就是一篇大作文。因为当时业务并不聚焦行业，所以客户业务别会很大，一篇优质方案攒出来，费脑又费时，往往吃力还不一定讨好。关键的，很多人还不知道该怎么写。

方案，顾名思义是需要用书面化、结构化形式，把怎么做目标事情的完整构想描述出来，以让阅读者明白如何做才能达成目标。所以，那些靠堆砌篇幅而不说清楚做什么？怎么做？的方案都是耍流氓。

下文我主要针对电商业务领域，以业务支撑系统为主要供应物的方案架构思路与大家共享。本文主要分享PPT方案，WORD方案可参照结构脑补，以后有机会再与大家分享。

一、理想的结构

先说一下理想化的方案架构，特别是针对有一定体量规模和行业地位的重要客户，方案的完整性与全面性是体现专业度的重要表现。所以我给出一个较完整的结构框架。

1、公司介绍：一开始介绍公司，让甲方先在“兴头”上记住你们公司，特别要用对标案例去获得甲方好感与兴致。

2、业务方案：首要先阐述客户该如何做电商业务，这部分是方案的核心，下文将重点展开。

3、技术方案：因为具体的系统构建内容在上一部分中已经有表达，所以技术方案部分则把笔墨重点花费在对技术架构/机制的介绍；硬件拓扑结构与设计思路、配置要求的详细陈列；以及我方所提供的技术服务（包括基础运维、SLA等）

4、服务方案：针对上述业务和技术方案内容，我方所提供的服务内容，可以包括软件维护（就是那些堆人头卖工时的内容）、知识转移（其实就是软件的作培训、技术培训等）、其他服务（如果外包代运营、协运营、仓储服务、物流服务，可一并涵盖）

5、项目管理：因为是定制项目，所以怎么干这个项目的表达一定少不了。一般都会包括项目管理方、项目管理组织结构、人员介绍、所使用的项目管理工具、概要项目等。

一般在竞标阶段都是以这样的方案结构来投标。

二、业务方案框架

业务方案的表达是本文的重点，一般用来做项目提案，常规按照以下结构来编写这部分。由于是以系统建设为核心，所以业务的表达与处理，都和系统能力关联。以后有机会再分享业务运营型方案的结构。

1、业务理解：这部分主要是用来和甲方爸爸去“确认眼神”。如果能把业务背景阐述清楚，执行当前业务的商业思想剖析到位，业务设计的合理性能有效梳理。这部分是能否有效说服客户启动项目的前提。

2、业务概述：尽量用扼要的表达呈现当前业务的结构或全景，用以总述性表达这个业务是怎样的结构，一般我们都用业务全景图来展示对业务的总览。这部分是具有高度概括的特征，把业务关键的点呈现出来。有时这部分不太容易图形表达，可可以整理关键要素，进行概要型表达。

3、角色模型：方案必须将业务与系统涉及的各类角色方描述出来，并说明在业务和系统中这些角色之间的关系。比如，B2C业务是买家卖家两方角色，虽然卖家中可以定义分子权限的角色（如，商品、订单、超级等），但总的来说，他们还都属于同一类角色。

4、应用特征：应用特征是描述业务的关键内容，业务和系统的特殊性都会体现在这里。举个例子，在MarketingPlace（多商家平台）业务中，收银环节就存在统一收银和分布式收银两种应用特征，前者是钱收到平台方，然后通过定期结算给商家；而后者则是实现实时或准实时的商家收银，与平台分账。这种应用特征的描述是把业务特点和系统要求定义清楚。这一部分的详略就会影响方案表达的精细程度和篇幅，如果进行全局表述又没有积累，是相当累人的。所以有时会用具有概要特征的业务逻辑图来表达，在讲解时一张图可涵盖80%以上的应用特征。

一张“古老”的BBC业务逻辑图，近10年前画的竟然还有人在用

5、系统架构：所谓电商业务必然会涉及系统，所以讲清业务之后，就要说明业务支撑系统是什么样的。后续内容都会围绕系统来讲。所以系统架构部分一般讲系统的功能结构和与外部系统的关系，可以用两张图来各自表达。前者讲明大致的功能布局与范围，后者讲清与哪些外系统进行哪些数据的交互。

6、数据关系：遇到复杂的数据关系，则需要对数据关系的理解进行表达。比如以前我们做汽车后市场业务，商品数据是关联车型、服务、供应商、内容知识点，所以必须讲明其中的关联，客户就清楚你已解他的需求了。一般不是复杂项目售前方案不会涉及，那是概要设计中的内容。

7、典型应用/流程分析：由于涉及业务定制，在没有系统可POC演示的前提下，会通过业务流程图的方式把业务流程或系统处理流程勾画出来。建议采用泳道图方式有角色特征进行描述。流程图辅以文字描述，强化其特征点。

8、原型设计：由于电商类项目大多涉及客户端界面与流程，有些苛刻的或不专业的甲方，会希望乙方在售前阶段呈现直观的界面展现与作。类似于广告领域的比稿。如果现有的原型产品不能便捷配置出POCDemo，就只能通过原型工具制作低保真或高保真原型，用来演示作流程。方案PPT中可进行截图展示。通常这是在项目实施中的设计工作，如果售前阶段做这类活，那说明乙方已经不惜血本了，如果竞争失败就只能权当作为以后其他项目积累一些原材料。

9、二开分析：对于用原型系统进行开发的项目，二次开发工作量分析也是相当重要的，这也是对外报价的基础。所以，我们以前通常会做异化需求分析，陈列二开功能列表，将各种需要修改和增加的显性化、非显性化功能逐一整理出来，供技术人员进行工作量评估。这要求方案人员需要相当了解原型系统。

10、运营设计：系统讲完了，一般业务方案就到此结束，但是有些项目会要求乙方进行运营规划。通常涉及运营领域可以从：运营框架、核心任务、运营策略、组织分工、管理制度进行分解阐述。

总结一下，个人在电商系统类方案上的经验，我强调以下三点：

1、怕写文章的人，写不好方案。

2、写好方案的核心是逻辑+结构，多用总分结构。

用清晰的表达层次和有说服力的内容表达，是方案表达的关键点。所以建议大家分解好方案的总体顺序，多用总分结构表达。大结构尽量扁平化，减少过多的总分层次。

3、规整的方案呈现是基本要求。

一篇被认可的方案，必然在表达上是有规范性的。字体字号的运用标准、标题规范、布局规范，用色统一、图形风格统一，都是尊重阅读者和体现专业编写的体现。本人很讨厌那种字体字号不统一、剪贴痕迹浓重的PPT，在我的逻辑里，你的诚意就暗示了你的质量。

电子商务师知识点：快速原型法概述

电子商务师知识点：快速原型法概述

1.快速原型法的提出 快速原型法(rapid prototyping或quick prototyping,也称early prototyping,简称prototyping)的基本思路是,通过在软件生产中引进其它工业在生产新产品之前先试制样品的方法,解决需求规格确立的难题。由于软件是无形的"软"产品这一特征,从修改样品到生产成品比其它工业产品相对容易许多,所以M.Zelkowitz在提出软件原型法时,并没有照搬硬件工业产品的原型法———在设计阶段与生产阶段之间增加一个样品试生产阶段,但这同时也就限定了软件原型法必须有快速这个特征。

2.快速原型法条件 开发软件原型必须满足下列条件:①原型必须可执行;②原型的开发周期应短,开发成本应低(如周期和成本约为生产正式产品的1/10);③对原型进行评价应很容易;④原型应易于修改。

3.原型的目的、环境和生存期形态 原型可在与产品相同的运行环境上开发,也可不同。如果原型是用来确认对需求的理解是否正确、或解决设计方案的选择问题,即用户侧的需求(问题)是明确的,开发侧的理解需求或实现需求的设计方案(解法)不明确,要证实解法是否正确时,应在与实际产品环境相近的环境上开发原型。这种原型称为试验品原型或试验性原型。还有些原型,主要用来帮助用户在试用中使自己模糊的需求明确起来,称为试用品原型或试用性原型,可在与实际产品环境完全无关的环境上开发、运行。 原型有不同的原型生存期形态,其主要区别在于原型目的达到后的不同作用和意义。原型运行目的达到后,有的不再有意义,被抛弃,称为抛弃式原型(throw away prototype);有的直接转为产品的一部分,称为演化式原型(evolutionary prototype);还有的原型随着需求一步步明确,所模拟的需求功能也逐渐增加,称为递增式原型(incremental prototype)。也有称演化式原型为骨格型原型、演进式原型,称递增式原型为增殖式、渐增式原型的。递增式原型可以是抛弃式的,也可以是演化式的。试验品原型往往不只开发一个,其中大多数是抛弃式原型。试用品有抛弃式的,也有演化式的。演化式原型开发环境应与产品环境相同或相近。 选择什么原型生存期后期形态,是在原型目的与原型开发成本之间寻找平衡点的技术。抛弃式原型应开发周期更快、成本更低,所以比其它形态更需要采用快速原型法CASE工具,以尽可能实现自动化。直接转为产品一部分的演化式、递增式原型,由于需要与产品相同或相似的运行环境,在可能的前提下应以选用自动化开发CASE为主、快速原型法工具为辅。

一个好的电商类网站要如何制作？

在专业网站制作中，制作出一个好的电商类网站要如何制作？当网站制作室有那哪些是我们需要去考虑的，又有哪些功能是该网站必备的？

案例分享：这个网站是一个要以售卖用铜制作的各种工艺品的商城类网站。

1、我们首先知道铜师傅是以售买用铜所制作的工艺品；所以我们设计师再设计整个网站时；网站的背景颜色采用了浅粉色，更加突出对于艺术的一种氛围；在网站的视觉效果上面效果很大。

2首页的分类，网站首页的分类很是细致；把新品、热卖、、都陈列在首页方便用户的选择。对于一个电商类网站来讲的的话，产品分类一定要注意，产品分类一定要明确清晰，从用户多种需求去分类。

3、还有导航栏中的“铜粉部落”点击进来；这个页面每一个用户都可以在上面进行发帖或发表自己的意见；这个是比较有趣的，用户可以进行发帖来表达自己的一些意见问题，在用户体验方面有着明显的效果。

4、网站还有着注册与登功能；当然既然是电商类网站就少不了购买；其他网站售卖产品都是电话联系进行交易；但是我们为铜师傅网站添加了购物车；用户随时可以在网站进行一个下单购买；进行交易。这些对于一个电商类网站来说是不可避免的一些功能，因为只有添加了这些功能用户才可以方便直接在线上进行购买等。

并不是标准，仅供参考，希望能够帮到你！

一个好的电商网站必须具备以下的功能

这些算是基本的内容，功能方面主要是这些，除此之外，还要考虑到网站的SEO优化方面，这就包含很多内容了。

部分，需要准备一个域名

域名是一个网站的入口与标识，域名需要购买

一般从阿里云（万网）、腾讯云、京东云、Godaddy等网站购买。

域名需要自己想一个好的名称，一旦选中变不可更改。可以选择、.top等三字符结尾的域名，这些域名在上常见，便于网站站在高度上。

第二部分 虚拟空间或云

1.虚拟空间是云分出来的一小部分空间，用来存放你的网站数据。

购买域名后他们可能会给你免费提供一个虚拟空间，也可以购买，或者使用第三方虚拟空间。将域名解析到空间上就行了，域名解析一般在域名的管理后台有说明，根据步骤来就可以了。

第三部分：网站代码制作工具或网站后台管理工具

如果你只想制作一个简单的页面，用来宣传一些简单的思想或者是新手试水，那么使用Dreamweer可视化编辑即可制作一个简单的页面，百度搜索一些简单的模板，即可更改。

这是一般网站的制作步骤，电商网站由于功能的方面的问题，比较复杂，建议你咨询专业的建站公司。

无论什么类型的网站，都要根据客户的情况来定制，同样是电商，不同的产品客户习惯不一样的，建议你找一家能做网站策划，人群分析的公司帮你规划一下，至于找谁做，只要设计和开发能力不错都能做的。

用户58023说了很多，但是不实用。一个新手重要的是怎么入门。门的锁怎么打开？门内的家具设计先放一边，首先找到门在哪？锁在哪？怎么进门？比如建一个京东网站首先要什么工具？要多少钱？步是电脑开机，第二步是点哪里？

表单设计及Axure原型

某大型电子商务网站的注册登录界面如下：

当用户把想要购买的商品放入购物车，点击结算按钮时，登录表单会出现。用户实际想进行的作是结算而不是登录。这样的设计会给用户带来困扰。

网站设计团队认为，这样设计可以加快老客户购买结算的速度，新客户不介意注册。而实际使用情况是新客户很介意注册，不希望网站收集信息推送广告，对注册页面天然排斥。而且用户有时并不是很清楚自己是否注册过，多次盲目尝试邮箱和密码组合的失败会让用户沮丧甚至放弃购物。

表单设计的初衷是方便用户购物，结果却阻碍了商品销售。通过以下的改动可以解决这个问题。将注册按钮改为继续按钮，同时加上一段简短说明。这样不强制用户注册，同时也能增加购买行为。

目前很多电商网站采用的是种设计，都需要用户注册成为会员才能购买商品，可能在结算、加入购物车或者浏览商品时要求用户进行注册登录服务。但美团和携程采用的是第二种设计，在购买商品和使用服务时并不强制用户登录注册，而是改为采用手机校验或动态口令。

分组前的表单，所有的内容杂糅在一起，需要花费很多时间寻找并填写信息。分组后的表单，对表单问题重新放置，使得层次分明。用户清楚地明白在各个区域填写哪些对应的信息。

较长和复杂的表单需要将内容分布到多个页面，这种表单通常需要设置顺序向导流程提示用户一步步完成表单填写步骤。

这张表单缺乏向导设置，每次填写完一个页面的内容，需要点击下一步按钮进入新的页面，用户对于后续的表单内容一无所知，对于需要花费多少时间填写剩余部分的内容也没有把握，这样的设计容易让用户失去继续填写的耐心。

改进的向导型表单让用户和能够很容易地知道总共的填写步骤。

向导型表单能够将注册登录的每一个步骤都展示给用户，由用户决定是继续填写还是退出，提升用户体验。

标签在输入框的上方。

优点

减少表单填写时间，将用户注意力集中于完成表单。

标签和输入框位置非常靠近，填写表单很快很容易，用户眼球只需要向下移动，为用户填写完表单提供了清晰的完成路径。

提供了大量横向空间，对标签设置大小字号不会影响页面布局，对长标签很有用。

缺点

大量占用垂直空间，垂直空间十分有限的情况下慎重使用。

注意

根据实验测试，用户的眼球从标签移动到输入框的时间在顶对齐方式下是50ms，左对齐是500ms，右对齐是240ms。要想让用户快速完成表单，采用顶对齐方式。

标签和输入框之间的间距使用输入框高度50%~75%的高度作为与标签的间距。

国外网站大多采用顶对齐方式，国内网站大多采用右对齐方式。

标签在右侧呈现为对齐方式。

优点

输入框与标签相邻很近，用户同样可以快速填写表单。

减少表单占用垂直屏幕空间，适用垂直空间有限的情况。

缺点

在左侧形成难看的锯齿状边缘，降低快速浏览完表单的效率。

灵活性不够，标签文字过长或者需要两行文字，都会破坏页面布局。

标签在左侧呈现为对齐方式。

优点

有利于用户考虑表单问题后再回答问题，用户浏览表单问题更容易。不会被右侧输入框打断。

缺点

增加标签到输入框的距离，增加用户填写表单的时间。

把标签和输入框组合为同一个元素。

优点

适用于屏幕空间宝贵的情况，能节省一半的屏幕空间。

缺点

用户填写内容时标签会消失，对于不明显的问题，需要参考标签的情况下，用户容易迷茫。

标签采用分散对齐的方式。

注意

慎用，会破坏明确的完成路径和布局一致性。同时，如果每个标签之间的长度距过大，会在字之间形成很多空隙。整体界面效果会很难看。没有明确理由，不建议使用。

如果要减少填写时间，标签长度需要灵活可变，用顶对齐。

如果要减少填写时间，但垂直屏幕空间有限，用右对齐。

如果要求用户浏览表单标签，知道必填问题或者回到多个问题中的某个问题，用左对齐。

如果表单很短，屏幕空间极度有限，采用输入框内对齐。

除非有合适理由，一般不采用混合对齐方式。

输入框的类型包括文本框、单选按钮、复选框和下拉菜单。

设计输入框时注意输入框的长度，输入框的表现形式需要提供给用户填写表单的有用线索。例如名称、地址、证件号的输入框一般要很长。的输入框可以短一些，因为一般是四位数字。如果输入框的长度模糊不定，会给用户造成对填写结果正确性的困扰。

星号在实际情况中可以代表必填项也可以代表选填项。如果表单上多数问题都是必填项，而少数问题是可选项，就可以用星号来标注可选项，再配上说明。如果表单上多数问题都是可选项，而少数问题是必填项，就用星号来标注必填项。如果不多，标注必填项即可。

设计表单时。通过对文字设置不同字号，强调的文字设置大一些，辅助的文字设置小一些。醒目的文字设置颜色。通过异化设置，层次就会分明，让用户很容易地抓住重点。

设置问题尽量少，让用户尽快完成表单。

设置表单问题时，如果表单问题并非必要，或者可以在其他必要的时机再提出，则视为无用输入，可以去除。

例如图中的性别和学历在注册时就是无用的输入信息，需要去掉。

为方便用户输入，加快表单填写过程，在有些问题上可以为用户提供默认输入，让用户减少思考。但注意默认输入要符合用户利益，如果默认输入时用户并不喜欢的选项，会使用户对服务产生怀疑，可能导致户流失。

例如上图的预订机票表单，订票日期采用默认输入为加减0天，因为大部分人都是按预订日期进行筛选；默认订票数为大人票1张，儿童票0张；默认支付种为美元，根据公司网站所在地的通用货设计。

根据用户的回答出现一系列后续回答的问题。如：和邮箱注册。

在表单中设置直接反馈有助于确保用户的回答是有效的，这种实时沟通的方式称为即时校验。

即时校验提供多种反馈，确认回答是否合适。建议有效回答，通过实时更新设计，帮助人们把提交数据控制在必要的限制范围内。

即时校验一般发生在人们在输入框中开始输入或者停止输入的时候。

如果用户不能正确回答问题，确认他们的回答就非常重要。例如：输入用户名时存在用户占用问题。如果是重复的用户名，网站则会认为该是无效的。但用户又不知道哪些用户名可用，表单的即时校验在这个问题上需要提供确认帮助。密码则可能在长度、组成、强度上有更多的限制，即时校验能够确认用户所提供的密码是否合适。也会表明密码的安全程度，现在通常采用的做法是设置密码尺。

是否需要对表单的所有选项都设置即时校验是一个需要权衡的问题。尽可能多地为问题设置即时校验可以确保一次性快速填写完表单。但同时验证所有输入框会分散用户的注意力，也可能会引起用户的反感。如果我们需要为许多问题提供即时校验，要把握好时机。例如，在明确填写结束后（输入框失去焦点），再进行即时校验比在填写过程中进行即时校验要好。

建议提供有效的示例或提示。建议能保证用户输入有效，但并不考虑用户体验。例如我们会建议用户按照设定的电话号码格式（区号-电话号码）来输入，而用户喜欢简单地输入电话号码，我们需要考虑在用户输入完不同格式的电话号码后转化为我们想要的格式。

很多表单有字数限制。我们需要设计即时校验提示用户字数限制上限以及当前的输入字数，让用户对后续的输入有预期。

在标签和输入框旁边增加帮助文字，告诉用户应该如何回答问题。

标签列出用户需要回答的问题，输入框让用户填写。我们还需要通过动作设计来对表单进行作。典型的Web表单可能包括提交、保存、继续等多种作按钮来完成表单。这些作按钮根据重要程度及使用的频率被分为 主动作 和 次动作 。

主动作代表多数人填写表单的主要目标或处理方式。对于表单来说，保存、提交常常代表主动作，取消、返回、删除一般是次动作。

主动作和次动作在设计时通常需要被赋予不同的视觉重要性。 费茨法则 给出了点击目标所花费的时间与鼠标到达目标的距离和目标尺寸之间的函数关系。

根据费茨法则，我们需要设计次动作的按钮减少用户的注意力。另外，根据实验测试，按钮放置的位置也对用户的作正确性有较大的影响。例如主动作和输入框左对齐可以减少填完表单的时间。左对齐使所有元素依靠左侧形成自上而下的视觉移动路径，用户填写完表单后视线会规则性的向下移动找到提交按钮。主动作和次动作过于分散容易造成用户点击出错。

一些常用的设计包括：主动作采用按钮，次动作采用文字链接，使主动作按钮更为突出也易于点击；主动作和次动作都采用按钮，但主动作按钮尺寸更大，并添加醒目颜色，次动作按钮一般为白色或灰色，利用视觉异来强调作，避免用户犯错。

点击提交按钮后一般需要等待一段时间以便处理数据并返回结果。在等待的时间里为了避免用户重复点击提交按钮，可以修改按钮的文字和状态来响应用户的请求。例如，我们在提交按钮上设计当点击提交后按钮变为灰色不可用状态并且显示“正在提交…”响应用户的提交请求，这样重复点击就不会起作用了。也有很多网站采用动画方式响应请求，显示一个进度条或者一个等待加载的来提示目前的提交状态。

有的表单要求提交之前需要同意相关的服务条款。目前通常有两种设计，一种是将服务条款选项与提交按钮分离，单独设置服务条款。另一种是去掉复选框并将按钮改为“同意并注册”。后者的主动作能同时包含确认服务条款和完成表单，避免了复杂化的作，同时方便用户填写完表单。

实际案例是京东商城的个人用户注册表单。上图是改版前京东商城的注册表单，问题的选取采用用户名、密码、手机/邮箱这三部分，为了获得有效手机号，还需要对手机号进行验证。能对网站安全进行保护，防止机械注册。

对齐方式采用右对齐，方便用户填写，但不利于快速浏览表单。输入框设计方面，用户名、密码、手机的输入框较长，并配有提示，提醒用户输入哪些信息。的输入框很短，提示用户只需输入几个数字即可。

然而，在表单设计上也存在一些问题。例如，每个填写项前面都有红星，说明都是必填项，这样增加了很多冗余信息量，这些红星完全可以去掉。下图是改版后的京东商城注册表单，将右对齐方式改成了混合对齐方式，同时去掉了冒号和红星，使得整个表单更加紧凑。

京东商城采用的注册表单交互效果包括：

涉及的Axure知识： 组件使用、动态面板、变量设置和条件控制、交互效果设置。