Skip to main content

在本文开始之前;允许我介绍一本书《Web Form Design:Filling in the Blanks》;他的作者就是 Luke Wroblewski ;在国内现在已经有这本书的翻译,早先是在网上看到他提供的PDF版本的书籍。因为个人英文水平有限,很多名词和专用术语都不是太理解,还好在豆瓣上看到这本书的中文版《Web表单设计:点石成金的艺术》没有犹豫就在第一时间买了下来。断断续续阅读了前面四章,而第四章是最打动我的部分。
大家在网上shopping的时候,最后结算一定会碰到的表单。索性一起拿出来对比一下:

1、当当网结算表单

当当网购物车表单截图当当网购物车表单截图

当当网未登录会员时的结算表单

首先,我们来到这个页面的时候,第一眼显而易见就是界面外观很简洁,名称采用了左对齐,而其他元素采用了居中处理。每样物品的价钱和折扣都表现在每 一行,干净,易于视觉流线,从做到右。但有一点,试想一下,你购物车里面的商品达到20个之多的时候,那么这个页面就相对在视觉信息上承载了太多。

#个人建议,图片可以略去。可以采用鼠标经过书籍标题的时候再出现相关书籍的封面截图。

还有一点,可以采用数字去刺激加强消费者的购物欲。如上截图的当当价,在当前的界面上,有足够的空间可以采用优惠前的原价,和优惠折扣后的价钱,在 数字上对比。在当前的界面上也有折扣体现,只是没有那么明显的区分到底是在当当价的基础上再打折呢,还是当前的价格已经是享受折扣后的价格。那样消费者就 会更加确定自己赚到便宜和实惠。间接的可以影响最后订单数量。

有一点值得称赞,界面上对购物数量的操作,很方便,这样可以省去数字键盘的输入。

2.北发图书网购物车结算表单

北发图书网购物车截图北发图书网购物车截图

北发图书网结算表单截图

以上的截图是来自chrome的浏览器下面,数据上面的显示。数据的标题显示有些凌乱,应该是对表单结构上的问题。
先撇开网站的信息界面来说,整体还算整洁明了。
缺点是:对结算最后提交的表单,略略有些草率。3个按钮直接采用系统默认的button,第一眼在视觉颜色上我们不看字会认为他们是等同的。所以在点击“提交订单”上面,需要浪费我们对3个按钮都对其进行扫描。

建议,可以对提交订单按钮进行区别。对清空购物车这样的操作也进行区分。

3.九久购书网结算表单

九久图书网购物车截图九久图书网购物车截图

九久购书网结算表单
九久网我没有在上面买过东西。但是它有一点做的很好,用数字激励用户;只是在价格的颜色上面,红色的粗体字在界面上太多。而且销售价的哪一行排版还不是太 合理。在对比上就没有那么明显了,每次我需要扫描上面价格再跳到下面的优惠价格去扫描。视觉上总感觉有些不妥。可以试试将“为您节省”采用一致的横向排 版。

4.中国互动出版购物车结算表单

中国互动出版网购物车截图中国互动出版网购物车截图

中国互动出版网结算表单
结算表单也是采用了清爽的浅蓝色来做引导线。整体还是蛮不错,标题栏的“商品”名称如果采用表格左对齐,视觉上势必会更好。标题栏的颜色可以采用深蓝一点的颜色加以提醒。
交互操作过程这个界面会遇到一个麻烦,左下角的收藏和删除按钮是在一起的。如果我需要对一片文章进行删除或者收藏,我需要先勾选对应的商品名称,然后点击 左下角的“收藏”/“删除”,才能完成操作。如果界面上能在商品的右边栏部分,单独增添 删除 | 收藏 来是实现方便操作商品。

另外还有一点是似乎有点随便,就是人民币的符号“¥”的用法,像上面的表单出现的价钱表单出现的价钱的时候,我们采用符号来解释,只是辅助。但符号 出现在上面的界面,略显有点繁琐。而且部分新手网友还不一定知道它代表的意思。可以采用在标题栏,市场价、你的价格、单品总价后面,带单位。 市场价 (元)| 你的价格(元)| 商品总价(元)

