三、規(guī)劃頁(yè)面構(gòu)圖

講到設(shè)計(jì)初期的頁(yè)面構(gòu)圖規(guī)劃問(wèn)題，其實(shí)這個(gè)構(gòu)圖是服從你的展示方式的，即故事線(xiàn)。設(shè)計(jì)前期規(guī)劃階段，先想好打算怎么表達(dá)，再選擇對(duì)應(yīng)的構(gòu)圖方式。表達(dá)上我們講究總分主次關(guān)系 ，那么構(gòu)圖上依舊遵循這個(gè)規(guī)則，先具體再抽象。

（一）全屏平鋪式

全屏平鋪式的構(gòu)圖方式是最常見(jiàn)的一種構(gòu)圖方式，如下圖無(wú)意中構(gòu)成橫平豎直的輔助線(xiàn)將內(nèi)容一格一格展現(xiàn)出來(lái)，界線(xiàn)清晰分割明確。因此模塊之內(nèi)的內(nèi)容就會(huì)顯得格外的清楚和突出，給人一目了然的感覺(jué)。注意哦，平鋪并不代表完全一個(gè)一個(gè)格子碼好，比如下圖中的深紅色區(qū)域，沒(méi)有被網(wǎng)格框住但也碼的很清楚，淺紅色區(qū)域中有一對(duì)一的也有一對(duì)二的對(duì)應(yīng)關(guān)系，故此類(lèi)型的構(gòu)圖中加上這些靈活的變化就會(huì)顯得沒(méi)那么生硬。并且這種構(gòu)圖方式是遵循F型網(wǎng)頁(yè)閱讀習(xí)慣的，因此重要內(nèi)容放哪大家知道了吧~

（二）中心放射式

圓形就是一個(gè)典型的中心放射式，圓是有圓心的，通過(guò)構(gòu)造不同大小的同心圓起到聚焦、凸顯作用。伴隨一個(gè)一個(gè)同心圓自然而然形成放射線(xiàn)，把重要表述放中間，其他表述按照放射線(xiàn)編排起來(lái)。引導(dǎo)用戶(hù)的視線(xiàn)聚集在我們重點(diǎn)突出的功能點(diǎn)上，先主后次，有起有落。

（三）視線(xiàn)引導(dǎo)式

視線(xiàn)引導(dǎo)式主要是依靠點(diǎn)線(xiàn)面的關(guān)系形成一條清晰的視覺(jué)引導(dǎo)線(xiàn)，引導(dǎo)用戶(hù)的視線(xiàn)，避免雜亂無(wú)章的堆砌。視線(xiàn)流動(dòng)的軌跡多則是從上至下從左到右移動(dòng)，故在大屏上從左到右，從主到次，減小用戶(hù)的負(fù)擔(dān)和閱讀疲勞。如下圖是我同事做的一張大屏，指標(biāo)瑣碎，每個(gè)指標(biāo)與指標(biāo)間沒(méi)有太強(qiáng)的相關(guān)性。當(dāng)時(shí)發(fā)現(xiàn)大方向上有一定的前后關(guān)系，故最后用這種方式把數(shù)據(jù)串起來(lái)。設(shè)計(jì)稿上需要把樣式給全，看上去有點(diǎn)碎，實(shí)際開(kāi)發(fā)后效果還是蠻不錯(cuò)。

（四）水平羅列式

水平羅列式的構(gòu)圖方式有點(diǎn)像全屏平鋪式，同樣是利用人從左至右的閱讀習(xí)慣。如下圖，不一樣的是四個(gè)大類(lèi)有明顯的前后關(guān)系，并且彼此之間存在對(duì)比。利用無(wú)形之中形成的水平線(xiàn)條把內(nèi)容串在一起，將同級(jí)且對(duì)比的意思表達(dá)出來(lái)。

（五）三角排列式

三角排列式的構(gòu)圖方式，核心思想就是一個(gè)穩(wěn)！從上至下的三角構(gòu)圖，能把信息層級(jí)羅列得更為規(guī)整和明確。這張大屏是我做的某地?cái)?shù)字駕駛艙中的一個(gè)分頁(yè)，用來(lái)總覽這個(gè)分支的三個(gè)內(nèi)容，每塊內(nèi)容上面是政策解讀下面是數(shù)據(jù)結(jié)果，清晰明確。

四、營(yíng)造頁(yè)面氛圍

頁(yè)面的氛圍個(gè)人主要認(rèn)為是通過(guò)恰到好處的細(xì)節(jié)堆砌出來(lái)，這些細(xì)節(jié)要自然合適不突兀，講究一個(gè)“巧”字。對(duì)于我來(lái)說(shuō)這些細(xì)節(jié)就好像歐亨利小說(shuō)的結(jié)局一樣，意料之外又在情理之中。不過(guò)講道理這些氛圍的東西并沒(méi)有很明顯的一定之規(guī)，有些方法在這個(gè)場(chǎng)景下合適在那個(gè)場(chǎng)景下就不合適了，需要設(shè)計(jì)師在做的時(shí)候不斷嘗試，也是一個(gè)緣分。

