发布时间：2023-1-19 分类： 电商动态
好东西不能隐藏和蹲下。务必告诉所有人并与大家分享。这篇文章纯粹是个人收藏和经验的集合，不足之处希望大家指出我们希望与大家共同进步！前言对于刚刚进入市场的UI设计师来说，他们经常遇到一个基本问题，即设计移动APP时使用的尺寸。或者哪种屏幕尺寸最合适？有些学生已经花了很长时间不知道该怎么做，为了解决这个问题，今天小编为大家整理了ios手机的设计尺寸。 Ps: Android方朋友不用担心，下次编辑Android设计规格，大家静静等待！
我自己也是一名GUI设计师，所以我只是站在设计师的角度来告诉大家我所学到的东西。也许公司不同，每个人的设计习惯都不同，但毕竟它仍然可以提供帮助。还是声明：这只是我个人的使用习惯，只是一种工作方法，每个人在具体工作中都必须灵活。此外，技术更新速度非常快，我写的一些内容可能与您工程师使用的内容有所不同，所以您应该灵活使用它们〜
在开始介绍之前，请帮助我理清本文的内容，以便您更好地掌握和理解本文：
首先，ios所有接口尺寸和规格
下图显示了所有iphone型号的尺寸：
二，大小摘要
2.1开始图标大小输出列表（单位：px）
1024x1024 180x180 120x120 114x114 87x87 58x58 57x57 29x29
2.2指南页图像大小输出列表（在某些情况下，删除状态栏高度）
Iphone1/2/3（@ 1x）: 640x960px（640x920px）iphone4/4s（@ 2x）: 640x960px（640x920px）iphone5/5c/5s/SE（@ 2x）: 640x1136px（640x1096px）iphone6/7/6s/7s（ @ 2x）: 750x1334px（750x1294px）iphone6 plus/7 plus/6s plus/7s plus（@ 3x）: 1242x2208（1242x2148px）iphone6 plus/7 plus/6s plus/7s plus horizontal screen（@ 3x）: 2208x1242
第三，按钮
3.1图标按钮
选项卡栏中的按钮图标应具有两种状态：默认样式为1或1.5pt笔划宽度轮廓样式，以及活动填充状态。
注意：请勿向按钮添加任何额外效果，例如阴影，渐变等。按钮图标应在透明背景上以纯色绘制 - 图标的形状作为蒙版。每个交互元素都需要有足够的空间，以便用户轻松操作内容和控件。普通屏幕中的所有可点击按钮/图片，最小可点击区域为：44x44像素;可以在Retia屏幕/图像上单击的所有按钮，最小可点击区域为：88x88px（可以使用实际的小图标，并且空白像素打开以满足需求）;
3.2按钮状态和样式
按钮状态主要分为四种类型：正常，选中，突出显示和禁用。大多数按钮包含这四种状态。
按钮样式有三种类型：第一种是直角;第二个是圆角（圆角为8px）;第三个是圆角。
四，常用设计元素
4.1状态栏
包含最基本的系统信息，例如：电池，时间，载体，电池状态等。它与导航栏在视觉上相关联，并填充相同的背景。
4.2导航栏（导航栏）
导航栏通常位于屏幕顶部，位于状态栏下方。默认情况下，导航栏颜色为半透明，可以是实心，渐变或自定义位图，长页面上导航栏下方的背景模糊。
4.3工具栏
工具栏通常位于屏幕的底部，包含一些用于管理或操作当前视图内容的操作。与导航栏类似，也可以调整工具栏的背景填充。默认情况下，工具栏本身是半透明的，位于其下方。还有一个模糊的视图内容。
当特定视图需要三个以上的主要活动，但导航栏上显得凌乱时，建议使用工具栏（供参考）。
4.4搜索栏（搜索栏）
搜索栏默认有两种样式：突出显示和最小化。两种类型的搜索栏在功能上是相同的。
1.只要用户没有输入文本，占位符文本就会显示在搜索栏中。 2.输入搜索项后，占位符消失，搜索栏右侧将出现一个清除删除按钮。搜索栏可以使用提示 - 一个简短的句子来介绍搜索的上下文。例如，“输入标记名称，用户名”
4.5标签栏
标签栏通常位于屏幕的底部。默认情况下，导航栏颜色略微半透明，长页面中的选项卡栏下方也有模糊的背景。
通常，iphone最多可显示5个标签。一旦标签数量超过了可容纳的最大数量，更多标签将被隐藏在更多标签中，并且可以选择重新排列标签的顺序。
4.6查看（查看）
（a）表格视图（
表视图在单个列或多个列中显示小型或多个列表样式信息，并带有用于对内容进行分组的选项。根据您显示的数据类型，通常可以使用两种基本的表视图样式：
无格式：
团体风格：
组表视图允许用户对内容进行分组。每个组都可以有一个标题（最好用于描述类组的上下文）和页脚（用于帮助文本等）。分组表视图需要包含至少一个类组，每个类组必须至少包含一行内容。对于上述两种表视图类型，可以使用多种样式来显示数据，以便用户可以快速扫描，读取和正确调整内容。
默认值：
默认表格视图具有左对齐的可选图像和标题。
带字幕:
在每行标题下显示小字体的字幕，以进一步说明或简短描述。
值为:
数字表类型显示与行标题关联的特定值。与默认类型一样，每行都有一个左对齐的图片和标题。在这种类型中，值是右对齐的，通常使用比标题轻一点的文本颜色。
（b）活动视图）
活动视图用于显示特定任务。这些任务可以是系统默认任务，例如通过可用选项共享内容，或完全自定义的活动。在设计自定义任务按钮的图标时，您应该遵循一些活动状态和条形按钮图标的设计指南 - 实心填充，无效，以及透明背景。
活动：“活动”页面用于在可用操作列表中执行单个操作，并强制用户确认或取消活动。
在纵向模式下（以及尺寸较小的横向模式），活动作为按钮列表滑入并停留在屏幕的底部。在这种情况下，活动列表应具有“取消”按钮以关闭视图并在任何列表中执行“操作”。 （c）警报视图
提醒视图的目的是通知用户一些关键信息并有选择地强迫用户做出选择。
提醒视图通常包含标题文本（最好不超过一行），一个（纯消息提醒，例如'好'）或两个按钮（要求用户做出决定，例如'取消'或'好' ）。
（d）编辑菜单
用户可以使用“编辑”菜单执行复制，粘贴和剪切等操作。虽然您可以控制用户可以选择的操作，但编辑菜单的视觉外观已设置，除非您设计完全可自定义的编辑菜单，否则无法重新配置。
（e）弹出视图（弹出窗口）
当特定操作需要多个用户输入来继续时，弹出视图很有用。在水平方向上，弹出视图可以指向箭头下方的相关控件（如按钮）。弹出控件的背景透明度略有降低，显示其下方的模糊内容，就像iOS 7之后的许多其他UI元素一样。
弹出视图是一个非常强大的临时视图，可以包含导航栏，表视图，地图或Web视图等对象。随着弹出视图中包含的内容和元素的增加，其窗口也可以滚动。
五，字体
5.1字体选择
这是主流的字体设计方法：
5.2字体大小
APP中的文本大小设置与页面，页面级别和正在表达的内容的属性密切相关。 APP本身的级别，结构和属性都非常复杂，因此字体大小的长设置会让设计师感到困惑，最终使得APP页面上的字体不清晰，不均匀，不会美丽。今天，小编编写了不同大小的不同功能的字体大小，如下所示：
5.3UI规范命名常用词
正常，按下，选中，禁用，访问，悬停，btn，图标，登录，列表，列表），菜单，视图，面板，工作表，栏，状态栏，导航栏，tabbar，工具栏），开关，开关，收音机，复选框， bg，面具，面具
工作流
6.1项目流程
（1）需求沟通和评估
一个成熟的公司将汇集项目相关人员（产品，设计，开发，后台，测试，运营），产品经理将详细展示产品，包括产品定位，市场需求，主要卖点，产品性质，以及模块的具体功能，阐明应用程序的效果，属于哪种类型的应用程序，逻辑跳转演示;经过评估项目时间，各部门协调，项目启动;
（2）设计用户界面，创意策划
项目正式启动后，各部门召开了项目会议。设计部门开始设计UI（产品界面）和UE（用户体验），并对产品进行创意设计，形成初步渲染;
（3）DEMO显示，代码开发
设计部门最终确认了高保真的可视化地图，并完成了标签和切割，工程师们开始进入研发阶段;
（4）在线测试
经过工程师一段时间的研发，产品基本形成，测试正式启动。测试包括应用内容测试，性能测试，功能测试和可视化测试。通过测试并确认没有错误并开始在线打包和提交！
（5）推广和维护
成功推出后，该应用程序可以通过公司自身的运营和推广使应用程序脱颖而出。在操作和推广中，应用程序与时俱进，保持更新，并保持APP永远振动。具体来说，我们可以看一下APP开发标准流程信息图：
6.2 UI项目文件规范
（a）该项目已经建立，官方的说法是：没有规则就不可能形成一个圆圈。良好的规则和习惯将有助于我们更好地完成工作并节省时间，以便我们能够在后期组织过去的工作。
（b）设计草案一般设计草案采用iphone6（750 * 1334）作为参考尺寸，原因如下：1。从中间尺寸上/下调整时，界面调整最小，750px是适应640px和1242px的偏差不会太大; 2.iphone6 plus分辨率为1242 * 2208px（即iphone6的1.5倍），在很多情况下这两种尺寸可以直接成比例为1.5倍; 3.大屏幕时代仍然基于iPhone 5/iPhone 5s的小尺寸，它显然已经过时了。设计师的视角和想法将受到小屏幕的约束。总之，iphone 750 * 1334px是最适合基准尺寸的。
（c）页面标记1.标记文物：Mark Man，Parker 2.图标模块的宽度和高度，它们之间的间距; 3.导航，注释，文章内容，注释等的大小和颜色; 4.背景颜色，透明度; 5。按钮的颜色处于不同的状态;
（d）切片资源输出1.剪切图像伪影：cuttermanman2。所有切割图形尺寸均匀，格式为png_24; 3.考虑最小点击范围88 * 88px，如果按钮很小，周围空间切割为88 * 88px大小; 4.切片命名方法：iphone1/2/3：module _ category _ function _ status @ 1x.png iphone4/5/6/7：module _ category _ function _ status @ 2x.png iphone6 plus/6s plus/7 Plus/7s plus：Module_Category_Function_Status@3x.png加载关系：@ 1x（非Retina屏幕）：@ 2x：@ 3x=1: 2: 3示例：home_nav_menu_pre@2x.png5。需要启动页面还命名为iphone1/2/3：Default.png iphone4/4s：默认@ 2x .png Iphone5/SE：Default-568h@2x.png Iphone6/6s：LaunchImage-800-667h@2x.png Iphone6加/6s加：LaunchImage-800-Portrait-736h@3x.png
