屏幕有效利用率這個話題想必大家并不陌生，在B端產品中，越來越多的產品和用戶把目光聚焦到屏效上來。站在體驗設計的角度，立足交互和視覺的設計手法，挖掘屏效提升的設計價值，讓屏效最大化是提升用戶體驗的合理方法。
在此文中，對于整個設計（交互、視覺）的手段方法不做過多的詳細探討，我們重點闡述如何利用實驗研究的手法驗證屏效提升。以某B端項目為例，利用科學的實驗研究方法，通過設計實驗假設、提煉任務場景、準備實驗物料、進行控制變量等完整的實驗方法，來驗證該項目中屏效提升的設計方法（提高信息密度、縮短操作路徑以及信息重組）最終是否提升屏效。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
我們在周圍的世界中看到了許多熟悉的設計模式。例如，大多數道路用實線或條紋線分隔車道。還有交通燈和道路標志可以幫助您在道路上行駛。如果每個國家/地區使用不同的系統，司機將不得不為他們想要駕車經過的每個國家/地區學習新的駕駛模式——但這不切實際！
UX 設計模式的工作原理類似。它們使用戶無需學習新系統即可熟悉瀏覽數字產品或網頁。
什么是用戶體驗設計模式？
UX 設計模式是用于構建用戶界面的常見構建塊。設計師使用 UX 設計模式作為可重用組件來解決常見的可用性問題。
例如，我們經?？吹降囊环N設計模式是面包屑。面包屑向用戶顯示他們所在的頁面以及返回主頁的路徑。
UX 設計模式如何改善用戶體驗
設計模式為設計人員提供了構建塊以更快地創建用戶界面，但它們也增強了用戶體驗。
UX 設計模式通常遵循用戶熟悉的通用設計標準，從而減少學習和瀏覽新產品或網站所需的時間和認知負擔。
在《我們如何決定》一書中，作者喬納·萊勒 (Jonah Lehrer) 寫道，識別熟悉的模式會釋放出多巴胺——一種與動機、獎勵、記憶和注意力有關的化學物質。當用戶體驗模式按預期工作時，多巴胺命中會增加。
使用有效的UX 設計心理學技術的設計師，例如熟悉的 UI 設計模式，可以增強用戶體驗并使產品交互更加愉快。
UX 和 UI 模式之間的差異
大多數設計師交替使用UX 模式和UI 模式這兩個術語，因為區別很小，有很多重疊，并且可能會引起混淆！
UX 模式：用戶流和導航的可重用模式——在社交媒體平臺或網站上無限或連續滾動。用戶認識到他們可以向下滾動以刷新頁面。
UI 模式：用于視覺和交互設計的可重用模式——一個漢堡圖標。用戶知道漢堡包圖標將打開導航。
何時以及如何應用設計模式
知道何時使用設計模式對于產品設計和用戶體驗至關重要。設計人員必須僅在有明確的可用性原因時才使用設計模式。
以下是識別用戶需求和應用設計模式的四步、以問題為中心的方法：
查明問題——您可以通過分析和可用性測試的組合來識別問題。例如，您注意到在獲取客戶詳細信息時，您的產品注冊流程有很高的流失率。通過可用性測試，您了解到一個常見的痛點是注冊過程耗時太長——您的注冊表單要求填寫全名、電子郵件、年齡、性別、城市和手機號碼（其中許多細節與使用產品無關） 。
通過市場和競爭對手研究找到解決方案——尋找競爭對手和流行的設計庫，以找到常見的 UI 模式來解決您的問題?；氐轿覀兩厦娴睦樱鷷l現競爭對手通常只在注冊時詢問用戶的全名和電子郵件地址。它們還允許用戶使用社交媒體帳戶進行注冊和登錄，從而簡化注冊流程。
自定義設計模式——您必須自定義新的設計模式以匹配您的品牌和現有設計系統。對于我們的用戶注冊示例，此自定義可能包括調整輸入、社交媒體按鈕和提交按鈕的圓角半徑。占位符文本、輸入標簽和錯誤/成功消息將使用您的樣式指南中的顏色。
測試您的設計模式——最后，您必須始終測試新的設計模式實現，以確保它們滿足可用性和品牌要求。
上面的例子展示了可用性測試的重要性——識別和應用用戶界面設計模式以測試開始和結束。
不要因為競爭對手有一個設計模式或者你認為這是正確的做法就添加一個設計模式。例如，您的網頁設計是否需要面包屑導航？對于電子商務，可能有必要讓用戶返回到產品類別或知道他們在結賬序列中的位置。但是，對于大多數其他網站，它只是添加了額外的數據點供用戶處理。
UX 設計模式的常見示例
設計模式分為六大類：
A. 數據輸入輸出
B. 內容結構
C. 導航
D. 社交媒體和分享
E. 激勵
F. 等級制度
數據輸入和輸出
數據輸入和輸出是最常見的用戶/產品交互之一。用戶輸入信息，系統返回數據或完成一個動作。
一個很好的例子是許多網站和應用程序使用的日期選擇器。盡管它們看起來略有不同，但大多數日期選擇器顯示類似的布局和功能——標題中的月/年、星期幾和日期。
當用戶單擊一個日期時，它會突出顯示以選擇。最后，有一個 CTA（有時是一個取消按鈕），用戶可以在完成并準備繼續時單擊。
數據輸入和輸出的其他示例包括：
a) 表單提交
b) 成功/失敗消息
c) 應用通知
d) 進度條/步驟
內容結構
你有沒有注意到大多數界面使用類似的塊布局和圖像縮略圖？或者，管理界面的左側導航面板和右側的內容如何？
使用這些熟悉的內容結構和 UI 模式可以幫助用戶快速瀏覽新的數字產品或網站。目標是最大限度地減少摩擦（例如學習新界面），以獲得無縫和愉快的用戶體驗。
導航
熟悉的 UI 模式可以幫助用戶輕松瀏覽網站或數字產品。桌面和移動界面有不同的導航模式。
例如，主導航位于桌面網站或應用程序的標題中或左側。在移動應用程序中，主導航欄位于頁腳中，只需用拇指觸碰即可。
無限或連續滾動是 Instagram 和 Pinterest 使用的典型導航設計模式。當用戶滾動時，系統會刷新以顯示更多內容。這種設計模式很熟悉并增強了用戶體驗，因為用戶不需要單擊下一步按鈕或分頁來查看更多內容。
社交媒體與分享
設計師可以使用多種社交媒體和共享設計模式，包括：
a) 鏈接的品牌社交媒體圖標
b) 共享圖標 - 向右彎曲的箭頭或三個點的共享圖標
c) 引言——用引號引用此人的姓名和形象
這些熟悉的設計模式可幫助用戶找到社會認同，以建立對您的產品和品牌的信任。
這些設計模式利用心理學，鼓勵用戶執行所需的操作。這里的目標是在用戶和產品之間建立聯系。
激勵
激勵 UX 模式利用設計心理學來鼓勵用戶執行任務和操作，從而創建用戶/產品關系。
設計師鼓勵使用設計模式通過積極的反饋、認知、游戲化等來吸引用戶。
例如，游戲化模式鼓勵用戶邀請朋友來獲得獎勵。UI 模式將通過 CTA 向用戶顯示他們當前的積分，以邀請更多朋友賺取更多。
等級制度
層次結構模式類似于內容結構，因為它們為用戶創造了即時的視覺熟悉度，以便快速瀏覽界面并知道如何完成所需的操作。
博客的兩種常見層次結構模式包括標題和目錄。用戶可以滾動頁面以快速找到他們想要的內容或使用目錄跳轉到特定部分。
面包屑是電子商務網站用來幫助用戶瀏覽產品頁面和結賬流程的另一種層次結構模式。
總結
UX設計模式是用戶體驗的重要組成部分，因為它們最大限度地減少了產品的學習曲線和人類認知負擔。設計師必須知道何時使用這些 UX 設計模式，而不僅僅是出于習慣或模仿競爭對手而實施它們。
分析和可用性研究可幫助設計人員確定界面中缺少哪些 UX 模式，然后測試他們是否實施了正確的模式。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
2021年，標志設計師朝著更大膽、更具創新性的設計邁出了一大步。與平面設計趨勢類似，品牌推廣大量采用軟循環動畫和鮮艷的配色方案。它還開辟了實驗排版，鼓勵創造性思維重新審視標志設計。
2022年的標志設計趨勢很可能會延續這一大趨勢，我們希望看到上述美學在全球范圍內得到重塑。您會看到設計師同樣選擇極簡主義和卡通標志、3D 和平面標志、花卉和文字標志。我們認為2021年是創作自由的一年。然而，看起來在2022年，我們將看到它真正的肆無忌憚。
1) 簡單的幾何圖形和基本形狀
2) 高大的標志
3) 飽和顏色和漸變
4) 象征主義和極簡主義代替現實主義
5) 涂鴉和草圖
6) 粗體字標標志
7) 無襯線標志
8) 花藝和微妙的裝飾
9) 黑白標志
10) 3D與平面樣式
簡單的幾何圖形和基本形狀
在2022年，擁有基于復雜圖形的標志幾乎會很少見。此類標志通常難以記住，客戶可能會很難發現在品牌與其圖形表示之間的聯系。對于尋求加強存在感和提高品牌知名度的大企業來說，這可能是一個巨大的問題。因此，公司傾向于拒絕此類標志，而傾向于使用一些基本的東西。
基本的幾何形狀是各種三角形、圓形、正方形、點和線，它們使標志設計成為簡單的圖像。作為優化，建議設計師使用充滿活力或獨特的配色方案?；蛘呦喾?，切換到黑白，將這種極簡效果發揮到極致。最后，還有負空間，這是另一種采用簡單幾何形狀并保持視覺趣味的好方法。
高大的標志
雖然2022年的大多數標志設計趨勢與我們兩年、三年或五年前曾經擁有的一切產生共鳴，但高大的標志就像一口新鮮空氣和創造力。反對過度使用的三角形、方形和圓形標志。正如我們從多個Behance項目中看到的那樣，它們的美學非常適合尋求領先的時尚公司、精品店、創意工作室和大品牌。
高大的標志部分借鑒了裝飾藝術風格，它們特別喜歡優雅的垂直框架。高大的標志同樣具有波西米亞風美學和現代幾何元素。事實上，這種標志設計趨勢的根源并不那么重要。真正重要的是新的形狀讓設計師想出了新的標志創意，所以在這里我們希望他們以不同的方式處理字體和圖形元素。
飽和顏色和漸變
實踐表明，標志的顏色工作和色彩的選擇是一個非常個人化的故事，通常很難跟蹤全球趨勢或與特定顏色相關的任何標志趨勢。有人更喜歡黑白標志。有人會選擇現在特別流行的單色、裸色或大地色。然而，如果我們看看大品牌，我們將能夠在標志設計中使用生動、飽和的顏色來定義一個巨大的趨勢。
對標志設計中顏色的興趣已經發展到這樣的程度，創作者不僅要增加飽和度，還要選擇純粹、生動的解決方案，同時盡可能地簡化標志。太多的細節和顏色會造成混亂的外觀，因此選擇其中一個至關重要——在極簡主義時代，選擇很明確。然而，我們不禁強調鮮艷的色彩很難處理——尤其是糖果色。它們可以使品牌標識看起來廉價甚至業余。因此，當您關注這一標志設計趨勢時，重要的是要取得平衡——否則您將面臨使用可疑標志的風險。
象征主義和極簡主義代替現實主義
有多種與簡化標志和極簡主義相關的標志趨勢——這可能是最能說明問題的。我們每個人都將標志創建為一件真正的藝術品。動物、花卉、神話和生物——在標志內，它們展示了精湛的技藝和對細節的迷人關注。誠然，這樣的標志確實看起來很引人注目，但從響應式設計的角度來看，它們失去了其他類型的標志。
您可能還記得響應式標志，這個術語是在大約4年前引入的。這些是可以適應不同屏幕尺寸或其他媒體的標志。為此，設計人員可以刪除字標、簡化或隱藏標志。今天幾乎沒有人認為響應式標志是一種獨立的現象或趨勢。相反，響應性是標志的自然特征，象征主義和極簡主義的運動正好證明了這一點。
涂鴉和草圖
2022年，草圖和涂鴉將作為圖形設計趨勢回歸，因此它們作為單獨的標志設計趨勢出現。其復興的關鍵是人們對設計師個人品牌方法的興趣增加。顯然，沒有什么比以獨特風格繪制的快速草圖、卡通人物和形狀更好的了。
因此，要為標志設計中的更多涂鴉以及企業品牌中草率的卡通標志和快速繪制的吉祥物做好準備。以快速和樸實的方式制作的手繪標志也受到歡迎，我們已經看到以這種方式書寫品牌名稱的項目和團隊。
粗體字標標志
如果我們考慮2021年的標志設計趨勢，粗體字標志將是最好的例子。于2020年底推出的實驗排版項目專注于不常見的幾何解決方案。難怪品牌和標志設計師不能忽視這種大規模的圖形設計創新——在這里，我們在標志設計方面有了一個全新的方向。
許多跨國公司選擇字標標志。例如H&M、可口可樂、Zara、谷歌、Visa等品牌。然而，幾乎沒有人認真考慮使用實驗字體進行品牌重塑。這就是為什么此類文字商標標志主要在獨立工作室、小型企業、精品店、沙龍和個人創作者中傳播。也許，這些大膽標志的特征是其吸引力的另一個關鍵。您可以將它們視為那些知道要注意什么的鑒賞家的標志——或者那些想要感受品牌美學的人。
無襯線標志
雖然使用大膽的實驗排版并不是每個人的趨勢，但無襯線字體是每個人都知道和理解的。自從設計師拒絕花哨的腳本和襯線字體而支持無襯線字體以來，已經有一段時間了。但由于存在普遍趨勢，我們可以說它仍然是2021年的標志設計趨勢——順便說一下，這得到了我們上面寫的極簡主義和基本幾何形狀的流行的支持。
拒絕花哨字體的動機非常簡單——使用無襯線字體要容易得多。使它們適應不同的屏幕和畫布尺寸并不復雜，因此它們更適合響應式標志。有趣的是，幾年前，我們觀察到了一個相反的過程：許多公司從無襯線字體切換到襯線字體，因為復古設計非常流行。今天，隨著復古狂熱慢慢釋放出來，健康的實用主義出現了，無襯線字體再次相關。
花藝和微妙的裝飾
我已經不知道設計師和產品創造者用極簡主義制作了一系列標志多少年了。與此同時，許多小企業繼續選擇和使用它們，所以這些標志不會退縮——就好像它們剛剛出現在市場上一樣。所以請放心，它們將與您共存數個季節，同時還會定期推出新款式，例如2022年風靡一時的Boho。
也許，這種標志設計趨勢是最流行的。優雅的線條看起來令人著迷，因此使用它們的誘惑很大。2019年如此，2022年依舊如此。 事實上，這種微妙的視覺風格并不僅僅集中在花藝上。有很多日常用品：從家具到文具和衣服。重要的是這些標志模板是如何制作的！
黑白標志
隨著我們繼續從各個方面學習了解極簡主義，讓我們在這個市場中傳遞2022年的另一個自信趨勢：黑白標志。實際上，將黑白色調視為一種趨勢是很奇怪的，因為它是一種經典的解決方案，并且它的存在與時間和風格的變化無關。所以，我們需要讓您注意到對此類標志的興趣是日益增加的，其中最重要的例子是GoDaddy的重新設計之一。他們逐漸簡化了他們的標志，現在他們似乎到達了最后階段——帶有帶有無襯線字體和保留標志的黑白標志。
黑白標志的最佳之處在于它們令人難以置信的風格靈活性，這使得它們在品牌設計師中流行起來。它們完美地適應了品牌的審美，因此可以將它們用于字體、裝飾元素和幾何形狀的各種實驗。極簡主義、創造性的排版、花卉、象征主義、原始幾何——一切都與黑白標志相得益彰。
3D與平面樣式
3D是2021年最有前途的圖形設計趨勢之一。隨著技術的發展，這種圖形變得如此龐大，以至于我們永遠無法預見。甚至可以在直觀的在Spline或 Procreate的最新更新中進行高質量3D對象的制作。圖像質量也得到了發展。
然而，在標志設計中，情況頗有爭議。設計師將平面樣式的 logo 轉換為3D，反之亦然，力求使 logo 風格更加生動和簡潔——后者對于舊版本的3D和假3D尤為典型。出于同樣的原因，他們付出了很多努力來探索類似于3D的方向——等距藝術。它允許在視錯覺、鮮艷的色彩、漸變、陰影和形狀的幫助下獲得大量圖像。可能它看起來比3D更適用于標志設計——但時間會證明公司和客戶會習慣什么。
最后
顯然，2022年和2021年的標志設計趨勢沒有明確的界限。大多數處于巔峰的趨勢已經伴隨我們很長一段時間了。
但是，我們可以肯定地說，例如之前非常受歡迎的故障風格，不太可能成為本季標志設計的主角。在過去的幾年里已經有很多這樣的事情。動畫標志也是如此，這是2021年最有希望的標志趨勢之一。動畫本身繼續引起人們的興趣，這是展示品牌的一種成功技術——但不幸的是，它并沒有被證明是可行的。
最后，3D的命運也沒有確定，我們還不能說3D或扁平風格的標志設計是否會成為一種趨勢。我們已經寫過，設計師的立場是模棱兩可的，一個方向和另一個方向都有品牌重塑。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
設計原則是設計師為規范和塑造他們的作品而制定的規則。這些原則強調焦點設計元素，遵循它們有助于幫助設計師與廣泛受眾產生共鳴。
盡管設計原則聽起來可能限制了自由，但它們的創建是為了支持設計師的工作，而不是設置障礙。您可以將它們視為建立一般順序但不干擾作者創造力的拼寫規則。因此，設計工作依賴于設計原則，一旦使用得當，就會開始吸引觀眾的注意力和興趣。理解這些原則意味著理解并控制整個項目、創建它的過程以及每個涉及的設計元素。
不同的團隊和工作室區分不同數量的設計原則。然而，七項原則被認為是基本原則。它們是平衡、層次、統一、對比、強調、比例和重復/節奏。
1. 平衡
平衡可能是最明顯和最容易理解的原則。這也是讓視覺內容感覺舒適的一個重要功能。這個想法是設計的每個元素——比如字體、顏色、圖形、背景、形狀、圖案、按鈕、文本等——都有它們的視覺重量。較重的元素會迅速吸引觀眾的注意力，而較輕的元素則不會，主要用于完成整個場景的整體性與和諧性。
有兩種類型的平衡，對稱和不對稱。對稱平衡是通過沿中心軸對齊的等重元素實現的。不對稱平衡與鏡像相反。它使用不同權重的元素并且更常見。這樣的構圖圍繞一個或幾個突出的部分排列，因此創作者尋求輕元素和重元素之間的平衡以獲得視覺圖像。
2. 層次結構
層次結構是網頁和應用程序設計中最重要的設計原則之一。它用于對設計元素進行優先級排序，并根據其重要性設置重點。這里有一個簡單的規則：如果一切都標記為重要，那么一切都不重要。
層次結構引導用戶跨界面從焦點對象到二流對象，并有助于按邏輯順序了解事物。如果忽略了這一設計原則，構圖就會顯得雜亂無章，而且很難找到必要的信息。
設計中有兩種主要類型的層次結構：視覺和排版。可以通過場景內對象的比例和顏色強調獲得視覺層次。排版層次結構是通過不同的字體、大小和字體粗細來實現的。
3. 統一
你可能遇到過這樣的網站、印刷品，甚至是室內設計概念：大量的元素很難融合在一起，所以整體形象看起來一團糟。為了解決這種圖形的混雜，使用統一的原則，應該創造視覺和心理的和諧。
統一意味著與品牌理念和信息的聯系，因此每個制作的設計，無論是網站頁面、T恤印刷品還是廣告，都應該成為其中的一部分。它與設計系統密切相關，是大多數平面設計公司和項目應該考慮的原則。
4. 對比
雖然統一和平衡創造了易于交互的視覺上可接受的設計，但多樣性增加了吸引注意力的細節。如果沒有多樣性，即使是最平衡、最精心組織的概念也會缺乏對比，變得單調乏味。
這個設計原則為項目添加不同的視覺元素、圖案、符號或排版。事實上，這是設計師可以盡情發揮創造力并順應潮流的地方。
5. 強調
強調是通過在構圖中設置焦點元素來創建畫面的設計原則。這意味著它們會吸引觀眾的眼球，但不會超過其他元素，否則平衡就會傾斜。這就像一個好的海報設計：你立刻就能看到正在演奏的樂隊，并且找到細節：音樂會的日期和地點、門票價格等。
強調可以通過比例、重量、位置、顏色、形狀和樣式來實現。創建一個大膽的、色彩鮮艷的元素是不夠的，因為一切都應該在一個設計中連貫地顯示。
6. 比例
比例是指元素相互之間的大小，是最全面的設計原則。調整比例并根據物體的大小和視覺重量對物體進行分組有助于突出重點并保持構圖的統一。
設計組合中比例的主要思想是，越重要的元素越大，不重要的元素越小。就像著陸頁、文章或海報一樣，對象之間的比例關系與其對讀者的重要性相關。
7. 重復/節奏
這兩個設計原則相輔相成，相互補充。重復是指在設計中實現相同或相似的元素：如圖像、按鈕、顏色、字體或形狀。它用于創建統一性和一致性。通過使用相同的圖標、背景或風格化元素，可以輕松實現重復。如果使用得當，它可以控制瀏覽者在頁面上的移動，因為重復元素可以成為吸引和引導注意力的絕佳方式。
元素重復的方式創造了一種節奏感。當設計中有節奏感時，觀者將其視為旋律。有五種類型的視覺節奏：隨機、規則、交替、流動和漸進。
隨機— 沒有特定規則間隔的重復元素。
定期— 重復進行相同的間隔。它通常是通過創建一個網格或一系列垂直線來獲得的。
交替— 允許在設計中重復多個元素。
流動— 模仿自然流動并顯示遵循各種彎曲和曲線的重復元素。
漸進式— 通過在重復時改變元素的一個特征而獲得。
最后
定義要使用的設計原則并不總是有意義的，因為它們可能會在創作過程中參與和拒絕，而設計師的主要目標仍然是傳達重要信息，創造和諧構圖，設計可用的界面。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
設計趨勢可以塑造一切，從設計師的創作方式到用戶界面設計，再到從網站到包裝設計的未來迭代。
讓我們深入探討2022年的一些頂級網頁設計趨勢。我們將著眼于 2021年末開始出現的趨勢，這些趨勢是為來年奠定基礎的，以及一些即將流行的趨勢設計。
有趣、樂觀的設計
時尚的形狀、顏色，甚至是面孔都可以帶來很多樂趣。設計師正在使用網頁設計趨勢，為從網站的所有內容提供有趣、樂觀的設計。這些設計的共同點是它們為世界注入了一點額外的快樂。
充滿樂趣和樂觀的圖像具有面孔、較輕的字體，以及散發出積極情緒的顏色。為了充分利用這一趨勢，請考慮更輕的元素，并避免選擇較重的字體或顏色。
黑白配色方案
黑白配色方案是今年最鮮明、最美麗的設計趨勢。沒有顏色，你可以在限制范圍內思考和設計。
大膽和實驗性的排版
在2022年，沒有錯誤的排版方式。大粗體字體——甚至襯線字體——無處不在。在玩這種網站設計趨勢時，請考慮字體將如何響應以及如何最大限度地對訪問者產生影響。
三維設計元素
雖然2020年和2021年有很多設計師網站處理完整的3D 設計，但新興趨勢是將3D元素與更扁平的整體美感結合起來。
具有3D風格的元素可能包括陰影、動畫或圖層效果，以創建深度和維度。
三維設計也延伸到視覺敘事。考慮如何以突出景深和陰影的方式捕捉您的故事或產品。
近乎野獸派
野蠻主義是人們想要加入的網站設計趨勢，但對于大多數項目來說，它過于苛刻和尖銳。
這些設計使用了許多相同的鮮明效果。不是單色字體，更容易看到襯線是常態。即使有一些明顯的邊界和線條，元素之間也有足夠的空間。沒有太多的裝飾或其他視覺效果，只留下顏色和文字來真正承載這些項目。
滾動文本元素
雖然總是希望文本元素可讀，但它們也可以是動態的。滾動文本元素——通常使用超大字體、幾個詞、在一個位置——可以增加對關鍵詞的強調并激發用戶的興趣。
輪廓字體是一種流行的選擇，保持可讀性的關鍵是使用簡短、常用的單詞或短語。
玻璃態
玻璃態的第一個展示于2020年末和2021年初的新態，并演變成現在流行的更完整的玻璃效應。
正是您可能想的那樣：設計元素的外觀讓人聯想到玻璃?？赡苡型该鞫?、冷淡或光澤的元素。
設計師們一直在Dirbbble上以一種主要方式使用這種風格，并找到了網站設計的方法。
更多漸變
漸變是不斷出現的設計趨勢。2021年，設計中的大部分漸變出現在背景中。
到 2022 年，漸變將采用兩種新形式：
1) 用于文本顏色填充（例如上面的示例）以提供最大的影響和強調
2) 作為用其他線條填充插圖或圖標以創建紋理深度效果
沒有圖像的主頁
無需圖像即可設計，您將在 2022 年緊跟潮流。
使用不同類型的用戶界面或設計技巧來充分利用沒有圖像的主頁。在此處的示例中，Kirifuda 使用了漂亮的黑白配色方案，在文本元素之間具有疊印效果。超大的排版和手寫風格的字體有助于將它們融合在一起。
分屏美學
分屏美學重新奏效。幾年前的趨勢當時出于可用性和響應的原因而起作用，現在它更像是一種新設計。
這些視覺效果可以包括水平或垂直分割的屏幕，每一切面有不同的功能。
交互式字體
在屏幕上與您一起移動的文本是交互式字體背后的支柱。在大多數情況下，這可以使用懸停狀態，盡管您可以嘗試一些其他更復雜的效果。
在考慮交互式文本元素時，請考慮可讀性和理解力。文本效果只有在其中的文字仍然可讀和可理解的情況下才有效。
包容性設計
設計師正在努力打造一個更具包容性的網絡，它幾乎在所有發布的內容中都有體現。從圖像到語言再到替代文本，沒有理由不嘗試讓您的項目更加包容所有人。
包容性延伸到種族、性別中立、文化、可及性和能力。共同的主題是您的網站應該以這樣的方式組合在一起，以便任何想要訪問內容的人都可以訪問內容，并且人們也可以在屏幕上看到他們可以與之相關的其他人。
結論
就網站設計趨勢而言，新的一年已經開始以非凡的方式爆發。如何將這些元素合并到現有項目中是作為設計師該考慮的問題。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
為什么設計師要有成本思維，以及成本思維在做我們做設計時對我們有什么幫助。
不僅僅在工作中我們需要思考成本，在生活中我們也無時無刻都在計算成本。成本總是和收益掛鉤，所以貝克爾在《人類行為的經濟學分析》中提到：人的任何行為都是理性選擇的結果，無利可圖的事人們事不會去做。雖然這句話不能覆蓋所有的人，但是大多數人就是如此。
在夜深人靜的夜晚你饑腸轆轆想吃夜宵，你可以選擇下樓到周邊小吃店就餐，也可以選擇叫外賣，前者付出的成本是你需要通過身體行動來交換最后的結果，后者則是花費一定的金錢來代替前者的行動。
那么我們通常會如何選擇呢？如果這兩種成本有很大的差異，比如需要到很遙遠的地方那么除了身體行動成本外，時間成本也會計算其中，所以相比后者成本陡然增大，于是我們就會選擇成本低收益大的方式。但是假如你現在極度想要吃那家的夜宵，外賣點餐會特別影響口感，那么你可能會選擇前者，這里由于外賣口感和主觀意愿影響到了我們理性的選擇?！?
成本決定了收益的效率、大小和方式，小到你伸手拿一支筆你會選擇最近的，大到我們人生的投資。成本與收益之間并非是直接關系，收益的大小的不取決于成本的大小，還有風險因素。例如我們在對UI界面進行優化，可以選擇的方式有很多：
1.只調整視覺，替換樣式
2.對頁面邏輯進行重構
3.整體功能進行重新分類組合
......
我們的目標是讓用戶獲得更好的體驗并且提升業務價值。3種方式需要的成本高低不同，我們都希望付出最小的成本達到最好的效果，于是我們就會考慮到風險因素，假如新流程用戶不會用怎么辦，假如新版本導致的數據下滑怎么辦，假如行業出了新政策了怎么辦等等。所以除了這些成本外也要考慮應對風險的成本。
你看為什么有錢人都會坐頭等艙是因為頭等艙可以幫他們節約更多的時間，提供更好的環境與服務，讓他們產出更多的價值。還有假如你的車壞了，你最直接的方法就是花錢找人幫你修而不是自學自修，因為你將花費太高的成本。
再舉一個例子，我們想提升能力，有的人選擇自學、白嫖，有的人選擇報培訓班，這也只是時間和金錢上的成本選擇，如果你的自學（白嫖）在短時間收益很大那就毫無疑問幫你省了一大筆錢，但是如果自學很久都毫無效果，那么時間就是你花費的成本，時間和金錢不同的是，時間不可逆?？雌饋砘ㄥX比花時間更好？不是，花錢也有風險，比如課程質量和服務很差，錢沒了還學不到，甚至賠上了時間。但如果你選對了，那么收益就遠遠會大于自學。
實現成本指的是想法與落地中間需要付出的行為、時間和其他損耗，例如我們希望提升用戶下單的轉化率，我們可以選擇：1.減少整個流程的步驟 2.將按鈕設計的更明顯 3.給用戶發放優惠券 4.給用戶營造搶購氛圍，在這幾個方案中最低成本是2，因為只需要調整樣式和簡單開發就可以實現，但收益并不是最高的，而其他的方案需要更多的角色花費更多的時間來參與，但是收益也不是顯而易見的。所以如果你的產品比較成熟，那么我們一定選擇成本更低的方案，反之我們會進行更高成本的嘗試。
還有比如我們找工作，新公司福利待遇比現在公司好50%，平臺也更大，是否不需要思考直接去呢？當然不是，你需要考慮通勤成本、生活成本、自身成長成本等等因素。如果你50%薪資漲幅換來的是996、每天通勤時間3、4個小時，不僅僅是時間精力，還有我們的身體健康的成本，我會覺得遠遠不值，成本太高。
我們先來看一下定義：機會成本是指面臨多方案抉擇時，被舍棄的選項中價值最高的就是本次決策的機會成本。舉個例子，比如當前版本我們有1個開發一個設計一個產品，我們面臨著兩個需求，但是資源和時間只夠我們做一個需求，這時候2選1，那個被拋棄的需求所擁有的價值就是我們所選擇的那個需求的機會成本，相當于我們放棄了那個需求所擁有的價值。
再通俗一點講，我現在有100萬，面臨著兩個選擇：1.銀行理財，年收益4%，4000. 2.做生意投資，年收益8%，8000，那么就相當于我花費了這4w的潛在成本獲得了8萬的收益。
邊際成本的理解很簡單，我們可以理解為我們每付出一定的成本收貨的收益或者每收獲1個單位的收益所付出的成本。用一個通俗一點的例子來講，比如你一共學習10天，第一天學完你考了30分，第二天學完你考了50分……第8天學完你考了94分，第9天學完你考了98分第10天學完你考了100分，花費的單位天數一樣但是每次增加的分數卻越來越少，收益也就越來越少。
在做產品設計的時候，我們往往會有一個板塊叫為你推薦，比如微信閱讀中的這個板塊，它一次提供了用戶6本書，雖然算法可以算出有許多書，但是這里每次只提供給用戶6本，是因為涉及到了邊際成本，少量多次提供能夠讓用戶更聚焦，更快的選擇好書本進行閱讀，每多提供幾本書，用戶選擇閱讀的時間成本就會越大。有同學會問：那我只給1本不就好了，用戶就能馬上讀了，何必要推薦6本？
我們如何保證那一本剛好是用戶想讀的，沒有辦法做到如此精準，如果每次只推薦一本書，而用戶嘗試了幾次都不喜歡，他們就會放棄，所以這里就會選擇一個臨界值，比如我們可以選擇每次放不同數量的書，根據數據判斷在給用戶幾本書的時候用戶閱讀轉化和選擇時間成本更低。
體驗成本也是我們設計師需要時刻關注的，俞軍老師在產品方法論中提到，用戶價值=新體驗-舊體驗-替換成本，體驗成本可以包含很多信息，最主要的就是認知與交互的成本。
如何降低認知成本可以從以下這些點進行優化
文案的設計要求是簡單易懂，避免產生歧義，之前給大家舉過的一個高德地圖導航在到達目的地之后給出一個“原路返回”按鈕的分析，大家可以再思考一下，是否會產生歧義。還有確定、確認大家是否知道怎么用呢？
文案也需要有情感化，避免生硬、帶負面情緒的問題等等
視覺最為直觀，一個按鈕一個控件的樣式是否能滿足用戶的心智和預期，將會影響用戶的認知，例如以下的幾個按鈕，出現在不同場景用戶會出現一系列問題：為什么我點了沒用？為什么還不能點？我到底該點哪里？
還有你的品牌是否識別度高，也決定了用戶對你的認知，最近小米花了百萬請大師做了新的logo，在視覺上更加圓潤，在圓logo的基礎上做了很多的微調，實際上也是避免了太大的logo變化導致品牌認知成本的提高，認知成本一旦太高，品牌市場的敏感度和曝光度還有各種替換、衍生、配套的隱性成本也會大大增加。所以這一舉動是明智的。
比如我們希望新用戶去關注一些大咖、kol獲得更好的推薦，但是如果我們只是將推薦者的頭像和昵稱給新用戶，那么這個策略就是失敗的。因為我們沒有考慮新用戶的認知：1.我為什么要關注她 2.關注她我能獲得什么。所以僅僅依靠頭像和名字在這里對用戶的認知是沒有任何幫助的。
我們通過利用肢體來和媒介進行交互，目的是完成某項任務。其實只需要你抬手，那么就是產生了成本，只不過某些成本是固定的無法減少的，比如你要去騎車那就需要去解鎖，如果沒有鎖車可能就會被偷走，這是出于安全考慮。
行為成本在具體數字產品中我們可以發現很多，例如你只需要將手機拿起，屏幕就會亮，相比于找到解鎖鍵再按一下成本就低了很多。而亮屏后不直接解鎖是為了防止誤觸或者隱私，所以還需要通過指紋或者人臉進行識別。
例如幾種不同的驗證方式，利用滑動拼圖來解鎖和輸入相關驗證碼解鎖，前者比后者的學習成本和操作成本都低。
在移動端我總結了幾個減少交互成本的方法，不妨來看下：
soul音頻處理
日期選擇
iPhone底部橫條切換窗口
游戲昵稱隨機
股票買入數量
這里也有同學會問，既然都可以代替，那滑動能否代替輸入？必須也是可以的，例如iOS自帶的計時器中選擇時間的控制器，還有鬧鐘設置，這里要注意的是，滑動代替輸入是要基于本身該信息是由范圍內并且不需要精細化控制的，比如房價篩選，房價本身量級很大，用戶篩選也不會精確到個位數，在這里用點擊和輸入會比滑動的成本更低。
反例就是音量、明暗控制，大家可以感受一下輸入在這里的雞肋。你需要精確控制選輸入，需要大致的范圍選點擊，非常模糊的感受選擇滑動。
例如我們在開車進行導航的時候，打字輸入非常不便，于是加入了語音輸入。還有在微信進行賬號切換時，我們可以選擇利用語音輸入數字來驗證身份。
對于新用戶操作復雜功能和界面的時候，提供更多提示能夠很大程度上減少用戶的操作成本。
在iOS或者安卓的手勢控制中，我們會發現又一些常用的手勢比如：點擊、拖動、輕掃、雙擊、縮放，這里我們可以定義為一級手勢。還有一些不常用的比如：重按、長按、三指滑動、三指縮放等，這些手勢的認知成本和行為成本都很高，定義為二級手勢，不建議頻繁使用。
設計師在日常工作中接到的需求繁多，無論是在做需求之前還是在思考設計方案的時候，成本思維可以幫助我們很好的規避一些問題和風險，我們追求控制成本使收益最大化。所以學會控制成本的設計師不僅僅題可以提高個人工作效率還可以幫助公司創造更多價值。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
先看目錄，大家按需取用，當然更建議全文閱讀（全文7756字，建議閱讀20分鐘）
大部分設計師應該都遇到過這種場景：在做設計前并沒有考慮到加載，但在進行還原度走查或者驗收的時候才發現，由于某些頁面數據請求較慢，導致在頁面中會出現空屏狀態。這時才想起需要在這些頁面添加動畫來承載頁面的過渡。
歸根結底是因為設計師在設計過程中，更多關注頁面本身，而很少去思考頁面在呈現過程中何時會出現白屏狀態，都是后知后覺去補充完善。加載作為必備的一環，卻總是被忽略。目前很多B端產品在這方面都沒有一個系統合理的規劃，導致系統的加載體驗缺失或者不統一。
因此希望這篇文章能夠講清楚中后臺加載出現的場景和規則，對需要深入了解加載以及在制定加載規則的設計師朋友們帶來一些幫助。
加載通俗來講就是用戶從觸發頁面操作，到頁面最終呈現的一個等待過程。這個過程始終存在不可避免，只是時間有快有慢?？斓募虞d只需要幾百毫秒就結束，但慢的加載就可能會達到幾秒甚至十幾秒，讓人產生焦慮。
而為什么會有如此大的差距，這就需要從頁面渲染的整體過程來進行說明。當我們從瀏覽器輸入網址，再到我們看到完整頁面的這個過程，網頁到底經過了哪些步驟呢。經過資料查詢和與前端確認，整體過程可以闡述如下：
從這里我們可以看到頁面的呈現是程序經過了一系列操作才最終呈現到我們面前的。在這里可以將其簡化為四個階段：用戶操作功能→頁面向服務器發送請求→服務器接受并返回數據→頁面呈現。
而決定整個頁面加載快慢的就在于請求與數據這里。一般我們可以將頁面的數據分為2種類型：靜態資源和動態資源。
靜態資源：前端的固定頁面，這里面包含HTML、CSS、JS、圖片等等，不需要查數據庫也不需要程序處理，直接就能夠顯示的頁面。可以簡單理解為你頁面上的固定字段和結構。這種頁面一般加載速度比較快，比如我們看到的展示型官網一般都是前端寫好的靜態資源。
動態資源：而對于頁面上的動態變化的，需要程序處理或者從數據庫中讀數據，能根據不同的條件在頁面顯示不同的數據，比如表格數據、統計數據等稱為動態資源，這種都需要調用后臺接口來進行返回，因此加載速度相比于靜態資源就會更慢。
而它們的區分點用下圖可以表示：
可以看到靜態資源基本是直接返回，而動態資源還需要連接數據庫調取資源，尤其是在遇到數據庫調取較慢時就會花費更多時間。而我們加載緩慢的大多數問題，也基本上更多出現在動態資源的獲取上。
當我們清楚加載形成的原因，接下來要做的就是在需要加載的地方對其進行處理。這也是在設計過程中我們經常遺漏的地方。我們先看一下目前常見的2種處理方式：「默認處理」和「使用進度指示器」
當我們對加載過程不進行任何處理時，程序就會以默認的方式進行-即根據資源獲取速度一步步呈現?？梢钥吹胶俚旰笈_的處理過程就是一種默認處理方式：
但是這種做法就會導致我們在頁面加載過程中會出現空屏狀態，比如上圖切換到概覽時出現了空屏狀態，尤其是當遇到了網絡緩慢的情況，會造成在加載時頁面停留在當前狀態下不動，往往會讓用戶陷入到「系統故障」的錯覺。
這個名詞說起來可能比較陌生，它指代的就是我們平時經?？吹降募虞d動畫、骨架屏或者進度條等。進度指示器的作用就是告知用戶當前頁面并沒有故障，而是正在讀取數據。
通過添加進度指示器來對空屏狀態進行承載，能夠減輕用戶的焦慮感。目前很多B端產品更通用的形式是添加動畫來過渡。
但是在體驗過程中很容易發現一個問題，就是在產品的整體加載過程中，某些空屏狀態是沒被加載動畫覆蓋到的。當這些沒被覆蓋到的加載過程過長時，很容易出現焦慮感。比如神策數據在左側列表切換時的加載過程就沒被覆蓋：
想要更全面的把加載動畫覆蓋到所有頁面，我們就需要弄清頁面在哪些狀態下會出現空屏狀態，從而制定統一的加載動畫規則。這個問題可以先思考一下，后面解答。
在制定統一加載規則之前，我們需要明確一個概念，就是加載的模態與非模態。
模態加載的含義就是當前加載會中斷用戶其余操作，用戶在這個期間只能等待加載而不能進行其他操作（有的模態會提供取消按鈕）。如果你的頁面涉及到以下2種情況，可以考慮使用：
1.用戶當前的操作本身不能與其他操作同時進行。比如系統更新，或者工具類的導入導出相關操作，我們只能等待更新、導出完成才能繼續進行后續的操作。這時候可以使用模態加載來承載，比如protopie的導入操作；
2.當用戶進入到一個全新的頁面時，這個時候頁面什么都沒有，我們只能等待頁面加載完成才能進行后續的操作，因此在這種情況下也可以采用模態加載，比如我們剛進入Asanan產品頁面看到的首屏加載動畫：
除了上述2種情況外，你也可以根據你的業務場景來進行模態加載的選擇，但建議是盡量少用模態加載，其會對用戶的打斷和干擾性比較強。
非模態加載的話，這種加載通常只會出現在需要加載的部分，不會中斷用戶其他操作。對用戶干擾比較小。比如我們常見的功能切換加載、數據篩選加載等都屬于非模態加載。
非模態加載相比于模態加載會更輕量，因為用戶隨時都可以打斷也不會影響到其他操作。因此建議在大部分情況下都可以使用非模態彈窗來進行承載，比如飛書的左側欄切換操作：
接下來我們進入正題，在這里我從加載的角度將網頁整體加載過程分為呈現加載規則和操作加載規則。
我們先談頁面呈現規則。前面已經明確加載產生的原因和類型后，我們就可以開始為我們的產品制定統一的加載規則，以保證后續頁面加載的一致性。
在拆解頁面的加載過程前，我們進一步闡述之前提到的渲染原則，從前文中提到最后會經過「解碼」和「渲染」2個步驟，這也是決定了我們看到的頁面的最終呈現順序：
我們看到的頁面是由HTML、CSS和JavaScript來進行構成的。HTML可以看作最簡單的框架、CSS則是賦予了框架樣式，JavaScript則是負責頁面中的交互(當然JS也可以控制樣式，這里只描述主要功能)。
頁面在「解碼」階段，拿到的HTML文檔會被解碼為DOM樹，同時將CSS文件解析成CSSOM，這兩者結合后一起渲染頁面，JS一般是在最后渲染。所以邏輯上就是框架和樣式一起渲染，最后渲染交互。視覺的角度來講就是先看到元素樣式，然后才能進行對應操作。
由于瀏覽器渲染順序一般會根據代碼的順序進行渲染，而代碼在頁面中的構建一般也是按照頁面的上下和左右的順序去寫的，因此我們看到的頁面的視覺呈現順序也是遵循從上到下，從左到右。
所以幾乎所有的產品都是先看到頂欄，然后左側邊欄，然后其他內容。因此我們可以通過這個原則來拆解對應的頁面，我們按照頁面常規結構可以將其分為三個加載部分：頂欄、左側導航欄、內容區域。而其加載順序如圖所示：
當知道對應頁面的渲染順序后，我們就能夠清楚在頁面渲染的過程中哪些地方會出現空屏了。因此將頁面加載過程拆解為如下順序：
我們的加載動畫需要承載的就是上述這些白屏的地方，從而將加載細化為三種場景的拆分：全局加載+局部加載+內部加載。如圖所示：
通過這三種加載就可以涵蓋頁面所涉及到的所有部分。接下來詳細闡述一下這三種類型的定義和用法。
如上圖所示，全局加載的目的是為了覆蓋用戶從輸入網址到頁面的資源渲染的這個中間過程的空屏狀態而存在的。而這種狀態會涉及三種場景：
1.通過網址進入到一個新的頁面時；
2.通過鼠標右鍵或網頁刷新按鈕對該頁面刷新時；
3.通過頁面操作需要新開頁面時。
該全局加載的動畫構成為：
1：覆蓋整個頁面的加載，由純白色+加載動畫構成；
2：加載類型為模態加載，因為用戶在這種頁面狀態下并不能進行其它操作。
但在這里我們需要注意全局加載的開始和結束時間：
開始時間：當進入頁面時立即呈現加載動畫；
結束時間：當頁面加載出頂欄的時候，此時停止加載。
為何要這么處理結束時間，原因其實圖中已經給出了。這里再解釋一下原則：只要有頁面資源返回，我們的全局加載動畫就會結束，隨后啟用局部加載來承接后續的狀態，避免用戶在當前狀態長時間等待。而頂欄在一般情況下都是最先加載出來的，所以以頂欄出現作為結束全局加載的標準。當然如果你的結構沒有頂欄，可以以左側欄來作為結束標準。
局部加載是用在頁面整體框架加載的過程中，承接在全局加載后。局部加載的使用場景可以概括如下：
1.頂欄加載結束后，用在剩余框架的加載效果（具體體現為左側邊欄和右側內容區域）；
2.對于涉及到局部頁面的切換操作都會進行局部加載（比如左側邊欄的切換）；
光看文字可能不是特別清晰，在這里可以舉一個動態的例子來幫助理解：
上述展示的是在頁面呈現的時候一個完整的局部加載。在這里需要注意的是我們首次渲染和第二次渲染在加載動畫上是可以有區分的，可以通過程序控制讓這種加載動畫只在初次加載時出現。
第一次加載時出現是因為我們需要有加載動畫來承接框架首次加載的空屏時間：
但第二次的時候由于有緩存（緩存會加載我們的靜態資源，能夠讓我們的頁面框架在第二次時更快顯示），這樣在讀取框架時基本不需要加載，我們就可以通過程序來直接去掉其中的局部加載動畫，直接顯示框架來進行呈現。
目前在飛書和釘釘等B端產品后臺均采用了這種處理方式?？梢钥吹綀D中我在第一次切換到角色管理時是有碰撞小球的局部動畫存在的，而第二次再次進入時則直接出現框架。這樣既能夠保證加載動畫能夠覆蓋所有的空屏狀態，又避免了局部加載動畫的頻繁出現。
內部加載是用在頁面內部不同模塊數據間的加載。當框架都已經加載結束，但某些數據由于接口比較慢，此時還沒有返回，這時我們就可以用內部加載來進行承載。這應該是我們更常見的加載情況：
在進行內部加載的時候，需要注意，內部加載的時候一般標題是存在的，因為標題基本都是固定的，所以能夠很快被拉取。比如Zoho的內部加載，加載時標題已經出現了：
通過這三種類型的加載，能夠覆蓋從用戶輸入網址，到頁面渲染完成這個頁面呈現過程中的全部加載場景。
說完頁面的呈現規則，再談頁面操作加載規則。頁面的操作其實對應的是頁面控件的反饋。而我們的常用的控件比如有按鈕、tab切換等。我們不僅需要考慮控件本身的加載狀態，而且需要考慮到控件影響的其他頁面范圍。
控件的加載并不是隨時都需要，我們要根據實際的數據量大小及業務場景來選擇性使用。目前我們需要考慮的控件及其加載狀態主要有如下：
比如圖中的按鈕的加載狀態是必備的，在很多場景下都會用到。但是下拉列表和級聯列表，在一般的場景下都不太需要進行加載，當遇到列表中的數據特別多或者調取特別慢時就可以考慮為其加上加載狀態。
這種控件比如日期篩選、表格篩選或者保存等操作，當你切換篩選條件后所有與其相關的頁面元素都會發生變化。在這種情況下我們需要考慮到被影響元素的狀態。目前的設計實現上有兩種做法：
1.被影響元素不可被操作，且該區域有遮罩+加載動畫來覆蓋；
2.被影響元素可進行操作，無任何動畫，但操作并不會影響之前提交的結果；
這兩種方案一種是利用遮罩防止用戶無效操作，另一種則是保持了足夠的操作自由性。個人在這里更傾向于處理方式1，我認為被影響的元素是需要有遮罩+動畫的，來避免用戶在加載期間對其進行無效操作，比如示例中方案2后面修改的名稱是沒有被系統保存的。
需要注意的是如果在產品中使用方案1，我們的遮罩區域只需要覆蓋被影響的元素就可以了（保存這種可以將按鈕一起覆蓋），比如通過篩選導致圖表數據發生變化，這時只需覆蓋圖表區域，而不用覆蓋篩選區域。這樣的好處是當某些篩選數據出現加載過慢問題時，用戶可以通過切換篩選項來打斷當前加載。
上述描述的操作都是針對于當前頁加載。當控件導致頁面刷新或者跳轉時，則整體遵照頁面呈現的規則進行加載。
上面闡述的加載已經完全能夠覆蓋我們頁面整體的加載，但是還是需要提及一下骨架屏和進度條這兩種加載形式。
先說骨架屏。實際上骨架屏的使用效果體驗是優于加載動畫的體驗的（骨架屏的加入使用會讓用戶感覺網頁出現的更快）。那么為什么在大部分的B端業務頁面中沒被用到呢，主要有2點原因：
1.每種骨架屏都需要進行對應的定制開發，需要與加載后的頁面框架保持一致，這會增加了開發成本。
2.中后臺的業務界面對來說固定結構的頁面會較少，這對于骨架屏的使用機會就相對較少。
個人認為在前期可以以統一加載體驗為主，在后期業務相對成熟后，可以針對固定結構，通過骨架屏的使用優化加載體驗。
再說進度條。我理解的進度條的使用條件：對于加載時間較長的規定場景可以考慮用進度條來承載，比如我們常見的游戲加載中進度條就用得比較多，因為游戲一般資源比較大。還比如figma在進入設計文件的過程中也采用了進度條加載也是因為設計文件可能會很大。
進度條在特定場景下能夠緩解用戶焦慮，讓用戶知道進展。但進度條在多數情況下都抓取不到程序的真實進度，這也會導致有時候我們看著加載到99%，那最后的1%遲遲加載不出來的的原因。目前很多中后臺產品對于進度條加載使用相對較少的原因，很大程度是沒有那種加載特別長的場景。
因此這兩種加載場景的使用會更加定制化，如果需要使用請根據具體的業務場景來進行選擇。
如果把加載動畫等比作頁面加載的外在，那么緩存和加載策略則是頁面加載的內核，合理使用緩存和加載策略可以從根本上提升我們頁面的加載速度，讓用戶更快速地看到頁面。
大家肯定聽過緩存這個概念，前后端都可以使用緩存。緩存就是數據交換的緩沖區（稱作Cache），是存貯數據（使用頻繁的數據）的臨時地方。在這里主要講一下瀏覽器緩存：
從這張圖可以看出，服務器在請求數據時，會進行緩存的判斷，如果有緩存則首先讀取緩存，如果沒有則從服務器中拿取。調取緩存會在很大程度上提升頁面的加載速度，縮短了從服務獲取數據的時間。通常瀏覽器會主動對頁面的靜態資源進行對應的緩存，這也就解釋了我們第二次進入頁面會比初次進入頁面時加載快的原因。
但程序其實也可以對動態資源（也就是需要從數據庫等拿到的資源）進行緩存的，并且可以設置緩存的過期時間（比如設置過期時間為1小時，那么1小時過后就會重新拉取新資源）。對于某些動態資源拉取過慢并且更新頻率不高的我們可以采用動態資源緩存的策略，從而提升整體的頁面加載體驗。
現階段我們常用的主要有下列6種加載策略：
加載策略的本質就是通過對應的加載設置來縮短產品與服務器交換數據的時間，接下來我們詳細看一下每種加載策略的具體使用策略：
懶加載是當內容落入視窗被用戶看到時，才會進行加載。這種比較節省資源和減輕服務器壓力。對于當前頁面內容很多的可以采用這種加載策略。而這種加載策略的設計，能夠讓用戶更快看到當前屏幕內的內容，減少等待時間。
比如蘋果官網的加載策略就采取了這樣的一種方式。我們可以看到右側的資源只有在我們向下滾動出現在屏幕中時才會進行對應的加載，這樣能夠保證用戶在進入網頁第一時間看到首屏內容，并且用戶幾乎感知不到這種加載延遲。
預加載是在頁面空閑的時候就把用戶即將用到的資源加載完存到緩存中，等用戶需要使用時，通過緩存直接調用呈現。比如用戶在看A頁面的時候，就可以通過預加載來準備用戶需要的B頁面資源。當用戶需要B頁面的時候，立刻就可以呈現。
比如某些頁面在實際中加載比較慢，這個時候就可以考慮是否用預加載的策略來提升網頁整體加載速度。比如知乎的視頻和文字在都進行了對應的預加載。即使當你處于斷網狀態（圖中我將頁面網絡切換為斷開狀態），可以看到依舊可以點擊全文進行查看和視頻的部分預覽。
當頁面中有文字和圖片時，優先加載占用網絡資源小的，比如文字資源，然后再進行占用資源較大的加載，比如圖片資源。通過分步加載也能有效減少頁面等待時間。比如大眾點評等圖片很多的網站往往會采用這種加載策略。
分頁加載是我們目前很常見的方式，比如我們常用的百度和谷歌等搜索引擎都是使用的分頁加載，分頁適用于數據量比較大的內容，比如表格數據或者大數據搜索場景可以使用。
分頁加載可以理解為當前獲取到100條數據，但是將100條數據分別拆成5頁每頁20條數據提供給用戶，這樣也可以讓用戶減少等待時間：
在目前還有一種滾動分頁的加載，就是不提供視覺上的分頁，而是當用戶進行滾動時，自動加載一定數量的內容，這樣從用戶的視角看就是一個連續不間斷的數據展示。比如一些資訊類的網站就是采用的這種加載策略，有的也把這種滾動分頁的方式稱為自動加載。
這里講的延遲加載更多的是一種防護加載機制，一般延遲設置的時間為300ms。這里的延遲加載有2種使用，第一種多用于搜索，通過延遲加載能夠讓用戶更好進行連續輸入，避免搜索結果被高頻率刷新，同時緩解服務器壓力。如下圖，可以看到我在輸入1后會有個延遲才出現加載列表，并且我在連續輸入12306的過程中是沒有對結果進行更新的，當我輸入完后才更新。
第二種則是通過延遲加載可以更好防止反復操作。當用戶在同一組件上面進行切換時，如果該操作小于300ms,則只記錄最后的點擊操作。這種情況可以用在我們的表格翻頁和開關等狀態上，防止用戶瘋狂點擊導致數據反復請求和屏幕閃爍的情況。我們可以通過下面這個組件演示例子來進行對應的感知：
延遲加載更多用于上述2種場景，對于其他情況的加載，直接加上就可以了，并不需要刻意設置延遲。
這里想要表達的含義是當用戶在操作后，客戶端立即反饋操作成功，然后把請求放到后臺與服務器交互，這一過程用戶不需要了解，不需要等待。無論在什么網絡環境下你基本上都能操作成功。比如微信的朋友圈發布就是這樣的操作，即使你在斷網的情況下都能夠立刻發布，但實際上這個時候并沒有發送成功，還需要上傳到服務器后才你的朋友們才能看見。
這樣的好處是用戶使用起來非常流暢，但是壞處就是，當操作不成功時，用戶并不能及時進行感知，仍然以為操作已經成功了。所以這種場景我們也需要根據場景進行對應的判斷和選擇。對于復雜的B端場景個人建議慎用或者不用這種操作，畢竟很多發布的功能會同時影響很多業務線。
這里就拿微信的朋友圈發布來進行舉例，下方手機狀態都為斷網狀態，可以看到微信立即發布，而貼吧在這種狀態下提示網絡錯誤。
通過這些加載策略的選擇性使用，能夠在特定環境下提升我們系統的整體使用體驗。因此我們需要對這些加載策略有一個比較全面的認識，這樣我們不僅知道加載慢的原因，還可以利用加載策略去提升頁面性能。
在整體的加載過程中，別忘了考慮加載異常的情況。在通常情況下我們會我們會遇到網絡速度過慢或者突然斷網這兩種狀況讓頁面一直加載不出來，這時我們需要考慮對長時間的加載過程進行處理。
通常做法是我們要對加載狀態有一個最長時間的限制，一般為加載不超過10s，超過最長時間后就進行異常狀態顯示（提示語+刷新按鈕）。這樣用戶可以選擇重新加載或者離開此頁面，而不是一直等待。
在這里還想到一點，就是對于編輯頁面，我們應當加入網絡連接是否異常的判斷，比如當進入到編輯頁面后，如果遇到網絡斷開，需要在頁面的頂部加上常駐提示條【當前網絡連接斷開】，這樣用戶能夠及時進行察覺并修復。避免在無網環境下繼續輸入。這對于某些需要輸入很多內容且并不提供本地保存的頁面來講是非常有必要的。
加載在設計中是非常容易被忽略的模塊，因為在大部分情況下網絡速度都較快，人們很難深刻地感受到加載過程。但加載卻在產品運行中起著不可或缺的作用。通過這篇文章想要告訴大家的有幾個點：
1.我們需要明白加載為什么會出現，這個過程是怎么樣的；
2.加載的通用處理手段是怎么樣的，非通用處理方式有哪些；
3.通過緩存和對應加載策略能夠讓頁面加載速度有本質上的提升。
這樣當我們在頁面上遇到加載速度慢的問題時，在為其加上動畫承載過渡的同時，還應該思考其加載緩慢背后的原因，是因為數據量太大還是加載策略的相關問題，是否可以將其進行懶加載或者分步加載，這時我應該去找前端或者后端如何溝通。從源頭上解決加載時間長的問題，才是后續產品設計過程中的長久思路。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
提及“設計的溫度”，不得不提我們老生常談的“情感化設計”，提出這一概念的美國認知心理學家唐納德·諾曼將設計拆解為三個層次：本能層、行為層、反思層，層層遞進。
1/ 本能層的設計，是視覺的直接反饋，是指用戶第一眼看到的、感覺到的東西是否會激發用戶興趣；
2/ 行為層的設計，注重的是效用，產品功能是否好用，易用，用戶使用產品過程中能否高效解決問題；
3/ 反思層的設計，是情感化設計的最高層次，指用戶使用產品后，是否建立情感連接和記憶反饋。
因而，它們是從美學訴求到效率訴求再到情感訴求的一個進階關系。
如果一款產品在滿足基本功能，對于用戶有用，同時好看并且易用，使用完之后還能產生愉悅以及滿足感的話，那么這將是一款好的情感化設計產品，那必然是一個有“溫度”的設計。
如果一個項目本身充滿社會使命和責任感，那么“有溫度的設計”將可以助推項目的落地鏈條，讓使用平臺的用戶有“溫度”，更讓項目背后的人員感受到“溫度”。
因為，接下來陳述的項目是一個很有“溫度”的項目——用互聯網工具去溫熱社會中的窮苦灰暗，用互聯網思維去幫扶社會的鄉村孤寡老人和留守兒童，用有溫度的設計去踐行有溫度的項目。
隨著我國社會經濟的快速發展，農村青壯年勞動力轉入城市，人口老齡化趨勢加劇和家庭結構的演變，“空心村”越來越多，因此在鄉村出現大量的“留守兒童”和“孤寡老人”。據統計，在農村獨居和空巢老人超過3000萬人，留守兒童也達到了近2000萬人
孤寡老人因為獨居生活、物質困難、缺乏照料面臨著易患疾病、精神壓抑等很多問題；而留守兒童因為缺少父母監管和陪伴，極易產生很多身體及心理問題，這兩大群體是我國人群結構的重大組成部分，一個是未來的花朵和希望，一個是曾經發過光熱的遲暮老人，他們需要關愛和守護，需要有一座“有溫度”的橋梁，為留守兒童撐起藍天、健康成長；為孤寡老人送達溫暖、安享晚年。
基于社會現狀，踐行社會責任，騰訊為村平臺聯合中國社會福利基金會、騰訊公益慈善基金會，預想搭建一個線上與線下結合的平臺，成立“為村暖心小站”，立足于脫貧地區的農村社區，主要服務農村的一老一小以及其他需要幫助的困難群體，解決日間照料、健康護理及心理關懷等諸多問題。
“暖心小站”的整個幫扶路徑是以線上+線下相結合的模式，依據產品需求，在線上可以招募志愿者、發布救助需求、觸達愛心人群；在線下建設實體服務站，開展具體的幫扶活動。從而形成一個從線上到線下的一個完整幫扶閉環。
那在線上的呈現形態上，主要考慮APP和小程序兩種方式，經過對比分析，APP穩定性高、體驗好，但是在鄉村的受眾群體內，互聯網基礎還是很薄弱的，要讓村民朋友下載和適應一個新APP是一個難度非常大的事。而微信在鄉村的覆蓋面非常廣，占有率很高，那么依托于微信的生態、建立小程序，在推廣層面會更加便捷和高效。同時，暖心小站本身結構簡單，是一個非常輕量化的應用，這種特性也更適合以小程序為載體。
在線上的產品框架上，設立兩大專區：關愛老人專區和呵護小孩專區，各自創建知識宣導、在線課堂、愛心募捐等版塊內容，同時在線上召集志愿者，在線下成立社區服務站，開展幫扶活動，然后志愿者們在線下實地服務打卡同步展示在線上的暖心小站。
確定框架之后，梳理角色和場景。本項目主要包含線下服務站的站長，工作人員，志愿者以及社會的愛心人士。
站長、工作人員、志愿者主要是通過線上為村暖心小站這個平臺發布活動信息、記錄服務概況、展示志愿者風采，社會的愛心人士通過線上平臺查看對應信息并參與對應活動，最終幫助農村的一老一小解決各種幫扶問題。
經過梳理分析，平臺使用人群的年齡跨度較大，30歲到60歲這個群體占到了80%左右，所以在產品的呈現形式上將兼顧青年到老年的年齡跨度，讓設計更友好，讓產品有溫度。
基于前面分析，在農村現實環境中的孤寡老人和留守兒童，他們生活是灰暗的，情感是封閉的，他們需要有更多志愿者以及愛心人士給他們帶去陽光和溫暖，讓孤寡老人可以健康生活，讓留守兒童可以健康成長。
所以在設計目標的確定上：讓產品形成一個“有溫度、有故事、可以連接情感的橋梁”。讓貧苦生活滲透陽光、感受溫暖、看到希望。
品牌色的推導，是站在線下的實際場景感受來提煉，鄉村的孤寡老人和留守兒童的生活是貧苦的、灰暗的，他們需要金燦燦的陽光給生活帶來希望，而我們日常所的見的公益組織通常都是以紅色系為主，似乎已經形成了作為公益組織的標識色，因為這種大紅色傳遞愛心、帶來溫暖。
這些顏色都很有代表性，黃色代表陽光，紅色代表公益，而暖心小站，將這兩種顏色進行疊加融合，形成陽光橙，再以陽光黃納入輔助色，形成溫暖、友愛、活力、陽光的色彩體系。
在設計原則上，考慮到我們的用戶群體年齡跨度比較大，一些年長用戶互聯網基礎薄弱，為了讓產品更有親和力，讓年長用戶都能輕松上手，所以在策略上制定簡單、易用、溫暖的設計原則，保持框架簡單清晰、交互簡單易用，讓產品有溫度，讓用戶覺得有用、好用、還想用。
在“簡單”方面，保持產品的頁面框架要簡單，結構要清晰，讓用戶清楚知道自己在哪里，所以在產品形態上只做了內容頁的垂直展示，沒有過多瑣碎的信息入口，讓頁面信息更集中，瀏覽體驗更聚焦，讓年長用戶也可以簡單使用。
在“易用”方面，簡單的框架和結構是易用的基礎，在視覺元素的排列上，通過加大的圖片、加大的間距、加大的圓角，通透的頁面布局可以讓內容陳列更集中，獲取信息更高效。頁面的間距以4px為基數，分為5個跨度，在統一性的基礎上讓界面更有節奏感，層級更清晰，從而提高產品的易用性。
在“溫暖”方面，主要體現在在調性、元素、和內容上：
調性：以“溫暖橙”+“陽光黃”為品牌色系貫穿始終，形成溫暖、陽光的整體基調；
元素：在常規尺度上進行適當加大，加大的字體，加大的卡片占符，加大的點擊區域，讓產品更照顧年長用戶的操作習慣，讓產品更有溫度；
內容：在內容及主圖的運營展示上，突出“溫暖”的調性，增強用戶的共鳴，拉近用戶與產品之間的距離。
整體以大面積的“溫暖橙”為基調進行鋪設，營造溫暖陽光的質感，頂部展示產品名稱和合作logo，增加產品的權威性和信賴度。
自上而下，控制大的間距和留白，分別設置了熱門小站、一老一小專區、志愿者風采、活動回顧、學習園地等版塊。全方面展示了小站的基礎信息、輸送了對孤寡老人和留守兒童的健康資訊、匯集了志愿者服務的風采、記錄了幫扶活動的結果反饋、以及陳列了關愛老人和小孩的相關線上課程。
一老一小的入口及詳情：通過大頭圖的形式加強專題感知，引導用戶點擊。詳情內展示相關的關愛資訊和助力入口，讓用戶可以選擇性的進行點對點幫扶。
小站詳情：分為小站介紹、人員風采、小站活動、和運營概況四個部分，清晰展示線下暖心小站的各項事務，讓線上用戶對線下小站有更全面的了解。
個人中心：功能簡單，布局簡潔，根據不同身份類型展示不同入口。作為站長的話，擁有志愿者審核、活動管理的權限，整體表現形式以統一的卡片式陳列，讓內容更聚焦。
秉持“簡單、易用、溫暖”的設計原則，盡可能地讓產品陳列簡單、操作流程易用、設計滿足功能凸顯溫暖，讓用戶想用，讓產品好用。
經過多次推導與線下團隊配合，小站1.0在今年5月初上線，第一批試點小站正在使用中，得到了較多正向良好的反饋，為鄉村的一老一小帶去了許多暖心的幫扶行動。
產品上線之后，通過在線上發布活動信息召集志愿者。在線上順利舉行了多場暖心活動，比如在重慶馬蜂社區的服務站內為當地留守兒童舉辦了多項課業輔導的活動，在重慶周家寨服務站新建了日間照料室，提升老人的居住生活質量。
今年5月20號，在中國互聯網公益峰會上，為村暖心小站進行線上交流展示，獲得了很多與會代表的關注和認可。
截止2021年7月，平臺上線了兩個試點小站，共舉辦了數10次線上+線下結合的活動，活動參與了520人，受到36000人以上的關注。暖心小站的建立和運營，對鄉村的“一老一小”提供了更加有針對性和個性化的服務，同時加強對當地社會組織的培育和孵化，提升了服務對象的生活質量，促進和諧社區建設，助力鄉村振興。
通過這些試點小站的成果和反饋，讓設計目標也得到一定程度的印證，讓產品體現了“有溫度、有故事、可以連接情感”的橋梁。
隨著互聯網的發展，人們對于產品不再是簡單的形式服從功能，而是逐步轉向形式服從情感。讓設計回歸情感，讓有溫度的設計去創造有溫度的產品，可以增進人與產品之間的情感連接，讓產品更有生命力。再者，用有“溫度”的設計思維，去捕捉和解決社會問題，通過具有社會責任感的設計，推動社會進步，形成堅實有用的“設計力”。
那么，如何提升自己的設計力呢？可以概述三個保持一個向善。
設計需要堅持，而堅持源于熱愛，保持熱忱之心會發現許多美好的事物，同一個需求會自發性地探索很多不同的解決方案，因此會洞察需求背后最本質的東西，切入要點尋找最優解。
還有一句話：“設計路上，唯有熱愛，方能抵御歲月漫長”。
這里的“敏感”指的是設計師要有好奇心，善于發現新事物，善于追蹤最新行業動態，是一種職業敏感，是一種自覺行為，表現為熱情、興奮、敏銳，對新事物充滿熱情，對于新發現充滿興奮，能夠特別敏銳的捕捉社會痛點解決設計難題。
生活中常說，有共情的人往往都特別感性、多愁善感，淚點低笑點也低，因為特別有代入感，而且對事物特別專注。
設計上所說的共情力則需要保持感性，同時也需要理性加持，不偏不倚。讓設計師自己能切換到項目內的各種角色，不把自己當成局外人，將自己融于產品本身，隨時切換為不同用戶的視角，更能深入地發現、分析和解決問題，讓設計站得住腳、更接地氣，讓設計有依有據。
設計的最終目的是傳遞需求、解決問題，這就意味著設計的初衷不同，那么最終的導向也會截然不同。
設計向善，保持“善”的初心，主張設計回歸社會、回歸到人心最本質的出發點，做有溫度的設計、有仁心的設計、可持續的設計。
關注社會問題，保持一顆敏感而善良的心，用“設計向善”解決社會痛點，堅實鞏固自己的設計力。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
關于樹形選擇，我們必須先知道它的基礎概念，“樹” 究竟是什么？我們先來看看樹狀結構的定義
樹狀結構其實是作為一種層次結構化的表達方式，它能夠將樹的抽象出來表達完整的構造關系，為什么叫做樹，是因為它更像是一個上下顛倒的樹，根部在最頂端，枝葉反而變為下方。
同樣在對樹狀結構的整體命名上，也遵循了與之類似的表達方式：
節點（Node）：是樹狀結構當中的基本單位，使用節點可以表示 不同數據間的 組成關系（從屬關系與并列關系）通常節點會分為幾類特殊情況。
1.根節點：整個樹狀結構的開端被稱為根節點。一個樹狀結構一定只有一個根，在思維導圖中，根節點就代表著它的開端，用于延展出更多的樹狀結構。不過在目前的樹形選擇當中，因為對易用性的要求，通常會隱藏根節點，只展示子節點。而根節點隱藏在 標題、選項文本 當中。
2.子節點：根節點之外的節點被稱為子節點。一個樹狀結構子節點數量是沒有具體限制，在樹形選擇當中是直接展示出來的部分。
3.葉節點：沒有連接到其他子節點的節點。葉節點屬于一類特殊的子節點，它是整個樹狀結構的最末端節點，在樹形選擇當中是一個重要的概念，下面會展開來講。
分支（Branch）：節點之間的鏈接，在我們樹形選擇當中，分支的線條可以選擇顯隱。其搭配的使用方式也有所不同
同時我們還會用到節點的幾個基礎的概念：
節點層級：指當前節點所在的層級，比如根節點為第一層級，根的子節點為第二層級，以此類推；
節點高度：對于某一節點的高度，便是該節點下所有葉節點從上到下的個數；
節點深度：指該節點到根節點的唯一路徑長度，深度與層級較為類似。
樹狀結構究竟出現在生活中的什么地方呢？樹狀結構對于我們又有什么用呢？大家可能理解上會覺得很枯燥，我給大家舉一個例子：
回憶一下我們小學使用字典時的場景，首先我們是先通過聲母，去確定這個漢字的大概的頁數范圍，然后通過韻母去確定這個漢字的詳細位置，最后通過音調找到想要尋找的漢字：
其實字典的設計，便是一個典型的樹形結構。而在 B端系統中我們常見的公司組織架構、省 市 縣 地址選擇、在線教育的班級結構 等等，這些都是使用了完整的樹形結構。
采用樹形可以快速進行結構化的表達，其目的是為了用戶能夠快速地增刪改查，想要更多了解結構化表達的同學推薦大家看一本書《金字塔原理》，里面講了非常多的邏輯化思維、表達的方法與內容，內容比較多，而這種思維其實在我們工作生活中都能夠用到。
1.層級縮進
為了將樹的整個結構完整的表達出來，會使用層級縮進的方式進行區分，通常會使用 8px 對下一級節點進行縮進，這樣能夠表達更為完整的層級關系。
這里要注意，如果想要更為強調樹形選擇的層級關系或者樹形內容本身就比較多的情況下，可以見解 Coding 編輯器的思路，即：將縮進內容使用“分支線”進行表達，更明確清晰。 這里使用層級線后，折疊圖標也會有所不同，下面有明確解釋。
2.折疊圖標（節點按鈕）
主要是將節點下的所有樹葉與子節點進行展示，在整個樹的結構中，折疊圖標一般分為兩種：三角折疊、方形折疊
三角折疊：為頁面層級較少時使用。因為在較少的層級下，用戶不用特意去思考當前節點所在層級究竟在哪。
方形折疊： 更多與頁面層級線進行配合使用，通過層級縮進，將頁面層級線標識清楚，能夠更好的在多層級情況下進行合理區分。
3.選擇控件
整個樹形結構依舊是在選擇錄入框架下，分為單選和多選。因此需要對其類型有所展示，特別是在多選的場景下，一定要標明它的類型，方便用戶進行理解使用。
通常這個控件可以在單選的時候進行隱藏，這里先按下不表，我在樹形選擇的類型當中深入給同學們進行分析理解。
4.選項文本
注意字數限制、超出后如何處理即可，我就不做過多介紹。
在講樹形選擇之前，我先為大家講解關于與其相關的同類型產品，為了方便大家的記憶，我選擇出了兩類不同的組件進行對比，感興趣的同學可以關注“CE青年” 后臺回復樹形對比進行查看。我通過視頻的形式為大家進行了講解，相信大家在看完之后一定會有所收獲。
單選樹只能選擇葉節點，也就是需要將每個樹展開過后才能進行選擇。
它是一個較為傳統的選擇方式，因為它的選擇熱區較小并且理解成本較高，因此這種方式不太滿足現如今對于B端產品效率提升方面的要求，并且要求十分特殊，因此使用較少，現多以單選節點樹為主。
單選節點樹與單選樹最大的區別在于其能夠選擇子節點，這樣可快速選擇該子節點以及其各種葉節點。
同時傳統的單選節點樹中是采取單選按鈕的方式，隨著對B端要求的不斷提高，并且在樹的功能越發的復雜過后，幾乎取消了 單選按鈕 的形式，取而代之的是將整個 文本標簽 作為選擇的熱區，用戶點擊過后即可進行選擇。
因此在樹形選擇當中，逐漸將單選節點樹演變成由兩部分熱區所組成的一個控件：
在左側，主要以樹類型的展開折疊操作，熱區通常就是圖標折疊圖標這一部分；
在右側，以選擇該選項、節點的操作為主，熱區范圍以整個選項文本作為基礎，進行延展即可。
這里還是提示以下新讀者，這類選擇一定要進行 Hover 狀態處理，不然用戶無法根據光標的變化判斷是否可點擊，當然老讀者跳過就行～
大家在對比單選與多選時會發現，為什么不會存在多選樹？不存在只選擇選項的多選呢？
思考時間又到了，別忘下劃，自己先想想呢～
雖然在理論上會存在多選樹的情況，但是它存在的價值比較詭異。首先在樹的節點當中，我選擇一個子節點就是選擇該節點下的所有。因此可以說是選擇了一個節點；或者說它選擇了該節點下的多個選項，因此在實際情況中這類場景過于的少，更多會用多選節點樹進行代替。
當然，多選節點樹與單選節點樹在結構上是十分接近的，就是將復選框展示出來，方便大家進行選擇。考慮到大家經驗不足，建議這里復選框放在折疊圖標前側，原因有二：
在樹形選擇后續的拓展當中，經常會遇到選擇增加一些操作功能，比如 新增、刪除、復制、粘貼、拖動排序。我看很多設計師最開始因為種種原因將選擇組件部分放在后側，導致之后的操作無法進行更多的拓展，隨之崩潰，對樹形選擇又是一頓亂造～
現有的基礎架構基本都是沿用了這類設計，可減少前端同學的工作量，同時也減少他 BUG 的產生。
多選節點樹的使用場景非常多，我舉一個大家在樹形選擇中都會犯的例子，希望大家能夠多理解其中存在的特殊邏輯：
比如在一個大型上市公司當中，我作為老板會去設定整個“設計部”的權限，并且想要得到的效果是之后有任何新員工都是使用這個權限。如果作為一個新人設計師，很容易就會使用多選節點樹，將整個組織架構進行選擇，但是這樣的選擇與用戶實際想要的內容是存在較大差異的。
在產品設計中，對于上訴的“設計部”這個概念其實是一個動態數據，即在之后新增到“設計部”的所有員工，我不必再去權限管理中重新配置。我們遇到動態數據的情況時，首先不建議大家采取樹形選擇，因為首先對于這個概念的理解成本很高，無法通過樹形選擇這樣的方式讓用戶理解；同時系統對于這類動態數據的情況都建議特殊處理，至于怎么處理，大家可以在評論區討論，我也會在后續文章當中為大家進行講解。
易理解：
因為樹狀結構本身就已經存在很久，早在 DOS 計算機時代就有它的影子，經過長期累月的發展，用戶在理解上也會相對更加容易
快瀏覽：
在數據量特別大的時候，能夠根據子節點優先找到自己想要的葉節點，從而提升選擇效率，與《選擇錄入02》當中講到的 Tab選擇十分類似，沒看過的同學建議先去看看。
看結構：
結構，能夠輔助人們進行快速記憶，從而對整體框架有著更深了解。而樹形選擇正是有了這種結構能夠更為方便的讓更多人熟知，從而更快了解業務。
首先對于樹形選擇本身的控件形式，你就需要去分析其能承載的內容數據量。應該是在什么范圍內較為合適。
當數據量過大時一定會出現異步加載、數據分頁等諸多情況，因此在設計中，需對這類情況進行設計。
全選功能本身較為簡答，無外乎就是一個復選框的事情，但是在上面提到的數據量過大 + 全選的存在，會有些問題還需要大家進行留意。
在樹形選擇當中，都可以采取鍵盤操作從而提高效率。基本規則是：
↑鍵：向上切換同級節點；從第一子節點，順序返回父節點；
↓鍵：向下切換同級節點；順序進入已展開的第一子節點；
←鍵：關閉當前級別節點；返回上一級父節點；
→鍵：展開子節點列表；順序進入已經展開的第一子節點；
回車鍵：提交當前 foucs 的節點選項；
樹形選擇是較為常見的一類方式，但由于大家對 基本的樹形結構 認識不足，導致對其設計會有許多誤區。
關于樹形選擇大家還有什么疑惑，可以在評論區咱們一起討論～
任何一個新穎的設計浪潮，都會影響設計師的設計表達。我們能做的就是感受浪潮、尋找源頭、思考走向，隨時精準有力的擁抱變化。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
2021年至今「逆反差字體」這個原本偏小眾的字體設計風格，從卷土重來到廣泛應用，再次受到諸多設計師的追捧，一股新浪潮撲面而來。
縱觀它的出現、流行與發展，身為設計師，期待本文可以通過對經典設計的客觀分析，蓄力字體設計領域的經驗和技巧，為2022年的創作積累更多靈感。
Reverse contrast現在國內被稱為「逆反差字體」。設計師皮特·比亞克（Peter Bi?ak）在2012年發表的文章中曾提到：這種逆反差字體的設計是有意通過違背讀者的預期來吸引注意的，怪異的字母形式在日益飽和的商業信息世界中脫穎而出。
二十世紀中，荷蘭著名書法家和設計師格里特·諾澤爾（Gerrit Noordzij）倡導以書寫走向作為字體設計的基礎，通過習慣來定義書寫理論：平移和擴張。這個邏輯反映出人們對拉丁字母普遍造型認知：橫細豎粗。
豎筆畫在西文字體中起到承重、平衡結構的作用。如果顛倒粗細對比關系，使其橫粗豎細，就會造成橫向視覺，讓人產生印錯的感覺，這與傳統的三大主流西文字體的設計方法也是相差甚遠。
逆向設計的規則營造出視覺上強烈的差異感，比起普通字體更怪誕、夸張，更具有戲劇性和情緒化，讓人印象深刻。它最大的特點是重構了拉丁字母的視覺比例。經發展，中文表達上使用“逆反差”還是生動準確的。
在商業廣告海報張貼應用中Caslon Italian字體被鑄造出來。這是19世紀初，工業革命在金屬活字印刷領域的一個新奇的創新。
1825年，印刷工和社會改革家托馬斯·卡森·漢薩德（Thomas Curson Hansard）把逆反差字體描述為“排版怪物”。
1854年，French Antique字體發行，造型如鐵軌般的字型引來了一種新的風格——French Clarendon。它在美國廣告制作中展開了大量生產使用。在獲得市場認可后的半個多世紀，它仍在馬戲團的海報和西部電影宣傳上被廣泛應用。
這組彩色的活字印刷樣本，讓逆反差的設計風格在當下更顯復古。
19世紀，在追求創新的歐洲人看來，逆反差字體的古怪造型仍是離經叛道的。而現代設計師則帶著更多反思和辯證，以非傳統的審美來認識這種字體風格。
20世紀，逆反差字體的浪潮席卷歐洲。瑞士著名的字體設計師馬克斯·米丁格（Max Miedinger）于 1954年設計了自己的第一款逆反差字體Pro Arte。大名鼎鼎的Helvetica字體就是由他設計的。
20世紀80年代，遠在亞洲的日本也接受了這股“逆浪潮”。當時的動漫和游戲開始風靡，熱血與科幻的世界里結合字體夸張的造型，讓設計簡直天衣無縫。
1980年，在游戲UI中誕生了世界上第一款逆反差像素字體，讓游戲世界充滿著奇幻感。
這種像素化的設計方法，如今是很潮的視覺表達。
80年代，逆反差字體在音樂和書籍等多個包裝領域的應用也是繼往開來。
逆反差字體從未真正流行但也從未被拋棄過。如今，除了趣味盎然，又增加了更加瘋狂的風格效果，最為典型的是Maelstrom。很多字體的誕生，都證明著逆反差的無無限可能性。
西文有著較為完整的逆反差字體更迭歷史，漢字相對創造力偏弱。中國設計師在進行漢字逆反差設計的探索時，不妨大膽些，打破局限，從中國書法中吸取創作養分，這是民族文化理解上的考驗，也是對民族文化的尊重。
大多書法風格多變，并沒有嚴謹的橫粗豎細。不過，難得能在清代的漆書中找到橫粗豎細的規律存在，它犧牲了部分漢字的視覺結構，傳達出一種鈍拙感和趣味性，這正是漆書的魅力所在。
漢儀2020年1月出品一款漢儀吉金，靈感來源就是漆書，在其基礎之上造型更加現代。
民國時期，在廣告招貼、書籍封面上，也能發現很多逆反差風格的字體設計。這些都是漢字設計上逆反差的初次實驗。
徐學成是中國第一代字體設計師，在晚年仍堅持實驗性設計的嘗試，1998年他主持設計出華康雅藝體這款逆反差字體。
造字工房也推出過幾款視覺沖擊力強、節奏分明、充滿藝術張力的字體：造字工房溢尚真體、彩體、超凡體等。
3type（三言）設計研發的基本美術體，在2020年10月進入試用階段。它簡單明了，擁有大膽靈動的字形，是為數不多的優秀中字逆反差字體。
基本美術體也是本文的靈感來源。曾路過順愛烤肉公司，被牌匾上的字體所吸引，便開始了我對逆反差風格字體的探索研究。
日本一度受到美國Fantail（扇形尾）風格的西字影響，也展開過一系列的實驗性嘗試。最為典型的是寫研在80年代，推出的「扇尾蘭」字體，它憑借寫研在行業內的影響力得以廣泛的運用。
其后，C&G 花束字體、TA-Sigma字體等，這些極具逆反差風格的扇尾字形也在市場應用中大放異彩。
歷經200年的鍛造與發展，逆反差字體如今獲得了越來越多設計師的青睞，中外設計有目共睹。
野獸派美學（The brutalist aesthetic）頻繁的應用于當代平面設計和網頁設計中，逆反差字體有著原始且未經雕琢的質樸風格，往往在簡潔精致的物體上形成鮮明對比，增加設計內容的趣味性。
近兩年，看到了很多比例夸張、造型狂野的驗性字體形式出現，這要歸功于酸性設計的盛行。
酸性設計，是一種主觀情緒化、美感與欲望交織、傳達致幻又辛辣酸澀的一種復雜感受的體現。它強調出了失調和混沌共存的狀態，這和逆反差字體的反叛精神極為契合，二者結合來表達科幻感與未來主義時情緒飽滿而熱烈。希望本文能幫助更多朋友梳理逆反差字體與設計風格的關聯性。
逆反差字體是一場字體設計的視覺革命?？此乒终Q，其實是對視覺設計規律的突破與創新，雖“有悖常理”，但并非曇花一現，它在字體設計的歷史上擁有自己長久的舞臺。
任何一個新穎的設計浪潮，都會影響設計師的設計表達。我們能做的就是感受浪潮、尋找源頭、思考走向，隨時精準有力的擁抱變化。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn