六、B端C化未來的設計方向
文章來源：優(yōu)設網(wǎng) 作者：酷家樂UED
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
眾所周知，「用戶體驗五要素」出自Jesse James Garrett 的《用戶體驗要素》一書：戰(zhàn)略層、范圍層、結(jié)構層、框架層、表現(xiàn)層。
產(chǎn)品設計者和開發(fā)者的角度可以對應理解為：為什么做、做到什么程度、這些東西如何組成、規(guī)劃用戶操作行為、如何呈現(xiàn)這些東西。
「Live Activities設計規(guī)范」由蘋果出品，原文為英文，上一篇已翻譯https://www.yuque.com/viola-ddvdh/yb7quv/uwdod71707e4nez8。上篇也提到了個人對其內(nèi)容的敘述方式存在一點意見。為了更好的記住&理解「Live Activities設計規(guī)范」，使用比較熟悉的「用戶體驗五要素」對內(nèi)容進行整理。
原文提供的Live Activity定義如下：
“A Live Activity displays up-to-date information from your app, allowing people to view the progress of events or tasks at a glance.”
“Live Activities help people keep track of tasks and events that they care about, offering persistent locations for displaying information that updates frequently. ”
從原文可以提煉出Live Activity顯示特點：
1. 內(nèi)容是頻繁更新的、有進度/狀態(tài)顯示的、用戶關心的。
2. 內(nèi)容的信息量是一眼就能看完的程度。
但上述仍是表象，并非實質(zhì)，接下來思考這幾個問題：
1. 為什么顯示的是進度/狀態(tài)頻繁更新的內(nèi)容？
2. 為什么要強調(diào)用戶關心的？
3. 為什么信息量是一眼就能看完的程度？
沒有Live Activity時，頻繁更新主要靠push推送。但push容易被其他APP的push覆蓋，且隨著各種APP的頻繁使用，用戶獲取關鍵信息的效率和通過push打開APP的次數(shù)反而在下降。
進度/狀態(tài)頻繁更新的內(nèi)容，說明每個狀態(tài)存在的時間短，如果被覆蓋/忽略，同一狀態(tài)就不再復現(xiàn)，用戶所關心的，或APP所希望用戶關心的，就看不到了。比如：什么時候取外賣、待付款、上傳成功等等。
當下我們所處的時代是信息泛濫的時代，需要對信息作精簡，但用戶的操作是可以多條線進行的，比如比如邊看劇邊吃飯、上班摸魚/等外賣、比如聽音樂的時候?qū)懽鳌?
信息內(nèi)容和量是官網(wǎng)一直在強調(diào)的，需要精簡，只展示用戶需要的，基本達到一眼看完的程度，目的就是知道變化的是什么，當前狀態(tài)是什么。
分析了這么多，大膽推測一下Live Activity的設計初衷是：快&準確&輕。而終極目的是打動用戶，形成好體驗，進而推動口碑和銷售；為各APP提供新的通知形式，互惠互利。當然Live Activity在一定程度上也彌補了硬件上的缺憾。
關于這個層次相當于規(guī)定功能范圍&信息邊界限制，就是什么要，什么不能要。這部分的信息官網(wǎng)給出許多，在此將其分類梳理如下，為避免大家不好查找官網(wǎng)/譯文對應出處，在句未已標注。
1. 僅iPhone支持，iPadOS、macOS、tvOS或watchOS不支持。（源自：平臺注意事項）
2. 非iPhone14的僅針對iOS16有鎖屏Live Activity展示。（源自：什么是Live Activity-鎖屏）
3. 支持用戶手動清除鎖屏狀態(tài)下的Live Activity。（源自：實際操作）
4. 支持用戶直接關閉對應APP的Live Activity。（源自：最佳實踐方式第3/c條）
5. 支持Live Activity自動開始&結(jié)束。（源自：最佳實踐方式第6/f條）
6. 限制跟蹤活動/狀態(tài)時長不超過8小時。（源自：最佳實踐方式第1/a條）
7. 限制活動/進程結(jié)束后展示時長不超過4小時。（源自：最佳實踐方式第8/h條）
8. 支持更改背景顏色&不透明度。（源自：設計有用的Live Activity第5/e條）
9. 限制內(nèi)容布局。（源自：設計有用的Live Activity第5/e條）
10. 限制不同設備的展示尺寸。（源自：規(guī)范）
1. 避免在Live Activity中顯示敏感信息。（源自：最佳實踐方式第4/d條）
2. 避免在Live Activity中顯示廣告和促銷活動。（源自：最佳實踐方式第5/e條）
3. 只提供正在進行的任務/事件的關鍵摘要。（源自：最佳實踐方式第2/b條）
4. 在任務/活動結(jié)束前，給用戶提供關閉Live Activity按鈕。（源自：最佳實踐方式第6/f條）
5. 點擊Live Activity直接定位到對應頁面，無需用戶二次導航。（源自：最佳實踐方式第7/g條）
6. 考慮在活動結(jié)束后，鎖屏上在合理時段后自動刪除Live Activity。（源自：最佳實踐方式第8/g條）
（個人猜測）由于是提供一個展示區(qū)域，且展示區(qū)域有限，所以對于層級架構，一級展示什么，二級展示什么，各階段展示什么，這些都沒有做明確規(guī)定&建議。各家APP可以根據(jù)自身實際情況進行設計。
通過Live Activity的展示形式，可以總結(jié)為2點：吸引、查看（摘要&詳情）。
1. 一般是在原深感攝像頭兩側(cè)展示（電話會直接展示擴展型），分為緊湊型和最小化。
2. 緊湊型在僅有一個活動/事件的時候展示，雖被原深感攝像頭分割兩端，但僅作為一條信息展示，為了視覺上的統(tǒng)一，這里的顏色不支持開發(fā)設置，使用的是系統(tǒng)默認色值。
3. 最小化在存在多個活動的時候展現(xiàn)，左側(cè)和原深感攝像頭粘連，右側(cè)獨立成島。
4. 不管是緊湊型，還是最小化，都可以通過點擊原深感攝像頭區(qū)域，進入APP內(nèi)頁，或者長按喚出擴展型。
1. 進入內(nèi)頁的查看基本就是各家顯神通了，這里主要講擴展型和鎖屏。
2. 原則上是不支持在擴展型和鎖屏做復雜操作的，基本點擊是進入APP。
3. 擴展型是用戶長按緊湊型/最小化喚起的展示區(qū)域，內(nèi)容是可以自定義的，當然官方也給了相應的建議，具體如下。內(nèi)容信息種類多的可以采用這種信息左中右排布，底部預留大按鈕。內(nèi)容信息少的可以采用左內(nèi)容右操作的方式。
4. 根據(jù)一致性原則，鎖屏展示的布局框架應該與擴展型差不多，同樣可以點擊打開APP。只是在鎖屏狀態(tài)如果有多個任務同時進行，是會全部展示的，所以要注意品牌的傳遞，避免用戶混淆服務方。
對于如何呈現(xiàn)這些東西，蘋果還是寫了很多建議，確保視覺上的一致性和美觀。
1. 緊湊型狀態(tài)下，為了保證兩側(cè)信息的連貫，除了語句閱讀連貫，還需要在圖形和顏色上具有一致性，視覺上連貫。
2. 鎖屏狀態(tài)下的背景是可以自定義顏色、圖像、不透明度的，當然文字的色值和不透明度也是可以定義的。這就涉及到兩者間的對比度對信息閱讀的影響。
3. 設計師不僅要考慮最佳狀態(tài)，還有深色&淺色模式下的，以及不同環(huán)境光、設備亮度下的顯示。還有一點很容易忽視的，就是在用戶自定義的墻紙下顯示的效果。不僅要注意信息獲取，還需要考慮美感問題。
1. 緊湊型和擴展型之間的布局要保持一致，兩者間的變化過渡效果是可以預測的。
2. 一般來說，擴展型和鎖屏狀態(tài)下的信息間標準間距是20pt。
3. 在某些情況下，例如圖形和按鈕，您可能需要使用更緊湊的邊距，以避免擠滿邊緣或形成混亂的外觀。
1. 內(nèi)容和Live Activity邊緣之間的邊距需要保持一致，請遵循SwiftUI規(guī)則。
1內(nèi)容和Live Activity邊緣之間的邊距需要保持一致，，發(fā)現(xiàn)以圓角邊界為測距點得到的間距關系較為舒適。即：圓形/大致為圓形的圖形保持上下，3. 以及左側(cè)或者右側(cè)間距一致即可；方形/大致為方形的圖形保持圓角邊界與容器圓角邊界垂直對齊即可。同一位置的多個圖形圓角需要相對統(tǒng)一，才能確保間距的一致性。
需要適應不同機型的尺寸。具體的尺寸規(guī)范如下。
動態(tài)島使用44個點的角半徑，其圓角形狀與原深感攝像頭相匹配。
下表中列出的所有值均以pt為單位。
ps：左側(cè)為寬度，右側(cè)為高度。
以上就是整理分析的全部。
在整理分析過程中加強了對「用戶體驗5要素」各個層劃分的理解，也對Live Activity在各個層次上的要求更加明確。
企業(yè)級B端產(chǎn)品具有行業(yè)壁壘高、業(yè)務復雜、服務角色多等特點，在大型迭代項目中，如何做好設計協(xié)同，把握設計一致性和還原度常常讓很多設計團隊感覺無從下手，找不到切入點。在長期的項目實踐中我們發(fā)現(xiàn)，做好設計規(guī)范能規(guī)范可以幫助個人、團隊以及整個企業(yè)提高效率和產(chǎn)出質(zhì)量，保障用戶體驗統(tǒng)一。
那么，我們該如何做好體驗標準化，保障基礎體驗一致性？下面將和大家分享我們公司在構建設計規(guī)范的實踐案例。
以我們設計團隊為例，隨著業(yè)務不斷擴大，定制化需求不斷增加，大型迭代項目做不好設計和開發(fā)協(xié)同，導致出現(xiàn)“體驗一致性差”“設計效率低”“還原度不可控”等問題。如何有效解決這些問題呢？可以通過構建設計規(guī)范，以保證一致性，實現(xiàn)工作提效。
從不同角度出發(fā)，構建設計規(guī)范都能發(fā)揮積極的作用。
對企業(yè)來說：有利于實現(xiàn)產(chǎn)品經(jīng)理、設計和研發(fā)的輸出一致。設計側(cè)主動建立產(chǎn)品設計規(guī)范，很大程度上是為了做好設計管控，實現(xiàn)原型、設計稿到線上頁面統(tǒng)一的設計語言，從根本上提升設計質(zhì)量和還原度，提高用戶滿意度。
對個人來說：當多個設計師共同協(xié)作同一項目時，由于設計理解不一致等原因，容易出現(xiàn)設計控件使用混亂等問題。若有詳細的設計規(guī)范作為引導，有利于實現(xiàn)產(chǎn)品各個模塊間的一致性。組件化的工具也能減少機械重復性的工作，讓設計師將更多精力投入到用戶研究和提升用戶體驗上。
產(chǎn)品有不同發(fā)展階段，設計規(guī)范同樣也有，不同階段下的產(chǎn)品目標和規(guī)范需要覆蓋的內(nèi)容都不盡相同。我們要既要避免做多，保證投入產(chǎn)出比最大化；同時也要構建一個合理的規(guī)范迭代思路。
該階段的產(chǎn)品核心目標是「驗證產(chǎn)品或商業(yè)模型」，業(yè)務需求都是小步快跑、頻繁迭代。產(chǎn)品處于從0到1的野蠻生長狀態(tài)，存在著“先滿足功能，再優(yōu)化體驗”的情況，導致該階段的產(chǎn)品體驗往往不太過關。
搭建目的：通過定義原則，梳理關鍵頁面和流程，搭建基本的規(guī)范框架。既讓團隊對產(chǎn)品有統(tǒng)一的設計價值觀和認知判斷；從頁面到流程，又能對應設計參照標準；同時業(yè)務可以在規(guī)定的框架下發(fā)展，不僅讓產(chǎn)品體驗的根基牢固，而且不會限制功能設計自由。
搭建范圍：「全局說明」「頁面布局」「通用流程」
該階段的產(chǎn)品基本形態(tài)已穩(wěn)定，也形成了初步的模型結(jié)構。后續(xù)迭代是在現(xiàn)有結(jié)構的基礎上，進行增加或優(yōu)化功能。雖然探索期定義了產(chǎn)品原則、布局和流程，但探索期產(chǎn)品的自由生長，會導致不少設計細節(jié)不一致，從而影響了產(chǎn)品整體的體驗和效率。
搭建目的：通過回溯整理過往設計，沉淀優(yōu)化成完整的交互規(guī)范。再根據(jù)規(guī)范統(tǒng)一產(chǎn)品體驗，進一步優(yōu)化流程和效率， 讓整個產(chǎn)品體驗達到相對穩(wěn)定的狀態(tài)。
搭建范圍：「全局說明」「頁面布局」「通用流程」「基礎組件」「業(yè)務組件」
好的設計規(guī)范有很多優(yōu)秀的例子，例如Google、Apple、Microsoft這些引領全球設計風尚的公司，設計規(guī)范已經(jīng)上升為設計語言，指導旗下所有產(chǎn)品的設計。國內(nèi)做的優(yōu)秀的案例，比如Ant Design，Element，arco.design等，像這類的產(chǎn)品已經(jīng)實現(xiàn)了端到端的體驗一致，把交互、前端和視覺的事情一并解決了，是值得學習的典范。這些優(yōu)秀的設計規(guī)范都包含以下幾個特點：靈活性，可擴展性，系統(tǒng)性和標準性。
一般團隊內(nèi)部構建的設計規(guī)范都源于某一產(chǎn)品或者業(yè)務，因為主要是團隊內(nèi)部成員使用，追求的是投入產(chǎn)出比最大化。所以可在行業(yè)通用設計規(guī)范的基礎上，適度參考行業(yè)設計規(guī)范，能復用的直接參考，同時專注于業(yè)務本身，具有業(yè)務特性的再集合業(yè)務綜合考慮，使整個規(guī)范制定效率更高，科學性、指導性更強。
設計規(guī)范的執(zhí)行和推動主要分為四大步驟：
類型梳理：分析業(yè)務場景，整理和歸類組件，評估具體組件優(yōu)先級和迭代計劃；
全局說明：統(tǒng)一布局，色板，字體，常用樣式，規(guī)范設計語言；
抽象設計：將設計共性抽象出來，構建組件通用方案；
效果驗證：通過定性/定量數(shù)據(jù)追蹤效果，分析原因，迭代改進；
收集現(xiàn)有設計頁面，分析業(yè)務場景，再參考行業(yè)通用規(guī)范的定義，整理和歸類組件，可以先羅列完整，再根據(jù)產(chǎn)品實際業(yè)務需要進行增刪改。
全局說明：明確影響整站各個模塊、各個頁面設計的原則和規(guī)范，指導我們后續(xù)各種規(guī)范的定義和設計。包括統(tǒng)一布局，色板，字體，樣式等設計規(guī)則。
基礎組件：可參考行業(yè)通用規(guī)范中的基礎組件分類和組成，因為大部分基礎組件都具有一定的通用性，站在巨人的肩膀上更高效。這里我們根據(jù)實際情況，將基礎組件分為導航，通用，數(shù)據(jù)展示，數(shù)據(jù)錄入，反饋5個大模塊，每個模塊下再細分各小類，構成基礎組件的類目。
業(yè)務組件：根據(jù)業(yè)務需求，可以定義屬于自己的業(yè)務組件，這也是區(qū)別于其他通用行業(yè)組件庫的一個核心部分。
因為在大體量產(chǎn)品設計中，每個模塊都由不同的同學負責，這樣全局產(chǎn)品的把握就會降低，需要去補充全局規(guī)范說明去維持產(chǎn)品全局通用部分的一致性。包括布局，色彩規(guī)范，字體，樣式等；
抽象設計是設計規(guī)范中最核心，工作量最大，難度最高的一個環(huán)節(jié)。我們可以將它拆解成幾個部分，先做出基礎組件，再基于基礎組件和業(yè)務需求抽象設計業(yè)務組件，最后抽象成頁面模板。
基礎組件
組件庫的搭建，就一定要提到原子思維。道爾頓原子論認為，物質(zhì)世界的最小單位是原子，原子是單一的，獨立的，不可被分割的，在化學變化中保持著穩(wěn)定的狀態(tài)。這個原子理論同樣適用于設計系統(tǒng)中。
其中，最小單位設計元素就是基礎組件。我們在做設計系統(tǒng)的時候希望當你改動任何一個原子，你有自信其他所有依賴于這個原子的部件全部自動更新。只有滿足了這一點，設計系統(tǒng)設想中的效率、解放生產(chǎn)力才會真正實現(xiàn)。例如，在sketch中，分享樣式和嵌套符號的使用。
業(yè)務組件
在構建完基礎組件后，可以根據(jù)業(yè)務需求，將使用頻率較高的組件進行評估，抽象成業(yè)務組件。
一般業(yè)務組件可分成兩大類：
一類是由多個基礎組件組成的帶有業(yè)務需求復合組件，如：復合標簽，快捷時間選擇器等；
另一類是針對特定業(yè)務場景的業(yè)務組件：如地圖，站點等；
頁面模版
在完成基礎組件和業(yè)務組件的構建后，我們可以根據(jù)全局說明，利用組件搭建頁面模板。頁面模版不僅能有效的提升組件的使用效率，也能提供很好的組件使用示范效應，加強設計說明和組件之間的結(jié)合。
組件質(zhì)量評估：從物理到行為層，包括樣式、組件、框架、組件交互 共4個維度。通過一致性評分衡量標準化覆蓋的好壞。
系統(tǒng)應用層面的評價：
系統(tǒng)是否幫助業(yè)務提效；
當業(yè)務不能直接應用系統(tǒng)，能否靈活改動；
系統(tǒng)是否幫助業(yè)務變得更有競爭力、更創(chuàng)新；
迭代機制
當我們完成設計規(guī)范的整體構建后，對于新需求，通過評估復用性、通用性和優(yōu)先級，低級別的走定制設計完成交付。高級別的通過抽象設計、內(nèi)審、沉淀到組件庫中。
機制提效
在完成設計規(guī)范的構建后，我們可以聯(lián)合產(chǎn)品經(jīng)理和前端工程師，幫助每個環(huán)節(jié)的人員快速搭建產(chǎn)出物，推動上下游機制提效。
例如，我們會基于設計規(guī)范，為產(chǎn)品經(jīng)理提供符合設計規(guī)范的Axure元件庫，產(chǎn)品經(jīng)理使用元件庫，可以快速搭建原型，產(chǎn)出prd，與設計師、開發(fā)的溝通也更加順暢。簡單的修改可以跳過設計師出圖這一步驟，直接和開發(fā)溝通，極大加快前期的節(jié)奏。甚至通過借助元件庫，產(chǎn)品經(jīng)理可以搭建出高保真原型，用于直接和用戶確認或者給客戶進行demo的演示。
基于設計規(guī)范，推動研發(fā)實現(xiàn)組件代碼化，通過設計標準化可以達到研發(fā)工業(yè)化。通過定義標準規(guī)范，提高流程、組件的復用率，開發(fā)側(cè)就可以制定相應組件，形成前端腳手架，方便后期迭代的組件化使用，有效地避免不必要的分歧點和重復造輪子，同時減少上線前設計走查、測試的工作量，保證落地效果，提升生產(chǎn)力。
以上就是我們在構建自己的企業(yè)設計規(guī)范的流程，最后，給大家展示一下，我們目前的企業(yè)設計規(guī)范和部分應用情況。
2022年新建裝扮中心整合各類裝扮的分發(fā)入口。搭建皮膚商城、主頁背景商城、頭像商城、掛件商城4大裝扮基建；高效擴充皮膚、掛件、個人主頁封面和頭像等個性化裝扮資產(chǎn)，受到年輕用戶的喜愛，佩戴裝扮用戶迅速增長數(shù)以百萬計。
0-1搭建拓裝扮資產(chǎn)規(guī)模的經(jīng)驗，今日與大家分享。
一 整合升級四大裝扮基建，搭建系統(tǒng)裝扮能力
拓新裝扮場景，提升裝扮曝光：百度APP個性化裝扮場景已覆蓋首頁皮膚、個人中心皮膚、個人主頁封面、個性化掛件和頭像。
我們將百度APP原有的裝扮能力整合升級，新建“裝扮中心”統(tǒng)一分發(fā)，并在個人中心增加了一級入口，為更多的裝扮形式與玩法創(chuàng)造更多可能。通過裝扮中心、皮膚商城、個人主頁背景商城、掛件商城、頭像商城“四大裝扮基建”支撐百度APP個性化裝扮的分發(fā)和佩戴操作。
提供易用的裝扮佩戴體驗，增強裝扮展現(xiàn)的吸引力，是裝扮基建方向的設計目標。
1. 易用性
我們在全場景提供實時預覽能力，裝扮預覽所見即所得；按裝扮類型統(tǒng)一界面布局，降低理解成本。
2. 增強裝扮吸引力
2-1 提升裝扮展現(xiàn)豐富度：
裝扮中心作為裝扮聚合展現(xiàn)核心場景，提供套裝裝扮，界面內(nèi)融入豐富動效、定義刷新策略持續(xù)推薦新內(nèi)容，增加對裝扮運營展現(xiàn)能力。
2-2 串聯(lián)互通增強可逛性:
各裝扮能力之間串聯(lián)互通，通過分發(fā)場景間跳轉(zhuǎn)進行交叉推薦增強裝扮吸引力。我們從三條路徑上為裝扮拓展了分發(fā)入口。第一條：裝扮功能內(nèi)的場景，在裝扮商城之間增加相關功能跳轉(zhuǎn)、在皮膚和套裝的預覽頁底部拓展更多推薦入口。第二條：在用戶的非裝扮使用路徑上拓展入口，如在頭像預覽頁、個人主頁背景預覽頁引導用戶設置頭像和個人主頁背景。第三條：以非常駐的彈窗形式，推薦裝扮活動，吸引用戶體驗裝扮功能。
2-3 豐富裝扮玩法：
a. 限時免費裝扮：精品套裝裝扮包括動態(tài)皮膚、動態(tài)頭像、掛件、個人主頁封面，支持一鍵佩戴四項個性化裝扮，是百度APP的付費裝扮功能。我們探索限時開放給用戶免費使用玩法，效果超預期，收獲了一大波裝扮新用戶。
b. 結(jié)合任務活動：將“佩戴裝扮”作為運營任務，幫助用戶獲取任務金幣，也把熱門裝扮作為任務獎勵。
c. 與大型運營活動結(jié)合：與世界杯大型運營活動結(jié)合，設計度曉曉世界杯16強球隊套裝皮膚，通過限免使用，提升裝扮滲透。
二 持續(xù)擴充皮膚/掛件/個人主頁封面/頭像等個性化裝扮資產(chǎn)
裝扮資產(chǎn)擴規(guī)模，重點考量通過提升設計質(zhì)量增加裝扮吸引力和快速擴規(guī)模的效能如何提升。
1. 精細化打磨，打造百度APP裝扮套裝
1-1 表現(xiàn)手法-本能層：
深入研究畫面風格，在年輕化現(xiàn)代審美指導下，選擇偏東方的設計風格，如國風、二次元風格等，因為這類風格多用圖形、線條、顏色來處理空間關系，畫面不會過于厚重，既迎合年輕用戶喜好，又不過多打擾APP內(nèi)容區(qū)域閱讀消費。
舉例：七月中元節(jié)的裝扮設計中，整體配色偏暗、低飽和度的深紫色、偏灰的藍色，可以傳達出靜謐、神秘的氛圍。在色彩構圖中沒有用過多的色彩搭配，使用高明度差來刻畫畫面結(jié)構，因為明度反差處于人視覺的最底層。如果能用黑白反差區(qū)分層次，會首選黑白。在周圍環(huán)境色中使用偏灰的藍、紫色，并且與人身上的暖色對比，讓人物更加突出。而在畫面元素的刻畫上增加飄帶、魚尾的流動感，這種帶有東方感的元素，這種留白、平衡構圖和俠氣感，也有很強的東方特征，同時通過厚涂風格中常用的使用飽和度差異、大透視效果營造場景的空間感，增加畫面的細膩程度。
1-2 內(nèi)容-行為層：
在裝扮具體的內(nèi)容繪制中融入共情元素，吸引用戶注意。比如結(jié)合節(jié)日、大事件推送套裝，并在繪制中增加洛麗塔、國風、JK等年輕用戶感興趣的元素。
1-3 內(nèi)涵-反思層：
通過積極情緒引導、激發(fā)思考，讓用戶感到心之向往或心生愉悅，可使用神情、動作、裝飾花的花語等多種手段進行情緒暗示。
2 單品擴量，保證各類裝扮的更新頻率
與套裝制作不同，單品的更新需要更加短、頻、快，需要更加直接解決Z世代用戶痛點。
2-1 協(xié)助用戶搭建社交符號：
頭像，作為用戶在網(wǎng)絡世界身份的象征，我們從橫向團隊項目中大量引入能代表身份狀態(tài)、游戲愛好等方面的資源，快速補充頭像單品資源庫，我們也根據(jù)用戶調(diào)研了解到有76%用戶愿意和朋友使用“閨蜜/情侶頭像”，我們在頭像庫中上線情侶頭像，并將完善“頭像分享卡”等功能形成體驗閉環(huán)。
2-2 幫助用戶表達自我：
百度APP頭像掛件和游戲、社交、直播場景中的頭像框不同，并不為了彰顯關系、體現(xiàn)出社交關系中的尊貴感，百度APP用戶更希望借助頭像掛件來表達觀點，為自己的主張、個性貼標簽。
2-3 結(jié)合用戶興趣引起關注和共鳴：
在羅盤大數(shù)據(jù)中，我們發(fā)現(xiàn)，王者榮耀、和平精英、元神等游戲中，25歲以下年輕用戶的占比都非常大，并且都愿意花錢購買皮膚裝扮。二次元的游戲、動漫內(nèi)容不僅僅受Z世代喜愛，且Z世代的滲透率最為突出。各大手游設計中也在不斷的融入二次元元素，我們借力百度AI畫圖技術-文心大模型快速補充了二次元、游戲等風格方向的裝扮。
三 建立規(guī)范平臺，提物料輸出效率
為了展現(xiàn)更好的效果、適配更多的裝扮場景，且兼顧歷史與開發(fā)成本等原因，裝扮物料規(guī)則復雜，且種類繁多。《百度APP裝扮體系設計規(guī)范平臺》應運而生，它涵蓋 5 項裝扮能力、2項運營能力；每項能力均配有一鍵預覽及導出物料模板。隨功能迭代及時更新，保障了裝扮物料的高效輸出。
結(jié)語
目前百度APP裝扮已經(jīng)完成了第一階段的建設，沉淀出一批受用戶喜歡的裝扮資產(chǎn)，未來我們也將不斷探索、創(chuàng)新更多裝扮玩法，未來也將探索出共創(chuàng)平臺，成為一個裝扮生態(tài)。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
。
隨著技術及經(jīng)濟的發(fā)展，人們對計算機系統(tǒng)、機器等的要求，從單純的「 可以用 」逐漸變?yōu)橄胍?nbsp;更好用、容易用、用得舒服 」等更加豐富的使用體驗，也就是常聽到的好的「 用戶體驗 」。
「 用戶體驗（User Experience ）」這個概念，最早由唐納德·諾曼（Donald Arthur Norman）提出，他希望用這個詞，來涵蓋個人使用系統(tǒng)時的體驗、各個方面的體驗 ，包括工業(yè)設計圖形、交互界面、物理交互，以及與人的交互。
而「 用戶體驗 」產(chǎn)生的基礎，是「 用戶使用了機器 」，即人跟機器有發(fā)生接觸、交流、互動等，然后用戶會形成主觀上的體會、感受。這里的「 機器 」泛指各種「 產(chǎn)品 」，類比諾曼所說的，即物理界面、虛擬界面、系統(tǒng)、硬件等。
因此，好的「 用戶體驗 」是基于好的交互設計。而對交互設計「 好/壞 」的影響因素，涉及到人、產(chǎn)品、使用環(huán)境這三者，也就是人機工程的內(nèi)容。
概括一下百科對「 人機工程學 」的解釋：
將 「 使用物的人 」和 「 設計的物 」以及 「 人與物共處的環(huán)境 」作為一個系統(tǒng)來研究（人-機-環(huán)境系統(tǒng)）。在人、機、環(huán)境這三個要素 本身特性 的基礎上，科學地利用三個要素間的 有機聯(lián)系，來尋求系統(tǒng)的 最佳參數(shù)。
其中關于人的「 本身特性 」包括人體結(jié)構和機能特性。主要有人體各部位的尺寸、重量、面積、活動、相互關系等，眼耳鼻舌身對應的視、聽、嗅、味、觸覺，以及動作習慣和認知。這部分大愚認為可以把「 結(jié)構特性 」當作人的硬件，具有一定的普遍/通用性；而「 認知 」則是人的軟件，個體間存在一定差異。
然后，就到了這篇文章的主要內(nèi)容，人的「 結(jié)構特性 」部分。
注：下文中提及的人體結(jié)構特征是基于大部分人的情況描述，內(nèi)容也是圍繞人機交互有關的方面，不是人體結(jié)構特征的全面介紹。
人體結(jié)構中對人機交互產(chǎn)生影響的主要有眼、耳、身（皮膚）對應的：視覺、聽覺、觸覺，以及四肢、頸椎的尺寸、受力情況和活動幅度等。下文將對這四部分的基礎內(nèi)容進行整理，還有聊聊一些交互、體驗設計上的應用。
人與周圍環(huán)境發(fā)生聯(lián)系的感覺通道，最重要的就是「 視覺 」，約占80%的信息是通過視覺來獲得。因此「 視覺顯示 」是人機交互系統(tǒng)中用的最廣泛的一種形式。
人眼正常感受光譜的波長約在400nm-780nm之間（大概這個范圍，網(wǎng)上相關資料關于這個數(shù)值存在微小差異），對應的色相是紫色-深紅色，也就是常說的彩虹色。
而負責感受光的細胞是視錐細胞和視桿細胞。
視錐細胞，約占95%，復雜感受強光及有顏色（彩色）的視覺，在環(huán)境光線亮時起作用，用來區(qū)分色彩。研究數(shù)據(jù)表明視錐細胞對光譜中波長為555nm的「 黃綠色 」部分最敏感。
視桿細胞 ，約占5%，復雜感受弱光及沒有顏色（黑白）的視覺，在環(huán)境光線暗時起作用，用來區(qū)分黑白。研究數(shù)據(jù)表明視桿細胞對光譜中波長為507nm的「 青綠色 」部分最敏感，對極弱的光刺激敏感。
如果涉及一些特定的工作環(huán)境（昏暗）的應用設計時，就可以考慮下此時作用細胞的特性，進行合理的設計設置。
正常情況下，瞳孔會根據(jù)環(huán)境中的光量來調(diào)整大小。當有光線較強時，瞳孔會收縮變窄；當光線很暗時，瞳孔會膨脹來讓更多的光進入眼球。
可以把這個理解為一個保護機制，在強光下，通過收縮來減少光對眼睛的高強度刺激；而弱光下，對感光細胞刺激不足，為了不讓眼睛過分費力地去尋找目標和識別目標而引起視覺疲勞，所以瞳孔會放大，讓更多的光進入。
而接收光的刺激，看到物體后，是否可以準確獲取信息（看清物體、識別文本、圖像等）則跟視敏度相關。
視敏度 ，就是眼睛能分辨物體細微結(jié)構的能力，也就是看清物體的能力。相關實驗數(shù)據(jù)表明，增強亮度可以提高視敏度。也就是說，亮度越強，人眼對物體的識別能力就越強。
下面提到兩個實驗，其中「 正對比極性 」，指在淺色背景上顯示深色字體文本，就是對應我們界面設計中的「 淺色模式 」；而「 負對比極性 」，指在深色背景上顯示淺色字體文本，即「 深色/暗黑模式 」。
實驗1. 德國杜塞爾多夫精神病研究所的Cosima Piepenbrock等相關人員，對「對比極性對視敏度和校對的影響」的研究結(jié)果表明：人眼在「淺色模式」下的視敏度要優(yōu)于「暗黑模式」下，字體越小，淺色模式的優(yōu)勢就更明顯。
實驗2. Agelab實驗室的喬納森·多布雷斯（Jonathan Dobres）等相關人員，對「 環(huán)境光照條件（模擬白天/夜間）是否影響正對比度極性的優(yōu)勢」的研究表明：夜間，深色模式下閱讀小字體文本比淺色模式下閱讀要困難得多。 而人們對文本的識別，「淺色模式」下比在「深色模式「要快，白天比晚上更快。
對上面兩個實驗可以用環(huán)境光的強弱對視敏度的影響來理解：為方便理解，可以假設我們的界面尺寸足夠大，大到覆蓋我們視野范圍，那就可以將淺色模式中的淺色背景類比為白天（環(huán)境光度亮），深色模式中的深色類比為夜間（環(huán)境光度弱），而屏幕內(nèi)的文本、信息，就是我們要識別的物體。亮度越強，人眼對物體的識別能力（視敏度）就越強。
從上面的實驗來看，無論在白天或夜間環(huán)境下，「 淺色模式 」都要比「 深色模式 」更好用。
但根據(jù)德國蒂賓根大學的Andrea Aleman等相關人員的一項研究表明，長時間處于「淺色模式」下可能會導致近視。其表現(xiàn)為，閱讀「淺色模式」下的文本時，脈絡膜（跟近視有關的一層膜）會明顯變??；而閱讀「深色模式」下的文本時，這層膜明顯變厚。
可以理解為長時間處于「淺色模式」下，意味著視敏度的持續(xù)維持在較高狀態(tài)，就像人在長時間高強度工作下可能會導致健康受損一樣，眼睛同樣也可能會受到損傷。因此相對長期來說，「深色模式」則是更友好的一種形式。
那通過適當?shù)脑O計，是否有可能找到這兩者之間的最優(yōu)解呢？
注視區(qū)域光照不足、光線過強、光線分布不均勻、光源閃爍、眩光、反光、目標過小、目標不穩(wěn)定等，都會造成眼睛超負荷工作，導致視覺疲勞。
光照不足，對應界面交互，可以指屏幕亮度過低，也可以理解為內(nèi)容和深色背景間的對比度不足。
光線過強，則是屏幕亮度過高，也可以理解為內(nèi)容和淺色背景間的對比度不足。還有大面積高明度色彩的使用。而像汽車遠光燈，也是常見的一種光線過強的產(chǎn)品，并且常常被錯誤使用。
閃爍，會對眼睛造成很大的負荷。在高亮度下，眼睛除了視敏度會增強外，對閃爍的感知也會增強。這方面涉及的產(chǎn)品設計，如顯示器的刷新頻率，要到達某一程度，人眼才感覺不到屏幕的閃爍。
目標過小，在可識別及相同環(huán)境下，目標過小，識別所需的時間越長，也就是更費眼。像界面中的元素，文本字號、圖標等，都需要有舒服的可讀性。
反光，跟工業(yè)產(chǎn)品設計的關系比較密，反光是很容易引起視覺疲勞的和視力傷害。但生活中好像處處有反光，高樓大廈連片的鏡面窗戶/墻、我們正在看的電腦屏幕、手機屏幕、公交車廣告牌的保護罩、汽車的后視鏡等等，都會在某些瞬間讓你覺得眼睛受到了億點傷害，這也是很常見的一種光污染。
水平方向上，雙眼視野角度通?？蛇_到120°視角。其中「 有效視域 」為30°，即人眼能立刻看清物體的存在和動作軌跡的范圍。其余部分稱為誘導視野，也就常說的「 余光 」。
而眼動（頭部不動）「 舒適轉(zhuǎn)動區(qū) 」通常為60°。
如果以眼睛距離屏幕40cm為例，水平最佳視野寬度大概就是21.6cm，在72dpi下，約為600px。在進行文本寬度設定時，可以以此作為依據(jù)，來設計內(nèi)容的顯示寬度。
垂直方向上，視野角度通?？蛇_到135°視角，「 有效視域 」為30°，「 舒適轉(zhuǎn)動區(qū) 」為55°。
關于「 最佳視角范圍 」及「 眼動舒適區(qū) 」的應用，在汽車領域的HMI設計和一些較為復雜的交互活動中有比較多的體現(xiàn)。
聽覺對信息傳遞的感知僅次于視覺，同視覺一樣，利用以前的經(jīng)驗來解釋輸入。
相比視覺，聽覺更容易引起注意，且反應速度快，可以捕捉各個方向的信息，不受照明條件限制。
人類聽覺系統(tǒng)對聲音的解釋可幫助設計人機交互界面中的語音界面，而對有能力缺陷的人，如視障人士來說，「 聽覺（語音交互） 」更是一種替代視覺顯示的重要形式。
聲音有三個要素：音調(diào)（頻率）、響度（振幅）、音色（材質(zhì)）。
人類可以聽到的聲音頻率范圍為20Hz-20kHz，正常情況下人耳可分辨出約 40多萬種 不同的聲音。
對語音的辨認頻率范圍為260Hz-5600Hz。正常情況下，人類語言的頻率在：500Hz-3000Hz之間。
感受性、識別性最高的頻率范圍在1000Hz-4000Hz，低于500Hz，或高于5000Hz時，要達到一定響度才能被聽到。
0－20dB，幾乎感覺不到
20－40dB，相當于低聲說話，輕柔的響聲
40－60dB，正常談話的聲音
60－70dB，會感到吵鬧、長時間會損害神經(jīng)細胞
超過70dB，讓人感覺煩躁，無法集中注意力
85-90dB，短時間內(nèi)影響人的聽力，破壞神經(jīng)細胞
超過90dB，聽力受損
超過140dB時，引起的是痛覺，而不是聽覺，會完全損害聽力（歐盟界定的導致聽力完全損害的最高臨界點）
人耳對各種音色的分辨能力非常強，對經(jīng)常聽到的音色也具有很強的記憶力。
比如在同一頻段同時演奏不同的樂器，人耳依然可以分辨出有哪些樂器在進行演奏，也能識別出不同動物的叫聲。
而對于熟悉的人，比如對父母兄弟姐妹等，經(jīng)常只通過說話的聲音，就能知道是誰；通過腳步聲，也可以辨認出來是誰來了等等。
除了對聲音的「 音調(diào)、響度、音色 」這三個要素的感知之外，人耳還能辨別出聽到的聲音是「 從哪里/哪個方向傳來的 」，也就是聲源方位感。
瑞士的神經(jīng)科學家通過研究發(fā)現(xiàn)：粗糙的聲音（上限約為130 Hz）激活了大腦某些特別的區(qū)域。
當重復的聲音被認為是刺耳的、無法忍受的時候（特別是在40-80Hz之間），會引起持續(xù)的反應，刺激杏仁核、海馬體和腦島，特別是跟突出、厭惡和疼痛相關的區(qū)域，而正因為有這些區(qū)域參與聲音的處理，才會使這類聲音會讓人感覺到難以忍受。
這也是警報聲的應用原理，通過快速重復的頻率來引起人們的注意。再結(jié)合聲音傳播不受光照、方向、角度等影響的特性，來提高警報聲被人耳檢測到的概率。
其他讓人感到煩躁、難受的聲音，如汽車喇叭聲、尖叫聲、嬰兒哭聲等等通常也是在這一頻段。
視覺上的三維圖效果，是眼睛先呈「 散焦狀態(tài) 」，視焦點前后位移產(chǎn)生層次感，從而看到三維平面圖畫的立體效果。
而人耳的聽覺跟視覺相反，可以從眾多的聲音中「 聚焦到某一點 」上，也就是聽覺的「 聚焦效應 」。
比如我們聽交響樂時，大腦皮層可以抑制其它樂器的演奏聲，把精力和聽力集中到其中的一種樂器聲音上。還有在公交地鐵上，我們同樣可以集中精力聽廣播報站的聲音，而忽略車上的其他喧鬧聲。
這個特性也讓語音交互的場景擁有更多的可能性。
觸覺屬于動覺交流領域，即通過身體的運動/動作來交流。
跟視覺、聽覺的感知相比，「 觸覺 」最大不同是它的非局部性（全身皮膚），以人體為介質(zhì)，對皮膚、肌肉的感受器進行刺激，能夠 敏感、強烈和更迅速 的被用戶感知，及時傳遞信息。也 不易受環(huán)境影響，無論環(huán)境吵雜，或是光線不佳，對其體驗效果的影響都不大。
但「 觸覺 」傳遞的信息遠少于視覺和聽覺，通常作為視覺和聽覺反饋的補充。而對有能力缺陷的人，如聽障、視障人士來說，「 觸覺交互 」的應用則是一種很重要的形式。
同時也是用戶體驗過程中重要因素之一，會直接影響用戶對產(chǎn)品的情感體驗與交流。在工業(yè)產(chǎn)品設計中感受較多，如日常工作生活中常見的家居用品、鼠標、鍵盤、手機等的外形設計、材質(zhì)觸感等。
人類的皮膚表面散布著觸點，一般指腹最多（人類手指的觸覺敏感度是前臂的10倍），其次是頭部，最少的是背部和小腿。觸點的大小不盡相同，分布不規(guī)則。
通過對冷、熱、尖銳物體的判斷，讓身體及時遠離危險和傷害，可以對人體起到保護作用。
同時也具有表達情感，辨別情緒的功能。有說法認為「觸覺」可能是用來傳達人的情感的最佳途徑，就像「 擁抱 」和「 安慰的文字/語言 」，體現(xiàn)的情感強度就很不一樣。
借助Haptics技術，通過作用力、振動等「 觸覺反饋 」，可以起到傳遞信息的作用。但想通過「 觸覺體驗 」來傳達恰當?shù)摹⒂杏玫男畔?，需要先理解人類是如何詮釋不同的「觸覺體驗」的。
比如想要通過「 振動感知 」來傳遞有用的信息，需要先了解怎樣的振動頻率、強度、節(jié)奏可以讓使用者意識到其代表的是什么意思：成功、失敗還是其他呢？這涉及到「 認知 」方面的內(nèi)容。
通常情況下，「 觸覺反饋 」是作為視覺、聽覺反饋的一種補充。
如在觸控屏上用虛擬鍵盤輸入文字時，通過按鍵的「 振動反饋 」，讓用戶清晰及時地了解到自己已經(jīng)成功按下了某一個按鍵。相關研究的結(jié)果也表明：虛擬鍵盤加入振動反饋后，是可以提升用戶輸入時的準確度。
而一些特定場景下，「 觸覺反饋 」可以很好的替代視覺和聽覺反饋。
比如駕駛汽車時，駕駛員需要將大部分的注意力放在道路環(huán)境上，那么通過「 觸覺反饋 」，將部分操作結(jié)果傳遞給駕駛員，這一可以在一定程度上減輕駕駛員在視覺和聽覺上的負擔。
人類的動作通常分為三類：先天、模仿、訓練得來的。
由于肢體的結(jié)構特點，「 先天 」和「 模仿 」的動作，通常存在一定的局限性。
頸椎前屈幅度35-45°，后伸35-45°，左右側(cè)屈各45°，左右旋轉(zhuǎn)各60-80°。
當頸部前傾時，頸椎承受的壓力逐漸增大：
前傾0°時，為頭部重量，約為4.5-5kg；
前傾15°時，承受壓力約為12kg；
前傾30°時，承受壓力約為18kg；
前傾45°時，承受壓力約為22kg；
前傾60°時，承受壓力約為27kg。
結(jié)合前面我們講過的人眼轉(zhuǎn)動的舒適角度和視野范圍，可以為一些物品的設計提供參考。
直立，腰伸直自然體位時，腰部可前屈90°、后伸30°、左右側(cè)屈各20-30°、左右旋轉(zhuǎn)各30°。
人體平（仰）臥位時，腰椎承受的壓力最小。
膝關節(jié)屈膝角度可達120-150°（小腿后部和股后部相貼）。人坐立時，膝關節(jié)彎曲90°，小腿和地面垂直放置對腿部最好的，屈膝小于90°時，長時間保持會影響下肢的血液循環(huán)。
伸直時一般為0°，有過伸狀態(tài)5-10°。膝關節(jié)屈曲時，有輕微的內(nèi)旋和外旋運動，約為10°。
肘關節(jié)彎曲角度可達140°、過伸角度為0-10°、旋前80-90°、旋后80°-90°。
打字時，手肘彎曲接近90°（水平放置）是最放松的。
掌側(cè)可以外展約70°，指間關節(jié)屈曲約90°，掌拇關節(jié)屈曲約20-50°。
和手腕連接處的腕掌關節(jié)，能夠進行較大程度的屈伸，收展，完成對掌運動。這是拇指特有的，是拇指骨外展，屈和旋內(nèi)運動的總和，使拇指尖能跟其他的手指和掌面接觸。
掌指關節(jié)屈曲約60-90°，近節(jié)指間關節(jié)屈曲時約為90°，遠節(jié)指間關節(jié)屈曲時約為60-90°。
在使用手機等數(shù)字界面時，用「 食指 」和「 拇指 」進行觸控是比較自然和常見的行為。
根據(jù)麻省理工對人類觸覺的實驗，食指、拇指的寬度和觸控區(qū)域有以下數(shù)據(jù)：
食指平均寬度約16~20mm、指腹觸摸區(qū)域尺寸約10~14mm、指尖觸摸區(qū)域尺寸約8~10mm。
拇指平均寬度約25mm、指腹觸摸區(qū)域尺寸約12~16mm、指尖觸摸區(qū)域尺寸約10~12mm。
觸控控件的最小尺寸要大于觸摸的最小尺寸。控件過小，一方面會增大準確觸控的難度，另一方面手指會造成遮擋，導致用戶無法明確是否已經(jīng)正確觸摸了相應的控件。
（手指觸控這部分本來放在上面關于觸覺的內(nèi)容里，后面想了下，「觸覺」更多的是指「反饋信息」層面的作用，所以還會歸在肢體動作、范圍里比較合適。）
用鍵盤打字時，在某些瞬間，多數(shù)手指只是放在鍵位上，沒有擊鍵行為，因此鍵盤按鍵的驅(qū)動力需要大于手指重量產(chǎn)生的力，才足以支撐手指。
ANSI 1988 年建議鍵盤擊鍵的理想壓力應該在0.5N-0.6N之間，一般0.25N-1.5N的壓力都是可以接受的。
而對于一些特殊的設備按鍵，比如工業(yè)鍵盤類的，則需要更大的按鍵驅(qū)動力，因為這類產(chǎn)品的工作環(huán)境和活動相對復雜，需要更謹慎的操作。
單手對手機等觸屏設備進行操作時，一般以四個手指和手掌為依托，用大拇指操作為主，而成年人拇指長度約為6-10cm。
數(shù)據(jù)表明，一般成年男性，單手全屏操控的屏幕尺寸最大約為4.5英寸，而成年女性，單手操控的極限約為4.0英寸。超過這個尺寸，單手進行全屏操控會有一定困難。
而目前主流的智能手機基本在5英寸以上，根據(jù)拇指關節(jié)的活動幅度，單手操作時在手掌位置不動的情況下，拇指觸及的區(qū)域只是很局限的一部分：
以上就是體驗設計中涉及人體結(jié)構特性的內(nèi)容部分。
感謝閱讀，期待交流。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在上篇我們對小鵝通后臺設計的拆解結(jié)構和內(nèi)容進行了簡單的概述，并且把「初始設置」和「添加內(nèi)容」兩個部分已經(jīng)拆解完，接下來我們將繼續(xù)拆解「裝修店鋪」和「店鋪推廣」兩個版塊，這兩個內(nèi)容將會讓我們了解到到小鵝通后臺的強大和靈活性。
3. 裝修店鋪
店鋪的裝修至關重要，因為這決定了用戶對我的知識店鋪第一印象。所以在我把商品上架以后，我就開始來研究店鋪的裝修了。當我找到「店鋪」，發(fā)現(xiàn)這個欄目包含了五個內(nèi)容，分別是終端渠道、頁面管理、專區(qū)管理、商品管理和基礎工具。
3.1 終端渠道
小鵝通的終端支持移動端H5店鋪、小程序店鋪、電腦端店鋪、APP和多終端。從適用設備場景來看，幾乎覆蓋了所有主流的學習場景。
3.1.1 移動端店鋪
「移動端店鋪」就是指H5網(wǎng)頁店鋪，這是最常見的終端形式，上線快、無需審核、靈活方便，成本最低。
3.1.1.1 店鋪主頁
「店鋪主頁」是指店鋪的首頁，這是整個店鋪權重最高的頁面，是用戶看到店鋪的第一印象?！傅赇佒黜摗沟难b修支持兩種，第一種是按系統(tǒng)默認的框架進行搭建裝修，第二種是自定義主頁，跳轉(zhuǎn)至「微頁面」以后，可以建立空白頁面和選擇其他免費的模版（微頁面接下來會詳解）。
a. 店鋪裝修
小鵝通的「店鋪裝修」支持可視化的設計裝修。左側(cè)是工具區(qū)，包含基礎組件（輪播圖、搜索、公告等）、商品組件（知識商品、書架、直播等）、助學工具（圈子、問答、打卡等）、營銷組件（優(yōu)惠券、積分商城、拼團等）和在線客服等其他組件；中間是可視化的頁面編輯區(qū)域，管理員可以在頁面進行編輯、刪除、拖動；右側(cè)是功能屬性設置區(qū)，可以對頁面和組件進行細節(jié)設置，實現(xiàn)管理員想要的設計效果。當你編輯好以后，可以在右上角點擊保存并預覽，實時查看你的裝修效果，非常方便。
細節(jié)偵查：
小鵝通的店鋪裝修功能非常強大，幾乎所有常見的內(nèi)容都設計成了組件，這樣極大降低商家的裝修成本，也提升了整個系統(tǒng)的設計維護效率。
3.1.1.2 個人中心
「個人中心」就是用戶中心界面，運營者可以在這個欄目設置需要展示的內(nèi)容，比如超級會員、我的訂單、學習工具等。
3.1.1.3 店鋪導航
「店鋪導航」是指客戶端的一級菜單，支持運營者修改菜單名稱、更換圖標和增加刪除。
3.1.1.4 店鋪風格
「營銷配色」是指對商鋪進行店鋪主色和營銷配色的設置，系統(tǒng)提供了多種配色方案，運營者可一鍵切換。美中不足的是，不支持自定義顏色色值。
3.1.2 小程序店鋪
「小程序店鋪」是移動端店鋪的升級版，小程序相比H5，用戶體驗友好很多，相比APP，又不需要下載，這是一種非常受用戶歡迎的客戶端。但小程序需要由微信官方審核，對于很多知識付費的商家來說，往往缺少官方所要求的資質(zhì)，所以很多商家是無法上架小程序的。
首次使用小程序店鋪，需要對小程序進行授權或創(chuàng)建。小程序店鋪的裝修流程和移動端店鋪相似。需要注意的是，小程序的發(fā)布不僅需要補充企業(yè)和法人信息，上傳小程序所需要的資質(zhì)，還需要微信官方審核通過后才能上線使用。
迭代建議：
從小鵝通的小程序體驗來看，這是一個直接使用H5系統(tǒng)封裝的小程序。這樣的技術成本確實比較低，上線時間也比較快，但用戶體驗一般，沒有發(fā)揮出小程序的優(yōu)勢。小鵝通可以參考一下有贊的小程序體驗，從而真正幫助商家的用戶獲取開心、愉悅的用戶體驗。
3.1.3 電腦端店鋪
電腦端店鋪是指對PC端店鋪的裝修設計，對于有電腦端用戶使用的商家來說，電腦端也非常重要。
3.1.3.1 電腦店鋪
①「店鋪導航」是指運營者可以對店鋪的導航進行設置，包括店鋪 Logo，導航欄背景以及導航欄的增刪；
②「電腦端設置」包含電腦端域名設置、課程類TDK設置、微頁面TDK設置等內(nèi)容，小鵝通的電腦端支持綁定獨立域名，這個對于商家的品牌運營非常有幫助；
③「頁腳設置」是指運營者可以對底部的頁腳進行內(nèi)容設置，包括導航名稱、版權信息等；
④「懸浮窗」就是網(wǎng)站的漂浮窗口，一般放在線客服、聯(lián)系電話等圖標，為用戶提供及時的咨詢服務；
⑤「個性化設置」是支持運營者設置店鋪的默認語言，有中文和英文兩種語言。
3.1.3.2 頁面管理
「頁面管理」是對店鋪頁面的裝修管理。電腦端的店鋪同樣支持在線裝修，左側(cè)為常見的功能組件（包含輪播圖、圖文導航、知識商品、直播、富文本等），中間為可視化區(qū)域，右側(cè)為屬性設置（包含頁面設置和組件設置），運營者可對組件進行細節(jié)設置，并隨時可以瀏覽裝修的效果。
迭代建議
在電腦端的裝修頁面，小鵝通的后臺沒有實現(xiàn)響應式設計，所以導致小屏電腦體驗起來不太友好，比如需要橫向拖動頁面才能看清楚全部內(nèi)容。我認為可以加一個操作提示，提醒用戶需要使用1920*1080以上分辨率的電腦進行設計，這就遵循了尼爾森十大原則的防錯原則，用戶體驗會更好。
3.1.3.3 店鋪風格
店鋪風格就是指對電腦端的店鋪進行品牌色設置，一鍵換膚，還可以同步H5店鋪的配色，保持統(tǒng)一性。
3.1.4 小鵝通APP
小鵝通支持APP客戶端，不過從目前的頁面內(nèi)容來看，APP客戶端僅支持對店鋪、課程推送、課程緩存和課程投屏的設置，暫無像移動端店鋪的個性化裝修等功能。其次由于沒有體驗權限，我們就不過多講解。
3.1.5 多終端引導
「多終端引導」是幫助商家引導學員去對應的學習終端，替代原來依賴人工引導的方式，這個功能可以有效提高引導的效率，解決學員總是找不到店鋪入口的痛點，從而降低商家的運營成本。需要注意的是，這個功能只支持在「課程支付成功頁面」和「課程詳情頁」開啟。
3.2 頁面管理
「微頁面」可以理解為小鵝通店鋪裝修的最小單位，一個店鋪可以看作是由無數(shù)個微頁面構成，而一個微頁面，又可以通過商家自主添加組件來設計裝修。微頁面的使用場景非常廣泛，比如商家需要設計一個促銷頁、活動頁，這個時候就可以使用到微頁面，通過組件的搭配，就能完成自己想要的效果。
3.2.1頁面管理
「頁面管理」就是針對系統(tǒng)創(chuàng)建的微頁面進行管理，包括新建、編輯、分享和刪除等。
3.2.2 分組管理
「分組管理」就是指可以建立分組來管理微頁面，比如新建一個醫(yī)療產(chǎn)品的分組，可以把和醫(yī)療相關的微頁面都合并成組批量管理（此功能僅支持旗艦版才能體驗，所以缺少配圖）。
3.2.3 模板庫
「模板庫」是指官方為商家提供的免費設計模板，商家可以直接應用模版，在模版的基礎上進行二次創(chuàng)作，提高工作效率（此功能僅支持旗艦版才能體驗，所以缺少配圖）。
3.3 專區(qū)管理
「專區(qū)」就是專題頁，和微頁面相比，它相對獨立，比如商家可以建立某個主題的學習專區(qū)，方便用戶針對性學習。小鵝通幫助文檔對「專區(qū)」的使用場景官方設計了兩個，一個是商家在和不同的品牌方合作時，以為品牌方設置專屬的宣傳專區(qū)。另一個是如果商家想為用戶提供沉浸式的學習場景，那么建立一個專區(qū)就可以實現(xiàn)這個需求，可以有效減少其他內(nèi)容對用戶的干擾。從使用場景看出，專區(qū)是一個可以幫助商家加強品牌推廣，提升運營效率的功能，比微頁面更靈活。
3.3.1 專區(qū)詳情頁
①「內(nèi)容設置」就是指專區(qū)的主頁，這個頁面可以通過建立微頁面來進行設計裝修；
②「品牌設置」是可以開啟專區(qū)的頂部導航，還可以在頁腳導航設置專區(qū)的名稱、導航狀態(tài)以及頁腳Logo；
③「權限設置」是針對專區(qū)的訪問權限做限制，比如可以指定用戶、加密，以及公開訪問。
3.3.2 數(shù)據(jù)統(tǒng)計
「數(shù)據(jù)統(tǒng)計」欄目，為商家提供了轉(zhuǎn)化漏斗、轉(zhuǎn)化趨勢和轉(zhuǎn)化明細三個內(nèi)容，通過多維度的數(shù)據(jù)分析，為商家精細化運營提供決策依據(jù)。
迭代建議：
著名的格式塔原理里有一個接近性原則，就是指把相似的功能、產(chǎn)品合并分類，這樣可以讓界面功能清晰易懂。專區(qū)和微頁面的功能其實就非常相近，完全可以和微頁面合并，同時歸類到頁面管理分組，這樣可以有效提高管理員的操作效率。畢竟面對一個功能如此繁雜的SAAS產(chǎn)品，用戶的操作成本真的太高了。
3.4 商品管理
商品管理主要針對店鋪的詳情頁裝修和商品分組，屬于比較基礎的功能。
3.4.1 詳情頁裝修
詳情頁是店鋪權重非常高的頁面，它對用戶的付費轉(zhuǎn)化起到了很大的作用。
3.4.1.1 新建模版
①點擊新建模版，就進入了詳情頁裝修的界面。左側(cè)為可視化區(qū)域，右側(cè)為功能設置。從左側(cè)TAB可以看出，支持對圖文、專欄、訓練營Pro和實物商品四個詳情頁的設置；右側(cè)為詳情頁的信息設置，包含基礎信息、詳情頁裝修和高級設置三個內(nèi)容。
②在「詳情頁裝修」，可以開啟銷售彈幕（制造促銷氛圍）、店鋪信息，還可以設置付費商品按鈕文案等；
③在「高級設置」，可以設置銷量達到某個數(shù)量才進行展示，對于新店鋪或新商家非常利好；
④「自定義菜單」則為運營者提供手動設置詳情頁TAB菜單的功能，比如目錄、課堂互動、評論都可以選擇開啟或關閉。
設計思考：
從小鵝通的店鋪詳情頁裝修來看，這個系統(tǒng)的所有頁面就像一個積木一樣，全部由組件組裝。比如詳情頁的銷售彈幕，店鋪信息、購買文案，再到詳情頁的TAB菜單，目錄、課堂互動和評論等，這些內(nèi)容都是一個獨立的組件，支持商家隨時開啟和關閉，非常方便。
3.4.1.2 關聯(lián)商品
「詳情頁模版」建立成功以后，返回到列表頁，這個時候需要對詳情頁關聯(lián)商品，詳情頁才能投入使用。
3.4.2 商品分組
「商品分組」就是可以建立不同的分組，對商品進行歸類、實現(xiàn)高效地的管理，也方便用戶在前端更便捷地找到所需商品。在商品分組的排序頁面里，有一個非常友好小功能，那就是在對商品排序的時候，只需要輸入數(shù)值，就能實現(xiàn)商品排序，非常不錯的操作體驗。
3.5 基礎工具
3.5.1 素材中心
「素材中心」就是系統(tǒng)會把運營者在店鋪日常運營上傳的圖片、音頻、視頻等資料都儲存在云端，這樣可以實現(xiàn)對文件資源統(tǒng)一、高效的管理。這個功能或許不起眼，但是在運營者運營的過程中非常方便，可以提高工作效率。
3.5.2 圖片設計
小鵝通接入了「創(chuàng)可貼」圖片在線設計工具，支持用戶在小鵝通后臺就能在線設計圖片，非常方便。創(chuàng)可貼這個在線設計工具功能非常強大，不僅有大量優(yōu)質(zhì)的設計模版，還有各種素材、文字、背景和工具，這極大降低了運營者在店鋪運營中的設計制作成本，幫助運營者可以更高效地降低運營成本。
3.5.3 版權保護
3.5.3.1 內(nèi)容保護
①「防錄屏跑馬燈」就是為了防止用戶悄悄錄制課程，商家在開啟跑馬燈以后，屏幕就會以跑馬燈的形式把用戶的賬戶名和ID展示出來，這樣可以有效降低課程偷錄的損失。管理員可以對跑馬燈的顏色、字體大小、透明度進行設置，還可以開啟版權聲明。
②除了防錄屏跑馬燈，小鵝通還支持開啟水印保護、文字防復制、終端限制和域名限制，可以看出在內(nèi)容保護這塊，小鵝通幾乎把商家需要的功能都設計了，極大降低了商家內(nèi)容被侵權的風險。
3.5.3.2 投訴指引
「投訴指引」是小鵝通為做商家整理的各大平臺投訴指南，包括小鵝通生態(tài)、微信公眾號、B站、抖音、知乎等各大媒體平臺，目的是打造一個良性、健康的平臺秩序。
設計思考
從這三個基礎工具的設計可以看出，一款Saas產(chǎn)品的成功，一定是把商家運營的所有環(huán)節(jié)和場景都考慮進去。比如小鵝通鏈接了創(chuàng)可貼在線圖片設計工具以后，不僅可以極大降低商家的店鋪運營的門檻，還能省去很多人力成本。其次在對商家版權的內(nèi)容保護上，小鵝通可謂花盡了心思，防錄屏、水印、防復制還有終端和域名限制，這些功能都能為商家的原創(chuàng)內(nèi)容保駕護航，從而打造一個健康的知識生態(tài)環(huán)境。
3.6 體驗小結(jié)
在體驗完小鵝通的店鋪裝修版塊以后，我對SaaS產(chǎn)品的設計肅然起敬。為了實現(xiàn)產(chǎn)品的標準化，幾乎把整個產(chǎn)品的頁面、功能都全部組件化了，最終設計開發(fā)了一個可視化、智能化、傻瓜式的在線裝修功能。這樣的設計不僅讓整個產(chǎn)品極度標準化，維護成本低，更重要的是，節(jié)省了商家的裝修成本和時間，讓他們更快速地上手。
其次從其他功能的設計也可以看出，一款Saas產(chǎn)品的成功，一定是把商家運營的所有環(huán)節(jié)和場景都考慮進去。比如小鵝通鏈接了創(chuàng)可貼在線圖片設計工具以后，不僅可以極大降低商家的店鋪運營的門檻，還能省去很多人力成本。甚至在對商家版權的內(nèi)容保護上，小鵝通可謂花盡了心思，防錄屏、水印、防復制還有終端和域名限制，這些功能都能為商家的原創(chuàng)內(nèi)容保駕護航，從而打造一個健康的知識生態(tài)環(huán)境。
4. 店鋪推廣
當我把店鋪裝修好以后，基礎工作就準備就緒了，接下來，我需要的就是開始推廣和運營我的知識店鋪，讓我的粉絲們開始來到店鋪學習。
4.1 直播
直播是現(xiàn)在最流行、最重要的傳播方式，對于一個運營者來說，直播運營太重要了，它是一個引流、激活、留存和變現(xiàn)的重要手段。
4.1.1 通用設置
在建立「直播」之前，我們來先看看「通用設置」，這樣可利于快速上手「直播」功能?！竿ㄓ迷O置」包含「全局設置」和「默認設置」兩個部分。
①在「全局設置」，管理員可以開啟超低延時設置（降低直播延遲時間）、消息氣泡（用戶進入后界面有提示）、全屏互動、隱私保護等功能，還可以設置嚴禁詞（可設定直播評論區(qū)的嚴禁詞）、水印、打賞金額等。
②在「默認設置」，管理員可以開啟觀看人次（直播觀看人數(shù)）、在線人數(shù)、防錄屏跑馬燈（打開后可有效防止錄屏）、評論審核、直播熱度、點贊、打賞、回放設置（可設置直播是否開啟回放和視頻播放倍速等）等功能。
4.1.2 新建直播
小鵝通的「新建直播」包含基本信息、商品信息和上架設置三個部分。
①小鵝通的直播分為視頻直播、錄播直播和語音直播三種類型，其次還支持橫屏直播（適用于企業(yè)/PPT宣講等場景）和豎屏直播（適用于泛娛樂化教學、帶貨等場景），類型可謂非常豐富。接下來，運營者需要設置直播基礎信息，比如直播標題、開始時間、封面圖，還可以設置直播暖場圖、宣傳封面、詳情頁介紹等。
③「商品信息」和「上架信息」就像「內(nèi)容」版塊的視頻、音頻產(chǎn)品一樣，可以對直播設置免費、付費、加密和指定學員專享，這個版塊可以理解為小鵝通商品新建的一個通用模塊，后面我們不再贅述。
④小鵝通的直播還支持批量創(chuàng)建，「批量直播」的流程相比單個直播流程操作路徑更短，選擇好設備類型以后，就可以進入批量直播的流程，系統(tǒng)支持批量命名、上傳封面圖以及功能設置，非常方便。
4.1.3 直播管理
當你建立一場直播以后，在「直播管理」就可以開始管理你的直播?！钢辈ス芾怼沟墓δ芊浅姶?，為商家提供了直播詳情、直播數(shù)據(jù)、講師設置和APP推送等功能。
4.1.3.1 開播設置
「開播設置」包含了三種形式，邀請老師開播、自己開播和第三方推流到直播間。
①「邀請老師開播」就是指直播建立后，可以直接向老師發(fā)送開播邀請，「開播信息鏈接」也是從這里復制；
②「自己開播」這個功能，需要根據(jù)不同的場景來使用。比如老師是通過電腦直播，還需要下載小鵝通的PC端直播軟件，才能進行直播。如果是移動端，則需要使用鵝直播小程序或APP使用；
③「第三方推流到直播間」是指商家在其他平臺直播時，可以將直播畫面推流到小鵝通直播間，小鵝通直播間將同步展示直播畫面。第三方包含像OBS直播、快手直播和芯象直播助手等軟件，小鵝通官方也給出了完整的下載和使用指導。這個功能對商家來說，可以將第三方直播推流到店鋪，既能實現(xiàn)外部引流，也能為學員提供更豐富的內(nèi)容。
4.1.3.2 直播間設置
「直播間設置」包含課程設置、互動設置、防盜設置、評論設置和直播間裝修四塊內(nèi)容。
①「課程設置」主要指添加講師和助教，可以通過手機和微信兩種形式邀請；
②「互動設置」是指商家可以設置老師和學員在直播間的互動交流，比如直播帶貨配置（可添加指定商品實現(xiàn)用戶在直播間購買）、優(yōu)惠券配置（可贈送店鋪優(yōu)惠券）、打賞開關（用戶可對直播打賞）、簽到開關（老師可查看已簽到學員）、抽獎開關（老師可進行設置抽獎，提升直播間氛圍和用戶活躍度）、邀請達人榜開關（直播間顯示邀請達人榜，給與上榜的用戶獎勵，吸引用戶分享）等功能。
③「防盜設置」打開后，可以開啟防錄屏跑馬燈，降低直播被偷錄風險；「評論設置」可以開啟評論審核，對用戶發(fā)表的評論也可以選擇隱藏；「直播間裝修」主要是指商家可以上傳背景圖填補講師在使用連麥或課件時的畫面留白。
4.1.3.3 運營設置
「運營設置」包含私域引流、下一場直播預告、圈子引流、招募推廣員設置、信息刺激、CRM分配、通知設置和直播間信息設置8塊內(nèi)容。
①「圈子引流」是指在直播中展示圈子的入口，通過領資料、看回放等形式把用戶引流到圈子，持續(xù)用內(nèi)容活躍用戶；
②「招募推廣員設置」是可以運營者可以在直播間招募推廣員，幫助商家進行分銷推廣，這個功能我們會在下面詳細講解；
③「通知設置」可以設置開課提醒，包括短信預約通知、服務號預約通知等，提升用戶觸達率；
④「直播間信息設置」可以設置直播間的公告、觀看人次、在線人數(shù)和直播熱度。
4.1.3.4 回放設置
「回放設置」是指運營者可以開啟直播的回放權限，還可以設置回放的有效期，以及倍速播放。
4.1.3.5 轉(zhuǎn)播設置
「轉(zhuǎn)播設置」是指可同時轉(zhuǎn)播到第三方平臺，比如視頻號、快手等，還可以轉(zhuǎn)播給小鵝通其他店鋪，比如你的直播內(nèi)容質(zhì)量非常優(yōu)秀，可以轉(zhuǎn)播至其他小鵝通商家，從而為你分享傳播。
4.1.3.6 拉流設置
「拉流」就像采集，商家可以把其他第三方優(yōu)秀的直播內(nèi)容拉流到自己的店鋪。「拉流直播」還支持批量創(chuàng)建、無需監(jiān)管的特點，通過拉流，可以豐富店鋪內(nèi)容，快速擴大店鋪影響力，提高用戶活躍度。
4.1.3.7 直播間用戶
「直播間用戶」是指對當場觀看直播的用戶進行的數(shù)據(jù)統(tǒng)計，比如直播間停留時長、累計觀看時長、直播觀看時長等，還支持商家對用戶貼標簽和發(fā)送店鋪私信，實現(xiàn)下一步的激活轉(zhuǎn)化。
4.1.3.8 數(shù)據(jù)分析
「數(shù)據(jù)分析」是指對當場直播進行全面的數(shù)據(jù)分析，主要包含直播數(shù)據(jù)和交易數(shù)據(jù)兩個部分。
①「直播數(shù)據(jù)」包含流量觀看、直播互動和直播帶貨三個內(nèi)容。在這個版塊，可以看到直播全時段的數(shù)據(jù)，比如直播間訪客數(shù)、回放觀看人數(shù)、在線人數(shù)趨勢圖、打賞金額，以及帶貨商品點擊次數(shù)、成交人數(shù)、總成交金額等數(shù)據(jù)。
②「交易數(shù)據(jù)」主要是指付費直播銷售情況的數(shù)據(jù)分析，包含售前訪客數(shù)、訪問量以及最終支付人數(shù)、支付轉(zhuǎn)化率，還有訪問-成交數(shù)數(shù)據(jù)趨勢圖等。
4.1.4 體驗小結(jié)
從「直播」這個版塊可以看出，一個我們平常沒有太過在意的直播界面，其實在系統(tǒng)的后臺設計了如此多功能。從「開播形式」的三個場景選擇到「直播回放」是否允許用戶設置倍數(shù)，從「直播間設置」開啟用戶打賞到「圈子引流」設置資料包吸引用戶加入圈子，最后再到一場直播結(jié)束后全面、專業(yè)、多維度的數(shù)據(jù)分析，小鵝通的直播功能真的做得太完善了。如果不親自體驗，我根本沒法想到一個直播需要考慮設計這么多功能，拉流、轉(zhuǎn)播、招募推廣員，這簡直把用戶需要的功能需求都提前設計和規(guī)劃好了，對一個運營者來說，對店鋪和用戶的運營效率提升太有幫助了。
4.2 營銷
「直播」功能熟悉以后，接下來我要開始熟悉營銷工具了，這些是店鋪運營的必備武器。小鵝通的營銷工具分為分銷推廣、拉新引流、付費轉(zhuǎn)化和促進復購四大類，對一個新手商家來說，可以根據(jù)自己的需求去尋找對應的工具。
4.2.1 分銷推廣
「分銷」是一個知識店鋪推廣的重要功能，商家不僅可以鏈接各種渠道和代理商，還可以讓利給用戶刺激傳播拉新，實現(xiàn)裂變增長。小鵝通的「分銷推廣」不僅有面向代理機構的「訂貨商」，還有針對個人分銷的「推廣員」，滿足了分銷場景的各種需求。
4.2.1.1 推廣員
「推廣員」主要針對個體用戶，比如店鋪的學員、粉絲、店鋪員工等，可以理解為C端用戶分銷。商家在開通「推廣員」以后，可以實現(xiàn)人人分銷的功能，推廣員只要分享商品的鏈接、海報圖等，只要有新用戶下單購買，都可以獲得收益。
4.2.1.1.1 推廣員管理
「推廣員管理」是為商家提供對店鋪推廣員的個人信息、審核申請管理，比如推廣員的申請審核、資料編輯、推廣員招募等。
a. 推廣員詳情頁
從這個頁面可以查詢到一個推廣員的詳細信息，包括個人信息、客戶列表、邀請推廣員列表、推廣員成交數(shù)量。
b. 招募規(guī)則
①「招募規(guī)則」是針對推廣員招募的規(guī)則進行設置。推廣員招募分為兩種模式，分別是篩選優(yōu)質(zhì)推廣員和人人推廣模式，前者需要設置門檻，后者不需要任何門檻。
②當運營者選擇「篩選優(yōu)質(zhì)推廣員」模式以后，需要對推廣員的加入條件進行設置，比如加入條件、申請信息、招募審核等。
c. 推廣商品/工具
①「推廣商品/工具」包含推廣商品、推廣優(yōu)惠券、推廣邀請碼和推廣微頁面四個內(nèi)容。
②「推廣商品」是指運營者可以添加指定商品進行推廣，并可以設置獨立的商品傭金的分配比例，非常靈活。
③「推廣優(yōu)惠券」是指運營者可以為推廣員建立獨立的優(yōu)惠券，幫助推廣員更高效進行商品推廣，提升業(yè)績；「推廣邀請碼」和「推廣優(yōu)惠券」功能相似，我們不再贅述。
④「推廣微頁面」是指設置推廣員招募的頁面，通過建立一個專屬的微頁面，可以實現(xiàn)推廣頁的定制化設計。
d. 分傭結(jié)算設置
「分傭結(jié)算設置」是對推廣員獎勵發(fā)放方式的設置，系統(tǒng)支持交易完成后立即發(fā)放、交易完成后XX天再進行發(fā)放，還可以設置推廣員自購分傭，刺激推廣員消費。
e. 等級設置
「等級設置」是指運營者對推廣員等級規(guī)則的設置，包括推廣員的商品傭金比例、邀請人獎勵比例等。
4.2.1.1.2 客戶關系
①「客戶關系」包含客戶查詢、客戶綁定設置和客戶跟進設置三個內(nèi)容。
②「客戶查詢」為商家提供客戶信息的統(tǒng)計查詢，比如客戶手機號、綁定推廣員、消費記錄等。
③「客戶綁定設置」為商家提供客戶綁定有效期和搶客設置，這個功能可以刺激推廣員不斷拓客，也可以有效保護初始推廣員的權益，避免客戶被其他推廣員搶走；
④「客戶跟進設置」是一個非常強大的功能，通過和企微CRM的鏈接，可以實現(xiàn)推廣員綁定的客戶自動分配給CRM銷售跟進，從商機線索到激活付費，形成了銷售閉環(huán)。
4.2.1.1.3 推廣業(yè)績
「推廣業(yè)績」提供查看所有分銷推廣員的推廣記錄和業(yè)績統(tǒng)計，從而獲取精準的數(shù)據(jù)分析，支撐運營決策。
4.2.1.1.4 推廣員端
①「推廣員端」是指推廣員在前端使用的客戶端，包含了推廣中心、推廣海報、推廣通知和商品展示四個部分。
②「推廣中心」為商家提供推廣員名稱設置、通知公告和引導加群功能。其中「引導加群」是為商家把推廣員引流至自己的私域社群，方便統(tǒng)一管理。
③「推廣海報」提供了推廣店鋪海報和邀請推廣員海報兩個功能，不僅支持客戶設計海報自定義上傳，系統(tǒng)也提供了精美的海報模版，賦能商家跟高效的推廣拉新。
④「推廣通知」是為推廣員提供微信端的通知設置，推廣員綁定后，可第一時間接收消息通知，比如審核結(jié)果、訂單消費等。
⑤「商品展示」可以把推廣傭金展示在詳情頁頁面，通過高頻曝光有效刺激用戶傳播分享，也可以根據(jù)推廣員招募規(guī)則申請。
4.2.1.2 訂貨商
和「推廣員」相比，「訂貨商」面向的人群是一些具有銷售團隊的企業(yè)機構、代理商等，可以稱為B端渠道分銷。代理商通過向商家批量進貨，然后分配給自己的員工進行向終端客戶銷售，最后由商家進行商品交付，代理商自主管理員工、獨立結(jié)算員工業(yè)績。
a. 訂貨商管理
「訂貨商管理」包含「訂貨商列表」和「審核列表」，主要為商家提供對訂貨商用戶的資料查詢、管理和審核。
b. 商品管理
「商品管理」是為商家提供訂貨商在前端批發(fā)商品的管理，商家在后臺添加店鋪的商品后，訂貨商在前端就能進行推廣。
c. 客戶管理
「客戶管理」是為商家提供對訂貨商銷售成交客戶的信息管理，通過這個功能可以查看客戶的詳細信息、所屬的訂貨商、關系狀態(tài)等。
d. 業(yè)績管理
①「業(yè)績管理」包含「業(yè)績訂單」和「提現(xiàn)記錄」兩個內(nèi)容。
②「業(yè)績訂單」是為商家提供對訂貨商推廣產(chǎn)生的訂單管理，運營者可查看訂單的詳細信息，包括訂單號、下單時間、實付金額等。
③「提現(xiàn)記錄」是為商家提供對訂貨商提現(xiàn)申請的記錄管理，當訂貨商在前端發(fā)起提現(xiàn)申請以后，運營者可以從這個欄目查看提現(xiàn)申請，確認提現(xiàn)申請后，需運營者對訂貨商手動打款，打款成功后可標記已打款。
e. 設置
①「設置」包含規(guī)則設置、招募頁和海報定自定義三個內(nèi)容。
②「規(guī)則設置」主要幫助商家對訂貨商的招募、綁定和等級規(guī)則進行設置。在「招募規(guī)則」，運營者可設置訂貨商加入的方式，支持自主加入（加入后無推薦人）和推薦加入（加入后有推薦人），還可以開啟訂貨商資料申請，申請資料運營者可自由配置；在「綁定規(guī)則」，可設置訂貨商和商家綁定的有效期，超出有效期后，訂貨商綁定的客戶下單，收益將自動劃入店鋪，不計入訂貨商收益；在「等級規(guī)則」，可以對訂貨商的等級名稱、規(guī)則和權益進行設置，打造完善健全的分銷體系。
③「招募頁」主要提供訂貨商招募詳情頁的設計和編輯，「海報自定義」可以對招募海報進行自定義配置，提升招募效率。
4.2.1.3 裂變海報
「裂變海報」是一個為商家提供接力式裂變傳播的營銷功能，通過精美的海報設計和豐厚的傭金獎勵，吸引用戶為商家分享推廣，促進銷量提升同時可快速吸粉引流。
4.2.1.3.1 新建流程
①在「商品信息」，需要添加分享裂變的商品，參與裂變海報的課程將不產(chǎn)生推廣員傭金。
②在「活動設置」，系統(tǒng)不僅支持自定義背景圖，還為運營者提供了多張精美的海報宣傳圖；對用戶獎勵的設置，不僅可以自由設置獎勵比例，還可以設置「交易完成后發(fā)放」和「交易完成XX天后發(fā)放」兩種形式。
細節(jié)偵查
小鵝通的分銷功能適用于所有行業(yè)和產(chǎn)品，在我過去的工作中就遇見了無數(shù)客戶想通過分銷進行裂變，而小鵝通的分銷功能的設計，不管是前端還是后臺的業(yè)務設計流程，都值得大家深度體驗學習，以此作為一個標準的流程設計參考。
4.2.2 拉新引流
「拉新引流」可以幫助商家拓展新用戶，小鵝通為商家設計了三個功能，分別是邀請碼、漲粉神器和請好友看。
4.2.2.1 邀請碼
「邀請碼」是一款能夠?qū)崿F(xiàn)贈送給他人，邀請對方免費學習講師的付費內(nèi)容商品的功能。當商家推出一門新課程的時候，就可以設置邀請碼邀請學員體驗，「邀請碼」既可以作為福利權益，也可以作為引流的手段。
①「邀請碼」的創(chuàng)建非常簡單，需要注意的是，邀請碼需要設置數(shù)量、有效時間和指定使用商品，其次也可以開啟「信息采集」功能，幫助運營者采集用戶的信息，提升促進轉(zhuǎn)化。
②「邀請碼」成功建立以后，可進行群發(fā)，也可以復制鏈接分享給指定的學員，還可以對邀請碼作廢以及查看使用記錄。
4.2.2.2 漲粉神器
「漲粉神器」是一款為商家公眾號漲粉的營銷工具，商家通過贈送課程的形式吸引用戶為公眾號傳播拉新，當新關注用戶達到商家指定要求以后，用戶可以免費獲得課程?！笣q粉神器」僅支持專業(yè)版、旗艦版使用，免費試用版不支持，從官方幫助文檔看，「漲粉神器」的操作流程主要是通過配置專屬海報，吸引學員下載分享，最終完成公眾號漲粉目標。
體驗陷阱
為了體驗這個功能，我嘗試授權公眾號進行綁定，但系統(tǒng)顯示我的公眾號已經(jīng)授權綁定過，需要解綁后重新配置。但根據(jù)官網(wǎng)幫助文檔解決方案始終找不到「重新授權」和「解除授權」的入口，讓我白白花了很多時間。
4.2.2.3 請好友看
「請好友看」是一款支持學員購買專欄/會員課程后，分享課程內(nèi)某一期的課程內(nèi)容給好友體驗的功能，主要幫助商家促進課程的傳播和推廣，讓更多的學員了解和體驗課程。比如當學員購買了商家的付費專欄，覺得內(nèi)容不錯，這個時候如果商家設置了「請好友看」，學員就可以一鍵分享給好友，邀請好友領取免費閱讀名額，最終幫助商家拉新增購。
①「請好友看」支持設置課程分享數(shù)量、課程領取人數(shù)和單個用戶領取上限，為運營者根據(jù)專欄課程內(nèi)容提供更精細的運營方式。
②「邀請好友」只支持專欄或會員欄目，這個功能的本質(zhì)其實是免費試看，所以不適用單個商品課程。
4.2.3 付費轉(zhuǎn)化
「付費轉(zhuǎn)化」主要幫助商家增加營銷手段，激活用戶消費，提升付費轉(zhuǎn)化率。小鵝通設計了七個功能，其中優(yōu)惠券和拼團的功能非常完善，可以滿足商家各種不同場景的營銷需求。
4.2.3.1 優(yōu)惠券
「優(yōu)惠券」是一款通過商家讓利，從而讓用戶在購買課程時享受優(yōu)惠的營銷工具，有效幫助商家刺激用戶購買，提升付費轉(zhuǎn)化率。比如刺激新用戶首次轉(zhuǎn)化贈送新人優(yōu)惠券，吸引用戶購買店鋪高價課程贈送優(yōu)惠券等。
4.2.3.1.1 優(yōu)惠券類型
小鵝通設計了「通用優(yōu)惠券」、「專屬優(yōu)惠券」和「員工優(yōu)惠券」三種類型?！竿ㄓ脙?yōu)惠券」是面向所有用戶，所有人都可以領取，無門檻限制；「專屬優(yōu)惠券」是為特定用戶群體設置的優(yōu)惠券，比如大學生、新注冊用戶等；「員工優(yōu)惠券」是結(jié)合企微能力賦能員工一鍵發(fā)券，可防止社群發(fā)券轉(zhuǎn)發(fā)泄漏，不過目前系統(tǒng)顯示正在開發(fā)。
4.2.3.1.2 新建優(yōu)惠券
以「通用優(yōu)惠券」創(chuàng)建流程為例，優(yōu)惠券的創(chuàng)建包含三個部分，分別是基本信息、領用規(guī)則和個性設置。
①在「基本信息」，可以選擇優(yōu)惠券的類型（支持滿減優(yōu)惠和折扣優(yōu)惠兩種類型，還可以設置領取門檻，比如消費滿多少元才能使用），還可以設置疊加使用（和其他優(yōu)惠券一起疊加使用）、發(fā)行量（優(yōu)惠券數(shù)量）、適用商品（可以支持全部商品、指定某類商品和不可用商品）和使用時間（可以設置用戶領取后失效時間，進一步提升轉(zhuǎn)化率）。
②在「領用規(guī)則」，可以設置用戶領取次數(shù)的限制（可限制每人限領多少張）、開啟信息采集（自動讀取領取優(yōu)惠券用戶信息）、分享設置和添加使用說明等。
③在「個性設置」，運營者甚至可以設置優(yōu)惠券剩余的數(shù)量，刺激吸引學員領取消費。
4.2.3.1.3 優(yōu)惠券管理
在「優(yōu)惠券」創(chuàng)建以后，系統(tǒng)為商家提供了定向發(fā)放、查看數(shù)據(jù)統(tǒng)計、編輯、停止和推廣等功能。
①「定向發(fā)放」提供多維度條件篩選特定用戶，并在用戶進入店鋪時自動發(fā)放優(yōu)惠券，有效提高店鋪的付費轉(zhuǎn)化與復購率，發(fā)放對象支持付費用戶（可設置指定消費某個商品，精準到極致）、用戶群體和指定用戶。
②「數(shù)據(jù)統(tǒng)計」提供優(yōu)惠券使用的精準數(shù)據(jù)統(tǒng)計，包括用券總成交額、優(yōu)惠總金額、費效比（優(yōu)惠總金額/用券總成交額）、客單價、領券總用戶數(shù)等數(shù)據(jù)，幫助運營者可以及時調(diào)整運營方案，獲取更好的運營效果。
細節(jié)偵查
優(yōu)惠券是一個特別常見的功能，和「直播」一樣，用戶在前端領取流程非常簡單，領取就能消費。但在拆解完「優(yōu)惠券」的后臺，你會發(fā)現(xiàn)一個小小的優(yōu)惠券包含了非常多的功能點。小鵝通不僅設計了多種類型滿足多種營銷場景，還設計了定向發(fā)放、數(shù)據(jù)統(tǒng)計等功能，幫助商家提升運營效率。
4.2.3.2 優(yōu)惠碼
「優(yōu)惠碼」是一種是基于優(yōu)惠券的玩法拓展，以二維碼的形式作為展示形式，支持在支付結(jié)算環(huán)節(jié)場景進行兌換，它具有優(yōu)惠券的屬性，天然支持轉(zhuǎn)贈，易于傳播，具有拉新作用，是靈活性更強的付費轉(zhuǎn)化工具。它主要用于跨界/跨平臺引流，把線下或其他平臺的客戶引導到店鋪內(nèi)使用優(yōu)惠碼完成付費轉(zhuǎn)化，比如商家在抖音可以設置抖音專屬優(yōu)惠碼，用戶領取消費后，商家可以在后臺查詢不同渠道的用戶使用優(yōu)惠碼消費記錄，從而獲取更精細化的運營策略。
①「優(yōu)惠碼」的創(chuàng)建支持專屬碼和通用碼兩種類型，專屬碼就是一個碼只用一次，通用碼可以多次使用；其次還可以設置用戶使用次數(shù)，分享權限等。
②「優(yōu)惠碼」生成后，通過「效果數(shù)據(jù)」可以查看優(yōu)惠碼的詳細數(shù)據(jù)，包括總成交額、總優(yōu)惠額、領取人數(shù)等，還可以增加庫存、查看優(yōu)惠碼的使用記錄和用碼商品，為商家提供精準的運營分析。
4.2.3.3 有價優(yōu)惠券
「有價優(yōu)惠券」是把優(yōu)惠券當作一個商品來進行銷售，這樣可以以預售的形式促進店鋪轉(zhuǎn)化。比如商家在雙十一店鋪大促之前就創(chuàng)建「有價優(yōu)惠券」，用戶可以提前購買，從而實現(xiàn)為活動宣傳預熱，提升付費轉(zhuǎn)化率。
4.2.3.4 拼團
拼團分為三種，普通拼團，邀新拼團和階梯拼團?！钙胀ㄆ磮F」是指用戶下單開團以后，可以邀請好友拼團購買；「邀新拼團」是指開團后，用戶必須邀請新用戶才能參團購買，這個主要用于新用戶拓展的場景；「階梯拼團」則是隨著拼團人數(shù)越多，價格越低，用低價刺激用戶高效裂變。
4.2.3.4.1 新建拼團
拼團的創(chuàng)建包含兩個部分，分別是基礎設置和更多設置。
①在「基礎設置」，可以設置拼團的參團人數(shù)，成團的時限（比如設置1日，用戶開團后，就需要在1日內(nèi)成團，否則拼團失?。?。
②在「更多設置」，可以開啟購買彈幕（增加促銷氛圍）、在線湊團（優(yōu)先顯示未成團的團，提升成團率）、團長價（開團的團長有優(yōu)惠）、活動預熱等功能。其中「模擬成團」可滿足商家某個拼團購買人數(shù)不夠，系統(tǒng)可自動以“匿名”買家湊單的場景，「超員成團」可滿足當拼團人數(shù)超過限定人數(shù)也同時可以購買的場景，功能非常靈活豐富。
4.2.3.4.2 拼團管理
拼團開啟后，商家可以對拼團進行編輯、推廣、復制和查看數(shù)據(jù)統(tǒng)計。在拼團詳情頁面，可查看拼團的訪客數(shù)、付費用戶數(shù)、支付訂單數(shù)、成交金額和拼團明細，為商家提供更多數(shù)字化的管理，提升運營效率。
4.2.3.5 秒殺
「秒殺」是一個為商家提供對某款商品限時秒殺價出售的營銷工具，作為一個常見的促銷功能，小鵝通的「秒殺」支持開啟活動預熱功能，可以提前吸引用戶關注活動。其次還支持秒殺預約，用戶只要關注商家公眾號，就能收到活動秒殺的提醒，非常方便。
4.2.3.6 限時折扣
「限時折扣」是一個為商家在某段時間內(nèi)以指定折扣購買商品的營銷工具，小鵝通的「限時折扣」支持添加多個商品，可進行批量設置折扣以及減價，非常方便。
4.2.3.7 滿包郵
「滿包郵」是一個針對實物商品購買贈送包郵服務的工具，操作流程比較簡單，選定好指定實物商品以后就可以添加使用。
4.2.4 促進復購
為了提升用戶的復購率，小鵝通為商家設計了四個小工具，分別是兌換碼、商品推薦、彈窗廣告和支付有禮。
4.2.4.1 兌換碼
「兌換碼」是一個常見的營銷功能，是由一串數(shù)字或字母組合，在用戶領取兌換碼以后，可以在店鋪兌換指定的商品和優(yōu)惠券。和「優(yōu)惠碼」相似，商家可以在多個場景中以福利形式向用戶贈送和售賣，最終為店鋪引流。
①「兌換碼」的創(chuàng)建流程很簡單，在「基礎信息」設定庫存（兌換碼數(shù)量），選擇活動時間（可設置某個時間段或長期有效），設置每個用戶領取的數(shù)量，接下來設置用戶可兌換的商品和優(yōu)惠券就完成，其次還支持開啟用戶信息采集功能（開啟后可以搜集領取兌換碼用戶的數(shù)據(jù)信息），為商家提供更多銷售線索。
②兌換碼創(chuàng)建以后，通過「碼庫」可以查看每一個兌換碼的使用情況，包括兌換時間、兌換人、作廢和添加庫存。
4.2.4.2 商品推薦
「商品推薦」是一個可以幫助商家提升指定商品曝光率的工具，當商家添加推薦商品以后，該商品將會出現(xiàn)在前端商品詳情頁的「相關推薦」分類，從而增加商品訪問量和提升轉(zhuǎn)化率。
4.2.4.3 彈窗廣告
「彈窗廣告」是一個可以幫助商家添加自定義彈窗廣告的工具。它的操作流程很簡單，但功能很豐富。在用戶點擊「新建彈窗廣告」以后，可以上傳彈窗圖的廣告樣式，選擇需要跳轉(zhuǎn)的頁面（可跳轉(zhuǎn)指定商品、商品分組、微頁面和助學工具），還可以選擇投放的頁面（包含首頁以及其他欄目頁和微頁面），甚至可以選擇需要投放的人群（比如新手用戶組、VIP會員用戶組等），還可以設置廣告出現(xiàn)的頻次（支持首次訪問出現(xiàn)和每隔多少天出現(xiàn)1次）。當彈窗廣告建立后，商家還可以查看彈窗廣告的曝光次數(shù)、打開次數(shù)和打開率，獲取非常精準的數(shù)據(jù)統(tǒng)計，優(yōu)化廣告運營方案。
4.2.4.4 支付有禮
「支付有禮」是一個商家在用戶購買商品以后贈送優(yōu)惠權益的營銷工具，它可以有效提升用戶的復購率，比如商家設定了購買商品后贈送兌換碼或優(yōu)惠券，用戶在指定的時間內(nèi)消費就能獲取優(yōu)惠。
「支付有禮」的創(chuàng)建流程和其他促銷工具相似，商家可以選擇適用人群（指定某個用戶群體享有）、消費方式（指定消費某個商品或某一類商品），最后選擇贈送的權益，包含優(yōu)惠券、優(yōu)惠碼和兌換碼，即可創(chuàng)建成功。
4.2.5 體驗小結(jié)
如果用兩個詞描述小鵝通的營銷工具的特點，我覺得這兩個詞分別是——極致和絲滑。
「極致」是指小鵝通對營銷工具的不斷創(chuàng)新，比如優(yōu)惠券和拼團。首先把「優(yōu)惠券」拆分為三種類型，滿足不同用戶的需求，其次還設計了「優(yōu)惠碼」和「有價優(yōu)惠券」，為商家考慮了更豐富的跨平臺和促銷預售場景?！钙磮F」也是如此，不僅提供常見的拼團模式，還設計了「邀新拼團」和「階梯拼團」，對于商家來說，營銷手段越豐富，就越能提升用戶的激活率和復購率。
「絲滑」是指這些營銷工具的靈活性。比如像「彈窗廣告」這樣的功能，不僅可以上傳你設計好的廣告圖片，跳轉(zhuǎn)你指定的商品或頁面，還可以選擇可以投放的人群、彈窗廣告出現(xiàn)的頻次，這樣傻瓜式的操作設置，對商家來說，實在太方便了。相比定制化的系統(tǒng)開發(fā)，極大節(jié)省了大量的人力成本，讓商家享受一個優(yōu)秀后臺系統(tǒng)的便捷和愉悅體驗。
感謝閱讀，小鵝通的產(chǎn)品拆解第二部分就到這里，下一篇我們將會繼續(xù)拆解小鵝通后臺！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
今天帶來的是《交互設計沉思錄》第一部分的第二章「管理復雜性」。
主要講述的是交互設計師是如何理解&組織所獲取到的數(shù)字、文字數(shù)據(jù)。
通過這些步驟&方法能夠幫助交互設計師更加清楚信息間的關系，建立很強的心智圖景。
其間也穿插了很多職能相關部分的對比，如「交互設計師與信息架構師」「交互設計師與界面設計師」「交互設計師與電子工程師」。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
注：閱讀此文章大約需要30分鐘
先給大家看兩個案例：大家都很熟悉的，自動感應測溫，不需要人為操控
第二個案例則是nest智能恒溫器，比起傳統(tǒng)的需要人為的去手動觸發(fā)調(diào)節(jié)溫度，他能夠?qū)崟r感知家里的溫度，基于不同的場景與客戶習慣去調(diào)節(jié)溫度，比起傳統(tǒng)模式便捷了不少
那么從這兩個案例中，大家可以發(fā)現(xiàn)，傳統(tǒng)人機交互與下一代人機交互是有著本質(zhì)區(qū)別的，傳統(tǒng)人機交互一直以來都是輸入輸出的被動交互邏輯，什么是被動交互呢，就是必須有用戶向機器發(fā)送指令，機器接收指令，執(zhí)行后將結(jié)果反饋給用戶。而新的交互模式，則是用戶不需要做任何指令輸入，機器自動感知當前的場景，來理解你的意圖是什么，來去主動幫你完成任務。那么這是如何實現(xiàn)的呢，主要是依靠傳感器，算法等實現(xiàn)的。這也說明了我們的生活開始下一代人機交互的新時代。
這也就是今天的主題，那么今天，我會詳細講解，把這個課題講透。包括什么是智能感知交互，他的底層框架模型是怎樣的，以及結(jié)合案例是講解他是如何落地使用的，
回顧整個人機交互的發(fā)展史，經(jīng)過了不同的階段，從命令行界面，也就是通過手柄，遙控等進行交互，再然后是圖形用戶界面，也就是觸摸屏等交互，再到語音交互，圖像識別等等
人們對于人機交互也從依賴于人去手動觸發(fā)，再到趨于自然和本能，隨著技術的發(fā)展，我們也迎來的技能感知交互的新時代
在這里也對智能感知交互做了初步定義：是以人為中心，基于傳感器、大數(shù)據(jù)及AI技術，自動感知用戶情景，理解用戶意圖，主動響應用戶需求，真正提升人機交互效率
那么智能感知交互也有幾個特征，更加的趨于自然，輸入輸出方式更加無感知，智能
接下來是最核心的重點，智能感知交互的框架是怎么樣的，他的底層邏輯是怎樣運行的，這也是整套理論知識的基石和核心。
智能感知交互模型主要分為三層：
那么以剛開頭的無接觸測溫門為例，在感知層主要通過紅外傳感器去感知人的體溫，在決策層則是當遇到發(fā)燒的顧客則需要進行干預，在表達層，則會通過音效、光效做出主動的預警的設計表達。
那么我們接下來詳細的看下整個框架模型，那么，感知層又細分為三大模塊：
第一塊為【用戶感知】，第二塊為【場景感知】，第三塊為【行為感知】。 那我這里給他串聯(lián)起來，簡單來說就是感知用戶是誰，在什么楊的場景下，做了什么樣的行為。那么決策層則細分為兩大塊，也就是無感知之后怎么做決策，理解用戶的意圖是什么，。那么第二則是做出決策后怎么去做設計表達和輸出呢，受到那些變量因素的影響，這是由設計表達影響因子模型決定的。那么最后一層則是正式做出設計表達，目前表達的介質(zhì)主要有界面、聲音、光效、觸覺、動作等。那么這張圖是一個大框架，接下來我會詳細的剖析每一層
先講第一層，感知層，就是感知技術，這里在進一步細分為三個板塊，用戶感知，場景感知，行為感知，用戶感知為，用戶性別、地域、年齡等等特征，場景感知則是什么時間、什么地點，當前環(huán)境、溫度等等，行為感知則是去感知，你用了什么工具，對什么對象，做了什么操作行為等等。針對不同的業(yè)務會有不同的針對感知，例如開頭案例中的體溫測量，他對溫度這一屬性重點感知。大家這里也能想到，世間萬物都可感知，為了方便后續(xù)的統(tǒng)計和分析，需要進行加工處理，需要將當前的感知線上化和數(shù)據(jù)化，同時會將這些數(shù)據(jù)進行標簽化的處理，那么如何去處理這些數(shù)據(jù)呢，這里主要分成三類：
簡單來說就是從傳感器或者線上平臺等渠道直接獲取的數(shù)據(jù)。舉個例子，比如說登錄網(wǎng)站，那么我們可以獲取用戶ID，從溫度傳感器，我們可以直接獲得溫度。這些都是統(tǒng)計類數(shù)據(jù)
簡單來說就是基于一定的規(guī)則產(chǎn)生，舉個例子，比如我們規(guī)定用戶與設備之間的距離為0~40cm為近距離，，工人每小時生產(chǎn)產(chǎn)品80件定義為熟練工，這些都定義為規(guī)則類數(shù)據(jù)
他是通過機器學習挖掘產(chǎn)生，根據(jù)相關屬性進行預測和判斷。比如淘寶上對男女的劃分，他通過你買的商品去判斷你是男生還是女生，你的興趣愛好是什么
那么接下來我們講決策層,那么剛剛我也介紹了整個框架模型，決策層主要有兩部分，現(xiàn)在講述第一部分，也就是整體框架中紅色圈住部分，針對【意圖識別決策模型】進行剖析。簡單來說就是我感知之后去理解用戶的訴求是什么，這里也抽象為四大類決策方向:行為干預、推送建議、意圖預判、自動決策
簡單來說就是我感知到當前的行為是異常、錯誤的，會做出主動預警進行干預。舉個例子，比如圖中的場景，通過攝像頭的圖像識別檢測到工人的操作不規(guī)范，會通過光效和音效的預警來進行行為干預
是基于你的愛好去推送不同的內(nèi)容
感知之后去預判，你接下來會做什么。比如上圖，當系統(tǒng)之前感知到用戶粘貼了地址和電話信息，那么系統(tǒng)就預判你是不是要寄快遞
比如陀螺儀識別用戶將設備傾斜了多少度，將屏幕做自動關屏
那么前面講述的是決策層的第一大板塊，那么現(xiàn)在講第二板塊，也就是設計表達影響因子模型。簡單來說，就是我已經(jīng)決策完成，那么我怎么去做決策和輸出，受那些變量因子影響呢
那么這里也抽象為三大類變量因子，用戶感官因子，環(huán)境因子，設備因子。
比如在【用戶感官因子】上，會去分析，用戶當前的認知負荷是什么樣的，如果當前是在黑暗的情況下，用戶的視覺負荷比較大的話，那么設計表達是不是就應該以聽覺和觸覺為主。同時我們還會去分析用戶是運動狀態(tài)還是靜止狀態(tài)，如果是運動狀態(tài)那么在設計的時候是不是需要考慮，字體是不是需要更大，方便用戶獲取信息等等案例。
【環(huán)境因子】就是環(huán)境光線的強弱，噪聲的大小等等，比如設計的時候，是在室外，光線比較強的環(huán)境，那么設計的界面對比度是不是就得更強。
【設備因子】就是傳統(tǒng)設計當中，他的輸入通道是物理按鍵，還是觸屏，還是語音，手勢這些，以及輸出通道，有沒有喇叭，指示燈等等。這些都會影響我們采用怎樣的方式去進行設計表達。
那么第三層就是我們最熟悉的表達層，也就是具體的交互執(zhí)行。常用的表達方式主要有界面，音效，光效，觸覺，動作這幾類，這些大家都很熟悉，這里就不做詳細的講解。
那智能感知交互依賴的技術和條件也是比較多的，所以他是分企業(yè)分階段發(fā)展的。那么這里主要分為5個等級。從無智能到完全智能，那么目前呢主要處在中間C2這個條件智能的階段中。簡單來說就是機器自動感知部分情景，再加上人的輔助輸入，讓系統(tǒng)完成任務。
那么前面說這些都是偏理論偏框架類的，那么下面我會結(jié)合案例具體講解智能感知交互是怎樣去落地使用的
那么當有了模型框架后怎樣應用呢，首先，離不開設計流程，和傳統(tǒng)設計流程類似，智能感知交互的設計流程也為：【發(fā)現(xiàn)一個機會點，制定對應的設計策略，然后定義具體的設計表達，持續(xù)監(jiān)測進行迭代和優(yōu)化?！窟@樣構成，那么大家就會想了，那我們的不同之處在哪呢？這其實離不開設計對于技術的洞察力，我們設計對于技術的了解和應用其實貫穿在全流程中。
比如說，在我們在做UED設計中，發(fā)現(xiàn)痛點時，我們可以通過問卷調(diào)研，訪談調(diào)研獲得用戶的主觀數(shù)據(jù)，也可以通過埋點檢測獲得用戶的行為數(shù)據(jù)，而我們在優(yōu)化的時候，除了從設計側(cè)出發(fā)的體驗優(yōu)化，那是不是可以不給自己設立邊界，比如從技術出發(fā)，讓算法自身不斷學習，讓準確率有所提升。帶著這樣的不同，我來舉一個案例。
這塊沙琪瑪出生在一個非常傳統(tǒng)的食品供應鏈公司，她從出生出來到被運送到客戶手中，會經(jīng)過4個空間，12個節(jié)點。而在這層層的校驗中，當我們想知道沙琪瑪?shù)馁|(zhì)量，生產(chǎn)日期，和他的位置，需要的是員工的手動介入和對于條形碼的掃描，
但我想更精細化的知道沙琪瑪具體的信息來進行更好的數(shù)字化管理，那就變得非常困難。所以我們在想，怎么可以讓對沙琪瑪?shù)墓芾恚兊酶斆饕恍┠?，那改變這傳統(tǒng)模式的機會，就來自于識別技術的發(fā)展。
那么現(xiàn)在已經(jīng)運用起來這樣的技術了，一些商場的衣服和商品上都會有RFID標簽，比如優(yōu)衣庫，在進行結(jié)賬時只要將多件商品投送到結(jié)賬框中，就可以一次性識別多個商品完成結(jié)賬，這就是RFID的優(yōu)勢，他可以完成一對多的批量識別，并且具有更大的識別范圍，識別過程中不需要設備和條碼直接對視。
那我們就要想了，如果每個沙琪瑪都有一個RFID碼，那我們是不是就可以批量無感知的識別他們了呢。帶著這樣的技術優(yōu)勢，我們來回顧整個操作流程，我們發(fā)現(xiàn)，在圍繞沙琪瑪?shù)囊粚右粚有ｒ炛?，已我剛剛提到的【行為干預、意圖預測、自動決策和推送建議】四個角度來找到更智能的優(yōu)化點，比如說，當沙琪瑪從車間生產(chǎn)出來，即將被打包的時候，我們?nèi)绻l(fā)現(xiàn)了一個異常，可以怎么處理呢，大家覺得~~~~我們是不是可以進行一個行為干預，來將這個異常及時的告知給用戶，又或者，我們可以進行一個自動決策 ，我們通過自動化設備，來吧出現(xiàn)異常的商品進行自動剔除。
那由于整個鏈路太長，所以我現(xiàn)在呢，以沙琪瑪離開倉庫的最后一個校驗環(huán)節(jié)為例，來做展開
這個時候，用戶拖著托盤，來到月臺，準備將沙琪瑪裝上卡車，這個時候，如果沙琪瑪上錯了車，那我們就非常難以將他追溯回來了。所以這個時候，用戶的意圖是非常清晰的，那就是及時的阻止這個異常的商品流出倉庫。但我們知道了，那下一步呢，就是讓機器也知道這一個意圖，其實在這個場景下非常簡單，無非是，某人在某場景下做出了某個行為，而這個場景下我們可以通過員工的賬號ID來獲取的員工的身份，
我們也可以通過設備上在運行的秘鑰來獲得當前的實操場景是什么，
還能通過RFID的天線，他所識別到的信號逐漸增強，來發(fā)現(xiàn)，啊確實有一個用戶，在拖著商品逐漸靠近，那以上這三個條件，就可以觸發(fā)我們對于托盤上的貨物的識別來判斷，他上的車是不是對的呢，數(shù)量是不是準確呢，一旦發(fā)現(xiàn)異常，我們就需要將信號及時的傳給用戶
那下面問題就來了，我們該怎么表現(xiàn)這個異常，剛才也提到，我們設計的表達是多種多樣的，有界面內(nèi)的，界面外的，環(huán)境空間的。而用戶接收的渠道卻非常的單一，無非是，視覺、聽覺、觸覺、甚至以后可能會有嗅覺。
所以我們在定義一個合適的表達方案的時候，就需要考慮到當下用戶、環(huán)境、設備的影響因素，那在我們的場景中，我們應該怎樣選擇一個合適的感官通道來傳遞這個異常信號呢
這就需要我們清晰的了解，在這個場景下，每一個感官通道被占用的情況，這樣我們才能選擇其中占據(jù)優(yōu)勢的那些來做出我們的設計表達
為此，我們總結(jié)過往一些學術研究，來將用戶、環(huán)境、設備他具體的影響程度進行數(shù)值化。比如對于用戶的限制，我們采用VACP的工作負荷模型來量化用戶的各個通道上認知資源被占用的程度。而對于用戶自身的能力限制，我們通過劍橋大學提出的一個無障礙公式，來計算用戶自身能力限制的程度，同樣，我們綜合國內(nèi)一些常見的標準，來將環(huán)境因素，例如，亮度、噪聲、和設備自身的表達能力進行等級的劃分。那大家就要好奇了，那要數(shù)值化，那數(shù)值化靠譜嗎，我們怎么做這個數(shù)值化呢？
那我以VACP工作負荷模型來做一個簡單的展開，他起源與1984年，對于飛行員在駕駛飛機的一個觀察和研究。研究者將他劃分為視覺、聽覺、認知、運動四個維度。同時呢，對于不同難度系數(shù)的任務，劃分了不同對資源程度占用不同的等級，這樣，我們就可以像查閱字典一樣，來根據(jù)我們需要的任務表現(xiàn)，找到這個通道上對應具體的占用程度
回到我們剛才的場景，當用戶拖著托盤靠近的時候，他需要時刻注意眼前的道路，避免和其他物品碰撞，這個時候，視覺上他對物體的追蹤和跟隨，這個時候呢，在視覺上通道上他會有77%的占用情況
而聽覺上，雖然他不需要聲音來辨別道路，但在這個過程中，有可能有小組長會叫他說，唉，你過來以下，那這樣我們就需要做一個聲音的辨認，那在聽覺通道上，可能會有14%的占用程度
而在月臺上，時刻會有運輸與發(fā)動機的聲音，這個大約在70分貝的噪聲，會給用戶在聽覺上有個二級的干擾作用
綜合來看，首先，我們對用戶在觸覺上的反饋通道就被阻斷了，因為設備端離用戶實在太遠了，無法進行一個觸覺上的反饋，
而剩下的視覺通道已經(jīng)被高度占用了，他的有效性是較為有限的。而在聽覺上，雖然他的占用程度沒這么高，但他收到了環(huán)境噪聲的二級干擾，所以我們單一的通過視覺或者聽覺都不足以達到一個有效的反饋作用。
好在現(xiàn)在用戶的認知還是比較充沛的，所以呢，我們可以通過視覺、聽覺、認知三個通道上的整合，來做一個比較有效的反饋。
也就是，當用戶靠近時，首先，她會在聽覺上聽到蜂鳴器的報警，
然后呢，他的注意力就被抓到了燈光的閃爍模式上。，他從他的記憶中記得的燈光的三種閃爍模式上，辨識到了這個閃爍意味著說：這個閃爍，標識著我現(xiàn)在拉得沙琪瑪品類有問題，那我要好好的檢查一下。那我們的反饋呢，就成功的達成了
那除了剛剛提到的，多感官的反饋，我們在對于界面的設計上，也考慮到了多因素的影響
那第一個就是大家相當熟悉的視覺距離，在我們的生活場景中，，有手持設備的近視距，也有推動設備的中視距，還有推動大型設備上走向通道門的，遠達130厘米的遠視距
那面對這樣不同的視覺距離，和用戶靜態(tài)或者動態(tài)的移動狀態(tài)，我們推導了計算文字高度和文字字號的公式，
然后計算這樣的視覺距離和運動速度的不同，來對關鍵信息做突出化的展示，保證用戶在看到關鍵信息時他的清晰度。那大家可以想想，除了視覺的距離以外，還有什么因素會影響到視覺的表達呢，
那就是環(huán)境的亮度。在我們的場景內(nèi)，盡管有部分都是在室內(nèi)發(fā)生，但也有部分是在室外發(fā)生，就比如我們舉的沙琪瑪?shù)睦?，他是在月臺發(fā)生的場景，那這個時候，就需要我們在色彩的設計上，去考慮到環(huán)境亮度的影響，
我們基于 W3C,對于色彩對比度的分析，然后定義了我們的配色方案，在對于室外的環(huán)境，我們會采用色彩對比度較高的配色方案，而到了室內(nèi)呢，我們會動態(tài)的將色彩對比度降低，避免用戶長時間注視對比度高的界面，造成視覺疲勞
那既然有設計方案，那自然就有效果評估，
我們將智能感知設計的評估，分為主觀和客觀兩個部分，主觀就是大家比較熟悉的，比如我們感知的這個情景是否準確，能不能夠幫助用戶提高效率呢，整個感受是不是愉悅的，是不是有效的，那么這一塊我們是通過李克特5點量表問卷，和SAM問卷來進行度量，另外一部分則是客觀部分，這一部分我們通過對于算法模型的評估指標來進行度量，比如他的準確率，召回率，精準率來評估他的算法是否可以不斷學習和進步。
那智能感知交互的分享就到這里，這里我衍生一下，從剛才的案例中，主要都是實操類的，那么我們是不是可以做個衍生，將智能感知設計的思路方法也延用到產(chǎn)品設計中呢，比如現(xiàn)在的抖音，頭條，他們?nèi)シ治鑫覀兊南埠?，主動的替我們進行篩選，于是在使用產(chǎn)品的時候，我們可以說是被動的看內(nèi)容，被動的看到商品被吸引然后下單。那么B端產(chǎn)品也可以以此類推，傳統(tǒng)模式下，是人登錄后臺，主動去找任務，那么在這里，我們是否可以換個思路，任務主動來找人，通過感知到用戶的身份，我們來主動檢測，他所關注的任務的進度，并且在這個任務落后的時候，主動發(fā)出預警和提示，真正的提升用戶的管理效率。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
大家有沒有遇到這樣的問題，當你面對非常復雜的信息時，在進行信息整理設計時，往往會陷入比較糾結(jié)的場面，不知道怎么把這一堆信息進行比較好的排列。如果你剛好也有這部分疑問，這篇文章適合你繼續(xù)閱讀。
本篇文章會提供一種解決排列問題的簡單底層邏輯，我們可以圍繞這個邏輯去排布我們的頁面，從而讓整體排版變得更加清晰合理。
信息層級存在于我們目前看到的每一個畫面。它本質(zhì)上是信息組織的一種方式，通過信息的放大縮小和對應的位置，能夠?qū)碗s的信息分為不同的模塊呈現(xiàn)在我們的視野中。
大家先簡單看一下圖中兩個畫面，你就能夠直觀感受到信息層級對于用戶認知的作用。
不好的信息層級就像左圖一樣會讓畫面比較雜亂，難以進行視覺上的識別。而優(yōu)秀的信息層級就像右圖一樣能夠讓我們快速且準確的識別出畫面想要傳遞的信息。
因此信息層級的排列不僅影響視覺上的美觀度，更影響人們在檢索信息時候的效率。尤其是對于B端復雜場景，我們不僅需要考慮清晰傳遞業(yè)務價值，合理的信息層級劃分也是提高產(chǎn)品體驗的重要部分，好的信息層級則意味著更好的使用體驗。
既然信息層級對于使用體驗比較關鍵，那么怎樣做好頁面的信息層級則顯得尤為重要。而目前網(wǎng)上的資料也是參差不齊，我也曾為此類問題查閱了大量資料，想要找到一個簡單高效的答案。
但目前查閱到的資料幾乎都在講排列的四個基本原則：對比、對齊、親密、重復。不可否認的是這四個方法對于我們排布信息層級確實起到了很大的作用。但也闡述得太過寬泛，讓人很難在實際中更有效地利用。
即使我對排版四個原則非常熟悉，在面對復雜層級排版時仍會面對困惑。因此我對目前頁面上比較好的頁面排版進行了進一步的探索：
經(jīng)過線上頁面與概念的整體研究發(fā)現(xiàn)，他們在遵循排版原則的基礎上，本質(zhì)上都存在一個簡單的邏輯：那些優(yōu)秀的頁面設計都把主內(nèi)容的層級控制在了三層左右，如下圖所示。
因為三層左右的層級是最容易被用戶感知，且視覺上不易混亂。超過三層后隨著層級越多復雜性會相對增加。
比如我們看下面這兩個例子，左邊層級因為特別復雜，造成用戶獲取信息效率變低，而通過層級的轉(zhuǎn)換，我們可以將其變得更簡單且易讀。
再舉一個例子，我們在大部分場景見到的純文字排版基本都離不開以下幾種形式：
因此，我們需要在排版時需要首先思考一個邏輯：那就是盡量將我們的內(nèi)容層級控制在三層左右。且這三層內(nèi)有比較明顯的對比關系。
有同學看到這肯定要問了，這個道理我也懂啊，可是在實際業(yè)務中大部分時間拿到的信息太多，根本做不到保持在三層以內(nèi)。別急，這篇文章的重點當然不是告訴你這么簡單的道理，而是在面對復雜層級的時候，我們應該怎樣去控制它的層級表現(xiàn)，從而讓它在最終呈現(xiàn)上保持在三層左右，讓用戶獲取信息的效率更高。
其實我們在實際中的大部分優(yōu)秀頁面，在本身的信息層級上可能都非常復雜，但我們可以通過一系列的方法，去減輕這種多層級的影響，從而讓我們的頁面即使承載了很多復雜的信息，也能變得更加簡單清晰。那我們接下來就闡述一下對復雜層級的處理方案。
這可能是被很多人忽略的一點，就是信息的前置處理。我也曾遇到過某些信息很復雜導致排版很困難，但卻忽略了這些信息是否真實地被需要。這就需要我們從源頭上進行第一層的判斷。
源頭降低的本質(zhì)就是判斷我們當前所要呈現(xiàn)的信息是不是必要的。其實這也是在目前工作中遇到的場景，比如某些時候產(chǎn)品給到了我們很多信息，但我們并不一定會全盤接受，而是通過當前頁面的業(yè)務場景去進行判斷。確定每個信息的合理性，從而可以決定有些元素是否可以刪減，提高整體信息設計的一致性。
1. 當前的所有信息真的需要存在于頁面中嗎，如果去掉某些信息有無影響。
比如當你在進行打車的時候，當你輸入目的地之前，一切其他的信息都無需呈現(xiàn)。當你輸入目的地后，車輛的相關信息和價格才會進行呈現(xiàn)，當你打車后，司機的相關信息才會進行呈現(xiàn)。這些都是按照用戶的使用場景來進行對應的呈現(xiàn)。
2.當前信息的重要程度是怎樣的，對于某些不重要的信息是否可以通過隱藏的方式展現(xiàn)。
當你拿到一堆信息，信息的重要程度就決定了我們需要將哪些信息作為主體，哪些信息作為次要輔助信息，哪些信息甚至可以收起或者省略。比如當你瀏覽新聞的時候，標題永遠是最關注的，而評論，作者，簡介等都是可以忽略的信息。
上述兩個問題的確認，會影響我們對后面的信息排布。因此我們需要在源頭，比如去和產(chǎn)品或者業(yè)務溝通，弄清楚該信息呈現(xiàn)的緣由以及必要性，這樣能夠幫助我們最后理清楚信息層級。
信息排布的本質(zhì)是通過我們對信息進行排列上的調(diào)整，來將多余的層級融入到三層以內(nèi)。從而讓我們整體的頁面顯得更加簡潔。
通過目前的實踐總結(jié)，我覺得目前可以有以下五種方法來幫助我們更合理地安排信息層級。
信息分組是大家在設計時都能夠想到的形式，分組能夠?qū)碗s的信息打散，從而降低頁面整體的復雜度。比如我們常用的分組方式有三種方式：間距、分割線、卡片。
那么這三種方式有沒有區(qū)分呢，VIVO設計團隊曾經(jīng)就這個問題展開過用戶調(diào)研，但結(jié)果表示，如果純粹從用戶的角度來講，對其變化感知不大。但這三種分割方式會影響我們在呈現(xiàn)信息時的整體視覺觀感，因此我們可以根據(jù)當前信息的復雜度作出以下規(guī)則：
通過這三種場景的區(qū)別，我們可以根據(jù)信息復雜度更好地選擇分割方式，讓界面的表達清晰明確。
組件其實是目前大部分設計師在進行信息排布時必備的部分，因此對于這部分設計師的熟練度也是最高的。而本篇想要強調(diào)的是，目前這幾種組件對于我們信息層級的劃分起到了比較重要的作用：樹形結(jié)構、表格結(jié)構、步驟條、選項卡。
▍樹形結(jié)構
對于有關聯(lián)性的多層級非常適合，可以將復雜的層級結(jié)構進行收攏，從而能夠顯著降低信息的復雜度。
▍表格結(jié)構
對于信息多且關聯(lián)性不大的復雜信息，可以聚合到表格來進行呈現(xiàn)，但表格的呈現(xiàn)方式不宜濫用，需要根據(jù)我們場景來進行選擇。
▍步驟條
步驟條則對場景要求非常明確，我們可以將多個場景通過分布的形式進行呈現(xiàn)，從而減少當前頁面的復雜度。
▍選項卡
選項卡更適合與同級的數(shù)據(jù)，對于同類型的結(jié)構可以更好地將頁面進行拆分，從而讓當前頁面更簡潔。
由于組件這一塊大家的認知已經(jīng)比較全了，在這里就不進行更深入的講解了。如果有需要的同學可以通過瀏覽各大廠的組件文檔去進行更細致的查閱。
通過改變布局的方式，我們可以將多層結(jié)構的樣式通過拆分布局來將其控制在三層內(nèi)。這句話什么意思呢，舉個簡單的例子：
從上圖中你可以看出目前的層級較多，尤其是兩層tab的疊加，視覺上就會顯得稍微有點凌亂。我們可以通過將第二層tab換個布局，從上下結(jié)構變?yōu)樽笥医Y(jié)構，達到從視覺上簡化層級的作用：
當然以上只是舉了一個簡單的例子。這里底層邏輯就是當遇到相對比較復雜邏輯時，我們可以考慮通過改變結(jié)構來減少其復雜度，比如上述的兩欄結(jié)構，甚至三欄結(jié)構，從而讓整體變得更加簡潔。
我們可以利用信息融入的形式來減弱其對層級的影響。信息融入從本質(zhì)上講就是將某兩種層級信息通過不同的組合方式，讓其融入到同一個層級中。比如我們看下面這一個例子，Coding產(chǎn)品設計中將標題與tab利用分割排列在一起，從而變?yōu)橥粚蛹?，這個時候就不會出現(xiàn)四層的復雜結(jié)構，頁面還是保持三層結(jié)構，通過這種方式有效降低了頁面的復雜度。
信息融入這個方法，當我們在進行B端布局時，用得比較多。比如我們最常見的標題、搜索和按鈕等都放在同一行上。這樣既能夠節(jié)省視覺空間，還能夠降低信息層級的復雜度。
但在進行信息融入的過程中，我們需要注意的是：如果放在同一層級會造成理解上的誤解時，這個時候不要采用該方案。比如搜索框的位置，放在哪個層級決定了對應的搜索范圍。
信息弱化的原則是，將某些超出層級的部分進行弱化。比如有5個層級，但其巧妙地將功能篩選融入到了當前的結(jié)構中，使得即使超過3層我們也不會覺得其特別復雜，我們再看一個例子：
可以看到TAPD將「另存為視圖功能」與「缺陷統(tǒng)計」進行了弱化，雖然還是有4種層級，但從視覺感知的層面上不會覺得視覺凌亂。
在很多時候，我們覺得信息混亂的原因，就是頁面要素太多太花哨。比如工作中的一個小卡片，也就是利用信息弱化去減少畫面的復雜度：
因此我們需要學會對信息分級，不重要的信息就進行弱化，這樣整體的表述上會好很多。
通過上述5種方案：信息分組、利用組件拆分、更改布局、信息融入、信息弱化，我們可以將大部分層級過多的復雜信息簡化在三層以內(nèi)，從而讓我們最終的頁面呈現(xiàn)不會太過復雜，更容易被用戶理解。但不可否認仍會有更復雜的頁面，即使縮減也仍有過多層級，那么這個時候就一定要記得最開始的從源頭去追溯這些所有信息是否必要。
在研究的過程中，也總結(jié)了目前在進行信息層級排布過程中比較糾結(jié)的一些細節(jié)點，也分享給大家。希望對遇到相同問題的同學一些幫助。
大家對「對齊」并不陌生，它存在于我們的每個頁面。但在對齊的過程中，我們可能會忽視一個小細節(jié)點，那就是沿著字的軸線對齊。比如下圖兩個例子：
在看見左圖時，總覺得哪里會有點奇怪，但又不知如何表述。而右圖看著就會相對更舒服。經(jīng)過對比過后明顯發(fā)現(xiàn)右邊的圖整體相比于左側(cè)會更整齊，而這就是說的沿著字的軸線對齊。這主要是由于相似原則引起的：那些明顯具有共同特性(如形狀、大小、顏色等)的事物會被我們的視覺組合在一起，即相似的部分在感知中會形成若干組。
而左側(cè)因為標題字和底部字沒有形成對齊，因此會顯得更加凌亂一點。所以沿著字的軸線對齊會讓我們在整體的頁面呈現(xiàn)中顯得更整齊。
這是我平時在做設計呈現(xiàn)時也會糾結(jié)的一個問題。當你想用卡片來呈現(xiàn)視覺時，你有沒有糾結(jié)過到底是用線框卡片還是背景色填充呢。
我就曾陷入這種糾結(jié)，但在去搜索查閱時，發(fā)現(xiàn)目前其實關于這塊相關的資料，因此在大部分情況下都是由設計師自行決定的。但經(jīng)過線上產(chǎn)品的調(diào)研發(fā)現(xiàn)，這塊內(nèi)容其實也包含著一定的規(guī)則：
1.取決于卡片的數(shù)量
對于卡片少的其實可以用色塊來呈現(xiàn)，對于卡片多的可以考慮用線框來進行。這其實主要是從一個視覺的維度來進行呈現(xiàn)，舉個簡單的例子：
通過coding和飛書的卡片對比，你會發(fā)現(xiàn)卡片過多時線性設計會讓頁面顯得更整潔和清新，色塊設計就會讓頁面顯得更厚重。右側(cè)整體的呈現(xiàn)行會顯得更好一些。
2.取決于頁面的視覺重心
這里頁面視覺重心的含義是當你整個頁面都全是線框時，你可以利用色塊的卡片來達到突出頁面重心的效果，讓整體頁面沒有那么單調(diào)，可以看到下圖的例子，右側(cè)的頁面會相對更穩(wěn)重一點。
在進行色塊時，時常會糾結(jié)用灰色底還是彩色底來進行。那么這兩者到底有沒有界限的區(qū)分呢，我們應該何時使用這兩種色彩呢。
我們先看一下案例：
可以看出目前這兩種顏色的運用更多的是功能上的區(qū)分：
1.彩色背景更適用于「想要引起用戶注意的界面」，比如一些功能引導或者營銷性質(zhì)的頁面。從表現(xiàn)性質(zhì)上來講更重。
2.而灰色背景更適用于「利用灰色背景來區(qū)分層級關系」或者一些微弱提示的信息。從表現(xiàn)形式上來講更輕。
所以我們可以根據(jù)當前的信息場景來選擇合適的色彩，后面再面對時就可以不用那么糾結(jié)。
本期的內(nèi)容到這里就結(jié)束了。關于這期的信息層級內(nèi)容，真正需要深入了解的是控制信息層級背后的方法。很多時候我們看見的優(yōu)秀頁面并不是因為它本身就簡單，而是通過我們合理的信息層級控制，讓最終呈現(xiàn)上顯得不復雜，這其實也是我們在實際工作中需要注意的很重要的一個點。
本文重點內(nèi)容再回顧，當我們遇見復雜的信息層級時，需要分三步：
1.明確當前所有信息的必要性和重要分級，需要從源頭去深入了解；
2.運用五個方法可以有效減低信息層級：信息分組、組件拆分、更改布局、信息融入、信息弱化
3.同時在運用過程中需要注意影響層級的小細節(jié)
以上是本文關于信息層級的另一種角度的描繪，雖然沒有提及四大基本原則，但在實際運用中也是很重要的。最后，雖然進行了很多資料查詢，但在在闡述過程中不可避免會有闡述不到位的地方，歡迎進行反饋。
原文地址：站酷
作者：蒙東東
轉(zhuǎn)載請注明：學UI網(wǎng)》科幻機甲風格海報怎么做？
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.yvirxh.cn