ELECTRONIC COMMERCE

1. Kisschic 网站评测
By Alite Yu

2. 用户 A “ ”说： 这个图片很漂亮，但是我应该点击哪里？
默认首屏 鼠标滚轮滑动 1 ／ 3
案例 1

3. 寸点击率、二级页面转化率会高么？
问题 2: 首屏看不到 Banner 轮播标识（告诉用户有几张图），用户不
把鼠标放在图片上不能看到进行轮播切换按钮，滚动鼠标 1/3 方能看到
标识图标，并执行跳选操作。
问题 3 ：针对移动端用户，在 3G 状态下， Pad 端、 Phone 端用户打
开网站加载大图比较浪费流量，加载速度慢。
针对移动端用户，在 3G 状态下， Pad 端、 Phone 端用户打开网站加载
大图比较浪费流量，加载速度慢。
针对移动端用户，在 3G 状态下， Pad 端、 Phone 端用户打开网站加载
大图比较浪费流量，加载速度慢。
Banner 问题

4. 其他 品网站竞

5. 其他 品网站竞

6. 其他 品网站竞

7. 其他 品网站竞

8. 其他 品网站竞

9. 解决方案
设计适当的首页 Banner 尺寸，使可点击按钮的热区在首
屏区域是可见的，同时 , 在不需要滚动鼠标的情况下，便
可以轻松操作。

10. 用户 B “说： 昨天把刚商品添加到了购物车里，今天怎么找不
”到我的购物车入口了？
案例 2

11. 问题 2 ：当购物车没有商品时，没有醒目提示购物车为空，继续购物按
钮多余重复出现，没有进行登录注册引导，支付按钮应为置灰状态不可
点击。
问题 3 ：支付按钮文案不是商用英文单词。
问题 4 ：当购物车有商品时，对于商品的删除操作不用 hover 时再展现
，同时可以增加延迟购买的功能。
问题 5 ：购物车修改购买商品数量，没有提供更大范围自由度的数字选
择。
问题 5 ：购物车修改购买商品数量，没有提供更大范围自由度的数字选
择。
问题 5 ：购物车修改购买商品数量，没有提供更大范围自由度的数字选
择。
购物车问题

12. 其他 品网站竞

13. 其他 品网站竞

14. 其他 品网站竞

15. 其他 品网站竞

16. 解决方案购物车入口可以用图标＋文案的形式放在搜索框同行或位于
搜索按钮靠后的位置。
当购物车为空的情况下，先要提示为空的状态，然后判断是
否为登录状态，若为未登录状态引导用户去登录；或者引导
返回到继续浏览商品页面（引导按钮不宜过度重复）；这时
候支付按钮（ proceed to checkout) 为不可点击（置灰）
状态。
当购物车有商品的情况下，针对购物车的商品的编辑处理要
直接，直接显示删除按钮；可以增加延迟购买功能；对数量

17. 用户 C “说： 以为直接就可以支付了，怎么还让我登录注册啊？快速购
”买在哪里？登录就登录怎么还让我点下输入框，我想直接敲键盘了！
案例 3

18. 问题 1 ：没有提示可以快速购买无需登录注册。
问题 2 ：引导用户登录，登录模块账户输入框没有默认获得焦点。
问题 3 ：模态框内做输入提示／容错处理显示空间有限制，显示效果不如
页面自由度大。
未登录用户支付提示问题

19. 其他 品网站竞

20. 其他 品网站竞

21. 其他 品网站竞

22. 其他 品网站竞

23. 其他 品网站竞

24. 解决方案
当用户不想注册登录进行购买支付行为时，网站要提示这
样的入口给用户，但是同样要引导用户去登录注册成为网
站的忠实会员，因为他可以享受更多折扣优惠。
当产品设计人员决定是突出登录、注册或快速购买模块
时，请为这个模块的第一个输入框设置成默认获得焦点。
设计成模态框也好，打开新的页面也好，都可以帮助用户
完成登录注册，只是打开新的页面可以让用户更加专注于
目前的行为，输入提示、容错处理设计的想象空间更大。

25. 用户 D “说： 刚登录注册成功，就提示我填写物流地址，选择运费
”方式，表单太冗长了吧？！跳到支付页面又让我填写一次地址！
案例 4

