你可能認(rèn)為，搜索不就是一個(gè)矩形框+放大鏡圖標(biāo)再加一個(gè)占位符不就搞定了嗎？
經(jīng)過(guò)多年的設(shè)計(jì)工作頻繁設(shè)計(jì)搜索功能后，我發(fā)現(xiàn)在不同類型的產(chǎn)品中搜索框的交互方式、視覺(jué)樣式都有所不同，且用戶在搜索前、搜索中、搜索后都需要注意用戶在搜索各個(gè)流程中的可能操作，包括正向流程、反向流程。
搜索框的設(shè)計(jì)并不簡(jiǎn)單，很多的細(xì)節(jié)需要設(shè)計(jì)師去注意和思考的。下面總結(jié)一下我在設(shè)計(jì)搜索框的經(jīng)驗(yàn)，分享給大家。
友情提示：文章尾部有福利相送，不要錯(cuò)過(guò)~
搜索是用戶將查詢的信息輸入搜索器中，搜索引擎就會(huì)在約定的規(guī)則下將獲取到的信息反饋給用戶的過(guò)程。
搜索是B端產(chǎn)品中非常重要的一個(gè)功能模塊，通過(guò)搜索框用戶可以快速找到或者篩選出自己想要的內(nèi)容，在引導(dǎo)用戶走向方面起到了絕對(duì)性的作用。
體驗(yàn)設(shè)計(jì)中有個(gè)概念叫用戶分層，即便是同一個(gè)頁(yè)面，我們也需要去細(xì)分不同的場(chǎng)景對(duì)用戶做分層，為不同的用戶做設(shè)計(jì)，搜索功能就是最好的為有明確目標(biāo)的用戶分層的設(shè)計(jì)。
搜索功能的用戶分層可分為幾種場(chǎng)景：
搜索首先要確定哪幾個(gè)字段可以被搜索到，名稱？編號(hào)？等等...
有明確目的型用戶在進(jìn)行了搜索這個(gè)行為后，便生成了搜索歷史。因此，我們可以通過(guò)挖掘用戶搜索行為背后的目的，來(lái)分析為什么使用不同的布局。
模糊搜索使用的頻率居多，畢竟有時(shí)候用戶不一定可以精準(zhǔn)的記住想要搜索的準(zhǔn)確信息。不過(guò)也不是絕對(duì)的，兩者皆可選擇，可根據(jù)產(chǎn)品場(chǎng)景選擇。
搜索功能可以簡(jiǎn)單地輸入，快速輸出，只要幾個(gè)關(guān)鍵字就可以獲得符合用戶需求的內(nèi)容，將原有的用戶行為成本轉(zhuǎn)移給系統(tǒng)，從而讓使用體驗(yàn)更加快捷、輕松。
同時(shí)語(yǔ)音輸入和拍照搜索進(jìn)一步降低了用戶行為門檻。
搜索功能可以幫助用戶快速定位信息，從而提高了用戶對(duì)內(nèi)容的觸達(dá)效率。常見(jiàn)的例子就是：bi?r用戶有明確的購(gòu)物需求時(shí)，不需要一步步點(diǎn)擊商品分類，選擇商品類型、品牌等信息，就可以快速直達(dá)自己所需的商品。
所以，搜索框的體驗(yàn)如何，決定著B(niǎo)端產(chǎn)品解決問(wèn)題的能力、效率以及用戶的使用頻率。
好的搜索框一方面能幫助用戶節(jié)約時(shí)間成本，讓用戶在大量且復(fù)雜的信息中篩查所需目標(biāo)，提升用戶體驗(yàn)；另一方面，還能協(xié)助產(chǎn)品收集用戶行為目標(biāo)并做好數(shù)據(jù)埋點(diǎn)，為后期的更新迭代提供強(qiáng)有力的依據(jù)。
除了設(shè)計(jì)方式外，搜索還涉及到結(jié)果信息的數(shù)據(jù)匹配規(guī)則，受到算法精準(zhǔn)性、商業(yè)化干預(yù)程度的影響，設(shè)計(jì)師同樣需要關(guān)注搜索結(jié)果如何更好地匹配用戶的精確搜索、模糊搜索需求，以從信息設(shè)計(jì)層面提升用戶體驗(yàn)。
搜索流程，即搜索前、搜索中、搜索后的頁(yè)面跳轉(zhuǎn)以及搜索框形態(tài)的變化。
對(duì)應(yīng)的就有：搜索入口——搜索推薦頁(yè)——搜索聯(lián)想頁(yè)——搜索結(jié)果頁(yè)——搜索結(jié)果頁(yè)返回。
設(shè)計(jì)師想要設(shè)計(jì)流暢的搜索體驗(yàn)是無(wú)法避開(kāi)梳理搜索流程的，考慮完整的搜索鏈路和用戶關(guān)鍵體驗(yàn)路徑，并且設(shè)計(jì)出對(duì)應(yīng)的所有細(xì)節(jié)，將搜索功能的價(jià)值發(fā)揮到最大化。
對(duì)于搜索系統(tǒng)來(lái)說(shuō)，整個(gè)流程可以分為三步，分別是：
B 端業(yè)務(wù)中搜索使用的場(chǎng)景有兩類：一類是全局搜索，一類是頁(yè)面局部搜索（常見(jiàn)的有列表搜索、表單搜索）。
對(duì)于B端系統(tǒng)中模塊分類較多，所涉及到的內(nèi)容比較全面的，一般會(huì)選擇全局搜索，全局搜索是通過(guò)關(guān)鍵詞匹配全局范圍內(nèi)的信息來(lái)搜索的。
優(yōu)勢(shì)：無(wú)學(xué)習(xí)門檻，用戶無(wú)需考慮內(nèi)容對(duì)應(yīng)的分類只需輸入關(guān)鍵詞；
劣勢(shì)：精準(zhǔn)度不夠高；搜索出來(lái)內(nèi)容泛；需用戶二次查找目標(biāo)內(nèi)容。
注意：設(shè)計(jì)全局搜索時(shí)要注意搜索后的結(jié)果展示邏輯，如果分類較多，界面還可以根據(jù)分類tab分別歸類不同。
tips：搜索功能在頁(yè)面中的重要程度及搜索范圍，決定了搜索的位置和樣式。
目前大部分網(wǎng)站在布局搜索框位置時(shí)，大致遵循以下幾個(gè)規(guī)則：頁(yè)面居中、頁(yè)面頂部居中、頁(yè)面頂部右邊、頁(yè)面頂部左邊
知乎的搜索入口位于頂部導(dǎo)航欄的顯著位置，引導(dǎo)用戶進(jìn)行搜索，并且搜索框內(nèi)的占位文字根據(jù)算法會(huì)間隔一段時(shí)間改變，引導(dǎo)用戶發(fā)現(xiàn)新的內(nèi)容，促進(jìn)用戶在知乎上的使用時(shí)長(zhǎng)。
最常見(jiàn)的搜索方式之一，將搜索以輸入框的形式居于頁(yè)面頂部（狀態(tài)欄或標(biāo)題欄下方），在視覺(jué)上非常醒目，用戶進(jìn)入應(yīng)用即能快速找到，很符合用戶的視覺(jué)瀏覽動(dòng)線，也是C端產(chǎn)品提高轉(zhuǎn)化率的流量入口。
形態(tài)相對(duì)比較簡(jiǎn)單，通常以“放大鏡”樣式的 icon 出現(xiàn)在界面右上角，視覺(jué)上不會(huì)過(guò)于突出，常用于搜索行為不是特別頻繁的場(chǎng)景，需點(diǎn)擊后才會(huì)跳轉(zhuǎn)至搜索框頁(yè)面。
Icon 搜索入口相較于上述提到的類型在視覺(jué)引導(dǎo)方面略遜一籌，相對(duì)弱化了搜索功能，但節(jié)省了更多的導(dǎo)航欄空間，呈現(xiàn)位置比較靈活，可單獨(dú)呈現(xiàn)、也可與其多個(gè)其他功能 icon 并列組合展示。
指的是在頁(yè)面中的某個(gè)模塊加入搜索的功能。
常見(jiàn)在數(shù)據(jù)列表頁(yè)面加入搜索的功能，搜索的目標(biāo)只在該模塊該內(nèi)容中進(jìn)行搜索，搜索的信息具有局限性，當(dāng)然也是更加準(zhǔn)確地搜索用戶想要的目標(biāo)信息。
下圖是一個(gè)美團(tuán)商家后臺(tái)的列表頁(yè)面，此頁(yè)面加入了搜索的功能。
另外，B端常見(jiàn)在表單頁(yè)面加入搜索的功能，搜索的目標(biāo)只在表單選擇內(nèi)中進(jìn)行搜索，搜索的信息同樣具有局限性，可以通過(guò)控制某個(gè)字段或者某幾個(gè)字段的信息來(lái)展開(kāi)搜索。
B端業(yè)務(wù)中復(fù)雜的場(chǎng)景中存在同一個(gè)頁(yè)面中有多個(gè)搜索入口（如上圖美團(tuán)），設(shè)計(jì)前需梳理清楚每一個(gè)搜索入口的交互邏輯，不同搜索入口覆蓋的搜索范圍、搜索過(guò)程、搜索結(jié)果是否一致，在占位文本上也需體現(xiàn)出該搜索入口的搜索內(nèi)容。
模糊搜索是用戶搜索意圖不明確時(shí)，將用戶的查詢與待檢索的內(nèi)容進(jìn)行模糊匹配。
模糊搜索無(wú)法精確理解用戶的查詢意圖，搜索結(jié)果可能有大批量用戶不想要的信息，使用模糊搜索時(shí)一定要結(jié)合實(shí)際場(chǎng)景，慎重使用。
優(yōu)點(diǎn)：只要有相關(guān)的內(nèi)容都會(huì)被檢索出來(lái)，減少了精準(zhǔn)搜索帶來(lái)的記憶負(fù)擔(dān)；
缺點(diǎn)：容易把相關(guān)的信息也帶出來(lái)，例如檢索186，把相關(guān)號(hào)碼也匹配出來(lái)。
精確搜索是指用戶在搜索時(shí)，針對(duì)某一數(shù)據(jù)字段搜索，來(lái)查找所需要的數(shù)據(jù)。
根據(jù)業(yè)務(wù)場(chǎng)景不同，我們會(huì)查找某一字段，或者是用標(biāo)簽切換不同字段來(lái)查找。可以幫助用戶在巨大的信息池中縮小目標(biāo)范圍，快速而準(zhǔn)確的定位到目標(biāo)數(shù)據(jù)，并速獲取需要的信息。
優(yōu)點(diǎn)：搜索匹配精準(zhǔn)度高。
缺點(diǎn)：每次只能對(duì)單一條件進(jìn)行搜索。
總結(jié)：
我們可以根據(jù)產(chǎn)品的發(fā)展階段、需求側(cè)重、用戶的專業(yè)度和使用習(xí)慣來(lái)綜合決策使用哪一種方式更合適。如果側(cè)重查詢效率且用戶是有專業(yè)門檻的使用者時(shí)，可以優(yōu)先考慮精確搜索；如果側(cè)重查詢結(jié)果的豐富度，可以優(yōu)先考慮模糊搜索。
基于搜索欄的表現(xiàn)形式，可以分為以下四種類型：?jiǎn)螌傩运阉?、切換屬性搜索、多屬性模糊搜索以及多屬性組合搜索。
類型之間沒(méi)有優(yōu)劣之分，根據(jù)業(yè)務(wù)場(chǎng)景使用對(duì)應(yīng)的類型即可。
單屬性精確搜索：通過(guò)某個(gè)特定屬性就可以快速定位到目標(biāo)數(shù)據(jù)，具有唯一識(shí)別性的、高使用頻率的、對(duì)用戶決策有意義的。
適用場(chǎng)景：表格單一數(shù)據(jù)信息特征突出，可以用此數(shù)據(jù)標(biāo)簽快速定位目標(biāo)數(shù)據(jù)。
切換屬性搜索也被稱為定向搜索，是由用戶主動(dòng)選定搜索范圍后再進(jìn)行搜索；
優(yōu)勢(shì)：搜索精準(zhǔn)度高。
劣勢(shì)：增加了部分用戶的學(xué)習(xí)成本及操作步驟。
適用于注重搜索結(jié)果的精準(zhǔn)性或展示產(chǎn)品搜索能力等場(chǎng)景，定向搜索適用的幾種場(chǎng)景：
a、產(chǎn)品數(shù)據(jù)量足夠大且重搜索功能，用戶對(duì)于搜索有明確目標(biāo)，定向可以幫助用戶提高搜索的精準(zhǔn)范圍和效率；
b、搜索時(shí)輸入的內(nèi)容無(wú)法通過(guò)同一套搜索交互方式和后臺(tái)計(jì)算邏輯承載；如單次搜索和批量搜索的輸入格式不同，搜索結(jié)果存在多樣性；
c、需外露產(chǎn)品亮點(diǎn)功能，有多個(gè)常用的搜索屬性，對(duì)于前置條件的數(shù)據(jù)計(jì)算能力和開(kāi)發(fā)成本更高。
明確并固定選項(xiàng)類別，降低用戶操作難度。下拉篩選適合的選項(xiàng)類別有限，不適合多類別、復(fù)雜維度的分類。
平鋪展示搜索條件內(nèi)容，每個(gè) Tab 標(biāo)簽代表一個(gè)篩選維度，操作便捷。Tab 標(biāo)簽的數(shù)量不宜過(guò)多。
B 端類產(chǎn)品數(shù)據(jù)量豐富，在實(shí)際使用時(shí)，簡(jiǎn)單的方式很難全面覆蓋到各個(gè)搜索場(chǎng)景，精準(zhǔn)定位搜索結(jié)果。所以通過(guò)多個(gè)篩選維度的結(jié)合，形成多屬性的組合搜索，能夠大幅提升搜索結(jié)果的準(zhǔn)確性。
B端系統(tǒng)還有一種比較常見(jiàn)的搜索類型，是在定向搜索的基礎(chǔ)上，進(jìn)一步豐富了搜索選項(xiàng)，比如指定搜索的時(shí)間范圍、數(shù)據(jù)類型等，設(shè)置的選項(xiàng)越詳細(xì)越能夠提升搜索結(jié)果的效果和準(zhǔn)確性。
在設(shè)計(jì)時(shí)需要注意，B 端系統(tǒng)用戶角色多，層次不同，所以更加需要注重搜索前的引導(dǎo)，針對(duì)搜索規(guī)則、搜索限制等，應(yīng)該適時(shí)的以簡(jiǎn)練易懂的語(yǔ)言提示。
多標(biāo)簽?zāi)：阉鳎罕砀穸鄠€(gè)數(shù)據(jù)都具有特征，往往業(yè)務(wù)要求對(duì)數(shù)據(jù)的精確度較高。
適用場(chǎng)景：業(yè)務(wù)類型多樣用戶可能記憶不精確且有多個(gè)數(shù)據(jù)特征，對(duì)搜索的便捷性要求高精確性要求低。
多屬性組合搜索：可以輸入多個(gè)字段進(jìn)行組合搜索（取并集），對(duì)空間的利用率高，適合更加復(fù)雜的列表內(nèi)容。
適用場(chǎng)景：綜合篩選項(xiàng)，對(duì)空間的利用率高，多標(biāo)簽組合搜索可以得到較為精準(zhǔn)的搜索結(jié)果。
聊了這么多搜索內(nèi)容，與設(shè)計(jì)師密切相關(guān)且對(duì)外輸出的首要就是搜索欄設(shè)計(jì)。
對(duì)于用戶來(lái)說(shuō)，搜索是為了解決用戶明確或者不明確的搜索需求，讓用戶能夠快速準(zhǔn)確搜到想搜的內(nèi)容。設(shè)計(jì)欄設(shè)計(jì)的目的就是，讓搜索能夠提高用戶獲取信息、內(nèi)容的效率。
常見(jiàn)搜索框設(shè)計(jì)樣式
1、填充色：通常選用與頁(yè)面背景顏色反差較大的顏色作為搜索框的填充色，方便用戶查找。
2、線框：多用于干凈簡(jiǎn)潔的背景頁(yè)面。
3、投影：常用于風(fēng)格簡(jiǎn)潔輕量的風(fēng)格頁(yè)面，同時(shí)搜索功能級(jí)別較高的場(chǎng)景。
4、透明度：常用于背景色復(fù)雜的場(chǎng)景，目的是為不破壞背景頁(yè)面的整體效果，在視覺(jué)上更和諧。 無(wú)外框：用于風(fēng)格簡(jiǎn)潔的大留白的頁(yè)面。
完整的搜索流程包含了各種細(xì)節(jié)：例如搜索欄的形式、光標(biāo)停留、輸入狀態(tài)、異常數(shù)據(jù)、搜索結(jié)果、二次篩選等等。整個(gè)過(guò)程包含很多交互的細(xì)節(jié)設(shè)計(jì)，下面從激活搜索欄、輸入反饋、觸發(fā)方式來(lái)展開(kāi)說(shuō)明。
搜索激活指用戶激活搜索框時(shí)出現(xiàn)的搜索下拉面板，B端業(yè)務(wù)中搜索激活內(nèi)容常見(jiàn)以下三種：
搜索記錄通常以標(biāo)簽或列表的形式顯示，以時(shí)間順序從新到舊排列，一般不會(huì)完全展示，可以滑動(dòng)查看更多，或者折疊展開(kāi)。
注意：搜索記錄會(huì)涉及對(duì)用戶行為的記錄，關(guān)系到用戶的搜索隱私，所以應(yīng)當(dāng)允許用戶手動(dòng)刪除。
在 PC 端產(chǎn)品具有頁(yè)面空間優(yōu)勢(shì)，用戶的搜索過(guò)程完全是通過(guò)搜索欄完成的。
搜索欄中會(huì)增加歷史搜索記錄，下方增加推薦關(guān)鍵詞，幫助用戶快速完成搜索。同時(shí)也可以喚醒用戶對(duì)某些商品的興趣和記憶，從而挖掘用戶潛在的搜索需求，這一點(diǎn)電商產(chǎn)品用得偏多。
在面板中展示“搜索歷史”和“最近瀏覽”，增加相關(guān)內(nèi)容曝光，去給用戶提供更多選擇以觸達(dá)目標(biāo)內(nèi)容，該交互形式通常出現(xiàn)在全局性搜索或多維度搜索功能中。
搜索發(fā)現(xiàn)是系統(tǒng)基于用戶的搜索記錄，依據(jù)算法向用戶展示的搜索關(guān)鍵詞推薦，但并不是必需模塊，可以基于產(chǎn)品定位進(jìn)行考量。常規(guī)的c端產(chǎn)品上用得多，B端產(chǎn)品用得少。
由于搜索發(fā)現(xiàn)也涉及用戶隱私，但應(yīng)用一般不會(huì)讓用戶直接刪除，所以應(yīng)當(dāng)允許用戶對(duì)搜索發(fā)現(xiàn)進(jìn)行隱藏，不然極其容易引起用戶的反感。淘寶、京東都有搜索發(fā)現(xiàn)，并且也允許用戶進(jìn)行關(guān)閉/顯示的操作。
熱門推薦是搜索推薦頁(yè)里面內(nèi)容推薦的總稱，可以演變成多種推薦形式，比如“熱搜推薦”、“推薦活動(dòng)”等，熱門搜索是應(yīng)用商業(yè)化的重要手段，許多應(yīng)用都有這種模塊，并且內(nèi)容形式多樣。
知乎的熱搜就是結(jié)合熱搜、時(shí)事熱點(diǎn)等進(jìn)行推薦。
搜索反饋指用戶輸入本文時(shí)未確認(rèn)搜索執(zhí)行的中間過(guò)程狀態(tài)。在B端場(chǎng)景下搜索反饋具備很強(qiáng)的引導(dǎo)作用給予用戶當(dāng)下的狀態(tài)提示；
是通過(guò)已輸入的關(guān)鍵詞來(lái)預(yù)測(cè)可以找到的搜索結(jié)果，為用戶創(chuàng)造更加便捷的體驗(yàn)。
搜索聯(lián)想承載的不止顯性的設(shè)計(jì)呈現(xiàn)，還有背后的算法邏輯；例如是否可以識(shí)別拼音、不同搜索方式呈現(xiàn)的聯(lián)想詞范圍，都需要提前確認(rèn)落地可行性后再統(tǒng)一定義相關(guān)交互規(guī)則，并在產(chǎn)品中的所有搜索場(chǎng)景中保持相同的交互邏輯。
用戶在搜索時(shí)輸入了錯(cuò)誤的詞匯，系統(tǒng)經(jīng)過(guò)判斷后會(huì)展示正確詞匯的搜索結(jié)果給用戶，并友好地告知用戶正確的搜索方式。特殊狀態(tài)包含無(wú)結(jié)果狀態(tài)、網(wǎng)絡(luò)不佳狀態(tài)等。
實(shí)時(shí)搜索+實(shí)時(shí)顯示；搜索只有一個(gè)文本輸入框，沒(méi)有按鈕可點(diǎn)擊，這樣的搜索交互是通過(guò)輸入關(guān)鍵詞后，系統(tǒng)自動(dòng)檢測(cè)所有內(nèi)容中符合關(guān)鍵詞的目標(biāo)信息，隨著關(guān)鍵詞的持續(xù)輸入，與之相匹配的結(jié)果會(huì)逐漸減少、直至找到目標(biāo)，類似自定義篩選功能。
這種交互一般對(duì)于數(shù)據(jù)信息比較少的情況下會(huì)比較友好，加載的速度更快，避免服務(wù)器的壓力太大、影響反饋效率，例如地址搜索、查找聯(lián)系人等。
關(guān)鍵詞輸入完成后，需要手動(dòng)點(diǎn)擊搜索按鈕向服務(wù)器發(fā)送指令才會(huì)得到相應(yīng)的搜索結(jié)果，這種方式適合大部分表格場(chǎng)景，更加適合B端產(chǎn)品復(fù)雜且龐大的數(shù)據(jù)場(chǎng)景。
搜索結(jié)果頁(yè)是用戶搜索的落腳點(diǎn)，在這個(gè)頁(yè)面，用戶會(huì)有目的性地瀏覽搜索結(jié)果。
搜索結(jié)果中隱含著搜索邏輯，全局搜索場(chǎng)景下多數(shù)為模糊搜索，即把與搜索關(guān)鍵詞詳盡的內(nèi)容頁(yè)反饋出來(lái)，匹配度低，需要花時(shí)間對(duì)結(jié)果二次篩選。
1. 快速瀏覽數(shù)據(jù)，并能夠準(zhǔn)確找到數(shù)據(jù)。
2. 需要經(jīng)常變換條件的組合迭代查詢數(shù)據(jù)，對(duì)查詢結(jié)果精準(zhǔn)定位。這就需要搜索結(jié)果后，不要清除用戶的查詢內(nèi)容。
3. 對(duì)數(shù)據(jù)進(jìn)行操作，如收藏、刪除、下載等。
不同的內(nèi)容需要不同的頁(yè)面布局來(lái)支撐的，b端場(chǎng)景中最常見(jiàn)的兩種布局，篩選上下布局和左右布局，當(dāng)然內(nèi)容部分又分列表布局和柵格布局。
1、凸顯關(guān)鍵信息：
為了便于用戶找到精準(zhǔn)高效的信息或者進(jìn)行便捷操作，在搜索聯(lián)想頁(yè)狀態(tài)時(shí)，當(dāng)用戶輸入的信息足夠清晰可預(yù)測(cè)，可以將關(guān)鍵信息凸顯呈現(xiàn)，以引起用戶的注意力，在進(jìn)入搜索結(jié)果頁(yè)之前就可以提升轉(zhuǎn)化的可能性。
此外，這種關(guān)鍵信息凸顯的形式，在搜索的商業(yè)轉(zhuǎn)化方面也有明顯的作用。
2、沒(méi)有結(jié)果，如何設(shè)計(jì)
搜索沒(méi)有結(jié)果會(huì)讓用戶感到非常沮喪的，尤其是當(dāng)用戶進(jìn)行了好幾次搜索之后，依然沒(méi)有結(jié)果，應(yīng)當(dāng)為他們提供有價(jià)值的替代品。
一般出現(xiàn)無(wú)結(jié)果的狀態(tài)有兩種情況：
a. 用戶輸入錯(cuò)誤，一般會(huì)提用戶正確的搜索方式，并且自動(dòng)幫助用戶糾錯(cuò)，
b.搜索結(jié)果無(wú)，這種情況一般設(shè)計(jì)會(huì)以空狀態(tài)提示用戶，采用友好的方式提醒用戶更換關(guān)鍵詞。
在使用中，搜索本身應(yīng)該是0思考成本的，否則就失去了索引的核心價(jià)值，基于此，總結(jié)一下5個(gè)設(shè)計(jì)注意點(diǎn)：
當(dāng)用戶輸入搜索文本，點(diǎn)擊搜索按鈕，就進(jìn)入了搜索結(jié)果頁(yè)流程，此時(shí)搜索框內(nèi)應(yīng)當(dāng)保留搜索文本，以便于用戶明確搜索的內(nèi)容（不要依賴用戶的記憶力），同時(shí)，也便于用戶再次編輯搜索文本。
考慮到輸入/清除的便捷性，應(yīng)用也應(yīng)當(dāng)提供一鍵清除按鈕，點(diǎn)擊一鍵清除搜索的文本，減少用戶的操作成本。
搜索項(xiàng)目不可避免的比較多時(shí)，可以進(jìn)行分類展示，降低尋找成本，常用的有兩種分類方式：
無(wú)效的自動(dòng)建議讓整個(gè)搜索體驗(yàn)降低，而精準(zhǔn)的自動(dòng)建議會(huì)讓整個(gè)體驗(yàn)好上許多，它會(huì)根據(jù)用戶用戶的輸入內(nèi)容（詞匯詞根和后臺(tái)數(shù)據(jù)）為用戶提供有用和精準(zhǔn)的輸入內(nèi)容建議，這有助于幫助用戶提高搜索過(guò)程的精準(zhǔn)度，提升整個(gè)搜索體驗(yàn)。
輸入錯(cuò)誤絕對(duì)是最常見(jiàn)的錯(cuò)誤，如果用戶錯(cuò)誤地輸入某個(gè)關(guān)鍵詞，而你的檢測(cè)到了，并且針對(duì)錯(cuò)誤提供更正之后的結(jié)果，這樣就成功的規(guī)避了因?yàn)殄e(cuò)誤的關(guān)鍵詞所導(dǎo)致的不良后果，用戶也不用再次進(jìn)行搜索了。
即使用戶熟知搜索引擎的全部功能，也需要借助大腦記憶來(lái)挑選關(guān)鍵詞，進(jìn)行搜索。
想要找出有意義的、可用的搜索關(guān)鍵詞搭配，用戶需要結(jié)合他們的搜索方向，最近的查詢，聯(lián)想相關(guān)的屬性和關(guān)鍵詞，使搜索體驗(yàn)更便捷流暢。
作者：三原設(shè)計(jì)社 來(lái)源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(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)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ì)公司。
看完本篇文章，你會(huì)學(xué)到以下內(nèi)容：
1、什么是詳情頁(yè)
2、詳情頁(yè)設(shè)計(jì)原則
3、詳情頁(yè)的構(gòu)成
4、詳情頁(yè)設(shè)計(jì)要點(diǎn)拆解
一、什么是詳情頁(yè)？
詳情頁(yè)向用戶展示一個(gè)對(duì)象的完整信息，主要用于信息瀏覽，允許對(duì)該對(duì)象發(fā)起編輯等操作。如電商的訂單詳情，OA的審批詳情等等。
二、詳情頁(yè)設(shè)計(jì)原則？
1、直接了當(dāng)
信息盡量平鋪展示，如沒(méi)有必要不要做隱藏折疊。
2、層次分明
按照接近原則，對(duì)信息分層分組展示，降低單個(gè)頁(yè)面內(nèi)信息復(fù)雜度。
3、化繁為簡(jiǎn)
減少?gòu)?fù)雜結(jié)構(gòu)的使用，盡量使用相似的結(jié)構(gòu)和模塊，降低結(jié)構(gòu)差異對(duì)用戶進(jìn)行干擾，讓用戶聚焦信息本身。
三、詳情頁(yè)構(gòu)成
詳情頁(yè)由標(biāo)題、標(biāo)簽頁(yè)、圖片、文字詳情、按鈕、可視化、列表、表格、篩選、數(shù)據(jù)統(tǒng)計(jì)、進(jìn)度軸、標(biāo)簽構(gòu)成
詳情頁(yè)的特點(diǎn)：1、內(nèi)容雜，什么元素/模塊都可能出現(xiàn)。2、布局多，布局沒(méi)有套路，核心是做好內(nèi)容分塊和視覺(jué)引導(dǎo)。3、差異大，頁(yè)面與頁(yè)面巨大差異
四、詳情頁(yè)設(shè)計(jì)要點(diǎn)拆解
1.容器
由內(nèi)容由少到多劃分為原位展開(kāi)、氣泡卡片、彈窗、抽屜、頁(yè)面。能優(yōu)先滿足內(nèi)容收納的同時(shí)，容易盡可能輕量。
2.布局
根據(jù)內(nèi)容從簡(jiǎn)單到復(fù)雜可分為基礎(chǔ)樣式、標(biāo)題分組、色塊/分割線/卡片分組、錨點(diǎn)定位/標(biāo)簽頁(yè)、自由布局。核心是做好內(nèi)容分區(qū)、視覺(jué)引導(dǎo)符合用戶操作習(xí)慣。
布局注意事項(xiàng)：把用戶最關(guān)心的內(nèi)容放在最顯眼的地方
3.交互操作
交互操作可分為編輯（原位/氣泡/彈窗/頁(yè)面），查看詳情（內(nèi)容不多的話可以少用頁(yè)面容器，減少套娃），業(yè)務(wù)操作（層級(jí)清晰，符合用戶操作習(xí)慣）。
一、導(dǎo)讀
1. 內(nèi)容結(jié)構(gòu)
小紅書(shū)的產(chǎn)品拆解包含七個(gè)部分，分別是導(dǎo)讀、產(chǎn)品畫(huà)像、內(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ì)師：通過(guò)對(duì)小紅書(shū)完整的產(chǎn)品拆解，了解小紅書(shū)的產(chǎn)品設(shè)計(jì)體系和細(xì)節(jié)，有助于更好理解自己所在公司的產(chǎn)品設(shè)計(jì)，其次可以全方位提升產(chǎn)品分析、競(jìng)品分析能力。
● 希望提升產(chǎn)品思維的UI/UX設(shè)計(jì)師：通過(guò)從產(chǎn)品層到體驗(yàn)層的拆解，幫助你跳出設(shè)計(jì)執(zhí)行層理解一個(gè)功能設(shè)計(jì)背后的價(jià)值和意義，提升產(chǎn)品設(shè)計(jì)思維。
● 準(zhǔn)備跳槽到小紅書(shū)的互聯(lián)網(wǎng)從業(yè)者：如果你有準(zhǔn)備去小紅書(shū)求職，這份產(chǎn)品拆解報(bào)告可以幫助你提前了解小紅書(shū)的產(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ì)，都可以通過(guò)這十個(gè)原則進(jìn)行指導(dǎo)設(shè)計(jì)。
● 設(shè)計(jì)基礎(chǔ)理論：包括常見(jiàn)的格式塔原理、費(fèi)茨定律、巴甫洛夫反應(yīng)、7±2效應(yīng)、席克定律等常見(jiàn)理論，用于診斷小紅書(shū)的交互及界面設(shè)計(jì)。
4. 閱讀建議
在閱讀本篇拆解的時(shí)候，建議一邊體驗(yàn)小紅書(shū)APP，一邊閱讀產(chǎn)品拆解報(bào)告，其次可預(yù)約我們的產(chǎn)品拆解解讀直播，收獲會(huì)更大。
二、產(chǎn)品畫(huà)像
在拆解小紅書(shū)APP之前，我們需要從以下8個(gè)維度去提煉小紅書(shū)的產(chǎn)品畫(huà)像，這樣才能理解小紅書(shū)的產(chǎn)品設(shè)計(jì)邏輯。
1. 行業(yè)發(fā)展
小紅書(shū)所在的行業(yè)屬于互聯(lián)網(wǎng)媒體內(nèi)容社區(qū)，是一個(gè)生活方式類內(nèi)容社區(qū)，同時(shí)小紅書(shū)結(jié)合了電商和社交媒體打造了新型的商業(yè)模式，是社交電商的開(kāi)拓者和領(lǐng)先者。我們從艾瑞咨詢的《中國(guó)互聯(lián)網(wǎng)媒體內(nèi)容社區(qū)模式發(fā)展研究報(bào)告》和《2019中國(guó)社交電商行業(yè)研究》兩份報(bào)告中獲取到以下數(shù)據(jù)：
● 隨著內(nèi)容社區(qū)的變現(xiàn)模式多元化發(fā)展，互聯(lián)網(wǎng)媒體的商業(yè)變現(xiàn)空間越來(lái)越大。艾瑞咨詢預(yù)計(jì)在2022年，中國(guó)網(wǎng)絡(luò)廣告市場(chǎng)規(guī)模將突破1.2萬(wàn)億元，網(wǎng)絡(luò)購(gòu)物市場(chǎng)交易規(guī)模在2022年將會(huì)達(dá)到13.9萬(wàn)億元。
● 傳統(tǒng)電商的紅利已盡，已經(jīng)進(jìn)入行業(yè)衰退期，用戶增速已持續(xù)放緩至20%甚至更低水平。而社交電商正在蓬勃發(fā)展，成為移動(dòng)端最主要的流量入口，使用頻次高、粘性強(qiáng)，流量?jī)r(jià)值極其豐富，行業(yè)交易規(guī)模在2021年就達(dá)到28646.3億元。
綜上所述，小紅書(shū)所在的行業(yè)具有廣闊的發(fā)展前景和潛力，而小紅書(shū)作為國(guó)內(nèi)最大的生活方式平臺(tái)和社交電商領(lǐng)先者，還有極大的空間去挖掘。其次隨著AIGC（AI Generated Content，是指利用人工智能技術(shù)來(lái)生成內(nèi)容）時(shí)代來(lái)臨，對(duì)過(guò)去以UGC為主的小紅書(shū)內(nèi)容創(chuàng)作平臺(tái)來(lái)說(shuō)，是新的機(jī)遇也是挑戰(zhàn)。
2. 競(jìng)爭(zhēng)形勢(shì)
在《中國(guó)互聯(lián)網(wǎng)媒體內(nèi)容社區(qū)模式發(fā)展研究報(bào)告》一文中，艾瑞咨詢梳理了互聯(lián)網(wǎng)媒體內(nèi)容社區(qū)生態(tài)圖譜。從圖譜看出，小紅書(shū)作為生活方式類內(nèi)容社區(qū)，并無(wú)直接競(jìng)爭(zhēng)對(duì)手，但存在諸多潛在競(jìng)爭(zhēng)對(duì)手，包括文娛類的微博、豆瓣、抖音、B站，還有消費(fèi)類「什么值得買」，知識(shí)類內(nèi)容社區(qū)知乎，旅行類內(nèi)容社區(qū)馬蜂窩、飛豬等。
從易觀千帆數(shù)據(jù)觀察，小紅書(shū)相比其他間接競(jìng)爭(zhēng)對(duì)手，除了抖音以月活躍用戶人數(shù)7.4億超出小紅書(shū)3倍以外，小紅書(shū)月活人數(shù)超2億排名第二，領(lǐng)先排名第三1.7億的嗶哩嗶哩，其他社區(qū)月活人數(shù)距離小紅書(shū)有一定差距。
不過(guò)就在年初，社交巨無(wú)霸微信的微信公眾號(hào)已經(jīng)推出小紅書(shū)式的筆記傳播形式，降低創(chuàng)作門檻，吸引大眾用戶UGC，這對(duì)于小紅書(shū)來(lái)說(shuō)，將會(huì)是一個(gè)潛在的挑戰(zhàn)。
3. 產(chǎn)品介紹
小紅書(shū)是一款集購(gòu)物、分享、社交于一體的手機(jī)APP。它的主要功能是幫助用戶分享生活中的美好瞬間和購(gòu)物心得，同時(shí)也為用戶提供了一種社交平臺(tái)。作為一個(gè)年輕人的生活方式平臺(tái)，小紅書(shū)以“Inspire Lives 分享和發(fā)現(xiàn)世界的精彩”為使命，用戶可以通過(guò)短視頻、圖文等形式記錄生活點(diǎn)滴，分享生活方式，并基于興趣形成互動(dòng)。
4. 商業(yè)模式
基于對(duì)小紅書(shū)的深入調(diào)研，再結(jié)合艾瑞咨詢《中國(guó)互聯(lián)網(wǎng)媒體內(nèi)容社區(qū)模式發(fā)展研究報(bào)告》，我們對(duì)小紅書(shū)的商業(yè)模式進(jìn)行了推導(dǎo)。
4.1 客戶細(xì)分
● C端：年輕用戶群體，以女性居多，生活在一二線城市，希望發(fā)現(xiàn)和購(gòu)買優(yōu)質(zhì)商品，喜歡分享自己的購(gòu)物心得和生活經(jīng)驗(yàn)，有較高的月支配消費(fèi)能力。
● B端：中高端品牌，品質(zhì)高、信譽(yù)好，期望通過(guò)小紅書(shū)獲取種子用戶、快速打造爆款以及和年輕用戶建立溝通的企業(yè)。
拓展閱讀
根據(jù)艾瑞咨詢的《中國(guó)互聯(lián)網(wǎng)媒體內(nèi)容社區(qū)模式發(fā)展研究報(bào)告》，挖掘到內(nèi)容社區(qū)已經(jīng)步入成熟階段，由B、C兩端朝著營(yíng)銷線、商品線、平臺(tái)線和內(nèi)容線衍生出多元商業(yè)模式。這個(gè)信息有助于接下來(lái)理解小紅書(shū)的產(chǎn)品體系。
4.2 價(jià)值主張
標(biāo)記我的生活
4.3 渠道通路
作為中國(guó)最大的生活方式分享社區(qū)，小紅書(shū)用戶基數(shù)大，用戶忠誠(chéng)度高，主要依靠用戶口碑分享，以及常規(guī)的廣告、搜索引擎等渠道進(jìn)行推廣和維護(hù)品牌形象。
4.4 客戶關(guān)系
面對(duì)社區(qū)博主和行業(yè)KOL，通過(guò)創(chuàng)作中心、蒲公英等平臺(tái)為博主鏈接優(yōu)質(zhì)廣告資源；面對(duì)企業(yè)客戶，通過(guò)商家課堂等方式指導(dǎo)開(kāi)店培育。
4.5 收入來(lái)源
根據(jù)《2021年小紅書(shū)內(nèi)容營(yíng)銷數(shù)據(jù)洞察白皮書(shū)》報(bào)告顯示，2021年小紅書(shū)的收入主要由廣告和電商兩部分組成，二者的份額占比分別為80%和20%。
4.6 核心資源
小紅書(shū)是中國(guó)最大的生活方式分享社區(qū)，用戶基數(shù)大，忠誠(chéng)度高，2021年已經(jīng)成功登陸港股市場(chǎng)，有充足的資金優(yōu)勢(shì)。
4.7 關(guān)鍵業(yè)務(wù)
面向C端，小紅書(shū)主要提供筆記發(fā)布、購(gòu)物、直播等核心功能；面向B端，提供蒲公英、薯?xiàng)l、聚光平臺(tái)等業(yè)務(wù)。
4.8 重要合作伙伴
● 各行業(yè)頭部KOL及MCN機(jī)構(gòu)，為平臺(tái)提供高質(zhì)內(nèi)容，官方同時(shí)提供流量?jī)A斜和扶持；
● 企業(yè)客戶，負(fù)責(zé)小紅書(shū)電商自營(yíng)平臺(tái)的生產(chǎn)鏈供給以及其他內(nèi)容合作。
4.9 成本結(jié)構(gòu)
作為一個(gè)互聯(lián)網(wǎng)科技公司，小紅書(shū)的成本結(jié)構(gòu)主要來(lái)自產(chǎn)品的研發(fā)投入和人力成本。
5. 用戶畫(huà)像
結(jié)合易觀千帆小紅書(shū)APP數(shù)據(jù)，我們對(duì)小紅書(shū)終端使用用戶人群提煉了以下用戶特征：
● 從用戶性別看，以女性居多，占比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ì)超過(guò)70%，購(gòu)買能力很強(qiáng)（官方數(shù)據(jù)為月支配可消費(fèi)費(fèi)用超過(guò)4000元）；
● 從地域分布看，新一線城市用戶最多，占比22.17%，其次為三線城市，占比20.93%，二線城市占比19.28%，其中廣州市最多，其次為北京和上海。
6. 信息結(jié)構(gòu)
通過(guò)對(duì)小紅書(shū)APP的信息結(jié)構(gòu)梳理，可以看出小紅書(shū)的功能結(jié)構(gòu)比較簡(jiǎn)單，菜單欄包含了首頁(yè)、視頻、發(fā)布、消息和用戶中心五個(gè)欄目。
● 首頁(yè)：以千人千面的信息流推薦為主，其中推薦、購(gòu)物和直播權(quán)重最高，也是小紅書(shū)的核心功能。
● 視頻：提供沉浸式的短視頻筆記體驗(yàn)，用戶可以不斷上拉下滑觀看視頻筆記；
● 發(fā)布：提供拍照、相冊(cè)、模版和直播發(fā)布功能，是用戶發(fā)布筆記的入口；
● 消息：提供系統(tǒng)公告以及消息通知，用戶聊天的窗口；
● 用戶中心：用戶的個(gè)人主頁(yè)，包含筆記、收藏和個(gè)人資料等功能。
7. 產(chǎn)品迭代記錄
根據(jù)七麥數(shù)據(jù)資料，小紅書(shū)的APP首個(gè)版本發(fā)布于2013年12月05日，截止到2023年4月3日，APP版本已經(jīng)更新至V7.82版本，近一年版本更新次數(shù)為98次，迭代頻率非常高。從十年前的「全世界的好東西」到今天的「標(biāo)記我的生活」，小紅書(shū)迎來(lái)自己的十周歲生日。
以下為小紅書(shū)版本重要迭代記錄：
● 2014年8月，發(fā)布V2.0版本，上線「商城」功能，支持用戶在小紅書(shū)下單購(gòu)買；
● 2015年11月，發(fā)布V4.0版本，產(chǎn)品全新升級(jí)，首頁(yè)根據(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月，小紅書(shū)APP月活躍用戶人數(shù)超過(guò)2.1億，注冊(cè)用戶在2019年就超過(guò)3億（來(lái)自官網(wǎng)），公司在2021年成功登陸港股市場(chǎng)。從以上資料數(shù)據(jù)看出，我們可以推導(dǎo)出小紅書(shū)APP已經(jīng)進(jìn)入產(chǎn)品生命周期的成熟期，當(dāng)下以及未來(lái)將會(huì)聚焦于商業(yè)變現(xiàn)和用戶留存。
9. 小結(jié)
通過(guò)以上數(shù)據(jù)信息，我們可以看出，作為一個(gè)誕生于2013年的移動(dòng)互聯(lián)網(wǎng)元老，小紅書(shū)從最初旨在打造一個(gè)海外購(gòu)物社交平臺(tái)到如今成為億萬(wàn)年輕人的生活方式社交平臺(tái)，他們的用戶非常年輕，以90后居多，月活躍用戶超過(guò)2億，它已經(jīng)成為國(guó)內(nèi)最大的生活方式分享平臺(tái)和社交電商平臺(tái)。
三、內(nèi)容服務(wù)
「內(nèi)容服務(wù)」是根據(jù)AARRR模型拆分，這個(gè)版塊的功能主要是實(shí)現(xiàn)用戶留存，包含首頁(yè)、視頻、筆記發(fā)布、消息、創(chuàng)作中心和專業(yè)號(hào)等功能。
1. 首頁(yè)
作為中國(guó)最大的生活方式分享社區(qū)，小紅書(shū)以UGC用戶生產(chǎn)內(nèi)容模式為主，內(nèi)容包含圖文、短視頻、語(yǔ)音等多種傳播形式，覆蓋了美妝、潮流、美食、科技、旅行、汽車、職場(chǎng)等眾多行業(yè)。
1.1 發(fā)現(xiàn)
「發(fā)現(xiàn)」作為小紅書(shū)的默認(rèn)首頁(yè)，平臺(tái)根據(jù)用戶的興趣、標(biāo)簽、瀏覽偏好內(nèi)容進(jìn)行個(gè)性化推薦（從產(chǎn)品迭代記錄查詢到小紅書(shū)早在2015年就開(kāi)啟了千人千面的個(gè)性化推薦）。從TAB欄可以看出小紅書(shū)的內(nèi)容覆蓋了美食、科技、旅行、汽車、職場(chǎng)等眾多行業(yè)，同時(shí)支持用戶根據(jù)自己興趣偏好自定義編輯。
1.1.1 內(nèi)容推薦邏輯
在研究小紅書(shū)「發(fā)現(xiàn)-推薦」推薦邏輯時(shí)候，筆者有點(diǎn)捉摸不透。因?yàn)槊恳淮嗡⑿峦扑]的內(nèi)容排序其實(shí)并不是單純的以點(diǎn)贊、發(fā)布時(shí)間、收藏?cái)?shù)為準(zhǔn)，更像是隨機(jī)展示，所以特意查詢了關(guān)于小紅書(shū)內(nèi)容推薦邏輯的文章。
筆者找到了人人都是產(chǎn)品經(jīng)理專欄作家江流的《小紅書(shū)的內(nèi)容營(yíng)銷邏輯》這篇文章，作者經(jīng)過(guò)大量的測(cè)試，推導(dǎo)了小紅書(shū)的內(nèi)容推薦營(yíng)銷邏輯：
● 「發(fā)現(xiàn)-推薦」頁(yè)占據(jù)了小紅書(shū)80%的流量；
● 小紅書(shū)內(nèi)容推薦的邏輯主要是三個(gè)：高打開(kāi)率，高互動(dòng)率，高搜索打開(kāi)率。
體驗(yàn)陷阱
當(dāng)我發(fā)現(xiàn)平臺(tái)給我推薦我討厭的內(nèi)容時(shí)候，我沒(méi)找到屏蔽按鈕，最后嘗試長(zhǎng)按圖片才彈出屏蔽彈窗。這個(gè)設(shè)計(jì)對(duì)新手不友好，違反尼爾森十大原則的人性化幫助原則，沒(méi)有提供清晰的提示，增加了學(xué)習(xí)成本。
1.2 關(guān)注
「關(guān)注」是為用戶提供自己關(guān)注好友的動(dòng)態(tài)展示，內(nèi)容設(shè)計(jì)比較簡(jiǎn)單。不過(guò)我對(duì)這個(gè)欄目的推薦機(jī)制感到不解，當(dāng)我刷新頁(yè)面的時(shí)候，內(nèi)容并不是根據(jù)時(shí)間先后順序展示，而是沒(méi)有規(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ū)、美食、出行等來(lái)設(shè)計(jì)，可以極大提升小紅書(shū)在本地生活場(chǎng)景中的打開(kāi)頻次。來(lái)小紅書(shū)，不僅可以標(biāo)記你的生活方式，還可以發(fā)現(xiàn)身邊更多有趣的生活方式。
1.4 搜索
「搜索」是小紅書(shū)流量分發(fā)的重要入口（占20%），不僅為用戶提供實(shí)時(shí)的社區(qū)熱門話題，更是小紅書(shū)的商業(yè)服務(wù)中的重要場(chǎng)景（提供搜索信息流、專區(qū)、火焰話題和搜索菜單等推廣方式）。
1.4.1 引導(dǎo)頁(yè)
「引導(dǎo)頁(yè)」由歷史記錄、猜你想搜和搜索發(fā)現(xiàn)組成，這個(gè)頁(yè)面主要承擔(dān)流量分發(fā)以及展示社區(qū)熱門話題，設(shè)計(jì)得比較簡(jiǎn)單。
迭代建議
可參考QQ音樂(lè)的搜索引導(dǎo)頁(yè)，根據(jù)話題內(nèi)容設(shè)計(jì)排行榜，把引導(dǎo)頁(yè)做得更豐富，提升用戶使用時(shí)長(zhǎng)。
1.4.2 結(jié)果頁(yè)
「結(jié)果頁(yè)」提供四個(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í)長(zhǎng)有非常大的幫助。
2.1 詳情頁(yè)
底部展示作者信息，可一鍵關(guān)注，提供喜歡、收藏、分享和評(píng)論功能。其次當(dāng)博主關(guān)聯(lián)粉絲群，還支持用戶快速入群，幫助博主引流。
3. 筆記發(fā)布
「筆記發(fā)布」作為小紅書(shū)社區(qū)最重要、最高頻的功能，向用戶提供了圖文和視頻兩種發(fā)布類型。為了降低用戶學(xué)習(xí)成本，提升產(chǎn)品的核心增長(zhǎng)指標(biāo)，小紅書(shū)提供了非常豐富、精美的設(shè)計(jì)模版，用戶一鍵使用，更換素材即可發(fā)布漂亮、精致、酷炫的筆記。
3.1 拍照
「拍照」是小紅書(shū)最基礎(chǔ)的筆記形式，主要通過(guò)拍照搭配音樂(lè)、文字的形式傳播，門檻低、操作簡(jiǎn)單，是社區(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 裝飾
● 頭部提供加入音樂(lè)功能，音樂(lè)庫(kù)包含歐美、運(yùn)動(dòng)、日韓等各種主流音樂(lè)類型。
● 底部提供圖文模版、視頻模版、商品（加入種草場(chǎng)景）、文字、帖子、濾鏡和調(diào)節(jié)功能，用戶可根據(jù)自己偏好加入裝飾元素。
3.1.1.3 發(fā)布
● 圖片加工裝飾好以后，用戶需要輸入筆記的標(biāo)題、介紹。
● 用戶可以加入標(biāo)簽（這是小紅書(shū)平臺(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 筆記詳情頁(yè)
● 筆記詳情頁(yè)的權(quán)重非常高，不過(guò)頁(yè)面內(nèi)容也比較簡(jiǎn)單。頭部展示用戶信息，可一鍵關(guān)注，右上角可點(diǎn)擊分享筆記。
● 筆記內(nèi)容由圖片（視頻）+標(biāo)題+文字內(nèi)容+標(biāo)簽構(gòu)成，其他用戶可對(duì)筆記進(jìn)行評(píng)論、點(diǎn)贊和收藏。
迭代建議
小紅書(shū)的筆記分享形式太過(guò)簡(jiǎn)單，可參考QQ音樂(lè)的分享功能，設(shè)計(jì)豐富、精致的個(gè)性化模版，比如音樂(lè)卡片、視頻卡片等，刺激用戶進(jìn)行分享，幫助平臺(tái)拉新引流。
3.2 拍視頻
「視頻」的發(fā)布流程和「拍照」相似，其次小紅書(shū)也提供了基礎(chǔ)的視頻剪輯功能，幫助用戶制作更優(yōu)質(zhì)的視頻，以及避免用戶流失到其他視頻剪輯軟件（微信視頻號(hào)就不支持視頻剪輯，這導(dǎo)致用戶會(huì)使用剪映這些第三方軟件）。
3.3 相冊(cè)
「相冊(cè)」和「拍照」的區(qū)別就是為用戶提供從本地上傳圖片，兩者的功能和流程一樣。
迭代建議
建議把「相冊(cè)」和「拍照」兩個(gè)功能合并，減少操作路勁，降低用戶操作成本。
3.4 模版
「模版」分為視頻和圖文，用戶可選擇好自己喜歡的模版進(jìn)行直接編輯發(fā)布。
4. 記錄日常
「記錄日常」的入口在首頁(yè)左上角，主要為用戶提供語(yǔ)音、打卡、日簽等形式的動(dòng)態(tài)發(fā)布。這個(gè)版塊的功能價(jià)值在拆解完以后，筆者認(rèn)為更多是滿足Z時(shí)代年輕用戶群體的興趣偏好，比如為情侶量身定制的咻咻，還有語(yǔ)音筆記等。其次這個(gè)版塊的筆記發(fā)布形式行動(dòng)成本比較低，更能吸引用戶參與發(fā)帖，是激活新用戶以及長(zhǎng)尾用戶的絕佳方式。
4.1 咻咻
「咻咻」是一個(gè)專門為年輕情侶用戶量身定制的功能，通過(guò)綁定TA的小紅書(shū)號(hào)，情侶之間就能及時(shí)分享有趣的筆記霸屏對(duì)方的屏幕。這個(gè)功能看上去設(shè)計(jì)得很有趣，和QQ音樂(lè)類產(chǎn)品的「一起聽(tīng)」相似，增強(qiáng)了即時(shí)的社交聊天元素，增加用戶時(shí)間和頻次。
體驗(yàn)陷阱
這個(gè)功能看上去很時(shí)髦，但是在體驗(yàn)下來(lái)以后發(fā)現(xiàn)很雞肋。當(dāng)我給另一個(gè)小紅書(shū)賬號(hào)發(fā)送咻咻的時(shí)候，系統(tǒng)沒(méi)有任何提示，消息中心也沒(méi)有。最后只能前往「咻咻」找到右上角的那個(gè)TA，我才發(fā)現(xiàn)原來(lái)消息推送到這里了。這樣的提醒設(shè)計(jì)，太失敗了。
4.2 語(yǔ)音
「語(yǔ)音」是向用戶提供語(yǔ)音筆記的功能，用戶可以錄制一段自己的想說(shuō)的話，選擇封面以后，輸入心情記錄，就可以發(fā)布。這個(gè)功能對(duì)于Z時(shí)代的用戶群體來(lái)說(shuō)非常受歡迎，極大提升用戶使用時(shí)間，筆者體驗(yàn)了上百條語(yǔ)音筆記，發(fā)現(xiàn)用戶主要通過(guò)語(yǔ)音筆記哼唱歌曲，是一種全新的聽(tīng)覺(jué)體驗(yàn)。
迭代建議
在「語(yǔ)音」詳情頁(yè)，我嘗試上滑瀏覽下一條，但最后發(fā)現(xiàn)需要左右滑動(dòng)才能切換，這個(gè)設(shè)計(jì)和用戶習(xí)慣不一致，建議改進(jìn)。其次在查看用戶「表態(tài)」內(nèi)容時(shí)，語(yǔ)音就暫停了，影響聽(tīng)覺(jué)體驗(yàn)。
4.3 日簽
「日簽」就是以發(fā)布筆記的形式進(jìn)行簽到，用戶可以選擇心情，上傳背景圖片（系統(tǒng)會(huì)自動(dòng)生成精美的圖片），然后輸入心情就可以發(fā)布。小紅書(shū)還為用戶提供「漂流瓶」功能，用戶可以選擇筆記塞入漂流瓶后，接收到漂流瓶的用戶可以給與回應(yīng)。
4.4 打卡
「打卡」和「日簽」相似，主要提升用戶使用產(chǎn)品的頻次和時(shí)間，小紅書(shū)為用戶提供各種主題的打卡，比如護(hù)膚打卡、練字打卡、考研打卡等，用戶選擇對(duì)應(yīng)的主題，上傳圖片以后，就可以發(fā)布。
4.5 文字
「文字」的功能非常簡(jiǎn)單，用戶只需輸入文字，然后選擇背景風(fēng)格，就可以生成文字筆記。
4.6 拍攝
「拍攝」的功能也非常簡(jiǎn)單，用戶拍攝一段視頻，就可以生成筆記，和一級(jí)菜單的「視頻筆記」不同，在這個(gè)欄目支持上傳本地圖片，體驗(yàn)更佳。
5. 消息
「消息」主要向用戶提供私信、群聊功能，其次可實(shí)時(shí)查詢筆記的點(diǎn)贊、收藏、關(guān)注動(dòng)態(tài)以及官方通知公告。
5.1 群聊
小紅書(shū)支持博主建立自己的粉絲群，功能比較基礎(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í)長(zhǎng)、觀眾來(lái)源、單篇筆記詳細(xì)數(shù)據(jù)以及粉絲畫(huà)像等內(nèi)容。這些數(shù)據(jù)可以幫助創(chuàng)作者及時(shí)調(diào)整運(yùn)營(yíng)策略，創(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)作者提供了小紅書(shū)內(nèi)容創(chuàng)作和內(nèi)容運(yùn)營(yíng)的各種主題課程，比如選題取材、粉絲運(yùn)營(yíng)等內(nèi)容，這些課程都是免費(fèi)的，創(chuàng)作者只要投入時(shí)間精力，都能有所回報(bào)。
6.4 筆記靈感
「筆記靈感」為創(chuàng)作者提供了小紅書(shū)熱門筆記的選題參考，比如時(shí)尚、戶外、春日等主題，通過(guò)這些爆款筆記，能給創(chuàng)作者提供更清晰、精準(zhǔn)的創(chuàng)作靈感，從而為社區(qū)輸出高質(zhì)量?jī)?nèi)容筆記。
7. 專業(yè)號(hào)
小紅書(shū)的專業(yè)號(hào)是面向更專業(yè)的知識(shí)創(chuàng)作者，為他們提供更專業(yè)的內(nèi)容、服務(wù)和功能，幫助他們獲得更多的曝光度、關(guān)注度，以及通過(guò)豐富的數(shù)據(jù)分析提供運(yùn)營(yíng)支持。
7.1 數(shù)據(jù)中心
相比「創(chuàng)作中心」，專業(yè)號(hào)的「數(shù)據(jù)中心」提供了更專業(yè)完善的數(shù)據(jù)分析，比如數(shù)據(jù)維度，可按根據(jù)交易、引導(dǎo)和互動(dòng)去查看，還有筆記觀眾分析，提供了更詳細(xì)的用戶特征，包含年齡分布、城市、用戶興趣等，以及個(gè)人主頁(yè)和店鋪的數(shù)據(jù)統(tǒng)計(jì)分析。
7.2 互動(dòng)工具
「互動(dòng)工具」包含店鋪管理（小紅書(shū)支持用戶開(kāi)通店鋪銷售商品，可以理解為淘寶用戶的淘寶店）、直播互動(dòng)、抽獎(jiǎng)工具和主頁(yè)裝修等功能，主要為創(chuàng)作者提供個(gè)人店鋪裝修和直播兩個(gè)場(chǎng)景的互動(dòng)營(yíng)銷。從功能體驗(yàn)看，這些工具設(shè)計(jì)得還比較單薄，還有很大優(yōu)化空間。
7.3 筆記工具
「筆記工具」包含發(fā)布商品筆記、商品筆記創(chuàng)作、商品筆記靈感和商品筆記熱榜四個(gè)功能。所謂商品筆記就是已經(jīng)開(kāi)通店鋪的用戶可以直接在筆記加入自己的商品，從而實(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)推廣（花錢購(gòu)買筆記流量券，讓更多用戶閱讀）；
● 內(nèi)容合作是小紅書(shū)面向?qū)I(yè)用戶打造的蒲公英平臺(tái)，通過(guò)招募優(yōu)質(zhì)博主，給與內(nèi)容變現(xiàn)指導(dǎo)和助推，幫助用戶在小紅書(shū)實(shí)現(xiàn)可觀的收益；
● 直播選品是為用戶提供直播帶貨功能，用戶可以加入適合的商品在直播間進(jìn)行銷售，最后獲取返傭。
7.5 熱門課程
「熱門課程」提供了小紅書(shū)賬號(hào)定位、筆記創(chuàng)作、商鋪運(yùn)營(yíng)等內(nèi)容的教程，幫助用戶快速熟悉小紅書(shū)的平臺(tái)內(nèi)容推薦極致以及用戶習(xí)慣偏好等。
8. 小結(jié)
從內(nèi)容服務(wù)版塊的設(shè)計(jì)拆解，我們可以看出：
● 小紅書(shū)作為一個(gè)生活方式分享社區(qū)平臺(tái)，所覆蓋的內(nèi)容已經(jīng)包含了汽車、職場(chǎng)、影視、文化、科技、體育、母嬰等行業(yè)。這說(shuō)明小紅書(shū)的用戶群體逐漸多元化發(fā)展，這點(diǎn)從用戶畫(huà)像的數(shù)據(jù)也可以看出，小紅書(shū)的男性用戶已經(jīng)快逼近30%，未來(lái)小紅書(shū)的用戶規(guī)模還有很大空間。
● 小紅書(shū)的筆記形式已經(jīng)越來(lái)越豐富，除了最傳統(tǒng)的圖文，未來(lái)短視頻或許是社區(qū)更流行的內(nèi)容形式（目前「視頻」欄目已經(jīng)調(diào)整為菜單欄第二位，權(quán)重非常高）。其次也為年輕用戶提供了時(shí)髦、流行、制作成本更低的咻咻、語(yǔ)音筆記發(fā)布功能，極大提升了用戶參與度。
● 在產(chǎn)品設(shè)計(jì)方面，個(gè)人認(rèn)為小紅書(shū)還有很多優(yōu)化的空間，目前整個(gè)APP的產(chǎn)品內(nèi)容不夠豐富，幾乎沒(méi)有創(chuàng)新點(diǎn)。
四、社區(qū)服務(wù)
「社區(qū)服務(wù)」是根據(jù)AARRR模型拆分，這個(gè)版塊的功能主要是實(shí)現(xiàn)商業(yè)變現(xiàn)，包含首購(gòu)物、直播和小紅卡會(huì)員。
1. 購(gòu)物
作為社交電商的先驅(qū)和領(lǐng)軍者之一，「購(gòu)物」是小紅書(shū)在C端變現(xiàn)的最重要方式。雖然被「視頻」頂替了菜單欄的位置，但在「購(gòu)物」頻道，可以看到小紅書(shū)的電商玩法，真是獨(dú)特又有趣。
1.1 潮流買手店
「潮流買手店」是為用戶提供當(dāng)下最流行的潮流服飾銷售，在這個(gè)頻道可以看到眾多的國(guó)內(nèi)外知名潮牌最新的產(chǎn)品。頁(yè)面內(nèi)容設(shè)計(jì)得比較簡(jiǎn)單，為用戶提供了潮流趨勢(shì)、新品發(fā)售和品牌專區(qū)的內(nèi)容，用戶可直接下單。
1.2 新趨勢(shì)
「新趨勢(shì)」是向用戶種草「正在流行的東西」，它的內(nèi)容結(jié)構(gòu)是平臺(tái)根據(jù)不同的主題結(jié)合社區(qū)筆記和商品來(lái)生成，比如海邊度假穿搭，平臺(tái)會(huì)把社區(qū)優(yōu)質(zhì)的筆記收錄，然后再關(guān)聯(lián)相關(guān)的商品，通過(guò)特定的場(chǎng)景和主題向用戶種草。相比傳統(tǒng)電商，這正是社交電商的魅力。
1.3 福利社
「福利社」小紅書(shū)官方直營(yíng)的高端電商品牌，上線于2014年12月，旨在為用戶提供全世界的好東西，目前已經(jīng)有超過(guò)20000+美妝商品。這個(gè)頻道主要包含新品日歷、先鋒品牌、熱門品牌和熱門分類四塊內(nèi)容，其次它的視覺(jué)風(fēng)格設(shè)計(jì)得非常精致，讓人有強(qiáng)烈的購(gòu)買欲望。
1.4 小綠洲
「小綠洲」的定位是一站式購(gòu)買戶外好物，旨在打造一個(gè)匯聚泛戶外生活方式穿搭、裝備用品的買手平臺(tái)。從頻道內(nèi)容看，包含露營(yíng)、都市運(yùn)動(dòng)、滑板和滑雪四個(gè)大類，在每個(gè)類目可查看相應(yīng)類目的商品分類、促銷商品、品牌精選等內(nèi)容。
1.5 寶藏好店
「寶藏好店」是向用戶推薦小紅書(shū)平臺(tái)的寶藏店鋪，內(nèi)容包含每日精選、生活玩家、美護(hù)大賞等欄目。
1.6 獨(dú)特設(shè)計(jì)
「獨(dú)特設(shè)計(jì)」這個(gè)頻道，是由小紅書(shū)官方以及業(yè)內(nèi)優(yōu)秀設(shè)計(jì)師、社區(qū)優(yōu)質(zhì)作者和時(shí)尚行業(yè)專家共同評(píng)審出來(lái)的獨(dú)特設(shè)計(jì)商品。用戶人群定位高端，滿足那些想要高品質(zhì)、高審美的用戶群體的需求——在小紅書(shū)，找到全世界的好東西。
2. 直播
直播是當(dāng)下最流行、最重要的運(yùn)營(yíng)手段。小紅書(shū)的直播版塊，設(shè)計(jì)了眾多豐富的互動(dòng)、營(yíng)銷工具，極大提升播主的運(yùn)營(yíng)效率。
2.1 發(fā)布直播
播主在點(diǎn)擊「發(fā)布」后，在底部切換到「直播」即可開(kāi)啟。
● 在頭部，用戶需要選擇直播方式，目前小紅書(shū)提供視頻、語(yǔ)音、手游和電腦（通過(guò)電腦直播）四種直播方式，然后填入基礎(chǔ)的直播信息比如直播主題、介紹，和上傳封面等。
● 在底部，用戶可以選擇美化、翻轉(zhuǎn)等效果，還可以添加帶貨商品、設(shè)置禮物打賞等功能。
2.2 直播間
2.2.1 互動(dòng)支持
小紅書(shū)為播主提供了PK、投票、直播預(yù)告、連麥、小紙條等多種互動(dòng)工具：
● PK：支持禮物PK和人氣PK兩種模式，播主可選擇隨機(jī)匹配和邀請(qǐng)指定主播，這個(gè)功能有助于提升直播的趣味性，播主連麥PK可相互提升用戶的活躍度。
● 投票：播主可實(shí)時(shí)發(fā)起投票，增強(qiáng)和粉絲之間的互動(dòng)，提升用戶活躍度。
● 群推送：當(dāng)播主發(fā)起直播后，可以一鍵把直播推送到小紅書(shū)的粉絲群，直接觸達(dá)用戶。
● 發(fā)紅包：播主購(gòu)買紅包后，可設(shè)置關(guān)注播主才能領(lǐng)取來(lái)快速漲粉。
● 抽獎(jiǎng)：播主可設(shè)置比如關(guān)注主播、分享直播、加入粉絲團(tuán)等參與條件，通過(guò)抽獎(jiǎng)的形式提升直播間的用戶活躍度。
2.2.2 直播工具
直播工具包含了數(shù)據(jù)看板、直播送禮、抽獎(jiǎng)等重要功能：
● 信息卡：播主可創(chuàng)建直播公告、推薦商品和模特信息三個(gè)卡片，幫助進(jìn)入直播間的用戶快速了解播主，提升用戶觀看時(shí)長(zhǎng)。
● 數(shù)據(jù)看板：通過(guò)這個(gè)頻道，可以查看當(dāng)前直播間的詳細(xì)數(shù)據(jù)，包括觀看人數(shù)、新增粉絲數(shù)、流量來(lái)源、送禮排行等，有效幫助播主提升運(yùn)營(yíng)效率。
2.2.3 商品管理
商品管理包含了直播閃拍，限時(shí)秒殺，直播優(yōu)惠券等功能，賦能播主直播帶貨。
● 直播閃拍：這個(gè)功能非常方便，播主可以拍照就能上傳商品，操作簡(jiǎn)單，行動(dòng)成本低可以快速幫助播主提升銷售轉(zhuǎn)化率。
● 限時(shí)秒殺：用戶可創(chuàng)建限時(shí)秒殺商品，通過(guò)直播講解吸引用戶購(gòu)買。
● 直播優(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ù)分析、開(kāi)播獎(jiǎng)勵(lì)和主播課程等內(nèi)容，主要幫助播主提升直播頻次和運(yùn)營(yíng)效率。其次對(duì)于粉絲基礎(chǔ)比較少的博主，還可以完成每日開(kāi)播任務(wù)領(lǐng)取平臺(tái)獎(jiǎng)勵(lì)，提升直播曝光。
3. 小紅卡會(huì)員
「小紅卡會(huì)員」是小紅書(shū)為用戶設(shè)計(jì)的會(huì)員專屬權(quán)益服務(wù)，定價(jià)199元每年，主要享受會(huì)員專享價(jià)、無(wú)門檻包郵、限時(shí)購(gòu)提前搶、專屬客服等權(quán)益。從這個(gè)版塊的內(nèi)容看，小紅卡會(huì)員設(shè)計(jì)得比較簡(jiǎn)單，權(quán)益不夠豐富，吸引力較低。
4. 小結(jié)
從社區(qū)服務(wù)版塊的設(shè)計(jì)拆解，我們可以看出：
● 小紅書(shū)在C端的變現(xiàn)方式比較單一。我覺(jué)得可以再豐富一點(diǎn)，除了傳統(tǒng)的社交電商，是否可以再可以參考騰訊系的產(chǎn)品設(shè)計(jì)一些個(gè)性化功能，增強(qiáng)產(chǎn)品的變現(xiàn)方式。
● 直播功能設(shè)計(jì)得非常用心。筆者過(guò)去主要通過(guò)微信的視頻號(hào)直播，在拆解完小紅書(shū)以后，我只能感慨小紅書(shū)直播的功能非常完善和人性化，特別在提升直播博主銷售轉(zhuǎn)化率的功能設(shè)計(jì)上，體驗(yàn)非常友好。
● 小紅卡會(huì)員可以重新設(shè)計(jì)。從目前的會(huì)員權(quán)益來(lái)看，這個(gè)功能設(shè)計(jì)得毫無(wú)亮點(diǎn)，不過(guò)由于沒(méi)有真實(shí)數(shù)據(jù)參考，僅代表我的一家之言。
五、企業(yè)服務(wù)
「企業(yè)服務(wù)」是根據(jù)格式塔原則拆分，這個(gè)版塊的功能主要是小紅書(shū)面向企業(yè)B端的商業(yè)服務(wù)，包含商家店鋪和品牌營(yíng)銷兩塊內(nèi)容。作為國(guó)內(nèi)最大的生活方式平臺(tái)，根據(jù)《小紅書(shū)商業(yè)化營(yíng)銷通案》報(bào)告，小紅書(shū)不僅月活超2億，而且用戶群體月均可支配消費(fèi)支出4.1K，超過(guò)81%的用戶在小紅書(shū)瀏覽完內(nèi)容以后產(chǎn)生了購(gòu)買欲望。所以小紅書(shū)是好產(chǎn)品長(zhǎng)出來(lái)的絕佳土壤，也成了商家品牌營(yíng)銷的必爭(zhēng)之地。
1. 商家店鋪
小紅書(shū)的店鋪面向個(gè)人和企業(yè)招募，用戶只需要按照條件申請(qǐng)都能通過(guò)。這就像十年前人人都可以擁有一個(gè)淘寶店一樣，通過(guò)輸出有趣的筆記就可以進(jìn)行種草轉(zhuǎn)化。
1.1 店鋪管理
1.1.1 PC管理后臺(tái)
小紅書(shū)的商鋪管理平臺(tái)主要幫助商家實(shí)現(xiàn)對(duì)店鋪的管理和通過(guò)數(shù)據(jù)分析提供運(yùn)營(yíng)支撐，主要包含以下重要功能：
● 商品：主要為商家提供商品的上下架功能，其次還提供商品一鍵搬家、組合商品銷售等功能。
● 數(shù)據(jù)：這個(gè)頻道內(nèi)容設(shè)計(jì)得很豐富，提供店鋪流量、商品、筆記、直播和店鋪等內(nèi)容的數(shù)據(jù)分析，通過(guò)多維度的數(shù)據(jù)，幫助商家提升店鋪運(yùn)營(yíng)效率。
● 筆記：提供商業(yè)筆記的管理、創(chuàng)作和創(chuàng)作靈感，幫助商家創(chuàng)作更好的種草筆記。
● 營(yíng)銷：提供小紅書(shū)官方運(yùn)營(yíng)活動(dòng)的報(bào)名以及多種店鋪營(yíng)銷工具；
● 用戶：這個(gè)頻道為商家提供更精準(zhǔn)的用戶運(yùn)營(yíng)計(jì)劃，通過(guò)專業(yè)完善的數(shù)據(jù)洞察店鋪的用戶行為，提升銷售轉(zhuǎn)化率。
1.1.2 APP客戶端
為了給商家提供更友好運(yùn)營(yíng)管理體驗(yàn)，小紅書(shū)也為商家單獨(dú)開(kāi)發(fā)了小紅書(shū)商家版。通過(guò)APP就可以實(shí)現(xiàn)對(duì)店鋪的數(shù)據(jù)化管理，非常友好。
1.2 商家課堂
「商家課堂」是為小紅書(shū)商家提供的一站式學(xué)習(xí)平臺(tái)，目的是幫助商家快速、系統(tǒng)學(xué)習(xí)小紅書(shū)店鋪運(yùn)營(yíng)，提升店鋪運(yùn)營(yíng)效率。
1.2.1 成長(zhǎng)地圖
小紅書(shū)商家成長(zhǎng)地圖提供了一站式課程體系，包括新手必學(xué)、成長(zhǎng)進(jìn)階和瓶頸突破三塊內(nèi)容。其次這個(gè)欄目有一個(gè)非常亮眼的功能，那就是支持商家設(shè)計(jì)系統(tǒng)學(xué)習(xí)計(jì)劃，可設(shè)置系統(tǒng)提醒時(shí)間和學(xué)習(xí)頻次，非常友好。
1.2.2 課程中心
「課程中心」相比成長(zhǎng)地圖，提供了更詳細(xì)、完整的直播以及錄播課程內(nèi)容學(xué)習(xí)，比如開(kāi)店入駐、店鋪基礎(chǔ)、財(cái)務(wù)結(jié)算這些偏店鋪管理操作的技能學(xué)習(xí)。從這個(gè)頻道可以看出，小紅書(shū)商家店鋪運(yùn)營(yíng)方面，投入了很大的精力，打造了非常專業(yè)、完善的學(xué)習(xí)系統(tǒng)。
迭代建議
小紅書(shū)在商家運(yùn)營(yíng)指導(dǎo)投入的精力超出我的想象，個(gè)人覺(jué)得小紅書(shū)可以參考像知識(shí)付費(fèi)SaaS服務(wù)商小鵝通的訓(xùn)練營(yíng)模式，把店鋪運(yùn)營(yíng)學(xué)習(xí)打造成一個(gè)動(dòng)態(tài)的學(xué)習(xí)課程，這樣不僅可以加深和用戶的鏈接，為商家提供專業(yè)、有價(jià)值的課程，還能拓展商業(yè)變現(xiàn)的方式。
1.2.3 服務(wù)市場(chǎng)
「服務(wù)市場(chǎng)」是小紅書(shū)為商家遴選的第三方優(yōu)秀合作伙伴，包含商品管理、訂單管理、企業(yè)管理、直播管理和內(nèi)容管理五大類，幫助商家更智能化運(yùn)營(yíng)店鋪，提升效率，比如有提供商品批量搬家上架的服務(wù)智淘分銷應(yīng)用，可以一鍵將1688商品上貨到小紅書(shū)店鋪等。
2. 品牌營(yíng)銷
小紅書(shū)商業(yè)產(chǎn)品體系非常豐富，有負(fù)責(zé)內(nèi)容生產(chǎn)的蒲公英平臺(tái)，有負(fù)責(zé)流量+轉(zhuǎn)化的聚光平臺(tái)、薯?xiàng)l和品牌廣告。本文不過(guò)多分析，如有興趣可閱讀《小紅書(shū)商業(yè)化營(yíng)銷通案》報(bào)告。
2.1 蒲公英
「蒲公英」是小紅書(shū)官方優(yōu)質(zhì)創(chuàng)作者商業(yè)服務(wù)平臺(tái)，它覆蓋海量博主和多種匹配能力，提供定制、招募、共創(chuàng)多種內(nèi)容合作模式，全方位滿足品牌的內(nèi)容營(yíng)銷訴求。根據(jù)官網(wǎng)最新數(shù)據(jù)，目前已有累計(jì)10w+創(chuàng)作者、65000+海外企業(yè)商戶入駐。我們可以簡(jiǎn)單理解為蒲公英是小紅書(shū)初級(jí)的品牌營(yíng)銷平臺(tái)，只要你的的粉絲好過(guò)1000，你都能申請(qǐng)入駐，通過(guò)發(fā)布優(yōu)秀筆記種草賺錢。
2.2 薯?xiàng)l推廣
「薯?xiàng)l」是小紅書(shū)為內(nèi)容創(chuàng)作者和企業(yè)商家打造的自助式投放產(chǎn)品，可以有效地幫助內(nèi)容創(chuàng)作者擴(kuò)大內(nèi)容影響力，也能幫助企業(yè)商家通過(guò)更靈活高效的推廣方式提升營(yíng)銷效率。也就是當(dāng)博主或商家發(fā)布筆記以后，可以選擇薯?xiàng)l推廣進(jìn)行筆記推廣，它主要包含內(nèi)容加熱和營(yíng)銷推廣兩種形式。
2.3 聚光平臺(tái)
「聚光平臺(tái)」是小紅書(shū)營(yíng)銷全新上線的一站式廣告投放平臺(tái)，能夠滿足廣告主以“產(chǎn)品種草、商品銷量、客資收集、直播推廣、搶占賽道”為目標(biāo)的多樣化營(yíng)銷訴求。聚光平臺(tái)主要為企業(yè)客戶使用，通過(guò)小紅書(shū)全站營(yíng)銷的多種組合場(chǎng)景，幫助企業(yè)提升廣告投放回報(bào)率，高效觸達(dá)用戶。從官方文檔介紹，聚光平臺(tái)支持信息流、CPC點(diǎn)擊等多種形式，靈活高效。
3. 小結(jié)
從企業(yè)服務(wù)版塊的設(shè)計(jì)拆解，我們可以看出：
● 小紅書(shū)未來(lái)在B端的業(yè)務(wù)線會(huì)越來(lái)越深，也許很快人人都會(huì)擁有一個(gè)小紅書(shū)店鋪，一邊標(biāo)記生活方式，一邊向客戶種草。
● 小紅書(shū)為企業(yè)客戶提供的品牌營(yíng)銷體系非常完善，不僅有蒲公英、薯?xiàng)l、聚光等平臺(tái)，還獨(dú)創(chuàng)IDEA方法論，從洞察機(jī)會(huì)、定義策略、擊穿品類賽道再到沉淀品牌資產(chǎn)，都利用平臺(tái)自身強(qiáng)大的用戶資源滿足客戶的需求。
● 如果只是體驗(yàn)APP，我們無(wú)法獲知小紅書(shū)真正核心的產(chǎn)品體系，所以當(dāng)我們升維去拆解一個(gè)產(chǎn)品的時(shí)候，我們的收獲就會(huì)更大。
六、思考總結(jié)
通過(guò)以上部分對(duì)小紅書(shū)的全面體驗(yàn)和拆解，我們可以看出，小紅書(shū)作為國(guó)內(nèi)最大的生活方式平臺(tái)和社交電商開(kāi)拓者，產(chǎn)品設(shè)計(jì)其實(shí)也有諸多問(wèn)題，以下為我梳理的產(chǎn)品設(shè)計(jì)總結(jié)和建議：
1. 商業(yè)層
小紅書(shū)在C端的變現(xiàn)業(yè)務(wù)太單薄，僅有購(gòu)物、直播打賞和小紅卡會(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)足夠豐富，他們不缺盈利手段。其次我更喜歡小紅書(shū)過(guò)去的產(chǎn)品Slogan——發(fā)現(xiàn)全世界的好東西，這個(gè)口號(hào)簡(jiǎn)單、直接、朗朗上口，聽(tīng)一次就記得住。
2. 產(chǎn)品層
雖然已經(jīng)發(fā)展十年，近一年產(chǎn)品迭代版本次數(shù)高達(dá)98次（在我拆解過(guò)的產(chǎn)品中最高，12306平均年迭代次數(shù)為3次），但我認(rèn)為小紅書(shū)APP的內(nèi)容設(shè)計(jì)不夠創(chuàng)新，也不夠豐富。我在「內(nèi)容服務(wù)」版塊提了很多迭代建議，比如首頁(yè)的「本地」頻道可以把內(nèi)容再拆分得細(xì)致一些，讓用戶能找到更精準(zhǔn)的內(nèi)容。還有筆記的分享功能，只提供一張朋友圈長(zhǎng)圖海報(bào)生成方式，太淺陋了，不夠細(xì)致。
3. 體驗(yàn)層
如果從一個(gè)普通用戶去體驗(yàn)，小紅書(shū)APP產(chǎn)品體驗(yàn)非常流暢，操作簡(jiǎn)單、學(xué)習(xí)成本低，這和社區(qū)內(nèi)產(chǎn)品交互流程本身比較簡(jiǎn)單有關(guān)，幾乎沒(méi)有涉及復(fù)雜的業(yè)務(wù)流程。但從一個(gè)小紅書(shū)博主的角度去體驗(yàn)，我發(fā)現(xiàn)小紅書(shū)的創(chuàng)作平臺(tái)規(guī)劃非常亂。比如創(chuàng)作者中心、專業(yè)號(hào)中心、商家入駐中心、商家店鋪管理以及直播中心這些產(chǎn)品，邊界不清晰，入口也不明顯，需要反復(fù)來(lái)回查找才能找到入口（我甚至每個(gè)平臺(tái)的網(wǎng)址都單獨(dú)收藏，才能快速訪問(wèn)，否則我會(huì)在官網(wǎng)迷失很久）。
作者：設(shè)計(jì)大偵探 來(lái)源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(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)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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 來(lái)源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(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)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)增長(zhǎng)、打造品牌影響力，開(kāi)展年終回饋活動(dòng)；本次活動(dòng)通過(guò)拉新、促活、轉(zhuǎn)化等方式實(shí)現(xiàn)用戶和業(yè)務(wù)的增長(zhǎng)。
基于兔年和送福的節(jié)日習(xí)俗，采用了“福兔迎新”主題，并結(jié)合業(yè)務(wù)目標(biāo)，構(gòu)建活動(dòng)玩法。
在頁(yè)面交互上，需建立統(tǒng)一框架承載豐富的玩法，也要保證易用性和擴(kuò)展性。
為保證主頁(yè)進(jìn)出游戲的體驗(yàn)流暢，采用了統(tǒng)一的結(jié)構(gòu)框架。頂部標(biāo)題固定，中間模塊下移，露出游戲區(qū)域，再利用過(guò)渡動(dòng)效，保證無(wú)縫轉(zhuǎn)場(chǎng)的自然流暢。
3.1 標(biāo)題 &圖形設(shè)計(jì)
在標(biāo)題設(shè)計(jì)中，將“兔”耳造型融入字體設(shè)計(jì)中，與主視覺(jué)相呼應(yīng)，營(yíng)造濃郁的兔年氛圍。傾斜8度的字體，展現(xiàn)出我們對(duì)新年蓬勃向上的精神追求和快速高效的業(yè)務(wù)增長(zhǎng)速度。統(tǒng)一圓角處理和圓點(diǎn)元素延續(xù)了順豐logo的設(shè)計(jì)，更好地提升了親和力。
簡(jiǎn)潔的符號(hào)往往可以傳達(dá)強(qiáng)有力的情感，所以選取了兔年元素和中國(guó)傳統(tǒng)紋飾融入到此次活動(dòng)的代幣設(shè)計(jì)中。這些符號(hào)也延續(xù)使用在活動(dòng)頁(yè)的其他設(shè)計(jì)和頁(yè)面裝飾上。
3.2 IP形象設(shè)計(jì)
“福兔”作為本次活動(dòng)的IP卡通形象，將貫穿于活動(dòng)各場(chǎng)景。小游戲中福兔作為重要角色，親切可愛(ài)的造型配上鮮活豐富的表情不僅能引起用戶共鳴，流暢輕松的動(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)畫(huà)，用豐富多變的表情，可愛(ài)的肢體語(yǔ)言，融入到小游戲中，增強(qiáng)游戲過(guò)程趣味性和可玩性，提升沉浸感。
與開(kāi)發(fā)協(xié)作在動(dòng)效上使用了spine骨骼動(dòng)畫(huà)，通過(guò)控制骨骼，可以快速輸出各種動(dòng)作，減少了動(dòng)畫(huà)體積，提升頁(yè)面加載速度。
“福兔跳跳”小游戲，通過(guò)躲避“鞭炮”障礙物，跳躍收集“福氣值”、“獎(jiǎng)勵(lì)金”。同時(shí)設(shè)置難度不同的關(guān)卡，以提高游戲的挑戰(zhàn)性和可玩性。
3.3 場(chǎng)景設(shè)計(jì)
主頁(yè)場(chǎng)景跟隨節(jié)日以提升感知，通過(guò)換膚減少視覺(jué)疲勞。隨著節(jié)日變化，色彩和營(yíng)銷氛圍感也隨之增強(qiáng)。
為了增強(qiáng)游戲氛圍、新鮮感，提高游戲體驗(yàn)。小游戲與主頁(yè)同步進(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)的訪問(wèn)量、參與率及留存率，均表現(xiàn)不俗，達(dá)到預(yù)期目標(biāo)。未來(lái)我們會(huì)繼續(xù)在運(yùn)營(yíng)活動(dòng)的創(chuàng)新上探索更多有趣好玩的方向，豐富用戶體驗(yàn)，挖掘創(chuàng)新玩法。
我們下個(gè)活動(dòng)再見(jiàn)～
作者：SFUP_DESIGN 來(lái)源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(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)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ì)師的你，是否也遇到過(guò)這樣的問(wèn)題：
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ì)過(guò)程中，通過(guò)與其他核心角色一起共創(chuàng)，從明確共同目標(biāo)、共同決策、共創(chuàng)設(shè)計(jì)、共同評(píng)價(jià)，到最終共享設(shè)計(jì)成果過(guò)程。
一起來(lái)赴一場(chǎng)創(chuàng)新共贏的設(shè)計(jì)盛宴吧！
What-什么是設(shè)計(jì)共創(chuàng)
共創(chuàng)行為由來(lái)已久
共創(chuàng)模式并非現(xiàn)代社會(huì)的新生事物，其萌芽可追溯至人類文明早期，比如中國(guó)最早的詩(shī)歌總集《詩(shī)經(jīng)》、古希臘的《荷馬史詩(shī)·伊利亞特》等耳熟能詳?shù)奈膶W(xué)作品，都是在民間大眾共創(chuàng)基礎(chǔ)上再由作者整理完成的；還有《永樂(lè)大典》、《四庫(kù)全書(shū)》等大型文化工程著作，都是集體協(xié)作的結(jié)晶。共創(chuàng)行為在人類文化發(fā)展史的各個(gè)階段，我們都可見(jiàn)其蹤影。
設(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è)通過(guò)使用創(chuàng)造性和參與性的方法進(jìn)行設(shè)計(jì)的過(guò)程。在這個(gè)過(guò)程中，沒(méi)有一種放之四海而皆準(zhǔn)的方法。但是，有一系列的模式和原則可以與不同的人以不同的方式進(jìn)行應(yīng)用。協(xié)同設(shè)計(jì)是為了做出決策，而不僅僅是建議”
2.筆者對(duì)設(shè)計(jì)共創(chuàng)的理解
經(jīng)過(guò)在實(shí)際工作中的不斷實(shí)踐和應(yīng)用，用一句話來(lái)總結(jié)我對(duì)設(shè)計(jì)共創(chuàng)的理解：“邀請(qǐng)核心角色參與設(shè)計(jì)關(guān)鍵過(guò)程，共識(shí)問(wèn)題和目標(biāo)、了解設(shè)計(jì)思考過(guò)程并共同決策、共識(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è)人能力是有限的，通過(guò)卷入其他核心角色的參與，發(fā)揮各個(gè)角色優(yōu)勢(shì)，實(shí)現(xiàn)資源的優(yōu)勢(shì)整合，有效打破個(gè)人能力的邊界。
2.豐富視角維度：設(shè)計(jì)是一個(gè)不斷平衡的過(guò)程，了解并兼容更多信息才能使方案更加完備，然而設(shè)計(jì)的單一視角往往是具有局限性，設(shè)計(jì)共創(chuàng)可以幫我我們從多視角思考問(wèn)題，有效規(guī)避風(fēng)險(xiǎn)。
3.拓展價(jià)值廣度：項(xiàng)目的價(jià)值如果僅僅從設(shè)計(jì)角度進(jìn)行評(píng)估會(huì)顯得單薄，難以獲得其他角色的認(rèn)可。通過(guò)多角色共建評(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è)維度來(lái)評(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è)過(guò)程中作為被動(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-如何開(kāi)展設(shè)計(jì)共創(chuàng)
以《百度保障體驗(yàn)優(yōu)化項(xiàng)目》為例
注：百度保障項(xiàng)目主要服務(wù)于百度網(wǎng)民權(quán)益保障計(jì)劃，這是百度聯(lián)合國(guó)家司法部、消協(xié)推出的首個(gè)搜索引擎網(wǎng)民權(quán)益保障體系，其目的是為了更好的保障網(wǎng)民的合法權(quán)益，當(dāng)用戶在百度進(jìn)行搜索、購(gòu)物等行為時(shí)，遭到釣魚(yú)、欺詐、假冒官網(wǎng)并造成經(jīng)濟(jì)損失時(shí)，可以享有一定額度的保障金，屬于百度APP的特色功能。
從項(xiàng)目的相對(duì)設(shè)計(jì)成本、相對(duì)設(shè)計(jì)價(jià)值來(lái)看，百度保障體驗(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ì)的用戶卻都屬于高危用戶，然而之前的功能沒(méi)有經(jīng)過(guò)設(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)五步法》
接下來(lái)將結(jié)合《百度保障體驗(yàn)優(yōu)化項(xiàng)目》說(shuō)明設(shè)計(jì)共創(chuàng)的實(shí)踐路徑。
第一步：業(yè)務(wù)理解
1.項(xiàng)目背景摸底
產(chǎn)品最初的需求只有一句話“保障官網(wǎng)目前體驗(yàn)很差，很久沒(méi)有優(yōu)化過(guò)了，需要設(shè)計(jì)團(tuán)隊(duì)幫忙整體改版”，并在此基礎(chǔ)上提出一些非常稀碎的優(yōu)化點(diǎn)，缺乏關(guān)聯(lián)性和整體性。
設(shè)計(jì)側(cè)開(kāi)始通過(guò)定性、定量多種形式對(duì)業(yè)務(wù)進(jìn)行摸底，明確整體的業(yè)務(wù)邏輯以及保障官網(wǎng)所處的位置，并通過(guò)用戶反饋和用戶數(shù)據(jù)分析問(wèn)題，明確用戶的真實(shí)訴求。
2.理解業(yè)務(wù)價(jià)值
通過(guò)業(yè)務(wù)摸底，設(shè)計(jì)側(cè)將對(duì)業(yè)務(wù)價(jià)值、業(yè)務(wù)邏輯的整體理解梳理出來(lái)，并與產(chǎn)品確認(rèn)達(dá)成共識(shí)。
百度保障業(yè)務(wù)有三個(gè)重要的環(huán)節(jié)：保障官網(wǎng)、申請(qǐng)保障、保單管理。通過(guò)這三個(gè)環(huán)節(jié)建立起用戶端和商家端之間的聯(lián)系。其中，百度保障官網(wǎng)起著非常重要的信息傳達(dá)、用戶保障認(rèn)知建立的作用。
3.現(xiàn)狀問(wèn)題分析
百度保障官網(wǎng)作為重要的保障認(rèn)知傳達(dá)陣地，存在框架層級(jí)混亂、信息簡(jiǎn)陋缺乏針對(duì)性、傳達(dá)效率低等問(wèn)題。
第二步：共識(shí)目標(biāo)
通過(guò)多角色溝通，我們將官網(wǎng)改版的核心目標(biāo)確認(rèn)為“如何從BC雙視角重塑官網(wǎng)信息強(qiáng)化保障認(rèn)知，讓官網(wǎng)內(nèi)容更易理解”。
在共識(shí)目標(biāo)的過(guò)程中，設(shè)計(jì)側(cè)可以先基于共識(shí)的業(yè)務(wù)價(jià)值和問(wèn)題定一個(gè)初版目標(biāo)，然后拉其他核心角色一起討論，避免無(wú)目的低效率溝通，在基本共識(shí)點(diǎn)的基礎(chǔ)上更容易達(dá)成一致。
第三步：設(shè)計(jì)共創(chuàng)
基于共識(shí)目標(biāo)，設(shè)計(jì)側(cè)組織開(kāi)展多角色腦暴進(jìn)行設(shè)計(jì)方向共創(chuàng)和方案細(xì)節(jié)共創(chuàng)。
1.設(shè)計(jì)方向腦暴共創(chuàng)
①共創(chuàng)前-充分準(zhǔn)備有效的腦暴和共創(chuàng)過(guò)程需要組織者具備清晰的思路和明確的引導(dǎo)。在腦暴前我進(jìn)行了詳細(xì)的腦暴議程安排，并通過(guò)郵件和工作群的方式同步給參會(huì)同學(xué)，要求所有參會(huì)同學(xué)會(huì)議前完成閱讀，保證信息同步。
②共創(chuàng)中-把控節(jié)奏
共創(chuàng)過(guò)程中為了保障腦暴的質(zhì)量，我會(huì)要求全部參會(huì)同學(xué)關(guān)閉電腦聚焦在討論的目標(biāo)上，明確問(wèn)題和目標(biāo)→各自思考并用標(biāo)簽記錄想法→共同討論并在大白板上進(jìn)行整理分析→得出共識(shí)結(jié)論。
以C用戶官網(wǎng)優(yōu)化視角來(lái)舉例
我們?cè)诠沧R(shí)官網(wǎng)想要為C用戶營(yíng)造的感知是讓他們能【了解保障作用，建立信任感，知道如何申保】之后。從使用場(chǎng)景、用戶訴求、訴求滿足依次進(jìn)行腦暴共創(chuàng)：
1.核心場(chǎng)景：通過(guò)對(duì)業(yè)務(wù)的理解發(fā)散討論用戶什么場(chǎng)景下會(huì)來(lái)到保障官網(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ì)師我們可以通過(guò)提供哪些內(nèi)容來(lái)滿足用戶的訴求。同樣的，每個(gè)人寫下自己的想法后貼標(biāo)簽找共性，此次的內(nèi)容對(duì)于官網(wǎng)信息的呈現(xiàn)已經(jīng)起到很大的決定性作用，再此基礎(chǔ)上，我們一起投票決定信息的優(yōu)先級(jí)完成頁(yè)面內(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ā)散，并通過(guò)制作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è)頁(yè)面，減少后一個(gè)C用戶首頁(yè)+B商家二級(jí)頁(yè)，重點(diǎn)突出層級(jí)簡(jiǎn)單。
2.提高屏效：將原來(lái)的雙底bar合并，提高頁(yè)面展示屏效。
②共識(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用戶首頁(yè)增加9個(gè)內(nèi)容模塊，B商家頁(yè)增加4個(gè)內(nèi)容模塊，建立保障立體認(rèn)知。
2.內(nèi)容更聚焦：將C用戶頁(yè)作為首頁(yè)，去掉原首頁(yè)，B商家頁(yè)作為二級(jí)頁(yè)面，強(qiáng)化C視角更好的滿足核心用戶訴求。
3.信息更真實(shí)：C首屏信息通過(guò)展示申保&認(rèn)保的規(guī)模數(shù)據(jù)突出保障的安全感，B商家頁(yè)通過(guò)輪播申保動(dòng)態(tài)&增加真實(shí)案例方式營(yíng)造真實(shí)感。
完成方案后拉關(guān)鍵角色對(duì)齊共識(shí)，調(diào)整優(yōu)化細(xì)節(jié)，明確最終效果。
第四步：指標(biāo)拆解
在指標(biāo)拆解方面，根據(jù)HEART+GSM體驗(yàn)度量模型，完成定性+定量驗(yàn)證指標(biāo)的分析。
簡(jiǎn)單來(lái)說(shuō)，就是將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)是希望用戶愿意多來(lái)官網(wǎng)了解信息，不斷強(qiáng)化保障認(rèn)知，那么用戶所表現(xiàn)出來(lái)的行為信號(hào)是多次訪問(wèn)保障官網(wǎng)，對(duì)應(yīng)的度量指標(biāo)可以拆解為活躍用戶量、次日/三日/七日留存等等。
完成設(shè)計(jì)側(cè)指標(biāo)拆解后，與產(chǎn)品進(jìn)行討論，從產(chǎn)品視角給予補(bǔ)充完善，雙方達(dá)成共識(shí)后，一起完成定性評(píng)估問(wèn)卷和打點(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)入局，拉開(kāi)了保障體驗(yàn)全流程整優(yōu)化的帷幕。
在完成申保前-保障官網(wǎng)的整體優(yōu)化改版后并獲得極大成功后，我們趁熱打鐵，通過(guò)用戶體驗(yàn)地圖的方式完成保障中、后全流程的設(shè)計(jì)機(jī)會(huì)點(diǎn)分析，明確申保中、后設(shè)計(jì)目標(biāo)并完成具體設(shè)計(jì)提案，與產(chǎn)品共識(shí)后分期推動(dòng)落地，與官網(wǎng)優(yōu)化一樣，通過(guò)設(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)過(guò)程，它始于我們對(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 來(lái)源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(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)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ā)。
近年來(lái)，我?guī)缀趺刻於荚跒g覽數(shù)以萬(wàn)計(jì)的UI組件、界面、不同的網(wǎng)站和app，研究它們的結(jié)構(gòu)、布局和配色方式。我的目標(biāo)是創(chuàng)建一個(gè)全面的UI指南，設(shè)計(jì)應(yīng)用及其組件、模板等。
今天這部分講的就是關(guān)于用戶頭像的UI組件探索。用戶頭像是一個(gè)組件元素，用戶通過(guò)它來(lái)標(biāo)識(shí)自己。
基本上有以下三種類型可以用來(lái)代表用戶頭像
空狀態(tài)
名字的首字母
用戶照片或者圖片
根據(jù)具體使用場(chǎng)景的不同，你可以使用多樣化的顏色和尺寸:
1）為了更好的識(shí)別，不同用戶配色可以多樣化一些
2）頁(yè)眉、導(dǎo)航欄中一般用24-40dp寬度為主
3）40-48dp的頭像大小通常用在內(nèi)容塊或列表中
4）如果你想在更大的頁(yè)面中使用頭像，比如個(gè)人中心、設(shè)置中心等時(shí)，推薦使用56+dp
當(dāng)我們想通過(guò)用戶頭像通知某事或演示某種操作時(shí)，可以使用額外的UI元素；
1）指示燈標(biāo)識(shí)用戶是在線還是不在線
2）通過(guò)帶有編號(hào)的標(biāo)簽通知提供信息
3）可以在用戶頭像上增加額外的圖標(biāo)提供用戶行為操作
顯示用戶狀態(tài)的最常見(jiàn)做法是在頭像的右下角放置一個(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)等組件來(lái)顯示即將進(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è)、上次訪問(wèn)、關(guān)注者數(shù)量等）
底部文本
對(duì)于整頁(yè)，可以使用更大的頭像，并將文本放在底部。這是應(yīng)用內(nèi)的常見(jiàn)模式，例如社交、個(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)記最常見(jiàn)的模式之一，當(dāng)它被懸停時(shí)可以顯示用戶的附加信息，作為信息交互的擴(kuò)展。
具有懸停狀態(tài)的頭像
當(dāng)堆疊組中的頭像懸停時(shí)，顯示用戶全名的最佳方式是使用懸停組件。
頁(yè)面模板
在應(yīng)用或網(wǎng)站中使用頭像的最流行的方式是在頭部嵌入一個(gè)小的用戶圖片，或者在配置文件/設(shè)置部分嵌入較大的頭像。此時(shí)，用戶可以對(duì)圖片進(jìn)行編輯操作。
以上就是我所整理的關(guān)于頭像知識(shí)的所有內(nèi)容，希望看完這篇文章你可以更加全面的設(shè)計(jì)更好的頭像。
作者：彩云Sky 來(lái)源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(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)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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，我是彩云。畫(huà)面平衡是一個(gè)很基本的設(shè)計(jì)理念，但很多朋友在平時(shí)的作品中容易忽視這個(gè)點(diǎn)。彩云在星球中幫不少朋友看過(guò)作品集，發(fā)現(xiàn)最多的問(wèn)題之一就是畫(huà)面平衡沒(méi)做好，我覺(jué)得只要把這個(gè)基本問(wèn)題解決了，作品就能提升一個(gè)檔次。
用戶本能地會(huì)對(duì)不平衡的設(shè)計(jì)感到厭煩，如何在畫(huà)面中創(chuàng)造一個(gè)有吸引力的平衡？是本篇文章要分享的內(nèi)容。
Illustration: Outcrowd
平衡是一個(gè)作品中最重要的元素之一。平衡中的對(duì)稱關(guān)系能夠創(chuàng)造平衡與和諧，這種平衡狀態(tài)直觀上能夠讓用戶感到舒適。
人體是垂直對(duì)稱的，我們的視覺(jué)接收也與之相對(duì)應(yīng)。我們喜歡物體在垂直軸上保持平衡，直覺(jué)上總是傾向于平衡一種力量與另一種力量。
Illustration: Outcrowd
在設(shè)計(jì)環(huán)境中，平衡是基于元素的視覺(jué)重量，而視覺(jué)重量是用戶對(duì)圖像的注意力范圍。如果畫(huà)面是平衡的，用戶會(huì)下意識(shí)地感到舒適。畫(huà)面平衡被認(rèn)為是其元素在視覺(jué)上的比例安排。
如何讓一個(gè)頁(yè)面看起來(lái)平衡？
最常見(jiàn)的平衡例子就是使用對(duì)稱。
在潛意識(shí)層面上，對(duì)稱的視覺(jué)能讓人愉悅，能讓畫(huà)面看起來(lái)和諧有條理。對(duì)稱的平衡是通過(guò)在水平或垂直的中軸兩側(cè)均勻放置元素來(lái)創(chuàng)造的。也就是說(shuō)，畫(huà)面中間假想線的兩邊實(shí)際上是彼此的鏡像。有些人認(rèn)為對(duì)稱的平衡是無(wú)聊和可預(yù)測(cè)的，但它經(jīng)受住了時(shí)間的考驗(yàn)，到現(xiàn)在仍然是在頁(yè)面上創(chuàng)造舒適和穩(wěn)健感覺(jué)的最好方法之一。
Illustration: Outcrowd
兩側(cè)重量不相同的元素構(gòu)成具有不對(duì)稱平衡。
動(dòng)態(tài)平衡通常會(huì)比靜態(tài)平衡更有設(shè)計(jì)感，讓畫(huà)面不至于呆板。在缺乏平衡的情況下，我們的目光會(huì)條件反射性地開(kāi)始尋找平衡點(diǎn)，這是一個(gè)很好的機(jī)會(huì)，可以將注意力吸引到頁(yè)面上可能還沒(méi)被注意到的部分。頁(yè)面重點(diǎn)就應(yīng)該放在這里——抓住用戶的注意力，就像產(chǎn)品的生命線一樣。
Landing page — Asian Cuisine
比如一般這樣去“配重”的元素會(huì)是一個(gè)按鈕或者標(biāo)題。
重要信息（或者是行動(dòng)按鈕）就是我們需要去配重的價(jià)值元素。
不對(duì)稱的現(xiàn)象越嚴(yán)重，用戶就越想找出其中的原因（檢查配重）。人們本能地比平時(shí)更仔細(xì)地研究這樣的畫(huà)面。然而，這里需要注意分寸，過(guò)于古怪的構(gòu)圖并不總是能被很好的感知。
Illustration: Outcrowd
平衡中的另一種類型，特點(diǎn)是視覺(jué)元素從一個(gè)共同的中心點(diǎn)放射出來(lái)。徑向平衡在設(shè)計(jì)中不常用。它的優(yōu)點(diǎn)是，注意力很容易找到并保持一個(gè)焦點(diǎn)——恰好就在它的中心，這通常是構(gòu)圖中最引人注目的部分。
這是一種平衡中的混亂，就像 Jackson Pollock的畫(huà)作一樣。這樣的組成沒(méi)有突出的焦點(diǎn)，所有的元素都有同樣的視覺(jué)重量。沒(méi)有層次，乍一看，畫(huà)面就像視覺(jué)噪音，但所有元素又相互匹配，形成一個(gè)連貫的整體。
（彩云注：這是一種比較高階的設(shè)計(jì)平衡處理手法，用的好可以讓畫(huà)面非常具有設(shè)計(jì)感，但把握不好的話，就會(huì)非常凌亂。所以，我們平時(shí)能看到很多大師的作品看似一些簡(jiǎn)單圖形的使用，但就是好看，輪到自己設(shè)計(jì)的時(shí)候就會(huì)發(fā)現(xiàn)，越簡(jiǎn)單的設(shè)計(jì)似乎越難設(shè)計(jì)好。）
Illustration: Outcrowd
當(dāng)談到構(gòu)圖中的重量平衡時(shí)，他們經(jīng)常將其與物理世界中的重量進(jìn)行比較：重力、杠桿、重量和支點(diǎn)。我們的大腦和眼睛感知平衡的方式非常類似于力學(xué)定律。我們很容易把一幅畫(huà)想象成一個(gè)在某一點(diǎn)上平衡的平面，就像一個(gè)天平。如果我們?cè)趫D像的邊緣添加一個(gè)元素，它就會(huì)失去平衡，有必要修復(fù)它。元素是否是一組色調(diào)、顏色還是點(diǎn)并不重要，目標(biāo)是找到圖像的視覺(jué)“重心”，即圖像的重心。
不幸的是，沒(méi)有精確的方法來(lái)確定一個(gè)物體的視覺(jué)質(zhì)量。一般來(lái)說(shuō)，設(shè)計(jì)師依賴于他們的直覺(jué)。不過(guò)，下面這些有用的觀察可能會(huì)有所幫助:
大小
大的物體總是更重
形狀
不規(guī)則形狀比規(guī)則形狀的元素輕
顏色
暖色比冷色重
色調(diào)
深色物體比淺色物體重
圖案
帶有圖案的元素顯得更重
3D
帶有紋理貼圖的元素顯得更重
內(nèi)部復(fù)雜性
物體內(nèi)部越復(fù)雜，視覺(jué)重量更大
填充空間關(guān)系
正形空間比負(fù)形空間更重
對(duì)重量的感知
照片中的啞鈴看起來(lái)會(huì)比一只鋼筆更重
當(dāng)使用對(duì)稱時(shí)，作品看起來(lái)可以更加的專業(yè)和有科學(xué)性。其中，靜態(tài)對(duì)稱的作品顯得更加有專業(yè)精神和嚴(yán)肅的；而動(dòng)態(tài)對(duì)稱的設(shè)計(jì)方法則能吸引用戶的興趣，表達(dá)出個(gè)性和創(chuàng)造力，能讓用戶集中注意力。
作者：彩云Sky 來(lái)源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(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)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ǔ)言障礙，最終提升用戶體驗(yàn)。
圖標(biāo)作為一種設(shè)計(jì)工具，在UI/UX和平面設(shè)計(jì)師中最受歡迎。這些微小的設(shè)計(jì)元素對(duì)每個(gè)人來(lái)說(shuō)都是簡(jiǎn)單易懂的，這些特征賦予了它們通用數(shù)字語(yǔ)言的地位。
在這篇文章中，我整理了10個(gè)簡(jiǎn)單又重要的技巧幫你設(shè)計(jì)出更專業(yè)的圖標(biāo)。
最小的圖標(biāo)大小通常是12 x 12px。以這個(gè)尺寸為基礎(chǔ)，行業(yè)標(biāo)準(zhǔn)中大多數(shù)其他尺寸只是通過(guò)將之前的尺寸翻倍而產(chǎn)生的。
重要提示：當(dāng)你設(shè)計(jì)圖標(biāo)時(shí)，重要的是要按100%顯示的比例去設(shè)計(jì)，使圖標(biāo)完美像素并放大像素塊查看準(zhǔn)確性。
完美像素圖標(biāo)在屏幕上能呈現(xiàn)尖銳和清晰的線條和形狀。如今，高分辨率顯示器和視網(wǎng)膜顯示器正變得越來(lái)越好，所以在不久的將來(lái)，對(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è)像素。這樣線的邊緣看起來(lái)更清晰。
為了讓圖標(biāo)看起來(lái)整潔一致，重要的是要記住線條寬度和間隙大小。這條規(guī)則我認(rèn)為是必須遵循的:所有線條的寬度都是相同的。
理想情況下，線寬和間隙大小也應(yīng)該相等。
然而，有時(shí)候你必須打破這個(gè)規(guī)則。當(dāng)你需要解釋我們?cè)谌粘Ｉ钪忻鎸?duì)的一個(gè)具有非對(duì)稱模式的物體時(shí)，它就會(huì)發(fā)生。比如條形碼這個(gè)例子來(lái)說(shuō)，我故意使圖標(biāo)內(nèi)的線寬和間隙大小不均勻，以表示條碼的特征。
在UI設(shè)計(jì)中，對(duì)象(包括圖標(biāo))的角半徑定義了項(xiàng)目的外觀和感覺(jué)。當(dāng)我們說(shuō)到一個(gè)集合中的多個(gè)對(duì)象時(shí)，規(guī)則很簡(jiǎn)單：在正方形和圓角之間進(jìn)行選擇，并對(duì)所有的圖標(biāo)應(yīng)用相同的屬性。
為什么它如此重要?一致性是UI/UX設(shè)計(jì)的關(guān)鍵原則。一個(gè)可用和用戶友好的設(shè)計(jì)總是提供一致的體驗(yàn)。在下面的例子中，你可以看到打破這個(gè)原則是如何影響視覺(jué)感知的。
在電腦上看起來(lái)完美對(duì)齊和平衡的東西，在你的眼睛看來(lái)可能并不一樣。
當(dāng)我們把大小相等的正方形和圓放在一起時(shí)，我們會(huì)有一種不對(duì)勁的感覺(jué)，圓似乎比正方形小。為了使我們的形狀在尺寸上看起來(lái)相同，我們應(yīng)該使圓更大(或減少正方形的尺寸)。
這個(gè)原則也適用于圖標(biāo)的設(shè)計(jì)和使用。有些圖標(biāo)的一側(cè)可能較重。試著調(diào)整它們一兩個(gè)點(diǎn)，直到整體對(duì)齊看起來(lái)正確。在下面的例子中，你可以看到突出顯示的圖標(biāo)看起來(lái)很大，盡管它與其他部分的大小相同。為了平衡這個(gè)集合，我們需要通過(guò)縮小圖標(biāo)的大小來(lái)調(diào)整突出顯示的圖標(biāo)。
（彩云注：這個(gè)原則很多人應(yīng)該都知道，但我發(fā)現(xiàn)也是在整套圖標(biāo)的設(shè)計(jì)中最容易出現(xiàn)的問(wèn)題，當(dāng)把圖標(biāo)匯總在一起的時(shí)候，這個(gè)問(wèn)題尤其需要重視。）
我們經(jīng)常在設(shè)計(jì)軟件中使用中心對(duì)齊，這種方法沒(méi)有錯(cuò)。但當(dāng)涉及到細(xì)節(jié)時(shí)，比如圖標(biāo)設(shè)計(jì)，我們需要相信自己的眼睛，打破數(shù)學(xué)法則，以增強(qiáng)元素的平衡。
讓我們以播放按鈕作為展示。這個(gè)例子很簡(jiǎn)單，但非常能說(shuō)明問(wèn)題，因?yàn)樾螤钤讲粚?duì)稱，需要改進(jìn)的缺陷就越明顯。
我打賭你已經(jīng)猜到我們指的是KISS原則。這一原則背后的思想是，大多數(shù)系統(tǒng)在保持簡(jiǎn)單的情況下工作得最好。用戶越容易理解某樣?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）不要過(guò)度設(shè)計(jì)
不必要的復(fù)雜性阻礙了合理的表達(dá)，應(yīng)該避免。過(guò)載的設(shè)計(jì)會(huì)將用戶體驗(yàn)變成一場(chǎng)噩夢(mèng)。
3）避免不必要的元素
只要確保每個(gè)圖標(biāo)在整體環(huán)境中是可理解和清晰的就行。（彩云注：比如已經(jīng)是在郵件客戶端中，就不需要再額外增加表示郵件的圖標(biāo)部分）
重要提示：在圖標(biāo)設(shè)計(jì)中合理地使用KISS原則，也不要把事情做得太簡(jiǎn)單，否則會(huì)影響功能。一個(gè)優(yōu)秀的圖標(biāo)應(yīng)清晰易懂。
圖標(biāo)規(guī)范框架通常是指組合在一起的圓形、正方形、縱向和橫向矩形。它們創(chuàng)建了一個(gè)框架來(lái)設(shè)計(jì)圖標(biāo)。但是，這個(gè)規(guī)則非常靈活，只是作為參考，方便圖標(biāo)的設(shè)計(jì)在視覺(jué)上平衡。所以，如果你覺(jué)得你的圖標(biāo)不完全匹配這個(gè)框框，但看起來(lái)完全正確——相信你的眼睛！
框架是設(shè)計(jì)的“容器”。框架規(guī)范了一個(gè)統(tǒng)一的范圍來(lái)設(shè)計(jì)圖標(biāo)，這背后有一些原因：
1) 大小
由于其幾何形狀，所有圖標(biāo)都具有不同的高度和寬度。為了在我們的設(shè)計(jì)中統(tǒng)一圖標(biāo)尺寸，我們應(yīng)該將它們放置在大小始終相同的框架中。
2)輸出
框架內(nèi)的圖標(biāo)與視覺(jué)中心對(duì)齊，這經(jīng)常被開(kāi)發(fā)人員忽略，因?yàn)樗麄兘?jīng)常根據(jù)實(shí)際的中心來(lái)調(diào)整圖標(biāo)，而沒(méi)有注意到差異。這就是為什么用框架輸出圖標(biāo)是至關(guān)重要的，當(dāng)你按這個(gè)框架輸出圖標(biāo)時(shí)，能保證視覺(jué)設(shè)計(jì)時(shí)想要的視覺(jué)中心。
3)效率
如果使用Figma，可以通過(guò)創(chuàng)建組件來(lái)節(jié)省時(shí)間。可以使用實(shí)例快速地將一個(gè)圖標(biāo)替換為另一個(gè)圖標(biāo)。
如果你要打算做圖標(biāo)資源庫(kù)的話。要想到當(dāng)設(shè)計(jì)師在庫(kù)中搜索圖標(biāo)時(shí)，會(huì)遇到哪些挑戰(zhàn)?他們的痛點(diǎn)是什么?他們的需求是什么?要回答這些問(wè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)鍵詞: #蘭花#花瓣#花瓣#花#裝飾#花#植物#花園#開(kāi)花#植物#自然#熱帶#樹(shù)枝#美麗#植物#美麗#自然#葉子#優(yōu)雅#浪漫
最終應(yīng)該導(dǎo)出SVG或PNG格式？這是一個(gè)關(guān)鍵問(wèn)題。讓我們來(lái)比較一下格式:
我個(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ǔ)能力，在彩云看過(guò)的無(wú)數(shù)份作品集中最普遍的問(wèn)題也就是圖標(biāo)設(shè)計(jì)。今天這篇文章雖然非?；A(chǔ)，但千萬(wàn)別小看它，用這10條技巧重新審視自己的圖標(biāo)作品，相信會(huì)有新的收獲！
作者：彩云Sky 來(lái)源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(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)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ì)更干凈、高效。
用更容易讓用戶理解（說(shuō)人話）的引導(dǎo)文案，提升使用體驗(yàn)。
（彩云注：下面2個(gè)案例中，左側(cè)的“購(gòu)物車”和“庫(kù)存2”太過(guò)于術(shù)語(yǔ)化，右側(cè)的“僅剩2”和“加入購(gòu)物車”更加貼近用戶的日常理解。大家平時(shí)工作的時(shí)候，也一定要注意界面中的文案，尤其是說(shuō)明文字，控件文字等等，這個(gè)點(diǎn)經(jīng)常容易被忽略。）
良好的對(duì)齊方式，可以增強(qiáng)內(nèi)容的可讀性，讓用戶的視線更容易掃描。
（彩云注：左側(cè)的“之”字形視動(dòng)線比較難閱讀，且不夠?qū)I(yè)；右側(cè)的垂直對(duì)齊增強(qiáng)了可讀性，也讓設(shè)計(jì)看起來(lái)更加統(tǒng)一，能夠快速的提升設(shè)計(jì)細(xì)節(jié)。）
使用圖標(biāo)、動(dòng)畫(huà)作為標(biāo)簽，有助于更輕松地理解內(nèi)容，它使界面看起來(lái)更加理性和豐富，能瞬間抓住用戶的眼球。
（彩云注：左側(cè)的導(dǎo)航相較于右邊，很難第一時(shí)間準(zhǔn)確識(shí)別它的意思，增加圖標(biāo)后不僅更快看清，視覺(jué)上也更加美觀。）
大段的長(zhǎng)句會(huì)讓內(nèi)容變得難以閱讀。
為了獲得好的體驗(yàn)和UI，應(yīng)該注意拆分內(nèi)容，并使用項(xiàng)目符號(hào)突出關(guān)鍵點(diǎn)，利用拆分好的內(nèi)容塊讓用戶更快抓住重點(diǎn)。特別是在“功能說(shuō)明和條款條件”或任何聲明時(shí)，提煉要點(diǎn)有助于提升用戶體驗(yàn)，這樣也不至于讓用戶直接忽略。
（彩云注：左側(cè)的大段文字我想應(yīng)該沒(méi)多少人會(huì)去閱讀，右邊的至少還能在短時(shí)間內(nèi)快速看看幾個(gè)關(guān)鍵詞。）
進(jìn)度條幫助用戶追蹤流程，它也能使查看上下步驟更加容易。線上購(gòu)物，表單填寫，申請(qǐng)流程等場(chǎng)景使用這種格式能很好的簡(jiǎn)化流程。
（彩云注：左邊的表單UI不方便跟蹤進(jìn)度和流程，右邊的表單把進(jìn)度放在頂部能幫助用戶清楚的知道流程進(jìn)度。）
錯(cuò)誤提示一定要明確，易于理解，方便用戶進(jìn)行下一步的操作。如果用戶不理解界面上出現(xiàn)的錯(cuò)誤，用戶就會(huì)感到很失望，可能會(huì)放棄接下來(lái)的流程。在UI設(shè)計(jì)時(shí)，在正確的地方用通俗的語(yǔ)言說(shuō)明問(wèn)題，以避免歧義，這一點(diǎn)非常重要。
（彩云注：我常常遇到各種出錯(cuò)，但出現(xiàn)的提示太過(guò)于術(shù)語(yǔ)化，也沒(méi)有提示在正確的地方讓我非?？鄲馈＃?nbsp;
從菲茨定律（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è)的按鈕簡(jiǎn)潔明了并且符合用戶的心理預(yù)期，能夠讓用戶更快決策并點(diǎn)擊。）
顏色是UI中不可缺少的部分，它能影響用戶使用應(yīng)用時(shí)的情緒。正確地使用顏色將使UI看起來(lái)更加豐富合理。
（彩云注：左側(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è)的問(wèn)題在于選中狀態(tài)不清晰且選項(xiàng)的顏色過(guò)于豐富，右側(cè)的選中狀態(tài)清晰且選項(xiàng)顏色只有2種，選中和非選中，體驗(yàn)會(huì)更好。）
如果想給信息分組，使用留白是最好的方式。加條線作為分組符號(hào)會(huì)在界面中增加了一個(gè)額外元素，空白能讓UI看起來(lái)更加干凈和優(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)容，這樣可以提供用戶參考并帶來(lái)更好的用戶體驗(yàn)。
高飽和度的顏色能形成強(qiáng)烈的對(duì)比。在暗黑模式下使用高飽和度會(huì)很刺眼，給用戶很不好的體驗(yàn)。暗黑模式一般在晚上使用，因此對(duì)設(shè)計(jì)師來(lái)說(shuō)，需要做的是讓整個(gè)配色相對(duì)柔和，讓用戶感到放松?；诖耍谠O(shè)計(jì)的時(shí)候應(yīng)該將飽和度限制在200-500之間。
(彩云注：這里的200-500彩云去查了不少資料，但沒(méi)有找到最好的答案，這里引用的是Material Design中的顏色規(guī)范，感興趣的同學(xué)可以自行查找)
在同一個(gè)界面，最理想的狀態(tài)是只有一個(gè)最主要的關(guān)鍵按鈕和緊跟著的次要按鈕。這是因?yàn)槿绻粋€(gè)界面上有太多這種行動(dòng)按鈕（CTA）按鈕，會(huì)讓關(guān)鍵操作淹沒(méi)在這些按鈕中，讓用戶不知所措。
17. 簡(jiǎn)化不必要的動(dòng)詞
沒(méi)必要在菜單上增加動(dòng)詞和短語(yǔ)，用最少的信息寫清楚功能就足夠讓用戶理解了。所以，在菜單設(shè)計(jì)上要盡量避免增加無(wú)關(guān)緊要的詞，這樣才不會(huì)影響用戶體驗(yàn)。
你可能注意到，很少有表單的字體大小不平衡，字體之間的類別盡量少一些看起來(lái)會(huì)更加平衡。在決定字體大小時(shí)，盡量規(guī)范字號(hào)的標(biāo)準(zhǔn)。比如標(biāo)題（16px），副標(biāo)題（12px），正文（10px），說(shuō)明文字（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)庫(kù)：
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è)顏色在亮色模式下看起來(lái)非常漂亮，但在深色模式看可能就太暗了，反之亦然。解決這個(gè)問(wèn)題最好辦法是使用2套不同飽和度的顏色。
App的新手引導(dǎo)決定了用戶第一次體驗(yàn)產(chǎn)品時(shí)的感受。在設(shè)計(jì)的時(shí)候，試著公開(kāi)需要哪些具體步驟，增加”跳過(guò)“和前后移動(dòng)查看的能力對(duì)新用戶來(lái)說(shuō)非常重要。
許多網(wǎng)站和App都是用圖片驅(qū)動(dòng)的，但在圖片上直接增加文字內(nèi)容有時(shí)候會(huì)被淹沒(méi)掉。在圖片上增加一個(gè)疊加層可以提升內(nèi)容的可讀性。
23. 信息部分露出
對(duì)于一些大屏設(shè)備來(lái)說(shuō)，像筆記本電腦，平板電腦和智能電視，它們都有非常多閑置的空間。對(duì)于這些閑置的空間來(lái)說(shuō)，盡量通過(guò)設(shè)計(jì)告訴它底部還有更多內(nèi)容。這對(duì)UI和UX方面都有好處，因?yàn)榭臻g的使用方式能夠讓用戶清晰的知道所有內(nèi)容。
為了讓用戶聚焦閱讀，應(yīng)盡量避免使用大段的長(zhǎng)/寬行。保持短句和簡(jiǎn)潔能夠增加內(nèi)容的可讀性。
（彩云注：這點(diǎn)用在你的作品集里也是很合適的，有些人經(jīng)常使用大段的文字內(nèi)容來(lái)描述，很可能直接勸退面試官）
Z字形原理，也就是大眾所熟知的”古騰堡原理“，它描述了當(dāng)人們看到一個(gè)均勻分布元素的設(shè)計(jì)時(shí)，眼睛的總體運(yùn)動(dòng)情況。通過(guò)這個(gè)原理我們知道，用戶在內(nèi)容上的視線是沿著Z字形來(lái)閱讀的，所以遵循這一原理設(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í)也是很難理解的。用上更簡(jiǎn)單的圖標(biāo)形式，會(huì)讓界面更高級(jí)。
（彩云注：當(dāng)然越簡(jiǎn)單的圖標(biāo)其實(shí)想畫(huà)出彩會(huì)更難，另外也需要區(qū)分不同的場(chǎng)景，像一些運(yùn)營(yíng)類的圖標(biāo)可能會(huì)為了活動(dòng)氛圍做的相對(duì)風(fēng)格化一些。）
選錯(cuò)文案，會(huì)讓人們對(duì)于任務(wù)缺乏興趣，根據(jù)上下文使用更合適的詞組。
輕敲和點(diǎn)擊有時(shí)候很累人，可能不如使用滑動(dòng)、拖拽等手勢(shì)操作，這些操作會(huì)讓界面更簡(jiǎn)潔并且也能順利地完成既定任務(wù)。
在探索酒店、目的地甚至是閱讀任何文章時(shí)，用戶經(jīng)常都需要點(diǎn)擊卡片。為了使得探索更加吸引人注目和干脆，避免使用長(zhǎng)文本導(dǎo)致的滾動(dòng)。相反，可以加一個(gè)閱讀更多的按鈕方便想看全所有內(nèi)容的用戶。
”鄰近的物體往往被視為是同一組內(nèi)容“。有時(shí)候?yàn)榱税褍?nèi)容區(qū)分開(kāi)的更清晰，嘗試用線對(duì)相關(guān)內(nèi)容進(jìn)行分組。
（彩云注：其實(shí)有留白和不同顏色做區(qū)分也是可以的，建議根據(jù)自己的設(shè)計(jì)風(fēng)格和具體內(nèi)容來(lái)定）
在設(shè)計(jì)控件時(shí)，如果可以用圖形可視化的地方就優(yōu)先嘗試把控件圖形化，除了非常需要很精確的設(shè)置參數(shù)。對(duì)于價(jià)格范圍這種，很容易將它可視化為滑塊控件。
對(duì)一些人來(lái)說(shuō)容易理解的東西，對(duì)某些人來(lái)說(shuō)可能不是。因此，最好使用示例占位符來(lái)解釋輸入字段，這可以防止用戶在填寫內(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，最左邊是”首頁(yè)“，而最右邊是”用戶“。
（彩云注：這是一個(gè)心理學(xué)上的理論，人們對(duì)于一系列的材料更容易記住開(kāi)頭的內(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è)操作過(guò)程。簡(jiǎn)化過(guò)程，自然體驗(yàn)就會(huì)更好，所以盡可能的減少點(diǎn)擊次數(shù)。
（彩云注：下面的案例，增加可點(diǎn)擊符號(hào)也可以減少用戶思考的時(shí)間。）
為了使內(nèi)容突出，沒(méi)有必要使用多種字體類型，包括加粗、改色等等。只在最需要的位置使用增強(qiáng)的的文字層次結(jié)構(gòu)、字體重量，同時(shí)只使用一種字體足以吸引用戶對(duì)內(nèi)容的注意力。
留白在設(shè)計(jì)中非常重要，太少或者沒(méi)有留白會(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)畫(huà)、圖像甚至文本來(lái)保持用戶的注意力。（彩云注：給用戶的提示可以先快速加載信息框架，讓用戶有事可做，而不是什么都看不到）
作者：彩云Sky 來(lái)源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(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)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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，我是彩云。設(shè)計(jì)趨勢(shì)年年在變，設(shè)計(jì)技能也在不斷更新，但回到本源，底層的理論知識(shí)是不會(huì)變的。我自己幾乎每年還會(huì)翻看一些講設(shè)計(jì)基礎(chǔ)的書(shū)，比如《寫給大家看的設(shè)計(jì)書(shū)》之類的，會(huì)發(fā)現(xiàn)這些原理每次看都會(huì)有新的收獲。隨著工作年數(shù)增加，對(duì)底層知識(shí)的價(jià)值認(rèn)識(shí)也越來(lái)越深刻，不知道你會(huì)不會(huì)有這種感覺(jué)？
在Medium上看到一位工作超過(guò)17年的國(guó)外設(shè)計(jì)leader寫的一篇關(guān)于設(shè)計(jì)原理的文章，講設(shè)計(jì)如何變得有效？總結(jié)得很好。
當(dāng)沒(méi)有認(rèn)知緊張時(shí)，用戶心流才會(huì)發(fā)生。當(dāng)一個(gè)設(shè)計(jì)有效時(shí)，你才能體驗(yàn)到認(rèn)知上的輕松。如果沒(méi)有，你的“心流狀態(tài)”就會(huì)中斷(稍后會(huì)詳細(xì)討論)，讓我們陷入認(rèn)知緊張，于是“設(shè)計(jì)失敗了”。
當(dāng)基本設(shè)計(jì)原則被忽略時(shí)，這種情況很容易發(fā)生，導(dǎo)致設(shè)計(jì)無(wú)法“整合”。這些基本原則包括：平衡性、一致性和視覺(jué)層次、負(fù)空間、接近性、對(duì)比、統(tǒng)一、一致性、配色方案和排版層次等方面。（彩云注：很多人看到這些以為自己都懂，但實(shí)際設(shè)計(jì)時(shí)犯錯(cuò)最多的也是這些問(wèn)題）
從神經(jīng)科學(xué)的角度來(lái)說(shuō)，當(dāng)一個(gè)設(shè)計(jì)起作用時(shí)，我們會(huì)“感受到它”。其影響立竿見(jiàn)影。它發(fā)生在潛意識(shí)里，在一瞬間完成，是人的本能反應(yīng)。我們不需要把它放在顯微鏡下分析它。
優(yōu)秀設(shè)計(jì)以簡(jiǎn)潔和優(yōu)雅而引人注目。喬納森·伊夫(Jonathan Ive)和迪特爾·拉姆斯(Dieter Rams)都可以算作這種設(shè)計(jì)思想的擁躉。
人們常說(shuō)，優(yōu)秀設(shè)計(jì)背后的工藝是無(wú)形的。然而，這不是隨機(jī)發(fā)生的。不管人們是否注意到，設(shè)計(jì)的背后是遵循著大量而嚴(yán)格的原理去執(zhí)行的。偉大的設(shè)計(jì)師不會(huì)在畫(huà)板上隨意地將各種元素組合在一起，這是有方法的。
為什么有些設(shè)計(jì)具有美的感受，而有些卻沒(méi)有
相反地，當(dāng)一項(xiàng)設(shè)計(jì)被認(rèn)為“有些地方不對(duì)勁”時(shí)，人們就會(huì)下意識(shí)地覺(jué)得這個(gè)設(shè)計(jì)是有問(wèn)題的。這樣的結(jié)果會(huì)給品牌或產(chǎn)品帶來(lái)不好的影響。當(dāng)一個(gè)高端或奢侈品品牌受到高度關(guān)注時(shí)，這種影響尤其有害。這就是為什么你永遠(yuǎn)不會(huì)遇到設(shè)計(jì)不完美的香奈兒(Chanel)商店的原因。
“你對(duì)一件事的第一印象會(huì)建立起你隨后的觀念，如果一家公司在你看來(lái)不專業(yè)，你可能會(huì)認(rèn)為他們做的其他事情都不專業(yè)。——Daniel Kahneman，普林斯頓大學(xué)心理學(xué)教授。
這不是一個(gè)精心制作的設(shè)計(jì)，會(huì)導(dǎo)致認(rèn)知緊張。你會(huì)在這個(gè)網(wǎng)站上預(yù)訂你的行程嗎?
我們都同意上面是糟糕的設(shè)計(jì)，就像建在沙子上的房子，一個(gè)忽視基本設(shè)計(jì)原則的設(shè)計(jì)將會(huì)崩潰。潛意識(shí)里，它會(huì)立即被認(rèn)為是破碎的，無(wú)論是視覺(jué)上、精神上和情感上。
人類的大腦是懶惰的、有偏見(jiàn)的，喜歡走捷徑。Daniel Kahneman稱之為“低維思維”。當(dāng)人們看到某種設(shè)計(jì)時(shí)，它的“美學(xué)完整性”、視覺(jué)感知和神經(jīng)科學(xué)之間存在著相互關(guān)聯(lián)。
當(dāng)一個(gè)設(shè)計(jì)是合理的，換句話說(shuō)，它是令人愉快的、有效的，我們會(huì)迅速、直觀的判斷它是合理的。我們的心率降低，多巴胺水平增加，會(huì)有一種幸福和平靜的感覺(jué)。這就像我們聽(tīng)到舒緩的音樂(lè)，會(huì)沉浸在一種每時(shí)每刻的“心流狀態(tài)” 中。“在這種狀態(tài)下，人們會(huì)專注于一項(xiàng)活動(dòng)，其他一切似乎都不重要”——來(lái)自于一個(gè)心理學(xué)概念，由 Mihaly Csikszentmihalyi在他的暢銷書(shū)《心流:最佳體驗(yàn)的心理學(xué)》中寫道。
你更愿意住進(jìn)哪個(gè)房間？
蘋果的人機(jī)界面指南（Apple’s Human Interface Guidelines）幾十年來(lái)一直在談?wù)摗懊缹W(xué)完整性”。它也可以被稱為“設(shè)計(jì)完整性”或“審美凝聚力”。
蘋果對(duì)美學(xué)完整性的定義是“當(dāng)一個(gè)設(shè)計(jì)的外觀和行為與其功能完美匹配時(shí)”（彩云注：我的理解就是所見(jiàn)即所得，符合用戶的心理預(yù)期）。換句話說(shuō)，設(shè)計(jì)的構(gòu)成是產(chǎn)品的一個(gè)組成部分。我們將研究決定設(shè)計(jì)組合成敗的設(shè)計(jì)原則——更多的是關(guān)于 UI，而不是關(guān)于 UX。
美學(xué)完整性不僅僅是關(guān)于設(shè)計(jì)有多好看。它指的是具有明顯連貫性的設(shè)計(jì)：有效的結(jié)構(gòu)和布局，是什么讓它產(chǎn)生效果。換句話說(shuō)，它的元素在視覺(jué)層次、對(duì)齊、間距、平衡、對(duì)稱、重復(fù)、比例、強(qiáng)調(diào)、接近、對(duì)比、統(tǒng)一、一致性、配色、排版、負(fù)空間等方面都有出色的運(yùn)用，這里僅舉幾個(gè)例子。
這與“黃金比例”無(wú)關(guān)，黃金分割不能解決問(wèn)題。斐波那契數(shù)列螺旋沒(méi)那么玄乎，給設(shè)計(jì)師帶不來(lái)驚人的設(shè)計(jì)。
設(shè)計(jì)師們?cè)诎布惸取ぶ炖蚧蛎赡塞惿哪樕袭?huà)出金色螺旋形時(shí)驚呼道：”果然是”黃金比例“（彩云注：但事實(shí)上有點(diǎn)故弄玄虛了）。當(dāng)然，自然界中確實(shí)有神圣幾何學(xué)(黃金比例，又稱斐波那契螺旋，是基于此)，但依賴“黃金螺旋”作為設(shè)計(jì)原則是一種謬論，它已被多次暴露在其赤裸裸的荒謬中。
這是我的洗衣機(jī)，上面疊加了斐波那契螺旋。
“審美的完整性”不是沒(méi)道理的。這個(gè)概念是基于基本的設(shè)計(jì)原則，是有成就的設(shè)計(jì)師實(shí)踐他們的藝術(shù)作品的經(jīng)驗(yàn)總結(jié)。
讓我們來(lái)看看一些設(shè)計(jì)原則，以及它們?yōu)槭裁磿?huì)使得你的設(shè)計(jì)更能更加有效。通常情況下，真正優(yōu)秀的設(shè)計(jì)會(huì)結(jié)合這些設(shè)計(jì)原則。
我們將探討以下這些最底層的設(shè)計(jì)原理：
視覺(jué)感知的基本規(guī)則對(duì)任何視覺(jué)設(shè)計(jì)都是至關(guān)重要的，因?yàn)樗鼈冎笇?dǎo)著如何盡可能快地傳達(dá)信息。視覺(jué)層次是設(shè)計(jì)中信息的結(jié)構(gòu)和優(yōu)先級(jí)。它決定了人們接受和處理信息的順序，因?yàn)樗砸环N視覺(jué)方式引導(dǎo)他們。
視覺(jué)層次感重在打造視覺(jué)優(yōu)先級(jí)。通過(guò)巧妙地使用顏色、形狀、大小、間距、比例和方向，創(chuàng)造性地使用決定層次的視覺(jué)元素來(lái)傳達(dá)構(gòu)圖的意義、概念和情緒。
核心關(guān)注點(diǎn)是什么，你希望用戶首先注意到或開(kāi)始閱讀的設(shè)計(jì)中最重要的元素是什么？我們想讓它成為焦點(diǎn)，然后其他部分的設(shè)計(jì)從這里展開(kāi)。
一個(gè)具有良好視覺(jué)層次的網(wǎng)站會(huì)引導(dǎo)用戶關(guān)注重要的部分
視覺(jué)層次對(duì)于每一種視覺(jué)設(shè)計(jì)都是至關(guān)重要的，無(wú)論是需要引導(dǎo)訪客眼球的首頁(yè)還是移動(dòng)端UI的導(dǎo)航入口。用戶對(duì)每個(gè)元素的理解取決于組合中的其他元素及其上下文。
建立視覺(jué)層次的一些技術(shù)是:位置、大小和比例、顏色和對(duì)比、間距和親密性、負(fù)空間、紋理、引導(dǎo)線和高度。在一個(gè)元素周圍使用豐富的負(fù)空間可以使它看起來(lái)更有意義。使用引導(dǎo)線可以創(chuàng)造移動(dòng)，就像一個(gè)人的眼睛在設(shè)計(jì)上移動(dòng)一樣。排版的層次結(jié)構(gòu)也扮演著重要的角色，通過(guò)不同的大小和權(quán)重，我們可以讓更重要的文本元素脫穎而出并建立秩序。
加分技巧
沒(méi)有視覺(jué)層次的網(wǎng)站沒(méi)有明顯的興趣點(diǎn)。
設(shè)計(jì)中的對(duì)齊和間距通過(guò)空間上的連接傳達(dá)出一種秩序和組織感，這兩個(gè)原則都在設(shè)計(jì)背后發(fā)揮重要價(jià)值。設(shè)計(jì)師早期學(xué)到的基本知識(shí)之一是在網(wǎng)格上編排設(shè)計(jì)，然后對(duì)齊和分隔這些元素。
左對(duì)齊、居中對(duì)齊、右對(duì)齊都沒(méi)錯(cuò)，但你必須對(duì)齊，否則當(dāng)元素沒(méi)有對(duì)齊時(shí)，設(shè)計(jì)就會(huì)給人崩潰的感覺(jué)。它給人一種不安的感覺(jué)。
沒(méi)對(duì)齊的話，眼睛看著很難受
網(wǎng)格有很多不同的類型:列網(wǎng)格、基線網(wǎng)格、模塊網(wǎng)格、層次網(wǎng)格、像素網(wǎng)格等。不同設(shè)計(jì)使用不同網(wǎng)格，但最基本的是設(shè)計(jì)元素的對(duì)齊和間距。（彩云注：關(guān)于網(wǎng)格方面的知識(shí)，彩云以前也寫過(guò)不少，感興趣的也可以在公眾號(hào)的歷史發(fā)文中翻翻看）比如：
《想要用好網(wǎng)格系統(tǒng)，這8個(gè)小技巧你必須知道》
《網(wǎng)格系統(tǒng)真是太好用了，后悔沒(méi)有早點(diǎn)學(xué)會(huì)！》
《4px網(wǎng)格設(shè)計(jì)方法，讓設(shè)計(jì)還原更精準(zhǔn)》
(Illustration courtesy UX Engineer)
網(wǎng)格可以被打破。一個(gè)死板的構(gòu)圖可能會(huì)在視覺(jué)上無(wú)趣，除非一個(gè)元素從網(wǎng)格中脫穎而出。錯(cuò)位或“打破網(wǎng)格”是賦予元素更多視覺(jué)權(quán)重的一個(gè)機(jī)會(huì)。當(dāng)在設(shè)計(jì)中設(shè)置視覺(jué)層次結(jié)構(gòu)時(shí)，它可以用來(lái)強(qiáng)調(diào)某些東西。
有時(shí)打破網(wǎng)格可以創(chuàng)造強(qiáng)調(diào)和移動(dòng)
設(shè)計(jì)上有兩種平衡:對(duì)稱和不對(duì)稱。所有的構(gòu)成元素：排版、顏色、圖像、形狀、圖案、留白等，都具有一定的視覺(jué)重量。有些元素很重，很吸引眼球，而有些元素很輕，感覺(jué)不那么重要。
這些元素的放置方式能夠在對(duì)稱設(shè)計(jì)中創(chuàng)造出一種平等的順序感，或者一種稍微偏離平衡能夠創(chuàng)造出一種不對(duì)稱的設(shè)計(jì)。無(wú)論對(duì)稱還是不對(duì)稱，我們的大腦都被某種平衡感所吸引，因?yàn)樗鼊?chuàng)造了和諧、秩序和美學(xué)上令人愉悅的結(jié)果。
多重原則:平衡、對(duì)齊和對(duì)稱在網(wǎng)站上發(fā)揮作用
“對(duì)比”指的是使設(shè)計(jì)中不同的元素更容易區(qū)別開(kāi)。強(qiáng)烈的對(duì)比可以在設(shè)計(jì)中強(qiáng)調(diào)一個(gè)區(qū)域，而微弱的對(duì)比可以弱化它，創(chuàng)造一個(gè)視覺(jué)層次。對(duì)比在設(shè)計(jì)中也扮演著重要的角色。對(duì)比不足會(huì)使文字特別難以閱讀，尤其是對(duì)視力有障礙的人來(lái)說(shuō)。
在左邊的設(shè)計(jì)中，一些文字和背景之間的對(duì)比不夠。
Web內(nèi)容可訪問(wèn)性指南 (WCAG)呼吁“文本的視覺(jué)呈現(xiàn)應(yīng)該有至少4.5:1的對(duì)比度”，除了大規(guī)模文本，它應(yīng)該有至少3:1的對(duì)比度。因此，設(shè)計(jì)師需要確保內(nèi)容保持舒適易讀。（彩云注：具體可用性配色工具，彩云之前的文章中有分享過(guò)，現(xiàn)在這種可用性顏色已經(jīng)越來(lái)越被重視了，你也要用起來(lái)啊）,之前寫的文章，推薦大家可以看看：
《以前我經(jīng)常為配色發(fā)愁，自從知道這3個(gè)配色神器后，配色變得容易多了！》
其他UI元素(如各種顯示器和設(shè)備上的卡片、按鈕、文字和圖標(biāo))之間的適當(dāng)對(duì)比也是必須的。如果UI元素之間沒(méi)有明顯的區(qū)分度，設(shè)計(jì)就容易產(chǎn)生混亂。
在格式塔原理中，對(duì)稱和秩序的法則也被稱為pr?gnanz，德語(yǔ)單詞“好身材”的意思。這個(gè)原理說(shuō)的是，大腦會(huì)以盡可能簡(jiǎn)單的方式感知模糊的形狀，這都是為了節(jié)省大腦能量。
我們傾向于尋找一切事物的對(duì)稱性。幾項(xiàng)研究發(fā)現(xiàn)，面部對(duì)稱能提高人們對(duì)人臉吸引力的評(píng)價(jià)(盡管完全對(duì)稱的臉其實(shí)并不一定那么有吸引力)。該理論認(rèn)為，這種偏好與選擇DNA最好的伴侶的進(jìn)化優(yōu)勢(shì)。
對(duì)稱在自然界中也無(wú)處不在。看看一只蝴蝶，一朵花，或者一只海星。
對(duì)稱
同樣的原理也適用于數(shù)字領(lǐng)域，平衡對(duì)稱的設(shè)計(jì)更令人愉悅。
對(duì)稱性在應(yīng)用中發(fā)揮作用。Uber Eats、Booking.com和Behance。
重復(fù)是一致性的近親，是優(yōu)秀可用性的標(biāo)志。在設(shè)計(jì)中利用重復(fù)是件好事，因?yàn)槲覀兊拇竽X總是在尋找模式、相似性和一致性。為什么?因?yàn)橹貜?fù)相同性質(zhì)的元素需要更少的認(rèn)知努力。
我們更容易識(shí)別重復(fù)的模式，而不是每次看到新模式都要重新校準(zhǔn)大腦。正如前面提到的，大腦作為一種生存機(jī)制是懶惰的，模式識(shí)別和認(rèn)知捷徑意味著有意識(shí)地處理視覺(jué)信息所需的能量更少。
例如，重復(fù)元素的形狀和大小、填充、留白、類型和顏色，也有助于更對(duì)稱、更好地平衡，做出美觀的設(shè)計(jì)。
The Athletic這個(gè)軟件就是用重復(fù)元素做設(shè)計(jì)的好例子
奇數(shù)法則意思是說(shuō)，在設(shè)計(jì)作品中奇數(shù)元素比偶數(shù)元素更有趣。偶數(shù)元素在圖像中產(chǎn)生了對(duì)稱，這可能會(huì)顯得過(guò)于正式和不自然。比如，在一行中排列三個(gè)或五個(gè)卡片會(huì)比2個(gè)或4個(gè)效果更好，作品會(huì)更加讓用戶感到舒服和自然。
Iskos Design 就是用的奇數(shù)原則做的網(wǎng)頁(yè)設(shè)計(jì)
三分法構(gòu)圖（也被稱之為黃金網(wǎng)格規(guī)則），在畫(huà)面中以水平和豎直方向分成3x3的網(wǎng)格和4個(gè)交叉點(diǎn)。這個(gè)規(guī)則能很好的協(xié)助設(shè)計(jì)師將最重要的元素放在網(wǎng)格的交叉點(diǎn)上，這樣可以很容易的設(shè)計(jì)出滿意的構(gòu)圖。
為什么會(huì)這樣？因?yàn)?strong>三分法構(gòu)圖創(chuàng)造了類似斐波那契數(shù)列(黃金比例)那種不對(duì)稱的美，產(chǎn)生了更有吸引力的構(gòu)圖。
你希望用戶關(guān)注哪些地方？高級(jí)設(shè)計(jì)師非常擅長(zhǎng)引導(dǎo)用戶的視覺(jué)焦點(diǎn)，這種引導(dǎo)可以通過(guò)可見(jiàn)和不可見(jiàn)的引導(dǎo)線來(lái)完成。這些線條在構(gòu)圖中也可以打造一種動(dòng)感，也能為畫(huà)面增添視覺(jué)沖擊力。
達(dá)到這種效果通常用特定的形狀和線條，或者是它們的組合形成難以察覺(jué)的引導(dǎo)線來(lái)實(shí)現(xiàn)。利用透視、顏色、對(duì)比度和正負(fù)空間同樣可以幫助達(dá)到這種想要的效果。
從左到右的不易察覺(jué)的曲線將用戶的視線引導(dǎo)到頁(yè)面文字上
大?。╯cale）是設(shè)計(jì)中一個(gè)元素與另一個(gè)元素的相對(duì)大小。元素通過(guò)大小不同創(chuàng)建視覺(jué)層次，其中最大的元素首先會(huì)吸引用戶的注意力，因此看起來(lái)是最重要的。常規(guī)的設(shè)計(jì)策略就是將最重要的元素做成最大的，然后逐級(jí)遞減。
比例(Proportion)不同于大小，類似但有區(qū)別。比例原則是指一個(gè)整體設(shè)計(jì)中各部分的尺寸關(guān)系。設(shè)計(jì)中的元素可以有各種大小，但它們之間的大小差異，整體來(lái)看就是比例。
熟練地使用大小和比例是實(shí)現(xiàn)設(shè)計(jì)統(tǒng)一的關(guān)鍵。當(dāng)一些元素的大小過(guò)大或過(guò)小，或者比例失調(diào)時(shí)，設(shè)計(jì)組合就會(huì)失去統(tǒng)一性。這種錯(cuò)誤可能發(fā)生在排版和其他元素上。例如，標(biāo)題與子標(biāo)題和正文相比顯得過(guò)大。當(dāng)設(shè)計(jì)元素失衡時(shí)，設(shè)計(jì)就會(huì)“感覺(jué)不平衡”。
大小和比例都沒(méi)做好時(shí)(左圖)，看起來(lái)處理的比較細(xì)致了，但依然沒(méi)有做到很好，在大小上正文和標(biāo)題分不清(右圖)
強(qiáng)調(diào)原則用于使設(shè)計(jì)的某些元素突出(使用對(duì)比、接近、比例、留白等)或不突出，即弱化強(qiáng)調(diào)(例如在頁(yè)面底部有一個(gè)幾乎看不見(jiàn)的“小字”)。強(qiáng)調(diào)是層級(jí)之母，因?yàn)闆](méi)有強(qiáng)調(diào)就沒(méi)有層級(jí)。
與其他一些設(shè)計(jì)原則一樣，“強(qiáng)調(diào)”是用來(lái)引導(dǎo)人們關(guān)注設(shè)計(jì)，并強(qiáng)調(diào)需要重點(diǎn)關(guān)注的第一、第二和第三點(diǎn)。首頁(yè)面和電商轉(zhuǎn)化頁(yè)面在99%的情況下都使用這種原則。
使用這個(gè)原則，在購(gòu)物網(wǎng)站上強(qiáng)調(diào)了標(biāo)語(yǔ)和產(chǎn)品，轉(zhuǎn)化效果非常好
統(tǒng)一是指設(shè)計(jì)元素如何很好地結(jié)合在一起，形成“視覺(jué)凝聚力”。它指的是設(shè)計(jì)中的連貫性，讓人們覺(jué)得所有部分都是一起的。每個(gè)元素都應(yīng)該具有清晰的視覺(jué)關(guān)系，以幫助傳達(dá)清晰、簡(jiǎn)潔的信息。整體性好的設(shè)計(jì)比整體性差的設(shè)計(jì)更有條理，質(zhì)量也更高。
運(yùn)用統(tǒng)一的配色，重復(fù)、平衡和對(duì)稱之類的原則將有助于在設(shè)計(jì)中形成一種和諧感，也就是一致性。設(shè)計(jì)中良好的一致性就好比歌曲中一首歌被和諧地唱出來(lái)，形成一個(gè)完美的整體。
一致的顏色、重復(fù)的圖案、平衡和對(duì)稱在蒂芙尼的網(wǎng)站上創(chuàng)造了一種統(tǒng)一的感覺(jué)。
格式塔的接近原則讓設(shè)計(jì)師將同類型的相關(guān)元素進(jìn)行分組。把它們分開(kāi)得更遠(yuǎn)，元素就顯得越不相關(guān)，它們之間的關(guān)系就會(huì)減弱。一般來(lái)說(shuō)，人們會(huì)認(rèn)為遠(yuǎn)離的元素是不相關(guān)的。
不應(yīng)該讓用戶在設(shè)計(jì)中分辨哪些元素是相互關(guān)聯(lián)的，正如美國(guó)郵政服務(wù)的例子所顯示的那樣，缺乏對(duì)鄰近性的關(guān)注會(huì)導(dǎo)致直接的認(rèn)知緊張，損害用戶體驗(yàn)。
接近原則沒(méi)做好的案例。由于字段標(biāo)簽離它們下面的字段更近，人們可能會(huì)搞混。
下面是一個(gè)鄰近性原則做的好的案例，我們可以看到相關(guān)元素是如何通過(guò)鄰近性關(guān)聯(lián)起來(lái)的(分組的元素用紫色表示)
一個(gè)把接近原則用好的網(wǎng)頁(yè)設(shè)計(jì)案例
一致性原則使數(shù)字產(chǎn)品的使用更加可預(yù)測(cè)，符合用戶的期望。設(shè)計(jì)中的一致性可以培養(yǎng)熟悉度，它可以提高用戶體驗(yàn)、可用性和用戶使用效率。另一方面，不一致的設(shè)計(jì)將產(chǎn)生更多的認(rèn)知負(fù)荷/腦力勞動(dòng)，并導(dǎo)致困惑和挫折。這就相當(dāng)于在用戶的路徑上設(shè)置障礙。讓用戶的心流嘎然而止!
做好一致性可以增強(qiáng)“審美凝聚力”。“我們都知道，當(dāng)我們使用應(yīng)用時(shí)，應(yīng)用的導(dǎo)航位置如果經(jīng)常變化，或者像“加入購(gòu)物車”這樣的主按鈕在不同屏幕上從紅色變成綠色，這是多么令人沮喪。
除了視覺(jué)一致性和易用性，品牌一致性在產(chǎn)品設(shè)計(jì)中也發(fā)揮著重要作用。如果沒(méi)有一致的元素呈現(xiàn)，如排版、配色和圖案，高質(zhì)量的品牌體驗(yàn)將無(wú)法傳遞。
在用戶體驗(yàn)方面，一致性意味著在設(shè)計(jì)中使用相似的UI元素來(lái)完成相似的任務(wù)，即在整個(gè)產(chǎn)品中擁有相似的功能和行為。因?yàn)榭捎眯允且环N評(píng)估用戶界面易用性的質(zhì)量屬性，所以一致性對(duì)用戶體驗(yàn)的可用性有很大的貢獻(xiàn)。
一致性是通過(guò)使用相同的配色、排版、間距、模式和交互來(lái)實(shí)現(xiàn)的。
色彩心理學(xué)也不容忽視。色彩承載著意義和情感，可以向人的潛意識(shí)傳遞信息。在品牌方面，人們對(duì)顏色做了大量的心理學(xué)研究，因?yàn)樵谌藗兣c品牌進(jìn)行任何互動(dòng)之前，顏色會(huì)讓他們產(chǎn)生一種本能的反應(yīng)。例如，藍(lán)色通常被認(rèn)為是可靠的、安全的和平靜的，想想銀行；而紅色是刺激的，被認(rèn)為是增加人們的心率，想想飲料包裝。
一個(gè)極簡(jiǎn)主義的暗色主題設(shè)計(jì)傳達(dá)了一個(gè)特定的品牌氣質(zhì)，并使用了少量的顏色。
排版在設(shè)計(jì)中扮演著非常重要的角色，它的重要性再怎么強(qiáng)調(diào)都不為過(guò)。在構(gòu)圖中，字體樣式對(duì)人們感知設(shè)計(jì)的影響比任何其他元素都大，可能除了顏色。
因?yàn)槲覀兊拇竽X以閃電般的速度運(yùn)轉(zhuǎn)，一個(gè)字體會(huì)對(duì)一個(gè)設(shè)計(jì)產(chǎn)生影響，以至于它可能在不到一眨眼的時(shí)間內(nèi)改變用戶的印象。與顏色一樣，字體甚至?xí)绊懳覀兊那榫w，資深設(shè)計(jì)師可以通過(guò)字體傳達(dá)情緒和風(fēng)格。通過(guò)選擇合適的字體，我們可以傳達(dá)出穩(wěn)定、優(yōu)雅、舒適、可靠、有力等信息。
排版層次結(jié)構(gòu)可以快速建立視覺(jué)層次結(jié)構(gòu)，并且通常在其中扮演重要角色。因此，在設(shè)計(jì)中經(jīng)常使用不同的字體和字體大小來(lái)表示層次結(jié)構(gòu)，例如標(biāo)題、副標(biāo)題、正文和引用。
“除了確保文本清晰易讀，排版可以幫助你理清信息層次，傳達(dá)重要內(nèi)容，并表達(dá)你的品牌?！?——蘋果的人機(jī)界面指南
蘭博基尼的網(wǎng)站巧妙地使用了排版風(fēng)格和比例來(lái)賦予其設(shè)計(jì)力量
Claude Debussy 曾說(shuō)過(guò)，“音樂(lè)是音符之間的空間“。同樣的觀點(diǎn)也適用于設(shè)計(jì)，元素之間的負(fù)空間給予設(shè)計(jì)強(qiáng)調(diào)、平衡和統(tǒng)一。
元素周圍適當(dāng)?shù)呢?fù)空間將焦點(diǎn)集中在元素本身。它強(qiáng)調(diào)了內(nèi)容，并提供了必要的喘息空間，以確保布局不顯得雜亂。沒(méi)有了呼吸空間，人腦就不太可能掃描興趣點(diǎn)，更容易感到困惑。
蘋果官網(wǎng)提供了一個(gè)利用負(fù)空間創(chuàng)造強(qiáng)烈焦點(diǎn)的杰出例子。
人們已經(jīng)開(kāi)始期待所有平臺(tái)和設(shè)備上的優(yōu)化、無(wú)阻礙的用戶體驗(yàn)。理解設(shè)計(jì)原則及其交互方式對(duì)所有設(shè)計(jì)師來(lái)說(shuō)都是至關(guān)重要的。使用專業(yè)技能設(shè)計(jì)它們是創(chuàng)造具有視覺(jué)吸引力的功能性設(shè)計(jì)的關(guān)鍵。我們不要忘記，美學(xué)的完整性會(huì)嚴(yán)重影響用戶體驗(yàn)。
基于原則的設(shè)計(jì)是設(shè)計(jì)師在感覺(jué)有點(diǎn)迷失或用盡創(chuàng)意時(shí)可以依賴的黃金標(biāo)準(zhǔn)方法。在沒(méi)有理解和實(shí)現(xiàn)設(shè)計(jì)原則的情況下，也可能實(shí)現(xiàn)可接受的設(shè)計(jì)。然而，這可能需要大量的嘗試和錯(cuò)誤才能創(chuàng)造出看起來(lái)不錯(cuò)的內(nèi)容，并創(chuàng)造出最佳的用戶體驗(yàn)。
產(chǎn)品的美學(xué)質(zhì)量與它的實(shí)用性密不可分，因?yàn)槲覀兠刻焓褂玫漠a(chǎn)品影響著我們和我們的幸福。”但只有精心制作的物品才會(huì)美麗。— Dieter Rams(迪特爾·拉姆斯)
當(dāng)我們不關(guān)注由設(shè)計(jì)原則驅(qū)動(dòng)的設(shè)計(jì)質(zhì)量時(shí)，我們可能會(huì)忽視品牌質(zhì)量及其所代表的一切。當(dāng)某些東西設(shè)計(jì)不好時(shí)，品牌就會(huì)受到傷害，產(chǎn)品也會(huì)受到影響。這就是為什么偉大的設(shè)計(jì)師在他們的工作中極其嚴(yán)謹(jǐn)， 他們知道“你永遠(yuǎn)不會(huì)有第二次機(jī)會(huì)給人留下良好的第一印象。”
設(shè)計(jì)的細(xì)節(jié)成就了設(shè)計(jì)本身?！?查爾斯 伊姆斯（Charles Eames）
作者：彩云Sky 來(lái)源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(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)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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