app 界面设计读书笔记分享

没啥介绍的，我只是来甩干货的。

这篇笔记基本概括了目前app界面设计中常用的大部分控件及使用方式，适合入门观看。

操作面板

操作面板这种UI组件用于显示与特定内容的对应备选操作。

与导航栏和底部操作栏这种全局操作栏不同，操作面板主要出现于内容区域，根据内容不同，可以选择的操作面板模式也不相同，大致分为以下四类

第一，条状模式

条状模式直接显示于内容区域，并且位置固定，这种模式虽然占据一定的显示区域，但明确了可以操作的功能，一般使用于操作频繁的功能。

第二，叠加模式

是一种悬浮在界面之上的操作面板，在不需要操作时自动隐藏，需要操作时呼出，这个太重要了，我以前下载过一个软件看图片底部的操作面板总是挡住一大截，很不爽。

第三，下拉式菜单模式

这种模式是一种隐藏的操作面板，需要操作时点击展开，适用于操作功能多，而又以内容为主的界面。

第四，滑块模式，

主要用于以列表形式展现的内容，一般操作方式是按住一个列表往左滑动，露出操作区域。

每种操作面板模式都有各自的优缺点，设计时还是要根据app类型和使用场景来定夺。

标签式导航控件

标签式导航控件是一种位置相对固定的，用于在全局页面中跳转的UI组件。（总结的更拗口了）

大致分为以下五种模式

1，标准模式（安卓）

安卓标准模式导航控件在页面顶部，一般属于二级导航。

2，底部布局模式（苹果标准模式，现在通用）

属于一级导航，地位无可动摇，最多五个图标。

3，下划线模式

原文如下:与标准模式不同，下划线模式的特征是通过文本标签下方的下划线来表示当前选中状态。

这tm和标准模式除了样式不同还有什么区别，凑数用的吧！

4，滚动模式

当标签过多，界面放不下时，可选用这个模式，左右滑动标签，可显示界面以外的标签内容，同属于二级导航。

5，抽屉模式

书中介绍的估计是过时的样式，不能收起来始终显示在界面一侧，我给他更正一下。

抽屉模式，一般位于界面左侧，可放置更多标签，属于一级导航，只是相较于底部标签，使用频率没那么高，所以平时隐藏在左侧界面以外，点击面包屑标呼出。

滑动导航控件

滑动导航是指以滑动屏幕的方式来代替点击按钮的操作行为。

1，标准模式

标准模式没有具体的按钮或图标控件，一般用于图片或邮件等内容性的元素的浏览。由于目前人们对智能机已经非常熟悉，所以即使没有提示也能明白在内容浏览时可以滑动。

2，页面指示器组模式

该模式指在一些特定的页面下方显示一组指示器，用户可以根据指示器判断当前有多少个页面和目前处在哪个页面之上。

他妈的我来用人话说说

就是在一些有固定数量页面的时候，使用该模式，该模式会在下方显示一组圆点（不一定是圆点，也可以是其他形式，），通常有几个页面就显示几个圆点，并且当前页面的圆点作特殊处理。

3，标签式导航控件模式

可以左右滑动的标签式导航控件，一般数量不宜太多，嗯。

下拉式菜单

下拉式菜单是一种相对位置固定的控件，点击该控件会垂直弹出一个列表，并且，列表条目数最多不宜超过七个。

1，标准模式

控件默认显示文字一般要与弹出列表内容相关。

2，控制模式

控制模式没有默认显示文字，每一条列表条目代表一种界面状态或显示内容的范围，例如，当前控件显示文字为小狗，则界面内显示的内容就是跟小狗相关的，状态控制同理。

3，气泡模式

和分段导航控件一个尿性，就是更换个样式而已，功能上没有卵区别，唯一的好处在于控件可以用图标代替。

深入式菜单

深入式菜单就是一个超级下拉菜单列表，可以内嵌好多层，不过一般三层已经是极限，再多的话，不仅操作起来变得繁复，界面也会异常拥挤。

还有一种模式是使用全屏列表的形式展现第一层，点击其中一个条目，跳转到新的界面进入更深的层级。

和深入式菜单相同，具有多个层级的列表，但折叠式菜单一般只有两个层级，所以设计一些层级较浅的菜单时可以用。

折叠式菜单由于是垂直展开次级列表，所以，在设计时，要想法把一级列表项与次级列表做出区分，最常见的方法是利用不同方向或样式的剪头，当然有更好的设计样式更好。

气泡模式同其他形式菜单。

仪表盘式导航控件

（跳板式菜单）

好高大上的名词哦，吓死爸爸了。

喝喝，九宫格布局而已。

九宫格布局排列的图标一般都是使用频率相近的功能，并且使用方式比较自由，既可以作为一级导航，也可以作为二级导航使用。

九宫格布局的最大优势在于，一次可以显示最多4乘4个图标或选项，比标签式导航显示的多，比抽屉式导航显眼。

缺点是点击其中一个跳转出去之后，想要再点击其他图标或选项时只能重新返回该界面，到底要怎么用，还是要根据具体设计情况而定，以尽量减少用户不必要的操作为准。

返回/home

智能手机一般都是从左跳到右边，所以返回图标一般都是指向左边。

home图标的功能是回到应用初始的界面，即主页，一般默认为一个小房子图标，不过现在也有所变化，有的应用把自身的品牌形象作为home图标，这样不仅加深用户对应用的认同感，也更有特色。

另外，在一些内容类应用中，home图标也承载着更多的功能，比如点击可以回到顶部或直接刷新。

向上/向下滚动按钮

这个在手机上用的到吗？

报告老师，这有一个作者凑字数。

无限分页列表

在界面内容很多的情况下，使用无限分页列表可以在不跳转的前提下，继续读取浏览后面的内容。

一般应用在搜索结果的浏览或以内容为主的列表内容。

1，标准模式

标准模式是目前最常用的无限列表模式，它可以在目前读取的内容向上滑动至顶时，自动加载后面的内容，而无需另外操作。

2，按钮模式

顾名思义，即 当滑动至底部时会出现一个加载更多的按钮，点击按钮即可加载更多内容。

分页按钮

报告老师，这作者又tm在凑字数！

刷新控件

刷新控件是一种用于更新列表状态的UI组件，用户可以通过刷新查看到最新的内容。

标准模式为下拉刷新，下拉刷新一般用于列表内容较少的界面，而有大量列表内容如无限分页列表那样的，则下拉刷新不如刷新按钮方便。

侧划式菜单（抽屉式菜单）

侧划式菜单是一种与标签式导航层级并列的全局导航控件，它的优势在于可以放置比标签栏更多的功能按钮。

缺点是所有功能都被隐藏在汉堡图标里面，用户不点开它就不会知道他有什么功能，因此，侧划式菜单所承载的功能的重要程度，通常比标签导航要次一级。

垂直列表

垂直列表是一种最常见的UI控件，适用范围非常广，种类也不一而足，如导航列表，搜索列表，内容展示列表等。

导航列表是一个个功能的入口，而该列表的设计，一般遵循相似功能为一组的原则进行设计，把不同的功能组以间距或其他方式分开排列，有助于用户查看和使用。

而其余的种类，则殊途同归，基本都是详情页的入口，所以，这类列表设计的关键在于，列表上放置的内容的选择，列表上的内容都是从详情页摘出来的，包括图片，列表内容的选择，决定了列表的侧重点，而如何才能达到最佳的设计方式，还是要根据具体的设计内容具体问题具体分析。

网格列表

网格列表主要应用于图片的浏览与展示，一般横排2到4列，有时也可以在图片下方叠加或罗列标签，写上该图片的相关信息。

轮播面板

轮播面板可以在一块固定区域内以走马灯或循环播放的形式展现内容。

1，标准模式

标准模式在固定区域内同时显示多个图片或条目，并且，最后一个图片或条目只显示一部分，用于提示用户可滑动查看更多。

2，控制模式

在控制模式下，轮播图一般位于界面下方，用于控制界面中主体元素的变化，如给图片增加滤镜的界面效果。

3，展板模式

这是一种非常常用的轮播模式，通常在展示多张大图，如商品信息时使用，一般可滑动查看，也可自动轮播。

4，导航模式

不建议使用，略。

时间轴

时间轴并非一种单独的UI控件，而是以时间为轴心罗列条目的一种形式。

而时间轴设计的核心在于，用户在进入时间轴界面后，第一眼看到的是最新的条目还是最旧的，这个需要根据不同的应用场景做出不同的判断，如搜索结果页面，第一屏显示的一定是最新发布的内容信息，而评论列表就不一定了，它可能会根据用户需要而优先显示最新的或最旧的，如知乎评论区（他么就会占沙发，评论的一点营养都么有，不好意思跑题了）他就设置了一个按钮，让用户自己切换优先显示哪种时间轴。

不过有一点是可以确定的，在消息模式（就是像QQ微信那样的聊天界面，就喜欢讲这样的大白话。）下，优先显示的一定是最新的条目。

