造型设计中线条的魅力

113|10评论|8451人气|204收藏|2022-05-29 17:16:46
本文以【罗技著名产品】为例,心无旁骛对产品分析学习,重点解读产品造型中的线条道理,发现其中蕴含7种线条规律。罗技G300鼠标于2012年发布,那年笔者刚毕业工作,期间书写此文,正值2022年伊始,刚满10年,回望此文仍有不足,权当纪念。


本文字数8千,静心阅读完需要30分钟。

本文多为专业词汇,阅读时稍显费力。

本文原创,如有转载请标明出处或二维码。


为什么要写理论总结?

    设计方法主要源于知名产品分析并受启发,通过项目实践做总结提升。1.主要学习经典,例如学习罗技产品,并用油泥模型一比一制作,揣摩设计中的技巧方法等。2.通过项目实践锻炼,每时每刻在寻求创新,在长期的项目实践中浸染对产品枝末细节更加熟悉,懂了产品在设计创新时更有针对性。在完成一轮产品后,对其中的反思和发现更为深刻。3.尝试总结成方法论,用户指导设计实践,让设计过程更绿色更精准更高效,而接下来的实践更加优化方法论。4.拨开云雾见天日,突破了现有的瓶颈才能更加海洋下的冰山,针对工业设计的每个模块都要细化研究,并将研究成果应用产品上,对此领域深耕才能足够专业,在项目进行中才能游刃有余。


真正能激发大脑思维的是文字,文字的想象力大于图片和视频。



     点、线、面是产品形态的最基本语言。它们即是符号又是图形,它们之间可以相互转化,可以表达出不同的性格和内涵。权衡三者之间的关系将有利用产品形态创新设计。在所有的产品造型中都可以归结于点、线、面、体、空间五种基本元素。现在主要从点、线、面平面元素来探讨。产品形态有多种构成方式,但构成的原理和原则都是相通的。所以产品的造型都是从最基本的元素开始的,当然这些受限于人体工学、结构、材料、功能、语义的制约。点存在于空间之中,点的移动生成线,线的移动生成面,面的移动生成体块。


5.1点在产品上的运用

   本节内容将以“罗技”经典鼠标为例探讨汲取设计营养。这款鼠标为罗技公司经典之作,命名为G300,定位于中端游戏鼠标,目标消费者是20—45岁的游戏玩家。

    点存在于平面上或者空间里。在设计中,点具有一定的形状。我们习惯将图形面积较小的部分看做点。其实点是相对的。与其他周围元素相比较较小面积时也成为点,当某个元素成为视觉中心时也成为点。


    点在曲面上的应用:依照上述原理,鼠标顶视图(见图3-1),六个按键在顶视图上面积较小容易成为视觉中心,因此这六个按键作为点存在于图形之中。此时的点形状较特殊,他是在整体风格的影响下形成“X”形状的图形。一般来讲图形较小的部分容易形成点。

图片

(图3-1,罗技鼠标G300)


5.2线在产品上的运用

     从西方审美观点来讲,点的移动形成线,线是点移动的轨迹,线具有长度感和方向感。当形体的某一方向的尺度大于其他方向时,也可以称为线。面与面之间的转折处也会形成线。线产生于点的运动,可以表现出内在的运动紧张。现在大自然中有很多表现,不论在矿物、植物和动物的世界中,随处可见。冰雪的结构造型便是显得造型。植物的种子在在生长过程中,从生根到发芽长出枝条,也是从点到线的运动。线分为轻重、长短、粗细、圆直,代表的性格为轻巧、流动、优美、刚毅、硬朗、圆润、灵活等。在具体的设计中,线不外乎垂直线、水平线、曲线、折线、对角线。线的轻重、长短、粗细、圆直不同,设计表现也会不同。


    例如垂直线是上下运动的,通常表现严肃、尊贵的感觉;水平线是水平运动的它与地平线平行,通常表现宁静、安详、稳重、静谧、安稳的感觉;对角线是倾斜的线,通常表现紧张不安和紧绷的感觉;曲折线是直线打弯而形成的锐角曲线,通常表现迅速和力量感;曲线是线的平稳的细小的变化,通常表现女性的柔美、和韵律。


    此外线的粗细也自关重要。一条细的线能表现出敏锐、速度、锋利的效果;一条粗的线能表现出迟缓、稳健的效果。对于同一条线前端较细后端较粗,则表现出韵律感。总之线是形态的代表和基础,在很多情况下我们都是依靠线来界定形体的。


