若米知识 > 电商 > 电商购物车设计

电商购物车设计

导读电商平面ui设计是什么?优质回答电商平面UI设计是指在电商网站或电商应用中的界面设计工作。平面设计师通过运用图形、颜色、排版和图像等元素,以便用户能够更加直观、方便地浏...

今天若米知识就给我们广大朋友来聊聊电商项目购物车模块,以下关于观点希望能帮助到您找到想要的答案。

电商平面ui设计是什么?

电商平面ui设计是什么?

优质回答电商平面UI设计是指在电商网站或电商应用中的界面设计工作。平面设计师通过运用图形、颜色、排版和图像等元素,以便用户能够更加直观、方便地浏览和购买商品。

电商平面UI设计的目标是提供用户友好的界面,使用户可以轻松地浏览产品信息、筛选商品、添加到购物车并进行结算等操作。其设计原则包括视觉吸引力、简洁明了、一致性、易用性等,以提升用户体验和增加转化率。

在进行电商平面UI设计时,设计师需要考虑以下要素:

1. 布局设计:合理分配页面空间,使得信息结构清晰,并保证不同页面之间的一致性。

2. 色彩搭配:选取适合品牌和产品的色彩搭配方案,以及能够吸引用户眼球的鲜明色彩。

3. 图片和图标设计:选择高品质的商品图片,并利用符号、图标等辅助元素提升用户体验。

4. 字体选择:选择易读、清晰的字体,并合理运用字体的大小、粗细、颜色等,以保证良好的阅读体验。

5. 按钮和交互设计:设计易于点击和操作的按钮,并合理安排交互元素的位置和动画效果。

为了进行学习规划和监测学习成果,我们可以以下方式进行:

1. 学习目标设定:明确你想在电商平面UI设计领域达到的水平和能力。

2. 学习资源搜集:寻找相关的学习资料、教程和视频等,以扩展你的知识和技能。

3. 制定学习计划:根据你的时间和能力安排,制定一个合理的学习计划,并设定每个阶段的目标。

4. 学习过程监测:定期检查你的学习进度和学习成果,根据反馈调整学习计划和方法。

5. 实践和项目经验:利用项目实践来验证你的学习成果,并从实践中不断积累经验和改进设计能力。

电商设计主要做什么

优质回答电商设计主要负责电商平台上商品信息的视觉呈现和用户体验优化,包括网站UI设计、商品展示设计、购物车设计、支付页面设计、电商设计banner图、电商主页设计等方面。

1、网站UI设计

负责网站整体的视觉设计,包括页面布局、颜色搭配、字体等,以提高网站的美观性和用户体验。

2、商品展示设计

负责展示商品的图片、价格、描述等信息,通过产品设计使其更能吸引用户眼球,带来更多的点击和转化。

3、购物车设计

负责购物车的功能、显示、操作、跳转等设计,以提高用户购物的便利性和购物车效率。

4、支付页面设计

负责结算流程的视觉整合设计,确保整个支付过程美观、友好和易懂,从而提高用户支付意愿和购物体验。即时设计是一款国产的专业级设计工具,能够为设计师提供电商相关的海量模板等,让设计师的设计灵感能够得到更好地迸发。

5、电商设计banner

电商规划banner图大小不一,文件也有必定的约束,这给电商规划师添加许多难度,布景色彩不能太花,banner图简单就好。案牍内容不能过多,不然会让人看着没有重点。banner图全体画面要对准产品中心,让顾客看着很有动力、很热闹、很尊贵、能引起顾客购买的感觉,才能达到banner图的效果。

6、电商主页设计

关于电商规划来说,主页便是添加销售机会,满足顾客需求。所以设计者要为中心产品规划好主页,首先要找到产品服务定位,再者处理顾客关怀的问题,然后有产品保证。之后要保证主页业务展示完整性,又要保证用户体验满意度,所以每个内容都要合理将流量导向对应的地址,在逐渐进行优化完善。

初识购物车的产品架构

优质回答天下熙熙皆为利来,天下攘攘皆为利往。 ——源于《史记·货殖列传》

很高兴有一个愉快的周末,因为每次我都有时间去调整和回顾一下走过的一周,应该说这一周还是很有意思的!

1、高考6月789日,一个六年前我曾经为之紧张,如今却淡然处之。当然,并不是说不是当事人,站着说话不腰疼,心态真地发生了微妙的变化;

2、工作上针对用户体验和交互设计,提出了一套初期的小程序迭代产品方案以及后期的重大功能增量式迭代,并且完整交付了产品的解决方案;

3、预研电商C端产品的最为核心功能——购物车,很激动但也不免一丝的担忧,之前确实没有对这方面有过接触,如果偏要说也就是平时网上购物时的一点渊源;

最为繁重的工作就是购物车的调研,其实难度主要集中在两点:

1、熟悉: 电商的购物车像极了商超提供的实体购物车的概念,至少初衷都是一样的,方便用户购物、优化用户的体验,最大化商业价值才是最根本的;

2、陌生: 电商的购物车是虚拟的概念,与实体的可见可得的购物车存在差异,不受时间、空间的限制,随意性增大的同时带来了人、物关系的弱化;

面对熟悉与陌生这一组矛盾,产品经理的思维能力就显得格外重要, 模块化、过程化了整个购物车结构和流程:

1、传统购物车:购物车是指超市大型自选商场中,顾客用于暂时存放所选商品的一种手推车。通常是有几层,可以存放不同的物品,有些还可以载小孩。

2、网上购物车:买家可以像在超市里购物一样,随意添加、删除商品,选购完毕后,统一下单网上商店的购物车要能过跟踪顾客所选的的商品,记录下所选商品,还要能随时更新,可以支付购买。

——百度百科

第一要素:用户需求驱动

第二要素:业务发展驱动

两点背景我就不老生常谈了,网上有各种版本,比我写地好的多,可以去参阅。看了那多的背景分析,无非就是两个关键词:用户需求、业务需要。

试用体验了主流电商的,购物车的功能都非常强大。身为一个的初涉电商行业的产品,感觉理解起来是有点吃力的。而对于一个购物车而言,MVP具备的基本功能,最小化可行产品基础结构:

1、查看商品:购物车里面的商品清单,包含简单的商品信息;

2、管理商品:对已加入的商品进行简单的管理,包括:单选、多选,变更数量,删除,结算,批量操作的功能服务;

3、支持营销:活动信息的提示,订单金额信息的显示,需要显示单价、总价、优惠、运费,跨境电商的税费等在内的金额信息;

一个简单的用户购物车的流程:

1.1 加入购物车

-> 从商品页面加入,需要选择SKU

-> 从暂存架加入,已有SKU规格

-> 批量加入购物车,针对订单的重新购买或者重新加入购物车的功能需求

1.2 管理功能

-> 查看购物车,显示商品,支持分组

-> 修改数量,增减/输入

-> 移除商品

-> 移到暂存架,可选择是否从购物车移除

-> 清空购物车

-> 清空过期商品

1.3 结算

-> 关联促销活动,获得折后价

-> 对账功能支持,计算总价;支持整体结账、组结账或自由选择若干商品一起结账;

-> 对下达订单的支持,根据当次结算的所选的产品,更新购物车的数据;

2.1关联推荐

-> 在不同的视图中,根据上下文推荐商品;

-> 推荐类型,包括:

    ~~ 根据其他顾客购买的行为、浏览和收藏等推荐

      ~~ 根据商品的交叉销售推荐

-> 根据产品的向上/向下追加销售推荐

2.2 结账功能提前

-> 积分使用

-> 优惠券

-> 礼券使用

-> 运费估算,可以选择不同类型

2.3 策略功能

-> 库存提醒,剩余件数,预警提示

-> 促销活动到期,活动倒计时

-> 促销活动生效条件,查XX可享受【满XXX减少XXX】

3.1 购物车页面

3.2 迷你购物车,作为购物车的快捷入口

问题:如果一款产品满足多档促销活动,如何解决购物车产品逻辑设计以及设图设计?

思路: 由于涉及到到多个重叠交集的问题,那么直接使用【韦恩图】的集合解决方案,将i上的问题要素模型化,通过几个模型分析:

至于上述问题如何解读,我只给出了思路并没有给出详细的解释,大家可以自由发挥哦!

如果需要帮忙,可以给我留言.

后面我将会对购物车进行详细的研究,也会不定时的与大家一起分享交流!

我是王伟

很开心和大家分享,而我想把开心一直继续!希望对大家有点帮助!

