作為產(chǎn)品經(jīng)理，了解一定的UI設(shè)計(jì)準(zhǔn)則是十分必要的。

作為一個(gè)產(chǎn)品經(jīng)理助理，在短短幾個(gè)月的產(chǎn)品工作學(xué)習(xí)中，發(fā)現(xiàn)學(xué)習(xí)產(chǎn)品的人確實(shí)是需要通過(guò)不斷的學(xué)習(xí)讓自己變成一個(gè)“T型人才”，即不僅要在自己的產(chǎn)品領(lǐng)域?qū)W透學(xué)深，還要在其他領(lǐng)域，如心理學(xué)，廣告學(xué)，運(yùn)營(yíng)，以及UI交互等或多或少地涉獵一些，這樣子才可以避免 跟UI談?wù)撛O(shè)計(jì)圖地時(shí)候明明覺(jué)得布局不合理，卻因?yàn)樽约簺](méi)有這方面的理論知識(shí)而開(kāi)不了口，說(shuō)服不了人，或者被運(yùn)營(yíng)一句“用戶不喜歡這樣的產(chǎn)品”而被懟得不知道要說(shuō)些什么。

因此，為了避免這些尷尬的事情再次發(fā)生，我只能上網(wǎng)看了一些UI設(shè)計(jì)準(zhǔn)則的資料，打算通過(guò)網(wǎng)絡(luò)上的學(xué)習(xí)，等在下次有機(jī)會(huì)跟UI交鋒的時(shí)候可以很有底氣的說(shuō)出自己的道理，例如引用某某某某書(shū)的某某定理，從而成功的讓UI不再覺(jué)得我是個(gè)設(shè)計(jì)理念什么都不懂的小白。

哈哈，回歸正題，我現(xiàn)在將選取一些我覺(jué)得比較有用的規(guī)則，根據(jù)自己的看到的書(shū)結(jié)合實(shí)際例子讓這些理論更加通俗易懂的讓跟我處于同Level的小白們可以進(jìn)行學(xué)習(xí)。

保持一致的原則

定義闡述

讓我們?cè)陧?yè)面同個(gè)結(jié)構(gòu)擺放相同的信息和控件，可以減少用戶的思考時(shí)間，從而利用慣性選擇自己需要的相關(guān)的控件，大大減少操作成本。不同頁(yè)面上提供的相同功能的控件和數(shù)據(jù)顯示應(yīng)該擺放在每一頁(yè)的相同位置，而且應(yīng)該有相同的顏色，字體跟陰影等。這樣子的一致性能讓用戶很快地找到跟識(shí)別他們，減少誤區(qū)。

實(shí)例闡述

例如在一個(gè)網(wǎng)站中，如果其中一個(gè)網(wǎng)頁(yè)的提交按鈕跟其他網(wǎng)頁(yè)的提交的按鈕做得不一樣的話，將會(huì)大大增加用戶去尋找該按鈕的操作成本以及相對(duì)應(yīng)的思考的時(shí)間。

?習(xí)慣性原則

人們?cè)趯?duì)于一個(gè)判斷，剛開(kāi)始會(huì)有相對(duì)應(yīng)的抵觸心理，即對(duì)問(wèn)題的題眼會(huì)相對(duì)應(yīng)來(lái)說(shuō)比較敏感，但是越是到了后期人們?cè)饺菀追潘删?，?duì)題目的類(lèi)型也將不會(huì)那么的敏感。

因此，如果一直點(diǎn)擊某個(gè)位置的具體按鈕，到后期這種對(duì)該按鈕的敏感程度會(huì)逐漸降低。我們可以利用這個(gè)特性將重要的東西放到流程的后面進(jìn)行展示。

比如說(shuō)我們?cè)谙螺d某款產(chǎn)品的時(shí)候，等到下載完成之后，彈出框會(huì)默認(rèn)勾選一些用戶會(huì)有抵觸的東西，如果下載的是瀏覽器該類(lèi)的產(chǎn)品，則會(huì)彈出默認(rèn)勾選該網(wǎng)頁(yè)為默認(rèn)瀏覽器，或者像用戶注冊(cè)流程的注冊(cè)條款，也是默認(rèn)把一些讓用戶不舒服的元素放在最后的步驟進(jìn)行勾選。

