创意电子

标题: 不一样的移动端那点事：APP、小步伐 [打印本页]

作者: 物联区块链 时间: 2021-3-25 04:04
转发了

作者: 悟不空001 时间: 2021-3-25 07:45
转发了

作者: 事在人为162084077 时间: 2021-3-25 07:59
转发了

作者: 邬利 时间: 2021-3-26 00:35
转发了

作者: AGG演义 时间: 2021-3-26 07:24
转发了

作者: zsv 时间: 2021-3-26 13:50
转发了

作者: 人人都是产品经理 时间: 2021-4-2 07:25
标题: 不一样的移动端那点事：APP、小步伐

编辑导语：在移动端的界面设计中，我们要对其中的布局设计比较看重，一个完备的页面上每个组件的分布都是很告急的；对于用户来说，通用性是非常告急的，对于用户体验的影响也很大；本文作者分享了关于移动端的设计必要注意的点，我们一起来了解一下。

很多产品经理与设计师在设计移动端界面的时候，每每对界面上必要遵照的一些通用性设计原则不是非常清楚；而这些通用性或者全局性的规则对界面设计起到了很告急的作用，知道这些不一定会提升用户体验，但是不知道这些很大概会使界面设计出现题目。
本文笔者选取了8大热门APP，整理了一些移动端（APP、小步伐）的设计规则，如APP一级页主布局设计、APP二级页主布局设计等，和大家一起来巩固下移动端设计必要了解的知识。
笔者选取的8大热门APP包括：

花瓣（图片类）
肯德基（快餐类）
京东（电商类）
墨迹（天气类）
微博（社交类）
下厨房（烹饪类）
知乎（知识类）
雪球（资讯类）

01 APP一级页主布局设计

从上图我们可以发现，APP一级页主要包括顶部导航区、中间内容区和底部标签栏。
顶部导航区通常由搜刮条、APP核心利用功能组成。例如对于花瓣APP来说，它是一个图片素材工具，它可以帮助用户发现自身关心的事物；因此它在顶部导航区放了一个大大的搜刮条，来吸引用户去搜刮自己想要的图片。
对于下厨房APP来说，下厨房是一个厨师和美食爱好者记录、分享美食的平台；因此该平台的内容来自于用户主动上传，同时该平台鼓励用户之间互相分享和交流，以是下厨房顶部导航主要功能为“上传”、“搜刮”和“消息”。
由此可见，APP顶部导航区的功能设计与APP的属性及核心目标有极大的关系。
中间内容区又分为上、中、下三部分，在APP设计中，我们必要考虑重点内容前置展示和首屏利用率；例如对于京东APP来说，它是一个专业综合网上购物商城，其销售超数万品牌，它的核心目的就拭浇榻多的商品展示给用户，并且尽大概的提升用户的购买率。
因此京东APP的主要内容布局由上到下分为分类导航区（合理的分类，提升用户查找商品的服从）、营销区（千人千面的显现，触达用户心智）、金刚区（页面核心功能地区，为告急子板块分发内容）、各类卖点区等；而分类导航区、营销区、金刚区占了首屏一大半的位置，各类卖点区中的京东秒杀、京东直播、每日特价等也展示在了首屏。
该类的设计模式，提升了用户的产品触达率和转化率。

2014年，Apple提出了一种移动端新的导航模式，即底部标签栏。底部标签栏满意了用户我在哪里（一样平常通过标签高亮的方式反馈）、我可以去哪里（别的标签）的需求。
可以说，底部标签栏不仅是设计上的飞跃，更是用户体验上的进步，通常移动端标签栏的导航数量为2-5个；在笔者统计的这8个APP中，根本上在4-5个，这是现在业内最为常用的数量。

02 APP二级页主布局设计

从上图我们可以发现，APP二级页主要包括顶部导航区和中间内容区，底部页签栏根据页面的实际情况选用。
APP二级页的顶部导航区功能有一个主要的特征是它通常带有“返回”按钮，可以帮助用户很顺利地返回到上一页；同时在二级页导航区会展示当前页的标题，从而让用户知道他现在处于哪里。
由于大家在使用APP时都是右手利用原则，因此在导航区的右侧地区通常放置与当前页相关的利用性功能。

