? ? ? ?首先酸些，頁(yè)面布局的重要性不言而喻宰译。一個(gè)非常混亂魄懂，頁(yè)面元素沒(méi)有邏輯又沒(méi)有良好主次區(qū)分的頁(yè)面不僅讓用戶體驗(yàn)非常糟糕沿侈，很有可能喪失用戶對(duì)整個(gè)網(wǎng)站的信任度。相反一個(gè)好的優(yōu)秀的頁(yè)面布局不僅會(huì)讓用戶對(duì)網(wǎng)站的信任度大大提升市栗，并且在瀏覽或者完成任務(wù)時(shí)獲得非常愉悅的體驗(yàn)缀拭。
? ? ? 現(xiàn)在跟大家分享一下我覺(jué)得頁(yè)面布局里幾個(gè)基礎(chǔ)但很重要的原則。
? ? ? （1）對(duì)齊
? ? ? 對(duì)齊原則是頁(yè)面布局中很重要的原則填帽。并且對(duì)齊原則不僅要包括那些可見(jiàn)的框線的對(duì)齊蛛淋。還應(yīng)該考慮很多隱形線條的對(duì)齊。如簡(jiǎn)書(shū)的頁(yè)面分割線都是一個(gè)寬度篡腌。文字和頭像都靠著這個(gè)寬度的邊界左右對(duì)齊褐荷，左右縱向形成一條看不見(jiàn)的線。
? ? ? 一個(gè)講究對(duì)齊的頁(yè)面會(huì)讓用戶覺(jué)得有秩序感嘹悼，并且獲得非常好的視覺(jué)感受叛甫。
? ? ?（2）親密
? ? ?親密即將空間上接近的內(nèi)容，歸類為一組杨伙。如下圖
? ? ? ?如上圖來(lái)自簡(jiǎn)書(shū)其监，平時(shí)我們也會(huì)經(jīng)常遇到類似的排版。我們可以看到上圖中有三個(gè)內(nèi)容：上分割線缀台、內(nèi)容區(qū)棠赛、下分割線。可以看到
內(nèi)容區(qū)間的間距小于內(nèi)容區(qū)與分割線的間距睛约。并且內(nèi)容區(qū)間的間距相等也表明他們是同一級(jí)的內(nèi)容鼎俘。
? ? ? （3）一致性
? ? ? 參照IOS設(shè)計(jì)規(guī)范，一款內(nèi)部一致的應(yīng)用能夠貫徹相同的標(biāo)準(zhǔn)和規(guī)范：使用系統(tǒng)提供的界面元素辩涝、風(fēng)格統(tǒng)一（眾所周知）的圖標(biāo)贸伐、標(biāo)準(zhǔn)的字體樣式和一致的措辭。統(tǒng)一的界面跳轉(zhuǎn)規(guī)則和過(guò)渡動(dòng)畫(huà)怔揩，提示和引導(dǎo)的方式等捉邢。
? ? ? （4）重復(fù)
? ? ?重復(fù)可能是產(chǎn)品主題或者logo的重復(fù)出現(xiàn)，以提醒用戶現(xiàn)在正在使用該產(chǎn)品商膊，達(dá)到強(qiáng)化產(chǎn)品主題和特色的目的伏伐。也可以是產(chǎn)品核心重要功能的重復(fù)引導(dǎo)，以達(dá)到產(chǎn)品本身的目的晕拆。
? ? ? （5）對(duì)比?
? ? ? 對(duì)比原則的合理利用可以利于信息的區(qū)分藐翎，如新聞標(biāo)題和內(nèi)容的字體大小粗細(xì)的對(duì)比。除此之外還有顏色的對(duì)比实幕，疏密對(duì)比等吝镣。如在一個(gè)新產(chǎn)品的展示頁(yè)面可以提供一個(gè)顏色和周圍元素及背景色差異很明顯的下載按鈕或鏈接，以吸引更多的注意昆庇，達(dá)到更多的下載量末贾。
? ? ? 以上這些原則不僅可以在設(shè)計(jì)和實(shí)現(xiàn)頁(yè)面時(shí)考慮，還可以用在對(duì)頁(yè)面布局或交互設(shè)計(jì)的走查環(huán)節(jié)整吆。當(dāng)然頁(yè)面布局還有很多其他的原則如簡(jiǎn)潔原則拱撵、情感原則等，都是一個(gè)優(yōu)秀合理的頁(yè)面布局應(yīng)該具備的掂为。
第二篇文章裕膀，歡迎大家批評(píng)指正^_^ ?~
