我們做產(chǎn)品時(shí)，UX的一些相關(guān)原則是必須要掌握的東西。但這個(gè)內(nèi)容又與思維有關(guān)，很多產(chǎn)品經(jīng)理并不是特別了解。這篇文章，作者遵循由外向內(nèi)，由整體到局部的方式來展開講解UX的6個(gè)通用原則，希望能對(duì)大家有所幫助。

幾年前面試的時(shí)候，面試官問我，你覺得產(chǎn)品經(jīng)理最核心的能力是什么呢？

如果是你，你會(huì)怎么回答？

他的答案是：產(chǎn)品設(shè)計(jì)能力

我當(dāng)時(shí)剛?cè)胄?，?duì)這個(gè)問題也沒多少感覺，但現(xiàn)在我會(huì)覺得核心能力即產(chǎn)品思維，而產(chǎn)品思維=產(chǎn)品可生產(chǎn)化思維+產(chǎn)品商業(yè)化思維。

——因?yàn)樗季S認(rèn)知決定你的行為，形成產(chǎn)品經(jīng)理表層可生產(chǎn)出來的東西（如產(chǎn)品設(shè)計(jì)稿、戰(zhàn)略規(guī)劃方案、或者團(tuán)隊(duì)管理等），所以思維是我覺得最本質(zhì)的能力。

怎么理解呢？

這里我們不聊商業(yè)化思維（這個(gè)很好理解，職級(jí)越往上，產(chǎn)品經(jīng)理是要有前瞻的商業(yè)眼光，通過產(chǎn)品研發(fā)幫助企業(yè)賺錢的），想重點(diǎn)聊下可生產(chǎn)化思維。

我的理解是：可生產(chǎn)化思維=是什么（產(chǎn)品定位、戰(zhàn)略方向）、能否設(shè)計(jì)（技術(shù)、資源等各類限制條件）、怎么設(shè)計(jì)（產(chǎn)品版本、團(tuán)隊(duì)協(xié)作等）以及設(shè)計(jì)的價(jià)值（用戶需要、競爭力等因素評(píng)估）。

畢竟若沒有意義，也沒必要做。

我們學(xué)習(xí)和實(shí)踐大量的知識(shí)背景，比如懂市場、懂行業(yè)、懂業(yè)務(wù)、懂?dāng)?shù)據(jù)、懂用戶等等，

都是為了形成我們的產(chǎn)品思維體系，植入進(jìn)產(chǎn)品設(shè)計(jì)里，幫助產(chǎn)品可生產(chǎn)化的同時(shí)，能運(yùn)用產(chǎn)品商業(yè)化思維，

在競爭激烈的市場里，創(chuàng)造商業(yè)價(jià)值、并不斷地更新產(chǎn)品，形成對(duì)用戶良性且相對(duì)持久的影響力。

但有時(shí)候，我們太關(guān)注功能、商業(yè)價(jià)值，太想把產(chǎn)品做好，學(xué)了很多，往往忽視了產(chǎn)品經(jīng)理應(yīng)該具備的一些體系化的東西。

我就發(fā)現(xiàn)，初入行的也好，干了好幾年的產(chǎn)品也好，很多都是靠自己的感覺或者“借鑒”做設(shè)計(jì)，卻根本沒有系統(tǒng)化去深究下本質(zhì)，想想為什么要這么做？比如在功能上、甚至一個(gè)圖標(biāo)、一個(gè)按鈕的位置上。

本文我想通過6個(gè)簡單要素，聊下我們最容易忽視的UX設(shè)計(jì)細(xì)節(jié)，并盡量全面結(jié)構(gòu)化體系化地表達(dá)出來，希望對(duì)你有所幫助和啟發(fā)。

當(dāng)你按照體系化的思路，去梳理深究產(chǎn)品設(shè)計(jì)的時(shí)候，會(huì)發(fā)現(xiàn)，有時(shí)候產(chǎn)品失敗不一定是市場不好、功能不夠精準(zhǔn)，而是一些最基礎(chǔ)的設(shè)計(jì)體驗(yàn)，本身就容易讓用戶產(chǎn)生“放棄”感。

