app设计规范（app设计规范字体大小）

本文目录

• app设计规范字体大小
• 技术干货：Applewatch APP设计规范
• APP界面色彩运用原则与规范!(一)
• app设计的原则及注意事项
• android app界面设计规范(dpi,dp,px等)

app设计规范字体大小

32px。正文字号32px-34px，副文是28px-24px，最小字号不低于20px，字在正文字号使用中,阅读类的APP更注重文本的阅读便捷性，正文字号34px，会选择性的选用苹方粗体，而列表形式、工具化的APP普遍是正文32px(由于屏幕使用变大正文大小趋势变成了34px)副文案28px，时间文字24px，26px的字号还会用于划分类别的提示文案，因为这样的文字希望用户阅读，但不要抢过主列表信息的引导。

技术干货：Applewatch APP设计规范

一、规范概要

1. 导航形式

层级式，通过当前页面点击跳转到另外页面的形式。适合应用于复杂产品，需要层层递进。

页面式，页面切换，滑动，类似轮播

Apple Watch导航形式任选其一，不得同时存在。

2. 交互方式

轻触：列表、按钮、切换等控件的操作

手势：纵向轻扫，界面滚动；横向轻扫，界面导航之间的查看；从屏幕左侧边缘向右轻扫，返回父级界面。

压力触控:唤出当前页面情景菜单

实体控件（手表旋钮）：长页面浏览，避免手指长时间轻扫界面何遮挡界面

3. 色彩

使用黑色作为APP的背景色，或者深色且高斯模糊的图片作为背景

高对比度的颜色使用于文字、图标、界面

4文字

SF和苹方

5. 图标

通知图标、首屏图标和长看图标、短看图标

情景图标（App内功能图标）

6. 布局

并排放置的图标一行不要超过三个

布局优先采用左对齐

二、设计尺寸

1.1屏幕尺寸

38mm(272*340px)

42mm(312*390px)
1.2图标尺寸

通知图标48PX（38mm）55px（42mm）

首屏图标和常看图标80px（38mm）88px（42mm）

短看图标172px（38mm）196px（42mm）

菜单情景图标（App内的功能图标）

图标大小70px，实际图标大小46px。（38mm）

图标大小80px，实际图标大小54px。（42mm）

图标线宽不得小于4px

1.3图标

1.3.1

通知图标，系统通知弹出的图标

1.3.2

首屏图标，如下图所示。首屏图标80px（38mm）88px（42mm）
1.3.3长看图标，如下所示，左上角图标。常看图标80px（38mm）88px（42mm）
1.3.4短看图标，如下图所示。短看图标172px（38mm）196px（42mm）
2.字体和文字

2.1字体

SF和苹方

2.2文字（字号，常见字号单位是PT和PX，PT是开发单位，PX是设计单位，在@2X下换算关系1PT=2PX）

标题headline 18PT

正文标题caption 15PT

正文body 15PT

备注、脚注、辅助文字footnote 12PT、13PT

3. 颜色

高对比度的颜色使用于文字、图标、界面

1.主色，如下图所示
2.辅助色、点睛色（控件、按钮）
按钮控件在设计中通常带有透明度

3.字体颜色和透明度
4. 布局

1状态栏和下方图片和列表布局间距
38mm(30px),42mm(32px)
2状态栏和列表按钮布局间距
38mm(11px),42mm(13px)
3状态栏和下方文本布局间距
38mm(46px),42mm(50px)
4文字边距和分割线按钮列表图片边距
38mm和42mm边距相同

5.图片和按钮到屏幕两边距离
38mm和42mm边距相同

5.控件和列表

1单行控件和列表布局尺寸

38mm
42mm
2.双行控件和列表布局尺寸

2.1正文+备注

38mm
42mm
2.2双行正文

38mm
42mm
3.三行控件和列表布局尺寸

38mm
42mm
4. 多行控件和列表布局尺寸

38mm
42mm
5.控件和列表类型

​

APP界面色彩运用原则与规范!(一)

色彩布局合理

合理的色彩布局是做好UI色彩设计的重要原则，那么该怎样做好布局呢?设计师可以通过区分内容的主次关系从而建立视觉层级关系。因为色彩在饱和度、对比度、明度等方面存在明显差异对比，所以就会形成一个明显的层级，这样人们会不自觉先关注色彩鲜艳或者色彩偏重的事物。当然，色彩布局的合理性也会让整个设计更有主次之分。

节奏有序变化

作为设计师，你需要有自己的设计节奏，而且这个节奏是有序变化的。秩序是色彩美构成的最基本的也是较重要的形式，那么什么叫秩序呢?客观事物总是按照其自身的规律在有序状态下，有条不紊的发展演变，这就是秩序。一般情况下，在色彩构成中我们可以采用色相、明度、纯度级别差递增、递减的形式，这样可使各色按照一定的秩序有规律的变化，从而具有秩序美感，这种秩序美感就会形成自己的设计节奏。

