一起来了解一下ui设计规范有哪些

我们在设计小程序时，一般都有设计界面，作为用户与系统互动的媒介，而这些界面设计统称为ui设计。那大家知道ui设计规范有哪些吗？下面就让小编带大家来详细了解一下相关的内容吧。

　　一、ios篇

　　1、尺寸及分辨率

　　iPhone界面尺寸

　　初代iphone

　　iPhone4

　　iPhone5

　　iPhone6/7/8

　　iPhoneXS

　　iPhoneXS Max

（图片来自网络）

　　iPad界面尺寸

　　1024x768 2048x1536

　　单位都是px（像素，网页UI与一定段UI分辨率一般都只要72）

　　设计的时候不是每个尺寸都要做一套，一般采用750x1334的尺寸进行设计。

　　2、界面基本组成元素尺寸　

　　状态栏（Status Bars）和导航栏（Navigation Bars）

　　状态栏：我们经常说的信号、运营商、电量等显示手机状态的区域，40px，

　　导航栏：显示我们当前界面的名称，包含想要的功能或者页面跳转按钮

　　状态栏和导航栏

　　导航栏图标尺寸：在导航栏区域上的功能诸如搜索、添加、更多、返回等均需要用图标来表达　

　　标签栏 （Tab Bars）

　　标签栏指的是APP底部的区域，如微信底部常驻有聊天、通讯录、发现、我的四个图标。

　　iPhone6/7/8设计中，标签栏的高度为49pt（98px），通常我们会在Tab栏图标之下加上11pt（22px）的注释文字，这个注释文字一般来说都是非常浅的浅灰色。

　　标签栏

　　标签栏图标尺寸

　　造型

　　工具栏 （ToolBars）

　　我们在苹果自带浏览器底部就能看到工具栏。工具栏提供了和当前任务相关的操作和按钮，在滑动时可以收起。工具栏同Tab栏一样都是位于底部，但是高度略窄，它的高度是44pt（88px）。

　　3、字体大小

　　iOS中英文使用的是

　　San Francisco (SF)

　　字体，中文是苹方黑体

　　手机上显示的最小字体10pt（20px），最大的是34pt（68px）。

　　表1：HIG对APP的字体建议，只针对英文SF字体而言的（基于@2x）　　

　　表2：特殊区域字体建议（基于@2x）　　

　　表3：用户体验　

　　4、图标尺寸大小

　　图标都是按照最大1024x1024进行设计的，之后按照比例缩小调整，高光部分与圆角不需要做，ios系统自动生成，一般图标最大做256x256，最小44x44。

　　程序应用 120x120px　　

　　启动图标切图

　　image.png

　　控件 控件包括：输入框、按钮、滑杆、页卡、开关等，设计空间需注意两件事：第一，点击区域基本符合44pt（88px）原则，也就是在手机上大小大概是7mm-9mm的区域，适合手指点击。第二，要设计操作的不同状态，不要只设计一种状态。

　　5、色彩

　　其实在iPhone上显示的色域要比我们作图时的RGB色域要广。所以在iPhone上设计怎样的颜色都可以。只要符合产品气质并且在色彩心理学理论上思考，用什么颜色是设计师的自由。官方建议的系统色彩如下：

　　系统建议色彩

　　6、UI布局概念

　　可点击对象的区域：尺寸不要小于44x44px；

　　将重要的内容和功能放在权重高的位置，将重要的元素放在前半屏比较好，对于阅读习惯从左到右的用户来说，更贴近屏幕左侧位置容易引起关注；

　　利用视觉表现形式的权重和平衡，尺寸较大的元素具有更高的权重，对于尺寸较小的元素来说，更能吸引目光，看上去更加重要；

　　在iPhone6/7/8尺寸下，状态栏高度20pt(40px)、导航栏44pt(88px)、Tab栏49pt(98px)、导航标题字号建议17pt(34px)、导航栏图标建议22pt(44px)、Tab栏图标建议30pt(60px)、Tab栏图标注释文字11pt(22px)、左右安全距离建议12pt(24px)。字号从10pt（20px）到34pt（68px）均可，要视具体情况决定。

　　作为iPhone全面屏系列手机，上下左右是圆角、顶部齐刘海使屏幕凹下一块。所以在带有圆角和齐刘海的红色标注区域不应该放置任何功能，应留出一定的边距（Margin）。一般的APP会留出16pt-24pt不等的边距防止用户在屏幕边缘不好点击。不过内容展现却可以呈现在边距里。

　　7、切图

　　图标切图

　　有了大小各异的iPhone尺寸，如果程序只有一套切图，那么一定会造成有的手机显示很差。所以我们要在程序里放置多套切图，然后让程序判断“主人”的手机是什么型号，显示不同的切图。这样才能够完美地呈现给用户最好的体验。切图的方法有很多种。Sketch和

　　Adobe XD

　　可以直接导出。Phtoshop不具备这个功能，但是我们可以使用

　　cutterman

　　蓝湖

　　等插件导出切图。不管是自带功能还是插件，导出切图都可以导出@2x和@3x图，而设计稿只需要iPhone6/7/8一套即可。

　　切图命名规范　　

　　然后我们要按照 功能_ 类型_ 名称_ 状态@倍数来命名每个切图，比如我们导航条上有一个搜索图标，那么它的名称就是：

　　navi_icon_search_default@2x.png 导航_ 图标_ 搜索_ 正常@2x.png

　　App Store截图 在程序上传App Store时我们需要提供多张APP截图，供用户了解APP的功能。我们需要提供1242 x 2688px和1125 x 2436px两套截图。

　　闪屏页　

　　8、视觉规范

　　一套APP应该有3-5种主题色和辅助色；5-10种不同变化的字体样式。一套移动端应用的视觉规范应该包括: 1、主色/辅色/色彩规范: 规定APP所能使用的色彩种类； 2、文字颜色/大小规范: 规定APP主要使用文字的大小、颜色、应用场景等； 3、ICON规范: 规定APP的icon设计规范; 4、应用图标规范: 规定APP的应用图标使用规范； 5、按钮和交互态规范: 规定APP内所有按钮和交互态的样式； 6、间距规范: 规定APP内所有间距的尺寸。

　　二、Android篇