主頁 > 前端設計 > 為什么前端是最適合設計師學習的編程技能?

為什么前端是最適合設計師學習的編程技能?

2020-09-21 04:41:06 前端設計

今天和大家聊聊前端是什么,順便和大家分享下,為什么我認為前端是最適合設計師學習的編程技能,最后,講一講為什么我覺得互聯網設計師需要學習前端。

前端是什么

最近 Python 這個編程語言被炒得很火,甚至我在幾個設計公眾號都看到了 Python 的課程推廣,但是,對編程有一些了解的我果斷地要跟各位設計師說:不要學 Python,如果你想學習編程,那就學習前端吧!

不過前端其實不是一門語言,它應該是一類網站網頁的開發作業的總稱,而前端中使用的主要有四門語言:html,css,JavaScript,以及最近被收錄的 webassembly。關于具體的語言,我會放到下一期的設計師前端學習路徑里細說。

前端,這個名字乍聽之下其實還挺奇怪的,我們來看看它的英文,叫做 Front-end。把這兩個單詞拆開,Front 是前面的意思,End 是結束、末端的意思,所以翻譯過來就是前端。

其實這個前就是擺在用戶面前,所以前端就是用戶看得到的這些東西的開發作業,產出的就是我們能看得到的這些網站網頁。那既然有前端,相對應的肯定就有后端。后端 Back-end,后端就是在服務器上給網站網頁,或者軟體發送資料和接收處理儲存用戶資料的這些作業,而后端的作業絕大部分都是我們用戶感知不到,看不見也摸不著的。

所以我們可以簡單地將前端理解為開發網站網頁的技術,而前端工程師或者前端開發就是在公司負責寫網站網頁代碼的人。

為什么前端是最適合設計師學習的編程技能

了解完前端是什么,我們就要來說說為什么我覺得前端相比于其他編程語言更適合設計師學習?注意,這里我說的是設計師,并不專指互聯網行業的設計師。

我自己總結一下,有三個原因。

1. 前端負責網站頁面的視覺呈現和互動體驗,更適合設計師的口味

就像前端這個名字所表達的,它負責的是用戶直接能看到并能產生互動的各種網站和產品的頁面,它符合設計師的視覺喜好,更容易激起設計師的學習興趣,而不用一開始去學習一堆乏味的演算法和邏輯,學了半天也看不見有什么視覺上的產出。

如果你是一個互聯網設計師,前端能實作的這些網站網頁 H5,就是你天天設計的東西。如果學會了前端,自己就能把自己設計的網站寫出來上線;設計個動效,就能用到自己的網站或者 H5 上;設計個互動,自己就能動手在頁面上實作出來。

2. 前端入門門檻低,初學者一兩個星期就能上手

前端的四門語言 html,css,JavaScript,webassembly,開始的 html 和 css 是基礎中的基礎,是非常容易學習的兩門語言,這兩者甚至在很多人眼里都算不上編程語言,但是已經能夠幫我們實作很多網頁和影片效果。

而 JavaScript 雖然相對于 html、css 而言有一些難度,但和其他的編程語言相比,也算是容易上手的。學習它就能給網頁加上很多互動和功能,做出很多酷炫的設計,各種三維的、圖形變化的,甚至 VR 的效果都不在話下。

3. 前端的應用范圍極大,甚至可以說是無所不能,藝術編程也能搞定

我們都知道,網站網頁不僅能在電腦上通過瀏覽器打開,也能通過手機端的瀏覽器打開,還有在各種手機 app 里,比如微信的對話中,點擊一個網址,在微信內部就會跳轉顯示一個頁面,這些都是我們比較常見的前端技術的應用,而前端一套代碼就能搞定所有平臺。跨平臺的特性非常好,不用像 app 一樣,每個平臺都要用一種語言來寫。

前端技術不僅能寫網頁網站,還能寫桌面端的軟體,比如 slack、figma notion 等軟體的桌面版本都是用前端的技術寫的,同時還能搞定后端,自己寫服務器的各種功能,開發手機端的應用,還有現在常用的小程式,也是基于前端的技術。

如果有對 Processing 這個藝術編程語言感興趣的同學,那么前端中也有一個專門用來實作 processing 語言功能的庫 p5.js,所謂庫你可以理解為是 js 語言的一個工具包,能讓你在網頁中實作各種藝術編程的效果。

所以如果你學習了前端,那么也完全可以向另一個藝術編程的方向發展,用 js 實作很多非常有設計感的藝術作品。

為什么互聯網設計師需要去學習前端

聽到這些是不是覺得前端特別牛,那接下來我就要說一說為什么我覺得互聯網設計師需要去學習前端技能。當然,我這里指的互聯網設計師是那些希望自己向產品設計方向發展,或者已經在從事和產品設計相關的互聯網設計師,比如產品界面設計、產品體驗設計相關的一些崗位的設計師。假如你是想做運營方向或者品牌方向的互聯網設計師,以下的內容也可以了解一下,做一點參考。

關于這個問題,我想分為內因和外因兩個角度來說。

首先是內因,專業的復合型人才是互聯網設計師的這個職業自身發展的趨勢。

如果你是一個從 12 年左右就開始接觸互聯網行業的設計師,那你應該知道 12 年左右移動互聯網剛開始興起的時候,對于設計師的要求真的可以稱得上是價高質低,那個時候能畫圖示化界面的就已經是非常合格的 UI 設計師了,而且那個時候還沒有 UX(用戶體驗/互動)設計師。

直到后來,隨著行業發展,慢慢出現了專門的 UX、UE 設計師(用戶體驗設計師)以及各種 UED、UXD 的設計部門,而 UI 設計師的要求也越來越高,畫圖示畫界面成了基本能力,還要會做點動效、插畫,要求會的技能也是越來越多。

而近一兩年,設計師的技能和職位又有了新的變化,首先是越來越多的 UI 和 UX、UE 設計師技能職位重合,于是出現了綜合型的設計師,更多地專注于產品設計,不再局限于只畫界面或者只做用研(互動體驗),而很多配合產品運營的設計作業被專門的運營設計師承包了。

于是有人說,未來專業的互聯網公司只會剩下三種設計師,品牌設計師,運營設計師,產品設計師。雖然我覺得這個說法有點夸張,但不可否認這確實是一個很明顯的趨勢。

說到產品設計師,如果不說互聯網,可能大家想到的都是工業產品設計師,也就是設計生活中用到的各種物體物品的設計師。一個優秀的工業設計師,不僅要有審美,會畫手稿,更要了解材料,懂制造工藝,深諳人體工學,甚至還要會自己制作逼真可用的樣品,這樣才有可能把產品做好。

而作為互聯網的產品設計師,前端或者一定的開發技能就是你需要掌握的材料和工藝原理,最好還要有能力自己動手做一個非常真實的樣品出來,這樣的設計師不僅能高效地向專業的開發工程師傳達自己的設計意圖和理念,也能更好地和工程師配合,減少溝通損耗,讓自己的產品更好的落地。

而我相信,這樣的產品設計師,會是未來專業互聯網企業的標配,同時也是優秀的互聯網產品設計師的標準。

說完了內因,來說說外因。互聯網行業的發展和技術進步倒逼著我們這些互聯網設計師需要不斷提升自己的能力邊界。

這一點首先體現在當前設計作業的同質化和設計作業的智能化促使了低效的設計作業減少。

經過這些年的互聯網行業的快速發展,現在市面上產品的同質化問題已經非常嚴重,尤其是主流的產品,換個顏色都不知道誰是誰了。

而且這兩年很多互聯網大廠都在提中臺化,中臺的其中一個作用就是減少重復和低效的作業,這當然也包括設計作業,從而也逐步導致了現在很多設計作業基本上就是從組件庫里拖組件出來拼圖了。

與此同時,很多大廠以及一些初創公司都在輸出智能化的設計平臺和解決方案。大家比較熟知的,比如阿里的鹿班、國內的搞定設計、國外的 wix,這些產品都是在用技術解決一些基本的設計師需求。比如快速出海報、快速出 logo,而且現在的設計軟體也越來越智能,以前要花很多時間才能搞定的作業現在也是分分鐘就可以解決,而且這種趨勢只會越來越明顯。

所以大公司在通過技術手段減少低效的重復勞動之后,需要設計師把更多的精力投入到創意性和探索性的作業上,而這些作業都需要一定的代碼能力作為支持,這樣才能更好更快地展示和驗證想法。

同時,如果設計師團隊的代碼能力夠,那么可以和開發團隊配合進行快速迭代開發,設計師團隊專門負責樣式的代碼撰寫,開發團隊則負責產品的功能和邏輯,這也會是一個發展趨勢。

