-
让品牌有温度、有情感
专注品牌策划15年
列表式布局UI设计（列表式布局优点）
发布时间：2023-04-28 22:05:50
稿源：
创意岭 阅读：
1299
大家好！今天让创意岭的小编来大家介绍下关于列表式布局UI设计的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。
创意岭作为行业内优秀企业，服务客户遍布全国，设计相关业务请拨打175-8598-2043，或微信：1454722008
本文目录:
一、UI设计表单结构2018-09-10
UI设计表单结构
http://www.tianhusj.com/list-93-1.html?wm=818_xxxiao_mgsj
表单结构
表单的结构由表单的基本样式和基本内容组成，表单的内容都居中布置。表单的基本样式分为单行表单、多行表单、少数情况下表单作为标题存在的组合。
表单的内容作用是信息查看、信息入口、信息操作以及内容输入，表单的内容分主要是信息文字和辅助信息文字。
辅助信息文字通过是否为流程的必要内容来区别对应使用不同的字号，重要内容或需要突出对待的内容可以相应的搭配组合图标。
表单常用控件
常用设计原则
1. 如果5个以下内容，全部放出来，而不是折叠
在单选方案中，有2-5个选项可用，使用分段控件而不是下拉列表。主要是因为分段控制内容可见，并且可以通过单个交互完成任务，而不是多步（点击打开，选择，点击）。
2. 多个选择的功能，收纳在一个选择容器里
一般日期由年、月、日三个部分组成，如果使用下拉列表会有9步操作，对于这种功能接近的可以整合到一个设计组件里。
3. 使用开关而不是下拉列表
如果只有2个选项，如显示或隐藏，打开或关，这种情况使用开关来提升操作效率。
4. 滑块
通过滑动控件，将单调的下拉式操作调整为用户易于扫描的视觉体验，可以使用滑块定义好范围内的一个或多个值。
5. 避免多列表单
移动端都是小屏幕，需要让用户重点放在内容上，保持从上而下的阅读视线，避免过于复杂的表单。
6. 使用增加或减少按钮而不是下拉
当用户需要通过增加或减少时，避免自由表单输入和下拉列表，用按钮帮助最大限度的减少错误。
7. 尽量避免显示不需要的字段
尽量避免显示不需要的字段，使表单更短，不要把必填和非必填的内容混在一起。
8. 对信息进行分组
对相同内容信息进行分组，方便用户快速准确的扫描查找。
设计策略
如果5个以下内容，全部放出来，而不是折叠。
多个选择的功能，收纳在一个选择容器里。
如果只有2个选项，如显示或隐藏，打开或关，这种情况使用开关来提升操作效率。
通过滑动控件，将单调的下拉式操作调整为用户易于扫描的视觉体验。
避免多列表单，保持从上而下的阅读视线，避免过于复杂的表单。
当用户需要通过增加或减少时，避免自由表单输入和下拉列表，用按钮帮助最大限度的减少错误。
尽量避免显示不需要的字段，使表单更短，不要把必填和非必填的内容混在一起。
对相同内容信息进行分组，方便用户相更快地扫描查找，不要内容都混在一起
二、移动应用UI设计——导航设计
年正如精良的设计一样，优秀的导航也大象无形。不管是浏览好友信息，还是租赁汽车，完美的导航设计能让用户根据直觉使用应用程序，也能让用户非常容易地完成所有任务。
导航的设计是 App 设计发展过程中很值得玩味的地方，由于移动设备特别是智能手机的屏幕尺寸有限，设计者们通常会将屏幕空间尽量留给主体内容，为了在手机屏幕给定的范围内展示出更多内容，优秀的导航栏设计将起到关键性作用，对于不同的操作也当因地制宜地选则不同的设计方案。
如网站设计中，我们会把导航分为一级导航、二级导航等等，其实移动应用和网站设计一样，也具有自己的信息架构。这里我们主要依据市场上面已有的产品对移动应用导航大体分为以下两类：主要导航模式与次级导航模式。
图1-2 次级导航模式
首先看看以下7种主要导航模式：
主要导航模式—— 第一种：跳板式
跳板式导航对操作系统并没有特殊要求，在各种设备上都有良好表现。它有时也被称为“快速启动板”（Launchpad）。跳板式导航的特征是，登录界面中的菜单选项就是进入各个应用的起点。在国内市场上跳板式设计应用很用，如下图的第一个“百度手机卫士”（图1-3）它主要通过功能来展示菜单选项，这种网格布局清晰的把各个功能区域进行划分，能让用户快速找到入口并点击操作。(图1-4)的云图TV，它是一个免流量的手机电视，他的模块相对百度手机卫士来说较简单，主要通过电视台来区分模块名称。比如：中央电视台CCTV、卫士、体育甚至海外频道等等。而美图秀秀（图1-5），更是我们比较熟知的一种，它的主界面用2X3的网格布局把常用的功能入口都直观的表现在上面。
什么是2X3的网格布局了？
2X3网格布局是一种布局形式，常见的布局形式有：3X3、2X3、2X2、1X2（图1-6）。但不一定非拘泥于网格布局，根据需求的功能来定义，可以成比例放大某些选项，以彰显其重要性。
XiiaLive，一款功能无比强大的网络电台，兼具简洁而清新的 UI 设计。这款应用具有不容忽视的导航，设计师用3X3的网格布局把菜单的6个菜单项目布局在屏幕中间，使每个格子都扮演着功能性的作用（图1-7）。
Tripper是一款日本的本地导游应用，他用扁平的设计图标把应用的功能用2X3的网格布局罗列在整个界面中，使得用户能够相当轻松顺手地浏览这款APP（图1-8）.
跳板式菜单也可以说是网格式菜单，它类似于metro UI的堆砌色块，优点简约而不简陋，导航清晰、明显，并能提高操作效率。但设计时切记不分青红皂白的去使用色彩哦，这可能会让用户不知所措和产生疲倦感。
ASM采用的是不规则网格的跳板式导航，以突出内容的优先级（图1-9）。
最近经典的游戏：“别踩白块儿”（图1-10）也是跳板式模块的经典体现。
它把各种游戏模式用网格区分开，仅用黑白两色就能清晰的让用户理解并操作。正如前面所说，在网格布局的设计中，不一定必须遵循几乘几的网格形式，甚至可以成比例的放大或者缩小某些选项，用以彰显他的功能特色，举一反三，设计师还可以合并他的多种网格形式，使得功能之间的逻辑流程更准确。比如别踩白块儿中的每个游戏选项，点击的二级菜单也用跳板式或者列表式展现了更多的功能选择。
个性化的跳板式导航可在显示菜单选项的同时显示用户个人资料。通常会提供自定义功能，允许用户改变跳板导航的布局，如优酷界面。
通过以上的案列分析，我们可以整理如下几点：
1.为同等重要的内容项使用网格布局。
2.为相比之下更为重要的内容项使用不规则布局。
3.视情况使用个性化设置和自定义选项。
主要导航模式——第二种：列表菜单式
列表菜单式导航与跳板式导航其实是有共同点的，他们的共同点在于，每个菜单项都是进入应用各项功能的入口点。
但是不同点在于列表菜单式导航有很多种变化形式，包括个性化列表菜单，体现分组列表和增强列表等。
案列分析：
个性化列表的方式：在photo sticker中首页就采用了个性化列表菜单的方式。而IOS系统设计则采用了分组列表菜单式。
印象笔记的IOS版本它把列表式导航与跳板式导航设计相结合。下厨房即是增强列表导航，何为增强列表导航呢？即就是在简单的列表菜单之上增加搜索、浏览或过滤之类的功能后形成的。
其实列表菜单式导航，这个从网站到手机APP上都很常用的，遵循由上至下的阅读习惯方式，所以使用起来用户不会觉得困难。
通过例举的四个案列，以及列表菜单式导航与跳板式导航的对比，列表菜单，更适合用来显示较长或拥有次级文字内容的标题。
主要导航模式——第三种：选项卡式
选项卡式导航，在不同的操作系统有不同的表现和规则。所以在设计时需要为不同的操作系统专门定义选项卡的位置。
Ios、webOS和Blackberry（黑莓）系列都把选项卡放在了屏幕底端，这样用户就可以用拇指进行操作。
选项卡的导航设计方式，一般为四个导航按钮最为普遍，最方便操作的是第二和第三个按。受制于屏幕宽度的限制，其栏目的个数是有限的，不能超过5个。过多的话明显不利于用户的切换。从界面布局来看，也降低体验友好度。
目前也有部分APP在选项卡的基础上，衍生出了一种交互比较好的弹出导航菜单。突出选项卡上展示的那些核心功能的按钮，方便用户快捷操作。
选项卡至于低端的应用市场上面有很多，这里列举几个比较常见的APP：
屏幕底部水平滚动的选项卡是个非常不错的设计，如的Waterlogue应用，它是一款水彩风格照片处理工具，下面的水平翻动选项卡可以让用户选择多种水彩风格
Android（安卓）、Symbian(塞班）和Windows系统都把选项卡定位在屏幕顶端，它模仿了网址导航模式。
Horner包含了可隐藏菜单，不过它能很妙地从顶部出现，由于明亮的颜色和有关联性的巨大图标，它与整个界面内容形成了鲜明对比。Bettertec设计的气流计算APP，巧妙地运用了占据顶部的标签页。
顶部菜单和底部意义差不多，把菜单放在顶部，可以遵循从上至下的阅读习惯，但也有缺点，即不适用与单手操作。
单手操作用户是所示的这两种姿势（左手用户相反）。绿色代表容易点击区域，黄色为拇指伸展可到点击区域，红色区域超出单手可点击范围。
所以不管是在导航设计中，还是在移动应用的其它设计中，我们应该尽可能的考虑用户的手势操作习惯，给用户更好更便捷的体验。
单手操作手指滑动区域图片
网易新闻则采用了顶部可滑动的导航形式，屏幕顶端可滚动的选项卡:用户移动选项卡后能看到更多的菜单选项。
爱奇艺应用同样也采用了顶部滑动导航的模式。但是这里更值得一提的是，为已选择的菜单项设置使用易于识别或带有标签的图标等不同的视觉效果，用户就能清晰的知道自己选择了哪一项。
主要导航模式——第四种：陈列馆式
陈列馆式的设计通常在平面上显示各个内容项来实现导航。 主要用来显示一些文章、菜谱、照片、产品等，可以布局成轮盘、网格或幻灯片演示。
陈列馆式导航能够很好地应用与用户需要经常浏览，频繁更新的内容，如下图的超级相册和便签本。
相册是我们在日常生活中时常运用到的一个功能，使用频率高，图片数量多，所以采用陈列馆的形式是再合适不过了。
而便签本也不陌生，下图中的便签本可以上下左右拉伸不断创建新的收纳空间，一个个方方正正的分类视图，颜色各异却能达到一种养眼的和谐美。没有花哨的功能，主界面上只简洁地显示收纳盒名称与其中的项目数量。
最美应用:是一款通过互联网平台，每天为用户发送一款赏心悦目的移动互联网应用。它通过类似幻灯片的形式来导航，用户通过查看每个应用来划屏切换屏幕内容，而它下面的进度条也会互动性的跟随着用户的切换而进行图标的动态变化。
主要导航模式——第5种 仪表式
仪表式导航提供了一种度量关键绩效指标是否达到要求的方法。
过设计以后，每一项量度都可以显示出额外的信息。这种主要的导航模式对于商业应用、分析工具以及销售和市场应用非常有用。
Timi时光记账—精美独特的时间轴记账:Timi 时光记账采用了时下非常流行的时光轴的形式，帮你整理账目，简洁明了，界面精美，在方便好用的同时，还满足了视觉享受的需求~。
乐动力：通过数据来查看自己每天活动状态。下滑还有很多功能，都可以点击查看。
主要导航模式——第6种 隐喻式
隐喻式导航的特点是用页面模仿应用的隐喻对象。
这种导航主要用于游戏，但在帮助人们组织事物（如日记、书籍、红酒等），并对其进行分类的应用中也能看到。
途书笔记，用牌照记录数据的笔记。它把导航界面菜单做成了一本一本的书，有一本书的形式，隐喻的表达了书的概念。自定义标题，分类进行查阅。
找你妹的游戏中，导航就用闯关的进度来显示，直观且具有趣味性。
主要导航模式——第7种：超级菜单式
移动设备上的超级菜单式导航与网站所用的超级菜单导航类似，它在一个较大的覆盖面板上分组显示已定义好格式的菜单选项。
这种导航模式在现在的app设计中使用的比较少，而且一般会用做分类检索de 次级导航使用。在手机网站的导航设计中比较常见。
美团中就采用了超级菜单式导航做为次级导航使用。
以上均是主要导航模式：那么接下来针对次级导航模式进行案列赏析。
次要导航模式：
这里我们值得注意的是在导航的设计中，所有的主要导航模式都可以用作次级导航。我们经常能够看到选项卡下再用选项卡导航、导航卡下用列表导航、选项卡下采用仪表式导航、跳板式导航下采用陈列馆式导航灯情况。
而次级导航模式是否可以用作主导航，答案不是确定的，因为事物都是贯穿融合的，主要你运用得当，一切均有可能。现在我把这三种归纳为次级导航是针对现有市场产品进行分析得出，并不一定是绝对。
次级导航模式——第8种： 页面轮盘式。
通过这种导航模式，操作者可利用“滑动”操作快速浏览一系列离散的页面。
疯狂来找钱就采用页面轮盘式，页面指示器（iOS中的术语，指用来表示页面数量的小点）可以显示出导航中的页面数量；执行“滑动”操作可以显示下一页。
次级导航模式——第9种：图片轮盘式
图片轮盘式导航类似于一个二维轮盘，图片轮盘式导航更多的应用于播放器和需要多图片展示应用中。
香蕉相机，作为一个相机应用，该有的功能相对还是挺齐全的。拍照、添加相册图片、添加文字等等，都木有问题，还有很文艺的滤镜和相框~
图片轮盘式导航可以查看更多的香蕉图标，相加几个来几个~~~~
次级导航模式——第10种：扩展列表式
扩展列表式导航通过左/右/上/下拉屏幕或者点击按键显示更多的信息。
在网易新闻，TIMI记账和畅读等应用设计当中，通过点击屏幕左上角的按钮唤出切换项，有些也可以通过向右或者向左，滑动手指来完成。所以当我们觉得菜单比较占用位置的时候，可以尝试用这种方式来隐藏菜单，需要注意的是设计展开菜单按钮大部设计在左或右上角这些显眼的位置。
一个简单的滑动动画，就像拉出一个抽屉，「抽屉式导航」这个名称应该就是来源于此。抽屉式导航突破了数量的限制，更大程度上释放了主体空间，也因此提高了操作成本。
此处就个人意见，如果能将主要功能项组织在 4 到 5 项，选项卡导航的设计方式可能会更好，否则，就应该优先考虑抽屉式导航了。抽屉式导航通过纵向排列切换项解决了具有过多的切换项这一问题。不过这也意味着导航不能和主体内容同时出现在屏幕上
三、UI设计的规范标准有哪些
UI即User Interface(用户界面)的简称，UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计，好的UI设计不仅是让软件变得有个性有品位，还要让软件的操作变得舒适简单、自由，充分体现软件的定位和特点。
在飞速发展的电子产品中，界面设计工作一点点的被重视起来，做界面设计的“美工”也随之被称之为“UI设计师”或“UI工程师”，其实软件界面设计就像工业产品中的工业造型设计一样，是产品的重要卖点，一个产品拥有美观的界面会给人带来舒适的视觉享受，拉近人与商品的距离，是建立在科学性之上的艺术设计，那么，UI设计的规范标准有哪些呢？
一、轴
轴在UI设计中是最基本、最常见的概念，也是用来组织界面结构的重要核心。
简单说来，轴是在设计的时候组织一系列元素的假象线，在下面的设计图中，轴以虚线的方式被标注出来。
1、对齐
轴最常见于对称元素的使用，当元素被布置成轴对称的布局的时候，会给人有序感。就像生活中绝大多数的事情一样，我们更倾向于享受有序的的东西，它们令人感觉平稳、舒适、平易近人。
最简单的一个例子就是iTunes程序中的专辑列表的设计，所有的专辑列表在界面的左侧保持对齐，围绕虚线轴轴对称。
2、强化
虽然轴是一条假想的线，但是如果周围的元素的边缘控制得足够整齐，这跳线会在视觉中变得更加“明显”的。
最好的例子是城市中的路灯构成了道路两旁建筑物之间的轴，如果一边有建筑一边没有，那么这种轴线的感觉不会那么强烈。
从产品设计的角度上来看，Twitter的时间线设计就是一个很好的案例，左侧的头像和右侧的推文共同塑造出缝隙中轴线的感觉。
3、运动
当我们碰到某先线条的时候，视觉会很自然地沿着这些方向运动，就如同我们站在街上，会自觉地沿着街道的两头走动。两个端点决定了线，界定了开始和结束的地方，线或者说轴线的存在会引导和提示运动的方向。
SoundCloud中，音轨沿着一条既定的水平轴线运动，随着音乐的播放，音轨自然地自左向右匀速运动（具体可查看马海祥博客《如何利用动效设计吸引访客的注意力》的相关介绍）。
4、连续性
如果终点是不确定的，那么你通常会沿着轴线的方向浏览/运动，直到你找到感兴趣的东西，或者感到厌倦并关闭应用。
在建筑学中，未清楚界定的终点非常少见，因为建筑的修建通常没法永远持续下去，但是UI设计则不一样，无限地滚动下去是无比受欢迎的设计手法。
Pinterest的APP中就是这样做的，持续不断的图片沿着中轴线的方向持续不断地滚动下去，只要你有兴趣一直观看下去。
二、对称
当元素被均匀地放置在轴线的两侧之时，他们构成了对称的关系。当元素被精准地在轴线两侧一一对应之时，它们就形成了完美对称。
1、平衡
对称令整个设计更加平衡，当元素与控件在轴线两侧处于相同位置之时，会给人以协调和谐的设计感。
当我们在规划街道两侧的房屋建设的时候，如果左右两侧都是5间大小一致的房子，当你走在街上的时候这种平衡的设计会令人非常舒适，这是平衡给人的感受。
Rdio的APP设计就遵循着这样的设计规则，屏幕两侧的控件是相同的规格，这类布局很适宜阅读，用户会自觉地自上到下，从左向右查看。
2、不对称
如果轴线两侧的控件布置不再是一一对应尺寸相近，那就是不对称的设计，不对称的设计会给人明显的失衡感，可能会令人不舒服，但是也能造就残缺美，当然这要看你具体怎么做。
虽然Pinteret的APP设计在整体上是沿着中轴线对称的(宽度一致)，但是两边的界面控件并非是对称的，它们的高度并不一致，位置也是错落的，稍微一点的落差都会被眼睛捕捉到，而这样的差异让用户无法准确地左右顺序阅读，不对称设计打破了设计的平衡性和舒适性，但是也可以缓解了规律性设计带来的视觉疲劳。
三、层级
当某个元素出现在比其他元素更重要的位置的时候，层级就出现了。
1、尺寸
如果一个设计元素在尺寸上比其他的控件更大，就会区分出层级。毫无疑问，我们查看某个设计的时候，通常会被最大的元素吸引到。如果一个建筑物有5个出窗户，其中一个是其他四个的两倍大，我们的注意力自然而然会被吸引过去。
通过尺寸来区分文章列表层级的典型就是稍后读应用Pocket，顶部的轮播文章拥有更大的图片，它的位置和尺寸会令我们一眼注意到（具体可查看马海祥博客《详解移动端设备页面尺寸设计原理》的相关介绍）。
2、形状
如果一个控件在形状和形态上同其他的不一样，也可以让它独立出一个层级，不规则的设计同样会令人侧目，建筑物的正面拥有五个相同的窗户和一闪大门，你会立刻注意到门的独特之处。
在Instagram的个人信息页中，圆形的个人头像在方形的图片中别具一格，非常抓人眼球。它会让人意识到，这个独特的东西，更为重要。
3、位置
位置的存在同样能彰显层级的不一样，在圆圈之内，中心位置的东西比边缘部分的看起来更重要，位于轴线顶端的控件会显得比其他部分的优先级更高。
以设计应用Path的设计为例，时间轴顶点处的用户头像就明显比时间轴上的其他部分更重要，而这个地方正好展示的也是用户头像。
四、韵律
UI设计和建筑设计同样有着韵律之美，重复的模式会营造出独特的节奏之美。
1、模式
理解韵律最直接的方式就是听歌，音乐拥有节奏感，绝大多数的音乐遵循着相同的节拍，节拍就是音乐模式的一部分。
这方面最典型的APP是Airbnb，APP列表中每一间房子都占据一个模块，模块中有着大小相同的图片，价格、位置和房东信息和图片的相对位置一定，且排版匀称舒服，两个模块之间的间距也相同，当你浏览的时候，熟悉的节奏会让你清楚地知道上哪看关键信息。
2、间断
当节奏被间隔打断的时候，会形成不同的层级，听歌的时候，均匀的节奏被其他的音乐元素打断的时候，你会意识到这是比较特别的部分。
在Twitter的APP中，推文和推文保持着相同的样式，均匀的节奏，但是其中的“推荐用户”一项有着不同的样式，它插入到推文列表中，打破了整个信息流的节奏，凸显出不同的层级，会很快抓住你的注意力。
四、UI设计规范都包含哪些规范？
1.基础规范
基础规范我划分的是组成页面最小的元素、是最基础的一步。基础规范有文字、颜色、布局层级、图形、分割线等。
2.组件规范
组件规范是由两个元素组成，且可点击的控件。组件规范有按钮、导航栏、搜索框、tab栏、列表、表格、筛选器等。
3.模块规范&banner运营规范
模块规范是一个大的板块，如金刚区、列表流、图片流等;因为banner运营是一个很复杂的模块，需要单独定义规范。
4.特殊状态规范
设计场景中一些特殊的状态，也是我们设计时经常忽略的地方。特殊状态规范有弹窗、空白页、加载态、toast浮层、启动图等等。
通过这四种规范的建立，UI设计规范已经很全面、细致了，希望大家在做设计的过程中善于总结归纳，同时积极主动的去建立规范、建立组建库。逐步的去解放自己的时间、成本，去做一些更具有创造力的工作，减少重复性工作。
以上就是关于列表式布局UI设计相关问题的回答。希望能帮到你，如有更多相关问题，您也可以联系我们的客服进行咨询，客服也会为您讲解更多精彩的知识和内容。
推荐阅读：
小红书隐藏我的关注列表是什么意思（小红书隐藏我的关注列表打不开）
赣公网安备 50019002502384号
