我要投稿

Web端淘宝界面设计改版，这些交互创新真不错

发布日期：2024-10-24 10:25:39 浏览次数： 1045 来源：UXD笔记

自从进入移动互联网时代后，市场的目光都放在手机APP的体验上，对于桌面Web端的体验缺乏关注。但事实上因为桌面端大屏幕的体验特性，Web端淘宝网依然存在一批忠实用户。

为保证这些用户的使用体验，手淘设计团队近期针对Web端淘宝网进行了全链路的改造升级。

#01

更大的屏幕，更高的效率

之所以存在部分用户更加喜欢使用Web端淘宝，核心在于桌面端设备相较于手机设备，能够提供更大的屏幕面积。而这也是我们这次改版核心切入点：如何利用更大的屏幕，带给用户更高效的购物体验？

老版淘宝网还采用的是定宽1200px的栅格体系，使得其整体屏效仅有62%，无法满足现在用户的诉求。所以，我们首先需要构建一套桌面端栅格框架。

PC屏幕分辨率特性

显示器屏幕在过去数年内得到了很大的提升，目前市场大部分主流的分辨率达到了1920px以上。
不同于手机设备，PC显示器分辨率集中度很低，且差异度较大，宽度从1024-2560之间均有分布。

基于显示设备的特性，代表栅格框架需满足这样的条件：

高屏效，让内容能够尽可能充满越来越大的屏幕。
自适应，保证不同尺寸屏幕下，内容展示体验一致。

栅格框架定义

基于这样的诉求，我们重新定义了新版栅格框架。

通过前端封装栅格框架，为各个页面提供元素容器宽度计算能力。来快速的实现所有页面的内容自适应，保证不同屏幕尺寸下的展示效果。

#02

全链路改造

确定更高屏效的框架后，在链路侧中，我们该怎么应用这套来提升用户体验，核心在于两个方面：

1. 看到更多内容

2. 操作更加高效

更多丰富的内容

首页，搜索，直播链路升级改造

基于新版的栅格框架，屏效得到了大幅提升，从而使得屏幕中能够放下更多信息内容，在如：首页，搜索，直播等内容展示型的链路中。能够让我们有更多的空间去容纳更丰富的信息。

1. 更丰富的首页内容

首页内容框架从1200px扩宽至1920px。扩大的内容能够放下更多商品内容。同时针对首页运营位，提供模块化搭建能力，首页将根据不同节点场景搭建对应的坑位内容。

2. 更沉浸浏览的搜索结果

搜索内容丰富，筛选简化，突出商品结果内容，更加沉浸浏览。

3. 大屏看直播更爽

充分利用大屏幕所带来的优势，将视频内容搬移到网页端，带来更佳的直播观看体验。

更高效的购物体验

详情，购物车，下单链路升级改造

基于PC端横向屏幕比例的拓展，设计层面能够在操作决策链路上，拍平交互流程，为用户带来更佳高效的购物体验。

1. 双列流结构详情，提升购物决策效率

详情是用户浏览商品，选择款式，加购下单的核心页面。承载大量信息展示和操作。当屏幕横向空间扩大后，在详情布局结构上，手淘设计师也相应进行改造，形成双列流布局。

2. 购物下单链路

在购物下单链路中，同样为提升用户操作效率。优化原先单列布局结构，改为双列布局。用户左侧选择商品，右侧查看具体金额和满减信息，提升效率。

#03

最后总结

Web端有别于移动端的交互特性，在设计上也能够带来更多的交互形式上的创新。如已经在探索的：小窗模式，分屏模式等等。手淘设计师也将继续持续优化Web端淘宝网的用户体验。

优网科技，优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！

优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。

相关资讯

2024-11-21

什么情况下企业官网需要改版?来看看你的网站需要改版吗

2024-11-21

提升采购数智化水平：为何「电子商城」成为企业首选实践路径？

2024-11-21

官方指南 | 用好“五步法”，保障企业“专属商城”系统建设有序落地

2024-11-21

商城网站建设对企业具有哪些重要意义

2024-11-21

做网站费用，公司网站制作费用，品牌网站建设，企业网站建设

2024-11-21

小程序|掀起用户体验新篇章Mini programs open a new chapter in user experience

2024-11-21

UI中B端与C端设计有何差异？

2024-11-21

11月最美Shopify网页设计欣赏——线条与色彩的盛宴！

高端定制互联网应用服务商

立即咨询

热点资讯

换热、制冷空调设备企业网站建设解决方案

2024-11-21

提升机企业网站建设解决方案

2024-11-21

机床企业网站建设解决方案

2024-11-21

铸造设备企业网站建设解决方案

2024-11-21

机床附件企业网站建设解决方案

2024-11-21

什么情况下企业官网需要改版?来看看你的网站需要改版吗

2024-11-21

探索微信小程序世界：尽享便捷生活！

2024-11-21

大家都在看

充电桩收费系统开发：桩企、充电桩运营商如何建立自己的收费平台？

2024-11-19

Flyon UI：最新款免费且开源的 Tailwind CSS 组件库

2024-10-25

2024 年 12 个最佳 JavaScript 动画库，为您的 Web 项目提供动力

2024-10-28

“互联网+”时代，企业信息化建设有哪几大趋势？

2024-10-19

用几分钟的时间了解下IPV6地址的一些常识！

2024-11-08

开发一款小程序需要用到哪些技术呢？

2024-11-01

Web端淘宝界面设计改版，这些交互创新真不错

2024-10-24

联系我们

020-8556 4311

广州总公司

地址：广州市华景路37号暨南大学科技大厦6楼（整层）

18026208884

深圳分公司

地址：深圳市福田区车公庙泰然九路盛唐大厦西座1402

关于优网

优网科技成立于2005年，专注高端网站建设、企业微信开发、微信小程序开发、微信公众号开发、APP开发等业务。我们致力于提供打通企业的品牌形象、营销拓客、客户成交、产业服务的链路解决方案，希望成为优秀企业优选的互联网应用服务商。

网站地图常见问题联系我们

KEYWORD：

智慧教育解决方案

智慧答题解决方案

智慧建材解决方案

智慧家装解决方案

智慧家居解决方案

智慧校园解决方案

企业微信解决方案

教育机构解决方案

家校互动解决方案

微信客服解决方案

智能收款解决方案

家装行业解决方案

建材行业解决方案

家居行业解决方案

家电行业解决方案

品牌网站设计

网页设计

APP开发

微信公众号定制开发

小程序开发

制作网站

企业建站

微网站

微官站

手机网站建设

公安局备案号： 44010602000978号
备案号：粤ICP备09025660号广州优网计算机科技有限公司
Copyright©2024 All Rights Reserved

关注优网科技

关注优网科技

我要投稿

专属顾问

扫码咨询您的优网专属顾问！

专属顾问

联系专属顾问

扫一扫马上咨询

扫一扫马上咨询

扫一扫马上咨询

和我们在线交谈!