產(chǎn)品設(shè)計(jì)中的界面設(shè)計(jì)

李翠

摘 要：界面設(shè)計(jì)這個(gè)詞在當(dāng)下已經(jīng)并不陌生，它是信息時(shí)代到來(lái)的產(chǎn)物，人們都認(rèn)為它就屬于電子產(chǎn)品或虛擬產(chǎn)品，而事實(shí)上，界面設(shè)計(jì)一直存在于我們的生活中的每一個(gè)角落，除了大家所熟悉的電子產(chǎn)品和虛擬App產(chǎn)品界面設(shè)計(jì)之外，其實(shí)在產(chǎn)品設(shè)計(jì)①中，比如家具設(shè)計(jì)、電器產(chǎn)品設(shè)計(jì)等也都存在界面設(shè)計(jì)，本文正是從傳統(tǒng)產(chǎn)品設(shè)計(jì)的角度出發(fā)，來(lái)論述在這樣一個(gè)領(lǐng)域界面設(shè)計(jì)的定義及設(shè)計(jì)原則。

關(guān)鍵詞：產(chǎn)品設(shè)計(jì)；傳統(tǒng)界面設(shè)計(jì)；設(shè)計(jì)原則

近年來(lái)，隨著信息技術(shù)與計(jì)算機(jī)技術(shù)的迅速發(fā)展，網(wǎng)絡(luò)技術(shù)的突飛猛進(jìn)，人機(jī)界面設(shè)計(jì)和開(kāi)發(fā)已成為國(guó)際計(jì)算機(jī)界和設(shè)計(jì)界最為活躍的研究方向。界面設(shè)計(jì)是人與機(jī)器之間傳遞和交換信息的媒介，它是聯(lián)系人與機(jī)器的紐帶。界面設(shè)計(jì)這一概念，目前主要用于信息技術(shù)和計(jì)算機(jī)技術(shù)類(lèi)的產(chǎn)品，比如：電腦、手機(jī)、pad等電子產(chǎn)品，而本文則是從另外一個(gè)角度來(lái)論述界面設(shè)計(jì)，即傳統(tǒng)的產(chǎn)品設(shè)計(jì)領(lǐng)域。

1 產(chǎn)品設(shè)計(jì)中界面設(shè)計(jì)的概念和方法

事實(shí)上在我們所熟悉的傳統(tǒng)的、實(shí)體的產(chǎn)品設(shè)計(jì)中也包含了界面設(shè)計(jì)。正如前面所提到的，電子產(chǎn)品領(lǐng)域里的界面設(shè)計(jì)是連接人與機(jī)器的中介，而針對(duì)本文所提到的傳統(tǒng)的、實(shí)體產(chǎn)品設(shè)計(jì)領(lǐng)域的界面設(shè)計(jì)則是連接人與物（產(chǎn)品）的中介。在《辭?！防镏薪榈亩x是：“表征不同事物的間接聯(lián)系或聯(lián)系的間接性的哲學(xué)的概念?！焙?jiǎn)單地說(shuō)，中介其實(shí)就連接兩者之間的中間物，是它們之間的聯(lián)系者。針對(duì)任何產(chǎn)品設(shè)計(jì)，其所呈現(xiàn)在用戶(hù)眼前的任何一個(gè)角度或是操作平面，我們都可以把它定義為一個(gè)界面設(shè)計(jì)：一扇門(mén)、一個(gè)電器的操作面板（非電子屏幕）、一個(gè)桌面或者一個(gè)插線(xiàn)板的插孔面等等，這些都可以稱(chēng)之為界面，而作為產(chǎn)品設(shè)計(jì)師對(duì)這些界面進(jìn)行設(shè)計(jì)的時(shí)候，都需要對(duì)界面上的元素的取舍、形狀、大小、色彩以及位置的合理分布做非常仔細(xì)的設(shè)計(jì)，只有做到這樣，才能稱(chēng)之為一個(gè)合格的產(chǎn)品設(shè)計(jì)。

以家具設(shè)計(jì)這一產(chǎn)品設(shè)計(jì)領(lǐng)域?yàn)槔?，其?shí)每一個(gè)家具產(chǎn)品的設(shè)計(jì)它也是有界面設(shè)計(jì)存在其中的，比如一個(gè)衣柜柜門(mén)的設(shè)計(jì)，我們可以把衣柜柜門(mén)這個(gè)矩形設(shè)定為一個(gè)界面，在這個(gè)界面上會(huì)因?yàn)槠涔δ艿男枨笥衅浔匾慕缑嬖O(shè)計(jì)元素——衣柜的門(mén)把手，而這個(gè)門(mén)把手就像是現(xiàn)在大家所熟悉的電子產(chǎn)品界面設(shè)計(jì)中的圖形符號(hào)元素一樣，它的大小、形狀、色彩以及它應(yīng)該放置在柜門(mén)這個(gè)界面上的哪個(gè)位置都是需要非常嚴(yán)謹(jǐn)?shù)娜ピO(shè)計(jì)的，所以，其實(shí)界面設(shè)計(jì)并不是只存在于電子信息產(chǎn)品里，它同樣存在于我們的工業(yè)產(chǎn)品中。所以本文中所論述的界面設(shè)計(jì)，是以傳統(tǒng)的、實(shí)體產(chǎn)品設(shè)計(jì)領(lǐng)域?yàn)楸尘跋碌娜魏萎a(chǎn)品，它包含產(chǎn)品形態(tài)外觀(guān)上相關(guān)元素的大小、形狀、色彩以及界面上各元素之間的合理分布和排列的設(shè)計(jì)，其目的是為了讓這一產(chǎn)品的使用更高效、易用、美觀(guān)。

產(chǎn)品設(shè)計(jì)中的界面設(shè)計(jì)的方法，一方面可以參考軟件設(shè)計(jì)中界面設(shè)計(jì)方法去進(jìn)行相關(guān)的設(shè)計(jì)工作，比如基本版面的色調(diào)把控、色彩搭配或者是界面布局等；另一方面，作為一個(gè)實(shí)體的產(chǎn)品設(shè)計(jì)，它有與虛擬的軟件設(shè)計(jì)有所區(qū)分，所以在設(shè)計(jì)的時(shí)候也要結(jié)合實(shí)體產(chǎn)品的特點(diǎn)去進(jìn)行設(shè)計(jì)。比如：為一款豆?jié){機(jī)進(jìn)行主要按鍵區(qū)域的界面設(shè)計(jì)，因?yàn)榘存I數(shù)量較多，所以，為了便于用戶(hù)操作，就需要首先對(duì)按鍵的功能做一個(gè)大的功能區(qū)域劃分。一般的豆?jié){機(jī)操作按鈕主要分為兩個(gè)大功能區(qū)域：一個(gè)是主要操作功能按鈕“選擇”和“啟動(dòng)/取消”；另一個(gè)是“選擇”按鈕下的第二級(jí)操作按鈕。這個(gè)界面設(shè)計(jì)，看似主要元素不多，只是幾個(gè)功能按鈕，但是，如果不做仔細(xì)的功能分類(lèi)，用戶(hù)將無(wú)從下手；而且不同功能分類(lèi)的按鈕在形狀和顏色的設(shè)計(jì)也有所區(qū)分，而這些都不光光是為了界面美的需求，更重要的是便于用戶(hù)上手使用，在多個(gè)功能按鍵里，快速地找到自己想要的操作按鈕或讀取到需要的信息。

2 產(chǎn)品設(shè)計(jì)中界面設(shè)計(jì)的原則

確定了產(chǎn)品設(shè)計(jì)領(lǐng)域中界面設(shè)計(jì)的定義，那么在設(shè)計(jì)的過(guò)程中就需要遵循相關(guān)的設(shè)計(jì)原則，在產(chǎn)品設(shè)計(jì)領(lǐng)域中界面設(shè)計(jì)應(yīng)該遵循的原則簡(jiǎn)單歸納如下四點(diǎn)：

2.1 易識(shí)別性原則

易識(shí)別性是指在任何的產(chǎn)品界面上的所有元素?zé)o論其排列布局還是外觀(guān)形態(tài)以及功能的預(yù)設(shè)用途等都能讓用戶(hù)覺(jué)得一目了然，清晰明了，而不會(huì)讓用戶(hù)覺(jué)得困惑、無(wú)從下手。比如：現(xiàn)在的洗衣機(jī)操作面板的設(shè)計(jì)在滿(mǎn)足易識(shí)別性這一原則的部分做的就非常不好。很多的洗衣機(jī)設(shè)計(jì)廠(chǎng)商在以給用戶(hù)帶來(lái)“多功能、多選擇”產(chǎn)品的同時(shí)，卻是以犧牲產(chǎn)品的易識(shí)別性原則為代價(jià)的！很多的洗衣機(jī)操作面板這一界面設(shè)計(jì)上幾乎都密密麻麻地布滿(mǎn)各種按鍵，這些按鍵在大小和形態(tài)上也都沒(méi)有做明顯的區(qū)分，只是在部分按鍵的下方加注一些文字提示，但是這并不能很好地提高易識(shí)別性。如何提高產(chǎn)品界面設(shè)計(jì)的易識(shí)別性可以從以下幾個(gè)方面入手：

第一，符合產(chǎn)品預(yù)設(shè)用途的外觀(guān)設(shè)計(jì)?！邦A(yù)設(shè)用途是指物品被人們認(rèn)為具有的性能及其實(shí)際上的性能，主要是指那些決定物品可以用來(lái)作何用途的基本性能。”[1]比如橫向細(xì)長(zhǎng)的門(mén)把手，我們會(huì)選擇按壓的方式來(lái)使用，而圓形球狀門(mén)的把手，我們則會(huì)選擇左右旋擰的方式來(lái)使用。所以，事實(shí)上在用戶(hù)長(zhǎng)久的日常生活積累中，對(duì)于產(chǎn)品界面中的一些功能元素的操作方式已經(jīng)形成了一個(gè)固有的認(rèn)知模式，作為設(shè)計(jì)師在設(shè)計(jì)這些界面元素的時(shí)候要盡可能的符合用戶(hù)對(duì)這一產(chǎn)品或產(chǎn)品界面上的元素所對(duì)應(yīng)功能或操作方式的預(yù)設(shè)使用心理，只有做到這一點(diǎn)，才能有效地提高產(chǎn)品的易識(shí)別性。

第二，為產(chǎn)品的功能做減法。為產(chǎn)品的功能做減法，其實(shí)就是丟掉產(chǎn)品界面上多余的、不必要的或者是可有可無(wú)的“界面元素”，盡可能的呈現(xiàn)一個(gè)簡(jiǎn)潔的產(chǎn)品界面設(shè)計(jì)。

現(xiàn)代的產(chǎn)品設(shè)計(jì)，大家都喜歡提倡“多功能”或者“一物多用”，覺(jué)得似乎只有做到了這一點(diǎn)，才是真正有創(chuàng)意的產(chǎn)品，所以就出現(xiàn)了本文前面所提到的洗衣機(jī)操作面板的例子。現(xiàn)在的洗衣機(jī)為了增加其買(mǎi)點(diǎn)或設(shè)計(jì)的創(chuàng)新點(diǎn)，經(jīng)常為其增加多個(gè)功能選擇，比如增加烘干的功能，比如在洗衣選項(xiàng)里添加棉麻、化纖、羊毛、絲綢、童裝、混合洗、經(jīng)濟(jì)洗等多種選擇，這一設(shè)計(jì)從表面上看是從用戶(hù)的角度出發(fā)，為用戶(hù)提供了多種選擇，但是實(shí)際上卻是在為用戶(hù)增加選擇負(fù)擔(dān)！不同的功能就需要不同的按鈕來(lái)進(jìn)行操作和顯示，功能越多就意味著按鈕越多，而界面（面板）的大小是有限的，所以導(dǎo)致的直接結(jié)果就是讓用戶(hù)看到產(chǎn)品界面后就手足無(wú)措，無(wú)從下手！所以，產(chǎn)品并不是功能越多越好，一定要分析清楚，用戶(hù)到底需要的是什么，要盡可能地為用戶(hù)提前做好產(chǎn)品的功能篩選，化繁就簡(jiǎn)，讓自己的產(chǎn)品界面清晰明了，便于用戶(hù)識(shí)別！

2.2 易用性原則

關(guān)于易用性，國(guó)際標(biāo)準(zhǔn)化組織（ISO）對(duì)其定義為“……在特定環(huán)境中，特定的使用者實(shí)現(xiàn)特定的目標(biāo)所依賴(lài)的產(chǎn)品的效力、效率和滿(mǎn)意度?！焙?jiǎn)單地說(shuō)，所謂“易用性”就是用來(lái)描述一個(gè)產(chǎn)品是否好用的意思。一般會(huì)將好用的產(chǎn)品定義為易用性較高的產(chǎn)品，同時(shí)也被認(rèn)定為是友好的產(chǎn)品?？偟膩?lái)說(shuō)，易用性就是描述產(chǎn)品和人之間的一種和諧關(guān)系度的描述。

易用性原則主要是從符合用戶(hù)的人體工學(xué)和使用認(rèn)知習(xí)慣的角度出發(fā)來(lái)設(shè)計(jì)產(chǎn)品的界面。下面還是以大家日常生活中都經(jīng)常使用的“門(mén)”這一物品作為案例來(lái)分析。門(mén)把手這一界面元素是門(mén)這一產(chǎn)品的界面設(shè)計(jì)中必不可少的一部分，那么它的設(shè)計(jì)如果要達(dá)到易用性的話(huà)，一方面要符合人手的基本尺寸，無(wú)論是大小（或是粗細(xì)），還是門(mén)把手位于門(mén)面上的高度，這些都需要經(jīng)過(guò)嚴(yán)謹(jǐn)?shù)臄?shù)據(jù)調(diào)查和分析，結(jié)合人的基本尺寸來(lái)進(jìn)行相關(guān)的設(shè)計(jì)，這部分就是從用戶(hù)的人體工學(xué)角度出發(fā)去為產(chǎn)品的易用性服務(wù)；另一方面，門(mén)把手這一重要的設(shè)計(jì)元素所放置的位置以及它的形態(tài)所對(duì)應(yīng)的操作方式等，就是從用戶(hù)的使用認(rèn)知習(xí)慣出發(fā)所做的易用性設(shè)計(jì)。這里所說(shuō)的使用習(xí)慣或是認(rèn)知習(xí)慣是指人們?cè)谌粘Ｉ钪兴e累的對(duì)于物的基本認(rèn)知。比如：大部分用戶(hù)都是以右手作為慣用手去操作產(chǎn)品，所以門(mén)把手的位置一般會(huì)放置在界面（門(mén)面）的左側(cè)，便于右手的操作，這就是所謂的用戶(hù)使用習(xí)慣；當(dāng)門(mén)把手是圓球形的形狀時(shí)候，用戶(hù)會(huì)自然認(rèn)為，開(kāi)啟的操作方式是抓取門(mén)把手后順時(shí)針旋擰，如果設(shè)計(jì)師不按照這一固有的思維模式去設(shè)計(jì)，而將其設(shè)計(jì)為逆時(shí)針旋擰才可以打開(kāi)，則不符合用戶(hù)的固有認(rèn)知模式，這種情況下，容易讓用戶(hù)困惑，進(jìn)而無(wú)法正確操作，也就無(wú)法實(shí)現(xiàn)所謂的易用性原則。

2.3 一致性原則

一致性原則主要是指在產(chǎn)品的界面設(shè)計(jì)中，所有的界面元素應(yīng)盡可能地采用統(tǒng)一的形態(tài)語(yǔ)言，統(tǒng)一的設(shè)計(jì)風(fēng)格和統(tǒng)一的設(shè)計(jì)目標(biāo)來(lái)完成設(shè)計(jì)工作。一個(gè)產(chǎn)品界面就如同一個(gè)程序界面，它需要在這個(gè)界面設(shè)計(jì)中確定統(tǒng)一的設(shè)計(jì)風(fēng)格，比如：穩(wěn)重的、活潑的、女性化的等等，在這個(gè)大的設(shè)計(jì)風(fēng)格之下，再去選擇統(tǒng)一的界面色調(diào)、造型元素等等。另外，針對(duì)傳統(tǒng)的工業(yè)產(chǎn)品都有一個(gè)非常明確的產(chǎn)品功能，如空調(diào)的制冷、制熱功能；洗衣機(jī)能把衣服洗干凈并甩干的功能；手機(jī)可以通話(huà)、發(fā)短信的功能等，所以在此基礎(chǔ)上，產(chǎn)品界面設(shè)計(jì)也需要為了滿(mǎn)足共同的功能目標(biāo)而進(jìn)行統(tǒng)一的、一致性的設(shè)計(jì)。如下圖1所示，是我們?nèi)粘６挤浅Ｊ煜さ奈⒉t，如圖所示的這個(gè)產(chǎn)品展示角度的界面是產(chǎn)品的主要界面，產(chǎn)品的核心功能基本上都集中在這個(gè)界面上，包括了微波爐柜門(mén)以及微波爐的主要操作界面這兩個(gè)大的部分，根據(jù)我們的一致性原則，無(wú)論是柜門(mén)、門(mén)把手還是操作面板的設(shè)計(jì)風(fēng)格、形態(tài)語(yǔ)言還是功能的展示以及操作使用，都需要進(jìn)行統(tǒng)一，保持一致性。這里的一致性體現(xiàn)在門(mén)面和門(mén)把手采用同樣的色彩即花紋裝飾；門(mén)面、門(mén)把手和操作面板采用同樣的材料和色調(diào)、操作面板的按鈕設(shè)計(jì)風(fēng)格和設(shè)計(jì)語(yǔ)言也保持統(tǒng)一等等，這些都能體現(xiàn)出其一致性的設(shè)計(jì)原則。

2.4 審美性原則

人們對(duì)美好事物的追求永恒不變的，所以產(chǎn)品設(shè)計(jì)中的界面設(shè)計(jì)也必須要符合審美性的原則。在一個(gè)產(chǎn)品的界面設(shè)計(jì)中，應(yīng)該選擇什么樣的色調(diào)、形態(tài)語(yǔ)言以及界面元素應(yīng)該以一種什么樣的排列分布方式去呈現(xiàn)等，都需要設(shè)計(jì)師從審美性的原則上去仔細(xì)斟酌，以便能更好地體現(xiàn)這個(gè)產(chǎn)品的基本屬性和設(shè)計(jì)特點(diǎn)以及設(shè)計(jì)品位。在滿(mǎn)足工業(yè)產(chǎn)品的界面設(shè)計(jì)審美性原則這一點(diǎn)上，設(shè)計(jì)師可以從形式美法則入手，以此作為設(shè)計(jì)準(zhǔn)則去處理產(chǎn)品界面設(shè)計(jì)審美性原則的滿(mǎn)足。

綜上所述，產(chǎn)品設(shè)計(jì)中的界面設(shè)計(jì)其實(shí)并不是一個(gè)陌生的設(shè)計(jì)內(nèi)容，只是在傳統(tǒng)思維模式里，大家沒(méi)有將其和界面設(shè)計(jì)進(jìn)行聯(lián)系，但事實(shí)是，作為一名產(chǎn)品設(shè)計(jì)師所做的任何一個(gè)產(chǎn)品的設(shè)計(jì)都包含界面設(shè)計(jì)的工作內(nèi)容，如果能正視這一點(diǎn)，并在每一項(xiàng)的設(shè)計(jì)工作中都有意識(shí)地將界面設(shè)計(jì)的相關(guān)概念、方法和設(shè)計(jì)原則運(yùn)用其中，一定會(huì)大大提高產(chǎn)品的實(shí)用性和易用性，不僅僅能給用戶(hù)帶來(lái)更好的視覺(jué)美的體驗(yàn)，更重要的是給用戶(hù)帶來(lái)良好的使用體驗(yàn)。

注釋?zhuān)孩偃乃f(shuō)的產(chǎn)品設(shè)計(jì)指的是傳統(tǒng)的，以實(shí)體的產(chǎn)品設(shè)計(jì)為中心的設(shè)計(jì)領(lǐng)域。

參考文獻(xiàn)：

[1] 唐納德·諾曼（美）.設(shè)計(jì)心理學(xué)[M] .北京：中信出版社，第10頁(yè).