更新于 3月13日

UI設(shè)計(jì)師

5000-10000元

職位描述

一、核心設(shè)計(jì)能力

1. 視覺(jué)設(shè)計(jì)基礎(chǔ)

設(shè)計(jì)原則:

掌握色彩理論、排版(如網(wǎng)格系統(tǒng)、字體搭配)、對(duì)比度與視覺(jué)層次設(shè)計(jì)。

理解一致性原則(如按鈕樣式統(tǒng)一、圖標(biāo)風(fēng)格協(xié)調(diào))。

設(shè)計(jì)工具:

熟練使用 Figma、Sketch、Adobe XD、Photoshop 等工具完成高保真原型。

熟悉設(shè)計(jì)插件(如Figma的Auto Layout、Design Systems)。

2. 交互設(shè)計(jì)

動(dòng)態(tài)設(shè)計(jì):

設(shè)計(jì)交互動(dòng)效(如頁(yè)面切換、加載效果),使用 Principle、After Effects 或 Lottie 實(shí)現(xiàn)動(dòng)效原型。

交互邏輯:

定義用戶(hù)操作流程(如點(diǎn)擊、滑動(dòng)、表單提交的反饋邏輯),確保界面行為符合直覺(jué)。

3. 響應(yīng)式與跨平臺(tái)設(shè)計(jì)

多端適配:

設(shè)計(jì)適配不同屏幕尺寸(Web、移動(dòng)端、平板)及操作系統(tǒng)(iOS、Android、Windows)的界面方案。

理解 Material Design 和 Apple Human Interface Guidelines 的設(shè)計(jì)規(guī)范。

響應(yīng)式布局:

使用彈性布局(Flexbox)、柵格系統(tǒng)(Grid)確保界面在不同分辨率下的適應(yīng)性。

二、技術(shù)實(shí)現(xiàn)能力

1. 前端技術(shù)基礎(chǔ)

基礎(chǔ)語(yǔ)言:

理解 HTML/CSS 實(shí)現(xiàn)原理,能編寫(xiě)語(yǔ)義化代碼,熟悉 CSS預(yù)處理器(Sass、Less)。

掌握 JavaScript 基礎(chǔ),實(shí)現(xiàn)簡(jiǎn)單交互效果(如DOM操作、事件綁定)。

框架與庫(kù):

熟悉前端框架(如 React、Vue)的UI組件開(kāi)發(fā),配合開(kāi)發(fā)團(tuán)隊(duì)完成設(shè)計(jì)落地。

2. 設(shè)計(jì)開(kāi)發(fā)協(xié)作

設(shè)計(jì)交付:

輸出精準(zhǔn)的設(shè)計(jì)標(biāo)注(尺寸、間距、顏色值)、切圖資源(SVG、PNG@1x/2x/3x)。

使用 Zeplin、Figma Dev Mode 或 Adobe XD開(kāi)發(fā)模式 與工程師無(wú)縫協(xié)作。

代碼還原度:

理解開(kāi)發(fā)實(shí)現(xiàn)限制(如CSS動(dòng)畫(huà)性能、瀏覽器兼容性),避免過(guò)度理想化設(shè)計(jì)。

3. 性能優(yōu)化意識(shí)

資源優(yōu)化:

壓縮圖片(WebP格式)、減少HTTP請(qǐng)求、按需加載資源,提升頁(yè)面加載速度。

動(dòng)效性能:

優(yōu)先使用CSS動(dòng)畫(huà)而非JavaScript,避免復(fù)雜動(dòng)效導(dǎo)致卡頓。

三、用戶(hù)體驗(yàn)(UX)理解

1. 用戶(hù)研究基礎(chǔ)

用戶(hù)畫(huà)像與場(chǎng)景:

通過(guò)用戶(hù)調(diào)研或數(shù)據(jù)分析,理解目標(biāo)用戶(hù)的操作習(xí)慣(如老年用戶(hù)需要更大點(diǎn)擊區(qū)域)。

可用性測(cè)試:

參與A/B測(cè)試或用戶(hù)訪談,驗(yàn)證設(shè)計(jì)方案的易用性(如導(dǎo)航路徑是否高效)。

2. 信息架構(gòu)與可訪問(wèn)性

信息層級(jí)設(shè)計(jì):

通過(guò)視覺(jué)權(quán)重(如字號(hào)、顏色)引導(dǎo)用戶(hù)關(guān)注核心內(nèi)容。

無(wú)障礙設(shè)計(jì):

遵循 WCAG 2.1 標(biāo)準(zhǔn),確保色盲友好、鍵盤(pán)導(dǎo)航支持、屏幕閱讀器兼容。

四、團(tuán)隊(duì)協(xié)作與流程

