從去年到今年，眾多行業都遭受到疫情這只黑天鵝的沖擊，然而，中國經濟也最快的從疫情中恢復到常態，其實這一過程，離不開數字化。從今天來看，數字化幾乎是各行各業都在試圖接受的一個進化路徑。
早前YC中國創始人及首席執行官陸奇認為，數字化是把人們需要的信息獲取后存在一個特定的介質上，使得信息本身與這些信息所描述的實體分離開來，進而被大規模、高效地處理后又被傳遞回人們所使用的終端，被進一步利用的過程。
他指出，在今天的知識經濟時代，它是由大規模的信息、數字化來驅動的。
在過去60多年的歷史上，從第一代IBM為代表的單板個人電腦；第二代微軟、蘋果再到第三代、第四代的PC與移動與云，再到即將進入的第五代AI/5G +邊緣計算的早期，數字化進程一直是由計算平臺來驅動的。
從陸奇的觀點來看，任何一代計算平臺，都有前端和后端。前端永遠由交互的模式來驅動。
包含鼠標、鍵盤到手指等交互入口。其次，包含數字化的終端設備，比如個人電腦到智能手機等移動終端。前端永遠由交互的模式來驅動。
而驅動后端演進的是計算資源規模的擴大提高，具體而言是運算信息、存儲信息和傳輸信息（網絡）的能力水平的提高。計算資源規模的提高也意味著數字化廣度和深度的擴展。
從今天來看，借助計算平臺的發展，交互入口的演進，前端數字化與后端數字化已經在各行業演進。
比如房產市場貝殼等玩家的VR看房、互聯網家裝市場的VR裝修、服務機器人市場的AI機器人、新能源汽車市場的換電模式（體驗交互終端）、手機廠商的智慧大屏等就是典型的前端數字化的案例。
在今天，后端大規模的云計算開始把計算、存儲作為一種服務形式，讓每個企業在門檻很低的情況下，充分享用數字化所帶來的能力。
后端的數字化創新更多是計算資源規模帶來的數據化驅動。
比如說，各行各業與互聯網大平臺結合建立的數據化、以及互聯網巨頭借助自身的云計算資源平臺布局，帶動千行百業上云， 解決流程與業務創新。
從前端與后端的數字化，或能窺視數字化轉型的趨勢性方向。
互聯網平臺結合VR技術的應用在今天已經非常普遍，比如VR購物、VR看房以及互聯網家裝行業的VR裝修等玩法都相對成熟了。
當前從國美打扮家到土巴兔、齊家網等互聯網家裝平臺，都加入了VR技術，能讓用戶有直觀獨特的3D全息家居體驗，用戶除了能全方位查看全息影像，觀看戶型展示，更能與全息影像展開交互。
而VR看房也應用到了租房市場。傳統的線上看房，都是采用圖片和視頻的方式，但線下看房要花費大量的精力體力。從行業痛點來看，房地產互聯網廣告平臺模式最大的弊病就是滋生假房源，真實性難以判定。
而互聯網房產與VR整合在一起，通過三維實景重建，建立3D化的體驗，帶來了多重體驗改善——它首先是讓消費者獲得沉浸式的看房體驗，自由行走在VR場景內，查看每一處細節。
其二是，無需親自到現場體驗，就可以獲得所見即所得的現場體驗。其三，基于空間三維數據，以AI生成一種更具交互性的VR視頻，解決了房源的真實性的問題。
這其實是一種典型的前端數字化創新，它通過VR這種新型的數字化終端與房地產、裝修等行業結合，一改過往看房不便利、假房源眾多、信息隱私泄漏等眾多短板。
再看AI機器人市場。
我們知道，工業機器人可以代替一部分人進行重復性的勞動，然而由于指令循環式的機械化，無法應用于家庭、商場、醫院等復雜環境中。
2021年央視春晚上，紅色機身搭配祥云圖案的「拓荒牛四足機器人」亮相，讓服務型機器人進入大眾視野。
這類AI機器人關鍵是解決了兩個核心的技術難題：其一就是賦予機器人感知的能力。其二是給機器人做好整個任務的長鏈條規劃。具備對指令進行解析，進行分層任務分解的能力。
通過這兩個能力的完善，它就有機會針對行業的痛點改善交互模式服務于眾多的行業之中。比如在機場、銀行、購物中心等商業場景中，機器人能夠幫助企業減少人力資源支出，幫助人們快速獲得咨詢回應。
某種程度上，這類探索更多是聚焦于如何更好的服務于人的問題，但如何利用機器人來更好地服務到社會更多細分群體，是它未來的考驗。
此外，在新能源汽車行業，蔚來的換電布局是基于行業的電動車充電痛點而挖掘出來的新模式，在今天，電動汽車的電池電量焦慮無疑是當前消費者購買電動車的最大的焦慮與痛點。
對此，蔚來提出了車電分離、電池租用的商業模式，背后的核心是蔚來把換電站、充電樁、電池、專員通過數字化搬到了云端，實現線上線下同步。它本質上是在電池技術短時期內難有突破的現實條件下，拿出的一種基于解決車電分離的問題、快速換電的新解決方案。
再看電視行業。
在今天，手機與PC已經搶奪了太多時間，人們正在形成用手機、平板看電視的習慣，電視的發展前景在哪里？
從整個行業來看，電視行業經歷了一輪曲線發展，在2014年左右，中國智能電視行業的發展達到頂峰。隨后在2016年進入低谷。
但2019年華為智慧屏之后，小米、海信、TCL等相繼發布首款智慧屏。智慧屏的出現，讓電視行業進入到家庭互聯網的時代。
在雷鳥科技CEO李宏偉看來，電視行業發展經歷三個階段，第一階段是以顯示技術為主的傳統電視，第二階段是以觀看在線內容為主的智能電視，第三階段則是成為一部55英寸手機的智慧屏。
雷鳥科技的智慧屏玩法是融合在大屏電視上建立了一個短視頻頻道，即當用戶想看短視頻或其他場景的時候，它可以旋轉成一個豎屏。
某種程度上，智慧屏是在傳統電視的基礎上，為用戶提供更豐富、更個性化的使用體驗(如視頻通話、AI健身、實時互動教育等)，重構了人機交互。
綜上從VR看房、AI服務機器人、VR裝修，智慧屏、蔚來換電站等案例中，其實都能看到前端數字化重做的理念。
它們都是看到了行業的痛點與短板，以及新階段的消費需求（比如貝殼看到了平面圖片的假房源問題，智慧屏玩家們看到了大屏需求與消費形態的轉變），然后借助了新的終端技術，新的計算平臺玩法嫁接，推動行業游戲規則的改變。
前端數字化更傾向于從一個產業原本存在的痛點與問題入手，通過終端交互的創新，帶動用戶體驗的升級，試圖打破原本產品業務增長的瓶頸，通過體驗創新帶動新需求。
如果說前端數字化更多面向消費互聯網賽道，而后端數字化創新則更多是面向B端產業互聯網賽道。
在今天來看，從國外亞馬遜微軟，到國內BAT、華為、字節跳動，它們當前的戰略是集體To B，爭奪云計算賽道蛋糕，這是平臺型巨頭帶動后端數字化的一個側面。
在當下這些巨頭玩家們的布局戰略來看，存在諸多共性：
首先是巨頭們To B都是主打技術輸出，賦能各行各業。亞馬遜、阿里云，騰訊云、百度云、字節跳動火山引擎等都在以技術輸出、賦能各行各業的方式在To B市場跑馬圈地。
其次，都基于自身業務發展特色提出了相關的服務與解決方案——當前，一方面，騰訊云有 “數據驅動” 解決方案、阿里云有 “推薦算法” 解決方案，火山引擎有“智能增長技術” 。
另一方面，BAT字節跳動等眾多大廠開放了比如釘釘、企業微信、飛書、如流這些工具，可以免費被中小企業使用。
其三是大廠憑借C端業務的巨大體量，都在輸出數據中臺。
而從平臺商業模式的演變來看，字節跳動與騰訊、阿里等巨頭型玩家的商業化路徑有類似之處，即首先是通過入口級流量型產品聚集起規?；牧髁颗c用戶進行流量變現，然后切入B端市場，開始進一步輸出技術價值（大數據、人工智能、云服務等）。
綜上來看，從BAT到字節跳動來看，它們就是借助了數字中臺、云計算等底層基礎設施的能力，來推動平臺數字化賦能模式與用戶增長模式。
在目前，基于強大的數據分析能力來實現用戶精準定位，最直觀的例子是電商行業，無論是基于消費者偏好的廣告投放，還是基于對用戶群體需求行為數據分析，結合在線人群識別技術，電商APP總能精準卡準你的偏好與需求。
此外，在技術價值輸出層面，百度騰訊等玩家也帶動了自身的云服務能力在營銷、工業、金融等多個行業成功落地。
而傳統企業后端數字化的本質就是把人工、線下的經營模式搬到線上去，通過互聯網軟件技術來實現獲客與增長。比如傳統的企業增加了ERP系統、CRM等。
而SaaS是后端數字化的典型。所謂SaaS，也就是軟件及服務，很多中小企業都會選擇SaaS提供企業服務。
早在2016年知識付費興起，作為創投的一個新風口，當時的互聯網行業里紛紛涌現了像得到、喜馬拉雅、千聊、荔枝微課等知識付費平臺。
但發展到后來，教育培訓與知識付費費行業越來越傾向于需要一個專業化的工具來實現內容的獲客引流。而知識服務SaaS平臺就這樣應需求而生。小鵝通、千聊、荔枝微課是其中的典型玩家。
小鵝通是基于微信生態的SaaS服務工具，客戶可以基于這個工具在微信里運營私域流量，打造自己獨立的知識店鋪，圍繞著教育與知識付費業務，實現引流獲客、線上用戶運營，幫助商家打造完整的業務閉環。
同類型的還有千聊和荔枝微課，它們作為知識支付平臺工具，可以通過SaaS系統，幫助創業者建立自己的知識商店。
在SaaS服務工具中，CRM的普及化程度相對較高。從字面意義來看，企業用CRM來管理與客戶之間的關系，從而支持有效的市場營銷、銷售與服務流程。
它的本質是把企業的組織架構，業務流程，運營模式等通過軟件系統的形式固化下來，是一種創新的企業管理模式和運營機制。
由于CRM是企業面向外部銷售、客戶服務的部分，在數字化過程中，它與業務增長具備直接關聯性，也因此最快被企業接受。
國內企業服務領域機構T研究發布了《2021中國CRM數字化全景實踐研究報告》，報告指出，在經歷了“疫情”黑天鵝事件后，中國市場中的CRM品牌反而逆增長趨勢。
特別是在大量業務必須線上化、數字化加劇的雙重驅策下,CRM成為了企業抵御風險、保持增長、以客戶為中心的轉型必要選項。
SaaS服務工具是數字化轉型的大勢下一股代表性的力量，他們為企業提供一種獲客引流的數字化工具，增加了與客戶接觸的觸點。
有業內觀點認為，傳統企業軟件之所以到了規?；鲩L的天花板，是因為沒有解決服務產能問題，而SaaS的運營本質是服務的管理，即通過高效的工具系統來支撐，圍繞獲客、留存、增長的全鏈條的服務。
因此，SaaS服務作為數字化轉型中的一股重要力量，它試圖幫助增加客戶接觸機會，實現更高的銷售額，說到底，企業的數字化轉型，其中一個重要驅動力還是利益驅動。
如果說前端數字化創新更多偏向于消費互聯網賽道，通過終端交互創新發力行業的痛點，那么后端數字化其實更偏向產業互聯網，更多借助了數字中臺、云計算、SaaS等底層基礎設施的變革，來實現了產業化B端生意的突圍。
也就是說，從計算平臺交互模式的不同，各行業企業有了前端數字化與后端數字化不同發展與創新模式。
從趨勢來看，未來所有的企業都將成為數字型企業。如前所述，對于眾多傳統企業而言，它首先是利益驅動，這決定了它關注降本增效，但更關注投入產出比的問題。
從業務模式來看，前端數字化更多是聚焦通過產品層面的技術創新來實現業務與產品體驗破局，而后端數字化更多是基于數字化技術（如大數據、云計算、人工智能等）來推動企業組織轉變業務模式，組織架構。
前端數字化它更多聚焦于解決客戶的現存痛點，比如：
而后端數字化更講究從數字渠道有效觸達目標顧客的能力，目前圍繞微信、抖音快手、頭條、淘系等各個內容平臺，出現了非常多的營銷獲客的解決方案，這本質是借助后端數字化的模式來實現業務的線上化營銷突圍與創新。
而“上云”也已成為后端數字化轉型的基礎，從產品、業務再到運營和服務等各種轉型層面，通過“上云”獲取算力資源實現對用戶需求的精準定位都變得必不可少。
來自全球知名數據機構IDC的報告顯示，疫情加速了全球以云為中心的IT轉換，預計到2024年，全球整體云計算產業規模（包括云服務、云相關服務和云基礎設施建設）將達1萬億美元以上，而在中國將達到1000億美元以上。
有業內人士指出，為什么傳統商超干不過電商？因為傳統商超是憑經驗來判斷市場平均需求，而電商則是精確量身定制，當前C2M、社交電商等新模式開始進一步升級了這種精準定位能力。
對于中小企業來說，數字化轉型無疑也面臨著眾多難題，一方面是面向內部，數字化轉型需要企業運營體系、組織架構、技術開發等各種力量的配合，打破部門之間的數據壁壘與業務流通壁壘。
盡管不少企業內部有管理升級和業務創新的需要，但在成熟的、利益機制板結的傳統大企業內部，實現起來并不容易。
另一方面是面向外部，挑選哪家廠商的服務，平臺的解決方案是否與自己的業務適配等等，這些顧慮無形之中給企業增加了采購風險與相應的損失與誤差。
這事實上也是對提供云服務的巨頭的一大考驗，在云市場，你給客戶提供的能力是否有助于幫助企業建立壁壘，形成差異化的競爭能力，這是關鍵。
在今天，從工業、金融到地產、零售等都行業都已經實現不同程度的數字化轉型，實現了對業務的局部改善。但從未來趨勢看，企業到底應該走向哪一條路，其實關鍵是看其本身的模式是產品創新驅動還是服務、業務創新驅動，或者說是兩種情況的融合。
這往往都是由企業的商業模式或生意模式決定的——產品創新驅動為主的商業模式對應的更多是以前端數字化為主，而業務銷售創新驅動的則更多是以后端數字化為核心。
從前端數字化發展趨勢來看，它在電商、零售領域中已經應用得相對成熟了，在互聯網平臺經濟模式中，融合AR與VR技術等新一代交互終端帶來前端用戶體驗創新方面還存在巨大的機會。
而前端數字化程度越高，沉淀的后臺數據就往往越豐富，這往往對于后端數字化的改造與升級的推動作用就更明顯。
因此，這兩種數字化模式之間也沒有明顯的界限，在多數情況下，企業需要融合這兩種數字化模式的創新，實現前后端數字化的雙向升級，在此基礎上，再考慮投入產出比的問題。
美國學者尼葛洛龐帝在其1996年出版的《數字化生存》一書中提到對未來的暢想：人類生存于一個虛擬的、數字化的生存活動空間，在這個空間里人們應用數字、信息等技術從事信息傳播、交流、學習、工作等活動。時至今日，尼葛洛·龐帝的很多描述已經成為現實。
在今天，每個人手機里小小健康碼的背后，其實就是“數字化”城市治理的一種表征。
綜合來看今天的數字化轉型，我們發現，前端數字化講究技術和需求掛鉤，與投入產出比結合，從解決實際的需求與痛點出發拉動技術與市場的創新進度。
而后端數字化更多是基于對業務數據充分而高效的運用，實現組織經營的完全數字化，從而提升企業運營效率。
數字化的大潮正在到來。
在這個大時代下面，誰能站到浪潮之巔，就看是否能找到合適的突破口，實現從前端數字化層面的用戶體驗的突圍與升級，到后端的數據化基礎設施的指導結合起來形成綜合性的競爭力，繼而順應時代潮水流動的方向，成為潮水的一部分。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：人人都是產品經理 作者：王新喜
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
今天和大家一起溫習下2021年占據主導的8個UI和UX趨勢，干貨建議提前收藏！
沒人能夠預測未來會發生什么，但是在數字世界中，趨勢確實存在于設計師的圈子中，并且在有規律的演化中。大家可以已經看膩了不少趨勢研判文章，但是，適當總結一下當年的趨勢，把這個時間線拉長，你會覺得非常好玩。從移動端設計剛開始流行的時代，到現在，設計趨勢都發生了哪些變化呢？它們是不是又會返祖，復古？周而復始？咱們不得而知。
雖然2021年已經過去一半，不過，今天咱們還是先Review一下2021年正在流行的幾個設計趨勢，加深一下印象吧！
當然，各位設計師，趨勢僅僅是一種現象，想要做的出圈，與眾不同，我們必須站在趨勢之上，做出自己的創新，這樣才能在千篇一律的設計中獨當一面。
3D 圖形越來越多地出現在 Web 和移動界面中。毫無疑問，將各種 3d 圖形應用到移動和 Web 界面是一項相當大的挑戰，需要良好的技能和藝術眼光才行。在我們的 UI/UX 設計中添加 3D 元素有很多好處：
ByMako Tsereteli
玻璃擬態是大多人更喜歡的最新UI設計趨勢，它引人注目且色彩繽紛，這種趨勢兼顧透明度和層次感。玻璃擬態設計給人以磨砂玻璃的感覺，近一段最受歡迎的趨勢。這種風格深受蘋果在 2013 年推出的 IOS 7 和 windows vista 中首次引入的類似概念的影響。在許多情況下，如果使用得當，Glassmorphism 可以使網站和應用程序對用戶更具吸引力。
ByMahmudul Hasan Manik
深色主題現在已經成為應用必備的界面了。手機的白色界面可能對我們的眼睛造成更多的刺激，這就是所有應用程序和網站都加入了暗黑模式設計的原因。暗模式有一些我們應該遵循的特定規則。深色主題的主要優點是在弱光環境中具有更好的可讀性。作為 UI 和 UX 設計師，我們應該明白它的主要作用，它主要是減少了用戶的眼睛疲勞并提高了夜間的可讀性。
ByJulius
色彩理論知識在每個 UI 和 UX 設計中都至關重要。正確使用顏色對于為您的客戶創造正面形象很重要，這就是顏色在 UI 和 UX 設計中扮演重要角色的原因。大多數 UI 設計師都使用鮮艷的色彩來將用戶的注意力集中在重要元素上，并使我們的設計令人難忘。下圖分別為單色調和雙色調界面。
By Resuscitation
包豪斯的風格通常被描述為藝術和手工藝運動與現代主義的結合。包豪斯設計幾乎沒有裝飾，注重平衡的形式和抽象的形狀。今天的 UI 和 UX 設計，也可以理解為包豪斯的復興。包豪斯設計在UI設計上的核心，就是將設計簡化為必要的功能，使其美觀和輕松，以及精心制作每一個小細節。
包豪斯設計幾乎沒有裝飾，注重平衡的形式和抽象的形狀。今天的 UI 和 UX 設計也是包豪斯風格的復興表現之一。
By Beto Garza “Helbetico”
在當今的設計中，白色背景越來越受到大家的歡迎。了解色彩心理學是創建配色的一個關鍵方面，這在數字設計中效果很好。吸引用戶的最佳方式是通過“色塊”平衡單色背景色與亮色，以突出數據中的重要內容或者異常提示部分。少即是多，當您在 UI設計中使用較少的顏色時，這將對用戶更具吸引力和亮點。
By Resuscitation
插圖是用戶界面中更直觀的視覺闡述，也一直是UI設計中長盛不衰的“趨勢”之一。動畫插圖，在與用戶交互過程中為UI注入了強大的生命力。它幫助用戶獲得更立體的反饋，為創建更生動的微交互創造了條件。
By Rachelizmarvel
極簡主義是 UI 設計中使用最多的“風格”之一，它有助于改善用戶體驗。在我們的 UI 設計開始極簡設計之前，有必要了解術語“極簡”的含義以及為什么極簡在 ui 中很重要。下面是極簡主義的特征：
By Shakib
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：人人都是產品經理 作者：Tzw_n
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
本文是《設計模式周周看·Ant Design 為你講透設計模式》周刊第五期內容，上期內容，我們介紹了一種輔助用戶輸入的設計模式：輸入說明
這一期，我們繼續介紹一種輔助用戶輸入的設計模式：輸入線索。
簡介：「輸入線索」是指用示例輸入或說明文本以占位符（Placeholder）的形式顯示在輸入框中，以幫助用戶理解需要輸入的內容，或給出相關線索的一種設計方式。
例子： 在 Ant Design 輸入框組件 的示例中（如下圖），我們可以看到「輸入線索」可以更好地幫助界面說明輸入字段的內容或解釋輸入字段的功能。
「輸入線索」這種設計模式可以讓界面不言自明。由于輸入線索的內容位于用戶輸入的位置，因此用戶往往不會忽略這個信息。
對比：「輸入線索」VS「輸入說明」
「輸入說明」與「輸入線索」都是輔助用戶輸入的設計模式，這些模式可以幫助用戶明確輸入信息的內容形式。
那么這兩種模式有什么差異性呢？
使用「輸入說明」這種模式時，快速瀏覽用戶界面的用戶可能會輕易地忽略說明信息，因為用戶的目標是盡可能快地完成表單，然后進入下一步操作（雖然有的場景下這也是其中一個設計目標，但在這里不討論）。因此，過多的文本說明也會給用戶帶來較大的心智負擔。
Google 注冊賬號頁是結合使用「輸入說明」與「輸入線索」的一個典型案例。通過使用「輸入線索」告訴用戶需要填寫的內容，通過「輸入說明」來補充填寫信息的相應意圖，進而使得用戶可以清晰地意識到需要填寫什么，并輸入相應信息。
用戶可能不一定清楚需要在輸入框中輸入的內容。在設計上，你可能不希望在輸入框附近上添加更多的字，造成視覺壓迫。還有一種情況，如果界面空間有限，無法使用「輸入說明」時，也可以考慮使用「輸入線索」。當出現下拉菜單或者組合輸入框時，往往需要配合該模式進行使用。
使用條件
· 輸入框要求輸入的內容可能不容易讓人馬上理解；
· 設計上不希望在其他地方補充新的內容；
· 可以承載文本的輸入空間可能沒有太多；
· 配合下拉菜單或者組合輸入框使用；
1. 選擇適當的提示文本
· 對于下拉列表，使用 “選擇”、“選取”等單詞，英文使用 Select Choose 或者 Pick 等；
· 對于文本輸入框，使用“輸入”等單詞，英文使用 Type 或 Enter；
· 盡量使用祈使句，以動詞短語開頭；
· 以描述輸入內容的名詞結尾，例如“選擇狀態”，“在此處輸入消息”或“輸入患者姓名”等；
2. 提示文本的位置
有關文本提示的位置應該和輸入值的位置一致。 比如，提示本身不應該是下拉菜單中的可選值。
用戶需求：用戶登錄功能的預覽與體驗
Ant Design Pro 是一個中后臺開發的模板腳手架，其并不提供真實賬號登錄服務。因此 Ant Design Pro 的開發者為了模擬真實使用環境，提供了一個可正常登錄的賬號，賬號密碼分別 user 和 ant.design ，其余情況下用戶輸入的賬號密碼均會提示不正確。
在這個場景下，通過將正確的賬號密碼以輸入線索的方式顯示在占位符中，巧妙地告訴體驗 Ant Design Pro 的用戶正確的賬號密碼。
用戶需求：登錄賬號
163郵箱登錄頁面的賬號輸入框中的輸入線索非常有用。正常用戶在看到后綴有 @163.com 時可能并不一定能意識到可以輸入手機號碼。而通過在占位符中 顯示「郵箱賬號或手機密碼」，高效便捷地提示了用戶可以直接輸入手機號碼進行登錄。
用戶需求：輸入賬號密碼
「輸入線索」有一種設計上的變體，稱為「浮動標簽」。因為一般來說，當用戶激活輸入框時，占位符文本會消失。而「浮動標簽」不會消失，通過移動位置和更改大小駐留在界面中。這種設計方式可以使得界面變得簡潔、優雅。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：Ant_Design
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
產品設計和用戶體驗設計（以下簡稱UX設計）之間的區別在于，后者側重于用戶對應用程序或網站的體驗感是否流暢，而前者則更多地是邏輯方面是否流暢。也就是說UX設計師負責確保設計看起來不錯，使用起來感覺更好，使交互更愉悅。但產品設計師不處理這些，他們設計的是產品應該如何工作（甚至應該是什么樣子）。
不過產品設計師還有一個更重要的責任——查看產品的不同部分如何相互作用。這里我們展開舉例，比如進行手機設計時，他們就要確保操作系統與屏幕上的觸控以及與物理按鈕都能很好地匹配；如果是筆記本電腦或臺式電腦，那么硬件和各式端口就需要合理地設計分布，這樣用戶在使用時才不會出現連接線亂糟糟的情況。
UX設計師的主要職責是確保用戶可以輕松地在產品的數字部分執行他們希望的操作。
產品、UX設計師會使用不同的工具來完成其工作。例如，產品設計通常在AutoCAD等程序中完成，而UX設計則常常用Figma、Adobe Xd或Sketch創建。
產品設計師會更注重全局意識，因為他們需要將所有部件組合進同一個產品內，一起工作。
Vip Sitaraman作為設計顧問，服務的客戶不光有創業公司還有財富500強
我與行業資深人士Viputheshwar Sitaraman聊了這個問題——UX設計和產品管理之間的區別是什么，他的回答很有幫助。Vip曾為初創公司和財富500強公司擔任過設計顧問，親身體驗了許多不同的產品開發方式。
他認為這些角色有不同的職責需要考慮，他說：「關鍵的區別在于UX設計師更關注用戶體驗，而產品設計師關注整體業務目標（包括用戶經驗）。以及，他們各自與業務發展目標和關鍵績效指標 (KPI) 的關系?！?
關于用戶體驗設計師角色的具體細節，他告訴我：「UX設計師的主要/唯一KPI是用戶對體驗的滿意度。因此，用戶體驗設計師的大部分工作都集中在優化、改進和創新客戶流程上?！?
他還進一步解釋了產品設計師負責產品或項目時的更大藍圖：「產品設計師的 KPI與整個業務相關聯，例如：擴展新市場、構建有機增長（organic growth）引擎或提高轉化率。可以想象，這類決策與典型的UX角色體驗設計任務大不相同。」
UX設計師主要關注產品的可用性，而產品設計師則更多地關注產品整體的感覺和體驗。產品設計師并不總是用戶體驗設計師，但他們主要致力于產品的感覺和可用性。
by UX Store on Unsplash
產品設計師從各個維度負責產品的外觀和感受體驗；
使用草圖、線框圖或其他設計工具來創造可以成為實際產品的想法；
產品設計師需要了解平面、色彩和排版等的設計理論；
他們需要衡量KPI并確保產品達到預期水平。
UX設計師負責用戶在使用產品時的體驗與感受；
確保一切以直觀明確為基準，避免用戶感到迷?；蚶Щ螅?
UX設計師需要了解用戶研究方法，如可用性測試、訪談、日記研究和現場實驗等；
需要對認知負荷理論等人機交互原理有很好的理解；
UX設計師通常會在項目規劃的初步階段就開始制作線框圖。
RadCollab的資深資深設計師Nolan Perkins提到，UX設計師的責任并不小，但也取決于公司。他告訴我：
根據公司的規模，產品設計師可以從前面提到的任何步驟開始。他們可以從報告或見解開始，也可以從用戶故事或線框圖開始。無論他們從哪里啟動，產品設計師都會把這些信息帶到完整的高保真模型中。
產品設計師和UX設計師的工作內容雖有不同，但兩者都對人們每天使用的產品產生著重大影響。
by JESHOOTS.COM on Unsplash
UX設計師更注重技術，并通過研究、設計工程或原型來解決問題；而產品設計師則通過產品體驗來創造視覺和思想。這兩種工作角色都為產品的許多方面提供了信息， 從市場營銷再到界面功能都包攬其中。在一個凝聚力強大的公司中，請確保為每個職位雇用合適的人！
這要看你怎么覺得了，辯證來說也許算不上難處，作為產品設計師的你，需要對研發的產品負責。而最重大的挑戰之一，是要確保在交付時間及合理預算內，進行原型設計或功能試驗。
要在這個行業取得成功，需要極大的決心和動力，其實所有高薪工作皆是如此，但產品設計會更迫切需要這種素質。這不僅僅是為了讓一些東西看起來很漂亮，而是關于如何創造性的解決問題。
UX設計師是設計過程中不可或缺的一部分，他們確保每個項目都能獲得個性化的細節呈現。從前期一步步調研到草擬線框圖，以及對不同部分的優化修改，UX設計師可以了解到產品開發的各個方面，全程跟進。
設計師們的興趣也是多種多樣的，有的人對整個項目感興趣，而另一些人則更喜歡設計工作，比如原型搭建。有些招聘人員要求比較高，偏好能夠完成全棧工作的UX設計師，這就需要一人同時擁有多項學科知識儲備。
我經常聽到的一種說法是UX需要大量的奉獻精神，有時設計師會因接收信息繁多而感到不知所措，但這也側面說明了UX設計師對產品開發過程如此重要的原因。設計師們應學習處理信息和研究，以易于理解的方式呈現結果同時推動設計決策。
產品設計師可以在許多領域工作，無論是UI設計、業務策略還是產品架構。這些領域使得創意人員和來自不同背景的人聚集在一起，創造有價值的東西。
產品設計師有很多責任
產品設計師是少數通過工程思維方式和極強同理心，來塑造組織文化的人，而踐行的方法則是他們用各式新設計出的產品去處理不同的問題，從而得出方法論。產品設計主要是解決問題，日復一日，它們也有助于平衡功能與形式，雖然總有新的難題出現——但也請你繼續成長，迎難而上！
產品設計師橫跨多個行業，因為他們擁有的技能非常多樣化！當今產品設計師必須有像變色龍一樣強的適應力，處理任何狀況，這促使他們成為非常有價值的員工。
UX設計師是炙手可熱的高薪專業人士，他們在設計無縫體驗方面發揮著強大的作用。UX設計師往往兼具創造性和協作性，這意味著他們也能很好地跨設備或平臺（如移動設備）與來自不同背景的人共同工作。
UX設計師的工作似乎與產品設計師的角色重疊
UX設計工作可能要求很高，但個人成長的機會卻是巨大的。你會發現這個方向將激勵那些熱愛學習技術的人，因為人機交互模型是不斷變化的，它們對我們的行為有著很大影響，所以，很多時候你會覺得業務需求之間的交集也是一個發揮技能的領域。
實際工作中，設計師與用戶/客戶的溝通時間會占比較多，因為要對他們與產品或服務相關的行為、需求深入研究。這些信息能非常有利于他們創建原型圖與線框圖，同時，還能幫助用戶在新設計實施前，深入了解提高客戶轉化率或增加收入流的方法。
我與三位業內人士進行了交流，并問了問他們「覺得在這兩個領域取得成績需要什么」。
Lindsey Allard是PlaybookUX組織的CEO兼聯合創始人
Lindsey Allard，PlaybookUX的CEO兼聯合創始人告訴我：
如果滿足以下條件，你非常適合在UX設計領域：有用戶研究或用戶測試過程的經驗；同理心強，能從用戶角度思考；能夠客觀和批判性思考的人；并且需要了解UX流程（必要的）。
如果符合以下條件，則你適合從事產品設計：熟練使用Adobe、Sketch等工具；對設計、美的事物有強烈渴望，并擅長結合品牌；跟得上潮流；能夠將一個愿景變成設計。
它們是相似的，甚至UX設計師可以轉為產品設計師（反之亦然），但在公司內部運作方面還是存在明顯差異。
用戶體驗一直是我的熱情所在，我也會繼續在UX設計領域深耕（曾經有一段時間我本可以轉到產品設計上），兩者大部分差異來自我們對項目采取的方法，以及我們制定的完成目標。
Nolan Perkins，RadCollab資深設計師告訴我：
我認為新人不應該上來就專攻產品設計或UX設計，因為兩者都是更高級別的職位。相反，在決定從事具體的細分崗位之前，建議先打好基礎。
Viputheshwar Sitaraman，數字顧問告訴我：
作為一名UX設計師，要能通過交互設計來預測用戶行為。對用戶行為、UI流程和可訪問性等具有敏銳洞察力的設計師，將在UX設計角色中茁壯成長，并通過提升客戶體驗來推動增長。
另一方面，產品設計師要能找到新的機會來擴展價值。一個商業和營銷意識俱佳的人，如果對更廣闊的市場（即競爭、趨勢）有自己的深刻理解，也會更好地幫助產品和功能改進優化，在產品設計角色中快速成長。
產品和UX設計角色都需要對現代趨勢（無論是業務、市場、用戶行為和交互）有深入和最新的了解——這就是為什么找到你最關心/享受的東西是如此重要！
好問題！UX設計師和產品設計師擁有截然不同的技能組合，每個人的職責都是獨特的。為了讓大家對這些區別有一個了解，我將逐一概述。
首先，如果你沒有學過任何技術經驗，只學過設計，那么成為UX設計師的道路會稍微復雜一些。用戶研究方法深深植根于用戶體驗技術中，所以第一步是獲得技術技能，幫助你以不同的方式探索用戶需求，比如原型和其他需要時間來研究的活動。
Quick tips
加入一個UX的在線提升訓練營；
在用戶體驗領域繼續深造，例如讀碩讀博；
豐富自身技能，比如學習用戶心理學；
向你認識的UX設計師學習請教。
成為產品設計師有兩條關鍵路徑：第一種是通過專業的設計學校，獲得產品設計學位；另一種是獲得工程學位，進入具有產品設計崗位的公司，通過轉崗或是晉升獲得。決定走哪條路可以改變你的整個職業軌跡！
Quick tips
確定您想要設計的內容和位置。產品設計師更多的是構建產品的專家，并不局限于設計一個項目，這也是為什么產品設計師必須在許多學科上多才多藝，這樣才能對從構思到開發和生產的不同方面給予指導，比如工程、工業設計和用戶界面設計 (UI) 和甚至創業技能；
產品類型千差萬別，從服裝或汽車等消費品到納米機器人或3D打印設備。請嘗試找到你擅長的領域，術業有專攻，你不可能掌握一切！
探索你的興趣——通過閱讀相關領域的博客或新技術的文章/視頻，看看它是如何與為你關注的行業聯系起來的。
產品設計師搭建產品體系，UX設計師通過調研和數據推進決策，并確定最適合用戶的交互體驗。兩個角色通常會一起工作，但也取決于公司的大小。如果需要，高級UX設計師可以同時完成這兩項工作！
有人常將二者理解為是一碼事兒，因為他們通常都會參與早期的開發階段（無論是概念階段還是線框圖階段時）。在很多情況下，會有一個團隊專門從事UI設計?？偠灾?
抱歉，你不能通過一件事來定義UX設計師或產品設計師！
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：UX詞典
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
本文一句話概括：數據可視化中，如何用最簡單的圖表高效地傳遞信息。
看似簡單的 3 類常掛在嘴邊的「折柱餅」，你真的知道怎么使用嗎？
@rubyxrli 在 紐約的Uber數據可視化大會上所做演講中提到：
根據我的經驗（基于原型研究超過10年）大多數可視化問題可以通過一些圖表來解決。很少情況下，需要你去想出一個全新的表達方式。像條形圖、折線圖、散點圖、透視表等「圖形化主力」真的很難被替代！
對于大部分的企業級產品使用者來說，基本的圖表類型，通?？梢詾榇蠖鄶诞斍绊撁娴膯栴}作出解釋，但是我們要做并不是簡單地調用一個圖表就結束了，如果想讓你的頁面更有效地傳遞結論、原因，可以讓使用者探索更多可能性，甚至去發現新的分析思路，那么首先你需要掌握下面的分析套路：
「對比，細分，溯源」，給簡單的圖表加點「戲」
在數據分析中，分析思路一般可以概括為「對比，細分，溯源」，這也是《數據化管理》中提到六字箴言。首先我們來了解一下這六字箴言的具體含義：
此處引用部分《分析思維 第三篇：數據分析的三板斧》內容
對比分為橫向對比和縱向對比。
· 橫向對比是指和“他人”比較，比如，兩個網站的用戶流失率；
· 縱向對比是指按照某個維度，和“自己”比較。比如，這個網站上個月今天和這個月今天的用戶流失率。
細分是指分維度、降低粒度來分析數據。
· 分維度是指增加維度，比如，離職率按照部門維度來分析；
· 降低粒度是指降低數據聚合的程度，比如，離職率不按年份，而按照月份來統計。
溯源是指在對比、細分鎖定到具體維度和粒度之后，依然沒有結論，那就需要查看原始數據或相關聯數據，洞察數據，從數據中尋找靈感。
第一個 3 代表圖表類型；第二個 3 代表分析套路。
了解分析思維的三個套路后，可以嘗試在自己的圖表中檢驗打鉤。
通常在一個數據概覽頁面，人們都會使用一個折線圖，來表示一個關鍵指標的發展趨勢，當然這么做非常直觀，也非常準確。當我們為折線圖添加一個對比的維度，就可以使折線圖表達的內容更加豐滿。
可以是橫向對比“和他人比”。
也可以是縱向對比“和自己比”。
G2Plot 為圖表提供了很多圖表輔助信息組件：https://g2plot.antv.vision/zh/examples/general/label
例如：
· 參考型組件：參考線、趨勢線、輔助區域等
· 極值型組件：最高/低點、預警線等
通過右上角的 TAB 切換，提升和降低數據聚合的程度
和別人比。
將維度拆分進行分析。
這是使用者在使用柱形圖做對比時，經常遇到的問題：
· X 軸類別數量過多，柱子非常密集
· 軸文字標簽數量過多，文字在 45%旋轉后可讀性降低
這時，設計者應該試著旋轉柱圖，把它變成一個條形圖。
餅/環圖天生自帶「縱向對比」的性質，但是除了用一個餅/環圖之外，還有什么做法？
第一個 N 可以代表圖表類型，也可以代表頁面，但需要是一個實體；
第二個 N 代表分析思路，上文中提到的 3 個套路只是眾多分析思路中被總結出最為常用的，還可以根據不同業務場景的訴求去添加思路。
這個矩陣的表格填出來后，除了可以幫助設計者檢驗是否高度利用了圖表區域之外，還可以總結出一份屬于自己業務場景的圖表指引，傳遞給下一個設計者使用。
在企業級產品設計的領域中，用可視化的方式表達信息，讓數據不再枯燥難懂，是一種常見的設計手法。在真實的業務場景中，大部分用戶青睞 dashboard（報表頁面），來呈現「數據概覽」、「數據監控」、「數據明細」等信息，其中的重要組成部分即「統計型圖表」。如何恰當使用「統計型圖表」來實現用戶的分析目的？ 這對沒有可視化基礎的制作者來說，還是有一定的難度。
通過以下三步，讓用戶更高效地讀取重要信息，驅動業務決策，實現商業價值。
本文用簡單直白的工具方法，為「零基礎」的圖表制作者提供一種簡單易學的思路，讓你的圖表在 Dashboard 里更全面、更有效地傳遞關鍵信息。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：Ant_Design
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
開車的同學知道，一般我們用“指哪打哪”來形容汽車轉向精準、沒有虛位?！爸改拇蚰摹笔侵钙嚨牟倏伢w驗，更是駕駛樂趣的一部分。駕駛員輕撥動方向盤，輪胎轉向帶來的阻力以及路面反饋傳至車身，動力的線性輸入與制動的時實響應讓駕駛員能控制自如。
“指哪打哪”形容車聽從驅使，是人對車的輸入控制以及車對人的輸出反饋，是一個互相修正的過程。在數據可視化設計中，操作“聽從驅使”的可視化作品又是一種什么樣的體驗呢？
某公司運營同學需要找出品類銷量下滑的原因。在圖表上，運營同學的思路是找出癥結、定位問題、關聯分析、驗證設想、得出結論并給出運營策略調整方案。
某同學向公安報案稱賬戶被盜大額資金，公安案件科分析專員從受害人的資金流向追溯至相關木馬團伙，通過關系擴散查驗可疑人員，順藤摸瓜最終找到嫌疑人并抓捕。
上面兩個示例提供足夠便捷的過濾篩選組件，配合鼠標懸停、點擊、框選等操作，方便用戶查看更多視圖空間，快速定位感興趣的數據空間，這種操作體驗能幫助用戶事半功倍。
聽從驅使本質上是用戶對可視化的控制能力，是一種主觀感知與信念。聽從驅使包括兩部分，“驅動 Drive”與“使能 Enable”，這兩步正向不斷迭代，引導用戶一步步剝開數據的面紗。
數據可視化聽從差遣，用戶可根據前饋信息預示、驅動可視化，用戶對可視化作品享有控制權，數據可視化符合用戶的顯性需求。
數據可視化遂用戶心愿，用戶根據反饋引導進行下一步操作，幫助探索數據規律或者發現更多數據奧秘，數據可視化符合用戶的隱性需求。
用戶處在海量、無序、異構數據的海洋中時，需要隨時面對有限屏幕空間與無限數據空間帶來的沖突?？梢暬瘧斀o予用戶適當的選擇權，讓其可對信息進行控制，具備信息聚焦、下探的能力。這些可視化能力能提升用戶的參與度和探索意愿，不讓其迷失在數據的海洋中。
移動端長按滑動（Touch & Hold）更新激活點數據、左右輕掃（Swipe）平移視圖是用戶的既定認知。左圖長按滑動后的反饋為平移視圖，此時用戶心里咯噔一下，又繼續操作了一遍，操作的預期與結果確實不一致，有些“不聽使喚”。右圖符合用戶心智模型，預期與輸出結果一致。
不聽從驅使：視圖平移，不符合預期-長按滑動時數據點不更新（如下圖）
聽從驅使：視圖不動，符合預期：長按滑動時數據點更新（如下圖）
由此可以看出，如果可視化作品操作時不符合用戶的既定認知，可視化則變得不受控，用戶心里會緊張、導致重復范錯，甚至責怪自己。
如果賦予用戶較高的驅使感且得到正向的反饋指引，引導用戶操作下一步，那么用戶心態會更積極，更愿意接受挫折及試錯，這種聽從驅使可以消除未知、不確定性所帶來的緊張與焦慮。
前面講過，可視化聽從用戶驅使需具備兩點能力：
· 驅動 Drive：通過前饋預示讓用戶知道可視化能做何互動；
· 使能 Enable：通過反饋引導用戶進一步讓用戶與可視化互動；
可視化交互時，驅動用戶完成一期探索，探索后反饋引導發出的信號成為下一步操作的前饋提示，再次驅動用戶操作可視化后，如此反反復復直到幫助用戶找到數據的潛在規律或者找出數據真相。
從心理學的四個概念進一步解釋：
· 示能：可視化特性與預設交互的關系，是否可被操作；
· 意符：即信號，告訴用戶可采取什么操作，如何行動；
· 映射：事物之間的關連關系，是怎么聯系的；
· 反饋：操作之后的回應，是否及時、有效；
示能 Affordance 指可視化作品可能的潛在行動，只有當它們都是可以被感知的用戶才容易地發現它們，它揭示了用戶與可視化互動的可能性。
例如我們默認認為屏幕上的可視化都可以進行交互，PC 可視化作品可以 Hover 交互，移動端可以點點按按。示能存在但可能不可見，可視化設計師的一部分職責就是實現示能的可見性。
意符 Signifiers 是可視化作品傳遞的信號，暗示可能的潛在行動，讓用戶該知道該如何去控制可視化。無論是示能還是交互方式，都應照顧用戶已有習慣，需符合用戶心智模型。
在 PC 可視化上，可視化設計師很容易忽略鼠標指針樣式設計，經常默認一個鼠標樣式進行到底，可視化如何驅動用戶以及如何讓用戶具備可視化的能力全靠猜。
映射 mapping 表示可視化元素間關系，應用于控制-反饋模式的設計或布局；比如方向盤可控制汽車轉向，下拉篩選器出來的選擇框。以空間布局對應關系的自然映射為例。
反饋 feedback 是用戶操作之后的回應，反饋應當是即時、有效的。在可視化設計時，如果需要，我們建議給出用戶深層次的反饋以便指引其進行下一步的操作。
要做到聽從驅使，需給用戶控制感，讓用戶享有對可視化的控制能力。例如提供足夠便捷的過濾篩選組件，配合鼠標懸停、點擊、框選等操作，方便用戶查看更多視圖空間，快速定位感興趣的數據空間，亦或根據特定變量對數據進行排序、突出、降維處理等。當我們將這些組件與交互動作進行結合，用一些習以為常的交互去操縱可視化時，用戶將會很清晰、并且有信心控制好當前視圖。
數據可視化不僅僅只是一張好看的圖，它構建的是一個系統，這個系統隨時在解決有限屏幕空間與無限數據空間帶來的沖突。這個系統可以驅動用戶完成一系列操作后引導用戶有能力進一步拿到結果，如此反復交替迭代，幫助用戶完成一些平時看來不可思議的任務。只有這樣，用戶才能操縱聽從驅使的可視化，就像文章開頭所述，如老司機開車一樣絲般潤滑。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：Ant_Design
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
“查詢”是指用戶在通過某些查詢條件進行數據篩選后，再以“表格”的展現形式進行數據呈現，以到達篩選數據，快速查看的目的。
搜索和篩選的主要區別是:搜索可以自定義查詢條件，篩選是必須按照特定的條件字段查詢，如“是”、“否”、“不限”、“男”等條件
一般語境下，不支持模糊搜索的查詢結果為單項數據，如姓名查詢，訂單號查詢，這些查詢操作只能輸出一條結果，即查一得一
舉例 手機號搜索 139xxxx2918 正常情況下是輸入11位號碼進行搜索數據 得到手機號碼為139xxxx2918的各項數據，即查一得一
輸入139進行搜索查詢也可以得到多條手機號碼包括139的數據，但是一定程度上失去了手機號搜索的意義
所以建議在后臺數據查詢的頁面，將搜索和篩選這兩個操作區域通過換行或者間隔拉大進行比較清晰的區分，不要在搜索字段的區域里面混入篩選的內容。
當數據過多，導致“查詢條件”的搜索項和“搜索結果”的數據項過多的情形。查詢操作優先級混亂，增加操作人員的使用負擔和效率
好的查詢界面可以通過折疊，新增彈框等方式，合理的編排查詢層級關系，在保證查詢功能完整性的情況下，高頻查詢優先展示，編輯方便，預覽快捷，增加工作效率。
我們來看一下什么樣的界面屬于查詢條件過多，搜索結果項過多的頁面，分析一下臃腫的部分和解決方法。
查詢頁面可以分為三個區域，查詢條件區域、操作按鈕區域和數據展示區域，分析一下3個區域冗余和待優化的地方才可以設計出交互良好簡介的頁面
1、搜索條件和篩選條件混合，功能區混亂
2、單項選擇框對多選的字段兼容性差，表達效果弱
3、查詢區域設計語言混亂，輸入框 選擇框 時間選擇框 數值框同時出現 視覺上渙散，混亂
1、查詢區域搜索和篩選字段重新編排，并且進行優先級整理排序
2、重新設計針對多選的字段的選擇組件
3、將同一數據類型的查詢字段合并，頁面只出現一個時間組件、數值框
1、查詢區域搜索和篩選字段重新編排，并且進行優先級整理排序
2、重新設計針對多選的字段的選擇組件
3、將同一數據類型的查詢字段合并，頁面只出現一個時間組件、數值框
鑒于后臺系統的龐大數據量，查詢條件難免會出現過多的情況，為保持各頁面簡潔統一，默認當數據超過N條的時候，將其余查詢條件進行收起處理，防止查詢條件過長，導示影響用戶查看搜索結果。這種收起狀態可以通過幾種不同的形式呈現。
對于單個查詢項
1.相同搜索類型合并展示
鑒于后臺系統查詢種類繁雜，我們大體把他分為關鍵字搜索，日期選擇，數值范圍，單選多選
為保持設計語言統一，可以將關鍵詞搜索和日期選擇合并展示，折疊不同的數據項。
若一個搜索同時存在兩種及以上狀態，可以通過標簽展示刪除
2.搜索項分類選擇
當搜索項中的數據項過多還可使用另一種優化形式，使用下拉框與分類形式相結合。為方便用戶快
速選擇加入了“本項全選/反選”和“全部全選/反選”的功能。其中，“本項全選/反選”是針對當前項
的批量操作，“全部全選/反選”是針對所有項的批量操作。
對于整個查詢區域的布局
1.折疊收起過多搜索項
2.通過開關收起過多搜索項
3.通過分類搜索項目，用標簽跳轉區分
4.通過增加新彈框，隱藏使用頻率低的查詢項
1、操作按鈕數量過多
2、操作按鈕樣式類似，無法體現功能優先級
1、精簡按鈕數量
2、根據按鈕功能地位，強化/弱化按鈕樣式體現層級關系
1、將使用頻率不高的按鈕折疊展示
2、弱化次要按鈕
1、表頭與關鍵數據列固定列表內數據行的橫向、縱向數據過多
2、無法自定義展示的數據列
1、將重要的數據項固定，梳理過多的數據項
2、增加自定義展示數據列的功能
1、選擇使用表頭固定及關鍵數據列固定，方便對應查看數據標題及內容
2、通過增加自定義字段展示和支持列寬，就能盡可能多的展示需要觀察的數據項
1.表頭與關鍵數據列固定
列表內數據行的橫向、縱向數據過多時，選擇使用表頭固定及關鍵數據列固定，方便對應查看數據標題及內容。
2.分類篩選字段展示
數據行橫向字段過多時，可將字段分類展示，根據不同的分類去展示字段，即可全局查看，又可分類查看。根據用戶選擇的分類進行橫向滾動，方便查看數據。
5.自定義篩選字段展示
數據行橫向字段過多時，還可將字段自定義展示，用戶可以自定義選擇展示的篩選字段和調整順序，根據用戶的要求將常用的高頻率的篩選字段優先展示，提高工作效率。
以上的內容是按照查詢頁面的三個部分臃腫的地方提出的解決方法，但是優化查詢頁面的交互，使得查詢操作既高效又舒適
還是得依據各個查詢頁面的業務需求，將以上不同的解決方法組合，才能得到一個適應于自己當下任務的方案。
方案一
查詢條件區域 將低頻率的篩選條件折疊到高級篩選中+搜索項分類選擇+將關鍵字搜索字段合并展示
操作按鈕區域 將低頻率的操作按鈕折疊到更多按鈕中
數據展示區域 使用分類展示+表頭與關鍵數據列固定
優點 首頁展示查詢內容最少，頁面簡潔，可以展示更多查詢數據，頁面和彈框內將類似字段折疊展示，內容緊 湊，操作便捷
缺點 頁面交互路徑增長，編輯數據要進彈窗，不夠方便，次要按鈕和次要查詢字段被折疊隱藏，新客戶不易找 到
方案二
查詢條件區域 通過篩選開關，選擇是否展示篩選字段 字段選項鋪開展示
操作按鈕區域 將低頻率的操作按鈕折疊到更多按鈕中
數據展示區域 使用自定義顯示表格字段
優點 首頁可以直接編輯字段，展示內容最多，直觀方便，可操作性強，交互路徑短
缺點 頁面鋪開高度過高，關閉篩選開關無法預覽篩選條件，打開開關，則壓縮表格空間，電腦一屏展示數據較 少
靈活運用布局和組件的簡化方法，才能搭配出適合自己產品的最優設計，以上內容僅供參考，希望大家可以學到的是設計方法，而不是組件和布局本身。感謝觀看。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
圍繞應用生命周期的編排設計是一種企業級技術產品設計策略。
它的核心是要解決設計師很難上手企業級技術產品，且更加難以找到體驗設計機會點的問題。我們是一群工作在企業級技術產品領域里的設計師，同時也是掘金者，這篇分享即是我們在企業級技術產品領域里探索的一些方法總結。
在我們日常工作中，和技術產品 PD 聊需求是一件非常痛苦的事情，他們講的每一個字都認識，但是組合起來就不知道是干什么的了，因此設計師也很難去想象用戶是怎么在用這些功能。
因此相較于 C 端產品來說，B 端的技術產品目前還處于基本可用的狀態，更談不上什么體驗了。
究其原因，我們總結有三點：
① 這些產品大多數都是由技術來主導，功能優先
② 設計在整個流程中都處于非常被動的狀態
③ 設計與技術之間存在一定的專業壁壘，技術往往比較抽象難以理解
同時，我們的用戶并不是客戶，用戶不能根據自己的意愿喜好選擇產品。用戶隱藏在企業內部，設計師日常中很難接觸到真實用戶。另一方面，用戶的技術專業背景與設計師的專業存在鴻溝，這使得設計師對用戶需求的理解也不夠深，所以說在這種環境隔離和語境不通的狀態下，設計師其實難以和用戶構建同理心。
在這種狹小的設計發揮空間里，我們能做什么呢？
其實我們設計師有明顯的優點：
比較擅長找規律找方法，有破局意識，從而能夠發現設計的機會點。
所以我們回過頭看一下之前做過的這些產品和功能，從它們的作用對象、出現時間、用戶目標、用戶行為這四個維度對他們進行歸納和總結。
我們發現這些產品具有很強的階段性，通過不同的產品來支撐各個階段下的用戶目標。用戶通過產品的功能來實現各種編排動作，例如對應用本身代碼的編排、對應用依賴的底層資源的編排，從而支撐用戶應用的生命周期。
因此企業級技術產品具有以下四個特點：
階段性
驅動性
流程性
抽象性
首先我們要針對這四個特性進行一輪判斷，了解這個產品的場景，場景下對應的角色，每個角色執行的是單線還是多線任務流，以及任務流是由哪些功能支撐。經過這層判斷之后再定位具體問題：
① 每個階段的目標是什么
② 階段下每個角色各自的小目標又是什么
③ 任務要對應用還是應用相關的內容進行編排
④ 產品的功能是如何實現的
當找到這些問題的答案以后，我們就可以對產品的上下游場景進行編排，明確各階段的側重以及上下游場景的限制條件；對角色進行權限分配以及協作觸點的確定；將任務流從起點到過程再到結果進行梳理；以及最后通過對底層技術的理解，合理編排產品信息架構和界面內容。
為了能夠更加高效的完成以上信息的收集和處理，我們沉淀了 CMTD 四個小工具。
C 是 Collaboration，協同場景，主要回答四個問題：When、What、Who、Where。
① When：用以明確產品所處階段以及上下游階段，以全鏈路的視角看用戶的完整使用場景，因為產品往往可能只是解決用戶部分場景的問題
② What：定義當前場景的階段目標以及要做的事情
③ Who：當前階段的事情由哪些角色參與
④ Where：這些角色在線上或線下是如何配合協作的
例如我們要做一個技術產品，通過 Collaboration，我們知道它覆蓋了發布階段、日常運維階段，目的是把經過測試的應用發布上線并進行日常維護，主要是運維人員配合研發人員和發布經理完成線上的問題排查和線下配置文檔的交接，我們就能比較清楚的知道我們要做的是一個運維平臺。
M 是 multi-role，多角色，主要用以分析產品是由哪些角色共同協同驅動的。
與 C 端產品不同的是，我們除了對核心角色的自然人屬性進行洞察，還要定義清楚該角色的目標有哪些，目標對應的任務流以及支撐的功能和權限。并且企業級技術產品往往都不是一個角色就能完全執行完成，所以該角色的上下游角色也要摸清之間的協作觸點在哪里。
多角色的信息我們可以通過在客戶現場或者用戶訪談來收集，并沉淀為用戶角色庫。
基于收集來的用戶信息，來定義我們產品的角色：
T 是 Task flow，任務流。任務流一定是基于一個用戶角色的某個目標，來定義任務的起點-過程-結果。
起點就是界面上用戶的操作入口，過程需要包含觸發操作、自操作、條件判斷以及是否有協作角色參與進來，在結果處除了提供結果反饋還要提供下一任務的去向入口，幫助用戶把流程串聯起來。
任務流可以借助現有流程的走查或按照 T 模型來梳理任務流信息，從而幫助我們更好的定義一條用戶的任務流是如何執行的。
例如我們要做的運維平臺的產品，核心角色是運維，他其中的一個目標是為應用創建工作空間。按照 T 模型，我們可以很方便的將這條任務流定義出來。
D 是 deep ，深化。主要從兩個維度展開：技術架構和邏輯原理。這是兩個在做技術產品的過程中經常會接觸到的兩個概念。
在分析技術架構時，我們可以重點關注兩個點：看由哪些功能模塊構成，這些功能之間的靜態結構，是包含關系還是依賴關系。分析邏輯原理，一是了解這些功能產生的實例，是一對一的關系還是一對多的關系，信息或流量在這些功能模塊之間如何流轉。通過這些分析，我們可以把掌握的功能特征和邏輯規律。
舉例來說，運維平臺的核心角色運維人員需要為應用創建工作空間，按照梳理出的任務流，用戶需要經過3次跳轉7步完成，那這個是否還有優化空間呢？
我們可以從 Deep 深化的角度入手，看這條任務流是由哪幾塊功能支撐的。例如工作空間內包含網絡和安全組，安全組內包含負載均衡和虛擬機。就像我們了解汽車的制動裝置，看到裝置內包含氣室，氣室內包含活塞體、密封墊，密封墊連接在推桿上。
再從邏輯原理圖入口，了解流量會先按照工作空間進行隔離，從工作空間走專有網絡還是經典網絡，網絡將流量分發到安全組，安全組里的負載均衡會負責調配流量到虛擬機。他們之間層層遞進互相依賴。就像汽油從油箱到達制動裝置，在發動機里和空氣一起被壓縮燃燒后能量轉化轉送到動力裝置一樣。
通過上面的分析我們了解到這幾個功能其實是緊密關聯的，用戶沒有必要分散到不同的地方進行添加和創建，完全可以借助流程表單和抽屜把他們串聯在一起。
因此我們找到優化體驗的機會點，把之前需要三次跳轉7步完成的任務流，優化到1個入口5步完成。
企業級技術產品有四個特性：階段性、驅動性、流程性、抽象性。通過 C、M、T、D 四個小工具來幫助我們收集和歸納信息，實現對上下游場景的編排、角色的定義、任務流的編排以及界面的編排。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
一、布局原則：古登堡、尼爾森
二、結合B端產品和頁面分析
三、大廠布局設計規范分析
四、總結
一、布局原則
布局設計在設計的每個領域都有涉及，這里說的不是設計中的布局四原則：親密、對齊、重復、對比（專業術語：格式塔原則），這是平面設計中常用的布局方式，我的理解就是排版。但B端的布局設計是不同的，每個企業或者產品的設計規范有各自不同的依據。
B端頁面布局最常用的原則我見過有兩種：古登堡原則和尼爾森F型視覺模型。下面是網上找的圖：
（1-侵權提刪：古登堡原則）
古登堡原則：閱讀引力是從上到下，從左到右，呈現Z字形移動，而起點和終點會作為重點視覺記憶區，中間過程會輕掃作為次要視覺記憶區。左上和右下是用戶會比較容易關注和注意到的地方。
（2-侵權提刪：尼爾森F模型）
尼爾森F模型：我們在第一次觀看頁面時，視線會呈 F的形狀關注頁面。先從頂部開始從左到右水平移動，目光再下移開始從左到右觀察但是長度會相對短些，以較短的長度向下掃視，形成一個 F形狀。
這兩個原則都是從用戶視覺角度分析，在按需帶入產品頁面設計的。沒法單純的說哪個對哪個錯，或者說哪個更好。因為要結合產品屬性、信息結構、及用戶心理等因素。
二、結合產品和頁面屬性分析
我們公司產品的列表頁面是參考古登堡原則制定的布局設計規范。這是一個運維產品（我們通常稱為SaaS：軟件即服務）-列表頁面的模板，可以看到大部分內容被表格占據，且表格中的內容是相似的。通過與騰訊藍鯨團隊的溝通，最終確定這種布局的頁面用戶視角瀏覽流程是“Z”型的。
主要操作按鈕在左側的第一視角區，通常以“新建”等主要按鈕為主、“導出”或“批量操作”等次要按鈕為輔一同擺放。因為列表通常是某個任務的羅列，會把新建的入口也放在一起，一是為了方便用戶快速找到新建任務入口，二是為了讓信息結構更聚攏。強休息區放搜索框。在不同場景下，按鈕和搜索框位置要視需求確定位置。在我們公司的大部分產品場景下，按鈕是在左側。最終落腳點是在操作字段（表頭屬性，技術角度稱為字段）。
彈窗的布局也是類似的，很容易可以判斷出標題和確定、取消按鈕是兩個視角落腳點。
當然不是所有頁面都遵循古登堡原則，像下面的表單頁面就是使用F模型。因為最主要信息標題都在左側，且信息流是集中往下走，并不分散也不需要橫向跨度很大。所以使用尼爾森F模型就可以支持布局走勢。
三、大廠布局設計規范
這里以騰訊Magic Box VUE組件庫和阿里AntDesign來分析我個人的理解：
這是從antdesign官網找到的信息復雜度和相關性模型，選用相應的信息呈現方式，選用合理的布局方案來承載詳情頁的內容。這應該是阿里內部自己建立的布局規范，既不符合古登堡原則，也不適應尼爾森F模型。但從地下不同頁面內容的分布來看，我覺得是把這兩種模型結合了。請看下圖：
古登堡原則注重左上角和右下角的內容。尼爾森F模型是只注重左側內容，這種布局方式通常是信息量比較大時用的比較多。我們把頁面的內容拆開看就可以分析出，每個模塊也是可以分成不同模型的結合。
騰訊Magic Box的布局規范就是前面我們公司用的是一樣的，就不多分析了。
四、總結
通常：信息流頁面使用尼爾森F模型。需要用戶操作頁面的則常常把古登堡和F模型結合使用，具體使用哪種看兩個：1、用戶在頁面的常用操作是什么，2、你想或者說是產品想傳遞給用戶的信息是什么。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
往往偉大的事業都是從七月開始的、我用一個設計師的視角，來盤點一下UI/UX行業這半年的設計風格走勢。
以下我從色彩、圖形、圖標、排版、行業趨勢這五個層面進行一些2021年中期盤點總結。
在色彩方面，雖然UI是一個相對獨立的設計環境，但其實一直是在跟隨平面的趨勢。
年初潘通發布了2021年的色彩流行趨勢，灰黃色一時間成為了我們追逐的目標。
但是潘通流行色更多是表現了一種當下的社會情緒與遠景追求，并不是用來指導設計的。
(圖片來源：Dribbble)
在UI的色彩方面，我們都記得2020年還是流行的是高飽和色彩路線，而2021年UI色彩一下子就被沖淡了，各種低飽和度色彩的作品更加得到設計師的青睞，似乎也昭示著大家的情緒也從疫情中慢慢穩定了下來，這個世界的確需要設計來對情緒進行即時表達，在5月份Google的全新Material You設計語言中，這種低飽和色彩也被發揮的淋漓盡致。相信低飽和度色彩將在2021下半年會延續發展！
有關Material You信息可以看一下我的另一篇文章《Material You 為你而來！》
(圖片來源：Google Material You)
(圖片來源：Dribbble)
圖形方面，亮點在3D！毫無疑問3D插畫在2021上半年繼續著他的強勁勢頭，2021上半年涌現出了大量優秀的3D風格插畫，并且不止是3D卡通人物，在產品渲染和背景展現上也在醞釀新的力量。特別說明的是，設計工具的高速發展也讓3D門檻不斷降低，如果你只盯著C4D那就真的OUT了，像Blender Spline Stager 這樣的新興輕量級3D工具軟件是需要特別關注的，也許這些新工具是真的能讓你跑出與別人不一樣的賽道。
(值得關注的3款新興3D軟件)
在2D圖形方面，也有突破，除了傳統的矩形、圓角矩形、圓形之外，UI中將會引入到更多的形狀，像多邊形、三角形、不規則形都會大量的出現在UI設計中，UI設計越來越開放和放得開了！
(圖片來源：Google Material You)
隨著去年底蘋果BigSur操作系統的發布，3D圖標著實火了一段時間，出現了不少3D風格圖標。但是后來大家發現在圖標在2D層面其實還是很有創新點的，并且也更加實用，所以我們又看到了磨砂玻璃風格圖標走入了我們的視線。這種采用背板透光設計的風格圖標，看起來清新自然，一經亮相就讓設計師們喜歡起來了！
(圖片來源：Dribbble)
但無論是3D風格還是磨砂玻璃風格圖標設計，從某種意義上說，這些都是擬物化設計的一種新的回歸方式，設計就是一個圈哪！
排版設計，塊狀與字體成為了關鍵詞。先看幾個作品，你發現了什么了嗎？
(圖片來源：Dribbble)
UI設計的排版不止是為了視覺好看，更多是要做信息的分割與歸類，讓信息閱讀快速準確且優雅！從某種方面也就是我們說的用戶體驗。當下仍然是扁平化為主體UI設計語言的時代，陰影設計幾乎已經退出了當下的主流設計，所以在信息的區分上靠的就是留白與文字，所以加粗大字體，卡片留白、形狀色彩塊就在UI排版設計中起到重要的作用。再輔助通過一些微交互動畫，一切都是那么自然絲滑，主次分明！
(UI排版的三個趨勢)
最后我們說說行業趨勢方面，在2021上半年的UI設計作品中，除了常規的移動端APP UI設計之外，我們更多看到了一些針對于其他設備的UI設計，比如說電腦B端應用、車載HMI、數據可視化、交互動畫等這樣的新端趨勢，并且這些作品的數量越來越多了，所以從行業趨勢來講，UI設計師們還是要打開更多的眼界和格局，設計的競爭不止是在水平能力上，更重要的是行業賽道的選擇！關注趨勢尤為重要！
(圖片來源：Dribbble)
(需要關注的四個新端設計趨勢)
用我開頭的那句話，做個結尾吧！ 往往偉大的事業都是從7月開始的，無論你上半年是碩果累累還是顆粒無收，現在開始！一切都還來得及，還來得及！
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn