首页 
从零开始学 UI
知识点 0/14 · 2%
0. 概述
2. 移动端的基础规范认识2.1 移动端的规范认识
2.2 屏幕和分辨率的规范
2.3 设计的单位和格式
2.4 UI 中的字体与显示
2.5 UI 文字的属性设置
2.6 基本色彩模式的认识
2.7 UI 设计中的原子理论
2.8 iOS 的基本规范认识
2.9 iOS 的控件和组件认识
4. 移动端的基本控件和组件设计4.1 UI 中的尺寸定义逻辑
4.2 按钮的设计逻辑
4.3 输入框的设计逻辑
4.4 列表行的设计逻辑
4.5 图标的尺寸定义
4.6 分页器控件的设计
4.7 轮播广告组件设计
4.8 快速入口的设计
4.9 瓷片区的设计
4.10 动态卡片的设计
4.11 商品卡片的设计
4.12 模态弹窗的设计
2
%
从零开始学 UI
最后更新于 2024-07-30
#知识库#设计知识
用户界面(User Interface)是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。
开始学习40
文章数
39.9K
总字数
14
知识点数
47.4K
学习人数
1.4K
学完次数
221
精选笔记
知识库概述
欢迎来到 《从零开始学 UI 设计》的知识库。在本知识库中，主要分享移动端 APP 设计的专业知识，帮助新手在零基础的情况下可以系统的掌握移动端界面设计的知识和能力，并输出符合规范、专业的UI界面。
本套课程面向的对象：
- 从零开始学习 UI 设计师的学生
- 想要转行进入 UI 设计的新人
- 产品经理/开发了解 UI 设计思路
从对 UI 的整体扫盲认识开始，到学习经过精心筛选的设计必备规范知识，然后使用这些知识对一些基本页面进行临摹，上手 UI 设计的基本思路和逻辑。
好了，那我们接下来就开启这段美妙的变强旅程吧！
移动端UI设计的基本认识
已学会 0/3 · 知识点 0/1
移动端UI设计的基本认识
UI (User Interface) 也叫交互界面、图形界面、人机界面，是我们今天无时无刻不在接触不受影响的伟大发明。 理解 UI 是什么，我们只要关注2个重点： 如何有效输入信息 如何有效获取信息 计算机是一个用来输入指令，完成处理，返回结果的设备。比如问计算机 1+1 等于几，你就要考虑你怎么...
UI 界面设计所需的技能解析
UI 设计的主要对象是针对可交互界面的设计，想要实现优秀的界面设计效果，就需要具备以下几种能力： UI软件的使用 系统设计规范认识 主流的控件、组件掌握 界面的布局和排版 配色的逻辑和应用 图标的独立设计能力 项目设计规范定义 在开始学习 UI 的专业知识之前，我们要先对这些能力有初步的认识和判断，...
UI 设计的软件介绍
UI 设计类软件，就是开发出来专门用于 UI 界面设计的软件工具，是近 10 年来新兴起的设计软件类型。目前市面上已经存在非常多的 UI 设计软件，不仅包括国外的，还涌现出一批新兴的国产 UI 设计软件。 可以先将它们分成两个大类，本地和云端。 本地是指设计文件保存在你的电脑本地硬盘中，云端则是指设...
移动端的基础规范认识
已学会 0/9 · 知识点 0/6
移动端的规范认识
规范的类型认识 很多人都知道学 UI 有规范，苹果的规范，安卓的规范。但是，多数人并不清楚这些规范到底是什么，有哪些，以及它们的作用、意义、内容。 规范一词，可以解释为 —— 某一行业或者行为的要求准则。它不是数学定理，而是人为制定的条件、规则、约束、限制。 在从事 UI 设计师这个职业，掌握规范，...
屏幕和分辨率的规范
屏幕的分辨率 首先，UI 设计师产出的内容，都是在电子屏幕中显示的，是数字化的图形，而不是要打印喷绘出来的三维世界实物。所以，屏幕显示规则决定了图形的显示方式。 电子屏幕成像的基本原理，即一块完整的屏幕由若干像素点组成。屏幕分辨率的参数，如 1920*1080，指的就是这块屏幕 XY 轴包含的像素点...
设计的单位和格式
设计中的图像类型 前面提到过，iOS 和 Android 分别使用了 pt、dp、sp 三种长度单位，但在整个 UI 的领域中，还不止这些单位，包括网页的 em、rem，小程序的 rpx、vw 等。所有长度单位我们都可以分成两种类型，物理单位和逻辑单位。 物理单位是要作用到现实世界的，我们说的厘米、...
UI 中的字体与显示
文字的显示逻辑 字体是 UI 设计中操作频率最高的对象，也是规范中会一直提到的内容，但理解字体的规范首先得知道智能设备中的字体有哪些特性，如何被显示出来的。 文字对于人类来说是有价值有信息的，但对于计算机来说，文字只是一些图形轮廓，没有实质的意义。如果想要让计算机识别和返回文字，就需要将人类的文字转...
UI 文字的属性设置
了解完字体的显示逻辑，下面就要认识字体的 —— 属性。在不同 UI 设计软件中，文字的可编辑属性是基本相同的，虽然可设置属性不多，但都很重要。 只要完整的理解文字的属性，才可以在后续看懂规范中文字的解释和后续的演示案例。文字在 UI 中涉及的属性包含两个部分： 文本属性：字体、字号、字重、字色、样式...
基本色彩模式的认识
配色是一门很复杂的学问，在学习配色的方法之前，首先要理解的是色彩的模式。 色彩模式是一种用来描述、记录色彩的方法，而不同场景，方法就不一样。因为不同的场景中组成色彩的要素不同，如果不做区分，就会造成颜色记录和使用上的误差。 常见的色彩模式包含HSB、RGB、CMYK 三个大类。 色彩模式分类 HSB...
UI 设计中的原子理论
在界面设计中，对包含的元素进行分析就能发现，界面是由最基础的四个元素组成，分别是文字、几何、图标、图片。 但这些元素太底层，不利于对页面作用、内容的解释和构建，所以行业还需要搭建对层级更高的内容的解释。 国外的网页设计师 Brad Frost 受元素周期表的启发，原子结合可以形成分子，分子可以组成细...
iOS 的基本规范认识
iOS 的官方资源 iOS 是苹果的官方系统，iOS 设计规范是规范针对这套系统提出的一套规范解释和设计建议文档。 目前官方设计规范已经添加中文翻译，感兴趣的同学可以去阅读官方原文： 点击查看 需要注意的是，官方规范中集合了虚拟设备 VisionOS、电脑 MacOS、平板 iPadOS、电视 tv...
iOS 的控件和组件认识
上一节我们认识了官方规范中最重要的五个组件，但官方提供的组件库中还有非常多的控件和组件无法被忽视，所以除了你们自己去查看源文件熟悉以外，我们也要对它们做个简单的总结，加快大家的认识。 常用控件 按钮控件 Button 按钮是所有控件中最基础、出现频率最高的控件，在一个系统中必然包含多种形态和尺寸的按...
标准规范下的APP 设计演示
已学会 0/5 · 知识点 0/1
苹果音乐主页的设计
在这个章节中，我们就要通过已经掌握的规范和知识，临摹苹果官方音乐应用的界面。 在这个案例的学习中，要先掌握一款 UI 设计软件的基本使用和操作，可以是即时设计、Figma、Sketch或 XD。 如果你学习软件看的是我们的视频的话，就不会对后面的演示内容感到陌生，我们以图文的方式进行重新的解构可以帮...
资料库页面的设计
基本框架搭建 这里的第一步依旧是先搭建基本的框架，而如果前面做过的页面和当前的相似，就可以复制前一个画布出来并删除不相关的组件，这样可以提升效率，不用重复造轮子。 将顶部标题栏的标题改为“资料库”，并下移给卡片留出位置；在顶部添加一个编辑按钮，下方绘制一个矩形卡片。 然后，再在官方组件库中找到列表组...
专辑页面的设计
基本框架搭建 复制一个「现在就听」页面出来，然后删除不相关的组件内容。 然后从官方组建库中复制一个基础的顶部标题栏，删除不相关的元素。 继续添加封面图和下方的专辑信息文字。 接着绘制中间的两个按钮，虽然官方有提供按钮控件，但这么基础的元素，是没必要从官方复制出来的，直接手动完成即可。 按钮主要根据高...
播放页面的设计
基本框架搭建 播放页面的框架就和前面一般页面不同，所以不用复制前面的画布，直接创建个新的画布，先将背景设置成深色，然后添加状态栏和底部指示器。 上方的那个用于拖拽的小矩形，也是官方组件库中的元素，官方名称为 Resize Indicator 尺寸调整指示器， 可以复制出来并贴着状态栏置入。 然后添加...
界面的合并和输出
完成所有页面的设计以后，下一步我们就要想怎么将这些界面导出供其他人预览。 虽然即时、Figma 等线上设计工具都有在线分享画布功能，但这适合在设计团队内部使用，如果是要让外部人员观看，就最好导出成对应的图片格式。 网上常见的 UI 设计案例，会将多个页面整合进一个画板中，比如下面的案例： 要实现这样...
移动端的基本控件和组件设计
已学会 0/12 · 知识点 0/3
UI 中的尺寸定义逻辑
UI设计虽然和平面很像，但在实际操作中有自己的操作、设计思路，其中最大的不同点，就是UI界面中的元素尺寸，多数是通过计算并手动输入出来的，而不是使用鼠标拖拽出对应的大小。 比如要应用一些规范的组件，又不从官方组件库中直接拖拽出来，那么就要手动设置这些组件的尺寸。 UI 设计软件中之所以把尺寸设置的输...
按钮的设计逻辑
按钮 Button，是用于触发特定指令和操作的控制器，是 UI 中最基础的交互元素，不仅出现频率极高，且应用的样式和场景也非常的丰富。 在广义的定义中，所有点击后可以触发特定指令和操作的元素都是按钮，可以是文字、图片、图标、几何图形等。在这里，我们指的按钮是由几何图形+文字或图标组成的元素。 按钮根...
输入框的设计逻辑
输入框 Input，是用于向系统输入信息的表单控件。 在一套系统中，同样会包含很多的输入框，而根据场景、权重的不同，也会应用不同的输入框高度大小。通常，输入框只需要分成两个尺寸区间即可。 大输入框：大于等于 44，如账号、密码、搜索等操作 小输入框：大于 28 小于 44，如筛选条件、次级搜索等操作...
列表行的设计逻辑
列表行 row 是应用在单行列表中的行元素，要理解它就要先认识列表。 列表是由多个同类元素按相同规则排列出来的组件，表现形式多种多样，可以是横向多列，也是纵向单列、纵向多列。 纵向单列的列表，就是由若干列表行组成，前面提过 iOS 组件库中就提供了大量的列表行样式，基础的列表行中内容只有一行，而复杂...
图标的尺寸定义
图标是什么无需多做介绍，这里主要讨论的，是制定图标尺寸和布局的逻辑而不是如何设计图标图形。 不管是你自己设计的图标还是引用外部的素材，在置入画布中都要设置它的具体尺寸，需要建立一定的标准，才能确保界面中图标的显示能获得满意的效果。 首先我们要知道图标尺寸指的是图标 “容器” 的尺寸而不是图形尺寸，正...
分页器控件的设计
分页器是在不进行跳转的情况，快速切换不同页面的控件，通常被认为它就是 iOS官方组件中的 Segmented Controls，直接翻译可能叫分段控件合适一点。 虽然交互的方式基本一样，但它们产生的作用却不同。苹果的分段控件更多是用于对下方内容做出筛选，而分页器的作用是切换完全不相关的页面、内容。 ...
轮播广告组件设计
轮播广告就是在可以切换内容的展示模块，在国内的 APP 中应用非常广泛，用于承载多条运营或广告信息。 最基础的轮播广告组件，就是图片加下方的控制器，可以是圆形的，也可以是横向的，有几张广告图就显示几个。 而图片的使用上则相对复杂，需要考虑比例的问题。很多设计的分享会强调黄金比例或一些显示器通用的比例...
快速入口的设计
快速入口 Quick link 是用于快速进入下级页面、分类、功能的链接按钮聚合组件，是APP 中最常见的组件之一。 它早期的别名叫金刚区，是由美团团队内部流出的叫法，原因是美团初期首页上有 8 个大功能图标，叫八大金刚，后来图标增加且开始做小，就改成叫金刚区。这是一个很抽象的叫法，所以简单了解即可...
瓷片区的设计
瓷片区是由多个展示内容要素的区域组合而成的组件，因为它的布局很像瓷砖贴片，所以得名瓷片区。 瓷片区本质上也是用于跳转到下级页面的按钮，所以很多人分不清瓷片区和快速入口之间的区别。除了样式上的差异外，瓷片区更类似商超中的展柜，将具体内容展示给用户，而且会根据运营需要定期更新，有很强的引导性，吸引用户关...
动态卡片的设计
动态卡片是用于展示用户发布的动态、评论的卡片式组件，包含用户的基本信息和发布的图文信息，也是非常常见的组件。 动态卡片的设计的主要要点，是确定内部包含几个模块，以及多少信息。最常见的模块包括用户、动态、操作、评论四个，如下图所示。不同的需求和场景，会有不同的模块组合和顺序，就需要自己去总结了。 确定...
商品卡片的设计
商品卡片，是商品展示列表中表示单一商品的卡片式组件，包含单列和多列两种模式。 多列的商品卡片使用频率较高，且因为手机的展示空间有限，主要使用的是双列的展示，很少会出现 3 列的设计。要设计双列的商品卡片，首先要确定卡片的宽度，是通过减去页面的左右边距，再确定卡片的间距得出，所以确定好页边距和卡片间距...
模态弹窗的设计
模态弹窗，就是前面提到过的模态组件的一种，主要用于在需要用户重点关注、感知到内容后再进行操作的组件，比如删除确认、开启系统权限 虽然官方有提供丰富的模态弹窗类型，但在实际项目中大多会使用自定义的样式，来匹配应用本身的设计风格。 模态弹窗首先要表现的是模态的效果，即遮挡背景的遮罩层，大多是添加一层黑色...
移动端页面设计的解析
已学会 0/8 · 知识点 0/1
登录页面的设计
掌握了控件、组件的设计方法，就解锁了界面设计中最重要的底层逻辑。但它们并不是独立存在的，需要置入到具体的页面中，而不同页面对组件的应用会有一定的要求，所以本章通过对一些常见页面的认识，来理解如何正确应用控件和组件完成界面的设计。 首先认识的是登录页，用于用户账号的输入和验证，是最基础的界面类型。可以...
综合型主页设计
综合型主页即国内主流 APP 登录后的第一个页面，往往名字也叫发现、探索、推荐页面。 它主要的作用，就是聚合产品相关的功能、服务、信息，让用户可以在这个页面进入想去的页面，或者被推荐的内容吸引并停留、点击。 后者对该页面的设计起到更关键的作用，所以首页的内容往往非常多，聚合了大量的信息和组件。想要完...
动态列表页面设计
动态列表页面是用于展示动态的用户动态的页面类型，通过聚合动态的信息流，让用户可以流畅、沉浸的浏览其它用户发布的动态。 常见的动态列表包含两种，单列和双列模式，单列的展示信息会更多但浏览效率较低，多列的则展示信息较少但浏览效率较高。多数情况下一个应用只用一种动态列表类型，但部分应用会用两种。 动态列表...
商品列表页面设计
商品列表页面就是用于展示商品的信息流页面，同理它也包含了单列和双列两种模式（卡片和列表模式）。但不同于动态卡片的是，主流的电商应用会在同一个页面中支持这两种模式的切换。 电商的列表页面的结构也是以突出商品为主，顶部基本就分页器、操作栏、搜索框等常见元素，用于对列表内容做出筛选和排序。 相对来讲，单列...
电商详情页面设计
商品详情页是用于展示商品具体信息和进行购买的页面，大家都很熟悉无需多做介绍。虽然常见，但商品详情页是个相对复杂的页面，因为页面中包含的组件模块和字段信息很多，且页面长度会很长。 所以设计前要花比较多的时间，确定页面中包含哪些模块，顺序，以及对应的字段信息。 最常用的模块包含顶部展示图、商品信息、规格...
影音详情页设计
影音详情页是电影、剧集介绍的详情页面，是个类型的统称，也包含音乐、书籍等内容的详情页。 详情页内包含的内容也比较复杂，包括基本信息、评分、简介、作者/演员、评论、相关推荐、底部操作栏等等。同样需要在前期分析页面中包含对组件内容排序和对应字段的整理。 在该页面类型中，最难设计的就是顶部的基本信息模块，...
用户设置页面设计
用户设置页面即用户进行个人账户、应用进行设置的页面，常见于应用底部导航中的最后一个选项。 用户设置页和用户个人主页不同，前者是设置型页面，而后者是社交展示型页面，它们经常被混为一谈，往往在设计的样式上也非常接近。主要的区分方法，就是该页面是否能被其它用户访问，能被访问的就是个人主页，不能被访问的才是...
表单页面设计
表单类页面，是用于向系统内输入信息、数据的填表型页面。比如注册页面本身就是表单页的一种，或者发布动态、信息认证等。 表单页由若干的表单控件组成，设计表单页面，就是根据数据填写的需要，选择合适的控件进行组装。表单类控件数量很多，但我们可以简单分成两个大类，输入型和选择型。 输入型即需要用户手动输入信息...
UI 中的视觉风格
已学会 0/2 · 知识点 0/2
夜间模式的设计
苹果在 iOS13 中，正式推出了深色模式 Dark Mode，允许系统进行浅色和深色的模式的切换。 深色模式的应用，不仅仅是控制iOS的官方应用，也建议第三方 APP做出适配，随系统的模式做出改变。所以，APP的设计中往往会增加对深色模式的设计。 虽然深色模式也允许设计师自由发挥，但要尽量在搞明白...
UI 中的投影应用
掌握好投影的使用，是必备的 UI 视觉设计基础。投影远没有大家想象的那么简单，即使软件中可以设置的参数并不多，很设计师始终没办法很好的应用投影来提升自己的设计质感。 投影的基本认识 有了光，才有影。光影是美术和摄影最核心的基础。在光学原理中，不透明体遮挡光源，会产生的影子有两部分，本影和半影。本影是...
推荐笔记
Hurricane
2024-08-13
最小字号
字号最重要的一环在于 “最小字号” 的认识，低于这个字号就无法被正常阅读，下面是应用数值： 中文最小字号：10-11 英文最小字号：9
上课困难户
2024-06-26
图标尺寸
大图标：大于 32，主要用于重要页面、功能、分类的展示 中图标：大于 20 小于等于 32，主要用于基础的页面、功能、信息的展示 小图标：小于等于 20，主要用于次要功能、信息的展示
上课困难户
2024-06-26
iOS总结
总结： iOS 中最基础的界面设计方法，就是官方组件库中有提供的组件，我们就从组件库中复制再做小修改。 官方组件库中不包含的元素，我们再独立完成。 想要画面视觉效果好，就要在色彩、投影、间距的应用中多下功夫研究和尝试。 但真实的项目界面设计对官方规范和组件的依赖不高，包含更多的自定义设计元素，所以想要正式入门，就要掌握更多的组件设计原则，样式设计逻辑，我们将在后续的章节中做进一步的分享。
上课困难户
2024-06-26
登录页面的元素
所以总结一遍就，登录页面中主要出现的元素主要包括： LOGO 相关标语 账户/手机号/密码输入框 登录/注册按钮 忘记密码按钮 协议确认勾选 手机号确认提示
上课困难户
2024-06-26
按钮大小
按钮根据使用的场景和权重会使用不同的大小，而大小的设置是以高度为准，我们可以简单的将按钮分为三个尺寸的等级： 大按钮：大于等于 44，用于登录、注册、支付等指令 中按钮：大于 24 小于 44，用户加入购物车、关注、分类切换等指令 小按钮：小于等于 24，用于查看、更多、提示等指令
上课困难户
2024-06-26
色彩规范，类似于达芬奇调色面板中的设置。
色彩配置文件（ICC，也叫色彩描述文件）是一个用来告诉系统应该如何显示色彩的规范。任何系统、显示器，都会加载这个规范来呈现色彩，相当于叠加一层 “滤镜”。它的本质作用是确保不同设备（包括印刷设备）、环境对相同色彩信息的呈现保持一致。
UX小学生
2024-06-25
当使用纯黑色做阴影时，透明度无论如何都不应该高于 20%，正常区间在 5%-15%。
我们要做的是要降低投影的透明度，这样才能让投影的表现更自然舒适。要牢记的是，当使用纯黑色做阴影时，透明度无论如何都不应该高于 20%，正常区间在 5%-15%。
UX小学生
2024-06-24
背景色的层级关系：
浅色模式下的表现为白-浅灰-白，而深色模式则是由深到浅的三个灰度。
首先是背景色，使用了三个嵌套的层级，当卡片进行叠加时使用。在浅色模式下的表现为白-浅灰-白，而深色模式则是由深到浅的三个灰度。
UX小学生
2024-06-21
表单页类型：输入型和选择型
表单页由若干的表单控件组成，设计表单页面，就是根据数据填写的需要，选择合适的控件进行组装。表单类控件数量很多，但我们可以简单分成两个大类，输入型和选择型。
UX小学生
2024-06-21
用户设置页权重低于首页，所以不能比首页花哨，建议使用填充渐变色或添加纯色背景这类简单样式的icon
然后就是高权重的入口设计，最常见的就是使用快速入口的形式。但是，用户设置页的页面权重必然是低于首页的，所以页面中的快速入口图标“花哨”程度不能高于首页，要有所收敛。建议使用填充渐变色或添加纯色背景这类相对简单的样式即可。
UX小学生
2024-06-20
因为商品图本身就带有颜色，所以 UI 元素的色彩越少越好。
在这个页面中，只会在关键的要素中填充色彩，例如价格、优惠、评分、标签等，用于凸显商品的特性，引起用户的关注并促成点击。因为商品图本身就带有颜色，所以 UI 元素的色彩越少越好。
UX小学生
2024-06-18
登录页如何选择
登录页的设计要先确定使用哪种模式，如果是打开应用直接进入，且想要背景上重点展示广告图、视频的话，就使用按钮跳转的模式。如果没有那么大的重要性，或者登录页是应用用到一半才弹出的，那么则建议使用直接输入的模式。 通常，只有按钮的模式，应用的是上下布局，上方是 LOGO、标语、品牌图或视频展示区域，下方是按钮。按钮的数量根据产品的需要决定，可以只有一个登录按钮（自动识别注册），也可以登录、注册按钮都有。
UX小学生
2024-06-13
追求操作、逻辑的正确而不是像素级的准确
临摹是最重要的设计入门实践，不仅可以提升对软件的熟练度，还可以有效吸收相关的规范和思路。除此之外，想要在这个阶段获得更大的收益，就要培养专业的操作流程和意识，并积累成习惯。 同时强调一点，我们要追求的是操作、逻辑的正确而不是像素级的准确，布局尺寸、图标、图片等内容不用追求和原图完全一致。
UX小学生
2024-06-12
信息和价格内容可能会不统一，所以默认情况通常是最小的高度，当内容超出原有高度后，卡片也会跟着增高，但是商品图维持原有尺寸不变。
信息和价格内容可能会不统一，所以默认情况通常是最小的高度，当内容超出原有高度后，卡片也会跟着增高，但是商品图维持原有尺寸不变。
UX小学生
2024-06-12
单行商品卡片的设计，通常是先完成右侧内容的排版，确定对应的高度，然后再确定左侧图片的高度和宽度，并完成最终调整。
单行商品卡片的设计，通常是先完成右侧内容的排版，确定对应的高度，然后再确定左侧图片的高度和宽度，并完成最终调整。