手持移動設(shè)備交互界面造型形式研究

1、手持移動設(shè)備交互界面造型形式研究 摘 要：手持移動設(shè)備包括個人數(shù)字助理（pda）和移動電話，而隨著經(jīng)濟(jì)和科技的發(fā)展手持移動設(shè)備已經(jīng)變得越來越普遍，關(guān)于手持移動設(shè)備界面造型形式的研究也有越來越重要的意義。通過對大量案例的研究，以及對未來可穿戴式設(shè)備界面的發(fā)展趨勢的展望，探討了一些針對手持移動設(shè)備交互界面造型形式的設(shè)計(jì)方法。 關(guān)鍵詞：交互界面；界面造型；移動手持設(shè)備 隨著科技的進(jìn)步，越來越多人機(jī)交互界面進(jìn)入了人們的生活；科技的飛速發(fā)展也產(chǎn)生了更多樣的交互形式。而手持移動設(shè)備作為人們生活中接觸最緊密工具，其交互界面作為人和設(shè)備之間互相施加影響、進(jìn)行信息交流、實(shí)現(xiàn)機(jī)器功能的區(qū)域，不管是對于設(shè)備本身的成

2、功與否，還是用戶使用其設(shè)備帶來的體驗(yàn)，都是非常重要的。 1.手持移動設(shè)備的界面 圖1 手持移動設(shè)備的物理界面和交互界面 fig1 handheld mobile device interface and the physical interface 手持移動設(shè)備的界面包括了設(shè)備本身的物理界面，以及顯示界面。 設(shè)備本身的造型和物理界面是手持移動設(shè)備在造型設(shè)計(jì)中不能忽視的因素。不同于顯示界面可以根據(jù)傳達(dá)的具體內(nèi)容而變化，設(shè)備的物理界面是不可變的，相對固定的造型會直接影響產(chǎn)品外觀，決定產(chǎn)品的基本操作。 而手持移動設(shè)備的顯示界面是用戶進(jìn)行信息交流和功能實(shí)現(xiàn)的主要區(qū)域，是手持移動設(shè)備功能實(shí)現(xiàn)的主要依托。

3、在進(jìn)行手持移動設(shè)備的交互界面設(shè)計(jì)過程中，鑒于手持移動設(shè)備本身決定了其屏幕有限，并可能隨著科技的發(fā)展繼續(xù)縮?。ɡ缈纱┐髟O(shè)備）；使用環(huán)境的復(fù)雜性；用戶的多樣性；實(shí)現(xiàn)功能的多樣性等因素，對設(shè)計(jì)者提出了較高的要求。而手持移動設(shè)備交互界面的造型形式對信息的呈現(xiàn)、功能的暗示、交互方式的引導(dǎo)都有著重要的作用，是手持移動設(shè)備交互界面設(shè)計(jì)中至關(guān)重要的環(huán)節(jié)。 2.交互界面造型形式的特性 交互界面造型形式根據(jù)呈現(xiàn)信息的不同、實(shí)現(xiàn)功能的不同，根據(jù)實(shí)現(xiàn)功能的交互邏輯順序的不同，根據(jù)對用戶操作和達(dá)成功能的反饋，以及提升用戶體驗(yàn)，有著不同的造型形式特性。針對不同的信息需要用不同的界面造型，最有效地傳達(dá)和告知用戶。通常移動

4、設(shè)備的用戶往往關(guān)注同時進(jìn)行的多個任務(wù)，某一個移動引用程序可能并不是用戶關(guān)注的焦點(diǎn)。1如果移動設(shè)備需求用戶太多的注意力，可能會影響用戶更重要的任務(wù)。所以這要求我們在設(shè)計(jì)交互界面時，需要把信息進(jìn)行分類，在界面中清晰地呈現(xiàn)信息層級，讓多任務(wù)進(jìn)度可視化。 2.1根據(jù)實(shí)現(xiàn)功能的交互邏輯，交互界面造型形式具有連續(xù)性 達(dá)成一個功能的多個界面具有緊密的邏輯關(guān)系，在用戶進(jìn)行著一系列的操作過程中，應(yīng)該保持界面布局、顏色、風(fēng)格上的一致，可以在個別按鈕、選項(xiàng)上做細(xì)微變動以示提醒，而不能在界面風(fēng)格上做大的調(diào)整，這會使得用戶在操作過程中因?yàn)橐曈X上的巨大差異帶來不適，甚至思維上的斷點(diǎn)。 2.2對交互界面實(shí)現(xiàn)的功能設(shè)備做出的

5、實(shí)時反饋，決定了交互界面造型形式的多感官性2 對于用戶的每一個操作，設(shè)備都應(yīng)該給出相應(yīng)的反饋。例如，當(dāng)我們的手機(jī)收到短信時，它不僅要發(fā)出聲音、震動、同時在顯示界面上顯示相應(yīng)信息；這說明了手持移動設(shè)備鑒于其本身相較于傳統(tǒng)電腦的便攜特性、手持性等特點(diǎn)，需要更為多元的反饋方式來告知用戶其實(shí)時狀態(tài)，而這些方式已經(jīng)不局限于顯示界面上的視覺元素，還涉及到聲音界面，和設(shè)備本身的傳感功能。 2.3為了提升產(chǎn)品的用戶體驗(yàn)，交互界面造型形式具有情感性 為了給用戶提供一個良好的用戶體驗(yàn)，除了重視功能性和可用性，其他的因素也會造成巨大的影響。比如美學(xué)所涉及的顏色、界面元素等可視化信息都是重要的考慮因素。為了滿足不同用

6、戶的個性化需求，情感化、人性化的預(yù)設(shè)是不容忽視的。 3.移動設(shè)備交互界面造型的基本構(gòu)成研究 移動設(shè)備的交互界面基本構(gòu)成元素可以分為：按鈕、滾動條、單選框、多選框等的一些基本控件以及一些基本視覺元素，是屬于交互界面構(gòu)成中“點(diǎn)”的元素；以及對基本組件通過合理組合和布局形成的控件組合以及一些線性的視覺元素，是屬于交互界面構(gòu)成中“線”的形式；最后還有整個交互界面的文本信息、圖片信息的塊面化呈現(xiàn)以及一些面的視覺元素，是屬于交互界面構(gòu)成中“面”的形式。 3.1在交互界面中“點(diǎn)”的構(gòu)成元素及作用 點(diǎn)是一切造型的基礎(chǔ)，是具有細(xì)小特征的視覺單位，在交互設(shè)計(jì)中，點(diǎn)不僅存在大小和形狀的差異，還存在方向的差異、方向的

7、差異，點(diǎn)還具有聽覺因素的節(jié)奏和韻律感。“點(diǎn)”的構(gòu)成元素包括了界面中每個單個的視覺元素。受界面所要傳達(dá)的具體信息、界面風(fēng)格、界面交互形式等具體因素的影響，點(diǎn)的形式是多變的，點(diǎn)的形狀、大小、方向、位置、疏密等組合方式也是靈活的。 以beats music、moves、tumblr為例，三個app在視覺元素上都選用了圓形作為基本視覺符號。圓形是很特別的圖形，讓人舒服的形狀，特別是在充滿各種方框的手機(jī)屏幕里，增加一些圓潤的點(diǎn)綴，立刻就充滿了活潑的氣息，讓人徒增好感。但三個軟件在界面在對圓形的運(yùn)用和具體呈現(xiàn)上是不同的。beats music作為一款線上音樂播放軟件，把界面上的文字信息融入在圓形中，而圓形

8、的顏色、大小、分布的呈現(xiàn)上都比較自由，顏色也很動感，把選擇喜歡的標(biāo)簽設(shè)計(jì)成了圓形，這樣就比普通列表、常規(guī)矩形的標(biāo)簽感覺要更有趣味性，非常符合軟件本身的定位，及傳達(dá)個用戶的感覺。moves是一款健康記錄應(yīng)用，能夠監(jiān)測用戶走路或者跑步的步數(shù)、時間和距離，后臺運(yùn)行耗電量低，每天每周還能生成一個統(tǒng)計(jì)表，用氣泡球的形式展現(xiàn)你的運(yùn)動數(shù)據(jù)。界面上大小不等的圓就是作為顯示重要數(shù)據(jù)呈現(xiàn)的形式，通過圓的大小和顏色，直觀的告訴用戶走了多少步，消耗了多少卡路里等，幫助用戶快速找到關(guān)注的信息，其中面積最大的圓形傳遞的就是最重要的一級信息。tumblr是全球最大的輕博客，在手機(jī)端的界面上，表單的視覺基本元素使用圓形，并且

9、使用了不同的顏色進(jìn)行區(qū)分。由此可見整合“點(diǎn)”元素在交互界面的呈現(xiàn)形式，不僅能夠統(tǒng)一界面風(fēng)格，營造不同的視覺效果，在信息的呈現(xiàn)上也給我們提供了新的思維方式；而這些改變能夠給用戶帶來更為細(xì)膩的用戶體驗(yàn)。 由于手持移動交互設(shè)備的特殊性，在復(fù)雜多變的使用環(huán)境中，交互界面也會隨之產(chǎn)生一些變化，伴隨著不同的視覺效果和聲音效果，因此在此把非連續(xù)性的聲音元素也歸類為點(diǎn)的元素。點(diǎn)的聲音界面加強(qiáng)了交互界面的多感官互動，為信息的傳達(dá)提供了多樣的途徑和方式；同時聲音本身的音色、音調(diào)、音量等也是提高交互界面人性化的有效途徑。3 同時隨著穿戴式設(shè)備的普及，點(diǎn)的元素因其本身小而美的特性，將越來越多的在可穿戴式設(shè)備上得到運(yùn)用

10、。不管是影藏功能，簡化界面，還是人性化的提示，點(diǎn)元素都是重要的可參考的呈現(xiàn)方式。 3.2交互界面中“線”的構(gòu)成元素及作用 點(diǎn)的重復(fù)延伸形成了線，線在交互界面造型中有兩方面的作用，一是具有引導(dǎo)用戶視覺的導(dǎo)向功能，二是用于分割頁面空間布局，使得界面承載的信息規(guī)整化、條理化，使得用戶能夠清晰、明確地看到信息。 引導(dǎo)用戶視覺導(dǎo)向的“線”元素通常是隱藏在界面中的，太過顯眼會吸引用戶過多的注意力，分散了用戶對主要任務(wù)的注意。而分割界面空間布局的線就類似于平面設(shè)計(jì)中的網(wǎng)格系統(tǒng)，這樣的網(wǎng)格系統(tǒng)會決定界面的主要板塊和大致分布，與傳達(dá)信息的重要性和功能實(shí)現(xiàn)的易操作性，以及用戶的視覺習(xí)慣也有一定聯(lián)系。 “線”除了直

11、線的規(guī)整切割和分布，還有一些曲線分布和分割的例子，不多見，但以曲線來表達(dá)數(shù)據(jù)和呈現(xiàn)數(shù)據(jù)變化是非常多見的，比如在效率類app中，就常常用線條來表達(dá)數(shù)據(jù)波動，直觀、高效地呈現(xiàn)信息。 3.3交互界面中“面”的構(gòu)成元素及作用 面是由無數(shù)點(diǎn)和線組合而成的。面占據(jù)空間多，相對于點(diǎn)和線來說，視覺沖擊力強(qiáng)。面是界面布局中最終的呈現(xiàn)狀態(tài)，面的合理運(yùn)用使界面空間分配更趨明晰，視覺節(jié)奏和韻律、氛圍在其中貫穿。 以時下采用較多的卡片式信息呈現(xiàn)方式為例，卡片式的信息呈現(xiàn)不僅廣泛在移動端設(shè)備使用，甚至在web端也被廣泛使用。google的移動端產(chǎn)品已經(jīng)全面的卡片化了，同時越來越多的網(wǎng)站采用了卡片化的方式呈現(xiàn)信息。luvo

12、cracy的卡片化設(shè)計(jì)突出了信息本身，用大圖和標(biāo)題文字吸引用戶，強(qiáng)化了無盡瀏覽的體驗(yàn)；google now的卡片則更加的定制化、個性化，有的卡片是用來做用戶教育的，有的卡片是用來告知天氣的，有的卡片是呈現(xiàn)聯(lián)系人列表的，有點(diǎn)卡片是顯示待辦事項(xiàng)的，不同的卡片都遵循在一個統(tǒng)一寬度和樣式的卡片內(nèi)，進(jìn)行發(fā)揮和設(shè)計(jì)；既保證了卡片和卡片之間的獨(dú)立性，又保證了服務(wù)和服務(wù)的統(tǒng)一。shazam則用一種趣味的卡片樣式，呈現(xiàn)專輯和歌曲。 同時我們不難發(fā)現(xiàn)windows8的系統(tǒng)也是采用了卡片式的方法，實(shí)時顯示每個分欄的動態(tài)?？ㄆ脑O(shè)計(jì)最大限度的展示了圖文，同時帶來了單純的瀏覽體驗(yàn)，同時為整合信息、展示信息提供了一個非

13、常好的解決途徑，通過卡片呈現(xiàn)，同時滿足了展示文字和圖片的需求。針對于移動端和網(wǎng)站都采用卡片化的信息呈現(xiàn)，會使得用戶在不同終端上延續(xù)對統(tǒng)一產(chǎn)品的使用體驗(yàn)；同時針對這一現(xiàn)象可以看出卡片式的信息呈現(xiàn)方式，是同一產(chǎn)品跨平臺、跨設(shè)備呈現(xiàn)時可以考慮的方式。 背景作為“面”中重要的因素對整個界面的影響也是非常大的，過于豐富的背景會擾亂用戶的視覺中心，過于單調(diào)的背景會讓用戶有種過于乏味的視覺感官。用通欄的圖片作為背景，或者是作為整個app的背景，或者是作為內(nèi)容區(qū)塊的背景，既提升了視覺表現(xiàn)力度，又豐富了app情感化元素。一些信息或操作，以浮動的形式呈現(xiàn)在圖片上。而這種設(shè)計(jì)方法，對字體和排版設(shè)計(jì)要求更高，難度也更

14、多，但容易渲染出氛圍。大視野背景圖風(fēng)格也可以分為兩種，一種像secret、the whole pantry這樣的，內(nèi)容區(qū)塊中采用大視野的背景圖片，好處是可以利用圖片做區(qū)塊分割，難度是圖片拼接后不一定好看，所以可能還需要配合描邊、留白等手段優(yōu)化拼接。另外一種就是像vsco、flink、mindie、soundwave這樣的，全屏背景圖甚至打通狀態(tài)欄，前景做內(nèi)容排版、導(dǎo)航、操作；這樣的背景圖使得界面造型更加簡單明了，圖片本身帶來氛圍更加濃烈。 4.實(shí)際案例fresh time界面設(shè)計(jì) 圖2 fresh time的交互界面設(shè)計(jì) fig2 fresh time interactive interface design 根據(jù)以上對移動手持界面造型形式的研究，在fresh time的界面設(shè)計(jì)上采用了圓形的元素貫穿始終。首先在界面上的每一個元素都采用了圓形的元素，不管是每個單位元素的圓形外觀還是里面的水果都是以圓形為雛形的，并且和軟件日程計(jì)劃的鬧鐘功能做了很好的結(jié)合，不管是水果還是鬧鐘都是圓的，使得界面元素統(tǒng)一、界面圖形風(fēng)格一致。在界面圖標(biāo)的排布上使用了直線的形式，很規(guī)整地排布在界面上，給人的直觀感受是清晰、明了的。在顏色的使用上，把紅色的主題色通過點(diǎn)、面的形式，呈現(xiàn)了提醒、按鈕、設(shè)置等功能。由此可見交互界面的造型形式的點(diǎn)、線、面元素存在于每一個界面，每一個界面上的細(xì)節(jié)都會影