交互設計中的軟硬界面設計

李昀桐

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

關鍵詞：硬界面設計；軟界面設計；軟硬界面協同設計；交互設計

檢 索：www.artdesign.org.cn

中圖分類號：T 文獻標志碼： 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

一、交互設計的定義

在當代社會，人們對產品的要求不再局限于使用功能的實現，人們更關注產品是否好用、易用、是否能給人帶來美好感受。以用戶為中心的交互設計應運而生。交互式產品的設計范圍從主要針對計算機、互聯網和信息產品的界面設計，擴展到各種門類的產品，為用戶提供良好的使用體驗。在《交互設計——超越人機交互》中，交互設計的定義為“設計支持人們日常工作和生活的交互式產品”①。交互設計使產品滿足用戶低級需要的基礎上，能夠滿足用戶的高層次情感需要。具體來說，交互設計的關注點是用戶操作使用產品過程中的需求、期望、行為習慣，通過豐富、加強交互手段，使產品帶給用戶的交互感受更加愉悅。

二、交互設計中軟硬界面設計的意義

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

三、交互設計中的硬界面設計

（一）操作信息可視化

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

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

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

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

（二）利用自然匹配關系

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

（三）提供及時反饋

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

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

四、交互設計中的軟界面設計

（一）簡潔性

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

（二）流暢性

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

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

（三）容錯性

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

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

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

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

五、交互設計中的軟硬界面協同設計

（一）操作匹配

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

（二）表達情感

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

首先，若一個界面是好玩、漂亮的，用戶的眼球將被深深的吸引。設計充滿張力、表現力的軟硬界面，營造充滿活力、趣味、新奇的氛圍，激發用戶深入了解、使用并熟悉產品，使用戶對產品形成良好的情感化評價。軟硬界面中的圖形和諧與否，按鍵精致與否，顏色漂亮與否，字體別致與否，都決定用戶能否滋生產品預設的情感反應，能否深深地喜愛該產品。軟硬界面中的圖畫、顏色、大小、比例等元素，就是情感設計的設計著眼點和突破口。要巧妙利用軟硬界面中的圖形元素，在表達清楚信息的同時，誘發用戶產生美好的情感體驗。

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

六、交互設計中軟硬界面設計的發展方向

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

體驗經濟時代中，優秀的交互設計需要優秀的界面設計，其中，包括三個板塊，即硬界面的設計、軟界面的設計及軟硬界面協同設計。交互設計中軟硬界面的最高目的是在用戶與產品間，實現一種超越自然的友好方式，作為交互設計師，這也是我們努力的高遠方向。

注釋：

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

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

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

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