最近幾年以來，大家能看到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應用使用了各種數據表示的組合。
作者：彩云Sky 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
用戶本能地會對不平衡的設計感到厭煩，如何在畫面中創造一個有吸引力的平衡？是本篇文章要分享的內容。
Illustration: Outcrowd
平衡是一個作品中最重要的元素之一。平衡中的對稱關系能夠創造平衡與和諧，這種平衡狀態直觀上能夠讓用戶感到舒適。
人體是垂直對稱的，我們的視覺接收也與之相對應。我們喜歡物體在垂直軸上保持平衡，直覺上總是傾向于平衡一種力量與另一種力量。
Illustration: Outcrowd
在設計環境中，平衡是基于元素的視覺重量，而視覺重量是用戶對圖像的注意力范圍。如果畫面是平衡的，用戶會下意識地感到舒適。畫面平衡被認為是其元素在視覺上的比例安排。
如何讓一個頁面看起來平衡？
最常見的平衡例子就是使用對稱。
在潛意識層面上，對稱的視覺能讓人愉悅，能讓畫面看起來和諧有條理。對稱的平衡是通過在水平或垂直的中軸兩側均勻放置元素來創造的。也就是說，畫面中間假想線的兩邊實際上是彼此的鏡像。有些人認為對稱的平衡是無聊和可預測的，但它經受住了時間的考驗，到現在仍然是在頁面上創造舒適和穩健感覺的最好方法之一。
Illustration: Outcrowd
兩側重量不相同的元素構成具有不對稱平衡。
動態平衡通常會比靜態平衡更有設計感，讓畫面不至于呆板。在缺乏平衡的情況下，我們的目光會條件反射性地開始尋找平衡點，這是一個很好的機會，可以將注意力吸引到頁面上可能還沒被注意到的部分。頁面重點就應該放在這里——抓住用戶的注意力，就像產品的生命線一樣。
Landing page — Asian Cuisine
比如一般這樣去“配重”的元素會是一個按鈕或者標題。
重要信息（或者是行動按鈕）就是我們需要去配重的價值元素。
不對稱的現象越嚴重，用戶就越想找出其中的原因（檢查配重）。人們本能地比平時更仔細地研究這樣的畫面。然而，這里需要注意分寸，過于古怪的構圖并不總是能被很好的感知。
Illustration: Outcrowd
平衡中的另一種類型，特點是視覺元素從一個共同的中心點放射出來。徑向平衡在設計中不常用。它的優點是，注意力很容易找到并保持一個焦點——恰好就在它的中心，這通常是構圖中最引人注目的部分。
這是一種平衡中的混亂，就像 Jackson Pollock的畫作一樣。這樣的組成沒有突出的焦點，所有的元素都有同樣的視覺重量。沒有層次，乍一看，畫面就像視覺噪音，但所有元素又相互匹配，形成一個連貫的整體。
（彩云注：這是一種比較高階的設計平衡處理手法，用的好可以讓畫面非常具有設計感，但把握不好的話，就會非常凌亂。所以，我們平時能看到很多大師的作品看似一些簡單圖形的使用，但就是好看，輪到自己設計的時候就會發現，越簡單的設計似乎越難設計好。）
Illustration: Outcrowd
當談到構圖中的重量平衡時，他們經常將其與物理世界中的重量進行比較：重力、杠桿、重量和支點。我們的大腦和眼睛感知平衡的方式非常類似于力學定律。我們很容易把一幅畫想象成一個在某一點上平衡的平面，就像一個天平。如果我們在圖像的邊緣添加一個元素，它就會失去平衡，有必要修復它。元素是否是一組色調、顏色還是點并不重要，目標是找到圖像的視覺“重心”，即圖像的重心。
不幸的是，沒有精確的方法來確定一個物體的視覺質量。一般來說，設計師依賴于他們的直覺。不過，下面這些有用的觀察可能會有所幫助:
大小
大的物體總是更重
形狀
不規則形狀比規則形狀的元素輕
顏色
暖色比冷色重
色調
深色物體比淺色物體重
圖案
帶有圖案的元素顯得更重
3D
帶有紋理貼圖的元素顯得更重
內部復雜性
物體內部越復雜，視覺重量更大
填充空間關系
正形空間比負形空間更重
對重量的感知
照片中的啞鈴看起來會比一只鋼筆更重
當使用對稱時，作品看起來可以更加的專業和有科學性。其中，靜態對稱的作品顯得更加有專業精神和嚴肅的；而動態對稱的設計方法則能吸引用戶的興趣，表達出個性和創造力，能讓用戶集中注意力。
作者：彩云Sky 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
圖標是任何設計系統不可或缺的一部分。使用圖標的主要原因是幫助用戶快速理解想法，實現快速導航，解決語言障礙，最終提升用戶體驗。
圖標作為一種設計工具，在UI/UX和平面設計師中最受歡迎。這些微小的設計元素對每個人來說都是簡單易懂的，這些特征賦予了它們通用數字語言的地位。
在這篇文章中，我整理了10個簡單又重要的技巧幫你設計出更專業的圖標。
最小的圖標大小通常是12 x 12px。以這個尺寸為基礎，行業標準中大多數其他尺寸只是通過將之前的尺寸翻倍而產生的。
重要提示：當你設計圖標時，重要的是要按100%顯示的比例去設計，使圖標完美像素并放大像素塊查看準確性。
完美像素圖標在屏幕上能呈現尖銳和清晰的線條和形狀。如今，高分辨率顯示器和視網膜顯示器正變得越來越好，所以在不久的將來，對像素完美圖標的需求可能會減少。但就目前而言，讓你的圖標具有可伸縮性、響應性和適配更多設備是非常重要的。
1) 像素網格對齊.
使直線部分完全清晰，并增加曲線和邊角的清晰度。
2)完美角度
有角度的線更模糊。創建圖標的最佳角度是45°，因為形成一個角的像素彼此對稱。
3)邊緣清晰
直線必須占據其邊緣上最暗的4個像素。這樣線的邊緣看起來更清晰。
為了讓圖標看起來整潔一致，重要的是要記住線條寬度和間隙大小。這條規則我認為是必須遵循的:所有線條的寬度都是相同的。
理想情況下，線寬和間隙大小也應該相等。
然而，有時候你必須打破這個規則。當你需要解釋我們在日常生活中面對的一個具有非對稱模式的物體時，它就會發生。比如條形碼這個例子來說，我故意使圖標內的線寬和間隙大小不均勻，以表示條碼的特征。
在UI設計中，對象(包括圖標)的角半徑定義了項目的外觀和感覺。當我們說到一個集合中的多個對象時，規則很簡單：在正方形和圓角之間進行選擇，并對所有的圖標應用相同的屬性。
為什么它如此重要?一致性是UI/UX設計的關鍵原則。一個可用和用戶友好的設計總是提供一致的體驗。在下面的例子中，你可以看到打破這個原則是如何影響視覺感知的。
在電腦上看起來完美對齊和平衡的東西，在你的眼睛看來可能并不一樣。
當我們把大小相等的正方形和圓放在一起時，我們會有一種不對勁的感覺，圓似乎比正方形小。為了使我們的形狀在尺寸上看起來相同，我們應該使圓更大(或減少正方形的尺寸)。
這個原則也適用于圖標的設計和使用。有些圖標的一側可能較重。試著調整它們一兩個點，直到整體對齊看起來正確。在下面的例子中，你可以看到突出顯示的圖標看起來很大，盡管它與其他部分的大小相同。為了平衡這個集合，我們需要通過縮小圖標的大小來調整突出顯示的圖標。
（彩云注：這個原則很多人應該都知道，但我發現也是在整套圖標的設計中最容易出現的問題，當把圖標匯總在一起的時候，這個問題尤其需要重視。）
我們經常在設計軟件中使用中心對齊，這種方法沒有錯。但當涉及到細節時，比如圖標設計，我們需要相信自己的眼睛，打破數學法則，以增強元素的平衡。
讓我們以播放按鈕作為展示。這個例子很簡單，但非常能說明問題，因為形狀越不對稱，需要改進的缺陷就越明顯。
我打賭你已經猜到我們指的是KISS原則。這一原則背后的思想是，大多數系統在保持簡單的情況下工作得最好。用戶越容易理解某樣東西并與之互動，它就越具有通用性。
（彩云注：KISS原則是“Keep It Stupid Simple”或者“Keep It Simple, Stupid”的縮寫。篇幅有限，彩云幫大家找了一篇參考文獻https://www.jianshu.com/p/7d58b96d0185#comments ，感興趣的可以去學習下。）
它如何適用于圖標設計?
1）別使用文字
文本和圖標的綁定減少了圖標的通用性。此外，小尺寸的文本是可讀性很差。如果一定要文本作為支持元素，使用工具提示和圖標旁邊的標簽。
2）不要過度設計
不必要的復雜性阻礙了合理的表達，應該避免。過載的設計會將用戶體驗變成一場噩夢。
3）避免不必要的元素
只要確保每個圖標在整體環境中是可理解和清晰的就行。（彩云注：比如已經是在郵件客戶端中，就不需要再額外增加表示郵件的圖標部分）
重要提示：在圖標設計中合理地使用KISS原則，也不要把事情做得太簡單，否則會影響功能。一個優秀的圖標應清晰易懂。
圖標規范框架通常是指組合在一起的圓形、正方形、縱向和橫向矩形。它們創建了一個框架來設計圖標。但是，這個規則非常靈活，只是作為參考，方便圖標的設計在視覺上平衡。所以，如果你覺得你的圖標不完全匹配這個框框，但看起來完全正確——相信你的眼睛！
框架是設計的“容器”?？蚣芤幏读艘粋€統一的范圍來設計圖標，這背后有一些原因：
1) 大小
由于其幾何形狀，所有圖標都具有不同的高度和寬度。為了在我們的設計中統一圖標尺寸，我們應該將它們放置在大小始終相同的框架中。
2)輸出
框架內的圖標與視覺中心對齊，這經常被開發人員忽略，因為他們經常根據實際的中心來調整圖標，而沒有注意到差異。這就是為什么用框架輸出圖標是至關重要的，當你按這個框架輸出圖標時，能保證視覺設計時想要的視覺中心。
3)效率
如果使用Figma，可以通過創建組件來節省時間?？梢允褂脤嵗焖俚貙⒁粋€圖標替換為另一個圖標。
如果你要打算做圖標資源庫的話。要想到當設計師在庫中搜索圖標時，會遇到哪些挑戰?他們的痛點是什么?他們的需求是什么?要回答這些問題，請設身處地為用戶著想。
1）不要讓用戶思考
例如，如果他們不知道自己想要找到哪種花卉圖標，那么就讓他們看到一系列選擇:鮮花項鏈，室內花卉，植物商店等。
2）展示關聯圖標
例如，如果用戶想在相同的主題或類別中找到圖標，他們可以快速地檢查包含這個特定圖標的完整集合。
3）使用標簽
用戶可能很難找到合適的詞進行搜索，或者可能希望看到所有類似的補充選項，從中選擇最合適的。例如，當一個圖標的實際名稱是“蘭花花瓣”，你仍然可以找到它與以下關鍵詞: #蘭花#花瓣#花瓣#花#裝飾#花#植物#花園#開花#植物#自然#熱帶#樹枝#美麗#植物#美麗#自然#葉子#優雅#浪漫
最終應該導出SVG或PNG格式？這是一個關鍵問題。讓我們來比較一下格式:
我個人的選擇是使用SVG圖標，因為它可以節省很多時間。但是，一定要小心縮小復雜的形狀，并記住舊的瀏覽器可能不支持SVG格式。
作者：彩云Sky 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
在本文中，我們將發現：
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
作者：彩云Sky 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
菲茲定律由心理學家Paul Fitt于1954年提出，它是物理世界中人體運動的數學模型。這一定律提出之后，在很多領域都得到了應用，但是在人機交互領域的影響尤為深遠，可以說是人機交互領域的第一條定律，它通常被用來解釋鼠標（PC端）和手勢（移動端）在界面中的移動規律。這項定律尤其適合按鈕等可點擊、可選擇、可交互的元素，目的：易于查找和選擇。作為一個數學模型，菲茲定律是有表達式的，表達式如下：
T 是完成動作的時間a代表裝置開始結束的時間，b表示該裝置的速度，這些常數可從實測數據進行直線近似取得。D是起始位置到目標中心的距離。w是目標區域在運動維上的寬度。
結論： 離目標距離越近，所需的時間越短；目標尺寸越大，完成速度越快，時間就越短。也就是說，預測點擊一個目標的時間，取決于目標和當前位置的距離+目標的大小。
1 、放大可點擊元素的尺寸
大且近的目標元素讓用戶不需要做太精細的調整就可以輕易選中。小而遠的按鈕則意味著用戶要將鼠標/手指移動比較長的一段距離，并且再進行精細的調整才能選中，這樣不僅難以點擊、且需要花費更多的時間。
這里的大指按鈕的實際大小、也就是點擊熱區的大小，包含按鈕留白區域的大小。網頁設計里現在常見的設計方式就是大按鈕，四周大量留白； 而移動端設計里通常會擴展寬度，使用各種通欄按鈕，使用戶操作更加容易和快捷，可點擊圖標也會放大可點擊區域。
注意： 并不能無限的放大。大小給可用性帶來的加成是有限制的，如果把一個很小的按鈕放大，它會變得更易于點擊；但是如果按鈕尺寸已經足夠大，那么再放大尺寸，也并不會提高可用性和用戶操作效率。
2、 減少移動的距離
依據菲茨定律所言，距離目標越近，用戶點擊越快。所以我們通常會縮短當前交互元素和目標元素的距離，來提高用戶的使用效率和交互體驗。
1>減少絕對距離
因為移動端用戶通常為單手操作，也就是大拇指為主要操作工具，在現在大屏手機泛濫的情況下，屏幕很多地方是單手無法觸及的，所以現在我們通常會把按鈕和常用操作元素放在頁面下方的易操作區域。
2>減少相對距離
在兩個或多個操作中，通過縮短可交互元素之間的距離來提高用戶的使用效率。比如確認刪除操作，因為它是重要的負向操作，所以對于雙重確認，相比于在當前列表區域確認刪除（如下圖微信），如果使用彈框，那么用戶手勢的移動距離相對會更長（如下圖淘寶）
p：對于微信來說，刪除對話是用戶比較常執行的操作，因此便利性應該更高；而淘寶更想阻止用戶進行此操作。 也就是說并不是所有操作都需要縮短距離。
3 、相關元素靠近
相關的內容或者交互元素要彼此靠近，可以在視覺上增強他們之間的相關性認知
4 、屏幕的邊緣和角落無限大
因為屏幕的邊角有一個隱形的“結界”，可以阻止用戶鼠標因為大幅移動而超出目標區域范圍，因此用戶可以直接將鼠標大幅度移動到屏幕的邊緣、角落，而不用進一步微調。 所以屏幕的邊角適合放置菜單欄、按鈕這樣的元素，不管箭頭移動多遠，最終會停在屏幕的邊緣并定位到菜單上。 比如chrome瀏覽器它把TAB欄放在了屏幕最頂部邊界，用戶使用效率比較高。
其他補充：
1、餅狀菜單會比線型菜單更易選擇，而且錯誤率更低，這里面有兩個原因：
餅狀菜單的每個菜單項和菜單中心的距離都一致
餅狀菜單的每個菜單項的楔形目標區域都非常大，一般都會擴展到屏幕的邊緣
2、 目標點的位置實際上是邊緣的一些像素加上邊緣之外的全部面積。所以，這樣看來目標點就足夠大了。原因是基于fitts定律，它的一個分母的增大了而使得界面的效率提高了
總結：
1、我們想要更容易點擊到控件，就應該放在屏幕的邊緣或角落里。讓常用的控件更大，更容易辨別；
2、使用屏幕的邊緣和角落讓控件有效擴大，永遠不要把控件放在離屏幕邊緣或角落一個像素遠的地方；
3、邊緣之外的地方，也可以算作目標點的面積，這樣一來，目標的面積就被無限的放大了，也更方便用戶操作。
補充一張雅虎ued繪制的關于Fitts’ Law的Q版小漫畫，先初步了解下:
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
本文主要聊一下產品中使用的幾個交互設計原則，一致性，費茨定律，容錯性，?？硕?。
我們在做設計時，經常會講到要保持一致。一致性的好處從外部來說，可以極大的提升產品的易用性，降低用戶的學習成本，同時也有利于品牌形象的傳達。從內部來說，將一些相同或類似的功能進行復用，提高團隊的協作效率，讓資源得到更充分的利用。
一致性體現在產品中可以體現在很多方面，比如是視覺風格統一，交互操作統一。視覺上可以是配色、字體、圖標、頁面布局、插畫，以及在不同終端上的統一。交互操作可以是相同相似功能在不同頁面的呼出方式，一些地方動畫的表現形式。
另外，產品與本身所處的行業內的競品的一致性，比如音樂播放頁面，用戶已經習慣了上面是歌曲宣傳圖，下面是播放切換的控件，各個產品的排版布局都是相似的，這樣的統一可以讓用戶沒有陌生感，在接觸一個新的音樂類產品時很快的上手。
滴答清單的網頁端、桌面版、網頁插件，將頁面的主要功能信息都放在了左邊，中間部分是清單列表，最右側是清單詳情，配色都是用了灰色、白色、淺藍色，圖標風格上使用的面型風格，這三個終端的視覺風格是保持了高度的一致，傳遞給用戶的也是很強的品牌理念。
阿里云盤，App啟動頁和網頁功能介紹，都是使用了C4D插畫，來保證兩個終端品牌風格的一致性。
微博App的詳情頁及他人主頁，這兩個頁面的評論功能都使用了相同的底部彈出框的控件樣式，用戶可以在不用思考的情況下直接操作，這是利用了相同功能在不同頁面復用了相同的交互控件。
簡單點來說，有兩個關鍵因素，兩個操作目標的距離、操作目標大小。第一個因素意思就是在當前產品中兩步操作，手指移動的距離越短，操作就越容易。第二個因素是當前操作目標越大，操作越容易。
石墨文檔App。在頁面右下角有一個懸浮的新建按鈕，點擊后從底部彈出活動視圖，用戶可以進行新建文檔、表格等操作。這里使用從底部彈出活動視圖，而不是在新頁面或者頁面中間，正是利用了費茨定律，縮短了兩步操作之間手指移動的距離，降低操作難度。
滴滴出行、如祺出行
滴滴出行打車頁面，App首先會自動定位你當前所在位置為出發位置，目的地一欄顯示文案「輸入目的地」。設計師將輸入框設計的很大，文案字體也很大，在當前頁面中非常醒目，極大的方便了用戶的操作。這就是應用了費茨定律的第二個因素，當前操作目標越大，操作也就越容易。
反觀如祺出行的打車頁面，出發地一欄和目的地一欄的尺寸是一樣大的，都是使用圖標+文字樣式，出發地一欄使用深灰色的圖標、深灰色的字體，而目的地一欄圖標雖然使用了橙色主題色，但是文字的顏色是淺灰色，字號也沒有放大，非常不顯眼。要知道用戶當前的迫切需求是輸入目的地，這樣設計無疑是增加了用戶操作的難度。
平時在操作產品界面時，經常會因為一些原因造成操作錯誤，而有些錯誤造成的損失是無法挽回的。那么設計師應該怎么避免用戶操作中犯錯呢？容錯性原則可以很好的解決這個問題。容錯性定義是：
“容錯性是產品對錯誤操作的承載性能，即一個產品操作時出現錯誤的概率和錯誤出現后得到解決的概率和效率。容錯性最初應用于計算機領域，它的存在能保證系統在故障存在的情況下不失效，仍然正常工作。產品容錯性設計能使產品與人的交流或人與人借助產品的交流更加流暢。”
拆解一下，影響「操作時出現錯誤的概率」的因素有，操作前的引導提醒以及操作時的提示。影響「錯誤出現后得到解決的概率和效率」的因素有，操作后的解決方案
微信的修改微信號功能，不同于修改昵稱直接進入編輯頁面，微信在中間增加了一個頁面，頁面內容顯示當前的微信號及提示文字，目的是提醒用戶要慎重，避免有些用戶修改了微信號之后后悔。這里是用到了容錯性的操作前的引導提醒，降低了出現錯誤的概率。
QQ注冊頁面，用戶輸入昵稱后，系統會檢測昵稱是否可用，及時給出給出提示。輸入密碼時會自動出現密碼設置的提示，及時提醒密碼都有哪些規則，避免用戶輸入不符合要求的密碼。操作中給出這些相應的提示，可以使用戶更加流暢的完成注冊流程。
印象筆記網頁版。將一篇筆記刪除后，頁面頂部會出現一個提示框，文案是「已將XX文章移至廢紙簍」，提示框2、3秒之后自動消失。如果剛好這篇筆記是不小心誤刪的，這里的提示框給予了用戶反悔的機會，幫助用戶及時的找回筆記，彌補錯誤。
希克定律，又叫是?？艘缓Ｂ桑℉ick Hymalrs 1aw），是一種心理物理學定律。應用在產品設計當中，就是當頁面中需要有不同選項時，要盡可能的少而簡單，降低用戶的決策成本。
美團外賣頁面的金剛區，共有三行應用。核心推薦的5個應用是放在第一排，其他10個應用排成兩排，核心推薦應用與其他應用在圖標風格上使用了區別化設計，用戶在進行選擇時變成了5選1，而不是15選1。這是設計師在功能設計時針對應用做出了重要程度的區分，以幫助用戶更快做出選擇。
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
除非有更好的選擇，否則就遵從標準 —— 阿蘭庫珀
費茨定律：
距離：起始位置離目標位置越遠，我們到達目標位置所花費的時間就越長，反之亦然。
目標大?。耗繕嗣娣e越大，我們定位到目標位置所花費的時間就越短，反之，目標越小，定位時間越長。
·生活中的費茨定律
剎車和油門踏板相距很近，剎車時的物理面積比油門的物理面積大，會最快接觸到踏板，減少事故的發生。
·界面中的費茨定律
（1）距離目標位置盡量縮短，相關操作保持親密性
例如：抖音的視頻播放界面，系統會判斷用戶進行觸發時手指與屏幕的接觸位置，并將操作按鈕顯示在離用戶手指最近的位置。
（2）目標尺寸大小要合適
目標點擊熱區在合適的范圍內，越大越容易精準點擊，越小越容易誤操作。iOS交互指南中規定最小點擊熱區為44*44。
（3）拇指原則
人們在使用手機時，75%的交互操作都是由拇指驅動的，考慮到費茨定律，如果目標位置超出拇指的移動范圍，操作成本增加。
米勒定律：
是交互設計中常用的一個定律，美國心理學家對人的記憶能力進行定量研究，他發現人的短時記憶能力廣度為7±2個信息塊，超過這個范圍就容易出錯，在7+2與7-2之間浮動。
·生活中的米勒定律
電話號碼，銀行卡號，身份證號碼進行數字分隔，降低記憶成本，提高信息的易讀性，視覺防錯。
·界面中的米勒定律
（1）分段記憶，信息分層
文章、文本中的字號、字間距，目的就是便于讀者記憶和提高易讀性
（2）導航和選項卡不超過9個
網頁設計的一級導航不要超過9個，如果導航和選項卡內容過多，可通過聚合按鈕來包容其他次要入口。（用戶使用導航就是要快速找到自己想要的內容，如不能快速查找，用戶可能會就此流失掉）
（3）系列位置效應
首因效應：相對中間位置，我們對最前面的物體記憶清晰。
新近效應：相對中間位置，對序列末尾物體記憶更清晰。
席克定律：
是一種心理物理學定律，用戶所面臨的選擇數量越多，花費時間越長，人機交互界面選項越多，用戶決策時間越長。
·生活中的席克定律
遙控器按鈕越少，越快做出操作；如交互設計四策略：刪除、組合、隱藏、轉移。功能層級也需要細分核心功能、輔助功能、邊緣功能。而核心功能是進入產品第一個發現的功能，操作頻率高，所以它的視覺應是最突出的，可以幫助用戶增強感知和節約選擇時間。
·界面中的席克定律
（1）減少選項并提供默認值
選項越多，用戶決策的時間越長，減少用戶思考的時間就是減少操作時間和學習成本，讓用戶不思考就做出正確的選擇，對于小模塊來說，一般選項不超過9個，9個以上可以用交互約束用戶的行為，如展開收縮。
（2）選項分類分層，信息區分主次
在菜單欄的設計過程中，我們會進行同類分組和多級分層的設計，效率會更高。重點信息、推薦信息和普通信息要在時間上做區分，這樣才能搶占視覺并在第一時間感知到。
（3）分步完成，分布顯示
分解復雜流程，讓用戶一步步操作，而不是全部堆到用戶面前，通過分步完成一個任務流，降低其他信息給用戶帶來的干擾。例如：用戶填寫表單時，可展示選項，當填完最后一項選“其他”時，再展開剩余的表單，目的上是為了減輕大量表單，給用戶感知上帶來的壓力，達到場景細分的目的。
接近法則：
接近法則也是格式塔理論中我們最熟悉的，最常用的一種法則。觀察者看到彼此臨近的物體時，會將它們視為一體。
·生活中的接近法則
小區規劃圖中，會通過較寬的過道，綠植圍欄來劃分他們之間的關系，從而增強人們的感知。
·界面中的接近法則
界面中的接近原則是對相似的信息及功能類別進行分組、布局。作用是直接影響到用戶與產品的視覺交流，引導用戶的瀏覽及操作行為。
常見的在列表頁面，通過色塊區分大組與大組，分割線區分小組與小組，目的都是在視覺上通過組與組的區分來劃分功能與功能之間的關聯性。
以上這四條是我們在平常工作時都會用到的，我們再進行一個界面的設計時應該對照下以上幾條定律，在與產品或開發battle時也能有理有據，告訴他我們「為什么這樣設計」。寫的手有些痛，剩下的4條定律下期我再繼續補充，下期見～
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
八個交互設計原則幫你避免出現基礎錯誤
1 一致性：一致性能給用戶節約成本、元素風格統一和延續性、產品內部結構的一致性
2 反饋：操作成功或失敗都有明確的反饋、告訴用戶此刻的狀態是什么會有什么結果
3 方便使用： 減法設計（扁平的框架設計—減少不必要的操作步驟，每個流程清晰沒有太多分支）
重點功能隨手可用 多選擇少輸入
4 預防出錯/防錯原則： 操作給予提示
5 幫助用戶認識改正錯誤：如果出錯要幫助用戶從錯誤中恢復過來
6 高識別性：（復雜的交互要給與引導和幫助）
7 用戶自由控制權：用戶可以取消正在執行的操作 每個層級都能找到上一級的方法
8 符合用戶的操作習慣
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
源起
由于之前曾經在后臺系統開發公司工作過的緣故，所以有些后臺管理系統界面的產出。后來雖然從那家公司離職，但也接到過一些后臺界面設計和優化的項目，前前后后也快十來個了。
這里想分享下一些關于后臺界面設計的觀點（tucao）。
一，定義好表格規范強于為每個表格出設計稿
表格是構成后臺使用界面的重要組成之一，聚合了眾多信息并提供操作入口。并且后臺系統中一般會需要數量眾多的表格。
這種情況下如果每張表格都出設計稿，是一件很費時費力的事情，更關鍵的是對開發落地不一定有什么實際意義。
所以這種情況下，定義好表格規范要遠遠強于為每個列表出設計稿。
下圖是在某系統設計中定義的表格規范，定義了不同信息之間的間距，信息塊內部的浮動間距等。
二，考慮未來頁面信息密度增高的情形，避免使用過大的組件。
2019年在某系統設計中，由于初期頁面內容比較少，為了讓用戶擁有更大的點擊操作區域，利用頁面空間，所以讓下拉菜單，輸入框等控件略微大了一點點。
后來頁面內容逐步增多，特別是篩選功能越來越多時，就尷尬了。使用原有的控件，篩選區域就會臃腫不堪，擠占信息展示區域的空間。新設計控件又會與其他頁面不統一，修改工作量會很大。
所以即便頁面信息少，也要考慮頁面信息密度增高的情形，避免是使用過大的組件。
三，根據用戶常用的顯示器分辨率設計后臺
一般情況下我們會按1920px的寬度出設計稿，然后再交付給開發做自適應。
但是后來發現頁面信息密度很高時，簡單粗暴的自適應難免會不盡人意。
并且實際工作環境中，很多后臺的使用者幾乎全部情形都是用筆記本，這種情形下使用筆記本的尺寸設計更為合適，或者使用1440px的寬度出設計稿，平衡對大小屏幕的設計考慮。
最好的方式當然是與需求方充分溝通，商定設計稿寬度。很多需求部門的電腦都是統一采購的，顯示器分辨率是全部統一的。
2020年某ERP設計項目，一張表單以1920px寬度出了設計稿，后來應甲方需要，另外單獨出了一版1200px版本。
四，與開發討論使用何種組件庫，基于組件庫提供界面優化方案
在實際的后臺項目開發過程中，很多項目并不使用自己定制的組件庫，而是使用第三方框架。
這種情形下最合適的方式是與開發討論使用何種組件庫，基于組件庫提供界面優化方案，基于組件庫提供高密度復雜頁面的編排，重難點頁面的設計。
設計的產出應該以實際實現效果為導向，而不是止步于設計稿。
幾個常用的組件庫
https://www.iviewui.com/
https://element.eleme.cn/#/zh-CN/resource
https://ant.design/docs/spec/introduce-cn
五，嘗試考慮使用卡片展示列表信息
后臺頁面中經常會存在大量列表的情形，如果某個列表字段不多并不會隨便增加，可以嘗試一排信息放在一張卡片上，使用卡片展示列表信息，改變頁面單調的版式。
不過字段，操作按鈕一旦增加，就比較麻煩了。
六，導航區不要過大，盡量給工作區留出空間。
如果使用固定寬度的導航區，過寬的導航區會擠占工作區的空間，在筆記本等小屏幕電腦上會更加明顯。所以需要合理控制大小。
七，靈活使用不同板塊樣式，分隔方式區分高密度頁面中的信息
后臺設計中經常會遇到一個頁面需要顯示很多不同類型信息的需求，可以使用不同底色，卡片，不同層級的分隔線來分割版面，實現不同類型信息的區別顯示。
應客戶需要，這張客戶詳情頁面只能以彈窗形式出現。反復使用底色分割，在盡可能簡潔的同時將不同信息區分開來。
結語
以上的觀點僅代表個人的看法，可能有一些無法令人接受，歡迎各位一起探討，或者給出更好的解決方案。
感覺有幫助的話點個贊喲~
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn
