15個(gè)UI設(shè)計(jì)師常用的產(chǎn)品設(shè)計(jì)技術(shù)

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

　　作為一個(gè)「角色」， 我想要「活動(dòng)」，以便于「價(jià)值」。

　　團(tuán)隊(duì)可以將用戶故事寫在卡片上，一起進(jìn)行分類、去重、排級(jí)、細(xì)化。這種共建用戶故事卡片的方式，可以讓我們避免遺漏比較關(guān)鍵的問題。同時(shí)對(duì)卡片進(jìn)行分類，也可以讓團(tuán)隊(duì)成員對(duì)于優(yōu)先級(jí)達(dá)成一致。

　　用戶故事與卡片分類法，相關(guān)的介紹有很多，大家可以深入學(xué)習(xí)下。 保持用戶思維、團(tuán)隊(duì)集體決策，是我從中學(xué)習(xí)到的做需求分析的要點(diǎn)。

　　二、概念模式

　　《設(shè)計(jì)心理學(xué)》書中較早地介紹了概念模式。

　　比如 iPad 這樣一個(gè)產(chǎn)品，小孩子可能把它當(dāng)游戲機(jī)、老年人可能把它當(dāng)小電視、你可能把它當(dāng)大號(hào)的不能打電話的iPhone，可能它從設(shè)計(jì)的角度就是一個(gè)具有較大屏幕的可觸摸的移動(dòng)終端。

　　對(duì)于同樣一個(gè)產(chǎn)品，設(shè)計(jì)者的認(rèn)知與使用者的認(rèn)知很可能是不同的，甚至一類使用者與另一類使用者的認(rèn)知也是不同的。如果設(shè)計(jì)模式與用戶模式匹配較差，會(huì)極大影響產(chǎn)品留存和產(chǎn)品迭代。

　　三、用戶分類

　　小白用戶、普通用戶、專家用戶，三者的區(qū)別點(diǎn)在于對(duì)產(chǎn)品的使用深度，因此三者對(duì)產(chǎn)品可能有不同的迭代需求。我們也可以按照其他方式進(jìn)行劃分，比如內(nèi)容社區(qū)中貢獻(xiàn)內(nèi)容的創(chuàng)作者、閱讀內(nèi)容的學(xué)習(xí)者、整理內(nèi)容的維護(hù)者。

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

　　不同用戶對(duì)產(chǎn)品的需求可能是不同的，即多樣化需求。這種情況若各類用戶是互相促進(jìn)的關(guān)系，則大家可以各取所需和諧發(fā)展。比如內(nèi)容型社區(qū)創(chuàng)作者貢獻(xiàn)內(nèi)容，學(xué)習(xí)者可以獲得到所需內(nèi)容，同時(shí)學(xué)習(xí)者點(diǎn)贊可以給創(chuàng)作者反饋。

　　若用戶直接存在不可調(diào)和的沖突，則必須隔離不同用戶群或者放棄一部分用戶。比如內(nèi)容社區(qū)，一部分用戶希望看到的都是學(xué)術(shù)知識(shí)，一部分用戶希望都是搞笑段子。

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

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

　　如果你要做一個(gè)在互聯(lián)網(wǎng)賣化妝品的生意，開始時(shí)你可能不需要找供應(yīng)商，也不用建立復(fù)雜的倉儲(chǔ)，也不需要復(fù)雜的SKU管理。你可能只需要從專柜買一批化妝品，參照從供應(yīng)商拿到的價(jià)格來定價(jià)，然后做一個(gè)看起來非?？尚诺木W(wǎng)頁就可以了。

　　MVP，本質(zhì)上就是抓住用戶的核心需求，用最小的成本驗(yàn)證你的想法。

　　不過最小并不意味著簡(jiǎn)陋，還需要可行。比如你準(zhǔn)備做一個(gè)商業(yè)數(shù)據(jù)分析服務(wù)，如果你的產(chǎn)品看起來很丑陋就像上個(gè)世紀(jì)的產(chǎn)品，也會(huì)給用戶一種不穩(wěn)定不可靠的感覺。MVP 做的精細(xì)也是非常有必要的。

　　五、產(chǎn)品與市場(chǎng)匹配(PMF)

　　你提供一項(xiàng)服務(wù)，可以讓司機(jī)開車每天早上來我家接我上班。我不會(huì)開車也沒有車而且又很懶，所以我特別需要這項(xiàng)服務(wù)。但你的成本是 60/次，而我打車只需要 30/次，貴到我沒有需求了。如果你的服務(wù)隨著規(guī)模擴(kuò)大降低到 35/次，我就有了需求。當(dāng)你還做不到 35/次 的時(shí)候，為了快速擴(kuò)大規(guī)模達(dá)到平衡點(diǎn)，你可以補(bǔ)貼我 30/次 這樣規(guī)模就可以快速增長(zhǎng)了。

　　o 你提供了產(chǎn)品，客戶也有需求，但大家價(jià)格談不攏。

　　o 你提供了產(chǎn)品，客戶也有需求，價(jià)格也合適，但銷售成本太高了。

　　o 你提供了產(chǎn)品，客戶也有需求，整體價(jià)格也還合適，但客戶前幾年都采購?fù)炅恕?/span>

　　o 你提供了新產(chǎn)品，比客戶之前使用的產(chǎn)品維護(hù)費(fèi)用更低，但替換成本太高了。

　　o 你提供了新產(chǎn)品，考慮產(chǎn)品成本+銷售成本+替換成本，仍然比原有方案節(jié)省一半的費(fèi)用，你的產(chǎn)品與市場(chǎng)就匹配了。

　　六、分層設(shè)計(jì)

　　《用戶體驗(yàn)要素》這本書中有一個(gè)很經(jīng)典的五層設(shè)計(jì)模型。從戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層，描述了設(shè)計(jì)從抽象到具體的過程。當(dāng)我們思考和討論設(shè)計(jì)問題時(shí)，按照分層設(shè)計(jì)可以讓思路更加清晰，避免問題混雜導(dǎo)致大量的無效討論。

　　七、界面設(shè)計(jì)

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

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

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

　　組件化：把一些標(biāo)準(zhǔn)功能封裝成組件，不論是對(duì)工程師還是用戶都會(huì)覺得更加清晰。

　　同時(shí)，組件進(jìn)行再次組合可以生成新的組件。

　　《寫給大家看的設(shè)計(jì)書》，提到了設(shè)計(jì)中「親密性、對(duì)齊、對(duì)比、重復(fù)」這四個(gè)要點(diǎn)，這在界面設(shè)計(jì)中起到很大的作用。

　　八、色彩設(shè)計(jì)

　　需要了解 HSB、HSL、RGB、CMYK 等色彩系統(tǒng)。

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

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

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

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

　　九、字體設(shè)計(jì)

　　特殊的標(biāo)題需要使用大字體文字時(shí)，可以用圖片來代替保證顯示效果，其余最好優(yōu)先使用系統(tǒng)默認(rèn)字體。

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

　　o -apple-system：Apple 系統(tǒng)字體

　　o BlinkMacSystemFont：Chrome 默認(rèn)字體

　　另外還有一個(gè)屬性會(huì)影響字體顯示：font-weight，可以改變文字的粗細(xì)。但頁面如果有中英文兩種字體混合，兩種字體對(duì) font-weight 的支持可能是不同的。下面兩張圖片為font-weight為300與100的差別，當(dāng)100時(shí)會(huì)出現(xiàn)默認(rèn)英文字體不支持導(dǎo)致中英文字體粗細(xì)差距過大的情況，應(yīng)盡量避免極細(xì)字體的使用。

　　至于字體的選擇和搭配，推薦閱讀《黑客與設(shè)計(jì)》附錄中關(guān)于字體的部分。

　　十、隱喻設(shè)計(jì)

　　生活中人們會(huì)對(duì)色彩和符號(hào)形成認(rèn)知經(jīng)驗(yàn)，比如紅綠燈、警示牌。當(dāng)我們?cè)谧霎a(chǎn)品設(shè)計(jì)時(shí)，合理地使用隱喻，會(huì)讓用戶覺得產(chǎn)品更容易理解。

　　比如：文件→詳細(xì)數(shù)據(jù)、鉛筆→編輯、小扳手→設(shè)置、垃圾桶→刪除、鈴鐺→報(bào)警。

　　十一、情感化設(shè)計(jì)

　　與機(jī)器相比，人更喜歡和人交流。如果你的產(chǎn)品無法在功能上相比于競(jìng)品形成優(yōu)勢(shì)，那不如考慮讓你的產(chǎn)品充滿情感。

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

　　十二、動(dòng)效設(shè)計(jì)

　　常見的幾種動(dòng)畫曲線：

　　o Linear，勻速

　　o Ease，逐漸變慢

　　o Ease In，慢變快

　　o Ease Out，快變慢

　　o Ease In Out，慢變快變慢

　　o Spring，彈簧動(dòng)畫

　　可以使用 Framer 來學(xué)習(xí)創(chuàng)作動(dòng)畫。

　　十三、機(jī)制設(shè)計(jì)

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

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

　　o 知乎的用戶可以通過評(píng)論和私信進(jìn)行交流。

　　以上都是產(chǎn)品機(jī)制設(shè)計(jì)。

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

　　o 反對(duì)，可以將答案掩埋。

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

　　o 收藏，可以結(jié)構(gòu)化內(nèi)容。

　　o 限寫一次，可以防止內(nèi)容灌水。

　　機(jī)制設(shè)計(jì)，是產(chǎn)品設(shè)計(jì)中最有意思的地方。一個(gè)正確的機(jī)制，可以省去大片的運(yùn)營。比如 Drop box的邀請(qǐng)新用戶加存儲(chǔ)空間，滴滴的分享也可以領(lǐng)優(yōu)惠券，朋友圈只有相互為好友才可以看到留言。

　　十四、心理學(xué)設(shè)計(jì)

　　我在學(xué)習(xí)用戶體驗(yàn)設(shè)計(jì)的過程中，零散地積累了一些心理學(xué)的知識(shí)點(diǎn)，但都不夠系統(tǒng)。

　　比如：

　　o 字太小，用戶會(huì)煩

　　o 內(nèi)容寬度相對(duì)越窄，用戶讀的越細(xì)

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

　　o 圖片在內(nèi)容文本上方更合適

　　o 動(dòng)效快慢會(huì)影響用戶的感知

　　o 強(qiáng)關(guān)系圈人數(shù)上限是 150 人

　　直到我閱讀到了《設(shè)計(jì)師要懂心理學(xué)》這本書，推薦閱讀。

　　十五、產(chǎn)品架構(gòu)設(shè)計(jì)

　　o 賬戶系統(tǒng)

　　o 權(quán)限系統(tǒng)

　　o 訂單系統(tǒng)

　　o 積分系統(tǒng)

　　o 數(shù)據(jù)分析可視化系統(tǒng)

　　o 反垃圾系統(tǒng)

　　o 計(jì)費(fèi)系統(tǒng)

　　o 內(nèi)容管理系統(tǒng)

　　o 第三方授權(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)。有大量標(biāo)準(zhǔn)系統(tǒng)的積累，產(chǎn)品架構(gòu)能力自然提升。根據(jù)業(yè)務(wù)邏輯，把這些系統(tǒng)像組件一樣組裝在一起，就可以輕松不出錯(cuò)地完成產(chǎn)品架構(gòu)設(shè)計(jì)。