5ep9lzv 发表于 2024-8-12 00:25:25

制品入门系列｜APP设计思路一：列表页


    <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>是不可或缺非常重要的页面。本文以APP列表页为例，详述APP列表的设计原则与技巧，<span style="color: black;">针对</span>入门的新手有<span style="color: black;">必定</span>的<span style="color: black;">帮忙</span>。</p><img src="https://p3-sign.toutiaoimg.com/pgc-image/RUT9dS6IDnToGM~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723643995&amp;x-signature=kkqCZqsFmkbHiCS5HIF0%2Fej4m4Y%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>经理在做一个<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;">又<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>到该页面的元素、页面内容的布局以及细节性的斟酌。</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">1、</span>从<span style="color: black;">制品</span>功能<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>。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">1. 列表页的核心功能是什么，列表页是什么？</h3>
    <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;">列表页是<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;">用户在<span style="color: black;">这儿</span>的<span style="color: black;">重点</span>需求有两个：“<strong style="color: blue;">快速浏览</strong>”和“<strong style="color: blue;">快速区分</strong>”，浏览众多的信息，快速找到自己<span style="color: black;">必须</span>的信息。</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>方便用户快速筛选呢？</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">2. 用户想要看到什么信息，怎么来确定用户的接受度、<span style="color: black;">爱好</span>度？</h3>
    <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>访谈方式、AB测试看数据表现、借鉴成功<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;">以懒饭APP列表页为例，场景：周末，毕业参加工作不久的上班族小小吃腻了快餐，想自己做一顿容易做又好吃又省时不一样的饭菜，苦于不会做，于是打开了懒饭APP。</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>能够快速找到<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;"><span style="color: black;">因此呢</span>，懒饭APP提取出两个最重要的<span style="color: black;">原因</span>：<strong style="color: blue;">做菜时长</strong>、<strong style="color: blue;">做菜难度</strong>，如下图：</p><img src="https://p3-sign.toutiaoimg.com/pgc-image/RUT1blRGZV65yb~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723643995&amp;x-signature=9B0OZH4j1NYpAmABAGZ6ooLorbk%3D" style="width: 50%; margin-bottom: 20px;">
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">2、</span>从视觉实现<span style="color: black;">方向</span>分析</h2>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">1. 列表页的页面元素有<span style="color: black;">那些</span>？ 有多少种展示样式？</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">列表分为：<strong style="color: blue;">常规型列表、营销型会场列表</strong>以及<strong style="color: blue;">个性化<span style="color: black;">举荐</span>列表</strong>。</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><strong style="color: blue;">导航栏、卡片内容以及筛选项</strong>。</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><img src="https://p3-sign.toutiaoimg.com/pgc-image/RUT1bluBYnDiYG~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723643995&amp;x-signature=Gwh1wnUk9%2B9b8C6w%2FhrXGm5%2FkXE%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><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;">个性化<span style="color: black;">举荐</span>列表只是一个单独的模块，与列表页详情页杂糅在<span style="color: black;">一块</span>，<span style="color: black;">例如</span>：购物车。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">2. 卡片内容的<span style="color: black;">思虑</span></h3>
    <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;">卡片的展现方式多种多样，有瀑布流样式、一排一个，一排两个，一排三个及宫格式的展现样式，瀑布流样式的好处就在于不会压缩<span style="color: black;">照片</span>，看起来更美观。</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>什么样的内容，用户关注的点是什么，怎么去收集用户这些关注的点。假如要做一款菜谱APP，在前期内容少时，你会<span style="color: black;">选择</span>哪几个字段<span style="color: black;">做为</span>你的卡片内容。在<span style="color: black;">第1</span>版的时候，<span style="color: black;">必定</span>要<span style="color: black;">思虑</span>好</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">3. 列表页要<span style="color: black;">重视</span><span style="color: black;">那些</span>细节性的内容？</h3>
    <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>？</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>是非常重要的内容。</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>的样式来进行区分。</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>是列表中最<span style="color: black;">平常</span>的一个功能，列表<span style="color: black;">到底</span>按时间还是权重排序，要结合<span style="color: black;">详细</span>业务来进行排序。</p><img src="https://p3-sign.toutiaoimg.com/pgc-image/RUT1bme65VlUkm~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723643995&amp;x-signature=xpAlx6jq5oO%2BnbkjfvpRY%2BKHQXk%3D" style="width: 50%; margin-bottom: 20px;">
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">4. 列表页的需求文档怎么标注呢？<span style="color: black;">必须</span><span style="color: black;">重视</span><span style="color: black;">那些</span>细节性内容？</h3><img src="https://p3-sign.toutiaoimg.com/pgc-image/RUT1bmrDQbKbRN~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1723643995&amp;x-signature=9LRpUvGpNQIkxzligR3CA5l8Hb0%3D" style="width: 50%; margin-bottom: 20px;">
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">总结&amp;后记</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>细小功能<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;">作者：鸿鹄学社，<span style="color: black;">微X</span>号：xiechengdl001。大厂高级<span style="color: black;">制品</span>经理，<span style="color: black;">熟练</span><span style="color: black;">善于</span><span style="color: black;">行业</span>：新零售电商，7年互联网<span style="color: black;">制品</span>设计经验。</p>
    <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;">题图来自Unsplash，基于CC0协议</p>




星☆雨 发表于 2024-9-2 14:53:36

我完全同意你的看法，期待我们能深入探讨这个问题。

星☆雨 发表于 2024-9-9 19:19:58

这夸赞甜到心里，让我感觉温暖无比。

4lqedz 发表于 2024-10-1 00:19:36

楼主果然英明！不得不赞美你一下！

wrjc1hod 发表于 2024-10-10 08:10:09

百度seo优化论坛 http://www.fok120.com/
页: [1]
查看完整版本: 制品入门系列｜APP设计思路一：列表页