文本框

文本框主要用于登陆注册时的id和密码输入，以及好友之间文字消息的编辑与发送，或，长文本内容的编辑与发布。

尚未输入任何文字的文本框会显示浅色的提示文字，称为占位符，如果使用了占位符，那么就不需要再额外增加文本标签来说明文本框的功能了，以减少文本框占用的面积和信息量。

文本框的五种属性

邮件地址

电话号码

url

.数字

搜索

文本框的三种模式

单行模式

单行模式只能编辑一行文本，常用于用户名邮箱手机号密码等文本的输入。

搜索框模式

搜索框模式和单行模式类似，也是只能输入一行文本，不过搜索框模式更明确，它只能输入搜索关键字，而且通常框内会添加一个放大镜图标以告诉用户这是一个搜索框。（感觉写了一大堆废话。）

多行模式

顾名思义，就是可以输入多行文本的文本框，一般用于长文本的编辑，如评论等。

开关/选择框

设计师可以通过开关这种UI组件，请求用户在备选条目中选择合适的一项。

1，复选框模式

复选框模式有两种应用方式

第一种就是常规的应用方式，用户可以一次性选择多个条目，重复点击可以取消选择。

第二种也是可以多选，区别在于它选择条目或元素（如图片，消息等）的目的是把它们作为一个组进行后续操作，如删除或上传等。

选择器

选择器用于在多个备选项中选择一个合适的条目，用户可以通过轻拨选择器遍历选项一览，并选择所需条目，选择器多用于时间日期等备选项多而密的场景。

选择器不是一种界面内嵌的UI元素，用户在点击选择器之后，界面通常会弹出一个叠加窗口，显示临时的选择界面，在使用选择器时，用户必须选择一个条目，这与单选框有点相似，不过选择器不会在界面中同时显示所有备选项，因此即使选项很多，也不会占用太大空间。

标准模式

标准模式只提供一个选择器，用户只能从其中选择一个选项。

复数模式

顾名思义，复数模式即是有两个及以上的选择器，比如日期选择。

滑块

滑块是一种由滑槽和把手组成的UI组件，用户可以通过移动把手来改变相关的值或状态，滑块通常是水平显示，左边是最小值，右边是最大值。

标准模式

在标准模式中，用户可以通过滑动滑块来改变值的大小。如声音或屏幕亮度的调整。

时间轴模式

时间轴模式控制的是文件播放的时间进程，如音乐或视频的播放。

环状模式

环状模式可以显示比标准模式更长的内容，并且本身像个表盘一样，因此操作可以更精确，也更有趣味性，不过应用场景好像不太多。

注：滑块的使用场景远不止文中介绍的那几种，例如，在购物网站中，设置两个滑块，让用户利用滑块选择价格区间，比让用户输入数值要方便的多。

拖放控件

用户可以通过拖放含有拖放控件的条目将其拖动至其他位置，来更改条目的顺序或状态。

模态消息

模态消息用于向用户传递消息，它的特点是在界面中央叠加一个对话框，模态对话框是基于模态窗口这一基本UI，并通过它实现消息通知的功能。

模态消息是最可靠的消息通知类UI之一，它能准确的向用户传递消息，只要用户没有关闭消息窗口，就无法返回先前的界面继续操作。它的特点是强制用户查看消息，这种方式有利有弊，需要谨慎使用。

标准模式

标准模式下的模态消息有两个按钮，确定和取消，一般用于重大操作时的提示，确定完成操作，取消中止操作。一般情况下，取消位于左侧，确定位于右侧。

确认模式

确认模式用于向用户发送错误信息等重要消息，并确保用户会阅读到这些消息，在该模式下，模态消息窗口中只有一个确认按钮，所以一般用于显示通知类消息而不是带有选择性的提示消息。

自动关闭模式

在自动关闭模式中，用户不必执行关闭消息窗口的操作，应用会在消息展示一段时间后自动关闭。

无模态消息

无模态消息在提示用户时仅会占用上下很小的空间，并且不会妨碍用户对当前页面的操作，设计师可以在邮件或图片等元素的添加删除或发表动作顺利完成后，通过无模态消息向用户反馈执行结果。

标准模式

标准模式的无模态消息仅会简单的显示一些指定的内容，由于消息会在一段时间后消失，因此内容不宜过于复杂，要使用户在短时间内理解其含义。

状态栏模式

