20 世紀末到 21 世紀開始，宣傳品牌與產品的陣地不再局限于印刷品，電視、電臺及現場活動，而是出現了網站，網站可以鏈接更多陌生人，而且沒有時空限制。
1997 年的谷歌網站
美國最火的設計風格只要有人將資料放到網上，遠在日本的一名中學生都可以去學習了解，所以也打破了過去信息差的優勢。本回我們要跟大家聊聊網頁設計的發展，但在展開內容前，要搞清楚一個問題，就是網頁設計屬于平面設計嗎？
國內早在差不多 20 年前，建站公司就開始獨立存在，所以這個問題蠻有爭議，尤其是 UI 設計也很成熟之后，大家更愿意認為此學科是獨立的。
中國建于 1994 年的第一個網頁，主要對外溝通
平面設計的定義不管怎么粉飾，簡單而言就是：以某種目的，將文字、圖像、圖形安排在一起。網頁設計也是如此，唯一區別是網頁具有動態，但這種動態屬于若干個靜態設定的切換關系，其關鍵幀也是平面設計。
2003 年時候的淘寶網
我在國內蠻早就從事網頁設計工作，早年甚至可以自己獨立完成網站，除了頁面設計，還包括套 ASP 程序（Active Server Pages 動態服務器頁面），用 table 布局前端等，當然這些技術如今早已過時。
12 年前史太濃獨立完成的網站
因此這段歷史我就是參與者之一，所以本回不僅是對搜集資料的剪裁分析，還會結合不少自身經歷體驗跟大家分享。
首先我們來簡單回顧下互聯網的發展與網頁設計的演變。
互聯網發展到如今已經像空氣一樣存在，斷網已經如同缺氧那么嚴重，而互聯網的誕生最初跟兩件事情相關。
第一件大家也許比較熟悉，就是在 20 世紀 50 年代末美國國防部高級研究項目總署（the United States Department of Defense，Advanced ResearchProjects Agency，簡稱 ARPA）成立了。
美國國防部高級研究項目總署 logo
其成立的根本原因是冷戰背景下，蘇聯不但先于美國在 1957 年將衛星送上太空，而且世界第一枚多級遠程彈道火箭發射也試驗成功，因此蘇聯宣稱可以將核彈送往地球任何地區。這對美國而言實在太嚇人，所以 ARPA 是一個專門研究國防技術的“事業部”，聚合美國當時最牛的幾百位科學家，研究如何將最先進技術應用到美國國防。
人類第一個衛星由蘇聯在 1957 年發射
由于這些科學家當時分散于全國各地，因為如此厲害的科學家肯定本身有重要事務，而不是放著隨傳隨到，因此大伙無法專門聚在一起專門干這事，而是遠程協作，所以就需要一個有效的遠程溝通工具。
這個工具不能只局限于語言聲音，還要做到資源共享，更關鍵的是要高效安全，信息不可被盜取，當時負責研究此事的人是麻省理工科學家約翰·利克利德(John Licklider)。
麻省理工科學家約翰·利克利德
此處省略一堆過程與專業技術術語，反正如此這般，利克利德因為 ARPA 組織這個溝通交接需求無意中發明出“國際互聯網網絡”（the World Wide Web）。
互聯網時代開啟
事后證明，國不國防是一回事，這才是他們最偉大的發明。這種技術能做到資源共享與防止盜取的一個重要原因是可以將信息分解成“數據包”，將他們發送到目的地后可以重新組裝，也就是“分組路由”的雛形。大家了解到這個程度就可以了，再往深里說意義不大，況且我也說不清楚，
而時間很快去到 1987 年，這是第二件事情，這一年蘋果電腦公司向外界報道了一款可在網絡上尋找資料的軟件，名為“超級文件”（Hypertext）。
蘋果 1987 年的“超級文件”軟件
比如在電腦上打“設計史太濃”就可以將當時整個網絡與此相關的文字內容集中起來（當時網絡上的內容其實非常有限），等于是谷歌百度的前身了。
后來這個軟件進化為“超級媒體”（Hypermedia），除了可以檢索文字，還可以找到圖形、聲音、電影及電視圖像。
蘋果軟件“超級媒體”軟件
再然后，蘋果公司將這種技術跟日本索尼公司發明的 CD-ROM（compact disc read only memory，于 1982 年發明）進行結合，變成“互動光盤”，這種光盤就等于是如今網站的鼻祖版本了。在大致容量 600MGB 的 CD 中，蘋果公司的工作人員往里面塞進了文字、圖形、動畫，而且形成一個復雜的索引架構。
CD-ROM 中的互動界面
這樣一來就形成一個靈活且可互動的內容庫，大家可以根據需要選取想看的部分，有首頁、二級欄目、三級欄目、內容詳情頁等。在此過程中還發明設計出一些后來常見的網站架構邏輯，比如“平行文本”、“多層”“矩陣”“網絡系統”等，這里作很簡單的介紹：
平行文本就是可以在看一篇文字時候可一邊看到它相關的摘要跟縮寫，這等于如今的鼠標經過效果。
網頁中的“鼠標經過”效果
多層就是看一個內容的時候可以看到其它相關部分，等于如今網站中的“相關推薦”。
網頁中的“相關推薦”效果
矩陣就是將資料布局到一個網格中方便大家查詢，等于現在的產品系統，新聞系統一類。
網頁中的“產品系統”效果
網絡系統就是可以聯系外部信息，其實就等于友情鏈接一類了。
當時間去到 1991 年，美國政府開始投入資金將“互聯網”引入公共學校，而經過 6 年，世界上就有 3000 萬個網絡用戶，2000 年左右，美國就有三分之一的家庭實現了聯網。有流量就有商機，于是就有人將“互動光盤”這樣的呈現方式搬到互聯網上變成網站，變成一種宣傳展示的渠道，不亦樂乎。
90 年代可口可樂的官網
所以最初的“互動光盤”設計其實就等于第一代網頁設計。
1994 年時候，中國有個人因為公務出差去美國見證過互聯網的神奇，回國之后辭職，在 1998 年創立了一個如今市值 1.8 萬億的公司—阿里巴巴，這人就是馬云。
阿里巴巴早期的網頁設計樣式
20 世紀 90 年代恰好是網站建設數量急劇暴增的時候，充滿了商機，大家可以理解為近幾年短視頻暴增一樣，根據回顧統計，在 1997 年時候僅僅一年美國本土就新增了 80 萬個新網頁。
所以用“網頁”一詞是因為最初蠻多網站都是靜態，網站后臺是后來慢慢才發展形成。
1997 年時候的麥當勞網站設計
但網頁設計最初的暴增還沒有直接為平面設計師創造崗位，因為第一代網頁設計師其實大部分由程序員轉型而來。后來不斷發展競爭升級才將程序、前端、網頁設計及推廣優化這樣的崗位分來，以便有更專業的表現。
我在 2010 年時候開始從事網頁設計，恰好是一個將網站建設不同崗位獨立出來的時代。當時我所在公司中企動力屬于國內最大型建站公司，大部分老同事都曾經是程序前端設計甚至推廣這樣一條龍為客戶提供服務。
史太濃在 2010 年前后的網頁設計
他們本質上就是從一名開發人員入行，所以他們會從實現效果端來規劃設計，跟后來網頁設計崗獨立后完全不同。蠻多網頁設計師其實根本不管程序實現問題，也因此產生出更多更好的視覺效果，反推程序開發與前端制作的進步。當時在公司經常見到的就是網頁設計跟前端或者開發同事“干架”，爭論要點就是很多效果程序根本做不出來。
史太濃在 2010 年前后的網頁設計
這樣的事情其實一直在全世界發生，所以網站制作技術也是以飛一般的速度在發展。比如我剛剛學會 Table 布局不久，css+div 布局就成主流了，再然后 HTML+css+js 也成熟起來，而程序開發端則是 asp 到 asp·net 到 php 到 java 等不同開發語言在不斷進化。
史太濃在 2010 年前后的網頁設計
這樣的變化結果就是不斷優化網頁設計的表現效果。
那時候我們往往在掌握一門自認為很牛的必殺技后不到兩年就也許會過時，最典型例子莫過于 Flash 的“死亡”。2010 年前后，懂得用 fash 建站的人非常吃香，因為人才稀缺，收入可以是我們的 2-3 倍，那時候最流行就是用 flash 做所謂的“體驗館”。
全 Flash 網站
“體驗館”的大致效果就是能在網站場景中做一些換部件，換顏色，或者點擊指引箭頭切換畫面等操作。印象中當時有一個奢侈品平臺站就是純 flash 網站，開發制作費用高達 300 多萬。
但好景不長，因為智能手機的崛起與 4G 通信技術的發展，互聯網的主陣地慢慢往移動端遷移，而智能手機中的瀏覽器是明確不支持 flash 組件的。所以很快 flash 就跌落神壇，而我們這一代網頁設計從業者可以說見證了全過程。
全 Flash 網站
當時身邊就有同事因為精通 flash 被挖去甲方企業開發純 flash 的眼鏡商城，據說后來項目就沒發展起來。
說到商城，網頁設計還有一個重要的主題變化，就是從企業網站到平臺網站到電子商城再到手機網站，App 應用，公眾號，小程序這樣的不斷切換。到了移動端其實網頁設計就被“UI 設計”（User Interface 用戶界面）這樣更專業化的稱謂取代。
史太濃 2013 年前后的 UI 設計
因為革命性的屏幕觸摸技術的誕生，很多網站本身就可以通過觸屏控制，所以從定義上來說，UI 設計可以說包含了網頁設計。
史太濃 2013 年前后的網頁設計
隨著移動互聯網的不斷發展其實也拔高了 UI 設計門檻，因為要考慮很多交互體驗問題與技術規格標準，有點像當時烏爾姆學院做產品設計那一套，有很多理科屬性的知識融入進來。
所以網頁設計經過僅僅 30 年的發展，就走向細分領域的拆解，分裂出企業網站設計（偏向品牌與廣告）、電商設計（偏向營銷）跟移動端設計（偏向交互體驗）。
史太濃 2018 年前后的電商網站設計
但不管如何，這個過程中平面設計的本質屬性仍然沒變，只是要解決的問題更多元化，更具體了。
根據歷史紀錄，美國的設計師杰西卡·哈芳德（JessicaHelfand）是較早以平面設計師身份參與到網頁設計中的，比如 90 年代她為美國“發現頻道”設計了網站。
美國“發現頻道”90 年代的網站
哈芳德生于 1960 年，目前還活躍于設計圈，她也許是最有資格感嘆互聯網設計形式劇烈變化的人之一。
杰西卡·哈芳德
本期內容沒有談及太多具體人物及作品，因為在有限篇幅里本期內容已經高度濃縮，更多是在給大家整理一個框架。
關于網頁設計發展的經歷，也歡迎大家根據自己的體會參與到討論中，說出你們的故事。
本期故事講到這里，感謝各位，下期再會！
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
網站設計之一：怒馬！超實用的單頁網站設計指南（附大量資源）
網站設計之二：旅游網站設計分析！教你10個小技巧
網站設計之三：實例教學！如何將極簡風格的原則運用到網站設計中？
網站設計之四：另辟蹊徑談創新！提升網站設計形式的幾種方法
網站設計之五：經驗分享：移動網站設計應該避免的“七宗罪”
網站設計之六：4000 字快速回顧20多年的網頁設計發展史！
網站設計之七：騰訊出品！2021-2022設計趨勢報告：動態篇
網站設計之八：為什么千萬別隨便學國外的極簡設計？
網站設計之九：高手出品！2020~2021年UI界面設計趨勢
網站設計之十：如何做好網頁頭部內容設計？來看 58 設計師的總結！
移動端網頁在今天雖然已經變得越來越重要，但我們在日常使用中依然會遇到一些糟糕的頁面。近日，開發者Umer Mansoor就總結了開發移動網頁時應該避免的“七宗罪”。
在移動端方寸地，有細節才能抓住用戶，可以參閱這《60個以小見大的設計細節！》，保證會學到很多。還有，記得不要犯《ANDROID應用中十大常見UX錯誤》
眾所周知網頁加載速度是網站性能的一項重要衡量指標，畢竟很多時候用戶并不總是在WiFi狀態下瀏覽網頁，所以加載緩慢無疑是移動頁面七宗罪之首。移動網頁在設計時應該避免集成過多高分辨率的圖片以及累贅的腳本文件。
當網頁映入眼前，凌亂的文字排版當然也是訪客難以忍受的。就像人們在現實生活中傾向于和思路清晰的人交流一樣，當用戶和網頁“交流”時也希望能快速找到自己需要的信息。所以雜亂的排版同樣是移動網頁應該避免的設計誤區之一。比如Eurosmartz的移動版完全不像是為移動設備設計的網頁。
隨著移動設備性能的提升，很多移動網頁設計者傾向于在移動端堆疊更多的內容，這時導航功能就變得必不可少了?？芍T多移動頁面在設計導航功能時又沒有足夠重視其可操控性，比如按鈕太過緊密、鏈接間距過小、菜單過于隱蔽等等。各種社交網站的點贊功能尤其容易在滑動網頁時誤點擊。蹩腳的導航無疑嚴重影響了用戶和網頁“互動”的過程，以至于有些用戶要“抱怨”自己手指太肥。
某些時候我們可能會遇到一些桌面端和移動端頁面風格差異巨大的站點，比如Toybox。一些對此站點不熟悉的用戶在從Toybox的桌面端跳轉到移動端時，也許很難意識到這是同一個網站的兩個不同版本。雖然Toybox桌面端的動態效果挺好，但這種會給用戶造成極大困惑的設計明顯難以得到用戶的喜愛。
網頁彈窗在桌面端已經令用戶厭煩不已，可不幸的是一些移動端的網頁設計者還是把其帶到了移動頁面上。毫無疑問由于移動設備屏幕尺寸的限制在移動端彈窗明顯會有更好的傳播效果，但無疑也會遭受到用戶更多的厭惡。
當用戶使用iPad訪問某一個網站時將其自動重定向到適配iPad的版本，這聽上去的確是一個好想法，可在實際操作中一樣會遇到問題。比如當一個網站的移動版由于以上的種種問題讓用戶感到難以接受而想切換回桌面版時，自動重定向基本上讓用戶陷入了死循環。此外由于重定向而導致瀏覽器無法打開網頁的現象也時常出現。所以在使用自動重定向功能時應該三思而行。
作為用戶當然可以理解網頁開發者在頁面上設置一些廣告，可橫幅形式的廣告無疑應該被歸為“七宗罪”之一。從互聯網的發展歷程來看，橫幅廣告的思維好像還停留在1999年，可現在已經是2013年末尾了。
總結看來，Umer Mansoor列舉了頁面加載緩慢、排版凌亂、導航功能不易使用、桌面端和移動端頁面風格差異巨大、彈窗、自動重定向、橫幅廣告共七種讓移動頁面體驗糟糕的“罪惡”。如果自己設計的頁面中包含這其中的某些項，也許是時候考慮做一些改進了。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
網站設計之一：怒馬！超實用的單頁網站設計指南（附大量資源）
網站設計之二：旅游網站設計分析！教你10個小技巧
網站設計之三：實例教學！如何將極簡風格的原則運用到網站設計中？
網站設計之四：另辟蹊徑談創新！提升網站設計形式的幾種方法
網站設計之五：經驗分享：移動網站設計應該避免的“七宗罪”
網站設計之六：4000 字快速回顧20多年的網頁設計發展史！
網站設計之七：騰訊出品！2021-2022設計趨勢報告：動態篇
網站設計之八：為什么千萬別隨便學國外的極簡設計？
網站設計之九：高手出品！2020~2021年UI界面設計趨勢
網站設計之十：如何做好網頁頭部內容設計？來看 58 設計師的總結！
提到網頁設計，最先想到的是當今主流的韓國設計和扁平化設計，當然個性化排版、視頻代替文本、全屏大視野、滾動視差、多平臺全適應等設計形式已經進入了我們的視野。西方簡單、功能性的美學精神”少即是多”這一設計理念攻占了我們的大腦，很多時候，在開始做設計之前腦子里會來回浮現這些風格的設計。那么，怎樣在主流設計方式中做出有自己特色的網站呢？我們從以下幾點介紹在大環境下提升網站設計形式的方法。
那么，怎樣在主流設計方式中作出自己的特色呢？我們從以下幾點介紹些提升網站設計形式的方法：
在眾多的設計師追逐主流風格的同時，民族文化感覺的設計越來越少，不光在國內，在世界各地都出現了這樣的情況。當然不可否認還有很多設計師在為民族設計而努力。下面這幾個站點雖然只有簡單的設計和動態效果，但是卻有一種非常淳樸的民族風格，這也是最吸引人的地方，每個細節都流露出民族的特點和氣氛。不是只有文化性質的網站才能賦予文化設計風格，在商業產品類型的設計推廣中同樣適用。
日本眼藥水網站，將現代工業社會的產物與傳統鬼神文化中的五種妖怪以卷軸、插畫傳統形式展示，與漫天遍地的明星代言廣告形成對比，同樣是眼干、眼澀、眼疲勞，同樣是以辦公室、上班族為消費群，文化創意上的突破使人眼前一亮。
(小編按：那個妹子是我的女神橫山美雪，嗎？)和風服裝店，日本特色的風鈴、簡約的插畫，”和風”，大和民族追求與自然的和諧之美，從這個服裝網站上我們可以看到日本設計文化體現了對自然的尊重，反映了樸素美學的內斂性格。
緬甸傳統舞蹈音樂合奏網站，緬甸古代戲劇舞蹈，是從緬甸傀儡戲、古典戲劇及阿迎舞等古典藝術中產生的。傀儡戲中的一些節目和各種傀儡角色的不同的舞蹈動作被大量移植到現代緬甸舞中?？芪柚小笨懿健?、”傀儡爬跳”等成為現代緬甸舞的基本動作，是文化多樣性的輝煌繼承。黑白圖片和大面積留白的海報設計形式，突出舞蹈者主體，用在網站上更顯神秘。
http://www.itwillbeastounding.com/
俄羅斯莫斯科大劇院是莫斯科的地標性建筑之一，是莫斯科有名的芭蕾舞與歌劇劇院；是俄羅斯歷史最悠久的劇院，享譽天下，是世界上最著名的劇院之一。它不僅繼承了歐洲芭蕾的歷史傳統，更重要的是，在俄羅斯豐富的民族音樂與舞蹈的沃土上，建立和發展了自己的芭蕾體系。將沙俄古典風格融匯于設計版塊中，同樣大量留白處理給了圖片展示更多的空間。
大面積整站或局部性使用高清圖片，在之前設計分享中我們見到了很多案例，這里介紹幾個日本以圖片展示為主的網站，精致的圖片不需要過多的裝飾。
坂本龍一是日本當代最讓人尊崇的音樂家之一，音樂領域涉獵甚廣，在先鋒電子樂領域擁有特殊地位。代表作有《Merry Christmas Mr. Lawrence》《末代皇帝》《遮蔽的天空》《桃太郎》《高跟鞋》等，為1992年巴塞羅那奧運會開幕式譜曲并擔任指揮……坂本龍一成為”大眾明星”的原因，一方面在于他個人對于電子、搖滾、爵士等多重音樂風格極具靈感的把握；另一方面則在于他能在商業、藝術和實驗之間找到平衡點，作出既有實驗意義又有動聽旋律的作品。
http://moonlinx.jp/special_issue/003/
日本設計強調材料的內在之美，注重與大自然的和諧，珍惜自然材質，這與日本自然資源相對稀缺有很大的關系。日式風格中，回歸自然是最大的特色，推崇貼近自然、強調自然主義，讓使用者有置身自然的感覺。用產品的工藝制作圖片作為網站的主體和背景，拉近了觀者與產品的距離。
http://www.ishiyamasenko.co.jp/
傳統工藝美妝店鋪，單從cover引導頁的圖片就能看出該店鋪的賣點。特色產品圖加上柔美的動態散花效果，為網站加分，導航中加入商城外鏈可直接在線購物，利于用戶體驗。
日本聯合新聞社，社內的場景圖片很好的展示要表達的主旨。
街區是一個城市的重要標志性特色，將這樣雜亂無章的舊街道作為網站通欄頭圖，配合簡介的形式設計，也能很出彩。
美寶蓮日本網站，將實體店作為網站背景，搭建成實景的巨幅海報展板，這種形式是否比存粹的明星代言更接地氣些？！
對比下面兩個日韓服飾類網站，可以看出日本網站在圖片選擇上更注重產品本身，極具質感和張力的圖片真實樸素，力求展示產品與人的關系。而韓國則更注重整體的氛圍的搭配，通過環境的營造來提升產品的品味和檔次，產品只是搭建系統中的一部分。
圖素質量低是我們在設計過程中經常遇到的情況，我們通常用到最多的方法莫過于高斯模糊、柔光、濾色、添加紋理質感，將圖片處理成做舊、仿古、年代感、單色……又會是什么效果呢？！
箔工藝，金銀箔具有很好的延展性，將金銀打展成薄膜狀，與絹結合，應用于古代服飾中。此文化再京都有四百余年的歷史，現在主要用于文物修復。取箔工藝品的一個局部，重新組合作為整張背景，貼片處理的文字與背景的融合更顯古代文化的精妙。
http://www.hiroto-rakusho.com/
人物素材粗糙的情況下，采用水彩的濾鏡效果，背景加入點狀網格，極具形勢感的箭頭做引導，個性十足。
全日本劍道聯合會，網站采用時間軸展示的形式，從1950－2000年每一期獲勝者的照片和信息，可以看出由于70年代以前都是黑白照片且像素低，和近期的彩色照片反差較大，所以網站設計成了古樸做舊的年代感風格，加入很多早期照片中的截圖作為插畫元素，確保了風格統一。
http://www.kendo.or.jp/champ/#/about
Daum是韓國最大的門戶網站之一，以郵件和社區產品為核心，是韓國第一個電子郵件服務網站Hanmail的前身。牛仔藍單色照片處理更像電影和動漫場景。
也有整體黑白加入局部彩色色的案例，將復雜圖片簡化處理，對于簡潔的頁面設計來說，這是個不錯的方法。每個版塊都是黑白照片做背景，文字做JS動態移入效果，在圖片的某個元素上加入VI主體顏色，故事感很強。
手繪、矢量圖形設計的圖形場景環境，用在食品、旅游、地圖、嬰幼兒等方向的設計上更容易拉近消費者，給人放松愉悅的心情。相比圖文混排更貼近生活。
狗糧推廣網站，將網站設計成寵物樂園，各個品種的狗狗們都有自己的一段視頻，內容是狗狗們對幾種產品的喜好對比。
http://www.solvida.jp/solpa/#/MainPage/001
企劃創意公司，技術上只是一個簡單的FLASH站，但空間跨越性思維設計卻給這個網站帶來了不凡的效果。由局部的空間延伸出各種異空間的交匯，加入互動效果而引發的更多驚喜也進一步提升了用戶參與度。
用3D拼圖建造起一個小型城市，4個建筑代表網站要展示的4個心理學的具體分類，建筑物夸張的擬人化動作實現頁面跳轉。
http://www.soc.nara-u.ac.jp/kokoro/
日本兒童專用雞蛋，此網站將所有產品相關內容裝進雞蛋中，食用后產生的剩余物可大變身繼續用于其它物品的生產，循環利用避免環境污染，所以在首頁展示上才會有類似瀑布流的大量周邊產品展示。網站首頁是自動向下播放展示的瀑布流效果，hover及跳轉都伴隨非常可愛的音樂和動態，恰當音樂的播放和觸碰hover的小驚喜也會給網站增添色彩。
日本山形放送局的地區地形圖，大家都看過現實版的景點手繪地圖，該網站也用了這種形式。比較有意思的是他的功能非常強大，是一個可放大縮小的真實版地圖，沒有跳轉，完整的手繪google地形圖。以小青蛙作為代言人對每個景區的優勢作手繪圖形注解，以當前彈出的形式展示該地的歷史、自然、觀光、社會、祭祀、美食、傳統等信息的詳細圖文、視頻解析。
http://www.nhk.or.jp/yamagata/mitekero/
九州熊本天草村,用動態圖形化完整的對天草村進行了設計演繹，重要景點默認做了動態處理，跳轉后都是另一個完整的實景矢量圖。對景點中的標志性小建筑做了頁面彈出實景詳細講解。
這種形式在新加坡兒童樂園的設計中也同樣得到了使用。
設計風格也是體現一個國家文化的重要方式，嚴寒漫長的冬季成為俄羅斯的標志，在頁面上打造一個同色系的冰雪世界，反而使彩色的主體信息更加突出。
一個優秀的網站它的交互性也非常重要，擁有好的交互性可以讓瀏覽者有著更高的參與感，并且也能增大網站自身傳播效果，還可以提高用戶對自己的網站的依賴性和忠誠度。
Panasonic剃須刀產品JS展示站，設計形式與松下電子實現”星羅棋布的網絡社會”和”與地球環境共存”的理想呼應，整站的背景都是由動線點組成的動態圖形面拼合而成，圖片和文字的展示停留在這星羅棋布的空間組合中。此時網站要表達的不僅是展示產品，還有松下文化。
http://panasonic.jp/shaver/lamdash/dna/index.html
東京交響樂團，該網站對用戶的參與性做到了極致，從網站主內容上沒有關于東京交響樂團的圖片文字信息，用戶可以在頁面專屬音樂鍵盤提示的情況下，用獨創音樂的新穎形式創作屬于自己的個性音樂，并對音樂逐幀做了記錄，可以返回欣賞創作成果，并分享到各網站。
SPECIAL-T 綠茶網站，玩過網游的同學們都知道游戲中做任務有地圖尋路功能，該網站采用了這個原理，在大海中建立類似于西游記的龍宮，用戶在沒有任何導視的情況下，360度無死角在海洋里自由探尋，最終的成果便是在一段時間的遨游后到達網站的終點產品引導頁，闡釋special的感受。
http://ogreen.special-t.com/en/
如果你想要一種優雅而直觀的產品展示方式，全屏視頻網站是一個不錯的選擇。全屏視頻網站能一瞬間點燃人們的好奇心，當然也可能馬上讓訪客失去興趣，這都取決于你是否能夠駕馭這類高大上的設計風格。
日本福祉大學，校園內外學生學習、活動氛圍的場景視頻作為背景播放展示，視頻上一層則是手動切換的內容介紹字幕，一個大學的網站更像是一個微電影展示。
http://www.n-fukushi.ac.jp/lifestyle/
Mikihiko Kyobashi 海底攝影記錄展示站，整站視頻展示配上海洋真實的聲音。透過視頻看到的海洋不是一汪死水，陽光穿透海面，碧海藍天，比靜態的照片更能展示生命的氣息。
bc服裝網站，暗色的動態視頻做背景，與前層簡單的圖文排版形成反差，圖片hover的3D立體效果令人耳目一新。
圖片與視頻的混排切換展示，拉伸后展開整站播放效果。
http://getgoingtoday.org/beyond
日清食品，微距拍攝的視頻，用時間倒數計時的方式，記錄在這一碗日清方便面泡好的3分鐘內，世界各國家不同膚色年齡的人群品嘗日清食品的狀態緩慢特寫，加入了用各國語言描述倒數計時的聲音，視頻中間穿插有和日清logo呼應的裝飾語言，隱藏在頁面下方的時間軸可以找到每一分每一秒的畫面禎，時間可自行選擇切換到想要的那一幀。
以上五點都是當下主流設計中另辟蹊徑找創意，簡單五點很難將所有好的創意都涵蓋在內，除此之外大家肯定也有更好更多的想法。網頁設計總是立足于瀏覽者的審美、文化，以及信息傳播的習慣、方式，還有網頁開發技術的進步。對于絕大部份網站來說，沒有強大的專業力量去研究用戶新的習慣和需求，也不可能開發出新的技術功能，只能在一些大型的網站中窺見一些發展的趨勢，再從中找到自身可借鑒的地方。這種借鑒如果成為普遍性，那我們也很難在互聯網的大潮中有自己的一席之地。網頁設計已逐漸往多元化方向發展，更好的創意、更新的想法都來源于我們真實的生活感受，想要我們的網站變得更強大、擁有更好的用戶體驗，無可厚非，我們應該做的是大膽、大步地去嘗試。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
網站設計之一：怒馬！超實用的單頁網站設計指南（附大量資源）
網站設計之二：旅游網站設計分析！教你10個小技巧
網站設計之三：實例教學！如何將極簡風格的原則運用到網站設計中？
網站設計之四：另辟蹊徑談創新！提升網站設計形式的幾種方法
網站設計之五：經驗分享：移動網站設計應該避免的“七宗罪”
網站設計之六：4000 字快速回顧20多年的網頁設計發展史！
網站設計之七：騰訊出品！2021-2022設計趨勢報告：動態篇
網站設計之八：為什么千萬別隨便學國外的極簡設計？
網站設計之九：高手出品！2020~2021年UI界面設計趨勢
網站設計之十：如何做好網頁頭部內容設計？來看 58 設計師的總結！
大家好，我是 Clippp。今天為大家分享的是「菜單導航」。一個簡單的漢堡菜單就可以包括多種不同的樣式，可能有的樣式甚至沒有官方的名稱，但因為樣式的差異在功能上這些菜單也會出現差異性。
我們可以通過分析這些樣式，來思考不同的樣式代表著怎樣的設計含義和設計目的，不能因為簡單常見而忽視了功能的內核。
關鍵詞：橫條、多個菜單選項
這個圖標的樣式簡潔易懂，通常位于網頁和 App 的上下角，用來告知用戶這個按鈕之外還有更多內容可以探索。
當產品有多個菜單選項時，考慮使用漢堡圖標來顯示，但盡可能避免在桌面視圖中使用。
關鍵詞：垂直、內嵌菜單
通常位于屏幕或窗口的右上角或頂部，是用于打開帶有附加選項的圖標，打開的內容往往是一個較小的內嵌菜單而不是整個全新的頁面。
關鍵詞：水平、內嵌菜單、web
水平三點式菜單同樣常位于屏幕或窗口的右上角，用于打開菜單或顯示相關項的操作。
因為圖標樣式是水平的，所以更容易在 web 上或者在表格等水平方向中使用。
關鍵詞：子分類、子功能
九宮格菜單通常用于打開同一產品中包含不同子產品或子功能，可以在它們之間快速切換，此圖標常位于產品主頁的右上角。
關鍵詞：過濾、排序
過濾式菜單由三行不同長度的線段水平疊放而成，是最廣泛使用的過濾符號?？梢詫⑦^濾式菜單與“排序方式”選項結合使用，或者與全局過濾器結合使用。
關鍵詞：樣式特殊、時尚感更強
作為漢堡圖標的替代品，與顯示列表菜單的目的相同嗎，但是這些樣式我們平常見的可能會比較少，更常用在充滿現代感、時尚感和藝術感的網站上。
不同的樣式可能代表著截然不同的設計目的，常思考這些小而精的細節，是保證產品體驗提升的關鍵。
慢來比較快，如覺得有幫助，請點個贊，謝謝！
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
金剛區是什么，想必大家都有所了解。
沒有的話看這張圖就懂了：
圖片來源：淘寶首頁
我在微信上搜了一下，發現大部分討論金剛區設計的文章，都是在講怎么畫圖標。
但是我自己在使用各大 APP 的過程中，發現很多金剛區并不是那么好用，而且這跟圖標好不好看無關。
金剛區設計不好，會對我的使用造成直接影響：
我今天就來總結一下，對于金剛區設計的交互/體驗思考：
金剛區里有多少項比較合適？
這其實是米勒法則（Miller’s Role）的典型運用了。
如果你還不太了解米勒法則，看看下面這張圖里的詞語：
現在，半分鐘回憶一下，你記住了多少個？
……
大部分人能記住 5~9 個。
米勒的研究發現，普通人的工作記憶（Working Memory）只有 7±2 個信息塊。
如果給的信息超出了這個數字，大部分人也只能記住這么多。
所以說，金剛區里的圖標數量，最好也維持在這個數，否則就是對用戶的記憶能力要求過高了。
通常來，4 個圖標很輕松，說 6 個圖標是比較理想的，8~9 個就有點吃力了，10 個就超綱了。
例如支付寶這個就過分了，好在這只是工具類產品，復雜一點也沒辦法：
人們在看閱讀文字時，視線軌跡是之字形：
人們在閱讀表格時，視線軌跡是除草機形：
上圖來源：這樣設計表格，看著真難受！
雖然金剛區的眼動圖我沒有，但第一步肯定是從左上角開始往右掃。
所以，用戶最有可能使用的圖標，應該從左到右排在最上面一行，最不常用的可以排在右下角。
例如美團外賣這個設計，看著就挺合理。不但把重要內容放在第一行，而且還做了很大的視覺區分：
不過一些不愁流量的 APP 會選擇把黃金位置用做商業宣傳，難免損失點易用性。
1. 仿真圖標
如果追求質感，多半會使用物品本身的顏色，例如每日優鮮這個：
這種圖標就沒什么顏色好討論了，注意一下整體和諧就好。
2. 數量較少
如果圖標數量不多可以使用一個顏色，那么顏色上，同樣沒什么好討論的。
例如 QQ 音樂：
3. 數量適中
如果圖標數量在 7 個左右或以內，那么可以每種顏色的圖標都來一個，這樣用戶也能記住大概什么顏色代表什么。
例如京東這樣：
4. 數量很多
圖標數量遠超過 7 時，就不可能每種顏色來一個了，否則顏色都不夠用了。
如果還是想要劃分顏色，可以將類型作為依據，這樣用戶在尋找圖標時會比較有方向。
當然，其實也可以簡單點，干脆都一個顏色，例如聯通手機營業廳：
1. 底框
一些產品為了統一感，會用圓圈或者圓角矩形，把所有圖標都框起來。
這樣視覺上是好處理了，但交互上很不推薦，因為會大大降低圖標的識別度，乍眼一看都長一樣。
這種底框在主流產品里已經很少見了，不過這么做的設計師還是不少：
這種圖標數量少，有顏色區分還好，如果數量多又一個顏色，那就很難辨認了。
縱觀常見的金剛區圖標，通常不外乎四種樣式：線條、形狀、2D、3D、仿真。
聯通手機營業廳
QQ 音樂
京東
美團外賣
每日優鮮
任何樣式都能讓用戶識別和記憶，但是不同的樣式給人的感官不同。
真實性越高的視覺樣式，就越容易給人高級的感覺；相反真實性越低的視覺樣式，越容易給人簡單邊界的感覺。
我發現做設計時，從不同的角度會帶來截然不同的思考。
今天這篇分析，算是一個以交互體驗為主，融合了一些視覺角度，希望帶給大家一些靈感~
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
圖標定制設計之一：6大章節！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規范
圖標定制設計之九：不止畫圖標！5 個金剛區的交互設計思考
本文從圖標類型、系統圖標的尺寸和網格、圖標的繪制、導出和命名等6個方面，幫你快速掌握圖標設計規范。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
圖標定制設計之一：6大章節！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規范
圖標定制設計之九：不止畫圖標！5 個金剛區的交互設計思考
在內容為主的用戶界面設計上，圖標起到了降低理解成本、高效傳遞信息等舉足輕重的作用。隨著矢量格式與高分屏的普及，對圖標字體的精細度與視覺匹配度也有了更高的要求，這對設計師來說也是一個不小的考驗。本篇將介紹目前業界優秀的圖標案例，并以日常圖標繪制中遇到的問題，解析背后原理給出對應解法。
注：以下部分示例僅為個人處理方法，僅供參考。
本期提綱：
“SF Symbols” 是蘋果為 San Francisco 系統字體設計的一套內置圖標合集，每個符號圖形都能與所有磅重、大小的文本進行自動對齊，達到與字體無縫結合的效果。目前已更新到 3.0 版本，根據應用界面中各種使用、展示場景，默認提供 3,200 個符號各自擁有 9 種磅重，設計師可根據官方提供的合集庫直接引用到設計稿中，或使用符號模板來添加自定義圖標。
1. 多種磅重
“SF Symbols” 擁有與 “San Francisco” 字體相呼應的 9 種字重，在字母參考線（字母頂線與基線）下支持 Small、Medium 和 Large 3 種顯示比例，總計 27 種樣式，以達到與各個字形最佳的匹配效果。
圖形磅重與比例參考表
圖形比例與字形排列參考
2. 字形參照定位
以字體設計方式處理圖形的垂直定位，在設計圖標時需要將圖形中心部分放置在模板基線以上的位置，系統讀取時將根據圖形基線計算圖形的 baselineOffsetFromBottom（基線與底邊的偏移值）進行垂直定位，使圖形與文本的基線一致，達到圖形和文本水平視覺對齊。
圖形參考線
相同基線下對齊效果，使圖形重心處于小寫字母區域
常用的塊級元素對齊效果，重心稍微偏下
3. 多色應用
通過讀取圖形內的分層信息，可賦予每個分層不同的渲染模式達到更加豐富的表現形式。
不同渲染模式下的多色效果
4. 圖形本地化適配
除磅重與比例以外，當圖形出現需要使用文字表達含義時，針對特定語言與書寫順序 “SF Symbols” 提供了不同的適配圖形，包含拉丁語、阿拉伯語、希伯來語、印地語、泰語、中文、日語和韓語等語言類型與 LTR/RTL（從左到右、從右到左）兩種布局。
隨著像 Retina 這樣的高分屏與 SVG、PDF 等矢量格式在設備上普及，文字和圖標在精細度與匹配度上有了更多的追求，一般應用會根據常用的字體磅重去定義默認圖標的粗細，因此我們會看到一些圖標出現非整數規格的情況，這對新人來說會造成一定的設計門檻。
1. 微信的圖標規格
以微信客戶端為例，需要在 24*24pt 的網格中默認使用 1.2pt 線條進行繪制，同時在圖形自然拐角處需要保持外圓內方的樣式。
2. 為什么會有設計門檻
對新手來說在 Sketch、Figma 或 Photoshop 中使用描邊設計非整數規格圖標可以是噩夢，即便有經驗的設計師在繪制過程中也會因為計算路徑余數而影響設計效率，以 Sketch 為例路徑屬性中雖然支持像素對齊、半像素對齊和不對齊像素三種模式，但如果需要繪制 1.2x 描邊時，我們只能使用不對齊像素的模式再計算路徑落點位置，因此需要不斷計算落點是否處于 0.2、0.8、0.2……
Sketch 的對齊模式
3. 建議方法：倍化繪制
所以在處理非整數圖標時我們不妨把畫板等比放大 5 倍，可以獲得一個 120*120pt 的新畫板同時描邊放大為 6pt，這時候我們只需要使用像素對齊模式直接進行繪制即可，同理其他數值規格我們也可以使用倍化調整，使圖形在畫板內變成整數，最直接方式是小數點后奇偶數進行判斷，奇數放大 10 倍，偶數放大 5 倍。輸出資源時如果使用 svg 這類矢量格式可根據業務需要決定是否縮放輸出，而位圖則根據所需尺寸進行倍數縮放再輸出。
4. 工具使用差異
使用 Sketch 對圖形進行倍化后繪制和調整已經友好很多了，但是其實 Sketch 中還有不少繪制效率工具是沒有放在默認工具欄里的，這里可以根據需要使用自定義工具欄把這些工具外置。
Sketch 中的路徑工具
Figma 相對而言路徑編輯功能比較簡單，但依賴社區豐富的插件也能達到對應的效果，這里推薦一些常用的矢量圖形處理插件。
雖然目前 sketch 的圖形繪制功能已經很完善了，但依然存在一些限制，如路徑斷開后無法直接重新連接，特定角度繪制效率低等問題，從而影響設計的精確度和效率。這時我們可以把目光轉移到一個老牌的矢量工具上“ Adobe Illustrator ”（后面簡稱 AI ），AI 中的隔離模式、方向滑移延伸和自定義網格本身非常適合矢量繪圖，用來繪制圖標也十分便利。
Sketch 與 AI 的對比，雖不公平但也是事實……
使用 AI 的網格系統，我們可以設定符合業務需要的對齊方式、鍵盤增量和網絡間隔，且 AI 生成的路徑是支持在 Sketch 或其他矢量工具中復制粘貼的。
適配自身規格的網格設置
使用 AI 自帶的角度旋轉功能時設置圖形副本數量，保證了每個圖形角度和方向都是準確的。
使用 AI 繪制實例演示
1. 等比分布
當我們需要繪制等比放大或擴散圖形時，會遇到一種情況：等邊圖形或圓形可以直接使用工具進行等比縮放，但長矩形或者不規則圖形等比縮放后會出現部分點、線不等比，這其實是一種理解上的誤區，在把不規則圖形等比放大時，我們需要的是點、線距離圖形中心（非圖層中心，而是幾何中心）做等距偏移的效果，而工具一般會按圖層中心來進行縮放，可能會造成效果上的誤差。
常見圖形在不同處理方式上產生的差異
清楚原因與差異后，只需選擇對應偏移功能即可達到理想效果，等距偏移一般矢量工具都會自帶，只是就使用習慣而言沒有常用等比縮放容易理解與上手。以 AI 與 Sketch 為例，都能在路徑、對象菜單中找到，且 AI 額外支持偏移后拐角屬性設置。
AI 與 Sketch 下通過路徑偏移獲得等距縮放效果
2. 骨架與輸出路徑
日常涉及圖標繪制的需求，建議可以先使用描邊進行繪制，可以理解為把路徑當做圖形的骨架，再利用工具的描邊樣式塑造磅重拐角，這樣我們可以有效的保留圖形最大的可塑性和調整空間。
但同時需要注意，圖標在輸出前需要完全轉化為輪廓以及封閉路徑，以保證系統渲染模式的一致，并且這是所有平臺都要求的。
SF Symbols 對路徑輪廓化的要求
1. 面積配比
對應不同的業務，有時會基于用戶對事物的認知，直接引用該事物作為基礎圖形進行圖標繪制。因此會出現一些穩定性弱、長寬比例相差較大或形體單薄的圖形，而我們會遵循已有的標準圖標柵格進行繪制，這樣會導致部分特征過于明顯的圖形在顯示面積上出現視覺誤差與中心渾濁。情況類似中文字體中出現的中宮、字懷（中宮：漢字重心區域范圍、字懷：筆畫之間的留白范圍）緊湊。
按標準柵格繪制特征明顯的圖形
這時可以適當把圖形延伸部分進行細微的外擴處理，使圖形中心部分視覺上更加舒展。
對圖形延伸部分外擴微調
2. 視覺對齊
通常使用工具的對齊功能實現圖形間的相對關系是合理的，但我們在處理多邊形時就會遇到 “已經用工具居中了，但看起來卻沒居中” 這種問題，這種現象一般是由于不同多邊形的面積與寬高帶來的視覺差造成的。
奇怪的對齊現象
以三角形播放按鈕為例，在背景范圍中繪制三角形時，我們可以先添加周長與三角頂點相接的圓形輔助定位，注意這里需要使用多邊形工具設置的三角形而非默認的菜單中的三角形，因為默認的三角形是等腰三角形，不能用于這種情況。
思路與等距放大類似，先確定幾何中心而非圖層中心
這里推薦使用多邊形工具設置三角形，除了因為是等邊三角形外，在 Sketch、Figma 中這類圖形未擴展的情況下工具是會自動填補圖層范圍，且直接對齊就是居中狀態。
Sketch 多邊形工具創建的三角形
本文所提到的情況與處理方式僅以個人角度切入，在日常設計工作中我們所遇到的情況會更加復雜棘手，但這里也希望通過自己的發現給大家帶來一些啟發與探討。
圖標的繪制并不是也不應該是一個繁重的任務，只要找對方法或了解背后圖形原理，大家都能在方寸之間的設計中找到不一樣的精彩。
作者：We-Design
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
圖標定制設計之一：6大章節！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規范
圖標定制設計之九：不止畫圖標！5 個金剛區的交互設計思考
今年年初，我到客戶現場進行需求溝通，在溝通結束后，客戶問了我一個問題，我竟然不知如何回答，只在當時說了：“好的好的，我們會進行優化的?！?
當時客戶是這么說的：“為什么界面的圖標這么普通，毫無新意，能不能設計的好看點。雖然我們是 B 端產品，但這樣子的圖標真的不好看?！?
雖然我心里知道 B 端產品首先是以可用、易用為主的，那么圖標也不例外，在評價圖標設計的時候，我們首先看圖標是否體現了可用與易用，是否讓用戶通過看圖標就可以聯想到這個功能是什么（合理、無歧義表達）；同時圖標是否符合設計規則，讓界面看起來統一與專業。若圖標符合以上要素，就可以再來看圖標好不好看的問題了。
不過這并不是一位客戶的問題，后面我們還遇到了很多客戶有類似的問題，一上來就想要視覺層面好看的圖標、有創意的圖標、顏色豐富的圖標。
那 B 端圖標設計真的只需要考慮好不好看嗎？作為設計者的我們，還能做什么呢？其實，B 端圖標設計是帶著腳鐐在跳舞，小小的圖標藏著大大的智慧，下面我們一起來看看吧~
圖標也叫 icon，它是對現實世界的概括、抽象、隱喻，在產品軟件中，它會向我們傳達功能與操作。
有些圖標已經成為人人熟悉并一致認同的傳播語言，例如刪除、設置、男士、女士、刷新、電話、郵件，看到這些圖標，人們的反應基本是一致的，無需再多說什么。
圖標在 B 端界面的用途我們就不展開長篇大論說了，簡單來說圖標除了做點綴，還可以直接表達功能與用途。因此，我們可以將 B 端圖標分為兩大類：示意類圖標和半裝飾類圖標。
1. 示意類圖標
示意類圖標（也有稱之為功能類圖標）是指可以向用戶示意功能用途的抽象化圖形，可以和文字配合使用，也可以單獨使用。
該類圖標在中后臺系統的界面中會比較常用，例如基礎組件、導航菜單、狀態、功能性模塊。示意類圖標不僅以可用的方式豐富了界面效果，在一定程度上也緩解了用戶的視覺疲勞（試想，全是文字的界面會怎么樣）。
2. 半裝飾類圖標
為什么我們要取名「半裝飾類圖標」呢？原因在于，在 B 端界面上，不會無緣無故出現純裝飾、毫無寓意的圖標，任何圖標的出現即便原本是為了裝飾，設計者在設計時也需要思考其含義屬性。
該類圖標會在中后臺導航、中后臺工作臺、Dashboard、B 端網站等地方出現，它們可以讓 B 端界面活躍起來。
我們可以發現，某些場景下使用示意類圖標會更好（比如基礎組件），某些場景下使用半裝飾類圖標會更好（比如 B 端網站），某些場景下使用任意一類圖標都可以（比如中后臺導航菜單）。
回到一開始客戶的問題：把圖標設計的好看點，他說了好幾個地方，記得好像有樹控件 、導航菜單、按鈕等。設計者們需看看目前客戶講的場景是哪個，有些場景不適合亮麗的圖標，這會喧賓奪主，例如基礎組件中。
我們深刻了解 B 端圖標類型的使用場景，在設計決策時會更加得心應手。
雖然示意類圖標和半裝飾類圖標視覺形式不同，但在繪制上的規則是互通的。我們團隊輸出了一套企業級 B 端圖標設計規范，不僅可以幫助新人設計師快速上手，并且可以使團隊內設計師高效協作，保證設計結果的一致性。接下來和大家分享下思路，這是一套可復用的方法。
1. 約定圖標繪制區域
我們需要給一整套圖標約定合適的繪制區域，保證不論哪位設計師輸出的圖標，均符合設計標準。并且原始圖標大小一致，可以保證前端使用也非常友好。
假如都是 48px*48px 區域繪制的圖標，它們均縮放到 16px*16px 即可；如果一個是在 48px*48px 畫板上繪制的，一個是在 88px*88px 畫板上繪制的，它們都縮小到 16px*16px，會導致圖標看起來視覺不一致。若期望它們看起來一致，就需要專門為不同畫板的圖標設計繪制規則。
這里在和大家分享一個小心得：我們團隊在約定圖標繪制區域時，發現了一個問題。Antd 的圖標是繪制在 1024px*1024px 畫板上的，但又有一些團隊是繪制在 16px*16px，到底應該選取哪種畫板呢？經過實際操作后我們發現，畫板越大，設計細節可以越豐富。但縮小到小尺寸時，會有小數點的虛邊（不過不妨礙前端應用，用戶也看不到虛邊）。而小尺寸畫板繪制圖標，畫板全在視線范圍內，設計師繪制圖標時更有安全感。所以，不論用什么尺寸的畫板，只要團隊成員一致認同即可，不用過于糾結。
2. 設置出血位
除了要讓圖標繪制到統一的畫板中，我們還約定了出血位，要求所有圖標均保留出血位（出血位默認使用固定值），出血位起到的作用是：防止設計師圖標繪制不小心貼邊后，圖標在實際應用場景中會出現缺失現象。當然，出血位的默認數值并不是一成不變的，允許設計師在繪制一些特殊形狀的圖標時，有調整空間，保證視覺平衡。
3. 約定元素調整規則
針對示意類圖標：
線條：我們會要求設計師在繪制圖標的線條/圓點時默認使用某個數值，然后設定線條粗細/圓點大小的遞增或遞減規律，例如以 2 的倍數為主基調繪制，默認為 6px 粗細/6px 大小。但允許設計師在繪制圖標時，不合適用默認數值的，就按照增減規律去指導設計，如下所示。
圓角：圖標采用何種內外圓角設計會影響圖標給人的感覺，數值大的圓角會讓用戶感覺親切；數值小的圓角會讓用戶感覺硬朗、專業。采用哪種圓角方式，設計師可以參考產品調性去規定。
針對半裝飾類圖標：
半裝飾類圖標在設計上也不是隨意為之，除了要可以表達文案內涵外，假如是一整套的圖標系列也需要約定元素調整的規則。
例如約定在「幾何圖形+業務圖形」的設計基礎上進行發揮，保證圖標放到一起具有很強的一致性。并且半裝飾類圖標還要設定色彩范圍（主色、輔色），如此可以讓界面色彩不雜亂，嚴謹有序?？梢钥吹津v訊云官網的圖標采用了類似的設計方法。
4. 分層打造秩序
對于圖標畫板來說，它不是一個平面，它就像樓房一樣，是分層的。從底層到最上層的內容依次為：主畫板區域、核心內容繪制區域、基礎圖形參考區域、實際圖標。
5. 從基礎型拓展
我們在設計圖標時，都應該先從基礎型開始思考——圓形、矩形、三角形、正方形等，保證設計構圖上的節奏感和規整性。當基礎型無法滿足需要的時，以它們為準向外散發，在遵循設計規范的基礎上，做視覺上的平衡和微調。
如果是落到實際軟件中應用的，建議所有圖標最后都要合并路徑，保證圖形規整和干凈，同時便于正確輸出和使用。
在「2.1、約定圖標繪制區域」中，我們說到了要為一套圖標約定統一的畫板區域，但這個事情給設計師造成了困擾，還不止一位設計師問我：“那是不是我不能再用其他尺寸的畫板來設計圖標了?！贝鸢府斎皇欠穸ǖ摹＜s定畫板尺寸不是約束，恰恰是在規則中給予了設計師有序拓展的能力。
假如不約定畫板尺寸，那么設計師直接放飛，每個圖標都有自己的尺寸，并且有些還會出現長方形的形態。畢竟每個人的工作習慣不同、面對的產品不同，直接打開軟件畫圖標是最快的方式。
而首先約定畫板尺寸，設計師就會有條理地進行繪制，在遇到特殊情況時進行有序拓展，我們可以稱之為場景拓展法。例如設計師可以為 B 端基礎組件、工作臺常用導航模塊、結果頁的圖標各自設計一套繪制尺寸。
那設計師要怎么判斷什么時候采用場景拓展法去設計呢？我們可以優先使用默認畫板尺寸設計圖標，在遇到特殊場景不允許情況下，采用場景拓展法去執行，針對界面風格有場景區別的，可以規定幾類畫板尺寸，為不同場景使用。
線型圖標與面型圖標也是設計師經常在討論的話題，他們常常討論「什么情況下使用線型圖標，什么情況下使用面型圖標」。做過比較多 B 端產品的小伙伴可以發現，沒有說哪種場景必須使用線型圖標，哪種場景必須使用面型圖標，主要還是看當前產品調性合適哪種，并且使用某類型圖標后，對界面產生的效果是什么。
例如當界面圖標較多時，采用面型圖標，會顯得頁面很重，會把用戶視覺引導到圖標而不是重點數據上。
線型圖標與面型圖標在界面中使用，是一項系統工程，是由多方因素決定的。但我們設計師需要保證 B 端界面圖標使用的統一性，即便按照場景區分，也需要認真思考，是不是有必要。就如界面字號使用定律一樣，建議不要超過 3 種，多了會讓界面雜亂，降低界面設計品質。圖標也是如此，不論面型還是線型，要站在產品角度去整體把握，而非線型和面型的簡單選擇。很多 B 端產品是兩種類型混用的，但它們很好的劃分了使用場景。
這里我總結了一些線型圖標與面型圖標常用的場景（以 B 端中后臺為例，但這并不是唯一選擇）：
1. 在導航上（菜單極其多），常見默認用線型，選中用面型。
2. 在導航上（菜單很少，單層），粗一些的線型圖標或者面型圖標都會用，且會比較個性化，以提升產品整體調性。
3. 在基礎組件中，通常使用線型圖標，且顏色淺，用戶可以把注意力聚焦在信息本身。
4. 在表格數據的狀態中，面型和線型是均分使用的狀態出現。
5. 在文字按鈕中如果要添加圖標，讓界面展現更豐富，線型按鈕居多。假如一旦按鈕很多，面型圖標會讓界面顯得太重。
6. 若標題區要出現按鈕，面型按鈕會使得區塊顯得更整體。
這里還想和大家說說「視覺尺寸與規范尺寸」的事情。之前遇到設計師這么問：“既然已經約定了圖標的設計規范，那是不是就嚴格按照規范區間來（嚴格按照基礎圖形參考區域來），但是有些圖標不適合直接套用規范啊?！?
是的，其實很多不規則圖標是不適合直接套用規范的，就像一份周報格式不是所有崗位都適用一樣。如果設計師發現有些圖標直接套用規范不可行，是可以根據「視覺大小一致性」進行微調的。這不僅保證了前端開發的便捷，也保證了界面視覺的整潔。
既然是一套 B 端產品層/企業級圖標庫，那么必須要有規范的命名方式，這樣會方便設計師之間的協同，也會更方便開發與設計之間的協作，同時查找效率會提升。
那么命名有什么規律呢？其實只要根據項目的情況，團隊內有統一的認知即可。關于命名的中英文，也是視團隊而定，各有優缺點。比如是英文，那會方便開發直接用名字，不用重新取名（當然設計師取的英文名開發不喜歡，也會改）；用中文的話，方便檢索。
可以是：
尺寸/類型/圖標名稱/狀態
16px/導航/上傳/默認
形態/格式/圖標名稱
面型/方型/新增
模塊/圖標名稱/狀態
導航/分享/正常
好用的三方圖標庫還是很多的，雖然圖標庫質量參差不齊，但還是在一定程度上解放了設計師天天畫圖標的痛苦。這里介紹幾個圖標質量不錯的網站：
1. Noun Project
網站鏈接：https://thenounproject.com
2. Iconfont
3. ICONS8
網站鏈接：https://icons8.com
4. Font Awesome
網站鏈接：https://fontawesome.dashgame.com/
5. IconPark
網站鏈接：https://iconpark.oceanengine.com/home
當客戶提出圖標好不好看時，是一個正常人的反應，試著想想我們自己，不也總是會很表面得看待一件事情么。因此，客戶不會知道原來一個小小的圖標也是藏著大大智慧的。不過沒關系，當我們了解了小圖標內部的大智慧后，我們可以更輕松的駕馭圖標了，也可以知道在何種場景下，使用何種圖標可以提升界面展示效果，得到客戶的好評。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
圖標定制設計之一：6大章節！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規范
圖標定制設計之九：不止畫圖標！5 個金剛區的交互設計思考
最近我在學習使用 Figma，會在社區查找一些大廠的設計系統文件學習，看到一篇微軟 Fluent 系統圖標規范文檔，還挺詳細的。其中，我發現有些小點自己平時很少注意到，并且感覺對設計師定義圖標規范也有一定的幫助，所以結合個人圖標經驗挑選部分內容來翻譯成一篇文章，便于擴展自己的圖標思維。（備注：以下的規范是針對尺寸 24px、線條粗細 1.5px 的圖標）
在前一個版本，Fluent 系統圖標采用了 MDL2 和 Monoline 圖標集合，比較大的特征是直角、方方正正的形狀。不過隨著 Win 11 系統的發布，我們可以看到 Fluent 系統圖標也進行了比較大版本的優化，感知最大的地方就是圖標變圓潤了。
設計理念有三個準則：熟悉的、友好的、現代的。圖標形狀遵循了用戶熟悉的基本原則，示意上識別清晰，盡量遠離隱喻含義。同時，細節處理更友好，采用了圓角和簡潔的形狀，并有兩個主題：線性和填充。
規范化的網格，能促進圖標的整體性和統一性，設計師繪制圖形元素時也更有條理性。從 24px 圖標尺寸開始，比較建議使用網格系統，內容安全區域是 20px，周圍有 2px 的內邊距。（留內邊距主要是考慮個別圖標居中分布和體量問題，有些圖標元素會超出安全區域，比如修飾符類型圖形）
基礎形狀是網格的基礎，正方形、圓形、縱向矩形、水平矩形采用定義好的模板尺寸，在相關圖標體量上保持一致的視覺比例。
圓形、矩形、正方形圖標體量效果如下。（矩形體量看起來有點偏小，這種問題受限于圖標尺寸空間?。?
圖標線條應當采用一致的粗細，線條末端采用全圓角。
像素對齊很重要，特別是低分屏設備，圖標可以看起來很清晰。由于線條粗細是 1.5px，需要保證 1px 是對齊像素的，避免內外都出現虛邊。
但在某些特殊場景，為了使圖標體量居中分布，就會出現像素不對齊的情況，比如一條豎線。
Fluent 圖標改動點較大的可以說是圓角了，傳遞了更柔和、更友好的體驗感受。因此，我們認真打磨圓角的細節，定義了三種圓角數值。大圓角使用在線條直角或鈍角處；當使用大圓角感覺形狀太圓難以辨別時，我們可以使用中圓角；小圓角用于很小的細節或銳角處。（確實挺細的，也影響了整體的風格。如果追求統一大圓角的話，可能太偏圓潤風格，更適合娛樂類產品用戶吧）
斷口多存在復合圖標上，斷口間距是 1px。當圖形角度堆疊時，圓角中心點需要一致，即外層圖形圓角會稍大一點，使線條平滑過渡。（看起來確實挺和諧的）
修改符應當謹慎使用，因為它對于一部分用戶來說很難閱讀。由于尺寸較小，修飾符元素要盡可能地簡潔，常放于圖標的右下角。設計師在繪制過程中，修飾符圖形可以超出安全區域，使圖標視覺感官居中分布。
如果已經建立的圖標需要關閉狀態，應當遵循模板：斜杠從左上角到右下角 45 度，撐滿圖標的安全區域。
圖標平衡很重要，我們也有測試的兩種方法。第一種方法是畫一個圓圈，幫助我們更好地感知平衡性。第二種方法是視覺重量測試 ，通過模糊來感知圖標的區域面積，從而達到平衡的目的。
隨著更多圖標的創建，我們必須非常有意識地命名，并盡可能地具有前瞻性，后續才能更好地協作。我們推薦圖標命名使用形狀的明喻，比如盾牌代替安全，星號代表收藏。
以上就是 Microsoft Fluent 圖標規范的一些小翻譯總結吧，線條粗細、圓角、居中、體量、平衡、命名等方面還挺多細節可以打磨細化的，希望各位設計師能夠結合業務來仔細琢磨，提煉出屬于自己產品的圖標規范。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
圖標定制設計之一：6大章節！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規范
圖標定制設計之九：不止畫圖標！5 個金剛區的交互設計思考
SVG 格式圖標在軟件界面中有廣泛應用，它與生俱來的矢量屬性，使其在高分辨率屏幕上的表現非常完美。SVG 是一個基于 XML 標記語言的開放網絡標準格式，擁有跨設備多平臺的兼容效果。前面我們有分享過一篇關于 WPS 圖標的文章《探索 WPS 3000 個圖標設計背后的故事》，得到了很多網友的積極反饋。相信界面設計的小伙伴們都很熟悉 SVG 格式了，這次，我有一個棒的想法想分享給大家：利用 SVG 圖標套色，來完成不同界面的適配。
圖標套色的簡單來說就是利用 SVG 格式的文本屬性，使用 XML 格式標準，在 SVG 文檔中增加 CSS 樣式，通過修改 CSS 樣式屬性，精準控制 SVG 格式圖標顏色，通過修改透明度控制圖形顯示與否，從而變換圖標的風格外觀。
基本原理：修改 SVG 的樣式，生成不同風格的圖標
用處一：顏色適配
這里有幾個插件，都用到了“保存”、“打印”這些功能。因為主題色不同，即使是同樣外形的圖標，還是需要根據主題色的不同輸出適配各個插件的圖標。采用圖標套色的方法，就可以避免這類圖標資源的重復輸出。
相同功能需要兩套不同主題色的圖標
用處二：皮膚適配
現在多數軟件一般都有皮膚功能，不同用戶需求，衍生出風格各異的皮膚，各種顏色，深淺不一，一套圖標滿足不了所有，為了視覺效果需要對每個皮膚輸出特定顏色、風格的圖標。圖標數量如果很多，投入的成本將隨皮膚數量呈幾何倍增加，圖標套色就可以很好的解決這類問題，只需要通過修改圖標顏色和風格即可適配。
通過修改映射配置，可以得到不同顏色的圖標
我們先看看圖標套色之后的效果：
修改映射配置，可以得到線、面不同風格的圖標
簡單來說，實現這種效果有下方五個步驟:
套色方法五個步驟
以下方幾個圖標來做示例：
SVG 示例圖標
第一步，確定圖標線、面風格
設計師將圖標線、面風格確定下來，并保證兩者效果上可以兼容，即輪廓一致。
同時兼容線、面兩種風格效果
第二步，定義圖標顏色
在確定了圖標的風格之后，將圖標中用到的 7 種顏色，根據一深一淺再拆分為 14 種（具體幾種顏色可根據圖標設計需要來定），深色用于填充線性圖形，淺色用于填充面性圖形。
根據線、面風格需要，定義圖標的顏色
第三步，給顏色定義樣式名
給 14 種顏色，分別定義好 CSS 樣式名（樣式名遵循 CSS 規則即可）。
給顏色定義樣式名
第四步，給 SVG 圖標添加 CSS 內部樣式
SVG 格式圖標默認是沒有 CSS 樣式，需要手動將 CSS 內部樣式添加到 SVG 文檔中，并將 SVG 路徑顏色與 CSS 樣式名關聯起來。
給 SVG 添加 CSS 樣式
第五步，樣式屬性配置機制
添加內部樣式之后，需要開發小哥哥在軟件中增加對 SVG 圖標 CSS 樣式屬性的映射機制。修改映射機制配置文件中 CSS 樣式屬性，就可以控制圖標風格變化。
修改配置代碼即可改變圖標顏色
完成了以上五個步驟，通過修改軟件中的映射機制配置文件，就可以改變圖標風格。
了解了步驟方法，我們以 WPS 為例來講解圖標套色在實際案例中的應用：
案例一：前面有提到我們的四大組件，WPS 由文字、表格、演示、PDF 四組件組成。每個組件都有各自的主題色，文字主題色為藍色，表格綠色，演示橘黃色，PDF 紅色。多數圖標都含有主題色，但外形是一樣的，因各組件主題色不同而導致了很多圖標的重復輸出。
套色用處之一的顏色適配，可以讓圖標變色以適應不同的組件色，避免圖標的重復。
不同主題色圖標的變換效果
案例二：WPS 有推出多個風格各異的皮膚，因為圖標數量的關系，無法每個皮膚都輸出一套圖標，目前只能使用默認的線性圖標。也因時間和維護成本而導致圖標風格的單一。
套色用處之二的皮膚適配，能使圖標改變風格以適應不同的皮膚，既能滿足圖標風格多樣，又能滿足時間和維護成本的可控。
不同風格圖標的變換效果
案例三：深色模式的配色與淺色模式大相徑庭，圖標使用的顏色也截然不同，適配需要輸出兩套圖標資源，因不同深淺色模式而導致的圖標資源重復輸出。WPS 組件功能區的圖標有幾千個，輸出和維護都很費精力。
套色用處之二的皮膚適配，在深淺色模式下也能適用，改變圖標顏色以適應不同的深淺色模式，避免圖標的重復輸出。
深淺色模式下圖標的變換效果
通過以上的案例不難發現，SVG 圖標套色技術的價值，主要有以下幾個方面：
1. 時間和維護成本的降低
利用圖標套色方法，設計師只需要輸出一套圖標資源，就完成了多組件、多風格、深淺色模式適配。開發小哥哥也可以刪掉適配用的冗余代碼，提升了圖標的管理和軟件運行效率；
2. 個性化需求的滿足
后期可以增加自定義擴展，讓用戶配置圖標風格，更好地滿足個性化需求；
3. 服務器資源的節約
更少圖標資源，更小壓縮包，更少空間和寬帶的占用。
采用新技術，幫助設計、開發更好地完成多場景適配，降低了整體流程的執行難度，為項目節省了大量時間，避免過多精力投入在重復工作中，為最終完成目標創造了有利條件。同時也解放了生產力，有了更多的時間可以去關注高價值的項目。
工作中經常能遇到重復的內容，這都有提升和優化的空間，尋找更高效的方法，讓工作變得輕松簡單。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
圖標定制設計之一：6大章節！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規范
圖標定制設計之九：不止畫圖標！5 個金剛區的交互設計思考
藍藍設計的小編 http://www.syprn.cn
