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