互聯(lián)網(wǎng)的產(chǎn)品視覺設(shè)計師有分為界面視覺設(shè)計師和運(yùn)營視覺設(shè)計師，那么，這兩者有何區(qū)別呢？

隨著時代進(jìn)步，互聯(lián)網(wǎng)的發(fā)展讓我們的生活越來越便利。用戶在追求產(chǎn)品功能便利的同時，對界面品質(zhì)的追求也越來越高。視覺設(shè)計從傳統(tǒng)行業(yè)走向互聯(lián)網(wǎng)時代，互聯(lián)網(wǎng)產(chǎn)品的視覺設(shè)計既是對互聯(lián)網(wǎng)產(chǎn)品的包裝，也是對互聯(lián)網(wǎng)產(chǎn)品的一種解釋。越來越多的人對界面的視覺設(shè)計產(chǎn)生濃厚的興趣，想進(jìn)一步了解什么是互聯(lián)網(wǎng)的視覺設(shè)計。

一、互聯(lián)網(wǎng)產(chǎn)品視覺設(shè)計師有幾類

• 第一類：界面視覺設(shè)計師——產(chǎn)品功能方向的視覺設(shè)計師
• 第二類：運(yùn)營視覺設(shè)計師——運(yùn)營方向的視覺設(shè)計師

第一類：界面視覺設(shè)計師

產(chǎn)品功能方向的設(shè)計師，從設(shè)計的出發(fā)點(diǎn)來說，核心以產(chǎn)品功能和服務(wù)設(shè)計為主，更關(guān)注產(chǎn)品以怎樣的界面呈現(xiàn)。 負(fù)責(zé)產(chǎn)品或網(wǎng)站的圖形、圖標(biāo)、色彩、視覺風(fēng)格等，決定營造出什么樣的視覺體驗(yàn)。

從視覺層面把控產(chǎn)品界面設(shè)計，在分析產(chǎn)品邏輯和交互邏輯后，負(fù)責(zé)簡潔而優(yōu)雅的傳達(dá)有效信息，并通過視覺設(shè)計制造出愉悅的用戶體驗(yàn)，好的UI設(shè)計師肯定要對交互有自己的理解，能提出更優(yōu)于交互設(shè)計稿的布局方案。

其實(shí)互聯(lián)網(wǎng)領(lǐng)域中，UI 和 UX 設(shè)計師的界限相當(dāng)模糊，在很多創(chuàng)業(yè)公司，這兩個設(shè)計角色是合二為一的。

（1）界面視覺設(shè)計師的工作職責(zé)和內(nèi)容

1. 為產(chǎn)品進(jìn)行前期的視覺推導(dǎo)并完成設(shè)計方案。
2. 負(fù)責(zé)為互聯(lián)網(wǎng)新產(chǎn)品與新功能提供創(chuàng)意策劃并提供用戶界面的設(shè)計方案。
3. 負(fù)責(zé)參與前瞻性產(chǎn)品的創(chuàng)意設(shè)計和動態(tài)DEMO的實(shí)現(xiàn)。

（2）界面視覺設(shè)計師軟件

第二類：運(yùn)營視覺設(shè)計師

運(yùn)營方向設(shè)計師設(shè)計的出發(fā)點(diǎn)以產(chǎn)品活動設(shè)計為主，設(shè)計活動專題界面，如天貓雙十一、京東618等。這類營銷類型的設(shè)計是為了吸引用戶參加對應(yīng)的活動，或加深用戶對互聯(lián)網(wǎng)產(chǎn)品的印象，產(chǎn)生參與行為。

運(yùn)營視覺設(shè)計師不同于UI和交互設(shè)計師，運(yùn)營視覺設(shè)計師的工作要求他們更加注重視覺豐富性的表現(xiàn)，更好的表達(dá)交互邏輯，優(yōu)秀的體驗(yàn)需要視覺與交互兼顧。

（1）運(yùn)營方向視覺設(shè)計師的工作職責(zé)和內(nèi)容

1. 基于對運(yùn)營設(shè)計需求的良好理解能力完成需要的視覺設(shè)計提案。
2. 團(tuán)隊協(xié)作設(shè)定整體活動界面視覺風(fēng)格與創(chuàng)意規(guī)劃。
3. 配合團(tuán)隊高效地開展系統(tǒng)化的詳細(xì)視覺設(shè)計。
4. 制定UI設(shè)計規(guī)范和建立組件庫。

（2）運(yùn)營視覺設(shè)計師軟件

二、界面視覺設(shè)計與運(yùn)營視覺設(shè)計最大的區(qū)別

界面視覺設(shè)計師最關(guān)心的是產(chǎn)品是否富有舒適的界面、用戶體驗(yàn)和實(shí)用能力。

運(yùn)營視覺設(shè)計師最關(guān)心的是視度覺沖擊力和美觀度。

1. 色彩

界面設(shè)計：會用醒目的顏色來更好的吸引人的注意力。第一級別的操作常用顏色作為行為召喚，比如：按鈕。

圖片來源 Google Material Design

鮮艷的強(qiáng)調(diào)色用于你的主要操作按鈕以及組件，如開關(guān)或滑片。左對齊的部分圖標(biāo)或章節(jié)標(biāo)題也可以使用強(qiáng)調(diào)色。

運(yùn)營設(shè)計：顏色作為情感表達(dá)重要途徑，會最大化的利用色彩、圖片和文字信息來提高轉(zhuǎn)化率。顏色能對用戶產(chǎn)生情感影響，將用戶帶到下一步行動中。

圖片來源 Material.io

• 綠色：健康、重生、干凈 ；
• 紅色：熱情、愛戀、憤怒、危險；
• 黃色：正能量、快樂、希望、美食。

2. 層級

界面設(shè)計：背景層、內(nèi)容層、操作層、狀態(tài)層。使用清晰視覺層級，通過視覺差異將信息分類，讓界面設(shè)計，更加透氣簡潔。

圖中信息層次很分明 | 圖片來源 學(xué)UI網(wǎng)

運(yùn)營設(shè)計：運(yùn)用良好的視覺層級呈現(xiàn)給用戶，提高識別效率、激發(fā)用戶興趣、延遲用戶在頁面停留時間、減少用戶流失。

3. 字體

界面設(shè)計：字體、字號的運(yùn)用不同，可以給頁面帶來不同的氣質(zhì)和頁面關(guān)系。

“主體（Body）”樣式的例子 | 圖片來源 Google Material Design

運(yùn)營設(shè)計：字體很重要，好的字體設(shè)計能給頁面加分。不同的字體給用戶帶來不同的用戶情感，并且增強(qiáng)排版的節(jié)奏感、突出主題，比如：活動標(biāo)題。

充分利用春節(jié)的元素，進(jìn)行字體設(shè)計。節(jié)日的氣氛也到位了

4. 圖標(biāo)

界面設(shè)計：多應(yīng)用于標(biāo)簽、標(biāo)題、按鈕、導(dǎo)航、信息提示等。圖標(biāo)精致、細(xì)致會使整個設(shè)計感觀提升，讓設(shè)計的檔次得到提高。

圖片來源 Google Material Design

運(yùn)營設(shè)計：富有統(tǒng)領(lǐng)和引導(dǎo)作用，讓畫面看起來更活潑、有活力。

圖標(biāo)精確的表述，讓畫面看上去更加豐富了。

5. 設(shè)計風(fēng)格

• 界面設(shè)計：通過研究分析、設(shè)計草案、設(shè)計辯證、設(shè)計提案后，得出一套完整的UI界面，使用戶的實(shí)際需求成為產(chǎn)品設(shè)計的導(dǎo)向，使產(chǎn)品更符合用戶的習(xí)慣、經(jīng)驗(yàn)和期待。
• 運(yùn)營設(shè)計：根據(jù)目標(biāo)用戶分析、素材收集整理后，在設(shè)計前初步的設(shè)定設(shè)計理念。設(shè)計理念是設(shè)計師在構(gòu)思過程中所確立的主導(dǎo)思想，它賦予設(shè)計內(nèi)涵和風(fēng)格特點(diǎn)。

參考文獻(xiàn)：

• 《視覺鏈》，互聯(lián)網(wǎng)產(chǎn)品的視覺設(shè)計理念與規(guī)范/吳佳敏著，北京機(jī)械工業(yè)出版社
• 《視覺設(shè)計師進(jìn)階所需的17條思考維度》@iYoko0509（愛奇藝無線UED資深視覺設(shè)計師）

作者：林小小，公眾號：點(diǎn)融設(shè)計中心DDC（ID：DR_DDC）

本文由 @林小小 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議