報(bào)道公司事件 · 傳播行業(yè)動(dòng)態(tài)
做網(wǎng)站設(shè)計(jì),總覺(jué)得頁(yè)面亂乎乎的?其實(shí)秘密就在于“點(diǎn)、線、面” 這三個(gè)基礎(chǔ)元素里!不用學(xué)復(fù)雜的設(shè)計(jì)理論,只要搞懂以下這幾點(diǎn),就能讓網(wǎng)站既好看又好逛,下面一起來(lái)看看吧!
“點(diǎn)”:小元素也能當(dāng)“視覺(jué)向?qū)А?/p>
網(wǎng)站里的按鈕(比如 “立即購(gòu)買(mǎi)”“提交表單”)、圖標(biāo)(比如購(gòu)物車(chē)、搜索放大鏡)、數(shù)字都是“點(diǎn)”。
“點(diǎn)”用好了能讓用戶一眼找到重點(diǎn):比如把 “立即購(gòu)買(mǎi)”按鈕做成紅色圓形,和周?chē)疑淖謪^(qū)分開(kāi),用戶不用找就能看到;圖標(biāo)可以選簡(jiǎn)潔的線條款,比如用小房子圖標(biāo)代表“首頁(yè)”,比寫(xiě)文字更直觀;重要的數(shù)字要用加粗的橙色突出,比如“限時(shí)折扣 5 折”,讓用戶掃一眼就知道有優(yōu)惠。
“線”:幫用戶“理清思路不迷路”
網(wǎng)站里的導(dǎo)航欄分割線、內(nèi)容區(qū)域邊框、表格線條都是“線”。
線的主要作用是“劃分區(qū)域、引導(dǎo)流向”:比如頂部導(dǎo)航欄用細(xì)線把 “首頁(yè)、商品、關(guān)于我們” 分開(kāi),用戶能清楚的找到每個(gè)版塊在哪;文章頁(yè)用虛線分隔段落,讀起來(lái)不費(fèi)勁;表單里用橫線區(qū)分“姓名、電話、地址” 等輸入框,用戶填信息的時(shí)候不會(huì)漏項(xiàng)。要注意線別太粗太密,不然會(huì)影響觀感。

“面”:撐起網(wǎng)站“整體框架”
網(wǎng)站里的頭部Banner、商品展示區(qū)、底部版權(quán)欄都是“面”。
面的作用是“定布局、聚視線”:比如首頁(yè)頂部用全屏 Banner 展示核心活動(dòng),一下子抓住了用戶的注意力;商品區(qū)可以用白色背景面,把商品圖片和文字框起來(lái),避免和其他內(nèi)容混在一起;底部用深色背景面,和頂部 Banner 呼應(yīng),讓頁(yè)面有始有終,顯得完整。
還有個(gè)小技巧,那就是點(diǎn)線面要配合著用:
比如用“點(diǎn)”(按鈕)突出 “立即報(bào)名”,用 “線”(下劃線)引導(dǎo)用戶視線到按鈕上,再用 “面”(淺色背景)把按鈕和周?chē)淖挚虺梢粋€(gè)區(qū)域,這樣既顯眼又不突兀。
同樣,也別把元素堆的太滿,比如一個(gè)板塊里,重點(diǎn)“點(diǎn)” 最多 1-2 個(gè),“線”只用來(lái)分隔關(guān)鍵區(qū)域,“面”的顏色不超過(guò)3種,不然會(huì)顯得很雜亂。
綜上所述,就是為大家總結(jié)的幾點(diǎn)有關(guān)網(wǎng)站設(shè)計(jì)時(shí)針對(duì)“點(diǎn)、線、面”這三個(gè)方面進(jìn)行的介紹,沒(méi)有思路的,可以按照以上幾個(gè)點(diǎn)來(lái),希望能做出讓用戶看的舒服、用的順暢的網(wǎng)站。
Copyright 大連網(wǎng)龍科技 版權(quán)所有 遼ICP備14006349號(hào) html - txt - xml