以用户思维为设计导向的生鲜电商UI界面设计研究——以食来优APP为例

2021

年

6

月第18卷第6期湖北经济学院学报(人文社会科学版)Journal

of

Hubei

University

of

Economics(Humanities

and

Social

Sciences)Jun.2021Vol.18

No.6以用户思维为设计导向的生鲜电商UI界面设计研究—以食来优APP为例—汪

鸿，陈锦渝（湖北经济学院法商学院，湖北武汉430205）摘

要：随着智能手机的普及，消费者对用户交互体验需求不断升级,故在虚拟UI设计以及UI设计思维的发展与

转变以及用户应用过程当中也不断地得到发展，而本文主要的针对了生鲜App用交交体体验以及其UI页面设计思维

及方向之间的联系进行了详细的阐述，并且以虚拟生鲜购物App食来优UI界面设计进行分析，进一步阐释了在UI页

面设计当中引用以用交思维为导向普设计思维方式普重要意义，同时还预测了在UI交体体验设计当中应用该设计思

维普作用。关键词:生鲜电子商务;UI设计；用交思维随着我国智能手机普及，手机App不断创新开发，各式

软件更新升级换代速率不断上升《而在UI设计当中应用视觉

思维能够使得设计出来的软件页面更为丰富,更易被人类的

大脑所接受|1］，同时还能够满足人们对于软件所要求的个性

化的要求,故在个性化研究以及UI设计用户交互体验正在不

断被要求深入与升级，这对UI界面设计更是提出了更高的要

求，以保障用户良好的视觉以及使用体验，此时，想要在众多

App中脱颖而出、受到关注并提升下载使用率,UI界面设计

的定制化及“秘书式、保姆式”服务化成为重要吸引用户的因

直接的联系，想要进一步提升生鲜电商平台品牌效应，打造高

质量流量转化体系并提升消费者在生鲜电商的复购率,

针对

UI界面设计设计思路进行研究更有了多层次的必要性。（二）国内生鲜电商UI界面设计现状何为以用户思维为导向的设计思维？是将设计思路过程

中'设计者'身份首先转换为'使用者’《被誉为Ajax之父的

Jesse

James

Garrett认为，“用户体验是指'产品如何与外界发

生联系并发挥作用'的，也就是人们如何'接触'和'使用'它”|41《

"创建吸引人的、高效的用户体验的方法被称为以用户为中心

的设计（user-centered

design）”|51《以用户为中心，以用户使用

素,尤其是生活类App,如购物App遥而此背景下界面设计者

的设计思路应该由'设计者'首先转为'使用者’，以用户思维

为导向的设计思维在当代UI界面设计中显得尤为重要。—、研究背景（一）国内外生鲜电商UI界面设计研究现状截至2019年，国内以“电子商务+界面设计”以及“电子

商务+视觉”等相关关键词检索出的文献资料相对较少,且主

要以博硕论文为主。而“生鲜+界面设计”“农产品+视觉”等类

关键词检索出的相关文献资料更是门可罗雀。在生鲜电商领

域,文献资料主要以针对农产品、生鲜的营销模式、手段、生鲜

冷链以及提升品牌力等方向的研究文献较多，而在网页、界面

设计领域又主要以拆分网页设计要素（如从单一的视觉符号、

整体色彩、页面弹框等）对用户体验以及购物电商销售率影

响、人机交互等方面为主流研究方向，鲜少有电商用户界面设

思维为导向，才能使交互设计成为精神文化的体现，市场的细

分使设计越来越关注不同消费群体的需求,

使设计成为越来

越贴心的服务。目前大部分生鲜App的UI界面以生鲜种类进行区分，

以大势的河马生鲜、多点App等生鲜App，均以如蔬菜类、肉

蛋类等进行消费者的购买引导以及产品的展示，使得产品种

类清晰，选择与购买目标生鲜的过程相对标准化《但是与此同

时,设计者以展现卖方所有的全部产品作为首要设计思路，而

没有从消费者角度进行用户思维分析,

导致其生鲜购买的同

时不够定制化、人性化,App服务不够贴心化的问题。以当下较为从消费者角度而言,在饮食问题中，往往最先

考虑的问题应当是由“吃什么”至“买什么”再至“怎么制作以

及购买量的多少”，而目前生鲜电商市场UI界面设计的整体

思路却是以“买什么”至“买多少”,且“吃什么”“怎么制作”则

是完全没有涉及,这整体App使用流程与用户的生鲜购买习

惯的错位，体现了当下生鲜电子商务UI界面设计思维与’以

用户使用思维为导向’的设计思维与“以用户为中心”的重要

设计理念相驳。二、以用户思维为导向的生鲜App用户使用需求分析在当代快节奏的、移动电子商务逐渐普及的生活中，许多