對于很多小公司,很多初級的設計作業也可以通過一些方案快速解決,因此很多小公司并不在意設計師的設計能力有多高,更在意設計師的能力有多全。因此有一定的前端能力能讓設計師在小公司的作業中游刃有余,甚至能在一定程度上配合前端甚至取代一部分前端的作業,這樣的設計師對于小公司的團隊是一個非常大的優勢。

另外一點,技術的發展導致前端和我們的設計作業越來越緊密。

今年 5G 非常火熱,隨著 5G 的逐步鋪開,網速的提升對于前端的發展會起到巨大的推動作用。我們現在已經有不少軟體是可以直接通過瀏覽器來使用了。未來,能夠直接通過瀏覽器打開應用只會越來越多,前端技術的使用場景只會越來越豐富,也就是說,我們互聯網設計師和前端打交道的概率會越來越高,前端會成為互聯網設計師繞不過去的一個坎。

與此同時,前端的技術越成熟,學習難度越低,實用性越強,可用性越好,未來會出現更多有前端開發能力的獨立產品設計師,各種各樣有特色的前端相關的產品團隊,會有很多通過前端技術快速構建的互聯網產品,這個趨勢隨著互聯網的持續發展只會越來越強。

以上就是我自己關于互聯網設計師學習前端的一些粗淺的看法,希望這些內容能幫你解決一些對前端的疑惑。

轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/94038.html

標籤:非技術區

上一篇:Tomcat虛擬主機埠問題

下一篇:軟體工程

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C#(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • vue移動端上拉加載

    可能做得過于簡單或者比較low,請各位大佬留情,一起探討技術 ......

    uj5u.com 2020-09-10 04:38:07 more
  • 優美網站首頁,頂部多層導航

    一個個人用的瀏覽器首頁,可以把一下常用的網站放在這里,平常打開會比較方便。 第一步,HTML代碼 <script src=https://www.cnblogs.com/szharf/p/"js/jquery-3.4.1.min.js"></script> <div id="navigate"> <ul> <li class="labels labels_1"> ......

    uj5u.com 2020-09-10 04:38:47 more
  • 頁面為要加<!DOCTYPE html>

    最近因為寫一個js函式,需要用到$(window).height(); 由于手寫demo的時候,過于自信,其實對前端方面的認識也不夠體系,用文本檔案直接敲出來的html代碼,第一行沒有加上<!DOCTYPE html> 導致了$(window).height();的結果直接是整個document的高 ......

    uj5u.com 2020-09-10 04:38:52 more
  • WordPress網站程式手動升級要做好資料備份

    WordPress博客網站程式在進行升級前,必須要做好網站資料的備份,這個問題良家佐言是遇見過的;在剛開始接觸WordPress博客程式的時候,因為升級問題和博客網站的修改的一些嘗試,良家佐言是吃盡了苦頭。因為購買的是西部數碼的空間和域名,每當佐言把自己的WordPress博客網站搞到一塌糊涂的時候 ......

    uj5u.com 2020-09-10 04:39:30 more
  • WordPress程式不能升級為5.4.2版本的原因

    WordPress是一款個人博客系統,受到英文博客愛好者和中文博客愛好者的追捧,并逐步演化成一款內容管理系統軟體;它是使用PHP語言和MySQL資料庫開發的,用戶可以在支持PHP和MySQL資料庫的服務器上使用自己的博客。每一次WordPress程式的更新,就會牽動無數WordPress愛好者的心, ......

    uj5u.com 2020-09-10 04:39:49 more
  • 使用CSS3的偽元素進行首字母下沉和首行改變樣式

    網頁中常見的一種效果,首字改變樣式或者首行改變樣式,效果如下圖。 代碼: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ......

    uj5u.com 2020-09-10 04:40:09 more
  • 關于a標簽的講解

    什么是a標簽? <a> 標簽定義超鏈接,用于從一個頁面鏈接到另一個頁面。 <a> 元素最重要的屬性是 href 屬性,它指定鏈接的目標。 a標簽的語法格式:<a href=https://www.cnblogs.com/summerxbc/p/"指定要跳轉的目標界面的鏈接">需要展示給用戶看見的內容</a> a標簽 在所有瀏覽器中,鏈接的默認外觀如下: 未被訪問的鏈接帶 ......

    uj5u.com 2020-09-10 04:40:11 more
  • 前端輪播圖

    在需要輪播的頁面是引入swiper.min.js和swiper.min.css swiper.min.js地址: 鏈接:https://pan.baidu.com/s/15Uh516YHa4CV3X-RyjEIWw 提取碼:4aks swiper.min.css地址 鏈接:https://pan.b ......

    uj5u.com 2020-09-10 04:40:13 more
  • 如何設定html中的背景圖片(全屏顯示,且不拉伸)

    1 <style>2 body{background-image:url(https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture); 3 background-size:cover;background ......

    uj5u.com 2020-09-10 04:40:16 more
  • Java學習——HTML詳解(上)

    HTML詳解 初識HTML Hyper Text Markup Language(超文本標記語言) 1 <!--DOCTYPE:告訴瀏覽器我們要使用什么規范--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <!--meta 描述性的標簽,描述一些 ......

    uj5u.com 2020-09-10 04:40:33 more
最新发布
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 07:59:23 more
  • 生產事故-走近科學之消失的JWT

    入職多年,面對生產環境,盡管都是小心翼翼,慎之又慎,還是難免捅出簍子。輕則滿頭大汗,面紅耳赤。重則系統停擺,損失資金。每一個生產事故的背后,都是寶貴的經驗和教訓,都是專案成員的血淚史。為了更好地防范和遏制今后的各類事故,特開此專題,長期更新和記錄大大小小的各類事故。有些是親身經歷,有些是經人耳傳口授 ......

    uj5u.com 2023-04-18 07:55:04 more
  • 記錄--Canvas實作打飛字游戲

    這里給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 打開游戲界面,看到一個畫面簡潔、卻又富有挑戰性的游戲。螢屏上,有一個白色的矩形框,里面不斷下落著各種單詞,而我需要迅速地輸入這些單詞。如果我輸入的單詞與螢屏上的單詞匹配,那么我就可以獲得得分;如果我輸入的單詞錯誤或者時間過長,那么我就會輸 ......

    uj5u.com 2023-04-04 08:35:30 more
  • 了解 HTTP 看這一篇就夠

    在學習網路之前,了解它的歷史能夠幫助我們明白為何它會發展為如今這個樣子,引發探究網路的興趣。下面的這張圖片就展示了“互聯網”誕生至今的發展歷程。 ......

    uj5u.com 2023-03-16 11:00:15 more
  • 藍牙-低功耗中心設備

    //11.開啟藍牙配接器 openBluetoothAdapter //21.開始搜索藍牙設備 startBluetoothDevicesDiscovery //31.開啟監聽搜索藍牙設備 onBluetoothDeviceFound //30.停止監聽搜索藍牙設備 offBluetoothDevi ......

    uj5u.com 2023-03-15 09:06:45 more
  • canvas畫板(滑鼠和觸摸)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canves</title> <style> #canvas { cursor:url(../images/pen.png),crosshair; } #canvasdiv{ bo ......

    uj5u.com 2023-02-15 08:56:31 more
  • 手機端H5 實作自定義拍照界面

    手機端 H5 實作自定義拍照界面也可以使用 MediaDevices API 和 <video> 標簽來實作,和在桌面端做法基本一致。 首先,使用 MediaDevices.getUserMedia() 方法獲取攝像頭媒體流,并將其傳遞給 <video> 標簽進行渲染。 接著,使用 HTML 的 < ......

    uj5u.com 2023-01-12 07:58:22 more
  • 記錄--短視頻滑動播放在 H5 下的實作

    這里給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 短視頻已經無數不在了,但是主體還是使用 app 來承載的。本文講述 H5 如何實作 app 的視頻滑動體驗。 無聲勝有聲,一圖頂百辯,且看下圖: 網址鏈接(需在微信或者手Q中瀏覽) 從上圖可以看到,我們主要實作的功能也是本文要講解的有: ......

    uj5u.com 2023-01-04 07:29:05 more
  • 一文讀懂 HTTP/1 HTTP/2 HTTP/3

    從 1989 年萬維網(www)誕生,HTTP(HyperText Transfer Protocol)經歷了眾多版本迭代,WebSocket 也在期間萌芽。1991 年 HTTP0.9 被發明。1996 年出現了 HTTP1.0。2015 年 HTTP2 正式發布。2020 年 HTTP3 或能正... ......

    uj5u.com 2022-12-24 06:56:02 more
  • 【HTML基礎篇002】HTML之form表單超詳解

    ??一、form表單是什么

    ??二、form表單的屬性

    ??三、input中的各種Type屬性值

    ??四、標簽 ......

    uj5u.com 2022-12-18 07:17:06 more