草丁图书馆

  1. 首页 > 生活百科 >

什么是页面框架 主要讲讲框架和内容控件的部分

生活百科

来人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营 。
UI设计中一项很基本的工作就是界面设计，但是，如果一开始就是从界面这个概念去入手的话，往往会觉得无从谈起 。所以，我会一个界面拆分成几个模块：框架、导航和内容 。然后根据每个模块的特征去选择适合的展示方式，然后再拼凑成一个完整的界面 。
关于导航的部分，我之前已经总结过了，详情请见：《APP常用导航总结》 。今天主要讲讲框架和内容控件的部分 。
框架对于框架，其实比较简单 。因为现在有种趋势是“以内容为中心”，所以，界面设计的重点并不在框架上 。加之现在iOS和Android平台都有比较成型的规范，所以直接套用就行了 。
【什么是页面框架 主要讲讲框架和内容控件的部分】对于Android而言，框架最主要就是工具栏，然后我们需要考虑的是工具栏上放置什么功能入口 。工具栏一般有：顶部工具栏、悬浮工具栏和底部工具栏 。
对于顶部工具栏而言，需要预留位置给标题，最左边的位置要预留给汉堡菜单或者返回按钮或者品牌logo 。所以需要自定义的就是右边的区域，不过这里不建议摆放过多按钮（我见过最多的是4个），关于这里放置什么按钮，就没有一套成型的理论的，根据实际界面来规划即可 。不过一般来说只会放置最常用的按钮，然后把剩下的按钮折叠起来 。或者可以参考竞品的习惯，毕竟用户也是有使用惯性的 。
对于悬浮工具栏和底部工具栏，限制没有顶部工具栏那么多，所以这里的设计大多就是八仙过海各显其能 。需要注意的是，悬浮工具栏和底部工具栏都只是选用的，但是顶部工具栏是必须要有的 。
顶部工具栏【1】
悬浮工具栏【1】
底部工具栏【1】
Android界面框架的第二个点是悬浮按钮，这个其实也是一个功能入口 。这个入口要放置当前界面最最重要的功能，并且最好是正向操作的功能 。关于悬浮按钮的介绍请见Material design设计指南之按钮：浮动操作按钮，这里不再重复累赘 。悬浮按钮也是选用的，只有当页面有且只有一个非常重要的操作的时候，才需要考虑悬浮按钮 。
悬浮按钮【2】
内容讲完了框架的部分，现在讲讲内容的部分 。内容的空间选择主要有：列表、网格、和轮播图 。
1、列表如果展示得信息以文字为主，列表是一种非常适合的形式 。由于单个列表项占据的宽度刚好是手机屏幕的宽度，在阅读单个列表的时候，不容易受到其他列表项的干扰 。其次，列表项的操作便利性较其他的控件来说会更好 。什么意思呢？手机屏幕是一个二维的界面，当你需要点击一个位置的时候，你需要确定的是一个二维坐标，但是当你在点击一个列表时，由于列表的宽度就是屏幕的宽度，所以你只需要保证高度够得到列表即可 。
列表项（网易新闻）
2、网格内容布局的第二种是网格，当内容是以图标或者图片为主的时候，网格是一种比列表更加适合的形式 。网格有如下几种布局，一种是放功能图标的，比如常见的九宫格导航，这个时候，相同空间内，网格可以容纳更多的入口，但是容易造成视觉上的负担，所以，当图标过多的时候，需要进行分组展示；一种常见的网格是竖向的瀑布流，这种布局在图片应用中格外常见；还有一种比较少见，是一种横向的瀑布流，横向的瀑布流一般只有一列，但是可以横向拓展，可以“左拉”出更多内容 。
网格分布的图标（美团）
竖向瀑布流（花瓣）
横向瀑布流（百度外卖）
3、轮播图不论是列表或是网格，不同的项之间是并列的 。但是在轮播图中，一次只会展示一个项，其他项都是隐藏起来的 。所以这也就意味着大片区域都用来展示一个内容，同时又没有其他内容的干扰，所以轮播图非常适合用来展示重要的信息 。可以看到，在一个页面中，往往轮播图是最抢眼的地方，所以有时候，一些广告之类的推广消息也会选择放置在这里 。需要注意的是，一个页面中一般只有一个轮播图 。同时，轮播图中图片的个数也要有限制（我见过最多的是简书，竟然有8个，个人觉得太多了），不然数量太多的时候重要性就下降了 。
轮播图（网易游戏）
变种轮播图（nice）
变种轮播图（chrome）
关于界面的框架和内容控件就说到这里，算是对界面设计的最后一部分总结 。结合之前的导航总结，加上这部分的框架和内容总结，设计页面的时候就能有个依据和参考 。
#专栏作家#妖叶秋，一年级交互设计师，人人都是产品经理专栏作家 。做过ToC产品的交互设计，现在在尝试ToB的业务 。主攻交互，也懂点用研、视觉和产品的知识 。爱生活、爱设计、爱读书、爱淘宝、爱总结、爱收工，欢迎志同道合者与我交流 。

    推荐阅读


    上一篇：项目进度管理方法有哪些 项目进度管理的4个步骤

    下一篇：水俣病怎么读音是什么 水俣病发源自哪个国家