移动端APP设计规范

本文详细介绍了使用PS创建适合iPhone6plus尺寸界面的设计规范,包括画板尺寸、字体选择、状态栏、导航栏、标签栏布局及常用元素尺寸等细节。同时,提供了正文、注释和标题的字号、行距、颜色设置指南,以及背景色、文字色和边框色的统一风格。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一般用PS建立画板的尺寸为:750x1334px,原始375x667pt,@2x(iPhone 6 plus的尺寸是1242*2208,原始414x736pt,@3x)

字体用:华文细黑、思源黑体、Helvetica

头部状态栏(电量条)高度:40px,文字22px

头部导航栏高度:88px,左右留空30px,文字32px,图标尺寸44px。

底部标签栏高度:98px,文字20px,图标尺寸50px。

内容区域高度:1334-40-88-98 = 1108px

常用可点击区域的高度:88px;单行文字的背景框的高度:88px,双行则为:176px,三行则为:264px;
常用间距:亲密距离:20px;疏远距离:30px,其它距离:10px,44px等;

字号:正文28px,行距38px,颜色#666;
注释:24px,行距34px,颜色#999;
标题:30px,行距40px,颜色#222。

背景浅灰色#f2f2f2,文字深黑色#323232,文字浅灰色#989898,边框色深灰#CCCCCC,边框浅灰色#C3C3C3

正文列表:单行高度88px,图标大小58px;多行高度168px,图标大小:128px;

这里写图片描述

这里写图片描述

这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述

Android UI设计规范文档 1 设计原则 2 风格 2.1 设备和显示 Android 驱动了数百万的手机、平板和其它设备,兼容了各种屏幕宽度和比例。利用 Android 灵活的布局系统,您可以创造出从平板到手机都看起来很优雅的应用。 灵活 对您的布局进行放大、缩小或者裁减以适应不同的高度和宽度。 优化布局 在较大的设备上,善于利用大屏幕的优势。设计混合的视图以显示更多的内容,提供更简便的导航。 适用于各种设备 为不同的像素密度 (DPI) 提供不同资源 (比如drawable) ,使您的应用在任何设备上都看起来很棒。 策略 那么您应当如何开始为多种屏幕设计呢?一种方法是以一个基本的标准 (中等尺寸,MDPI) 开始,之后将其缩放到不同的尺寸。另一种方法是从最大的屏幕尺寸开始,之后为小屏幕去掉一些 UI 元素。 2.2 触摸响应 使用颜色和高亮效果来响应用户的触摸,突出显示手势的效果以及表明哪些操作是可用的。 任何时候,每当用户触摸您应用中的可操作区域,都应当给予视觉上的响应。这样可以使得用户了解他触摸了啥,并且表明您的应用一直在工作。 按钮的状态 大多数的 Android UI 元素都有内置的触摸反馈效果,包括表明元素是否可以操作的视觉效果。 交流 当您的对象需要对复杂的手势做出响应时,应当帮助用户了解该操作的结果将会是什么。例如,当您在 Android 系统“最近的应用”界面左右滑动一个缩略图的时候,它会开始变淡。这样做就使得用户明白滑动可以移除这条记录。 边界 当用户试图滑出可滑动区域的范围时,应当在边界提供视觉的反馈。例如,如果用户试图从主屏幕的第一屏向左滑动时,屏幕就会向右倾斜表明不能再往这边移动了。许多 Android 的可滑动 UI 类 (例如列表 lists 和网格列表 grid lists) 都已经内置了边界反馈。如果您需要自定义界面时,记住要提供边界反馈哦。 2.3 度量单位和网格 总的来说,可触摸控件都是以 48dp 为单位的。 为什么是 48dp? 一般情况下,48dp 在设备上的物理大小是 9mm (会有一些浮动)。这是触摸控件的推荐大小 (范围7-10mm) ,用户用手指触摸起来比较容易、且准确。 如果您设计的 UI 元素都至少有 48dp 的高度和宽度,那么可以保证:  您设计的元素在任何屏幕上显示时,都不会小于推荐的最低值 7mm。  你可以在信息密度和界面的可操控性之间得到较好的平衡。 注意留白 界面元素之间的留白应当是 8dp。 一个例子 - Examples
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值