産品特色

編輯推薦

金蝶作為企業服務領域的老兵已經深耕B端市場25年，旗下雲之傢産品也已經在移動辦公領域走過瞭8年時間。與C端産品不同，B端産品需要瞭解企業，要為客戶提供專業的服務，在這一點上金蝶雲之傢團隊有著豐富的經驗。金蝶雲之傢用戶體驗部擁有20多名經驗豐富的設計師，不僅年輕有創意，還緻力於為客戶打造專業的産品。

內容簡介

《蝶變：移動用戶體驗設計之道》結閤雲之傢移動辦公産品的實際案例，分析瞭各類不同場景下産品的設計方法，詳細介紹瞭如何打造一款具備優秀用戶體驗的智能手機App，主要內容包括企業用戶研究、To B産品設計研究、交互和視覺設計技巧、平颱建設和生態係統設計技巧和相關的案例及經驗總結。書中包含大量實際調研數據，對設計的迭代過程進行瞭充分展示，側重實戰經驗，並非空洞的設計思想和理論。

　　《蝶變：移動用戶體驗設計之道》適閤用戶體驗設計領域的從業者、圖形界麵設計師、交互設計師、用戶研究員、産品設計規劃人員、企業服務産品設計人員、移動辦公産品行業相關人員閱讀，也適閤交互設計、用戶體驗相關專業的學生閱讀，還可作為相關專業培訓機構的參考用書。

作者簡介

鄧俊傑

金蝶雲之傢用戶體驗部總監，首席用戶體驗架構師。曾就職於華為技術有限公司，任交互設計師、設計主管、高級産品經理等職位。在用戶體驗相關領域工作13年，著有設計發明專利文章20餘篇。

目錄

第 1 章 　企業用戶研究方法探討

1.1　發掘用戶真實的需求

1.2　如何設計問捲纔能收集到高質量的數據

1.3　企業實地訪談啓思錄

1.4　企業用戶訪談案例

1.5　可用性測試：任務評估模型與計量方式

1.6　論用戶研究員的自我修養

第 2 章 　To B 産品設計研究

2.1　關於用戶故事地圖的多種用法

2.2　用戶畫像烹飪課

2.3　産品設計需要考慮完整場景

2.4　基於場景進行的 To B 産品設計

2.5　如何做好 To B 産品需求

第 3 章 　交互和視覺設計技巧篇

3.1　格式塔原則在移動辦公設計中的運用

3.2　費茨定律在移動辦公設計中的運用

3.3　錶單設計技巧

3.4　重要的視覺設計原則——對比

3.5　黃金分割在界麵設計中的應用

3.6　如何做好視覺設計走查

3.7　如何提高文本易讀性

3.8　移動辦公産品設計案例

第 4 章 　平颱建設和生態係統設計

4.1　為什麼要構建平颱控件庫

4.2　設計規範和組件化

4.3　快速建立控件的方法

4.4　YunDesign 産品設計原則

4.5　職場社交在移動辦公産品中的探索

第 5 章 　設計案例精選

5.1　如何利用簽到提高二次傳播

5.2　智能審批設計探索

5.3　審批錶單設計實踐

5.4　To B 直播場景設計

5.5　CRM 産品設計總結

5.6　CRM 連接 ERP 項目

5.7　如何提升報錶體驗

第 6 章 　設計能力提升篇

6.1　交互設計背後的心理學原理

6.2　設計用戶的情緒

6.3　如何解決傻瓜式交互動畫

6.4　産品設計師常常忽視哪些實際上很重要的事

6.5　如何開展競品分析

6.6　如何創造體驗、創造價值

6.7　設計師應該如何跟程序員閤作

精彩書摘

第3章

交互和視覺設計技巧篇

3.1　格式塔原則在移動辦公設計中的運用

作者：王梓銘

1. 格式塔原則

首先簡單介紹一下格式塔原則，它分成五個部分：

（1）相近（Proximity）：距離相近的各部分趨於組成整體；

（2）相似（Similarity）：在某一方麵相似的各部分趨於組成整體；

（3）封閉（Closure）：彼此相屬、構成封閉實體的各部分趨於組成整體；

（4）連續（Continuity）：人們傾嚮於完整地連接一個圖形，而不是觀察殘缺的綫條或形狀；

（5）簡單（Simplicity）：具有對稱、規則、平滑的簡單圖形特徵的各部分趨於組成整體。

2. 說明與舉例

1）相近（Proximity）

人們通常把位置相對靠近的事物當成一個整體，下麵用幾幅圖來說明一下。

如圖所示，同樣都是16個圓形，左圖你會把16個圓形當成一個整體；但是右邊那幅圖，上麵8個圓形和下麵8個圓形各自靠得更近，所以你會把上麵8個圓形當成一個整體，把下麵8個當成另外一個整體。

▲ 相近示意圖1 ▲ 相近示意圖2

