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