南京UI设计培训分享—手机界面设计中常用到的9种布局

　　做UI设计的我们都知道，移动端的设计和web端的是不一样的。手机由于屏幕尺寸的限制，可显示内容要比PC屏幕少得多。今天南京万和UI设计培训和大家一起来看看手机的界面设计中常用到的一些布局。

　　在手机的界面设计中，如果想直接把所有内容在一个屏内显示出来，可想而知，整合界面会变得很混乱，而且还很丑，更别说用户的操作使用体验了。

　　1.竖排列表

　　竖排列表是最常用的布局之一。手机屏幕一般是列表竖屏显示的，文字是横屏显示的，因此竖排列表可以包含比较多的信息。

　　列表长度可以没有限制，通过上下滑动可以查看更多内容。

　　竖排列表在视觉上整齐美观，用户接受度很高，常用于并列元素的展示，包括目录、分类、内容等。

　　2.横排方块

　　横排方块是把并列元素横向显示的一种布局。我们常见的工具栏，TAB，Coverflow 等都采用这种布局。

　　受屏幕宽度限制，它可显示的数量较少，但可通过左右滑动屏幕或点击箭头查看更多内容，不过这需要用户进行主动探索。

　　它比较适合元素数量较少的情形，当需要展示更多的内容适，竖排列表则是更优的选择。有疑惑？请咨询南京万和UI设计培训。

　　3.九宫格

　　九宫格是非常经典的设计，展示形式简单明了，用户接受度很广。当元素数量固定不变为8、9、12、16时，则适合采用九宫格。

　　4.TAB

　　采用TAB可以减少界面跳转的层级，可以将并列的信息通过横向或竖向TAB来表现。

　　与传统的一级一级的架构方式对比，此种架构方式可以减少用户的点击次数，提高效率。当功能之间联系密切，用户需要频繁在各功能之间进行频繁时，TAB布局是首选。

　　5. 多面板

　　多面版的布局常见于PAD终端，手机上也会用到。

　　多面版很像竖屏排列的TAB，可以展示更多的信息量，操作效率较高，适合分类和内容都比较多的情形。它的不足是界面比较拥挤。

　　6.手风琴

　　手风琴布局常见于两级结构的内容。用户点击分类可展开显示二级内容，在不用的时候，内容是隐藏的。

　　因此它可承载比较多的信息，同时保持界面简洁。手风琴可以减少界面跳转，与树形结构相比，手风琴减少点击次数，提高操作效率。

　　手风琴在浏览器上很常见，很多浏览器的导航、历史、下载管理等页面均采用了手风琴的设计。更多内容，请咨询南京万和UI设计培训。

　　7.弹出框

　　弹出框很常见，也属于布局设计的一种。弹出框把内容隐藏，仅在需要的时候才弹出，以节省屏幕空间。

　　弹出框可在原有界面上进行操作，不必跳出界面，体验比较连贯。弹出框在安卓系统上的使用很普遍，比菜单、单选框、多选框等，在IOS系统上使用相对少些。

　　8.抽屉/侧边栏

　　抽屉也是将内容先藏起来，在需要时再展开。弹出框一般是完成设置或完成某个任务，而抽屉展示的一般是具体内容。

　　抽屉在交互体验上更加自然，和原界面融合较好。抽屉栏一般从顶部或底部拉出，若是从左右两侧拉出的，我们一般称为侧边栏。Path和一些浏览器的书签，均采用了侧边栏的设计。

　　9.标签

　　在搜索界面和分类界面时，会采用标签的方式来展现。标签方式比较动感的，增加了应用的趣味性，但使用场景较有限。

　　在产品设计过程中，我们需要考虑为不同的信息结构来提供相匹配的布局。布局方案不是唯一的，巧妙采用各种布局可以增强产品的易用性和交互体验。

　　我们还可以通过基本布局的组合来完成复杂的界面设计，例如天天浏览器的菜单，它是一个弹出框，同时它有三个TAB，每个TAB下面是个8宫格的布局。

　　对于手机终端来说，内容总是超出屏幕可显示的范围，界面布局的设计是非常重要的。掌握这9种常见的布局设计，可以让我们在产品设计时更加地游刃有余。

　　好了，南京万和UI设计培训关于手机界面设计中常用到的9种布局就介绍到这里，信息你也了解的差不多了，想要学习的小伙伴，赶紧行动吧！听说最近活动多多哦！