-
让品牌有温度、有情感
专注品牌策划15年
App界面设计（app界面设计用什么软件）
发布时间：2023-04-27 20:27:43
稿源：
创意岭 阅读：
685
大家好！今天让创意岭的小编来大家介绍下关于App界面设计的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。
创意岭作为行业内优秀企业，服务客户遍布全国，设计相关业务请拨打175-8598-2043，或微信：1454722008
本文目录:
一、策划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界面设计尺寸规范大全
原型设计尺寸
☆ 状态栏(status bar)：就是电量条，其高度为：20px；
☆ 导航栏(navigation)：就是顶部导航，有线其高度为：45px；没有线高度就是44px；
☆ 主菜单栏(submenu，tab)：就是标签栏，底部导航，其高度为：46px；
☆ 信号格：5 * 5
☆ wifi 图片：11 * 9
☆ 锁：11 * 11
☆ 导航：8 * 8
☆ 电量：22 * 9
☆ 闪电：5 * 8
☆ 状态栏中的文字：10px
☆ 顶部导航栏的图标尺寸为16x16px左右，底部标签栏的图标尺寸为23 x 23px左右。
☆ 导航栏的文字大小最大值是14px，底部标签栏的图标下方的文字大小为10px。
☆ 内容区域的文字大小是：10px, 12px，14px，16px。
① 文字黑色：#282828
② 文字深灰色：#656565
③ 文字浅灰色：#989898
④ 边框浅灰色：#C3C3C3
⑤ 背景淡灰色：#f2f2f2
⑥ 按钮背景纯白色：#ffffff
A、疏远距离：比如，所有元素距离手机屏幕最左边的距离。
B、亲密距离：比如，左边图标与右边文字之间的距离。
1、iPhone6手机模型尺寸：429x881px
2、界面尺寸布局：满屏尺寸375x667px
3、高度电量条高度20px，导航栏高度44px，标签栏高度46px；
4、各区域图标大小导航栏图标16px，底部标签栏图标23px；
5、各区域文字大小电量条-文字10px，导航栏-文字14px，标签栏-文字10px；
6、常用的文字大小：16px，14px，12px，10px；
7、常用的颜色：背景浅灰色：#f2f2f2, 文字深黑色： #323232，边框色深灰：#CCCCCC；
8、常用可点击区域的高度（比如搜索区域）：28px；
9、单行文字的背景框的高度：44px，双行则为：88px，三行则为：132px；
10、常用间距：亲密距离：10px；疏远距离：15px，其它距离：5px，22px等；
三、你手机里哪些APP界面使用了APP宫格设计
看到这样的APP设计标题，你脑海当中有没有回忆几个印象比较深刻的APP界面设计呢？
是采用宫格布局设计的，比如什么九宫格、六宫格、四宫格、八宫格等等。如下图：支付宝的首页就是采用了APP宫格设计。
第一部分：APP的首页肯定是APP宫格设计泛滥的地方。也是我们最常见的宫格设计的地方。
比如下面的这些APP界面设计：途牛旅游APP首页设计
为什么大家喜欢采用APP宫格界面设计，或者宫格布局，主要是原因在于，这样的界面设计简单明了、而且也符合APP导航入口等要求。
第二部分常见的APP界面是频道页 或者栏目界面；比如优酷的频道页
第三个地方就是筛选界面：
第四部分：我的页面 或者相关的界面
四、APP界面设计中的字体设计原则
设计文字时应保证文字辨识度高和信息传达的准确性。相对于图片文字拥有更加清晰准确的表达能力，使得用户能更加清晰从APP中获取信息信息，界面内容也更加直观。文字设计要遵循以下原则：
用语要简洁，信息内容清楚，避免使用专业的语言，同时减少不必要的修饰词语，使得用户可以更加迅速的理解手机APP的功能，文字布局上也应做到排版布局合理，结构层次清晰。
1. 亲近感与柔和感
尖锐的物体会给人带来危险的感觉，文字也有同样的心理作用，想要文字给人带来温柔的感觉，首先应使用线条粗一些、前端浑圆的字体，最好是手写体;其次避免使用黑色或藏蓝色的文字，应选取与背景颜色亮度差异较小的暖色。
2. 未来性与先进性
应选择装饰性弱的无衬线体和黑体，或者利用图形组成具有“图形化”的文字，需要注意的是，越是抽象的字识别性越低，这种字可以用在logo上，注意小范围使用。颜色则可以考虑黑白灰这些简单的配色。
3. 纤细与美丽
女性化的文字通常给人优美、纤细的印象，需要选用线条细且有曲线的字体，流畅的手写细线体可以运用在女性产品上，更能给人带来娇媚的视觉效果。
4. 怀旧与复古
字体的设计具有流行性，所以字体的设计通常可以反映出流行的趋势。在字体设计时要选用与背景颜色差异大的色彩，比如黑色的粗字体配上明亮的背景色，视觉的冲击力在哪里运用都不会减弱。
字体设计的节奏感体现在字号对比、重量对比、色彩对比上。当字号越大时，文字就会显得越重要，字号的大小变化能让版面展现出强弱变化;最引人注意的标题，在版面中会比其他字体更粗;重要的文字可以换作其他颜色加以区分，红、黄、橙等暖色被称为前进色，它们比蓝、绿这些冷色更能起到吸引人眼球的作用。
以上就是APP界面设计中的字体设计相关分享，希望对大家的设计之路有所帮助。另外，小编想说， 不同风格的字体会给人带来不同的视觉体验，所以大家要关注这一点。
以上就是关于App界面设计相关问题的回答。希望能帮到你，如有更多相关问题，您也可以联系我们的客服进行咨询，客服也会为您讲解更多精彩的知识和内容。
推荐阅读：
赣公网安备 50019002502384号
