<var id="9tevj"></var>
數(shù)據(jù)保存是Web端工具的基礎(chǔ)功能，一般在產(chǎn)品和技術(shù)框架設(shè)計之初就已經(jīng)確定了數(shù)據(jù)保存的方式，后續(xù)不太會頻繁更改。
正因為如此，在日常需求迭代中，設(shè)計師很容易忽略數(shù)據(jù)保存的過程，也很少質(zhì)疑當(dāng)前的保存機(jī)制是否合理，但是當(dāng)需要設(shè)計新模塊或產(chǎn)品時就會對保存有疑惑。
此外，保存也是一個受技術(shù)限制較大的領(lǐng)域，設(shè)計師需要對保存的技術(shù)類型有基礎(chǔ)認(rèn)知，因為它會影響保存生效的邏輯和交互形式。
本文將會基于個人經(jīng)驗，從設(shè)計表現(xiàn)和技術(shù)實現(xiàn)的角度聊聊Web端工具的數(shù)據(jù)保存。
對于Web端工具產(chǎn)品來說，保存的對象可分為「文件數(shù)據(jù)」、「設(shè)置數(shù)據(jù)」、「用戶行為數(shù)據(jù)」。
「文件數(shù)據(jù)」是相互獨立的內(nèi)容，比如酷家樂的一個方案、Figma的一個文檔都是文件數(shù)據(jù)，在文件A中觸發(fā)保存并不會影響到文件B。文件數(shù)據(jù)是最主要的用戶資產(chǎn)，若丟失會給用戶造成很大的損失。
「設(shè)置數(shù)據(jù)」分不同的維度，主要有用戶級別、組織級別、設(shè)備級別這三種。
用戶級別：數(shù)據(jù)保存在當(dāng)前用戶的賬號下，同一個用戶的所有文檔都會應(yīng)用該設(shè)置，比如酷家樂云設(shè)計工具的偏好設(shè)置。
組織級別：數(shù)據(jù)保存在組織級別，可能由組織管理員設(shè)置，同一個組織下的所有用戶都應(yīng)用該數(shù)據(jù)。
設(shè)備級別：數(shù)據(jù)保存在設(shè)備（瀏覽器）上，同一個設(shè)備上的不同賬號、不同文檔都會應(yīng)用此數(shù)據(jù)。區(qū)別用戶級別和設(shè)備級別的保存很簡單，只要清空瀏覽器緩存，看看數(shù)據(jù)是否變化即可。
一般來說，「設(shè)置數(shù)據(jù)」也是用戶資產(chǎn)。但是設(shè)備級別的數(shù)據(jù)存在丟失的可能性，一般情況下不會存儲大量重要的數(shù)據(jù)。
技術(shù)上經(jīng)常把「用戶是否進(jìn)行過xx行為」這樣數(shù)據(jù)保存在用戶級別或設(shè)備級別，用于差異化的引導(dǎo)、運(yùn)營方案。這類數(shù)據(jù)雖然不能被視為用戶資產(chǎn)，但對于產(chǎn)品設(shè)計來說至關(guān)重要。
<h2 data-darkmode-bgcolor-16666872301626="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16666872301626="#fff|rgb(255, 255, 255)" data-darkmode-color-16666872301626="rgb(136, 166, 217)" data-darkmode-original-color-16666872301626="#fff|rgb(23, 43, 77)" data-style="margin: 8px 8px 16px; font-size: 20px; white-space: normal; line-height: 1.5; letter-spacing: -0.008em; color: rgb(23, 43, 77); border-bottom-color: rgb(255, 255, 255); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" background-color:="" rgb(255,="" 255,="" 255);"="" class="js_darkmode__19" style="white-space: normal; margin: 0px; padding: 0px; outline: none; box-sizing: inherit; font-size: var(--article-h2-size); line-height: 1.8; caret-color: rgb(34, 34, 34); color: rgb(34, 34, 34); font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW; text-indent: 2em;">
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">根據(jù)數(shù)據(jù)保存的位置，可以分為兩類：后端保存和前端保存。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:"">
<strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">2.1 后端保存</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">后端保存是最常見的保存方式，觸發(fā)保存后，將方案數(shù)據(jù)上傳并存儲在服務(wù)器（云端），需要聯(lián)網(wǎng)。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">局限性：</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">1.依賴網(wǎng)絡(luò)；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">2.數(shù)據(jù)量大時會耗性能，可能會阻塞操作</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:"">
<strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">2.2 前端保存</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">前端保存是指以緩存 (cache) 的方式將數(shù)據(jù)保存在瀏覽器中，一般采用的技術(shù)方案是 indexDB（如Figma)。即使將瀏覽器關(guān)閉，下次打開時仍能夠恢復(fù)數(shù)據(jù)。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">局限性：</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">1.有大小限制（幾百兆）；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">2.必須要同設(shè)備，且不能清除緩存；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">3.有時間上限（大部分瀏覽器最多可以保存 30 天）</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">還有一種前端的臨時保存，即會話保存（sessionStorage），通常為了方便單次會話而設(shè)置，例如記住選項狀態(tài)、輸入框的內(nèi)容等，但只要關(guān)閉或刷新標(biāo)簽頁這些數(shù)據(jù)就會被清除。從嚴(yán)格意義上來說，會話保存不是真正的保存，本文不對此展開討論。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">Web端工具一般會以后端保存為主，前端保存為輔，這樣能夠最大程度避免因網(wǎng)絡(luò)或服務(wù)不穩(wěn)定造成的數(shù)據(jù)丟失。</span></span>
</p>
<h1 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h1-size);line-height:1.5;caret-color:#222222;color:#222222;font-family:"">
「Chapter Three」保存的觸發(fā)機(jī)制
</h1>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">從保存的觸發(fā)維度，可以將保存行為分為自動保存、手動保存、提示保存。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:"">
<strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">3.1 自動保存</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">根據(jù)保存的觸發(fā)條件，可將自動保存分為以下3種：</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">a. 定時觸發(fā)保存以一定的時間間隔（通常采用幾分鐘 ~ 1 小時）周期性地自動觸發(fā)保存。這是酷家樂云設(shè)計工具目前采用的保存方式。這種自動保存能減少因軟件崩潰、斷電等特殊原因造成的數(shù)據(jù)丟失的影響，但仍無法避免數(shù)據(jù)丟失，需要手動保存作為輔助。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">b. 條件觸發(fā)保存特定的用戶行為會觸發(fā)方案自動保存。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">具體哪些行為需要觸發(fā)保存，則要結(jié)合業(yè)務(wù)邏輯和技術(shù)實現(xiàn)來共同確定。要注意的是，這類保存通常因技術(shù)原因而采用，用戶對其沒有預(yù)期，盡量不要讓它打斷或干擾用戶的操作。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">c. 實時保存只要數(shù)據(jù)發(fā)生改變，立即觸發(fā)自動保存，無需用戶手動保存（盡管一些產(chǎn)品考慮到用戶習(xí)慣，仍會保留手動保存的交互）。部分產(chǎn)品會用間隔幾秒鐘的自動保存（如 Microsoft 365），效果基本等同于實時保存。實時保存能最大程度避免數(shù)據(jù)丟失，是Web端工具理想的保存觸發(fā)方式。但因為技術(shù)原因，并非所有工具都能夠做到實時保存。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:"">
<strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">3.2 手動保存</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">手動保存指用戶通過額外的操作觸發(fā)保存，通常為點擊「保存」按鈕或快捷鍵。部分有實時保存機(jī)制的工具不需要額外的手動保存（如Figma），但對于沒有實時保存的工具來說，手動保存的設(shè)計至關(guān)重要。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:"">
<strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">3.3 提示保存</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">即便有手動保存，用戶還是可能忘記保存。當(dāng)用戶離開工具或某個環(huán)境時，若程序監(jiān)測到有未保存的內(nèi)容會丟失，則將此風(fēng)險暴露給用戶，用戶可以選擇保存或者直接離開。如果用戶通過直接關(guān)閉瀏覽器/標(biāo)簽頁的方式離開，也可以在瀏覽器上設(shè)置類似的兜底提示對話框，但是對話框上的文案無法定制。</span></span>
</p>
那如何選擇保存的觸發(fā)機(jī)制？
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">a.「實時保存」保障性最好，在技術(shù)允許時推薦采用；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">b. 因技術(shù)原因無法采用「實時保存」時，推薦使用「定時觸發(fā)保存」 + 「手動保存」共同作用，也能較好地保障數(shù)據(jù)；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">c. 「條件觸發(fā)保存」通常是因技術(shù)原因而采用，用戶對其沒有預(yù)期，盡量不要讓它打斷或干擾用戶的操作；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">d. 在數(shù)據(jù)有丟失風(fēng)險的時候需要提示用戶保存，可根據(jù)用戶的操作路徑選用工具自身的提示或瀏覽器的提示。</span></span>
</p>
<h1 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h1-size);line-height:1.5;caret-color:#222222;color:#222222;font-family:"">
「Chapter Four」保存的觸發(fā)設(shè)計<br style="margin:0px;padding:0px;outline:none;box-sizing:inherit;" />
</h1>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">4.1 觸發(fā)原則</span></span>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">在開始聊具體的設(shè)計之前，先提出保存的 2 點設(shè)計原則：</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:"">
</h2>
<h3 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h3-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">防錯</span></span>
</h3>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">保存是對方案數(shù)據(jù)的 最重要的 保障機(jī)制。穩(wěn)定的系統(tǒng)需要有可靠的保存機(jī)制，盡量避免各種原因造成的方案數(shù)據(jù)丟失。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:"">
</h2>
<h3 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h3-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">狀態(tài)可見</span></span>
</h3>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">保存的反饋需及時有效，讓用戶知道當(dāng)前方案的存儲狀態(tài)，如果有異常也需要第一時間告知，并給出可行的解決方案。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">引用《<em style="margin:0px;padding:0px;outline:none;box-sizing:inherit;">微交互</em>》一書中提到的“觸發(fā)器”概念，可以將保存作為一個觸發(fā)器。觸發(fā)器是啟動一系列動作的原點，分為系統(tǒng)觸發(fā)器（系統(tǒng)被動觸發(fā)）和手動觸發(fā)器（用戶主動觸發(fā)）。</span></span>
</p>
<h4 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--detail-content-size);position:relative;line-height:1.8;word-wrap:break-word;caret-color:#222222;color:#222222;font-family:"">
</h4>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:"">
<strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#A5C8FF;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:17px;">4.2 系統(tǒng)觸發(fā)器</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">對系統(tǒng)觸發(fā)保存來說，主要需確定2個點，何時觸發(fā)、觸發(fā)頻率。對Web端工具來說，有3種主要的觸發(fā)模式：</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">a.定時觸發(fā)</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">一個獨立工具一般只有一個保存觸發(fā)間隔設(shè)置，其間隔范圍很廣，可以是幾秒鐘、幾分鐘，甚至一個小時。一般會暴露給用戶設(shè)置。建議產(chǎn)品設(shè)計師根據(jù)技術(shù)現(xiàn)狀設(shè)定合理的時間，如果保存對性能有較大消耗，過于頻繁的保存也會影響用戶體驗?？赏ㄟ^選擇器給用戶幾個合適的選項，選項之間的時間間隔依次變大，總選項數(shù)不超過 5 個。</span></span>
</p>
某設(shè)計工具偏好設(shè)置中的保存時間設(shè)置
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">b.條件觸發(fā)</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">特定的用戶行為也可觸發(fā)自動保存，如酷家樂云設(shè)計工具環(huán)境切換、新建樓層，水電工具的智能設(shè)計等，都會觸發(fā)方案保存。以下是一些常見的「條件觸發(fā)保存」時機(jī)，這些時機(jī)是由技術(shù)能力、業(yè)務(wù)要求共同決定的。設(shè)計師需要考慮如果這些時機(jī)觸發(fā)了自動保存，對用戶的操作會用什么影響。</span></span>
</p>
c.實時觸發(fā)
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">現(xiàn)在已經(jīng)有很多在線工具（如 Figma）實現(xiàn)了實時觸發(fā)保存，對用戶來說可以不用再理解保存這個概念，是一種認(rèn)知上的減負(fù)，并且這種方式對數(shù)據(jù)保障的效果也最好。但是，仍然有設(shè)計師提出這種體驗上的風(fēng)險，比如沒有容錯余地、頻繁保存造成的干擾和系統(tǒng)壓力。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:"">
<strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#A5C8FF;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:17px;">4.3 手動觸發(fā)器</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">對保存來說，「手動觸發(fā)器」一般來說是一個保存按鈕。在沒有實時保存的創(chuàng)作類工具中，手動保存按鈕的設(shè)計至關(guān)重要，一般會放在界面上方較顯眼的位置，并設(shè)置快捷鍵 (Ctrl+S)，方便用戶操作。</span></span>
</p>
酷家樂云設(shè)計工具的保存位于頂部欄第一個分區(qū)
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;background-color:#FFFFFF;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">而對于管理類工具，保存按鈕一般位于頁面下方，因為用戶一般從頁面上到下確認(rèn)完內(nèi)容后再進(jìn)行保存。</span></span></span>
</p>
酷家樂賬號設(shè)置頁面
<h1 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h1-size);line-height:1.5;caret-color:#222222;color:#222222;font-family:"">
「Chapter Five」保存的反饋設(shè)計
</h1><h3 data-darkmode-bgcolor-16666872301626="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16666872301626="#fff|rgb(255, 255, 255)" data-darkmode-color-16666872301626="rgb(136, 166, 217)" data-darkmode-original-color-16666872301626="#fff|rgb(23, 43, 77)" data-style="margin-top: 10px; font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin-left:="" 8px;="" margin-right:="" 8px;"="" class="js_darkmode__98" style="white-space: normal; margin: 0px; padding: 0px; outline: none; box-sizing: inherit; font-size: var(--article-h3-size); line-height: 1.8; caret-color: rgb(34, 34, 34); color: rgb(34, 34, 34); font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW; text-indent: 2em;">
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#B2B2B2;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">a.自動保存的反饋對于自動保存，當(dāng)保存結(jié)果無異常時，盡量減少對用戶的干擾，盡量不使用全局提示 (Toast) 反饋。比較場景的做法是在工具某個固定位置，用圖標(biāo)或文字的狀態(tài)變化作為反饋。</span></span>
</p>
當(dāng)某些條件觸發(fā)保存時，甚至不需要讓用戶感受到保存的發(fā)生，因為用戶對保存是沒有預(yù)期的，建議將保存的過程與其他過程合并。
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#B2B2B2;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">比如說從云設(shè)計工具進(jìn)入施工圖時，因為技術(shù)原因需要保存方案，但可以將保存方案的進(jìn)程與施工圖加載的進(jìn)程合并。</span></span>
</p>
b.手動保存的反饋對于手動保存，當(dāng)保存結(jié)果無異常時，可使用全局提示（Toast）告知保存進(jìn)度和保存結(jié)果，也可以用「保存」按鈕的狀態(tài)變化作為反饋。
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:"">
<strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#A5C8FF;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:17px;">5.2 異常反饋</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">當(dāng)保存有異常時，應(yīng)即時給予且較明顯的異常反饋，并幫助用戶排查問題。在設(shè)計保存異常反饋時，需注意以下 3 點：</span></span>
</p>
<ul style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;list-style-position:initial;list-style-image:initial;caret-color:#222222;color:#222222;font-family:"font-size:14px;">
<li style="margin:0px;padding:0px;outline:none;box-sizing:inherit;list-style-type:none;">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">哪些數(shù)據(jù)保存異常，是全局?jǐn)?shù)據(jù)還是個別模塊的數(shù)據(jù)，是否會因為非核心模塊的保存異常而影響到整體用戶進(jìn)程，是否可以通過其他方式（如前端保存）讓用戶繼續(xù)操作</span></span>
</li>
<li style="margin:0px;padding:0px;outline:none;box-sizing:inherit;list-style-type:none;">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">保存異常的原因是什么，用戶可以通過何種操作解決問題（檢查網(wǎng)絡(luò)？重新登錄？）</span></span>
</li>
<li style="margin:0px;padding:0px;outline:none;box-sizing:inherit;list-style-type:none;">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">當(dāng)從異?；謴?fù)后，應(yīng)該如何提示用戶</span></span>
</li>
</ul>
圖片a
圖片b
圖片c
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
圖片
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
Figma與保存異常相關(guān)的反饋 a.保存異常反饋；b.異常原因與解決方法；c.異?；謴?fù)提示
</p>
<h1 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h1-size);line-height:1.5;caret-color:#222222;color:#222222;font-family:"">
總結(jié)
</h1>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;background-color:#FFFFFF;">最后總結(jié)一下，當(dāng)我們接手一個新產(chǎn)品、新模塊、新需求的設(shè)計時，應(yīng)該如</span>何<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;background-color:#FFFFFF;">設(shè)計保存：</span></span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">首先，確定保存對象，是文件數(shù)據(jù)、設(shè)置數(shù)據(jù)，還是用戶行為數(shù)據(jù)。一個完整的產(chǎn)品一般都會包含以上三者，但對于某個具體的需求，可能只涉及其中一兩種。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">列出保存對象后，可以與產(chǎn)品、技術(shù)等團(tuán)隊成員一起確定保存的位置（云端、瀏覽器）和保存的觸發(fā)機(jī)制（自動保存、手動保存、提示保存）。建議根據(jù)用戶流程在不同的觸點用不同的觸發(fā)機(jī)制，以最大程度保障數(shù)據(jù)安全。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">接下來，根據(jù)保存對象、保存觸發(fā)機(jī)制，設(shè)計保存的交互，包含保存的觸發(fā)、保存的規(guī)則和保存的反饋。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">最后，以用戶使用工具的流程再檢查一遍數(shù)據(jù)的產(chǎn)生和存儲，是否會有遺漏，設(shè)計保存兜底。</span></span>
</p>
作者：酷家樂UED 來源：站酷
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
對于產(chǎn)品經(jīng)理、設(shè)計師和運(yùn)營人員，心理學(xué)都是必須要補(bǔ)的一門課程。
可能很多同學(xué)都犯過和小摹相同的錯誤——在各種商城放“神券”的時候屯一大堆專業(yè)書籍。實際上，心理學(xué)的書籍你大概只要看到第三本，就會發(fā)現(xiàn)翻來覆去講的就是那么幾個淺顯易懂的道理，而且大部分都是你在日常生活中就能觀察和感受到的。
基礎(chǔ)心理學(xué)（消費(fèi)者心理學(xué)，社會心理學(xué)，傳播和行為心理學(xué)等）的概念都不難，但如何精妙地運(yùn)用在自己的專業(yè)上則非?？简炇褂谜叩墓α?。
為什么產(chǎn)品、設(shè)計、運(yùn)營都需要學(xué)習(xí)心理學(xué)？
因為他們工作的本質(zhì)都是和“人”打交道——用產(chǎn)品方案、視覺內(nèi)容和活動規(guī)劃來影響用戶的決策、行為和心理。
你可能會覺得“依靠數(shù)據(jù)來統(tǒng)計用戶的行為再針對性決策”會更客觀，但實際上想得到靠譜的數(shù)據(jù)和正確的結(jié)論一點也不輕松，甚至很多公司根本不具備開展這類型調(diào)研的條件。
在這種情況下唯一的辦法還是洞察用戶并主動決策，此時基礎(chǔ)心理學(xué)原理就是你進(jìn)行判斷的重要依據(jù)。
本文為大家梳理了十大著名的心理學(xué)原理，這些概念來自于多本心理學(xué)的經(jīng)典名著，小摹進(jìn)行了適當(dāng)整合。
一、懷舊思維
簡單來說，就是人們在絕大部分時候都會遵循歷史慣性，更愿意相信過去的結(jié)論。
這也解釋了為什么現(xiàn)代商業(yè)中，品牌一直是一項核心競爭力：如果一個品牌曾經(jīng)贏得了消費(fèi)者的信任，那么消費(fèi)者往往愿意持續(xù)選擇這個品牌的產(chǎn)品。
在產(chǎn)品設(shè)計中，懷舊思維有著極其豐富的應(yīng)用場景。比如軟件產(chǎn)品的交互對于操作上的創(chuàng)新要非常慎重——快捷鍵、交互邏輯、界面布局等盡量和行業(yè)中主流產(chǎn)品一致，會更容易讓新用戶接受。
比如我們的原型設(shè)計工具“摹客RP”，界面布局借鑒了國外的UI工具Figma和Sketch。雖然產(chǎn)品主打的方向并不相同，但遵循業(yè)界已經(jīng)約定俗成的定式設(shè)計，在新用戶上手的角度有很大的優(yōu)勢。
二、暈輪效應(yīng)
暈輪效應(yīng)原指人際交往中，人身上表現(xiàn)出的某一方面的特征，掩蓋了其他特征，從而造成人際認(rèn)知的障礙。
比如有的老年人對青年人的個別缺點，或衣著打扮、生活習(xí)慣看不順眼，就認(rèn)為他們一定沒出息；有的青年人由于傾慕朋友的某一可愛之處，就會把他看得處處可愛，真所謂"一俊遮百丑"。
暈輪效應(yīng)是一種以偏概全的主觀心理臆測，和上面的懷舊思維類似，屬于一種思維的定式，因為這種方式大腦在決策時會更輕松。
對于產(chǎn)品規(guī)劃者，尤其要想清楚自己的核心優(yōu)勢和賣點是什么，不必完美主義地去追求面面俱到，因為如果最突出的優(yōu)點能打動用戶，即使有缺點也很容易被用戶忽略。
三、習(xí)得性無助
簡單地說，如果用戶在過程中產(chǎn)生了“無論如何都無法改變現(xiàn)狀”的感受，容易陷入深深的絕望和悲哀。
在實驗中，經(jīng)過訓(xùn)練的狗本可以逃避實驗者加于它的電擊。但是，如果狗以前受到過不可預(yù)期（不知道什么時候到來）且不可控制的電擊（如電擊的中斷與否不依賴于狗的行為），他們就會徹底躺平并不再逃離。
狗之所以表現(xiàn)出這種狀況，是由于在實驗的早期學(xué)到了一種無助感。
也就是說，它認(rèn)識到自己無論做什么都不能控制電擊的終止。
人如果產(chǎn)生了習(xí)得性無助，將很快拋棄當(dāng)前讓他產(chǎn)生失望感的產(chǎn)品。這個原理解釋了為什么現(xiàn)在商品或者服務(wù)往往都要為用戶提供非常順暢的溝通方式（比如熱線電話）。
如果你比較了解國外在線軟件行業(yè)趨勢，就會發(fā)現(xiàn)很多的新興產(chǎn)品都已經(jīng)不滿足于提供官方的Email地址，而是直接提供Discord鏈接（可以理解為在線聊天室）。
及時的直接溝通可以避免用戶產(chǎn)生絕望感，增加產(chǎn)品的生存幾率。
四、貝博規(guī)率
其實用一個成語就可以形容這個規(guī)律：得寸進(jìn)尺。在實際場景中，只要想辦法讓用戶先接受了一個小要求，之后就更可能讓他接受一項更大、更不合意的要求。
原始的實驗中，心理學(xué)家讓兩位大學(xué)生訪問郊區(qū)的一些家庭主婦。其中一位首先請求家庭主婦將一個小標(biāo)簽貼在窗戶（這是一個小的、無害的要求）。
兩周后，另一位大學(xué)生再次訪問家庭主婦，要求她們在院內(nèi)豎立一個呼吁安全駕駛的大招牌（該招牌很不美觀，這是一個大要求）。
結(jié)果答應(yīng)了第一項請求的人中有55％的人接受這項要求，而那些第一次沒被訪問的家庭主婦中只有17％的人接受了該要求。
這個實驗說明，如果想要用戶達(dá)到最終的目標(biāo)，可以先適當(dāng)設(shè)置一些和最終目標(biāo)相關(guān)，但完成難度小得多的目標(biāo)，循序漸進(jìn)地引導(dǎo)，可以大大提升轉(zhuǎn)化率。
這種原理在各種產(chǎn)品的銷售的場景的可謂是遍地開花。
比如汽車、不動產(chǎn)等高價的商品，往往會給打出“來訪即送好禮”的方式吸引用戶前往，然后通過用戶試駕、樣板房體驗等環(huán)節(jié)引導(dǎo)用戶去體驗和接納，客戶有意向后，也只會要求付定金（而不是全款）......這樣繁復(fù)的流程都是為了把困難的目標(biāo)拆解得更細(xì)小。
五、主觀性證詞
心理學(xué)研究表明，很多證人提供的證詞都不太準(zhǔn)確，或者說是具有明顯的個人觀點、傾向性和意識。甚至，證人對他們的證詞的信心和證詞的準(zhǔn)確性沒有足夠的相關(guān)性。
結(jié)合這個原理，就能更好地理解為什么問卷或是訪談等經(jīng)典的調(diào)研方法并不一定能收集到足夠準(zhǔn)確的信息，對于一些主觀性較強(qiáng)的問題，個人的傾向會極大的影響答案的可信度。
正確的做法是，盡量避免在調(diào)研中出現(xiàn)主觀性過強(qiáng)的題目，如果無法避免，盡量將題目拆解為多項能被客觀量化或評估的問題。如果沒有考慮用戶本身對于產(chǎn)品的傾向性，很可能被言過其實的“證詞”誤導(dǎo)出錯誤的結(jié)論。
六、馬太效應(yīng)
馬太效應(yīng)是指好的愈好，壞的愈壞，多的愈多，少的愈少的一種現(xiàn)象，出自圣經(jīng)《新約 | 馬太福音》中的一則寓言。
這個效應(yīng)常為經(jīng)濟(jì)學(xué)界所借用，反映貧者愈貧，富者愈富，贏家通吃的經(jīng)濟(jì)學(xué)中收入分配不公的現(xiàn)象。
類似的理論還有很多，比如二八定律（20%的頭部公司掌握80%的市場份額，20%的優(yōu)質(zhì)客戶貢獻(xiàn)80%的銷售收入，等等）。
這個原理告訴我們，要想讓產(chǎn)品在某一個領(lǐng)域保持優(yōu)勢，就必須在此領(lǐng)域迅速做大。
當(dāng)你成為某個領(lǐng)域的領(lǐng)頭羊時，你也能更輕易地獲得比弱小的同行更大的收益。而若沒有實力迅速在某個領(lǐng)域做大，就要不停地尋找新的發(fā)展領(lǐng)域，才能保證獲得較好的回報。
七、從眾行為
營銷和促銷手段中最重要心理原理之一，即：人們更容易相信被多數(shù)人接受的選擇。
我們經(jīng)?？梢钥吹铰愤厓杉也蛷d，一家門口排滿了等待的食客，另一家卻一桌客人都沒有，巨大的反差往往讓后面到來的客人寧愿等待也要選擇人多的餐廳。
關(guān)于這種心理，哲學(xué)家認(rèn)為是人類理性的有限性，社會學(xué)家認(rèn)為是人類的集體無意識，而經(jīng)濟(jì)學(xué)家則從信息不完全、委托代理等角度來解釋。但需要特別注意的是，從眾行為并非絕對的，因為在追求個人喜好上，人類往往也有很多個性的需求，從眾行為和個性追求往往是同時存在的。
從眾行為最典型的應(yīng)用方式就是密集推薦或評價，現(xiàn)在的書籍的扉頁動輒幾十條推薦語，在線服務(wù)往往也會引用大量網(wǎng)友的好評，來證明自己的價值。
新產(chǎn)品在推向市場時，先多收集一些用戶的正面評價，宣傳時會非常有利。
八、比較心理
這是消費(fèi)者心理學(xué)最經(jīng)典的原理，簡單來說就是把一個200元的產(chǎn)品和一個100元的看上去差不多的產(chǎn)品擺在一起，你就會覺得100元這個超級劃算，很容易產(chǎn)生購買的沖動。
對于每個人來說，所有的認(rèn)知，價值觀和結(jié)論都是建立在【比較】的基礎(chǔ)上得出的，所以，影響一個人的認(rèn)知，最有效的辦法就是創(chuàng)造對比的機(jī)會。
價格頁面最喜歡運(yùn)用比較心理，因為比較心理可以幫助他們重新設(shè)定消費(fèi)者的認(rèn)知。
常見的做法比如拉高產(chǎn)品的價格再做夸張的折扣讓用戶覺得這個商品現(xiàn)在超級劃算；或者在主推產(chǎn)品旁邊放置兩個明顯性價比不佳的次品，讓用戶對主推產(chǎn)品的效果感知更加強(qiáng)烈。
此外，在產(chǎn)品介紹時也可以將競品的參數(shù)列在表格中和自家的產(chǎn)品進(jìn)行對比（當(dāng)然，這個表格中的項目都是挑選過的），這樣更容易體現(xiàn)自家產(chǎn)品的優(yōu)勢。
九、投射效應(yīng)
人們在日常生活中常常假設(shè)他人與自己具有相同的屬性、愛好或傾向等，心理學(xué)家稱這種心理現(xiàn)象為"投射效應(yīng)"。
"以小人之心度君子之腹"就是一種典型的投射效應(yīng)。當(dāng)別人的行為與我們不同時，我們習(xí)慣用自己的標(biāo)準(zhǔn)去衡量別人的行為，認(rèn)為別人的行為違反常規(guī)。
了解這一點對于產(chǎn)品的策劃者們非常重要：用戶的想法很可能和自己不同（即便你認(rèn)為自己在這個領(lǐng)域比其他人都專業(yè)得多），但仍然需要被尊重。
所以近年來特別流行用戶體驗、同理心這樣的詞匯，產(chǎn)品應(yīng)該以真實用戶的體驗滿意度作為參考指標(biāo)，設(shè)計者應(yīng)該盡可能地以設(shè)想自己是一個目標(biāo)用戶時，會有什么反應(yīng)，否則僅靠自己的“臆測”，創(chuàng)造出來的產(chǎn)品很可能和真實需求脫節(jié)。
十、賭博心理
以小博大的感覺是一種強(qiáng)上癮體驗，人們只有在輸?shù)臅r候才想到離開，少有在贏的時候離開。這個就是賭場盈利的本質(zhì)模式。
由于真金白銀賭博是法律明令禁止的，所以產(chǎn)品設(shè)計角度一般都是借助積分、代幣等方式來給用戶制造“抽獎”的機(jī)會。
對于國內(nèi)而言，氪金手游和盲盒就是典型的兩種應(yīng)用場景，前者往往會設(shè)定一個極低的概率讓玩家獲得珍貴的虛擬物品，后者則是讓消費(fèi)者有小概率獲得稀有款式的手辦，引誘顧客購買超過自己需求的商品。
對于產(chǎn)品設(shè)計人員來講，賭博機(jī)制可以說是一個潘多拉魔盒，通常不建議去使用和嘗試。人人都愛KPI，但也要取之有道，職場人都應(yīng)該有自己的底線。
作者：jongde來源： 站酷
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
在日常使用移動端或PC端產(chǎn)品時，不知你有沒有這樣的體會？
推薦一個比較實用的設(shè)計法則，這個法則已經(jīng)有很多的文章說明了，可以說現(xiàn)在的任何互聯(lián)網(wǎng)產(chǎn)品都能看到這些理論的實踐，本次主要想以比較多的案列進(jìn)行實戰(zhàn)分析。
尼爾森的十大可用性原則是尼爾森博士在分析了兩百多個可用性問題的基礎(chǔ)上，提煉出的十項交互設(shè)計原則。被廣泛運(yùn)用于網(wǎng)頁、APP以及各種人機(jī)交互領(lǐng)域。
要注意的是，這10項原則是啟發(fā)式（heuristics）的、廣泛的經(jīng)驗法則，可以指導(dǎo)我們更具價值的思考界面設(shè)計。
設(shè)計原則都可靈活運(yùn)用于各個地方,可以是交互設(shè)計,也可以是界面設(shè)計,深入了解各種設(shè)計原則,讓設(shè)計師在做設(shè)計的時候可以找到更好的解決方案,提高用戶的使用體驗。
雅各布·尼爾森（Jakob Nielsen）是畢業(yè)于哥本哈根的丹麥技術(shù)大學(xué)的人機(jī)交互博士，被譽(yù)為可用性測試的鼻祖，2006年4月，并被納入美國計算機(jī)學(xué)會人機(jī)交互學(xué)院，被賦予人機(jī)交互實踐的終身成就獎。
尼爾森于1995年1月1日發(fā)表了「十大可用性原則」，該原則被廣大設(shè)計師奉為教科書般的存在。雖然20多年過去了，但是對于現(xiàn)今的產(chǎn)品體驗設(shè)計仍然具有很大的參考意義。
人機(jī)交互的基本原則是，讓系統(tǒng)和用戶之間保持良好的溝通和信息傳遞。系統(tǒng)要告知用戶發(fā)生了什么，預(yù)期是什么，如果系統(tǒng)不能及時向用戶反饋合適的信息，用戶必然會感到失控和焦慮，不知道下一步要做什么。
界面狀態(tài)分為兩種：靜態(tài)和動態(tài)。
靜態(tài)即用戶通過界面查閱，明確知道自己的位置、處于何種狀態(tài)，或者知道界面數(shù)據(jù)的狀態(tài)。動態(tài)即用戶在進(jìn)行界面操作時，系統(tǒng)應(yīng)當(dāng)立刻提供反饋，告訴用戶該項操作被系統(tǒng)接受，讓用戶對操作感知及判斷。
告訴用戶處在系統(tǒng)的什么位置，特別是對于新用戶，需要提供必要的信息，否則容易迷惑。比如：導(dǎo)航菜單、面包屑、標(biāo)簽頁、步驟條、分頁器等等。
相比于C端產(chǎn)品，B端產(chǎn)品在頁面層級往往更為復(fù)雜。因此，讓用戶明確當(dāng)前所處的位置尤為重要，這也就突顯出了導(dǎo)航的重要性。設(shè)計師在設(shè)計的過程中，要注意提供上下文線索，避免用戶迷路。
告知用戶系統(tǒng)運(yùn)行的狀態(tài)信息，比如進(jìn)度、內(nèi)容加載時，增加用戶掌控感。
最經(jīng)典的案例莫過于Loading頁的進(jìn)度條了，無論是加載頁面還是下載內(nèi)容，一個清晰的進(jìn)度條可以讓用戶隨時掌控進(jìn)度，同時也可以用具體的數(shù)字更加明確的表示，比如：安裝程序時顯示進(jìn)度條，并預(yù)估還需要多久結(jié)束，播放音樂時顯示進(jìn)度條，并提示預(yù)估剩余時間。
系統(tǒng)適當(dāng)反饋是用戶界面設(shè)計的最基本準(zhǔn)則。當(dāng)用戶在與系統(tǒng)進(jìn)行交互時，應(yīng)當(dāng)在各個階段為用戶提供必要、積極且即時的反饋，同時也要避免過度反饋打擾用戶?？梢允褂玫男问桨ǖ痪窒抻冢?/span>
操作反饋：點擊頁面跳轉(zhuǎn)、按鈕點擊狀態(tài)、警告提示、輸入反饋等等；
結(jié)果反饋：非模態(tài)彈窗，輕量化感知系統(tǒng)內(nèi)容反饋。（反饋內(nèi)容應(yīng)盡量不要打斷用戶操作，所以一般采用toast形式，反饋結(jié)果后及時消失。）
情感反饋：搜索沒有結(jié)果時，沒有數(shù)據(jù)等等空狀態(tài)。
還可以通過元素的顏色位置、界面元素變化、文字、聲音和震動，甚至動效等多種形式給予用戶提示反饋。
注意，越是消極的反饋，比如網(wǎng)絡(luò)連接失敗、系統(tǒng)錯誤等，越是要及時告知用戶，同時提醒用戶采取適當(dāng)措施。比如：1、提交表單時，如果校驗失敗，則在填寫有誤的內(nèi)容旁邊提示錯誤原因；2、程序未響應(yīng)時，系統(tǒng)會讓用戶選擇是關(guān)閉程序還是等待程序響應(yīng)；
系統(tǒng)應(yīng)該在合理的時間內(nèi)，給予用戶適當(dāng)?shù)姆答?，讓用戶了解正在發(fā)生的事情。
當(dāng)系統(tǒng)反饋時間小于1秒，通常正常反饋即可；相反長于1秒時，我們通常會通過加載動畫、占位符、分步加載等方式，減緩用戶等待的焦慮感。如果超過10秒還沒有得到相應(yīng)，那么通常會認(rèn)為這次請求是失敗的，需要給用戶失敗提示。
例如：下載提示、刷新提示、支付提示、新頁面加載提示等。
系統(tǒng)盡可能貼切用戶所在的真實環(huán)境。把復(fù)雜的系統(tǒng)語言換成用戶看得懂的語言；環(huán)境貼切原則的根本目標(biāo)是讓用戶可以快速上手產(chǎn)品，降低學(xué)習(xí)成本。
《iPhone人機(jī)交互指南》里提到的隱喻與擬物化是很好的實踐。此外，還應(yīng)該使用易懂和約定俗成的表達(dá)。
這里說的語言不僅僅包括文案層面的語言，還包括產(chǎn)品的設(shè)計語言（圖形、配色、風(fēng)格、動效、手勢等）設(shè)計語言都應(yīng)該是易于用戶理解和認(rèn)知的。產(chǎn)品使用的語言應(yīng)該是目標(biāo)用戶能夠清晰理解的。如果用戶不能理解，他們會感到被忽視和受挫敗，許多人將選擇其他產(chǎn)品完成目標(biāo)。
從設(shè)計心理學(xué)角度來講，用戶在使用產(chǎn)品的過程中，其大腦會“優(yōu)待”較常用的記憶內(nèi)容和操作形式，有意抑制那些相似但不常用的內(nèi)容，以便減輕認(rèn)知負(fù)擔(dān)，防止混淆，這種習(xí)慣從某種程度上來說屬于“熟知記憶”。
比如細(xì)分市場的產(chǎn)品，針對中老年、青年、兒童的產(chǎn)品或商務(wù)、娛樂的產(chǎn)品，都要分別使用符合自己的定位的語言。
反面案例就是windows系統(tǒng)出錯了頁面，一堆亂碼，看不懂又很慌張，就很不友好。另外還有一點，很多大公司的app都會針對他們不同國家的用戶群體進(jìn)行各種語言的翻譯處理。
為了照顧不同國家的用戶的使用習(xí)慣對頁面結(jié)構(gòu)布局，風(fēng)格，語言，字體，包括交互方式都會做特殊處理。這就是場景貼合原則。
模仿現(xiàn)實世界的產(chǎn)品或者使用映射，能夠利用人們現(xiàn)有的知識，可以顯著的降低用戶的認(rèn)知和學(xué)習(xí)困難，并增加他們的使用興趣。
比較好的案例就是iOS原生的計算器、指南針，微信紅包都是模仿了現(xiàn)實世界的產(chǎn)品。
從現(xiàn)實世界中借鑒的設(shè)計元素可明顯降低用戶的認(rèn)知和學(xué)習(xí)難度，并且增加興趣。最有代表性的就是網(wǎng)易云的音樂播放界面圖形隱喻表達(dá)。美團(tuán)APP的母嬰類目icon的設(shè)計非常有趣，且非常容易理解和使用，讓人印象深刻。
使用的操作手勢，應(yīng)該是用戶自然就能聯(lián)想到的，不要創(chuàng)造、更改操作手勢的意義。
動效的加載樣式應(yīng)符合自然規(guī)律，需要平緩過渡，而不是生硬的加載效果。比如：網(wǎng)易云音樂播放時唱片轉(zhuǎn)動、停止播放時唱片自動移開，有趣且有效。
用戶在使用產(chǎn)品的過程中，誤操作是經(jīng)常發(fā)生的事情，系統(tǒng)應(yīng)提供撤銷和重做功能，讓用戶具有對產(chǎn)品的控制性與自由度。
用戶可控原則的根本目標(biāo)是讓用戶可以在界面自由操作，而且無需為操作不當(dāng)承擔(dān)責(zé)任。
清晰便捷的導(dǎo)航方式，使用戶可自由控制返回和跳轉(zhuǎn)的頁面。
由于B端系統(tǒng)的復(fù)雜性，有些功能的層級會比較深。彈窗A中的某個操作可能會觸發(fā)彈窗B的彈出，如果彈窗A和B承載的功能具有父級和子級的關(guān)系，同樣需要考慮「返回」的功能以及清晰的層級關(guān)系。
用戶在使用系統(tǒng)的過程也是一個試錯的過程，系統(tǒng)要讓用戶覺得自己的行為是可控的，可以犯錯，并且在犯錯之后可以反悔。用戶在使用產(chǎn)品時可以自由進(jìn)退，遵循從哪里來就返回到哪里去的原則。當(dāng)用戶誤操作時要給用戶提供撤銷、取消、重做等相關(guān)功能。不可逆的操作要給用戶明顯的提示。
比如微信聊天是可以撤回的，并且撤回之后還支持重新編輯；對于我這種打字總是出錯的人簡直就是福利。iphone相冊刪除照片后，支持在短期內(nèi)找回；在word中編輯文檔時，支持撤銷和恢復(fù)，保存的同時，還能查看歷史保存記錄。
回收站功能：讓用戶更有自由度，增加用戶安全感，可控的找回誤刪除資源。
系統(tǒng)在重要的不可逆轉(zhuǎn)的操作需要給用戶提供二次確認(rèn)或者撤銷的功能，這樣可提高用戶的操作可控性。在產(chǎn)品設(shè)計上，防止用戶常見的誤操作。比如很多產(chǎn)品在涉及到內(nèi)容的刪除操作時，經(jīng)常會有彈窗提醒，讓用戶再次確認(rèn)。這樣是防止用戶誤操作帶來的刪除損失。用戶不用因為操作帶來心理負(fù)擔(dān)，從而提升操作可控性。
比如iPhone ios系統(tǒng)：
1、常見的二次確認(rèn)主要可以通過以下方式實現(xiàn)：通過文字提示，用戶閱讀后點擊是與否來進(jìn)行下一步；
2、通過動作，用戶通過輸入特定字符或者完成驗證碼拖拽等操作才可進(jìn)行下一步操作；
3、通過身份校驗，用戶需要提交個人身份信息以完成校驗；
整個系統(tǒng)要保持產(chǎn)品結(jié)構(gòu)架構(gòu)、導(dǎo)航、用語、色彩、操作行為交互的一致性與標(biāo)準(zhǔn)性，遵循平臺慣例與行業(yè)標(biāo)準(zhǔn)。我們在設(shè)計中常見的制作平臺規(guī)范，其實就是為了保證平臺設(shè)計的一致性。
一致性原則的根本目的是保證產(chǎn)品的專業(yè)性，給用戶帶去統(tǒng)一的體驗感受。
遵循產(chǎn)品內(nèi)部的慣例，可幫助用戶快速學(xué)習(xí)使用產(chǎn)品功能。產(chǎn)品內(nèi)部的一致性包含：產(chǎn)品功能框架、文字、設(shè)計風(fēng)格、布局、反饋等等。
比如：小熊藝術(shù)app，一款針對孩子學(xué)習(xí)美術(shù)的app，不管是首頁、個人中心以及加載等頁面，風(fēng)格保持一致性都是主打清新黃色+可愛icon。黃色小熊更是在不同的合適的時機(jī)出現(xiàn)，banner、加載，課程動畫中等。不僅風(fēng)格一致性、布局、反饋等產(chǎn)品內(nèi)部保持一致性，也形成了統(tǒng)一的品牌傳達(dá)。
但是，有時候為了達(dá)到產(chǎn)品目標(biāo)，偶爾也會故意采用不一致的設(shè)計。
比如：常見的對話框都將“確定”按鈕放在右邊位置，所以用戶在操作時，很容易產(chǎn)生條件反射，順手點擊右邊按鈕，然后才突然發(fā)現(xiàn)自己點錯了。雖然看起來有些別扭甚至很多人不喜歡，但是很有效，這種設(shè)計在軟件卸載、App取消會員訂閱等操作中非常常見，主要是為了做一些心理暗示和引導(dǎo)，避免用戶卸載或退訂。
交互和用戶的習(xí)慣一致，意味著用戶不再需要重新學(xué)習(xí)，各種應(yīng)用之間的切換沒有學(xué)習(xí)成本。我們在前期已經(jīng)培養(yǎng)好用戶的使用習(xí)慣，那么就不要輕易改變，減少用戶的認(rèn)知成本與學(xué)習(xí)成本。
例如：常見的頁面的后退或返回都在屏幕左上角、搜索欄都在屏幕最上方、菜單欄都懸浮在屏幕底部。
當(dāng)產(chǎn)品線進(jìn)行更新迭代的時候，應(yīng)該保留用戶既有的交互和操作習(xí)慣，用戶在上一個版本形成的交互認(rèn)知在下一個版本是否能被沿用，這對于用戶來說在產(chǎn)品體驗上會造成很大的干擾。
比如微信的多年的迭代，底部tab功能一直都是這樣，主要功能入口一致沒有變化，就體現(xiàn)了迭代產(chǎn)品的一致性。
Office軟件中包含的各個產(chǎn)品，其界面布局和設(shè)計風(fēng)格都保持了高度一致，如下圖所示是PowerPoint和Word的界面，可以看出，二者的“插入”一級菜單下所包含功能的排列順序、布局方式乃至圖標(biāo)圖形，都是高度類似的。
遵循統(tǒng)一的產(chǎn)品設(shè)計規(guī)范／邏輯。這里的一致性包含產(chǎn)品和跨平臺產(chǎn)品之間的一致性。確保整個系統(tǒng)的結(jié)構(gòu)一致性、色彩一致性、操作一致性、反饋一致性、同種組件樣式保持一致等設(shè)計語言都遵循同一套設(shè)計規(guī)則。
比如，產(chǎn)品內(nèi)相同顏色的反復(fù)出現(xiàn)，為產(chǎn)品打造視覺錘符號，強(qiáng)化產(chǎn)品在用戶心中的記憶點。符合平臺設(shè)計規(guī)范，
蘋果系統(tǒng)參照人機(jī)交互設(shè)計指南設(shè)計規(guī)范，安卓系統(tǒng)參照Material Design設(shè)計規(guī)范，或者直接參照自己團(tuán)隊的的設(shè)計規(guī)范，應(yīng)該遵循慣例，并且保持系統(tǒng)的一致感，不要盲目地標(biāo)新立異。
不知道你發(fā)現(xiàn)了沒，現(xiàn)在的電商、音樂、社交等等app越來越一樣了，一樣的交互，一樣的排版設(shè)計，基本上都遵循著類似的交互邏輯和視覺元素。
與業(yè)內(nèi)產(chǎn)品保持一致，意味著用戶不再需要重新學(xué)習(xí)，就可以在各種應(yīng)用中自由切換，用戶學(xué)習(xí)成本的降低，也意味著我們獲客成本從某種程度上被降低。而這些約定俗成的規(guī)則和流程都被用戶不自覺地印刻在大腦中，成為一種自然的習(xí)慣，而獨特的設(shè)計，截然不同的規(guī)則，則常常會成為習(xí)慣以外的東西，引起混亂，讓初次上手的用戶感到受挫和沮喪。
如，在App底部的導(dǎo)航圖標(biāo)中，“首頁”永遠(yuǎn)排在第一個，個人中心（“我的”）永遠(yuǎn)排在最后。并且對于類似“首頁”“購物車”“訂單”等常見按鈕，不同App的設(shè)計樣式都非常相似。如下圖三個不同音樂app的對比圖：
如果你特立獨行地把個人中心放在第一個位置，或者采用奇怪的圖標(biāo)作為個人中心的icon，用戶使用時肯定會覺得別扭。
防錯原則的根本目標(biāo)是阻止錯誤行為，避免進(jìn)一步犯錯，指引用戶正確的完成操作行為。
「防止錯誤」主要分為三個階段：錯誤行動發(fā)生前，引導(dǎo)用戶向正確的方向前進(jìn)；用戶觸碰到危險操作時給予提示；危險操作發(fā)生之后，提供撤回的入口。
比一個優(yōu)秀的錯誤提醒彈窗更好的設(shè)計方式，是在這個錯誤發(fā)生之前就避免它。它可以幫助用戶排除一些容易出錯的情況，或在用戶提交之前給他一個確認(rèn)的選項。
通常情況下，按鈕置灰表示對應(yīng)功能或操作無法使用，這也是防止錯誤的一條有效途徑，因為用戶通過按鈕樣式就可獲知其狀態(tài)，提前規(guī)避無效的提交操作。當(dāng)然，不是只要功能或操作無法使用時，就應(yīng)該將對應(yīng)的按鈕置灰。其實更好的做法是填寫完標(biāo)題后按鈕不置灰，點擊完成按鈕后定位或高亮必填項，讓用戶更容易識別錯誤點。
比如在登錄時，只有輸出信息后才可以點擊登錄按鈕，未輸入信息時，按鈕是不可以點擊的狀態(tài)。通過系統(tǒng)主動對用戶進(jìn)行操作限制，幫助用戶避免發(fā)生錯誤。
限制用戶的選擇并不是一個好主意，但是如果有明確的規(guī)則來定義可接受的選項，那么限制用戶可以輸入的類型是一個很好的策略。再比如輸入驗證碼頁面，為了防止用戶多輸入或者少輸入驗證碼，只給到四個輸入框，讓用戶只能輸入四位數(shù)字，減少輸入錯誤的幾率。
提供清晰的提示，防止用戶犯錯，提示包括標(biāo)簽、文字、顏色、以及反饋狀態(tài)等。利用顏色，動效提供警示信息，比如常見的微信退出的按鈕是紅色的，狀態(tài)未完成的標(biāo)簽是紅色的等等。
如：表單填寫過程中讓用戶及時知道輸入格式，出錯原因，避免填寫完成后再提醒，浪費(fèi)用戶時間。
范圍限制：限制用戶的選擇并不是一個好主意，但是如果有明確的規(guī)則來定義可接受的選項，那么限制用戶可以輸入的類型是一個很好的策略。比如：電影購票時，已購買的位子不會再提供選擇，很好的避免了買重的問題
特別要注意在用戶操作具有毀滅性結(jié)果的功能時要有提示，防止用戶犯不可挽回的錯誤，需打斷用戶，提示用戶是否要進(jìn)行此操作，讓用戶有更多的思考時間。所以在一些不可逆的操作中二次確認(rèn)是非常有必要的。
這條原則很重要也很常見。在刪除信息時，系統(tǒng)會讓用戶確認(rèn)刪除，也就是我們常說的二次確認(rèn)，電商平臺允許在一定的規(guī)則下取消訂單等等。
易取原則的根本目標(biāo)是提升用戶在界面上的操作效率，系統(tǒng)應(yīng)直觀地協(xié)助用戶完成任務(wù)。
系統(tǒng)應(yīng)協(xié)助用戶進(jìn)行記憶，通過使元素、操作和選項可見，減少用戶的記憶負(fù)荷，在適合的時機(jī)給用戶需要獲取的信息。
識別比回憶要好，對于路徑較長的操作，我們更應(yīng)該協(xié)助用戶記憶。比如在淘寶下單的操作路徑，每一個頁面頂部導(dǎo)航欄會盡可能的提醒用戶操作到哪里，用戶所有的操作信息都是可見、易獲取的，減少用戶對操作目標(biāo)的記憶負(fù)擔(dān)。
用戶心理學(xué)研究發(fā)現(xiàn)，互聯(lián)網(wǎng)用戶瀏覽網(wǎng)頁的動作不是讀，不是看，而是“掃”。這是互聯(lián)網(wǎng)用戶瀏覽的主要方式。所以我們在設(shè)計的時候，需要清晰的視覺層次結(jié)構(gòu)，突出重點，弱化和剔除無關(guān)信息，降低頁面干擾，來減輕用戶閱讀成本。
比起讓用戶輸入，讓用戶選擇更能降低用戶的記憶成本，更好地輔助用戶做決策。如果，有很多的信息或者選項是用戶高頻率會選擇的，設(shè)計師不妨給用戶提前做好選擇，提供默認(rèn)選項，如下圖：
通過智能讀取用戶之前填寫過的信息，或者智能識別等形式，減少用戶記憶負(fù)擔(dān)與操作負(fù)擔(dān)。
常見的是寄快遞-新增地址，將用戶復(fù)制的文本字符類型進(jìn)行識別并匹配，將有用的信息內(nèi)容提取出來，對體驗而言顯得高效又智能。
或者淘寶購物確認(rèn)訂單時，系統(tǒng)會自動為你帶入之前的商品信息，包括選擇的商品規(guī)則、數(shù)量、價格、默認(rèn)記錄顯示常用的地址等。這些信息雖然之前都選擇過，但是需要用戶在購買前二次確認(rèn)，由于信息比較多，用戶很難記憶，所以確認(rèn)訂單再展示出來更加合理。
比如：用手機(jī)登錄時，收到的驗證碼直接展示在軟鍵盤上，用戶無需記憶也無需輸入，直接點選即可登錄；
美團(tuán)APP中，當(dāng)用戶選擇商品時，系統(tǒng)會自動計算商品價格和滿減后的價格，還會幫用戶記錄選擇了哪些商品以及份數(shù)，不需要用戶自己花時間去計算還差多少才能滿減等，減少用戶記憶負(fù)擔(dān)，同時節(jié)省用戶點外賣的時間，這也用到了易取原則。
訂單頁面若某信息需要用戶從一個頁面復(fù)制到另一個頁面完成查詢或編輯輸入，那就有必要為該信息提供快捷復(fù)制功能，如訂單號緊跟著一個復(fù)制按鈕。
我們在搜索一個歌名的時候，記不住完整的歌曲名，我們只要輸入關(guān)鍵的幾個詞，系統(tǒng)就是幫助我們記憶，出現(xiàn)相關(guān)的搜索。
作為用戶，你不記得的操作，系統(tǒng)可以幫你記錄。為用戶提供歷史記錄，文本創(chuàng)作的過程中自動保存草稿，讓用戶方便查詢自己的進(jìn)程，這就是信息易取原則的設(shè)計。
保留歷史，最為常見的就是為用戶保留歷史搜索和歷史瀏覽、儲存賬號和密碼。視頻APP會詳細(xì)記錄用戶的觀看記錄，當(dāng)用戶沒有看完某部電影時，下次進(jìn)入直接從斷點續(xù)播上次播放的位置，無需用戶記憶上次看到哪里了；
不只是觀看記錄，視頻軟件還會幫你記錄同一賬號在不同設(shè)備上的登錄記錄，觀看記錄也會在不同設(shè)備之間進(jìn)行同步。
將選擇的對象，動作，選項可視化，讓用戶一看就懂。注意圖標(biāo)符號化能讓人理解，避免引起誤解。
抽象圖形+文字，提供了更多的信息，更加豐富了記憶效果，避免了用戶需要記憶才能想起圖形代表的含義。我們常用的app導(dǎo)航欄都是以這種icon和文字相結(jié)合的形式，這就是很符合易取原則的例子。
在用戶使用產(chǎn)品的過程中，會有一些需要用戶記憶的內(nèi)容、或者操作路徑，在設(shè)計的時候我們要避免用戶記憶，把信息直接提取出來，送到用戶手里。同時每個頁面?zhèn)鬟f的信息量盡量少，減少用戶的閱讀壓力。
常見的例子是各類優(yōu)惠券，設(shè)計的時候會有明確的位置說明限制時間，類別等等，同時還會有清晰的入口引導(dǎo)去使用或者規(guī)則的入口。
這一點其實也非常好理解，一個簡單的動作，比打字要輕松得多，常見的就是在設(shè)備解鎖的時候，用手勢解鎖替代密碼解鎖。
隨著技術(shù)發(fā)展，有了更多的行為代替輸入的方式，比如指紋識別和面部識別，用簡單的操作，就可以達(dá)到進(jìn)入系統(tǒng)的目的，這就避免了用戶需要較多的操作和密碼的記憶。
靈活易用原則不僅是一個交互設(shè)計原則，也代表了一種軟件產(chǎn)品設(shè)計理念：系統(tǒng)既要做得簡單、易用，讓所有用戶用起來得心應(yīng)手；
靈活易用原則的根本目標(biāo)是保持系統(tǒng)的靈活性，以滿足不同用戶的不同需求。既要提供必要的幫助，讓剛?cè)腴T的初級用戶順利上手，還需要支持靈活的個性化定制，讓高級用戶能夠快捷高效使用高頻功能，充分發(fā)揮其價值。
讓用戶靈活定制的最典型的例子是各類軟件和App的配置功能，基本上所有軟件都會提供定制化功能，從快捷鍵設(shè)置，到頁面布局，再到自定義參數(shù)，軟件系統(tǒng)會盡量提供全面的個性化設(shè)置功能，來滿足不同用戶的使用訴求和習(xí)慣，提升用戶的使用效率和體驗。
例如支付寶首頁，用戶可以自定義首頁的應(yīng)用。對于使用頻率比較高的老用戶來說，這是一個非常方便的功能。
還有一種是系統(tǒng)更具用戶常用自動整理歸納，以提升使用效率，減少用戶多余操作。
比如：微信的聊天表情，由于可以選擇的表情很多，正常情況下用戶很難快速找到自己想用的表情。而用戶的使用習(xí)慣往往是循環(huán)使用其中的某幾個，所以把最近使用的表情展現(xiàn)出來，會極大的提升用戶的尋找效率。
除了從新老用戶的角度對用戶做區(qū)分，還可以從其他維度區(qū)分用戶，針對不同用戶做不同的功能。比如：微信為了讓中老年用戶使用方便，推出了關(guān)懷模式。在關(guān)懷模式下（下圖）文字更大、色彩更強(qiáng)、按鈕更大，還可以使用“聽文字消息”的功能。這些功能充分考慮了“中老年用戶”的需求和痛點，讓產(chǎn)品更加靈活易用。
靈活高效原則在交互設(shè)計中使用會提高用戶使用效率，例如微信聊天頁面中，當(dāng)用戶輸入某個字詞之后，系統(tǒng)會自動幫你匹配相應(yīng)的表情包；
當(dāng)你輸入某個詞之后，輸入法會幫你自動聯(lián)想接下來你可能會輸入的詞；截圖后進(jìn)入微信聊天頁面后，系統(tǒng)會將你剛截的圖前置，它會自動判斷你可能想發(fā)送該截圖。如下圖：
通過用戶快捷跳過的入口，比如常見的：引導(dǎo)頁、操作手冊、還是開屏廣告，有“跳過”或者”立即進(jìn)入“按鈕真的很貼心。
對于用戶頻繁使用的部分，提供快捷的重復(fù)使用操作，比如：外賣app，用戶可以快捷地再來一單，同時保存上一次操作記錄。
在設(shè)計功能時，最好能考慮到不同層次用戶的需求，以此來讓用戶「各取所需」（需要平臺有多類型用戶）；比如常見的Word、Photoshop等，有一個“二八定律”，就是說80%的功能是給20%的用戶使用的。
設(shè)計這類產(chǎn)品時，最常用的20%的功能一定擺在最顯著的位置上，方便所有用戶使用，而80%的高端功能，要適度隱藏，使得整個產(chǎn)品看起來盡量簡潔、美觀。比如Sketch的工具欄和快捷鍵就是給新手或資深用戶準(zhǔn)備的。
淘寶的首頁每個人推薦的商品都不相同，淘寶后臺根據(jù)用戶的瀏覽習(xí)慣，購買/收藏記錄等大數(shù)據(jù)智能判斷用戶的喜好，對商品進(jìn)行千人千面的分發(fā)。
但是切記不要太過依賴大數(shù)據(jù)算法的判斷，因為一旦形成這種模式，會給用戶造成回音壁效應(yīng)，你越喜歡的東西系統(tǒng)就越給你推薦，其他的商品就像回音壁一樣被吸收過濾，用戶永遠(yuǎn)沒有辦法發(fā)現(xiàn)新的東西，讓用戶的選擇永遠(yuǎn)都在一個死循環(huán)，所以做千人千面設(shè)計時一定要適度。
優(yōu)美而簡約原則的根本目標(biāo)是讓用戶快速找到界面的重要信息，引導(dǎo)用戶的視線及操作行為。
UI設(shè)計應(yīng)該是符合大眾審美的，不需要多么酷炫，而是需要我們注重信息獲取效率，更加聚焦內(nèi)容，刪除多余的視覺表達(dá)元素，讓界面保持美觀簡約。
“快掃”是互聯(lián)網(wǎng)用戶瀏覽的主要方式。我們熟知的產(chǎn)品設(shè)計的四大基本原則：親密性、對齊、重復(fù)、對比，就是使頁面優(yōu)美而簡約的方法。
建立清晰的視覺層級，越重要的內(nèi)容越突出，能夠方便用戶無障礙地瀏覽信息，提高用戶操作與信息獲取效率，各模塊間采用卡片或者間距區(qū)分開，加強(qiáng)頁面層級區(qū)分。
我們通過顏色、大小、字體的字重、對比度、元素的間距、特殊造型、動效等來表現(xiàn)。
避免界面呈現(xiàn)過多元素，包括動效、配圖、icon、按鈕等等，降低用戶的視覺干擾。保留產(chǎn)品最主要的信息，如果不是優(yōu)先級最高，要盡一切可能避免去影響產(chǎn)品的簡潔和美觀，可采用大留白增加頁面呼吸感，聚焦內(nèi)容。
用戶注意力資源有限，應(yīng)該保持信息精煉，突出重要信息，弱化次要信息。
上面兩個案例通過加粗放大、標(biāo)記顏色，從而讓頁面簡潔，且突出重要信息。
容錯原則的根本目標(biāo)是讓那個用戶在操作出錯后還能挽回錯誤的余地，從而給用戶一致產(chǎn)品很安全貼心的感覺。
系統(tǒng)需幫助用戶識別、診斷、并為用戶從錯誤中恢復(fù)提出建設(shè)性的解決方案。通過提示性文字或者插圖讓用戶意識到出錯了，比如404頁面的情感化插圖、彈窗提示用戶出錯等。
當(dāng)發(fā)生錯誤時，提示信息一定要直觀，視覺上能夠引起用戶注意，可視化處理，文案要簡單概要，并給出解決方案。例如刪除訂單時，會提示二次確認(rèn)，避免用戶誤操作。
在出錯界面給出解決方案，可以是文字提醒或者按鈕跳轉(zhuǎn)等形式，幫助用戶解決問題。比如缺省頁的設(shè)計除了配置插圖還會有提示文案與操作按鈕，引導(dǎo)用戶去操作，去進(jìn)一步解決問題。
系統(tǒng)能幫助用戶自動甄別錯誤，并及時進(jìn)行糾正時，將會給用戶帶來極大的便利，撤銷或者找回功能，都是幫用戶把損失降到最低的有效方法。
比如微信信息的消息撤回重新編輯，相冊的最近刪除、回收站等等功能。
人性化幫助原則的根本目標(biāo)是用戶在使用產(chǎn)品的過程中有所依循，因為產(chǎn)品已經(jīng)貼心地為他們準(zhǔn)備好了幫助方式，或者即時提示和反饋，或者客服。
人性化幫助用戶最好的方式分別為：1、無需提示；2、一次性提示；3、常駐提示；4、幫助文檔。
最好的就是沒有提示，用戶就能看懂與應(yīng)用產(chǎn)品；其次是一次性提示，提示一次用戶就懂如何使用，比如第一次進(jìn)入app或新功能上線的引導(dǎo)設(shè)計、通常為氣泡形式。常駐提示需要一直固定在某個位置實時幫助用戶。
最后就是幫助文檔了，一般用于解釋規(guī)則或者熱點問題，通常以超鏈接的形式存在于頁面中，或者以集合形式位于設(shè)置頁中，此時需要注意要易于檢索。
幫助文檔的入口容易找到，幫助信息方便用戶查找。常見的方式有：鼠標(biāo)劃過懸浮文字說明，幫助用戶更好地理解。
用戶通過查看幫助文檔來學(xué)習(xí)新功能，相對比較麻煩。如果能將教程和功能放在一起，用戶可以“邊學(xué)邊練”，就更容易讓用戶理解。
提示語避免使用專業(yè)術(shù)語，盡量使用圖片或者圖形，同時處理文字外還可以使用示意圖，操作步驟等，方便用戶應(yīng)用。
在操作時的幫助信息，比如幫助懸浮按鈕：一直出現(xiàn)在頁面固定位置，方便用戶遇到問題尋求幫助。
搜索時，預(yù)搜索詞直觀地顯示出來，可以讓用戶更快地做出搜索判斷。微信轉(zhuǎn)賬頁面，當(dāng)用戶輸入金額較大時，會在第一位數(shù)字下方提示轉(zhuǎn)賬金額的人民幣單位，目的是為了避免用戶輸入錯誤金額導(dǎo)致資金損失；
復(fù)雜的流程可以通過分步驟來引導(dǎo)用戶逐步完成，而不是一次完成所有任務(wù)。個性化的提示一次就夠了，用戶用過一次就知道其用法。
現(xiàn)在很多C端產(chǎn)品普遍做了良好的交互設(shè)計，可以幫助用戶快速學(xué)習(xí)使用，而不用閱讀、理解復(fù)雜的說明文檔。
然而，B端產(chǎn)品的復(fù)雜性比C端產(chǎn)品高很多，因為B端產(chǎn)品蘊(yùn)含很多業(yè)務(wù)流程的規(guī)則，系統(tǒng)中的一個按鈕可能代表了一個復(fù)雜的業(yè)務(wù)處理規(guī)則，如果不了解整個業(yè)務(wù)場景和處理規(guī)則，是很難理解按鈕的操作含義的。
因此，對于B端產(chǎn)品，用戶進(jìn)行自助服務(wù)、自助操作的難度高很多，B端產(chǎn)品的幫助文檔依然有存在的必要。產(chǎn)品設(shè)計人員要盡量在前端交互上做好引導(dǎo)提示，對于復(fù)雜的規(guī)則和邏輯，可以考慮通過幫助文檔來指導(dǎo)用戶。
尼爾森十大可用性原則可靈活運(yùn)用于各個地方，可以是交互設(shè)計，也可以是界面設(shè)計，深入了解該設(shè)計原則，可以找到更好的解決方案，提高用戶的使用體驗。要注意的是，這10項原則是啟發(fā)式（heuristics）的、廣泛的經(jīng)驗法則，而不是具體的規(guī)定。
1、狀態(tài)可見原則：位置可見、數(shù)量可見、狀態(tài)可見；
2、環(huán)境貼近原則：語言應(yīng)該是用戶所能理解和習(xí)慣的；
3、用戶可控原則：可見導(dǎo)航、關(guān)閉與返回、撤銷與重做；
4、一致性原則：產(chǎn)品內(nèi)部一致、交互一致、迭代產(chǎn)品一致、同一產(chǎn)品線一致、設(shè)計語言一致、業(yè)內(nèi)產(chǎn)品一致；
5、防錯原則：操作前預(yù)警、操作中確認(rèn)、操作后可撤回；
6、易取原則：易掃描、智能獲取、草稿箱和歷史記錄、對象可視化、選擇代替輸入；
7、靈活高效原則：靈活配置、允許頻繁操作、各取所需；
8、優(yōu)美而簡約原則：視覺層次明顯、簡約且突出重點信息；
9、容錯原則：幫助用戶識別、診斷，并從錯誤中恢復(fù)提供方法；
10、人性化幫助原則：無需提示、一次性提示、常駐提示、幫助文檔。
我準(zhǔn)備了一些常用的設(shè)計素材送給大家，需要的話免費(fèi)拿走。獲取方式：老規(guī)矩公眾號后臺，發(fā)送文字“素材”，就可以獲取了～
文中如有不嚴(yán)謹(jǐn)?shù)牡胤较Ｍ蠹医o予指正，希望大家可以多多點贊評論鼓勵一下，最后感謝你的耐心閱讀。
今天與大家分享的是關(guān)于B端頁面中篩選區(qū)的功能設(shè)計，本文會從篩選的展現(xiàn)形式、布局、反饋、設(shè)計中遇到的問題以及設(shè)計思考這幾個方面進(jìn)行講述。
篩選，也可以稱作過濾器，它屬于搜索框架的一部分主要用于內(nèi)容提取，將一類數(shù)據(jù)展示，同時一類數(shù)據(jù)隱藏，可以整合很多的組件。
在B端產(chǎn)品設(shè)計中，篩選區(qū)的設(shè)置便于用戶進(jìn)行數(shù)據(jù)查詢和數(shù)據(jù)定位，可以快速的按照需要對數(shù)據(jù)進(jìn)行查詢和篩選；篩選的存在對于整個表單來說是非常重要的，它可以幫助用戶在表單茫茫多的數(shù)據(jù)當(dāng)中進(jìn)行快速的數(shù)據(jù)定位；可以對表單進(jìn)行快速數(shù)據(jù)按照自己想要的方式進(jìn)行劃分，縮短用戶對于數(shù)據(jù)的尋找時間。
1、篩選區(qū)的展現(xiàn)形式有哪些？
篩選區(qū)常見到的有搜索、條件篩選這兩類控件。搜索和篩選雖然同在篩選區(qū)，但是二者還是有所差異的。
通過百度百科我們可以了解到：
搜索，意思指仔細(xì)查找，搜尋。
篩選，篩選是利用篩子使物料中小于篩孔的細(xì)粒物料透過篩面，而大于篩孔的粗粒物料滯留在篩面上，從而完成粗、細(xì)料分離的過程。該分離過程可看作是物料分層和細(xì)粒透篩兩個階段組成的。物料分層是完成分離的條件，細(xì)粒適篩是分離的目的。
在B端系統(tǒng)界面設(shè)計中，搜索是通過指定任意條件，系統(tǒng)對此條件進(jìn)行的檢索后，展示相對應(yīng)內(nèi)容，功能偏主動性；篩選是系統(tǒng)提供指定各種條件縮小范圍，可以選擇查找不同條件的內(nèi)容，功能偏被動性。
無論被動性還是主動性，搜索和篩選這倆個功能都是讓用戶使用某個條件對內(nèi)容進(jìn)行區(qū)分，從而找到用戶想要的內(nèi)容。二者在功能上相輔相成，在B端系統(tǒng)的頁面中僅靠搜索或者篩選作為內(nèi)容篩選都是不夠的，這就需要組合篩選區(qū)了。
1.1搜索篩選
精確搜索
優(yōu)點：搜索準(zhǔn)確率高，所要即所得。
缺點：需要用戶自己輸入，然后進(jìn)行查詢。需要記憶搜索詳細(xì)信息。輸入框需要有提示輸入的內(nèi)容，方便用戶填寫，以及確認(rèn)輸入的類別或格式。
適用場景：適用于用戶有清晰的目標(biāo)，同時需要有查詢/搜索按鈕，來執(zhí)行篩選。搜索需要配合篩選固有類一起使用。
模糊搜索
優(yōu)點：模糊搜索可以用于搜索關(guān)鍵字的同義詞，提高搜索的精確性。字段匹配推薦搜索結(jié)果，減少記憶負(fù)擔(dān)，適用于不明確的信息篩選。
缺點：篩選出很多類似相關(guān)的內(nèi)容，需要查找鑒別所要內(nèi)容，不便捷。
適用場景：用戶對目標(biāo)模糊，模糊是指不用關(guān)心輸入了什么格式，哪怕錯了，系統(tǒng)也會推薦給用戶相對正確的；用戶需要瀏覽操作過濾器提供的信息來輔助篩選達(dá)到目標(biāo)。搜索需要配合篩選固有類一起使用。
搜索的設(shè)計原則
關(guān)于搜索，幾乎沒有人不知道，哪怕是不從事設(shè)計、產(chǎn)品的人，他們也知道。同時每一個產(chǎn)品，隨著規(guī)模變大，搜索一定必不可少。那么如何設(shè)計好搜索呢？有哪些原則可以借鑒，總結(jié)了以下4個方面。
漸進(jìn)呈現(xiàn)
在我們設(shè)計搜索時，可以考慮漸進(jìn)呈現(xiàn)的方式。這是指搜索結(jié)果不要一股腦兒都塞給用戶，而是使用逐步擴(kuò)大的方式，讓用戶慢慢進(jìn)入目標(biāo)。但這里要注意，漸進(jìn)的層級不要太深，漸進(jìn)的內(nèi)容要做到足夠為用戶著想。
結(jié)構(gòu)化
結(jié)構(gòu)化是指搜索結(jié)果呈現(xiàn)的形式要有歸納和整理的意圖，不能反饋給用戶的是沒有層次的內(nèi)容。簡單來說，分類就是結(jié)構(gòu)化呈現(xiàn)的體現(xiàn)，內(nèi)容結(jié)構(gòu)化后用戶查找和定位才會更快速。
可操作
對于搜索結(jié)果，我們可以給予操作選擇，例如收藏、分享等，這將會大大提升用戶與搜索結(jié)果之間的后續(xù)聯(lián)系。
可操作性是最佳優(yōu)先的好伙伴。同時給搜索結(jié)果添加使用類操作，這會讓用戶專注于目標(biāo)。
可保存
無論搜索任何內(nèi)容，用戶都有權(quán)保存自己常用的搜索結(jié)果，保證用戶后續(xù)無需重復(fù)搜索。這點上已經(jīng)有很多C端產(chǎn)品做的很好了，我們在B端產(chǎn)品上也可以考慮起來。
1.2條件篩選
下拉篩選
優(yōu)點：頁面的空間利用率高，同時下拉起到了很好的收納作用，不占據(jù)頁面空間。
缺點：由于下拉的局限性無法觀看到所有的篩選字段，需要操作點擊查看。
適用場景：下拉的篩選字段選項有限，可以明確的總結(jié)分類時，一般采用固定選項類。這種操作起來便捷，降低用戶的操作難度。一般情況下需要“搜索/查詢”按鈕，但是也有的產(chǎn)品是勾選即執(zhí)行的。主要需要結(jié)合具體的使用場景去判定。
矩陣(平鋪)篩選
優(yōu)點：用戶可以直接看到篩選內(nèi)容，支持輸入更多篩選條件，減少操作步驟提高了用戶篩選的效率。
缺點：平鋪的篩選類目占據(jù)頁面空間較大，空間利用率低，信息量過多都是重點等于沒有重點，增加用戶的決策時間，不適合選項太多的情況。
適用場景：平鋪篩選控件的普適性為最強(qiáng)，當(dāng)沒有其他更好想法時，用平鋪總是一個好的選擇。需要注意的是，篩選條件不要過多（遵循7±2 法則）。
注意事項：
當(dāng)確實需要支持大量的篩選條件時，有兩種解決方案可供參考
1、用戶自行配置篩選條件：對用戶來說，單次篩選會用到的條件是有限的；通過可配置的篩選條件，實現(xiàn)檢索效率和信息噪音的平衡，對于用戶自定義項的體驗與應(yīng)用都有更好的支持。
2、 隱藏低頻的篩選條件：這種方法需要對用戶需求有明確的把握，哪些篩選條件是高頻、哪些是低頻需要有明確的分界，優(yōu)點是第一次使用時用戶能更快上手。
表頭篩選
優(yōu)點：通過表頭的點擊，簡潔、直觀的篩選當(dāng)前表格列。
缺點：只能篩選當(dāng)前列的內(nèi)容，篩選字段比較少，篩選形式比較單一。每個表頭都會有篩選的icon，影響用戶對于表頭的識別。表頭篩選學(xué)習(xí)成本最高，且和表頭排序容易沖突，篩選值展示也不夠直觀。
適用場景：表頭篩選類似Excel表格的操作，是一種相對高級的交互，適合表格列比較單一內(nèi)容的篩選。
注意事項：
一般來說不推薦使用，僅建議在以下幾種情況考慮使用
1、空間是在有限或者表格非常靈活；
2、用戶可能對每一列都有篩選需求（如數(shù)據(jù)報表、Excel）；
3、產(chǎn)品規(guī)劃時對于用戶篩選需求不夠明確，也可通過這種模式先采集數(shù)據(jù)，分析其使用頻次，對后期的界面優(yōu)化進(jìn)行指導(dǎo)。
TAB標(biāo)簽
優(yōu)點：篩選條件一目了然，交互步驟少，一個Tab標(biāo)簽代表一個緯度，平鋪展示篩選內(nèi)容方便識別，學(xué)習(xí)成本低。
缺點：Tab標(biāo)簽篩選字段數(shù)量有限制，不宜過多，分類需覆蓋選項，并且保證每一項沒有交集，空間占用多、不夠靈活，對用戶自定義項支持較差。
適用場景：Tab標(biāo)簽切換一般用于和時間、狀態(tài)的流轉(zhuǎn)有關(guān)，且沒有交集的數(shù)據(jù)內(nèi)容（可以是同性質(zhì)，也可以是不同性質(zhì)）。權(quán)重高，選項值不超過5個。
1.3組合篩選
在B端系統(tǒng)表格類頁面中，字段屬性很多，簡單的檢索方式很難準(zhǔn)確定位到目標(biāo)數(shù)據(jù)，所以在實際使用當(dāng)中，常會將大量非交叉關(guān)系的屬性進(jìn)行羅列，搜索、篩選、TAB標(biāo)簽切換組合出現(xiàn)，形成多屬性的組合檢索。而篩選項互相組合，其展示方式有如下幾種：
平鋪式
平鋪式是將所有篩選項羅列出來平鋪在頁面上，可以兼容多種數(shù)據(jù)格式比如數(shù)字、文本、標(biāo)簽、枚舉值、布爾值等，包含但不限于日期選擇期、標(biāo)簽切換、單選框、復(fù)選框等多種控件。
優(yōu)點：用戶能直接看到選項內(nèi)容，方便用戶識別選項，且提高了用戶篩選的效率（節(jié)省了篩選操作），大而全的篩選字段最大限度避免篩選條件遺漏的問題。
缺點：篩選項多會占據(jù)大量頁面空間，信息量過多都是重點等于沒有重點，增加用戶的決策時間，不利于表格數(shù)據(jù)的直觀展示，此類型一般配合“勾選即執(zhí)行”使用。
適用場景：普適性為最強(qiáng)，當(dāng)沒有其他更好想法時，用平鋪總是一個好的選擇。適用于從各個緯度篩選的場景，多維度篩選對信息篩選的顆粒度需求不一致，同時希望備選項被選中。
折疊式
折疊式篩選是平鋪式篩選的改進(jìn)，一種簡單直接的篩選形式，對平鋪的篩選項進(jìn)行收納，如果多屬性組合檢索中的一部分檢索條件不是高頻率使用的，但又是必須存在的，可以通過折疊的方式將這部分篩選字段隱藏起來，高頻篩選字段外露。
優(yōu)點：高頻篩條件可優(yōu)先快速篩選、一定程度上減少用戶的認(rèn)知負(fù)荷，同時占用空間較小。
缺點：不好劃分不同用戶的高頻篩選項，當(dāng)高頻篩選項過多時，頁面同樣會出現(xiàn)信息冗雜、空間占比大等問題。
適用場景：折疊低頻篩選，顯示高頻篩選，能滿足大多場景下不占用太多空間。針對有更多篩選需求的用戶也有更好的引導(dǎo)性。
從位置上來說，組合篩選一般有如下幾種常見類型：上下布局水平篩選區(qū)、左右布局的垂直側(cè)邊篩選區(qū)、 內(nèi)嵌的的表頭篩選區(qū)。
上下布局水平篩選區(qū)
最常用的上下布局，篩選區(qū)放置在表格頁面的上方，方便用戶識別選項，提高了用戶篩選的效率，明確哪些數(shù)據(jù)是用戶所需的。上下布局的篩選區(qū)也方便用戶進(jìn)行閱讀，對于那些由不同數(shù)據(jù)結(jié)構(gòu)組成的頁面，是一個很好的選擇。
上下布局的篩選區(qū)的可擴(kuò)展性差，當(dāng)篩選項目少于五個的情況下，最常使用的就是上下布局，而當(dāng)篩選項目多的時候，會占據(jù)大量頁面空間，內(nèi)容在較多時，推薦增加收起功能，這樣保證篩選整體面積不會很大，提升屏效比。
左右布局的垂直側(cè)邊篩選區(qū)
左右布局的篩選區(qū)一般是以字段選擇進(jìn)行篩選，篩選區(qū)的位置較固定，不會因為篩選項過多而影響頁面中主要內(nèi)容的位置，可擴(kuò)展性強(qiáng)，可在收起部分嵌套更多的字段值。
左右布局的好處就是能夠?qū)⒑Y選的所有條件都直接的展示出來，可以適應(yīng)很多場景，但是這種類型篩選器可以影響整個頁面。我們需要確保頁面上的每個元素都有效地受到篩選的影響，避免造成混亂。
內(nèi)嵌的表頭篩選區(qū)
表頭篩選是一種復(fù)雜的篩選形式，常見于列表中，是一種列表內(nèi)置篩選形式，適合表格列比較單一內(nèi)容的篩選，其最開始是源于Excel的篩選形式，點擊表單的篩選按鈕，可以將表頭的篩選字段直接帶入，方便用戶。
篩選區(qū)有兩種不同的反饋模式：數(shù)據(jù)實時更新反饋和數(shù)據(jù)手動更新反饋。
數(shù)據(jù)實時更新反饋
界面將與所有設(shè)置的篩選相匹配并對結(jié)果進(jìn)行實時更新。
這種模式的優(yōu)點是在執(zhí)行篩選時為用戶提供了一種方便簡單的體驗，可以在每次點擊后立即看到結(jié)果。適用于較低風(fēng)險的交互，一旦處理多選過濾器或更復(fù)雜的輸入時可能會造成混亂。當(dāng)然還需要考慮處理數(shù)據(jù)的多少，如果應(yīng)用中數(shù)據(jù)量巨大，每次更新時間較長，反而會降低用戶的使用效率。
手動更新反饋
在手動更新反饋模式下，過濾結(jié)果只有在用戶點擊查詢時才會更新。如果用戶想在每次更改后查看結(jié)果，必須單擊查詢按鈕。
這種模式適合多緯度復(fù)雜的篩選，所有篩選字段設(shè)置完畢之后，統(tǒng)一執(zhí)行操作，和實時反饋結(jié)果相比降低篩選等待時間，尤其是在大量數(shù)據(jù)進(jìn)行篩選中，優(yōu)化了用戶體驗。
什么情況不適合用篩選？
選用篩選組件的前提是信息能被清晰分類。如用戶ID/電話號碼，注冊用戶郵箱這種無明顯規(guī)則的就不適合用篩選組件去查找，用搜索會更好。
篩選分類條件有什么要求？
一是分類需符合大眾認(rèn)知的條件。如：按照年月日的認(rèn)知來選擇，地理位置按照省市區(qū)街道…
二是要求篩選類目的分類要合理、避免晦澀難懂的文案。這決定了用戶使用篩選功能的時候是否清晰無困惑。
高頻篩選操作怎么樣方便用戶操作？
首先高頻篩選操作不是產(chǎn)研團(tuán)隊自己主觀臆斷出來的，需要有數(shù)據(jù)支撐。很多產(chǎn)品為了滿足用戶快捷操作，會在篩選區(qū)幫用戶集成常用的快捷操作入口。比如很多電商產(chǎn)品的新品、包郵等快捷篩選。根據(jù)不同產(chǎn)品用戶習(xí)慣下操作整理出快捷操作入口能提高用戶體驗方便度。
篩選和搜索的區(qū)別？
主要區(qū)別在于用戶對目標(biāo)的清晰度不同，需要選用不同組件功能來達(dá)到其目的。
在B端系統(tǒng)界面設(shè)計中，搜索是通過指定任意條件，系統(tǒng)對此條件進(jìn)行的檢索后，展示相對應(yīng)內(nèi)容；篩選是系統(tǒng)提供指定各種條件縮小范圍，可以選擇查找不同條件的內(nèi)容。
搜索和篩選都是讓用戶使用某個條件對內(nèi)容進(jìn)行區(qū)分，從而找到用戶想要的內(nèi)容。
在設(shè)計組合篩選的時候，篩選區(qū)的設(shè)計需要根據(jù)業(yè)務(wù)實際情況進(jìn)行設(shè)計，考慮每個篩選字段和業(yè)務(wù)場景，來安排合理的篩選展示方式。
那么到底什么情況下使用何種篩選模式？我們在設(shè)計篩選的時候可以如何思考？顯然，使用頻率和界面空間是兩個非常重要的評判維度。除此之外，我們還可以以可見性、系統(tǒng)性能和用戶認(rèn)知等維度去深入思考，下面將逐一分析。
頻率
使用頻率是界面設(shè)計的一個重要考量因素，我們通常都會把高頻使用的功能放在顯眼且容易操作的位置。同理，對于篩選模式，我們也會依據(jù)篩選條件的高低頻進(jìn)行設(shè)計。頻率除了影響使用什么模式外，還會影響篩選條件及篩選項的排列順序，這里就不多敘述了。
界面空間
一些界面模式的出現(xiàn)就為了應(yīng)對界面空間不足的情況。而我們基于有限的界面空間選擇合適的篩選模式是件再正常不過的事。
可見性太弱，當(dāng)篩選條件都被收納在一個個小小的入口按鈕時，它的可見性也會隨之降低，尤其在PC端，一個大屏幕下更難發(fā)現(xiàn)。
可見性
既然說到可見性，不妨展開講講。可見性是一項重要的設(shè)計原則之一。一個明顯的道理是，可見總比不可見好，但由于界面空間限制，我們不得不取舍。那么如何取舍才能保證可用性仍然友好？
針對篩選模式的可見性，我們可以分三個要點去考慮：
1、篩選條件本身的可見性：
用戶越難發(fā)現(xiàn)，即可見性越低。通常，我們都可以以使用頻率來決定篩選條件的可見程度。但有時候也會失效，因為正如上文所提及，到了篩選這一步通常是顆粒度比較細(xì)的分類，否則我們可以用導(dǎo)航解決。但顆粒度越細(xì)，用戶對信息的需求就越不一致。比如，挑一件衣服，有人希望按品牌篩選，有人希望按價格，有人希望按顏色，我們很難判斷哪個頻率更高。面對這種情況，只能將所有的篩選條件平鋪出來供用戶選擇。例如，淘寶天貓等電商產(chǎn)品往往會使用矩陣式的篩選，而一些數(shù)據(jù)格式更多樣的B端產(chǎn)品則直接使用輸入式的篩選。
2、篩選項的可見性：
篩選項的可見性同樣影響模式的選擇。頁簽式和矩陣式篩選的可見性比下拉式更高，因為用戶可以直接看到篩選項。但篩選項一定要讓用戶看見嗎？對于這個問題，可直接以篩選項的多少去決策（少則可見，多則不可見），比如一些B端產(chǎn)品，如果將備選項都全平鋪出來可能一個屏幕都放不下，所以只能將所有篩選項收起。但這是一種極端的情況，缺乏說服力。
用戶對備選項是否足夠熟悉？比如對于一個尺碼的下拉框，我很清楚自己能選擇什么，但對于一個衣服風(fēng)格的下拉框，由于我對風(fēng)格不熟悉，不能預(yù)判這個篩選條件能起什么作用，很可能會將其忽略。
3、選中項的可見性：
選中項的可見性，即當(dāng)我選中某幾項后再次查看選中項的難易程度。
性能
數(shù)據(jù)量大才需要篩選，而數(shù)據(jù)量大必然會有性能問題。在不同場景下，用戶會發(fā)生不同的行為，對性能的要求也會不一樣。我們能經(jīng)常發(fā)現(xiàn)一些篩選模式會帶有“確認(rèn)”按鈕，當(dāng)用戶設(shè)置完篩選條件后不會即時刷新，而需點擊按鈕才能觸發(fā)。而有的篩選模式則沒有“確認(rèn)”按鈕。這分別對應(yīng)著兩種不同的場景。
第一種場景，如B端產(chǎn)品中的查詢報表場景。我需要找出符合條件A、B、C的所有信息，并進(jìn)行對比分析，那么我就會設(shè)置篩選條件A、B、C后一并篩選出來，這種情況是一步到位的，我不需要再額外添加條件D或E，所以有“確認(rèn)”按鈕的篩選模式更符合此場景。反而即時刷新會在我設(shè)置篩選條件時造成干擾。
另外一種場景，常見于B端產(chǎn)品中的查詢列表場景。如果我想找到信息α，通過篩選A后得出10個信息，那么憑肉眼即可找出信息α，任務(wù)結(jié)束，但如果篩選A后得出1000個信息，我可能會再添加篩選條件B、C或D，直到篩出的信息能讓我一眼分辨出信息α。換句話說，這時候我的心理模式是即時滿足的，只要信息縮窄到一定范圍我就會停止添加篩選條件，否則我會繼續(xù)添加篩選條件。所以即時刷新能更符合此場景，但與此同時就需要考慮到性能問題。
另外，我們也可從變更頻次和變更概率這兩個維度進(jìn)行思考。
變更頻次是指用戶反復(fù)使用篩選的次數(shù)，變更概率是指用戶使用篩選的可能性，一般來說，高頻次必然大概率，但大概率不一定高頻次。而這兩種情況對性能的要求是不同的。還是以報表和列表為例，在列表中，雖然很大概率會使用篩選來尋找信息，但由于用戶是即時滿足的，而且滿足即可，所以不會重復(fù)變更篩選條件。而在報表中，雖然用戶會一次性設(shè)置篩選條件，但需要分析的數(shù)據(jù)不只一種，所以會高頻更換篩選項，回想一下我們?nèi)シ治鲎约寒a(chǎn)品或競品的日活月活等數(shù)據(jù)時，是不是會高頻地切換數(shù)據(jù)來分析比對？所以，高頻次的篩選就會對性能有更強(qiáng)的要求，而為了避免性能問題，往往也會加上“確認(rèn)”按鈕。
用戶認(rèn)知
最難解決的其實是用戶的認(rèn)知問題，尤其在模式相對固定的當(dāng)下，讓用戶適應(yīng)并習(xí)慣新的模式并非易事。我們想出一些創(chuàng)新性的篩選模式時，不要忽略用戶的認(rèn)知。
想要了解B端C端不同，那么我們先了解B端是什么
B釋義為：Business（業(yè)務(wù)），顧名思義B端產(chǎn)品更偏重于業(yè)務(wù)，偏重于功能的使用，B端設(shè)計在更加注重對于使用者的效率，這個功能是否方便直接達(dá)到目的。B端產(chǎn)品最直接的使用者是企業(yè)或者說每個“小企業(yè)”（班級、部門團(tuán)隊等）要做的就是直接幫助他們用更低的成本使他們的效率大大提高。我們目前對于B端產(chǎn)品最簡單的理解就是疫情期間火爆的“釘釘”以及各位都熟知的“飛書”，在我們使用這兩款軟件時，我們就會發(fā)現(xiàn)這些功能好多面面俱到，“請假、匯報、簽到”等，不論多小的功能這兩款軟件都有，但是如果是C端的話，一些次要、點擊率低的功能指不定那天就消失了。單從產(chǎn)品角度來看就能看出B端與C端的區(qū)別，這些顯而易見的B端產(chǎn)品好像多了一絲冷靜但是很體貼的直男，C端就像一個花言巧語哄著你的playboy（僅舉例子區(qū)分，他們對于我們來說都是必不可少的產(chǎn)品）就像下面的自我介紹對比就能明顯的看出哪個是B端，哪個是C端。
這些通過你應(yīng)該已經(jīng)初步了解了什么是B端，那么接下來我們從更深層次的開始了解。
B端C端的不同在于哪些呢？
B端的使用者更多是企業(yè)單位，老板等，需要共同協(xié)作，比如你的上級領(lǐng)導(dǎo)千里之外就能給你派發(fā)加急任務(wù)；我們部門需要一起進(jìn)行這個需求等，這時B端產(chǎn)品的特性就體現(xiàn)了，就像現(xiàn)在經(jīng)常有人說“只要聽到“釘”的一聲”和“紅色閃電”心里就突然揪了起來。
C端的使用者在于用戶本身，通過精準(zhǔn)推送直擊用戶痛點，增加用戶粘性購買度等。
B端大多為辦公場景，項目需求、審批等
C端則較為廣泛，某寶買買買，某音看看看！
B端的價值更體現(xiàn)在我們整個團(tuán)隊的效率，這個項目的使用成本，；比如說我需要通過這個軟件幫助我們整個團(tuán)隊的效率提升，大家一起協(xié)作作圖、一起探討。
C端的價值體現(xiàn)在這個活動這款產(chǎn)品怎樣使用戶更好的體驗，在使用時很快樂的把單下了；比如我們在某物購物時，購買完成后會獲得一張3D虛擬卡片，我們的購物體驗之旅是不是會極其開心，這里就使用了峰終法則（如果用戶在一段體驗的高峰處和結(jié)尾處是愉悅的，那么用戶對這段體驗的整體感受就是愉悅的。）
B端更注重這個功能的實現(xiàn)，我在使用這個功能時是否可以更高效，更加的去節(jié)省我的使用成本，再設(shè)計時我們需要去理解整個業(yè)務(wù)邏輯、業(yè)務(wù)導(dǎo)向，介于B端產(chǎn)品比較私密，很少有公開的，所以比較設(shè)計起來難度較為提高。我們我們平常面對小伙伴B端的問題時，如果不去了解他們整個業(yè)務(wù)流程就很難客觀地去判斷，很容易對他的指點使他造成一次工作失誤。
C端的業(yè)務(wù)導(dǎo)向，更在于對于用戶心理、使用體驗的拿捏，能讓用戶做到“0”成本學(xué)習(xí)，無腦上手無腦沖沖沖，就比如你搞優(yōu)惠搞了半天復(fù)雜操作做后才200-10這誰不氣？光明正大割韭菜啊。
我在資料中查閱到未來的B端的進(jìn)步就會在“B端產(chǎn)品在使用體驗和視覺感受這兩個方面和C端產(chǎn)品接近”，B端C化其實很簡單，就是將B段專業(yè)性強(qiáng)會忽略視覺這一點進(jìn)行補(bǔ)充，B端產(chǎn)品也可以使自己的產(chǎn)品視覺更加富有沖擊力、3D、情感化、就像一些大廠最近的展示更多的去運(yùn)用了一些3D玻璃質(zhì)感提升B端產(chǎn)品的用戶視覺體驗，飛書也會制作情感也會在缺省頁的時候用emoj表情對你體現(xiàn)“話語安慰”是你在使用功能時不再那么枯燥，釘釘?shù)腎P設(shè)計同樣也是在拉近與用戶之間的距離，通過IP讓本就繁瑣的產(chǎn)品得到心情的愉悅，這都是在進(jìn)一步提升B端的情感化，淘寶的功能、抖音的功能更加方便高效其實也是B端的體現(xiàn)，所以我們B C端其實歸根結(jié)底我們的目標(biāo)服務(wù)都是為了人設(shè)計的，設(shè)計也一樣，服務(wù)于人，都是以更加舒適的道路上前進(jìn)。
其實B端C端從根本來說不同點很小，因為都是為了“人”去服務(wù)，未來的發(fā)展也是為了更好的讓我們?nèi)ジ咝У氖褂茫痪秃芟駠鴥?nèi)國外設(shè)計有什么不同，其實沒什么不同，我們設(shè)計每一個項目、每一個作品時不管我們是否屬于哪個國家，我們的目的也只有一個“為了讓這個世界因為有了設(shè)計而看起來更美一點！”
作者：小蘆同學(xué)有大腦袋 來源：站酷
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
列表頁多用于一個功能的首屏，是一個功能的數(shù)據(jù)集中載體，它的主要功能就是集中處理、展示、查詢、以及統(tǒng)計數(shù)據(jù)等。列表頁一般包含5個組成部分：標(biāo)題、查詢、操作、統(tǒng)計以及表格。
系統(tǒng)中只要是功能，就一定有標(biāo)題，就像只要是個人，就一定有姓名一樣，標(biāo)題的展示根據(jù)系統(tǒng)的結(jié)構(gòu)，可能在面包屑中，可能在標(biāo)簽欄中，也有可能在頁面容器中。如果標(biāo)題放在容器中，位置一般是固定的，不隨著頁面滾動而滾動，標(biāo)題字體也要和內(nèi)容字體做區(qū)分，一般是字號增大或者加粗等方式。
查詢條件的設(shè)計也是五花八門，根據(jù)查統(tǒng)頁使用場景大致可以分成兩種：一種是省空間的設(shè)計，一般只需要放一兩個查詢條件，那么它就可以和操作按鈕放一起，多出現(xiàn)于數(shù)據(jù)字段比少且簡單的情況；一種是經(jīng)常需要混合高級查詢，一般會獨立有一塊查詢條件模塊，多出現(xiàn)于數(shù)據(jù)統(tǒng)計類頁面。
為了達(dá)到省空間的目的，查詢條件和操作放一行，一般會只放一兩個查詢條件，輸入或選擇后即執(zhí)行查詢，不需要單獨點擊查詢按鈕，這種方式好處就是省空間，缺點是它默認(rèn)展示的篩選項比較少，需要再點擊“更多查詢”才能看到更多。設(shè)計這種查詢方式需要注意的是，輸入查詢一般是輸入后即執(zhí)行查詢，容易導(dǎo)致執(zhí)行過于頻繁（輸入一個字符即執(zhí)行了），因此會做防抖設(shè)置，可以在輸入0.5s后執(zhí)行。再一個，這種展開收起的情況，用戶容易看不到隱藏的篩選，因此需要一些標(biāo)記，比如展示已選擇的數(shù)量。
獨立查詢條件的方式，就是將查詢條件單獨劃出一個模塊，可以一次性展示多個查詢條件。這種方式的好處就是，查詢更便捷，還可以做更多的拓展性方案，如用戶可以自定義高級查詢方案。缺點就是占空間，對于小分辨率電腦不是很友好。
列表的操作是由產(chǎn)品的功能權(quán)限控制，由權(quán)限決定哪些人能夠使用和查看數(shù)據(jù)，下面從操作的類型、組合、操作反饋以及狀態(tài)的角度分析如何設(shè)計好操作功能。
操作模塊一般是由一組用于操作表格數(shù)據(jù)的按鈕組，主要分為3種：一種是全局性操作，一種是選擇數(shù)據(jù)進(jìn)行操作，一種是混合型操作。全局性操作（如新增數(shù)據(jù)、導(dǎo)入、導(dǎo)出模板、刷新等）不需要勾選當(dāng)前具體某行數(shù)據(jù)，就可以直接點擊操作；選擇數(shù)據(jù)進(jìn)行操作（如刪除、編輯、審批等），即操作前需要至少勾選一條數(shù)據(jù)，因為它是對當(dāng)前已存在的數(shù)據(jù)進(jìn)行操作；混合型操作（如導(dǎo)出、更新狀態(tài)等），在勾選數(shù)據(jù)的時候會對當(dāng)前數(shù)據(jù)進(jìn)行操作，未勾選數(shù)據(jù)的時候默認(rèn)會全部處理或者其他的操作，比如“導(dǎo)出操作”，勾選數(shù)據(jù)時會導(dǎo)出已選數(shù)據(jù)，未勾選時則默認(rèn)導(dǎo)出空模板或者導(dǎo)出全部數(shù)據(jù)（根據(jù)具體產(chǎn)品要求）。
操作組一般會由一個或多個按鈕組成，通常只有一個主操作（primary）。主操作是帶有引導(dǎo)性的功能，如“新增數(shù)據(jù)”，還有若干個普通按鈕（default），不帶有引導(dǎo)性。按鈕組還可以根據(jù)操作類型形成組合，以分割線或收納的形式展示，收納按鈕主要有兩種展示形式：一種是帶主操作的收納按鈕（如歸納同類型的操作），一種是直接收納，不帶主操作的（如按鈕太多需要進(jìn)行收起）。操作的順序通常也會根據(jù)優(yōu)先級和操作頻次來決定。
操作后需要給個反饋，告知用戶操作結(jié)果，告知結(jié)果分三種情況：1、直接給結(jié)果，如toast提示，操作成功/操作失?。?、給操作建議，如：toast提示，請先勾選至少一條數(shù)據(jù)；3、警告提示，如刪除數(shù)據(jù)時候告知風(fēng)險，二次確認(rèn)防止誤操作。
數(shù)據(jù)統(tǒng)計一般是拾取表格數(shù)據(jù)某些維度的統(tǒng)計結(jié)果，用于快速知曉當(dāng)前所有數(shù)據(jù)的情況，有些統(tǒng)計還帶交互，比如點擊選中后進(jìn)行數(shù)據(jù)過濾。
市面上封裝好的表格組件可配置api很多，像antd，但是想要做的更強(qiáng)大，還有很多能夠做的細(xì)節(jié)，我們先來分析下表格的組成。表格是由行和列組成的網(wǎng)格數(shù)據(jù)，表格可以分2種，明細(xì)表和交叉表，查統(tǒng)頁中采用的就是明細(xì)表中的橫表，即表頭是橫向的。
表格的設(shè)計原則遵循以下幾點：數(shù)據(jù)可讀性、展示效率、操作便捷性、以及靈活性等。
表格作為信息密度最大的組件，在設(shè)計的時候要考慮數(shù)據(jù)的可讀性，可以從以下幾點入手。
B端產(chǎn)品尤其是ERP這種數(shù)據(jù)密集程度很高的產(chǎn)品，對空間的利用要求是很高的，因此在設(shè)計的時候要充分考慮展示的效率，可以從行高、列寬等角度去設(shè)計表的細(xì)節(jié)。我設(shè)計表的時候習(xí)慣先跟產(chǎn)品討論清楚每個字段大概的長度，在設(shè)計的時候就會預(yù)留匹配的默認(rèn)字段寬度，比如14號字體的表格，在展示“創(chuàng)建時間”字段的時候，字段寬度不會超過170px，我會留180px的默認(rèn)寬度，既有呼吸感，又不浪費(fèi)空間。最后預(yù)留一個字段寬度作為auto自適應(yīng)，給到個min最小值，這樣在不同分辨率上能展示相同的效果。
表格在展示數(shù)據(jù)的時候往往會遇到一些問題，比如字段顯示不完整，這時候就需要手動支持調(diào)節(jié)列寬，或者懸停tips展示全部內(nèi)容。再比如想要復(fù)制某段內(nèi)容，而文字展示不全，又不支持調(diào)整列寬，這時候要么在比較常用于復(fù)制的字段后面跟個“復(fù)制”圖標(biāo)，或者懸停出現(xiàn)tips的時候鼠標(biāo)移上去不會馬上消失，這樣用戶就能框選文字復(fù)制了。
表格設(shè)計的時候不一定能覆蓋所有用戶和場景，因此需要預(yù)留一些靈活調(diào)整的空間，下面介紹幾個常用點。
表格元素包含了背景、數(shù)據(jù)（文字、圖片、圖標(biāo)、標(biāo)簽、附件等）、序號、邊框、選擇框、操作項、斑馬線等。這些在設(shè)計表格的時候都是設(shè)計師需要去定義展示形式
為什么要單獨把操作列拿出來講，因為操作列的設(shè)計蘊(yùn)含了太多內(nèi)容需要考慮，設(shè)計師在設(shè)計的時候很容易忽略。
目前操作列按鈕主要兩種形式，“圖標(biāo)按鈕”和“文字按鈕”，圖標(biāo)按鈕主要用于比較簡單易懂的一些常規(guī)操作，優(yōu)勢是長度可控，容易對齊，劣勢是，有時候需要懸停上去才知道含義，不夠直接；文字按鈕用的范圍比較廣，簡單明白，缺點是長度不可控，不好對齊。
操作列和復(fù)選框一樣，一般作為固定列，不隨著字段橫向滾動。數(shù)量也不可控，根據(jù)業(yè)務(wù)情況，有多有少，因此在做的時候要解決數(shù)量問題，如果全部展示，則勢必影響內(nèi)容的展示面積，因此設(shè)計師根據(jù)真實的操作數(shù)量設(shè)定固定列寬度規(guī)則，操作項超過一定數(shù)量或一定長度做“更多”按鈕收納。還有一種展示方式，默認(rèn)不展示，鼠標(biāo)懸停展示該條數(shù)據(jù)需要展示的操作，這樣既可以解決信息展示面積問題，又不需要考慮和其他行數(shù)據(jù)的操作對齊，還不需要定操作列列寬規(guī)則，缺點是，不夠直接，如果不懸停就不知道還有操作項。有的產(chǎn)品干脆直接把操作項去掉，全部采用上面的全局操作，勾選數(shù)據(jù)后執(zhí)行，總之各有各的優(yōu)缺點。
設(shè)計師經(jīng)常會困惑，什么時候操作禁用，什么時候隱藏。按鈕隱藏一般根據(jù)數(shù)據(jù)權(quán)限控制，“隱藏”通常是角色無該操作權(quán)限的時候采用，“禁用”通常是由于數(shù)據(jù)本身的問題導(dǎo)致暫時性失效。舉例個例子，組織架構(gòu)的頁面，管理員對所有組織架構(gòu)和成員有編輯和刪除權(quán)限，而普通員工只能查看數(shù)據(jù)，這時候操作按鈕就需要隱藏。再比如訂單功能，有的訂單已經(jīng)進(jìn)入審批環(huán)節(jié)不可刪除，那么它的刪除按鈕就會變成禁用，而有的訂單還未進(jìn)入審批環(huán)節(jié)，這時候是允許刪除的，這時候刪除按鈕就會亮起。
數(shù)據(jù)量比較大的時候會用上分頁器，設(shè)計師在設(shè)計的時候也要定好默認(rèn)一頁幾條，不然開發(fā)就會根據(jù)自己的臆想來做。分頁器位置的設(shè)計也分兩種，在表格上方和表格下方，市面上看到的大部分都是在下方。放在下方就有個問題了，是要固定頁面位置還是隨著表格自動計算位置？我對比了幾個比較成熟的產(chǎn)品，大部分都是固定在底部，不隨著頁面滾動，整個頁面滾動的區(qū)域只有表身，有小部分是跟在表格尾部，每頁條數(shù)超過屏幕高度可展示量，分頁器就會被擠到下面看不見，這種好處就是省了一點展示空間，不好的地方就是，要想再使用分頁器得往下找。還有極小部分產(chǎn)品兼容了這兩個方案，當(dāng)條數(shù)少的時候跟在表格尾部，當(dāng)條數(shù)多的時候，會頂在底部，類似固定釘功能?？傊还懿捎媚姆N方案，都要兼顧便捷性和易用性。
表頭篩選平時用的比較少，因為外面已經(jīng)有獨立的篩選功能，有些也放出來，補(bǔ)充一些不常用的篩選。
排序規(guī)則主要由產(chǎn)品提供，設(shè)計需要知道一下。一般默認(rèn)是以產(chǎn)品的創(chuàng)建時間為排序，排序不帶具體業(yè)務(wù)含義的一般采用時間倒序，最新數(shù)據(jù)在表格最上面，這樣每次新增數(shù)據(jù)就可以快讀看到，不用劃到最后面甚至翻頁后才能看到。有的采用時間正序，最新的數(shù)據(jù)在最后面，這種一般是數(shù)據(jù)本身帶有排序?qū)傩裕绻Q(mào)然在最上面插入數(shù)據(jù)會打亂已設(shè)定好的順序，這種帶排序?qū)傩缘谋砀?，往往還有調(diào)整順序的操作。觸發(fā)排序一般只需要點擊表頭即執(zhí)行，通常點一次會進(jìn)行正序/反序，再點一次會反過來，再點一次取消排序。如果點另一個字段的排序則默認(rèn)會采用最新的排序字段。
有些比較難懂的字段需要在表頭增加一個提示信息，來輔助用戶理解字段含義
前面講了表格的各種屬性，為了使用的靈活性，有些成熟的產(chǎn)品會設(shè)計一個設(shè)置表格屬性的功能，可以讓用戶自定義表格屬性，如字段展示（篩選）、字段順序、字段對齊方式、字段固定列、是否展示序號、斑馬線等。事情有利必有弊，靈活也意味著學(xué)習(xí)成本高和投入開發(fā)成本大，是否需要做有各自的真實情況決定，不過作為設(shè)計師得知道，這些就是你能雕琢的地方。
還有一些額外的設(shè)計過程中你不一定會注意到但挺好用功能推薦。
在選擇數(shù)據(jù)的時候，為了便于一眼看到選中的數(shù)據(jù)，會做這個么個操作。
表格的選擇，默認(rèn)一般是不支持跨頁選擇的，所以產(chǎn)品或者設(shè)計需要要求開發(fā)支持跨頁選擇，而一旦支持跨頁選擇，就容易忘了到底選了多少條，因此會展示選中條數(shù)，以及一鍵清空選中，這個功能還可以和“只看已選”功能混合著用。
對于有些帶明細(xì)數(shù)據(jù)的表單，通常在表單中會分表頭和明細(xì)（表身），舉個例子，商品訂單中會包含一些像訂單編號、客戶名稱、發(fā)貨時間、發(fā)貨地址等等這種，叫做表頭。像具體的明細(xì)數(shù)據(jù)，如訂單中包含100個a商品，200個b商品等等，叫做明細(xì)（表身），因此在列表功能展示的時候有時候需要一眼看出明細(xì)數(shù)據(jù)，就會以表身明細(xì)數(shù)據(jù)為主數(shù)據(jù)展示，但是數(shù)據(jù)量會蹭蹭往上，因此用戶可能會選擇是按“表頭”數(shù)據(jù)展示還是按“表頭+明細(xì)”數(shù)據(jù)展示。
列表頁承載了一個b端系統(tǒng)半壁江山，設(shè)計師在設(shè)計過程中需要不斷打磨，設(shè)計出符合自己產(chǎn)品特性的列表。
作者：落難的黑人 來源：站酷
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
01
什么是靈動島（Dynamic island）
2022蘋果秋季新品發(fā)布會，備受關(guān)注的新一代iPhone如期而至，此次發(fā)布會最大的亮點是iPhone 14 Pro系列一改之前「劉海」設(shè)計，首次采用了「藥丸」挖孔屏。雖然「藥丸」在安卓陣營中并不是什么新鮮玩意，但一向以創(chuàng)新著稱的蘋果還是玩出了不一樣的花樣，帶來了全新的交互方式，模糊了硬件和軟件的界限，通過實時變化顯示重要的提醒、通知以及簡單的功能操作，蘋果把這一創(chuàng)新稱之為靈動島（Dynamic island）。
02
靈動島能做什么 / 不能做什么
靈動島其實可以簡單的理解為基于前置攝像頭區(qū)域拓展的消息通知和快捷操作的新交互方式。
來電
當(dāng)有來電時，靈動島會發(fā)生變化，并在后臺打電話時顯示通話時間和聲音波紋。
音樂
有點類似于鎖屏后的音樂功能操作，保留了基本的播放、暫停、前進(jìn)、后退等功能。
Airpods
連接AirPods后，AirPods的型號外觀和當(dāng)前電量會一起顯示。
導(dǎo)航
顯示導(dǎo)航方向和距離，并且能夠在適當(dāng)?shù)臅r候放大顯示更多導(dǎo)航信息。
Face ID
以前Face ID認(rèn)證會顯示在屏幕中間，現(xiàn)在集成于靈動島的擴(kuò)展功能之中。
充電
當(dāng)充電時，會顯示充電的狀態(tài)以及當(dāng)前電量百分比。
當(dāng)然，目前除了官方展示的這些功能以外，還會有更多的應(yīng)用方式，在此不一一列舉。但靈動島也并不是萬能的，例如會存在以下的局限性：
重度使用場景
從官方給出的樣例來看，靈動島更多的是承擔(dān)了消息通知和提醒的作用，并不適用于重度使用和復(fù)雜交互等場景，例如消息聊天、刷短視頻、買賣交易等等。
過于復(fù)雜的圖形
受限于前置物理攝像頭，靈動島這個區(qū)域并不能顯示過于復(fù)雜的圖形，并需要避開攝像頭區(qū)域，因為該區(qū)域是不能顯示任何圖像的。
軟硬件的邊界
靈動島的實際效果并不會像宣傳圖中那樣好，特別是在反光強(qiáng)烈的戶外。攝像頭的挖孔清晰可見的，即使是在黑色不發(fā)光的OLED屏幕上，軟件和硬件的界限還是能夠明顯區(qū)分。
03
對于靈動島的各方反應(yīng)
新事物的出現(xiàn)，總會伴隨著支持和反對兩種聲音，此次靈動島的創(chuàng)新交互，自然也是褒貶不一，還需要經(jīng)受時間的考驗，因為即使是蘋果這樣的公司也難免會犯錯，比如3D Touch、MacBook上的Touch bar等。
支持方認(rèn)為「靈動島是繼劉海屏之后的又一個成功設(shè)計，甚至?xí)絼⒑Ｆ?，更受歡迎」。
「靈動島的設(shè)計非常討巧，同時也給挖孔屏帶來了更多的想象空間」。
而反對方的理由也十分充分，首先是羅永浩第一時間發(fā)表了自己的觀點，表面上是硬贊這個創(chuàng)新，但實則是諷刺了這樣多此一舉的方式，「先在臉上涂屎，然后再把屎的顏色調(diào)整得跟粉底差不多」
很多的輿論認(rèn)為，靈動島的創(chuàng)新是蘋果的一種無奈和妥協(xié)，因為自從第一代iPhone革新性的使用觸摸屏之后，十多年以來手機(jī)在工業(yè)設(shè)計方面并沒有太多的創(chuàng)新，大部分廠家是在屏幕分辨率，后蓋材質(zhì)，攝像頭像素上面做文章，而蘋果作為一個工業(yè)設(shè)計創(chuàng)新的公司，也只能通過后置攝像頭模組的排列來維持每一代iPhone的變化。所以此次靈動島的創(chuàng)新，被認(rèn)為是工業(yè)設(shè)計乏力之后推動交互設(shè)計創(chuàng)新的無奈之舉。
但無論支持還是反對，前置攝像頭挖孔屏終究是一個過渡性的方案，最終會被全面屏所替代，而在這個過渡時期，很明顯蘋果的解決思路與國內(nèi)的絕大多數(shù)廠商都不一樣。
04
為什么國產(chǎn)手機(jī)不做靈動島
國產(chǎn)手機(jī)的前置攝像頭解決方案除了「劉?！挂酝?，單攝像頭「圓孔」和雙攝像頭「藥丸」設(shè)計都已經(jīng)非常成熟，但是為什么經(jīng)過這么多年的迭代，依然沒有創(chuàng)新呢？
思維方式的差異
國產(chǎn)手機(jī)廠商的思路跟蘋果相反，希望盡可能的把前置攝像頭做得越小越好，甚至頭部的廠商嘗試探索升降攝像頭和屏下攝像頭的解決方案，目的就是為了把前置攝像頭隱藏。而蘋果的思路則是，既然現(xiàn)階段的技術(shù)沒有辦法把前置攝像頭隱藏，那么干脆就以此為基礎(chǔ)，把這個區(qū)域運(yùn)用到極致。
缺少創(chuàng)新和引領(lǐng)者
似乎國內(nèi)的用戶更關(guān)心的是電量是否持久、屏幕刷新率高不高、拍照功能強(qiáng)不強(qiáng)大等問題，秉持著「人民需要什么，我們就造什么」的成功理念，各大廠商也開始在這些方面內(nèi)卷，從60Hz到120Hz刷新率，從千萬像素到一億像素，從萊卡加持到一英寸大底傳感器... 大家都在做從1到100的事情，而很少有關(guān)注從0到1，因為這樣做的性價比的確不高。
市場的接受和認(rèn)可程度
當(dāng)劉海屏第一次出現(xiàn)的時候，很多用戶都在吐槽，其中也包括很多蘋果的忠實用戶，寧愿買iphone8P也不愿意使用劉海屏的iPhone X。而經(jīng)過一兩年的審美教育以及國產(chǎn)手機(jī)的跟風(fēng)之后，才慢慢的被更多用戶所接受。因此國內(nèi)的廠商很難有信心通過一己之力去改變用戶習(xí)慣，并贏得市場的認(rèn)可。我相信，蘋果發(fā)布以后，各大廠商已經(jīng)在積極的學(xué)習(xí)和模仿，新的一輪內(nèi)卷即將拉開帷幕。
即便如此，國產(chǎn)廠商也并不是完全沒有在前置攝像頭的區(qū)域努力嘗試過。例如魅族曾經(jīng)在前置攝像頭上顯示當(dāng)前電量，稱之為「環(huán)形電量」，并盡可能的使其與狀態(tài)欄的其它信息融為一體。
榮耀的通話時間膠囊和自拍膠囊，都以前置攝像頭為基礎(chǔ)做延展，可以看得出在想盡辦法的規(guī)避前置攝像頭所帶來的不好體驗。
雖然VIVO的原子通知不是圍繞前置攝像頭區(qū)域拓展，但從效果和想法來看，也與靈動島的概念比較類似。
HTC曾經(jīng)出過一款HTC U Ultra，當(dāng)然那時候還沒有全面屏的概念，所以HTC把它稱之為副屏，可以顯示消息通知、音樂播放操作、App快捷入口等等。
除此以外，幾乎所有劉海屏的手機(jī)都有把劉海隱藏起來的功能。
05
對設(shè)計師的影響
靈動島的出現(xiàn)，對 iOS 原本通知、交互、卡片、彈窗等一系列交互規(guī)范進(jìn)行了解構(gòu)再重做，就好比「劉海屏」首次出現(xiàn)的時候，需要設(shè)計師對全新交互邏輯、卡片行為、動畫等重新適配。那么對于「靈動島」我想需要考慮的是這幾個方面。
新的交互方式
之所以叫靈動島，就是因為它是「靈動」的，擁有不同的狀態(tài)變化，以適應(yīng)各種功能提示和操作。設(shè)計師在使用這個功能的時候，需要充分考慮其場景，恰如其分的給予提醒而不給用戶帶來過多的打擾。
新的容器
不同形態(tài)的容器可以裝載不同的內(nèi)容，相比于以往常規(guī)的通知提醒，新的容器可以展示更多的信息，甚至是簡單的功能操作。在提出解決方案的時候，留給設(shè)計師更多的想象空間。
新的表達(dá)方式
靈動島相當(dāng)于一個永遠(yuǎn)在桌面上的島嶼，比任何App的優(yōu)先級都要高，所以會成為各個應(yīng)用的必爭之地，使用一種好的表達(dá)方式，必然能夠達(dá)到事半功倍的效果，因此也是考驗設(shè)計師在寸土寸金的區(qū)域中，通過視覺化手段表達(dá)的能力。
最后，我想蘋果的初衷是為了更好的用戶體驗，消除一部分用戶對于挖孔屏的焦慮，如果能夠真正的站在用戶的角度、克制的去使用新的交互方式，會得到用戶的喜愛和市場的認(rèn)可。
我認(rèn)為靈動島既是一種創(chuàng)新也是一種妥協(xié)，對于工業(yè)設(shè)計硬件創(chuàng)新乏力的妥協(xié)，更是對技術(shù)發(fā)展的妥協(xié)。我也相信，真正的全面屏?xí)r代終究會到來，期待那個時候蘋果再一次給我們帶來真正意義上的，里程碑式的，創(chuàng)新！
電影《再次出發(fā)之紐約遇見你》中有一個浪漫的場景，男主和女主通過一根耳機(jī)分線器一起聽著音樂，一起感受著當(dāng)下同一段旋律。通過這根分線器，他們分享著自己的歌單，分享著當(dāng)下的情緒，隔絕外界的紛擾，游蕩在大街小巷。
這種聽歌方式我也很喜歡，同樣的歌曲讓人產(chǎn)生了不一樣的感受。我想，可能是陪伴和共鳴賦予了這首歌新的生命力吧!
如今，無需分線器，網(wǎng)易云音樂一起聽可以讓你和那個TA隨時一起欣賞音樂、分享心情。前年7月份上線的這個功能獲得了用戶的一致好評，之后的數(shù)據(jù)表現(xiàn)也是遠(yuǎn)超預(yù)期。但是，在眾多的用戶反饋中，最多的一個痛點是：身邊沒有人陪我一起聽，能不能做個匹配功能，找陌生人一起聽？
站在業(yè)務(wù)的層面考慮，一起聽作為一個熟人聽歌的功能，在戀人和親密好友之間普及度非常高，但同時也要考慮當(dāng)這部分用戶數(shù)據(jù)增長到達(dá)瓶頸后，一起聽如何拓展新的用戶群。陌生人一起聽是一個很好的方向，能夠突破熟人社交的限制，擁抱更多社交關(guān)系拓展的可能性。
為了滿足這一部分用戶的需求，陌生人一起聽的項目在決策層的支持下進(jìn)入了探索階段。這一階段主要想要知道什么樣的產(chǎn)品形態(tài)適合陌生人一起聽，是在原有的熟人一起聽的框架內(nèi)進(jìn)行拓展，還是大膽顛覆更加讓人眼前一亮呢？每位小伙伴都描述著自己的構(gòu)想，朝著不同方向探索。經(jīng)過一輪輪的方案討論，最終我們選擇了“星球”作為框架，來承載陌生人一起聽的設(shè)計。大概的構(gòu)想是這樣的：當(dāng)我在聽一首歌，感覺孤單并希望有人陪伴時?？梢酝ㄟ^一個入口進(jìn)入到一個由光點組成的星球，每個光點代表一個當(dāng)前也在聽這首歌曲的用戶。我可以展示自己的狀態(tài)，和其他的用戶進(jìn)行互動。當(dāng)我對一個用戶感興趣時，可以選擇“跟隨”TA，每當(dāng)TA去往另一個星球（也就是聽其他的歌時），我也會自動移動到那個星球，跟隨著TA一起聽。
根據(jù)上述設(shè)想，設(shè)計團(tuán)隊還產(chǎn)出了一些方案來還原大家心中的“星球”，下面是早期一個方案的動態(tài)演示，黑膠上的封面變化為一個同色系的星球，每個光點代表一個正在聽這首歌的陌生人。
我們將這個大概構(gòu)想告知開發(fā)同學(xué)后，得知需要的人力和時間成本遠(yuǎn)超我們預(yù)期。由于決策層希望能夠在一起聽的熱度未退時盡快上線陌生人版，我們不得不把這個星球版的方案暫時擱置，重新構(gòu)想在原有框架內(nèi)的設(shè)計方案。
決定在原有框架內(nèi)進(jìn)行設(shè)計后，我們就需要收攏之前發(fā)散的想法。針對主要需求進(jìn)行設(shè)計，把有限的資源用到刀刃上。最終確定的產(chǎn)品形態(tài)似乎很簡單直接，點一下按鈕，匹配一個愿意和我一起聽歌的人，但是到了視覺設(shè)計階段，就需要考慮更多的問題。
從關(guān)系的角度講。熟人之間比較親密，陌生人之間要保持一定距離，慢慢了解對方。與熟人一起聽有著穩(wěn)定的預(yù)期，但是陌生人帶來的是不穩(wěn)定，這種不穩(wěn)定可能是緣分和驚喜，也可能是騷擾和驚嚇?？紤]到這種不同，做陌生人一起聽的功能就不能夠完全套用熟人的設(shè)計，而是要針對性地進(jìn)行重新思考。
首先，功能的入口能夠給用戶第一印象，我們用了一個動畫表達(dá)兩個陌生人沉浸在音樂中的含義，兩個匿名小人安靜地呆在一起，音符環(huán)繞著它們運(yùn)動，暗示他們正在一起聽歌。通過這種表達(dá)幫助用戶快速了解功能，同時渲染氛圍，吸引用戶使用。
在熟人一起聽歌過程中，為了表達(dá)親密，表現(xiàn)形式上采用了耳機(jī)共享，頭像疊放的表現(xiàn)形式。但在陌生人之間，為了避免過于親密，就去掉了耳機(jī)線。為了控制社交距離，頭像不再疊著放了。陌生人的頭像也模糊處理來保持神秘感。
為了保證沒有社交意愿的用戶不被打擾，同時為了避免社交過程過于快餐化，陌生人一起聽采用了一方申請，另一方同意才可以公開身份的規(guī)則。為了配合這個規(guī)則，我們設(shè)計了陌生人揭面機(jī)制來引導(dǎo)用戶和傳達(dá)信息。匹配成功后，雙方會先隱藏身份聽歌。以此來鼓勵用戶盡量關(guān)注音樂本身，而不是純粹為了交友而進(jìn)行一起聽。當(dāng)一起聽了5分鐘后，對方的面具會小幅度上下移動，暗示用戶可以點擊。點擊對方的面具后會發(fā)出公開身份的申請，對方同意后才可以揭開面具。后續(xù)聽歌過程中，雙方就在身份公開的情況下一起聽歌。如果相處愉快，可以去對方主頁了解更多信息，甚至互關(guān)成為好友，下一次以熟人的身份邀請一起聽。
“于千萬人之中，遇見你所遇見的人”，這是我們想在匹配的過程中體現(xiàn)的緣分感。受限于開發(fā)成本，匹配動畫只能在一個小小的圓形容器里去設(shè)計。下面四個方案是前期的探索稿，主要是把人抽象成一個個點，點可能代表一種顏色、一顆星星、一個光點，點的運(yùn)動表達(dá)尋找的過程。
最后選用了第四個，進(jìn)行最終優(yōu)化后的呈現(xiàn)如下。通過雷達(dá)的轉(zhuǎn)動表達(dá)尋找，浮動的光點代表一個個陌生人，最終受到召喚的那個TA飛入雷達(dá)范圍，發(fā)出代表回應(yīng)的音波后，變大形成一個蒙面的頭像。（由于時間關(guān)系，此動畫后半段僅在安卓端實現(xiàn)）
如果你仔細(xì)地用過一起聽，可能會發(fā)現(xiàn)雙紅心彩蛋，這份驚喜感也是我們希望讓雙方感受到的。當(dāng)你喜歡了一首對方也喜歡的歌曲，都會出現(xiàn)一個兩個愛心碰撞出音符的動畫，在驚喜的同時也會體驗到來自陌生人的認(rèn)同感。
至此，在這一版的一起聽中，我們希望用戶能夠獲得的感受是：“兩個陌生人雖然素不相識，不方便通過言語交流，但是彼此分享同一首歌曲，互相陪伴，產(chǎn)生共鳴，溫暖而美妙?！闭绻鲁堑脑姟堕T前》里的那句：“草在結(jié)它的種子，風(fēng)在搖它的葉子。我們站著，不說話，就十分美好”。
陌生人一起聽上線后一個月左右，我們和用研團(tuán)隊一起在杭州的幾個大學(xué)周邊進(jìn)行了用戶訪談，包括面訪和攔訪，在一線傾聽用戶的聲音。主要調(diào)研使用過一起聽用戶的使用情況、未使用過一起聽用戶對于一起聽的認(rèn)知情況，總結(jié)問題后為一起聽后續(xù)的功能迭代和運(yùn)營策略提供參考和建議。
根據(jù)調(diào)研結(jié)論，我們按照用戶使用一起聽前中后的順序?qū)栴}進(jìn)行排列，分析用戶的問題和痛點，確定了之后的優(yōu)化方向。
我們結(jié)合數(shù)據(jù)表現(xiàn)和用戶調(diào)研，計劃在接下來的迭代中實現(xiàn)更多有趣的玩兒法。首先亟待解決的是用戶聊天的需求。在熟人一起聽中，用戶一般使用微信作為聊天工具，一般不會考慮在云音樂里進(jìn)行聊天。當(dāng)陌生人一起聽上線后，能夠即時地與陌生人聊天就是一個最剛需的社交需求了。雖然云音樂已經(jīng)有私信功能可以供我們進(jìn)行復(fù)用，但是我們希望能夠?qū)⒁黄鹇爼r的聊天做得足夠輕量且能夠隨時觸達(dá)，以此來提高聊天功能的使用率。
設(shè)計過程中我們結(jié)合場景進(jìn)行思考和創(chuàng)新，經(jīng)過幾輪方案的篩選，最后大家對于一個問題產(chǎn)生爭論：是進(jìn)入聊天模式才可以收發(fā)消息呢？還是直接在播放頁展示消息，隨時聊天呢？
下圖中，方案1能夠減輕打擾，但是無法在播放頁第一時間看到對方發(fā)的消息。
方案2有一定的打擾，但是能夠第一時間看到消息，讓聽歌場景和聊天場景無縫銜接。
為了減少用戶的操作步驟，把功能做得輕量化，最終選擇了更加直接的方案2，同時為了避免打擾，每一方的消息氣泡的展示數(shù)量設(shè)置上限為2條，超過2條就會收起到記錄中。
下面的視頻是聊天的簡單演示，可以發(fā)現(xiàn)氣泡通過背景模糊來區(qū)分前后內(nèi)容，氣泡的出現(xiàn)和消失不改變黑膠頁的原有結(jié)構(gòu)。
很多人用社恐來自嘲，表達(dá)自己想與人社交，但是又存在邁出第一步的障礙。陌生人一起聽是一個匿名功能，很適合希望輕度社交的用戶。在匿名的基礎(chǔ)上，我們希望在聽歌過程中，能夠為用戶帶來更多輕量的、無壓力的社交方式，幫助希望社交的用戶逐漸熟悉彼此，找到志同道合的朋友。
個人信息逐步展示就是基于上述的需求誕生的創(chuàng)新功能。隨著匿名一起聽的進(jìn)程，用戶可以逐步解鎖對方的信息，一部分是雙方的共同信息用以產(chǎn)生共鳴，另一部分是對方的特色信息用以展示自身特點。在聽歌的過程中逐漸了解對方，最后決定是否揭面進(jìn)行更深度的交流。
首先，在共同信息的提示方式的設(shè)計上，我們并沒有簡單地用一個紅點去提醒用戶。而是用頭像的發(fā)光來表示共鳴的含義，頭像四周飄散的粒子來隱喻共同信息。讓每一處的設(shè)計都能貼合一起聽的風(fēng)格。
共同信息在一個浮層上展示，我們把當(dāng)前展示的信息控制為一個，通過上下滑動來切換。除了共同信息，用戶可以直觀地設(shè)置自己的狀態(tài)，讓自己更加像一個活生生的人。
當(dāng)完成一起聽后，會有一個結(jié)果頁來記錄聽歌過程中產(chǎn)生的各種數(shù)據(jù)。舊版的結(jié)果頁用戶反饋信息不夠豐富，分享欲望不強(qiáng)。
新的結(jié)果頁增加了雙方的相似度、聊天條數(shù)這些數(shù)據(jù)，并且根據(jù)這些數(shù)據(jù)不同，會生成一個表達(dá)關(guān)系的成語，顏色有對應(yīng)的變化。比如我們相似度很高，并且互發(fā)了很多條聊天消息的話，就會得到一拍即合的成語和紅色的結(jié)果頁。
與陌生人度過一段聽歌之旅很容易讓人產(chǎn)生分享欲，在社交媒體搜索一起聽可以發(fā)現(xiàn)很多用戶都用結(jié)果頁配圖發(fā)帖，并訴說自己與陌生人之間的互動故事。
一起聽經(jīng)過這兩次比較大的更新后，獲得一些不錯的成績。截止至2021年12月，周末的平均DAU數(shù)據(jù)從130W提升到了200萬，增量的70W中有大約30%來自于陌生人一起聽。在2021年3月的云音樂整體滿意度監(jiān)測中，22%的用戶表示自己經(jīng)常使用一起聽，滿意度得分4.66（滿分5分），在云音樂所有主要功能中居首位。
未來，我們會繼續(xù)一起聽的創(chuàng)新腳步，還有更多的可能性等待我們探索。希望未來能夠為用戶帶來更多元的一起聽體驗。最后，我想用下面的這張圖來結(jié)尾，它是同樣主打與陌生人社交和陪伴的游戲《光遇》的一張美宣圖，是我最近無意間在它的官網(wǎng)發(fā)現(xiàn)的。當(dāng)時看到這張圖后突然發(fā)現(xiàn)它和陌生人一起聽的入口介紹圖表達(dá)方式竟然這么接近。在這個溫馨的畫面里，代表“光”的白鳥圍繞著你和我正如音樂環(huán)繞著你和我，彼此陪伴、傳遞溫暖、分享喜悅~
藍(lán)藍(lán)設(shè)計的小編 http://www.bouu.cn
<span id="unvkg"></span>