UI设计师必须掌握的app上线相关知识
慧聚邻app从一无所有到申请上线过程中所有第三方分享物料设计
学习、实践并一步步分享app上线相关知识
总结共享避免踩坑
刚入行的设计师可能都踩过很多坑，面试也曾经会经常被问设计上线的app有几个，一个app从设计到上线，有很多相关知识，百度一下资料杂而且说法众多，无从下手。今天就从我设计慧聚邻app到申请上线的过程开始谈一谈，为保证app顺利上线应该注意哪些细节，要设计哪些物料。
本文大纲：
1.慧聚邻logo设计
2.慧聚邻启动页
3.应用商店所需图标以及宣传截图
4.App Store所需图标以及宣传截图
5.第三方登录所需图标以及宣传截图
1.慧聚邻logo设计
慧聚邻是以智慧物业服务为基础，汇聚邻里社交，智能门禁、周边头条、跳蚤市场、商圈活动等生活服务，让数据为民众跑腿办事，一个APP畅享智慧社区所有服务！
慧聚邻详细功能点：
智慧物业服务：为居民提供移动在线物业服务的窗口，让物业的报修、投诉等物业服务项目扩展到居民的手机上，提供更便捷、更人性化的服务方式，同时也为居民和物业更好的交流和沟通提供一条新的渠道。
手机门禁：为居民覆盖安装智能门禁，提供更安全、更符合住户习惯的开门方式。
社区资讯：全面承载社区百科、物业通知、本地论坛、便民信息等功能，让居民足不出户了解身边大事小情！
社区百科：旨在创造一个涵盖社区生活信息、便民服务、家庭维修等应用尽有的互动词条，信息采集一方面是由邻聚APP核实呈现，另一方面倡导社区居民同创共建，将身边的项目分享给周边邻居。
本地论坛：贯穿吃穿住用行各个方面，精准发布社区资讯、新闻、八卦、二手火、交友相亲等信息，满足社区居民日常讯息需求。
达人问答：通过问答形式，连接各行各业的社区精英，分享彼此的专业知识，经验和见解。搭建普通用户和专业达人之间的交流通道。
根据app这些功能与愿景，我总结提炼并设计了两款logo方案：
慧聚邻logo提案一：图标由抽象房屋连在一起符合行业属性，象征比邻而居！
图标整体是手托着房屋，同时形成一颗心形状，代表了慧聚邻app用心服务的特性。
图标中间是消息窗口，寓意着邻居聚在一起无障碍的交流。
慧聚邻logo提案二：图标整体由房屋形状无缝连接来抽象表示邻居！
图标由房屋相连成一颗心，房屋本身又融合了消息窗口的形状，既代表了慧聚邻app为住户提供贴心的服务
又代表了慧聚邻app是一个高效的沟通窗口拉近邻居关系！
经过公司领导评审，最后采用了提案一logo方案。
2.慧聚邻启动页
慧聚邻app因为紧急上线，启动页只有一个简单的目的：用最简约的设计突出品牌认知，不需要太复杂的设计来分散用户注意力。使用应用logo作为主元素，简单有效地传递品牌信息。每一次启动都是一次印象的加深，都是增加粘性的机会。
启动页所需的尺寸比较多，我从开发那里拿来了标准的一套尺寸如下图：
看到这个尺寸列表先别慌=_= 这只是标准，实际上启动页需要的尺寸一般是这样的：
Android:1080x1920
ios:640x960 640x1136 750x1334 1242x1208 1125x2436
也就是启动页需要这六个尺寸的图片提供给开发就可以了。
3.应用商店所需图标以及宣传截图
app开始申请上线时，分别有安卓渠道和ios渠道，有些app只申请其中之一，看公司和app的情况而定。我们分别来说App Store和应用商店所需图标和其他物料情况。
在应用商店和App Store里面打开app都有相关简短介绍，但是必不可少的是产品介绍截图，如下图（因为慧聚邻还在申请过程中，截取了公司的另一个app在应用商店的截图）：
在上线要准备的物料中会有详细要求，或者开发会单独告诉你产品截图的作图要求，但是物料的要求一般比较严格，开发单独告诉的难免也有遗漏，在此我先列举物料资料的详细要求：
提供图片格式：png、jpg各一份（实际上安卓上线渠道没有那么严格，所以这里可以是png格式也可以是jpg格式，最好是png格式的图片）
尺寸：480*800；720*1280；1080*1920；1152*1920
截图数量：每种尺寸不少于4张（常见的是做五张）
容量：每张图片小于1M
图片要求：
① 截图必须与软件运行内容一致
② 请去除截图中的顶部通知栏（对于通知栏这个要求不是很严格，只要不是ios的通知栏，不去除都可以的）
③ 不可上传ios应用截图
图片要求①中说的截图必须与软件运行内容一致，一致到什么程度呢？不是说让你完全截取软件界面，不做任何修饰设计，而是只要是软件内容，可以局部放大来突出部分内容，也可以周围设计花哨一些来吸引用户注意如下图微博，在不同的节日促销的时候也可以突出促销的活动内容如下图唯品会和苏宁易购。软件截图是给用户展现产品功能的第一步，一定要体现app最核心的功能！
对于上线物料，按照物料要求材料，会有很多尺寸要求，可以先跟开发沟通，像我事先和我们公司负责安卓渠道上线的开发沟通，他就让我要多做一个小米手机的720尺寸的截图，可能小米手机比较傲娇==，然后我找了小米的样机做了单独做了一套截图。最后做了多套截图。下图720jpg可以不做。我这是沟通之前做的，以防万一...
针对慧聚邻app，公司商讨，给出了具有代表性的五张截图来表达app的主要功能，因为截图展示都比较小，我在设计过程中为了展示截图细节，做了半截的处理。
应用商店的产品截图设计好了，就该处理icon了。对于icon。因为要分享的途径比较多，要做的尺寸也是相当的多。
软件的图标（iocn）尺寸：
需提供以下尺寸各一个
百手512×512 大小800kb以内；
360 512*512圆角半径弧度：70PX；
腾讯 小图标16*16 大小20K以内，大图标512*512 大小200kb以内；
豌豆荚阿里淘宝 512*512背景透明且带圆角；
小米 16*16,100*100,512*512共三张；
160*160；
216*216；
图标如果没有特殊要求，都要按直角来处理，后期手机系统会适配圆角的。
按上面要求，总结出来安卓需要的图标有：16*16 100*100 160*160 216*216 512*512以及512*512圆角70px图标各一个
4.App Store所需图标以及宣传截图
App Store上线审核相比应用市场应该算是很严格了，我在这里也踩过不少坑，首先呢App Store对于图标和截图都有个很重要的要求：图片不可包含alpha通道！图片不可包含alpha通道！图片不可包含alpha通道！重要的事情我说三遍！图片不可包含alpha通道，也就是不可设置透明度，记住，虽然做的png图标和图片，千万不能有透明度，我就是这里踩坑了，导致那么多尺寸的图重新导出了一遍=_=，而且iOS中图标的尺寸要求真实多到吐血~我们先说截图要求吧。
系统截图要求：
5张，标明上传展示顺序。分辨率480，720，1080等。 png，jpg格式（图片不可包含alpha通道，即不可设置透明度）
Appstore苹果商店
1080：1080x1920
1242：1242x2208
iPhone4：640x960
iPhone5：640x1136
iPhone6：750x1134
（图片大小＜1M）
上面尺寸要求应该很清楚了吧，接下来就是按照要求做截图，一般开发会让做成png格式，和安卓一样截图必须与软件运行内容一致，记住千万不能有透明度，千万不能有安卓相关的通知栏信息，iOS渠道审核很严格，避免出现差错，尽量不要做通知栏！
接下来就是图标啦，iOS图标尺寸要求比安卓的多很多，而且也是很重要的一点，不能有透明度，也就是不可包含alpha通道的png图标，不可包含alpha通道，自然都是直角了。具体要求如下：
此图标将用于 App Store，其格式必须为 JPG 或 PNG，最低分辨率至少为 72 DPI，并采用 RGB 色彩空间。它不能包含图层或圆角，1024*1024 ,alpha 去掉。这只是资料表格的单个要求，具体尺寸如下图：
对于图标我都是在ps里面ctrl+alt+i修改尺寸一个个导出，很繁琐，你们有其他快捷的方法吗？求分享啊 卖萌.jpg
5.第三方登录所需图标以及宣传截图
第三方登录一般有微信、微博、QQ、友盟、高德等等
紧急上线一般也不用做第三方登录的相关物料，后期需要再补，我来说下一般要求吧！
微信：logo：28*28和108*108各一张（仅支持PNG格式，大小不超过300KB）
应用宣传图：2～5张应用截图（单张图片不超过1M。截图不能小于320*480像素，推荐480*800像素。JPG、PNG格式）
微博：图标：16*16，80*80，120*120图标各一张（2M以内，支持PNG及JPG格式）应用在微博应用频道展示时所显示的图标，图标尺寸为100*100 像素
应用截图：至少三张，300*450，2M以内，支持PNG、JPG格式（请上传相关的应用介绍照片,照片中最好含有“分享到新浪微博”功能的相关截图）
我按要求做的微博截图如下：
QQ：logo：16*16图标一张（大小需在20K以内，PNG格式），512*512图标一张（大小需在200K以内，PNG或JPG格式，建议使用直角图标）
应用宣传图：2～5张应用截图（单张图片不超过1M。截图不能小于320*480像素，推荐480*800像素。JPG、PNG格式）
微信和QQ应用宣传图直接用的APP界面截图，如下：
对于app打板上线，有很多要做的，这些做完了还有分享下载的页面要做，至于分享下载页面，没有什么要求，突出下载按钮即可。
以上就是此次分享的全部内容了，我能想到的就这么多了，哪里有不妥或者有更多的相关经验，欢迎纠正补充！！！
你都看到这里了，不考虑为我点个小心心再走吗？
