網頁使用者介面設計中斑馬紋的應用

來源:互聯網
上載者:User

網頁製作Webjx文章簡介:網頁設計中的斑馬線應用.

列表中使用兩種相同的樣式但顏色不同的背景,來間隔顯示的內容。看了當下很多介面以及自身平時的設計之後,發現實際情況中使用的斑馬紋在原來基礎上通過視覺的處理有了擴充,不僅僅是一深一淺單純顏色的配合使用。

大家好,我叫斑馬紋

列表中使用兩種相同的樣式但顏色不同的背景,來間隔顯示的內容。
當然這個釋義我是借鑒《designing interfaces》來的,略有不同。我肯定承認這是一本神作,不過看了當下很多介面以及自身平時的設計之後,發現實際情況中使用的斑馬紋在原來基礎上通過視覺的處理有了擴充,不僅僅是一深一淺單純顏色的配合使用。


圖一:最正宗的斑馬紋應用


圖二:斑馬紋的延伸 – 內容高度不一致的應用


圖三:斑馬紋的延伸 – 增加線條的分割


圖四:斑馬紋的延伸 – 僅使用分割線


圖五:斑馬紋的延伸 – 單行色彩坡形形成的錯落分割


圖六:斑馬紋的延伸 – 僅僅使用留空來分割(有一種神交的感覺)

什麼時候你該披上我:

斑馬紋的使用是當在列表中,各行的內容(每一行中又有多行內容)甚至有多列資料在視覺上很難區分,起到一種規整的作用。從而使使用者在閱讀每一行的單個甚至多列內容時形成聯絡。

有時候在帶有標題的內容時同樣使用深淺顏色作為區分,形成斑馬紋的效果。比如picasa的內容區設計。當然這是一種特例,但細心留意,卻也在被流行開來。


圖七:picasa的斑馬紋特殊用法

[1] [2] [3] [4]  下一頁



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

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

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