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&from=article.pc_detail&lk3s=953192f4&x-expires=1723647686&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&from=article.pc_detail&lk3s=953192f4&x-expires=1723647686&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&from=article.pc_detail&lk3s=953192f4&x-expires=1723647686&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&from=article.pc_detail&lk3s=953192f4&x-expires=1723647686&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&from=article.pc_detail&lk3s=953192f4&x-expires=1723647686&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&from=article.pc_detail&lk3s=953192f4&x-expires=1723647686&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&from=article.pc_detail&lk3s=953192f4&x-expires=1723647686&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&from=article.pc_detail&lk3s=953192f4&x-expires=1723647686&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. 按钮 & 搜索栏</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&from=article.pc_detail&lk3s=953192f4&x-expires=1723647686&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&from=article.pc_detail&lk3s=953192f4&x-expires=1723647686&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&from=article.pc_detail&lk3s=953192f4&x-expires=1723647686&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&from=article.pc_detail&lk3s=953192f4&x-expires=1723647686&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&from=article.pc_detail&lk3s=953192f4&x-expires=1723647686&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&from=article.pc_detail&lk3s=953192f4&x-expires=1723647686&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&from=article.pc_detail&lk3s=953192f4&x-expires=1723647686&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&from=article.pc_detail&lk3s=953192f4&x-expires=1723647686&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>
你的话语如春风拂面，让我心生暖意。 交流如星光璀璨，点亮思想夜空。 我完全赞同你的观点，思考很有深度。 楼主继续加油啊！外链论坛加油！ 楼主听话，多发外链好处多，快到碗里来！外链论坛 http://www.fok120.com/
页:
[1]