張銳 張丹芮

關(guān)鍵詞：設(shè)計(jì)幾何學(xué) 移動智能終端 產(chǎn)品形態(tài) 人因工程學(xué) 用戶體驗(yàn)

引言

隨著科技發(fā)展，核心技術(shù)的運(yùn)用開始普及，同類產(chǎn)品間功能上的差距化逐漸縮小。產(chǎn)品內(nèi)部結(jié)構(gòu)與形態(tài)的匹配度，功能與形態(tài)的契合度，成為提高產(chǎn)品設(shè)計(jì)品質(zhì)的重要切入點(diǎn)。中國消費(fèi)電子市場已經(jīng)進(jìn)入了快速發(fā)展階段，消費(fèi)類電子產(chǎn)品的各個(gè)方面或多或少都在發(fā)生改變，如產(chǎn)品形態(tài)、功能、定義和情感等。我國現(xiàn)有的消費(fèi)電子產(chǎn)品種類繁多，但在品質(zhì)上還有很大提升空間。在消費(fèi)類電子產(chǎn)品形態(tài)設(shè)計(jì)中引入設(shè)計(jì)幾何學(xué)的理論，可以使消費(fèi)類電子產(chǎn)品在形態(tài)上更加符合視覺審美規(guī)律，人機(jī)關(guān)系更加協(xié)調(diào)，提升用戶的使用體驗(yàn)。

設(shè)計(jì)幾何學(xué)主要研究比例與尺度，通過在產(chǎn)品設(shè)計(jì)中合理正確地運(yùn)用設(shè)計(jì)幾何學(xué)原理可以使產(chǎn)品獲得更加穩(wěn)定持久的視覺美感。本文通過分析大量產(chǎn)品形態(tài)設(shè)計(jì)案例，論證設(shè)計(jì)幾何學(xué)的相關(guān)理論對消費(fèi)類電子產(chǎn)品的形態(tài)設(shè)計(jì)的指導(dǎo)作用，探尋符合視覺審美規(guī)律的形態(tài)設(shè)計(jì)原理，尋找人與產(chǎn)品之間的最佳匹配方法，從而提高消費(fèi)者的使用體驗(yàn)。

一、設(shè)計(jì)幾何學(xué)

（一）設(shè)計(jì)幾何學(xué)的概念

設(shè)計(jì)幾何學(xué)與數(shù)學(xué)意義上的幾何學(xué)不同，更側(cè)重發(fā)現(xiàn)歸納人類視覺層面上和諧與秩序的美感，是設(shè)計(jì)與幾何學(xué)的深度融合。設(shè)計(jì)幾何學(xué)的研究內(nèi)容包含三個(gè)方面：自然界中的尺度與秩序規(guī)律、幾何比例的基本原理和空間視覺分割法則，研究主體是關(guān)于比例和構(gòu)成的視覺關(guān)系，即對人類在審美活動中積累的視覺經(jīng)驗(yàn)進(jìn)行研究。設(shè)計(jì)幾何學(xué)運(yùn)用幾何作圖技巧實(shí)現(xiàn)空間的分割，以呈現(xiàn)完美的尺度、比例與序列，因此也是典型的應(yīng)用幾何學(xué)[1]。

（二）設(shè)計(jì)幾何學(xué)在設(shè)計(jì)中的運(yùn)用

設(shè)計(jì)幾何學(xué)是合理反映自然形態(tài)規(guī)律的學(xué)問，其在視覺以及器物設(shè)計(jì)中的運(yùn)用是隨著人類對外在世界探索的過程中出現(xiàn)的[1]，設(shè)計(jì)幾何學(xué)中所蘊(yùn)含的比例與構(gòu)成的規(guī)律在各類設(shè)計(jì)中都發(fā)揮著重要的指導(dǎo)作用。作為產(chǎn)品形態(tài)設(shè)計(jì)中的一種研究視角，設(shè)計(jì)幾何學(xué)正不斷逐漸邁向系統(tǒng)化。

直到今天我們依舊可以看到一些流行數(shù)載堪稱經(jīng)典的設(shè)計(jì)，如圖1所示。這些出色的設(shè)計(jì)作品大部分都符合黃金分割的比例關(guān)系，且靈活地運(yùn)用黃金分割對設(shè)計(jì)作品進(jìn)行分析指導(dǎo)，不是機(jī)械地套用觀念。設(shè)計(jì)師在實(shí)現(xiàn)產(chǎn)品功能的基礎(chǔ)上，運(yùn)用設(shè)計(jì)幾何學(xué)對產(chǎn)品形態(tài)的尺度和比例進(jìn)行優(yōu)化，使產(chǎn)品外形具有更加和諧統(tǒng)一的視覺效果，將產(chǎn)品更好地呈現(xiàn)出來。

二、消費(fèi)類電子產(chǎn)品的發(fā)展趨勢

尼爾森的調(diào)查顯示，近五年來除食品雜貨外，消費(fèi)者花費(fèi)最多的產(chǎn)品種類為占比38%的科技通訊類，而其中消費(fèi)類電子產(chǎn)品是消費(fèi)者最愿意支付高價(jià)的產(chǎn)品，占比達(dá)42%。隨著社會發(fā)展與技術(shù)成熟，科技和通訊方面的支出上漲成為全球范圍內(nèi)的普遍現(xiàn)象，移動智能終端作為使用頻率較高的消費(fèi)類電子產(chǎn)品已不再是高端消費(fèi)品，而是慢慢成為日常生活的必需品。人們對于消費(fèi)類電子產(chǎn)品也不再僅限于對功能和實(shí)用性的追求，而是強(qiáng)化了產(chǎn)品的舒適性、體驗(yàn)感和自我價(jià)值的實(shí)現(xiàn)。

因此在消費(fèi)類電子產(chǎn)品的設(shè)計(jì)過程中應(yīng)更多關(guān)注用戶的需求與體驗(yàn)，秉持以人為本的設(shè)計(jì)理念。隨著用戶需求的改變，產(chǎn)品設(shè)計(jì)師逐漸意識到用戶情感在設(shè)計(jì)中的重要性，對產(chǎn)品形態(tài)、材質(zhì)與色彩等方面仔細(xì)考量，使其在與同類產(chǎn)品在性能上保持一致時(shí)，還能擁有更美觀的形態(tài)和更舒適的用戶體驗(yàn)。

三、設(shè)計(jì)幾何學(xué)與消費(fèi)類電子產(chǎn)品形態(tài)設(shè)計(jì)

設(shè)計(jì)幾何學(xué)運(yùn)用于產(chǎn)品形態(tài)設(shè)計(jì)所產(chǎn)生的視覺美感、穩(wěn)定性與持久性可以使消費(fèi)類電子產(chǎn)品的形態(tài)設(shè)計(jì)更加完善，其帶來的美感歷經(jīng)時(shí)間演變，仍然符合人們的審美需求。究其緣由，設(shè)計(jì)幾何學(xué)為產(chǎn)品形態(tài)賦予的顛覆性變革，與其源于自然、發(fā)展于人類社會、基于大量數(shù)據(jù)結(jié)構(gòu)的特性是分不開的[2]。

（一）蘋果第一代ipod造型的黃金分割

蘋果第一代ipod的整體造型位于黃金分割矩形中，整個(gè)機(jī)器有矩形、正方形及圓形組成。這款ipod整體造型可以分為上方的√2矩形和下方的正方形，顯示屏位于上方的√2矩形中且屏幕底邊與下方正方形的上邊重合。整個(gè)操作面板位于下方正方形中央，組成按鈕的三個(gè)同心圓的圓心位于下方正方形的對角線交點(diǎn)處，轉(zhuǎn)盤可以以圓心為中心點(diǎn)轉(zhuǎn)動。中心按鍵既處于正方形對角線中心，還與下方的兩個(gè)√2矩形相切，按鍵直徑與按鍵右方√2矩形寬長度相同，非常巧妙。這款產(chǎn)品形態(tài)經(jīng)典，由此可見設(shè)計(jì)幾何學(xué)作為產(chǎn)品形態(tài)設(shè)計(jì)的方法歷史悠久且極具影響力，如圖2。

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