怎么设计出一个好的的电商产品详情页

优质回答怎么设计出一个好的的电商产品详情页

电子商务网站的产品详情页面无疑是设计师和开发者最关心的页面之一。产品详情页面是客户做出“加入购物车”决定的页面,也是搜索引擎的结果页面。加入我们,探索哪些伟大的元素可以设计一个成功的产品细节页面。

电子商务产品详情页面设计。

设计、可用性和搜索引擎营销与一个电子商务项目密切相关。该开始了。我们来看看网页的外观。用户只需要几秒钟就可以决定是留在页面上还是离开。一开始,页面的设计能否吸引访问者是非常重要的。虽然这些设计要点似乎是常识,但我们仍然列出一些,例如:

我们定制的电子商务网站确保电子商务网站的设计包含以下要素:

大而详细的产品照片。

品牌名称和标志。

客户意见/星级。

添加到购物车按钮。

令人惊讶的是,很多网站都没有添加这些元素,网站的转化率大打折扣。因此,有必要检查您的网站和电子商务数据,以确保电子商务项目能够提供上述要素的承诺。

所有元素都包含在网页中。

从一般的电子商务网站设计来看,设计师不需要太注重创意。我们需要更多地关注网页的可用性,但我们需要设计一个更清晰的产品细节页面,以便用户可以清楚地寻求信息。网页的目标是让用户在几秒钟内从兴趣变成搜索。

可用性。

整体可用性往往被忽视,设计师可能已经发展了自己的技能,但也许前端开发人员还没有发展出他们强大的技能。你应该检查一下这个页面的功能,因为它需要快速使用。

附上标签,如“其他详细信息”或“相关产品”,这不应导致页面重新加载。这种浪费游客时间的行为令人沮丧。

当客户点击“星级”或“写评论”时,不应将客户带到另一页。好的,将产品评论添加到产品页面的底部。当客户单击“阅读评论”时,它应该会自动滚动到此部分。

不要把巨幅图片缩小得太小,这样会增加加载时间。

产品详情在同一页的底部。

搜索引擎营销。

搜索引擎营销最重要的一个方面就是帮助你实现页面转换。根据不同的行业,搜索者会寻找特定的产品。重要的是优化Google首页的排名,让自己的页面能被找到,有商机。开发产品详细信息页面时,必须考虑以下因素:

产品名称必须有适当的标题标签,如H1。这是好的前端开发(HTML/CSS)的一部分Google知道页面的重点是什么。

确保网页的内容是由HTML开发的。有时候,开发人员可以使用Ajax或其他技术来获取内容,但这会伤害SEO。

重要的是要包括制造商的单品数量(如果您进入该行业,单品会被频繁搜索)

为电子商务网站的每个页面开发强大的标题标签很重要,但是开发人员忽略了产品页面。标题中,产品名称、产品等有价值的关键词必须存在。您可以使用根据产品动态生成标题标签的工具。

现在的电商网站在开发者的电脑里是如何工作的,你的开发者有没有尽最大努力提供上面提到的这些功能?

电商剖析:解密购物车逻辑

优质回答在电商的核心交易流程中,购物车是一其中非常重要的一环,也是其中最复杂的一个环节。在做电商流程中,可以简单的把业务领域划分成两部分,一部分是底层支撑业务模块,一部分是上层流程串流程的模块。

底层支撑的模块,比如,库存系统、会员系统。这些模块的特点是,所处理的业务流程相对单一、闭环,不需要太多依赖外部系统既可以完成领域内的逻辑。

如会员系统最重要的流程就是注册、登录、校验登录态。这几个流程基本只依赖会员系统自身,没有对外部系统产生强依赖,强耦合。

比较复杂的是串业务流程的系统,这部分系统业务逻辑会相对更复杂些,比如商详或者购物车。因为商祥或者购物车所展示给用户看到的东西需要串联非常多的业务模块,将其中的信息进行封装组合展示给用户,这里的业务逻辑非常复杂,系统内部的交互非常多。

我们以京东的购物车为例,简单的剖析一下京东的购物车大体背后的业务逻辑,实现方式。

购物车中所展示的东西,无非就是加入购物车中的商品以及一些促销信息。那么第一个问题是,这些购物车中的商品、促销信息是静态的还是动态获取的?

