本文以 MAC 系統(tǒng)的下拉菜單來作為案例，看看我們在一個簡單的控件設(shè)計中看到了多少產(chǎn)品設(shè)計信息。

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

我說：“這還不簡單，三觀一致唄?！?/p>

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

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

這可太讓我好奇了，忍不住追問他到底是如何獲得這種能力的。抵擋不住我的軟磨硬泡，他告訴我這種能力并不是先天得到的，而是后天磨練出來的。中國人太重面子了，他們在面對心理醫(yī)生的時候總喜歡遮遮掩掩，不愿意說真話。但心理醫(yī)生一定要能讓病人敞開心扉，說出自己的真實情況。

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

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

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

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

今天我們就拿 MAC 系統(tǒng)的下拉菜單來作為案例，看看我們在一個簡單的控件設(shè)計中看到了多少產(chǎn)品設(shè)計信息。

為什么要挑選下拉菜單這個組件？相信大家都了解過用戶體驗五要素，而下拉菜單這個控件涉及了所有五個要素，拿它作為案例來說明可以更具有代表性。

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

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

從用戶需求上看，用戶并不會提出要使用一個下拉菜單，因為用戶可能根本不知道下拉菜單是個什么東西。用戶需求是能夠快速的找到或使用他需要的功能，而在這一點上產(chǎn)品目標(biāo)其實和用戶需求是一致的。但作為產(chǎn)品我們還需要考慮公司自己本身的業(yè)務(wù)因素，所以我們進入到下一步范圍層的設(shè)計。

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

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

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

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

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

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

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

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

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

如果我們只是將所有的操作隨意的丟在一個下拉菜單里，這肯定是完全無法達(dá)到戰(zhàn)略層的要求的，那我們怎么辦？

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

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

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

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

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

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

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

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

框架層

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

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

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

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

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

表現(xiàn)層

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

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

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

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

#專欄作家#

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

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

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