交互設(shè)計 Interaction Design 也被成為IXD。交互設(shè)計建立起了人與計算機(jī)便捷溝通的通道，它的目標(biāo)是創(chuàng)造可用性和用戶體驗俱佳的產(chǎn)品。作為UI設(shè)計師，我們在工作之中經(jīng)常會對接交互設(shè)計師和產(chǎn)品經(jīng)理，他們具有豐富的交互知識和經(jīng)驗。那是不是我們作為UI設(shè)計師，就只需要專心做好視覺層面的工作而不需要了解交互設(shè)計了呢？當(dāng)然不是，在視覺設(shè)計層面更多地考慮布局和交互原則才可以讓我們的界面更友好，視覺設(shè)計師是交互設(shè)計中非常重要的角色。

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

UI設(shè)計師如何有效的跨團(tuán)隊、多角色溝通？

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

作為設(shè)計方接口人，我近期參與了某產(chǎn)品新版本的交互設(shè)計及開發(fā)跟進(jìn)工作。該項目的產(chǎn)品規(guī)劃、設(shè)計、開發(fā)、運營由京深兩地四方多個團(tuán)隊合作進(jìn)行。結(jié)合自身項目經(jīng)歷，現(xiàn)將我對跨團(tuán)隊多角色溝通的感悟與經(jīng)驗加以總結(jié)，希望對大家有所幫助。有效溝通是提升工作效率的基礎(chǔ)，尤其是鵝廠這種業(yè)務(wù)涉及多地、對外多有合作的大型公司，進(jìn)行跨團(tuán)隊的、多角色轉(zhuǎn)換的溝通是工作常態(tài)?？鐖F(tuán)隊合作項目通常需要我們在團(tuán)隊內(nèi)部、異地leader、內(nèi)外部合作伙伴、第三方外包等多種角色間靈活調(diào)整溝通方式，運用有效的溝通手段，以確保溝通效果。

背景

有效溝通是提升工作效率的基礎(chǔ)，尤其是鵝廠這種業(yè)務(wù)涉及多地、對外多有合作的大型公司，進(jìn)行跨團(tuán)隊的、多角色轉(zhuǎn)換的溝通是工作常態(tài)?？鐖F(tuán)隊合作項目通常需要我們在團(tuán)隊內(nèi)部、異地leader、內(nèi)外部合作伙伴、第三方外包等多種角色間靈活調(diào)整溝通方式，運用有效的溝通手段，以確保溝通效果。

索引

本文將從有效溝通的心理建設(shè)、角色分析、流程搭建+工具沉淀三個層次展開。

心理建設(shè)

有效溝通的兩點認(rèn)識

為“傳”而“達(dá)”

溝通是信息的有效傳達(dá)。“傳”是手段，要求溝通時需闡明觀點；“達(dá)”是目的，指明溝通旨在使人通達(dá)理解。溝通中出現(xiàn)的自說自話、固執(zhí)己見，通常是偏執(zhí)于“傳”，而忽視了“達(dá)”。需要明確的是，所有的溝通，都應(yīng)該以接收方更好的理解接受為目的，而不是自顧自的滔滔不絕。

減少損耗

信息傳達(dá)的過程伴隨著信息的損耗。因此，在溝通的各個環(huán)節(jié)都需注意減少損耗，提升觸達(dá)率。一方面，要理清自己的表達(dá)重點和思路，減少信息的輸出損耗；另一方面，要從接受方關(guān)注點出發(fā)，提升對接受者的信息觸達(dá)；此外，還要靈活切換溝通方式、正確處理意見分歧等，盡量減少信息在傳遞途中的折損。

跨團(tuán)隊多角色溝通的基本態(tài)度

跨團(tuán)隊——秉持中立合作的態(tài)度

• 中立——團(tuán)隊不同，訴求不同，秉持中立的溝通態(tài)度，不要因個人偏向?qū)е聼o意義消耗。

• 合作——以同理心贏得各方的信任，避免抵觸情緒的產(chǎn)生，營造良好的溝通氛圍。

• 產(chǎn)品目標(biāo)導(dǎo)向——對有爭議的問題點，應(yīng)綜合權(quán)衡用戶體驗、產(chǎn)品目標(biāo)和開發(fā)成本，以產(chǎn)品目標(biāo)為第一要義。

多角色——認(rèn)清各方關(guān)注點的差異

• 理解各方差異化的核心訴求——對不同團(tuán)隊角色的溝通中應(yīng)有不同的側(cè)重點，靈活的轉(zhuǎn)換角色，做有針對性的輸出表達(dá)。

• 對內(nèi)交流——以產(chǎn)品目標(biāo)為導(dǎo)向，保證內(nèi)部一致；對上匯報——重點明確，避免流水帳；對外溝通——目標(biāo)明確，內(nèi)部一致，有針對性的溝通，避免互相拆臺或雞同鴨講。

角色分析

項目組成員角色模型

項目伊始，在融入團(tuán)隊的過程中，應(yīng)注意理清項目組內(nèi)的不同角色，明確匯報對象，做好任務(wù)分工，理清利益關(guān)系，協(xié)調(diào)各方訴求。

（具體項目組角色模型可能涉密，略）

各角色核心訴求及溝通側(cè)重點模型

不同角色的核心訴求不同，也因此在對不同角色溝通時也應(yīng)該有所側(cè)重，以本項目為例：京深兩地四方的所有成員，可大致劃分為如下七種角色。

各角色核心訴求及溝通側(cè)重點小結(jié)

流程搭建

有效溝通流程模型

在有效溝通流程模型中，我按籌備、執(zhí)行、跟進(jìn)三個階段，繪制出體驗地圖，將溝通中的關(guān)鍵節(jié)點按行為、心理、情緒、方法、工具五個緯度拆分，梳理各節(jié)點需注意的問題，以及相應(yīng)的有效溝通方法和工具。（詳情請點擊查看大圖）

籌備階段——明確目的，同步信息

• 明確溝通目的。無論是同步郵件、電話會議還是IM群聊，都需要在發(fā)起前明確目的，列好問題清單，帶著目的溝通。如：多方電話會議前，應(yīng)事先知會各方會議主旨，準(zhǔn)備會議提綱并在會議開始時向各方闡明，為會議提供清晰的行進(jìn)框架。

• 提前同步信息。信息同步是溝通的前提。依據(jù)溝通目的準(zhǔn)備溝通所需的文檔，根據(jù)需要提前同步，盡量減少因信息不對稱帶來的時間浪費。明確易讀的設(shè)計輸出、正式溝通前與各方單獨的預(yù)溝通、提前郵件同步告知等，都是有效信息同步的手段。

執(zhí)行階段——抓大放小、促成共識

• 對待爭議，抓大放小，避免僵局。評估爭議點時，先不要基于反駁避免情緒化表達(dá)，適當(dāng)發(fā)問：為什么做？為什么不做？不做之后有什么后果？理智全面的做出評判。給問題點評定優(yōu)先級，抓大放小，集中精力推進(jìn)主功能，高成本、低優(yōu)先級的細(xì)節(jié)問題放到最后統(tǒng)一處理，避免陷入“就是要改”vs“就是不改”的無謂消耗。根據(jù)需要及時協(xié)調(diào)第三方資源進(jìn)場，尋求技術(shù)支持或資深leader的建議，避免溝通僵局的出現(xiàn)。

• 促成共識。無結(jié)果的溝通是無效的溝通，有效溝通應(yīng)促使各方達(dá)成共識。無論是待協(xié)調(diào)、暫擱置還是需改進(jìn)，都需要有一個結(jié)論明確、責(zé)任人明確、截止時間明確的溝通結(jié)論，并依此執(zhí)行跟進(jìn)。

跟進(jìn)階段——同步落實，自我反思

• 進(jìn)度同步，問題落實。溝通過后及時同步溝通結(jié)論，設(shè)計交付、前端交付等階段性時間節(jié)點，需以正式的項目郵件，及時周知項目相關(guān)人員。對于已解決的問題，及時跟進(jìn)驗收；暫時擱置的問題，做好記錄，明確時間節(jié)點和責(zé)任人；需更多資源介入的問題，及時對上反饋，申請資源解決。

• 自我反思與補齊。每次溝通都是一次查漏補缺的過程，每次溝通后花時間反思一下本次溝通中自己在設(shè)計說明中有哪些疏忽、表述上有何不足、相關(guān)知識上有那些欠缺，以此為鑒及時調(diào)整、補齊疏漏。

工具沉淀

開發(fā)故事卡

說明：明確易讀的設(shè)計說明文檔

功能：產(chǎn)品設(shè)計說明、開發(fā)指導(dǎo)手冊、階段性交付走查依據(jù)

使用場景：跨團(tuán)隊溝通中，便于開發(fā)人員準(zhǔn)確的理解設(shè)計意圖；適合外部合作時模塊化開發(fā)與階段性交付，便于交付及走查。

使用要點：

• 根據(jù)信息構(gòu)架拆分產(chǎn)品模塊，分別設(shè)立索引，提供產(chǎn)品概覽，串聯(lián)各功能詳情頁。

• 在索引和詳情頁之間由超鏈接跳轉(zhuǎn)，方便快速定位。

• 按照功能點拆分詳情頁，提出功能需求，明確驗收標(biāo)準(zhǔn)，說明頁面細(xì)節(jié)。

• 各頁面統(tǒng)一編號與視覺源文件一一對應(yīng)，方便快速查找。

需求管理文檔

說明：需求及反饋問題的規(guī)范化管理模板

功能：需求變動及問題反饋的管理模板、開發(fā)發(fā)跟進(jìn)的溝通文檔

使用場景：開發(fā)跟進(jìn)階段，實時記錄變動的需求及反饋的問題點；設(shè)計側(cè)定期反饋給開發(fā)人員的規(guī)范化輸出文檔。

使用要點：

• 明確問題及目標(biāo)效果，排定優(yōu)先級依此解決。

• 明確負(fù)責(zé)人和時間節(jié)點，保證落實。

• 做好文檔更新維護(hù)及信息同步。

• 按階段統(tǒng)一反饋調(diào)整，節(jié)約開發(fā)時間。

關(guān)注點推進(jìn)模型

說明：不同項目階段明確核心關(guān)注點的虛擬模型

功能：輔助聚焦當(dāng)下關(guān)注點，避免陷入不合時宜的細(xì)節(jié)或宏觀問題

使用場景：從宏觀到微觀的產(chǎn)品設(shè)計過程中，幫助梳理各個階段需溝通的核心問題，溝通時陷入細(xì)節(jié)或反復(fù)爭論時的自查工具。

使用要點：

• 做好關(guān)注點的的逐步推進(jìn)：探討信息構(gòu)架時就不要在交互樣式上反復(fù)拉鋸；討論交互方式時就不要過度關(guān)注視覺細(xì)節(jié)。

• 不過早陷入細(xì)節(jié)。優(yōu)秀產(chǎn)品的細(xì)節(jié)固然需打磨，但從0到1實現(xiàn)一款產(chǎn)品的過程中，將有限的資源和排期消耗在不合時宜的細(xì)節(jié)權(quán)衡上，得不償失。

• 同樣，若因執(zhí)行時的設(shè)計挑戰(zhàn)需調(diào)整產(chǎn)品上層，也需主題限定問題范圍，不要因宏觀問題上的反復(fù)而影響執(zhí)行效率。

優(yōu)先級評估模型

說明：不同項目階段評估需求優(yōu)先級的KANO衍生模型

功能：借助KANO模型分析思路，對需求優(yōu)先級提供排定依據(jù)

使用場景：設(shè)計階段樣式取舍、開發(fā)跟進(jìn)階段需求調(diào)整的先后順序、應(yīng)對分歧如何抓大放小，都可以借助優(yōu)先級評估模型輔助評估。

使用要點：

• 不同項目階段，不同溝通對象對同一需求優(yōu)先級的評定標(biāo)準(zhǔn)不同，因此應(yīng)注意根據(jù)項目階段和溝通對象靈活調(diào)整。

• 不同產(chǎn)品在用戶體驗與產(chǎn)品目標(biāo)取舍上有所區(qū)別。一般而言，2C產(chǎn)品更注重用戶體驗，而2B產(chǎn)品則可能更注重實現(xiàn)產(chǎn)品目標(biāo)，因此應(yīng)注意具體產(chǎn)品具體分析。

藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

積分的作用在整個產(chǎn)品的過程中主要是希望是圍繞著拉新、留存、促活去做的，配合著主打新功能等等根據(jù)產(chǎn)品的差異而差異化。從用戶為出發(fā)點，將積分可以分為兩大塊：一塊是獲取、一塊是消耗。

首先，就積分而言，是用戶通過完成某些任務(wù)或手段來進(jìn)行對應(yīng)積分點的獲取，再通過相關(guān)的手段進(jìn)行消耗的一個過程。

所以從用戶為出發(fā)點，將積分可以分為兩大塊：一塊是獲取；一塊是消耗。

下面針對兩點分開來說：

一、獲取（主要是獲取的方式和對應(yīng)的規(guī)則）

獲取方式，大類可根據(jù)用戶完成對應(yīng)任務(wù)類型分為：

1. 新手任務(wù)類（這是一個幫助用戶熟悉產(chǎn)品同時激勵用戶使用產(chǎn)品的過程）

• 綁定手機(jī)；
• 綁定郵箱；
• 上傳頭像；
• 首次消費/發(fā)文/分享等等對應(yīng)產(chǎn)品核心功能的首次使用；
• 完善個人信息。

根據(jù)產(chǎn)品核心功能和側(cè)重點的不同而不同，一定要區(qū)別哪些信息內(nèi)容是我們想從用戶處獲取的核心，哪一些并不是很重要。不要人云亦云，不要有“別的產(chǎn)品有了所以我也要有”的思想，思考一下為什么你要需要這個任務(wù)?？梢远鄥⒄掌渌e分體系完善的對它們進(jìn)行整理歸類，之后結(jié)合自身產(chǎn)品特性再去做自己的。

2. 日常任務(wù)類

• 簽到（這幾乎是最基礎(chǔ)最常見的）；
• 對應(yīng)產(chǎn)品核心功能的使用相關(guān)的任務(wù)。

3. 運營活動類

• 節(jié)日相關(guān)類；
• 產(chǎn)品特定日期相關(guān)類（周年等等）。

