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

相关推荐

  • 互联网理财平台交互设计再设计 从零开始学交互

    互联网理财平台交互设计再设计

    一、项目背景互联网理财平台,支付渠道升级,由原来的新浪托管换成富友、宝付支付。这就意味着平台需要对账户资产页面及交易流程进行重新设计。用户在购买理财产品时,只能通过平台的账户余额进行购买。如果账户余…

    2017-08-01
  • 后台交互设计中,控件使用场景与规范总结(附案例) 从零开始学交互

    后台交互设计中,控件使用场景与规范总结(附案例)

    数十万互联网从业者的共同关注!作者:panda,交互设计师微信号:D1173740249编辑:Dva背景之前有写过一篇关于新手入门交互设计师的文章《新手入门做交互设计的那些事儿》,最近刚完成公司平台 2.0 的改版设计,平…

    2017-08-01
  • 【译文】交互设计七大定律之席克定律(old) 交互设计

    交互设计七大定律之席克定律

    最近在整理交互设计七大定律,发现了这篇老文,内容很精彩,翻译下与大家分享。 最近在整理交互设计七大定律,文章要系统的看。 目录:【交互设计七大定律】关于交互设计法则“除非有更好的选择,否则就遵从标准——交…

    2015-08-27
  • 交互设计中,如何增加趣味性,提升操作愉悦度?

    功能、实用性,这些需要很强逻辑性的事物很难和情感产生关联,并不是指这些不重要,它们很重要,它们是基础,但缺少了情感的作用,很难产生一些东西,像:快乐、愉悦、悲伤、美... 花、大海、春天、小屋... 这些都…

    交互设计 2015-04-04
  • Icon 改版:对于细节的把控才是关键 交互设计

    Icon 改版:对于细节的把控才是关键

    在这次新的视觉改版迭代中,我们更新了过去较为单一的图标形式,重新定义了图标系统。

    2017-05-04
  • 微信热点

    交互设计测试评估

    - END-作者  Rachel Xu欢迎将文章分享至朋友圈,拒绝转载~VUI进化论达尔文老爷爷说,你的语音交互设计该进化了~长按指纹 > 识别图中二维码 > 添加关注不关注,怎么进化~

    2018-04-18
  • 十种数字字体免费下载 交互设计

    十种数字字体免费下载

    当你数字和文字融合时,让数字脱颖而出是很重要的。 这些数字可用来吸引用户的眼球。在广告或打印使用创造性的数字字体和颜色,它们将脱颖而出。 国外设计师Heather Moritz跟大家分享了十种免费数字字体,这些字体仅…

    2015-01-20
  • 【干货·扫盲】主屏幕尺寸,主屏分辨率,像素密度,PPI之间到底什么关系?

    今天我给大家来讲讲这几个咱们经常打交道的词到底啥意思,以及他们之间到底有什么关系。这篇文章是我花了一个下午从N多篇文章里提炼出的一个白话版,保证让你看得懂。 咱们从手机开始说起吧。先上一张图,给大家看…

    交互设计 2015-09-08
  • 设计总结|基于大屏设计的QQiPad主题 交互设计

    设计总结|基于大屏设计的QQiPad主题

    主题一直是QQiPad比较薄弱的一块,在用户的强烈呼声下,项目组决定在6.5版本上线新的主题,为此做了大量的尝试和思考。基于大屏设计的QQiPad主题有何特点?应该如何设计?在此分享本次主题设计总结。

    2017-05-09
  • 微信热点

    用户体验 | 6个细节成就了今天的X1 Carbon 2018(下篇)

    上篇我们聊了Logo配色、ThinkShutter以及电源键设计,这一次我们一起来看看外形设计、移动便携和扩展能力ThinkPad X1 Carbon 2018在用户体验上有什么有趣的故事吧!一条曲线的神奇虽然建筑师高迪说直线属于人类,而曲线属于上帝,而逐渐读懂曲线的意义,思考曲线与直线之间合理应用,这整个的过程正是人类自我救赎和思想进化的过程。纵观笔记本变化的历史,外形和颜色往往决定着“颜值”,改变外形或者颜色设计的情况比比皆是,连M...

    2018-03-22
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

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