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

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

大綱如下:

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

純信息類

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

研究了上百個產品,才發現原來個人中心頭圖就這6個套路!

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

填充顏色

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

研究了上百個產品,才發現原來個人中心頭圖就這6個套路!

再比如:

研究了上百個產品,才發現原來個人中心頭圖就這6個套路!

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

輔助圖形

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

研究了上百個產品,才發現原來個人中心頭圖就這6個套路!

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

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

研究了上百個產品,才發現原來個人中心頭圖就這6個套路!

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

卡通形象

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

研究了上百個產品,才發現原來個人中心頭圖就這6個套路!

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

圖片類別

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

研究了上百個產品,才發現原來個人中心頭圖就這6個套路!

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

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

研究了上百個產品,才發現原來個人中心頭圖就這6個套路!

再比如馬蜂窩:

研究了上百個產品,才發現原來個人中心頭圖就這6個套路!

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

全包底圖

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

研究了上百個產品,才發現原來個人中心頭圖就這6個套路!

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

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

總結

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

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

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

以上就是菜心對于個人中頁頭部做法的歸納和總結,不全面的地方,大家可以多多討論交流。

歡迎關注作者的微信公眾號:「菜心設計鋪」

研究了上百個產品,才發現原來個人中心頭圖就這6個套路!

收藏 185
點贊 47

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。