產(chǎn)品經(jīng)理要學(xué)會(huì)擺按鈕?先看完這八個(gè)屬性
小芒果導(dǎo)讀:用戶體驗(yàn)在產(chǎn)品設(shè)計(jì)上扮演著越來(lái)越重要的角色。哪怕只是一個(gè)小小按鈕的擺放都大為講究,那么作為產(chǎn)品經(jīng)理,到底需要做多少工作,你是否考慮全面了呢?
工作以來(lái),已經(jīng)不止一次地有人問(wèn)我「為什么同樣做一個(gè)策劃,你總能想到很多我想不到的事情?。俊刮覍?shí)在不想告訴對(duì)方說(shuō)「等你做多了也就自然能想這么多了。」這句很坦誠(chéng)、很客觀、很實(shí)際的話對(duì)于你們這些喜歡「干貨」、急于實(shí)行措施后立竿見(jiàn)影的「產(chǎn)品經(jīng)理」們似乎是一句廢話。
不過(guò)想到當(dāng)初百度某牛逼產(chǎn)品經(jīng)理在手機(jī)QQ校招宣講會(huì)上面對(duì)主持人一句「你覺(jué)得產(chǎn)品經(jīng)理是干什么的?」的問(wèn)題時(shí)那個(gè)充滿諷刺的「擺按鈕的」回答,以及后來(lái)某兩位壓根不了解產(chǎn)品經(jīng)理職位內(nèi)容就因?yàn)樽约菏谴a農(nóng)就一味加以抨擊的死胖子,我不免對(duì)其厭惡有加。而今天我不妨就拿「一個(gè)按鈕」為例,一方面為打仨傻逼的臉;說(shuō)說(shuō)在這簡(jiǎn)簡(jiǎn)單單的一個(gè)按鈕上,一個(gè)產(chǎn)品經(jīng)理需要做多少工作,以及為何我能考慮到那么多你想不到的事情。
我覺(jué)得,這篇文章應(yīng)該比那本書(shū)更值得叫「人人都是產(chǎn)品經(jīng)理」,因?yàn)橥ㄟ^(guò)這一篇文章,你的確可以立馬進(jìn)入產(chǎn)品經(jīng)理的工作狀態(tài)。 喏,廢話不多說(shuō),現(xiàn)在我們要開(kāi)始擺一個(gè)按鈕了: 作為產(chǎn)品經(jīng)理,我想你不管在紙上還是在Axure上畫(huà)原型,首先都要有一塊面板,這塊面板的大小你可能會(huì)選擇640*1136,也可能會(huì)選擇720*1280,也可能是2048*1536,還可能是1280*800。 OK第一個(gè)考慮點(diǎn)就來(lái)了——你要在什么設(shè)備上擺這個(gè)按鈕。 依據(jù)這個(gè)點(diǎn),你畫(huà)出了一個(gè)合適大小的面板。 如果你不考慮會(huì)有什么后果?那就是所有人都會(huì)懷疑你是不是知道自己這個(gè)團(tuán)隊(duì)是做什么的。 當(dāng)然這點(diǎn)一般不會(huì)有人遺忘,所以接著往下走。 總結(jié)一:了解常見(jiàn)設(shè)備和網(wǎng)頁(yè)設(shè)計(jì)和桌面軟件設(shè)計(jì)的基本分辨率和布局。 我見(jiàn)過(guò)一些老板/產(chǎn)品經(jīng)理對(duì)設(shè)計(jì)師說(shuō)「喏,那兒加個(gè)按鈕」,設(shè)計(jì)師問(wèn)「加哪兒?」回答是「你看著辦吧」,于是設(shè)計(jì)師按照布局上的美感給這個(gè)按鈕安排了一個(gè)很好看的位置——左上角。 結(jié)果你每次按這個(gè)按鈕都累得要死。 所以你要考慮的是,根據(jù)目標(biāo)設(shè)備對(duì)于用戶來(lái)說(shuō)常用的交互姿態(tài),去決定這個(gè)按鈕的位置是否合理、易于操作。比如用戶右手持機(jī)的話,左上角顯然不是一個(gè)理想的常用功能按鈕擺放位置。 由此開(kāi)發(fā)同學(xué)會(huì)要求確定一個(gè)「坐標(biāo)值」,不過(guò)一般這個(gè)坐標(biāo)都是設(shè)計(jì)師給出了,因?yàn)樵O(shè)計(jì)師出設(shè)計(jì)圖的時(shí)候要標(biāo)注控件距離。 但那不代表你就不應(yīng)該了解。 恰恰相反,你最好要了解,不是讓你去像設(shè)計(jì)師一樣記住那個(gè)坐標(biāo)值,而是在把需求推到設(shè)計(jì)師那里的時(shí)候,向設(shè)計(jì)師講清楚你希望這個(gè)按鈕大體在什么位置、為什么要把它安排在這個(gè)位置、對(duì)使用有什么影響。 總結(jié)二:了解硬件設(shè)備屏幕坐標(biāo)系的設(shè)定,和基本的人機(jī)交互理念。 現(xiàn)在按鈕的位置有了,想讓用戶方便的點(diǎn)擊還需要什么? 沒(méi)錯(cuò)兒,按照那個(gè)什么茨定理,除了距離控件越近之外,控件越大也越容易點(diǎn)擊。 所以我們應(yīng)該把這個(gè)按鈕做到一半屏幕那么大?。?! 哈哈哈當(dāng)然不是,我們要給按鈕一個(gè)合適的大小——想想那個(gè)什么44px原理? 總結(jié)三:了解相關(guān)設(shè)計(jì)規(guī)范中給出的那些交互設(shè)計(jì)要求并能理解其緣由。 你的按鈕得有讓人看得出來(lái)的樣子對(duì)吧? 所以要選擇一個(gè)合適的形狀。 比如在Material Design的規(guī)范里,F(xiàn)AB的樣式就一定要遵循規(guī)范為圓的;再比如在彈出的Alert提示框中,下方的兩個(gè)按鈕一般都是方的。 圖形中有三種基本形狀——矩形、圓形、三角形。通過(guò)這三種形狀的變化和拼接,你可以創(chuàng)造出各種各樣的圖形。 當(dāng)然這理論上來(lái)說(shuō)也應(yīng)該是設(shè)計(jì)師的事情,但你一個(gè)產(chǎn)品經(jīng)歷如果連各平臺(tái)的設(shè)計(jì)規(guī)范都不了解的話,很容易被壓制的哦(比如蘋(píng)果商店Reject的理由里就有非規(guī)范設(shè)計(jì)這一條。) 總結(jié)四:了解相關(guān)設(shè)計(jì)規(guī)范中對(duì)各種圖形使用所給的建議并能理解其設(shè)計(jì)規(guī)范的作用。 這一點(diǎn)也是老板和產(chǎn)品經(jīng)理們經(jīng)常放過(guò)去的——讓設(shè)計(jì)師來(lái)定就好了嘛,他們更專業(yè)。 但是——他們的專業(yè),只是在平面設(shè)計(jì)上專業(yè),而用戶對(duì)產(chǎn)品色系的敏感度,他們比你更了解? 你對(duì)色值可以不需要了解到DB4747和AE0808的區(qū)別這種程度,但是色彩三要素——色調(diào)、明度、純度——的變化對(duì)于人的感覺(jué)有什么影響你一定要了解。如果不懂,請(qǐng)自己惡補(bǔ)相關(guān)知識(shí)。 總結(jié)五:不要再跟設(shè)計(jì)師說(shuō)「我要一種大氣的顏色」這種屁話,轉(zhuǎn)而用「純度中等、明度較小、色調(diào)較冷,這樣一種比較穩(wěn)重、厚實(shí)的感覺(jué)」來(lái)描述。 當(dāng)你放置了一排位置合適、大小合適、顏色獨(dú)特的按鈕時(shí),其實(shí)用戶還是很難理解它是用來(lái)做什么的。為此,你要賦予它一定文案,給不明所以的用戶一個(gè)引導(dǎo)——哦這個(gè)按鈕的作用是用來(lái)做這個(gè)/那個(gè)的。 而涉及到文案了,你除了要具備文字功底、使得可以用簡(jiǎn)短精確的詞語(yǔ)來(lái)表達(dá)適當(dāng)?shù)囊馑贾?,還要了解這些東西:用什么字體呀?字號(hào)多大呀?字色如何呀?需不需要用加粗、傾斜、下劃線、刪除線等樣式來(lái)進(jìn)行特定強(qiáng)調(diào)呀? 總結(jié)六:作為一個(gè)產(chǎn)品經(jīng)理,玩轉(zhuǎn)文字是一項(xiàng)非常基礎(chǔ)、非常不起眼但對(duì)用戶能產(chǎn)生巨大影響的能力。 誒你會(huì)問(wèn)一個(gè)破按鈕哪兒來(lái)的輸入輸出? 我們從計(jì)算機(jī)原理課本中學(xué)到的I/O,指的是一臺(tái)機(jī)器,我們輸入一定信息,它就能輸出一定信息,這是一個(gè)狹義的I/O概念。這個(gè)概念放大到交互范圍,指的就是——當(dāng)你對(duì)一個(gè)Object做出一定操作,它所返回的反饋是怎樣的。 所以對(duì)于一個(gè)按鈕,你還要設(shè)定當(dāng)你點(diǎn)擊(tap)它的時(shí)候它應(yīng)該如何表現(xiàn)?按住(press)它的時(shí)候它應(yīng)該如何表現(xiàn)?當(dāng)然前面這兩種行為還只是在移動(dòng)設(shè)備端的,到了網(wǎng)頁(yè)設(shè)計(jì)中,你要考慮的動(dòng)作叫做Click、Hover——而你還要了解后兩者跟前兩者有什么差異。 總結(jié)七:考慮一個(gè)控件存在的意義——與人發(fā)生怎樣的交互?在這之后將會(huì)如何呈現(xiàn)信息? 與I/O不一樣,I/O所表示的主體只是一個(gè)被動(dòng)的對(duì)象,它只有在你對(duì)其進(jìn)行直接操作以后才發(fā)生對(duì)應(yīng)的反饋,給你返回一些信息;而當(dāng)你對(duì)它不管不問(wèn)的時(shí)候,它就那么傻呆呆的杵在那兒。 所以在很多的產(chǎn)品設(shè)計(jì)中,這款產(chǎn)品設(shè)計(jì)的「有沒(méi)有靈性」、「有沒(méi)有靈魂」,取決于在你現(xiàn)在的操作及注意力的主體之外的那些控件,有沒(méi)有一種「自覺(jué)性」,為你當(dāng)前的操作自動(dòng)讓路。 如果這么說(shuō)你不明白,不妨想想iOS7中Safari的地址欄。 在以往的設(shè)計(jì)中,你不操作地址欄的時(shí)候,它就靜靜地在那兒,不管你滑動(dòng)頁(yè)面、點(diǎn)擊Toolbar的按鈕或者其他操作,它就不死不活的占著那個(gè)位置。 而從iOS7開(kāi)始,Safari的地址欄變得「靈動(dòng)」起來(lái),當(dāng)你滑動(dòng)頁(yè)面查看更多內(nèi)容的時(shí)候,它會(huì)「很自覺(jué)地」收起縮小,為你讓出更大的空間用于顯示頁(yè)面內(nèi)容。 總結(jié)八:你的按鈕,在我們不需要用到它的時(shí)候,它會(huì)不會(huì)足夠自覺(jué)? 八個(gè)屬性決定你如何擺好一個(gè)按鈕,到這兒擺按鈕的工作基本就完成了。 但是你也會(huì)考慮一個(gè)問(wèn)題——我又是如何找全這八個(gè)屬性的呢?因?yàn)閷?shí)際工作里并不是說(shuō)上面的每個(gè)點(diǎn)你都想不到,你會(huì)想到一些點(diǎn),但又正如一開(kāi)始所提的那個(gè)問(wèn)題——為什么你就不如我想得那么全? 在此我也沒(méi)有其他的辦法可以教給你「如何考慮全面」,只說(shuō)這樣一件事情——在做任何一件事情時(shí),如果你能有另外一個(gè)大腦監(jiān)視著你這一個(gè)大腦指揮你的身體所做出的一舉一動(dòng),那你就可以發(fā)現(xiàn)整個(gè)過(guò)程中被你這一個(gè)大腦因?yàn)椤甘煜?、?xí)慣」而「理所當(dāng)然」忽略掉的那些行為了。同理,當(dāng)你把這種監(jiān)視思維應(yīng)用在產(chǎn)品拆解上的時(shí)候,你就能發(fā)現(xiàn)那些被你「理所當(dāng)然」忽略掉但實(shí)質(zhì)上極其重要的東西。 上面這段可能你看不明白,我就以一個(gè)小故事回答并結(jié)束這篇文章。 一個(gè)小孩子問(wèn)他爺爺「爺爺,爺爺,你晚上睡覺(jué)的時(shí)候,胡子是放在被子里面呢還是放在被子外面呢?」 結(jié)果他爺爺當(dāng)天晚上一直沒(méi)睡好,因?yàn)樗恢庇X(jué)得好像不管把胡子放在被子里還是被子外都那么別扭——但最重要的是,為什么以前他就沒(méi)注意呢? 本文作者:阿九 ?轉(zhuǎn)載自:現(xiàn)世錄一、設(shè)備
二、位置
三、大小
四、形狀
五、顏色
六、文案
七、I/O(Input/Output)
八、行為
交互設(shè)計(jì)有話要說(shuō),這些東西可能交互設(shè)計(jì)師更懂。