电子商务网站页面设计宝典 (一)

    电子商务平台经营成功的要素，除了要有好的商业模式外，页面设计也相当重要。优异的使用者页面需有高度的网站转换率(conversion rate) 且好用易上手。

　　1. 单栏排版取代多栏排版

　　单栏排版让你更能掌握内容的呈现样貌。对使用者来说，上而下的方式阅读更直觉。相对的，多栏排版可能增加使用者阅读时分心的风险，而不能专注于重点上。

　　2. 尝试先给使用者好处，不要马上进行销售

　　可以利用友善的活动或方案让顾客买单，例如送些小礼物。而给与顾客礼物的方式要以互惠的角度，这样对他们而言才是有效且具说服力的销售战术。

　　3. 在页面上整合相似的功能，避免版面破碎化

　　设计师常因无心而设计出多栏位却又相似的元素或功能，在页面上就会显得多余甚至混淆影响使用者的操作。

　　4. 让社群来证明您的价值，而非老王卖瓜

　　利用社群的力量来帮助你说服客户是相当聪明的策略，且可有效的提高转换率。用户看到别人的认可，或是讨论你的产品服务时，会加强他们想要了解或使用的动机，所以试着把使用者的推荐文或是数据证明放在网站上吧!

　　5. 希望使用者进行某项动作，你可在不同位置放入引导的指示

　　在长页面或多分页的网页中，重复出现你希望使用者进行操作的元件，是一个好的经营策略。不过你千万不要卯起来放这些元件，这么做肯定会让使用者感到愤怒或挫折的。然而,长页面的网站设计模式已经相当的普及，不像过去尽量将可视范围压缩在一个萤幕大小内。所以在长页面的最上方及最下方各放置一个可操作的元件，这样的作法显得合理且符合人性。就使用者的习惯而言，通常他们会将网页阅读(或扫视)至最底，此时看到可操作的元件，可以激发他们思考接下去该做什么，如此你就有机会完成一笔交易。

　　6. 让可点击和可选择之元件的样式有所差异，避免混淆

　　应用视觉元素之手法可以帮助使用者了解页面上的功能与结构，例如颜色、深度与对比度等。同时为了与你的使用者精准的沟通，需点击的行为(如连结或按钮)与需选择的元件(如选单)设计上要有所区别，同时上方的文字必须描述清楚，才有利使用者辨别。在底下的例子中，作者选择了蓝色做为网站上使用者可点击元件的主色，而黑色为标示已选择的项目或是现在页面的名称，简单明显的颜色应用，让使用者藉由颜色的线索更轻易的学习和使用网站功能。最后请记得，千万别使用难以辨识或过多的颜色混淆使用者。

　　7. 强调推荐的主打产品或服务

　　当页面上有多项可选择的产品或服务时，强调主打品会是一个好想法，因为有些使用者需要多一点刺激物才会注意到。但心理学的研究指出，若提供使用者越多项的选择时，他们从中挑选的机率就越低。为了解决这个困境，我们需要利用设计来强调最推荐的主要产品或服务。

　　8. 让使用者有复原(undo)的机会，而非跳出确认视窗一次定生死

　　按下按钮或连结，系统可能会出现两种讯息，第一种为在页面的底部滑出可让你回复至上个状态的功能，另一种则是跳出视窗询问你是否要进行操作，确认后无法复原。而这两种有什么差异呢?

　　可"复原(undo)"的设计对使用者是友善且尊敬的，因为它提供使用者就算操作错误也可以回复到上一步的功能，而不是像"跳出提示视窗"般，似乎质疑使用者的意图。另外，使用者若需要重复的进行某项工作，系统又以跳出提示视窗为操作的方式，可能让使用者操作效率低落，甚至产生不好的体验。

　　9. 清楚描述网站的目标族群

　　你希望网站的目标用户是大众还是特定族群?

　　描述或限制适合产品或服务的目标族群，可以帮助网站找到更多相似特质的使用者，也更具特色，同时让使用者感到自己具独特性。然而，使用这样策略具有风险，可能让你的网站在短期内失去一些潜在用户。不过，透明与诚实才是建立与使用者之间信任的最佳方式。

　　10. 语气若不肯定，你叫使用者怎么信任你

　　当你收到一封语句充满不确定性，甚至有些胆怯的信件，以及收到一封肯定且充满信心语句的信件，你会怎么看待这两个撰写信件的人?没错!答案很明确肯定能待给人安心，优柔寡断则会降低信任感。

　　如果你常使用问句，或是用一些不确定的词汇，例如:也许、可能、有兴趣吗?或想要吗?。这代表你对你的产品或服务信心不足，这时候可以使用更具权威性的语句，例如你能带给用户什么有利的改变。

　　11. 用对比的手法来强调

　　让你的CTA(calls to action) 更加明显可提高使用者注意到的机率，我们可以透过深浅色调、阴影、渐层或对比色的手法来增加画面上的对比性，进而达到我们的目的。

　　12. 说明产品的产地，增加与他牌的差异

　　说明产品或服务的产地，可让网站与用户之间的沟通更加人性化。例如人们总是喜欢介绍自己来自哪个国家、地区及城市，若产品或服务也能以这种人性化的方式来介绍，会显得更加友善。另外，说明产地也可能让产品品质与产地名声达到双赢。

