2024年2月21日发(作者：)

APP尺寸规范

篇一：app界面设计的规则

移动端界面设计之尺寸篇

Ios

1. 尺寸及分辨率

Iphone界面尺寸：320x480、640x960、640x1136、ipad界面尺寸：、6（单位都是像素，分辨率和网页一样，基本只要72ppi）

一般用640x960或者640x1136尺寸设计。

Ps：作图最好用形状工具来画的，这样方便后期切图或者尺寸变化。

2. 界面基本元素组成

Iphone的app界面一般由四个元素组成，分别是：状态栏，导航栏，主菜单栏（页脚）以及中间区域。、

这里用的是640x960的尺寸设计：

状态栏：即使信号、运营商、电量等显示手机状态的区域，其高度为：40px

导航栏：显示当前界面的名称，包含相应功能或者页面间的跳转按钮，其高度为：88px 主菜单栏（页脚）：类似页面的主菜单，提供整个页面的分类内容快速跳转，其高度为：98px

内容区域：展示应用提供的相应内容，整个应用中布局更最为频繁的，其高度为：734px（960-40-88-98=734）

Android

3. 尺寸及分辨率

Android界面尺寸：480x800、720x1280、0（单位都是像素，分辨率和网页一样，基本只要72ppi）

一般用720x1280尺寸设计，这个尺寸在720x1280中显示完美，在0中看起来清晰；切图后的图片文件大小也适中，应用的内存消耗也不会过高。

4. 界面基本元素组成

Android的app界面也是由四个元素组成，分别是：状态栏，导航栏，主菜单栏（页脚）以及中间区域。、

这里用的是720x1080的尺寸设计：

篇二：设计 —— 字号规范

设计 —— 字号规范

主体：

导航主标题：34/36px

苹果标题：34px （ps：有些用36px）

正文：32px-34px

副文：28px-24px

最小：20px

正文：34px，会选择性的选用苹方粗体

列表形式、工具化

正文：32px

(PS：由于屏幕使用变大正文大小趋势变成了34px)

副文：28px

时间：24px

26px字号还用于划分类别的提示文案，因为这样的文字希望用户阅读，但不抢过主列表信息的引导。

大按钮

正文：34px/36px（PS：拉开按钮的层次，同时加强按钮引导性，用了稍大号的）

PS：在选用字体大小的时候一定要选择偶数的字号。因为在开发界面的时候，字号大小换算是要除以二的

网页设计 —— 字号规范

主体：

网页：12px

正文：14px/16px

大号：18px、20px、26px、30px

页面设计 —— 常用(转 载于: 小 龙 文档网:app尺寸规范)颜色

字体：

主文：深黑色（） 副文：深灰色（） 提示文案：灰色（）

背景、分隔线：

背景颜色：#EEEEEE

分隔线：#E5E5E5

分隔线深：#CCCCCC

篇三：app设计规范

一、设计理念

1.精于心，简于形

通过精心的设计，使流程外观简约化，传达先进的技术给用户提供便捷简单的使用体验

二、设计规范

我们有统一的设计规范，用来规范App在外观展示上的规则，用来解决设计过程中遇到的问题。好处：

（1）使用户使用起来能够建立起精确的心理模型，使用熟练了一个界面后，切换到另外一个界面能够很轻松的推测出各种功能，语句理解也不需要费神理解.（2）降低培训、支持成本，支持人员不会很费力逐个指导。（3）给用户统一感觉，不觉得混乱，心情愉快，满意度增加

1. 逻辑性

设计为内容服务，根据逻辑关系通过视觉表现引导用户使用。

例如：app的标题和导航条通过字体的颜色大小突出重要度。

2. 扩展性

采取模块化设计的可扩展性，减少修改和再开发的成本

例如：左右模块尺寸的统一可方便增加新的模块内容。

3. 统一性

用统一的视觉规范，变化不能超越统一的尺度，个性化内容要有统一风格的继承

例如：无论每个功能模块如何追求个性，但不能脱离App的整体风格，要有继承和延续保持从属关系。

三、遵循视觉设计原理，确定设计方案

1.例如以下原理：

App中宽度、位置、边距为不可变数据。

App中背景白色为常用色值，对于特殊功能模块可根据特殊要求变更色彩或者使用背景图。

2.白色：雪花，纯静，清白，和平，轻盈, 纯洁、天真、洁净、真理

黑色：夜晚，煤碳，能力，稳定，拘谨，可靠，能力，精致

灰色：智能，成熟，财富，尊严，贡献, 抑制

红色：胜利 激情 爱 力 精力 性别 热情、浪漫

红色在很多文化中代表的是停止的讯号，用于警告或禁止一些动作

黄色：明亮、光辉、黄金 收获 改革

紫色 正面：懦弱，叛逆，妒忌，危机

创造、谜、忠诚、神秘、稀有

绿色：植物，自然，春天，肥沃，希望, 安全 自然、稳定、成长

在北美文化中，绿色代表的是「行」，与环保意识有关，也经常被连结到有关财政方面的事物。

蓝色：天空，海洋，精神性，定度，和平, 个体 忠诚、安全、保守、宁静 选择颜色的时候尽量选择以上这些功能性的色系

3. 色彩构成（Interaction of color），可以理解为色彩的作用，是在色彩科学体系的基础上，研究符合人们知觉和心理原则的配色。配色有三类要素：光学要素（明度、色相、纯度），存在条件（面积、形状、肌理、位置），心理因素（冷暖、进退、轻重、软硬、朴素华丽），设计的时候运用逻辑思维选择合适的色彩搭配，产生恰当的色彩构成。最优秀的配色范本是自然界里的配色，我们观察自然界里的配色，通过理性的提炼最终获得我们所需要的东西。

4.小面积用强色，大面积用弱色

面积调和的原则是：色彩面积的大小可以改变对比效果，对比色双方面积越大，调和效果越弱；反之，双方面积越小，调和效果越强。对比双方面积均等，调和效果越弱；对比双方面积相差越大；调和效果越强。只有恰当的面积比才能取得最好的视觉平衡，形成最好的视觉效果。