眾所周知，「用戶體驗五要素」出自Jesse James Garrett 的《用戶體驗要素》一書：戰(zhàn)略層、范圍層、結構層、框架層、表現(xiàn)層。
產品設計者和開發(fā)者的角度可以對應理解為：為什么做、做到什么程度、這些東西如何組成、規(guī)劃用戶操作行為、如何呈現(xiàn)這些東西。
「Live Activities設計規(guī)范」由蘋果出品，原文為英文，上一篇已翻譯https://www.yuque.com/viola-ddvdh/yb7quv/uwdod71707e4nez8。上篇也提到了個人對其內容的敘述方式存在一點意見。為了更好的記住&理解「Live Activities設計規(guī)范」，使用比較熟悉的「用戶體驗五要素」對內容進行整理。
原文提供的Live Activity定義如下：
“A Live Activity displays up-to-date information from your app, allowing people to view the progress of events or tasks at a glance.”
“Live Activities help people keep track of tasks and events that they care about, offering persistent locations for displaying information that updates frequently. ”
從原文可以提煉出Live Activity顯示特點：
1. 內容是頻繁更新的、有進度/狀態(tài)顯示的、用戶關心的。
2. 內容的信息量是一眼就能看完的程度。
但上述仍是表象，并非實質，接下來思考這幾個問題：
1. 為什么顯示的是進度/狀態(tài)頻繁更新的內容？
2. 為什么要強調用戶關心的？
3. 為什么信息量是一眼就能看完的程度？
沒有Live Activity時，頻繁更新主要靠push推送。但push容易被其他APP的push覆蓋，且隨著各種APP的頻繁使用，用戶獲取關鍵信息的效率和通過push打開APP的次數(shù)反而在下降。
進度/狀態(tài)頻繁更新的內容，說明每個狀態(tài)存在的時間短，如果被覆蓋/忽略，同一狀態(tài)就不再復現(xiàn)，用戶所關心的，或APP所希望用戶關心的，就看不到了。比如：什么時候取外賣、待付款、上傳成功等等。
當下我們所處的時代是信息泛濫的時代，需要對信息作精簡，但用戶的操作是可以多條線進行的，比如比如邊看劇邊吃飯、上班摸魚/等外賣、比如聽音樂的時候寫作。
信息內容和量是官網(wǎng)一直在強調的，需要精簡，只展示用戶需要的，基本達到一眼看完的程度，目的就是知道變化的是什么，當前狀態(tài)是什么。
分析了這么多，大膽推測一下Live Activity的設計初衷是：快&準確&輕。而終極目的是打動用戶，形成好體驗，進而推動口碑和銷售；為各APP提供新的通知形式，互惠互利。當然Live Activity在一定程度上也彌補了硬件上的缺憾。
關于這個層次相當于規(guī)定功能范圍&信息邊界限制，就是什么要，什么不能要。這部分的信息官網(wǎng)給出許多，在此將其分類梳理如下，為避免大家不好查找官網(wǎng)/譯文對應出處，在句未已標注。
1. 僅iPhone支持，iPadOS、macOS、tvOS或watchOS不支持。（源自：平臺注意事項）
2. 非iPhone14的僅針對iOS16有鎖屏Live Activity展示。（源自：什么是Live Activity-鎖屏）
3. 支持用戶手動清除鎖屏狀態(tài)下的Live Activity。（源自：實際操作）
4. 支持用戶直接關閉對應APP的Live Activity。（源自：最佳實踐方式第3/c條）
5. 支持Live Activity自動開始&結束。（源自：最佳實踐方式第6/f條）
6. 限制跟蹤活動/狀態(tài)時長不超過8小時。（源自：最佳實踐方式第1/a條）
7. 限制活動/進程結束后展示時長不超過4小時。（源自：最佳實踐方式第8/h條）
8. 支持更改背景顏色&不透明度。（源自：設計有用的Live Activity第5/e條）
9. 限制內容布局。（源自：設計有用的Live Activity第5/e條）
10. 限制不同設備的展示尺寸。（源自：規(guī)范）
1. 避免在Live Activity中顯示敏感信息。（源自：最佳實踐方式第4/d條）
2. 避免在Live Activity中顯示廣告和促銷活動。（源自：最佳實踐方式第5/e條）
3. 只提供正在進行的任務/事件的關鍵摘要。（源自：最佳實踐方式第2/b條）
4. 在任務/活動結束前，給用戶提供關閉Live Activity按鈕。（源自：最佳實踐方式第6/f條）
5. 點擊Live Activity直接定位到對應頁面，無需用戶二次導航。（源自：最佳實踐方式第7/g條）
6. 考慮在活動結束后，鎖屏上在合理時段后自動刪除Live Activity。（源自：最佳實踐方式第8/g條）
（個人猜測）由于是提供一個展示區(qū)域，且展示區(qū)域有限，所以對于層級架構，一級展示什么，二級展示什么，各階段展示什么，這些都沒有做明確規(guī)定&建議。各家APP可以根據(jù)自身實際情況進行設計。
通過Live Activity的展示形式，可以總結為2點：吸引、查看（摘要&詳情）。
1. 一般是在原深感攝像頭兩側展示（電話會直接展示擴展型），分為緊湊型和最小化。
2. 緊湊型在僅有一個活動/事件的時候展示，雖被原深感攝像頭分割兩端，但僅作為一條信息展示，為了視覺上的統(tǒng)一，這里的顏色不支持開發(fā)設置，使用的是系統(tǒng)默認色值。
3. 最小化在存在多個活動的時候展現(xiàn)，左側和原深感攝像頭粘連，右側獨立成島。
4. 不管是緊湊型，還是最小化，都可以通過點擊原深感攝像頭區(qū)域，進入APP內頁，或者長按喚出擴展型。
1. 進入內頁的查看基本就是各家顯神通了，這里主要講擴展型和鎖屏。
2. 原則上是不支持在擴展型和鎖屏做復雜操作的，基本點擊是進入APP。
3. 擴展型是用戶長按緊湊型/最小化喚起的展示區(qū)域，內容是可以自定義的，當然官方也給了相應的建議，具體如下。內容信息種類多的可以采用這種信息左中右排布，底部預留大按鈕。內容信息少的可以采用左內容右操作的方式。
4. 根據(jù)一致性原則，鎖屏展示的布局框架應該與擴展型差不多，同樣可以點擊打開APP。只是在鎖屏狀態(tài)如果有多個任務同時進行，是會全部展示的，所以要注意品牌的傳遞，避免用戶混淆服務方。
對于如何呈現(xiàn)這些東西，蘋果還是寫了很多建議，確保視覺上的一致性和美觀。
1. 緊湊型狀態(tài)下，為了保證兩側信息的連貫，除了語句閱讀連貫，還需要在圖形和顏色上具有一致性，視覺上連貫。
2. 鎖屏狀態(tài)下的背景是可以自定義顏色、圖像、不透明度的，當然文字的色值和不透明度也是可以定義的。這就涉及到兩者間的對比度對信息閱讀的影響。
3. 設計師不僅要考慮最佳狀態(tài)，還有深色&淺色模式下的，以及不同環(huán)境光、設備亮度下的顯示。還有一點很容易忽視的，就是在用戶自定義的墻紙下顯示的效果。不僅要注意信息獲取，還需要考慮美感問題。
1. 緊湊型和擴展型之間的布局要保持一致，兩者間的變化過渡效果是可以預測的。
2. 一般來說，擴展型和鎖屏狀態(tài)下的信息間標準間距是20pt。
3. 在某些情況下，例如圖形和按鈕，您可能需要使用更緊湊的邊距，以避免擠滿邊緣或形成混亂的外觀。
1. 內容和Live Activity邊緣之間的邊距需要保持一致，請遵循SwiftUI規(guī)則。
1內容和Live Activity邊緣之間的邊距需要保持一致，，發(fā)現(xiàn)以圓角邊界為測距點得到的間距關系較為舒適。即：圓形/大致為圓形的圖形保持上下，3. 以及左側或者右側間距一致即可；方形/大致為方形的圖形保持圓角邊界與容器圓角邊界垂直對齊即可。同一位置的多個圖形圓角需要相對統(tǒng)一，才能確保間距的一致性。
需要適應不同機型的尺寸。具體的尺寸規(guī)范如下。
動態(tài)島使用44個點的角半徑，其圓角形狀與原深感攝像頭相匹配。
下表中列出的所有值均以pt為單位。
ps：左側為寬度，右側為高度。
以上就是整理分析的全部。
在整理分析過程中加強了對「用戶體驗5要素」各個層劃分的理解，也對Live Activity在各個層次上的要求更加明確。
從事體驗設計這么多年，經歷過多款B端和C端產品的體驗設計，有了一定的個人感悟。由于兩者用戶群體、使用場景、產品定位等方面的不同，讓兩者的體驗設計策略也存在較大的差異。但是無論是B端還是C端產品，有一個共同的體驗目標就是“提升用戶的操作效率”。甚至在一定程度上，C端產品比B端產品要求更高。
為什么這么說呢？
因為C端產品面臨激烈的市場競爭，如果效率方面存在明顯的不足，用戶很容易就轉向其他平臺了。而B端產品一旦部署上線，不菲的產品價格，平臺切換的風險，數(shù)據(jù)遷移的成本等因素，很容易形成產品的護城河。雖然用戶內心已是萬馬奔騰，但是依舊要自己摸索嘗試、查看文檔、或者請教別人來完成工作任務。
今天我們了解下C端產品用戶行為路徑中提升效率的4種方法。
用戶行為探知，就是根據(jù)用戶的操作行為或特定的時間，系統(tǒng)給出相應的推薦操作。
最常見的就是截屏操作產生的行為引導，目前主流的產品應用都會做出分享功能提示。在淘寶中，由于商品鏈接無法在微信中直接分享，所以淘寶對可能的用戶分享行為都進行了設計優(yōu)化。
例如用戶在商品頁面截屏時，系統(tǒng)會自動復制淘口令，既方便用戶分享給好友，又方便了對方快速獲取商品信息，避免了圖片分享過程中的復雜操作。同樣微信在用戶發(fā)信息時，會自動提示是否要發(fā)送截圖內容，減少了用戶選擇圖片等操作流程，提升了用戶效率。
（左圖：淘寶截屏提示 右圖：微信提示截屏信息）
高德地圖在特定時間段，開啟導航時會默認給出“上班路線”的按鈕，方便用戶快速導航。此外還在地址中增加了“常搜”標簽，根據(jù)當前地址優(yōu)先顯示常搜的地址，幫助用戶快速完成導航設定。
用戶行為引導，就是通過用戶行為流程分析，在用戶路徑中增加相關功能的曝光和引導，讓流程更加流暢，從而提高用戶的操作效率。
淘寶購物商品詳情頁中，在最后幾張商品圖片中植入了評價信息和入口，更加符合用戶的心智，引導性也更強。同時用戶可以直接選擇自己喜歡的款式查看商品評價，操作效率也更高。
而且增加評論引導后，實現(xiàn)了用戶在首屏就可以了解商品、價格和用戶評價，有利于用戶對商品作出初步的購買決策，從而提高用戶效率。
相比之下，專門的評價模塊進入后默認顯示全部商品的評價信息，用戶需要手動選擇才能查看自己喜歡的商品款式的評價信息，無形中拉長了用戶的行為路徑，增加了用戶操作成本。
在今日頭條中，搜索行為與資訊內容綁定。用戶在瀏覽的資訊后，資訊下方會自動顯示搜索關鍵詞，可以幫助用戶更快捷的進行搜索操作。
同樣在熱榜資訊下方增加了詳情提示，引導用戶去查看事件詳情。
（左圖：搜索關鍵詞推薦 右圖：熱榜引導）
手機產品屏幕的空間相對較小，展示內容有限。因此需要根據(jù)用戶行為，將相關功能聚合，讓用戶在一屏中可以獲取更多的信息，從而提高用戶效率。
在天貓部分商品詳情頁中，將商品參數(shù)集合在了商品名稱右側，保證了用戶在不滑動屏幕的情況下，就可以直接讀取商品參數(shù)。方便了用戶快速了解商品信息，提升了用戶的購物效率。
考拉海購則在部分商品首屏中，直接分類展現(xiàn)出了商品的型號和款式分類，并且實現(xiàn)了商品價格聯(lián)動，提升了用戶獲取信息的效率。
減少用戶的記憶成本，最好的方法就是讓系統(tǒng)產生記憶。因此大多數(shù)APP都會提供歷史瀏覽記錄等功能，方便用戶查找相關信息。而內容型產品為了更好的提高用戶操作效率，則是將用戶行為記憶直接保留在內容層面上。
我們常見的音樂類產品會留存音樂的播放進度，用戶點擊后就可以直接再次播放。
（左圖：喜馬拉雅 右圖：網(wǎng)易云音樂）
微信公眾號文章閱讀時，會對用戶閱讀位置增加錨點。用戶再次閱讀時，自動定位到上次退出時位置，從而提高用戶的閱讀效率。
微信“看一看”進入時，內容會自動刷新，提供更多新的內容給用戶，為了幫助用戶更好地區(qū)分新內容，微信增加了瀏覽位置提醒。
同樣對于用戶未完成的文章內容，用戶再次進入時，今日頭條會給出繼續(xù)閱讀的提示信息，方便用戶快速操作。
在提升用戶效率時，我們需要關注用戶場景和行為路徑，從而尋找到更多的效率提升突破口，主要包含以下3個注意點：
1、明確用戶的行為路徑，尋找用戶核心關切點，提升用戶效率；
2、轉移用戶操作成本，讓系統(tǒng)承擔更多的行為判斷和用戶引導；
3、用戶行為聚合時，應當集中關鍵的行為信息，避免對用戶核心行為造成干擾；
以上就是我對提升用戶效率方法的分析和總結，歡迎大家留言交流。
作者：子牧先生
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
B 端設計離不開設計規(guī)范這個話題，而做好設計規(guī)范是一個龐大復雜工程，很多人對這些處于一知半解狀態(tài)，在這個系列文章里我通過結合自己平時的項目案例來談談自己對 B 端設計規(guī)范的一些理解，希望可以帶來一些啟發(fā)。
本篇先談談設計規(guī)范制作的指導思想--設計原則，后續(xù)文章再展開講一下常見各種組件的設計規(guī)范。
設計規(guī)范作為 B 端設計中非常重要的一環(huán)，它的作用主要體現(xiàn)在以下三個方面：
在日常工作中，當項目組收到一個新的需求時，如果已經具備了成熟的設計規(guī)范體系，其工作效率往往會得到很好的提升。最后上線的頁面不用走查還原度。以下是具體工作流程：
通過前面內容我們知道了設計規(guī)范對于產品設計意義重大，那么制定設計規(guī)范制定依據(jù)又是什么呢？這里就要引出設計原則這個話題，設計原則是設計規(guī)范的總的綱領，所有的設計規(guī)范都應當以設計原則為基準。設計原則主要包含以下內容：
接下來就圍繞設計原則清晰、高效、友好、可控這四個方面展開講解。
清晰原則主要從視覺角度讓界面信息傳達合理，提高用戶信息獲取效率。主要包含對比，親密，對齊，重復四個方面。
① 對比：
對比是指界面中為了區(qū)分信息層級，強化元素對比度，使用的很常見的一種手段，例如下圖中利用大色塊按鈕與線框按鈕形成對比來凸顯關鍵按鈕；又比如通過對文字字號加大，字體加粗，顏色加深來與弱文案形成對比，凸顯關鍵文字信息。
② 親密：
如果信息之間關聯(lián)性越高，它們之間的距離就應該越接近，也越像一個視覺單元；反之，則它們的距離就應該越遠，也越像多個視覺單元。親密性的根本目的是實現(xiàn)組織性，讓用戶對頁面結構和信息層次一目了然。
③ 對齊：
在界面設計中，將元素進行對齊，既符合了用戶的認知特點（我們往往傾向使知覺對象的直線延續(xù)還是直線，曲線延續(xù)還是曲線），也能引導視用戶視覺流，讓用戶更流暢地接收信息。
④ 重復：
重復是指相同的元素在項目中重復引用，作用是可以有效降低用戶的學習成本，同時提高這些元素之間的關聯(lián)性。
高效原則體現(xiàn)在便捷、輕量、簡化、一致幾個方面，目的是通過合理的方式讓產品操作更加便捷；交互體驗與內容更加輕量和簡化；以及產品風格保持一致。下面結合幾個常見案例說明如何應用這一原則。
① 合理利用拖拽--便捷、輕量：
在涉及到諸如上傳文件，排序，滑動輸入，搭建等需求時，合理采用拖拽交互往往可以打造更加便捷用戶體驗。
② 盡量減少不必要的跳轉--便捷、輕量：
用戶操作過程盡量減少跳轉，以實現(xiàn)交互減步長，從而使用戶操作更高效輕量。例如能用原位操作就不考慮展開收起；能用展開收起就不用氣泡...依次類推（優(yōu)先級從高到低：原位 ＞ 展開收起 ＞ 氣泡 ＞ 彈窗 ＞ 抽屜 ＞ 新頁面）
③ 放大點擊熱區(qū)--便捷：
放大可點擊按鈕熱區(qū)，相對于較小點擊熱區(qū)，具備更絲滑操作體驗。
④ 懸停即現(xiàn)--輕量：
利用懸停即現(xiàn)，避免信息過于重復啰嗦，簡化頁面提高閱讀體驗。
⑤ 折疊次要功能--簡化：
頁面功能按鈕過多時，可將次要按鈕收納到一起，點擊時再展開，外面只展示高頻操作或重要按鈕，保證頁面內容簡潔。
⑥ 統(tǒng)一樣式--一致：
一致性是指在不同頁面中相同操作應保持一致視覺與交互樣式，可有降低用戶學習成本與企業(yè)開發(fā)成本。
友好原則應貫穿用戶操作前，操作中以及操作后三個階段，給予用戶及時反饋與幫助。
① 操作前：
在用戶操作前給到合適的引導與幫助，有效減少用戶迷茫感。
② 操作中：
通過交互效果以及頁面樣式讓用戶可以清晰感知到自己當前操作。
③ 操作后：
利用界面中元素變化清晰直觀展示當前的狀態(tài)
可控主要體現(xiàn)在自由和導航兩個方面。
① 自由：
自由即指用戶可以自由完成一些操作，例如回退，撤銷，終止等。
② 導航：
導航是指用戶隨時知曉當前所在位置，而且可以利用導航隨意到達目標頁面。
通過本篇內容我們大概知道了制作設計規(guī)范主要方向，那么具體到每個組件上，我們該如何去設計呢？后續(xù)篇章將細分聊聊如何去設計 B 端常見組件的一些內容。
部分參考資料：
作者：huang。亮 來源：優(yōu)設網(wǎng)
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
談到 B 端組件，很多人的印象是多且雜，想要全面準確的熟悉這些它們，需要我們對它有個合理的歸納總結?？赡苊總€人會從不同的視角去做這件事情，我一般是按照使用場景去對組件分類整理。
下面我們根據(jù)這個分類框架來逐個聊聊這些組件。
說到基礎組件，我想再將其細分成兩個大類：一類是通用組件；一類是柵格/導航。怎么去更深刻的理解這兩類的區(qū)別呢，我們可以打個這樣的形象比方：
通過這個比方我們不難理解，柵格/導航是先給頁面定下了基本框架，而通用組件則是在這個框架基礎上搭建頁面的所用到基本元素。
常見通用組件一般包含：色彩/字體/間距/圓角/分割線/按鈕。需要注意的是，通用組件看起來似乎很簡單，但卻是決定產品品牌調性、界面細節(jié)品質的重要因素，在設計過程中需要引起我們的高度重視。
色彩
色彩可分為主色，功能色，中性色三類。下面談談這三類顏色如何配置，以及如何定義這些顏色梯度。
① 主色
主色的選取
主色作為產品的主要色調，在選取時應當優(yōu)先選擇品牌色，但有一點要注意的是 B 端和 C 端不一樣，B 端一般不適合采用暖色系作為主色，如果品牌色為暖色調，則盡量考慮另選取一個冷色系作為主色，原因有兩點：一是為了避免和警告、錯誤色沖突，產生歧義；二是冷色系帶有商務、專業(yè)、冷靜的情感，更符合 B 端產品調性。
同時主色選取應避免高亮、熒光色、灰調高的顏色。
主色的應用
主色在設計中常見的應用包括可交互、選中狀態(tài)、可視化、插圖、圖標等場景。
② 功能色
功能色主要用于頁面表征狀態(tài)，常見有成功色、警告色、報錯色等。
成功色
主要用于操作結果成功提示以及標簽配色等。
警告色
主要用于警告提醒功能以及標簽配色等。
報錯色
主要用于系統(tǒng)報錯提示、圓點提示、以及標簽配色等。
③ 中性色
中性色在頁面設計中應用非常廣泛，從線條到文字再到圖形等等都可以見到它的影子。
Tips：無論我們主色調是什么，中性色在調色時建議可加入適量的藍色調，可讓頁面觀感更清爽。
④ 顏色梯度
選取好了顏色后，怎么去更合理的定義每個顏色的梯度呢？（這里主要指對主色以及功能色定義梯度）
我的方法是給顏色加一層半透明黑/白遮罩，當我們需要淺色，通過調整白色遮罩透明度得到合適顏色；而當我們需要深色時，則通過調整黑色遮罩透明度得到合適顏色。
這樣定義顏色梯優(yōu)點是后續(xù)如果需要更改配色，只需一鍵替換全局色即可，大大提高工作效率。
文字
文字規(guī)范包含字體、字號、字重、行高等。
① 字體/字重
B 端字體/字重一般按照如下規(guī)范即可：
② 字號
不同于 C 端，B 端在字號選擇上應當盡量保持克制。研究表明，Web 端上正文字號為 14 時，可以帶來最佳閱讀體驗。因此在字號選取上應盡量優(yōu)先選取 14 號字。如果想要區(qū)分文字層級，優(yōu)先級從高到低的手法應該是顏色、字重、字號，也就是說一般盡量不采用字號大小區(qū)分文字層級。
③ 行高
行高可以參照下面的公式或行高參照表快速獲得，如果通過公式算出行高非整數(shù)或非偶數(shù)，可就近取偶整數(shù)。
間距
關于間距取值，在目前主流屏幕分辨率下，只有 4 或 8 被整除率最高，考慮到 4 的顆粒度偏小，因此可優(yōu)先考慮 8px 的倍數(shù)作為間距值，在一些特殊場景可采用 4px 的倍數(shù)間距值。
分割線
分割線寬度一般統(tǒng)一為 1px 即可，同時注意顏色不可過深，以免干擾主體信息。如果需要不同層級分割線，可用顏色深淺來區(qū)分。
圓角
圓角大小一般根據(jù)使用場景控制在 2-3 個梯度即可，既不能全部統(tǒng)一一個圓角值，同時也不適合出現(xiàn)過多圓角值。同時圓角值不要過大，建議控制在 2-6px，以符合 B 端產品嚴謹專業(yè)調性。
按鈕
這里從按鈕的大小/狀態(tài)/排放位置幾個緯度來講。
① 按鈕尺寸
按鈕高度一般情況下可以設置 3-4 種尺寸按鈕，足以滿足各種使用場景。至于按鈕寬度，我們一般定義一個最小值，當超過最小值時，可設置 padding 值，按鈕寬度根據(jù)內容自適應。
② 按鈕狀態(tài)
操作按鈕過程中，按鈕會呈現(xiàn)不同的交互狀態(tài)。
③ 按鈕位置
對于主次按鈕組合，主次按鈕排放位置應該怎么規(guī)定呢？可分為兩種場景：一是當為從左到右閱讀順序時，主要按鈕應當排在次要按鈕左側。二是當為從右到左閱讀順序時，主要按鈕應當排在次要按鈕右側。而當一些特殊場景與這個原則沖突時，應權衡優(yōu)先級做出取舍。
熟悉通用組件后，我們要通柵格/導航來確定產品頁面框架。
柵格
柵格可以有效地保證設計的一致性、讓頁面布局更具規(guī)律，并提高團隊協(xié)作效率。應該如何設計柵格呢？
① 柵格區(qū)域的劃定
我們一般習慣將頁面從下到上劃分為背景層、全局控制層、內容層、臨時層，而柵格區(qū)應當用在內容層。以下為常見幾種頁面布局柵格區(qū)的劃定。
② 柵格自適應規(guī)則
隨著頁面寬度變化，一般來說是通過欄寬變化實現(xiàn)自適應。
③ 柵格欄數(shù)的確定
根據(jù)頁面內容豐富程度，柵格欄數(shù)一般定 12 或者 24 欄，考慮到 B 端產品功能往往比較復雜，建議采用 24 欄即可。
④ 上下布局柵格
⑤ 左右布局柵格
導航
導航可分為全局導航與局部導航。
① 全局導航
全局導航包含頂部導航、側邊導航、混合導航。
這三種導航樣式各具特點，應結合產品特性選擇合適的導航樣式。這里要注意的一點是，當產品可用性和用戶體驗產生沖突時，應優(yōu)先保證產品可用性。
② 局部導航
局部導航包含面包屑、標簽頁、步驟條、分頁器。
面包屑
面包屑導航的作用是告訴用戶當前頁面在系統(tǒng)層級結構中的位置以及父子級頁面間的關系，并且可以快速回到上幾級導航。
標簽頁
標簽頁可以幫助用戶在一個頁面實現(xiàn)快速切換不同內容，提升單個頁面內容擴展性?？煞譃榛緲邮健撕灅邮?、卡片樣式。
步驟條
當任務復雜或者存在先后關系時，可將其分解成一系列步驟，這里就會用上步驟條。步驟條是引導用戶按照流程完成任務的導航條，作用包含 3 點：一是讓用戶對操作流程長度和步驟有個預期，二是明確知道自己目前所在步驟，三是可以對用戶的任務完成度有明確的度量。
步驟條一般分為橫向與縱向兩種樣式。
步驟條小 Tips：當步驟條中有操作難度偏大的內容時，為了提高用戶操作完成率，我們可以考慮把其放在靠后的步驟中，原因是用戶前面已經完成了大部分簡單操作，后面碰到高難度操作后，出于損失厭惡心理，不會輕易放棄操作。
分頁器
當有大量內容需要展現(xiàn)時進行分頁加載處理，分頁器作用是可以讓用戶清楚的知道自己所要瀏覽的內容有多少頁、當前所在頁碼、快捷前往目標頁碼。
分頁器一般分為迷你、簡易、自定義三種樣式。
妙用分頁器小 Tips：當表格中需要對數(shù)據(jù)全選操作時，為了提高操作效率，可將自定義每頁跳數(shù)調到最大。例如一共 100 條數(shù)據(jù)，默認每頁 10 條數(shù)據(jù)，要完成全選需要點擊 9 次翻頁，10 次全選（表格的全選框勾選后一般只選中當前頁面全部數(shù)據(jù)，而不是所有頁面總數(shù)據(jù)），當把每頁條數(shù)調整為 50 后，則只需翻頁 1 次，點擊 2 次全選即可。
到這里關于 B 端的基礎組件就全部梳理完了，后續(xù)我們就來揭開展示組件的神秘面紗。
部分參考資料：
作者：huang。亮 來源：優(yōu)設網(wǎng)
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
SaaS，英文全稱 Software as a Service，意思為軟件即服務。是通過網(wǎng)絡提供軟件服務，可以理解為一種軟件交付模式，因為交付模式的不同也決定了和傳統(tǒng)軟件的差別。
在Saas之前傳統(tǒng)軟件需要購買后本地化部署，兩者最大的區(qū)別在于，賣軟件是將軟件作為一個軟件實體賣給客戶了；而賣SaaS 軟件的所有權還在廠商所有，提供的是“軟件服務”。
Saas模式的提出者是Salesforce創(chuàng)始人——馬克·貝尼奧夫(Marc Benioff) 在98年的時候提出。有兩個原因促使馬克·貝尼奧夫思考并提出Saas：
1. 傳統(tǒng)軟件部署實施交付的失敗率非常高；
2. 軟件的售賣價格非常高，很多中型、中小企業(yè)有需求但無法承擔高昂的費用。
基于以上兩個痛點及當時的現(xiàn)狀賣軟件給企業(yè)造成的影響，已經形成了惡性循環(huán)，市場受到嚴重的阻礙（據(jù)Gartner 高德納公司（美國咨詢公司）的調查研究曾表明：在所有CRM項目中大約55%沒有達到軟件用戶的完整交付和預期目的，通俗的說是實施失敗。）
從賣軟件變成賣服務，其中的技術方式的改變、交易模式的改變，促成了軟件時代的變革，對于傳統(tǒng)軟件公司來說，是一次大革命。原來賣軟件給客戶，一次性（或者分幾次）收到錢了；改為賣服務后，這筆錢就不能在短周期內一次性收了，現(xiàn)行的SaaS模式通常是按照用戶的使用年費來收取。
兩者差別在于，軟件商需要先主動改變可以短期的一次性高收入，從短期收入向長期收入的轉變；
所以SaaS是長期主義的事情。
失敗的Saas生意會出現(xiàn)一個問題：把長期生意做成了短期不可持續(xù)的生意；而短期生意帶來的就是經營成本的劇增，導致生意不可持續(xù)。
所以，Saas模式決定了需要客戶長期使用你的產品，才可以長期可持續(xù)賺錢，也就是通常意義上的客戶終身價值（LTV）。
那如何做到客戶長期使用，其實只有一種方式：長期為客戶創(chuàng)造價值，做到幫客戶成功（幫助客戶的業(yè)務成功），從而持續(xù)續(xù)約。
吳昊老師，在《SaaS創(chuàng)業(yè)路線圖》中的講到：SaaS的本質是續(xù)費。這個觀點我比較贊同，SaaS的經營本質在于可持續(xù)。
那么，決定SaaS的成功因素是什么呢？
我認為決定性因素有三個方面：產品強大且靈活、用戶體驗優(yōu)質、服務的有效支持。產品強大和服務的有效支持不言而喻，具體我們來聊聊用戶體驗的價值。
傳統(tǒng)軟件在一次交付實施后，客戶付80%的錢，剩下的20%能不能收回來就不那么重要。但SaaS模式，客戶每年進行續(xù)費，若產品使用及用戶體驗滿意度低，帶來的影響和后果可能是客戶終止續(xù)費。
因此，和傳統(tǒng)軟件相比SaaS的用戶體驗的價值就更為重要，它直接影響SaaS的續(xù)費和流失。
相信“用戶體驗”這個詞大家應該非常熟悉，接下來我們從新認識什么是用戶體驗？
官方的定義是：用戶在使用產品過程中建立起來的一種主觀感受。“用戶體驗”這一概念是唐納德·諾曼（Donald Norman）在20世紀90年代中期提出的。產品大神俞軍老師說過用戶體驗的本質是“ 用戶最小成本滿足需求 ”。
基于俞軍老師的定義、我的理解和思考，我認為是幫助產品和用戶：最小成本滿足需求，同時創(chuàng)造「美·好」體驗。
怎么理解，因為用戶體驗是滿足商業(yè)目標的一種行為手段，我們來看下用戶體驗的需要考慮的雙邊關系，就比較好理解了。
如下圖：左邊是用戶最小成本滿足需求，右邊是我們企業(yè)最高效的服務用戶。
企業(yè)的本質就是創(chuàng)造商業(yè)價值，商業(yè)價值來源于用戶價值，同時考慮實現(xiàn)商業(yè)價值的效果和效率。我們常常會聽到“投入產出比”或者叫“投資回報率”；對于商業(yè)行為中的一環(huán)用戶體驗也如此。
所以，用戶體驗的核心的就是：平衡用戶最小成本滿足需求，及企業(yè)最小成本服務用戶。完成價值交換同時，滿足持續(xù)性。
由此，可以看出在SaaS的產品設計中，用戶體驗其實承擔著一個比較重要的責任，因為它關系到成本的邊際和規(guī)?；挠绊懀活^是產品一頭是用戶。
那么作為產品體驗設計師，我們需要具備一定成本意識，做好“成本管控的設計”，更本質來說設計過程中我們應該：把復雜留給自己，把簡單留給用戶。
因為我們在設計的過程中把握產品的交互方式、使用流程，在用戶認知和效率層面有較強的把控空間，充分做到的以“用戶體驗”出發(fā)；那后續(xù)銷售、交付、客戶成功的全鏈路服務過程的學習效率和服務效率會呈指數(shù)級上升。
產品設計，應該把復雜留給自己、把簡單留給用戶。
關于用戶體驗，就不得不介紹一下“ 用戶體驗要素”模型，個人認為這是所有產品經理和設計師可以貫穿整個職業(yè)生涯中都需要經常性、反復對照思考的設計模型。
用戶體驗設計的價值遠不止于讓產品的視覺、顏值提升，設計更大的價值在于深入業(yè)務、洞察用戶，幫助業(yè)務梳理產品信息架構、任務流程、交互體驗。
構建系統(tǒng)的用戶使用方式和工作模式，從而達成用戶目標；通過達成用戶目標完成價值交換、以此完成商業(yè)交易達成商業(yè)目標。
回顧Saas的商業(yè)模式，Saas的商業(yè)模式決定我們提供的這個服務不是靠人海戰(zhàn)術，因為Saas軟件即服務的含義是所提供的軟件就等于提供自助化的服務，應該提供的是自助服務、開箱即用、開箱易用的服務。
那么Saas服務設計策略上，應該從降低系統(tǒng)使用門檻和提升用戶的自主化服務兩維度出發(fā)，根據(jù)這兩個核心維度，我們構建了每刻SaaS產品體驗的設計策略模型。
第一，設計“系統(tǒng)服務自動化”，這里的服務是功能使用的操作，符合“低認知、易上手”，那么從設計整個體系 需要遵守“易發(fā)現(xiàn)、低認知、高效率、有溫度”的設計原則展開，以用戶使用行為出發(fā)設計符合用戶心智認知的功能形態(tài)和交互流程。
第二，設計“系統(tǒng)幫助自助化”，什么意思在全系統(tǒng)中構建幫助引導的自助化體系，用戶需要幫助的時候提供人性化的引導幫助，我們從發(fā)現(xiàn)的維度、認知的維度，系統(tǒng)認知的維度，綜合考慮用戶系統(tǒng)的幫助引導。
設計原則，是指導我們做正確設計的方針。
設計原則的建立基于對用戶使用體驗全流程的基礎上，以每刻報銷的設計原則，圍繞用戶旅程、認知及行為出發(fā)構建。
1. 當用戶接觸系統(tǒng)從看出發(fā)，看見系統(tǒng)界面、發(fā)現(xiàn)操作入口；（發(fā)現(xiàn)）
2. 帶著操作任務用戶進入系統(tǒng)、看見導航、看見文字、看見按鈕，都需要理解認知；（認知）
3.用戶從何開始、如何操作，在完成整個業(yè)務事項的過程需要進行填寫、選擇、交互過程就產生了生產效率問題；（操作）
4. 當出現(xiàn)誤操作或系統(tǒng)出錯時，需要系統(tǒng)糾錯提醒、容錯的設計、幫助及引導，當完成整個業(yè)務事項后，用戶產生一種的情緒感受，這個感受即是印象、評價、口碑。（感受）
緊緊圍繞產品業(yè)務、用戶處理特性業(yè)務的基礎上，以終為始，回歸到用戶、業(yè)務、系統(tǒng)進行思考歸納的產物。
設計策略，是指導我們如何進行做正確的設計。
在SaaS產品分類上，常見的SaaS產品主要分為3類，行業(yè)SaaS、職能SaaS和通用SaaS。
每刻報銷產品從核心業(yè)務來說是職能類Saas，從提升財務人員報銷的發(fā)票審批、費用審核等效率展開，但報銷的來源又源于普通員工的業(yè)務報銷，業(yè)務報銷發(fā)生又和所在行業(yè)的費用發(fā)生行為特征有一定相關性，所以是結合職能和行業(yè)Saas的屬性，從用戶體驗的設計上需要考慮不同角色用戶對于系統(tǒng)的業(yè)務理解、功能交織使用的不同訴求，這個設計過程探索研究是相對比較有難度的，以后有機會可以展開聊。
下圖是每刻系統(tǒng)經過6年過程中統(tǒng)計的問題分布，分布比率呈現(xiàn)：認知問題 60%，效率問題 30%、情感問題10%。
我們在訪談客戶調研發(fā)現(xiàn)，企業(yè)服務雖然客戶已經用了好幾年我們的系統(tǒng)，但財務部門還是經常性會碰到新入職員工的系統(tǒng)使用問題，甚至財務部門來新人時 以前系統(tǒng)發(fā)生的使用問題會從新出現(xiàn)一遍，所以企業(yè)服務有一個現(xiàn)象，客戶是老客戶，但新用戶不斷增加，新人一旦增加第一個遇到的問題就是認知問題，也輔證了我們對于Saas系統(tǒng)認知問題是用戶體驗的第一大問題。
幫助體系建立可以從系統(tǒng)層面體系化有效降低用戶使用的認知成本，圍繞用戶角色的核心業(yè)務操作使用流程、洞察用戶旅程上的疑惑和障礙點。用戶首次進入系統(tǒng)要建立介紹和引導，足夠簡單、降低陌生感，來減少人力咨詢回復的投入。
相比人，系統(tǒng)的自助化和自動化的服務，更具有復用性和規(guī)模效應。
SaaS的商業(yè)模式，按年使用賬號來收費和傳統(tǒng)軟件的付費模式區(qū)別非常大，因為需要先主動放棄自己本來可以唾手可得的收入，從短期收入向長期收入的轉變。
在SaaS模式的時代，商業(yè)模式決定其必須關注客戶成功、客戶持續(xù)續(xù)費、LTV客戶長期價值。
SaaS的產品更需要重視用戶體驗，用戶體驗的優(yōu)劣決定其產品的長期發(fā)展，SaaS的用戶體驗設計則關注用戶使用認知和行為效率，以及系統(tǒng)服務自主化設計和系統(tǒng)幫助自動化設計，用戶體驗將在產品成長期后半程，逐漸成為SaaS商業(yè)模式不可或缺的產品競爭力。
作者：周大蝦07 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
圖標在界面設計中，雖然很小，但是卻是界面中重要組成部分之一。通過將顯示物體圖形化的形式，將功能本意高度濃縮成一個圖標，再通過視覺隱喻更快地讓用戶理解功能，同時圖形與文字相比，圖形更加生動形象，視覺能力更強、更便于記憶，用戶可以根據(jù)圖形快速定位功能位置。而順著時代的發(fā)展，圖標不再僅僅以工具的形式出現(xiàn)，更多的起到裝飾頁面，也不斷延伸出不同的圖標類型與圖標設計風格。
圖形與復雜的文字相比，更加簡潔，相應的識別效率也會更高。圖標可以將復雜的文字描述高度濃縮成一個圖標，通過視覺隱喻的方式讓用戶聯(lián)想到現(xiàn)實生活中的物體，更直觀地呈現(xiàn)圖標代表的功能，更快理解功能的意義
1.2 減輕頁面負擔
像一些通用常見的圖標，如搜索、播放按鈕、更多等，僅需要一個圖標就能清晰地傳遞功能意義給用戶，省文字的描述，節(jié)省更多的頁面空間與閱讀壓力。
1.3 更快定位功能位置
圖標與文字相比有更豐富的表現(xiàn)形式與顏色，所以視覺沖擊也就更強，也能更快地被識別出來，當用戶熟悉了產品后，只需要通過圖標就能快速找到想要的功能，當功能位置發(fā)生變化時，不需再重新閱讀枯燥的文字找到對應的功能，只需從圖標形狀、顏色上區(qū)別，找到對應的功能。
2.裝飾層面
2.1 傳遞品牌調性
隨著互聯(lián)網(wǎng)的發(fā)展，同類型的產品越來越多，要在各個產品中突圍，除好用的功能外還要有特色的外觀。在圖標中融入能代表產品品牌的符號，強化品牌調性，保持圖標的獨特性，給用戶留下深刻的印象，一看圖標就知道是哪個產品。
2.2 增強產品吸引力
如今用戶對產品的要求除了要有好用、有用的功能外，還希望有更好的視覺享受。一組好看、有趣的圖標可以帶給用戶更好的第一印象，增強產品對用戶的吸引力。
2.3 渲染氣氛
根據(jù)不同的節(jié)日或運營活動，設計相應氛圍的圖標，幫助產品渲染節(jié)日氛圍或加強用戶對產品主題運營活動的感知力度
二、圖標繪制的基本原則
1. 可識別性
圖標與文字在一定程度上起到相同的作用，都是通過特定的表現(xiàn)形式來傳達某種信息給用戶。順著時代發(fā)展，圖標的設計更精細化，產生了更多的設計風格，但圖標的本質還是沒變的，是用戶進入功能的入口。因此，一個能被用戶快速識別、快速理解的圖標相當重要，是圖標設計的基本要求。我們繪制圖標時要盡量去掉輔助、無用的元素，保留最清晰、直接、有代表性的元素。
2. 風格統(tǒng)一
設計師在設計圖標時，除了會根據(jù)產品類型、用戶群體、品牌調性等因素決定使用哪種圖標風格外，還要根據(jù)圖標的具體使用位置，因此在一個產品中，常常會出現(xiàn)多種風格類型的圖標，而風格統(tǒng)一指的是在某個特定功能模塊內的圖標風格要保持一致，是面性的圖標就是面性，是毛玻璃效果就是毛玻璃效果。
3. 大小統(tǒng)一
圓形、正方形、三角形，在這三個圖形雖然高度相同，但是整體上三個圖形的視覺重量并不相同。在實際的操作中，界面圖標不會由單一的形狀組合，所以形狀各異導致每一個圖標的視覺體積都會有所區(qū)別，因此不能單純地利用統(tǒng)一的寬高或線去界別圖標的大小，要根據(jù)圖標的的特征去判斷。在平常的設計中，我通常會利用正方形來輔助圖標繪制，在保持形狀特征下，讓正方形內的區(qū)域占滿，哪個方向缺得越多，就往那個方向移動一點。
4. 色彩統(tǒng)一
色彩的統(tǒng)一指的是圖標色彩在飽和度與明度上保持特征統(tǒng)一，數(shù)值在一定的范圍內發(fā)生改變；而在色相的選擇上保持匹配度，像一些單色系的圖標，通常使用的都是產品的主題色，而多彩圖標，常會以主題色為主，拓展出臨近色、相似色、對比色，目前市面上大多數(shù)的圖標顏色會使用同類色與鄰近色。對于飽和度與明度的調節(jié)，我通過利用灰度模式進行輔助，使圖標視覺更統(tǒng)一柔和，不會出現(xiàn)其中一個亮眼或暗沉。
5. 占比統(tǒng)一
5.1 正負形占比統(tǒng)一
正負形的合理使用是圖標能否傳達準確意思的關鍵，因此也是常會出現(xiàn)的組成元素。在繪制圖標的正負形，注意保持占比統(tǒng)一，其中某個圖形正負形太大或太小，會顯得突兀、別扭，失去統(tǒng)一性，界面整體質感會大大降低。
5.2 顏色占比統(tǒng)一
在繪制圖標時，確定圖標中的主色和輔色，繪制時盡量保證主色和輔色占比相同，保持圖標的統(tǒng)一性。
6. 疏密統(tǒng)一
有規(guī)律地將線條組織在一起，利于形成統(tǒng)一的視覺風格。同時，線條間可以保持一定的留白，不需要太密集，太密集的線性圖標，縮小后反而會影響識別。同時，給圖標留出一些空間，使線與線之間不會太擠，增強圖標的呼吸感。
安利一個國外的圖標大神Myicons?，簡單的線性圖標一樣可以很精致。
三、不同風格的圖標
目前市面上的圖標主要有四種類型，分別是：線性圖標、面性圖標、寫實擬物圖標和三維立體圖標。而不同的圖標中組合的元素都會有一些差異，相同類型的圖標中也會有不同的圖標風格。
1. 線性圖標
線性圖標主要還是由線性組成，設計師可以通過改變線的粗細、線的端點、圓角大小或加入一些面性元素在里面來使線性圖標更加豐富、有趣，但整體來說純線性圖標更纖細、簡潔，使得視覺沖擊力稍微弱了些。
1.1.1 單色
單色是線性最基礎的表達方式，這種設計風格單調、視覺沖擊較差，但是制作難度低，設計所耗費的時間頁更斷，因此常常會出現(xiàn)在個人中心頁中，僅需要有圖標顯示功能入口，設計要求并不高的功能模塊中。
1.1.2 雙色
雙色圖標與單色圖標相比，視覺沖擊力更強，應用范圍更廣，通常會融入品牌主色，是除了線面圖標外出現(xiàn)在首頁中的線性圖標。因為雙色圖標可以加入品牌色，增強品牌感的同時，使圖標增加了設計感，不會像單色圖標那么單調乏味，因此雙色圖標也會以“次要功能”的形式出現(xiàn)在首頁當中。
像在“去哪兒旅行App”和“平安銀行App”中，頁面已經存在一組視覺沖擊、視覺層級更高的一組面性圖標，但是因為業(yè)務需求露出更多功能入口，因此就可以使用線性圖標這種視覺沖擊力弱一點的圖標搭配，既不會搶走主視覺，也能滿足業(yè)務需求。
1.1.3 斷點圖標
斷點圖標在目前的app圖標設計上較少使用。雖然斷點風格圖標在表達上有一定的局限性，但是圖標設計感更強，圖標更有趣味性。
斷點圖標并不是隨便刪除某個描點，在斷點的位置選擇上和斷點的大小都是要注意的地方。斷點位置的選擇要注意兩點：
1 ) 保持相同角度，能更好地增強圖標的協(xié)調性，避免造成圖標的視覺混亂降低用戶的視覺體驗。
2 ) 選擇在線的拐角處，利用連續(xù)性原理，在一定的路徑下使這種線的斷裂保持視覺連貫性，保持圖形整體性。
1.1.4 線面結合
在原本的線性圖標上加入色塊，就會產生新的設計風格--線面圖標。線面圖標比較特殊，圖標的視覺層級會隨著圖標中包含的色塊大小而變化，色塊越大，視覺沖擊力也越強。因此在設計線面結合圖標時，要先確定圖標在該頁面中的重要程度，如果是主要功能則將色塊的占比加大。
1.2 線的影響
圖標中的線主要由兩個元素組成，一個是線的粗細，一個是線的端點，而這兩個元素也是主要控制線性圖標的性格。以常用的48px圖標盒子為例，常用線的粗細有2px、3px、4px，圖標的線越粗圖標越有力量感反之圖標越纖細；而圖標的圓角越小時圖標越穩(wěn)重、專業(yè)，像一些辦公軟件、金融產品，圖標的圓角就比較小。圓角越大圖標越飽滿親和力更強，像一些兒童學習類軟件就會使用大圓角的圖標設計。
因此，圖標的線粗細與圓角大小，都根據(jù)不同產品類型與目標用戶確定。而大多數(shù)線性圖標主要有四種基礎造型：纖細+小圓角、纖細+大圓角、粗描邊+小圓角/無圓角、粗描邊+大圓角。
1.2.1 纖細+小圓角
精致、嚴謹，多用在銀行、新聞類APP。沒有圓角，會使圖標更加尖銳，對于銀行類APP會給人一種威脅，但是太大的圓角，顯得有點輕浮、可愛，不符合銀行莊嚴的感覺，所以稍微添加一些圓角，使圖標更有親和力的同時，也保留一些莊嚴的感覺。
1.2.2 纖細+大圓角
更加精致、有親和力，這種風格是目前市面上軟件使用得最多的一種線性圖標風格。
1.2.3 粗描邊+無圓角/小圓角
粗曠、個性、有很強的力量感。更多的用在運動、汽車這類主要用戶傾向男性的軟件，同時也會在一些潮流類電商軟件中出現(xiàn)，凸顯更有個性的設計風格。
1.2.4 粗描邊+大圓角
圓潤、可愛、親和力強，常用在偏向兒童的產品
2. 面性圖標
面性圖標時軟件使用的最多的一種圖標類型，設計師通過改變色塊、圖形圓角、正負形和底托等元素，讓面性圖標呈現(xiàn)不同的設計風格，但無論是哪種設計風格，面性圖標設計沖擊力相比面性圖標更強，因此市面上大多數(shù)核心功能都會用到面性圖標來提高功能的設計層級，讓功能在頁面中更加突出。
2.1 扁平風格扁平風格的圖標常為單色圖標，圖標整體沒有漸變、高光、陰影等裝飾性設計效果，因此更加簡潔，更突出功能本身，圖標功能性更強，圖標制作成本低，曾經也是風靡一時。但扁平風格的圖標缺少亮點與制作成本的原因，導致圖標同質化嚴重，缺少特點，很難被人記住，因此現(xiàn)在很少被使用。
2.2 漸變色塊
在扁平風的基礎上，在色塊上添加漸變色，在保留了扁平圖標的功能性外，使圖標色彩更加豐富，在不同類型的軟件中都可以使用這種風格，算是一個比較百搭的圖標風格。同時漸變色塊也是很多面性圖標的組合基礎，在漸變色塊這個基礎上還可以添加不同的效果形成不同設計風格。
在設計漸變色塊風格的圖標時要注意兩點：
1 ) 市面上的app都會選擇同類色作為漸變色，然后通過改變顏色的飽和度，使?jié)u變色的明亮對比更加明顯的同時，顏色過渡也更加柔和舒服，使圖標更有通透感，增加視覺沖擊力。
2 ) 在設計這種有白色色塊在頂部的圖標時，可以給色塊添加一個淺淺的透明漸變，讓色塊過渡自然一些，同時也可以添加一層淺淺的陰影，增加層次感。
2.3 圖層疊加
圖層疊加風格的圖標看上去像兩個透明圖層疊加在一起的感覺，圖標層次感強，細節(jié)也更加豐富，圖標風格更新穎、更年輕化，因此如果在設計一個年輕人使用或者希望打造年輕化頁面感受的時候，可以嘗試使用圖層疊加風格。
繪制圖層疊加風格的圖標時要注意：
1 ) 重疊在一起的那個色塊是通過布爾運算得到的，并不是通過簡單的透明圖層得到的。而重疊在一起的那個色塊也不宜過于顯眼，畢竟看的是圖標的整體。因此可以參考一下“智行火車票”，通過改變飽和度5%到10%和使用15%左右的同類色，就可以讓用戶看得清圖標的變化，同時也不會是色塊太突兀影響觀感。
2 ) 盡量統(tǒng)一疊加部分圖形與圖標之間的占比。
2.4 毛玻璃
毛玻璃是近年最火的一種設計風格，不僅設計風格新穎、特別，而且還有很強的質感表現(xiàn)，因此不僅在金融產品，還是生鮮產品或票務產品，都有毛玻璃風格的圖標。
而在設計毛玻璃圖標時，里面也有很多細節(jié)需要注意：
1 ) 背景模糊效果不需要太大，有一種若隱若現(xiàn)的感覺就可以。如果調太大，可能就看不出是毛玻璃效果了。
2 ) 添加背景模糊效果的圖層不需要用純白色。像百度這種同類色配色的毛玻璃圖標，只需要將圖標的主色調低飽和度后，就可以使用。這樣的好處是不僅讓圖標顏色過渡更加自然，同時有更多的組合方式、更多的層次。
3 ) 使用邊緣光。毛玻璃圖標有很多相互重疊的圖形，如果重疊的圖形顏色相近的話，圖形邊緣就會被弱化，使用邊緣光可以明確圖形邊界，增加層次感。同時使用邊緣光，還可以為圖形塑造類似玻璃的厚度，細節(jié)更加豐富。
2.5 晶白風格
晶白類圖標利用圓角正方形或圓形作為底托再在上面添加一個主色為白色的圖標，然后通過調節(jié)透明度、投影、漸變給圖標添加一些質感，是常見的圖標風格，也是使用了很久的一種設計風格。
后面也延伸出了另一種設計風格圖標主題通常不會是統(tǒng)一的造型，像喜馬拉雅這種圖標，圖標本身元素復雜、細節(jié)較多，形狀也更加不可控，因此用一個淺色圓形底托，將他們統(tǒng)一起來。不僅可以將復雜的圖形統(tǒng)一起來，還可以添加吸引人眼球的漸變色更好地增加圖標的視覺占比，有更強的視覺沖擊感。
在繪制晶白風格時，注意兩點：
1 ) 可以適當改變底托圖形的形狀，增強差異化。
2 ) 統(tǒng)一光源，越白的地方越亮，注意控制好透明度的變化與角度。
2.6 實物展示
這類圖標會出現(xiàn)在生鮮類、藥品類、潮流電商類產品中，因為使用圖標很難將這些類型概括起來，直接使用圖片展示更加直觀，但因為圖片細節(jié)、元素更多更復雜，如果使用太多會使圖標看起來很雜亂。
3. 寫實向圖標
寫實向圖標模擬現(xiàn)實中的物體，更貼近生活，用戶對這類圖標理解能力也更強，繪制難度也更高，繪制時間也更長。寫實向圖標除了基本的色塊組合、顏色搭配外，還有更多的透視與光影來增強實感。常常用在運營設計上，或用在一些特殊界面模塊從而增強視覺層級。
3.1 輕擬物圖標
輕擬物圖標是最近很好的的設計風格，但是輕擬物圖標出現(xiàn)在界面設計上還是比較少的。因為輕擬物圖標元素比較復雜，視覺沖擊力強，放在界面上有可能搶走用戶對核心內容的關注度，通常會運用在運營設計長圖、彈窗、核心功能等。
而繪制輕擬物圖標，主要注意的是光影的打造。光影主要由這幾個元素組成：亮面、暗面、明暗交接線、反光。在繪制輕擬物圖標時，主要注意以下幾點：
1 ) 在繪制輕擬物圖標時，不一定需要使用統(tǒng)一色相中的顏色，可以通過改變顏色的飽和度明度的對比和冷暖色的對比來營造光影，使圖標色彩更豐富、對比更明顯。
2 ) 反光可以使用圖標主色的對比色，降低飽和度，提高明度，運用在輕擬物圖標邊緣，使邊緣更更清晰，不會糊在一起，圖標整體立體感更強。
3 ) 明暗對比越明顯，輕擬物圖標越顯通透、立體。
3.2 2.5D圖標
2.5D曾經是很火的一種設計風格，但是現(xiàn)在已經逐漸被輕擬物與建模替代。2.5D圖標固定展示了三個面，有很強的立體感，常常運用在科技類的網(wǎng)站設計中。
在繪制2.5D風格圖標時，要注意：
1)統(tǒng)一好圖標的厚度。
3.3 3D圖標
隨著時代進步，3D逐漸成為一個主流的設計風格。通過專業(yè)軟件給予了圖形材質質感、真實的光影，更加貼近生活真實物件，同時還可以配合動效的設計，有很強的視覺沖擊力和新鮮感。常常出現(xiàn)在網(wǎng)頁設計中、運營設計中。目前繪制3D圖標主要用blender和C4D，C4D在渲染方面有oc的加持，渲染效果直接拉滿；Blender則是完全免費的軟件，目前熱度也是瘋狂漲，在渲染方面雖然沒有oc好，但是還是可以滿足日常工作。
而在繪制3D圖標需要注意以下幾點：
1 ) 統(tǒng)一主光源方向。建模里面會出現(xiàn)很多打光類型，如主光、輔光（有時不止一個）、邊緣光等。
2 ) 統(tǒng)一攝像機位置。攝像機與物體的距離、角度影響渲染的最終效果。
3 ) 用數(shù)值定義物體大小。建模軟件不像繪圖軟件那樣強調物體的數(shù)值大小，拉遠看物體就是小，拉近看就是大，做一個物體時還好，但是要做一組3D圖標時，就要定義好物體的大小，使圖標更加統(tǒng)一。
四、如何確定使用哪種類型的圖標
不同風格的圖標有著不同的特點，設計師要根據(jù)圖標放置位置和功能選擇圖標類型。其中最有決定性的因素就是圖標的重量，而影響圖標重量的因素有：占比、顏色、細節(jié)元素。線性圖標在界面中占比較少，因此看起來會更加簡潔，視覺沖擊力弱，常用在重要程度低，不需要突出展示的功能上；面性圖標占比更高，視覺上會更加飽滿，同時顏色色塊使圖標更加顯眼，視覺沖擊力得到力增強，使用戶對圖標的感知力更高，是最常用的圖標類型，用在各個重要功能入口上；輕擬物和3D圖標除了占比高、顏色豐富，還有各種光影、材質的細節(jié)，圖標元素更多，視覺沖擊力也更強了，也因為圖標復雜、視覺沖擊力強，因此很少出現(xiàn)在界面上，通常運用在一些特殊運營入口或需要吸引用戶的大模塊中。
不同的類型在界面中也會搭配出現(xiàn)。
五、圖標的繪制
1. 圖標盒子
圖標盒子是輔助繪制圖標的一個工具，幫助設計師在設計圖標時更好地規(guī)范好各個圖標的尺寸大小。而圖標盒子也有很多種，我最常用的是48*48px，這個尺寸對于線條的控制比較方便，通常用1px、2px、3px。
工具始終都是工具，界面圖標不會由單一的形狀組合，所以形狀各異導致每一個圖標的視覺體積都會有所區(qū)別，因此不能單純地利用統(tǒng)一的寬高或線去界別圖標的大小，要根據(jù)圖標的的特征去判斷。在平常的設計中，我通常會利用正方形來輔助圖標繪制，在保持形狀特征下，讓正方形內的區(qū)域占滿，哪個地方缺得越多，哪個地方就拉伸一點。
2. 圖標的繪制方法
圖標中會存在標準化圖標，像刪除就是一個垃圾桶、像首頁通常是一個家的圖標、還有搜索則是放大鏡的圖，照片是兩個山一個太陽，這些圖標都習慣以這種表達方式出現(xiàn)，用戶已經習慣了這種表現(xiàn)形式，因此對于標準化圖標，盡量維持以往的變現(xiàn)形式，讓用戶更好地理解圖標意思。
非標準化圖標可以細分為具象與抽象，對于具象類圖標，現(xiàn)實中有實物可以參照。這類圖標的設計較為簡單，可以在某度上尋找相關照片，根據(jù)實物的造型進行提煉和簡化。
抽象圖標則較為復雜，通常是某些特定行為的名詞，沒有具體直接的參照物。因此在設計前，我們要先充分理解功能本身，這個功能是什么、用戶怎么用，然后提煉關鍵詞，接著根據(jù)關鍵詞發(fā)散思維，尋找相關聯(lián)的圖形來表示含義。例如“社區(qū)”功能，功能目的是提供一個讓用戶互相交流的環(huán)境，同時吸引無目的的用戶逛起來發(fā)現(xiàn)感興趣的話題，讓更多的信息流得到曝光從功能目的中提煉一下關鍵詞：聚在一起、發(fā)現(xiàn)、交流。接著發(fā)散思維進行腦暴，聚在一起：一群人-圈子-同一個世界的人-星球，發(fā)現(xiàn)：看-眼睛；尋找-望遠鏡-雷達-指南針，交流：聊天-聊天氣泡-聲波。
六、圖標的使用場景
圖標運用在功能入口上是最基礎的使用場景之一，如首頁中的金剛區(qū)、個人中心都會用到很多圖標作為功能入口。
1. 金剛區(qū)
目前國內的APP包含的功能有很多，而金剛區(qū)的作用就整合產品功能并放置在首頁中，提高這些功能的曝光量，給其他功能引流，讓更多用戶知道或使用上產品功能，增強用戶對產品的粘性。像美團，很多人對他的了解是一個外賣工具，但它里面還有很多其他功能，使用金剛區(qū)展示它多元化的服務。
金剛區(qū)圖標通常會有1～3行，根據(jù)業(yè)務具體需求做調整，在每行中會有4～5個圖標。尺寸范圍一般在40px～48px左右（@1x），同時會根據(jù)具體的業(yè)務需求，調整大小，最終都是一預覽效果為準。
2. 個人中心
個人中心是個人類型功能、運營活動入口和工具的集合地，是除了金剛區(qū)外，含圖標最多的一個地方。個人中心中包含很多不同類型的功能，可以使用卡片式的設計，將功能圖標更好地分類。在圖標風格的選擇上，個人類型功能是最重要的功能，通常會以面性風格放置在頂部，如果個人中心中需要展示運營入口時，需要減弱個人類型功能圖標的視覺沖擊，會使用線性風格圖標。
3. 運營入口
運營入口主要作用是讓用戶點擊后跳轉到產品活動頁，因此具有強視覺沖擊力的圖標，會更吸引用戶眼球，從而提高點擊運營入口的機會。
因此運營入口上，通常會使用面性圖標、寫實向圖標或3d圖標。因為寫實向圖標或3D圖標可以提高視覺層級，因此經常運用在主要運營板塊上，而面性圖標相比下較弱，當頁面已存在一個主視覺或主要功能時，運用在運營板塊上。
4. 主題板塊
在軟件中會有很多不同主題的信息板塊，同時信息板塊間有較大的差異，如果全部展示出來會使頁面樣式不同統(tǒng)一、信息混亂導致降低用戶的閱讀體驗。因此使用主題板塊，將不同主題信息集中在一起，然后露出部分關鍵信息在頁面中，保證視覺統(tǒng)一的同時，還可以起到流量分發(fā)的作用，讓用戶在茫茫信息流中快速找到自己感興趣的方向，提供用戶閱讀體驗。
純文字的排版在信息流中略顯枯燥，而圖標在主題板塊中起到潤色主題的作用，渲染主題氣氛，提高不同主題板塊的識別度與差異化。對于一些長標題的主題板塊，只需要記住圖標就能快速定位主題板塊位置。
5. 底部tab欄
底部tab欄功能數(shù)量通常在2～5個，在設計時，要設計點擊前和點擊后兩個圖標狀態(tài)，同時幫助兩個狀態(tài)是有明顯的變化。底部tab欄圖標大小通常在22px（@1x）左右，而圖標底下的文字時10px（@1x）。底部tab欄作為最常出現(xiàn)的區(qū)域，是傳達產品品牌感、提升產品辨識度、記憶點的重要區(qū)域，很多產品都會在底部tab欄的圖標設計上加入品牌元素，增強辨識度。
七、如何提高圖標設計能力
1. 階段一：臨摹
臨摹是人類學習一個新技能開始，就像嬰兒學習父母說話一樣。但是一開始很多都不會臨摹，或者照著畫也不會，那我們應該如何去做？
1.1 臨摹效果不佳
1 ) 提高審美能力，多看一些主流的圖標，可以上追波看看目前流行的設計風格，不行的話就去看看大廠都在畫怎樣的圖標。
2 ) 明確自己的能力，對自己目前的設計水平有一個客觀的評價，到一個怎樣的水平。很多人都急于求成，最基礎的線性圖標都不會就上來搞輕擬物，畫來畫去都不好看，最后就放棄了。
3 ) 敢于支出自己的不足，許多人畫了許多時間去畫一組圖標，就很容易被自己催眠，以為自己已經畫得很好了，其實還會有很多不足。所以我們要敢于指出自己的不足，在前期臨摹階段，畫完后多去對比原作，自 己有哪些地方沒有原作做得好的
1.2 會了，但沒完全會
什么是會了，指的是可以繪制出于優(yōu)秀原作一樣的圖標；什么是沒完全會，指的是不知道原作是怎么達到這個好看的效果的。而且很重要的一點是，你臨摹的作品可能也有一些不好，需要改進的地方，以此在這個階段我們要做的是：
1 ) 多看別人總結的知識點，知道如何去判斷一個圖標是否還有可以改進的地方，這樣繪制是不是正確的
2 ) 懂得總結與思考，原作是用來什么樣的手法讓我覺得它是好看的，這些技法怎么用，還可以用在哪
2. 階段二：半原創(chuàng)
臨摹是一個提升自己的手法，但不代表可以直接用到自己的作品中，直接復制別人的設計，并不叫設計師，復制粘貼誰不會啊，所以在懂得如何臨摹后，我們要敢于嘗試半原創(chuàng)。這里說的半原創(chuàng)不是指在別人圖標的基礎上加上兩筆就是半原創(chuàng)，而是要吸取了優(yōu)秀圖標的優(yōu)點后，重新設計出一個有相同特點的圖標。那我們應該如何半原創(chuàng)呢？
1 ) 還是多看，但是不同于臨摹階段，我們在臨摹的時候還要多想，這個圖標的特點是什么、怎么做、還能怎么用，積累圖標不同的表現(xiàn)形式2 ) 多練，這個建立在多臨摹上，目的知道別人的技法是什么做的，練習了不同的技法后，將它們再融合在一起
3. 階段三：原創(chuàng)
第三個階段，也是最難得階段。目前很多情況都是只能成為融圖設計師，將不同作品優(yōu)秀的點組合起來。但如果要建立自己的風格也是要做融圖設計師的基礎上，多想、多嘗試，敢于突破，在一次次的融圖后，發(fā)現(xiàn)出自己的特點，為自己的作品打上自己標簽，輸出具有差異化特點的設計。最有印象的就是夸克的設計，品牌特色很明顯，其實我們每個人也可以成為一個品牌，只要我們足夠努力
作者：阿恒的設計筆記 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
// 前言
良好的互動氛圍是社區(qū)產品的核心，貼吧作為一款近二十歲的社區(qū)產品，設計師秉承年輕包容的產品理念，始終在探索屬于貼吧的特色互動形態(tài)，在這過程中，希望通過互動系統(tǒng)設計方法，升級貼吧互動體驗，培養(yǎng)用戶心智，形成良性互動鏈路，最終提升用戶活躍。
一、探索互動系統(tǒng)的設計方法
較為簡單的互動形態(tài)為作者生產內容，瀏覽者為喜歡的內容點贊、回復，甚至私信創(chuàng)作者，這些互動行為會激勵創(chuàng)作者繼續(xù)生產內容。
基于以上互動形態(tài)我們搭建了循環(huán)互動系統(tǒng)，創(chuàng)作者為瀏覽者供給內容后，我們需要在互動環(huán)節(jié)引導互動行為發(fā)生，在觸達環(huán)節(jié)優(yōu)化互動信息觸達，在反饋環(huán)節(jié)引導參與互動反饋，從而形成正向循環(huán)。結合實際的項目經驗我們發(fā)現(xiàn)互動系統(tǒng)運轉離不開“信息更易懂”、“路徑更順暢”、“玩法有驚喜”這三個要素。
二、尋找貼吧互動設計機會點
貼吧的角色是由創(chuàng)作者—樓主、瀏覽者—吧友組成，良好的產品運轉模式為：創(chuàng)作者向瀏覽者生產供給內容，瀏覽者對其互動激勵。但貼吧多年來互動鏈路中斷，導致從互動到供給無法形成正向循環(huán)。
1.特色場景洞察問題
貼吧的場景及形態(tài)廣泛，與其他產品有所不同，具有內容形式多樣、瀏覽場景獨特、互動類型廣泛、回復邏輯精細、互動玩法多元等特點，通過走查上述特色場景發(fā)現(xiàn)諸如鏈路中斷、功能缺失、結構混亂、內容丟失等問題。
2.下探設計機會點
基于以上問題的共性，我們可以從中總結出核心體驗斷點：
a.看不懂：回復列表內容結構不合理、收藏后看不懂更新的樓層內容；
b.看不到：Push通路不穩(wěn)定無法觸達用戶、大多用戶關閉推送push；
c.沒意思：贊、回復等互動方式老舊，刷貼、簽到行為重復，沒有特別的玩法。
下面會使用上述總結的互動系統(tǒng)設計方法，對貼吧現(xiàn)存問題進行體驗升級，提高用戶的互動積極性。
三、 互動系統(tǒng)設計方法應用舉例
1.信息更易懂
貼吧的回復場景多，邏輯復雜，創(chuàng)作者與瀏覽者在看到對方的回復后，內容展示需要易讀易懂，彼此才會有意愿回復反饋。
a.查看列表—優(yōu)化結構
查看評論列表的舊體驗存在回復對象錯亂、內容缺失的問題，新體驗根據(jù)語境自由展現(xiàn)原貼、樓層、樓中樓三層結構，承接上下文關系，降低用戶理解成本，并將其復用在查看點贊、查看@ 等場景中。
b.查看詳情—精準定位
點擊列表頁后的精準定位也是易懂的關鍵，我們對內容被折疊、定位不準舊體驗問題進行優(yōu)化，新體驗默認展開原貼及樓層內容，細化點擊貼子、樓層、樓中樓后的定位邏輯，幫助用戶精準看到想看到的內容。
c.繼續(xù)消費—延長步長
用戶從回復列表進入查看詳情頁后，舊體驗只展示當前的評論樓層，看不到上下文內容。新體驗在定位樓層前后增加樓層內容，同時通過“查看之前樓層”和“加載之后樓層”方式繼續(xù)瀏覽，延長步長。
2.路徑更順暢
產品的推送Push向用戶推送感興趣的信息，需要穩(wěn)定的觸達用戶且有意愿打開，才能達到召回用戶目的。
a.打開推送開關—場景引導
舊體驗引導開啟push場景缺失，方式過于生硬，新體驗選取貼吧高頻互動場景，在用戶簽到后、回復后、發(fā)布后選擇合適形態(tài)展現(xiàn)引導，提高推送通知打開率。
b.展示推送—有吸引力
舊體驗互動push內容表述凌亂，新體驗將push內容結構化，以“用戶昵稱+動作+互動對象”的結構展示推送內容，并強化互動用戶的頭像，適當展示互動詳情，吸引用戶點擊。
3.玩法有驚喜
貼吧點贊、回復等互動方式存在多年，缺乏新穎性，用戶互動心智疲軟，急需通過輕量、有趣的創(chuàng)新玩法，刺激瀏覽者互動。
a.新增動態(tài)表情
結合貼吧元素，補充單擊、長按、雙擊的遞進互動點贊方式，給予用戶感官刺激，提升點贊爽感。
結合時效性運營活動，增加高考、勞動節(jié)、618活動點贊，營造驚喜感。
首次私信提供貼吧IP表情，助力用戶關系破冰。后續(xù)私信增加開香檳、丟炮竹以及丟炮竹炸滑稽雙向互動玩法，持續(xù)提升用戶互動意愿。
b.新增潮流表態(tài)
虛擬形式是近幾年受用戶喜愛的潮流表態(tài)玩法，探索虛擬形輕互動方式，互動后通過私信觸達，并沉淀社交貨幣資產，進而引導雙向互動。
// 小結
文本搭建的“信息更易懂”、“路徑更順暢”、“玩法有驚喜”互動系統(tǒng)設計方法，已將其運用在貼吧的特色互動體驗升級中，并取得正向數(shù)據(jù)和用戶反饋，希望該項目的設計方法及經驗能為大家提供參考。
作者：百度MEUX
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
// 寫在前面
端到端導流是指在產品矩陣體系內引導優(yōu)質產品的用戶使用另外一款產品，帶來使用量的提升，從而實現(xiàn)用戶規(guī)模提升的一種增長手段。隨業(yè)務快速增長，有駕從百度汽車頻道衍伸出了有駕小程序、M站、PC站以及APP等多緯度的產品矩陣，依托各端流量實現(xiàn)矩陣產品間的導流，逐步積累用戶規(guī)模，是有駕目前獲客渠道中占比最高的方式。本文將以有駕導流體驗升級的項目為例，分享導流增長探索的設計思路與實踐經驗。
// 為什么要做導流
導流的目的
對于業(yè)務本身而言，隨著移動互聯(lián)網(wǎng)流量紅利期的結束，獲取新用戶的成本越來越高，不管是新產品還是成熟型產品，都需要通過導流的手段來持續(xù)擴充新用戶。其次，對于有駕產品生態(tài)而言，需要各端產品間的相互聯(lián)動，協(xié)同發(fā)揮優(yōu)勢，實現(xiàn)流量價值最大化。
導流的優(yōu)勢
成本低，相較于投放、活動等渠道流量獲取方式，矩陣導流成本低；
高意向，用戶購車意向明確更容易實現(xiàn)商業(yè)轉化；
可共享，用戶數(shù)據(jù)及行為關聯(lián)互通。
// 如何做好導流設計
1.問題分析
通過梳理核心場景的4種導流條，發(fā)現(xiàn)各個場景導流形式各異，用戶缺乏統(tǒng)一認知，導流引導語單一內容吸引力弱。在用戶在瀏覽頁面時，點擊功能入口或想要繼續(xù)查看更多內容，需要下載APP才能繼續(xù)阻礙用戶瀏覽：
缺乏統(tǒng)一認知：視覺表達形式不成體系，用戶感知不夠；
內容吸引力弱：內容單一缺乏吸引力，用戶沒有點擊欲望；
阻礙用戶瀏覽：打斷用戶正常使用功能，影響用戶體驗。
從導流鏈路的用戶行為來看，整個流程下載路徑過長，發(fā)現(xiàn)用戶流失較大的轉化點：
從小程序落地頁到下載頁：在進入小程序瀏覽頁面時，用戶沒有注意到導流條就滑走了；
點擊導流條進入下載頁：點擊導流條會先調起導流彈窗，點擊確認后再進入到下載頁，用戶未選擇下載就退出了。
2.明確設計方向
針對導流現(xiàn)狀缺乏統(tǒng)一認知，內容吸引力弱、阻礙用戶瀏覽、下載路徑過長的問題，我們搭建了一個完整的導流鏈路圖，根據(jù)用戶增長模型，把用戶生命周期各節(jié)點的用戶行為與產品觸點一一羅列出來，找到增長路徑的設計機會點。
通過以上的問題分析，如何建立用戶和產品的鏈接，保障友好的體驗，是本次導流升級要解決的問題。根據(jù)用戶關鍵行為，我們可以將整個導流鏈路拆分為3個階段來挖掘主要機會點：
下載前：興趣激發(fā)導流吸引，建立用戶穩(wěn)定認知；
下載中：強化用戶轉化動機，刺激用戶完成下載；
下載后：保障還原體驗暢通，提升首次使用體驗。
下面將分別介紹導流下載前階段的設計落地實踐，以及下載中、下載后階段的延伸設計思考。
// 下載前
1.強化觸點吸引
是否能成功引起用戶注意，是轉化開始的第一步，統(tǒng)一的視覺風格和滿足用戶訴求的內容，有利于增強導流條的吸引力。
1）收斂導流條類型
針對【阻礙用戶瀏覽】打斷用戶正常使用功能、用戶沒有跳轉預期的體驗問題，下線了阻斷式和截斷式兩種體驗不友好的導流類型，將原來4種導流類型收斂為2種，僅保留通用導流條和功能延展導流條，基于這2種導流形態(tài)進行深入的設計探索。
2）建立通用視覺標準
針對【缺乏統(tǒng)一認知】視覺表達形式不成體系、用戶感知不夠的視覺問題，建立了通用導流條標準化規(guī)范。統(tǒng)一視覺形態(tài)，優(yōu)化為頁面內通欄嵌入式，同時融入品牌色強化用戶感知，根據(jù)頁面布局制定了不同的展示規(guī)則。
上線后，內嵌導流條在展現(xiàn)受限的情況下，導流轉化數(shù)據(jù)與改版前基本持平，為了進一步提升導流的點擊效果，開始探索場景化定制提轉的設計方向。
3）定制場景化內容
針對【內容吸引力弱】內容單一缺乏吸引力、用戶沒有點擊欲望的內容問題，在通用標準化形態(tài)的基礎上，根據(jù)不同場景用戶訴求點，豐富導流內容。分別從內容定制、按鈕文案優(yōu)化、以及氛圍強化3個方向驗證對轉化的影響。
內容定制：豐富導流利益點、場景化內容更能激發(fā)用戶興趣，促進轉化達成；
按鈕文案：轉化按鈕文案導向性明確、內容與導流利益點匹配，可以助力按鈕轉化提升；
氛圍強化：導流樣式上適度弱化氛圍、樣式更傾向于原生功能，有助于提升導流條點擊。
2.拓展場景擴量
復利通用標準導流條的成功經驗，應用到功能延展類導流條中繼續(xù)驗證有效性，從產品價值點出發(fā)，挖掘高流量場景的機會點從而帶來轉化增量。
1）價值傳遞
根據(jù)小程序和APP兩端各自的不同點，分別從功能差異及體驗差異兩個方向進行優(yōu)化。
APP特有功能：APP完善的功能體驗可以更好滿足用戶訴求，例如參配瀏覽場景下，引導用戶體驗搜索及橫屏查看的高頻功能，對于導流轉化有正向幫助；
各端體驗差異：小程序和APP兩端體驗存在差異，例如圖片瀏覽場景下，APP清晰流暢的瀏覽體驗及放大全屏查看圖片的交互體驗，能夠刺激用戶轉化。
2）價值延續(xù)
當用戶完成核心內容消費后，是否可以引導用戶去APP繼續(xù)瀏覽更多相關內容，進而引導用戶下載呢？
服務透傳：平臺服務內容傳遞，例如在內容落地頁文末增加品牌廣告導流條，幫助用戶建立品牌認知；
相關推薦：引導相關內容消費，例如在文章或視頻頁增加相關推薦導流條，引導用戶瀏覽更多相似內容。
// 下載中
當用戶通過導流條進入到下載流程時，還有哪些手段可以刺激用戶激活減少流失呢？
強化下載動機：下載頁前置APP落地頁內容，例如將通用下載頁優(yōu)化為場景化下載頁，給用戶超前產品體驗吸引轉化；
減少用戶流失：縮短鏈路簡化流程，例如可在下載中間頁完成應用下載，同時退出下載頁時增加挽留。
// 下載后
當用戶在應用商店下載完成后，我們還能做哪些提升首次啟動APP的體驗呢？
還原鏈路暢通：提升場景還原成功率，減少頻繁提示信息干擾；
建立用戶心智：引導新用戶探索功能，根據(jù)用戶興趣推薦適合的內容。
以上內容是下載中和下載后階段導流優(yōu)化方向的一些延伸設計思考，為大家提供可以繼續(xù)探索的方向。
// 寫在最后
總結一下本篇文章關于導流的體驗設計要點：
全鏈路洞察，對導流鏈路進行拆解，通過盤點導流鏈路的用戶行為，明確每個節(jié)點的設計方向；
降低廣告干擾性，減少用戶瀏覽過程中的阻斷感，適度弱化廣告氛圍；
用戶的視角引導，讓用戶專注于產品本身傳遞的價值，引領用戶完成對產品的探索從而完成下載激活。
作者：百度MEUX
來源：站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請注明出處。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
什么是“有駕”
【有駕】是百度旗下的汽車信息與服務平臺，累計用戶超5.3億，致力于為用戶提供真實、可靠的看選買車服務，以及為車企和經銷商提供從品牌到效果的一站式互聯(lián)網(wǎng)營銷解決方案。
現(xiàn)狀分析
有駕品牌在孵化初期，重點是在用戶詞建立品牌感知。所以我們提取“有駕“的字形做為品牌符號，減少歧義，強化用戶的感知。
但是隨著品牌持續(xù)運營進入新的階段，我們發(fā)現(xiàn)現(xiàn)有的設計無法滿足后續(xù)的運營訴求了，主要體現(xiàn)在：
品牌logo：不能體現(xiàn)汽車的行業(yè)屬性，缺乏成體系的品牌符號和VI體系，色彩上也不夠符合時下潮流的年輕配色體系。
品牌活動：品牌關聯(lián)度弱，活動維度單一。
項目概述
因此，我們重新梳理有駕的品牌定位與調性，借助本次品牌升級，打造有駕差異化風格，形成獨有的視覺印記。
因為用戶對于舊的logo已有一定的認知。所以此次改版的目標在保持固有用戶認知，在原有基礎上進行品牌標識的探索及應用，以強化品牌感知，提升品牌的競爭力，整合業(yè)務資源做心智觸達。
前期分析
前期我們對汽車垂類的競品進行了一輪調研，并且結合有駕的用戶群里，尋找有駕品牌的差異點。
有駕用戶群體年輕化為主，普遍具有高學歷，集中在新一線二線城市。
通過以上在用戶、行業(yè)及行業(yè)趨勢等多唯獨的信息搜集后，我們確定了有駕品牌設計的四個核心關鍵詞：年輕、科技、未來、專業(yè)。
建立體系
在明確設計方向后，我們梳理了線上線下的所有品牌觸點，結合前期的調研結論，匯總出了有駕設計系統(tǒng)的完整框架，以確保品牌設計的完整性和靈活適用性。
設計落地
基于前期分析洞察結論，我們在繼承圓形和車形的基礎上，對品牌符號與icon進行了大量的方案探索。從圖形、質感等方面切入，簡化圖形形態(tài)，嘗試不同的形態(tài)呈現(xiàn)的視覺感受和氣質。最終確定了全新品牌logo方案。
相對于升級前，新版的logo加入汽車元素，解決升級前l(fā)ogo的行業(yè)屬性不明確的問題，讓產品app的行業(yè)屬性更加直觀。同時增加品牌符號做為底紋，輔以有駕的圓形符號成為品牌核心的一部分。強化有駕的品牌基因。
符號提煉
確定品牌logo后，為了確保品牌能夠更好的拓展應用，進行了品牌符號的提煉。并為了延續(xù)之前的品牌調性。所以輔助圖形延續(xù)了之前的圓環(huán)造型，造型偏向輪胎；在不破壞原有型的基礎上，加入一些折角的質感的變化，使圖形變化更加豐富，更有識別度。
設計語言
為了更好的觸達到各業(yè)務場景，所以我們對視覺風格進行了探索和拓展。分別以淺色與深色作為主要探索方向，以適配不同的落地場景。結合有駕的年輕化，科技感的設計目標，探索出以下三種質感呈現(xiàn)：
符號拓展
在提取的形狀基礎上進行變形，增加折疊細節(jié)。在大事件活動，海報等場景使用，增加品牌關聯(lián)度。
設計字體
結合全新的品牌定位，我們也優(yōu)化了有駕的品牌字體，從細節(jié)出透出有駕的品牌感知。
品牌手冊
新的品牌需要一套更全面的品牌系統(tǒng)來滿足不同場景下的業(yè)務拓展需求。
目前我們也對現(xiàn)有的品牌手冊進行拓展和完善，同步到業(yè)務方，以便更好的保證各業(yè)務場景觸點下品牌的認知和統(tǒng)一，達到提質增效的目的。
品牌落地
除了對品牌對角度的塑造和升級，我們更積極的把品牌滲透到活動、欄目包裝、大事件運營、品牌海報等各維度場景中，讓有駕品牌形象更加立體多元。
結語
目前有駕品牌升級已經取得階段性成果，沉淀出更加完善的品牌資產，不僅提升設計效率保證全鏈路的品牌曝光，也為業(yè)務規(guī)?；蛳禄A。之后我們也將不斷完善和擴充品牌資產，將設計成果不斷落地到業(yè)務中，細化業(yè)務目標并與設計目標緊密結合，多維度助力業(yè)務的高速發(fā)展。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://m.yvirxh.cn