交互設(shè)計中的軟硬界面設(shè)計

李昀桐

摘 要：隨著體驗時代的到來，以用戶為中心的交互設(shè)計逐漸受到重視。作為人與產(chǎn)品互相傳遞信息的唯一媒介，界面設(shè)計在交互設(shè)計中起到重要作用。界面設(shè)計分為硬界面設(shè)計、軟界面設(shè)計及軟硬界面協(xié)同設(shè)計。文章討論了軟硬界面設(shè)計在交互設(shè)計中的意義，從幾方面淺析交互設(shè)計中如何進(jìn)行軟硬界面設(shè)計，最后探討了交互設(shè)計中軟硬界面設(shè)計的發(fā)展方向。

關(guān)鍵詞：硬界面設(shè)計；軟界面設(shè)計；軟硬界面協(xié)同設(shè)計；交互設(shè)計

檢 索：www.artdesign.org.cn

中圖分類號：T 文獻(xiàn)標(biāo)志碼： A 文章編號：1008-2832（2014）07-0050-03

ID and UI Interface Design in the Interaction Design

LI？Yun-tong

（China？Agricultural？University，？Beijing？100083，？China））

Abstract ：With the advent of the era of experience， User-centered interaction design gradually be taken seriously. As the only medium of transfer information of people and products， interface design plays an important role in the interaction design. Interface design is divided into ID Interface Design， UI Interface Design， ID and UI Interface Collaborative Design. This article discusses the meaning of ID and UI interface design in the interaction design， analyses how to design ID and UI interface in the interaction design from several aspects， finally discusses the Development direction of ID and UI interface design in the interaction design.

Key words ：ID interface design； UI interface design； ID and UI interface collaborative design； interaction design

Internet ：www.artdesign.org.cn

一、交互設(shè)計的定義

在當(dāng)代社會，人們對產(chǎn)品的要求不再局限于使用功能的實現(xiàn)，人們更關(guān)注產(chǎn)品是否好用、易用、是否能給人帶來美好感受。以用戶為中心的交互設(shè)計應(yīng)運而生。交互式產(chǎn)品的設(shè)計范圍從主要針對計算機、互聯(lián)網(wǎng)和信息產(chǎn)品的界面設(shè)計，擴(kuò)展到各種門類的產(chǎn)品，為用戶提供良好的使用體驗。在《交互設(shè)計——超越人機交互》中，交互設(shè)計的定義為“設(shè)計支持人們?nèi)粘９ぷ骱蜕畹慕换ナ疆a(chǎn)品”①。交互設(shè)計使產(chǎn)品滿足用戶低級需要的基礎(chǔ)上，能夠滿足用戶的高層次情感需要。具體來說，交互設(shè)計的關(guān)注點是用戶操作使用產(chǎn)品過程中的需求、期望、行為習(xí)慣，通過豐富、加強交互手段，使產(chǎn)品帶給用戶的交互感受更加愉悅。

二、交互設(shè)計中軟硬界面設(shè)計的意義

在交互設(shè)計的整個過程中，界面是一種媒介，架起產(chǎn)品和用戶之間溝通的唯一橋梁。界面分為硬界面和軟界面兩種，軟硬界面的成功是產(chǎn)品向用戶表達(dá)信息成功的基礎(chǔ)，決定著產(chǎn)品感知用戶是否成功，關(guān)系到用戶與產(chǎn)品交互和諧與否。

三、交互設(shè)計中的硬界面設(shè)計

（一）操作信息可視化

用戶首次使用產(chǎn)品時，生疏的操作界面令用戶無所適從，將使用戶對產(chǎn)品產(chǎn)生距離感，不利于形成用戶與產(chǎn)品的良好交互，因此，為增強用戶、產(chǎn)品之間交互的和諧性，方便用戶學(xué)習(xí)操作，需要使硬界面中的操作信息能夠可視化。

