網(wǎng)頁(yè)設(shè)計(jì)中多元素是如何做到同一同等
情勢(shì)美法則是人類在創(chuàng)造美的情勢(shì)和過(guò)程中對(duì)美的情勢(shì)規(guī)律的總結(jié)概括,世間萬(wàn)物的美都可以用情勢(shì)美法則來(lái)概括。在平面構(gòu)成中也有情勢(shì)美法則:同一和轉(zhuǎn)變,對(duì)稱和平衡,節(jié)奏和韻律,對(duì)比和調(diào)和。前面跟大家有分享了對(duì)比、留白在網(wǎng)頁(yè)當(dāng)中的運(yùn)用,今天我們繼承來(lái)分享網(wǎng)頁(yè)當(dāng)中那么多元素是如何做到同一同等的。
在視覺(jué)上的同一可以表現(xiàn)在:圖片,色彩;區(qū)塊;布局;字體,視覺(jué)元素。此外,還有一個(gè)交互上的同一。
1、圖片同一
圖片同一表現(xiàn)在圖片大小尺寸上的同一,顏色色系上的同一和圖片風(fēng)格的同一。
不管是京東照舊天貓?zhí)詫?,這些商城在網(wǎng)站上的圖片處理就用了如許的同一原則。不一樣的場(chǎng)景下對(duì)圖片的要求也都不一樣。比如京東商城的首頁(yè),每一個(gè)區(qū)塊起到肯定的導(dǎo)航性作用,在如許的場(chǎng)景下,必要的圖片都是比較簡(jiǎn)潔而不是背景復(fù)雜的。下面我做了一個(gè)錯(cuò)誤的示例給大家演示:
左圖是官網(wǎng)的圖片,右圖是一個(gè)錯(cuò)誤示范。顯而易見(jiàn),左圖的展示性和可讀性都比較強(qiáng),視覺(jué)結(jié)果也比較好。右圖之所以覺(jué)得不悅目是由于圖片大小不同等,圖片的背景顏色也不同等,所以看起來(lái)分外不和諧。
好了,如今應(yīng)該有人會(huì)想問(wèn),那京東或是天貓?zhí)詫毻ㄟ^(guò)搜索后進(jìn)去的頁(yè)面里面的產(chǎn)品配圖不是五顏六色的嗎,那怎么看起來(lái)也沒(méi)有覺(jué)得不和諧。
這些界面的同一同等性表現(xiàn)在產(chǎn)品區(qū)塊的大小尺寸上和團(tuán)體的樣式上,除了產(chǎn)品圖不一樣,其他的布局樣式、區(qū)塊大小都是一
本文地址:http://m.likemindfilms.com/tutorial/di73.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見(jiàn)頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺(jué)設(shè)計(jì)分享—專題頁(yè)面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