本文以 MAC 系統(tǒng)的下拉菜單來(lái)作為案例，看看我們?cè)谝粋€(gè)簡(jiǎn)單的控件設(shè)計(jì)中看到了多少產(chǎn)品設(shè)計(jì)信息。

最近認(rèn)識(shí)了一個(gè)做心理醫(yī)生的朋友，相聊甚歡甚至有一種相見(jiàn)恨晚的感覺(jué)，然后他問(wèn)了我一個(gè)問(wèn)題：“你知道為什么我們這么聊得來(lái)么？?！?/p>

我說(shuō)：“這還不簡(jiǎn)單，三觀一致唄?！?/p>

他的回答遠(yuǎn)遠(yuǎn)出乎我的意料：“并不是我和你的三觀真的一致，而是我讓你感覺(jué)我的三觀和你一致”。

這讓我一楞，他和我詳細(xì)解釋了一下。他有一種超能力，他可以在與人社交時(shí)不自覺(jué)的進(jìn)行一種“黑客行為”：他可以讓對(duì)方的防御心理瞬間瓦解，讓對(duì)方突然之間產(chǎn)生一種熟悉感，完全處于不設(shè)防甚至擁抱的狀態(tài)。

這可太讓我好奇了，忍不住追問(wèn)他到底是如何獲得這種能力的。抵擋不住我的軟磨硬泡，他告訴我這種能力并不是先天得到的，而是后天磨練出來(lái)的。中國(guó)人太重面子了，他們?cè)诿鎸?duì)心理醫(yī)生的時(shí)候總喜歡遮遮掩掩，不愿意說(shuō)真話。但心理醫(yī)生一定要能讓病人敞開(kāi)心扉，說(shuō)出自己的真實(shí)情況。

基于這個(gè)原因，他只能訓(xùn)練自己這項(xiàng)特殊能力，學(xué)會(huì)去通過(guò)穿著、行為、談吐等信息，去尋找每個(gè)人藏在內(nèi)心中真正的東西。剛開(kāi)始這的確很困難，但當(dāng)他看了10個(gè)人、100個(gè)人、1000個(gè)人之后，他就擁有了這個(gè)超能力。

他的這番話，不禁讓我想起我剛進(jìn)入產(chǎn)品經(jīng)理這個(gè)行業(yè)的時(shí)候。我們都知道，產(chǎn)品經(jīng)理是一個(gè)很神奇的職位，設(shè)計(jì)、運(yùn)營(yíng)、開(kāi)發(fā)甚至剛畢業(yè)的任意專業(yè)的應(yīng)屆生都可以擔(dān)任這個(gè)職位，這就意味著在產(chǎn)品經(jīng)理的中低級(jí)職稱是沒(méi)有入職能力的門檻和標(biāo)準(zhǔn)的。一個(gè)沒(méi)有門檻和標(biāo)準(zhǔn)的職位能力要怎么提升？那就成了每個(gè)剛?cè)胄械漠a(chǎn)品經(jīng)理急需解決的問(wèn)題。

很多產(chǎn)品經(jīng)理剛開(kāi)始就喜歡去看文章、聽(tīng)課程，不是說(shuō)這樣不好，而是當(dāng)我們?cè)诿鎸?duì)一篇文章或課程時(shí)，不同人捕捉到的信息和內(nèi)容是不一樣的。你能捕捉到多少信息取決于你對(duì)文章里提到的場(chǎng)景的感知。如果沒(méi)有經(jīng)歷過(guò)這種場(chǎng)景，你的產(chǎn)品認(rèn)知就處于一種天然的粗糙狀態(tài)，對(duì)大量潛伏在這個(gè)場(chǎng)景中的微信息和隱藏信息都沒(méi)有任何感知。

所以，我認(rèn)為作為產(chǎn)品經(jīng)理剛開(kāi)始應(yīng)該要反復(fù)去體驗(yàn)大廠的一些成熟產(chǎn)品（最好是競(jìng)品），去摸索每個(gè)頁(yè)面、每個(gè)控件、每個(gè)元素中隱含的產(chǎn)品設(shè)計(jì)以此來(lái)塑造、激活、強(qiáng)化、優(yōu)化我們產(chǎn)品能力的毛細(xì)血管，只有這樣，這些毛細(xì)血管般的能力才可能整整形成我們自己的競(jìng)爭(zhēng)力。

今天我們就拿 MAC 系統(tǒng)的下拉菜單來(lái)作為案例，看看我們?cè)谝粋€(gè)簡(jiǎn)單的控件設(shè)計(jì)中看到了多少產(chǎn)品設(shè)計(jì)信息。

為什么要挑選下拉菜單這個(gè)組件？相信大家都了解過(guò)用戶體驗(yàn)五要素，而下拉菜單這個(gè)控件涉及了所有五個(gè)要素，拿它作為案例來(lái)說(shuō)明可以更具有代表性。

