產品經理要學會擺按鈕?先看完這八個屬性

TP_funny發表於2015-01-30
工作以來,已經不止一次地有人問我「為什麼同樣做一個策劃,你總能想到很多我想不到的事情啊?」我實在不想告訴對方說「等你做多了也就自然能想這麼多了。」這句很坦誠、很客觀、很實際的話對於你們這些喜歡「乾貨」、急於實行措施後立竿見影的「產品經理」們似乎是一句廢話。

不過想到當初百度某牛逼產品經理在手機QQ校招宣講會上面對主持人一句「你覺得產品經理是幹什麼的?」的問題時那個充滿諷刺的「擺按鈕的」回答,以及後來某兩位壓根不瞭解產品經理職位內容就因為自己是碼農就一味加以抨擊的死胖子,我不免對其厭惡有加。而今天我不妨就拿「一個按鈕」為例,一方面為打仨傻逼的臉;說說在這簡簡單單的一個按鈕上,一個產品經理需要做多少工作,以及為何我能考慮到那麼多你想不到的事情。


我覺得,這篇文章應該比那本書更值得叫「人人都是產品經理」,因為通過這一篇文章,你的確可以立馬進入產品經理的工作狀態。

喏,廢話不多說,現在我們要開始擺一個按鈕了:

一、裝置
作為產品經理,我想你不管在紙上還是在Axure上畫原型,首先都要有一塊皮膚,這塊皮膚的大小你可能會選擇640*1136,也可能會選擇720*1280,也可能是2048*1536,還可能是1280*800。

OK第一個考慮點就來了——你要在什麼裝置上擺這個按鈕。

依據這個點,你畫出了一個合適大小的皮膚。

如果你不考慮會有什麼後果?那就是所有人都會懷疑你是不是知道自己這個團隊是做什麼的。

當然這點一般不會有人遺忘,所以接著往下走。

總結一:瞭解常見裝置和網頁設計和桌面軟體設計的基本解析度和佈局。

二、位置
我見過一些老闆/產品經理對設計師說「喏,那兒加個按鈕」,設計師問「加哪兒?」回答是「你看著辦吧」,於是設計師按照佈局上的美感給這個按鈕安排了一個很好看的位置——左上角。

結果你每次按這個按鈕都累得要死。

所以你要考慮的是,根據目標裝置對於使用者來說常用的互動姿態,去決定這個按鈕的位置是否合理、易於操作。比如使用者右手持機的話,左上角顯然不是一個理想的常用功能按鈕擺放位置。


由此開發同學會要求確定一個「座標值」,不過一般這個座標都是設計師給出了,因為設計師出設計圖的時候要標註控制元件距離。

但那不代表你就不應該瞭解。

恰恰相反,你最好要了解,不是讓你去像設計師一樣記住那個座標值,而是在把需求推到設計師那裡的時候,向設計師講清楚你希望這個按鈕大體在什麼位置、為什麼要把它安排在這個位置、對使用有什麼影響。

總結二:瞭解硬體裝置螢幕座標系的設定,和基本的人機互動理念。

三、大小
現在按鈕的位置有了,想讓使用者方便的點選還需要什麼?

沒錯兒,按照那個什麼茨定理,除了距離控制元件越近之外,控制元件越大也越容易點選。

所以我們應該把這個按鈕做到一半螢幕那麼大!!!

哈哈哈當然不是,我們要給按鈕一個合適的大小——想想那個什麼44px原理?

總結三:瞭解相關設計規範中給出的那些互動設計要求並能理解其緣由。

四、形狀
你的按鈕得有讓人看得出來的樣子對吧?

所以要選擇一個合適的形狀。

比如在Material Design的規範裡,FAB的樣式就一定要遵循規範為圓的;再比如在彈出的Alert提示框中,下方的兩個按鈕一般都是方的。

圖形中有三種基本形狀——矩形、圓形、三角形。通過這三種形狀的變化和拼接,你可以創造出各種各樣的圖形。

當然這理論上來說也應該是設計師的事情,但你一個產品經歷如果連各平臺的設計規範都不瞭解的話,很容易被壓制的哦(比如蘋果商店Reject的理由裡就有非規範設計這一條。)

總結四:瞭解相關設計規範中對各種圖形使用所給的建議並能理解其設計規範的作用。

五、顏色
這一點也是老闆和產品經理們經常放過去的——讓設計師來定就好了嘛,他們更專業。

