轻松学会产品设计(第三篇-面)

一、面的理解

产品设计中将具有面积感元素定义为“面”。“面”既可以是有形的空间体积块面,也可以是是元素构成的任何感官面积。

大的连续空间可以看做是面
大面积的出气孔可以看做是面。

与“点”、“线”相比,“面”具有明显长度和宽度,在空间上占有的面积更大,因而视觉感受力更强。面的大小、空间、位置等不同状态都会让人产生不同的视觉感受。

“面”的形态多种多样,如线条硬朗的直面、圆润亲和的曲面、自然生动的自由面等,不同的形态的面使人产生不同的视觉心理。

1.直面

“直面”指由直线构成的面,轮廓具有明显的规律性,如矩形,三角形、多边形等。

直面与直线有着相同的视觉特征,如坚硬、锐利、稳定感等。  
同一个直面分割成几个直边面,形成一种面积大小的对比构成感。

二条及以上长度相等的直线构成的矩形面是最常见的表现形式,它规矩的产品形态,富有直接性、简约感。优点是整齐有序,构成后的产品稳重、严谨、大方,较容易与读者沟通。

直面的利落,简约风格最好表现。

而使用不相等的直线构成的非矩形直面进行设计,可以创造出丰富的产品结构,增强形式感和趣味性。

直面的边长不同,也会构成了面的指向性,具有方向感。
直线边构成的面,易于塑造块面十足的产品。
低多边形造型就是将曲面变成有直边构成的直面。
金属质感+加上凌厉直面容易塑造力量感,机械感的产品。

2.规则曲面

“曲线面”指由曲线边构成的面,如圆形、椭圆形等。与曲线有着相同的视觉特征,给人随意、舒适、柔美的视觉感受。曲线面不像直面的整个面保持在一个二维平面,曲线面更多的保持着空间三轴(xyz)的变化,所以造成曲线的变化更加丰富。

圆形构成的面是最常用的

圆形给人饱满、完整、柔和的视觉感受。当我们看到圆形,会产生寻找圆心的愿望,所以使用圆形很容易形成视觉的聚焦,吸引人的注意力。

将显眼元素放在圆心,人的眼睛一下看到视觉中心。
曲面赋予产品柔和感

其它形状的曲线面优点是趣味性和亲切感比较强烈,可以创造较为丰富的产品形态。

曲线(像女性优美的身体形态)构成的面在女性产品中运用广泛,可以表现产品的优美感。
不规则曲线面,具有柔和生动的变化,可表现儿童类产品的活泼可爱。

将直面倒曲线圆角,让面既具有直面的利落与规整,又具有曲面的柔和。设计时,要注意直线与曲线圆角比例的大小,不同比例传导了不同的产品感觉。

仅仅小倒角,二维平面不变,基本保持直面的感觉。
直面少量圆角,且保持二维平面,产品锋利感更多,柔和感稍微有一点。
蓝色部分的矩形部分和圆角比例趋同,给人舒服的和谐感,温和居家产品常用大倒角。

Apple 产品在圆角上运用更是极致。Apple 不仅将圆角曲线运用到产品,也同时应用到界面之上,从下图我们可以看到,在界面上加入了更多圆角曲线的元素,达到视觉上的和谐统一。

下面角从最外侧的圆角开始一直等距递进到电话图标,这个角落可以数出至少6条等距圆角曲线  。
顺滑圆角看着很舒服。

我们单独理解一下圆角:

5种圆角的曲率表现
上图 a为 1/4 圆弧过渡的圆角,iOS 7 之前的圆角图标,通常平面软件绘制的圆角四边形,以及通常我们称作“导圆角”, 直线的曲率为 0, 切线连续(G1 连续)。过渡的不顺畅我们可以通过视觉很明显地感觉到。
上图为用一段曲线替代了 1/4 圆弧作过渡,连接直线的两端达到曲率连续,即这段曲线的曲率是从两端的 0 逐渐连续的增大的,我四个角上看到过渡顺畅,但是,存在一个问题,看上去四个角不够圆了。虽然光滑但不够圆,从曲率的示意图中观察到,这条曲线曲率的变化不具备圆的特征,因为圆的曲率处处相等,均质而统一的。
上图示意,曲线两头连续过渡,中间部分过渡缓慢,接近均等,当然这个曲率过渡也要在设计中多考虑,才算达到自己想要的顺滑圆角。
我们对比下这G3倒角和苹果圆角的连接方式, 苹果圆角倒角分成三段来拟合,倒角和直线直接过渡缓和,三段曲线均达到相切连续且曲率大致相同,逼近圆弧的视觉感受。

