正文

ui設(shè)計(jì)和網(wǎng)頁設(shè)計(jì)區(qū)別（ui設(shè)計(jì)和網(wǎng)頁設(shè)計(jì)區(qū)別大嗎）

發(fā)布時(shí)間：2023-04-28 01:37:26 稿源：創(chuàng)意嶺閱讀： 898

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于ui設(shè)計(jì)和網(wǎng)頁設(shè)計(jì)區(qū)別的問題，以下是小編對(duì)此問題的歸納整理，讓我們一起來看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀企業(yè)，服務(wù)客戶遍布全國，設(shè)計(jì)相關(guān)業(yè)務(wù)請(qǐng)撥打175-8598-2043，或微信：1454722008

本文目錄:

1、界面設(shè)計(jì),網(wǎng)頁設(shè)計(jì),平面設(shè)計(jì),他們之間的區(qū)別是什么？
2、UI設(shè)計(jì),平面設(shè)計(jì),網(wǎng)站設(shè)計(jì)有什么不同？
3、網(wǎng)頁美工與UI設(shè)計(jì)區(qū)別是什么？
4、平面設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、UI設(shè)計(jì)、視覺設(shè)計(jì)、電商美工設(shè)計(jì)的區(qū)別

ui設(shè)計(jì)和網(wǎng)頁設(shè)計(jì)區(qū)別（ui設(shè)計(jì)和網(wǎng)頁設(shè)計(jì)區(qū)別大嗎）

一、界面設(shè)計(jì),網(wǎng)頁設(shè)計(jì),平面設(shè)計(jì),他們之間的區(qū)別是什么？

三者的區(qū)別如下：

1.界面設(shè)計(jì)類似交互設(shè)計(jì)，更偏重于用戶體驗(yàn)和互動(dòng)的功能實(shí)現(xiàn)。

2.網(wǎng)頁設(shè)計(jì)的核心是用戶。是要實(shí)現(xiàn)某些特定的功能。

3.平面設(shè)計(jì)領(lǐng)域比較廣，雜志，廣告等在平面上看到的圖都可以稱之為平面設(shè)計(jì)。

網(wǎng)頁設(shè)計(jì)（webdesign，又稱為WebUIdesign，WUIdesign，WUI），是根據(jù)企業(yè)希望向?yàn)g覽者傳遞的信息（包括產(chǎn)品、服務(wù)、理念、文化），進(jìn)行網(wǎng)站功能策劃，然后進(jìn)行的頁面設(shè)計(jì)美化工作。作為企業(yè)對(duì)外宣傳物料的其中一種，精美的網(wǎng)頁設(shè)計(jì)，對(duì)于提升企業(yè)的互聯(lián)網(wǎng)品牌形象至關(guān)重要。

網(wǎng)頁設(shè)計(jì)一般分為三種大類：功能型網(wǎng)頁設(shè)計(jì)（服務(wù)網(wǎng)站&B/S軟件用戶端）、形象型網(wǎng)頁設(shè)計(jì)（品牌形象站）、信息型網(wǎng)頁設(shè)計(jì)（門戶站）。設(shè)計(jì)網(wǎng)頁的目的不同，應(yīng)選擇不同的網(wǎng)頁策劃與設(shè)計(jì)方案。

多頁面站點(diǎn)頁面的編排設(shè)計(jì)要求把頁面之間的有機(jī)聯(lián)系反映出來，特別要求處理好頁面之間和頁面內(nèi)的秩序與內(nèi)容的關(guān)系。為了達(dá)到最佳的視覺表現(xiàn)效果，反復(fù)推敲整體布局的合理性，使瀏覽者有一個(gè)流暢的視覺體驗(yàn)。

二、UI設(shè)計(jì),平面設(shè)計(jì),網(wǎng)站設(shè)計(jì)有什么不同？

一、UI設(shè)計(jì)、平面設(shè)計(jì)、網(wǎng)站設(shè)計(jì)的簡(jiǎn)單介紹：

①-UI設(shè)計(jì)的定義：

UI即User Interface(用戶界面)的簡(jiǎn)稱。UI設(shè)計(jì)是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品位，還要讓軟件的操作變得舒適簡(jiǎn)單、自由，充分體現(xiàn)軟件的定位和特點(diǎn)。

軟件設(shè)計(jì)可分為兩個(gè)部分：編碼設(shè)計(jì)與UI設(shè)計(jì)。UI的本意是用戶界面，是英文User和 Interface的縮寫。從字面上看是用戶與界面2個(gè)部分組成，但實(shí)際上還包括用戶與界面之間的交互關(guān)系。

在飛速發(fā)展的電子產(chǎn)品中，界面設(shè)計(jì)工作一點(diǎn)點(diǎn)的被重視起來。做界面設(shè)計(jì)的“美工”也隨之被稱之為“UI設(shè)計(jì)師”或“UI工程師”。其實(shí)軟件界面設(shè)計(jì)就像工業(yè)產(chǎn)品中的工業(yè)造型設(shè)計(jì)一樣，是產(chǎn)品的重要賣點(diǎn)。一個(gè)電子產(chǎn)品擁有美觀的界面會(huì)給人帶來舒適的視覺享受，拉近人與商品的距離，是建立在科學(xué)性之上的藝術(shù)設(shè)計(jì)。檢驗(yàn)一個(gè)界面的標(biāo)準(zhǔn)既不是某個(gè)項(xiàng)目開發(fā)組領(lǐng)導(dǎo)的意見也不是項(xiàng)目成員投票的結(jié)果，而是終端用戶的感受。

②-平面設(shè)計(jì)的定義:

平面設(shè)計(jì)（graphic design），也稱為視覺傳達(dá)設(shè)計(jì)，是以“視覺”作為溝通和表現(xiàn)的方式，透過多種方式來創(chuàng)造和結(jié)合符號(hào)、圖片和文字，借此作出用來傳達(dá)想法或訊息的視覺表現(xiàn)。平面設(shè)計(jì)師可能會(huì)利用字體排印、視覺藝術(shù)、版面（page layout）、電腦軟件等方面的專業(yè)技巧，來達(dá)成創(chuàng)作計(jì)劃的目的。[1] 平面設(shè)計(jì)通?？芍钢谱鳎ㄔO(shè)計(jì)）時(shí)的過程，以及最后完成的作品。

平面設(shè)計(jì)的常見用途包括標(biāo)識(shí)（商標(biāo)和品牌）、出版物（雜志，報(bào)紙和書籍）、平面廣告，海報(bào)，廣告牌，網(wǎng)站圖形元素、標(biāo)志和產(chǎn)品包裝。例如，產(chǎn)品包裝可能包括的商標(biāo)或其他的藝術(shù)作品、編排文本和純粹的設(shè)計(jì)元素，如風(fēng)格統(tǒng)一的圖像，形狀，大小和顏色。組合是平面設(shè)計(jì)的最重要的特性之一，尤其是當(dāng)產(chǎn)品使用預(yù)先存在的材料或多種元素融合。

③-網(wǎng)站設(shè)計(jì)的定義：

簡(jiǎn)單來說，網(wǎng)站設(shè)計(jì)的目的就是產(chǎn)生網(wǎng)站。簡(jiǎn)單的信息如文字，圖片（GIFs， JPEGs，PNGs）和表格，都可以通過使超文件標(biāo)示語言、可擴(kuò)展超文本標(biāo)記語言等標(biāo)示語言放置到網(wǎng)站頁面上。而更復(fù)雜的信息如矢量圖形、動(dòng)畫、視頻、聲頻等多媒體檔案則需要插件程序來運(yùn)行，同樣地它們亦需要標(biāo)示語言移植在網(wǎng)站內(nèi)。網(wǎng)頁設(shè)計(jì)是設(shè)計(jì)過程的前端（客戶端）的設(shè)計(jì)通常用于描述一個(gè)網(wǎng)站，包括寫標(biāo)記，但是這是一個(gè)灰色地帶，因?yàn)檫@還覆蓋了網(wǎng)絡(luò)的發(fā)展。網(wǎng)頁設(shè)計(jì)師預(yù)計(jì)將有意識(shí)的可用性，如果他們的作用，需要?jiǎng)?chuàng)建標(biāo)記，那么它們也有望成為最新的網(wǎng)頁易讀性指引。網(wǎng)站設(shè)計(jì)(Web Design)，網(wǎng)站設(shè)計(jì)是一個(gè)把軟件需求轉(zhuǎn)換成用軟件網(wǎng)站表示的過程，就是指在因特網(wǎng)上，根據(jù)一定的規(guī)則，使用Dreamweaver、photoshop等工具制作的用于展示特定內(nèi)容的相關(guān)網(wǎng)頁的集合。簡(jiǎn)單地說，網(wǎng)站是一種通訊工具，就像布告欄一樣，人們可以通過網(wǎng)站來發(fā)布自己想要公開的資訊（信息），或者利用網(wǎng)站來提供相關(guān)的網(wǎng)絡(luò)服務(wù)（網(wǎng)絡(luò)服務(wù)）。人們可以通過網(wǎng)頁瀏覽器來訪問網(wǎng)站，獲取自己需要的資訊（信息）或者享受網(wǎng)絡(luò)服務(wù)。網(wǎng)站它是由域名（俗稱網(wǎng)址），網(wǎng)站源程序和網(wǎng)站空間三部分構(gòu)成。其中域名它是類似于互聯(lián)網(wǎng)上的門牌號(hào)碼，是用于識(shí)別和定位互聯(lián)網(wǎng)上計(jì)算機(jī)的層次結(jié)構(gòu)式字符標(biāo)識(shí)，與該計(jì)算機(jī)的互聯(lián)網(wǎng)協(xié)議（IP）地址相對(duì)應(yīng)。而網(wǎng)站設(shè)計(jì)是設(shè)計(jì)師通過像Frontpage或Dreamweaver等工具來對(duì)網(wǎng)站進(jìn)行編輯的！

二、UI設(shè)計(jì)、平面設(shè)計(jì)、網(wǎng)站設(shè)計(jì)所需的工具：

1、UI設(shè)計(jì)所需的軟件工具：

從左開始一次為：Photoshop、Illustrator、CorelDraw、Indesign、Fireworks、DreamWeaver、Flash 、HTML5、CSS(Cascading Style Sheets)、Axure RP Pro 7.0、IOS、Android。

2、平面設(shè)計(jì)所需的軟件工具：

Photoshop、Illustrator、CorelDraw、Indesign、Fireworks、PageMaker。

3、網(wǎng)站設(shè)計(jì)所需的軟件工具：

①Photoshop：

學(xué)習(xí)圖像處理、編輯、通道、圖層、路徑綜合運(yùn)用;圖像色彩的校正;各種特效濾鏡的使用;特效字的制作;圖像輸出與優(yōu)化等,靈活運(yùn)用圖層風(fēng)格，流體變形及褪底和蒙板，制作出千變?nèi)f化的圖像特效。

②Freehand：

不論是個(gè)人作品設(shè)計(jì)、公司徽標(biāo)、海報(bào)制作，都可以輕松完成，應(yīng)用于廣告、印刷等行業(yè)

③CorelDraw：

通過CorelDRAW9的全方面的設(shè)計(jì)及網(wǎng)頁功能融合到現(xiàn)有的設(shè)計(jì)方案中，制作矢量的插圖、設(shè)計(jì)及圖像，出色地設(shè)計(jì)公司標(biāo)志、簡(jiǎn)報(bào)、彩頁、手冊(cè)、產(chǎn)品包裝、標(biāo)識(shí)、網(wǎng)頁及其它。

④Illustrator：學(xué)習(xí)圖形繪制、包裝、宣傳頁的制作，讓你更加方便地進(jìn)行LOGO及CI設(shè)計(jì)，不到一個(gè)月，您就會(huì)成為一名真正的美術(shù)大師，在 Photoshop的基礎(chǔ)上再學(xué)它如虎添翼，效率成倍提高。

⑤Microsoft FrontPage