首先，產(chǎn)品硬界面中操作面板的布局按照功能的相異分割為不同板塊，用材質(zhì)、大小、形狀、標(biāo)識、符合等元素、方式來區(qū)分，用視覺信息來闡釋清楚不同板塊對應(yīng)的功能及實現(xiàn)功能的操作方法。例如，傻瓜數(shù)碼相機（圖1）②的硬界面設(shè)計，巧妙搭配、結(jié)合形狀、文字、材質(zhì)等設(shè)計元素、變量，使不同知識水平的用戶都可以輕松上手，實現(xiàn)了交互設(shè)計可用、易用的目標(biāo)。

第二，各種顏色給人的感受也不同，這些感覺若應(yīng)用到不同功能模塊中，用戶將直觀地感知到區(qū)域間功能、操作的異同，從而流暢順利地使用產(chǎn)品。例如，紅色給人警惕、危險的感覺，而綠色代表正常、安全，因而，鮮艷的紅色多用于報警裝置按鈕，而綠色則用于正常運轉(zhuǎn)過程中操作的機動按鈕。

第三，進(jìn)行視覺信息的設(shè)計元素布局時，依照視覺設(shè)計中的排列原則、認(rèn)知規(guī)律，結(jié)合用戶個體不同的記憶、觀念和習(xí)慣，常用的、重要的按鈕設(shè)置在用戶距離較近、易于操作的范圍，并按使用頻率、重要程度依次排序排列。

（二）利用自然匹配關(guān)系

利用自然匹配關(guān)系，可以使設(shè)計語言更簡潔明了。首先，按鈕與儀表的排布應(yīng)一一對應(yīng)，位置的關(guān)聯(lián)性好；其次，按鈕移動、旋轉(zhuǎn)方向應(yīng)與儀表指針運動方向一致；第三，符合操縱習(xí)慣模式，如按鈕右旋為增加，反之減少。這樣就能提高產(chǎn)品中人——機互動的效率，使用戶不需特別記憶就能上手操作，有效減少用戶操作產(chǎn)品中的障礙。

（三）提供及時反饋

反饋的含義為：向用戶提供信息，使用戶知道某一操作是否已經(jīng)完成以及操作所產(chǎn)生的結(jié)果③。面對硬界面時，用戶需要了解操作后將產(chǎn)生什么結(jié)果，如果出現(xiàn)障礙，問題出現(xiàn)在哪，又需要如何解決。因此，設(shè)計師需要在用戶操作后，及時給予反饋信息，引導(dǎo)用戶下一步的操作。而且，用戶可以從觸覺的維度輔助視覺感受硬界面，例如，按鈕具有觸感反饋，就可以輔助視覺上顏色變化產(chǎn)生的反饋。endprint

例如，機器被開啟后，指示燈亮起，提醒用戶操作成功，這是典型的視覺感知反饋。又如，用戶按下按鈕、旋轉(zhuǎn)按鈕，按鈕將產(chǎn)生部分反作用力，這就形成了硬界面的觸覺感知上的反饋。

四、交互設(shè)計中的軟界面設(shè)計

（一）簡潔性

用戶無法在一個時間點上同時消化大批量的信息。在產(chǎn)品發(fā)揮應(yīng)有功能的基礎(chǔ)上，要盡量體現(xiàn)軟界面的簡潔性。軟界面的信息區(qū)域往往面積有限，因此，要有效利用軟界面的顯示空間，凸出顯示最有效的信息。不同門類的信息要分類排放，輔以窗口的不同進(jìn)行分割，避免數(shù)據(jù)雜亂冗長。不常用的操作信息應(yīng)設(shè)置在二級界面上，或進(jìn)行隱藏，以簡化一級界面的內(nèi)容。在系統(tǒng)中頂部的菜單欄、操作命令的輸入框、欄目設(shè)置等交互變量沿襲同一版本的設(shè)計。按功能將軟界面屏幕進(jìn)行模塊分割時，可輔以不同色彩元素來表達(dá)。

（二）流暢性