或許比起做一款成功的產(chǎn)品，我們要先學(xué)會(huì)“生產(chǎn)”出一個(gè)相對(duì)合格的產(chǎn)品。

一、一些前言（多說幾句）

一定要學(xué)會(huì)有意識(shí)讓自己認(rèn)知體系化

注：如果在平時(shí)工作中，你可以有意識(shí)且主動(dòng)合理地，把所有知識(shí)和經(jīng)驗(yàn)都體系化，我相信這是對(duì)產(chǎn)品思維最好的訓(xùn)練方法、希望大家都可以有這樣的意識(shí)、定期復(fù)盤總結(jié)的習(xí)慣。

想起在我剛?cè)胄械臅r(shí)候，做產(chǎn)品設(shè)計(jì)是混亂的，按鈕要怎么放、什么頁面跟什么頁面有關(guān)系，……

根本不懂這些……

這種無序的思維方式，導(dǎo)致的行為結(jié)果，就是做出來的產(chǎn)品光看起來點(diǎn)幾下就是不合格的。

回到本文關(guān)鍵點(diǎn)：產(chǎn)品設(shè)計(jì)上來說，產(chǎn)品經(jīng)理首先就要有一個(gè)共識(shí)是：

1. 用戶看到的一款產(chǎn)品，沒有一個(gè)元素是多余的；這些元素可能包括顏色、文本、數(shù)字、控件（比如按鈕、彈窗）、頁面、功能點(diǎn)、甚至一個(gè)圖標(biāo)，他們絕不是隨意就可以堆砌和放置的。
2. 這些元素不止有關(guān)聯(lián)關(guān)系，承載著信息，更從細(xì)節(jié)里承載著一定的商業(yè)導(dǎo)向，可以直接或者間接影響產(chǎn)品的客戶群體留存轉(zhuǎn)化及商業(yè)價(jià)值；比如b站一鍵三連，按鈕放在左邊還是右邊還是隱藏，用心形點(diǎn)贊還是用大拇指點(diǎn)贊，很多的產(chǎn)品設(shè)計(jì)是不一樣的……你有沒有想過為什么？

作為產(chǎn)品經(jīng)理從設(shè)計(jì)之初就要合理考慮這些元素的關(guān)聯(lián)關(guān)系；不只是做TOC產(chǎn)品，TOB產(chǎn)品也需要。

接下來，我們具體來看看這些提升UX設(shè)計(jì)細(xì)節(jié)都有什么通用的原則：

二、UX通用原則

遵循由外向內(nèi)，由整體到局部的方式來展開：

1. 表層

認(rèn)識(shí)一款產(chǎn)品，首先是表層（相當(dāng)于人的外貌）

產(chǎn)品里我們把它叫做UI界面層。

設(shè)計(jì)原則：符合用戶群體、產(chǎn)品定位風(fēng)格；結(jié)構(gòu)清晰簡潔。

主要要求會(huì)分為：

A、美感統(tǒng)一：

1、符合產(chǎn)品定位的配色方案，比如字體、圖標(biāo)設(shè)計(jì)風(fēng)格的統(tǒng)一；科技（藍(lán)色）、醫(yī)療（綠色）…….

2、不同終端還要滿足響應(yīng)式設(shè)計(jì)（適應(yīng)不同分辨率和屏幕大小）

B、控件統(tǒng)一：盡量使用標(biāo)準(zhǔn)控件集；形成用戶穩(wěn)定的認(rèn)知且能提升操作效率。

注：關(guān)于標(biāo)準(zhǔn)控件集，有很多現(xiàn)成且成熟的UI框架可以直接用：

