當前位置:首頁 >教程首頁 > U I 設計 > AI+UX設計大師班 >看過來!個人中心界麵頭圖設計技巧都在這裏

看過來!個人中心界麵頭圖設計技巧都在這裏

發布時間:2020-11-30 13:21:26

個人中心頁麵是每個app產品都逃不掉的頁麵,而這個頁麵的頭部是一個很好的設計觸點,到底可以如何來設計個人中心的頭圖呢?今天給大家看看我的總結。

我們按照從簡到繁的順序依次介紹吧!

1.純信息類

這個類別是最簡單的,因為頭部隻有信息,沒有其他內容,直接把信息鋪開即可,比如:

看過來!個人中心界麵頭圖設計技巧都在這裏

雖然是直接信息展示,但其實也是需要有節奏感的,比如信息的重量對比,大小對比等等。

2.填充顏色

這種方式是相對來說比較簡單的修飾,頭部比較明顯,一個大色塊,比如:

看過來!個人中心界麵頭圖設計技巧都在這裏

再比如:

看過來!個人中心界麵頭圖設計技巧都在這裏

有些平台是直接填充純色,有些是填充漸變色,這個主要看你們平台的風格。

3.輔助圖形

最初級版本的輔助圖形就是用一些大眾化的圖形,例如圓呀、線條啊等等,就像樊登讀書的個人中心:

看過來!個人中心界麵頭圖設計技巧都在這裏

相對來說,這種圓的圖形比較普通,而且就是大圓套小圓,品牌感相對較低。

所以很多平台會根據自身的調性延展一些特有的圖形,然後進行頭部打造,比如騰訊動漫的個人中心:

看過來!個人中心界麵頭圖設計技巧都在這裏

這樣就會讓圖形更有品牌感。

4.卡通形象

有一些平台相對來說比較年輕,所以會選擇使用一些卡通想想來做個人中心的頭部,比如多閃、閃耀一下等等:

看過來!個人中心界麵頭圖設計技巧都在這裏

這樣會讓用戶感覺到產品的活力、親和度,如果你們的平台調性比較年輕可愛,這種方法完全可以嚐試嚐試。

5.圖片類別

這種圖片類別其實經常用在個人名片頁(不是個人中心哈),比如快看、acfun:

看過來!個人中心界麵頭圖設計技巧都在這裏

方式很簡單,就是一張圖上麵蒙上一層黑色蒙版。

當然,有些產品的個人中心頁麵也采用這種方式,比如soul:

看過來!個人中心界麵頭圖設計技巧都在這裏

再比如馬蜂窩:

看過來!個人中心界麵頭圖設計技巧都在這裏

不過像馬蜂窩這種方式,對於版麵的利用率是很低的,需要權衡一些信息漏出的問題。

6.全包底圖

現在還有一種形式,就是底圖充滿整個屏幕,這個就比較複雜了,比如波洞、叭噠:

看過來!個人中心界麵頭圖設計技巧都在這裏

這種形式很有沉浸感,如果你的品牌圖形做的很好,或者有一個可愛的吉祥物,不妨試試這種形式,可以很好的展示品牌調性。

當然,也會存在一個版麵利用率的問題,畢竟信息漏出的寬度變小了一些,這個都是設計師需要去衡量的。

總結

在我看來,這幾種形式從簡到繁的順序依次是:

純信息類 < 填充顏色 < 輔助圖形 < 卡通形象 < 底圖類別 < 全包形式。

不知道你的產品調性適合哪種形式呢?

(文章來源於微信公眾號@菜心設計鋪,作者@菜心設計鋪)

华体会hth体育网 賞析
  • 2101期學員李思庭作品

    2101期學員李思庭作品

  • 2104期學員林雪茹作品

    2104期學員林雪茹作品

  • 2107期學員趙淩作品

    2107期學員趙淩作品

  • 2107期學員趙燃作品

    2107期學員趙燃作品

  • 2106期學員徐正浩作品

    2106期學員徐正浩作品

  • 2106期學員弓莉作品

    2106期學員弓莉作品

  • 2105期學員白羽新作品

    2105期學員白羽新作品

  • 2107期學員王佳蕊作品

    2107期學員王佳蕊作品

專業問題谘詢

你擔心的問題,火星幫你解答

微信掃碼入群領福利

掃碼領福利最新AI資訊

點擊谘詢
添加老師微信,馬上領取免費課程資源

1. 打開微信掃一掃,掃描左側二維碼

2. 添加老師微信,馬上領取免費課程資源

×

同學您好!

您已成功報名0元試學活動,老師會在第一時間與您取得聯係,請保持電話暢通!
確定