美觀不是軟界面成功與否的標(biāo)準(zhǔn)，而操作流暢、信息清晰才是軟界面的最終目標(biāo)。信息的表達(dá)要易于令用戶接受，對信息進(jìn)行布局要合理。特殊設(shè)計的菜單要小心處理，如設(shè)計雙擊左鍵出現(xiàn)滾屏效果，如何停止而恢復(fù)靜態(tài)界面，如何直接閱讀底部信息等，都可能令用戶疑惑，精心的設(shè)計便成為了軟界面流暢性的阻礙。

為實現(xiàn)軟界面的流暢性，需要進(jìn)行測試。讓不同的陌生用戶進(jìn)行完整的操作測試，或利用一些測試工具，可以有效破除設(shè)計師的個人局限及習(xí)慣，過程中不提供任何幫助提示，觀測不同測試用戶的操作過程是否正確、順暢，從中查漏補缺，完善軟界面的設(shè)計，大大提高其流暢性。

（三）容錯性

軟界面的設(shè)計必須符合用戶的心理特點，當(dāng)用戶出錯時持有包容的態(tài)度。不論考量多么周到全面，用戶出現(xiàn)誤操作都是可能出現(xiàn)的，第一時間提供響應(yīng)，使用戶得到如何正確操作的幫助、提示，告知用戶發(fā)生誤操作的原因、改善方法。

例如，發(fā)布信息時，有時用戶堅持填寫了大量信息，但由于填寫時間超時而無法提交，需要從頭輸入信息，如果用戶后退能夠找回已經(jīng)輸入完成的信息，會增加軟界面中人性化的成分。又如，在系統(tǒng)初次注冊的軟界面中，因密碼位數(shù)與設(shè)置規(guī)定不符，無法成功修改初始密碼，但由于沒有及時反饋出錯原因及改正方式，用戶并不知道為何一次次操作失敗，就可能使用戶感到懊惱并放棄使用該產(chǎn)品。

軟界面中，用戶進(jìn)行每一步操作后，要及時提供幫助并施加響應(yīng)。允許用戶進(jìn)行后退及撤銷，并能夠緩存上一步驟的信息。在真正地執(zhí)行操作命令之前，要使用戶知道，即將可能發(fā)生的后果，請用戶了解后果后，再次確認(rèn)是否繼續(xù)執(zhí)行操作。

軟界面設(shè)計中，如屏幕中利用觸覺感知進(jìn)行響應(yīng)、屏幕翻轉(zhuǎn)進(jìn)行銜接等，是信息技術(shù)時代發(fā)展起來的反饋模式，更加先進(jìn)、貼心，仿佛客服人員般愉悅地告知用戶，我在為您服務(wù)。

五、交互設(shè)計中的軟硬界面協(xié)同設(shè)計

（一）操作匹配

軟界面在視覺感知上的信息呈遞十分豐富豐滿，是一種實用性的手段，能夠輔助硬界面的表達(dá)更加充足、多樣，而硬界面的觸覺感知是無聲的語言，使人產(chǎn)生觸感和聯(lián)想，是對軟界面的一種輔助感受，二者互輔結(jié)合，才能為用戶使用產(chǎn)品的過程創(chuàng)造更多便利性。因此，一個好的產(chǎn)品不僅需要優(yōu)秀的硬界面設(shè)計，還需要與之匹配呼應(yīng)的軟界面設(shè)計，軟硬界面和諧地互相匹配，才具備給予用戶良好交互的能力。例如，尼康相機（圖2）④設(shè)計中，硬界面設(shè)計中的按鍵在觸覺上進(jìn)行二維坐標(biāo)尺上四個方向的擊打觸碰，軟界面設(shè)計中的菜單圖標(biāo)按照上、下、左、右的相應(yīng)順序進(jìn)行滑移操作。硬界面設(shè)計中的轉(zhuǎn)盤可以在觸覺上進(jìn)行撥動操作，同時，軟界面設(shè)計中的圖標(biāo)元素按匹配關(guān)系進(jìn)行視覺上的旋轉(zhuǎn)呈現(xiàn)。采用這種方式，用戶在硬界面中進(jìn)行觸覺上的操作，軟界面的設(shè)計元素在視覺上產(chǎn)生對應(yīng)結(jié)果，這是一種清晰而自然的匹配、對應(yīng)關(guān)系，也是軟硬界面協(xié)調(diào)操作產(chǎn)生的和諧結(jié)果。

