界面框架与内容控件总结.pdfVIP

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