如果你曾對(duì)Word很熟悉，那么相信你用 FrontPage進(jìn)行網(wǎng)頁設(shè)計(jì)一定會(huì)非常順手。使用FrontPage制作網(wǎng)頁，你能真正體會(huì)到“功能強(qiáng)大，簡(jiǎn)單易用”的含義。頁面制作由FrontPage中的Editor完成，其工作窗口由3個(gè)標(biāo)簽頁組成，分別是“所見即所得”的編輯頁，HTML代碼編輯頁和預(yù)覽頁。FrontPage帶有圖形和GIF動(dòng)畫編輯器，支持CGI和CSS。向?qū)Ш湍０宥寄苁钩鯇W(xué)者在編輯網(wǎng)頁時(shí)感到更加方便。

FrontPage最強(qiáng)大之處是其站點(diǎn)管理功能。在更新服務(wù)器上的站點(diǎn)時(shí)，不需要?jiǎng)?chuàng)建更改文件的目錄。FrontPage會(huì)為你跟蹤文件并拷貝那些新版本文件。FrontPage是現(xiàn)有網(wǎng)頁制作軟件中惟一既能在本地計(jì)算機(jī)上工作，又能通過Internet直接對(duì)遠(yuǎn)程服務(wù)器上的文件進(jìn)行工作的軟件。

⑥Netscape編輯器

Netscape Communicator和Netscape Navigator Gold3.0版本都帶有網(wǎng)頁編輯器。如果你喜歡用Netscape瀏覽器上網(wǎng)，使用Netscape編輯器真是簡(jiǎn)單方便!當(dāng)你用Netscape瀏覽器顯示網(wǎng)頁時(shí)，單擊編輯按鈕，Netscape就會(huì)把網(wǎng)頁存儲(chǔ)在硬盤中，然后就可以開始編輯了。你也可以像使用Word那樣編輯文字、字體、顏色，改變主頁作者、標(biāo)題、背景顏色或圖像，定義描點(diǎn)，插入鏈接，定義文檔編碼，插入圖像，創(chuàng)建表格等，是不是與FrontPage 2000還有些像?但是，Netscape編輯器對(duì)復(fù)雜的網(wǎng)頁設(shè)計(jì)就顯得功能有限了，它連表單創(chuàng)建、多框架創(chuàng)建都不支持。

Netscape編輯器是網(wǎng)頁制作初學(xué)者很好的入門工具。如果你的網(wǎng)頁主要是由文本和圖片組成的，Netscape編輯器將是一個(gè)輕松的選擇。如果你對(duì)HTML語言有所了解的話，能夠使用Notepad或Ultra Edit等文本編輯器來編寫少量的HTML語句，也可以彌補(bǔ)Netscape編輯器的一些不足。

⑦Adobe Pagemill

Pagemill功能不算強(qiáng)大，但使用起來很方便，適合初學(xué)者制作較為美觀、而不是非常復(fù)雜的主頁。如果你的主頁需要很多框架、表單和Image Map圖像，那么Adobe Pagemill的確是你的首選。 Pagemill另一大特色是有一個(gè)剪貼板，可以將任意多的文本、圖形、表格拖放到里面，需要時(shí)再打開，很方便。

⑧Claris Home Page

如果使用Claris Home Page軟件，你可以在幾分鐘之內(nèi)創(chuàng)建一個(gè)動(dòng)態(tài)網(wǎng)頁。這是因?yàn)樗幸粋€(gè)很好的創(chuàng)建和編輯Frame(框架)的工具，你不必花費(fèi)太多的力氣就可以增加新的Frame(框架)。而且Claris Home Page 3.0集成了FileMaker數(shù)據(jù)庫，增強(qiáng)的站點(diǎn)管理特性還允許你檢測(cè)頁面的合法連接。不過界面設(shè)計(jì)過于粗糙，對(duì)Image Map圖像的處理也不完全。

⑨DreamWeaver

自制動(dòng)態(tài)HTML動(dòng)畫的網(wǎng)頁

DreamWeaver是一個(gè)很酷的網(wǎng)頁設(shè)計(jì)軟件，它包括可視化編輯、HTML代碼編輯的軟件包，并支持ActiveX、JavaScript、Java、Flash、ShockWave等特性，而且它還能通過拖拽從頭到尾制作動(dòng)態(tài)的HTML動(dòng)畫，支持動(dòng)態(tài)HTML(Dynamic HTML)的設(shè)計(jì)，使得頁面沒有plug-in也能夠在Netscape和IE 4.0瀏覽器中正確地顯示頁面的動(dòng)畫。同時(shí)它還提供了自動(dòng)更新頁面信息的功能。

DreamWeaver還采用了Roundtrip HTML技術(shù)。這項(xiàng)技術(shù)使得網(wǎng)頁在DreamWeaver和HTML代碼編輯器之間進(jìn)行自由轉(zhuǎn)換，HTML句法及結(jié)構(gòu)不變。這樣，專業(yè)設(shè)計(jì)者可以在不改變?cè)芯庉嬃?xí)慣的同時(shí)，充分享受到可視化編輯帶來的益處。 DreamWeaver最具挑戰(zhàn)性和生命力的是它的開放式設(shè)計(jì)，這項(xiàng)設(shè)計(jì)使任何人都可以輕易擴(kuò)展它的功能。

⑩Fireworks

第一款徹底為Web制作者們?cè)O(shè)計(jì)的軟件

Fireworks的來頭實(shí)在不小，它的出現(xiàn)使Web作圖發(fā)生了革命性的變化。Fireworks是專為網(wǎng)絡(luò)圖像設(shè)計(jì)而開發(fā)，內(nèi)建豐富的支持網(wǎng)絡(luò)出版功能，比如Fireworks能夠自動(dòng)切圖、生成鼠標(biāo)動(dòng)態(tài)感應(yīng)的javascript。而且Fireworks具有十分強(qiáng)大的動(dòng)畫功能和一個(gè)幾乎完美的網(wǎng)絡(luò)圖像生成器(Export功能)。它增強(qiáng)了與dreamweaver的聯(lián)系，可以直接生成dreamweaver的Libaray甚至能夠?qū)С鰹榕浜螩SS式樣的網(wǎng)頁及圖片!

⑪Flash

讓你的網(wǎng)頁動(dòng)起來