這個具體需要配合運營相關(guān)人員的推廣活動等等進(jìn)行部署調(diào)整，但是一定要做好部門間的對接工作。因為活動對應(yīng)分配的積分比例等等影響很深遠(yuǎn)，一定要思考好本次活動預(yù)計需要分發(fā)出去多少積分，達(dá)到怎樣的活動效果？對積分整體有什么影響？存在那些可能出現(xiàn)的問題和漏洞？怎么去防止薅羊毛黨？等等。

4. 特定激勵用戶類

這類主要是，例如：生日，或者和用戶建立聯(lián)系的特定日期（例如：幾周年等等）。

5. 均衡刺激積分的流通

這類主要放在消耗中講，主要是抽獎類把積分當(dāng)作一類獎品進(jìn)行兌換。

以上算是大致講了積分的獲取，要領(lǐng)就是結(jié)合產(chǎn)品結(jié)合情景去進(jìn)行設(shè)置。對于初次設(shè)計的人來說，就是先要找到經(jīng)典體系完整的有相關(guān)性參考價值的產(chǎn)品的積分體系，進(jìn)行總結(jié)整理思考，然后再進(jìn)行自己的設(shè)計，而且盡量多看多整理幾家。

二、消耗

消耗的話根據(jù)產(chǎn)品的自身屬性的不同，表現(xiàn)形式差異性比較大所以我的列舉不一定人人都適用，僅供參考。但是本質(zhì)都是一樣的，都是進(jìn)行積分的消耗。

1. 兌換商品

• 虛擬商品；
• 現(xiàn)實商品。

兌換的手段可以是純積分兌換，可以是積分+現(xiàn)實貨幣。對于兌換商品的選擇也是很重要，如果兌換給出的商品都讓用戶提不起來興趣，那么無疑是失敗的。好比二次元類搞活動積分兌洗潔精就跑的很偏了，所以選品也很重要。

虛擬產(chǎn)品的兌換最好是圍繞著核心功能or下一步主打的功能來比較好，再或者說積分體系和會員體系是相輔相成的，可以在兌換商品，這里加入兌換會員增強(qiáng)之間的聯(lián)系。會員體系是另外一大塊了在這里就不說了。

2. 抽獎

抽獎是最好的進(jìn)行積分流動的手段，如果用戶只是一味的累積積分，無論是產(chǎn)品所提供的虛擬商品，還是現(xiàn)實商品都不和他心意提供另一個出口給用戶?；蛘咔皟烧唛T檻過高或需要現(xiàn)實貨幣，用戶不愿花費，抽獎都是一種低花費積分小概率抽中商品，利于積分生態(tài)的流動的措施。

具體的抽獎形式就很多了什么刮刮獎啊大轉(zhuǎn)盤啊，記得要控制好概率分配噢。

三、注意點

（1）對于整個積分體系上面都是細(xì)節(jié)，在實際操作中第一步，要確定的是在公司的戰(zhàn)略上，愿意每年投入多少錢在里面，或者對于已經(jīng)盈利的公司，是拿出盈利里的多少百分比來進(jìn)行用戶的一個回饋。

同時，在投入時，希望得到的反饋效果是怎樣的，都要制定好。這個可以根據(jù)數(shù)據(jù)后期的變化再進(jìn)行調(diào)整，但是一定要有這樣一個概念。去估計整體的量，在這個預(yù)算下進(jìn)行后期的設(shè)計，同時在后期設(shè)計完成后，在進(jìn)行計算在極端情況下（兩個極端）和預(yù)期情況下，和公司整體戰(zhàn)略偏差是否在可接受范圍，如果不在那么再進(jìn)行調(diào)整。

（2）積分體系可以看作是產(chǎn)品內(nèi)部的貨幣體系，所以要注意積分膨脹和積分緊縮的問題，要是積分的價值盡量保持在一個波動不大可控的范圍內(nèi)。無論是膨脹還是緊縮，都會影響產(chǎn)品和用戶給產(chǎn)品帶來不好的影響。請重點關(guān)注膨脹，因為多數(shù)會出現(xiàn)的情況時設(shè)計不當(dāng)積分超發(fā)。

（3）做好相關(guān)數(shù)據(jù)的管理實時反饋，用戶的領(lǐng)取積分?jǐn)?shù)據(jù)，消耗積分?jǐn)?shù)據(jù)等等，細(xì)節(jié)數(shù)據(jù)需要自己去扣清楚都是有價值的數(shù)據(jù)。后臺相關(guān)頁面設(shè)計到位，及時將數(shù)據(jù)反饋給相關(guān)人員進(jìn)行溝通。

（4）做好風(fēng)控體系，別讓羊毛黨毀了整個體系。

（5）不要讓你的積分體系一成不變，在固定的體系下，要用不同的活動內(nèi)容和兌換商品的推成出新，讓用戶感覺到新鮮感。如果什么都不變化不抓著節(jié)奏走，那么用戶會失去興趣。具體要和運營等等相關(guān)人員進(jìn)行討論。

（6）積分的規(guī)則一定要完善沒有漏洞，不論是給出的任務(wù)還是消耗的過程一定不要有歧義，一定要仔細(xì)?。。。。?！這點很重要！?。?！

（7）積分體系的任務(wù)應(yīng)該是對用戶的留存，活躍和新增起到幫助作用的。所以不可能兼顧到所有的注冊用戶，一定要分清楚主次，誰是主要服務(wù)對象，服務(wù)的目的是什么等等。

好久沒有寫過文章了，邏輯有不順暢，內(nèi)容有錯誤的地方歡迎大家指出，互相學(xué)習(xí)，謝謝閱讀。

本文由 @judyyyy 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

編者按：這篇來自產(chǎn)品設(shè)計師 Eugen E?anu 的文章解開了我長久以來的一個疑惑，其中的思考和經(jīng)驗值得我們共勉。結(jié)尾的 One more thing 是我額外補充的內(nèi)容和一點想法，和當(dāng)下產(chǎn)品設(shè)計的困境相關(guān)，也是試圖補完這篇文章，希望能給你一點幫助。

當(dāng)你在尋找一個能夠滿足你需求的應(yīng)用的時候，會不會因為太多相似的產(chǎn)品而無從選擇？當(dāng)你想要在兩個甚至更多相似的產(chǎn)品中進(jìn)行選擇，一切都顯得那么困難。而唯一能夠進(jìn)行快速區(qū)分的因素似乎是設(shè)計，但是緊接著會發(fā)現(xiàn)連設(shè)計都是那么相似。

為什么市場上所有的應(yīng)用看起來都長的同一副面孔呢？

在回答這個問題之前，我想簡單澄清一些事情。為了創(chuàng)造出能夠解決需求的產(chǎn)品，通常需要采用以人為本的方法來進(jìn)行設(shè)計，但是事實上，那種狀態(tài)太過于理想，幾乎沒人能夠真正做到。

以人為本的設(shè)計方法，確實能夠極富創(chuàng)造性地解決問題。當(dāng)采用這種方法來為目標(biāo)用戶進(jìn)行設(shè)計，最終能夠得到了一個為這些用戶量身定制的解決方案。但是，這種設(shè)計方法需要設(shè)計者具備無與倫比的同理心來真正站在目標(biāo)用戶的角度來思考問題，由此獲得大量的想法和靈感，建立一大堆可能有效的原型，同目標(biāo)用戶分享你正在做的事情，驗證你的感受和想法，最終將你的創(chuàng)新的解決方案推向世界。但是這是理想的狀況。

