什么是Resdesign
Redesign并不是一個簡單的美化過程，視覺只是Redesign的一部分而不是全部。如果你做產品重構只是為了視覺更美觀，從各種網站獲取靈感用樣機包裝，沒有任何產品架構以及交互邏輯，那么你的改版必定不會很完美。
但同時也會有很多人陷入這種誤區，產品中過時的設計規范會使你的用戶會流失到設計體系更好的競品那里。重構你的產品設計語言，讓他看起來更美觀，這當然很好，但是也不能盲目的跟隨設計趨勢，沒有任何邏輯做改版，這樣會導致交互邏輯的紊亂以及產品架構不清晰。
今天阿勇就從網上任意摘選了一個產品功能需求有問題的一個頁面來進行一個頁面改版，一起來看看吧！
產品邏輯分析
1、產品主視覺指意不明，貴州省地質災害防治指揮平臺，地圖處資源應集中于貴州省，且全國視角下可以下鉆貴州省市區。
2、地質災害防治主視覺應該著重展現崩塌、滑坡、泥石流、地裂縫、等地質現象的展示，并展示預警信息，以及現場地質現象視頻反饋，以便于指定指揮方針。
3、此平臺信息展示包含人員調度，現場指揮，設備數量，數據資源統計，覆蓋區域，預警告警，各地區地質災害排行，綜合防治等信息的內容。
4、產品布局不合理，各區域所占比重需要重新估量，并且主視覺數據資源匱乏，內容單一。
5、業務邏輯沒有很好的展現，各區域所要展現的數據信息不明確，業務紊亂。
6、畫面中對于業務的理解不夠深，導致畫面空洞，數據展現量不夠，產品失職。
如何進行頁面分析
根據顏色：顏色不宜太多，對于特殊行業，固定的顏色是有固定的含義的，比如紅橙黃藍四色預警。
對于畫面不合理的地方需要記錄下來，對當前板塊的內容進行正確的導向，比如你發現這個字體不合適，你的腦海中一定會有正確的用在此處的字體；比如間距，換行，字號等方面也是如此，心中得有一桿秤，去衡量設計的美感。
了解功能，分析數據之間的關系：
了解本產品的應用領域，以及產品功能，分析畫面需要展示的數據有哪些，合理的通過設計展示數據之間的關系。
構思主題，圍繞主題設計其他元素：
對原來的主題進行產品功能重構，設計新的配色方案，畫面內容布局，標題以及主視覺的重新設計，圍繞主題進行設計元素的制作。
分析數據，合理選用不同樣式圖表：
對各個數據進行分析，對內容進行編排，選擇合適的圖表去展示數據，合理的同時，又具有美感。
提取共性，結合需求做產品規劃：
提取各個模塊的設計形式的共性，并結合產品需求進行合理的規劃，重構頁面。
加強技法，了解可視化設計規范：
通過不同的設計技巧來表現畫面的美感，制定屬于產品的設計規范，并運用這些規范去規范頁面布局以及設計，這是要在深度了解可視化設計的前提下。
優化-01
優化-02
優化-03
新增告警列表，設備數量，資源調度信息，展示歷史告警記錄，合計設備數量，總結資源調度數量，真正掌握自動化地質防治指揮。
最終修改成品
設計師應該跳脫出自己狹義的視角重新來審視“設計趨勢”，為自己帶來更多的可能性。
視覺只是表現層，理解業務，理解數據，合理表述才是核心。道理大家都懂，但真正的理解數據卻是很多設計師邁不過去的門檻。
送給大家一句忠告，永遠不要迷信產品原型，設計也不應該被原型所制約，要勇于用自己的設計思維去驗證產品的合理性，要用商業眼光去對產品進行查漏補缺，要站在用戶的立場上去試想產品的可能性。
作者：AYONG_BDR 來源：優設網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
1、安裝插件—時間格式化插件
npm i silly-datetime --save 2、Main.js文件引用
-
import Time from "silly-datetime"; //時間格式化處理插件
-
Vue.prototype.$Time = Time; //全局使用
3、頁面中使用
this.$Time.format(new Date(), 'YYYY-MM-DD HH:mm:ss'); 1.安裝插件
npm i silly-datetime --save 2.在node中引入
const timeQs = require('silly-datetime'); // 事件格式化控件3.在后端路由中
obj.time = timeQs.format(new Date(), 'YYYY-MM-DD HH:mm:ss');4、參數說明
| 格式 | 類型 | 說明 | 實例 |
|---|---|---|---|
| YYYY | 年 | 年份 | YYYY ：2019 |
| MM | 月 | 月份，補0 | MM：07 |
| M | 月 | 月份，不補0 | M：7 |
| DD | 日 | 日，補0 | DD：07 |
| D | 日 | 日，不補0 | D：7 |
| HH | 小時 | 24小時，補0 | HH：07 |
| H | 小時 | 24小時，不補0 | H：7 |
| hh | 小時 | 12小時，補0 | hh：07 |
| h | 小時 | 12小時，不補0 | h：7 |
| A | am | 上午 | mm：07 |
| a | pm | 下午 | m：7 |
| mm | 分鐘 | 分鐘，不補00 | mm：07 |
| m | 分鐘 | 分鐘，不補0補0 | m：7 |
| s | 秒鐘 | 秒鐘，不補00 | s：07 |
| s | 秒鐘 | 秒鐘，不補0補0 | s：7 |
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在 Node.js 中，您可以使用該fs.readdir()方法列出目錄中的所有可用文件。.此方法異步工作以讀取給定目錄的內容，并返回目錄中不包括和的文件名數組..。
這是一個讀取目錄中所有可用文件并在控制臺上打印它們的名稱的示例：
-
const fs = require('fs');
-
-
// directory path
-
const dir = './node_modules/';
-
-
// list all files in the directory
-
fs.readdir(dir, (err, files) => {
-
if (err) {
-
throw err;
-
}
-
-
// files object contains all files names
-
// log them on console
-
files.forEach(file => {
-
console.log(file);
-
});
-
});
fs.readdir()如果給定目錄不存在，該方法將拋出錯誤。
該fs模塊還提供了 call 的同步變體，readdir()它readdirSync()同步工作并返回文件名數組：
-
const fs = require('fs');
-
-
// directory path
-
const dir = './node_modules/';
-
-
// list all files in the directory
-
try {
-
const files = fs.readdirSync(dir);
-
-
// files object contains all files names
-
// log them on console
-
files.forEach(file => {
-
console.log(file);
-
});
-
-
} catch (err) {
-
console.log(err);
-
}
查看本指南以了解有關在 Node.js 應用程序中讀取和寫入文件的更多信息
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
這是一篇醞釀了比較久的內容了，來講解 B 端設計規范和組件庫的分享。這幾年網上出了不少類似的分享，雖然都寫得很全，都還是覺得不夠滿意，缺了一點點細節。
所以我自己出一版，希望能幫助你們一次性解決這些問題。
B 端項目設計中，設計規范和組件庫是一個繞不過去的檻。作為專業的 B 端設計師，必須有自己完成設計規范和組件庫的能力。
所以，首先我們要先理清楚什么是設計規范和組件庫。
設計規范是項目設計中要遵守的要求、細節、準則，規定了諸如色彩、字體、柵格、間距、圓角等要素的規則，這些內容都是可以在大量設計元素中應用的細節。
換句話說，設計規范就是提取在項目中會廣泛使用的要素，并進行統一制定的過程，防止設計師在設計過程中隨意發揮，導致項目統一性的崩壞。
組件庫，是通過梳理項目中應用到的按鈕、開關、滑塊、日歷、下拉菜單等控件、組件的設計樣式、狀態、交互規則，再將它們統一復用到項目的不同頁面中去。
嚴格意義上來說也是設計規范的一部分，是基礎規范的進一步延伸，但還是單拎出來講。因為組件庫的應用不僅僅是設計統一性的問題，還融合了 ”組件化“ 的編程思路在里面。
組件化：將復雜系統拆分成不同功能獨立的模塊并重組的過程，且每個模塊包含對應的狀態和屬性。
對于程序員來說，一個項目就是若干功能模塊的合集，往往是先開發這些功能模塊，再搭建對應的完整頁面，而不是看一個頁面開發一個頁面。
所以制定完善的組件庫，除了提升設計質量外，還可以很好的提升開發效率，推進項目進度。
設計規范和組件庫的搭建，就是一個由下至上的設計鏈路，通過對細節的制定來實現最終的項目表現層?？梢越柚鷱V為流傳的分子原理來理解：
任何成熟的 B 端項目都應該具備自己的設計規范和組件庫，雖然有很多小團隊在前期推進項目時，因為各種問題沒有搭建或落地設計規范，但并不代表他們在招人的時候沒有要求。
在今天搭建 B 端項目規范時，新手還有一個普遍的問題：
項目規范和開源框架的規范有什么區別，如果選了一套開源框架做設計，設計師不就不用做規范了？
初級設計師會這么想并不奇怪，因為以 AntDesign 為首的開源框架做的實在是太完善了，不僅囊括了整套的 Web 色彩系統，還有各類常用的、不常用的交互組件。
它們不僅僅提供了相關的設計源文件，也給開發提供了對應的代碼和接口，方便程序員應用?？雌饋砦覀冎灰雌唇M件就可以和開發無縫銜接了……
這顯然是不可能的，正是因為開源框架太全面，可以產生無數種可能，我們才更應該整理自己的項目規范。就像我前面已經提到過的，設計規范是種 ”限制“，而不僅僅是設計風格的簡單沉淀。
比如，不管你選了哪套開源框架，它提供了多少種色彩，你的項目都應該有自己的項目主色，適當的輔助色彩，而不可能把它的整套配色都應用進去。所以，即使顏色沒有跳出原有色彩系統，也要篩選出你用到的顏色進行記錄。
再比如，開源框架的很多控件，都提供了好幾種樣式和方案，并不是讓你全部都用進去，而是選擇自己覺得合適的。所以你每個控件中選擇的方案，也需要做記錄，統一后續的頁面設計。
前面只是記錄選擇，都還比較簡單，而最關鍵的問題在于，開源框架的組件不可能完美符合項目的全部需求。必然要在原有的基礎上作出大量細節的優化，或者創建出新的業務組件出來，所以設計師還是要把這些內容整理出來。
開源框架，就是給我們提供了一個比較全面的設計范圍，讓我們站在別人的肩膀上做選擇，提高設計規范的制作效率，而并不是讓我們直接躺平，復制黏貼就可以了。
同時，設計規范和組件需要在軟件中進行運用，我們也同樣不能直接使用官方提供給我們的組件庫展開自己的項目設計，要根據自己項目的規范獨立進行搭建和使用。
下面，我們就要根據設計規范的內容，來講解如何結合并使用即時設計、Figma 的相關功能。
之所以 UI 設計軟件能取代 PS 獨立發展，就是因為 UI 設計中包含大量需要復用和批量修改的功能。而這些功能和設計規范有非常大的聯系，也是 UI 設計中項目規范能被落地實踐的重要保障。
但因為 Figam 和即時等次時代 UI 設計軟件提供了越來越多的功能，用來支持設計規范的實踐，且這些功能可以相互交叉、重疊、組合，導致很多人在前期學習中會被軟件功能繞暈，導致很多人沒有理解這些功能意義和價值，更不知道如何在項目中具體實踐。
所以，我們先將這些功能整體理解一遍，再逐一來對它們的使用規則和應用場景進行拓展。
樣式功能是用來記錄圖層樣式設置的功能。簡單點理解，就是記錄圖層右側的屬性設置的功能。正常我們選擇一個基礎圖層，軟件右側的屬性面板會將圖層樣式拆解成若干的類別，包括填充、描邊、字體、陰影、模糊。
而樣式功能，就是幫助設計師對不同的樣式類別進行記錄和復用的過程，它會直接將該分類內的相關參數值記錄下來，并進行命名，方便后續的調用。
響應式功能是讓圖層隨上級編組尺寸變動而自適應的功能，方便我們在修改組件的大小時不用重新調節里面的元素細節。
例如設計一個卡片，可以通過響應式的設置，讓頭部的元素左右對齊，下方的文本區域自動拓展，保持卡片的內間距不變。
或者頁面右下角懸浮按鈕，也可以通過響應式設置始終處于頁面底部，這樣我們在增加頁面高度的時候不用重新設置該元素的 Y 軸位置。
自動布局功能，是通過前端布局思路來設置元素布局方法自動排版功能，是 Figma 開發的最重要的功能，也是讓 Sketch 不再成為 B 端設計首選的核心因素。
它的主要功能如根據內容自動完成尺寸變更，并列排版和順序的變更等。
自動布局可以極大的提升設計效率，正因為自動布局的出現，才讓項目組件庫可以真正被運用和落地實踐起來。
組件功能在不同軟件有不同的叫法，如 Symbol、Component、Kits 等，主要是將指定的圖層或編組生成一個新的編組單位（類似智能對象），在后續設計中進行復用。
例如設計一個按鈕、開關，我們只要將它們生成為組件，就可以在后續設計中快速從組件庫里拖拽到設計頁面中，不用重新畫一遍，并且支持批量修改。
在組件應用中，生成的第一個組件也叫父級組件，其它調用它的組件都是它的子組件，這是一個非常清晰的從屬關系。如果我們修改父級組件的內容，所有子組件都會被統一修改。
組件的應用除了這種最基礎的應用以外，還包含了很多特殊的功能，如將低級組件合并成一個高級組件的嵌套，或者 Figma 前兩年發布的變體（Vriants），可以將一個組件的不同狀態聚合到一起，通過屬性面板來切換相關的狀態。
組件功能是 UI 類軟件最復雜的功能，它不僅本身設置很豐富，同時也可以結合樣式、響應、自動布局，讓本來死板的組件變得更靈活可控，應對復雜的設計環境。
在軟件中，記錄樣式就是在對應的屬性面板上 “創建” 并 “命名”，就將對應設置數據轉化成一個指定名稱的記錄，方便我們記憶和調用。
比如，填充色中使用了兩種色彩相近的色彩和不同透明度，我們就可以使用中文命名來區分，其中 #2B6DCF 80% 叫 輔助色，#2B93CF 90% 叫 主色。
創建完成的填充色記錄，就會在對應的屬性樣式列表中出現，之后就可以在對應圖層的屬性中關聯該記錄了。
之后，所有關聯到該記錄的圖層屬性，都可以快速應用該記錄內的參數。如果我們在樣式的列表中修改該記錄的數值，那么所有關聯到該記錄的圖層就會一起被修改。
一定要牢記，目前的主流 UI 工具中，樣式是根據不同屬性類型記錄的。比如一個字體圖層，它的填充、字體、描邊、投影，是可以創建不同的樣式記錄的，各不影響。
而軟件 Sketch 的樣式邏輯，則是根據圖層類型來記錄的，比如矩形和字體，會記錄該圖層下所有樣式屬性的參數，且該記錄只能應用在同類的圖層上（而 XD 只能記錄色彩和字體樣式…）。
這種做法雖然理解起來容易，但是會導致樣式數量大幅度增加。尤其是在字體上，變動填充、描邊都要設置一個新的樣式，這在實際項目中的靈活性是非常差的。
而即時設計、Figma 則不考慮圖層類型，只關注屬性類型。類似前端的樣式表中 “類（Class）” 的應用，每個類有不同的樣式參數，只要定義了類的命名和屬性、參數，那么不同 Div （即圖層）就可以自由組合這些樣式記錄了。
比如色彩 color、陰影 shadow、描邊 board 各定義了1、2、3 三種樣式類，那么就可以像下方案例中自由組合：
<Div Class = “ color2 shadow1 board3 ”> </div>
<Div Class = “ color1 shadow3 board2 ”> </div>
所以，樣式功能可以幫助我們在前期快速搭建基礎視覺規范內容，將規范中的配色、字體、投影、模糊等參數整理進樣式表中，方便我們后續的快速調用和統一修改。
響應式是我們前面做過很多期分享的課題了，基于 BootStrap 的完整響應式功能確實非常強大，可以通過柵格布局來實現豐富的響應方式。
雖然 UI 軟件中也提供了 ”響應式“ 這樣的功能，但它可以實現的效果非常有限。用一句話概括就是：
“圖層基于父級畫板 Frame 的匹配邏輯”
比如我們先創建一個畫板，然后再置入相關的圖層，那么這些圖層就可以啟用響應式規則。包含間距固定、居中對齊、等比縮放這三種響應規則。
間距固定的意思，就是圖層基于父級畫板的某間距數值是固定的，不管畫布尺寸怎么變動，圖層和畫布的對應間距都是保持一致的。比如常規的某一方向間距固定。
比如在模塊上的標題欄，就可以將欄目設置成一個 Frame，然后標題相關元素左間距對齊，更多圖標右間距對齊，之后變更標題欄的寬，圖層的對齊關系就是不變的。
而設置左右、上下間距同時對齊，則是圖層會隨畫布的尺寸變動修改自身的寬高來滿足。
居中模式則是圖層根據畫布的大小進垂直、水平方向的對齊，忽略間距數值。
最后一個縮放的設置，用起來和兩側間距對齊很接近，也是放大縮小畫布圖層會跟著一起變動，但它響應的邏輯是依據比例，而不是間距。這個設置在實際項目中很難派上用場。
過往的設計軟件中，父集尺寸變更，下級元素只能機械的執行縮放效果。而響應式設置就是避免這種僵硬的效果，向真實的網頁適配方式看齊。
同時，這種父集對齊的邏輯是可以進行嵌套使用的，比如剛才的標題欄，可以將這個畫板再置入到整個卡片畫板之下，并對 “標題欄畫板” 創建頂部對齊，左右間距對齊，那么該畫板本身的尺寸不管怎么變動，頭部標題欄頂部位置固定，寬度間距和父集統一，標題欄下方的元素也會左右對齊。
所以，將一個畫板中的元素響應方式設置好，可以節省我們很多時間，不用再因為父集元素尺寸修改而一個圖層一個圖層修改下級元素的尺寸和位置。
在后續生成組件前，我們就要優先完成畫板下方的響應設置，這樣就能確保該組件支持靈活的調節和布局。比如用上方的卡片，就可以快速搭建一個表盤頁面的基本框架，我們要做的就是拖拽畫板到一個合適的尺寸即可，無需調節下級圖層。
但需要注意的事，即時設計和 Figma 觸發響應式的設置是元素需要處于畫板 Frame 之下，而不是編組 Group 中， Sketch、XD 因為沒有 Frame 的概念，所以使用編組就可以應用響應式設置，這個區別一定要牢記。 同時，響應式雖然可以完成很多高效的適配，但是它的局限性是無法打破的，例如無法實現 3 列以上的卡片列表等間距放大，或者隨寬度增加生成新列下方卡片補位。
自動布局 Autolayout 作為一個自動排版功能，使用場景包含兩類，父子級響應和依序排列。它們有各自的生成條件。
首先需要一個矩形圖層作為背景，并將其它下級圖層置入到矩形背景中去，全選后點擊 “自動布局“ 按鈕即可生成父子級響應。如果圖層沒有完全置入矩形中或沒有相交，那么就會生成一個依序排列的自動布局出來。
創建自動布局會生成一個新的 “特殊編組”，用來收納下級圖層，它在圖層列表中會有新的圖標。
父子級響應布局中，背景的矩形圖層會被自動移除，樣式被繼承到自動布局的編組上，針對該編組層的屬性設置，就等同于原先的背景矩形設置（和畫板 Frame 圖層邏輯一樣）。
這類布局最常應用于按鈕控件上，可以讓按鈕的寬度隨文本寬度變化。
但光靠創建這個效果顯然是無法完整解釋自動布局的，我們就必須從前端的邏輯，來理解這種包含父子層級的元素如何實現自動布局。
首先就是前端環境中，很多控件、組件本身的尺寸是無法直接寫死的，它們是隨內容自動調節的。而自動布局右側的設置面板中的田字格一欄，旁邊會有寬度和高度設置，默認都是 “自動 Auto”，這就是說它們會隨內容寬高進行響應。
比如上方的按鈕，它實現的邏輯就是：
按鈕寬 = 元素內容寬 + 左右間距
按鈕高 = 元素內容高 + 上下間距
這種情況是父層級基于子層級的響應，應用于無法確定父級圖形尺寸的場景，如按鈕、標簽、單元格、瀑布卡片等。
但前端中的不確定性并不是只有這一種，還可以反過來，子圖層大小不確定，需要它們去響應父級圖層的尺寸變更。
比如一些文本卡片，會應用在不同的頁面中，且根據應用的場景會有寬高的調節，所以需要下級的文本區域可以跟隨上級尺寸響應。
我們就需要把父級布局設置成 “固定寬/高”。還要選中子圖層，在它的自動布局選項中選擇 “自適應”，來滿足這個相反的需求。
如果子圖層沒有設置自適應，那么它就不會直接隨著父級圖層變更自己的尺寸。但還是有針對子元素的響應設置 —— 對齊模式。
在父級布局設置中，有一個網點模塊，可以設置下級圖層的對齊模式。當下級圖層不處于自適應模式時，則對齊可以修改下級元素的對齊方向，即前面響應式設置中的 “間距固定”。
前面我們演示的案例都只有一個子圖層，如果出現多個子圖層的話，自動布局也可以幫我們進行調節，除對齊外還包含子圖層排列方式、分布方式，而這就是依序排列的布局模式。
排列方式就是多個子圖層橫排還是豎排的設置。
分布方式，則是這些子圖層布局的位置怎么定，默認包含固定間距和自適應兩種。
固定間距即子元素排列的間距保持一致，在右側的輸入框中可以設置間距數值，也可以結合對齊模式來設置整體的對齊方向。
而自適應，則是在父級區域內進行等分，這個等分的邏輯比較特別，需要左右各有一個子圖層靠到頭，新增的圖層在這個基礎上進行 “等間距分布”。
依序排列的優勢，除了把現有的子圖層快速布局以外，還可以用拖拽、鍵盤調整元素順序?；蛘邚耐獠客蟿幽硞€圖層到該區域中，就可以插入序列，成為下級圖層之一。
前面兩種布局模式，可以解決各種 UI 設計中的細節設置問題，理解起來也并不難，只要自己去操作一下就能學會。而真正讓人頭疼的，是自動布局可以相互嵌套，并混合這兩種模式，在復雜的頁面設計場景和組件模塊中靈活應用。
下面我們通過一個模態對話框 Modal Dialog 案例來進行說明。這個對話框會包含3種不同的寬度規格，且對話內容不確定，可能會字數很多包含很多行的高度。
想要用自動布局實現一個滿足需求的對話框，我的建議是先學會拆分里面的下級模塊，通過完成下級模塊的設置后再進行最終的合并調節。
在這個對話框中， 包含三個模塊，頂部標題欄、中間內容區域，底部操作欄。
首先從頂部標題欄開始，我們隨意創建個 280px * 44px 的矩形，然后再置入標題和圖標到矩形中。之后全選它們創建成自動布局，然后設置父層級內間距，且改成寬度固定、分布自適應，就可以獲得一個可以隨意修改寬度的標題欄了。
然后就是內容區域，本質上就是一個文本區域，所以我們拖拽一個文本區域出來，設置好對應的參數和填充一點文本即可。
而底部操作欄，則在一開始做好兩個按鈕（可以使用自動布局做）和背景以后，就可以進行合并，只是父級元素上的設置要改成固定寬度和右對齊，并設置布局間距（按鈕間距）。
這三個模塊完成以后，我們再選中它們進行自動布局合并，把它們設置成豎排模式，再添加背景色和排列間距，就可以實現出一個正常的對話框效果。
到這一步，如果我們修改對話框整體的寬度，或者輸入多行的文本，都無法達到預期的效果，所以還要在這個基礎上進一步的調整。
首先是寬度適應，我們要先將最上級的自動布局改成 “固定寬度”，然后將下級圖層都改為 “自適應”，這樣我們增加組件的寬，下方布局就會立即響應，且推導到更下級的圖層中。
為了滿足文字寬度隨父級響應，高度影響父級高度，就要將頂部的自動布局改成 “高度適配”，再將下級的文本改成 “寬度自適應”、“自動高度”，然后，我們就可以隨意拖動這個自動布局的寬，和添加任意的文本內容了。
完成這個基本的版本以后，我們再根據項目需要的三個寬度，直接將它復制成 3 份，每份直接設置對應的寬度出來，就可以作為后續的 “原始組件” 在項目中進行快速引用了。
在這個案例中，我們前后嵌套了若干層的自動布局，每層自動布局的上下級會有各自的響應關系，需要我們逐一進行確認。并且，細心的同學應該也發現，這里面有很多設置似乎和前面的響應式設置非常類似，那把一些下級布局從一開始就做成響應式的編組行不行？
答案是可以的…… 響應式設置和自動布局，本質上都是為了節省我們操作時間而設計的功能，我們要從實際設計的對象出發，選擇合理的功能來實現最終的效果。而不是只能使用自動布局，或者只能使用響應式。
也不要因為了解了響應式包含了非常強大的自適應功能，而認為項目中任何組件、頁面，都要全由它們組成。在需要頻繁優化頁面內容、調整設計需求的項目里，過度嵌套的自動布局會讓設計文件的 “熵” 值無限增加，會產生更多復雜的、沒有效率的問題。
相信引用過 Ant、TDesign 等組件庫文件進行設計的同學應該都深有體會……
至于怎么用才好，沒有標準的答案，就需要未來大家自己去積累相關經驗了。
有了前面響應式和自動布局的認識，我們就要進入到組件功能的具體應用上了。
組件的創建，首先要選中對應的設計元素，可以是單個圖層，也可以是編組、自動布局層，然后點擊生成組件按鈕就可以創建出一個 “原始” 組件。
在即時設計中，這個組件叫 “引用組件”，從該組件復制、引用出來的副本叫做 “實例組件”。它們具有明確的從屬關系。
在這個關系中，引用組件是完全可編輯修改的，只要修改它就可以統一修改關聯的所有副本樣式。
但由引用組件創建出來的副本，卻不能任意編輯，我們不能修改它下級圖層的尺寸、位置、順序。但是，副本的編組大小、圖層色彩、文字內容往往會有很多特殊的調節需求，所以目前主流的 UI 軟件都支持了副本組件的尺寸修改、色彩編輯和文本內容編輯，讓組件的使用更靈活。
以上就是組件使用的最基本邏輯，更進一步，組件作為一個編組，所包含的下級圖層的邏輯都會被保留下來，例如樣式設置、響應式設置、自動布局邏輯。如果一個編組原本就已經創建好了這些規則，那么當它被創建成組件，不管是引用組件還是副本，都會繼承這些設置。
比如上一小節中的通知彈窗案例，設置好自動布局再創建成引用組件以后，生成的副本就可以靈活的進行調整和修改文本內容。
除了樣式、響應、自動布局外，組件也可以包含組件。我們前面說過，按原子核的結構來講，一個復雜的組件是由若干基礎元素和控件組合而成。比如上方這個案例，就由多個模塊、文本區域和按鈕組成。
如果我們提前將按鈕、圖標等創建成引用組件，那么最終整個大的編組再創建成引用組件也是沒有問題的，原來的組件格式并沒有被抹消。
但有個細節值得注意，就是一個引用組件下方包含的組件只能是 —— 副本。如果剛才我們將按鈕創建成引用組件，那么上級編組再創建的引用組件就會自動將這些按鈕轉換成副本，并在畫布周圍生成新的引用組件。
所以這個順序也預示了，組件的嵌套是由下而上的，我們需要先創建低級的引用組件，再用它的副本逐步去組合更復雜的引用組件。這在后面的章節會進一步做出說明。
創建引用組件，除了在畫布中它的描邊色彩不一樣，圖層中的圖標改變了以外，還會出現在一個新的位置中 —— 組件管理面板。
任何創建的組件都會被生成到左側的組件欄目面板中，只要從那里拖拽就可以置入當前畫布中，方便我們調用和查看。
看起來雖然很簡單，但是需要我們管理的細節卻很多。首先就是這個列表是一個包含層級關系的樹樁結構目錄，是允許我們對組件的層級進行結構自定義的。
當我們創建一個引用組件的時候，如果它處于一個畫板中，那么創建后它會在組件面板中保留該組件的默認文件路徑：
頁面 Page / 畫板 Frame / 組件 Compoent
如果我們在不同頁面和不同畫板中創建引用組件，那么該面板的目錄一定是特別混亂無序的。所以為了創建出符合正常分類使用習慣的組件目錄，就要做出調整。
首先就是建議在項目文件中創建一個獨立的頁面 Page 用來存放引用組件，任何新增的引用組件我們都需要將它置入到該頁面中。且不要將引用組件直接置入到畫板中，這樣它就不會生產包含畫板的層級出來。
然后，我們就可以在文件命名中，使用正斜杠 Slash 符號 “/” 作為層級劃分依據。比如下面的案例，包含相同上級結構的組件會被聚合到一個目錄層級中：
這種命名結構帶來的另一個好處，就是處于同一個目錄層級下的組件，在屬性面板中可以進行快速的切換。尤其是一些相近的組件要做替換不用再在樹樁列表中重新找一遍，直接通過下拉菜單替換即可。
使用命名方式來梳理組件列表，完成有邏輯性、清晰的組件目錄，可以極大地提升組件的利用率和效率。但命名必然不是一邊創建組件一邊憑感覺命名的，而是一開始就要在外部完成的，例如通過思維導圖的方式制定出結構大綱，才能保證最終效果符合預期。
組件的應用中，除了不同組件的引用外，過去最讓我們頭痛的就是同一個組件的不同狀態。比如一個簡單的按鈕，就包含非常多的類型，默認、懸浮、按壓、點過、禁用、讀取等等。
為了在項目中可以使用組件的不同狀態，就需要我們在命名上下功夫，比如：
就是用前面提到的右側下拉菜單，來完成同一組件的不同狀態切換。理論上這么實現是沒有問題的，但在實踐過程中，不僅組件列表的數量要大大增加，且下拉菜單第一步只改狀態顯得非常局促……
所以，從 Figma 開始推出了變體 Variants 功能，來更好地應對同一組件不同狀態的高效應用。目前該功能已經在線上 UI 設計軟件中普及。
在即時設計中，只要創建了引用組件，那么選中它后右側就會有 “變體” 一欄，點擊它就可以針對該組件創建出變體效果。
變體中原來的組件一分為二，并不是完全生成出一個全新的組件，而是在這個組件的概念下創建了一個新的狀態出來，在組件列表面板中沒有生成任何新的內容。
但是當我們再添加一個該組件的副本以后，就會發現它的右側多了一個條目和下拉菜單，通過這個下拉菜單就可以切換剛才變體內的不同組件。
比如我們在變體內選中兩個組件，在右側變體的下拉菜單中可以點擊修改命名，將它們分別改成 “默認” 和 “選中”，再修改對應的樣式。然后再應用同一個副本，就可以看見下拉菜單的內容也替換成了“默認” 和 “選中”，通過選擇不同的文字，就可以切換成對應的組件樣式。
這個功能可以很方便的切換組件的不同狀態，但如果它僅僅支持到這一步，那確實和使用命名編組的方法沒有本質區別。真正讓變體產生價值的，就在于同一組件的多屬性、多狀態支持。
還用按鈕舉例，比如一個按鈕包含 3 種樣式：純文字、純圖標和文字加圖標，再包含 3 種狀態：默認、懸浮、點擊，還有淺色和深色模式……
也就意味著，按鈕包含樣式、狀態、色彩三種屬性，每個屬性中的值可以相互結合，那么總共就要設計出 18 個對應的按鈕出來。
如果我們使用變體每個樣式命名一個名字，那么下拉菜單有12個選項選起來也是很頭疼的。所以，變體允許我們自定義組件屬性和值，幫助我們更好的歸類和選擇組件樣式。
所以，在變體面板中，我們可以在更多選項中選擇添加分類就添加對應的屬性內容，添加出 3 個分類后，通過雙擊修改它們的名字為 ”樣式“、”狀態“、”色彩“。
有了屬性，變體下方的組件命名就會根本變更。如下圖所示，默認一次顯示屬性值，雙擊則可以查看對應的屬性名和值。
即變體的基本命名語法為 —— 屬性1 = 對應類型, 屬性2 = 對應類型, 屬性3 = 對應類型。
我們就可以通過這種語法方式完成對上方按鈕的統一命名，如：
然后，將這些組件統一添加到同一個變體下，之后創建的副本，就可以在右側變體面板中進行多維度的選項操作了。
具體的變體設置，分類、值的設置，可以自己在軟件中摸索，我就不演示了。這里再額外提一個功能，就是對值的設置上，還可以應用 “布爾” 的規則，即選項中只包含 “是” 或 ’否“。
如果我們在色彩的值中只使用 ”是，否“、”yes，no“、”開，關“ 等反義詞，那么副本變體選項中就會啟用開關按鈕，來替代原本的下拉菜單，提升操作的效率。
變體的使用可以很好的減少組件面板中組件的數量，提升組件狀態切換的效率。如果一個組件創建變態后被嵌套在另一個組件之下，那么這個復合組件也可以快速修改下級組件的變體類型。
雖然變體功能看起來非常強大，但它并不能適用所有場景，因為修改起來影響的要素過多。它更適用于基礎的控件和組件類型。如果針對復雜組件，尤其是包含多層組件嵌套的場景，往往使用命名的方式會比使用變體更有效率，這就需要大家自己在項目中積累經驗做判斷。
通過前面的功能，就可以完成組件庫的對應設置了，你可以在這個項目文件中調用這些組件完成項目。
但實際項目中，組件庫的使用可不能被局限在一個項目文件里，我們往往會創建很多個項目文件，來設計不同的流程、版本、模塊。于是，這些不同的文件都需要調用同一個樣式和組件庫。
所以，要讓包含規范的文件能被其它文件引用，就需要我們在組件面板中，點擊設計庫按鈕，在彈窗中點擊 ”發布“，將它創建成一個設計資源庫。這樣，我們在別的文件中再次打開這個面板，就可以看到這個資源的開關，點擊開關后，該文件就能調用里面的樣式和組件了。
在項目中，需要先新建團隊并邀請相關成員，然后再創建設計資源庫，那么其他設計師才可以引用該資源來完成相關頁面的設計。
至于每次原文件更新并落實到引用的其它文件這些細節操作，就需要大家自己去實踐了。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
度咔是百度短視頻生態首款面向泛知識創作者的視頻剪輯工具，致力于降低泛知識類作者的創作門檻，助力生產優質的作品。
隨著產品的功能迭代，體驗的逐步更新，產品依勢也需要打造更好的運營氛圍和品牌印象來建立用戶口碑、提升轉化。對此，設計側針對度咔產品進行了全面的思考和分析，通過重新定義度咔運營視覺語言，明確產品調性，幫助用戶更新品牌認知。
一、品牌框架搭建
產品的運營視覺不只是單純的畫面展示，其背后都有更加明確的設計理念和手段，但運營視覺語言并不是千篇一律的，首先需要明確自身定位，突出產品獨特性。
設計初期，我們針對同類型產品與用戶類型進行了大量分析，在用戶人群劃分上度咔更具有針對性，目標用戶是口播自媒體、知識類創作者。但不像專業剪輯軟件門檻那么高，度咔更多的是通過特色產品功能幫助作者去降低剪輯門檻，業務主要通過征稿和教程的運營活動來提升用戶認知，帶動日活。
由此，我們梳理出度咔的品牌框架圖。以度咔「專為口播自媒體打造的剪輯工具」產品定位作為切入點，依據其自身定位和度咔區別于同類產品的特色功能，我們提煉出“便捷”、“智能”、“專業”產品核心關鍵詞。
二、定義度咔運營視覺語言
在前期創意階段，我們通過大量的競品調研、創意發散、概念嫁接等創意手段，找到時下大字為主導的版式創意。簡潔明確的版式結構，適當的畫面留白，使各元素在版面中形成具有條理清晰、富有節奏的視覺關系。這種邏輯方式，為運營視覺的高效、科學、嚴謹性提供了極大的便捷，同時也對應了度咔便捷、智能、專業的品牌感知。
對品牌定位、業務訴求、產品功能進行整合后，我們搭建以構成、配色、元素為主的視覺語言框架。
與時下大字為主導的版式創意相結合，建立以大字排版，強構成感為主的視覺語言基調。通過大量的風格測試不斷完善視覺基調并投入到項目中，同時規范運營功能排版，搭建元素庫，通過設計手法，達到專業與簡潔的平衡，統一的視覺基調和品牌色強化用戶對品牌認知。
1、重塑視覺基調：
1）統一風格
度咔以往的運營視覺趨于參差，導致整體視覺有較為強烈的割裂感，煥新后的視覺變得更加直率簡約，以簡潔的視覺風格保證內容傳遞的高效性。拋棄了諸多裝飾元素，取而代之的是硬網格，保持視覺整體和諧統一感，同時也傳遞出度咔便捷、智能、專業的產品調性。
我們對運營頁面進行了布局重構，采用白色底的背景突出文字信息，使得內容信息傳達更加明確，突出核心內容。在各類場景中，我們通過品牌色彩、圖形、符號的滲透，強化度咔品牌印記。
2）主題延展
根據業務訴求，保持主題性征稿活動的特色——在強化功能點的運營活動中采用3D元素和彌散漸變背景，如夏日主題將度咔符號與泳圈做3D創意結合，增添活動氛圍感。
2、品牌色煥新：
1）建立度咔品牌色應用規范。增強品牌識別性和記憶點。
首先搜集符合產品調性的顏色情緒版，選取整體偏明亮，識別度高的新品牌藍色。對比原來偏紫的品牌藍，現在升級后的藍色更顯專業智能，且更具有電子意味。
在一個科學有效的色彩系統里，往往包含至少兩種色彩：主色+輔助色，兩者互相搭配組合成產品體系的整體色彩感受，減少用戶在產品體驗中對反復出現的主色的視覺疲勞。
我們將藍色賦予了統一的品牌認知感受，并且將藍色加入到橙色里，生成了度咔特有的藍橙色系。橙色在度咔的色彩系統中起著至關重要的作用，為產品帶來積極，活力的感受，同時深黑和灰色創造結構、表達邊界、建立信息層次。
以基礎征稿活動為主的頁面使用度咔標準藍；在需要強主題和活動氛圍的頁面加入輕量的彌散漸變色彩。
3、提升效率：
1）元素庫搭建
建立度咔元素庫，規范化運營活動主視覺圖形原創性和創意性，沉淀設計資產。
由于后期運營活動多處用到3D元素，對3D的質感進行了規范統一。輕量化的3D風格更加注重極簡主義理性美學。
考慮到運營頁面的通用性，避免3D材質的喧賓奪主，材質風格以簡單通用為主，顏色以品牌色為基礎，采用光感通透的玻璃材質，加入環境光感。明朗，透傳度咔的品牌氣質。
四、總結
本次通過度咔運營視覺語言的搭建，無論從產品本身還是設計側，在數據和效率上都有明顯的提升。而設計作為和用戶最近的一方，在平衡各方訴求后呈現給用戶一個全新專業感十足的產品，進一步向用戶傳達品牌感知，助力創作者發現更多美好。
感謝閱讀，以上內容均由百度MEUX團隊原創設計，以及百度MEUX版權所有，轉載請注明出處，違者必究，謝謝您的合作。申請轉載授權后臺回復【轉載】。也歡迎加入MEUX,視覺/交互/運營設計師，可投簡歷至MEUX@BAIDU.COM (注明信息獲取來源如：站酷）
關于我們：
MEUX,百度移動生態用戶體驗設計中心，負責百度移動生態體系的用戶/商業產品的全鏈路體驗設計。服務的產品包括百度APP、百度搜索、百度百科、百度貼吧、百度商業產品等。MEUX以「簡單極致」為設計理念，創造極致用戶體驗的同時賦能商業，推動設計行業的價值和影響力，讓生活因設計而更美好。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
借此機會和大家交流一下項目背后的思考，共同進步！
我將從以下幾個方面進行講解：
01 對于理念的思考
02 關于風格的思考
03 關于背景的思考
04 關于材質的思考
對于本次設計，需求方是沒有給主題限制的，那作為設計師的我就從自身現階段的生活去發現主題、尋找靈感。 從深圳到成都創業，將近一年的時間，我發現成都的天氣總是陰沉沉的：
充足的陽光變得非常稀缺，對于成都人來說，如果有陽光的時候，都會去外面坐坐，曬曬太陽！ 這一年，“光”對我說是一種期盼的事物：
基于這個生活細節，我就把主題定成了“追光空間”而我對于“追光空間”的理解就是：光感、純凈、靈動
后面的執行也是基于這個理念進行思考創新的！
有了主題，就可以基于主題去思考設計風格了。
其實主題圖標的設計其實已經有很多年頭了，尤其是“app”這個概念流行開始，各大安卓手機品牌就有了自己的主題商店，用戶可以根據喜好下載自己喜歡的主題圖標。 我們在網上搜索主題圖標，可以看到很多作品，其中不乏有非常優秀的主題作品，但是當觀察的量到達一定程度后，會發現市面上的主題圖標風格還是比較相似，大部分還都是屬于二維圖標（下圖源自網絡）：
即使是一些質感很強的圖標，很多也是鼠繪出來的，也不算是3D風格（下圖源自7years）：
包括我們去年給小米做的幾套主題，也都是偏2維風格的
基于這樣的現象，我們是否可以嘗試將3d風格與主題圖標進行融合呢？雖然不能說是第一個這么做的，但至少在市面上出現的這種結合還是相對較少，所以也可以算是一種小的創新。
在構想風格的時候，我的底層邏輯就是找到未被發現的切入點，如何理解呢？
如果是3d風格與電商活動結合，已經相對常見了（下圖源自網絡）：
如果是3d風格與游戲視覺結合，也經常會看到（下圖源自網絡）：
但是如果是3d風格與主題圖標結合并且落地使用，那還是相對比較少的，這就是我在思考風格時候的一點心得：
希望可以給同行們一點啟發，拋磚引玉，希望市面上可以看到更多的3d風格的主題圖標！
這次的主題和以往不一樣，我們每做一個圖標需要延展4個尺寸：
有一些寬的、有一些高的，如果我們只放一個圖標，那么會比較空曠，不夠飽滿，所以我們必須在背景上加一些圖案或者紋理，使整體更加飽滿精致。
背景紋理怎么做呢？我們希望它有細節但又不能過于搶眼，于是把目光鎖定在了基礎形狀上面，比如方形、圓形、三角形等等：
鎖定基礎形之后，就需要在基礎形之上融入更多的設計思考，比如風格的結合，因為整體是3d風格，所以背景也可以是3d化的基礎形白膜：
除此之外，我們需要將圖形進行構成設計，以不同的節奏和位置使其產生不同的美感，把基礎美多維度的釋放出來，比如矩形的基礎元素進行構成設計：
這樣，就可以做出不同的背景圖案，以此來解決需求目標。
設計師一定不要輕視基礎，不管是技法層面還是審美層面，往往優秀的設計都是無數個“基礎”堆出來的，先掌握基礎，才能用“基礎”釋放更大的能量！
其實本次的材質，也不算難，沒有用到特殊材質，主要有兩個關鍵點可以分享交流！
關于燈光
燈光我們使用的是日光燈，從軟件操作層面沒有任何技術含量，但是對于基礎審美會有一定的門檻，尤其是對于明暗交界線、光影對比的理解！
燈光的不同位置和大小會導致光影質感的不同：
燈光曝光：
質感太平:
物體與背景區分度不夠:
同樣的物體，不同的燈光角度和大小就會有不同的質量等級：
只有這種基礎審美達標后，我們才能繼續往后延伸。
關于材質
對于材質，最初我們嘗試用最簡單的漫射材質，但是發現缺少光澤度和細節，于是又嘗試在外部加一層玻璃材質，形成一圈透明質感和細節：
后面大部分的圖標都采用這種形式進行延展！
以上就是這次項目背后的一些思考
共勉！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
導語
近年三維表現已經越來越多的融入到各種商業設計當中，在電商、品牌、UI、影視等各個領域都有廣泛的運用。其中一個關鍵因素是C4D這款軟件的出現，大大降低了3D設計的學習門檻。
C4D相對于專業性更強、功能較為復雜的3DMax、Maya、ZBrush等軟件，界面更加簡潔友好，對于沒有接觸過3D的的小白，學習成本更低。配合Octane、Redshift等渲染器，可以很快做出強視覺表現力的效果。憑借這種操作友好、易出效果的特性，C4D很快成為了近年最流行的3D設計軟件之一。
本文結合作者自身的經驗整理了一波自學的思路和技巧，希望能在大家學習C4D的過程中有所幫助。
前言
相信很多沒有三維設計基礎的小白，剛接觸到C4D時會有無從下手的感覺，面對各種形形色色的命令菜單和工具面板，內心是這樣的：
其實大可不必擔心，不同方向的設計師可以有不同的側重點，只要掌握自身職業需要的模塊，并不需要學會所有的功能。追求大而全反而難度大效率低，容易產生挫敗感從而被勸退。
所以這里建議的C4D學習思路是：結合自身的職業方向，先明確要學習的側重點，集中精力突破，然后再根據新的需要逐步學習更多即可。
學習過程則大體上分為入門、上手、實戰三個階段。
Part 1. 入門
1.1 明確學習方向
C4D大體可以分為建模、渲染、角色、動畫、運動圖形、動力學這幾個模塊，每個模塊都可以看成是獨立的知識體系，往下又有更具體的細分。真要全面仔細鉆研的話，需要投入很多的時間精力，這也是讓很多初學者無從下手甚至望而卻步的原因。
所以除了建模和渲染是繞不開的基本模塊，我們可以將另外幾個看成是比較具有針對性的模塊，具體需要著重學習哪一部分，則需要先明確最適合自己的學習方向：
比如你是電商設計師，平時的工作內容主要是制作各種產品高大上的渲染圖以及推廣視頻，那除了基本的建模與渲染，還可以著重學習運動圖形，做出各種酷炫的商業廣告視頻；
如果你是IP設計師，則需著重學習角色模塊，在完成靜態角色的建模渲染后，綁骨骼刷權重也是必須掌握的知識點，才能做出豐富的動作和表情，讓角色生動起來；
總之，不同職業方向，甚至項目的不同時期，都有不同的學習側重點，這里需要每個人自己去判斷。
建模和渲染則是最常用的兩個模塊，無需有職業方向的針對性，都應該在前期優先學習，并且做到基本掌握甚至熟練運用。
常規的步驟是先學習建模，再學習渲染；不過建模比較枯燥，渲染則是最出效果也是最提升學習信心的環節，我認為根據個人喜好，先學渲染再學建模，反而是更推薦的學習順序。
1.2 選擇學習資源
選擇學習資源方面，目前網絡的免費教程十分豐富，依靠教程的學習足以讓你初期快速的上手，新手在選擇教程方面盡量以體系較為完整，演示時軟件版本較好的原則，如英文水平較好建議去外網看看各路大神的教程，原汁原味的學習；另外考慮到外網資源的機翻和獲取難度的原因，這里主要推薦一些國內網絡能獲取自學資源：
建模
建模方面在學習階段主要注重C4D的工具使用和基礎技巧，這里推薦幾個免費教程。
1、https://www.bilibili.com/video/BV1Cb411T7Dc?p=1&vd_source=018f00780190d4b9c79b5abbdb3be276
2、https://www.bilibili.com/video/BV1PZ4y1s7vm?p=1&vd_source=018f00780190d4b9c79b5abbdb3be276
渲染
渲染以OC渲染器為例，這是現網能找到比較完整的免費教程，學習后可以直接上手出圖。
1、https://www.bilibili.com/video/BV1ur4y1T72V?p=39&vd_source=018f00780190d4b9c79b5abbdb3be276
2、https://www.bilibili.com/video/BV1f4411V7qh?p=1&vd_source=018f00780190d4b9c79b5abbdb3be276
動力學
動力學可以由淺入深，從基礎的常用動態手法及運動原理開始入手，以小實例練習的方式慢慢轉向大場景的動態設計學習。
1、https://www.bilibili.com/video/BV17f4y127uv/?spm_id_from=333.788.recommend_more_video.1&vd_source=018f00780190d4b9c79b5abbdb3be276
2、https://www.bilibili.com/video/BV1ZA411w7qC/?spm_id_from=333.337.search-card.all.click&vd_source=018f00780190d4b9c79b5abbdb3be276
更多綜合性實戰教程
各大網站都能找到不少實戰案例的教程，根據需要可以找到更多。
1.https://www.bilibili.com/video/BV177411P7d1?p=1&vd_source=018f00780190d4b9c79b5abbdb3be276
2.https://www.bilibili.com/video/BV1AY4y1G7Nc?p=1&vd_source=018f00780190d4b9c79b5abbdb3be276
1.3 軟硬件配置相關
打團下副本之前，還得先準備一下裝備；這里簡單對于萌新學習前的軟硬件要求做一些說明和推薦。
渲染器選擇
C4D目前可選主流的渲染器有octane、阿諾德、Redshift、vray、自帶渲染器（不推薦）。主流渲染器各有優缺點，綜合下來筆者推薦萌新選擇OC渲染器，原因是學習資源多，學習難度低，渲染效果優、渲染速度快等優點。
以下是各渲染器的對比，萌新們可權衡自身的情況進行選擇：
電腦配置
在PC電腦方面，以筆者正版OC4.0渲染器為例，顯卡選擇N卡，型號以20系列以上最好，顯存4G以上（有經費的可以入手今年的40系列顯卡）；其他配置看自己的經濟情況而定，如CPU方面單核性能越強對于渲染效率和c4d默認渲染器的加速越快，內存推薦64G以上，另外在電源上如果已經配備了20系列以上的顯卡建議選擇900W以上的，除了顯卡和CPU這兩個核心硬件其他的配置主要看個人情況而定，對電腦不懂的優先看電商平臺的整機方案，主要以顯卡和cpu為參考依據，其他的配置可浮動選擇。
在蘋果電腦方面，筆者并不推薦以3d工作為主的設計師選擇蘋果電腦，主要原因是主流渲染器的選擇較少，另外C4D插件各方面的支持也遠不如PC方便和豐富（如有特殊原因，可以優先選擇M1芯片的電腦或者配備N卡獨顯的蘋果電腦）。
軟件版本
C4D軟件版本推薦使用最新版本或者R23以上版本，隨著廠商的更新換代，有些以前只有插件能完成的功能慢慢完善在新版本上，新版本帶來的便捷功能可提高萌新的出圖效率并免去舊版本沒有兼顧的功能導致的學習成本浪費問題。
另外在OC渲染器上的版本問題盡量以當前版本能兼容的最新OC為主，當然，需要你的顯卡需要和OC版本是匹配的情況下。
1.4 好記性不如爛筆頭
收藏和觀看的教程多了，容易看了后面的忘記前面的，或者沒有實際上手印象不深。這里我嘗試過最好用的方法可以總結為一句話，就是俗話說的“好記性不如爛筆頭”。
對于一些關鍵的知識點，或者很有用的上手練習案例，可以在自己學習或者練習后，將關鍵步驟以在線筆記的形式自己整理一遍。
這樣做有兩個好處，一是能大大加深你對知識點的印象，不易遺忘；二是即使真的隔了很長時間有所遺忘，只要調出對應的文字筆記，就能很快重新想起對應知識點，比起重新翻出視頻教程，邊拖進度條檢索再看一遍，效率高得多。
比如我之前在學習渲染體積光效果（丁達爾效應）時，總是掌握的不扎實，學過就忘，下回再用到時，基本相當于又要翻出視頻教程再看一遍，效率很低。但是將關鍵知識點整理成筆記后，不單對這個知識點記得很牢，甚至能在不重新翻看筆記和教程的條件下，熟練的以教程中提到的三種不同方式做出體積光。
筆記鏈接：https://note.youdao.com/s/Lwt42DsG
以下是我整理的部分筆記庫，感覺在筆記庫里的知識點才算是比較掌握了的。
1.5 多搜集優秀案例
除了掌握工具，多看優秀案例以提升自己的設計思維和審美也很重要，只有看的優秀案例夠多夠好，將自己的設計眼光、審美水平、思考方式向大神們的靠攏，才能做出好的作品。
這里推薦幾個我覺得的很贊的3D類網站：
Artstation：http://www.artstation.com；
Sketchfab：https://sketchfab.com/feed；
Behance 3D：https://www.behance.net/galleries/3d-art；
Dribbble 3D：https://dribbble.com/search/3d；
Part 2. 上手
2.1 熟能生巧多練習
上手階段，充分的動手練習是必不可少的。
這里的練習也分為兩種，一種是跟隨教程案例做出一樣的效果，一種則是結合自己感興趣的題材設定一個主題或場景，將學習的知識點融會貫通，在自己的命題作品里實際應用起來。兩種練習的方式也是相輔相成，在積累足夠多的教程案例練習后，更推薦按照自己的想法來創作。
比如我會將自己感興趣的漫畫題材，在C4D里作為一個場景練習，融合進平時學的一些知識點。
《頭文字D》場景
《海賊王》場景
因為用的是自己感興趣的內容練習，所以做起來也上手很快，知識點也記得很牢，推薦大家可以試試。
2.2 善用插件提效率
1.Forester-植物生成插件
輕松生成各種類型的植物和部分巖石，各項小參數的調整方便個性化的調整，另外有便捷的動力系統可以輕松制作風吹植物的效果，結合OC渲染器的克隆功能搭建大場景非常輕松，適合在做動態設計的時候快速生成搭建場景。
2.QuadRemesher-四邊面重拓補
有時候我們工作中會遇到三角面模型，對于新手來說轉換成四角面模型可以選擇這款插件輕松轉換成你想要的四角面而且還有便捷的參數可以調整。
3.PolyCircle-挖洞插件及Nitro4D NitroCap-封洞插件
在日常建模的工作中經常需要給模型開洞及封洞的操作，雖然靠布線調整也可以實現，但是插件的效率更便捷，所以推薦這兩款插件分別對應的模型開洞及模型封洞的功能，另外注意在C4D軟件R26之前都是必備的插件，但如果你軟件版本是R26以上版本，那么自帶整合了這樣的工具，不需要額外安裝插件了。
4.CodeVonc Proc3durale-鏤空腐蝕溶洞效果插件
這是一款風格化的效果插件，可以配合噪波制造出獨一無二的風化、鏤空、分解動畫、甚至是流體動畫的效果，在產品設計及品牌動態視頻中運用廣泛。
（圖來源于網絡侵刪）
5.TerraformFX-地形插件
這塊地形插件，可以讓你輕易搭建自然環境，制作次時代的虛幻場景，操作簡單，可以在Cinema 4D 中生成、動畫和逼真的地形。在幾秒鐘內創建非常詳細的山脈、峽谷和沙漠。直觀的非破壞性工作流程可以輕松創建和自定義地形。
（圖來源于網絡侵刪）
Part 3. 實戰
在入門的學習和上手的練習之后，相信很多人都會對C4D有了初步的掌握。這時更重要的當然是將這些學到的知識點運用到實際項目當中，這樣的實戰操作才能讓你的知識體系更有針對性，并且實際項目命題固定、要求更高，完成后的提升才會更大。
這里分享幾個在完成基礎的學習與練習后，我們用C4D做的實際項目。
3.1 QQ小游戲-春節會場
小游戲會場是從QQ春節活動的主會場進入，通過限時抽獎以及游戲任務等形式，引導用戶參與活動，從而提升業務增長和助力品牌傳播。
在前期設計推導階段，我提煉了三個設計關鍵詞，并對應發散出一些相關元素：
一是游戲：這是凸顯平臺特色和趣味性的元素；
二是福利：這是強化用戶參與活動的動機；
三是春節：春節活動不可少的是體現節日氛圍的元素；
根據這些元素畫了三個方向的概念草圖，分別以游戲機、扭蛋機、街機作為主要載體。
最終我們選擇了通過破窗的形式將Q猛虎結合進場景中的方向一，展示游戲和奪寶元素，讓用戶感知福利的同時，也體現小游戲平臺的特色和趣味性。
創意上是參照超級瑪麗這種經典的橫版過關形式，也將中國傳統建筑中的紅墻金瓦、松樹、福袋這些元素融入在了畫面中。
游戲機場景及其他主要元素建模
場景白模及空間構成設定
角色及福袋動態的制作，這里主要用到了角色及動力學模塊相關的一些知識點。
渲染完成后的主視覺，Q猛虎在游戲機上往前奔跑，不斷獲得福袋并蹦出金幣、紅包實際UI中的應用效果
實際UI中的應用效果
另外將主視覺中的“松樹”，延展成了松、竹、梅、蘭這四種具有傳統中國風的植物，作為輔助元素運用到頁面中，保持整體調性的統一。
部分主要頁面總覽
3.2 QQ紅包-節日封皮
節日紅包封皮是傳遞用戶關懷的重要手段，作為QQ紅包的一部分，我們希望讓用戶有更新穎的感知和更深刻的共鳴。
相對于常規的插畫手繪風格，我們希望嘗試用3D的方式做一些新的探索。
在構思中秋節的紅包封皮時，首先圍繞“中秋”進行關鍵詞發散
再選取其中桂樹、玉兔、明月等這幾個適合構建場景的元素，構建成一個立體化的場景
將一些元素抽象化，結合3D手法，加入更有意境的表達
最終完成的效果，整體也是塑造一個比較有中國風和意境的場景
新年封皮也是用同樣的方式完成，像剛才中秋的桂花樹一樣，這里也將錦鯉也做了一些抽象化的表達，比如魚的眼睛是寶石質感，魚的身體是黃金質感，傳遞一種新年好運、財運連連的感覺。
最終完成的效果，QQ和banyQ坐在錦鯉背上，手上拿著銅錢串在吊錦鯉，寓意新年大吉大利、錦鯉附體。
新版封皮的使用量對比舊版有了較大提升，可以看出用戶對新版封皮的喜愛程度還是很高的，目前的節日封皮也是按照新風格持續延展中。
Part 4. 結語
以上就是本文的全部內容，希望能幫助大家在學習C4D的過程中有所幫助，總結下來就是多看多練多運用。對文中提到的插件感興趣的朋友，也可以通過附上的鏈接去官網了解更多詳細介紹。若是大家有更好的學習建議，也歡迎在評論區留言一起討論。
作者：騰訊ISUX
鏈接：https://www.zcool.com.cn/article/ZMTUxNDU4MA==.html
來源：站酷
界面設計的好壞，會直接影響到用戶的使用體驗，很多時候我們往往會直接拿到競品的頁面搬運到自己產品上，而沒有針對自身產品的特點和業務加以思考。
這種做法理論上不會讓自己的頁面出錯。但是很多人往往忽略了一點，就是別人這么設計的出發點是什么，是否匹配自身產品的業務流程，如果不了解這些貿然的去搬運設計，那么時間久了就會養成一個不好的習慣，導致思維不能得到足夠的刺激和知識的沉淀。當需要我們專門進行設計構思時，就會遇到諸多困難。
如果是剛入手的領域，前期可以去進行適當的搬運參考，但是一定要了解別人設計思考點，明白其背后的原因，將其沉淀成自己的知識儲備在腦海中。
過去60年，人類社會的數據發生了爆炸式增長。2008年人類大約創造了近10億張DVD能存儲的數據，這等同于過去5000年的人類創造數據的總和。12年，調研機構預測信息每隔18月會翻一倍20年，調研機構預測信息每隔73天會翻一倍
在信息爆炸的年代，人類進化的速度卻是緩慢的，我們現在的大腦跟250萬年前的原始人并沒有太大區別。
我們的大腦每秒鐘要接收約4000萬次的感官信息輸入，但意識一次能注意到其中約40個，其中短期工作記憶能處理的只有4±1個。
正是由于現代信息數據的大爆炸，多數產品日益臃腫的結構，以及人類有限的處理能力，所以呈現什么信息，以何種形式呈現的信息層級設計就非常重要。
作為設計師，我們有必要根據自身產品的業務方向，以及用戶的行為和特征，結合信息環境，選擇合適的信息，并以適合的方式進行組織和呈現，以便讓用戶獲取并理解信息更容易，完成信息的組織和傳達作用。
相關聯信息需要進行歸類，無論是什么類型的產品模塊，我們在設計中應當做好信息分層，當兩段內容元素具有關聯性時，他們應當作為一個整體給用戶展現。
（1）層級數量應靠近“3”
信息層級作為影響頁面信息傳達效率的重要因素之一，那么怎樣做好頁面的信息層級便尤為重要。網上資料大多都在圍繞對比、對齊、親密、重復四個基本原則講解。
不可否認的是這四個方法對于我們排布信息層級確實起到了很大的作用，并且也是我們非常熟悉的。但其闡述得太過寬泛，在我們實際工作中面對復雜層級排版時，仍會面感到困惑，很難直接有效地利用。
于是我把優秀的案例進行收集并整理分析。
經過線上頁面與概念的整體研究發現，他們在遵循排版原則的基礎上，都存在著一個簡單的規律：主內容的層級控制在三層左右。
如下圖所示：
可以發現，三層左右的層級是最容易被用戶識別的，且視覺上不易混亂。三層往后，隨著層級越多其復雜性會成比增加。
比如我們看下面這兩個例子，左邊層級方面平鋪直敘沒有重構區分，使得層級復雜，造成用戶識別效率變低。但其實我們只需要對信息加以歸類并控制層級數量，瞬間就變得更簡單且易懂。
因此，我們需要在著手設計前，首先思考一個邏輯：盡量將我們的內容層級控制在三層左右，且這三層內有比較明顯的對比關系。
有朋友看到這肯定要問了，這個道理大家都懂啊，可是在實際工作中大多數拿到的信息都非常多，根本做不到保持在三層以內。別著急，本文的重點當然不是告訴你這么簡單的道理，而是在面對復雜層級的時候，我們應該怎樣去控制它的層級表現，從而讓它在最終呈現上保持在三層左右，讓用戶獲取信息的效率更高。
（2）源頭篩選處理
源頭篩選的關鍵在于接手復雜信息時，我們首先需要從源頭上進行第一層的判斷，了解這些信息是否真實地被需要。這也是我們大多數人容易忽視的一點，當然這也不能完全怪我們，因為通常需求給到我們的時候都是大致的概括，好一點的話還有個交接文檔，甚至有時候需求拿到我們手上時，已經轉好幾手了交接人可能也不知所云，導致很難知曉其底層出因，
源頭篩選的本質就是判斷我們當前所要呈現的信息是不是必要的。
比如某些時候產品給到了我們很多信息，但我們并不一定會全盤接受，而是通過當前頁面的業務場景去進行判斷。確定每個信息的合理性，從而可以決定有些元素是否可以刪減，提高整體信息設計的一致性。
過程需要我們對以下2點進行思考：
上述兩個問題的確認，會影響我們對后面的信息排布。因此我們需要在源頭，比如去和產品或者業務溝通，弄清楚該信息呈現的緣由以及必要性，這樣能夠幫助我們最后理清楚信息層級。
（3）在排布上降低復雜度
信息排布的本質是通過我們對信息進行主觀的排列上的組織重構，來將復雜的層級控制在三層左右的區間里。從而保證我們頁面的簡潔性、規律性、識別性。
通過目前的實踐總結，合理地安排信息層級的方法大致可以分為：分組、組件、組織、融入、弱化。
① 信息分組
信息分組是大家在設計時都能夠想到的形式，分組能夠將復雜的信息歸組從整，從而降低整體復雜度，清晰線索。
我們常用的分組方式主要有三種：間距、分割線、卡片。
那么這三種方式有沒有區分呢？
VIVO設計團隊曾經就這個問題展開過用戶調研，但結果表示，如果純粹從用戶的角度來講，對其變化感知不大。但這三種分割方式會影響我們在呈現信息時的整體視覺觀感，因此我們可以根據當前信息的復雜度作出以下規則：
② 利用組件拆分
組件其實是目前大部分設計師在進行信息排布時必備的部分，因此對于這部分設計師的熟練度也是最高的。而本篇想要強調的是，目前這幾種組件對于我們信息層級的劃分起到了比較重要的作用：樹形結構、表格結構、步驟條、選項卡。
③ 靈活組織
通過對組織方式的調整，我們可以將多層結構的樣式通過拆分布局來將其控制在三層內。
舉個簡單的例子：
從圖中你可以看出左側的層級較多，尤其是兩層tab的疊加，視覺上就會顯得稍微有點凌亂。我們可以通過將第二層tab換個布局，從上下結構變為左右結構，達到從視覺上簡化層級的作用：
當然以上只是舉了一個簡單的例子。這里底層邏輯就是當遇到相對比較復雜邏輯時，我們可以通過改變結構使其交互邏輯更清晰，從而減少其復雜度。
④ 巧妙融入
我們可以利用信息融入的形式來減弱其對層級的影響。信息融入從本質上講就是將某兩種層級信息通過不同的組合方式，讓其融入到同一個層級中。比如我們看下面這一個例子，產品設計中將button與查詢項利用分割排列在一起，從而變為同一層級，通過這種方式有效降低了頁面的復雜度。
當我們在進行B端布局時，信息融入這個方法用得比較多。比如我們最常見的標題、搜索和按鈕等都放在同一行上。這樣既能夠節省視覺空間，還能夠降低信息層級的復雜度。
但在進行信息融入的過程中，我們需要注意的是：如果放在同一層級會造成理解上的誤解時，這個時候不要采用該方案。比如搜索框的位置，放在哪個層級決定了對應的搜索范圍。
⑤ 信息弱化
信息弱化的原則是：將某些超出層級的部分進行弱化。
比如圖中有5個層級，但其巧妙地將功能篩選融入到了當前的結構中，使得即使超過3層我們也不會覺得其特別復雜。
在很多時候，我們覺得信息混亂的原因，就是頁面要素太多太花哨。
比如工作中的一個小卡片，也就是利用信息弱化去減少畫面的復雜度：
因此我們需要學會對信息分級，不重要的信息就進行弱化，這樣整體的呈現上會好很多。
但不可否認仍會有更復雜的頁面，即使縮減也仍有過多層級，那么這個時候就一定要記得最開始的從源頭去追溯這些所有信息是否必要。
（4）突出熱區
當模塊具有按鈕、文字鏈、圖片入口等需要下一步操作的關鍵元素，需要進行高亮顯示，以此幫助用戶快速定位目標。
圖中 “Learn more” 使用文字高亮進行處理，通過顏色讓用戶快速定位入口，且不影響用戶正常閱讀，若使用色塊按鈕進行突出，模塊會冗余，過于喧賓奪主。
當產品需要用戶進行多步驟完成任務時，應當展示系統進度，讓用戶了解他們的行為操作在界面中所處于的位置。
比如下圖中房屋裝修信息填寫流程，用戶面對這種多流程任務時，耐心往往很低，我們可以在設計時添加系統狀態進度條，時刻提示用戶當前的節點，此方法應用場景還有注冊登錄、信息完善等更多場景，目的都是為了讓用戶達到交互可預測的狀態，提升用戶體驗。
我們在設計內容復雜的網頁時，建議根據產品訴求和用戶目標，合理的放置元素，以此來達到目標，另一方面符合眼動規律的瀏覽順序，可以讓用戶不會產生視覺疲憊，每個視覺點停頓時看到元素都是不同，提升用戶體驗。
在設計大面積文字排版時，應當注意字體粗細，它決定著我們的設計是否易讀性高。
無論標題還是內容，字體過重或者過輕都會降低文本的基本識別度，而且遇到文字信息過多的情況，長時間專注文本的識別很容易出現視覺疲勞的情況。
在設計UI界面中，無論是長文字體還是模塊元素字體，我們都要注意字體的重量，保證基本識別度的同時，優化視覺重心，確保用戶在閱讀時不容易陷入疲勞。
當界面中存在多個入口時，我們可以對這些入口進行優先級處理，以突出核心功能為目的，用戶瀏覽界面的動作是大面積掃讀的形式，這就意味著我們需要弱化無關信息，既保證了界面的基本美觀性，又能夠具備良好的體驗。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
web自動化測試作為軟件自動化測試領域中繞不過去的一個“香餑餑”，通常都會作為廣大測試從業者的首選學習對象，相較于C/S架構的自動化來說，B/S有著其無法忽視的諸多優勢，從行業發展趨、研發模式特點、測試工具支持，其整體的完整生態已經遠遠超過了C/S架構方面的測試價值。接上一篇文章，我們將繼續深入探討Selenium的相關使用方法與技巧。
此篇中所用的技術棧為Selenium+Python，因其本身編程難度不高，總體思想都是基于面向對象的編程理念，故只要大家的編碼語言基礎不弱，就完全可以做到平替。
在正式啟動瀏覽器之前，這里還需要說說上一篇沒有提及的一個問題，后臺有同學私信說在對應驅動網站上完全找不到自己瀏覽器對應版本的驅動，關于瀏覽器驅動的版本，大家都知道驅動的版本應該是要與瀏覽器的版本完全對應上的。但往往日常工作中因為環境或者其他客觀因素會導致瀏覽器的版本五花八門，也會出現驅動網站上完全沒有你目前工作環境中對應的瀏覽器版本，這里我們大可使用中版本號一致的驅動來進行嘗試，沒有必要將版本進行完全的匹配。比如你的Chrome瀏覽器的版本號為107.0.5304.107，如果這時對應網站只有107.0.5304.62與108.0.5359.22的前后兩個版本的驅動比較相近，這里就有兩個選擇，第一就是卸掉原有的瀏覽器，安裝對應的版本；第二則是選擇107.0.5304.62來進行嘗試；相信大家在成本耗時的判斷下，一般都會選擇第二個選項來進行嘗試對吧？那么我可以很負責任的告訴你，第二個判斷是完全行的通的。不必太過糾結驅動的小版本號是否完全匹配。
我們將一切準備就緒后就可以開始我們的selenium之旅了，首先我們需要將使用selenium進行瀏覽器的啟動（訪問百度）。
from selenium import webdriver
browser = webdriver.Chrome() browser.get('https://www.baidu.com')
如果對應的瀏覽器驅動沒有進行環境變量的設置，可以在代碼中直接進行程序的路徑指定來進行后續的瀏覽器操作。
from selenium import webdriver
path = r'C:\Program Files\Google\Chrome\Application\chromedriver.exe' browser = webdriver.Chrome(path) browser.get('https://www.baidu.com')
使用Selenium打開后的瀏覽器都會標識出正在受到自動化測試軟件控制的相關提示。
Selenium本身提供給了我們非常多的各類瀏覽器與頁面的操作函數，方便我們根據所需測試業務來進行自由搭配使用甚至是二開。
對于瀏覽器窗口的尺寸進行控制與獲取，如最大化、最小化、指定窗口大小等。
窗口全屏
browser.fullscreen_window()
窗口最大化
browser.maximize_window()
窗口最小化
browser.minimize_window()
自定義窗口大?。▽扻高）
browser.set_window_size(1080, 720)
自定義窗口坐標位置與大?。▁坐標，y坐標，寬X高）
browser.set_window_rect(100, 200, 1080, 720)
獲取窗口的大?。▽扻高）
browser.get_window_size()
獲取窗口的坐標位置，返回一個字典對象
browser.get_window_position()
獲取窗口的坐標與大?。▁坐標，y坐標，寬X高）
browser.get_window_rect()
獲取當前窗口的句柄
browser.current_window_handle
獲取當前所有窗口的句柄
browser.window_handles
對于瀏覽器當前頁面的一些操作，如前進、后退、刷新等。
前進（下一頁面）
browser.forward()
后退（上一頁面）
browser.back()
刷新（當前頁面）
browser.refresh()
截圖并保存為test.png（當前頁面）
browser.save_screenshot('test.png')
截圖并保存為png文件（當前頁面）
browser.get_screenshot_as_file('test_02.png')
截圖并將信息轉為base64編碼的字符串
browser.get_screenshot_as_base64()
對于瀏覽器當前一些信息的獲取與操作。
獲取頁面URL（當前頁面）
browser.current_url
獲取日志類型，會返回一個列表對象
browser.log_types
獲取瀏覽器操作日志，注意函數內的參數為固定值類型’browser’
browser.get_log('browser')
獲取設備操作日志，參數原理同上
browser.get_log('driver')
獲取當前頁面標題
browser.title
獲取當前瀏覽器的名字
browser.name
Selenium中最基礎也是最重要的一環，基本上對于頁面的業務操作大多數都集中與此。另外需要注意的是元素定位所使用的find_element_by的方法在很早之前就已經被廢棄，這里同樣也會使用最新的find_element方法進行講解。
如何查看頁面中的元素與其相關屬性，這里以Chrome為例，我們只需按F12或者右鍵頁面選擇“檢查”，再點擊調試窗口的左上角的箭頭標志或者使用快捷鍵Ctrl+Shift+C來進行元素的選取，此時Elements標簽頁中會將焦點對應跳轉至該元素的html代碼行中，接下來我們就可以針對不同的元素和不同的屬性來進行定位操作。
通過一個元素的name屬性來進行定位。
比如定位百度中的搜索欄，我們通過name屬性來進行定位。該元素的html構造如下：
<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">
我們只需將name屬性后面的值拿出，賦予給find_element方法即可。新的By方法我們只需要導入selenium.webdriver.common.by下的By方法即可。
from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep
browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.NAME, 'wd')
通過一個元素的class屬性來進行定位。
from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep
browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.CLASS_NAME, 's_ipt')
通過一個元素的id屬性來進行定位。
from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep
browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.ID, 'kw')
css selector也被成為選擇器定位，它通過頁面內的元素的id、name、tag三個屬性來進行定位，根據元素屬性的重復程度，可以單獨屬性定位也可組合屬性來進行定位。而且相較于xpath定位方式來說，博主更推薦使用此方法來進行定位，無論是易用度還是維護性來說比xpath定位好的多。
單屬性定位–tag屬性
from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep
browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.CSS_SELECTOR, 'input')
單屬性定位–id屬性
from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep
browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.CSS_SELECTOR, '#kw')
單屬性定位–class屬性
from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep
browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.CSS_SELECTOR, '.s_ipt')
多屬性定位–tag+id屬性
from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep
browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.CSS_SELECTOR, 'input#kw')
多屬性定位–tag+class屬性
from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep
browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.CSS_SELECTOR, 'input.s_ipt')
同樣的，其他的組合方式大家可以舉一反三，不斷嘗試，比如模糊匹配input[class ~= "局部關鍵字"]、層級定位#form > span > input等等等等。
這種定位方式適用于頁面中帶有超鏈接的元素，直接通過超鏈接標簽內的文字進行元素定位。
我們以百度首頁為例，可以看到該頁面中有很多的超鏈接標簽，如果我們想模擬點擊跳轉至新聞對應頁面的操作，就可以用link text的元素定位方法來進行實現。
使用超鏈接標簽對中的“新聞”一詞來進行定位。
from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep
browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.LINK_TEXT, '新聞').click()
這個定位方式與link text定位十分相像，實際上也就是link text的模糊查找定位方式，對象也是超鏈接內的文字，只不過他匹配的不是全部文字而是局部。
from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep
browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.PARTIAL_LINK_TEXT, '新').click()
tag定位的效率總體來說不高，也不太推薦單獨使用，html頁面中一般也是由很多相同或不同的標簽對組成。就tag而言標簽重復的越多，定位的效率其實也就越低。
比如我們想在百度的搜索欄中輸入“selenium”關鍵字，那么光使用tag其實就很難達到我們的目的，甚至無法準確定位到我們想要的元素。如果運氣好，搜索欄的input標簽在html頁面中排在第一位那還好，只要不是第一位，我們就需要編寫其他的代碼邏輯來輔助我們繼續定位這個元素。
所以下面的代碼實在是不能稱之為高效的執行代碼
from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep
browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.TAG_NAME, 'input').send_keys('selenium')
一般來說無法通過以上的這些元素定位方法定位的情況下，我們會使用xpath定位方法。但這里需要特別注意，xpath方法分為絕對路徑和相對路徑兩種定位方式，博主只推薦如果真要使用xpath就使用相對路徑+正則表達式的方式來進行元素定位。不推薦絕對路徑的原因就不用博主多說了吧，只要你敢用，后期的腳本維護與復用絕對會讓你抓狂的。
還是老樣子，我們使用xpath的相對路徑寫法來定位百度首頁的搜索欄。
from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep
browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.XPATH, '//*[@id="kw"]').send_keys('selenium')
另外與find_element方法相對應的find_elements方法這里就不多做介紹了，該種方法是將當前頁面中所有能匹配上對應元素定位方法的元素全部獲取。大家可以根據自己的需求來進行選取和使用。
我們加載頁面時通常會因為網絡環境等各方面的客觀因素而導致元素加載的速度各不相同，如果此時我們沒有對業務操作進行一定的延時執行，那么大概率業務操作會出現各類的no such element報錯。
那么我們就需要在頁面元素加載完成之后再對相應的元素進行業務操作來規避上面說的這個問題。Selenium內可以使用三種延時的函數來進行對應的延時業務操作。
隱式等待的作用是在頁面加載是隱性的進行特定時長的等待，如果在規定的等待時長內頁面加載完畢，則會繼續進入下一個業務操作，如果沒有加載完畢，則會拋出一個超時的異常。這里其實有兩個問題，第一，隱式等待是全局性質的，也就是說一旦你設置了個5秒，那整個程序都會使用這個等待時間類進行配置，靈活性較低；第二，如果碰到了有些頁面中的元素是局部加載的話，那整個頁面的加載是否完成也就沒有了其意義，隱式加載無法針對這樣的情況作出調整，智能度較低。所以一般來說只要是對于頁面的整體加載要求不高或者元素的加載比較穩定的程序，都可以使用隱式等待來進行延時操作。
from selenium import webdriver from selenium.webdriver.common.by import By
browser = webdriver.Chrome() browser.get('https://www.baidu.com') browser.implicitly_wait(5) browser.find_element(By.XPATH, '//*[@id="kw"]').send_keys('selenium')
顯式等待的作用則是使用特定的等待時長來進行某些業務邏輯判斷，如果判斷（比如元素是或否加被定位）在時間完成那繼續執行下一個業務操作，如果判斷失敗也會拋出no such element的異常，而顯式等待的默認檢查元素周期為0.5秒。乍一看好像與隱式等待差不多，其實不然，首先顯式等待是針對頁面中某個或某組特定元素而執行的，隱式則是全局，對所有的元素都生效；其二，顯式等待可以通過自定義條件來進行元素的定位和選取，隱式則不行。
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.wait import WebDriverWait from selenium.webdriver.support import expected_conditions as EC
browser = webdriver.Chrome() browser.get('https://www.baidu.com') ele = WebDriverWait(browser, 10, 0.5).until(EC.presence_of_element_located((By.XPATH, '//*[@id="kw"]'))) ele.send_keys('selenium')
這個應該是平時大家代碼中用的最多的等待方式了吧，sleep是針對線程進行掛起的一種等待方式，等待時長根據指定的參數來進行決定。最大的好處就是簡單粗暴，無任何邏輯在里面，所以也被稱為強制等待。
from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep
browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.XPATH, '//*[@id="kw"]').send_keys('selenium')
那么以上的三種等待方式其實各有各的特點與缺點，三者之間沒有絕對的好用和不好用，而在我們的日常工作場景中也希望大家可以根據實際的情況有選擇性的使用。
元素加載超時我們可以使用以上三種延時方式來進行處理，那么頁面超時了又該如何操作呢？selenium也為我們準備了兩個函數來對應這樣的局面。
頁面加載超時
browser.set_page_load_timeout(30)
這里推薦將超時的時間有效的拉長，不宜過短。過短的超時時間容易導致整體頁面出現未加載html代碼情況下直接令驅動無法工作的情況。
頁面異步js或ajax操作超時
browser.set_script_timeout(30)
這個函數是用于execute_async_script()相關的異步js操作超時報錯，由于是異步操作，等待時間同理也不易過短。
瀏覽器中鍵盤與鼠標的操作也是不可或缺的重要一環，在被測對象的業務要求中往往占有不少的戲份。
文字輸入
browser.find_element(By.ID, 'kw').send_keys('selenium')
點擊
browser.find_element(By.ID, 'kw').click()
點擊并按住不放（左鍵長按），這些模擬鼠標操作需要導入ActionChains包
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains
browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw') act.click_and_hold(ele).perform()
右鍵點擊
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains
browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw') act.context_click(ele).perform()
雙擊
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains
browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw') act.double_click(ele).perform()
拖拽元素至另一個元素處，ele_a 為source，ele_b 為target
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains
browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele_a = browser.find_element(By.ID, 'btn_a') ele_b = browser.find_element(By.ID, 'btn_b') act.drag_and_drop(ele_a, ele_b).perform()
拖拽元素至指定位置后松開，元素后為x，y坐標值
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains
browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'btn_a') act.drag_and_drop_by_offset(ele, 200, 100).perform()
鼠標移動至指定元素
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains
browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'btn_a') act.move_to_element(ele).perform()
按下指定的鍵位（示例代碼中是回車鍵）
from selenium import webdriver from selenium.webdriver.common.keys import Keys from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains
browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw').send_keys('selenium') act.key_down(Keys.ENTER).perform()
松開指定的鍵位，這里也可以用鏈式寫法
from selenium import webdriver from selenium.webdriver.common.keys import Keys from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains
browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw').send_keys('selenium') act.key_down(Keys.ENTER) act.key_up(Keys.ENTER) # 鏈式寫法 act.key_down(Keys.ENTER).act.key_up(Keys.ENTER).perform()
移動鼠標到指定坐標位置
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains
browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw').send_keys('selenium') act.move_by_offset(100, 200).perform()
移動到距離指定元素多少距離的位置（從左上角0， 0開始計算）
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains
browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw').send_keys('selenium') act.move_to_element_with_offset(ele, 100, 200).perform()
在指定元素位置松開鼠標
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains
browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw').send_keys('selenium') act.click_and_hold(ele).release(ele).perform()
發送指定的鍵或者內容至指定元素
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains
browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw').send_keys('selenium') act.send_keys_to_element(ele, 'selenium').perform()
暫停所有操作，默認單位為秒
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains
browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw').send_keys('selenium') act.context_click(ele).pause(5).double_click(ele).perform()
頁面中也存在著很多不同種類的組件，比如單選框、多選框、下拉列表、選項卡等。這些操作也可以通過selenium提供的函數進行實現。
清除指定元素中的內容（輸入框等）
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains from time import sleep
browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw') ele.send_keys('selenium') sleep(2) ele.clear()
提交確認（類似于Keys.ENTER的效果）
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains from time import sleep
browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw') ele.send_keys('selenium') sleep(2) ele.submit()
下拉列表，我們就可以使用Select方法來實現選取操作
使用Select方法需要從selenium.webdriver.support.select導入該方法
例如下圖中某網站的下拉列表對象
html構造如下
select_by_index()方法
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.select import Select
browser = webdriver.Chrome() browser.get('https://www.xxxx.com') ele = browser.find_element(By.ID, 'input_factor_gj_count') # 需要注意下標要從0開始，選擇1%那一項 Select(ele).select_by_index('0')
select_by_value()方法
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.select import Select
browser = webdriver.Chrome() browser.get('https://www.xxxx.com') ele = browser.find_element(By.ID, 'input_factor_gj_count') # 指定元素的value屬性值，選擇1%那一項 Select(ele).select_by_value('0.01')
select_by_value()方法
from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.select import Select
browser = webdriver.Chrome() browser.get('https://www.xxxx.com') ele = browser.find_element(By.ID, 'input_factor_gj_count') # 指定元素的文本值，選擇1%那一項 Select(ele).select_by_visible_text('1%')
框架切換（Frame）
如果在頁面中定位某一個元素失敗并檢查其屬性并沒有問題時，就該考慮是否在祖先節點中是否存在frame或者iframe標簽。這樣的頁面就表名存在多層框架嵌套，這時我們就需要進行框架切換的操作，來準確定位到指定元素。
例如某頁面存在兩層frame嵌套，內部框架的xpath為：//*[@id="mainDiv"]/iframe，此時如果定位某個輸入框失敗之后，我們就應該轉而跳入該frame內進行元素定位。
from selenium import webdriver from selenium.webdriver.common.by import By
browser = webdriver.Chrome() browser.get('https://www.xxxx.com') # 定位到指定的frame path = browser.find_element(By.XPATH, '//*[@id="mainDiv"]/iframe') # 切換至該frame內 browser.switch_to_frame(path) ele = browser.find_element(By.CLASS_NAME, 'input') ele.send_keys('selenium')
標簽頁切換
我們瀏覽器在使用中一般會打開多個瀏覽窗口，也就是多個標簽頁。此時我們就可以通過每個標簽頁的句柄來進行定位和互相切換。
switch_to_window()
我們利用瀏覽器窗口的句柄來進行標簽頁的切換
from selenium import webdriver from selenium.webdriver.common.by import By
browser = webdriver.Chrome() browser.get('https://www.baidu.com') # 第一個窗口的句柄下標為0，打開第二個就是1 browser.switch_to_window(browser.window_handles[1]) # 此時就會使用第二個標簽頁去訪問淘寶 browser.get('https://www.taobao.com')
彈窗處理
頁面中時常也存在著各類的彈窗，比如警告、確認、提示等等，那么對于這些彈窗我們也有著相應的業務處理方法。
首先我們需要明確的是每種類型的彈窗中元素也是各不相同，所以我們針對不同的彈窗使用不同的屬性來定位和操作。
警告彈窗
一般來說就是告知到使用者執行某些操作與頁面之后將要注意的事項，這種窗口只需確認。
from time import sleep from selenium import webdriver from selenium.webdriver.common.by import By
browser = webdriver.Chrome() browser.get('https://www.xxxx.com') browser.find_element(By.ID, 'btn_tg_title').click() sleep(1) # 在警告彈窗中點擊確認按鈕 browser.switch_to_alert().accept()
確認彈窗
多用于在用戶執行提交操作后的動作確認，有確認和取消兩個選項。
from time import sleep from selenium import webdriver from selenium.webdriver.common.by import By
browser = webdriver.Chrome() browser.get('https://www.xxxx.com') browser.find_element(By.ID, 'btn_submit').click() sleep(1) #確認二選一 browser.switch_to_alert().accept() #取消二選一 browser.switch_to_alert().dismiss()
提示彈窗
這個通常用來處理用戶信息交互的場景，用戶可以通過彈窗輸入一些文字信息，來傳遞與進行后續的業務處理。
from time import sleep from selenium import webdriver from selenium.webdriver.common.by import By
browser = webdriver.Chrome() browser.get('https://www.xxxx.com') browser.find_element(By.ID, 'btn_info_inquiry').click() sleep(1) # 這里傳遞信息到提示彈窗，警告與確認兩類彈窗不可使用，會報錯 browser.switch_to_alert().send_keys('20100909')
既然是web自動化測試，那我們又怎么能少了Cookie的相關操作呢？用戶的狀態和業務請求都的需要用他來進行鑒權。在selenium中對Cookie進行操作其實也很簡單，首先我們需要手動的登錄被測網站一次，待網站Cookie存入本地后即可使用Selenium自帶的函數對齊進行業務操作。
首先我們獲取對應網站的Cookie值
import json from selenium import webdriver
browser = webdriver.Chrome() browser.get('https://www.baidu.com') # 寫入保存為文件還是直接打印至控制臺，各取所需 with open('cookies.txt', 'w') as f: f.write(json.dumps(browser.get_cookies())) cookies = browser.get_cookies() print(cookies)
接下來我們簡單的對獲得的Cookie進行處理
# 刪除所有的cookies browser.delete_all_cookies() # 循環打印cookie中的name和value for c in cookies: # 查看打印出的cookie對應的鍵值對 print("%s : %s" % (c['name'], c['value'])) # 根據自己的業務需求進行cookie的增刪改 cookie = {"name": "xxxx", "value": "xxxx"} # 最后添加即可 driver.add_cookie(cookie)
Selenium也為我們提供了可執行js腳本相關的函數，他們的作用是在某些頁面中模擬一些業務動作（畫面滑動，選擇日期等）。在一些僅靠webdriver無法實現的業務場景中，我們就可以依靠此函數來輔助測試目的的達成。
js的查找元素方法(ID)
document.getElementById("id")
js的查找元素方法(name)
document.getElementsByName('name')
js的查找元素方法(class)
document.getElementsByClassName("class_name")
js的查找元素方法(tag)
document.getElementsByTagName('tag_name')
js的查找元素方法(css)
document.querySelector("css selector")
js的查找元素方法(css_list)
document.querySelectorAll("css selector")
execute_script()
從上可以看出其實js的定位元素方法和selenium中的差不多，接下來我們就可以將需要執行的js語句放入到執行函數中使用。
from selenium import webdriver
browser = webdriver.Chrome() browser.get('https://www.baidu.com') # 定位后修改指定元素的value屬性 js_script_exec = 'document.getElementById("form_motion").value="list_modify";' browser.execute_script(js_script_exec)
對于某些動態div標簽（窗口），一般的方法不太奏效的情況下，可以嘗試下switch_to_default_content()方法，跳轉到最外層；
使用模擬鍵鼠操作的時候，無論是單獨使用還是鏈式寫法，記得在結尾加上perform()方法進行執行；
如果元素定位時報錯element click intercepted，記得檢查界面上是否有其他元素進行覆蓋，元素有可能也是具有隱藏屬性的；
元素過期報錯element is not attached to the page document，可以嘗試重新刷新頁面，這里不推薦直接使用refresh方法，還是養成好習慣先懟上try…except…捕捉到異常后在進行刷新或重置操作；
對于屬性值為動態的元素，墻裂推薦使用CSS selector或者xpath方法來進行元素定位，正則表達式也推薦大家最好能掌握；
如果前期對xpath的相對路徑寫法比較頭疼，推薦使用F12調試工具自帶的元素復制功能，在你想要復制的元素所在的標簽對這行右鍵，選擇copy —— Copy XPath選項即可；
輸入框默認存在內容想要刪除再輸入信息的話，不推薦模擬鍵盤操作Ctrl+A，然后模擬退格鍵，試試clear()方法吧；
抓不到元素可以使用延時方法，輸入文字也是一樣的道理，業務場景中需要大量輸入文字的，無論是從文件中還是提取又或者是遍歷，出現少字漏字的話，同樣也可以使用延時的方法，適當的放慢處理的速度；
在頁面中總會有些不可見的元素，這種情況使用is_displayed()方法即可快速定位找到；
有些被測頁面需要驗證碼，無論是手機的還是圖片驗證，和開發同學溝通一下，留個萬能的就行了，其本身的功能手工回歸一下即可，不必太過糾結；
三方登錄功能也是如此，不推薦直接使用web自動化去搞，三方的一般是不開源的，有這折騰的時間還不如跑跑接口和黑盒，自動化的話繞過去即可；
自動化測試用例這塊的話博主還是推薦不要有依賴，和功能測試用例同理，每次的執行順序或者數量都會根據需求與業務場景發生變化，一旦依賴了會大大增加測試同學的維護成本，后面有空我會單獨出一期自動化測試用例的文章來為大家介紹。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
目錄
搞明白前端開發人員在企業中的占比，你才可以在學校或者即將畢業的時候選擇出自己將要深入學習的開發語言。很多學校既要教C語言，又教單片機，既教java，也教前端開發知識，但老師的課是有限的，給留了作業，也許都不檢查，下一課老師就要繼續往下講，因為這是他的工作，老師們也有生活，不可能圍著某些人轉，學不會就不往下開課了。
而搞懂前端開發在企業中的占比呢，能夠更好的讓你覺得如果自己比較平凡，得到什么等級可以卷得過別人，可以在這么多職位中占有一席之地。
很可喜的是，目前傳統行業已經信息化改造完成，不管他們是內部系統，或者外部聯合系統，都需要前端開發；我們每天看見大街上跑的汽車企業，某些電子企業，手機廠商，都需要前端開發的職位；更別提電商，直播這些我們生活所不可缺少的行業。但你還需要知道的是，如果你想學的一門服務端語言，java phython .net 或者其他，很可能這家公司就不會用，無形中給自己減少了很多工作機會。
以上的圖，是從過去幾年一直到今年（2022）年的各大公司的占比，畢竟是大廠嘛，對用戶體驗，前端接觸到瀏覽器，最接近用戶的要求肯定會高一些。
但是通過對多家中小公司的逐步了解發現，出去UI , 項目，產品，DBA， 運維等職位外，服務端開發與前端開發的比例幾乎是1:1 ，甚至有的外包性質的公司，他們一旦產品成型后，新的客戶換皮膚，更換界面的需求會更多，所以前端開發會需求更多一些。
此前有人戲稱，是開發語言受歡迎，并非你受歡迎。但不得不說，某個開發語言受歡迎程度如果更加靠前，說明市場需求更大，更受歡迎，而將來準備從事某一種開發語言，也是非常關鍵的信息來源。
通過以上往年到今年的開發語言受歡迎程度發現，javascript這門前端必備的開發語言名列前茅，甚至在眾多服務端開發語言中也不甘示弱，當然這之中并沒有表明HTML CSS是一門開發語言，如果是的話，HTML CSS 也必將榜上有名，因為各行各業都不要網頁對外公式自己的產品，但服務端開發語言五花八門，而前端必備javascript。
從web1.0時代，頁面簡單的只讀時代，到web2.0時代，不斷的交互，前端開發這個職位也在不斷的進步。那么在未來的web3.0時代，很多人疑惑，可能PC的網頁用處會越來越少，甚至不客氣的說H5的頁面也會少很多，據推測APP也會減少，未來將會有更多的數據整合產品出現。那么未來前端還會大有可為嗎？
答案是肯定的，偉大的《紅寶書》開頭便說：javascript能做所有的事情，如果他能。而且nodejs的流行，也使前端可以更多的滲透到服務端開發，flutter的最新發布，WPA的使用，也使APP得到了更大的挑戰，CSS3的不斷進步，前端游戲引擎的盛行，也使前端有了更大的發展前景與選擇，那么即便未來的元宇宙世界，相信前端javascript也一定能夠勇往直前
如果這只是當下技術領域的一個縮影，可見比較活躍的的開發語言有java phython c mysql 然后才是javascript。從開發開發技術職位區分還是服務端和前端，但前端活躍度卻比較靠后，不管是提問，回答，數量等維度上
說明什么問題呢？從事前端開發人數少嗎？前端開發在學習，工作中沒有問題嗎？前端開發比較懶惰，不愿意上社區來參與活動嗎？
我們知道nodejs可以做服務端開發，但是有多少企業敢于讓從開始就搭上node serve的架子，不斷讓前端同學去嘗試，不斷在node領域發光發熱，為整個行業添磚加瓦呢，很少吧。而幾乎大部分公司，還是比較守舊的，從最開始的jSP時代，甚至不需要前端，服務端寫完服務端代碼，然后開始寫JSP。JSP里再套java代碼，順帶著添加一些javascript事件，樣式怎么辦，那個時候extjs jquery還非常盛行，easyui jqueryui 等，可以讓服務端開發人員快速生產頁面。
但隨著提升用戶體驗的欲望越來越強烈，《國富論》開篇也講分工帶來的好處，前端才逐漸有了一席之地，甚至在一些大公司，前端的話語權可以超越服務端，他們通過技術驅動業務向前。
按照比例學可知，一旦某些事物達到一個數量后，某些細節世界也可以大體展現整體的宏觀判斷。那么我的理解是，在眾多開發語言中，盡管javascript那么受歡迎，目前企業中前端占比還算不錯，但總的來說，跟其他服務端開發語言總和來比，前端人員還是少。如果服務端語言像前端一樣僅有javascript的話，我相信csdn問答模塊這個業界縮影將不會是這種狀態，甚至會大有不同。
其實很多老師，很多培訓機構的老師教前端，大家各有各自的工作，各有各自的生活， 他知道來了一批學生，這是自己分內的工作，其實很多學生也只是停留在前端開發做網頁的意識上，未來我想找到一份共走，可以養活自己。這無可厚非
其實日產工作還真就是做網頁，做了C端做B端，做了PC做H5，嵌套到webview里，嵌套的APP的殼子里，這些都是工作。
小程序，各種各樣的小程序；各種手機屏幕尺寸的適配；各種APP內部的嵌套；
做完了前端，開發點node層的工作吧，卷一卷，棒服務端同學減輕點工作壓力；
再來點代碼優化吧，如果將自己的代碼調的代碼量更少，如何不寫注釋也可以清晰明了，如何不得不寫注釋，可以寫的更清楚；
來一點性能優化吧，現在出去面試，沒做過性能優化都不好意思說自己做過工作。沒辦法，整體的需求纏身，但你卻很少從中吸取知識，日復一日，到找工作那天發現，自己做的工作，其實都是勞動力。如何驅動自己，再尋求解決方案，再將性能指標不斷提升。
卷一卷，讀書破萬卷。將自己的點子，自己的做法不斷形成方法論，對內輸出，乃至對外輸出，提升影響力。
還要啥理想，向公共組件團隊滲透，向技術棧所在團隊滲透？
小插曲：這里加一個小插曲，promise解決了什么問題？這道題是不是必考題，千篇一律的答案是什么？解決了回調地獄？異步的工作我們當同步的來執行？
這算不算進步？這算不算創新？那么我就問問你，有回調地獄你的項目跑步起來了？用同步的寫法來搞異步的事情降本增效了？
那么我就問問你，是你把之前的寫法用上現在的promise節省的時間多，還是你每天摸魚的時間多。說白了異步是一個需要花費時間的事情，因為有了異步，有了時間差，才使我們的工作出現了更多的可能性，不確定性。你更應該解決的是不是這個問題。
個人觀點啊，沒說promise不好，挺好的。
不管是在校或者迷茫的即將離校，一旦決定要學，不管是學哪種開發語言，都要堅定信心，切記不可三天打魚，兩天曬網；
這要看個人家庭的生活水平，一個家庭攻讀出一個大學生實屬不易，畢業后念培訓班需要一定的資本支持。但對于很多人來說，沒有學習方向，念培訓班也是個選擇，至少可以入個門；但大部分的培訓課程對于目前的就業形勢掌握不足，就像楊過剛去鐘南山一樣，練不夠基本功，詞匯一大堆，實戰沒多少，最后說啥名詞都是666，一干活就撓頭；
其實我根據自己的經驗，也在籌備規劃一套更卷，更適合入門到守門再到卸門的課程，我的目標就是更實用，更卷，更有助于大多數想學習的同學們，你需要的只是一句：我想學習，我要學習，我能學習，而不是馬內。
現在網絡上文章多的是，雖然很多不夠系統，但正好夠大家鞏固當日知識點所用。學一定要用，用后一定要鞏固，鞏固后一定要舉一反三形成自己的知識點，方法論，記錄個博客啦，筆記啦，分享到身邊的人，這樣足可鞏固無憂
知識點掌握的好不叫好，可以把知識點貫穿起來，做出一個市面上的東西，這算超越自我，切記不可自滿，學完知識點就說自己精通，那只會在面試或者在工作的時候讓自己更加煩惱，掉頭發，熬夜。
做為初級開發，最重要的就是對于解決問題，有自己的一套手段，這樣至少可以保證快速的完成需求。但如果想繼續往上走，必須得有一些別人所沒有的東西。這里說到舉一反三，記得當時學習的時候，學完js基礎需要寫一個99乘法表，當時本來上課就少，硬生生把js的嵌套循環99乘法表寫出來。晚上睡覺的時候想，如果純用HTML CSS 是不是也能寫出來，就這樣，HTML的倒是好寫，但CSS的又憋了很久，總算是寫出來了。你就說，這樣下去，誰能有我卷。現在我總結出了怎么利用純HTML CSS JS 寫出3版99乘法表，并且總結出了自己的文章，希望可以讓初學者能夠更快的入門。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn