产品页设计｜台上三分钟，台下十年功

说到产品页，大家脑海中最快想到的可能是某宝产品详细底下的静态产品介绍图。这是产品页的一种形式，载体是图片。

而今天我们聊的是聚焦于硬件产品的、更高端、更多元的产品页设计，它呈现的载体是网页。

随着网页技术的发展，产品页设计展现变得更多元化，为了抓住消费者的眼球，设计师可以无所不用其极，多样的字体、不受约束的排版、天马行空的动效…

▲  iPhone 12 Pro 外观卖点产品页设计

——

产品页是企业品牌和销售的“第一印象”

第一印象有多重要，我在这里就不再赘述了。企业官网的产品页设计是一款硬件产品如何在互联网上展现的设计源头，设计好官网的产品页，一定程度就是把控了全部渠道产品的“第一印象”。

那产品页设计是如何影响品牌和销售的？

首先是品牌，产品页作为大量用户与企业接触并产生联系的线上入口，第一印象至关重要，如果产品页设计十分简陋，恐怕用户对这个款产品，甚至整个公司都会产生不好的印象。换个角度，当产品页设计出“高质感”，展示出产品优势，让用户为之信服，同样，也会让用户产生，页面设计都如此精致，产品应该也差不到哪去的感觉。

更别说下单购买。

另外，随着企业的扩张，市场国际化，相对国内环境，国外企业更加注重线上官网设计，与此同时，产品页设计将变得更加重要。

另一个则是销售的意义，无论国内国外，企业官网永远都是不可或缺的线上销售渠道之一，特别是高端电子产品呈现越来越贵的大环境下。页面的质量，很大程度上说明了销售的价值。

通过流畅、美观的视觉设计和交互动画，让每个消费者，快速而愉悦的了解产品，给消费者诠释新产品带来的新的生活方式，这是产品页设计的首要任务。

通过优质的线上体验，让用户在不知不觉中下单。

——

台上三分钟，台下十年功

为什么说产品页设计是“台上三分钟，台下十年功”？

产品页设计，中的“产品”本身具有高端感，距离感。这是通过不断营销，增强价值，营造高端感，而高端感本身，与用户是有距离感的。这也决定了，它的设计方式不能像互联网产品，可以采用上线或者灰度的方式去进行测试，通过敏捷开发，不断优化。

甚至可以极端点说，更像是发射火箭，或者参加奥林匹克比赛，你只有一次机会。

这也意味着，产品页设计某种程度是在挑战“一定要成功”的目标。这样带来了，每次设计项目，都是高成本运作，具有长周期，多部门协作的特点，且设计师的每个创意，从草稿到输出成品，花费需要几十万的成本。

这样的特征，也导致会对产品页设计师提出更高的要求。

专业方面，需要多样化的技能组合。除了视觉、交互、创意设计外，还需要了解不同的硬件产品特征，它的材质，它的光影变化。另外，还需要具备一定的前端开发能力，了解前端动效的实现方式，以及设计方案会带来的性能问题。

专业之外，强抗压能力。由于产品页设计的发布常常与发布会挂钩，进行全球统一发布，设计方案不可避免会涉及多部门，多区域的合作，所以协作沟通能力显得非常重要。与此同时，由于官网平台的特征，对内容的准确性将远高于其他渠道，再加上与发布会联动导致的频繁调整，设计师需要在高密度修改且不能出错的环境下进行工作。

——

我的 HUAWEI Mate X 设计故事

以我负责设计的 HUAWEI Mate X 设计项目为例。接到需求后，由于产品的高安全级别，我在创意初期是难以没接触到真实产品的。我的解决方案是通过手绘和自制的纸模型来模拟产品，不断思考，一款会折叠的手机，应该用最简单的方式介绍给用户。

▲  HUAWEI Mate X 手绘稿

▲  HUAWEI Mate X 首屏动画系列帧

让用户第一眼，了解产品最主要的卖点——折叠。我手机将以半展开的形式放置在首屏中心，让用户第一眼，就感觉到它的“与众不同”。然后，随着页面滚动，产品从半折叠，慢慢展开，变成全展开，最后折叠变成正常手机的形态。

▲  HUAWEI Mate X 首屏动画  

一个首屏的产品展示，我需要从手绘、图文排版、设计产品运动脚本，考虑光影在产品上的变化，以及，用户滚动页面，滚动的舒适度等。真正意义上，从二维到三维，从设计到开发，用最短的，最有力的方式，展现产品的特色，并吸引住用户继续浏览。

进入页面的卖点展示区域，即成功将客人引进门。接下来要考虑的是“如何让用户越滑越有趣”？

我尝试将问题进行分解，得出两个要解决的关键问题：如何让每个卖点一看就懂？，如何从全局把控串联每一个卖点？

单个卖点的展示，从“动”与“静”两个角度考虑。

“动”指的是动态的展示卖点。常用的手段有“视差滚动”，在用户滚动时，通过控制不同元素的运动速度，从而产生视觉上的立体感。主要运用在产品呈现轻薄，产品外观展示中。

▲  HUAWEI Mate X 卖点展示

“静”指的是产品内的界面展示，设计产品卖点，免不了会露出软件界面。如果你理解仅仅把界面贴进去就完事了，那你就大错特错了。界面展示，是一个很好向消费者，传递场景，生活方式的地方。UI界面上的文字，配图，都需要经过深思熟虑，是放一组朋友聚会的照片，营造轻松的假期氛围，还是激烈的战斗画面，模拟游戏快感。这些都是“静”的细节。

 ▲  HUAWEI Mate X 卖点展示

妙用排版和过渡动画，控制阅读节奏。

产品页设计的排版，不同于App的界面设计，需要在小小的空间，挤入大量的内容，而更像是在无止境画布上的平面设计，允许大量的留白，大号的字体，跨屏的产品摆放。需要铭记在心的是，如何强而有力的打动用户。

追求“无界”的过渡体验。传统的色块过渡，如 PPT 翻页，略显乏味。我喜欢通过前端滚动监控技术以及利用 PNG 可透明的图片属性，探索不同的过渡方式。在项目里，我才用的就是滚动监控控制的颜色渐变方式，向用户介绍完新产品带了全新使用体验后，随着滚动，页面从白到黑，进入“黑科技”介绍环境，紧接着麒麟芯片映入眼帘。

以上都是会 HUAWEI Mate X 产品页设计的一些思考和实践。在这个项目中，感谢团队和供应商，大家一起努力的一个又一个通宵达旦。虽然非常辛苦，但是每次都让自己成长很多。通过多团队的参与，不断反问自己什么才是最简单有力的表达方式。

不断追求，化繁为简。

——

总结

产品页设计，是一个企业品牌和销售的“第一印象”，它影响着消费者，对产品和公司的印象，是公司的全球线上的第一张名片。由于产品本身的特性，导致对产品页设计师提出更高的要求，需要其掌握多样组合的专业技能，强大的抗压能力、耐心，以及细心。

感谢你的时间。

欢迎关注公众号：设计系求生指南