反馈确认操作并显示结果以使人们了解情况。内置 iOS 应用程序提供可感知的反馈来响应每个用户操作。交互元素在点击时会突出显示，进度指示器传达长时间运行的操作的状态，动画和声音有助于阐明操作结果。

隐喻

当应用程序的虚拟对象和动作是植根于现实世界或数字世界的隐喻时，人们学习得更快。隐喻在 iOS 中效果很好，因为人们可以与屏幕进行物理交互。他们将视线移开以隐藏下面的东西。他们拖动和滑动内容。它们切换开关、移动滑块并滚动选择器值。他们甚至浏览书籍和杂志的页面。

了解互联网产品设计的尺寸规格和分辨率是在线界面设计的第一步。然而，市场上的型号有很多，那么该怎么办呢？

作为设计师，必须掌握常见的尺寸和距离，很好地理解和适应设计，才能解决不同手机屏幕之间的布局规范和转换关系。

常见的手机屏幕设计尺寸如下：

DPI和PPI的定义（来自百度百科）

DPI原本是打印中的一种计量单位，意思是每英寸可以打印的点数（Dot Per Inch）。然而，随着数字输入输出设备的飞速发展，大多数人也以DPI来表示数字图像的分辨率，但更严谨的人可能会注意到，打印时计算出的网点（Dot）与电脑显示器的显示像素（ ）不一样，所以更多专业人士会用PPI（Per Inch）来表示数字图像的分辨率来区分两者。

我们通常所说的打印机分辨率DPI，是指打印机在最高分辨率模式下每英寸可以打印的“理论墨点数量”。

每英寸也称为像素密度，表示每英寸的像素数。因此，PPI值越高，显示器显示图像的密度就越高。当然，显示的密度越高，真实感水平就越高。

每英寸是像素的密度单位。就像PPI值越高，画面的细节就会越丰富一样。因此，数码相机拍摄的照片可能会因品牌或生产时间不同而有所不同。常见的有、、、，默认为这么多（A710采用）。

DPI（每英寸点数）是指输出分辨率。对于输出设备来说，一般激光打印机的输出分辨率为-，打印照排机可以达到-，普通打印一般在-之间。

例如6、7、8的物理屏幕尺寸为4.7英寸。高清显示，手机屏幕尺寸为： 倍，全sRGB标准。

6 Plus，5.5英寸（对角线）LED背光宽屏显示屏，采用IPS技术，1920×1080像素分辨率，全sRGB标准，如下图所示。

分辨率、像素和物理屏幕尺寸

X尺寸为5.8英寸。手机主屏分辨率为750×1624 PX。整个屏幕的像素大小增加了一倍：375 x 812。

对于 6，将数字翻倍：375 乘以 667。

PC端网页设计大小为：1920倍。

像素密度是指屏幕每英寸的像素数量。像素密度越大，显示的细节越丰富。

像素密度=√{(长度像素数^2+宽度像素数^2)}/屏幕尺寸。

屏幕分辨率是指垂直和水平方向的像素数量，单位为px。屏幕分辨率 确定计算机屏幕上显示多少信息的设置，以水平和垂直像素测量。对于相同尺寸的屏幕，当屏幕分辨率较低（例如640×480）时，屏幕上显示的像素较少，单个像素的尺寸较大。当屏幕分辨率较高（例如1600×1200）时，屏幕上显示的像素较多，单个像素的尺寸较小。

显示分辨率是屏幕上显示的像素数。 160×128的分辨率是指水平方向的像素数为160个，垂直方向的像素数为128个。在屏幕尺寸相同的情况下，分辨率越高，显示越细致、细腻效果将会。

比例：4:3、5:4、16:10、16:9、21:9

4:3 是最常见的屏幕比例。 16:10是常见的“宽屏”比例。 16:9主要是高清电视使用的比例。

常听到的720p就是这个比例。

逻辑尺寸和像素尺寸

人类视觉对物体大小的判断是由逻辑大小决定的。以图形为例。无论图形离我们有多远，用户的感知都是直径为25mm的尺寸。换句话说，这就是它的真实尺寸，所以我们把人们对物体真实尺寸的感知称为它的逻辑尺寸。

屏幕像素数不同。相同的像素大小，图形显示的大小会有所不同。

8+屏幕上元素的大小需要在8的基础上乘以1.5才能以通常的物理尺寸显示元素的大小。

