端页面，既包括营销类页面，也包括功能类页面。我们要针对不同页面的特点以及用户心理，准确地理解前端页面设计的要素与重点。

在福格行为模型中， 福格认为要使人行动起来，三个要素必不可少：

1. 充分的动机；
2. 完成这一行为的能力；
3. 促使人们付诸行动的触发。

这三要素缺一不可，否则用户无法跨过行动线的门槛。

通常我们定义前端页面的作用在于：让用户通过自主的行为，满足其心理预期。要想让用户行动起来，需要有相应地对客前台页面去承载。基于此，我们可以把前台页面划分为营销类页面、功能类页面两大类。

营销类页面通常用于触发、唤起用户动机，给用户开展行动创造理由，让在用户匆匆一瞥中触发用户进一步的行为；而用户进入功能类页面时，或多或少都有一定的动机，因此功能类页面在设计时需要降低动作门槛、减少障碍，让用户尽可能地完成动作。

一、营销类页面

营销类页面常见于各类电商平台，常见的落地页、广告页、新人引导页都可以归为此类；营销类页面通常是运营方基于明确的KPI而提出的需求，具备短时间、周期性、UI变化快的特征。

产品经理在设计营销类页面时，需要在首屏完成传递价值、稀缺感、便宜感、专业感、高贵感的功能。

此处对营销文案的要求极高：好的文案，可以提高用户参与度；平庸的文案，则会有较高的流失率。

当然高参与度的活动页面不是一蹴而就的，产品经理在设计页面时，可以考虑文案的可配置化或者活动图片的配置化。复杂一些的可以考虑使用AB测试，在不断的测试中，提升参与度。

除去活动本身的界面外，产品经理需要考虑活动模型扩展性，以及页面关键信息打点。便于后期模型复用、功能快速上线以及活动效果复盘。

周期性开展的营销页面，还需要考虑数据可视化；在研发资源有限的情况下，可以使用Tableau，PowerBI之类的工具。

单纯堆功能、没有多样化测试、没有复盘的营销活动，会让研发疲于应付，运营侧也会失去策划活动的动力。

以下是常见的营销类页面：

营销类页面

二、功能类页面

提交订单页、表单信息填写页、发表点评页、订单详情页面，该类页面是典型的功能类页面，通常承接在营销类页面之后，对页面漏斗转化率指标敏感。

当然，在基础诉求满足后，可以考虑扩展性的推荐、广告、拉新之类的内容。

该类页面设计重点在于：

• 对用户操作流程的合理把控；
• 对信息的分类以及再组织能力，力求在极致简单之中，触及用户心理点位。

其中对于页面流程的把控尤其重要，我们通常说：没有产品是丑死的，大多是难用死的。难用的重点体现在页面流转以及操作流程。

在产品设计时，一定要考虑功能的核心流程，模拟完善的用户路径。在各方纠结于UI设计美丑的时候，产品经理一定需要知道，大多功能的流程设计之差，还轮不到拼UI界面的地步。

另外，以上强调的前台用户流程，有时候也会依赖关联系统的流程设计。尤其涉及到后台系统时，后台系统保证的系统的稳定性、可扩展性、操作便利性。若因这些因素而影响了前台合理的流程设计，除了可以要求关联系统优化外，也可以考虑前台页面服务端包装数据，以保证前台流程合理性。

再说信息分类与组织。如同原研哉所述：理想的设计，它的对象不是物品，而是人与人之间的关系。

在设计此类需要用户有意识参与的功能时，需要对用户场景、用户画像有深入的了解。这类页面通常样式以及信息模块比较固定，关键元素布局上需要迎合全网用户的操作习惯，设计原则可以参考Giles Colborne所著《简约至上》——删除、组织、隐藏、转移四策略可以让用户更好地理解页面。

以下是常见的功能类页面：

功能类页面

三、结语

实际应用中，有些页面无法简单归类。例如头条的信息流页面，该页面是推荐内容的聚合，推荐算法优于页面信息组织。

用户从首页列表就能被吸引，打开文章or短视频即获得了瞬时的满足感，反馈周期极短，容易快速成瘾；电商通用的产品详情页，更像是营销页以及功能页的结合，通常页面会有领券、拼团、满减之类的引导元素，也有产品详情之类的基础信息表达。

当然，也并不是说用户的行动一定需要经过营销类页面，如果用户诉求足够强烈，用户会直接进入功能类页面。例如微信，主界面中就没有营销类页面，取而代之的都是功能类页面。

作者：sona.xu，微信：xzm_1991

本文由 @sona.xu 原创发布于人人都是产品经理。未经许可，禁止转载。

题图来自 Unsplash，基于CC0协议

站的每一个部分都很重要，你是否忽略了“联系我们”页面？来看看有什么设计这个页面的技巧吧。

简化联系表格

Yummygum

Yummygum的联系页面很干净很简单，只有3个框和一个提交按钮。简单的好处是不会让游客望而却步。

大号的文字显得简练易读，方便浏览者快速校对信息，从而有更大的满足感。

以现在的网页技术很容易创建一个动态的联系表格。通常留有3-6个框供浏览者填写姓名，邮件和个人信息。

大多数网站游客偏爱这种联系表，因为比较节省时间——不需要打开自己的邮件客户端、拷贝邮箱地址。目前网站联系表格通常包含网络安全技术比如CAPTCHA，所以安全性是很强的。

这种表格的所有元素看起来很统一，给人感觉很完整。另外建议使用JavaScript显示提示和帮助，确保用户知道他们的消息已发送成功。

Princeink

复杂一点表格看Prince Ink quote form网站，页面分为4部分。

记住，不是每个框都要填写。只有带星号是必填的。大部分情况下，游客能够识别星号，但是部分游客可能发现不了。如果是设计更大的联系表格，要突出必填的项目。这样将简化提交过程，优化用户体验。

统一中表现审美

表格既要讲统一性，也要讲审美。毕竟表格是网站外观的一个重要部分。

Underbelly

Underbelly是一个设计创意机构网站，联系页面很独特。显而易见，这个联系表格用了CSS样式表和JavaScript。输入界面看起来像一般正式文件的表格形式。设计独特整洁，让人觉得发送电子邮件也成了一种乐趣！

Dangerousrobot

Dangerous Robot 网站的设计跟上一个不同，联系表格与其他元素通过明亮的暖色和矢量图案很好的融合在一起。联系表格基本采取居中模式，每个框里加上图标，使得辨识度和阅读速度得到提高。

添加地图标注

一个公司的地理位置在商务交往中往往扮演着重要的角色。加入嵌入式地图则把企业地址可视化。谷歌地图有一个自定义的嵌入功能，允许开发者添加全功能的谷歌地图到联系页面。

Bkwld

BKWLD的联系页，除了一些基本的邮件/电话信息，添加了MAPbox动态地图，调高了交互性。

Fortyonetwenty

也可以考虑使用一个定制的照片，不用JavaScript地图。在FortyOneTwenty网站联系页面，使用一个世界地图，上面的蓝点标注了全球分公司和员工分布情况。

由于这张照片是作为背景图像，所以融合更自然。地图让位于内容，显得不喧宾夺主。

添加社交网站链接

在联系页面添加社交网站链接，可赋予企业可触摸的人格。这些链接可供浏览者在无法或者不宜使用电话、邮件的情况下联系企业，并且可以浏览企业更多动态信息。最好能在同一页上提供不同的社交账号链接，让浏览者决定选择哪一个。

Tone

我最喜欢的英国创意机构非Tone莫属，无论是它的作品或者是作品集网站。它的联系页使用定位他们办公室的完整地图和动态联系表格。

往下滚动鼠标，你会发现一个长长的的社交媒体图标水平列表。这些链接包括该公司的各种社交账号包括Twitter,LinkedIn,Instagram。按钮大而醒目，但是并没有放在页面顶部，因为邮件，电话和地址才是最重要的。

Positiveadvertising

Positive Advertising网站的社交账号图标设置的比较小。这个网站是单网页网站。社交账号图标位于电话号码，电子邮件地址和邮寄地址的下面。图标采取了统一的单色处理。

展示团队成员

这个方法使用较少，但是可以增加网页的个性。个人网站可以在联系页面加上本人照片。大一点的公司往往把照片转移到“公司团队”页面，每个重要人物有单独的照片和介绍。

Blueskyresumes

Blue Sky Resumes网站的“关于我们”页面包含一段团队的介绍。每个雇员都有自己单独的网页链接。

“联系我们”页面的顶部，注意到沿左边一个固定的滚动块没有，滚动块小按钮链接到电子邮件，手机信息，还可以发送一个请求报价。这个网站联系页面非常生动，让人耳目一新。

Etsy

Etsy的“团队”页面。每个团队成员照片链接到各人简介页面。这种个性化的设计无论是对于客户还是公司的第三方供应商来讲是都很棒的。

这个团队网页不直接链接到他们的联系页面。这是一种有目的的设计选择，因为公司有那么多职员，足够撑起一个网页。不过该网页可以链接到“关于”网页，“新闻”网页，其中包含一些电子邮件联系信息。

团队成员列表不是必须有的，但在合适的时机可以作为良好的补充。

任何网页的最重要的是可用性，只要你学会迎合用户体验，那么设计精良的联系页面就不在话下了。

频地址：

HTML网页设计零基础入门教程（一），两分钟学会设计第一个网页。

文案：

大家好，我是老K。一个码龄超过10年的程序员。从今天起，我会给大家介绍，Web网站开发的最基本语言：HTML。本期视频给大家介绍怎么编写第一个网页。什么是HTML呢？HTML就是超文本标记语言，用来标记通过互联网传输的网页的格式。用HTML标记的网页是静态网页，后缀名一般是.html或.htm。静态网页制作完成以后，其内容不会变化。如果要修改内容，必须修改源文件。

HTML用各种元素组织文档，用一对尖括号标记元素的开始和结束。两个尖括号里面的表示元素的内容。例如：<title>人工智能</title>，表示网页的标题是，人工智能。所有的,web,设计语言都以HTML为基础。编写HTML，很简单。使用windows自带的，记事本，就可以编写。首先，创建一个文本文档。用记事本打开文档，输入HTML代码。我们先来看一下效果，稍后我会详细介绍源文件的内容。保存以后，关闭记事本。重命名文本文件，把后缀名改为html。用浏览器打开网页，就看到效果了。

我们来看源文件。

第一个元素，HTML,是顶级元素。所有的元素都包含在它里面。

第二个元素，head，表示文档的头部信息。

第三个元素，title，是head的子元素，表示网页的标题.

第四个元素，body，是网页的主体部分。

body，元素的内容是一句文本：世界，你好。

好了，这就是本期视频的内容。谢谢观看！再见！

源文件：

<html>

<head>

<title>This is the fisrt page</title>

</head>

<body>

Hello, world!

</body>

</html>