入門手冊!幫你快速掌握15個常見的產品設計術語

huiter:《45分鐘學會產品設計》,這是我年初時,在公司做的一個內部分享。希望可以幫助產品、設計師小伙伴快速提高,同時希望也可以對工程師、商務等小伙伴產生一些積極影響。畢竟大家都有一顆當產品經理的心!

2011 年初入行后,我一直在創業公司混跡。沒做過什么特別成功的產品,從0到1倒是搞了不少次。因此這幾年產品、技術、交互均有涉獵,將一些收獲體會分享出來,希望可以幫到大家。

主要內容:

  • 用戶故事
  • 概念模式
  • 用戶分類
  • MVP
  • PMF
  • 分層設計
  • 界面設計
  • 色彩設計
  • 字體設計
  • 隱喻設計
  • 情感化設計
  • 動效設計
  • 機制設計
  • 心理學設計
  • 產品架構設計

一. 用戶故事

用戶故事有三個要素,「角色、活動、商業價值」,直白地說就是誰?干什么?有什么用?編寫用戶故事,可以讓我更清晰地站在不同的視角來分析產品需求。

作為一個「角色」, 我想要「活動」,以便于「商業價值」。

入門手冊!幫你快速掌握15個常見的產品設計術語

團隊可以將用戶故事寫在卡片上,一起進行分類、去重、排級、細化。這種共建用戶故事卡片的方式,可以讓我們避免遺漏比較關鍵的問題。同時對卡片進行分類,也可以讓團隊成員對于優先級達成一致。

用戶故事與卡片分類法,相關的介紹有很多,大家可以深入學習下。 保持用戶思維、團隊集體決策,是我從中學習到的做需求分析的要點。

二. 概念模式

《設計心理學》書中較早地介紹了概念模式。

比如 iPad 這樣一個產品,小孩子可能把它當游戲機、老年人可能把它當小電視、你可能把它當大號的不能打電話的iPhone,可能它從設計的角度就是一個具有較大屏幕的可觸摸的移動終端。

入門手冊!幫你快速掌握15個常見的產品設計術語

對于同樣一個產品,設計者的認知與使用者的認知很可能是不同的,甚至一類使用者與另一類使用者的認知也是不同的。如果設計模式與用戶模式匹配較差,會極大影響產品留存和產品迭代。

三. 用戶分類

小白用戶、普通用戶、專家用戶,三者的區別點在于對產品的使用深度,因此三者對產品可能有不同的迭代需求。我們也可以按照其他方式進行劃分,比如內容社區中貢獻內容的創作者、閱讀內容的學習者、整理內容的維護者。

入門手冊!幫你快速掌握15個常見的產品設計術語

不同用戶對產品的需求可能是相同的,即單一需求。這種情況可以通過對功能的合理隱藏來滿足不同層次用戶的需求。

不同用戶對產品的需求可能是不同的,即多樣化需求。這種情況若各類用戶是互相促進的關系,則大家可以各取所需和諧發展。比如內容型社區創作者貢獻內容,學習者可以獲得到所需內容,同時學習者點贊可以給創作者反饋。

若用戶直接存在不可調和的沖突,則必須隔離不同用戶群或者放棄一部分用戶。比如內容社區,一部分用戶希望看到的都是學術知識,一部分用戶希望都是搞笑段子。

用戶分類,可以讓我們能清晰地分析用戶需求,抓住核心。

四. MVP

MVP,即最小化可行產品。

如果你要做一個在互聯網賣化妝品的生意,開始時你可能不需要找供應商,也不用建立復雜的倉儲,也不需要復雜的SKU管理。你可能只需要從專柜買一批化妝品,參照從供應商拿到的價格來定價,然后做一個看起來非??尚诺木W頁就可以了。

MVP,本質上就是抓住用戶的核心需求,用最小的成本驗證你的想法。

不過最小并不意味著簡陋,還需要可行。比如你準備做一個商業數據分析服務,如果你的產品看起來很丑陋就像上個世紀的產品,也會給用戶一種不穩定不可靠的感覺。MVP 做的精細也是非常有必要的。

五. PMF

PMF,即產品與市場匹配。

你提供一項服務,可以讓司機開車每天早上來我家接我上班。我不會開車也沒有車而且又很懶,所以我特別需要這項服務。但你的成本是 60/次,而我打車只需要 30/次,貴到我沒有需求了。如果你的服務隨著規模擴大降低到 35/次,我就有了需求。當你還做不到 35/次 的時候,為了快速擴大規模達到平衡點,你可以補貼我 30/次 這樣規模就可以快速增長了。

  • 你提供了產品,客戶也有需求,但大家價格談不攏。
  • 你提供了產品,客戶也有需求,價格也合適,但銷售成本太高了。
  • 你提供了產品,客戶也有需求,整體價格也還合適,但客戶前幾年都采購完了。
  • 你提供了新產品,比客戶之前使用的產品維護費用更低,但替換成本太高了。
  • 你提供了新產品,考慮產品成本+銷售成本+替換成本,仍然比原有方案節省一半的費用,你的產品與市場就匹配了。

六. 分層設計

《用戶體驗要素》這本書中有一個很經典的五層設計模型。從戰略層、范圍層、結構層、框架層、表現層,描述了設計從抽象到具體的過程。當我們思考和討論設計問題時,按照分層設計可以讓思路更加清晰,避免問題混雜導致大量的無效討論。

入門手冊!幫你快速掌握15個常見的產品設計術語

七. 界面設計

我推崇三個理念:灰白化、柵格化、組件化。

灰白化:不增加不必要的色彩,以確保組件重要性傳達正確。

入門手冊!幫你快速掌握15個常見的產品設計術語

柵格化:將頁面用N個柵格化分,組件對齊可以讓視覺上覺得舒適。

入門手冊!幫你快速掌握15個常見的產品設計術語

組件化:把一些標準功能封裝成組件,不論是對工程師還是用戶都會覺得更加清晰。

入門手冊!幫你快速掌握15個常見的產品設計術語

同時,組件進行再次組合可以生成新的組件。

入門手冊!幫你快速掌握15個常見的產品設計術語

《寫給大家看的設計書》,提到了設計中「親密性、對齊、對比、重復」這四個要點,這在界面設計中起到很大的作用。

八. 色彩設計

入門手冊!幫你快速掌握15個常見的產品設計術語

需要了解 HSB、HSL、RGB、CMYK 等色彩系統。

  • HSB(色相+濃度+明度,人)
  • HSL(色相+濃度+亮度,人+機器)
  • RGB(發光加色,顯示器)
  • CMYK(反光減色,印刷品)

入門手冊!幫你快速掌握15個常見的產品設計術語

九. 字體設計

特殊的標題需要使用大字體文字時,可以用圖片來代替保證顯示效果,其余最好優先使用系統默認字體。

  • 蘋方:Apple 系統字體
  • BlinkMacSystemFont:Chrome 默認字體

另外還有一個屬性會影響字體顯示:font-weight,可以改變文字的粗細。但頁面如果有中英文兩種字體混合,兩種字體對 font-weight 的支持可能是不同的。下面兩張圖片為font-weight為300與100的差別,當100時會出現默認英文字體不支持導致中英文字體粗細差距過大的情況,應盡量避免極細字體的使用。

入門手冊!幫你快速掌握15個常見的產品設計術語

入門手冊!幫你快速掌握15個常見的產品設計術語

至于字體的選擇和搭配,推薦閱讀《黑客與設計》附錄中關于字體的部分。

十. 隱喻設計

入門手冊!幫你快速掌握15個常見的產品設計術語

生活中人們會對色彩和符號形成認知經驗,比如紅綠燈、警示牌。當我們在做產品設計時,合理地使用隱喻,會讓用戶覺得產品更容易理解。

比如:文件→數據、鉛筆→編輯、小扳手→設置、垃圾桶→刪除。

