基于设计几何学的消费类电子产品形态研究

张锐 张丹芮

关键词：设计几何学 移动智能终端 产品形态 人因工程学 用户体验

引言

随着科技发展，核心技术的运用开始普及，同类产品间功能上的差距化逐渐缩小。产品内部结构与形态的匹配度，功能与形态的契合度，成为提高产品设计品质的重要切入点。中国消费电子市场已经进入了快速发展阶段，消费类电子产品的各个方面或多或少都在发生改变，如产品形态、功能、定义和情感等。我国现有的消费电子产品种类繁多，但在品质上还有很大提升空间。在消费类电子产品形态设计中引入设计几何学的理论，可以使消费类电子产品在形态上更加符合视觉审美规律，人机关系更加协调，提升用户的使用体验。

设计几何学主要研究比例与尺度，通过在产品设计中合理正确地运用设计几何学原理可以使产品获得更加稳定持久的视觉美感。本文通过分析大量产品形态设计案例，论证设计几何学的相关理论对消费类电子产品的形态设计的指导作用，探寻符合视觉审美规律的形态设计原理，寻找人与产品之间的最佳匹配方法，從而提高消费者的使用体验。

一、设计几何学

（一）设计几何学的概念

设计几何学与数学意义上的几何学不同，更侧重发现归纳人类视觉层面上和谐与秩序的美感，是设计与几何学的深度融合。设计几何学的研究内容包含三个方面：自然界中的尺度与秩序规律、几何比例的基本原理和空间视觉分割法则，研究主体是关于比例和构成的视觉关系，即对人类在审美活动中积累的视觉经验进行研究。设计几何学运用几何作图技巧实现空间的分割，以呈现完美的尺度、比例与序列，因此也是典型的应用几何学[1]。

（二）设计几何学在设计中的运用

设计几何学是合理反映自然形态规律的学问，其在视觉以及器物设计中的运用是随着人类对外在世界探索的过程中出现的[1]，设计几何学中所蕴含的比例与构成的规律在各类设计中都发挥着重要的指导作用。作为产品形态设计中的一种研究视角，设计几何学正不断逐渐迈向系统化。

直到今天我们依旧可以看到一些流行数载堪称经典的设计，如图1所示。这些出色的设计作品大部分都符合黄金分割的比例关系，且灵活地运用黄金分割对设计作品进行分析指导，不是机械地套用观念。设计师在实现产品功能的基础上，运用设计几何学对产品形态的尺度和比例进行优化，使产品外形具有更加和谐统一的视觉效果，将产品更好地呈现出来。

二、消费类电子产品的发展趋势

尼尔森的调查显示，近五年来除食品杂货外，消费者花费最多的产品种类为占比38%的科技通讯类，而其中消费类电子产品是消费者最愿意支付高价的产品，占比达42%。随着社会发展与技术成熟，科技和通讯方面的支出上涨成为全球范围内的普遍现象，移动智能终端作为使用频率较高的消费类电子产品已不再是高端消费品，而是慢慢成为日常生活的必需品。人们对于消费类电子产品也不再仅限于对功能和实用性的追求，而是强化了产品的舒适性、体验感和自我价值的实现。

因此在消费类电子产品的设计过程中应更多关注用户的需求与体验，秉持以人为本的设计理念。随着用户需求的改变，产品设计师逐渐意识到用户情感在设计中的重要性，对产品形态、材质与色彩等方面仔细考量，使其在与同类产品在性能上保持一致时，还能拥有更美观的形态和更舒适的用户体验。

三、设计几何学与消费类电子产品形态设计

设计几何学运用于产品形态设计所产生的视觉美感、稳定性与持久性可以使消费类电子产品的形态设计更加完善，其带来的美感历经时间演变，仍然符合人们的审美需求。究其缘由，设计几何学为产品形态赋予的颠覆性变革，与其源于自然、发展于人类社会、基于大量数据结构的特性是分不开的[2]。

（一）苹果第一代ipod造型的黄金分割

苹果第一代ipod的整体造型位于黄金分割矩形中，整个机器有矩形、正方形及圆形组成。这款ipod整体造型可以分为上方的√2矩形和下方的正方形，显示屏位于上方的√2矩形中且屏幕底边与下方正方形的上边重合。整个操作面板位于下方正方形中央，组成按钮的三个同心圆的圆心位于下方正方形的对角线交点处，转盘可以以圆心为中心点转动。中心按键既处于正方形对角线中心，还与下方的两个√2矩形相切，按键直径与按键右方√2矩形宽长度相同，非常巧妙。这款产品形态经典，由此可见设计几何学作为产品形态设计的方法历史悠久且极具影响力，如图2。

（二）土曼智能手表的尺寸比值

近年来，可穿戴设备逐渐兴起并引领了一股新浪潮，涉及领域包括医疗、娱乐、安全、财务等，目前主要用于健身相关领域，其中智能手表与手环使用较为广泛。图3中这款智能手表形态简洁，表盘为正圆形，表盘外唯一的控制按钮位于表盘中线偏上，将手表分为a、b两段，且a/b=1.6。a与b相加和为手表正视图的长度c，且c/a=1.6。将手表位于矩形中，用矩形的上下边作两个正方形再画出其对角线，表盘显示内容则在对角线相交中心处。以两个正方形对角线作四条弧线，形成两个√2矩形，表盘边缘近似于弧线相切。整体产品形态简洁大方不失精巧，体现了设计几何学理论对产品形态的指导规范作用。

四、物与人的尺度考量

设计几何学是对自然界中事物比例与构成的规律进行分析的学科，而人作为自然界的一部分，也有自己的尺度，只有符合人体尺度的产品使用起来才更加舒适。出色的外观会博得消费者第一印象上的好感，但产品的内在使用体验会对用户产生更大的影响。人在日常生活中使用频率较高的消费类电子产品，其用户体验便显得尤为重要。

（一）产品的视觉要素与设计几何学

视觉是人最重要的感觉。人通过视觉感知外界物体的大小、明暗、颜色、动静，获得对机体生存具有重要意义的各种信息，至少有80%以上的外界信息经视觉获得[3]。随着智能时代的到来，消费类电子产品中使用率较高的手机、平板等智能设备大屏幕的发展趋势已不可逆，人与产品的交互几乎全部在屏幕上实现，所以交互界面的设计就显得尤为重要。

1.用户界面

以智能手机为例，早期手机一般为九宫格或十二宫格的布局形式，用屏幕下方配备按键进行操作。触屏时代来临后，系统界面布局发生了很大变化。iPhone打破了以往的界面布局，将界面划分成显示常用图标的上部区域和摆放重要功能的下部区域[4]。上下部分之间有明显的分隔元素，更加便于用户辨别。

不同系统平台的智能手机的界面布局需要按照各自的规范进行设计。iPhone的界面布局经过不断优化，在iPhone6时已经逐渐定型，如图4所示（各模块单位为像素px），界面分为上中下三部分，顶部状态栏与导航栏用于展示与管理重要讯息，底部工具栏与Tab栏便于用户对手机进行操作，中间部分为内容的主要显示区域，设计师需在此布局的基础上对界面进行进一步的设计。从图5可以看出，iPhone6的界面尺寸宽高比为9：16，接近√3矩形，上下两个图标的间隔形成的矩形为√4矩形，整个界面的图标沿中轴线左右对称、上下对称，排列规律。对齐的布局方式能为用户视线提供一种自然的边界，增加设计的整体美感；左对齐和右对齐布局能创造出无形的“列”，呈现出一种清晰的视觉暗示[5]。如此可以达到引导用户视线的作用，有效传递信息的同时不失美感和人性化。

2.图标设计

图标是用户进入移动智能终端操作平台的钥匙，早期的手机界面上的图标是以各平台自主设计的图形标识为主导，没有固定的尺寸和样式，以图形表明不同的操作或功能。直到2007年iPhone上市，其图标统一尺寸框，给人以舒适、友好、极富吸引力的感受。所有图标的尺寸大小遵循着相同的标准规范，使其视觉效果看起来恰到好处，这个规范经过了设计团队反复推敲与用户测试，才使每一部上市产品都有适度的尺度，无论显示屏幕大小怎样改变，呈现的图标都是适宜的尺度和比例[4]，形成苹果独有的符号特点。图6为苹果图标设计规范，图标通常在1024×1024像素大小的画板中进行设计。为了在不同形状中的设计能达到视觉统一，在使用正方形、矩形、圆形、长方形时还需进行一些调整，其中矩形和长方形都使用接近√2的矩形。在图标设计中遵循恰当的比例关系进行设计，能使其更符合用户的审美需求。

苹果的图标完全符合栅格黄金比例，视觉效果十分协调且一整套图标都保持着高统一性。由图7可以看出，苹果的图标是边长为1024像素的正方形，四个圆角与正方形边界形成的矩形为64像素。沿正方形中轴线分开，两边分别由三个黄金分割矩形组成，正方形的边长刚好为三个黄金矩形的短边长度和或两个黄金矩形的长边长度和。不论黄金矩形横或竖摆放，都与最小的同心圆相切。三个同心圆以正方形对角线交点为圆心。

苹果图标中的照片、Safari和时钟，如图8所示，是苹果系统图标的一部分。照片由八个相同的椭圆组成，以图标对角线交点为圆心均匀阵列形成，位于最大的同心圆内，每两个椭圆中轴线形成的角度为45°。椭圆相交的部分为深色，位于最小的同心圆内。Safari的图标是一个指南针，圆形表盘与最大的同心圆重合，指针位于矩形对角线之上，被另一条对角线分为对称的两个颜色，刻度均匀分布。时钟图形与时针分别位于两个同心圆内，分针与秒针伸出的长度相同，秒针尾部延伸出一部分，并以颜色不同于分针区别开来。作为用户熟知的苹果系统图标，看似普通的图标包含了丰富的设计几何学原理，才使其达到了巧妙且自然的程度。

3.品牌LOGO

以蘋果公司为例，图9中的LOGO同时运用了黄金分割比例和斐波那契数列，将半径为斐波那契数列（1，1，2，3，5，8，13）的圆相切后得到一系列曲线，这些曲线互相连接后就形成了苹果公司所特有的标志。苹果LOGO所包含的规律展现了理性与美感的结合，也是其拥有辨识度和吸引力的原因，进而达到广泛传播且深入人心的目的。

苹果另一款产品iCloud的LOGO位于一个黄金比例矩形中，如图10所示，云朵的每一个凸起都是正圆的一部分，其中小圆直径与同色系大圆直径的比值为1.618。将设计几何学融入LOGO设计的方方面面，能使LOGO的表现更加细节与丰富。

4.网页页面中的色彩比例研究

色彩作为用户浏览网页的第一感觉，会直接影响用户的阅读体验，其次的影响因素才是网页的布局与结构。色彩比例通常指主色、辅色与强调色这三者间的比例关系，正确把握色彩使用时的比例关系，可以使页面主次分明、层次清晰、一目了然。

日本设计师まりっぺ曾提出过配色的黄金比例原则，即70%为大面积使用的主色，25%为辅助色，5%为强调色，按此比例做出的网页页面所产生的视觉感受会使用户感到舒适。而占比70%的主色，即网页背景色，则要尽量避免使用高明度色彩和低明度、高饱和度的色彩，辅助色和强调色应是邻近色或互补色的关系。

视觉上的强烈对比依靠互补色实现，使用时需要注意使用面积的比例关系，选择一个颜色大面积使用作为主色，再用小面积的互补色使画面平衡。如果两种颜色占比相近，也会给阅读者带来不好的阅读体验。歌德是19世纪欧洲最伟大的文学家、诗人和色彩学家，他认为色彩的力量取决于色彩的明度与面积。明度是指色彩的明暗、深浅程度的差别，取决于反射光的强弱。除了颜色本身的明与暗之外，不同色相之间也存在着明与暗的差别。歌德由此提出了色量平衡的数字比例，不同色彩之间的明度比例3：7甚至2：8的比例分配原则[6]。按照此比例设计的页面更符合大众的视觉审美需求，且能带给用户更良好的阅读体验。

（二）产品触觉与设计几何学

触觉是用户与产品实现交互的最主要方式，大部分操作由手完成，而持用手机时用户手指会直接与界面产生互动以完成操作。合理的界面元素布局会给用户在操作环节带来更加舒适的使用体验。

用户在单手持握手机的情况下，只有部分屏幕是真正容易触及的区域。2011年在《Designing Mobile Interfaces》一书中，StevenHoober首次使用了术语“拇指热区”，意为“单手持用手机时最舒适的触摸区域”。图11为右手持握手机、拇指进行操作的用户的手机屏幕点击舒适区域示意图，用户拇指正对的区域为最舒适的触摸区域，左上和右下角的操作难度则较高，因此工具栏与Tab栏等需要与用户频繁产生互动的界面模块通常放置于屏幕底部。研究拇指热区可以为设计师安排图标位置提供指导，如将常用图标放在拇指热区内，不常用或易产生数据变化的图标放在热区之外。

研究拇指长度可以为智能手机屏幕尺寸及界面布局设计提供参考。根据人体测量数据的运用来确定最大最小准则，为了满足最大覆盖面的用户需求，分别选用男性和女性手部号型覆盖率最高的数值，再得出两者的平均值。根据《中华人民共和国国家标准：成年人手部号型（GB/T16252-1996）》可知，全国成年男子手部号型覆盖率最高的手长为180mm，占比46.35%。男子拇指长Y与手长X1的关系为Y＝－4.96＋0.32X1，得出拇指长为52.6mm。全国成年女子手部号型覆盖率最高的手长为170mm，占比49.33%。女子拇指长Y与手长X1的关系为Y＝－2.79＋0.32X1，得出拇指长为51.6mm。根据人体测量数据运用准则中的平均性原则，拇指长的参考数据应选用男女拇指长的平均值，即拇指长为52.1mm。因此图11中手机屏幕点击的舒适区域范围应以拇指长度52.1mm为标准考虑界面的排版规律，使其在几何与比例关系的设计上更加合理。

专注于用户体验和界面设计研究的机构——UXmatters公开的一份报告中显示，日常生活中人们主要有三种手机操作姿势，分别是单手拇指持握、双手拇指持握和单手食指操作（另外一只手持握），且49%的用户在一般情况下采用单手拇指操作手機[7]，这一调查结果在如今仍有参考价值。在单手拇指持握的方式下，以拇指掌指关节为圆心作扇形可以得到拇指的大致活动范围（图12中红线区域内），超出这个范围则会增加使用的困难程度。以手指触及范围的上方边缘作水平线将手机分为上下两个部分，下方为一个√2矩形，√2矩形的长边a与手机长边c的比为1：1.6，b与a的比也为1：1.6，两个比值都接近黄金比例。因此，灵活运用设计几何学的理论方法对产品形态进行指导，恰当地把握产品与人体的尺寸、比例关系，能使产品在形态与使用方面给用户带来更好的体验。

结语

比例存在于万事万物之中，将比例与构成的科学理论应用在消费类电子产品的设计中，是艺术与理性逻辑的结合。本文分别从消费类电子产品的形态与使用两个方面进行分析，论证设计几何学的理论对消费类电子产品设计的指导作用。在消费类电子产品形态设计实践过程中引入设计几何学的设计方法，不仅可以帮助我们获得和谐统一、经久不衰的产品形态，让其更加符合审美规律，还能使人机关系更协调，提高用户体验，对消费类电子产品的长远发展有不可替代的积极意义。