先來看看技術發展和現階段人口結構的變化對線上社交有什么影響。
1. 技術上：
2G 時代的社交實現了跨地域聊天，用戶可以在 QQ 里和天南地北的人聊天，強調在線狀態。QQ 號是用戶社交虛擬身份的 id，是用戶自我創造的線上人設。2G 時代的社交尋求更為方便的溝通方式。
3G 進入了移動社交，著名風投公司合伙人約翰·杜爾提出 SoLoMo 概念（社交化、本地化、移動化）。用戶可以基于位置進行交友，比如附近的人；基于行為匹配，比如微信搖一搖。沒有在線狀態，可以隨時隨地的聯系，隨時在朋友圈獲取對方線下的生活狀態。
4G 時代，手機硬件、大數據和 AI 的發展，大大提升了匹配的效率，高效地建立潛在社交關系。不論是看臉社交還是靈魂匹配，都能在很短時間內找到合適的人聊天。信息傳輸越來越快，溝通互動的方式不斷革新，用戶從文字、圖片聊天進而習慣于實時語音和視頻。
隨著 5G 到來，高帶寬互聯網、云、AR/VR/MR 的高速發展，視頻作為主要的信息和溝通載體變得日益普及，疫情讓在線溝通和協作越來越方便，更多的線下社交場景轉移到線上，線上社交的頻次大大增加的同時，副作用也開始呈現，社交隔離讓人們感到更孤獨，對云社交的需求愈發強烈。
2. 人口結構變化：
獨生子女群體在 80 年代出現，但由于父母輩基本是有數量較多的親兄弟姐妹，因此第一代獨生子女的同輩中有較多的表兄弟姐妹或堂兄弟姐妹互為玩伴。而由第一代獨生子女繁衍出的第二代獨生子女，也就是現在的大部分 00 后，家庭規模越來越小，親屬同輩越來越少，加上人口流動頻繁，少有的親屬同輩也較為疏遠。
00 后這一階段的出生率跌至了最低點，平時家庭、學校二點一線的生活，繁重的課業負擔，原本在親屬同輩圈的社交就少，在學校的熟人同輩圈的社交也越來越少。
2018 年發布的《00 后來襲-騰訊 00 后研究報告》中說到，“75%的 00 后渴求有更多的時間跟同伴在一起”。00 后在現實生活中缺失的同輩圈社交，更有強烈的訴求去互聯網上尋找。他們有著更為復雜的社交需求，通過與同輩圈的互動，建立同輩伙伴關系，從中獲得陪伴感、歸屬感和自我認同，形成自我認知。
回顧這幾年社交的變化，技術讓社交體驗從“線上線下割裂”向“虛擬空間映射真實世界”發展，00 后的線上社交需求更加強烈，我們如何解讀用戶、解讀人群，尋找他們的需求痛點。接下來，本文從自我展示、匹配連接、溝通互動的社交體驗路徑來探討社交的設計趨勢和特點。
最初的互聯網社交身份是簡單的虛擬身份 ID：虛擬頭像、昵稱、個性簽名、QQ 秀，當時的社交體驗線上和線下完全割裂，用戶的自我展示強調純線上人設打造。隨著硬件設備和圖像技術發展，用戶慢慢豐富社交資產，用真實身份交友，高清美顏自拍、沙雕表情包和聲音名片，線上的自我展示與線下生活緊密聯系。而現在，更多人用虛擬形象代表自己，技術的進步讓虛擬形象的展示更完美、更逼真。
1. 真實身份展示從單一趨向于全面
用戶在展示自我的時候往往需要填寫大量文字信息和傳輸多張精修過的照片，導致編輯成本高、瀏覽效率低。視頻化的普及讓用戶隨時隨地記錄自己，在這種沉浸式的自我展示中，身份信息傳達更加有效和真實，也進一步放大用戶的自我炫耀感。
Feels 的個人資料由全屏照片、視頻、問答組成，用 story 的交互方式進行瀏覽。
2. 從聲音名片到聲音形象，更加賦予了情感和靈魂
語音的優點在于比文字傳輸效率高，一篇完整的文字自我介紹用語音三言兩語就說完了。而語音的缺點是無法在嘈雜的公共環境中使用，所以老年人最愛用語音，因為他們私人空間較多。疫情讓人們大大減少了旅游和外出娛樂，享受個人空間的時間變多了，從而縮小了語音使用環境受限的缺點，放大了傳輸效率的優點。在今年，出現大量語音房社交，語音從“蘿莉音”“正太音”的聲音社交名片變成展示個人形象的方式。
Clubhouse 帶來語音社交熱潮，Facebook、Twitter 也相繼上線語音房 hotline 和 Spaces，用戶可以找到一個感興趣的主題房進行聊天或圍觀，那些通過短短幾分鐘發言就吸粉的高質量用戶，通過聲音賦予了個人的情感和有趣的靈魂。
Reddit Talk
3. 從“我是誰”到“我們的關系”
展示自我除了從展示者的角度來設計“如何更好的展示社交資產”外，也要從看的人的角度考慮“如何更好地了解他”。
ios15 從 spotlight 輸入聯系人的名字，對方個人信息會智能拉取你們相關聯的信息，包括最近的聊天、共享的位置和照片。
Snapchat 能根據生日、出生時間、地點生成個人星座運勢和個性，還能和好友進行星座合盤。通過個人資料之間的交互，強化雙方身份的情誼特點。
4. 虛擬和真實之間，越來越強調“真實”
虛擬形象的概念不新鮮了，2003 年 QQ 秀是虛擬形象的雛形，Y 世代網民根據自己的喜好拼出屬于自己的 QQ 秀形象，用于 QQ 聊天時的自我形象炫耀和情感表達。Z 世代逐漸成為互聯網的主力軍時，他們的個性習慣和獨特的表達方式讓虛擬形象在社交中的使用需求愈發強烈。《Z 世代圈層消費大報告》提出 z 世代五大典型興趣圈層為：電競、國風、二次元、模玩手辦、硬核科技。Z 世代已經從他們的興趣中建立了對虛擬形象的情感，興趣成為他們建立自我人設的重要手段，他們跳出固定人設，在不同興趣圈層展示多樣個性，使用特定沖浪語，以此獲得歸屬感和認同感。
高新技術的發展讓虛擬形象變得越來越高質量。蘋果的 Memoji、Snapchat 的 Bitmoji 和 Facebook 的 avatars 讓虛擬形象成為自己的化身，用于個人資料展示以及聊天表情包、合照、視頻互動等場景。Snapchat 最新的資料設計中展示了 3DBitmoji。
依靠面部捕捉、表情捕捉、動作捕捉的技術，實現了真人與虛擬形象的動態同步，降低了真人化虛擬形象的設置成本。在 SXSW2021 音樂節上，展示了 Facebook 新 avatar 系統推出的 VR 社交應用 Horizon。人與人能通過虛擬形象進行實時互動，除了有自己逼真的形象外，還具備真實的眼神表情和肢體動作，還會根據肢體動作變化不同情緒。
大數據和人工智能時代，融合了 AI 技術的虛擬形象也在近幾年層出不窮。與真人虛擬形象不同的是，它不受對方在線的限制，能隨時進行實時互動，來滿足用戶對陪伴和娛樂的需求。麥當勞推出一位唱跳型愛豆的虛擬形象，她可以和小朋友進行溝通互動，一起跳舞，跟小朋友講故事，增加與消費者之間玩伴、陪伴關系。
麥當勞虛擬偶像“開心姐姐”
用戶在社交網站分享動態，維系自己的人設，獲得群體的存在感和認同感。在未來，這些記錄和創作的內容是否會形成自己的虛擬空間？每一個人不同的故事動態與空間產生聯系，形成自己獨有的虛擬空間社交資產。
5. 社交人格從「完美人設」到「透明人設」
隨著好友列表數量增多，很多人開始逃離朋友圈，人們在朋友圈的人設經營也越來越謹小慎微，開始疲于“完美”人設的表達，社交產品開始減壓。正如越來越多的年輕服裝品牌進行的「透明商品運動」，他們在品牌宣傳時，將商品從生產到制作的全過程透明化公開給消費者。「透明人設」是反對當今社交信息流充斥著的完美人設，鼓勵自我展示更加真實和未經編輯。
Dispo 復古相機拍攝后需要 24 小時才出片，并且沒有任何美圖的編輯工具。傳達現實生活中不完美的時刻也是值得捕捉和分享的。
Poparazzi 能連續拍照變成 GIF 進行分享，同樣也傳達未經過編輯的更真實的自我展示。用戶用 emoji 進行互動，僅展示動態收到的 emoji 表態數量。
你是否會因為動態無人互動而焦慮？是否會因為很久不更新動態而失去展示的動力，慢慢社恐？instagram 和 Facebook 允許用戶隱藏帖子的贊數，來減輕用戶的壓力和焦慮。
1. 匹配趨向于多元化
調查發現，現實中兩位互不相識的陌生人要花 50 小時，才可以在路上叫出對方名字，再投入 40 小時，才能蛻變為真正的友情。互聯網幫助用戶高效匹配，縮短認識的時間，降低認識的成本。
近幾年，用戶的喜好正在極速分裂和細化。《00 后來襲-騰訊 00 后研究報告》表明 73%的 00 后會主動地獲取資源來發展自己感興趣的領域。由于現實中同輩社交圈狹窄，他們需要在互聯網的社交陣地上尋找更垂類的興趣伙伴，比如云學習伙伴、游戲玩伴、coscp 等，線上社交在不斷垂直細分以便更快捷的連接同輩伙伴。
隨著傳輸速度的發展，匹配連接的體驗具有更實時的交互和面對面的互動體驗。Distance Disco 是一款云蹦迪平臺，疫情期間，大家在各自房間里通過在線視頻就能開啟一場線上舞會，結識一起蹦迪的朋友。界面上的視覺元素和色塊會隨著音樂節奏變化，增強迪斯科的互動氛圍。
視頻鏈接：https://v.qq.com/x/page/w32687gdpf8.html?start=46
Honk 匹配陌生人聊天的動畫，傳達了穿越了人山人海，遇見了你的感覺。頭像出現時，出現招手動畫，像是剛剛見面的人招手打招呼。
2. 匹配提升安全感和隱私保護
現實生活中我們都有意識地保護自己的隱私，而到了互聯網，卻容易放下戒心將自己的信息分享給他人，線上社交會放大陌生人有趣、友善的一面，卻也隱藏了人性的缺點。社交產品的在幫助用戶建立社交關系的同時，也要提升用戶隱私保護和社交安全的體驗。
Instagram 帳戶注冊時，未滿 16 歲的未成年人默認使用私人帳戶，僅粉絲才能查看其發布的信息，在平臺內容分發和互動上與成年人帳戶進行隔離。當用戶更改成公共帳戶時，會給到提示強調私人帳戶的好處。
Snapchat 推出“好友檢查”，用戶可以快捷私密地刪除不聯系的人，確保好友列表里仍是真正的朋友。
Tinder 的一項調查顯示，40%的人在 Tinder 中發現了前任，24%的人遇到了家人。為了保障用戶隱私，用戶可以上傳他們的聯系人名單以選擇不想在 app 中遇到哪些人，屏蔽所選的聯系人。
在社交產品中，聊天是關鍵的一環，匹配到合適的用戶后，如何加強雙方情感連接和信任的紐帶讓用戶為關系而留？從書信到電報到電話到視頻通話，都是通過技術的發展獲得了更高效真實的溝通體驗，線上溝通的用戶體驗一直不斷還原線下的真實體驗，疫情加速了多人在線視頻通話的發展，既讓人在溝通時保持社交距離，又讓人感覺對方近在遲尺。
1. 更臨場
相較于面對面溝通交流，線上的交流在聽覺、視覺、觸覺、情緒傳遞的體驗上，決定了用戶社交臨場感的強弱。
Honk 用文字交流時，能看到對方一個字一個字實時的輸出，模擬真實的說話方式。
2021 年 Google I/O 大會的 3D 視頻聊天設備 Project Starline，利用多個高分辨率攝像機和深度傳感器在不同角度捕捉用戶，以 3D 的效果進行人物呈現，營造對方真的就在對面的裸眼 3D 感。
2021 年 F8 大會上，Facebook 提出用于 AR 視頻通話的 MultipeerAPI，更方便創作者制作 AR 特效，用于多用戶、多屏幕的共享 AR 體驗。用戶在多人視頻通話時，視頻中會出現太空或篝火的 AR 特效，讓視頻者感受到大家都在同一個共享空間。還支持輕量級游戲，多位玩家屏幕由一根曲線貫穿，玩家用臉引導甜甜圈共同完成接力游戲。
2021 年 IOS15 的更新，Facetime 使用的空間音頻讓通話的聽感更加自然、逼真，仿佛在同一房間面對面聊天。
面對疫情人們在生活中的社交禮儀都以非身體接觸式動作替代，線上社交的頻次和密度大大增加，視頻通話在視、聽處理上越來越自然和逼真，在觸覺上也向著《頭號玩家》的男主角在虛擬空間中感受到的虛擬觸覺傳遞到現實中那樣在進化。美國西北大學的研究中，一位媽媽與孩子視頻通話時，通過撫摸屏幕，能把來自媽媽的撫摸傳遞到孩子身上的“AR 皮膚”上。未來在虛擬社交中也能獲得真實的觸碰，加強情感的連接。
2. 更個性
個人展示是單向的，溝通交流是雙向的，雙方在不斷交換彼此之間的狀態和感受，從中獲得被了解和認可。個性聊天氣泡、表情包、自定義聊天背景，幫用戶在溝通交流時展現自己獨一無二的個性。線上社交的用戶語言設計要打造個性化的社交氛圍，讓用戶的個性在溝通中被挖掘和展現。
MUZE 在聊天中可以自由擺放文字、貼圖、涂鴉，讓交流更個性化和自由。
Google I/O 大會推出的全新設計語言 Material You 中，系統會基于用戶選擇的壁紙進行自由取色，并應用到 UI 中。是否聊天的 UI 也能隨著聊天中的圖片，或是聊天發送的表情文字提取心情語義，進行 UI 的變化，加強情緒的傳達。
3. 場景化
人和人的社交通常依附于不同的場景，群聊或好友分組就是將特定的社交關系進行場景設定。比如“火鍋突擊隊”“老廢物樂園”“吃瓜小分隊”依附社交場景來進行互動，幫助用戶帶入社交氛圍。
咖啡館社交，通過構建咖啡館場景，傳達和陌生人進行一場閑聊的慢社交體驗。
森遇
Facebook 的視頻通話，用煙花和禮帽的 AR 特效來構建派對的社交場景。
2021 年 WWDC 大會上，現場用不同的 Memoji 營造了線上觀眾參與會議的場景。
4. 感官刺激
2021 年 Google 的一份統計數據表明，用戶平均注意力時長從 12s 下降到 9s，而 00 后的平均注意力僅 8s。面對這樣的用戶，需要讓他們在短時間內獲得極大的感官刺激來延長注意力，以及在溝通交流時有更極致的情緒表達。
Honk 可以同時發送大量的 emoji 表情。
QQ 團隊運用 Lottie 技術推出每秒 60 幀超高幀率、動效更細膩的小黃臉表情包。
微信的表情包不僅帶來視覺上逼真的 3D 動畫效果，屏幕上其他內容也會隨之震動，還有觸感上的沖擊。
網絡表情包
5. 輕娛樂、游戲社交
《社交媒體趨勢報告》提到“和朋友保持聯系”一直被列為是使用社交媒體首要原因，但在 16-24 歲的用戶中，主要驅動力變為“尋找搞笑和有趣的內容”。青少年通過線上社交彌補線下社交缺口，獲得同輩認同，排解孤獨和學習壓力。“組隊開黑”“一起微光”“找長期固聊固玩”，00 后們的社交需求更多放在娛樂、游戲化社交上。社交體驗也從物理空間的連接轉變到精神空間的連接。
用戶在 Housparty 進行視頻聊天時，如果感到無聊，可以玩一場輕松的游戲，游戲過程中可以通過視頻看到對方的狀態。
Snapchat 正推出一種叫 Connected Lenses 的新型增強現實鏡頭，它可以讓不在同一個物理空間的用戶一起進行 AR 游戲，比如共同組建樂高模型。
IOS15 中 Facetime 加入 Shareplay 功能，可以與朋友共享屏幕，一起線上追劇、聽音樂、玩游戲。
Tinder 在今年推出第二季 Swipe Night 活動，用戶通過觀看每周一集的互動故事，向左或向右滑為故事中的角色做決定，每一集結束后會匹配到在故事中做出類似選擇的用戶，并可以繼續相關話題的聊天。
科技重塑了我們的生活。線上社交讓我們日常溝通更為方便，也讓我們輕松維系現實中的社交關系，越來越多的人依靠它構建新的虛擬關系，互聯網帶來溝通便利的同時，也減少了人與人面對面交流的機會。
美國傳播學家艾伯特·梅拉比曾給出一個公式：信息溝通傳遞=55%視覺+38%聲音+7%語義。大意是人們在現實生活中進行面對面溝通交流時，7%是語言上的內容，剩下的是面部表情、肢體動作、目光接觸、語速語調等非語言內容的交流。隨著技術的進步，社交不斷在補充非語言內容交流的缺失。在自我展示中，無論是視頻化、聲音形象、富有表情和肢體動作的虛擬形象，還是溝通場景中越來越臨場的體驗和充滿感官刺激的表情符號，線上社交的趨勢都在不斷映射線下社交的體驗。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在信息流產品中，個人資料卡是一個很重要的頁面。一方面，創作者通過這個頁面展示賬號價值，突顯賬號魅力，引導用戶關注；另一方面，消費型用戶通過這個頁面了解創作者，查看創作者更多內容，是眾多消費型用戶消費內容中重要的一環。只有把這個循環做好才能長期促進平臺生態發展。
這個頁面承載著這么多的價值，該如何設計？本篇將以 QB 看點號資料卡升級的設計思路為例，進行分析解答。
在前期分析過程中，我們發現當前版本存在諸多問題。
從數據上看，對比公司內同類產品，關注按鈕轉化率較低（出于數據保護，數據隱藏）。
從樣式上看，信息布局較亂，重點不突出。
基于以上背景，我們開始對資料卡進行改版升級。
做任何一個設計前，都應該思考設計目標，否則設計出來的結果沒有意義，也缺乏過程依據和支撐。那么資料卡的設計目標是什么呢？這要從資料卡在信息流產品中的使命和價值說起。
一方面，消費型用戶通過這個頁面了解創作者，查看更多內容；另一方面，創作者通過這個頁面展示賬號價值，突顯賬號魅力，引導瀏覽者關注。
如果創作者能夠在資料卡充分展現自己的才華和魅力，帶來了更多瀏覽者的“關注”，那他們就更有動力分享或生產優質內容，進而使產品內容更加豐富；從而吸引更多新用戶的瀏覽、留存。
更多新用戶的加入、瀏覽、留存，讓內容生產者有更多的漲粉空間，粉絲規模做起來之后再進行商業化。這樣對消費型用戶、內容生產者、平臺方都有利，進而處于良性循環。
了解了資料卡的使命和價值，設計目標也呼之欲出，作為平臺方，我們需要幫創作者解決兩個問題：輔助創作者吸粉 & 助力商業化變現
當然，創作者產出優質的內容才是吸粉的關鍵，平臺方只能助攻。但不同的信息流產品有著不同的定位和側重點，吸引著不同的用戶，所以資料卡設計的樣式也不盡相同。
在輔助創作者吸粉這里，有兩個維度可以思考：
內容展示分析
在資料卡中，有三個大區域：頭圖區、信息區和作品區。
通過對比市面 20+信息流產品，我們發現了一些有趣的規律：
① 頭圖區：越是社區類產品，對頭圖個性化重視程度越高，而資訊類的產品則不太重視。
從產品功能上來看，越是偏向于社區類屬性產品，頭圖區域越大，可自定義替換的范圍也越廣。從用戶使用角度來看，社區類產品的用戶也更愛展示自我，頭圖替換的比例也更大，風格更多樣化。而資訊類產品的創作者大多使用默認頭圖，并不進行個性化設置，自定義頭圖的比例很小。
所以我們在設計頁面布局時，需要思考自身產品定位以及創作者需求，把有限的空間利用在刀刃上。
② 信息區：越是追求多元化收益商業化的產品，信息區承載量越大。
創作者不是活雷鋒，想讓他長久的留在平臺必然需要給到創作者更多收益（收益除了顯性也有隱形的，比如 B 站，很多創作者在 B 站發文平臺收益相比其他平臺少，但因為品牌聲量大、氛圍好，獲得了巨大的關注和曝光，所以即使收益低，創作者也會持續在平臺投稿）。
除了流量分成外，平臺們也在幫助創作者實現多元化的收益，比如商鋪、直播、付費課程粉絲圈等。甚至抖音很多創作者直接把商務合作寫在了個人簡介中招商引資。所以這個區域，隨著多元化商業收入的更多嘗試，信息承載量也越來越大。
③ 內容區：越是長內容，越傾向于展示更多作品和更多信息；越是短內容，越是“看就完了”。
對比多款產品我們發現，越是長內容的產品，在內容區越是注重效率選擇。通常會顯示更多內容，且單條內容會顯示更多維度幫助瀏覽者決策是否點擊查看。猜測可能是因為內容較長，瀏覽者通常會花費更多精力在選擇上。而越是短內容，把單條內容放大，促進瀏覽者點擊，直接“看就完了”，反正一條也沒太長時間。
所以設計資料卡時，需要設計者清晰了解自己平臺內容特征以及用戶行為偏好，做出更合適自己平臺風格的設計。
綜上，在做內容布局展示時，需要綜合考慮產品定位，思考這些區域對于產品和創作者瀏覽者意味著什么。
比如頭圖區域，資訊類產品并不重視，畢竟賬號還是靠內容說話，即便是放張個性化頭圖，瀏覽者也不會因此而關注。而且大家都使用默認頭圖，個性化無從說起，就更沒有什么意義了。
那么如何讓頭圖有價值？創作者愿意為此更換，而瀏覽者看到能夠感受到帳號的特殊性？
筆者提供一個思路拋磚引玉，參考 App Store 的編輯精選：只有精選的 APP 才可以有頭圖權利，其他 APP 都是默認樣式。而稀缺性和被認可，正是人類所追逐和渴望的。如果平臺選出一些精選帳號，賦予其設置頭圖資格。作為創作者，非常有意愿去更換，因為可以體現出和其他賬號的不同。瀏覽者也可以通過頭圖感受到當前賬號的優質屬性。
用戶行為關注調研
既然要幫賬號吸粉，那么我需要了解瀏覽者的行為偏好，知曉瀏覽者根據哪些內容判斷是否關注該賬號。這里我們線下調研了 12 名用戶，了解他們在信息流產品中（產品不限于 B 站、抖音、小紅書、知乎、快手等）進入資料卡后，通過哪些信息和元素來決策是否關注賬號。
通過訪談，我們得到了 12 名用戶的原始表述。
我們發現，瀏覽者在關注賬號的時候，主要在意“內容是不是感興趣” 、“粉絲量多少” 和 “內容領域”。少量同學提到了會關注下作品數，其他信息基本不看。
原話摘錄：
而在操作路徑上，進入資料卡后：先到作品區查看內容列表 → 拖動頁面向上查看更多內容 → 返回信息區查看粉絲量 → 關注賬號。呈現先下后上的操作路徑。
行為路徑結合關注決策，有三個關鍵元素是形成操作鏈條并綁定在一起：內容、 粉絲數 、關注按鈕，且內容為高播放量內容。所以高播放量內容，粉絲數是決策關鍵，激發下一步關注行為。
而且我們在訪談中發現，關注行為也是一個偏沖動行為，用戶通常在進入資料卡的幾分鐘內做出決定，在頁面停留時間越長，越不容易發生關注行為。所以在設計中，盡量縮短決策路徑，減少決策時間。
基于以上結論我們做了兩個方案再次進行測試：
為什么做一個傳統方案進行對比測試也是因為現在很多產品資料卡頁面趨同，大家已經形成了認知慣性，而尊重用戶習慣也是產品設計中需要考量的因素。接下來，我們又找了 12 名同學進行訪談和測試。
出乎意料的是，大家對于新事物的接受程度很高，有八名同學選擇方案 2。雖然只是理論上的選擇，并沒有延伸到實際行為，但也佐證了大家對于高播放量內容確實存在很高的需求。對于選擇方案 1（傳統樣式）的同學來說，主要是不喜歡橫滑操作和不想改變既有習慣。
原話摘錄：
不管哪種樣式，內容都是重中之重。既然是重中之重，大家也會注意到，有些內容區視頻是雙列形式，有些視頻是單列形式。那么瀏覽者如何看待這種區別呢？會對關注產生影響嗎？
基于兩種樣式進行訪談，比分最后打成平手。雖然在 2 選 1 的要求下大家各有各的選擇，但最后也都表示差不太多，都能接受。從信息利用率上來講，雙列的形態展示的內容更多，而且對視頻更加友好，預覽圖比較大。所以如果是視頻內容，可以使用雙列大預覽圖樣式。
以上是關注吸粉的部分，設計時需要綜合考慮產品定位和用戶行為特征進行頁面布局。
商業化能力是創作者與平臺形成強關系的紐帶。平臺為幫助創作者變現，不僅通過各類扶持政策給予補貼， 更是通過整合各類商業資源，不斷拓展商業化渠道，打通全流程商業鏈條，幫助創作者實現內容價值最大化。
一般平臺提供商業化有三種類型：
基礎工具
平臺政策
資源整合
商業資源整合：整合平臺內外部的廣告主資源、商業活動資源、投融資服務、新媒體賬號孵化等各類資源
資料卡涉及到的商業化展示主要為：電商能力，內容付費，粉絲圈/粉絲付費。當有這些商業化內容的時候，通常占用信息區一行區域，大多數信息流產品多如此。
但當多種商業化能力同時提供時，不同的產品給出了不同的解決方案。比如大多數產品合并在信息區的一行，通過橫劃展示更多，以保證其他內容的露出。畢竟對于瀏覽者來講，內容才是最重要的。
有一些產品則沒有選擇合并的方式而每個占用一行空間，與此同時，把創作者的信息展示的也更為詳細，可能和本身社區類產品的定位有關，希望更能關注除了內容以外，創作者自身的獨特價值。
還有一些產品則利用了內容 tab 區域承載櫥窗和付費服務，減少信息區的占用，還可以通過邏輯把不同渠道或不同場景的用戶引導不同 tab，讓瀏覽者看到更適合自己的內容。
資料卡里承載了很多的信息，從創作者的個性展示到內容到商業化變現，需要我們不斷平衡每個區域的關系。
別的產品這么做，并不一定適合自己的業務，需要我們找準自己產品的定位，結合當下業務重點去綜合考慮。
業務是偏資訊的還是偏社區的？是偏短內容平臺還是長內容？有沒有提供足夠多的商業變現能力給到創作者？商業化能力做的如何？不同模塊的用戶數據怎么樣？只有對現有業務充分了解，才知道哪些是現階段的重點，才能對一個頁面做出更有依據的設計。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：騰訊設計
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
消息通知可以及時地將狀態、內容的更新觸達到用戶，用戶則可以根據收到的消息做后續判斷。但是如果沒有及時將重要消息觸達到用戶或者濫用消息，則失去了消息通知的初衷。特別是針對涉及復雜任務流程的產品，消息類型繁雜，難以全面盤點消息類型，消息系統的設計就顯得尤為重要。
希望通過這篇文章讓各位在設計消息通知系統的時候能夠更加全面高效。
消息通知需要為產品服務，幫助用戶快速獲取對應的通知信息。收到一條新回復的提示、工作臺展示工作進度、朋友的來電，生活中處處是信息的交換。在 App 和網頁應用中最常見的信息交換方式則是消息通知。
消息作為一種信息交換方式，抽象其過程，即為“在達到某一觸發條件下，由發送方發送消息給到接收方，接收方可針對此條消息提供反饋”。需要包含以下關鍵因素：
消息觸發時間與條件（何時什么事）：如按周期重復的時間點，或系統狀態變更、用戶操作結果等；
消息發送方（誰發現的事）：可能是系統、第三方服務商，或者某個用戶；
消息接收方（誰需要知道）：即接收方，可能是系統中的全部用戶，也可能會根據權限劃分推送到某個用戶群組，或者是某個特定用戶；
消息觸達渠道（怎么找到他）：短信、電話、App 內通知等；
消息通知內容（告訴他什么）：短信的文本、電話對話內容、通知消息的文案等消息通知；
消息操作反饋（他可以干嘛）：主要分為只讀與操作反饋。只讀，即當前消息用戶在瀏覽后不需要做更多的操作，主要以了解為主；操作反饋，即當前消息需要用戶瀏覽，且在瀏覽后做相應的后續操作。
好的消息系統要滿足什么條件：
全面：通知的消息項要完整全面，用戶才能放心地通過消息通知系統了解消息更新內容；
及時：消息的觸達方式要及時有效，在消息相關事件發生后，用戶能在第一時間獲取到信息并提供操作反饋給到消息發送方；
高效：能通過合理的消息發送途徑，允許用戶設置及合并相似信息等方式避免過多消息侵擾用戶，讓用戶能夠高效處理消息通知。
設計全面、及時、有效的消息通知系統需要對消息的六個關鍵因素進行全面盤點，通過分步的方式逐步完成消息通知系統的設計。主要分為以下三步：
① 盤點系統中包含的消息項：包含其觸發條件、通知來源及通知對象。需要盤點完整消息項從而保證消息系統的完整性；
② 確定消息觸達渠道：包含各消息項的觸達渠道。讓所有消息都能觸達到用戶的同時，能夠讓重要信息更易觸達，保證消息通知的及時性；
③ 撰寫通知內容與操作反饋：包含各消息項的通知內容與操作反饋。讓消息內容能夠有效地傳達給用戶，讓用戶能快速反饋、操作。
盤點的過程，即對消息通知清單的梳理。與產品、研發等團隊成員的溝通也將使用該清單。最終目標即完成下方表格的填寫：
當前步驟需要對系統中可能會有的消息項進行完整的盤點。盤點消息項可以通過按消息類型走查方式完成。市場上比較有共識的消息的分類方式主要分為禁止、警告、成功三類。但是在實際設計工作中還需要配合以下的消息分類方式去更完整地盤點消息項：
盤點出的每個消息項
都需要補充以下四個關鍵因素：
觸發條件：結合產品核心場景梳理完整?？赏ㄟ^狀態圖或泳道圖查缺補漏（詳見下段內容）;
通知來源：可能是某個內部系統，可能是某個用戶組，也可能是某個具體用戶。用戶組的劃分需要提前與產品、研發同事溝通完成；
通知對象：可能是全部用戶，也可能是某個用戶組或具體用戶。由觸發條件中的場景決定；
重要性：需要與團隊溝通得出，可使用“高”、“中”、“低”的分類方式。
盤點完成的消息項使用下表進行整理，方便產品、設計、研發之間的溝通。
用流程圖或泳道圖查缺補漏：
對于 ToB 或 ToG 類含有復雜狀態轉換以及任務流的產品，除了使用分類的方式盤點消息項，還需要對照流程圖或泳道圖查缺補漏，避免消息類型的遺漏。
如，顧客線上購買商品并收取商品的商品相關狀態變化如下圖所示，每個狀態都可對應著一條消息項：
線上購物過程中的消息流程圖示意
當系統內包含多角色，且角色間流程有交互時，則可以使用泳道圖的方式進行梳理。在泳道圖中的每一條狀態變更線，都對應著一個狀態變更提醒。其中角色間交互的線，由于需要角色主動處理方可進入下一流程狀態，這條消息一般會成為一條待辦消息。
什么類型的消息不要納入消息通知系統：
需要注意的是，雖然通知的完備性很重要，但某些消息在前期梳理時就需要從清單中剔除，包括：
確定要推送給用戶的消息類型后，需要給各消息匹配適合的通知方式。不同的通知方式會有不同的適用場景，可對照下表結合第一步整理的重要性配置消息的觸達渠道：
消息觸達渠道的配置結果到第一步的表格中：
平衡通知量：
一個好的消息系統需要能有效觸達的同時不過分侵擾用戶。這就要求我們對系統實際運行中可能會出現的通知量進行預估，并適量調整通知方式，讓重要的消息能夠更有效及時地觸達到用戶。最終調整后的消息數量與提醒強度的關系最好能形成如下圖所示金字塔的模式。
提醒強度與消息數量的金字塔關系
合并重復消息：
對于出現頻率較高，且用戶不需及時了解每條消息的消息項，可以通過合并消息的方式減少通知的數量。合并主要有兩種方式：合并流程過往節點信息和合并同類消息。
兩種合并消息方式
智能推送：有條件的系統可根據用戶行為分析及用戶畫像，進行智能推送。如基于用戶畫像按類型推送運營類消息，基于用戶接受消息數量，判斷是否合并消息推送等。
渠道間消息項的延續與統一：
出于信息持續性的考慮，觸達渠道之間有部分關聯關系在制定消息觸達渠道時需要注意，如：
通知的內容需要滿足簡明易懂的同時，還要讓用戶能夠快速處理。根據大量經驗總結，通知內容的撰寫可使用一個通用撰寫公式：
在應用撰寫公式寫內容時，需注意以下要點：
除了以上通用注意事項，由于渠道本身的特征差異，還需注意以下渠道相關的要點：
電話：需要設定客服話術標準，一般需要在會話開始前先告知用戶來電是誰、有什么目的。在講述完通知內容后，還應告知用戶如何處理當前信息，如果想了解詳細內容該前往哪個渠道了解。
短信-來源平臺：由于通知類短信的發送號碼可能會由于服務商設置的問題導致有多個發送號碼發送給用戶，用戶無法根據號碼判斷發件人身份。故需要在短信最開始說明平臺來源，建立品牌認知，避免用戶錯認為是垃圾短信。如：「騰訊科技」***
短信-操作反饋：由于大部分短信為純文本短信，相關操作反饋需要通過鏈接或者路徑指引的方式提供。若短信包含詳情鏈接，鏈接最好能設置為保留根域名的短鏈，如：點擊了解詳情：cdc.qq.com/d8djei
郵件：與短信相似會有來源可信度問題，郵件內容需包含品牌元素，同時發件的郵箱地址后綴使用產品官方網站。另外需要注意，某些郵件軟件會設置不自動下載圖片，郵件重要內容不要使用圖片。
push 推送（移動端）：是消息在移動端的特有觸達渠道，由手機系統發送。發送的信息格式會受系統要求有所限制。最新的推送要求可參考相關設計規范文檔或接口規范。應用的 icon 與名稱系統會自動補充，撰寫文案時不用包含。
微信公眾號（訂閱號/服務號）：由于微信對訂閱號與服務號的消息推送方式會經常變化，需要確認最新的要求并撰寫文案。
在完成通知內容以及操作反饋的梳理后，對消息梳理表格進行更新，補充相關信息：
自此，消息項的盤點已經完成，后續可基于該表格與產品、研發溝通。當業務出現變更時，也需要對表格內容進行同步更新。
消息通知的觸達渠道中，電話、短信、push 推送的呈現由系統決定。但是若產品有獨立 App，往往需要消息中心去承載全量的消息列表。本章會介紹如何設計消息中心。
不同應用的消息中心處理方式受產品定位、應用框架等因素影響，設計差異化較大。但是可以通過按路徑分割去簡化設計：消息中心的入口、消息列表的組織方式、消息卡片的樣式、消息的設置等幾個部分。
1. 消息中心入口
主要有底部 tab、個人中心附近的圖標入口、個人中心的菜單項等三種入口形式：
消息中心的三種入口
2. 消息列表
從消息中心入口點擊后跳轉到消息列表。由于消息的即時性，需要按時間維度排列。但是如果產品的消息類型較多，可通過分組合并或者分 tab 的方式提升用戶觸達消息的效率。
分組合并消息列表
分 Tab 合并消息列表
對于通知類型復雜的系統，還可使用二級列表的形式對消息進一步分類展示，如微信及支付寶，由于其包含大量第三方服務，消息復雜，均設置了二級消息列表幫助用戶分類查找消息。
二級消息列表
消息列表中的卡片有兩種樣式可選，一般在一級消息列表使用小卡片樣式，讓用戶有更高的瀏覽效率。大卡片樣式則用于二級消息列表，或當前應用的消息數量較少時。
消息卡片應用示意
4. 消息中心設置
一般位于消息中心列表頁右上角，若可設置項較多，則提供設置入口在二級頁設置。一些常用的消息設置項如下：
全部已讀：對于消息數量較多，且未讀態會影響 badge 的展示時需要提供該設置項。點擊后設置列表消息項全部已讀。
發起對話：若系統包含通訊功能，一般會在消息類表頁提供發起對話的快捷入口。點擊后跳轉到通訊錄或好友列表。
設置通知提示方式：提供按消息類型設置某些通知項的接受渠道、接收時間段、各渠道之間的已讀聯動等，如微博；或者讓用戶選擇消息通知的精確度，是否包含具體信息，如微信可接收“您收到了一條信息”的模糊消息。
打開消息推送權限：一些應用有一些狀態更新或重要的提醒需要用戶在系統設置中打開當前應用的通知權限，會包含提示用戶打開通知的功能。這些提示需要在用戶進行了如“辦理事項”、“上傳狀態”等發起流程的操作后提示。不建議在用戶啟動 App 時就彈窗提示打開通知。
本文是對消息通知系統設計的初步介紹，希望能幫助到新手產品、交互、產品體驗設計師快速了解消息通知系統的內容盤點與消息中心的設計方法，制定及時、高效、完整的消息通知系統。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：騰訊設計
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
1.阻斷性原則
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：micu設計
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
網易新聞
Artand
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：WseSteven
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
很多受歡迎的產品中都有我們值得學習和借鑒的設計思考點，通過分析海外主流產品，帶大家掌握底部導航欄（Tab Bar）的基本知識，找到解決問題的方法并開拓創意思維。
在開始之前，請大家先思考下面兩個問題～
好像并不是。雖然淘寶、微信、微博、美團等大多數主流的產品都在使用 Tab Bar，但這并不意味著所有產品都需要它。
很多APP沒有Tab Bar，比如日歷、計算器、滴滴、Uber等。對于是否要在APP中使用Tab Bar，應該分不同的情況靈活考慮。
答案是為了易于使用，意味著通過 Tab Bar 這種簡單的設計可以輕松幫助用戶導航到頁面。
明白了上面的問題后，接下來就要考慮如何來設計 Tab Bar，能更好的滿足用戶的需求和體驗。
1. 顯示最重要的信息
導航欄應該只包含最有用的信息，不能添加過多無用的標簽使導航欄混亂。許多 App 在導航欄上添加搜索功能，因為這有助于用戶更快地導航和檢索內容。
在Spotify底部導航中，主頁選項用于播放或收聽所有內容，搜索選項用于搜索下一首歌曲和播客，音樂庫選項用于播放列表中喜歡和保存的歌曲，單獨的會員選項方便用戶輕松點擊并快速完成購買操作。
2. 擴展導航的功能
主流 App 更喜歡在底部導航欄中使用 4-5 個標簽，這樣能保持導航欄的整潔，還避免了標簽過多導致用戶難以精確點擊選項的情況。
Pinterest的導航欄上只有四個選項，這有助于用戶輕松點擊。消息選項會實時更新消息數量，對用戶來說這樣的提示很直觀。另外搜索功能包含在導航欄中，方便輕松地在主頁和搜索結果之間來回切換。
3. 容納多種標簽形式
多數 App 底部導航欄會使用「圖標+文字」的標簽形式，這樣能清楚地告知用戶點擊標簽之后的結果。
有時候我們也會看到有些產品的導航欄只有圖標沒有文字，但這種形式并不會影響我們的操作，因為當導航欄的標簽使用了用戶特別熟悉的形狀和內涵，完全可以省略文字。
宜家App的導航欄使用了大眾都很熟悉的圖標，所以即使不加文字，我們也能清楚地知道這3個圖標分別代表了主頁、分類、我的。
相對于宜家，Youtube的導航欄就顯得有點復雜，因為Youtube的圖標含義用戶可能并不是很熟悉，加上文字說明很有必要。
4. 文字標簽應該簡短
文字標簽應該簡短而清晰，準確的文字說明能對用戶使用正確導航起到關鍵作用。
TikTok導航所有的文字標簽都簡短，并且中間的添加圖標還隱藏掉了文字，以此來引吸引用戶的注意力。
5. 避免隱藏導航欄
Tab Bar 通常包含了最重要的導航信息，應該始終向用戶展示，避免在用戶滾動頁面的情況下被隱藏掉。
Pinterest導航欄的設計是個例。當滾動頁面時，底部的導航欄會隱藏，這么設計的原因可能是為了防止導航欄遮擋圖像，保證用戶看到更多的圖像內容。
6. 傳達位置
Tab Bar 幫助用戶輕松導航，但如果用戶不知道自己的位置，將會影響他們瀏覽和使用產品的體驗。
多鄰國App通過改變導航圖標的樣式來讓用戶清晰的知道自己所有的板塊。
Headspace在底部導航欄加上了線條裝飾，每次切換選項，線條都會跟著一起切換，確保告知用戶確切的位置。
7. 從反饋中學習并不斷改進
反饋是關鍵，如果想改善產品的導航欄設計，就要考慮并測試用戶最喜歡哪個導航選項，不使用哪個導航，需要四個還是五個選項等等。
Pinterest通過收集用戶的使用反饋情況來不斷改進導航欄的設計，幫助用戶更方便地使用產品，這些不斷打磨的改進真是產品成功的關鍵。
8. 在導航欄中顯示更新
Tab Bar 不僅僅起到導航的作用，很多時候還能通過狀態變化告知用戶更多的信息。
在Twitter主頁導航中，當有新內容推送時，主頁就會出現更新的狀態，提示用戶查看新內容。這樣的設計在Youtube、Pinterest等很多主流產品中都有使用。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：Clip設計夾
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
注冊和登錄是進入產品的首要操作，毫無疑問好的用戶體驗能為產品加分，同理好的注冊和登錄體驗會讓用戶對產品留下更好的印象。
簡單的注冊和登錄流程中也存在著很多交互細節，這里介紹 10 個平常經常用得到的設計細節，一起來看看～
交互設計的基本原則之一是去除雜亂，去除每一次不必要的操作，避免用戶長時間的等待或思考。
用戶進入注冊頁面注冊賬號時，會第一時間填寫郵箱，那么我們是不是可以考慮自動對焦郵箱選項，省去用戶再次點擊的麻煩。
我們在輸入注冊信息的時候，可能并沒有意識到錯誤，通常會在賬號全部輸入完畢之后才會出現錯誤提示，因此我們又要重新再輸入一遍冗長的賬號信息，過程很繁瑣。
對于填寫郵箱之類的操作，進行模糊驗證是有意義的，避免了用戶信息全部填寫完整后再驗證，而是在系統發現錯誤后盡快讓用戶知道。
盡可能讓創建的每個帶標簽的文本輸入都有可單擊的標簽，如密碼應該是可點擊的，并將焦點放在密碼字段上。
輸入密碼總是讓人頭疼的一件事，尤其是當密碼有大小寫、數字、符號等要求時，往往需要輸入很多次后才能成功登錄。
不應該讓用戶去猜測密碼有什么要求，相反應該在用戶開始輸入密碼時就給出明確的提示要求。
允許用戶查看輸入的密碼，這樣方便他們對密碼進行二次校驗和修改，同時這種方式比再次重新輸入密碼要簡單。
清晰的按鈕文案既能吸引用戶點擊，也可以引導完成他們想要完成的操作。沒有用戶喜歡模棱兩可的文案提示，尤其是在做選擇的時候。
每個產品的注冊頁面都會有這樣的服務條款，在情況允許的條件下，盡可能提供默認的選擇結果，避免用戶再次選擇和操作。
如果用戶不小心選擇了錯誤的選項，要保證用戶能從注冊和登錄中快速地切換。最常見的形式是在底部添加一個鏈接。
當用戶輸入密碼并顯示密碼錯誤時，需要具體說明密碼不符的原因，告訴用戶如何修改密碼。
如果用戶密碼輸入錯誤，應該保留賬號信息，不必再讓用戶重復輸入賬號，只需要輸入密碼即可。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：Clip設計夾
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
當互聯網不斷的深入到我們的生活中，我們對安全感的需求也延續到了互聯網使用中，特別體現于互聯網金融產品。由于其具有風險性、收益性、流動性等特點，用戶對于資產安全的掌控感更為關注，產品使用體驗欠佳也直接影響客戶安全感。
以下將基于自身工作總結和行業經驗，聚焦互聯網金融產品分享和總結如何向用戶營造安全感。
目錄：
一、需要什么樣的安全感？
二、如何傳達出安全感？
三、怎樣體現出安全感？
安全感是人類最底層的需求，但不同類用戶群體需要的安全感也各有千秋，我們參考第一財經商業數據中心×螞蟻財富的2019線上理財人群報告，將線上理財的人群分為四類：
分別是初入職場的95后、職場新興力量的90后、理財中堅力量的80后和經歷風雨的70后。其中近一年的新增移動互聯網基民中超五層為90后、95后，成為金融移動互聯網的中堅力量。
這類型的投資者由于具有碎片化處理事務的習慣和金融知識不足、理財經驗不豐富、資金的抗風險能力不高的特點，當市場普遍行情下跌時，更容易產生焦慮的情緒而導致“割韭菜”，進而可能會影響到卸載APP的行為。根據Mob研究院的數據顯示，在2021年3月天天基金日均卸載用戶規模為前兩個月的6倍，而當時對應的市場行情正為基金普遍大跌。
因此從安全感的需求上他們更側重高效的信息降維、足夠的理財產品的風險提示、合理的預期收益宣傳以及投后虧損及時的內容陪伴。
而根據騰訊理財通×國家金融與發展實驗室出品的2021年互聯網理財行為與安全研究報告顯示，理財知識更充足，理財經驗更豐富的80后、70后在安全感的維護上則更關注理財產品的信息披露風險、信息不透明風險、市場政策風險、個人信息泄露風險此類問題。
安全感是一種感性的心理感受，而人類的情感由本能、行為、反思三個層面共同決定的。
這三個層次作為人類大腦的運作的規律，映射到設計當中，同樣是可供遵循、值得探究的。
先于意識和思維，它是外觀要素和第一印象形成的基礎，著重于產品的外觀、觸感等?！懊烙^即實用原則”人們會潛意識里認為好看的東西也是好用的，所以在界面設計當中，主要設計對象是視覺設計。
而金融產品中，常用藍、綠等冷色調的色彩，給人以冷靜，穩定的感覺，表現金融產品的科技感和可靠性；常用紅、黃、橙等暖色調，代表著熱情、溫暖與責任。
是人類身體日常行為的運作，行為層的設計與產品使用過程中的愉悅感和效率有關。好的行為層設計對應產品功能傳達、易學性與易用性，以及正面的心情感受。在界面設計當中，主要設計對象是交互設計。（將在下文通過投資場景詳細分析）
超越了本能層和行為層，存在意識和更高級的感覺、情緒及知覺。對應的是產品的情感溫度，主要的設計對象是正向情感的結果反饋以及品牌信任。
良好的企業品牌形象和口碑很大程度上會給用戶帶來認知上的安全感。用戶在初次選擇購買金融產品時，往往強大的品牌背書起到了關鍵作用，即使是同一只基金，用戶也會選擇在自己信賴的平臺里購買。
我們可以通過在頁面設計中加入更多的品牌元素，如品牌主題色、LOGO、品牌IP形象、品牌slogan等，來潛移默化地讓用戶感受企業的價值：
另一種常見于一些平臺利用強大的背書以及所獲的成就，清晰地向用戶展示可以提供的保障權益，責任條款及資質介紹等來傳達企業對用戶負責的態度，提升用戶對產品乃至對企業的信任感：
我們將金融的生命周期分為三個階段，分別可以概括為：投資前（產品選擇）、投資中（產品交易）、投資后（產品管理），不同階段的關注點不同，而對于安全感需求各不相同：
結合文章一開始對人群的分析，由于投前的行為特點更多聚焦于產品的選擇，因此從理財小白的角度對于安全感的缺乏更集中于“買了會不會虧錢？”、“產品買對了嗎”、“看不懂規則”、“這個適合我嗎”等，尤其存在于一些新形式的理財組合產品和策略智能投產品中。
在這個階段的安全感維護，除了相關頁面的信息降維、必要的投教啟蒙以外，還需要考慮用戶疑問的快速解答、合理的預期收益宣傳等。另外投錢的啟蒙教育更可以考慮結合一些運營活動，讓小白用戶通過更有趣的方法了解產品，了解自己適合的產品。
而對于較有經驗的理財“老司機”而言，安全感的缺乏更集中于“過往表現怎么樣，如最大回測率等”、“市場行情、政策是否利好”、“基金經理的資歷”等，而更需要考慮信息的多維度展示、信息披露、行情資訊的展示、甚至是產品的對比等來表達產品的未來盈收能力可期。
當投資者已經選擇好信任的理財產品時，在產品交易的各個界面也需要關注交易流程中安全感的反饋。
其中包括正向反饋和負向反饋。正向反饋是指用戶跟產品發生正確的交互時，系統給予用戶的正確引導，可以幫助用戶打消顧慮，建立信心，讓用戶感受到一切都在順利地進行著，這對那些在設備操作方面缺乏信心的用戶來說尤為重要，用戶不會對自己的操作或對平臺產生質疑，如：專屬的密碼輸入鍵盤、正向反饋如金額輸入時的金額提示、特別提出易誤解的交易規則等
而反向反饋是指用戶在操作過程中出現或疑似出現誤操作時，系統向用戶展示提示或二次確認以促進錯誤的糾正或確保此操作無誤。它能確保在第一時間告知用戶出現了不正確操作，及時更改，使流程順利進行，尤其是對于一些理財小白而言，合理的容錯設計更促進有效投資，提高未來的盈利體驗。如撤銷操作二次確認、購買超出風險承受能力的產品、輸入錯誤金額時的反饋。
引起思考：
雖然天天基金的撤單確認展示了退回帳戶，但是此彈窗的取消按鈕引導性過強，首次操作僅通過銀行卡的列表的箭頭較難聯想到是確認撤單的下一步操作（還以為是可選擇退的帳戶）。
產品交易成功后，投資者的關注會更集中于自己的資產的變化，產品的未來走勢等，因此在安全感的提供上，需要向投資者傳達準確的交易狀態、資產狀態、資產的保護等，甚至可以在產品購買的完成頁設置快捷加入自選和漲跌提醒等
引起思考：
在支付寶的基金總金額中，存在交易進行中的提示文案為“買入待確認*元”，但不少小白會產生疑問，當前展示的基金總金額是否包含提示的待確認金額，此時是否可將文案改為“含買入待確認*元”（畢竟也有部分直銷app并不會將待確認金額包含進產品的總金額中）
另一方面的更需要考慮當基金產品存在虧損時，及時向投資者傳達情感陪伴和合理的投資交易，以促進投資者優化持倉或保持中長期持有，避免頻繁的短期交易而導致不良的盈利體驗。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
App界面設計對于設計師而言一直是盛久不衰的話題，尤其是如今越來越多的流量轉移到了移動平臺，使得更多的UI設計師涌入移動端領域，甚至出現了市場飽和的言論，對于從事移動端的UI設計師來講，充滿壓力的同時又面臨無限機遇，唯有不斷的學習才能滋生出源源不斷的設計靈感，站穩腳跟。
摹客想在這方面給各位設計師朋友做點什么，除了提供簡單好用的設計工具，我們也整理了非常多的優秀設計案例，希望可以對設計師朋友有借鑒意義。這將會是一個系列的專題，我們以月為單位，整理了國內外設計師的優秀APP界面設計案例，我們是搬運工，更是好設計的傳達者，希望你會喜歡。
接下來為大家分享精美的app UI設計案例：
--手機appUI設計--
更多精彩文章：
以前，設計師們都需要去跟開發溝通并手動標注所有文件，現在，有了像 Zeplin 和 Abstract 這樣實用的標注工具，設計師幾乎不需要花太多的時間在對接上。
但是，還是避免不了很多東西會在對接過程中出現問題。比如，這個按鈕是固定大小的還是彈性大??？是保持底部邊距固定還是在一個較大的對象內居中？讓我們來看下約束布局在對接過程中的使用方法。
約束布局是定義控制應用中內容的規則。這些規則通過使用統一的元素和間距，保持跨平臺、跨環境和跨屏幕大小的一致性。通常應用在 iOS 和 Android 中。
彩云注：這里想跟大家科普下相對布局和約束布局的區別。相對布局是通過相對定位的方式讓控件出現在布局任意位置，相對布局因為邏輯原因，層級較多；而約束布局能夠有效解決布局過多問題，讓頁面更加扁平化，布局之間相對位置也更好控制。約束布局也是繼相對布局后，谷歌官方針對相對布局問題給出的一個更優解決方案，意在將來替代掉相對布局。當然，這里不再過多闡述，感興趣的可以自行去了解下，可能偏開發方面會更多一些。
如果在 sketch 文件中已經設計布局好了所有元素，就可以開始了！
1. 基礎單位
8×8
首先從定義基本單位開始，每個度量值都是其倍數。我建議使用偶數 8 來調整大小和間距，因為這樣可以方便且一致地適配各種設備。
在 Sketch 中選擇首選項>畫布，將“通過 Shift+方向鍵調整移動對象中的 10px 改成 8px”，這樣會解決很多問題！
2. 間隔單位
間隔單位是常用間距的視覺表達。例如，一個“2 間隔單元”是 16 pt/dp，因為 2×8=16。這些符號應該在設計中使用，別名應該被標注成代碼，以便在和開發對接時使用相同的語言。
垂直和水平間隔
在項目很趕的時候，你可能沒有足夠的時間手動做到完美像素對齊。通過使用這些通用單位來標識，而不是標注工具自動生成的標注像素，它可以告訴開發實際間距。數字別名與“Shift +方向鍵”移動對象的次數相匹配。
響應式按鈕：iPhone8、三星 Galaxy S8、iPhoneSE
間隔大小永遠不會改變。如果是水平間隔，則垂直高度被鎖定，反之亦然。這意味著在不同的手機寬度上，組件的尺寸會發生變化，但用于創建它的邊距的間距將保持不變。
有時元素在間隔之間對齊。間隔之間對齊的主要方法是中心對齊和底部對齊。
垂直居、中水平居中和居中對齊
中心對齊是指你想要一個對象或一組對象向中間集中對齊。對象可以水平居中，垂直居中，或者向中間集中對齊。
底部對齊
底部對齊是指希望對象與其中一個對象的底部對齊。當有兩種不同的文本大小并且想要在基線處對齊時，底部對齊就是比較常見使用方法。
1. 點擊對象
48 x 48
在手機上，最小點擊對象尺寸為 48x48dp /pt。這尺寸來自于谷歌設計指南，物理尺寸約等于 12 英寸。(HIG 建議使用 44x44pt，所以我選擇更大的)。將元素放在一起時考慮點擊對象大小。你也可以使用點擊對象符號來表示元素的哪些部分是可點擊的。
讓我們通過一些組件示例切換來測試所有約束的使用：
組件示例：列表項、按鈕和復選框
2. 基本尺寸
組件的基本尺寸，它的最小高度和寬度，應該基于最小點擊對象的尺寸。視覺上小于點擊對象的組件仍應由相同的最小點擊對象大小觸發。這意味著，如果用戶在復選框之外觸摸了一點，也會承認他們點擊了復選框。
組件相對于最小點擊對象的視覺尺寸：精確、高于和低于。
3. 內邊距
使用間隔表示組件內的邊距。
長字符串的水平邊距
你可以通過設置水平邊距來限制元素的水平位置，比如文本框。當文本太長時，你需要指出文本是否應該調整大小、換行和/或截斷。換行到兩行比截斷一行更好！
動態類型的水平和垂直邊距
垂直填充最常用于動態適配。盡管組件在當前手機尺寸、當前語言和當前字體大小下看起來可能很好——但所有這些因素都是最壞情況下的變量。當類型增加時，組件將變得比它的基本大小更大，并且你希望確保它仍然有垂直填充。
4. 基線對齊
使用居中和基線標記來示意，如何讓那些沒有接觸到所有邊的間隔元素表現出來。這部分主要是方便給開發理解的。
垂直居中的列表項文本、底部對齊的價格和居中的復選框
現在你已經布局好了一個頁面，使用與在組件中相同的方式使用間隔、點擊目標和對齊符號。
插圖來源于 Meg
……瞧!這就是移動端的響應式布局!
提示：為你在界面布局中引用的組件創建單獨的 symbol 畫板。在組件中，將所有組件規范包含在一個文件夾中，該文件夾可以輕松打開和關閉。沒有什么比同時標記組件和界面布局更好了。
即使是一個精心制作的交接文件也不能取代你與開發之間良好的語言交流。這應該與開始、移交和書面文檔一起使用。你越讓開發了解你的設計，還原的結果就越接近實際發布的產品。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：彩云譯設計
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn