IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

界面框架与内容控件总结

Catherine • 2017-05-29 13:29 • 交互设计

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

文章目录[隐藏]

  • 框架
  • 内容
    • 1、列表
    • 2、网格
    • 3、轮播图
    • #专栏作家#

界面框架与内容控件总结

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

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

框架

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

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

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

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

界面框架与内容控件总结

顶部工具栏【1】

界面框架与内容控件总结
悬浮工具栏【1】

界面框架与内容控件总结
底部工具栏【1】

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

界面框架与内容控件总结
悬浮按钮【2】

内容

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

1、列表

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

界面框架与内容控件总结
列表项(网易新闻)

2、网格

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

界面框架与内容控件总结
网格分布的图标(美团)

界面框架与内容控件总结
竖向瀑布流(花瓣)

界面框架与内容控件总结
横向瀑布流(百度外卖)

3、轮播图

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

界面框架与内容控件总结
轮播图(网易游戏)

界面框架与内容控件总结
变种轮播图(nice)

界面框架与内容控件总结
变种轮播图(chrome)

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

#专栏作家#

妖叶秋,一年级交互设计师,人人都是产品经理专栏作家。做过ToC产品的交互设计,现在在尝试ToB的业务。主攻交互,也懂点用研、视觉和产品的知识。爱生活、爱设计、爱读书、爱总结,头像下方是我的联系方式,欢迎志同道合者与我交流。

本文原创发布于人人都是产品经理,未经许可,不得转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/30583/

ioslogoMaterial designUIUI设计交互交互设计交互设计师产品产品经理内容控件图标理论用户界面框架界面设计视觉设计设计师转载
赞 (0)
CatherineCatherine
0
生成海报
浙大教授告诉你用户体验的知识、内容、流程
上一篇 2017-05-29 12:28
聊聊负反馈在交互设计中的应用
下一篇 2017-05-29 14:28

相关推荐

  • 微信热点

    简约至上--交互设计四策略

    无所不在的产品简单设计人们喜欢简单、值得信赖、适应性强的产品。复杂的产品很难吸引人。所有不必要的功能都是要付钱的。简单并不意味着欠缺或低劣,也不意味着不注重装饰或者完全赤裸裸。而是说装饰应该紧密贴近设计本身,任何无关的要素都应该予以剔除。四个策略以DVD遥控器设计方案为例.删除:去掉所有不必要的按钮,直至减到不能再减。组织:按照有意义的标准将按钮划分成组。隐藏:把那些不是最重要的按钮安排在活动仓盖之下,避免分散用户注意力。转移:只在遥控...

    2018-02-09
  • 关于引导页的整理与分析 交互设计

    关于引导页的整理与分析

    随着ui设计的不断发展,引导页的形式也在随着变化,根据不同产品的特性,其作用与意义也不尽相同。本文将分别从“静态引导页”与“动态引导页”两种形式与大家分享我对于“引导页”的一些认识。

    2017-05-17
  • 除了灵感,还有什么方法能帮你想出新的idea【UXRen译#174】

    作者: Mind Tools Editorial Team |  翻译:Chen Jing,校审:包子   “我们要 think differently!”“这个得有些新想法!”“我们要更有创意!”这些声音是否在你工作的场所越来越多? 面对复杂,开放和不断变化的挑战…

    交互专题 2017-08-07
  • 微信热点

    2018年产品经理交互设计交流分享大会

    活动背景一个优秀的产品经理不仅能引导产品的发展,而且还能引导公司的发展。同时,他还是一名优秀的执行者、项目管理和团队管理者,具备敏锐的洞察力,能在用户心理和产品细节间灵活游走,打磨出令人惊叹的产品。所以,在成为CEO之前,先成为一名出色的产品经理吧。然而当我们投入到实际工作中时,总是一次又_次遇到阻碍:和运营、枝术部门沟通不畅,项目推进难。公司要求不高,任务很轻松就能完成,想要挑战大公司,却深知自己还欠火候。看过许多千货,听过许多直播,...

    2018-04-17
  • 用户吐槽:新版新浪微博的5大槽点 交互设计

    用户吐槽:新版新浪微博的5大槽点

    昨天新浪微博发布了新版V6,据说是“加强基于兴趣的信息传播,在提升用户内容获取效率、阅读体验基础 上,面向垂直领域认证用户推出兴趣内容生产、传播及变现工具,完善内容生产与消费生态。微博计划打造一张以信息…

    2014-10-15
  • 微信热点

    陌陌:不全面商业化 不伤害用户体验

    关注订阅号“电商大世界”,海量电商资讯文章打包阅读以下文章数据,由电商大世界 "AI-贝贝",采集、分拣,由编辑 北风整理发布。电商本周要闻:阿里慧聪两大人事变动阿里巴巴B2B事业群总裁戴珊接任速卖通阿里巴巴集团合伙人、B2B事业群总裁戴珊将直接负责全球速卖通业务,而原阿里巴巴全球速卖通总经理沈涤凡,将出任阿里健康CEO。据了解,全球化战略是阿里未来20年的三大核心战略之一。业内人士认为,戴珊此次接任速卖通业务,不仅说明以速卖通为代表的...

    2018-04-01
  • 微信热点

    最近很火的租衣APP用户体验报告

    以下内容并非广告,但是如果衣二三和女神派的营销部门看到的话,要不要考虑来主动给我发点广告费?其实租衣APP这个东西应该火了好一阵了。有我微信的宝宝们可能知道,我这个人有个很大的毛病就是喜欢买衣服。且买来并穿不了一两次,接着就开始在朋友圈各种亏本卖闲置。最近整理衣服发现实在太多真的不能再剁手了,因为根本没地方放。然后突然想到了公司一个客户和我说过她一直用一个租衣APP叫衣二三。看到这个APP的时候我的内心是激动的 --- 终于有软件解决我...

    2018-03-30
  • 交互小细节——信息层级展示规则 交互设计

    交互小细节——信息层级展示规则

    信息层级展示规则是交互设计中的小细节。要分析信息的优先级,用户的核心行为;并通过位置、大小、距离、内容形式、表现方法来建立信息层级;设计过程和结束都要不断审视页面视觉流,看看用户浏览是否顺畅。作为设计师的你,注意到了吗?

    2017-05-20
  • H5可能会死,但总有人用它带来惊喜 交互设计

    H5可能会死,但总有人用它带来惊喜

    天猫这个双11邀请函能够让圈内人产生好感,是不是也从侧面印证了这个H5的体内是具有爆发能量的?

    2017-05-16
  • 交互设计师的60日计划之第六天

    今天去公司加了一天班,然而并没有做完该做的事情。恰好昨天看了一篇有关拖延症的文章,今天加班的过程中发觉自己已经病入膏肓...有deadline的东西可以做完,没有deadline的东西永远都做不完,这是一件很可怕的事情…

    交互专题 2015-08-20
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress