火星网校
你必须要知道的移动端UI组件设计宝典
发布时间：2023-12-07 15:29:02 浏览量：152次
作为一名UI设计师，我们经常要进行PC端和移动端的设计任务，上一次给大家分享了：
，这次给大家带来移动端UI组件设计详情，尤其在我们APP、小程序、H5页面设计中，我们要使用和熟知各种的 UI组件，今天给大家总结了关于移动端UI组件，希望可以在工作中帮到你。
什么是UI组件
UI 设计组件（UI KIT），直译过来就是用户界面成套元件，是界面设计常用控件或元件，「组」是设计元素的组合方式，「件」由不同的元件组成。
组件的优势
1、保证一致性 Consistency
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
2、反馈用户 Feedback
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
3、提高效率，减少成本 Efficiency
简化流程：设计简洁直观的操作流程；清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
组件详解
一、页面布局 Layout
1、布局 Layout
A. 左右留白，布局控件，多用于页面整体布局
B. 上下留白，布局控件
二、导航组件 Navigation
1、导航栏 NavBar
导航可以解决用户在访问页面时：在哪里，去哪里，怎样去的问题。
2. 侧边导航 SideBar
可将导航栏固定在左侧，提高导航可见性，方便页面之间切换。适用于页面内的信息导航展示。
3. 抽屉式导航 DrawerBar
用于在屏幕边缘显示应用导航等内容的面板，是 Android 推荐的导航方式，常见于该平台应用。
4、菜单 Menu
在一个临时的面板上显示一组操作。
用法指南：
A. 至少包含 2 个以上的菜单项；B. 不应该被当做主要导航方式。
5、宫格 Grid
宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航
6、气泡 Popover
在点击控件或者某个区域后，浮出一个气泡菜单来做更多的操作。如果设置了遮罩层，建议通过点击遮罩层的任一位置，进行退出。
7、标签页 Tab
用于让用户在不同的视图中进行切换；标签数量，一般 2-4 个；其中，标签中的文案需要精简，一般 2-4 个字。
8、分页 Pagination
当数据量过多时，使用分页分解数据。
9、分段器
由至少 2 个分段控件组成，用作不同视图的显示；是 iOS 的推荐组件。
用法指南：
A. 和 Tabs 功能相似，尽可能避免一个页面中同时出现这两个组件B. 可以搭配 NavBar 一起使用，用于显示多个视图，分段数一般为 2 个C. 单独放置一行时，分段数最多为 5 个；文案需要精简，一般 2-4 个字D. 尽可能保持文案长度一致
10、标签栏 Tabbar
位于 APP 底部，方便用户在不同功能模块之间进行快速切换。
用法指南：
A. 用作 APP 的一级分类，数量控制在 3-5 个之间B. 尽可能保持字数相同，文案要精简，一般2-4个字C. 图标设计风格要一致，保持视觉大小统一。
11、索引栏 IndexBar
点击索引栏是会自动跳转到相对应的锚点位置；多用于地区选择、通讯录-联系人的快速定位等。
12、分类选择 TreeSelect
树型选择控件，用清晰的层级结构展示信息；多用于商品分类的展示。
写在最后
这次的关于移动端UI组件：布局和导航组件的分享就到此结束了，下一期会继续给大家带来其他UI组件的讲解，我们下期精彩继续！
请私信我回复“666”，为严哥打Call~，还有更多惊喜哦~
.............................................................
UI严选—越努力，越幸运
热门课程推荐
热门资讯
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
2. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
那么,要学习UI设计就要学习哪些课程呢? 其实,UI设计课程涉及到许多领域,一般分为艺术设计课程、设计辅导课程、图形课程、测试课程、动画示范课程等几...
-
8. Photoshop操作教程：自制电子印章 | PS技巧详解
想要学会制作电子公章吗？跟随本教程，详细介绍Photoshop操作步骤，让您轻松掌握PS技巧，制作精美电子印章。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
学习平面设计要用到哪些软件？随着社会的发展，平面设计在我们日常生活中越来越重要。想了解平面设计软件都有哪些吗？本文为您介绍Photoshop、CorelDRAW、AI和CAD这四款必备的设计软件。
最新文章
