`
CshBBrain
  • 浏览: 650057 次
  • 性别: Icon_minigender_1
  • 来自: 成都
博客专栏
B7d9bf34-126e-301f-819e-81f2615b5a2a
开源WebSocket服务...
浏览量:144900
Group-logo
HTML5移动开发
浏览量:137842
社区版块
存档分类
最新评论

iPhone UI 设计的一些标准尺寸1

 
阅读更多

转自:http://blog.163.com/prevBlogPerma.do?host=ab__&srl=19972617320111021103057168&mode=prev

 

iPhone开发中经常用到的控件尺寸大集合

Sizes of iPhone UI Elements


iPhone UI 设计的一些标准尺寸1 - 懒得喘气 - 懒得喘气的博客
Element Size (in points)
Window (including status bar) 320 x 480 pts
Status Bar
(How to hide the status bar)
20 pts
View inside window 
(visible status bar)
320 x 460
Navigation Bar 44 pts
Nav Bar Image /
Toolbar Image
up to 20 x 20 pts (transparent PNG)
Tab Bar 49 pts
Tab Bar Icon up to 30 x 30 pts (transparent PNGs)
Text Field 31 pts
Height of a view inside 
a navigation bar
416 pts
Height of a view inside 
a tab bar
411 pts
Height of a view inside 
a navbar and a tab bar
367 pts
Portrait Keyboard height 216 pts
Landscape Keyboard height 140 pts
Points vs. Pixels
The iPhone 4 introduced a high resolution display with twice the pixels of previous iPhones. However you don't have to modify your code to support high-res displays; the coordinate system goes by points rather than pixels, and the dimensions in points of the screen and all UI elements remain the same.
iOS 4 supports high resolution displays (like the iPhone 4 display) via the scale property on UIScreen, UIView, UIImage, and CALayer classes. If the object is displaying high-res content, its scale property is set to 2.0. Otherwise it defaults to 1.0.
All you need to do to support high-res displays is to provide @2x versions of the images in your project. See the checklist for updating to iOS4 or Apple documentation for Supporting High Resolution Screens for more info.
Adjusting Sizes
Click here to see how to adjust View Frames and Bounds.
Additional References
 

 

Table 8-1  Custom icons and images

Description

Size for iPhone and iPod touch (in pixels)

Size for iPad (in pixels)

Guidelines

Application icon (required for all apps)

57 x 57

114 x 114 (high resolution)

72 x 72

“Application Icons”

App Store icon (required for all apps)

512 x 512

512 x 512

“Application Icons”

Launch image (required for all apps)

320 x 480

640 x 960 (high resolution)

For portrait:

  • 768 x 1004

For landscape:

  • 1024 x 748

“Launch Images”

Small icon for Spotlight search results and Settings (recommended)

29 x 29

58 x 58 (high resolution)

50 x 50 for Spotlight search results

29 x 29 for Settings

“Small Icons”

Document icon (recommended for custom document types)

22 x 29

44 x 58 (high resolution)

64 x 64

320 x 320

“Document Icons”

Web clip icon (recommended for web apps and websites)

57 x 57

114 x 114 (high resolution)

72 x 72

“Web Clip Icons”

Toolbar and navigation bar icon (optional)

Approximately 20 x 20

Approximately 40 x 40 (high resolution)

Approximately 20 x 20

“Icons for Navigation Bars, Toolbars, and Tab Bars”

Tab bar icon (optional)

Approximately 30 x 30

Approximately 60 x 60 (high resolution)

Approximately 30 x 30

“Icons for Navigation Bars, Toolbars, and Tab Bars”

Newsstand icon for the App Store (requiredfor Newsstand apps)

At least 512 pixels on the longest edge

At least 512 pixels on the longest edge

“Newsstand Icons”

分享到:
评论

相关推荐

    Axure中使用的iPhone UI库

    1. **屏幕尺寸与分辨率**:iPhone UI库会提供不同型号的iPhone(如iPhone SE、iPhone 8、iPhone X系列等)的标准屏幕尺寸和分辨率,以便设计师可以根据目标设备进行适配。 2. **导航元素**:包括底部导航栏(Tab ...

    iPhone开发ui设计规格说明文档

    针对iOS平台,特别是iPhone的应用程序,一套规范化的UI设计标准至关重要。本文档旨在提供一套详细的iPhone开发UI设计规格说明,帮助开发者和设计师们创建美观且符合苹果设计原则的应用程序。 #### 二、图片格式与...

    UI设计尺寸规范方案最新最全UI设计规范方案标准.doc

    UI设计尺寸规范是移动应用和网站界面设计的重要指导原则,确保设计在不同设备上的一致性和可用性。此文档提供的是最新的、最全面的UI设计规范,特别关注iOS和Android两大主流操作系统。以下是对这些规范的详细解读:...

    APP UI设计规范

    ### APP UI设计规范详解 #### 一、引言 随着移动互联网的发展,用户对应用程序的体验要求越来越高。良好的用户界面(UI)设计不仅能够提升用户体验,还能有效提高产品的市场竞争力。本篇文章将详细介绍iOS和Android...

    UI尺寸规范

    iOS应用图标尺寸需要遵循特定的规则,通常会有两套图标尺寸,一套是1x(标准尺寸),另一套是2x(高分辨率)。在设计图标时,开发者需要根据应用商店的要求制作不同尺寸的图标,以满足不同屏幕密度的显示需求。 ...

    Elven iPhone App UI Kit

    综上所述,"Elven iPhone App UI Kit"是一个强大的设计资源,它可以帮助开发者和设计师快速构建出美观、一致且符合iOS标准的用户界面。通过充分利用这套工具,不仅可以提升产品的视觉吸引力,还能提高开发效率,使...

    ios UI设计

    这份"ios UI设计"资源包包含了非官方但极具参考价值的信息,涵盖了屏幕尺寸、按钮大小、字体大小以及图标大小等多个关键设计元素。下面我们将深入探讨这些知识点。 首先,屏幕尺寸是iOS设计的基础。苹果的移动设备...

    UI设计尺寸规范方案~最新最全UI设计规范方案.doc

    总的来说,UI设计尺寸规范旨在提供一个跨平台的标准化框架,确保在各种设备上都能提供清晰、美观且功能性的用户界面。设计师需要熟悉不同平台的具体要求,并根据这些规范来制作图标、布局和其他界面元素,以达到最佳...

    IPHONE iPhone 应用界面设计资源

    1. **尺寸与分辨率**:iPhone 3G采用了3.5英寸的屏幕,分辨率为320x480像素,设计师需要确保设计元素在这个尺寸下清晰可读,同时考虑到不同尺寸的设备(如iPhone 6/7/8, iPhone X系列等)的适配。 2. **Human ...

    仿iPhone音量调节UI

    仿iPhone音量调节UI是UI设计的一个实例,专注于音量控制功能的可视化呈现。 2. **滑动条(Slider)**:滑动条是UI中的常见控件,用户可以通过拖动滑块来选择一个数值范围内的值。在本案例中,滑动条用于调整音量大小...

    iOS_UI作品效果图,适合UI设计师使用的效果图。

    2. **响应式设计**:iOS设备有多种屏幕尺寸,因此UI设计需要考虑不同设备的适配,确保在iPhone和iPad上都有良好的视觉效果和交互体验。 3. **导航设计**:iOS常见的导航模式有Tab Bar、Navigation Controller、...

    手机APP-UI设计规范

    - **标准尺寸**:1280x720px。 - **状态栏高度**:50px。 - **导航栏高度**:96px。 - **标签栏高度**:96px。 - **功能键高度**:96px。 - **内容区域高度**:1038px。 ##### 3.2 常用尺寸 - **可触碰UI原件标准**...

    iOS_UI设计指南

    ### iOS UI设计指南知识点概述 #### 一、引言与理念 - **平台与交互设计原则**:优秀的iOS应用程序应当遵循iOS的人机交互指南,确保应用程序不仅美观而且实用。 - **简洁定义**:一个伟大的应用从清晰的目标和定义...

    关于IphoneX的规范

    使用标准的系统提供的 UI 元素,例如导航栏、表格和集合,能够自动适应 iPhone X 的新外形。背景材料需要延伸到显示器的边缘,并且 UI 元件需要被适当地插入和定位。 总结 在设计 iPhone X 的应用程序时,需要注意...

    iOS端UI设计文档

    iOS端UI设计文档主要涵盖了针对苹果设备的应用程序界面设计标准和指南。这类文档通常包含了设计准则、风格规范、排版规则以及具体的切图命名和输出标准等内容。这些规定旨在确保应用在不同版本更新时能够保持一致性...

    Balsamiq Mockups iphone 原型设计工具

    1. **屏幕尺寸和分辨率**:在为iPhone设计原型时,需考虑不同型号的屏幕尺寸,如iPhone SE、iPhone 8/8 Plus、iPhone X系列(XS、XS Max、XR)以及最新的iPhone 12系列。确保设计适应这些设备的分辨率,以提供一致的...

    iPhone用户界面设计PSD

    在IT行业中,用户界面设计(UI ...综上所述,"iPhone用户界面设计PSD"是为设计师提供的一个强大工具,可以帮助他们快速高效地创建出符合苹果设计标准的界面,同时也能激发创新思维,打造独特且引人入胜的用户体验。

    axure部件库---iOS和iPhone

    1. **适配性**:确保设计适用于不同版本的iOS系统,因为每个新版本可能会引入一些设计上的变化。 2. **可访问性**:考虑到不同的用户需求,设计应遵循Apple的可访问性指南,例如高对比度模式、字体大小调整等。 3. *...

    UI尺寸规范对照表 - 常用参考表对照表 - 脚本之家在线工具1

    在UI设计中,尺寸规范是非常重要的一个环节,它关乎到用户界面的美观度、可用性和一致性。F:尺寸规范对照表通常包含了一系列的标准尺寸,用于指导设计师在不同平台和设备上进行界面元素的设计,比如按钮、图标、文字...

    iphone移动商城,mint-ui移动开发.zip

    1. 响应式设计:组件具有良好的适应性和响应性,可以自适应不同屏幕尺寸的设备。 2. 高度可定制:通过修改CSS变量或使用scss源码,可以轻松定制主题和样式。 3. 易于使用:组件文档详细,API清晰,便于快速上手。 4....

Global site tag (gtag.js) - Google Analytics