本文作者從設(shè)計(jì)原則、色彩、圖標(biāo)這3個(gè)角度對產(chǎn)品原型設(shè)計(jì)進(jìn)行了拆解。

關(guān)于B端Web產(chǎn)品前期從流程上進(jìn)行了復(fù)盤，這次從原型設(shè)計(jì)的角度來進(jìn)行梳理。

原型設(shè)計(jì)是產(chǎn)品經(jīng)理的硬技能，也是產(chǎn)品經(jīng)理與各相關(guān)方溝通的直觀橋梁。只有看到了原型demo，甲方爸爸們才會(huì)清楚的知道他們不要什么，可能還需要什么。

我的原型設(shè)計(jì)之路，從一開始的野路子，到目前的稍有章法，多虧了Ant design的組件庫、設(shè)計(jì)語言，以及參照《寫給大家看的設(shè)計(jì)書.第4版》一書中所進(jìn)行的刻意練習(xí)。

特此給大家做個(gè)小小的分享，給入門的產(chǎn)品小白以參照，如有設(shè)計(jì)師出身的產(chǎn)品大大們還請拍磚。

目錄：

1. 設(shè)計(jì)基本原則
2. Ant design精選
3. 個(gè)人建議

一、設(shè)計(jì)基本原則

參照基本的設(shè)計(jì)原則，可以幫助我們更高效、高質(zhì)量的完成原型設(shè)計(jì)。

四大設(shè)計(jì)原則，是在《寫給大家看的設(shè)計(jì)書.第4版》一書中由羅賓·威廉姆斯(RobinWilliams)提出的，包括親密性、對比、對齊、重復(fù)，適用于印刷品、出版物，也適用于Web的產(chǎn)品設(shè)計(jì)。

1. 親密性（Proximity）

含義：將相關(guān)的項(xiàng)組織在一起。彼此相關(guān)的項(xiàng)應(yīng)當(dāng)靠近，歸組在一起；不相關(guān)的項(xiàng)，則遠(yuǎn)離。

作用：有助于組織信息，減少混亂，為讀者提供清晰的結(jié)構(gòu)。

表現(xiàn)：在一個(gè)頁面上，物理位置的接近就意味著存在關(guān)聯(lián)（實(shí)際生活中也是如此）。

問題：哪副圖看起來這兩位像親密母子，哪幅像是路人？

圖源自《寫給大家看的設(shè)計(jì)書.第4版》

親密性在Web頁面的體現(xiàn)是橫向、縱向的間距。信息的關(guān)聯(lián)性越強(qiáng)，則間距越小，反之則間距越大。

間距規(guī)格分為小、中、大三種，對應(yīng)8px、16px、24px，再大些可用32px、48px。也可以參照公式來設(shè)定間距 y=8+8 * n（n>=0），y為縱向間距。這個(gè)公式不等于y=8*n（數(shù)學(xué)學(xué)渣已經(jīng)想了一遍） 來擴(kuò)展間距。

踩過的坑兒：

一期設(shè)計(jì)時(shí)，對間距的認(rèn)知是需要間距，標(biāo)準(zhǔn)自定義為10px的倍數(shù)，吭哧吭哧一頓調(diào)，還覺得頁面比上實(shí)戰(zhàn)課時(shí)畫的好，羞愧。直到原型已經(jīng)畫完了，和UI同學(xué)請教，才發(fā)現(xiàn)標(biāo)準(zhǔn)是8px的倍數(shù)，再后來看到了Ant design上的建議，先按照著規(guī)范來。

親密性bad case示例（圖源自某產(chǎn)品試用版）

2. 對齊（Alignment）

含義：任何東西都不能在頁面上隨意安放。每個(gè)元素都應(yīng)當(dāng)與頁面上的另一個(gè)元素有某種視覺聯(lián)系。

作用：使頁面統(tǒng)一而且有條理。