如阿里巴巴的企業(yè)級(jí)Ant Design、適用于中后臺(tái)應(yīng)用；開源前端框架Bootstrap、Google 的 Material Design、Vue.js 等等，產(chǎn)品經(jīng)理可以參考多看培養(yǎng)自己的產(chǎn)品結(jié)構(gòu)感，提升對(duì)UI設(shè)計(jì)的審美和判斷力，同時(shí)運(yùn)用于開發(fā)也能節(jié)省大量的團(tuán)隊(duì)時(shí)間和精力。

具體控件統(tǒng)一要求如：

1. 對(duì)齊方式要一致、相鄰控件的間距要對(duì)等；同一類型頁面尺寸、顏色、樣式要一致
2. 要易于識(shí)別理解，位置合理、傳達(dá)的信息與承載的功能要匹配；必要的時(shí)候，要具備引導(dǎo)性提示，且交互方式盡量要一致

比如列表都會(huì)用的頁簽篩選控件，A控件左彈出、B控件右彈出、C上彈出，就很錯(cuò)亂。

以上，更多由UI來做、產(chǎn)品經(jīng)理得把關(guān)，并逐步形成團(tuán)隊(duì)里成熟且可復(fù)用的標(biāo)準(zhǔn)控件集。

2. 框架布局層

1、各框架、導(dǎo)航、區(qū)域劃分清晰合理，符合用戶直覺，可幫助用戶快速理解和操作。

2、簡潔、突出核心和關(guān)鍵；

3. 信息結(jié)構(gòu)層

1、信息層級(jí)結(jié)構(gòu)關(guān)系合理

（比如根據(jù)重要性，信息有主次之分、先后之分；根據(jù)內(nèi)容的顏色、字體的粗細(xì)、大小來表達(dá)信息層級(jí)關(guān)系）；或者將相關(guān)功能、信息進(jìn)行分組、歸類展示。

常見的組織方式包括目錄結(jié)構(gòu)、標(biāo)簽/標(biāo)簽頁、菜單導(dǎo)航等。

2、信息的內(nèi)容：

a、可擴(kuò)展性：在設(shè)計(jì)信息結(jié)構(gòu)時(shí)考慮未來的擴(kuò)展和變化，確保界面可以容納未來新的功能和內(nèi)容,并保證了在更新調(diào)整時(shí)，不影響其他的模塊。

比如瀏覽器提供了各種插件和擴(kuò)展，后臺(tái)系統(tǒng)提供用戶可以自定義去管理界面流程或者列表內(nèi)容、配置數(shù)據(jù)屬性等

b、可反饋：無歧義、有引導(dǎo)性、簡潔標(biāo)識(shí)和反饋，幫助用戶快速找到所需的功能或者信息

比如進(jìn)入頁面空數(shù)據(jù)時(shí)，需要引導(dǎo)信息反饋下一步可能的任務(wù)動(dòng)作，避免用戶的失落感

再比如保存文件時(shí)，通過通知的信息引導(dǎo)用戶去清理文件磁盤等等

諸如成功提示、表單驗(yàn)證提示、按鈕點(diǎn)擊反饋、異常錯(cuò)誤反饋等很多

c、信息可視化：為了便于用戶了解，降低學(xué)習(xí)成本；

可以采用圖標(biāo)、圖像等可視化方式，比如高德的駕車圖標(biāo)，很輕易就理解自駕路線；自行車就是騎車路線；進(jìn)度、百分比圖標(biāo)就是任務(wù)進(jìn)度

3、信息關(guān)聯(lián)性和便于查找

a、比如相關(guān)的功能和內(nèi)容，通過合理的導(dǎo)航和菜單結(jié)構(gòu)、分類進(jìn)行關(guān)聯(lián)

訂單管理類：新增訂單、訂單取消、訂單記錄等

客戶管理類：客戶新增、客戶轉(zhuǎn)移、客戶跟進(jìn)等

b、數(shù)據(jù)關(guān)聯(lián)或者搜索：

比如相關(guān)信息的頁面跳轉(zhuǎn)、標(biāo)簽可點(diǎn)擊的設(shè)置、通過信息關(guān)鍵詞進(jìn)行高效查找

4. 頁面層級(jí)

1、頁面層級(jí)關(guān)系合理：操作路徑不能較深，一般保持在3-4個(gè)層級(jí)；降低用戶操作復(fù)雜性，不至于將功能的重心分散

2、可閉環(huán)、可返回、可回退、各頁面關(guān)聯(lián)且完整（指的是承載信息、功能、流程的完整）

3、確保頁面導(dǎo)航的一致性和可見性：如常用的導(dǎo)航模式：菜單、標(biāo)簽頁、面包屑導(dǎo)航等

4、符合用戶習(xí)慣:

a、頁面信息層級(jí)放置：

遵循整體到局部，比如列表—詳情—分支操作頁面；再比如搜索是針對(duì)全局頁面的信息查詢，一般會(huì)置頂

b、功能層級(jí)放置：

一級(jí)、二級(jí)、三級(jí)功能劃分層級(jí)明確且合理，有主次之分；比如一款購物產(chǎn)品，促成用戶購物下單是主要場景，你肯定不能把功能菜單隱藏在較深的頁面層級(jí)里

c、反饋引導(dǎo)處理：

比如常見的新手引導(dǎo)頁面在哪些場景放置，再比如用戶在3層級(jí)頁面操作結(jié)束后，點(diǎn)擊返回到上一層級(jí)還是主層級(jí)頁面還是引導(dǎo)去新的頁面？

5. 功能層

說完了界面層、我們?cè)賮砩罨⒄f下功能層

1、人機(jī)功能交互層：

功能交互：用戶操作使用上

a、可閉環(huán)（大功能、小功能）、尤其是流程類的業(yè)務(wù)；

無論哪種形式的閉環(huán)，都需要盡量具備可操作、可溯源（數(shù)據(jù)/操作記錄）

b、操作反饋機(jī)制：功能正常主分支、異常分支的操作反饋

主要通過顏色狀態(tài)、文字/聲音/觸感、撤銷或者恢復(fù)、動(dòng)態(tài)交互（比如實(shí)時(shí)數(shù)據(jù)更新、位置的改變等）來體現(xiàn)

除了業(yè)務(wù)功能層的交互反饋，也不能忽視非業(yè)務(wù)層面的反饋設(shè)計(jì)：

比如空頁面設(shè)計(jì)、toast設(shè)計(jì)（考慮不同終端的差異性，合理使用）、網(wǎng)絡(luò)不佳、加載失敗、服務(wù)器崩潰、文件不存在、權(quán)限不足、磁盤空間不足等文件讀寫錯(cuò)誤異常，數(shù)據(jù)調(diào)用異常、安全異常、操作系統(tǒng)版本不匹配等

產(chǎn)品經(jīng)理需要針對(duì)以上異常提供處理機(jī)制，并持續(xù)監(jiān)測、改進(jìn)和修復(fù)。

c、外圍功能模塊的調(diào)用關(guān)系

比如一些前置條件：

• 系統(tǒng)要求：某些功能可能對(duì)特定的操作系統(tǒng)、設(shè)備或軟件版本、聯(lián)網(wǎng)有特定的要求，需要確保面向用戶的系統(tǒng)符合這些要求
• 資源信息：比如內(nèi)部關(guān)聯(lián)：權(quán)限（語音、相機(jī)、空間、定位、功能數(shù)據(jù)權(quán)限）等或者有業(yè)務(wù)數(shù)據(jù)交互的模塊；再比如外部集成：（聚合支付、人臉識(shí)別、打印機(jī)、掃描儀）等

包括后置條件的考慮：即操作結(jié)束后結(jié)果是什么、需不需要處理、有什么影響

比如功能反饋出現(xiàn)bug，應(yīng)該提供反饋并及時(shí)執(zhí)行修復(fù)措施，以確保功能能夠正常工作。

再比如數(shù)據(jù)保存或者操作出于安全考慮、需要有應(yīng)對(duì)的監(jiān)控報(bào)警措施并同步保存數(shù)據(jù)及操作記錄。

訂單取消后的狀態(tài)設(shè)計(jì)等等

2、數(shù)據(jù)交互層面上

a、前置、后置數(shù)據(jù)調(diào)用，同步刷新、加載等規(guī)則、數(shù)據(jù)校驗(yàn)

b、考慮不同的數(shù)據(jù)類型（語音、視頻等）對(duì)性能和系統(tǒng)穩(wěn)定性、兼容性的影響，

比如為了解決跨平臺(tái)的兼容性，通常會(huì)將視頻格式選擇為廣泛兼容的格式（如MP4），不然有的瀏覽器可能會(huì)打不開；

再比如視頻的存儲(chǔ)傳輸也會(huì)占據(jù)很大的空間，要綜合考慮選擇合適的數(shù)據(jù)類型和處理方案；

c、數(shù)據(jù)安全和隱私保護(hù)：要考慮在部分?jǐn)?shù)據(jù)的交互上，采取一些方式保證安全。比如數(shù)據(jù)脫敏加密（常見的有手機(jī)號(hào)、姓名、身份證、訂單交易額等隱私信息）

6. 最后還需要考慮非功能層DFX

DFX＝“Design for X”，表示面向產(chǎn)品非功能性屬性的設(shè)計(jì)。其中“X”代表面向產(chǎn)品全生命周期或其中某一環(huán)節(jié)，如代表系統(tǒng)性能要求的可拓展性、易用性、穩(wěn)定性等，代表產(chǎn)品競爭力或決定產(chǎn)品競爭力的因素，如可遷移性、網(wǎng)絡(luò)安全性等。

在傳統(tǒng)的工業(yè)產(chǎn)品制造中，DFX需求包括但遠(yuǎn)遠(yuǎn)不僅限于以上特性；甚至有幾十種，感興趣可以去查閱學(xué)習(xí)；放在軟件行業(yè)，產(chǎn)品經(jīng)理可以根據(jù)行業(yè)、產(chǎn)品定位、客戶等多方需求衡量產(chǎn)品的DFX能力。

注：大部分情況下，很多PM都會(huì)忽略這些、但其實(shí)DFX方面的需求，我們需要在產(chǎn)品設(shè)計(jì)前甚至各個(gè)階段都要提前與團(tuán)隊(duì)進(jìn)行方案探討。

目標(biāo)就是：通過衡量產(chǎn)品DFX的特性，使我們?cè)O(shè)計(jì)的軟件更加人性化、易用性、且可靠安全，從而提高質(zhì)量、效率和成本、用戶滿意度。

經(jīng)過篩選后，具體產(chǎn)品經(jīng)理主要關(guān)注考量以下關(guān)鍵特性，并根據(jù)需要增加部分產(chǎn)品功能設(shè)計(jì)：

綜上，通過6要素（界面表層、框架層、信息結(jié)構(gòu)層、頁面級(jí)別層、人機(jī)功能交互層、數(shù)據(jù)交互層）技巧拆解，

如果你能理解，并逐步運(yùn)用好以上所說的設(shè)計(jì)原則，就可以很好地做出一個(gè)相對(duì)合格的產(chǎn)品了，這是做一款成功產(chǎn)品的必要且充分條件。

三、結(jié)語（再多說幾句）

同時(shí)，更需要關(guān)注和思考的是：

要主動(dòng)構(gòu)建自我知識(shí)體系，并通過實(shí)踐積累具象的方法，從而不斷完善和加強(qiáng)這棵“知識(shí)樹”，這無疑是一個(gè)正向的良性循環(huán)，因?yàn)檫@意味著體系化可以有助于產(chǎn)品思維，高效地遷移和強(qiáng)化；意味著我們?cè)诿鎸?duì)不同的業(yè)務(wù)要求時(shí)，都可以快速地去把產(chǎn)品需求可生產(chǎn)化，甚至可商業(yè)化；這才是產(chǎn)品經(jīng)理、又或者可以說是一個(gè)人，最底層的強(qiáng)者思維。