個人主頁頭部，應該如何設計？
不少APP應用都帶有個人社交主頁，而在這一頁面里，個人主頁頭部的設計其實也有一定細節和“套路”需注意。在本篇文章里，作者就嘗試總結了這一區域的通用設計方法，與可注意的設計細節，一起來看看作者的總結與分析。
(資料圖)
一、組件介紹
個人主頁頭部與其說是一個組件，不如說是「在個人頁中一塊聚合信息的區域」，因為絕大多數帶個人社交主頁的App，都采用了類似的做法，或有相似的框架，所以我們可以在這里討論這一區域的通用設計方法。
二、使用場景
在解釋「個人主頁」的使用場景之前，我們首先需要區分兩個頁面類型：「我的」和「個人主頁」，這兩者通常都有一個聚合用戶信息的頭部。
但是這兩者有本質的不同：與社交的相關性。「個人主頁」與社交絕對強相關，因為個人主頁就是用戶之間相互瀏覽的門戶；而「我的」與社交幾乎不相關，不管App有沒有社交屬性，用戶都需要一個針對本人賬戶的信息概覽和設置頁面，這就是「我的」。
這種區別會在具體排版上產生一定的影響，「我的」頁面的頭部往往會更簡潔，信息更加凝練集中，而「個人主頁」的頭部，裝飾性大于信息傳達性。
但在日常使用的App 中，你們可能也會注意到，有很多App「我的」頁就是用戶本人的「個人主頁」，只是某些細微的信息展示有所不同 (例如關注按鈕)。確實存在這種情況，這是不同產品根據自身的功能特性對頁面的不同理解。
具體「我的」和「個人主頁」是否應該一致，主要以以下兩點作為主要判據：
核心功能是否為社交；「我的」頁面是否有額外大量的功能承載需求。我來舉兩個例子。
第一個，小宇宙。
這是一個功能并不復雜的播客App，但它的核心是播客而非社交，所以「我的」頁面和「個人主頁」用來展示不同的兩類信息，盡管有部分賬戶核心信息是重疊的。
第二個，微博。
這是一個絕對社交核心App，這是毋庸置疑的，但是微博的「我的」需要用來承載更多額外的，與社交無關的功能入口，所以這兩者的設計依然不同。
那在什么情況下，兩者是相同的呢？是小紅書、抖音、站酷、即刻，社交功能占據絕對的C位，「我的」頁也不需要承載別的亂七八糟的功能入口，這些App就將兩者設計成了一致。
綜上，「個人主頁」的頭部形式，應用在與社交直接綁定的用戶門戶展示頁面上，它需要提供該用戶最核心的社交數據和交互信息，在某些情況下，「個人主頁」可以直接展示在「我的」頁面上。
三、設計要點
個人主頁的頭部想到來說是比較復雜的，因為它的設計實際上非常的自由，并沒有一些可總結的全局化范式，我在這里也知道挑出其中一些細節來講講，局部該如何進行布局和設計。
1. 頭像的位置頭像是一個視覺重量相當大的元素，所以它的位置不僅也影響著周圍很多其他元素的排版，也會給用戶不同的感受。從排版上來說，頭像基本上有三個固定的位置：居左、居中和居右。
1）居左
居左是一種比較常規的排版方式，但不常規的地方在于，昵稱和其余信息可以置于頭像的不同方位：右方或者下方。
2）居中
也算是一種相對來說比較常見的布局，但是頭像居中會導致昵稱除了下方沒有別的地方可放，所以會比較占用縱向空間。
3）居右
較為少見，所以看起來會比較新鮮，但是頭像的權重會相比昵稱下降 (因為閱讀習慣)。
2. 數據布局個人主頁頭部會集成一些社交的核心數據，例如：關注數、被關注數、發帖數、總收藏數、總點贊數等等UGC的核心指標，當然在展示的過程中必須要挑選出2-4項最核心的，最需要被直接展示的數據類型，不宜過多。
這些數據在頭部的展示中包括View的布局和字段在View內的布局兩方面內容，這需要分開來說。
1）View的布局
分為通欄和非通欄兩種。通欄即：數據占據一整行，View可以均分一行所有的橫向空間。通欄需要數據量不低于3個，因為如果數據少，會讓這一整行看起來不夠豐滿。
只在一種情況下使用非通欄的View，就是同一行還需要放置別的元素，例如按鈕，例如某些App會將數據放置在頭像右側。
2）字段在View內的布局
也有兩種：居中和居左 (居右幾乎沒見過)。具體如何選擇應該視視覺效果而定，如果View整體偏左，那字段也可以居左來讓左側保持對齊。
3. 背景個人主頁的背景是一塊很方便用戶展示個性的區域，不少App也不會放過這么好的機會；不過這也會額外支出服務器帶寬和存儲資源，所以如何做選擇，是App根據自己的情況而定的。
1）素底/微漸變
純色的背景或做一些細微的灰色漸變的背景，能夠起到突出主體 (用戶信息) 的作用。
2）頭像模糊
將用戶的頭像做一定的模糊處理，當作背景使用。在某種程度上算是曲線完成了用戶個性化的目標，但又不是完全個性化，比較容易控制統一風格。
3）自定義圖片
完全由用戶自主控制的背景圖片，但是為了控制背景的亮度從而在任何情況下都不會影響前景，通常還會加一層透明的黑色遮罩。
4. 按鈕最后再討論一下按鈕的位置，這里我說的按鈕，指的是需要做大的互動按鈕，例如「關注」、「私信」，而一些全局功能的按鈕 (如「返回」、「更多」) ，就不再討論了。
1）單個大按鈕
單個大按鈕一般只有「關注」，或在用戶本人的主頁中蓋按鈕可以替換成「編輯資料」，這兩個按鈕是不會同時存在的，所以可以原位替換。另外只有一個圖標的小按鈕因為占位并不大，所以可以跟在大按鈕旁邊，但通常也不會超過1個。
這個按鈕的位置非常靈活多變，通常還需要結合頭像、昵稱、數據位置進行設計，沒辦法單獨提取出來聊。
所以我在這里只說幾種情況，大家可以自行參考。
① 在居左的數據信息右側。這是一個絕佳的位置，因為居左的數據信息本身會在右側留出一個空位，所以在這里放置按鈕是合理且美觀的選擇。
② 在昵稱/頭像右側。在頭像居左的情況下，將按鈕放置在右側也是一個不錯的選擇，因為昵稱的長度通常有限，無法撐滿屏幕右側 (盡管就這么空著也沒什么太大的問題)，此時按鈕就可以填補這部分空缺，讓元素在右側也能對齊。
③ 放置在下方。例如居中排版的信息，就不太適合將按鈕放置在左右兩側，所以就算只有一個按鈕，也需要單獨占去一行，放置在下方。而居左排版的App有時也會使用這種方法來提升按鈕權重。
2）多個按鈕
按鈕一旦多起來，就沒法隨心所欲地放在其他元素因對齊空缺出來位置了，所以在多個按鈕的秦嶺下，幾乎只存在一種情況：單獨占據一行。
5. 不一樣的個人頁頭部1）馬蜂窩
馬蜂窩，又是它！馬蜂窩的個人主頁設計可謂獨樹一幟，除了這個默認的地球背景圖之外，數據展示也比較特別，并非常見的布局。
2）汽水音樂
來自字節的后起之秀音樂App，個人主頁的背景采用該用戶偏愛的音樂專輯或標簽墻，下拉還可以有更進一步的交互，這種背景算是比較少見的。
四、樣式拓展
這里收集了一些個人主頁頭部的線上案例，也可以作為設計時的參考：
作者：酸梅干超人；公眾號：超人的電話亭（ID：Superman_Call）
本文由 @超人的電話亭 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash ，基于 CC0 協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
標簽：
推薦
財富更多》
-
時訊：五部門：擴大金融產品和服務供給 提升新市民金融服務水平
五部門：擴大金融產品和服務供給提升新...
-
邁入1500米超深水時代 “深海一號”助力我國端牢能源飯碗
邁入1500米超深水時代“深海一號”助力...
-
財政部：1-5月全國稅收收入84774億元，同比增長17% 世界動態
財政部：1-5月全國稅收收入84774億元，...
-
時訊：豪江智能跌7.22% 機構凈賣出6963萬元
豪江智能跌7 22%機構凈賣出6963萬元---...
-
環球快看點丨浙數文化漲10.03% 機構凈買入1.6億元
浙數文化漲10 03%機構凈買入1 6億元--...
動態更多》
熱點
- realme10系列正式宣布 采用雙曲面屏正面頂部居中挖孔
- 五菱全新微型電動車內飾官圖發布 座椅采用星際形打孔工藝
- 努比亞Z40星空典藏版正式開售 采用微米級油畫筆觸紋理技術
- iQOO11系列正式官宣 首批搭載驍龍8Gen2機型之一
- 海信34英寸帶魚屏顯示器發布 支持165Hz刷新率
- OPPO明年將商用240W超級閃充 新一代電芯支持更高倍率充電
- 第一款Android手機渲染圖曝光 橫向滑蓋設計和全尺寸鍵盤
- 吉利首款純電皮卡11月9日上市 車輛續航里程超過610公里
- 努比亞Z40SPro星空典藏版正式公布 堪稱窄邊框天花板
- vivo無線運動耳機2今日正式上市 首銷只要119元
- Connext獲得750萬美元A+輪融資-全球新要聞
- 信銀理財智慧象合治進取1號年內跌7.66%|每日速遞
- 上銀理財"凈享利"系列開放式1年9期年內漲20.72%
- 退市紫晶(688086)龍虎榜數據(06-16)
- 1600℃窯爐旁的堅守者_全球今亮點
- 奕斯偉計算完成超30億元D輪融資
- 中國首艘全新智能浮式生產儲卸油裝置成功交付-每日時訊
- 焦點熱議:Nelly獲得A輪融資
- Primer.ai獲得6900萬美元D輪融資
- 世界看點：南京檢察：以“楓橋經驗”砥礪檢察擔當 暖心故事演繹為民情懷
- 統計員個人工作總結表格 統計員個人工作總結
- 2023年東平縣公開招聘教師面試資格審查第一批遞補通知
- 明天見，太實惠！
- 1600℃窯爐旁的堅守者
- 環球熱資訊！明天見，太實惠！
- 全球視訊！北京市支援合作辦周健到內鄉縣調研對口協作消費幫扶企業工作
- 天津足球名宿沈福儒去世
- 第四屆國際（樂山）綠茶大會在樂山開幕
- 建設“新工科” 我省正發力
- 天天快看：安緝
- 當前通訊！熱刺對切爾西中場加拉格爾感興趣
- 美國一座島突現數百萬毛毛蟲 畫面曝光：蟲子掛滿枝頭 掉落時像下雨_環球快播報
- 安維車件 廈門有限公司 觀速訊
- 《歡樂頌5》今晚央八開播，正午陽光大考，觀眾：更期待瑯琊榜3_天天日報
- 安統
- 蘋果手機充不上電怎么辦？蘋果手機小圓點怎么設置？
- 全球觀察：張元英個人資料簡介
- vivox70pro是曲面屏嗎？vivox70pro的hd在哪里關閉？
- 為什么現在的年輕人，一門心思搞副業和兼職？ 當前快訊
- oppo隱藏相冊在哪里打開？oppo手機相冊怎么設置密碼？
- 成立四周，法國AIGC創企獲1.13億美元融資，創始人曾領導LLaMA研發|天天通訊
- 收評：創指高開高走收漲1.44% 通信設備板塊領漲
- 錦籃基因實現對五加和基因的戰略重組合并 全球聚看點
- 蘋果手機經常發燙是什么原因？蘋果手機發熱厲害怎么回事？
- 蘋果的原相機怎么關閉鏡像？蘋果手機的錄屏在哪打開？
- 世界視點！徐子珊回歸素人后好瀟灑，穿抹胸勒出贅肉，胖了一圈反而更好看了
- 蘋果手機原彩在哪里看？蘋果手機的小圓點怎么設置？
- 蘋果手機換主板有什么影響？蘋果手機黑屏了怎么辦？
- GetHarley獲得5200萬美元戰略投資
- iphone5現在還能用嗎？iphone5的id密碼忘了怎么辦？
- 焦點熱文：國家發改委：大力推廣“信易貸”模式
- 河南平頂山力爭打造全球一流尼龍新材料產業基地
- 手機運行內存怎么看？手機運存占用高怎么辦？
- 蘋果手機怎么隔空投送視頻？蘋果手機發熱發燙是什么原因？
- 恒勃股份上市首日漲28.3% 超募2.9億應收賬款偏高 快看
- 海關總署恢復、批準20家肉類企業在華注冊
- vivox27怎么設置經典桌面？vivox27怎么隱藏應用？
- Deepchecks獲得1400萬美元種子輪融資 今熱點
- 手機如何給電腦共享網絡？手機網絡連接不上怎么解決？
- 中海19.92億元獲廣州荔灣紫蘭苑地塊 曾為廣信資產包項目-天天百事通
- 2023年關于國有土地使用權出讓，《民法典》作出了明確規定
- 蘋果12怎么設置指紋密碼？蘋果12怎么清理內存垃圾清理？
- 小米手機是安卓系統嗎？小米手機怎么隱藏應用？
- 怎樣用蘋果手機掃描文件？蘋果手機充不進電什么原因怎么辦？
- 蘋果12開視頻怎么美顏？蘋果12開視頻不能切出去嗎？
- 開封尉氏縣水坡鎮：提效能促發展“一把手”走流程 環球今日訊
- 訊息：注意！恒為科技：股東黃琦計劃減持公司股份不超過150萬股
- 蘋果手機有隱私空間嗎?蘋果手機的錄屏在哪打開？
- 我們最喜歡的iPhoneMagSafe充電器僅售32.99美元 新視野
- 環球觀點：國家發改委：熱點消費較快增長，經濟向好趨勢依然穩固
- 拍中國人自己的雪豹電影 天天視點
- 天天滾動:現代龐蒂亞克GTO渲染與Ram Air 6概念造型提示
- 當前最新：泰山文化“飛入尋常百姓家”
- 前5個月審批核準固定資產總投資6672億元 全球時快訊
- 當前聚焦：公司與上海寶鋼有業務合作嗎？寶通科技回應
- 日本央行決定維持大規模貨幣寬松政策|環球百事通
- 16日鐵礦石期貨收于815漲0.12%_全球速讀
- 激光脫唇毛應該避免熱水刺激嗎|當前快看
- 天天關注：36星將 ｜對話愿景娛樂關明賀：直播電商的核心競爭力不是人貨場，是這三條
- OurX獲得250萬美元種子輪融資 全球最資訊
- 天天通訊！行政關系主要包括
- Adaptive Phage Therapeutics獲得1200萬美元B+輪融資
- 每日優鮮再被執行215萬
- 防止碰瓷？ 格力申請木各力商標 多個家電品牌曾被搶注山寨商標
- 民航局啟動航班靠橋率專項整治 焦點報道
- 家族性混合型高脂血癥（關于家族性混合型高脂血癥介紹）|全球快看點
- 最新快訊!俄官員：西方在全球經濟領域影響力下降
- 全球頭條：預告 | 6月21日淄川區委常委、副區長郭亦華接話、回訪“12345”政務服務便民熱線
- 修葺的讀音是什么意思是追溯（修葺的讀音） 天天新資訊
- 泰安市特色金屬材料產業鏈赴常州、無錫招商 全球熱門
- 水滸英雄手游攻略（水滸英雄游戲）
- 當前熱點-谷歌助手將放棄對第三方筆記應用的支持
- 常州制度創新劍指網約房，讓房客放心住，房東放心租 天天快消息
- 天天日報丨三星商城618優惠大放送，三星電視全明星產品等你挑選
- 當前視點！哈爾濱市人民政府關于陳燁等同志任免職務的通知
- 光之美少女大集合是哪一集_光之美少女大集合_世界新消息
- 天天熱資訊！618游戲本拯救者Y9000P保值率更高 經典大Y 超值特惠
- Win11新文件管理器砍掉部分功能！微軟回應讓人無語
- 英特爾亮相2023開放原子全球開源峰會:秉持全棧軟件開放戰略,助推科技創新
- 天天實時：牧野微完成Pre-A+輪融資
- 滿好科技完成千萬元級別Pre-A輪融資
- 世界快資訊丨10月份去日本旅游天氣是怎么的 穿什么衣服合適
- 天天新動態：美爾雅董秘回復： 多謝關注。公司的服裝業務已在微博、微信和抖音等平臺開通了官方賬號，歡迎您的關注
- 拓跋燾的燾怎么讀 ？ 北魏太武帝拓跋燾的生平簡介_焦點滾動
- 【全球新視野】防微杜漸的近義詞
- 藍色光標成立幻境技術公司 經營范圍含互聯網直播服務
- 世界熱推薦：商家無證經營致26人中毒被罰百萬 餐飲公司致26人中毒被罰沒193萬
- 別太迷信高考志愿填報“指導”
- 寧德時代等在珠海成立新基建公司 環球滾動
- 微信發布最新公告！ 天天熱訊
- 中環內圈發生三車相撞事故
- 宜春市袁州區發改委率隊赴浙江義烏調研服務業發展先進經驗
- 煙臺市牟平區：省市國動辦對牟平區單建人防工程開展“推磨式”督導檢查
- 點讀6000多本圖書，覆蓋數百本分級閱讀資源！外研通掃描點讀智慧屏VT-X10發布 前沿熱點
- 心海護航，金水區經緯學校用“心”打造未來晴空|世界觀焦點
- 互見法舉例項羽_互見法
- 連環畫出版社在哪個城市_連環畫出版社 天天報資訊
- 世界最資訊丨國產 GPU 架構“天狼星”亮相：自主研發架構完全可控
- 我們真的需要私家車嗎？以社區為基礎參與公共事務的契機|天天消息
- 驚！一部唐卡奢侈品牌手機在北京拍出49.45萬-快看
- TCL再登CCTV《大國品牌》 用科技智敬美好生活
- 奧迪稱將加快電動汽車研發|環球簡訊
- 不留巴黎，也不去皇馬！姆巴佩未來突變，3億互換醞釀中，接班C羅
- 今熱點：煙頭不落地，城市更美麗！以“小切口”，讓文明理念滲透到日常生活的方方面面！
- 每日熱聞!許勒爾：“準備時間很短，但同時又很長”
- 調查：約九成美國人因通脹減少消費 快資訊
- 今晚8點京東618狂歡開啟 家電家居省心服務打造行業新標桿 天天快資訊
- TAVR術中為何會循環崩潰？天津市胸科醫院研究 新資訊
- 2019年二建報名時間與考試時間（2019年二建考試報名時間）
- 富士康如果不“跑路”，還有什么選擇？
- 【全球快播報】重磅！美國芯片巨頭宣布在西安投43億；“中特估”又火了？多股10分鐘強勢漲停
- 確保能源電力平穩供應
- 徒弟緊挨師傅開同樣的店，兩家店電子屏隔空互懟：教會徒弟餓死師傅 全球快播報
- 東南網架不超20億可轉債獲深交所通過 開源證券建功
- 當前消息！中研股份過會：今年IPO過第149家 海通證券過12.5單