本文是《設計模式周周看·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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
往往偉大的事業都是從七月開始的、我用一個設計師的視角，來盤點一下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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
相信大家在做設計的時候都遇到過這種情況，一個產品內有多個入口指向同一個界面，這是產品的投機取巧還是另有深意，很多人都對這樣的設計有不同的看法。
這樣的設計就好像是狡兔三窟，在產品中流量可以從不同的入口進來，到多個不同的出口，也可以從不同的入口進入同一個地方。
有人會覺得如果一個界面中有多個入口指向同一個界面會出現問題：
1.違反了效率、用戶預期的原則，會認為頁面空間有限，在同一個界面中有多個入口指向一個界面效率變低，而且用戶知道后往往就會只從一個入口進入。
2.多個選擇會讓用戶拉高轉化的成本，用戶在選擇的時候會花更多的時間思考有什么區別。
我們來看一個例子，下面德邦app之前的一個版本，目前已經優化了。從截圖中我們發現頁面上方的查詢和寄件都和底部標簽單獨出來的界面功能重復了，并且我的快件也直接可以展示在首頁的下方，我的快件目前可以從首頁頂部、首頁下方和個人中心3個入口進入查看。
通過這個案例我們發現確實這些板塊和功能重復度太高，并且沒有區分出場景，這樣的設計證實了以上的兩個說法，降低用戶使用效率和提高選擇成本。而且從業務角度看也并沒有目標的差別。
但是我們分析問題也要多角度去觀察，多個入口進入同一個界面只有缺點沒有優點嗎？
顯然不是，我們再來看幾個案例
下方是一個商品評價的卡片，經過我小手的實際測試，發現無論點擊這個卡片任何有內容的區域，都會跳轉到全部評價的界面，那這樣的設計邏輯是否會造成和上面的案例一樣的問題呢？答案是，不會。
這里的設計邏輯并不是和沙面那里的場景那么單一，而是用戶在面臨不同需求場景的時候可以有選擇。
不知道大家有沒有發現一個問題，在上面德邦案例的時候，你會對兩個入口有疑問，但是在評價卡片的時候并沒有，這個卡片包含了4種不同的場景：
1.我想看看有哪些好評、哪些差評
2.幾個不同標簽的用戶都是怎么說
3.下面用戶的實拍到底是不是真實的
4.還有沒有更多類似真實用戶的使用評價。
所以即便最終到了一個界面，對于用戶來說也是從獨立的出發點開始的，而再回過頭看上面案例，你會發現，我就是要寄東西，這里有兩個入口，怎么選。
而且，考拉這里其實還做了從不同內容點進去的一個區分。
再來看個案例，貝殼的地圖找房，在首頁中有兩個入口，導航欄一個，分類中一個，這里出現重復會造成一開始說的問題嗎？首先我們看到貝殼的業務很多，以至于在這個分類中居然還需要通過滾動指示器來展示剩余內容，大家也可以思考一下，在這個界面中，會不會出現兩個地圖找房不同的場景出發點呢？我個人覺得其實是可以商榷的，首先地圖找房在房產app中是很核心高頻的一個功能，他的屬性是“工具”。
所以我覺得他之所以在卡片中再放一個地圖找房是3個原因
第一個是導航欄的找房肯定不能動，他是一個全局的入口，即使頁面滾動也可以隨時點擊到，即便要撤一個，也肯定要撤下方卡片分類中的。
第二個是卡片分類中的圖標入口是都具備工具屬性的，那首頁上面部分就分為了：搜索、業務分類、工具這三塊。所以用戶看到這些工具屬性也會聯想到通過地圖去找房。而且這些多色彩的圖標對于新進入的用戶是比較吸引注意力的，所以很有可能用戶看不到右上角的地圖找房（可以參考古騰堡圖表的原則）。
第三點是可能右上角的地圖不太能清晰表達這個圖標的具體功能，所以將“地圖找房”四個字顯示全。
但這些都有一些主觀因素在里面，如果真的去掉卡片中的，我覺得可能影響也并不是很大。有小伙伴可能想說是為了分流，但是分流的目前主要是讓流量流到他應該去的地方產生實際價值，除了以上的3個原因，好像確實有點重復了。
再來看一個例子，小鹿茶app。
首頁的現在下單和底部菜單標簽都是到同一個界面，那為什么要重復呢？這里其實考慮更多的他并不想讓用戶進來就直接去購買，為什么不直接購買呢？應該是想要建立自己的品牌人設、滿足更多的消費場景和增值業務，比如給別人點奶茶、周邊的杯子跟合作商品推銷、最新的奶茶的推薦。
如果只有菜單，產品也會顯得更工具化，很難突出自己的品牌，對業務增長沒有太大的幫助。有同學要說，那這個界面只是產品的“一廂情愿”，我就只要點奶茶就可以了，多個入口只會給我帶來困擾。所以他這里的設計邏輯是在用戶打開app的時候首先定位的是菜單，而不是首頁。
所以，到底多個入入口進入同一目標我們還是要看不同的場景和目標的。如果既沒有業務目標做支撐，又沒有用戶場景的變化，那么這個重復的入口就是雞肋的。
最后留一個小思考題：網易云音樂的“歌單”在首頁上也重復了，大家知道這里為什么他要做成重復入口嗎？
一個優秀的產品或者說一個合格的產品，能給用戶帶來愉悅的體驗。何為體驗，用大白話來說就是用的舒服、自然、高效率。
再有一個底線就是不要讓用戶產生由產品帶來的負面情緒，例如產品出錯了卻不告知用戶解決方法、用戶出錯了沒有辦法及時幫助糾正、高危操作沒有二次確認等等，根據負面情緒的嚴重程度幾乎就可以直接讓部分用戶流失。
很不幸的是我就遇到了這樣的體驗，當時正在給同學們布置一些作業練習，體驗一些產品的優缺點并給出解決方法。我也下載了這款文玩類的App，體驗了極速撿漏這個功能模塊。
撿漏：在文玩圈的一句行話，意思就是用很便宜的價格買到很值錢的古玩，而賣家卻不知情，是一種可遇不可求的行為，所以寓意就是比較難得、走好運了。
進入直播間，商家在賣力吆喝，頁面底部有加一手的按鈕，就是類似于拍賣，價高者得。于是我就抱著試一試的心態點了加一手按鈕，因為我預期是產品會再次向我確認是否要加價，結果是居然加價成功了，發生了什么？最后競拍結束也沒有人繼續加價了。
實際場景中用戶可能誤操作不小心點了按鈕，這樣的場景和情況是非常多的，即便不是誤操作，給一個二次確認的對話框也可以避免這樣的尷尬狀況，因為用戶就喜歡在產品中點來點去，然而你在這里就像埋了一顆地雷。
如果到這里就結束了，那其實我也感覺沒必要去吐槽，問題在于當我拍下還沒付款，直播間的商家就開始喊我的名字：xx大哥恭喜你拍到了我們的產品，可以去付款了。連續播報了幾十遍，我尷尬的直接退出了后臺，這種感覺就像是一群觀眾看著一個被騙的小白一樣，當我過10分鐘后打開系統提示商品流拍了，并且累積了違約積分。
？？？
到這里，可能會有人說，你自己拍了的又不付款，當然要懲罰你了。
于是我還是認真的去研究了一下，發現極速撿漏和競拍并不是同樣的規則。該產品和競品其實都有競拍板塊，在競拍板塊都會有需要用戶確認的操作，并在操作下方給出拍賣規則，顯示出價即表示同意拍賣規則。
但是該產品極速撿漏的板塊并沒有這樣的說明，既然沒有提前展示這樣的說明和約定，用戶就不知道有這樣的規則，我拿了競品一對比，其實在直播帶貨的場景下，這個出價流程還是不同的，雙方其實都沒有給規則說明，但競品還是給了一個出價選擇后再出價的步驟。
最后我甚至被商家拉黑了，不過還給我一個投訴商家的入口
我當時的想法：
1.如果因為誤操作讓用戶付出這么大代價的話成本就太高了。讓用戶點擊是否就等于用戶同意？
2.請先告知我約定與協議的內容，單方面在我不知情的情況下對產品進行操作后，通知扣我違約積分，這樣就有點“霸道”了。
3.平臺對商家和消費者的權益是如何平衡的，文玩行業和互聯網結合的難點在哪里。
3.線下文玩圈的一些不成文行規，導致新人入圈后產生的沖突。
于是我就想對此說說我的看法
交易是產品平臺其中的一個功能屬性，需要優先滿足產品對用戶價值，其次再談交易的合理性。在這個流程中，面對用戶很有可能遇到的誤操作行為以及需要讓用戶去下單支付成本，我們必須提前告知用戶。在尼爾森可用性原則中我們也發現了，如果用戶不小心操作失誤，那么我們盡可能減少這些因為用戶犯錯帶來的成本，同時在用戶犯錯之前就要明顯告知用戶，將風險控制、前置。
所以，你在注冊的時候、登錄的時候，產品一定會讓你同意一份用戶協議，告知你我們要保存你的數據和一些跟你相關的信息，如果你不同意，那就無法繼續體驗產品。
這是一種契約。
同理，如果你想讓用戶在這個產品中去參與拍賣，在進入這個板塊之前或者用戶點擊按鈕之后，也需要讓用戶明確這個操作帶來的風險是什么，取得用戶的同意。而不是直接讓用戶加價成功，導致用戶不明所以的被扣違約積分、被商家拉黑，這就和你去泰國，在街頭你朋友拍了一張你和一個抱著蜥蜴的人的照片，結果別人來問你收錢是一個道理。
對于正常線下拍賣的流程，舉辦方也會對參與拍賣的人員進行相關規則、流程的告知，并且將風險、問題都提前讓客戶進行協議確認。
所以，在產品中的交易，必須先滿足用戶與產品信息之間的對稱關系，保持信息的透明和契約公正，規則、約束、條件是用戶使用你產品的前提和體驗反饋的衡量標準之一。
商家希望有更多的流量來曝光商品，撿漏商品的低價可以快速吸引一大批用戶，比如8塊錢的一個木頭核桃的雕刻掛件等，產品通過營造搶購、限時的氛圍，吸引用戶下單，并且降低用戶參與的門檻。
那么，直接加價成功是一個好的降低門檻的策略嗎？我覺得并不是，降低門檻并不意味著就是直接拍到，而是需要提高用戶對產品的信任度，這個極速撿漏的模塊的目標用戶幾乎都是小白用戶，因為資深的玩家看不上、更不會買，有一定經驗的玩家也看的出好壞，明白它的價值。所以面對這些沒有了解過文玩產品的小白玩家來說，內心是謹慎的。
可能有人會想，這幾塊錢、十幾塊錢的東西還需要考慮嗎？當然在這個場景中，從眾心理是很明顯的，大家都覺得很便宜，但就是沒人拍。這都幾塊錢撿漏了怎么都沒人要，大部分人都覺得這么便宜東西肯定不咋樣，運費是不是貴的離譜、有沒有托在背后跟你抬價呢？大家都不拍我也觀望。越多人圍觀，越難促成交易。
還有一種可能就是我賣不賣的出去東西，并不重要，重要的是有人來看了，這些邊角料都是用來回饋直播間粉絲的，就是一個窗口，真正有利潤的東西在櫥窗里。所以這里的撿漏只是一個引流的噱頭。
人總是對太輕易得到的東西不珍惜，更何況是幾塊錢的小玩意兒。所以針對直接拍下這個交互，個人認為是不妥的，無論是上面任何一種情況，都沒有辦法讓降低門檻，甚至通過這種“小聰明”反而會讓用戶更加不信任產品和用戶。
不信任產品是大。尤其是作為一家平臺來說，虛假交易、以次充好、濫竽充數等等行為是致命的。
我其實有玩過一段時間文玩，受我老丈人的影響，有一段時間喜歡玩手串、玉什么的。經常也會在某音去刷一些鑒寶類的視頻，很有意思。
文玩它的價值在于品相、稀有度、盤玩程度、大眾接受度、歷史背景還有工藝等等。所以它并不是一個在每個人心中同等效用的商品，同樣一塊玉，他的種水一般，但是花紋很獨特，買賣雙方其實心理的價值預期會相差非常多，它就不像買電子產品一樣價格那么透明容易計算。
有的人玩這些就是覺得命里該有它，它能給我帶來財、運，幫我辟邪，看的是眼緣。而不是路邊上一塊無用的石頭，可以隨意拾取丟棄。那么換句話說，如果在用戶下單的時候，我們利用一些情感化的文案，讓用戶喜歡上這款文玩，是不是也可以大概率的促進交易呢？
我相信很多玩文玩的小伙伴都知道，在文玩圈有一些不成文的行規。也或許就是因為這些行規出現到了線上產品中。
1.還價意味著出價，出價意味著買下
在文玩圈，你不想買就不要還價。如果賣家同意了你的還價，那你就必須買。這代表著你個人的信譽和道德品質。
所以文玩圈和互聯網的用戶之前有許多的鴻溝需要一步一步建設橋梁，不能單純的以線下圈子內的行規來要求剛接觸這個圈子的互聯網用戶，這需要大家一起努力和營造起一個良好的文玩圈的文化和規則，而不是直接生搬硬套，提高這個門檻。
2.不要打聽別人的成本
文玩沒有實際的成本，可能別人花10塊錢淘到的價值1萬塊的東西，也可能別人花了巨資看走了眼。所以你知道了成本對誰都沒好處，別人也不會告訴你。
3.別人在交易的時候保持沉默
文玩在每個人心中的價值不同，所以貨幣價值也不同，當別人在詢價還價的時候，不管怎樣我們都不要去表明自己的看法和想法。
當然還有其他的規則就不一一敘述了，針對這3條，其實在互聯網的產品中是會有沖突存在的。例如你買了某個文玩，你一拍下，別人就說這個根本不值這個價錢。還有你出價了但是又不想買了，這些原本在文玩圈子中不允許的規則，在互聯網上去要求用戶著實有點困難，因為互聯網上的交易并不一定所見即所得，可能展示的是這樣，收到貨又是另一個東西。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn