張雪雙 劉李明 史倩云

摘 要 面對(duì)工業(yè)的發(fā)展以及產(chǎn)品和技術(shù)的不斷更新，工業(yè)產(chǎn)品的智能化與自動(dòng)化已被廣泛應(yīng)用。這些變革也正驅(qū)使著產(chǎn)品需要一個(gè)有效的展示平臺(tái)。本文通過(guò)對(duì)產(chǎn)品展示軟件這一平臺(tái)的界面布局進(jìn)行研究，對(duì)于界面的引導(dǎo)性和帶給人的印象深度進(jìn)行科學(xué)的分析，進(jìn)而總結(jié)出美學(xué)與科學(xué)相結(jié)合的界面布局，突出產(chǎn)品特色，傳遞產(chǎn)品理念，進(jìn)而吸引更多的用戶(hù)。

關(guān)鍵詞 產(chǎn)品展示平臺(tái) 界面布局 視覺(jué)引導(dǎo)

中圖分類(lèi)號(hào)：TP31 文獻(xiàn)標(biāo)識(shí)碼：A

Industrial Products Show Software Interface Design Research

ZHANG Xueshuang, LIU Liming, SHI Qianyun

(Industrial Design Department, School of Mechanical Engineering,

Jiangsu University of Science and Technology, Zhenjiang, Jiangsu 212003)

Abstract With the development of industry and the products and technology constantly updated, the products of industry intelligence and automation has been widely used. These changes are driven products need to be an effective display platform. This article through to the products show the platform of the software interface layout, the leading and bring about the interface impression of depth by scientific analysis, and sums up the combination of art and science interface layout, outstanding product features, the transfer product idea, and attract more users.

Key words Product exhibition platform; Interface layout; Visual guide

隨著科學(xué)技術(shù)的不斷發(fā)展和信息技術(shù)的廣泛應(yīng)用，數(shù)字化產(chǎn)品、軟件開(kāi)發(fā)已隨處可見(jiàn)。對(duì)此，產(chǎn)品展示軟件界面設(shè)計(jì)更是應(yīng)該得到重視和創(chuàng)新。通過(guò)對(duì)產(chǎn)品設(shè)計(jì)師等相關(guān)人群使用的新型軟件界面布局的研究和分析，以提高設(shè)計(jì)人群對(duì)產(chǎn)品展示平臺(tái)的認(rèn)識(shí)和重視。進(jìn)而展現(xiàn)產(chǎn)品魅力，制造無(wú)限商機(jī)。

1 工業(yè)產(chǎn)品展示平臺(tái)

展示平臺(tái)多種多樣，工業(yè)產(chǎn)品展常見(jiàn)的示方式有展廳展示、Web網(wǎng)站展示、軟件平臺(tái)展示等，它們不僅擁有自己的特色，同時(shí)還要統(tǒng)一根據(jù)產(chǎn)品的特殊功能、使用方式、色彩搭配、使用環(huán)境等因素來(lái)將平臺(tái)配合產(chǎn)品展示。具體產(chǎn)品展示平臺(tái)類(lèi)別概況及關(guān)系總結(jié)如圖1。

展廳展示，就是在相對(duì)獨(dú)立的空間內(nèi)將所設(shè)計(jì)的產(chǎn)品通過(guò)展板、實(shí)物模型等方式展示供觀賞者欣賞與評(píng)價(jià)。展廳布置同樣需要專(zhuān)業(yè)知識(shí)和科學(xué)理論。展品的擺放、展廳的設(shè)計(jì)、整體環(huán)境和氛圍的營(yíng)造都是影響產(chǎn)品展示的重要方面。其優(yōu)點(diǎn)在于讓受眾“零距離”走進(jìn)產(chǎn)品和公司文化，讓別人欣賞、觸摸、購(gòu)買(mǎi)產(chǎn)品，可以說(shuō)最直觀、高效的產(chǎn)品展示方式。但是對(duì)于現(xiàn)今的網(wǎng)絡(luò)及信息化時(shí)代，展廳展示不排除有地域局限及信息擴(kuò)展度小等弊端。

網(wǎng)站展示平臺(tái)，信息量大，更新及時(shí)，能夠塑造品牌形象，傳遞面極廣。不僅符合現(xiàn)今生活的高效準(zhǔn)則，更是一種內(nèi)容豐富并且容易掌控管理的交流平臺(tái)。對(duì)于工業(yè)產(chǎn)品的推廣，這一平臺(tái)高效且方便。網(wǎng)站的界面設(shè)計(jì)，一般在內(nèi)容上較為豐富，但是對(duì)于產(chǎn)品展示的網(wǎng)站應(yīng)該有較新穎的元素和較強(qiáng)的視覺(jué)沖擊以達(dá)到吸引消費(fèi)者的眼球，內(nèi)容量適度，信息傳遞明確即可。

軟件展示平臺(tái)，種類(lèi)繁多，特別是虛擬現(xiàn)實(shí)技術(shù)的應(yīng)用，為我們提供集圖片、動(dòng)畫(huà)、可交互式應(yīng)用程序于一體的開(kāi)發(fā)平臺(tái)。使得我們面向特定受眾定制相應(yīng)的展示平臺(tái)成為現(xiàn)實(shí)。以面向設(shè)計(jì)產(chǎn)品展示平臺(tái)為例。如圖2。

通過(guò)這類(lèi)軟件不僅能夠全面了解產(chǎn)品信息，更能從產(chǎn)品的形態(tài)、色彩、材質(zhì)等變化上進(jìn)行對(duì)比和改進(jìn)，可以很好地用于產(chǎn)品設(shè)計(jì)的方案展示與評(píng)價(jià)，虛擬現(xiàn)實(shí)，身臨其境。但是，工業(yè)產(chǎn)品展示軟件平臺(tái)集文字、圖片、聲音、動(dòng)畫(huà)、交互程序于一體。為了更加合理、有效地傳遞所要展示的信息，界面設(shè)計(jì)在軟件使用和操作上的要求尤為重要。只有將界面的圖標(biāo)、布局、特效等很好的應(yīng)用到軟件中才能將交互實(shí)現(xiàn)，進(jìn)而完成產(chǎn)品展示的整個(gè)過(guò)程。

2 界面設(shè)計(jì)中的視覺(jué)引導(dǎo)與印象深度

2.1 界面設(shè)計(jì)中的視覺(jué)引導(dǎo)

面對(duì)某一界面，視線(xiàn)首先會(huì)落在何處？是什么元素吸引了人們的視線(xiàn)？接下來(lái)又要看向何處？這些問(wèn)題就與“視覺(jué)引導(dǎo)”①相關(guān)。視覺(jué)引導(dǎo)指引用戶(hù)更好地去了解產(chǎn)品，了解其內(nèi)容以及所要表達(dá)的含義。它就好比指示路標(biāo)，在人們迷失方向時(shí)，給予正確的引導(dǎo)。

在界面設(shè)計(jì)中，視覺(jué)引導(dǎo)這一應(yīng)用，是主次分明且順暢的引導(dǎo)方式，能夠順利地引導(dǎo)用戶(hù)視線(xiàn)在頁(yè)面上移動(dòng)。從而產(chǎn)生有規(guī)律的視覺(jué)方向，避免了視線(xiàn)在各種各樣的元素之間隨意跳轉(zhuǎn)，使用戶(hù)的注意力能夠有意識(shí)的投注在目標(biāo)物上。這種有效的“干擾”，為用戶(hù)提供了更好的選擇，方便了用戶(hù)更好地去了解產(chǎn)品所傳達(dá)的信息。

視覺(jué)引導(dǎo)在界面的設(shè)計(jì)中起著不可替代的作用。在工業(yè)產(chǎn)品軟件展示平臺(tái)的界面設(shè)計(jì)中，如何正確地使用視覺(jué)引導(dǎo)使軟件的界面準(zhǔn)確地表達(dá)產(chǎn)品所包含的內(nèi)容以及內(nèi)在涵義，是值得我們深思的問(wèn)題?，F(xiàn)今我們看到的展示界面一般都呈現(xiàn)了大量的信息，而這些信息通常都不分主次，導(dǎo)致人們接受信息的思維被打亂，最終影響產(chǎn)品的展示。通過(guò)文獻(xiàn)以及實(shí)驗(yàn)研究發(fā)現(xiàn)，一般用戶(hù)的視覺(jué)習(xí)慣為：左上角優(yōu)先，從左到右、從上到下。這就是我們常說(shuō)的古騰堡原則（The Gutenberg rule)，②如圖3、圖4。

2.2 界面設(shè)計(jì)中的印象深度

印象，一般是指接觸過(guò)的客觀事物在人的頭腦里留下的跡象。③印象深度即是留下跡象的深淺程度。假如一樣事物讓人印象深刻，那么這樣事物肯定存在著讓人回味的內(nèi)容。什么樣的內(nèi)容會(huì)讓人留下深刻的印象呢?通過(guò)經(jīng)驗(yàn)學(xué)習(xí)和實(shí)踐調(diào)查總結(jié)概括出兩個(gè)主要方面：風(fēng)格和個(gè)性。

2.2.1 風(fēng)格

風(fēng)格，是從事物的整體出發(fā)，表現(xiàn)出來(lái)的一種帶有綜合性的總體特點(diǎn)。風(fēng)格是識(shí)別和把握作品之間區(qū)別的標(biāo)志。對(duì)于產(chǎn)品展示軟件界面設(shè)計(jì)，風(fēng)格，講求的是界面給人的整體印象，比如簡(jiǎn)潔、理性、可愛(ài)、時(shí)尚等。界面風(fēng)格的體現(xiàn)靠的是設(shè)計(jì)者對(duì)色彩、圖形以及意境的把握。設(shè)計(jì)者通過(guò)對(duì)界面色彩、圖形、整體色調(diào)等方面進(jìn)行協(xié)調(diào)、統(tǒng)籌兼顧，并進(jìn)行相應(yīng)的設(shè)計(jì)表現(xiàn)，使界面能夠在整體上顯示其一致性但又不失其韻味。風(fēng)格對(duì)于工業(yè)產(chǎn)品展示軟件界面設(shè)計(jì)來(lái)說(shuō)，是其成功的必要條件之一，界面設(shè)計(jì)要體現(xiàn)一定的風(fēng)格才可以使人印象深刻，從而影響消費(fèi)者心理，進(jìn)而產(chǎn)生購(gòu)買(mǎi)欲望。

2.2.2 個(gè)性

個(gè)性即個(gè)別性、個(gè)人性,個(gè)性化是人的存在方式。④對(duì)于界面來(lái)說(shuō)，個(gè)性相當(dāng)于界面的特色，也是界面能夠給人留下深刻印象的方式。相對(duì)于風(fēng)格而言，個(gè)性追求的是產(chǎn)品界面的閃光點(diǎn)，是作品與眾不同的地方。個(gè)性是在整體風(fēng)格基調(diào)的基礎(chǔ)上，突出局部特征，展示特有內(nèi)容。在界面設(shè)計(jì)中，大多優(yōu)秀案例都各具特色或個(gè)性鮮明。這些特色、個(gè)性大多體現(xiàn)在圖標(biāo)、按鈕、操作方式等細(xì)節(jié)上。帶有設(shè)計(jì)者獨(dú)特創(chuàng)意的圖標(biāo)設(shè)計(jì)、操作方式設(shè)計(jì)、人與產(chǎn)品界面間的交互方式設(shè)計(jì)等都能夠?qū)缑娴某蓴∑鸬疥P(guān)鍵性的作用。將獨(dú)特的創(chuàng)意融入到整體風(fēng)格之中，不僅能夠引人入勝，更讓人印象深刻。

3 工業(yè)產(chǎn)品展示軟件界面布局設(shè)計(jì)

沒(méi)有規(guī)矩，不成方圓。界面布局的原則和方式就是界面設(shè)計(jì)中的“規(guī)矩”。把握好規(guī)矩，對(duì)界面進(jìn)行合理的布局，會(huì)讓用戶(hù)對(duì)產(chǎn)品的使用產(chǎn)生愉悅、舒適的感覺(jué)。在產(chǎn)品展示軟件界面中，合理的布局能夠使軟件便于用戶(hù)控制以及操作，還能夠更好地使所展示的產(chǎn)品語(yǔ)意得到表達(dá)。良好的界面布局是優(yōu)秀界面實(shí)現(xiàn)的基礎(chǔ)。每一個(gè)優(yōu)秀的軟件界面，都是通過(guò)類(lèi)似的精心設(shè)計(jì)和綜合考慮才達(dá)到理想的界面布局效果。

3.1 工業(yè)產(chǎn)品展示軟件界面布局設(shè)計(jì)基本方式

3.1.1 簡(jiǎn)潔性布局

說(shuō)到簡(jiǎn)潔性，KISS（Keep It Simple And Stupid）原則⑤就是一個(gè)比較合理且通用的原則，簡(jiǎn)潔和易于操作才能讓體驗(yàn)者感受到軟件的可用性和合理性。簡(jiǎn)潔不是盲目的簡(jiǎn)單，更不是隨意的設(shè)置。這種原則同樣需要我們上面所分析的視覺(jué)引導(dǎo)和印象深度來(lái)支配布局。適度的留白，合理分配板塊大小，面板整體錯(cuò)落有致而不單調(diào)死板等，都是設(shè)計(jì)一款簡(jiǎn)潔性界面時(shí)所需要考慮的重要因素。簡(jiǎn)約極致的風(fēng)格往往給人以舒適、開(kāi)闊、干凈和清新的感覺(jué)。這類(lèi)風(fēng)格的界面設(shè)計(jì)，關(guān)鍵在于注重保持外邊緣的水平或垂直，盡量不用鋸齒形的邊緣，更不要采用圖片重疊的方式，否則會(huì)使版面變得更加復(fù)雜。就現(xiàn)今的界面設(shè)計(jì)趨勢(shì)來(lái)看，簡(jiǎn)潔性界面布局已經(jīng)越來(lái)越受用。

3.1.2 協(xié)調(diào)一致性布局

一個(gè)統(tǒng)一協(xié)調(diào)的界面設(shè)計(jì)，會(huì)給用戶(hù)以舒適、和諧的感覺(jué)。同時(shí)，界面整體風(fēng)格的一致性，往往在視覺(jué)引導(dǎo)上起到自然過(guò)度的作用，也會(huì)將印象深度提升，給人以直觀，明確的感覺(jué)。在風(fēng)格設(shè)計(jì)上已經(jīng)具備了基本的協(xié)調(diào)一致性，只需進(jìn)一步深化和提升。而對(duì)于個(gè)性化的設(shè)計(jì)，在給人以新鮮感和視覺(jué)沖擊效果的同時(shí)，同樣需要遵循整體協(xié)調(diào)一致性原則，只是將局部個(gè)性鮮明即可。只有按照這種原則設(shè)計(jì)界面才不會(huì)讓整體看起來(lái)雜亂無(wú)章，即使在內(nèi)容和圖片都很豐富的情況下也同樣如此。正如圖5所示的XBOX studio軟件界面設(shè)計(jì)，整體風(fēng)格極具時(shí)代感，布局清新爽朗，從每一個(gè)詞條到圖片的擺放，從每一個(gè)功能按鈕到板塊的規(guī)則性布置，都能主次鮮明，協(xié)調(diào)一致。

3.1.3 突出重點(diǎn)布局

在進(jìn)行界面布局的過(guò)程中，合理排布各種信息，在繁雜的信息中突出重點(diǎn)，是布局的重要一步。在產(chǎn)品展示軟件界面設(shè)計(jì)中，如何使主要內(nèi)容一目了然，同樣需要設(shè)計(jì)師的精心安排。首先，將展示的內(nèi)容置放于用戶(hù)的視覺(jué)中心，使使用者能夠在第一時(shí)間了解到產(chǎn)品所要傳達(dá)的信息；其次，可以通過(guò)一定的對(duì)比方式來(lái)突出重點(diǎn)，比如框架分割大小對(duì)比、排布內(nèi)容的多少對(duì)比、色彩應(yīng)用對(duì)比等。突出重點(diǎn)的方法有多種，使用過(guò)程中需根據(jù)布局內(nèi)容而定。布局只有突出重點(diǎn)，才能夠使界面得到好的應(yīng)用，實(shí)現(xiàn)其功能性，從而起到信息傳遞的作用。強(qiáng)調(diào)重點(diǎn)、突出重點(diǎn)，界面布局才能夠主次分明，避免反復(fù)以及堆砌而造成的信息混亂。如XBOX studio軟件界面設(shè)計(jì)的布局，主要功能放置明顯位置，主要信息所占畫(huà)面的比例較大，使信息得到了很好的傳達(dá)。

總之，優(yōu)秀的軟件界面布局都是在遵循一定原則基礎(chǔ)上，根據(jù)自身需求和目的而設(shè)計(jì)的。工業(yè)產(chǎn)品展示軟件的界面設(shè)計(jì)更是需要在了解工業(yè)產(chǎn)品特色基礎(chǔ)上，通過(guò)軟件界面這一平臺(tái)將其展示和傳播。了解用戶(hù)的心理感受，抓住人們的視覺(jué)注意力，方便使用者快捷操作等，都是設(shè)計(jì)產(chǎn)品展示軟件界面布局所要了解和追求的。⑥

3.2 工業(yè)產(chǎn)品展示軟件界面設(shè)計(jì)實(shí)踐

首先，進(jìn)行產(chǎn)品用戶(hù)分析、風(fēng)格定位。然后，了解用戶(hù)需求，進(jìn)行軟件功能設(shè)置。主要功能包括：產(chǎn)品設(shè)計(jì)說(shuō)明（特色）、視圖（主、俯、側(cè)、尺寸工程圖）、形態(tài)（整體、細(xì)節(jié)）、材質(zhì)（金屬、塑料、木材、皮革等）、色彩、動(dòng)畫(huà)展示、使用場(chǎng)景等。最后，將界面設(shè)計(jì)實(shí)踐。注重細(xì)節(jié)，考慮全面，在創(chuàng)新的基礎(chǔ)上，以上述理論為原則，把產(chǎn)品軟件界面設(shè)計(jì)出來(lái)。

4 結(jié)束語(yǔ)

現(xiàn)在已是網(wǎng)絡(luò)高速發(fā)展的信息社會(huì)，軟件產(chǎn)品已廣泛使用，所以，軟件的界面設(shè)計(jì)應(yīng)得到更多的關(guān)注與重視。工業(yè)產(chǎn)品展示軟件界面設(shè)計(jì)作為計(jì)算機(jī)科學(xué)與藝術(shù)設(shè)計(jì)等學(xué)科相結(jié)合的一個(gè)嶄新的研究領(lǐng)域和發(fā)展方向，其界面布局更是有著無(wú)限的研究和優(yōu)化空間。設(shè)計(jì)師需要從研究用戶(hù)心理出發(fā)，根據(jù)視覺(jué)引導(dǎo)規(guī)律，遵循形式美法則，優(yōu)化界面布局，使產(chǎn)品展示軟件界面設(shè)計(jì)走上更長(zhǎng)遠(yuǎn)的發(fā)展之路。

注釋

① AQ.視覺(jué)引導(dǎo):給視線(xiàn)加上路標(biāo)[J].中國(guó)廣告,2002(10).

② 百度空間.包包.古騰堡原則（The Gutenberg rule)[EB/OL].[2009-05-27].http:

//hi.baidu.com/baozhipengwdz/blog/item/bc8933c6f6811a139d163db9.html

③ UCDChina.UCD火花集2：有效的互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì) 交互/信息設(shè)計(jì)用戶(hù)研究[M].人民郵電出版社 ,2011.5.

④ 劉松濤等翻譯.交互設(shè)計(jì)精髓[M].電子工業(yè)出版社,2008.11.

⑤ 馮麗霞,屈陽(yáng).論廣告英語(yǔ)的KISS原則的有效實(shí)現(xiàn)[J].商場(chǎng)現(xiàn)代化,2008(26).

⑥ 周陟.UI進(jìn)化論移動(dòng)設(shè)備人機(jī)交互界面設(shè)計(jì)[M].清華大學(xué)出版社,2011.1.