界面布局设计在线视频

今天我们给大家介绍的是布局设计

在这一章节中

我们将分为五个部分来给大家介绍

第一 框架设计

第二 导航栏设计

第三 标签栏设计

第四 工具栏设计

第五 状态栏设计

好

那么我们下面就从这五个方面来进行分析

首先是界面框架设计

框架设计就是说

需要设计者站在一个较高的层次上

关注用户界面和相关行为的整体结构

其中包括两个部分

一是交互框架

另一个是视觉设计框架

讲完框架设计

接下我们说一说导航设计

导航设计是一块相对独立又很重要的内容

导航可以确保用户能在你的应用中

找到并使用其中有价值的功能

第一

导航设计一般会显示标题

第二

可以放搜索 分段式控件

或者其它功能入口

第三

一般高度在44pt

位于状态栏下方

正如优秀的设计一样

好的导航设计让应用软件简单易用

不管是浏览好友信息

还是单车共享

完美的导航设计能让用户根据直觉使用应用程序

也能让用户非常容易地完成所有任务

导航分为两种模式

主导航模式和次级导航模式

主导航又分为全局导航和瞬时导航两类

导航作为移动APP的基本入口

以及主要功能的展现方式

不同性质的APP展示出的导航各有千秋

其服务的对象和目的也不尽相同

接下来给大家举例说明

全局导航的几种形式展示的较多

宫格式 列表菜单式 陈列式 列表式四类

瞬时导航由以下几种形式体现较多

转盘菜单式和抽屉式两类

次级导航模式下的典型式样为

翻页式 伸缩面板式两大类

首先向大家讲解一下全局导航下三种式样的特点

宫格式导航

它能直观展现各项内容

方便浏览经常更新的内容

缺点是无法在入口间跳转

不能直接展现入口内容

不能展示太多入口次级内容

第二个列表式

列表式导航层次展示清晰

可展示内容较长的标题

还可展示标题的次级内容

缺点是同级内容过多

用户浏览时易产生视觉疲劳

排版灵活性也不是很强

第三种陈列式

陈列式导航可直观地展现各项的内容

方便浏览经常更新的内容

其一 宫格式导航

它能展现各项内容

方便浏览经常更新的内容

但缺点是无法在入口间跳转

不能直接展现入口的内容

不能显示太多入口次级内容

如右图

我们经常使用的美图秀秀的应用程序

就是宫格式很好的一个例子

其二 列表式

如右图

腾讯新闻APP

列表式导航展现的新闻内容

层次展示清晰

可展示内容较长的标题

还可展示标题的次级内容

但是同级内容过多

用户长时间浏览

容易产生视觉疲劳

其三是陈列式

学设计的同学经常浏览的花瓣APP就是个很好的典范

这种导航形式

可直观地展现各项内容

方便浏览经常更新的内容

第二部分是瞬时导航

我们举其中较为典型的

抽屉式和菜单式的导航形式做下讲解

抽屉式导航尤为突出

如我们每天都会用到的APP

腾讯QQ

这种抽屉式的导航

不仅节省了页面的展示空间

也让用户注意力聚集到当前页面

扩展性较好

可以放置多个入口

但是缺点是按钮较隐蔽

用户容易忽略

接下来是下拉菜单式

如右图提及的新浪微博

还有经常应用的

微信APP等

都是采用的下拉菜单式导航

在用户浏览时

能让用户产生流畅体验

排版布局多变

让用户感受到沉浸式体验

但是整体内容缺乏体积感

容易发生空间位置迷失的问题

浏览一段时间后用户容易产生疲劳感

第三部分是次级导航模式

我们举其中较为典型的翻页式

和伸缩面板式的导航形式做下讲解

其中翻页式导航单页面内容整体性强

如IPHONE界面的页面浏览

线性的浏览方式有顺畅感和方向感

但是不适合展示过多的页面

不能跳跃性地查看间隔的页面

只能按顺序查看相邻的页面

由于各页面结构相似

用户容易忽略后面的内容

伸缩面板式导航

多以点聚式的式样展现

流畅的动画试使展示方式显得更加有趣

节省空间

避免标签导航占用空间大的问题

具有更强的引导性

避免了抽屉导航引导性不足的问题

但是在使用中

隐藏了框架中的入口内容

对入口交互的功能可见性要求很高

接下来我们从标签栏设计入手

让用户在不同的子任务

视图

和模式中进行快速的切换

标签栏的特点有以下几点

第一

程序启动时

优先加载的内容肯定是选中状态的标签页的内容

处于选中状态的标签栏要高亮

用以标识活动状标

第二

标签的数量

最多不要多过5个

如果你平级的信息模块实在是太多

可以考虑除了最重要的4个标签页之外

增加一个More标签

把那些次重要的标签都放在More标签里

第三

如果是想提供对当前页面元素的操作

可以使用工具栏

而不是标签栏

标签是对内容模块的平级切换

当然现在比较流行把重要操作

放在标签栏的某个位置上

如一系列的拍照应用

都把拍照放在标签栏中间

做了一个差异化的样式设计

也是可以参考的

第四

当有新消息到达时

可以在标签栏上用数字气泡

或者其他形式给予提醒

第五

iPhone有提供一些系统图标

用于工具栏上

表示收藏 历史 书签 更多等等

如果可以用系统图标来表达

尽量用系统图标

如果是自己设计的图标

请注意表意性

让用户不需要思考也能知道是什么

如果图标的表意性达不到要求的话

请一定要辅助的文字来说明

文字不能太长

防止折行显示

ios系统的工具栏看上去和导航或者标签栏很像

但它并不能用来导航

而是让用户在当前页面操作内容

始终显示在页面或者iphone屏幕的一个底部

由图可以看出

一个操作按钮可以触发一页的操作菜单

选中按钮也可以有其他多个选项选择

安卓系统的工具栏常位于页面的顶端

操作按钮放置在操作栏的右上角

状态栏设计在安卓和ios系统中

都用来呈现

信号 时间 电量等信息

高度在20pt

位于整个APP界面的顶部

文本和图标可是白或黑色

背景可以被设计成任何颜色

其两系统的区别在于

Android系统还会增加显示未读信息的提示