app设计说明（APP设计说明）
今天给各位分享app设计说明的知识，其中也会对APP设计说明进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
本文目录一览：
- 1、策划007-App界面交互设计规范
- 2、App产品设计『核心模块』通用模块（一）
- 3、app设计思路怎么写范文
- 4、android app 详细设计文档怎么写
- 5、APP界面设计注意什么？
- 6、电商APP首页设计，终于有人讲明白了！
策划007-App界面交互设计规范
在上篇 《策划006-APP界面设计风格》 确定下来后，产品经理（兼交互设计）还不用着急将所有的交互稿扔给设计师进行细致的界面设计。在细节设计启动前，拉上设计师和安卓前端开发、ios前端开发一起商议确定设计规范先吧！
APP设计规范指对APP界面进行风格统一，对界面元素的样式、颜色和大小设定统一的规范和使用原则。与设计、前端约定好统一的设计规范很重要，约定设计规范可以减少产品、设计、前端的沟通成本；可以使界面设计整洁、统一，减少界面元素的重复设计；可以减少设计素材，控制安装包的大小。
APP设计规范主要包括对界面布局、背景色、字体颜色大小、界面元素间距、弹层、loading、图标、按钮常态点击态等进行统一的梳理和规范。
页面布局和交互规范上建议安卓、ios尽量统一，这样可以避免安卓和ios分别设计一套稿子。当然土豪公司可以忽略这个建议，安卓和ios分别做专门的设计当然更好。在中小型项目来看，设计资源紧张的话可以考虑安卓和ios用同一个稿子，分别做相应的微调后输出适用安卓和ios不同的尺寸要求就可以。
推荐使用mac矢量设计工具"sketch"。以ios平台的iPhone5的尺寸640*1136px作为标准尺寸设计。在界面设计完成后可以做相应的微调导出适用ios和安卓尺寸的稿子。这里可以首先统一设计稿输出规范：
安卓（720*1280px）：界面预览图、界面坐标图、标准界面的图标png文件
IOS（640*1136px）：界面预览图、界面坐标图、1-3倍图矢量图标pdf文件
PS：界面坐标图指在设计已定稿的界面预览图上标注：界面元素的间距、文字的颜色、文字的字号大小、图标的尺寸、按钮不同状态颜色、按钮的尺寸等等
标准色规范：重要、一般、弱。标准色重要：重要颜色中一般不超过3种，这里的例子重要颜色之一红色需要小面积使用,用于特别需要强调和突出的文字、按钮和icon；而黑色用于重要级文字信息比如标题、正文等。标准色一般：都是相近的颜色，而且要比重要颜色弱，普遍用于普通级信息、引导词比如提示性文案或者次要的文字信息。标准色较弱：普遍用于背景色和不需要显眼的边角信息。
文字是APP主要信息的表现，尤其新闻阅读、社区APP等制定标准的设计规范和良好的排版方式，用户使用APP也觉得毫无疲劳感，这一点很重要。标准字规范重要、一般、弱。这里主要规范标准字的大小，标准字要注意跟上文的标准色进行组合突出APP重要的信息和弱化次要的信息。标准字重要：大字号普遍用于大标题、top导航，较小字号用在分割模块的标题上。标准字一般：主要用在大多数文字，比如正文。标准字弱：普遍与标准色较弱组合用于辅助性文字如一些次要的文案说明。
APP界面要给人简洁整齐，条理清晰感，依靠的就是界面元素的排版和间距设计。这里间距设计还要注意考虑适配不同的屏幕分辨率。一般解决方案有据屏幕等比放大缩小间距，或者固定某些界面元素的间距，让其他空间留空拉伸。为了满足屏幕分辨率较大的设备，有时甚至需要改变APP界面的页面布局。
五、弹层规范
弹层规范要注意分别设计安卓和ios的弹层，比如ios大多操作弹层由底部弹出，而安卓直接显示操作再页面中央，这样的交互搞作应该遵循各自平台的设计要求。弹层需求根据不同的功用设计不同的样式。比如操作性弹层-右上角更多按钮触发；提示性弹层：弱提示性的应用系统的token飘字提示即可；需要强提示可以使用取消、确定的模块弹层；更强提示而且弹层需要承载一定操作的使用强引导弹层，右上角提供关闭操作或者可以点击非弹层区域关闭弹层。
页面loading动画是APP界面必不可少的元素，增加loading可以给用户明确的反馈功能正在加载，减少用户在等待功能响应引起的烦躁感。另外loading动画除了常规的菊花还可以考虑使用npc，让APP更生动、活泼；或者使用logo口号加强APP的品牌形象。
图标规范要注意安卓和ios平台需求不同的大小和不同的文件格式：如安卓需要720*1280px标准页面的png图标格式；ios需要3个尺寸320*（1-3）倍图的图标pdf文件。图标还应该根据不同的功能需求设计不同的状态：如常态、选中态、点击态等。
按钮规范按状态分有：常态、点击态、不可点击态。按钮规范因不同功能和场景需要，设计不同的样式和颜色，在尺寸上也分有：长、中、短；而且按不同手机平台长中短尺寸也注意有所不同。
页面加载失败、页面为空可以统一规范为NPC、文案、按钮。要注意根据不同的场景显示不同的NPC和文案。
......
...
设计规范主要由设计童鞋来梳理，但必须要与前端开发、产品经理达成共识，严格遵守约定的规范，否则这个设计规范就毫无意义了。在制定设计规范过程中，产品经理要积极主动充当桥梁角色组织设计师、前端开发一起制定设计规范，保证设计规范考虑的更切合实际、更全面、更完整。
App产品设计『核心模块』通用模块（一）
这是《App产品设计指南》系列文章的 第7篇 内容，更多精彩可以点击下方链接查看。
《App产品设计指南》专栏目录
经过前面几篇内容预热，相信大家已经对App产品的设计理念，研发流程有了一定的认知。接下来我们来正式切入正题，一起来学习关于App产品设计的具体知识点。需要说明的是，后续的文章为了让大家更直观地理解，语言上会比较直白。文章之外的很多细节，比如说B站的情感化设计，微信克制的初心，这些都需要大家主动思考和发散才能深刻的理解。
在本文中我会重点介绍一下App产品的通用模块。在产品初期一定要设计好产品的通用模块，这些模块会伴随着产品的一生。如果没有设计好，后续迭代多半会踩坑填坑。我目前在用的机器是小米9，所以后面会出现较多的安卓系统的案例。
经常会在App中看到转圈加载的交互，这个就属于全局加载。在数据没有获取到之前显示加载中的特效；数据请求后再渲染页面，这样的交互能让用户不至于焦虑。下面介绍几种常见的设计：
（1）App页面中显示loading图标，增加文案引导。由于一般是圆圈加载，速成菊花图。
（2）App页面中显示由矩形、圆形等图案组合的轮廓效果。这种效果有一个学名叫做骨架屏。
需要说明的是骨架屏最好根据页面内容来显示轮廓效果，如果使用相同的设计效果就会不太理想。
（3）webview页面中在页面顶部显示进度条，表示对应的加载进度。
全局加载需要设置一个数据请求上限，比如说10S。如果达到上限还没有请求到数据，就要显示对应的失败提示，下文中会提到这种场景。
在列表页面中经常会出现没有数据的情况，我们要明确的告诉这是什么，为什么出现，用户要做什么。在实际情况中，上面3种处理会组合出现。
不同页面的内容都不一样，所以空白页最好能根据页面的内容来进行设计
用户进入新页面时，本地判断网络情况。如果网络异常则显示该状态，一般都会增加“重新加载”“点击刷新”“查看网络设置”这种操作提示。
类似微信钉钉等使用长连接机制的App，如果网络中断，页面顶部会显示网络异常提示。
网络异常属于可以实时判断的情况，进入页面时就能立刻判断。
这种情况一般发生在服务器出问题的时候，相当于网页上的404状态。比如说连接人数特别多，或者服务器宕机，此时就会触发该状态。
上面说的错误提示需要客户端请求数据一段时间（比如说10S）之后才会触发。一般包括整个页面出错，部分内容出错两种场景。前者需要有对应的页面设计，后者一般使用toast这种轻度的设计。
上拉加载
如果数据量比较少，可以一次性加载完；而数据量较多时，就需要分页加载。比如先加载20条数据，然后再继续加载。
（1）触发上拉加载分为2种情况，一种是用户看完当前页向上滑动时再加载数据；另外一种是预加载，即用户还在浏览当前数据，程序在后台自动加载数据。比如抖音App，你在浏览视频时，系统会自动加载后面几个视频。
（2）数据全局加载完，显示触底提示，文案如“没有更多数据了”“我可是有底线的”。
（3）如果上拉加载数据失败，在底部显示加载失败并显示“重试”按钮。这种场景也可以不予考虑。
下拉刷新
用户在页面顶端主动进行下拉操作，当前页面数据进行刷新。如果有其他页面的数据或者配置发生变化，也可以同步更新。下拉刷新一般分为以下4个步骤：
（1）用户向下拉动时提示用户在进行刷新操作；
（2）用户下拉是有区域范围的，一般在屏幕的1/3处左右。当下拉达到这个区域时，提示用户此时松开可以刷新数据。
（3）显示刷新中的交互效果；
（4）提示用户刷新成功，可以把刷新成功的数字显示出来。如果挤在失败则toast刷新失败。
在写作过程中，如果有意见或者想法，欢迎有兴趣的读者添加我的微信一起交流探索，共同进步。
app设计思路怎么写范文
一、明确APP的发展战略
要做一款app，首先要明确几个问题：
1.app的用户是谁?
2.用户使用app能够获得什么?
3.公司推出app是为了获得什么?
以上问题，这里不做回答，只是一个粗狂的问题，对于APP的设计并无实际指导意义，只是暂且明确了一个产品的方向。
二、产品的核心功能有哪些?
不同的产品其核心功能大相径庭，这里以电商APP为例，从前端和后台两个方面具体说明电商APP的核心功能需求有哪些?
用户端APP(Android、ios版本)，这里只是主要功能，在主要功能的基础之上可以增加一些完善体验的东西。
主要功能：浏览商品(列表页、详细页)、分类查看商品、加入收藏、加入购物车、直接购买、提交订单、支付订单、支付，订单列表页、订单详情页，订单可进行 的操作(取消、支付、确认收货、评价、申请退换货、删除)查看商品物流信息，还有个人信息(昵称、头像、收货信息、订单、余额、积分等等)，以及关于 APP端的版本查看，意见反馈，清除缓存，关于我们，用户注册、登陆和用书使用协议等。
APP需要的后台系统搭建，根据不同的电商模式，其后台架构也不同，垂直电商和电商平台有很大的差别，主要看商家端是全部自己来进行管理还是开发加盟的方 式，如淘宝的后台架构和唯品会的后台架构就是两种不同的后台架构。主要架构：账户架构(用户、商家、运营、财务、仓储物流)，功能架构，用户的前端展示的 功能需要后台给出相应字段，数据接口。商家端需要发布商品、接单、操作发货、填写物流信息，处理退换货，这些信息同步到用户前端，用户可以随时查看订单的 状态。需要给运营相应的操作权限，商品的排序，BANNER广告，专题页链接，在后台的上传方式和前端的展示位置等等，还有数据分析，不同的商品的销售统 计，订单发生的时间、地点、用户数据等参数进行统计，财务进行相关订单的财务结算，按照商家、用户、订单进行结算，如果能够把控整个数据库安全的情况下也 可以自动结算，仓储物流信息的上传和同步，如果是1小时送这种O2O模式，还要有配送人员的接单、取货等数据同步。
三、详细进行竞品分析
确定了以上的核心功能和需要打磨的细节之外，接下来就是进行细致的竞品分析，这里仍然以电商为例进行竞品分析，竞品分析的工作如何开展呢，这里叙述一下自己的观点。
找到直接或者间接的竞品，大概找5款app左右，下载安卓和IOS端分别使用，使用脑图软件列出核心功能和提高体验的功能，使用axure等原型工具对其产品截图进行纵向和横向分析，包括UI风格、色彩和图标、文字、按钮的颜色、大小、位置等等。
从网上调研相关数据分析竞品为什么这样设计，这样设计的好与不好的地方分别说明;
根据以上数据列出表格，进行筛选，提炼精华部分，去除糟粕部分，给自己的产品设计提供必要的参考。
提出自己的产品差异化功能和特色，电商产品必须结合运营部门进行品类的分析，货源、价格、物流服务等进行分析，单个从APP产品进行优化体验，就算做出花来也没用，因为用户需要的不是产品，而是商品。
从前端展示分析出来其后台架构和相关功能的布局，这个需要观察细节，注重思维能力。比如，你去操作一个款产品，购买数量填写10万个，看下是否有提示库存不足就知道其后台有没有对库存进行把控。
四、真正地开始制作APP开发需求文档
app开发需求文档的标准写法：
1.app开发目的，阐明开发本软件的目的；
2.代开发的app名称
3.参考资料（可有可无）列举app开发需求规格说明时所参考的资料，包括项目经核准的计划任务书、合同、引用的标准和规范、项目开发计划、需求规格说明、使用实例文档，以及相关产品的软件需求规格说明。 在这里应该给出详细的信息，包括标题、作者、版本号、发表日期、出版单位或资料来源。
4.app开发的功能需求。
5.app的运行环境，包括硬件平台、硬件要求、操作系统和版本，以及其他的软件或与其共存的应用程序等。
6.条件与限制，给出影响开发人员在设计app时的约束条款，例如：必须使用或避免使用的特定技术、工具、编程语言和数据库。
7.app功能划分，列举出所开发的软件能实现的全部功能，可采用文字、图表或数学公式等多种方法进行描述。
8.功能描述，对各个功能进行详细的描述。
9.外部接口需求。
10.用户界面，对用户希望该软件所具有的界面特征进行描述。
11.性能需求，包括数据精确度、响应时间、数据转换与传输时间、运行时间等。
12.其他需求，如果不需要增加其他需求，可省略这一部分。
五、交付设计和文案
确定好以上的需求之后，面对设计和研发的需求文档已经告一段落，接下来就要在UI做设计、交互设计师做交互的时候，找相关部门人员完善文案需求，和项目经理一起对工作进行细分，确认时间节点，最后由交互设计师输出一套高保证原型。
六、交付研发
这样子做出来的高保证原型，在各个细节都已经做到了完善，设计、交互、研发、运营等等对工作也已经胸有成竹，那么大家就可以坐下来好好开个简短的会议，确认每个人的具体工作，给出相应的时间节点，然后随时跟进开发需求就可以了。
android app 详细设计文档怎么写
数字内容的存储，分发和***服务。用户为资源社区的注册用户。
1.1. 编写目的
本文档的目的，旨在规范软件开发，推动项目有序正常的进行，使相关人员遵守统一的规范。节省制作相关文档的时间，降低系统实现的风险，加快项目实施进度，做到系统设计的规范性和全面性，以利于系统的设计、实现、测试、维护和版本升级。
1.2. 项目范围
本文档用于软件设计阶段的概要设计，它的上游（依据的基线）是项目需求分析书，它的下游是项目详细设计说明书，并为详细设计说明书提供测试的依据。
软件概要设计的范围是：客户端软件系统总体结构、外部接口、主要部件功能分配、全局数据结构以及部件之间的接口等方面的内容。
2. 软件概述
2.1. 爱私货概括
本文档用于软件设计阶段的概要设计，它的上游（依据的基线）是项目需求分析书，它的下游是项目详细设计说明书，并为详细设计说明书提供测试的依据。
2.2. APP功能
本文档用于软件设计阶段的概要设计，它的上游（依据的基线）是项目需求分析书，它的下游是项目详细设计说明书，并为详细设计说明书提供测试的依据。
APP界面设计注意什么？
APP界面设计应从图片、文字、色彩、图标、留白这些方面注意着手于设计。
1、图片，如同一个人的衣着品味
图片在APP中是非常常见的，图片的展现形式和图片的质量都影响着用户对产品的感官体验。
图片的定位就如同一个人的衣着品味，不同的穿衣风格会使别人对你作出不同的判断，为你打上不同社会属性的标签。
下面我们一起来看看图片在APP设计中需要注意的关键点，将会从图片比例、一致性、图片质量与真实性等方面进行分析。
1.1、图片比例有什么讲究？
不同比例的图片所传达的信息主体不尽相同，根据产品属性我们会选择与之相符的图片比例进行整体的框架布局。
通过体验一些主流的APP，我们会发现一些比较常用的图片比例，如 1:1、4:3、16:9、16:10等等；
也会发现一些打破常规比例的设计，我们需要分析它们的性格，结合自身产品的特点，才能在自己的APP设计中合理的加以运用。
1:1 强调主体的存在感
1:1的图片比例是比较常见的一种设计比例，利用此长宽比更容易将构图归整得简单，突出主体的存在感。
常用于产品展示、头像、特写展示等场景，在电商类APP中尤为常见。
4:3 图像紧凑、更易构图
4:3的图片比例可以使图像更紧凑，更易构图，方便设计师发挥。由于手机屏幕容量较小，作为全屏展示时，该比例在App设计布局上面占用空间较大。
16:9 电影场景般的效果
16:9的图片比例可以呈现电影场景般的效果，多用于横向构图，是应用非常广泛的尺寸比例之一，能给用户一种视野开阔的体验。
在很多影视***类APP设计中运用广泛，如腾讯视频、网易云音乐等。
16:10 拥抱黄金比例
黄金比例就像金字塔上的明珠，越接近她越有魅力，反之会魅力减弱，16:10的图片比例最为接近。
设计没有绝对的标准，我们可以遵循一些优秀的经验规则，但是也要敢于突破规则，尝试更多的可能性。
X:≤Y 瀑布流设计
X:≤Y代表宽度固定，高度在最大值之间自定义的瀑布流设计，在一些用于用户没有很明确的目的，只是喜欢获取尽量多的信息的情况下采用这种设计方式。
X:≤Y的图片比例要注意高度的控制，不要超出屏幕可显示区域的范围，如花瓣网在750x1334px的设计中高度最大值为：848 px。
以上列举的仅为部分常用比例的分析与说明，还有更多的比例这里就不一一演示，分享的目的是让大家养成分析的习惯，结合自身产品特点选择适合的图片比例。
图片比例选择方式：
a. 以商品展示效果为准，选择能够充分表现商品特点的图片展示比例；
b. 以产品气质为准，选择符合产品内容气质的图片展示比例；
c. 结合产品特点选择合适的常用比例；
d. 根据版面布局灵活的自定义特殊的比例值；
e. 分析→打破→创新，创造出符合某种规律或者美学概念的比例值。
1.2、图片比例的一致性
当我们结合产品特点确定合适的图片展示比例以后，需要针对整体的布局与图片分布情况，规范出那些布局可以采用相同的图片展示比例。
在保障视觉效果与交互形式的情况下，相同的主体，在不同的页面中最好采用相同的比例呈现，这样的好处不仅可以保持视觉表达的一致性，也能给后期运营维护带来便利。
1.3、提高图片的质量
越来越多的产品对图片质量开始加以重视，比如网易严选对产品图片的拍摄与处理都有严格的规范，目的就是为了提升产品气质和在用户心中的印象。
我们在设计的时候更要以最佳的图片来烘托我们的设计稿，图片的质量影响着整个界面的格调。
很多伙伴儿会觉得图片都是后期运营上传的，我设计稿做得再精美最终也是没用的。对于这个问题我的观点是这样的：
a. 最佳的设计输出是设计师专业的体现；
b. 把最好的效果呈现给决策者，增加他对你设计能力的印象；
c. 通过制定运营视觉规范来把控图片质量，是可以严格把控你对图片的视觉追求；
d. 你的态度会给你带来好运。
1.4、图片的真实还原
虽然前面提到图片质量的重要性，但是我们不能为了视觉效果选择一些与主题无关的配图，这样也会给决策者一种误导。
我们可以提高配图的质量，但是需要保证图片的真实还原，这样才能让你的设计作品更加真实合理。
在一些本土的产品设计中，对于国外图片素材的运用，需要谨慎对待。如案例中的模特形象，文案信息的传达更加偏向于国内的场景，
如果运用一张国外的模特素材也许逼格更高，可是却无法真实的还原产品场景，会给决策者传达一种错误的认知。
2、文字，我只想知道重点在那里
文字设计的层次感决定了信息的高效传达，通过对文字信息的层次处理可以有效的帮助用户获取信息，提高用户对产品的操作效率。
2.1、对文字信息进行层级区分
当我们拿到交互原型或者别的需求文档时，我们需要对文字的信息层级进行有效的区分，这样才能让用户快速的获取和理解信息传达的内容。
文字信息可以简单划分为重要信息、次要信息、辅助信息等。在进行文字排版时，需要明确的梳理好信息之间的层级关系，提高用户对产品的整体体验。
通过对字体大小、颜色、留白、层级划分等处理，把相同属性的信息归类设计，让整个信息排列主次分明，层级清晰。
设计师在对文字进行视觉表现时，为了达到整体界面的视觉平衡也需要减少对文字样式的运用，不可为了突出文字信息而采用过多的表现样式。
2.2、预估好信息呈现的最大值
当我们在进行界面设计时，初级设计师往往会忽略文字信息的最大值，只是按照自己的习惯进行完美的布局。
最终进入到测试环节时才发现为什么比自己预期的字数多出这么多信息，此时就会出现返工的情况，给整体的产品开发进度带来风险。
作为一名合格的UI设计师，我们需要预估好信息呈现的最大值，而不是取最小值或者随意进行设计，这样将会在执行的过程中遇到更多不可控的风险。
2.3、善于利用提示符进行设计
在一些会出现大篇幅文字信息的界面设计中，为了提高用户对信息的获取效率，我们会根据整体视觉效果选择合适的提示符进行设计。
很多初级设计师会过于遵循交互原型，往往对大篇幅文字的处理过于随意，只做着交互原型的美化，缺乏对用户体验的主动性。
在进行产品交互设计时，有时候产品或者交互无法站在视觉的角度进行信息的梳理和布局，我们需要利用自己的专业来优化你觉得可以更好的地方，也能为你在整个产品环节中树立专业性。
关于提示符的设计表现形式主要有数字、字母、图形、色块等等，只要能有效的区分信息层级即可。
3、色彩，如何成为“色”计师
色彩给人的感受是最直观的，不同性格的配色传达不同的情感。关于配色有一些方法可寻，但是也存在一定的感性判断。
作为视觉设计师，我们需要学习理性的方法技巧，也要不断欣赏优秀的作品，提高自身的审美能力。
3.1、色彩基础知识
色彩分为无彩色系和有彩色系，无彩色系是指白色、黑色、各种深浅不同的灰色；有彩色系是指红、橙、黄、绿、青、蓝、紫等颜色。
关于色彩的更多理论知识这里不做展开，大家自行脑补色相、纯度、明度、对比、性格等等方面的理论知识。
3.2、建立色彩库
作为初级设计师我们对配色的把控不是很稳定，为了提高工作效率，我们需要通过一些理性的方式建立大量的色彩库，应对不同的需求。
下面列举部分个人比较常用的方式供大家参考，色彩收集的方法有很多，我们只需要掌握几个比较适合自己的即可，只要养成习惯并长期坚持，哪怕只运用一种方式，也是收获颇丰的。
a. 通过各类APP采集色彩
体验不同领域的APP，建立不同领域对APP色彩组合的选择，为后期项目设计奠定基础。根据主色进行分类，
如红色系列：网易云音乐、京东、网易严选、网易考拉等等；也可以根据产品气质分类，如文艺、时尚、科技、可爱等等。
b. 通过Dribbble采集色彩
在Dribbble上面，每一幅作品右侧都有该作品的配色文件，发现优秀的作品要养成这种采集配色文件的习惯。
c. 通过摄影作品采集色彩
通过优秀的摄影作品采集色彩也是常用的方法之一。
采集方式：
Photoshop打开图片 → 存储为Web所用格式→ 选择GIF格式 → 颜色选择 8 → 颜色表中双击色块 → 拾色器
d. 通过马赛克采集色彩
借助Photoshop滤镜将图片进行马赛克处理，可以得到优秀作品或者摄影图片的配色组合，特别适合采集同色系的配色。
采集方式：
Photoshop打开图片 → 滤镜 → 像素化→ 马赛克 → 设置单元格大小
e. 从电影中采集色彩
相信大家都喜欢看大片，这部片子之所以能得到大家的追捧，必定有太多值得大家学习的元素。
作为神经敏感的设计师群体，那些刺激到我们神经元的优秀影片场景总是不能错过的。
3.3、提高审美，增强感性判断力
配色能力虽然可以通过一些理性的方法提高，但是也存在一定的感性判断。配色中细微的差异往往都是感性的判断。
我们需要不断的欣赏摄影、绘画、设计作品等等，综合的提高自身的审美，才能不断增强感性的判断力。
作为UI设计师，你不能只关注界面设计，你可以看平面作品、摄影绘画、影视动效，体验手工艺制作、运动***、细心的体验生活中的每一次变化。
3.4、养成分析的习惯
要想拥有良好的配色能力，积累的过程是很重要的。当我们看到优秀的作品，要分析配色之间的对比关系、颜色在色环上的位置关系、HSB数值的关系等等。
只有不断的分析和总结才能逐步形式自己的思维方式，提高不同配色的把控能力。
分析的习惯不只是运用在色彩上面，对于版面布局、文字信息的处理、icon设计风格、间距留白等等方面都需要不断的进行分析总结，掌握优秀作品的规则才能形成自我的标准习惯。
4、图标，从会画到画好之间有多远
图标是APP设计中的点睛之笔，既能辅助文字信息的传达，也能作为信息载体被高效的识别。图标也有一定的界面装饰作用，提高界面整体的美观度。
很多初级设计师都会忽略图标的重要性，也养成去素材网站下载复用的习惯，当这样的习惯养成后便会逐步丧失自己动手的驱动力，什么元素都希望能找到素材下载，工作数年之后很快就遇到了自己的瓶颈期。
设计师对图标设计的态度与把控能力，将会是拉开你与其他设计师差距的因素之一。
图标设计有下载复用 → 动手设计 → 规范设计 → 融入品牌基因等几个阶段，你现在属于哪个阶段呢？
4.1、下载复用
下载复用是很多初入行业的设计师习惯的工作方式之一，由于自身对软件技法、设计技巧、创意能力等方面的不足，无法从创意到标准制图完成一个合格的图标设计。
缺点：图标设计风格与细节处理都完全不统一，这样的习惯一旦养成就会逐步丧失自己的动手能力。
4.2、动手设计
对于大部分有设计追求的设计师，都会意识到图标设计的重要性，也会结合产品特点绘制统一风格的图标。
注意事项：图标设计风格有：线性图标、填充图标、面型图标、扁平图标、手绘风格图标和拟物图标等。
无论我们选择何种表现形式，在进行设计的时候都要保持风格的统一性，由于图标的体量不同，相同尺寸下不同体量的图标视觉平衡不尽相同，例如相同尺寸的正方形会比圆形显大。
因此，我们需要根据图标的体量对其大小做出相应的调整。
4.3、规范设计
当设计师养成自己动手的习惯以后，恭喜你已经进步了，保持这样的习惯。随着软件技法的成熟我们需要严格控制自己的随性，运用标准的规范进行图标设计。
在标准设计的基础上面我们可以发挥自己的创意，也不一定要局限在标准里面，但是总体的本质需要符合设计规范。
4.4、融入品牌基因
图标设计的差异化逐渐变得模糊，随着很多功能的相似性，图标的造型设计也几乎雷同，很多对设计比较讲究的产品，也开始根据自身品牌基因，进行图标定制化。
融入品牌基因的图标设计具有很强的品牌识别性，不仅可以形成独有的视觉差异化，也可以增强用户对产品的记忆。
5、留白，我只想要足够的空间
适当的留白可以让你的界面更有灵性，给信息之间预留更多的空间，也能更好的表达信息之间的层次感，相比拥挤的信息布局更能给人舒适的体验。
当设计师的留白意愿被产品或运营以“希望放更多内容”拒绝时，作为设计师我们可以从不同的方向试着表达自己的观点：
a. 设计出对比稿，把产品需要的方案和你觉得完美的方案进行对比；
b. 筛选出这样处理的优秀案例，以成功的案例说服产品接受你的方案；
c. 进行用户测试，选择一些目标用户进行体验，从用户心声入手设计最佳的方案；
d. 更多沟通的方法有待你去挖掘，最终的目的都是希望做出更好的产品。
设计小结
1. 不同的图片比例反应不同的特征，根据产品特点合理的选择；
2. 设计中保持相同的图片比例，不仅使视觉表达一致，也能给后期运营维护带来便利；
3. 通过提高图片的质量来提高设计作品的美感度，但是也要保证图片的真实还原；
4. 文字排版需要注意信息的层次、信息容量的最大值、巧妙的运用提示符等；
5. 养成不断建立和丰富色彩库的习惯；
6. 提高审美，增强感性判断力，养成分析的习惯；
7. 图标设计经历的几个环节：下载复用 → 动手设计 → 规范设计 → 融入品牌基因；
8. 适当的留白可以给人更加舒适的体验。
电商APP首页设计，终于有人讲明白了！
移动端产品设计的难点在于在很小的屏幕上展示所有的业务。屏幕限制和移动端的客户碎片化阅读的习惯和高流失率。对于业务复杂的App产品设计难度更高。电商产品就是典型的复杂业务产品之一，是要展示内容最多、最难做的一类App。
电商APP首页设计结构
电子商务网站的首页是网站的形象页面，一个网站能否吸引浏览者留在该站中漫游，全凭首页设计效果的好坏。所以，首页设计对于任何网站都是至关重要的。
首页从根本上说，就是全站内容的目录，也是一个索引。一般的电商app都有页头、页中和页尾这3 个设计区：
l 页头： 包括网站名称、搜索组件、焦点广告、导航等版块。
页头首先要体现网站主题。用企业名称、标语、徽号或图像概括地反映企业形象、经营理念和服务定位。搜索、导航提供了对关键页面的浏览链接，通过图标和文字表明产品其他页面载有的主要信息；用户能够在最短时间、最便捷的操作迅速地到达他们所需信息的其他页面中。
l 页中： 包括公告、最新活动、个性化产品推荐、友情链接等版块。
在首页上公告信息，到达率非常高。同时，产品中在进行的各种活动信息，也是吸引用户停留并购买的重要手段。随着互联网产品设逐步创新，数字化，原来千人一面的首页分类产品列表由简单罗列，变成了根据用户喜好和行为习惯进行个性化的商品推荐，产品变得更了解用户也更能触发用户购买行业发生了。
l 页尾： 包括版权、联络方式、计数器等版块。
版权的常见做法是在首页底部标示简短的声明，再用链接附带一个有详细使用条款的说明页面，既避免首页的杂乱又把重要内容说清楚了。页面底部的联系方式，方便用户与产品相关人员取得联系，让产品所属企业获得用户反馈。
页尾的内容在web端界面设计中是不可缺少的区域，但在移动端首页基本都被移到了”设置”中进行展示，这是由于移动端界面空间实在太少，而且移动端多以手式向上不断滑动查看新内容，造成页尾信息如果放在页面尾端查看十分不方便。
首页设计组件介绍
一、搜索栏
大多数用户发生购买行为有明确的目的性。我知道我想要买什么，所以我需要快速的搜到商品。因此App把最显眼的位置留给搜索栏。
一个完整的搜索组件设计应该由三个阶段组成：
1.找到搜索框
2.录入关键词
3.搜索结果展示
搜索框的设计需要注意：
电商App的搜索框通常放在界面的最上面，明显、惹眼，用户可以直接进入信息录入阶段。
电商App的首页搜索框，即使用户需要查找的内容属于不同类别，在设计上也最好给用户最简单的全站内容搜索组件。
搜索框的设计风格应该和整体产品风格保持一致
信息录入的设计需要注意：
提供多种信息录入方式，最常见的文字录入当然还是主流，除此之外最好可以提供语音、图片录入搜索等方式。
除了多样录入方式，还应配套提供信息录入提醒设计，如：用户历史搜索记录、搜索关键词热榜、录入关键词时联想响应
搜索结果的设计需要注意：
搜索结果设计重点在于展示不同类型和级别的内容。例如在淘宝搜索账单，结果包括账单相关信息，店铺和资讯等，不同独立应用加图标展示。不同内容类别以tab切换的形式展示。
搜索结果过多，可以加检索组件帮助用户在搜索结果中进行二次查找，减少花时间翻页或滑动查询。另外搜索结果为零的时的空页面，给用户设计合适的说明界面。
二、导航
电商App中，必不可少的两个导航：
l产品主导航
l商品分类导航
产品主导航
电商App中的主导航设计为用户提供了跳转相对独立的信息内容的路径。例如：
淘宝的主导航项：淘首页、逛逛、消息、购物车、我的淘宝
京东的主导航项：首页、分类、发现、购物车、我的
发现、消息、购物车、我的这些内容之间没有很强的关联，但又是用户在电商平台购物过程中必不可少要查看的信息。
京东、淘宝主导航
同时，从“商品买卖”的业务角度来看，有几个重要的业务信息，无论做任何电商产品，都应该让用户可以快速、方便的查找到是毋庸置疑的。它们是：
1.用户的购物车---购物车模块
2.用户在产品的中的个人信息---我的模块
3.用户买卖过程中的交流信息---消息模块
这些重要的业务信息，多数都放在了电商App的主导航中，即使没有放在主导航，也一定能够在首页的副导航中看到。
商品分类导航
不同类型的电商平台，商品分类导航有一些区别。
如下图中淘宝、京东平台，这两个平台是成熟的综合电商平台，在平台中不但有各类第三方商品销售，而且平台也有自营的品牌和独立应用在平台内销售，如淘宝的天猫商城、饿了么、天猫超市；京东的京东超市、就东到家等。
因此，商品分类导航中的商品分类覆盖十分广泛，尤其商品分类导航的C位往往加入了平台自营的品牌和应用。
垂直类的电商App，商品分类导航中的内容覆盖面窄很多，以商品类型分类引导用户查找商品的特点更明显示。
例如下图中唯品会的商品分类导航，因为唯品会的产品定位在折扣女士用品，所以导航中的分类都集中在服装、鞋帽、箱包等商品类别。
另外，在设计上不像主导航设计需要控制导航项数量，商品分类导航中的分类项数量往往大于5个，因此使用双排、可左右滑动的拖拽导航几乎成为最常见的商品分类导航样式。
三、活动
电商产品中的活动类型很多，最常见的有16种：
1. 打折
2. 秒杀
3. 免单
4. 满减
5. 满送
6. 满返
7. 买送/捆绑
8. 搭售
9. 包邮
10. 好评晒图
11. 试用
12. 抽奖
13. 积分/会员
14. 团购
15. 预售
16. 众筹
在电商App首页，见到最多的是前两种活动：打折、秒杀。而且，首页的活动往往都带有极强的时效性表示，例如在规定的时间才可以享受更加优惠的商品价格。
因此，活动在首页上的设计要向用户传达三个要素，即用户最关心的：
什么时间有活动
有什么活动商品
活动的价格有多优惠。
如下图的“京东秒杀”的设计就非常完整的呈现了这3个要素。当然，并不是所有的活动表达都一定要遵循这一规律，淘抢购的设计就打破了3要素传达的规则，隐去了商品促销价格。
京东秒杀与淘抢购
四、商品推荐
个性化的商品推荐现在在电商App设计中己经十分成熟，推存商业最先被用户接触到的地方就是首页。
用户在电商App或有意、或无意浏览的商品，都会被产品记录下来。再由商品推荐模块根据你最近的浏览记录，推荐一些相关的商品、分享或者店铺。由于每个人关注的商品都不一样。所以产品对于每个人呈现的界面内容也都是不一样的。
例如下图，淘宝通过性别判断，如果产品发现你是男性用户，默认推荐“男神范”；如果判断你是女性用户，则默认推荐“爱逛街”。
淘宝内容推荐
不仅仅如此，用来展示电商平台每个细分商品品类推荐商品的区域，也都引入了个性化商品推荐的设计。
在使用全品类商品展示+优惠价格来打动用户进行消费的同时，现在的电商App往往会再融合情感因素、参考用户的特点、喜好展示各品类中最可能吸引用户的商品，促使用户在产品中“逛街、购物”。
例如京东精选中集合了全品类的商品推荐，以用户行为进行时实的个性化推荐。
案例：主流电商App首页分析
一、淘宝
首页内容：
1.搜索，淘宝把搜索二级页面关键词直接展示在一级搜索位置下方，相当于关键词搜索功能层级上升；
2.banner；
3.8个平台型导航，主要是从淘宝诞生，已经可以独立运营的产品；
4.活动广告位，占据banner大小的位置，平台活动快捷入口；
5.淘宝头条，根据分类滚动推荐产品的文章；
6.二级购物功能区，展示各个频道，如天天特卖，每日好店。
7.商品列表，安卓和苹果展示不一样。安卓每个版块半屏往下铺开。苹果是上方做了分类导航，下方列表。
二、京东
首页内容：
1.搜索；
2.8个banner；
3.活动广告位；
4.平台型功能区，有部分是独立的应用如京东生鲜，还有部分是京东的商品类别频道；
5.京东快报；
6.二级购物频道，放了些主推的购物板块；
7.活动板块，铺开了活动的每个类别；
8.频道推荐，把频道纳入到10个标签里，每个频道都有超过5个二级标签。
三、苏宁易购
首页内容：
1.搜索；
2.8个banner；
3.活动广告位；
4.平台型功能区，这一块主要是频道和分类，分类有16个。
5.苏宁头条；
6.二级购物频道；
7.活动板块，展开了活动的每个类别；
8.频道推荐，展示很多二级频道，分的特别细。
四、小米有品
首页内容：
1.搜索；
2.活动板块，动画展示活动的交互很新颖；
3.平台型功能区， 5个功能频道，销售榜单作为一个推荐功能很实用；
4.banner，共5张；
5.活动板块推荐，分了各活动分类的专场；
6.特色频道推荐，含榜单（把榜单部分商品展示出来）、限时购、年货节热卖、小米众筹、有货集市、品味生活，和功能区呼应，以商品展示为主；
7.类别频道推荐，每个展示一屏，以商品展示为主。
五、网易严选（自营平台）
首页内容：
1.搜索和导航；
2.Banner；严选没有功能区，直接开始推荐商品或者频道。
3.推荐标签的商品，焦点位给了个性化推荐，非常重视更精准得来个性化推荐；
4.VIP会员的服务特权，网易重点突出了这一块；
5.二级功能频道，只放了三个频道；
6.猜你喜欢。
六、网易考拉（垂直综合平台）
首页内容：
1.搜索；
2.banner；
3.品类场馆，像商场的楼层一样，逻辑清晰；
4.活动板块；
5.特色频道推荐，标签下面细分了很多相关的功能频道；
6.用户专享；
7.精选活动，以每个板块商品列表来展示；
8.个性化推荐，以三个角度列表展示。第一个角度是个性化商品，第二个角度度是商品推荐清单类文章；第三个角度是品质商品推荐。
七、拼多多（综合平台）
首页内容：
1.Banner；
2.功能区，所有的平台频道和分类功能都在这里面了，有16个，偏重社交分享，如拼团；
3.活动板块推荐；
4.商品列表展示，分商品和店铺两个角度推荐商品，穿插了一排品牌馆推荐。
关于app设计说明和APP设计说明的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