戰(zhàn)略層&范圍層

戰(zhàn)略層講的是產(chǎn)品目標(biāo)和用戶需求。首先，我們要弄明白為什么要選用下拉菜單這個(gè)控件。

從用戶需求上看，用戶并不會(huì)提出要使用一個(gè)下拉菜單，因?yàn)橛脩艨赡芨静恢老吕藛问莻€(gè)什么東西。用戶需求是能夠快速的找到或使用他需要的功能，而在這一點(diǎn)上產(chǎn)品目標(biāo)其實(shí)和用戶需求是一致的。但作為產(chǎn)品我們還需要考慮公司自己本身的業(yè)務(wù)因素，所以我們進(jìn)入到下一步范圍層的設(shè)計(jì)。

范圍層就是在明確我們需要做哪些功能、以及怎么做來(lái)滿足用戶的需求，要知道要讓用戶快速找到自己想要的功能是有很多種實(shí)現(xiàn)方式的。

我們舉一些例子：解讀用戶的腦電波直接打開(kāi)相應(yīng)的功能、給一個(gè)搜索框用戶直接搜索、平鋪所有的操作讓用戶遍歷…我們要想辦法綜合考慮成本與效率找到一種性價(jià)比最高的實(shí)現(xiàn)方式。而我們的解決方案是使用MAC自帶的下拉菜單，為什么？主要有以下幾個(gè)原因：

• 下拉菜單控件能滿足用戶需求與產(chǎn)品目標(biāo)；
• 開(kāi)發(fā)成本低，直接調(diào)用即可；
• 針對(duì)這個(gè)場(chǎng)景，用戶習(xí)慣已經(jīng)養(yǎng)成，學(xué)習(xí)成本低。

并且MAC的下拉控件設(shè)計(jì)的較為成熟，很多細(xì)分下的場(chǎng)景都有相應(yīng)的功能可以滿足，比如：

• 操作的快捷調(diào)用
• 操作的禁用
• 操作的級(jí)聯(lián)
• …

整體而言，在沒(méi)有找到更合適的解決方案前，我們就擬定使用下拉菜單這個(gè)控件來(lái)解決用戶需求，那接下來(lái)我們進(jìn)入結(jié)構(gòu)層面。

結(jié)構(gòu)層

在結(jié)構(gòu)層主要定義的是我們的功能最終呈現(xiàn)給用戶的產(chǎn)品結(jié)構(gòu)與信息架構(gòu)，在這一步我們開(kāi)始將用戶的需求具化為產(chǎn)品設(shè)計(jì)。我們回到戰(zhàn)略層的目標(biāo)，快速的找到或使用他需要的功能。要知道下拉菜單的主要功能是：

當(dāng)頁(yè)面上的操作命令過(guò)多時(shí)，用此組件可以收納操作元素。點(diǎn)擊或移入觸點(diǎn)，會(huì)出現(xiàn)一個(gè)下拉菜單?？稍诹斜碇羞M(jìn)行選擇，并執(zhí)行相應(yīng)的命令。

如果我們只是將所有的操作隨意的丟在一個(gè)下拉菜單里，這肯定是完全無(wú)法達(dá)到戰(zhàn)略層的要求的，那我們?cè)趺崔k？

首先，我們要先將這些操作自身的特性進(jìn)行合理歸類。

為什么要這么做？因?yàn)槲覀內(nèi)祟悓ふ倚畔⒌姆绞绞菢錉畹?，我們?huì)先去找到大的品類（樹中最粗的枝干），以此順延不斷細(xì)分（最粗枝干上的小枝干），直到定位到自己需要的信息。我們來(lái)看一個(gè)案例：

從這個(gè)案例中我們可以看到，你看到了至少幾個(gè)層級(jí)？我看到的是至少3.5個(gè)，我們以“編輯”為例：

• 第1層級(jí)：編輯等操作；
• 第2層級(jí)：撤銷等操作；
• 第2.5層級(jí)：撤銷與重做（頁(yè)面上做了區(qū)分但是交互上并沒(méi)有進(jìn)入下一層級(jí)）；
• 第3層層級(jí)：搜索后續(xù)的延伸操作；
• 更多層級(jí)：搜索后續(xù)的延伸操作的后續(xù)操作（可能不存在）。

當(dāng)我們將操作分類完成之后，我們的產(chǎn)品結(jié)構(gòu)設(shè)計(jì)就結(jié)束了嗎？

答案是否定的，雖然我們進(jìn)行了合理的歸類，但是針對(duì)新用戶甚至一些老用戶，他們?nèi)绻荒芨鶕?jù)自己的認(rèn)知找到相應(yīng)的操作，那我們的設(shè)計(jì)也是失敗的。所以我們還需要引入一套信息加工系統(tǒng)，建立用戶能夠認(rèn)知的索引，通過(guò)這套系統(tǒng)我們可以盡可能的縮小用戶對(duì)產(chǎn)品路徑的認(rèn)知差。

舉個(gè)現(xiàn)實(shí)中的案例，以前我出遠(yuǎn)門時(shí)總會(huì)忘記點(diǎn)東西，要么是身份證、要么是鑰匙。但自從我記住了’身手鑰錢’四字真言后，雖然我的記憶力并沒(méi)有提高，但我再出門的時(shí)候就沒(méi)有忘記過(guò)這最重要的四樣?xùn)|西。

在下拉菜單中的索引就是我們針對(duì)于每一個(gè)層級(jí)分類的命名，比如’編輯’、’查看’等等，針對(duì)每一個(gè)命名我們都需要深思熟慮，明確它們能成為用戶使用產(chǎn)品的風(fēng)向標(biāo)。

框架層

完成了結(jié)構(gòu)層的設(shè)計(jì)后，用戶能夠通過(guò)索引用最少的操作步驟就找到相應(yīng)的操作，我們的產(chǎn)品設(shè)計(jì)到這里就結(jié)束了嘛？大家想一下，雖然你的產(chǎn)品結(jié)構(gòu)的很清晰、索引命名很合理，但用戶可能也要遍歷過(guò)你每一層的結(jié)構(gòu)后才知道如何進(jìn)入下一層。

以下圖為例，用戶希望找一個(gè)“幫助”下一級(jí)的操作，可能就需要遍歷“文件”、“編輯”、“查看”等等。

類似的問(wèn)題怎么解決？再次回到我們的戰(zhàn)略目標(biāo)（大家一定不能忘記產(chǎn)品設(shè)計(jì)的初衷），快速的找到或使用他需要的功能。如果我們能盡可能的讓用戶減少遍歷的次數(shù)，降低用戶的使用成本，就可以無(wú)限貼近于我們的戰(zhàn)略目標(biāo)。這時(shí)候，我們就進(jìn)入了框架層的設(shè)計(jì)。

框架層是用于優(yōu)化頁(yè)面設(shè)計(jì)布局的，我們要明確哪些元件該放在什么位置。熟悉網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)的朋友可能知道，我們?yōu)g覽信息的習(xí)慣是從左上往右下。我們將最高頻的功能放至左上，將最低頻的功能放至右下，就可以有效的減少用戶遍歷的次數(shù)。

這里的案例我們就不再枚舉，我放兩張圖上來(lái)大家可以從框架層設(shè)計(jì)上來(lái)解讀下，為何快捷鍵的說(shuō)明要放到文字后，而圖標(biāo)卻要放在文字前。

表現(xiàn)層

從戰(zhàn)略到框架，很多產(chǎn)品經(jīng)理認(rèn)為自己的工作已經(jīng)完成了，至于表現(xiàn)層，那應(yīng)該是設(shè)計(jì)師們應(yīng)該考慮的東西。但我們要知道離用戶最近的其實(shí)就是表現(xiàn)層，這包含著視覺(jué)、聽(tīng)覺(jué)、觸覺(jué)的體驗(yàn)設(shè)計(jì)。一個(gè)好的表現(xiàn)層設(shè)計(jì)，能夠進(jìn)一步的幫助我們達(dá)成戰(zhàn)略目標(biāo)。就像蘋果前 CEO 喬布斯對(duì) iphone 的設(shè)計(jì)挑剔到了不可思議的程度，只有這樣精益求精的人才能做出一款改變世界的產(chǎn)品。

當(dāng)然作為非設(shè)計(jì)出身的產(chǎn)品經(jīng)理，我這里只能拋磚引玉來(lái)簡(jiǎn)單說(shuō)一個(gè)關(guān)于下拉菜單的表現(xiàn)層設(shè)計(jì)。

當(dāng)用戶點(diǎn)擊或 hover “服務(wù)”時(shí)，用戶的場(chǎng)景已經(jīng)比較明確（拋開(kāi)誤操作的可能性），用戶將聚焦于服務(wù)下一層級(jí)的操作進(jìn)行展開(kāi)，這時(shí)通過(guò)將“服務(wù)偏好設(shè)置”對(duì)話框適當(dāng)覆蓋“服務(wù)”對(duì)話框的邊緣并添加相應(yīng)的陰影，這可以讓兩個(gè)對(duì)話框有層次遞進(jìn)感，使’服務(wù)偏好設(shè)置’的顯示優(yōu)先級(jí)更高，減少用戶在“服務(wù)”對(duì)話框的注意力損耗。

今天的分享就到這里，希望能對(duì)大家有所幫助。

#專欄作家#

Pirate，人人都是產(chǎn)品經(jīng)理專欄作家。關(guān)注前沿科技與教育行業(yè)，擅長(zhǎng)產(chǎn)品設(shè)計(jì)與數(shù)據(jù)分析。

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

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