好的，看到?家這么熱情，那班班接下來就化身Johnson
編輯導語：用戶的體驗感對于一個產品來說，是至關重要的。一個好的產品能夠充分照顧到用戶的感受，從而擁有大批的忠實用戶，而品牌升級則是體現產品定位和發展策略的不二之選。當體驗設計遇到品牌升級，設計師該如何做？本文作者對此展開分析討論，一起來看看~
01 用戶體驗設計的現狀
過去，我們在用戶體驗中一直強調以用戶為中心，追求給用戶帶來更好的體驗，不斷強調一致性、易用性、可用性等等。但如今，我們放眼手機里的app的用戶體驗，在過去十幾年的積累下，用戶的使用習慣、用戶的認知都得到了很大的提升，產品的基礎體驗也基本都做到了使用流暢、一致性的現狀。
但這卻帶來一個問題：同質化嚴重。
比如，當我們打開電商類的app，發現某東越來越像某寶，xx越來越像xx。可能我們抹去了logo之后就不知道這究竟是哪家app了。
甚至，我還發現有的公司在設計時是從B抄個設計樣式，再從A抄個設計樣式，最后在從T上抄個樣式，最后設計結果成了大家看到的現象：設計越來越趨同。
大廠的動向
最近這兩年，我們頻頻看到大廠的一些設計動作：品牌升級、設計語言升級。
很多外行人站在一個旁觀者角色對升級的設計嗤之以鼻：“這升級了什么？怎么跟沒做一樣？”“花了幾百萬就做了個這，真不值”…………
實際上，其中的背后不是簡單的設計樣式更換，而是戰略定位的調整。
比如支付寶去年突然換了logo的顏色，而這背后的戰略調整是支付寶升級成生活開放平臺的戰略。
比如淘寶去年也換了字體logo的設計，而這背后的戰略是新淘寶要更好的鏈接內容、用戶、商業。
所以，看到這里，我們首先明確了品牌升級、設計語言升級不僅僅是設計樣式變化，不是設計師隨隨便便設計畫了個圖形，隨隨便便吸了個顏色，而是基于品牌定位與品牌戰略調整的背景，是通過多維度調研，積累了很多有價值的信息，經過科學的分析推導明確了設計方向，最終才形成可落地的品牌升級設計方案。
那么，問題來了！既然品牌升級了，在用戶體驗設計中如何體現新升級的品牌感呢，如何能體現品牌的定位和戰略呢？
當我們在收到品牌設計方案后，就開始面臨到體驗設計升級如何體現品牌感了，這個時候不是倉促的先定義新升級的顏色等樣式問題，而是需要先充分理解戰略背后的意義，理解用戶、理解目標、理解新商業方向……，再聚焦收攏在關鍵點上，從而針對體驗設計中的設計體系定義好設計原則，在最終落地到設計元素上，比如顏色、控件、交互等。
設計過程：品牌戰略理解-收攏關鍵點-定義設計規則-落地設計元素
戰略理解實質上就是公司未來業務調整，方向調整，目標調整，我們的設計一定是基于這個方向的。
比如2016年我在公司一次紅藍戰略定位后進行了2.0生態電商改版，這個紅藍戰略從字面意思理解很抽象，但實質是內容化、視頻化的業務方向，我根據這樣的戰略定位設計了創新的2.0的生態電商設計方案獲得了認可。
理解完戰略方向后，一般會進行一些發散性的收集。比如滴滴在早期幾年前的一次品牌升級分享案例里，那時候升級前品牌語是“滴滴一下美好出行”，后來在專車、順風車業務發展后，各業務定位模糊，需要針對業務重新定位梳理，經過發散了很多關鍵詞，最后針對不同業務線聚焦在舒適、活力、正式三個關鍵詞，形成新的滴滴設計語言。
資料來源：滴滴李大聲《c12d調分享》
設計原則也就是我們設計中的一份指南，是建立在前面的分析推導后，他所傳達的是設計價值觀。指導我們在設計中什么該做什么不該做。
說到這里，這就讓我想起來經?？吹胶芏嘣O計團隊定義自己的設計原則是：清晰、高效、簡潔。這么一看沒毛病，的確設計是要保持信息的清晰傳達、有效的展示、簡潔一些。但這些定義太過寬泛，毫無意義，根本無法指導實際的設計。
設計規則應符合什么規則呢？
首先，設計規則要貼近業務，真實而有效。
比如做外賣的要突出快、服務、準時的定位。做出行的要突出安全的定位。做金融的要突出收益增長等等，我們不能就籠統的把所有的不同行業業務規則都定義成清晰、高效、簡潔，這并不能形成差異。
以平臺要升級為“安全”為例，我們需要知道什么才是“安全”的設計規則，除了綠色、藍色，還有什么行為才會產生產生信任安全感。比如規范、統一、征信公信力、理性的設計。
這樣我們就可以針對升級“安全”的設計體系規范起來，把信息以用理性化的設計來呈現表達。
設計規則要有態度
實際上，每個設計都是有意義的，每個規則的背后都是不平凡的工作。舉個動效的例子，有的設計師會認為動效看起來很酷，那就加的越多越好，結果適得其反，用戶可能因為動效太多太酷不知道該干什么了。
谷歌在他的設計體系里提到“每個動效都是有意義的”，可見谷歌對動效的態度表達了自己獨特的設計規則的魅力。
螞蟻金服在自己設計體系里提到的獨特四點設計價值觀：自然、確定、生長、意義
這每一點都不是簡單的“清晰高效”這么簡單，具有深遠的設計指導意義。以“自然”為例，用戶對圖形、色彩、圖標等視覺感受的信息，遵從自然規律，降低用戶認知成本。舉例：明明紅色是總所周知的警戒顏色，我們用綠色來做警戒色，這就違背了自然規律。
說到這里，我們大概就能清楚明白設計原則的意義了，當面對市面各種設計潮流：抽屜設計風、大字體設計風、新擬物設計風來臨時，我們就可以從設計原則來理性判斷如何取其精華，去其糟粕，為我們的業務和品牌傳播來使用，而不是盲目的追趕潮流
最后，從設計規則推導出來后，到具體的設計元素：顏色、圖標、配圖、文字設計等，我們還需要結合品牌找到具有記憶性的點，形成dna記憶符號，這個記憶符號給用戶在視覺、觸覺等感官上加深印象。
說到最具有品牌記憶點的無疑是耐克、阿迪、可口可樂這些圖形深入人心，還有蒂芙尼藍等等。
比如最近要上市的知乎，核心定位是社區價值，他的logo以及app的開屏都體現了社區交流的屬性。
比如最具阿里云更新的品牌升級，利用光標這個符號貫穿整個設計體系，形成獨特的超級符號，可以說是一個很經典的案例。
資料來源：阿里公眾號
當然，提煉出具有記憶點的品牌dna的超級符號是需要經過長期推演和長期傳播形成的品牌記憶點。
最后，總的來說，當體驗設計遇到品牌升級，不是簡單的畫個圖形，吸個顏色，每個設計背后都有遵循的依據，都有背后的科學分析推導。所以，我們不要再盲目拿清晰、高效、簡潔來作為設計語言的理念了，需要探索真正有獨特觀點，貼近業務，貼近戰略規劃的設計價值理念，來指導未來長遠的設計發展。
文章來源：人人都是產品經理 作者：Hellen詠舍
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
設計驅動已經成為 vivo品牌重要的產品和服務理念。作為設計師，這意味著我們在承接日常設計需求外，還要主動發現并解決產品中存在的問題。設計提案，就是針對某個問題或機會點，系統分析產品現狀并給出解決方案，以實現設計驅動的重要途徑。
除了設計提案外，設計方法復盤、行業分析報告、流程規范建設等也可作為產出對象，受限于篇幅，本文所介紹的方法主要針對設計提案的選題。
過去的兩年里，UED 團隊的同學們共輸出 40+篇設計提案，我本人也寫過幾篇，踩過一些坑，也積累了一些經驗?？傮w來說，一份優秀的設計提案當然離不開嚴謹的分析過程、合理的模型選取和可落地性強的解決方案，但更前置的往往是設計提案的選題。
選題體現了我們是否定位了產品中存在的重要問題或設計機會點，決定了選用什么模型分析問題、產出什么解決方案。
△ 圖1 設計提案的執行過程
選題不當可能會導致：寫了一半才發現設計側根本無法解決該問題（比如解決問題主要依賴于內容引進），或者產出了方案但因問題優先級低而無法落地。因此本文主要基于 UED 團隊的實踐經驗，對目標導向的選題常用方法進行介紹，以確保我們的提案在“解決正確的問題”。
設計提案的目的是解決問題，但難點在于：要解決的問題并不是每次都顯而易見，且不是每個問題都適合用提案的方式去解決，產品有什么體驗問題、哪些需要用提案來解決，很多時候需要我們主動去發現和定義。
目標導向的選題方法，就是指從不同的目標出發，通過分析或拆解目標，來定位問題或機會點的選題方法（除此之外，我們還可以通過用戶體驗地圖分析、行業趨勢分析等來發現問題，這些本文暫不涉及）。
“設計是圍繞目標的求解活動① “L. Bruce Archer
按照雙鉆模型，確?！弊稣_的事”需要經歷發現到收斂的過程，將其用于選題便是選題收集、選題評估兩個階段。在選題收集階段，我們從體驗設計所針對的不同目標出發，通過對目標的分析和拆解找到待解決問題，初步確定多個選題方向。在選題評估階段，我們需要對前一階段得到的若干選題進行價值和提升空間評估，最終定義出合理的選題方向。
△ 圖2 目標導向的提案選題方法
體驗設計是用設計的思維和方法達到某種目標，互聯網產品的體驗設計重點關心的目標主要有商業目標、用戶滿意度、戰略規劃。因此，以目標為導向來收集選題，就是指通過分析影響以上 3 個目標達成的關鍵因素，來收集多個備選選題。
通過拆解商業目標收集選題
通過對留存率、日活數等核心數據指標的拆解來定位關鍵影響因素、確定提案方向，能夠讓提案結果更易量化、產出方案更易落地。
Step 1 了解產品當前階段的主要商業目標
一般來說，產品側每個季度或每年都制定 OKR 或 KPI（如將 vivo 商城復購率從 x%提升至 y%、將瀏覽器的日活從 x 萬提升至 y 萬)。設計師需要明確產品的核心數據指標是什么，尤其關注其中與用戶體驗相關度高的指標。以信息流產品來說，如果其內容主要來自于合作商，那么我們更應該關注閱讀時長和留存等指標，而非資訊內容豐富度指標。
Step 2 對商業目標按多個維度逐層拆解
明確目標后，需要對其進行拆解，才能將結果目標轉化為設計可發力的過程目標。目標的拆解需要確保每次拆解都要符合 MECE（同一維度、不重不漏）原則，常用的拆解維度如下所示。
△ 圖3 商業目標的常用拆解維度
以 vivo 商城為例，假設其 2021 年的目標是：成交轉化率提升 47.6%，達到 0.26%（數據已經過脫敏處理）。我們可以對影響目標達成的要素按照行為路徑進行如下拆解（本案例也可按公式法進行拆解）：
△ 圖4 成交轉化率拆解案例
Step 3 定位影響目標達成的關鍵因素
結構化拆解目標后，即可結合產品迭代歷史和現狀，對影響目標達成的關鍵要素進行定位，進而初步確定提案方向。接上文案例，由于下單→支付環節（即結算頁）的體驗優化剛進行不久，且通過購物車下單的用戶占比較少，因此可將提案方向定位至商品詳頁下單轉化率提升，初步確定選題“商品詳頁下單轉化率提升設計提案”。
通過產品戰略規劃分析收集選題
如果說商業目標是產品預期達到的結果，那么戰略規劃就是達到結果所計劃采取的路徑。從戰略規劃出發，構建新功能、解決新問題，協助產品達成戰略規劃，是提案可嘗試的重要方向。
方法 1 通過構建新功能幫助產品達成規劃
不同于商業目標，戰略規劃往往已經給出了接下來要重點發力方向、或給出了功能范圍。但一些情況下，規劃并不會具體到該方向上要做哪些功能以及做成什么樣。因此，設計師可以基于戰略規劃，以提案的形式對設計機會點和方案進行詳細分析，以協助產品達成規劃。
以 vivo 的一款視頻產品為例，為了提升時長，產品側計劃 Q1 季度提升視頻內容消費深度，但尚未給出從功能層面具體要做哪些改進。因此我們將提升用戶消費深度為提案目標，深入分析了深度消費的現狀和場景，提出了若干設計優化建議。
方法 2 通過解決新問題幫助產品達成規劃
由于產品功能模塊之間存在耦合關系，規劃中的新增業務可能使得已有功能體驗跟不上業務要求（比如信息流產品發力視頻方向，可能會對下載視頻的體驗帶來新要求）。通過分析新增業務涉及的場景和使用鏈路，發現鏈路中可能出現的新問題，是從戰略規劃出發確定選題的方法之一。
以 vivo 帳號業務為例，有個性化頭像昵稱的帳號一直以來占比都較少，由于之前社交場景較少，這種現狀對產品體驗影響不大。但隨著公司在直播、視頻等內容產品投入的增加，社交場景逐漸變多，頭像和昵稱也逐漸成為用戶社交的阻礙因素（比如使得主播與觀眾無法正常打招呼）。因此我們對現狀造成的問題進行了系統摸排，確定了將“提升帳號用戶信息完整度”作為提案方向。
通過用戶滿意度分析收集選題
除幫助產品達成商業目標和戰略規劃外，提升用戶滿意度也是體驗設計的重要目標?；诋a品用戶滿意度現狀和目標分析，我們有望快速定位產品中的低滿意度模塊，確定提案方向和范圍。
方法 1 通過滿意度調研數據定位問題
選題前期可廣泛閱讀相關調研資料和用戶反饋，對產品的滿意度情況有較為全面的認識。用戶滿意度可能來自于以下渠道：
由于不同渠道（甚至同一份報告）得到的滿意度數據可能較為分散，我們需要將低滿因素按功能模塊歸類，以便更好地定位問題。以 vivo 商城為例，通過閱讀商品詳頁用戶滿意度報告，并對低滿意度反饋進行歸類，我們發現低滿因素主要集中于以下兩個方面：
△ 圖5 商品詳情頁評價數據歸類
明確了低滿模塊及問題歸因，便可從問題出發得出提案主題。通過對 vivo 商城商詳頁問題的歸因，可確定如下提案主題：“商品詳情頁信息展示優化設計提案”或“評論發表率提升設計提案”。
方法 2 通過用戶情緒曲線分析定位問題
即使沒有滿意度調研數據，或有整體滿意度數據但沒有具體到功能，我們仍然可以通過繪制用戶體驗地圖、分析用戶情緒曲線，來定位滿意度低的模塊、確定選題方向。
繪制用戶體驗地圖的方法和傳統過程的區別不大：首先明確產品中用戶的主要任務或目標，列舉出用戶的主要行為路徑；然后基于用戶的目標，考慮用戶在每個環節想要的是什么，分析當前行為路徑中可能存在的用戶痛點或機會點。需要注意的是，由于只是收集提案選題，對場景和問題的分析不必過于深入，只需發現哪個任務或模塊體驗問題較多即可。
比如通過對 vivo 視頻用戶觀影行為的興趣曲線分析，我們發現看劇方面的體驗問題不大，但找?。ㄓ绕涫强磩∏暗恼覄。┐嬖诘耐袋c較多，因此可將找劇行為優化作為提案方向。
△ 圖6 追劇行為用戶體驗地圖（已簡化，僅供參考）
方法 3 通過產品功能競品分析定位問題
如果說情緒曲線是通過分析用戶執行任務的流程來發現問題，那么競品分析則是通過分析產品所滿足的用戶需求來發現問題。雖然功能多并不能代表體驗好，但基礎功能的缺失也可能帶來體驗問題。因此從功能范圍的維度進行競品分析，定位基礎體驗較差、或設計機會點較多的模塊，也是收集提案選題的方法之一。
為了讓我們在做競品分析時更加聚焦，對于復雜度較高的產品，我們有必要先按照功能模塊拆分，復雜度越高拆分粒度越細，反之則越粗。以 vivo 瀏覽器為例，若只拆分為搜索、信息流模塊則粒度太粗，可將某個模塊繼續拆分，以便進行競品對比時更加聚焦。
△ 圖7 瀏覽器信息流功能模塊拆分示例
拆分功能模塊后，接下來就是選擇競品了。需要強調的是，針對某個模塊做競品分析，競品應優先選取該功能模塊做的相對成熟的、有特點的競品，而不是只選擇主屬性相同的產品。比如要分析瀏覽器信息流評論功能與競品的差距，選取的競品可不局限于瀏覽器類產品，網易云音樂、今日頭條等 APP 都可作為對比對象。
選取競品后，可從結構層、框架層等方面對本品和競品間的體驗進行對比，以便發現存在明顯體驗短板的功能模塊。為了方便定位問題，可通過模塊子功能對照表對完整性進行可視化對比。當然也可以從操作反饋、美觀度等維度對比。
△ 圖8 信息流評論與主流競品功能對比
找出功能缺失嚴重、或使用體驗明顯低于競品的模塊后，可考慮將優化該模塊的體驗作為選題。比如通過將瀏覽器信息流評論模塊與競品對比后發現，其整體體驗均遠低于競品，因此可考慮將“信息流評論優化設計”作為提案選題方向。
小結
以上是 3 個以目標為導向發現問題、收集提案方向的方法，可根據產品現狀選擇部分或全部使用。發現問題階段一般來說需要至少得到 3 個以上待選提案主題，以便進一步評估確定。
得到多個備選主題后，接下來我們需要對其進行綜合評估，并最終篩選確定一個（如果是多人參與，也可以確定多個）當前階段重點著手解決的問題。
規范化選題描述
僅僅一行選題題目并不能幫助我們清晰地了解其價值和背景，為了方便評估和對比，我們需要將選題的描述規范化。由于設計提案選題和研究論文選題過程類似，因此可以借用《研究是一門藝術》②中給出的論文選題三段式模板：“我打算寫_，因為我想_，這樣就能_”來清楚定義選題的題目、要解決的問題、以及期望達成的目標。比如，我們打算以提升商城評價發表率為提案方向，可將其規范化描述如下：
△ 圖9 提案選題描述模板
對選題的價值和預期結果進行評估
通過模板我們描述了提案要解決什么問題、以及解決該問題給業務帶來的價值。接下來需要對備選選題按業務價值和提升空間兩個維度進行評估，目的是排除“問題存在但價值較小”或“價值大但設計側難以解決”的選題。
當備選選題難以決策時，我們也可以繪制一個簡單的二維坐標對其進行量化評估。比如，假設選題 1 是優化購物車使用體驗，選題 2 是提升商品搜索效率，如果前期預研發現設計側提升空間差異不大，但優化搜索帶來的價值相對較高，那我們就可初步確定選題 2 為提案方向。
△ 圖10 提案選題評估維度
與設計 leader 或產品經理溝通確認
受限于經驗和視野，設計師個人對選題價值的評估和設計 leader、產品經理間可能有所不同。因此正式敲定選題前，最好與設計 leader 及產品經理進行同步，達成一致后方可正式開始提案的撰寫。
小結
該階段的目的是對前期發散得到的選題方向進行評估篩選，以便將個人精力聚焦在提升空間大、價值大的選題上。為此我們首先需要按模板對選題方向進行整理，再對選題按設計側提升空間、業務價值大小兩個維度進行評估，最后與相關方溝通確認，最終敲定選題方向。
文章來源：優設 作者：VMIC UED.Vector
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
招行估計是考慮到沒有配置現任經理的詳情，又不想浪費標題右側的空間，才作此設計。
其他相關：這部分包含的基金公司、基金檔案、交易規則屬于并列關系，理應出現的分割線卻沒有體現，雖不影響投資者使用但反映出UI組件規范缺乏一定邏輯性。
交易規則：在購買時間點缺少了T日（交易日）收盤時間（15:00前）提示和周歷提示。頁面空間是富余的，完全可以將信息曝光提高投資者的時間感知度，而不是跳轉二級頁面才能了解詳情。
功能模塊十分豐富，cover了關于一只基金的所有直接和間接描述。直接的包含了概況、行情、歷史回測、持倉、經理介紹等內容，間接的包含了問答、討論、資訊、公告等內容。
在產品的廣度與深度方面，天天基金選擇了把廣度拉寬，將很多二級內容拍平，嵌入到一級頁面中，可以說非常適合經驗型投資者，但隨之而來的劣勢也十分明顯 - 頁面過長。
非常直觀，天天的基金頁面長度是招行（或螞蟻）的兩倍不止。
有了上面招行基金詳情頁的大致結構做支撐，這里就不把天天基金的頁面逐個模塊拆解分析了，我們挑一些有意思的來說。
基金概況：跟隨漲跌變化的紅/綠頁頭，這是天天最具標志性的設計之一，個人對此保留意見，這么大面積綠色在過去的一周，實在是令人焦慮。
凈值行情/歷史數據：天天基金在凈值模塊單列出了“單位凈值”和“累計凈值”的走勢圖，還直接標明了不同時段區間內的最高最低值。（“累計凈值”是基金自成立之日起至今的凈值表現，“單位凈值”是基金運作期間扣除分紅和份額拆分影響之后的凈值表現。）
聽說這是區分老基民和新人小白最直接的一道坎，當然作為一個UX設計師，我也就摻這一句，畢竟資格還遠遠夠不上老基民。
非常貼心的一點是，天天在這添加了定投該產品的收益可視化。根據歷史收益率回測和不同定投算法，進行一段時間內的收益率估算。與此類似設計的產品還有漲樂財富通。
特色數據：這也是經驗投資者非常重視的三個指標。波動率反映收益率波動的程度，越小越好；夏普比率指基金每承受一點風險能夠獲得多少超額收益，越高越好；最大回撤指基金凈值從最高到最低的降幅，越小越好。
基金持倉：這又是一個老基民的福利專區。上面分析過招行基金持倉tab的優勢，而天天直接把帶有重倉股盤中行情的持倉列表、資產/行業分布餅圖直接嵌入到一級頁面里，雖然默認只顯示前五只重倉股，但對于了解相關板塊行情也很有幫助。
這一模塊的二級頁面也支持投資者切換時間去觀察基金經理每一季度的調倉風格。其實我個人更傾向于直接把十大重倉股行情全都放進來，默認折疊需要時展開。畢竟調倉不是個高頻動作，我不會需要頻繁地跳進二級頁面去觀察調倉。
基金經理：作為后臺烹飪的cook，這塊的簡介過于“簡潔”了。其實次一級的經理詳情頁里有非常詳實的背景概述和任期間業績回報評估，完全可以精選一些標簽化的內容在一級模塊里完善包裝。
社交化：然后比較有意思的就是“社區”概念。天天基金上每只基金都分別有兩個“bar”，一個問答吧一個貼吧，貼吧包含了問答吧。
這里能體現出天天對于細分場景的重視。貼吧里的話題天南海北，吐槽的、圍觀的、提問的、表態的、發小作文的、曬收益/虧損的，啥都有。
天天的產品經理還是為提問用戶單獨開辟了一片凈土，讓內容的傳播與觸達更加高效。
回到UI層面，天天基金頁面的文本內容在邏輯結構上比較復雜，但視覺上沒有將不同層級的對比度拉開，導致文本信息過于平均，不利于重點信息的快速檢索。
財富號視頻：視頻可以展開和收起。產品還給它配置了觀看人次，側面為該基金公司和旗下基金產品做熱度營銷。
基金概況：除了基金相關的基本信息以外，模塊內展示了晨星評級和關注人氣。既有客觀權威評估體系，也有用戶層的氛圍烘托，通過兩層信任力建設占領用戶心智。
信任力背書：“支付寶金選”是由支付寶理財智庫、中國證券報聯合推出的一套理財產品評估體系，背后有一些專家KOL背書。能夠篩選出部分歷史業績表現優異、基金經理業績突出的產品。
相比于前幾個信任力的營造，這一點的重要性和優先級遠遠勝出。因此在視覺層面也用黑金配色體現出權威性和尊享感。
能夠很明顯地察覺到互金平臺和金融機構在產品包裝上的玩法不同：互金平臺傾向于權威背書和人氣營銷，金融機構傾向于指標構建和數據展示。
行情/數據：這一模塊增加了一個可以手動關閉的tag，是關于“風險回報比率”的描述，一個聽上去類似“夏普比率”的指標。優勢在于螞蟻直接量化轉譯了指標的結果——“好于同類98%基金”，省去了投資者分析指標的過程。
基金經理介紹：關于這部分，雖然在基金經理介紹的二級詳情頁里，天天基金比螞蟻財富要詳實得多，但一級模塊里螞蟻的人物包裝還是更到位?！敖鹋＊劦弥鳌焙蛯W歷/從業背景簡述能直觀地提高產品在用戶側的信任力。
持倉行情：這可以說是該頁面視覺創新的重頭戲。螞蟻財富由于相關個股數據缺失，并不能像招行和天天基金那樣橫向比對每個季度基金經理的調倉動作，對于經驗投資者研判這只基金來說，少了一個觀察維度。
而視覺層面的創新則顯得十分取巧，原本枯燥的個股行情列表被轉譯為可視化的矩陣，矩形的大小和底色能直接映射該股票的持倉占比和實時行情。并且橫向滑動的組件也支持在不跳轉的情況下完整顯示10只重倉股。
對于持有或長期關注這只基金的用戶而言，除非你要分析調倉，否則是不需要頻繁進入二級頁面查看持倉明細的。
以及細致到小數點后兩位的持倉占比，意義也不大，了解大致的配比關系即可。螞蟻這個可視化組件在帶來新穎視覺觀感的同時，也解決了這一問題。
對于產品而言，信息架構往往是最容易有爭議的部分。而金融產品的信息深度和業務復雜度尤為明顯，與之俱來的必然是各平臺在架構策略上百花齊放。
文章來源：站酷 作者：loven
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
文章目錄
一.函數防抖
二、函數節流
1.時間戳實現
2.定時器實現
3.用節流優化防抖(定時器+時間戳)
三、總結
四、例子
一.函數防抖
當持續觸發事件時，并不執行事件處理函數，一定時間段內沒有再觸發事件，事件處理函數才會執行一次；如果設定的時間到來之前，又一次觸發了事件，就重新開始延時。
function debounce(fn, delay) {
// 定時器
let timer = null
// 將debounce處理結果當作函數返回
return function () {
// 保留調用時的this上下文
let context = this
// 保留調用時傳入的參數
let args = arguments
// 每次事件被觸發時，都去清除之前的舊定時器
if(timer) {
clearTimeout(timer)
}
// 設立新定時器
timer = setTimeout(function () {
fn.apply(context, args)
}, delay)
}
}
當持續觸發事件時，保證一定時間段內只調用一次事件處理函數。
3.用節流優化防抖(定時器+時間戳)
防抖的問題在于如果用戶的操作十分頻繁——他每次都不等 設置的 delay 時間結束就進行下一次操作，于是每次都為該用戶重新生成定時器，回調函數被延遲了不計其數次。 頻繁的延遲會導致用戶遲遲得不到響應，用戶同樣會產生“這個頁面卡死了”的觀感。
用節流來優化，保證在一定時間段內會調用一次事件處理函數。
function throttle(fn, delay) {
// last為上一次觸發回調的時間, timer是定時器
let last = 0, timer = null
// 將throttle處理結果當作函數返回
return function () {
// 保留調用時的this上下文
let context = this
// 保留調用時傳入的參數
let args = arguments
// 記錄本次觸發回調的時間
let now = +new Date()
// +是一元操作符，利用js隱式轉換將其他類型變為數字類型
// 判斷上次觸發的時間和本次觸發的時間差是否小于時間間隔的閾值
if (now - last < delay) {
// 如果時間間隔小于我們設定的時間間隔閾值，則為本次觸發操作設立一個新的定時器
clearTimeout(timer)
timer = setTimeout(function () {
last = now
fn.apply(context, args)
}, delay)
} else {
// 如果時間間隔超出了我們設定的時間間隔閾值，那就不等了，無論如何要反饋給用戶一次響應
last = now
fn.apply(context, args)
}
}
}
三、總結
函數防抖：將幾次操作合并為一此操作進行。原理是維護一個計時器，規定在delay時間后觸發函數，但是在delay時間內再次觸發的話，就會取消之前的計時器而重新設置。這樣一來，只有最后一次操作能被觸發。
函數節流：使得一定時間內只觸發一次函數。原理是通過判斷是否到達一定時間來觸發函數。
區別： 函數節流不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函數，而函數防抖只是在最后一次事件后才觸發一次函數。
場景：比如在頁面的無限加載場景下，我們需要用戶在滾動頁面時，每隔一段時間發一次 Ajax 請求，而不是在用戶停下滾動頁面操作時才去請求數據。這樣的場景，就適合用節流技術來實現。
轉自：csdn
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
異常包括的主要關鍵字有try{}catch（）{}finally{} throw和throws五個關鍵字 。
下面我們來細說一下這五個關鍵字分別有什么用。
try catch關鍵字 這兩個關鍵字是連用的
1.如果try塊中的語句正常執行完畢，不會發生異常則catch塊中的語句都將會被忽略。
2.如果try語句塊在執行中遇到異常。并且這個異常與catch中聲明的異常類型相匹配，那么在try塊中其余剩下的代碼都將被忽略。
3.如果try語句塊在執行過程中遇到異常，而拋出的異常在catch塊中沒有被聲明，那么程序立刻退出。
finally關鍵字這個關鍵字中的代碼總能被執行（怎么我都要執行 ）
1.只要try中所有語句正常執行完畢，那么finally塊就會被執行。
2.如果try語句塊在執行過程中碰到異常，無論這種異常能否被catch塊捕獲到，都將執行finally塊中的代碼。
注：try—catch—finally結構中try塊是必需的catch和finally塊為可選，但兩者至少須出現其中之一。
如果catch中存在return，finally也會執行只不過執行的順序有一定差異 ，先執行catch里的代碼塊，之后執行finally里的代碼塊，最后執行return語句。
throw關鍵字拋出異常
throws關鍵字聲明捕捉異常
那么throw和throws有什么區別呢
1.作用不同：throw用于在程序中拋出異常；throws用于聲明在該方法內拋出異常。
2.使用的位置不同：throw位于方法體內部，可以作為單獨語句使用；throws必須跟在方法參數列表的后面，不能單獨使用。
3.內容不同：throw拋出一個異常對象，而且只能有一個；throws后面跟異常類，而且可以跟多個異常類。
知道了這五個關鍵字的用法下面我們來說一下幾個常用的異常代碼：
1.ArithmeticException 試圖除以0。
2.NullpointerException 當程序訪問一個空對象的成員變量或方法，訪問一個空數組的成員時發生。
3.ClassCastException 發生多態后，吐過強制轉換的并不是父類的子類時發生。編譯的時候可以通過，以為編譯的時候并不會檢查類型轉換的問題。
4.ArraylndwxOutOfBoundsException 訪問的元素下標超過數組長度
5.NumberFormatException 數字格式異常。
6.Exception 一般的異常都包括。
轉自：csdn
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
運動對數字產品的用戶體驗產生了深遠的影響，但是，如果界面元素沒有表現出基本的運動設計原理，則可用性會受到損害。在用戶界面的上下文中，動作不僅僅是視覺裝飾。它是一種強大的力量，可增強產品參與度并擴展設計交流的范圍。
我們的世界是運動之一。即使在靜止的瞬間，葉子也會發抖，肺部也會擴張。在數字產品設計領域，運動似乎是第二自然，這是對日常工作的擴展，可以毫不費力地加以利用。
從理論上講，使UI元素移動很容易。在預定路徑上定義點，然后軟件對間隙進行補間。實際上，它不是那樣工作的。工具和技術是必不可少的，但它們是從原理中獲取力量的。如果要提高數字產品的可用性，就必須以適用于無數用例的不變行為規則為基礎。
運動設計的起源
運動設計與UX的結合相對較新，但其根源是迪士尼。迪斯尼原理是為了講故事而提煉出身體運動的基本定律。它們使繪制的角色能夠移動和表情，但不能充分滿足現代用戶界面對交互運動的需求。
當代設計師試圖彌合這一差距。更具說明性的示例之一是動畫設計的十項原則，這是迪士尼動畫專家Jorge R. Canedo Estrada的改編作品。
在建立運動中用戶體驗的原則時，可以從以下幾點入手
A. 從UI動畫中區分運動設計
B. 闡明運動如何幫助可用性
C. 解開核心運動行為的內部運作方式
運動不僅僅是裝飾
動作設計不是UI動畫的代名詞。這一點很關鍵，因為UI動畫幾乎總是被當作一種經過深思熟慮的外觀，而與UX沒有任何關系（除了增加魅力）。動作不是裝飾，而是行為，行為只能幫助或阻礙用戶體驗。
兩種互動類型：實時與非實時
運動設計涉及兩個基本交互：實時和非實時。
當用戶在屏幕上操作UI元素時，實時交互可提供即時反饋。換句話說，動作行為會立即響應用戶輸入。
用戶輸入后會發生非實時交互，這意味著用戶必須短暫暫停并觀察所產生的運動行為，然后才能繼續。
實時交互：運動行為會立即響應用戶輸入。
非實時交互：交互后，用戶必須短暫等待并觀察動作行為。
運動支持可用性
運動設計必須以四種不同的方式支持可用性。
A. 期望：當用戶與UI元素交互時，他們期望看到哪些運動行為？運動是否符合預期或引起混亂？
B. 連續性：交互是否在整個用戶體驗中產生一致的運動行為？
C. 敘述：交互及其觸發的動作行為是否與滿足用戶意圖的事件的邏輯進程相關聯？
D. 關系： UI元素的空間，美學和層次屬性如何相互關聯并影響用戶的決策？運動如何影響存在的各種元素關系？
數字產品的12種運動設計原理
1.緩和
緩和模仿現實對象隨時間加速和減速的方式。它適用于所有顯示運動的UI元素。
放松的反面是線性運動。顯示線性運動的UI元素立即從固定速度變為全速，從全速變為固定。這種行為在物理世界中不存在，并且對于用戶而言似乎停滯不前。
UI卡和相應的椅子移動很快，但是由于緩和，它們可以平穩且受控地停下來。
2.偏移和延遲
當多個UI元素同時且快速移動時，用戶傾向于將它們組合在一起，而忽略了每個元素可能具有其自身功能的可能性。
偏移和延遲會在同時移動的UI元素之間創建層次結構，并傳達它們是相關的但又不同的信息。元素的時序，速度和間距不是完全同步，而是交錯排列，從而產生微妙的“一個接一個”的效果。
當用戶在屏幕之間漫游時，偏移和延遲表明存在多個交互選項。
這個加密貨幣應用程序一次引入了多個UI元素。它們的到來有些交錯，以通知用戶這些元素是相關的，但又是截然不同的。
3.父子元素關聯
父子元素關聯將一個UI元素的屬性鏈接到其他UI元素的屬性。當父元素中的屬性更改時，子元素的鏈接屬性也會更改。所有元素屬性可以相互鏈接。
例如，父元素的位置可以綁定到子元素的比例。當父元素移動時，子元素的大小會增加或減小。
父子元素關聯會在UI元素之間創建關系，建立層次結構，并允許多個元素立即與用戶進行通信。因此，關聯在實時交互中使用時影響最大。
藍色滑塊的位置控制背景遮罩的不透明度，燈泡周圍的發光效果的散布以及光強度標度的數值。
4.轉型
當一個UI元素變成另一個UI元素時，將發生轉換。例如，下載按鈕將轉換為進度條，該進度條將轉換為完成圖標。
從UX的角度來看，轉換是一種向用戶顯示其相對于目標的狀態（系統狀態的可見性）的有效方法。當UI元素之間的進度鏈接到帶有開始和結束的過程（例如，下載文件）時，這特別有用。
轉換表示下載的開始，中間和完成。
5.數據變化
在數字界面中，數據表示（數字，基于文本或圖形的表示）豐富，出現在從銀行應用程序到個人日歷到電子商務站點的產品中。由于這些表示形式與實際存在的數據集相關聯，因此它們可能會發生變化。
值的變化傳達了數據表示的動態性質，并告知用戶數據是交互式的，并且可能會受到一定程度的影響。當沒有動靜地引入值時，用戶參與數據的意愿降低。
動態引入值以向用戶顯示他們有能力影響數據。
6.遮罩
遮罩是UI元素各部分的戰略性揭示和隱藏。通過更改元素外圍的形狀和比例，遮罩會發出信號，表示實用性發生了變化，同時允許元素本身保持可識別性。因此，理想的選擇是諸如照片和插圖之類的詳細視覺效果。
從可用性的角度來看，設計人員可以實施屏蔽以向用戶顯示他們正在通過一系列交互進行中。
遮罩用于從圖像捕獲到上傳到在線店面中的過渡。
7.疊加
在2D空間中，沒有深度，UI元素只能沿X軸或Y軸移動。疊加會在UI的2D空間中產生前景色/背景色的錯覺。通過模擬深度，覆蓋可以根據用戶需要隱藏和顯示元素。
使用重疊時，信息層次結構是一個重要的考慮因素。例如，用戶在做筆記應用程序中應該首先看到的是他們的筆記列表。然后，可以使用滑動來公開每個消息的輔助選項，例如刪除或存檔。
重疊式運動可讓用戶快速歸檔或刪除此記事應用中的條目。
8.克隆
克隆是一種運動行為，其中一個UI元素拆分為其他元素。這是突出顯示重要信息或交互選項的聰明方法。
當UI元素在界面中實現時，它們需要一個清晰的起點來鏈接到屏幕上已經存在的元素。如果元素只是無處不在而突然爆發或消失，則用戶將缺乏進行自信交互所需要的上下文。
用戶可以放心地單擊彩色圓圈，因為它們顯然源自“添加注釋”圖標。
9.模糊
想象磨砂玻璃門。它需要交互才能打開，但是可以（在某種程度上）辨別另一端正在等待什么。
它為用戶提供了一個界面，該界面要求進行交互，同時顯示要跟隨的屏幕提示。導航菜單，密碼屏幕和文件夾/文件窗口是常見的示例。
模糊處理為用戶提供了重要的互動方式，同時讓他們保持產品敘事的方向。
10.視差
當兩個（或多個）UI元素同時移動但速度不同時，將顯示視差。在此，目的是建立層次結構。
A. 交互式元素移動速度更快，并顯示在前景中。
B. 非交互式元素的移動速度變慢并退回到背景。
視差引導用戶使用交互式UI元素，同時允許非交互式元素保留在屏幕上并保持設計統一性。
使用視差時，最重要的交互式元素移動最快，而非交互式元素移動較慢并退回到背景。
11.維度
維度使UI元素似乎具有多個交互方面，就像物理世界中的對象一樣。通過使元素看起來像是可折疊的，可翻轉的，浮動的或具有逼真的深度屬性而實現的。
作為一種敘事設備，維度意味著UI元素的不同側面被鏈接在一起，并實現了無縫的屏幕過渡。
維度意味著2D UI元素具有多個交互方面，就像物理世界中的對象一樣。
12.變焦
滾動和縮放允許用戶在空間上“遍歷” UI元素或增加其比例以顯示更多細節。
A. 滾動：滾動視角發生在用戶的角度更接近（或遠離）UI元素時。想象一下，一個拿著照相機的人走到一朵花前要近距離拍攝。
B. 縮放：使用縮放時，用戶的視點和UI元素保持固定，但是該元素在用戶屏幕內的大小增加（或減?。，F在，假設該人保持姿勢并使用相機的變焦功能使花朵顯得更大。
滾動：用戶的視點似乎越來越接近背景圖像。
縮放：用戶的視角不會更接近圖像。而是圖像的比例會增加。
運動就是溝通
互動體驗的需求運動在其所有的輕快和微妙的形式。當堅持運動設計原則時，即使最基本的UI元素也成為人類交流的復雜媒介。當這些原理被忽略時，運動就體現了自然界所沒有的特征。
運動設計與數字產品UX之間的關系正在迅速成熟。原則上的運動方法可以防止過度依賴趨勢，工具和技術的短暫使用。更好的是，它跨越了2D屏幕上元素的抽象運動與3D世界中運動感知之間的鴻溝。
文章來源：站酷 作者：DuiaDesign
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
表單已經存在了很長一段時間，自誕生以來極大地簡化了起草申訴和各種法律訴狀的任務。隨著信息與處理技術的進步，收集數據的手段也在不斷發展，而印刷表單已存在多年，我們可以從其設計中學到一些技巧。
用戶可以在文本欄內輸入信息，它們通常以表單和對話框的形式出現。文本字段組件的設計應為交互提供清晰的功能支持，使字段在布局中易識別、易填充和可訪問。
以下是組成文本欄的關鍵要素：
容器：可交互的輸入區域；
輸入框：在文本欄中輸入文字；
提示：告訴用戶給出的表單字段是什么信息；
占位符：是所需信息的描述或示例，用戶輸入正確信息內容后被替換；
幫助程序或驗證文本（可選）：單獨出現或以驗證消息的形式出現；
頭部圖標（可選）：描述文本字段的輸入類型；
尾部圖標（可選）：輸入文本的附加控件，例如清除，隱藏/顯示等。
它們大多數都是相對基礎的文本字段類型，被修改成了處理特定類型的信息，例如信用卡號。以下是我創建的UI中最常用的一些輸入類型示例：
為收集的數據提供幫助規避錯誤，讓用戶可以正確的輸入信息，從而使過程簡單高效。
文本欄的狀態可以通過視覺提示來實現，輸入信息時的狀態有以下幾種：未激活、懸停、禁用、激活，驗證、錯誤。所有狀態應清楚地被區分開，并在整個表單和應用中保持一致，簡潔明了，不要誤導用戶。
通常標簽定位有三種：頂部、左側和右側對齊。最適合的樣式將取決于表單的大小、主要目標、組件庫和要為其設計的平臺，但它們都有各自優點和缺點。
谷歌的“材料設計”指南中，普遍使用的下劃線輸入并不是最佳選擇。有趣的是，在一項研究結果中發現用戶更喜歡帶圓角的輸入框。
當用戶不熟悉所請求的數據時，這是一個不錯的選擇。
優點：易于標簽伸縮，充分利用垂直空間；
缺點：標簽與對應的文本欄，距離過元，增加用戶閱讀的時間成本。
與左對齊標簽相比，完成時間快了將近兩倍。
優點：標簽和輸入欄靠近，限制了眼睛移動的次數，從而縮短了完成時間；
缺點：難以快速瀏覽表單并理解所需的所有信息。
在移動設備上效果很好，因為它們不需要太多的水平空間。
優點：用戶可以快讀瀏覽輸入標簽和輸入文本；
缺點：需要更多垂直空間。
表單中的所有文本欄，若設置相同長度確實會顯得非常美觀，但實際在操作上，卻很難完成。
占位符文本消失會給用戶制造緊張感，而去掉標簽，用戶則無法在提交表單前檢查他們提供的信息。如果在設計時需要極簡的表單，可以使用“材料設計”的浮動標簽法。表單內的占位符文本還會使用戶感到困惑，最好在字段外使用提示文本。
使用自動完成功能，填寫時會幫助填寫及查詢。一般在輸入時可以看到，對查詢內容按Enter或右箭頭鍵就完成了填寫；
使用Auto-Suggest搜索關關鍵字和短語時，下拉列表會顯示多個建議；
預填充字段會經常使用智能默認值，比如通過IP或地理位置，就能檢測獲取到用戶所在的國家和城市，或是根據常見的場景，自己定義默認情況下的內容。需要注意的是，電子商務是一個例外，請勿預先設置與購買相關的任何偏好，比如尺寸或顏色；
還有一種應用情境，自動完成功能可以幫助用戶做出正確決定或避免錯誤，比如用戶轉帳時看到賬戶余額等，請一定要提供該信息。
指的是用戶輸入信息后，可以實時檢查輸入內容的有效性，而不是等用戶提交表單時一次性檢查。正確應用，降低信息出錯率：
在輸入內容的文字欄下方顯示驗證消息；
不要突然蹦出嚴重警告，填寫的消息錯誤時，應告訴用戶如何解決，而非責怪。
消除視覺及認知負擔，使界面看起來更加簡潔。
不要將全名和日期之類的文本分成多個字段；
不要多次詢問相同的信息。
逐步公開，提供必要提示即可，幫助用戶管理復雜信息。
根據用戶回答，條件邏輯允許在表單中自動顯示、隱藏字段和跳過頁面。這種方法不僅可以減少字段數，而且可以使填寫過程更像對話，也更具個性化。
簡化表單的最有效方法，其中之一則是為相關字段進行分組。格式塔心理學里有許多種分組原則，使項目有關聯性：接近性、相似性，連續性、閉合性和連通性。在界面中，如果將數十個非結構化字段分組為幾個可管理的集合，將顯著提高表單的可用性。
一欄布局能為用戶創建一個清晰的完成路徑；使用多列表單布局，會導致用戶跳過實際需要輸入的字段，將數據填寫到其他位置，這會迫使用戶停止甚至放棄填寫。
有時，即使刪除了所有不必要的內容后，某些表單還是很龐大。將大型任務分解為一系列的小任務反倒容易得多，也能激勵用戶堅持到最后。
顯示步驟，直觀地告訴用戶實際進度，這能提高用戶滿意度并激勵他們繼續前進；
不要細化表單，太多的步驟非常啰嗦，只會惹惱用戶；
對關鍵信息進行總結以減輕用戶焦慮，在最后設置復查步驟，幫助用戶檢查。
如果表單足夠大，可以分成多個步驟，那么就應該有一個單獨的、重點明確的界面來專門處理它。在導航中用其他鏈接會破壞正常流程，導致邏輯混亂，而且在小型彈出窗口中也不建議使用多步驟表單。
Android或iOS提供了幾種不同的鍵盤類型，每種類型的鍵盤都旨在方便不同類型的輸入。為了簡化數據輸入，在編輯文本字段時顯示的鍵盤應適合該字段中的內容類型，同時也要注意鍵盤出現的位置。將文本字段放在上方區域，避免滾動展示。
允許密碼取消隱藏來代替多次密碼輸入，這對于生成密碼的應用程序也更有效；
隨時顯示密碼要求，并顯示用戶滿足了哪些條件，方便查看進度；
使用強度表鼓勵用戶創建更強更安全的密碼。
文章來源：站酷 作者：UX辭典
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
業務場景拓展，字段增加又增加，原本眉清目秀的表單變得面目全非。
想要將這些復雜信息、組件組裝成用戶易填的表單，常常會讓設計師陷入無限的糾結。本文章聊聊用戶體驗視角設計表單的思路，希望對大家有幫助，歡迎一起討論交流。
結構如下：
表單是數據錄入、數據展示的重要工具。
生活中隨處可見，比如面試要填表單、辦銀行卡要填表單、入庫要填表單…
互聯網產品設計中也離不開表單，如注冊、登錄、商品錄入、功能設置…
表單主要由這四類元素組成：標簽、輸入域、操作按鈕、提示信息。
1. 標簽
標簽文本主要是解釋輸入項的含義，一般不宜太長，需要簡潔明了，快速讓用戶理解。
標簽對齊方式有左對齊、右對齊、頂對齊、內對齊，都有各自優缺點，不同場景酌情使用。
2. 輸入域
輸入域是表單的核心，是錄入信息的核心交互部分，為了不同信息更易錄入會采用不同交互組件。比如：單行文本框、多行文本框、單選框、多選框、數字輸入框、金額輸入框、日期、日期區間、人員選擇、部門選擇、圖片、文件等，具體組件可以去查看 Ant design、ElementUI 官網。
3. 操作按鈕
操作按鈕是表單信息錄入完成后，繼續或取消任務的觸發器。
為了讓用戶視覺聚焦和更快完成任務，操作按鈕分為主次按鈕，通常主任務操作為主要按鈕，次任務操作為次要按鈕，并且一個場景中通常只有一個主按鈕。比如，提交和取消，保存和取消等。
4. 提示信息
錄入提示：幫助用戶更具象的理解錄什么怎么錄。
幫助提示：表單中如果標簽信息無法讓用戶理解，可以提供幫助信息讓用戶更準確的理解，通常在標簽的前/后有一個幫助按鈕，點擊/鼠標懸浮按鈕出現有幫助信息的彈窗。其他還有頁面幫助信息，新手引導幫助信息等。
錯誤提示：幫助用戶理解哪里錯了和怎么做正確。
表單設計目標：讓用戶更輕松獲取表單信息，更容易懂，更快速完成表單信息錄入任務，如果還能讓用戶過程很愉悅就更妙了。（用戶體驗視角）
設計方法：通過降低用戶行為負荷，提高表單設計的用戶體驗。
行為發生的常規路徑：通過視覺輸入信息到大腦 （視覺）— 大腦消化信息（認知） — 采取動作（動作）。
視覺負荷：用戶在屏幕上識別和尋找信息，都屬于視覺負荷，信息獲取越輕松視覺負荷越低。
認知負荷：大腦處理信息時理解、思考、記憶都屬于認知負荷，復雜陌生信息的認知負荷需要消耗大量腦力；所以減少認知負荷的核心是減少用戶思考，甚至是不要讓用戶思考，成為大腦潛意識認知的決策。
動作負荷：用戶在使用產品時如果操作太繁瑣步驟太多，有可能會中途放棄，這就是動作負荷帶來的影響。所以在不大量增加視覺負荷和認知負荷的前提下，減少交互步驟可以降低動作負荷。
通過降低視覺、認知、動作負荷的“三招”，提升行為產生節點間轉化率，讓任務行為發生更容易。
誤區：有些人陷入了設計極端，認為操作越少交互設計就越好，實際上用戶能更好閱讀并理解比少一步簡單操作更重要。
補充：心理負荷在特定場景也是影響用戶行為發生的重要因素，如隱私、健康、安全、財物等。
1. 降低視覺、認知負荷
表單的信息是視覺負荷和認知負荷的源頭，所以如何設計信息易讀易理解就尤為重要。
灰機的方法就是先盤信息，再梳理（該拆的拆，該合的合，該減的減），然后有節奏編排信息。
就像搬家后收拾房間，有一大堆東西需要整理，我們通常會先盤下有哪些東西，然后就是該丟的丟，該放在一起的放一起，最后分門別類放在房間的合適位置。
拿到表單信息后不著急動手，先了解此表單背后的業務場景，理解每一條信息字段背后的業務價值。這是有說服力設計的核心支撐。
通過拆、合、減的方法，歸類組合信息。字段信息非必要就減掉，相關性高的信息放一起，梳理的目的是讓信息歸類更符合用戶認知，讓信息更易被用戶理解。
技巧點：
有節奏展示
信息有節奏展示有利于用戶更高效獲取、理解信息。畢竟如果信息像機關槍子彈一樣連續涌入大腦，誰都沒耐心看，并且大腦消化也跟不上。
技巧點：
2. 降低動作負荷
通過減少用戶行為成本，達到降低動作負荷的目的。畢竟錄入信息方式越容易，就更容易完成表單錄入。
技巧點：
文章來源：優設 作者：灰機
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
Dashboard在B端設計的工作中是一個繞不開的話題，在此我根據自己工作中實際的一些經驗總結給大家歸納出一篇更符合工作場景中Web端的Dashboard設計內容。
Dashboard的中文直譯是儀表盤，最初與dashboard相關在界面出現的是蘋果電腦系統Mac OS X v10.4 Tiger操作系統中的應用程序，用作稱為“widget”的小型應用程序之運行基礎。
2013年Stephen Few寫的《Information Dashboard Design》中指出“儀表盤是為了實現某些特定目標而對重要信息進行的視覺傳達，對一屏上的內容進行組織呈現使人一瞥便能掌握其所傳達的信息。簡單點來說就是：為用戶提供全局概覽，讓用戶快速掌握工作進展及進入工作狀態并可以訪問最重要的數據，功能和控件。
Dashboard設計案例
以下是Dashboard常見4點設計不是很好的案例，現在帶大家一個個看下怎么才是更為合理。
案例一：右邊Dashboard上的信息做了層級的區分，相對左邊更加直觀。
案例二：左邊Dashboard顏色偏熒光色，色彩語言相對右邊不適合長期工作使用。
案例三：設計方案時沒有采用格柵格化解決適配對不齊等等問題
案例四：dashboard模塊之間間距沒有呼吸感。
B端設計中，設計師要實時了解哪些是重要內容以及核心數據。Dashboard可以直接傳遞出：“業務整體狀況如何？有哪些關鍵指標？各指標的運行情況分別如何？哪些指標出現異常？需要用戶做些什么？”。由此可知，B端Dashboard產品中大多數都以看為主，輔以功能控制。主要分為監控操作、分析處理兩大場景。當業務較為復雜時，可以用戰略概覽場景提供快速入口。
1.監控操作：
使用戶可以一目了然地檢查其狀態，提供關鍵指標實時監測并且告知異常狀態。更重視實時觀看狀態。
2.分析處理：
通過數據圖表，配合控件進行不同維度的數據分析。以數據為中心，并顯示盡可能多的相關數據視圖。
數據性Dashboard。數據概覽可視化展示為主。幫助用戶提供較為直觀數據維度，更好分析決策。
綜合性Dashboard，既有提供數據全局概覽可視化，同時也能快速在頁面進行操作完成工作。國內B端產品最常出現的Dashboard功能模式。本篇文章也是著重介紹如何完成這個類型需求
3.戰略概覽：
在復雜的業務中，可以呈現業務分散的重點信息，用戶可以通過提供入口快速跳轉至相關模塊。
B端設計過程中每多了解一個維度分析就更有利于下一步Dashboard框架搭建。因此在對Dashboard有了一些簡單了解之后，我們再來了解下用戶場景。例如：用戶是財務人員審批商戶充值申請。工作人員進入dashboard之后先是進行充值打款申請。那么設計時可以考慮在Dashboard中加入常用功能：充值。并且需要給到相應充值數據概覽：賬戶余額。每個B端產品都有自己特定工作場景。因此從用戶、場景和任務這三方面考慮，可以做到幫助設計師更清晰設計dashboard布局以及設計自查。
因此以上這些信息都是需要在設計Dashboard時弄清楚的內容。
信息處理
當弄清楚需要呈現信息內容后，需要進一步對信息做處理。從用戶的角度，舉個例子在FMS財務系統記賬中，財務需要查看季度報表。那么數據的單位以默認季度呈現會更為符合使用用戶需求，準確且高效。具體可以從以下四個維度來做進一步處理：覆蓋范圍、時間跨度、粒度、個性定制。一般核心指標不超過7個，確定核心指標的聯系及優先級。
合理的信息結構能夠幫助用戶高效閱讀，理解內容。如何將信息碎片有邏輯地組合在一起，合理呈現和布局，選擇使用什么結構視內容而定。
舉個例子：
對于管理者的角色來說使用Dashboard的訴求是：及時把控業務情況
信息處理內容：
1.掌握重要業務數據：經營數據，訂單數據，客戶數據；
2.了解員工工作進度；
3.處理急需解決的工作任務。
對于執行者的角色來說使用Dashboard的訴求是：高效完成工作任務
信息處理內容：
1.急需解決的工作任務：待發貨訂單，待退款，待跟進客戶
2.了解自己的工作進度
3.經常使用的功能：發布商品，添加客戶，開單
4.查看重要通知公告：公司發布的公告
Dashboard表現結構常見兩種類型：卡片型、流程型。
卡片型
最常見就是卡片型。即將有相關聯的內容進行分組呈現，讓Dashboard內容歸類而不雜亂無章。
流程型
內容相互之間具有一定的邏輯關系，如地理位置關系、數字包含關系、對象父子關系等，這種結構可以讓對象之間的邏輯關系十分直觀。很直觀的呈現了資源對象之間的相互關系。
國內B端產品一般是由以下這幾個部分組成的。全局導航、數據概覽、待辦事項、常用功能、任務進展、平臺推送、數據圖表。下面帶大家仔細看下具體每個部分具體如何設計。
1.全局導航
在B端Dashboard中，全局導航一般由三個部分組成。平臺LOGO、功能入口導航、快捷功能導航。
1.1平臺LOGO
一般這里都會放LOGO，對于一些壁壘標準化B端服務，這里通常是給好標準規則，后臺自動配不同客戶的LOGO。因此要考慮到區域的色彩是否適用各種不同LOGO。如果是OA或是定制化B端服務，那么就可以直接定制設計。
1.2功能入口導航
就是菜單導航，在B端Dashboard一般都是在側邊。建議最多不要超過9個，遵循7±2原則。盡量將同類型歸類，好好利用下二級分類。另外入口不要太深，用戶容易找不到入口。盡量設計優化合并來減少用戶使用負擔。
在國內B端產品中，最常就是將功能入口導航放在側邊。適用于更專注功能和快速操作的系統
優點：
拓展性，一級導航的數目可以展示更多；
層級清晰，一二三級導航都可以流暢展示；
操作效率高，用戶在操作和瀏覽中可以快速定位和切換當前位置。
缺點：
視覺動線左右折回，比頂部導航更易疲勞，
內容區的排版空間更小，需要考慮適配問題。
在國內B端結構比較龐大的后臺中,通常會將功能入口導航設計為混合模式?；旌夏Ｊ骄褪菍⒐δ苋肟诜譃轫敳颗c側邊兩邊都有。這是因為側邊模式已經無法層級擴展性已經無法很好的滿足產品架構了。
優點：
層級拓展性強，可達四、五級導航。
缺點：
操作難度上升、視覺動線更復雜。
還有一種模式：頂部模式，這種模式在國外產品中較多，在國內的B端產品中較為少應用。原因之一是起初最早的國內B端產品就采用這種排版模式，在國內形成了一種用戶操作習慣。國外最常見的B端頂部導航：saleforces、hubspot、zoho。
優點：
沉浸感比側邊以及混合都要強，幾乎不會對于用戶的閱讀行為有干擾，因為Web也有頂部瀏覽器菜單。
缺點：
一級導航欄的欄數及字段內容受限嚴重。國內B端產品會有很多快捷功能就更不利用采用這種模式
1.3快捷功能導航
一般包含：消息通知、賬號信息、幫助中心、設置。在國內B端產品中基本上都是在右上角
在B端Dashboard中，數據概覽通常都是選取最關注的數據指標來展示，而不是全部數據；選取最關注的時間段，而非全部時間段。
構成：數據名稱+數字
這個模塊在設計表現上最重要就是信息層級的設計處理。如何能夠讓用戶一眼就看到最關注的數據內容指標。設計時注意突出數據才是關鍵。設計時關鍵數字上就要字號大一點，甚至可以采用特殊的數字字體，例如DIN系列，來加強對比。
待辦事項模塊通常是應用在執行角色的Dashboard中。節省工作人員尋找任務的時間，避免遺漏任務。
構成：待辦事項名稱+數字+可點擊跳轉的鏈接
待辦事項的展示方式可以是數據可視化也可以是數據概覽。但是有一點，數據必須是要能夠點擊的，因為待辦事項就是要有入口去操作。同時也可以把待辦事項平鋪出來，平鋪幾個可以根據具體情況定。如果待辦樣式本身很多的情況下，可以采用tap切換的樣式全部展示出來。
用戶高頻操作快捷入口，點擊跳轉相應操作頁面。這個模塊每個b端產品都不一樣，需要仔細反復斟酌是否是用戶需要的高頻功能。
用戶當前最關心的任務，常用進度條或者時間軸的形式表示。
平臺用來觸達企業的信息，一般有產品更新動態，學習培訓，客服，廣告推送，活動消息（這個一般比較常出現在平臺類的b端產品中）
卡片式數據圖表可以拆分成圖表+輔助兩種組成部分
7.1圖表
B端設計師需要準確通過圖表來表達出用戶需要的維度信息。
7.1.1折線圖
隨時間（連續內容）而變化的連續數據，適合表現趨勢。Y 軸刻度值選擇要合理，以數據波動要最大化的顯示
7.1.2面積圖
面積圖和折線圖比較類似，針對只有單個數據類型有面積區域的表達效果比折線圖好。數據類型盡量不要超過2個，有2個數據類型時，注意調整面積區域的透明度以及色系保持統一
7.1.3柱狀圖
通常用來統計累積疊加數據，數據之間能夠非常清晰直觀對比。柱狀圖的單位寬度不要是固定值，單位寬度之間間距在不同分辨率屏幕下的對比要合理。不用大圓角元素，不夠嚴謹，太活潑。最多使用兩種顏色，一種默認，一種hover或tap，保持界面統一性
7.1.4扇形圖
有共同的上一級層級作為統計總合，數據之間平級且有占比。數據必須是正整數，至少兩個以上數據，且用不同顏色表示
7.1.5環形圖
與扇形圖很相似，但是比扇形圖更加直觀瀏覽且不被搶視覺。避免過于太細太粗，控制好留白呼吸感
以上是常用的圖形圖表，絕不是全部。有興趣的同學可以到以下兩個網站可以利用碎片化時間擴展學習
EChart：
https://echarts.apache.org/examples/zh/index.html
AntV:
https://antv.gitee.io/zh](https://antv.gitee.io/zh
7.2輔助元素
卡片型圖表的第二部分也就是輔助元素。輔助元素里面還有很多細節元素組成：標題、軸、提示信息、標簽、氣泡信息、功能（篩選、導出、保存）。當然在實際設計中，會根據場景去修飾刪減一些元素，以此來減少冗余信息，幫助用戶快速達成目標，在最少的時間內獲取更多的信息。
7.2.1標題
標題是區分卡片信息，迅速讓用戶了解卡片圖表的重要元素。通常需要斟酌嚴謹不重復，簡潔概括。
7.2.2軸
軸上最重要的內容就是單位，將每個數據在同一軸上都是維持同種基準。便于進行數據測量。
7.2.2.1軸的細節
現在知道了軸由哪幾部分構成，那么接著了解細節
軸線
軸線細節一般只考慮是否顯示，在有網格線的情況下，可以考慮隱藏x/y軸線。通常顯示數據的軸作為隱藏，突出視覺重點，減少不必要的線條。
軸刻度
軸刻度是軸線上的間距不宜過密，確保信息可讀性以及呼吸感，根據 7±2 法則，在可見的卡片內盡量保持這個規則，可以利用抽樣顯示的手段來優化軸標簽重疊的問題，這種一般是在連續性內容上可以使用。若軸上單位信息確實過多，雖然是連續性內容例如展示30天單位，由于本身卡片信息不是過于最重要層級，設計在相對狹小空間尺寸中，那么建議考慮在軸線上安排滾動條，并將重看單位放置前位。設計特別注意點，將滾動條設計作為輔助元素不宜搶視覺。
網格線
網格線是用來輔助圖表數據直觀對比的，增加數據更快速的閱讀性。舉個例子：數據展示軸線在左邊。那么離左邊最近的數據圖形可能不需要網格線就能立即對應到相應數字。但是越靠近右邊的數據圖形就相對比左邊的數據圖形就比較難一眼識別。因此網格線也擔任了刻度尺的功能。在設計網格線時要注意網格線更多是輔助的角色。表現類型可以選擇虛線或是實線。但是要把握好顏色選用不搶視覺重點又能看到。
7.2.3提示信息
以對照的方式來理解可視化對象的項目歸類信息，總結圖形形狀和文本組成內容。
7.2.4標簽
在圖表中，標簽是對當前的一組數據進行的內容標注。根據不同的圖表類型選擇使用。
7.2.5氣泡信息
當標簽默認不顯示，氣泡信息一般是鼠標tap或者hover時，顯示該位置的數據。在簡潔的頁面中，也能讓用戶直觀看到信息對應數據結果
7.2.6功能
這個模塊涉及的內容偏多，在表單頁面更常出現，以后有機會可以單獨說。一般常用功能如篩選、導出、保存。可以讓用戶控制和友好的體驗
確定B端產品的設計風格
首先tob的產品dashboard說到底還是給使用用戶所使用，也就是“人”。所以通常情況下dashboard除了傳遞出用戶想要的數據信息，還要傳遞服務于人。此外最重要的是B端設計師需要理解項目背景。例如某個財務應用平臺不屬于科技未來感，而是突出一種安全，高效，具有客戶親和力的商業產品特性。那么關鍵詞：服務、輕松、高效、親和、精致。那么一個干凈、相對輕量、統一的Dashboard UI界面就提煉出來。
色彩
常說色彩是一種情緒版，在Dashboard設計中，色彩也是映射關鍵詞的非常重要一個環節
字體
B端產品一般都是以數據為主要信息源，針對一些關鍵信息指標時，可以采用特殊的數字字體。由于本身數字字體包內存不大，所以也方便調用。例如DIN系列等等
設計稿尺寸
本篇內容都是針對pc端內容，具體移動端以后有機會會分享。大多數B端設計師都知道以1440x900設計，但是在工作中會以埋點數據了解到事實上真實場景還是以1920x1080的尺寸為多數。畢竟時代不一樣了。以1440做設計主要還是考慮從上下兼容的角度的。B端與C端不同，C端往往照顧大多數的用戶群體或是主要消費力群體。但是B端一般不會放棄任何一個用戶，哪怕定制化。這個在C端是不太現實的。因此適配對于B端產品來說也是尤為重要。
設計原則
上面的內容更多是闡述每個部分的內容，實際工作中設計Dashboard時不一定按照那個順序進行，因此在此再強調下設計Dashboard的設計順序以及原則。要先弄清楚目標用戶以及使用場景，確定好關鍵的大約7個核心指標。將用戶整個流程梳理流暢之后，再開始考慮Dashboard設計執行。
同時在設計執行上也要特別注意幾個點：
1.突出核心指標（7個左右）
2.信息層級區分
3.減少用戶選擇，盡可能默認給到用戶需要的數據維度
4.界面簡潔嚴謹
5.避免過多顏色與不統一
6.數據維度正確圖表選擇
設計的注意事項以及建議
1.tob的設計師要了解業務所處的周期在什么樣的階段。在探索期建議dashboard的設計應用于市面上現成的組件進行搭建，以便與研發團隊一起為業務助力。更好更快的發展。
2.在tob的dashboard設計中，設計師要特別注意數據表現的落地效果
3.當dashboard只在設計層面改版，并且改版內容過大時，推薦保留舊版入口，提前進行埋點用戶以便應對用戶對于大版本適應緩解焦慮。如果有新功能或功能調整要及時加入一些引導設計，以便減少用戶的學習成本。關于引導設計的內容歡迎參考我的上一篇文章：《B端必看的引導設計（一）》
4.允許用戶定制和共享dashboard，雖然不適用于所有的B端產品，如果類似于團隊協作中多種角色共用一套的dashboard平臺，可以考慮引入這個功能。幾組定制模塊可以滿足于不同角色的用戶需求，并且能夠增加dashboard的使用率
5.dashboard關鍵信息數據盡量設計在一屏以內，作為數據可視化，內容快速瀏覽獲知全局，并且完成任務是比較重要的。
6. 突出統計數據的變化并對異常情況作出反應
7.數字設置不一定要設置為右對齊，但是單位是金額，那么要將金額設置為右對齊，為了使用用戶識別方便，快速比較。
8.設計完Dashboard一定要自查一遍，是否真的符合工作人員的使用場景。有沒有理解不準確的地方。
為什么b端設計師要懂得Dashboard，在很多b端業務場景中，有個特點，設計師常常會接到大量數據展示要求。如果設計師對dashboard缺乏認知，就有很大的可能性會造成信息雜亂，并且在Dashboard的界面中充斥著一些無關緊要的指標，這就是失去了Dashboard存在的意義。另一方面在b端產品中，Dashboard往往是以首頁的形式出現的,是非常重要的。
文章來源：站酷 作者：一九互七
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
