UXD是一家致力于專注交互類教學(xué)的研究型學(xué)術(shù)機(jī)構(gòu)，在設(shè)計(jì)教育上UXD始終保持在行業(yè)最前線，不斷引進(jìn)海外一線乃至超一線設(shè)計(jì)方法，幫助學(xué)生提升設(shè)計(jì)能力，與全球設(shè)計(jì)名校/名企/最新設(shè)計(jì)趨勢(shì)接軌。

本次年中教學(xué)平臺(tái)升級(jí)是基于UXD大量日常教學(xué)實(shí)踐經(jīng)驗(yàn)得來的。在此次優(yōu)化中，UXD開創(chuàng)性地整合了交互設(shè)計(jì)、作品集制作和網(wǎng)站搭建的工作流，并且引入了全新的、處理復(fù)雜多任務(wù)的Webflow平臺(tái)。

該平臺(tái)將在UXD未來教學(xué)中扮演極其重要的角色，與UXD的HTML、CSS、P5.js編程教學(xué)模塊，以及Figma設(shè)計(jì)教學(xué)平臺(tái)全面聯(lián)動(dòng)，共同為學(xué)生打造一套極致的設(shè)計(jì)工作流。

在全新的4.0工作流下，UXD真正實(shí)現(xiàn)了設(shè)計(jì)與前端開發(fā)的互通和銜接教學(xué)，極大提高了設(shè)計(jì)的商業(yè)度和落地性（作品集內(nèi)即可包含前端開發(fā)內(nèi)容）。由于新技術(shù)的加入，交互作品集呈現(xiàn)和互動(dòng)的方式得到了幾十倍的增加，大量的3D交互效果引入，對(duì)作品集的質(zhì)量提升也起到了關(guān)鍵的作用。

自2021年6月起UXD將分批對(duì)學(xué)員進(jìn)行新平臺(tái)轉(zhuǎn)化的輔導(dǎo)，這種全新的設(shè)計(jì)工具、工作流、思維方式優(yōu)化，會(huì)給作品集和個(gè)人網(wǎng)站的帶來新維度的提升，最終幫助同學(xué)們?cè)谏暾?qǐng)競(jìng)爭(zhēng)中獲得絕對(duì)優(yōu)勢(shì)。我們對(duì)時(shí)間相對(duì)緊張的學(xué)生保留舊的教學(xué)工作流程，以維持平臺(tái)過度期的穩(wěn)定性。

-01-

為專業(yè)設(shè)計(jì)打造

與其他其他工具之間的主要區(qū)別在于，新工作方式不會(huì)試圖掩蓋代碼開發(fā)的復(fù)雜性和強(qiáng)大功能，而是巧妙地將其包含在內(nèi)，使用可視化的操作，帶領(lǐng)0編程基礎(chǔ)學(xué)員輕松上手。

Webflow將代碼的功能帶入可視化畫布中，這意味著如果你可以設(shè)計(jì)它，就可以構(gòu)建它。無論你要構(gòu)建什么，Webflow都具有構(gòu)建完全自定義的內(nèi)容所需的功能和控制。

基于Webflow的平臺(tái)，學(xué)生設(shè)計(jì)的UI組件可以直接映射到HTML和CSS控件，左側(cè)是你的元素（例如div塊，鏈接，文本），右側(cè)是CSS的樣式控件。這意味著在Webflow中進(jìn)行構(gòu)建時(shí)，將使用與在代碼編輯器中編寫CSS時(shí)所使用的思維模型相似的思維模型。

而且由于UI控件直接映射到HTML和CSS，并且使用類進(jìn)行構(gòu)建，因此Webflow網(wǎng)站背后的代碼就像手工編寫代碼一樣干凈。?

-02-

類和樣式思維是的核心

借助CSS的強(qiáng)大功能，在Webflow中以視覺方式對(duì)元素進(jìn)行樣式化處理。你想在整個(gè)網(wǎng)站中重復(fù)使用或更新這些樣式，就可以像CSS一樣調(diào)用，Webflow是以類為核心組件構(gòu)建的。全新工作流不僅使構(gòu)建網(wǎng)站變得容易，而且使維護(hù)和更新站點(diǎn)變得容易。