下文重点讲解7种线条规律




  规律1  

5.2.1外轮廓线

     这里外轮廓线多指产品的整体图形印象。有着区分同类产品的作用。外轮廓线即产品形体边缘线,这种线条是从产品的多个角度观看后留给人们的残留印象。(如图3-2)展示了鼠标的三个角度的形态,这三个角度均能代表出鼠标的造型语言及风格。随着人们在使用产品时间的增长,慢慢的对形态产生记忆,因此不看产品时,人们头脑里也可以想起其大概。根据这种原理,将鼠标的形态简化到最简状态,只剩下外边缘线和特征线(图3-3),看到这种线条和图形人们自然而然的联想到之前的鼠标。为了避免相似的联想,设计出新颖的外观,那么外轮廓线是要突破的。

图片

(图3-2 罗技鼠标G300)


图片

(3-3 分析图稿)





  规律2  

5.2.2侧视图轮廓线

    外轮廓线体现着产品的风格和性格。将鼠标的实物图和提炼后的线框图作比较。见(图3-4),左侧的鼠标外轮廓线所围成的图形在视觉心理上体量感较大,右侧的鼠标体量感较小。因此左侧的鼠标显得稳重、中性、平稳、沉闷。右侧的鼠标显得轻巧、速度感。

图片

(图3-4 分析图稿)





  规律3  

5.2.3顶视图轮廓线

比例

     将现实产品转化为黑白稿(见图3-5)。在比例上长为95X,宽为60X,其比值约为1.55,接近斐波那契数。因此在比例上最均衡最和谐。为此将顶视图封闭成剪影状态(见图3-5),左边为正常状态,中间为加长状态,右边为加宽状态。从视觉平衡上来衡量的话,三者相比之下左边的图形最为平衡。又因其产品定位为中性、稳重,所以左边的剪影看起来更为均衡,从而产生比例美。

图片

图片

(图3-5 比例)


█ 图形变化

    图形是变化的,从平面设计角度讲,特殊的图形将会吸引人的眼球。本产品在顶视图上为了能够吸引消费者,在图形上稍作变化(见图3-6),左图前端减去了一部分,右图是封闭少有变化的图形。从视觉角度上观察,左图的视觉吸引力大于右图。这个规律可以应用到其他的产品设计上,(见图3-6),图片显示了完整的图形和残缺的图形,相比之下残缺的图形会更吸引人,右侧的“雷蛇”鼠标运用了这一点,从而形成自身的品牌特色。因此适当的做些图形变化将会吸引目光为产品带来新喜的外观。


    当然产品的图形不是随意变化的。本产品的顶视图上包含了五个不同功能的图形,分别为:外轮廓图形、内轮廓图形、按键图形、滚轮图形、装饰图形。这种图形之所以称之为功能图形,在于其不同于平面设计中的视觉图形,产品中的图形在必要的视觉效果外,更注重消费者的使用、交互、结构、语义、模具,也就是说以上因素制约着产品的图形。


1.完整的图形不会吸引注意力,相反残缺一点的将成为视觉中心。

2.如右边,残缺的更吸引你,著名鼠标品牌“雷蛇”运用了这一特点。


图片

图片

(图3-6 图形识别)


 线条处理

    顶视图上的线条处理是十分值得考究的。将鼠标简化为线框图,来探讨线条的美感及合理性(见图3-7)。图中蓝色的线为顶视图中的主线条,将其抽离出来,看最右边的图,图上标明了1—6数值。

1处为线的起点,线呈水平状,原因在于产品的定位为稳重、沉闷风格。

2处圆角度数,钝角,大于120度,文化其产品风格定位。

3处线的变化点(转折点),体现了线条的变化,符合“统一与变化”的产品形式美感。

4处线的高点(高潮),显示了线条的最大变化点,与其它点形成对比,符合“对比与均衡”的产品形式美感

5处线的变化点(转折点),这里充分考虑了人体工学的因素,此处略显往里面收缩,目的在于消费者使用时舒适的手感。

6处线的终点(渐渐消失),这里线条渐渐的变成了曲面,其一是为手感考虑;其二让突出的线条渐渐的融入曲面之中。


     将这条线比喻为人生的处境,1处为平稳的人生起点,2处为人生过渡,3处为人生转折点,4处为人生的高峰,5处为人生的坎坷挫折,6处为人生的结尾。

以上线条处理的带来的美感和合理性。美感是为了在满足开模、材料的前提下让产品更多符合形式美,即节奏与韵律、比例与尺度、对称与均衡、变化与统一、对比与协调。而线条的合理性在于将美感和人体工学、人机协调、制造工艺统筹兼顾。

图片

图片

图片

(图3-7 线条处理节点)


 视觉中心和视觉转移

    上面讲过,图形变化将会带来视觉的注意力。将鼠标的结构拆开,在顶视图上形成多个图形(见图3-8),来分析图形变化和视觉中心的切换。


·内图形与按键后减前,形成边缘特殊的图形。

·看此图形时,外轮廓吸引眼球,视觉中心集中到黑色区域(类似表情的小按键上)因为按键为小图形,易吸引眼球,此时按键的形状为主图形,其余为背景衬托。再者按键的形状富有细小的变化。

接着视觉转移到内图形上,内图形(即点击区域)边缘变化突出,直接用后减前,成为第二视觉中心,之后视觉转移至外轮廓上,外轮廓的图形变化同样吸引人的眼球,此时外轮廓成为视觉中心,其余为背景。


图片

图片

(图3-8)


 线条的风格

    水平直线给人舒展感,垂直线给人以刚直感,折线给人焦虑和不安,曲线给人柔美和轻盈感觉。上面说过不同的线条会形成不同的风格,进而影响人的心理感受。但是同一个线条由于其节点的位置和数量的不同也会带来新的风格倾向。


     基于上面所述,将顶视图的主线抽离出来并做三种变化(见图3-9),现在浅析线条及节点的变化所带来的风格变化。

图A:绿色点处圆角度数5度以内,则尖锐,点数量越多越机械,数量少越精干。

图B:节点少,圆角接近180度,这种情况下线条倾向越流线和动感。

图C:节点多,圆角在90度附近,这种情况线条倾向静止和平稳。

图片


图片


图片


(图3-9)


 图形与图形之间的关系

     现在所讲的图形指的是大图形和小图形之间的联系。在产品的顶视图上必须有主要图形和次要图形以及装饰图形。上面已经谈及顶视图主要图形,现在将鼠标的左边按键提取出来(见图3-10)A图,再将A图提取简化为B图。在B图中1至6处的圆角是不同的。这种圆角决定了线条,线条又决定了图形的轮毂,当然这种轮廓是和主要图形是相匹配相呼应的。在图C中线1、线2、线3制约着图形。其中线2和线3围成“X”状,这种虚拟的 “X”即形成了产品的神态霸气略显王者之气。在图D中,在这个小图形里面又包含了两个按键。红色小圆圈处显示了两个按键形状变化的关键点,按键形状即呼应主要图形又反映整体风格,因此产品从某一角度看起来是整体的。图E显示了两个按键的空间变化,细看其线条的变化,线条是有凹有凸的,反映出了曲面的变化,也是是有凹有凸的,这时候不能从平面角度分析,而它更多的是考虑人体工学和人机工程学。

图片

图片

(图3-10)





  规律4  

5.2.4腰线

    腰线这类词汇大多出现在汽车设计当中。(图3-11)显示了汽车的腰线所处的位置及其变化。汽车的腰线带有抽象的外观信息,腰线指的是侧面车窗下沿线与车身形成的空间曲线,腰线作为车身上的主要线条,其变化非常丰富。腰线存在于面与面之间,与过度特征线很相似,不同的腰线造型对汽车的影响巨大,图25列举了五种不同的汽车腰线走势。从侧视图上看有前低后高、前高后低、两端下降中间拱起、中间凹陷、水平线五种类型。腰线会引发汽车的风格,在(图3-12)中,图1中的腰线整体呈前低后高,腰线的前倾角度大,汽车的风格趋向运动性。图2中的腰线整体呈前高后低,同样腰线也有一定的倾斜角度,汽车的风格趋向迟缓。图3的腰线整体呈前低后高,类似“甲壳虫”的汽车,线条曲率圆润,汽车的风格趋向饱满圆润。图4腰线两端下降中间拱起、这时候腰线通常由两线条组成,此时汽车的风格趋向律动锋锐强劲。图5腰线整体呈水平状态,线条的倾斜角度平缓,汽车的风格趋向稳重平稳、商务大气。


图片


图片

(图3-11 马自达概念车)


图片

(图3-12)


    上面讲到腰线深深影响着汽车的风格倾向,同样在鼠标上页存在着腰线,这种腰线受三个因素的制约,其一:为力学(即鼠标可以支撑整个手掌,而不会被压扁);其二为:模具的限制;其三为美学,也称作为形式美感,这当然这里也受风格的影响,比如定位为硬朗尖锐的风格后,腰线的设计尽可能的少用柔软的线条。同样定位为圆润的风格后,那么腰线的多为曲线而并非直线和折线。图26为鼠标的三个视图,我用红色的线将腰线标出,可以看出腰线在三维空间的变化是丰富多彩的。以这个鼠标为例浅析腰线与风格倾向之间的联系。这款鼠标定位于中端鼠标,风格为流线中带有一点坚硬。那么从(图3-13)中的左图(顶视图)可以看到有两条红色的腰线,这两条线前端较为突出坚硬,后端渐渐消失融合到曲面当中。(图3-13)中间的图(后视图)可以看到两条红色的腰线,这两条线具有韵律感,迎合鼠标的风格定位。(图3-13)右面的图(侧视图)可以看到一条红色的腰线,这条线趋向坚硬,同样迎合鼠标的风格定位。


图片

图片


图片


(图3-13 鼠标的腰线)




  规律 5image.png

(图3-15 鼠标的断面线)


                                                规律 6


image.png


                                                规律 7image.png


关注公众号后,回复“线条研究”可以下载原文。

image.png