近年來，可穿戴設(shè)備逐漸興起并引領(lǐng)了一股新浪潮，涉及領(lǐng)域包括醫(yī)療、娛樂、安全、財(cái)務(wù)等，目前主要用于健身相關(guān)領(lǐng)域，其中智能手表與手環(huán)使用較為廣泛。圖3中這款智能手表形態(tài)簡潔，表盤為正圓形，表盤外唯一的控制按鈕位于表盤中線偏上，將手表分為a、b兩段，且a/b=1.6。a與b相加和為手表正視圖的長度c，且c/a=1.6。將手表位于矩形中，用矩形的上下邊作兩個(gè)正方形再畫出其對角線，表盤顯示內(nèi)容則在對角線相交中心處。以兩個(gè)正方形對角線作四條弧線，形成兩個(gè)√2矩形，表盤邊緣近似于弧線相切。整體產(chǎn)品形態(tài)簡潔大方不失精巧，體現(xiàn)了設(shè)計(jì)幾何學(xué)理論對產(chǎn)品形態(tài)的指導(dǎo)規(guī)范作用。

四、物與人的尺度考量

設(shè)計(jì)幾何學(xué)是對自然界中事物比例與構(gòu)成的規(guī)律進(jìn)行分析的學(xué)科，而人作為自然界的一部分，也有自己的尺度，只有符合人體尺度的產(chǎn)品使用起來才更加舒適。出色的外觀會博得消費(fèi)者第一印象上的好感，但產(chǎn)品的內(nèi)在使用體驗(yàn)會對用戶產(chǎn)生更大的影響。人在日常生活中使用頻率較高的消費(fèi)類電子產(chǎn)品，其用戶體驗(yàn)便顯得尤為重要。

（一）產(chǎn)品的視覺要素與設(shè)計(jì)幾何學(xué)

視覺是人最重要的感覺。人通過視覺感知外界物體的大小、明暗、顏色、動靜，獲得對機(jī)體生存具有重要意義的各種信息，至少有80%以上的外界信息經(jīng)視覺獲得[3]。隨著智能時(shí)代的到來，消費(fèi)類電子產(chǎn)品中使用率較高的手機(jī)、平板等智能設(shè)備大屏幕的發(fā)展趨勢已不可逆，人與產(chǎn)品的交互幾乎全部在屏幕上實(shí)現(xiàn)，所以交互界面的設(shè)計(jì)就顯得尤為重要。

1.用戶界面

以智能手機(jī)為例，早期手機(jī)一般為九宮格或十二宮格的布局形式，用屏幕下方配備按鍵進(jìn)行操作。觸屏?xí)r代來臨后，系統(tǒng)界面布局發(fā)生了很大變化。iPhone打破了以往的界面布局，將界面劃分成顯示常用圖標(biāo)的上部區(qū)域和擺放重要功能的下部區(qū)域[4]。上下部分之間有明顯的分隔元素，更加便于用戶辨別。

不同系統(tǒng)平臺的智能手機(jī)的界面布局需要按照各自的規(guī)范進(jìn)行設(shè)計(jì)。iPhone的界面布局經(jīng)過不斷優(yōu)化，在iPhone6時(shí)已經(jīng)逐漸定型，如圖4所示（各模塊單位為像素px），界面分為上中下三部分，頂部狀態(tài)欄與導(dǎo)航欄用于展示與管理重要訊息，底部工具欄與Tab欄便于用戶對手機(jī)進(jìn)行操作，中間部分為內(nèi)容的主要顯示區(qū)域，設(shè)計(jì)師需在此布局的基礎(chǔ)上對界面進(jìn)行進(jìn)一步的設(shè)計(jì)。從圖5可以看出，iPhone6的界面尺寸寬高比為9：16，接近√3矩形，上下兩個(gè)圖標(biāo)的間隔形成的矩形為√4矩形，整個(gè)界面的圖標(biāo)沿中軸線左右對稱、上下對稱，排列規(guī)律。對齊的布局方式能為用戶視線提供一種自然的邊界，增加設(shè)計(jì)的整體美感；左對齊和右對齊布局能創(chuàng)造出無形的“列”，呈現(xiàn)出一種清晰的視覺暗示[5]。如此可以達(dá)到引導(dǎo)用戶視線的作用，有效傳遞信息的同時(shí)不失美感和人性化。