表現(xiàn)：在頁面中無形的一條線，常見的有左對齊、右對齊、居中對齊。Ant design建議是文案左對齊，表單冒號對齊，數(shù)字取相同的有效位的右對齊，其中冒號對齊是一種特殊的右對齊。

踩過的坑兒：

對于表單的冒號對齊，官方解釋是，能讓內(nèi)容鎖定在一定范圍內(nèi)，讓用戶眼球順著冒號的視覺流，就能找到所有填寫項(xiàng)。

目前我的理解是，表單內(nèi)存在輸入前、輸入中、輸入后三種狀態(tài)，輸入前和輸入中，需要了解填寫哪些內(nèi)容，固然是左側(cè)的項(xiàng)目信息重要。而在輸入后，左側(cè)信息變?yōu)榱溯o助，而右側(cè)輸入框中的內(nèi)容變?yōu)榱酥饕?，即使沒有左側(cè)的項(xiàng)目信息，你也依然能夠輕松理解、校驗(yàn)其內(nèi)容。

圖源自Ant Design Pro（也可對比上一張圖片，親密性上有很大差異）

3. 對比（Contrast）

含義：頁面上的不同元素之間要有對比效果，達(dá)到吸引讀者的對比效果。

作用：不僅可以用來吸引眼球，還可以用來組織信息、清晰層級、在頁面上指引讀者，制造焦點(diǎn)。

表現(xiàn)：Ant design提供了主次、總分、狀態(tài)這3種關(guān)系的對比示例。

踩過的坑兒：

主次關(guān)系對比，比如在頁面操作區(qū)一共有5個(gè)按鈕（可以用一個(gè)更多來隱藏3個(gè)按鈕）。那5個(gè)按鈕，誰是主，誰是次，需要產(chǎn)品經(jīng)理去判斷，去引導(dǎo)去告知用戶這個(gè)頁面的核心功能是什么。

主次關(guān)系不明確的bad case（優(yōu)化方案有多種）：

狀態(tài)對比，可通過改變顏色、增加輔助形狀等方法來實(shí)現(xiàn)。一開始認(rèn)為由文案來進(jìn)行狀態(tài)區(qū)分即可，顏色是非必需的。最近在學(xué)習(xí)了視覺認(rèn)知的內(nèi)容后，轉(zhuǎn)變觀念，確實(shí)可以運(yùn)用顏色來進(jìn)行輔助；例如貼近生活的紅綠燈、自然災(zāi)害的藍(lán)黃橙紅預(yù)警，都能夠讓用戶更好區(qū)分信息。

圖源自Ant Design Pro。

4. 重復(fù)（Repetition）

含義：設(shè)計(jì)的某些方面需要在整個(gè)作品中重復(fù)。重復(fù)元素可以是一種粗字體、一條粗線、某個(gè)項(xiàng)目符號、顏色、圖片、設(shè)計(jì)要素、某種格式、空間關(guān)系等。

作用：增加條理性，統(tǒng)一性，并增強(qiáng)視覺效果。

表現(xiàn)：大于1次、1個(gè)以上元素的多次出現(xiàn)；最常見、易被感知的是首頁的介紹區(qū)。

圖來自Ant Design Landing模板

踩過的坑兒：

初期在首頁中原本預(yù)留了功能介紹的區(qū)域（如上圖），因?yàn)橐黄谥挥幸粋€(gè)大功能，就被砍掉了。在合適的時(shí)間做合適的展示就好。

目前的設(shè)計(jì)中的重復(fù)元素是頁面的頂部格式，每個(gè)二級頁面統(tǒng)一使用了色塊和二級主菜單的文案為頂部內(nèi)容區(qū)，打造了系統(tǒng)的統(tǒng)一性。

二、Ant design精選

1. 設(shè)計(jì)語言

除了上文出現(xiàn)的4個(gè)基本原則，Ant design的設(shè)計(jì)語言中提到了6組進(jìn)階原則，分別是直截了當(dāng)、足不出戶、簡化交互、提供邀請、巧用過渡、即時(shí)反應(yīng)。

結(jié)合目前的經(jīng)驗(yàn)，運(yùn)用較多的是這3組原則——直截了當(dāng)、提供邀請、即時(shí)反應(yīng)。

1）直截了當(dāng)

即簡潔明了，不僅僅適用于原型設(shè)計(jì)，也是適用于文案的設(shè)計(jì)、異常信息的提示等。

B端距離用戶近，如果設(shè)計(jì)不貼合業(yè)務(wù)，文案又難以理解，那么等待你的很可能是用戶的狂轟亂炸，不斷有人詢問這操作是啥意思，這功能咋用。

最近在琢磨公司內(nèi)部用戶行為分析的平臺(tái)，作為一個(gè)產(chǎn)品看不懂另一個(gè)產(chǎn)品的用戶手冊o(╥﹏╥)o。

2）提供邀請

官方解釋是醬紫的，【邀請就是引導(dǎo)用戶進(jìn)入下一個(gè)交互層次的提醒和暗示，通常包括意符（eg：實(shí)時(shí)的提示信息）和可供性，以表明在下一個(gè)界面可以做什么】。

提供邀請，體現(xiàn)在交互之前給出反饋，解決易發(fā)現(xiàn)性問題。

圖源自中國大學(xué)MOOC網(wǎng)頁端

動(dòng)態(tài)邀請常見的是懸停（hover）邀請。如上圖，從左至右依次命名為A、B、C。

A是默認(rèn)展示效果，B是鼠標(biāo)hover效果；對比A，B有了陰影效果和右上角的更多按鈕。當(dāng)點(diǎn)擊B圖中更多按鈕后，出現(xiàn)的是C圖，告知我們可以在這里查看課程介紹和退出課程。當(dāng)你對老師的講課風(fēng)格不中意，學(xué)習(xí)精力分配不過來之時(shí)，就可以來嘗試著退出課程咯。

3）即時(shí)反應(yīng)

即在交互之后立即給出反饋。反饋過多對用戶是打擾，沒有反饋，則確定性較低，對用戶是困擾。

舉個(gè)例子：

友人發(fā)來一張有趣的圖片，你想要保存；點(diǎn)擊下載之后，系統(tǒng)剛好彈出一個(gè)toast提示【已保存到系統(tǒng)相冊】，2s后提示消失，即沒有過多打擾，也新增一枚斗圖表情包。假設(shè)沒有這個(gè)toast，強(qiáng)迫癥患者（我）要么是多次下載，要么是從APP跳出進(jìn)入相冊中進(jìn)行二次確認(rèn)。

即時(shí)無法處理完時(shí)，產(chǎn)品如何解決用戶焦慮？

一期遇到一個(gè)case，流程是用戶導(dǎo)入數(shù)據(jù)，后臺(tái)執(zhí)行校驗(yàn)后執(zhí)行增刪改查操作。

當(dāng)數(shù)據(jù)量級超過2萬條時(shí)，處理時(shí)長達(dá)到2min，數(shù)據(jù)量級較低時(shí)2s可執(zhí)行完畢。盡管在設(shè)計(jì)之初有雙重的提示，操作完成后會(huì)進(jìn)行郵件通知，然而2min內(nèi)用戶如何自處，是刷新當(dāng)前頁面，還是靜靜等待。

2. 色彩

Ant Design 將色彩體系解讀成兩個(gè)層面：系統(tǒng)級色彩體系和產(chǎn)品級色彩體系。系統(tǒng)級色彩體系主要包括了基礎(chǔ)色板、中性色板；而產(chǎn)品級色彩體系則是在具體設(shè)計(jì)過程中，基于系統(tǒng)色彩進(jìn)一步定義符合產(chǎn)品調(diào)性以及功能訴求的顏色（進(jìn)階之選）。

對于產(chǎn)品小白，比如我，基礎(chǔ)色板中共有120個(gè)顏色，可以充分滿足日常所需喔，顏色是醬紫滴。

圖源自Ant design（C位是亮點(diǎn)）

產(chǎn)品級色彩體系第一次實(shí)踐，一開始選取的是沉穩(wěn)大氣的深藍(lán)色為主體色（高大上的說法是品牌色），而后在UI同學(xué)提供首頁的設(shè)計(jì)圖后，采用了與首頁設(shè)計(jì)圖中主色調(diào)一致的顏色作為產(chǎn)品主色，代表著明亮、活力、科技。

3. 圖標(biāo)

圖標(biāo)，官方解釋是將某個(gè)概念轉(zhuǎn)換成清晰易讀的圖形，從而降低用戶的理解成本，提升界面的美觀度。

我的理解是調(diào)節(jié)枯燥的頁面，圖文結(jié)合。

目前遇到過的坑兒是，Axure中有好幾套的圖標(biāo)庫，每次都反復(fù)在幾個(gè)圖標(biāo)庫中尋找更合適的icon，時(shí)間上存在浪費(fèi)。圖標(biāo)存在的意義是在于對系統(tǒng)有效，提醒自己切勿舍本逐末?？梢韵妊芯客敢惶譱con，再進(jìn)行拓展升級打怪。

三、個(gè)人建議

1. 關(guān)于原型中的頁面說明&PRD

我的進(jìn)化史是這樣的，一開始原型上除了圖，無任何說明，文字說明依靠PRD；而后發(fā)現(xiàn)評審時(shí)大家更（只）喜歡看大原型，第二階段原型上增加說明，并且是需說明之處的臨近位置（頁面顯示有點(diǎn)吃藕）；第三階段，在原型的底部固定區(qū)域，固定顏色標(biāo)注關(guān)鍵頁面說明。

第三階段目前已固定，既可以提示關(guān)鍵信息，也可以提前整理PRD思路。

2. 關(guān)于從頭畫起&組件套用

一個(gè)組件，可套用模板組件，也可手工畫。個(gè)人建議，初期參照模板自己畫，可以更快熟悉標(biāo)準(zhǔn)、規(guī)范，鍛煉扎實(shí)的基本功；后期套用模板，高效、高質(zhì)量的完成原型設(shè)計(jì)。

畫圖是個(gè)很耗時(shí)的工作，誰畫誰知道，特別是有強(qiáng)迫癥的同學(xué)。

組件是產(chǎn)品傳達(dá)的基礎(chǔ)，組件承載的信息，才是核心。表格很容易畫出來，重要的是表格里展示哪些信息，又不展示哪些內(nèi)容。

3. 產(chǎn)品原型低保真&中保真

在產(chǎn)品的培訓(xùn)課中，當(dāng)時(shí)屬于初學(xué)階段，畫出的是低保真，已是滿足；在工作中開始畫原型時(shí)，看著低保真就覺得有些簡陋了。所以，現(xiàn)在產(chǎn)出的原型大多為中保真，并且在逐漸接近高保真，頁面的顏值有時(shí)候也是實(shí)力。

在沒有UI同學(xué)的參與時(shí)，個(gè)人建議是由產(chǎn)品經(jīng)理完成中保真頁面的原型產(chǎn)出，借由較好的原型demo，以無形的壓力督促前端同學(xué)，一起給產(chǎn)品打造個(gè)漂亮的面子。

有UI同學(xué)可合作時(shí)，產(chǎn)品經(jīng)理按照業(yè)務(wù)邏輯、設(shè)計(jì)基本原則、中性色板提供原型，由UI進(jìn)行逼格提升，各自安好~

產(chǎn)品設(shè)計(jì)經(jīng)驗(yàn)尚淺，還請各位看官不吝拍磚。

共勉。

參考：

1. Ant design設(shè)計(jì)語言 https://ant.design/docs/spec/introduce-cn

2.《寫給大家看的設(shè)計(jì)書.第4版》

本文由 @涼涼Lxy 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。