技術(shù)資訊
教你如何使用攝影來(lái)優(yōu)化網(wǎng)頁(yè)設(shè)計(jì)
2014-12-31 15:12:14
在青島網(wǎng)站設(shè)計(jì)當(dāng)中,網(wǎng)站的優(yōu)化對(duì)我們的網(wǎng)站非常的重要,今天我給大家提供一個(gè)新的方法來(lái)優(yōu)化您的網(wǎng)頁(yè),可以說(shuō)對(duì)于攝影師而言,取景然后布局三分法是非常熟悉的概念。管它是非常引人入勝的概念,但是在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)的時(shí)候,幾乎沒(méi)有人會(huì)拿三分法來(lái)說(shuō)事兒。當(dāng)然,這并不意味著不可能,只是這種跨領(lǐng)域的事情很少被注意到罷了。
其中為何提供三分?
也許你會(huì)問(wèn),為什么一定要三分呢?這種奇怪的設(shè)定到底是從何而來(lái)?還好,我可以很高興地告訴你這玩意和數(shù)學(xué)定理抑或復(fù)雜的邏輯推理都沒(méi)有關(guān)系,也沒(méi)有太多的必要在這個(gè)東西的來(lái)源上過(guò)度深究。
三分法僅僅是來(lái)自于傳統(tǒng)藝術(shù),目前在攝影中運(yùn)用得尤其多??v橫三分,整個(gè)布局被分為9個(gè)平均的區(qū)塊,橫向縱向各有2條分界線。三分法規(guī)定,為了盡可能吸引觀者的注意力,視覺(jué)重心或者最吸引人的東西應(yīng)該盡量靠近四條線相交處。
你可以在WDD的這篇文章中找到絕佳的實(shí)例。很多時(shí)候非對(duì)稱(chēng)的布局常常能讓整個(gè)頁(yè)面更加富有生趣,但是這并不意味著著任何時(shí)候都得用非對(duì)稱(chēng)布局,因?yàn)樵谟械膱?chǎng)合,對(duì)稱(chēng)布局會(huì)更有意思,而在這個(gè)時(shí)候,三分法則意義并不大。
了解三分法的柵格
四條線,四個(gè)焦點(diǎn),九個(gè)區(qū)塊,這就是三分法下的柵格框架。許多網(wǎng)站的首頁(yè)設(shè)計(jì)都符合F式布局或者Z式布局,用戶也已經(jīng)習(xí)慣了這樣的瀏覽方式,通常視覺(jué)的起點(diǎn)都是左上角,這也是設(shè)計(jì)師需要關(guān)注的首個(gè)區(qū)塊。
這也就意味著,左上方的交點(diǎn)處應(yīng)該與頁(yè)面的某個(gè)重要內(nèi)容相重疊。交點(diǎn)處并不是非要放置鏈接或者圖片(當(dāng)然非要放也并非不可),它更像是一個(gè)標(biāo)記,用以區(qū)分布局的一個(gè)重要節(jié)點(diǎn)。比如頁(yè)面標(biāo)題的起始點(diǎn)可以與之重疊,整個(gè)標(biāo)題與橫向第一條線相齊平,然后在標(biāo)題下放置Banner圖之類(lèi)的內(nèi)容。
在青島網(wǎng)站建設(shè)中值得注意的是,使用三分法來(lái)分析網(wǎng)頁(yè)設(shè)計(jì)更多的是一個(gè)用戶體驗(yàn)設(shè)計(jì)上的概念,而非一項(xiàng)完整的設(shè)計(jì)準(zhǔn)則。所以,如果你想借助這一概念來(lái)分析網(wǎng)頁(yè)設(shè)計(jì)的話,建議將網(wǎng)頁(yè)在瀏覽器中打開(kāi)之后截圖分析處理,完整的網(wǎng)頁(yè)太長(zhǎng),而且用戶瀏覽永遠(yuǎn)是基于屏幕而非一次看完整個(gè)頁(yè)面,所以也沒(méi)有必要使用整個(gè)頁(yè)面,截圖足以。如果設(shè)計(jì)尚處于原型階段,那么建議參考屏幕比例來(lái)截取分析。
所以,你應(yīng)該從用戶的瀏覽習(xí)慣出發(fā),結(jié)合三分法來(lái)進(jìn)行分析優(yōu)化。當(dāng)用戶瀏覽網(wǎng)頁(yè)的時(shí)候會(huì)下意識(shí)注意到關(guān)鍵部位,正確的使用三分法來(lái)設(shè)計(jì)頁(yè)面,你會(huì)發(fā)現(xiàn)這種3×3的柵格能幫你帶來(lái)極具啟發(fā)性的設(shè)計(jì)。
其實(shí)在版式設(shè)計(jì)中,也有類(lèi)似的原則和規(guī)范。比如,當(dāng)你在頁(yè)面頂部使用大Banner圖的時(shí)候,它通常會(huì)占據(jù)頁(yè)面大概2/3的高,類(lèi)似的,標(biāo)題和正文的字體大小也需要大小對(duì)比,讀者會(huì)自然而然地注意到更大的Banner圖、標(biāo)題和副標(biāo)題。大小對(duì)比是一方面,另外一方面還需要考慮頁(yè)面上圖片和文字的位置。簡(jiǎn)單的使用三分法并不能確保構(gòu)圖的飽滿,將九宮格置于頁(yè)面上,適當(dāng)?shù)卣{(diào)整頁(yè)面的元素的位置和中心之后,會(huì)好不少。
三分法的優(yōu)勢(shì)在于它可以兼容非對(duì)稱(chēng)式布局,也可以用來(lái)優(yōu)化對(duì)稱(chēng)式布局。兩種布局靈活搭配,借助三分法來(lái)突出頁(yè)面重點(diǎn),也掌握頁(yè)面平衡,如此才能調(diào)教出優(yōu)秀的網(wǎng)頁(yè)。
近期更新
- [2023-07-26 14:17:28] 為品牌賦能,海外官網(wǎng)品牌數(shù)字化
- [2023-05-06 10:32:26] 青島網(wǎng)站建設(shè)公司,高端網(wǎng)站定制,一站式網(wǎng)站服務(wù)——力圖數(shù)字科技
- [2023-04-27 13:47:54] 高端定制網(wǎng)站建設(shè)——從滿足預(yù)期到走向卓越
- [2023-04-11 09:17:49] H5頁(yè)面設(shè)計(jì)開(kāi)發(fā)——移動(dòng)端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數(shù)字科技配套網(wǎng)站服務(wù)支持
- [2021-05-18 10:14:11] 青島網(wǎng)站建設(shè)的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網(wǎng)建設(shè)項(xiàng)目
- [2021-03-05 10:34:45] 移動(dòng)互聯(lián)時(shí)代房地產(chǎn)行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢(shì)?為什么要開(kāi)發(fā)微信小程序?
- [2021-01-08 17:28:04] 網(wǎng)站建設(shè)最容易忽略的人性化設(shè)計(jì)
- [2020-12-16 16:55:32] 建設(shè)一個(gè)常規(guī)的公司網(wǎng)站建設(shè)成本大概是多少?
延伸閱讀
- [2014-10-27 10:13:14] 網(wǎng)站建設(shè)與設(shè)計(jì)應(yīng)掌握的16條原則性問(wèn)題
- [2011-11-19 22:40:22] 青島網(wǎng)站設(shè)計(jì) 如何選擇網(wǎng)站關(guān)鍵詞
- [2012-05-04 23:43:59] DEDE數(shù)據(jù)庫(kù)批量替換
- [2012-11-08 17:18:12] 海信地產(chǎn)網(wǎng)站設(shè)計(jì)完成
- [2011-10-09 23:40:11] 青島網(wǎng)站制作優(yōu)化的發(fā)展趨勢(shì)
- [2014-12-02 23:16:32] 新老網(wǎng)站被百度K站后的原因分析與解決辦法
- [2015-03-20 09:07:39] 網(wǎng)站被降權(quán)后的表現(xiàn)及處理方案?
- [2011-11-07 22:06:08] 網(wǎng)頁(yè)設(shè)計(jì)與用戶瀏覽體驗(yàn)-分析
- [2011-12-31 12:52:00] 彈出窗口控制代碼匯總
- [2014-11-29 13:24:10] 網(wǎng)頁(yè)設(shè)計(jì)中的按鈕小竅門(mén)
- [2011-10-23 17:01:00] 青島網(wǎng)站設(shè)計(jì) 如何向搜索引擎提交網(wǎng)站地圖
- [2015-01-10 17:24:53] Windows10會(huì)有32位系統(tǒng)么?會(huì)對(duì)我們青島網(wǎng)站建設(shè)又影響嗎?
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
青島網(wǎng)站設(shè)計(jì)哪家好 力圖 青島高端網(wǎng)站建設(shè)公司哪家好 微信營(yíng)銷(xiāo)的優(yōu)勢(shì) 青島網(wǎng)站優(yōu)化 用戶界面 html和css 交互設(shè)計(jì) 網(wǎng)站制作 青島海洋投資集團(tuán) 青島網(wǎng)站建設(shè)基礎(chǔ)知識(shí) 營(yíng)銷(xiāo)型網(wǎng)站建設(shè) 審美 頁(yè)面設(shè)計(jì) 圖形網(wǎng)格 程序開(kāi)發(fā) 網(wǎng)站建設(shè),手機(jī)網(wǎng)站 IT資訊 H5定制設(shè)計(jì) 青島網(wǎng)站SEO 蘋(píng)果系統(tǒng) 視覺(jué)靈感 企業(yè)建站 扁平化設(shè)計(jì) 營(yíng)銷(xiāo)策略 微官網(wǎng)帶來(lái)的好處 搜索引擎 網(wǎng)站設(shè)計(jì)趨勢(shì) 青島抖音小程序開(kāi)發(fā) 青島高端網(wǎng)站建設(shè)