UI Tips

UI组件知识

底部工作栏（Bottom bars）

底部工作栏，不是底部tab栏，是Android组件类型

底部工作栏通常用于承载导航按钮，或针对具体的页面任务，提供相关的操作按钮

HUD

HUD是IOS系统级的控件类型，其与操作系统直接相关，无论是在系统和应用的任意界面，只要被触发，都会以非模态、最高优先级的形式在页面固定位置呈现

导航抽屉（Navigation drawer）

Android组件，其优点是可支持产品将导航入口个数设置为任意数量，除此之外还支持导航的层级结构

动作选项条（Action Sheets）

动作选项条不是活动视图（Activity Views），是一类专属于IOS系统的控件类型，其通常被认为是一种特殊类型的警告（Alert）

在移动应用设计中，动作选项条多用于对破坏行为的二次确认

由用户触发，提供一组与操作相关的两个或多个选项，让用户在不离场的情况下完成操作。

优点：

• 可以容纳更多选项
• 比Dialog对话框更轻便，不需要强制点击“关闭”按钮也能关闭
• 可以看到父级的信息，有父级的信息参考来辅助用户做决策

缺点：

• 选项过多会影响体验和用户决策
• 横向交互滑动有较高的交互成本

情景菜单（Contextual menu）

情景菜单是一种根据特定情境或上下文动态更改可用菜单项的界面元素

它通常出现在用户右击鼠标或长按屏幕时，根据当前操作的对象、状态或位置，显示不同的选项。这样可以提高用户的效率，使其只看到与当前任务相关的操作，而不会被不必要的选项干扰

滚动控件（PickerView）

滚动控件又名转盘控件，主要用于对多组数据执行对照选中

在移动端的产品设计中，IOS最先将其引入到系统控件中，之后Android系统也定义了类似的控件类型，并将其命名为Wheel View

Navbar自定义导航栏

此组件一般用于在特殊情况下，需要自定义导航栏的时候

Collapse折叠面板

Collapse折叠面板是一种可折叠/展开的内容呈现区域，常用于对内容进行分组和归类，以保持页面整洁，同时可以隐藏次要或不需要完整阅读的内容，缩短页面，提高屏效并减少用户的滚动操作

SwipeAction滑动单元格

SwipeAction滑动单元格通常用于实现类似左滑唤出操作菜单的功能，常见的使用场景之一就是左滑删除操作

NoticeBar滚动通知

常用于在应用程序中以滚动的方式展示通告或消息，以便在不遮挡其他内容的情况下吸引用户的注意

UI控件知识

全屏对话框（Full-screen dialog）

用户需要在全屏对话框内，执行较为复杂的操作，比如完成带有事件标题、日期、位置信息等内容条目的信息录入，这些内容条目通常会占据整个屏幕

留资页面

获取潜在客户或用户的相关资料，例如姓名、电话号码、电子邮件地址、所在地区、职业等。这些信息对于企业或组织开展营销活动、提供个性化服务、进行市场调研等具有重要价值

Popup弹出层

用于展示弹窗、信息提示、选择输入、切换等内容，支持弹出层叠加显示

IndexBar序列

IndexBar序列通常指的是antd-mobile中的IndexBar组件，这是一种用于在移动应用中实现索引栏的功能组件。它可以根据数据的拼音首字母对数据进行分组和索引，方便用户快速定位和浏览数据

SnackBar

它通常在屏幕底部短暂出现，向用户提供轻量级的反馈、提示或操作选项。例如，成功保存的信息、操作失败的提醒、删除确认等

Tabs选项卡

定义：

• 当内容/数据需要一定的分类维度进行区分，便于用户快速作出选择并切换时可以使用。
• 常见的标签页（Tabs）因构成要素的不同，可被归纳为3种类型，分别为：文本标签项、图标标签项和复合标签项。

复合标签项

构成：图标、文本、活动指示器...

优点： 内容信息对称，视觉美感度高，图标和文案互为“作证”，能更加准确地向用户传递类型信息

缺点： 因控件构成元素较多，占据了较大的页面空间

文本标签项