但是——他們的專業,只是在平面設計上專業,而使用者對產品色系的敏感度,他們比你更瞭解?

你對色值可以不需要了解到DB4747和AE0808的區別這種程度,但是色彩三要素——色調、明度、純度——的變化對於人的感覺有什麼影響你一定要了解。如果不懂,請自己惡補相關知識。

總結五:不要再跟設計師說「我要一種大氣的顏色」這種屁話,轉而用「純度中等、明度較小、色調較冷,這樣一種比較穩重、厚實的感覺」來描述。

六、文案
當你放置了一排位置合適、大小合適、顏色獨特的按鈕時,其實使用者還是很難理解它是用來做什麼的。為此,你要賦予它一定文案,給不明所以的使用者一個引導——哦這個按鈕的作用是用來做這個/那個的。

而涉及到文案了,你除了要具備文字功底、使得可以用簡短精確的詞語來表達適當的意思之外,還要了解這些東西:用什麼字型呀?字號多大呀?字色如何呀?需不需要用加粗、傾斜、下劃線、刪除線等樣式來進行特定強調呀?

總結六:作為一個產品經理,玩轉文字是一項非常基礎、非常不起眼但對使用者能產生巨大影響的能力。

七、I/O(Input/Output)
誒你會問一個破按鈕哪兒來的輸入輸出?

我們從計算機原理課本中學到的I/O,指的是一臺機器,我們輸入一定資訊,它就能輸出一定資訊,這是一個狹義的I/O概念。這個概念放大到互動範圍,指的就是——當你對一個Object做出一定操作,它所返回的反饋是怎樣的。

所以對於一個按鈕,你還要設定當你點選(tap)它的時候它應該如何表現?按住(press)它的時候它應該如何表現?當然前面這兩種行為還只是在移動裝置端的,到了網頁設計中,你要考慮的動作叫做Click、Hover——而你還要了解後兩者跟前兩者有什麼差異。

總結七:考慮一個控制元件存在的意義——與人發生怎樣的互動?在這之後將會如何呈現資訊?

八、行為
與I/O不一樣,I/O所表示的主體只是一個被動的物件,它只有在你對其進行直接操作以後才發生對應的反饋,給你返回一些資訊;而當你對它不管不問的時候,它就那麼傻呆呆的杵在那兒。

所以在很多的產品設計中,這款產品設計的「有沒有靈性」、「有沒有靈魂」,取決於在你現在的操作及注意力的主體之外的那些控制元件,有沒有一種「自覺性」,為你當前的操作自動讓路。

如果這麼說你不明白,不妨想想iOS7中Safari的位址列。

在以往的設計中,你不操作位址列的時候,它就靜靜地在那兒,不管你滑動頁面、點選Toolbar的按鈕或者其他操作,它就不死不活的佔著那個位置。

而從iOS7開始,Safari的位址列變得「靈動」起來,當你滑動頁面檢視更多內容的時候,它會「很自覺地」收起縮小,為你讓出更大的空間用於顯示頁面內容。

總結八:你的按鈕,在我們不需要用到它的時候,它會不會足夠自覺?


八個屬性決定你如何擺好一個按鈕,到這兒擺按鈕的工作基本就完成了。

但是你也會考慮一個問題——我又是如何找全這八個屬性的呢?因為實際工作裡並不是說上面的每個點你都想不到,你會想到一些點,但又正如一開始所提的那個問題——為什麼你就不如我想得那麼全?

在此我也沒有其他的辦法可以教給你「如何考慮全面」,只說這樣一件事情——在做任何一件事情時,如果你能有另外一個大腦監視著你這一個大腦指揮你的身體所做出的一舉一動,那你就可以發現整個過程中被你這一個大腦因為「熟悉、習慣」而「理所當然」忽略掉的那些行為了。同理,當你把這種監視思維應用在產品拆解上的時候,你就能發現那些被你「理所當然」忽略掉但實質上極其重要的東西。

上面這段可能你看不明白,我就以一個小故事回答並結束這篇文章。
一個小孩子問他爺爺「爺爺,爺爺,你晚上睡覺的時候,鬍子是放在被子裡面呢還是放在被子外面呢?」結果他爺爺當天晚上一直沒睡好,因為他一直覺得好像不管把鬍子放在被子裡還是被子外都那麼彆扭——但最重要的是,為什麼以前他就沒注意呢?
     
相關閱讀
評論(1)

相關文章