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

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

如果是你，你會怎么回答？

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

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

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

怎么理解呢？

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

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

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

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

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

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

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

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

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

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

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

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

一定要學(xué)會有意識讓自己認知體系化

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

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

根本不懂這些……

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

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

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

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

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

二、UX通用原則

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

1. 表層

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

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

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

主要要求會分為：

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

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

2、不同終端還要滿足響應(yīng)式設(shè)計（適應(yīng)不同分辨率和屏幕大?。?/p>

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

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

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

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

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

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

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

2. 框架布局層

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

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

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

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

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

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

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

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

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

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

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

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

諸如成功提示、表單驗證提示、按鈕點擊反饋、異常錯誤反饋等很多

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

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

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

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

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

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

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

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

4. 頁面層級

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

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

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

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

a、頁面信息層級放置：

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

b、功能層級放置：

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

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

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

5. 功能層

說完了界面層、我們再來深化、說下功能層

1、人機功能交互層：

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

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

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

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

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

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

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

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

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

比如一些前置條件：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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