那么為什么世界上那么多偉大的公司，依然無法真正采用這樣的方法成就真正優(yōu)秀的產(chǎn)品呢？因為幾乎所有的產(chǎn)品身上都有一種病毒，它的名字叫做特征蔓延。

產(chǎn)品開發(fā)流行病：特征蔓延

特征蔓延的英文名叫做 Feature creep，它的主要癥狀就是不斷向產(chǎn)品中添加功能。

現(xiàn)如今，絕大多數(shù)的產(chǎn)品，無論是物理實體還是存在于手機(jī)中的各色 APP，幾乎全都面對著激烈的競爭。

激烈的競爭使得每個人都面臨著壓力，產(chǎn)品所屬的企業(yè)中，從領(lǐng)導(dǎo)到產(chǎn)品經(jīng)理再到最底層的開發(fā)者和設(shè)計師，所有人都面對著來自對手和潛在對手的壓力。

這種競爭壓力基本上是源自于三個方面：價格，功能和質(zhì)量。非常不幸的是，絕大多數(shù)時候，這三者的壓力從前到后是依次遞減的。價格競爭的壓力通常是最大也是最直接的，然后才是功能和產(chǎn)品質(zhì)量，至于這個順序意味著什么，就不贅述了。

同時，產(chǎn)品上線的速度和順序也很重要。誰是進(jìn)入市場第一人，這個是必須爭一下的。

這樣一來，想要盡快殺入市場的產(chǎn)品，在很大程度上是伴隨著「偷工減料」的。沒有足夠的時間來對產(chǎn)品進(jìn)行足夠多的迭代，沒有辦法把系統(tǒng)調(diào)整到最優(yōu)，沒有辦法把硬件缺陷都找出來，沒有辦法把軟件中每一個 Bug 都盡量找出來，甚至絕大多數(shù)企業(yè)的領(lǐng)導(dǎo)都抱有「沒事，我們隨后再把問題找出來解決掉?！箯碾娔X到汽車，從 Windows 到 iOS，從來都是如此。

沒有什么 Bug 是一個補丁解決不了的，如果不行，多打幾個?！猈indows開發(fā)團(tuán)隊

當(dāng)然，能夠通過后期補丁解決的問題終究是少數(shù)。實際市場上絕大多數(shù)的產(chǎn)品確實隨著補丁和修改逐步提升了，但是絕大多數(shù)仍然沒有解決用戶的問題。

對于特征蔓延這種病癥，早在1976年就已經(jīng)被發(fā)現(xiàn)，并且在產(chǎn)品設(shè)計圈當(dāng)中有著非常廣泛的認(rèn)知。對于這種產(chǎn)品病有一個非常學(xué)術(shù)的描述：

特征蔓延是指一產(chǎn)品（如APP）的軟件機(jī)能持續(xù)膨脹或增加的情形。產(chǎn)品基本機(jī)能以外的擴(kuò)充機(jī)能，會使產(chǎn)品比原始設(shè)計要更復(fù)雜。長時間來看，額外或不需要的機(jī)能慢慢的進(jìn)入系統(tǒng)中，使系統(tǒng)超出原來設(shè)定的目標(biāo)。

假設(shè)我們擁有一個非常強(qiáng)大的產(chǎn)品團(tuán)隊，設(shè)計師擁有足夠的同理心，開發(fā)和測試也非?？孔V，他們使用以人為中心的設(shè)計方法，探索了所有用戶使用場景，并且遵循產(chǎn)品流程認(rèn)真設(shè)計仔細(xì)測試，最終輸出了一個用戶想要購買的優(yōu)質(zhì)產(chǎn)品。假設(shè)這個問世的產(chǎn)品在各個層面上都是完美的：擁有直觀的界面，良好的感覺和優(yōu)秀的視覺，貼合用戶的體驗等等。它只有一個使命，那就是以有意義的方式滿足人們的需求，讓人們能夠更好地生活，產(chǎn)品因此而走向成功。誰都想來一個。（就像解決了信號問題的 iPhone 4）

非常不幸的是，產(chǎn)品上市之后，各種各樣的影響因素開始出現(xiàn)，情況開始向著并不理想的方向發(fā)展。

• 現(xiàn)有的用戶非常喜歡這款產(chǎn)品，但是他們想要更多的功能，各種各樣的功能，包括帶孩子。
• 競爭對手開始推出新款，并且具備一些全新的、我們的產(chǎn)品所不具備的功能。從公司領(lǐng)導(dǎo)到用戶都開始催我們的團(tuán)隊增加新功能。
• 客戶對于產(chǎn)品總體上是滿意，但是買的人多了之后，市場趨于飽和，銷售額不可避免的下降了。是時候添加新的或者創(chuàng)新的功能來促使用戶更新或購買新版本了。

特征蔓延就是這樣出現(xiàn)的，產(chǎn)品在現(xiàn)有的功能上不斷增加更多的功能。各種各樣的理由會促使產(chǎn)品不得不增加功能，各種各樣。然后產(chǎn)品開始膨脹，臃腫，直到用戶實在不太想用或者徹底沒法用。

而在如今的市場和商業(yè)競爭中，特征蔓延并不是唯一的絕癥。

競爭驅(qū)動式設(shè)計的泥潭

哈佛大學(xué)教授 Youngme Moon 認(rèn)為，產(chǎn)品和競品之間的攀比對抗是讓產(chǎn)品陷入千篇一律的境地的主要原因。通常，企業(yè)為了提升產(chǎn)品的市場份額，會讓自家產(chǎn)品擁有對手一樣的功能，來確保競爭力。對手的團(tuán)隊協(xié)同軟件的售價是20美元？沒事，我們開發(fā)個功能一樣強(qiáng)大的，定價15美元好了。他們的移動端的 APP 只需要加1美元就能獲得？那我們的移動端版本直接免費和桌面端綁定好了。

當(dāng)產(chǎn)品陷入和對手刺刀見紅的局面之時，兩敗俱傷的結(jié)果就不遠(yuǎn)了。試圖逐個功能和對手競爭，必然會陷入同質(zhì)化的競爭，很難讓用戶真正愛上其中的某個產(chǎn)品。

這種就是競爭驅(qū)動型設(shè)計。令人遺憾的是，即使產(chǎn)品的第一版是以用戶為中心設(shè)計出來的優(yōu)質(zhì)產(chǎn)品，在競爭驅(qū)動下誕生的后續(xù)產(chǎn)品，就很難贏得用戶的真心了。

很多時候如果你想創(chuàng)造真正卓越的產(chǎn)品，你不得不花費更多的時間。而即使你創(chuàng)造出來這樣的產(chǎn)品，在市場上也不一定能在銷售排行榜上殺入前三，屈居第四是很正常的事情。那么你還愿意這么做么？

我們都聽說過先發(fā)優(yōu)勢，但是你真的知道獲得先發(fā)優(yōu)勢，將會付出什么樣的代價么？

用1年寫一冊暢銷書，還是花5年成就一本經(jīng)典？

以寫書來舉例也許更加直觀。當(dāng)你決定寫一本關(guān)于設(shè)計的書，然后登上暢銷榜，名利雙收，好像挺不錯的。如果它的內(nèi)容是之前沒人寫過的，并且確實比較有市場，在內(nèi)容上稍加打磨，幾個月后引爆設(shè)計圈似乎不是太大的問題。事實上，它上架之后，和自己的預(yù)期相差不遠(yuǎn)，挺好。不過，不知道為什么，1年之后，熱點消退，這本書也沒什么人買了。

換一個做法，寫書的過程中可能需要勒緊褲腰帶過日子，花上5年時間仔細(xì)揣摩，寫一本擁有持續(xù)價值的書，然后在之后的100年時間當(dāng)中，成為設(shè)計圈中每個設(shè)計師的必讀書。寫書的過程中，你需要專門地進(jìn)行研究，仔細(xì)地調(diào)整內(nèi)容，對于每個細(xì)節(jié)都精雕細(xì)琢，花費更多的時間，讓這本書有對抗時間的價值。

從長遠(yuǎn)來看，只看眼前、偷工減料的公司會自然而然過時，然后被人們所忘記。浪潮過后，誰在裸泳一目了然。

為什么總?cè)滩蛔√砑有碌墓δ埽?

和對手的對比，總能看到自家產(chǎn)品的缺陷，然后補完缺陷，這有什么不對么？似乎沒問題，但是這種思維方式并不會打造更好的產(chǎn)品。更好的策略是：

專注于自家真正擅長的領(lǐng)域，并繼續(xù)深挖自己的長處。在自己的優(yōu)勢領(lǐng)域，集中自己的研發(fā)能力，并作為營銷重點。這樣才能讓自己的產(chǎn)品從平庸走向卓越，真正能在慘烈的紅海中脫穎而出。用更少更精銳的功能來成就自己，而不是在成堆的功能中與對手同歸于盡。

還記得一代的 Google Pixel Phone 么？他們的營銷口號是「有耳機(jī)插孔的手機(jī)」，對標(biāo)的正是取消耳機(jī)插孔的 iPhone ，而這個文案正是嘲諷 iPhone 的設(shè)計太過愚蠢。令人驚訝的是，隨后的 Google Pixel 2 也跟著取消了耳機(jī)插孔?，F(xiàn)在還有誰記得 Google Pixel 系列呢？

是聚焦長處，還是忙于跟隨？

偉大的設(shè)計需要脫離茍且的競爭和來自客戶的壓力。開始專注于你認(rèn)為重要的事情，以及你目光所及的遠(yuǎn)方。在你最優(yōu)秀的地方，集中精力。你必須確保你的產(chǎn)品是一致且連貫的。這意味著領(lǐng)導(dǎo)層需要足夠睿智，也足夠堅定，這樣才能抵擋來自用戶和市場部門不斷增加產(chǎn)品功能的各種需求。

成就最好的產(chǎn)品，設(shè)計者要屏蔽來自競爭對手的聲音，專注于用戶真實的深層需求。

不要覺得我的話是憑空而來的。Amazon 的 CEO 兼創(chuàng)始人 Jeff Bezos 也提到過類似的方法，被稱為「客戶迷戀」。在他看來，將所有精力集中在客戶的需求上，而不是競爭。重點在于三個簡單的問題上：「客戶需要的是什么？」「他們的需求如何才能滿足」「我們可以做什么來提高客戶服務(wù)和價值？」Bezos 還認(rèn)為，專注于客戶才是首要目標(biāo)，其他的問題會迎刃而解的。如果你一開始就被市場競爭吸引了注意力，很難作出真正對的決策。產(chǎn)品質(zhì)量通常只關(guān)乎客戶和解決真實的需求。

One more thing

想要從激烈的競爭中抽身出來， 創(chuàng)造真正獨特的產(chǎn)品，是許多產(chǎn)品設(shè)計師的愿望。但是這真的不是一句話說得清楚的事情，真實的情況比我們想象中還要復(fù)雜。

競爭驅(qū)動型的設(shè)計確實是一個很難繞過的問題，驅(qū)動產(chǎn)品的不僅僅是領(lǐng)導(dǎo)和客戶的聲音，深陷市場競爭，許多時候確實身不由己。

采用以用戶為中心的設(shè)計的設(shè)計流程，還繞不開一個常見的因素：最佳實踐。經(jīng)過前人驗證、時間打磨、用戶習(xí)慣之后所獲得的最佳實踐，是設(shè)計師和產(chǎn)品在很多時候必須依托的東西。比如我們?nèi)缃袼吹降脑S多表單的設(shè)計策略和漢堡菜單的使用。用戶和市場已經(jīng)「塑造」出了許多最優(yōu)的設(shè)計策略，設(shè)計師通常會直接拿來使用，而我們感到「千人一面」的 UI設(shè)計當(dāng)中，確實有各種最佳實踐所「作出的貢獻(xiàn)」。

包括我們現(xiàn)在正在不斷探索的動效設(shè)計，雖然力圖在視覺和體驗上有所創(chuàng)新，但是早在近百年前，迪士尼的動畫設(shè)計師們已經(jīng)總結(jié)出一套人性化動畫設(shè)計的策略，實際上我們今天許多優(yōu)秀的動效設(shè)計，依然是圍繞著這一套「最佳實踐」來進(jìn)行設(shè)計和重設(shè)計的。

違反「最佳實踐」的特立獨行的設(shè)計并非不可，只不過它通常需要遵循「每次僅只能打破一個規(guī)則」的原則。在用戶已經(jīng)被市場培養(yǎng)出大量習(xí)慣的前提之下，大量采用反直覺、反習(xí)慣的設(shè)計，只會讓產(chǎn)品死的更快。

那么是不是就沒有辦法了呢？當(dāng)然不是。新鮮有趣的、獨樹一幟的設(shè)計并非沒有辦法設(shè)計，設(shè)計師需要在最佳實踐以外的部分尋求改變，探索可能性，甚至等待契機(jī)。不同的設(shè)計趨勢、元素、技法、排版布局、配色、動效進(jìn)行多樣化的組合，依然可以創(chuàng)造出讓人眼前一亮的設(shè)計。但是這還不夠。

早在上世紀(jì)30年代的時候，包豪斯設(shè)計學(xué)院的先哲們就已經(jīng)提出過「形式追隨功能」的設(shè)計箴言。這句話強(qiáng)調(diào)的是設(shè)計的科學(xué)性，便捷性和經(jīng)濟(jì)效益，而不再是圍繞著裝飾性和簡單的形式感來進(jìn)行設(shè)計。在今天這個用戶體驗至上、以用戶為中心的設(shè)計趨勢之下，UI 和視覺所代表的「形式」所追隨的「功能」應(yīng)該是用戶的真實需求。而在這個語境下試圖創(chuàng)新，或者恰如其分地融入一些貼合場景和目標(biāo)的藝術(shù)元素，也許是個不錯的突破口。

正如同在上一篇文章《熟知用戶行為的這7個層面，你的設(shè)計才會走進(jìn)人心》中所說的，客戶買鉆頭的時候，需要的并非鉆頭而是洞，同樣的，用戶下載一款閱讀APP 的時候，他的真實需要并非是閱讀器，他需要的是內(nèi)容，是信息，是滿足他求知欲的文章，或者填補碎片時間的有趣的故事。

內(nèi)容為王這句話早就已經(jīng)不是口號了。圍繞著內(nèi)容做設(shè)計已經(jīng)成為了諸如 Medium 和 Twtter 這樣的企業(yè)的新策略，而國內(nèi)的許多一線企業(yè)也開始擁有自己的「首席內(nèi)容官」。讓設(shè)計追隨內(nèi)容，讓真正吸引用戶的東西來撬動產(chǎn)品，拉升體量，才是正途。

