文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

iOS 设计规范

注：列表舒适体验的最小高度是80px，最大高度视内容而定。 例： 微信高度：136px QQ高度：132px 自如高度110px 唯品会高度：106px。...在APP中字号范围一般在20-36之间（@2x）。iOS 11中出现了大标题的设计，字号还是要根据产品属性酌情设定。 36px： 用在少数标题。例：导航标题、分类名称等。...32px： 用在少数标题。例：店铺标题等。 30px： 用在较为重要的文字或操作按钮。例：列表性标题分类名称等。 28px： 用于段落文字。例：列表性商品标题等。 26px： 用于段落文字。...五、文字设计规范 iOS 主流设备的分辨率分别是： 640x1136px：【（@2x）iPhone SE 】 750 x1134px：【（@2x）iPhone6s/7/8 】 1242x2208px：【...（@3x）iPhone 6s/7/8 Plus 】 1125x2436px：【（@3x）iPhone X 】 750x1624px：【（@2x）iPhone X 】 注： 基准设计尺寸：750px x

1.7K20
您找到你想要的搜索结果了吗？
是的
没有找到

16款值得一用的iPhone线框图模板 (PSD & Sketch）

尽管iPhone 6已不是目前主流的iPhone机型，但仍旧在手机市场中占有很大一部分份额。所以设计师在设计应用程序时，仍需要考虑到适配iPhone6的设计模型。...同样是一款iPhone 7的打印版线框图。在封面图中可以看到打印版线框图的正确用法。根据设计师制作的导航栏以及键盘的高度标记，使用者不必再花心思和时间测量项目高度以及各组件高度在线框图中应占的比例。...这款iPhone线框模板是原型设计工具Mockplus中自带的线框模板，添加了顶部状态栏和底部home按钮。预览时更加形象化。...这款设计适用于快速的iPhone X线框和原型设计。设计师在项目简介中加入了一些简单的iOS 11 UI指南，用于在纸上绘制一些想法。...这款iPhone X 线框模板在Sketchappsources达到了7K+的下载量。足以见得目前iPhone X的受欢迎程度以及iPhone X应用的巨大市场潜力。

1.9K20

IOS开发之尺寸

2或者除以3在进行赋值给frame，这其中的原因是因为标注一般都是按px格式给的，但是iOS底层绘制的时候是按照pt为单位进行绘制，这两个的区别在于： px就是表示pixel，像素，是屏幕上显示数据的最基本的点...在同样的逻辑坐标系下（320x480）：     1 point = scale*pixel（在iPhone4~6中，缩放因子scale=2；在iPhone6+中，缩放因子scale=3）。    ...iPhone3GS时代，我们为一个应用提供图标（或按钮提供贴图），只需要icon.png。针对现在的iPhone4~6 Retina显示屏，需要制作额外的@2x高分辨率版本。    ...例如在iPhone3GS中，scale=1，用的图标是50x50pixel（logicalimage.size=50x50point）；在iPhone4~6中，scale=2，则需要100×100pixel...（2）按高度适配 在同样的宽度下，iPhone4(s)的屏高比iPhone5(s)低，若纵向排版紧张，可以iPhone5(s)为基准，按高度适配：         fitScreenHeight= height

2.9K40

iPhone屏幕尺寸、分辨率及适配

在同样的逻辑坐标系下（320×480）： 1 point = scale*pixel（在iPhone4~6中，缩放因子scale=2；在iPhone6+中，缩放因子scale=3）。...iPhone3GS时代，我们为一个应用提供图标（或按钮提供贴图），只需要icon.png。针对现在的iPhone4~6 Retina显示屏，需要制作额外的@2x高分辨率版本。...例如在iPhone3GS中，scale=1，用的图标是50x50pixel（logicalimage.size=50x50point）；在iPhone4~6中，scale=2，则需要100×100pixel...从分辨率的角度来看，除了需要提供LaunchImage这种满屏图，其他基本沿用二倍图（@2x）；从屏幕尺寸角度来看，需要对纵向排版略加调整。...（2）按高度适配 在同样的宽度下，iPhone4(s)的屏高比iPhone5(s)低，若纵向排版紧张，可以iPhone5(s)为基准，按高度适配： fitScreenHeight= height

5.8K20

【总结】移动应用界面设计的尺寸设置及规范

3、设计稿基本元素的尺寸设置 为了适应多分辨率的手机，理想的方式是为每种分辨率做一套设计稿，包括所用到的icon、设计稿标注等。但在实际开发中，这种方法耗时耗力。所以通常会选择折中的方法。...3、基本元素的尺寸设置 iPhone的APP界面一般由四个元素组成，分别是：状态栏、导航栏、主菜单栏以及中间的内容区域。...-40-88-98 以上尺寸适用于 iPhone 4、4S，iPhone5/5s 的 640×11136 的尺寸，其实就是中间的内容区域高度增加到：910 px，其他尺寸也同上。...例外情况是两个标题样式，在最小、小和中等设置时都使用相同字体大小、行间距和字间距。 – 在最小的三种文字大小中，字间距相对宽阔；在最大的三种文字大小中，字间距相对紧密。...– 标题和正文样式使用一样的字体大小。为了将其和正文样式区分，标题样式使用加粗效果。 – 导航控制器中的文字使用和大号的正文样式文字大小（明确来说，是 34 点）。

3.2K40

App项目实战之路(四):UI篇

选中之后，在界面右边Inspector面板会列举出很多可供选择的尺寸，你可根据需要选定你想设计的尺寸，如下图所示。我的界面Artboard就是选了iPhone 6那个尺寸。...另外，也可以自己在画布中拖动出喜欢的大小。 知道页面怎么添加之后，又发现，状态栏去哪找？经人提醒，才知道原来有模板这东西。...举个例子，App很多页面的标题栏基本都一样的，标题栏的宽高、背景、控件等都一样，不同的可能就是需要更改标题。这种情况下，用Symbol就很合适了。...因为Symbol的这种特性，它就很适合用来定义如状态栏、标题栏、标签栏、按钮、头像等多处使用的通用组件。 在制作过程中，发现有几个快捷键很方便。...切图非常简单，选中你想导出的图层，然后在Inspector面板最底部点击加号添加你想导出的倍数，继续点加号可以增加多个不同倍数的导出项，最后点击下面的[Export+图层名]的按钮，再给文件改名和修改文件存放位置即可

1.2K30

移动应用界面设计的尺寸规范「建议收藏」

3、基本元素的尺寸设置 iPhone的APP界面一般由四个元素组成，分别是：状态栏、导航栏、主菜单栏以及中间的内容区域。...，其高度为：88 px 主菜单栏：类似于页面的主菜单，提供整个应用的分类内容的快速跳转，其高度为：98 px 内容区域：展示应用提供的相应内容，整个应用中布局变更最为频繁的，其高度为：734 px=...960-40-88-98 以上尺寸适用于 iPhone4、4S，iPhone5/5s 的 640×11136 的尺寸，其实就是中间的内容区域高度增加到：910 px，其他尺寸也同上。...例外情况是两个标题样式，在最小、小和中等设置时都使用相同字体大小、行间距和字间距。 – 在最小的三种文字大小中，字间距相对宽阔；在最大的三种文字大小中，字间距相对紧密。...– 标题和正文样式使用一样的字体大小。为了将其和正文样式区分，标题样式使用加粗效果。 – 导航控制器中的文字使用和大号的正文样式文字大小（明确来说，是 34 点）。

4K20

房上的猫：HTML5基础

Name"文本框中输入HTML的文件名,在"Kind"下拉列表框中选择"HTML 5 file"选项,单击"OK"按钮即可创建一个页面的模板   3)在body元素和title元素中添加网页的内容   ...4)网页内容添加完毕后,鼠标移动到WebStorm编辑器的右上方,会出现几个常见的浏览器图标,单击其中一个图标即可打开该页面   注:使用某浏览器测试,前提是本机上安装了该浏览器   5)在浏览器中显示效果...,同样适用于中文和英文的页面.和gb2312编码相比,国际通用性更好    在保存文件时编码方式一定要与HTML5y页面中的标签中的编码方式保持一致,否则会出现乱码   2.搜索关键字和内容描述信息...使用WebStorm工具自动生成的HTML基本结构中标签里有个属性lang="en",它的意思是表示本页面是英文的.浏览器会提示是否需要翻译 五.网页的基本标签  1.标题标签:   1)标题标签表示一段文字的标题和主题...    3)title属性可以提供额外的提示或帮助信息,当鼠标移至图片上时显示提示信息     4)width和height两个属性分别表示图片的宽度和高度,如果不设置那么图片默认显示原始大小   在实际的网站开发中

1.6K120

iOS14开发-UIView

子 View 的顺序和子 View 返回的数组中的位置有关（storyboard 中左侧的树形结构图中的先后顺序）。...数据联动 在某一列滚动的时候，重新设置联动列的显示数据，然后进行刷新操作。...直接在 storyboard 中布局，不需要使用数据源方法，但如果需要使用到代理方法，仍然需要在控制器中实现相应的方法。 适用于基本不需要动态修改、布局固定的页面，如个人中心、设置等。...UITableViewDiffableDataSource 在 iOS 13 中引入了新的 API — Diffable Data Source，它不仅能够驱动 UITableView 和 UICollectionView...NSCollectionLayoutAnchor 在 Item 中，可能需要给其加上小红点或者未读消息数等附加视图，在 UICollectionViewCompositionalLayout 中，可以通过

11.8K10

「技巧」如何在图片搜索中排名更高

SEO搜索引擎优化不仅仅是优化页面内容在百度搜索结果页面中的排名，其实也还有很多地方是可以优化，获取排名，从而获取流量。...网络视频内容日益占据主导地位，为通过优化视频和图片来增加网站的搜索流量也带来了新的机遇。 优化网站图片可以让网站通过图片搜索获得额外的机会，一个好的标题或一些醒目的图片可以有效地吸引访问者到网站。...例如，如果图像是一个人的头像，那么他们的名字就足以用于标题文本，因为它告诉人们和搜索引擎图像是什么，在替代文本中不需要额外的细节。标题属性很重要，但可千万别堆砌关键词哦！...与页面URL一起，页面的域名权威也会影响搜索引擎图片搜索中的图片效果。如果某个域名在提供质量和相关内容方面已经有了口碑，那么您的图片在搜索中的效果会更好。...最近，发生了iPhone手机里面的照片搜索功能的新闻，有iPhone手机的同学可以试试，直接在搜索里面输入相关的关键词，如：太阳，它会自动识别图片中的内容。

847110

这15个HTMLCSS错误我不信你没犯过(网站规范)

他们在添加调整大小时不会考虑：没有表单可访问性变差，用户无法轻松输入数据。 如果您想要限制文本区域的大小，您可以使用最小宽度、最大宽度、最小高度和最大高度属性。...但是，当我们使它更多，我们失去了标题和关闭按钮。 我们可以使用自动边距修复它，因为它使用额外的空间来对齐元素，不会导致溢出。看看元素是如何不再丢失的。...如果你不这样做，你依靠你设置的宽度和高度属性在CSS你的界面将被打破。 您的CSS可能未加载，此时，图标将尝试填充所有可用空间。所以错误发生了。只需设置宽度和高度属性，即可轻松入睡。...当您这样做时，您忘记了标题可以帮助屏幕阅读器的用户更快地在网页上导航。如果你有标题太多，它阻止人们。因此，在需要的地方使用标题。...在规范中，div 元素有以下描述： div元素根本没有特殊意义。它代表它的孩子。它可以用于类、朗和标题属性，以标记一组连续元素常见的语义。

3.2K31

ios学习7_iPhone屏幕尺寸、分辨率及适配

在同样的逻辑坐标系下（320×480）： 1 point = scale*pixel（在iPhone4~6中，缩放因子scale=2；在iPhone6+中，缩放因子scale=3）。...iPhone3GS时代，我们为一个应用提供图标（或按钮提供贴图），只需要icon.png。针对现在的iPhone4~6 Retina显示屏，需要制作额外的@2x高分辨率版本。...例如在iPhone3GS中，scale=1，用的图标是50x50pixel（logicalimage.size=50x50point）；在iPhone4~6中，scale=2，则需要100×100pixel...从分辨率的角度来看，除了需要提供LaunchImage这种满屏图，其他基本沿用二倍图（@2x）；从屏幕尺寸角度来看，需要对纵向排版略加调整。...（2）按高度适配 在同样的宽度下，iPhone4(s)的屏高比iPhone5(s)低，若纵向排版紧张，可以iPhone5(s)为基准，按高度适配： fitScreenHeight= height

2.4K20

关于刘海打理这种事儿，美团点评的iOS工程师早就有经验了，不信你看！

图1.4 “我的Tab”表现 在图1.1中乍一看表现还不错，可是在图1.2中，下拉刷新之后，我们的导航栏还是被刘海挡住了。搜索也中枪，搜索首页没有办法取消，“热门搜索区域”也多出来一块儿空白。...图2.4 iPhone X 的显示区域 Status Bar iPhone X 上的 StatusBar 高度比之前的 iPhone 高一些，也就是说，我们如果写死20pt高度的 frame 布局...在 iPhone X 上，通过打印 [[UIApplication sharedApplication] statusBarFrame] 可以看到，高度是44pt。 ?...iPhone X 为用户在垂直空间上提供了更多展示余地，且状态栏中也包含了用户需要知道的信息，除非能通过隐藏状态栏带给用户额外的价值，否则苹果建议大家将状态栏还给用户。"...另外还有一点，用户在使用 iPhone X 打电话的时候，StatusBar 的高度也不会发生变化了。

2.1K70

ios学习7_iPhone屏幕尺寸、分辨率及适配

在同样的逻辑坐标系下（320x480）： 1 point = scale*pixel（在iPhone4~6中，缩放因子scale=2；在iPhone6+中，缩放因子scale=3）。...iPhone3GS时代，我们为一个应用提供图标（或按钮提供贴图），只需要icon.png。针对现在的iPhone4~6 Retina显示屏，需要制作额外的@2x高分辨率版本。...例如在iPhone3GS中，scale=1，用的图标是50x50pixel（logicalimage.size=50x50point）；在iPhone4~6中，scale=2，则需要100×100pixel...（2）按高度适配 在同样的宽度下，iPhone4(s)的屏高比iPhone5(s)低，若纵向排版紧张，可以iPhone5(s)为基准，按高度适配： fitScreenHeight= height...*(SCREEN_HEIGHT/568) 共有iPhone3/4、5、6、6+四组高度，在iPhone3/4下将按比例纵向缩小，在iPhone6、6+下将按比例纵向放大。

88350

什么是API网关模式

您需要开发产品详细信息用户界面的多个版本： 用于桌面和移动浏览器的基于HTML5 / JavaScript的UI - HTML由服务器端Web应用程序生成 原生Android和iPhone客户端 - 这些客户端通过...产品详细信息UI可以显示有关产品的大量信息： 有关该书的基本信息，如标题，作者，价格等。...例如， 产品信息服务 - 产品的基本信息，如标题，作者 定价服务 - 产品价格 订购服务 - 产品的购买历史 库存服务 - 产品可用性 审核服务 - 客户评论.........这意味着本机移动客户端使用的网络与服务器端Web应用程序使用的LAN具有非常不同的性能特征。服务器端Web应用程序可以对后端服务发出多个请求，而不会影响用户体验，因为移动客户端只能做一些。...由于通过API网关额外的网络跳跃而增加了响应时间 - 但是，对于大多数应用程序而言，额外往返的成本是微不足道的。

64510
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券