结构断面线指线条存在于曲面之中,但是这种线条是不明显的,它是隐含在曲面当中,这种线条只能用手触摸才能感受其存在。如(图3-15)所示,蓝色的线条示意出了断面曲线。


     图A中,线条1、线条2、线条3、线条4存在同一个鼠标大曲面上,但四个线条的变化是不同的。线条1考虑到食指和中指方便点击以及方便触击功能按键。线条2考虑到食指、中指、无名指、小手指大的第三关节处的舒适贴合。线条3陡然下降,变化幅度较大,其考虑到大拇指的抓握和手掌的贴合。线条4只有一个弧度,其考虑到腕关节的贴合,有着支撑整个手掌的作用。因此曲面断面线多数由于人体工学所制约。此外四个线条显示“变化与统一”,“节奏与韵律)的美学规律,四个线条由缓缓变化到剧烈变化再到舒缓变化足矣显示形式美法则。


     既然存在结构断面线,线由点控制,同样曲面也存在结构断面点,如图B,点5、点6、点7显示了曲面点。点5处稍微凹陷,这个位置身处食指和中指点击区域,考虑到点击的舒适性,这里的曲面往往向下凹陷。点6身处食指和中指的第三关节处,因此此点微微突出,目的是支撑四个手指。点7身处手掌心和腕关节的中间,这个地方的手掌有肌肉保护,需要平滑的曲面支撑,因此此点并不突出,而是隐含在曲面之中,当然此点在空间中是存在的。如图C,线8和线9也是隐含在曲面之中,这里也是充分考虑到了人体工学的因素。我们发现结构断面线和曲面上的空间点,都是为收的舒适感而考虑的,因此这些线和点都可以归结为人体工学线和人体工学点。



总结

     点、线、面影响着产品形态。它们即是符号又是图形,它们之间可以相互转化,可以表达出不同的性格和内涵。权衡三者之间的关系将有利用产品形态创新设计。在所有的产品造型中都可以归结于点、线、面、体、空间五种基本元素。单从线上讲,分为外轮廓线、侧视图轮廓线、顶视图轮廓线、腰线、开模线、结构断面线、装饰线等,熟知造型内在道理有利于塑造造型DNA识别特征.








赞赏

小小心意,大大鼓励

204收藏文章 113赞起来+1

周红超

数码智能 · 深圳市 南山区 科技园

热门文章

发明专利的10个关键步骤

103赞  9评论  6719人气

红点奖设计方法-以AceNew电源为例

219赞  22评论  15017人气

设计思维创新 / 07负空间

131赞  12评论  10545人气

365种 设计思维创新

150赞  21评论  13467人气

查看更多

留言板(10

添加表情
登录后评论 添加图片
    最新 最热
    xivincent 2022-06-22
    举报 回复

    缺口引起注意这个很点睛,以前虽然运用过,不过没细想过道理.比喻人生处境时候感觉就开始玄学了,勉强也可以将就着看.后来"其中线2和线3围成“X”状,略显王者之气"就感觉像给糊弄傻老板的提案了.整体还是学习的,更精简严谨一点就更好了.

    蛮五 2022-05-31
    举报 回复

    大大大大大大大大大大大大大大大大大大大大大大大大大大大大大大大大大大大大大大大大大大佬好

    王海云 | WHY-ME 2022-05-30
    举报 回复

    学习

    🆔傻仔👺🤏 2022-05-30
    举报 回复 1

    马赛Mars 2022-05-30
    举报 回复

    城南城北 2022-05-30
    举报 回复

    大佬 多写文章哟

    借风拥你 2022-05-30
    举报 回复

    大神分享,收藏学习

    安全帽 2022-05-30
    举报 回复

    优秀

    好好学习 2022-05-30
    举报 回复

    学习了

    羽扇 2022-05-30
    举报 回复

    写的真好

    你可能还喜欢 换一换

    收藏
    创建收藏夹

    创建收藏夹

    收藏夹名称
    确定

    举报评论

    恶意辱骂,诋毁
    垃圾广告信息
    黄赌毒,诈骗信息
    政治敏感问题
    其他原因
    提交
    留言 点赞 收藏 分享

    周红超

    小小心意,大大鼓励

    赞赏金额

    ¥ 1
    ¥ 5
    ¥ 10
    ¥ 50
    ¥ 100
    其他

    赞赏金额

    微信
    支付宝
    确认支付

    最高赞赏200元

    支付宝支付

    使用支付宝扫描二维码完成支付

    微信支付

    使用微信扫描二维码完成支付

    余额支付

    当前余额:¥0.00

    支付操作会向你普象账户的注册手机号发送验证码
    请注意查收

    发送验证码
    确认支付
    支付成功
    关闭