電影《再次出發之紐約遇見你》中有一個浪漫的場景，男主和女主通過一根耳機分線器一起聽著音樂，一起感受著當下同一段旋律。通過這根分線器，他們分享著自己的歌單，分享著當下的情緒，隔絕外界的紛擾，游蕩在大街小巷。
這種聽歌方式我也很喜歡，同樣的歌曲讓人產生了不一樣的感受。我想，可能是陪伴和共鳴賦予了這首歌新的生命力吧!
如今，無需分線器，網易云音樂一起聽可以讓你和那個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上面對色彩應用的描述為“色彩在使用時更多的是基于信息傳遞、操作引導和交互反饋等目的。在不破壞操作效率，影響信息的清晰傳達的這些原則之上，理性的選擇顏色是關鍵?！被谏适褂玫哪康?，B端用色主要分為主色、功能色和中性色。
主色：通常是品牌色，或者根據用戶群體、產品定位以及使用場景來定義，主要用在主要按鈕、選中狀態、高亮信息、空狀態等。
功能色：代表了明確的信息以及狀態，如成功、錯誤、提醒、鏈接等。功能色的使用需要遵守用戶對色彩的基本認知。
中性色：主要用于文字、分割線、邊框、背景等。
字體：中文常用字有：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 圖標的負面影響包含：
在常規項目里，一套項目是可以包含不同尺寸和規格的圖標的，而不是我們做一套相同風格的圖標在整個應用中無差別使用。
這也意味著，每個圖標在產品中的使用場景通常只有一個尺寸，不需要去面臨縮放的情況。即使需要縮放，也只是這套圖標中的少數幾個需要，或者相對特殊的項目。
所以，圖標尺寸設定，就是根據當前位置合適的尺寸來制定?？梢允褂盟夭脑谝呀浽O計好的布局中嘗試多大的數值合適，然后創建同樣的數值即可（盡量以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咨詢、用戶體驗公司、軟件界面設計公司
網上對介紹導航文章已經有很多，有部分已過時，今天自己再重新整理一遍，方便自己也方便更多人理解。
如2、社區產品引導用戶發帖子
如3、凸顯核心功能，如百度地圖、高德等
優點：
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：UX設計筆記 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
視覺設計排版：
第一步，先把文字內容做好排版；
第二步，思考場景設計與信息層級處理；
第三步，進行排版設計的布局；
第四步，最后做好色彩和細節的優化，從整體出發到細節處理再回歸整體性的原則，做好包裝的設計展示。
一 格式塔原理在排版中的應用
格式塔原理是 20 世紀早期的德國心理學家研究小組發現的人類視覺工作原理。人類視覺是整體性的，我們會對看到的事物自建結構，并且在神經系統層面上感知形狀，圖形和物體?！感螤?、區域」在德語中是 Gestalt，所以這些理論也就叫做視覺感知的格式塔原理。
格式塔原理的設計原則如下：
1. 鄰近性原則
物體之間的相對距離會影響我們認知它們的關系。相互靠近的元素被認為是一組，那些距離較遠的則自動劃分為組外。整體看來，距離近的關聯性更緊密。
下面左圖中的圓相互之間在水平方向比垂直距離近，那樣我們看到了4排圓點，而右圖看成2列。
如何應用于UI設計：
鄰近性原則，在網頁端或移動端的排版布局中有非常廣泛的應用。設計師應用此原則，調整距離或者用分割線等來分開不同設計模式的構建。此原理應用在設計中，界面層級好，視覺清晰。
按照原理，我們會將內容相似的元素位置放置得更接近，在 UI 設計中的卡片化設計，列表組合等信息整合設計都會應用到此原理。并且不同內容之間我們使用分割線，留白，卡片區分等方式來使不同的內容區分更為明顯。
2. 相似性原則
格式塔原理中的相似性通常和鄰近性原則一起運用在產品設計中。它指出了影響我們感知分組的另外一個原則：有共同視覺元素的物體看起來更有關聯性。我們傾向于將看起來相似的對象視為一組或者一個模式，并且將它們與特定含義或者功能聯系在一起。
如何應用于UI設計：
利用顏色，形狀，大小，方向，以及紋理等視覺元素，組成相近的樣式。UI 設計規范中的控件組合成的組件，大部分都會使用到相似性原則，統一視覺樣式，來表達統一的功能性。
3. 封閉性
人的眼睛在觀看時，大腦并不是在一開始就區分各個單一的組成部分，而是將各個部分組合起來，使之成為一個更容易理解的統一體。這個統一體是我們日常生活中常見的形象，如正方形、圓形、三角形等，讓用戶容易理解。
如何應用于UI設計：
這個原則也非常適用于圖形用戶界面的圖標設計或界面設計中
4. 連續性原則
人的視覺具備一種運動的慣性，會追隨一個方向的延伸，以便把元素連接在一起成為一個整體。下圖是兩個交叉的圓弧軌跡，人們往往傾向于使視覺流跟隨著相同顏色的軌跡，而不會被干擾，我們能夠感知這是兩條弧線。
如何應用于UI設計：
連續性目前在 app 產品中應用非常廣泛。比如在電商產品中 banner 區域的左右滑動交互模塊，滑動組件和進度條展示。
主要應用范圍如下：
1 導航欄中的連續性設計
2 卡片模塊中的連續性設計
3 模塊的連續性設計
5. 主體/背景
我們的大腦將視覺區域分為主體和背景 2 個部分。這個特征有利于我們對重要信息和次要信息的感知。
主體和背景的區別可以從以下兩個方面來控制：
1 場景大?。何覀儍A向于將處于大場景中的中間小區域部分視為主體，而大場景視為背景；
2 層級關系：如果在同一個平面中，我們傾向于將處于視覺第一層級的物體視為主體。
如何應用于UI設計：
此原則可以幫助設計師在設計界面的過程中抓住用戶注意力，并且讓用戶優先看到我們想讓他們看到的事物。比如重要信息的彈窗提示，以及弱化背景從而突出內容等界面中都有運用到此原則。
二 移動端版式設計原則：
版式設計，在有限的版面空間中，將版面構成元素，如：文字、圖片、線條和顏色等，根據特定的內容，進行組合排列，并運用造型要素及形式原則，把構思與計劃以視覺的形式美感，表達出來。
一個優秀的排版要考慮到用戶的閱讀習慣和設計美感，幫助用戶區分重點、提升可讀性。遵循平面設計原理，排版中的對齊、對比、重復、親密性 4 大原則。
對齊原則
對齊是版式設計的最重要的原則之一，對齊可以建立一種整齊的外觀，帶給用戶舒服的一致性的瀏覽體驗?；趶纳系较?，從左到右的閱讀習慣，應用在界面設計中，一般是左對齊、居中對齊和右對齊，同時同一豎線上的元素，要保持居中對齊。
對比原則
做排版設計時，重點的元素通過尺寸、色彩、造型等引起用戶關注，這樣重點內容，才會突出出來。設計要有輕重緩急之分，不要讓用戶去找重點，Don't let users think，讓用戶順利的接受重要信息。
例如：圖片大小的對比，讓用戶感受到最重要的信息。
親密性原則
根據親密的原則來組織復雜的信息，將彼此相關的同一類的元素靠近，同時把遠離不相關的元素，這樣就可以大大提高界面設計的可讀性。
三 作品集排版法則
設計排版法則：
1 左對齊
在頁面排版時，將你的文字設置為左對齊。為什么？在西方文化中，人們的閱讀習慣是從上到下，從左到右的。通過左對齊文字，眼睛能夠更容易地找到邊緣，更易于閱讀。避免因為這個原因縮進段落的第一行。
2 使用一種字體
優秀的設計師在排版設計中能夠完美使用兩種字體，是因為他們能夠把握和了解所選的字體的類型，并保證他們是互補的。
但是一般情況下，避免使用兩種相同類型的字體。例如，不要使用兩種以上的非襯線體、粗襯體或手寫體。
使用一種字體，直到你能夠很好的運用和掌握它。如：蘋方字體或Dinner字體。
3 跳過一個字重
在改變字體權重時，從細體到粗體，或者從中粗體到超粗體。大師級的設計關鍵就是對比。
粗體和細體對比的標題字體組合，獲得最大的對比。
4 雙倍字號尺寸
當改變字號大小時，一個好的經驗法則是，你使用的字號大小是現有字號的兩倍或一半。
5 對齊到一個軸線
沿著一個主坐標構建你的字體排版，并將字體元素對齊到網絡線。無論文字類型或大小如何，在垂直軸上，字體對齊軸線的左邊緣。在水平軸上，尋找最佳水平元素，或對齊文字的大寫字母字高，或對齊文字基線即可。
6 使用條框分類
使用形狀/線條將相關的內容信息塊進行分類編組。這樣會使不同的元素排列很有順序。
7 注意間距
段落排版中到處都是間距。如果文字左對齊。右側會出現文字的參差不齊、起伏留白等。避免在段落的最后一行出現單字成行的情況，切勿使用強制對齊設置。
注意段落右側的起伏形狀，在一個句子中標點符號之間使用單個空格，以避免形狀和角度不美觀。
間距的重要性。越是間距接近的元素，讀者就會假設在不同的信息塊之間存在這一種關系。
最后推薦 優秀設計師的作品排版 ：
如下圖：來自國際化設計師 MIKE 的設計作品
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：峻溪POINTVISION 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
這些年里，這款工具進行了快速的迭代和更新，響應設計師們的需求，不斷完善功能，成為設計行業推薦率（NPS）最高的軟件之一。
尤其是作為一款優秀的買斷制軟件，不僅定價合理，甚至 5 年來 ￥199 的售價分文未漲。
而我同期開始用的 Ulysses（用它寫了兩本書，寫過的公眾號內容超100W字）、MindNode、Notability 等，全都在這期間從買斷制改成訂閱制，甚至訂閱價格還逐年上漲？？
我從來不吝嗇于贊美優秀的軟件工具，尤其是保持初心以純粹的產品功能來服務用戶的那種更甚。五年前我作為最早就推薦它的人之一，五年后我不介意再夸它一次。
它就是 —— Eagle。
Eagle官網：https://cn.eagle.cool/
前面說過，Eagle 是一個設計資源管理器，它可以做的事情非常多，但我不是要在這里寫功能介紹的，而是來分享一下，我都用它做了什么。
圖片采集是我使用 Eagle 的核心目的，他包含豐富的采集形式完美覆蓋我的實際使用需要。
第一類采集形式就是通過瀏覽器插件或截圖工具，將網頁中看見的圖片下載到本地。
第二類采集形式，則是通過粘貼花瓣或 Pinterest 的畫板地址，批量采集該畫板的所有圖片。這是我最喜歡的功能，沒有之一。
花瓣和 Pinterest 這類網站，真正的精華是優質用戶自己收錄的圖庫，而不是直接搜索出來的結果。批量采集，就是讓我在找到優質圖庫后，用最簡單的方式下載這些被精挑細選出來的圖集。
因為批量下載很方便，我可以很快的針對同一類目收集出成千上萬的內容。但同一個類目下載那么多圖片或素材有意義嗎？
數量從來不是我追求的目標，我會將任何類目的內容數量進行精簡，只保留其中最精華的一小部分，即使它們是由一批最優秀的設計師收藏的圖庫，我也只取精華中的精華。
但是，光靠一張張圖看過去打星再篩選，會把我累死。于是，我就會利用 Eagle 的篩選與排序功能，快速剔除劣質內容，縮小選擇范圍。
比如之前我分享過的 UI 配圖的素材，包含十幾個顏色的分類和上千張精選圖片。原始圖片超過五萬張，是我從上百個攝影畫板里批量采集下來的。
應用到大小、尺寸排序，色彩篩選，星級篩選等多種手段配合，幫助我快速篩選出各自質量最好的 100 張圖片。而這前后大概只用了兩小時的時間。
通過前面兩個功能，我收集和篩選了海量的靈感元素。但這么多元素我們不可能無序放置，需要根據一定的規律進行編組和管理。所以這里就要分享 Eagle 的資源管理功能了。
Eagle 的資源管理包含三個方向：
1. 普通文件夾：類似電腦文件夾的邏輯，可以進行排序和上下級設置，收納
2. 智能文件夾：通過一定條件設置，篩選出對應圖片和素材的動態文件夾
3. 分類標簽：即可以作為分類來使用的標簽系統，可以為一張圖片或素材打上多個分類標簽
我的資源管理方法論一直崇尚的是極簡主義，能用普通文件夾管理的情況我就一定不用智能和標簽。不是說這些功能不好，而是因為它們需要對素材進行二次的處理和維護，只有在必要條件下才會使用。
我的素材資源管理是首先構思我會用到的幾個大類，每個大類下會包含幾個二級分類，即 Eagle 中的1級文件夾，然后再創建對應的文件夾并命名和添加色彩，比如下面示例。
不要奢望一開始規劃分類能做到盡善盡美，只要大的方向上確定了，然后再根據日常收集的需要慢慢去添加下級文件夾，而這一級就沒有那么嚴格的限定，用到哪加到哪。
只有在一些非常特殊類目下，我才會去為圖片和素材增加標簽，而不是為了打標簽而打標簽。比如我收集的學員作業也存在 Eagle 中，會包含課程期數、作業類型兩個維度，我就需要用標簽進行管理，方便我后續進行跨文件夾的查看與篩選。
除了基礎的靈感圖片外，我還往里面存了很多其它文件素材，包括但不限于下面這些種類。
Eagle 能作為一個設計資源管理工具，并不是因為可以添加文件夾和標簽，再實現一遍 MacOS 的資源管理功能。而是因為它支持多種文件格式的快速預覽。
它比 Mac 自身的快速預覽更高效（后面會解釋），同時作為雙系統用戶，我得以在 Windows 系統下如下圖快速查看素材預覽，而不是安裝格式支持零碎的插件（或流氓軟件）來實現。
尤其是 Sketch、XD、Mindnode 文件，有了縮略圖，就不用通過打開源文件來查看內容。并且字體文件支持在目錄中直接啟用和停用，可以非常方便的實時管理本地字庫，保證我在設計軟件中只會出現必要的字體，而不會全部顯示出來。
Eagle 還有個特別的功能 —— 網址記錄，這也是我最常用的功能之一。
早前有先用 Pocket 然后轉移 InstaPaper 和 Cubox 來收錄網上看到的優質設計文章，方便我需要引用原文和整理思緒的時候回看。
雖然最后采用的 Cubox 也是一個優秀的稍后閱讀工具，但長期使用下來我還是想盡量打開少的軟件來完成我的工作。所以，自然而然的，我還是把網址全部遷移回 Eagle 中。
只要安裝 Eagle 瀏覽器插件，我就可以快速收集網址到 Eagle 目錄中，之后隨時進行查看。
可能有的同學喜歡用網頁整頁截圖來收集文章，只是我不太喜歡用圖片格式查看文本，所以這個根據個人喜好即可。
同時，我不止拿 Eagle 管理靈感和素材，也直接拿來做項目管理。
在 Eagle 庫文件進行團隊同步以后，針對每個項目創建獨立的項目文件夾，用來收錄相關的文檔、靈感圖、情緒版、配圖和設計文件。
尤其是項目前期收集靈感圖和情緒板的階段，多人共同收集和編輯的結果可以最方便的查看和進行評價，非常好的優化我們的協作流程和效率。
作為一個設計講師，要觀察學生的作業和進行點評。自然而然，我也會優先將所有作業添加到 Eagle 中去。
通過對每份作業前期的打分，標注，來進行后面點評課程的分享和講解。
同時，這些收集的作業，需要在后續其它場景中作為正、反面的案例。所以對作業的評級和標簽就變得必要起來，在相關場景下通過創建智能文件夾快速篩選出范圍內的圖例。
以上就是我使用 Eagle 最重要的 7 個場景，雖然實際應用還遠遠不止它們，但因為篇幅關系就先介紹到這里。
Eagle 作為一款被我長期使用和推薦的工具，不僅僅是因為上面的使用場景，它們是結果。所以，我要從更底層的角度，來解釋它的不同之處和特點。
從上線以來，Eagle 有一個飽受誤解和詬病的底層設計，就是它的 “素材包” 文件 .eaglepack 。用戶需要先創建一個 “庫“，之后添加的所有素材、文件，都會被保存到這個庫文件中去。
換句話說，相當于 Eagle 在你的電腦中創建了一個特殊的文件夾，用來保存你置入的文件。即使你添加的素材是已經下載到本地，它也會再 “復制” 一份到這個庫中。
很多設計師對這個邏輯感到很費解，為什么本地存的好好的，Eagle 要再復制一份，完全就是浪費系統資源和時間的做法。如果無法理解這個邏輯，就是不具備 ”產品思維“ 的特征之一。
我們先從和多人舉例的 Bridge 和 Lightroom Classic 講起。
它們的運作機制，是通過運行該軟件，來讀取你的硬盤目錄和對應文件。使用它們并不會額外復制文件出來，即使你在軟件中置入素材，它們也只是幫助你正常保存到硬盤的對應位置。
為什么這類工具會被我們放棄，有下面這些原因：
第一，它們的核心一直都不是全領域的設計資產管理，而是圍繞在 Adobe 體系下的照片、視頻、矢量圖等多媒體項目素材管理，尤其是攝影相關項目。
第二，就像對比 Photoshop 相較與 XD 一樣，龐大的軟件體積和功能，對啟動速度和硬件資源消耗帶來沒辦法忽視的負面影響，降低操作的效率。
第三，就是比較值得深入思考的地方，那就是管理范圍太廣。直接讀取硬盤就是讓所有文件夾被暴露在管理器中，多出大量非必要的目錄和文件，嚴重增加我們的決策成本和管理成本。
范圍太大或自由度太高并不是什么好事，就像 iOS 的相冊一樣，它是個封閉的圖片庫，不像安卓一樣讀取其它硬盤文件夾，從而讓相片的管理更簡單明了。
自由雖然可以做更多事，但這些沒有必要的可能性增加就只會變成決策和行為中的負擔。簡潔明了，才是高效的前提條件。
第四，就是設計文件的 ”預覽效率“ 問題。不管電腦的性能怎么提升，大型位圖的渲染都是非常消耗資源的工作。不管是動輒幾 G 的 PSD 素材文件，還是高達幾億像素的超清圖片，加載都是需要等待的。
比如下方目錄中的作業文件，因為很多同學導出畫布不考慮圖片質量尺寸，所以往往會出很多 1W*1W 像素以上超過 30M 的位圖。
當這么多大型位圖聚集在一起，Bridge 完全加載出它們的縮略用了整整 2 分鐘的時間……雖然 Bridge 會讓你覺得久第一次打開慢以后就好了，這個功能的代價是生成了大量的 ”緩存”，即這些縮略圖會暫時保存到緩存文件夾中。
緩存文件都只是過客，在你格式化系統，換另一臺電腦打開，或者緩存超過了上面設置的 50G，那么舊的文件就會被刪除，你還是要重新加載該文件的縮略圖。相信我，超出緩存容量是非常容易的事，即使你加到 100G 也一樣。
Eagle 的庫特性，是在添加素材進庫之前，會生成一個對應的縮略圖文件，之后 Eagle 讀取素材列表的時候就是加載這個只有幾十 KB 不到的小文件，而不是解析原圖。
這種策略帶來的幫助除了在文件夾之間切換高效自如，也對本地內存的壓力有非常大的緩解。
在一般資源管理中，一個文件夾內有幾千張高清圖片時，持續滾動到目錄底部就會發現越來越卡，因為占用的內存越來越多，直至達到臨界點釋放掉上方列表加載的內容（上滾會重新加載）。相信有用相機的同學一定很了解這種感受。
綜合各種問題和影響，自建庫，并為每個素材生成不會被刪除的縮略圖就是最好的選擇。
這不僅僅是 Eagle 一個工具的做法，即使 Adobe 也在 Lightroom 應用了相同的策略，新 LR 導入圖片素材到它的自建庫中進行管理，同時生成縮略圖用于列表加載（降低高像素調節延遲）。而老版的 LR 雖然還沒下架，但為它增加 Classic（古典） 的后綴，所以它們認為哪種做法更有潛力，你們自己也能判斷了對吧？
今天我們使用的絕大數軟件都是 SaaS（微軟：基于web的軟件服務），自帶聯網備份和同步，但是 Eagle 只能保存本地卻不符合我們的 “習慣”，這是為什么？
因為成本是沒辦法控制的，重度用戶成百上千 G 的硬盤占用，是不可能輕易使用云服務來實現同步的。這些動輒幾 G 的 PSD 文件或其它大型設計文件，會讓整個同步過程充滿不確定性和沖突。
同時，云同步是一種成本特別高的服務類型，和一般的云存儲空間不是一種概念，想要大容量又要免費，是不可能的。Adobe 同步盤 1T 容量港區售價 68 港幣，蘋果 iCloud 同步盤是 2TB 68 元/月。
算起來他們的價格并不貴，但一定要清楚 Adobe 和蘋果云都是為了自家生態服務的，而且作為軟件業巨頭有自己的大型數據中心，降低云服務成本。類似 Eagle 這樣的初創團隊是不具備這種條件的，即使推出了，價格也不會便宜。
可能還有人會對比花瓣 Pro，它就支持云同步。但是，花瓣 Pro 只是官方網站的本地客戶端，更方便的訪問自己的官網個人中心，無法收集和整理圖片以外的其它素材，所以同步起來容易。
Eagle 的數據就只能保存本地，或者保存在笨拙的移動硬盤內，隨身帶著嘛？肯定也不是。
庫文件的另一個管理好處，就是方便做備份。在今天同步盤服務逐漸成熟的環境下，你可以選擇購買類似 Dropbox、堅果云這類同步網盤，通過它們實現備份和多設備同步。
或者，可以購買群暉、威聯通、極空間為主導的個人云盤硬件，實現空間更大、更靈活的使用體驗。
如果有同學不知道怎么同步的，我會在后面分享。
最后一點，就是對蘋果 ARM 架構的適配了。在 Eagle 2.0 版本中，快速適配了 Mac 的新硬件架構，從而讓軟件的運行、讀取效率遠遠高于上一個版本，做到了絲般順滑的地步。
對軟件本身的優化也是速度的保障之一，相信 Bridge 用的多的同學一定忽略不了它無處不在的延遲與卡頓。
Eagle 如果要進行網絡的備份和同步，那么一定要分清楚同步盤、網盤、移動硬盤的區別。
其中，網盤和移動硬盤基本上是一樣的，它們的使用特點就是我們要主動把要保存的東西，拖拽進硬盤目錄內。移動硬盤備份速度還好點，網盤的備份就要非常久的時間。
如果你有兩臺電腦，使用移動硬盤的方案就得一直隨身帶著，用哪臺插哪臺上。非常容易在第二天忘記拔掉，然后回公司的時候沒庫可用。使用網盤的方案，那就更不可能的頻繁的備份和在另一臺電腦中下載。
類似 Dropbox 或 同步盤工具，就是用來解決這類問題的。簡單點說，同步盤的原理就是本地安裝一個同步軟件和云端的服務器進行通信，這個同步軟件會綁定相關的本地文件夾。于是，這個文件夾內有任何文件的變更，同步軟件就會自動把變更的軟件傳輸到服務器上。
而同步盤的特點并不是只能客戶端和服務器一對一傳輸，而是可以多對一同步。如果服務器內容更新，它就會把更新的數據實時推送給其它客戶端，更新它們本地的文件。
通過這種模式，就能實現自己多臺設備，或者團隊多個成員設備的文件夾實時同步，無需你手動進行操作。
當然，同步盤對服務器的資源占用與消耗遠遠大于一般網盤，所以基本只有付費的工具，而這種帶給我們生產力的提升和數據安全的預算是有絕對必要的。
如果使用蘋果的同學，可以通過將 .eaglepack 保存到關聯 iCloud 的文件夾即可（最好“文稿”里）。蘋果系統就會自動開始同步，其它 Mac 電腦就能實時接收。 默認的空間肯定不夠用，建議開通 200G 容量的服務。
如果用專業同步云軟件，以堅果云舉例，下載完客戶端，只要完成關聯包含 .eaglepack 的文件夾，那么該文件夾就會啟動同步。再在別的電腦中安裝堅果云，就可以把該文件夾下載下來并自動同步。
我收集靈感素材是非常有目的性的，比如一個項目需要的配圖素材，我會一口氣去收集幾十張覺得合適的圖。
Eagle 有一個瀏覽器的采集插件，這個插件非常好用。只要拖動瀏覽器的圖片，就會出現對應的采集彈窗，把鼠標移動到對應目錄上就可以完成采集。
如果你覺得整個頁面的圖片都想保存，也可以在插件圖標中使用批量收藏按鈕（或快捷鍵），就可以采集整個頁面中的所有圖片，以及通過尺寸篩選對應尺寸。
應對日?？吹降膬炠|作品、靈感圖，也可以非?？焖俚膶崿F采集?？梢宰罘奖愕氖占{我們自己的采集資料。
作為移動端 UI 設計師來講，收集日常見過的優秀 APP 界面，是必要的職業素養。而使用 iPhone + MacOS 再結合 Eagle 的話，這個過程就會變得非常的簡單。
首先以完整頁面收集為例，之前看過不少人推薦使用 iOS 的跨設備復制圖片到 Mac 中黏貼的操作，是完全沒有必要的，因為一次只能復制一張截圖。
你要做的就是開啟相冊的云同步，日常使用 iPhone 時把想要收集的頁面進行截屏即可。每過一段時間，在電腦的相冊中打開 ”截屏“ 相冊，就有你這段時間收集的所有截屏?？蜻x相關內容，拖進 Eagle 對應文件夾中就完成收集，然后再刪除原圖。
而且因為相冊特殊的機制，直接拖拽出的圖片是壓縮后的版本，讓截圖的文件的體積大幅度縮小，從3M 變成 300K（完全夠看），非常好的降低硬盤占用量。
除了收集頁面，更重要的 UI 靈感是頁面中的 ”組件“，我們需要根據組件為目標去收集相關的案例。直接拖進整頁截圖的方式就不太合適，比如下面的瓷片區案例區。
所以，我們要開啟 Eagle 的自帶截圖功能，并設置好你覺得順手的快捷鍵。
記得打開第一個選項 ”彈出分類“，就可以每次截圖后選擇指定的文件夾。不管是你的截圖，還是網上的其它案例，你都可以用最高效的方式收集這些組件樣式，輕易搭建自己的組件靈感系統。
前面講過，我會用 Eagle 來放 Mindnode 這類思維導圖文件。但是，Mindnode 先創建保存，再拖進 Eagle 的步驟太麻煩了。
所以，我正常新建并保存 Mindnode 思維導圖會到它默認文件夾中，然后使用 Eagle 的文件夾檢測功能關聯它，之后所有保存的文件就會出現在 Eagle 的目錄中。
之后，我編輯和查看老的 Mindnode 文件就在 Eagle 中進行了。這么做的好處，還可以讓我使用 Windows 系統的時候能夠正常預覽思維導圖。
Eagle 是可以管理字體的，我把所有正在用或收集的字體都放進了 Eagle 的字體文件夾中。
可能你們會有疑問字體丟進字庫就行了，還管理它們干什么？或者說有字由之類的字體軟件，用 Eagle 干什么。
一方面是我會盡量精簡使用工具的數量，另一方面，就是使用團隊同步盤的時候，我們的團隊字庫是統一的，隨時可以找到啟用的，最快解決其他人的設計文件字體缺失問題。
同時，當我在使用 UI 軟件設置字體覺得選擇起來太困難時，就會去關閉掉大多數最近不會用的字體。實現這個操作非常的簡單，只要新建 ”智能文件夾“，并添加選項 ”字形文件“ 和 ”已安裝“，那么啟用的字體就會全部出現在這個列表中。
用一兩分鐘的時間就可以批量選擇你想要停用的字體，右鍵停用即可，它們就會自動從智能文件夾中消失。你可以一直保留這個智能文件夾，每次清理只需要一兩分鐘時間。
目前上方截圖中的很多案例還不是最終的完整版，最近上海疫情居家隔離，大多數工作暫停中，我在閑暇時就開始重新整理 Eagle 庫。因為以前堆積了很多冗余的東西，所以這次我把整體素材都導出后重新進行整理中，也是為什么會寫這篇內容的原因。
Eagle 帶給我最大的價值，就是為我和團隊節省了海量的時間，讓我有可以更快的找到參考素材，更快的整理分類，更好的同步項目文件。
上面分享的很多體驗和總結，都是在 5 年來長期使用中一點點摸索，適應，并形成習慣的。任何工具的使用與自己工作學習的結合，都是漸進磨合的，每個人都可以在這個工具中挖掘出適合自己的用法。
但依舊要給大家一個建議，不要為了收集而收集，也不要沉迷與堆積素材的數量，讓它為我們服務，恰到好處的出現在我們的實踐過程中。
作者：酸梅干超人 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn