CRM代表了企業對客戶的管理理念和運營方法，而對客戶生命周期的管理也是大家非常關心的話題。本篇文章里，作者分別從客戶畫像、線索獲取以及線索分配三個方面分析了售前的最重要步驟，一起來看看吧。
CRM代表了企業對客戶的管理理念和運營方法，所以談到CRM大家最關心的話題也就是對客戶整個生命周期的管理，而在售前部分最重要的就是：線索的獲取和分配。
說到CRM客戶畫像是繞不過去的一個名詞，客戶畫像是指公司客戶的共性關鍵特征，如下圖所示：
vipkid為例，他的主要客戶畫像就是：一二線城市且孩子年齡為4—12歲區間的家長。
客戶畫像使用方法：
1）根據客戶畫像尋找渠道和方法獲取銷售線索
比如一家做英語培訓的機構就可以聯合鋼琴培訓機構聯合做公開課，兩家公司的客戶畫像相近，就可以互通客戶達到共贏。
2）根據客戶畫像快速篩選線索，快速定位高質量線索
比如vipkid的電話銷售人員了解到家長雖然有意愿讓孩子學習英語，但是孩子年齡為2歲，沒有達到客戶畫像的標準，則可以盡早放棄溝通下一個客戶。
線索的獲取不外乎兩個部門：銷售和市場。
一般TO B的公司的獲客主要渠道為地推團隊例如：
這種公司會在每個城市設立分公司，培養大量的地推銷售人員，并劃分區域給到每個銷售人員負責，銷售人員就是通過掃街的方式獲取及維護自己的客戶。
一般TO C的公司的高質量獲客渠道為客戶轉介紹例如：
這些公司會動用電銷人員成單激勵、用戶轉介紹活動激勵等方式來促使客戶完成轉介紹行為如轉發朋友圈、拉新注冊、拉新購買等來獲得轉介紹線索。
通過投放廣告（實體廣告牌廣告、電視廣告、搜索網站關鍵詞投放、大V軟文）吸引用戶進入到營銷活動頁或官網進行注冊，從而收集到的線索。
通過內容產出如：
客戶成功案例、系列錄播課程、直播課程、行業解決方案、電子書、行業白皮書，發布到抖音、快手、公眾號、頭條、知乎、微博等平臺上，獲得客戶認可并吸引客戶持續關注。
從渠道商獲取購買，但數據準確度往往很低，需要搭建數據清洗團隊，清洗數據（確認客戶信息正確并補全信息、確認客戶需求存在）之后才能算線索并提供給到銷售。
通過企業與企業間的客戶資源的互換，實現雙方的共贏；建議找目標客戶群重疊但又沒有競爭的企業，以最小成本甚至0成本的方式合作，互補資源，實現雙贏。
如行業會議、論壇峰會、交流活動、線下公開課、展會、促銷活動等。
線索分配是和銷售模式息息相關的，主要的銷售模式有三種：電話銷售、地面銷售、社群銷售。
電話銷售依賴于CRM系統分配leads，所以電銷CRM可以從新leads轉化到老客戶續費等環節，做到對于銷售的標準化精細化管理。
1）新分leads
首次分配：
業務增長時期分配策略模型：
這種分配模型是粗放式分配，優質和低值的leads混合隨機分配給不同能力的銷售，可能會有一些高質量的leads分配給低能力銷售導致轉化失敗，但是也是因為低轉化的銷售有能接觸到高質量leads的機會帶來了工作的動力。
策略模型方案：
業務增速降緩&收縮時期分配模型：
業務增速降緩&收縮時期首要考慮的是降本提效，所以首要的會思考如果用更少的人干更多的事情、或是同樣多的線索如何能轉化更多，所以使用的策略會更激進一些，可能會導致轉化低的銷售長時間無法接觸到高質量例子，工作積極性降低，從而流失速度增加。
策略模型方案：
二次分配 ：
2）庫存leads
激活線索：
庫存leads即無法轉化的銷售線索經過公司多年的積累數量龐大，如果人工再次致電確認用戶需求則很低效成功率也很低，方法一是有效識別，庫中成交可能性更高的leads，由人工觸達轉化。
而這種方式就是通過推送（短信、郵件、公眾號等渠道）運營活動激活客戶，讓客戶主動再次咨詢，系統ke’yi再次分配銷售跟進或公海打標簽方便銷售主動撈取。
周期掃庫：
庫存leads即無法轉化的銷售線索經過公司多年的積累數量龐大，如果人工再次致電確認用戶需求則很低效成功率也很低，方法二是通過系統功能提高觸達效率降低人工售賣成本，周期性的把公海中的leads全部觸達一遍，避免遺漏漏網之魚。但缺點是需要嚴格制定外呼策略避免騷擾到客戶。
1、預測式外呼：
系統代替人工外呼，呼通線路轉接給人工溝通，節省人工外呼等待電話接通的時間浪費。
2、智能AI電話：
全部由機器人外呼及溝通，無人工介入，但往往只溝通確認客戶購買意愿是否存在。
前面提到了一般TO B的公司的獲客主要渠道為地推團隊。這種公司會在每個城市設立分公司，培養大量的地推銷售人員，并劃分區域給到每個銷售人員負責，這個銷售人員就是通過掃街的方式獲取及維護自己的客戶。
所以會有個弊端，CRM無法成為銷售獲取線索的主要來源，所以CRM對于地面銷售的管控程度比較低尤其在于新客戶轉化環節，一般銷售都是在確定客戶購買后才將客戶信息錄入到CRM中，所以地面銷售CRM系統的銷售管控環節主要在于客戶的維護任務及續費任務的流程及任務管控中。
而監控方式從電銷人員的電話溝通情況改到地面銷售人員的地點定位打卡簽到的方式。
地面銷售的線索二次分配，不會像電話銷售的那么靈活，一般是整個片區的商戶，以片區為維度的重新分配銷售。
社群銷售是在線教育大班課常用的一種銷售手段，也是線下奧數教育學而思培優使用過的一種比較成功的獲客手段，社群主要是將一群有相似目的或需求的人聚集到一起，在群中沉浸式的接收你的觀點，從而形成思維的共振而達到思想的高度統一對公司想傳遞的價值觀的的認可及信任。
上文說到，社群銷售主要是教育機構使用的銷售手段，所以往往和體驗課的班期有關，上同一期的體驗課程的學生或者家長會被拉入同一個群中，這個群會有一個專門的銷售負責。
所以社群的線索分配是和銷售負責的班期排班直接關聯的，除非整個班期重新銷售排班一般不會更換銷售。所以主要依賴于銷售對于社群的維護，一般不進行二次分配。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
人工智能從誕生以來，其理論和技術日益成熟，應用領域也不斷擴大。本篇作者給我們介紹了人工智能的十大技術及其相關應用，一起來看看吧。
人工智能發展到現在已經將近有80年的歷史。近日來特斯拉也說了自己不是汽車公司，是可再生能源公司、是機器人公司、是人工智能公司，特斯拉也明確表示未來人工智能汽車自動化駕駛的方向是視覺識別+機器學習。
人工智能從誕生以來，其理論和技術日益成熟，應用領域也不斷擴大，接下來我將給大家介紹下人工智能的十大技術及其相關應用。
人工智能的第一個大成就是發展了能夠求解難題的下棋程序。在下棋程序中應用的某些技術，如向前看幾步，把困難的問題分成一些比較容易的子問題，發展成為搜索和問題歸約這樣的人工智能基本技術。今天的計算機程序能夠下錦標賽水平的各種方盤棋、十五子棋、國際象棋和圍棋。
1997年5月，IBM公司研制的深藍(DeepBlue)計算機戰勝了國際象棋大師卡斯帕洛夫(Kasparov)。另一種問題求解程序把各種數學公式符號匯編在一起，其性能達到很高的水平，并正在為許多科學家和工程師所應用。有些程序甚至還能夠用經驗來改善其性能。
邏輯推理是人工智能研究中最持久的子領域之一。其中特別重要的是要找到一些方法，只把注意力集中在一個大型數據庫中的有關事實上，留意可信的證明，并在出現新信息時適時修正這些證明。對數學中臆測的定理尋找一個證明或反證，確實稱得上是一項智能任務。
為此，不僅需要有根據假設進行演繹的能力，而且需要某些直覺技巧。1976年7月，美國的阿佩爾(K.Appe1)筆人合作解決了長達124年之久的難題–四色定理，轟動了整個計算機界。他們用了三臺大型計算機，花了1200小時。
自然語言處理是人工智能的早期研究領域之一，已經編寫出能夠從內部數據庫回答用英語提出的問題的程序，這些程序通過閱讀文本材料和建立內部數據庫，能夠把句子從一種語言翻譯為另一種語言，執行用英語給出的指令和獲取知識等。有些程序甚至能夠在一定程度上翻譯從話筒輸入的口頭指令（而不是從鍵盤輸入計算機的指令）。人工智能在語言翻譯與語音理解程序方面已經取得可喜的成就。
自動程序設計是人工智能的一個重要研究領域。目前已經研制出能夠以各種不同的目的描述來編寫計算機程序。對自動程序設計的研究不僅可以促進半自動軟件開發系統的發展，而且也使通過修正自身數碼進行學習(即修正它們的性能)的人工智能系統得到發展。
專家系統是一個具有大量專門知識與經驗的計算機程序系統，它應用人工智能技術，根據某個領域一個或多個人類專家提供的知識和經驗進行推理和判斷，模擬人類專家的決策過程，以解決那些需要專家決定的復雜問題。
專家系統可以解決的問題一般包括解釋、預測、診斷、設計、規劃、監視、修理、指導和控制等。隨著人工智能整體水平的提高，專家系統也得到發展。在新一代專家系統中，不但采用基于規則的方法，而且采用基于模型的原理。
學習是人類智能的主要標志和獲得知識的基本手段。香克(R.Shank)認為：
一臺計算機若不會學習，就不能稱為具有智能的。
機器學習的主要目的是為了從使用者和輸入數據等處獲得知識，從而可以幫助解決更多問題，減少錯誤，提高解決問題的效率。
人腦是一個功能特別強大、結構異常復雜的信息處理系統，其基礎是神經元及其互聯關系。對人腦神經元和人工神經網絡的研究，可能創造出新一代人工智能機器。
20世紀80年代以來，神經網絡研究職又得重大進展。例如，霍普菲爾德(Hopfield)提出用硬件實現神經網絡，魯梅爾哈特(Rumelhart)等提出多層網絡中的反向傳播(BP)算法。
目前，神經網網絡已在模式識別、圖像處理、組合優化、自動控制、信息處理、機器人學和工智能其他領域獲得日益廣泛的應用。
模式識別是指識別出給定物體所模仿的標本，如文字識別、汽車牌照識別、指紋識別、語音識別等。這是一種用計算機代替人類或幫助人類的感知模式，是對人類感知外界功能的模擬，使一個計算機系統具有模擬人類通過感官接收外界信息、識別和理解周圍環境的感知能力。
機器視覺或計算機視覺已從模式識別的一個研究領域發展為一門獨立的學科。視覺是感知問題之一。在人工智能中研究的感知過程通常包含一組操作。例如，可見的景物由傳感器編碼，并被表示為一個灰度數值的矩陣。這些灰度數值由檢測器加以處理。
檢測器搜索主要圖像的成分，如線段、簡單曲線和角度等。這些成分又被處理，以便根據景物的表面和形狀來推斷有關景物的三維特性信息。機器視覺已在機器人裝配、衛星圖像處理、工業過程監控、飛行器跟蹤和制導以及電視實況轉播等領域獲得極為廣泛的應用。
智能控制是一類不需要(或需要盡可能少的)人的干預就能夠獨立地驅動智能機器實現其目標的自動控制，是自動控制的高級階段。1965年，傅京孫首先提出把人工智能的啟發式推理規則用于學習控制系統。十多年后，建立實用智能控制系統的技術逐漸成熟。
百度公司董事長兼首席執行官李彥宏認為，人工智能是具有顯著產業溢出效應的基礎性技術，能夠推動多個領域的變革和跨越式發展。例如：人工智能可以加速發現醫治疾病的新療法，大幅降低新藥研發成本；可以帶動工業機器人、無人駕駛汽車等新興產業的飛躍式發展；可以大幅提升國防信息化水平，加速無人作戰裝備的應用。人工智能技術將極大地提升和擴展人類的能力邊界對促進技術創新、提升國家競爭優勢，乃至推動人類社會發展產生深遠影響。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
版式設計是大部分設計師再熟悉不過的一個詞了，市面上很多文章都有普及過各種版式設計知識，比如：印刷中的版式設計、移動界面中的版式設計等等。但是在我做中臺規范時調研發現針對中臺系統文字規范內容科普的知識較少，可能是中后臺設計在國內還是處于初級階段吧。所以結合調研內容到實際工作中的總結給大家分享關于Web端文字系統的相關內容。
加拿大印刷術家羅伯特·布林赫斯特（Robert Bringhurst）在他撰寫的《印刷風格的元素》一書中將印刷術定義為以持久的視覺形式賦予人類語言的技藝。在中臺界面文字排版的易讀性、美觀度是設計師的首要任務，要創建閱讀性高和較美觀的中臺界面文字排版是設計師們必須學習的基礎知識之一。因為不論在App界面還是Web網頁設計中文字內容總是能占到整個版面的80%～90%的區域，好的文字排版能夠大大提高用戶的使用效率。所以本篇文章將站在一個網頁設計師的角度分享Web端界面中文字系統的基礎知識，從基本網頁中的系統字體初識、字體排版基礎理論、國際化文字適配，希望大家能夠合理運用在中臺界面的版式中。
1990年12月25日，英國計算機科學家蒂莫西·約翰·伯納斯-李爵士（Tim Berners-Lee）成功發明了萬維網，并弄清了統一資源定位符（URL），其中超文本傳輸協議（HTTP）和超文本標記語言（HTML）的概念后，他在Internet上發布了第一個網站。自從Internet發明以來，字體在Web上扮演著重要角色。1990年至今，網絡已經徹底改變了我們的生活方式和工作方式。在最初的20年中，Web經歷了許多變化，例如采用Web標準，使用CSS進行布局以及處理動態數據。雖然網絡從一開始就包含文本，但直到最近幾年它們才得到很好的應用。
在1990年代中期，英國字型大師馬修·卡特（Matthew Carter）設計的Georgia和Verdana兩款字體廣泛用在基于屏幕的網頁中。為了使字體在當時分辨率較低的屏幕上清晰易讀，馬修·卡特設計的這些字體具有X高度大、開孔寬敞的字體空間。由Microsoft專門針對網頁上的文本進行處理，Georgia和Verdana首先在位圖中進行設計，以適配當時網頁屏幕的分辨率，最后把文字轉換為輪廓字體，進行文字圖形化。
1990年代到2000年代中期是網頁設計的一段過渡時期網頁更加圖形化，系統默認自帶的字體如：Georgia、Verdana、Arial、Helvetica、Times New Roman已經滿足不了設計師們的設計需求。設計師們必須使用Photoshop和Illustrator等相關工具將一些特殊字體的每一段文本切成圖偏提供給開發人員，但是這種方式有著很多弊端，問題主要集中于本文不可選擇、復制、翻譯甚至是不可搜索。其中newyorker.com可作為典型代表，其網站在使用Typekit（可提供其自定義字體庫）之前，為了讓網頁與原印刷出版物保持一致，便使用了切圖方式將特殊定制化文本進行切圖處理，直到該該公司2010年11月開始使用Typekit自定義字體庫后才解決字體圖形化這種耗時耗力的方式。
在上面提到了在Jeff Veen還未創立字體服務Typekit之前，很多時候系統自帶的幾種字體滿足不了設計師需求，所以設計師們使用文本轉圖片的技術進行處理。為了解決這些問題肖恩·英曼（Shaun Inman）2004年開發了SIFR，雖然SIFR解決了圖片切圖問題，但其中也還是有一些問題存在，比如，太過依賴Flash，并且設置SIFR還需要掌握大量的相關知識，門檻較高。2009年Simo Kinnunen又將技術改進稱為Cufón，他使用canvas和VML快速替換文本，無需Flash或圖像。Cufón由兩部分組成：一個字體生成器（將字體轉換為專有格式）和一個用JavaScript編寫的渲染引擎。雖然文本圖片轉化技術一直在不斷完善中，但是歸根結底文本圖片轉化技術并不是網頁中的文字排版。
直到2009年Jeff Veen離開了Google并且同一年創立了字體在線服務Typekit，極大的豐富了設計們的字體選擇。2011年Adobe收購Typekit（也就是現在Adobe Fonts），并且Jeff Veen也因此成為Adobe產品的副總裁，負責Creative Cloud業務，負責Adobe旗下幾乎所有產品的在線體驗。
可變字體指的是一個字體默認狀態進行多個樣式擴展，他是一種含有多種變化的單一字體：即所有字寬和粗細、甚至是斜體的變化都可以包含在一個單一、高效且可壓縮的字體文件中。比如說PingFang SC，如果在系統上使用，同時包含了六種字重：常規體、中等、細體、特粗體、特細體、粗體。
可變字體是由Adobe, Apple, Google, Microsoft四大巨頭在20016年9月聯合在波蘭華沙的ATypI會議上宣布的Variable Font的字體規格OpenType，OpenType特點在于可將多個字體打包成一個字體，并且不會增大字體文件包的大小。他解決了某單個字體文件可以獲取各種粗細，寬度，高度，樣式和其他屬性的問題，具有靈活性。可變字體為Web上的排版提供了一個跨時代的變化。目前排版軟件廠商、字體設計師、字體廠商都積極地大量投入可變自己提的研究和開發設計，并且廣泛運用在操作系統和印刷行業。
目前在主流的操作系統、瀏覽器、設計軟件都在不同程度上支持可變字體。像操作系統，Mac os、iOS、Android、Wear OS、Fuchsia。瀏覽器Safari、Chrome、Edge、Firefox。設計界最為熟知的圖像編輯工具Photoshop、Illustrator、Sketch、Figma也已支持可變字體，設計師可以使用該設計工具進行同款字體不同樣式的使用。
舉個比較比較典型的例子，在2019年9月小米推出了全新的 MIUI 11 系統，并帶來了小米蘭亭Pro動態字體系統，小米蘭亭Pro字體聯合方正字庫聯合開發。在 MIUI 11操作系統中，用戶可以通過系統設置進入字體模塊，拖動相應滑塊即可改變手機界面用字的字體大小和字重粗細。MIUI動態字體支持文字粗細無級調節，每個人都可找到適合自己的字重，下圖是MIUI 11系統中可變字體的演示：
字體是體系化界面設計中最基本的構成之一，選擇字體是一個具有創造性和情感的過程，因為不同的字體傳達出不同的情感。在制定用戶界面規范時科學的定義字體規范系統，不僅能夠有效的表達出不同的設計風格，還能通過定義字體的字族、字階、字重、字體顏色、字體行高，有效幫助設計師在設計界面時使用字體達到統一性和整體性，保證界面有良好的閱讀體驗。首先，先為大分享一些非常實用的字體網站。
第一個我要推薦的是Adonbe旗下的Adobe Font，網站中有非常多優秀的字體。但是網站字體需要收費，一般是按照使用量的形式進行支付版權費，特點是可設置屬性進行字體樣式實時預覽，并且字體比較全。
在Google Fonts，你可以免費下載你喜歡的字體，并且按照你的需要在項目中使用。由于在系統中使用其他字體的唯一方法就是將字體文件導入到系統中，因此Google Fonts的下載功能非常有用。Google Fonts包含超過1400種不同的字體，其中包含最著名的：Open Sans和Roboto字體，他們是Android系統使用的默認字體。
設計師在做設計時常常會遇到某些網站或海報使用的字體特別喜歡，但是苦惱無法獲取改字體的信息導致無法下載使用，求字體網解決了此痛點。你可以將喜歡的字體進行截圖并上傳到網站進行字體識別，確定后他會提供出字體下載鏈接或者字體信息，解決設計師們喜歡某個字體而找不到的煩惱。
字由也是我比較推薦的一個字體網站，個人用的也會比較多。官網將全部字體進行整理分類方便用戶快捷尋找字體，并且有個分類是免費商用字體庫，避免了常常困惑的設計師使用字體導致版權糾紛問題。此有網站有兩大亮點，第一是此網站在設計師選用字體時有個實際運用預覽效果，直觀的看到字體在實際使用效果，第二是網站提供客戶端下載，在客戶端中點擊下載以后可直接進行在設計工具中直接使用。
在選用系統字體時需要考慮在不同系統的兼容性，大家都知道在不同的操作系統及不同的游覽器中默認顯示的字體是不一樣的，并且相同字體在不同操作系統里面渲染的效果也不盡相同。在做字體規范時需要提供一套系統完整的字族，里面不僅需要包含系統默認的界面字體，還需要一套有利于屏幕顯示的備用字體，方便維護不同系統及瀏覽器的實現，保證在任何場景保持良好的閱讀性和可讀性，下面是我在做界面規范時與相關同學一起選取的界面字體。
第一部分：-apple-system是在以WebKit為內核的瀏覽器，比如蘋果的Safari中調用蘋果系統macOS、iOS、watchOS、tvOS中默認字體，目前一般情況下英文使用的是San Francisco，中文使用的是PingFang。BlinkMacSystemFont是在Chrome中調用蘋果系統的字體。
第二部分：主要是提供了Windows和MacOS下的字體。其中Segoe UI針對Windows and Windows Phone等系統。PingFang SC是蘋果為中國用戶打造了一款全新中文字體，整體樣式看上去更加簡潔，字族共6個字體：極細體、纖細體、細體、常規體、中黑體、中粗體。Hiragino Sans GB是是Hiragino KakuGothic的簡體中文版，由日本設計師為MacOS和iOS系統中內置字體，簡體中文有常規體和粗體兩種，冬青黑體是一款清新的專業印刷字體，其小字在屏幕顯示時足夠清晰，擁有很多用戶的追捧。Microsoft YaHei是從Vista開始，微軟提供了這款新的字體，它是一款無襯線的黑體類字體，并且擁有Regular、Bold兩種粗細的字重，字重有效提高了字體的層級顯示效果。目前這款字體已經成為Windows游覽器中最值得使用的中文字體。從Win8開始，微軟雅黑又加入了Light這款更細的字重，對于喜歡細字體的設計或開發人員又多了一個新的選擇。
第三部分：主要是系統備用兜底字體，Helvetica Neue在沒有El Capitan versions系統的電腦中是最流行的，所以作為兜底，sans-serif也是常見的兜底字體；
第四部分：主要是系統的emoji，在我們的規范中選用了'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' 針對在macOS和Windows顯示emoji。
在設計規范系統中字體是用戶體驗相當重要的一部分，因為不論在App界面還是Web網頁設計中，不同的系統分辨率、不同的顯示器尺寸、不同的DPI都會對最終展現的文字大小帶來影響，并且文字在內容區總是能占到整個版面的80%～90%的區域，所以要根據用戶使用電腦的分辨率給予用戶一個比較合適的默認字號。那么這個字號多大合適呢？是12px、13px、14px還是15px比較合適呢，所以我們回到這個老生常談的問題進行分析。
在做規范時調研了在市面上各大較流行的網站，目前大部分文本類字體大小都采用了12px-14px范圍的文字大小。另外Windows自帶的點陣宋體從Vista開始只提供12px、14px、16px三個大小的點陣。所以，如果13px、15px、17px雖然每個字的空間大了1px但是點陣卻沒變，從視覺上會顯得略稀疏，可能導致顯示效果不佳。偶數字號的文字，比如12px的“中”字，去掉1像素的間距，填充了像素的實際寬是11px，文字的中豎線左右是平分的顯得均衡，具有美感。如下圖所示：
但是也有少部分網站使用基數作為文本大小，比如知乎正文使用15px，豆瓣首頁標題下面的的簡介文字使用的13px大小，我簡單的分析了一下，知乎在改版之前文本類內容用的13pt大小的可能是有用戶吐槽頁面文字太過于密集后來統一改成了15pt，知乎和花瓣頁面雖然使用的是基數但是整體效果還算不錯。不過為了字體使用更加的“安全”還是推薦偶數作為文本規范。
還有些因素會比較推薦用偶數，比如說從瀏覽器角度上看，因為某些電腦的瀏覽器上如在IE6瀏覽器會把基數的字號自動渲染成偶數系。在一些畫圖軟件如Figma、Sketch、Photoshop等一些畫圖軟件在設置字體大小屬性時從12px以上都是采用偶數進行快捷選擇，這也形成了一種常見的習慣。
在文字規范時也借鑒了設計界大佬AntDesign的規范，Ant Design 3.0 的時候，對主字號進行了研究，飲用AntDesign的解釋“我們基于電腦顯示器閱讀距離（50 cm）以及最佳閱讀角度（0.3）對 Ant Design 的主字體進行了一次升級，從原先的 12 上升至 14，以保證在多數常用顯示器上的用戶閱讀效率最佳?！?
同時我們也站在電腦屏幕分辨率也有過調研，在上一篇分享分享的系統布局中也提到了，目前大部分中臺系統中用戶使用的電腦屏幕主流分辨率分別為1440*900、1366*768、1920*1080、1280*800，因此在這些主流電腦分辨率中經過實驗，14px小大的文字效果以及閱讀體驗會比12px更加的舒適，并且內容會更加的清晰。
總結以上幾點分析我們得出，在界面中使用偶數會比基數更加的美觀、安全，也比較利于設計師的使用習慣，并且在糾結使用12px還是14px字體大小的很長一段時間里我們經過調研競品以及進行不同屏幕分辨率下字號的實驗最后確定我們字號使用14px正常文本大小，12px可作為輔助文字使用。
行寬是指一行字的長度，那么在用戶界面排版中我們使用多少行寬比較合適呢？引用Fusion Design的解釋“從生理結構分析，人在閱讀文字的時候，理解并傳遞到大腦的信息是有限的。用戶在閱讀時，目光左右上下巡視、掃描和閱讀，這意味著閱讀要求大量的眼球運動。行寬越長，眼睛移動的距離太長太多。寬度較大，眼動位移較大，讀者閱讀換行時容易串行。行寬越短，眼睛閱讀折行的次數太多。行數較多，眼動跳躍次數多，讀者閱讀行時會感覺到文字不連續?！彼栽诓僮鹘缑嬷斜苊膺^長、行數較多的文字，閱讀是大腦活動中一種最復雜的過程，比如說在操作系統中界面操作較復雜，如果出現大段的文字用戶不僅要操作復雜的系統，還需要進行閱讀理解大大降低了用戶的使用效率。
加拿大印刷大師羅伯特·布林赫斯特（Robert Bringhurst）有一個算法是：行寬=字號x30，例如：設置字號為14px大小，那么我們建議其基礎行寬是420px左右。中文一個字體寬度是14px，那么建議一行建議30個文字。注：在文字寬度規范時，為了考慮國際化的適配，避免多語言差異我們不以文字個數作為度量單位，而是以整個行寬來計算，比如說表單Title、Table。
行高是指在多行里面一行文字與另一行文字之間的的間距，每行文字占用空間的高度。我們定義行距(行高) = 字號 + 行間距，而不是單指字體高度，所以文字的高度不等于字號的高度，如：字號12px，行高為22px，根據Web頁面平均分配原則，行距就是從文字的頂端上移4px到文字底部下移4px的距離。如下圖所示：
在頁面布局分享有提過視覺層次，因為視覺層次是設計過程中的核心方法之一，對于中臺的UI設計師們而言，良好的理性思維相對比感性的視覺思維更加重要，因為在UI設計師設計界面時需要把界面中很多互不相關的元素有秩序的組織在一起，正確引導用戶操作與使用。那么什么是視覺層次呢？官方概括：視覺層次結構致力于一種用戶能夠理解的方式呈現產品的內容，以便用戶可以理解每個元素的重要性級別。它可以組織頁面內容，以便大腦可以根據物理差異例如：大小，顏色，對比度，樣式等區分對象。
視覺層次中的“層次”其實講的是在設計用戶界面過程中設計師需要有在內容上進行取舍，保證用戶使用產品時能夠讓用戶強烈的感知內容的主次，并且內容和功能優先級的高度進行區分，有效的減少用戶在操作界面時對內容需要就行二次過濾。比如說某個提示說明在頁面上最高，那么此提示在界面中一眼看過去需要最被突出和強調的。如果用戶界面看起來一團“糊”，那么這個設計是失敗的，因為它不能有效的幫助用戶進行內容篩選，導致用戶還需要使用時花大量時間去閱讀操作。
視覺層次分為4個基礎部分，其中包含了大小對比、字重對比、位置對比、顏色對比。
同樣還是用蘋果官網作為案例，真心覺得官網設計太好了。蘋果的設計一直以來都是引領著設計趨勢，其設計被國內外用戶所認可，所以就以蘋果官網作為案例。其中，字重對比：蘋果官網在字重上給人眼前一亮的感覺，它采用Medium+Bold的字重使得標題與詳情內容產生強烈的大小對比，用戶進入官網的第一眼便能了解核心內容。顏色對比：在顏色上使用黑色背景承托產品和內容，強烈的黑白對比增強了信息傳播中的識別度和對比度。圖文排版：在圖片與文字排版中使用了文字層和圖片層互相疊加的視覺效果，使得頁面層次感更加的豐富。如下圖：
格式塔原理或格式塔定律是感知場景組織的規則，人們感知由許多元素組成的復雜對象時，會采用有意識或無意識的方法將這些元素安排到整個組織的系統中，而不只是單一的元素級。它適用于不同級別的感知，其中視覺部分是設計師設計界面時最能體現價值的部分。
格式塔（Gestalt）這個術語來自德語單詞Gestalt，中文翻譯為“形狀，形式”，格式塔心理學家庫爾特·科夫卡（Kurt Koffka）的一句話可以捕捉到這一運動背后的基本思想：“整體不是元素基因的總和”。官網概括：“在心理現象中，人們對客觀對象的感受源于整體關系而非具體元素，也就是說知覺不是感覺元素的總和，而是一個統一的整體，部分之和不等于整體，因此整體不能分割”。格式塔理論中元素之知見的原則分別為臨近，相似，連續，封閉和連接。在用戶打開界面進行閱讀或者操作界面時視覺的第一感受是產品的整體效果，而并不會感知到一些較細節的元素。
在設計用戶界面時需要理解格式塔定律中5大定律，分別是接近、相似、閉合、連續、簡單，其中兩個最重要的定律分別是接近定律和相似定律，這兩個定律主要描述了我們感知事物的核心方式。
人類的大腦總是把一些細節復雜的元素分析歸類，將相對靠近或有相似的連接點的內容作為一個整體，在我們的生活中有類似的在我們的現實的生活中有很多自然規律中遵守了格式塔原理的接近定律，比如說比如說每到秋天，北方的嚴寒氣候不再適合大雁生存，這時候大雁便會飛往較暖和的南方，當人們看到天空正在南飛的大雁隊伍，它們組織鏈接得十分嚴密，并且群體在同一個方向移動，所以隊伍的形狀在我們的大腦中將它們視為一個群組的一部分，產生人字形或一字形的圖形。當你看空中一些比較特殊的云朵比如像貓、像飛鳥等圖形，是因為蓬松的氣體發生形變，形成了酷似動物或生活中熟悉的物體。這其實都是人類大腦通過潛意識進行腦補和整理出來的畫面，如下圖中的元素彼此靠近的元素歸為一組，相反距離較遠的元素被視為不同組。
其中在元素排布中也有一定的規律性，比如當行向間距大于列間距時，那么視覺的行排布的橫向關系密切形成整體。當縱向間距大于列間距時，那么視覺的列排布的縱向關系形成整體，如下圖所示：
以今日頭條和優酷視頻作為案例，首先進入到今日頭條首頁后映入眼簾的是無窮式的信息流?？梢钥闯鲈O計師使用接近原則對信息進行分組、組織內容和整理布局。卡片承載的內容形成模塊，模塊與模塊之間的這里發揮著至關重的的作用，因為它引導用戶眼睛朝向預期的方向，有效引導用戶使用。并且其排列方式是比較典型的縱向關系，可以看出行間距小于列間距，增強了縱向關系，有助于用戶閱讀和分類。把重要信息流的內容模塊放置中間位置，其他次要內容放置左右兩列。
優酷視頻是個大型視頻分享平臺，進入到首頁同樣是無窮式的視頻類信息流。我們可以看到產品排列方式與今日頭條正好相反，除了頂部導航以外內容區的行間距大于列間距，增強了橫向關系并且以橫向關系密切形成了整體，屬于典型的橫向關系排列。其中視頻封面與下面的文本形成一個內容小組，內容小組與內容小組形成一個大分類。由于產品視頻分類較多，所以從頁面排版上使用橫排關系將白色的空間增強了視覺層次感有效將視頻類型橫向區分，幫助用戶更快的找到相關類型的視頻內容。
接下來再說下相似定律。人們大腦總是把一些相似視覺特征的元素被認為是一類，與不具有相似視覺特征相比較具有相似特征的元素關聯性更強。在用戶界面排版中具有相似功能的元素在樣式上應該保持一致，比如說在操作界面中Link的顏色為藍色，那么用戶在操作界面時默認會把藍色的文字理解為可點擊Link。
設計師在設計界面過程中可以使用相似定律將元素進行元素分組、元素組織、元素布局。但是需要強調界面中相同的元素（組件），如按鈕、下拉、標題、正常文本等一些基礎組件需要使用相同的設計語言，保持一致的顏色、尺寸、布局等。本·施耐德曼在《Designing The User Interface》里說過：“在界面設計中，要采取一致的行動順序”。因為用戶會將視覺屬性相似的內容分組，將最相關的內容彼此靠近作為小組，小組與小組之間可組合成大組也就是我們在布局中提到的模塊，最后由模塊組合呈現出頁面形態。
西瓜視頻是個性化推薦短視頻平臺，從下圖中可以看到首頁分為影視和短視頻兩類，這也是西瓜視頻的兩大特色功能。設計師在設計界面時考慮到影視和短視頻這兩大類視頻需要在視覺感知上需要進行區分，所以設計師運用了相似定律進行設計，其中豎版視頻封面與下面的文本形成一種內容小組，橫版視頻封面與下方內容組合形成另一種內容小組。以不同的形狀來告知用戶的功能類型差異。如下圖所示：
在網頁設計中不論是視覺層級還是格式塔定律，其實都是由我們人類的大腦神經感知事物的規律總結而來，在生活中每個人潛意識都具備這種技能，因為人們總是喜歡有規律的事物，規律可以讓事情變得更容易理解。同理在設計用戶界面時不僅僅是為了漂亮美觀，還需將界面中內容有效的進行梳理并傳達給用戶。
隨著公司業務不斷快速發展以及互聯網信息的快速交流與傳播，很多產品已經突破地域的邊界走向了海外市場，并且個人也因為在實際項目中產品切換多語言時產生了各種各樣的體驗問題，所以為了提高規范體驗設計師們應該提前自主探索和思考關于產品國際化的相關內容。今天主要淺談文本適配問題。
在實際的工作中會遇到界面使用中文時布局非常的合理，但是一切換到其他語言時出現各種折行或者是遮擋的問題。主要原因是因為文字的長度會因語言不同而異，即使是使用同類字形的語言也是如此，比如說英文“New”翻譯成法語是“Nouvelle”，并且法語的感嘆號前面還需要留一個空格，字符數從4個變成了8個。所以設計師在做規范時一定要考慮預留出更大翻譯空間，以下是網上找的一些Bad case。
在多語言適配時我們發現很多書寫系統，如阿希伯來語、拉伯語、波斯語、烏爾都語等，都是以右到左對齊方式進行字符顯示，并且在相同的字體大小情況下，這些字體可能看起來比西伯來語字體要小，所以需要考慮調整行間距和對齊方式，使得不同字體在相同界面中都適用。并且使用這些語言的人口數量相當大，特別是在波斯灣地區由于石油經濟發展特別迅速。對于面對中東地區出海的產品，是不能回避的問題，所以要及時作出可配性方案。
在多語言適配時因為不同的語言可能在同一界面中需要設定不同的行高達到最佳效果，可以定義3種行高尺寸來做多語言適配，分別為大（l）、常規（lg）、?。╯）。從下圖可以看出區別較大的是泰語和阿拉伯語的字型高度相差較大，可利用相對合理的行高尺寸進行匹配，比如泰語字型較高可使用大（l）尺寸作為文本行高，阿拉伯語字型較低可使用?。╯）尺寸作為文本行高。
設計師在設計界面時經常遇到文本與組件的組合排版方式，但是其中會有比較多的“坑”，設計師們很容易不小心就陷入“坑”中。舉個例子，比如設計師們會為了更加美觀會把組件插入一段文本中間中進行混合排版，這種組合方式有幾個比較大弊端。第一不同語種有不同語法順序，比如法語形容詞的后置，日語里動詞的后置。第二復數問題，在英語里面，每個名詞都有一個單數形式和一個復數形式，比如One picture復數是Two pictures。但在俄語里面，復數有三種可能的形式。在法語里面，有不少單詞變成復數之后拼寫也會改變。所以，如果用戶要在句子中間輸入數字這種設計就可能造成語法錯誤。第三有些語言里面，單詞是區分陰陽性的。比如在法語里面，形容詞也是有陰陽性形式的。所以如果你在句子中間插入一個下拉菜單框，那么可能又會造成語法錯誤。
產品國際化題材比較大涉及到的內容也會比較廣，可能需要考慮的不僅限于文本適配，還需要考慮很多的因素比如說各國的文化差異、本地格式、地區標準等等，所以今天主要站在文字適配的角度給大家分享幾個做國際時需要關注的小點。
本篇文章主要是網頁中文字系統初識，網頁中的文字雖然看起來比較簡單但是每個內容板塊拆分開都是值得深挖的。比如說文字結構、如何結合印刷理論應用到網頁排版中、解刨多語言適配等等吧。本片文章還是秉著啟發的態度與大家進行網頁文字系統的探索，希望大家能夠可根據此篇文章結合工作中實際案例舉一反三，更深入地探索相關內容。在這里再次強調一下產品國際化方面內容，互聯網信息的快速交流與傳播使得人與人的連接越來越容易，很多產品進入海外市場是必經之路，大家可提前做好相關知識儲備，還是那句話也希望自己后續可以多歸納總結與大家展開探討分享。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
這里的圖片選擇要突出核心內容且一定要高質量，不要選擇雜亂無章或與主題無關的低質量圖片
結合頁面表達需要，選擇合適的配圖并做融合或出界的設計，會讓畫面極具吸引力和強烈的設計感。
當畫面主要以高質量圖片吸引用戶注意時，盡可能的利用更大展示面積，這樣會顯得更加高級和有視覺沖擊力。
這里的色塊要注意跟圖片的主色調保持相近，可以直接吸圖片上的顏色然后找找鄰近色就好了，色環上 30°區間內的顏色就比較和諧。
這里的形狀建議不要太過于復雜，用一些基本圖形就可以，比如圓點、方塊矩形之類的，增強畫面的形式感
這里的文字、圖案或不規則形狀跟上面的技巧類似，都是起到裝飾的作用，但文字的話有時候還要注意識別性，比如文字比較緊湊的時候。圖案或形狀更多的是起到視覺引導的作用。
這個很好理解，就是以文字或形狀作為遮罩，增加畫面的設計感，文字盡量選擇粗體
這個技巧可能跟第 3 條有些沖突，其實這 2 個方法都是可以的，要根據頁面具體的排版情況靈活使用。
這個技巧也比較容易理解，一般會選擇飽和度較高的顏色應用在充滿活力的頁面上，增加畫面的沖擊力。
這個技巧跟上面的有些類似，只不過是以小面積疊加的形式，顏色一般選擇品牌色或主題色，與背景盡量有較大反差會更加容易出彩。
這個方法有一點需要注意的就是剪切的形狀不要過于復雜，一般用基礎圖形就好
以上，就是我總結的一些可以用來操作 UI 圖片的實用方法，這些方法可以使得作品變得更加有視覺感也更加專業。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
理解圖標，首先關注的是圖標本身的類型，在整個 UI 體系中，圖標基本就分成3個大類：
工具圖標：包含一定產品功能隱喻的簡化抽象圖形，代替文字節省界面空間，方便用戶理解
裝飾圖標：主要目的是用來裝飾界面的視覺元素，樣式大于功能，常用于節日活動中
啟動圖標：產品的啟動圖標，即用來在系統中打開該產品的圖形按鈕，基本以自身 LOGO 為主
在 B 端項目中，應用最廣泛的必然是工具圖標，而裝飾、啟動圖標卻鮮有露面機會。但出現的少，不代表沒有，解釋工具圖標前，我們先優先講解下裝飾和啟動圖標在什么情況下會出現。
其中，SAAS 類服務就有很多會重點強調品牌、情感化設計的案例，例如大家比較熟悉的阿里云和騰訊云。項目中就大量啟用 3D 化的裝飾圖標提升界面的質感。
啟動圖標則會應用在一些比較大型的項目里，當項目出現了很多下級功能模塊或類似插件的體系時，就會采取使用應用圖標的方式作為入口。
比如 Figma 也是一個 B 端工具，它的插件列表中就可以看見不同的啟動圖標。還有類似 Slack、Invision、Teambition 等產品，一個龐大的產品生態就必然會衍生出強化不同子產品身份的需求，就自然而然會用到啟動圖標了。
最后，就是我們熟知的工具圖標了，前兩種圖標，在前期畫不好不要緊，畢竟這類規格的產品會有經驗更豐富的設計或總監坐鎮，新手當個切圖仔即可……
但是工具圖標，重要性就不言而喻了，B 端項目對工具圖標的需求非常大，幾乎每個組件中都會包含圖標。
雖然今天網上有非常豐富的圖標素材庫，但在形式各異的 B 端項目里依舊是供不應求的，各種行業特有的功能、實物、隱喻，只能設計師自己完成。
B 端設計師在圖標設計領域的主要工作，就是確定圖標樣式、設計圖標、導出切圖。下面的分享我們也會主要圍繞工具圖標展開。
工具圖標的應用主要包含兩個部分，線性圖標和面性圖標。
這里再提圖標風格，不是把以前的知識點重新講一遍，而是要強調 B 端圖標的特殊性。和 C 端相比，B 端圖標的實用屬性更高，并不需要過多凸顯本身的視覺風格。
所以，工具圖標中，使用大量漸變、插畫、投影的類型都要排除掉，它們對 99.9% 的項目都只會造成體驗的負影響，不要被網上的追波風飛機稿給帶偏。
適合 B 端項目的工具圖標只要應用最基礎的線性和面形風格即可，一定要劃分出差異，應該只包含圓潤、纖細、尖銳這幾種。
很多人好奇線性和面形圖標在 B 端設計中有什么使用上的差異呢？答案是沒有差異。
線性和面形的使用，純粹看設計師在當前場景判斷哪個合適用哪個，只要保證對應圖標風格統一即可。
不過如果遇到一些比較特殊的情況，比如要表現各類設備的復雜圖標，那用線性的做法還是相對合適和簡單一點。
對 B 端設計來講，獨立設計圖標的步驟是必不可少的，應該掌握的圖標規范還是必須要懂的。
我們雖然沒有 C 端那么多風格和技法的拖累，但想畫好 B 端圖標卻多出了其它難點，那就是一個頁面中出現的圖標實在是太多了。
這就引發了我們要講的第一個規范要點 —— “統一性”，所有同規格類型圖標具有一致性的特征，這些特征包含了：
粗細一致：首先使用統一的描邊、線段粗細參數
圓角一致：使用一致的圓角數值，不要一下尖角一下圓角
透視一致：使用接近的透視角度，不要有的側視有的正視圖
大小一致：視覺的大小保持一致，有均衡的大小感受
如果不能保證統一性的基本要求，那么整個頁面看起來就會非常的廉價、業余。很多新手處理 B 端項目就是應用了多套素材庫圖標，它們的細節完全不一樣，統一性當然無從談起。
而讓整套圖標保持統一性，是相當有難度的，其中最難的一點，就是如何讓一套圖標的大小均衡。雖然我們要對每套圖標確定一個固定的尺寸，但不代表圖標實際圖形的長寬數值是完全一致的。
幾何圖形對視覺有一定的欺騙性，有不同的大小體驗，比如下方案例（魷魚游戲亂入？）：
所以，基于這樣的特性，每個圖標本身都包含了兩層屬性，圖標的占位尺寸和視覺尺寸。占位尺寸指它在界面中的實際占地大小，是透明白的，排版的時候以這個尺寸作為實際的邊緣來測量。
而視覺尺寸，則是在占位尺寸下圖標圖形的實際大小，這個大小是帶給我們實際視覺感受的部分。一套圖標的不同圖形必然視覺尺寸是各不相同的，我們用占位尺寸包裹它們來方便我們進行統一的應用。
所以，使用成熟的圖標素材必然會發現圖形周邊還會有透明的空白區域。當然，不同的素材，這個留白也是有區別的，下一個小節就會解釋。
最后要聲明一點，一套項目中可以包含多個規格（2-5個）的工具圖標，比如導航用的圖標比普通工具圖標更復雜一點，設計師只要保證每種規格保持的統一性即可。
圖標越多，大小的控制越困難，所以專業的圖標庫繪制就必然會應用圖標的柵格系統進行輔助。
在 Ant 的體系中，一個基于柵格的圖標實際包含3層，背景層、格線層、圖形層。
背景層，即圖標展位尺寸，需要先確定出這個元素的大小，然后才是里面的繪制區域。通常，柵格系統會為邊緣預留 1-4 像素的內邊距（出血位），正所謂四周留一線，日后好相見。
格線層，則是使用的柵格線段，也是最重要的部分。格線層通常由 4 個基本圖形構成，包含正方形、圓形、水平長方形、垂直長方形。
這四個圖形的長寬大小不一，原因是為了對應幾何圖形視覺尺寸不同的特征。把它們并列排列，就可以發現它們的視覺大小非常接近。
這些格線的作用，就是提前幫我們確定好視覺比例，幫助我們快速繪制相同圖形類型的圖標。
但是，不是完美符合這四個圖形要求的圖標該怎么辦，總不能格線把所有輪廓都給你實現出來吧？
格線的另一層作用，也就是最重要的作用，其實是一個用來做測量的工具，而不是輪廓依據。在幾何視覺差中，最基礎的大小原理是占用面積越大的圖形，尺寸感受越大。所以，長寬一致的正方形大于圓形，圓大于三角形。
所以當我們繪制的非常規圖形，和類似格線進行對比時，長寬缺少的一側，就要由另一側增加數值來填補它的面積。
比如下圖 Ant 官方的電腦圖標，它的寬是橫向矩形，但是中間區域面積較小，所以增加了高度進行平衡。
再看一些其它的案例
這一步沒有固定的參數使用技巧，設計師需要將完成的圖標置入到其它圖標旁邊進行調試，確保尺寸是合適的。
格線只是一個圖標大小設置的參考工具，一切以最終效果為標準。
理解完圖標的基本規范，就到圖標的使用邏輯了，解決一些常見的設置誤區。
圖標該做多大的，這是目前被問到最多的問題。本來應該是非常簡單的一件事，但很多工作多年的設計師也搞不清楚。
仔細捋了捋，罪魁禍首就是 AntDesign 這套規范中對圖標畫布的解釋了。
要重點強調，Ant 設計圖標的意圖，和一般項目的是完全不同的。Ant 作為一套龐大的開源項目，它的圖標核心特征之一就是 —— 適應性。
這些圖標要被應用到各種不同的設備、顯示器、系統中，圖標尺寸會用多大，在幾倍圖環境顯示全都是不確定的。所以圖標一開始按越大的規格完成，后續實際應用中的縮放、匹配也就越容易，適應性越高。
但是，在我們自己的項目中，這種做法是完全沒有必要的，1024 圖標的負面影響包含：
像素數過多使得數值的制定難度大大提升，不管是元素尺寸還是描邊粗細
矢量圖形源文件進行縮放很容易發生錯位，提前輪廓化會破壞源文件
縮放圖標后描邊的數值往往會出現非整數和 0.5 的狀態，虛邊問題嚴重
在常規項目里，一套項目是可以包含不同尺寸和規格的圖標的，而不是我們做一套相同風格的圖標在整個應用中無差別使用。
這也意味著，每個圖標在產品中的使用場景通常只有一個尺寸，不需要去面臨縮放的情況。即使需要縮放，也只是這套圖標中的少數幾個需要，或者相對特殊的項目。
所以，圖標尺寸設定，就是根據當前位置合適的尺寸來制定?？梢允褂盟夭脑谝呀浽O計好的布局中嘗試多大的數值合適，然后創建同樣的數值即可（盡量以4的倍數為標準）。
我們知道圖標的素材非常豐富，不管是 Iconfont、IconPark 還是 Iconsearch 等網站，都提供了海量的素材。但是只要稍微專業點的項目，往往素材庫都滿足不了，部分規格的圖標還是需要我們自己重新繪制。
所以說圖標素材就完全沒用了嗎？當然不是。
圖標的正確用法是作為一種快速試錯的參照物，它可以幫助我們實現：
參考圖標的具體尺寸在哪個數值最合理
參考當前場景使用面性還是線性的風格更合理
參考圖標的設計風格是圓還是尖銳更合理
參考相關隱喻的圖形樣式哪種更合理
在項目的界面設計階段，我們一向建議優先使用外部的素材，尤其是 IconPark 這種比較統一，還可以快速調節圖標樣式的工具網站。
這個過程即使素材找不到和寓意一致的也沒關系，用相近的圖標替代就可以。等到頁面布局基本完成以后，最后再集中精力對需要繪制的圖標重畫一遍（甚至是在開發階段繪制）。
通過別人的圖標來快速匹配尺寸、風格、樣式，會幫助我們節省非常多的時間，也有助于我們設計出更專業、美觀的圖標。
另外，就是針對項目一些偏小尺寸的通用圖標，就可以比較放心的應用素材，例如翻頁的左右、更多、下拉、搜索等等。
圖標的尺寸、樣式都確定了，最后就是關于圖標的色彩和不同狀態的制定了。
前面講過，B 端項目對圖標的裝飾屬性沒有那么迫切，所以正常情況下，太花哨的圖標是要盡量避免的。彩色、漸變色、投影，都不應該在這個情況下胡亂使用。
常規的圖標只要使用中性色即可，而需要特別對待的圖標，色彩可以從主色或者輔助色中選取。比如需要高亮顯示的打勾或者打岔。
當然，如果項目涉及到一些特殊的工具圖標，類似工廠、工業領域表達實體設備的擬物圖標，可以打破這個原則。但是，同樣避免這套擬物圖標的每個圖標用色不同，盡量只使用 3 種以內的顏色完成擬物的填色。
同時色彩的使用還有一個重要的意義就是對圖標不同狀態的呈現，部分圖標會承擔按鈕的功能，包含默認、選中兩個基本狀態。
普通權重的圖標，未選中狀態可以在默認色彩基礎上使用透明度來實現。
高權重的圖標，則可以在選中的狀態替換色彩，或者更改圖標的類型，將原本的線性更改成面形并填充色彩制造反差。
完成所有圖標的設計以后，最后一步就是切圖和導出了，這決定你的圖標能不能被正確運用到線上項目中。
在一套專業的 B 端項目中，已經設計好的圖標是設計規范的 “資產” 內容之一。圖標的文件不能散落在項目的各個界面里，而是在規范頁面中有統一的整理和收納。
這種做法的流程是，先在軟件的規范庫中創建對應的圖標組件（ Symbol / Compoent ），然后再在具體頁面中應用，方便后續的統一管理和修改。
而在這個過程中，我們也需要對圖標有正確的命名方法，來確保團隊調用、檢索圖標的效率。通常，我的圖標命名規范如下：
尺寸 / 類型 / 圖標名-狀態
示例：
48px/導航圖標/表盤頁-默認
24px/一般圖標/搜索-默認
“/” 號的引用主要是方便軟件中對組件層級進行劃分，而我調用圖標的規則勢必是先從尺寸開始，再選擇對應規格，最后類型和狀態。
提前命名也是方便后續我們切圖和導出，但要提及一點，圖標的命名不要追求英文化，因為我們的詞匯量不可能實現正式的英文命名規則，只會寫一堆大家都看不懂的單詞。
而開發在使用我們的圖標切圖時，也不會用我們之前取的命名，會根據自己的命名習慣重新命一遍，寫個讓他能看懂的名字遠比用亂七八糟的英文強。
接下來，就要解釋切圖的規則了。很多沒有經驗的設計師切圖就只是隨手加個切片，然后上傳藍湖發給開發自生自滅了，這是一個非常不合理的操作。
再或者，強行使用 Fonticon 格式，而不管實際情況如何，造成最后實現效果完全不同步或實現不了。
切圖是通過前端調用并在瀏覽器中進行顯示的圖形，而要被瀏覽器正常顯示，就有必要了解適合使用的切圖格式。
圖片的格式包含位圖和矢量兩種，位圖是通過記錄像素色值的圖形格式，假設一張圖是 100*100 像素，那么記錄 1W 個像素點的色彩，所以無法支持無損縮放。而矢量則是通過記錄點線面的坐標繪制出顯示圖形的格式，可以支持自由縮放。
理論上，矢量格式是最佳的圖標切圖格式，但是它的限制同樣有很多，例如：
無法記錄漸變色
導出輪廓容易有錯誤
無法記錄擬物圖形
無法記錄投影元素
前面說過，普通項目中同一圖標是很少出現一會兒大一會兒小的需求，所以矢量最大的特征無損縮放，往往就不需要我們去考慮。矢量格式切圖的主要出發點是用來應對移動端顯示器 1x、2x、3x、4x 等不同倍率縮放的問題，而不是網頁端的基本使用。
當一套項目中出現了矢量格式無法覆蓋的圖標時，那么即用矢量切圖，又用位圖，就會顯得非常的混亂。只有類似 LOGO 等圖形元素，才需要考慮 SVG 格式，而不是一看到圖標就上。
所以，最適合切圖的格式就是位圖的 PNG 格式，一方面它是無損的，另一方面它支持透明背景，在切圖應用上可以完美和設計稿結合，而這是其它大多數位圖格式不具備的特征。
當每次項目完成以后，并不需要通過藍湖來實現切圖的導出，如果切圖文件分散在各個項目頁面里，那么一定會有很多圖標被遺漏，尤其是圖標的不同狀態切圖。
所以，最理想的切圖形式，就是將所有圖標完成整理和命名以后，一起框選，然后導出成 PNG 格式，再同步給程序員即可。
以上就是關于 B 端圖標應用的所有知識點了。后續會將這些內容進行分拆，更新到原子核系列課程中去，會有更細節的案例說明。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
一、前言
隨著互聯網的快速發展，B端行業也逐漸崛起，很多企業管理中使用的軟件我們通常稱其為B端管理系統，而在B端系統中“權限管理”是必不可少的功能，不同的系統中權限的應用復雜程度不一樣，都是根據實際產品以及需求情況而設置合理的權限。而我們現在對于權限的設置基本上都是建立在RBAC權限模型上的、擴展的，下面我會通過介紹RBAC權限模型的概念以及結合實際業務情況列舉權限設置的應用。
二、什么是RBAC權限模型？
RBAC是Role-BasedAccess Control的英文縮寫，意思是基于角色的訪問控制。RBAC認為權限授權實際上是Who、What、How的問題。在RBAC模型中，who、what、how構成了訪問權限三元組，也就是“Who對What進行How的操作，也就是“主體”對“客體”的操作。其中who是權限的擁有者或主體（例如：User、Role），what是資源或對象（Resource、Class)。
簡單的理解其理念就是將“角色”這個概念賦予用戶，在系統中用戶與權限之間通過角色進行關聯，以這樣的方法來實現靈活配置。
RBAC其實是一種分析模型，主要分為：基本模型RBAC0、角色分層模型RBAC1、角色限制模型RBAC2和統一模型RBAC3。
RBAC權限模型是基于角色的權限控制。模型中有幾個關鍵的術語：
用戶：系統接口及訪問的操作者
權限：能夠訪問某接口或者做某操作的授權資格
角色：具有一類相同操作權限的用戶的總稱
RBAC0是RBAC權限模型的核心思想，RBAC1、RBAC2、RBAC3都是在RBAC0上進行擴展的。RBAC0是由四部分構成：用戶、角色、會話、許可。用戶和角色的含義很簡單，通過字面意思即可明白，會話：指用戶被賦予角色的過程，稱之為會話或者是說激活角色；許可： 就是角色擁有的權限（操作和和被控制的對象），簡單的說就是用戶可使用的功能或者可查看的數據。
用戶與角色是多對多的關系，用戶與會話是一對一的關系，會話與角色是一對多的關系，角色與許可是多對多的關系。
RBAC1是在RBAC0權限模型的基礎上，在角色中加入了繼承的概念，添加了繼承發的概念后，角色就有了上下級或者等級關系。
舉例：集團權責清單下包含的角色有：系統管理員、總部權責管理員、區域權責管理員、普通用戶，當管理方式向下兼容時，就可以采用RBAC1的繼承關系來實現權限的設置。上層角色擁有下層的所有角色的權限，且上層角色可擁有額外的權限
RBAC2是在RBAC0權限模型的基礎上，在用戶和角色以及會話和角色之間分別加入了約束的概念（職責分離），職責分離指的是同一個人不能擁有兩種特定的權限（例如財務部的納入和支出，或者運動員和裁判員等等）。
用戶和角色的約束有以下幾種形式:
互斥角色：同一個用戶在兩個互斥角色中只能選擇一個（也會存在一個用戶擁有多個角色情況，但是需要通過切換用戶角色來實現對不同業務操作）
基數約束：一個用戶擁有的角色是有限的，一個角色擁有的許可也是有限的
先決條件約束：用戶想要獲得高級角色，首先必須擁有低級角色
會話和角色之間的約束，可以動態的約束用戶擁有的角色，例如一個用戶可以擁有兩個角色，但是運行時只能激活一個角色。
例如：iconfont和藍湖的用戶與角色就采用了約束的概念，超級管理員只允許只有一個
RBAC3是RBAC1與RBAC2的合集，所以RBAC3包含繼承和約束。
二、為什么要引用RBAC權限模型？
RBAC中具有角色的概念，如果沒有角色這個概念，那么在系統中，每個用戶都需要單獨設置權限，而系統中所涉及到的功能權限和數據權限都非常多，每個用戶都單獨設置權限對于維護權限的管理員來說無疑是一件繁瑣且工作量巨大的任務。
而引入角色這個概念后，我們只需要給系統設置不同的角色，給角色賦予權限，再將用戶與角色關聯，這樣用戶所關聯的角色就直接擁有了該角色下的所有權限。
例如：用戶1~用戶8分別擁有以下權限，，不同用戶具有相同權限的我用不同的顏色做了區分，如下圖：
在沒有引入RBAC權限模型的情況下，用戶與權限的關系圖可采用下圖的楊叔叔展示，每個用戶分別設置對應的權限，即便是具有相同權限的用戶也需要多次設置權限。
引入RBAC權限模型及引入了角色的概念，根據上面表格的統計，用戶1、用戶3、用戶5、用戶8擁有的權限相同，用戶2、用戶6、用戶7擁有相同的權限，用戶4是獨立的權限，所以我們這里可以根據數據統計，以及實際的需求情況，可以建立三個不同的角色，角色A、角色B、角色C，三個角色分別對應三組用戶不同的權限，如下圖所示：
對應的上面的案例表格我們就可以調整為含有角色列的數據表，這樣便可以清楚的知道每個用戶所對應的角色及權限。
通過引用RBAC權限模型后，對于系統中大量的用戶的權限設置可以更好的建立管理，角色的引入讓具有相同權限的用戶可以統一關聯到相同的的角色中，這樣只需要在系統中設置一次角色的權限，后續的用戶便可以直接關聯這些角色，這樣就省去了重復設置權限的過程，對于大型平臺的應用上，用戶的數量成千上萬，這樣就可避免在設置權限這項工作上浪費大量的時間。
三、引入用戶組的概念
我們依舊拿上面表格案例舉例，雖然前面我們應用的RBAC權限模型的概念，但是對于大量用戶擁有相同權限的用戶，我們同樣的也需要對每個用戶設置對應的角色，如果一個部門上萬人，那么我們就需要給這個部門上萬人分別設置角色，而這上萬其實是具有相同的權限的，如果直接采用基礎的RBAC權限模型的話，那么面對這樣的情況，無疑也是具有一個龐大的重復的工作量，并且也不利于后期用戶變更的維護管理，那么針對相同用戶具有相同的權限的情況，我們便可以引入用戶組的概念。
什么是用戶組呢？用戶組：把具有相同角色的用戶進行分類。
上面我們的數據表格案例中的用戶1、用戶3、用戶5、用戶8具有相同的角色A，用戶2、用戶6、用戶7也擁有相同的角色B，那么我們就可以將這些具有相同角色的用戶建立用戶組的關系，拿上面的案例，我們分別對相同角色的用戶建立組關系，如下：
用戶1、用戶3、用戶5、用戶8→建立用戶組1
用戶2、用戶6、用戶7→建立用戶組2
因為用戶4只有一個用戶，所以直接還是單獨建立用戶與角色的關系，不需要建立用戶組，當然盡管只有一個用戶也是可以建立用戶組的關系，這樣有利于后期其他用戶與用于4具有相同的角色時，就可以直接將其他用戶添加到這個用戶組下即可，根據業務的實際情況而選擇適合的方案即可。
通過案例表格的變化我們就可以直觀的看出權限設置變得清晰簡潔了，通過第用戶組賦予角色，可以減少大量的重復的工作，我們常見的企業組織、部門下經常會出現不同用戶具有相同角色的情況，所以采用用戶組的方式，便可以很好的解決這個問題，給具有相同權限的用戶建立用戶組，將用戶組關聯到對應的角色下，此用戶組就擁有了此角色下的所有權限，而用戶是屬于用戶組的，所以用戶組下的所有用戶也就同樣的擁有了此角色下的所有權限。一個用戶可以屬于多個用戶組，一個用戶組也可以包括多個用戶，所以用戶與用戶組是多對多的關系。
四、引入權限組的概念
權限組與用戶組的原理差不多，是將一些相對固定的功能或者權限建立組的關系，然后再給此權限組賦予角色，目前我所接觸的B端項目中使用權限組的概念的比較少，可簡單的看一下關系圖
四、功能權限和數據權限
B端系統中一般產品的權限由頁面、操作和數據構成。頁面與操作相互關聯，必須擁有頁面權限，才能分配該頁面下對應的操作權限，數據可被增刪改查。所以將權限管理分為功能權限管理和數據權限管理。
功能權限管理：指的是用戶可看到那些模塊，能操作那些按鈕，因為企業中的用戶擁有不同的角色，擁有的職責也是不同的。
數據權限管理：指的是用戶可看到哪些模塊的哪些數據。
例如：一個系統中包含多個權責清單（清單1、清單2、清單3），系統管理員能對整個系統操作維護，也就可以對系統中的所有清單都能操作（增、刪、改、查）；假如分配給總部權責管理員的是清單1，那么他將只能對清單1進行操作（增、改、查）；普通用戶也許只有查看數據的權限，沒有數據維操作的權限（查）,這里的操作是系統中所有可點擊的按鈕權限操作，列舉的增刪改查只是最常見的幾種操作而已。
五、實戰案例總結
我目前所做的項目是一個關于權責管理平臺的B端系統，關于系統中的權限需求我這里簡單的介紹一下，并采用上面所總結的RBAC權限模型對實際業務需求進行設計分析：
01：不同的區域管理員的權限各不相同（說明會存在不同的用戶具有不同的權限，那么我們就可以采用角色對其進行規范）
02：有大量的用戶具有相同的權限（例如組織、部門等）（說明存在相同權限的用戶，那么我們就可以采用用戶組的概念）
03：上級管理員擁有下級人員的所有權限（說明存在繼承關系）
04：不同用戶所看到的數據和能編輯的數據不同，一些機密性的數據只允許部分人員看或者編輯（說明存在約束）
05：會存在臨時性的用戶（說明需要支持新建新角色）
06：同一用戶會存在多個角色（多角色求合集或者切換用戶角色）
簡單說明一下，我所做這個項目的人員管理是在另外一個系統中管理的，權責平臺只是調用另外一個平臺的組織結構樹即可，所以權限設置模塊沒有做人員管理的模塊
根據上面對需求的分析，整個權限管理模塊中我們需要建立用戶組管理模塊、功能角色管理模塊、業務（數據）管理模塊、權限設置模塊，下面就對每個模塊做更細致的頁面展示設計分析
用戶組管理主要是對具有相同權限的用戶分類建組，所以頁面中我們需要有新建用戶組的功能，每個用戶組下我們需要關聯對應的組織、部門、崗位、人員，讓這些具有相同權限的用戶在同一個用戶組下，如下圖：
B端項目中一般會建立幾個默認的角色是不支持用戶修改、刪除的，例如最常見的系統管理員，而也會需要有其它角色的需求，所以此模塊需要支持用戶新建角色，功能角色是對大模塊的頁面和操作的權限設置，操作權限的顆粒度可以細分到每個頁面的每一個按鈕的操作，如下圖：
業務角色是對頁面中的數據餓查看的權限設置，而對于系統中的普通用戶查看系統的權限是常用不變的，所以我們考慮默認有一個普通用戶的角色，其它業務角色用戶根據實際需求情況自行建立即可，由于我們權責系統的特殊性，我們需要滿足用戶對部分數據可編輯且對部分數據的字段可編輯，按照常理來說，編輯的操作行為是屬于功能權限的設置，但是這里的操作行為是建立在數據的基礎之上的，所以如果把這里對數據的操作權限在功能角色模塊中設置，就會顯得混亂，所以我們直接在業務角色模塊中加入對數據的可編輯權限，這里在設置的時候更方便靈活
權限設置模塊只需要設置權限分配的對象，選擇對應的用戶或者用戶組，關聯對應的功能角色和業務（數據）角色即可，這樣就形成了一條完整的閉環的權限設置
對于06同一用戶會存在多個角色，我們系統是采用切換角色的模式來實現的，因為不同角色中存在互斥的情況，以及所涉及的領域不同，操作權限差距較大，求合集不利于控制權限，所以只能采用切換的模式實現
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
隨著用戶體量的變化和短視頻平臺的規范化，抖音的產品定位也相應的變成了“抖音，記錄美好生活”。在往后用戶量不會再有大規模變化的增長，而外部競爭例如快手等依然不斷增長的情況下，抖音是如何發展穩固自己的短視頻“一哥”地位呢？
短視頻行業在2016年之后呈井噴式增長，移動端時代加速了短視頻行業的發展，近年短視頻平臺不斷在商業模式上進行探索，一方面成為創新性新媒體營銷平臺，另一方面也結合直播帶貨迎來新的增長點，短視頻營銷的市場模式逐漸受到認可，也成為短視頻媒體平臺的主要收入來源。
數據顯示，2020年中國短視頻市場規模已達到1408.3億元。
抖音、快手是目前短視頻行業頭部平臺，但抖音在社交和移動端支付等業務發展加持下，規模優勢逐漸拋開快手。關于短視頻用戶最常使用的產品調查結果顯示，抖音以70.9%的占比排名第一，快手占比52.3%。
面對競爭，快手積極尋求資本化，但其營收快速增長的同時伴隨著虧損持續擴大，高收入由高成本帶來，商業轉化能力并沒有較大提升，長期來看發展模式存在風險。
抖音及快手在短視頻領域頭部優勢明顯，快手發展起步早，用戶基礎深厚，且積極發展電商和游戲直播等業務，成為頭部典型代表；抖音雖然發展時間較短，但追趕勢頭明顯，入駐KOL數量多，帶貨推廣情況良好，也成為用戶最多的短視頻平臺。
數據顯示，受訪用戶最常使用短視頻平臺排名中，抖音以45.2%的占比排名第一，快手和嗶哩嗶哩分別占比17.9%及13.0%，排名第二及第三。
其他字節系短視頻產品如西瓜視頻、抖音火山版等占比也達到4.3%和1.6%。抖音憑借其內容分發機制優勢成功俘獲用戶的青睞，成為用戶最常使用的短視頻應用；同時，快手用戶黏度較低，逐漸被抖音拉開差距，并且受到其他平臺追趕。
2014年8月，中央安排部署新措施，宣布大力實施創新驅動發展戰略， 積極推動傳統媒體數字化、網絡化、智能化發展。2016年，為貫徹中央部署，各種創新型短視頻app的上線了，短視頻形式受到越來越多媒體和創作者的關注。這對于短視頻app市場無疑提供了一個巨大的市場開發空間。
短視頻的快速傳播使其市場規模也實現了高速擴容，各大短視頻在創造巨大流量的同時，其市場規模也在飛速增長。根據中國網絡視聽節目服務協會數據，2018年我國短視頻行業市場規模達到467.1億元，較2017年的55.3億元增長744.7%。
數據顯示，2020年中國短視頻市場規模達到1408.3億元，繼續保持高增長態勢，2021年預計接近2000億元。近年短視頻平臺不斷在商業模式上進行探索，一方面成為創新性新媒體營銷平臺，另一方面也結合直播帶貨迎來新的增長點，市場仍將進一步發展。
截至2018年12月底，我國短視頻用戶規模達6.48億，同比增長58.05%，高出長視頻用戶0.36億，網民使用比例達78.2%；2019年6月，中國短視頻行業的用戶規模達8.57億人。
同時，短視頻用戶使用時長占總上網時長的11.4%，超過綜合視頻(8.3%)，成為僅次于即時通訊的第二大應用類型。
2020年，短視頻月總使用時長同比上漲1.7倍，全面超越在線視頻，成為僅次于即時通訊的第二大行業。在移動互聯網總使用時長增量中，短視頻占了33.1%，即時通訊占了18.6%，綜合資訊占了9.7%。2020年已超7億人，預計2021年增至8.09億人。
通過以上兩個產品歷史迭代情況可以看出來，雙方在功能上都越來越相同，這也是基于用戶體驗改進和市場變化而衍生出來的：
抖音：可以明顯的看到抖音的更新重點放在了用戶體驗和更新社交屬性上，除了優化產品，修復問題，多次大量上架新增各種特效、道具、濾鏡和活動，提供了工具輔助內容制作，大大提高了其創造性、便利性、娛樂性和用戶生產內容的動力。
另外，抖音的“朋友”板塊新增了產品的社交屬性，讓其定位多元化，不局限于單一的短視頻功能，也提高了用戶使用產品的可能性?；诨ヂ摼W+的大數據時代，抖音也不斷更新算法，根據用戶日常體驗，推出了智能搜索和發現優化。
快手：由于產品定位不同，所以快手并沒有跟抖音一樣更新豐富的濾鏡、道具等功能，產品更新日志絕大多數都是“問題修復以及性能提升”和“優化用戶體驗”兩條。
在8.0.0的版本是快手產品更新最為關鍵的一次，新增“多入口內容”、“沉浸式上下滑體驗”、“瀑布流”，此次更新之后快手用戶的日均使用app時間提高了30%。而在之后的更新中，上下滑體驗也被應用于發現頁和同城頁，旨在留住用戶，獲取用戶使用時間，開發新用戶。
1）用戶地域分布
抖音：
source：百度指數
快手：
source：百度指數
數據顯示，兩個產品的用戶地域主要都是分布在華東、華南地區，呈現由東到西、由南到北、由沿海到內陸擴散的局勢。
這很大一部分程度上是因為沿海地區的經濟發展迅速、生活節奏快、工作壓力大導致其居民易產生焦慮、焦躁、空虛等現象，表達輕松、搞笑、美好形象的短視頻的出現可以讓他們有短暫的放松時間和對自己的精神壓力的部分釋放，這極大地促使他們對短視頻App有了更高頻率的使用。
雖然兩款產品的用戶地域分布大相徑庭，但是還是有一定的區別：快手相對于抖音其用戶比例中北方用戶占很大一部分，比如山東、河北等地。
而抖音則更偏向南方用戶，這主要是因為用戶性格跟產品定位的契合度的關系。北方人性格豪爽，重情重義，更多的偏愛生活化的東西，喜歡真情實感接地氣的表達真善美；南方人追求精致、美好的生活的狀態。差異化決定了兩款產品有不同的適用人群。
2）年齡和性別分布
抖音：
source：百度指數
快手：
source：百度指數
數據顯示，兩款產品都具有明顯的年輕化特點，用戶人群年齡段主要分布在20～39歲之間，這一部分群體主要是90后、00后，新社會下成長起來的具有新思想的自由個體，接受新事物的能力強，富有創造性，他們可以快速獲取并進行信息更替和傳播。
就成長層面來看，這部分人群也處在人生拼搏的階段，壓力相對較大，更容易產生焦慮的心理狀態，短視頻可以暫時性在一定程度上減輕他們的焦慮感，也可以豐富他們的生活，滿足他們足不出戶在家里就可以了解熱點資訊的需求。而該部分人群也逐漸走向社會經濟舞臺中央，客觀上也有利于抖音帶貨等商業模式的開展。
3）用戶興趣
抖音：
source：百度指數
快手：
source：百度指數
可以看出來兩款產品用戶在興趣愛好上基本一致，影視音樂、軟件應用、資訊類的視頻播放量較高，其他各分類項目的占比也比較穩定，影視音樂一直處于領先地位。
其中醫療健康的占比增速最大，這跟近幾年的新冠疫情有直接的關系，也由于生活水平的提高和理念的進步，人們更加關心自己的身心健康。
總的來說，兩款產品的用戶差距在逐漸縮小。
抖音：最初的目標用戶是潮流酷炫的年輕群體，平臺最初的內容運營是往偏時尚方向布局，吸引高校年輕人進行創作，最早贊助的綜藝是“中國有嘻哈”這類以“潮為特征的節目。年輕的一二線地區的時尚人群是抖音的種子用戶。之后隨著用戶數的增長，平臺內容逐漸豐富，用戶群體（覆蓋區域、年齡分布）等分布更加均勻。
快手：快手最初沒有刻意進行內容引導，但是其普惠的流量分發方式對當時缺乏針對性的社交、娛樂產品的下沉市場用戶有極大吸引力，因此快手的種子用戶是由下沉市場（尤其是北方地區）的用戶構成。但是由于快手之后在垂直領域的突破，目前快手的用戶結構也比之前更為均衡。
左：抖音 右：快手
在快手8.0.0版本之后，首頁視頻也采用了沉浸式上下滑的模式，這一點也是借鑒了抖音的首頁，可以更快速直接的提供給用戶短視頻體驗，也更容易留住用戶。
點贊方式都采取了雙擊點贊或圖標點贊。
抖音的主頁面除了推薦列表，還有“朋友”和“附近”，而快手卻把“附近”這一模塊放在了底部的標題欄里面。
抖音左上角有專屬直播通道；快手放置了個人中心的入口，直播入口則放到了新建頁面里。
抖音評論展開視頻播放界面維持原狀，一部分視頻會被評論遮擋；而快手打開評論后，播放界面則會整體縮小至評論上方，雖然不會擋住視頻，但是由于太小可能會導致觀看效果不理想。
抖音在播放界面左滑會直接進入作者主頁查看詳細信息，而快手則會拉出作者其他的作品列表，如果要進入作者主頁需要點擊頭像才能進入。
關注圖標在彈出頁面也會顯示，但是抖音的更醒目。
抖音搜索界面有榜單排名可以直接查看熱點，方便接觸時尚資訊；而快手則放置了各項的分類條目，比較生活化。
抖音搜索欄有掃一掃功能，思維邏輯適合市面上很多app，用戶容易適應。
抖音在最新版本里“附近”欄目里新增了“學習”欄目，兩者可以切換；附近同城也新增了數據檢測和類似“朋友圈”的功能；快手在同城新增了“校友”這一玩法，社交屬性大大增加。
抖音在“消息”界面歸類了粉絲新增、互動消息、系統消息和私信四種基本通知，“可能認識的人“被歸類到了”粉絲‘中；快手直接在“消息”界面推薦了可能認識的人。
抖音群聊歸類在“消息”；快手把群聊放在了個人主頁。
抖音的輔助拍攝工具庫（濾鏡、特效等）相比于快手來說大很多，玩法也多樣。
總的來說，在瀏覽方式上，快手已經借鑒了抖音的“沉浸式”上下滑動的模式，但仍然保留了一些自己的東西，但是就作者體驗來看，產品形象為簡潔、方便的快手，反而越來越有一些畫蛇添足的味道：
消費者提出需求，生產者根據需求研發產品、完善產品、更新產品，而產品必須要在滿足消費者需求的同時給創作者帶來利潤，才能形成一個完整的閉環。其中產品質量決定了它所能帶來的利潤，而利潤又反過來直接決定了產品的走向。
下載量對比：
source：七麥數據
數據顯示，在去年11月到今年10月的時間里，抖音的下載量雖然處于波動狀態但是一直領先于快手的下載量，平均保持在180000左右，而快手一直保持在100000左右起伏不大。
收入量對比：
source：七麥數據
可以很明顯的看到，抖音的收入幾乎是快手的3～4倍，而短視頻平臺的收入主要來自于廣告收入、直播打賞收入和電商分成收入三個方面，而在其中，廣告和直播打賞的收入占總體收入的89%，盈利模式和收入結構不同：抖音重倉廣告VS快手重倉直播，這也反應了其商業變現成熟，但是多元化程度不夠的弊端。
抖音廣告收入占比80%：抖音中心化的分發機制，導致特別容易打造爆款，特別容易聚集流量打造名聲，因此廣告占有很大的優勢，而廣告的盈利模式有很大的利潤率，所以抖音的80%的收入都來自廣告。
抖音收入來源分配比重
快手直播收入占比60%：快手倡導粉絲經濟和社區文化，使得KOL與粉絲之間的粘性很大，因此做直播的利潤空間就顯得非常大，雖然沒有廣告收入的利潤多，但是收益平穩，也是快手的主要盈利方式。
快手收入來源分配比重
短視頻電商行業主要有三種運營模式：
1）產品電商發展歷程
抖音：
快手：
可以看出抖音相比于快手更先于鋪墊電商業務，而且在之后的產品上線、功能完善更替、迭代升級和營銷上面更頻繁也更為完善，這也是抖音充分發揮了大數據、大流量的作用。
在2020年10月抖音實現了電商業務的徹底閉環，也奠定了抖音在電商業務上超過快手的基礎。
2）服務定位
3）具體分析
生產群體：
快手：頭號主播、精通電商的主播達人、公會和線下個體賣家等。
快手的這些電商達人大多有一個共同的特點：粉絲數量在幾十到百萬不等，有一部分具有一定的帶貨經驗，甚至很多人本身就是淘寶中小店家入駐快手。比起頭部網紅，她們在直播展示、銷售技巧、促進成交等方面有著顯著的專業性。
抖音：以網紅達人為主．線下商家為輔。
目前在抖音上賣貨的主要仍是以網紅達人為主。據相關數據顯示，抖音達人、網紅主播帶貨的方式以拍攝短視頻為主，在視頻中放上同款衣服的鏈接，實現邊看邊買，但是這也對視頻的內容質量有很高的要求。
商品類型：
快手：商品類型多樣，涵蓋日用品、化妝品、衣服、食品等。
快手主播、用戶甚至商家賣的商品五花八門，其上架商品的屬性實在跟快手的產品定位及其用戶屬性不謀而合。
抖音：注重“調性”，商品最多的類型為衣服，而且是潮流穿搭。
抖音仍是很講究“調性”。相關報告顯示，抖音目前賣得最多的商品是衣服。而且是潮流穿搭，配上長得好看的帥哥美女的視頻帶貨，用戶很容易被種草安利然后拔草，同時通過補貼和發放優惠券的形式，刺激用戶下單。
大局來看兩款產品的銷售模式是基于其市場定位的：快手用戶購買商品，可能更多地是出于對主播的愛和信任，也就是信任電商；而抖音用戶購買商品，往往是由于視頻的內容足夠優質，也就是興趣電商。
總的來看，抖音重分析，內容分發去中心化。抖音在生產內容簽約了一批網紅、達人，通過MCN機構，持續穩定的輸出高質量內容，PGC覆蓋范圍廣，但是如何保證普通用戶不丟失掉自主生產內容的積極性，打造PGC+UGC完美結合的體系。
快手內容分發去中心化，重視普通用戶的UGC生產力，輕運營?？焓值靡嬗谌寰€城市的下沉用戶，而這部分用戶在生活中缺少表達的機會，但是具有表達欲望，所以造就了快手的內容生產主力軍。
由于當前的網絡用戶主力軍仍是90后、00后，年輕張揚、個性活潑的調性符合抖音的產品定位，再加之其運營的力度、體系的成熟和產業鏈的完整，所以抖音在大數據、大流量基盤的加持下，牢牢站穩了短視頻“一哥”的位置。
建議：
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
數據成為了日常工作的一大重要角色，越來越多的公司以數據驅動產品進行迭代。但令人困惑的是可視化圖表無處不矮，但卻給大家帶來了誤導。作者分享了一些簡單的思路與方法，以此來改善這些問題，希望對你有所幫助。
越來越多的公司以數據驅動產品進行迭代，從中我們能看出數據的重要性。
日常工作中，無論是匯報還是設計，都離不開圖表的使用。但令人困惑的可視化圖表無處不在，往往給人帶來誤導性，通過遵循下面這些簡單的思路和方法可以有效改善這些問題。
選擇錯誤的圖表類型，或默認使用最常見的類型，可能會混淆用戶對數據產生誤解。
一組數據可以有多種表示方式，具體類型取決于用戶希望看到的內容。
當數據中出現正負值時，要先確定基線的位置，再確定數據位置，將正值分布在基線上側（X軸）或右側（Y軸），負值分布在下側（X軸）或左側（Y軸）。
避免在基線的同一側同時添加正值和負值，造成用戶對圖表信息理解錯誤。
單看左側的條形圖，能發現B的值比D的值要多3倍以上，但在右側從零開始的條形圖中，實際差異要小得多。從零開始可確保用戶獲得更準確的數據展示。
對折線圖來說，如果始終將Y軸的比例限制為從零開始，一旦數據波動幅度很小，那整個折線圖會看起來很平坦，效果不明顯。
折線圖主要用來表現趨勢，根據給定時間的數據調整比例，并保持折線區域能占到Y軸范圍的三分之二。
折線圖是由一條條小線段連接組成，這些線段展示了在短時間內數據是如何變化的。當時間間隔很大或數據更新不頻繁時，就要慎重考慮是否使用折線圖。
例如想表示年收入，左側的兩個折線圖樣式都不太合適，每個月的收入是固定的數字，而折線圖展現的數據更像是收入的變化，相反右側的條形圖更適合來展示每月具體的收入。
平滑的折線圖可能看著很舒服，但它們歪曲了背后的實際數據，而且過粗的線條掩蓋了真正的節點。
當兩組數據出現X軸代表的信息相同但Y軸不同時，為節省空間我們可能會考慮用雙軸圖。
但大部分雙軸圖難以閱讀，只是感覺圖表上有很多數據，但遠遠沒有單個圖表展示的清晰。
餅圖是最受歡迎但經常被誤用的圖表之一。在使用餅圖時，首先要注意切片的數量最好保持在5-7片。
如果還有很多占比很小的切片，可以將這些全部歸到“其他”切片中。
如果沒有正確的標注，無論圖表設計的多好看都沒有意義。
直接在圖表上標注數據或信息對使用者來說更直觀，更節省時間和精力。
將數值放在切片上雖然很直觀，但可能會導致很多問題，例如左側餅圖數值的可讀性問題、切片太薄無法添加數值等，對比來看，右側餅圖添加標注的方式更合適。
餅圖切片的排序是一個很容易忽略的問題，將餅圖切片只是一個開始，通過合理的排序保證用戶清晰觀看圖表才是關鍵。
常見的排序方法是將面積最大的切片放在12點鐘位置，然后按順時針降序放置第二大的切片，以此類推。
同樣的建議適用于其他類型的圖表。盡量不要默認按字母順序排序，將最大值放在頂部(水平條形圖)或左側(對于垂直條形圖)，以確保最重要的值占據最突出的空間，減少視線運動和閱讀圖表所需的時間。
環形圖，又稱為甜甜圈圖,是餅圖的一種變體,本質是餅圖將中間區域挖空，用在多樣品間的多種數據的比較中。
雖然環形圖騰出中間區域來顯示額外的信息，但犧牲清晰度走極端會讓圖表變得毫無用處。
不必要的設計樣式不僅會分散注意力，還可能導致用戶對數據誤解并產生錯誤印象，圖表在設計上應避免：
顏色是保持數據可視化有效的組成部分，在設計時考慮3種調色板類型：
根據眼科研究中心的數據，大約每12個人中就有1個色盲，圖表只有在廣泛受眾可以訪問的情況下才是成功的：
確保圖表排版在傳達信息并幫助用戶專注于數據，而不是分散注意力：
這個簡單的技巧可以確保用戶能夠更有效地瀏覽圖表，而不會使他們感到緊張。
如果你的任務是將交互式圖表添加到Web和移動項目中，那么首要考慮問題是將使用什么樣的圖表？
基于定義的庫(Highcharts)進行設計將確保易于實現，并為我們提供大量的交互想法。
通過更改參數、可視化類型、時間線幫助用戶進行探索，得出最大價值化的結論。例如IOS Health結合使用了各種數據表示來發揮優勢。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
現代人的生活離不開應用程序，我們的手機中有著各種各樣的app幫我們處理各種瑣事。各大互聯網公司開發多種應用商店，努力使我們的生活變得有趣，但要想提高整體的用戶體驗，還需要注意五點，不然再好的app也會讓用戶放棄使用。
1.禁止使用大段的功能介紹
我們必須要提示一下：如果一個應用程序要在手機屏幕上發揮作用——必須簡單。這個應用需要使用冗長的功能介紹，才能讓用戶熟悉使用起來，那很可能是開發人員在這個版本中設置太多功能。用戶并不介意多次更新程序，適應新版本，但他們也不可能為了使用程序而閱讀長如圣經般的介紹。
2.牢記用戶需求
如果想要急于求成，跳過用戶調研，上線新的應用，那么失敗的概率會大大增加。大多數應用開發團隊都容易犯這樣的錯誤，只拿到了用戶發送給支持團隊的數據。通過分析數據，就能迅速確定用戶所需的功能，使用缺陷等，但是，總的來說，聯系支持團隊的用戶是那些產生挫敗感的人；那么99%（或更多）的用戶從來沒有和支持部門談過？難道你不愿意讓他們一直滿意，而是花費時間，只讓使用支持功能的1%用戶滿意？
即使你認為自己了解用戶需求，也需要與他們進行溝通。
3.使用屏幕技術
當人們花費了近萬元買了一部智能手機時，他們希望能使用手機上的所有功能。所以制作這款手機時沒有任何借口在視覺內容上偷工減料（或忽視任何技術能力）。這就是用戶花錢的原因，要想提高用戶體驗，就需要滿足用戶期望。
4.停用費時的設置向導
設置向導的本意是為用戶提供更好的內容，更能讓用戶獲取自己想要的。為了優化用戶體驗可以讓用戶填寫一些內容，但并不意味著暴露全部隱私。最好在需要時索取，而非提前取得全部數據。
5.減少通知次
每個軟件都想要發送通知，但是每一個通知都是必要的嗎？每隔兩秒鐘就有一些應用告知用戶一些無用消息，比如誰誰誰又發了微博，誰誰誰上線了，又或者誰誰誰開始直播了，可以根據用戶的興趣選取推送而不是一股腦全部告知用戶，所以請盡量減少的通知消息吧！
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
