huiter:《45分鐘學(xué)會產(chǎn)品設(shè)計》,這是我年初時,在公司做的一個內(nèi)部分享。希望可以幫助產(chǎn)品、設(shè)計師小伙伴快速提高,同時希望也可以對工程師、商務(wù)等小伙伴產(chǎn)生一些積極影響。畢竟大家都有一顆當產(chǎn)品經(jīng)理的心!
2011 年初入行后,我一直在創(chuàng)業(yè)公司混跡。沒做過什么特別成功的產(chǎn)品,從0到1倒是搞了不少次。因此這幾年產(chǎn)品、技術(shù)、交互均有涉獵,將一些收獲體會分享出來,希望可以幫到大家。
主要內(nèi)容:
- 用戶故事
- 概念模式
- 用戶分類
- MVP
- PMF
- 分層設(shè)計
- 界面設(shè)計
- 色彩設(shè)計
- 字體設(shè)計
- 隱喻設(shè)計
- 情感化設(shè)計
- 動效設(shè)計
- 機制設(shè)計
- 心理學(xué)設(shè)計
- 產(chǎn)品架構(gòu)設(shè)計
一. 用戶故事
用戶故事有三個要素,「角色、活動、商業(yè)價值」,直白地說就是誰?干什么?有什么用?編寫用戶故事,可以讓我更清晰地站在不同的視角來分析產(chǎn)品需求。
作為一個「角色」, 我想要「活動」,以便于「商業(yè)價值」。
團隊可以將用戶故事寫在卡片上,一起進行分類、去重、排級、細化。這種共建用戶故事卡片的方式,可以讓我們避免遺漏比較關(guān)鍵的問題。同時對卡片進行分類,也可以讓團隊成員對于優(yōu)先級達成一致。
用戶故事與卡片分類法,相關(guān)的介紹有很多,大家可以深入學(xué)習(xí)下。 保持用戶思維、團隊集體決策,是我從中學(xué)習(xí)到的做需求分析的要點。
二. 概念模式
《設(shè)計心理學(xué)》書中較早地介紹了概念模式。
比如 iPad 這樣一個產(chǎn)品,小孩子可能把它當游戲機、老年人可能把它當小電視、你可能把它當大號的不能打電話的iPhone,可能它從設(shè)計的角度就是一個具有較大屏幕的可觸摸的移動終端。
對于同樣一個產(chǎn)品,設(shè)計者的認知與使用者的認知很可能是不同的,甚至一類使用者與另一類使用者的認知也是不同的。如果設(shè)計模式與用戶模式匹配較差,會極大影響產(chǎn)品留存和產(chǎn)品迭代。
三. 用戶分類
小白用戶、普通用戶、專家用戶,三者的區(qū)別點在于對產(chǎn)品的使用深度,因此三者對產(chǎn)品可能有不同的迭代需求。我們也可以按照其他方式進行劃分,比如內(nèi)容社區(qū)中貢獻內(nèi)容的創(chuàng)作者、閱讀內(nèi)容的學(xué)習(xí)者、整理內(nèi)容的維護者。
不同用戶對產(chǎn)品的需求可能是相同的,即單一需求。這種情況可以通過對功能的合理隱藏來滿足不同層次用戶的需求。
不同用戶對產(chǎn)品的需求可能是不同的,即多樣化需求。這種情況若各類用戶是互相促進的關(guān)系,則大家可以各取所需和諧發(fā)展。比如內(nèi)容型社區(qū)創(chuàng)作者貢獻內(nèi)容,學(xué)習(xí)者可以獲得到所需內(nèi)容,同時學(xué)習(xí)者點贊可以給創(chuàng)作者反饋。
若用戶直接存在不可調(diào)和的沖突,則必須隔離不同用戶群或者放棄一部分用戶。比如內(nèi)容社區(qū),一部分用戶希望看到的都是學(xué)術(shù)知識,一部分用戶希望都是搞笑段子。
用戶分類,可以讓我們能清晰地分析用戶需求,抓住核心。
四. MVP
MVP,即最小化可行產(chǎn)品。
如果你要做一個在互聯(lián)網(wǎng)賣化妝品的生意,開始時你可能不需要找供應(yīng)商,也不用建立復(fù)雜的倉儲,也不需要復(fù)雜的SKU管理。你可能只需要從專柜買一批化妝品,參照從供應(yīng)商拿到的價格來定價,然后做一個看起來非??尚诺木W(wǎng)頁就可以了。
MVP,本質(zhì)上就是抓住用戶的核心需求,用最小的成本驗證你的想法。
不過最小并不意味著簡陋,還需要可行。比如你準備做一個商業(yè)數(shù)據(jù)分析服務(wù),如果你的產(chǎn)品看起來很丑陋就像上個世紀的產(chǎn)品,也會給用戶一種不穩(wěn)定不可靠的感覺。MVP 做的精細也是非常有必要的。
五. PMF
PMF,即產(chǎn)品與市場匹配。
你提供一項服務(wù),可以讓司機開車每天早上來我家接我上班。我不會開車也沒有車而且又很懶,所以我特別需要這項服務(wù)。但你的成本是 60/次,而我打車只需要 30/次,貴到我沒有需求了。如果你的服務(wù)隨著規(guī)模擴大降低到 35/次,我就有了需求。當你還做不到 35/次 的時候,為了快速擴大規(guī)模達到平衡點,你可以補貼我 30/次 這樣規(guī)模就可以快速增長了。
- 你提供了產(chǎn)品,客戶也有需求,但大家價格談不攏。
- 你提供了產(chǎn)品,客戶也有需求,價格也合適,但銷售成本太高了。
- 你提供了產(chǎn)品,客戶也有需求,整體價格也還合適,但客戶前幾年都采購?fù)炅恕?/li>
- 你提供了新產(chǎn)品,比客戶之前使用的產(chǎn)品維護費用更低,但替換成本太高了。
- 你提供了新產(chǎn)品,考慮產(chǎn)品成本+銷售成本+替換成本,仍然比原有方案節(jié)省一半的費用,你的產(chǎn)品與市場就匹配了。
六. 分層設(shè)計
《用戶體驗要素》這本書中有一個很經(jīng)典的五層設(shè)計模型。從戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層,描述了設(shè)計從抽象到具體的過程。當我們思考和討論設(shè)計問題時,按照分層設(shè)計可以讓思路更加清晰,避免問題混雜導(dǎo)致大量的無效討論。
七. 界面設(shè)計
我推崇三個理念:灰白化、柵格化、組件化。
灰白化:不增加不必要的色彩,以確保組件重要性傳達正確。
柵格化:將頁面用N個柵格化分,組件對齊可以讓視覺上覺得舒適。
組件化:把一些標準功能封裝成組件,不論是對工程師還是用戶都會覺得更加清晰。
同時,組件進行再次組合可以生成新的組件。
《寫給大家看的設(shè)計書》,提到了設(shè)計中「親密性、對齊、對比、重復(fù)」這四個要點,這在界面設(shè)計中起到很大的作用。
八. 色彩設(shè)計
需要了解 HSB、HSL、RGB、CMYK 等色彩系統(tǒng)。
- HSB(色相+濃度+明度,人)
- HSL(色相+濃度+亮度,人+機器)
- RGB(發(fā)光加色,顯示器)
- CMYK(反光減色,印刷品)
九. 字體設(shè)計
特殊的標題需要使用大字體文字時,可以用圖片來代替保證顯示效果,其余最好優(yōu)先使用系統(tǒng)默認字體。
- 蘋方:Apple 系統(tǒng)字體
- BlinkMacSystemFont:Chrome 默認字體
另外還有一個屬性會影響字體顯示:font-weight,可以改變文字的粗細。但頁面如果有中英文兩種字體混合,兩種字體對 font-weight 的支持可能是不同的。下面兩張圖片為font-weight為300與100的差別,當100時會出現(xiàn)默認英文字體不支持導(dǎo)致中英文字體粗細差距過大的情況,應(yīng)盡量避免極細字體的使用。
至于字體的選擇和搭配,推薦閱讀《黑客與設(shè)計》附錄中關(guān)于字體的部分。
十. 隱喻設(shè)計
生活中人們會對色彩和符號形成認知經(jīng)驗,比如紅綠燈、警示牌。當我們在做產(chǎn)品設(shè)計時,合理地使用隱喻,會讓用戶覺得產(chǎn)品更容易理解。
比如:文件→數(shù)據(jù)、鉛筆→編輯、小扳手→設(shè)置、垃圾桶→刪除。
十一. 情感化設(shè)計
與機器相比,人更喜歡和人交流。如果你的產(chǎn)品無法在功能上相比于競品形成優(yōu)勢,那不如考慮讓你的產(chǎn)品充滿情感。
比如常見的卡通化設(shè)計,比如京東的狗、天貓的貓、QQ的企鵝、蜜芽的兔子、錘子的羅永浩。當然不一定要具化形象,比如社區(qū)的氛圍也是一種情感化的體現(xiàn)。
十二. 動效設(shè)計
常見的幾種動畫曲線:
- Linear,勻速
- Ease,逐漸變慢
- Ease In,慢變快
- Ease Out,快變慢
- Ease In Out,慢變快變慢
- Spring,彈簧動畫
可以使用 Framer 來學(xué)習(xí)創(chuàng)作動畫。
十三. 機制設(shè)計
- 知乎的一個答案,你可以贊同、反對、感謝、收藏、分享。
- 知乎的同一個問題,你只能回答一次。
- 知乎的用戶可以通過評論和私信進行交流。
以上都是產(chǎn)品機制設(shè)計。
- 贊同,可以將答案選出。
- 反對,可以將答案掩埋。
- 感謝,可以給答主正向反饋。
- 收藏,可以結(jié)構(gòu)化內(nèi)容。
- 限寫一次,可以防止內(nèi)容灌水。
機制設(shè)計,是產(chǎn)品設(shè)計中最有意思的地方。一個正確的機制,可以省去大片的運營。比如 Drop box的邀請新用戶加存儲空間,滴滴的分享也可以領(lǐng)優(yōu)惠券,朋友圈只有相互為好友才可以看到留言。
十四. 心理學(xué)設(shè)計
我在學(xué)習(xí)用戶體驗設(shè)計的過程中,零散地積累了一些心理學(xué)的知識點,但都不夠系統(tǒng)。
比如:
- 字太小,用戶會煩
- 內(nèi)容寬度相對越窄,用戶讀的越細
- 臨時記憶量不是7+-2,而可能是4
- 圖片在內(nèi)容文本上方更合適
- 動效快慢會影響用戶的感知
- 強關(guān)系圈人數(shù)上限是 150 人
直到我閱讀到了《設(shè)計師要懂心理學(xué)》這本書,推薦閱讀。
十五. 產(chǎn)品架構(gòu)設(shè)計
- 賬戶系統(tǒng)
- 權(quán)限系統(tǒng)
- 訂單系統(tǒng)
- 積分系統(tǒng)
- 數(shù)據(jù)分析可視化系統(tǒng)
- 反垃圾系統(tǒng)
- 計費系統(tǒng)
- 內(nèi)容管理系統(tǒng)
- 第三方授權(quán)系統(tǒng)
業(yè)務(wù)不同,產(chǎn)品的架構(gòu)也就不同。不同的業(yè)務(wù)雖然整體架構(gòu)不同,但組件很可能是共通的。
不論做什么類型的社區(qū),你都需要內(nèi)容管理系統(tǒng),都需要反垃圾系統(tǒng),都需要賬戶系統(tǒng),都需要數(shù)據(jù)分析可視化系統(tǒng)。有大量標準系統(tǒng)的積累,產(chǎn)品架構(gòu)能力自然提升。根據(jù)業(yè)務(wù)邏輯,把這些系統(tǒng)像組件一樣組裝在一起,就可以輕松不出錯地完成產(chǎn)品架構(gòu)設(shè)計?!?a target="_blank" >推薦閱讀:如何提升產(chǎn)品架構(gòu)能力》
整理下推薦了解的內(nèi)容:
- 工具: Sketch、Framer、MindNote、Evernote 等
- 文檔: Markdown 格式
- 圖書:《用戶體驗要素》、《設(shè)計心理學(xué)》、《寫給大家看的設(shè)計書》、《設(shè)計師要懂心理學(xué)》、《黑客與設(shè)計》、《微交互:細節(jié)設(shè)計成就卓越產(chǎn)品》
- 框架: Ant Design - One Design Language
如果有同學(xué)對學(xué)習(xí)技術(shù)感興趣,可以點擊此答案。作為技術(shù)型產(chǎn)品經(jīng)理新人如何學(xué)習(xí)前端和服務(wù)端知識?
「超全面!一個完整的產(chǎn)品設(shè)計流程是怎樣的」
- 《漲姿勢!超細致的產(chǎn)品設(shè)計流程技巧全科普》
- 《騰訊內(nèi)部分享!一個工作坊的完整設(shè)計流程劇透》
- 《用快看漫畫的實戰(zhàn)案例,帶你掌握完整全面的產(chǎn)品設(shè)計流程》
原文地址:zhihu
【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱:yuan@uisdc.com】
================明星欄目推薦================
優(yōu)優(yōu)教程網(wǎng): UiiiUiii.com?是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站,分享了大量PS、AE、AI、C4D等中文教程,為零基礎(chǔ)設(shè)計愛好者也準備了貼心的知識樹專欄。開啟免費自學(xué)新篇章,按照我們的專欄一步步學(xué)習(xí),一定可以迅速上手并制作出酷炫的視覺效果。
設(shè)計導(dǎo)航:國內(nèi)人氣最高的設(shè)計網(wǎng)址導(dǎo)航,設(shè)計師必備:http://hao.uisdc.com
復(fù)制本文鏈接 文章為作者獨立觀點不代表優(yōu)設(shè)網(wǎng)立場,未經(jīng)允許不得轉(zhuǎn)載。
發(fā)評論!每天贏獎品
點擊 登錄 后,在評論區(qū)留言,系統(tǒng)會隨機派送獎品
2012年成立至今,是國內(nèi)備受歡迎的設(shè)計師平臺,提供獎品贊助 聯(lián)系我們
AI輔助海報設(shè)計101例
已累計誕生 753 位幸運星
發(fā)表評論
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