吸引人的第一視覺區，留住使用者
「接近律」與「封閉律」讓使用者快速理解頁麵元素
移動按鍵上的用字遣詞大大影響頁麵轉換率
可以點的東西就要「看起來可以點」
重要資訊主動展開在頁麵上，不要隨易使用頁簽隱藏內容
頁麵底部與Footer比你想像的重要
網頁文案這樣寫，溝通更容易
如何掌控使用者在網站上的視線
重點一、吸引人的第一視覺區，留住使用者
第一視覺區是進入網站後的第一印象，許多網站的跳離率過高，與第一視覺區的設計有很大的關係！設計第一視覺區的基本要求就是「吸引使用者留在網站，繼續瀏覽」，其中四個重點為：(1) 僅保留精華資訊，以節省高度、(2) 設置頁麵標題，協助使用者快速理解頁麵內容(3) 讓使用者理解頁麵下方還有內容、(4) 運用圖片增加畫麵吸引力。
以Amazon網站首頁為例，無論以1024 x 768或1280 x 800等解析度瀏覽網站，第一視覺區中滿足了上述四個元素，放置了最重要的資訊、圖片，並讓使用者感覺網頁下方還有內容，增加往下瀏覽的意願。
【圖一】Amazon首頁第一視覺區
（圖片來源：Amazon網站）
重點二、「接近律」與「封閉律」讓使用者快速理解頁麵元素
(1) 接近律 (proximity)
簡jian單dan的de說shuo就jiu是shi運yun用yong人ren類lei視shi覺jiao會hui將jiang鄰lin近jin的de東dong西xi分fen成cheng同tong一yi組zu的de特te性xing，所suo以yi在zai網wang站zhan上shang如ru果guo想xiang要yao將jiang一yi群qun元yuan素su讓rang使shi用yong者zhe視shi為wei同tong一yi群qun體ti，可ke以yi增zeng加jia和he其qi他ta元yuan素su之zhi間jian的de空kong間jian，並bing將jiang同tong元yuan素su之zhi間jian的de距ju離li拉la近jin。
(2) 封閉律 (closure)
簡單的說就是運用線、圖或標題分割區域，讓看的人更能理解區域間的差別。
下圖二是beBit網(wang)站(zhan)中(zhong)的(de)顧(gu)客(ke)與(yu)成(cheng)果(guo)頁(ye)麵(mian)。左(zuo)方(fang)的(de)網(wang)站(zhan)圖(tu)片(pian)與(yu)右(you)方(fang)的(de)成(cheng)效(xiao)與(yu)說(shuo)明(ming)放(fang)置(zhi)位(wei)置(zhi)接(jie)近(jin)，兩(liang)個(ge)案(an)例(li)間(jian)用(yong)灰(hui)色(se)的(de)線(xian)區(qu)隔(ge)，更(geng)明(ming)顯(xian)的(de)做(zuo)出(chu)案(an)例(li)間(jian)的(de)區(qu)隔(ge)。
【圖二】beBit網站區隔元素的設計
（圖片來源：beBit網站）
重點三、移動按鍵上的用字遣詞大大影響頁麵轉換率
網頁之間基本上是藉由連結移動，但是一般連結的點擊率10%已(yi)經(jing)算(suan)是(shi)高(gao)的(de)，因(yin)此(ci)用(yong)字(zi)要(yao)讓(rang)使(shi)用(yong)者(zhe)易(yi)於(yu)聯(lian)想(xiang)，增(zeng)加(jia)點(dian)擊(ji)意(yi)願(yuan)。圖(tu)三(san)是(shi)一(yi)個(ge)旅(lv)遊(you)網(wang)站(zhan)的(de)例(li)子(zi)，在(zai)首(shou)頁(ye)時(shi)，使(shi)用(yong)者(zhe)想(xiang)找(zhao)飯(fan)店(dian)，而(er)移(yi)動(dong)按(an)鍵(jian)上(shang)若(ruo)是(shi)用(yong)「訂房」兩字，使用者會誤以為是下直接訂單，因而不願意點擊，若改為「搜索住宿」後，點擊率大大提升。
【圖三】在首頁想引導使用者搜索住宿，就不要使用「訂房」兩字在移動按鍵上
資料來源：beBit
重點四、可以點的東西就是要「看起來可以點」
qianmianwomentidaole，yaorangshiyongzhedianjineirongbenshenjiushiyijianburongyideshiqing，ruguoshiyongzhezaiwangyeshangwufabianrenchulianjiedehua，jishizhunbeilexiyinrendeneirongyetulaowugong。suiranbianpinghuadeshejisuizheiOS7推出引起風潮，但從達成「讓使用者點下去」的目的來看，能點的東西「看起來可以點」更重要！
(1) 藍色或有底線的文字
在藍色文字下方加上底線是沿用到今天的基本手法。由於近年重視文字的易讀性及整體設計，不使用藍色底線的網頁也在增加，但從beBit至今觀察到的使用者行為，「藍色」或「底線」還是讓使用者辨認出連結的重要因素，因此請盡量保留其中元素之一。另外，在並非連結的文字使用「藍字」或「底線」的話，會讓人誤認為可以點擊，要盡量避免。
(2) 移動按鍵要有按壓感
關於移動按鍵的裝飾，具有「可以按下」的感覺十分重要。通常在前端加入符號，賦予按鈕網頁連結感（一般為箭頭或三角形），或在按鍵旁加入層次或陰影，或使用帶有圓角的矩形，便可以為按鍵加上按壓感。
【圖四】具有「按壓感」的移動按鍵
重點五、重要資訊主動展開在頁麵上，不要隨易使用頁簽隱藏內容
許多網站喜歡用頁簽（Tab）defangshisheji，danyeqiandezhimingchuzaishiyongzhemeiyouqiangliedongjixunzhaozixunshi，henrongyihulveyeqianyizhimeikandaozangzaiyeqianzhongdezhongyaoneirong。shejiwangzhanshiyaokaolvshiyongzheshangwangdexinjing，youxiewangzhanpianxianggongnengxingwangzhan（如：網路銀行），有些網站是娛樂型網站（如：網購平台）。使用者造訪功能型網站時，尋找資訊的動機強烈，即便我們隻放一個關鍵字，使用者也有意願找到那個關鍵字並點擊；但(dan)娛(yu)樂(le)型(xing)網(wang)站(zhan)不(bu)一(yi)樣(yang)，一(yi)般(ban)網(wang)購(gou)平(ping)台(tai)的(de)首(shou)頁(ye)瀏(liu)覽(lan)情(qing)境(jing)都(dou)是(shi)打(da)發(fa)時(shi)間(jian)，若(ruo)使(shi)用(yong)頁(ye)簽(qian)等(deng)隱(yin)藏(zang)資(zi)訊(xun)的(de)設(she)計(ji)，這(zhe)些(xie)被(bei)隱(yin)藏(zang)起(qi)來(lai)的(de)內(nei)容(rong)很(hen)有(you)可(ke)能(neng)就(jiu)直(zhi)接(jie)被(bei)忽(hu)略(lve)了(le)！網頁設計師在思考頁麵內容應該如何配置時，一定要一並考慮使用者造訪網站的積極性，才不會誤將重要內容的曝光度打折扣。
重點六、頁麵底部與Footer遠比你想像的重要
dangshiyongzhedeyemianladaodixiashi，daibiaotayijingkanwanyixiangneirong，cishishitamenxinyouyulikanqitaneirongdeshiji。weileyanxuliulanxingwei，yemiandedibushigekeyiliyongdezhongyaoquyu。yinci，tuijianshangpinhuoguanlianxingshangpinyinggaiyaofangdedifangshiyemiandibuerfeidingbu。lingwai，mega footer的(de)運(yun)用(yong)也(ye)是(shi)延(yan)續(xu)瀏(liu)覽(lan)情(qing)境(jing)的(de)好(hao)工(gong)具(ju)，蠻(man)適(shi)合(he)運(yun)用(yong)在(zai)網(wang)購(gou)平(ping)台(tai)這(zhe)種(zhong)瀏(liu)覽(lan)頁(ye)數(shu)越(yue)高(gao)越(yue)好(hao)的(de)網(wang)站(zhan)。許(xu)多(duo)網(wang)站(zhan)設(she)計(ji)師(shi)花(hua)了(le)很(hen)多(duo)心(xin)思(si)設(she)計(ji)了(le)每(mei)頁(ye)的(de)內(nei)容(rong)，但(dan)卻(que)忽(hu)略(lve)了(le)在(zai)頁(ye)麵(mian)底(di)部(bu)建(jian)立(li)與(yu)其(qi)他(ta)頁(ye)麵(mian)的(de)連(lian)結(jie)，導(dao)致(zhi)使(shi)用(yong)者(zhe)看(kan)完(wan)一(yi)頁(ye)內(nei)容(rong)後(hou)就(jiu)打(da)住(zhu)，這(zhe)真(zhen)的(de)很(hen)可(ke)惜(xi)！未來在設計你的網站時，也不要輕易忽視頁尾的區域！
【圖五】JAL網站的Mega footer，可延續瀏覽情境
更多優秀網站設計,專業網站設計技巧就在歡迎訪問：北京分形科技網站設計公司
