admin 管理员组文章数量: 1087139
2024年5月7日发(作者：java和编程的区别)
视觉设计
ARTEDUCATIONRESEARCH
探究移动端购物平台的UI设计
——以小米有品为例
□孙嘉琪
摘
杨杰
要：当前，互联网行业正在飞速发展，人们的购物形式已经不仅仅局限于传统的线下购物。2003年，淘宝网的创立使人们体
验了互联网时代下更加便捷的购物方式。伴随着智能手机以及大数据技术的飞速发展，中国进入了电商购物新时代。智能手机的广
泛应用使互联网不仅作为一个应用工具而存在，而且成为构成生活的基本要素，手机中的各类App也在不断地为人们提供便利。该
文以小米有品App为例，从设计理念、色彩搭配、元素构建、交互体验等方面分析其界面设计，并总结出一些移动端电商购物App界面
设计的发展思路和设计经验。
关键词：互联网精品电商智能UI设计
一、移动端电子商务的发展背景
随着智能手机的普及，线下实体店与PC（Personal
Computer，个人计算机）端电商的销量逐渐受到影响。智能手机
以其更加便捷的形式，为电子商务的转型发展带来了新的生机，
使人们的衣食住行在智能设备的引领下进入了无线互联的新时
1]
代
[
。作为电商服务终端的App对于电商企业的发展有着重要
米生态链体系，用小米模式制造生活消费品，将小米的“极致性
价比”理念延伸到生活家居领域。除了小米、米家及生态链品
牌，小米有品还引入拥有设计、制造、销售、物流、售后等完整链
条能力的第三方品牌产品，扶持第三方品牌发展，共同服务客
户。
小米有品自创立以来，无论是在产品自身的设计方面还是
在电商平台的界面设计方面，都秉持着极简的设计风格。2020
年，小米有品决定重新塑造品牌形象，推出了新的品牌标志（图
1）。在此次品牌升级中，小米有品在“品”字的设计上添加了全
新的视觉符号，使整体更富有设计感，图形也变得更具有趣味
性。设计师利用了视错觉的原理，利用多个简约的四边形组成
了一个抽象的“品”字造型，使设计整体的可延展性更强。在字
体设计上，设计师将原标志中的衬线体改为无衬线体。
2.色彩搭配
小米有品给人们的直观感受是一个充满科技感且简约的精
品电商购物平台。新版标志的配色主要采用了红色与金色。红
色富有热情，金色代表高品质。这样的配色设计代表了小米有
品对科技与美的追求。
移动端App界面整体的色彩搭配无疑是对用户视觉影响最
大的一个因素。优秀的色彩搭配不仅可以突出设计重点，而且
可以在无形之中促进用户提升浏览效率。小米有品整体界面的
色彩搭配比较简洁、精致。App色彩以淡黄色、白色为主，并搭配
偏冷色调的图标。由此可见，小米有品App对色彩的选择是建立
在对受众群体的精准定位的基础上的。在受众定位方面，小米
的影响。很多过去集中于在PC端的发展大型互联网电子商务公
司也纷纷向移动端拓展业务。
在此背景下，各大电商平台各显身手，精品电商正在成为电
商行业发展的“新赛道”。一方面，以往的货架式电商面临着线
上流量增长乏力的困境；另一方面，社会的发展呼唤着新的消费
2]
形态的出现
[
。人们更希望在能够省心省力的情况下，买到性价
比更高、质量更好的产品，精品电商随之应运而生。
二、电商UI的发展现状
随着电商市场的不断扩大，社会对移动端电商App的需求日
益增长。同时，随着社会审美水平的不断提升，用户对于电商
App（手机软件）的UI设计的要求越来越高。目前，我国部分电商
的UI设计水平不高，一些设计师往往只根据电商的基本功能开
展设计，在一定程度上忽视了不同用户的需求。
三、移动端购物平台的UI设计——以小米有品为
例
1.设计理念
小米有品成立于2017年，其既是依托于小米集团的精品购
物平台，又是小米集团“新零售”策略的一环。小米有品依托小
43
图1
有品App作为精品购物类App，
其主要受众是具有一定购买力
的中青年男性。在色彩方面，
设计师采用了具有科技感的色
彩，冷峻的色彩基调辅以微微
的暖色，刚毅而不失温暖。同
时，设计师在App的不同浏览
界面使用了相同色系，使整体
色彩具有一致性。这可以弱化
强烈色差带来的对比，使用户
的浏览过程更加清晰，从而提
高用户的浏览效率，做到功能
与形式相统一。
3.元素构建
在网络购物出现之前，用
户大都有实体店购物的经历。
因此，购物App中的图形元素
往往会带有商场购物的影子。
设计师多利用用户较为熟悉的
购物活动，在交互界面中模拟
购物场景，并制定一系列围绕
购物活动的任务，完成购物交
互体验设计。
在小米有品App交互界面
整体元素的信息组织过程中，
设计师运用大量具有隐喻性的
元素设计，以缓解顾客在购物
过程中的疏离感。设计师对金刚区的设计采用了圆形图标，凸
显关键信息，并且给人一种亲切、柔和的感觉。图2分别是小米
有品App日常金刚区的设计与“618”购物节金刚区的设计。
4.交互体验
无论是工业设计还是交互设计，目前设计的主流理念都是
3]
以人为本，因此，电商App的UI设计针对的目标也就是人
[
。不
图2
图3
设计方面十分用心。App底部Tab（标签式）导航栏分别对应五个
模块，即“猜你喜欢”“分类”“品味”“购物车”“我的”。如，“品味”
这一模块就像是一个大型的社交分享平台，用户可以在其中分
享自己的体验，从而增加用户的黏合性与忠诚度。“我的”模块中
的“游戏互动”里新增了“小米庄园”游戏，以游戏的形式强化了
用户在使用App时的交互乐趣，可提升用户的App使用频率。
同类型的人决定着不同的设计目标与设计风格。在App的UI设
计中，设计师可以从三个角度考虑人机交互设计，即视觉、听觉、
触觉。
小米有品App在交互体验设计方面，充分地从用户的角度出
发，使用户可获得及时的反馈，让用户在使用App时能够得到良
4]
好的交互体验
[
。小米有品App在视觉交互的动画设计和色彩
四、小米有品App中的UI设计启发
1.明确的设计理念
随着小米的业务拓展至生活电商领域，人们在提到小米时
往往会联想起其空气净化器、电饭煲甚至是床上用品、行李箱等
产品。目前，不少用户在决定购买智能设备或家用电器时会先
通过小米有品寻找相似款产品作为参照对比，这体现了小米的
44
视觉设计
ARTEDUCATIONRESEARCH
精品电商模式的发展成果。在UI设计中，设计师也需要有明确
5]
的设计理念。作为智能设备与大众沟通的桥梁
[
，UI设计需要有
惠的完美体验。
五、未来展望
通过对小米有品App的分析可以看出，要想在百花齐放的互
联网电商平台中立足，设计师必须始终将用户的需求与体验感，
作为产品设计的出发点与落脚点，同时要突出特点，设计出符合
市场预期与用户心理的App。设计师只有将设计功能与外观结
合，增强人机交互的舒适性，才能提高用户对品牌的信赖度。
参考文献：
[1]朱颖博.移动端UI设计[M].北京：电子工业出版社，2017.
[2]吴亦娇，赵子健.“互联网+”背景下我国电子商务发展研究[J].宏观
经济管理，2017（2）：71-74.
[3]吕舒婷，孙琦.视觉传达中的可持续性设计[J].美术教育研究，2018
（24）：46-47，49.
[4]祝遵凌.生态设计[J].设计，2018（21）：29.
[5]丁昌辉，曹加杰.驳岸的人性化设计比较研究——中国传统驳岸和
现代驳岸设计的比较研究[J].美术教育研究，2018（24）：67，69.
[6]刘嘉欣，施爱芹“言.味调料”品牌推广设计[J].大众文艺，2018
（23）：88-89.
[7]胡雪歌，孔德金，刘雅迪.从视知觉角度分析公共艺术带来的动态
体验[J].美术教育研究，2019（1）：51-53.
（作者单位：南京林业大学艺术设计学院）
编辑缪健
明确的设计风格，为用户提供更便捷的交互方式与更高的交互
效率。
2.主次分明的色彩布局
色彩是设计传递信息的重要视觉元素。在小米有品App的
色彩布局中，设计师一般在关键位置巧妙地应用主题的主色调，
突出产品的重点信息和内容，通过对关键色的运用引起用户的
6]
注意，从而提高用户的购物效率，增强用户的购物体验
[
。此外，
小米有品App界面设计的色彩搭配也充分彰显出充满科技感的
品牌理念。设计师需要合理应用色彩影响用户的心理，通过创
建适当的配色方案，让UI设计主次鲜明、重点突出，从而达到促
进用户购买产品的设计目的。
3.人文关怀与互动
UI设计是对互联网产品中的人机交互、逻辑思维以及界面
美观设计的总称。在UI设计中，设计师必须考虑到用户不同阶
段的需求，如对设计可用性的需求、对设计使用愉悦程度的需求
等，让用户在使用App的过程中体验到人文关怀，获得更有效
[7]
的互动体验。小米有品在用户的购物过程中设置了很多交互环
节，通过人性化的交互设计，将人机互动的结果用视觉语言呈现
出来。设计师在设计购物类App时，可以结合品牌背景和主题设
计具有品牌代入感的小游戏，通过做任务、提供奖励等形式鼓励
用户积极使用App，让用户在购物的同时获得游戏互动与实际优
（上接第42页）
道路上不断尝试着结合新的材料，如米浆、树脂、油脂、胶脂等，
2]
调制出软硬程度不同的蜡，以便获得更好的画面效果
[
。
而生。在服装设计中，设计师在设计新的蜡染装饰图案时，首先
要保持图案整体造型的平衡美感，避免中心偏移，缺乏稳定性。
其次，设计师要突出个性，可以着重于单独图案的设计，也可以将
子元素打破、重塑，或以新的造型呈现，使蜡染图案更加个性、时
尚。设计师亦可加入新的元素，赋予图案新的活力与内涵，实现
传统工艺与现代文化的结合。最后，设计师要注重蜡染图案在服
装款式上的整体性，装饰部位、色彩配置、材料应用、工艺制作等
要取得和谐一致的效果。设计师只有在遵循传统的同时与时俱
进，才能使蜡染工艺适应时代发展的潮流，更具生命力。
随着社会的发展，现代人在探寻未来的过程中不能遗忘优
秀的历史文化。蜡染工艺与服装工艺设计的结合需要实践的过
程。三维打印技术、AI视听技术以及更多先进的视觉表现方法，
都是当下科技发展的产物，设计师可将其尝试用于服装工艺设
计领域。对优秀传统文化的传承必须与科技结合，才能拥有新
的生命力，使时代赋予传统文化新的内涵，从而推动传统文化进
一步延续、发展。
参考文献：
[1]贺琛.苗族蜡染[M].昆明：云南大学出版社，2006.
[2]以蜡为艺-传统蜡染与现代蜡染（一）[EB/OL].https：//.
com/a/139017715_778599.
（作者单位：南宁师范大学）
编辑缪健
二是纤维材质。传统的蜡染大部分是在白色棉布上创作
的，也有的是用麻布创作的，但是麻的纤维较粗，固色效果并不
如棉料理想。对此，彩色蜡染艺术家刘子龙打破常规，在纸张、
皮革、麻、毛、丝、化纤等多种织物上使用蜡染作画，都取得了突
破性进展。路易威登2016秋冬系列发布的蜡染牛仔套装（图
3），利用蜡与靛蓝相结合的技术，使蜡在丹宁面料上产生独特的
龟裂质感。这一技术还被用于超轻小羊皮面料，凸显出精湛的
工艺水平，体现了传统与现代的创新结合。当今时代，人们往往
追求时尚潮流，衣服的品类繁多，材质更是随着科技的发展不断
创新。这就要求蜡染技艺的发展需要适应科技的发展，创作者
要不断尝试新材质，改进工艺器具和涂染方法。这样才能丰富
蜡染工艺在服装上的表现形式，更好地发挥优秀传统艺术文化
的价值，吸引消费者的注意力，推动这项民族文化遗产的传承、
发展。
3.创新蜡染图案
随着人们审美情趣的改变，个性化的审美追求成为主流。服
装的图案不再一味地追求规律、对称，而是更多依据个人的喜好
而设计。基于此，为了满足消费者的需求，设计师在表现优秀传
统文化时应该与时俱进，推陈出新。对于蜡染图案的创新，设计
师应不再局限于以往的动物纹样、植物纹样等，而应当结合时下
流行的设计方式，解构原始的素材图案。如，山东工艺美术学院
潘鲁生的蜡染创作，笔锋不着画布，凌空描线点彩，让画面随律动
45
版权声明：本文标题：探究移动端购物平台的UI设计——以小米有品为例 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1715073312a685562.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论