工品汇网站-设计分析

接到工品汇的面试通知，这是一家在MRO电子商务行业做的非常好的平台。

下面斗胆做一下他的设计分析：

首先是网站的顶部

顶部-搜索

1、搜索框有明显的设计问题，左边输入框部分是直角，右边的搜索按钮又是带圆角的。（类似的不统一在网站中发现了多处）

2、400电话的图片和购物车的图标都是模糊的。（这类图标应该使用SVG）

3、搜索框中的文字和热门搜索的文案没有在颜色上做区分。（天猫的做法是更突出输入框中的文字，这点见仁见智）

首页

1、不符合对齐原则。（400电话的图片、购物车模块、公告栏均没有对齐。这让网站显得比较粗糙）

2、轮播图的质量需要把控，这个轮播图太业余了。

首页-品牌入口

1、品牌入口的左边部分是不能点击的，他的作用只是告知用户这些是精选品牌，意义不大。（可以考虑换成变种的标题栏，或者干脆去掉，这样页面会干净一些。天猫的做法是去掉）

2、当品牌刷完的时候，出现了空白。这样的处理方式欠妥。

首页

1、依然是对齐的问题。（这里是因为栅格化设置的有问题，我们可以看下小米的官网，他永远是对齐的）

2、整个一排都有「新品上市」的文字，这样的处理不是太妥当。另外新品上市的角标可以设计的更好看些。

3、鼠标经过商品图片完全没有反应，没有鼠标经过反馈这让我有些难受。（这点小米和京东做的比较好）

面包屑

1、面包屑样式不统一。

2、图一的 Home 图标不可点。

商品详情页

1、有一个比较严重影响用户体验的地方。（设置完采购量之后，再选择颜色，采购量被清空。）

2、按钮的样式不统一，有的是直角，有的是圆角。

登录页面

1、登录的弹窗为什么要加个半透明边框？（这让关闭按钮处于很尴尬的位置，另外也使页面不清晰）

2、冒号的使用不符合规范（通常冒号的使用范围是「表示列举」、「连接两个句子表示解释说明」）

3、「用户登录」下面的分割线没有存在的必要。（优秀的设计就是在保证可用性的前提下把视觉元素优化到最少）

4、严格来说，忘记密码的链接放到密码框的下面更符合使用逻辑。（当然放到这里问题也不大）

5、文本框的提示性文字通常会降低色号，使之不那么显眼。

6、文本框是是直角，登录按钮又是圆角。（样式不统一，老问题了）

订单列表页

1、订单号、订货号、产品名称可以放到一起。

2、交易日期的设置过于麻烦，建议改为更加便捷的方式，比如：最近三个月、最近半年、最近一年。（有精确查找的需求的话，可以放到高级功能中）

篇幅有限，设计分析就到这里。

总结：

整体的视觉风格不够清爽，很多地方的细节做的不够好。

设计语言比较混乱，不够统一。

某些地方的交互不太友好。