設(shè)計(jì)網(wǎng)站最重要的當(dāng)然是達(dá)成網(wǎng)站目標(biāo)，而易用性好壞也大大影響網(wǎng)站目標(biāo)的達(dá)成率！透過(guò)「設(shè)計(jì)高易用性網(wǎng)站的8個(gè)實(shí)用小技巧（上）」介紹網(wǎng)站制作的前6個(gè)易用性小技巧，下篇將介紹撰寫(xiě)網(wǎng)頁(yè)文案及視覺(jué)動(dòng)線(xiàn)的規(guī)劃，協(xié)助讀者理解高易用性網(wǎng)站的最基本原則。
吸引人的第一視覺(jué)區(qū)，留住使用者
「接近律」與「封閉律」讓使用者快速理解頁(yè)面元素
行動(dòng)按鍵上的用字遣詞大大影響頁(yè)面轉(zhuǎn)換率
可以點(diǎn)的東西就要「看起來(lái)可以點(diǎn)」
重要資訊主動(dòng)展開(kāi)在頁(yè)面上，不要隨易使用頁(yè)簽隱藏內(nèi)容
頁(yè)面底部與Footer比你想像的重要
網(wǎng)頁(yè)文案這樣寫(xiě)，溝通更容易
如何掌控使用者在網(wǎng)站上的視線(xiàn)
重點(diǎn)一、吸引人的第一視覺(jué)區(qū)，留住使用者
第一視覺(jué)區(qū)是進(jìn)入網(wǎng)站后的第一印象，許多網(wǎng)站的跳離率過(guò)高，與第一視覺(jué)區(qū)的設(shè)計(jì)有很大的關(guān)系！設(shè)計(jì)第一視覺(jué)區(qū)的基本要求就是「吸引使用者留在網(wǎng)站，繼續(xù)瀏覽」，其中四個(gè)重點(diǎn)為：(1) 僅保留精華資訊，以節(jié)省高度、(2) 設(shè)置頁(yè)面標(biāo)題，協(xié)助使用者快速理解頁(yè)面內(nèi)容(3) 讓使用者理解頁(yè)面下方還有內(nèi)容、(4) 運(yùn)用圖片增加畫(huà)面吸引力。
以Amazon網(wǎng)站首頁(yè)為例，無(wú)論以1024 x 768或1280 x 800等解析度瀏覽網(wǎng)站，第一視覺(jué)區(qū)中滿(mǎn)足了上述四個(gè)元素，放置了最重要的資訊、圖片，并讓使用者感覺(jué)網(wǎng)頁(yè)下方還有內(nèi)容，增加往下瀏覽的意愿。
【圖一】Amazon首頁(yè)第一視覺(jué)區(qū)
（圖片來(lái)源：Amazon網(wǎng)站）
重點(diǎn)二、「接近律」與「封閉律」讓使用者快速理解頁(yè)面元素
(1)接近律(proximity)
簡(jiǎn)單的說(shuō)就是運(yùn)用人類(lèi)視覺(jué)會(huì)將鄰近的東西分成同一組的特性，所以在網(wǎng)站上如果想要將一群元素讓使用者視為同一群體，可以增加和其他元素之間的空間，并將同元素之間的距離拉近。
(2)封閉律(closure)
簡(jiǎn)單的說(shuō)就是運(yùn)用線(xiàn)、圖或標(biāo)題分割區(qū)域，讓看的人更能理解區(qū)域間的差別。
下圖二是beBit網(wǎng)站中的顧客與成果頁(yè)面。左方的網(wǎng)站圖片與右方的成效與說(shuō)明放置位置接近，兩個(gè)案例間用灰色的線(xiàn)區(qū)隔，更明顯的做出案例間的區(qū)隔。
【圖二】beBit網(wǎng)站區(qū)隔元素的設(shè)計(jì)
（圖片來(lái)源：beBit網(wǎng)站）
重點(diǎn)三、行動(dòng)按鍵上的用字遣詞大大影響頁(yè)面轉(zhuǎn)換率
網(wǎng)頁(yè)之間基本上是藉由連結(jié)移動(dòng)，但是一般連結(jié)的點(diǎn)擊率10%已經(jīng)算是高的，因此用字要讓使用者易于聯(lián)想，增加點(diǎn)擊意愿。圖三是一個(gè)旅游網(wǎng)站的例子，在首頁(yè)時(shí)，使用者想找飯店，而行動(dòng)按鍵上若是用「訂房」兩字，使用者會(huì)誤以為是下直接訂單，因而不愿意點(diǎn)擊，若改為「搜尋住宿」后，點(diǎn)擊率大大提升。
【圖三】在首頁(yè)想引導(dǎo)使用者搜尋住宿，就不要使用「訂房」兩字在行動(dòng)按鍵上
資料來(lái)源：beBit
重點(diǎn)四、可以點(diǎn)的東西就是要「看起來(lái)可以點(diǎn)」
前面我們提到了，要讓使用者點(diǎn)擊內(nèi)容本身就是一件不容易的事情，如果使用者在網(wǎng)頁(yè)上無(wú)法辨認(rèn)出連結(jié)的話(huà)，即使準(zhǔn)備了吸引人的內(nèi)容也徒勞無(wú)功。雖然扁平化的設(shè)計(jì)隨著iOS7推出引起風(fēng)潮，但從達(dá)成「讓使用者點(diǎn)下去」的目的來(lái)看，能點(diǎn)的東西「看起來(lái)可以點(diǎn)」更重要！
(1)藍(lán)色或有底線(xiàn)的文字
在藍(lán)色文字下方加上底線(xiàn)是沿用到今天的基本手法。由于近年重視文字的易讀性及整體設(shè)計(jì)，不使用藍(lán)色底線(xiàn)的網(wǎng)頁(yè)也在增加，但從beBit至今觀(guān)察到的使用者行為，「藍(lán)色」或「底線(xiàn)」還是讓使用者辨認(rèn)出連結(jié)的重要因素，因此請(qǐng)盡量保留其中元素之一。另外，在并非連結(jié)的文字使用「藍(lán)字」或「底線(xiàn)」的話(huà)，會(huì)讓人誤認(rèn)為可以點(diǎn)擊，要盡量避免。
(2)行動(dòng)按鍵要有按壓感
關(guān)于行動(dòng)按鍵的裝飾，具有「可以按下」的感覺(jué)十分重要。通常在前端加入符號(hào)，賦予按鈕網(wǎng)頁(yè)連結(jié)感（一般為箭頭或三角形），或在按鍵旁加入層次或陰影，或使用帶有圓角的矩形，便可以為按鍵加上按壓感。
【圖四】具有「按壓感」的行動(dòng)按鍵
重點(diǎn)五、重要資訊主動(dòng)展開(kāi)在頁(yè)面上，不要隨易使用頁(yè)簽隱藏內(nèi)容
許多網(wǎng)站喜歡用頁(yè)簽（Tab）的方式設(shè)計(jì)，但頁(yè)簽的致命處在使用者沒(méi)有強(qiáng)烈動(dòng)機(jī)尋找資訊時(shí)，很容易忽略頁(yè)簽以致沒(méi)看到藏在頁(yè)簽中的重要內(nèi)容。設(shè)計(jì)網(wǎng)站時(shí)要考慮使用者上網(wǎng)的心境，有些網(wǎng)站偏向功能型網(wǎng)站（如：網(wǎng)路銀行），有些網(wǎng)站是娛樂(lè)型網(wǎng)站（如：網(wǎng)購(gòu)平臺(tái)）。使用者造訪(fǎng)功能型網(wǎng)站時(shí)，尋找資訊的動(dòng)機(jī)強(qiáng)烈，即便我們只放一個(gè)關(guān)鍵字，使用者也有意愿找到那個(gè)關(guān)鍵字并點(diǎn)擊；但娛樂(lè)型網(wǎng)站不一樣，一般網(wǎng)購(gòu)平臺(tái)的首頁(yè)瀏覽情境都是打發(fā)時(shí)間，若使用頁(yè)簽等隱藏資訊的設(shè)計(jì)，這些被隱藏起來(lái)的內(nèi)容很有可能就直接被忽略了！網(wǎng)頁(yè)設(shè)計(jì)師在思考頁(yè)面內(nèi)容應(yīng)該如何配置時(shí)，一定要一并考慮使用者造訪(fǎng)網(wǎng)站的積極性，才不會(huì)誤將重要內(nèi)容的曝光度打折扣。
重點(diǎn)六、頁(yè)面底部與Footer遠(yuǎn)比你想像的重要
當(dāng)使用者的頁(yè)面拉到底下時(shí)，代表他已經(jīng)看完一項(xiàng)內(nèi)容，此時(shí)是他們心有余力看其他內(nèi)容的時(shí)機(jī)。為了延續(xù)瀏覽行為，頁(yè)面的底部是個(gè)可以利用的重要區(qū)域。因此，推薦商品或關(guān)聯(lián)性商品應(yīng)該要放的地方是頁(yè)面底部而非頂部。另外，mega footer的運(yùn)用也是延續(xù)瀏覽情境的好工具，蠻適合運(yùn)用在網(wǎng)購(gòu)平臺(tái)這種瀏覽頁(yè)數(shù)越高越好的網(wǎng)站。許多網(wǎng)站設(shè)計(jì)師花了很多心思設(shè)計(jì)了每頁(yè)的內(nèi)容，但卻忽略了在頁(yè)面底部建立與其他頁(yè)面的連結(jié)，導(dǎo)致使用者看完一頁(yè)內(nèi)容后就打住，這真的很可惜！未來(lái)在設(shè)計(jì)你的網(wǎng)站時(shí)，也不要輕易忽視頁(yè)尾的區(qū)域！
