界面設(shè)計之構(gòu)圖篇

收集于


Paste_Image.png

一病蛉、九宮格網(wǎng)格構(gòu)圖
這種版式主要運用在分類為主的一級頁面官辽,起到功能分類的作用,一目了然塑荒,操作便捷忽妒。

Paste_Image.png
Paste_Image.png
Paste_Image.png

二玩裙、圓心點放射形構(gòu)圖
圓是有圓心的兼贸,在界面中,往往通過構(gòu)造一個大圓來起到聚焦吃溅、凸顯作用溶诞。

放射形的構(gòu)圖,有凸顯位于中間內(nèi)容或功能點的作用决侈。在強(qiáng)調(diào)核心功能點的時候螺垢,可以試著將功能以圓形的范式排布到中間,以當(dāng)前主要功能點為中心赖歌,將其他的按鈕或內(nèi)容放射編排起來枉圃。

Paste_Image.png

圓形具有靈動、活躍庐冯、有趣孽亲、可愛、多變的特質(zhì)展父,界面中的圓形能集中用戶的視線返劲,引導(dǎo)點擊操作,突出主要的功能點或數(shù)據(jù)栖茉,把產(chǎn)品核心展現(xiàn)出來篮绿。

Paste_Image.png
Paste_Image.png

三、三角形構(gòu)圖

這類的構(gòu)圖方式主要運用在文字與圖標(biāo)的版式中吕漂,能讓界面保持平衡穩(wěn)定亲配。從上至下式的三角形構(gòu)圖,能把信息層級羅列得更為規(guī)整和明確痰娱。

在界面中三角形構(gòu)圖大部分都是圖在上弃榨,字在下,閱讀更為舒服梨睁,有重點有描述鲸睛。

Paste_Image.png
Paste_Image.png

個人信息頁比較常用三角形構(gòu)圖。頭像明確了這個頁面的內(nèi)容坡贺,而下面的粉絲官辈、喜歡等數(shù)據(jù)就是對本人的一個描述和介紹。

Paste_Image.png

當(dāng)時在設(shè)計兒童衛(wèi)士寶貝信息設(shè)置頁時運用到了三角構(gòu)圖與圓形構(gòu)圖的結(jié)合遍坟。將體重刻度做成可滑動操作的方式拳亿,而卡通形象來突出設(shè)置的對象及這個頁面的功能。

四愿伴、視線在界面中的構(gòu)圖法則(SF字形構(gòu)圖)

視線流動的軌跡多則是從上至下從左到右移動肺魁,界面中最基礎(chǔ)的是S形視線構(gòu)圖

Paste_Image.png

在視線轉(zhuǎn)角處視覺軌跡最為密集,瀏覽更為集中在切換的地方隔节,視線轉(zhuǎn)折的地方停留時間最長鹅经。


Paste_Image.png

相比于左右構(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)定、和諧哆料。


Paste_Image.png

引導(dǎo)頁中也會常常運用到S形的構(gòu)圖缸剪。圖文進(jìn)行穿插布局,這樣的構(gòu)圖層次感分明东亦,動感十足杏节!

Paste_Image.png

由圖文版式布局,我們還可以演變出F字形構(gòu)圖典阵,這種類型的構(gòu)圖大部分運用在圖文左右搭配圖和banner中奋渔,使用F形構(gòu)圖能讓圖文搭配更有張力,更大氣壮啊,產(chǎn)品信息更為簡單和明確嫉鲸。


Paste_Image.png

在F形構(gòu)圖的規(guī)律中,主圖為F的主干歹啼,右側(cè)兩行(或兩部分)文字為輔玄渗,要注意合理分配圖片和文字的占比。
F形構(gòu)圖在banner中使用狸眼,能將標(biāo)題更為突出藤树,主題更加吸引視線。

Paste_Image.png

值得注意的是拓萌,要充分利用主圖的畫面的指向性岁钓。比如,主圖是人物,可將文字放置于其眼神甜紫、朝向降宅、手勢等對應(yīng)的方向,加強(qiáng)視線引導(dǎo)囚霸。如果是產(chǎn)品圖,則可以通過產(chǎn)品的朝向來引導(dǎo)激才。這樣做拓型,用戶能最快速的關(guān)注到文本信息,加強(qiáng)認(rèn)知度和購買度瘸恼。

![Uploading Paste_Image_580834.png . . .]

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末劣挫,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子东帅,更是在濱河造成了極大的恐慌压固,老刑警劉巖,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件靠闭,死亡現(xiàn)場離奇詭異帐我,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)愧膀,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進(jìn)店門拦键,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人檩淋,你說我怎么就攤上這事芬为。” “怎么了蟀悦?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵媚朦,是天一觀的道長。 經(jīng)常有香客問我日戈,道長询张,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任涎拉,我火速辦了婚禮瑞侮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘鼓拧。我一直安慰自己半火,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布季俩。 她就那樣靜靜地躺著钮糖,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上店归,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天阎抒,我揣著相機(jī)與錄音,去河邊找鬼消痛。 笑死且叁,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的秩伞。 我是一名探鬼主播逞带,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼纱新!你這毒婦竟也來了展氓?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤脸爱,失蹤者是張志新(化名)和其女友劉穎遇汞,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體簿废,經(jīng)...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡空入,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了捏鱼。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片执庐。...
    茶點故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖导梆,靈堂內(nèi)的尸體忽然破棺而出轨淌,到底是詐尸還是另有隱情,我是刑警寧澤看尼,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布递鹉,位于F島的核電站,受9級特大地震影響藏斩,放射性物質(zhì)發(fā)生泄漏躏结。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一狰域、第九天 我趴在偏房一處隱蔽的房頂上張望媳拴。 院中可真熱鬧,春花似錦兆览、人聲如沸屈溉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽子巾。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間线梗,已是汗流浹背椰于。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留仪搔,地道東北人瘾婿。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像僻造,于是被迫代替她去往敵國和親憋他。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,937評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 前言 剛開始做APP髓削,為什么別人家的產(chǎn)品界面設(shè)計那么好。其實產(chǎn)品設(shè)計和畫畫一樣镀娶,是有一些構(gòu)圖技巧的立膛,3分鐘了解那些...
    Atman阿特曼閱讀 2,374評論 0 10
  • 一、九宮格網(wǎng)格構(gòu)圖: 常用于功能分類為主的一級頁面梯码,起到功能分類的作用宝泵。 常見的九宮格式設(shè)計:屏幕鎖,app導(dǎo)航頁...
    jingzizi閱讀 9,376評論 0 7
  • Ann曾經(jīng)說時間會證明我們越來越不合適的轩娶,是的儿奶,就算你當(dāng)時說這句話的時候我何嘗不知道呢,我們的飲食習(xí)慣鳄抒、我們的愛好...
    anby_smile閱讀 288評論 0 0
  • 當(dāng)寫出這標(biāo)題许溅,細(xì)想一下瓤鼻,似乎是帶語病的,還思來想去贤重,似乎只有這個標(biāo)題才最能真實的體現(xiàn)我的當(dāng)下的實際感受茬祷! 是的,不...
    幽蘭達(dá)人閱讀 351評論 0 0