咱一起來聊聊排版的問題：
如果你看過我過往的文章，也許會對我的排版多少有點印象，夸張的大字，極強的對比，還有一些微妙的層級關系；坦誠的講，我的風格揉雜了 2 種設計體系 —— 瑞士風格 / 擬物風格；
整潔、嚴謹、工整、理性化、實用的特征是瑞士平面設計的精神所在；這種一絲不茍，傳達準確的風格，即所謂瑞士國際主義風格。簡單的說，由于 Swiss Design 這種風格簡單明確，傳達功能準確，因而很快得到世界范圍內的普遍認可，成為戰后影響最大的一種平面設計風格，也是國際最流行的風格，因此，又被稱為國際主義平面設計風格；
簡單的說，瑞士的這種設計風格典型的代表就是我們看到的雜志，其中有 3 個特點：講究網格 / 非常理智的克制顏色的使用 / 層級關系；有趣的是，審美和潮流是循環的，隨著時代的發展，越來越多的app開始重新挖掘出來瑞士風格并加以使用，比如我們iOS系統自帶的應用們，Spotify：
年少的時候，我經?？粗@些個app會不禁的問，為什么在沒有一張圖片的情況下還能如此好看？這些年終于明白了前人良苦用心：文字是內容，同樣也是構成；是信息，同樣也是裝飾；簡單可以理解為，不管在平面還是網頁亦或者是UI界面，在沒有可用的裝飾下，信息本身要承擔起裝飾和傳達的雙重功能，這就是瑞士風格的核心本質。
iOS是擬物的典型代表，網上對于這塊的講解已經過于飽和了，我也沒必要贅述；那么這一趴，來聊聊對我產生深遠影響的錘子科技吧。我第一次接觸到 smartisan OS 并沒有覺著多么驚艷，潛意識里只不過是覺著把 iOS 的圖標畫的更漂亮了一點而已…
但當我打開下圖這個頁面的時候，我意識到我對擬物的理解還是淺薄了，第一次被光影的層次震撼到：
通過光影塑造了一個三維空間，讓整個畫面豐富飽滿，也打破了我幼稚的設計觀，PS.不管錘子科技現在如何，我依然敬佩 Paco / 方遲 / 羅子雄的設計團隊為這個行業做出的貢獻，respect！
毫無保留的說，我的設計就是二者的融合，以 層次對比 作為核心理念。
啰嗦了半天，趕緊進入正題；如果你是一名產品體驗設計師，一定聽說過 “奧卡姆剃刀” ，這個定律通常用在交互鏈路的設計上（意思就是在用戶路徑中沒必要的步驟，省了就完事了），“如無必要，勿增實體” 即簡單有效原理；
通常來講，如果想要不平，把二維空間轉化成三維空間是必要的一步，需要在Z軸上下功夫；如果你恰巧也是一名攝影愛好者，可以想象下照相機的焦距和景深，工作原理是相同的，需要 前景 / 主體和背景 三個層次；當然，虛實的對比對信息的呈現和層次的拉開是極其重要的，這里需要通過景深來控制效果，你可以通過 photoshop 濾鏡-模糊畫廊的“場景模糊”來做到：
另外，空間的感覺想要被突顯，那么“光影和空氣”的價值就可以無限放大了，按照如上所說的結構，把內容和自然物質擺進去就好了，甚至可以做到舉一反三（比如不同顏色的氛圍，我就不展開了）：
整個case下來，你會發現用光來聚焦在信息上，自然而然就形成了我們說所得 “信息優先級”；有點時候空氣和光影的飽滿程度超乎你的想象，這種自然存在的物質可以很好的幫助畫面分層，以達到填充的效果，并不是一定要依賴于實體化的裝飾。
本來不打算再開一個章節說這個，但還是覺著很有必要再說下（我好糾結），作為PPT來講，ta的主要用途分為兩種：其一是給人看的，其二是給人講的；不管是哪種，盡可能的簡化文字，是對輸入者關愛；
以上圖為例（實名diss自己的作品），坦誠的講左邊的部分大多數觀者是不會有心思來看的，按照視覺系統的處理，這部分就會被當成一個“面”而被忽略掉，這種情況下右邊顯得有力很多，也能幫助觀者聚焦信息，所以還是那句話，能不寫的就別寫，能少些的別多寫，保持信息的密度也是設計師必要的職責之一。
作者：負能量的補給站 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
界面設計是一個很龐大的體系，具有很多原則，比如輕量、容錯、清晰等等，其中包含了交互層面以及視覺層面等，今天我想單獨把視覺剝離出來，來講一講我對界面設計“視覺層面”的理解與認知。
在我看來，界面設計的視覺層面主要可以分為三個維度來解析：信息傳遞、視覺美化、創意創新。
信息傳遞是讓用戶看的明白，快速清晰的獲取信息；
視覺美化是讓用戶看的舒服，讓界面足夠美觀；
創新創意是讓用戶看的驚喜，看到一些不一樣的創意點。
如下圖:
三個維度的目標如何實現呢？我提取了以下三個關鍵詞：
清晰、和諧、獨特是我們要達成的目標，達成目標一定會有一些原理所在，而有了原理就會有具體的執行方法，所以后面的每一個知識點，我都會按照“設計目標-執行原理-執行方法”的邏輯給大家講解，大綱如下：
1 清晰
1.1清晰-降噪-容器整合
1.2清晰-聚焦-局部放大
2 和諧
2.1 和諧-呼應-顏色呼應
2.2 和諧-節奏-變化對比
2.3 和諧-飽滿-負形縮減
3 獨特
3.1 獨特-品牌延展-IP形象結合
3.2 獨特-事物本意-事物圖形化
1.清晰
1.1清晰-降噪-容器整合
設計目標：清晰
執行原理：信息降噪
執行方法：容器整合
當界面信息過于分散時，會對用戶造成不必要的干擾，導致用戶產生疑惑甚至直接離開界面。
作為設計師，要做的就是對信息進行整合，我們可以稱之為信息減噪，目的就是讓頁面更加清晰，減少干擾。
這里我經常使用“容器整合法”來讓內容更加清晰、聚焦。
當分散的內容裝進一個“容器后”，就可以使內容聚焦在容器當中，讓信息更加規整。而卡片就是一個很好的“容器”。
實際案例：
在改版騰訊動漫個人中心的時候，頭部就存在信息分散不聚焦的問題，四個視覺觸點（綠色圈處）分散在四個角落，形成極大干擾。
這里我就采用了”卡片容器“的方法，將信息裝進容器中，減少分散信息的干擾，使界面更加清晰、工整，效果如下：
現在很多產品都在使用卡片化的布局，尤其是在信息數量、層級較多的時候，更加需要有容器將其規整起來，這樣才會讓界面保持不亂！
1.2 清晰-聚焦-局部放大
設計目標：清晰
執行原理：聚焦
執行方法：局部放大
我們在平時做需求的時候，經常會遇到信息特別多，特別亂的時候，如果此時我們選擇什么都想突出，最后的結果一定適得其反，什么都突出部不了，這時候就需要我們選擇一些內容來進行局部放大，反而可以讓整體信息更加聚焦、清晰。
這種方法經常用在有數字展示的頁面當中，比如下面這種頁面：
再比如，下面這個模塊信息，如果”3“沒有放大，整體的信息會亂到你眼花繚亂，我們看下對比：
所以，大家在遇到有數字，且信息雜亂的時候，就可以采用局部放大的方式來使整體更加聚焦、清晰。
2.和諧
2.1 和諧-呼應-顏色呼應
設計目標：和諧
執行原理：呼應
執行方法：以顏色呼應為例
很多時候我們會覺得自己做的東西很不和諧，其中一個很重要的原因就是因為頁面中沒有貫穿的元素，也就是沒有呼應，很常用的一個呼應的方法就是顏色呼應。
例如這個畫面總看起來不夠和諧，你會覺得綠色很突兀，就是因為顏色上沒有呼應：
而一旦你想辦法，讓綠色“事出有因”，比如取自眼鏡的顏色：
那么，突兀的問題解決了，和諧的目標也就實現了。
而剛才那個人中心的界面：
我們會發現，圖標的顏色也是取自背景色，所以整體看起來才會如此和諧。
除了顏色呼應，還有很多呼應的方式，比如圖形、圖標風格等等，這里就不再舉例了。
2.2 和諧-節奏感-對比變化
設計目標：和諧
執行原理：節奏感
執行方法：對比變化
對于音樂，節奏感是非常重要的，如果一段音樂一直是一個頻率，那可能也算不上音樂了。
界面也是一樣的，節奏感是讓頁面變得“和諧”很重要的因素之一，如何做到呢？
我們在展示文字列表的時候，你覺得下面兩種哪個更舒服些呢？
我猜你會覺得第二個舒服一些，因為它有變化，有節奏感，所以它和諧、舒適。
我們會發現很多產品首頁帶有封面圖的列表都有很多種排法，例如1帶多，1x2，2x2，2x3等等：
就是為了防止每個模塊過于重復，如果每個模塊都是每排兩張封面，一直下來：
看起來會非常乏味。
2.3 和諧-飽滿-負形縮減
設計目標：和諧
執行原理：飽滿
執行方法：負形縮減
在做圖標或者字體的時候，經常要講一個原則就是“飽滿”，界面上每個“不能拆分的元素”都需要盡量做到飽滿，比如圖標，再比如下面這個信息組件：
正文就屬于不能拆分的單一原子，大家可能會問，這種信息不就是方方正正的一個信息塊嗎，怎么會不飽滿呢，比如行間距過大：
再比如，我在優化騰訊動漫信息流的時候，發現正文出現的表情遠遠大于文字，如下圖：
表情一旦出現，就會造成大量空隙（負形過大），導致整體不夠飽滿、和諧。
我們可以看下其他產品，表情和文字幾乎都是一樣的大小，他們都會盡量縮小負形空間（也就是空隙小大）：
在這樣的原則之下，優化后的效果如下：
以上是關于和諧的幾點方法。
3.獨特
如果你的界面做到了清晰、和諧，在視覺層面就已經算是及格了，如果還能加上一點小創意，就可以讓人眼前一亮。
如何能夠做到獨特？可以從兩方面出發，1是品牌，2是內容本身含義。
3.1獨特-品牌延展-吉祥物結合
設計目標：獨特
執行原理：品牌延展
執行方法：IP形象結合
從品牌出發，可以有很多方向，比如logo，圖形，品牌吉祥物等，下面以品牌吉祥物為例：
在做小說閱讀器的時候，有一個設置選項是選擇文字的背景顏色，選擇控件是圓形，而品牌形象也偏圓形，此時就可以將圓形控件與形象相互結合:
但是選擇控件有兩種狀態，為了更加生動，就讓給形象正面面對你的時候作為選擇狀態，而轉過身作為非選擇狀態，大概效果如下:
此創意已在騰訊動漫小說落地實現。
3.2 獨特-事物本意延展-事物圖形化
設計目標：獨特
執行原理：事物本意延展
執行方法：事物圖形化
除了品牌，還可以根據事物本身的意思來延展圖形，比如日間夜間模式的切換按鈕，男女性別的切換按鈕，都可以利用事物本身的含義來延展圖形設計:
此創意已在騰訊動漫個人中心模塊落地。
再比如，彈幕的展示方式，就可以聯想到電視機，再把電視機圖形化，如下圖:
這里需要注意下，有時候如果圖形過于普通，可以配合動效來增加獨特性，但一定要注意開發成本。
作者：黑澤雙熾 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
01
什么是靈動島（Dynamic island）
2022蘋果秋季新品發布會，備受關注的新一代iPhone如期而至，此次發布會最大的亮點是iPhone 14 Pro系列一改之前「劉?！乖O計，首次采用了「藥丸」挖孔屏。雖然「藥丸」在安卓陣營中并不是什么新鮮玩意，但一向以創新著稱的蘋果還是玩出了不一樣的花樣，帶來了全新的交互方式，模糊了硬件和軟件的界限，通過實時變化顯示重要的提醒、通知以及簡單的功能操作，蘋果把這一創新稱之為靈動島（Dynamic island）。
02
靈動島能做什么 / 不能做什么
靈動島其實可以簡單的理解為基于前置攝像頭區域拓展的消息通知和快捷操作的新交互方式。
來電
當有來電時，靈動島會發生變化，并在后臺打電話時顯示通話時間和聲音波紋。
音樂
有點類似于鎖屏后的音樂功能操作，保留了基本的播放、暫停、前進、后退等功能。
Airpods
連接AirPods后，AirPods的型號外觀和當前電量會一起顯示。
導航
顯示導航方向和距離，并且能夠在適當的時候放大顯示更多導航信息。
Face ID
以前Face ID認證會顯示在屏幕中間，現在集成于靈動島的擴展功能之中。
充電
當充電時，會顯示充電的狀態以及當前電量百分比。
當然，目前除了官方展示的這些功能以外，還會有更多的應用方式，在此不一一列舉。但靈動島也并不是萬能的，例如會存在以下的局限性：
重度使用場景
從官方給出的樣例來看，靈動島更多的是承擔了消息通知和提醒的作用，并不適用于重度使用和復雜交互等場景，例如消息聊天、刷短視頻、買賣交易等等。
過于復雜的圖形
受限于前置物理攝像頭，靈動島這個區域并不能顯示過于復雜的圖形，并需要避開攝像頭區域，因為該區域是不能顯示任何圖像的。
軟硬件的邊界
靈動島的實際效果并不會像宣傳圖中那樣好，特別是在反光強烈的戶外。攝像頭的挖孔清晰可見的，即使是在黑色不發光的OLED屏幕上，軟件和硬件的界限還是能夠明顯區分。
03
對于靈動島的各方反應
新事物的出現，總會伴隨著支持和反對兩種聲音，此次靈動島的創新交互，自然也是褒貶不一，還需要經受時間的考驗，因為即使是蘋果這樣的公司也難免會犯錯，比如3D Touch、MacBook上的Touch bar等。
支持方認為「靈動島是繼劉海屏之后的又一個成功設計，甚至會超越劉海屏，更受歡迎」。
「靈動島的設計非常討巧，同時也給挖孔屏帶來了更多的想象空間」。
而反對方的理由也十分充分，首先是羅永浩第一時間發表了自己的觀點，表面上是硬贊這個創新，但實則是諷刺了這樣多此一舉的方式，「先在臉上涂屎，然后再把屎的顏色調整得跟粉底差不多」
很多的輿論認為，靈動島的創新是蘋果的一種無奈和妥協，因為自從第一代iPhone革新性的使用觸摸屏之后，十多年以來手機在工業設計方面并沒有太多的創新，大部分廠家是在屏幕分辨率，后蓋材質，攝像頭像素上面做文章，而蘋果作為一個工業設計創新的公司，也只能通過后置攝像頭模組的排列來維持每一代iPhone的變化。所以此次靈動島的創新，被認為是工業設計乏力之后推動交互設計創新的無奈之舉。
但無論支持還是反對，前置攝像頭挖孔屏終究是一個過渡性的方案，最終會被全面屏所替代，而在這個過渡時期，很明顯蘋果的解決思路與國內的絕大多數廠商都不一樣。
04
為什么國產手機不做靈動島
國產手機的前置攝像頭解決方案除了「劉?！挂酝?，單攝像頭「圓孔」和雙攝像頭「藥丸」設計都已經非常成熟，但是為什么經過這么多年的迭代，依然沒有創新呢？
思維方式的差異
國產手機廠商的思路跟蘋果相反，希望盡可能的把前置攝像頭做得越小越好，甚至頭部的廠商嘗試探索升降攝像頭和屏下攝像頭的解決方案，目的就是為了把前置攝像頭隱藏。而蘋果的思路則是，既然現階段的技術沒有辦法把前置攝像頭隱藏，那么干脆就以此為基礎，把這個區域運用到極致。
缺少創新和引領者
似乎國內的用戶更關心的是電量是否持久、屏幕刷新率高不高、拍照功能強不強大等問題，秉持著「人民需要什么，我們就造什么」的成功理念，各大廠商也開始在這些方面內卷，從60Hz到120Hz刷新率，從千萬像素到一億像素，從萊卡加持到一英寸大底傳感器... 大家都在做從1到100的事情，而很少有關注從0到1，因為這樣做的性價比的確不高。
市場的接受和認可程度
當劉海屏第一次出現的時候，很多用戶都在吐槽，其中也包括很多蘋果的忠實用戶，寧愿買iphone8P也不愿意使用劉海屏的iPhone X。而經過一兩年的審美教育以及國產手機的跟風之后，才慢慢的被更多用戶所接受。因此國內的廠商很難有信心通過一己之力去改變用戶習慣，并贏得市場的認可。我相信，蘋果發布以后，各大廠商已經在積極的學習和模仿，新的一輪內卷即將拉開帷幕。
即便如此，國產廠商也并不是完全沒有在前置攝像頭的區域努力嘗試過。例如魅族曾經在前置攝像頭上顯示當前電量，稱之為「環形電量」，并盡可能的使其與狀態欄的其它信息融為一體。
榮耀的通話時間膠囊和自拍膠囊，都以前置攝像頭為基礎做延展，可以看得出在想盡辦法的規避前置攝像頭所帶來的不好體驗。
雖然VIVO的原子通知不是圍繞前置攝像頭區域拓展，但從效果和想法來看，也與靈動島的概念比較類似。
HTC曾經出過一款HTC U Ultra，當然那時候還沒有全面屏的概念，所以HTC把它稱之為副屏，可以顯示消息通知、音樂播放操作、App快捷入口等等。
除此以外，幾乎所有劉海屏的手機都有把劉海隱藏起來的功能。
05
對設計師的影響
靈動島的出現，對 iOS 原本通知、交互、卡片、彈窗等一系列交互規范進行了解構再重做，就好比「劉海屏」首次出現的時候，需要設計師對全新交互邏輯、卡片行為、動畫等重新適配。那么對于「靈動島」我想需要考慮的是這幾個方面。
新的交互方式
之所以叫靈動島，就是因為它是「靈動」的，擁有不同的狀態變化，以適應各種功能提示和操作。設計師在使用這個功能的時候，需要充分考慮其場景，恰如其分的給予提醒而不給用戶帶來過多的打擾。
新的容器
不同形態的容器可以裝載不同的內容，相比于以往常規的通知提醒，新的容器可以展示更多的信息，甚至是簡單的功能操作。在提出解決方案的時候，留給設計師更多的想象空間。
新的表達方式
靈動島相當于一個永遠在桌面上的島嶼，比任何App的優先級都要高，所以會成為各個應用的必爭之地，使用一種好的表達方式，必然能夠達到事半功倍的效果，因此也是考驗設計師在寸土寸金的區域中，通過視覺化手段表達的能力。
最后，我想蘋果的初衷是為了更好的用戶體驗，消除一部分用戶對于挖孔屏的焦慮，如果能夠真正的站在用戶的角度、克制的去使用新的交互方式，會得到用戶的喜愛和市場的認可。
我認為靈動島既是一種創新也是一種妥協，對于工業設計硬件創新乏力的妥協，更是對技術發展的妥協。我也相信，真正的全面屏時代終究會到來，期待那個時候蘋果再一次給我們帶來真正意義上的，里程碑式的，創新！
電影《再次出發之紐約遇見你》中有一個浪漫的場景，男主和女主通過一根耳機分線器一起聽著音樂，一起感受著當下同一段旋律。通過這根分線器，他們分享著自己的歌單，分享著當下的情緒，隔絕外界的紛擾，游蕩在大街小巷。
這種聽歌方式我也很喜歡，同樣的歌曲讓人產生了不一樣的感受。我想，可能是陪伴和共鳴賦予了這首歌新的生命力吧!
如今，無需分線器，網易云音樂一起聽可以讓你和那個TA隨時一起欣賞音樂、分享心情。前年7月份上線的這個功能獲得了用戶的一致好評，之后的數據表現也是遠超預期。但是，在眾多的用戶反饋中，最多的一個痛點是：身邊沒有人陪我一起聽，能不能做個匹配功能，找陌生人一起聽？
站在業務的層面考慮，一起聽作為一個熟人聽歌的功能，在戀人和親密好友之間普及度非常高，但同時也要考慮當這部分用戶數據增長到達瓶頸后，一起聽如何拓展新的用戶群。陌生人一起聽是一個很好的方向，能夠突破熟人社交的限制，擁抱更多社交關系拓展的可能性。
為了滿足這一部分用戶的需求，陌生人一起聽的項目在決策層的支持下進入了探索階段。這一階段主要想要知道什么樣的產品形態適合陌生人一起聽，是在原有的熟人一起聽的框架內進行拓展，還是大膽顛覆更加讓人眼前一亮呢？每位小伙伴都描述著自己的構想，朝著不同方向探索。經過一輪輪的方案討論，最終我們選擇了“星球”作為框架，來承載陌生人一起聽的設計。大概的構想是這樣的：當我在聽一首歌，感覺孤單并希望有人陪伴時。可以通過一個入口進入到一個由光點組成的星球，每個光點代表一個當前也在聽這首歌曲的用戶。我可以展示自己的狀態，和其他的用戶進行互動。當我對一個用戶感興趣時，可以選擇“跟隨”TA，每當TA去往另一個星球（也就是聽其他的歌時），我也會自動移動到那個星球，跟隨著TA一起聽。
根據上述設想，設計團隊還產出了一些方案來還原大家心中的“星球”，下面是早期一個方案的動態演示，黑膠上的封面變化為一個同色系的星球，每個光點代表一個正在聽這首歌的陌生人。
我們將這個大概構想告知開發同學后，得知需要的人力和時間成本遠超我們預期。由于決策層希望能夠在一起聽的熱度未退時盡快上線陌生人版，我們不得不把這個星球版的方案暫時擱置，重新構想在原有框架內的設計方案。
決定在原有框架內進行設計后，我們就需要收攏之前發散的想法。針對主要需求進行設計，把有限的資源用到刀刃上。最終確定的產品形態似乎很簡單直接，點一下按鈕，匹配一個愿意和我一起聽歌的人，但是到了視覺設計階段，就需要考慮更多的問題。
從關系的角度講。熟人之間比較親密，陌生人之間要保持一定距離，慢慢了解對方。與熟人一起聽有著穩定的預期，但是陌生人帶來的是不穩定，這種不穩定可能是緣分和驚喜，也可能是騷擾和驚嚇。考慮到這種不同，做陌生人一起聽的功能就不能夠完全套用熟人的設計，而是要針對性地進行重新思考。
首先，功能的入口能夠給用戶第一印象，我們用了一個動畫表達兩個陌生人沉浸在音樂中的含義，兩個匿名小人安靜地呆在一起，音符環繞著它們運動，暗示他們正在一起聽歌。通過這種表達幫助用戶快速了解功能，同時渲染氛圍，吸引用戶使用。
在熟人一起聽歌過程中，為了表達親密，表現形式上采用了耳機共享，頭像疊放的表現形式。但在陌生人之間，為了避免過于親密，就去掉了耳機線。為了控制社交距離，頭像不再疊著放了。陌生人的頭像也模糊處理來保持神秘感。
為了保證沒有社交意愿的用戶不被打擾，同時為了避免社交過程過于快餐化，陌生人一起聽采用了一方申請，另一方同意才可以公開身份的規則。為了配合這個規則，我們設計了陌生人揭面機制來引導用戶和傳達信息。匹配成功后，雙方會先隱藏身份聽歌。以此來鼓勵用戶盡量關注音樂本身，而不是純粹為了交友而進行一起聽。當一起聽了5分鐘后，對方的面具會小幅度上下移動，暗示用戶可以點擊。點擊對方的面具后會發出公開身份的申請，對方同意后才可以揭開面具。后續聽歌過程中，雙方就在身份公開的情況下一起聽歌。如果相處愉快，可以去對方主頁了解更多信息，甚至互關成為好友，下一次以熟人的身份邀請一起聽。
“于千萬人之中，遇見你所遇見的人”，這是我們想在匹配的過程中體現的緣分感。受限于開發成本，匹配動畫只能在一個小小的圓形容器里去設計。下面四個方案是前期的探索稿，主要是把人抽象成一個個點，點可能代表一種顏色、一顆星星、一個光點，點的運動表達尋找的過程。
最后選用了第四個，進行最終優化后的呈現如下。通過雷達的轉動表達尋找，浮動的光點代表一個個陌生人，最終受到召喚的那個TA飛入雷達范圍，發出代表回應的音波后，變大形成一個蒙面的頭像。（由于時間關系，此動畫后半段僅在安卓端實現）
如果你仔細地用過一起聽，可能會發現雙紅心彩蛋，這份驚喜感也是我們希望讓雙方感受到的。當你喜歡了一首對方也喜歡的歌曲，都會出現一個兩個愛心碰撞出音符的動畫，在驚喜的同時也會體驗到來自陌生人的認同感。
至此，在這一版的一起聽中，我們希望用戶能夠獲得的感受是：“兩個陌生人雖然素不相識，不方便通過言語交流，但是彼此分享同一首歌曲，互相陪伴，產生共鳴，溫暖而美妙?！闭绻鲁堑脑姟堕T前》里的那句：“草在結它的種子，風在搖它的葉子。我們站著，不說話，就十分美好”。
陌生人一起聽上線后一個月左右，我們和用研團隊一起在杭州的幾個大學周邊進行了用戶訪談，包括面訪和攔訪，在一線傾聽用戶的聲音。主要調研使用過一起聽用戶的使用情況、未使用過一起聽用戶對于一起聽的認知情況，總結問題后為一起聽后續的功能迭代和運營策略提供參考和建議。
根據調研結論，我們按照用戶使用一起聽前中后的順序將問題進行排列，分析用戶的問題和痛點，確定了之后的優化方向。
我們結合數據表現和用戶調研，計劃在接下來的迭代中實現更多有趣的玩兒法。首先亟待解決的是用戶聊天的需求。在熟人一起聽中，用戶一般使用微信作為聊天工具，一般不會考慮在云音樂里進行聊天。當陌生人一起聽上線后，能夠即時地與陌生人聊天就是一個最剛需的社交需求了。雖然云音樂已經有私信功能可以供我們進行復用，但是我們希望能夠將一起聽時的聊天做得足夠輕量且能夠隨時觸達，以此來提高聊天功能的使用率。
設計過程中我們結合場景進行思考和創新，經過幾輪方案的篩選，最后大家對于一個問題產生爭論：是進入聊天模式才可以收發消息呢？還是直接在播放頁展示消息，隨時聊天呢？
下圖中，方案1能夠減輕打擾，但是無法在播放頁第一時間看到對方發的消息。
方案2有一定的打擾，但是能夠第一時間看到消息，讓聽歌場景和聊天場景無縫銜接。
為了減少用戶的操作步驟，把功能做得輕量化，最終選擇了更加直接的方案2，同時為了避免打擾，每一方的消息氣泡的展示數量設置上限為2條，超過2條就會收起到記錄中。
下面的視頻是聊天的簡單演示，可以發現氣泡通過背景模糊來區分前后內容，氣泡的出現和消失不改變黑膠頁的原有結構。
很多人用社恐來自嘲，表達自己想與人社交，但是又存在邁出第一步的障礙。陌生人一起聽是一個匿名功能，很適合希望輕度社交的用戶。在匿名的基礎上，我們希望在聽歌過程中，能夠為用戶帶來更多輕量的、無壓力的社交方式，幫助希望社交的用戶逐漸熟悉彼此，找到志同道合的朋友。
個人信息逐步展示就是基于上述的需求誕生的創新功能。隨著匿名一起聽的進程，用戶可以逐步解鎖對方的信息，一部分是雙方的共同信息用以產生共鳴，另一部分是對方的特色信息用以展示自身特點。在聽歌的過程中逐漸了解對方，最后決定是否揭面進行更深度的交流。
首先，在共同信息的提示方式的設計上，我們并沒有簡單地用一個紅點去提醒用戶。而是用頭像的發光來表示共鳴的含義，頭像四周飄散的粒子來隱喻共同信息。讓每一處的設計都能貼合一起聽的風格。
共同信息在一個浮層上展示，我們把當前展示的信息控制為一個，通過上下滑動來切換。除了共同信息，用戶可以直觀地設置自己的狀態，讓自己更加像一個活生生的人。
當完成一起聽后，會有一個結果頁來記錄聽歌過程中產生的各種數據。舊版的結果頁用戶反饋信息不夠豐富，分享欲望不強。
新的結果頁增加了雙方的相似度、聊天條數這些數據，并且根據這些數據不同，會生成一個表達關系的成語，顏色有對應的變化。比如我們相似度很高，并且互發了很多條聊天消息的話，就會得到一拍即合的成語和紅色的結果頁。
與陌生人度過一段聽歌之旅很容易讓人產生分享欲，在社交媒體搜索一起聽可以發現很多用戶都用結果頁配圖發帖，并訴說自己與陌生人之間的互動故事。
一起聽經過這兩次比較大的更新后，獲得一些不錯的成績。截止至2021年12月，周末的平均DAU數據從130W提升到了200萬，增量的70W中有大約30%來自于陌生人一起聽。在2021年3月的云音樂整體滿意度監測中，22%的用戶表示自己經常使用一起聽，滿意度得分4.66（滿分5分），在云音樂所有主要功能中居首位。
未來，我們會繼續一起聽的創新腳步，還有更多的可能性等待我們探索。希望未來能夠為用戶帶來更多元的一起聽體驗。最后，我想用下面的這張圖來結尾，它是同樣主打與陌生人社交和陪伴的游戲《光遇》的一張美宣圖，是我最近無意間在它的官網發現的。當時看到這張圖后突然發現它和陌生人一起聽的入口介紹圖表達方式竟然這么接近。在這個溫馨的畫面里，代表“光”的白鳥圍繞著你和我正如音樂環繞著你和我，彼此陪伴、傳遞溫暖、分享喜悅~
在產品設計中，當有新上線的功能或隱藏功能時，我們通常會給予用戶提示。常見的有小紅點、角標、黑色遮罩+文字提示等這類靜態提示。
而人類是視覺生物，相比于靜態內容，我們的注意力更容易被動態內容吸引。
今天來聊一下頁面中常見的動態引導。
當你看到這個頁面時
我想你會先被色彩凸出的元素吸引，然后是面積占比大的元素，最后根據閱讀習慣從上到下，從左到右，依次查看其他內容。（大致如下圖）
而當頁面元素都賦予細節時
假如我想讓你關注到其中某個較小元素
其實只需要為它添加動態，便能使其脫穎而出，這就是產品設計中的動態引導。
▍新功能提示 ?
當產品上線新功能時，設計師們都會根據功能重要程度，來決定使用什么形式讓入口元素和其他元素區分開來。常見的有小紅點、標簽、氣泡這類靜態點綴元素（通常這類形式只出現一次，當用戶點擊后就會消失）。當然，也有將上述點綴元素動態處理的。如果入口是圖標，甚至可以為圖標制作動畫，這在很多電商產品的品類區經?？梢钥吹健?
動態處理的形式，比原本的靜態更容易引起用戶對元素的注意力（與動態方式有關），甚至傳遞某種情緒。由于是循環播放的動畫，因此可以持續吸引用戶注意力。
ps：據說，每當頁面多出一個會動的元素，后臺就會多出這樣一些留言，捅了開發窩了[Doge]。
▍誘導用戶操作 ?
動態引導還常常被設計師用來強調重要內容（有可能被產品、運營拿刀架脖子），來達成某些數據指標，通過利用動態誘導用戶操作。
例如：在會員卡片中添加光效、在廣告中讓按鈕進行縮放、為簽到入口圖標設置動畫。
這些都能充分引起用戶注意，甚至提升功能點擊率。
▍隱藏功能提示 ?
我們知道，在大屏上有更多空間可以展示信息。但在移動端，受屏幕大小限制，設計師通常會折疊或隱藏不常用的功能，來保持頁面簡潔。
對于這些不可見的功能，在初次使用時需要進行引導，才能被用戶感知與使用。
▍操作教學指引 ?
講到引導，還必須要提的是手勢引導，通過動態直觀展示不同手勢的作用，提示用戶如何與產品進行交互。
這在游戲教學中就常常使用，它可以幫助用戶快速理解游戲玩法。
回到視頻 App 中，你是否留意到，當你第一打開視頻時， App 會提醒你雙擊屏幕可以點贊，上下滑動可以切換視頻。
在產品交互設計中，如果使用到一些新穎的交互方式，這類引導可以大幅降低用戶學習成本，幫助用戶快速上手。
▍信息高效傳遞 ?
動態敘述的直觀性，使得我們可以減少對復雜信息進行大量文字描述。通過動態設計，我們可以創建視覺故事，這有助于將復雜信息以更簡單、清晰的方式進行傳遞，從而幫助用戶快速完成任務。
也因此，在一些含有復雜操作的彈窗中，漸漸開始應用。
但是需要注意的是，上述這些大多都只在第一次使用時才會觸發。
當然有特例，例如：
在 App Store 每次下載應用進行驗證時（面容解鎖的情況下），系統會通過動態提醒用戶電源鍵位置，并告知用戶需要雙擊進行人臉識別。
在掃碼時，弱光場景下出現的手電筒，通過動態引起用戶注意，指引用戶使用。
以及作為動態演示，幫助用戶理解如何使用手掌滑動截屏
如何進行NFC感應等等..
動態引導像是設計師用來控制我們眼睛的法寶，有的人用它改善產品體驗，有的人用它提升商業轉化。
但法寶雖好，我們只有理性使用，才能避免用戶迷失在這眼花繚亂的世界中。
作者：幺零三
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在網絡購物發達的互聯網時代，大部分年輕人（包括小?。┰谫徺I商品前都會在各種平臺上找測評貼，其中小紅書就是代表平臺之一。
小紅書入駐了許多博主，從明星到素人，他們經常發布筆記幫大家種草或者拔草，UGC+電商的模式也實現了完美的購物流程閉環，使得小紅書擁有了一大批忠誠用戶（小紅薯）。那么為了讓用戶買買買，小紅書都做對了哪些事情呢？
本篇文章將從小紅書App的界面設計和交互設計進行分析。
一、小紅書至簡的界面設計
『色調』
小紅書色調以紅色為主，與其名稱呼應，同時紅色受到年輕女性歡迎，與用戶的產品形象相吻合。
該設計還采用了女性喜愛的可愛清新風格。
小紅書為其垂直官方帳號（穿搭薯、娛樂薯、校園薯等）也設計了可愛的卡通人物形象，為用戶打造了小紅薯表情包。
『界面』
小紅書與其它同類的競品風格不太類似，其界面給人簡潔而又清晰的印象。這種簡潔和清晰源自對于功能設置上的克制。在Feed流上，為用戶提供最佳的信息閱讀體驗。
『Icon』
小紅書在一些內容豐富的頁面，icon一般為線性，降低視覺感；面性的icon則會出現在比較醒目的地方，提醒用戶點擊；擬物風格的icon一般為禮物圖標等。
二、交互設計，如何做到簡單？
小紅書的整體界面比較簡潔，使用起來很簡單。首頁只有三大功能模塊，用戶操作路徑清晰。底部導航條之間分類明確，互不干擾，常用功能都能很快找到，不常用功能放在側邊欄中，節省了頁面空間。
小紅書的3種內容方式
圖文：圖文筆記的瀏覽界面就是圖片與文字分開的形式，圖片左右滑動瀏覽，一般用戶會增加標簽輔助說明。文字也只能利用圖形來增加可看性。此外在文章內還可以增加商品鏈接，直接引導轉化。
視頻：短視頻的瀏覽界面與抖音非常類似了，文字說明的內容超過一定字數會折疊。當然也有一些短視頻沒有的功能彈幕。右上角有分享功能，點贊、收藏和評論則在左下角。
直播：小紅書直播內容主要是以互動為主，不同于其他的直播模式，而是以主播分享體驗向用戶推薦商品，這樣的方式更能提高用戶對商品質量的信任程度。直播過程中用戶可以右滑進入簡潔模式，這樣直播的彈幕以及禮物點贊特效則會隱藏。
三、小紅書的購物方式
小紅書電商體量沒有淘寶大，商城首頁很干凈使各個活動入口更加清晰，使用卡片的布局形式展示，可以有效的與輪播廣告相區分。小紅書在商品界面設計上更加清新、層次分明，讓用戶能明確操作流程。
購物模塊與筆記社區有著非常巧妙的聯系，在添加筆記時，小紅書也鼓勵用戶關聯商品訂單，如果關聯，商品購買鏈接就會顯示在筆記中，不僅縮短了用戶查找時間，也直接進行了流量引導轉化。
作者：jongde 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
作者：菜菜不甜 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
本文主要從業務分析、交互體驗和設計規范三個層面進行總結。
與C端不同，B端產品主要圍繞業務為核心展開，面向專業的人員，有固定的業務屬性，我們只有將業務理解透徹，熟悉業務的運作流程，才能在B端設計過程中，輸出良好清晰的設計架構，更好的解決業務問題。因此，設計師的業務分析能力在B端設計中至關重要。進行業務分析可以從以下幾點著手：
我們可以從多方面收集業務相關的信息，包括梳理需求文檔，與業務人員溝通等，來了解行業背景、業務目標、組織架構，理清一些專業名詞等。業務場景理解的越深入透徹，我們才能建立起一個系統性的邏輯思維，對我們接下來的設計脈絡的梳理以及整體設計的把控是越有利的。
我們可以通過繪制業務流程圖，將零散的業務信息通過具象的流程圖清晰地呈現出來，有助于我們宏觀系統的了解整個功能流程，同時也能夠確保業務的標準流程都能夠走通，不會出現邏輯問題及功能場景的缺失。
B端用戶因其崗位角色的不同，使其具有清晰的角色權限。比如普通成員、管理員、超級管理員，分別對應不同的權限，不同的權限背景下，其功能和業務路徑也是不同的。理清角色權限，聚焦當前角色本身的任務流程，避免被無關的信息干擾，可以使我們的業務功能更加清晰，避免冗雜無用功能在不同角色間的穿插，有助于分解信息結構呈現的復雜性。
我們知道，B端設計的核心目標為降本增效，在交互體驗層面可以理解為降低認知成本，提高使用效率。而B端設計的一個顯著特點就是功能、場景復雜，要達到降本增效，需要我們在交互體驗層面上注意以下幾點：
B端注重對頁面的高效操作，因此在設計的過程中要保持簡潔克制，排除過多的干擾元素，聚焦主要功能，弱化或隱藏非必要功能，保證頁面信息呈現輕量化，降低用戶認知負荷。
同時，通過視覺設計，比如顏色、字號、字重、合理排版等，使頁面信息呈現有層次、有重點，能夠合理有效的進行優先級的引導，頁面信息呈現更加清晰有序，降低頁面的復雜性。
設計過程中，遵守設計規范，在視覺與交互上保持一致性至關重要。
一方面保持視覺上的一致性，包括字體、顏色、間距、結構等，能夠使頁面信息呈現嚴謹有序，保證易讀性；另一方面，保持整個系統交互操作的一致性，則可以大大降低用戶的學習成本，同時還能夠提升開發效率。
B端功能交互邏輯復雜，在設計過程中，盡量保持已成標準的用戶操作習慣，尊重用戶已有的認知，保證內容的可理解性，可以增加用戶的熟悉度，降低學習成本。
B端的信息結構復雜，如果將信息完全平鋪呈現，不僅占用頁面空間，還會大大加重用戶的認知負擔。這就需要我們站在用戶的角度，基于用戶的行為路徑，進行信息層級的劃分。
第一，對頁面信息進行梳理，明確主要信息和次要信息，必要信息和非必要信息，將次要信息和非必要信息進行隱藏、收起、刪除等，可以有效聚焦核心內容，避免分散用戶注意力；
第二，對需要展示的主要、必要信息進行分類歸納、信息分組，通過合理的頁面排版布局，使信息結構清晰有序的呈現；
第三，注意層級步驟的拆分，讓用戶逐級獲得信息，路徑清晰，避免過多信息雜亂無序的呈現，增加用戶認知負荷。
首先，我們通過預測用戶行為，在關鍵交互節點增加功能曝光，給予用戶操作建議和提示，可以幫助用戶高效流暢的完成任務目標；其次，對用戶行為進行預測，主動幫助用戶完成一部分操作，比如信息默認值填充等，可以提升用戶體驗，減輕用戶的操作負擔。
B端產品結構功能復雜，有使用學習的過程，如果對B端產品進行大的改版升級，會讓已經熟悉舊版本且已經產生使用習慣的用戶產生一些不適應感。保留舊版本返回入口，讓用戶慢慢習慣過渡到新版本，可以減小用戶學習的壓力，避免因習慣問題影響產品的正常使用，無論是對用戶的接受度還是對我們改版的順利落地都是一種不錯的方式。
B端系統龐大且復雜，建立起統一的設計組件和設計規范至關重要。
組件規范的建立：
第一，能夠保證交互及視覺設計的一致性，提升設計效率和降低用戶學習成本；
第二，能夠提升團隊的協作效率，提高設計還原度，降低對接成本；
第三，組件化設計，可復用性強，能夠提升開發效率，在后期的迭代開發中，也可以進行統一的更新和應用，能夠減少開發工作量，便于維護。
設計規范比較具體，且不同的項目在規范細節方面也會有所不同，下面主要整理了一些比較常涉及且可以通用的規范和組件。
B端系統用戶的主流分辨率為1920、1440和1366，我們在選擇分辨率時，首先確定目標用戶使用場景是否對分辨率有特殊要求，如果沒有特殊的場景分辨率要求，基于上下好適配性，通常會選擇1440的尺寸進行設計。
由于B端業務場景復雜，信息量比較大，通常選用24柵格系統。
考慮結構布局，根據不同的結構布局，給出動態縮放適配方案。常用的布局為：左右布局和上下布局。
左右布局：通常是將左邊的導航欄固定，對右邊的工作區域進行動態縮放。
上下布局：通常是對兩邊留白區域進行最小值的定義，當留白區域到達限定值之后再對中間的主內容區域進行動態縮放。
B端用色講究簡潔克制，使用戶能夠高效聚焦功能內容，Ant Design上面對色彩應用的描述為“色彩在使用時更多的是基于信息傳遞、操作引導和交互反饋等目的。在不破壞操作效率，影響信息的清晰傳達的這些原則之上，理性的選擇顏色是關鍵?！被谏适褂玫哪康模珺端用色主要分為主色、功能色和中性色。
主色：通常是品牌色，或者根據用戶群體、產品定位以及使用場景來定義，主要用在主要按鈕、選中狀態、高亮信息、空狀態等。
功能色：代表了明確的信息以及狀態，如成功、錯誤、提醒、鏈接等。功能色的使用需要遵守用戶對色彩的基本認知。
中性色：主要用于文字、分割線、邊框、背景等。
字體：中文常用字有：Ping Fang SC、微軟雅黑、思源黑體；英文常用字體有：San Francisco UI（SF字體）、Helvetica Neue、Arial。
字號：最小字號不小于12px，常規字號大小一般為14px。輔助文字12px，正文（常規）14px，小標題16px，標題18px、主標題20px，字號的選擇可根據具體情況進行定義。
字重：字重通常選用regular、medium、semibold，分別對應代碼中的400、500、600。
行高：行高設置一般為字號的1.5倍左右，我們也可以采用，字號+8px做行高。
(1)按照基礎樣式分為：主按鈕、次按鈕、虛線按鈕、文本按鈕、鏈接按鈕
(2)定義按鈕的交互狀態：Normal（默認狀態）、Disable（禁用狀態）、Hover（懸停狀態）、Press（點擊狀態）、Loading（加載狀態）
(3)對按鈕進行規范的制定：包括尺寸、圓角、文字、顏色、背景等
表單通常由輸入框、選擇器、單選框、多選框等組成，具有收集、校驗、提交數據的功能。
(1)表單的狀態：設計時，要明確規范表單的三種狀態
默認狀態：即用戶輸入信息之前的狀態；
焦點狀態：即用戶正在輸入信息時的狀態；
反饋狀態：即用戶填寫信息后的校驗狀態。
(2)輸入順序：表單設計時，信息的輸入順序按照先易后難，先必填后選填，先公開信息后隱私信息進行，可以減輕用戶填寫表單的心理壓力。
(3)對齊方式：對齊方式分為三種：頂部對齊、右對齊和左對齊。
對齊方式的選擇，需要根據瀏覽效率、屏幕空間以及標簽長度來實際判斷，做出選擇。
首先，需要明確，瀏覽效率上，頂對齊＞右對齊＞左對齊。
然后結合屏幕空間和標簽長度做判斷：
頂對齊：效率最高，標簽長度可以更靈活一些，但垂直空間占用多；
右對齊：效率次之，文本字數不可控但又不是很多時可使用右對齊；
左對齊：瀏覽時間最長，效率最慢，標簽字數可控或者需要用戶謹慎確認信息時，可使用左對齊。
需要注意的一點是，頂對齊的標簽布局之間要有合適的垂直間距，才能瀏覽舒適，效率更高，通常使用輸入框 50%至 75%的高度作為相鄰輸入框的垂直間距。
(4)校驗反饋：校驗反饋要具有準確性和及時性。
準確性：主要體現在，要給予用戶準確清晰的錯誤原因和解決方案，以及準確的錯誤位置。
及時性：表單填寫時，出現錯誤是難免的，為了避免用戶盲目填寫信息或者出現大面積報錯，可以進行實時的校驗反饋，比如用戶輸入完成鼠標失焦后進行信息校驗，但反饋的前提條件是不打擾到用戶。
需要注意的一點是，成功或者錯誤等的反饋，不能僅用顏色來區分，需要加入明確的圖標和文字來提示，以達到視覺無障礙設計。
(5)標簽與占位符：標簽和占位符都要盡量簡潔，避免文字過多，給用戶造成視覺負擔，信息描述應該準確、直觀且完整。
(6)表單分步：當表單內容多而復雜時，會讓用戶感到煩躁和不知所措，表單分步不僅有利于減輕用戶的填寫負擔，緩解焦慮情緒，還能夠明確了解表單填寫的步驟流程。
(7)數據與默認值填充：在用戶進行信息錄入時，可以通過后臺數據庫進行匹配，自動填寫已知信息，也可以設置合理的默認值，滿足多數人需要的默認選擇，幫助用戶節省時間，快速完成表單填寫。
(8)輸入框寬度與高度設定：輸入框的大小通常對用戶輸入信息的多少有著暗示作用，輸入框尺寸越大，用戶會認為是可以輸入很多字的。因此，并不是所有輸入框寬度一致，就是好的設計，需要根據實際情況，設定輸入框寬度，但是也不能設定太多寬度，寬度太多會使表單視覺效果凌亂，寬度設定要合理適當。
輸入框的寬度是固定的，但是高度可以根據內容進行自適應調整，來保證信息的顯示完整性，給用戶以良好的體驗。
(9)選項便捷性：表單填寫要始終遵循能不填寫就不填寫，能選擇就不要輸入的原則。當選項多于5個時，適合使用下拉框的形式進行展示。當選項內容過多，超過下拉框的高度，用戶篩選比較困難時，可以考慮是否輸入更快，采用輸入的方式。
B端表格的設計本著清晰易讀的原則進行，設計上需要我們注意以下四點：
(1)表格寬度：表格寬度的處理需要考慮自適應問題，主要有三種方式：
a.設定表格的最小寬度，最大寬度不做限制，可以無限延伸，當表格達到最小寬度時，做極限處理；
b.根據需要設定多個等級的最小單元格寬度，當單元格達到最小寬度時，做極限處理；
c.也可以按照表格寬度的百分比，設置單元格寬度，或者固定部分無放大需求的單元格寬度，對剩余單元格按照百分比進行縮放；
(2)極限處理：極限處理主要針對最小寬度，當表格達到最小寬度時，信息展示不全的情況下，常見的處理方式有：文本信息縮略顯示、文本信息換行顯示、橫向滾動顯示。
(3)單元格高度：單元格的高度直接影響表格的高度，信息呈現量，以及閱讀體驗。單元格高度一般在38px~58px之間，高度太大或者太小都不利于閱讀，個人實踐建議高度為字體行高的2.5倍。
(4)對齊方式：為了提升瀏覽效率和數據的對比效率，通常采用文字左對齊，長數字右對齊的方式，空數據使用“-”填充。
總之，做好B端產品的設計，需要我們多思考、多總結，規范與標準不是一成不變的，設計過程中要與業務、產品、前端多溝通，才能夠做出體驗更好的產品。
作者：陳小花兒 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在開始講解 B 端的圖標設計前，我們先來復習一遍圖標設計的基礎知識。相信不少同學看過我們之前更新的圖標系列干貨，沒看過的可以先收藏起來，等等看完本篇分享后再去閱讀……
理解圖標，首先關注的是圖標本身的類型，在整個 UI 體系中，圖標基本就分成3個大類：
工具圖標：包含一定產品功能隱喻的簡化抽象圖形，代替文字節省界面空間，方便用戶理解
裝飾圖標：主要目的是用來裝飾界面的視覺元素，樣式大于功能，常用于節日活動中
啟動圖標：產品的啟動圖標，即用來在系統中打開該產品的圖形按鈕，基本以自身 LOGO 為主
在 B 端項目中，應用最廣泛的必然是工具圖標，而裝飾、啟動圖標卻鮮有露面機會。但出現的少，不代表沒有，解釋工具圖標前，我們先優先講解下裝飾和啟動圖標在什么情況下會出現。
其中，SAAS 類服務就有很多會重點強調品牌、情感化設計的案例，例如大家比較熟悉的阿里云和騰訊云。項目中就大量啟用 3D 化的裝飾圖標提升界面的質感。
啟動圖標則會應用在一些比較大型的項目里，當項目出現了很多下級功能模塊或類似插件的體系時，就會采取使用應用圖標的方式作為入口。
比如 Figma 也是一個 B 端工具，它的插件列表中就可以看見不同的啟動圖標。還有類似 Slack、Invision、Teambition 等產品，一個龐大的產品生態就必然會衍生出強化不同子產品身份的需求，就自然而然會用到啟動圖標了。
最后，就是我們熟知的工具圖標了，前兩種圖標，在前期畫不好不要緊，畢竟這類規格的產品會有經驗更豐富的設計或總監坐鎮，新手當個切圖仔即可……
但是工具圖標，重要性就不言而喻了，B 端項目對工具圖標的需求非常大，幾乎每個組件中都會包含圖標。
雖然今天網上有非常豐富的圖標素材庫，但在形式各異的 B 端項目里依舊是供不應求的，各種行業特有的功能、實物、隱喻，只能設計師自己完成。
B 端設計師在圖標設計領域的主要工作，就是確定圖標樣式、設計圖標、導出切圖。下面的分享我們也會主要圍繞工具圖標展開。
工具圖標的應用主要包含兩個部分，線性圖標和面性圖標。
這里再提圖標風格，不是把以前的知識點重新講一遍，而是要強調 B 端圖標的特殊性。和 C 端相比，B 端圖標的實用屬性更高，并不需要過多凸顯本身的視覺風格。
所以，工具圖標中，使用大量漸變、插畫、投影的類型都要排除掉，它們對 99.9% 的項目都只會造成體驗的負影響，不要被網上的追波風飛機稿給帶偏。
適合 B 端項目的工具圖標只要應用最基礎的線性和面形風格即可，一定要劃分出差異，應該只包含圓潤、纖細、尖銳這幾種。
很多人好奇線性和面形圖標在 B 端設計中有什么使用上的差異呢？答案是沒有差異。
線性和面形的使用，純粹看設計師在當前場景判斷哪個合適用哪個，只要保證對應圖標風格統一即可。
不過如果遇到一些比較特殊的情況，比如要表現各類設備的復雜圖標，那用線性的做法還是相對合適和簡單一點。
對 B 端設計來講，獨立設計圖標的步驟是必不可少的，應該掌握的圖標規范還是必須要懂的。
我們雖然沒有 C 端那么多風格和技法的拖累，但想畫好 B 端圖標卻多出了其它難點，那就是一個頁面中出現的圖標實在是太多了。
這就引發了我們要講的第一個規范要點 —— “統一性”，所有同規格類型圖標具有一致性的特征，這些特征包含了：
如果不能保證統一性的基本要求，那么整個頁面看起來就會非常的廉價、業余。很多新手處理 B 端項目就是應用了多套素材庫圖標，它們的細節完全不一樣，統一性當然無從談起。
而讓整套圖標保持統一性，是相當有難度的，其中最難的一點，就是如何讓一套圖標的大小均衡。雖然我們要對每套圖標確定一個固定的尺寸，但不代表圖標實際圖形的長寬數值是完全一致的。
幾何圖形對視覺有一定的欺騙性，有不同的大小體驗，比如下方案例（魷魚游戲亂入？）：
所以，基于這樣的特性，每個圖標本身都包含了兩層屬性，圖標的占位尺寸和視覺尺寸。占位尺寸指它在界面中的實際占地大小，是透明白的，排版的時候以這個尺寸作為實際的邊緣來測量。
而視覺尺寸，則是在占位尺寸下圖標圖形的實際大小，這個大小是帶給我們實際視覺感受的部分。一套圖標的不同圖形必然視覺尺寸是各不相同的，我們用占位尺寸包裹它們來方便我們進行統一的應用。
所以，使用成熟的圖標素材必然會發現圖形周邊還會有透明的空白區域。當然，不同的素材，這個留白也是有區別的，下一個小節就會解釋。
最后要聲明一點，一套項目中可以包含多個規格（2-5個）的工具圖標，比如導航用的圖標比普通工具圖標更復雜一點，設計師只要保證每種規格保持的統一性即可。
圖標越多，大小的控制越困難，所以專業的圖標庫繪制就必然會應用圖標的柵格系統進行輔助。
在 Ant 的體系中，一個基于柵格的圖標實際包含3層，背景層、格線層、圖形層。
背景層，即圖標展位尺寸，需要先確定出這個元素的大小，然后才是里面的繪制區域。通常，柵格系統會為邊緣預留 1-4 像素的內邊距（出血位），正所謂四周留一線，日后好相見。
格線層，則是使用的柵格線段，也是最重要的部分。格線層通常由 4 個基本圖形構成，包含正方形、圓形、水平長方形、垂直長方形。
這四個圖形的長寬大小不一，原因是為了對應幾何圖形視覺尺寸不同的特征。把它們并列排列，就可以發現它們的視覺大小非常接近。
這些格線的作用，就是提前幫我們確定好視覺比例，幫助我們快速繪制相同圖形類型的圖標。
但是，不是完美符合這四個圖形要求的圖標該怎么辦，總不能格線把所有輪廓都給你實現出來吧？
格線的另一層作用，也就是最重要的作用，其實是一個用來做測量的工具，而不是輪廓依據。在幾何視覺差中，最基礎的大小原理是占用面積越大的圖形，尺寸感受越大。所以，長寬一致的正方形大于圓形，圓大于三角形。
所以當我們繪制的非常規圖形，和類似格線進行對比時，長寬缺少的一側，就要由另一側增加數值來填補它的面積。
比如下圖 Ant 官方的電腦圖標，它的寬是橫向矩形，但是中間區域面積較小，所以增加了高度進行平衡。
再看一些其它的案例
這一步沒有固定的參數使用技巧，設計師需要將完成的圖標置入到其它圖標旁邊進行調試，確保尺寸是合適的。
格線只是一個圖標大小設置的參考工具，一切以最終效果為標準。
理解完圖標的基本規范，就到圖標的使用邏輯了，解決一些常見的設置誤區。
圖標該做多大的，這是目前被問到最多的問題。本來應該是非常簡單的一件事，但很多工作多年的設計師也搞不清楚。
仔細捋了捋，罪魁禍首就是 AntDesign 這套規范中對圖標畫布的解釋了。
要重點強調，Ant 設計圖標的意圖，和一般項目的是完全不同的。Ant 作為一套龐大的開源項目，它的圖標核心特征之一就是 —— 適應性。
這些圖標要被應用到各種不同的設備、顯示器、系統中，圖標尺寸會用多大，在幾倍圖環境顯示全都是不確定的。所以圖標一開始按越大的規格完成，后續實際應用中的縮放、匹配也就越容易，適應性越高。
但是，在我們自己的項目中，這種做法是完全沒有必要的，1024 圖標的負面影響包含：
在常規項目里，一套項目是可以包含不同尺寸和規格的圖標的，而不是我們做一套相同風格的圖標在整個應用中無差別使用。
這也意味著，每個圖標在產品中的使用場景通常只有一個尺寸，不需要去面臨縮放的情況。即使需要縮放，也只是這套圖標中的少數幾個需要，或者相對特殊的項目。
所以，圖標尺寸設定，就是根據當前位置合適的尺寸來制定。可以使用素材在已經設計好的布局中嘗試多大的數值合適，然后創建同樣的數值即可（盡量以4的倍數為標準）。
我們知道圖標的素材非常豐富，不管是 Iconfont、IconPark 還是 Iconsearch 等網站，都提供了海量的素材。但是只要稍微專業點的項目，往往素材庫都滿足不了，部分規格的圖標還是需要我們自己重新繪制。
所以說圖標素材就完全沒用了嗎？當然不是。
圖標的正確用法是作為一種快速試錯的參照物，它可以幫助我們實現：
在項目的界面設計階段，我們一向建議優先使用外部的素材，尤其是 IconPark 這種比較統一，還可以快速調節圖標樣式的工具網站。
這個過程即使素材找不到和寓意一致的也沒關系，用相近的圖標替代就可以。等到頁面布局基本完成以后，最后再集中精力對需要繪制的圖標重畫一遍（甚至是在開發階段繪制）。
通過別人的圖標來快速匹配尺寸、風格、樣式，會幫助我們節省非常多的時間，也有助于我們設計出更專業、美觀的圖標。
另外，就是針對項目一些偏小尺寸的通用圖標，就可以比較放心的應用素材，例如翻頁的左右、更多、下拉、搜索等等。
圖標的尺寸、樣式都確定了，最后就是關于圖標的色彩和不同狀態的制定了。
前面講過，B 端項目對圖標的裝飾屬性沒有那么迫切，所以正常情況下，太花哨的圖標是要盡量避免的。彩色、漸變色、投影，都不應該在這個情況下胡亂使用。
常規的圖標只要使用中性色即可，而需要特別對待的圖標，色彩可以從主色或者輔助色中選取。比如需要高亮顯示的打勾或者打岔。
當然，如果項目涉及到一些特殊的工具圖標，類似工廠、工業領域表達實體設備的擬物圖標，可以打破這個原則。但是，同樣避免這套擬物圖標的每個圖標用色不同，盡量只使用 3 種以內的顏色完成擬物的填色。
同時色彩的使用還有一個重要的意義就是對圖標不同狀態的呈現，部分圖標會承擔按鈕的功能，包含默認、選中兩個基本狀態。
普通權重的圖標，未選中狀態可以在默認色彩基礎上使用透明度來實現。
高權重的圖標，則可以在選中的狀態替換色彩，或者更改圖標的類型，將原本的線性更改成面形并填充色彩制造反差。
完成所有圖標的設計以后，最后一步就是切圖和導出了，這決定你的圖標能不能被正確運用到線上項目中。
在一套專業的 B 端項目中，已經設計好的圖標是設計規范的 “資產” 內容之一。圖標的文件不能散落在項目的各個界面里，而是在規范頁面中有統一的整理和收納。
這種做法的流程是，先在軟件的規范庫中創建對應的圖標組件（ Symbol / Compoent ），然后再在具體頁面中應用，方便后續的統一管理和修改。
而在這個過程中，我們也需要對圖標有正確的命名方法，來確保團隊調用、檢索圖標的效率。通常，我的圖標命名規范如下：
尺寸 / 類型 / 圖標名-狀態
示例：
48px/導航圖標/表盤頁-默認
24px/一般圖標/搜索-默認
“/” 號的引用主要是方便軟件中對組件層級進行劃分，而我調用圖標的規則勢必是先從尺寸開始，再選擇對應規格，最后類型和狀態。
提前命名也是方便后續我們切圖和導出，但要提及一點，圖標的命名不要追求英文化，因為我們的詞匯量不可能實現正式的英文命名規則，只會寫一堆大家都看不懂的單詞。
而開發在使用我們的圖標切圖時，也不會用我們之前取的命名，會根據自己的命名習慣重新命一遍，寫個讓他能看懂的名字遠比用亂七八糟的英文強。
接下來，就要解釋切圖的規則了。很多沒有經驗的設計師切圖就只是隨手加個切片，然后上傳藍湖發給開發自生自滅了，這是一個非常不合理的操作。
再或者，強行使用 Fonticon 格式，而不管實際情況如何，造成最后實現效果完全不同步或實現不了。
切圖是通過前端調用并在瀏覽器中進行顯示的圖形，而要被瀏覽器正常顯示，就有必要了解適合使用的切圖格式。
圖片的格式包含位圖和矢量兩種，位圖是通過記錄像素色值的圖形格式，假設一張圖是 100*100 像素，那么記錄 1W 個像素點的色彩，所以無法支持無損縮放。而矢量則是通過記錄點線面的坐標繪制出顯示圖形的格式，可以支持自由縮放。
理論上，矢量格式是最佳的圖標切圖格式，但是它的限制同樣有很多，例如：
前面說過，普通項目中同一圖標是很少出現一會兒大一會兒小的需求，所以矢量最大的特征無損縮放，往往就不需要我們去考慮。矢量格式切圖的主要出發點是用來應對移動端顯示器 1x、2x、3x、4x 等不同倍率縮放的問題，而不是網頁端的基本使用。
當一套項目中出現了矢量格式無法覆蓋的圖標時，那么即用矢量切圖，又用位圖，就會顯得非常的混亂。只有類似 LOGO 等圖形元素，才需要考慮 SVG 格式，而不是一看到圖標就上。
所以，最適合切圖的格式就是位圖的 PNG 格式，一方面它是無損的，另一方面它支持透明背景，在切圖應用上可以完美和設計稿結合，而這是其它大多數位圖格式不具備的特征。
當每次項目完成以后，并不需要通過藍湖來實現切圖的導出，如果切圖文件分散在各個項目頁面里，那么一定會有很多圖標被遺漏，尤其是圖標的不同狀態切圖。
所以，最理想的切圖形式，就是將所有圖標完成整理和命名以后，一起框選，然后導出成 PNG 格式，再同步給程序員即可。
作者：酸梅干超人 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
表格已經是現代電子計算機系統中重要的組成部分之一，從小學開始，我們就已經在電腦課上學習如何使用 Office Excel 來制作電子表格。
那么我們為什么需要使用表格呢？因為我們有記錄和查詢數據的需求。
在任何商業活動中，都會產生大量的數據信息，雖然我們發明了 SQL、Mysql 等數據庫語言記錄數據，但最原始的數據記錄是沒有可讀性的。
所以，為了讓數據可以更好的展示，我們就必須借助可視性更強的圖形工具，即電子表格。通過 X、Y 軸構建的網格系統，將數據有序、清晰得羅列出來。
表格的重要性就體現在企業日常工作中對這些數據進行管理的需求和頻次上。
例如為電商 APP 開發了一套管理系統，那么電商運營每天的工作，都要繞著其中銷售、物流、流水等重要模塊的數據打轉，也就是圍繞著表格展開工作。
對于多數管理系統而言，數據查詢、管理都是非常重要且高頻使用的功能，所以常規項目中會包含大量的表格頁面。
甚至，有的中小型項目的所有導航一級頁面，只有表格，而不存在其它頁面形式。所以，表格的優劣對用戶工作效率和平臺體驗可以產生決定性的影響。
而優秀的 B 端項目表格又不能只像 Excel 一樣可以使用固定的模版，不同項目、頁面、模塊對表格的可視需求天差地別，需要根據具體情況具體分析。
所以，這也是 B 端設計師的價值之一。一個優秀的 B 端設計師勢必投入大量精力來提升對表格的認識和表格設計能力。
表格雖然細節設計上千差萬別，但在表現形式和閱讀順序上卻是基本一致的。
常規的表格必然包含表頭欄、列表、翻頁器三個部分，根據需求的不同，可能還會增加搜索欄、多選欄、操作欄等常見模塊。
主要是用來進行簡單的數據搜索和篩選的，當搜索項較少的時候，就可以將搜索結合到表格組件內。而搜索項較多時，則會把它們獨立成一個篩選模塊到表格組件的上方。
每個表頭代表一個對象的屬性，決定了下方每行對象要顯示的數據類型數量。
通常，表頭的設計會和下方列表設計有一定的區分，表頭文字有一定的標題屬性，所以會通過背景色、分割線、文字加粗來增強對比。
列表則是縱向排列數據對象的模塊。每個數據對象占一行，行的高度根據內容來制定。橫向列表高度和縱向表頭寬度重疊的區域稱為單元格，每個單元格展示表頭對應的數據明細。
常規 B 端項目表格都會限制列表一次展示的行數，極少使用無限滾動加載的模式。因為當數據包含成千上萬條時會對本地、服務器性能和交互方式帶來一系列的負面影響。
如果數據對象支持多選和批量操作，則我們會在第一列中添加選框，并將選中后的可操作選項放進操作欄中。
翻頁器是切換列表頁面的控件。通常大數據量的列表包含上千頁，所以翻頁器只會顯示開頭幾頁和最后一頁，省略中間的，并增加適合快速跳轉的功能。
除了表頭和列表內容外，其它模塊內容都根據實際需求應用。任何表格設計的第一步都是制定大框架，即包含的模塊和對應分布位置，再展開后續的細節設計。
B 端項目支持響應式是今天行業的普遍需求，也就是頁面內容隨著瀏覽器視圖寬度變更而變更。
不同頁面類型的響應式邏輯各不相同，而表格是其中邏輯最復雜，也最難理解的一種。
表格響應式規則通常在確定好框架以后制定，優于視覺、交互設計，因為它對視覺和交互產生的影響非常大，是前置條件而不是通過設計稿逆推出來的。
表格的響應式規則比較細碎，我根據下面的順序展開解釋：
- 表格的總寬響應
- 表格的最小寬度
- 單元格的響應邏輯
- 內容的響應邏輯
表格的響應主要是寬度上的響應，整個表格的寬度區域隨父集元素的放大而放大。比如父級元素左右內邊距為 20px，則表格整體寬度保持和父級 20px 的左右間距。
上方邏輯中表格可以無限延長，但它卻不能無限的縮短，因為你不可能做一個只有 10px，20px 寬的表格。
過窄的表格不僅支持不了內容的正常顯示，也毫無任何使用體驗，所以我們要為表格確定一個最小的寬度。即瀏覽器視圖即使比這個寬度更小，表格也不會再縮小了。
最小的寬度可以結合前端柵格系統使用的 Breakpoint 規則來制定，如 Ant deisgn 中 SM：576px，或 MD：768px。
如果不了解柵格的段落規則，也可以 “憑感覺” 定，最小表格寬度通常在 560-640px，當然，不管怎么定一定要提前和前端溝通，確定尺寸方案。
當表格內容少的時候，最小寬度只是相對較大寬度窄了一點而已。而當表格內容過多，最小寬度無論如何也不夠放的情況，那么就會使用橫向滾動的交互形式來隱藏超出內容。
單元格響應這是整個表格最復雜的一環，橫向內容會超出最小寬度的情況，就是由單元格規則決定的。
首先，單元格本身也有最小寬度，原因和前面一樣，1px、10px 寬的單元格沒有存在的意義。所以可以根據需要，制定多個等級的最小單元格寬度，應用在不同的數據類型中。
假設表格中包含了 20 個表頭，分別使用了 10 個最小 24px 和 10 個最小 80 px 的，那么單元格的總寬最小就是 240+800 = 1040px。
所以當父級整個表格視圖小于 1040px 的時候，內容就會不夠顯示從而觸發左右滾動的條件。
當上級表格寬度大于單元格最小總和時，那么單元格也就會隨之變寬。最簡單的響應邏輯，就是為單元格寬設置百分比。比如 5 個單元格分別是父級寬度的 10%、10%、10%、20%、30%、20% ，那么在父級 1000px 的時候它們分別是 100px、100px、100px、200px、300px、200px。
只要確保百分比的總和是 100%，不管你單元格是比例均分（5個單元格等分各20%寬），還是獨立制定（上面案例），單元格寬都是等比縮放的狀態。
雖然好理解，但這種初級的做法帶來的問題也很多，那就是部分單元格沒有被 ”放大“ 的需求。比如常出現在第一列的多選框，或者部分標簽單元格、固定操作按鈕單元格。
于是，為了預留給有需要的單元格更多的空間，提升體驗，就會對這些單元格實施定寬的方式，剩下的單元格繼續使用等比，只是計算的方法要減去定寬元素。
比如還是一個占比 20% 的單元格，在包含 2 個 48px 定寬單元格的 1000px 表格中，實際寬為：
（1000px - 2*48） * 20% = 180px
作為單元格的子級，內容也可以獨立定義響應的規則。主要包含 3 種情況：
- 無響應
- 隱藏多余
- 換行顯示
無響應就是顯示的內容是固定的，比如多選框、縮略圖、單按鈕等單元格內容，它們沒有大小變動的必要。
隱藏多余，則是主要應用在文本內容上，當單元格寬度小于當前文本所需寬度時，就會把多余的文字進行省略，這種做法適合應用在一些原本就不是太重要的信息上。
比如原本是 ”上海徐家匯南丹路天主教堂一樓“ 變成 ”上海徐家匯南丹路天…“，之后再通過鼠標懸浮彈出文字氣泡框的方式顯示所有文本。
而換行顯示，則是文本或多標簽狀態下，一行不夠顯示就換行的做法。除非一開始單行行高預留了多行顯示的高度，否則多行內容就會撐高單元格。
以上就是表格在響應式模式下相關知識點。
隨著經驗的積累，實戰經驗豐富的 B 端設計師，就會在前期的規范環節制定出完整的表格響應邏輯，應用到前端框架開發和后續的設計，而不是做到哪定到哪。
表格首先是一個展示信息的組件，而單純依靠布局和排版技巧，并不能解決所有的信息展示問題。所以，針對網頁表格的局限性，我們要添加一些交互的細節來提升使用體驗。
例如，單頁表格數據量較大，有好幾屏高，往下滾動后看不見表頭，不能很好的識別單元格內容。
或者，表頭屬性數量較多，需要左右滾動，但是每行數據要不然操作欄目看不見，要不然對應 ID 被滑走了等等。
所以，表格的框架就可以做懸浮固定的模式，將需要被持續露出的欄目懸浮固定。
當然，除了單獨欄目的懸浮，也可以使用混合模式，比如表頭吸頂的同時固定右側的操作欄。盡量將固定元素控制在 3 個以內，以免懸浮要素太多影響內容的瀏覽。
還要注意，除了筆記本觸摸板和少數鼠標，一般用戶是沒有頁面左右滾動滾輪的，所以當表格出現左右滾動情況以后，就一定要默認展示進度條，方便用戶操作。
第二步，就是和表頭相關的操作了。我們都知道常規表格頁面中，表格上方還會有個篩選區域，專門用來進行篩選相關的條件制定。
但是，部分項目需求中，會將篩選的功能整合到表頭欄目內，而很多新手甚至不能有效的區分篩選和排序的差異。
我們先對這兩者做一個明確的定義：
篩選 Filter：對要顯示的內容設置篩選條件，不符合條件的將會被過濾隱藏
排序 Sort：對已有內容的顯示順序進行條件設置，不會有內容被過濾或隱藏
這看起來好像很容易理解，但會搞混的地方就在排序的應用上。我們常規以為的排序，就像電腦文件夾列表一樣，通過點擊表頭來決定內容通過哪個屬性來進行升序或者降序。
在這種 “樸素” 的設定中，篩選是以單個表頭屬性為標準的，有唯一性。比如在學生數據表格中，可以以 ID、姓名、年級、年齡或成績單個屬性進行列表排序，選中其中一個屬性其它屬性的排序就被取消了。
但是復雜的排序并不是 “唯一屬性” 的，而是多個屬性的并集，以及具備優先級和排序模式。還用學生數據表格舉例：
優先根據年齡降序排列，同年齡下根據班級升序排列，同班級再根據成績降序排列。
這里面疊加了三個屬性，年齡優先級最好，然后班級次要，成績最后，我們用圖表的展示可以實現出下面這樣的形式：
再進一步，這是我們條件已經確定才做出來的組件，要是要制定的屬性不確定，要制定的屬性數量也不確定，順序不確定，排序模式也不確定……
這種情況就肯定要應用排序自定義條件的邏輯了，而表頭自定義一加，那邏輯就立馬復雜了，它的操作面板可能就長下圖這樣。
排序復雜了，并不代表篩選就不要了。部分項目的篩選除了在表格外的獨立篩選區域，還可能應用表頭篩選模式。即以單個表頭緯度設置篩選條件，比如點擊 “年份” 表頭，設置起始和結束時間。
所以，只包含篩選的情況下，表頭的圖標就不是排序而是漏斗，點擊后就要展開篩選設置面板進行操作。
而當多表頭篩選和多表頭排序需求并存的時候，怎么解決？
這里只建議在表頭中留存篩選選項，因為篩選可以實現并集關系，即前后任何表頭添加篩選項都可以組成完整的篩選條件。但是，這種交互難以完成篩選優先級排序。
所以，我們要將排序獨立成一個按鈕到表頭之外的地方，而不是強行讓兩者并存。尤其是不要設計出有的表頭是排序，有的表頭是篩選，甚至表頭的按鈕展開面板里又會有篩選又有排序……
表頭是針對列的操作，而針對行的操作，就是對單行列表的選擇、展開和進入了。
前面我們有說過，表格第一列往往放多選框，通過點擊選擇當前列表行。它本身的交互并沒有太多需要注意的，只要針對行的交互如果不止選擇應該如何平衡。
部分復雜項目喜歡在表格中添加 “套娃” 的需求。即單行數據可以向下展開二級數據，或者更進一步到三級、四級。
同時，每個數據行往往還關聯詳情頁面，需要點擊展開后查看更細節的信息。
所以當多種操作需求混合出現的時候，我們就要具體分析這些需求的優先級了。到底是多選操作頻率最高，還是查看下級行，打開詳情頁。
這是為讓點擊整個數據行這個最便捷的交互可以關聯到最高頻的操作上。而其它低頻操作的交互則只限定在對應的按鈕或圖標上即可。
因為多選需求往往需要我們在一系列數據中選擇很多條數據，一個小小的復選框不僅選擇起來麻煩，且通過查看右側的內容篩選數據行，再用右手握鼠標按需點擊最左側的多選框，是非常別扭的體驗。
還有一個需要注意的細節，就是當多選和展開下級列表共同出現的時候，選框和展開圖標的排列。
通常一個數據行第一列的內容，應該是整行邏輯層級最高的元素。如果子數據行是被獨立出來需要單選，那么展開圖標就要放到選擇前面。如果選擇數據包含了該行和所有子行，那么選擇就應該在展開圖標前面。
當然，如果展開數據和父集就完全不是一種類型，用另一套屬性，那么它也就沒有被同時選中的需求和可能，不需要為它添加選擇框。所以，這種情況下多選框也應該放在第一位。
最后，就是解決單元格的交互了。常見的單元格交互可以總結成下面這幾類：
- 點擊打開頁面
- 點擊復制內容
- 點擊修改內容
- 懸浮提示說明
點擊打開頁面很好理解，比如單元格內的數據是鏈接、圖片、按鈕然后實現跳轉或彈窗。
而復制內容，則有一些需要注意的細節。表格中有一些數據是沒有實際閱讀意義的，它的存在就是用來做特定的校對或者是復制出去，比如 ID 號、哈希值、訂單號等。
常規的做法是直接在右側添加一個復制圖標，但對于一些偏復雜的表格來說，所有可復制的單元格都加復制圖標是非常影響瀏覽體驗的。
所以，我的建議是都是默認隱藏復制圖標，只有當鼠標移動到對應單元格的時候會顯示。同時，這個圖標可以覆蓋到數據上層，因為既然鼠標移動過來為了復制，那么數據被遮擋在這階段自然無關緊要，為整體頁面預留空間
這樣的操作按鈕隱藏浮現方式，也適用于單元格修改的操作。但是，和復制不同，單元格信息編輯通常是編輯文本信息，還有后續的操作步驟。
如果點擊進行文本編輯，那么建議在該表格打開一個新的輸入浮窗，且浮窗內輸入框文本和原來文本位置持平實現順暢的步驟轉換。
同時建議，為了防止誤操作，盡量增加確定、取消按鈕，防止誤操作覆蓋原有數據且無法撤銷。
最后就是單元格的懸浮提示了。B 端控件中的氣泡框就是用來做提示的控件，但它只是手段。為什么需要懸浮提示，提示什么內容是我們需要考慮的。
對于及其復雜的表格來說，往往是沒辦法支持所有數據都完整展示的，我們會在使用省略號對它進行截斷。但截斷不意味著用戶完全不需要在表格查看到完整的信息。
所以，就可以通過氣泡的做法，將信息呈現給用戶。而呈現過程中，盡量確保鼠標可以移動到氣泡上復制里面的文字內容（和全部復制不一樣），而不是鼠標移走就直接關閉消失。
熟練運營這幾個交互方式，并統一對應的使用規則，就能確保整個項目的表格單元格操作預期的一致，不需要逐一進行嘗試和鑒別。
作者：酸梅干超人 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn