设计高易用性官网的8个实用小技巧
标签：
官网设计
2017.05.03
设计官网最重要的当然是达成官网目标，而易用性好坏也大大影响官网目标的达成率！ beBit将透过「设计高易用性官网的8个实用小技巧（上）」介绍北京官网制作的前6个易用性小技巧，下篇将介绍撰写网页文案及视觉动线的规划，协助读者理解高易用性官网的最基本原则。
吸引人的第一视觉区，留住使用者
「接近律」与「封闭律」让使用者快速理解页面元素
移动按键上的用字遣词大大影响页面转换率
可以点的东西就要「看起来可以点」
重要资讯主动展开在页面上，不要随易使用页签隐藏内容
页面底部与Footer比你想像的重要
网页文案这样写，沟通更容易
如何掌控使用者在官网上的视线
重点一、吸引人的第一视觉区，留住使用者
第一视觉区是登录官网后的第一印象，许多官网的跳离率过高，与第一视觉区的设计有很大的关系！设计第一视觉区的基本要求就是「吸引使用者留在官网，继续浏览」，其中四个重点为：(1) 仅保留精华资讯，以节省高度、(2) 设置页面标题，协助使用者快速理解页面内容(3) 让使用者理解页面下方还有内容、(4) 运用图片增加画面吸引力。
以Amazon官网首页为例，无论以1024 x 768或1280 x 800等解析度浏览官网，第一视觉区中满足了上述四个元素，放置了最重要的资讯、图片，并让使用者感觉网页下方还有内容，增加往下浏览的意愿。
【图一】Amazon首页第一视觉区
（图片来源：Amazon官网）
重点二、「接近律」与「封闭律」让使用者快速理解页面元素
(1) 接近律 (proximity)
简单的说就是运用人类视觉会将邻近的东西分成同一组的特性，所以在官网上如果想要将一群元素让使用者视为同一群体，可以增加和其他元素之间的空间，并将同元素之间的距离拉近。
(2) 封闭律 (closure)
简单的说就是运用线、图或标题分割区域，让看的人更能理解区域间的差别。
下图二是beBit官网中的顾客与成果页面。左方的官网图片与右方的成效与说明放置位置接近，两个案例间用灰色的线区隔，更明显的做出案例间的区隔。
【图二】beBit官网区隔元素的设计
（图片来源：beBit官网）
重点三、移动按键上的用字遣词大大影响页面转换率
网页之间基本上是藉由连结移动，但是一般连结的点击率10%已经算是高的，因此用字要让使用者易于联想，增加点击意愿。图三是一个旅游官网的例子，在首页时，使用者想找饭店，而移动按键上若是用「订房」两字，使用者会误以为是下直接订单，因而不愿意点击，若改为「搜索住宿」后，点击率大大提升。
【图三】在首页想引导使用者搜索住宿，就不要使用「订房」两字在移动按键上
资料来源：beBit
重点四、可以点的东西就是要「看起来可以点」
前面我们提到了，要让使用者点击内容本身就是一件不容易的事情，如果使用者在网页上无法辨认出连结的话，即使准备了吸引人的内容也徒劳无功。虽然扁平化的设计随着ioses7推出引起风潮，但从达成「让使用者点下去」的目的来看，能点的东西「看起来可以点」更重要！
(1) 蓝色或有底线的文字
在蓝色文字下方加上底线是沿用到今天的基本手法。由于近年重视文字的易读性及整体设计，不使用蓝色底线的网页也在增加，但从beBit至今观察到的使用者行为，「蓝色」或「底线」还是让使用者辨认出连结的重要因素，因此请尽量保留其中元素之一。另外，在并非连结的文字使用「蓝字」或「底线」的话，会让人误认为可以点击，要尽量避免。
(2) 移动按键要有按压感
关于移动按键的装饰，具有「可以按下」的感觉十分重要。通常在前端加入符号，赋予按钮网页连结感（一般为箭头或三角形），或在按键旁加入层次或阴影，或使用带有圆角的矩形，便可以为按键加上按压感。
【图四】具有「按压感」的移动按键
重点五、重要资讯主动展开在页面上，不要随易使用页签隐藏内容
许多官网喜欢用页签（Tab）的方式设计，但页签的致命处在使用者没有强烈动机寻找资讯时，很容易忽略页签以致没看到藏在页签中的重要内容。设计官网时要考虑使用者上网的心境，有些官网偏向功能型官网（如：网路银行），有些官网是娱乐型官网（如：网购平台）。使用者造访功能型官网时，寻找资讯的动机强烈，即便我们只放一个关键字，使用者也有意愿找到那个关键字并点击；但娱乐型官网不一样，一般网购平台的首页浏览情境都是打发时间，若使用页签等隐藏资讯的设计，这些被隐藏起来的内容很有可能就直接被忽略了！网页设计师在思考页面内容应该如何配置时，一定要一并考虑使用者造访官网的积极性，才不会误将重要内容的曝光度打折扣。
重点六、页面底部与Footer远比你想像的重要
吸引人的第一视觉区，留住使用者
「接近律」与「封闭律」让使用者快速理解页面元素
移动按键上的用字遣词大大影响页面转换率
可以点的东西就要「看起来可以点」
重要资讯主动展开在页面上，不要随易使用页签隐藏内容
页面底部与Footer比你想像的重要
网页文案这样写，沟通更容易
如何掌控使用者在官网上的视线
重点一、吸引人的第一视觉区，留住使用者
第一视觉区是登录官网后的第一印象，许多官网的跳离率过高，与第一视觉区的设计有很大的关系！设计第一视觉区的基本要求就是「吸引使用者留在官网，继续浏览」，其中四个重点为：(1) 仅保留精华资讯，以节省高度、(2) 设置页面标题，协助使用者快速理解页面内容(3) 让使用者理解页面下方还有内容、(4) 运用图片增加画面吸引力。
以Amazon官网首页为例，无论以1024 x 768或1280 x 800等解析度浏览官网，第一视觉区中满足了上述四个元素，放置了最重要的资讯、图片，并让使用者感觉网页下方还有内容，增加往下浏览的意愿。
【图一】Amazon首页第一视觉区
（图片来源：Amazon官网）
重点二、「接近律」与「封闭律」让使用者快速理解页面元素
(1) 接近律 (proximity)
简单的说就是运用人类视觉会将邻近的东西分成同一组的特性，所以在官网上如果想要将一群元素让使用者视为同一群体，可以增加和其他元素之间的空间，并将同元素之间的距离拉近。
(2) 封闭律 (closure)
简单的说就是运用线、图或标题分割区域，让看的人更能理解区域间的差别。
下图二是beBit官网中的顾客与成果页面。左方的官网图片与右方的成效与说明放置位置接近，两个案例间用灰色的线区隔，更明显的做出案例间的区隔。
【图二】beBit官网区隔元素的设计
（图片来源：beBit官网）
重点三、移动按键上的用字遣词大大影响页面转换率
网页之间基本上是藉由连结移动，但是一般连结的点击率10%已经算是高的，因此用字要让使用者易于联想，增加点击意愿。图三是一个旅游官网的例子，在首页时，使用者想找饭店，而移动按键上若是用「订房」两字，使用者会误以为是下直接订单，因而不愿意点击，若改为「搜索住宿」后，点击率大大提升。
【图三】在首页想引导使用者搜索住宿，就不要使用「订房」两字在移动按键上
资料来源：beBit
重点四、可以点的东西就是要「看起来可以点」
前面我们提到了，要让使用者点击内容本身就是一件不容易的事情，如果使用者在网页上无法辨认出连结的话，即使准备了吸引人的内容也徒劳无功。虽然扁平化的设计随着ioses7推出引起风潮，但从达成「让使用者点下去」的目的来看，能点的东西「看起来可以点」更重要！
(1) 蓝色或有底线的文字
在蓝色文字下方加上底线是沿用到今天的基本手法。由于近年重视文字的易读性及整体设计，不使用蓝色底线的网页也在增加，但从beBit至今观察到的使用者行为，「蓝色」或「底线」还是让使用者辨认出连结的重要因素，因此请尽量保留其中元素之一。另外，在并非连结的文字使用「蓝字」或「底线」的话，会让人误认为可以点击，要尽量避免。
(2) 移动按键要有按压感
关于移动按键的装饰，具有「可以按下」的感觉十分重要。通常在前端加入符号，赋予按钮网页连结感（一般为箭头或三角形），或在按键旁加入层次或阴影，或使用带有圆角的矩形，便可以为按键加上按压感。
【图四】具有「按压感」的移动按键
重点五、重要资讯主动展开在页面上，不要随易使用页签隐藏内容
许多官网喜欢用页签（Tab）的方式设计，但页签的致命处在使用者没有强烈动机寻找资讯时，很容易忽略页签以致没看到藏在页签中的重要内容。设计官网时要考虑使用者上网的心境，有些官网偏向功能型官网（如：网路银行），有些官网是娱乐型官网（如：网购平台）。使用者造访功能型官网时，寻找资讯的动机强烈，即便我们只放一个关键字，使用者也有意愿找到那个关键字并点击；但娱乐型官网不一样，一般网购平台的首页浏览情境都是打发时间，若使用页签等隐藏资讯的设计，这些被隐藏起来的内容很有可能就直接被忽略了！网页设计师在思考页面内容应该如何配置时，一定要一并考虑使用者造访官网的积极性，才不会误将重要内容的曝光度打折扣。
重点六、页面底部与Footer远比你想像的重要
当使用者的页面拉到底下时，代表他已经看完一项内容，此时是他们心有余力看其他内容的时机。为了延续浏览行为，页面的底部是个可以利用的重要区域。因此，推荐商品或关联性商品应该要放的地方是页面底部而非顶部。另外，mega footer的运用也是延续浏览情境的好工具，蛮适合运用在网购平台这种浏览页数越高越好的官网。许多官网设计师花了很多心思设计了每页的内容，但却忽略了在页面底部建立与其他页面的连结，导致使用者看完一页内容后就打住，这真的很可惜！未来在设计你的官网时，也不要轻易忽视页尾的区域！
【图五】JAL官网的Mega footer，可延续浏览情境
更多优秀官网设计,专业官网设计技巧就在欢迎访问：利记亚洲官网设计公司
400-6446-365 / 010-64928252
我想要个更针对我需求的方案
也许您需要专业的服务，欢迎来电咨询
您的需求，是我们前进最大的动力
关于我们
利记亚洲有限公司成立于2003年，是一家以AI为核心驱动力，提供网络品牌策划、AI互联网服务、WEB3服务、AI人工智能解决方案的综合服务商
我们一直秉承的经营理念：责任、热情、品质、包容
主要业务范围：AI互联网服务（官网建设,官网群,短视频社交平台,APP,小程序）AI人工智能行业解决方案（智慧博物馆,智慧公园,智慧景区,智慧社区,智慧医疗,智慧校园,）IoT智能物联产品（智能步道,AR太极,AI健身,AI导览,AI单车,智慧树）WEB3（区块链,元宇宙,NFT数字藏品）