界面框架与内容控件总结

UI设计中一项很基本的工作就是界面设计,但是,如果一开始就是从界面这个概念去入手的话,往往会觉得无从谈起。所以,我会一个界面拆分成几个模块:框架、导航和内容。然后根据每个模块的特征去选择适合的展示方式,然后再拼凑成一个完整的界面。

关于导航的部分,我之前已经总结过了,详情请见:APP常用导航总结。今天主要讲讲框架和内容控件的部分。

框架

对于框架,其实比较简单。因为现在有种趋势是“以内容为中心”,所以,界面设计的重点并不在框架上。加之现在iOS和Android平台都有比较成型的规范,所以直接套用就行了。

对于Android而言,框架最主要就是工具栏,然后我们需要考虑的是工具栏上放置什么功能入口。工具栏一般有:顶部工具栏、悬浮工具栏和底部工具栏。

对于顶部工具栏而言,需要预留位置给标题,最左边的位置要预留给汉堡菜单或者返回按钮或者品牌logo。所以需要自定义的就是右边的区域,不过这里不建议摆放过多按钮(我见过最多的是4个),关于这里放置什么按钮,就没有一套成型的理论的,根据实际界面来规划即可。不过一般来说只会放置最常用的按钮,然后把剩下的按钮折叠起来。或者可以参考竞品的习惯,毕竟用户也是有使用惯性的。

对于悬浮工具栏和底部工具栏,限制没有顶部工具栏那么多,所以这里的设计大多就是八仙过海各显其能。需要注意的是,悬浮工具栏和底部工具栏都只是选用的,但是顶部工具栏是必须要有的。

顶部工具栏【1】
悬浮工具栏【1】
底部工具栏【1】

Android界面框架的第二个点是悬浮按钮,这个其实也是一个功能入口。这个入口要放置当前界面最最重要的功能,并且最好是正向操作的功能。关于悬浮按钮的介绍请见Material design设计指南之按钮:浮动操作按钮,这里不再重复累赘。

悬浮按钮【2】

内容

讲完了框架的部分,现在讲讲内容的部分。内容的空间选择主要有:列表、网格、和轮播图。

1、列表

如果展示得信息以文字为主,列表是一种非常适合的形式。由于单个列表项占据的宽度刚好是手机屏幕的宽度,在阅读单个列表的时候,不容易受到其他列表项的干扰。其次,列表项的操作便利性较其他的控件来说会更好。什么意思呢?手机屏幕是一个二维的界面,当你需要点击一个位置的时候,你需要确定的是一个二维坐标,但是当你在点击一个列表时,由于列表的宽度就是屏幕的宽度,所以你只需要保证高度够得到列表即可。

列表项(网易新闻)

2、网格

内容布局的第二种是网格,当内容是以图标或者图片为主的时候,网格是一种比列表更加适合的形式。网格有如下几种布局,一种是放功能图标的,比如常见的九宫格导航,这个时候,相同空间内,网格可以容纳更多的入口,但是容易造成视觉上的负担,所以,当图标过多的时候,需要进行分组展示;一种常见的网格是竖向的瀑布流,这种布局在图片应用中格外常见;还有一种比较少见,是一种横向的瀑布流,横向的瀑布流一般只有一列,但是可以横向拓展,可以“左拉”出更多内容。

网格分布的图标(美团)
竖向瀑布流(花瓣)
横向瀑布流(百度外卖)

3、轮播图

不论是列表或是网格,不同的项之间是并列的。但是在轮播图中,一次只会展示一个项,其他项都是隐藏起来的。所以这也就意味着大片区域都用来展示一个内容,同时又没有其他内容的干扰,所以轮播图非常适合用来展示重要的信息。可以看到,在一个页面中,往往轮播图是最抢眼的地方,所以有时候,一些广告之类的推广消息也会选择放置在这里。需要注意的是,一个页面中一般只有一个轮播图。同时,轮播图中图片的个数也要有限制(我见过最多的是简书,竟然有8个,个人觉得太多了),不然数量太多的时候重要性就下降了。

轮播图(网易游戏)
变种轮播图(nice)
变种轮播图(chrome)

关于界面的框架和内容控件就说到这里,算是对界面设计的最后一部分总结。结合之前的导航总结,加上这部分的框架和内容总结,设计页面的时候就能有个依据和参考。

【1】结构 - Material Design 中文版 - 极客学院Wiki http://wiki.jikexueyuan.com/project/material-design/layout/structure.html#8d7b42def58b79234c60a6e64da37042

【2】按钮:浮动操作按钮 - Material Design 中文版 - 极客学院Wiki http://wiki.jikexueyuan.com/project/material-design/components/buttons-floating-action-button.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,205评论 25 709
  • 内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 46,973评论 22 665
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,196评论 4 61
  • 云的样子风的心,满天星斗真不真。 河流做船海上游,日月似桨夜夜流。 人间对错谁定义,无可奈何花落去。 思念如同青苔...
    善良的老虎阅读 1,007评论 0 0
  • 最新的LED PROFESSIONAL REVIEW 杂志,下载猛击这里。里面有人用Comsol multiphy...
    sanre123阅读 1,222评论 0 1