Flash是用在互聯(lián)網(wǎng)上動(dòng)態(tài)的、可互動(dòng)的shockwave。它的優(yōu)點(diǎn)是體積小，可邊下載邊播放，這樣就避免了用戶長(zhǎng)時(shí)間的等待。FLASH可以用其生成動(dòng)畫，還可在網(wǎng)頁中加入聲音。這樣你就能生成多媒體的圖形和界面，而使文件的體積卻很小。FLASH雖然不可以像一門語言一樣進(jìn)行編程，但用其內(nèi)置的語句并結(jié)合JavaScripe，您也可做出互動(dòng)性很強(qiáng)的主頁來。有人曾經(jīng)說過：下個(gè)世紀(jì)的網(wǎng)絡(luò)設(shè)計(jì)人不會(huì)用FLASH，必將被淘汰出局!我相信這句話沒錯(cuò)!

⑫HotDog Professional

制作要加入多種復(fù)雜技術(shù)的網(wǎng)頁

HotDog是較早基于代碼的網(wǎng)頁設(shè)計(jì)工具，其最具特色的是提供了許多向?qū)Чぞ?，能幫助設(shè)計(jì)者制作頁面中的復(fù)雜部分。HotDog的高級(jí)HTML支持插入marquee，并能在預(yù)覽模式中以正常速度觀看。這點(diǎn)非常難得，因?yàn)榧词故讋?chuàng)這種標(biāo)簽的Microsoft在FrontPage中也未提供這樣的功能。HotDog對(duì)plug-in的支持也遠(yuǎn)遠(yuǎn)超過其他產(chǎn)品，它提供的對(duì)話框允許你以手動(dòng)方式為不同格式的文件選擇不同的選項(xiàng)。但對(duì)中文的處理不很方便。

HotDog是個(gè)功能強(qiáng)大的軟件，對(duì)于那些希望在網(wǎng)頁中加入CSS、Java、RealVideo等復(fù)雜技術(shù)的高級(jí)設(shè)計(jì)者，是個(gè)很好的選擇。

⑬HomeSite

制作可完全控制頁面進(jìn)程的網(wǎng)頁

Allaire的HomeSite是一個(gè)小巧而全能的HTML代碼編輯器，有豐富的幫助功能，支持CGI和CSS等等，并且可以直接編輯perl程序。HomeSite工作界面繁簡(jiǎn)由人，根據(jù)習(xí)慣，可以將其設(shè)置成像Notepad那樣簡(jiǎn)單的編輯窗口，也可以在復(fù)雜的界面下工作。

HomeSite更適合那些比較復(fù)雜和精彩頁面的設(shè)計(jì)。如果你希望能完全控制你制作的頁面的進(jìn)程，HomeSite是你最佳選擇。不過對(duì)于生手過于復(fù)雜。

⑭Microsoft Visual Studio

是美國微軟公司的開發(fā)工具包系列產(chǎn)品。

該系列的版本有：2003、2005、2008、2010、2012、2013、2015、2015 RTM和未來的版本;

適合開發(fā)動(dòng)態(tài)的aspx網(wǎng)頁，同時(shí)，還能制作無刷新網(wǎng)站、webservice功能等。

⑮Jbuilder

一個(gè)可視化JAVA開發(fā)工具。它是在Java2平臺(tái)上開發(fā)商業(yè)應(yīng)用程序、數(shù)據(jù)庫、發(fā)布程序的優(yōu)秀工具。它支持J2EE，所以程序員可以快速的轉(zhuǎn)換企業(yè)版Java應(yīng)用程序。

不論是各種版本，均適合使用其開發(fā)出JSP網(wǎng)頁。

三、UI設(shè)計(jì)、平面設(shè)計(jì)、網(wǎng)站設(shè)計(jì)的設(shè)計(jì)方向/方法/步驟/流程：

1、UI設(shè)計(jì)方向

UI是用戶界面，是英文User和 interface的縮寫。從字面上看是用戶與界面2個(gè)組成部分，但實(shí)際上還包括用戶與界面之間的交互關(guān)系，所以這樣可分為3個(gè)方向，他們分別是：用戶研究、交互設(shè)計(jì)、界面設(shè)計(jì)。

①、用戶研究

用戶研究包含兩個(gè)方面：一是可用性工程學(xué)（usability Engineering），研究如何提高產(chǎn)品的可用性，使得系統(tǒng)的設(shè)計(jì)更容易被人使用、學(xué)習(xí)和記憶；二是通過可用性工程學(xué)的研究，發(fā)掘用戶的潛在需求，為技術(shù)創(chuàng)新提供另外一條思路和方法。

用戶研究是一個(gè)跨學(xué)科的專業(yè)，涉及可用性工程學(xué)、人類功效學(xué)、心理學(xué)、市場(chǎng)研究學(xué)、教育學(xué)、設(shè)計(jì)學(xué)等等學(xué)科。用戶研究技術(shù)是站在人文學(xué)科的角度來研究產(chǎn)品，站在用戶的角度介入到產(chǎn)品的開發(fā)和設(shè)計(jì)中。

用戶研究通過對(duì)于用戶的工作環(huán)境、產(chǎn)品的使用習(xí)慣等研究，使得在產(chǎn)品開發(fā)的前期能夠把用戶對(duì)于產(chǎn)品功能的期望、對(duì)設(shè)計(jì)和外觀方面的要求融入到產(chǎn)品的開發(fā)過程中去，從而幫助企業(yè)完善產(chǎn)品設(shè)計(jì)或者探索一個(gè)新產(chǎn)品概念。

他是得到用戶需求和反饋的途徑，也是檢驗(yàn)界面與交互設(shè)計(jì)是否合理的重要標(biāo)準(zhǔn)。

②交互設(shè)計(jì)

這部分指人與機(jī)之間的交互工程，在過去交互設(shè)計(jì)也由程序員來做，其實(shí)程序員擅長(zhǎng)編碼，而不善于與最終用戶交互。所以，很多的軟件雖然功能比較齊全，但是交互方面設(shè)計(jì)很粗糙，繁瑣難用，學(xué)習(xí)困難。使用這樣的軟件后，不是使人聰明與進(jìn)步而是讓人感到愚弄與羞辱。許多人因?yàn)椴荒懿僮麟娔X軟件而下崗失業(yè)，這樣的交互使電腦成為讓人恐懼的科技怪獸。于是我們把交互設(shè)計(jì)從程序員的工作中分離出來單獨(dú)成為一個(gè)學(xué)科，也就是人機(jī)交互設(shè)計(jì)。他的目的在于加強(qiáng)軟件的易用、易學(xué)、易理解，使計(jì)算機(jī)真正成為方便地為人類服務(wù)的工具。