在状态栏模式中，提示消息会在状态栏中显示（废话），与标准模式相同，消息在显示一段时间后消失，由于状态栏在绝大部分界面中都会显示，因此这种模式能够有效利用屏幕空间。

可取消模式

可取消模式在标准模式上增加了取消按钮，该模式主要用于用户执行了破坏性的操作时的情况。

块消息

块消息可以被插入原有的界面中，作为界面的一部分与其他UI一起显示，设计师可通过块消息向用户显示临时消息，用户注册及设定相关表单操作时往往需要显示反馈消息，这时就会经常用到块消息。

角标

角标通过数字或简短的标签文字来显示消息，是一种小巧的UI组件，通常用于显示临时消息的附属元素。

标准模式

标准模式内角标内将显示一个数学作为消息内容，该数学通常用于表示未读条数等尚未完成的条目数。

通知模式

通知模式下，角标内将显示new，update等服务运营商发给用户的提醒，该模式主要用于仪表盘式导航控件，或垂直列表中，在条目上添加角标能够很好的引起用户的注意。

气泡模式

与角标一样，气泡消息也是它所对应的对象的一种附属元素，适用于临时的消息通知，，由于采用的是气泡样式，所以这种UI组件能比角标显示更多内容，使用范围更灵活宽广。

无限循环指示器用于表明服务当前正在执行某些处理。

当用户要操作的的内容因信号或其他原因需要等待时，则应显示无限循环指示器告诉用户正在处理中。

如果正在执行的操作影响范围较大，设计师应考虑结合使用模态消息在界面上叠加一个窗口，反之如果操作仅会影响界面的一部分，则应采取其他模式，在相应的区域中显示小尺寸的提示信息。

标准模式，标准模式的无限循环指示器是一个简单的环状动画，每个系统都有预置的样式，我相信你一定见过，我就不描述了啊哈哈。

原创模式

形式多样，设计师脑洞有多大，原创模式就有多丰富，但必须都是循环动画。

条状模式

你一定也见过对不对，那我就不描述了啊哈哈。

进度条

设计师可以通过进度条来表示任务的执行状况，进度条可以明确的告诉用户操作的具体执行进度，以及完成整个处理的预计时间。

页面指示器

设计师可以通过界面指示器告诉用户现在查看的界面或页面仅是整段连续内容的一部分，同时用户能够借助页面指示器获知当前位置及内容总量。

页面指示器通常与滑动控件和轮播面板一起搭配使用。

图表

图表是一种最为简单易懂的数据可视化方式，所以大量应用于各种手机应用及网站，其中最典型的就是折线图，柱状图和饼图，一些与工作生活密切相关的应用，如工具类或用于记录数据类应用等，常会使用图表。

在使用图表时要考虑当前选用的图表模式是否适用于目标数据，柱状图与折线图适用于数值比较，饼图通常用于比例的比较，进一步讲，柱状图适用于对不连续的数据进行比较，折线图用于对连续数值进行比较。

评分控件

评分控件用于显示用户对内容的评价或感想。

标准模式

标准模式的评分控件仅针对内容进行简单的评价，只有开关两种状态，赞或取消赞，没有负面评价。

表情模式

表情模式的评分控件提供了多个候选表情，用户可以通过表情来做出评价，用户选择不用的表情图标表现出感谢，赞同，同情等不同的情绪，以可视化的形式表现用户评价的细微差别。

好评差评模式

该模式可表达负面评价。有一组两个图标，一个表示赞，一个表示踩，赞图标和标准模式一样，踩也可取消。

等级模式

等级模式的评分控件将评价分为了5级，主要用于对商品和店家等开放式的内容的评价，该模式中，用户评价的平均分是一个很重要的指标，如果评分人数过少，则评分可信度就会降低，因此设计时应该显示评分总人数以作参考。

常见图标

房屋

小房子等于主页，主页等于小房子或品牌形象。

放大镜

放大镜图标一般用于搜索功能，当放大镜上附有加号或减号时就变成了放大或缩小屏幕的作用，不过现在一般都用手势操作来放大或缩小屏幕。

齿轮

表示设置，虽然也有其他图标能表示设置，但现在已经基本默认齿轮才是设置图标界的老大。

星形

星形用于收藏或评分功能。

模拟时钟

模拟时钟图标用于表示历史记录，最近查看倒计时，闹钟等一切与时间相关的功能。

大头针

又称倒水滴（其实是我自己起的名字），一般用于地图中表示当前位置或热门地址，也可用于表示跟定位相关的功能图标。

你不赞一下吗？（傲娇脸）

关键字：设计, 模式

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！