建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
前端設(shè)計(jì)包括哪些？
比如網(wǎng)頁(yè)設(shè)計(jì)，APP前端設(shè)計(jì)，日常的海報(bào)，不同尺寸屏幕上的一些UI
這2個(gè)專(zhuān)業(yè)怎么選擇適合自己的專(zhuān)業(yè)？
作為一名前端開(kāi)發(fā)工程師，我以個(gè)人經(jīng)驗(yàn)來(lái)回答一下。UI和前端開(kāi)發(fā)工作兩者相關(guān)聯(lián)，但兩者有相互獨(dú)立，卻又相互依存。兩者分工如下：
1、UI設(shè)計(jì)主要是根據(jù)用戶(hù)提出的需求，來(lái)對(duì)接產(chǎn)品經(jīng)理。同時(shí)根據(jù)需求來(lái)進(jìn)行對(duì)于頁(yè)面的設(shè)計(jì)，其實(shí)在一個(gè)軟件的開(kāi)發(fā)過(guò)程中，界面是用戶(hù)最直觀(guān)能夠面對(duì)的東西，所以說(shuō)設(shè)計(jì)在用戶(hù)最后使用之前，是用戶(hù)整體感知系統(tǒng)的一個(gè)。用戶(hù)通過(guò)設(shè)計(jì)，能距離了解系統(tǒng)，同時(shí)看系統(tǒng)能否滿(mǎn)足自己的需求。
2、前端開(kāi)發(fā)主要是根據(jù)設(shè)計(jì)師給出的設(shè)計(jì)稿來(lái)進(jìn)行代碼層面的實(shí)現(xiàn)，就相當(dāng)于將設(shè)計(jì)予以實(shí)現(xiàn)，同時(shí)不僅僅通過(guò)了html+css+js的，同時(shí)也會(huì)根據(jù)數(shù)據(jù)的設(shè)計(jì)，來(lái)完善數(shù)據(jù)的前后端交互，同時(shí)使網(wǎng)頁(yè)動(dòng)起來(lái)，具有了與用戶(hù)交互的能力。用戶(hù)的所提需求也是在這個(gè)地方進(jìn)行的實(shí)現(xiàn)。
3、簡(jiǎn)單來(lái)說(shuō)就是UI是設(shè)計(jì)師給出圖紙，前端開(kāi)發(fā)就是根據(jù)圖紙來(lái)建造的工作。
4、這樣的兩個(gè)方面其實(shí)對(duì)于自己的所學(xué)專(zhuān)業(yè)差異不算大，對(duì)于設(shè)計(jì)的前提需要有一定的美感和對(duì)于產(chǎn)品的感知能力，前端開(kāi)發(fā)主要是對(duì)于自己的編碼能力的體現(xiàn)，這兩者對(duì)于專(zhuān)業(yè)的要求，在于現(xiàn)在自己是否能學(xué)下去，因?yàn)榛ヂ?lián)網(wǎng)現(xiàn)在日益發(fā)展，學(xué)習(xí)的，不論什么專(zhuān)業(yè)都可以自己學(xué)習(xí)這兩方面的知識(shí)，所以說(shuō)只要自己愿意學(xué)和想學(xué)，那么你一定就能學(xué)成功的！
web前端主要是用來(lái)做什么的？
前端開(kāi)發(fā)是創(chuàng)建Web頁(yè)面或app等前端界面呈現(xiàn)給用戶(hù)的過(guò)程，通過(guò)HTML，CSS及JavaScript以及衍生出來(lái)的各種技術(shù)、框架、解決方案，來(lái)實(shí)現(xiàn)互聯(lián)網(wǎng)產(chǎn)品的用戶(hù)界面交互 [1] 。它從網(wǎng)頁(yè)制作演變而來(lái)，名稱(chēng)上有很明顯的時(shí)代特征。在互聯(lián)網(wǎng)的演化進(jìn)程中，網(wǎng)頁(yè)制作是Web1.0時(shí)代的產(chǎn)物，早期網(wǎng)站主要內(nèi)容都是靜態(tài)，以圖片和文字為主，用戶(hù)使用網(wǎng)站的行為也以瀏覽為主。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展和HTML5、CSS3的應(yīng)用，現(xiàn)代網(wǎng)頁(yè)更加美觀(guān)，交互效果顯著，功能更加強(qiáng)大。 移動(dòng)互聯(lián)網(wǎng)帶來(lái)了大量高性能的移動(dòng)終端設(shè)備以及快速的無(wú)線(xiàn)網(wǎng)絡(luò)，HTML5，
node.jS
的廣泛應(yīng)用，各類(lèi)框架類(lèi)庫(kù)層出不窮。 核心技術(shù)編輯HTML語(yǔ)言掌握HTML是網(wǎng)頁(yè)的核心，是一種制作萬(wàn)維網(wǎng)頁(yè)面的標(biāo)準(zhǔn)語(yǔ)言，是萬(wàn)維網(wǎng)瀏覽器使用的一種語(yǔ)言，它消除了不同計(jì)算機(jī)之間信息交流的障礙。因此，它是網(wǎng)絡(luò)上應(yīng)用最為廣泛的語(yǔ)言，也是構(gòu)成網(wǎng)頁(yè)文檔的主要語(yǔ)言，學(xué)好HTML是成為Web開(kāi)發(fā)人員的基本條件。HTML是一種標(biāo)記語(yǔ)言，能夠?qū)崿F(xiàn)Web頁(yè)面并在瀏覽器中顯示。HTML5作為HTML的最新版本，引入了多項(xiàng)新技術(shù)，大大增強(qiáng)了對(duì)于應(yīng)用的支持能力，使得Web技術(shù)不再局限于呈現(xiàn)網(wǎng)頁(yè)內(nèi)容。隨著CSS、JavaScript、Flash等技術(shù)的發(fā)展，Web對(duì)于應(yīng)用的處理能力逐漸增強(qiáng)，用戶(hù)瀏覽網(wǎng)頁(yè)的體驗(yàn)已經(jīng)有了較大的改善。不過(guò)HTML5中的幾項(xiàng)新技術(shù)實(shí)現(xiàn)了質(zhì)的突破，使得Web技術(shù)首次被認(rèn)為能夠接近于本地原生應(yīng)用技術(shù)，開(kāi)發(fā)Web應(yīng)用真正成為開(kāi)發(fā)者的一個(gè)選擇。HTML5可以使開(kāi)發(fā)者的工作大大簡(jiǎn)化，理論上單次開(kāi)發(fā)就可以在不同平臺(tái)借助瀏覽器運(yùn)行，降低開(kāi)發(fā)的成本，這也是產(chǎn)業(yè)界普遍認(rèn)為HTML5技術(shù)的主要優(yōu)點(diǎn)之一。AppMobi、摩托羅拉、Sencha、Appcelerator等公司均已推出了較為成熟的開(kāi)發(fā)工具，支持HTML5應(yīng)用的發(fā)展。 [3] CSS學(xué)好CSS是網(wǎng)頁(yè)外觀(guān)的重要一點(diǎn)，CSS可以幫助把網(wǎng)頁(yè)外觀(guān)做得更加美觀(guān)。JavaScript學(xué)習(xí)JavaScript的基本語(yǔ)法，以及如何使用JavaScript編程將會(huì)提高開(kāi)發(fā)人員的個(gè)人技能。操作系統(tǒng)了解Unix和Linux的基本知識(shí)，對(duì)于開(kāi)發(fā)人員有益無(wú)害。網(wǎng)絡(luò)服務(wù)器了解Web服務(wù)器，包括對(duì)Apache的基本配置，htaccess配置技巧的掌握等。 優(yōu)化編輯盡量減少HTTP請(qǐng)求 (Make Fewer HTTP Requests)減少DNS 查找 (Reduce DNS Lookups)避免重定向 (Avoid Redirects)使得 Ajax 可緩存 (Make Ajax Cacheable)延遲載入組件 (Post-load Components)預(yù)載入組件 (Preload Components)減少DOM元素?cái)?shù)量 (Reduce the Number of DOM Elements)切分組件到多個(gè)域 (Split Components Across Domains)最小化iframe的數(shù)量 (Minimize the Number of iframes)杜絕 http (No 404s)以上10條涵蓋了Web前端開(kāi)發(fā)中遇到的各種頁(yè)面處理技術(shù)，讓前端開(kāi)發(fā)人員能夠準(zhǔn)確和快速地把握整個(gè)網(wǎng)頁(yè)的架構(gòu)，從而達(dá)到減少開(kāi)發(fā)成本和頁(yè)面美化目的。前端框架編輯學(xué)好Web框架熟悉掌握HTML、服務(wù)器端腳本語(yǔ)言、CSS和JavaScript之后，學(xué)習(xí)Web框架可以加快Web開(kāi)發(fā)速度，節(jié)約時(shí)間。PHP程序員可選的框架包括CakePHP、CodeIgniter、Zend等，Python程序員喜歡使用Django和 webpy，Ruby程序員常用RoR。隨著Web 越來(lái)越規(guī)范和標(biāo)準(zhǔn)的統(tǒng)一，Web組件化技術(shù)不斷革新，移動(dòng)端開(kāi)發(fā)不斷升華，以下是一些常見(jiàn)開(kāi)源前端框架：Bootstrap主流框架之一，Bootstrap 是基于 HTML、CSS、JavaScript的，它簡(jiǎn)潔靈活，使得 Web 開(kāi)發(fā)更加快捷。html5-boilerplate該框架可以快速構(gòu)建健壯，且適應(yīng)力強(qiáng)的web app或網(wǎng)站。MeteorMeteor是新一代的開(kāi)發(fā)即時(shí)web應(yīng)用的開(kāi)源框架，它能在較短時(shí)間內(nèi)完成開(kāi)發(fā)。Semantic UI基于自然語(yǔ)言有效原則的UI組件框架Foundation優(yōu)秀的響應(yīng)式前端框架Materialize基于材料設(shè)計(jì)的現(xiàn)代化響應(yīng)式前端框架。可提供默認(rèn)的樣式，自定義組件。此外，Materialize還改進(jìn)動(dòng)畫(huà)和過(guò)渡，為開(kāi)發(fā)人員提供流暢的體驗(yàn)。Pure幾乎可以在每一個(gè)web項(xiàng)目中使用的一組小的和響應(yīng)式的CSS模塊。VueVue.js 是用于構(gòu)建交互式的 Web 界面的庫(kù)。它提供了 MVVM 數(shù)據(jù)綁定和一個(gè)可組合的組件系統(tǒng)，具有簡(jiǎn)單、靈活的 API。SkeletonSkeleton 是一個(gè)小的 JS 和 CSS 文件的集合,可快速開(kāi)發(fā)漂亮的網(wǎng)站,適合各種屏幕設(shè)備包括手機(jī)。Skeleton 基于 960 grid 開(kāi)發(fā)。它是一個(gè) UI 框架。Amaze UI國(guó)內(nèi)首個(gè)開(kāi)源HTML5跨屏前端框架產(chǎn)品系列，中文排版支持更優(yōu)、本土化組件豐富。該產(chǎn)品系列中有專(zhuān)門(mén)針對(duì)移動(dòng)端的HTML5混合應(yīng)用開(kāi)發(fā)框架Amaze UI Touch以及針對(duì)跨屏HTML5網(wǎng)頁(yè)開(kāi)發(fā)的Amaze UI Web。其中，Amaze UI Touch可以幫助開(kāi)發(fā)者通過(guò)豐富的組件，快速構(gòu)建出與原生APP相媲美的專(zhuān)屬移動(dòng)端的HTML5應(yīng)用。UIkit一個(gè)輕量級(jí)的和模塊化的前端框架,用于快速開(kāi)發(fā)和功能強(qiáng)大的web接口。YuiYahoo! UI Library (YUI) 是一個(gè)開(kāi)放源代碼的 JavaScript 函數(shù)庫(kù)，為了能建立一個(gè)高互動(dòng)的網(wǎng)頁(yè)，它采用了AJAX, DHTML 和 DOM 等程式碼技術(shù)。它也包含了許多 CSS 資源。使用授權(quán)為 BSD許可證。kissy一款跨終端、模塊化、高性能、使用簡(jiǎn)單的 JavaScript 框架。MUI最接近原生App體驗(yàn)的前端框架的框架。Arale一個(gè)開(kāi)放、簡(jiǎn)單、易用的前端基礎(chǔ)類(lèi)庫(kù)。JXJX 是模塊化的非侵入式Web前端框架，特別適合構(gòu)建和組織大規(guī)模、工業(yè)級(jí)的Web App。GMUGMU是基于zepto的mobile UI組件庫(kù)，提供webapp、pad端簡(jiǎn)單易用的UI組件! Web App。ZUI開(kāi)源HTML5前端框架Clouda Touch.jsTouch.js是移動(dòng)設(shè)備上的手勢(shì)識(shí)別與事件庫(kù),也是在百度內(nèi)部廣泛使用的開(kāi)發(fā)。 [4]至于學(xué)習(xí)難度，不是很難，只要學(xué)肯定是能學(xué)會(huì)的?。‖F(xiàn)在網(wǎng)絡(luò)很發(fā)達(dá)，網(wǎng)上有許多學(xué)習(xí)前端的網(wǎng)站像w3c ... 加油！?。?/p>
學(xué)ui好還是web前端好？
1、Web前端開(kāi)發(fā)：通俗來(lái)講，當(dāng)你打開(kāi)某個(gè)網(wǎng)站時(shí)，往往第一時(shí)間被那些炫酷的頁(yè)設(shè)計(jì)所吸引。但是，如果沒(méi)有Web前端工程師，這些圖片是不會(huì)動(dòng)的。這樣一個(gè)頁(yè)是怎么實(shí)現(xiàn)的呢? 首先，需要UI設(shè)計(jì)師按照市場(chǎng)部要求進(jìn)行每張圖片制作;然后WEB前端工程師通過(guò)技術(shù)手段實(shí)現(xiàn)滾動(dòng)效果。通俗點(diǎn)說(shuō)web前端工程師就是用HTML5、CSS3、Java、jQuery、Ajax等技術(shù)把UI設(shè)計(jì)的頁(yè)面效果做成網(wǎng)頁(yè)，結(jié)合Bootstrap、AngularJS等最新的JS框架和后臺(tái)開(kāi)發(fā)工程師搭線(xiàn)，最終實(shí)現(xiàn)讓大家看到的電商平臺(tái)上那些動(dòng)人的精美頁(yè)面。
2、UI設(shè)計(jì)：所謂UI設(shè)計(jì)指的是用戶(hù)界面設(shè)計(jì)，即user interface design，通常包括平面設(shè)計(jì)，網(wǎng)頁(yè)設(shè)計(jì)以及移動(dòng)界面設(shè)計(jì)。其中，網(wǎng)頁(yè)設(shè)計(jì)和移動(dòng)設(shè)計(jì)這一崗位方向，需要學(xué)習(xí)Web界面設(shè)計(jì)、PC客戶(hù)端軟件界面設(shè)計(jì)、HTML5語(yǔ)言、CSS樣式表、布局技巧與瀏覽器兼容等技術(shù)。因此從這一點(diǎn)來(lái)說(shuō)，web前端開(kāi)發(fā)與UI設(shè)計(jì)之間是互通的，也就是說(shuō)，通過(guò)系統(tǒng)UI培訓(xùn)后，你將來(lái)有可能會(huì)成為一名web前端工程師!
實(shí)際上，除了工作崗位不同以外，二者最大的區(qū)別就是：WEB前端工程師是要寫(xiě)代碼的，而UI設(shè)計(jì)師重點(diǎn)在設(shè)計(jì)上。因此，對(duì)于廣大學(xué)員到底學(xué)UI設(shè)計(jì)好還是WEB前端開(kāi)發(fā)好這一疑問(wèn)，其實(shí)學(xué)哪一個(gè)都不錯(cuò)，但最重要的是看你自己的興趣所在。然而，對(duì)于初學(xué)者來(lái)說(shuō)，無(wú)論是UI設(shè)計(jì)好還是WEB前端開(kāi)發(fā)，盡可能通過(guò)系統(tǒng)培訓(xùn)多涉獵一些相關(guān)知識(shí)，這對(duì)于將來(lái)職場(chǎng)發(fā)展會(huì)更有幫助，可以在以后職場(chǎng)中更好的相互協(xié)作和支持。
UI設(shè)計(jì)課程內(nèi)容上不僅涵蓋了美術(shù)基礎(chǔ)、Photoshop、Dreamweaver、Illustrator、Indesign、網(wǎng)站配色與布局、移動(dòng)端UI規(guī)范等互聯(lián)網(wǎng)UI設(shè)計(jì)師所必需具備的技能，還增加了網(wǎng)絡(luò)營(yíng)銷(xiāo)基本常識(shí)、符合SEO標(biāo)準(zhǔn)的網(wǎng)站設(shè)計(jì)、Landing Page設(shè)計(jì)優(yōu)化、電商網(wǎng)站設(shè)計(jì)、店鋪裝修設(shè)計(jì)、用戶(hù)體驗(yàn)與交互設(shè)計(jì)、HTML5/CSS3開(kāi)發(fā)標(biāo)準(zhǔn)、Web端及移動(dòng)端真實(shí)商業(yè)項(xiàng)目，使學(xué)員通過(guò)項(xiàng)目的制作，更加全面的了解行業(yè)的前沿知識(shí)與理念，并能夠合理地運(yùn)用到實(shí)際工作和項(xiàng)目的設(shè)計(jì)制作中。
綜合來(lái)說(shuō)，無(wú)論是學(xué)UI設(shè)計(jì)好還是WEB前端開(kāi)發(fā)，終極目標(biāo)都是為了更好的用戶(hù)體驗(yàn)和交互應(yīng)用，而隨著移動(dòng)互聯(lián)網(wǎng)的深度發(fā)展，對(duì)用戶(hù)體驗(yàn)的極致追求勢(shì)必會(huì)需要大量的UI設(shè)計(jì)師和WEB前端開(kāi)發(fā)人員。
當(dāng)前題目：前端設(shè)計(jì)包括哪些？（這2個(gè)專(zhuān)業(yè)怎么選擇適合自己的專(zhuān)業(yè)？）
URL地址：http://www.5511xx.com/article/dhejche.html
