设计布局的方式有哪些

来源：成都中公优就业IT培训机构时间：2020/7/8 14:12:33

　　以下是小编为大家整理UI设计知识点设计布局的方式有哪些的内容。

       1.列表式布局

　    列表式布局

　　特点：内容从上向下排列，导航之间的跳转要回到初始点

　　优点：

　　1.层次展示清晰明了

　　2.视线流从上到下，浏览体验快捷

　　3.可展示内容较长的菜单或拥有次级文字内容的标题

　　缺点：

　　1.导航之间的跳转要回到初始点，灵活性不高

　　2.同级内容过多时，用户浏览容易产生视觉疲劳

　　3.只能通过排列顺序、颜色来区分各入口重要程度

　　简书的很多地方都运用了列表式布局，这种布局方法能够

        让用户清晰明了地知道页面的内容，简介又大方。

　　2.陈列馆式布局

　　陈列馆式布局

　　特点：布局比较灵活，即可以平均分布这些网格

       也可以根据内容的重要性做不规则分布

　　优点：

　　1.同样的高度下可放置更多的菜单，流动性强

　　2.直观展现各项内容，方便用户浏览经常更新的内容

　　缺点：

　　1.不适合展示顶层入口框架

　　2.界面内容过多时显得杂乱，让用户眼花缭乱

　　支付宝的界面相信大家都很熟悉，它的首页就使用了陈列馆式布局

      它能直观得展现各项内容，而且首页的内容都是用户经常游览的

       不过由于界面过多，视觉体验效果就稍微逊色了一点。

　　3.九宫格布局

　　九宫格布局

　　特点：相比陈列馆式，九宫格布局比较稳定为一行三列式

　　优点：清晰展现各入口，方便用户查询

　　缺点：

　　1.菜单之间的跳转要回到初始点

　　2.容易形成更深的路径，不能显示太多入口次级内容

　　很多软件都喜欢运用九宫格布局，简书的专题管理员这里也使用了这种布局

       井然有序且间隔合理，视觉效果挺舒服的。

　　4.选项卡式布局

　　选项卡式布局

　　特点：导航一直存在，具有选中状态，可切换另一个导航

　　优点：

　　1.直接展示重要接口内容信息

　　2.分类位置固定，清楚当前所在入口位置

　　3.减少界面跳转的层级，轻松在各入口间频繁跳转

　　缺点：1.功能入口过多时，该模式显得笨重不实用

　　简书的首页也使用了选项卡布局

       图中上面的红色框和下面的红色框都是此布局

       但是，个人觉得上面的选项卡

       由于功能入口太多而显得笨重，下面的则恰到好处。

　　5.旋转木马式布局

　　旋转木马式布局

　　特点：重点展示一个对象，通过手势滑动查看更多内容

　　优点：单页面内容整体性强，聚焦度高

　　缺点：1.受屏幕宽度限制，可显示的数量较少

　　2.不能跳跃性地查看间隔的页面

　　3.各页面内容结构相似，容易忽略后面的内容

　　阅读软件“一个”的首页则使用了旋转木马式布局

       一个的主题是“复杂的世界里，一个就够了”

       所以它选用此布局起到了画龙的作用，更能提高单页面的聚焦度。

　　6.行为扩展式布局

　　行为扩展式布局

　　特点：能在一屏幕内显示更多的细节，无需页面跳转

　　优点：

　　1.减少页面跳转的层级

　　2.对分类有整体性的了解，清楚当前所在的入口位置

　　缺点：分类位置不固定，当展开的内容较多时，跨分类跳转不方便

　　腾讯QQ的联系人页面使用了行为扩展式布局，相信大家也不陌生，用起来也很方便。

　　7.多面板布局

　　多面板布局

　　特点：能同时呈现比较多的分类及内容

　　优点：1.分类位置固定，清楚当前所在入口位置

　　2.对分类有整体性的了解，减少界面跳转的层级

　　缺点：界面比较拥挤，容易产生视觉疲劳

　　腾讯QQ的兴趣部落页面使用了多版面布局

       能同时呈现出比较多的兴趣分类及内容

       这也是一种典型的页面布局方式。

　　8.图表式布局

　　图表式布局

　　特点:用图表的方式直接呈现信息

　　优点：直观，总体性强

　　缺点：详细信息显示有限

尊重原创文章，转载请注明出处与链接：http://www.peixun360.com/3178/news/214042/违者必究！ 以上就是成都中公优就业IT培训机构 小编为您整理 设计布局的方式有哪些的全部内容。