美文网首页
手机界面中常用到的九种布局

手机界面中常用到的九种布局

作者: bbsxyi | 来源:发表于2019-07-23 14:00 被阅读0次

      手机由于屏幕尺寸的限制,可显示内容要比PC屏幕少得多。在手机界面设计中,若直接把所有内容 在一屏内显示,会使界面混乱不堪,丑陋且不可用。我们需要对信息进行有效组织,通过合理布局 把信息展示给用户。合理的布局设计可以使信息变得井然有序,用户可以很容易地找到自己想要的 信息,产品的交互效率和信息的传递效率都得到提升。下面来看看手机界面设计中常用到的一些 布局。

竖排列表

竖排列表是最常用的布局之一。手机屏幕一般是列表竖屏显示的,文字是横屏显示的,因此竖排列 表可以包含比较多的信息。列表长度可以没有限制,通过上下滑动可以查看更多内容。竖排列表在 视觉上整齐美观,用户接受度很高,常用于并列元素的展示,包括目录、分类、内容等。

横排方块

横排方块是把并列元素横向显示的一种布局。我们常见的工具栏,TAB,Coverflow 等都采用这种 布局。受屏幕宽度限制,它可显示的数量较少,但可通过左右滑动屏幕或点击箭头查看更多内容, 不过这需要用户进行主动探索。它比较适合元素数量较少的情形,当需要展示更多的内容适,竖排 列表则是更优的选择。

九宫格

九宫格是非常经典的设计,展示形式简单明了,用户接受度很广。当元素数量固定不变为8、9、12、16时,则适合采用九宫格。虽然它有时候给人设计老套的感觉,不过它的一些变体目前比较 流行,比如MET RO风格,一行两格的设计等。

TAB

采用TAB可以减少界面跳转的层级,可以将并列的信息通过横向或竖向TAB来表现。与传统的一级 一级的架构方式对比,此种架构方式可以减少用户的点击次数,提高效率。当功能之间联系密切, 用户需要频繁在各功能之间进行频繁时,TAB布局是首选。

多面板

多面版的布局常见于PAD终端,手机上也会用到。多面版很像竖屏排列的TAB,可以展示更多的信 息量,操作效率较高,适合分类和内容都比较多的情形。它的不足是界面比较拥挤。

手风琴

手风琴布局常见于两级结构的内容。用户点击分类可展开显示二级内容,在不用的时候,内容是隐 藏的。因此它可承载比较多的信息,同时保持界面简洁。手风琴可以减少界面跳转,与树形结构 相比,手风琴减少点击次数,提高操作效率。手风琴在浏览器上很常见,很多浏览器的导航、历史 、下载管理等页面均采用了手风琴的设计。

弹出框

弹出框很常见,也属于布局设计的一种。弹出框把内容隐藏,仅在需要的时候才弹出,以节省屏幕 空间。弹出框可在原有界面上进行操作,不必跳出界面,体验比较连贯。弹出框在安卓系统上的使 用很普遍,比菜单、单选框、多选框等,在IO S系统上使用相对少些。

抽屉/侧边栏

抽屉也是将内容先藏起来,在需要时再展开。弹出框一般是完成设置或完成某个任务,而抽屉展示 的一般是具体内容。抽屉在交互体验上更加自然,和原界面融合较好。抽屉栏一般从顶部或底部 拉出,若是从左右两侧拉出的,我们一般称为侧边栏。Pat h和一些浏览器的书签,均采用了侧边栏 的设计。

标签

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

相关文章

  • 手机界面中常用到的九种布局

    手机由于屏幕尺寸的限制,可显示内容要比PC屏幕少得多。在手机界面设计中,若直接把所有内容 在一屏内显示,会...

  • Android ConstraintLayout

    一、传统界面布局 在安卓开发中,界面编程是一个很重要的部分,而很多时候为了实现好看的 ui 界面会用到很多层的布局...

  • flex布局之flex 属性(一看就会)

      flex是弹性布局(Flexible Box)中常用到的属性,是flex-grow, flex-shrink ...

  • Android 布局优化之-include、merge、View

    上篇文章中优化了无网络布局那块的东西,这篇简单介绍下布局优化,也就是Android布局中常用到的include、m...

  • Andrid第一课

    相对布局是指按着控件之间的相对位置来进行布局。相对布局是Android布局中常用的一种,主要用到的标签有:Rela...

  • Android 四大布局 使用方法详解

    在Android 中,有界面存在的地方就会有布局存在,布局对于Android来说十分重要。Android中常用的四...

  • 关于布局

    这里说的布局,不是指如何设计页面更加美观,而是简单介绍一下前端开发中常用到的一些布局方法。 静态布局(Static...

  • iOS自动布局

    OC-Masonry, Swift-SnapKit两种自动布局是开发中常用到的自动布局方式,也是每个开发者必会的一...

  • Android开发常用

    Android开发中常用的各种代码 进入界面是不让EditText自动获取焦点 在EditText的父布局中加上如...

  • iOS 轮播图

    轮播图是App中常用的展示界面,主要用到的控件有UIScrollView和UIPageControl。难点有两处,...

网友评论

      本文标题:手机界面中常用到的九种布局

      本文链接:https://www.haomeiwen.com/subject/xivolctx.html