　　13. 别让使用者填太多表单

　　人类天生不喜欢麻烦的事物，就如同大家不喜欢在网站上填写太多的表单。每新增一项必填栏位，访客放弃填写的风险就越高。此外，并非所有人打字都相当快，而且在移动装置上输入简直就是件苦差事。所以尽可能的只留必要栏位，不那么重要的就不要让使用者填了。但如果你真的有非常多必填栏位，可以试看看将第二重要的资讯在提交第一重要的资讯后，出现于单独的页面上，请使用者继续填写。

　　14. 试着别隐藏页面上的选项

　　使用下拉式选单的目的即是增加页面的空间，但在第一时间，使用者无法了解选项的内容。若你的目的在于选择可预期或已熟悉的项目(例如:生日、日期或地区)，那使用下拉式选单元件是个不错的选择。另外，下拉式选单也长被使用于高度重复操作的选项，例如作业系统上方的"档案"或"编辑"(action menus)。

　　但若是这些选项是跟内容有关，而且是流程中必选的(如下图)，那你可以考虑不要隐藏这些选项，这样可以提升网页着转换率。

　　15. 避免让使用者产生已经滚到 “网页最底部" 的错觉

　　没错，长型的滚动页面的设计相当符合人性，但要小心访客可能会因为设计不良而产生“已经滚到最底部"的错觉，这会大大的降低转换率。

　　你可以透过视觉化的图标或是小动画，来告知或暗示使用者：网页还没置底，你们还可以继续往下阅读。另外，设计时也需小心各主题之间留白区域的尺寸，因为过大也会让人产生底下无资讯的想法。

　　16. 以聚焦手法吸引使用者的目光，效果大于页面上满满的连结

　　我们常会在页面上留下许多"连结"，目的在于可以满足使用者可能的所有需求(例如可了解更多)。不过，假如你的目的是让使用者卷到页面底部时，采取你期待他们做的动作，那你必须思考上述的做法是否恰当。因为在中间安插任何连结都可能导致使用者分心而忽视了你最希望他们做的事情，所以放置连结，其数量与位置都要取得平衡。怎么取得平衡必须仰赖大家的经验，不过至少我们知道减少多余的连结，可增加使用者注意到你”最重要动作(可能是按钮)”的机会。

　　17. 描述项目或功能目前的状态

　　网页设计的手法常以不同的元素来表现某项目的不同状态。例如 E-mail 上可标记为未读或已读，帐单旁可显示已缴清或未缴的 icon 等。这些做法都是告知使用者，该项目目前的状态，也是系统提供回馈给使用者的好方式。

　　重点是，页面上项目的状态可以帮助使用者了解是否已经操作过了?操作是否成功?或是哪些动作是使用者需进行的?

　　18. 试着在页面上使用能"带给用户好处的按钮"，取代"任务导向的按钮"

　　想像一下，若是页面上有两个按钮，其中一个写着"替你省下大钱"(带来好处的按钮)，另一个写着"请注册吧"(任务导向的按钮)，肯定大部分的使用者会点击前者。原因很简单，因为第一个按钮视乎能替使用者产生价值；相对的，注册这个动作则代表使用者需要花时间精力填写表单，当然他们不愿点击。由此可知，若这个按钮能替使用者带来好处，自然就会有较高的转换率。另外，"带来好处的按钮"与"任务导向的按钮"若有相关性，可以将两者放置于一区(如下图)，这样可提醒使用者为什么他们需要进行这项任务或动作。

　　19. 直接操作比多阶层下拉式选单 (contextless menus) 来的直觉

　　针对页面上的元素直接操作有时比整合的操作工具列还要来的方便直觉。如下图，若各项目皆有一些可以让使用者操作的功能，我们可以藉由点击或鼠标覆盖的方式来呈现一些功能或进行操作(如删除或重新命名等)。另外还有一种常见的操作方式，就是点击项目后，该项目会转变为可编辑的状态。

　　然而，多阶层下拉式选单(context of button)十分常见，但过多的阶层可能会增加操作的步骤，所以下次设计时不妨考虑减少阶层或直接操作的方法。

　　20. 当下就可以操作，何必再多开分页呢?

　　当页面上有一些我们期望使用者做，并会带来价值的功能时(例如留下联络方式)，最好可将实际的表单或栏位放置于本页上。如下图，栏位若能与页面整合在同一层，其带来的好处大于还要连结至别页输入的方式。

　　那我们该怎么做呢?首先，必须精简流程的步骤，尽可能的让使用者花最少的时间。接着，将精简化的表单或栏位放置于该页面上，除了可让使用者直接操作外，使用者也可借此预估完成所需的时间，这样他们进行操作的意愿会更高。

        电子商务网站页面 设计宝典 (三)
       电子商务网站页面 设计宝典 (二)
        电子商务网站页面 设计宝典 (一)

更多有关广东网站建设、深圳网站设计、网站制作、微信营销、移动网站建设、微信分销商城开发、M2O/跨境电商开发、企业各种互联网应用开发及企业形象设计等互联网应用服务详情公司官网：http://www.56xd.cn/