“互聯網+”時代全媒體視域下的移動端菜譜可用性研究

摘要：在“互聯網+”時代背景下，“掌上”行為是當下民眾的生活形態，“多屏”載體也成了全媒體傳播和多業態消費的主要特征。研究移動互聯網的商業設計可以更好地契合該生活形態并賦能于消費品質提升。為了探索移動端電子菜譜在商業消費場景中的體驗要素，對著名連鎖店“南京大排檔”和“麻辣空間”的電子菜譜展開設計案例對比，并專門針對屬于企業自身開發設計類型的“南京大排檔”移動端進行可用性用戶測試以及可用性分析。從而洞察界面設計與餐飲主題之間的關聯，并歸納總結出電子菜譜的設計趨勢要點。電子菜譜不僅僅反映了在“互聯網+”時代移動端開發設計響應生活形態的需求，也體現出在全媒體傳播與移動消費結合場景下的食物設計新形態，以及蘊含傳遞菜系文化特色的宣傳屬性。

關鍵詞：全媒體 電子菜譜 用戶體驗 可用性 食物設計 互聯網+

中圖分類號：J524 文獻標識碼：A

文章編號：1003-0069（2023）22-0123-03

Abstract：In the context of the \"Internet +\" era，the \"hand-held\" behavior is the current lifestyle of the people，and the \"multi-screen\" carrier has also become the main feature of all-media communication and multi-format consumption. Researching the commercial design of the mobile Internet can better fit this lifestyle and enable the improvement of consumption quality. In order to explore the experience elements of Mobile Application Menu in commercial consumption scenarios，we compared the design cases of the Mobile Application Menu of the famous chain stores \"Nanjing Impressions\" and \"Spicy Space\"，and specially aimed at the \"Nanjing Impressions\" which belongs to the type of enterprise’s own development and design. Ranking mobile terminal for usability user testing and usability analysis. In this way，we can gain insight into the relationship between interface design and catering themes，and summarize the design trends of Mobile Application Menu. Mobile Application Menu not only reflect the needs of mobile terminal development and design in the \"Internet +\" era to respond to the needs of life forms，but also reflect the new form of food design in the combination of all-media communication and mobile consumption，as well as the propaganda attributes that convey the cultural characteristics of the cuisine.

Keywords：All-media Mobile Application Menu User experience Usability Food design Internet+

引言

隨著“互聯網+”時代特征的發展，餐飲行業與移動互聯網行業形成多業態的交集，對于蘊含的美食文化來講，更是形成了全媒體的傳播態勢。移動端的餐飲消費與飲食文化傳播已經密不可分。也正是因為新媒體全面普及與移動互聯的廣泛場景需求，移動端電子菜譜的設計一方面需要與傳統紙質菜譜形成設計元素的延續性，另一方面除了滿足菜品陳列、訂單與結賬等需求以外，還應該還更注重消費者的用戶體驗，通過移動互聯技術在可用性與視效之間形成恰當的平衡，并能承載多元的感官認知和傳遞相應的美食文化。

一、移動互聯網對餐飲消費的影響

（一）掌上習慣的全面浸染。年輕一族的“千禧一代”和“Z一代”這兩個年齡群體的典型特征是熱衷于“互聯網+”時代背景下的產物“移動端電子設備”等[1]。移動互聯網生活形態主要是這兩個消費群體的日常，可謂已經離不開移動客戶端所帶來的便捷性。各類移動端應用已促使從“掌上消費”全面發展成為一種“掌上習慣”。因此，當下民眾的餐飲消費較早地成了一批典型“掌上習慣”的領域，也是在“互聯網+”發展催化下產業與生活形態雙向浸染的態勢。

（二）餐飲發展的趨勢使然。餐飲行業順應移動互聯網發展潮流，主動融入“互聯網+”這個時代背景影響下的人們的生活方式和行為習慣，才能保證其市場占有率[2]。移動端電子菜譜已經成為諸多餐飲商戶的選擇，成為“互聯網+”趨勢映射到飲食產業的縮影，也是餐飲行業與移動互聯網行業融合“+”發展的典型佐證。消費升級需求也反饋到了電子菜譜的設計層面：高效、美觀以及文化內涵等多方面訴求都成為電子菜譜的要求。

（三）全媒體傳播的格局促進。一方面，飲食文化是城市文化的重要組成部分；另一方面，餐飲消費也是都市生活的必備要素。隨著“互聯網+”的發展，餐飲消費體驗從宏觀城市格局開始下沉到行業乃至個體。“掌上消費”帶領的是“多屏傳播”，餐飲消費與飲食文化傳播高度交集不能分割。每個熱衷分享的消費者都成為全民營銷、全民傳播的擁躉，中國飲食文化已經進入了以全媒體傳播特征為主要特征的“后舌尖”時代。

二、移動端電子菜譜案例研究

隨著“互聯網+”的不斷發展，菜譜的設計也逐漸從最開始的Pad端全面走向手機應用終端。為了以消費行為角度對當前的移動端電子菜譜展開設計層面分析，選擇了“南京大牌檔”和“麻辣空間”這兩個分別從屬于中餐淮揚菜與川菜火鍋系的連鎖餐飲品牌電子菜譜移動端案例進行案例研究，并重點對“南京大牌檔”掃碼點菜操作流程進行可用性測試分析。

（一）功能框架分析

“南京大排檔”與“麻辣空間”餐飲店的電子菜譜移動端均是采用小程序方式。這在相當程度上降低了以App形式獲取用戶的成本。當前使用小程序作為電子菜譜的移動端載體形式已經成為主流。首先，從消費者實際操作的角度對兩款移動端進行功能框架分析。通過梳理移動端功能發現，“南京大排檔”電子菜譜設計更加聚焦于點菜需求本身，對消費者用戶進行微信掃碼的場景訴求響應比較直接，即更加符合進店掃碼點菜的用戶期望值。一方面中餐菜品總數往往會高于火鍋，因此對菜品的歸納越整飭且符合日常就餐邏輯則越提升點菜效率；另一方面，中餐菜品的更新頻率也高于火鍋，因此菜品歸納呈現的模塊化程度越高，也會降低菜品更新對老顧客識別菜譜的影響。而“麻辣空間”的充值功能蘊含了某些營銷目的，賦予充值優惠的功能目的是增加用戶黏性。但該促銷功能也同時增加了功能框架樹形結構的寬度。考慮到火鍋菜品的相對穩定性，功能框架增加運營角度特征不會過度產生效率影響。

總的說來，“南京大排檔”與“麻辣空間”兩者的電子菜譜功能框架遵照了餐飲消費點菜環節效率優先的基本訴求。在主流功能設定下，具有符合自身餐飲品類特征的一些細節考量點。譬如，火鍋點菜的人數選擇環節比較重要且需要前置，中餐對菜品分類在邏輯性基礎上突出自己的特色性且兼顧菜品上新與分類穩定性。

（二）交互流程分析

1.加載轉場。如圖1所示，接下來專項聚焦于“點菜”功能的交互設計流程分析，（a）為“南京大牌檔”，（b）為“麻辣空間”。“南京大排檔”電子菜譜系統設計在用戶掃描桌面二維碼之后等待響應的過渡界面沒有進行專門的加載設計，采用的是空白停留方式；“麻辣空間”的加載界面設計采用的是基于幾種蔬菜形象設計的微動效。因此，相比較而言“麻辣空間”的加載設計更符合當下的交互動效設計趨勢。越多的電子菜譜在加載頁面融入了廣告，諸如菜譜上新、當季限定、限時促銷等，但加載時間上往往會比較克制，往往少于一般App加載頁停留的5秒設定，可以較好地平衡廣告需求、點菜效率與顧客感受。時間設定的細微差別體現出符合消費場景的微創新。