③界面設(shè)計(jì)

在漫長(zhǎng)的軟件發(fā)展中，界面設(shè)計(jì)工作一直沒有被重視起來。做界面設(shè)計(jì)的人也被貶義的稱為“美工”。其實(shí)軟件界面設(shè)計(jì)就像工業(yè)產(chǎn)品中的工業(yè)造型設(shè)計(jì)一樣，是產(chǎn)品的重要買點(diǎn)。一個(gè)友好美觀的界面會(huì)給人帶來舒適的視覺享受，拉近人與電腦的距離，為商家創(chuàng)造賣點(diǎn)。界面設(shè)計(jì)不是單純的美術(shù)繪畫，他需要定位使用者、使用環(huán)境、使用方式并且為最終用戶而設(shè)計(jì)，是純粹的科學(xué)性的藝術(shù)設(shè)計(jì)。檢驗(yàn)一個(gè)界面的標(biāo)準(zhǔn)即不是某個(gè)項(xiàng)目開發(fā)組領(lǐng)導(dǎo)的意見也不是項(xiàng)目成員投票的結(jié)果，而是最終用戶的感受。所以界面設(shè)計(jì)要和用戶研究緊密結(jié)合，是一個(gè)不斷為最終用戶設(shè)計(jì)滿意視覺效果的過程。

2、平面設(shè)計(jì)的設(shè)計(jì)方法/步驟：

①、調(diào)查

調(diào)查是了解事物的過程，設(shè)計(jì)需要的是有目的和完整的調(diào)查。背景、市場(chǎng)調(diào)查、行業(yè)調(diào)查（關(guān)于品牌、受眾、產(chǎn)品……）、關(guān)于定位、表現(xiàn)手法、……調(diào)查是設(shè)計(jì)的開始和基礎(chǔ)（背景知識(shí)）。

②、內(nèi)容

內(nèi)容分為主題和具體內(nèi)容兩部分，這是設(shè)計(jì)師在進(jìn)行設(shè)計(jì)前的基本材料。

③、理念

構(gòu)思立意是設(shè)計(jì)的第一步，在設(shè)計(jì)中思路比一切更重要。理念一向獨(dú)立于設(shè)計(jì)之上。也許在你的視覺作品中傳達(dá)出理念是最難的一件事。

④、調(diào)動(dòng)視覺元素

在設(shè)計(jì)中基本元素相當(dāng)于你作品的構(gòu)件，每一個(gè)元素都要有傳遞和加強(qiáng)傳遞信息的目的。真正優(yōu)秀的設(shè)計(jì)師往往很“吝嗇”，每動(dòng)用一種元素，都會(huì)從整體需要出發(fā)去考慮。在一個(gè)版面之中，構(gòu)成元素可以根據(jù)類別來進(jìn)行劃分，如可以分為：

標(biāo)題、內(nèi)文、背景、色調(diào)、主體圖形、留白、視覺中心等等。平面設(shè)計(jì)版面就是把不同元素進(jìn)行有機(jī)結(jié)合的過程。例如在版式當(dāng)中常常借助框架（也叫骨骼），就有很多種形式，規(guī)律框架和非規(guī)律框架，可見框架和隱性框架；還有在字體元素當(dāng)中，對(duì)于字體和字型的選擇和搭配的好壞就是一個(gè)非常有講究的。選擇字體風(fēng)格的過程就是一個(gè)美學(xué)判斷的過程，還有在色彩這一元素的使用上，能體現(xiàn)出一個(gè)設(shè)計(jì)師對(duì)色彩的理解和修養(yǎng)。色彩是一種語言（信息），色彩具有感情，能讓人產(chǎn)生聯(lián)想，能讓人感到冷暖、前后、輕重、大小等等。善于調(diào)動(dòng)視覺元素是設(shè)計(jì)師必備的能力之一。

⑤、選擇表現(xiàn)手法

手法即是技巧，在視覺產(chǎn)品泛濫的今天要想把受眾打動(dòng)以并非易事，更多的視覺作品已被人們的眼睛自動(dòng)的忽略掉了。要把你的信息傳遞出去有幾種方法呢？一種是完整完美的以傳統(tǒng)美學(xué)去表現(xiàn)的設(shè)計(jì)方式，會(huì)被受眾欣賞閱讀并記住。二種是用新奇的或出奇不意的方式可以達(dá)到（包括在材料上）三種是瘋狂的廣告投放量，進(jìn)行地毯式的強(qiáng)行轟炸。而我們更需要那一種呢？雖然三種方法都能達(dá)到目的，但我們清楚他們的回報(bào)是不同的。

我們?cè)谌髽?gòu)成中學(xué)過很多種圖形的處理和表現(xiàn)手法，如對(duì)比、類比、夸張、對(duì)稱、主次、明暗、變異、重復(fù)、矛盾、放射、節(jié)奏、粗細(xì)、冷暖、面積等形式。另外還有從圖形處理的效果上又有手繪類效果，如油畫、鉛筆、水彩、版畫、蠟筆、涂鴉……還有其他的如攝影、老照片、等等。那么你要選擇那一種呢？這取決于你的目的和目標(biāo)群體，以及你的設(shè)計(jì)水平。

⑥、平衡

平衡能帶來視覺及心理的滿足，設(shè)計(jì)師要解決畫面當(dāng)中力場(chǎng)的平衡，前后銜接的平衡，平衡感也是設(shè)計(jì)師構(gòu)圖所需要的能力，平衡與不平衡是相對(duì)的，以是否達(dá)到主題要求為標(biāo)準(zhǔn)。平衡分為對(duì)稱平衡和不對(duì)稱平衡，包括點(diǎn)、線、面、色、空間的平衡。

⑦、出彩

記住，你要?jiǎng)?chuàng)造出視覺興奮點(diǎn)來升華你的作品。