逻辑像素与实际像素

手机屏幕常见的分辨率有乘法、乘法、乘法、乘法。

在同一圈内，高分辨率的屏幕显示更清晰，视觉体验会更好。

设计时优先考虑保证高分辨率的屏幕效果。

带有“1X”字样的切口通常用于普通屏幕，带有“@2x”字样的切口通常用于屏幕，带有“@3x”字样的切口通常用于Plus系列手机的屏幕电话。设计师只需要把这三种尺寸的剪图交给技术人员，技术人员就可以为每个模特适配合适尺寸的图片。将实际像素除以放大倍数以获得逻辑像素大小。

所谓“高清”，就是将更多的像素压缩到屏幕中，以达到更高的分辨率，提高屏幕显示的精细度的显示标准。由摩托罗拉开发。最初，这项技术被用在 Moto Aura 上。该分辨率足以使肉眼在正常观看距离下无法区分各个像素。也称为视网膜显示器。

对于适配来说，就是为了达到视觉上的统一感，让相同大小的物体在不同像素密度的屏幕上显得大小相同。逻辑像素为pt，普通像素为px。 1 pt 在 6、7 和 8 中等于 2px，在 6 plus、7 plus 和 8 plus 中等于 3px。开发项目中，双图​​模型为乘法，6s显示为乘法，8加显示为乘法。从视觉上看，三种尺寸看起来相同。下图是手机接口的详细适配尺寸规格。

根据以上规格，设计者的设计稿尺寸为375 x 667 pt，导出格式@2x，可应用于6、7、8手机。

系统将各种设备的像素密度划分为若干范围，并为不同范围的设备定义不同的放大倍数，以保证显示效果相似。 系统的逻辑像素单位是dp。

您可以在手机屏幕上找到自己的密度值、代表分辨率、放大倍数、逻辑分辨率等。

目前密度为（倍）的手机占据了较大的市场份额；目前，密度为 的手机产品占据了绝大多数市场份额，其逻辑像素也恰好成倍增加。根据这样的分辨率标准，衍生出了@2x、@3x、@4x这三种格式的切割图像，基本上可以适配市面上大部分的系统型号。

全球利润率

UI界面设计中，全局边距一般为30px，整个产品设计的边距为30px，以保持一致性。

或者全局边距为32px也是一个不错的选择，例如：使用这个尺寸。

24px 全局边距

，不仅距屏幕边缘的距离相同，距边缘的距离也相同，甚至头像与文字的距离也相同，都是16px。

40 像素全局边距

40px 是一个很大的边距，空白开始增加。界面透气，阅读体验良好。例如：36kr。大边距适合不需要复杂信息和交互级别的单一应用程序。

50 像素全局边距

50px可以认为是最大边距，这使得界面干净整洁，非常方便用户浏览。

垂直间距

卡之间的间距一般定义为：20px、24px、30px，最大间距不超过40px。间距的底色可以和你的分割线一致，也可以淡一些，界面柔和一些。

88像素

iOS中最小的点击区域是88px，因为在垂直尺寸上使用22px作为基本单位。最小物理空间的高度为22乘4等于88px，这是手指触摸的最小高度。因此，导航栏、选项卡栏、列表、搜索栏和按钮的高度为88px，导航栏和选项卡栏图标的高度为44px，元素之间的最小间距为22px。

《最新及iOS设计尺寸规范》

4.X的适配方案

对于前面提到的iOS系统常用机型来说，几乎可以乘以一个逻辑尺寸来完成设计适配。相对而言，X的适配处理稍微细致一些。 X 的屏幕部分的高度有所增加，如下图所示。

我们先来说说顶部刘海区域的适配方法。如图所示，对于传统的8屏来说，屏幕基本上是一个安全的显示区域。安全展示区就是把重要的元素放在上面，设计好。 X上添加刘海和圆角意味着多了两个无法显示内容的非安全区域。苹果官方给出的不安全区域是屏幕顶部44pt，屏幕底部34pt。可点击的按钮一定不能放置在下面34 pt不安全区域，否则会与虚拟Home按钮冲突。

从空间利用率的角度思考，感觉与IOS界面的整体效果一致。如下图，有立式和卧式版本。