不过，导航具体功能根据页面情况，也会有些许差异。例如对于花瓣APP来说，其二级页顶部导航区包括返回上一页、点赞当前图片、分享当前图片和将图片收罗的功能。
对于肯德基APP来说，其二级页顶部导航区包括返回上一页和展示当前页内容的标题。

APP二级页的中间内容区根据产品的目标不同而不同，通常来说为相关内容详情页、子版块详细展示页等；例如下厨房APP为一道菜的详情页，知乎APP为一篇文章的详情页；京东APP为发现好货等子板块的内容聚合页，当然如果点击京东APP首页的某个具体商品，也会直接进入商品详情页。
在APP二级页中，底部标签栏为非必须。
在花瓣APP中，已经将一张图片的分享、收罗、点赞等功能加在了顶部导航区的右侧，因此底部标签栏直接采用了和一级页一致的标签栏；肯德基APP和京东APP直接取消了底部标签栏；微博APP将针对话题的转发、批评、点赞功能放在了底部标签栏上。

03 小步伐一级页主布局设计

从上图我们可以发现，小步伐一级页和APP一级页一致，主要包括顶部导航区、中间内容区和底部标签栏。
小步伐一级页中的中间内容区和底部标签栏的设计思路与APP大同小异，但其底部标签栏有时候未必有，例如肯德基APP；由于小步伐当初在微信推出来的时候，就是定义即用即走的，因此小步伐通常只承载简单的功能，帮助用户完成某一件事件，以是小步伐可以没有底部标签栏；而顶部导航区的设计收到相关平台（微信、付出宝、百度等）设计规范的束缚，必要遵照一些设计规则。
例如在微信中，微信都会在其右上角放置官方小步伐菜单（包括关闭和更多功能），设计者不可对其内容自定义，但可选择深浅两种根本配色以顺应页面设计风格，样式如图。

04 小步伐二级页主布局设计

从上图我们可以发现，小步伐二级页和APP二级页一致，主要包括顶部导航区和中间内容区，底部页签栏根据页面的实际情况选用。
上面说到微信会在小步伐一级页右上角放置官方小步伐菜单，那么在二级页里面也不例外；但二级页通常还会多一个返回上一级的按钮，样式如图。

05 APP和小步伐设计原则

通过对APP和小步伐一级页与二级页的分析，我们可以总结出如下通用的设计原则。

1. 导航：指引明确

一旦用户进入APP或小步伐，作为设计者的我们，就有义务明确地告知用户他们身在那边、可以去哪里，保证用户可以快速的在页面上穿梭；例如对于当前页，必要高亮表现；对于可以去哪里，在界面上要有清楚的提示。

2. 信息：层级清楚

移动端界面由上至下分别怎么呈现信息，必要非常清楚。
起首，大块面信息层级为顶部导航区、中间内容区和底部标签栏。
其次，在顶部导航区根据功能不同又从左到右切分为三部分：在中间内容区的信息根据信息告急层级也需举行切分；在底部标签栏的信息根据主次也要举行切分，如下表现图展示。
信息的层级清楚不仅加快了用户获取信息的速度，更加有利于用户做出合理的决议。

3. 界面：重点明确

从8个APP的图例中我们可以看出，每个页面都应该根据其本身必要传达给用户的核心目的来设计页面的重点要素，不应该让页面上出现与当前页核心目标不一致的信息，从而干扰到用户的决议。

06 APP和小步伐组件库

APP和小步伐都是移动端的应用，因此它们涉及到的通用组件根本是一致的，笔者为大家总结了一下，有如下几种：

按钮
开关
选择器
输入框
单选框
多选框
滑块
倒计时
表单
导航栏
标签栏
抽屉式导航
宫格式导航
字母索引导航
公告栏
上传
……

在本文就不一一列举了，笔者正在陆续整理这些通用组件，因此将在之后的文章中为大家详述组件的用法及给到大家相应的设计稿。

07 总结

如今，一款产品必要具备APP和小步伐两端已经成为刚需，如许才能满意用户的多样化诉求；因此，产品经理和设计师必要多了解移动端设计的要求和注意点，才能设计出一款好的移动端产品。
作者：知果；公众号：知果日记
本文由 @知果原创发布于人人都是产品经理，未经作者许可，克制转载。
题图来自Unsplash，基于CC0协议。

欢迎光临创意电子 (https://wxcydz.cc/)