app界面交互设计规范_APP界面规范

文章目录：

• 1、手机UI设计的基本规范
• 2、如何做app界面设计？
• 3、手机界面设计的三大原则

手机UI设计的基本规范

大家都知道手机采用的：一个是苹果的iOS系统，另一个就是谷歌公司的安卓系统。华为的鸿蒙系统虽然早就上线，但是还没有真正运用在手机移动端上，小阿在这里期待着，希望有一天也能写“华为‘鸿蒙系统’的界面尺寸规范。”

这两者之间有一个明显的区别就是iOS系统是非开源的，简单来说就是不能别随意改动的，连图标都是必须带圆角的，对交互设计师很友好的。

而安卓系统就是开源的，界面可以随意改动，尺寸也没有特别的规范，图标、尺寸成千上万种，根据手机品牌不同，形状也不同，对于交互设计稍微有那么些许不友好。

那我们就来看看安卓和iOS的具体有哪些界面规范。

一、iOS界面规范

首先苹果分为两种尺寸，一种是中码比如6s、7、8等，这种我们一般切图命名为@2X。还有一种就是Plus版本，这种一般切图命名为@3X。

苹果6s 的尺寸750px * 1334px，6s Plus的尺寸就是1242px * 2208 px。两者之间的关系就是1.5倍，怎么说呢，就是6s之类的手机想要变成Plus，我们设计师稍微想要偷懒一下设计，只需要整体扩大1.5倍，比如图标。

来分析一下界面的尺寸规范：

首先是状态栏，就是信号电池栏的高度为40px。导航栏部分，就是“设置”栏高度为88px。

而下边的底部栏（导航栏）高度则为98px。

注意这三种尺寸是规定比较死的。我们做开发遇到Plus版把以上尺寸等比例扩大1.5倍就可以了。剩下的中间空白部分，我们就可以任意填充内容，Banner或者图标？

☆ 关于图标部分

苹果的图标极具有美感，完全符合栅格黄金比例，所以看起来十分协调。因为都是使用的网格进行规范化设计，所以一整套图标都保持着高统一性。

整个点击图标最小不能小于44px，一般大小为58px，圆角为12px,但是我们习惯取为整数60px,就会非常的标准。为什么一定有最小的控制呢？因为我们手指有一个触碰面呀~低于上述的宽度，就可能碰不到。一定要非常注意用户的使用感受哦。

☆ 关于分割线部分

注意分割线不是一条线，是一个宽度为1px的矩形，而且颜色多为灰色。

☆ 关于板块与板块之间

板块与板块之间的灰色条间隔是30-70之间，一般来说取整数。iOS系统采取了70 px,有利于减轻用户的阅读负担。列表的高度一般高于88 px，列表与列表之间的距离是10px-30px,太小会有碰撞。作为UI设计师，这一点是要考虑的是吧？

☆ 关于列表中的尺寸规范以及字体要求

☆ 关于左右间隔的安全区域

这个安全区域又称之为留白边距，iOS的原生态页面【设置】页面的边距是30px,根据不同产品有不同的调整，宽度一般在16px--30px浮动，最大的特点就是数值全是偶数。

☆ 关于切换按钮的尺寸

☆ 关于字体

iOS系统的字体是苹方字体，字体的颜色和粗细也大有讲究，标题等文字就是粗体，一些说明文字等就是浅色非加粗体。常常用文字的粗细体来区分重要信息和次要信息，进行信息层级的划分。字体颜色很少采用纯黑色，一般用的是深灰色和浅灰色。

主标题的字体大小设置一般是32-36左右，加粗居中。列表中的文字就要小一些，字体大小为30，不会加粗。辅助性字体大小一般24-26。说明文字一般不会小于22，最小设置为20，再小就看不到啦。另外需要注意的一点是所有的字号设置都必须为偶数，上下级内容字号极差关系为2-4号。

关于苹果界面的小部分尺寸规范就介绍到这里，下期再做安卓界面的尺寸介绍。