抄現(xiàn)實(shí)是我們?cè)谠O(shè)計(jì)中最直接的也是最常用的一種表達(dá)方式，它的含義就是提取現(xiàn)實(shí)中存在事物的點(diǎn)線(xiàn)面關(guān)系。因此往往在發(fā)散思維中找到與主題相關(guān)的靈感點(diǎn)后，用方式提取其中的內(nèi)容后，能緊密的結(jié)合主題。它將抽象的主題通過(guò)實(shí)體表達(dá)出來(lái)，并以之作為內(nèi)容信息的載體，能夠合適的存在于頁(yè)面之中。這個(gè)緯度的內(nèi)容我直接舉幾個(gè)案例描述下。

（一）案例-公安項(xiàng)目中的細(xì)節(jié)

公安的項(xiàng)目是我同事做的，在用戶(hù)那邊得到了一致的好評(píng)，并且也是團(tuán)隊(duì)前期重點(diǎn)研究的一個(gè)DEMO。這個(gè)項(xiàng)目好在業(yè)務(wù)邏輯清晰，并且在表達(dá)方式上做到合理合適的程度。如下是項(xiàng)目其中一張大屏的一處細(xì)節(jié)，需求是需要排列公安系統(tǒng)中處置人員的不同分布，在大屏中也是核心區(qū)域。

一般在頁(yè)面核心區(qū)域我們會(huì)花點(diǎn)心思將這塊的內(nèi)容做充實(shí)做飽和，畢竟第一眼需要留下好印象。設(shè)計(jì)的時(shí)候提取了警徽的基礎(chǔ)形狀、警徽的構(gòu)成、胸徽的線(xiàn)條排布、旌旗的基礎(chǔ)形狀、放射線(xiàn)的構(gòu)圖方式，然后將文案排布形成設(shè)計(jì)結(jié)果。最后客戶(hù)這邊對(duì)于這塊內(nèi)容直接過(guò)稿，認(rèn)為設(shè)計(jì)環(huán)節(jié)帶出了警隊(duì)的特色，給了高度的評(píng)價(jià)。

（二）案例-駕駛艙項(xiàng)目中的細(xì)節(jié)

駕駛艙的項(xiàng)目是我直接參與主導(dǎo)的，當(dāng)時(shí)這個(gè)項(xiàng)目的歡迎屏風(fēng)格稿做了好幾版本的，用戶(hù)一直都不認(rèn)可。過(guò)程中去除主觀因素，總結(jié)用戶(hù)對(duì)于駕駛艙的認(rèn)知和理解。客戶(hù)的需求是駕駛艙需要在“駕駛”的時(shí)候，眼中不光有艙內(nèi)的內(nèi)涵，也要有艙外的風(fēng)景。如下是歡迎屏的基礎(chǔ)狀態(tài)（交互操作并未展開(kāi)），設(shè)計(jì)的時(shí)候提取了汽車(chē)儀表盤(pán)的基礎(chǔ)形狀和風(fēng)格組成、星光點(diǎn)與點(diǎn)的關(guān)系、逆光山體風(fēng)景的天空漸變，然后組合在一起形成設(shè)計(jì)結(jié)果。最后客戶(hù)這邊看到后過(guò)稿，這個(gè)設(shè)計(jì)也留到了項(xiàng)目最后。

（三）案例-大佬作品山海經(jīng)中的細(xì)節(jié)

如下的作品是behance上一個(gè)大佬的作品，作品的名字叫做山海經(jīng)，我們也是經(jīng)常拿出來(lái)學(xué)習(xí)參考。在人物設(shè)定中，作者將古代的烏紗帽、官服、官徽紋樣等內(nèi)容融入角色的道化服之中，并且角色周邊環(huán)境中大量融入一些官府的元素，比如官兵舉得牌子、衙門(mén)的建筑體等。整個(gè)作品雖然融入大量的古代元素，但是用賽博朋克的方式表達(dá)出來(lái)，成品沒(méi)有一絲違和感。確實(shí)給了大家一個(gè)方向，原來(lái)國(guó)風(fēng)的東西可以這么玩。

總結(jié)

1.使用足夠并且容易區(qū)分層級(jí)的顏色去構(gòu)造頁(yè)面。數(shù)據(jù)可視化的項(xiàng)目往往信息的量級(jí)是不可控的，準(zhǔn)備工作需要做充分。

2.合適的字體能讓你的頁(yè)面事半功倍。挑選字體得對(duì)比，確保不同的使用場(chǎng)景下有一致性的顯示。條件允許下，針對(duì)自身業(yè)務(wù)場(chǎng)景打造對(duì)應(yīng)的顯示字體（羨慕臉.jpg）

3.好的構(gòu)圖可以讓表達(dá)更上一個(gè)臺(tái)階。根據(jù)故事線(xiàn)的講述，挑選對(duì)應(yīng)的構(gòu)圖方式，做到從總到分、有主有次。

4.氛圍彰顯作品的細(xì)膩程度。細(xì)節(jié)決定成敗，在作品中增添“巧”的細(xì)節(jié)，會(huì)讓觀賞者更加投入獲取信息的節(jié)奏中。

文章來(lái)源：tob.design        作者：王亮亮同學(xué)

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)