數(shù)據(jù)保存是Web端工具的基礎(chǔ)功能，一般在產(chǎn)品和技術(shù)框架設(shè)計(jì)之初就已經(jīng)確定了數(shù)據(jù)保存的方式，后續(xù)不太會頻繁更改。
正因?yàn)槿绱?，在日常需求迭代中，設(shè)計(jì)師很容易忽略數(shù)據(jù)保存的過程，也很少質(zhì)疑當(dāng)前的保存機(jī)制是否合理，但是當(dāng)需要設(shè)計(jì)新模塊或產(chǎn)品時就會對保存有疑惑。
此外，保存也是一個受技術(shù)限制較大的領(lǐng)域，設(shè)計(jì)師需要對保存的技術(shù)類型有基礎(chǔ)認(rèn)知，因?yàn)樗鼤绊懕４嫔У倪壿嫼徒换バ问健?/span>
本文將會基于個人經(jīng)驗(yàn)，從設(shè)計(jì)表現(xiàn)和技術(shù)實(shí)現(xiàn)的角度聊聊Web端工具的數(shù)據(jù)保存。
對于Web端工具產(chǎn)品來說，保存的對象可分為「文件數(shù)據(jù)」、「設(shè)置數(shù)據(jù)」、「用戶行為數(shù)據(jù)」。
「文件數(shù)據(jù)」是相互獨(dú)立的內(nèi)容，比如酷家樂的一個方案、Figma的一個文檔都是文件數(shù)據(jù)，在文件A中觸發(fā)保存并不會影響到文件B。文件數(shù)據(jù)是最主要的用戶資產(chǎn)，若丟失會給用戶造成很大的損失。
「設(shè)置數(shù)據(jù)」分不同的維度，主要有用戶級別、組織級別、設(shè)備級別這三種。
用戶級別：數(shù)據(jù)保存在當(dāng)前用戶的賬號下，同一個用戶的所有文檔都會應(yīng)用該設(shè)置，比如酷家樂云設(shè)計(jì)工具的偏好設(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è)計(jì)來說至關(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è)置，例如記住選項(xiàng)狀態(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è)計(jì)工具目前采用的保存方式。這種自動保存能減少因軟件崩潰、斷電等特殊原因造成的數(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ù)實(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í)時保存只要數(shù)據(jù)發(fā)生改變，立即觸發(fā)自動保存，無需用戶手動保存（盡管一些產(chǎn)品考慮到用戶習(xí)慣，仍會保留手動保存的交互）。部分產(chǎn)品會用間隔幾秒鐘的自動保存（如 Microsoft 365），效果基本等同于實(shí)時保存。實(shí)時保存能最大程度避免數(shù)據(jù)丟失，是Web端工具理想的保存觸發(fā)方式。但因?yàn)榧夹g(shù)原因，并非所有工具都能夠做到實(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ā)保存，通常為點(diǎn)擊「保存」按鈕或快捷鍵。部分有實(shí)時保存機(jī)制的工具不需要額外的手動保存（如Figma），但對于沒有實(shí)時保存的工具來說，手動保存的設(shè)計(jì)至關(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)險(xiǎn)暴露給用戶，用戶可以選擇保存或者直接離開。如果用戶通過直接關(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í)時保存」保障性最好，在技術(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ù)原因無法采用「實(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)險(xiǎn)的時候需要提示用戶保存，可根據(jù)用戶的操作路徑選用工具自身的提示或?yàn)g覽器的提示。</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è)計(jì)<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è)計(jì)之前，先提出保存的 2 點(diǎn)設(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;">防錯</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ā)器是啟動一系列動作的原點(diǎn)，分為系統(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個點(diǎn)，何時觸發(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;">一個獨(dú)立工具一般只有一個保存觸發(fā)間隔設(shè)置，其間隔范圍很廣，可以是幾秒鐘、幾分鐘，甚至一個小時。一般會暴露給用戶設(shè)置。建議產(chǎn)品設(shè)計(jì)師根據(jù)技術(shù)現(xiàn)狀設(shè)定合理的時間，如果保存對性能有較大消耗，過于頻繁的保存也會影響用戶體驗(yàn)?？赏ㄟ^選擇器給用戶幾個合適的選項(xiàng)，選項(xiàng)之間的時間間隔依次變大，總選項(xiàng)數(shù)不超過 5 個。</span></span>
</p>
某設(shè)計(jì)工具偏好設(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è)計(jì)工具環(huán)境切換、新建樓層，水電工具的智能設(shè)計(jì)等，都會觸發(fā)方案保存。以下是一些常見的「條件觸發(fā)保存」時機(jī)，這些時機(jī)是由技術(shù)能力、業(yè)務(wù)要求共同決定的。設(shè)計(jì)師需要考慮如果這些時機(jī)觸發(fā)了自動保存，對用戶的操作會用什么影響。</span></span>
</p>
c.實(shí)時觸發(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）實(shí)現(xiàn)了實(shí)時觸發(fā)保存，對用戶來說可以不用再理解保存這個概念，是一種認(rèn)知上的減負(fù)，并且這種方式對數(shù)據(jù)保障的效果也最好。但是，仍然有設(shè)計(jì)師提出這種體驗(yàn)上的風(fēng)險(xiǎn)，比如沒有容錯余地、頻繁保存造成的干擾和系統(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ā)器」一般來說是一個保存按鈕。在沒有實(shí)時保存的創(chuàng)作類工具中，手動保存按鈕的設(shè)計(jì)至關(guān)重要，一般會放在界面上方較顯眼的位置，并設(shè)置快捷鍵 (Ctrl+S)，方便用戶操作。</span></span>
</p>
酷家樂云設(shè)計(jì)工具的保存位于頂部欄第一個分區(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;">而對于管理類工具，保存按鈕一般位于頁面下方，因?yàn)橛脩粢话銖捻撁嫔系较麓_認(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è)計(jì)
</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àn)橛脩魧Ρ４媸菦]有預(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ì)工具進(jìn)入施工圖時，因?yàn)榧夹g(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è)計(jì)保存異常反饋時，需注意以下 3 點(diǎn)：</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ù)，是否會因?yàn)榉呛诵哪K的保存異常而影響到整體用戶進(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è)計(jì)時，應(yīng)該如</span>何<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;background-color:#FFFFFF;">設(shè)計(jì)保存：</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)隊(duì)成員一起確定保存的位置（云端、瀏覽器）和保存的觸發(fā)機(jī)制（自動保存、手動保存、提示保存）。建議根據(jù)用戶流程在不同的觸點(diǎn)用不同的觸發(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è)計(jì)保存的交互，包含保存的觸發(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è)計(jì)保存兜底。</span></span>
</p>
作者：酷家樂UED 來源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
對于產(chǎn)品經(jīng)理、設(shè)計(jì)師和運(yùn)營人員，心理學(xué)都是必須要補(bǔ)的一門課程。
可能很多同學(xué)都犯過和小摹相同的錯誤——在各種商城放“神券”的時候屯一大堆專業(yè)書籍。實(shí)際上，心理學(xué)的書籍你大概只要看到第三本，就會發(fā)現(xiàn)翻來覆去講的就是那么幾個淺顯易懂的道理，而且大部分都是你在日常生活中就能觀察和感受到的。
基礎(chǔ)心理學(xué)（消費(fèi)者心理學(xué)，社會心理學(xué)，傳播和行為心理學(xué)等）的概念都不難，但如何精妙地運(yùn)用在自己的專業(yè)上則非?？简?yàn)使用者的功力。
為什么產(chǎn)品、設(shè)計(jì)、運(yùn)營都需要學(xué)習(xí)心理學(xué)？
因?yàn)樗麄児ぷ鞯谋举|(zhì)都是和“人”打交道——用產(chǎn)品方案、視覺內(nèi)容和活動規(guī)劃來影響用戶的決策、行為和心理。
你可能會覺得“依靠數(shù)據(jù)來統(tǒng)計(jì)用戶的行為再針對性決策”會更客觀，但實(shí)際上想得到靠譜的數(shù)據(jù)和正確的結(jié)論一點(diǎn)也不輕松，甚至很多公司根本不具備開展這類型調(diào)研的條件。
在這種情況下唯一的辦法還是洞察用戶并主動決策，此時基礎(chǔ)心理學(xué)原理就是你進(jìn)行判斷的重要依據(jù)。
本文為大家梳理了十大著名的心理學(xué)原理，這些概念來自于多本心理學(xué)的經(jīng)典名著，小摹進(jìn)行了適當(dāng)整合。
一、懷舊思維
簡單來說，就是人們在絕大部分時候都會遵循歷史慣性，更愿意相信過去的結(jié)論。
這也解釋了為什么現(xiàn)代商業(yè)中，品牌一直是一項(xiàng)核心競爭力：如果一個品牌曾經(jīng)贏得了消費(fèi)者的信任，那么消費(fèi)者往往愿意持續(xù)選擇這個品牌的產(chǎn)品。
在產(chǎn)品設(shè)計(jì)中，懷舊思維有著極其豐富的應(yīng)用場景。比如軟件產(chǎn)品的交互對于操作上的創(chuàng)新要非常慎重——快捷鍵、交互邏輯、界面布局等盡量和行業(yè)中主流產(chǎn)品一致，會更容易讓新用戶接受。
比如我們的原型設(shè)計(jì)工具“摹客RP”，界面布局借鑒了國外的UI工具Figma和Sketch。雖然產(chǎn)品主打的方向并不相同，但遵循業(yè)界已經(jīng)約定俗成的定式設(shè)計(jì)，在新用戶上手的角度有很大的優(yōu)勢。
二、暈輪效應(yīng)
暈輪效應(yīng)原指人際交往中，人身上表現(xiàn)出的某一方面的特征，掩蓋了其他特征，從而造成人際認(rèn)知的障礙。
比如有的老年人對青年人的個別缺點(diǎn)，或衣著打扮、生活習(xí)慣看不順眼，就認(rèn)為他們一定沒出息；有的青年人由于傾慕朋友的某一可愛之處，就會把他看得處處可愛，真所謂"一俊遮百丑"。
暈輪效應(yīng)是一種以偏概全的主觀心理臆測，和上面的懷舊思維類似，屬于一種思維的定式，因?yàn)檫@種方式大腦在決策時會更輕松。
對于產(chǎn)品規(guī)劃者，尤其要想清楚自己的核心優(yōu)勢和賣點(diǎn)是什么，不必完美主義地去追求面面俱到，因?yàn)槿绻钔怀龅膬?yōu)點(diǎn)能打動用戶，即使有缺點(diǎn)也很容易被用戶忽略。
三、習(xí)得性無助
簡單地說，如果用戶在過程中產(chǎn)生了“無論如何都無法改變現(xiàn)狀”的感受，容易陷入深深的絕望和悲哀。
在實(shí)驗(yàn)中，經(jīng)過訓(xùn)練的狗本可以逃避實(shí)驗(yàn)者加于它的電擊。但是，如果狗以前受到過不可預(yù)期（不知道什么時候到來）且不可控制的電擊（如電擊的中斷與否不依賴于狗的行為），他們就會徹底躺平并不再逃離。
狗之所以表現(xiàn)出這種狀況，是由于在實(shí)驗(yà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ī)率
其實(shí)用一個成語就可以形容這個規(guī)律：得寸進(jìn)尺。在實(shí)際場景中，只要想辦法讓用戶先接受了一個小要求，之后就更可能讓他接受一項(xiàng)更大、更不合意的要求。
原始的實(shí)驗(yàn)中，心理學(xué)家讓兩位大學(xué)生訪問郊區(qū)的一些家庭主婦。其中一位首先請求家庭主婦將一個小標(biāo)簽貼在窗戶（這是一個小的、無害的要求）。
兩周后，另一位大學(xué)生再次訪問家庭主婦，要求她們在院內(nèi)豎立一個呼吁安全駕駛的大招牌（該招牌很不美觀，這是一個大要求）。
結(jié)果答應(yīng)了第一項(xiàng)請求的人中有55％的人接受這項(xiàng)要求，而那些第一次沒被訪問的家庭主婦中只有17％的人接受了該要求。
這個實(shí)驗(yàn)說明，如果想要用戶達(dá)到最終的目標(biāo)，可以先適當(dāng)設(shè)置一些和最終目標(biāo)相關(guān)，但完成難度小得多的目標(biāo)，循序漸進(jìn)地引導(dǎo)，可以大大提升轉(zhuǎn)化率。
這種原理在各種產(chǎn)品的銷售的場景的可謂是遍地開花。
比如汽車、不動產(chǎn)等高價的商品，往往會給打出“來訪即送好禮”的方式吸引用戶前往，然后通過用戶試駕、樣板房體驗(yàn)等環(huán)節(jié)引導(dǎo)用戶去體驗(yàn)和接納，客戶有意向后，也只會要求付定金（而不是全款）......這樣繁復(fù)的流程都是為了把困難的目標(biāo)拆解得更細(xì)小。
五、主觀性證詞
心理學(xué)研究表明，很多證人提供的證詞都不太準(zhǔn)確，或者說是具有明顯的個人觀點(diǎn)、傾向性和意識。甚至，證人對他們的證詞的信心和證詞的準(zhǔn)確性沒有足夠的相關(guān)性。
結(jié)合這個原理，就能更好地理解為什么問卷或是訪談等經(jīng)典的調(diào)研方法并不一定能收集到足夠準(zhǔn)確的信息，對于一些主觀性較強(qiáng)的問題，個人的傾向會極大的影響答案的可信度。
正確的做法是，盡量避免在調(diào)研中出現(xiàn)主觀性過強(qiáng)的題目，如果無法避免，盡量將題目拆解為多項(xiàng)能被客觀量化或評估的問題。如果沒有考慮用戶本身對于產(chǎn)品的傾向性，很可能被言過其實(shí)的“證詞”誤導(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)頭羊時，你也能更輕易地獲得比弱小的同行更大的收益。而若沒有實(shí)力迅速在某個領(lǐng)域做大，就要不停地尋找新的發(fā)展領(lǐng)域，才能保證獲得較好的回報(bào)。
七、從眾行為
營銷和促銷手段中最重要心理原理之一，即：人們更容易相信被多數(shù)人接受的選擇。
我們經(jīng)?？梢钥吹铰愤厓杉也蛷d，一家門口排滿了等待的食客，另一家卻一桌客人都沒有，巨大的反差往往讓后面到來的客人寧愿等待也要選擇人多的餐廳。
關(guān)于這種心理，哲學(xué)家認(rèn)為是人類理性的有限性，社會學(xué)家認(rèn)為是人類的集體無意識，而經(jīng)濟(jì)學(xué)家則從信息不完全、委托代理等角度來解釋。但需要特別注意的是，從眾行為并非絕對的，因?yàn)樵谧非髠€人喜好上，人類往往也有很多個性的需求，從眾行為和個性追求往往是同時存在的。
從眾行為最典型的應(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)用比較心理，因?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à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ī)。
了解這一點(diǎn)對于產(chǎn)品的策劃者們非常重要：用戶的想法很可能和自己不同（即便你認(rèn)為自己在這個領(lǐng)域比其他人都專業(yè)得多），但仍然需要被尊重。
所以近年來特別流行用戶體驗(yàn)、同理心這樣的詞匯，產(chǎn)品應(yīng)該以真實(shí)用戶的體驗(yàn)滿意度作為參考指標(biāo)，設(shè)計(jì)者應(yīng)該盡可能地以設(shè)想自己是一個目標(biāo)用戶時，會有什么反應(yīng)，否則僅靠自己的“臆測”，創(chuàng)造出來的產(chǎn)品很可能和真實(shí)需求脫節(jié)。
十、賭博心理
以小博大的感覺是一種強(qiáng)上癮體驗(yàn)，人們只有在輸?shù)臅r候才想到離開，少有在贏的時候離開。這個就是賭場盈利的本質(zhì)模式。
由于真金白銀賭博是法律明令禁止的，所以產(chǎn)品設(shè)計(jì)角度一般都是借助積分、代幣等方式來給用戶制造“抽獎”的機(jī)會。
對于國內(nèi)而言，氪金手游和盲盒就是典型的兩種應(yīng)用場景，前者往往會設(shè)定一個極低的概率讓玩家獲得珍貴的虛擬物品，后者則是讓消費(fèi)者有小概率獲得稀有款式的手辦，引誘顧客購買超過自己需求的商品。
對于產(chǎn)品設(shè)計(jì)人員來講，賭博機(jī)制可以說是一個潘多拉魔盒，通常不建議去使用和嘗試。人人都愛KPI，但也要取之有道，職場人都應(yīng)該有自己的底線。
作者：jongde來源： 站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
在日常使用移動端或PC端產(chǎn)品時，不知你有沒有這樣的體會？
推薦一個比較實(shí)用的設(shè)計(jì)法則，這個法則已經(jīng)有很多的文章說明了，可以說現(xiàn)在的任何互聯(lián)網(wǎng)產(chǎn)品都能看到這些理論的實(shí)踐，本次主要想以比較多的案列進(jìn)行實(shí)戰(zhàn)分析。
尼爾森的十大可用性原則是尼爾森博士在分析了兩百多個可用性問題的基礎(chǔ)上，提煉出的十項(xiàng)交互設(shè)計(jì)原則。被廣泛運(yùn)用于網(wǎng)頁、APP以及各種人機(jī)交互領(lǐng)域。
要注意的是，這10項(xiàng)原則是啟發(fā)式（heuristics）的、廣泛的經(jīng)驗(yàn)法則，可以指導(dǎo)我們更具價值的思考界面設(shè)計(jì)。
設(shè)計(jì)原則都可靈活運(yùn)用于各個地方,可以是交互設(shè)計(jì),也可以是界面設(shè)計(jì),深入了解各種設(shè)計(jì)原則,讓設(shè)計(jì)師在做設(shè)計(jì)的時候可以找到更好的解決方案,提高用戶的使用體驗(yàn)。
雅各布·尼爾森（Jakob Nielsen）是畢業(yè)于哥本哈根的丹麥技術(shù)大學(xué)的人機(jī)交互博士，被譽(yù)為可用性測試的鼻祖，2006年4月，并被納入美國計(jì)算機(jī)學(xué)會人機(jī)交互學(xué)院，被賦予人機(jī)交互實(shí)踐的終身成就獎。
尼爾森于1995年1月1日發(fā)表了「十大可用性原則」，該原則被廣大設(shè)計(jì)師奉為教科書般的存在。雖然20多年過去了，但是對于現(xiàn)今的產(chǎn)品體驗(yàn)設(shè)計(jì)仍然具有很大的參考意義。
人機(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)立刻提供反饋，告訴用戶該項(xiàng)操作被系統(tǒng)接受，讓用戶對操作感知及判斷。
告訴用戶處在系統(tǒng)的什么位置，特別是對于新用戶，需要提供必要的信息，否則容易迷惑。比如：導(dǎo)航菜單、面包屑、標(biāo)簽頁、步驟條、分頁器等等。
相比于C端產(chǎn)品，B端產(chǎn)品在頁面層級往往更為復(fù)雜。因此，讓用戶明確當(dāng)前所處的位置尤為重要，這也就突顯出了導(dǎo)航的重要性。設(shè)計(jì)師在設(shè)計(jì)的過程中，要注意提供上下文線索，避免用戶迷路。
告知用戶系統(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è)計(jì)的最基本準(zhǔn)則。當(dāng)用戶在與系統(tǒng)進(jìn)行交互時，應(yīng)當(dāng)在各個階段為用戶提供必要、積極且即時的反饋，同時也要避免過度反饋打擾用戶?？梢允褂玫男问桨ǖ痪窒抻冢?/span>
操作反饋：點(diǎn)擊頁面跳轉(zhuǎn)、按鈕點(diǎ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、提交表單時，如果校驗(yàn)失敗，則在填寫有誤的內(nèi)容旁邊提示錯誤原因；2、程序未響應(yīng)時，系統(tǒng)會讓用戶選擇是關(guān)閉程序還是等待程序響應(yīng)；
系統(tǒng)應(yīng)該在合理的時間內(nèi)，給予用戶適當(dāng)?shù)姆答仯層脩袅私庹诎l(fā)生的事情。
當(dāng)系統(tǒng)反饋時間小于1秒，通常正常反饋即可；相反長于1秒時，我們通常會通過加載動畫、占位符、分步加載等方式，減緩用戶等待的焦慮感。如果超過10秒還沒有得到相應(yīng)，那么通常會認(rèn)為這次請求是失敗的，需要給用戶失敗提示。
例如：下載提示、刷新提示、支付提示、新頁面加載提示等。
系統(tǒng)盡可能貼切用戶所在的真實(shí)環(huán)境。把復(fù)雜的系統(tǒng)語言換成用戶看得懂的語言；環(huán)境貼切原則的根本目標(biāo)是讓用戶可以快速上手產(chǎn)品，降低學(xué)習(xí)成本。
《iPhone人機(jī)交互指南》里提到的隱喻與擬物化是很好的實(shí)踐。此外，還應(yīng)該使用易懂和約定俗成的表達(dá)。
這里說的語言不僅僅包括文案層面的語言，還包括產(chǎn)品的設(shè)計(jì)語言（圖形、配色、風(fēng)格、動效、手勢等）設(shè)計(jì)語言都應(yīng)該是易于用戶理解和認(rèn)知的。產(chǎn)品使用的語言應(yīng)該是目標(biāo)用戶能夠清晰理解的。如果用戶不能理解，他們會感到被忽視和受挫敗，許多人將選擇其他產(chǎn)品完成目標(biāo)。
從設(shè)計(jì)心理學(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)出錯了頁面，一堆亂碼，看不懂又很慌張，就很不友好。另外還有一點(diǎn)，很多大公司的app都會針對他們不同國家的用戶群體進(jìn)行各種語言的翻譯處理。
為了照顧不同國家的用戶的使用習(xí)慣對頁面結(jié)構(gòu)布局，風(fēng)格，語言，字體，包括交互方式都會做特殊處理。這就是場景貼合原則。
模仿現(xiàn)實(shí)世界的產(chǎn)品或者使用映射，能夠利用人們現(xiàn)有的知識，可以顯著的降低用戶的認(rèn)知和學(xué)習(xí)困難，并增加他們的使用興趣。
比較好的案例就是iOS原生的計(jì)算器、指南針，微信紅包都是模仿了現(xiàn)實(shí)世界的產(chǎn)品。
從現(xiàn)實(shí)世界中借鑒的設(shè)計(jì)元素可明顯降低用戶的認(rèn)知和學(xué)習(xí)難度，并且增加興趣。最有代表性的就是網(wǎng)易云的音樂播放界面圖形隱喻表達(dá)。美團(tuán)APP的母嬰類目icon的設(shè)計(jì)非常有趣，且非常容易理解和使用，讓人印象深刻。
使用的操作手勢，應(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è)計(jì)上，防止用戶常見的誤操作。比如很多產(chǎn)品在涉及到內(nèi)容的刪除操作時，經(jīng)常會有彈窗提醒，讓用戶再次確認(rèn)。這樣是防止用戶誤操作帶來的刪除損失。用戶不用因?yàn)椴僮鲙硇睦碡?fù)擔(dān)，從而提升操作可控性。
比如iPhone ios系統(tǒng)：
1、常見的二次確認(rèn)主要可以通過以下方式實(shí)現(xiàn)：通過文字提示，用戶閱讀后點(diǎn)擊是與否來進(jìn)行下一步；
2、通過動作，用戶通過輸入特定字符或者完成驗(yàn)證碼拖拽等操作才可進(jìn)行下一步操作；
3、通過身份校驗(yàn)，用戶需要提交個人身份信息以完成校驗(yàn)；
整個系統(tǒng)要保持產(chǎn)品結(jié)構(gòu)架構(gòu)、導(dǎo)航、用語、色彩、操作行為交互的一致性與標(biāo)準(zhǔn)性，遵循平臺慣例與行業(yè)標(biāo)準(zhǔn)。我們在設(shè)計(jì)中常見的制作平臺規(guī)范，其實(shí)就是為了保證平臺設(shè)計(jì)的一致性。
一致性原則的根本目的是保證產(chǎn)品的專業(yè)性，給用戶帶去統(tǒng)一的體驗(yàn)感受。
遵循產(chǎn)品內(nèi)部的慣例，可幫助用戶快速學(xué)習(xí)使用產(chǎn)品功能。產(chǎn)品內(nèi)部的一致性包含：產(chǎn)品功能框架、文字、設(shè)計(jì)風(fēng)格、布局、反饋等等。
比如：小熊藝術(shù)app，一款針對孩子學(xué)習(xí)美術(shù)的app，不管是首頁、個人中心以及加載等頁面，風(fēng)格保持一致性都是主打清新黃色+可愛icon。黃色小熊更是在不同的合適的時機(jī)出現(xiàn)，banner、加載，課程動畫中等。不僅風(fēng)格一致性、布局、反饋等產(chǎn)品內(nèi)部保持一致性，也形成了統(tǒng)一的品牌傳達(dá)。
但是，有時候?yàn)榱诉_(dá)到產(chǎn)品目標(biāo)，偶爾也會故意采用不一致的設(shè)計(jì)。
比如：常見的對話框都將“確定”按鈕放在右邊位置，所以用戶在操作時，很容易產(chǎn)生條件反射，順手點(diǎn)擊右邊按鈕，然后才突然發(fā)現(xiàn)自己點(diǎn)錯了。雖然看起來有些別扭甚至很多人不喜歡，但是很有效，這種設(shè)計(jì)在軟件卸載、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)品體驗(yàn)上會造成很大的干擾。
比如微信的多年的迭代，底部tab功能一直都是這樣，主要功能入口一致沒有變化，就體現(xiàn)了迭代產(chǎn)品的一致性。
Office軟件中包含的各個產(chǎn)品，其界面布局和設(shè)計(jì)風(fēng)格都保持了高度一致，如下圖所示是PowerPoint和Word的界面，可以看出，二者的“插入”一級菜單下所包含功能的排列順序、布局方式乃至圖標(biāo)圖形，都是高度類似的。
遵循統(tǒng)一的產(chǎn)品設(shè)計(jì)規(guī)范／邏輯。這里的一致性包含產(chǎn)品和跨平臺產(chǎn)品之間的一致性。確保整個系統(tǒng)的結(jié)構(gòu)一致性、色彩一致性、操作一致性、反饋一致性、同種組件樣式保持一致等設(shè)計(jì)語言都遵循同一套設(shè)計(jì)規(guī)則。
比如，產(chǎn)品內(nèi)相同顏色的反復(fù)出現(xiàn)，為產(chǎn)品打造視覺錘符號，強(qiáng)化產(chǎn)品在用戶心中的記憶點(diǎn)。符合平臺設(shè)計(jì)規(guī)范，
蘋果系統(tǒng)參照人機(jī)交互設(shè)計(jì)指南設(shè)計(jì)規(guī)范，安卓系統(tǒng)參照Material Design設(shè)計(jì)規(guī)范，或者直接參照自己團(tuán)隊(duì)的的設(shè)計(jì)規(guī)范，應(yīng)該遵循慣例，并且保持系統(tǒng)的一致感，不要盲目地標(biāo)新立異。
不知道你發(fā)現(xiàn)了沒，現(xiàn)在的電商、音樂、社交等等app越來越一樣了，一樣的交互，一樣的排版設(shè)計(jì)，基本上都遵循著類似的交互邏輯和視覺元素。
與業(yè)內(nèi)產(chǎn)品保持一致，意味著用戶不再需要重新學(xué)習(xí)，就可以在各種應(yīng)用中自由切換，用戶學(xué)習(xí)成本的降低，也意味著我們獲客成本從某種程度上被降低。而這些約定俗成的規(guī)則和流程都被用戶不自覺地印刻在大腦中，成為一種自然的習(xí)慣，而獨(dú)特的設(shè)計(jì)，截然不同的規(guī)則，則常常會成為習(xí)慣以外的東西，引起混亂，讓初次上手的用戶感到受挫和沮喪。
如，在App底部的導(dǎo)航圖標(biāo)中，“首頁”永遠(yuǎn)排在第一個，個人中心（“我的”）永遠(yuǎn)排在最后。并且對于類似“首頁”“購物車”“訂單”等常見按鈕，不同App的設(shè)計(jì)樣式都非常相似。如下圖三個不同音樂app的對比圖：
如果你特立獨(dú)行地把個人中心放在第一個位置，或者采用奇怪的圖標(biāo)作為個人中心的icon，用戶使用時肯定會覺得別扭。
防錯原則的根本目標(biāo)是阻止錯誤行為，避免進(jìn)一步犯錯，指引用戶正確的完成操作行為。
「防止錯誤」主要分為三個階段：錯誤行動發(fā)生前，引導(dǎo)用戶向正確的方向前進(jìn)；用戶觸碰到危險(xiǎn)操作時給予提示；危險(xiǎn)操作發(fā)生之后，提供撤回的入口。
比一個優(yōu)秀的錯誤提醒彈窗更好的設(shè)計(jì)方式，是在這個錯誤發(fā)生之前就避免它。它可以幫助用戶排除一些容易出錯的情況，或在用戶提交之前給他一個確認(rèn)的選項(xiàng)。
通常情況下，按鈕置灰表示對應(yīng)功能或操作無法使用，這也是防止錯誤的一條有效途徑，因?yàn)橛脩敉ㄟ^按鈕樣式就可獲知其狀態(tài)，提前規(guī)避無效的提交操作。當(dāng)然，不是只要功能或操作無法使用時，就應(yīng)該將對應(yīng)的按鈕置灰。其實(shí)更好的做法是填寫完標(biāo)題后按鈕不置灰，點(diǎn)擊完成按鈕后定位或高亮必填項(xiàng)，讓用戶更容易識別錯誤點(diǎn)。
比如在登錄時，只有輸出信息后才可以點(diǎn)擊登錄按鈕，未輸入信息時，按鈕是不可以點(diǎn)擊的狀態(tài)。通過系統(tǒng)主動對用戶進(jìn)行操作限制，幫助用戶避免發(fā)生錯誤。
限制用戶的選擇并不是一個好主意，但是如果有明確的規(guī)則來定義可接受的選項(xiàng)，那么限制用戶可以輸入的類型是一個很好的策略。再比如輸入驗(yàn)證碼頁面，為了防止用戶多輸入或者少輸入驗(yàn)證碼，只給到四個輸入框，讓用戶只能輸入四位數(shù)字，減少輸入錯誤的幾率。
提供清晰的提示，防止用戶犯錯，提示包括標(biāo)簽、文字、顏色、以及反饋狀態(tài)等。利用顏色，動效提供警示信息，比如常見的微信退出的按鈕是紅色的，狀態(tài)未完成的標(biāo)簽是紅色的等等。
如：表單填寫過程中讓用戶及時知道輸入格式，出錯原因，避免填寫完成后再提醒，浪費(fèi)用戶時間。
范圍限制：限制用戶的選擇并不是一個好主意，但是如果有明確的規(guī)則來定義可接受的選項(xiàng)，那么限制用戶可以輸入的類型是一個很好的策略。比如：電影購票時，已購買的位子不會再提供選擇，很好的避免了買重的問題
特別要注意在用戶操作具有毀滅性結(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)行記憶，通過使元素、操作和選項(xiàng)可見，減少用戶的記憶負(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è)計(jì)的時候，需要清晰的視覺層次結(jié)構(gòu)，突出重點(diǎn)，弱化和剔除無關(guān)信息，降低頁面干擾，來減輕用戶閱讀成本。
比起讓用戶輸入，讓用戶選擇更能降低用戶的記憶成本，更好地輔助用戶做決策。如果，有很多的信息或者選項(xiàng)是用戶高頻率會選擇的，設(shè)計(jì)師不妨給用戶提前做好選擇，提供默認(rèn)選項(xiàng)，如下圖：
通過智能讀取用戶之前填寫過的信息，或者智能識別等形式，減少用戶記憶負(fù)擔(dān)與操作負(fù)擔(dān)。
常見的是寄快遞-新增地址，將用戶復(fù)制的文本字符類型進(jìn)行識別并匹配，將有用的信息內(nèi)容提取出來，對體驗(yàn)而言顯得高效又智能。
或者淘寶購物確認(rèn)訂單時，系統(tǒng)會自動為你帶入之前的商品信息，包括選擇的商品規(guī)則、數(shù)量、價格、默認(rèn)記錄顯示常用的地址等。這些信息雖然之前都選擇過，但是需要用戶在購買前二次確認(rèn)，由于信息比較多，用戶很難記憶，所以確認(rèn)訂單再展示出來更加合理。
比如：用手機(jī)登錄時，收到的驗(yàn)證碼直接展示在軟鍵盤上，用戶無需記憶也無需輸入，直接點(diǎn)選即可登錄；
美團(tuán)APP中，當(dāng)用戶選擇商品時，系統(tǒng)會自動計(jì)算商品價格和滿減后的價格，還會幫用戶記錄選擇了哪些商品以及份數(shù)，不需要用戶自己花時間去計(jì)算還差多少才能滿減等，減少用戶記憶負(fù)擔(dān)，同時節(jié)省用戶點(diǎn)外賣的時間，這也用到了易取原則。
訂單頁面若某信息需要用戶從一個頁面復(fù)制到另一個頁面完成查詢或編輯輸入，那就有必要為該信息提供快捷復(fù)制功能，如訂單號緊跟著一個復(fù)制按鈕。
我們在搜索一個歌名的時候，記不住完整的歌曲名，我們只要輸入關(guān)鍵的幾個詞，系統(tǒng)就是幫助我們記憶，出現(xiàn)相關(guān)的搜索。
作為用戶，你不記得的操作，系統(tǒng)可以幫你記錄。為用戶提供歷史記錄，文本創(chuàng)作的過程中自動保存草稿，讓用戶方便查詢自己的進(jìn)程，這就是信息易取原則的設(shè)計(jì)。
保留歷史，最為常見的就是為用戶保留歷史搜索和歷史瀏覽、儲存賬號和密碼。視頻APP會詳細(xì)記錄用戶的觀看記錄，當(dāng)用戶沒有看完某部電影時，下次進(jìn)入直接從斷點(diǎn)續(xù)播上次播放的位置，無需用戶記憶上次看到哪里了；
不只是觀看記錄，視頻軟件還會幫你記錄同一賬號在不同設(shè)備上的登錄記錄，觀看記錄也會在不同設(shè)備之間進(jìn)行同步。
將選擇的對象，動作，選項(xiàng)可視化，讓用戶一看就懂。注意圖標(biāo)符號化能讓人理解，避免引起誤解。
抽象圖形+文字，提供了更多的信息，更加豐富了記憶效果，避免了用戶需要記憶才能想起圖形代表的含義。我們常用的app導(dǎo)航欄都是以這種icon和文字相結(jié)合的形式，這就是很符合易取原則的例子。
在用戶使用產(chǎn)品的過程中，會有一些需要用戶記憶的內(nèi)容、或者操作路徑，在設(shè)計(jì)的時候我們要避免用戶記憶，把信息直接提取出來，送到用戶手里。同時每個頁面?zhèn)鬟f的信息量盡量少，減少用戶的閱讀壓力。
常見的例子是各類優(yōu)惠券，設(shè)計(jì)的時候會有明確的位置說明限制時間，類別等等，同時還會有清晰的入口引導(dǎo)去使用或者規(guī)則的入口。
這一點(diǎn)其實(shí)也非常好理解，一個簡單的動作，比打字要輕松得多，常見的就是在設(shè)備解鎖的時候，用手勢解鎖替代密碼解鎖。
隨著技術(shù)發(fā)展，有了更多的行為代替輸入的方式，比如指紋識別和面部識別，用簡單的操作，就可以達(dá)到進(jìn)入系統(tǒng)的目的，這就避免了用戶需要較多的操作和密碼的記憶。
靈活易用原則不僅是一個交互設(shè)計(jì)原則，也代表了一種軟件產(chǎn)品設(shè)計(jì)理念：系統(tǒng)既要做得簡單、易用，讓所有用戶用起來得心應(yīng)手；
靈活易用原則的根本目標(biāo)是保持系統(tǒng)的靈活性，以滿足不同用戶的不同需求。既要提供必要的幫助，讓剛?cè)腴T的初級用戶順利上手，還需要支持靈活的個性化定制，讓高級用戶能夠快捷高效使用高頻功能，充分發(fā)揮其價值。
讓用戶靈活定制的最典型的例子是各類軟件和App的配置功能，基本上所有軟件都會提供定制化功能，從快捷鍵設(shè)置，到頁面布局，再到自定義參數(shù)，軟件系統(tǒng)會盡量提供全面的個性化設(shè)置功能，來滿足不同用戶的使用訴求和習(xí)慣，提升用戶的使用效率和體驗(yàn)。
例如支付寶首頁，用戶可以自定義首頁的應(yīng)用。對于使用頻率比較高的老用戶來說，這是一個非常方便的功能。
還有一種是系統(tǒng)更具用戶常用自動整理歸納，以提升使用效率，減少用戶多余操作。
比如：微信的聊天表情，由于可以選擇的表情很多，正常情況下用戶很難快速找到自己想用的表情。而用戶的使用習(xí)慣往往是循環(huán)使用其中的某幾個，所以把最近使用的表情展現(xiàn)出來，會極大的提升用戶的尋找效率。
除了從新老用戶的角度對用戶做區(qū)分，還可以從其他維度區(qū)分用戶，針對不同用戶做不同的功能。比如：微信為了讓中老年用戶使用方便，推出了關(guān)懷模式。在關(guān)懷模式下（下圖）文字更大、色彩更強(qiáng)、按鈕更大，還可以使用“聽文字消息”的功能。這些功能充分考慮了“中老年用戶”的需求和痛點(diǎn)，讓產(chǎn)品更加靈活易用。
靈活高效原則在交互設(shè)計(jì)中使用會提高用戶使用效率，例如微信聊天頁面中，當(dāng)用戶輸入某個字詞之后，系統(tǒng)會自動幫你匹配相應(yīng)的表情包；
當(dāng)你輸入某個詞之后，輸入法會幫你自動聯(lián)想接下來你可能會輸入的詞；截圖后進(jìn)入微信聊天頁面后，系統(tǒng)會將你剛截的圖前置，它會自動判斷你可能想發(fā)送該截圖。如下圖：
通過用戶快捷跳過的入口，比如常見的：引導(dǎo)頁、操作手冊、還是開屏廣告，有“跳過”或者”立即進(jìn)入“按鈕真的很貼心。
對于用戶頻繁使用的部分，提供快捷的重復(fù)使用操作，比如：外賣app，用戶可以快捷地再來一單，同時保存上一次操作記錄。
在設(shè)計(jì)功能時，最好能考慮到不同層次用戶的需求，以此來讓用戶「各取所需」（需要平臺有多類型用戶）；比如常見的Word、Photoshop等，有一個“二八定律”，就是說80%的功能是給20%的用戶使用的。
設(shè)計(jì)這類產(chǎn)品時，最常用的20%的功能一定擺在最顯著的位置上，方便所有用戶使用，而80%的高端功能，要適度隱藏，使得整個產(chǎn)品看起來盡量簡潔、美觀。比如Sketch的工具欄和快捷鍵就是給新手或資深用戶準(zhǔn)備的。
淘寶的首頁每個人推薦的商品都不相同，淘寶后臺根據(jù)用戶的瀏覽習(xí)慣，購買/收藏記錄等大數(shù)據(jù)智能判斷用戶的喜好，對商品進(jìn)行千人千面的分發(fā)。
但是切記不要太過依賴大數(shù)據(jù)算法的判斷，因?yàn)橐坏┬纬蛇@種模式，會給用戶造成回音壁效應(yīng)，你越喜歡的東西系統(tǒng)就越給你推薦，其他的商品就像回音壁一樣被吸收過濾，用戶永遠(yuǎn)沒有辦法發(fā)現(xiàn)新的東西，讓用戶的選擇永遠(yuǎn)都在一個死循環(huán)，所以做千人千面設(shè)計(jì)時一定要適度。
優(yōu)美而簡約原則的根本目標(biāo)是讓用戶快速找到界面的重要信息，引導(dǎo)用戶的視線及操作行為。
UI設(shè)計(jì)應(yīng)該是符合大眾審美的，不需要多么酷炫，而是需要我們注重信息獲取效率，更加聚焦內(nèi)容，刪除多余的視覺表達(dá)元素，讓界面保持美觀簡約。
“快掃”是互聯(lián)網(wǎng)用戶瀏覽的主要方式。我們熟知的產(chǎn)品設(shè)計(jì)的四大基本原則：親密性、對齊、重復(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è)計(jì)除了配置插圖還會有提示文案與操作按鈕，引導(dǎo)用戶去操作，去進(jìn)一步解決問題。
系統(tǒng)能幫助用戶自動甄別錯誤，并及時進(jìn)行糾正時，將會給用戶帶來極大的便利，撤銷或者找回功能，都是幫用戶把損失降到最低的有效方法。
比如微信信息的消息撤回重新編輯，相冊的最近刪除、回收站等等功能。
人性化幫助原則的根本目標(biāo)是用戶在使用產(chǎn)品的過程中有所依循，因?yàn)楫a(chǎn)品已經(jīng)貼心地為他們準(zhǔn)備好了幫助方式，或者即時提示和反饋，或者客服。
人性化幫助用戶最好的方式分別為：1、無需提示；2、一次性提示；3、常駐提示；4、幫助文檔。
最好的就是沒有提示，用戶就能看懂與應(yīng)用產(chǎn)品；其次是一次性提示，提示一次用戶就懂如何使用，比如第一次進(jìn)入app或新功能上線的引導(dǎo)設(shè)計(jì)、通常為氣泡形式。常駐提示需要一直固定在某個位置實(shí)時幫助用戶。
最后就是幫助文檔了，一般用于解釋規(guī)則或者熱點(diǎn)問題，通常以超鏈接的形式存在于頁面中，或者以集合形式位于設(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è)計(jì)，可以幫助用戶快速學(xué)習(xí)使用，而不用閱讀、理解復(fù)雜的說明文檔。
然而，B端產(chǎn)品的復(fù)雜性比C端產(chǎn)品高很多，因?yàn)锽端產(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è)計(jì)人員要盡量在前端交互上做好引導(dǎo)提示，對于復(fù)雜的規(guī)則和邏輯，可以考慮通過幫助文檔來指導(dǎo)用戶。
尼爾森十大可用性原則可靈活運(yùn)用于各個地方，可以是交互設(shè)計(jì)，也可以是界面設(shè)計(jì)，深入了解該設(shè)計(jì)原則，可以找到更好的解決方案，提高用戶的使用體驗(yàn)。要注意的是，這10項(xiàng)原則是啟發(fā)式（heuristics）的、廣泛的經(jīng)驗(yàn)法則，而不是具體的規(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è)計(jì)語言一致、業(yè)內(nèi)產(chǎn)品一致；
5、防錯原則：操作前預(yù)警、操作中確認(rèn)、操作后可撤回；
6、易取原則：易掃描、智能獲取、草稿箱和歷史記錄、對象可視化、選擇代替輸入；
7、靈活高效原則：靈活配置、允許頻繁操作、各取所需；
8、優(yōu)美而簡約原則：視覺層次明顯、簡約且突出重點(diǎn)信息；
9、容錯原則：幫助用戶識別、診斷，并從錯誤中恢復(fù)提供方法；
10、人性化幫助原則：無需提示、一次性提示、常駐提示、幫助文檔。
我準(zhǔn)備了一些常用的設(shè)計(jì)素材送給大家，需要的話免費(fèi)拿走。獲取方式：老規(guī)矩公眾號后臺，發(fā)送文字“素材”，就可以獲取了～
文中如有不嚴(yán)謹(jǐn)?shù)牡胤较Ｍ蠹医o予指正，希望大家可以多多點(diǎn)贊評論鼓勵一下，最后感謝你的耐心閱讀。
今天與大家分享的是關(guān)于B端頁面中篩選區(qū)的功能設(shè)計(jì)，本文會從篩選的展現(xiàn)形式、布局、反饋、設(shè)計(jì)中遇到的問題以及設(shè)計(jì)思考這幾個方面進(jìn)行講述。
篩選，也可以稱作過濾器，它屬于搜索框架的一部分主要用于內(nèi)容提取，將一類數(shù)據(jù)展示，同時一類數(shù)據(jù)隱藏，可以整合很多的組件。
在B端產(chǎn)品設(shè)計(jì)中，篩選區(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è)計(jì)中，搜索是通過指定任意條件，系統(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)點(diǎn)：搜索準(zhǔn)確率高，所要即所得。
缺點(diǎn)：需要用戶自己輸入，然后進(jìn)行查詢。需要記憶搜索詳細(xì)信息。輸入框需要有提示輸入的內(nèi)容，方便用戶填寫，以及確認(rèn)輸入的類別或格式。
適用場景：適用于用戶有清晰的目標(biāo)，同時需要有查詢/搜索按鈕，來執(zhí)行篩選。搜索需要配合篩選固有類一起使用。
模糊搜索
優(yōu)點(diǎn)：模糊搜索可以用于搜索關(guān)鍵字的同義詞，提高搜索的精確性。字段匹配推薦搜索結(jié)果，減少記憶負(fù)擔(dān)，適用于不明確的信息篩選。
缺點(diǎn)：篩選出很多類似相關(guān)的內(nèi)容，需要查找鑒別所要內(nèi)容，不便捷。
適用場景：用戶對目標(biāo)模糊，模糊是指不用關(guān)心輸入了什么格式，哪怕錯了，系統(tǒng)也會推薦給用戶相對正確的；用戶需要瀏覽操作過濾器提供的信息來輔助篩選達(dá)到目標(biāo)。搜索需要配合篩選固有類一起使用。
搜索的設(shè)計(jì)原則
關(guān)于搜索，幾乎沒有人不知道，哪怕是不從事設(shè)計(jì)、產(chǎn)品的人，他們也知道。同時每一個產(chǎn)品，隨著規(guī)模變大，搜索一定必不可少。那么如何設(shè)計(jì)好搜索呢？有哪些原則可以借鑒，總結(jié)了以下4個方面。
漸進(jìn)呈現(xiàn)
在我們設(shè)計(jì)搜索時，可以考慮漸進(jìn)呈現(xiàn)的方式。這是指搜索結(jié)果不要一股腦兒都塞給用戶，而是使用逐步擴(kuò)大的方式，讓用戶慢慢進(jìn)入目標(biāo)。但這里要注意，漸進(jìn)的層級不要太深，漸進(jìn)的內(nèi)容要做到足夠?yàn)橛脩糁搿?/span>
結(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ù)搜索。這點(diǎn)上已經(jīng)有很多C端產(chǎn)品做的很好了，我們在B端產(chǎn)品上也可以考慮起來。
1.2條件篩選
下拉篩選
優(yōu)點(diǎn)：頁面的空間利用率高，同時下拉起到了很好的收納作用，不占據(jù)頁面空間。
缺點(diǎn)：由于下拉的局限性無法觀看到所有的篩選字段，需要操作點(diǎn)擊查看。
適用場景：下拉的篩選字段選項(xiàng)有限，可以明確的總結(jié)分類時，一般采用固定選項(xiàng)類。這種操作起來便捷，降低用戶的操作難度。一般情況下需要“搜索/查詢”按鈕，但是也有的產(chǎn)品是勾選即執(zhí)行的。主要需要結(jié)合具體的使用場景去判定。
矩陣(平鋪)篩選
優(yōu)點(diǎn)：用戶可以直接看到篩選內(nèi)容，支持輸入更多篩選條件，減少操作步驟提高了用戶篩選的效率。
缺點(diǎn)：平鋪的篩選類目占據(jù)頁面空間較大，空間利用率低，信息量過多都是重點(diǎn)等于沒有重點(diǎn)，增加用戶的決策時間，不適合選項(xiàng)太多的情況。
適用場景：平鋪篩選控件的普適性為最強(qiáng)，當(dāng)沒有其他更好想法時，用平鋪總是一個好的選擇。需要注意的是，篩選條件不要過多（遵循7±2 法則）。
注意事項(xiàng)：
當(dāng)確實(shí)需要支持大量的篩選條件時，有兩種解決方案可供參考
1、用戶自行配置篩選條件：對用戶來說，單次篩選會用到的條件是有限的；通過可配置的篩選條件，實(shí)現(xiàn)檢索效率和信息噪音的平衡，對于用戶自定義項(xiàng)的體驗(yàn)與應(yīng)用都有更好的支持。
2、 隱藏低頻的篩選條件：這種方法需要對用戶需求有明確的把握，哪些篩選條件是高頻、哪些是低頻需要有明確的分界，優(yōu)點(diǎn)是第一次使用時用戶能更快上手。
表頭篩選
優(yōu)點(diǎn)：通過表頭的點(diǎn)擊，簡潔、直觀的篩選當(dāng)前表格列。
缺點(diǎn)：只能篩選當(dāng)前列的內(nèi)容，篩選字段比較少，篩選形式比較單一。每個表頭都會有篩選的icon，影響用戶對于表頭的識別。表頭篩選學(xué)習(xí)成本最高，且和表頭排序容易沖突，篩選值展示也不夠直觀。
適用場景：表頭篩選類似Excel表格的操作，是一種相對高級的交互，適合表格列比較單一內(nèi)容的篩選。
注意事項(xiàng)：
一般來說不推薦使用，僅建議在以下幾種情況考慮使用
1、空間是在有限或者表格非常靈活；
2、用戶可能對每一列都有篩選需求（如數(shù)據(jù)報(bào)表、Excel）；
3、產(chǎn)品規(guī)劃時對于用戶篩選需求不夠明確，也可通過這種模式先采集數(shù)據(jù)，分析其使用頻次，對后期的界面優(yōu)化進(jìn)行指導(dǎo)。
TAB標(biāo)簽
優(yōu)點(diǎn)：篩選條件一目了然，交互步驟少，一個Tab標(biāo)簽代表一個緯度，平鋪展示篩選內(nèi)容方便識別，學(xué)習(xí)成本低。
缺點(diǎn)：Tab標(biāo)簽篩選字段數(shù)量有限制，不宜過多，分類需覆蓋選項(xiàng)，并且保證每一項(xiàng)沒有交集，空間占用多、不夠靈活，對用戶自定義項(xiàng)支持較差。
適用場景：Tab標(biāo)簽切換一般用于和時間、狀態(tài)的流轉(zhuǎn)有關(guān)，且沒有交集的數(shù)據(jù)內(nèi)容（可以是同性質(zhì)，也可以是不同性質(zhì)）。權(quán)重高，選項(xiàng)值不超過5個。
1.3組合篩選
在B端系統(tǒng)表格類頁面中，字段屬性很多，簡單的檢索方式很難準(zhǔn)確定位到目標(biāo)數(shù)據(jù)，所以在實(shí)際使用當(dāng)中，常會將大量非交叉關(guān)系的屬性進(jìn)行羅列，搜索、篩選、TAB標(biāo)簽切換組合出現(xiàn)，形成多屬性的組合檢索。而篩選項(xiàng)互相組合，其展示方式有如下幾種：
平鋪式
平鋪式是將所有篩選項(xiàng)羅列出來平鋪在頁面上，可以兼容多種數(shù)據(jù)格式比如數(shù)字、文本、標(biāo)簽、枚舉值、布爾值等，包含但不限于日期選擇期、標(biāo)簽切換、單選框、復(fù)選框等多種控件。
優(yōu)點(diǎn)：用戶能直接看到選項(xiàng)內(nèi)容，方便用戶識別選項(xiàng)，且提高了用戶篩選的效率（節(jié)省了篩選操作），大而全的篩選字段最大限度避免篩選條件遺漏的問題。
缺點(diǎn)：篩選項(xiàng)多會占據(jù)大量頁面空間，信息量過多都是重點(diǎn)等于沒有重點(diǎn)，增加用戶的決策時間，不利于表格數(shù)據(jù)的直觀展示，此類型一般配合“勾選即執(zhí)行”使用。
適用場景：普適性為最強(qiáng)，當(dāng)沒有其他更好想法時，用平鋪總是一個好的選擇。適用于從各個緯度篩選的場景，多維度篩選對信息篩選的顆粒度需求不一致，同時希望備選項(xiàng)被選中。
折疊式
折疊式篩選是平鋪式篩選的改進(jìn)，一種簡單直接的篩選形式，對平鋪的篩選項(xiàng)進(jìn)行收納，如果多屬性組合檢索中的一部分檢索條件不是高頻率使用的，但又是必須存在的，可以通過折疊的方式將這部分篩選字段隱藏起來，高頻篩選字段外露。
優(yōu)點(diǎn)：高頻篩條件可優(yōu)先快速篩選、一定程度上減少用戶的認(rèn)知負(fù)荷，同時占用空間較小。
缺點(diǎn)：不好劃分不同用戶的高頻篩選項(xiàng)，當(dāng)高頻篩選項(xiàng)過多時，頁面同樣會出現(xiàn)信息冗雜、空間占比大等問題。
適用場景：折疊低頻篩選，顯示高頻篩選，能滿足大多場景下不占用太多空間。針對有更多篩選需求的用戶也有更好的引導(dǎo)性。
從位置上來說，組合篩選一般有如下幾種常見類型：上下布局水平篩選區(qū)、左右布局的垂直側(cè)邊篩選區(qū)、 內(nèi)嵌的的表頭篩選區(qū)。
上下布局水平篩選區(qū)
最常用的上下布局，篩選區(qū)放置在表格頁面的上方，方便用戶識別選項(xiàng)，提高了用戶篩選的效率，明確哪些數(shù)據(jù)是用戶所需的。上下布局的篩選區(qū)也方便用戶進(jìn)行閱讀，對于那些由不同數(shù)據(jù)結(jié)構(gòu)組成的頁面，是一個很好的選擇。
上下布局的篩選區(qū)的可擴(kuò)展性差，當(dāng)篩選項(xiàng)目少于五個的情況下，最常使用的就是上下布局，而當(dāng)篩選項(xiàng)目多的時候，會占據(jù)大量頁面空間，內(nèi)容在較多時，推薦增加收起功能，這樣保證篩選整體面積不會很大，提升屏效比。
左右布局的垂直側(cè)邊篩選區(qū)
左右布局的篩選區(qū)一般是以字段選擇進(jìn)行篩選，篩選區(qū)的位置較固定，不會因?yàn)楹Y選項(xiàng)過多而影響頁面中主要內(nèi)容的位置，可擴(kuò)展性強(qiáng)，可在收起部分嵌套更多的字段值。
左右布局的好處就是能夠?qū)⒑Y選的所有條件都直接的展示出來，可以適應(yīng)很多場景，但是這種類型篩選器可以影響整個頁面。我們需要確保頁面上的每個元素都有效地受到篩選的影響，避免造成混亂。
內(nèi)嵌的表頭篩選區(qū)
表頭篩選是一種復(fù)雜的篩選形式，常見于列表中，是一種列表內(nèi)置篩選形式，適合表格列比較單一內(nèi)容的篩選，其最開始是源于Excel的篩選形式，點(diǎn)擊表單的篩選按鈕，可以將表頭的篩選字段直接帶入，方便用戶。
篩選區(qū)有兩種不同的反饋模式：數(shù)據(jù)實(shí)時更新反饋和數(shù)據(jù)手動更新反饋。
數(shù)據(jù)實(shí)時更新反饋
界面將與所有設(shè)置的篩選相匹配并對結(jié)果進(jìn)行實(shí)時更新。
這種模式的優(yōu)點(diǎn)是在執(zhí)行篩選時為用戶提供了一種方便簡單的體驗(yàn)，可以在每次點(diǎn)擊后立即看到結(jié)果。適用于較低風(fēng)險(xiǎn)的交互，一旦處理多選過濾器或更復(fù)雜的輸入時可能會造成混亂。當(dāng)然還需要考慮處理數(shù)據(jù)的多少，如果應(yīng)用中數(shù)據(jù)量巨大，每次更新時間較長，反而會降低用戶的使用效率。
手動更新反饋
在手動更新反饋模式下，過濾結(jié)果只有在用戶點(diǎn)擊查詢時才會更新。如果用戶想在每次更改后查看結(jié)果，必須單擊查詢按鈕。
這種模式適合多緯度復(fù)雜的篩選，所有篩選字段設(shè)置完畢之后，統(tǒng)一執(zhí)行操作，和實(shí)時反饋結(jié)果相比降低篩選等待時間，尤其是在大量數(shù)據(jù)進(jìn)行篩選中，優(yōu)化了用戶體驗(yàn)。
什么情況不適合用篩選？
選用篩選組件的前提是信息能被清晰分類。如用戶ID/電話號碼，注冊用戶郵箱這種無明顯規(guī)則的就不適合用篩選組件去查找，用搜索會更好。
篩選分類條件有什么要求？
一是分類需符合大眾認(rèn)知的條件。如：按照年月日的認(rèn)知來選擇，地理位置按照省市區(qū)街道…
二是要求篩選類目的分類要合理、避免晦澀難懂的文案。這決定了用戶使用篩選功能的時候是否清晰無困惑。
高頻篩選操作怎么樣方便用戶操作？
首先高頻篩選操作不是產(chǎn)研團(tuán)隊(duì)自己主觀臆斷出來的，需要有數(shù)據(jù)支撐。很多產(chǎn)品為了滿足用戶快捷操作，會在篩選區(qū)幫用戶集成常用的快捷操作入口。比如很多電商產(chǎn)品的新品、包郵等快捷篩選。根據(jù)不同產(chǎn)品用戶習(xí)慣下操作整理出快捷操作入口能提高用戶體驗(yàn)方便度。
篩選和搜索的區(qū)別？
主要區(qū)別在于用戶對目標(biāo)的清晰度不同，需要選用不同組件功能來達(dá)到其目的。
在B端系統(tǒng)界面設(shè)計(jì)中，搜索是通過指定任意條件，系統(tǒng)對此條件進(jìn)行的檢索后，展示相對應(yīng)內(nèi)容；篩選是系統(tǒng)提供指定各種條件縮小范圍，可以選擇查找不同條件的內(nèi)容。
搜索和篩選都是讓用戶使用某個條件對內(nèi)容進(jìn)行區(qū)分，從而找到用戶想要的內(nèi)容。
在設(shè)計(jì)組合篩選的時候，篩選區(qū)的設(shè)計(jì)需要根據(jù)業(yè)務(wù)實(shí)際情況進(jìn)行設(shè)計(jì)，考慮每個篩選字段和業(yè)務(wù)場景，來安排合理的篩選展示方式。
那么到底什么情況下使用何種篩選模式？我們在設(shè)計(jì)篩選的時候可以如何思考？顯然，使用頻率和界面空間是兩個非常重要的評判維度。除此之外，我們還可以以可見性、系統(tǒng)性能和用戶認(rèn)知等維度去深入思考，下面將逐一分析。
頻率
使用頻率是界面設(shè)計(jì)的一個重要考量因素，我們通常都會把高頻使用的功能放在顯眼且容易操作的位置。同理，對于篩選模式，我們也會依據(jù)篩選條件的高低頻進(jìn)行設(shè)計(jì)。頻率除了影響使用什么模式外，還會影響篩選條件及篩選項(xiàng)的排列順序，這里就不多敘述了。
界面空間
一些界面模式的出現(xiàn)就為了應(yīng)對界面空間不足的情況。而我們基于有限的界面空間選擇合適的篩選模式是件再正常不過的事。
可見性太弱，當(dāng)篩選條件都被收納在一個個小小的入口按鈕時，它的可見性也會隨之降低，尤其在PC端，一個大屏幕下更難發(fā)現(xiàn)。
可見性
既然說到可見性，不妨展開講講?？梢娦允且豁?xiàng)重要的設(shè)計(jì)原則之一。一個明顯的道理是，可見總比不可見好，但由于界面空間限制，我們不得不取舍。那么如何取舍才能保證可用性仍然友好？
針對篩選模式的可見性，我們可以分三個要點(diǎn)去考慮：
1、篩選條件本身的可見性：
用戶越難發(fā)現(xiàn)，即可見性越低。通常，我們都可以以使用頻率來決定篩選條件的可見程度。但有時候也會失效，因?yàn)檎缟衔乃峒?，到了篩選這一步通常是顆粒度比較細(xì)的分類，否則我們可以用導(dǎo)航解決。但顆粒度越細(xì)，用戶對信息的需求就越不一致。比如，挑一件衣服，有人希望按品牌篩選，有人希望按價格，有人希望按顏色，我們很難判斷哪個頻率更高。面對這種情況，只能將所有的篩選條件平鋪出來供用戶選擇。例如，淘寶天貓等電商產(chǎn)品往往會使用矩陣式的篩選，而一些數(shù)據(jù)格式更多樣的B端產(chǎn)品則直接使用輸入式的篩選。
2、篩選項(xiàng)的可見性：
篩選項(xiàng)的可見性同樣影響模式的選擇。頁簽式和矩陣式篩選的可見性比下拉式更高，因?yàn)橛脩艨梢灾苯涌吹胶Y選項(xiàng)。但篩選項(xiàng)一定要讓用戶看見嗎？對于這個問題，可直接以篩選項(xiàng)的多少去決策（少則可見，多則不可見），比如一些B端產(chǎn)品，如果將備選項(xiàng)都全平鋪出來可能一個屏幕都放不下，所以只能將所有篩選項(xiàng)收起。但這是一種極端的情況，缺乏說服力。
用戶對備選項(xiàng)是否足夠熟悉？比如對于一個尺碼的下拉框，我很清楚自己能選擇什么，但對于一個衣服風(fēng)格的下拉框，由于我對風(fēng)格不熟悉，不能預(yù)判這個篩選條件能起什么作用，很可能會將其忽略。
3、選中項(xiàng)的可見性：
選中項(xiàng)的可見性，即當(dāng)我選中某幾項(xiàng)后再次查看選中項(xiàng)的難易程度。
性能
數(shù)據(jù)量大才需要篩選，而數(shù)據(jù)量大必然會有性能問題。在不同場景下，用戶會發(fā)生不同的行為，對性能的要求也會不一樣。我們能經(jīng)常發(fā)現(xiàn)一些篩選模式會帶有“確認(rèn)”按鈕，當(dāng)用戶設(shè)置完篩選條件后不會即時刷新，而需點(diǎn)擊按鈕才能觸發(fā)。而有的篩選模式則沒有“確認(rèn)”按鈕。這分別對應(yīng)著兩種不同的場景。
第一種場景，如B端產(chǎn)品中的查詢報(bào)表場景。我需要找出符合條件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ù)，變更概率是指用戶使用篩選的可能性，一般來說，高頻次必然大概率，但大概率不一定高頻次。而這兩種情況對性能的要求是不同的。還是以報(bào)表和列表為例，在列表中，雖然很大概率會使用篩選來尋找信息，但由于用戶是即時滿足的，而且滿足即可，所以不會重復(fù)變更篩選條件。而在報(bào)表中，雖然用戶會一次性設(shè)置篩選條件，但需要分析的數(shù)據(jù)不只一種，所以會高頻更換篩選項(xiàng)，回想一下我們?nèi)シ治鲎约寒a(chǎn)品或競品的日活月活等數(shù)據(jù)時，是不是會高頻地切換數(shù)據(jù)來分析比對？所以，高頻次的篩選就會對性能有更強(qiáng)的要求，而為了避免性能問題，往往也會加上“確認(rèn)”按鈕。
用戶認(rèn)知
最難解決的其實(shí)是用戶的認(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è)計(jì)在更加注重對于使用者的效率，這個功能是否方便直接達(dá)到目的。B端產(chǎn)品最直接的使用者是企業(yè)或者說每個“小企業(yè)”（班級、部門團(tuán)隊(duì)等）要做的就是直接幫助他們用更低的成本使他們的效率大大提高。我們目前對于B端產(chǎn)品最簡單的理解就是疫情期間火爆的“釘釘”以及各位都熟知的“飛書”，在我們使用這兩款軟件時，我們就會發(fā)現(xiàn)這些功能好多面面俱到，“請假、匯報(bào)、簽到”等，不論多小的功能這兩款軟件都有，但是如果是C端的話，一些次要、點(diǎn)擊率低的功能指不定那天就消失了。單從產(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)推送直擊用戶痛點(diǎn)，增加用戶粘性購買度等。
B端大多為辦公場景，項(xiàng)目需求、審批等
C端則較為廣泛，某寶買買買，某音看看看！
B端的價值更體現(xiàn)在我們整個團(tuán)隊(duì)的效率，這個項(xiàng)目的使用成本，；比如說我需要通過這個軟件幫助我們整個團(tuán)隊(duì)的效率提升，大家一起協(xié)作作圖、一起探討。
C端的價值體現(xiàn)在這個活動這款產(chǎn)品怎樣使用戶更好的體驗(yàn)，在使用時很快樂的把單下了；比如我們在某物購物時，購買完成后會獲得一張3D虛擬卡片，我們的購物體驗(yàn)之旅是不是會極其開心，這里就使用了峰終法則（如果用戶在一段體驗(yàn)的高峰處和結(jié)尾處是愉悅的，那么用戶對這段體驗(yàn)的整體感受就是愉悅的。）
B端更注重這個功能的實(shí)現(xiàn)，我在使用這個功能時是否可以更高效，更加的去節(jié)省我的使用成本，再設(shè)計(jì)時我們需要去理解整個業(yè)務(wù)邏輯、業(yè)務(wù)導(dǎo)向，介于B端產(chǎn)品比較私密，很少有公開的，所以比較設(shè)計(jì)起來難度較為提高。我們我們平常面對小伙伴B端的問題時，如果不去了解他們整個業(yè)務(wù)流程就很難客觀地去判斷，很容易對他的指點(diǎn)使他造成一次工作失誤。
C端的業(yè)務(wù)導(dǎo)向，更在于對于用戶心理、使用體驗(yàn)的拿捏，能讓用戶做到“0”成本學(xué)習(xí)，無腦上手無腦沖沖沖，就比如你搞優(yōu)惠搞了半天復(fù)雜操作做后才200-10這誰不氣？光明正大割韭菜啊。
我在資料中查閱到未來的B端的進(jìn)步就會在“B端產(chǎn)品在使用體驗(yàn)和視覺感受這兩個方面和C端產(chǎn)品接近”，B端C化其實(shí)很簡單，就是將B段專業(yè)性強(qiáng)會忽略視覺這一點(diǎn)進(jìn)行補(bǔ)充，B端產(chǎn)品也可以使自己的產(chǎn)品視覺更加富有沖擊力、3D、情感化、就像一些大廠最近的展示更多的去運(yùn)用了一些3D玻璃質(zhì)感提升B端產(chǎn)品的用戶視覺體驗(yàn)，飛書也會制作情感也會在缺省頁的時候用emoj表情對你體現(xiàn)“話語安慰”是你在使用功能時不再那么枯燥，釘釘?shù)腎P設(shè)計(jì)同樣也是在拉近與用戶之間的距離，通過IP讓本就繁瑣的產(chǎn)品得到心情的愉悅，這都是在進(jìn)一步提升B端的情感化，淘寶的功能、抖音的功能更加方便高效其實(shí)也是B端的體現(xiàn)，所以我們B C端其實(shí)歸根結(jié)底我們的目標(biāo)服務(wù)都是為了人設(shè)計(jì)的，設(shè)計(jì)也一樣，服務(wù)于人，都是以更加舒適的道路上前進(jìn)。
其實(shí)B端C端從根本來說不同點(diǎn)很小，因?yàn)槎际菫榱恕叭恕比シ?wù)，未來的發(fā)展也是為了更好的讓我們?nèi)ジ咝У氖褂?；就很像國?nèi)國外設(shè)計(jì)有什么不同，其實(shí)沒什么不同，我們設(shè)計(jì)每一個項(xiàng)目、每一個作品時不管我們是否屬于哪個國家，我們的目的也只有一個“為了讓這個世界因?yàn)橛辛嗽O(shè)計(jì)而看起來更美一點(diǎn)！”
作者：小蘆同學(xué)有大腦袋 來源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
列表頁多用于一個功能的首屏，是一個功能的數(shù)據(jù)集中載體，它的主要功能就是集中處理、展示、查詢、以及統(tǒng)計(jì)數(shù)據(jù)等。列表頁一般包含5個組成部分：標(biāo)題、查詢、操作、統(tǒng)計(jì)以及表格。
系統(tǒng)中只要是功能，就一定有標(biāo)題，就像只要是個人，就一定有姓名一樣，標(biāo)題的展示根據(jù)系統(tǒng)的結(jié)構(gòu)，可能在面包屑中，可能在標(biāo)簽欄中，也有可能在頁面容器中。如果標(biāo)題放在容器中，位置一般是固定的，不隨著頁面滾動而滾動，標(biāo)題字體也要和內(nèi)容字體做區(qū)分，一般是字號增大或者加粗等方式。
查詢條件的設(shè)計(jì)也是五花八門，根據(jù)查統(tǒng)頁使用場景大致可以分成兩種：一種是省空間的設(shè)計(jì)，一般只需要放一兩個查詢條件，那么它就可以和操作按鈕放一起，多出現(xiàn)于數(shù)據(jù)字段比少且簡單的情況；一種是經(jīng)常需要混合高級查詢，一般會獨(dú)立有一塊查詢條件模塊，多出現(xiàn)于數(shù)據(jù)統(tǒng)計(jì)類頁面。
為了達(dá)到省空間的目的，查詢條件和操作放一行，一般會只放一兩個查詢條件，輸入或選擇后即執(zhí)行查詢，不需要單獨(dú)點(diǎn)擊查詢按鈕，這種方式好處就是省空間，缺點(diǎn)是它默認(rèn)展示的篩選項(xiàng)比較少，需要再點(diǎn)擊“更多查詢”才能看到更多。設(shè)計(jì)這種查詢方式需要注意的是，輸入查詢一般是輸入后即執(zhí)行查詢，容易導(dǎo)致執(zhí)行過于頻繁（輸入一個字符即執(zhí)行了），因此會做防抖設(shè)置，可以在輸入0.5s后執(zhí)行。再一個，這種展開收起的情況，用戶容易看不到隱藏的篩選，因此需要一些標(biāo)記，比如展示已選擇的數(shù)量。
獨(dú)立查詢條件的方式，就是將查詢條件單獨(dú)劃出一個模塊，可以一次性展示多個查詢條件。這種方式的好處就是，查詢更便捷，還可以做更多的拓展性方案，如用戶可以自定義高級查詢方案。缺點(diǎn)就是占空間，對于小分辨率電腦不是很友好。
列表的操作是由產(chǎn)品的功能權(quán)限控制，由權(quán)限決定哪些人能夠使用和查看數(shù)據(jù)，下面從操作的類型、組合、操作反饋以及狀態(tài)的角度分析如何設(shè)計(jì)好操作功能。
操作模塊一般是由一組用于操作表格數(shù)據(jù)的按鈕組，主要分為3種：一種是全局性操作，一種是選擇數(shù)據(jù)進(jìn)行操作，一種是混合型操作。全局性操作（如新增數(shù)據(jù)、導(dǎo)入、導(dǎo)出模板、刷新等）不需要勾選當(dāng)前具體某行數(shù)據(jù)，就可以直接點(diǎn)擊操作；選擇數(shù)據(jù)進(jìn)行操作（如刪除、編輯、審批等），即操作前需要至少勾選一條數(shù)據(jù)，因?yàn)樗菍Ξ?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提示，操作成功/操作失??；2、給操作建議，如：toast提示，請先勾選至少一條數(shù)據(jù)；3、警告提示，如刪除數(shù)據(jù)時候告知風(fēng)險(xiǎn)，二次確認(rèn)防止誤操作。
數(shù)據(jù)統(tǒng)計(jì)一般是拾取表格數(shù)據(jù)某些維度的統(tǒng)計(jì)結(jié)果，用于快速知曉當(dāng)前所有數(shù)據(jù)的情況，有些統(tǒng)計(jì)還帶交互，比如點(diǎn)擊選中后進(jìn)行數(shù)據(jù)過濾。
市面上封裝好的表格組件可配置api很多，像antd，但是想要做的更強(qiáng)大，還有很多能夠做的細(xì)節(jié)，我們先來分析下表格的組成。表格是由行和列組成的網(wǎng)格數(shù)據(jù)，表格可以分2種，明細(xì)表和交叉表，查統(tǒng)頁中采用的就是明細(xì)表中的橫表，即表頭是橫向的。
表格的設(shè)計(jì)原則遵循以下幾點(diǎn)：數(shù)據(jù)可讀性、展示效率、操作便捷性、以及靈活性等。
表格作為信息密度最大的組件，在設(shè)計(jì)的時候要考慮數(shù)據(jù)的可讀性，可以從以下幾點(diǎn)入手。
B端產(chǎn)品尤其是ERP這種數(shù)據(jù)密集程度很高的產(chǎn)品，對空間的利用要求是很高的，因此在設(shè)計(jì)的時候要充分考慮展示的效率，可以從行高、列寬等角度去設(shè)計(jì)表的細(xì)節(jié)。我設(shè)計(jì)表的時候習(xí)慣先跟產(chǎn)品討論清楚每個字段大概的長度，在設(shè)計(jì)的時候就會預(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è)計(jì)的時候不一定能覆蓋所有用戶和場景，因此需要預(yù)留一些靈活調(diào)整的空間，下面介紹幾個常用點(diǎn)。
表格元素包含了背景、數(shù)據(jù)（文字、圖片、圖標(biāo)、標(biāo)簽、附件等）、序號、邊框、選擇框、操作項(xiàng)、斑馬線等。這些在設(shè)計(jì)表格的時候都是設(shè)計(jì)師需要去定義展示形式
為什么要單獨(dú)把操作列拿出來講，因?yàn)椴僮髁械脑O(shè)計(jì)蘊(yùn)含了太多內(nèi)容需要考慮，設(shè)計(jì)師在設(shè)計(jì)的時候很容易忽略。
目前操作列按鈕主要兩種形式，“圖標(biāo)按鈕”和“文字按鈕”，圖標(biāo)按鈕主要用于比較簡單易懂的一些常規(guī)操作，優(yōu)勢是長度可控，容易對齊，劣勢是，有時候需要懸停上去才知道含義，不夠直接；文字按鈕用的范圍比較廣，簡單明白，缺點(diǎn)是長度不可控，不好對齊。
操作列和復(fù)選框一樣，一般作為固定列，不隨著字段橫向滾動。數(shù)量也不可控，根據(jù)業(yè)務(wù)情況，有多有少，因此在做的時候要解決數(shù)量問題，如果全部展示，則勢必影響內(nèi)容的展示面積，因此設(shè)計(jì)師根據(jù)真實(shí)的操作數(shù)量設(shè)定固定列寬度規(guī)則，操作項(xiàng)超過一定數(shù)量或一定長度做“更多”按鈕收納。還有一種展示方式，默認(rèn)不展示，鼠標(biāo)懸停展示該條數(shù)據(jù)需要展示的操作，這樣既可以解決信息展示面積問題，又不需要考慮和其他行數(shù)據(jù)的操作對齊，還不需要定操作列列寬規(guī)則，缺點(diǎn)是，不夠直接，如果不懸停就不知道還有操作項(xiàng)。有的產(chǎn)品干脆直接把操作項(xiàng)去掉，全部采用上面的全局操作，勾選數(shù)據(jù)后執(zhí)行，總之各有各的優(yōu)缺點(diǎn)。
設(shè)計(jì)師經(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è)計(jì)師在設(shè)計(jì)的時候也要定好默認(rèn)一頁幾條，不然開發(fā)就會根據(jù)自己的臆想來做。分頁器位置的設(shè)計(jì)也分兩種，在表格上方和表格下方，市面上看到的大部分都是在下方。放在下方就有個問題了，是要固定頁面位置還是隨著表格自動計(jì)算位置？我對比了幾個比較成熟的產(chǎn)品，大部分都是固定在底部，不隨著頁面滾動，整個頁面滾動的區(qū)域只有表身，有小部分是跟在表格尾部，每頁條數(shù)超過屏幕高度可展示量，分頁器就會被擠到下面看不見，這種好處就是省了一點(diǎn)展示空間，不好的地方就是，要想再使用分頁器得往下找。還有極小部分產(chǎn)品兼容了這兩個方案，當(dāng)條數(shù)少的時候跟在表格尾部，當(dāng)條數(shù)多的時候，會頂在底部，類似固定釘功能?？傊还懿捎媚姆N方案，都要兼顧便捷性和易用性。
表頭篩選平時用的比較少，因?yàn)橥饷嬉呀?jīng)有獨(dú)立的篩選功能，有些也放出來，補(bǔ)充一些不常用的篩選。
排序規(guī)則主要由產(chǎn)品提供，設(shè)計(jì)需要知道一下。一般默認(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ā)排序一般只需要點(diǎn)擊表頭即執(zhí)行，通常點(diǎn)一次會進(jìn)行正序/反序，再點(diǎn)一次會反過來，再點(diǎn)一次取消排序。如果點(diǎn)另一個字段的排序則默認(rèn)會采用最新的排序字段。
有些比較難懂的字段需要在表頭增加一個提示信息，來輔助用戶理解字段含義
前面講了表格的各種屬性，為了使用的靈活性，有些成熟的產(chǎn)品會設(shè)計(jì)一個設(shè)置表格屬性的功能，可以讓用戶自定義表格屬性，如字段展示（篩選）、字段順序、字段對齊方式、字段固定列、是否展示序號、斑馬線等。事情有利必有弊，靈活也意味著學(xué)習(xí)成本高和投入開發(fā)成本大，是否需要做有各自的真實(shí)情況決定，不過作為設(shè)計(jì)師得知道，這些就是你能雕琢的地方。
還有一些額外的設(shè)計(jì)過程中你不一定會注意到但挺好用功能推薦。
在選擇數(shù)據(jù)的時候，為了便于一眼看到選中的數(shù)據(jù)，會做這個么個操作。
表格的選擇，默認(rèn)一般是不支持跨頁選擇的，所以產(chǎn)品或者設(shè)計(jì)需要要求開發(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è)計(jì)師在設(shè)計(jì)過程中需要不斷打磨，設(shè)計(jì)出符合自己產(chǎn)品特性的列表。
作者：落難的黑人 來源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
界面設(shè)計(jì)是一個很龐大的體系，具有很多原則，比如輕量、容錯、清晰等等，其中包含了交互層面以及視覺層面等，今天我想單獨(dú)把視覺剝離出來，來講一講我對界面設(shè)計(jì)“視覺層面”的理解與認(rèn)知。
在我看來，界面設(shè)計(jì)的視覺層面主要可以分為三個維度來解析：信息傳遞、視覺美化、創(chuàng)意創(chuàng)新。
信息傳遞是讓用戶看的明白，快速清晰的獲取信息；
視覺美化是讓用戶看的舒服，讓界面足夠美觀；
創(chuàng)新創(chuàng)意是讓用戶看的驚喜，看到一些不一樣的創(chuàng)意點(diǎn)。
如下圖:
三個維度的目標(biāo)如何實(shí)現(xiàn)呢？我提取了以下三個關(guān)鍵詞：
清晰、和諧、獨(dú)特是我們要達(dá)成的目標(biāo)，達(dá)成目標(biāo)一定會有一些原理所在，而有了原理就會有具體的執(zhí)行方法，所以后面的每一個知識點(diǎn)，我都會按照“設(shè)計(jì)目標(biāo)-執(zhí)行原理-執(zhí)行方法”的邏輯給大家講解，大綱如下：
1 清晰
1.1清晰-降噪-容器整合
1.2清晰-聚焦-局部放大
2 和諧
2.1 和諧-呼應(yīng)-顏色呼應(yīng)
2.2 和諧-節(jié)奏-變化對比
2.3 和諧-飽滿-負(fù)形縮減
3 獨(dú)特
3.1 獨(dú)特-品牌延展-IP形象結(jié)合
3.2 獨(dú)特-事物本意-事物圖形化
1.清晰
1.1清晰-降噪-容器整合
設(shè)計(jì)目標(biāo)：清晰
執(zhí)行原理：信息降噪
執(zhí)行方法：容器整合
當(dāng)界面信息過于分散時，會對用戶造成不必要的干擾，導(dǎo)致用戶產(chǎn)生疑惑甚至直接離開界面。
作為設(shè)計(jì)師，要做的就是對信息進(jìn)行整合，我們可以稱之為信息減噪，目的就是讓頁面更加清晰，減少干擾。
這里我經(jīng)常使用“容器整合法”來讓內(nèi)容更加清晰、聚焦。
當(dāng)分散的內(nèi)容裝進(jìn)一個“容器后”，就可以使內(nèi)容聚焦在容器當(dāng)中，讓信息更加規(guī)整。而卡片就是一個很好的“容器”。
實(shí)際案例：
在改版騰訊動漫個人中心的時候，頭部就存在信息分散不聚焦的問題，四個視覺觸點(diǎn)（綠色圈處）分散在四個角落，形成極大干擾。
這里我就采用了”卡片容器“的方法，將信息裝進(jìn)容器中，減少分散信息的干擾，使界面更加清晰、工整，效果如下：
現(xiàn)在很多產(chǎn)品都在使用卡片化的布局，尤其是在信息數(shù)量、層級較多的時候，更加需要有容器將其規(guī)整起來，這樣才會讓界面保持不亂！
1.2 清晰-聚焦-局部放大
設(shè)計(jì)目標(biāo)：清晰
執(zhí)行原理：聚焦
執(zhí)行方法：局部放大
我們在平時做需求的時候，經(jīng)常會遇到信息特別多，特別亂的時候，如果此時我們選擇什么都想突出，最后的結(jié)果一定適得其反，什么都突出部不了，這時候就需要我們選擇一些內(nèi)容來進(jìn)行局部放大，反而可以讓整體信息更加聚焦、清晰。
這種方法經(jīng)常用在有數(shù)字展示的頁面當(dāng)中，比如下面這種頁面：
再比如，下面這個模塊信息，如果”3“沒有放大，整體的信息會亂到你眼花繚亂，我們看下對比：
所以，大家在遇到有數(shù)字，且信息雜亂的時候，就可以采用局部放大的方式來使整體更加聚焦、清晰。
2.和諧
2.1 和諧-呼應(yīng)-顏色呼應(yīng)
設(shè)計(jì)目標(biāo)：和諧
執(zhí)行原理：呼應(yīng)
執(zhí)行方法：以顏色呼應(yīng)為例
很多時候我們會覺得自己做的東西很不和諧，其中一個很重要的原因就是因?yàn)轫撁嬷袥]有貫穿的元素，也就是沒有呼應(yīng)，很常用的一個呼應(yīng)的方法就是顏色呼應(yīng)。
例如這個畫面總看起來不夠和諧，你會覺得綠色很突兀，就是因?yàn)轭伾蠜]有呼應(yīng)：
而一旦你想辦法，讓綠色“事出有因”，比如取自眼鏡的顏色：
那么，突兀的問題解決了，和諧的目標(biāo)也就實(shí)現(xiàn)了。
而剛才那個人中心的界面：
我們會發(fā)現(xiàn)，圖標(biāo)的顏色也是取自背景色，所以整體看起來才會如此和諧。
除了顏色呼應(yīng)，還有很多呼應(yīng)的方式，比如圖形、圖標(biāo)風(fēng)格等等，這里就不再舉例了。
2.2 和諧-節(jié)奏感-對比變化
設(shè)計(jì)目標(biāo)：和諧
執(zhí)行原理：節(jié)奏感
執(zhí)行方法：對比變化
對于音樂，節(jié)奏感是非常重要的，如果一段音樂一直是一個頻率，那可能也算不上音樂了。
界面也是一樣的，節(jié)奏感是讓頁面變得“和諧”很重要的因素之一，如何做到呢？
我們在展示文字列表的時候，你覺得下面兩種哪個更舒服些呢？
我猜你會覺得第二個舒服一些，因?yàn)樗凶兓泄?jié)奏感，所以它和諧、舒適。
我們會發(fā)現(xiàn)很多產(chǎn)品首頁帶有封面圖的列表都有很多種排法，例如1帶多，1x2，2x2，2x3等等：
就是為了防止每個模塊過于重復(fù)，如果每個模塊都是每排兩張封面，一直下來：
看起來會非常乏味。
2.3 和諧-飽滿-負(fù)形縮減
設(shè)計(jì)目標(biāo)：和諧
執(zhí)行原理：飽滿
執(zhí)行方法：負(fù)形縮減
在做圖標(biāo)或者字體的時候，經(jīng)常要講一個原則就是“飽滿”，界面上每個“不能拆分的元素”都需要盡量做到飽滿，比如圖標(biāo)，再比如下面這個信息組件：
正文就屬于不能拆分的單一原子，大家可能會問，這種信息不就是方方正正的一個信息塊嗎，怎么會不飽滿呢，比如行間距過大：
再比如，我在優(yōu)化騰訊動漫信息流的時候，發(fā)現(xiàn)正文出現(xiàn)的表情遠(yuǎn)遠(yuǎn)大于文字，如下圖：
表情一旦出現(xiàn)，就會造成大量空隙（負(fù)形過大），導(dǎo)致整體不夠飽滿、和諧。
我們可以看下其他產(chǎn)品，表情和文字幾乎都是一樣的大小，他們都會盡量縮小負(fù)形空間（也就是空隙小大）：
在這樣的原則之下，優(yōu)化后的效果如下：
以上是關(guān)于和諧的幾點(diǎn)方法。
3.獨(dú)特
如果你的界面做到了清晰、和諧，在視覺層面就已經(jīng)算是及格了，如果還能加上一點(diǎn)小創(chuàng)意，就可以讓人眼前一亮。
如何能夠做到獨(dú)特？可以從兩方面出發(fā)，1是品牌，2是內(nèi)容本身含義。
3.1獨(dú)特-品牌延展-吉祥物結(jié)合
設(shè)計(jì)目標(biāo)：獨(dú)特
執(zhí)行原理：品牌延展
執(zhí)行方法：IP形象結(jié)合
從品牌出發(fā)，可以有很多方向，比如logo，圖形，品牌吉祥物等，下面以品牌吉祥物為例：
在做小說閱讀器的時候，有一個設(shè)置選項(xiàng)是選擇文字的背景顏色，選擇控件是圓形，而品牌形象也偏圓形，此時就可以將圓形控件與形象相互結(jié)合:
但是選擇控件有兩種狀態(tài)，為了更加生動，就讓給形象正面面對你的時候作為選擇狀態(tài)，而轉(zhuǎn)過身作為非選擇狀態(tài)，大概效果如下:
此創(chuàng)意已在騰訊動漫小說落地實(shí)現(xiàn)。
3.2 獨(dú)特-事物本意延展-事物圖形化
設(shè)計(jì)目標(biāo)：獨(dú)特
執(zhí)行原理：事物本意延展
執(zhí)行方法：事物圖形化
除了品牌，還可以根據(jù)事物本身的意思來延展圖形，比如日間夜間模式的切換按鈕，男女性別的切換按鈕，都可以利用事物本身的含義來延展圖形設(shè)計(jì):
此創(chuàng)意已在騰訊動漫個人中心模塊落地。
再比如，彈幕的展示方式，就可以聯(lián)想到電視機(jī)，再把電視機(jī)圖形化，如下圖:
這里需要注意下，有時候如果圖形過于普通，可以配合動效來增加獨(dú)特性，但一定要注意開發(fā)成本。
作者：黑澤雙熾 來源：站酷
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.yvirxh.cn