作为UI设计师，一定要具体掌握界面的大小尺寸来适应美学观点，让人感觉协调舒适，能在有效的范围内极快吸引用户的注意力。

二、安卓界面规范

众所周知，安卓系统是开源的，国内又有超多的手机厂商，小米、魅族、华为、oppo、三星等，每一个品牌有属于自己的UI设计规范，但是我们主要分析UI界面尺寸规范。

1、字体

安卓系统中文采用的是思源黑体，英文字体为robot字体。

只使用偶数单位 24 pt，28 pt，36 pt等字体大小

2、mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi、dp、px到底是什么意思？

讲图标之前先来分析一下一排英文的意思：

mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi都是表示的屏幕密度大小，依次数值越大，其分辨率越高。常用的是xxhdpi和xxxhdpi。

dp是安卓系统专用的长度单位，设备独立像素的意思。不同设备有不同的显示效果,这个和设备硬件有关。多为图标使用，文字则用sp(放大像素)，主要用于字体显示best for textsize。

px是像素的意思， 不同设备显示效果相同。

安卓各屏幕密度关系如下：

3、图标

不同手机品牌的图标的标志是不一样的，对应不同大小屏幕的尺寸如下：

系统图标的尺寸：

快捷图标的尺寸：

应用图标的尺寸：

4、应用栏的尺寸

从左到右依次是：① 应用栏高度：56dp；应用栏左右内边距为16dp；应用栏图标上下左内边距为16dp；应用栏标题左内边距为72dp；应用栏标题下边距：20dp；

②应用栏高度为128dp；

③操作栏高度为56dp；标题栏高度：80dp；标题栏底部内边距：8dp；描述区域高度：72dp；描述区底部内边距：16dp。

5、列表高度

垂直边框、水平外边距、边框左右外边距各16dp；带有图标或者头像的内容有72dp的左边距。

垂直边距

①状态栏：24dp；②工具栏：56dp；③子标题：48dp；④列表项：72dp

垂直边框、水平外边距、边框左右外边距各16dp；带有图标或者头像的内容有72dp的左边距。

垂直边距

①状态栏：24dp；②工具栏：56dp；③标题和列表项：48dp；④子标题：48dp；⑤内容区域间距离为8dp

6、切图

上周我们讲到iPhone 6与iPhone 6 Plus约是1.5的关系，而xhdpi的Android手机屏幕与xxdpi的屏幕刚好是1.5倍的关系，所以iPhone 6 Plus和xxhdip也可以共用一套切图，掌握好尺寸关系，能让工作变得简单很多。

7、界面适配

安卓多屏幕支持的基础是它能够管理应用程序的布局和位图可绘制对象的渲染以适当的方式对当前屏幕配置的能力。该系统处理的大部分工作由布局缩放以适合屏幕尺寸/密度和缩放位图可绘制在屏幕密度正确呈现您的应用程序在每个屏幕的配置，来优化用户界面设计，带来更良好的用户体验。

如何做到安卓界面适配呢？大家一定要很清楚的了解分辨率、屏幕大小、密度的关系；明白实际密度和系统密度的关系，dp、sp、px的区别；明白dp与px的转换。这里不做过多阐述，后期写一篇具体的~

安卓的界面规范就讲到这里，要明白设计界面规范的意义是确保设计的统一性与合理性，规范维护的是项目的统一，为了项目利益最大化，高效化。所以作为UI设计师的我们，如果一点设计规范不遵守，全靠自己想当然，那就别发给前端人员啦，他也看不懂。

所以作为UI设计，必须要要遵守设计规范，这样才能做到设计有道可寻，希望以上回答对你了解手机界面设计规范有所帮助。

如何做app界面设计？

这类的解决方案是设计的app最好是小而准，不要大而全。越全的功能应用，只能代表着这个应用在各方面的都很平庸

2、喜欢当工具来使用的目标客户群：比如找地图，看天气，查数据等。

这类的解决方案是 我们尽最大努力的去满足用户的情景需求。做到极致和简单。

