以用戶思維為設(shè)計(jì)導(dǎo)向的生鮮電商UI界面設(shè)計(jì)研究

汪鴻　陳錦渝

摘 要：隨著智能手機(jī)的普及，消費(fèi)者對(duì)用戶交互體驗(yàn)需求不斷升級(jí)，故在虛擬 UI 設(shè)計(jì)以及 UI 設(shè)計(jì)思維的發(fā)展與轉(zhuǎn)變以及用戶應(yīng)用過程當(dāng)中也不斷地得到發(fā)展，而本文主要的針對(duì)了生鮮App用戶交互體驗(yàn)以及其UI頁面設(shè)計(jì)思維及方向之間的聯(lián)系進(jìn)行了詳細(xì)的闡述，并且以虛擬生鮮購物App食來優(yōu)UI界面設(shè)計(jì)進(jìn)行分析，進(jìn)一步闡釋了在 UI 頁面設(shè)計(jì)當(dāng)中引用以用戶思維為導(dǎo)向的設(shè)計(jì)思維方式的重要意義，同時(shí)還預(yù)測(cè)了在 UI 交互體驗(yàn)設(shè)計(jì)當(dāng)中應(yīng)用該設(shè)計(jì)思維的作用。

關(guān)鍵詞：生鮮電子商務(wù);UI設(shè)計(jì);用戶思維

隨著我國智能手機(jī)普及，手機(jī)App不斷創(chuàng)新開發(fā)，各式軟件更新升級(jí)換代速率不斷上升。而在UI設(shè)計(jì)當(dāng)中應(yīng)用視覺思維能夠使得設(shè)計(jì)出來的軟件頁面更為豐富，更易被人類的大腦所接受[1]，同時(shí)還能夠滿足人們對(duì)于軟件所要求的個(gè)性化的要求，故在個(gè)性化研究以及UI設(shè)計(jì)用戶交互體驗(yàn)正在不斷被要求深入與升級(jí)，這對(duì)UI界面設(shè)計(jì)更是提出了更高的要求，以保障用戶良好的視覺以及使用體驗(yàn)，此時(shí)，想要在眾多App中脫穎而出、受到關(guān)注并提升下載使用率，UI界面設(shè)計(jì)的定制化及“秘書式、保姆式”服務(wù)化成為重要吸引用戶的因素，尤其是生活類App，如購物App。而此背景下界面設(shè)計(jì)者的設(shè)計(jì)思路應(yīng)該由‘設(shè)計(jì)者首先轉(zhuǎn)為‘使用者，以用戶思維為導(dǎo)向的設(shè)計(jì)思維在當(dāng)代UI界面設(shè)計(jì)中顯得尤為重要。

一、研究背景

（一）國內(nèi)外生鮮電商UI界面設(shè)計(jì)研究現(xiàn)狀

截至2019年，國內(nèi)以“電子商務(wù)+界面設(shè)計(jì)”以及“電子商務(wù)+視覺”等相關(guān)關(guān)鍵詞檢索出的文獻(xiàn)資料相對(duì)較少，且主要以博碩論文為主。而“生鮮+界面設(shè)計(jì)”“農(nóng)產(chǎn)品+視覺”等類關(guān)鍵詞檢索出的相關(guān)文獻(xiàn)資料更是門可羅雀。在生鮮電商領(lǐng)域，文獻(xiàn)資料主要以針對(duì)農(nóng)產(chǎn)品、生鮮的營銷模式、手段、生鮮冷鏈以及提升品牌力等方向的研究文獻(xiàn)較多，而在網(wǎng)頁、界面設(shè)計(jì)領(lǐng)域又主要以拆分網(wǎng)頁設(shè)計(jì)要素（如從單一的視覺符號(hào)、整體色彩、頁面彈框等）對(duì)用戶體驗(yàn)以及購物電商銷售率影響、人機(jī)交互等方面為主流研究方向，鮮少有電商用戶界面設(shè)計(jì)思路創(chuàng)新相關(guān)方面研究文獻(xiàn)。而國外文獻(xiàn)截至2017年，在電商界面設(shè)計(jì)方面均以理論層面研究居多，且多為基于社會(huì)學(xué)、傳播學(xué)、心理學(xué)、營銷學(xué)等跨學(xué)科性研究[2]，與當(dāng)下國內(nèi)大流研究方向異曲同工，同樣鮮少有研究者以“生鮮電商+界面設(shè)計(jì)”為關(guān)鍵詞并結(jié)合實(shí)例分析為文獻(xiàn)主要研究方向。

而在電商App界面作為與消費(fèi)者直接溝通的橋梁，其傳遞出的視覺體驗(yàn)，價(jià)值以及服務(wù)思維的體驗(yàn)，直接影響著該App的發(fā)展趨勢(shì)。且在生鮮App這類電商平臺(tái)中，有效提升電商視覺品質(zhì)與流量轉(zhuǎn)化體系以及消費(fèi)者的購買體驗(yàn)[3]有著直接的聯(lián)系，想要進(jìn)一步提升生鮮電商平臺(tái)品牌效應(yīng)，打造高質(zhì)量流量轉(zhuǎn)化體系并提升消費(fèi)者在生鮮電商的復(fù)購率，針對(duì)UI界面設(shè)計(jì)設(shè)計(jì)思路進(jìn)行研究更有了多層次的必要性。

（二）國內(nèi)生鮮電商UI界面設(shè)計(jì)現(xiàn)狀

何為以用戶思維為導(dǎo)向的設(shè)計(jì)思維？是將設(shè)計(jì)思路過程中‘設(shè)計(jì)者身份首先轉(zhuǎn)換為‘使用者。被譽(yù)為Ajax之父的Jesse James Garrett認(rèn)為，“用戶體驗(yàn)是指‘產(chǎn)品如何與外界發(fā)生聯(lián)系并發(fā)揮作用的，也就是人們?nèi)绾巍佑|和‘使用它”[4]?！皠?chuàng)建吸引人的、高效的用戶體驗(yàn)的方法被稱為以用戶為中心的設(shè)計(jì)（user-centered design）”[5]。以用戶為中心，以用戶使用思維為導(dǎo)向，才能使交互設(shè)計(jì)成為精神文化的體現(xiàn)，市場(chǎng)的細(xì)分使設(shè)計(jì)越來越關(guān)注不同消費(fèi)群體的需求，使設(shè)計(jì)成為越來越貼心的服務(wù)。

目前大部分生鮮App的UI界面以生鮮種類進(jìn)行區(qū)分，以大勢(shì)的河馬生鮮、多點(diǎn)App等生鮮App，均以如蔬菜類、肉蛋類等進(jìn)行消費(fèi)者的購買引導(dǎo)以及產(chǎn)品的展示，使得產(chǎn)品種類清晰，選擇與購買目標(biāo)生鮮的過程相對(duì)標(biāo)準(zhǔn)化。但是與此同時(shí)，設(shè)計(jì)者以展現(xiàn)賣方所有的全部產(chǎn)品作為首要設(shè)計(jì)思路，而沒有從消費(fèi)者角度進(jìn)行用戶思維分析，導(dǎo)致其生鮮購買的同時(shí)不夠定制化、人性化，App服務(wù)不夠貼心化的問題。

以當(dāng)下較為從消費(fèi)者角度而言，在飲食問題中，往往最先考慮的問題應(yīng)當(dāng)是由“吃什么”至“買什么”再至“怎么制作以及購買量的多少”，而目前生鮮電商市場(chǎng)UI界面設(shè)計(jì)的整體思路卻是以“買什么”至“買多少”，且“吃什么”“怎么制作”則是完全沒有涉及，這整體App使用流程與用戶的生鮮購買習(xí)慣的錯(cuò)位，體現(xiàn)了當(dāng)下生鮮電子商務(wù)UI界面設(shè)計(jì)思維與‘以用戶使用思維為導(dǎo)向的設(shè)計(jì)思維與“以用戶為中心”的重要設(shè)計(jì)理念相駁。

二、以用戶思維為導(dǎo)向的生鮮App用戶使用需求分析

在當(dāng)代快節(jié)奏的、移動(dòng)電子商務(wù)逐漸普及的生活中，許多用戶人群急需一些能夠使其用最少的腦力以及最方便的操作去幫助其更好，更快，更方便的處理生活中的各種瑣事。其中以生鮮App為例，一方面是“民以食為天”，另一方面生鮮電子商務(wù)類App發(fā)展相較于其他類別電子商務(wù)發(fā)展較為落后，市場(chǎng)前景較大。

在生鮮移動(dòng)電子商務(wù)中，用戶需求點(diǎn)往往包含菜品質(zhì)量、物流配送、售后服務(wù)以及買食材時(shí)糾結(jié)的將要制作的菜品的不確定性的解決、想要制作的菜品需要進(jìn)入其他App進(jìn)行食譜查詢，過程較為煩瑣等多個(gè)方面。而從賣方考慮，如何賣出更多的產(chǎn)品，通過更好的人機(jī)交互體驗(yàn)從而更大程度的增加用戶使用黏性，也是UI界面設(shè)計(jì)需要考慮的重要因素的一部分。

從基礎(chǔ)UI界面設(shè)計(jì)元素中，首先從整體界面色相而言，作為食品類App，其UI界面色調(diào)應(yīng)偏向于暖色為主，以給予消費(fèi)者及用戶溫馨感并起到提升人們感性情緒，促進(jìn)其食欲以及購買欲的作用。從界面使用形狀而言，應(yīng)以柔和的曲線形，如曲線形、圓形、圓角矩形等形狀為主，以減少棱角帶給用戶的攻擊性視覺感受。設(shè)計(jì)者往往需要在以上用戶使用需求分析及基礎(chǔ)元素范圍確定后，再進(jìn)行以用戶使用思維為設(shè)計(jì)導(dǎo)向的UI界面設(shè)計(jì)。

三、以用戶思維為導(dǎo)向的生鮮App的UI界面設(shè)計(jì)思路分析

在用戶使用需求分析及基礎(chǔ)元素范圍確定后，需確定用戶使用的思路、順序以及所要制作的UI界面將要解決用戶何種需求。其中，用戶需求中‘買食材時(shí)糾結(jié)的將要制作的菜品的不確定性、‘菜品制作流程不清晰需要多方查詢以及‘更好的人機(jī)交互體驗(yàn)從而更大程度的增加用戶使用黏性為UI界面設(shè)計(jì)師需要重點(diǎn)解決的問題。

‘買食材時(shí)糾結(jié)的將要制作的菜品的不確定性這一問題解決過程中，首先需要各個(gè)用戶的飲食差異性，這就需要進(jìn)行用戶調(diào)查，故在進(jìn)入主頁面之前，應(yīng)先有一歡迎界面（即用戶飲食習(xí)慣調(diào)查界面）。同時(shí)，后臺(tái)應(yīng)經(jīng)過大數(shù)據(jù)分析，確定該用戶的飲食習(xí)慣大方向并在后期進(jìn)行推送。區(qū)別與傳統(tǒng)生鮮電子移動(dòng)商務(wù)，為更好解決用戶‘吃什么的問題，應(yīng)將首頁的食材分類轉(zhuǎn)化為菜品分類，即由肉類、蔬菜類等分類轉(zhuǎn)為川菜類、粵菜類等，更加直接、直觀地讓用戶感受到該界面設(shè)計(jì)真切站在用戶角度、渴望最大程度上幫助平臺(tái)用戶解決問題的意圖;‘菜品制作流程不清晰需要多方查詢這一問題解決方法，可以將每個(gè)菜品的購買界面中配置該菜品的制作流程以及制作所需食材，做到買菜、教做菜一體化，節(jié)省用戶切換其他App的時(shí)間，一定程度上也可以吸引更多其他想要學(xué)習(xí)制作菜肴的用戶;‘更好的人機(jī)交互體驗(yàn)從而更大程度的增加用戶使用黏性這一問題解決中，可參照‘小紅書‘微信等成功App，增設(shè)圈子界面，給予用戶充分的飲食記錄以及系統(tǒng)已有菜品以外的菜品分享、學(xué)習(xí)的空間，以增加其在食來優(yōu)的人機(jī)交互體驗(yàn)，提升食來優(yōu)用戶的使用黏性。以以上的用戶使用思維進(jìn)行UI界面設(shè)計(jì)，可以更好地滿足用戶在使用生鮮移動(dòng)電子商務(wù)過程中的各類需求。

