当前位置：首页 > 工作总结 > 其他总结> 阿里巴巴UED：Alibaba国际站首页改版小结

阿里巴巴UED：Alibaba国际站首页改版小结

时间：2022-10-09 08:13:34 其他总结收藏本文下载本文

阿里巴巴UED：Alibaba国际站首页改版小结（整理4篇）由网友“biubiubiu”投稿提供，下面给大家分享阿里巴巴UED：Alibaba国际站首页改版小结，欢迎阅读!

篇1：阿里巴巴UED：Alibaba国际站首页改版小结

阿里巴巴国际站(Alibaba.com) 是全球最大、最有影响力的B2B电子商务平台，是阿里巴巴集团的旗舰公司，长期以来，阿里巴巴国际站视觉风格并未随着业务的突飞猛进而有更富魅力的改变，呈现在用户面前的，依旧是稍显过时的设计风格。随着用户需求和公司业务的压力，对网站的视觉重构就成了迫在眉睫的事情，是时候来一次激动人心变革了!

一. 目前线上版本分析

上图为目前线上版本，较的版本，总体设计风格和信息结构没有太多的变化：

1. 首页没有传递出Alibaba.com的业务方向和核心价值;

2. 随着业务方向发展，不能满足业务需求;

3. 设计风格过时，设计风格不统一。

二. 用户需求分析

分析用户需求之前，一起来看一下外贸B2B生意从工厂到发货的重要环节有哪些，Alibaba对应这些环节有哪些相关配套服务。

通过用户调研分析，目前网站用户对Alibaba.com提供的这几个核心服务的认知度较低，所以这次首页改版的首要目标就是要进行用户教育并传递网站的核心服务，

三. 信息推导——框架结构

William Strunk和E. B. White的《The Elements of Style》里写到：”越精简的文字越有力。一句话里不应该有多余的词儿，一段话里不应该有多余的句子。同样，一幅画里不应该有多余的线条，一台机器也不应该有多余的零件。”

对首页信息进行重新梳理，去掉长期没人运营的冗余信息;重新调整信息结构，核心位置传递网站核心价值信息;只专注那些用户最需要的功能，用20%的基本功能去满足80%用户的需求。

新首页最终线框图

四. 视觉推导——风格、色彩

新视觉风格探索主要从以下几个维度考虑

1. 色调，感受，明亮的，柔和的，还是暗沉的;

2. Icon，字体，统一性，传达的感觉，Icon和字体要有连续;

3. 松紧度，留白，行间距，字间距，宽松度;

4. 结构，整齐的，流式的，开放的，还是闭合的。

设计趋势

近几年来，随着Metro风格的简洁与直观、Google全新的UI体验、Android 4.0系统的平面化，各大主流界面的风格都趋向于简洁，结构清晰，信息突出，减少噪音。

新首页视觉关键字

篇2：Alibaba国际站首页改版小结交互设计

阿里巴巴国际站（Alibaba.com）是全球最大、最有影响力的B2B电子商务平台，是阿里巴巴集团的旗舰公司，长期以来，阿里巴巴国际站视觉风格并未随着业务的突飞猛进而有更富魅力的改变，呈现在用户面前的，依旧是稍显过时的设计风格。随着用户需求和公司业务的压力，对网站的视觉重构就成了迫在眉睫的事情，是时候来一次激动人心变革了！

一. 目前线上版本分析：

改版前Alibaba国际站首页

上图为目前线上版本，较20的版本，总体设计风格和信息结构没有太多的变化：

首页没有传递出Alibaba.com的业务方向和核心价值；

随着业务方向发展，不能满足业务需求；

设计风格过时，设计风格不统一。

二. 用户需求分析：

分析用户需求之前，一起来看一下外贸B2B生意从工厂到发货的重要环节有哪些，Alibaba对应这些环节有哪些相关配套服务。

通过用户调研分析，目前网站用户对Alibaba.com提供的这几个核心服务的认知度较低，所以这次首页改版的首要目标就是要进行用户教育并传递网站的核心服务。

三. 信息推导——框架结构

大牛William Strunk和E. B. White的《The Elements of Style》里写到：”越精简的文字越有力。一句话里不应该有多余的词儿，一段话里不应该有多余的句子。同样，一幅画里不应该有多余的线条，一台机器也不应该有多余的零件。”对首页信息进行重新梳理，去掉长期没人运营的冗余信息；重新调整信息结构，核心位置传递网站核心价值信息；只专注那些用户最需要的功能，用20%的基本功能去满足80%用户的需求。

新首页最终线框图

Alibaba.com主要功能区，全站性买家主功能入口（顶部导航，类目，搜索）；

核心服务，网站服务以及用户教育，对新买家的初步教育以及价值展示，老买家的流程引导和网站服务介绍；

网站运营区域（次banner运营活动，Bargain Buys，GSD产品区域）；

推送热门产品，展示和买家浏览行为相关的产品；网站Site Map以及应用拓展。

四. 视觉推导——风格、色彩

新视觉风格探索主要从以下几个维度考虑

1. 色调，感受，明亮的，柔和的，还是暗沉的；

2. Icon，字体，统一性，传达的感觉，Icon和字体要有连续；

3. 松紧度，留白，行间距，字间距，宽松度；

4. 结构，整齐的，流式的，开放的，还是闭合的，

设计趋势

近几年来，随着Metro风格的简洁与直观、Goole全新的UI体验、Android 4.0系统的平面化，各大主流界面的风格都趋向于简洁，结构清晰，信息突出，减少噪音。

新首页视觉关键字

寻找新色彩

通过视觉关键字寻找新色域

确定配色

蓝色是灵性知性兼具的色彩，在色彩心理学的测试中发现几乎没有人对蓝色反感。明亮的天空蓝，象征希望、理性、理想、独立等。ColourLovers.com公布了一项调查结果，美国前100大网站的Logo，主要使用12种颜色。其中，采用蓝色的网站最多，红色排在第二种。

五. 设计展示

我们把用户需求转化成信息结构，并在用户群体的生活空间里寻找到网站的颜色趋向，接下来，我们把理论转化为交互和视觉的表现方式，新的国际站设计风格从而顺利诞生了。

Alibaba国际站新首页

一致性和标准化

一致性意味着产品界面的不同模块要有相似的外观、感觉和行为。这次改版，我们对网站核心页面同时进行了优化，为用户提供无缝而舒服的浏览体验。

Alibaba国际站新首页_2

Icon重绘

老版本的Icon一是样式不统一；二是原来的Icon质感太重。在新版设计中，我们对新Icon全部采用扁平化处理，用实色填充新绘制的Icon更加能体现出新版本的简洁、清新。

Icon重绘

重新绘制UI组件

简单和统一是体验的关键。新绘制的UI组件，尽可能的去减低UI元素的强度；新绘制的Button采用CSS3实现圆角和渐变；每个组件有2-3个不同的尺寸，尽最大可能为用户带来统一的体验。

重新绘制UI组件

六. 效果反馈

由于考虑到时间和篇幅问题，这次小结还有很多细节没有分析到，比如首页为什么采用990px网格系统，布局上采用怎样的逻辑路径是合理而有效的等。后续会继续给大家分享。新首页发布后，做了A/B测试，做了针对新首页的用户调研，新的视觉风格也得到了多数用户的肯定。引用一位归国华侨对阿里巴巴国际站改版的评论。新首页改版只是我们跨出优化阿里巴巴国际站体验的第一步，后续还会对整站其他页面继续分期进行优化。

感谢大家长期以来对阿里巴巴国际站UED的关注和支持，有任何建议和意见欢迎在此跟帖回复，您的参与和支持将是阿里巴巴国际站UED进步的动力！

篇3：alibaba的help首页改版心得

Help项目结束了，写了一份心得，与大家共勉，不知道大家是否有用过或看过之前我们的help频道，下面截了几张改版前后的屏幕截图：

老help首页：

改版后help首页根据用户群的不同区分为新用户首页和老用户首页：

新用户看到的：

老用户看到的：

具体为什么这么改，我这里没有讨论，在这里跟大家分享的更多的是做这个项目的过程中所体会到的，所学到的有关如何做项目的一些体会，希望对大家有帮助，

下面把我的一些个人感受写下来，其目的一是为了对自己工作的一个总结，项目的心得体会只有总结提炼出来才是自己的宝贵财富，才是自己的积累；其二是想把工作中自己遇到的一些问题写出来，可能这些问题不光我会遇到，其他的同学也会遇到相似的问题，写出来跟大家交流分享。

篇4：如何做首页改版: 阿里巴巴中国站改版经验谈

同任何网站一样，阿里巴巴首页的每次改版也都是一次纠结和挣扎的洗礼，设计的过程总是痛苦的，因为判断和选择总是艰难的，这里我们并不想叙述改版的整个流程——尽管不同团队的架构和设计团队的职责有所差异，但除了决策过程不同外，大公司抑或小公司在流程上并无本质区别。我们在此是想通过总结我们在改版过程中经验和教训，以及对于首页甚或产品redesign的思考，

以下是我们觉得必要的思考流程以及一些方法和关键点：

一、关于定位的思考

在首页改版之前，结合网站整体的策略变化我们首先思考以下三个问题：

1、改版的目的/目标是什么?

是配合网站整体战略的调整，还是用户体验的改善和提升，是自上而下的网站转型升级，还是自下而上的流量再分配?…

这些因素也决定了首页的设计思路是宏观还是微观，是信息层面的梳理还是视觉表达的优化。

2、首页的用户是谁?

用户是谁，用户特征是什么，用户的需求和价值在哪里?

考虑这个问题时，需要对于用户类型做相应的区分，不同的网站可能根据网站服务的特征来区分不同的用户群，比如：

1、时间：新用户与老用户

2、

★ Alibaba国际站首页改版小结交互设计