收集于
一病蛉、九宮格網(wǎng)格構(gòu)圖
這種版式主要運用在分類為主的一級頁面官辽,起到功能分類的作用,一目了然塑荒,操作便捷忽妒。
二玩裙、圓心點放射形構(gòu)圖
圓是有圓心的兼贸,在界面中,往往通過構(gòu)造一個大圓來起到聚焦吃溅、凸顯作用溶诞。
放射形的構(gòu)圖,有凸顯位于中間內(nèi)容或功能點的作用决侈。在強(qiáng)調(diào)核心功能點的時候螺垢,可以試著將功能以圓形的范式排布到中間,以當(dāng)前主要功能點為中心赖歌,將其他的按鈕或內(nèi)容放射編排起來枉圃。
圓形具有靈動、活躍庐冯、有趣孽亲、可愛、多變的特質(zhì)展父,界面中的圓形能集中用戶的視線返劲,引導(dǎo)點擊操作,突出主要的功能點或數(shù)據(jù)栖茉,把產(chǎn)品核心展現(xiàn)出來篮绿。
三、三角形構(gòu)圖
這類的構(gòu)圖方式主要運用在文字與圖標(biāo)的版式中吕漂,能讓界面保持平衡穩(wěn)定亲配。從上至下式的三角形構(gòu)圖,能把信息層級羅列得更為規(guī)整和明確痰娱。
在界面中三角形構(gòu)圖大部分都是圖在上弃榨,字在下,閱讀更為舒服梨睁,有重點有描述鲸睛。
個人信息頁比較常用三角形構(gòu)圖。頭像明確了這個頁面的內(nèi)容坡贺,而下面的粉絲官辈、喜歡等數(shù)據(jù)就是對本人的一個描述和介紹。
當(dāng)時在設(shè)計兒童衛(wèi)士寶貝信息設(shè)置頁時運用到了三角構(gòu)圖與圓形構(gòu)圖的結(jié)合遍坟。將體重刻度做成可滑動操作的方式拳亿,而卡通形象來突出設(shè)置的對象及這個頁面的功能。
四愿伴、視線在界面中的構(gòu)圖法則(SF字形構(gòu)圖)
視線流動的軌跡多則是從上至下從左到右移動肺魁,界面中最基礎(chǔ)的是S形視線構(gòu)圖
在視線轉(zhuǎn)角處視覺軌跡最為密集,瀏覽更為集中在切換的地方隔节,視線轉(zhuǎn)折的地方停留時間最長鹅经。
相比于左右構(gòu)圖寂呛,S形構(gòu)圖在上下滾動頁面上優(yōu)勢非常明顯。左右構(gòu)圖很容易給人疲勞感瘾晃,而S形則將圖片和文字完美結(jié)合在一起贷痪,配以大量的留白,如同山間的溪流蹦误,給人輕快流暢的感覺劫拢。
下圖界面中,設(shè)計師很好的運用到S視線形構(gòu)圖强胰,增強(qiáng)了穿插感和靈動性舱沧。人物的信息上下穿插布局,頭像則成為視線的轉(zhuǎn)折點哪廓,使這種雙列模式的排版更為有節(jié)奏狗唉。而具體到每一部分,頭像與內(nèi)容采用了三角形構(gòu)圖涡真,內(nèi)容描述段落用到了文本居中式分俯,畫面穩(wěn)定、和諧哆料。
引導(dǎo)頁中也會常常運用到S形的構(gòu)圖缸剪。圖文進(jìn)行穿插布局,這樣的構(gòu)圖層次感分明东亦,動感十足杏节!
由圖文版式布局,我們還可以演變出F字形構(gòu)圖典阵,這種類型的構(gòu)圖大部分運用在圖文左右搭配圖和banner中奋渔,使用F形構(gòu)圖能讓圖文搭配更有張力,更大氣壮啊,產(chǎn)品信息更為簡單和明確嫉鲸。
在F形構(gòu)圖的規(guī)律中,主圖為F的主干歹啼,右側(cè)兩行(或兩部分)文字為輔玄渗,要注意合理分配圖片和文字的占比。
F形構(gòu)圖在banner中使用狸眼,能將標(biāo)題更為突出藤树,主題更加吸引視線。
值得注意的是拓萌,要充分利用主圖的畫面的指向性岁钓。比如,主圖是人物,可將文字放置于其眼神甜紫、朝向降宅、手勢等對應(yīng)的方向,加強(qiáng)視線引導(dǎo)囚霸。如果是產(chǎn)品圖,則可以通過產(chǎn)品的朝向來引導(dǎo)激才。這樣做拓型,用戶能最快速的關(guān)注到文本信息,加強(qiáng)認(rèn)知度和購買度瘸恼。
![Uploading Paste_Image_580834.png . . .]