設(shè)計和內(nèi)容的結(jié)合方式多種多樣，根據(jù)內(nèi)容所需要的語境來搭配相應(yīng)的設(shè)計是目前已知的最常見的做法。根據(jù)內(nèi)容本身所具備的故事性和環(huán)境特征，視覺化地表達(dá)，讓 UI 和視覺服務(wù)于內(nèi)容，是許多成功的設(shè)計所驗證過的技巧。

比如下面的 voyage-electrique這個網(wǎng)站，借助 C4D 構(gòu)建的 3D 可交互式的場景來呈現(xiàn)電力系統(tǒng)的運作，清新可愛的畫風(fēng)和令人愉悅的音樂讓原本沉悶的主題顯得頗為有趣，讓人心生好感的設(shè)計，使得相關(guān)的信息更容易被用戶接受。流程化的信息呈現(xiàn)方式隱約具備了故事性的表達(dá)，即使你并不懂法語也會流連忘返，在點擊和探索中多停留一會兒。語言蒼白，不如點進(jìn)去看看。

最后需要注意一個問題：人類先天就是喜新厭舊的生物，再新鮮有趣的東西，在獲得之后都會快速地適應(yīng)（適應(yīng)性認(rèn)知偏差），并不再感到新鮮。在內(nèi)容和設(shè)計策略上，適時地注入新鮮的內(nèi)容（不違反基本設(shè)計規(guī)則和產(chǎn)品方向的前提下），是維持活躍度而必須做的事情。

原文作者 : Eugen E?anu

譯者/編輯 : 陳子木

譯文地址：https://www.uisdc.com/design-product-like-everyone-else

藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

     js中構(gòu)造函數(shù)的幾種繼承模式淺析