所谓静态就是指用户在将商品加入购物车的时候,在购物车中存储加入购物车的商品所需要展示的各种信息。例如上面展示的商品的主图文描,促销等等。

动态获取就是在查看购车的时候,再去实时调用相应的系统获取最新的信息。

答案是,购物车的数据只会存储必要的商品信息,其他的信息完全是动态获取的。

因为在加入购物车的时候如果是静态存储的,那么在下一次查看购物车的时候,所展示的信息可能就不是最准确的。这中间可能商品信息会发生变化,比如商品被下架了、商品的主图被调整了、或者主题被修改了、商品的促销信息也可能会发生变化,在加入购物车的时候可能会命中一个促销,但是过了一段时间之后,这个促销可能结束了。所以比较精准的做法是在展示购物车的时候,再去实时拉取一次商品的详细信息以及当前的最新促销信息。

但是购物车中还是会存储一部分数据,主要存储哪些数据呢?主要如下图所示。

那么下面我们来看一下,查看购物车背后到底有哪些逻辑?

第一步首先是校验会员的登录态。上面购物车存储的结构中,我们看到购物车的存储是以用户维度进行数据存储的,所以要展示购物车的时候,首先要拿到用户的ID。所以这里第一步就会校验登陆态,因为只有用户登录后才能识别当前的用户具体是谁?才可以从购物车的存储中获取响应的数据。然后购物车会根据取到的商品ID列表再去实时调用一次商品系统来获取最新的商品信息,最终组装后进行展示。

下一步是获取库存信息。库存情况由于变更比较频繁,所以每次查看购物车的时候也需要实时的去查看当前商品的库存情况。如果购物车中的商品没有库存,那么就要进行提示,如下图所示,在购物车中将此商品置灰,提示此商品“无货”。

库存这里还有一个比较特殊的逻辑,就是赠品的逻辑。赠品分为两种情况,一种是满多少元送一个赠品,简称“满赠”。另外一个是买一个东西送一个赠品,简称“买赠”。两种都是赠品,但是对于库存的逻辑处理完全不一样。

这两种情况都会要求主商品跟赠品必须要在同一个仓。不然就会出现主品从一个仓发货,赠品从另外一个仓发货。要承担两份运费的成本。本来就是赠送一个赠品,如果还需要额外承担运费的话,那么肯定不划算。所以在校验库存的时候,一定会校验主品跟赠品是否都在同一个仓有货

当赠品跟主品不在同一个仓或者赠品没货的时候。对于满赠这种场景,如果赠品没有库存,那么还是可以正常下单的。因为满赠这种促销类型会给用户进行提示“赠品数量有限,先到先得”。所以赠品没货的时候也是可以正常下单的,用户也是能接受的。但是买赠这种场景,如果赠品没有货,那么会提示用户赠品无货,不可以下单。因为这种场景用户会认为赠品是主品的一部分,没有赠品也就不会去买这个主品了。

获取完库存之后,下一步会计算购物车中商品促销的情况。这也是整个购物车中逻辑最复杂的一部分。促销本身就比较复杂,因为会存在多种促销类型,如果某个商品同时命中多个促销怎么办?如果商家设置了非常多的促销,每一次都需要拿购物车中的商品去遍历计算每个商品命中哪个促销规则,整个计算过程也非常耗时。所以购物车会将商品列表传给促销系统,促销系统根据购物车中传递过来的商品去计算,这些商品会命中哪些促销,然后将这些商品按照命中的促销进行分门别类返回给购物车。比如一个购物车中一个商家下有若干个商品。其中两个命中了a促销,另外两个命中了b促销,还有三个没有民主促销。那么要按照结构返回给购物车,购物车再展示给到用户,这样用户看的会比较清晰些。

在购物车中除了展示基本的商品信息,还有很多额外的功能,比如计算运费。上图中会显示这一个商品包邮免运费。那么运费是如何计算出来的呢?

其实在商家后台有一个叫做运费模板的东西。商家会设置运费的策略,主要分为两种规则。一种是根据单个商品去设置运费的规则,一种是根据订单维度去设置模板。

单品维度指的是某一个商家的某个商品在某些地址需要收多少钱运费。这种的应用场景是当商家发现有些商品发到偏远地区比较贵的时候,会设置这样一个单品模板。

