APP详情页怎么样用Axure画出来
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">详情页是App原型中比较<span style="color: black;">繁杂</span>的页面类型，<span style="color: black;">熟练</span>它的常用<span style="color: black;">招数</span>有助于快速画出。</p><img src="https://p3-sign.toutiaoimg.com/78b2000cec62df3a1fef~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644014&x-signature=6ukRL2tWMAivaRMhmjuo9y8B%2FRg%3D" style="width: 50%; margin-bottom: 20px;">
<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>讲解了APP<span style="color: black;">平常</span>功能中的页面模板、下导航、上导航、列表页怎么画出来，请继续关注浪子教你画APP原型后续的其他功能模块。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">APP详情页<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>
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">平常</span>的详情页类型</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">咱们</span>经常遇到的详情页有电商类的商品详情、团购详情、订单详情、活动详情，专题详情，以及社交类的聊天详情、主页详情、动态详情等。</p><img src="https://p3-sign.toutiaoimg.com/78b10011ec113cb20eae~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644014&x-signature=XOatSGGEvZPQTgQbVjyEacvDCwA%3D" style="width: 50%; margin-bottom: 20px;"><img src="https://p3-sign.toutiaoimg.com/78b60001e18e81f513f2~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644014&x-signature=r4dmA05x%2FWn2SfL9Ft5BFbxg3so%3D" style="width: 50%; margin-bottom: 20px;"><img src="https://p3-sign.toutiaoimg.com/78b2000cec639234d076~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644014&x-signature=0fZ%2FwJOUFcG5Sh%2B3e1S37re2CNc%3D" style="width: 50%; margin-bottom: 20px;">
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">平常</span>的详情页组件</h2>
<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>通栏Banner，<span style="color: black;">照片</span>轮播，文字列表项，图标列表项。限于<span style="color: black;">文案</span>篇幅有限，下面是我经常用到的详情页组件：</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><strong style="color: blue;"><span style="color: black;">照片</span>轮播</strong></h3><img src="https://p3-sign.toutiaoimg.com/78b5000b9791d9e670c5~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644014&x-signature=MaT7fyaV%2FFD8LVc74grLwx6vULc%3D" style="width: 50%; margin-bottom: 20px;">
<h3 style="color: black; text-align: left; margin-bottom: 10px;">图文卡片</h3>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><strong style="color: blue;">通栏banner</strong></h3>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><strong style="color: blue;">文字列表项&图标列表项</strong></h3>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><strong style="color: blue;">圆形按钮&直角按钮</strong></h3>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">创建元件库并<span style="color: black;">运用</span></h2>
<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>自己项目的特点，将APP详情页<span style="color: black;">平常</span>的这些组件制作成Axure元件库。</p>
<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>，点击Axure左方元件库-创建元件库<span style="color: black;">就可</span>。</p><img src="https://p3-sign.toutiaoimg.com/78b0001212c816e236c0~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644014&x-signature=jES7U9%2Bgz8ZAwviDdzKHjXCm3As%3D" style="width: 50%; margin-bottom: 20px;">
<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>以375×667的框架来<span style="color: black;">创立</span>，当然<span style="color: black;">亦</span><span style="color: black;">能够</span>以360×640来<span style="color: black;">创立</span>比较通用。<span style="color: black;">详细</span><span style="color: black;">原由</span>参见《 <span style="color: black;">为何</span>375×667是移动端原型的最佳分辨率 》。</p>
<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>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">引用过去的rp源文件</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">每次画APP详情页的时候，<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>过往项目RP源文件的习惯，</p>
<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>打开过去的的rp源文件，复制所需的内容到当前rp源文件。</p>
<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>“文件-导入RP源文件”批量导入更快捷，以及能够继承原先页面的注释，母版等功能。</p><img src="https://p3-sign.toutiaoimg.com/78b10011ec12c5127d92~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644014&x-signature=Q%2BypnK3EtO4rYzw28Weo7GyUnR8%3D" style="width: 50%; margin-bottom: 20px;">
<h2 style="color: black; text-align: left; margin-bottom: 10px;">其他技巧</h2>
<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>参考。</p> <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>内联框架功能。<h2 style="color: black; text-align: left; margin-bottom: 10px;">总结</h2>
<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>画APP详情页的时候少走<span style="color: black;">有些</span>弯路。</p>
这篇文章真的让我受益匪浅，外链发布感谢分享！ 外贸网站建设方法 http://www.fok120.com/ 你的见解独到，让我受益匪浅，非常感谢。
页:
[1]