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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

UI設計師如何有效的跨團隊、多角色溝通？

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

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

背景

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

索引

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

心理建設

有效溝通的兩點認識

為“傳”而“達”

溝通是信息的有效傳達?！皞鳌笔鞘侄危鬁贤〞r需闡明觀點；“達”是目的，指明溝通旨在使人通達理解。溝通中出現的自說自話、固執己見，通常是偏執于“傳”，而忽視了“達”。需要明確的是，所有的溝通，都應該以接收方更好的理解接受為目的，而不是自顧自的滔滔不絕。

減少損耗

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

跨團隊多角色溝通的基本態度

跨團隊——秉持中立合作的態度

• 中立——團隊不同，訴求不同，秉持中立的溝通態度，不要因個人偏向導致無意義消耗。

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

• 產品目標導向——對有爭議的問題點，應綜合權衡用戶體驗、產品目標和開發成本，以產品目標為第一要義。

多角色——認清各方關注點的差異

• 理解各方差異化的核心訴求——對不同團隊角色的溝通中應有不同的側重點，靈活的轉換角色，做有針對性的輸出表達。

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

角色分析

項目組成員角色模型

項目伊始，在融入團隊的過程中，應注意理清項目組內的不同角色，明確匯報對象，做好任務分工，理清利益關系，協調各方訴求。

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

各角色核心訴求及溝通側重點模型

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

各角色核心訴求及溝通側重點小結

流程搭建

有效溝通流程模型

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

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

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

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

執行階段——抓大放小、促成共識

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

• 促成共識。無結果的溝通是無效的溝通，有效溝通應促使各方達成共識。無論是待協調、暫擱置還是需改進，都需要有一個結論明確、責任人明確、截止時間明確的溝通結論，并依此執行跟進。

跟進階段——同步落實，自我反思

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

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

工具沉淀

開發故事卡

說明：明確易讀的設計說明文檔

功能：產品設計說明、開發指導手冊、階段性交付走查依據

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

使用要點：

• 根據信息構架拆分產品模塊，分別設立索引，提供產品概覽，串聯各功能詳情頁。

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

• 按照功能點拆分詳情頁，提出功能需求，明確驗收標準，說明頁面細節。

• 各頁面統一編號與視覺源文件一一對應，方便快速查找。

需求管理文檔

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

功能：需求變動及問題反饋的管理模板、開發發跟進的溝通文檔

使用場景：開發跟進階段，實時記錄變動的需求及反饋的問題點；設計側定期反饋給開發人員的規范化輸出文檔。

使用要點：

• 明確問題及目標效果，排定優先級依此解決。

• 明確負責人和時間節點，保證落實。

• 做好文檔更新維護及信息同步。

• 按階段統一反饋調整，節約開發時間。

關注點推進模型

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

功能：輔助聚焦當下關注點，避免陷入不合時宜的細節或宏觀問題

使用場景：從宏觀到微觀的產品設計過程中，幫助梳理各個階段需溝通的核心問題，溝通時陷入細節或反復爭論時的自查工具。

使用要點：

• 做好關注點的的逐步推進：探討信息構架時就不要在交互樣式上反復拉鋸；討論交互方式時就不要過度關注視覺細節。

• 不過早陷入細節。優秀產品的細節固然需打磨，但從0到1實現一款產品的過程中，將有限的資源和排期消耗在不合時宜的細節權衡上，得不償失。

• 同樣，若因執行時的設計挑戰需調整產品上層，也需主題限定問題范圍，不要因宏觀問題上的反復而影響執行效率。

優先級評估模型

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

功能：借助KANO模型分析思路，對需求優先級提供排定依據

使用場景：設計階段樣式取舍、開發跟進階段需求調整的先后順序、應對分歧如何抓大放小，都可以借助優先級評估模型輔助評估。

使用要點：

• 不同項目階段，不同溝通對象對同一需求優先級的評定標準不同，因此應注意根據項目階段和溝通對象靈活調整。

• 不同產品在用戶體驗與產品目標取舍上有所區別。一般而言，2C產品更注重用戶體驗，而2B產品則可能更注重實現產品目標，因此應注意具體產品具體分析。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

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

首先，就積分而言，是用戶通過完成某些任務或手段來進行對應積分點的獲取，再通過相關的手段進行消耗的一個過程。

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

下面針對兩點分開來說：

一、獲?。ㄖ饕谦@取的方式和對應的規則）

獲取方式，大類可根據用戶完成對應任務類型分為：

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

• 綁定手機；
• 綁定郵箱；
• 上傳頭像；
• 首次消費/發文/分享等等對應產品核心功能的首次使用；
• 完善個人信息。