构成：文本、活动指示器...

注意：
这种类型的标签项，是目前应用范围最广的页签类型。使用时需格外注意控制好文本字段的长度。
如果必须要使用超长的文本字段做标签，一定要保证文本的完整展示，千万不要对文本采取换行、截断、省略等处理方式。

图标标签项

构成：图标、活动指示器...

优点： 使页面构成更加简洁

缺点： 在传达复杂内容信息时不如文本标签清晰、直接

搭配徽标使用

选项卡与徽标的组合使用，用于展示该分类的状态变化或营销信息

设计注意事项

1. 放在顶部时有吸顶效果

注意当滑动页面时做好吸顶的交互方案

2. 仅限于同一纬度内容

3. 避免多层嵌套

4. 避免文本过多

5. tab选项宽度一致

Button按钮

类型：主按钮、文本按钮、图标按钮、幽灵按钮、悬浮按钮、下拉按钮、开关按钮

CTA Button主按钮

页面的核心主按钮，又称Call-to-action（CTA）按钮，通常用品牌色填充，来引导用户执行重点操作

定义：用于引导用户进行主要操作，如注册、登录、购买等

优点：非常醒目，能够有效吸引用户注意，提高转化率

场景：如提交订单、确认重要操作、开始关键流程等

Text Button文字按钮

直接用文字作为按钮，一般会用蓝色或品牌色

定义：以文本形式呈现，可以集成到任何形状中

优点：简洁，与界面的融入度较高，不会过分干扰页面的其他元素

缺点：不容易被注意到

场景：适用于不需要强调的次要操作，如对话框中的“取消”按钮或表单中的“忘记密码？”

ICON Button图标按钮

定义：主要以图标来表示操作的按钮

优点：快速传达功能，简洁明了

缺点：单纯的图标按钮对于不熟悉该图标的用户需要一定的学习成本

场景：功能直观、操作简单明确的场景，如点赞、分享等

Ghost Button幽灵按钮

它的特点是透明的背景，通常只有一个细线边框来标识其形状，按钮内部则是用简洁的文字指示其功能

主要是作为附属操作入口，一般不单独使用

定义：也称为大纲按钮，重要但是不是页面上的主要操作

优点：视觉上较轻，适合与复杂背景或图片结合使用

场景：当设计需要轻量级按钮时，如在图片或复杂背景上的按钮，以及需要次要操作但不想分散主要内容注意力的地方

Floating Button悬浮按钮

定义：始终悬浮在页面上的某个位置的按钮

优点：非常显眼，引导性强

缺点：会遮挡内容

场景：可以用来提供便捷操作，如回到顶部；页面中最主要、最常用的一个操作，如新建内容等

下拉按钮

定义：点击后展开下拉菜单的按钮

优点：节省界面空间，提供更多选择

场景：在需要提供多个相关选项而不占用太多空间时使用，如设置菜单或表单中的“选择国家”下拉列表

开关按钮

定义：用于状态切换的按钮

优点：直观地展示当前状态

场景：如开启/关闭声音、显示/隐藏某些元素等

Dividers分割线

类型：卡片分割线、通栏分割线、留白分割线、插入型分割线、中间分割线

表单慎用分割线

使用大量的分割线会增加界面的视觉复杂度，破坏界面的整洁感。通过合理的背景和字段分组，可以减少对分割线的依赖，使表单看起来更加清晰和专业

卡片分割线

定义：将内容划分为独立的卡片或板块，每个卡片通常包含相关的内容

缺点：需要占用更多的空间，界面内容较多时可能不适用

场景：在需要强调内容独立性的地方使用，如新闻摘要、产品卡片等，使用户能够更清晰地理解信息，便于快速浏览和交互。界面也更加简洁美观，方便用户理解和阅读，层级更加清晰

通栏分割线

定义：主要使用一条贯穿整个页面的直线来完成内容分割

缺点：可能会让页面显得有些割裂，不够整体和流畅；如果使用过多可能会给人视觉上的压迫感

场景：适用于布局较为复杂、需要强调不同版块的界面，如电商平台的不同品类页面。能够划分内容层级的同时为界面节 省不少空间

留白分割线

定义：通过留出空白区域来实现分割效果

缺点：当信息层次较多时，留白分割既会浪费空间，也难以达到一目了然的分割效果

场景：当条目信息层次较少时，留白分割是比较合适的，为页面增加呼吸感，降低视觉噪音，使设计看起来更简洁，常用于现代风格的界面、移动端应用等

插入型分割线

定义：分割线的左端为非贯通状态，对齐于界面中的某些内容元素，右边贯通

缺点：如果线条太细可能不太容易被注意到；在一些复杂背景下可能会不够明显

场景：这种分割线通常与页面内的锚点（如头像、图标等）一起使用，在列表、卡片式布局或时间线中，当你需要展示有关联但不同类别的信息时，插入型分割线能帮助用户更好地理解和区分内容

中间分割线

定义：中间分割线，通常以居中方式显示于内容区域，左右两端均为非贯通状态

缺点：有时可能会限制页面布局的灵活性；可能会让页面显得比较呆板

场景：适用于文本段落之间、列表项之间或不同功能区域之间， 当你需要提供清晰的结构和层次感时，中间分割线是合适 的选择

组件选择逻辑

Checkbox多选框

当选项较多且字段长度不一时，建议将多选框对齐

日期选择器

带快捷标签选择器中标签内容尽可能简洁明了；如：使用“近7天”而非“最近7天数据”

带快捷标签选择器中标签数量最多不超过5个

录入出生年月日等具有特殊规则或用户熟悉的日期信息时，建议使用输入框而不是日期选择器，以提高操作效率

Radio单选框

带有详情信息的单选框，建议就近展开相关内容，不要用单选框触发一个弹窗

在表单中不要用单选框开启一个功能，建议使用多选框或开关来开启或关闭一个功能

单选框选项为外显组件，选项数量不宜过多，当界面空间承载有限时，可考虑使用下拉选择。

Tag标签

标签在样式上应与文字信息做区分，避免用户忽略标签的交互作用

Skeleton骨架屏

当页面整体应用骨架屏时，为避免用户对“页面刷新”和“数据刷新”产生混淆，不建议将“加载组件”和“骨架屏组件”混合使用

Textarea多行文本框

当输入的信息有具体的格式限制时（如表单、表格的内容），应使用对应格式的输入类组件，而不是多行文本框

List列表

列表适合展示多个相同结构的内容，如果字段类型过多且简短，建议使用表格

Switch开关

开关文案要准确简洁，只需表达所控制的内容，避免加入逻辑词语或与开关作用相反的内容

Tab栏

底部tab

文字形式导航栏

文字形式的导航栏是现在国内短视频社交应用常用设计手法，能清晰直观的表现功能模块，导航视觉降噪，让用户多关注内容

这类导航多在：社交、短视频、图片流应用中

图标形式导航栏

图标形式导航栏是比较少数设计手法、用户理解成本高，不容易辨认

在较成熟以培养用户心智的应用上可尝试。整体体验上不推荐使用

舵式导航栏

舵式导航栏，采用中间功能强化突出特殊设计，吸引用户注意，是比较通用的设计手法

较多出现在社交应用上，需要吸引用户进行发布内容丰富UGC

核心功能模块样式强化

这种样式与舵式导航的使用逻辑是一样的，优点没有改变导航栏常规样式开发无限过多样式调整，同时也能对功能进行突出

这是比较推荐的设计样式

品牌元素融入

导航图标LOGO融入是比较普遍的设计手法，常用在电商购物应用突显品牌，用户下滑按钮会有刷新、顶部等交互样式

改变导航背景

使用背景模糊、毛玻璃等手法改变导航背景，使得导航整体更清爽提升页面层次感

使用范围比较小

异形导航

异形导航，是比较前沿的设计手法，目前国内应用落地的并不多

Tab栏变高级

底部元素叠加

常用表现手法，适用于大部分场景

底部元素可以使用：色块、点缀物、辅助图形...

调整底部条样式

推荐使用手法、调整形状样式增强设计感的同时视觉强度不大，不会影响页面其他视觉元素

增加标签

添加标签是比较常用的视觉突出手法，一般使用在大促活动、购物商品中，主要为了吸引注意力

添加图标

添加图标是比较有趣容易凸显设计感的方式，通过图标与文字结合更具设计感

图标添加方式：主图标方式添加、点缀形式添加

整体样式调整

样式调整时比较进阶的凸显视觉方式，通常使用在视觉感较强或需要对Tab内容突出的页面

卡片

卡片设计

用图标加文字突出卖点

在设计有关商品卖点信息时，采用图标+文字可以高效简洁地传达卖点信息，这在移动端体验中，也有利于用户记住产品服务的特点，图标的搭配还可以增加页面的视觉丰富性，使品牌服务看起来更专业

用ICON装饰卡片

最快速最常见的卡片制作方式

ICON和文字的排版比较自由，可以上下也可以左右排列，背景可以是纯色也可以是渐变色

纹理装饰卡片

通过几何图形、主logo等纹理装饰卡片也比较常见

还可以加入行动按钮、利益点等元素，提升点击率。另外卡片也可以突出边距

会员卡片采用渐变背景

相比于单一的纯色背景，渐变背景可以减少页面的单调感，能够为页面增添动感和活力，提升质感，吸引用户的注意力，通过使用与品牌色相协调的渐变背景，可以强化品牌形象，提升品牌的识别度和记忆点

商品图卡片

在电商网站的瓷片区或栏目区，使用商品图片的卡片随处可见

背景可以纯白，也可以淡淡的纯色，大促期间可以是亮丽的色彩

人物图卡片

培训机构、医学等与人强相关的行业，多使用这种卡片，可以增强信任感与亲和力，在页面中体现专业氛围

插画卡片

卡片中的装饰元素主要是为了迅速识别，所以通过生动的插画，能够迅速传达点击卡片后的页面内容，提升用户决策效率

3D元素卡片

到目前为止，3D元素在各个APP中都已随处可见了，无论是页头氛围、背景图片、卡片装饰，甚至缺省页设计，已经成为主流趋势

双倍间距和圆角半径

对图标元素距边缘采取双倍间距，以及使较大的形状上使用两倍大的圆角半径，使界面视觉看起来更加平衡

毛玻璃卡片

相比于纯白背景，毛边玻璃效果通常具有一种柔和的美感，可以为设计增添一丝精致和现代感，使得界面看起来更加优雅和专业，当卡片放置在复杂或色彩丰富的背景上时，毛边玻璃效果可以帮助减少背景对卡片内容的干扰

视觉更舒适的超椭圆

对比圆角矩形，超椭圆图标具有独特的形状，一种介于圆形和矩形之间的几何形状，在视觉上提供了圆形和矩形的平衡，既有圆形的柔和，又有矩形的稳定，使得图标在视觉上更加和谐，可以增加界面的视觉吸引力，传达品牌或产品的创新形象

提高卡片信息阅读效率

遵循尼尔森“F”型模型原理，在做状态类的页面时，卡片上的重要信息放置在用户首先扫描的区域，减少用户不必要的垂直滚动和水平移动，符合用户自然阅读习惯的布局可以提供更加流畅和愉悦的阅读体验

卡片间距留白

过多的文字和缺乏留白可能会导致视觉上的压迫感，适当的间距和留白可以减少用户的视觉压力，提高阅读舒适度，合理的留白可以为设计带来平衡感和秩序感，使得卡片看起来更加整洁、优雅和专业

利用视觉层级图突出重要信息

通过视觉层级，设计师可以引导用户的注意力到最重要的信息或操作上。这有助于用户快速识别和理解卡片的核心内容，提高交互效率，有助于用户理解信息的结构和逻辑关系，从而优化整个界面的信息架构

图片元素重叠

配合高斯模糊背景，可以有效地将用户的注意力集中在卡片的前景内容上，头像与背景的重叠也营造出了空间感更将页面连成了一个整体，避免左图过于割裂感，创造出一种柔和、优雅的视觉效果

操作类卡片优先使用按钮

在强操作类卡片中使用线性图标过于单薄，优先使用按钮可以提高用户的操作效率，用户看到按钮时，会自然地理解这是一个可以执行的动作，从而明确其操作意图

卡片投影

避免投影颜色过重生硬

默认直接生成的投影颜色重生硬，我们将透明度降低，再加大模糊度，让投影柔和舒服

注意投影颜色不要用纯黑#000000

注意元素固有色

若彩色卡片设置投影，可以使用卡片固有色调整明度后的颜色作为投影颜色，让投影柔和舒服。图片投影可以复制原有图片制作投影

提炼背景环境色

除了固有色外，投影投到有颜色的背景时，投影颜色也会跟随背景颜色变化而变化

不要过度使用

不是所有地方都是使用投影就变高级，例如：避免在有描边、禁用按钮、多个按钮连续等情况下使用投影

页头设计

纯色页头

纯色是最简单的页头装饰方式，高度不能太高，一般200px内，可放置ICON等元素，也可以是很矮的头，只放标题或TAB

渐变色页头

渐变色作为页头，高度可适当调高，内容可以丰富些，如页面标题、icon等元素。底部边缘可以是圆弧、不对称形状，也可与背景融合

纹理元素页头

如果需要展示营销话术、活动名称等，可以使用纹理元素，即用点线面、LOGO等元素，组合成丰富的图形，放置在渐变色或纯色背景上

插画元素页头

为了更加生动的突出页面主题，可以在顶部使用插画，与标题融合，能更加快捷地传达页面内容，提升用户视觉体验

照片抠图贡头

在需要传达行业专业性和产品品质感时，可考虑将人物或产品进行抠图展示在页头

可用于教育培训、金融、汽车等行业中

照片蒙层页头

在旅行、地理、历史等主题页面中，页头可以直接使用加蒙层的照片做为背景

需要选择符合产品调性、高质量的图片

3D元素页头

用3d元素作为装饰，是现在比较常用的页头设计方式，可提升整个页面的质感

需要注意的是3D元素需要保证精致，与背景融合

按钮规范

按钮高度

推荐按钮的高度是文字的三倍左右

按钮宽度

需要考虑种类、最大、最小、临界值等因素

大按钮会根据页面内容来制定按钮的宽度

小按钮需要给出临界值，如4是临界值，小于4个字时，都按4个字的宽度

超过4个字，需要给出左右间距

按钮颜色

一般选择项目规范中的颜色即可

有渐变，首选水平渐变，有角度的渐变更难实现

圆角大小

根据按钮的大小调整圆角大小

按钮状态

正常状态、按压状态、不可点击状态，要统一

按钮搭配（突出优先级）

有两个按钮时，要有主有次

层级分明的按钮布局可以帮助用户在视觉上更好地理解界面的结构和功能，用户可以根据按钮的层级快速找到他们想要执行的操作突出优先级按钮可以在一定程度上提升转化率

设计技巧

视觉层级展示清晰

当用户面对信息密集的界面时，设计师可以引导用户的注意力到最重要的信息或功能上，确保用户不会错过重要内容，并保持一定的留白空间，减轻视觉负担

提高屏幕利用率

更高的屏幕利用率意味着可以在有限的空间内展示更多的内容，减少用户的滚动和导航操作，用户可以更快地找到他们需要的信息或功能，减少了认知负担

配色比例采用6-3-1

这种比例明确了主色、辅助色和强调色的角色，确保了设计中的颜色分布均匀，避免了任何一种颜色过于突出或压倒其他颜色，从而创造出视觉上的平衡

如第二张图，青绿60%，天蓝色30%，红色10%

高饱和颜色区分数据类目

后台系统数据颜色尽可能采用明亮的高饱和度的颜色，更加鲜艳和醒目，能够迅速吸引观众的注意力，使关键数据点或信息更加突出

空页面情感化设计

情感化设计是一种旨在增强用户与产品之间情感联系的设计方法，通过幽默、温馨或激励性的设计元素，可以提升用户的整体体验，使他们在使用产品的过程中感到愉悦