在設(she)計(ji)環(huan)節中(zhong)(zhong)，對于視(shi)(shi)(shi)覺次(ci)(ci)序(xu)的(de)(de)營造是(shi)每(mei)個設(she)計(ji)師所必須(xu)精通的(de)(de)，視(shi)(shi)(shi)覺次(ci)(ci)序(xu)也(ye)可(ke)以理(li)解為(wei)視(shi)(shi)(shi)覺層(ceng)次(ci)(ci)，它(ta)是(shi)設(she)計(ji)中(zhong)(zhong)的(de)(de)必然，無論是(shi)海報設(she)計(ji)還是(shi)頁(ye)面設(she)計(ji)，從整體來(lai)看總會有(you)(you)強弱、主次(ci)(ci)之分，因為(wei)有(you)(you)了(le)視(shi)(shi)(shi)覺上的(de)(de)變化，才使(shi)得整體更富有(you)(you)層(ceng)次(ci)(ci)感。從大體來(lai)說：當(dang)用(yong)戶在瀏(liu)覽信(xin)息很(hen)多的(de)(de)網頁(ye)時，作為(wei)設(she)計(ji)師要做(zuo)到(dao)，即使(shi)用(yong)戶只是(shi)簡單的(de)(de)瀏(liu)覽，也(ye)要有(you)(you)能在用(yong)戶腦海中(zhong)(zhong)形成(cheng)記憶(yi)的(de)(de)視(shi)(shi)(shi)覺元(yuan)(yuan)素，而這(zhe)些元(yuan)(yuan)素就是(shi)視(shi)(shi)(shi)覺中(zhong)(zhong)的(de)(de)主，而當(dang)用(yong)戶仔細閱讀時才能記憶(yi)到(dao)的(de)(de)元(yuan)(yuan)素才是(shi)視(shi)(shi)(shi)覺上的(de)(de)次(ci)(ci)。從局(ju)部來(lai)說，要能在視(shi)(shi)(shi)覺上形成(cheng)先后順序(xu)。這(zhe)期的(de)(de)內容就是(shi)設(she)計(ji)中(zhong)(zhong)體現視(shi)(shi)(shi)覺次(ci)(ci)序(xu)手法(fa)有(you)(you)哪些？這(zhe)些也(ye)是(shi)打破版式(shi)的(de)(de)常用(yong)手法(fa)。
一、大(da)小對比(bi)
首先，每個人在瀏覽東西時都會有自己固(gu)有的習(xi)慣，比如(ru)：從上(shang)(shang)到(dao)下、從左(zuo)到(dao)右，這叫常(chang)規(gui)方式，而作為設計師，不(bu)能僅(jin)僅(jin)局(ju)限于常(chang)規(gui)形式，完全(quan)的常(chang)規(gui)帶(dai)來的是(shi)設計上(shang)(shang)的枯燥、乏味(wei)。要(yao)學會利用設計知識打造(zao)不(bu)同的視覺次序，營造(zao)出更強烈的設計感、層次感。
在眾多營(ying)造視覺(jue)次序的(de)(de)(de)手法(fa)中，大小對比幾乎是每個人(ren)都能想(xiang)到(dao)的(de)(de)(de)一種形式，也是很多人(ren)認(ren)為的(de)(de)(de)最簡單的(de)(de)(de)一種，比如(ru)：
通過(guo)大小對比(bi)(bi)的(de)形(xing)(xing)式(shi)(shi)能(neng)直觀營造出視覺焦點，這(zhe)種形(xing)(xing)式(shi)(shi)在(zai)設計中也(ye)是(shi)最容易接受的(de)一種。如果左側放置的(de)也(ye)是(shi)四(si)塊小的(de)產(chan)品，給人的(de)感覺就會顯(xian)得枯燥、乏味，版式(shi)(shi)太過(guo)統一，而正是(shi)因為這(zhe)種放大產(chan)品的(de)處理手法，拉(la)開了對比(bi)(bi)，才使得版式(shi)(shi)不顯(xian)呆板。這(zhe)種形(xing)(xing)式(shi)(shi)無論是(shi)在(zai)文字排版、海報、頁面都(dou)是(shi)很(hen)實用(yong)的(de)一種，合成設計中的(de)近大遠小也(ye)同樣適(shi)用(yong)，只是(shi)在(zai)做(zuo)對比(bi)(bi)效果時一定要大膽(dan)。
二、配色方(fang)式
通(tong)過改變(bian)不同的(de)(de)配色方式，也能在(zai)視覺上營造出視覺層次的(de)(de)變(bian)化(hua)，比如我們常見(jian)的(de)(de)通(tong)過有彩色與無(wu)彩色進行(xing)區(qu)分的(de)(de)手法(fa)：
在(zai)(zai)(zai)原(yuan)本無(wu)彩色(se)的排列方式(shi)中(zhong)加(jia)入有(you)彩色(se)，在(zai)(zai)(zai)視(shi)覺上(shang)就形成(cheng)(cheng)(cheng)了很(hen)強烈的差(cha)異(yi)化，而正是因為有(you)了強烈的差(cha)異(yi)，使得存(cun)在(zai)(zai)(zai)差(cha)異(yi)的部分成(cheng)(cheng)(cheng)為了更容易(yi)吸(xi)引(yin)用戶(hu)的區域，所以就在(zai)(zai)(zai)視(shi)覺上(shang)形成(cheng)(cheng)(cheng)了先后順(shun)序，同(tong)時這種差(cha)異(yi)的形式(shi)也(ye)能起到(dao)一定打破(po)版式(shi)、活躍版式(shi)的作用。而在(zai)(zai)(zai)有(you)彩色(se)之(zhi)間，同(tong)樣也(ye)能通過差(cha)異(yi)化形成(cheng)(cheng)(cheng)視(shi)覺上(shang)的主次，比如：
第(di)一行色(se)(se)(se)塊能(neng)最快(kuai)引(yin)起注意的(de)(de)是(shi)第(di)二個，通(tong)過色(se)(se)(se)彩飽和度的(de)(de)不(bu)(bu)同，在視覺(jue)(jue)上(shang)形(xing)成了很(hen)明(ming)顯的(de)(de)差(cha)異化(hua)，進(jin)一步改變(bian)了原本(ben)的(de)(de)做(zuo)從左往右的(de)(de)習慣性視覺(jue)(jue)次(ci)序(xu)。而第(di)二行色(se)(se)(se)塊中最快(kuai)能(neng)引(yin)起注意的(de)(de)是(shi)紅色(se)(se)(se)，因為這里用到了改變(bian)色(se)(se)(se)系(xi)的(de)(de)形(xing)式(shi)進(jin)行視覺(jue)(jue)上(shang)的(de)(de)次(ci)序(xu)劃分。之所以在有(you)彩色(se)(se)(se)中也(ye)能(neng)很(hen)好的(de)(de)體現(xian)視覺(jue)(jue)層次(ci)最重要的(de)(de)一點是(shi)，他們之間形(xing)成的(de)(de)差(cha)異足夠明(ming)顯，而不(bu)(bu)是(shi)似有(you)非有(you)。
三、形(xing)態的不同
營造不同(tong)的(de)視覺次(ci)序最重要的(de)就是(shi)在(zai)正(zheng)常人習慣的(de)固有次(ci)序上(shang)尋找(zhao)變化(hua)，那么我們同(tong)樣可以(yi)以(yi)形態上(shang)的(de)變化(hua)作(zuo)為差異(yi)化(hua)的(de)形式，比如(ru)：
在固有的(de)(de)形態(tai)中(zhong)尋找其(qi)中(zhong)可以(yi)引起(qi)差異(yi)化(hua)(hua)的(de)(de)元素(su)，從視(shi)覺感受而言可以(yi)分(fen)為兩種(zhong)：第一，改變(bian)(bian)了(le)(le)原本的(de)(de)習慣(guan)性(xing)的(de)(de)閱讀方式(shi)，也(ye)(ye)使得(de)(de)整體(ti)主次(ci)(ci)發生了(le)(le)變(bian)(bian)化(hua)(hua)；第二(er)，原本枯(ku)燥(zao)、呆板(ban)的(de)(de)重復式(shi)的(de)(de)結構上因為元素(su)形態(tai)的(de)(de)改變(bian)(bian)，也(ye)(ye)起(qi)到(dao)了(le)(le)打破整體(ti)版式(shi)的(de)(de)作(zuo)用，使得(de)(de)整體(ti)版式(shi)變(bian)(bian)化(hua)(hua)更(geng)多，層次(ci)(ci)感更(geng)強且版式(shi)因此(ci)也(ye)(ye)變(bian)(bian)得(de)(de)更(geng)加活躍。形態(tai)上的(de)(de)變(bian)(bian)化(hua)(hua)還可以(yi)這么(me)體(ti)現：
雖然都是(shi)矩形(xing)框，但是(shi)線框與色塊形(xing)成了很明顯的差異，同樣(yang)也可(ke)以體現視覺層(ceng)次，而這種形(xing)式在很多頁面中也很常見：
這也是版(ban)式(shi)(shi)設計中(zhong)很重要的一部分，也就(jiu)是尋找可以(yi)打破版(ban)式(shi)(shi)且營造視覺層(ceng)次的元(yuan)素(su)，正是因(yin)為這些手法，才使得版(ban)式(shi)(shi)更豐富、更富有多變(bian)性。
四、空間留白
當要(yao)(yao)求不能改(gai)變(bian)很多時(shi)，在原有的基礎上(shang)只需要(yao)(yao)改(gai)變(bian)空間(jian)位置或(huo)者(zhe)留白(bai)方(fang)式(shi)，也可以營造不同的視覺(jue)次(ci)序(xu)，比如：
在不(bu)改變(bian)其大小、顏(yan)色、形態的前提下，只(zhi)是改變(bian)了空(kong)間(jian)留(liu)(liu)白(bai)，也能起到改變(bian)視覺次(ci)序的作(zuo)用；而在編排(pai)或者標(biao)題(ti)設計中，通(tong)過空(kong)間(jian)留(liu)(liu)白(bai)的方式拉開層次(ci)、次(ci)序也很常見：
同樣(yang)是重復的形式(shi)，左側完全沒有給人一種有層次、有次序的感覺，在用戶眼中，這只不過是一團信(xin)息(xi)(xi)；而右(you)側通過改變留(liu)白(bai)的方(fang)式(shi)充(chong)分的體(ti)現(xian)(xian)出(chu)視覺上的層級(ji)關系，每一個(ge)獨(du)立存在的標題或者欄目之(zhi)間都應該用留(liu)白(bai)的方(fang)式(shi)體(ti)現(xian)(xian)，這種留(liu)白(bai)要(yao)遵循(xun)的原則是：標題與文案的留(liu)白(bai)要(yao)小于欄目與欄目之(zhi)間且(qie)大于說明性文字(zi)信(xin)息(xi)(xi)之(zhi)間，只要(yao)這樣(yang)才能真正意義上的將層次拉(la)開。
五、投影的方式
投(tou)影(ying)在設計環(huan)節中是(shi)很常(chang)用的(de)一種(zhong)手法，通過投(tou)影(ying)可以體(ti)現出前后層次，也能改變視覺次序，比如頁面設計中的(de)：
這里只(zhi)是在色(se)塊(kuai)上添加了簡單的投影(ying)效(xiao)果，原本的視覺次序就(jiu)瞬間被打破，而這種投影(ying)在海報設(she)計中最常用的是打破前后(hou)關系，使(shi)得海報更有層(ceng)次感：
這種大投(tou)(tou)影(ying)的方式，是很(hen)多海報以及頁(ye)面(mian)中(zhong)常用的手法之一，因(yin)為有了投(tou)(tou)影(ying)，使得畫面(mian)整體形(xing)成(cheng)了明顯的層次關(guan)(guan)系，而投(tou)(tou)影(ying)對于用戶來(lai)說(shuo)也是很(hen)容易接受的，比(bi)如：按鈕的投(tou)(tou)影(ying)、主體的投(tou)(tou)影(ying)等等，看(kan)似很(hen)小的改變，往(wang)往(wang)能給(gei)頁(ye)面(mian)帶來(lai)很(hen)明顯的效(xiao)果。這種形(xing)式也可以理(li)解為形(xing)成(cheng)遮擋關(guan)(guan)系，在一些(xie)小場景的設計中(zhong)，一樣很(hen)實用：
有了遮擋關(guan)系，就會形成視覺上的層次，這種看似簡單的手法(fa)，最(zui)終所呈現(xian)的效果卻是立竿見影的。
六(liu)、高斯模糊(hu)
拉開(kai)視覺次序的(de)另(ling)一種手法：模糊(hu)，很多人對于 PS 里的(de)模糊(hu)工(gong)具并不陌生，而通過(guo)將視覺元素模糊(hu)化處(chu)理(li)，一樣能起到(dao)營造(zao)視覺層次的(de)效果，比如我們常見的(de)電影海(hai)報中：
通(tong)(tong)過虛實對(dui)比，使得(de)視(shi)覺(jue)層次(ci)變化更強，這也是(shi)合成設(she)(she)計中常用的(de)手法(fa)(fa)之一(yi)，而(er)在文字設(she)(she)計中，一(yi)樣可以(yi)通(tong)(tong)過這樣的(de)手法(fa)(fa)來拉開(kai)視(shi)覺(jue)次(ci)序(xu)關系，比如：
通(tong)過模糊字體中某個筆畫，在(zai)視覺上形成了(le)一(yi)定的(de)空間(jian)關(guan)系，也(ye)使(shi)得(de)整體層次感更加豐富，這(zhe)也(ye)是很多設計師喜歡在(zai)作品的(de)最后(hou)環(huan)節加一(yi)些飄飛模糊的(de)點狀(zhuang)元素(su)豐富整體的(de)原(yuan)因：
視覺(jue)層(ceng)次的變(bian)化對(dui)于整體而言是(shi)不(bu)可缺少的一部分(fen)，有時只(zhi)需要一點點的變(bian)化就(jiu)可以(yi)帶(dai)來(lai)意想不(bu)到(dao)的效果(guo)。
七、應用于版式中
這期所說的(de)(de)(de)很(hen)多都屬于細(xi)節上的(de)(de)(de)變化，但是(shi)很(hen)多人對于細(xi)節并不(bu)重視(shi)，認為不(bu)重要，但其實優秀(xiu)的(de)(de)(de)版(ban)式(shi)設計基本上都是(shi)用不(bu)同(tong)的(de)(de)(de)細(xi)節處理(li)方式(shi)堆(dui)砌而成的(de)(de)(de)，這期所說的(de)(de)(de)這些(xie)形式(shi)用于版(ban)式(shi)設計中也同(tong)樣很(hen)實用，如果你的(de)(de)(de)版(ban)式(shi)太過呆(dai)(dai)板，可以通過考慮這些(xie)方面在適當的(de)(de)(de)位置進行打(da)(da)破，打(da)(da)破的(de)(de)(de)意思(si)是(shi)：在原本很(hen)呆(dai)(dai)板的(de)(de)(de)基礎上尋(xun)找視(shi)覺上的(de)(de)(de)層次變化，使(shi)得整體版(ban)式(shi)活躍起來且富有細(xi)節感，比如：
這(zhe)(zhe)是從一(yi)個(ge)頁(ye)面中選取(qu)的(de)(de)(de)一(yi)個(ge)局部信息，上(shang)側版(ban)式給人的(de)(de)(de)感覺毫無(wu)變化，如果(guo)頁(ye)面中出現(xian)大面積這(zhe)(zhe)種形式的(de)(de)(de)版(ban)式，會使(shi)得(de)整(zheng)體單調、枯燥，很(hen)容易形成視覺疲勞。而下側區(qu)(qu)域則是為了避免這(zhe)(zhe)些，在形式上(shang)改變了許多：第一(yi)，顏色上(shang)有(you)輕微的(de)(de)(de)變化，這(zhe)(zhe)樣(yang)做(zuo)的(de)(de)(de)目的(de)(de)(de)是區(qu)(qu)分開每個(ge)欄目。第二，形式上(shang)第三(san)個(ge)模塊做(zuo)了很(hen)明(ming)顯的(de)(de)(de)層(ceng)次(ci)(ci)變化，顏色明(ming)顯加深(shen)了，且投影(ying)效(xiao)果(guo)加重，而且按鈕區(qu)(qu)域也用(yong)色塊的(de)(de)(de)形式代替邊框，使(shi)得(de)整(zheng)體層(ceng)次(ci)(ci)感更(geng)強且有(you)保持在一(yi)個(ge)很(hen)協調的(de)(de)(de)范圍內。這(zhe)(zhe)里用(yong)到的(de)(de)(de)手(shou)法，正是這(zhe)(zhe)期所說(shuo)的(de)(de)(de)。
同樣我們也可(ke)以在網上找一些版(ban)式(shi)感很強的頁面(mian)進行分析，去理解這(zhe)些手(shou)法(fa)是如何在版(ban)式(shi)中體(ti)現的，比如一些官網的設計，看似很簡潔、元(yuan)素很少，而往往這(zhe)種頁面(mian)對于版(ban)式(shi)的要(yao)求(qiu)更高，因(yin)為要(yao)用(yong)極(ji)少的元(yuan)素體(ti)現其版(ban)式(shi)變化、層(ceng)次。
總結
視(shi)覺(jue)層次(ci)感(gan)是(shi)提升整體設計(ji)感(gan)很(hen)重要的一種形式(shi)，如何在(zai)固有的視(shi)覺(jue)基礎(chu)上打破束縛(fu)，在(zai)形式(shi)上形成變化，對于每個設計(ji)師而言都是(shi)至關重要的；而很(hen)多設計(ji)手法都存(cun)在(zai)著共通性，只(zhi)要學會靈(ling)活(huo)運用(yong)，那么(me)我(wo)們的設計(ji)作品就不(bu)會顯得平庸無常。當(dang)然這(zhe)期所說的也并非全部，這(zhe)些只(zhi)是(shi)很(hen)常用(yong)的一些形式(shi)。
在線客服1號
微信公眾賬號