网站设计；B2C网站设计和APP设计方案

以前写过一篇类似的文章，不过因为工作的原因相对写的比较简单，这次从产品的角度重新整理一下以往工作中的一些经验，算是对自己的一个阶段的总结。本文将围绕web app的设计和完整B2C网站的设计，与大家讨论几点设计技巧，首先来说说B2C网站的设计。

一、收集需求

作为一个产品的发起人，你可能是公司的CEO，也可能是一名产品经理，甚至会是一个普通的创业者，不论你的职位是什么，想做好一个网站就必须对它的目标人群有充分的认识，清楚的明白我的主要消费人群需要什么？我能给他们提供什么？我的资源有哪些？有些时候，可能这个初期的想法只是在头脑里的一个概念，我们要把这个概念转化成实际的成果并且能够为企业带来实际的利益就必须开始我们的第一步“收集用户需求”。本文以一个垂直B2C的例子来讲解全文，假设我们现在要开发保健品的B2C网站，首先我们对市场的了解是一片空白，我们需要知道目前主流的保健品消费人群大致是一个什么样的人群结构？他们经常消费的保健品是哪几类？目标用户是否有网上购物的习惯？我们的竞争对手有哪些，他们的优势是什么？等等~收集需求的方式和方法有很多种，比如用户访谈，调查问卷，购买行业数据等，其事如果你不是一个完全创新的模式或则说你卖的东西市面上还找不到第二家，通常通过对我们竞争对手分析的同时就能够得到很多有用的数据，所以这里就省略N个字，不重点写了。

二、分析需求

采集到需求以后当然是要分析的，从中提炼出对自己有用的东西来。这里我将需求分析分为两类，一类是用户需求，一类为系统需求，用户需求是将前期收集到的商品所针对的目标人群以及网站的使用者他们想要什么，而系统需求则是网站需要给用户提供什么样的功能，让用户方便的在网站上实现购买过程。

2.1）用户需求 

这里用保健品使用人群来举个例子。

保健品B2C与传统意义上的B2C网站在使用人群上有所差异，保健品的使用人群不等于最终的网站消费者，主要是因为人群中涵盖了青少年和中老年两大人群，而这两类人，通常是缺乏购买能力或则是对网上购物并不了解和接受的人。所以这里的人群定位并不代表网站的最终用户，所以我们还必须继续分析最终在网站上购买商品的人会是谁，他们的人群角色是什么？只有明确了保健品的最终使用人群和网站的购买人群，我们就可以定制商城的商品类目了，也就是我们能提供什么？从前期的需求收集我们已经清楚的知道了目标消费人群主要的目的和需求，这个时候就要结合网站本身的资源来满足目标用户的需求，这里涉及到市场采购、渠道合作等多方面的因素，需根据企业自身状况决定。

2.2）系统需求

通过对用户需求的分析后可以让我们了解用户在购买商品的过程中需要哪些功能，什么样的功能和信息能够帮助用户更容易的挑选适合TA们的商品，从而使我们做出更适合目标用户的系统功能从而有效的让消费者通过我们网站买到TA想要的商品。在这里我们来做一次层次任务分析用来模拟用户的购物流程，梳理出用户在购买过程中的整个购物流程，设计出符合用户购买习惯的网页原型。可以通过任务的方式模拟用户操作再和用户实际操作的方式做对比，帮助我们设计出更加符合用户习惯的网页原型。在大致的分析完需求以后需要梳理一下网站的信息架构，也就是网站呈现在用户面前的信息。

开始之前首先要清楚所销售商品的有哪些特殊的属性，用户在挑选的过程中哪些信息会给TA们带来帮助，哪些功能会让用户更快速的找到想要的商品，当用户不知道自己要买什么的时候，如何推荐给用户适合的商品。

1、商品属性

2、按功能区分：补气补血、美容养颜、增强免疫、调理肠胃、营养素、补钙、抗疲劳、增强记忆、改善睡眠、预防三高、心血管保健、丰胸减肥、调理亚健康、其它等等

3、按人群区分：女性保健、男性保健、母婴保健、中老年保健

4、按营养成分区分：液体钙、蜂胶、螺旋藻、卵磷脂、蛋白粉、维生素、氨基酸、羊胎素、胶原蛋白、钙铁锌硒、深海鱼油、左旋肉碱等

5、按品牌区分：养生堂、营养屋、奈氏力斯、美国NGO、艾兰得、Elelen、汤臣倍健、康琪壹佰等

通过以上分析，我们大致清楚了一个保健品商城的信息架构，一个合适信息粒度“保健品”、类型众多的元数据以及一个估算内容重心的方法，现在可以开始构建一个内容清晰、主次分明、信息丰富的保健品商城来满足用户的需求了。

网站信息架构完成以后就可以开始了吗？答案是：NO，那还不是完整的。我们前期所有需求分析的目标只有一个，“让用户愉快的体验购物的过程”，所以我们需要整理出用户的购物流程，与上一篇中的购物流程略有不同，这里我们主要是模拟用户从进入网站到完成购买有哪些动作，以便后期完成我们的系统功能设计。我们先画出当用户第一次进入网站到完成购买的流程：这只是一个简单的流程图，你可以在这个基础上绘制出更多的用户行为，模拟用户在购买商品的过程中可能会遇到哪些问题，如何在用户遇到问题的时候通过网站的信息提示帮助用户去解决这些问题，在设计这些功能的时候千万不要盲目的凭自己的经验武断的认为用户就该这样做。每个网站的模式、每种商品的属性都是不同的，在用户选择的时候考虑的角度也不同。比如：购买一件衣服的时候用户可能担心的是衣服的面料怎么样？尺码是否合身？而购买保健品的时候用户更加看重的是它所具有的保健效果，这些都要通过用户购买商品时的不同心理分析得出。举一个例子，我们来看看两个B2C网站的用户注册页面包含了哪些信息，在用户操作的过程中给予用户哪些不同的信息。通过判断用户在注册过程中会遇到哪些问题，设计表单的时候需要在不同状态下给出不同的提示信息，这些信息帮助用户更快的完成这个步骤，发生错误的时候明确的告诉TA们，哪里错了？也就是说我们要在用户遇到这些问题之前就考虑到可能会发生什么样的问题，不要让用户进入你的网站以后还要费力的去学习怎么才能在这个网站里买到我想要的东西，这样只会浪费公司的推广费用。记住，好的产品设计是可以帮助网站留住用户并提升网站转化率的法宝。

以上就是小编简单描述的关于B2C网站设计的一些特点。接下来我们再看看一些WEB APP设计的特点。

首先说说什么是web app?

Web app是一种通过网络（如互联网或内联网）访问的应用程序；也可以指计算机软件承载在浏览器支持环境下或使用浏览器支持语言（如JavaScript）并依赖于web 浏览器来渲染的应用程序。Web app的流行归功于网页浏览器的普及，以及使用这一轻薄客户端方便的用户体验。不必下载安装就可以实现更新和维护，具有支持跨平台的内在属性，是web app开始流行的关键原因。典型的web app产品包括web邮箱、web商店、wikis等等。

Web app的优点

◆通过兼容性浏览器实现配置而不需要任何复杂的“转出”步骤；

◆浏览器应用程序几乎不需要客户端上的磁盘空间；

◆新功能从服务器自动传递给用户，用户自己不必升级程序；

◆可以轻松整合进入其他服务类web程序；

◆跨平台的兼容性

现阶段web app还很难有一个设计原则

HTML5技术仍在发展中且发展尚不完善， web app作为该技术的产物自然也是在不断试验中进步；此外，web app还要依赖兼容性浏览器更强大的渲染能力，俗话说“皮之不存毛将焉附”，在大家都期待的强大浏览器出现之前谁也难以预言web app需要做成什么样才算是一个合格的产品。在这种行业背景下，web app还难以有一个所谓的设计原则，起码现在还不构成总结一个合理设计原则的条件。其实，所谓的设计原则本就是从已有的、典型的设计作品中倒推得出的。比如，解构主义设计风格的提出不是之前就有的，是理论家在分析总结了建筑设计师盖里、埃森曼、特斯楚米等大师的典型设计作品，结合这几位大师的设计理念后定义的一个流派名称。所谓的解构主义设计原则也是从权威大师典型作品中归纳总结的； 设计原则出现后继而可以对之后的设计起一定的指导作用。因此本文不谈所谓的web app设计原则，现从已经上线的优秀产品中选择典型设计元素与大家讨论分享，寻找可以借鉴的地方，并借此增进对web app产品设计的认识。

Web app界面设计的8个实用技巧

Web app用户界面设计，核心是web设计；不过与一般意义上的web设计相比较，web app更加注重功能。为了在与桌面应用程序的竞争中展现其优势，web app需要提供简洁、直观、快速响应的用户界面，以便于用户在任务操作中节省精力和时间。

1.界面元素随需而变

力求简洁明了是用户界面设计的重要原则。在同一时间给用户展示的功能越多，用户需要寻找和思考的时间也就越多。同样，界面中存在的选项越少，可用功能就越明显、越容易浏览。不过简化界面并非轻而易举，尤其是你不想减少应用程序功能的情况下。将高级功能隐藏起来是一种有效的简化方法。搞清楚在界面中用户最经常用的是哪些功能，然后把其他功能隐藏处理。这些可由下拉式菜单和控件完成。例如，搜索栏中的高级过滤器可以做成尾部的特殊下拉菜单样式。当用户需要这些过滤器的时候只需要几次点击就可以使用。决定哪些功能保留展示哪些需要隐藏起来，并不是一个简单的工作，需要取决于功能控件的重要程度和被使用的频繁程度。

2.为模态窗口增加边缘阴影