（二）表達(dá)情感

交互設(shè)計的目的是使用戶心情愉快、精神放松。好的軟硬界面協(xié)同設(shè)計，鼓勵用戶一步步操作產(chǎn)品，并在過程中產(chǎn)生創(chuàng)造性的思維，能夠引起用戶某種情感，使用戶與產(chǎn)品的連接更加密不可分。

首先，若一個界面是好玩、漂亮的，用戶的眼球?qū)⒈簧钌畹奈?。設(shè)計充滿張力、表現(xiàn)力的軟硬界面，營造充滿活力、趣味、新奇的氛圍，激發(fā)用戶深入了解、使用并熟悉產(chǎn)品，使用戶對產(chǎn)品形成良好的情感化評價。軟硬界面中的圖形和諧與否，按鍵精致與否，顏色漂亮與否，字體別致與否，都決定用戶能否滋生產(chǎn)品預(yù)設(shè)的情感反應(yīng)，能否深深地喜愛該產(chǎn)品。軟硬界面中的圖畫、顏色、大小、比例等元素，就是情感設(shè)計的設(shè)計著眼點和突破口。要巧妙利用軟硬界面中的圖形元素，在表達(dá)清楚信息的同時，誘發(fā)用戶產(chǎn)生美好的情感體驗。

其次，以用戶為中心，從用戶的期待入手。界面設(shè)計應(yīng)揣測用戶頭腦中的所思所想，使用戶的需求、期望得到體會、實施和滿足。例如，面向老人的界面，要照顧老年人退化的辨識、感知、思考能力，力求清晰明朗，在查詢、引導(dǎo)和幫助上要著重處理，避免使老年人用戶感到自尊心的傷害。又如，面向兒童的界面既要考慮幼兒身體尺寸還在發(fā)育，界面要易于握持、點擊，又要滿足孩童對鮮艷色彩、好玩有趣事物的向往。

六、交互設(shè)計中軟硬界面設(shè)計的發(fā)展方向

社會經(jīng)濟(jì)不斷發(fā)達(dá)，計算機技術(shù)日新月異。視線追蹤技術(shù)、語音識別技術(shù)不斷涌現(xiàn)。語音、遙控技術(shù)、手勢等，都將漸漸出現(xiàn)在用戶與產(chǎn)品的交互過程中。在顯示、控制技術(shù)領(lǐng)域，將有更新更好的方式出現(xiàn)，在此影響下，用戶與產(chǎn)品交互的軟硬界面定會得到改進(jìn)和完善，用戶的操作定會更加便利快捷。

體驗經(jīng)濟(jì)時代中，優(yōu)秀的交互設(shè)計需要優(yōu)秀的界面設(shè)計，其中，包括三個板塊，即硬界面的設(shè)計、軟界面的設(shè)計及軟硬界面協(xié)同設(shè)計。交互設(shè)計中軟硬界面的最高目的是在用戶與產(chǎn)品間，實現(xiàn)一種超越自然的友好方式，作為交互設(shè)計師，這也是我們努力的高遠(yuǎn)方向。

注釋：

①（美）Jennifer Preece，Yvonne Rogers，Helen Sharp著，劉曉暉，張景等譯.交互設(shè)計——超越人機交互[M].北京：電子工業(yè)出版社，2003.

②朱偉.拉斯韋加斯的影像大典2007PMA展覽勝[J].科學(xué)生活，2007（6）.

③諾曼·唐納德著，梅瓊譯.設(shè)計心理學(xué)[M].北京：中信出版社，2003.

④高巖、陶晉、洪華.軟硬界面協(xié)同影響下的用戶體驗[J].藝術(shù)與設(shè)計（理論），2008（11）.endprint