四、設(shè)計(jì)實(shí)現(xiàn)——以食來優(yōu)App為例的UI界面設(shè)計(jì)分析

（一）食來優(yōu)App的UI界面涉及介紹以及界面設(shè)計(jì)思維概念的轉(zhuǎn)變創(chuàng)新

食來優(yōu)App的UI界面設(shè)計(jì)一改傳統(tǒng)生鮮電商的分類模式，通過菜系、菜譜引導(dǎo)用戶購買食品。平臺(tái)針對(duì)使用人群進(jìn)行創(chuàng)新設(shè)計(jì)的同時(shí)，通過大數(shù)據(jù)智能分析，推薦符合用戶需求的菜譜，通過不同的需求設(shè)置如安全溯源、口味菜系、食材用量、兒童營養(yǎng)、健身減脂等滿足用戶個(gè)性化定制目標(biāo)。界面通過完整準(zhǔn)確的食材清單，可為客戶提供中長期系統(tǒng)化的食譜方案計(jì)劃，同時(shí)提供食材打包配送，甚至半加工服務(wù)，滿足對(duì)象人群便捷性需求，并一定程度上引導(dǎo)人們合理健康的飲食方式。整個(gè)界面設(shè)計(jì)流程以用戶思維為導(dǎo)向，一站式解決用戶每天吃什么、怎么吃、哪里買的世紀(jì)難題。

傳統(tǒng)生鮮電商App的界面設(shè)計(jì)中二級(jí)分支往往只有‘首頁‘購買界面，‘購物車以及‘我的四個(gè)元素，食來優(yōu)界面設(shè)計(jì)中則多添加了用戶調(diào)查界面（歡迎界面）以及圈子界面，以除了讓消費(fèi)者更好的體驗(yàn)一站式解決‘吃什么、怎么做、買多少的問題，更能將生活中飲食日常及體驗(yàn)與互聯(lián)網(wǎng)飲食購買形成一個(gè)循環(huán)回路，以更高的給消費(fèi)者以良好的被服務(wù)感受。

（二）食來優(yōu)交互頁面特點(diǎn)介紹

食來優(yōu)App的交互界面整體以暖橘色為主色調(diào)，以帶給消費(fèi)者以溫暖貼心、有食欲以及食物購買欲的視覺及心理感受，其中多用圓形的界面元素，盡量給消費(fèi)者以無攻擊、強(qiáng)烈目的感受的消費(fèi)體驗(yàn)。除基本UI界面設(shè)計(jì)元素外，將以食來優(yōu)為例的UI界面設(shè)計(jì)思維——以用戶思維為導(dǎo)向的UI界面設(shè)計(jì)進(jìn)行分析。

1. 歡迎界面

為后期平臺(tái)對(duì)消費(fèi)者能夠推送更加有針對(duì)性的、個(gè)性化的食材購買推薦。在歡迎界面中，將針對(duì)平臺(tái)使用者進(jìn)行問卷調(diào)查，就“偏愛的菜系口味”“現(xiàn)在的職業(yè)身份”“飲食喜歡與功能呢偏向性”以及“日常飲食分量”等問題進(jìn)行調(diào)查，供消費(fèi)者進(jìn)行選擇。這對(duì)后期平臺(tái)對(duì)消費(fèi)者推送食材、合適菜譜起著至關(guān)重要的作用。