用户人群急需一些能够使其用最少的脑力以及最方便的操作

去帮助其更好，更快，更方便的处理生活中的各种琐事。其中

计思路创新相关方面研究文献。而国外文献截至2017年，在

电商界面设计方面均以理论层面研究居多，且多为基于社会

学、传播学、心理学、营销学等跨学科性研究|21,与当下国内大

流研究方向异曲同工，同样鲜少有研究者以“生鲜电商+界面

设计”为关键词并结合实例分析为文献主要研究方向《而在电商App界面作为与消费者直接沟通的桥梁，其传

递出的视觉体验，价值以及服务思维的体验，直接影响着该

App的发展趋势。且在生鲜App这类电商平台中，有效提升

电商视觉品质与流量转化体系以及消费者的购买体验|31有着

基金项目：2020年省级大学生创新创业项目"新型定制生鲜电商平台食来优"（s2）作者简介：汪鸿（1989-），女,湖北天门人，湖北经济学院法商学院讲师,研究方向为艺术设计、工艺美术；陈锦渝（2000-）

女，湖北武汉人，本科在读,研究方向为艺术类。66・

以生鲜App为例，一方面是“民以食为天”，另一方面生鲜电

子商务类App发展相较于其他类别电子商务发展较为落后,

市场前景较大《在生鲜移动电子商务中，用户需求点往往包含菜品质量、

物流配送、售后服务以及买食材时纠结的将要制作的菜品的不

确定性的解决、想要制作的菜品需要进入其他App进行食谱

查询,过程较为烦琐等多个方面。而从卖方考虑，如何卖出更

多的产品，通过更好的人机交互体验从而更大程度的增加用

户使用黏性，也是UI界面设计需要考虑的重要因素的一部分。从基础UI界面设计元素中，首先从整体界面色相而言，

作为食品类App，其UI界面色调应偏向于暖色为主，以给予

消费者及用户温馨感并起到提升人们感性情绪，促进其食欲

以及购买欲的作用。从界面使用形状而言，应以柔和的曲线

形，如曲线形、圆形、圆角矩形等形状为主，以减少棱角带给用

户的攻击性视觉感受。设计者往往需要在以上用户使用需求

分析及基础元素范围确定后，再进行以用户使用思维为设计

导向的UI界面设计。三、 以用户思维为导向的生鲜App的UI界面设计思路

分析在用户使用需求分析及基础元素范围确定后，需确定用

户使用的思路、顺序以及所要制作的UI界面将要解决用户何

种需求。其中，用户需求中'买食材时纠结的将要制作的菜品

的不确定性'、'菜品制作流程不清晰需要多方查询’以及'更

好的人机交互体验从而更大程度的增加用户使用黏性'为UI

界面设计师需要重点解决的问题。'买食材时纠结的将要制作的菜品的不确定性'这一问题

解决过程中,首先需要各个用户的饮食差异性,这就需要进行

用户调查,故在进入主页面之前，应先有一欢迎界面（即用户

饮食习惯调查界面）。同时，后台应经过大数据分析,确定该

用户的饮食习惯大方向并在后期进行推送。区别与传统生鲜

电子移动商务，为更好解决用户’吃什么’的问题，应将首页的

食材分类转化为菜品分类，即由肉类、蔬菜类等分类转为川菜

类、粤菜类等，更加直接、直观地让用户感受到该界面设计真

切站在用户角度、渴望最大程度上帮助平台用户解决问题的

意图；’菜品制作流程不清晰需要多方查询'这一问题解决方

法,可以将每个菜品的购买界面中配置该菜品的制作流程以

及制作所需食材,做到买菜、教做菜一体化，节省用户切换其

他App的时间，一定程度上也可以吸引更多其他想要学习制

作菜肴的用户；’更好的人机交互体验从而更大程度的增加用

户使用黏性'这一问题解决中,可参照'小红书’’微信'等成功

App,增设圈子界面，给予用户充分的饮食记录以及系统已有

菜品以外的菜品分享、学习的空间,以增加其在食来优的人机

交互体验，提升食来优用户的使用黏性。以以上的用户使用

思维进行UI界面设计，可以更好地满足用户在使用生鲜移动

电子商务过程中的各类需求《四、

设计实现一以食来优App为例的UI界面设计分析（一）食来优App的UI界面涉及介绍以及界面设计思维

概念的转变创新食来优App的UI界面设计一改传统生鲜电商的分类模

式，通过菜系、菜谱引导用户购买食品。平台针对使用人群进

行创新设计的同时,通过大数据智能分析,推荐符合用户需求

的菜谱，通过不同的需求设置如安全溯源、口味菜系、食材用

量、儿童营养、健身减脂等满足用户个性化定制目标。界面通

过完整准确的食材清单,可为客户提供中长期系统化的食谱

