看完本篇文章，你會(huì)學(xué)到以下內(nèi)容：
1、什么是詳情頁
2、詳情頁設(shè)計(jì)原則
3、詳情頁的構(gòu)成
4、詳情頁設(shè)計(jì)要點(diǎn)拆解
一、什么是詳情頁？
詳情頁向用戶展示一個(gè)對(duì)象的完整信息，主要用于信息瀏覽，允許對(duì)該對(duì)象發(fā)起編輯等操作。如電商的訂單詳情，OA的審批詳情等等。
二、詳情頁設(shè)計(jì)原則？
1、直接了當(dāng)
信息盡量平鋪展示，如沒有必要不要做隱藏折疊。
2、層次分明
按照接近原則，對(duì)信息分層分組展示，降低單個(gè)頁面內(nèi)信息復(fù)雜度。
3、化繁為簡
減少復(fù)雜結(jié)構(gòu)的使用，盡量使用相似的結(jié)構(gòu)和模塊，降低結(jié)構(gòu)差異對(duì)用戶進(jìn)行干擾，讓用戶聚焦信息本身。
三、詳情頁構(gòu)成
詳情頁由標(biāo)題、標(biāo)簽頁、圖片、文字詳情、按鈕、可視化、列表、表格、篩選、數(shù)據(jù)統(tǒng)計(jì)、進(jìn)度軸、標(biāo)簽構(gòu)成
詳情頁的特點(diǎn)：1、內(nèi)容雜，什么元素/模塊都可能出現(xiàn)。2、布局多，布局沒有套路，核心是做好內(nèi)容分塊和視覺引導(dǎo)。3、差異大，頁面與頁面巨大差異
四、詳情頁設(shè)計(jì)要點(diǎn)拆解
1.容器
由內(nèi)容由少到多劃分為原位展開、氣泡卡片、彈窗、抽屜、頁面。能優(yōu)先滿足內(nèi)容收納的同時(shí)，容易盡可能輕量。
2.布局
根據(jù)內(nèi)容從簡單到復(fù)雜可分為基礎(chǔ)樣式、標(biāo)題分組、色塊/分割線/卡片分組、錨點(diǎn)定位/標(biāo)簽頁、自由布局。核心是做好內(nèi)容分區(qū)、視覺引導(dǎo)符合用戶操作習(xí)慣。
布局注意事項(xiàng)：把用戶最關(guān)心的內(nèi)容放在最顯眼的地方
3.交互操作
交互操作可分為編輯（原位/氣泡/彈窗/頁面），查看詳情（內(nèi)容不多的話可以少用頁面容器，減少套娃），業(yè)務(wù)操作（層級(jí)清晰，符合用戶操作習(xí)慣）。
一、導(dǎo)讀
1. 內(nèi)容結(jié)構(gòu)
小紅書的產(chǎn)品拆解包含七個(gè)部分，分別是導(dǎo)讀、產(chǎn)品畫像、內(nèi)容服務(wù)、社區(qū)服務(wù)、企業(yè)服務(wù)和、思考總結(jié)和寫在后面的話，內(nèi)容篇幅13582字，閱讀時(shí)間最少30分鐘。
2. 適讀人群
產(chǎn)品拆解是一種專業(yè)、深度的創(chuàng)作形式，所以比較適合于以下幾類用戶閱讀學(xué)習(xí)：
● C端社交平臺(tái)產(chǎn)品設(shè)計(jì)師：通過對(duì)小紅書完整的產(chǎn)品拆解，了解小紅書的產(chǎn)品設(shè)計(jì)體系和細(xì)節(jié)，有助于更好理解自己所在公司的產(chǎn)品設(shè)計(jì)，其次可以全方位提升產(chǎn)品分析、競(jìng)品分析能力。
● 希望提升產(chǎn)品思維的UI/UX設(shè)計(jì)師：通過從產(chǎn)品層到體驗(yàn)層的拆解，幫助你跳出設(shè)計(jì)執(zhí)行層理解一個(gè)功能設(shè)計(jì)背后的價(jià)值和意義，提升產(chǎn)品設(shè)計(jì)思維。
● 準(zhǔn)備跳槽到小紅書的互聯(lián)網(wǎng)從業(yè)者：如果你有準(zhǔn)備去小紅書求職，這份產(chǎn)品拆解報(bào)告可以幫助你提前了解小紅書的產(chǎn)品細(xì)節(jié)和體系。
● 內(nèi)容社區(qū)平臺(tái)從業(yè)者及創(chuàng)業(yè)者：收獲一份專業(yè)、完整、有價(jià)值的競(jìng)品分析參考。
3. 分析模型
產(chǎn)品拆解是以反向推導(dǎo)的形式去拆解一個(gè)產(chǎn)品的設(shè)計(jì)策略和思路，所以我們采用了以下分析模型和設(shè)計(jì)理論做支撐：
● AARRR模型（又稱為海盜模型）：由戴夫·麥克盧爾提出，包含用戶獲取、用戶激活、用戶留存、獲取收入、用戶推薦，分別對(duì)應(yīng)用戶生命周期中的5個(gè)重要環(huán)節(jié)，主要用于拆分和分析產(chǎn)品的功能價(jià)值。
● 尼爾森十大可用性原則：尼爾森十大可用性原則是界面設(shè)計(jì)中最基礎(chǔ)、最重要的設(shè)計(jì)原則，任何產(chǎn)品的設(shè)計(jì)，都可以通過這十個(gè)原則進(jìn)行指導(dǎo)設(shè)計(jì)。
● 設(shè)計(jì)基礎(chǔ)理論：包括常見的格式塔原理、費(fèi)茨定律、巴甫洛夫反應(yīng)、7±2效應(yīng)、席克定律等常見理論，用于診斷小紅書的交互及界面設(shè)計(jì)。
4. 閱讀建議
在閱讀本篇拆解的時(shí)候，建議一邊體驗(yàn)小紅書APP，一邊閱讀產(chǎn)品拆解報(bào)告，其次可預(yù)約我們的產(chǎn)品拆解解讀直播，收獲會(huì)更大。
二、產(chǎn)品畫像
在拆解小紅書APP之前，我們需要從以下8個(gè)維度去提煉小紅書的產(chǎn)品畫像，這樣才能理解小紅書的產(chǎn)品設(shè)計(jì)邏輯。
1. 行業(yè)發(fā)展
小紅書所在的行業(yè)屬于互聯(lián)網(wǎng)媒體內(nèi)容社區(qū)，是一個(gè)生活方式類內(nèi)容社區(qū)，同時(shí)小紅書結(jié)合了電商和社交媒體打造了新型的商業(yè)模式，是社交電商的開拓者和領(lǐng)先者。我們從艾瑞咨詢的《中國互聯(lián)網(wǎng)媒體內(nèi)容社區(qū)模式發(fā)展研究報(bào)告》和《2019中國社交電商行業(yè)研究》兩份報(bào)告中獲取到以下數(shù)據(jù)：
● 隨著內(nèi)容社區(qū)的變現(xiàn)模式多元化發(fā)展，互聯(lián)網(wǎng)媒體的商業(yè)變現(xiàn)空間越來越大。艾瑞咨詢預(yù)計(jì)在2022年，中國網(wǎng)絡(luò)廣告市場(chǎng)規(guī)模將突破1.2萬億元，網(wǎng)絡(luò)購物市場(chǎng)交易規(guī)模在2022年將會(huì)達(dá)到13.9萬億元。
● 傳統(tǒng)電商的紅利已盡，已經(jīng)進(jìn)入行業(yè)衰退期，用戶增速已持續(xù)放緩至20%甚至更低水平。而社交電商正在蓬勃發(fā)展，成為移動(dòng)端最主要的流量入口，使用頻次高、粘性強(qiáng)，流量價(jià)值極其豐富，行業(yè)交易規(guī)模在2021年就達(dá)到28646.3億元。
綜上所述，小紅書所在的行業(yè)具有廣闊的發(fā)展前景和潛力，而小紅書作為國內(nèi)最大的生活方式平臺(tái)和社交電商領(lǐng)先者，還有極大的空間去挖掘。其次隨著AIGC（AI Generated Content，是指利用人工智能技術(shù)來生成內(nèi)容）時(shí)代來臨，對(duì)過去以UGC為主的小紅書內(nèi)容創(chuàng)作平臺(tái)來說，是新的機(jī)遇也是挑戰(zhàn)。
2. 競(jìng)爭形勢(shì)
在《中國互聯(lián)網(wǎng)媒體內(nèi)容社區(qū)模式發(fā)展研究報(bào)告》一文中，艾瑞咨詢梳理了互聯(lián)網(wǎng)媒體內(nèi)容社區(qū)生態(tài)圖譜。從圖譜看出，小紅書作為生活方式類內(nèi)容社區(qū)，并無直接競(jìng)爭對(duì)手，但存在諸多潛在競(jìng)爭對(duì)手，包括文娛類的微博、豆瓣、抖音、B站，還有消費(fèi)類「什么值得買」，知識(shí)類內(nèi)容社區(qū)知乎，旅行類內(nèi)容社區(qū)馬蜂窩、飛豬等。
從易觀千帆數(shù)據(jù)觀察，小紅書相比其他間接競(jìng)爭對(duì)手，除了抖音以月活躍用戶人數(shù)7.4億超出小紅書3倍以外，小紅書月活人數(shù)超2億排名第二，領(lǐng)先排名第三1.7億的嗶哩嗶哩，其他社區(qū)月活人數(shù)距離小紅書有一定差距。
不過就在年初，社交巨無霸微信的微信公眾號(hào)已經(jīng)推出小紅書式的筆記傳播形式，降低創(chuàng)作門檻，吸引大眾用戶UGC，這對(duì)于小紅書來說，將會(huì)是一個(gè)潛在的挑戰(zhàn)。
3. 產(chǎn)品介紹
小紅書是一款集購物、分享、社交于一體的手機(jī)APP。它的主要功能是幫助用戶分享生活中的美好瞬間和購物心得，同時(shí)也為用戶提供了一種社交平臺(tái)。作為一個(gè)年輕人的生活方式平臺(tái)，小紅書以“Inspire Lives 分享和發(fā)現(xiàn)世界的精彩”為使命，用戶可以通過短視頻、圖文等形式記錄生活點(diǎn)滴，分享生活方式，并基于興趣形成互動(dòng)。
4. 商業(yè)模式
基于對(duì)小紅書的深入調(diào)研，再結(jié)合艾瑞咨詢《中國互聯(lián)網(wǎng)媒體內(nèi)容社區(qū)模式發(fā)展研究報(bào)告》，我們對(duì)小紅書的商業(yè)模式進(jìn)行了推導(dǎo)。
4.1 客戶細(xì)分
● C端：年輕用戶群體，以女性居多，生活在一二線城市，希望發(fā)現(xiàn)和購買優(yōu)質(zhì)商品，喜歡分享自己的購物心得和生活經(jīng)驗(yàn)，有較高的月支配消費(fèi)能力。
● B端：中高端品牌，品質(zhì)高、信譽(yù)好，期望通過小紅書獲取種子用戶、快速打造爆款以及和年輕用戶建立溝通的企業(yè)。
拓展閱讀
根據(jù)艾瑞咨詢的《中國互聯(lián)網(wǎng)媒體內(nèi)容社區(qū)模式發(fā)展研究報(bào)告》，挖掘到內(nèi)容社區(qū)已經(jīng)步入成熟階段，由B、C兩端朝著營銷線、商品線、平臺(tái)線和內(nèi)容線衍生出多元商業(yè)模式。這個(gè)信息有助于接下來理解小紅書的產(chǎn)品體系。
4.2 價(jià)值主張
標(biāo)記我的生活
4.3 渠道通路
作為中國最大的生活方式分享社區(qū)，小紅書用戶基數(shù)大，用戶忠誠度高，主要依靠用戶口碑分享，以及常規(guī)的廣告、搜索引擎等渠道進(jìn)行推廣和維護(hù)品牌形象。
4.4 客戶關(guān)系
面對(duì)社區(qū)博主和行業(yè)KOL，通過創(chuàng)作中心、蒲公英等平臺(tái)為博主鏈接優(yōu)質(zhì)廣告資源；面對(duì)企業(yè)客戶，通過商家課堂等方式指導(dǎo)開店培育。
4.5 收入來源
根據(jù)《2021年小紅書內(nèi)容營銷數(shù)據(jù)洞察白皮書》報(bào)告顯示，2021年小紅書的收入主要由廣告和電商兩部分組成，二者的份額占比分別為80%和20%。
4.6 核心資源
小紅書是中國最大的生活方式分享社區(qū)，用戶基數(shù)大，忠誠度高，2021年已經(jīng)成功登陸港股市場(chǎng)，有充足的資金優(yōu)勢(shì)。
4.7 關(guān)鍵業(yè)務(wù)
面向C端，小紅書主要提供筆記發(fā)布、購物、直播等核心功能；面向B端，提供蒲公英、薯?xiàng)l、聚光平臺(tái)等業(yè)務(wù)。
4.8 重要合作伙伴
● 各行業(yè)頭部KOL及MCN機(jī)構(gòu)，為平臺(tái)提供高質(zhì)內(nèi)容，官方同時(shí)提供流量傾斜和扶持；
● 企業(yè)客戶，負(fù)責(zé)小紅書電商自營平臺(tái)的生產(chǎn)鏈供給以及其他內(nèi)容合作。
4.9 成本結(jié)構(gòu)
作為一個(gè)互聯(lián)網(wǎng)科技公司，小紅書的成本結(jié)構(gòu)主要來自產(chǎn)品的研發(fā)投入和人力成本。
5. 用戶畫像
結(jié)合易觀千帆小紅書APP數(shù)據(jù)，我們對(duì)小紅書終端使用用戶人群提煉了以下用戶特征：
● 從用戶性別看，以女性居多，占比72.25%，男性占比27.75%；
● 從年齡分布看，24歲以下用戶人群最多，占比42.48%，其次為31-35歲，占比29.53%，24-30歲用戶人群占比15.83%；
● 從用戶消費(fèi)能力看，中等消費(fèi)者占比36.75%，中高消費(fèi)者占比36.21%，合計(jì)超過70%，購買能力很強(qiáng)（官方數(shù)據(jù)為月支配可消費(fèi)費(fèi)用超過4000元）；
● 從地域分布看，新一線城市用戶最多，占比22.17%，其次為三線城市，占比20.93%，二線城市占比19.28%，其中廣州市最多，其次為北京和上海。
6. 信息結(jié)構(gòu)
通過對(duì)小紅書APP的信息結(jié)構(gòu)梳理，可以看出小紅書的功能結(jié)構(gòu)比較簡單，菜單欄包含了首頁、視頻、發(fā)布、消息和用戶中心五個(gè)欄目。
● 首頁：以千人千面的信息流推薦為主，其中推薦、購物和直播權(quán)重最高，也是小紅書的核心功能。
● 視頻：提供沉浸式的短視頻筆記體驗(yàn)，用戶可以不斷上拉下滑觀看視頻筆記；
● 發(fā)布：提供拍照、相冊(cè)、模版和直播發(fā)布功能，是用戶發(fā)布筆記的入口；
● 消息：提供系統(tǒng)公告以及消息通知，用戶聊天的窗口；
● 用戶中心：用戶的個(gè)人主頁，包含筆記、收藏和個(gè)人資料等功能。
7. 產(chǎn)品迭代記錄
根據(jù)七麥數(shù)據(jù)資料，小紅書的APP首個(gè)版本發(fā)布于2013年12月05日，截止到2023年4月3日，APP版本已經(jīng)更新至V7.82版本，近一年版本更新次數(shù)為98次，迭代頻率非常高。從十年前的「全世界的好東西」到今天的「標(biāo)記我的生活」，小紅書迎來自己的十周歲生日。
以下為小紅書版本重要迭代記錄：
● 2014年8月，發(fā)布V2.0版本，上線「商城」功能，支持用戶在小紅書下單購買；
● 2015年11月，發(fā)布V4.0版本，產(chǎn)品全新升級(jí)，首頁根據(jù)用戶興趣智能化推薦；
● 2017年9月，發(fā)布V5.1版本，產(chǎn)品全新升級(jí)，加入閃拍、小視頻等功能；
● 2018年5月，發(fā)布V5.16.1版本，加入「附近」功能，可發(fā)現(xiàn)身邊有意思的筆記和用戶；
● 2019年5月，發(fā)布V6.0版本，產(chǎn)品全新升級(jí)；
● 2021年7月，發(fā)布V7.0版本，產(chǎn)品全新升級(jí)。
8. 產(chǎn)品生命周期
根據(jù)易觀千帆數(shù)據(jù)顯示，截止到2023年1月，小紅書APP月活躍用戶人數(shù)超過2.1億，注冊(cè)用戶在2019年就超過3億（來自官網(wǎng)），公司在2021年成功登陸港股市場(chǎng)。從以上資料數(shù)據(jù)看出，我們可以推導(dǎo)出小紅書APP已經(jīng)進(jìn)入產(chǎn)品生命周期的成熟期，當(dāng)下以及未來將會(huì)聚焦于商業(yè)變現(xiàn)和用戶留存。
9. 小結(jié)
通過以上數(shù)據(jù)信息，我們可以看出，作為一個(gè)誕生于2013年的移動(dòng)互聯(lián)網(wǎng)元老，小紅書從最初旨在打造一個(gè)海外購物社交平臺(tái)到如今成為億萬年輕人的生活方式社交平臺(tái)，他們的用戶非常年輕，以90后居多，月活躍用戶超過2億，它已經(jīng)成為國內(nèi)最大的生活方式分享平臺(tái)和社交電商平臺(tái)。
三、內(nèi)容服務(wù)
「內(nèi)容服務(wù)」是根據(jù)AARRR模型拆分，這個(gè)版塊的功能主要是實(shí)現(xiàn)用戶留存，包含首頁、視頻、筆記發(fā)布、消息、創(chuàng)作中心和專業(yè)號(hào)等功能。
1. 首頁
作為中國最大的生活方式分享社區(qū)，小紅書以UGC用戶生產(chǎn)內(nèi)容模式為主，內(nèi)容包含圖文、短視頻、語音等多種傳播形式，覆蓋了美妝、潮流、美食、科技、旅行、汽車、職場(chǎng)等眾多行業(yè)。
1.1 發(fā)現(xiàn)
「發(fā)現(xiàn)」作為小紅書的默認(rèn)首頁，平臺(tái)根據(jù)用戶的興趣、標(biāo)簽、瀏覽偏好內(nèi)容進(jìn)行個(gè)性化推薦（從產(chǎn)品迭代記錄查詢到小紅書早在2015年就開啟了千人千面的個(gè)性化推薦）。從TAB欄可以看出小紅書的內(nèi)容覆蓋了美食、科技、旅行、汽車、職場(chǎng)等眾多行業(yè)，同時(shí)支持用戶根據(jù)自己興趣偏好自定義編輯。
1.1.1 內(nèi)容推薦邏輯
在研究小紅書「發(fā)現(xiàn)-推薦」推薦邏輯時(shí)候，筆者有點(diǎn)捉摸不透。因?yàn)槊恳淮嗡⑿峦扑]的內(nèi)容排序其實(shí)并不是單純的以點(diǎn)贊、發(fā)布時(shí)間、收藏?cái)?shù)為準(zhǔn)，更像是隨機(jī)展示，所以特意查詢了關(guān)于小紅書內(nèi)容推薦邏輯的文章。
筆者找到了人人都是產(chǎn)品經(jīng)理專欄作家江流的《小紅書的內(nèi)容營銷邏輯》這篇文章，作者經(jīng)過大量的測(cè)試，推導(dǎo)了小紅書的內(nèi)容推薦營銷邏輯：
● 「發(fā)現(xiàn)-推薦」頁占據(jù)了小紅書80%的流量；
● 小紅書內(nèi)容推薦的邏輯主要是三個(gè)：高打開率，高互動(dòng)率，高搜索打開率。
體驗(yàn)陷阱
當(dāng)我發(fā)現(xiàn)平臺(tái)給我推薦我討厭的內(nèi)容時(shí)候，我沒找到屏蔽按鈕，最后嘗試長按圖片才彈出屏蔽彈窗。這個(gè)設(shè)計(jì)對(duì)新手不友好，違反尼爾森十大原則的人性化幫助原則，沒有提供清晰的提示，增加了學(xué)習(xí)成本。
1.2 關(guān)注
「關(guān)注」是為用戶提供自己關(guān)注好友的動(dòng)態(tài)展示，內(nèi)容設(shè)計(jì)比較簡單。不過我對(duì)這個(gè)欄目的推薦機(jī)制感到不解，當(dāng)我刷新頁面的時(shí)候，內(nèi)容并不是根據(jù)時(shí)間先后順序展示，而是沒有規(guī)律的隨機(jī)展示。
1.3 本地
「本地」是根據(jù)用戶所在位置讀取附近用戶的筆記，這個(gè)功能上線于2018年V5.16.1版本，它的價(jià)值是幫助用戶發(fā)現(xiàn)身邊有意思的筆記和用戶，從而建立關(guān)系鏈接，提升用戶留存率。
設(shè)計(jì)思考
作為一個(gè)生活方式平臺(tái)，「本地」的內(nèi)容太單薄，如果能把內(nèi)容分類，比如按景區(qū)、美食、出行等來設(shè)計(jì)，可以極大提升小紅書在本地生活場(chǎng)景中的打開頻次。來小紅書，不僅可以標(biāo)記你的生活方式，還可以發(fā)現(xiàn)身邊更多有趣的生活方式。
1.4 搜索
「搜索」是小紅書流量分發(fā)的重要入口（占20%），不僅為用戶提供實(shí)時(shí)的社區(qū)熱門話題，更是小紅書的商業(yè)服務(wù)中的重要場(chǎng)景（提供搜索信息流、專區(qū)、火焰話題和搜索菜單等推廣方式）。
1.4.1 引導(dǎo)頁
「引導(dǎo)頁」由歷史記錄、猜你想搜和搜索發(fā)現(xiàn)組成，這個(gè)頁面主要承擔(dān)流量分發(fā)以及展示社區(qū)熱門話題，設(shè)計(jì)得比較簡單。
迭代建議
可參考QQ音樂的搜索引導(dǎo)頁，根據(jù)話題內(nèi)容設(shè)計(jì)排行榜，把引導(dǎo)頁做得更豐富，提升用戶使用時(shí)長。
1.4.2 結(jié)果頁
「結(jié)果頁」提供四個(gè)維度的內(nèi)容展示，分別是全部（包含最新、最熱）、用戶、商品和篩選（筆記類型，視頻和圖文）。其次根據(jù)搜索關(guān)鍵詞加入二級(jí)分類，比如搜索UI設(shè)計(jì)，二級(jí)分類有APP界面、高級(jí)感、作品集和素材相關(guān)聯(lián)標(biāo)簽。
設(shè)計(jì)思考
在深入體驗(yàn)搜索功能以后，我對(duì)平臺(tái)對(duì)搜索關(guān)鍵詞的算法機(jī)制不太理解。比如排名第一的并不是點(diǎn)贊最高的，也不是發(fā)布時(shí)間最早的，甚至?xí)霈F(xiàn)低點(diǎn)贊、發(fā)布時(shí)間很早的筆記。對(duì)此，深表疑惑。
2. 視頻
「視頻」是一級(jí)欄目，位于菜單欄第二個(gè)位置，進(jìn)入后向用戶提供沉浸式的閱讀體驗(yàn)，可以不斷上滑刷新視頻。短視頻是當(dāng)下最流行的傳播方式，對(duì)提升用戶使用產(chǎn)品時(shí)長有非常大的幫助。
2.1 詳情頁
底部展示作者信息，可一鍵關(guān)注，提供喜歡、收藏、分享和評(píng)論功能。其次當(dāng)博主關(guān)聯(lián)粉絲群，還支持用戶快速入群，幫助博主引流。
3. 筆記發(fā)布
「筆記發(fā)布」作為小紅書社區(qū)最重要、最高頻的功能，向用戶提供了圖文和視頻兩種發(fā)布類型。為了降低用戶學(xué)習(xí)成本，提升產(chǎn)品的核心增長指標(biāo)，小紅書提供了非常豐富、精美的設(shè)計(jì)模版，用戶一鍵使用，更換素材即可發(fā)布漂亮、精致、酷炫的筆記。
3.1 拍照
「拍照」是小紅書最基礎(chǔ)的筆記形式，主要通過拍照搭配音樂、文字的形式傳播，門檻低、操作簡單，是社區(qū)的主要內(nèi)容。
3.1.1 發(fā)布流程
3.1.1.1 拍照
● 需要用戶拍照，不支持讀取手機(jī)相片（如果想要加入本地圖片，需切換到「相冊(cè)」）。
● 頭部提供比例切換（3:4和1:1）、閃光燈、翻轉(zhuǎn)、濾鏡（提供日常、春夏、秋日等類型）、美顏（支持磨皮、臉型、眼睛、鼻子等）。
● 底部提供默認(rèn)、黑白相機(jī)、摩登、小宇宙和灰色拍立得五種模式，滿足各種特效拍照需求。
3.1.1.2 裝飾
● 頭部提供加入音樂功能，音樂庫包含歐美、運(yùn)動(dòng)、日韓等各種主流音樂類型。
● 底部提供圖文模版、視頻模版、商品（加入種草場(chǎng)景）、文字、帖子、濾鏡和調(diào)節(jié)功能，用戶可根據(jù)自己偏好加入裝飾元素。
3.1.1.3 發(fā)布
● 圖片加工裝飾好以后，用戶需要輸入筆記的標(biāo)題、介紹。
● 用戶可以加入標(biāo)簽（這是小紅書平臺(tái)內(nèi)容檢索的重要元素，一般用戶會(huì)加入多個(gè)標(biāo)簽）、商品和互動(dòng)組件（包含PK組件和投票組件兩種類型，主要用于提升用戶活躍度）。
● 用戶可加入發(fā)布地點(diǎn)，在高級(jí)選項(xiàng)可選擇關(guān)聯(lián)直播預(yù)告和群聊。
● 一切準(zhǔn)備就緒后，用戶可選擇保存草稿和立即發(fā)布。
3.1.2 筆記詳情頁
● 筆記詳情頁的權(quán)重非常高，不過頁面內(nèi)容也比較簡單。頭部展示用戶信息，可一鍵關(guān)注，右上角可點(diǎn)擊分享筆記。
● 筆記內(nèi)容由圖片（視頻）+標(biāo)題+文字內(nèi)容+標(biāo)簽構(gòu)成，其他用戶可對(duì)筆記進(jìn)行評(píng)論、點(diǎn)贊和收藏。
迭代建議
小紅書的筆記分享形式太過簡單，可參考QQ音樂的分享功能，設(shè)計(jì)豐富、精致的個(gè)性化模版，比如音樂卡片、視頻卡片等，刺激用戶進(jìn)行分享，幫助平臺(tái)拉新引流。
3.2 拍視頻
「視頻」的發(fā)布流程和「拍照」相似，其次小紅書也提供了基礎(chǔ)的視頻剪輯功能，幫助用戶制作更優(yōu)質(zhì)的視頻，以及避免用戶流失到其他視頻剪輯軟件（微信視頻號(hào)就不支持視頻剪輯，這導(dǎo)致用戶會(huì)使用剪映這些第三方軟件）。
3.3 相冊(cè)
「相冊(cè)」和「拍照」的區(qū)別就是為用戶提供從本地上傳圖片，兩者的功能和流程一樣。
迭代建議
建議把「相冊(cè)」和「拍照」兩個(gè)功能合并，減少操作路勁，降低用戶操作成本。
3.4 模版
「模版」分為視頻和圖文，用戶可選擇好自己喜歡的模版進(jìn)行直接編輯發(fā)布。
4. 記錄日常
「記錄日常」的入口在首頁左上角，主要為用戶提供語音、打卡、日簽等形式的動(dòng)態(tài)發(fā)布。這個(gè)版塊的功能價(jià)值在拆解完以后，筆者認(rèn)為更多是滿足Z時(shí)代年輕用戶群體的興趣偏好，比如為情侶量身定制的咻咻，還有語音筆記等。其次這個(gè)版塊的筆記發(fā)布形式行動(dòng)成本比較低，更能吸引用戶參與發(fā)帖，是激活新用戶以及長尾用戶的絕佳方式。
4.1 咻咻
「咻咻」是一個(gè)專門為年輕情侶用戶量身定制的功能，通過綁定TA的小紅書號(hào)，情侶之間就能及時(shí)分享有趣的筆記霸屏對(duì)方的屏幕。這個(gè)功能看上去設(shè)計(jì)得很有趣，和QQ音樂類產(chǎn)品的「一起聽」相似，增強(qiáng)了即時(shí)的社交聊天元素，增加用戶時(shí)間和頻次。
體驗(yàn)陷阱
這個(gè)功能看上去很時(shí)髦，但是在體驗(yàn)下來以后發(fā)現(xiàn)很雞肋。當(dāng)我給另一個(gè)小紅書賬號(hào)發(fā)送咻咻的時(shí)候，系統(tǒng)沒有任何提示，消息中心也沒有。最后只能前往「咻咻」找到右上角的那個(gè)TA，我才發(fā)現(xiàn)原來消息推送到這里了。這樣的提醒設(shè)計(jì)，太失敗了。
4.2 語音
「語音」是向用戶提供語音筆記的功能，用戶可以錄制一段自己的想說的話，選擇封面以后，輸入心情記錄，就可以發(fā)布。這個(gè)功能對(duì)于Z時(shí)代的用戶群體來說非常受歡迎，極大提升用戶使用時(shí)間，筆者體驗(yàn)了上百條語音筆記，發(fā)現(xiàn)用戶主要通過語音筆記哼唱歌曲，是一種全新的聽覺體驗(yàn)。
迭代建議
在「語音」詳情頁，我嘗試上滑瀏覽下一條，但最后發(fā)現(xiàn)需要左右滑動(dòng)才能切換，這個(gè)設(shè)計(jì)和用戶習(xí)慣不一致，建議改進(jìn)。其次在查看用戶「表態(tài)」內(nèi)容時(shí)，語音就暫停了，影響聽覺體驗(yàn)。
4.3 日簽
「日簽」就是以發(fā)布筆記的形式進(jìn)行簽到，用戶可以選擇心情，上傳背景圖片（系統(tǒng)會(huì)自動(dòng)生成精美的圖片），然后輸入心情就可以發(fā)布。小紅書還為用戶提供「漂流瓶」功能，用戶可以選擇筆記塞入漂流瓶后，接收到漂流瓶的用戶可以給與回應(yīng)。
4.4 打卡
「打卡」和「日簽」相似，主要提升用戶使用產(chǎn)品的頻次和時(shí)間，小紅書為用戶提供各種主題的打卡，比如護(hù)膚打卡、練字打卡、考研打卡等，用戶選擇對(duì)應(yīng)的主題，上傳圖片以后，就可以發(fā)布。
4.5 文字
「文字」的功能非常簡單，用戶只需輸入文字，然后選擇背景風(fēng)格，就可以生成文字筆記。
4.6 拍攝
「拍攝」的功能也非常簡單，用戶拍攝一段視頻，就可以生成筆記，和一級(jí)菜單的「視頻筆記」不同，在這個(gè)欄目支持上傳本地圖片，體驗(yàn)更佳。
5. 消息
「消息」主要向用戶提供私信、群聊功能，其次可實(shí)時(shí)查詢筆記的點(diǎn)贊、收藏、關(guān)注動(dòng)態(tài)以及官方通知公告。
5.1 群聊
小紅書支持博主建立自己的粉絲群，功能比較基礎(chǔ)，主要幫助用戶沉淀自己的粉絲，提升用戶留存率。
6. 創(chuàng)作中心
作為一個(gè)以UGC用戶生產(chǎn)內(nèi)容的平臺(tái)，創(chuàng)作中心主要為創(chuàng)作者提供創(chuàng)作指導(dǎo)，這個(gè)版塊包含數(shù)據(jù)中心、創(chuàng)作服務(wù)、創(chuàng)作學(xué)院和筆記靈感四個(gè)部分。
6.1 數(shù)據(jù)中心
「數(shù)據(jù)中心」為創(chuàng)作者提供賬號(hào)概覽、筆記分析和粉絲數(shù)據(jù)三個(gè)維度的數(shù)據(jù)統(tǒng)計(jì)分析。創(chuàng)作者可以查看近30日的詳細(xì)數(shù)據(jù)分析，比如觀看人數(shù)、觀看總時(shí)長、觀眾來源、單篇筆記詳細(xì)數(shù)據(jù)以及粉絲畫像等內(nèi)容。這些數(shù)據(jù)可以幫助創(chuàng)作者及時(shí)調(diào)整運(yùn)營策略，創(chuàng)作更受用戶喜歡和關(guān)注的內(nèi)容。
6.2 創(chuàng)作服務(wù)
「創(chuàng)作服務(wù)」是為創(chuàng)作者提供更豐富的平臺(tái)服務(wù)和推廣，包含創(chuàng)作權(quán)益、作者能力和內(nèi)容變現(xiàn)三塊內(nèi)容。平臺(tái)提供筆記周報(bào)、筆記置頂、創(chuàng)建合輯、薯?xiàng)l推廣、內(nèi)容合作等功能，為創(chuàng)作者提供創(chuàng)作工具以及內(nèi)容變現(xiàn)等服務(wù)。
6.3 創(chuàng)作學(xué)院
「創(chuàng)作學(xué)院」為創(chuàng)作者提供了小紅書內(nèi)容創(chuàng)作和內(nèi)容運(yùn)營的各種主題課程，比如選題取材、粉絲運(yùn)營等內(nèi)容，這些課程都是免費(fèi)的，創(chuàng)作者只要投入時(shí)間精力，都能有所回報(bào)。
6.4 筆記靈感
「筆記靈感」為創(chuàng)作者提供了小紅書熱門筆記的選題參考，比如時(shí)尚、戶外、春日等主題，通過這些爆款筆記，能給創(chuàng)作者提供更清晰、精準(zhǔn)的創(chuàng)作靈感，從而為社區(qū)輸出高質(zhì)量內(nèi)容筆記。
7. 專業(yè)號(hào)
小紅書的專業(yè)號(hào)是面向更專業(yè)的知識(shí)創(chuàng)作者，為他們提供更專業(yè)的內(nèi)容、服務(wù)和功能，幫助他們獲得更多的曝光度、關(guān)注度，以及通過豐富的數(shù)據(jù)分析提供運(yùn)營支持。
7.1 數(shù)據(jù)中心
相比「創(chuàng)作中心」，專業(yè)號(hào)的「數(shù)據(jù)中心」提供了更專業(yè)完善的數(shù)據(jù)分析，比如數(shù)據(jù)維度，可按根據(jù)交易、引導(dǎo)和互動(dòng)去查看，還有筆記觀眾分析，提供了更詳細(xì)的用戶特征，包含年齡分布、城市、用戶興趣等，以及個(gè)人主頁和店鋪的數(shù)據(jù)統(tǒng)計(jì)分析。
7.2 互動(dòng)工具
「互動(dòng)工具」包含店鋪管理（小紅書支持用戶開通店鋪銷售商品，可以理解為淘寶用戶的淘寶店）、直播互動(dòng)、抽獎(jiǎng)工具和主頁裝修等功能，主要為創(chuàng)作者提供個(gè)人店鋪裝修和直播兩個(gè)場(chǎng)景的互動(dòng)營銷。從功能體驗(yàn)看，這些工具設(shè)計(jì)得還比較單薄，還有很大優(yōu)化空間。
7.3 筆記工具
「筆記工具」包含發(fā)布商品筆記、商品筆記創(chuàng)作、商品筆記靈感和商品筆記熱榜四個(gè)功能。所謂商品筆記就是已經(jīng)開通店鋪的用戶可以直接在筆記加入自己的商品，從而實(shí)現(xiàn)引流轉(zhuǎn)化。這個(gè)版塊主要為用戶提供商品筆記的創(chuàng)作數(shù)據(jù)分析和社區(qū)熱門話題參考，幫助用戶創(chuàng)作出優(yōu)秀的種草筆記。
7.4 推廣工具
「推廣工具」包含薯?xiàng)l推廣、內(nèi)容合作和直播選品。
● 薯?xiàng)l廣告主要為用戶提供商品筆記的付費(fèi)推廣（花錢購買筆記流量券，讓更多用戶閱讀）；
● 內(nèi)容合作是小紅書面向?qū)I(yè)用戶打造的蒲公英平臺(tái)，通過招募優(yōu)質(zhì)博主，給與內(nèi)容變現(xiàn)指導(dǎo)和助推，幫助用戶在小紅書實(shí)現(xiàn)可觀的收益；
● 直播選品是為用戶提供直播帶貨功能，用戶可以加入適合的商品在直播間進(jìn)行銷售，最后獲取返傭。
7.5 熱門課程
「熱門課程」提供了小紅書賬號(hào)定位、筆記創(chuàng)作、商鋪運(yùn)營等內(nèi)容的教程，幫助用戶快速熟悉小紅書的平臺(tái)內(nèi)容推薦極致以及用戶習(xí)慣偏好等。
8. 小結(jié)
從內(nèi)容服務(wù)版塊的設(shè)計(jì)拆解，我們可以看出：
● 小紅書作為一個(gè)生活方式分享社區(qū)平臺(tái)，所覆蓋的內(nèi)容已經(jīng)包含了汽車、職場(chǎng)、影視、文化、科技、體育、母嬰等行業(yè)。這說明小紅書的用戶群體逐漸多元化發(fā)展，這點(diǎn)從用戶畫像的數(shù)據(jù)也可以看出，小紅書的男性用戶已經(jīng)快逼近30%，未來小紅書的用戶規(guī)模還有很大空間。
● 小紅書的筆記形式已經(jīng)越來越豐富，除了最傳統(tǒng)的圖文，未來短視頻或許是社區(qū)更流行的內(nèi)容形式（目前「視頻」欄目已經(jīng)調(diào)整為菜單欄第二位，權(quán)重非常高）。其次也為年輕用戶提供了時(shí)髦、流行、制作成本更低的咻咻、語音筆記發(fā)布功能，極大提升了用戶參與度。
● 在產(chǎn)品設(shè)計(jì)方面，個(gè)人認(rèn)為小紅書還有很多優(yōu)化的空間，目前整個(gè)APP的產(chǎn)品內(nèi)容不夠豐富，幾乎沒有創(chuàng)新點(diǎn)。
四、社區(qū)服務(wù)
「社區(qū)服務(wù)」是根據(jù)AARRR模型拆分，這個(gè)版塊的功能主要是實(shí)現(xiàn)商業(yè)變現(xiàn)，包含首購物、直播和小紅卡會(huì)員。
1. 購物
作為社交電商的先驅(qū)和領(lǐng)軍者之一，「購物」是小紅書在C端變現(xiàn)的最重要方式。雖然被「視頻」頂替了菜單欄的位置，但在「購物」頻道，可以看到小紅書的電商玩法，真是獨(dú)特又有趣。
1.1 潮流買手店
「潮流買手店」是為用戶提供當(dāng)下最流行的潮流服飾銷售，在這個(gè)頻道可以看到眾多的國內(nèi)外知名潮牌最新的產(chǎn)品。頁面內(nèi)容設(shè)計(jì)得比較簡單，為用戶提供了潮流趨勢(shì)、新品發(fā)售和品牌專區(qū)的內(nèi)容，用戶可直接下單。
1.2 新趨勢(shì)
「新趨勢(shì)」是向用戶種草「正在流行的東西」，它的內(nèi)容結(jié)構(gòu)是平臺(tái)根據(jù)不同的主題結(jié)合社區(qū)筆記和商品來生成，比如海邊度假穿搭，平臺(tái)會(huì)把社區(qū)優(yōu)質(zhì)的筆記收錄，然后再關(guān)聯(lián)相關(guān)的商品，通過特定的場(chǎng)景和主題向用戶種草。相比傳統(tǒng)電商，這正是社交電商的魅力。
1.3 福利社
「福利社」小紅書官方直營的高端電商品牌，上線于2014年12月，旨在為用戶提供全世界的好東西，目前已經(jīng)有超過20000+美妝商品。這個(gè)頻道主要包含新品日歷、先鋒品牌、熱門品牌和熱門分類四塊內(nèi)容，其次它的視覺風(fēng)格設(shè)計(jì)得非常精致，讓人有強(qiáng)烈的購買欲望。
1.4 小綠洲
「小綠洲」的定位是一站式購買戶外好物，旨在打造一個(gè)匯聚泛戶外生活方式穿搭、裝備用品的買手平臺(tái)。從頻道內(nèi)容看，包含露營、都市運(yùn)動(dòng)、滑板和滑雪四個(gè)大類，在每個(gè)類目可查看相應(yīng)類目的商品分類、促銷商品、品牌精選等內(nèi)容。
1.5 寶藏好店
「寶藏好店」是向用戶推薦小紅書平臺(tái)的寶藏店鋪，內(nèi)容包含每日精選、生活玩家、美護(hù)大賞等欄目。
1.6 獨(dú)特設(shè)計(jì)
「獨(dú)特設(shè)計(jì)」這個(gè)頻道，是由小紅書官方以及業(yè)內(nèi)優(yōu)秀設(shè)計(jì)師、社區(qū)優(yōu)質(zhì)作者和時(shí)尚行業(yè)專家共同評(píng)審出來的獨(dú)特設(shè)計(jì)商品。用戶人群定位高端，滿足那些想要高品質(zhì)、高審美的用戶群體的需求——在小紅書，找到全世界的好東西。
2. 直播
直播是當(dāng)下最流行、最重要的運(yùn)營手段。小紅書的直播版塊，設(shè)計(jì)了眾多豐富的互動(dòng)、營銷工具，極大提升播主的運(yùn)營效率。
2.1 發(fā)布直播
播主在點(diǎn)擊「發(fā)布」后，在底部切換到「直播」即可開啟。
● 在頭部，用戶需要選擇直播方式，目前小紅書提供視頻、語音、手游和電腦（通過電腦直播）四種直播方式，然后填入基礎(chǔ)的直播信息比如直播主題、介紹，和上傳封面等。
● 在底部，用戶可以選擇美化、翻轉(zhuǎn)等效果，還可以添加帶貨商品、設(shè)置禮物打賞等功能。
2.2 直播間
2.2.1 互動(dòng)支持
小紅書為播主提供了PK、投票、直播預(yù)告、連麥、小紙條等多種互動(dòng)工具：
● PK：支持禮物PK和人氣PK兩種模式，播主可選擇隨機(jī)匹配和邀請(qǐng)指定主播，這個(gè)功能有助于提升直播的趣味性，播主連麥PK可相互提升用戶的活躍度。
● 投票：播主可實(shí)時(shí)發(fā)起投票，增強(qiáng)和粉絲之間的互動(dòng)，提升用戶活躍度。
● 群推送：當(dāng)播主發(fā)起直播后，可以一鍵把直播推送到小紅書的粉絲群，直接觸達(dá)用戶。
● 發(fā)紅包：播主購買紅包后，可設(shè)置關(guān)注播主才能領(lǐng)取來快速漲粉。
● 抽獎(jiǎng)：播主可設(shè)置比如關(guān)注主播、分享直播、加入粉絲團(tuán)等參與條件，通過抽獎(jiǎng)的形式提升直播間的用戶活躍度。
2.2.2 直播工具
直播工具包含了數(shù)據(jù)看板、直播送禮、抽獎(jiǎng)等重要功能：
● 信息卡：播主可創(chuàng)建直播公告、推薦商品和模特信息三個(gè)卡片，幫助進(jìn)入直播間的用戶快速了解播主，提升用戶觀看時(shí)長。
● 數(shù)據(jù)看板：通過這個(gè)頻道，可以查看當(dāng)前直播間的詳細(xì)數(shù)據(jù)，包括觀看人數(shù)、新增粉絲數(shù)、流量來源、送禮排行等，有效幫助播主提升運(yùn)營效率。
2.2.3 商品管理
商品管理包含了直播閃拍，限時(shí)秒殺，直播優(yōu)惠券等功能，賦能播主直播帶貨。
● 直播閃拍：這個(gè)功能非常方便，播主可以拍照就能上傳商品，操作簡單，行動(dòng)成本低可以快速幫助播主提升銷售轉(zhuǎn)化率。
● 限時(shí)秒殺：用戶可創(chuàng)建限時(shí)秒殺商品，通過直播講解吸引用戶購買。
● 直播優(yōu)惠券：播主可在直播期間快速創(chuàng)建優(yōu)惠券，提升銷售轉(zhuǎn)化率。
● 預(yù)告推送：播主可插入下一場(chǎng)直播預(yù)告，讓用戶提前預(yù)約。
細(xì)節(jié)偵查：
直播閃拍這個(gè)功能很亮眼，只需隨便拍照一張，就能快速上架商品，這對(duì)直播間的銷售轉(zhuǎn)化有非常大的幫助。正如福格模型的行動(dòng)公式，主要行動(dòng)成本足夠低，行動(dòng)頻次就能增加。
2.3 直播中心
「直播中心」類似于創(chuàng)作中心，包含數(shù)據(jù)分析、開播獎(jiǎng)勵(lì)和主播課程等內(nèi)容，主要幫助播主提升直播頻次和運(yùn)營效率。其次對(duì)于粉絲基礎(chǔ)比較少的博主，還可以完成每日開播任務(wù)領(lǐng)取平臺(tái)獎(jiǎng)勵(lì)，提升直播曝光。
3. 小紅卡會(huì)員
「小紅卡會(huì)員」是小紅書為用戶設(shè)計(jì)的會(huì)員專屬權(quán)益服務(wù)，定價(jià)199元每年，主要享受會(huì)員專享價(jià)、無門檻包郵、限時(shí)購提前搶、專屬客服等權(quán)益。從這個(gè)版塊的內(nèi)容看，小紅卡會(huì)員設(shè)計(jì)得比較簡單，權(quán)益不夠豐富，吸引力較低。
4. 小結(jié)
從社區(qū)服務(wù)版塊的設(shè)計(jì)拆解，我們可以看出：
● 小紅書在C端的變現(xiàn)方式比較單一。我覺得可以再豐富一點(diǎn)，除了傳統(tǒng)的社交電商，是否可以再可以參考騰訊系的產(chǎn)品設(shè)計(jì)一些個(gè)性化功能，增強(qiáng)產(chǎn)品的變現(xiàn)方式。
● 直播功能設(shè)計(jì)得非常用心。筆者過去主要通過微信的視頻號(hào)直播，在拆解完小紅書以后，我只能感慨小紅書直播的功能非常完善和人性化，特別在提升直播博主銷售轉(zhuǎn)化率的功能設(shè)計(jì)上，體驗(yàn)非常友好。
● 小紅卡會(huì)員可以重新設(shè)計(jì)。從目前的會(huì)員權(quán)益來看，這個(gè)功能設(shè)計(jì)得毫無亮點(diǎn)，不過由于沒有真實(shí)數(shù)據(jù)參考，僅代表我的一家之言。
五、企業(yè)服務(wù)
「企業(yè)服務(wù)」是根據(jù)格式塔原則拆分，這個(gè)版塊的功能主要是小紅書面向企業(yè)B端的商業(yè)服務(wù)，包含商家店鋪和品牌營銷兩塊內(nèi)容。作為國內(nèi)最大的生活方式平臺(tái)，根據(jù)《小紅書商業(yè)化營銷通案》報(bào)告，小紅書不僅月活超2億，而且用戶群體月均可支配消費(fèi)支出4.1K，超過81%的用戶在小紅書瀏覽完內(nèi)容以后產(chǎn)生了購買欲望。所以小紅書是好產(chǎn)品長出來的絕佳土壤，也成了商家品牌營銷的必爭之地。
1. 商家店鋪
小紅書的店鋪面向個(gè)人和企業(yè)招募，用戶只需要按照條件申請(qǐng)都能通過。這就像十年前人人都可以擁有一個(gè)淘寶店一樣，通過輸出有趣的筆記就可以進(jìn)行種草轉(zhuǎn)化。
1.1 店鋪管理
1.1.1 PC管理后臺(tái)
小紅書的商鋪管理平臺(tái)主要幫助商家實(shí)現(xiàn)對(duì)店鋪的管理和通過數(shù)據(jù)分析提供運(yùn)營支撐，主要包含以下重要功能：
● 商品：主要為商家提供商品的上下架功能，其次還提供商品一鍵搬家、組合商品銷售等功能。
● 數(shù)據(jù)：這個(gè)頻道內(nèi)容設(shè)計(jì)得很豐富，提供店鋪流量、商品、筆記、直播和店鋪等內(nèi)容的數(shù)據(jù)分析，通過多維度的數(shù)據(jù)，幫助商家提升店鋪運(yùn)營效率。
● 筆記：提供商業(yè)筆記的管理、創(chuàng)作和創(chuàng)作靈感，幫助商家創(chuàng)作更好的種草筆記。
● 營銷：提供小紅書官方運(yùn)營活動(dòng)的報(bào)名以及多種店鋪營銷工具；
● 用戶：這個(gè)頻道為商家提供更精準(zhǔn)的用戶運(yùn)營計(jì)劃，通過專業(yè)完善的數(shù)據(jù)洞察店鋪的用戶行為，提升銷售轉(zhuǎn)化率。
1.1.2 APP客戶端
為了給商家提供更友好運(yùn)營管理體驗(yàn)，小紅書也為商家單獨(dú)開發(fā)了小紅書商家版。通過APP就可以實(shí)現(xiàn)對(duì)店鋪的數(shù)據(jù)化管理，非常友好。
1.2 商家課堂
「商家課堂」是為小紅書商家提供的一站式學(xué)習(xí)平臺(tái)，目的是幫助商家快速、系統(tǒng)學(xué)習(xí)小紅書店鋪運(yùn)營，提升店鋪運(yùn)營效率。
1.2.1 成長地圖
小紅書商家成長地圖提供了一站式課程體系，包括新手必學(xué)、成長進(jìn)階和瓶頸突破三塊內(nèi)容。其次這個(gè)欄目有一個(gè)非常亮眼的功能，那就是支持商家設(shè)計(jì)系統(tǒng)學(xué)習(xí)計(jì)劃，可設(shè)置系統(tǒng)提醒時(shí)間和學(xué)習(xí)頻次，非常友好。
1.2.2 課程中心
「課程中心」相比成長地圖，提供了更詳細(xì)、完整的直播以及錄播課程內(nèi)容學(xué)習(xí)，比如開店入駐、店鋪基礎(chǔ)、財(cái)務(wù)結(jié)算這些偏店鋪管理操作的技能學(xué)習(xí)。從這個(gè)頻道可以看出，小紅書商家店鋪運(yùn)營方面，投入了很大的精力，打造了非常專業(yè)、完善的學(xué)習(xí)系統(tǒng)。
迭代建議
小紅書在商家運(yùn)營指導(dǎo)投入的精力超出我的想象，個(gè)人覺得小紅書可以參考像知識(shí)付費(fèi)SaaS服務(wù)商小鵝通的訓(xùn)練營模式，把店鋪運(yùn)營學(xué)習(xí)打造成一個(gè)動(dòng)態(tài)的學(xué)習(xí)課程，這樣不僅可以加深和用戶的鏈接，為商家提供專業(yè)、有價(jià)值的課程，還能拓展商業(yè)變現(xiàn)的方式。
1.2.3 服務(wù)市場(chǎng)
「服務(wù)市場(chǎng)」是小紅書為商家遴選的第三方優(yōu)秀合作伙伴，包含商品管理、訂單管理、企業(yè)管理、直播管理和內(nèi)容管理五大類，幫助商家更智能化運(yùn)營店鋪，提升效率，比如有提供商品批量搬家上架的服務(wù)智淘分銷應(yīng)用，可以一鍵將1688商品上貨到小紅書店鋪等。
2. 品牌營銷
小紅書商業(yè)產(chǎn)品體系非常豐富，有負(fù)責(zé)內(nèi)容生產(chǎn)的蒲公英平臺(tái)，有負(fù)責(zé)流量+轉(zhuǎn)化的聚光平臺(tái)、薯?xiàng)l和品牌廣告。本文不過多分析，如有興趣可閱讀《小紅書商業(yè)化營銷通案》報(bào)告。
2.1 蒲公英
「蒲公英」是小紅書官方優(yōu)質(zhì)創(chuàng)作者商業(yè)服務(wù)平臺(tái)，它覆蓋海量博主和多種匹配能力，提供定制、招募、共創(chuàng)多種內(nèi)容合作模式，全方位滿足品牌的內(nèi)容營銷訴求。根據(jù)官網(wǎng)最新數(shù)據(jù)，目前已有累計(jì)10w+創(chuàng)作者、65000+海外企業(yè)商戶入駐。我們可以簡單理解為蒲公英是小紅書初級(jí)的品牌營銷平臺(tái)，只要你的的粉絲好過1000，你都能申請(qǐng)入駐，通過發(fā)布優(yōu)秀筆記種草賺錢。
2.2 薯?xiàng)l推廣
「薯?xiàng)l」是小紅書為內(nèi)容創(chuàng)作者和企業(yè)商家打造的自助式投放產(chǎn)品，可以有效地幫助內(nèi)容創(chuàng)作者擴(kuò)大內(nèi)容影響力，也能幫助企業(yè)商家通過更靈活高效的推廣方式提升營銷效率。也就是當(dāng)博主或商家發(fā)布筆記以后，可以選擇薯?xiàng)l推廣進(jìn)行筆記推廣，它主要包含內(nèi)容加熱和營銷推廣兩種形式。
2.3 聚光平臺(tái)
「聚光平臺(tái)」是小紅書營銷全新上線的一站式廣告投放平臺(tái)，能夠滿足廣告主以“產(chǎn)品種草、商品銷量、客資收集、直播推廣、搶占賽道”為目標(biāo)的多樣化營銷訴求。聚光平臺(tái)主要為企業(yè)客戶使用，通過小紅書全站營銷的多種組合場(chǎng)景，幫助企業(yè)提升廣告投放回報(bào)率，高效觸達(dá)用戶。從官方文檔介紹，聚光平臺(tái)支持信息流、CPC點(diǎn)擊等多種形式，靈活高效。
3. 小結(jié)
從企業(yè)服務(wù)版塊的設(shè)計(jì)拆解，我們可以看出：
● 小紅書未來在B端的業(yè)務(wù)線會(huì)越來越深，也許很快人人都會(huì)擁有一個(gè)小紅書店鋪，一邊標(biāo)記生活方式，一邊向客戶種草。
● 小紅書為企業(yè)客戶提供的品牌營銷體系非常完善，不僅有蒲公英、薯?xiàng)l、聚光等平臺(tái)，還獨(dú)創(chuàng)IDEA方法論，從洞察機(jī)會(huì)、定義策略、擊穿品類賽道再到沉淀品牌資產(chǎn)，都利用平臺(tái)自身強(qiáng)大的用戶資源滿足客戶的需求。
● 如果只是體驗(yàn)APP，我們無法獲知小紅書真正核心的產(chǎn)品體系，所以當(dāng)我們升維去拆解一個(gè)產(chǎn)品的時(shí)候，我們的收獲就會(huì)更大。
六、思考總結(jié)
通過以上部分對(duì)小紅書的全面體驗(yàn)和拆解，我們可以看出，小紅書作為國內(nèi)最大的生活方式平臺(tái)和社交電商開拓者，產(chǎn)品設(shè)計(jì)其實(shí)也有諸多問題，以下為我梳理的產(chǎn)品設(shè)計(jì)總結(jié)和建議：
1. 商業(yè)層
小紅書在C端的變現(xiàn)業(yè)務(wù)太單薄，僅有購物、直播打賞和小紅卡會(huì)員，可以嘗試增加合理的變現(xiàn)手段，不僅能為平臺(tái)增加收入，也能為用戶提供個(gè)性化的服務(wù)。當(dāng)然從企業(yè)服務(wù)的拆解看，他們?yōu)槠髽I(yè)客戶提供覆蓋內(nèi)容生產(chǎn)、流量+轉(zhuǎn)化的商業(yè)產(chǎn)品體系已經(jīng)足夠豐富，他們不缺盈利手段。其次我更喜歡小紅書過去的產(chǎn)品Slogan——發(fā)現(xiàn)全世界的好東西，這個(gè)口號(hào)簡單、直接、朗朗上口，聽一次就記得住。
2. 產(chǎn)品層
雖然已經(jīng)發(fā)展十年，近一年產(chǎn)品迭代版本次數(shù)高達(dá)98次（在我拆解過的產(chǎn)品中最高，12306平均年迭代次數(shù)為3次），但我認(rèn)為小紅書APP的內(nèi)容設(shè)計(jì)不夠創(chuàng)新，也不夠豐富。我在「內(nèi)容服務(wù)」版塊提了很多迭代建議，比如首頁的「本地」頻道可以把內(nèi)容再拆分得細(xì)致一些，讓用戶能找到更精準(zhǔn)的內(nèi)容。還有筆記的分享功能，只提供一張朋友圈長圖海報(bào)生成方式，太淺陋了，不夠細(xì)致。
3. 體驗(yàn)層
如果從一個(gè)普通用戶去體驗(yàn)，小紅書APP產(chǎn)品體驗(yàn)非常流暢，操作簡單、學(xué)習(xí)成本低，這和社區(qū)內(nèi)產(chǎn)品交互流程本身比較簡單有關(guān)，幾乎沒有涉及復(fù)雜的業(yè)務(wù)流程。但從一個(gè)小紅書博主的角度去體驗(yàn)，我發(fā)現(xiàn)小紅書的創(chuàng)作平臺(tái)規(guī)劃非常亂。比如創(chuàng)作者中心、專業(yè)號(hào)中心、商家入駐中心、商家店鋪管理以及直播中心這些產(chǎn)品，邊界不清晰，入口也不明顯，需要反復(fù)來回查找才能找到入口（我甚至每個(gè)平臺(tái)的網(wǎng)址都單獨(dú)收藏，才能快速訪問，否則我會(huì)在官網(wǎng)迷失很久）。
作者：設(shè)計(jì)大偵探 來源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
作者：SFUP_DESIGN 來源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
為回饋新老用戶、持續(xù)提升業(yè)務(wù)增長、打造品牌影響力，開展年終回饋活動(dòng)；本次活動(dòng)通過拉新、促活、轉(zhuǎn)化等方式實(shí)現(xiàn)用戶和業(yè)務(wù)的增長。
基于兔年和送福的節(jié)日習(xí)俗，采用了“福兔迎新”主題，并結(jié)合業(yè)務(wù)目標(biāo)，構(gòu)建活動(dòng)玩法。
在頁面交互上，需建立統(tǒng)一框架承載豐富的玩法，也要保證易用性和擴(kuò)展性。
為保證主頁進(jìn)出游戲的體驗(yàn)流暢，采用了統(tǒng)一的結(jié)構(gòu)框架。頂部標(biāo)題固定，中間模塊下移，露出游戲區(qū)域，再利用過渡動(dòng)效，保證無縫轉(zhuǎn)場(chǎng)的自然流暢。
3.1 標(biāo)題 &圖形設(shè)計(jì)
在標(biāo)題設(shè)計(jì)中，將“兔”耳造型融入字體設(shè)計(jì)中，與主視覺相呼應(yīng)，營造濃郁的兔年氛圍。傾斜8度的字體，展現(xiàn)出我們對(duì)新年蓬勃向上的精神追求和快速高效的業(yè)務(wù)增長速度。統(tǒng)一圓角處理和圓點(diǎn)元素延續(xù)了順豐logo的設(shè)計(jì)，更好地提升了親和力。
簡潔的符號(hào)往往可以傳達(dá)強(qiáng)有力的情感，所以選取了兔年元素和中國傳統(tǒng)紋飾融入到此次活動(dòng)的代幣設(shè)計(jì)中。這些符號(hào)也延續(xù)使用在活動(dòng)頁的其他設(shè)計(jì)和頁面裝飾上。
3.2 IP形象設(shè)計(jì)
“福兔”作為本次活動(dòng)的IP卡通形象，將貫穿于活動(dòng)各場(chǎng)景。小游戲中福兔作為重要角色，親切可愛的造型配上鮮活豐富的表情不僅能引起用戶共鳴，流暢輕松的動(dòng)作還能極大提升用戶的操作體驗(yàn)，增強(qiáng)活動(dòng)趣味性和互動(dòng)性。
福兔的造型設(shè)計(jì)從以下幾方面去結(jié)合順豐品牌元素：
· 強(qiáng)調(diào)品牌標(biāo)志：帶有順豐logo的杜邦紙袋延展設(shè)計(jì)為福兔的斜挎包
· 從細(xì)節(jié)入手：福兔的圓形腮紅與順豐快遞員IP形象的腮紅設(shè)計(jì)呼應(yīng)，同時(shí)也與順豐logo紅色圓點(diǎn)一脈相承。
我們?yōu)楦Ｍ迷O(shè)計(jì)了小游戲中的多種狀態(tài)動(dòng)畫，用豐富多變的表情，可愛的肢體語言，融入到小游戲中，增強(qiáng)游戲過程趣味性和可玩性，提升沉浸感。
與開發(fā)協(xié)作在動(dòng)效上使用了spine骨骼動(dòng)畫，通過控制骨骼，可以快速輸出各種動(dòng)作，減少了動(dòng)畫體積，提升頁面加載速度。
“福兔跳跳”小游戲，通過躲避“鞭炮”障礙物，跳躍收集“福氣值”、“獎(jiǎng)勵(lì)金”。同時(shí)設(shè)置難度不同的關(guān)卡，以提高游戲的挑戰(zhàn)性和可玩性。
3.3 場(chǎng)景設(shè)計(jì)
主頁場(chǎng)景跟隨節(jié)日以提升感知，通過換膚減少視覺疲勞。隨著節(jié)日變化，色彩和營銷氛圍感也隨之增強(qiáng)。
為了增強(qiáng)游戲氛圍、新鮮感，提高游戲體驗(yàn)。小游戲與主頁同步進(jìn)行換膚，前進(jìn)時(shí)街景也會(huì)呈現(xiàn)節(jié)日特色建筑、裝飾。
為了突出用戶的品牌感知，在背景街道設(shè)計(jì)中，盡可能融入了較多順豐元素，快遞箱、貨車、LOGO等等。
3.4 其他
多玩法設(shè)計(jì)
小游戲玩法，符合大眾群體的偏好；獎(jiǎng)勵(lì)金、配對(duì)搶免單有效提升用戶留存，激勵(lì)用戶持續(xù)參與活動(dòng)；兌獎(jiǎng)、沖榜玩法回饋高價(jià)值用戶，豐厚獎(jiǎng)品打造活動(dòng)口碑。
引導(dǎo)設(shè)計(jì)
在活動(dòng)的不同觸點(diǎn)對(duì)用戶進(jìn)行引導(dǎo)與轉(zhuǎn)化。
年終活動(dòng)是一年中業(yè)務(wù)搶收的重要節(jié)點(diǎn)?；顒?dòng)上線后，整體上活動(dòng)的訪問量、參與率及留存率，均表現(xiàn)不俗，達(dá)到預(yù)期目標(biāo)。未來我們會(huì)繼續(xù)在運(yùn)營活動(dòng)的創(chuàng)新上探索更多有趣好玩的方向，豐富用戶體驗(yàn)，挖掘創(chuàng)新玩法。
我們下個(gè)活動(dòng)再見～
作者：SFUP_DESIGN 來源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
前言
作為設(shè)計(jì)師的你，是否也遇到過這樣的問題：
1.負(fù)責(zé)的業(yè)務(wù)線產(chǎn)品邏輯復(fù)雜難懂，產(chǎn)品自己想不清楚需求，導(dǎo)致項(xiàng)目難以有效推進(jìn)；
2.設(shè)計(jì)方案拍板的人太多，一人一個(gè)想法，溝通成本高，還總是返工；
3.設(shè)計(jì)優(yōu)化找不到頭緒，不知道是否匹配產(chǎn)品目標(biāo)等等…
本文將從what、why、how三方面帶你一起解讀設(shè)計(jì)共創(chuàng)的方法論模型，并以實(shí)際案例為指導(dǎo)，分享設(shè)計(jì)共創(chuàng)五步法；感受在設(shè)計(jì)過程中，通過與其他核心角色一起共創(chuàng)，從明確共同目標(biāo)、共同決策、共創(chuàng)設(shè)計(jì)、共同評(píng)價(jià)，到最終共享設(shè)計(jì)成果過程。
一起來赴一場(chǎng)創(chuàng)新共贏的設(shè)計(jì)盛宴吧！
What-什么是設(shè)計(jì)共創(chuàng)
共創(chuàng)行為由來已久
共創(chuàng)模式并非現(xiàn)代社會(huì)的新生事物，其萌芽可追溯至人類文明早期，比如中國最早的詩歌總集《詩經(jīng)》、古希臘的《荷馬史詩·伊利亞特》等耳熟能詳?shù)奈膶W(xué)作品，都是在民間大眾共創(chuàng)基礎(chǔ)上再由作者整理完成的；還有《永樂大典》、《四庫全書》等大型文化工程著作，都是集體協(xié)作的結(jié)晶。共創(chuàng)行為在人類文化發(fā)展史的各個(gè)階段，我們都可見其蹤影。
設(shè)計(jì)共創(chuàng)的定義
1.名詞定義
網(wǎng)上較少關(guān)于設(shè)計(jì)共創(chuàng)方法的完整介紹和明確定義，只有一些相關(guān)資料是對(duì)于該方法的理解。
如：“Co-designis a design-led process that uses creative participatory methods. There is noone-size-fits-all approach nor a set of check- lists to follow. Instead, thereare a series of patterns and principles that can be applied in different wayswith different people. Co- designers make decisions, not just suggestions”(Burkett, 2012).
“協(xié)同設(shè)計(jì)是一個(gè)通過使用創(chuàng)造性和參與性的方法進(jìn)行設(shè)計(jì)的過程。在這個(gè)過程中，沒有一種放之四海而皆準(zhǔn)的方法。但是，有一系列的模式和原則可以與不同的人以不同的方式進(jìn)行應(yīng)用。協(xié)同設(shè)計(jì)是為了做出決策，而不僅僅是建議”
2.筆者對(duì)設(shè)計(jì)共創(chuàng)的理解
經(jīng)過在實(shí)際工作中的不斷實(shí)踐和應(yīng)用，用一句話來總結(jié)我對(duì)設(shè)計(jì)共創(chuàng)的理解：“邀請(qǐng)核心角色參與設(shè)計(jì)關(guān)鍵過程，共識(shí)問題和目標(biāo)、了解設(shè)計(jì)思考過程并共同決策、共識(shí)評(píng)價(jià)標(biāo)準(zhǔn)并共享設(shè)計(jì)成果”
Why-為什么要使用設(shè)計(jì)共創(chuàng)
設(shè)計(jì)共創(chuàng)的價(jià)值
設(shè)計(jì)共創(chuàng)有以下三個(gè)重要價(jià)值
1.打破能力邊界：個(gè)人能力是有限的，通過卷入其他核心角色的參與，發(fā)揮各個(gè)角色優(yōu)勢(shì)，實(shí)現(xiàn)資源的優(yōu)勢(shì)整合，有效打破個(gè)人能力的邊界。
2.豐富視角維度：設(shè)計(jì)是一個(gè)不斷平衡的過程，了解并兼容更多信息才能使方案更加完備，然而設(shè)計(jì)的單一視角往往是具有局限性，設(shè)計(jì)共創(chuàng)可以幫我我們從多視角思考問題，有效規(guī)避風(fēng)險(xiǎn)。
3.拓展價(jià)值廣度：項(xiàng)目的價(jià)值如果僅僅從設(shè)計(jì)角度進(jìn)行評(píng)估會(huì)顯得單薄，難以獲得其他角色的認(rèn)可。通過多角色共建評(píng)估標(biāo)準(zhǔn)拓展價(jià)值廣度，最終實(shí)現(xiàn)價(jià)值共享。
什么類型的項(xiàng)目適合進(jìn)行設(shè)計(jì)共創(chuàng)
實(shí)際工作中我們通常會(huì)從項(xiàng)目的相對(duì)設(shè)計(jì)成本和相對(duì)設(shè)計(jì)價(jià)值兩個(gè)維度來評(píng)估項(xiàng)目類型。設(shè)計(jì)價(jià)值相對(duì)較高，又具有一定設(shè)計(jì)成本的項(xiàng)目，比較適合進(jìn)行設(shè)計(jì)共創(chuàng)。例如一些業(yè)務(wù)邏輯復(fù)雜的改版項(xiàng)目、從0-1的前瞻探索項(xiàng)目、設(shè)計(jì)多方?jīng)Q策的橫向項(xiàng)目等。
對(duì)設(shè)計(jì)成本、設(shè)計(jì)價(jià)值的理解
相對(duì)設(shè)計(jì)成本通常由業(yè)務(wù)復(fù)雜度、需求是否明確、溝通成本量決定；而對(duì)相對(duì)設(shè)計(jì)價(jià)值的評(píng)估則需要從用戶、業(yè)務(wù)、設(shè)計(jì)三個(gè)視角進(jìn)行評(píng)估。
設(shè)計(jì)共創(chuàng)流程 VS 常規(guī)設(shè)計(jì)流程
對(duì)比我們常規(guī)的設(shè)計(jì)流程，設(shè)計(jì)角色通常作為一個(gè)需求的把關(guān)者出現(xiàn)，重點(diǎn)參與需求確認(rèn)后的設(shè)計(jì)相關(guān)環(huán)節(jié)，最終從設(shè)計(jì)單一視角進(jìn)行項(xiàng)目復(fù)盤。在項(xiàng)目從需求到上線的整個(gè)過程中作為被動(dòng)者的角色，斷點(diǎn)式的參與，缺少控制權(quán)。
而設(shè)計(jì)共創(chuàng)流程要求我們?cè)陧?xiàng)目的各個(gè)環(huán)節(jié)深度參與共同決策，變被動(dòng)為主動(dòng)，從共創(chuàng)視角全流程掌握項(xiàng)目細(xì)節(jié)，提高對(duì)業(yè)務(wù)的理解和判斷。
How-如何開展設(shè)計(jì)共創(chuàng)
以《百度保障體驗(yàn)優(yōu)化項(xiàng)目》為例
注：百度保障項(xiàng)目主要服務(wù)于百度網(wǎng)民權(quán)益保障計(jì)劃，這是百度聯(lián)合國家司法部、消協(xié)推出的首個(gè)搜索引擎網(wǎng)民權(quán)益保障體系，其目的是為了更好的保障網(wǎng)民的合法權(quán)益，當(dāng)用戶在百度進(jìn)行搜索、購物等行為時(shí)，遭到釣魚、欺詐、假冒官網(wǎng)并造成經(jīng)濟(jì)損失時(shí)，可以享有一定額度的保障金，屬于百度APP的特色功能。
從項(xiàng)目的相對(duì)設(shè)計(jì)成本、相對(duì)設(shè)計(jì)價(jià)值來看，百度保障體驗(yàn)優(yōu)化是一個(gè)設(shè)計(jì)成本&價(jià)值相對(duì)較高的項(xiàng)目，比較適合進(jìn)行設(shè)計(jì)共創(chuàng)：
1.相對(duì)設(shè)計(jì)成本高
①業(yè)務(wù)復(fù)雜：百度保障是一個(gè)涉及BC雙端用戶的產(chǎn)品，流程復(fù)雜，設(shè)計(jì)側(cè)處于剛接手的階段，對(duì)業(yè)務(wù)邏輯不熟悉。
②需求不明確：百度保障業(yè)務(wù)屬于百度特色功能，起步晚且少有可參考的行業(yè)競(jìng)品，常常是一句話的改版需求。
③溝通成本高：產(chǎn)品團(tuán)隊(duì)新調(diào)整，一線產(chǎn)品同學(xué)經(jīng)驗(yàn)不足，缺少成熟的合作流程，總是頻繁改需求。
2.相對(duì)設(shè)計(jì)價(jià)值高
①用戶體驗(yàn)差：保障業(yè)務(wù)體量雖小，面對(duì)的用戶卻都屬于高危用戶，然而之前的功能沒有經(jīng)過設(shè)計(jì)介入，用戶體驗(yàn)極差。
②業(yè)務(wù)重點(diǎn)：影響百度口碑，是產(chǎn)品側(cè)的重點(diǎn)優(yōu)化對(duì)象。③設(shè)計(jì)視角：改版需求設(shè)計(jì)發(fā)揮空間大，產(chǎn)品給予高度配合。
《設(shè)計(jì)共創(chuàng)五步法》
接下來將結(jié)合《百度保障體驗(yàn)優(yōu)化項(xiàng)目》說明設(shè)計(jì)共創(chuàng)的實(shí)踐路徑。
第一步：業(yè)務(wù)理解
1.項(xiàng)目背景摸底
產(chǎn)品最初的需求只有一句話“保障官網(wǎng)目前體驗(yàn)很差，很久沒有優(yōu)化過了，需要設(shè)計(jì)團(tuán)隊(duì)幫忙整體改版”，并在此基礎(chǔ)上提出一些非常稀碎的優(yōu)化點(diǎn)，缺乏關(guān)聯(lián)性和整體性。
設(shè)計(jì)側(cè)開始通過定性、定量多種形式對(duì)業(yè)務(wù)進(jìn)行摸底，明確整體的業(yè)務(wù)邏輯以及保障官網(wǎng)所處的位置，并通過用戶反饋和用戶數(shù)據(jù)分析問題，明確用戶的真實(shí)訴求。
2.理解業(yè)務(wù)價(jià)值
通過業(yè)務(wù)摸底，設(shè)計(jì)側(cè)將對(duì)業(yè)務(wù)價(jià)值、業(yè)務(wù)邏輯的整體理解梳理出來，并與產(chǎn)品確認(rèn)達(dá)成共識(shí)。
百度保障業(yè)務(wù)有三個(gè)重要的環(huán)節(jié)：保障官網(wǎng)、申請(qǐng)保障、保單管理。通過這三個(gè)環(huán)節(jié)建立起用戶端和商家端之間的聯(lián)系。其中，百度保障官網(wǎng)起著非常重要的信息傳達(dá)、用戶保障認(rèn)知建立的作用。
3.現(xiàn)狀問題分析
百度保障官網(wǎng)作為重要的保障認(rèn)知傳達(dá)陣地，存在框架層級(jí)混亂、信息簡陋缺乏針對(duì)性、傳達(dá)效率低等問題。
第二步：共識(shí)目標(biāo)
通過多角色溝通，我們將官網(wǎng)改版的核心目標(biāo)確認(rèn)為“如何從BC雙視角重塑官網(wǎng)信息強(qiáng)化保障認(rèn)知，讓官網(wǎng)內(nèi)容更易理解”。
在共識(shí)目標(biāo)的過程中，設(shè)計(jì)側(cè)可以先基于共識(shí)的業(yè)務(wù)價(jià)值和問題定一個(gè)初版目標(biāo)，然后拉其他核心角色一起討論，避免無目的低效率溝通，在基本共識(shí)點(diǎn)的基礎(chǔ)上更容易達(dá)成一致。
第三步：設(shè)計(jì)共創(chuàng)
基于共識(shí)目標(biāo)，設(shè)計(jì)側(cè)組織開展多角色腦暴進(jìn)行設(shè)計(jì)方向共創(chuàng)和方案細(xì)節(jié)共創(chuàng)。
1.設(shè)計(jì)方向腦暴共創(chuàng)
①共創(chuàng)前-充分準(zhǔn)備有效的腦暴和共創(chuàng)過程需要組織者具備清晰的思路和明確的引導(dǎo)。在腦暴前我進(jìn)行了詳細(xì)的腦暴議程安排，并通過郵件和工作群的方式同步給參會(huì)同學(xué)，要求所有參會(huì)同學(xué)會(huì)議前完成閱讀，保證信息同步。
②共創(chuàng)中-把控節(jié)奏
共創(chuàng)過程中為了保障腦暴的質(zhì)量，我會(huì)要求全部參會(huì)同學(xué)關(guān)閉電腦聚焦在討論的目標(biāo)上，明確問題和目標(biāo)→各自思考并用標(biāo)簽記錄想法→共同討論并在大白板上進(jìn)行整理分析→得出共識(shí)結(jié)論。
以C用戶官網(wǎng)優(yōu)化視角來舉例
我們?cè)诠沧R(shí)官網(wǎng)想要為C用戶營造的感知是讓他們能【了解保障作用，建立信任感，知道如何申保】之后。從使用場(chǎng)景、用戶訴求、訴求滿足依次進(jìn)行腦暴共創(chuàng)：
1.核心場(chǎng)景：通過對(duì)業(yè)務(wù)的理解發(fā)散討論用戶什么場(chǎng)景下會(huì)來到保障官網(wǎng)，大家一起共識(shí)了兩個(gè)核心場(chǎng)景。
2.用戶訴求：基于核心場(chǎng)景，將自己帶入用戶，想象進(jìn)入保障官網(wǎng)的自己核心訴求是什么？每個(gè)人寫下自己的想法，然后貼標(biāo)簽找共性，共識(shí)核心訴求。
3.訴求滿足：共識(shí)訴求后，我們轉(zhuǎn)變視角，思考作為產(chǎn)品設(shè)計(jì)師我們可以通過提供哪些內(nèi)容來滿足用戶的訴求。同樣的，每個(gè)人寫下自己的想法后貼標(biāo)簽找共性，此次的內(nèi)容對(duì)于官網(wǎng)信息的呈現(xiàn)已經(jīng)起到很大的決定性作用，再此基礎(chǔ)上，我們一起投票決定信息的優(yōu)先級(jí)完成頁面內(nèi)容的基本布局并形成共識(shí)結(jié)論。
③共創(chuàng)后-記錄共識(shí)共創(chuàng)后，最重要就是及時(shí)記錄共識(shí)結(jié)論并同步到所有相關(guān)成員進(jìn)行確認(rèn)，這樣不僅可以幫助我們理清思路，更能夠很好的減少后續(xù)結(jié)論變動(dòng)的風(fēng)險(xiǎn)，降低溝通成本。
2.方案細(xì)節(jié)共創(chuàng)
①?zèng)Q策框架層方案以官網(wǎng)中BC用戶信息的強(qiáng)弱關(guān)系為依據(jù)，進(jìn)行框架結(jié)構(gòu)的多方案發(fā)散，并通過制作demo的方式完成不同方案的原型效果。
拉關(guān)鍵角色進(jìn)行體驗(yàn)并投票。大家一致認(rèn)為【方案3：強(qiáng)化C弱化B】的效果更符合我們的優(yōu)化目標(biāo)。
在框架方案3的基礎(chǔ)上，進(jìn)行方案細(xì)化。對(duì)比線上原方案，框架層有兩個(gè)核心優(yōu)化點(diǎn)：
1.層級(jí)優(yōu)化：由原層級(jí)關(guān)系不清晰的5個(gè)頁面，減少后一個(gè)C用戶首頁+B商家二級(jí)頁，重點(diǎn)突出層級(jí)簡單。
2.提高屏效：將原來的雙底bar合并，提高頁面展示屏效。
②共識(shí)信息表現(xiàn)層方案
在信息層基于腦暴共創(chuàng)結(jié)論對(duì)內(nèi)容信息進(jìn)行了重構(gòu)，完成官網(wǎng)認(rèn)知的搭建，主要有以下3個(gè)優(yōu)化點(diǎn)：
1.內(nèi)容更豐滿：根據(jù)腦暴結(jié)論C用戶首頁增加9個(gè)內(nèi)容模塊，B商家頁增加4個(gè)內(nèi)容模塊，建立保障立體認(rèn)知。
2.內(nèi)容更聚焦：將C用戶頁作為首頁，去掉原首頁，B商家頁作為二級(jí)頁面，強(qiáng)化C視角更好的滿足核心用戶訴求。
3.信息更真實(shí)：C首屏信息通過展示申保&認(rèn)保的規(guī)模數(shù)據(jù)突出保障的安全感，B商家頁通過輪播申保動(dòng)態(tài)&增加真實(shí)案例方式營造真實(shí)感。
完成方案后拉關(guān)鍵角色對(duì)齊共識(shí)，調(diào)整優(yōu)化細(xì)節(jié)，明確最終效果。
第四步：指標(biāo)拆解
在指標(biāo)拆解方面，根據(jù)HEART+GSM體驗(yàn)度量模型，完成定性+定量驗(yàn)證指標(biāo)的分析。
簡單來說，就是將HEART模型中的體驗(yàn)標(biāo)準(zhǔn)依次縱向排列，將GSM體驗(yàn)度量模型作為分析工具，依次對(duì)HEART模型中各個(gè)維度從目標(biāo)（goal）、信號(hào)（signal）、度量指標(biāo)（metric）進(jìn)行分析。
以留存率（retention）為例，我們的目標(biāo)是希望用戶愿意多來官網(wǎng)了解信息，不斷強(qiáng)化保障認(rèn)知，那么用戶所表現(xiàn)出來的行為信號(hào)是多次訪問保障官網(wǎng)，對(duì)應(yīng)的度量指標(biāo)可以拆解為活躍用戶量、次日/三日/七日留存等等。
完成設(shè)計(jì)側(cè)指標(biāo)拆解后，與產(chǎn)品進(jìn)行討論，從產(chǎn)品視角給予補(bǔ)充完善，雙方達(dá)成共識(shí)后，一起完成定性評(píng)估問卷和打點(diǎn)規(guī)則細(xì)化。
第五步：落地驗(yàn)證
上線后持續(xù)觀察用戶數(shù)據(jù)，對(duì)比上線前后的定性+定量指標(biāo)，定性評(píng)估及定量數(shù)據(jù)指標(biāo)均得到明顯提升。
其他思考
設(shè)計(jì)共創(chuàng)循環(huán)流程
官網(wǎng)優(yōu)化只是保障體驗(yàn)的一個(gè)環(huán)節(jié)，我們以點(diǎn)入局，拉開了保障體驗(yàn)全流程整優(yōu)化的帷幕。
在完成申保前-保障官網(wǎng)的整體優(yōu)化改版后并獲得極大成功后，我們趁熱打鐵，通過用戶體驗(yàn)地圖的方式完成保障中、后全流程的設(shè)計(jì)機(jī)會(huì)點(diǎn)分析，明確申保中、后設(shè)計(jì)目標(biāo)并完成具體設(shè)計(jì)提案，與產(chǎn)品共識(shí)后分期推動(dòng)落地，與官網(wǎng)優(yōu)化一樣，通過設(shè)計(jì)共創(chuàng)和嚴(yán)謹(jǐn)論證最終上線后的數(shù)據(jù)效果均表現(xiàn)正向，符合預(yù)期。
從保障全流程優(yōu)化的案例我們不難發(fā)現(xiàn)，設(shè)計(jì)共創(chuàng)是一個(gè)循環(huán)過程，它始于我們對(duì)業(yè)務(wù)的初步理解，終于一個(gè)循環(huán)后對(duì)業(yè)務(wù)的理解加深而進(jìn)行進(jìn)一步的循環(huán)，從而形成一個(gè)良性循環(huán)，幫助我們不斷深入業(yè)務(wù)，助力業(yè)務(wù)體驗(yàn)不斷優(yōu)化提升。
及時(shí)進(jìn)行項(xiàng)目復(fù)盤總結(jié)
在項(xiàng)目關(guān)鍵節(jié)點(diǎn)及時(shí)進(jìn)行項(xiàng)目復(fù)盤，不僅可以讓所有參與項(xiàng)目的同學(xué)有獲得感和價(jià)值感，更加認(rèn)可設(shè)計(jì)共創(chuàng)的成果，形成正向循環(huán)。同時(shí)也能擴(kuò)大設(shè)計(jì)的影響力，獲得合作團(tuán)隊(duì)老板的高度認(rèn)可和贊許，達(dá)成雙贏目標(biāo)。
作者：百度MEUX 來源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
作者：藍(lán)藍(lán)設(shè)計(jì) 圖片來源：花瓣網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
作者：藍(lán)藍(lán)設(shè)計(jì) 圖片來源：花瓣網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
Hi，我是彩云。用戶頭像是我們?cè)谧鯱I時(shí)經(jīng)常會(huì)用到的設(shè)計(jì)元素，但想要設(shè)計(jì)好它也是有很多需要注意的細(xì)節(jié)知識(shí)的，今天這篇文章將深入到頭像設(shè)計(jì)的方方面面，不同的事件、狀態(tài)、操作、配色等等一系列UI設(shè)計(jì)的最佳實(shí)踐。這篇文章準(zhǔn)備了很多實(shí)例，或許可以給你一些啟發(fā)。
近年來，我?guī)缀趺刻於荚跒g覽數(shù)以萬計(jì)的UI組件、界面、不同的網(wǎng)站和app，研究它們的結(jié)構(gòu)、布局和配色方式。我的目標(biāo)是創(chuàng)建一個(gè)全面的UI指南，設(shè)計(jì)應(yīng)用及其組件、模板等。
今天這部分講的就是關(guān)于用戶頭像的UI組件探索。用戶頭像是一個(gè)組件元素，用戶通過它來標(biāo)識(shí)自己。
基本上有以下三種類型可以用來代表用戶頭像
空狀態(tài)
名字的首字母
用戶照片或者圖片
根據(jù)具體使用場(chǎng)景的不同，你可以使用多樣化的顏色和尺寸:
1）為了更好的識(shí)別，不同用戶配色可以多樣化一些
2）頁眉、導(dǎo)航欄中一般用24-40dp寬度為主
3）40-48dp的頭像大小通常用在內(nèi)容塊或列表中
4）如果你想在更大的頁面中使用頭像，比如個(gè)人中心、設(shè)置中心等時(shí)，推薦使用56+dp
當(dāng)我們想通過用戶頭像通知某事或演示某種操作時(shí)，可以使用額外的UI元素；
1）指示燈標(biāo)識(shí)用戶是在線還是不在線
2）通過帶有編號(hào)的標(biāo)簽通知提供信息
3）可以在用戶頭像上增加額外的圖標(biāo)提供用戶行為操作
顯示用戶狀態(tài)的最常見做法是在頭像的右下角放置一個(gè)多色控件
1）綠色的代表在線，灰色代表不在線
2）填充圖形代表用戶在線狀態(tài)，而空心形態(tài)用戶不在線的狀態(tài)（并且是可以操作的）
根據(jù)不同優(yōu)先級(jí)以及為了吸引用戶的注意力，可以修改頭像的標(biāo)簽樣式
1）對(duì)于高優(yōu)先級(jí)的提示，可以使用高亮的底色+反白的文字
2）對(duì)于其他情況，使用淺色背景，形式上做一些弱化
當(dāng)頭像帶有操作功能時(shí)，通常使用圓形按鈕或嵌套圖標(biāo)等組件來顯示即將進(jìn)行的操作。
1）將圖標(biāo)更改為符合用戶期望的結(jié)果
2）顏色的使用要合理，需要強(qiáng)調(diào)事件或動(dòng)作的含義
單邊文本
當(dāng)需要添加額外信息時(shí)，次要標(biāo)題可以和頭像一起使用。此功能在應(yīng)用欄、列表、表格中非常常用。
1）較大的標(biāo)題用于表示用戶的名稱
2）額外信息的文字是可選的（例如：狀態(tài)、職業(yè)、上次訪問、關(guān)注者數(shù)量等）
底部文本
對(duì)于整頁，可以使用更大的頭像，并將文本放在底部。這是應(yīng)用內(nèi)的常見模式，例如社交、個(gè)人資料、設(shè)置等。
事件
為了進(jìn)一步表明新用戶的事件，可以在頭像周圍添加一個(gè)描邊。還可以添加一個(gè)帶有標(biāo)記的計(jì)數(shù)器，這也將具有更強(qiáng)的設(shè)計(jì)提醒作用。
進(jìn)度
使用一個(gè)描邊線作為用戶成就的進(jìn)度，仍然非常流行和方便。
選擇
對(duì)于所選狀態(tài)，用戶最可靠的確認(rèn)方法之一是確認(rèn)圖標(biāo)和描邊的組合。
以下是所選狀態(tài)的典型變體的外觀：
帶一個(gè)按鈕
當(dāng)頭像被分組時(shí)，額外的行動(dòng)按鈕可以是一個(gè)可靠的選擇，讓用戶從那里知道某個(gè)操作。例如，“加號(hào)”按鈕將我們帶到一系列交互相關(guān)的選項(xiàng)（添加、編輯、排序等），這些選項(xiàng)可以對(duì)分組的頭像執(zhí)行。
標(biāo)記
數(shù)字標(biāo)記是展示隊(duì)列中剩余用戶數(shù)量的一個(gè)很好的解決方案。
帶有懸浮狀態(tài)的標(biāo)記
一個(gè)標(biāo)記最常見的模式之一，當(dāng)它被懸停時(shí)可以顯示用戶的附加信息，作為信息交互的擴(kuò)展。
具有懸停狀態(tài)的頭像
當(dāng)堆疊組中的頭像懸停時(shí)，顯示用戶全名的最佳方式是使用懸停組件。
頁面模板
在應(yīng)用或網(wǎng)站中使用頭像的最流行的方式是在頭部嵌入一個(gè)小的用戶圖片，或者在配置文件/設(shè)置部分嵌入較大的頭像。此時(shí)，用戶可以對(duì)圖片進(jìn)行編輯操作。
以上就是我所整理的關(guān)于頭像知識(shí)的所有內(nèi)容，希望看完這篇文章你可以更加全面的設(shè)計(jì)更好的頭像。
作者：彩云Sky 來源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
Hi，我是彩云。畫面平衡是一個(gè)很基本的設(shè)計(jì)理念，但很多朋友在平時(shí)的作品中容易忽視這個(gè)點(diǎn)。彩云在星球中幫不少朋友看過作品集，發(fā)現(xiàn)最多的問題之一就是畫面平衡沒做好，我覺得只要把這個(gè)基本問題解決了，作品就能提升一個(gè)檔次。
用戶本能地會(huì)對(duì)不平衡的設(shè)計(jì)感到厭煩，如何在畫面中創(chuàng)造一個(gè)有吸引力的平衡？是本篇文章要分享的內(nèi)容。
Illustration: Outcrowd
平衡是一個(gè)作品中最重要的元素之一。平衡中的對(duì)稱關(guān)系能夠創(chuàng)造平衡與和諧，這種平衡狀態(tài)直觀上能夠讓用戶感到舒適。
人體是垂直對(duì)稱的，我們的視覺接收也與之相對(duì)應(yīng)。我們喜歡物體在垂直軸上保持平衡，直覺上總是傾向于平衡一種力量與另一種力量。
Illustration: Outcrowd
在設(shè)計(jì)環(huán)境中，平衡是基于元素的視覺重量，而視覺重量是用戶對(duì)圖像的注意力范圍。如果畫面是平衡的，用戶會(huì)下意識(shí)地感到舒適。畫面平衡被認(rèn)為是其元素在視覺上的比例安排。
如何讓一個(gè)頁面看起來平衡？
最常見的平衡例子就是使用對(duì)稱。
在潛意識(shí)層面上，對(duì)稱的視覺能讓人愉悅，能讓畫面看起來和諧有條理。對(duì)稱的平衡是通過在水平或垂直的中軸兩側(cè)均勻放置元素來創(chuàng)造的。也就是說，畫面中間假想線的兩邊實(shí)際上是彼此的鏡像。有些人認(rèn)為對(duì)稱的平衡是無聊和可預(yù)測(cè)的，但它經(jīng)受住了時(shí)間的考驗(yàn)，到現(xiàn)在仍然是在頁面上創(chuàng)造舒適和穩(wěn)健感覺的最好方法之一。
Illustration: Outcrowd
兩側(cè)重量不相同的元素構(gòu)成具有不對(duì)稱平衡。
動(dòng)態(tài)平衡通常會(huì)比靜態(tài)平衡更有設(shè)計(jì)感，讓畫面不至于呆板。在缺乏平衡的情況下，我們的目光會(huì)條件反射性地開始尋找平衡點(diǎn)，這是一個(gè)很好的機(jī)會(huì)，可以將注意力吸引到頁面上可能還沒被注意到的部分。頁面重點(diǎn)就應(yīng)該放在這里——抓住用戶的注意力，就像產(chǎn)品的生命線一樣。
Landing page — Asian Cuisine
比如一般這樣去“配重”的元素會(huì)是一個(gè)按鈕或者標(biāo)題。
重要信息（或者是行動(dòng)按鈕）就是我們需要去配重的價(jià)值元素。
不對(duì)稱的現(xiàn)象越嚴(yán)重，用戶就越想找出其中的原因（檢查配重）。人們本能地比平時(shí)更仔細(xì)地研究這樣的畫面。然而，這里需要注意分寸，過于古怪的構(gòu)圖并不總是能被很好的感知。
Illustration: Outcrowd
平衡中的另一種類型，特點(diǎn)是視覺元素從一個(gè)共同的中心點(diǎn)放射出來。徑向平衡在設(shè)計(jì)中不常用。它的優(yōu)點(diǎn)是，注意力很容易找到并保持一個(gè)焦點(diǎn)——恰好就在它的中心，這通常是構(gòu)圖中最引人注目的部分。
這是一種平衡中的混亂，就像 Jackson Pollock的畫作一樣。這樣的組成沒有突出的焦點(diǎn)，所有的元素都有同樣的視覺重量。沒有層次，乍一看，畫面就像視覺噪音，但所有元素又相互匹配，形成一個(gè)連貫的整體。
（彩云注：這是一種比較高階的設(shè)計(jì)平衡處理手法，用的好可以讓畫面非常具有設(shè)計(jì)感，但把握不好的話，就會(huì)非常凌亂。所以，我們平時(shí)能看到很多大師的作品看似一些簡單圖形的使用，但就是好看，輪到自己設(shè)計(jì)的時(shí)候就會(huì)發(fā)現(xiàn)，越簡單的設(shè)計(jì)似乎越難設(shè)計(jì)好。）
Illustration: Outcrowd
當(dāng)談到構(gòu)圖中的重量平衡時(shí)，他們經(jīng)常將其與物理世界中的重量進(jìn)行比較：重力、杠桿、重量和支點(diǎn)。我們的大腦和眼睛感知平衡的方式非常類似于力學(xué)定律。我們很容易把一幅畫想象成一個(gè)在某一點(diǎn)上平衡的平面，就像一個(gè)天平。如果我們?cè)趫D像的邊緣添加一個(gè)元素，它就會(huì)失去平衡，有必要修復(fù)它。元素是否是一組色調(diào)、顏色還是點(diǎn)并不重要，目標(biāo)是找到圖像的視覺“重心”，即圖像的重心。
不幸的是，沒有精確的方法來確定一個(gè)物體的視覺質(zhì)量。一般來說，設(shè)計(jì)師依賴于他們的直覺。不過，下面這些有用的觀察可能會(huì)有所幫助:
大小
大的物體總是更重
形狀
不規(guī)則形狀比規(guī)則形狀的元素輕
顏色
暖色比冷色重
色調(diào)
深色物體比淺色物體重
圖案
帶有圖案的元素顯得更重
3D
帶有紋理貼圖的元素顯得更重
內(nèi)部復(fù)雜性
物體內(nèi)部越復(fù)雜，視覺重量更大
填充空間關(guān)系
正形空間比負(fù)形空間更重
對(duì)重量的感知
照片中的啞鈴看起來會(huì)比一只鋼筆更重
當(dāng)使用對(duì)稱時(shí)，作品看起來可以更加的專業(yè)和有科學(xué)性。其中，靜態(tài)對(duì)稱的作品顯得更加有專業(yè)精神和嚴(yán)肅的；而動(dòng)態(tài)對(duì)稱的設(shè)計(jì)方法則能吸引用戶的興趣，表達(dá)出個(gè)性和創(chuàng)造力，能讓用戶集中注意力。
作者：彩云Sky 來源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
圖標(biāo)是任何設(shè)計(jì)系統(tǒng)不可或缺的一部分。使用圖標(biāo)的主要原因是幫助用戶快速理解想法，實(shí)現(xiàn)快速導(dǎo)航，解決語言障礙，最終提升用戶體驗(yàn)。
圖標(biāo)作為一種設(shè)計(jì)工具，在UI/UX和平面設(shè)計(jì)師中最受歡迎。這些微小的設(shè)計(jì)元素對(duì)每個(gè)人來說都是簡單易懂的，這些特征賦予了它們通用數(shù)字語言的地位。
在這篇文章中，我整理了10個(gè)簡單又重要的技巧幫你設(shè)計(jì)出更專業(yè)的圖標(biāo)。
最小的圖標(biāo)大小通常是12 x 12px。以這個(gè)尺寸為基礎(chǔ)，行業(yè)標(biāo)準(zhǔn)中大多數(shù)其他尺寸只是通過將之前的尺寸翻倍而產(chǎn)生的。
重要提示：當(dāng)你設(shè)計(jì)圖標(biāo)時(shí)，重要的是要按100%顯示的比例去設(shè)計(jì)，使圖標(biāo)完美像素并放大像素塊查看準(zhǔn)確性。
完美像素圖標(biāo)在屏幕上能呈現(xiàn)尖銳和清晰的線條和形狀。如今，高分辨率顯示器和視網(wǎng)膜顯示器正變得越來越好，所以在不久的將來，對(duì)像素完美圖標(biāo)的需求可能會(huì)減少。但就目前而言，讓你的圖標(biāo)具有可伸縮性、響應(yīng)性和適配更多設(shè)備是非常重要的。
1) 像素網(wǎng)格對(duì)齊.
使直線部分完全清晰，并增加曲線和邊角的清晰度。（彩云注：盡可能的使線條實(shí)心）
2)完美角度
有角度的線更模糊。創(chuàng)建圖標(biāo)的最佳角度是45°，因?yàn)樾纬梢粋€(gè)角的像素彼此對(duì)稱。
3)邊緣清晰
直線必須占據(jù)其邊緣上最暗的4個(gè)像素。這樣線的邊緣看起來更清晰。
為了讓圖標(biāo)看起來整潔一致，重要的是要記住線條寬度和間隙大小。這條規(guī)則我認(rèn)為是必須遵循的:所有線條的寬度都是相同的。
理想情況下，線寬和間隙大小也應(yīng)該相等。
然而，有時(shí)候你必須打破這個(gè)規(guī)則。當(dāng)你需要解釋我們?cè)谌粘Ｉ钪忻鎸?duì)的一個(gè)具有非對(duì)稱模式的物體時(shí)，它就會(huì)發(fā)生。比如條形碼這個(gè)例子來說，我故意使圖標(biāo)內(nèi)的線寬和間隙大小不均勻，以表示條碼的特征。
在UI設(shè)計(jì)中，對(duì)象(包括圖標(biāo))的角半徑定義了項(xiàng)目的外觀和感覺。當(dāng)我們說到一個(gè)集合中的多個(gè)對(duì)象時(shí)，規(guī)則很簡單：在正方形和圓角之間進(jìn)行選擇，并對(duì)所有的圖標(biāo)應(yīng)用相同的屬性。
為什么它如此重要?一致性是UI/UX設(shè)計(jì)的關(guān)鍵原則。一個(gè)可用和用戶友好的設(shè)計(jì)總是提供一致的體驗(yàn)。在下面的例子中，你可以看到打破這個(gè)原則是如何影響視覺感知的。
在電腦上看起來完美對(duì)齊和平衡的東西，在你的眼睛看來可能并不一樣。
當(dāng)我們把大小相等的正方形和圓放在一起時(shí)，我們會(huì)有一種不對(duì)勁的感覺，圓似乎比正方形小。為了使我們的形狀在尺寸上看起來相同，我們應(yīng)該使圓更大(或減少正方形的尺寸)。
這個(gè)原則也適用于圖標(biāo)的設(shè)計(jì)和使用。有些圖標(biāo)的一側(cè)可能較重。試著調(diào)整它們一兩個(gè)點(diǎn)，直到整體對(duì)齊看起來正確。在下面的例子中，你可以看到突出顯示的圖標(biāo)看起來很大，盡管它與其他部分的大小相同。為了平衡這個(gè)集合，我們需要通過縮小圖標(biāo)的大小來調(diào)整突出顯示的圖標(biāo)。
（彩云注：這個(gè)原則很多人應(yīng)該都知道，但我發(fā)現(xiàn)也是在整套圖標(biāo)的設(shè)計(jì)中最容易出現(xiàn)的問題，當(dāng)把圖標(biāo)匯總在一起的時(shí)候，這個(gè)問題尤其需要重視。）
我們經(jīng)常在設(shè)計(jì)軟件中使用中心對(duì)齊，這種方法沒有錯(cuò)。但當(dāng)涉及到細(xì)節(jié)時(shí)，比如圖標(biāo)設(shè)計(jì)，我們需要相信自己的眼睛，打破數(shù)學(xué)法則，以增強(qiáng)元素的平衡。
讓我們以播放按鈕作為展示。這個(gè)例子很簡單，但非常能說明問題，因?yàn)樾螤钤讲粚?duì)稱，需要改進(jìn)的缺陷就越明顯。
我打賭你已經(jīng)猜到我們指的是KISS原則。這一原則背后的思想是，大多數(shù)系統(tǒng)在保持簡單的情況下工作得最好。用戶越容易理解某樣?xùn)|西并與之互動(dòng)，它就越具有通用性。
（彩云注：KISS原則是“Keep It Stupid Simple”或者“Keep It Simple, Stupid”的縮寫。篇幅有限，彩云幫大家找了一篇參考文獻(xiàn)https://www.jianshu.com/p/7d58b96d0185#comments ，感興趣的可以去學(xué)習(xí)下。）
它如何適用于圖標(biāo)設(shè)計(jì)?
1）別使用文字
文本和圖標(biāo)的綁定減少了圖標(biāo)的通用性。此外，小尺寸的文本是可讀性很差。如果一定要文本作為支持元素，使用工具提示和圖標(biāo)旁邊的標(biāo)簽。
2）不要過度設(shè)計(jì)
不必要的復(fù)雜性阻礙了合理的表達(dá)，應(yīng)該避免。過載的設(shè)計(jì)會(huì)將用戶體驗(yàn)變成一場(chǎng)噩夢(mèng)。
3）避免不必要的元素
只要確保每個(gè)圖標(biāo)在整體環(huán)境中是可理解和清晰的就行。（彩云注：比如已經(jīng)是在郵件客戶端中，就不需要再額外增加表示郵件的圖標(biāo)部分）
重要提示：在圖標(biāo)設(shè)計(jì)中合理地使用KISS原則，也不要把事情做得太簡單，否則會(huì)影響功能。一個(gè)優(yōu)秀的圖標(biāo)應(yīng)清晰易懂。
圖標(biāo)規(guī)范框架通常是指組合在一起的圓形、正方形、縱向和橫向矩形。它們創(chuàng)建了一個(gè)框架來設(shè)計(jì)圖標(biāo)。但是，這個(gè)規(guī)則非常靈活，只是作為參考，方便圖標(biāo)的設(shè)計(jì)在視覺上平衡。所以，如果你覺得你的圖標(biāo)不完全匹配這個(gè)框框，但看起來完全正確——相信你的眼睛！
框架是設(shè)計(jì)的“容器”?？蚣芤?guī)范了一個(gè)統(tǒng)一的范圍來設(shè)計(jì)圖標(biāo)，這背后有一些原因：
1) 大小
由于其幾何形狀，所有圖標(biāo)都具有不同的高度和寬度。為了在我們的設(shè)計(jì)中統(tǒng)一圖標(biāo)尺寸，我們應(yīng)該將它們放置在大小始終相同的框架中。
2)輸出
框架內(nèi)的圖標(biāo)與視覺中心對(duì)齊，這經(jīng)常被開發(fā)人員忽略，因?yàn)樗麄兘?jīng)常根據(jù)實(shí)際的中心來調(diào)整圖標(biāo)，而沒有注意到差異。這就是為什么用框架輸出圖標(biāo)是至關(guān)重要的，當(dāng)你按這個(gè)框架輸出圖標(biāo)時(shí)，能保證視覺設(shè)計(jì)時(shí)想要的視覺中心。
3)效率
如果使用Figma，可以通過創(chuàng)建組件來節(jié)省時(shí)間?？梢允褂脤?shí)例快速地將一個(gè)圖標(biāo)替換為另一個(gè)圖標(biāo)。
如果你要打算做圖標(biāo)資源庫的話。要想到當(dāng)設(shè)計(jì)師在庫中搜索圖標(biāo)時(shí)，會(huì)遇到哪些挑戰(zhàn)?他們的痛點(diǎn)是什么?他們的需求是什么?要回答這些問題，請(qǐng)?jiān)O(shè)身處地為用戶著想。
1）不要讓用戶思考
例如，如果他們不知道自己想要找到哪種花卉圖標(biāo)，那么就讓他們看到一系列選擇:鮮花項(xiàng)鏈，室內(nèi)花卉，植物商店等。
2）展示關(guān)聯(lián)圖標(biāo)
例如，如果用戶想在相同的主題或類別中找到圖標(biāo)，他們可以快速地檢查包含這個(gè)特定圖標(biāo)的完整集合。
3）使用標(biāo)簽
用戶可能很難找到合適的詞進(jìn)行搜索，或者可能希望看到所有類似的補(bǔ)充選項(xiàng)，從中選擇最合適的。例如，當(dāng)一個(gè)圖標(biāo)的實(shí)際名稱是“蘭花花瓣”，你仍然可以找到它與以下關(guān)鍵詞: #蘭花#花瓣#花瓣#花#裝飾#花#植物#花園#開花#植物#自然#熱帶#樹枝#美麗#植物#美麗#自然#葉子#優(yōu)雅#浪漫
最終應(yīng)該導(dǎo)出SVG或PNG格式？這是一個(gè)關(guān)鍵問題。讓我們來比較一下格式:
我個(gè)人的選擇是使用SVG圖標(biāo)，因?yàn)樗梢怨?jié)省很多時(shí)間。但是，一定要小心縮小復(fù)雜的形狀，并記住舊的瀏覽器可能不支持SVG格式。
到這里你應(yīng)該已經(jīng)學(xué)會(huì)了這10個(gè)圖標(biāo)設(shè)計(jì)要點(diǎn)，在你的圖標(biāo)設(shè)計(jì)中使用這些規(guī)則，相信會(huì)讓你的圖標(biāo)變得更加專業(yè)！
彩云注：圖標(biāo)設(shè)計(jì)是一個(gè)設(shè)計(jì)師的基礎(chǔ)能力，在彩云看過的無數(shù)份作品集中最普遍的問題也就是圖標(biāo)設(shè)計(jì)。今天這篇文章雖然非?；A(chǔ)，但千萬別小看它，用這10條技巧重新審視自己的圖標(biāo)作品，相信會(huì)有新的收獲！
作者：彩云Sky 來源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
Hi，我是彩云。界面是用戶在與任何產(chǎn)品、APP或平臺(tái)交互時(shí)看到的內(nèi)容，用戶體驗(yàn)就是建立在堅(jiān)實(shí)的界面設(shè)計(jì)基礎(chǔ)之上的。所以，如果你想要在UI設(shè)計(jì)上提升能力，應(yīng)該多去思考界面設(shè)計(jì)背后的原因。
今天會(huì)跟大家分享一些被廣泛運(yùn)用的界面設(shè)計(jì)規(guī)則，它們能快速使得你的界面設(shè)計(jì)更干凈、高效。
用更容易讓用戶理解（說人話）的引導(dǎo)文案，提升使用體驗(yàn)。
（彩云注：下面2個(gè)案例中，左側(cè)的“購物車”和“庫存2”太過于術(shù)語化，右側(cè)的“僅剩2”和“加入購物車”更加貼近用戶的日常理解。大家平時(shí)工作的時(shí)候，也一定要注意界面中的文案，尤其是說明文字，控件文字等等，這個(gè)點(diǎn)經(jīng)常容易被忽略。）
良好的對(duì)齊方式，可以增強(qiáng)內(nèi)容的可讀性，讓用戶的視線更容易掃描。
（彩云注：左側(cè)的“之”字形視動(dòng)線比較難閱讀，且不夠?qū)I(yè)；右側(cè)的垂直對(duì)齊增強(qiáng)了可讀性，也讓設(shè)計(jì)看起來更加統(tǒng)一，能夠快速的提升設(shè)計(jì)細(xì)節(jié)。）
使用圖標(biāo)、動(dòng)畫作為標(biāo)簽，有助于更輕松地理解內(nèi)容，它使界面看起來更加理性和豐富，能瞬間抓住用戶的眼球。
（彩云注：左側(cè)的導(dǎo)航相較于右邊，很難第一時(shí)間準(zhǔn)確識(shí)別它的意思，增加圖標(biāo)后不僅更快看清，視覺上也更加美觀。）
大段的長句會(huì)讓內(nèi)容變得難以閱讀。
為了獲得好的體驗(yàn)和UI，應(yīng)該注意拆分內(nèi)容，并使用項(xiàng)目符號(hào)突出關(guān)鍵點(diǎn)，利用拆分好的內(nèi)容塊讓用戶更快抓住重點(diǎn)。特別是在“功能說明和條款條件”或任何聲明時(shí)，提煉要點(diǎn)有助于提升用戶體驗(yàn)，這樣也不至于讓用戶直接忽略。
（彩云注：左側(cè)的大段文字我想應(yīng)該沒多少人會(huì)去閱讀，右邊的至少還能在短時(shí)間內(nèi)快速看看幾個(gè)關(guān)鍵詞。）
進(jìn)度條幫助用戶追蹤流程，它也能使查看上下步驟更加容易。線上購物，表單填寫，申請(qǐng)流程等場(chǎng)景使用這種格式能很好的簡化流程。
（彩云注：左邊的表單UI不方便跟蹤進(jìn)度和流程，右邊的表單把進(jìn)度放在頂部能幫助用戶清楚的知道流程進(jìn)度。）
錯(cuò)誤提示一定要明確，易于理解，方便用戶進(jìn)行下一步的操作。如果用戶不理解界面上出現(xiàn)的錯(cuò)誤，用戶就會(huì)感到很失望，可能會(huì)放棄接下來的流程。在UI設(shè)計(jì)時(shí)，在正確的地方用通俗的語言說明問題，以避免歧義，這一點(diǎn)非常重要。
（彩云注：我常常遇到各種出錯(cuò)，但出現(xiàn)的提示太過于術(shù)語化，也沒有提示在正確的地方讓我非常苦惱。）
從菲茨定律（Fitt's Law）中我們應(yīng)該知道，目標(biāo)區(qū)域的距離和外觀與所采取的行動(dòng)成正比。因此，為了將注意力集中在轉(zhuǎn)化按鈕上，按鈕應(yīng)該準(zhǔn)確放置在合理位置上。此外，按鈕的大小應(yīng)該易于點(diǎn)擊，避免用戶因嘗試點(diǎn)擊時(shí)不方便而流失。
（彩云注：左側(cè)的按鈕不在正確的決策位置以及按鈕太小，右側(cè)的按鈕簡潔明了并且符合用戶的心理預(yù)期，能夠讓用戶更快決策并點(diǎn)擊。）
顏色是UI中不可缺少的部分，它能影響用戶使用應(yīng)用時(shí)的情緒。正確地使用顏色將使UI看起來更加豐富合理。
（彩云注：左側(cè)的藍(lán)色按鈕顏色并不符合用戶對(duì)于刪除的心理預(yù)期，右側(cè)的紅色按鈕對(duì)用戶的心理預(yù)期有危險(xiǎn)和警告，用紅色代表刪除能夠讓用戶集中注意力關(guān)注這一特殊的操作。）
用單列展示內(nèi)容，能更好地幫助用戶掃描。當(dāng)你的應(yīng)用和網(wǎng)站上要展示大量信息時(shí)，將所有信息垂直對(duì)齊時(shí)，能更好的保持用戶關(guān)注度。
用戶準(zhǔn)備登錄或注冊(cè)你平臺(tái)的時(shí)候，把所有可用的社交媒體登錄盡量放在首位。這將避免用戶填寫表格時(shí)付出額外的認(rèn)知負(fù)擔(dān)和時(shí)間消耗而流失。首先使用社交媒體賬號(hào)，能很好地增加點(diǎn)擊率。
在用戶做選擇的時(shí)候，需要清晰地告訴用戶選中的到底是哪一個(gè)選項(xiàng)。模棱兩可的顏色會(huì)增加用戶的認(rèn)知負(fù)擔(dān)。更少的顏色和清晰的選中狀態(tài)能讓用戶獲得更好的體驗(yàn)。
（彩云注：左側(cè)的問題在于選中狀態(tài)不清晰且選項(xiàng)的顏色過于豐富，右側(cè)的選中狀態(tài)清晰且選項(xiàng)顏色只有2種，選中和非選中，體驗(yàn)會(huì)更好。）
如果想給信息分組，使用留白是最好的方式。加條線作為分組符號(hào)會(huì)在界面中增加了一個(gè)額外元素，空白能讓UI看起來更加干凈和優(yōu)雅。用線分組的情況適用于類似Twitter、Medium之類的重內(nèi)容平臺(tái)等場(chǎng)景。
保持設(shè)計(jì)的一致性，能夠降低功能復(fù)雜度并讓用戶更快決策，一致性設(shè)計(jì)讓用戶更快熟悉操作而不需要太多思考。
（彩云注：左側(cè)的選項(xiàng)圓角不一致，會(huì)讓用戶思考為什么這里會(huì)有不同，而右側(cè)的一致性選項(xiàng)設(shè)計(jì)，能讓用戶忽略內(nèi)容外的干擾。）
14. 搜索中的占位符要用好
在搜索輸入欄添加適當(dāng)?shù)恼嘉环?，提示用戶可以在平臺(tái)上搜索和找到的內(nèi)容，這樣可以提供用戶參考并帶來更好的用戶體驗(yàn)。
高飽和度的顏色能形成強(qiáng)烈的對(duì)比。在暗黑模式下使用高飽和度會(huì)很刺眼，給用戶很不好的體驗(yàn)。暗黑模式一般在晚上使用，因此對(duì)設(shè)計(jì)師來說，需要做的是讓整個(gè)配色相對(duì)柔和，讓用戶感到放松?；诖耍谠O(shè)計(jì)的時(shí)候應(yīng)該將飽和度限制在200-500之間。
(彩云注：這里的200-500彩云去查了不少資料，但沒有找到最好的答案，這里引用的是Material Design中的顏色規(guī)范，感興趣的同學(xué)可以自行查找)
在同一個(gè)界面，最理想的狀態(tài)是只有一個(gè)最主要的關(guān)鍵按鈕和緊跟著的次要按鈕。這是因?yàn)槿绻粋€(gè)界面上有太多這種行動(dòng)按鈕（CTA）按鈕，會(huì)讓關(guān)鍵操作淹沒在這些按鈕中，讓用戶不知所措。
17. 簡化不必要的動(dòng)詞
沒必要在菜單上增加動(dòng)詞和短語，用最少的信息寫清楚功能就足夠讓用戶理解了。所以，在菜單設(shè)計(jì)上要盡量避免增加無關(guān)緊要的詞，這樣才不會(huì)影響用戶體驗(yàn)。
你可能注意到，很少有表單的字體大小不平衡，字體之間的類別盡量少一些看起來會(huì)更加平衡。在決定字體大小時(shí)，盡量規(guī)范字號(hào)的標(biāo)準(zhǔn)。比如標(biāo)題（16px），副標(biāo)題（12px），正文（10px），說明文字（8px），這些尺寸都是以2為倍數(shù)的。
盡管我知道要做好圖標(biāo)一致性，但在實(shí)際工作中依然經(jīng)常犯錯(cuò)。很多設(shè)計(jì)師經(jīng)常用不同風(fēng)格的圖標(biāo)混在一起，這樣會(huì)讓整個(gè)UI界面的設(shè)計(jì)顯得很不成熟。圖標(biāo)是為了讓用戶更有效率地理解事物。在使用圖標(biāo)的時(shí)候一定要注意圖標(biāo)的一致性，尤其是一些是一些風(fēng)格細(xì)節(jié)。
這里也跟大家分享2個(gè)我自己常用的figma圖標(biāo)庫：
1)Unicorn (https://www.figma.com/community/file/931512007012650048)
2)Basil Icons (https://www.figma.com/community/file/931906394678748246)
通常情況下，我們會(huì)認(rèn)為一個(gè)顏色在深色模式和亮色模式下是用的同一個(gè)顏色值，但這其實(shí)是錯(cuò)誤的。一個(gè)顏色在亮色模式下看起來非常漂亮，但在深色模式看可能就太暗了，反之亦然。解決這個(gè)問題最好辦法是使用2套不同飽和度的顏色。
App的新手引導(dǎo)決定了用戶第一次體驗(yàn)產(chǎn)品時(shí)的感受。在設(shè)計(jì)的時(shí)候，試著公開需要哪些具體步驟，增加”跳過“和前后移動(dòng)查看的能力對(duì)新用戶來說非常重要。
許多網(wǎng)站和App都是用圖片驅(qū)動(dòng)的，但在圖片上直接增加文字內(nèi)容有時(shí)候會(huì)被淹沒掉。在圖片上增加一個(gè)疊加層可以提升內(nèi)容的可讀性。
23. 信息部分露出
對(duì)于一些大屏設(shè)備來說，像筆記本電腦，平板電腦和智能電視，它們都有非常多閑置的空間。對(duì)于這些閑置的空間來說，盡量通過設(shè)計(jì)告訴它底部還有更多內(nèi)容。這對(duì)UI和UX方面都有好處，因?yàn)榭臻g的使用方式能夠讓用戶清晰的知道所有內(nèi)容。
為了讓用戶聚焦閱讀，應(yīng)盡量避免使用大段的長/寬行。保持短句和簡潔能夠增加內(nèi)容的可讀性。
（彩云注：這點(diǎn)用在你的作品集里也是很合適的，有些人經(jīng)常使用大段的文字內(nèi)容來描述，很可能直接勸退面試官）
Z字形原理，也就是大眾所熟知的”古騰堡原理“，它描述了當(dāng)人們看到一個(gè)均勻分布元素的設(shè)計(jì)時(shí)，眼睛的總體運(yùn)動(dòng)情況。通過這個(gè)原理我們知道，用戶在內(nèi)容上的視線是沿著Z字形來閱讀的，所以遵循這一原理設(shè)計(jì)你想要核心表達(dá)的內(nèi)容。
擴(kuò)大點(diǎn)擊區(qū)域，維護(hù)像按鈕、單選、多選等控件的響應(yīng)尺寸，如果你設(shè)計(jì)的點(diǎn)擊區(qū)域太小會(huì)讓用戶點(diǎn)擊困難，造成流失。
避免使用花俏和俗氣的圖標(biāo)，它們會(huì)讓整個(gè)設(shè)計(jì)顯得非常不成熟，同時(shí)也是很難理解的。用上更簡單的圖標(biāo)形式，會(huì)讓界面更高級(jí)。
（彩云注：當(dāng)然越簡單的圖標(biāo)其實(shí)想畫出彩會(huì)更難，另外也需要區(qū)分不同的場(chǎng)景，像一些運(yùn)營類的圖標(biāo)可能會(huì)為了活動(dòng)氛圍做的相對(duì)風(fēng)格化一些。）
選錯(cuò)文案，會(huì)讓人們對(duì)于任務(wù)缺乏興趣，根據(jù)上下文使用更合適的詞組。
輕敲和點(diǎn)擊有時(shí)候很累人，可能不如使用滑動(dòng)、拖拽等手勢(shì)操作，這些操作會(huì)讓界面更簡潔并且也能順利地完成既定任務(wù)。
在探索酒店、目的地甚至是閱讀任何文章時(shí)，用戶經(jīng)常都需要點(diǎn)擊卡片。為了使得探索更加吸引人注目和干脆，避免使用長文本導(dǎo)致的滾動(dòng)。相反，可以加一個(gè)閱讀更多的按鈕方便想看全所有內(nèi)容的用戶。
”鄰近的物體往往被視為是同一組內(nèi)容“。有時(shí)候?yàn)榱税褍?nèi)容區(qū)分開的更清晰，嘗試用線對(duì)相關(guān)內(nèi)容進(jìn)行分組。
（彩云注：其實(shí)有留白和不同顏色做區(qū)分也是可以的，建議根據(jù)自己的設(shè)計(jì)風(fēng)格和具體內(nèi)容來定）
在設(shè)計(jì)控件時(shí)，如果可以用圖形可視化的地方就優(yōu)先嘗試把控件圖形化，除了非常需要很精確的設(shè)置參數(shù)。對(duì)于價(jià)格范圍這種，很容易將它可視化為滑塊控件。
對(duì)一些人來說容易理解的東西，對(duì)某些人來說可能不是。因此，最好使用示例占位符來解釋輸入字段，這可以防止用戶在填寫內(nèi)容時(shí)出錯(cuò)。
根據(jù)”系列位置效應(yīng)“，心理傾向于記住列表的第一項(xiàng)和最后一項(xiàng)，而不是中間項(xiàng)。因此，在任何App中設(shè)計(jì)導(dǎo)航時(shí)，根據(jù)應(yīng)用的上下文保持最左和最右的選項(xiàng)。例如instagram，最左邊是”首頁“，而最右邊是”用戶“。
（彩云注：這是一個(gè)心理學(xué)上的理論，人們對(duì)于一系列的材料更容易記住開頭的內(nèi)容，也叫做首因效應(yīng)或者首位效應(yīng)；更容易記住末尾的內(nèi)容，就叫近因效應(yīng)。）
在設(shè)計(jì)任何體驗(yàn)時(shí)，點(diǎn)擊次數(shù)都是非常重要的指標(biāo)。統(tǒng)計(jì)用戶需要點(diǎn)擊多少次才能完成他的目標(biāo)，額外的點(diǎn)擊會(huì)減慢整個(gè)操作過程。簡化過程，自然體驗(yàn)就會(huì)更好，所以盡可能的減少點(diǎn)擊次數(shù)。
（彩云注：下面的案例，增加可點(diǎn)擊符號(hào)也可以減少用戶思考的時(shí)間。）
為了使內(nèi)容突出，沒有必要使用多種字體類型，包括加粗、改色等等。只在最需要的位置使用增強(qiáng)的的文字層次結(jié)構(gòu)、字體重量，同時(shí)只使用一種字體足以吸引用戶對(duì)內(nèi)容的注意力。
留白在設(shè)計(jì)中非常重要，太少或者沒有留白會(huì)使得設(shè)計(jì)非?；靵y。明智地使用留白可以明確地強(qiáng)調(diào)內(nèi)容。
根據(jù)多爾蒂閾值(Doherty Threshold)這個(gè)理論：”系統(tǒng)需要在 400ms 內(nèi)對(duì)使用者的操作做出響應(yīng)，這樣才能夠讓使用者保持專注，并提高生產(chǎn)效率?！?。因此，我們可以使用動(dòng)畫、圖像甚至文本來保持用戶的注意力。（彩云注：給用戶的提示可以先快速加載信息框架，讓用戶有事可做，而不是什么都看不到）
作者：彩云Sky 來源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn