最近幾年以來，大家能看到B端設計趨勢已經越來越火熱，在B端設計中關于圖表的設計算是為數不多的視覺發揮點了。那么怎樣才能做好圖表設計，讓設計出來的圖表高大上，符合業務需求，讓業務方和總監對你贊不絕口，本文就必須看完和收藏了，因為實在是太實用！
應用設計越來越依賴數據驅動，對高質量的數據可視化需求也越來越高。然而我們身邊卻充斥著令人困惑和誤導的數據圖表，但我們其實可以通過遵循一些簡單的規則來改變這個情況。
選擇錯誤的圖表類型，或默認為最常見的數據可視化類型，可能會讓用戶感到困惑或導致對數據的誤解。根據用戶希望看到的內容，可以用多種方式表示相同的數據集。盡量做到每一次做數據可視化時都能從數據集類型分析和用戶訪談開始。
當使用水平條時，在基線的左側繪制負值，在右側繪制正值。不要在基線的同一側繪制負值和正值。
刪數據起點會導致曲解。在下面的例子中，看左邊的圖表可以很快的得出結論，值B比D大3倍多，而實際上，兩者的差異要小得多。從0開始可以確保用戶獲得更準確的數據表示。
對于折線圖，總是限制y軸比例從0開始可能會使圖表幾乎平坦。由于折線圖的主要目標是表示趨勢，因此根據給定時期的數據集調整比例并保持直線占據y軸范圍的三分之二是很重要的。
折線圖是由線連接的“標記”組成，通常用于可視化時間間隔內的數據趨勢。這有助于說明數值是如何隨時間變化的，并且對于較短的時間間隔非常有效，但當數據更新不頻繁時，這可能會導致混淆。
例如: 使用折線圖來代表年度收入，如果數據是每月更新的，則每個月在圖表中會生成一個個孤立的標記點。用戶可能會假設連接“標記”的線代表實際值，而在特定時間實際的收入數字是未知的，所以可能會產生誤會。在這種情況下，使用垂直條形圖可能是一個更好的選擇。
平滑的折線圖可能在視覺上很好看，但它們錯誤地反映了背后的實際數據，而且過粗的線會模糊真正的“標記”位置。
通常，為了節省可視化空間，當有兩個具有相同度量但大小不同的數據系列時，可能傾向于使用雙軸圖。但這些圖表不僅難以閱讀，而且它們還以完全誤導的方式代表了兩個數據系列之間的比較。大多數用戶不會密切關注比例，只是瀏覽圖表，然后就得出了錯誤的結論。
餅狀圖是最流行的也是經常被誤用的圖表之一。在大多數情況下，條形圖是更好的選擇。但如果你決定做一個餅狀圖，有2個比較好的建議:
1）不要超過5-7片，保持簡單
2）可以將額外的最小段分組到“其他”切片
如果沒有適當的標簽，無論你的圖表有多好，它都不會有意義。直接在圖表上標注對所有用戶都非常有幫助。查閱圖例需要時間和精力來理清數據和對應的部分。
將數據放在切片上可能會導致多個問題，在可讀性問題上和窄切片上都會有挑戰。相反，添加黑色標簽能清晰的鏈接到每個部分。
在確定餅片秩序時，有幾種常用的方法:
1）將最大的切片放在12點的位置，然后將下一片切片順時針降序排列
2）把最大的切片放在12點的位置，第二大的放在順時針相鄰位置，第三大的放在11點的位置，其余的切片按順時針降序排列
同樣的建議也適用于其他許多圖表。不要默認采用字母排序，將最大的數值放在頂部(對于水平條形圖)或左側(對于垂直條形圖)，以確保最重要的數值占據最突出的空間，減少眼球運動和閱讀圖表所需的時間。
餅圖通常不是最容易閱讀的圖，因為比較相似的值非常困難。當我們把中間部分去掉，創建一個圓圈圖表時，我們騰出了空間來顯示額外的信息，但這樣犧牲了清晰度，極端情況下，圖表就會變得毫無用處。
不必要的造型不僅會分散注意力，還可能導致對數據的誤解和用戶的錯誤印象。你應該避免:
1）3D元素，明暗面
2）陰影、漸變和其他扭曲的多彩色
3）斑馬圖案，過多的網格線
4）過度裝飾，斜體，粗體或襯線字體
顏色是有效的數據可視化的組成部分，在設計時考慮以下3種顏色類型:一個定性調色板最適合顯示分類變量。為確保易用性，所分配的顏色應該是不同的。連續調色板最適合需要按特定順序放置的數字變量。使用色相或亮度或兩者的組合，可以創建一個連續的顏色集。
發散調色板是兩個連續調色板的組合，中間有一個中心值(通常為0)。通常不同的調色板將傳達積極和消極的價值。確保顏色也與“消極”和“積極”表現的概念相匹配。
看看一個方便的工具- [ColorBrewer]https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3，它可以幫助你生成各種調色板。
根據美國國家眼科研究所(National Eye Institute)的數據，大約每12人中就有1人是色盲。你的圖表只有在廣泛的受眾可以訪問時才會成功。
1）在調色板中使用不同的飽和度和亮度
2）把現有配色去色然后檢查對比度和可讀性。
確保排版能夠準確傳達信息，幫助用戶專注于數據，而不是分散用戶的注意力。
1）選擇易讀的字體，避免襯線和裝飾過度的字體
2）避免使用斜體、粗體和全部大寫
3）確保與背景有高對比度
4）不要旋轉文字
這個簡單的技巧將確保用戶能夠更有效地閱讀圖表，而不會扭傷他們的脖子。
如果你的任務是在web和移動項目中添加交互式圖表，你應該問的第一個問題是我們將使用什么圖表庫?現代圖表庫包含了許多前面提到的交互和規則?；谝讯x庫的設計將確保易于實現，并能提供大量交互想法。
幫助用戶通過改變參數，可視化數據進行探索。然后得出結論，最大化價值和洞察力。在下面的示例中，你可以看到IOS Health應用使用了各種數據表示的組合。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
當設計師被迫待在家里時，終于能有時間去反思現有的設計并重新創造。無聊是藝術家最大的敵人，他們會盡可能地打破困局。
對我們來說，2021年相當困難。世界上最長壽的貓慶祝了它的34歲生日，這可能是發生的唯一一件好事，順便說一下，你會在文末看到這只可愛的小貓照片。
那么，2022年的UI/UX設計趨勢是什么呢？看看現在的情況，我們已經可以預測未來的設計趨勢，就像我們對2021年所做的預測一樣（回頭看非常準確）。
在本文中，我們將發現：
3D視覺設計師的內卷將會越來越嚴重
數據可視化的工作將變得越來越重要
服務的移動化還需要做出更多努力
scrollytelling 技術會越來越流行
舊的滾動是無聊的。如果你想吸引注意力，你就需要實現滾動敘事（scrollytelling）。（彩云注：這個技術的核心在于邊滾動頁面邊講故事）
《紐約時報》是第一批在他們的文章《雪花飄落》中使用滾動敘事手法的機構之一。
它是一種敘事形式，可以在網頁和APP上呈現。想象一下，在一個網站中每個插圖、文本和其他元素都開始變得生動起來。自然地，你會想看到這個故事的結局。它就像一個游戲，帶你穿越迷宮。雖然你不能影響它的進程，但卻讓你感覺自己能參與其中。
2022年，Scrollytelling將會出現在你看到的每一個流行網站上。
另一方面，scrolllytelling讓用戶真正去閱讀內容。你可以用動態文本讓他們產生興趣，比如谷歌的網站 (https://www.google.com/search/howsearchworks/)。他們的團隊知道如何讓信息看起來更好:
Scrollytelling在用戶向下滾動時被激活，因此得名。沒有點擊，沒有選擇的麻煩，沒有彈出窗口。你似乎停留在一個地方，但通過滾動，把屏幕上的故事慢慢展開。這不僅要求設計師創造出酷炫的視覺效果，還需要認真思考一個你想要講述的故事情節。
所以，最好的網站不可能在2天內建成，需要更多的時間去打磨。
IAmBinadam令人驚艷的敘述設計
滾動敘事的項目通常需要大量的時間和精力。不過，這樣做的結果是值得的。頁面變成“活的”，每一秒都有新的事情發生，所以在閱讀時很難感到無聊。
那么移動端APP呢? Pure是一款約會應用（彩云注，這個應用在app store可以搜到，推薦大家安裝一個體驗一下，非廣告），它創造了一種我稱之為“tappytelling”的故事(當你第一次點擊并打開應用時，它就會被激活):
Scrollytelling是為用戶而創建的，用戶很喜歡它，不需要到其他頁面去閱讀整個故事。相反，網頁設計的整個故事都是事先考慮好的，并盡可能以最有趣的方式設計出來。
如何在2022年做出一個還不錯的企業網站？你不會想告訴用戶你是“XX領域公認的領導者，該領域最好的之一”。這種標準的廣告表達并不傳達任何有價值的信息。
最好不要用形容詞，而是用事實來說明:你有多少分支機構，在哪些城市，誰是你的客戶，以及你是如何幫助他們的。抽象信息是不可靠的。但如果你有很多想要分享的數據，你需要讓它不僅簡單，而且有趣。
數據可視化有助于以一種吸引人的方式傳達正確的信息。它也可以與滾動敘事（Scrollytelling）緊密結合。以下是IAmBinadam展示數據的方式:
通過去除數據集的復雜性，使信息更容易讓讀者感知。
不同級別的數據具有不同的大小，這樣用戶知道應該先從哪里查看
讀者可以很快注意到作者試圖通過圖片引出的結論?？紤]到如今人們消費的數據量巨大，那些干凈整潔的數字帶來的正面影響更大。
有些圖表乍一看甚至不像圖表，這使得它們更加能被注意到
還有一種現象叫做“新冠后遺癥”。這是Covid對公司及其員工的長期影響。根據英國國家統計局的數據，2018年，壓力和焦慮的平均得分約為2.7/10。自新冠疫情發生以來，得分已升至4.0/10，很少低于這一水平。同樣因為大流行，在過去兩年里工作量增加了4個小時。
人們壓力太大，卷的太辛苦，以至于不愿去看復雜的數據。
設計師做好數據可視化，以保持人們的注意力。記住，復雜的信息通常被忽略，因為讀者試圖節省他們的時間，更有可能使用滾動按鈕。
Illustration by Mona Chalabi
以下是我們推薦的一些表示數據的方式
1）圖表和曲線圖
2）插圖
3）靜態信息圖
4）互動信息圖
Illustration by Ink Factory
一個好的圖表，或者任何其他形式的數據可視化，都應該具有在Edward Tufte的“定量信息的可視化顯示”中描述的特征。在他的書中，Tufte通過圖表解釋了好圖表的3個原則：
1）展示數據的圖形元素與數值總數的比值應趨向于1。簡單地說，應該刪除一切不必要的元素，保持整潔。
2）充分利用好畫面空間。也就是說，需要將數據編排的更緊密
Graph by Hootsuite
3）客觀地描述數據。不要使用夸張的圖表，可視化數據可以看起來很酷，但真實永遠是更重要的。
根據We Are Social的數據，2021年有52.2億人使用手機，約占世界人口的66%。自2020年1月以來，手機用戶數量增長了1.8%(9300萬)，而手機聯網總數量增長了7200萬(0.9%)，到2021年初達到80.2億。
過去一年，社交媒體用戶的數量增長了13%以上。到2021年初，社交網絡上已有近5億新用戶注冊。根據App Annie的數據，Android用戶每天花在手機上的時間超過4小時。2020年，安卓用戶上網時長超過3.5萬億小時。
令人印象深刻的數字，是嗎？似乎到2022年，為產品做一個APP將成為必須擁有的東西。如何知道你的公司是否真的需要一款應用？有以下幾點可供評估：
1）用戶主要通過移動設備訪問你的網站這是你應該了解的重要數據。
客戶和你在一起的時間越長，你就有越多的機會去吸引他們，了解他們的習慣，并給他們想要的東西。（彩云注：這就是為什么各大廠之間都在拼命搶占用戶的在線時長。）
2）幫助內部業務流程更加有效。
如果你想要提高員工的工作效率、改進工作流程或增加利潤，那么就制作一個可以幫助管理業務流程的移動應用。
如今，像這樣的手機應用使企業能夠執行越來越復雜和多樣化的任務，加快日常重復操作和文檔管理。
3）實現一些網站上沒有的新功能。
如果你認為APP能為用戶打開新的觸點，并讓用戶體驗更加友好，那么它就值得考慮開發。問問自己的APP能提供什么新的商業機會？例如，隨著疫情的蔓延，許多人開始用上健身APP在家里鍛煉。
4）競爭對手做的情況。
要了解競爭對手在做什么，他們是否有APP，能做什么，以及他們是否真的對用戶有用。
查看App Store和谷歌Play的統計數據。下載和評論的數量可以告訴你用戶是如何使用競爭對手的應用的。如果他們的服務真的很方便而且很有必要，那么你就容易被甩在后面。
5）復購率。
一個應用可以幫助你留住那些習慣從你那里購買的人。如果想為老客戶開展促銷活動了，給他們發送一個通知就能完成，成本更低。
在正確的時間提供的報價越有吸引力，人們購買的可能性就越大。
6）促銷工具。
有了應用，你就不需要花錢設計和制作實體卡，客戶也不需要隨身帶卡。將促銷計劃整合到APP，并分享有用的促銷信息。
開發手機網站比開發手機應用需要更少的工作量，這反過來可以降低整體推廣成本。
這部分是由于響應式設計的出現，它允許你根據打開網站的設備屏幕來調整網站。至于APP，它們必須為許多移動平臺單獨編寫:Android、IOS、Windows等。
一些設計師認為“前端驅動的網絡體驗”會是2022年的一個好機會，我非常同意!（彩云注：在國內，現在開發小程序的肯定越來越多了。）
我們一開始并沒有將其放在首位，因為這并不是一個新的趨勢，在很久以前設計師們就已經設計了很多3D圖像和動畫了。
Cardi B rhymes with 3D
3D技術已經在過去流行了很多年，但它不會很快消失。此外，我們預測3D圖形將變得更加多樣化和包容。
在過去的幾年里，3D藝術和動畫已經出現在各種UI設計趨勢評論中。這意味著越來越多的設計師將它們整合到頁面中。
3D當然應該成為2022年最熱門的趨勢和預測之一，因為與經典動畫相比，逼真的3D形狀結合動畫總是引人注目的。
“從技術上講，通過3D更容易傳達更多內容，因為它比平面圖片更接近我們的感知。3D插圖更有深度，信息量更大，也更具互動性。"
許多設計師將3D對象無縫地“安置”在2D空間中。它允許創建更有趣的組合，也作為一個優秀的工作方法蘊藏著巨大的潛力。
烏克蘭政府網站用3D手模擬了黑客帝國
注意一點：在整合3D圖形等重量級內容之前，確保你的應用性能是OK的，能夠快速加載所有元素。
Meta的logo既不是2D也不是3D?；蛘邇烧呒娑兄?這就是即將到來的2022年的莫比烏斯帶和薛定諤的貓。
Meta logo的變化(3D版本)(https://design.facebook.com/stories/designing-our-new-company-brand-meta/)
（彩云注：這個概念在去年簡直不要太火，未來幾年肯定還會是一個大的趨勢，設計師也需要保持關注。跟著趨勢走，易于放大自身價值。）
越來越多的公司在網站和移動應用中使用動畫，以提高用戶的沉浸感和體驗，使內容更有趣。
動畫是2022年重要的網頁設計趨勢。2022年，如果沒有它，你的產品很可能會看起來就像個半成品?；旌巷L格的動畫越來越受歡迎:定格動畫和3D動畫的結合，2D動畫和3D動畫的結合。設計師這樣做是為了獲得不同尋常的風格解決方案，以及提高最終產品的質量。
2022年，動畫設計將是品牌市場定位的重要組成部分，想想一個公司新的視覺形象——動畫形象。隨著這個領域的專業設計師數量的增長，實現新想法的機會也在增加。
1）講故事動畫。
可以通過在界面和用戶之間建立情感聯系來傳達信息。
加載動畫Yoichi Kobayashi
2）更有趣的加載。
用戶不愿意等待，除非載入畫面很有趣。帶有百分比的動畫不僅可以分散用戶的注意力，還可以告知他們加載頁面需要多少時間。使用進度條或者任何你能想到的可以顯示時間流逝的東西。
3）光標效果。
用戶可以精確地觀察光標所在的位置。通過添加智能互動動畫，對這個光標作出反應來探索網站。這種效果在21世紀初非常流行。如你所知，流行趨勢往往每20年就會重演一次。
4）動態排版
你有沒有想過讓字母跳舞?
據Statista統計，2020年全球動畫市場達到了2700億美元。趨勢是視頻，而不是靜態信息。全球品牌在社交網絡上使用動畫制作廣告。毫無疑問，動畫插圖的優勢是它們非常靈活和多樣化。
寶馬歷史動畫
這樣的作品通常用于兩種情況:
1）用于解釋視頻
2）電商廣告
動畫解說的趨勢出現在幾年前，解說視頻清楚地顯示點擊的位置或公司的項目是關于什么的。
在招聘或商業視頻中，用戶更喜歡看畫出來的人物，而不是抽象的形狀或物品。畫出來的人物可以喚起情感共鳴，就像活著的人一樣。
微交互是幫助用戶瀏覽網站或應用的小界面變化。通常這些是作為提示用戶的視覺或聲音效果:它們顯示發生了什么，將導致什么操作，下一步需要做什么。
圖片來源awwards
動畫交互將為你的設計注入活力，并有助于保持用戶粘性。關注每一個細節是設計師工作的關鍵，因為設計中的所有元素都可以帶來積極的用戶體驗。
重要的是要達到元素的和諧，而不是把注意力分散到界面的各個方面。微交互作用的一個重要部分是顏色，它們為界面元素增強價值。
微交互有助于頁面導航，解釋它們的功能。最重要的方面之一是加快和簡化以前冗長的功能，以實現特定的行為。
2022年，在線品牌面臨著新的挑戰，需尋求新的解決方案，其中之一就是動畫logo設計。
圖片來源Toridori
動畫logo主要有以下幾點營銷優勢:
1）吸引注意力。這意味著它們有助于提高品牌知名度。
2）有助于提高SEO。谷歌更傾向于動態內容，帶有動態圖形的頁面更容易吸引用戶。
3）在移動端看起來更好。絲滑的動畫看起來比靜態的logo更有趣。
4）最重要的是展示了歷史。靜態logo背后的想法正在動畫中發展。由于這一點，在幾秒鐘內，你可以展示品牌的使命，甚至它的價值!
一家洗衣機[公司]的標志(https://www.schulthess.ch/)
現在有很多設計模板，可以很容易地用字體制作一個動畫logo:
圖片來源Shabello, Bobby Voeten
記住，設計趨勢總是在變化的，但是設計的意義不會變。如果你不能深刻理解這一點，那么任何設計趨勢的文章不能幫你做好設計。
這是前面提到過的世界上最老的貓。她今年34歲(相當于人的160歲)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
很多時候既讓初入B端行業的設計師感到一絲絲迷茫，因為不同的B端系統也就意味著，它的業務一定就會有所不同。比如CRM系統當中的客戶生命周期管理，OA的辦公自動化，特定的行業往往都會蘊含著不同的業務類型
而作為設計師，如果只了解設計模式、設計組件，不去分析設計最后的業務訴求，其實是沒有任何意義。因此想要通過B端設計指南，和大家一起聊聊B端業務，以及背后所牽涉的具體邏輯。今天就簡單聊聊最為常見的 審批
開始之前，還得再多說兩句，因為一個系統當中，業務本身就不是獨立存在的。因此在去講述審批的過程，一定會涉及到 流程、權限、表單配置 等一些基礎內容，建議可以先做初步了解，再結合文章進行閱讀
雖然在說起源，其實我更想給大家講清楚 審批在B端系統 當中的重要性
審批字面意思是審查并加以批示，通常指對 下級呈報上級的公文進行審查批示，報請上級審批
現如今，任何事情一定都會有分工協作，而使用審批的好處是可以
規范員工行為
提高企業運轉效率
系統存檔便于溯源
保護環境（畢竟減少了紙張浪費）
當然在不同的階段的公司，對于審批的訴求是不太一樣
小公司：因為審批的決策路徑短、流程上都非常簡單，但因此就會缺乏規范保障。比如在外出辦公時，看似只需要與老板當面進行口頭上的溝通即可，但是在外出出現意外時，由于缺乏外出辦公的相關證據，員工的權益則很難得到保障
大公司：因為審批的決策路徑長，流程上都極其復雜，因此會在多人協作下完成整個流程審批。比如想要申請購買辦公用品時，會由 行政、Leader、財務 層層審批，從提交審批到最終落實可能需要十天半個月，但是這樣的流程，能夠確保企業在清查財務狀況時，更加有理有據
審批的演變，就是從最開始的規章制度而來。比如在早期去政務機構辦理各種業務時，會讓你去填寫各種紙質表單。在審核過程中，則需要有各個機關的蓋章及批準，而這種形式正是政府對于普通市民的自上而下的管理方式
審批其實是整個B端系統的靈魂，因為在B端系統當中，企業想要使用系統的一大痛點便是 核心的管控
因此你會發現，只要一個獨立的系統，一定會存在獨立的審批模塊。因為B端管理系統當中企業的最終目的，是管理手中的人，而審批便是最為常見的一種手段
審批在如今的B端系統當中，可以理解為它是一組消息，在這一組消息當中會有：“具體的文本、對應的附件、以及照片視頻”這些內容都是輔佐 申請人 去講訴你需要申請的內容
比如我們在申請病假時，往往需要出示 三甲醫院所開設的證明，對于這個證明，如何在表單當中出現，你會發現最為常見的便是拍攝證明圖片，然后上傳到表單當中（這個與字段屬性緊密相連，我就不做不過介紹）
審批的這組消息還會有些特殊，因為它非常重要，你可以理解為它是一則“加急消息”會提醒審批人快速的進行處理，同時會告知相關的參與人（處理人、抄送人）審批的進度、并且無論成功與否，都會在系統當中留下 足跡，因此它起到了 “追蹤、通知、留存” 三個非常重要的作用，我們首先對于審批進行一個基礎的拆解
如果把審批單獨拿出來，你會發現審批會牽涉到 發起人、處理人、抄送人
審批的發起人，也是整個審批流程的歸屬人，他最關心整個審批進展
因為在發起人的角度，創建完審批事項后，可能還需要進入審批頁面，完善 后續附加信息、及時了解審批狀態、催促審批人的審核、處理駁回意見 等等，因此站在發起人的角度，審批需要盡可能詳細的展示 當前審批的狀態、完整的審批流程、駁回信息的快速操作、成功信息的必要通知
審批的處理人主要在審批過程做出決策，因此他更在乎的是審批申請內容的信息。比如 審批的信息內容、直接的審批操作、多條審批的管理
當然，在一些大型的集團企業當中，會將審批分為審批「直接處理人」與「間接處理人」（后文以 直處人、間處人 簡稱）
「直處人」作為審批的第一處理人，也就意味著他的意見至關重要，如果「直處人」通過過后，相對而言整條審批的通過幾率會大大增加。通?！钢碧幦恕故亲鳛樯暾埲说闹毕殿I導居多，因此多數情況下可以理解為直屬領導進行 “把關”
「間處人」作為審批的后續處理人，同樣在流程當中也十分重要。但在有些情況下，比如一些偏平化管理的企業，「間處人」更多像是“權利”的象征，因為權利已經下放給「直處人」，而「間處人」起到知曉審批以及企業的規章制度要求
審批抄送人主要起到通知對應角色的作用，因為一條審批的出現，會造成諸多影響，假設今天你需要申請事假，如何通知同部門的其他成員呢？
發送即時消息，顯得過于簡單；每個打電話，又有些麻煩；發送企業郵件，又怕他們沒有看到
這時候抄送人會顯得尤為關鍵
通常抄送會有企業流程上管理員配置的固定抄送人，以及發起人選擇的自行抄送人 兩種類型
固定抄送人 角色通常與管理員配置整個流程有關，他是角色當中 管理員 所配置的重要通知人，比如今天你的請假信息，肯定會告知行政，像這類默認的通知流程，則可以將其設為固定抄送人
自行選擇抄送人 則是提供給發起人自行選擇，該條審批可能會影響到的相關人群。比如就是發送給同事，讓他們知曉今天你不在崗位上，因此自行選擇可以增加審批抄送的靈活性
這里肯定會有很多讀者會問，我選擇抄送人與我發消息給同事，有什么區別么？
看似完全相同，實則有明確的區分
通過消息，將審批內容傳達，本質上是你自行將內容發送給對方，對方會對于你這個消息的真實性會產生疑問？你是否通知了
而選擇抄送，更為權威，更能體現你這條消息的真實性，并且整個流程都已經由領導進行批準，因此不會存在太大問題
其實審批的本質就是一組消息，而這一組消息當中，申請人 通過 表單配置 去獲取需要補充的消息內容，而流程會根據企業所配置的流程方式將這一組消息進行合并轉發給對應人，而審批人則需要對這一組消息進行回復“通過、駁回” 來讓整個流程繼續延續
審批當中，最主要的便是流程。因為你可以通過查看流程圖，去了解整個企業的組織架構、規章制度、員工管理方式
串行審批主要是指當一個審核節點通過后，才能進入下一個審核節點。如果節點駁回，則可以根據業務實際需要，配置駁回的返回路徑，會有：撥回到發起人、駁回到上一個節點、或駁回之前任意一個節點 重新審批
并行審批是指一個審批節點存在多個角色同時審批，這里會存在兩種情況
任何一個人審批通過，則可以進入下個節點，這也就是系統當中常說的 「或簽」
所有審批人員通過，才能進入下個節點，這也是系統當中常說的 「會簽」
條件審批就是將企業當中的規章制度映射到實際的項目當中，通常就是某個審批內容會根據 金額多少、實際數量 等 進而選擇哪個角色進行審批
比如銷售人員在申請一個合同審批時，會根據合同金額的不同，審批人也會有所差異
當金額小于8000時，合同直接由財務專員進行審批，進而讓流程進行快速審批
當金額大于8000時，合同會由銷售主管進行審批，讓銷售主管能夠掌握企業的重要合同
通過發起人選定一個審批事項后，將自主選擇后續的審批內容，進而實現審批的后續選擇。這是一種較為靈活的審批流程，當企業尚未形成標準化流程時，自主的核心就是當發起人發起一個審批，提交時需要自行選擇下一個環節的審批人。而下一個環節的審批人審批通過后，可以選擇繼續流轉到再下一個人去審批，或者結束這個流程
審批的背后，它映射的其實是企業的一條條管理制度，而它的設計一定是要滿足企業的實際需求。因為你負責的產品不是為某一家企業提供的服務（定制化產品），并且企業管理制度的變動其實是家常便飯，你需要去考慮一個通用的解決方案，這個解決方案拆解下來會分為三個內容，分別是：申請表單、流程配置、更多配置 進行講解
審批表單是最為一個“簡單”的用戶可配置化表單，因為現如今大多數B端產品都是以 SaaS 作為基礎（如果是定制化產品 它的審批內容、流程也不會是固定不變的）也就意味著審批表單需要為企業提供“DIY”的方式，通過表單提供不同的字段類型，去構建審批的實際要求
比如在一個選擇請假時，年假、事假、病假、婚假 等的要求都會有所不同
如何知道他們的差別，其實可以根據《勞動法》的相關規定 以及 各個其實的實際公司制度，進行個性化的處理
在申請婚假時，需要上傳你的結婚證，以證明其真實性；在病假時，需要有3甲醫院的病情證明；在年假時，則需要有你的剩余年假天數。而這些特殊訴求，其實都需要在表單當中進行各種定制化表單
當然這只是極為常見的 請假 場景，而在實際業務當中的復雜場景（更多需要將 審批與其他系統關聯）一個簡單的表單是沒有辦法進行滿足
這也是很多企業會發現，無論是飛書、釘釘、企業微信，都沒有辦法滿足其實際流程需求。又沒有辦法改變自身流程，只能夠自研、定制化 產品，這也是為什么即便各行各業都有了初具規模的 SaaS 產品，但是還是會有很多企業愿意自行研發軟件
企業可以根據自身的系統流程，在流程配置當中去定制特定的流程。在這個頁面的設計上，需要注意不同參與人的狀態，以及復雜流程時如何才能夠進行清晰的閱讀，因此增加了 顏色區分（發起人、審批人、抄送人）+ 視圖縮放 功能
顏色自然不必多說，整個系統需要統一，因此不能夠只考慮在管理后臺的顏色，是一定要在詳情頁當中也能過保證顏色的一致。這樣才能夠滿足實際業務所需
視圖縮放只是小小提一下，常見的視圖縮放會放在左側，至于為什么，自己稍稍揣摩揣摩
由于流程配置的屬性頁面會涉及很多表單的復雜邏輯，這個只能夠留在我的 訓練營的課程 當中進行拆解，這里就不過多贅述
更多配置項則是審批在實際情況下的特殊處理，比如：申請人修改審批的具體時間、能夠將審批轉發給其他人、出現多次相同的審批人是否去重 等等... 其實就是將審批的設計方案進行“賦能”，去滿足更多企業在實際場景當中的需求，感興趣的同學可以去 釘釘、飛書 了解詳情
審批，核心還是提高企業運轉效率，如果在審批之間，還需要不同角色私下反復溝通，本質上就失去了審批的意義。而審批本身，就是一個典型的B端產品 從場景到需求，進而研發功能，最后又回歸場景，你設計的好與壞，落地到真實的場景當中，試試便知
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
用戶體驗（User Experience，簡稱UE/UX）這個詞是在上世紀90年代中期，由用戶體驗設計師 唐納德·諾曼（Donald Norman）所提出和推廣。
定義：用戶在使用產品過程中建立起來的一種純主觀感受。即用戶在使用一個產品或系統之前、使用期間和使用之后的全部感受，包括情感、信仰、喜好、認知印象、生理和心理反應、行為和成就等各個方面。
可用性指的是產品對用戶來說有效、易學、高效、好記、少錯和令人滿意的程度，即用戶能否用產品完成他的任務，效率如何，主觀感受怎樣，實際上是從用戶角度所看到的產品質量，是產品用戶體驗的核心，不好的可用性會導致用戶放棄使用產品。
可用性由易學性、效率、可記憶性、容錯性、滿意度、實用性、個性化、可預測性組成。
指的是用戶學習如何與產品進行交互，以實現目標所花費的時間和精力，即用戶能否在初次使用產品時完成簡單的任務或實現用戶目標。
用戶在使用產品一段時間后，能否在合理的時間完成想要達成的目標任務。這里以騰訊視頻為例，用戶能否快速的下載想要的東西，在同一系列中，可以快速下載更多的相關內容。
我們常說互聯網是有記憶的，好的產品體驗是幫助用戶去記憶。用戶在體驗中，要對一些有意識、無意識的行為進行記憶是一個比較大的負擔，如果在一些環節通過系統能幫用戶記錄，會降低用戶的負擔。比如在搜索、歷史記錄、瀏覽記錄等。
用戶在使用產品時，發生錯誤后，能否快速幫助用戶識別和糾正錯誤，幫助用戶從錯誤中恢復的能力。如常見的注冊登錄，當用戶屬于郵箱格式不對的時候，給出提示，并且告知錯在哪里。如果提示語只是："請輸入正確的郵箱" 用戶可能會疑惑，錯在哪里。
滿意度指的是用戶與設計互動產生的愉悅程度，可以是用戶使用產品時流暢的交互和優秀的視覺設計，也可以是用戶在產品中得到的滿足感。比如sir語音交互，王者榮耀等級（滿足感）
產品能否提供用戶在完成任務時所需要用到的基本功能，例如P圖類軟件，用戶需要對圖片進行裁剪、添加濾鏡、摳圖、美顏、補妝、添加文字、去除水印、添加文字等操作。
在滿足實用性的基礎上 針對用戶提供不同場景下的功能定制，如美圖秀秀，在提供圖片美化的同時，針對用戶不同的使用場景還提供視頻剪輯、視頻美容等功能。
用戶能夠預測到下一步操作或者整個流程的交互，將會發生什么。舉例淘寶的購買流程。點擊購買按鈕> 選擇商品屬性> 付款> 輸入密碼> 購買成功; 用戶在點擊購買按鈕開始就能夠預測到下一步或者整個流程的步驟會發生什么。
可見性是用戶根據界面中可見元素確定產品可以做什么的設計原則。
物理功能可見性是基于對象的物理外觀。在視覺上，這種類型的功能可見性使用戶能夠立即清楚地看到在設計界面中能干什么。例如當我們使用音樂類軟件，最常使用的就是播放/暫停，上一曲/下一曲。我們就會尋找去這些圖標。其次是分享、收藏、下載、評論等功能需要用到的功能展示在頁面中，這就是功能可見性。
當信息或者列表過多時區分狀態的展示，將重要的狀態信息呈現在盡可能高的信息層級當中。如iOS信息和QQ郵箱中區分未讀信息的微標。如果將這些徽標隱藏起來，會極大地破壞易用性，因為人們將不得不進入一個個郵件詳情頁當中進行確認，才能獲取到原本由徽標提供的狀態信息，這樣的互動非常低效且乏味。
當用戶在執行某項任務的時候應該清晰明了的告知用戶目前在什么步驟，后面還有多少步驟，完整清晰的流程展示。如果將這些信息隱藏起來，用戶會困惑當前進行到哪一步，接下來還有多少步驟。
強調需要明確的視覺線索向用戶展示產品可以做什么。例如用戶界面中的交互元素（如滾動條、命令按鈕和圖標等）的設計必須能夠為用戶提供足夠清楚的建議，讓用戶可以清晰地辨別出這些元素所代表的意思是什么、它們的功能是什么，以及如何與它們進行交互行為（點擊、長按、滑動 等）
給用戶及時、恰當的反饋，是體驗設計中非常重要的一項原則；對每個用戶的操作都應該有恰當的系統反饋（包含視覺、聽覺、觸覺）。
明確告知用戶當前操作發生了什么。如點擊下載和下載過程給出相對應的反饋及進度條。
當用戶產生某個動作時，給予相對應的連接反饋。如大概用戶點擊某個按鈕時，按鈕默認的外觀與點擊后的外觀發生變化，結合現實世界的開關去思考（按下 開燈）動作與反饋是連接的，即時的。
希克定律，是1951年由威廉·埃德蒙·希克首先提出的，認為人們從數組中選擇目標的時間取決于可用選項的數量。也就是當一個人所面臨的選擇越多，做出選擇所花的時間就越多，當面臨選擇的數量增加，做出決定的時間也會跟著增加。
如京東篩選，在搜索結果頁會將篩選條件收起，因為里面的篩選條件內容過多。用戶會在當前頁面選擇的時間增加.將一些項目分組放入二級下單，并且做好歸類，用戶能夠更迅速的作出決定。
費茨定律，是1954 年 由保羅.菲茨首次提出，在人機交互中指的是通過圖形用戶界面使用鼠標或其他類型的指針從一個起始位置移動到一個最終目的所需的時間。
T：代表完成移動所需的平均時間
A：代表光標開始/停止時間
B：代表光標移動速度
D：代表從起點到目標中心的距離
W：代表目標的尺寸
簡單來說就是指：隨著目標的距離增加，移動到目標的時間更長，并且隨著目標的尺寸減小，選擇目標的時間也會增加。
所以在界面設計當中會遵循越重要的功能，占據面基會越大。重要圖標的點擊熱區也會增大。便于用戶快速點擊。
屏幕外邊緣和四個角部比屏幕中的其他位置都更容易被定為和選中，所以我們在進行產品設計的過程中，會將常用/重要的操作放置在屏幕邊緣處，便于用戶操作。
神奇數字7±2法則是1956年由 喬治·米勒 所提出的，根據喬治·米勒的研究，人類短期的記憶一般一次只能記住5-9個。也就是為什么大多數APP底部導航為5個的原因。
由于人類的大腦處理信息的能力有限，大腦會將復雜信息劃分成 塊 和小的單元。如：京東和每日優鮮的分類處理。
人類短期的記憶一般一次只能記住5-9個，所以人們總是傾向于把一串數字拆分為多個較短的部分進行記憶。如銀行卡號和手機號碼等。
復雜守恒定律是1984年由 拉里·泰斯勒 所提出的，也稱作泰斯勒定律。認為每一個產品設計的過程中，都有其固有的復雜性，存在著一個臨界點，超過了這個點產品設計的過程就不能再簡化了，你只能將固有的復雜性從一個地方轉移到另外一個地方。
在產品設計中，會盡量的簡化界面。當功能過多時進行一個整合的處理，跳轉或者滑動操作。如查看更多或者常見的漢堡導航。
新鄉重夫認為遺忘有兩種：一種是疏漏，另一種是忘卻。他建議采用一些措施來預防產品的缺陷。
防錯原則認為大部分的意外都是由設計的疏忽，而不是人為操作疏忽。因此，在設計中要有必要的防錯機制；比如常見的信息輸入狀態，未輸入置灰不可點，輸入變為可點擊狀態。
微信拍一拍：微信在出了拍一拍功能之后，很多時候點擊頭像的時候會不小心拍到別人，現在的拍一拍是可以撤銷的，在客戶端鼠標懸浮上就可以進行撤回，移動端長按出現撤回彈窗，兩分鐘內有效。
微信朋友圈動態：點擊返回圖標會出現的彈窗，避免誤操作。利用防錯原則，可以避免用戶重新編輯。微信當中有很多友好的體驗細節?？梢远喽嗳ジ惺堋?
奧卡姆剃刀 定律 ：它是由14世紀英格蘭的邏輯學家、圣方濟各會修士奧卡姆的威廉 （William of Occam，約1285年至1349年）提出。 這個 原理 稱為“如無必要，勿增實體 ”，即“ 簡單有效原理 ”
不必要的元素會降低設計的效率，不管是實體、視覺或者認知上，多余的設計元素，有可能造成失敗或者其它問題。這并不意味著不能提供給用戶很多的信息，可以用「更多信息」來實現。如夸克瀏覽器，首頁只放置重要功能 搜索 和幾個整合內容的圖標入口。
讓用戶通過較少的點擊就能找到他們想要的東西或使用功能。如音樂類軟件，在播放音樂之后進入其他的tab，在上面都會懸浮播放/暫停的區域。都能夠隨時操作。
就是產品的易用性，如果年紀大點的人，也能夠輕松使用所設計的產品那么是成功的。如抖音沉浸式的體驗，簡單的滑動就能夠觀看想看的內容。目前抖音的用戶老年人也逐漸包含在內，并且抖音會根據用戶的停留時長等推送用戶感興趣的內容。
頁面的使用率，當你想要在一屏新增很多內容時，頁面的布局就會變得擁擠和區域變小，容易過于干擾用戶做出選擇，重要功能不夠突出等?？淇藶g覽器首頁強化了搜索功能 和幾個整合內容的圖標入口；uc瀏覽器首頁內容過多，當用戶想要使用搜索功能時很容易被其他內容干擾。
前面說到的?？硕烧f到，當選擇的數量越多，用戶做決定的時間就更長。做過多的決定也是一種壓力，在展示內容的時候要努力減少用戶的思維負擔。如攜程和馬蜂窩金剛區的內容展示，馬蜂窩根據產品屬性放置了6個重要的功能入口，便于用戶更快的去選擇所想要的功能。
最后我們來探討一下設計和藝術的區別是什么。我看到一句話覺得挺好的。設計和藝術的重要區別是：藝術拋出問題，而設計解決問題。
我們設想一個場景，當你在藝術展廳站在一副名畫面前，你所思考的是什么？是驚嘆畫家的畫技還是整個畫面給你的感覺是一種故事，你會不會思考藝術家在作畫時的心情，處境，為什么要這么去畫？想表達怎么樣的情感？
然后我們再設想一個場景，同樣在藝術展廳，你身上帶有手機和相機。你會選擇用相機拍照還是用手機。答案是 相機 對吧？因為相機的拍照效果在任何環境下都會比手機好。這就是設計。是能夠真真切切的解決用戶問題的。能夠去感知到的。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
一、馬蜂窩 — 人性化設計識別文章地點
二、微博 — 社區游戲化設計提升互動率
三、QQ — 通過手勢消除未讀消息
四、最右 — 情感化設計保護用戶隱私
五、抖音 — 深夜提醒貼心的功能
六、網易音樂 — 把分享游戲化
七、QQ音樂 — 歌詞沉浸式體驗
八、盯潮 — 趣味性banner輪播，增加用戶點擊
在馬蜂窩任意文章中，如果出現地區則可以通過當前頁面對地區進行提取
減少用戶操作路徑，降低產品使用成本
日常在各個平臺瀏覽文章時大家都會遇到在文章內會出現一些如地名、人名、物品等相關名詞，此時如果對名詞感興趣則需要切換場景去進行搜索，而馬蜂窩在這方面深入洞察到用戶痛點，基于旅游社交產品背景下在添加地點直達（包含多個地點）功能，解決了對景點感興趣的用戶使用體驗。
根據馬蜂窩這個人性化功能，是否可以在不同的產品內進行應用，如在一些游戲社區中所提到的虛擬裝備、道具等物品添加彈窗簡要說明，幫助新手玩家快速理解玩法、功用等
在微博動態詳情中進行長按點贊觸發動畫
通過游戲化點贊玩法激勵用戶進行互動，提升互動率
打破傳統點贊動畫，微博設計動效采用大膽創新的全屏動畫并搭配上散發的微表情，在長按與連點兩種手勢下動效規律不同，消除用戶枯燥感，微博作為國內最大社交平臺，頁面展示上已經形成用戶深刻認知，在不影響基本風格上進行彩蛋設計有效的提成用戶互動率
在qq聊天頁面中對底部消息氣泡進行拖動，消除所有未讀消息
提升用戶操作效率和使用體驗
qq作為社交工具，每位用戶都會添加大量人、群以及關注各種推送，在這種場景下用戶每條消息都去操作需要花費大量時間，QQ把傳統的消息已讀以一種簡單的交互手勢作為代替，相對全部已讀在操作上更佳便捷
通過qq的這個交互細節，在其他產品場景中同樣適用，如一些音樂、電臺相關的產品在離開播放頁面后播放狀態會懸浮在頁面之上，如果關閉的話則需要點擊暫停或者進入詳情后關閉，也可以考慮使用拖動手勢進行關閉
在最右登錄頁面輸入密碼時ip形象會出現捂眼睛動作
強化用戶隱私和心理信任感
日常在使用一些敏感性操作時我們都會注重隱私，如一些表單的填寫、密碼輸入等相關操作，最右在登錄頁面使用到了ip形象的動作去向用戶傳遞心理上的暗示，這種手法很好的把品牌曝光與體驗相結合
長時間刷抖音時會系統會提示，在深夜使用時會支持設置提醒時間
防止用戶疲勞使用產品，定時緩解注意力
在使用抖音時大家可能會經常深陷其中無法自拔，往往忽略了時間影響身體健康，提醒機制則在深夜不同時間段進行間接提示，雖然在用戶體驗中不提倡打擾用戶，但在短視頻這個場景下如果過渡沉浸便會造成反向影響
在網易音樂對某首音樂進行分享時可以對音樂進行個性化定制，對歌曲進行編輯添加文字、圖片、語音等以視頻方式呈現
把分享以一種偏游戲化的形式呈現，提升用戶分享率
傳統分享基本是直接讓用戶分享到第三方平臺，而網易音樂這個設計把分享場景進行多元化處理，以定制音樂罐子為切入點，用戶自由編輯個性化處理裝進罐子進行分享，是一種視頻剪輯融合音樂的一種新玩法，破圈傳統枯燥的分享場景，提升用戶分享率
在音樂歌詞頁面中可以支持設置歌詞主題
新穎的呈現手段，強化用戶沉浸式聽歌
傳統的音樂產品在詳情頁面展示了一屏歌曲歌詞，面對大量的文字用戶在尋找某段歌詞時效率不是很高，對大量的字段也極為枯燥，而qq音樂使用了創新的展現形式，把手機主題概念融入歌詞中達到新的視覺體驗，根據不同的主題對應的動畫也不同，大大的提高了用戶的視聽體驗
在盯潮首頁banner處對其進行拖動甩出
通過交互玩法提升用戶對banner的點擊
banner在頁面通常點擊率較低，用戶會默認為廣告，在盯潮內滑動banner時會發現banner可以進行拖動，并且松開時會自由掉多，把傳統的banner切換做出了可玩性更高的效果，同時這個設計手段也能吸引用戶注意力引導用戶對banner進行點擊
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
具有大量庫存商品，或是涉及復雜產品的網站，通常會提供產品類別頁面，或者是產品列表頁面。 類別頁面就像是特定產品類別的主頁。他們可能不提供完整的產品列表，但可能會展示一些產品并提供產品子類別的鏈接。這種頁面本質上是用戶在進入產品列表頁面的過程中經過的一個中間步驟，讓用戶不用一下子面對海量的分類信息。
Eddie Bauer 在其全局導航中， WOMEN 鏈接將用戶帶到了這個傳統的類別頁面。這些頁面通常包含產品照片和營銷內容，以及促銷子類別（例如SHOP FLANNEL 和 SHOP FLEECE ）的鏈接。
類別頁面通常提供以下組合：
并非所有產品都需要專門的類別頁面。 不過這種情況有時候會讓用戶非常惱火，因為用戶需要通過額外的步驟才能查看特定類別的產品。
許多網站完全省略了類別頁面，而是將用戶直接引導到產品列表頁面，在那里他們可以借助過濾篩選的方式來瀏覽產品。
Bonobos 網站上的 Pants & Jeans 鏈接不是類別頁面，而是將用戶直接帶到產品的列表頁面。這種方法通常效果很好，因為它盡快向客戶展示了他們可選的選擇。
雖然本文偏向于電商網站中的類別頁面的探討，但實際上這些頁面也用于其他類型的網站，特別是新聞資訊和教育類的網站。這些建議也可能適用于這些情況，但最好根據領域對你的設計進行測試，以防你的用戶需求與購物型用戶的需求不同。
如果您的電商網站所涉及的產品非常復雜，以至于您的許多客戶需要經過學習之后才會使用，才能正確地過濾和比較產品，那么類別頁面就是一個好主意了 。此外，具有 大類別和大量子類別的網站，有時會提供某種類型的獨立類別頁面，以幫助用戶找到有意義的起點。
不過，你可以決定讓特定的產品具有類別頁面，而其他的則不具有獨立的類別頁面。例如，Lululemon 主打的健身服裝產品（大多不需要分類頁面），同時也銷售一種名為 MIRROR 的昂貴的家庭健身產品，后者需要更詳細的解釋，因此有自己的分類頁面。
Lululemon 為其復雜的家庭健身產品 MIRROR 提供了一個單獨的類別頁面，但并未為其所有產品類別使用類別頁面。
類別頁面可以對電子產品等復雜產品起到解釋作用 。如果用戶還不了解產品選項，他們可能還沒有準備好單擊單個產品。與隨機點擊不同的產品相比，類別頁面為他們提供了一種更有效地了解各種潛在相關產品功能的途徑。
例如，智能手表通常會有不同的功能和價格范圍，著名智能手表品牌 Fossil 在自己的網站提供了一個類別頁面，列出了不同類型的智能手表，并提供「立即購買」、「了解更多」 以及「比較」的選項。
Fossil 的 智能手表分類頁面解釋了不同型號的智能手表的功能和性能差異
購物型用戶可能不需要通過網站來學習服裝或食品等熟悉商品的內容和知識。然而，一個擁有大量產品和內容，并組織成許多子類別的網站，仍然可以從類別頁面中受益——尤其當子類別頁面可以通過獨特的圖文清楚地介紹產品的時候。這比一長串標簽文本更容易方便用戶了解產品，此外它還可以為國外的購物者提供幫助。
REI 銷售用于各種戶外活動的許多產品，從皮劃艇到登山用具。如果點擊網站的全局導航中Camp & Hike 鏈接之后，頁面跳轉到一個包含所有露營產品的列表面，用戶可能會不知所措，而且無趣。相反，REI 讓鏈接指向到一個傳統的類別頁面，而不是列表，這個頁面包括：
REI 使用傳統的類別頁面來幫助購物者在龐大的 Camp & Hike 類別中找到適合自己的產品。
如果你的網站確實提供了傳統的類別頁面，請同樣為用戶提供了避免進入這些頁面的簡單方法，并在他們愿意時，也能直接轉到產品列表頁面。為你的站點的全局導航，提供指向子類別產品的列表頁面（比如使用超大導航 Megamenu ），以及指向傳統類別頁面的鏈接。
可能還需要確保搜索結果始終指向產品選項，而不是將購物者引導到類別頁面。在我們的研究中，Zappos 會將某些搜索結果指向到以品牌為中心的類別頁面，而不是鏈接到該品牌的產品。
在用戶測試的時候，一位參與者看到孩子后很生氣，因為搜索她最喜歡的品牌 Sam Edelman 時，她進入了一個具有促銷感的傳統類別頁面，而不是指向她要的產品。對她來說，這感覺像是一個不必要的額外步驟。
「當我進入 Sam Edelman 時，我想看到結果。我不希望打開一個品牌的分類頁面?！?
當用戶在 Zappos.com 上搜索「sam edelman」時，她很惱火地看到一個沒有列出任何單個產品的品牌類別頁面。
當用戶搜索時，他們希望立即看到結果。
為了避免傳統的類別頁面的缺陷，并提供對產品列表的快速訪問，許多電商網站現在在主產品列表頁面中，結合混用了少量的類別有頁面的設計——例如簡短的描述性內容，或簡短的子類別菜單。
在女士緊身褲 產品列表頁面上，Lululemon 包含了一些傳統會在類別頁面上顯示的元素：營銷內容（藍綠色框標注的區域）和對不同緊身褲樣式的解釋，以及指向這些子類別的鏈接（以黃色框標注的區域）。
這種混合呈現方法效果很好，因為對描述或子類別菜單感興趣的用戶可以暫停并閱讀它，而不感興趣的用戶可以簡單地跳過，直接快速訪問實際的產品列表。
一些電商網站在 產品 Banner 旁邊加入營銷的內容和元素，這些元素傳達有用的信息而不會減慢用戶的速度，就像傳統的類別頁面一樣。
高級珠寶零售商 VRAI 使用混合式設計，在一些產品列表頁面中包含類別頁面樣式元素。它的一個產品列表頁面當中，圓形訂婚戒指頁面中，包含了帶有價格的產品列表，以及解釋性的內容。頂部的文字描述了此類產品的一般特征。側面板提供了有關該類別中所有產品共有特征的說明，以及更多詳細信息。
在這個列表頁面中，VRAI 包含了促銷內容（以藍綠色框標注）和說明性內容（以黃色框標注）。其中所呈現的圖文內容是典型的傳統類別頁面的特征（沒有產品列表）。
一些零售類的網站不使用類別頁面，而是提供指向產品列表頁面上的子類別的導航鏈接。這些鏈接（這是最初發明類別頁面的原因之一）讓用戶輕松瀏覽網站的產品庫存。
例如，Ann Taylor 的 褲子 列表頁面顯示了不同款式褲子的類別，并提供指向該子類別的鏈接。這些內容直接顯示在產品列表上方，幫助用戶了解可用類別項目，并且直接導航到這些類別。
Ann Taylor 的網站在 褲子 的列表頁面的頂部，加入了不同褲子款式和合身度的說明和圖片，以便用戶了解其中的差異。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
老齡化社會已經到來，如何讓中老年群體更好地使用互聯網產品是當今的熱門話題。貓眼演出設計團隊負責的一個 B 端項目的使用人群需覆蓋到中老年用戶，也屬于適老化的涵蓋范疇。
在前期調研和設計環節中，我們收集了一些相關的文獻及案例，并且結合項目實踐有所思考和沉淀，在這里與大家分享。
世界衛生組織根據現代人生命狀況，提出了人生階段年齡的新劃分。45~59 歲為中年人；60~74 歲為年輕老年人；75~89 歲為老年人；90 歲以上為長壽老人。[1]
隨著年齡的增長，人們的身體機能、心理狀態、認知能力等都會出現衰退的情況。
適老化設計是無障礙設計中的一種。無障礙設計于 1974 年由聯合國組織提出，設計中需要充分考慮具有不同程度生理傷殘缺陷者和正?；顒幽芰λネ苏撸ㄈ鐨埣踩恕⒗夏耆耍┑氖褂眯枨?。[2]
目前互聯網產品中大多數的適老化設計，主要是集中在 C 端。針對不同障礙（視覺、肢體、聽覺、認知障礙）[3]，目前普適的適老化設計原則有：
1. “強烈“好于“柔和”
針對視覺障礙，常見做法有增大字體大小，使用非襯線體字體，提高顏色對比度等。
相比原版的 App，百度大字版 App 和支付寶長輩模式修改了 UI 界面，每個功能模塊都用了明亮的大色塊、加大字體的設計。
2. 善用“輔助”和“替代”
針對聽覺障礙，常見的做法有通過視覺輔助，將聲音轉化成文字、擴大音量、降低語速等。
Google 安卓系統推出了 Live Caption 功能，可自動將手機上播放的內容轉換成字幕。Live Transcribe-「Sound Notification 聲音通知」功能，可識別特定聲音（比如煙霧警報器、嬰兒啼哭、敲門聲等），并轉化成文字及視覺符號推送至手機，方便聽障用戶辨別生活當中一些重要的聲音信號。
3. “點擊”好于“滑動”
針對肢體障礙，減少頁面信息的密度，避免使用過小的按鈕以及復雜的交互手勢。
有研究表明，老年群體在操作時難以瞄準物體，在瀏覽圖片時，由于視力衰退導致無法對焦，他們會不斷地用兩只手指放大/縮小并反復點擊屏幕。[4]
平安銀行 App 關懷模式采用卡片拼接的設計方式，將間距放大，保證每個信息有更大的展示空間，同時也放大按鈕點擊熱區，提高操作的準確率。
4. “具象”好于“抽象”
針對認知障礙，避免使用不易識別的圖標，盡可能配有圖標或圖片，簡化信息內容。
有研究表明，文字+圖標為主的設計有助于提升老年新手用戶對新 ATM 使用的學習效率和記憶。[5]
滴滴 App 關懷模式針對老年人進行功能精簡，滿足高優先級核心訴求，首頁只放「一鍵打車」，操作簡單，大字、無廣告。
在很多行業中，中老年人因為擁有豐富的經驗在崗位上更具競爭優勢，譬如教師、醫生、律師、會計等職業，工作年限長、經驗足是優勢，可以提供更好的服務。他們既會使用 C 端產品，也有使用 B 端產品的場景。
隨著時代變遷，2015 年世界衛生組織提出了“健康老齡化”理念[6]，倡導改變過去“老了就要退出社會生活”的消極認識。
從“老有所依”到“老有所為”，很多的 B 端場景都覆蓋了中老年用戶，如何提升中老年用戶的辦公用戶體驗是重要課題。
另外我們看下 C 端與 B 端的主要差別：
C 端 App 中時常將簡單作為適老設計宣傳點。追求簡單有一部分原因是，C 端用戶是在自己的場域操作且幾乎無時間壓力。而 B 端產品卻相反，業務邏輯復雜，用戶要長時間使用而且要求效率。B 端面向企業定制化，針對特定人群、情景，使得在適老化設計中要解決的問題更清晰。
留意生活中的零售行業，如餐廳、商場、藥局、便利店的服務人員，往往能看到中老年人的身影。
POS 系統是 B 端場景中使用率最高的產品之一，POS 系統的英文全名為 Point of Sale，中文名為銷售時點信息系統。[7]它由硬件與軟件組成，根據產業和店面類型的不同，會有功能上的差異。
最近團隊參與了一個改造 POS 系統的項目，使用人群覆蓋到了中老年用戶，提升他們的辦公用戶體驗是其中一個產品目標。
本次項目主要是 POS 界面的更新，完整的 POS 體驗不僅有軟件本身，有更大的部分在于實體環境與設備，例如：結賬區的控件、店面的擺設、掃描槍，讀卡器等，而 POS 界面是連結上述元素的節點。
在對 POS 系統進行改造時，我們是按照以下設計思路進行的：
第 1 步:沿用舊系統規則與結構
B 端系統背后往往由成熟的業務場景和復雜的業務邏輯構成。B 端系統往往不是一個從 0-1 全新的系統，而是存在一個被使用了很多年的系統。
在這種情況下，企業服務的每個用戶都是趨向于規避風險的。人們可能已經習慣了原有的解決方案（盡管不好用，但是大家都會用了），但新的方案如果不好用，他們的生產力反而會因為不知道如何使用新方案而降低。
這就意味著在做 B 端設計時，現行的方案會產生很大的習慣引力。
當設計師要引入一個新方案時，取消或改變某些功能及操作行為將有難度，不能霸道性更改，取代需要合理性。
設計思路：
第 2 步：理清主要用戶與使用場景
想要了解使用者的真實痛點，需從場景出發。
第 3 步:用適老化設計原則去解決場景中的問題
POS 使用場景有很多，這里列舉 3 個常見的使用情境：
可能存在的障礙：無法聚焦信息內容，難做到邊看屏幕邊與顧客交流。
設計目標：確保信息在復雜的環境中，信息內容清晰可讀。
設計思路：
1. 放大信息內容
服務至上，POS 使用者在工作時需保持端莊熱情的姿態，不能只專注看 POS 屏幕信息而不顧顧客。
內容大小的確立由設備分辨率、環境燈光、字體、視距等因素決定，在復雜的現場環境中，信息內容要清晰易讀。
2. 色彩對比度符合 WCAG 標準
參照 WCAG 有 AA 和 AAA 的對比度標準，界面中的信息與其背景間的關系對比度至少在 4.5:1 之上，保證信息易讀性。
WCAG 全稱是 Web Content Accessibility Guidlines(網頁內容無障礙指南)。這是一套由無障礙功能專家編輯的指南，有若干國家在其網絡無障礙功能法律要求中明令必須使用這些指南。[8]
一些設計插件可以幫助我們檢驗色彩對比度是否符合 WCAG 標準，給大家推薦 2 款：Sketch 插件 Cluse，Figma 插件 A11y-Color Contast Checker。
3. 設計有意義的動畫
通過動效來表達靜態視覺效果無法準確傳達的信息，如反饋、引導下一步、狀態表達等。好的動效與視覺設計是互補而成系統的。
比如用動畫來展示商品被加進購物車的狀態，引導下一步操作。
4. 加大點擊熱區
提高使用者點擊操作的準確率和速度。
5. 一屏策略
在這次的項目中存在一個場景，除了銷售端服務員看到的屏幕，顧客也會有一個客顯屏，即服務人員看到的界面，顧客也會看到。
對于頁面信息框架以及布局盡量“一屏”展示，確保雙方的視線和注意力一致，便于溝通交流。但這時會有挑戰：字放大、按鈕放大，信息和功能在一屏上怎么放得下？
解決思路：
可能存在的障礙：在顧客的“催促”下，使用者也會著急，對事物表現出茫然的情緒，定位當前位置困難。
設計目標：追求信息的有效表達和操作的直覺性與效率。
設計思路：
1. 避免使用不易識別的圖標
B 端系統中會有些功能很難用一個圖標去表達其含義，此時文字+圖標按鈕優于純圖標按鈕，能幫助 POS 使用者更好地理解語意并做出操作。
2. 信息的呈現符合用戶眼動規律，操作軌跡越短越好
可運用古騰堡圖表法 Diagonal Balance，它由 14 世紀西方活字印刷術的發明人約翰·古騰堡提出。他發現人們視覺閱讀規律，左上角是視覺第一落點區，右下角是視覺最終落點區，右上角和左下角都是一個視覺落盲點，大多數情況容易被忽略。
在進行信息排布時，可根據用戶習慣性的眼動規律，將最重要的信息放在左上角，右上角和左下角添加輔助元素，右下角作為整個視覺落點可以展示重要操作。
可能存在的障礙：百忙之中，應變能力下降，容易發生誤操作的情況。
設計目標：預防不當行為，提升容錯率，反饋要及時有效且清晰。
設計思路：
1. 通過二次確認避免誤操作
在產品設計時，要把各種可能性考慮進去，通過模態對話框讓用戶二次確認來避免誤操作行為。
當有重要操作時需告知用戶處理結果，狀態反饋信息采用的顏色需要遵守用戶對色彩的基本認知，如紅色代表警示，黃色代表警告、綠色代表成功等。
上述舉例的設計原則是啟發但不是限制，每個設計提案最后都要經過用戶調研，看是否符合使用者的使用習慣，是否真能解決業務與工作中的痛點。
附上總結圖：
其實設計到后面會發現，起初為了方便中老年用戶使用 POS 運用的設計原則，最終都能給多數人帶來很大便利。
這是因為我們每個人在某些時候都會遇到各種臨時的無障礙需求。
適老化設計，不僅僅只是為中老年群體做設計，更是一種新的設計思維方式，去挖掘更多普適的場景痛點，來指導我們做方案設計。
市面上很多適老化設計方法為 B 端產品提供了借鑒，但 B 端產品不能為了適老而適老，理清相關工作情境和要解決的問題很重要；不能霸道性更改，取代需要合理性，因為 B 端產品現行的方案會產生很大的習慣引力。
以上是近期對 B 端引入適老化設計的一些思考和沉淀，是開始，也將繼續，適老化設計還有很多值得深究和驗證的內容。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在 2020 年，疫情最為嚴峻的時候，B 端這一領域得到了前所未有的關注，而那時，身為 B 端用戶體驗設計師的我，也曾總結過，當時 B 端設計的諸多趨勢，比如：
多端需求：即桌面端、平板端、移動端的設計形式
設計中臺：擁有更為統一的設計平臺，與這兩年討論較多的設計資產相同，都是起到快速協作的作用
隨著 2022 年的到來，B 端行業又會迎來哪些新的機會？今天我們就從整個的 B 端入手，回顧一下 2021 年的設計形式，展望一下 2022 年的設計趨勢。當然趨勢完全是我自己個人主觀理解，僅供參考，如有異議，以你為準~
完整的趨勢，我們會分為視覺趨勢與產品趨勢：
雖然 3D 化的視覺風格早已到來，但是在 B 端市場上，3D 風格在此之前依舊表現的十分克制。隨著 C4D、Blender 這些 3D 建模軟件的不斷普及，再加上互聯網上關于 3D 建模教程的增多，你會發現 3D 風格的視覺表現，是一個 B 端視覺設計師的基本要求。
而 3D 風格用在 B 端軟件當中，會有兩個使用場景：
圖標
因為在 B 端產品當中，圖標本身就是非常難以去表現，比如“物聯網，大數據”，許多抽象詞匯很難通過一個具象的事物進行表達，而在企業官網當中，在視覺表現上的要求又十分的高。因此你會發現，在視覺風格上的選擇，往往只有 3D 圖標 + 插畫這一條路。
并且 3D 圖標的使用場景不會太過于局限，也可以用于產品的工作臺、運營營銷工具箱等頁面，因此 3D 圖標的出現，它的應用場景也會相比之前要更加的廣闊。
可視化大屏
大屏設計也在不斷的“內卷”，因為傳統的 2D 可視化大屏所搭建出來的大屏已經滿足不了企業的野心， 像 DataV 騰訊云圖 ，大家都在朝著 3D 風格，炫酷的方向進行延展，因此也就會導致 3D 的視覺風格需求激增，而 3D 建模仿佛就是大勢所趨。
雖然新擬態是在前兩年的產物。這個設計風格背后，遭到了很多設計師的質疑與排擠。但是隨著這個風格的不斷成熟，感覺它在 B 端視覺領域（特指的是官網 ），是非常受歡迎的，因為整體的風格，與官網的設計形式趨同。
同時作為 B 端產品的官網，其實是更需要新擬態這種風格。因為電腦場景下鼠標光標對頁面進行 Hover 操作給出的真實反饋，而使用了新擬態的官網按鈕，給你的反饋非常真實。
這里安利一下騰訊云的首頁官網，大家就會發現在設計風格上大量的采取了新擬態元素，并且配合 3D 風格的圖標，以及毛玻璃材質的設計，讓它的設計瞬間加分不少。
在去年，設計系統迎來了一波發展的高峰期，隨著字節、騰訊，三大設計系統（Arco Design、TDesign、Semi Design）的開源，其實是給我們很多 B 端設計初學者，有了更加完整仔細的 B 端入門教程。
清晰的講解了每一個組件的使用方式，以及注意事項，仔細閱讀這里面的內容，其實就是 B 端設計的入門學習。而未來，國內的環境，開源的系統也會越來越多，大家可以針對這幾大類不同的設計系統進行對比，或許會有一番收獲。
這里的超級 app 可能和大家潛意識里的支付寶、微信這些軟件不太一樣
在 B 端行業，隨著疫情的不斷擴散、再加上兩年時間的發展，很多 B 端產品的功能架構都出現了一個現象，產品的功能開始變得非常擁擠。因為 B 端軟件的核心價值其實就是靠著一個又一個功能去累積，也就意味著隨著 B 端產品的發展，功能模塊在不斷的累積，導致在設計層面，這樣的現象變得更加嚴峻。
你會發現左側的導航菜單已經完全沒有辦法裝下這些導航內容，而這一現象也反映在很多產品當中，比如我了解的飛書管理后臺、薪人薪事 等等諸多 B 端產品，它們在整個導航內容上，已經增加到一級導航 15+ 、二級導航 40+ ，這無疑會開始對設計師的能力造成巨大考驗。
面對這一情況，許多導航菜單都將會迎來前所未有的挑戰，最近也在深入研究導航菜單過多時的解決辦法，發現了一些新的導航菜單設計方法，有機會咱們重新梳理一下導航菜單的內容，將 B 端設計指南文章進行更新。
低代碼定制化
低代碼一直是我關注的一個領域，先給不明白低代碼的同學簡單科普一下。
低代碼，一種快速開發應用的軟件，將通用、可重復利用的代碼形成組件化的模塊，通過圖形化的界面來拖拽組件并形成應用。低代碼能夠實現只寫少量代碼或不寫代碼，類似用“樂高積木”的方式來開發。
在國外有很多著名的低代碼成功案例。Outsystems（國外非常出名的低代碼平臺）幫助施耐德電氣在 20 個月內推出了 60 款應用程序，開發過程加速了兩倍；在 2012 年即將推出 Model S 之際，特斯拉放棄了 SAP 的 ERP 產品（可以思考一下為什么），改用低代碼開發平臺 Mendix，用 25 個人四個月時間自建 ERP 系統。
去年，低代碼平臺，也有很多新產品面世，其中就包含：
因此你會發現，其實低代碼就是在解決一件事，圍繞著某一個業務場景，通過平臺的持續完善優化。讓所有的功能都能圍繞這個業務展開，其中包括：權限、時間軸、流程、表單、公式等等，能夠解決很多特殊的業務場景。而低代碼會涉及到設計思路上的轉變，以及低代碼編輯器的出現，如何去設計如此復雜的配置流程，如何讓用戶能夠快速上手，如果你能夠有比較完整的思路，這些都會成為我們設計的新機會。
行業細分
隨著互聯網市場的不斷發展，用戶會越來越關注產品在自己行業的應用，比如 CRM，其實只是一個籠統的稱呼，現在 CRM 市場又會分為 SCRM、運營 CRM，等諸多產品。
SaaS 類的平臺也出現了負責從虛擬主機和數據庫層面入手的 iPaaS 以及從應用和數據層面入手的 aPaaS。
即使是大家經常使用的 釘釘、企微、飛書，它們也在各自的領域有所擅長。
因為 B 端產品，在底層邏輯上是不能允許趨同的產品出現，如果你和別人的產品一樣，其實是沒有辦法在目前的市場上立足。因此你會發現，雖然產品形式都會比較相同，但是 B 端市場十分廣闊，大家都在去尋找自己產品的差異化。
當然市場是瞬息萬變的，這里也只是簡單聊聊我自己的看法，希望對你有所幫助。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
B 端產品主要是 Web 端產品，空間大、操作多，內容相對復雜。需要通過頁面布局或者視覺設計表達出明確的邏輯關系，從設計角度降低用戶的學習成本。而用戶有固定的認知規律。格式塔原理揭示了人類視覺的認知是整體的：我們的視覺系統自動對視覺輸入構建結構，并在神經系統層面上感知形狀、圖形和物體，而不是只看到互不相連的邊、線和區域。
格式塔主要包括 7 個基本原則：
今天我們就來總結下，格式塔原理在 B 端產品中是如何應用的？
我們先看 2 張截圖，分別是不同分辨率下的界面效果。
可以明顯的感覺到高分辨率下，菜單列間距離較大，菜單的歸屬關系很清晰。而低分辨率下，菜單間的距離變小，特別是后面兩列的菜單會給人混在一起的感覺。這就是格式塔原理中的接近性原則，距離近的關聯親密，距離遠的就各自獨立分組。
當我們想要傳達給用戶層級關系時，就需要善于利用接近性原則。例如表格上方的功能按鈕，通常我們將高頻、核心操作放置在左側，低頻、輔助功能放置在右側。通過增大元素間的距離，達到功能分區的目的。
相似性原則是通過顏色、尺寸、圖形等方面的共同屬性，實現信息的分組或者高可讀性。
例如在可視化圖表中，不同范圍值的指標采用不同的背景色。通過背景色的差異，將同一范圍內的數據形成視覺關聯，提高用戶對信息的識別效率。
通過圖形尺寸的相似性也可以構建內容分區。例如阿里云、騰訊云控制臺的首頁，都采用了雙列設計，左側主要以高頻的業務功能信息為主，右側是輔助運營信息。兩列尺寸寬度有明顯差異，用戶會將相同寬度的卡片歸為一組。這樣有助于用戶理解兩類卡片的內容差異，并有效地突出業務信息。
IBM、蘋果的 Logo 設計，無論是“用刀砍過”，還是被“偷咬了一口”，用戶仍然可以識別出完整圖形。這就是視覺閉合性原則的一種表現方式。
在 UI 設計中，則會通過對齊方式，形成虛擬空間。例如下圖中阿里云通過明顯的背景色、陰影等手法形成有形的內容空間。而微信公眾號則是平鋪背景色，內容區借助標題、卡片對齊形成視覺閉合空間，最終將頁面劃分為左側導航菜單和內容區兩個空間。視覺表現上更輕量化。
另外閉合性是需要元素之間相互輔助的，單獨的元素無法構建出閉合空間。以下圖為例，雖然四個小的卡片做了間距分割，但是由于界面整體上是橫向分割的。我們會將 4 個卡片看作是整體元素去理解和認知。
用戶更習慣于從左到右的橫掃閱讀，因此連續性主要體現在橫向空間中。
下圖中，雖然左側的標簽文字與右側的內容信息有較為明顯的間距，高度尺寸差距也比較大。但是用戶不會將內容看作是 4 個獨立的個體，而是理解為兩組信息。
在某些場景中，如果信息平均分布，不會產生連續性的視覺感知。
例如下圖指標監控中，指標都是采用小卡片，間距、尺寸較為統一。這種情況下用戶就很難對信息分組處理。在我看來這些指標只是一個個的視覺散點，沒有明確的視覺重點。用戶無法感知到內在的邏輯性。用戶想要找到某個指標時，需要逐個檢索，花費的成本更高。
通過上述很多圖片，我們可以看出頁面元素基本都是橫平豎直，中規中矩的元素和分割方式。或許有些單調乏味，但是勝在簡單，不會帶來額外的視覺噪點。
特別是 B 端產品，基本看不到異形的存在，甚至全圓角矩形都很少見到。即使有異形，也只是作為視覺表現元素存在于內容中，而不會作為空間的劃分邊界。
主體與背景原則最典型的應用就是蒙版彈窗。通過拉大主體與背景的差異性，凸顯彈窗信息。
當我們需要著重表現內容時，同樣適用于主體與背景原則。例如登錄界面的設計，會通過差異化的背景、陰影等方式，帶給用戶清晰的視覺層級，適當凸顯輸入框的主體地位。
而 B 端內容區是核心空間，基本都是采用純白背景，與頁面背景形成對比，從而占據信息的主體地位。
共同命運原則聽起來有點玄學，指的是相同運動特征的元素會被認為是同一組或者是具有相關性的內容。運動的元素在 B 端產品中應用很少，我沒有找到合適的案例解釋這個原理。
在移動端產品中有些應用案例。比如 iOS 系統中，桌面布局編輯態下抖動的圖標，可以與靜態不可編輯的內容形成隔離效果，視覺引導性更強。同樣今日頭條頻道編輯時，也采用了抖動效果。
雖然 B 端產品沒有 C 端色彩豐富，表現力上沒那么炫酷。但是兩者對信息傳達的要求是一樣的，要求和諧、有序、層次分明，輔助傳達內在的業務層信息。靈活地運用格式塔原理將對產品的體驗提升會有很大的幫助。
格式塔原理不僅限于視覺表現，產品經理或交互設計師在原型設計時，也要重視格式塔原理，輔助設計方案表達，提高團隊間的協作效率。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
