01.搜索

1.1搜索样式

一般包括输入框式搜索，图标按钮式搜索；

1.2搜索方式

 

a. 文字搜索

    顾名思义就是在输入框中输入关键字进行搜索，在PC端和移动端都有使用；在移动端点击输入框即可触发键

   盘进行输入；

b. 语音搜索

    语音搜索的出现解决了不方便打字的问题，还在音乐app中得到广泛应用，听歌识曲的功能解决了许多网友

    听到好歌而不知道名字的问题；

c. 图像搜索&智能识别              

    随着科技的进步图像搜索中不仅是静态图片的搜索还有智能识别搜索，这类搜索在电商平台和识物搜索类平台

     广泛应用，解决用户无法准确描述商品的问题；PC端目前只能对现有图片进行搜索，而移动端可以现场拍照

     或者智能识别搜索；

1.3搜索功能的“黄金搭档”

 

a. 搜索历史

    用户可以看到自己的历史搜索记录，方便再次搜索；

 

b. 猜你喜欢

    根据用户搜索的记录来推荐搜索内容，减少用户思考时间，同时也赋予了产品温度。在抖音这类产品中视频

    内容与”猜你想搜”紧密联系，使推荐内容与用户想了解的内容更加贴切，增加了推荐的成功率；

 

c. 热门搜索

    将时事要闻、搜索量大或者运营人员想让你看到的信息推荐给用户，可以让那些漫无目的的用户更多选择；

 

d. 智能纠错

    在用户给予用户反馈时会检查用户搜索的关键字，并且将纠正后的信息同时反馈出来，但是并不会打断用

    户操作；

 

02.金刚区&瓷片区

金刚区在移动端是一个核心功能区，因为金刚区可以随着业务目标而进行改变、调整，像变形金刚一样灵活，故称其为“金刚区”；

2.1金刚区的作用

金刚区的主要作用有两点：一是业务导流，为不同的业务模块进行引流，将主页面的流量分发到其他子页面中；

                                            二是功能选择，为用户提供不同的功能服务；

 

2.2金刚区的样式有哪些？

 

a. 实物图标型

    主要出现在电商类平台，以当前主营业务具有代表性的商品实物图作为某类商品的图标；

     优点：表意明确，阅读成本低；

     缺点：缺乏设计感，视觉比例难统一，用户可能误会只售卖单一产品；

 

b. 主副层级型

    按照图标的使用频率，将图标以主副形式展示；

    优点：层级清晰，高频功能更方便用户使用；

    缺点：低频功能无法吸引用户，时间久了，用户可能不记得有此功能存在；

 

c. 图型图标型

    线性图标：由包括直线、曲线、点在内等元素组合而成的图标样式；

    面性图标：是以块(面)的形式去表达图标的语义；

    对于图标样式的选取，要从功能类型以及功能数量俩个维度考虑；线性图标的视觉冲击力小，而且容易统一

    视觉比重，所以一般功能性产品且有较多数量的功能适用线性图标；面性图标的视觉冲击力较大，可以引导用

    户点击，所以适用于业务导流型的产品；

    

d. 节日/运营文字型

    以运营文案作为图标显示内容，结合当前主题进行视觉设计；

    优点：突出运营主题，烘托气氛

    缺点：用户无法识别内容，需借助底部说明文字，时效期短；

瓷片区就是板块拼接在一起形成的运营位,视觉上像一块块瓷片贴在版面上，给人一种空间感,所以叫做“瓷片区”；

 

2.3瓷片区的作用

瓷片区是帮助业务推广产品，帮助用户更快寻找自己所需的产品；适用于平台、电商、娱乐、属于流量导流出口。

 

2.4瓷片区的类型有哪些？

 

a. 实物图+引流文案

优点：识别性高，视觉冲击力强

 缺点：对于图片质量要求较高

适用平台：适用于电商类、旅游类、美食类、酒店名宿类平台，因为这些产品即是用户可以购买到的真实产品，可以让用户感知产品的代入感、质感、味觉等；

 

b. 插画+引流文案

优点：设计感强，插画实现成本低

 缺点：含义表达不直接，需要文字辅助

 适用平台：适用于金融类、虚拟类、教育类平台，因为这些平台是偏概念型的产品，每个产品都有多个含义 融合在一起的，所以以插画形式更为合适；

2.5瓷片区的布局有哪些？

   

a. 左右布局

以文案为主，文案图片比例为6:4，视觉动线由左上到右下，符合阅读顺序，方便阅读；

 

b. 上下布局

信息层级清晰，突出重要信息；

 

c. Z轴布局

图片文案Z轴前后空间布局，纵深感强，视觉上更加有层次感；

 

03.内容布局

内容如何布局对于产品来说是非常重要的，这部分会介绍列表布局、网格布局、瀑布流布局、feed流、拼图式布局、全屏显示布局、混合布局等七种布局方式；

3.1列表布局

列表布局就是将缩略图和文字信息组合而成的部分，按照顺序进行排列的一种布局方式。其中对于图片的质量要求并不高，起视觉引导作用，重点突出文字，常见使用在电商、资讯、内容社区类平台；

优点：遵循由左到右，至上而下的阅读顺序，符合“F”型的浏览动线，方便用户快速扫视，对比。屏幕利用率高；

缺点：样式单一，容易产生视觉疲劳；

3.2网格布局

将内容区域划分为网格，按照网格的布局排列信息；

 

a. 大图网格布局

大图网格布局就是只展示一张大图片，由于图片占比较大，所以一屏会展示1-2张图片，一般用于产品数量较少，突出品牌感的产品中，通常在图片类、住宿类、租房类等平台；

优点：占比大的高质量图片可以展示产品细节、质感，而且由上而下的浏览顺序更加方便信息有效传递；

缺点：要求图片质量高，需专人维护，由于屏幕利用率偏低，用户无法做出对比；

 

b. 双列网格布局

双列网格布局就是将屏幕一分为二按照左右网格的分布排列内容，图片与文字信息上下排列；

优点：屏幕利用率高，可展示4-6条信息，方便用户查看和对比；

缺点：文字信息展示空间有限；

 

c. 三列网格布局

三列网格布局就是将屏幕一分为三分布排列内容，也叫宫格布局，图片与文字信息上下排列；

优点：屏幕利用率高，可展示6-9条信息；

缺点：文字信息弱，图片质量差，趣味性差，排列单一，视觉容易疲惫；

 

3.3瀑布流布局&feed布局

瀑布流就是按照内容占比的大小进行空间分布的一种布局(可以是单列也可以是双列布局，这里详细介绍双列瀑布流),由于内容的占比长短不一，而且可以无限加载的特性故称为瀑布流。feed流在布局样式方面可以说是包含于瀑布流中的，与瀑布流不同的是feed流的内容是根据用户喜好进行排列的，因此feed流有很好的沉浸感；

优点：根据内容划分屏幕占比，灵活显示、内容数量多。

缺点：因为数量没有限制，需要进行预加载，而且小面积多内容可能被忽略；

3.4拼图式布局

拼图布局就是将几个部分进行拼接布局，一般用于专题页、推荐页、移动端瓷片区，在PC端结合删格使用；

优点：通过内容占比的大小产品主次层级表达更明确，样式上更活泼；

缺点：复用率低，样式编辑成本高；

 

3.5全屏显示布局

全屏幕展示一般用于短视频、直播类产品的移动端，整个屏幕都是展示区域。

优点：视觉冲击力强，吸引用户沉浸式浏览；

缺点：需要进行预加载，用户无法预知下一个内容；

3.6混合布局

由于各布局都多多少少有缺点，我们可以将他们组合使用，尽量突出优点。

04.常见导航类型

导航的实质就是提供足够的指引帮我们沿着路标找到深层次的内容，导航类型包括底部标签式、舵式、抽屉式、宫格式、侧边列表式、tab式、面包屑式、下拉式、分页式、步骤条式、Anchor 锚点式导航；

 

4.1底部标签式导航

底部标签式导航是比较常见的一种导航，一般展示3-5个标签入口。

优点：入口清晰，操作路径短，方便切换；

缺点：功能无主次，扩展性差；

4.2舵式导航

舵式导航是底部标签式导航的一种扩展形式，中间的按钮做的像船舵，两侧有其他操作，其中核心按钮会放置中间；

优点：凸显核心功能入口，操作路径短；

缺点：扩展性差；

4.3抽屉式导航

抽屉式导航的核心是“隐藏”。 隐藏非核心的操作与功能，不会影响用户专注度， 一般用于二级菜单；

优点：节省页面空间；

缺点：由于隐藏的原因会降低用户对产品部分功能的参与度；

4.4宫格式导航

将入口全部集中在同一个页面中，各入口相互独立，没有太多的交集，无法跳转互通。往往用在二级页作为内容列表的一种图形化形式呈现，或是作为一系列工具入口的聚合；

优点：入口展示清晰，操作路径短，扩展性强；

缺点：布局样式单一，返回路径长；

4.5侧边列表式导航(PC端)

侧边导航就是由多个列表层级组合而成的导航；

优点：结构清晰，扩展性强；

缺点：布局样式单一，无优先级之分；

4.6 tab式导航

一般用于二级导航，当内容分类较多的时，采用顶部标签导航设计模式。

优点：操作路径短可左右滑动，扩展性强；

缺点：操作区域小，如果切换后页面差别不大，用户可能会产生疑惑；

4.7 面包屑式导航&步骤条式导航&Anchor锚点式

 

a. 面包屑式导航

一般用于PC端，将各信息层级都显示出来，像利用面包屑做路径标记一样。

优点：方便用户知道自己处于什么位置，可以快速切换到其他页面，降低跳出率；

缺点：面包屑网站导航路径是线性结构的，因此网站内容必须划分的非常清晰，且不存在交叉；否则，面包屑导航的路径就不是唯一的，同一分类可能出现不同的路径中，让用户感到困惑；

 

b. 步骤条式导航

引导用户按照流程完成任务的导航条，用文字描述加按钮的形式来表示一个流程的处理进度。

优点：将复杂的流程简单化，用户可以知晓整个流程的发展、可以灵活切换页面，对于当前状态、进度有清晰的认识；

缺点：需要对当前页面的结果进行验证，并且做出及时反馈；

 

c. Anchor锚点式导航

用于跳转到页面指定位置，只需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。

优点：用户可以快速切换到其他页面，降低跳出率；

缺点：需要将内容结构划分清晰；

 

4.8 下拉式导航

下拉式导航一般是隐藏起来的，点击隐藏图标即可展示。

优点：节省屏幕空间，与抽屉式导航不同的是下拉式导航可以出现在页面的某个局部，而抽屉导航会占据页面的一侧；

缺点：隐藏的功能会增加新用户的学习成本；

4.9 分页式导航

一般用于PC端，用于多条内容的展示，以分页的形式展示，用户可切换跳转到其他页面。

优点：方便页面良好的展示信息，减少开发的工作量；

缺点：用户无法预知想要的内容在哪个页面，需要逐条查看或者结合筛选、搜索一起使用；

05提示与加载

5.1 提示框的作用

提示框的作用有两点：

a. 提示用户--用于用户操作时，提示用户二次确认可以减少用户的误操作；

b. 提供用户知情权--告知用户当前发生的情况，让用户可以有一个预估；

 

5.2 提示框的类型

提示框可按照是否需要用户操作来分类为模态和非模态以及加载提示三种：

5.2.1 模态提示框--需要用户对提示框内的内容做出响应；

a. 模态对话框

用于提示用户做一些决定，或是完成某个任务时需要其他额外信息，模态对话框可以是按钮式的应答模式也可以

是文字数据的填入；

b. Actionbar

Actionbar是模态对话框的一种延展形式，当选项数量超过3个时，用户会有选择负担，所以出现了Actionbar；   

c. 模态警告提示

用于展现用户需要关注的信息，需要用户点击关闭按钮提示会消失；

d. 气泡确认框

目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户或需要用户做出选择；

e. 结果提示

用于反馈一系列操作任务的处理结果提示，需要用户做出响应后页面才会消失；

f. 弹款提示

弹框提示一般由图片、文字、关闭按钮组成，由于视觉信息丰富所以多用于活动、运营方面，需要用户点做出应

答才会消失，算是模态对话框的一种延伸；

5.2.2 非模态提示框--及时给予用户当前操作反馈，用户可以不必对提示框内的内容做出响应；

a. Snackbar提示

 通常出现在屏幕的上方或是下方，会在用户上下滑动后消失，也可有关闭按钮点击关闭。Snackbar中可包含文

字链接，不影响用户在屏幕操作，屏幕上同时最多可显示一个Snackbar；

b. Toast提示

对用户当前的操作给予反馈，用户不需要对弹框内容做出响应，相对的用户也无法对Toast提示做控制，等到默认时长结束后会自动消失，toast提示的内容可以是文字也可以是图标；

c. Notification提示

全局展示通知提醒信息，PC端可以出现到上下左右的四个角落，移动端一般展示在屏幕上方；移动端Notification提示可以由用户滑动滑走，也可以等到默认结束时长后自动消失；PC端一般有关闭按钮，点击可以关闭也可以等到默认结束时长后自动消失；

5.2.3 加载类提示--这期间用户不可操作页面；

 

a. Spin加载中提示

用于页面和区块的加载中状态，一般常见的是加载动效图标，后来为了增加品牌记忆会将品牌IP形象融入，这期间用户除了退出无法做其他操作。加载提示可以告知用户此时状态，而且缓解用户焦虑；

b. 兜底加载提示&色块加载&模糊加载

此类加载一般用于新页面的加载提示，将新页面未加载出来的内容用大小不一的图形或者色块或者模糊图片表示，可以被Spin完全代替，但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验，缓解用户焦虑；色块的颜色可以有代码直接写入可以快速加载出来，

c. 进度条提示

在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态，通常会结合百分比给予用户直接的进度；用户此段时间无法操作；

5.2 加载的作用

用户与产品互动时等待的这段时间就称为加载，加载的作用就是及时向用户反馈当前的系统状态，缓解用户焦虑；

 

5.3 加载方式

a. 预加载

预加载顾名思义就是用户在当前页面时，加载是不停止的，当用户浏览下一个页面时就不需要等待加载了，提供了更好的用户体验，但是加重了服务器的负担；

b. 懒加载

与预记载恰恰相反的是懒加载，只加载用户当前的页面，需要用户主动向服务器发送请求后加载，一般需要用户下拉或者上划加载；

c. 智能加载

当用户当网络状态不同时，加载的内容也不同，比如用户连接Wi-Fi时，视频会自动加载，当用户连接4G网络则视频需要用户点击播放后再加载播放；

d. 分步加载

当文字、图片、视频都存在的情况下。会先加载文字，图片然后是视频；

 

 

06数据录入

数据录入这部分会介绍表单以及表单中的一些组件

 

6.1 输入

a. 输入框

用户通过键盘打字输入信息，为了提高填写效率，输入框会结合其他功能使用。

（1）基础使用--仅有一个输入框，用户输入信息，一般会对输入信息等长度做限制；一般用在信息收集中；

（2）结合标签使用--例如邮箱地址、IP地址这类信息的格式有一定的规律，结合标签使用发表用户填写，而且

               不会给用户压

（3）结合按钮使用--例如搜索框，会在输入框中加上搜索功能；

（4）文本域--多行信息输入，通常也会设置文本的长度，文本可以多行展示，常用的评论、发表等模块；

b. 数字输入

为了输入信息的准确性，总结集中在数字输入部分一般不需要用户手动输入的组件；

（1）步进器--一般出现在电商购物中，数量小时可以点击加减按钮来更改数量，数量较大时可以手动输入数量，手动输入时要匹配数字键盘，方便输入；

（2）滑动输入条--当表单中存在一个选择的值或者范围时可以用滑动输入条来输入信息；

c. 日期时间输入

当用户需要输入一个日期或时间时，可以点击标准输入框，弹出日期面板进行选择；

6.2 选择

a. 单选框

用于在多个备选项中选中单个状态，会有一个默认值，和 Select 的区别是，Radio 所有选项默认可见，方便用户在

比较中选择，因此选项不宜过多；

b. 多选框

在一组可选项中进行多项选择时；

c. 联级选择

当需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。从一个较大的数据集合中进行选

择时，用多级分类进行分隔，方便选择。比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。

6.3上传

上传是将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器上的过程，移动端一般是打开文件夹进行选择，图片、视频也可以拍摄后上传，PC端需要将文件拖入或打开文件即可上传；

 

6.4智能识别录入

智能识别录入可以快速录入信息，用户可以通过复制、拍摄通过智能识别将信息录入；

07按钮&标签

按钮主要包括行为召唤按钮、悬浮按钮、标签按钮、开关按钮；

行为召唤按钮

a. 行为召唤按钮

行为召唤按钮目的是通过设计引导用户点击，文案通常是动词+名词；

b. 悬浮按钮

悬浮按钮是悬浮到界面之上的，不会影响用户操作，当用户对当前页面进行操作时悬浮按钮会自动隐藏或者可以关闭，一般为某个功能或活动的快捷入口；

c. 标签筛选按钮

标签按钮一般用于筛选条件，方便用户提高操作效率，视觉冲击力比较弱；

d. 状态切换按钮31

开关按钮就是两种相互对立对状态切换；

标签就事物抽象出来的定义，方便用户标记和机器识别。它的作用是传递信息、交互操作；

a. 传递信息

无论是文字标签还是图形标签最重要的是准确传递信息，让用户产生正确的联想，引导用户下一步操作；

b. 交互操作

标签设计的最终目标是帮助用户完成交互操作，标签分为可点击和不可点击两种，可点击状态可以为内容导流，点击即可跳转到相应页面，不可点击的标签是辅助业务模块；

以上文章内容仅是个人学习归纳，如有错误请斧正，共同学习进步。