<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          B端設計|卡片設計技巧解析

          杰睿

          常見的B端卡片組件,應該怎么設計才可以達成更好的傳播效果、傳遞更清晰、更完善的視覺體驗?在本篇文章里,作者就結合具體案例,對B端卡片組件設計進行了技巧拆解,一起來看看吧,或許會對你有所啟發。

          B端設計的過程中,并不是所有元素抄一抄別人的,從組件庫里引用下就完事了,而是要經過具體組織并設計。尤其在一些特殊的組件中,是可以去表現設計水平,提升項目整體視覺質量的,而不是讓它們看起來非常的枯燥乏味。

          這次,我們的改版主要就圍繞在B端常見的卡片組件中,通過3個以前提交過的作業,來分享如何設計B端的卡片。

          三個改版案例我們都遵循相同的設計方式和順序:

          • 分析組件包含字段
          • 確認組件內部框架
          • 完成字段權重表現
          • 完成組建視覺樣式

          一、卡片案例1

          B端設計|卡片設計技巧解析

          在該案例中,卡片作為頁面的核心對象,視覺重心不夠突出,且內容的權重沒有得到有效的表現,訂單標識只有一個的情況反復強調對識別卡片沒有任何幫助,且卡片占比過大,沒必要的浪費頁面空間。

          所以,重構它的結構時,重點突出標題弱化標簽,將卡片拆分成標題、信息、操作三個欄,讓信息的呈現更簡潔直觀。

          B端設計|卡片設計技巧解析

          然后再具體優化內容和細節,對重要信息突出,固定的標題字段弱化。

          B端設計|卡片設計技巧解析

          最后,再根據主色的需要填充色彩進去即可。

          B端設計|卡片設計技巧解析

          B端設計|卡片設計技巧解析

          二、卡片案例2

          B端設計|卡片設計技巧解析

          這個案例也是設計得比較有問題的,但是忽略掉全局組件的粗糙,卡片部分的設計也是很多作品案例中的常見問題,要素過多,沒有主次,在列表化的展示中,根本沒辦法很好的識別相關的內容和關注到有效的信息,會被淹沒在繁復的字段內容中。

          所以,我們用相同的方法作下區分,將內容分為上中下三個欄。

          B端設計|卡片設計技巧解析

          然后再對字段做權重的劃分,雖然字段信息很多,但值得被突出的要素不多,企業名和數據是卡片中最重要的信息,一個用于識別卡片,一個用于查看核心的指標。

          B端設計|卡片設計技巧解析

          最后,再完成樣式的補全即可,只在星級和用戶職位上增加色彩。

          B端設計|卡片設計技巧解析

          B端設計|卡片設計技巧解析

          三、卡片案例3

          問題和前面還是一樣,內容很零碎,所有要素都強調,于是就沒有重點。所以,下面對它們進行改版,這次因為數據項不再是重點,卡片的目標不是用來查看數據而是用于檢索進入到下級頁面的,所以只分了兩欄。

          B端設計|卡片設計技巧解析

          然后,再對權重進行強調,查看詳情是這里面最重要的元素,圖片則沒有太大的意義僅僅是點綴所以縮小。

          B端設計|卡片設計技巧解析

          最后,再完成相應色彩的添加和圖片的填充,完成最終的視覺效果。

          這三個改版都用了很簡單的修改方式,通過理解卡片的作用、字段信息,對它進行信息分區,然后填入相關的字段并做出權重劃分,最后再用顏色為不同的要素加權。

          只要掌握這樣的設計思路,做絕大多數卡片都不會有阻力,只會糾結于應該用哪套樣式更合適。

          結尾

          因為時間關系只做了很簡單的調整,沒去做多套大跨度的樣式變更,同時套進原圖環境沒做整體的處理,所以還有很多升級優化的空間,理解這個感覺即可。

          作者:酸梅干超人;

          本文由 @超人的電話亭 原創發布于人人都是產品經理,未經許可,禁止轉載。

          題圖來自Unsplash ,基于 CC0 協議

          該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

          千篇一律的B端,看疲勞了,來點不一樣的吧(附作品圖)

          資深UI設計者

          這些是一些創新和不同尋常的B端系統界面設計思路,可以根據具體的業務需求和用戶群體的特點進行定制和調整。希望這些思路能夠為您帶來新的靈感和想法!

          B端中后臺UI設計規范定義 & 實踐經驗總結

          杰睿

          在B端產品設計中,中后臺UI設計規范的建立對于提升設計效率、保證用戶體驗一致性以及優化開發流程至關重要。本文從設計規范的意義、原子設計理論、后臺設計系統搭建以及Design Token應用實踐四個方面,詳細總結了B端中后臺設計的要點和方法,供大家參考學習。

          今天從以下4個方面,結合7年B端設計工作經驗,為大家分享原子設計理論和中后臺設計系統搭建的應用實踐。

          01 搭建設計規范的意義

          分別站在整個產品設計研發流程中各個角色的不同角度,在工作中可能會有以下“抱怨時刻”:

          由此,體現出搭建設計規范的作用和意義:

          ① 產品側

          ?個產品不同分?多個團隊完成的時候,可以保證產品團隊使?同?份設計規范快速完成產品原型設計。保證可復?模塊的交互體驗的?致性。

          ② 設計側

          通過設計規范去解決?部分需求,極?提?效率解放雙?,讓設計師能去做?些更發揮創意和想象?的設計。

          ③ 開發側

          形成開發資產,可以提升研發效率,降低維護成本。開發?程師?需再重復開發同?個組件,只需要去組件庫?調?即可,配合業務邏輯,?效完成界?開發,做到開箱即?。

          ④ 測試側

          標準化的設計規范,是測試?員最喜歡看到的。例如,設計規范規定彈窗 footer 區按鈕組居右,那么測試?員只要測到不居右,就可以給產品提優化建議了。

          02 原子設計理論

          設計規范中具像化的環節是設計組件化,最早可以追溯到?業?命時期,福特創造的流?線?產?式。福特將汽?分解成零部件,再把零部件模塊化組裝,這?創舉極?的提?了?產效率。

          根據資料顯示,T型?是世界第?款?量使?通?零部件,并進??規模流?線裝配的汽?。這種?式極?地提?了T型??產效率,降低了?產成本。

          1914年,福特已經可以做到93分鐘?產?輛汽?,?同期其他所有汽??商的?產能?總和也不及于此。

          到了1920年代,T型?的價格甚?降到300美元?輛(問世之初T型?的售價僅需850美元,?同期的競爭對?則通常為2000-3000美元?輛)。

          原子設計理論最初來源于化學領域,這一點從名字可以聽出來。在化學中,所有的物體都是由原?構成,原?組合構成分?,分?組合構成有機物,最終形成了宇宙萬物。

          2013年前端?程師 Brad Forst將此理論運?在界?設計中,形成?套設計系統,包含 5 個層?:原?、分?、組織、模板、??。當公司的業務產品逐漸擴?時,我們就需要制定?套完整的設計系統,提升設計和開發的協作效率,統?所有設計師的輸出物。

          總之,將設計拆分成?些基本元素,例如?個按鈕、?個彈窗,再根據業務需求、產品邏輯重新組裝,形成最終的產品,這就是原?設計理論(組件化設計),區別于整體設計制造的?種新的?作流程。

          03 后臺設計系統搭建

          ① 設計系統搭建—原子

          原?是物質的基礎組成部分,是構成設計系統的最基礎元素。

          在界?中以「元素」的形式存在,例如:顏?、?字、圖標、分割線、間距、圓?、陰影等。

          色彩體系

          中后臺產品的?彩體系主要分為3類:品牌?、功能?、中性?。

          • 品牌色:大型公司往往都會有專屬色號的品牌色,比如阿里橙色、美團黃色和騰訊藍色,以體現產品特性、傳播理念。在界面中主要體現在關鍵行動點、選中狀態、重要信息和插畫元素等。
          • 功能色:旨在表示某種狀態提示,這類顏色往往是深入人心的,比如綠色代表成功,紅色代表失敗等等。
          • 中性色:還有一種是不需要傳遞顏色代表的特殊含義的,稱為中性色,即黑白灰。

          B端網站體現理性和效率特性,往往會使中性色占據九成以上,應用在背景、邊框、文本和分割線。下圖為顏色定義示例(考慮暗色模式)。

          文字體系

          B端產品的?字系統設計?標:增強閱讀體驗、提升信息獲取效率,字體是體系化界?設計中最基本的構成之?。

          字體的??、字重、?彩區分體現界?信息的層級關系。

          • 整體思路:在同?個系統的 UI 設計中先建?體系化的設計思路,對主、次、輔助、標題、展示等類別的字體做統?的規劃,再落地到具體場景中進?微調,最終確定建?體系化的設計思路,有助于強化字體落地的?致性。
          • 少即是多:在視覺展現上能夠?盡量少的樣式去實現設計?的。避免毫?意義的使??量字階、顏?、字重強調視覺重點或對?關系,提?字體應?的性價?,減少不必要的樣式浪費。
          • 拉開對?:在需要拉開差距的時候可以嘗試在字階表中跳躍地選擇字體??,會令字階之間產??種微妙的韻律感。

          下圖為字階應用規范示意:

          陰影、圓角、線條

          陰影:在B端界?中,有些特殊的元素會使?到陰影,從陰影中我們可以看出物體距離平?的?度,距離平?越?的物體陰影越?;

          圓角:從直?到圓?給?帶來從嚴謹冰冷到柔和親切的?理感受,在B端界? 中,常?2-8px圓?;

          線條:分割模塊及輔助定位。

          ② 后臺設計系統搭建—分子

          在界?中,分?是按照規律組合起來的元素,如:按鈕、搜索框、選擇器等。

          以按鈕為例,?字、?塊、圖標和間距這些抽象的原?產?關聯組合成分?:圖標、?字傳達含義;顏?、圓?傳遞特性;間距、尺?定義規范。

          ③ 后臺設計系統搭建—組織

          分?+原?組合成更復雜和可拓展的組織(區塊組件),如搜索區、卡?列表區、表單區、數據統計區等。

          ④ 后臺設計系統搭建—模板

          由原?+分?+組織構成的更復雜更具拓展性的模塊,構成了典型??模板,如列表?、詳情?、異常?、Dashboard等。模板在設計系統中承載的作?就是保證設計?案在原型各階段的?致性,專注??底層架構,并?具體??。

          ⑤ 后臺設計系統搭建—頁面

          帶業務邏輯的場景案例,如標注場景、權限管理、詳情設置等,將??模板填充真實的?字、圖?后形成??,即帶交互邏輯的?保真原型圖,真實內容使設計系統有了“?命” 。

          04 Design Token應用實踐

          雖然通過設計規范可以對產研流程提效,但在開發還原中還是會經常遇到?些棘?的問題。

          開發還原準確度難以保證,走查幾輪還有有細節問題沒有修復;

          領導要求開發暗色模式,或者客戶要求換一套主題色,找到替換的工作量巨大;

          設計一處變更,涉及多個頁面模塊,維護工作量大。

          為了解決和優化上述的問題,Design Token 應運??。它可以解決產品設計和開發過程中的細節、變更和?格?致性的問題,有效提?產研團隊設計質量和協作效率。

          ① Design Token介紹

          “Token”原本的意思是“令牌,指令”,與 Design 連在?起指“設計變量”。在?程邏輯中?于?戶身份與服務器端進?驗證,?在設計體系中,Design Token 則可以簡單理解為封裝的視覺樣式參數。它通過規定樣式參數,并通過?套符合設計師、?程師理解的統?的命名規則,為這些樣式參數的定義名稱。

          Design Token優勢

          設計語義更易理解:幫助設計師和開發建?統?語?,設計?案更加?致。從下到上的Design Token命名思路。

          主題?膚?鍵替換:主題?膚的替換可以?在兩個維度,?是淺?模式和暗?模式的替換,?是不同品牌?之間的替換。我們可以將不同主題的同?個場景下的顏?使?同?個 Token 命名,達到?鍵換膚的效果適配不同客戶?案。

          設計變更?效維護:替代傳統?作流?鍵替換效果。例如修改二級文本的顏色,傳統工作流需要先修改設計規范,修改設計稿,然后輸出給開發,開發逐一更新代碼,完成后提交給設計師進行走查驗收。而當使用Token之后,只需要更新Token參數,就可以直接導出JSON給開發,一鍵自動更新。提高效率不止一點點。

          設計效果精準還原:代碼編輯器?動化提示顏?選擇,如不正確則產?報錯。

          總結一下使用Token開發的優勢:

          • 設計語言 更易理解
          • 主題皮膚 一鍵替換
          • 設計變更 高效維護
          • 設計成果 精準還原

          ② Design 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

          2025 B端設計趨勢之動效

          杰睿

          在數字化時代,B端產品的用戶體驗設計正變得愈發重要。動效設計作為提升交互體驗和效率的關鍵手段,正在成為B端設計中不可或缺的一部分。本文將深入探討2025年B端設計中動效的趨勢,從動效的歷史演變、物理世界中的靈感汲取,到釘釘設計系統中的實踐應用,幫助我們理解動效如何從簡單的視覺裝飾轉變為提升產品效率和用戶體驗的核心工具。

          回溯互聯網的發展進程,從桌面端的撥號上網,到5G移動互聯網,再至人工智能的助力,科技領域正在經歷著翻天覆地的變革。

          未來的數字世界,在沉浸感、參與度、個性化等維度對體驗會提出更進階的要求;與此同時,B端企業對于高效、簡便、用戶友好的界面需求與日俱增。

          在2025年的當下,B端設計師唯有持續學習,適應新技術與新趨勢,緊密圍繞客戶的業務價值展開設計,進一步注重實用性、包容性以及可定制化,方可為企業客戶塑造出卓越的產品與服務。

          因此,我們結合釘釘近10年的B端產品設計經驗,鑒于未來B端設計趨勢將展現出多元化、智能化和人性化的特質,從B端產品個性化、風格與質感、界面版式、品牌物料、圖標、動態交互等多維度設計展開深度研究,與大家一道探討B端設計的本質和趨勢,期望在真正駕馭B端產品設計的這條道路上,帶來些許有益的啟迪。對交互等多維度設計展開深度研究,與大家一道探討B端設計的本質和趨勢,期望在真正駕馭B端產品設計的這條道路上,帶來些許有益的啟迪。

          今天要和大家聊聊 B 端產品的動效設計趨勢。我們將回顧動效的發展軌跡,從歷史演變到設計哲學,探索如何從物理世界汲取靈感,并分享釘釘在動效設計中的思考與實踐。

          一、回顧動效設計的演變歷程

          動效設計在互聯網的發展歷程中經歷了多次變革。從最初簡單的過渡動畫,到如今復雜而精細的交互體驗,動效的演進不僅是技術發展的產物,也映射了用戶體驗設計理念的不斷深化。

          1990s-2000s:簡單的進度展示

          在互聯網的早期,受限于帶寬和硬件性能,動效的應用較為基礎,主要用于加載進度條和頁面過渡,核心目的是向用戶提供反饋,減少操作過程中的不確定性。典型案例是 Windows 98 時代的加載進度條和網頁上的緩沖動畫。這些動效雖然簡單,卻在當時發揮了重要作用——幫助用戶理解系統狀態,降低等待焦慮。

          2005-2012:Flash 技術引領網頁動畫

          進入 2000 年代中期,Flash 技術的普及讓網頁動畫迎來了黃金時代。Flash 賦予了設計師更大的自由度,使得網頁可以呈現更豐富的動態效果,動效不再局限于狀態反饋,而開始深度參與交互體驗。這一時期,動效的作用從提示系統狀態進化為增強用戶沉浸感,例如按鈕懸停時的動態反饋,炫酷的頁面切換過渡,以及交互式動畫(如鼠標跟隨效果、小游戲動畫等)。

          不過,Flash 的動效過度依賴插件,影響性能,并且在移動端難以兼容。2010 年代,隨著 HTML5 和 CSS3 的發展,Flash 逐漸被取代,動效設計進入新階段。

          2012-至今:物理規律的引入與美學平衡

          隨著移動互聯網興起,尤其是 Material Design,iOS,以及 Fluent Design 等動效規范的推出,動效設計進入了全新的階段。這個階段的核心理念是基于物理規律的自然動效,強調動效不僅僅是裝飾,而是信息層級傳遞、引導用戶操作的重要工具。

          Material Design:強調物理隱喻與流暢性

          • 點擊按鈕時的波紋擴散,讓操作反饋更自然
          • 元素的加速、減速運動,使界面更富有生命感
          • 卡片式界面層級動畫,通過漸變、位移等方式構建層級感,使導航更加清晰

          Fluent Design:深度融合光影與層次感

          • 通過陰影和模糊等方式,增強界面的深度和透視層次
          • 交互時光效隨用戶操作產生微妙變化,提升體驗的直覺性
          • 內容隨焦點流動,利用動效引導用戶注意力,使信息呈現更具邏輯性

          由此可見,動效不再只是視覺上的炫技,而是成為提升可用性、降低認知負荷的重要工具。合理的動效可以提升用戶的操作流暢度,讓界面變得更自然、更具生命力。

          二、從物理世界中捕捉動效的美感

          在自然界里,每一次風吹樹葉的擺動、每一滴水滴入湖面的擴散,都遵循著物理規律,展現出流暢且和諧的運動軌跡。這些自然現象不僅帶來視覺上的愉悅,也蘊含著深層次的運動邏輯,為數字動效設計提供了源源不斷的靈感。動效的流暢性、節奏感、反饋感,本質上都是對物理世界美學的映射。

          例如,波紋擴散是我們常見的自然現象。當一顆石子落入湖面,波紋自中心向外擴散,起初迅速,隨后逐漸放緩,最終消失。這個過程中的漸進減速特性為數字動效設計提供了極佳的靈感。在數字界面中,我們可以通過緩慢擴散的動畫來模擬水面波紋的效果,形成一種溫和的反饋感。

          再比如,現實世界中的物體在運動時通常會表現出加速與減速的特性。以地球上的自由落體為例,物體從高空下落時,初始速度較慢,但隨著重力作用,它不斷加速。這種非勻速運動,在動效設計中被轉化為緩動曲線(Easing Curves),使得用戶在界面交互時感受到更加自然的動態變化。

          而彈跳和反彈又是另一個物理世界中常見的運動方式。想象一顆籃球從地面反彈起來,起初速度快,隨后逐漸放緩,最終停止。這種逐漸衰減的回彈,正是彈性動效的靈感來源。在界面交互中,彈性動效可以模擬物體的重量和材質,提升操作的真實感。

          三、釘釘設計系統里的動效哲學

          當牛頓凝視落下的蘋果,他發現了萬有引力的奧秘;而當釘釘的設計團隊觀察一張任務卡片的拖拽軌跡時,我們探尋的是數字世界的運動法則。在物理規律與交互邏輯的交匯處,釘釘的動效設計體系逐漸凝練出一套方法論——讓每個像素的運動既符合自然規律,又服務于生產效率。

          在 B 端產品中,動效遠不止是視覺與交互的簡單結合,更是提升可用性和降低認知成本的關鍵手段。它不僅承擔著引導用戶操作、傳遞信息層級、降低認知負荷的功能,還通過增強操作確定性,幫助用戶更高效地完成任務。換句話說,我們正以理性與直覺,重塑效率美學。

          原則:平衡的藝術

          釘釘的設計框架始終圍繞視覺感官和用戶體驗兩個核心維度展開,追崇理性與感性的精密協作:

          1. 視覺感官:流暢

          • 連貫性:組件狀態的切換應如同翻動書頁般自然,確保界面過渡流暢、節奏統一,讓數字世界保持有序
          • 自然性:模仿現實世界的運動方式,使動效遵循慣性、彈性、摩擦等物理規律,減少割裂感,讓用戶的感知更直覺
          • 不碰撞:就像城市道路的規劃,動效的路徑需經過精心設計,避免界面元素相撞或相互干擾,確保用戶注意力不被分散

          2. 用戶體驗:高效

          • 助交互:在復雜的信息架構中,動效可以作為層級引導,幫助用戶理解界面之間的主次關系
          • 不干擾:平衡產品界面中的動效存在感,避免過度裝飾或喧賓奪主。最理想的動效,是讓用戶幾乎察覺不到它的存在,卻能享受它帶來的流暢體驗
          • 明確性:每一個動效都有其清晰的目的,或是為了引導用戶操作,或是為了強化任務的完成感

          時間梯度:數字節拍器

          企業級應用中,物體的運動時間需要把控得恰到好處。研究表明,人類對 100ms 以下的變化幾乎無感,而超過 1s 的等待則會讓用戶產生不耐煩的情緒。因此,釘釘的動效體系嚴格遵循以下節奏,通過順應人類大腦的認知規律,確保每一次動效都恰到好處,帶來舒適的體驗:

          • 最短動效時長設定為 100ms,并以 100ms 遞增,確保節奏穩定
          • 不同動效的時間設定,取決于物體的大小、路徑長短以及動畫復雜度

          速度:像素的重力場

          現實世界中的物體運動受到重力、摩擦力等因素影響,呈現加速與減速的動態變化。釘釘的動效體系也采用緩動曲線(Easing),以模擬真實世界的運動節奏。當數字界面掙脫線性勻速的機械感,便擁有了令人愉悅的「生命感」。

          空間:界面的立體語法

          在二維屏幕上構建三維認知,需要更精密的「空間修辭學」。釘釘的動效體系確保每一次位移都符合用戶的直覺,并運用空間層次感,讓信息更易理解。

          1. 同級物體

          • 整體運動方向和遞進順序需符合用戶預期
          • 確保物體運動順序符合「左到右、上到下、順時針」的視覺流

          2. 從屬物體

          • 核心物體的動效應更突出,而叢屬元素的動效需弱化或捆綁運動
          • 確保物體的運動軌跡不發生碰撞

          3. 三維空間

          • 物體在 Z 軸上有位移變化時,尺寸應相應調整,以模擬透視效果
          • 近大遠小的視差效果,可增強層次感,提升信息的空間可讀性

          四、無障礙設計思考

          在動效設計中,無障礙性不僅關乎技術標準,更關乎用戶的體驗公平性。一個包容的設計體系,應該讓所有用戶——無論其身體或認知能力如何——都能平等地理解和使用產品。無障礙動效的核心,在于減少干擾、提供替代方案,并賦予用戶選擇權,確保每一次交互都是安全、友好的。

          避免誘發健康問題:高頻閃爍或快速變化的動畫可能誘發光敏性癲癇等健康問題。因此,在設計時,我們應避免超過3次/秒的快速閃爍,并盡可能減少過度刺激性的動效

          提供替代方案:對于依賴屏幕閱讀器的用戶,純視覺動效可能難以感知。我們可以為動效添加文本描述或提供靜態替代方案,確保所有用戶都能理解動效傳達的信息。例如,在釘釘 AI 助理中的加載場景,我們提供「正在為你生成…」的文本標簽,方便屏幕閱讀器用戶理解當前狀態

          五、總結

          動效設計已成為現代數字產品中不可或缺的組成部分。從簡單的過渡動畫到如今富有交互感和情感觸動的設計,動效已經不再是單純的視覺裝飾,而是推動產品發展、提升用戶體驗的關鍵力量。

          真正的好動效,是那種用戶幾乎察覺不到的流暢交互,它能夠讓信息傳遞變得高效、讓操作更加順暢,同時也讓數字產品展現出溫暖的人文氣息。動效,作為產品與用戶之間的一座橋梁,它不僅是界面的點綴,更是效率與體驗的催化劑。

          未來,釘釘將繼續探索動效設計的創新與實踐,通過優化交互體驗、提升產品效率,不斷賦能用戶、創造更美好的數字世界。

          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

          講講AI在B端設計上的應用方法

          ui設計分享達人

          B 端設計領域的 AI 應用
          大多數同學目前對 AI 應用的認識只有文生圖、對話、駕駛等領域,但 AI 應用的場景遠遠不止它們。
          和頭部的明星 AI 產品、模型相比,細分市場的 AI 應用就非常沒有存在感了。比如使用 AI 進行財務的審核、飲料配方的調節、工程安全的模擬等等,它可以幫助企業節約大量的人力完成工作。
          概括起來,就是一些可以通過計算機完成的(也不止)重復性勞動或標準化流程,都可以引入 AI 的技術進行降本增效。
          那在 UI 設計領域中,這些重復性和標準化的工作內容有嘛?
          有,但是并不會像外行或者新手想象的那么多。AI 難以覆蓋的場景我們過去的分享探討過,等等也會做進一步的說明,而這里我們先要探討的,就是能用 AI 實現的 B 端設計場景,具體有哪些。
          我們都知道市面上現在有很多開源的 B 端前端框架,各個大廠前赴后繼地對它們進行更新和完善,里面包含了非常豐富的組件庫。
          講講AI在B端設計上的應用方法
           
           
          這些組件庫不不止是 UI 的組件,也包含了前端的對應代碼,前端工程師可以快速調用這些代碼組件而不用自己去重新寫一遍樣式和交互。
          原則上,使用現成的組件開發就可以快速完成整套項目的前端內容,這可以給前端工程師節省大量時間。所以即使項目中有完整的設計稿,前端在開發過程中也會偷懶直接略過,直接套用框架內的組件實現。
          這和設計師直接套用素材完成運營圖設計一樣,明明有現成的素材在那里,為什么要浪費一大堆時間自己重新畫一遍還是用 3D 建模渲染?同理,要是組件足夠豐富,滿足項目的需要,設計師也可以直接復用官方的組件素材,不用自己設計。
          組件化思維的運用,就是項目工作標準化和重復性的根源,不僅應用在設計領域,對于前、后端開發來說同理。
          基于這種思路,催生出了一種新的 SaaS 模式 —— 低代碼 Low-Code 服務。
          即通過少量的代碼,或者干脆不用代碼,僅通過可視的工具和組件實現軟件的開發,并完成相應的配置和部署的工具。
          這概念咋一看不就是建站工具?比如有贊、微店之類的,用戶可以在里面直接創建并配置店鋪,然后以網頁、H5 或小程序的形式發布。
          但這只是最初級的應用,傳統的建站工具屬于幫你預制好了主要的參數和功能,用戶只能在這個范圍內做少量的自定義編輯和設置。但進階的 Low-Code,會賦予用戶更大的編輯范圍和自由度,讓用戶通過可視化的界面創建自己想要的產品和功能。
          講講AI在B端設計上的應用方法
           
           
          這類產品已經衍生出一個規模不小的市場,因為有大量的中小企業不想投入太多的精力和成本進數字化平臺的搭建上,
          并希望能快速創建不同的管理工具來匹配企業日新月異的發展需要
          。
          這里要劃重點,對于一部分企業來說,經營模式和業務流程是持續迭代的,如果使用傳統的開發模式那么很難跟上這種迭代。
          以連鎖餐飲品牌舉例,前期只在一個城市經營,和后期擴張到全省或全國,采購流程和供應鏈管理必然會持續進行調整,提交一個采購工單所需填寫的字段就會發生變化,同理展示的表格、詳情頁也要跟著調整。
          這類變化往往并沒有修改界面的視覺、交互、組件,僅僅是增加和減少字段數據,而用傳統的收集需求再輸出進行開發的模式效率非常低,所以它們就成為 Low-Code 的最佳應用場景。業務方自己配置、修改直接上線,省掉產品經理、設計師、程序員中間耗差時……
          并且對于很多企業來說,只需要應用一些非?;A的功能服務和頁面類型。比如我經常提到的 B 端管理系統的四個核心頁面類型:
          講講AI在B端設計上的應用方法
           
           
          Low-Code 就是把常規需求標準化,并運用組件化的框架,讓用戶通過簡單的填寫和編輯就能生成出想要的頁面和功能。
          既然需求不復雜,功能、組件、頁面、代碼都可以標準化,那不用 AI 降本增效還有王法嘛?
          所以,使用 AI 生成 B 端頁面(不是設計稿)的工具已經在大廠內部開始應用了,開發專屬大模型,再把做好的組件喂給模型,用戶只要在相應的表單內填入需求,就可以快速生成出落地的頁面。
          并且各家大廠內部的 B 端組件庫,可遠遠不止對外分享的這些開源框架里包含的數量,還有很多特殊的業務組件,可以讓模型得到更好的訓練和產出,比普通 Low-Code 模式更簡單高效,大幅度提升企業內部B端產品的落地和運用效率。
          從已經了解到的信息中,有一部分業務部門已經開始進入實踐環節了。且隨著技術的迭代,這種工具必然會越來越強大,功能越來越豐富。
          所以,了解完這個趨勢,設計師和前端工程師迎來大結局了?要被AI技術清洗了?現在該捧起《從0到1學習炒粉》學習了嘛?
          這就是下面要討論的內容。
          B 端 AI 和設計的關聯
          前面做了不少鋪墊,就是為了強調,適用于 Low-Code 和 AI 生成的 B 端產品,是有前提條件的,包含下面這些要素:
          •  
            完整成熟的前后端組件庫
          •  
            需求使用基礎做法就能實現
          •  
            需要經常變動調整的業務需求
          •  
            對設計和交互本身要求不高
          而這里面最關鍵的東西,就是標準化。必須要知道在今天的 AI 的應用發展中,要生成出符合實際工作需要的結果,絕對不是靠輸入信息以后它自己 “蒙” 出來的。為了讓結果盡可能準確,那么喂給模型的數據也就要越多且越有針對性。
          理論上面向 B 端的 AI 工具,只要不斷提供給他新的組件、頁面,就能拓展它可以實現的范圍。但不管你怎么訓練它,都要滿足標準化的前提。
          而標準化,恰恰就是國內 B 端業務的命門……
          我們都知道國內 SaaS 行業現在發展非常的混亂,雖然在不同的細分領域有自己的獨角獸,比如財務領域的金蝶,OA 領域的釘釘,ERP 領域的用友等等。
          但是這些公司就發展狀況良好利潤豐厚了?24年一季度的 SaaS 頭部公司業績非常蕭條,比如網上找到的統計,和國外 SaaS 頭部公司的估值和利潤形成鮮明的對比:
          講講AI在B端設計上的應用方法
           
           
          為什么國內 SaaS 市場那么慘淡?說到底就是在國內 B 端領域很難實現真正的標準化,而不是國內 B 端市場規模太小。
          比如釘釘、飛書這樣的 OA 軟件已經很成熟了,但它們的實際普及程度一點都不高,而中大型企業又有各種考量,現成的不用就熱衷于開發一套自己的系統,簡稱定制化。這就倒逼 SaaS 工具為了滿足更多的企業需求,拼命疊加功能,使得這些 SaaS 工具一個比一個臃腫。
          而我們前面提到的 AI 生成,想要普及同樣需要面對這種困境,因為模型不管怎么做,它都是基于特定標準化下的產物,它可以滿足其中一部分需求,但難以滿足其它需求。尤其是國內 B 端定制化需求中,混亂、抽象、聯系復雜的問題非常突出。
          換句話說,國內 B 端市場的大多數系統,是非標準化的,需要產品團隊在面對這些非標準的需求下做出創新和適配,就必須要考慮很多抽象的因素,領導、背景、體驗、交互、周期、難度等等。這個過程不可能由業務方自己完成,且最終導出的設計結果,往往會和常規方案有很大的差異。
          按常規邏輯考慮的話,那有多少組件我們整理多少組件,早晚有一天不得窮盡設計師思考范圍的邊界?
          且不說獲得不同商業項目的業務組件有多困難,如果組件之間沒有更底層的思路去規范它們的設計和交互,那么硬湊到一起的項目是非常割裂的,而 AI 在短時間內沒辦法做到真正理解交互的邏輯并根據使用場景做理性的推理。
          所以基于一套團隊產出的組件必然是有限的,它們或許可以滿足自己項目,但不可能滿足市面上所有項目的使用需求。
          還有一個很關鍵的疑問,就是很多人會想,一個項目中的特殊組件往往只是少數,我們用 AI 工具生成多數頁面,少數進行定制和獨立開發不就行了?
          這思路在邏輯上很合理,但實踐起來的問題非常多。舉個例子比如設計稿直接生成網頁這種技術,從20年前我剛了解到網頁設計那天說到現在了,這個實現邏輯理應不需要 AI 的參與都能做到,中間也問世了不少產品和工具,但沒有一個做成了,反而網頁前端工程師都成為一個獨立熱門職業了(以前是 UI 寫)。
          原因就是作為商業項目來說,團隊需要 “可控性”,機器生成代碼雖然容易,但是如果要修改里面的東西怎么辦?實際情況就是前端對這些外部代碼深惡痛絕,因為改起來太麻煩,而越大的項目改起來難度也越高。而且這個版本的一部分你改了,下個版本工具再生成的代碼要不要兼容你前面寫的東西?
          所以現在即使有設計稿直接生成代碼的工具前端也寧愿自己寫,但當他們用到第三方框架的時候,能不動框架里面的東西就不動。想要理解這個感受,只要拿這些框架的組件素材用它們的組件、自動布局形式做完一個項目,你們就會產生 —— 還不如自己重做一遍的想法。
          講講AI在B端設計上的應用方法
           
           
          所以生成工具,要不然能一次性完整滿足所有需求,要不然就會因為兩三成的缺口形成致命的瓶頸。當然,還有遠比這些復雜的進一步因素,我就不在這里展開。
          標準化無法在定制化的面前獲得優勢,這是國內 B 端行業面臨的直接困局,當然這里有壞的影響也有好的影響。
          壞的影響,就是頭部 SaaS 企業沒辦法得到快速的發展,推高整個 B 端軟件業的收入水平和吸引力,AI 生成頁面這些技術適用范圍小,沒辦法真惠及全體,行業處于反復造輪子但根本沒辦法停下來。
          好的影響,則是頭部的 SaaS 企業發展不起來,市占率就低,它們就沒辦像 C 端市場一樣形成非常顯著的馬太效應,形成事實的壟斷。大家重復造輪子,那么提供的就業崗位才多,才能讓我國的炒粉行業沒有那么卷,競爭沒有那么激烈(???)……
          講講AI在B端設計上的應用方法
           
           
          如果你關注過 B 端市場足夠多年,你就會明白任何企圖用一種標準、方法論直接平鋪整個行業的做法,注定是徒勞的,而無序、野蠻、熵增才是不變的主旋律。
          但 AI 的作用短時間內完全發揮不了嗎?也不是。除了前面提到的一些簡單的項目之外,還有一個非常大的可能,就是中小模型的開發會變得越來越容易,而基于項目自研的界面 AI 生成工具很有可能會普及起來。雖然它們不能隨心所欲生成任何需求的樣式,但可以完全根據業務方的實際需要進行定制,去服務小范圍的群體。
          這不代表項目里面就不需要設計師,符合這套項目的標準依舊需要設計師去制定,也需要設計師持續輸出特殊的頁面和組件。
          所以,未來很長一段時間內 AI 和 B 端 UI 設計師之間會是互補的關系,而不是替代關系。這也會對崗位要求形成進一步的影響,所以下面是我對 B 端 UI 設計師所需技能的建議:
          1.  
            進一步提升交互能力,尤其是基于業務認知輸出交互方案的抽象思維能力
          2.  
            進一步鞏固項目設計規范的創建能力,深入了解規范的應用和落地流程
          3.  
            進一步提升全局性設計思維,能提煉核心價值觀并在項目中進行應用
          4.  
            進一步了解編程開發邏輯,能更好的配合前后端完成項目的輸出提高效率
          這些能力的掌握是 B 端 UI 設計師應對未來市場變化的核心競爭力,也是 AI 在短時間內絕對無法替代的東西。
          不管是作為已經入行的,還是準備入行的 B 端設計新人,都不用對 AI 技術在 B 端的影響太過擔心,自怨自艾,因為
          如果 B 端項目的設計都那么簡單的話,那么從前端框架普及的那一天起,B 端 UI 設計師就可以集體下崗,而不用等到 AI 應用的那天
          。
          換個表述方式,祝大家不會菜到那么輕易就被 AI 給取代了……


          作者:酸梅干超人
          鏈接:https://www.zcool.com.cn/article/ZMTYzNzg4MA==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
           

          藍藍設計(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計交互設計、UI咨詢高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

          WechatIMG27.jpg

          關鍵詞:UI咨詢UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數據可視化設計公司、用戶體驗公司、高端網站設計公司銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計醫療行業軟件UI界面設計教育行業軟件UI界面設計、企業信息化UI界面設計、軟件qt開發、軟件wpf開發軟件vue開發

           

          B端產品中常用的三種面板

          杰睿

          我們需要了解一下設計模式,例如它是什么、什么時候用、怎么使用,可以讓我們在沒有參考的情況下,也能設計出合理、好用的界面。

           

          折疊面板

           

          它是什么

          把不同的內容模塊,放到一組順序排列的面板中,這些面板每一個都可以折疊、可以展開,互不干擾。

           

          什么時候使用

          你需要在頁面上顯示大量各種各樣的內容,可能包括文本、列表、按鈕、表單控件等,而你又沒法把它們都顯示在頁面上。

           

           

           

           

          這些內容通過分組,形成了不同的模塊,以下是這些模塊的特點:

          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、折疊面板來組織,還可以把它們分開放在主界面上。

          如果發現大部分用戶都打開了一個默認為關閉狀態的可收起面板,那么應該讓它默認打開。

           

           

          謝謝大家觀看!



          作者:夜鶯YEAH
          鏈接:https://www.zcool.com.cn/article/ZMTQ4NzE0NA==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          解鎖B端按鈕設計10大密碼

          杰睿

           
          無法想象沒有按鈕的頁面是什么滋味,那定會像沒有方向盤的汽車,讓人不知所措吧?也無法想象按鈕設計不恰當,會給用戶帶來怎樣的困擾?
           
          面對十萬火急的任務需求,
          如果需要調動全部理性腦,深呼吸三秒,
          才能找到想要執行操作的按鈕入口,我想這樣的產品設計是失敗的,是會被用戶所唾棄的。
           
          本文將詳細剖析按鈕的神秘面紗,了解它、研究它,讓按鈕設計成為產品的得力助手,為我們的產品賦能,為我們的工作提效,下面就讓我們開啟這場神秘之旅吧!
           
          解鎖B端按鈕設計10大密碼
           
           
           
           
          目錄
          一、按鈕的定義
          二、按鈕設計的種類
          三、按鈕設計的尺寸
          四、按鈕的構成
          五、按鈕設計的作用
          六、按鈕的位置
          七、按鈕的顏色
          八、按鈕在UI界面的設計原則
          九、按鈕設計的注意事項
          十、按鈕弱化設計的六種方式
           
           
          解鎖B端按鈕設計10大密碼
           
           
          按鈕在我們生活中起著很大的作用,它就像我們的小助手一樣,幫我們一鍵開啟想要的任務,凡事都能一鍵觸達。
           
          解鎖B端按鈕設計10大密碼
           
           
           
          按鈕在UI界面中,是一種界面交互控件,通常以矩形、圓形或其他幾何形狀呈現,具有明確的視覺邊界。它通過用戶的點擊、觸摸等操作來觸發特定的功能或操作,如提交表單、執行命令、導航頁面、切換狀態等。
           
          按鈕一般包含文字標簽、圖標或兩者的組合,以清晰傳達其功能。
          同時,按鈕在不同狀態下會呈現出不同的視覺效果,如默認狀態、按下狀態、懸浮狀態、禁用狀態等,為用戶提供操作反饋和引導。
           
           
          解鎖B端按鈕設計10大密碼
           
           
          1、Antdesign對按鈕的種類劃分:
           
          ?
           次按鈕
          常規按鈕,用于非主要動作。如果不確定選擇哪種按鈕,次按鈕永遠是最安全的選擇。
          解鎖B端按鈕設計10大密碼
           
           
           
          主按鈕
          突出“完成”、“推薦”類操作;一個按鈕區最多使用一個主按鈕。
          解鎖B端按鈕設計10大密碼
           
           
           
          文字按鈕
          弱化的按鈕,采用更輕量的按鈕樣式,可用于需大面積展示按鈕場景,例如下面的站酷活動頁就用了很多的文字按鈕,只有當按鈕被選中時,按鈕才會高亮選中。
          解鎖B端按鈕設計10大密碼
           
           
           
          圖標按鈕
          圖標提供視覺線索,避免逐字閱讀按鈕文案,更高效地使用界面,讓頁面看起來更加的簡潔。
          解鎖B端按鈕設計10大密碼
           
           
          解鎖B端按鈕設計10大密碼
           
           
           
           
          在按鈕中添加圖標
          用于對按鈕含義補充解釋,提高按鈕識別效率。
          解鎖B端按鈕設計10大密碼
           
           
           
          2、按鈕的樣式種類
          按鈕的樣式可以從多個方面進行分類和設計,以下是一些常見的樣式分類:
           
          按顏色劃分:
          單色按鈕
          按鈕背景為單一顏色,如藍色、綠色、紅色等,常用于強調按鈕的主要功能或操作。
           
          漸變色按鈕
          按鈕背景為漸變色,可以是線性漸變或徑向漸變,通常用于增加視覺吸引力和現代感。
           
          透明按鈕
          按鈕背景透明或半透明,通常用于與背景融合或突出按鈕上的文本和圖標。
           
          彩色邊框按鈕
          按鈕背景透明或淺色,但有彩色邊框,常用于需要突出按鈕邊界的場景。
          解鎖B端按鈕設計10大密碼
           
           
           
           
          按形狀分
          矩形按鈕
          這種是最常見的按鈕形狀,適用于大多數界面設計。
           
          圓形按鈕
          按鈕形狀為圓形,通常用于表示播放、暫停等操作,或用于具有特定功能的圖標按鈕。
           
          圓角按鈕
          按鈕形狀通常為圓角矩形,常用于需要柔和視覺效果的場景。
           
          自定義形狀按鈕
          根據設計需求,按鈕可以是任意自定義形狀,如星形、心形等,常用于創意設計或特定主題的界面。
          解鎖B端按鈕設計10大密碼
           
           
           
          按邊框分
          無邊框按鈕
          按鈕沒有邊框,背景和文本直接顯示,常用于簡潔的界面設計。
           
          細邊框按鈕
          按鈕有細邊框,常用于區分按鈕與周圍元素,同時保持界面的簡潔性。
           
          粗邊框按鈕
          按鈕有粗邊框,常用于強調按鈕或與背景形成強烈對比。
           
          虛線邊框按鈕
          按鈕邊框為虛線,常用于表示輔助操作或非主要功能。
          解鎖B端按鈕設計10大密碼
           
           
           
          按圖標分
          圖標按鈕
          按鈕上只有圖標,沒有文本,常用于表示通用操作或節省空間的場景。
           
          圖標+文本按鈕
          按鈕上既有圖標又有文本,圖標通常位于文本左側或上方,常用于清晰表達按鈕功能的場景。
          解鎖B端按鈕設計10大密碼
           
           
           
          按陰影樣式分
          無陰影按鈕
          按鈕沒有陰影,常用于簡潔或平面風格的界面設計。
           
          輕微陰影按鈕
          按鈕有輕微的陰影效果,常用于增加按鈕的立體感和層次感。
           
          明顯陰影按鈕
          按鈕有明顯的陰影效果,常用于突出按鈕或與背景形成強烈對比。
           
          動態陰影按鈕
          按鈕的陰影效果會隨著鼠標懸?;螯c擊等交互動作而變化,常用于增加交互體驗的趣味性。
          解鎖B端按鈕設計10大密碼
           
           
           
          按動畫種類分
          無動畫按鈕
          按鈕沒有動畫效果,常用于簡潔或傳統的界面設計。
           
          懸停動畫按鈕
          當鼠標懸停在按鈕上時,按鈕會有動畫效果,如顏色漸變、邊框變化、圖標旋轉等,常用于增加交互體驗的趣味性和吸引力。
           
          點擊動畫按鈕
          當點擊按鈕時,按鈕會有動畫效果,如縮放、震動、波紋等,常用于增加交互體驗的反饋感。
          馬蜂窩的功能主按鈕,在點擊的時候都會產生動畫,交互感十足。
          解鎖B端按鈕設計10大密碼
           
           
           
          加載動畫按鈕
          當按鈕處于加載狀態時,按鈕會有加載動畫效果,如旋轉圖標、進度條等,常用于告知用戶操作正在進行中。
           
           
           
          3、按鈕的幾種狀態
          解鎖B端按鈕設計10大密碼
           
           
           
          3.1 默認按鈕
          按鈕的初始狀態,通常具有正常的顏色、形狀和文字顯示,等待用戶操作。
           
          3.2 待激活狀態按鈕:
          待激活狀態按鈕通常用于指示某個功能或服務尚未激活或啟用,用戶需要執行某些操作來激活它。這種按鈕的設計和實現需要清晰地傳達當前的狀態,并引導用戶進行下一步操作。
           
          3.3 點擊狀態按鈕:
          當用戶點擊按鈕時,按鈕會呈現按下的狀態,通常通過改變顏色、形狀或添加陰影等方式來表示。
           
          3.4 禁用按鈕:
          在某些情況下,按鈕會處于禁用狀態,無法進行操作,通常會以灰色或半透明的方式顯示,提示用戶當前操作不可用。
           
          3.5加載狀態按鈕:
          加載狀態按鈕通常用于指示某個過程正在進行中,例如數據加載、文件上傳或頁面正在加載等。這種按鈕可以讓用戶知道他們的操作正在被處理,而不是卡住或出現錯誤。
           
          3.6危險提示狀態按鈕:
          危險提示狀態按鈕通常用于提醒用戶即將執行的操作可能帶來風險或不可逆的結果,例如刪除重要文件、注銷賬戶等。這種按鈕的設計和實現需要讓用戶明確意識到操作的危險性,以避免誤操作。
           
          下邊這兩組彈框就是運用了危險按鈕,來提示客戶未來即將面臨的風險,警示作用非常的明顯。
          解鎖B端按鈕設計10大密碼
           
           
           
           
          解鎖B端按鈕設計10大密碼
           
           
          1、 Web端的按鈕尺寸建議
          在Web端,按鈕尺寸沒有固定標準。不過,一般來講,按鈕的高度常在32px-48px之間,寬度可根據內容靈活設置,但最好不要小于48px,這樣方便用戶用手指(觸屏設備)或鼠標點擊。像一個簡單的“提交”按鈕,寬度可能是80px左右,高度是36px左右。這些尺寸能保證按鈕在視覺上比較舒適,易于交互。
           
           
          2、 麻省理工觸摸實驗對按鈕尺寸的指導
          麻省理工觸摸實驗室通過對人類指尖的研究,得出了關于界面按鈕大小設計的一些重要參考數據。
           
          解鎖B端按鈕設計10大密碼
           
           
           
          對于食指,平均寬度在16至20毫米,指腹觸摸區域尺寸為10至14毫米,指尖觸摸區域尺寸為8至10毫米;對于拇指,平均寬度為25毫米,指腹觸摸區域尺寸為12至16毫米,指尖觸摸區域尺寸為10至12毫米。由此建議,食指觸摸的按鈕應保證在8毫米×8毫米以上,且控件間距應保證至少在1毫米以上;拇指觸摸的按鈕應保證在10毫米×10毫米以上,且控件間距應保證至少在2毫米以上。
           
          該研究還指出,大多數用戶可以舒適可靠地擊中 10 毫米×10 毫米的觸摸目標 。
           
           
          3、 iOS對按鈕尺寸大小的規范
          解鎖B端按鈕設計10大密碼
           
           
           
          從按鈕圖標尺寸來看,根據蘋果官方設計指南,iOS中按鈕圖標有不同標準。小圖標尺寸為24×24pt,用于小型按鈕,如導航;標準圖標為32×32pt,用于普通按鈕,適合次要操作按鈕;大圖標是 40×40pt,用于寬大按鈕;特大圖標則為48×48pt,用于特大按鈕。不同設備屏幕尺寸也有對應的建議圖標尺寸,如iPhoneSE建議24pt,iPhone14及iPhone14Pro建議32pt,iPad 建議40pt 。
           
          在最小觸摸區域方面,iOS規定最小觸碰區域為44×44pt,這種尺寸一般適合主要操作按鈕。
           
           
          解鎖B端按鈕設計10大密碼
           
           
          UI按鈕的組成主要包括以下幾個關鍵元素:
           
          1、圓角
          圓角的大小決定了按鈕的氣質和視覺感受。小圓角常用于常規按鈕,如4px圓角;圓角越大,越有親和力,人眼往往不喜歡非常鋒利的物體,所以通常不建議使用0圓角的按鈕樣式,根據我大量的體驗,我發現市面上確實也是帶圓角的按鈕居多些。
          解鎖B端按鈕設計10大密碼
           
           
           
          2、圖標
          圖標用于直觀表達按鈕的功能或狀態,如加載中、編輯等。圖標的設計應與整體頁面風格一致,并確保其含義明確易懂。
           
           
          3、內間距
          內邊距能夠擴大按鈕的可點擊范圍,幫助用戶更容易點擊按鈕。一個好的設計間距是把按鈕的水平內邊距設計成垂直內邊距的2倍。當然,你也可以根據你設計的實際情況做適當調整,規矩不是死的。
          解鎖B端按鈕設計10大密碼
           
           
           
           
          4、容器
          容器是包含所有視覺和交互元素的框架,包括顏色、紋理、文案和圖標等。容器的設計應支持按鈕的功能和美觀。
           
           
          5、邊框
          邊框定義了按鈕的邊界,常用于次級按鈕的描邊。邊框的粗細和樣式可以影響按鈕的視覺層次和交互效果。
           
           
          6、文案
          文案是按鈕上的文字描述,用于表達按鈕的含義和功能。文案應簡潔明了,易于理解,同時具有一定的吸引力。
           
           
          7、背景
          背景用于表達按鈕的狀態和品牌氣質。不同的背景顏色和紋理可以增強按鈕的視覺吸引力和品牌識別度。
          解鎖B端按鈕設計10大密碼
           
           
           
           
          8、投影
          投影用于凸顯層級關系,幫助用戶更好地區分不同的按鈕。投影通常與紋理、漸變色結合使用,以打造更好的視覺體驗。
           
          佐糖首頁為了促進轉化,特意將“開通會員”的按鈕用投影凸顯處理,帶投影的按鈕明顯有向前走的感覺,比沒有投影的按鈕看起來更加顯眼,小小投影在頁面中不僅起到增加空間感的作用,還起到了業務強調的作用,已經不僅僅是樣式的一個承載了。
          解鎖B端按鈕設計10大密碼
           
           
           
          這些元素共同作用,不僅提升了按鈕的功能性,還增強了其美觀性和用戶體驗。在設計UI按鈕時,應綜合考慮這些因素,以確保按鈕既美觀又實用。
           
           
          解鎖B端按鈕設計10大密碼
           
           
          Antdesign指出按鈕的作用是指導用戶采取你希望他們采取的行動,并幫助用戶防錯。
          解鎖B端按鈕設計10大密碼
           
           
           
          1、觸發操作
          1.1提交與確認:
          在表單填寫場景中,如用戶注冊、登錄、信息提交等,按鈕用于觸發提交或確認操作,將用戶輸入的信息發送給系統進行處理。
           
          1.2執行功能:
          在各類軟件中,按鈕是執行具體功能的主要方式,如在圖像編輯軟件中,“裁剪”“旋轉”“調整顏色”等按鈕,可讓用戶快速實現相應功能。
           
           
          2、導航跳轉
          2.1頁面切換:
          在多頁面的應用或網站中,按鈕可實現頁面之間的切換,如網站的首頁、產品頁、關于我們頁等,通過點擊按鈕,用戶能方便地瀏覽不同頁面內容。
           
          2.2菜單展開與收起:
          用于控制導航菜單的展開與收起,節省頁面空間,提高界面的整潔度和易用性。
           
           
          3、狀態控制
          3.1顯示與隱藏:
          可用于控制某些元素的顯示與隱藏,如在電商網站中,點擊“查看更多商品詳情”按鈕,可展開隱藏的詳細商品信息。
           
          飛書中的這個小小按鈕,它承載著隱藏折疊的功能,讓頁面看起來更加的簡潔有序。
           
          解鎖B端按鈕設計10大密碼
           
           
           
           
          3.2啟用與禁用:
          在某些功能需要滿足一定條件才能使用時,按鈕可用于表示該功能的啟用或禁用狀態,如在未填寫完必填項時,“提交”按鈕處于禁用狀態,無法點擊。
           
          中國移動云盤的登錄頁就是這么設計的,當前面信息沒有填完,后面的登錄按鈕始終是禁用的狀態,只有當信息填完,且填寫正確,按鈕才會亮起。
          解鎖B端按鈕設計10大密碼
           
           
           
          4、提供反饋
          4.1 操作反饋:
          當用戶點擊按鈕后,按鈕會通過顏色、形狀、動畫等方式的改變,向用戶提供操作反饋,告知用戶系統已接收到操作指令。
           
          4.2 引導提示:
          在一些復雜操作或新功能引導時,按鈕可作為引導提示的一部分,告知用戶下一步操作,如在新手引導流程中,突出顯示“下一步”按鈕。
           
          心島日志的新手指引中就是這樣設計的,按鈕在其中起了很重要的指引作用。
          解鎖B端按鈕設計10大密碼
           
           
           
          5、數據交互
          5.1 數據篩選:
          在數據展示界面,如表格、列表等,按鈕可用于對數據進行篩選,方便用戶快速找到所需信息。
          釘釘打卡這個界面中,多虧有了日、周、月的篩選按鈕,才讓數據篩選變得如此便捷。
          解鎖B端按鈕設計10大密碼
           
           
           
          5.2 數據排序:
          通過點擊“按時間排序”“按銷量排序”等按鈕,用戶可對數據進行重新排序,以滿足不同的查看需求。
           
           
          6、品牌傳達
          很多產品的按鈕顏色都是與它的品牌色高度一致的,它既是按鈕,又是品牌色的傳遞大使。
           
          網易云音樂的按鈕色用的網易紅,釘釘打卡的按鈕用的騰訊藍,都是在傳遞自己的品牌色,同時也是在進行指令的傳達。
          解鎖B端按鈕設計10大密碼
           
           
           
           
          解鎖B端按鈕設計10大密碼
           
           
          在日常設計中,頁面無疑少不了按鈕位置的擺放,那么按鈕放置在什么樣的位置合適,這也是一個值得深思的問題,也許我們已經司空見慣了按鈕的位置擺放,但是我們知道它為什么要放這里或者那里嗎?下面我們來看下這幾種設計模型,讓它告訴我們,為什么,在特定場景下,按鈕位置要這么放?
           
           
          1、設計依據 – Z型視覺模型
          1.1 原理含義
          Z型視覺模型是一種描述用戶在瀏覽網頁或界面時視覺軌跡的理論模型。
          它的布局遵循字母Z的形狀,指用戶的瀏覽路線——從左到右,從上到下的的視覺運動軌跡。
           
          首先,人們從左上角到右上角進行掃描,形成一條水平線;第二步,向頁面的左下側,創建一條對角線;最后,再次向右轉,形成第二條水平線,當觀眾的視角以這種模式移動時,它形成一個虛構的“Z”字形。
          解鎖B端按鈕設計10大密碼
           
           
           
          1.2 視覺區域
          區域1:位于頁面左上角,是用戶視線最先關注的區域,通常放置最重要的信息,如網站標志、導航欄等,能第一時間吸引用戶的注意力并讓用戶對頁面內容有初步的整體認知。
           
          區域2:在區域1的右側,用戶的視線在水平移動時會經過該區域,可放置一些與區域1相關的輔助信息或次要的導航元素等。
           
          區域3:位于頁面中部偏左,當用戶視線繼續向下移動時會關注到該區域,通常用來展示頁面的核心內容,如產品介紹、文章主體等。
           
          區域4:在頁面的右下角,是用戶視線的終點區域之一,可放置一些重要的操作按鈕或補充信息等,以吸引用戶在瀏覽完主要內容后進行進一步的操作或獲取更多信息。
          解鎖B端按鈕設計10大密碼
           
           
           
          1.3 應用案例
          在電商網站中,商家會把熱門推薦或主打產品放在區域1和區域3,以吸引用戶的注意力。在產品詳情頁面,將“加入購物車”“立即購買”等按鈕放在區域4,方便用戶在瀏覽完產品信息后進行購買操作。
           
          天貓商城就是這樣做的,把網站的LOGO圖放置在左上角(區域1),把產品圖放置在左下角(區域3),最后在用戶瀏覽了全部頁面之后,在右下角(區域4)放置購買按鈕,引導用戶下單。
           
          在這個帶有銷售場景的頁面設計中,
          購買按鈕放置在右下角符合用戶瀏覽習慣,也符合Z型視覺模型。
          解鎖B端按鈕設計10大密碼
           
           
           
          在B端應用軟件中,可能運用的功能比較多,按鈕也比較多,通過大量分析和觀察發現,它們
          大部分喜歡把按鈕放置在每次視覺運動線的起點或者終點的位置。
           
          騰訊云是這樣處理的,中國移動網盤是這么處理的,看似巧合,其實也有它合情合理的一面,因為每一個動作的開始和結束都會更加的引人注意。
           
          這就跟人們每次入職一個新公司一樣,剛進去時會特別賣力、小心,后面時間長了,也就形成免疫,習慣了,但是當最后要離開這家公司的時候,最后心情又會特別復雜,回想起自己在這里成長的歲月,就會心生很多的感慨,也會特別的記憶深刻。
           
          也許這也是為啥很多頁面設計,喜歡
          把重要的按鈕放置在每次視覺運動線的起點或者終點吧!
           
          解鎖B端按鈕設計10大密碼
           
           
           
           
          解鎖B端按鈕設計10大密碼
           
           
          按鈕的顏色在界面中不僅起到視覺點綴的作用,同時也是按鈕狀態的一種呈現和反饋。
           
          按鈕顏色不是千篇一律的品牌色,它也經常需要根據業務場景的不同,更換顏色,比方說紅色-刪除按鈕、黃色-告警按鈕、綠色-通過按鈕、藍色-更多按鈕,不同的按鈕在顏色設計上都會有所區別。
          解鎖B端按鈕設計10大密碼
           
           
           
          此外,在設計按鈕顏色時,有一些基本規范。
          首先,從功能角度看,
          主要按鈕通常會使用比較突出的顏色,
          像鮮艷的藍色(如#007BFF),這是因為藍色醒目又不會過于刺眼,能引導用戶去點擊。次要按鈕(如取消、返回)的顏色會稍淡一些,比如淺灰色(#ccc),讓用戶知道這是相對次要的操作。
           
          從顏色搭配來說,按鈕顏色要和背景色有足夠的對比度,方便用戶識別。比如背景是白色,深色按鈕就會很清晰;如果背景顏色較深,那按鈕可以用淺色或者高亮度顏色。
           
          另外,顏色的選擇也要考慮產品的風格和使用場景。例如,在一個游戲軟件里可能會使用更活潑的色彩,像紅色、橙色;而在辦公軟件里,通常會采用比較沉穩的色調,如藍色、黑色。
          解鎖B端按鈕設計10大密碼
           
           
           
           
          解鎖B端按鈕設計10大密碼
           
           
          1、可識別性
          1.1 視覺清晰:
          按鈕應采用用戶熟悉的設計樣式,如帶有矩形或圓角矩形邊框的填充按鈕、帶有陰影的填充按鈕、幽靈按鈕等。
           
          1.2 文字明確:
          按鈕上的標簽應準確、簡明直接地介紹其功能,避免使用過于通用或模糊的表述,讓用戶清楚點擊后會發生什么。
          解鎖B端按鈕設計10大密碼
           
           
           
           
           
          2、易操作性
          2.1位置合理:
          將按鈕放在用戶期望看到的地方,如遵循F型或古騰堡原則,在頁面的視覺焦點區域放置重要按鈕。
          解鎖B端按鈕設計10大密碼
           
           
           
          2.2尺寸適宜:
          按鈕大小應反映其在屏幕上的優先級,更大的按鈕用于更重要的操作,同時要適配用戶的手指,避免誤觸。
           
           
           
          3、一致性
          3.1 順序得當、邏輯一致:
          按鈕的順序應反映用戶與界面之間交互的邏輯,如“上一步”按鈕通常在左邊,“下一步”按鈕在右邊。
           
          3.2 狀態樣式一致:
          按鈕應具有一致的狀態樣式,如默認、按下、聚焦、禁用等,一個產品中,這些狀態樣式要高度的一致,不能在這個頁面按鈕樣式是這樣的,跑到另一個頁面,樣式又發生了改變。
           
          著名的格式塔心理學也是這么認為的,它強調人對事物的理解是基于整體的、有組織結構的,如果按鈕設計做到一致性,對提高產品的整體性是有非常大的改進的。
          解鎖B端按鈕設計10大密碼
           
           
           
           
           
          4、簡潔性
          4.1 避免過多
          避免在一個界面中使用過多的按鈕,以免讓用戶感到無所適從,應優先考慮最重要的操作。
           
          4.2 功能單一
          每個按鈕應盡量只執行一個主要功能,避免一個按鈕承載過多復雜的操作,降低用戶的認知成本。
           
          ??硕芍赋?,人的決策時間會隨著選擇的增加而增加。在按鈕設計中,
          簡潔的設計能減少用戶的選擇和認知負擔
          ,使用戶能更快地做出決策并執行操作。
          解鎖B端按鈕設計10大密碼
           
           
           
           
           
          5、美觀性
          5.1 風格統一
          按鈕的設計風格應與整個UI界面的風格保持一致,包括顏色、形狀、字體等方面,形成統一的視覺體系。
           
          5.2 對比協調
          在保持整體協調的基礎上,通過對比突出重要按鈕,如使用高對比度的顏色、較大的尺寸等,吸引用戶的注意力。
          情感化設計理論強調設計應該注重用戶的情感體驗。美觀的按鈕設計能夠傳遞積極的情感信息,增強用戶和產品的情感連接。
          解鎖B端按鈕設計10大密碼
           
           
           
           
          6、要符合習慣
          奧斯卡·王爾德說過:“習慣一旦養成,便很難改變。” 
          所以我們在設計按鈕的時候,一定要符合人性的習慣,而不是試圖改變人們的習慣。
           
           
           
          解鎖B端按鈕設計10大密碼
           
           
          1、按鈕設計要有分組意識
          帶有分組的按鈕擺放,讓人看起來總是更加的有序,也更利于用戶進行操作,面對同類型的功能操作點無需跳躍著去尋找,能很快在相似功能操作區域找到。
           
          360的分組意識很強烈,三個不同區域的圖標按鈕樣式都做了明顯的區分,讓界面看起來更加有序,操作起來也更加的便捷。
          解鎖B端按鈕設計10大密碼
           
           
           
           
           
          2、按鈕排列視覺上要有主次
          切不可一行按鈕中出現多個高強調的按鈕,Antdesign對這個也做了詮釋,會對用戶的行為進行錯誤的引導,也不利于聚焦。
           
          通義這個頁面雖然有多個選中的按鈕,但是沒有全部用高強調的按鈕,只有強推薦的操作“開始錄音”才用了強按鈕,其它通過相對淺的顏色做了弱按鈕選中處理,視覺上主次分明,信息主次表達上也清晰可見。
          解鎖B端按鈕設計10大密碼
           
           
           
           
           
          3、不要在按鈕中放置兩個圖標
          當一個按鈕同時兼顧兩個交互動作的時候,一定要區分設計,不能赤裸裸的展示在一個按鈕中,而不做任何區分。
          解鎖B端按鈕設計10大密碼
           
           
           
           
           
          4、返回按鈕宜放置在左邊
          具有返回意義的按鈕,應該放在左側,暗示其方向是回到之前,例如上一步。
          解鎖B端按鈕設計10大密碼
           
           
           
           
           
          5、按鈕文字不宜太長
          簡短的文字更易被用戶閱讀和記住,在一個按鈕上最多不超過5個文字,重要的按鈕一般
          使用2~4個字。
          解鎖B端按鈕設計10大密碼
           
           
           
           
           
          解鎖B端按鈕設計10大密碼
           
           
          ? 用純灰色文字的弱化按鈕
           
          ? 用灰色邊框+灰色文字的弱化按鈕
           
          ? 用顏色邊框+顏色文字的弱化按鈕
           
          ? 用灰底+灰色文字的弱化按鈕
           
          ? 用淺色底+顏色文字的弱化按鈕
           
          ? 用純顏色的弱化按鈕
           
          解鎖B端按鈕設計10大密碼
           
           
           
           
          解鎖B端按鈕設計10大密碼
           
           
          通過本篇文章的探討,我們深入了解了B端按鈕設計的九大核心要素。從按鈕的基本定義到Antdesign的分類,再到尺寸、構成、作用、位置和顏色等細節,每一部分都是提升用戶體驗的關鍵。
           
          按鈕設計不僅關乎美觀,更影響著用戶的操作效率和滿意度。
          在UI界面中,遵循設計原則和注意事項,確保按鈕既實用又具有吸引力,是每位設計師的職責。
           
          希望本文能為設計師們提供有價值的參考,激發更多創新靈感,共同推動B端產品的交互設計向更高水平發展。
           
           
          解鎖B端按鈕設計10大密碼


          作者:姝斐suphie
          鏈接:https://www.zcool.com.cn/article/ZMTY0OTkwOA==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          B端基礎 | 規范的做一套有特點的中后臺ICON

          杰睿

           

          我與ICON的設計好像有什么不結之緣。早在2017年我就寫過一篇如果對抗APP中ICON設計同質話的問題。提出了自己的一些建議。而在之后的工作中也多次改版或設計過成套的APP應用中心的ICON和系統后臺ICON庫。ICON設計的經驗那是不得不豐富的存在。

           

          ICON,中文翻譯為圖標。是對象的圖像表示,指用圖形指代某些名詞,如:打開、警告、愛、學校、山等。ICON,是上世紀九十年代伴隨IT 產業出現的一個技術詞匯,原指計算機軟件編程中為使人機界面更加易于操作和人性化而設計出的標識特定功能的圖形標志。

           

           

           

          下面是我總結了這幾年設計icon的經驗結合大廠的后臺規范。給新手設計師的一些建議,都是經驗之談希望能夠幫到你??梢宰屇阍谠O計的這條路上走的越來越輕松。

           

           

           

           

          第一章 ICON的設計

           

          那位美女設計師:?。「闶裁囱?,B端設計師icon還有設計,你傻不傻呀。我給你分享幾個現成的icon網站吧下載了就能用。
          我:是的我也用現成的icon在很多的需求里。但是我更喜歡自己設計,自己去做。直接用現成的icon不爽嗎。嗯當然爽呀。看是你要要知道做的更好的方法和可能性。不要總把自己當美工吧,我們可以是設計師的。

           

          做為什么師我們大概都應該知道icon作為我們界面的重要構成元素,它會在很大程度上影響我們界面的風格。甚至會影響我們品牌的調性。所以一套符合我們設計風格具有我們品牌調性的icon是很有必要的??傊阆朊靼滓粋€道理,你一整個屋子都裝修好了,房間里獨獨到處都放了幾把破椅子。不難受嗎。

           

          Ant design設計規范:圖標是 UI 設計中必不可少的組成。通常我們理解圖標設計的含義,是將某個概念轉換成清晰易讀的圖形,從而降低用戶的理解成本,提升界面的美觀度。在我們的企業級應用設計范圍中,圖標在界面設計的諸多元素中往往只占了很小的比重,在調用時也會被縮到比設計稿小很多倍的尺寸,加上在圖形素材極度豐富并且便于獲取的今天,在產品設計體系中實現一套美觀、一致、易用、便于延展的圖標體系往往會被不小心忽略掉。Ant Design 相信一整套優質的圖標對于設計質量的影響是非常巨大的,這考驗著設計師的協作能力,以及對圖形塑造的系統性思維,同時也能反映一個團隊對于細節的追求。

           

           

          1、中后臺ICON的設計原則

           

          中后臺使用的icon大部分規范平臺也好或者一有系統也好他們的設計原則基本是大同小異的。我的建議是如果你要設計一整套的icon圖標。在設計之前確定自己icon的設計原則。這個設計原則可以依照自己的界面設計風格或期望的界面設計風格以及行業屬性、自己品牌等去制定。

           

          1-1、Ant design圖標設計原則

           

          Ant Design 的圖標設計原則源自「確定」和「自然」,落實到圖標設計領域,一共有四個。準確、簡單、節奏、愉悅。

           

          1-1-1、準確:

           

          設計造型準確的圖標(保持偶數原則,去小數點);選擇表意準確的圖標,不對用戶的認知造成困擾。

           

           

           

          1-1-2、簡單:

           

          在表意清晰準確的基礎上,盡量保持圖形的簡潔,不做多余的修飾。

           

           

           

           

          1-1-3、節奏:

           

          挖掘構圖中的秩序之美。

           

           

           

           

          1-1-4、愉悅:

           

          賦予適度的情感。在部分圖標設計中,會適度的注入擬人化的元素,令圖標具備生命力。

           

           

           

           

          1-2、TDesign圖標設計原則

           

          Icon 作為 UI 構成中重要的元素,它一定程度上影響整體 UI 界面呈現出的風格,TDesign 初期提供一套適用于中后臺場景的線性 Icon,以普適、通用的標準進行設計,風格契合默認 TDesign 的風格,線性、圓角。在TDesingv中設計原則為、從簡、精確、適度

           

          1-2-1、從簡:

           

          制作時保證參數的簡化,盡量消除小數點以及非整數的角度。處理線條以及輪廓時刪除多余的錨點,輸出時應避免出現不必要的裝飾,保持圖標的簡潔。

           

           

           

           

          1-2-2、精確:

           

          在設計時避免使用那些含義模糊的圖形,當同個事物存在多個圖形表述時,應選取最為流通的樣式,必要時進行針對性的強化。在圖標輸出時也應遵守命名規范,精確的文字描述便于他人查找。

           

           

           

           

          1-2-3、適度:

           

          單個圖標作為一個獨立的視覺個體,在線條的疏密以及圖形的搭配上要呈現適度感。在處理一些必要的高密度圖標時也要考慮線條的節奏感,讓其舒適不壓迫。系列圖標要遵守適度原則,將變化控制在一定范圍內。

           

           

           

          發現沒大廠規范為了普世所以他們的圖標設計原則定的基本都是一樣的。只是換了一個詞而已。而且他們的大部分原則和細節都是來自平面設計里的板式設計和標志設計里的形式美法則。

           

           

          2、如何規范的設計ICON

           

          設計一套優秀的圖標設計應該簡潔明了、直觀性強、獨特性好、可識別度高、適應性廣、細節處理精細、可擴展性強,并且能夠根據用戶反饋及時改進和優化。如果要具備這些特征,那我們在設計的時候就要遵循一些特定的規范。

           

           

           

          2-1、柵格

           

          icon設計的柵格在大場的設計規范里面分為兩種。一種ant design設計規范里面的那種柵格。另一種是TDesign設計規范里面的柵格。我之前在做的時候是直接呀的阿里巴巴示例圖庫的上傳模板里面的柵格進行設計的不過。沒有這設計規范里面的柵格好用。

           

           

           

          2-1-1、Ant Design柵格

           

          Ant Design 的系統圖標都是按照 1024 x 1024 的畫板進行制作的。

           

          出血位: 在圖標的設計過程中預留出血位的做法,可以預防某些造型的圖標在具體應用時出現邊緣被切掉的風險;同時在設計過程中,也為設計師把握圖標間平衡留下了進退的余地。新版的設計規格在圖形的外圍預留了 64px 的出血位,多數的圖標在設計中我們都不建議超過這個區域。

           

           

           

           

          2-1-2、TDesign柵格

           

          柵格作為圖表繪制的底層結構,是一切屬性設計的基礎。線條的長短粗細、圖標的大小比例等關鍵因素均在其基礎上制定。圖標常見尺寸為16*16;20*20;24*24;32*32這四種輸出尺寸。這些尺寸均可以清晰的顯示在常規的顯示器上。TDesign 最終選擇以16*16px 的尺寸作為圖標繪制的統一柵格尺寸

           

           

           

          我記得最早入行的時候畫icon就用的這種柵格。但是我不太喜歡,因為在實際的設計之中會出現好多問題。當時的我是無法解決的。


          2-2、輪廓與模板

           

          面對各式各樣的icon我們在上一步有了柵格,接下來就要處理在柵格里如何讓形狀不同的icon在視覺上大小是一致的,在視覺上是平衡的。所以轉對不同形狀的icon在柵格里所占的輪廓規范就產生了?;具@個輪廓都是一樣的。因為他是一個很基礎的東西。

           

           

          但其實可能是我技術的問題。在過往的很多次設計中如果你完全按照這個輪廓去執行。做出來的icon你會發現其實在視覺上還是會存在問題的,我都會在做一次優化。不過這很大可能是我技術和設計能力的問題吧。

           

           

          2-3、設計細節

           

          即使有了規范,柵格輪廓等。但是往往我們在設計制作的時候還是會有很多的細節需要去處理的。這樣我們的設計才會更專業。因為我用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

           

          3、ICON分類

           

          以上的內容主要在探討一類icon圖標的設計。那就是中后臺的圖標設計。但其實icon圖標是有很多的分類的。交互性圖標、裝飾性圖標、說明性圖標

           

          3-1、交互性圖標

           

          這類圖標主要用于應用程序的界面設計,它們可以向用戶傳遞某種信息,引導用戶執行特定操作,同時也允許用戶向程序傳遞控制信息。例如,登陸注冊按鈕、開關按鈕、數量按鈕、點贊、轉發分享等都屬于交互性圖標。

           

           

          3-2、裝飾性圖標

           

          這類圖標主要用于提高頁面設計性,它們可以加深個性化設計風格,提升用戶線上體驗感,迎合受眾群的偏好,提升設計親和度。例如,符合節日需求的線上活動呼應圖標、個性化圖標等都屬于裝飾性圖標。

           

           

          3-3、說明性圖標

           

          這類圖標主要用于闡明信息,它們是區分不同功能或內容的視覺標記,簡單地說,就是對功能的解釋說明。例如,象形圖標、隱喻圖標、工具圖標和混合圖標等。

           

           

          此外,根據圖標的具體功能和用途,還可以將圖標分為表意圖標(又稱解釋性圖標)和標識性圖標。表意圖標是通過原本不存在實物的符號表達某些特定的含義或操作行為,這些符號逐漸繼承了一些象形符號的特性并不斷演化。例如,“箭頭”已經從最初的“弓箭”衍生為一種特定的表意符號。而標識性圖標主要用于標識品牌、產品或服務,它們通常具有獨特的設計風格和視覺效果,以便在市場上脫穎而出。例如,蘋果公司的蘋果圖標就屬于標識性圖標。

          為我以往的設計經驗里大部分都是在做B端的設計和交互工作。在我的理解里圖標就分兩類。1、規規矩矩的ICON。2、花里胡哨的ICON。就這么簡單。

           

           

           

           

          第二章 實戰我搞了一套ICON

           

          再優秀的理論也只能是理論。實踐才是檢驗真理的唯一標準。這不是我說的。這是老馬(卡爾·海因里希·馬克思)說的。所以就請大家進入我的實踐過程吧。

           

           

           

          1、需求背景

           

          需要還是要從最初開始講。我負責的SAAS平臺要迭代換框架。然后對界面視覺交互、產品功能都迭代一個大的版本。這次設計部分的任務就我來負責。

           

          因為是大的迭代嘛。所以這次icon設計的需求是跟著整個平臺一起走的。你要設計新的視覺還用之前的那套老icon顯示是不合適的。在者說那套icon的質量也是一個難以想象的存在。是開發直接從網上個個平臺找的。所以這次這個平臺的視覺迭代就有了搞一套適合我們界面和行業的icon圖標。

           

           

          這是我們SaaS平臺的設計價值觀

           

          2、設計原則

           

          因為是先有了界面,要做一套配合界面的菜單icon圖標。我想我們的icon要符合整體頁面的風格。不說給界面加分了,也不破壞我辛苦做的界面視覺。

           

          結合我們品牌的logo圖標的特點。讓我們的icon也擁有獨屬于他們自己的絲帶偶。把公司logo的設計特點加入到我們這次icon的設計原則里。

           

           

          是的優美,是我們這一套icon的特點。也是從我們logo里提取出來的設計要點。然后把他運用到icon設計里。

           

          3、規范的制定ICON的制作

           

          規范的知道基本是使用的阿里巴巴矢量圖庫早期的那個上傳圖標模板的AI文件。為什么會選擇使用這個呢。因為我們SaaS平臺的所以icon都是從阿里巴巴矢量圖庫引用的。我要把我做的icon上傳到阿里巴巴矢量圖片他們使用,而不是直接切圖給他們用。

           

           

          在這套圖標設計的時候,其實并沒有完全的按照大廠的設計規范進行。在很多的細節上做了調整。為的是達到更好的效果。當然。也有很多遺憾。在很多的方面并不是很標準。在下次優化設計時,會更好的去執行制定的設計原則和設計規范。

           

           

           

          第三章 拓展知識(標志設計淺談)

           

          之所以寫這部分內容,是因為我覺得在平面設計里標志設計的知識對我們現在圖標設計是很有用的??梢允菆D標設計本身就是適應了顯示屏后的標志設計。如果你搞懂了標志設計的系統知識,那圖標設計不就是手拿把掐的事了。標志設計就是殺雞的牛刀。

           

          一般我們說到標識設計可能大概覽的就是會認為是品牌形象設計,也就是LOGO設計。是的我大學學的標志設計就是在講品牌LOGO的設計。但我現在理解的標志設計可能意義更廣泛。因為在很多的時候我是把標志設計的知識和原理來應用到其他的設計方面。

           

          標志是品牌形象核心部分(英文俗稱為:logo),是表明事物特征的識別符號。它以單純、顯著、易識別的形象、圖形或文字符號為直觀語言,除表示什么,代替什么之外,還具有表達意義、情感和指令行動等作用。

           

           

          LOGO、標志、徽標、商標是現代經濟的產物,它不同于古代的印記,現代標志承載著企業的無形資產,是企業綜合信息傳遞的媒介。

           

           

          1、標志設計怎么來的

           

          標志的來歷,可以追溯到上古時代的"圖騰"。最初人們將圖騰刻在居住的洞穴和勞動工具上,后來就作為戰爭和祭祀的標志,成為族旗、族徽。國家產生以后,又演變成國旗、國徽。

           

          古代人們在生產勞動和社會生活中,為方便聯系、標示意義、區別事物的種類特征和歸屬,不斷創造和廣泛使用各種類型的標記,如路標、村標、碑碣、印信紋章等。

           

          到本世紀,公共標志、國際化標志開始在世界普及。隨著社會經濟、政治、科技、文化的飛躍發展,21世紀以來經過精心設計從而具有高度實用性和藝術性的標志,已被廣泛應用于社會一切領域,對人類社會性的發展與進步發揮著巨大作用和影響。

           

           

          2、標志的作用

           

          隨著“讀圖”時代的到來,標志以簡潔、 獨特、易識別的圖形符號傳達著特定的含 義和綜合信息,成為人們相互交流和傳遞 信息、溝通情感、表達愿望的視覺語言。 特別是在注重品牌效能與品質的今天,標 志發揮著重要的作用。 標志最主要的功能是以其簡潔、醒目、 美觀的圖形符號傳遞信息。

           

           

          2-1、區分商品

           

          標志能夠表述某種組織、某項活動或某 企業品牌的性質、服務和宗旨。標志作為一種視覺識別符號,能有效 區別各種品牌給消費者的印象。也就是說, 它能夠表述出個性特點,使其從眾多同類 產品的標志中被區別出來。

           

          市場上的商品花色、品種繁多。在商品的海洋里,消費者只能根據不同的 標志區別同類商品的不同品牌和不同生產廠家,并以此進行比較與選擇。商業企業在經營商品時,有的 也用自己的標志表示各自的經營特色。標志的這種作用是其取得法律保護的主要依據,在國際貿易中, 這種作用也得到了普遍的認可。

           

          2-2、樹立形象

           

          標志是現代經濟的產物,它不同于古代的印記?,F代標志承載著企業的無形資產,是企業綜合信息 傳遞的媒介。對于企業而言,不僅要表明“我是誰”,還要說明“我怎么樣”。標志通過在不同場合、 不同載體的反復出現,使人們在看到標志的同時,就能自然聯想到產品

           

          可口可樂歐洲太平洋集團公司前總裁喬戈斯曾經說:“可口可樂成功的原因很簡單,許多制造商只 熱衷于為消費者提供產品,而大多數消費者則需要產品的牌子。請記住,一聽可口可樂不只是飲料,它 還是一個朋友。

           

          2-3、品牌價值

           

          如今的社會,享用名牌似乎成為身份的象征、地位的體現和個人魅力的表現,這就使標志有了某種 精神的力量,這種精神力量代表著品牌的價值。

           

          名牌價值是無形資產,無形資產的價值遠遠高于企業的有形資產價值和年銷售額。“可口可樂”“百 事可樂”的品牌價值都達到上百億美元。標志在各個國家都受到法律的保護,從這個意義上說,名牌標 志是企業的無價之寶,絲毫也不為過。

           

          美國可口可樂公司的一位經理說,即使可口可樂工廠一夜之間被毀壞殆盡,公司也能憑借“可口可樂” 標志的聲譽從銀行立即貸款重建工廠??梢姡瑢碛忻茦酥镜钠髽I來說,標志就是企業發展的一種依 托與保證,是一筆巨大的無形資產。

           

          2-4、美化產品

           

          標志作為企業和產品形象的象征,它用無聲的具有美感的圖形語言宣傳著產品的質量與特色。標志 設計的好壞直接影響企業和產品的信譽度。成功的標志不僅代表了產品本身,也增強了產品的魅力。

           

          著名的香奈兒(CHANEL)的標志以簡約明快的圖形和相得益彰的字體搭配給人以典雅、高貴之感。 香奈兒于 1913 年由創始人加布里埃·可可·香奈兒(Gabrielle Chanel)在法國巴黎創立,其標志是由兩 個背向的“C”重疊而成,圖形平衡對稱,充滿溫文爾雅、端莊聰慧之氣,

           

          3、標志的創意原則

           

          標志的本質是信息傳播,這是現代的 標志設計的核心。標志的設計創意應該從 信息入手,從功能需要出發。需要告訴大家的是什么,而不是把形式作 為設計的唯一出發點。

           

          3-1、獨特性

           

          在標志設計中,有的人喜歡造型簡單的,這得到了大部分人的認可;而有的人則認為在簡單中可適 當復雜,這要取決于實際的用途。不論簡單或復雜,需要把握一點:標志需要具備的特質是獨特。沒有 哪個企業甘愿平凡,大多數企業都在竭盡所能地建立自己獨特的企業文化和市場經營特色,所以在設計 標志時必須深思熟慮。

           

          獨特性是標志設計的最基本要求。標志的形式法則和特殊性就是具備各自獨特的個性,不允許絲毫 的雷同。這就要求標志的設計必須做到獨特、別致,追求創造與眾不同的視覺感受,給人留下深刻的印象。

           

          3-2、醒目

           

          醒目的設計是所有標志希望達到的視覺效果。優秀的標志能夠吸引人,給人以較強的視覺沖擊力。 因為只有引起人的注意,才能使標志所要傳達的信息對人產生影響。在標志設計中,注重對比、強調視 覺形象的鮮明與生動,這是產生醒目性的重要形式要素。

           

          3-3、簡單容易記憶

           

          標志要易于識別、記憶和傳播。這并不是說簡單化,而是指以少勝多、立意深刻、形象明顯、雅俗共賞。 通俗性強的標志具有公眾認同面大、親切感強等特點。對于商標而言,一個易記的商標形象首先要有一個與眾不同的響亮、動聽的商標名稱,以好的商標名稱為基礎,綜合考慮商標的特點,選擇最佳方案, 再進行具體的圖形設計。

           

          3-4、標志顏色

           

          標志色彩的配置一般有三種基本方法;

           

          -是原色配合
          原色的顏色單純、強烈、鮮艷奪目,藝術效果和傳播效果顯著。

           

          -是同類色配合
          只選擇一種顏色,采用依靠色彩明亮度變化的辦法,如用桔紅、桔黃、中黃、淺黃進行搭配,形成由淺入深的過度色視覺,能表達出動態感。

           

          -是補色配合
          這種色彩配置,對比鮮明,圖形格外醒目鮮艷,能給人以很強的視覺沖擊效果。

           

          4、標志設計形式美法則

           

          標志設計也是藝術設計的一種。所以他也同樣適用于我們設計里的形式美法則。用這些法則去設計你的標志或ICON讓他們的信息傳遞更準確。視覺表現更優秀。

           

          形式美法則
          標志設計是一種視覺藝術,人們在觀看一個標志圖形的同時、也是一種審美的過程。在審美過程中,人們把視覺所感受的圖形,用社會所公認的相對客觀的標準進行評價、分析和比較,引起美感沖動。

           

          4-1、變化與統一

           

          任何一個完美的標志圖形必須具有統一性,這種統一性越單純,越有美感。但只有統一而無變化,則不能使人感到有趣味、美感也不能持久,這是因為缺少刺激的緣,變化是刺激的源泉,有喚起興趣的作用,但變化也要有規律,無規律的變化,然起混亂和繁雜。因此變化必須在統一中產生。

           

          4-2、對稱于均衡

           

          均衡是在不對稱中求平穩。均衡可分為調和均衡和對比均衡兩大類,調和均衡是指同形等量,即在中軸線兩面所配列的圖形的形狀、大小、分量相等或相同。除圖案造型的均衡外,還有量的均衡、色的均衡,在標志圖形設計時必須相應考慮,以追求標志視覺張力。

           

          4-3、節奏與韻律

           

          節奏是韻律的條件,韻律是節奏的深化,節奏也就是“律”,這種律不僅表現在音樂上,而且反映在其他方面,當物體失去均衡則會引起運動。此種運動如有規律,則稱之為“律”。在標志圖形設計中,如果將線的長短、粗細、曲直、方位等進行不同程度的變化和巧妙組合,便會創造出不同感的“律”的形式,歸納起來分為:循環體、反復體及連續體。

           

          4-4、調和于對比

           

          在標志設計中,對比與調和應用極廣,如在大小、方向、虛實、高低、寬窄、長短、凹凸、曲直、多少、厚薄、動靜以及奇數與偶數的對比。對比是標志圖形取得視覺特征的途徑,調和是標志完整統一的保證。

           

          4-5、比例與尺度

           

          任何一個完美的圖形都必須具備協調的比例尺度。在標志圖形中常用的比率有整數比、相加級數比、相差級數比、等比級數比、黃金比等。標志設計的形式美法則,不能孤立和片面地理解,因為一個美圖形的設計,往往要綜合利用多種法則來表現。這些法則是相互依賴,相互滲透,相互穿插、互相重疊、相互促進的,隨著時代的變化,審美標準、設計手法也在不斷發展。

           

           

          5、標志發展趨勢

           

          近年來,標志設計發展越來越成瘦??偟陌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設計規則也是很有收獲的。



          作者:彪形大漢pro
          鏈接:https://www.zcool.com.cn/article/ZMTU5NTM3Ng==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          我們是如何搭建企業級B端設計規范的?

          杰睿

          今天主要是和大家分享一下我們公司內部建立設計體系的方法和實踐案例,希望大家能指正與交流~
          我們團隊就是最可愛滴~~~
          我們是如何搭建企業級B端設計規范的?
           
           
          B+Design System是以當前互聯網主流B端框架為基礎,并結合合公司特定業務場景而打造的具有"公司品牌特色的B端后臺設計體系"(以下簡稱為"B+Design"),包含了有關顏色、字體、icon、柵格、版式、間距、數據可視化等設計規范指南,組件層提供 30+ 不同的組件,包括它們的不同狀態,形成的模式,以及應用的產品。
           
           
          一、為什么要建立 B+Design 設計體系?
          隨著公司快速發展,目前公司用于業務支撐的后臺管理系統"品類繁多且零散獨立",需構建一套"靈活、專業"的設計體系來統一設計生態風格及交付標準。
           
          當前痛點:
          溝通時間成本高
          :跨部門的項目實施過程中流程混亂,產品、設計、開發、測試等崗位在工作對接時溝通低效且問題耦合度高;
           
          交付質量差
          :無項目統一交付標準,不同項目質量產出不穩定,項目質量高度依賴于各個環節負責人的個人能力;
           
          做不好設計協同
          :各個系統級頁面架構、組件、樣式野蠻生長,缺少規范范導致樣式及體驗不統一;
           
          研發效率低
          :組件重復開發,維護成本也高,無基礎沉淀能力;
           
          我們是如何搭建企業級B端設計規范的?
           
           
           
           
          二、構建 B+Design 的思路
          1、設計目標
          伴著公司業務發展,開源的組件庫已無法滿業務需要,搭建一套更適合公司業務的UI組件庫,勢在必行;設計系統承載著作為一個沉淀基礎能力的支持平臺,同時也具有賦能多多邊業務、多種角色的重要作用和價值;
           
          標準統一:
          重新定義標準化的產品用戶體驗,統一品牌形象、設計標準,降低決策成本,提高產品迭代效率及質量;
           
          降本增效:
          基礎能力沉淀,規范設計元素,減少重復性設計,且提高代碼可復用性,避免重復開發,降低時間及人力成本;
           
          高效協同:
          降低不同設計師或上下游同事之間的溝通成本,提高團隊之間的協作力,提升團隊整體效率;
           
          設計延展:
          通過設計規范建立,滿足組件在不同場景及業務中的延展和擴充,從而實現全鏈路、多場景的高效輸出;
          我們是如何搭建企業級B端設計規范的?
           
           
           
          2、設計原則
          為了更適用于企業級產品的開發和使用,通過大量中后臺場景的的實踐,B+Design設計系統提煉出以下設計原則:
          清晰:
          效率提升是務實之基。設計應減少不確定因素,降低用戶判斷次數,明確信息層級導向,使操作目的更清晰;清晰的設計體系讓產品操作直觀、流程一步到位;信息傳達清晰表意明確,助用戶短時間內快速理解并作出判斷。
           
          高效
          設計效率:可快速生成效果圖,也可使用Sketch,組件庫,頁面模板等快速生成效果圖和業務解決方案來提高產品體驗一致性;
          開發效率:組件均已代碼封裝;并提供體驗評估標準以供參考,保證產品質量;
          使用效率:系統常用組件(如批量搜索和操作)提高用戶工作效率;
          工作協同:減少產品開發流程中各個角色之間的溝通成本;
           
          標準化:
          樣式規范、操作流程、呈現高度一致的設計標準,能體現產品的品牌感與信賴感,實現品牌感的系統傳達,還能降低用戶反復學習成本,給用戶帶來品牌信賴。
           
          創新:
          通過對當前市場主流設計系統開展競品分析,結合FS業務場景對各個組件進行統一規范,打造符合FS品牌特性的產品設計體系;
          我們是如何搭建企業級B端設計規范的?
           
           
           
          3、原子化組件思維
          原子最早是由英國化學家/物理學家約翰·道爾頓提出的,繼承古希臘原子論和牛頓微粒說,提出的原子論?;瘜W元素由不可分的微粒(原子)構成的,它在一切化學變化中是不可再分的最小單位。
          原子理論同樣適用于我們的設計系統中:我們的頁面是由原子(最小單位設計元素)、分子(基礎控件)、組織(基礎功能組件)、模版(業務定制組件)、頁面構成的;
          我們是如何搭建企業級B端設計規范的?
           
           
          注意:設計組件不是把UI元素堆積到一個地方,然后各處集中引用用這么簡單。組件化的工作方式信奉獨立、完整、自由組合,目標就是盡可能把設計與開發中的元素獨立化,使它具備完完整的局部功能,通過特定規則自由組合來構成整個產品。
           
           
          三、構建 B+Design 的步驟
          基于前期的思考,接下來我們的任務是對整個體系的制定進行任務規劃,以下是四大步驟:
          我們是如何搭建企業級B端設計規范的?
           
           
           
          第一步:現狀分析
          通過現狀所有系統進行設計走查及用戶問卷調研,收集用戶建議及觀點,明確規范需要優化的方向。
          我們是如何搭建企業級B端設計規范的?
           
           
           
          第二步:框架梳理
          通過三大競品設計體系(阿里,字節,騰訊)框架的梳理,結合現有設計頁面,分析業務場景和競品框架,確定FS的最小元素,整理和歸類自己的組件框架。
          最終B+Design組件框架主要分為八大板塊,分別為:基礎樣式、通用、布局、導航、數據錄入、數據展示、反饋、其他,共50+組件;
          我們是如何搭建企業級B端設計規范的?
           
           
           
          第三步:設計組件和規范指南
          針對已梳理好的框架展開組件設計工作,同時為每個組件編寫相應的規范指南,為使用者提供場景參考。
          1、設計組件
          組件設計是設計規范中最核心,工作量最大的一個環節。我們可以將它拆解成幾個部分,先做出基礎組件,再基于基礎組件和業務需求抽象設計業務組件,最后抽象成頁面模板。
          我們是如何搭建企業級B端設計規范的?
           
           
           
          •  
            基礎組件
          說到基礎組件,這就是前面所提到的原子化思維,在進行設計系統的構建時,我們期望達到這樣一種效果:當對任何一個原子進行改動時,所有依賴于該原子的部件都能夠全部自動更新。唯有滿足這一條件,設計系統所設想的提升效率、解放生產力的目標才能真正得以實現。
          我們是如何搭建企業級B端設計規范的?
           
           
          我們是如何搭建企業級B端設計規范的?
           
           
          我們是如何搭建企業級B端設計規范的?
           
           
          我們是如何搭建企業級B端設計規范的?
           
           
           
           
          •  
            業務組件
          在構建完基礎組件后,可以根據業務需求,將部門內使用頻率較高的組件進行評估,抽象成業務組件。
          例如我們用的比較多的就是人員選擇器、附件下載、文本編輯器等等...
          我們是如何搭建企業級B端設計規范的?
           
           
          •  
            頁面模板
          完成基礎組件和業務組件的構建工作后,我們可以依照全局說明,通過組件搭建頁面模板。頁面模板不僅能夠切實提升組件的使用效率,而且能提供出色的組件使用示范作用,增進設計說明和組件的結合。
           
          我們是如何搭建企業級B端設計規范的?
           
           
          我們是如何搭建企業級B端設計規范的?
           
           
          我們是如何搭建企業級B端設計規范的?
           
           
          我們是如何搭建企業級B端設計規范的?
           
           
          我們是如何搭建企業級B端設計規范的?
           
           
           
          2、規范指南
          在后臺設計體系中,“規范指南”是一套為了確保設計的一致性、可用性和可維護性而制定的規則和指導原則。將所有的規范內容整理成詳細的文檔,配以示例和說明,方便團隊成員查閱和參考,此步驟也工作量巨大。主要分為七大模塊:
          我們是如何搭建企業級B端設計規范的?
           
           
          我們是如何搭建企業級B端設計規范的?
           
           
           
           
          第四步:效果驗證
          “B+Design System”建立成功后在"多個業務系統"中進行應用,通過實際業務反饋來進行效果驗證。
          我們是如何搭建企業級B端設計規范的?
           
           
           
          四、升級迭代機制
          一個統一的設計語言不應該僅僅是一組靜態規則和單個組件構成成的,它應該是一個不斷發展的生態系統。需要我們在產品實踐中不斷優化、迭代,讓組件更加貼合場景,更好的服務業務。
          我們是如何搭建企業級B端設計規范的?
           
           
          以上就是我們公司內部構建整個設計體系的全過程啦~~~~~
           
          在完成設計規范的構建后,我們聯合了產品經理和前端工程師,幫助每個環節的人員快速搭建產出物。
           
          對于產品經理
          :我們幫助產品搭建了一套Axure元件庫,該元件庫與設計組件庫一樣,可以快速搭建原型,提高了產品的工作效率,與設計師、開發的溝通也更加順暢。甚至對于簡單的頁面產品可以自己直接出原型給開發,開發直接沿用寫好了的組件庫。
           
          對于前端
          :輔助前端建立前端組件庫,這樣減少了設計走查的問題,對于以前各種樣式問題需要調整,現在基本都是寫好了的組件,可以有更多時間去寫交互和提高系統的性能。
           
           
           


          作者:設計恐慌癥
          鏈接:https://www.zcool.com.cn/article/ZMTYyNzI5Ng==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          一篇文章帶你秒懂圖標設計

          杰睿

          從1973年第一代圖形用戶界面的呱呱落地到今天百家爭鳴,圖形用戶界面竟然已經走過了50年的發展歷程,更神奇的是,原來UI設計這個職業的起源也是因圖標的起源而起,后來圖標成了UI設計中最重要的視覺元素之一,接下來,我們一起走進圖標的世界,了解它神秘背后的故事。
           
           
          一篇文章帶你秒懂圖標設計
           
           
           
          目錄
          一、 圖標的起源
          二、 圖標設計的定義
          三、 圖標的種類
          四、 圖標設計8大原則
          五、 圖標的6大作用
          六、 提升圖標設計的4個小技巧
          七、 5個圖標網站推薦
          八、圖標的命名規范
           
           
           
          一、圖標的起源
          在計算機發展的早期,用戶界面主要是基于命令行的,由字母和數字組成,操作復雜且對普通用戶不友好,用戶需要記住大量的命令和參數才能使用計算機系統。
           
          隨著計算機技術的發展,為了使計算機更易于使用和理解,程序員開始開發圖形化的元素來代表各種操作和功能,圖標概念由此誕生。最初的目的是幫助新手用戶能夠更方便地組織文件和執行任務,而無需記住復雜的命令。
           
           
          1.施樂公司的開創性工作
          1973年,美國施樂公司推出了第一批真正意義上具有圖形用戶界面的個人電腦——Xerox Alto。雖然這款電腦僅生產了約 2000 臺,但它為后來的計算機圖形界面發展奠定了基礎。它的界面中已經出現了一些簡單的圖標,如垃圾桶、計算器、打印機、文件和文件夾等,這些圖標成為了后來圖標設計的雛形。
          一篇文章帶你秒懂圖標設計
           
           
           
           
          2.蘋果公司的推動
          1979年,史蒂夫·喬布斯參觀了施樂公司的原型機后,深受啟發,決定開發自己的圖形界面計算機。1983 年,蘋果公司推出了Apple Lisa,這是蘋果首臺圖形界面計算機,其界面中的圖標設計得到了進一步的發展。
          在這一時期,現代圖標設計之母蘇珊·卡爾擔任蘋果的創意總監,她設計的像素風格圖標簡潔、清晰、易于理解,具有很高的視覺平衡性,即使在今天看來也顯得活潑有趣。
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
          3.微軟的跟進與發展
          1985年,微軟發布了 Windows 1.0操作系統,這是微軟在圖形用戶界面領域的重要嘗試。該系統中的圖標設計也借鑒了蘋果的一些理念,但也有自己的特點。隨著 Windows 操作系統的不斷發展和普及,圖標設計也逐漸成為了用戶界面設計中不可或缺的一部分。
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
           
          二、圖標設計的定義?
          圖標設計是一種設計活動,主要是創造出用于代表物體、動作、概念等各種元素的圖形符號。
           
          這些圖形符號具有簡潔性,讓人能快速識別。比如手機桌面上的微信圖標,用兩個對話氣泡的簡單圖案就代表了這個軟件,讓人一眼就能明白。圖標設計在很多領域都有應用,像軟件界面、網站、移動應用等,能夠為用戶提供視覺引導,方便用戶操作。
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
           
          三、圖標的種類
          圖標在提升產品氣質上起著不可估量的地位,在界面中往往起著畫龍點睛的作用,無法想象在一個產品中,沒有圖標,界面會顯得多么的無聊和乏味,但是圖標也不能總用一種形式的圖標,這樣也會百看讓人生厭,因此也就衍生了圖標的多樣性,以下是我整理的常見圖標類型:
           
          1、從視覺表現上,有以下12大類圖標
          一篇文章帶你秒懂圖標設計
           
           
           
           
          2、從功能上,有以下6大類圖標
          ?工具圖標
          工具圖標在B端項目中應用很廣泛,幾乎每個組件中都會包含這類圖標;比方說騰訊文檔上方的文檔編輯圖標就是屬于這種類型,它的裝飾性很小,更多是功能的承載。
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
          ?裝飾圖標
          在一些軟件產品中,會重點強調品牌、情感化設計,大量啟用3D化的裝飾圖標來提升界面的質感。
          比方說騰訊電腦管家下面的這個界面設計,它就運用了大量具有裝飾性的圖標來傳遞信息表達品牌,并且中央還采用騰訊電腦管家的IP形象作為切入點,萌萌的形象無形中拉近了與受眾之間的距離。
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
          ?啟動圖標
          在項目中,當用戶想表達品牌時,經常會把LOGO圖標做成動態圖,來更好的傳遞品牌理念,比方說聯想電腦管家,在啟動頁時,就運用了動態啟動圖標,同時下面還附帶了一個slogan的文字動效,很好的向用戶傳遞了安全的理念。
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
          ? 進程提示圖標
          在軟件界面中,經常也需要進程的提示,這時候圖標就可以起到這樣的作用,比方說騰訊電腦管家在清理垃圾時,圖標里面的風扇就一直在轉,寓意當前清理工作正在進行中。
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
          ? 狀態提示圖標
          軟件在運行過程中難免會出現bug或者內容為空的時候,這時候狀態提示圖標就尤為重要,可以大大減輕人們的焦慮情緒。
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
          ? 增加界面趣味性的圖標
          圖標不僅在理解和使用上給人們提效了,而且有時添加動效的圖標還能給人帶來絲絲驚喜和愉悅。
          比方說聯想的這個動態加載圖標,看著就很有趣,讓人忍不住多欣賞一下。
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
           
          四、圖標設計8大原則
          雖然現在AI盛行,很多酷炫的效果可以用AI實現,但是一些讓圖標看起來更加專業精致、耐看的秘密我們還是需要知道的,了解這些設計原則,我們可以事半功倍,當AI生產有偏差時,我們自己可以優化、修復和調整。
           
           
          1、大小統一
          圖標大小統一,就是一組圖標放置在一起,圖標大小要看起來差不多,不能忽大忽小,比方說這組圖標的第三個圖標,電腦圖標明顯過高,跟其他圖標放在一起就顯得不是那么的協調美觀和統一。
          一篇文章帶你秒懂圖標設計
           
           
          在大小統一這方面,我們記得就是幾何圖形它們有視覺差,有的時候并不是說尺寸一樣,大小就一樣了,比方說下面這組圖形,左邊的這組它們高度一樣,可是看起來大小并不太一樣,明顯中間的三角形顯得??;右邊的這組,三角形比左右兩邊的都要高,可是它們放在一起看起來大小就是差不多的,這就是幾何圖形帶來的視覺差,就是我們在做圖的時候,要記得多去感受,設計中的美很多不是用1+1=2能解釋清楚的,它就是一種感受,放下心中的浮躁,我們還是能感受到它們之間的區別,這種美也沒那么玄乎,只要用心,一定可以做出大小一致的圖標。
           
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
           
           
          2、圓角統一
          圓角統一,就是圖標之間有相同造型,然后又都有圓角的,那么他們就要保持相同的圓角曲度,比方說下面這組圖標,圖標的外形都是正方形且它們都帶有圓角,可是它們的圓角曲度卻明顯不一樣,這樣就看起了不夠規范和專業。
          一篇文章帶你秒懂圖標設計
           
           
           
           
          3、風格統一
          界面中同樣功能的圖標,樣式和風格需要保持一致,比方說這組圖標樣式,風格就保持著高度的一致,都是用的玻璃質感的磨砂材質。
          一篇文章帶你秒懂圖標設計
           
           
           
           
          4、角度統一
          這組扁平化圖標,在右邊相似的角度都疊加了一個小色塊,增加了圖標的層次感,相同的角度也增加了圖標的一致性和系列感。
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
          5、粗細統一
          圖標的粗細要統一,這樣圖標就會看起來比較精致,比方說下面的這組圖標,圖標外框線都是用的3px,圖標里面的線都是用的2px,圖標的粗細都保持一樣的粗細規律,這樣的圖標看著也是同樣的美觀和一致。
          一篇文章帶你秒懂圖標設計
           
           
           
           
          6、疏密統一
          下面是一組類似于插畫風格的圖標,圖標的風格是布線比較密集飽滿,而三個圖標都遵循了這樣的原則,看起來出奇的統一,所以它們看起來像是一組成套圖標。
          一篇文章帶你秒懂圖標設計
           
           
           
           
          7、透視統一
          當設計的圖標是立體時,要注意它們的透視要統一,就像下面的這組2.5D圖標,它們的設計透視就保持著高度的一致。
          一篇文章帶你秒懂圖標設計
           
           
           
          8、易識別
          圖標的優劣首先取決于其能否讓用戶一目了然地理解其代表的意義,這是很重要的圖標設計原則。
          下面的這組手機主題圖標,識別性就非常的高,簡潔且好理解。
          一篇文章帶你秒懂圖標設計
           
           
           
           
           
          五、圖標的6大作用
          圖標在界面設計中扮演著至關重要的角色,它們遍布于應用程序的各個角落。無論是導航欄、工具欄還是標簽欄,亦或是首頁、詳情頁、個人中心頁,功能圖標都隨處可見。圖標的主要作用在于傳達信息,相比文字,它們能更直接地傳遞概念,并且能夠為用戶的視覺體驗增添樂趣。
           
          1、提升界面的使用效率
          功能圖標常以簡潔的圖形呈現,它們便于用戶識別和記憶。這種設計讓用戶能夠迅速定位到所需的功能,無需耗費時間閱讀文字說明或瀏覽冗長的菜單選項,大大提升了界面的使用效率。
           
          華為云的這個界面,文字信息很多,因為有了圖標的存在,人們尋找起來特別高效,能高效定位到想要的信息。
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
          2、增加用戶的滿意度
          圖標不僅可以提升界面使用效率,還能提升用戶的體感和滿意度,精美的圖標讓人看著都是賞心悅目的,就像我們在大街上看到一個美女,都忍不住多駐留一伙一樣。
           
          華為云這組精美的圖標動效就給了我很大的視覺享受,圖標設計精致,配色舒適,還有動效,給足了用戶滿足感。
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
          3、減少人們認知的成本
          圖標很多的造型都來源于生活,來源于我們熟悉的事物,在界面中運用我們熟悉的圖形會大大降低人們的認知成本,也會讓更多人產生共鳴,它的傳達作用不受語言和國界的束縛,是一種高效的界面表達語言。
           
          華為云的這組圖標就是運用了人們日常生活中非常熟悉的元素,共鳴感很強,人們學習和理解的成本很低。
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
          4.提升品牌形象
          仔細觀察會發現,在生活中有很多的軟件產品,會把企業的LOGO融入到日常產品的圖標設計中,大大提升了品牌的一個曝光度。
           
          騰訊云就有這樣的小心思,它會把騰訊云LOGO融入到banner圖標設計中,傳遞了信息,同時也加強了品牌的曝光。
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
          5、圖標可以增加界面的豐富度
          有圖標的界面,頁面看起來豐富度更高,層次感更強,信息表達上也會更加的清晰整潔。
           
          360AI辦公這個界面之所以看起來這么豐富,很大原因是在于圖標的應用,界面中有大圖標、小型面圖標,還有線性小圖標,有對比,整個頁面就看起來豐盈了不少。
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
          6、減少界面的枯燥感
          千篇一律的文字,難免會產生枯燥感,讓人不愿多駐留;圖標多彩的配色以及Q萌的造型會讓人心生愉悅。
          佐糖的這個界面,若不是有圖標的潤色,光只有功能點和文字介紹,估計會乏味不少,但是有了多彩圖標的加入,瞬間氛圍感都熱鬧了不少。
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
           
          六、提升圖標設計的4個小技巧
          1、大量臨摹,刻意練習
          任何一項技能的獲得,最開始都離不開臨摹,作為剛接觸UI設計的職場新人,可以先從臨摹入手,先臨摹簡單的,然后循序漸進,臨摹難度大點的,這樣圖標設計能力也會慢慢提升。
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
          2、多積累好的樣本
          想要繪制好看的圖標,首先要見過好看的圖標,所以我們日常要養成多收集好圖標好設計的習慣,這樣當面臨新的需求設計時,也不至于手忙腳亂,不知如何下手。
          一篇文章帶你秒懂圖標設計
           
           
           
           
          3、學會分析
          看到好看的圖標設計時,我們要學會分析,這組圖標好,它好在哪,哪里打動了你,你分析了這些,你自己在設計的時候也會不自覺的運用到其中的智慧和思路,這樣我們就可以隨時原創出符合自己需求的圖標設計來。
          一篇文章帶你秒懂圖標設計
           
           
           
           
          4、明確目標與受眾
          目標受眾不同,他們對圖形的期望也會不一樣,比方說在設計兒童產品界面和B端產品界面時,所用的顏色和形狀都是有考究的。
           
          兒童類產品的圖標設計,形狀會比較圓潤,色彩也比較多彩;但是B端類產品的圖標設計用色就會很克制,形狀也不會過于圓潤。
          一篇文章帶你秒懂圖標設計
           
           
           
           
           
          七、5個圖標網站推薦
          1、Iconfont
          (https://www.iconfont.cn/)
          iconfont是阿里巴巴的圖標庫,應該也是受眾最多的一個圖標下載網站,給我們平時工作提效不少,造福了不少的設計師。
          一篇文章帶你秒懂圖標設計
           
           
           
           
          2、IconPark
          (https://iconpark.oceanengine.com/)
          IconPark是字節跳動旗下的一款圖標下載網站,它可以在線把一個圖標實現多種風格的切換,線性、面線、線面結合,并且線的粗細大小可以調節,非常的方便。
          一篇文章帶你秒懂圖標設計
           
           
           
           
          3、Ikonate
          (
          https://ikonate.com/
          )
          Ikonate是一款可以在線編輯的圖標網站,涵蓋了常用的一些圖標,可以調節線條的粗細和大小,導出的格式是SVG。
          一篇文章帶你秒懂圖標設計
           
           
           
           
          4、Iconfinder
          (https://www.iconfinder.com)
          Iconfinder的優點,我覺得是造型夠豐富,滿足你有時候無法腦補的痛點。
          一篇文章帶你秒懂圖標設計
           
           
           
           
          5、Iconduck
          (https://iconduck.com/)
          Iconduck的優點是有273,858個免費的圖標庫和插畫庫供大家選擇,儲備夠豐富。
          一篇文章帶你秒懂圖標設計
           
           
           
           
           
          八、圖標的命名規范
          圖標一般有四種狀態,正常normal (nor)、高亮highlight (hig)、選中selected (sel)、不可用disable (dis)四種狀態,一個好的命名習慣會給自己的合作搭檔帶來很好的體驗,通常在寫界面的時候,前端都是用英文對元素進行命名的,這里我列舉一下我經常合作同事的一個命名規范,供大家參考:
          模塊-類別-功能-狀態
          例如:Nav_button_message_sel
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
           
          總結:
          在深入探索了圖標設計的豐富世界之后,我相信大家未來能夠根據不同的場合挑選出恰當的圖標風格和樣式。通過持續的總結和歸納,我對圖標設計的理解也變得更加深刻。雖然這份總結可能還有待完善之處,請大家多多海涵,期待在下一篇文章中再次與大家相見。
           
           
           
           
           


          作者:姝斐suphie
          鏈接:https://www.zcool.com.cn/article/ZMTY0MDI2MA==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合