⑧、關(guān)于風(fēng)格

作為設(shè)計(jì)師有時(shí)是反對(duì)風(fēng)格的，固定風(fēng)格的形成意味著自我的僵死，但風(fēng)格同時(shí)有是一個(gè)設(shè)計(jì)師性格、喜好、閱歷、修養(yǎng)的反映，也是設(shè)計(jì)師成熟的標(biāo)志，以為“了解大同，才能獨(dú)走邊緣”。

⑨、制作

檢查項(xiàng)目包括：圖形、字體、內(nèi)文、色彩、編排、比例、出血等。

要求：視覺的想象力和效果要賞心悅目，而更重要的是被受眾理解！

3、網(wǎng)站設(shè)計(jì)的設(shè)計(jì)流程：

①、網(wǎng)站設(shè)計(jì)流程一：確定風(fēng)格

網(wǎng)站的風(fēng)格通過網(wǎng)站的色彩、技術(shù)、文字、布局、交互方式可以概括出一個(gè)站點(diǎn)的個(gè)性:是粗獷豪放的，還是清新秀麗的;是溫文儒雅的，還是執(zhí)著熱情的;是活潑易變的，還是墨守成規(guī)的。在明確自己想給人以怎樣的印象后，要找出網(wǎng)站中最有特色的東西，就是最能體現(xiàn)網(wǎng)站風(fēng)格的東西。并以它作為網(wǎng)站的特色加以重點(diǎn)強(qiáng)化、宣傳。風(fēng)格的形成不是一次定位的，你可以在實(shí)踐中不斷強(qiáng)化、調(diào)整、改進(jìn)。

②、網(wǎng)站設(shè)計(jì)流程二：搜集素材

查找并收集有關(guān)的文字、圖片、聲音、影像等素材，并對(duì)所收集的素材進(jìn)行整理、處理。

③、網(wǎng)站設(shè)計(jì)流程三：網(wǎng)站布局

首頁頁面：首頁主題還體現(xiàn)在logo及網(wǎng)站標(biāo)題上。準(zhǔn)確概括的首頁主題可以很好幫助用戶選擇自己有確切需求的網(wǎng)站。

首頁導(dǎo)航：網(wǎng)站導(dǎo)航可以看做是對(duì)網(wǎng)站內(nèi)容的分類把網(wǎng)站的內(nèi)容進(jìn)行細(xì)分方便用戶跟據(jù)個(gè)人需求選擇瀏覽相應(yīng)欄目頁面。

首頁內(nèi)容：頁面的內(nèi)容布局需先對(duì)網(wǎng)站的用戶群體進(jìn)行需求分析把用戶關(guān)注最多的內(nèi)容放置在首頁的最重要位置。一般按照用戶的瀏覽方式頁面內(nèi)容布局按照內(nèi)容重要程度由左上到右下進(jìn)行布置。

④、網(wǎng)站設(shè)計(jì)流程四：LOGO設(shè)計(jì)

怎樣設(shè)計(jì)logo是許多網(wǎng)站設(shè)計(jì)師比較頭疼的事情，在設(shè)計(jì)之前要進(jìn)行基本的調(diào)研分析，也就是對(duì)該企業(yè)做全面的調(diào)查，然后就是要挖掘所需要的素材，最后就是進(jìn)行設(shè)計(jì)開發(fā)了，這也是最重要的一步，只有經(jīng)過反復(fù)的推敲修改，才能設(shè)計(jì)出令人滿意的標(biāo)志。

⑤、網(wǎng)站設(shè)計(jì)流程五：導(dǎo)航設(shè)計(jì)

在設(shè)計(jì)導(dǎo)航之前，要充分的分析用戶需要什么？從導(dǎo)航的有效性、實(shí)現(xiàn)度和利用率來設(shè)計(jì)導(dǎo)航。

⑥、網(wǎng)站設(shè)計(jì)流程六：banner設(shè)計(jì)

在設(shè)計(jì)banner之前，要和客戶溝通一下他們想在banner上突出什么重點(diǎn)，然后有針對(duì)的展現(xiàn)banner上的內(nèi)容。當(dāng)我們確定重點(diǎn)之后，banner的色彩搭配要明亮干凈要與整個(gè)頁面相協(xié)調(diào)。

⑦、網(wǎng)站設(shè)計(jì)流程七：友情鏈接設(shè)計(jì)

設(shè)計(jì)網(wǎng)站的友情鏈接要考慮一下網(wǎng)站優(yōu)化的問題，鏈接一定不能是滾動(dòng)的，因?yàn)闈L動(dòng)的鏈接沒有人交換，最好是在底部一一列出來。

四、注意事項(xiàng)

視覺會(huì)給人帶來一連串的生理上的、心理上的、情感上的、行動(dòng)上的反應(yīng)，設(shè)計(jì)是視覺經(jīng)驗(yàn)的科學(xué)，他包括兩個(gè)方面，一個(gè)是不以人為而改變的即生理感受的人的基本反應(yīng)，另一個(gè)是隨即的或不確定因素構(gòu)成。如個(gè)人喜好，性格等等、等等。

1、相對(duì)穩(wěn)定的方面：

主要是生理上的視知覺，人們的一些視覺習(xí)慣、視覺流程、視覺邏輯，如從上到下，從左到右，喜歡連貫的、重復(fù)，喜歡有對(duì)比的，還有在顏色方面人們最喜歡的其實(shí)是有對(duì)比的互補(bǔ)色等等。這都是跟人們的生理上的習(xí)慣有關(guān)，都是人生理機(jī)能的本能反應(yīng)。作為設(shè)計(jì)師應(yīng)該對(duì)這些知識(shí)能充分了解、靈活運(yùn)用，設(shè)計(jì)是對(duì)人本的關(guān)注，首先應(yīng)對(duì)文化與人的感知方式這些相對(duì)穩(wěn)定的方面進(jìn)行研究，并且需要我們?cè)趯?shí)踐中去總結(jié)。

2、不穩(wěn)定的方面：

不穩(wěn)定的方面主要是指情感、素質(zhì)、品位、閱歷上的不同，在設(shè)計(jì)過程中你需要具備一定的判斷和把握能力，你需要客觀和克制，才能完成卓越的設(shè)計(jì)。

