2017-3-20 用心設(shè)計(jì)
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
形式美法則是人類在創(chuàng)造美的形式和過(guò)程中對(duì)美的形式規(guī)律的總結(jié)概括,世間萬(wàn)物的美都可以用形式美法則來(lái)概括。在平面構(gòu)成中也有形式美法則:統(tǒng)一和變化,對(duì)稱和平衡,節(jié)奏和韻律,對(duì)比和調(diào)和。前面跟大家有分享了對(duì)比、留白在網(wǎng)頁(yè)當(dāng)中的運(yùn)用,今天我們繼續(xù)來(lái)分享網(wǎng)頁(yè)當(dāng)中那么多元素是如何做到統(tǒng)一一致的。
在視覺(jué)上的統(tǒng)一可以體現(xiàn)在:圖片,色彩;區(qū)塊;布局;字體,視覺(jué)元素。此外,還有一個(gè)交互上的統(tǒng)一。
圖片統(tǒng)一體現(xiàn)在圖片大小尺寸上的統(tǒng)一,顏色色系上的統(tǒng)一和圖片風(fēng)格的統(tǒng)一。
不管是京東還是天貓?zhí)詫殻@些商城在網(wǎng)站上的圖片處理就用了這樣的統(tǒ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é)效果也比較好。右圖之所以覺(jué)得不好看是因?yàn)閳D片大小不一致,圖片的背景顏色也不一致,所以看起來(lái)特別不協(xié)調(diào)。
好了,現(xiàn)在應(yīng)該有人會(huì)想問(wèn),那京東或是天貓?zhí)詫毻ㄟ^(guò)搜索后進(jìn)去的頁(yè)面里面的產(chǎn)品配圖不是五顏六色的嗎,那怎么看起來(lái)也沒(méi)有覺(jué)得不協(xié)調(diào)。
這些界面的統(tǒng)一一致性體現(xiàn)在產(chǎn)品區(qū)塊的大小尺寸上和整體的樣式上,除了產(chǎn)品圖不一樣,其他的布局樣式、區(qū)塊大小都是一樣的,這恰恰跟首頁(yè)相反,首頁(yè)各個(gè)區(qū)塊大小不一致,所以采用圖片一致來(lái)協(xié)同,內(nèi)頁(yè)則是區(qū)塊樣式一致,圖片不一致。但不管哪一種協(xié)調(diào)方法,界面都起到了很好的協(xié)調(diào)性。
圖片風(fēng)格上的統(tǒng)一主要體現(xiàn)在網(wǎng)頁(yè)當(dāng)中的圖片選擇上,在寫(xiě)實(shí)風(fēng)格的網(wǎng)頁(yè)中就不適合卡通的圖片,在清爽的界面當(dāng)中,就不適合勁酷的圖片。
色彩統(tǒng)一指的是網(wǎng)頁(yè)當(dāng)中色彩色系運(yùn)用的統(tǒng)一性,這樣的統(tǒng)一性可以體現(xiàn)在網(wǎng)頁(yè)中的整體色系,也可以體現(xiàn)在網(wǎng)頁(yè)當(dāng)中所有區(qū)塊標(biāo)題的顏色,甚至統(tǒng)一到整個(gè)網(wǎng)頁(yè)界面當(dāng)中按鈕的顏色搭配。一般情況下如果不知道網(wǎng)頁(yè)定什么色系好,小編給的意見(jiàn)和建議就是跟著你們的logo顏色走。
Obrigado椰子水飲料網(wǎng)站的主色調(diào)就是用了綠色與白色相結(jié)合,穿插了一些橘黃色,起到活躍畫(huà)面的作用,綠色是標(biāo)志的主色,橘黃色也是標(biāo)志的一個(gè)輔助色,可以看到整個(gè)網(wǎng)站簡(jiǎn)潔清爽,黃色和綠色并不是等比重出現(xiàn)在網(wǎng)頁(yè)當(dāng)中,就跟標(biāo)志一樣,黃色的占比少。可以訪問(wèn)看看,里面一些交互運(yùn)用也做得比較好。
都知道界面當(dāng)中的字體顯示尤為重要,所以字體一定不能讓觀者覺(jué)得亂,一定要做好統(tǒng)一。
字體可以在變化中找統(tǒng)一,不管是字體、字號(hào)或是顏色上的統(tǒng)一,切勿為了突出字體而做過(guò)多效果,反而削弱文字的可讀性。
在一個(gè)網(wǎng)站當(dāng)中,處理字體統(tǒng)一的時(shí)候,最好在界面設(shè)置的時(shí)候統(tǒng)一設(shè)置。可以借助一些建站系統(tǒng)去設(shè)置,也可以通過(guò)寫(xiě)css樣式去確定界面的字號(hào),標(biāo)題和正文的字體大小最好都統(tǒng)一一致,一定要避免首頁(yè)正文是14px,進(jìn)入到子頁(yè)面的時(shí)候字體大小就變成16px,這樣容易讓觀者產(chǎn)生一定的不舒服感。
除此,字體的選擇上也要統(tǒng)一。現(xiàn)在字庫(kù)上有很多字體,所以在選用字體的時(shí)候最好選用跟網(wǎng)頁(yè)整體風(fēng)格相符的字體。
區(qū)塊的統(tǒng)一主要體現(xiàn)在各個(gè)區(qū)塊的高度大小、邊框顏色、標(biāo)題樣式或者是區(qū)塊的整體樣式,當(dāng)然并非所有統(tǒng)一起來(lái)就是好的,要具體情況具體分析。還是上面天貓產(chǎn)品界面,那么多區(qū)塊,樣式邊框都做了統(tǒng)一,看起來(lái)整齊而有序。下圖做了錯(cuò)誤的示范,區(qū)塊的邊框做了不一樣的顏色處理,這樣的區(qū)塊一起出現(xiàn)在界面當(dāng)中時(shí)就會(huì)顯得凌亂。
Design3這個(gè)網(wǎng)站是小編用蟬知系統(tǒng)做的,用的也是一樣的區(qū)塊處理,看起來(lái)會(huì)比較簡(jiǎn)單明了。除此,瀑布流的區(qū)塊雖然區(qū)塊高度不像產(chǎn)品區(qū)塊一樣做了高度上的統(tǒng)一,但是在區(qū)塊的布局和間隙上做了一定的統(tǒng)一效果,使得界面不亂,這樣的例子有很多網(wǎng)站,比如花瓣的瀑布流設(shè)計(jì)。
布局的統(tǒng)一主要是說(shuō)網(wǎng)頁(yè)當(dāng)中一些布局設(shè)置要統(tǒng)一,不要這個(gè)導(dǎo)航進(jìn)去的側(cè)邊欄在左邊,下一個(gè)導(dǎo)航進(jìn)去側(cè)邊欄在右邊,這樣的界面會(huì)讓人摸不著頭腦,用戶需要重新去適應(yīng)新的界面布局。
頂部導(dǎo)航和Logo的位置是否一致?行間距、文字與圖像的間距是否一致?這些都體現(xiàn)了一個(gè)網(wǎng)站在細(xì)節(jié)上的考慮。有些網(wǎng)頁(yè)在設(shè)計(jì)上我們可能很難發(fā)現(xiàn)有多好,但是如果一些細(xì)節(jié)做得不夠好,卻很容易讓人覺(jué)得在使用上不舒服。所以在布局上建議統(tǒng)一一致,設(shè)計(jì)者可以在寫(xiě)樣式布局的時(shí)候統(tǒng)一設(shè)置。相同類型的操作應(yīng)該有相似的結(jié)果反饋,相同的功能界面也應(yīng)該有類似的布局樣式。
這里的視覺(jué)元素包括網(wǎng)頁(yè)當(dāng)中各種元素的尺寸、大小和顏色。這些元素可以是按鈕、圖標(biāo)、動(dòng)畫(huà)等,在網(wǎng)站設(shè)計(jì)時(shí)也要考慮不同頁(yè)面之間的一致性,盡管功能不同,但是要大體上(可以略有變通)保持不同頁(yè)面之間視覺(jué)風(fēng)格的一致。
MINGO這個(gè)食品網(wǎng)站從界面的標(biāo)題顏色、按鈕大小顏色、文字大小什么的都做了協(xié)調(diào)統(tǒng)一,界面元素雖然多,但不凌亂,反而一些細(xì)節(jié)的統(tǒng)一處理讓界面更活潑。
交互上的統(tǒng)一也很重要,除了視覺(jué)外觀上可以一樣看到的,”交互”和”行為”上也要下一定的功夫。在各個(gè)頁(yè)面當(dāng)中的交互性也很重要,且最好保持大致的相同,以免太過(guò)凌亂。好比市面上的一些排插上的按鈕設(shè)計(jì),有些排插上的按鈕按下去是開(kāi)啟,有些排插按下去是關(guān)閉,這樣的交互設(shè)計(jì)不同一,會(huì)讓使用者摸不著頭腦,使用起來(lái)也及其不順手。生活中都如此,在網(wǎng)頁(yè)設(shè)計(jì)當(dāng)中也是不能忽略交互上的統(tǒng)一,倘若同個(gè)界面的同個(gè)元素,用戶觸發(fā)這個(gè)元素的時(shí)候,這個(gè)元素給用戶兩種不同的顯示效果,這樣只會(huì)讓用戶對(duì)這個(gè)網(wǎng)站產(chǎn)生距離感。下面的反例
給大家舉個(gè)簡(jiǎn)單的例子,這是常見(jiàn)的網(wǎng)頁(yè)標(biāo)簽區(qū)塊,正常鼠標(biāo)移過(guò)會(huì)顯示主色——橘色,右圖我做了一個(gè)錯(cuò)誤的示例,倘若這個(gè)鼠標(biāo)按鈕移過(guò)顯示橘色且按鈕放大,另外一個(gè)按鈕鼠標(biāo)移過(guò)顯示藍(lán)色或綠色、且這個(gè)按鈕被縮小,這樣的交互體驗(yàn)會(huì)有點(diǎn)糟糕,視覺(jué)上和交互上的不統(tǒng)一會(huì)讓瀏覽者使用起來(lái)比較難受,也比較突兀難以接受,所以我們都統(tǒng)一視覺(jué)元素的同時(shí),交互也要做統(tǒng)一處理。
在視覺(jué)、交互方式和操作結(jié)果上保持一致。減少用戶使用成本,也能讓用戶感到親切感,體會(huì)到產(chǎn)品設(shè)計(jì)上的嚴(yán)謹(jǐn)性。統(tǒng)一協(xié)調(diào)其實(shí)在網(wǎng)頁(yè)當(dāng)中也比較重要,它可以讓對(duì)比強(qiáng)烈或是突兀的一個(gè)界面變得比較舒服和柔和,降低用戶心里的不舒服感,拉近用戶之間的距離感和親切感。好啦,本期的統(tǒng)一原則的分享就到此結(jié)束啦,如果大家還有其他想分享或是想知道的內(nèi)容可以告訴小編,我們可以一起學(xué)習(xí)與分享。
藍(lán)藍(lán)設(shè)計(jì)( 91whvog3.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://91whvog3.cn