比如某个商品发到新疆、西藏、甘肃比较贵,那么就可以设置这个商品在这三个省收学费15元,反之只要收货地址不是这三个省的,那么这个商品就不收运费。

另外一种是订单维度的模板,也就是按照订单维度来计算,整个订单收多少运费。

举个例子,比如我们经常见的江浙沪包邮。那么这个模板应该如何设计呢?首先是选好一个商家,然后选好江浙沪的地址。在这些地址设置一个规则订单,不满0元运费0元。江浙沪之外需要收10元的运费,那么再设置一下,除了江浙沪之外的省份。订单不满100元收取10元运费。这样就达到了江浙沪包邮,江浙沪之外的地区需要有门槛,达到100元不收运费,但是不足100元需要收10元运费。

购物车中每一个商家头部有一个领券的标识。来标识这个商家目前可以有优惠券可以领。这个领券设计的目的是为了让用户能够在最关键的环节知道有券可以用,从而提升购物车的转化率。那么这个功能是如何做到的呢?

在购物车中会将商品按照商家的维度分成不同的块。每一个块代表一个商家,商家里面的商品如果有促销信息,按照块的维度再去展示促销的信息。领券的计算单位是商家的维度,在购物车中首先将商品根据不同的商家计算好分块之后,每一个块都代表一个商家,购物车会去计算当前商家下面以及当前商家购物车中的商品是否有可以领用的优惠券。如果这个商家制了10个批次的优惠券,其中2个批次的券可以使用当前购物车的商品,并且用户还没有领券,那么就会在这个地方进行提示,告诉用户有可以领用的券。

购物车中还有一个叫做预估到手价。之前购物车中只展示了哪些商品可以命中哪些促销,但是每一个单品最终成交的价格需要用户自己去算一下。由于促销叠加起来比较复杂,有些用户自己也算不清楚。所以这个预估到手价就是系统根据当前叠加促销、券之后算出来的一个最终成交的价格。这个功能省去了用户自己去计算的过程,并且很直观明了的展示出来了,最终的成交价对用户提升转化也有很大的帮助。那么这个预估到手价是如何实现的呢?

首先会先去计算购物车中商品的价格。有没有单品维度的价格促销,比如,价格直降或者秒杀、拼团之类的价格优惠。也就是上图显示的“119”,这个是价格维度的计算。在计算好单品价格维度之后,会再去计算一下当前商品是否有命中订单维度的促销,比如满减或者折扣。这个时候会在单品的价格基础上再减去命中促销的价格,算出一个优惠价。然后在这个价格基础上会再去命中一次优惠券的逻辑,去看一下用户手中有哪些券可以使用。最终再去减去优惠券可以使用的价格,那么就是用户实际成交的价格,也就是一个预估到手价。

这里举一个例子,一个商品原价100块。做了一个价格直降的活动,拼团或者秒杀,价格降到90。然后这个商品还享受了一个满减的优惠,满80减20。这个时候这个单品的价格就变成了90-20=70。如果这个用户的账户中,还有一张可以用于这个商品的现金10元券。那么这个商品最终到手的价格就是70元,再减去10元的优惠券等于60元。

通过上面几个过程,系统就可以帮你算出来每一个商品在当前情况下的一个预估到手的价格。

总结下,购物车是整个电商交易流程中比较复杂的一个环节,需要串联会员、商品、库存、促销、优惠券等大部分逻辑进行最终的购物车的呈现。为了保证购物车展示给用户信息的准确性,购物车只存了最基本的一些信息,绝大部分的信息都是在用户查看购物车那一刹那实时计算出来的。

通过上文,我们已经深刻的认识了电商项目购物车模块,并知道它的解决措施,以后遇到类似的问题,我们就不会惊慌失措了。如果你还需要更多的信息了解,可以看看若米知识的其他内容。

本文来自网络,不代表本站立场,转载请注明出处:https://www.rm2g.com/dianshang/64074.html

作者: 若米知识

若米知识为您提供最全面的生活百科网站大全,主要为您提供数码、汽车、财经、美食、财经、科技、健康、教育、创业、电商、影视、百科等资讯信息,在这里可以找到您所需的答案,解决您所困惑的问题。
电商项目经验:电商项目经验简历
内容电商的概念
联系我们

联系我们

0898-88881688

在线咨询: QQ交谈

邮箱: email@wangzhan.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部