2.圖標(biāo)設(shè)計(jì)

圖標(biāo)是用戶進(jìn)入移動智能終端操作平臺的鑰匙，早期的手機(jī)界面上的圖標(biāo)是以各平臺自主設(shè)計(jì)的圖形標(biāo)識為主導(dǎo)，沒有固定的尺寸和樣式，以圖形表明不同的操作或功能。直到2007年iPhone上市，其圖標(biāo)統(tǒng)一尺寸框，給人以舒適、友好、極富吸引力的感受。所有圖標(biāo)的尺寸大小遵循著相同的標(biāo)準(zhǔn)規(guī)范，使其視覺效果看起來恰到好處，這個(gè)規(guī)范經(jīng)過了設(shè)計(jì)團(tuán)隊(duì)反復(fù)推敲與用戶測試，才使每一部上市產(chǎn)品都有適度的尺度，無論顯示屏幕大小怎樣改變，呈現(xiàn)的圖標(biāo)都是適宜的尺度和比例[4]，形成蘋果獨(dú)有的符號特點(diǎn)。圖6為蘋果圖標(biāo)設(shè)計(jì)規(guī)范，圖標(biāo)通常在1024×1024像素大小的畫板中進(jìn)行設(shè)計(jì)。為了在不同形狀中的設(shè)計(jì)能達(dá)到視覺統(tǒng)一，在使用正方形、矩形、圓形、長方形時(shí)還需進(jìn)行一些調(diào)整，其中矩形和長方形都使用接近√2的矩形。在圖標(biāo)設(shè)計(jì)中遵循恰當(dāng)?shù)谋壤P(guān)系進(jìn)行設(shè)計(jì)，能使其更符合用戶的審美需求。

蘋果的圖標(biāo)完全符合柵格黃金比例，視覺效果十分協(xié)調(diào)且一整套圖標(biāo)都保持著高統(tǒng)一性。由圖7可以看出，蘋果的圖標(biāo)是邊長為1024像素的正方形，四個(gè)圓角與正方形邊界形成的矩形為64像素。沿正方形中軸線分開，兩邊分別由三個(gè)黃金分割矩形組成，正方形的邊長剛好為三個(gè)黃金矩形的短邊長度和或兩個(gè)黃金矩形的長邊長度和。不論黃金矩形橫或豎擺放，都與最小的同心圓相切。三個(gè)同心圓以正方形對角線交點(diǎn)為圓心。

蘋果圖標(biāo)中的照片、Safari和時(shí)鐘，如圖8所示，是蘋果系統(tǒng)圖標(biāo)的一部分。照片由八個(gè)相同的橢圓組成，以圖標(biāo)對角線交點(diǎn)為圓心均勻陣列形成，位于最大的同心圓內(nèi)，每兩個(gè)橢圓中軸線形成的角度為45°。橢圓相交的部分為深色，位于最小的同心圓內(nèi)。Safari的圖標(biāo)是一個(gè)指南針，圓形表盤與最大的同心圓重合，指針位于矩形對角線之上，被另一條對角線分為對稱的兩個(gè)顏色，刻度均勻分布。時(shí)鐘圖形與時(shí)針分別位于兩個(gè)同心圓內(nèi)，分針與秒針伸出的長度相同，秒針尾部延伸出一部分，并以顏色不同于分針區(qū)別開來。作為用戶熟知的蘋果系統(tǒng)圖標(biāo)，看似普通的圖標(biāo)包含了豐富的設(shè)計(jì)幾何學(xué)原理，才使其達(dá)到了巧妙且自然的程度。

3.品牌LOGO

以蘋果公司為例，圖9中的LOGO同時(shí)運(yùn)用了黃金分割比例和斐波那契數(shù)列，將半徑為斐波那契數(shù)列（1，1，2，3，5，8，13）的圓相切后得到一系列曲線，這些曲線互相連接后就形成了蘋果公司所特有的標(biāo)志。蘋果LOGO所包含的規(guī)律展現(xiàn)了理性與美感的結(jié)合，也是其擁有辨識度和吸引力的原因，進(jìn)而達(dá)到廣泛傳播且深入人心的目的。

蘋果另一款產(chǎn)品iCloud的LOGO位于一個(gè)黃金比例矩形中，如圖10所示，云朵的每一個(gè)凸起都是正圓的一部分，其中小圓直徑與同色系大圓直徑的比值為1.618。將設(shè)計(jì)幾何學(xué)融入LOGO設(shè)計(jì)的方方面面，能使LOGO的表現(xiàn)更加細(xì)節(jié)與豐富。

4.網(wǎng)頁頁面中的色彩比例研究

色彩作為用戶瀏覽網(wǎng)頁的第一感覺，會直接影響用戶的閱讀體驗(yàn)，其次的影響因素才是網(wǎng)頁的布局與結(jié)構(gòu)。色彩比例通常指主色、輔色與強(qiáng)調(diào)色這三者間的比例關(guān)系，正確把握色彩使用時(shí)的比例關(guān)系，可以使頁面主次分明、層次清晰、一目了然。

日本設(shè)計(jì)師まりっぺ曾提出過配色的黃金比例原則，即70%為大面積使用的主色，25%為輔助色，5%為強(qiáng)調(diào)色，按此比例做出的網(wǎng)頁頁面所產(chǎn)生的視覺感受會使用戶感到舒適。而占比70%的主色，即網(wǎng)頁背景色，則要盡量避免使用高明度色彩和低明度、高飽和度的色彩，輔助色和強(qiáng)調(diào)色應(yīng)是鄰近色或互補(bǔ)色的關(guān)系。

視覺上的強(qiáng)烈對比依靠互補(bǔ)色實(shí)現(xiàn)，使用時(shí)需要注意使用面積的比例關(guān)系，選擇一個(gè)顏色大面積使用作為主色，再用小面積的互補(bǔ)色使畫面平衡。如果兩種顏色占比相近，也會給閱讀者帶來不好的閱讀體驗(yàn)。歌德是19世紀(jì)歐洲最偉大的文學(xué)家、詩人和色彩學(xué)家，他認(rèn)為色彩的力量取決于色彩的明度與面積。明度是指色彩的明暗、深淺程度的差別，取決于反射光的強(qiáng)弱。除了顏色本身的明與暗之外，不同色相之間也存在著明與暗的差別。歌德由此提出了色量平衡的數(shù)字比例，不同色彩之間的明度比例3：7甚至2：8的比例分配原則[6]。按照此比例設(shè)計(jì)的頁面更符合大眾的視覺審美需求，且能帶給用戶更良好的閱讀體驗(yàn)。

（二）產(chǎn)品觸覺與設(shè)計(jì)幾何學(xué)

觸覺是用戶與產(chǎn)品實(shí)現(xiàn)交互的最主要方式，大部分操作由手完成，而持用手機(jī)時(shí)用戶手指會直接與界面產(chǎn)生互動以完成操作。合理的界面元素布局會給用戶在操作環(huán)節(jié)帶來更加舒適的使用體驗(yàn)。

用戶在單手持握手機(jī)的情況下，只有部分屏幕是真正容易觸及的區(qū)域。2011年在《Designing Mobile Interfaces》一書中，StevenHoober首次使用了術(shù)語“拇指熱區(qū)”，意為“單手持用手機(jī)時(shí)最舒適的觸摸區(qū)域”。圖11為右手持握手機(jī)、拇指進(jìn)行操作的用戶的手機(jī)屏幕點(diǎn)擊舒適區(qū)域示意圖，用戶拇指正對的區(qū)域?yàn)樽钍孢m的觸摸區(qū)域，左上和右下角的操作難度則較高，因此工具欄與Tab欄等需要與用戶頻繁產(chǎn)生互動的界面模塊通常放置于屏幕底部。研究拇指熱區(qū)可以為設(shè)計(jì)師安排圖標(biāo)位置提供指導(dǎo)，如將常用圖標(biāo)放在拇指熱區(qū)內(nèi)，不常用或易產(chǎn)生數(shù)據(jù)變化的圖標(biāo)放在熱區(qū)之外。