具体的适配方式一定要从这两个非安全领域来慎重考虑。由于顶部的非安全区域不能出现状态栏以外的内容，所以之前的状态栏从20pt加长到了44pt，也就是说增加了24pt。此时导航栏的大小保持不变，只需要整体向下移动24pt即可。此时导航栏的大小保持不变，只需要向下移动24pt即可。同时，状态栏背景的颜色需要与导航栏背景的颜色保持一致。

当界面顶部有图像背景时，最简单的处理方法是将顶部图像元素的高度增加24pt。如果出现穿透到顶部的情况，一般有两种处理方法。

第一种方法是制作一组单独的尺寸，用于下载所需的设计广告图像。如下图所示。

第二种方式是显示导航栏，不再跨顶部显示，而是移到导航栏下方。

该显示屏缺乏沉浸式设计体验。

说完刘海区域的适配方法，我们再来说说底部非安全区域的适配方法。位于屏幕下方的Home键，集成了原有物理Home键的退出、切换系统应用程序的功能。在适应过程中，可以改变该区域背景的颜色、透明度和高度。底部33pt非安全区域内禁止操作按钮。

第一种情况，当界面底部有按钮时，可以将按钮贴在底部34pt非安全区域上方。非安全区域的背景颜色一般与操作按钮的背景颜色一致。如下图所示。

第二种情况，当界面底部没有按钮时，只需让列表正常显示，不阻塞即可，如下图所示。

场景三：当广告引导页等呈现全屏风格时，需要调整两套设计稿的间距和大小，以保证良好的视觉内容展示。扩展背景颜色的方法就足够了。

界面设计中间距的思考

界面留下的固定边距是最基本的网格系统。如下图所示。

类目区域的功能图标应用了界面的分割规范，设计分为四等份，与网格系统的设计保持一致。标准化设计有利于从设计稿中开发还原设计。

网格系统中的8px原则

8px原则是指界面设计中所有元素的长度除以宽度和间距都可以被8整除。这里的8px是基于@2x图像格式的剪切图像。乘以@1x逻辑大小，系统屏幕下的部分适配大小。

5. 常见的移动设计布局及适用场景

信息的设计优先、合理布局，提高信息传递效率。

核心功能布局

核心功能各模块布局应保持相对独立。水平标签的数量尽量不要超过5个。使用左右滑动的交互方式可以实现5个以上，这种方式来自于设计心理学。

标签式布局的优点是每个入口都清晰呈现，方便用户快速查找信息；标题必须简洁。对于需要突出的核心功能，可以处理好信息层级的大小以及是否有设计背板，主次关系要明确。

列表布局

列表布局适合信息产品。

列表布局的优点是信息显示更直观，节省界面空间，浏览效率高，字段长度不受限制，可以交错行显示。单纯阅读文字会造成视觉疲劳，因此图文混杂、变化多样。突出主题和高质量的图片将有助于用户更好地阅读信息。

卡片布局

卡片式布局就是将不同尺寸、不同形式的内容放入一个容器中进行组合展示。比较常见的一种是图片与文字的混合排列。要做到视觉上的一致性，平衡图片与主题内容的关系。分组展示可以让用户更好的了解各个模块的内容。

瀑布流布局

瀑布流布局适合更好的沉浸式浏览图片、视频等内容。移动端的瀑布流布局一般有两列信息并行交错显示，可以大大提高交互效率，创造丰富的视觉体验。适用于花瓣等图片的界面布局设计。

6.APP组织设计规范

（具体可以参见我之前在上写的关于基于组件的思维的文章）

iOS和系统都提供了一些固定的官方组件规范。遵循其官方的组件规范可以大大提高设计和开发效率，同时降低用户的学习成本。最常见的标准化组件包括顶部状态栏、导航栏、底部选项卡栏和工具栏。

状态栏

ios 是 20pt， 是 24dp。

导航栏

ios 是 44pt， 是 56dp。

标签栏

ios标签栏的高度为49pt，标签栏的高度为48dp。

工具栏

工具栏的高度为44pt，为48dp。

字体为萍方字体；英文字体为SF英文字体。思源，英文字体。

iOS设计大概是11pt到29pt，一级主题是24pt以上，二级标题是20pt左右。

内容，导航栏标题为18pt。 3 级标题为 16pt。文字内容一般为14pt

类别区域图标内容：12pt。底部 TAB 图标文本：10pt 到 11pt

7.微信小程序设计