在網(wǎng)頁設(shè)計(jì)中，CSS樣式會(huì)影響設(shè)計(jì)中視覺效果的外觀。使用Webflow，學(xué)生無需負(fù)過代碼更改這些CSS樣式的麻煩?？梢暂p松借助可視界面，整個(gè)流程操作和更改都很簡(jiǎn)單。

-03-

布局的絕對(duì)自由權(quán)

Webflow將賦予布局系統(tǒng)（如flexbox和CSS網(wǎng)格）絕對(duì)的自由，這意味著你可以根據(jù)自己的意愿完全控制自己的網(wǎng)站建設(shè)。

通過使這些布局系統(tǒng)可視化，你不必被迫花費(fèi)時(shí)間查找語法，或在某處寫出代碼行，然后在其他地方檢查結(jié)果。相反你可以在構(gòu)建網(wǎng)站時(shí)直接查看布局調(diào)整對(duì)網(wǎng)站的影響。

-04-

完全自定義的交互和動(dòng)畫

Webflow的交互和動(dòng)畫工具可讓你根據(jù)常見的觸發(fā)器來控制動(dòng)畫，例如：

頁面加載/點(diǎn)擊/徘徊/滾動(dòng)位置/滑鼠位置等。

結(jié)合UXD的HTML和CSS的前端開發(fā)基礎(chǔ)教學(xué)，同學(xué)們將不再需要研究JavaScript的復(fù)雜性。新的平臺(tái)下，我們旨在將網(wǎng)站動(dòng)畫和交互的功能直接引入可視化工具箱中，使整個(gè)Web設(shè)計(jì)領(lǐng)域更具視覺創(chuàng)意和可訪問性。

總結(jié)：交互設(shè)計(jì)師應(yīng)該在設(shè)計(jì)上進(jìn)行編碼學(xué)習(xí)，理解和掌握基本代碼的使用方式。UXD全新的工作流程下，借助于Webflow平臺(tái)，配合自身系統(tǒng)的教學(xué)，通過進(jìn)行前端開發(fā)可視化來彌合這種差距。

即使學(xué)生沒有編寫代碼，他們?cè)诳紤]構(gòu)建設(shè)計(jì)時(shí)也會(huì)經(jīng)歷和編程開發(fā)相同的思維模式進(jìn)行設(shè)計(jì)創(chuàng)作，并且得到更美觀、更自由、更新穎、更有趣、更大膽的設(shè)計(jì)，從而使作品集和設(shè)計(jì)能力得到了大大的提高。

更多知識(shí)干貨以及其他海外留學(xué)的資訊可以關(guān)注UXD交互工業(yè)產(chǎn)品設(shè)計(jì)分享或者添加小助手，還可獲取講座直播哦~

|福利大放送 | WELFARE?

對(duì)于設(shè)計(jì)初學(xué)者，完成從0開始創(chuàng)作幾乎是不可能的，就像學(xué)習(xí)過程中書讀百遍其義自見一樣。有了大量的積累，才能在腦海里建立素材庫，這些素材庫能幫助同學(xué)們完成最初的設(shè)計(jì)想法積累，基于這樣的基礎(chǔ)再進(jìn)行個(gè)性化的創(chuàng)作，最終才能做出高質(zhì)量的作品集。全球院校最新作品集免費(fèi)拿！添加小助手即可獲?。?/p>

UXD交互工業(yè)產(chǎn)品設(shè)計(jì)學(xué)院是尤克斯國(guó)際旗下的一家專注于交互、服務(wù)、工業(yè)、產(chǎn)品設(shè)計(jì)專業(yè)的頂級(jí)設(shè)計(jì)學(xué)院。除了一對(duì)一設(shè)計(jì)課、基礎(chǔ)技能課程、小組課題、設(shè)計(jì)評(píng)圖、聯(lián)合教學(xué)外，我們提供不定主題的公開課和內(nèi)部小組課，教學(xué)計(jì)劃課程由三大部分組成，包括基礎(chǔ)軟件技能教學(xué)、設(shè)計(jì)理論系統(tǒng)講座、申請(qǐng)必備知識(shí)解析等。

本文版權(quán)歸UXD尤克斯所有

部分圖片來自于網(wǎng)絡(luò)

如有侵權(quán)請(qǐng)與我們聯(lián)系