知道圆角的这种细节后,我们做设计是不是更具有美感了呢。


矩形特殊倒角-跑道矩形

矩形短边两头完全变成了半圆,倒角达到了极致。半圆和直线的比例,很大程度决定了面给人的感觉是硬朗还是柔和。

长条矩形,倒最大的角,让2头构成半圆,就形成了跑道形态的面。
跑道形态的面,如果直边短,柔和感就更多一些,直角边更长,就感觉更严肃些。



极简设计常用的规则曲面:

曲线通过简单的移动或者旋转而形成的面,如圆柱,圆球面,方形体等,这样规则曲面看起来简洁有次序。采用三视图可以清楚表达出曲面的特质。

直线旋转成型可以得的圆柱曲面,仍然具有直线的利落,简约感。(注意如果截面圆大于直线的长度,那产品的曲面感就更强)
方形体,倒圆角让连接的三边形成曲面连接在一起,让产品看起来更柔和。


3.自由曲面

曲线的走向是非单一方向,非圆或方基础形态,具有流动性,在xyz三个空间上都具有变化。复杂的自由面就像大自然随机的形态,因此自由曲面视觉上感受到自然、生动、有灵性。

这个顶面给人一种自然山丘的感觉。
重复构成的自由曲面,给人花朵的印象。
像布面被拉扯的感觉
汽车的自由曲面,也类似于布面被紧绷拉扯感,转折和宽窄变化都遵循视觉力来变现。
鞋子本身是柔软的材料,采用自由曲面拼接来构成形体最为常用。

自由面的轮廓形式多种多样,运用在产品设计中很考验设计师想象力和把控力。自由曲面优点是可发挥设计的空间很大,让产品变得很有特点,传达品牌独特的调性,但是操作难度高,自由曲面不管是设计、建模、生产都是更具有难度。


二、面的运用

1.面的连接

面与面的连接,对产品的感受影响很大。直接连接,产生的边线,产品就会给人硬朗的感觉;连接处曲度大,就是曲线的效果,给人温和亲近感。

面的连接倒角小,切面明显,硬朗力量感。
面的连接倒角大,衔接顺滑,亲近温柔感。
面面交线保持锋利感,给产品形成线的装饰感
在本顺滑的面上,特意造一条面线,形成切削的装饰感。


2.面的延伸

从一个常规的正面延伸到侧面,增加产品的空间层次,让产品更加整体。

耳机丝印的银色面从正面延伸到侧面边,产品丰富一个层次。
从正面延伸到侧面和立面。


3.纹理面

如果单个面的面积占比大,并且空间走向单一的,产品容易空洞无质感。

一般的处理方法:①.增加面积的走向,如2所讲的面的延伸,将单一规则面变成丰富的自由曲面。②.在单一面上增加纹理,让单一面增加内容物。

在无人机的尾巴加入纹理,打破面的空洞,增加质感。
电镀件加入了CD纹,精致感上升。
纹理的收尾要融入产品,不能破坏产品的整体性。
纹理边的结尾可以做渐变到消失处理,不影响边缘的整体边线,没有打破单一面的整体性。 


4.面的引导

由于万物受到重力作用,下沉的面给人感觉就像是碗或者盆,是可以接纳东西的。

内凹的面,会有视觉上收纳的感觉,
下沉的小面按键,视觉上引导人去按压。
水往低处流,凹陷的空洞有积水的作用。

总结

“面”的形态多种多样,如线条硬朗的直面、圆润亲和的曲面、自然生动的自由面等,不同的形态的面使人产生不同的视觉心理。但基本简化理解为:线给人的感觉,曲线柔(曲面柔),直线硬(曲面硬)。

面在产品设计中的运用:

1.注意面的连接角,符合产品整体的气质。

2.巧用面的延伸法,设计个性独到产品。

3.利用纹理面,打破面的平淡和乏味。

4.下凹面具有收纳性。


end~


(转载先请联系)

版权声明:本文图片来自网络

版权归原作者所有,仅供学习和交流

原作者如不愿在本文章发布

请及时通知作者予以删除

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
禁止转载,如需转载请通过简信或评论联系作者。
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,634评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,951评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,427评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,770评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,835评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,799评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,768评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,544评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,979评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,271评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,427评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,121评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,756评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,375评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,579评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,410评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,315评论 2 352