「UCD」移动端UI设计尺寸规范详解

简介: 【7月更文挑战第2天】

移动端UI设计尺寸规范对于确保应用程序在不同设备上的兼容性和用户体验至关重要。

一、iPhone UI 设计尺寸规范

  • 设计尺寸根据iPhone型号变化,例如:
    • iPhone 5/5s/SE: 320x568dp
    • iPhone 6/6s/7/8: 375x667dp
    • iPhone 6/6s/7/8 Plus: 414x736dp
    • iPhone XR/11: 414x896dp
    • iPhone XS Max/11 Pro Max: 414x896dp
  • 推荐使用响应式设计或为不同尺寸设计多个页面。

二、安卓 UI 设计尺寸规范

  • 屏幕尺寸多样化,例如:
    • 安卓 4.0: 360x640dp
    • 安卓 4.5-5.0: 360x640dp
    • 安卓 5.1-5.5: 360x640dp
    • 安卓 6.2-6.5: 411x731dp
    • 安卓 8.5-9.0: 411x731dp

三、通用 UI 设计尺寸规范

  • 点击区域最小尺寸:48x48dp。
  • 图片尺寸比例推荐:16:9、4:3、3:2、1:1、黄金比例1:0.618。
  • 字体大小推荐:24px、28px、32px、36px等偶数大小,最小字号20px。
  • 全局边距统一规范,如20px、24px、30px等。

四、UI基础概念

  • 理解物理像素、逻辑像素和倍率的重要性。

五、设计适配

  • 以750x1334px为模版,适配不同分辨率iOS设备。

六、切图规范

  • 图标切图为PNG格式,保证颜色和细节。

七、设计稿标注

  • 标注内容包括字号大小、颜色、间距等。

参考案例

  1. iPhone 设备适配案例:设计基准尺寸为375x667dp,适配时调整布局元素间距以适应更大屏幕。
  2. 安卓设备适配案例:设计响应式布局,适应多种屏幕尺寸,如360x640dp至411x731dp。
  3. 全局边距和卡片间距案例:社交媒体Feed页面,全局边距20px,卡片间距16px。
  4. 字体大小和行间距应用案例:电子书阅读应用,正文字体24px,行间距32px。
  5. 图标和按钮尺寸规范案例:图标尺寸48x48dp,设计不同状态图标。
  6. 图片比例应用案例:图片分享应用,提供16:9、4:3等比例选项。
  7. 设计适配实际操作案例:旅游应用首页适配iPhone X,状态栏88px,底部预留68px。

访问链接

  1. 移动端 UI 设计尺寸规范整理 - 即时设计网站提供了移动端UI设计尺寸规范的详细总结,包括iPhone和安卓的设计尺寸规范,以及通用的UI设计尺寸规范。

设计师可以更清晰地理解移动端UI设计尺寸规范的重要性,并通过具体案例加深认识,确保设计在不同设备上均能提供优秀的用户体验。

相关文章
|
15天前
|
开发者
移动端UI名词 - AxureMost
该文档介绍了多种UI组件的分类和功能,包括按钮、图标、宫格等基础组件,头像、徽标、轮播图等数据展示类组件,复选框、日期选择器、输入框等数据输入类组件,以及对话框、加载、消息通知等反馈类组件。此外,还涵盖了下拉菜单、导航栏、分页器等导航类组件。每个组件都有具体的应用场景和作用,帮助开发者快速构建界面。
|
3月前
|
Java 测试技术 持续交付
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
本文重点讲解如何搭建App自动化测试框架的思路,而非完整源码。主要内容包括实现目的、框架设计、环境依赖和框架的主要组成部分。适用于初学者,旨在帮助其快速掌握App自动化测试的基本技能。文中详细介绍了从需求分析到技术栈选择,再到具体模块的封装与实现,包括登录、截图、日志、测试报告和邮件服务等。同时提供了运行效果的展示,便于理解和实践。
190 4
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
|
9月前
【实用】一个移动端简单的UI弹窗组件,虽算不上高大上,但至少耐看
【实用】一个移动端简单的UI弹窗组件,虽算不上高大上,但至少耐看
|
9月前
|
JSON 小程序 前端开发
小程序使用npm以及常用的移动端UI插件
小程序使用npm以及常用的移动端UI插件
67 0
|
9月前
|
前端开发
element-ui组件DatePicker日期选择器移动端兼容
element-ui组件DatePicker日期选择器移动端兼容
element-ui组件DatePicker日期选择器移动端兼容
|
11天前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
141 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
2月前
|
移动开发 前端开发 Java
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
JavaFX是Java的下一代图形用户界面工具包。JavaFX是一组图形和媒体API,我们可以用它们来创建和部署富客户端应用程序。 JavaFX允许开发人员快速构建丰富的跨平台应用程序,允许开发人员在单个编程接口中组合图形,动画和UI控件。本文详细介绍了JavaFx的常见用法,相信读完本教程你一定有所收获!
1432 1
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
|
2月前
|
XML 搜索推荐 前端开发
安卓开发中的自定义视图:打造个性化UI组件
在安卓应用开发中,自定义视图是一种强大的工具,它允许开发者创造独一无二的用户界面元素,从而提升应用的外观和用户体验。本文将通过一个简单的自定义视图示例,引导你了解如何在安卓项目中实现自定义组件,并探讨其背后的技术原理。我们将从基础的View类讲起,逐步深入到绘图、事件处理以及性能优化等方面。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的见解和技巧。
|
3月前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
3月前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发:掌握ArkUI(包括Java UI和JS UI)进行界面开发
【10月更文挑战第22天】随着科技发展,操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI,探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发,性能较高;JS UI适合快速开发简单界面,跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
197 8

热门文章

最新文章