9q13nh 发表于 2024-8-12 04:46:58

详情页的设计规范！按部就班


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">源自</span>：<span style="color: black;">微X</span>公众号 PingMianDesigner（平面设计）</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">一个完整的<span style="color: black;">制品</span>详情页的<span style="color: black;">功效</span><span style="color: black;">便是</span>告诉消费者<span style="color: black;">制品</span>是什么？<span style="color: black;">制品</span>的价格、外观、功能，以及<span style="color: black;">制品</span>与同类竞争者相比较的<span style="color: black;">优良</span>。详情页<span style="color: black;">通常</span>由以下部分<span style="color: black;">构成</span>：首图 Banner、<span style="color: black;">制品</span>信息、<span style="color: black;">制品</span>外观展示、<span style="color: black;">制品</span>细节展示及<span style="color: black;">制品</span>功效介绍。<span style="color: black;">另外</span>还可附上名人<span style="color: black;">举荐</span>、行业证书、物流信息、买家秀及售后说明等<span style="color: black;">关联</span>信息。</span></span></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p26-sign.toutiaoimg.com/pgc-image/eaadca9d0c8346ea900e6f95c5169707~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723647678&amp;x-signature=UT2p33QE1uqz8Ib8fhvJYXLxqos%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;"><span style="color: black;">制品</span>详情页要与<span style="color: black;">制品</span>主图、<span style="color: black;">制品</span>标题相对应，<span style="color: black;">制品</span>详情页<span style="color: black;">必要</span>真实介绍<span style="color: black;">制品</span>的属性，设计师<span style="color: black;">不可</span>单纯追求画面效果与<span style="color: black;">制品</span>真实<span style="color: black;">状况</span>背道而驰。</span></span></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p26-sign.toutiaoimg.com/pgc-image/780058e91f43406483d927473ad3358c~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723647678&amp;x-signature=OGAvP0B%2FbLvRGx0mRQRSKCmCFgw%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;">详情页的板块内容</span></strong></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;"><span style="color: black;">针对</span><span style="color: black;">通常</span>店铺或品牌<span style="color: black;">来讲</span>，一个完整有效的详情页应该是这种思维结构：先用首图抓住消费者的眼球，紧接着<span style="color: black;">经过</span><span style="color: black;">各样</span>功能讲解让消费者<span style="color: black;">认识</span><span style="color: black;">制品</span>，美图展示让消费者深陷其中，从而让消费者<span style="color: black;">认识</span>到此次购买<span style="color: black;">行径</span>的必要性，再乘热打铁给出<span style="color: black;">仔细</span><span style="color: black;">运用</span>说明或专家<span style="color: black;">意见</span>，最后给出<span style="color: black;">有些</span>口碑<span style="color: black;">举荐</span>及品牌认证打消消费者最后的信任顾虑，结合店铺<span style="color: black;">评估</span>、<span style="color: black;">制品</span>价格，<span style="color: black;">最后</span>促成消费者下单购买。</span></span></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/c16f123d3e714e9595d80de00ad37ad9~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723647678&amp;x-signature=GboDPGlGszzjMb1tazWLcUpZvTk%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">设计详情页之前要充分进行市场调研，既要对同行业进行调查，找到自己在同一品类众多与众<span style="color: black;">区别</span>的亮点，又要对消费者进行调查，分析并<span style="color: black;">把握</span>潜在消费者对消费水平、消费习惯与<span style="color: black;">爱好</span>，力争在最<span style="color: black;">短期</span>与消费者达到共情，从而促成消费者的购买<span style="color: black;">行径</span>。</span></span></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/764de9dcfdff4387b9d0eaa4500314c8~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723647678&amp;x-signature=T70ugCBIKbPnGjumVCsh3ejkDcc%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">市场调查的目的<span style="color: black;">便是</span>完成<span style="color: black;">制品</span>的定位，弄清楚<span style="color: black;">制品</span>的卖点，这对接下来<span style="color: black;">详细</span>完成详情页的设计至关重要，决定了设计素材准备的方向，以及详情页所用文案、字体、排版、配色等<span style="color: black;">许多</span><span style="color: black;">原因</span>的整体风格。详情页的设计还有注重烘托符合<span style="color: black;">制品</span>特性的氛围，<span style="color: black;">制品</span>在特定环境中的<span style="color: black;">运用</span>状态的表达<span style="color: black;">更易</span>使消费者产生共鸣。</span></span></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/06a919d8ba1a4f5e93b431ecd5110377~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723647678&amp;x-signature=S%2B0yAd2LCnwpXXQzfwWhqF16gqg%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;">详情页的文案类型</span></strong></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">详情页的文案<span style="color: black;">针对</span>设计详情页<span style="color: black;">来讲</span>尤为重要，<span style="color: black;">由于</span>文案与<span style="color: black;">制品</span>和详情页的设计风格息息<span style="color: black;">关联</span>。换句话说，文案相当于解说员<span style="color: black;">按照</span><span style="color: black;">制品</span>气质的解说，<span style="color: black;">制品</span>气质不<span style="color: black;">同样</span><span style="color: black;">那样</span>文案给人的气质<span style="color: black;">亦</span>就不一样。<span style="color: black;">详细</span>地说，详情页的文案<span style="color: black;">按照</span><span style="color: black;">制品</span>特性<span style="color: black;">区别</span>有以下<span style="color: black;">有些</span>表现类型：</span></span></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/99b8b48e06e442c3a7d360145f2977a2~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723647678&amp;x-signature=86wcuzVMg8P08N3HLx3cuKRSm%2BU%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">拟人式。<span style="color: black;">便是</span>将<span style="color: black;">制品</span>拟人化，以<span style="color: black;">制品</span>的口吻来自我推销，适用于走亲和力路线的品类，类目不限。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">自嗨式。直白地说<span style="color: black;">便是</span>用一堆拗口的形容词修饰<span style="color: black;">制品</span>，适用于走高端严谨路线的类目，类目不限，<span style="color: black;">例如</span>数码科技、服饰鞋包、护肤美妆等。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">搞笑式。此类文案画风<span style="color: black;">常常</span>比较逗比<span style="color: black;">或</span>无厘头，让人感觉很过瘾，适用于任何<span style="color: black;">能够</span>拿来搞笑或恶搞的类目，<span style="color: black;">例如</span><span style="color: black;">有些</span>二次元周边<span style="color: black;">制品</span>、生活用品等等。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">文艺式。这种文案给人一种深入骨髓的文艺气息，适用于任何走文艺路线的类目，<span style="color: black;">例如</span>茶叶、家居服饰、鞋包等。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">耍酷式。这种文案给人一种你买了我的<span style="color: black;">制品</span>你<span style="color: black;">便是</span>天下<span style="color: black;">第1</span>酷，你最拽、你最与众<span style="color: black;">区别</span>的感觉，适用于定位叛逆期的青少年们的类目。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">卖萌式。给人乖巧可爱的感觉，尤其是反差萌文案效果最好，让人忍不住想要多看几眼或分享给<span style="color: black;">伴侣</span>，<span style="color: black;">例如</span>故宫淘宝，<span style="color: black;">哪些</span>皇帝和娘娘们给人的感觉明明是很高冷的形象，画风却萌，一下子拉近了与消费者之间的距离。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">平淡式。这种文案比较直白保守，给人中规中矩和<span style="color: black;">呆滞</span>无趣的感觉，大部分反响平平的店铺详情页文案基本<span style="color: black;">亦</span>都是这类的，<span style="color: black;">公众</span>化、没创意，<span style="color: black;">没法</span>与消费者产生任何情感共鸣，好处<span style="color: black;">便是</span>省事不啰嗦，很纯粹的一手交钱一手交货的买卖关系。</span></span></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/28ae674504fb4a188edfde9fe6548b43~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723647678&amp;x-signature=3tgblwdgrFP6axELEtsD%2B6l2NVc%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;">详情页的设计规范</span></strong></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">详情页设计说简单<span style="color: black;">亦</span>简单，说难<span style="color: black;">亦</span>难，<span style="color: black;">由于</span>除了要设计得让消费者有购买欲望以外，还得<span style="color: black;">重视</span>用户体验，防范字体和素材<span style="color: black;">是不是</span>侵权了，还得避免<span style="color: black;">运用</span>极限词违反<span style="color: black;">宣传</span>法被投诉，为了避免以上<span style="color: black;">状况</span>的<span style="color: black;">出现</span>，详情页的设计要有<span style="color: black;">必定</span>的规范，<span style="color: black;">亦</span><span style="color: black;">便是</span><span style="color: black;">重视</span>事项：</span></span></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/f438d844c72e4161b83a7c64a6bf8f0c~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723647678&amp;x-signature=DKPi7kR5Zcww%2BAcOmOmOykzyGaA%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">详情页的尺寸。详情页的尺寸分为宽度和高度两个方面，<span style="color: black;">通常</span><span style="color: black;">来讲</span>高度不限，而宽度的设定受到两方面<span style="color: black;">原因</span>的影响。<span style="color: black;">区别</span>的输出端详情页的宽度<span style="color: black;">区别</span>，如 PC 端和个人移动端；<span style="color: black;">区别</span>的电商平台详情页的宽度<span style="color: black;">亦</span>有所<span style="color: black;">区别</span>。例如：在 PC 端，某猫的详情页宽度是 790px、某宝 750px、某东自营 750px、某东第三方 790px；在移动端，详情页的宽度设定在 750px 与 1242px 之间，<span style="color: black;">亦</span>有人直接拿 PC 端 750px 或790px 宽度适配。</span></span></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/e9055d5c9bf64d2e9b574f5d208c761e~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723647678&amp;x-signature=EswhrbbZsJVS7k957uhuJNjsTB0%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">事实上，某猫、某宝、某东等平台每改版一次详情页的尺寸就会有相应变化，而随着大屏幕手机的占有率越来越高了，平台的每次改版其实<span style="color: black;">亦</span>是在顺应时代的发展<span style="color: black;">必须</span>，以及<span style="color: black;">增多</span>商家和用户的<span style="color: black;">运用</span>体验，<span style="color: black;">因此呢</span>，<span style="color: black;">此刻</span> PC 端和个人移动端的详情页尺寸基本通用了。</span></span></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/394c5a9cad854cf897e4b26f2572be91~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723647678&amp;x-signature=v%2BaTusv2zHTKi7nvaNlFt6GcnY4%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">详情页的版式发展趋势。从一线城市到六线城市，移动端订单占比平均已达 80% 以上，<span style="color: black;">乃至</span>有<span style="color: black;">有些</span>比较极端的案例移动端订单占比高达 90% 以上，<span style="color: black;">因此</span> PC 端详情页设计他们基本<span style="color: black;">已然</span>直接放弃了，而是着重打理移动端详情页。而用户在移动端浏览详情页和在 PC 端浏览详情页体验是不<span style="color: black;">同样</span>的，<span style="color: black;">例如</span>手机屏幕基本都是竖屏的，<span style="color: black;">况且</span>尺寸偏小，一只手掌<span style="color: black;">就可</span><span style="color: black;">把握</span>，而PC屏幕<span style="color: black;">此刻</span><span style="color: black;">广泛</span>都是23 寸以上，屏幕越来越大，基本是横屏，这<span style="color: black;">亦</span>就衍生了一个移动端详情页设计要遵循竖版思维的理念，<span style="color: black;">亦</span><span style="color: black;">便是</span>文案以及<span style="color: black;">制品</span>图可能更适合上下排版而不是<span style="color: black;">上下</span>排版。</span></span></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/75909779cdcd4c1ebe4448bbba06bfe5~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723647678&amp;x-signature=0G%2FIrceheAJc7pt7M2DLk%2BhXeQ4%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;"><span style="color: black;">况且</span>随着智能手机占有率和<span style="color: black;">运用</span>频率的<span style="color: black;">提高</span>，带来的是移动端订单占比的<span style="color: black;">加强</span>和各大电商平台的改版升级，<span style="color: black;">针对</span>商家<span style="color: black;">来讲</span>工作量其实减少了，<span style="color: black;">由于</span>移动端变<span style="color: black;">成为了</span>主战场，PC 端的详情页尺寸跟移动端是<span style="color: black;">同样</span>的，<span style="color: black;">能够</span>优先设计移动端，<span style="color: black;">而后</span>PC 端直接进行套用。</span></span></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/e6faa829a57a4a71ae904761ac90efb4~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723647678&amp;x-signature=6eacE7sJOLmOhnUUm%2B7CwMCMn3Y%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;"><span style="color: black;">然则</span>，竖版思维的排版方式无疑<span style="color: black;">亦</span>会<span style="color: black;">增多</span>详情页的高度，<span style="color: black;">通常</span><span style="color: black;">来讲</span>，移动端详情页最多不要超过 8-10 屏，过长的页面容易令人产生烦躁<span style="color: black;">心情</span>，<span style="color: black;">有害</span>于用户实现购买<span style="color: black;">行径</span>。除非，详情页的设计<span style="color: black;">特别有</span>趣、很美或很好玩，长度就不是问题了。<span style="color: black;">举荐</span>阅读：</span><span style="color: black;">详情页主图设计要点！</span></span></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/b24ce6a25703455e978d7dac4ba6a5fe~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723647678&amp;x-signature=SxuEjOckV0OIHqFfpNyKbN1r4%2B0%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/3ea783349d1d4c558a0bcdc5d2d451cf~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723647678&amp;x-signature=JPtwHWH9RdSvRPxSjJ2wZH790po%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <div style="color: black; text-align: left; margin-bottom: 10px;">
      <div style="color: black; text-align: left; margin-bottom: 10px;">（此处已添加圈子卡片，请到今日头条客户端查看）</div>
    </div>




星☆雨 发表于 2024-8-26 15:45:27

你的见解真是独到，让我受益良多。

nykek5i 发表于 2024-10-23 09:41:11

我完全赞同你的观点，思考很有深度。
页: [1]
查看完整版本: 详情页的设计规范！按部就班