3、无聊的客户群，用来打发消磨时间的：无需求，漫无目的的

这类的解决方案是尽可能展示用户感兴趣的东西，帮助客户来打发消磨时光。

第二点：APP原型图的制作和设计讨论

这个环节是必不可少的。需要根据设计需求认认真真的来画画原型图。

常用的APP原型图工具：移动APP原型设计神器 POP 、axure、Foreui等

第三点：APP视觉设计与设计要点

（1）大概设计板块有APP启动页面设计，APP界面设计的尺寸规范，app图标设计等

一般来说，手机屏幕是从上往下布局的，重要的信息会放在上方。但是在操作上，大部分人都是单手拿手机，常用的操作，要放在界面的下方。

另外还有一个原则，最小的触摸单位，一般是44个像素。如果再小，你的拇指难以触碰，或者容易引发误操作。同时，也不要让界面太拥挤。

所以，设计师必须用减法设计，这个过程需要花时间思考、简化元素。

你必须记住：（1）隐藏设计或者减法设计 （2）分区或分类 （3）帮用户做决策 （4）提高交互创新设计 （5）让人有爽快感和新奇感 （6）在设计中浸入情感，把握用户的心理。（谈谈如何进行产品设计以及产品情感化设计）

一位大师这样说过“真正的简约设计是：作品必须不断的被简化，一改再改，直到设计最终成形。”

2014年 APP设计风格趋向扁平化和卡片化。卡片，扁平化都会是移动app设计的趋势！认为卡片设计确实同时兼具了“拟物”和“极简”2种优势！

第四点：APP界面设计流程

（1）. 设计APP界面时，学会从优秀APP界面设计作品中寻求灵感，以前的艺术大师，用少量的资源做了大量的设计。

（2）. 放下工作，休息一下很有帮助。扁平和简约设计的一切均关乎到细节的差异。因此小憩片刻后再回到工作，带着全新的眼光工作，比长时间冥思苦想更有

（3）. 并排比较各个版式同样有帮助。哪怕花20分钟前将一个线条下移各5个像素分别保存，对比两个版式就能很快分清孰好孰坏。

（4）. 由于实物展示的相对比例至关重要，所以要及早在不同的目标设备上测试。

（5）. 整个设计过程中不断问自己“真的需要吗？” 。支撑项目时候，找一些讨巧的办法，例如，添加一些有趣的元素、样式会这样会很容易也会很吸引人，

但必须始终注意剔除不必要的元素，不断精简。甩掉你费尽心血的部分总是难以割舍，但修改过程必须挑剔。

第五点：APP界面设计测试与预览修正

设计完成之后，我们可以把设计图导入手机测试或者是校正。之前发布的在线测试工具：快速在移动终端上预览APP界面设计效果图的方法最后：好的APP界面设计作品必然是要经过不断升级、重复迭代的。

手机界面设计的三大原则

移动APP里面的每一个UI界面都是这个App的门面，尤其是主界面，看上去干净整洁清爽宜人容易操作，那么你的App就成功了一半。这也反映出了你这个开发团队的基本审美素质和设计理念。

图片

我们都知道，设计一套完整的APP UI界面其实是比较复杂的，从需求分析到市场定位，从草稿到拟方案，从创意元素的组合到想法沉淀，从设计规范到突破传统，从纸上到电脑上，从个人到团队，或者从团队到个人，从素材收集到素材处理，从0思路到偶然等等，其实设计一个APP会碰到太多太多的问题，

所以要求我们移动APP设计者必须按照下面的三大准则和八项标准来设计。

【手机APPUI界面设计】三大准则：

（1）不乱用颜色。一个页面内不要超过3种颜色

（2）不乱用大图片当背景。你是想让用户看你的背景图片呢，还是看你的内容？

（3）不乱填充内容。页面元素如果太满，给读者压抑感，无所适从。

图片

【手机APPUI界面设计】八项交互标准：

1.色彩舒适度

