常見的B端卡片組件,應該怎么設計才可以達成更好的傳播效果、傳遞更清晰、更完善的視覺體驗?在本篇文章里,作者就結合具體案例,對B端卡片組件設計進行了技巧拆解,一起來看看吧,或許會對你有所啟發。
B端設計的過程中,并不是所有元素抄一抄別人的,從組件庫里引用下就完事了,而是要經過具體組織并設計。尤其在一些特殊的組件中,是可以去表現設計水平,提升項目整體視覺質量的,而不是讓它們看起來非常的枯燥乏味。
這次,我們的改版主要就圍繞在B端常見的卡片組件中,通過3個以前提交過的作業,來分享如何設計B端的卡片。
三個改版案例我們都遵循相同的設計方式和順序:
在該案例中,卡片作為頁面的核心對象,視覺重心不夠突出,且內容的權重沒有得到有效的表現,訂單標識只有一個的情況反復強調對識別卡片沒有任何幫助,且卡片占比過大,沒必要的浪費頁面空間。
所以,重構它的結構時,重點突出標題弱化標簽,將卡片拆分成標題、信息、操作三個欄,讓信息的呈現更簡潔直觀。
然后再具體優化內容和細節,對重要信息突出,固定的標題字段弱化。
最后,再根據主色的需要填充色彩進去即可。
這個案例也是設計得比較有問題的,但是忽略掉全局組件的粗糙,卡片部分的設計也是很多作品案例中的常見問題,要素過多,沒有主次,在列表化的展示中,根本沒辦法很好的識別相關的內容和關注到有效的信息,會被淹沒在繁復的字段內容中。
所以,我們用相同的方法作下區分,將內容分為上中下三個欄。
然后再對字段做權重的劃分,雖然字段信息很多,但值得被突出的要素不多,企業名和數據是卡片中最重要的信息,一個用于識別卡片,一個用于查看核心的指標。
最后,再完成樣式的補全即可,只在星級和用戶職位上增加色彩。
問題和前面還是一樣,內容很零碎,所有要素都強調,于是就沒有重點。所以,下面對它們進行改版,這次因為數據項不再是重點,卡片的目標不是用來查看數據而是用于檢索進入到下級頁面的,所以只分了兩欄。
然后,再對權重進行強調,查看詳情是這里面最重要的元素,圖片則沒有太大的意義僅僅是點綴所以縮小。
最后,再完成相應色彩的添加和圖片的填充,完成最終的視覺效果。
這三個改版都用了很簡單的修改方式,通過理解卡片的作用、字段信息,對它進行信息分區,然后填入相關的字段并做出權重劃分,最后再用顏色為不同的要素加權。
只要掌握這樣的設計思路,做絕大多數卡片都不會有阻力,只會糾結于應該用哪套樣式更合適。
因為時間關系只做了很簡單的調整,沒去做多套大跨度的樣式變更,同時套進原圖環境沒做整體的處理,所以還有很多升級優化的空間,理解這個感覺即可。
作者:酸梅干超人;
本文由 @超人的電話亭 原創發布于人人都是產品經理,未經許可,禁止轉載。
題圖來自Unsplash ,基于 CC0 協議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
這些是一些創新和不同尋常的B端系統界面設計思路,可以根據具體的業務需求和用戶群體的特點進行定制和調整。希望這些思路能夠為您帶來新的靈感和想法!
在B端產品設計中,中后臺UI設計規范的建立對于提升設計效率、保證用戶體驗一致性以及優化開發流程至關重要。本文從設計規范的意義、原子設計理論、后臺設計系統搭建以及Design Token應用實踐四個方面,詳細總結了B端中后臺設計的要點和方法,供大家參考學習。
今天從以下4個方面,結合7年B端設計工作經驗,為大家分享原子設計理論和中后臺設計系統搭建的應用實踐。
分別站在整個產品設計研發流程中各個角色的不同角度,在工作中可能會有以下“抱怨時刻”:
由此,體現出搭建設計規范的作用和意義:
① 產品側
?個產品不同分?多個團隊完成的時候,可以保證產品團隊使?同?份設計規范快速完成產品原型設計。保證可復?模塊的交互體驗的?致性。
② 設計側
通過設計規范去解決?部分需求,極?提?效率解放雙?,讓設計師能去做?些更發揮創意和想象?的設計。
③ 開發側
形成開發資產,可以提升研發效率,降低維護成本。開發?程師?需再重復開發同?個組件,只需要去組件庫?調?即可,配合業務邏輯,?效完成界?開發,做到開箱即?。
④ 測試側
標準化的設計規范,是測試?員最喜歡看到的。例如,設計規范規定彈窗 footer 區按鈕組居右,那么測試?員只要測到不居右,就可以給產品提優化建議了。
設計規范中具像化的環節是設計組件化,最早可以追溯到?業?命時期,福特創造的流?線?產?式。福特將汽?分解成零部件,再把零部件模塊化組裝,這?創舉極?的提?了?產效率。
根據資料顯示,T型?是世界第?款?量使?通?零部件,并進??規模流?線裝配的汽?。這種?式極?地提?了T型??產效率,降低了?產成本。
1914年,福特已經可以做到93分鐘?產?輛汽?,?同期其他所有汽??商的?產能?總和也不及于此。
到了1920年代,T型?的價格甚?降到300美元?輛(問世之初T型?的售價僅需850美元,?同期的競爭對?則通常為2000-3000美元?輛)。
原子設計理論最初來源于化學領域,這一點從名字可以聽出來。在化學中,所有的物體都是由原?構成,原?組合構成分?,分?組合構成有機物,最終形成了宇宙萬物。
2013年前端?程師 Brad Forst將此理論運?在界?設計中,形成?套設計系統,包含 5 個層?:原?、分?、組織、模板、??。當公司的業務產品逐漸擴?時,我們就需要制定?套完整的設計系統,提升設計和開發的協作效率,統?所有設計師的輸出物。
總之,將設計拆分成?些基本元素,例如?個按鈕、?個彈窗,再根據業務需求、產品邏輯重新組裝,形成最終的產品,這就是原?設計理論(組件化設計),區別于整體設計制造的?種新的?作流程。
原?是物質的基礎組成部分,是構成設計系統的最基礎元素。
在界?中以「元素」的形式存在,例如:顏?、?字、圖標、分割線、間距、圓?、陰影等。
色彩體系
中后臺產品的?彩體系主要分為3類:品牌?、功能?、中性?。
B端網站體現理性和效率特性,往往會使中性色占據九成以上,應用在背景、邊框、文本和分割線。下圖為顏色定義示例(考慮暗色模式)。
文字體系
B端產品的?字系統設計?標:增強閱讀體驗、提升信息獲取效率,字體是體系化界?設計中最基本的構成之?。
字體的??、字重、?彩區分體現界?信息的層級關系。
下圖為字階應用規范示意:
陰影、圓角、線條
陰影:在B端界?中,有些特殊的元素會使?到陰影,從陰影中我們可以看出物體距離平?的?度,距離平?越?的物體陰影越?;
圓角:從直?到圓?給?帶來從嚴謹冰冷到柔和親切的?理感受,在B端界? 中,常?2-8px圓?;
線條:分割模塊及輔助定位。
在界?中,分?是按照規律組合起來的元素,如:按鈕、搜索框、選擇器等。
以按鈕為例,?字、?塊、圖標和間距這些抽象的原?產?關聯組合成分?:圖標、?字傳達含義;顏?、圓?傳遞特性;間距、尺?定義規范。
分?+原?組合成更復雜和可拓展的組織(區塊組件),如搜索區、卡?列表區、表單區、數據統計區等。
由原?+分?+組織構成的更復雜更具拓展性的模塊,構成了典型??模板,如列表?、詳情?、異常?、Dashboard等。模板在設計系統中承載的作?就是保證設計?案在原型各階段的?致性,專注??底層架構,并?具體??。
帶業務邏輯的場景案例,如標注場景、權限管理、詳情設置等,將??模板填充真實的?字、圖?后形成??,即帶交互邏輯的?保真原型圖,真實內容使設計系統有了“?命” 。
雖然通過設計規范可以對產研流程提效,但在開發還原中還是會經常遇到?些棘?的問題。
開發還原準確度難以保證,走查幾輪還有有細節問題沒有修復;
領導要求開發暗色模式,或者客戶要求換一套主題色,找到替換的工作量巨大;
設計一處變更,涉及多個頁面模塊,維護工作量大。
為了解決和優化上述的問題,Design Token 應運??。它可以解決產品設計和開發過程中的細節、變更和?格?致性的問題,有效提?產研團隊設計質量和協作效率。
“Token”原本的意思是“令牌,指令”,與 Design 連在?起指“設計變量”。在?程邏輯中?于?戶身份與服務器端進?驗證,?在設計體系中,Design Token 則可以簡單理解為封裝的視覺樣式參數。它通過規定樣式參數,并通過?套符合設計師、?程師理解的統?的命名規則,為這些樣式參數的定義名稱。
Design Token優勢
設計語義更易理解:幫助設計師和開發建?統?語?,設計?案更加?致。從下到上的Design Token命名思路。
主題?膚?鍵替換:主題?膚的替換可以?在兩個維度,?是淺?模式和暗?模式的替換,?是不同品牌?之間的替換。我們可以將不同主題的同?個場景下的顏?使?同?個 Token 命名,達到?鍵換膚的效果適配不同客戶?案。
設計變更?效維護:替代傳統?作流?鍵替換效果。例如修改二級文本的顏色,傳統工作流需要先修改設計規范,修改設計稿,然后輸出給開發,開發逐一更新代碼,完成后提交給設計師進行走查驗收。而當使用Token之后,只需要更新Token參數,就可以直接導出JSON給開發,一鍵自動更新。提高效率不止一點點。
設計效果精準還原:代碼編輯器?動化提示顏?選擇,如不正確則產?報錯。
總結一下使用Token開發的優勢:
第一步:提煉token元素;
第二步:定義命名規則;
第三步:整理Design Token資產表;
第四步:開發與應用。
接下來具體說說如何為Design Token命名,命名方式目前并沒有絕對統一的要求,不過有一定的邏輯規則,可以由設計師找前端開發一起商量出一個都能通俗易懂便于理解的命名規則,
舉個例子:
1.Token名稱由大到小排序,中間用“-”分隔;
2.Token前綴可自定義添加公司簡稱,如“–el-xx” 、“–ant-xx”、“–td-xx”。
為了更好的統一規范,應用Token,建議成熟的互聯網公司設計團隊搭建自己的低代碼平臺。一鍵更換主題,盡在指尖。
以上就是從四個方面歸納的B端設計規范定義和總結,希望對你有所幫助!
本文由人人都是產品經理作者【Clippp】,原創/授權 發布于人人都是產品經理,未經許可,禁止轉載。
題圖來自Unsplash,基于 CC0 協議。
蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan
在數字化時代,B端產品的用戶體驗設計正變得愈發重要。動效設計作為提升交互體驗和效率的關鍵手段,正在成為B端設計中不可或缺的一部分。本文將深入探討2025年B端設計中動效的趨勢,從動效的歷史演變、物理世界中的靈感汲取,到釘釘設計系統中的實踐應用,幫助我們理解動效如何從簡單的視覺裝飾轉變為提升產品效率和用戶體驗的核心工具。
回溯互聯網的發展進程,從桌面端的撥號上網,到5G移動互聯網,再至人工智能的助力,科技領域正在經歷著翻天覆地的變革。
未來的數字世界,在沉浸感、參與度、個性化等維度對體驗會提出更進階的要求;與此同時,B端企業對于高效、簡便、用戶友好的界面需求與日俱增。
在2025年的當下,B端設計師唯有持續學習,適應新技術與新趨勢,緊密圍繞客戶的業務價值展開設計,進一步注重實用性、包容性以及可定制化,方可為企業客戶塑造出卓越的產品與服務。
因此,我們結合釘釘近10年的B端產品設計經驗,鑒于未來B端設計趨勢將展現出多元化、智能化和人性化的特質,從B端產品個性化、風格與質感、界面版式、品牌物料、圖標、動態交互等多維度設計展開深度研究,與大家一道探討B端設計的本質和趨勢,期望在真正駕馭B端產品設計的這條道路上,帶來些許有益的啟迪。對交互等多維度設計展開深度研究,與大家一道探討B端設計的本質和趨勢,期望在真正駕馭B端產品設計的這條道路上,帶來些許有益的啟迪。
今天要和大家聊聊 B 端產品的動效設計趨勢。我們將回顧動效的發展軌跡,從歷史演變到設計哲學,探索如何從物理世界汲取靈感,并分享釘釘在動效設計中的思考與實踐。
動效設計在互聯網的發展歷程中經歷了多次變革。從最初簡單的過渡動畫,到如今復雜而精細的交互體驗,動效的演進不僅是技術發展的產物,也映射了用戶體驗設計理念的不斷深化。
在互聯網的早期,受限于帶寬和硬件性能,動效的應用較為基礎,主要用于加載進度條和頁面過渡,核心目的是向用戶提供反饋,減少操作過程中的不確定性。典型案例是 Windows 98 時代的加載進度條和網頁上的緩沖動畫。這些動效雖然簡單,卻在當時發揮了重要作用——幫助用戶理解系統狀態,降低等待焦慮。
進入 2000 年代中期,Flash 技術的普及讓網頁動畫迎來了黃金時代。Flash 賦予了設計師更大的自由度,使得網頁可以呈現更豐富的動態效果,動效不再局限于狀態反饋,而開始深度參與交互體驗。這一時期,動效的作用從提示系統狀態進化為增強用戶沉浸感,例如按鈕懸停時的動態反饋,炫酷的頁面切換過渡,以及交互式動畫(如鼠標跟隨效果、小游戲動畫等)。
不過,Flash 的動效過度依賴插件,影響性能,并且在移動端難以兼容。2010 年代,隨著 HTML5 和 CSS3 的發展,Flash 逐漸被取代,動效設計進入新階段。
隨著移動互聯網興起,尤其是 Material Design,iOS,以及 Fluent Design 等動效規范的推出,動效設計進入了全新的階段。這個階段的核心理念是基于物理規律的自然動效,強調動效不僅僅是裝飾,而是信息層級傳遞、引導用戶操作的重要工具。
Material Design:強調物理隱喻與流暢性
Fluent Design:深度融合光影與層次感
由此可見,動效不再只是視覺上的炫技,而是成為提升可用性、降低認知負荷的重要工具。合理的動效可以提升用戶的操作流暢度,讓界面變得更自然、更具生命力。
在自然界里,每一次風吹樹葉的擺動、每一滴水滴入湖面的擴散,都遵循著物理規律,展現出流暢且和諧的運動軌跡。這些自然現象不僅帶來視覺上的愉悅,也蘊含著深層次的運動邏輯,為數字動效設計提供了源源不斷的靈感。動效的流暢性、節奏感、反饋感,本質上都是對物理世界美學的映射。
例如,波紋擴散是我們常見的自然現象。當一顆石子落入湖面,波紋自中心向外擴散,起初迅速,隨后逐漸放緩,最終消失。這個過程中的漸進減速特性為數字動效設計提供了極佳的靈感。在數字界面中,我們可以通過緩慢擴散的動畫來模擬水面波紋的效果,形成一種溫和的反饋感。
再比如,現實世界中的物體在運動時通常會表現出加速與減速的特性。以地球上的自由落體為例,物體從高空下落時,初始速度較慢,但隨著重力作用,它不斷加速。這種非勻速運動,在動效設計中被轉化為緩動曲線(Easing Curves),使得用戶在界面交互時感受到更加自然的動態變化。
而彈跳和反彈又是另一個物理世界中常見的運動方式。想象一顆籃球從地面反彈起來,起初速度快,隨后逐漸放緩,最終停止。這種逐漸衰減的回彈,正是彈性動效的靈感來源。在界面交互中,彈性動效可以模擬物體的重量和材質,提升操作的真實感。
當牛頓凝視落下的蘋果,他發現了萬有引力的奧秘;而當釘釘的設計團隊觀察一張任務卡片的拖拽軌跡時,我們探尋的是數字世界的運動法則。在物理規律與交互邏輯的交匯處,釘釘的動效設計體系逐漸凝練出一套方法論——讓每個像素的運動既符合自然規律,又服務于生產效率。
在 B 端產品中,動效遠不止是視覺與交互的簡單結合,更是提升可用性和降低認知成本的關鍵手段。它不僅承擔著引導用戶操作、傳遞信息層級、降低認知負荷的功能,還通過增強操作確定性,幫助用戶更高效地完成任務。換句話說,我們正以理性與直覺,重塑效率美學。
釘釘的設計框架始終圍繞視覺感官和用戶體驗兩個核心維度展開,追崇理性與感性的精密協作:
1. 視覺感官:流暢
2. 用戶體驗:高效
企業級應用中,物體的運動時間需要把控得恰到好處。研究表明,人類對 100ms 以下的變化幾乎無感,而超過 1s 的等待則會讓用戶產生不耐煩的情緒。因此,釘釘的動效體系嚴格遵循以下節奏,通過順應人類大腦的認知規律,確保每一次動效都恰到好處,帶來舒適的體驗:
現實世界中的物體運動受到重力、摩擦力等因素影響,呈現加速與減速的動態變化。釘釘的動效體系也采用緩動曲線(Easing),以模擬真實世界的運動節奏。當數字界面掙脫線性勻速的機械感,便擁有了令人愉悅的「生命感」。
在二維屏幕上構建三維認知,需要更精密的「空間修辭學」。釘釘的動效體系確保每一次位移都符合用戶的直覺,并運用空間層次感,讓信息更易理解。
1. 同級物體
2. 從屬物體
3. 三維空間
在動效設計中,無障礙性不僅關乎技術標準,更關乎用戶的體驗公平性。一個包容的設計體系,應該讓所有用戶——無論其身體或認知能力如何——都能平等地理解和使用產品。無障礙動效的核心,在于減少干擾、提供替代方案,并賦予用戶選擇權,確保每一次交互都是安全、友好的。
避免誘發健康問題:高頻閃爍或快速變化的動畫可能誘發光敏性癲癇等健康問題。因此,在設計時,我們應避免超過3次/秒的快速閃爍,并盡可能減少過度刺激性的動效
提供替代方案:對于依賴屏幕閱讀器的用戶,純視覺動效可能難以感知。我們可以為動效添加文本描述或提供靜態替代方案,確保所有用戶都能理解動效傳達的信息。例如,在釘釘 AI 助理中的加載場景,我們提供「正在為你生成…」的文本標簽,方便屏幕閱讀器用戶理解當前狀態
動效設計已成為現代數字產品中不可或缺的組成部分。從簡單的過渡動畫到如今富有交互感和情感觸動的設計,動效已經不再是單純的視覺裝飾,而是推動產品發展、提升用戶體驗的關鍵力量。
真正的好動效,是那種用戶幾乎察覺不到的流暢交互,它能夠讓信息傳遞變得高效、讓操作更加順暢,同時也讓數字產品展現出溫暖的人文氣息。動效,作為產品與用戶之間的一座橋梁,它不僅是界面的點綴,更是效率與體驗的催化劑。
未來,釘釘將繼續探索動效設計的創新與實踐,通過優化交互體驗、提升產品效率,不斷賦能用戶、創造更美好的數字世界。
蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan
藍藍設計(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。
關鍵詞:UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數據可視化設計公司、用戶體驗公司、高端網站設計公司、銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計、醫療行業軟件UI界面設計、教育行業軟件UI界面設計、企業信息化UI界面設計、軟件qt開發、軟件wpf開發、軟件vue開發
我們需要了解一下設計模式,例如它是什么、什么時候用、怎么使用,可以讓我們在沒有參考的情況下,也能設計出合理、好用的界面。
把不同的內容模塊,放到一組順序排列的面板中,這些面板每一個都可以折疊、可以展開,互不干擾。
你需要在頁面上顯示大量各種各樣的內容,可能包括文本、列表、按鈕、表單控件等,而你又沒法把它們都顯示在頁面上。
1、用戶可能一次只需要查看一個模塊的內容。有些模塊比別的模塊更長或更短,不過它們的寬度一樣。
2、這些模塊組成了一個工具箱,或者兩級菜單,或者包括一些交互式元素的某種結構,這些模塊的內容要么彼此相關,要么彼此類似。
3、要注意的是,當一個大模塊打開或者打開了很多個模塊的時候,模塊底部的標簽可能會滾動到屏幕或窗口的外面。如果這一點對用戶來說有問題,那就要考慮一下其他的解決方案。
豎向排列這些模塊,并使用對于用戶來說有意義的排列順序。
例如:QUICK BI 右側折疊面板,順序是從大到小,從外到內。
為每個模塊選擇一個簡短而富描述性的標題,并把這個標題放到一個橫條上,讓用戶可以單擊它來打開或關閉這個模塊。
也可以用一個可以變換方向的三角形圖標來提示打開/關閉的操作:關閉的時候向右或向下,打開的時候向上。
一次允許打開多個模塊。
人們在這個問題上有一些不同的看法,有的人喜歡一次只能打開一個模塊。不過根據經驗,特別是在各種應用里,一次允許打開多個模塊更合適。這樣可以避免一個之前打開的模塊突然消失,這樣會讓用戶覺得很粗魯,也很意外:“喂, 那個菜單哪里去了?之前就在這里的!
當用戶在登錄狀態時,折疊面板應該在多個操作期間,保持它們各自模塊的打開和關閉狀態,這點很重要。
如果模塊內容需要進一步拆分,折疊面板還可以級聯使用,不過這樣看起來會有點混亂。 因此只用一個一級折疊面板模塊更合適,如果有必要可以采用其他結構代替,比如tab頁。
把頁面上的內容組合到幾個不同的區塊里,每一個都可以獨立打開或關閉??梢噪S意在界面上放置這些區塊,用戶還可以移動它們,形成自己定義的布局。
你正在設計一個桌面應用(例如:釘釘、飛書)或者一個網頁應用(例如:紛享銷客、ONES),應用中會涉及看板、工作臺、儀表盤、數據分析等頁面,你希望用戶對這些頁面有一定的控制權。 這些頁面應該是應用中的主頁面、是用戶會經常查看的頁面。
在這個頁面上,需要顯示大量各種各樣的內容,可能包括文本、列表、按鈕、表單控件、圖表等,而你又沒法把它們都顯示在一個模塊上。
1、用戶想同時查看好幾個模塊。
2、不同的模塊對每個用戶來說,有著不一樣的價值。例如,有些人想看到A、B、C這三個模塊,而另外一些人可能想看到的是D、E、F。 3、在空間大小方面,各個模塊差異可能比較大。例如,用戶希望把信息少的模塊縮小。
4、模塊在界面上的位置對用戶來說很重要。例如,重要的內容用戶希望放在前面。
5、有時候模塊數量比較多,用戶不希望全部展示出來。例如:用戶匯報工作時不需要這個模塊,可以把它先移除,匯報完后,再添加回來。
6、控制這些模塊的功能可能是一個工具條,或其他交互式結構的組成部分。
因為不同的用戶關注點也不同,他們希望能自己選擇想看的內容。 可以把需要的內容放到顯眼的位置,把不需要的東西隱藏起來。同時,他們還可以利用“空間記憶”來記住不同的內容在什么位置。
空間記憶:當人們需要使用某個東西時,經常是通過回憶它們的位置來尋找它們,而不是它們的名字。 例如:你因為有事外出,需要同事打開你的電腦幫你發一份文件,通常你也說一句文件好像再桌面的右邊,這也是利用了空間記憶幫助快速尋找。很多軟件把對話框的按鈕(確定、取消)放在右下方,有一部分原因也是考慮到用戶的空間記憶依賴性。
總結:使用可移動的面板可以讓用戶的工作效率更高,工作更舒服。
為每個模塊提供名稱、標題欄和默認尺寸,并為它們提供合理的默認設置。 讓用戶按自己的喜好在頁面上移動這些模塊,如果可能的話,可以提供拖曳功能。
讓每個模塊可以通過簡單的操作進行編輯和隱藏,也可以考慮讓用戶可以徹底移走這些模塊,在標題欄上放一個關閉按鈕就可以。
可移動面板要清晰的體現編輯與預覽狀態,如果用戶誤操作打亂模塊順序,需要提供一個“恢復默認設置”的按鈕。
把次要內容和可選內容放到用戶能自己打開、收起的面板里。
你需要在頁面上顯示大量各種各樣的內容,可能包括文本、列表、按鈕、表單控件等,而你又沒法把它們都顯示在頁面上。 同時,還可能有一些適用中央舞臺模式的內容需要在視覺上優先處理,需要把面板收起。
1、這些模塊為界面上的主要內容提供注釋、修改、說明或支持。(例如:WPS右邊的快捷鍵、樣式、幫助、資源)
2、這些模塊可能不是很重要,不需要默認展開。
3、對不同的用戶來說,它們的價值并不一樣。(例如:圖中新手入門指導,老用戶可能并不需要)
4、甚至對同一個用戶來說,這些模塊可能有時候非常有用,換個時間就不一定了。當 它們收起的時候,這些空間最好留給界面上的主要內容。
5、這些模塊之間可能彼此沒有多大關系。當用到Tab和折疊面板時,這兩個模式會把各個模塊組合到一起,表示它們之間有一些關聯,而可收起面板不會對內容進行分組。
把無關緊要的內容隱藏起來可以讓界面變得簡潔。
當用戶選擇隱藏某個模塊時,只要簡單地收起這個模塊就可以了。 它所占用的空間也會還給主要內容。
這也是漸進式展開原則的一個例子—只在用戶需要的時候,需要的地方立即顯示那些隱藏的內容。
總的來說,想讓界面保持整潔,通過對內容進行分組和隱藏是非常有效方式。而可收起面板、Tab、折疊面板、可移動面板,這4種模式正是有效方式的工具。 如何使用
把內容放到一個單獨的面板里,讓用戶可以用一次單擊來打開或關閉這些面板。 可以利用引導性的文字來表示這里可以展開(例如:更多),也可以利用三角形的圖標來表示這里可以展開。
當用戶關閉這個面板時,把它所占用的空間收起來,用來顯示主要內容。
也可以在打開和關閉這些面板的時候加上動畫效果,這樣會讓打開和關閉時的過渡更加平滑。
如果有多個模塊要用這種方式來隱藏,可以把這些模塊放在一起,或者用Tab、折疊面板來組織,還可以把它們分開放在主界面上。
如果發現大部分用戶都打開了一個默認為關閉狀態的可收起面板,那么應該讓它默認打開。
謝謝大家觀看!
我與ICON的設計好像有什么不結之緣。早在2017年我就寫過一篇如果對抗APP中ICON設計同質話的問題。提出了自己的一些建議。而在之后的工作中也多次改版或設計過成套的APP應用中心的ICON和系統后臺ICON庫。ICON設計的經驗那是不得不豐富的存在。
ICON,中文翻譯為圖標。是對象的圖像表示,指用圖形指代某些名詞,如:打開、警告、愛、學校、山等。ICON,是上世紀九十年代伴隨IT 產業出現的一個技術詞匯,原指計算機軟件編程中為使人機界面更加易于操作和人性化而設計出的標識特定功能的圖形標志。
下面是我總結了這幾年設計icon的經驗結合大廠的后臺規范。給新手設計師的一些建議,都是經驗之談希望能夠幫到你??梢宰屇阍谠O計的這條路上走的越來越輕松。
那位美女設計師:?。「闶裁囱?,B端設計師icon還有設計,你傻不傻呀。我給你分享幾個現成的icon網站吧下載了就能用。
我:是的我也用現成的icon在很多的需求里。但是我更喜歡自己設計,自己去做。直接用現成的icon不爽嗎。嗯當然爽呀。看是你要要知道做的更好的方法和可能性。不要總把自己當美工吧,我們可以是設計師的。
做為什么師我們大概都應該知道icon作為我們界面的重要構成元素,它會在很大程度上影響我們界面的風格。甚至會影響我們品牌的調性。所以一套符合我們設計風格具有我們品牌調性的icon是很有必要的??傊阆朊靼滓粋€道理,你一整個屋子都裝修好了,房間里獨獨到處都放了幾把破椅子。不難受嗎。
Ant design設計規范:圖標是 UI 設計中必不可少的組成。通常我們理解圖標設計的含義,是將某個概念轉換成清晰易讀的圖形,從而降低用戶的理解成本,提升界面的美觀度。在我們的企業級應用設計范圍中,圖標在界面設計的諸多元素中往往只占了很小的比重,在調用時也會被縮到比設計稿小很多倍的尺寸,加上在圖形素材極度豐富并且便于獲取的今天,在產品設計體系中實現一套美觀、一致、易用、便于延展的圖標體系往往會被不小心忽略掉。Ant Design 相信一整套優質的圖標對于設計質量的影響是非常巨大的,這考驗著設計師的協作能力,以及對圖形塑造的系統性思維,同時也能反映一個團隊對于細節的追求。
中后臺使用的icon大部分規范平臺也好或者一有系統也好他們的設計原則基本是大同小異的。我的建議是如果你要設計一整套的icon圖標。在設計之前確定自己icon的設計原則。這個設計原則可以依照自己的界面設計風格或期望的界面設計風格以及行業屬性、自己品牌等去制定。
Ant Design 的圖標設計原則源自「確定」和「自然」,落實到圖標設計領域,一共有四個。準確、簡單、節奏、愉悅。
設計造型準確的圖標(保持偶數原則,去小數點);選擇表意準確的圖標,不對用戶的認知造成困擾。
在表意清晰準確的基礎上,盡量保持圖形的簡潔,不做多余的修飾。
挖掘構圖中的秩序之美。
賦予適度的情感。在部分圖標設計中,會適度的注入擬人化的元素,令圖標具備生命力。
Icon 作為 UI 構成中重要的元素,它一定程度上影響整體 UI 界面呈現出的風格,TDesign 初期提供一套適用于中后臺場景的線性 Icon,以普適、通用的標準進行設計,風格契合默認 TDesign 的風格,線性、圓角。在TDesingv中設計原則為、從簡、精確、適度
制作時保證參數的簡化,盡量消除小數點以及非整數的角度。處理線條以及輪廓時刪除多余的錨點,輸出時應避免出現不必要的裝飾,保持圖標的簡潔。
在設計時避免使用那些含義模糊的圖形,當同個事物存在多個圖形表述時,應選取最為流通的樣式,必要時進行針對性的強化。在圖標輸出時也應遵守命名規范,精確的文字描述便于他人查找。
單個圖標作為一個獨立的視覺個體,在線條的疏密以及圖形的搭配上要呈現適度感。在處理一些必要的高密度圖標時也要考慮線條的節奏感,讓其舒適不壓迫。系列圖標要遵守適度原則,將變化控制在一定范圍內。
發現沒大廠規范為了普世所以他們的圖標設計原則定的基本都是一樣的。只是換了一個詞而已。而且他們的大部分原則和細節都是來自平面設計里的板式設計和標志設計里的形式美法則。
設計一套優秀的圖標設計應該簡潔明了、直觀性強、獨特性好、可識別度高、適應性廣、細節處理精細、可擴展性強,并且能夠根據用戶反饋及時改進和優化。如果要具備這些特征,那我們在設計的時候就要遵循一些特定的規范。
icon設計的柵格在大場的設計規范里面分為兩種。一種ant design設計規范里面的那種柵格。另一種是TDesign設計規范里面的柵格。我之前在做的時候是直接呀的阿里巴巴示例圖庫的上傳模板里面的柵格進行設計的不過。沒有這設計規范里面的柵格好用。
Ant Design 的系統圖標都是按照 1024 x 1024 的畫板進行制作的。
出血位: 在圖標的設計過程中預留出血位的做法,可以預防某些造型的圖標在具體應用時出現邊緣被切掉的風險;同時在設計過程中,也為設計師把握圖標間平衡留下了進退的余地。新版的設計規格在圖形的外圍預留了 64px 的出血位,多數的圖標在設計中我們都不建議超過這個區域。
柵格作為圖表繪制的底層結構,是一切屬性設計的基礎。線條的長短粗細、圖標的大小比例等關鍵因素均在其基礎上制定。圖標常見尺寸為16*16;20*20;24*24;32*32這四種輸出尺寸。這些尺寸均可以清晰的顯示在常規的顯示器上。TDesign 最終選擇以16*16px 的尺寸作為圖標繪制的統一柵格尺寸
我記得最早入行的時候畫icon就用的這種柵格。但是我不太喜歡,因為在實際的設計之中會出現好多問題。當時的我是無法解決的。
面對各式各樣的icon我們在上一步有了柵格,接下來就要處理在柵格里如何讓形狀不同的icon在視覺上大小是一致的,在視覺上是平衡的。所以轉對不同形狀的icon在柵格里所占的輪廓規范就產生了?;具@個輪廓都是一樣的。因為他是一個很基礎的東西。
但其實可能是我技術的問題。在過往的很多次設計中如果你完全按照這個輪廓去執行。做出來的icon你會發現其實在視覺上還是會存在問題的,我都會在做一次優化。不過這很大可能是我技術和設計能力的問題吧。
即使有了規范,柵格輪廓等。但是往往我們在設計制作的時候還是會有很多的細節需要去處理的。這樣我們的設計才會更專業。因為我用ant 規范比比較多所以。我們就一起看一下ant的規范里對icon設計細節的一些建議。
在ant的圖標設計規范中,對icon圖標進行了、形式感、韻律、平衡、辨識這幾方面對我們在設計和制作icon可能遇到的問題給了一些建議。
Ant Design圖標設計建議詳情:https://ant-design.antgroup.com/docs/spec/icon-cn#%E8%BD%AE%E5%BB%93%E7%BA%BF%E4%B8%8E%E6%A8%A1%E7%89%88
以上的內容主要在探討一類icon圖標的設計。那就是中后臺的圖標設計。但其實icon圖標是有很多的分類的。交互性圖標、裝飾性圖標、說明性圖標
這類圖標主要用于應用程序的界面設計,它們可以向用戶傳遞某種信息,引導用戶執行特定操作,同時也允許用戶向程序傳遞控制信息。例如,登陸注冊按鈕、開關按鈕、數量按鈕、點贊、轉發分享等都屬于交互性圖標。
這類圖標主要用于提高頁面設計性,它們可以加深個性化設計風格,提升用戶線上體驗感,迎合受眾群的偏好,提升設計親和度。例如,符合節日需求的線上活動呼應圖標、個性化圖標等都屬于裝飾性圖標。
這類圖標主要用于闡明信息,它們是區分不同功能或內容的視覺標記,簡單地說,就是對功能的解釋說明。例如,象形圖標、隱喻圖標、工具圖標和混合圖標等。
此外,根據圖標的具體功能和用途,還可以將圖標分為表意圖標(又稱解釋性圖標)和標識性圖標。表意圖標是通過原本不存在實物的符號表達某些特定的含義或操作行為,這些符號逐漸繼承了一些象形符號的特性并不斷演化。例如,“箭頭”已經從最初的“弓箭”衍生為一種特定的表意符號。而標識性圖標主要用于標識品牌、產品或服務,它們通常具有獨特的設計風格和視覺效果,以便在市場上脫穎而出。例如,蘋果公司的蘋果圖標就屬于標識性圖標。
為我以往的設計經驗里大部分都是在做B端的設計和交互工作。在我的理解里圖標就分兩類。1、規規矩矩的ICON。2、花里胡哨的ICON。就這么簡單。
再優秀的理論也只能是理論。實踐才是檢驗真理的唯一標準。這不是我說的。這是老馬(卡爾·海因里希·馬克思)說的。所以就請大家進入我的實踐過程吧。
需要還是要從最初開始講。我負責的SAAS平臺要迭代換框架。然后對界面視覺交互、產品功能都迭代一個大的版本。這次設計部分的任務就我來負責。
因為是大的迭代嘛。所以這次icon設計的需求是跟著整個平臺一起走的。你要設計新的視覺還用之前的那套老icon顯示是不合適的。在者說那套icon的質量也是一個難以想象的存在。是開發直接從網上個個平臺找的。所以這次這個平臺的視覺迭代就有了搞一套適合我們界面和行業的icon圖標。
這是我們SaaS平臺的設計價值觀
因為是先有了界面,要做一套配合界面的菜單icon圖標。我想我們的icon要符合整體頁面的風格。不說給界面加分了,也不破壞我辛苦做的界面視覺。
結合我們品牌的logo圖標的特點。讓我們的icon也擁有獨屬于他們自己的絲帶偶。把公司logo的設計特點加入到我們這次icon的設計原則里。
是的優美,是我們這一套icon的特點。也是從我們logo里提取出來的設計要點。然后把他運用到icon設計里。
規范的知道基本是使用的阿里巴巴矢量圖庫早期的那個上傳圖標模板的AI文件。為什么會選擇使用這個呢。因為我們SaaS平臺的所以icon都是從阿里巴巴矢量圖庫引用的。我要把我做的icon上傳到阿里巴巴矢量圖片他們使用,而不是直接切圖給他們用。
在這套圖標設計的時候,其實并沒有完全的按照大廠的設計規范進行。在很多的細節上做了調整。為的是達到更好的效果。當然。也有很多遺憾。在很多的方面并不是很標準。在下次優化設計時,會更好的去執行制定的設計原則和設計規范。
之所以寫這部分內容,是因為我覺得在平面設計里標志設計的知識對我們現在圖標設計是很有用的??梢允菆D標設計本身就是適應了顯示屏后的標志設計。如果你搞懂了標志設計的系統知識,那圖標設計不就是手拿把掐的事了。標志設計就是殺雞的牛刀。
一般我們說到標識設計可能大概覽的就是會認為是品牌形象設計,也就是LOGO設計。是的我大學學的標志設計就是在講品牌LOGO的設計。但我現在理解的標志設計可能意義更廣泛。因為在很多的時候我是把標志設計的知識和原理來應用到其他的設計方面。
標志是品牌形象核心部分(英文俗稱為:logo),是表明事物特征的識別符號。它以單純、顯著、易識別的形象、圖形或文字符號為直觀語言,除表示什么,代替什么之外,還具有表達意義、情感和指令行動等作用。
LOGO、標志、徽標、商標是現代經濟的產物,它不同于古代的印記,現代標志承載著企業的無形資產,是企業綜合信息傳遞的媒介。
標志的來歷,可以追溯到上古時代的"圖騰"。最初人們將圖騰刻在居住的洞穴和勞動工具上,后來就作為戰爭和祭祀的標志,成為族旗、族徽。國家產生以后,又演變成國旗、國徽。
古代人們在生產勞動和社會生活中,為方便聯系、標示意義、區別事物的種類特征和歸屬,不斷創造和廣泛使用各種類型的標記,如路標、村標、碑碣、印信紋章等。
到本世紀,公共標志、國際化標志開始在世界普及。隨著社會經濟、政治、科技、文化的飛躍發展,21世紀以來經過精心設計從而具有高度實用性和藝術性的標志,已被廣泛應用于社會一切領域,對人類社會性的發展與進步發揮著巨大作用和影響。
隨著“讀圖”時代的到來,標志以簡潔、 獨特、易識別的圖形符號傳達著特定的含 義和綜合信息,成為人們相互交流和傳遞 信息、溝通情感、表達愿望的視覺語言。 特別是在注重品牌效能與品質的今天,標 志發揮著重要的作用。 標志最主要的功能是以其簡潔、醒目、 美觀的圖形符號傳遞信息。
標志能夠表述某種組織、某項活動或某 企業品牌的性質、服務和宗旨。標志作為一種視覺識別符號,能有效 區別各種品牌給消費者的印象。也就是說, 它能夠表述出個性特點,使其從眾多同類 產品的標志中被區別出來。
市場上的商品花色、品種繁多。在商品的海洋里,消費者只能根據不同的 標志區別同類商品的不同品牌和不同生產廠家,并以此進行比較與選擇。商業企業在經營商品時,有的 也用自己的標志表示各自的經營特色。標志的這種作用是其取得法律保護的主要依據,在國際貿易中, 這種作用也得到了普遍的認可。
標志是現代經濟的產物,它不同于古代的印記?,F代標志承載著企業的無形資產,是企業綜合信息 傳遞的媒介。對于企業而言,不僅要表明“我是誰”,還要說明“我怎么樣”。標志通過在不同場合、 不同載體的反復出現,使人們在看到標志的同時,就能自然聯想到產品
可口可樂歐洲太平洋集團公司前總裁喬戈斯曾經說:“可口可樂成功的原因很簡單,許多制造商只 熱衷于為消費者提供產品,而大多數消費者則需要產品的牌子。請記住,一聽可口可樂不只是飲料,它 還是一個朋友。
如今的社會,享用名牌似乎成為身份的象征、地位的體現和個人魅力的表現,這就使標志有了某種 精神的力量,這種精神力量代表著品牌的價值。
名牌價值是無形資產,無形資產的價值遠遠高于企業的有形資產價值和年銷售額。“可口可樂”“百 事可樂”的品牌價值都達到上百億美元。標志在各個國家都受到法律的保護,從這個意義上說,名牌標 志是企業的無價之寶,絲毫也不為過。
美國可口可樂公司的一位經理說,即使可口可樂工廠一夜之間被毀壞殆盡,公司也能憑借“可口可樂” 標志的聲譽從銀行立即貸款重建工廠??梢姡瑢碛忻茦酥镜钠髽I來說,標志就是企業發展的一種依 托與保證,是一筆巨大的無形資產。
標志作為企業和產品形象的象征,它用無聲的具有美感的圖形語言宣傳著產品的質量與特色。標志 設計的好壞直接影響企業和產品的信譽度。成功的標志不僅代表了產品本身,也增強了產品的魅力。
著名的香奈兒(CHANEL)的標志以簡約明快的圖形和相得益彰的字體搭配給人以典雅、高貴之感。 香奈兒于 1913 年由創始人加布里埃·可可·香奈兒(Gabrielle Chanel)在法國巴黎創立,其標志是由兩 個背向的“C”重疊而成,圖形平衡對稱,充滿溫文爾雅、端莊聰慧之氣,
標志的本質是信息傳播,這是現代的 標志設計的核心。標志的設計創意應該從 信息入手,從功能需要出發。需要告訴大家的是什么,而不是把形式作 為設計的唯一出發點。
在標志設計中,有的人喜歡造型簡單的,這得到了大部分人的認可;而有的人則認為在簡單中可適 當復雜,這要取決于實際的用途。不論簡單或復雜,需要把握一點:標志需要具備的特質是獨特。沒有 哪個企業甘愿平凡,大多數企業都在竭盡所能地建立自己獨特的企業文化和市場經營特色,所以在設計 標志時必須深思熟慮。
獨特性是標志設計的最基本要求。標志的形式法則和特殊性就是具備各自獨特的個性,不允許絲毫 的雷同。這就要求標志的設計必須做到獨特、別致,追求創造與眾不同的視覺感受,給人留下深刻的印象。
醒目的設計是所有標志希望達到的視覺效果。優秀的標志能夠吸引人,給人以較強的視覺沖擊力。 因為只有引起人的注意,才能使標志所要傳達的信息對人產生影響。在標志設計中,注重對比、強調視 覺形象的鮮明與生動,這是產生醒目性的重要形式要素。
標志要易于識別、記憶和傳播。這并不是說簡單化,而是指以少勝多、立意深刻、形象明顯、雅俗共賞。 通俗性強的標志具有公眾認同面大、親切感強等特點。對于商標而言,一個易記的商標形象首先要有一個與眾不同的響亮、動聽的商標名稱,以好的商標名稱為基礎,綜合考慮商標的特點,選擇最佳方案, 再進行具體的圖形設計。
標志色彩的配置一般有三種基本方法;
-是原色配合
原色的顏色單純、強烈、鮮艷奪目,藝術效果和傳播效果顯著。
-是同類色配合
只選擇一種顏色,采用依靠色彩明亮度變化的辦法,如用桔紅、桔黃、中黃、淺黃進行搭配,形成由淺入深的過度色視覺,能表達出動態感。
-是補色配合
這種色彩配置,對比鮮明,圖形格外醒目鮮艷,能給人以很強的視覺沖擊效果。
標志設計也是藝術設計的一種。所以他也同樣適用于我們設計里的形式美法則。用這些法則去設計你的標志或ICON讓他們的信息傳遞更準確。視覺表現更優秀。
形式美法則
標志設計是一種視覺藝術,人們在觀看一個標志圖形的同時、也是一種審美的過程。在審美過程中,人們把視覺所感受的圖形,用社會所公認的相對客觀的標準進行評價、分析和比較,引起美感沖動。
任何一個完美的標志圖形必須具有統一性,這種統一性越單純,越有美感。但只有統一而無變化,則不能使人感到有趣味、美感也不能持久,這是因為缺少刺激的緣,變化是刺激的源泉,有喚起興趣的作用,但變化也要有規律,無規律的變化,然起混亂和繁雜。因此變化必須在統一中產生。
均衡是在不對稱中求平穩。均衡可分為調和均衡和對比均衡兩大類,調和均衡是指同形等量,即在中軸線兩面所配列的圖形的形狀、大小、分量相等或相同。除圖案造型的均衡外,還有量的均衡、色的均衡,在標志圖形設計時必須相應考慮,以追求標志視覺張力。
節奏是韻律的條件,韻律是節奏的深化,節奏也就是“律”,這種律不僅表現在音樂上,而且反映在其他方面,當物體失去均衡則會引起運動。此種運動如有規律,則稱之為“律”。在標志圖形設計中,如果將線的長短、粗細、曲直、方位等進行不同程度的變化和巧妙組合,便會創造出不同感的“律”的形式,歸納起來分為:循環體、反復體及連續體。
在標志設計中,對比與調和應用極廣,如在大小、方向、虛實、高低、寬窄、長短、凹凸、曲直、多少、厚薄、動靜以及奇數與偶數的對比。對比是標志圖形取得視覺特征的途徑,調和是標志完整統一的保證。
任何一個完美的圖形都必須具備協調的比例尺度。在標志圖形中常用的比率有整數比、相加級數比、相差級數比、等比級數比、黃金比等。標志設計的形式美法則,不能孤立和片面地理解,因為一個美圖形的設計,往往要綜合利用多種法則來表現。這些法則是相互依賴,相互滲透,相互穿插、互相重疊、相互促進的,隨著時代的變化,審美標準、設計手法也在不斷發展。
近年來,標志設計發展越來越成瘦??偟陌l展趨勢是由復雜到簡約、具象到抽象、色彩更多樣話、標志的發展是一個設計相互交融、設計風格的多樣化過程。設計手段是次要的,目的才是第一位的。更注重的應使其商業性。
以下標志設計趨勢內容引用自標志情報局編譯的作者為Bill Gardner是logolounge.com的創始人的《2023標志設計趨勢報告》。https://www.logonews.cn/logo-design-trends-for-2023.html
我們每年收到的所有標志清晰解讀并整理成這份報告并不是一項容易的工作。總共超過30,000個標志,對我和一群杰出的設計師來說,這就像是世界上最大規模的配對游戲。最初,我們歸納出大約60-70個組別,然后將它們進一步劃分為具有最大影響力的15個類別。
我只是通過對提交的30,000多個標志進行徹底分析(還有國際上每個重要品牌的更新和重塑)后呈現的報告。因此你要了解的是,就像任何氣象學家會告訴你的那樣,他們不能保證天氣預報的準確性。同樣,我們也無法總是預測設計師將向哪個趨勢方向發展,這就是這份報告能讓我們保持警惕并感到有趣的原因所在
01、Wildflowers(野花);02、Bloblend(流動混合);03、Fades(逐漸模糊);04Foreshort(透視);05、Thrust(推進);06、Spirals(螺旋);07、Sonics(聲波);08、WireForms(線框);09、BallCaps(球形頂端);10、NameFills(名字填充圖形);11、Stretchers(元素拉伸);12、NeoStencil(噴漆模版藝術);13、HalfAster(半星號);14、Double Os(雙圓環);15、Ritz(餅干);
重新讀了一遍標志設計的內容。果然受益匪淺的感覺。還是要時常溫故而知新的。學習了大廠的ICON設計規則也是很有收獲的。
伴著公司業務發展,開源的組件庫已無法滿業務需要,搭建一套更適合公司業務的UI組件庫,勢在必行;設計系統承載著作為一個沉淀基礎能力的支持平臺,同時也具有賦能多多邊業務、多種角色的重要作用和價值;
為了更適用于企業級產品的開發和使用,通過大量中后臺場景的的實踐,B+Design設計系統提煉出以下設計原則:
藍藍設計的小編 http://www.syprn.cn