一、原型鏈模式繼承

    利用原型讓一個引用類型繼承另一個引用類型的屬性和方法 。

    用的最多。

    缺點：不可傳參，不可多繼承。

        


            


                


                    


                    

                

                


                    

                        function People(name, age) {//添加公有屬性
                    

                

            

            


                


                    


                    

                

                


                    

                        name = name || 'xiaolan';
                    

                

            

            


                


                    


                    

                

                


                    

                        age = age || 18;
                    

                

            

            


                


                    


                    

                

                


                    

                        this.name = name;
                    

                

            

            


                


                    


                    

                

                


                    

                        this.age = age;
                    

                

            

            


                


                    


                    

                

                


                    

                        }//創(chuàng)建一個名為People的類
                    

                

            

            


                


                    


                    

                

                


                    

                        People.prototype.eat = function() {//添加私有屬性
                    

                

            

            


                


                    


                    

                

                


                    

                        console.log(this.name + '賊能吃');
                    

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    

                        function Cat(color) {//創(chuàng)建一個名為Cat的類
                    

                

            

            


                


                    


                    

                

                


                    

                        this.color = color;
                    

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    

                        Cat.prototype = new People('小叮當(dāng)', 200);//實例化一個People類，并賦值給Cat類的原型鏈
                    

                

            

            


                


                    


                    

                

                


                    

                        var cat = new Cat('藍(lán)白色')
                    

                

            

            


                


                    


                    

                

                


                    

                        console.log(cat.name)//'小叮當(dāng)'
                    

                

            

            


                


                    


                    

                

                


                    

                        cat.eat();//'小叮當(dāng)賊能吃'
                    

                

            

        

二、混合模式繼承

    用call的方法只能繼承私有屬性，所以再加一遍一遍原型鏈模式繼承，原型鏈模式繼承又把私有屬性和公有屬性都繼承了一遍。

        


            


                


                    


                    

                

                


                    

                        function People(name, age) { //創(chuàng)建一個父級People類
                    

                

            

            


                


                    


                    

                

                


                    

                        name = name || 'xiaolan';
                    

                

            

            


                


                    


                    

                

                


                    

                        age = age || 18;
                    

                

            

            


                


                    


                    

                

                


                    

                        this.name = name;
                    

                

            

            


                


                    


                    

                

                


                    

                        this.age = age;
                    

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    

                        People.prototype.eat = function() {
                    

                

            

            


                


                    


                    

                

                


                    

                        console.log(this.name + '賊能吃');
                    

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    


                    

                

            

            


                


                    


                    

                

                


                    

                        function Cat(color, name, age) {
                    

                

            

            


                


                    


                    

                

                


                    

                        this.color = color;
                    

                

            

            


                


                    


                    

                

                


                    

                        People.call(this, name, age); //通過call的形式繼承
                    

                

            

            


                


                    


                    

                

                


                    

                        //通過call(this),將People的指向改為Cat的實例
                    

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    

                        var cat = new Cat('藍(lán)白色', '小叮當(dāng)', 1);
                    

                

            

            


                


                    


                    

                

                


                    

                        console.log(cat.name);//'小叮當(dāng)'
                    

                

            

            


                


                    


                    

                

                


                    

                        cat.eat();//報錯，
                    

                

            

            


                


                    


                    

                

                


                    

                        //繼承不了公有屬性，所以cat.eat()會報錯；
                    

                

            

        

為了繼承公有屬性，用原型鏈模式在把公有屬性和方法繼承過來，

        


            


                


                    


                    

                

                


                    

                        function People(name, age) { //創(chuàng)建一個父級People類
                    

                

            

            


                


                    


                    

                

                


                    

                        name = name || 'xiaolan';
                    

                

            

            


                


                    


                    

                

                


                    

                        age = age || 18;
                    

                

            

            


                


                    


                    

                

                


                    

                        this.name = name;
                    

                

            

            


                


                    


                    

                

                


                    

                        this.age = age;
                    

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    

                        People.prototype.eat = function() {
                    

                

            

            


                


                    


                    

                

                


                    

                        console.log(this.name + '賊能吃');
                    

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    


                    

                

            

            


                


                    


                    

                

                


                    

                        function Cat(color, name, age) {
                    

                

            

            


                


                    


                    

                

                


                    

                        this.color = color;
                    

                

            

            


                


                    


                    

                

                


                    

                        People.call(this, name, age); //通過call的形式繼承
                    

                

            

            


                


                    


                    

                

                


                    

                        //通過call(this),將People的指向改為Cat的實例
                    

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    

                        Cat.prototype = new People()
                    

                

            

            


                


                    


                    

                

                


                    

                        var cat = new Cat('藍(lán)白色', '小叮當(dāng)', 200)
                    

                

            

            


                


                    


                    

                

                


                    

                        console.log(cat)
                    

                

            

            


                


                    


                    

                

                


                    

                        console.log(cat.name); //'小叮當(dāng)'，在原型鏈繼承的時候，就近原則,cat.name 先找到'小叮當(dāng)'，就不往下找了
                    

                

            

            


                


                    


                    

                

                


                    

                        cat.eat(); //'小叮當(dāng)賊能吃'
                    

                

            

        

三、拷貝繼承

    優(yōu)點：可以多繼承，可傳參；

    缺點：浪費資源，不能判斷父級；

        


            


                


                    


                    

                

                


                    

                        function People(name, age) { //創(chuàng)建一個父級People類
                    

                

            

            


                


                    


                    

                

                


                    

                        name = name || 'xiaolan';
                    

                

            

            


                


                    


                    

                

                


                    

                        age = age || 18;
                    

                

            

            


                


                    


                    

                

                


                    

                        this.name = name;
                    

                

            

            


                


                    


                    

                

                


                    

                        this.age = age;
                    

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    

                        People.prototype.eat = function() {
                    

                

            

            


                


                    


                    

                

                


                    

                        console.log(this.name + '賊能吃');
                    

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    


                    

                

            

            


                


                    


                    

                

                


                    

                        function Cat(color, name, age) {
                    

                

            

            


                


                    


                    

                

                


                    

                        this.color = color;
                    

                

            

            


                


                    


                    

                

                


                    

                        var people = new People(name, age) //實例化一個People類
                    

                

            

            


                


                    


                    

                

                


                    

                        for (let i in people) {
                    

                

            

            


                


                    


                    

                

                


                    

                        this[i] = people[i]; //將people中的可枚舉屬性和方法遍歷并附給Cat類，公有屬性和私有屬性都是可枚舉屬性；
                    

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    

                        var cat = new Cat('藍(lán)白色', '小叮當(dāng)', 2);
                    

                

            

            


                


                    


                    

                

                


                    

                        console.log(cat.name); //小叮當(dāng)
                    

                

            

            


                


                    


                    

                

                


                    

                        cat.eat(); //小叮當(dāng)賊能吃
                    

                

            

        

四、寄生組合方式繼承

    優(yōu)點：私有屬性和公有屬性都單獨繼承，可以傳參；

    私有屬性可以多繼承，公有屬性不可多繼承；

        


            


                


                    


                    

                

                


                    

                        function People(name, age) {
                    

                

            

            


                


                    


                    

                

                


                    

                        name = name || 'xiaolan';
                    

                

            

            


                


                    


                    

                

                


                    

                        age = age || 18;
                    

                

            

            


                


                    


                    

                

                


                    

                        this.name = name;
                    

                

            

            


                


                    


                    

                

                


                    

                        this.age = age;
                    

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    

                        People.prototype.eat = function() {
                    

                

            

            


                


                    


                    

                

                


                    

                        console.log(this.name + '賊能吃');
                    

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    


                    

                

            

            


                


                    


                    

                

                


                    

                        function Cat(color, name, age) {
                    

                

            

            


                


                    


                    

                

                


                    

                        this.color = color;
                    

                

            

            


                


                    


                    

                

                


                    

                        People.call(this, name, age) //用call的形式把私有屬性繼承過來
                    

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    


                    

                

            

            


                


                    


                    

                

                


                    

                        function Fn() {} //創(chuàng)建一個中間構(gòu)造函數(shù)，用來接收People的公有屬性，為了防止創(chuàng)建實例Cat實例是影響原來的people構(gòu)造函數(shù)
                    

                

            

            


                


                    


                    

                

                


                    

                        Fn.prototype = People.prototype;
                    

                

            

            


                


                    


                    

                

                


                    

                        Cat.prototype = new Fn(); //將中間構(gòu)造函數(shù)Fn繼承people的公有屬性傳給Cat的原型鏈
                    

                

            

            


                


                    


                    

                

                


                    

                        Cat.prototype.constructor = Cat; //由于上一步重置了Cat原型鏈的constructor屬性，所以要重新給賦回來；
                    

                

            

            


                


                    


                    

                

                


                    

                        var cat = new Cat('藍(lán)白色', '小叮當(dāng)', 3);
                    

                

            

            


                


                    


                    

                

                


                    

                        console.log(cat.name); //'小叮當(dāng)'
                    

                

            

            


                


                    


                    

                

                


                    

                        cat.eat() //'小叮當(dāng)賊能吃
                    

                

            

        

注：若有不嚴(yán)謹(jǐn)與錯誤的地方，請多指教！

2. 
   

3. 
   

4. 
   

5. 
   

6. 
   

   

7. 
   

藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

Material Design（以下簡稱MD）是谷歌設(shè)計的一套視覺語言設(shè)計規(guī)范，主要應(yīng)用于安卓類應(yīng)用。

iOS Human Interface Guidelines（以下簡稱iOS）是蘋果公司針對 iOS設(shè)計的一套人機(jī)交互指南，目的是為了使運行在 iOS 上的應(yīng)用都能遵從一套特定的視覺以及交互特性，從而能夠在風(fēng)格上進(jìn)行統(tǒng)一。

相對來說，我們對于 iOS 的設(shè)計規(guī)范更加熟悉——因為考慮到成本，設(shè)計師進(jìn)行產(chǎn)品設(shè)計的時候只會出一套 iOS 的設(shè)計稿，然后去適配安卓機(jī)型。

很少會針對安卓機(jī)型再出一套 MD風(fēng)格的方案，這種現(xiàn)象雖然存在但是并不合理。不同的系統(tǒng)/平臺采用了不同的設(shè)計語言，不同的設(shè)計語言會培養(yǎng)出不同的操作習(xí)慣。

例如使用安卓手機(jī)的用戶平時見到的都是 MD風(fēng)格的界面，突然下了一個 iOS風(fēng)格的應(yīng)用，那么操作起來就會很不習(xí)慣，增加了學(xué)習(xí)成本。

為了讓產(chǎn)品可以適用不同平臺用戶的操作習(xí)慣，提供 MD 和 iOS 兩套設(shè)計稿是非常有必要的。當(dāng)然 MD 和 iOS 的差異不是一篇文章就能說清楚的，這里我就從陰影、導(dǎo)航和配色這三個方面來簡單分析一下 MD 和 iOS 的差異。

一、陰影

對于不太熟悉 MD 的設(shè)計師來說，MD 意味著大色塊+陰影。

為什么 MD 如此癡迷于陰影？

從它的名字就可以看出來——Material Design，這里的 material 指的是紙張；因為來源于現(xiàn)實生活，所以 MD 非常喜歡使用真實世界元素的物理規(guī)律與空間關(guān)系來表現(xiàn)組件之間的層級關(guān)系，而陰影就是最常見的表現(xiàn)形式：

同樣的賬戶注冊，安卓界面中按鈕帶有陰影而 iOS 界面中按鈕沒有陰影。

FAB（Floating Action Button），帶有陰影的浮動操作按鈕甚至成為了 MD 的一大招牌。相比較而言iOS更加扁平化。

二、導(dǎo)航體系

產(chǎn)品導(dǎo)航體系主要由菜單欄構(gòu)成，而根據(jù)位置以及交互方式可以分為頂部欄菜單、底部欄菜單和側(cè)邊欄菜單。iOS 的導(dǎo)航體系主要由底部欄菜單構(gòu)成，而 MD 大量使用了頂部欄菜單和側(cè)邊欄菜單。

下面我們來看幾個例子：

網(wǎng)易云音樂在 iOS 中采用的是底部欄菜單導(dǎo)航，而在安卓機(jī)型上導(dǎo)航欄被移到界面頂部，「賬號」被收到側(cè)邊欄中。

b站在 iOS 中有底部欄菜單有5個標(biāo)簽，而在安卓機(jī)型中只有4個標(biāo)簽，「我的」同樣被側(cè)邊欄收起來。

推特在 iOS 中使用的底部欄菜單導(dǎo)航，在安卓機(jī)型中導(dǎo)航欄被移到了頂部。

而 Apple Music 做的更徹底，在安卓機(jī)型上直接舍棄了底部菜單欄，采用了側(cè)邊欄作為主導(dǎo)航模式。

我們發(fā)現(xiàn)前兩款國產(chǎn)應(yīng)用在安卓機(jī)型上都保留了底部欄菜單，而后兩款國外應(yīng)用直接砍掉底部欄菜單。不只是 Apple music 和推特，很多國外的安卓類應(yīng)用都沒有使用底部欄菜單。而國內(nèi)的應(yīng)用因為考慮到 iOS，即使 MD 化也是閹割版的，屬于 iOS 和 MD 的混血兒。甚至很多安卓應(yīng)用在設(shè)計風(fēng)格上往 iOS 靠攏，以b站為例，其5.11之前的安卓版本中都是沒有底部欄菜單的。

當(dāng)然這里并不是去評價 MD 和 iOS 哪個導(dǎo)航體系更好用，我說下自己的觀點：

底部欄菜單的使用非常方便用戶在單手握持情況下的操作，但是對于大屏手機(jī)來說，單手操作會顯得很吃力。如果用戶改由雙手握持手機(jī)，那么從易用性上來說底部欄菜單沒有任何優(yōu)勢。

MD 的方案更加注重對界面空間的利用，側(cè)邊欄菜單就不說了。以底部欄菜單為例，在安卓機(jī)型中用戶滑動的時候底部欄菜單會隱藏，方便的用戶可以看下知乎，安卓版的底部欄用戶滑動的時候會隱藏，而 iOS 則是固定不動的。

側(cè)邊欄的優(yōu)勢還體現(xiàn)在可以提供更多的標(biāo)簽，底部欄菜單最多可以放5個。但是側(cè)邊欄菜單需要用戶點擊才能調(diào)出來，比較隱蔽，而底部欄和頂部欄相對來說就會顯得一目了然，總之各有千秋。

至于為什么 MD 會拋棄底部欄菜單，我個人的理解是設(shè)備原因。因為安卓機(jī)型底部有三個物理按鍵，如果采用底部欄菜單作為主導(dǎo)航模式，容易造成用戶誤點擊。

類似的還有 web 類應(yīng)用，因為瀏覽器的控件欄也在底部，所以如果采用了底部欄菜單同樣會造成用戶的誤操作。

三、配色

MD 提倡使用高飽和度的對比色來提升產(chǎn)品的視覺表現(xiàn)力，也就是我在上面提到的大色塊。同樣的一個功能，從底部欄背景色、插畫到按鈕，我們可以發(fā)現(xiàn) iOS 在色彩的使用上比較克制。

知乎之前的安卓版本使用了大面積的藍(lán)色，后來改成跟 iOS 一樣的白色。這樣的調(diào)整褒貶不一，有的用戶反饋這完全照搬了 iOS，要改回 MD。

產(chǎn)品界面設(shè)計中對比效果主要由配色、尺寸、間距和陰影來完成。MD 在配色和陰影上做的比較出彩，所以 MD風(fēng)格的產(chǎn)品在視覺表現(xiàn)上更有沖擊力。而 iOS 則顯得比較小清新，追求扁平和簡潔。所以我們無法去評判這兩款設(shè)計規(guī)范的孰好孰壞，因為其各自的出發(fā)點就是不一樣的。

當(dāng)然前面也提到了 MD 和 iOS 的差異不僅僅體現(xiàn)在以上說的這三點，還有一些小細(xì)節(jié)也非常值得我們思考。我們都知道在 iOS系統(tǒng)中，用戶向右滑動的時候會返回上一級頁面。因為蘋果手機(jī)沒有物理返回按鍵，所以這種機(jī)制非常受歡迎，但是在一些特定場景的時候就會有問題。例如如果我想復(fù)制微博里的「一曲肝腸斷，天涯何處覓知音」，選中光標(biāo)從左向右滑動，這時就會返回上一級頁面，特別不方便。所以我只能從右向左進(jìn)行復(fù)制，我后來試了一下微信和 QQ，發(fā)現(xiàn)默認(rèn)復(fù)制的是整條動態(tài)，這也算是一個折衷的方案。

總結(jié)

這篇文章并不是去評判 iOS 和 MD 兩種設(shè)計風(fēng)格孰好孰壞，也不是讓我們現(xiàn)在就去為自己的產(chǎn)品做出兩套設(shè)計稿，這個目前來說也不太現(xiàn)實。很多國民類應(yīng)用都只采用了一套設(shè)計稿，大家都這么做，整個大環(huán)境就是這樣。

但是還是那句話：存在不一定合理。出兩套設(shè)計稿雖然現(xiàn)在看起來不現(xiàn)實，但是我們也要做好準(zhǔn)備，要有危機(jī)感。

藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

黃金分割大家應(yīng)該早有耳聞，作為一名設(shè)計師，怎么來利用黃金分割線使其構(gòu)圖更加完美呢？

說實話，構(gòu)圖時是否使用黃金分割線構(gòu)圖并不是絕對的，它只是方法之一。但是黃金分割比例在全世界乃至全宇宙確實都是至高無上的。

當(dāng)我們在網(wǎng)上購物，提交我們個人信息都需要用到按鈕。網(wǎng)頁UI設(shè)計的增長很快，風(fēng)格似乎也是一個月一變。最近幾年，我們經(jīng)歷過從文 本鏈接到擬物化設(shè)計再到扁平化瀑布流設(shè)計。導(dǎo)航是網(wǎng)頁設(shè)計中最重要的元素，并且按鈕是最重要的行為工具。

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

問題總結(jié)  https://github.com/vuejs-templates/webpack/issues/260

1. 首先npm install --save babel-polyfill

2. 然后在main.js中的最前面引入babel-polyfill

   import 'babel-polyfill'

3. 在index.html 加入以下代碼（非必須）

   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

4. 在config中的webpack.base.conf.js中,修改編譯配置

    


        


            


                


                

            

            


                

                    entry:{
                

            

        

        


            


                


                

            

            


                

                    app:['babel-polyfill','./src/main.js'] 
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

    

• 
  

當(dāng)然，如果你只用到了 axios 對 promise進(jìn)行兼容，可以只用 es6-promise

npm install es6-promise --save

• 
  

在 main.js 中的最前面 引入

import 'es6-promise/auto' 

• 以上配置，ie9兼容就完成了

那么，就有一個問題了，build之后的dist文件只有放在服務(wù)器上才能查看，但本地如何查看呢，參考一下配置

1. 修改config文件夾中的index.js文件,將build對象中的打包路徑，'/‘改為'./'，由絕對路徑改為相對路徑,建議將sourceMap改為false,編譯的時候會快一點

   build: { assetsPublicPath: './', productionSourceMap: false, },

2. 修改完之后，重新 npm run build ，得到新的dist文件夾

3. 然后進(jìn)入dist文件夾

   cd dist

4. 全局安裝簡易node服務(wù)器

   npm install http-server -g

5. 啟動簡易node服務(wù)器

   http-server

6. 出現(xiàn)如下圖所示，就代表你的服務(wù)器啟動成功了，那你也能在5000端口查看編譯打包后的項目了，可以在ie瀏覽器中直接測試了

   

7. IE在處理日期的時候，不支持-支持/的日期方式 如 2017-01-01應(yīng)該 

藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)