接近性原理

定義闡述

物體之間的相對(duì)距離會(huì)影響我們感知他們是否以及如何組織在一起。互相靠近（相對(duì)于其他物體）的物體他們看起來(lái)像是一組，而那些距離較遠(yuǎn)的就不是。設(shè)計(jì)者們就是利用這一種原理使用分組框或者屏幕上的控件和數(shù)據(jù)顯示分隔開(kāi)來(lái)。從而使得整個(gè)畫(huà)面看起來(lái)會(huì)比較清楚和有條理性。給大家看一個(gè)例子，像有些網(wǎng)頁(yè)的UI設(shè)計(jì)會(huì)做出這樣子的圖片

由于斜杠跟文字靠的過(guò)近，容易讓人家覺(jué)得斜杠跟文字是一組，那么這樣子就會(huì)導(dǎo)致格式看起來(lái)很奇怪。讓人家感覺(jué)怎么前面那組文字跟著橫桿，后面這一組文字就沒(méi)有。

深淺度原理

兩個(gè)顏色越淺，越不飽和，就越難把他們區(qū)分開(kāi)。比如說(shuō)白色跟米黃色，蒂芙尼藍(lán)跟淺藍(lán)色或者淺綠色，由于這些顏色過(guò)于接近以及飽和度都不高，如果將這些顏色運(yùn)用在選中狀態(tài)和未選中狀態(tài)，當(dāng)前步驟和非當(dāng)前步驟的狀態(tài)，那么用戶就在視覺(jué)上面沒(méi)辦法進(jìn)行一個(gè)明顯的判斷，無(wú)法分清哪個(gè)是在當(dāng)前下進(jìn)行，哪個(gè)不是在當(dāng)下進(jìn)行。

因此，如果跟你共事的UI是半路出家，或者對(duì)自己的專(zhuān)業(yè)沒(méi)有研究很透徹的話，使用這種難以識(shí)別的顏色做流程的話，你作為PM大可硬氣的跟他說(shuō)：根據(jù)色塊深淺度原理，你這樣子做是特別不合理的。

難以辨認(rèn)的書(shū)寫(xiě)和字型

對(duì)比研究表明，有閱讀技巧的人在讀大寫(xiě)文字速度的內(nèi)容比閱讀小寫(xiě)文字內(nèi)容的速度慢10%-15%。當(dāng)前研究表明說(shuō)明，這主要是缺乏閱讀大寫(xiě)字型的訓(xùn)練造成的?？招妮喞€的字型讓特征識(shí)別更加困難。

封閉性原理

我們視覺(jué)系統(tǒng)自動(dòng)嘗試將敞開(kāi)的圖形關(guān)閉起來(lái)，從而將其感知為完整的物體而非分散的碎片。因此，我們將分散的弧形感知為一個(gè)圓：描述一疊對(duì)象構(gòu)成的整體又或者是抽象物體的兩種表現(xiàn)形式。

主體/背景

當(dāng)一個(gè)小的物體與更大的色塊重疊的時(shí)候，我們傾向于認(rèn)為小的物體是主體而大的物體是背景。當(dāng)物體重疊時(shí)，我么我們把小的那個(gè)當(dāng)作是背景之上的主體如彈出toast的時(shí)候，用戶注意力焦點(diǎn)的內(nèi)容臨時(shí)成為新信息的背景，新的信息短暫地作為新的主體。

菲茨定律在設(shè)計(jì)中的應(yīng)用：

目標(biāo)（圖形化按鈕，菜單和鏈接）要足夠大，容易讓人么點(diǎn)到，不要讓實(shí)際可點(diǎn)擊的對(duì)象至少跟看起來(lái)的一樣大，不要展示大的按鈕但只有很小的點(diǎn)擊區(qū)域接受點(diǎn)擊，這邊的例子如在勾選框 單選框和切換開(kāi)關(guān)等控件的文字標(biāo)簽中，我們應(yīng)該讓他們像控件本身一樣是可接受點(diǎn)擊，從而擴(kuò)大點(diǎn)擊區(qū)域，使得用戶的體驗(yàn)更好。

將重要的目標(biāo)放置在靠近屏幕邊緣的位置，這樣非常方便人們點(diǎn)擊。如我們的刪除ICON。

?引導(dǎo)定律

沿著受限路徑移動(dòng)指針。指針在一直受限的路徑移動(dòng)并移動(dòng)到達(dá)目標(biāo)，那么路徑越寬，你覺(jué)越能越快地將指針移動(dòng)到目標(biāo)。路徑寬意味著不必小心地移動(dòng)指針，就能以迅雷不及掩耳地快速移動(dòng)目標(biāo)。例如：右拉菜單在應(yīng)用軟件中相當(dāng)常見(jiàn)，如商品列表，右擊出現(xiàn)的彈窗。

行為召喚

在形狀上使用漸變、陰影、圓角，按鈕文字上使用有緊迫感和即時(shí)性的文字，使得按鈕更加具有召喚行為，激發(fā)用戶點(diǎn)擊的欲望。

時(shí)間感知

一個(gè)視覺(jué)事件與我們對(duì)他地完整感知之間地時(shí)間差：0.1S，所以一個(gè)toast提示的時(shí)間差最好大于0.1S。

能感知到一個(gè)事件導(dǎo)致另一個(gè)事件地事情間間隔最長(zhǎng)不超過(guò)0.14S:例如你觸發(fā)一個(gè)事件但是這個(gè)事件地相應(yīng)超過(guò)0.14秒，那么這個(gè)事件就沒(méi)有任何意義，所以你再點(diǎn)擊某一個(gè)按鈕的時(shí)候，時(shí)間最好超過(guò)0.14S.

還有一些細(xì)小的理論

1 人們對(duì)搜索結(jié)果往往比較重視，對(duì)搜索框不會(huì)特別注意。因此搜索的話最好要有頁(yè)面的提示，比如說(shuō) 百度搜索

2 導(dǎo)航深度：在超過(guò)倆個(gè)層級(jí)的結(jié)構(gòu)中，提供“面包屑“式的導(dǎo)航路徑能提示當(dāng)前用戶處于什么位置，這種情況現(xiàn)在更多的是運(yùn)用在網(wǎng)站網(wǎng)頁(yè)，而不是APP上面

3 人們對(duì)于短期的記憶需要不斷的強(qiáng)化跟回憶，而對(duì)于長(zhǎng)期記憶，則需要運(yùn)用工具去不斷地強(qiáng)化他，因此在提供安全問(wèn)題的這一塊，我們?cè)谔峁┌踩珕?wèn)題的選擇之上，也應(yīng)該允許用戶自己創(chuàng)建自己的安全問(wèn)題，從而減少用戶的遺忘程度，從而更好的起到在忘記密碼時(shí)候，設(shè)置安全密碼的作用。

4 越多人使用的功能，應(yīng)該越可見(jiàn)：許多人需要的功能高度可見(jiàn)，用戶就能看到并且識(shí)別出可有的選擇而不是必須回憶他們?cè)谀膬?。相反，少?shù)特別是充分訓(xùn)練的人才會(huì)使用的功能，可以隱藏起來(lái)，比如以蝦米音樂(lè)作為例子，用戶最常用的就是搜歌聽(tīng)音樂(lè)，所以搜索框就放在顯而易見(jiàn)的頁(yè)面中呈現(xiàn)，然后像 圖片配樂(lè) 這個(gè)比較專(zhuān)家級(jí)別才會(huì)使用的功能，則放在了 賬號(hào)–探樂(lè)實(shí)驗(yàn)室–圖片配樂(lè)等第三級(jí)別的頁(yè)面。

5 使用視覺(jué)提示讓用戶知道自己所處的位置，一些企業(yè)網(wǎng)站使用圖片向用戶知道他們確實(shí)是在真正的公司網(wǎng)站而不是一個(gè)虛假的釣魚(yú)網(wǎng)站上（這個(gè)是一個(gè)較為前期的理論，我感覺(jué)現(xiàn)在也沒(méi)有多大的效用）。

6 措辭可以影響我們的選擇：你有一種生存率能達(dá)到90%的治療方法 ??你患了絕癥，有一種治療方法，死亡率有10%。

7?色盲難以區(qū)分的幾對(duì)顏色： 深紅色 跟 黑色 ??藍(lán)色跟紫色 淺綠色跟白色。

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

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議