研究拇指長度可以為智能手機(jī)屏幕尺寸及界面布局設(shè)計(jì)提供參考。根據(jù)人體測量數(shù)據(jù)的運(yùn)用來確定最大最小準(zhǔn)則，為了滿足最大覆蓋面的用戶需求，分別選用男性和女性手部號型覆蓋率最高的數(shù)值，再得出兩者的平均值。根據(jù)《中華人民共和國國家標(biāo)準(zhǔn)：成年人手部號型（GB/T16252-1996）》可知，全國成年男子手部號型覆蓋率最高的手長為180mm，占比46.35%。男子拇指長Y與手長X1的關(guān)系為Y＝－4.96＋0.32X1，得出拇指長為52.6mm。全國成年女子手部號型覆蓋率最高的手長為170mm，占比49.33%。女子拇指長Y與手長X1的關(guān)系為Y＝－2.79＋0.32X1，得出拇指長為51.6mm。根據(jù)人體測量數(shù)據(jù)運(yùn)用準(zhǔn)則中的平均性原則，拇指長的參考數(shù)據(jù)應(yīng)選用男女拇指長的平均值，即拇指長為52.1mm。因此圖11中手機(jī)屏幕點(diǎn)擊的舒適區(qū)域范圍應(yīng)以拇指長度52.1mm為標(biāo)準(zhǔn)考慮界面的排版規(guī)律，使其在幾何與比例關(guān)系的設(shè)計(jì)上更加合理。

專注于用戶體驗(yàn)和界面設(shè)計(jì)研究的機(jī)構(gòu)——UXmatters公開的一份報(bào)告中顯示，日常生活中人們主要有三種手機(jī)操作姿勢，分別是單手拇指持握、雙手拇指持握和單手食指操作（另外一只手持握），且49%的用戶在一般情況下采用單手拇指操作手機(jī)[7]，這一調(diào)查結(jié)果在如今仍有參考價(jià)值。在單手拇指持握的方式下，以拇指掌指關(guān)節(jié)為圓心作扇形可以得到拇指的大致活動范圍（圖12中紅線區(qū)域內(nèi)），超出這個(gè)范圍則會增加使用的困難程度。以手指觸及范圍的上方邊緣作水平線將手機(jī)分為上下兩個(gè)部分，下方為一個(gè)√2矩形，√2矩形的長邊a與手機(jī)長邊c的比為1：1.6，b與a的比也為1：1.6，兩個(gè)比值都接近黃金比例。因此，靈活運(yùn)用設(shè)計(jì)幾何學(xué)的理論方法對產(chǎn)品形態(tài)進(jìn)行指導(dǎo)，恰當(dāng)?shù)匕盐债a(chǎn)品與人體的尺寸、比例關(guān)系，能使產(chǎn)品在形態(tài)與使用方面給用戶帶來更好的體驗(yàn)。

結(jié)語

比例存在于萬事萬物之中，將比例與構(gòu)成的科學(xué)理論應(yīng)用在消費(fèi)類電子產(chǎn)品的設(shè)計(jì)中，是藝術(shù)與理性邏輯的結(jié)合。本文分別從消費(fèi)類電子產(chǎn)品的形態(tài)與使用兩個(gè)方面進(jìn)行分析，論證設(shè)計(jì)幾何學(xué)的理論對消費(fèi)類電子產(chǎn)品設(shè)計(jì)的指導(dǎo)作用。在消費(fèi)類電子產(chǎn)品形態(tài)設(shè)計(jì)實(shí)踐過程中引入設(shè)計(jì)幾何學(xué)的設(shè)計(jì)方法，不僅可以幫助我們獲得和諧統(tǒng)一、經(jīng)久不衰的產(chǎn)品形態(tài)，讓其更加符合審美規(guī)律，還能使人機(jī)關(guān)系更協(xié)調(diào)，提高用戶體驗(yàn)，對消費(fèi)類電子產(chǎn)品的長遠(yuǎn)發(fā)展有不可替代的積極意義。