基于微信小程序轻快的特点，我们制定了小程序界面设计指南和建议。设计准则是基于充分尊重用户的知情权和操作权。旨在在微信生态内建立友好、高效、一致的用户体验，同时最大限度地适应和支持不同的需求，实现用户和小程序服务提供商的双赢。

友善且有礼貌

为了防止用户在微信中使用小程序服务时被复杂的周围环境分散注意力，小程序在设计小程序时应注意减少不相关的设计元素对用户目标的干扰，礼貌地展示程序提供的服务给用户，友好的引导用户进行操作。

亮点

每个页面应该有明确的焦点，以便用户每次进入新页面时都能快速理解页面内容。在确定重点的前提下，应尽量避免页面上出现其他与用户决策和操作无关的干扰因素。

避免误操作

换算成物理尺寸后，大致在7mm-9mm之间。微信提供的标准组件库中，各种控件元素已经考虑到了页面点击效果以及对不同屏幕的适配，因此再次建议使用或模仿标准控件尺寸进行设计。

小程序是运行在微信开放平台上、无需下载安装的应用程序。它提供了一种快速体验应用程序的方法。用户可以通过扫描或搜索的方式打开应用程序，实现“触手”。 “触手可及”“用即走”的高效运营。对于开发者来说，小程序开发门槛较低，能够满足简单的基础应用。基于小程序轻快的特点，在设计小程序界面时，我们以友好、高效、一致的用户体验为导向，引导用户友好地进行操作。

小程序菜单

微信会在小程序界面的右上角放置一个菜单，包括小程序内嵌的网页和插件。该菜单包括两个图标。左边是更多，点击分别可以转发、关于、取消；右侧为首页，点击返回小程序列表。小程序菜单和状态栏以外的区域是开发者控制的区域，可以自行设计。

微信提供深色和浅色两种颜色，适合不同风格和元素设计识别。小程序在IOS上的尺寸如下图所示。

开发者无法自定义小程序菜单，但可以选择深色和浅色两种基本颜色，以适应页面设计风格。为了使小程序菜单清晰可见，请使用深色背景的浅色菜单和浅色背景的深色菜单。

减少投入

由于手机键盘面积小且密集，输入困难，容易造成输入错误。因此，在设计小程序页面时，尽量减少用户输入，并利用现有的界面或其他易于操作的选择控件来改善用户的输入体验。

比如下图，添加银行卡时，通过摄像头识别界面来帮助用户输入。此外，微信团队还开放了地理位置接口等各种微信小程序接口。充分利用这些接口将大大提高用户输入的效率和准确性，从而优化体验。

在用户搜索时提供搜索历史快捷选项将有助于用户快速搜索，减少或避免不必要的键盘输入。

以上部分使用的图片来自微信小程序设计指南。具体设计规范请参见-微信小程序设计指南。

页面导航

顶部标签分页栏的颜色和样式可以自定义。

最常见的设计方法是用主品牌颜色填充选中状态，未选中状态对比度清晰，可操作性强。最常见的设计方法是用主品牌颜色填充选中状态，用灰色填充未选中状态，标签之间保留足够的空间以避免误操作。

Tab分页栏的样式可以根据App的视觉风格进行设计，保证两个平台视觉体验一致。例如腾讯视频，在App中，其标签栏和分页栏采用无框设计风格，通过文字大小和颜色的对比来区分选中和未选中状态；在小程序中，也采用了无框的设计风格。颜色保持不变，字体大小与风格相同，精致的线条辅助展示设计的当前状态。

开发者可以在小程序页面添加标签式分页导航。选项卡式分页栏可以固定在页面的顶部或底部，方便用户在不同选项卡之间切换。标签数量不少于2个且不超过5个。为保证足够的点击面积，建议标签数量不超过4个。

小程序首页可以选择微信提供的原生底部tab分页样式。该样式仅用于小程序首页。设计时可以自定义图标样式、标签文案和颜色等。分辨率为750倍时，标签文案字体大小为20px，图标大小为50px x 50px，标签栏高度为98px，即符合苹果iOS的设计规范。

在微信小程序的设计开发中，可以根据产品需求选择或不选择底部标签分页栏。例如，腾讯视频小程序使用4个标签承载不同功能的页面内容，为用户提供清晰、快速的浏览体验；而穷游助手的内容比较简单，只需一页就能清晰呈现所有内容，所以不需要tab分页栏。如下图所示。

开始页面加载