弹出式菜单和窗口周边的阴影不仅仅是为了视觉美观。阴影一方面增大了菜单或窗口的尺寸，有助于将菜单或窗口从背景中区别开来；另一方面通过灰度化的边缘阴影可以屏蔽背景内容的噪音干扰。这个技巧根植于传统桌面程序，帮助用户将注意力集中在弹出的窗口。由于很多模态窗口不容易从桌面程序内容页面中凸显出来，阴影可以使它们看起来具有立体效果、仿佛悬浮于其他内容之上，于是拉近了模态窗口与用户的距离。为实现这样的效果，设计师往往将透明的PNG背景图片作为容器，再把内容填充到容器中，同时等距离填充弹出框各边缘。或者使用具有透明边框的背景图片，并将内容框绝对定位在其中。另外，也可以使用基于JavaScript的lightboxes命令或者CSS3中的 drop shadows命令，但需要注意浏览器是否支持。

3.空白状态时告诉用户可以做什么

当设计web app的时候，不仅需要关心一般情况下的信息展示，还要确保界面在空白状态时表现良好、具有指引作用。页面中还没有产生任何信息的时候，可以在空白区域放置一条帮助信息告诉用户如何开始。例如，一个项目管理的应用程序主页会列出用户的项目，假如还没有什么项目信息，可以为用户提供一个项目创建页面的链接。即使这个页面上已经存在了这样一个功能按钮，一个额外的帮助并不会有什么妨碍。这个技巧可以有效地鼓励用户试用该服务，并在注册后立即进行使用。通过应用程序的单一操作步骤可以帮助用户理解这个应用的优势以及对他们是否有用。此外，只为用户展示最重要的功能选项也很关键。一股脑的将众多功能倾泻给用户并没有什么实际意义。需要牢记的是，用户通常想从应用中获得或多或少的信息，但却不想跳进细节中，用户没有时间也没有兴趣。在空白状态中激励用户，可以显著地降低用户的流失率，并帮助潜在的用户更好的理解程序系统是如何工作的。

4.Button状态积极反馈

许多web app拥有自定义样式的按钮。默认的输入按钮可能不适合某些情景，文字链接有时候看起来又太含蓄。需要注意的是，把链接做成Button样式的时候，它们就应该有button的表现形式。比如，在点击button的时候它们应该会出现被“压”过的样子。这不仅仅是纯粹的视觉变化。及时反馈给用户，可以使web app感觉起来更灵敏，与桌面应用程序的用户体验更接近。可以使用CSS添加按钮的“pressed”等状态，实现在不同状态下显示不同背景图片的功能。

5.使用上下文情境导航

在既定的情境下考虑用户希望看什么、需要什么是非常重要的。不需要在每一个地方都放置相同的导航控件，因为用户不是在任何情况下都需要它们。上下文情境导航最好的一个例子就是Office 2007中，原先默认的工具栏集合被换成了带状控件形式。每一项tab控制着一组相关联的功能，如编辑图形、校对或者简单书写。Web app可以从这种上下文情境导航中获益，仅展示用户需要的、而不是所有可用的功能，从而保持用户界面的整洁清爽。

6.更加重视关键功能

并不是所有的控件都拥有相同的重要性。例如创建一个新的条目，页面中会有“创建”“取消”两个button. 这里的“创建”就要更加重要些，因为这是大多数情况下用户即将要做的事情。极少的情况下用户才会去点击取消。虽然这两个控件并排放置，但是不要给予相同的重视程度。为了将注意力引导到“创建”上，我们可以尝试使用不用的风格或样式。一种方式是将“创建”设计成button样式，“取消”设计成文字链接样式。另一种方式是在视觉上使用使用不同的颜色，并使button略有凸起的效果。这样便于抓住用户的目光。

7.嵌入视频

虽然图片和文字是向用户介绍应用程序功能的很好的方式，但如果资源允许的话，视频将是一个更优方案。近年来视频在网络上的使用越来越频繁。Web app的截屏视频经常被使用在营销网站中来展示产品的功能；然而这并不是视频使用的唯一方式。一些web app使用内部嵌入的视频帮助用户了解产品的特定功能。视频是快速演示产品如何使用的绝佳方法，因为与文字相比视频更容易被用户所接受，而且视频可以使用户准确地看到需要做什么，更加清晰。

8.让升级或降级的提示简洁、不扰民

在很多互联网产品中都会有不同权限的用户账户存在，比如邮箱、空间、网盘存储、SNS产品等。在用户拥有了一个账户后，他们可以对账户进行升级或降级。如何设计界面来提示用户他们可以升级而不去干扰用户的工作流程呢？设计师肯定不愿意在应用程序之外完成这件事情，这样的提示应该是和app是无缝连接的，而且最好是让用户感觉方便。因此升级账户的提示最好放在app内完成。

总   结

Web app的设计细节远不止上文中提到的这些，本文只算作抱砖引玉，希望大家可以在已有的优秀产品中发现更多思考的触发点。当我们习惯了走马观花地浏览其他公司产品的时候，我们已经对太多的东西习以为常；当我们开始设计用户界面，开始处理细节的时候，却时常会有拿捏不准的感觉。如果平时多总结一下其他产品（不一定拘泥于自己的产品圈子）的细节亮点，相信很多东西在实际工作中可以为我所用。