返回

零基础学UI设计

#C端UI设计
12%
进度
0/14
知识点
0
笔记
概述
移动端UI设计的基本认识
移动端UI设计的基本认识
UI 界面设计所需的技能解析
UI 设计的软件介绍
移动端的基础规范认识
移动端的规范认识
屏幕和分辨率的规范
设计的单位和格式
UI 中的字体与显示
UI 文字的属性设置
基本色彩模式的认识
UI 设计中的原子理论
iOS 的基本规范认识
iOS 的控件和组件认识
标准规范下的APP 设计演示
苹果音乐主页的设计
资料库页面的设计
专辑页面的设计
播放页面的设计
界面的合并和输出
移动端的基本控件和组件设计
UI 中的尺寸定义逻辑
按钮的设计逻辑
输入框的设计逻辑
列表行的设计逻辑
图标的尺寸定义
分页器控件的设计
轮播广告组件设计
快速入口的设计
瓷片区的设计
动态卡片的设计
商品卡片的设计
模态弹窗的设计
移动端页面设计的解析
登录页面的设计
综合型主页设计
动态列表页面设计
商品列表页面设计
电商详情页面设计
影音详情页设计
用户设置页面设计
表单页面设计
UI 中的视觉风格
夜间模式的设计
UI 中的投影应用
首页知识库C端UI设计零基础学UI设计

移动端的规范认识

酸梅干超人 编辑于 2023-12-13182人正在学
50

规范的类型认识

很多人都知道学 UI 有规范,苹果的规范,安卓的规范。但是,多数人并不清楚这些规范到底是什么,有哪些,以及它们的作用、意义、内容。

规范一词,可以解释为 —— 某一行业或者行为的要求准则。它不是数学定理,而是人为制定的条件、规则、约束、限制。

在从事 UI 设计师这个职业,掌握规范,就是掌握界面设计的必备条件、规则、约束、限制有哪些,确保自己做出来的东西具备可用性的,而不是毫无实现价值的飞机稿。

而职业相关的规范,并不是只有苹果、安卓规范叫规范,而是包含好几种类型的规范需要我们去了解。

我把它们分为下面这些类型:

计算机规范,指的就是计算机领域的部分基础常识。有一部分知识是设计师也必须掌握的,例如图形成像、图形文件格式、字体显示原理等。

硬件规范,主要指的是硬件上的特性对设计产生的影响。例如电容屏和电阻屏的操作差异,视网膜屏和低分屏的显示逻辑,折叠屏的操作和适配方式。

系统规范,则是不同软件系统开发者制定出来的规范原则。系统级规范大到硬件底层系统,比如 Windows、Mac OS、Android,小到一些开源框架或软件系统,如 AntDesign、Element 等。

视觉和交互规范,则是在视觉和交互领域中的一些必要规则和限制。比如视觉统一性的要求,最小可点击区域等。

学习规范的方法

不管是什么方向的规范,都可以分成两个大类,那就是规则和建议。

规则是指硬性规定,即这个规范说什么就是什么,不以产品、设计、开发个人意志为转移。比如低分辨率屏幕,你不可能要求文字的显示没有边缘虚化,你也不能在 iOS 系统下凭空制定安卓系统字体

这类规范是最容易掌握的,因为要求是被定死的,只要按照这个标准做即可。

而建议,则是行业或官方建议你这么做……那么做……,但并没有强制效应,你可以选择不遵守,根据自己的想法或适合实际场景的做法来完成设计。

例如无论 iOS 还是 Material 都建议使用 8 的倍数设置元素尺寸,但实际上所有设计元素都遵照这个要求是不可能的,即使官方提供的系统组件库也没有遵守。所以你想要用 4 的倍数还是奇数(不建议)都可以,并不会对实际的开发和落地造成决定性影响。

麻烦就麻烦在建议上,例如 iOS 的规范中,虽然内容特别多,但绝大多数内容都是建议,并不是直接告诉你怎么做,例如下面的一些节选:

  • 在展示的所有书面表达中使用你品牌独特的口吻。例如,你的品牌可以通过使用纯文字、偶尔的感叹号和表情符号以及简单的句子结构,传达出鼓励和乐观的态度。
  • 在非游戏类 App 中谨慎使用颜色。在非游戏类 App 中,过度使用颜色会让信息传达变得不那么清晰并可能使用户分心。推荐使用适量的颜色来引起用户对重要信息的关注或显示界面各部分之间的关系。
  • 为重要信息留出足够空间来使其易于找到。用户希望立即看到最重要的信息,因此你不应将其与不重要的细节挤在一起以妨碍查看。你可以在窗口或显示的其他部分提供次要信息。
  • ……

规范中大量的建议,宏观的、玄学的、模棱两可的,就是怕过渡干涉设计师创作发挥,要预留充分的弹性空间。而这些建议的内容,你想怎么解读,怎么实施,就看你自己的经验和对当前项目的理解,没有绝对正确的结论。

