網頁布局就像文章排版,優(yōu)秀的布局給人體驗感受會更加輕松舒服。
首先,頁面布局的重要性不言而喻。一個非常混亂,頁面元素沒有邏輯又沒有良好主次區(qū)分的頁面不僅讓用戶體驗非常糟糕,很有可能喪失用戶對整個網站的信任度。相反一個好的優(yōu)秀的頁面布局不僅會讓用戶對網站的信任度大大提升,并且在瀏覽或者完成任務時獲得非常愉悅的體驗。
現(xiàn)在跟大家分享一下我覺得頁面布局里幾個基礎但很重要的原則。
1、對齊
對齊原則是頁面布局中很重要的原則。并且對齊原則不僅要包括那些可見的框線的對齊。還應該考慮很多隱形線條的對齊。如簡書的頁面分割線都是一個寬度。文字和頭像都靠著這個寬度的邊界左右對齊,左右縱向形成一條看不見的線。
一個講究對齊的頁面會讓用戶覺得有秩序感,并且獲得非常好的視覺感受。
2、親密
親密即將空間上接近的內容,歸類為一組。如下圖
如上圖來自簡書,平時我們也會經常遇到類似的排版。我們可以看到上圖中有三個內容:上分割線、內容區(qū)、下分割線??梢钥吹?
內容區(qū)間的間距小于內容區(qū)與分割線的間距。并且內容區(qū)間的間距相等也表明他們是同一級的內容。
3、一致性
參照IOS設計規(guī)范,一款內部一致的應用能夠貫徹相同的標準和規(guī)范:使用系統(tǒng)提供的界面元素、風格統(tǒng)一(眾所周知)的圖標、標準的字體樣式和一致的措辭。統(tǒng)一的界面跳轉規(guī)則和過渡動畫,提示和引導的方式等。
4、重復
重復可能是產品主題或者logo的重復出現(xiàn),以提醒用戶現(xiàn)在正在使用該產品,達到強化產品主題和特色的目的。也可以是產品核心重要功能的重復引導,以達到產品本身的目的。
5、對比
對比原則的合理利用可以利于信息的區(qū)分,如新聞標題和內容的字體大小粗細的對比。除此之外還有顏色的對比,疏密對比等。如在一個新產品的展示頁面可以提供一個顏色和周圍元素及背景色差異很明顯的下載按鈕或鏈接,以吸引更多的注意,達到更多的下載量。
以上這些原則不僅可以在設計和實現(xiàn)頁面時考慮,還可以用在對頁面布局或交互設計的走查環(huán)節(jié)。當然頁面布局還有很多其他的原則如簡潔原則、情感原則等,都是一個優(yōu)秀合理的頁面布局應該具備的。
愛盈利(aiyingli.com)移動互聯(lián)網最具影響力的盈利指導網站。定位于服務移動互聯(lián)網創(chuàng)業(yè)者,移動盈利指導。我們的目標是讓盈利目標清晰可見!降低門檻,讓缺乏經驗、資金有限的個人和團隊獲得經驗和機會,提高熱情,激發(fā)產品。【轉載說明】  若上述素材出現(xiàn)侵權,請及時聯(lián)系我們刪除及進行處理:[email protected]