app ui界面设计规范，APP UI界面设计中经典的设计模式

　　智能手机的广泛运用，导致大量的app被设计出来。但是有的app用户体验非常好，但是有的app却遭到用户的讨厌。今天就让faceui为大家介绍app ui界面设计规范，APP UI界面设计中经典的设计模式。

　　app ui界面设计规范

　　1、尺寸

　　iOS：建议用750x1334px来做设计稿。

　　安卓：就目前的市场来看，XXHDPI属于主流机型；所以推荐使用1080x1920px来做设计稿尺寸，这样即使你标注的是px，程序员也可以很方便的进行换算。

　　移动端的尺寸比PC端复杂，关键就在倍率。但也正因为倍率的存在，把大大小小的屏幕拉回到同一水平线，得以保证一套设计适应各种屏幕。站在这条水平线的角度看，会发现它很好理解。

　　2、字体

　　字体：iPhone上的字体英文为：HelveticaNeue，中文Mac下用的是黑体，Win下通常用苹方，也可以用华文黑体。所有字体要用双数字号。

　　颜色值：正文部分黑色灰色字体可根据自己需要来取色，通常取三个不同深度的黑色、深灰、浅灰色字体颜色来区分次重点，#333333；#666666；#999999依次由深到浅。

　　大小：长文本26px，短文本28px，注释24px。字体大小没有严格标准，根据自己的实际情况适当的去调节大小即可。

　　图片来源于网络

　　3、边距和间距

　　全局边距：全局边距是指页面内容到屏幕边缘的距离，整个应用的界面都应该以此来进行规范，以达到页面整体视觉效果的统一。全局边距的设置可以更好的引导用户竖向向下阅读。常用的全局边距有32px、30px、24px、20px等等，当然除了这些还有更大或者更小的边距。

　　不留边距：通常被应用在卡片式布局中图片通栏显示。这种图片通栏显示的设置方式，更容易让用户将注意力集中到每个图文的内容本身，其视觉流在向下浏览时因为没有留白的引导被图片直接割裂，造成在图片上停留更长时间。

　　卡片间距：在移动端页面设计中卡片式布局是非常常见的布局方式，至于卡片和卡片之间的距离的设置需要根据界面的风格以及卡片承载信息的多少来界定，通常最小不低于16px，过小的间距会造成用户的紧张情绪，使用最多的间距是20px、24px、30px、40px，当然间距也不宜过大，过大的间距会使界面变得松散，间距的颜色设置可以与分割线一致，也可以更浅一些。

　　4、内容布局

　　在app的设计中内容的布局形式多种多样，最常用的两种布局形式就是列表式布局和卡片式布局。

　　列表式布局：列表式布局方式非常普遍，随便打开一个APP，基本都存在这种布局方式，其布局形式的特点在于能够在较小的屏幕中显示多条信息，用户通过上下滑动的手势能获得大量的信息反馈。而列表也是一种非常容易理解的展示形式。

　　卡片式布局：形式非常灵活。其特点在于，每张卡片的内容和形式都可以相互独立，互不干扰，所以可以在同一个页面中出现不同的卡片承载不同的内容。而由于每张卡片都是独立存在的，其信息量可以相对列表更加丰富。

　　图片来源于网络

　　APP UI界面设计中经典的设计模式

　　1、导航模式：主要导航模式和次要导航模式。

　　2、表单设计模式：登陆表单、注册表单、核对表单、计算表单、搜索表单、多步骤表单、长表单。

　　3、表格和列表设计模式：只显示最重要的信息。

　　4、搜索、分类和过滤：让这些功能易于使用。

　　5、APP上的常见工具模块设计模式：采用直接、轻量化的设计。

　　6、APP上的图表化设计：借鉴基本图表的经典设计理念。

　　7、视觉模态设计：吸引用户并促使其发现产品功能。

　　8、反馈与功能可见性功能设计：向用户提供适当、清晰且及时的反馈。

　　9、APP上的帮助与引导类界面设计：应该易于用户学习，让用户快速掌握应用使用方法。

　　10、反模式设计：标新立异、隐喻错位、愚蠢的对话框、图表垃圾、按钮海。

　　以上就是faceui为大家介绍的关于app ui界面设计的相关内容。其实要想做好一款app，ui界面设计是非常关键的，直接关系到用户对app的使用感受。