方案计划,同时提供食材打包配送,甚至半加工服务,满足对

象人群便捷性需求袁并一定程度上引导人们合理健康的饮食

方式《整个界面设计流程以用户思维为导向，一站式解决用户

每天吃什么、怎么吃、哪里买的世纪难题。传统生鲜电商App的界面设计中二级分支往往只有'首

页’’购买界面’，’购物车’以及'我的’四个元素，食来优界面

设计中则多添加了用户调查界面（欢迎界面）以及圈子界面，以

除了让消费者更好的体验一站式解决'吃什么、怎么做、买多

少'的问题，更能将生活中饮食日常及体验与互联网饮食购买

形成一个循环回路,以更高的给消费者以良好的被服务感受。A图1食来优App界面设计结构（二）食来优交互页面特点介绍食来优App的交互界面整体以暖橘色为主色调，以带给

消费者以温暖贴心、

有食欲以及食物购买欲的视觉及心理感

受，其中多用圆形的界面元素，尽量给消费者以无攻击、强烈

目的感受的消费体验。除基本UI界面设计元素外，将以食来

优为例的UI界面设计思维——以用户思维为导向的UI界面设计进行分析《1.

欢迎界面图1欢迎界面（1）图2欢迎界面（2）为后期平台对消费者能够推送更加有针对性的、 个性化的食材购买推荐《在欢迎界面中,将针对平台使用者进行问卷

调查,就“偏爱的菜系口味”“现在的职业身份”“饮食喜欢与功

能呢偏向性”以及“日常饮食分量”等问题进行调查,供消费者

进行选择《这对后期平台对消费者推送食材、合适菜谱起着至

关重要的作用《2.

食来优首页首页区别传统生鲜食材电商的食材分类模式，以创新逆

向思维，先根据消费者饮食习惯、喜好进行推荐菜品，再根据

・67・

菜品进行食材的推荐与购买，直接从用户考虑的中心问题

'吃什么'来给予用户引导。图6圈子分享界面5. 打卡界面-ii+s*q

smt-aai10■ttaf图3食来优首页B

-

~

Z.B

1.

K0*9・■甘百It

M

ITft

11

Hli

il

li3.购买页面1|

H

J)H

H-

n

Hn

n

itQ

4Bed用軽

MH.

Li

42!=g,

■用七汗狂畫:*图7饮食打卡界面(1)

图8打卡界面(2)食来优为热爱的以及广大有健康生活、好好吃每顿饭的

消费者提供了一个自我管理的平台。打卡界面中，以日历为打

卡记录全况(图7)遥点开日历中日期，将自动跳转当天饮食情

况以及图片。.

1X

+四七

JSXIlCN-mKlft-,启人殴■関，五、结语综上所述，除基础的视觉体验(界面整体色调、使用元素

等)外,UI界面的设计思维也是需要考虑的重要因素。UI界面

E£«h

V图4、5购买界面购买界面中,

除传统电商平台所已有的食材介绍以及购

买链接以外,更加入了该菜品的烹饪方法,节省了人们购买食

材后再次搜索食谱的时间，在平台解决“吃什么”这一难题的

同时，进一步解决了“怎么做”第二难题,为广大想进厨房又没

有足够生活料理经验的年轻人提供了强有力的帮助，为每天

要做饭的家庭主妇一类人士开拓了更多不同可尝试的菜品与

方便的食材购买渠道。设计需要综合考虑用户的喜好需求，同时以用户思维为导向

进行。重视App的界面设计的设计思维、思路，可以更加定制

化、人性化地为用户提供消费服务，使得用户使用时更具针对

性、归属感，达到更加完美的人机交互体验，更好地满足消费

者的使用需求及心理诉求。参考文献：[1]

张金茹，朱珊珊.浅谈UI设计中用户交互体验的视觉思维[J].河南

4.圈子分享界面圈子分享界面，用于平台消费者相互分享美食新做法、新

吃法以及分享自己在饮食中收获的满足、打卡等(如美食博主

教学新做法新吃法、家庭家长记录自己孩子的吃饭日常以及

健身人士每天的轻食打卡等)。在食来优平台感受美食为生活

带来的满足与乐趣。当下App用户往往需要一定的分享欲望

才会对该软件有更强的归属感,消费粘性也会大大提升。-68・理工大学:居舍,2019:198.[2]

孙思雯.生鲜电商品牌视觉设计与传播策略研究.[3]

晏艳.UI设计中用户交互体验的视觉表现[J].西部皮革,2019,41

(01):109-110.[4]

付昕.UI设计中用户交互体验的视觉思维[J].科技展望,2016,26

(14).[5]

杨莉莉.以用户体验为导向的电商购物网站界面设计研究[D].华

东理工大学,2014.