以上是环球青藤小编为考生整理的APP界面色彩运用原则与规范的相关内容，希望对大家有帮助!更多技能资讯的相关内容尽在本平台，快来看看吧!

app设计的原则及注意事项

原则：

优秀的ui界面是隐形的，华丽的装饰和不必要的元素都已经被剔除，简单直接的页面逻辑和直观必要的元素构成了这样的ui界面。设计ui的时候，你在添加任何元素的时候，都最好问一下自己“这个功能是否会影响用户现有的任务，它是否真的必要，”先将你的ui内的元素限定为必须得，专注于核心的用户体验。

清晰应该是所有ui界面都具备的基本属性。请记住，你的ui界面存在的目的是让用户能够更便捷地同你的系统进行交互，为此，它需要能够清晰地同用户进行沟通。

一致的设计能够让用户对于你的设计模式更快认知、熟悉，并且在此基础上快速适应整体的体验。所以，用户是期望借助自己习得的经验，来探索更多的内容的，而探索能否有效就得看设计的一致性是否够好了。在整个ui设计中保持一致的语言、布局和设计规律，整个用户体验会显得更加“通透”。

注意事项：

1、时间戳

在设计时间戳时要注意，选择什么样的日期分隔符。

2、超长信息

在设计的过程中，标题和描述这种东西，会有大量长度的超出范围的情况，内边框保留多少，会不会超出、要不要换行这些基本问题都要搞清楚才行。等到要测试上线才发现，这就面临着又要修改的问题。

3、空数据

所有的列表都可能出现空数据的情况，所以说设计方案不可或缺。

4、加载

加载时间的长短，很大程度的决定了用户体验是否有所提升，虽然理想中的页面加载出来应该一秒就够了，但是设计师不要忽略网络问题!如果网速不够的话，页面加载三五秒都算是快的了，所以在用户等待的过程中，设计师也可以通过比较可爱，简单的小设计，安抚用户。

从移动互联网特征的角度来看，app设计的基本八条原则：

1、内容优先，合理的布局

对于手机而言，屏幕空间资源显得非常珍贵，为了提升屏幕空间的利用率，界面布局应以内容为核心，而提供符合用户期望的内容是移动应用获得成功的关键。如何设计和组织内容，使用户能快速理解移动应用所提供的内容，使内容真正有意义，这是非常关键的。

（1）充足内容，使内容符合移动的特征。

（2）优先突出用户需要的信息，而简化页面的导航。

（3）适时提升屏幕空间的利用率。

2、是为移动触摸而设计

点击操作是PC时代交互的基础，在触摸屏设备上基于手指的手势操作已经代替了鼠标的点击操作。

（1）以信息架构为基础，简历手势交互规范。

（2）优先设计自然的手势交互，而不是TAP点击

（3）引导用户在情境中学习手势操作。

（4）特殊手势不是必须的。

（5）可触区域必须大于7×7mm,尽量大于9×9mm。

（6）手势操作需要提供过程及反馈演示。

3、输入方式的转换

文字输入是移动端的软肋之一，不管是手写输入还是键盘输入，操作效率都相对较低。在行走或者单手操作时，输入的出错率也比较高。

（1）减少文本输入，转化输入形式。

（2）简化输入选项，变填空为选择。

（3）使用手机已有的传感器输入。

4、操作流程必须确保流畅性

在移动产品的操作过程中会碰到多种多样的情况——找不到目标、不知道该怎么操作、操作后没有及时反馈，等等，这都会对产品的流畅性造成影响。在移动产品的设计中主要从三个方面来考虑产品的流畅性：

（1）手指及手势的操作流。

（2）用户的注意流。

（3）转场流畅或者自然，不能牵强！

5、多通道设计

多通道设计是指系统的输入和输入都可以由视觉、听觉、触觉等来协作完成，协同的多通道界面和交互也会让用户更有真实感和沉浸感。

当前各个系统平台的基础技术已经越来越成熟，语音输入、手势识别及其他由多种传感器组成的综合识别系统也会给用户带来更接近自然的感觉。

作为产品设计师或APP设计师，也可以从其他通道的角度思考设计，给用户更好的交互方式。

6、移动APP产品必须具备易学性

对于移动产品，提倡的是简单、直接的操作，倾向于清晰地表达产品目标和价值。让用户快速学会使用，尽量不要让他们查看帮助文档。界面架构简单，明了，导航设计清晰易理解，操作简单可见，通过界面元素的表意的和界面提供的想说就能让用户清晰地知道操作方式。只有这样的设计，才能让用户的学习使用没有负担，而不是通过帮助系统来教会用户操作。

7、避免干扰和打断

在玩手机时突然没电了、写微博时又被老板叫去做重要的事情、在搜索商品时收到一条重要的信息在移动情境中，被各种其他的事情打断是很正常的。

（1）保存用户的操作，减少重复劳动。

