當前位置:首頁>ps入門教程>ps基礎教程>設計知識>教程內容

聊一聊界面設計的構圖(2)

來源:360 作者:Micu設計 學習:4857人次

生活中,最為常見的就是圓形了,眼睛是圓的,太陽是圓的,碗也是圓的,天也是圓的。在界面設計中圓的運用可謂是點睛之筆。

圓是有圓心的,在界面中,往往通過構造一個大圓來起到聚焦、凸顯作用。

放射形的構圖,有凸顯位于中間內容或功能點的作用。在強調核心功能點的時候,可以試著將功能以圓形的范式排布到中間,以當前主要功能點為中心,將其他的按鈕或內容放射編排起來。

我們將主要的功能設置在版式的中位置,就能引導用戶的視線聚集在想要突出的功能點上,就算視線本來不在中間的位置,也能引導用戶再次回到中心的聚集處。

聊一聊界面設計的構圖

在界面設計中,圓形的運用能使界面顯得格外生動,多數(shù)可操作的按鈕上或交互動畫中都能見到圓形的身影。

因為圓形具有靈動、活躍、有趣、可愛、多變的特質。在界面設計中善于將圓形的設計與動畫結合,能讓整個軟件鮮活起來。

如再加上旋轉圍繞的動畫,會讓整個軟件鮮活起來。界面中的圓形能集中用戶的視線,引導點擊操作,突出主要的功能點或數(shù)據(jù),把產品核心展現(xiàn)出來。

聊一聊界面設計的構圖

圓心點放射形的設計,會使軟件感覺更為智能化,包容萬象。

如果要體現(xiàn)的功能點非常簡單,只有幾個功能按鈕的時候,可嘗試這種大圓的展示設計,突出最重要的功能,然后羅列并排出其他的功能點。這種方式非常實用,就和畫重點一樣,圈出最重要的數(shù)據(jù)。善于運用大圓構圖,能撐起整個畫面,讓界面圓潤而飽滿。

聊一聊界面設計的構圖

三、三角形構圖

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

在界面中三角形構圖大部分都是圖在上,字在下,閱讀更為舒服,有重點有描述。

聊一聊界面設計的構圖

Gogobot登陸頁在設計中將logo作為了圖形的部分,輸入框就是產品的核心描述。

聊一聊界面設計的構圖

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

聊一聊界面設計的構圖

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

四、視線在界面中的構圖法則(SF字形構圖)

在設計實踐中,如何引導讀者視線,對增強用戶體驗有重要作用。好的構圖視線法則,能夠獲得非常舒服的閱讀體驗。而雜亂無章的構圖,往往讓用戶厭倦。

在進行界面設計的時候,對用戶的視覺移動方向的預設是非常重要的。在界面中加入更為順暢的構圖設計引導用戶視線移動的元素,就能使用戶更多的觀察到產品的核心和產品的賣點。

視線流動的軌跡多則是從上至下從左到右移動,如果不能圍繞這樣的視線軌跡進行排版,用戶在閱讀的時候會變得很吃力,找不到重點,使用戶產生反感。所以在界面設計中格外需要注意這個地方,F(xiàn)在界面一般是上下滑動的,做好視線引導,可以大大減小用戶的負擔和閱讀疲勞。

界面中最基礎的是S形視線構圖

聊一聊界面設計的構圖

在界面中怎么運用S形視線構圖呢?

S形視線大家都懂,關鍵是如何運用好S形視線來抓住用戶眼球。

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側二維碼!
  • 關注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序

關注大神微博加入>>

網友求助,請回答!