B2B行業網站頁面元素之間的對齊標準

來源:互聯網
上載者:User

  網頁裡各種元素水平方向的對齊主要有:靠左對齊、靠右對齊、置中對齊和左右對齊等4種方式,常用的為靠左對齊、置中對齊,靠右對齊和左右對齊基本很少使用,尤其是左右對齊,本文作者李學江認為一般只在平面設計的時候會使用。

  1、頁面各種元素對齊的基礎知識

  A、靠左對齊在網站布局中是最常見的對齊:它整齊一致並且安全,因為大家對這種對齊很熟悉並且也樂意接受,所以對任何設計來說,靠左對齊都是最保險的對齊。

  B、在高品質網頁設計中,好的對齊佔了很大的比重:當物品排成一行時,通常看上去感覺更好。因此,使用不同的對齊來建立對比是較難的而且要更謹慎的使用,但是如果做的好的話是非常有效。比如:在文章中,我們常常是用靠左對齊的文本段落和置中對齊的標題來混合起來,這是使用不同的對齊建立對比的最好例子。

  C、從使用者視線行為來分析對齊:使用者的視線常常是從上到下,從左至右,那麼架構之間最好的就要左靠右對齊,上下對齊,讓視線更流暢。導航頁的內容連結,當使用者看完一個連結後,會接著看下一個連結,靠左對齊仍然是最好的方式。

  2、架構與架構之間的對齊

  第一部分講了,使用者的視線常常是從上到下,從左至右,那麼架構之間最好的就要左靠右對齊,上下對齊,讓視線更流暢。但是有時左邊架構的內容更高,右邊要放2個模組才可能和左邊一樣多,這個時候我們必須要確保右邊2個模組或多個模組剛好和左邊的一個架構對齊,這樣看起來才更統一。

  3、內容與小表徵圖之間的對齊

  標題列上的小表徵圖與標題列名稱、內容連結左邊的小表徵圖等,都是採用上下置中對齊,左邊靠左對齊的方式,一般內容連結左邊都有一個小表徵圖,小表徵圖右邊的標題也要靠左對齊。而且整站上下不同的架構之間,也要上下對齊。

  4、產品圖片、人物圖片等與內容的對齊

  這種方式分為兩種,水平對齊與置中對齊。

  A 文字放圖片下方:這種方式一般為置中對齊,因為如果靠左對齊,文字如果少了,會顯的比較難看,尤其是人物圖片,只有一個人名。

  B 文字放圖片右邊:文字水平方向要靠左對齊,因為使用者看了圖片,就要看圖片周圍的文字,如果採用靠右對齊或置中對齊,都會使視線不連貫。垂直方向要左右對齊,看起來更規整,一般是標題和導讀內容與圖片左右對齊。

  更多的對齊在《B2B行業門戶網站設計開發實戰研究報告》第四章第四節裡做了詳細闡述。

  5、資訊錄入提交表單頁面

  在表單頁面使操作地區對齊,將大大提升使用者完成任務的效率,所以輸入框靠左對齊是必須的,當使用者輸入完一個框後,接著往下一個框,可以節省使用者的時間。但是作為提示輸入內容的文字,則要靠右對齊最好,因為提示言有的多有的少,會造成提示言和輸入框之間產生空白地區,加重了使用者的認知負擔,使用者必須花相當多的時間以便在標籤和輸入框之間移動視線。

  操作過程中,使用者更關注輸入框本身,而不是標籤。使用者眼睛關注點的轉移速度是非常快的,並且即使不從頭閱讀標籤也能明白它的意思,對於使用者的行為分析,本文作者在《B2B行業門戶網站策劃實戰研究報告》裡做了詳細的闡述。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.