如今各種社交網絡應用如雨后春筍般涌現,用戶使用各種軟件的頻率也在不斷增加。不管是網頁還是App應用程序,個人資料頁面的設計對於社交網絡來說都是非常關鍵的一點。
個人資料頁面是用戶相互了解對方最直接的方式,也是一種個性化標志的象征。如果想給用戶留下一個好的印象,那么設計師需要帶給用戶更好的體驗。在設計個人資料頁面時,頁面的展示結構非常重要,如何布局,配色;如何進行動效以及交互設置;如何為用戶清楚的展示這些功能,使這些功能一目了然,並且看起來要美觀,這些都是設計師在畫原型圖前應該考慮的要素。
這里,摹客的小編們給大家收集整理了46個極具創意性的個人資料頁面設計。大家可以通過這些案例去分析其中的排版,布局,顏色搭配等,幫助你更快的找到靈感!
這篇文章內容包括:
1. Dribbble創意性個人資料頁面設計案例分享
2. 知名社交網站的重設計
3. 30個個人資料頁模板下載(Sketch,PSD文件等)
Dribbble創意性個人資料頁面的設計案例分享
1. 卡片式個人資料展示
設計師:Riccardo Cavallo
由Riccardo Cavallo設計的具有創意性的個人資料動畫展示。當點擊“聯系”這個按鈕時,會下拉展示個人Email, Twitter和Facebook資料信息。卡片樣式的資料展示不但節省空間,而且看起來簡單不顯臃腫。
2. 社交程序中個人資料頁展示
設計師:Rifayet Uday
設計師Rifayet Uday設計的這款個人資料展示頁面,以黑色為背景色,強烈的對比色,加上新穎的布局方式給人耳目一新的感覺。
3. 個人資料編輯
設計師:Sam Thibault
由設計師Sam Thibault分享的個人資料編輯模式的動畫效果。當用戶點擊頭像,會彈出四個可編輯的選項,包括個人簡介,頭像,信用卡,對話信息這四個可編輯選項,用戶點擊相應的按鈕即可進入個人資料的編輯模式。簡潔且具有互動性的交互效果。
4. 健身類App的個人資料頁
設計師:Dannniel
由設計師Dannniel分享的關於Fitbit Fitness App健身程序的重設計。布局清晰,完美的融合了社交屬性;個人簡介頁面可以清楚的看到相關的功能展示。包括頭像,一句話簡介,粉絲數量,健身項目和心情日志等。健身愛好者們通過這款App可以隨時分享自己的心得體會,還可以和志同道合的朋友交談心聲。
5. 財務類App的個人資料頁
設計師:Bilal Ck
由Bilal Ck為專業財務顧問設計的個人資料頁面。設計背景:Adviser是一家擅長金融和投資策略方面的優秀公司,在幫助客戶發展和實現其財務目標的方面有着悠久的歷史。
6. 團隊個人資料介紹頁
設計師: Ryo Lu
由設計師Ryo Lu提供的Asana團隊協作的產品個人資料頁原型。關於Asana的產品概念:這是一款既簡單易用又能為世界各地的團隊成員提供在線溝通和協作的產品。通過資料頁的展示,你可以清楚的看到你和你的團隊成員的活動情況,以最方便快捷的方式跟成員溝通。
7. 運動類App個人資料頁
設計師:Rifayet Uday
由Rifayet Uday設計的運動類app的個人介紹頁面,以淺色風格為主。五角形的頭像框設計很有趣,細節處理也非常棒。通過資料頁的展示,用戶可隨時追蹤自己的運動情況,還可切換運動模式並記錄不同運動模式下的運動數據。此外,還可以給自己設置目標,查看最近的運動軌跡等。
8. 簡約網頁個人資料頁
設計師:Bartek Marzec
非常簡約的一款網頁端個人資料模板,插畫令人賞心悅目。喜歡簡約風格的設計師,可以參考此風格進行設計。
9. 儀表盤設計
設計師:Shahidul Islam Shishir
由社交師Shahidul分享的儀表盤和個人資料的頁面設計,以卡片形式展示資料信息,具有層次感。
10. 醫療類個人資料頁
設計師:Rakhar Neel Sharma
這款醫療類App的個人資料頁面給用戶一種清爽,優雅和清新的外觀印象。但不足之處在於字體偏淺,對比度低,有視力障礙的人在使用應用時可能會遇到問題。
知名網站個人資料頁重設計
1. Instagram
設計師:Dmitriy Kharaberyush
相比現在的Instagram網頁端,設計師Dmitriy把個人資料的展示移到了左邊,而非現在的居中展示。並且在左側增加了用戶流,發現,數據,通知等功能切換,方便用戶快速定位。
2. Linkedin
設計師:Gregoire Vella
Gregoire的領英重設計,就顯的稍微輕型一些,看起來非常舒服。
3. Facebook
設計師:Jordan Warmoes-Nielsen
由設計師Jordan提供的Facebook個人頁面重設計,布局清晰,輕盈。整體分為三個部分,左側為個人資料介紹,中部為心情日志,右側是messenger在線聊天的功能。
4. Dribbble
設計師:Dawid Tkocz
非常大膽有創意的Dribbble重設計。各位可以參考一下,找找靈感。
5. Twitter
設計師: Ramil
以藍色和白色為主色調,設計師非常擅長利用空間來進行設計。如果加深一點對比度更好些,不過整體而言,有參考價值。
6. Uber
設計師:Midobel
以下是摹客小編為大家精心收集整理的30個免費的個人資料頁模板下載,涵蓋網頁和app端類型,Android和iOS,Sketch和PS等各種模板資源。你想要的風格都有,需要的小伙伴可一鍵下載,全部打包帶走!
PSD個人資料頁模板免費下載:
3. Free PSD: 社交類 User Profile & Inbox Messages
5. PSD: User profile UI screen
Sketch模板資源免費下載:
10. 3款卡片式個人資料展示
https://dribbble.com/shots/2316666-Profile-card-UI
https://dribbble.com/shots/2444222-Day-019-Dribbbl...
https://dribbble.com/shots/3792553-HeadShot-Theme
12. Spotify主題
13. 音樂主題
14. 個人資料聯系頁
15. 谷歌個人資料頁
個人資料頁素材包資源免費下載:
16. 十款個人資料界面打包下載
17. 社交類app個人資料頁
18. 圖像分享app個人資料頁
19. 控制面板&個人資料頁
20. 詩詞類App個人資料頁
21. 音樂類App個人資料頁
22. 公司職員個人資料頁介紹
23.社交類App個人資料頁
24. 個人資料&最新貼子展示頁
26. 社交類個人展示頁面
27. 免費安卓資源包下載
28. 圖像類個人資料
29. 小清新個人資料設計
30. Figma freebie
想要設計和開發一款出色且易用的應用程序並非易事,我們需要借助一款把自己想法快速轉化為原型,並且可以高效交付產品的團隊協作工具。在設計好頁面后,快速交付產品,並與其他設計師、開發人員或產品經理進行零障礙溝通,才能更好的提升團隊效率。
摹客iDoc高效簡單的團隊協作設計工具, 為參與產品設計的設計師,產品經理,開發工程師提供了一個高效實時的在線協作和交付平台,幫助他們快速設計,討論,分享和交付產品。iDoc支持從Sketch,PS和Adobe XD中上傳原型,一鍵查看標注,導出切圖,並快速創建交互原型,支持多種手勢交互、8種動畫特效等。
從此和開發的溝通不再難,交付不再是問題,設計不再繁瑣!在設計好頁面后:
輕松切圖交付給開發
iDoc不僅支持不同倍率的切圖(@1x,@2x,@3x)還可以自定義尺寸。一鍵下載切圖,輕松交付給開發,事半功倍!
雙擊快速添加交互
雙擊圖層即可快速創建交互,包括返回鏈接,頁面鏈接,外部鏈接等。超過8種動畫展示效果,交互設計從此不再繁瑣。
多種評論樣式,更好地表達想法和意見
iDoc中提供多種評論方式(圓、矩形、箭頭、直線、文本、圖釘)更好的表達你的想法和意見。評論時,還可@項目成員,被@的成員的頭像左側會接收到消息提示,點擊消息內容即可跳轉到評論頁面。快速高效的跟團隊成員溝通!
以上就是小編為大家精心整理的30個讓你腦洞大開的個人資料頁設計,喜歡別忘了收藏哦~