入門手冊!幫你快速掌握15個常見的產品設計術語

十一. 情感化設計

入門手冊!幫你快速掌握15個常見的產品設計術語

與機器相比,人更喜歡和人交流。如果你的產品無法在功能上相比于競品形成優勢,那不如考慮讓你的產品充滿情感。

比如常見的卡通化設計,比如京東的狗、天貓的貓、QQ的企鵝、蜜芽的兔子、錘子的羅永浩。當然不一定要具化形象,比如社區的氛圍也是一種情感化的體現。

十二. 動效設計

入門手冊!幫你快速掌握15個常見的產品設計術語

常見的幾種動畫曲線:

  • Linear,勻速
  • Ease,逐漸變慢
  • Ease In,慢變快
  • Ease Out,快變慢
  • Ease In Out,慢變快變慢
  • Spring,彈簧動畫

可以使用 Framer 來學習創作動畫。

十三. 機制設計

  • 知乎的一個答案,你可以贊同、反對、感謝、收藏、分享。
  • 知乎的同一個問題,你只能回答一次。
  • 知乎的用戶可以通過評論和私信進行交流。

以上都是產品機制設計。

  • 贊同,可以將答案選出。
  • 反對,可以將答案掩埋。
  • 感謝,可以給答主正向反饋。
  • 收藏,可以結構化內容。
  • 限寫一次,可以防止內容灌水。

機制設計,是產品設計中最有意思的地方。一個正確的機制,可以省去大片的運營。比如 Drop box的邀請新用戶加存儲空間,滴滴的分享也可以領優惠券,朋友圈只有相互為好友才可以看到留言。

十四. 心理學設計

我在學習用戶體驗設計的過程中,零散地積累了一些心理學的知識點,但都不夠系統。

比如:

  • 字太小,用戶會煩
  • 內容寬度相對越窄,用戶讀的越細
  • 臨時記憶量不是7+-2,而可能是4
  • 圖片在內容文本上方更合適
  • 動效快慢會影響用戶的感知
  • 強關系圈人數上限是 150 人

直到我閱讀到了《設計師要懂心理學》這本書,推薦閱讀。

入門手冊!幫你快速掌握15個常見的產品設計術語

十五. 產品架構設計

  • 賬戶系統
  • 權限系統
  • 訂單系統
  • 積分系統
  • 數據分析可視化系統
  • 反垃圾系統
  • 計費系統
  • 內容管理系統
  • 第三方授權系統

業務不同,產品的架構也就不同。不同的業務雖然整體架構不同,但組件很可能是共通的。

不論做什么類型的社區,你都需要內容管理系統,都需要反垃圾系統,都需要賬戶系統,都需要數據分析可視化系統。有大量標準系統的積累,產品架構能力自然提升。根據業務邏輯,把這些系統像組件一樣組裝在一起,就可以輕松不出錯地完成產品架構設計?!?a target="_blank" >推薦閱讀:如何提升產品架構能力》

整理下推薦了解的內容:

  • 工具: Sketch、Framer、MindNote、Evernote 等
  • 文檔: Markdown 格式
  • 圖書:《用戶體驗要素》、《設計心理學》、《寫給大家看的設計書》、《設計師要懂心理學》、《黑客與設計》、《微交互:細節設計成就卓越產品》
  • 框架: Ant Design - One Design Language

如果有同學對學習技術感興趣,可以點擊此答案。作為技術型產品經理新人如何學習前端和服務端知識?

「超全面!一個完整的產品設計流程是怎樣的」

原文地址:zhihu


【優設網 原創文章 投稿郵箱:yuan@uisdc.com】

================明星欄目推薦================

優優教程網 UiiiUiii.com?是優設旗下優質中文教程網站,分享了大量PS、AE、AI、C4D等中文教程,為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章,按照我們的專欄一步步學習,一定可以迅速上手并制作出酷炫的視覺效果。

設計導航:國內人氣最高的設計網址導航,設計師必備:http://hao.uisdc.com

收藏 11
點贊 2

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。