根據產品核心功能和側重點的不同而不同，一定要區別哪些信息內容是我們想從用戶處獲取的核心，哪一些并不是很重要。不要人云亦云，不要有“別的產品有了所以我也要有”的思想，思考一下為什么你要需要這個任務。可以多參照其他積分體系完善的對它們進行整理歸類，之后結合自身產品特性再去做自己的。

2. 日常任務類

• 簽到（這幾乎是最基礎最常見的）；
• 對應產品核心功能的使用相關的任務。

3. 運營活動類

• 節日相關類；
• 產品特定日期相關類（周年等等）。

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

4. 特定激勵用戶類

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

5. 均衡刺激積分的流通

這類主要放在消耗中講，主要是抽獎類把積分當作一類獎品進行兌換。

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

二、消耗

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

1. 兌換商品

• 虛擬商品；
• 現實商品。

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

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

2. 抽獎

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

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

三、注意點

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

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

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

（3）做好相關數據的管理實時反饋，用戶的領取積分數據，消耗積分數據等等，細節數據需要自己去扣清楚都是有價值的數據。后臺相關頁面設計到位，及時將數據反饋給相關人員進行溝通。

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

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

（6）積分的規則一定要完善沒有漏洞，不論是給出的任務還是消耗的過程一定不要有歧義，一定要仔細?。。。。。∵@點很重要?。。?！

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

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

本文由 @judyyyy 原創發布于人人都是產品經理。未經許可，禁止轉載

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

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

當你在尋找一個能夠滿足你需求的應用的時候，會不會因為太多相似的產品而無從選擇？當你想要在兩個甚至更多相似的產品中進行選擇，一切都顯得那么困難。而唯一能夠進行快速區分的因素似乎是設計，但是緊接著會發現連設計都是那么相似。

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

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

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

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

產品開發流行?。禾卣髀?

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

現如今，絕大多數的產品，無論是物理實體還是存在于手機中的各色 APP，幾乎全都面對著激烈的競爭。

激烈的競爭使得每個人都面臨著壓力，產品所屬的企業中，從領導到產品經理再到最底層的開發者和設計師，所有人都面對著來自對手和潛在對手的壓力。

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

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

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

沒有什么 Bug 是一個補丁解決不了的，如果不行，多打幾個。——Windows開發團隊

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

對于特征蔓延這種病癥，早在1976年就已經被發現，并且在產品設計圈當中有著非常廣泛的認知。對于這種產品病有一個非常學術的描述：

特征蔓延是指一產品（如APP）的軟件機能持續膨脹或增加的情形。產品基本機能以外的擴充機能，會使產品比原始設計要更復雜。長時間來看，額外或不需要的機能慢慢的進入系統中，使系統超出原來設定的目標。

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

非常不幸的是，產品上市之后，各種各樣的影響因素開始出現，情況開始向著并不理想的方向發展。

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

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

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

競爭驅動式設計的泥潭

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

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

這種就是競爭驅動型設計。令人遺憾的是，即使產品的第一版是以用戶為中心設計出來的優質產品，在競爭驅動下誕生的后續產品，就很難贏得用戶的真心了。

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

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

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

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

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

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

為什么總忍不住添加新的功能？

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

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

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

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

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

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

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

One more thing

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

競爭驅動型的設計確實是一個很難繞過的問題，驅動產品的不僅僅是領導和客戶的聲音，深陷市場競爭，許多時候確實身不由己。

采用以用戶為中心的設計的設計流程，還繞不開一個常見的因素：最佳實踐。經過前人驗證、時間打磨、用戶習慣之后所獲得的最佳實踐，是設計師和產品在很多時候必須依托的東西。比如我們如今所看到的許多表單的設計策略和漢堡菜單的使用。用戶和市場已經「塑造」出了許多最優的設計策略，設計師通常會直接拿來使用，而我們感到「千人一面」的 UI設計當中，確實有各種最佳實踐所「作出的貢獻」。

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

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

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

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

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

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

設計和內容的結合方式多種多樣，根據內容所需要的語境來搭配相應的設計是目前已知的最常見的做法。根據內容本身所具備的故事性和環境特征，視覺化地表達，讓 UI 和視覺服務于內容，是許多成功的設計所驗證過的技巧。

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

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

原文作者 : Eugen E?anu

譯者/編輯 : 陳子木

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

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

     js中構造函數的幾種繼承模式淺析

一、原型鏈模式繼承

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

    用的最多。

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

        


            


                


                    


                    

                

                


                    

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

                

            

            


                


                    


                    

                

                


                    

                        name = name || 'xiaolan';
                    

                

            

            


                


                    


                    

                

                


                    

                        age = age || 18;
                    

                

            

            


                


                    


                    

                

                


                    

                        this.name = name;
                    

                

            

            


                


                    


                    

                

                


                    

                        this.age = age;
                    

                

            

            


                


                    


                    

                

                


                    

                        }//創建一個名為People的類
                    

                

            

            


                


                    


                    

                

                


                    

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

                

            

            


                


                    


                    

                

                


                    

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

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    

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

                

            

            


                


                    


                    

                

                


                    

                        this.color = color;
                    

                

            

            


                


                    


                    

                

                


                    

                        }
                    

                

            

            


                


                    


                    

                

                


                    

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

                

            

            


                


                    


                    

                

                


                    

                        var cat = new Cat('藍白色')
                    

                

            

            


                


                    


                    

                

                


                    

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

                

            

            


                


                    


                    

                

                


                    

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

                

            

        

二、混合模式繼承

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

        


            


                


                    


                    

                

                


                    

                        function People(name, age) { //創建一個父級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('藍白色', '小叮當', 1);
                    

                

            

            


                


                    


                    

                

                


                    

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

                

            

            


                


                    


                    

                

                


                    

                        cat.eat();//報錯，
                    

                

            

            


                


                    


                    

                

                


                    

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

                

            

        

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

        


            


                


                    


                    

                

                


                    

                        function People(name, age) { //創建一個父級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('藍白色', '小叮當', 200)
                    

                

            

            


                


                    


                    

                

                


                    

                        console.log(cat)
                    

                

            

            


                


                    


                    

                

                


                    

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

                

            

            


                


                    


                    

                

                


                    

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

                

            

        

三、拷貝繼承

    優點：可以多繼承，可傳參；

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

        


            


                


                    


                    

                

                


                    

                        function People(name, age) { //創建一個父級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('藍白色', '小叮當', 2);
                    

                

            

            


                


                    


                    

                

                


                    

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

                

            

            


                


                    


                    

                

                


                    

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

                

            

        

四、寄生組合方式繼承

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

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

        


            


                


                    


                    

                

                


                    

                        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() {} //創建一個中間構造函數，用來接收People的公有屬性，為了防止創建實例Cat實例是影響原來的people構造函數
                    

                

            

            


                


                    


                    

                

                


                    

                        Fn.prototype = People.prototype;
                    

                

            

            


                


                    


                    

                

                


                    

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

                

            

            


                


                    


                    

                

                


                    

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

                

            

            


                


                    


                    

                

                


                    

                        var cat = new Cat('藍白色', '小叮當', 3);
                    

                

            

            


                


                    


                    

                

                


                    

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

                

            

            


                


                    


                    

                

                


                    

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

                

            

        

注：若有不嚴謹與錯誤的地方，請多指教！

2. 
   

3. 
   

4. 
   

5. 
   

6. 
   

   

7. 
   

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

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

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

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

很少會針對安卓機型再出一套 MD風格的方案，這種現象雖然存在但是并不合理。不同的系統/平臺采用了不同的設計語言，不同的設計語言會培養出不同的操作習慣。

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

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

一、陰影

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

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

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

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

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

二、導航體系

產品導航體系主要由菜單欄構成，而根據位置以及交互方式可以分為頂部欄菜單、底部欄菜單和側邊欄菜單。iOS 的導航體系主要由底部欄菜單構成，而 MD 大量使用了頂部欄菜單和側邊欄菜單。

下面我們來看幾個例子：

網易云音樂在 iOS 中采用的是底部欄菜單導航，而在安卓機型上導航欄被移到界面頂部，「賬號」被收到側邊欄中。

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

推特在 iOS 中使用的底部欄菜單導航，在安卓機型中導航欄被移到了頂部。

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

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

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

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

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

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

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

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

三、配色

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

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

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

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

總結

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

但是還是那句話：存在不一定合理。出兩套設計稿雖然現在看起來不現實，但是我們也要做好準備，要有危機感。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

黃金分割大家應該早有耳聞，作為一名設計師，怎么來利用黃金分割線使其構圖更加完美呢？

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

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

問題總結  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'] 
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

    

• 
  

當然，如果你只用到了 axios 對 promise進行兼容，可以只用 es6-promise

npm install es6-promise --save

• 
  

在 main.js 中的最前面 引入

import 'es6-promise/auto' 

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

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

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

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

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

3. 然后進入dist文件夾

   cd dist

4. 全局安裝簡易node服務器

   npm install http-server -g

5. 啟動簡易node服務器

   http-server

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

   

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

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務