界面设计中的内容与容器关系

2016-02-17 04:14 2 1 收藏

今天天气好晴朗处处好风光,好天气好开始,图老师又来和大家分享啦。下面给大家推荐界面设计中的内容与容器关系,希望大家看完后也有个好心情,快快行动吧!

【 tulaoshi.com - 平面设计 】

今天想说的是内容和容器的关系,顺便把之前设计中碰到的问题和大家一起探讨下。我们从软件的设置说起。(这里以QQ的设置举例)

一个软件的设置(常称为系统设置)一般承载了软件所有的可配置选项。通过导航,把内容放置在不同的选项卡下面。

由于内容的划分是根据产品功能的逻辑划分,所以设计中经常碰到的问题就是:不同选项卡下面的内容多少不确定,对排版会带来很大麻烦。

正常情况如下图,启动和登录内容填充了大部分版面,设置界面看上去很充实。

界面设计中的内容与容器关系,PS教程,图老师教程网

但有的选项卡下面的内容很少,整个界面就一两行字,大片都是空白。由于内容和留白的比例失衡而导致一定的视觉问题(下图是我自己P的:)

界面设计中的内容与容器关系,PS教程,图老师教程网

又或者,有的选项卡下面的内容超出了界面的高度 即使短时间内没发生这个问题,随着产品功能的调整,可配置项越来越多,就会产生问题。

下图消息提醒的设置,如果我再想加一行内容,就必须在已有内容上减少一行。

界面设计中的内容与容器关系,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

之前做排版的时候,一直对这个问题很头痛。内容过少时,会设法增加内容或者视觉元素,以求视觉上的平衡;内容过多时,会调整目录结构,把一个菜单项拆成两项,或者反复排版,把内容尽可能压缩在一页里排下。

但是这样又引入了新的问题:

无端增加视觉元素并不是用户需要的

为了把多出来的内容放到设置界面里,有时候不得不根据内容的多寡来划分菜单项,而不是单纯的根据逻辑关系

不可持续(产品需求的变更很有可能导致之前做好的排版又要改)

然后我想到了工业设计中经常被提到的一句话:形式追随功能(form follows function)。这句话对学设计的同学来说应该不陌生了,最早由建筑师沙利文提出,后来成为包豪斯最重要的主张之一。说这句话对整个设计界都产生了深远的影响也不为过。因为它是如此的出名,并且容易引发究竟是形式重要还是功能重要的争议,所以这里只以形式追随内容为题,不敢把话题扯得这么大。

其实已经有设计把我上面提到的这个问题解决了。对,答案就是苹果的系统设置界面。

界面设计中的内容与容器关系,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

Windows环境的同学可以装safari for PC,看它的偏好设置。这里我截了通用和自动填充两个界面,如下图

界面设计中的内容与容器关系,PS教程,图老师教程网

界面设计中的内容与容器关系,PS教程,图老师教程网

Safari每个选项卡下面内容都不一样,最多的十几行,最少的只有3行,而界面的高度会自适应内容的高度!

在不同tab下切换时,Safari的偏好设置会平滑地切换界面高度,完美的解决了我刚才提出的问题。我想这就是形式追随内容了。

这样在界面设计过程中,设计师可以不用考虑内容是否放得下,界面是否美观这些问题,把内容以最合理的方式展现出来。

我始终认为,一个好的设计,在设计之外,应该能够同时把设计师解放出来,不再做重复的设计。

其实苹果界面的设计思想,从没有最大化就可见一斑了。窗口的左上角的红绿灯,红色是关闭;黄色是最小化;至于绿色的+号,只是把窗口调成最合适的大小(有时候合适的大小就是最大化)。Safari for PC把这种设计思想也带到了PC上来,设计出了高度随内容而变化的偏好设置界面。

之前提出的问题是解决了,不过如果真的是形式追随内容的话,那界面的宽度呢?宽度是不是也能(应该)追随内容?

高度和宽度同时变化以适应内容,会不会让用户失去对界面的掌控感?

依然是PC平台上的例子。装了win7的同学可以试试系统自带的计算器,有4种模式可以选择,标准型,科学型,程序员,统计信息。4个模式下,界面的高度和宽度都是不同的。在切换模式时,计算器界面以左上角为基点在不断地切换大小,没有发现明显的体验问题。

界面设计中的内容与容器关系,PS教程,图老师教程网

界面设计中的内容与容器关系,PS教程,图老师教程网

左上角这个基点,对于形式追随内容至关重要,如下图所示。因为这个基点周围区域的内容是不会随界面的改变而产生位移的。

界面设计中的内容与容器关系,PS教程,图老师教程网

Win7计算器的标题和菜单的位置就不会因为界面尺寸的变化而产生位移,从而保持了界面变化过程中的稳定感。美中不足的是最小化/最大化/关闭按钮的位置会改变。(所以苹果把红绿灯放在界面的左上角?)

而safari的偏好设置因为导航占据了顶行,所以没有做宽度变化适应内容。

想说的大概就这些,感兴趣的同学可以再对比下win7的系统设置,有些细节的地方设计得很有意思。

不只是客户端,在web程序中,我们的思维是不是可以不要局限在在当前页面或者新tab打开?弹出新窗口,让窗口适应内容大小会不会更好?

这篇文章不想就形式和功能孰轻孰重展开讨论,只是把自己实际在工作中碰到的问题和一些思路和大家探讨。最后给各位耐心看完的同学拜个晚年!

来源:http://www.tulaoshi.com/n/20160217/1578401.html

延伸阅读
在VB里,MDI(MultipleDocumentInterface,多窗口程序)窗体是这样定义的:“MDI窗体作为一个程序的后台窗口,包含着MDIChild属性为True的窗体”。在一个VB程序中,至多只能存在一个MDI父窗体,可以有多个MDI子窗体;建立一个MDI父窗体的方法是在VB的File菜单里选择“NewMDIForm”。 在MDI程序运行时,如果子窗口具有菜单,那么当子窗口...
构建界面视觉层级的元素有颜色的显著程度,图片、文字的尺寸大小,还有最基础的,内容的组织结构。 结构设计是指对界面内容进行分组,对界面中的信息、数据进行设计使之结构化呈现的过程。 好的结构设计能使界面信息传达更加清晰、快捷。那么,如果进行结构设计呢? 结构设计内容的分组 使用线、框、背景色来分组 这是最常见的分组方式,在...
绿色有很多中好的寓意:被批准放行(绿灯)、举重若轻、挣些美钞。同样,绿色也有自己的阴暗或者不引人注意的意义:绿眼怪(嫉妒),脸色苍白(feeling green around the gills)以及简单的太嫩(be green)了,比如,毫无经验。 到现在为止,我们在这个系列中了解了蓝色 和红色以及它们在设计中的一些实例。今天让我们了解一下绿色。和蓝色一样,绿色...
紫色是一个神秘的富贵的色彩,与幸运和财富、贵族和华贵相关联。它也和宗教有关、比如复活节和紫色的法衣。非常有趣的是,如果你看一下基督教和教堂网站,却并没有大量的紫色 上一篇我们看了一下快乐的黄色,现在轮到黄色的补色紫色了。不爽的是,紫色容易看到顶端,但是用的好的话可以很醒目和时尚。查看色盘我们可以看到紫色是红色和蓝色的...

经验教程

877

收藏

58
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部