15個UI設計師常用的產品設計技術

　　一、 用戶故事

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

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

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

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

　　二、概念模式

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

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

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

　　三、用戶分類

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

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

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

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

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

　　四、最小化可行產品(MVP)

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

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

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

　　五、產品與市場匹配(PMF)

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

　　o 你提供了產品，客戶也有需求，但大家價格談不攏。

　　o 你提供了產品，客戶也有需求，價格也合適，但銷售成本太高了。

　　o 你提供了產品，客戶也有需求，整體價格也還合適，但客戶前幾年都采購完了。

　　o 你提供了新產品，比客戶之前使用的產品維護費用更低，但替換成本太高了。

　　o 你提供了新產品，考慮產品成本+銷售成本+替換成本，仍然比原有方案節省一半的費用，你的產品與市場就匹配了。

　　六、分層設計

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

　　七、界面設計

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

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

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

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

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

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

　　八、色彩設計

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

　　o HSB(色相+濃度+明度，人)

　　o HSL(色相+濃度+亮度，人+機器)

　　o RGB(發光加色，顯示器)

　　o CMYK(反光減色，印刷品)

　　九、字體設計

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

　　font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Roboto,Arial,PingFang SC,Hiragino Sans GB,Microsoft Yahei,sans-serif;

　　o -apple-system：Apple 系統字體

　　o BlinkMacSystemFont：Chrome 默認字體

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

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

　　十、隱喻設計

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

　　比如：文件→詳細數據、鉛筆→編輯、小扳手→設置、垃圾桶→刪除、鈴鐺→報警。

　　十一、情感化設計

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

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

　　十二、動效設計

　　常見的幾種動畫曲線：

　　o Linear，勻速

　　o Ease，逐漸變慢

　　o Ease In，慢變快

　　o Ease Out，快變慢

　　o Ease In Out，慢變快變慢

　　o Spring，彈簧動畫

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

　　十三、機制設計

　　o 知乎的一個答案，你可以贊同、反對、感謝、收藏、分享。

　　o 知乎的同一個問題，你只能回答一次。

　　o 知乎的用戶可以通過評論和私信進行交流。

　　以上都是產品機制設計。

　　o 贊同，可以將答案選出。

　　o 反對，可以將答案掩埋。

　　o 感謝，可以給答主正向反饋。

　　o 收藏，可以結構化內容。

　　o 限寫一次，可以防止內容灌水。

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

　　十四、心理學設計

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

　　比如：

　　o 字太小，用戶會煩

　　o 內容寬度相對越窄，用戶讀的越細

　　o 臨時記憶量不是7+-2，而可能是4

　　o 圖片在內容文本上方更合適

　　o 動效快慢會影響用戶的感知

　　o 強關系圈人數上限是 150 人

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

　　十五、產品架構設計

　　o 賬戶系統

　　o 權限系統

　　o 訂單系統

　　o 積分系統

　　o 數據分析可視化系統

　　o 反垃圾系統

　　o 計費系統

　　o 內容管理系統

　　o 第三方授權系統

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

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