规范学习首先要学会的,就是分辨哪些是规则,哪些是建议。把规则牢牢背下来记住,把建议作为一个疑问去思考背后的理由。

点赞
收藏
学会
464050182
下一篇: 屏幕和分辨率的规范
屏幕的分辨率 首先,UI 设计师产出的内容,都是在电子屏幕中显示的,是数字化的图形,而不是要打印喷绘出来的三维世界实物。所以,屏幕显示规则决定了图形的显示方式。 电子屏幕成像的基本原理,即一块完整的屏幕由若干像素点组成。屏幕分辨率的参数,如 1920*1080,指的就是这块屏幕 XY 轴包含的像素点...
笔记 (17)
只看自己
logo
UX小学生 记录于 2025-05-05
你说得很对,这是一个**设计规范与实际开发之间的“理想与现实差距”**的经典例子。下面我来帮你系统解释一下: --- ## ✅ 为什么建议使用 **8 的倍数**? ### 1. **8pt 网格系统**的优势(适用于 iOS 和 Material Design): * **规律对齐,整齐划一**:方便实现像素对齐,界面看起来更整洁。 * **便于响应式适配**:8 能被 2、4、16、32 等多种值整除,便于计算与缩放。 * **减少对开发的沟通成本**:统一的度量单位让 UI 和前端工程师沟通更顺畅。 * **匹配现代屏幕密度**:常见屏幕分辨率(如 Retina)换算后能更好地与 dp/pt 对齐。 --- ## ✅ 为什么“现实中并不完全遵守”? ### 现实项目会遇到这些情况: #### 1. **视觉平衡优先** 有时视觉上“好看”比“对齐”更重要。例如: * 某些图标需要 20×20 才显得居中对称; * 某个文字行高用 22 更舒服,而不是死守 24。 #### 2. **组件尺寸来源于实际需求** 比如: * 按钮内容太短,使用 64 会显得空,用 56 或 52 更合适; * 多个图标并排放置时,为了保持均匀间距,会采用 4 的倍数(如 12、28)而不是强制 8。 #### 3. **系统组件自身也不完美** 你可以打开 Material Design 官方文档,或者 iOS 的 UIKit,发现: * 有些系统组件 padding 是 16,但某些是 12; * iOS 的导航栏高度是 **44pt**,不是 40pt; * Material 的 FloatingActionButton 是 **56dp**,不是 64。 所以,**就连官方也并没有严格“只用8的倍数”**。 --- ## ✅ 那我们该怎么处理? ### 可以这样理解和执行: | 场景 | 建议做法 | | ---------- | ------------------------- | | 组件、区块布局 | 尽量使用 8 的倍数(例如 8/16/24/32) | | 微调、细节调整 | 可以用 4 的倍数(如 12/20/28) | | 极个别对齐或视觉补偿 | 不建议用奇数,但也不会“出大事” | --- ## ✅ 记忆建议: > **“8 是原则,4 是灵活,奇数能用但慎重。”** 你可以记一句话: > "**设计规范是起点,不是枷锁,别被 8 束缚了设计感。**" --- 如果你在 Figma 或设计系统中,有统一 spacing token(比如 spacing-8、spacing-16、spacing-24),那就以它为“主调”,小细节自由安排就好。 需要我给你整理一套【常见元素尺寸推荐值】对照表吗?比如按钮高度、图标尺寸、文字行高那种。
原文: 例如无论 iOS 还是 Material 都建议使用 8 的倍数设置元素尺寸,但实际上所有设计元素都遵照这个要求是不可能的,即使官方提供的系统组件库也没有遵守。所以你想要用 4 的倍数还是奇数(不建议)都可以,并不会对实际的开发和落地造成决定性影响。
UX小学生 记录于 2025-05-05
apple:44*44 google:48*48 microsoft:40*40
原文: 最小可点击区域等。
UX小学生 记录于 2024-04-24
8px@设计
原文: iOS 还是 Material 都建议使用 8 的倍数设置元素尺寸
peggy 记录于 2024-04-09
规范可从规则和建议两方面入手。规则是强制性的,要求牢记并遵守;建议则无强制性,不一定要遵守,可以根据自己的想法和实际场景来完成。
sumi 记录于 2024-01-31
元素尺寸尽量用8或者4的倍数,间距也是
原文: 无论 iOS 还是 Material 都建议使用 8 的倍数设置元素尺寸
七月屿夏 记录于 2024-01-22
使官方提供的系统组件库也没有遵守。所以你想要用 4 的倍数还是奇数(不建议)都可以,并不会对实际的开发和落地造成决定性影
原文: 使官方提供的系统组件库也没有遵守。所以你想要用 4 的倍数还是奇数(不建议)都可以,并不会对实际的开发和落地造成决定性影
© 2023 uxbaike.com All rights reserved
版权声明意见反馈联系我们
weixinlogo
mx-auto
TOP
mx-auto
笔记
mx-auto
点赞