編者按：這篇趨勢分析的文章出自資深設計師 Lyudmil Enchev 之手，匯總了 2021 年在網頁設計領域值得注意的 10 個重要趨勢。
雖然移動端設計在持續地繁榮發展，但是網頁設計依然是當下硬性的設計需求。相比于以往，網頁設計所面對的要求，其實越來越高，不僅要細致到位，要功能全面，要能夠貼合趨勢，還要能兼顧桌面和移動端。
從網絡上找到靈感并不是一件復雜的事情，不過要將新的樣式應用到網頁中，給舊有的樣式翻新，都需要配合技術的進步和新的工具。
在網頁設計領域中，設計趨勢從來都不是為了設計而誕生的，相反它更像是視覺、品牌、技術、先鋒探索綜合作用下，落地到網頁作品中的一種綜合表現。越來越多的技術和設計人員將聰明才智和天才想法融入到網頁當中，才催生了如今我們看到的這些「趨勢」，而這個，就是我們今天要聊的東西。
其實嚴格意義上來說，卡通插畫一直在流行，流行了很多年。從卡通插畫在電視上成為一代又一代人的視覺和設計啟蒙開始，它就從來沒有離開過網頁設計的主流領域。
也正是因此，直到今天，當我們談及網頁設計趨勢的時候，卡通插畫也會是我們最容易想到的一個趨勢發展方向。插畫，是一位設計師自由創作發揮的通行證，而卡通插畫，是最容易帶著設計飛翔的一個設計技術。
卡通插畫足夠靈活，裝飾性非常強，在題材和風格足夠切合的情況下，能夠更快和用戶構成情緒上的紐帶，可以說是非常強大了。
當然，不止是在這一篇文章里面強調過，3D 的重要性和作為趨勢的流行程度。從文字排版到視覺圖像，3D 在視覺領域的快速增長和市場需求是大家有目共睹的。
值得一提的是，在網頁這個領域，除了諸多視覺元素的視覺設計之外，有一個非常突出的趨勢，就是運用 3D 來構建視覺景深，渲染出層次，這非常強大。
這種景深和 3D 元素所構建出來的沉浸感使得整個網頁充滿了吸引力，結合色彩，陰影、高光，在高清晰度的屏幕上，這些都成為了將用戶留下來的理由?？纯聪旅娴陌咐?，你就明白我說的意思。
失真和故障效果則是另外一個重要的趨勢。視覺噪音，隨機的元素，缺陷，故障，模糊，低保真的元素，粗野主義式的設計，這些在這個以精致細膩為上的時代，制造出了一種反主流的聲音。
并非它們必須這樣，但是這樣的視覺風格確實更容易在成堆的精致細膩設計當中脫穎而出——當然前提是你的故障和失真效果能夠做的足夠「好」。
奇怪的配色，反直覺的排版，明顯的錯位，看起來怪誕但是有趣的設計，這樣的設計通常需要設計師更好地在對錯好壞之間拿捏平衡。
感覺，感覺很重要，你明白嘛？這不是反邏輯也不是反設計，是特立獨行?？纯聪旅娴陌咐伞?
懷舊也一直在流行，你知道的。但是如何懷舊？90年代，數字化設計剛剛從像素開始向著更加細致的未來前進，這個階段，有大膽的嘗試，有快速更迭，這些介乎新舊之間的數字設計，是我們對于 90 年代設計的美好回憶。
相比于 80 年代的粗陋（圖形化界面還在艱難普及中），90年代是騰飛的階段，從界面到游戲，在擬物化走到之前，那種介乎精致和復古之間的微妙感覺，是非常有趣的。
對于新世紀才出生的 Z 世代而言，90年代是陌生的，但是這個時代又是很容易可以被追溯到的，這也是使得 90 年代的數字風情有著能夠打通不同年齡段用戶的奇妙氣場，它的逐步流行，并不令人意外。
你總能在這些設計當中，get 到到某些東西，然后微微一笑。
嚴格意義上來說，微動效和微交互并不是趨勢那么簡單，在如今的 UI 和 UX 設計當中，它是必不可少的組成部分，它已經從過去的「加分項」變成了如今的「基本要求」。
微交互和微動效通常不會做得特別的顯著，但是它們會深入到 UI 界面的各個地方，按鈕，小圖標，行為召喚式的文本，翻頁按鈕，光標，產品圖，彈出框，等等等。
微交互和微動效從最初的只需要確?？捎眯裕饺缃裥枰每匆子糜钟腥?，可以說要求是比以往有明顯提高了。在接下來的 2021 年可以預測的是，微動效會更加強調趣味性和交互性。
如果你正在考慮這部分的設計，看看下方的設計參考吧。
在關于網頁設計趨勢的文章當中，不探討配色是不完整的。2021年的年度流行色是什么？不妨等等潘通下個月月初公布的2021年年度色。那 2021 年的在配色方法上的趨勢是什么？是實驗性配色。
在以往追求協調配色的時代，和諧的搭配是最主要訴求。不過現如今，用戶、品牌乃至于設計師都在尋求一些更加新鮮獨特的東西，實驗性的配色就是在這樣的訴求之下，逐漸流行起來。
這些實驗性的配色通常會帶有一些漸變的特質，一些反習慣和反邏輯的搭配方式，飽和度較高的藍色、紫色和紅色的融合，一些更為黯淡或者更為刺眼的搭配方式，強烈的視覺實驗仿佛是在探索用戶的接受極限在哪里。對于如何落地，多看看那些優秀而微妙的已有的范例吧。
如果說有什么趨勢在 2021 年是非常明顯的話，我只能說，是更為大膽的排版和更為粗壯的字體筆觸。當然，這些設計本身是要具備相當的視覺美感和愉悅性的。懟到出血位乃至于版面之外的文本，快速切換的字體效果是「注意力經濟」催生的一種設計策略。所有的一切——尤其是文本——仿佛在大聲地吼叫著：看我看我看我！
這大概就是這種設計趨勢誕生的本質。不過如果你設計的足夠炫酷、炸裂或者優雅，誰又會去責怪你呢？
我們似乎開始厭倦橫平豎直均分的網格，那些并不那么精準，帶著手工制作的「不夠」的元素，對于越來越多的用戶而言，似乎是更好、更加易于親近的東西。因為這樣看起來更加個性，似乎給網頁賦予了某種真實質感，甚至可以腦補出這些手寫、手繪、手撕的視覺元素背后，站著一個有血有肉真實存在的人。
這大概才是手作感真正讓人開始沉迷的重要原因。你可以開始嘗試一下這種這些自由的、非正規的、甚至有錯漏但是顯得非常友好的視覺元素，字體，插畫，排版方式，裝飾元素，等等等等。
其實我們在前面已經反復提及了3D的部分，不過現在再做一個匯總：走出平面2D的領域，來試試有趣的 3D 設計，無論是好玩逼真的建模和陰影、有趣的材質和細節、腦洞大開的動畫、充滿縱深的轉場和強化的交互，都能夠讓網頁的設計，在2021 年更加吸引人。
因為炫酷本身就足夠吸引人了不是嗎？
極簡主義最后還是要提及一下。雖然總體來說是老生常談，但是它依然是很多設計師熱衷、很多用戶喜歡的一種主流的風格，也是值得追隨的趨勢。
必須說的是，還有很多厭倦了各種流行樣式的用戶可能會擁抱極簡主義，它會作為一種持續的「趨勢」而存在。這也是極簡主義最讓人著迷的地方：將你需要的必要的部分呈現出來，且只呈現這部分東西，沒有過度裝飾，沒有無效信息，簡單直接。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
節能環保是符合可持續發展戰略的一個課題。在節能環保方面界面設計都有哪些風格呢？
下面給您展示兩種風格界面：清新明快和深色沉穩。
綠色和黃色為主的色調給人一種清新自然，富有生機與活力的印象。圖形以圓形為主，比較有親和力，同時圓形也是今年UI設計的流行趨勢。
紫色和粉紅色漸變為背景，明快有活力，容易吸引人眼球。綠色、黃色、藍色作為輔助色，增加頁面的靈動感。圖標簡潔清晰，辨識度高。
黑白色調是一種低調雅致的配色，配以簡潔的線條，更符合節能環保的主題。
這款APP界面采用深灰色底色，沉穩大氣，有現代科技感，界面采用卡片式布局。配以粉紅和橘黃作為點綴，讓界面不因深色而顯得呆板。
界面采用深藍和灰色為主的配色，大面積留白?？ㄆ讲季郑湟郧€圖表，扁平風格圖標。簡潔清晰，表意明確。讓人對節能的理念一目了然。
（圖片均來源于網絡）
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
更多精彩文章：
大數據可視化界面設計賞析（一）
大數據可視化界面設計賞析（二）
大數據可視化界面設計賞析（五）
為大家梳理一個web表格設計框架，希望能夠給大家帶來完整的不一樣的內容。全文12,598字 ，預計閱讀30分鐘，建議收藏。
在網頁或桌面端為載體的B端產品和生產力工具中，越來越多的設計師需要和數據打交道，查詢和處理數據的能力是當前正在設計的大多數產品的關鍵要求之一，表格被公認為是展現數據最為清晰、的形式之一，也是世界上最常用的用戶界面工具，其重要性不言而喻。
表格，展示行列數據，既是一種可視化交流模式，又是一種整理數據的手段。表格幫助我們組織和展示信息，同時保證信息的可讀性，從大量信息中找到所需內容；通過合理布局，感知不同信息間的關聯與區別，進行分析和比較；對數據進行排序、搜索、分頁、自定義操作等復雜行為。
表格的行元素和列元素行和相交就會形成一個簡單的二維表，行，列元素的空間組合就確定了一個個單元格。常見的表格布局有水平型、垂直型和矩陣型三種基本布局，分別強調行、列、單元格。
水平型會弱化列的存在，強調行信息的連貫性，適用于用戶閱讀信息時是從左到右，然后自上而下逐條掃描。垂直型是通過強化列的視覺特征來突出不同列信息的對比。矩陣型的表格有均勻統一的分割線，單元格比較明顯，適用于列信息較多而沒有足夠空間用留白來分割信息的表格，同時我認為單元格合并的情況也屬于矩陣型。
還有比較常用的表格類型層級型：
層級表
是表達結構性關系的表格，表現得如同樹的分支，所以又叫樹列表。每一個條目可展開或折疊包含的更詳細的行信息，也包含嵌套子表格。
層級表并不如矩陣表直觀，但通過結構化的組織方式逐級展示表的數據內容，讓整體信息架構一目了然，非常適合大型數據表。
結合層級表的使用場景，多以查看為主，編輯需求較少。
同時還有特殊的表格類型，圖表型與卡片型：
圖表型
除了在單元格中引用圖表之外，很多時候都會提供圖表/表格視圖切換，便于用戶從圖形角度查看、分析自己關注的數據。有時也會有“圖表+表格”的形式，這時候，表格往往只作為明細放在頁面底部。大量的表格也會導致視覺的單調。
卡片型
可以用卡片的形式來展示信息，將信息以組的概念呈現，單張卡片內的信息按優先級進行排列。此外，卡片彼此之間又形成一個整體。
卡片是一種承載信息的容器，對可承載的內容類型無過多限制，它讓一類信息集中化，增強區塊感的同時更易于操作；卡片通常以網格或矩陣的方式排列，傳達相互之間的層級關系。適合較為輕量級和個性化較強的信息區塊展示。
注：在有限的表格空間內需注意卡片信息之間的間距，若卡片信息過長可做截斷處理。
在實際工作中，上述表格類型還有可能互相結合，以更好的達到相應的分析目的。
比如垂直–層級，矩陣–數據立體表等。
從視覺結構的表現角度，個人將“表格”的構成分為：標題、表上方篩選操作區、表頭、表體、底欄。由表頭、表體構成內部區域，由標題、篩選操作、底欄構成外部區域。
標題是對表格信息內容的整體概括，可包含數據來源及屬性(日期、地區等)，以便用戶對表格內容有整體認知。給數據表格起一個清晰簡明的標題，與其他的設計同等重要。有了好的標題，表格就可以獨立使用，如果導航菜單層級清晰，同樣能起到標題的作用。標題作為最重要的識別元素，默認展示在左上角。
這里特指位于表頭的上方的操作區域，包含篩選，操作按鈕等其他操作。篩選區包含模糊搜索和條件篩選，按鈕分為增刪改和其它業務處理操作，合理設計篩選區可以大大提高用戶的效率。
表頭對數據性質的歸類。表頭按慣例要對數據的簡況做出反映，如被調查者的性別、年齡、學歷、收入、家庭成員組成、政治背景、經濟狀況等。表頭的字段名稱應當符合人們的思維習慣，保證用戶理解。如果有需要解釋，則在字段名稱旁邊加說明小圖標(小問號)。表頭在這里也能指列行標簽，是對所屬行或列數據的描述。
除了容納行/列標簽之外，表頭也可以進行排序、搜索、篩選等。
表體是表格的主體內容，具體信息數據內容的填充區域，由一個個基礎的單元格組成，單元格是表格呈現數據信息的基本單位，可以是計數、百分比、均值、"-"等任何數據。表體包含數據，分割線，背景，單元格數據可進行點擊操作，如鏈接跳轉(項目或者商品等)、展開嵌套表的子集信息(子表格)、操作按鈕(查看編輯)等。
表尾一般是統計類數據，例如合計、平均數等。表尾使用頻率較少，且重要性明顯不如表頭，我就把它歸到表體這類。
底欄在表格最下方，主要展示正文中的數據量或單頁數據的概覽信息，也常提供統計功能，供用戶了解總體進展。底欄一般放統計信息、分頁控件、備注說明、操作按鈕(加載更多)等內容。
底欄最常見的元素就是分頁，分頁可以放在頭部或底部，常見的還是放到底部，分頁固定能省去用戶需要翻到頂部或底部進行操作的麻煩。分頁可分為整體頁碼平鋪式、全功能版、簡易版等，需要根據不同的場景選擇最優的設計方案，比如有的時候并不需要定點跳轉。
無限滾動可以替代分頁，但對于功能優先的應用未必適用。下圖為查看更多按鈕，比較少見：
同時，在選中操作的下，操作按鈕也可以位于底欄，在未選中時操作置灰。
采用格式一致外觀，突出有利于對象識別的關鍵信息。
合適的填充和邊距對于視覺設計至關重要，既包括保證數據單元格之間的留白，又包括單元格內部留白，以保證易讀性，當創建表格設計規范并嚴格遵循后，就可以創建視覺一致的表。表格本身應具有最小寬度，在不同畫面中寬度應可以增長到整個空間，所以每個列也需具備最小寬度。如果頁面寬度小于表格，那么表格應水平可拖拽。
數據合適的位置排列能夠提升數據的瀏覽效率和準確度。對齊能夠很好的形成視覺引導線，會讓表格更加規范易理解，給用戶視覺上的統一感，視線流動更順暢，讓用戶快速的捕捉到所需內容。
正如連續律所描述的，人們傾向于把那些經歷最小變化或阻斷的直線或圓滑曲線知覺為一個整體，傾向于使知覺對象的直線繼續成為直線，使曲線繼續成為曲線。在界面設計中，將元素進行對齊，既符合用戶的認知特性，也能引導視覺流向，讓用戶更流暢地接收信息。
數字應該右對齊
在表格中，諸如金額、數量等數值排列時，通常采用“右對齊”方式，既方便用戶快捷讀取數據，還可以使用戶進行縱向數據對比。數字是從右向左讀的，是因為我們對比數字時，首先看個位，然后十位、百位。當個位數值對齊時，我們就可以快速查看前面的數值，比較多個數據的大小。因此，表格的數字應當右對齊。
當我們常用的字體如果不同數字寬度不一致時，會導致千位分隔符不在一條直線上，所以要選擇數字等寬的字體，等寬的數字在同一豎線時更容易對比。
文字信息左對齊
因為我們閱讀文字信息是從左向右讀，如果不采用左對齊，會降低瀏覽文字的效率。
混合型文本左對齊
當數字、文字、字母組成混合數據時，標題和正文左對齊，使用了一個視覺起點。
在實際工作中，主流框架組件，表格列數據對齊同時針對分割線，雖不是完美中的對齊，但開發成本低。
不論何種對齊方式，都需要考慮到該字段可能存在的極端情況。如：普通文本若過長，可在鼠標懸停狀態時單元格展開列出全部字段信息。
一般表格具有的顏色盡可能少。顏色和可讀性是密切相關的，要合理的使用顏色，普通表盡量使用簡單的背景色和點綴色。背景色方面，除了行/列交替顏色(可以區隔內容，引導視線)、懸停高亮底色(便于準確辨別光標所在行)等處理方法，還可以對表頭表尾進行視覺區分。但不能增加過多顏色以引起混亂。
分割線顏色盡量不要與背景色相差太大。當字體選擇深灰色，背景為淺白色時，邊框選擇淺灰色，這樣可以減少我們視覺疲勞，不會使表格看起來令人生畏。
表頭標簽應該簡煉準確，以達到節省表頭空間和減輕視覺壓力的作用，讓用戶注意力聚焦在數據本身。當然對于產品而言，先能把事情說清楚，再考慮文字的簡潔性。
當數據結構比較復雜的時候，使用多級表頭來體現表頭與數據的層次關系，如下圖：
當數據有看不懂或生僻的信息時，用戶期望有人告訴他為什么會這樣，就需要在表頭標簽后加上小問號，鼠標懸停彈出說明文字的提示框。
不需要表頭
如果表格數據可以自我解釋，表頭就可以不需要。電子郵件的表格是一個好例子，郵件主題，發送者，發送日期都區別度高不會混淆的。當然有的情況表頭是不能去掉的，例如有兩個不明確的日期，這時候你就需要定義一個表頭。
所有行按邏輯排序，比如按風險由小到大，將最安全的操作放最前面；或按照信息時間排序，由新到舊，以創建時間進行排序，即創建的排在最前面。
行高是非常重要的參數，直接影響著閱讀體驗。較小的行高承載更多信息，讓用戶無需滾動鼠標即可看到更多數據，但會降低掃描效果，導致視覺解析錯誤。適宜的行高使得數據更易于被閱讀，但這不代表行高越大越利于閱讀。
設置行高的原則：
A.單行數據顯示時，數據顯示緊湊、有序。
B.多行數據顯示時，弱化表格形式，提供豐富的視覺展現。
因此，對于單行顯示的表格，建議行高為字體高度的2.5倍到3倍；對于多行顯示的表格，建議內容區到上下邊框的距離略小于文字高度。當然，也可以提供切換按鈕讓用戶自己控制顯示密度。
斑馬線又稱作間行換色、隔行變色、行的交替樣式。它能讓行間界限更為明顯，同時加強視覺流的橫向引導，避免在閱讀表格時出現迷失情況，要注意兩種顏色不能反差過大。另外，可以根據實際情況選擇是否與邊框同時使用。
有時為了強調行內信息的連續性，可去掉單元格的縱向分割線，僅使用橫向分割線和底色分割，使橫向信息更加連續通暢，以提升閱讀效率。
表格還可以通過顏色來指示狀態，顏色指示可以幫助用戶識別哪些行可能需要特別注意的行數據。
同時可以對行內信息進行擴充，進一步弱化表格形式，豐富各類信息的視覺呈現，同時兼顧行與行之間的關鍵信息的對比，如上文表格布局提到的圖表的使用。
盡量減少列的數量，關注用戶需要的必要信息。當數據列過多時，要分清主次列，非重點、輔助性信息可以通過次級入口來解決，如固定重要列(主體名稱/操作列)，次級列在表格中間區域左右拖動。
列寬嚴謹的處理方式有三種。第一，通過柵格，由列的數量決定列寬，主流框架組件一般是這種；第二，可以固定部分列的寬度，其余列則按百分比處理；第三，在固定寬度的基礎上，允許用戶自由拖動調整列寬的大小。（當然我覺得不要太拘泥這個，合適就好）
為便于用戶對數據進行對比分析，可以在原始數據的基礎上給出差值、升降變化等數據處理結果，減少用戶數據加工的過程，直達用戶獲取信息的目標(需要明確用戶目標)，提高用戶的閱讀速度。
一般列的強調是配合列排序功能使用的，如點擊率、訪問量的排序。有時會使用不同粗細的縱向分割線或不同底色對列信息進行區隔，增加同類信息的對比性。
其中的關鍵區別在于數字的大小。數據的度量單位無需重復，一般在表頭標識清楚即可。
一般指空數據或零數據的情況，空白單元格容易造成用戶困惑甚至誤解，用戶會搞不清楚到底是沒有數據，還是數值為零？正確做法是，對于數據為零的單元格，要填上0，且小數點后位數、單位，都要與上下數據格式保持一致；對于沒有數據的單元格，通常是用“－”表示。
B端后臺數據類型較多，最好能為空數據做出釋義，可以在“列標簽”或底欄給出解釋文案。
單元格的寬度根據列中字符的長短自動變化寬度，超過該列寬可以省略顯示，末尾以"..."顯示，鼠標懸停時出現氣泡顯示完整內容。
比如用戶重點關注數據狀態、某些數據的上升和下降等，可用符號進行標識，幫助用戶快速定位到目標信息。
水平分隔線，能顯著減輕表格在垂直方向的視覺重量，內容更加條理清晰，便于用戶對比查看數據。
垂直分隔線，在表格中使用適合的對齊方式后，那么就可以省略；數據量級比較大的表格，列之間過于緊密時建議保留，可以使用較淡的分隔線，將不同列數據區分開來，提升瀏覽速度。
下圖采用了同時使用水平和垂直分隔線：
如果在表格中使用適合的對齊方式，分隔線就是多余的。但由于表格數據量級不同，即使要用，分隔線也要淡，不能妨礙快速瀏覽。
在web端，表格的的數據內容超過一定“數量”時需要提供翻頁功能，這個“數量”由表頭的高度、表格的行間距、目標用戶群體的顯示設備的配置等因素來決定，原則是不要超過一屏，考慮到每個用戶的使用習慣，可以讓用戶自定義每頁的顯示的數量。相比于跨屏翻頁而言，向下滾屏會更便利，在下文控制表內容中展開比較了無線滾動與分頁。
分頁控件內容 ：用戶自定義每頁顯示的數量，當前頁碼(行數)，全部數據的頁數(行數)，向前翻頁，向后翻頁，到達第一頁，到達最后一頁等。
當用戶的數據未超過一頁時，可以隱藏翻頁控件。翻頁按鈕不可用時，須給出置灰態或不可點擊。
分頁控件做為篩選數據的一種方式，通常可以結合排序、篩選等其它控件一起使用，來提升用戶的操作效率，如網易的郵箱，翻頁與日歷結合使用，對于有大量郵件數據的用戶來說，查閱郵件的效率更高。
除了無限滾動，還有第三種翻頁方式，鼠標點擊“加載更多”按鈕以查看更多數據。
干凈的表格使人愉悅。特別是在處理大量數據時，巨大的數據量會增加用戶的壓力，因此要減少視覺干擾。刪除不必要的分隔符與背景，去除陰影等。信息內容的有效傳達是表格設計的本質，讓用戶注意力聚焦在核心內容上。所以，做減法設計就顯得可貴了。
實現簡化的方法是適當刪減。如果畫面視覺很糟糕，請刪除輔助信息、不常用的控件和分散注意力的樣式，但要小心刪除必要內容。“簡單并不意味著沒有雜亂，這是簡單的結果。簡單性在某種程度上基本上描述了對象和產品的目的和位置。想設計出一個井然有序的產品。這并不簡單?！?- Jonathan Ive
這必須是在數據允許的情況下。水平分隔線能顯著減輕長表格在垂直方向的視覺重量，加快數值的對比效率。但如果在表格中使用適合的對齊方式，豎直分隔線就是多余的。它們最大的貢獻就是縮減元素之間的距離，明確了單元格范圍。即使要用垂直分割線，也要淡，不能妨礙快速瀏覽。
不使用斑馬線，使用不同底色區分指示不同類型的數據是有必要的，但是用來區分同一類數據，斑馬線在很多時候又是沒有必要的，因為水平分割線已經明顯區隔了。
省去分隔線，對于較小的，動態性較小的表，可以省去所有分隔線，并獲得醒目的外觀。當然，這更多是數據量不大且易分辨的情況。
運用彩色表達組織或含義可能會增加誤解，并且引發視覺障礙者的易用性問題。普通表格一般使用顏色代表狀態或進度。
其他圖形元素，如星號、三角、圓點、對勾、叉等，雖然能夠幫助組織數據、更直觀的傳達信息，但要注意數量，物極必反，要注意克制這些元素的使用。
優秀的表格交互給予用戶操控感，不讓其迷失在數據中。提供便捷的過濾篩選組件，配合鼠標懸停、點擊、框選等操作，方便用戶查看更多數據信息，快速定位目標數據，或根據特定規律對數據進行排序、突出、降維等處理。當我們將這些組件與交互動作結合，用一些習以為常的交互去操縱表格時，用戶將更清晰、有信心、提效率。
篩選和搜索是用戶目標數據的好方法，這是一項基本功能，可讓用戶從默認的表格數據輕松獲取要查找的內容，在數據量較大的表中特別有用，一般位于表上方的操作區域或表頭區域。
當表格的數據量較大時，可在表上方操作區域增加對象搜索或數據分類來提升用戶查找效率，且能同時使用。提供多維的篩選和排序，是增加用戶效率的有效方式。
輸入搜索框輸入用戶關心的內容，既可以實時篩選，也可以點擊觸發，一般須支持模糊查詢，否則用戶必須記住所有內容，才能查出要找的目標項，成本過高。也有特殊情況，如保密性較高的賬號密碼列表查詢需輸入。
無論手動查詢還是自動查詢，如果查詢條件是組合的幾個，那么一般是填好全部篩選條件再讓用戶點擊查詢按鈕。因為如果用戶要查詢的表格數據具有多個屬性且相互聯系時，組合條件的查詢顯然是更合理的。
如果篩選操作是單個條件獨立查詢，各個篩選條件都是相互獨立的，那么最好填好一個條件便自動查詢。
篩選條件有時候既需要匯總數據的，又需看單一條件下的數據，比如狀態包含“待付款、待發貨和待收貨等”，此時則是做成Tab單選較好，如下圖所示。
放置在表頭標簽上的篩選，受列內容的影響，一般做單次篩選。通過對表頭標簽旁按鈕的點擊，使用戶更快捷進入到自己的篩選條件中。通常，表單越左的列數據越重要的，也是篩選頻率與需求最高的，因此高頻的篩選場景基本可以得到滿足。
垂直滾動時，固定表頭可以讓用戶明白當前單元格數據信息的屬性和含義，體現界面友好性。當數據列差異不大，用戶不能直接根據表格數據分辨類型時，尤其需要固定表頭。當表頭有操作時，固定表頭更能提升使用效率。
數據列表相當龐大而復雜的時候，使用固定表頭可以幫助用戶區分列與屬性。
當呈現大量數據時，表包含的列數超出了該表的最大寬度，水平滾動就無法避免。第一列(前幾列)或操作列固定能更方便信息的對比與操作。基于我們讀取信息的方式，從左到右放置關鍵列。最左側的列會引起最多的關注，當我們感興趣時，才會查看其他列，它會影響用戶閱讀所需時間與精力。
在大型表格中，我們才可以水平滾動，最好是尋找可替代方案。表格中文本為什么這么長？能減少字數嘛？可以將文本換至第二行以減少水平寬度嗎？能否為過長的文字選擇別名嗎？可否用圖形條目取代？是否可以采取工具提醒？是否可以安排在窗口或對話框里？
一般有兩個解決辦法：文本換行，對它縮排；在單元格區域截斷文本，在提示中顯示完整文本。方法一意味著我們要增加表格高度，且每行高度可能不同；方法二，如果不同文本內容的頭幾個字一樣就存在問題了。但這兩種方法都比水平滾動好。
表格初始有一個默認排序，也叫初始排序。但有時，用戶希望將表格中某一行位置換到另一位置。
拖放似乎很簡單。就是抓住某個元素把它放到另一個地方而已?？墒?，事實上，拖放過程涉及到了大量細節，在拖放期間，需要處理許多特定的狀態。
用戶在拖動模塊時，頁面整體布局基本保持不變。因為移動的不是模塊，而是插入條。插入條指明了放置模塊時的目標位置。常用于數據量較小，有拖曳排序需求的場景。又可以運用在多個表一起的情況。
穿梭表格
就是多表格拖拽的情況。比如左側的表格內容可拖拽至右側列表框，同時支持表內上下拖拽更換位置順序，也可直接選中對象在兩欄中按鈕移動，完成拖拽行為。
那如何讓用戶知道可拖拽呢？
增加意向符號；改變光標樣式；增加被拖拽對象臨時性底色，突出顯示。
如何讓用戶知道怎么拖拽到哪里？
被拖入區域應增加插入位置符號，可以明確指出放置模塊的目標位置，減少用戶困惑，也可以對放置操作發生后的頁面外觀提前給出預覽。同時設計時考慮上下左右兩個方向的拖拽運動分別可以觸發什么結果，超出表格范圍拖拽對象消失。
被拖動對象應呈現為輕微透明的樣式？應該顯示為完全不透明？或者改為使用縮略圖表示？我認為這三種方法都可以。透明效果也會讓更多表格內容對用戶可見，有助于用戶預覽最終放置后的結果。從而方便用戶查看頁面，也會表明該模塊處于一種特殊模式中。透明可以表明相應被拖拽對象尚未定位，或者說正處于過渡狀態。
排序又分為降序和升序，比如，事件相關的表格，默認時間降序排列；風險相關的表格，默認安全降序排序。
表頭排序可以輔助用戶快速挖掘出需要關注的信息，發現數據信息之間的關系，一般可按數字大小、文字拼音順序、字母順序等其它數據特征進行排序。如果表格中不是所有數據都能排序時，則需要標識出可排序操作的列，一般采用三角箭頭做為標識，實時反饋當前操作狀態。
可伸縮列
由于存在多個數據標題和列，我們只能根據表格的寬度來展示數據。在某些情況下，表格可允許用戶選擇他們關注的列，在其固定寬度基礎上，讓用戶可以自由拖動列寬邊緣以調整列寬。
自定義選擇列
由于數據報表，往往需要滿足各種不同的角色在不同場景下的需求，因而在表格數據顯示上，一般采取寧多勿少的原則，即盡可能提供詳細的數據，由此會數據指標過多，難以在表內完整展示，導致需要水平拉伸，降低了表格的可讀性。
針對上面這個問題上，可將所有的指標名稱羅列在表格上方，并提供多選操作，在默認情況下僅展示最常用、最重要的幾個指標（如下圖）。這樣能讓用戶在表格上方看到所有指標名稱，避免了原來需要水平拖拽而導致指標瀏覽不全的情況。其次，用戶可以根據自己的需要，自由的選擇顯示所需指標，隱藏不必要指標，減少干擾。
B端后臺通常會對應不同的角色及不同的需求，可讓用戶根據自己的需求來定義表格的展示列及列的順序。同時系統應記住用戶上一次自定義列的設置。
控制行高
較小的行高讓用戶無需滾動頁面就能查看到更多的數據，但可掃描性的效果易導致視覺迷失。這就是為什么許多成功的數據表設計包含了控制行高(顯示密度)的功能。
樹形表
行也可以結構化分為不同的類別，前面提到了層級表/樹形表，可以嵌套子表格，展開和折疊?？刹僮靼粹o一般位于各級行標題左側，具有獨特的視覺效果并具有擴展或折疊的功能。單擊表中的類別標題會在類別的展開或折疊狀態之間切換。展開與折疊也將極大的影響行內容顯示。
分頁可以將表內容信息劃分成獨立的頁面來顯示。
優點：
1.良好轉換：當用戶是在結果列表中查找特定信息而不僅僅瀏覽信息流時，分頁就是好的選擇。你會知道表格總量與當前頁的準確數量，能夠決定在哪里停下或者去哪里。
再次尋找特定數據時，分頁方案讓我們能夠大概定向到目標數據位置。用戶可能難以記錄目標數據頁數字，但一般能記錄大概范圍，而頁碼鏈接能讓用戶更容易到達那里。
2.掌控感：無限滾動就像個無止境空間——無論你滾動多久，你會感覺永遠結束不了。當用戶知道可用行數量時，他們可以自己主觀做出決定而不是被動滾動。同樣的，當用戶能夠看到結果的數量時，他們將能夠預估他們查看表數據大概要花費多長時間。
缺點：
額外的動作：在分頁方案中，用戶要到達下一頁表內容，就必須點擊分頁控件上的按鈕跳轉，等待表格新內容的加載。
表格無限下拉加載使用戶在數據內容面前一直滾動查看。向下滾動的時候不斷加載新內容，雖然十分方便與誘人，但不是什么場景都適用。
優點：
1.瀏覽：無線滾動提供了一個的方法讓用戶瀏覽表數據信息，而不必等待表格新內容的加載。當用戶并不特意尋找特定的內容時，他們需要通過查看大量內容找到自己中意的信息。
2.體驗更好：用戶使用滾動能獲得比點擊分頁有更好的體驗。滾動行為要比點擊更快更容易，對于那些連續且冗長的內容，無限滾動要比把分頁的有更好的易用性。尤其在表格區域狹小時，使用無線滾動更能節省空間。
缺點：
1.受限性能：頁面加載速度是良好體驗的一切。尤其是表格計算數據時需注意使用無限滾動，緩慢的加載速度會造成用戶的不耐煩與離開。用戶在一個表格頁面中越向下滾動，就會加載更多的內容，當數據量過大時，結果就是頁面性能越來越低。
2.位置丟失：無線滾動同分頁相比，沒法標記當前位置且不能再隨意回到之前位置。一旦離開，就會丟失當前的瀏覽記錄，如果要回到上次的位置，必須得重新滾動去尋找。當用戶有這種行為的話，無線滾動就會讓用戶產生困擾厭煩。尤其當你刷新頁面時發現自己又回到表格頂部，不得不重新滾動等待結果的加載以繼續查看。
3.信息缺失：滾動條并沒有反映出實際數據量。假設快要接近底部了，當受到引誘滾動條再滾動一點點時，結果卻會發現表格數據量又刷新了。從一個可用性的角度來說，打破滾動條的正常使用規則對用戶來講是糟糕的。
一般來說，無限滾動適用于在數據有限且信息重復的表格，有利于內容探索。分頁則適用用戶在尋找特定信息及瀏覽記錄，易快速訪問。
表格內容的取舍要建立在對業務的了解之上，盡量精簡指標，隱藏不必要信息，減少干擾，避免無主次的鋪出所有信息。不要讓用戶一次性接收過于龐大的信息量，建議默認只展示用戶所必須的信息，其他次要信息通過展開下拉等方式展示，為輔助信息提供深層入口。
展開行允許用戶無需打開新頁面在表格內即可查看附加信息，防止用戶迷失。
表格中打開表格，表格組節把相關的行組合在一起，并且能夠收縮和展開，各組節層級要有樣式區別。如有需要，在每個組節里可以顯示數據概要信息。
包括模態彈窗和非模態彈窗，模態彈窗是僅支持打開一個彈窗進行詳細查看，非模態彈窗是可以同時打開多個，并允許拖動彈窗位置進行信息對比。
模態允許用戶留在表格視圖中，且更多地關注附加信息和操作：
非模態彈窗對于主動使用的用戶來說可能很有用，可以通過一系列操作，比較不同行數據的細節：
可以通過視圖切換查看更多細節，比如在“表格”和“左列表+右詳情”之間切換，或者提供“只看文本，看文本和縮略圖，只看縮略圖”幾種查看方式。相比彈窗減少了頁面層級和隔離感。單擊行鏈接將表格轉換為左側的列表項目和右側的其他詳細信息，這讓用戶能夠解析大型數據集，而且在涉及到多個項目時不會丟失位置。
編輯表格數據在大眾化的Web應用程序中并不常見。不過，在企業級Web應用程序中，表格則占據統治地位。此時，最常見的用戶需求，就是想要像使用Excel一樣實現表格編輯。畢竟Excel早已成為編輯網格數據的一種標準。
表格數據的操作大體可分為顯性與隱性。顯性操作，指操作選項顯示在行內，直觀明了；隱性操作，當鼠標懸停時或勾選才顯示操作選項，界面簡潔明快，可減輕空間壓力，減少干擾。
操作項一般存在于行數據最后，為固定列，或表上方位置，兩者對應多種操作場景。
單行數據操作
文字按鈕操作項一般不多于三個時，圖標按鈕不多于四個時，操作項跟在行條目后面；當超過時，建議將操作折疊收起，點擊更多彈出多個操作選項。當操作按鈕致灰時，鼠標選中可顯示原因。
如果行操作不那么重要，或者說行操作過于啰嗦影響用戶閱讀時，可使用隱形操作，鼠標在行區域懸停時，可對當前行背景作出區分，或放大懸停區域，同時行尾出現可操作按鈕，進行行操作。如谷歌郵箱：
批處理操作
對于數據批量操作的場景，建議將操作放到表格上方，與復選框操作配合使用。批處理操作模式允許用戶對一行或多行對象執行操作，并在選中復選框后激活表上方操作按鈕，如刪除、批準、拒絕、復制之類的操作，這將節省用戶時間，避免重復對多行進行相同操作。
表格上方的所有篩選或搜索按鈕可能會因操作按鈕出現過多而暫時隱藏，如果空間限制導致操作按鈕排列不下，則使用“更多操作”按鈕。
二次確認提示：對于用戶操作結果給出提示窗反饋，用戶點擊「刪除」后，直接操作；出現提示框告知用戶操作成功，并提供用戶「撤銷」的按鈕；用戶進行下一個操作或者15s內不進行任何操作，提示框消失，用戶無法再「撤銷」。
在執行某些無法撤銷的操作時，點擊刪除后，出現模態彈窗進行二次確認，在當前頁面完成任務。同時禁止濫用模態彈窗進行二次確認，就既打斷用戶心流（無法將上下文帶到彈出框中），也無法避免失誤的發生。
數據較多時，單個選擇數據費時費力。單選框是只能單選，而復選框是能選擇單個、多個或全部選擇項，而實際上純粹的單選很少見，所以建議一般場景下在表格最左側加上復選框，如前面說到的批量操作，多選后，就可以批量操作。點擊選框所在行的局部能讓整行被選中，每個選定的行都接受突出顯示處理，這種做法可增大點擊區域減少界面的混亂。
具體設計時，可以按照數據類型進行選擇，如郵件已讀、未讀等。
可進行選擇的表格需告知用戶已選數據量，在翻頁時是否允許跨頁選擇；全選是當前頁視圖中的所有項目還是選擇表格中的所有項目。
針對于需要進行數據編輯的表格。表內編輯能使數據更具可操作性，表內編輯一般優于彈窗。要啟動編輯功能，必須通過鼠標單擊，而非鼠標懸停。這樣就能確保整潔的網格顯示效果。假如是通過鼠標懸停來觸發，鼠標每經過一個單元格就得顯示一個編輯框，那這種編輯模式就會干擾到不同單元格間的切換，會有多么煩人。
單元格編輯：針對單個，不連續的可編輯的單元格，為了讓功能更容易被發現，可以在單元格數據旁放置編輯圖標，這樣可編輯和不可編輯的單元格視覺對比就十分明顯。單擊該圖標即可觸發編輯，單元格內出現輸入框，保存數據并退出。有了這個隨時可見的鏈接后，編輯功能就更容易被注意到了。
單元格編輯時，也可以設置整個單元格為熱區，以便用戶觸發。
覆蓋層編輯：點擊編輯圖標觸發；通過在頁面上方添加一層來放置編輯數據。雖然編輯期間也不會離開當前頁面，但卻不是在頁面中直接實現編輯。而是把一個輕量級的彈出式覆蓋層（如對話框）作為編輯窗口。
選擇覆蓋層編輯而非行內編輯的原因也很多。有時候，不可能把某個復雜的編輯任務安排在同一個頁面中完成，如果嵌入頁面的編輯區域太大，會因為把內容過多地推向下方而損害頁面的整體感。
而其他情況下，也可以選擇中斷當前頁面流，尤其是被編輯的信息本身非常重要時。覆蓋層能夠為用戶提供明確的編輯空間。提示如果有必要占用專門的屏幕空間放置編輯窗格，而且頁面的上下文對編輯任務也不重要，就可以考慮使用覆蓋層編輯。
行編輯：針對同一行標簽下的數據編輯。新增數據行后，視圖定位到新增的行并高亮顯示，讓用戶快速聚焦。幾秒后高亮消失，以免過度干擾用戶。
不過，表內編輯圖標會涉及平衡頁面中視覺干擾的問題，如果功能及其提示在頁面中的數量過多，很可能造成功能的利用率下降。如果一行有多個編輯選項，則可以適當使用彈窗編輯數據；如果表格有大部分單元格數據需要編輯，則可以全局編輯。 
全局表格編輯：點擊表格編輯按鈕，當前表格所有可編輯的數據單元格內顯示文本修改框或類似XLSX的角標，進入一種特殊得編輯狀態，不會給人直覺造成混亂。這一功能基本用于大面積需要填寫和修改時，如大型填寫報表。
大型數據表由于支持編輯數據處多，這種方法的另一個問題是容易填錯單元格，想象單元格的密集，用戶意外編輯錯誤也時有發生，這樣的話需要編輯/暫存/提交三個操作。如果發現編輯的內容報錯可被更正，應直接引導用戶更正；如果報錯內容不可被更正，則告知用戶原因。
大型數據表如需減少與表格無關的視覺干擾，提供表格的沉浸式閱讀體驗，可提供全屏查看的入口，但應注意可以讓用戶便捷的退出。全屏模式可以直接屏蔽掉頁面其它內容，只留下表格區域，用戶通過ESC鍵或按鈕隨時退出全屏模式，學習成本較低。
當表格數據為空時，在表格的空白內容處加入可創建的快捷入口，引導用戶新建表格數據，或者導入數據。如下圖郵箱已發送郵箱為空時：
當沒有創建訴求的，直接告之暫無數據。如數據是系統產生的，不是由用戶創建的，直接告之暫無數據，話術的表述則需與后臺文案的整體風格保持一致。
個人關于web表格設計的看法基本寫完了，在總結歸納中也發現了自己平常設計表格中的其他問題。大多表格設計在不同場景中需要隨機應變，沒有絕對的規范，只有相對的規范。我們要理解規范背后的原則，推導出適應其他場景的規范。
文章來源：站酷 作者：小龍哈
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
Apple 致力于讓每件產品都賞心悅目，與其說官網是產品展示平臺，倒不如說它是蘋果產品分支的延續。從 Apple.com 找設計靈感是每一位設計師都做過的事，那它到底有何魅力？文章對Apple的網頁設計展開了梳理分析，與大家分享。
每當有新產品發布時，我們都會被它的 Landing page 所吸引。不管是 AirPods Pro 也好，和前段時間發布的 iPad Pro 也一樣。
這背后是 Apple 基于 webGL 技術，創造的一種沉浸與交互式產品體驗。
我們在產品介紹頁可以看到，蘋果使用了大量的滾動 scroll 來體現連續性。
一方面，滾動作為大多數 Web 用戶最自然的操作，學習成本極低。
另一方面，在冗長的頁面下，滾動能讓產品特性保持更自然的轉場銜接。
iPad Pro 的連續性
另外，采用了大量的動畫式轉換（animated transition），即操作時展示的動態效果，以此來增加趣味性。
伴隨著豐富的、若隱顯現的章節文案，就像電影的旁白一樣，娓娓道來。
通過滾動的方式增加交互性，這是明智之舉。試想一下，如果只放置已渲染的演示視頻，那么用戶的操作會受到限制，只能在視頻中前進或后退，毫無樂趣可言。
AirPods的趣味性
說到言之有序，我們看 iPad 的頁面介紹。四款產品，分別是：iPad Pro、iPad Air、iPad、iPad mini。
拍攝角度的秩序感，可謂妙不可言。
iPad的秩序感
如此一來，即顯得有序，也不會導致視覺疲勞。
其次，官網與 iOS 保持協同的設計語言，給用戶呈現了一致的感官體驗。
從 iOS 11 開始，蘋果就采用了 Large Title 大標題的字體風格。字重也從 Regular + Light 的組合，轉向的 Medium + Bold ，以此增強信息傳播中的識別力。
HomePod
另外，高斯模糊的標題欄背景、產品的投影等設計語言也保持系統一貫的風格。我們可以很清晰的看到 Web 設計的同步轉變。
第三是視差帶來的層次感。
蘋果奉行包豪斯的無裝飾和極簡的理念。當然，它不是那種附庸的美觀及外表的光鮮，而是將復雜難懂的技術以簡潔的形式傳達給用戶。
Mac Pro 視差滾動
在信息層次方面，Apple 的編排設計由淺入深，猶如抽絲剝繭。很好的利用了視差滾動，傳達圖片與文字之間「層」的概念。這種深度感可以增加用戶的理解和樂趣。
不僅如此，樣式上富有視覺張力。或擴張、或收縮、或吸引、或排斥之感覺，呈現刺激與震撼。舉兩個例子：
A13芯片的擴張力
擴張力：整個畫面以 A13芯片 為視覺中心點，元素和布局圍繞這個視覺中心點向外擴張。采用發散式的視覺引導，視覺張力就出現了，讓人感覺巍峨壯觀。
Pro級攝像頭的排斥力
排斥力：通過元素的大小對比，可以形成一定強度的視覺排斥力。Pro級攝像頭 輔以大特寫，傳達空間意識。視覺上被其構圖、美感觸動。
再聊聊蘋果的高級感是怎么來的？
我們都知道，高飽和度的色彩，會影響人的情緒波動。相反，低飽和度的配色，對人眼的刺激較弱，會有一種冷靜且克制的高級感。
iMac Pro 高級感
回過頭來看蘋果官網的大部分頁面，除了產品界面色彩 和 按鈕藍 之外，其他的文字、背景、控件一律采用黑白灰色系，以此營造高級感。
甚至是 iPhone 11 Pro 新出的暗夜綠，也是高級灰中加了一點點綠而已。
換言之，減少使用顏色的數量，降低色彩的飽和度都能削減色彩對人的情緒，起到提升產品高級感的效果。
iPad 留白
除此之外，恰當的留白可以更加突出產品內容，讓重要的信息更準確的傳達。并且能營造出廣闊的空間感，讓畫面得到延伸，呈現一種意境美。
所以我們做設計時應當多做減法，避免無意義的視覺元素堆砌，反而能讓你的設計更有高級的氣質。
這又印證了現代主義建筑大師密斯·凡德羅的那句話：Less Is More。
當然，只有留白是不夠的。既然是做宣傳，那么一份高分辨率、精致的配圖就顯得尤為重要。
蘋果官網大部分的產品都是采用實拍+后期修圖，而非渲染圖。目的就是為了反映真實產品的質感、以及材質光影效果，這一點能看到蘋果對于品質的追求。
Designed by Apple in California
不僅如此，蘋果產品圣經《Designed by Apple in California》，以及壁紙同樣是由攝影師拍攝完成。有興趣的同學可以看下面這個幕后制作視頻，相當硬核。
做過英文 Web 的設計師都知道，英文往往比中文更好設計，相同的布局英文出來的效果也更好看。
這不是崇洋媚外，心理學有個詞叫做「母語羞澀」。簡單來說就是，中文對于我們來說，太常見了會讓人產生一種廉價感（實際上是羞澀感）的心理感受。
老外也一樣，你可以看到美國企業：蘋果、麥當勞、星巴克都是使用圖形 Logo，而日本企業不用母語，而是用英文，比如 SONY、TOYOTA、Canon。
你的下一臺電腦，何必是電腦。
回到蘋果官網，我們看到一部分文案是英文產品名稱，這個不會感覺羞澀。
那中文部分怎么辦呢？比較有意思的是，Apple 的本土化團隊用了完全不對仗但押韻、奇怪的排比、雙關、重復等修辭手法。雖然語感很差，但基本上能明白字面意思。
其實這樣做的目的就是為了創造一種陌生感、一種獨特的語言風格，來凸品牌氣質。舉幾個例子：
最后一點。生活要有儀式感，蘋果官網也有儀式感。
國際婦女節專題
在一些特殊的日子里，例如三八節當天，友商選擇打廣告促銷。而蘋果推出了國際婦女節專題，致敬女性的偉大，這一做法頗具人文情懷。
不過話又說回來，感動歸感動，還是參與友商的打折活動香。
文章來源：人人都是產品經理 作者：阿洋
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
近年來暗黑模式的設計趨勢開始一點點明顯，Ant Design 在這次 4.0 的升級中也對這類暗黑場景化的設計開始進行初步的探索，接下來就讓我們一起來看下 Ant Design 這一針對企業級的設計體系是如何設計暗黑模式的。
暗黑模式是指把所有 UI 換成黑色或者深色的一個模式。
需要說明的是，暗黑模式不只夜間模式：
暗黑模式更多的目的是希望使用者更加專注自己的操作任務，所以對于信息內容的表達會更注重視覺性；
而夜間模式則更多是出于在夜間或暗光環境使用下的健康角度考慮，避免在黑暗環境中長時間注視高亮光源帶來的視覺刺激，所以在保證可讀性的前提下，會采用更弱的對比來減少屏幕光對眼睛的刺激。
同時，從使用場景上來說，暗黑模式既可以在黑暗環境，也可以在亮光環境下使用，可以理解為是對淺色主題的一種場景化補充，而夜間模式只建議在黑暗環境下使用，在亮光環境使用時很可能并不保證信息可讀性。
1. 更加專注內容
試想一下，我們在電影院看電影時，為什么要全場關燈？甚至有些 APP，在影片的下方也會又一個模擬關燈效果的操作，來讓整個手機屏幕變黑，只剩下視屏畫面的部分，這都幫助我們可以更專注、更沉浸在當前的內容下。
色彩具有層級關系，深色會在視覺感官上自動后退，淺色部分則會向前延展，這樣對比強烈的層次關系可以讓用戶更注重被凸顯出來的內容和交互操作；尤其在信息負責界面內層級關系的合理拉開對操作效率都有明顯的促進作用。
2. 在暗光環境下更加適用
如今社會我們身處黑夜使用手機、電腦、iPad等設備的次數越來越多，環境光與屏幕亮度的明暗差距在夜間會被放大 ，亮度對比帶來視覺刺激也更加明顯，使用暗色模式可以縮小屏幕顯示內容與環境光強度的差距，同時也可以為設備的續航帶來積極影響，可以保證使用者在暗光環境下使用 OLED 設備的舒適度。
3. 大眾喜愛
黑色一直以來就可以給人以高級、神秘的語義象征，相比于淺色模式，暗色模式藏著更多可能性。
在這次暗黑模式的設計中主要遵循以下兩大設計原則：
1. 內容的舒適性
不論是顏色還是文字或是組件本身，在暗色環境下的使用感受應當是舒適的，而不是十分費力的，如果一個顏色在淺色下使用正常，在暗色下卻亮的刺眼或根本看不見，那必然不夠舒適也不可讀；所以在顏色的處理上不建議直接使用，這樣會讓界面變得到處都是「亮點」，讓眼睛不適的同時，也會帶來許多誤操作。
2. 信息的一致性
暗黑模式下的信息內容需要和淺色模式保持一致性，不應該打破原有的層級關系。舉個例子，在淺色模式下越深的顏色，與界面背景色對比度越大，也就越容易被人注意，視覺層級越高，比如 tooltip；在暗黑模式下我們同樣需要遵循這一規律，所以對應所使用的顏色也就越淺，反之則會越深。
在大量的企業級產品界面中，我們通常用只用一個白色背景結合分割線就可以搞定所有界面的板塊層級，因為在淺色模式下有投影可以借助，然而暗黑模式中投影將不足以起到如此功效，我們需要通過顏色來區分層級關系。
在經過對螞蟻企業級頁面的典型布局結構評估后，我們在中性色中增加了三個梯度，將中性色擴展至 13 個
并定義出通用情況下頁面中的框架層次，主要分為三大塊：
在目前的暗黑體系下，我們分別為這三大塊從淺到深定義了#1F1F1F、#141414、#000000 三個顏色，在實際應用中，你也可以根據自身業務的需求，從中性色板中直接選用或是依據透明度的思路自定義出合適的中性色彩。當定義出較為明確的框架層次和顏色后，也對后續系統中組件的顏色配置有著重要的指導意義。我們需要考慮組件出現在不同顏色背景下的可能性及其表現，盡量保持一致性。
眾所周知，暗黑模式與淺色模式最大的不同就在色彩的處理上，在暗黑模式中，我們并不想打破淺色模式下基礎色板的配置規律及色值，當一個應用或站點深淺模式并存時，希望在色彩上有一定延續和關聯，而不是毫不相關的兩套色板，這樣一是避免開發及后續的維護成本，二是實際切換和使用時，可以保證一致性，這意味著需要借助一定規則。
這里分享一下我們的處理思路：
基于 Ant Design 自然的設計價值觀，我們先從自然界中尋找靈感，如果說淺色模式如同初升時的朝陽，那暗黑模式就是落日下的晚霞，各有各的韻味，同一片天，唯一不同的是，受光線亮度的影響，晚霞整體會暗一些。
所以我們大體的設計思路也是基于淺色的基礎色板，通過結合透明度的轉換，去得到一套暗黑模式下的色彩。這樣的好處是，深淺模式下的色彩根基是同一個，在這樣的基礎上經過透明度的變換得到的結果也會相對和諧，同時也符合我們一致性的原則。
這里我們借助下面這兩個概念對透明度進行轉換：
對比度極性
對比度極性分為正極性和負極性。
這里可以給大家分享對比度查閱的一個工具：WebAIM，只要輸入色值就可以看到具體的值，十分方便。
正負極性差值
顧名思義便是正負兩者的差值，這里取的是絕對值。
根據一致性原則，我們嘗試通過對比一套顏色的正負極性變化趨勢來找到轉換規律。
首先可以看下，如果一個顏色在不做任何修改的前提下直接使用，它的正負極性趨勢以及差值趨勢的走勢和關系是怎么樣的，我們嘗試描繪出這樣的曲線，他們的變化規律也將作為我們規則轉換的參考標準。
經過對比，可以發現一些變化規律：
首先來說下「差值趨勢」，橫向對比可以發現，不同顏色的正負極性走勢是很不一樣的，可以看到在黃綠色段差值曲線達到一個變化峰值，這是由于黃綠色本身由于明度、飽和度值相比其他顏色偏高，所以總是有種刺眼的感覺，生活中也會用它來作為警示、提醒的作用，所以在深淺背景下的對比度有一個比較大的差異，可以說這個變化是正常的。
這點也可以從「正負對比度極性趨勢」兩者間的相對關系反應出來，從紅色到洋紅，綠線一開始從逐漸在藍線的上方一點，開始逐漸上移，最后在峰值處開始慢慢下移，在「極客藍」這個色相中接近重疊，在洋紅處又慢慢下移，說明淺色下越深的顏色，在深色中越亮，反之則越暗。
縱向比對單個色板，可以發現，其斜率變化主要受顏色的明度、飽和度影響，可以反應一個顏色的不同梯度在黑白背景下的變化規律。
有了這個大的變化規律，我們便可做到心中有數。首先以 Ant Design 的品牌色「破曉藍」為例，經過在多個業務、場景中不斷嘗試與調整，我們得到一個透明度轉換規則：
并將這個規則應用在其他 11 套色板中，驗證其可用性。這個過程確實沒有什么快捷通道，唯一的辦法就是不斷嘗試。
最后，我們將經過規則轉換的實色與常規顏色的變化趨勢做對比：
可以看到在大趨勢走向上左右兩側圖基本一致，這代表兩個色板在變化規律接近一致，基本可以證明規則的合理性。區別在于，對比度負極性和差值相對于右側未經處理的值明顯有所下降。這是由于透明度的處理讓暗色下的顏色在明度、飽和度上有所下降導致。
再仔細觀察可以發現，在左側的常規顏色中，從破曉藍-洋紅這段偏冷色系幾個顏色中，差值趨勢變化最平緩的是「極客藍」這顏色，這說明該顏色在深淺背景下的表現較為穩定，起伏不大，當基于一個統一的透明度規則前提下，會讓它在暗色下的對比度減弱，所以反而會導致差值趨勢變大，所以我們會發現差值趨勢變化較小的顏色轉移到了「破曉藍」、「洋紅」中，也是一個正?，F象。
最后可以看到顏色在調整過后實際應用的效果
在官網中點擊「切換」即可預覽：
如果上述 12 個色板不滿足你的業務需求，你也可以在官網上自己選擇顏色，我們會根據規則幫你生成一個暗色色板。
另外，如果在實際應用過程中，你選了色相在 225～325 間的深冷色系作為主色或強調色使用，建議適當提高透明度的值，避免在暗色界面上引起閱讀障礙。
暗黑模式中，文字的使用與淺色模式基本一致，依舊從 85%-65%-45%，唯一不同的地方在 disable 的狀態，其透明度值提升為 30%，避免顏色過淡真的「不可見」。另外，對于 #FFFFFF 的純白色文字，盡量避免大面積使用，尤其對于表格、列表這類偏閱讀瀏覽的場景，如有需要，做小范圍強調即可。
暗黑模式中的陰影規則與淺色模式基本保持一致，但由于本身的界面背景較深，在陰影色值上也有所加深，幫助層次更好的體現，整體將色值擴大到原先的 4 倍，但在陰影的位移、擴展上均保持不變。
分割線在暗黑模式中建議根據界面中常用的背景色，通過透明度換算成實色使用，Ant Design 中分割線主要有 #434343 和 #303030 兩種顏色，分別對應淺色模式下的 #D9D9D 和 #F0F0F0，這樣做的目的主要是為了避免帶來額外的交錯疊加，尤其對于表格類以及很多帶有 border 屬性的組件，實色會更為穩妥便于記憶。
適應性方面，Ant Design 的暗黑模式可以與海兔及可視化資產進行無縫銜接，使用時可以任意組合拖拽，你可以下載 Kitchen 插件，獲取海量資產。
暗黑模式最近越來越受到人們的關注，與某一特定產品的暗黑設計不同，Ant Design 的暗黑模式更多以設計體系的角度考慮企業級這個大場景下的內容，在易用性、擴展度、復用度等方面還有許多需要完善和繼續研究探索的地方，我們會在未來的迭代中逐步進行，先完成再完善。希望上述內容能對大家在暗黑模式的設計上有所幫助。
文章來源：優設 作者：AlibabaDesign
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
常見的網頁設計、文章設計錯誤
本文來自阮一峰分享
1.內容未按邏輯分成塊
用戶可以根據邏輯塊輕易的獲取信息。
具體做法為：將padding設置為120px-180px，同時不同的邏輯塊使用不同的背景。
2.每個邏輯塊的空白大小不一致
對于每個邏輯塊，需要設置同等大小且適宜的空白。否則網頁看起來會很混亂，作者不會對每個邏輯塊同等對待。
3.Padding不能設置過小，否則用戶無法將內容分為邏輯塊
為了這點，插入大的空白（至少120px），以使內容按邏輯塊分開。
4.背景圖片和文字 應該對比鮮明
5.在一頁中，樣式過多
太多不同 的排版和樣式將會使得頁面不太專業以及難以閱讀。
解決的方法是，以字體為例，設置一種字體，字體為正?；虼煮w（保證在兩種不同樣式之內）
6.背景顏色塊過于狹窄
7. 在一個狹窄的列中，放入了過多的文字
這導致用戶閱讀需跳很多行，整體看起來也不行。推薦的做法為，減少列的數量，精煉文字。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
2019草莓音樂節的主題是“循環世界Circular World”。
摩登天空聯合世界自然基金會(WWF)發起今年的音樂節主題“循環世界”，以環保為核心理念，攜手海內外環保機構對草莓音樂節進行多方位環保實踐，并聚合知乎、摩拜等多平臺力量影響年輕人，讓環保成為青年生活方式的一部分。
今年的主視覺海元素是被三個箭頭環繞的草莓星球，表達了“循環世界”的主題。風格延續了去年的樣式，色彩略有調整，并加入了太空元素。
今年的主視覺當然仍由摩登天空的當家工作室——MVM design label_工作室操刀。
這張是今年的主視覺海報。今年，MVM特地為各城市舉辦的2019草莓音樂節單獨設計了專門的海報，一樣的版式，不一樣的內容，既統一又包含新意。
2019草莓音樂節武漢站
2019草莓音樂節成都站
2019草莓音樂節西安站
2019草莓音樂節上海站
2019草莓音樂節長沙站
在今年3月30日的“地球一小時”公益活動中，草莓音樂節把自己的參與定義為“草莓星球一小時”。
而武漢OYO酒店與摩登天空聯合主辦的活動中，一張以“音樂滿房”為主題的插畫也分外有趣——原來大家為了迎接音樂節，都關上門在房間里引吭高歌呀…
音樂節配套周邊產品的銷售，推廣視覺設計也很有意思。
即使不是音樂迷，設計師對這樣的設計也無法抗拒吧！
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
目前從官方介紹來看，UI組件還相當齊全，可用它來快速搭建漂亮、時尚的網頁和UI設計作品，下面一起來看看介紹。
關于 Shards 這個主題雖然免費，但并不代表它只有「表面」，制作者還為性能性能考慮，壓縮版僅12KB大小，實在太好了，以這樣的大小，制作出來的網頁直接能秒開。
它并不是直接使用 Bootstrap 的設計樣式，所有的組件都是重新設計，以便得到統一的風格！
這是非常不錯的UI KIT素材 ，它還包含了10個額外的自定義組件，可以讓使用者快事制作著陸頁。
演示地址：https://designrevision.com/demo/shards/extra/app-promo.html
演示地址：https://designrevision.com/demo/shards/extra/agency-landing.html
Shards 含有豐富的 UI 組件，網頁端常用的元素幾乎包含了，大方便用戶自由定制。
顏色：
字體
圖標支持900+ Material icons 和 Font awesome 兩大圖標庫！
表單上的細節，也不容忽視：
還有日期組件的設計：
卡片
按鈕
導航菜單
我想這些漂亮的元素，已經足夠你設計一般的網頁，即使不夠，也完全可以自己利用 Sketch 源文件或 HTML 模板再創作。
藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
當我們打開一個網站，我們會看網站界面是否美觀，交互是否符合人性化，布局是否合理等等，這些因素對網站起到一定的影響作用，但最根本影響一個網站的是整個網站的可讀性。
良好的設計應該都是可讀的設計，如果信息都無法正常而清晰的傳達，那么設計就失去了意義。設計的可讀性和排版設計息息相關，與此同時，對比度的控制也是其中的核心。想要提升內容的可讀性，讓內容以更加順暢、更符合邏輯的形式呈現在用戶面前，可以通過以下幾種方式來提高網頁的可讀性。
要讓文字提高可讀性，可以通過調整字體樣式、外邊距、內邊距、顏色和對比度等參數來提高文字的可讀性。
字體樣式：字體的樣式會影響可讀性。
行長度：每行的字符個數對于整體的可讀性起著主要作用。如果文字段落非常寬，閱讀性差。同理，每行文字太短也不行，會給讀者的眼睛帶來壓力，造成混亂。
外邊距和內邊距：和行距一樣，元素周邊和之間的空隙也影響著用戶閱讀文字本身。
顏色與對比度：文字顏色與相應背景也至關重要。如果在綠色背景上寫綠色文字，就難以閱讀了。設計師選擇淺色字深色背景，或是深色字淺色背景，都是有原因的。對比使得字符容易閱讀。
目前文章內容流行的字體是14PX（像素），這樣不容易造成視覺疲勞。可以統一去設置全局的字體大小，包括行距。
除此，文字鏈接最好用顏色或是其他樣式跟正文區分開來，這樣讀者可以清楚的知道哪里可以點擊。例如：可以給a標簽寫個下劃線代碼text-decoration: underline；。
段落的可讀性一樣可以用過文字和圖片來提高。文字方面跟上面提到的，可以通過字體樣式、外邊距、內邊距、顏色和對比度等參數來調整之外，還可以通過段落行距來調整字段間距。
行距：每行文字間的間距也同樣重要。看看這篇文章，如果每行文字都與上下兩行粘在一起，你就無法理解這些句子。
可以從上圖看出，文字段落之間不留白可讀性不高。右邊的標題和段落之間、行與行之間和段落與段落之間都留了一定的距離，所以整體會顯得更為整潔和可讀性高，這些在網站當中用Margin、Padding和Line-height可以來調整留白的大小。切記，行距大小不是越大越好，一定要適當。
在通篇文字的文章當中也可以考慮適當的穿插一兩張圖片進去，配圖可以提高文章的可讀性。
區塊間也要有一定的間距才能提高區塊的可讀性。
區塊留白這個有點類似上面的文字段落留白，在網頁當中，每個區塊與區塊之間也要適當的留白，而這個留白主要還是體現在Margin和Padding上。如果取消兩個區塊的Margin和Padding，那兩個區塊的內容會聚集在一起，這樣不利于觀者去區分區塊之間的關系，也不利于閱讀。所以一般我們在給網站做界面的時候，都會設置一定的間距，就像蟬知系統中默認的間距是7px，當然，這個間距的大小都是可以調整的，看你怎么去設計這個頁面和頁面的整體風格是否和諧而定。
可以看到上圖左側區塊之間的間距為0，整體區塊和區塊之間看不出間隙，給人擁堵的感覺。但是右側留有一定的間隙，所以看起來比較舒暢，可讀性也相對高很多。
為什么說圖片也具有可讀性，要知道一張好的幻燈片設計可以起到一定的作用，大部分的網站第一眼看的就是幻燈片，所以圖片的設計也不能忽視。
圖片的設計可以通過對比來設計，比如色彩對比、字體對比等。切記勿用復雜的背景來當幻燈片，這樣標題在畫面上就不夠突出。
上面的例子，顯而易見，當圖片背景比較復雜的時候，文字的閱讀性就差一點。第一張圖的背景比較簡潔大方，加上不用設計的字體，自然而然的主題就凸顯出來了。
說到導航，這個其實是整個網站架構當中最重要的，所以我也把這點放到最后來講。網站一定要有清晰的導航，方便讀者瀏覽和了解整個網站的架構。所以在設計導航的時候一定要考慮到瀏覽者的習慣。
導航要簡單明了，避免奇怪的布局。
上面這個導航不是說做得不好看，而是找交互的設計用起來讓用戶會有點不舒服，導航下拉時，除頭部內容整個頁面整體下移，這也可能就是設計師特意做的效果，但是很明顯，效果不是特別出彩。
導航點擊狀態下的樣式和普通樣式需要有明顯區別。
上面的這個導航，點擊狀態下和正常顯示的樣式效果區別不大，所以識別性不夠高。
導航的層級關系設計簡單點，最好不要超過三級。
現在很多導航設計都將二級導航和三級導航放在一起，這樣受眾在瀏覽的時候也可以更清晰網站的架構。
優秀的網站，通常在用戶體驗上非常用心，而網站良好的客戶體驗除了優秀的界面設計、合理簡潔的框架布局，還有一點至關重要——網頁的可讀性。
藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
藍藍設計的小編 http://www.syprn.cn
