首先說明，競品調研的方法有很多，本文只提供一種方法供參考，建議大家活學活用。
建議從下面4個方面入手：
1）調研背景
主要說一些為什么要調研，希望通過調研答達到什么樣的目的？是視覺升級、體驗升級還是為了提升轉化率？只有了解為什么做調研這件事情，才能知道從哪幾個維度調研。
2）調研樣本
建議選幾個直接競品，再選幾個優秀的次要競品也是可以的，可以幫助補齊盲點。
3）調研維度
調研維度要根據調研目的來確定，例如如果是為了視覺升級，那么調研維度主要就集中在視覺效果上，如果是體驗升級，那么調研維度主要集中在交互體驗層面。
所以維度的選擇一定是和此次調研的目的緊密相關的，不過，倒也不是說如果是視覺升級就只調研視覺方面的內容，而是咱們要有一個主要的調研方向，啥都想要，最后啥都做不好。
4）結論
結論是最重要的，畢竟，做這次的調研不就是為了這份結論嗎？所以最后一定要有結論，也就是咱們通過調研得到了什么結論。
我公司這個項目是做一個官網的改版，官網主要就改版主要目標有兩個：
第一個目標是視覺體驗升級，拆解下來就是界面更好看，內容更好找。
第二個目標是提升用戶轉化率，更細致的拆解一下就是讓更多的用戶點擊【咨詢】按鈕。
可以得到關鍵詞：界面更好看、內容更好找、咨詢客服的人數更多。
好，咱們繼續，下一步是找樣本。
前面提到過，樣本最好是直接競品+間接競品（主要是一線大廠競品）。
所以這次調研我選擇了幾個直接競品的官網，以及華為、飛書等這樣的做的比較優秀的產品進行輔助分析。
調研維度又可以分為兩大部分：整體結構、內容拆解。
了解整體架構是每個競品調研都離不開的步驟，可以幫助我們快速了解行業內的通識性做法，畢竟站在巨人的肩膀上才能看得更遠嘛。
1）整體架構
我當時的做法是把主要競品的官網都截圖下來，然后一個模塊一個模塊的去分析，其實看下來你會發現，大家的做法都是有跡可循的。
看下面的圖片，我把他們類似的模塊用同樣的顏色框出來，框出來后就會發現，哦，原來，這就是行業內的通識性做法。
然后我把這種通識性做法歸納總結出來，發現，其實官網首頁可以劃分為四大板塊：
你看，看似有很多復雜內容的官網， 其實也就這幾個模塊，這樣看是不是就清晰多了。
既然咱們通過架構梳理來了官網的內容，下一步就進行內容的拆解了，拆解什么內容？就是拆解上面總結出來的規律呀。
2）內容拆解
為啥要拆解內容呢？
因為咱們競品分析的目的不就是要做到“人有我優”嘛，咱們競品分析是為了青出于藍而勝于藍呀，所以咱們不能直接抄人家的內容，這是無效設計，咱們要做的是分析他們的優點，然后借鑒，然后超越。
進行內容拆解的時候，建議先定幾個拆解維度，不然會沒有方向，這里我分了三個維度來進行拆解：
我就拿【建立認知】板塊來舉例。
官網首頁的建立認知是什么？
是讓進來的用戶對整個網站有一個基礎的認知，顧客來了，對店鋪總要有一個第一印象吧。
通過前面的架構拆解我們發現，首頁一般使用4種方法來對用戶建立認知，哪四種？
banner、產品介紹、解決方案、產品優勢
一個用戶看了banner，瀏覽了產品介紹和解決方案，看了產品優勢，是不是對咱們的產品有了一個認知了，這就是建立認知的過程。
那么咱們如何去分析呢？
我的做法是一個個板塊分析，有些麻煩啊，但是相信我，值得。
下面我就拿建立認知里面的“產品介紹”來舉例子，看看如何去分析產品介紹這個板塊。
使用3個維度來分析：
維度1：用戶訴求（用戶進來之后的訴求）
產品介紹內容是否有我需要的產品和功能？是否滿足我的需求？
維度2：業務策略（針對用戶訴求，業務是怎么解決的）
講清楚三個問題，即“我們的產品是什么”、“我們能做什么”、“我們有什么優勢“
維度3：常用表達形式（用什么樣的表達方式來實現策略）
拆解下來，是不是對產品介紹板塊很了解了，產品介紹板塊主要的目的就是為了講清楚咱們是誰，咱們的優勢啊。王婆賣瓜，瓜雖好，但是咱們得讓來的人知道咱們的瓜好呀，所以表達方式也是至關重要的，用什么形式去表達這個板塊呢？其實競品已經有了很好的解決方案，那就是上面描述的。
你看，這樣一通分析，其實你的方案就自然而出來了，你知道往哪個方向去使勁了，而不是看別人有啥咱們就做啥。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( axecq.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
在大數據盛行的今天，人們不僅僅講究以事實說話，更愿意以數據講話。數據作為結果的直接衡量指標，更真實、也更具有說服力，那如何直觀的展示數據，幫助決策者做出正確決策或行動，發揮數據最大的價值？可視化數據大屏應運而生，讓我們一起來談談吧
說到數據大屏的時候，我們要先了解一下數據可視化，那什么叫做數據可視化呢？比較專業的解釋是利用計算機圖形學和圖像處理技術，將數據轉換成圖形或圖像在屏幕上顯示出來，并進行交互處理的一種理論、方法和技術，它為我們研究、處理、分析數據提供了理論依據。
我們人的大腦處理視覺信息的速度比文字快幾萬倍，將抽象的數據轉化成圖表、圖形能更快速幫助我們更快理解數據中的含義，趨勢以及相關性。
簡單來說，可視化數據大屏，將我們難以理解的抽象的數據概念以圖形化的形式展現，方便我們快速理解這些數據的含義，也方便這些重要的信息在最短的時間內傳給最重要的人。
數據大屏可分為信息展示類、數據分析類、監控預警類，多展示酷炫的效果，數據之間有層次區分，好的數據大屏是布局、色彩、圖表、動效的綜合運用。
數據可視化，讓很多員工從繁瑣復雜的數據工作中解脫過來，那它到底有什么優點呢？
近幾年來，國家的相關法律政策相繼出臺，大數據企業的技術研發水平不斷提高，促使大數據行業市場規模從 2014 年的 212.5 億元增長至 2020 年的 548.5 億元，數據可視化對于公司發現解鎖數據潛在價值意義重大。
有研究表明，人類可以用比處理文字快60000倍的速度來處理圖像，可視化能直觀呈現大量數據，以前企業員工檢測到數據進行匯總分析需要數小時，可視化通過特定的格式來呈現大量數據幾乎不費時間。
視覺形式的數據更易理解，數據可視化能快速顯示操作、運營與結果之間的關系。企業管理不是憑空作決定，正確的方式應該是，依據所獲得的數據信息來做輔助分析，數據可視化內容能讓管理人員和決策者清楚看清數據趨勢，快速制定及消化關鍵指標。
比如當上圖科學決策平臺的網絡總數特別時多，決策者可以快速調取相關數據找出異常原因 —— 是上次活動運營推廣到位，故增加了很多用戶？也就是決策者可以通過異常數據快速鉆取數據，用來解釋正在發揮作用的運營條件或決策與所遇到的指標之間的關系。
根據Aberdeen報告收集的信息，利用數據可視化的組織能夠及時訪問信息的可能性比其他組織高28％。數據可視化有助于我們以客戶和投資者能理解的方式向他們提供信息，它比PPT更容易讓人理解，也能吸引那些對企業內容運作了解甚少的人。
比如上方的區域經濟地圖，通過地圖與定位街道區域內容、顏色結合的展示樣式，很容易看出各街道產值、稅收等，也更有場景感；居民可支配收入版塊，通過顏色區分、大小圓形、時間線來直觀展示居民收入變化內容，形象且清晰。
制作數據可視化的工具有很多，最常見的就是Excel工具，非常容易上手，基本人人都會，操作簡單，但它的缺點也很明顯，沒什么特色，靜態數據展示過于死板，樣式老舊。第二類是Python等編程類工具，這類優點是碼數據速度快，自動獲取，看起來很高端，但缺點也很明顯，如：學習成本高、學習比較困難、很難比較熟練的掌握等。
第三類就是SAAS類可視化工具，這類工具容易上手，操作簡單、動態數據自動獲取、動態效果無敵炫酷，不需要下載安裝，缺點就是部分渲染組件比較耗費電腦配置。那我們今天就來推薦幾款常用的SAAS工具。
網易有數大數據是一個企業級的大屏大數據可視化展示系統平臺，具有深度的交互式數據探索。它有豐富的使用場景，支持數據接入、數據導入處理、數據分析生成報告等，用戶無需編程，簡單拖拽即可生成可視化圖表。缺點是數據探索性分析能力有限。
網易有數可視化實戰案例——業務安全大屏。通過大屏進行業務安全監控，清晰的展示各業務分布要點的數據情況，頂部實時更新各重要區域數據情況，銷量對比、售后情況，產品產比，以及用戶分布也有清晰的直觀展示。
FineBI作為一款商業智能（BI）軟件，擁有豐富的報表編輯和數據分析功能，同時它也支持可視化大屏的編輯。決策報表采用了畫布式操作界面，通過拖拉拽可以想成一個強大的、全面的可視化大屏，能實現在一個頁面整合不同的數據，完美的展示各類業務指標，實現數據多維度分析。缺點是大屏組件不夠豐富，開發拓展性不強，不支持云端托管等。
帆軟可視化實戰案例——銀行大屏駕駛艙。通過大屏直觀展示銀行存款、貸款數據，業務辦理詳情等，圖表形式展示內部管理、外部管理情況，分行放貸統計情況等，便于數據管理查看及決策制定參考。
Data V是阿里云內部的可視化大屏開發平臺，同時面向開發者和零基礎用戶，支持大屏圖形化編輯和在線編程開發，可幫助非專業的工程師通過圖形化的界面搭建專業水準的可視化應用。
它有海量行業模板，DataV數據可視化設計團隊會定期從大量真實項目中尋找優質場景，制作為模板，涵蓋媒體、零售、工業、電商、金融、防疫、氣象等多個行業，為用戶提供會議展覽、業務監控、風險預警、地理信息分析等各種設計參考。
產品功能方面，它有豐富的可視化編輯工具，提供多種業務模塊級的非圖表組件，只要通過拖拉拽便可創造出專業的可視化應用，另外豐富的組件庫與模板庫包含多種場景模板，簡單修改即可快速投入使用。智能化工具擁有主題配色，一鍵美化、大屏智能生成等工具，快速解決在搭建可視化應用時遇到的整體樣式配置困難。專業的地理信息可視化，支持地理軌跡、飛線、熱力分布、3D地球等效果，同時數據驅動三維世界生成，低代碼交互配置將復雜邏輯可視化呈現，整體效果更炫酷。它還有靈活開放的部署方式，支持多種發布方式，如：鏈接分享、二維碼發布；支持自定義組件接入；支持云上部署，也支持線上開發。
DataV數據可視化實戰案例——智慧工廠生產控制大屏，綜合呈現了每個生產階段的生產狀態參數，將整個車間的情況匯總到一個調度控制中心，方便管理人員了解各階段的工作情況。
袋鼠云數據可視化EAsyV，擁有業內領先的數據可視化大屏故事策劃、視覺設計、前端和數據開發技術實力，尤其擅長3D模型展示，基于GIS地理信息展示等。它里面有豐富的組件，樣式制作精美，支持多種不同類型的數據導入，還有動態面板和交互功能，讓大屏看起來更靈動。
EasyV數據可視化實戰案例——寧波圖書館可視化平臺。大屏包含人流分析監測、讀者畫像分析、借閱行為洞察等，從多角度全面的幫助用戶及時把握場館運營效果，為其提供館內建設與活動運營的監控分析服務。
深色的大屏設計能讓其數據顯示更明顯，也方便營造科技感，另外大屏設計圖表文字的顏色要統一，避免出挑的內容分散用戶注意力，使用圖片或者是動態的背景，也可以讓大屏更有氛圍感。那除了這些，好的大屏還有哪些特質呢？
首先是策劃有故事。從客戶的真實需求去梳理數據可視化內部的視覺傳達，確保內容傳達克制有條理，有重點、有故事。盡可能讓用戶花費更少的時間獲取更多信息，完成數據空間到圖形空間的映射，讓數據的價值被看見。
如上方的品牌銷售數據大屏，銷售額與門店數，數據明顯，與銷售額相關內容有季度線上線下銷售額，會員數、款式數量、爆款排行等，故這塊內容排在左側。右側就是區域訂單、毛利統計。中間放用戶關心的地圖區域分布、爆款分析等內容。
其次是可視化要有效率。通過工具軟件，數據可視化變得更簡單高效，變得靈活易實現，多端適配，加入組件化的拖拉拽操作，加入了多種交互和遠程控制，能有效率的實現海量數據實時同步，實現高效率、高質量大屏交付。
最后是大屏要有數據價值。數據可視化最重要的還是要落實到數據上，脫離數據談美觀是不切實際的空想，數據可視化就是要充分利用并方大數據的價值，保證數據實時、全域、精準、讓數據講話。
設計可視化數據大屏時我們設計師要抓住問題的重點，即這樣設計出來的內容能不能真的讓數據產生價值，能否經得起業務部門推敲？是否為企業經營提供了幫助？思考完這些再去做的大屏更有價值，大屏做的酷炫是其次，能夠讓人一目了然的看見關鍵信息，聯想到業務實際，才是我們設計師最需要關注的方向。
文章來源：站酷 作者：知果日記YRrui
費茨定律(Fitts'sLw)是一個描述人類運行學的經驗公式，用于計算人們移動手指或鼠標等設備到某個目標的時間，以考慮目標大小和距離為主。
費茨定律的公式是T=a+blog2(D/S+1)，其中T是時間，a和b是實驗測得的常數，D是目標的距離，S是目標的大小。說明了在給定目標情況下，目標距離越遠，需要的時間越長；在給定距離的情況下，目標越小，需要的時間越長。
費茨定律廣泛地用于人機交互界面設計中，例如在B端常用的設計按鈕上，可根據該定律來選擇適當的目標大小和間距，以使用戶更好地達到業務目標。
比如在B端產品彈窗界面設計中，確定和取消按鈕都會放在右下角，使得用戶更容易點擊。確定按鈕更高頻故放在最右邊，視覺表現更明顯，使其更容易一眼點擊。此外，兩個按鈕之間的距離也很重要，因為它會影響到用戶的點擊時間，為了讓用戶更容易進行選擇，按 鈕間保持12px距離，避免用戶誤觸。
1956年美國心理學家喬治·米勒對短時記憶能力進行了定量研究，他發現人的短時記憶能力廣度為7±2個信息塊，記憶信息超過了該范圍就容易出錯。因此心理學家把這個神奇的記憶容量規律稱為“7±2法則”。 在人機交互設計界面中，如果要引入新的元素或操作，應該盡可能地減少其數量和復雜性，以便用戶更容易理解和記憶。
比如在B端卡片設計中的操作按鈕一般會控制在7-2法則即5個操作按鈕，若有其它操作會隱藏在更多按鈕里面，把頻次較高的按鈕放在一級展示中，頻次較少的按鈕放在二級浮窗展示中。通過分解復雜的任務和信息，減少冗余內容使得用戶更容易理解且更快完成業務過程。
格式塔原理是心理學的一個概念，也廣泛應用于設計領域中。該原理認為人類大腦在處理感知信息時，會自動將信息組織成具有整體性、完整性和結構性的形態，即所謂的“格式塔”。
在設計中，格式塔原理有幾個常見應用：
1.相似性原則：相似的事物更容易被視為一組，與不同的事物分離。因此，設計師可以使用相似的顏色、形狀、大小等元素來將相關的信息組織在一起，提高信息的可讀性和易用性。
2.接近性原則：接近的事物更容易被視為一組，與遠離的事物分離。因此，設計師可以使用空間布局來將相關的信息組織在一起，提高信息的可讀性和易用性。
3.對稱性原則：人類大腦喜歡對稱和平衡的形態。因此，設計師可以使用對稱的布局來吸引用戶的注意力，提高視覺吸引力和美感。
4.閉合性原則：人類大腦傾向于將不完整的形狀視為完整的形狀。因此，設計師可以使用封閉的形狀來強調信息，使用戶更容易理解和記憶。
相似性原則的應用比如在B端的卡片設計中，所有的卡片樣式相似在人腦理解中默認會視為相同的一組數據。
接近性原則比如在B端的表單設計中，常常會將一組數據通過接近性原則組織在一起，提高信息易讀性。
對稱性原則常用在大屏與報表設計中，通過對稱性布局提高視覺美感，吸引用戶注意力。
閉合性原則常用于連續性表格或圖形等設計中，通過不連續性來讓用戶大腦形成封閉路徑強調后續可讀信息。
比如在下面的表格中通過形狀的不連續性反而讓用戶大腦更快感知到還有信息可以滾動查看。
雅各布定律(Jacob'sLaw)是一條常被引用的交互設計法則，它由美國心理學家Donald Norman提出。該定律指出，人們在使用任何新系統時，都會將他們以前所經驗過的類似系統的知識應用于新系統。
雅各布定律的核心思想是，在設計新系統時，應該考慮到用戶的現有經驗和期望，并盡量避免創造完全不同的界面模式。這樣可以使用戶更容易理解和掌握新系統，并減少學習成本。
比如在B端設計中常用到的圖表編輯快鍵可以延用用戶在其他系統常用到的快捷鍵，如win或mac系統都常用到的快捷指令可復用到B端產品的快捷操作中。
防錯原則(Principle of Fail--Safe or Fault-Tolerance)是一種設計思想，其目的是減少或避免因錯誤或故障而導致的不良后果。它通常被用于設計高度可靠的系統或設備，以確保在錯誤事故發生時，系統或設備仍然能夠繼續正常運行，或者能夠平穩地停止運行，以避免進一步的損害或危險。
在界面設計中如設計可撤銷操作，通過系統中允許用戶執行可撤銷操作，以避免因誤操作而導致的不良后果。
或在界面設計中常用到的反饋和提醒彈窗等操作，以幫助用戶及時發現錯誤或故障，并采取適當的措施。
泰思勒基本定律(Tesler’sLaw)由Larry Tesler于l984年明確提出，也稱 「復雜性質量守恒」。
該基本定律覺得：該定律認為每一個過程都有其固定的復雜性，存在一個臨界點，超過這個點過程就不能再簡化了，你只能將固有的復雜性從一個地方移動到另外一個地方。
可以通過簡約至上的隱藏、轉移、刪除等原則進行用戶體驗的提升。
早在14世紀，哲學家、圣方濟各會修士奧卡姆的威廉提出來了奧卡姆剃刀原理，這個原理說的是“切勿浪費較多東西去做較少的東西同樣可以做好的事情”，后來以一種更為廣泛的形式被人們知曉“如無必要，勿增實體”。
奧卡姆剃刀常用于兩種假說的取舍上：如果對于同一現象有兩種不同的假說，我們應該采取比較簡單的那一種。對于幾個功能相同的設計，在設計都可用的情況下，則選擇視覺干擾較少的設計。
在設計上則能夠指導我們對產品做減法，去減少不必要的元素，在進行設計的時候，先分析用戶的的主流程是什么，流程內的引導盡量弱化，沒有必要則不增加。
比如在B端產品設計中的登錄頁面以登錄流程為核心，不需要增加其它沒必要的流程。
除了以上七大定律外，也有尼爾森的10大設計原則，與以上定律基本一致。總而言之，交互設計規律的宗旨都是幫助設計師創造易用、高效、愉悅的用戶體驗。在B端產品設計中，將交互定律貫穿于產品設計中可以提升產品易用性，降低學習成本，使產品更規范，對企業用戶的工作效率與商業價值都有積極的影響
文章來源：優設網 作者：麗創輕文
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( axecq.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
六、B端C化未來的設計方向
文章來源：優設網 作者：酷家樂UED
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( axecq.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
相信很多設計師同學都接觸過B端產品，對于很多設計師而言，遇上B端產品是一件令人又愛又恨的事情，愛是因為目前市場上大多數的公司主要經營的都是B端系統，B端系統相對于C端來說UI界面顯得并沒有那么的重要，所以設計師的責任也相對沒有那么重，而恨是因為目前大多數B端系統頁面都是由前端UI框架搭建的，前端同學很多時候直接套用組件即可，所以UI設計師對于整個系統來講也顯得可有可無，導致設計師話語權也特別的低，甚至有些做B端系統的公司壓根不用UI設計師也能完成項目開發。
但是作為交互設計師(小公司一般是產品經理)在B端卻特別吃香，并且擁有主要的話語權，因為我們主導這整個系統的基礎邏輯與業務邏輯設計，所以無論是前端還是后端同學都需要根據我們的設計進行開發，最終完成整個系統。
因此，今天這篇文章并不是告訴大家有哪些前端UI框架或后臺組件等..（相信這些大家也看得太多了，工作中都是套框架，能用得上的沒幾個），而是從交互上如何去看懂B端后臺的基礎邏輯以及以后自己晉升成產品經理或者交互設計師時，怎樣去設計一個完整閉環的系統。
B端產品和C端不同，C端產品大多數都是針對個人用戶，設計的關系結構相對來說比較簡單，每一個用戶擁有的權限都是一樣的，例如微信、淘寶等，我能看到的頁面你都能看得到，很少不存在權限差異問題。
而B端產品的用戶一般都是企業，企業用戶一般會管理著多個角色，也就是角色多元化（例如一些校園系統角色就分為：普通教師、級長、主任等角色），不同的角色對系統的需求和職能也不一樣，我們需要根據角色的需求去劃分不同的權限，讓他們互不干擾但又滿足他們的需求問題，因此B端產品的基礎邏輯比C端產品相對復雜。
看完上面文字的同學可能蒙了，又角色又權限的，能不能說點人話？
行！其實很簡單，B端系統無非三個邏輯（也是三個頁面）：用戶管理、角色管理以及菜單管理。（有些系統因為業務需求可能有部門管理，那么算上部門管理就四個）
為什么我把菜單放到最前面跟大家講？是因為菜單管理比前面兩個相對簡單，而什么是菜單也特別好解釋，大家可以直接認為系統左側的頁面列表就是菜單，系統中擁有多少個頁面那么就有多少個菜單，你的菜單越多就以為著你的權限就越多。
菜單管理的作用就是用于管理員對整個系統頁面的管理（管理最主要就是增刪改查），而有一些公司為了減少開發工作量會直接不要菜單管理，有多少個頁面都由代碼直接寫死，管理員不能通過頁面進行人工配置，這樣會導致以后擴展會非常麻煩，當然了，有一些系統的菜單幾乎不改的話，代碼寫死也沒問題。
在講解用戶之前我需要提前跟大家講一下什么是權限，準確來講應該是權限分為哪些？
在目前的后臺系統中，權限一共分為三種權限，分別是菜單權限（也就是上面介紹的）、數據權限以及操作權限。
菜單權限決定了用戶有沒有這個頁面，例如學校系統中，主任有看到所有教師的教學數據的界面，而教師卻沒有這個功能，那么在給主任新增賬號的時候就應該把對應菜單賦予進去。看上去很復雜，其實具體操作就是新增的時候把對應的菜單勾選上就可以了。
數據權限則決定用戶能不能看到對應的數據。還是學校系統的例子，初中部主任只能看到初中部所有教師的教學數據，而高中部主任也只能看到高中部教師的教學數據，不同用戶能看到的數據也是不同的，所以在新增的時候需要給用戶配置（一般配置就是勾選）好對應的數據權限。
但是這里有一個問題，配置數據權限時我們如果一個一個人去勾選配置的話會特別的麻煩，假如初中部主任只能看到初中部的老師，那么我在給他配置賬號的時候需要一個一個的初中老師勾選上，張三、李四、王五..等等，如果人多的話可能需要勾選成百上千次，用戶體驗就會變得特別差，因此現在的系統在配置數據權限時都是以部門為單位進行配置，也就是說，直接選擇部門就代表著擁有整個部門的數據權限。
最后操作權限即決定了用戶有沒有對數據進行操作（一般是增刪改查）的功能。還是上面的例子，初中部主任擁有查看教師的頁面以及數據，那么他能不能對教師們的數據進行增刪改查或者導入導出呢？這就取決于操作權限的配置了。目前很多的后臺系統在配置菜單權限的時候同時需要把操作權限進行配置（因為只能先有頁面才能進行操作），操作權限一般就是增加、刪除、修改以及查詢，當然如果頁面還有導入導出或者其他功能，這些也需要在操作權限中進行配置。
用戶其實也很容易理解，B端系統的用戶其實就是需要登錄進系統的賬號，所以有一些系統的用戶管理也叫賬號管理。
因此用戶管理的作用就是對登錄進系統的賬號進行增刪改查等，當我們需要對別人提供一個賬號時，我們就新增一個用戶的賬號密碼給他們，直到他們用完了再把他們的賬號進行刪除。
那么問題來了，上面我們說到，不同的用戶可能有不同的需求問題，那么就意味著我們每一個用戶給要他們分配不同的菜單去做他們的事情。
例如在學校系統中：普通教師只負責自己班級學生的成績錄入，所以普通教師只有班級成績錄入的菜單，但是學校主任卻不一樣，他不僅僅能看到各班學生成績，還能根據各班成績進行對比分析，年級學生排名等等..
因此在剛開始的傳統權限系統中，我們會直接把相應的菜單權限、數據權限、操作權限賦予給用戶，每新增一個用戶我們就選擇好所有的權限都勾選上賦予給用戶，最后提供給用戶進行操作。
然而這種操作方式有一個弊端，就是如果每新增一個用戶，系統管理員就需要重復進行勾選相同的權限，那么就會耗費大量的精力（一個用戶要配置的權限特別多，如果用這個方式操作的話新增一個用戶可能就需要花費很長時間）。因此，為了解決這個問題，我們在用戶與權限之間建立了角色管理。
系統中角色的定義其實跟生活中是一樣的，我們把固定的權限集合到一起從而形成了角色。例如，生活中UI角色就負責頁面的視覺設計，而交互設計師則負責了產品的邏輯或者用戶體驗設計，這些角色擁有的權限一般很少變化，也幾乎不會進行刪除或者修改，就好像UI設計師或者交互設計師這些角色不會一時半刻就被完全消滅一樣。
有了角色，我們可以先把對應的權限集合賦予給角色，然后新增用戶時，再選擇用戶對應的角色即可。
這樣做的好處是什么呢？好處就是當我們新增用戶的時候，如果是相同角色的用戶，我們不再需要重復去大量勾選相應的權限了，只需選擇好該用戶是那個角色就可以間接對用戶賦予權限，并且后續要對用戶進行權限的修改也十分便捷。因此，在現在的后臺系統中，大多數都是采用權限賦予角色，然后新增用戶時再選擇用戶對應的角色的方式。
如果看完上面的知識點還有點懵的話也沒關系，這部分給大家展示在后臺系統中菜單管理、角色管理與用戶管理的實際應用是怎樣的。
第一步先查看菜單管理有哪些內容，一般情況下，一個成熟系統的菜單頁面幾乎是已經固定不變的，那么也就是說菜單管理列表中所擁有的菜單都不需要怎么操作，列表中有多少數據就代表著系統總體有多少菜單。
第二步進行角色管理，如果是成熟系統的話，角色管理的角色也早已經分配好了，我們并不需要過多的進行操作，但如果是剛研發完成的系統，那么我們就需要根據現實的用戶需求進行角色的設置，具體添加角色的主要參數包括角色名稱、菜單權限、數據權限以及操作權限（其實也就是上文介紹的三種權限），其他的參數都是根據自身業務進行添加。
最后一步就是用戶管理，配置好角色后，我們就可以根據需求進行用戶的新增操作，例如現在我們需要新增一個賬號進行登錄系統，那么在用戶管理頁面中點擊新增按鈕，隨后填寫用戶名稱與密碼，最后選擇用戶角色，點擊確定按鈕即可完成（因此，新增用戶的三個必要參數是用戶名、密碼以及角色，有部門的需要填寫所屬部門，其他參數根據系統業務進行添加）。添加完成后你們可以試一試使用自己所填寫的用戶名密碼登錄后臺系統，隨后體驗一下作為其他角色是否能完成自身需要的業務。
用戶管理、角色管理以及菜單管理是B端系統最基礎的邏輯，也是同學們將來需要轉崗B端交互設計師或者產品設計師所必須掌握的知識，上面所介紹的僅僅是RBAC模型中最簡單的一種，現實設計中可能出現各種情況，因此關于這次的B端產品設計我想給大家幾點Tips：
1、在現實開發中，后臺系統并不一定像我上面所說的那么完善，有些系統并不需要菜單管理，老板要求直接代碼寫死就好了，又或者有些系統就只有一個角色，那么角色管理也不需要了，這些情況都是有可能發生的，所有我們做設計的時候除了運用自己的知識以外，更多的是工作經驗，知識是死的，人是活的，永遠別忘了設計的本質是解決用戶需求問題。
2、很多時候后臺的邏輯管理會比我上面說的要復雜的多，例如一個用戶可以擁有多個角色嗎？不同角色能不能有相同的權限？如果有角色被刪除了，那么該角色關聯的所有用戶應該怎么處理？可能你認為這些并不是自己目前需要考慮的問題，但是除非你以后并不想晉升到更高的位置，不然這些問題以后肯定會遇到的。
3、上面介紹的管理操作都是基于超級管理員賬號（admin）進行操作的，如果你拿一個普通賬號的話一般是沒有對應的菜單權限，我擔心有同學看完文章后馬上登錄自己的后臺系統進行操作，接著登錄進去找了半天都沒有找到對應的菜單在哪里。
好了，最后希望文章能讓大家有所收獲，如果大家有不明白或者其他想法的話，歡迎大家一起探討，共勉。
文章來源：優設網 作者：北沐而川
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( axecq.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
先問你一個問題。
拼多多、淘寶、京東這三家購物平臺，你認為它們的區別是什么？
或者換個方式問你。
買電器你去哪個平臺？
買衣服你去哪個平臺？ 買垃圾袋你去哪個平臺？
是不是有了答案了？
沒猜錯的話， 大部分人的答案是：買電器去京東、買衣服去淘寶、買垃圾袋去拼多多。
你看，這就是一個購物心智模型，你的心里對這三家平臺已經產生了固有的心智，如果讓你去京東買衣服，你會不會覺得，有些別扭？
沒錯，這就是心智模型。
百度百科對心智模型的定義是：
“深植我們心中關于我們自己、別人、組織及周圍世界每個層面的假設、形象和故事。并深受習慣思維、定勢思維、已有知識的局限。”
關鍵詞是：故事、習慣、局限。
淘寶一開始就我們講了一個故事，一個萬能的集市，我們習慣在上面買衣服，但是也產生了局限性，那就是，當我們想買大額電器的時候，還是會選擇京東。
我個人對心智模型的理解是：
我們內心深處對一個事物的看法。
空口聊天多沒意思，下面舉個例子。
這是一尊陶俑，第一眼你覺得她像什么？
是不是覺得像米老鼠？
為什么？
因為陶俑的頭上的發髻和米老鼠標志性的耳朵很像。
如果你從沒見過米老鼠，你還會覺得她像米老鼠嗎？
一定不會。
這就是心智模型，你對頭頂的大圓形的心智是“米老鼠”，所以一旦你看到類似的形狀，米老鼠的形象就會浮現出來，這個發髻的形狀和你心里對米老鼠的形象產生了匹配。
對心智模型有沒有一點印象了？
下面我們接著聊。
我不想用具體的界面來聊，那樣的話太散，我認為要想理解一個概念，最好還是從“面”的角度來說，所以下面我會舉一些商業上的案例來輔助理解。
心智模型有哪三種運用方式？
第一種：創建新的心智模型
第二種：改變舊的心智模型
第三種：匹配現有的心智模型
可以理解成一件事情的新生、改變和延續。
下面咱們一個個來。
第一種：創建新的心智模型
難度指數：難啊。
記得《盜夢空間》里最難的是什么嗎？
最難的不是盜夢，而是植入一個想法。
創建新的心智模型有異曲同工之妙，都是讓別人內心接收一個事物，需要刻意培養。
舉幾個例子。
當年外賣剛開始的時候，家家搞補貼，很多時候幾乎不花錢就可以點外賣，后來這些福利沒有了，為啥？
因為點外賣的心智已經培養好了，你離不開它了，所以平臺可以“不慣著你了”。
還有唯品會的正品低價、瑞幸一開始的星巴克平替，這些都是他們想要植入到用戶大腦中的心智。
為什么要費勁植入一個新的想法？
因為一旦植入了，就很難改變。
現在我身邊的很多朋友想買一些低價的品牌都會上唯品會，買咖啡會喝瑞幸，一旦用戶的習慣養成就很難改變，意味著什么？
意味著留存和轉化的成本更低了。
第二種：改變舊的心智模型
難度指數：也難。
《盜夢空間》里小李子的妻子被他植入了一個想法“你不在現實世界里”，當他和他妻子回到現實世界后，他妻子仍舊認為自己不在現實世界里，這個被植入的想法已經根深蒂固，很難改變。
所以改變舊的心智也不簡單。
例如小米最初主打極致性價比，后來想往高端路線走，很難，大家心里已經認準了小米就是“性價比之王”，也就是你的產品不僅要好還要便宜。
這就導致小米一漲價，大家就罵他們忘了初心……所以小米拆分出了紅米主攻性價比，小米往高端發展，但是仍舊很難。
拼多多的百億補貼也是一樣的道理，一開始的砍一刀深入人心，大家對拼多多的心智已經成型：便宜，質量一般。拼多多想改變這個心智，推出百億補貼，并承諾假一賠十，就是想告訴大家，我拼多多，也是有正品好貨的。不過，效果嘛，見仁見智。
第三種：匹配現有的心智模型
難度指數：相對簡單。
其實匹配現有的心智模型，是相對最簡單的方法，市場已經幫你把用戶習慣培養好了，你直接使用，那肯定事半功倍，省時省力啊。
舉個例子，大家最近有關注小米的 13 Ultra 嗎？
小米和徠卡聯合研發的，主打徠卡調色的相機。
我有一個同事就直接把手里的微單換成了 13 Ultra ，因為拍照足夠好看而且便攜。
這里不是要推銷手機啊，是想讓你們了解 13 Ultra 是個什么東西。
然后給大家看看它的手柄（一個配角，可以拆卸）。
是不是有些熟悉？
和相機像不像？
這個手柄就是沿用了相機的心智模式。
小結一下：
心智模型有3種用法：
新建：創建新的心智模型
改變：改變舊的心智模型
延續：匹配現有的心智模型
下面聊聊，咱們怎么做才能更加匹配用戶的心智模型？
同樣的，我不會拿具體頁面來舉例，還是希望把思考方式分享給大家，而不是某一個頁面的設計。
要想匹配用戶的心智模型其實就三步：
了解業務、了解用戶、競品調研。
或者可以這么說， 在懂業務、懂用戶的基礎上，還要了解行業內的通用做法。
1）了解業務
一定要了解業務，為什么？
因為好的設計方案千千萬，但是匹配你的業務的方案才是好方案，如果不了解業務，可能設計出來的方案就是自嗨，例如網上很多的dribble風設計。
又比如說手機瀏覽器一般都把搜索框放到屏幕頂部，而夸克瀏覽器卻把搜索框放到了下面。
為什么？
因為夸克想推翻傳統的瀏覽器，想打造一款更年輕更好用的瀏覽器，把搜索框放到下面也是滿足他們的業務訴求，現在手機屏幕越來越大，搜索框放在下面手指操作更加方便。
所以，一定要先去了解業務。
拼多多和淘寶同樣都是電商平臺，可它們的用戶心智相差甚大，因為最后方案設計是服務于最初的業務目標的，業務不同，呈現的方案也不一樣，最后讓用戶形成的心智也不同。
2）了解用戶
為啥？給老人和小孩設計的界面能一樣嗎？
就拿顏色和文字來說。
小孩喜歡高飽和、豐富的顏色，而老人則需要考慮在各種場景下都能看得清楚信息的顏色。
小孩喜歡圓潤的卡通字體，而老人需要識別度更高的字體，更大的字號。
不同的用戶，采用的設計一定是不同的，只有了解了他們的喜好和痛點，才能做出符合他們心智模型的設計。
3）競品調研
為啥要競品調研呢？
因為競品和我們的產品類似，那么意味著用戶大概率重合度也高，甚至業務上都有一定相似度，那么意味著，競品的方案，大概率是經過市場驗證的符合用戶心智模型的方案。
你看，既然競品已經給咱們打了個樣，為何還要自己悶頭造輪子呢？
咱們目的是解決問題，又不是為了證明自己很厲害。
但是，不要誤解，我不是說照著競品抄，而是取長補短，所以不僅要調研，還要分析，分析就是把競品的優劣勢找出來，好的地方咱們可以酌情借鑒，不好的地方，咱們也要避個雷嘛。
好了，小結一下，要想匹配用戶的心智模型，一定要了解業務、了解用戶，還要做競品調研了解市場的通識性做法。
以上。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( axecq.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
進入喜茶小程序的時候給我的感受是簡潔、時尚、極致的設計風格，截了兩張小程序內的兩個界面。 確實做的還挺不錯的，為什么給人感受不一樣？接下來我們分析分析
1.首先從下面的頁面我們能發現，界面的排版只有卡片左邊距留了20的安全距離，而卡片右邊安全距離為0，這樣特別的版式設計給人不對稱的感覺，這樣的設計能讓用戶記住，同時又有一點時尚范的感覺，很符合喜茶目標用戶年輕人的審美。
2.同時產品的banner是3:2的比例，較為靠近黃金比例的尺寸。
1.點單頁面，喜茶新增了新品推廣位，一些新上的產品都會在推廣位呈現，尺寸比例4:3，給人的感受像是線下海報一樣，同時第三個廣告位露出部分，讓用戶知道后面還可以左滑查看。同時推廣頁的右下角有個箭頭指引，告知用戶可點擊。
2.看完這幾個頁面會發現，喜茶的基本上都是純直角的設計語言，推廣頁是直角、標簽是直角、按鈕微圓角，直角的設計語言給人的感受是時尚、極致、極簡的設計感受，個人非常喜歡。
3.但是點單頁面的有點亂，標簽的顏色過多，不夠統一，圖標的也非常的多，這樣給人的感受就會比較凌亂，盡可能少的去表現，這樣更加能提高用戶的效率。
1.在點單頁面用戶上滑，推廣位漸漸的往上消失，這樣產品的展示會更多，利于用戶挑選和尋找。
2.用戶在選口味界面，發現每一個標簽的內的文字左右的安全距離一致，依次排列，具有節奏感，頁面給人感受簡潔、易操作，同時用戶可以選自己的口味，可進行保存，下次點直接就可以選擇自己的口味。
在喜茶的百貨界面能清晰發現每一個模塊的都是不一樣的，很多產品的商場頁面都是一致的，而喜茶在產品的展示會以不一樣的形式出現，每一個模塊都有尺寸和排版的差異，這樣給用戶有種落錯感，更加有設計。
1.喜茶的會員頁給我眼前一亮的感覺，會員的背景用色都是明度高、純度低的漸變給人的感受清新、淡雅的感覺。
2.會員頁用戶在切換的同時圖標的顏色會跟著會員的顏色變化，特權的內容也會有不一樣的變化，讓用戶有明顯的等級感知。
3.切換到“黑卡”的時候，會發現會員頁的“喜”字加上了質感。
4.會員卡上“喜”字提取了“喜茶”中的“喜”，跟其他產品的會員做了區分的同時又加深了品牌印象。
喜茶有兩種不同風格的圖標，一種是比較極簡，線性，差異性沒有那么強，而另一種則是插畫風格的圖標，給人感受比較有趣，更有差異，極簡則符合喜茶整體小程序的調性，而插畫又豐富了頁面的單調性。
1.喜茶頂部的banner做非常不錯，例如跟FENDI合作的會在首屏加入視頻，用戶一進入小程序就能看到能很好的吸引用戶的注意。
2.用戶在左右切換banner時，文字會先出現然后底部的圖片漸漸出現，給用戶感受自然、流暢的感受，好的動畫效果能給產品加分，給用戶留下好的感受。
1.喜茶的數字字體是NeutraText-DemiAlt，每次進去喜茶看到他們的數字字體非常有獨特性，給人的感受時尚、極致、有設計。
2.部分界面和海報喜茶會用上方正悠宋，有點中國風、古風的韻味在里面，而且也非常有獨特的設計美感，喜茶會應用在國風的海報以及會員頁的“喜”字上，突出風格化。
3.好的字體能很好的提高產品的品牌感和設計美感，更能傳達該品牌想傳達的東西。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( axecq.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
從產品經理處獲取項目原型圖，當獲取到原型圖后不要盲目的去進行設計，要先分析了解整個項目的功能、特性、用戶群體、項目的定位等等，特別是對功能的疑惑處一定要找產品經理溝通，只有做到對項目了熟于胸才能做出優秀的設計。
當我們對項目的功能、特性、用戶群體、項目的定位都有所了解后，還是不能馬上進入設計環節。我們需要先對市面上同類型的產品進行分析和對比，包括設計風格、配色、排版、功能樣式等等，了解其優劣勢，做到取長補短，思考如何讓我們的產品更加的完善，這時候我們的腦海里面基本上對自己要設計的東西已經有了一個大概的雛形。
這篇文章內所有的數值均以2倍圖為例，使用1倍圖的同學請自行除以2。
現在UI設計通常使用的是全面屏的設計規范，全面屏的設計稿更加美觀，且做作品集的時候搭配全面屏樣機視覺效果也更加突出。通常只設計一套蘋果全面屏的設計稿，不需要另外設計安卓端設計稿，安卓端由安卓工程師自行適配。
界面：750px1624px
狀態欄：750x88px
導航欄：750x88px
菜單欄：750x98px
指示器：750x68px
左右邊距：32px或24px
*其中狀態欄和指示器不需要進行額外的設計，是系統默認控件，除顏色外不可改變。
頂部功能：48x48px
底部菜單欄（有文字）：48x48px
底部菜單欄（無文字）：64x64px
尺寸：36px、32px、28px、24px
顏色：正常（#333333）、輔助（#999999）、未輸入提示（#CCCCCC）
*利用文字尺寸對比和顏色對比可以得到不錯的效果。也可以給文字顏色添加少量的藍色，讓顏色不那么呆板。
組建控件系統可以讓我們的設計稿更加的規范，也便于修改，可以極大的提高我們的工作效率。
所有的圖標都需要做成控件，方便我們切圖。然后就是會重復使用的狀態欄、導航欄、菜單欄、指示器、列表、彈框、按鈕等控件。
除了我們常用的控件以外，顏色、投影等特殊效果、文字大小都可以保存樣式，把項目的配色、特殊效果、文字尺寸都保存下來，不同的設計工具有不同的保存方式，大家可以根據自己使用的設計工具進行設置。
我們需要讓項目保持一個統一的設計風格，讓項目更加的整體、統一、協調。不同的風格有不同的優勢，選對與項目屬性相符的設計風格可以讓項目更加的出彩。
這種風格沒找到合適的名稱，我個人一般叫它傳統風格。這種設計風格使用分割線分割小的模塊，用背景色塊分割大的模塊，特別適合列表信息。雖然給人感覺沒有特別強烈的設計感，但簡單實用、樸實無華，層級劃分清晰明了。
卡片式風格是借用現實世界中卡片的特征和概念，將一個模塊或同類型元素放到一個卡片容器類，可以增加內容的獨立性，讓模塊劃分關系變得非常的清晰，是現在非常常用的一種設計方式。
常用做法是采用淺灰的背景+白色卡片的方式，卡片都帶有一定的圓角，類似于將撲克牌一張張的放在桌子上，桌面是灰色背景，每一張撲克牌就是一個卡片。也不排除暗夜模式的卡片式設計，背景會更暗一些，卡片略亮。
在傳統UI風格的基礎上去除背景色塊和分割線，單以間距來區分模塊和元素，對親密性的應用有較高的要求。有時候單以間距來區分模塊和元素時，可能會導致模塊層級不分明，所以會使用將標題加大的形式，讓模塊與模塊之間的區分更加明顯。因為去除了分割線，留白就更多，會顯得界面更加的干凈、清爽。
新擬態是19年底在追波開始出現的一種設計風格，特點是使用統一的光源做出立體的浮雕效果，元素有厚度但沒有紋理和材質的輕擬物風。
常規做法是假設一個統一的左上方光源，給元素分別添加一個左上角和右下角的投影，左上角（被光源照射的一側）投影使用亮色，右下角投影使用暗色，讓元素可以浮起來。而在按下或選中狀態時則使用兩個內陰影，左上角暗色右下角亮色讓元素凹下去。需要注意的是界面模塊和背景色一般是同一個顏色，所以顏色不能使用純白或純黑，否則有一側的投影就會看不見，通常是使用藍灰色或深灰色背景。
新擬態風格視覺效果新穎、柔和，對比度低，看得久了會產生一定的視覺疲勞，研發成本也較高，所以現在更多的還是處于概念稿，實際項目中應用較少。可以作為一種練習或部分功能的使用。
設計稿完成之后我們需要將圖標等元素切圖導出交付給開發，IOS和安卓需要根據要求導出不同倍數的png格式切圖文件。
IOS：現在通常是輸出2套，以@2x、@3X為后綴，也就是2倍圖、3倍圖；
Android：現在通常是輸出3套，xhdpi（超清，對應IOS的2倍圖）、xxhdpi（超超清，對應IOS的3倍圖）、xxxhdpi（超超超清），安卓切圖不需要將倍數加到切圖命名內，而是每種尺寸單獨建立一個文件夾。
png：最常用的切圖文件格式，背景無底透明，所以在導出切圖文件時需要先去掉背景色（figma將畫板填充色隱藏，sketch畫板不要勾選“包含于導出項”）；
svg：矢量切圖，需要背景無底透明，部分網頁端項目可能需要svg格式的切圖文件；
bmp：部分硬件機器的項目需要使用的圖片格式，需要注意的是bmp無法實現背景透明，如果背景是透明的會自動帶上白色，需要切圖文件把背景帶上一起切，而且figma和sketch等UI設計軟件無法直接導出bmp格式，需要先導出為png或jpg格式，再使用ps或其他工具轉換一次。
只能使用英文、下滑線、數字進行命名，不要使用中文和特殊字符。命名方式一般是類別_位置_功能_狀態（有些切圖沒有多種狀態則不需要添加狀態命名）。
以蘋果端舉例：如底部菜單欄的首頁圖標命名則是ico_bottom_home_nor@2x（圖標_底部_首頁_未選中狀態）和ico_bottom_home_sel@2x（圖標_底部_首頁_選中狀態）。
頂部的搜索圖標沒有多個狀態，命名是ico_nav_search@2x（圖標_頂部_搜索）。
類別一般只有3種：圖標（icon）、圖片（image）、按鈕（button），我們通常會簡寫為ico、img、btn。
狀態一般只有4種：正常（normal）、按下（press）選中（selected）、禁用（disabled），我們通常會簡寫為nor、pre、sel、dis。pc端會多一種狀態：懸停（hover）。
sketch和figma等UI設計軟件可以同時導出多個尺寸的切圖文件和前綴/后綴，所以我們只需要設置圖標本身的命名如ico_bottom_home_sel，而不需要每個切圖都去手動的添加IOS后綴的@2x和@3X，以及安卓的前綴xhdpi等，在導出設置中設置好每個尺寸的文件夾名稱和后綴，再統一導出即可。
軟件內部導出：現在的UI設計軟件Sketch、Figma、Mstergo等都可以直接導出切圖文件，只需要設置好相應的倍數和前綴、后綴，就可以快速的導出切圖文件；
上傳第三方：最常用的就是將設計文件上傳至藍湖，研發人員可以在藍湖上下載自己需要的切圖文件，但在上傳藍湖之前需要把設計稿中需要切圖的元素設置為切片。
和切圖文件一起交付給開發的還有設計稿的標注文件，讓研發人員可以清楚地知道界面內元素的顏色、尺寸、對齊方式、距離、透明度，文字的字體、字號、行高等。
很多設計文件都可以安裝藍湖插件，再通過插件將設計稿導出到藍湖，研發人員就可以便捷的查看界面的標注。
Figma、Mastergo等在線設計軟件都可以切換為開發者模式，只需要將研發人員邀請到自己的設計文件所在團隊內，研發人就可以查看到界面的標注；
有部分公司有一定的保密措施，會禁止設計師使用第三方平臺或是聯網操作，這種情況設計也無法使用Figma、Mastergo等在線設計軟件，只能使用Sketch等客戶端，輸出標注就需要使用相應的插件，Sketch可以使用Sketch Measure導出HTML格式的標注文件。
在項目上線的階段UI設計需要輔助研發提供上線應用商店需要的項目預覽圖、啟動LOGO，也需要設計補充出APP的啟動頁、閃屏頁等。
上線應用商店需要的預覽圖，通常是使用項目中比較有特色的幾個UI界面加以設計。
上線應用商店必須提供的LOGO，手機中啟動APP的入口，但不同的應用商店有不同的尺寸，華為、蘋果、小米、三星、應用寶等所需要的啟動LOGO都有所不同，所以輸出多個尺寸。以蘋果App Store為例，需要以下尺寸：
啟動頁和引導頁一般是和UI界面一起設計，不過需要項目上線后才會有其價值，所以可以先設計完項目的界面，在研發開發的過程中再去設計啟動頁和引導頁，只要在項目上線前提供給研發就可以。
當一個項目上線后，只能代表我們的現階段的工作已經全部完成。每個項目上線后都會收集用戶反饋，根據用戶反饋的信息優化功能和界面設計，通過持續不斷的優化、迭代讓我們的產品越來越好，這個過程中也需要我們UI設計不斷的去進行調整和優化。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( axecq.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
什么是好的設計？好設計，就是不改稿的設計，甲方買單的設計，這句話多大多數設計師來說是沒錯的。因為設計師也要吃飯的、要生活。只要客戶買單了，我們就能達到經濟上的收益。
但是僅僅客戶買單就足夠了嗎？我覺得對于一個想要提升自己的設計師來說并不足夠。這個客戶買單了說明你在一定程度上，在當前滿足了這個需求層次或者審美的客戶群體。
當客戶發現設計并沒有在實際宣傳中達到目的，買完單的客戶也沒辦法回頭再找設計師退款，但是，可想而知這個客戶就流失了。而且如果只滿足于應對這一需求層次的客戶，當面對要求更高的客戶的時候，我們也會變得無能為力。只能看著客戶流失，或者勉強接下項目，卻在不斷的改稿中疲于奔命。
想了解什么是好的設計，首先需要要了解什么是設計，設計的目的是什么。
設計是有目的的策劃，平面設計是這些策劃將要采取的形式之一，在平面設計中你需要用視覺元素來傳播你的設想和計劃，用文字和圖形把信息傳達給受眾，讓人們通過這些視覺元素了解你想表達的信息，這才是我們設計的定義。平面設計的目的不僅是視覺表層的美觀度，更重要的、最根本的是信息的傳達。
所以好的設計就是，能準確直觀的傳播設計目的，被受眾更有效、更愿意接收信息的設計。簡單來講，信息（包括內容信息和情感信息）傳達的是設計的基礎，是設計中一切行為的第一準則，是對的設計。在此基礎上具備良好的美感傳達就是好的設計。
我們可能在設計學習過程中學到了很多的設計法則，形式美法則、創意思維、排版原則、色彩原則、字體運用原則。但是很多時候用到的時候就想不起來，用了也沒達到效果？
我理解更多的是因為沒有從根本上理解這些法則存在的意義、運用的目的。設計師應該做最吝嗇的人，過程中每一個視覺元素的運用都要有其目的性。這個目的性就應該是信息傳達和美感傳達。以此為標準反復檢驗自己的設計作品，相信我們能做出好的設計。
（一）客戶對設計的期待信息準確有效傳遞，受眾對信息要求直觀、易讀。
這是一個高效時代，時間就是金錢。同時是一個信息大爆炸的時代，每天我們會面對各種不同媒介的信息，不斷沖擊這我們的視覺。我們不能要求受眾有時間和耐心完整仔細的觀看閱讀整個設計。這就要求我們的設計，即便一眼，就能判斷設計究竟在表現什么信息，而不被其他不重要信息干擾。當客戶對表達信息有一個直觀的概念后，希望繼續閱讀下去的話，我們就要在易讀方面進行深化。
明確最重要的信息
對于設計需求的分析得出最重要的信息，最想傳達的信息
突出最重要的信息
將它擺放在突出的位置，整體的烘托，對比的凸顯，合適的構圖
次要信息
相對最重要的信息較弱
信息的篩選
設計中包含的信息必須有明確的效用，而不被不必要的信息干擾導致失去閱讀興趣
設置重要等級
針對內容設置重要性等級，然后根據相應等級進行設計。
信息分組
這是受眾感知多條信息的前題，將相關的信息放置或整合為一體，這樣就可以實現分組。大多數情況下三至四個信息組已經足夠了。
閱讀性文字排版 （閱讀性文字指的是需要受眾閱讀的，而非裝飾性、不需要識別性的）
在文字排版當中易讀是必須追求的。
對齊：為了達到易讀效果，首先要從對齊開始。
檢索：易于檢索目標內容，精心處理檢索方式。（依據版式設計原則中的對比，重復原則實現）
記憶：要點便于記憶，突出主要內容。（依據版式設計原則中的對比，重復原則實現）
文字：文字大小、字間距、行距、字體、文字的排布五個方面。過小的字體、過大的字體，過度裝飾的字體，不符合視覺流程，不合理的版式布局。都是會影響閱讀的易讀性。
（二）客戶對設計的期待能引人注意、獲得好的反饋，受眾希望從設計中收到某種刺激、有所收獲。
人們每天沒數量驚人的信息淹沒，面對潮水涌來的信息。我們的頭腦中會形成一個過濾器，只會對能引發我們興趣的信息，能夠得到某種刺激的信息，才能順利通過并留下清晰的印象。因此，想要設計從眾多信息中脫穎而出并抓住受眾的實現。就必須引人注目、傳遞刺激，讓受眾在你的設計上逗留。
美的視覺效果比較容易給人帶來刺激
這時候我們學習的各種原則知識，構成知識（點線面，平衡、對比、調和、節奏、變異.....）、版式知識（位置、比例、分割、留白、網格.....）等都可以充分發揮作用了。
滿足期待
人們希望沖設計只能夠得到收獲，包括有用的文字信息和情感上的。反過來如果已經知道了，沒有興趣，無我無關的信息，是無法吸引受眾的。選用一種能夠傳達設計內容及主題思想的吸睛元素就很有必要。可以是文字（禮物、服務、免費、抽獎、限時、折扣等）或者圖形元素、圖片。
吸睛元素與設計需求要匹配
選取吸睛元素必須與設計主題信息密切相關。例如，在定位是高品質的項目設計中，放置一個花哨刺眼的打折；在畫面中一個無關的美女。這確實很可能在短時間內贏得受眾的注意，但是當文字或圖片與設計需要傳達的信息完全無關的情況下。也會很快的失去他們的關注。
情感刺激
一個好的吸睛元素往往能激發受眾的情感——受眾會覺得驚喜，感覺自己的情感獲得了認可，也可能會對設計產生共鳴。一旦感情上拉近了受眾與設計的距離，就有可能增加受眾良好的反饋行動達到商業目的（購買產品、產生消費等）。
消極情感
人們被設計激發的情感并非總是積極正面的。更重要的是有針對性的激發觀眾的情感。應該根據不同的設計目的，激發觀眾內心相應的情感。例如一個減肥中心的宣傳設計，畫面營造一種胖人失落的畫面（沒有偏見我自己也是個胖子~），從而激發受眾不安的消極情緒。這也可能引起受眾的關注，并愿意深入了解。
受眾反應的不確定性
視覺會給人帶來一連串的生理上的、心理上的、情感上的、行動上的反應，設計是視覺經驗的科學。他包括兩個方面，一個是不以人為而改變的即生理感受的人的基本反應，另一個是隨即的或不確定因素構成。如個人喜好，性格等等、等等，導致我們無法完全確定受眾在面對設計時候的情感等反應。
相對穩定的方面： 主要是生理上的視知覺，人們的一些視覺習慣、視覺流程、視覺邏輯，如從上到下，從左到右，喜歡連貫的、重復，喜歡有對比的，還有在顏色方面人們最喜歡的其實是有對比的互補色等等。這都是跟人們的生理上的習慣有關，都是人生理機能的本能反應。作為設計師應該對這些知識能充分了解、靈活運用，設計是對人本的關注，首先應對文化與人的感知方式這些相對穩定的方面進行研究，并且需要我們在實踐中去總結。
不穩定的方面： 不穩定的方面主要是指情感、素質、品位、閱歷上的不同，在設計過程中你需要具備一定的判斷和把握能力，你需要客觀和克制，才能完成卓越的設計。
設計思維的科學： 設計是必須具有科學的思維方法，能在相同中找到差別，能在不同當中找到共同之處，能掌握運用各種思維方法，如縱向關聯思維和橫向關聯思維以及發散式的思維，善于運用科學的思維方式找到奇特的新的視覺形象，才能不斷發現新的可能。
設計學習過程中的總結和整理，有些內容來自網絡，如有冒犯請聯系我刪改！僅為自身學習提升的記錄，如果對內容有更好的理解，歡迎交流探討。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( axecq.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
近年來，行業內不斷探索廣告的新玩法，激勵視頻廣告成為一種愈加流行的廣告形式，當前已經是媒體主流變現模式之一，以滿足廣告主營銷效果、媒體變現效率最大化。對用戶而言，觀看激勵視頻廣告能夠獲得相應獎勵；對于客戶，激勵視頻廣告通過獎勵機制，得到更長時間的曝光來提升轉化率；對于平臺，有更高的變現效率能帶來更高的收益。
百度激勵視頻廣告承載著百度APP任務系統、權益場景、活動場景等的重要變現任務，本文將從激勵視頻廣告的框架、提升轉化效果兩個方面，來闡述容器結構設計與提升轉化效果的設計思考。
框架：建立場景核心轉化流程
激勵視頻廣告是獨立的視頻場景，場景內的元素布局、容器結構不依賴于所在的宿主場景，在整個交互鏈路中能夠采用更有創新的設計形式。
1、布局跨場景橫向一致
基于激勵視頻廣告的元素來明確內容分區，考慮元素作用與通用性可分為頂部框架區、附加掛載區、內容信息區、轉化決策區，在結構設計上，將核心獎勵計時組件置于頂部框架區并保持穩定展現，保證百度APP內的視頻廣告在布局上橫向一致性，同時也有利于場景之間創意交叉驗證與復用。
2、容器、元素組件選型
從激勵視頻的鏈路流程出發，結合主動交互行為的各類組件狀態：獎勵計時與完成、視頻播放與完播、瀏覽落地頁、退出挽留四種核心狀態。
1）獎勵計時與完成：考慮獎勵計時器會存在于多種不同場景情況，需要具備橫向統一的計時形式來穩定用戶預期，以及通過視覺反饋給予用戶明確的狀態變化感知，來降低不同場景下的理解成本，通過ABtest的方式，最終選用場景元素圖標與文本計時形式，圖標能夠根據獎勵的不同支持靈活配置，滿足多元化場景的適配訴求，同時選用視覺感知較弱的樣式與動畫形式，盡可能避免與點擊、轉化無關的元素動畫稀釋用戶對內容的注意力，從而影響廣告效果。
2）視頻播放與完播：播放狀態下，為盡量降低對視頻內容的遮擋，在轉化組件的呈現上，采用“延遲展現吸引觀看，漸進式增強吸引點擊”的手段，視頻完播狀態下呈現視頻尾幀，尾幀增加再看一個視頻功能，為想要獲得金幣的用戶縮短操作步長，提升激勵視頻廣告的分發。
3）瀏覽落地頁：瀏覽落地頁過程中也需明示獎勵計時，為了保證視頻場景和落地頁場景的計時延續與組件統一性，采用避讓計時組件的面板化落地頁容器。
4）退出挽留：當用戶在不同獎勵狀態下會在退出的主動行為，挽留彈窗承載挽留與再看功能的重要作用，彈窗作為前后鏈路場景的共性組件，在彈窗設計上頂部承載所在場景主視覺IP，以滿足多元化場景的下活動主視覺的延續，使激勵視頻廣告更契合所在活動場景。
3、轉化鏈路降步長
在原有的基礎路徑上，獎勵計時與倒計時結束的兩個環節僅有計時器形態的變化，元素變化是容易起到聚焦視覺的作用的，以倒計時結束為節點，將用戶從"視頻場景"帶入到"決策場景"，通過容器結構形態的變化來解放停留在計時器上的視覺焦點，面板結構能承載更多的增益內容，延展信息載量，視頻完播是判斷用戶對內容感興趣的重要契機，在視頻完播狀態自動調起落地頁，通過縮短轉化步長提升轉化效率。
激勵視頻廣告容器每一步迭代都伴隨大量的前置思考、歸因分析、嚴謹實驗，經歷多輪迭代最終完成流程框架搭建，后面我們仍要思考如何通過設計方法，在現有的框架上進一步提升轉化效果。
提轉：內容化與獎勵玩法助決策
在廣告創意視角下，通過內容信息命中用戶訴求、滿足心理期望能夠提升轉化效果；在用戶目標視角下，我們希望充分發揮激勵機制，給予用戶更多豐富的獎勵交互與玩法，持續獲取收益與滿足感。
1、增益信息前置，助力轉化決策
輪播推薦詞：推薦詞輪播的形式來營造場景內互動氛圍，在一些節日期間通過契合節日的情感化文案，讓內容更貼合節日營銷氛圍，同時將落地頁中的優質廣告賣點、數據生成的熱度等多元的營銷信息前置，助力用戶決策。
行動號召詞：不同廣告內容之間的轉化文案存在差異化的表達，通過符合廣告內容的決策性文案披露，將固定文案升級為營銷目標及類型特征文案，輔助轉化決策，在容器內每一個元素都應該作為廣告創意的一部分。
2、分段獎勵計時，引導視頻完播
點擊率、轉化率隨視頻播放時長的數據變化，發現呈現正相關的趨勢，我們希望用戶能夠選擇看完視頻，核心思路是將用戶從低變現效率場景，引導至高變現效率的場景，由此我們通過兩段計時獎勵的設計形式，激勵用戶可以拿到更多獎勵并將視頻看完，考慮多種不同場景以及理解成本的問題，最終選用兩段獎勵計時組件的方式。
3、彩蛋營造驚喜，提升轉化
為了更好的匹配各大電商平臺調起類廣告的預算，大促期間的突然出現的禮物彩蛋為用戶營造節日驚喜感，在點擊行為后，紅包元素的彈窗與彩帶動畫形式來承載金幣獎勵與氛圍，獎勵感知的觸達能夠提升用戶的獲得感，同時在獎勵彈窗上進一步承載調起任務，從而更好的滿足客戶營銷訴求。
4、強化轉化組件，增強獎勵觸達
延續以上驚喜感獎勵滿足促轉化的思路，針對下載類廣告，我們在轉化組件上進行與獎勵內容的結合，在任務計時完成但并沒有形成轉化的時機下，通過變色與光效視覺吸引來傳遞獎勵信息，通過強化獎勵感知和轉化組件來助力轉化決策。
寫在最后
激勵視頻廣告至今經歷了多個不同的階段，如何在商業效果與用戶感知之間選取一個平衡點，一直都是激勵視頻廣告的長久的設計課題，目前也只是一個開始，還有很多的設計提轉機會點等待我們去深挖，相信在不久的將來能夠探索更加多元的激勵玩法，發現更多契合用戶訴求的場景，為更好的價值生產不斷迭代功能與體驗，我們希望能夠給予用戶、客戶、平臺更多的價值增益，做用戶喜歡、客戶滿意、平臺有利的商業設計。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( axecq.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
藍藍設計的小編 http://axecq.cn