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

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

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

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

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

背景

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

索引

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

心理建設(shè)

有效溝通的兩點(diǎn)認(rèn)識(shí)

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

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

減少損耗

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

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

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

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

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

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

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

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

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

角色分析

項(xiàng)目組成員角色模型

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

（具體項(xiàng)目組角色模型可能涉密，略）

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

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

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

流程搭建

有效溝通流程模型

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

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

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

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

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

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

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

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

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

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

工具沉淀

開(kāi)發(fā)故事卡

說(shuō)明：明確易讀的設(shè)計(jì)說(shuō)明文檔

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

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

使用要點(diǎn)：

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

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

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

• 各頁(yè)面統(tǒng)一編號(hào)與視覺(jué)源文件一一對(duì)應(yīng)，方便快速查找。

需求管理文檔

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

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

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

使用要點(diǎn)：

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

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

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

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

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

說(shuō)明：不同項(xiàng)目階段明確核心關(guān)注點(diǎn)的虛擬模型

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

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

使用要點(diǎn)：

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

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

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

優(yōu)先級(jí)評(píng)估模型

說(shuō)明：不同項(xiàng)目階段評(píng)估需求優(yōu)先級(jí)的KANO衍生模型

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

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

使用要點(diǎn)：

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

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

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

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

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

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

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

下面針對(duì)兩點(diǎn)分開(kāi)來(lái)說(shuō)：

一、獲?。ㄖ饕谦@取的方式和對(duì)應(yīng)的規(guī)則）

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

1. 新手任務(wù)類(lèi)（這是一個(gè)幫助用戶(hù)熟悉產(chǎn)品同時(shí)激勵(lì)用戶(hù)使用產(chǎn)品的過(guò)程）

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

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

2. 日常任務(wù)類(lèi)

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

3. 運(yùn)營(yíng)活動(dòng)類(lèi)

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

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

4. 特定激勵(lì)用戶(hù)類(lèi)

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

5. 均衡刺激積分的流通

這類(lèi)主要放在消耗中講，主要是抽獎(jiǎng)?lì)惏逊e分當(dāng)作一類(lèi)獎(jiǎng)品進(jìn)行兌換。

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

二、消耗

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

1. 兌換商品

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

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

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

2. 抽獎(jiǎng)

抽獎(jiǎng)是最好的進(jìn)行積分流動(dòng)的手段，如果用戶(hù)只是一味的累積積分，無(wú)論是產(chǎn)品所提供的虛擬商品，還是現(xiàn)實(shí)商品都不和他心意提供另一個(gè)出口給用戶(hù)。或者前兩者門(mén)檻過(guò)高或需要現(xiàn)實(shí)貨幣，用戶(hù)不愿花費(fèi)，抽獎(jiǎng)都是一種低花費(fèi)積分小概率抽中商品，利于積分生態(tài)的流動(dòng)的措施。

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

三、注意點(diǎn)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

產(chǎn)品開(kāi)發(fā)流行?。禾卣髀?

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

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

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

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

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

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

沒(méi)有什么 Bug 是一個(gè)補(bǔ)丁解決不了的，如果不行，多打幾個(gè)?！猈indows開(kāi)發(fā)團(tuán)隊(duì)

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

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

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

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

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

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

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

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

競(jìng)爭(zhēng)驅(qū)動(dòng)式設(shè)計(jì)的泥潭

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

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

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

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

我們都聽(tīng)說(shuō)過(guò)先發(fā)優(yōu)勢(shì)，但是你真的知道獲得先發(fā)優(yōu)勢(shì)，將會(huì)付出什么樣的代價(jià)么？

用1年寫(xiě)一冊(cè)暢銷(xiāo)書(shū)，還是花5年成就一本經(jīng)典？

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

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

從長(zhǎng)遠(yuǎn)來(lái)看，只看眼前、偷工減料的公司會(huì)自然而然過(guò)時(shí)，然后被人們所忘記。浪潮過(guò)后，誰(shuí)在裸泳一目了然。

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

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

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

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

是聚焦長(zhǎng)處，還是忙于跟隨？

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

成就最好的產(chǎn)品，設(shè)計(jì)者要屏蔽來(lái)自競(jìng)爭(zhēng)對(duì)手的聲音，專(zhuān)注于用戶(hù)真實(shí)的深層需求。

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

One more thing

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

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

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

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

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

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

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

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

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

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

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

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

原文作者 : Eugen E?anu

譯者/編輯 : 陳子木

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

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

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

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

一、原型鏈模式繼承

    利用原型讓一個(gè)引用類(lèi)型繼承另一個(gè)引用類(lèi)型的屬性和方法 。

    用的最多。

    缺點(diǎn)：不可傳參，不可多繼承。

        


            


                


                    


                    

                

                


                    

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

                

            

            


                


                    


                    

                

                


                    

                        name = name || 'xiaolan';
                    

                

            

            


                


                    


                    

                

                


                    

                        age = age || 18;
                    

                

            

            


                


                    


                    

                

                


                    

                        this.name = name;
                    

                

            

            


                


                    


                    

                

                


                    

                        this.age = age;
                    

                

            

            


                


                    


                    

                

                


                    

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

                

            

            


                


                    


                    

                

                


                    

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

                

            

            


                


                    


                    

                

                


                    

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

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    

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

                

            

            


                


                    


                    

                

                


                    

                        this.color = color;
                    

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    

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

                

            

            


                


                    


                    

                

                


                    

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

                

            

            


                


                    


                    

                

                


                    

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

                

            

            


                


                    


                    

                

                


                    

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

                

            

        