2.“點菜”流程。經過加載界面后使用淡入淡出形式轉場至首頁。由于兩個品牌經營的餐飲類型完全不同，點菜的流程設計也自然會大相徑庭。“麻辣空間”電子菜譜系統當用戶點擊“點菜”功能控件后，會轉到選擇用餐人數的選擇界面，選擇人數之后才能進入正式的選菜品階段；相比較于“麻辣空間”這一特殊流程設定，“南京大牌檔”在加載頁面之后會直接跳轉到“菜品選擇”環節。“南京大排檔”的點菜操作更加短程。而“麻辣空間”由于是火鍋類型餐飲，無法規避人數設定這一首先進入選擇的關鍵步驟。比較前幾年的Pad端電子菜譜而言，兩家餐飲在“加入菜單”的選擇加載過程中響應都比較出色，也反映出電子菜譜小程序后臺模塊化的日趨成熟。一是點菜流程設計遵循效率優先的設定，二是也側面體現了當前大屏手機已經成為手機主流的影響。

3.導航模式。在菜品選擇環節兩者都是采用了標簽導航的設計類型，不同的是，“南京大排檔”是頂部Tab形式，“麻辣空間”是側邊欄Tab形式。其標簽的劃分均是基于自身餐飲菜品的分類。值得一提的是，兩者都具有相對獨立的“搜索”控件。這一功能對于無論是“新手型”用戶還是“熟練型”用戶而言，都具有提高效率的作用。此外，“購物車”也是比較明顯的單獨控件設計，可以提供給用戶比較清晰的當前選擇情況的呈現，且采用的是一種快捷模式。“購物車”界面除了有對已選菜品的顯示，還包括“提交”“清空”以及“繼續加菜”等符合點菜場景行為邏輯的選擇項，從而構建出比較完整的點菜操作設計流程。這一方面而言，兩者電子菜譜系統都采用了比較成熟和常見的交互設計流程，可充分考慮到“新手型用戶”消費者操作效率的問題。此外，電子菜譜的導航設計與同樣是全媒體生活形態反映的移動閱讀有明顯不同，移動閱讀導航需要考慮是否兼顧單手操作的場景，而在餐廳消費則往往是雙手操作。

（三）界面視覺（UI）風格分析

在用戶界面視覺（User Interface，UI）方面，“南京大排檔”與“麻辣空間”有著完全不同的取向設定。如圖2和圖3所示，“南京大排檔”采用的是擬物化UI設計，“麻辣空間”則采用的是扁平化UI設計風格。扁平化設計突出內容主題，減弱各種漸變、陰影、高光等視覺效果對用戶視線的干擾，能讓用戶更加專注于內容本身，減少信息層級的復雜性。擬物化風格強調的是易于理解，對操作特性的模擬顯得平易近人；而扁平化風格則更突出內容本身且對易于操作的重視[3]。無論是擬物化UI還是扁平化UI，并沒有完全絕對優劣的判斷論斷。最終還是應該根據品牌形象訴求、目標消費群體偏好、功能優先級定位等多元角度進行綜合權衡與選擇。比較遺憾的是，“麻辣空間”在遵循效率優先的情況下，在通用性菜譜界面基礎上并未注重在加載界面、Banner設計上呈現出相應的菜系文化特征與品牌視覺形象元素。

三、可用性測試與分析

（一）測試目的。電子菜譜畢竟與消費者用戶的使用體驗直接關聯，所以在對電子菜譜進行設計分析時還應該專門進行可用性方面的探究。可用性測試需招募一些代表性的目標用戶作為受試者，通過觀察、記錄和分析受試者的行為和感受，以評估某一產品是否符合可用性[4]。可用性測試更多的是為了發現問題，從而可以通過后續的設計迭代來不斷提升軟件的用戶體驗。對尚處于研發版本早期的電子菜譜設計來講，通過一線的餐飲消費者進行場景式的測試，就能比較高效地發現可用性方面的問題。

（二）測試方案。針對移動端電子菜譜的可用性測試盡量遵循場景化還原，與餐飲消費者進店后通過對桌面微信二維碼進行掃碼的操作起始步驟完全一致。測試用戶為5名。對于實際開發工作目的來講，80%的置信水平就已足夠。根據測試用戶數量的置信區間，5名目標用戶的可用性測試用戶數量能基本滿足[5]。測試用戶來自不同的文、理學科背景，均是智能手機的熟練用戶。本次可用性測試用戶篩選看重的是其相關互聯網產品的使用經驗背景及其年齡層：均有使用掃碼點菜的經歷（如美團等），男女比例為3：2，年齡層為屬于“千禧一代”的“90后”用戶群體。

整體采用標的菜品的點菜任務測試方法。測試過程分為兩大階段：第一個階段根據測試任務所提供的微信二維碼，用戶使用自己的智能手機進行掃碼，完成統一指定的某個具體菜品的點菜操作流程，成功提交訂單為任務結束點；第二個階段根據上述操作的完成情況與使用體驗，用戶闡述在該整個操作過程中所遇到的問題，以及對“南京大排檔”的移動端電子菜譜設計在“功能設置”（功能框架）、“操作步驟”（交互設計流程）以及“視覺審美”（UI設計風格）等幾個方面進行評價，鼓勵用戶進行“思維發聲”。測試員在此過程中根據用戶的反饋及評價進行即時的交流與訪談。

（三）主要可用性問題分析

1.導航欄整體性存在感弱化：用戶在使用掃碼進入“南京大牌檔”的點菜主頁后并沒有在第一時間注意到頂部導航欄，而較多情況是將視覺焦點放在菜品的陳列上。導航欄容易被用戶忽視的重要原因在于擬物風格設計自身的識別度偏弱、擬物形式會削弱標簽導航的形式感。再加上主頁面陳列的菜品圖片本身具有較高吸引力以及“點菜”目的性強，所以更容易在菜品圖片上直接開始尋找點擊目標。造成導航欄整體識別度偏弱的原因主要有：擬物配色為木質棕色，而導航欄上顯示菜品類別的字體也是棕色，再加上木紋肌理會形成一定的視覺干擾導致識別性削弱，從而具有重要信息引導作用的導航欄整體的“存在感”被較明顯弱化。

2.按鈕狀態指引性有待提高：“南京大排檔”移動端電子菜譜具有獨立設計的搜索功能，其功能入口為按鈕控件。測試結果中5名用戶僅有1名用戶在第一遍指定菜品“地毯式搜尋”無果的情況下發現并使用了菜品搜索功能。其他4名用戶在測試結束的訪談過程中才發現和了解到搜索功能的存在。菜品搜索本身是一種高效的快捷設定，但由于控件的設計問題，導致該功能存在比較明顯的可用性問題：按鈕設計識別度弱，無法有效提供功能指引。色調對比、控件位置、尺寸大小等問題導致絕大部分測試用戶都無法識別按鈕控件。電子菜譜設計一般說來是以新手用戶或低頻次用戶作為基本的用戶設定，但火鍋品類的菜品則相對比較固定且具有通用性，因此火鍋餐飲電子菜譜則可以考慮以熟練用戶作為目標。對于熟練用戶或高頻次用戶來講，菜品搜索的設計可以給予更多的關注與提升。

3.操作動作序列一致性欠缺：掃碼點菜整個過程中有幾處操作序列的設計構建存在著比較明顯的不合理性，動作序列不一致的問題比較突出。最明顯的是，用戶要進行不同層級界面的切換必須通過點擊導航欄才能實現。但當前比較成熟的動作序列均還可以通過左右滑動屏幕，完成頁面的切換。用戶若采用該操作經驗將無法達成界面切換的目的。其次，查看當前購物車交互流程也存在著明顯缺陷。譬如電子菜譜“購物車”icon并不是可操作的控件。但在諸如“淘寶”等主流購物類型App中，用戶點擊“購物車”icon即可跳轉至當前選擇清單頁面。動作序列設計和當前成熟App完全不一致，與用戶熟悉的操作經驗相悖。

4.交互流程步驟簡潔性降低：根據用戶測試反饋，“南京大牌檔”交互設計流程略顯繁瑣，需要進一步的優化。①在菜品陳列方面。采用的是菜品圖片縮略圖宮格式展示方式。宮格式能提供的信息有限，用戶點擊縮略圖進入彈窗模式才能對菜品進行詳情了解。②在增減菜品方面。電子菜譜目前增加或刪減菜品操作無法在選菜頁面里進行，用戶只能點擊下一步進入購物車頁面后才能完成操作。可以通過“+”“-”圖標在清單中直接進行增減操作。值得一提的是，當菜品數量為“1”的時候，繼續點擊“-”可以實現對此菜品的刪除功能，而不是使用“刪除”控件。這一操作流程創新也更加符合點菜消費場景的實景操作邏輯。③購物車信息方面。當前購物車界面只提供了菜品名稱的文字顯示，這會給用戶造成一定的選擇記憶負擔：用戶只能退出購物車頁面后，再復讀菜品信息才能起到回想的作用。引入菜品具有識別性圖片作為icon可以更好地兼容新手用戶。

四、移動端電子菜譜的設計趨勢

（一）擬物風格UI的恰當運用。擬物化UI設計風格在電子菜譜系統設計中的廣泛運用，源自兩大方面的驅動。一方面是擬物UI能夠與餐飲消費環境產生關聯。從“掌上消費”到“店內消費”，通過UI視效達到O2O的高度契合體驗。“南京大牌檔”移動端電子菜譜系統的界面中模擬現實場景中的木牌造型和質感，通過疊加高光、陰影等效果，從而使UI具有高度風格化的特征，更重要的是與營造濃郁民俗風情的就餐環境能形成感官契合。另一方面是顧及更廣大消費人群的使用習慣。尤其是受眾沒有特別針對性的餐飲商戶，在使用電子菜譜時必須考慮不同年齡層消費人群的操作習慣。相對年長的人群對擬物風格UI的接受度比扁平風格更高。但擬物風格對于更加重視操作效率類型的移動終端來講往往是“雙刃劍”，增加視效的同時，往往不可避免地會對可用性形成負面影響。擬物UI讓設計師過多地把精力浪費在諸如反復修整背景紋理或調整投影角度的工作中，反而忽略了交互行為本身[6]。因此，移動端電子菜譜系統在廣泛地采用擬物風格UI設計的同時，需盡量注意擬物的恰當性，不能單純為了追求視效而忽略了可用性方面。

（二）購物型交互流程的成熟借鑒。相對于采用傳統紙質菜譜的餐飲商戶數量來講，移動端電子菜譜系統在餐飲行業中的應用尚處于發展階段。隨著“互聯網+”時代中“原住民”消費人群的逐漸成長，電子菜譜系統可期為重要類型，眾多餐飲企業未來都會促使菜譜的電子信息化。電子菜譜系統從本質上講是屬于購物型終端，因此電子菜譜系統設計必須遵循消費人群的操作習慣，即在購物大致流程上應該多借鑒市面上主流的購物型App。從之前對“南京大排檔”電子菜譜系統的可用性測試發現的突出問題上可以看出端倪。點菜需求對接了成熟購物流程，則能賦予電子菜譜系統更加流暢的購物體驗。在此基礎上，再針對菜品類型的特殊性、餐飲服務的特色化進行流程的迭代與優化。值得一提的是，由于“掌上消費”已經成為“互聯網+”時代的常態化消費場景，電子菜譜系統交互設計還必須注意遵循“掌上習慣”，構建適應于移動端的消費體驗，而非采用PC端的購物交互模式。

（三）紙質菜譜的視覺化延伸拓展。電子菜譜系統對菜品呈現上相對于紙質菜譜而言具有諸多優勢，能提供更多官能通道的體驗。在圖文信息上，電子菜譜系統是對紙質菜譜表現質量的提升，提供色澤更鮮亮、內容更多的展示；在感官認知上，電子菜譜系統則是提供紙質菜譜無法承載的動態呈現，讓菜品的視覺化體驗更加豐富。

1.微動效。在移動端的轉場、加載等界面上加入動效設計，既可以增加菜譜的表現力，又可以改善產品的用戶體驗。例如，加載界面的動效可減少用戶等待時的焦慮感、屏保界面上的動效能大大增加趣味性。之前案例分析中的“麻辣空間”電子菜譜系統在加載頁面中使用了微動效，能讓用戶在進入電子菜譜系統一開始的等待中就收獲了有趣意味。

2.微視頻。目前“淘寶”“天貓”上越來越多的商戶紛紛對商品的展示采用了微視頻的方式，已經受到了消費者用戶非常廣泛的好評。那么在電子菜譜系統中使用微視頻，一方面可以讓菜品更加立體化、生動地進行展示，能充分表達光澤鮮美、香味蒸騰的場景。另一方面在較短的時間（如10秒鐘）內傳遞出豐富的信息。諸如原料展示、制作過程等。相對于靜態圖文并茂的形式，電子菜譜系統的微視頻可謂將紙質菜譜的視覺化提升到一個全新的體驗水平。

（四）美食品牌化的移動端構建。諸多行業在“互聯網+”時代背景下的融合發展，對餐飲行業來講是挑戰更是機遇。新媒體前所未有地增加了美食文化的傳播廣度和速度。“互聯網+”帶給餐飲企業進行品牌化構建的豐富渠道。對于電子菜譜系統來講，既是餐飲品牌在移動端進行構建的渠道形式之一，同時也可以算作食物設計在全媒體時代的設計內容形式之一。從之前的案例分析可以看到，諸如“南京大排檔”等著名餐飲企業設計開發電子菜譜，不僅僅是為了餐飲經營所需，更是融入了餐飲品牌建設的努力、美食文化的傳播。移動端UI設計與餐飲品牌的VI相結合打造，形成具有獨特風格或個性化的視覺體驗。也可以這樣說，CIS設計（企業形象系統，Corporate Identity System）在“互聯網+”趨勢下的發展形態已經開始與移動應用相融合。VI（視覺形象識別，Visual Identity）對應了UI設計，BI（行為形象識別，Behavior Identity）則蘊含了交互設計層面的內容構建。

結論

“互聯網+”時代發展特征會促使移動端電子菜譜在餐飲行業中愈發廣地普及使用，更重要的是也將互聯網行業中的用戶體驗思維引入到了傳統餐飲產業中。移動端電子菜譜的設計開發也必須重視可用性所承載的用戶體驗。這既是餐飲行業消費升級后的要求使然，也是整個“互聯網+”生活形態下的用戶需求體現。在此發展背景下，無論是餐飲行業的品牌形象塑造，還是更宏大視角的飲食產業生態構建和中華傳統美食文化傳播，移動終端還扮演了全媒體傳播及其消費行為載體的角色，同時也拓展了食物設計在移動互聯網生態中的設計內容。電子菜譜不僅是圍繞菜品菜系的視覺體驗和交互體驗最終到文化體驗的立體化過程，也是針對消費新場景創新的主流化過程。

基金項目：四川省哲學社會科學重點研究基地川菜發展研究中心項目“四川飲食文化視域下的食物設計研究”（項目編號CC23W02）

參考文獻

[1]Philip Kotler，Gary Armstrong.市場營銷——原理與實踐[M]. 北京：中國人民大學出版社，2015：78-79.

[2]周睿. 電子信息化趨勢下的川菜產業發展[J]. 揚州大學烹飪學報，2010，27（02）：56-61.

[3]王凡. 從“少即是多”中探究移動端扁平化UI界面設計[D]. 廣東工業大學，2015.

[4]朱婧茜，何人可. Android手機應用界面布局的可用性測試研究[J]. 包裝工程，2014，35（10）：61-64.

[5]Jakob Nielsen. 可用性工程[M]. 北京：機械工業出版社，2004：106-107.

[6]李佳. 界面設計中的扁平化設計與擬物化設計之探議[J]. 藝術與設計（理論），2014（03）：55-57.