点击小程序列表中的小程序，进入小程序，然后进入启动页面。是微信小程序在一定程度上展现品牌特色的页面之一。

该页面将突出显示小程序的品牌特征和加载状态。除启动页上显示品牌标志外，页面上的所有其他元素，例如加载进度指示器，均由微信统一提供，无法更改，不需要开发者开发。品牌标志尺寸为80×80px，间距标注如下图所示。

长时间等待页面会导致用户产生负面情绪。您应该尝试使用微信小程序项目提供的技术来缩短等待时间。首先显示预设的本地数据，告知用户页面正在加载。

全局加载反馈是小程序名称左侧显示的加载状态图标，提示小程序内容加载过程。同时，模态加载样式会覆盖整个页面。它由加载图标、文字提示和半透明圆角矩形组成。由于无法明确告知具体的加载位置，可能会引起用户的焦虑，因此应谨慎使用。

设计案例

小程序设计基于微信内运行的应用程序，因此视觉上应该轻、干净、简洁，并保持扁平化的设计风格；在交互方面，结构简单、层次清晰、跳转少，保证高效的浏览体验。微信小程序的设计要简洁、高效、实用。

以旅游产品为例：

1.修复小程序页面右上角小程序菜单。

2、为保证足够的点击面积，建议小程序底部的标签页栏最多4个。收件箱在很多应用中不会被用作独立标签，因此可以考虑将其删除；个人数据承载了用户的很多重要信息，因此将其保留在标签栏中比较合适。最后确定了底部四个标签栏的功能设计——分别是：主页、收藏、消息、我的、四个标签。

3、开始设计，保持与App相同的白色背景，标题栏向左对齐。

4、要优化原有的风格。减法是小程序设计的关键。 App中的设计轻、干净、简洁，可以直接在小程序中复用，无需重新设计。小程序延续了轻量阴影的视觉特性，因此优化后的界面设计依然保持了与App相同的设计风格。

8. 网页设计规范

1.什么是网页设计？

网页设计又称Web、网站设计、WUI等，其本质是网站的图形界面设计。

2、设计规范

产品的设计规范应包括：字体规范、主色规范、图表规范、图片规范等。

3、网站类型

网站的分类按照对象可以分为To​​ C端和To B端两种类型。 To C端是针对用户和消费者的，比如企业网站、产品网站、电商网站、移动H5等，都是面向用户的产品。考虑以用户为中心的体验设计。

To B端是需求量很大的类别，比如电商后端、企业级OA、网站统计后端等，这些针对商家和专业人士的网站都是To B类型的网站项目。 B型项目最重要的就是效率，因为说白了，我们在设计供用户工作的工具时，首先要保证用户能够高效地工作。

企业网站

每个公司都需要一个网站来展示自己的能力、介绍自己的产品等。在设计企业网站时，通常有网站首页、公司介绍、产品中心、公司团队、网上商城、联系我们等几个模块。企业网站会展示很多公司环境、团队成员、企业文化等实景照片，以配合一些信息进行设计。企业网站通常追求所谓“高端”、“大方”、“高端”的风格，就是为了达到让消费者对品牌产生认同的要求。

产品网站

从苹果的介绍页面到小米手机8的介绍页面，我们会发现一种新的产品营销模式，那就是产品网站。设计此类网站的内容主要是产品的流程、技术、设计、功能、结构、使用场景等。这类产品页面希望给用户一种沉浸感，所以一般采用全屏布局，产品设计必须精致、高品质。

后台网站（数据可视化）

后端网站仪表板。意思是有大量的数据和统计信息。后端网站是To B类型的，所以第一个需求是快速向操作者展示他需要掌握的数据。但数据很无聊。我们可以使用不同的方法，例如“线图”，“饼图”，“曲线图表”和“表”来显示这些繁琐的数据。这种图形表达数据的方式也称为数据可视化。

您可以参考的网站包括：，如下图所示。

CRM系统（简单拆除网页B端的设计规范）

CRM IE，被翻译为客户管理系统。 CRM是企业为客户提供信息管理的一种形式。它使用互联网技术来收集，管理和分析客户信息，并监视公司的销售，服务和售后。常见职能包括员工计划管理，订单管理，发票管理等。

在PC侧，建议使用：1440×900设计尺寸

了解B侧系统的设计原理

持续的

与现实生活，用户习惯一致

界面是一致的，设计图标，文本，元素等是一致的。