1. 敏捷開(kāi)發(fā)協(xié)作

需求理解:

與產(chǎn)品經(jīng)理溝通,將業(yè)務(wù)需求轉(zhuǎn)化為界面設(shè)計(jì)(如將“提升用戶(hù)留存”目標(biāo)轉(zhuǎn)化為引導(dǎo)性UI)。

版本迭代:

根據(jù)用戶(hù)反饋或數(shù)據(jù)(如熱力圖分析)優(yōu)化設(shè)計(jì),參與迭代評(píng)審會(huì)議。

2. 設(shè)計(jì)系統(tǒng)與組件化

設(shè)計(jì)系統(tǒng)構(gòu)建:

制定和維護(hù) 設(shè)計(jì)規(guī)范(如顏色、間距、組件庫(kù)),確保多團(tuán)隊(duì)協(xié)作的一致性。

使用 Storybook 或 Figma Design System 管理可復(fù)用組件。

3. 跨職能溝通

技術(shù)溝通:

向開(kāi)發(fā)團(tuán)隊(duì)解釋設(shè)計(jì)意圖,協(xié)商技術(shù)可行性(如復(fù)雜動(dòng)效的實(shí)現(xiàn)成本)。

文檔編寫(xiě):

輸出設(shè)計(jì)文檔(如交互說(shuō)明、動(dòng)效參數(shù)),降低溝通成本。

五、工具與技術(shù)棧

| 能力領(lǐng)域 | 關(guān)鍵工具與技術(shù) |

| 設(shè)計(jì)工具 | Figma、Sketch、Adobe XD、Photoshop、Illustrator |

| 動(dòng)效工具 | Principle、After Effects、Lottie、Protopie |

| 協(xié)作工具 | Zeplin、Jira、Slack、Confluence |

| 前端技術(shù) | HTML/CSS/JavaScript、React/Vue組件開(kāi)發(fā) |

| 設(shè)計(jì)系統(tǒng) | Figma Design System、Storybook、Zeroheight |

六、軟技能與職業(yè)素養(yǎng)

1. 細(xì)節(jié)敏感度:

關(guān)注像素級(jí)精度(如對(duì)齊、間距)、顏色一致性(避免色差)。

2. 批判性思維:

質(zhì)疑不合理需求(如過(guò)度復(fù)雜的功能),提出優(yōu)化方案。

3. 時(shí)間管理:

在快速迭代中平衡設(shè)計(jì)質(zhì)量與交付速度。

4. 持續(xù)學(xué)習(xí):

跟蹤設(shè)計(jì)趨勢(shì)(如暗黑模式、3D元素、玻璃擬態(tài)),探索AI輔助工具(如MidJourney生成設(shè)計(jì)靈感)。

七、UI能力的驗(yàn)證標(biāo)準(zhǔn)

1. 作品集(Portfolio):

展示完整的項(xiàng)目案例(從需求分析到設(shè)計(jì)落地),體現(xiàn)問(wèn)題解決能力。

2. 技術(shù)還原度:

開(kāi)發(fā)實(shí)現(xiàn)的界面與設(shè)計(jì)稿的一致性(如通過(guò)像素比對(duì)工具驗(yàn)證)。

3. 用戶(hù)反饋:

上線后用戶(hù)對(duì)界面易用性、美觀度的正向評(píng)價(jià)(如NPS評(píng)分提升)。

總結(jié)

優(yōu)秀的UI設(shè)計(jì)師/工程師需兼具藝術(shù)感與工程思維:

設(shè)計(jì)端:創(chuàng)造美觀、易用的界面,貼合用戶(hù)心理;

技術(shù)端:理解實(shí)現(xiàn)邏輯,確保設(shè)計(jì)高效落地;

協(xié)作端:成為產(chǎn)品經(jīng)理、開(kāi)發(fā)團(tuán)隊(duì)與用戶(hù)之間的橋梁,推動(dòng)用戶(hù)體驗(yàn)的持續(xù)優(yōu)化。

工作地點(diǎn)

開(kāi)遠(yuǎn)廣場(chǎng)

職位發(fā)布者

高女士/人事

剛剛活躍
立即溝通
內(nèi)蒙古中坤能源科技發(fā)展有限公司
本公司是一家集型煤、燒烤碳生產(chǎn)、銷(xiāo)售;煤炭工程機(jī)械、汽車(chē)配件、礦山設(shè)備、礦山機(jī)電批發(fā)兼零售;土石方工程、礦產(chǎn)資源開(kāi)采、生產(chǎn)、銷(xiāo)售;煤炭運(yùn)輸、工程機(jī)械租賃、礦山施工于一體的公司。
公司主頁(yè)