一个第一眼看上去就杂七杂八色彩，或者完全没有主次之分的简洁，或者看上去就没有视觉舒适度的饱和度或者明暗度不搭调的色彩，我想它已经没法继续长久看下去了。因为人第一眼看到的，就是一个事物的颜色，才是形状。

2.文字的主次

任何设计作品都要传达信息传达思想，如果一套设计中字体乱啪啪，文字大小和文字粗细，间距行距都没有一个“主次逻辑”，我很难挖掘到自己想要的信息，不论设计是酷炫复杂的还是简洁清爽的，光能展现信息时远远不够的，信息文字的每一个细节，都决定了一个设计要传达的思想主次，记住，你是要引导别人去看，而不是别人引导你去设计。这世上没有一个真正定死的文字标准，但是最基本的，至少让别人看清你的文字是写的什么吧，所以，文字之间的不同色彩，也是能让文字主次突出的方面

3.信息可读性

有了文字基础，处理好每个模块的布局，色块，插图，背景等方面，会让你的信息有较强的可读性。别跟着你的爱好走：我喜欢酷炫，我喜欢简洁，我喜欢优雅，我喜欢二货。把设计作品中你最想传达的信息传达出去，就算某些信息被别人忽略了，你依然是成功的。如果用户连看都不想看，连最基本的信息都没法传达，那作品的任何风格，都只是口头吹嘘。你要定好你的目标用户，你想吃遍全中国乃至全世界，全行业？除非，没有除非了。

4.UI识别性

这一点在图标上味道非常浓，不论你这一点在图标上味道非常浓，不论你设计的是扁平化还是拟物化还是梵高风格，不一定要3秒看出图标的意思，也要让人欣赏这个图标美感的同时，大概“心里知道”，这个图标要传达个什么。一个网站banner的设计，一个页面的导航设计，都要考虑到识别性，你想传达这个图像的什么内涵？你这个图形的意图是什么？都是设计者需要考虑的。

图片

5.交互性与易用性

上面的工作都做得差不多了，剩下的就是使用了。不论是手机主题还是网站设计还是APP还是游戏，要让别人快速上手，能玩，能用，甚至用的简单，玩的简单，就算你采用银河系都没有的酷炫交互，或者采用地球上已经濒临灭绝的土逼设计，达到方便使用的优良品质，你的作品再牛逼到没法看，也有牛逼的地方能看。

6.思想，生活的传达

作品是什么样，一般能从另一个层面看出一些设计师对生活对工作对感情的态度和状态，所以别小看一个作品的力量，它可能就是传达你自己真实内心的一个媒介，可能你并未发现，但是旁观者已经发现你了。

所以说，融入生活得设计是比较难的，同时，也是最容易的，你是否把你最粗心最让人厌倦的一面暴露到设计作品中？是否把你最细致入微最耐人寻味的一面传达到用户心里？一张图就可以看出（当然这不代表全部啊，某些设计师的作品看几天你也看不出他是什么人过着什么生活的）

7.微小的细节和微小的创意

别说这个东西就是你创造的，因为上帝比你创造的还早。UI设计中一根线，一像素，色彩饱和度的细微差别，一个小渐变，一个字体的选择，画布的大小，用笔的粗细，这些小细节，虽然不是人人都能说得出，但是能第一眼“看在心里，感觉到骨子里”，所以就算不说，细节也是能让任何人第一时间感觉到的，别忽视每一个小细节，它说不定就是你成功的堡垒，也是一有机会就让你失败的利箭。

细节中，你就能诞生一些微小的创意，小创意创造大创意，没有细节，何谈创意？那就只是纸上谈兵，口说无凭。

8.生活中表现手法的引用

一个简单的视差，一个简单的坠落，一个简单的玻璃破碎，一个简单的树叶飘落，一张纸简单的角度摆设，一盆植物简单的远近拍摄，这些东西，都能创造你无穷的表现手法，当然，这也是比较难的，能将生活融入设计，是需要积攒的，不是一两天能体会到的。