淘宝设计精选案例｜电脑逛淘宝，“大”有乐趣

自从进入移动互联网时代后，市场的目光都放在手机APP的体验上，对于桌面Web端的体验缺乏关注。但事实上因为桌面端大屏幕的体验特性，Web端淘宝网依然存在一批忠实用户。为保证这些用户的使用体验，手淘设计团队近期针对 Web端淘宝网进行了全链路的改造升级。

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

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

PC屏幕分辨率特性

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

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

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

栅格框架定义

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

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

1. 看到更多内容

2. 操作更加高效

更多丰富的内容

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

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

1. 更丰富的首页内容

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

3. 大屏看直播更爽

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

更高效的购物体验

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

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

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

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

2. 购物下单链路

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

福利时刻！！！

【 IXDC赠书活动 《变革者：领导者们是如何设计变革的》 ， 今天下午5点开始抽奖！ 点开书名或打开图片链接参加活动，即有可能获得实体图书一本噢！】

-END-

文章转载：淘宝设计， 版权归原作者所有

原文链接：https://mp.weixin.qq.com/s/elzISM9E1A4w4dsucjYNMQ

版权声明：“IXDC”所推送的文章，除非确实无法确认，我们都会注明作者和来源，本公众号对转载、分享的内容、陈述、观点判断保持中立，不对所包含内容的准确性、可靠性或完善性提供任何明或暗示的保证，仅供读者参考。部分文章推送时未能与原作者取得联系，若涉及内容或作品等版权问题，烦请原作者联系我们，给出内容所在的网址并提供相关证明资料，我们会核查后立即更正或者删除有关内容！本公众号不承担任何责任，并拥有对此声明的最终解释权。