（2）网络中断状态或中断状态。

（3）衔接用户的记忆而不是让用户重头开始。

8、移动设计必须有爱

评价一个移动产品用户体验的好坏，除了要看它是否满足用户需求和是否基友友好的可用性之外，能让用户感受到惊喜是在移动产品设计最为推崇的。这样的设计往往是超越了用户的期望，它的表现是功能、交互或者操作流虽不是用户预期的，但是用户能很好地理解，并且更高效、更有趣地完成任务。

移动产品的设计应是惊喜有趣、智能高效和贴心的。

从用户的角度来看，APP指导性设计八个规范：

1、充分考虑用户的使用习惯。

2、尽量减少产品层级以及深度。

3、操作栏的设计。必须遵守确保优先展示操作按钮的准则。

4、设计要主次分明。将主流用户最常用的20%功能进行显现，其他进行适度的隐藏，越不常用的功能，隐藏的层级越深。

5、始终提供明确的导航，即要提供明确的返回上一级的操作，不能中断操作流程。

6、自动保存用户输入的内容或一些输入提示信息。

7、APP底部工具栏导航数目3-5个为最佳

8、尽量去猜测用户的行为，但要允许纠错

比如，用户在进行搜索时，可以根据用户最近的搜索行为给出参考答案。

android app界面设计规范(dpi,dp,px等)

PPI(Pixels per inch)：每英寸所拥有的像素数，即像素密度。
DPI(dots per inch)：即每英寸上，所能印刷的网点数，一般称为像素密度。ppi计算公式：ppi = 屏幕对角线像素数/屏幕对角线英寸数，通过勾股定理计算屏幕对角线像素数。
Screen Size(屏幕尺寸)：手机屏幕尺寸大小，如3英寸、4英寸、4.3英寸、5.7英寸，指的是对角线的长度。
DIP（device independent pixel）：即dip/dp，设备独立像素。 1px = 1dp density(由dpi决定)
Resolution(分辨率)：指手机屏幕垂直和水平方向上的像素个数。eg分辨率480 800，指该设备垂直方向有800个像素点，水平方向有480个像素点。
px(Pixel像素)：相同像素的ui，在不同分辨率的设备上效果不同。在小分辨率设备上会放大导致失真，大分辨率上被缩小。

Android Design里把主流设备的 dpi 归成了四个档次： 120 dpi、160 dpi、240 dpi、320 dpi ，具体见如下表格。
实际开发当中，我们经常需要对这几个尺寸进行相互转换（比如先在某个分辨率下完成设计，然后缩放到其他尺寸微调后输出），一般按照 dpi 之间的比例即 2:1.5:1:0.75 来给界面中的元素来进行尺寸定义。
也就是说如果以 160 dpi 作为基准的话，只要尺寸的 DP 是 4 的公倍数，XHDPI 下乘以 2，HDPI 下乘以 1.5，LDPI 下乘以 0.75 即可满足所有尺寸下都是整数 pixel 。但假设以 240 dpi 作为标准，那需要 DP 是 3 的公倍数，XHDPI 下乘以 1.333，MDPI 下乘以 0.666 ，LDPI 下除以 2。而以 LDPI 和 XHDPI 为基准就更复杂了。同时第一款Android设备（HTC的T-Mobile G1）是属于160dpi的。鉴于以上各种原因， 标准dpi=160

谷歌官方对dp的解释如下：
　　A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way.
　　The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a "medium" density screen. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp units to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels. You should always use dp units when defining your application’s UI, to ensure proper display of your UI on screens with different densities.

简单来说，以160dpi的设备为准，该设备上1dp = 1px；如果屏幕密度大，1dip代表的px就多，比如在320dpi的屏幕上，1dip=2px(即1dp代表2个像素)。在app开发时，最好用dp来做界面的布局，以保证适配不同屏幕密度的手机。

dp和px的换算公式：

我的理解，该公式表示px的数值等于dp的数值*（设备dpi/160）
注意，px、dp是单位，但density没单位。

applyDimension的源码如下，可参考：

android的尺寸众多，建议使用分辨率为 720x1280 的尺寸设计。这个尺寸 720x1280中显示完美，在 1080x1920 中看起来也比较清晰；切图后的图片文件大小也适中，应用的内存消耗也不会过高。

app启动图标为48*48dp，对应各dpi设备，图像资源像素如下：

| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|48 48px|72 72px|94 96px|144px 144px|

操作栏图标为32*32dp，对应各dpi设备，图像资源像素如下：其中图形区域尺寸是24*24dp，可参考平时ui切图会有部分留白。

| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|32 32px|48 48px|64 64px|96px 96px|

通知栏图标为24*24dp，对应各dpi设备，图标像素如下：

| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|24 24px|36 36px|48 48px|72px 72px|

某些场景需要用到小图标，大小应当是16*16dp，其中图形区域尺寸12*12dp。

| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|16 16px|24 24px|32 32px|48px 48px|