26. 问题 1 ：表单过于冗长，无法专心填写任何一个模块信息。
问题 2 ：无法删除旧的物流地址。
问题 3 ：在编辑物流地址时，展开层过高使表单页面更加冗长，同时，当
前编辑的物流地址和原物流地址无视觉关联。
物流地址问题

27. 其他 品网站竞

28. 其他 品网站竞

29. 其他 品网站竞

30. 其他 品网站竞

31. 其他 品网站竞

32. 解决方案
长表单应该增加模块折叠按钮或者把任务按照先后步骤设
计。
提供删除历史物流地址的功能。
添加物流信息最好设计成按钮控件，编辑当前物流信息可
以采用弹出模态框，用展开层会使表单页面更长，最终确
定按钮会更靠底部不方便点击。

33. 用户 E “ ”说： 我找不到类目选择导航了！
案例 5

34. 问题 1 ：缺少全站类目选择。
问题 2 ：频道导航信息架构没有突出垂直电商按用户角色区分的特点。
类目导航问题

35. 其他 品网站竞

36. 其他 品网站竞

37. 其他 品网站竞

38. 其他 品网站竞

39. 其他 品网站竞

40. 解决方案
建立全站类目体系，根据垂直行业类目体系进行规范设
计，按钮入口位置可以选择放在首页 logo 旁边或者放在
频道导航中。
设计频道导航的时候，可以按照场景纬度来创建，也可以
按照用户角色纬度来创建。

41. 用户 F “说： 使用关键词找商品怎么没有任何搜索输入提示
（ Search Suggestions) ”？
案例 6

42. 问题 3 “：没有考虑搜索结果页面： 0 ” “ ”结果 、 少结果 情况交互提示与引导。
问题 4 ：搜索关键词和搜索结果数与搜索框距离太远很难建立视觉关联。同时，输入
关键词点击搜索按钮，执行一次搜索后，结果页输入框的关键词与之前输入的搜索词
不一致。
问题 5 ：面包屑导航没有结合属性筛选，也不能进行任意删除已选项。
问题 6 ：搜索结果页只有橱窗展示样式没有列表展示样式，筛选条件可以采用下拉选
择菜单的交互模式。翻页控件要展示共多少页，当前第几页，翻页按钮要大些。
搜索导航问题

43. 其他 品网站竞

44. 其他 品网站竞

45. 其他 品网站竞

46. 其他 品网站竞

47. 其他 品网站竞

48. 解决方案
增加搜索输入提示功能，推荐热搜词可以直接显示于搜索
框底部，或配合相关搜索做一结合设计。针对 0 结果，少
结果页面需要增加猜你喜欢与相关推荐商品的引导。搜索
行为始发地与搜索反馈结果，布局上应该更加贴近些。一
定要提供用户行为的路径历史记录，类目和属性的筛选结
果最好有一个统一的位置展示。视图样式的选择让用户更
好的进行比较商品，筛选过程中一定要有按照价格，按照
销量，按照好评率等相关排序，有时候还有用户比较关心

49. 用户 G “说： 是海蓝色还是淡蓝色还是深蓝色，我想看样版面
”料颜色，这样才不会有色差？
案例 7

50. 问题 1 ：用文字描述商品颜色会有理解误差。
问题 2 ：数量选择控件应该支持 10+ 以上的购买数量。
问题 3 ：网站售价与市场价应该对比显示，让用户有得到优惠的感觉。
问题 4 ：看不到商品详情的细节描述与商品细节图。
问题 5: 大部分商品详情页看不到用户评价和销量展示。
商品详情页问题

51. 其他 品网站竞

52. 其他 品网站竞

53. 其他 品网站竞

54. 其他 品网站竞

55. 其他 品网站竞

56. 其他 品网站竞

57. 其他 品网站竞

58. 解决方案
对于颜色选择控件识别度由小到大分别是：文字 < 色块 < 图
样！
数量选择控件可以先选择 1-10 的，超过 10 用自定义输入框控
件。
设计两种价格对比：网站优惠券与市场价，市场价划差或灰色。
在商品详情页的描述区域，服装类商品应该配有对尺寸和面料质
地的说明。
增强口碑营销，增加平台粉丝，首先要把销量展示做好，可以吸
纳 sns （ fbtw) 的评论放到商品详情页上来。

59. Q&A
所谓好的产品解决方案只是在某个
阶段做到了最好的平衡利弊！
—Alite Yu

60. 联系方式：
微信号 : Alite66
Weibo: Alitedesign
谢谢！