3、設(shè)計(jì)思維的科學(xué)：

設(shè)計(jì)是必須具有科學(xué)的思維方法，能在相同中找到差別，能在不同當(dāng)中找到共同之處，能掌握運(yùn)用各種思維方法，如縱向關(guān)聯(lián)思維和橫向關(guān)聯(lián)思維以及發(fā)散式的思維，善于運(yùn)用科學(xué)的思維方式找到奇特的新的視覺形象，才能不斷發(fā)現(xiàn)新的可能。

平面視覺的科學(xué)其實(shí)是一個(gè)很大很深的學(xué)問，只有在這門學(xué)問的健全和深入的推廣，才能保證設(shè)計(jì)水平的普遍提高。在這里只是拋磚引玉式的提出這一觀點(diǎn)，還需要日后結(jié)合其他學(xué)科的研究成果進(jìn)行系統(tǒng)的整理和論述。

三、網(wǎng)頁美工與UI設(shè)計(jì)區(qū)別是什么？

非業(yè)內(nèi)人士總習(xí)慣bai用“美工”稱呼UI設(shè)計(jì)師，而設(shè)du計(jì)師通常會(huì)為此感到zhi生氣。畢竟，在國dao內(nèi)大部分人對(duì)UI的理解還停留在美術(shù)設(shè)計(jì)方面，認(rèn)為UI的工作只是描邊畫線，缺乏對(duì)用戶交互重要性的理解。

實(shí)際上，這兩個(gè)職業(yè)有著巨大差異。

今天我們就為各位UI設(shè)計(jì)師正名，來聊聊“美工”與“UI設(shè)計(jì)師”的區(qū)別。

從工作性質(zhì)來看

美工這個(gè)稱呼，本來的職業(yè)是：網(wǎng)站美術(shù)設(shè)計(jì)、平面美術(shù)設(shè)計(jì)，也就是我們稱之為：平面設(shè)計(jì)師或網(wǎng)絡(luò)設(shè)計(jì)師。這里面分的更細(xì)的是，平面設(shè)計(jì)師一般做logo設(shè)計(jì)、VI手冊(cè)、印刷品等，網(wǎng)絡(luò)設(shè)計(jì)師一般是指自己能獨(dú)立完成網(wǎng)站，包括代碼的設(shè)計(jì)師。

UI即User Interface（用戶界面）的簡(jiǎn)稱。泛指用戶的操作界面，包含移動(dòng)APP，網(wǎng)頁，智能穿戴設(shè)備等?；ヂ?lián)網(wǎng)新科技興起，從國外引進(jìn)了UX設(shè)計(jì)師的感念，但是公司內(nèi)部協(xié)作分的更細(xì)，分為了：UI設(shè)計(jì)師（視覺）和UE設(shè)計(jì)師(交互），設(shè)計(jì)師徹底告別了代碼，更專注于我們所說的：用戶體驗(yàn)。

從服務(wù)群體來看

美工

美工服務(wù)的是甲方客戶，作品是否可以通過，全靠甲方一句話。偏偏每個(gè)人的審美都不同，你辛辛苦苦做出來的未必就能讓甲方喜歡。漸漸地，美工的主動(dòng)權(quán)開始被剝奪，離自主創(chuàng)作越來越遠(yuǎn)，只是用軟件做出好看的東西，這更像是一名素材的搬運(yùn)工。

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

UI設(shè)計(jì)師面向的是產(chǎn)品使用者（用戶），由于用戶的留存會(huì)決定產(chǎn)品的生死，所以他們要聽的是用戶的話。即使上層領(lǐng)導(dǎo)與你的審美有很大差別，但也決不敢拿產(chǎn)品的命運(yùn)打賭。用戶留存數(shù)據(jù)、內(nèi)測(cè)用戶的反饋等是你做產(chǎn)品迭代的原因所在。甚至有時(shí)候，漂亮、充滿創(chuàng)意的界面產(chǎn)生的效果反而比較差。

從工作流程來看

美工

接到老板需求，開始做設(shè)計(jì)，初稿過后根據(jù)老板的意見修改設(shè)計(jì)，改完后接著根據(jù)老板的意見修改……大家還記得曾經(jīng)的網(wǎng)絡(luò)熱詞——五彩斑斕的黑嗎？

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

在開展設(shè)計(jì)產(chǎn)品UI之前，我們應(yīng)當(dāng)根據(jù)功能的優(yōu)先級(jí)或者相關(guān)調(diào)研數(shù)據(jù)，結(jié)合常規(guī)設(shè)計(jì)原則來建立應(yīng)用的界面交互框架，即交互線框圖。交互線框圖須對(duì)零碎且尚未流程化的功能信息進(jìn)行歸納和整理，首先要交代應(yīng)用中都有什么東西，并設(shè)計(jì)合理的信息結(jié)構(gòu)，明確這些元素的具體位置，最后再詳細(xì)描述用戶與界面元素之間的交互行為，包括如何操作以及相應(yīng)的操作反饋、跳轉(zhuǎn)路徑等。

從掌握技能來看

美工

平面美工：用Photoshop或者Illustrator對(duì)平面外觀進(jìn)行設(shè)計(jì)。

三維美工：用3DMAX等軟件的三維角色模型、道具模型、環(huán)境場(chǎng)景模型、包裝等進(jìn)行設(shè)計(jì)。

網(wǎng)頁美工：使用Fireworks或Photoshop等設(shè)計(jì)軟件，把網(wǎng)頁的視覺效果、排版等一一呈現(xiàn)出來。

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

軟件基礎(chǔ)與矢量插畫繪制：Photoshop、illustrator、矢量插畫繪制、CINEMA 4D 三維立體軟件等

網(wǎng)站設(shè)計(jì)與制作：網(wǎng)站概述、專題設(shè)計(jì)、營銷類頁面設(shè)計(jì)、web前端與整站制作、移動(dòng)端布局、門戶網(wǎng)站設(shè)計(jì)、H5營銷設(shè)計(jì)與交互動(dòng)效

智能設(shè)備交互界面設(shè)計(jì)：APP介紹與產(chǎn)品分析、APP需求分析與手繪原型圖、多系統(tǒng)圖標(biāo)設(shè)計(jì)、三大平臺(tái)設(shè)計(jì)規(guī)范、產(chǎn)品交互設(shè)計(jì)、AE動(dòng)效設(shè)計(jì)、標(biāo)注、切圖、原創(chuàng)APP產(chǎn)品項(xiàng)目實(shí)戰(zhàn)等。

從資薪待遇來看

在上海等一些城市一個(gè)初級(jí)的美工月薪在3000左右，經(jīng)驗(yàn)豐富的高薪在9k-1w之間

而一個(gè)初級(jí)的UI設(shè)計(jì)師薪資在4.5k左右，按照能力不同，薪資不同，一般上不封頂。以北京為例子，UI設(shè)計(jì)師的招聘薪酬，基本上都是10K起步，高級(jí)UI設(shè)計(jì)師高達(dá)35K。

從以上的對(duì)比之中，我們可以得出結(jié)論：UI設(shè)計(jì)比美工更加符合互聯(lián)網(wǎng)環(huán)境下的設(shè)計(jì)需求，既能夠勝任最基礎(chǔ)的平面設(shè)計(jì)，也可以勝任交互設(shè)計(jì)，而且還可以做用戶測(cè)試/研究，更加符合現(xiàn)代化公司的用人需求。并且涉足范圍廣闊、企業(yè)需求量多，這也是UI設(shè)計(jì)相比較美工的一大優(yōu)勢(shì)。

四、平面設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、UI設(shè)計(jì)、視覺設(shè)計(jì)、電商美工設(shè)計(jì)的區(qū)別

平面設(shè)計(jì)的范疇還有很多，例如電梯廣告、展板、VI識(shí)別等。

主要技能：PS、CDR、AI、ID等設(shè)計(jì)軟件是最常用的軟件，掌握其中一種或幾種基本能勝任。當(dāng)然除了軟件技能之外，更需要注意的是配色、排版、工藝等知識(shí)的學(xué)習(xí)。

網(wǎng)頁設(shè)計(jì)

凡是用瀏覽器打開的都可以稱之為網(wǎng)頁（此處不包含電商）。網(wǎng)頁設(shè)計(jì)可分為展示型網(wǎng)頁，功能型網(wǎng)頁。展示型網(wǎng)頁主要設(shè)計(jì)一些官網(wǎng)，活動(dòng)頁面等，功能型網(wǎng)頁，例如淘寶、攜程之類的。網(wǎng)頁設(shè)計(jì)除了設(shè)計(jì)視覺效果之外，更重要的是考慮用戶的操作問題。好的網(wǎng)頁設(shè)計(jì)師可以進(jìn)行切圖、靜態(tài)網(wǎng)頁的編寫。網(wǎng)頁設(shè)計(jì)更重要的是能夠與前端工程師合作，那么我們應(yīng)該懂一些網(wǎng)頁設(shè)計(jì)的基本規(guī)范。

網(wǎng)頁設(shè)計(jì)的單位：像素；顏色模式：RGB；分辨率：72

主要技能：PS是網(wǎng)頁設(shè)計(jì)最常用的工具，如果能掌握AI或者一款3D（3DMAX、C4D）軟件，那么視覺效果會(huì)有更多的選擇。HTML的編碼能力最好也能夠具備，實(shí)現(xiàn)靜態(tài)網(wǎng)站，那就更具有競(jìng)爭(zhēng)力了。

電商設(shè)計(jì)

這幾年電商設(shè)計(jì)師的薪資水漲船高，電商設(shè)計(jì)主要分為：店鋪電商設(shè)計(jì)和平臺(tái)電商設(shè)計(jì)。店鋪電商主要負(fù)責(zé)店鋪產(chǎn)品的拍攝、店鋪設(shè)計(jì)、店鋪裝修、站內(nèi)外廣告設(shè)計(jì)等。平臺(tái)電商是針對(duì)電商平臺(tái)進(jìn)行的設(shè)計(jì)，所謂的電商平臺(tái)例如：淘寶、京東、天貓就是電商平臺(tái)，當(dāng)然很有很多很多小眾的、行業(yè)細(xì)分的電商平臺(tái)，電商平臺(tái)設(shè)計(jì)與網(wǎng)頁設(shè)計(jì)師更像。

電商設(shè)計(jì)的單位：像素；顏色模式：RGB；分辨率：72

主要技能：主要技能：PS是網(wǎng)頁設(shè)計(jì)最常用的工具，如果能掌握AI或者一款3D（3DMAX、C4D）軟件，那么視覺效果會(huì)有更多的選擇。HTML的編碼能力最好也能夠具備，實(shí)現(xiàn)對(duì)店鋪裝修有很大的作用。

UI設(shè)計(jì)

提到UI設(shè)計(jì)的載體首先想到的是手機(jī)，沒錯(cuò)，手機(jī)確實(shí)是目前社會(huì)中最常用到UI設(shè)計(jì)的載體，手機(jī)以外還有電腦／平板／電視／取款機(jī)／購票機(jī)／游戲機(jī)等。比如容易忽略的ATM提款機(jī)上的界面，地鐵站的自助購票機(jī)界面等都是UI設(shè)計(jì)范疇。UI的英文全稱是user interface 翻譯成中文是用戶界面，也就是說我們平時(shí)用的任何有交互界面的設(shè)計(jì)都能稱之為UI設(shè)計(jì)。

UI設(shè)計(jì)師是制作視覺設(shè)計(jì)的，在尺寸，按鈕，間距等方面需要做到像素級(jí)別的準(zhǔn)確度，而在做一些banner宣傳圖時(shí)又需要有天馬行空的表達(dá)。有點(diǎn)像平面設(shè)計(jì)與網(wǎng)頁設(shè)計(jì)的結(jié)合。

如果UI設(shè)計(jì)師在規(guī)范、切圖、交互上面下功夫，會(huì)使你如虎添翼。做設(shè)計(jì)的思維一定不能停留在視覺層面。

以上就是關(guān)于ui設(shè)計(jì)和網(wǎng)頁設(shè)計(jì)區(qū)別相關(guān)問題的回答。希望能幫到你，如有更多相關(guān)問題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。