表格底部栏,可以试试采将商品的价格和结算按钮并为向右对齐的两行。那样眼睛扫描无需扫左边,再扫右边区域。

5.卓越亚马逊购物车结算表单

卓越亚马逊购物车结算表单卓越亚马逊购物车结算表单

卓越亚马逊结算表单
卓越亚马逊的结算表单,不瞒说,我第一次在08年在用它的时候,好几次都点错地方了。因为在这个购物车界面,它将收藏的商品和实际购物车的商品一上一下的防治在画面中,不看左边标题,你会猛吃已经下面的订单是我刚才自己加载的吗?
当然它这样大的幅面设计是简单明了。操作也很简便,只是它的购物车却是在页面的右边,因为它不是在界面的底部。我想这和他的前身很有关系。这些喜欢在美国应该是适用的,但在国内略显有些让人走错巷子,找不到路牌的感觉。

 

6.文轩网购物车结算表单

文轩网购物车结算表单文轩网购物车结算表单

文轩网结算表单

 

文轩网的界面和当当有些类似,整体上的布局还是蛮合理的。数量的表单文本框可以适当缩短,没有人一次性输入购买上万本的书籍。优惠一栏在我的购物的途中并没有看到实习的体现,如%比或者是折扣数。

7.豆瓣网推出的购书单:

豆瓣网推出的购书单豆瓣网推出的购书单

当当网购物购书单
豆瓣推出购书单,其实作为广大的消费者还是很喜欢的,省去了到各大网站比对商品价钱的时间。同时豆瓣还可以拿到一定的分成。只是这样的价格对比,对于小众的购书网站就不利了。因为商品价钱的高低很大程度上决定了购买网名消费者的购物倾向。
而豆瓣的购书单的亮点更是价格的比对上做的很直接明了。

 

8.淘宝购物车结算表单

淘宝购物车结算表单淘宝购物车结算表单

淘宝网购物车结算表单。

 

淘宝的购物车改版过很多次,以前的界面没有这么的易用。而且它带给我们的也是很享受的购物流程。左对齐和居中对齐在这里尽显魅力。表单信息元素的把 握很到位。当然看到这个界面我会突然问,假设我来到这个界面,我有一个物品可能不是太急需,下次再买也行,那么我总不能直接删除吧。我要把它暂作收藏怎么 操作呢。界面貌似没有给出这样的通道。当然淘宝的结算表单的清晰明了是值得各大网站学习的。画面中它叶没有采用太多的币种符号来辅助,而是在标题栏进行加 注。和最后结算的总价的数字单位上进行诠释。而数量添加按钮也是一个亮点,它和当当网相反,是布置在文本输入框的两边,做加减法的提示。

总体上述;可以发现,每个网站都可以摸索出适合自己的结算购物车。不能直接照搬,当然淘宝我们可以用来学习。因为人家做购物搜索也不是一两天了。看人家那商品搜索,那足足下了很大的功夫改善。才达到现在这样的便利性。很直接参考和学校。

以上文本纯属个人观点。如有错误,敬请提出。
我还要既继续阅读《Web表单设计》;更多心得下次在这里分享发布。另外我也推荐网页设计师去阅读本书噢,它一定不会令你失望的。

–Web Form Design: Filling in the Blanks—书籍介绍链接;

http://www.lukew.com/resources/web_form_design.asp

Web表单设计:http://book.douban.com/subject/4886100/

Leave a Reply

Close Menu

关于我

我是一枚 UI/UX 设计师,目前就职平安集团旗下的子公司。 自 08 年毕业后,自学结合项目实践积累了 4 年多的前端静态页面开发经验后,再次回到 UI+交互设计的跑道。

T: +0086-18621561432
E: hi@cigar.design