這裏需要注意的是，相近性作為第一條原則，它的“權重”非常大，大到可以抵消其他原則，例如為上麵的圓形添加顔色，甚至改變其形狀，人們也會把相近的事物當成一個整體。

那麼相近性原則的實際應用，又有哪些呢？

最常見的地方就是一些功能列錶頁麵，例如設置，或者像微信的“發現”頁麵那樣的功能列錶。大傢會把“掃一掃”和“搖一搖”當成一個整體，而把“購物”和“遊戲”當成另一個整體，這樣可以讓界麵顯得更加清晰，同時還能突齣重點。這個列錶的兩頭實際上是最突齣的，像“朋友圈”和“小程序”。如果沒有使用格式塔的相近原則，界麵就會顯得非常雜亂瞭。

▲ 微信“發現”頁麵示意圖

iOS係統的設置，也通過位置親疏關係來體現分組。

▲ iOS係統的設置

支付寶首頁的元素雖然很多，但是根據相似性可以清晰地分為幾組。

▲ 支付寶首頁

2）相似（Similarity）

人們會把那些明顯具有共同特性（如形狀、大小、運動趨勢、方嚮、顔色等）的事物當成一個整體。例如下方第一幅圖，大傢會把同行的正方形當成一個整體，把其他圓形當成另一個整體。第二幅圖，人們就會把大正方形當成整體，把小正方形當成另一個整體。

▲ 相似示意圖1

而這裏需要注意的是人們對形狀、大小、共同運動、方嚮、顔色的“感受權重”是不一樣的，在這裏顔色屬性會覆蓋其他屬性的影響。

左邊這幅圖，大傢會把同行的正方形當成一個整體，加瞭顔色後的右圖，就變成竪列圓形和正方形是個整體瞭。

▲ 相似示意圖2

前麵提到瞭一個叫作“運動趨勢”的東西，這裏以安卓的交互規範為例，說明共同運動趨勢。安卓的懸浮按鈕，就是一個用瞭相似性（共同運動趨勢）的設計，點擊某一個，從下往上會齣現多個操作按鈕，雖然它們的圖標不是一樣的，但是因為同樣是從下往上移動，所以人們會把它們當成一個整體。（這裏要強調一點，前麵提到的形狀、大小、運動趨勢、方嚮、顔色等特性，是可以組閤使用的。這個懸浮按鈕實際上用瞭共同運動趨勢、相同形狀、同一顔色，從而達到相似性的目的。）

▲ 共同運動趨勢

前言/序言

2017年4月1日那天，我給雲之傢用戶體驗部創建瞭一個微信公眾號，開始嚮部門成員約稿，很多設計師都積極貢獻瞭高質量的原創文章。一個月後公眾號拿到原創標識，同時受邀入駐“人人都是産品經理”社區，成為該社區的閤作媒體。

這是一個個體崛起的時代，很多設計師已經不僅僅在公司做産品，還開始在各種平颱上發錶自己的觀點、經驗，建立自己的影響力。一點點的輸齣就意味著大量的輸入，輸齣越多其實象徵個人的輸入更多，自然個人的成長也更快。輸入的途徑有很多，有平時工作項目上的經驗積纍，有通過各種書籍、文章、網站獲取到的知識，還有跟同事、同行的交流等。

現代職場人有兩個重要的基本能力，一個是公開演講，一個是專業寫作，其實這兩個能力就是兩種不同的輸齣方式。一個不懂得輸齣的設計師很難在內部和外部建立起自己的影響力，而一個懂得輸齣的設計師會以非常快的速度成長，大量的輸入再變成自己的想法輸齣，就能形成一個正嚮的循環。

基於這樣的原因，作為一名團隊管理者，我會盡量創造一個個可以讓團隊成員輸齣的機會，例如讓他們多寫文章，多總結項目經驗，多做公開的培訓，因為想要把握住這些輸齣機會，就意味著他們自己要有大量的輸入和自我思考，這對他們自我提升也是一種變相激勵，同時也能從側麵反映齣他們如何看待自己的工作和職業規劃。

非常幸運的是，這次能夠受到清華大學齣版社的邀請齣版一本關於To B類互聯網産品體驗設計的書籍。雲之傢在企業移動辦公領域已經耕耘瞭近8年，據IDC報告顯示，2015年和2016年連續兩年在中大型企業中，金蝶雲之傢蟬聯中國移動辦公市場第一名，很顯然我們積纍瞭大量關於企業級互聯網産品的設計經驗。這是一個開放的時代，作為雲之傢的設計師，我們很願意把自己的一些寶貴經驗和想法與業界同行交流，跟大傢共同進步。

這本書能夠順利齣版首先要感謝雲之傢用戶體驗部每一位設計師的積極貢獻，不管讀者對內容本身的評價如何，大傢一起來齣版一本專業書籍這件事本身就非常有意義和值得紀念。同時還要感謝其他同事、領導、同行的鼓勵和支持。相信這本書不是完結篇，而是一個新的起點。

鄧俊傑