2. 食來優(yōu)首頁

首頁區(qū)別傳統(tǒng)生鮮食材電商的食材分類模式，以創(chuàng)新逆向思維，先根據(jù)消費(fèi)者飲食習(xí)慣、喜好進(jìn)行推薦菜品，再根據(jù)菜品進(jìn)行食材的推薦與購買，直接從用戶考慮的中心問題 ‘吃什么來給予用戶引導(dǎo)。

3. 購買頁面

購買界面中，除傳統(tǒng)電商平臺(tái)所已有的食材介紹以及購買鏈接以外，更加入了該菜品的烹飪方法，節(jié)省了人們購買食材后再次搜索食譜的時(shí)間，在平臺(tái)解決“吃什么”這一難題的同時(shí)，進(jìn)一步解決了“怎么做”第二難題，為廣大想進(jìn)廚房又沒有足夠生活料理經(jīng)驗(yàn)的年輕人提供了強(qiáng)有力的幫助，為每天要做飯的家庭主婦一類人士開拓了更多不同可嘗試的菜品與方便的食材購買渠道。

4. 圈子分享界面

圈子分享界面，用于平臺(tái)消費(fèi)者相互分享美食新做法、新吃法以及分享自己在飲食中收獲的滿足、打卡等（如美食博主教學(xué)新做法新吃法、家庭家長記錄自己孩子的吃飯日常以及健身人士每天的輕食打卡等）。在食來優(yōu)平臺(tái)感受美食為生活帶來的滿足與樂趣。當(dāng)下App用戶往往需要一定的分享欲望才會(huì)對(duì)該軟件有更強(qiáng)的歸屬感，消費(fèi)粘性也會(huì)大大提升。

食來優(yōu)為熱愛的以及廣大有健康生活、好好吃每頓飯的消費(fèi)者提供了一個(gè)自我管理的平臺(tái)。打卡界面中，以日歷為打卡記錄全況（圖7）。點(diǎn)開日歷中日期，將自動(dòng)跳轉(zhuǎn)當(dāng)天飲食情況以及圖片。

五、結(jié)語

綜上所述，除基礎(chǔ)的視覺體驗(yàn)（界面整體色調(diào)、使用元素等）外，UI界面的設(shè)計(jì)思維也是需要考慮的重要因素。UI界面設(shè)計(jì)需要綜合考慮用戶的喜好需求，同時(shí)以用戶思維為導(dǎo)向進(jìn)行。重視App的界面設(shè)計(jì)的設(shè)計(jì)思維、思路，可以更加定制化、人性化地為用戶提供消費(fèi)服務(wù)，使得用戶使用時(shí)更具針對(duì)性、歸屬感，達(dá)到更加完美的人機(jī)交互體驗(yàn)，更好地滿足消費(fèi)者的使用需求及心理訴求。

參考文獻(xiàn)：

[1] 張金茹，朱珊珊.淺談UI設(shè)計(jì)中用戶交互體驗(yàn)的視覺思維[J].河南理工大學(xué)：居舍，2019：198.

[2] 孫思雯.生鮮電商品牌視覺設(shè)計(jì)與傳播策略研究.

[3] 晏艷.UI設(shè)計(jì)中用戶交互體驗(yàn)的視覺表現(xiàn)[J].西部皮革，2019，41（01）：109-110.

[4] 付昕.UI設(shè)計(jì)中用戶交互體驗(yàn)的視覺思維[J].科技展望，2016，26（14）.

[5] 楊莉莉.以用戶體驗(yàn)為導(dǎo)向的電商購物網(wǎng)站界面設(shè)計(jì)研究[D].華東理工大學(xué)，2014.