u1jodi1q 发表于 2024-8-12 04:50:04

15个手机详情页设计细节,助你输出高品质页面


    <div style="color: black; text-align: left; margin-bottom: 10px;">
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">源自</span>:设计达人网</p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">链接:</p>http://www.shejidaren.com/15-shouji-xianqing-ye-sheji-xijie.html

      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">前言:</strong>这是一篇扫盲式的手机详情页的设计细节<span style="color: black;">文案</span>,<span style="color: black;">重点</span>写给0<span style="color: black;">基本</span>的小白设计师的,大佬们笑一笑就好了,当然有错误的<span style="color: black;">地区</span><span style="color: black;">亦</span><span style="color: black;">哀告</span>指正,不仅能让我学习到知识,还能避免把人带弯。</p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">目的:</strong>做详情之前得清楚详情页的核心目的,个人认为是展示<span style="color: black;">制品</span>卖点与传递<span style="color: black;">制品</span>信息,形成转化,美观是其次。</p>
      <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/2ad13fa7fef24c48b478f9f896b4d776~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723647686&amp;x-signature=ez%2FK7dxOFNs2BPUgWDmtdmw508k%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>在制作详情页的时候得时刻记住自己主<span style="color: black;">想要</span>表达的是什么,在信息传达到位的前提下,<span style="color: black;">能够</span><span style="color: black;">检测</span>下下面的细节。</p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1. 一屏的尺寸</p>
      <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/f1ef42b54a9b4eb5aae88ccf41915550~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723647686&amp;x-signature=558ANxQs%2Fc4S4dUFFS1XgusJVhg%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>95%的详情页用户都来自无线端,<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>平台以某宝为例,手机用iPhoneX,计算出了一屏可展示的高度,<span style="color: black;">这般</span>自己在做详情的时候就<span style="color: black;">晓得</span>多高比较合适了。</p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2. 竖屏思维</p>
      <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/eb4a055bc6504abebcc1c015d44bbe63~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723647686&amp;x-signature=cLUZOxOFcMD%2FvFovvD%2B200V%2F2dE%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>场景是手机,<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>18px。</p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3. 图标设计</p>
      <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/1ad54feccb4e4dd5bae3071057a7953b~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723647686&amp;x-signature=uIwLsxw8r71u4jUYrjCaKMncbA8%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>文字的时候效率要高,<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>线性图标的时候,还要记得统一图标的粗细。</p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">04. 关于<span style="color: black;">名人</span>肖像</p>
      <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/f88870c50886437281cd0a7687ca0e26~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723647686&amp;x-signature=cYH2e6PmH7%2BdIOYdaiLYNt9XxPA%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><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>有利于画面和谐。</p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">05. 图形</p>
      <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/8a9f777544304c649d16efb17614235d~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723647686&amp;x-signature=nIVLxZhgcTNM7fzp2QE9EStOmnY%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><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>的。</p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">06. 圆角矩形</p>
      <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/c445ac402a2d4fcc90e6ad0e3c54b7c2~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723647686&amp;x-signature=lhpMAYxQYxJpz439tuguYU1nmKs%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>用,<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>。</p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">07. 投影</p>
      <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/f62758bc764c44a49d9fdd7732f729a9~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723647686&amp;x-signature=7EqVHEeIMjQ2Zw5KM7QbmYFmavw%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>好用的,<span style="color: black;">然则</span>或许有更好的方式,试试加了红色的黑色吧,<span style="color: black;">亦</span>许看上去更干净一点。</p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">08. 按钮 &amp; 搜索栏</p>
      <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/c5f86c5872004708b54f2012f56743c8~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723647686&amp;x-signature=j70MENEp4JQ%2FCffIOuo92c4M4Lo%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>都是从业<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>试着分析下按钮的负空间,与单个字体之间的比例,做出来的按钮整体效果要比之前的大气哦。</p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">09. 箭头</p>
      <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/9310f51678734ccba34d1fe7dcea782c~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723647686&amp;x-signature=5TSlV9wAi0SmlmO0bPJ3Gg%2F%2BSoI%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>初学者习惯偷懒用英文的符号代替,<span style="color: black;">然则</span><span style="color: black;">常常</span>细节决定成败,随便画一个矩形,删除一个锚点,旋转45就能画出来,记住统一成文字的笔画粗细。</p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">10. 字体搭配</p>
      <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/c0589140ed734b43aef32574515f486f~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723647686&amp;x-signature=HZnpyg9%2Fvy%2FcLzbk%2F%2BMXhtDIIXY%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>字体个性不太<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>加大1-2个字号,<span style="color: black;">同期</span>字重<span style="color: black;">必须</span>匹配。</p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">11. 标题与正方</p>
      <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/3fdb977a27dd4c38ae01feef56852ea0~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723647686&amp;x-signature=qV7%2B4Y%2BqqY0M1bCVbjko5Iqswzg%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>用计算器,固定好标题文字<span style="color: black;">体积</span><span style="color: black;">或</span>内文文字<span style="color: black;">体积</span>,<span style="color: black;">而后</span>用1.414、1.5、1.618、1.732、2、3等比例进行运算,内文的行距<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>的时候,避免某些意料之外的瑕疵。</p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">12. 辅助线</p>
      <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/76af899a2b704e38a059e9c285c702dd~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723647686&amp;x-signature=2ilUrNtZMi7KUlIk76KsXY4E9w4%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>拉辅助线的是按住shift,辅助线会以1、10<span style="color: black;">这般</span>的整数变化,不会<span style="color: black;">显现</span>小数点的辅助线,避免在对齐的时候<span style="color: black;">显现</span>1px的误差,被说成是粗心的失误。</p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">13. 阅读<span style="color: black;">次序</span></p>
      <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/cbb07892bba94623be616d25817cb354~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723647686&amp;x-signature=stI5jEFgWe27%2BfStNgBCQSnb6%2B0%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>一个<span style="color: black;">过程</span>,试试用1、图、文字的<span style="color: black;">次序</span>,跟图、1、文字的<span style="color: black;">次序</span>阅读,就<span style="color: black;">晓得</span>哪个更流畅,更能带来良好的用户体验。</p>
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">14. 标题推导</p>
      <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/6b4592189fa94ae982aba75056f56995~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723647686&amp;x-signature=mtnK0y2s6lvmrxoIdUqEBJjzeqA%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>让这个文字在每屏中的位置<span style="color: black;">同样</span>,<span style="color: black;">这般</span>会让你的设计看起来很规整,<span style="color: black;">亦</span><span style="color: black;">特别有</span>设计感。</p>
      <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/1f637135773541f89f6dd57be25733bf~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723647686&amp;x-signature=nZ6%2BiijcOXtgQwyLwu7qe17eYOo%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>来自网络,仅用于学习交流之用途。</p>
    </div>




大哥 发表于 2024-9-8 05:19:05

你的话语如春风拂面,让我心生暖意。

听听海 发表于 2024-9-10 02:41:51

交流如星光璀璨,点亮思想夜空。

4zhvml8 发表于 2024-10-3 11:30:53

我完全赞同你的观点,思考很有深度。
页: [1]
查看完整版本: 15个手机详情页设计细节,助你输出高品质页面