二、混合模式繼承

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

        


            


                


                    


                    

                

                


                    

                        function People(name, age) { //創(chuàng)建一個(gè)父級(jí)People類(lèi)
                    

                

            

            


                


                    


                    

                

                


                    

                        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); //通過(guò)call的形式繼承
                    

                

            

            


                


                    


                    

                

                


                    

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

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    

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

                

            

            


                


                    


                    

                

                


                    

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

                

            

            


                


                    


                    

                

                


                    

                        cat.eat();//報(bào)錯(cuò)，
                    

                

            

            


                


                    


                    

                

                


                    

                        //繼承不了公有屬性，所以cat.eat()會(huì)報(bào)錯(cuò)；
                    

                

            

        

為了繼承公有屬性，用原型鏈模式在把公有屬性和方法繼承過(guò)來(lái)，

        


            


                


                    


                    

                

                


                    

                        function People(name, age) { //創(chuàng)建一個(gè)父級(jí)People類(lèi)
                    

                

            

            


                


                    


                    

                

                


                    

                        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); //通過(guò)call的形式繼承
                    

                

            

            


                


                    


                    

                

                


                    

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

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    

                        Cat.prototype = new People()
                    

                

            

            


                


                    


                    

                

                


                    

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

                

            

            


                


                    


                    

                

                


                    

                        console.log(cat)
                    

                

            

            


                


                    


                    

                

                


                    

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

                

            

            


                


                    


                    

                

                


                    

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

                

            

        

三、拷貝繼承

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

    缺點(diǎn)：浪費(fèi)資源，不能判斷父級(jí)；

        


            


                


                    


                    

                

                


                    

                        function People(name, age) { //創(chuàng)建一個(gè)父級(jí)People類(lèi)
                    

                

            

            


                


                    


                    

                

                


                    

                        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) //實(shí)例化一個(gè)People類(lèi)
                    

                

            

            


                


                    


                    

                

                


                    

                        for (let i in people) {
                    

                

            

            


                


                    


                    

                

                


                    

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

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    

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

                

            

            


                


                    


                    

                

                


                    

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

                

            

            


                


                    


                    

                

                


                    

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

                

            

        

四、寄生組合方式繼承

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

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

        


            


                


                    


                    

                

                


                    

                        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的形式把私有屬性繼承過(guò)來(lái)
                    

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    


                    

                

            

            


                


                    


                    

                

                


                    

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

                

            

            


                


                    


                    

                

                


                    

                        Fn.prototype = People.prototype;
                    

                

            

            


                


                    


                    

                

                


                    

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

                

            

            


                


                    


                    

                

                


                    

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

                

            

            


                


                    


                    

                

                


                    

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

                

            

            


                


                    


                    

                

                


                    

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

                

            

            


                


                    


                    

                

                


                    

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

                

            

        

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

2. 
   

3. 
   

4. 
   

5. 
   

6. 
   

   

7. 
   

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

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

Material Design（以下簡(jiǎn)稱(chēng)MD）是谷歌設(shè)計(jì)的一套視覺(jué)語(yǔ)言設(shè)計(jì)規(guī)范，主要應(yīng)用于安卓類(lèi)應(yīng)用。

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

相對(duì)來(lái)說(shuō)，我們對(duì)于 iOS 的設(shè)計(jì)規(guī)范更加熟悉——因?yàn)榭紤]到成本，設(shè)計(jì)師進(jìn)行產(chǎn)品設(shè)計(jì)的時(shí)候只會(huì)出一套 iOS 的設(shè)計(jì)稿，然后去適配安卓機(jī)型。

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

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

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

一、陰影

對(duì)于不太熟悉 MD 的設(shè)計(jì)師來(lái)說(shuō)，MD 意味著大色塊+陰影。

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

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

同樣的賬戶(hù)注冊(cè)，安卓界面中按鈕帶有陰影而 iOS 界面中按鈕沒(méi)有陰影。

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

二、導(dǎo)航體系

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

下面我們來(lái)看幾個(gè)例子：

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

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

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

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

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

當(dāng)然這里并不是去評(píng)價(jià) MD 和 iOS 哪個(gè)導(dǎo)航體系更好用，我說(shuō)下自己的觀點(diǎn)：

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

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

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

至于為什么 MD 會(huì)拋棄底部欄菜單，我個(gè)人的理解是設(shè)備原因。因?yàn)榘沧繖C(jī)型底部有三個(gè)物理按鍵，如果采用底部欄菜單作為主導(dǎo)航模式，容易造成用戶(hù)誤點(diǎn)擊。

類(lèi)似的還有 web 類(lèi)應(yīng)用，因?yàn)闉g覽器的控件欄也在底部，所以如果采用了底部欄菜單同樣會(huì)造成用戶(hù)的誤操作。

三、配色

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

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

產(chǎn)品界面設(shè)計(jì)中對(duì)比效果主要由配色、尺寸、間距和陰影來(lái)完成。MD 在配色和陰影上做的比較出彩，所以 MD風(fēng)格的產(chǎn)品在視覺(jué)表現(xiàn)上更有沖擊力。而 iOS 則顯得比較小清新，追求扁平和簡(jiǎn)潔。所以我們無(wú)法去評(píng)判這兩款設(shè)計(jì)規(guī)范的孰好孰壞，因?yàn)槠涓髯缘某霭l(fā)點(diǎn)就是不一樣的。

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

總結(jié)

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

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

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

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

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

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

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

問(wèn)題總結(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 對(duì) promise進(jìn)行兼容，可以只用 es6-promise

npm install es6-promise --save

• 
  

在 main.js 中的最前面 引入

import 'es6-promise/auto' 

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

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

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

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

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

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

   cd dist

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

   npm install http-server -g

5. 啟動(dòng)簡(jiǎn)易node服務(wù)器

   http-server

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

   

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

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