網(wǎng)站制作離不開(kāi)前端設(shè)計(jì)，由于各種效果的實(shí)現(xiàn)需要專業(yè)的人員進(jìn)行，那么我們專業(yè)的網(wǎng)站以及APP前端開(kāi)發(fā)設(shè)計(jì)師都會(huì)使用有哪些專業(yè)術(shù)語(yǔ)呢？深圳網(wǎng)站制作公司嘗試用此文總結(jié)一些網(wǎng)站設(shè)計(jì)師常用的專業(yè)名詞，以期對(duì)您即將開(kāi)始的平臺(tái)制作前期規(guī)劃工作有所幫助。
一、互聯(lián)網(wǎng)信息平臺(tái)開(kāi)發(fā)產(chǎn)品設(shè)計(jì)思維 UED
1. UED
我們老聽(tīng) UED。UED 就是：User Experience Design（用戶體驗(yàn)設(shè)計(jì)）的簡(jiǎn)稱。UED 是進(jìn)行產(chǎn)品策劃的主力之一，他們用自己的知識(shí)、經(jīng)驗(yàn)、設(shè)計(jì)能力拿出設(shè)計(jì)方案。能夠用自己的互聯(lián)網(wǎng)知識(shí)來(lái)設(shè)計(jì)出行業(yè)專家想實(shí)現(xiàn)的操作，而付諸以商業(yè)營(yíng)銷。UED 團(tuán)隊(duì)包括：交互設(shè)計(jì)師（Interaction Designer）、視覺(jué)設(shè)計(jì)師（Vision Designer）、用戶體驗(yàn)設(shè)計(jì)師（User Experience Designer）、用戶界面設(shè)計(jì)師（User Interface Designer）和前端開(kāi)發(fā)工程師（Web Developer）等等。UED 是以用戶為中心的一種設(shè)計(jì)手段，以用戶需求為目標(biāo)而進(jìn)行的設(shè)計(jì)。設(shè)計(jì)過(guò)程注重以用戶為中心，用戶體驗(yàn)的概念從開(kāi)發(fā)的最早期就開(kāi)始進(jìn)入整個(gè)流程，并貫穿始終?？梢?jiàn)，UED 并不是一個(gè)特指，而是指的是全體互聯(lián)網(wǎng)產(chǎn)品團(tuán)隊(duì)的一種思維，就是以用戶為中心來(lái)做設(shè)計(jì)。這種理念貫穿到設(shè)計(jì)、代碼、運(yùn)營(yíng)等方方面面。UED 是一個(gè)以用戶體驗(yàn)為原則的團(tuán)隊(duì)。
2. UCD
UCD 是什么？UCD（User Centered Design）是指以用戶為中心的設(shè)計(jì)。是在設(shè)計(jì)過(guò)程中以用戶體驗(yàn)為設(shè)計(jì)決策的中心，強(qiáng)調(diào)用戶優(yōu)先的設(shè)計(jì)模式。在進(jìn)行產(chǎn)品設(shè)計(jì)、開(kāi)發(fā)、維護(hù)時(shí)從用戶的需求和用戶的感受出發(fā)，圍繞用戶為中心進(jìn)行產(chǎn)品設(shè)計(jì)、開(kāi)發(fā)及維護(hù)，而不是讓用戶去適應(yīng)產(chǎn)品。無(wú)論產(chǎn)品的使用流程、產(chǎn)品的信息架構(gòu)、人機(jī)交互方式等，以 UCD 為核心的設(shè)計(jì)都時(shí)刻高度關(guān)注并考慮用戶的使用習(xí)慣、預(yù)期的交互方式、視覺(jué)感受等方面。衡量一個(gè)好的以用戶為中心的產(chǎn)品設(shè)計(jì)，有三個(gè)維度：產(chǎn)品的有效性（effectiveness），產(chǎn)品的效率（efficiency），用戶主觀滿意度（satisfaction），特別說(shuō)明：大家可能老誤會(huì) UED 和 UCD 是某個(gè)部門(mén)的原因是因?yàn)楹芏啻蠊径荚O(shè)置了用戶體驗(yàn)部門(mén)，如騰訊網(wǎng)UED、阿里巴巴國(guó)際UED等團(tuán)隊(duì)。所以 UED 和 UCD 不光特指某一個(gè)部門(mén)，更是一種團(tuán)隊(duì)的模式。
二、設(shè)計(jì)師必備能力
經(jīng)過(guò)我們對(duì)上文的閱讀，我們知道了互聯(lián)網(wǎng)視覺(jué)設(shè)計(jì)師在團(tuán)隊(duì)中的主要職責(zé)。歸納一下，我們的工作主要是：第一，根據(jù)原型圖和 PRD 文檔優(yōu)化原型圖和交互圖的交互設(shè)計(jì)；第二，根據(jù)需求完成視覺(jué)設(shè)計(jì)并完成設(shè)計(jì)規(guī)范；第三，根據(jù)技術(shù)的需求完成切圖、標(biāo)注、命名PSD、設(shè)計(jì)動(dòng)效等工作；第四，有時(shí)還會(huì)擔(dān)負(fù)起公司的運(yùn)營(yíng)設(shè)計(jì)和企業(yè)形象設(shè)計(jì)或者公司內(nèi)部的平面設(shè)計(jì)等。我們的工作越來(lái)越復(fù)雜，這就要求我們掌握的知識(shí)也要越來(lái)越多。
△ 目前互聯(lián)網(wǎng)設(shè)計(jì)師需要具備的三種能力
互聯(lián)網(wǎng)設(shè)計(jì)師主要需要掌握的能力主要是以下幾種：排版能力，交互知識(shí)，圖標(biāo)繪制，插畫(huà)繪制，手繪，運(yùn)營(yíng)圖設(shè)計(jì)能力，專題設(shè)計(jì)能力，網(wǎng)站設(shè)計(jì)能力，移動(dòng)端規(guī)范，基本代碼原理，展示作品的能力， PPT設(shè)計(jì)能力，表達(dá)能力，H5設(shè)計(jì)能力，LOGO設(shè)計(jì)等。
三、UI設(shè)計(jì)師所使用的軟件
1. 界面設(shè)計(jì)軟件
Adobe Photoshop 簡(jiǎn)稱 PS。三十年老店不會(huì)讓你失望。來(lái)自一個(gè)行業(yè)具有壟斷地位的公司的好處是你不用擔(dān)心研發(fā)公司倒閉而軟件停止更新，同樣由于開(kāi)發(fā)公司的實(shí)力所以 PS 支持 Windows 平臺(tái)和 Mac 平臺(tái)。這個(gè)好處是毋庸置疑的了。PS 的版本三十年中數(shù)不勝數(shù)，而我們應(yīng)該永遠(yuǎn)學(xué)習(xí)最新的版本。而且 PS 是 Sketch 和 AI 無(wú)法代替的，它的像素圖形處理，它設(shè)計(jì)運(yùn)營(yíng)圖與其他圖像的能力無(wú)所匹敵。Adobe Iullstrator 簡(jiǎn)稱 AI。同樣來(lái)自母公司 Adobe，擁有比 PS 稍微年輕一點(diǎn)的歷史。由于他們都是 Adobe 旗下的軟件，所以兩個(gè)軟件可以互通甚至直接拷貝，那么配合度要比不同廠家的軟件高得多了。PS 在 UI設(shè)計(jì)中主要負(fù)責(zé)界面設(shè)計(jì)和圖形處理，AI可以負(fù)責(zé)線性圖標(biāo)的設(shè)計(jì)，設(shè)計(jì)后直接拷貝進(jìn) PS 里即可。不能直接用 AI 作圖的原因是 AI 不具備切圖和標(biāo)注與團(tuán)隊(duì)合作等多種 PS 可以輕松辦到的事情。看完了上兩種軟件你一定還是心有不甘希望用 AI 的矢量作圖功能，配合 PS 可以切圖標(biāo)注的擴(kuò)展性對(duì)吧，那么就誕生出了 Sketch 這款軟件。在作圖的功能上更加接近 AI，擁有矢量圖形功能，而切圖標(biāo)注甚至比 PS 更加方便快捷。遺憾的是它并非 Adobe 出品，所以和 PS 與 AI 的協(xié)作上差了一些。并且由于不是大公司出品總有一些不放心：比如與蘋(píng)果決裂后，Sketch 需要在官方購(gòu)買(mǎi)并安裝軟件包而并非直接從蘋(píng)果下載；比如由于 PC 盜版嚴(yán)重暫時(shí)在 Windows 系統(tǒng)下是不可用的等等。但是總之這款軟件現(xiàn)在很受 UI設(shè)計(jì)師喜愛(ài)。Adobe XD 全稱 Adobe Experience Design。集原型、設(shè)計(jì)和交互于一體的設(shè)計(jì)軟件。 傳言將會(huì)是 skech 的勁敵。廠商背景決定了它支持 Windows 操作系統(tǒng)，而且 XD 的優(yōu)勢(shì)是原型圖和設(shè)計(jì)都可以搞定。所以在國(guó)外比較流行，國(guó)內(nèi)設(shè)計(jì)業(yè)界鮮有同行使用，所以不是必學(xué)。Adobe Fireworks 列出來(lái)這款軟件并不代表大家要學(xué)習(xí)，因?yàn)檫@款初心是為網(wǎng)頁(yè)設(shè)計(jì)師所設(shè)計(jì)的軟件已經(jīng)退役了。
2. 動(dòng)效軟件
Adobe After Effects 由于同樣來(lái)自 Adobe，所以該軟件和 PS 與 AI 都可以直接導(dǎo)入，互通有無(wú)。這一點(diǎn)非常的爽。但是本軟件的初心并不是做 UI 的動(dòng)效設(shè)計(jì)，而是影視后期。所以首先我們的限制是使用這款軟件完成的動(dòng)效只可以沿著時(shí)間線播放，而不可以交互。其次這款軟件復(fù)雜的插件也都是為了影視后期而設(shè)計(jì)的，對(duì)于新手學(xué)習(xí)比較難。但是總體來(lái)說(shuō)還是一款大家必學(xué)的軟件。Sketch 沒(méi)有動(dòng)效，小伙伴怎么辦？別著急，Princple 出現(xiàn)了。這款軟件可以直接點(diǎn)擊大鉆石導(dǎo)入 Sketch 文件并設(shè)計(jì)出在手機(jī)可交互的動(dòng)效，堪稱 UI設(shè)計(jì)師的福音。但是不足之處和 Sketch 一樣，就是不支持 Windows 系統(tǒng)。Flinto 交互原型利器，只可以 Mac 平臺(tái)使用。Origami 交互原型和動(dòng)效的一個(gè)輕巧的工具，同樣只可以 Mac 平臺(tái)使用。Framer 交互設(shè)計(jì)和原型圖設(shè)計(jì)工具，偏代碼方向。只可以 Mac 平臺(tái)使用。
3. 原型圖工具
墨刀，國(guó)產(chǎn)原型圖工具，語(yǔ)言優(yōu)勢(shì)加上服務(wù)器速度響應(yīng)快，而且是一款 Web 應(yīng)用，也就是說(shuō)通過(guò)瀏覽器訪問(wèn)網(wǎng)站即可設(shè)計(jì)出原型圖來(lái)。Axure RP 老牌產(chǎn)品經(jīng)理原型圖工具，有多式多樣的插件可以實(shí)現(xiàn)多種效果的原型圖。
4. 前端工具
Adobe Dreamweaver 前段編譯工具，Adobe 生產(chǎn)，有設(shè)計(jì)和代碼模式。Adobe Muse Adobe 公司生產(chǎn)的網(wǎng)站開(kāi)發(fā)工具，支持可視化設(shè)計(jì)，并且生產(chǎn)出網(wǎng)頁(yè)前端代碼。
四、好UI的標(biāo)準(zhǔn)是什么？
1. 好用
以用戶為中心
2. 功能清晰
Don’t make me think
3. 好看
滿足用戶畫(huà)像群的審美，達(dá)到需求方的目的比要求完成的更美；審美教育義務(wù)
4. 好實(shí)現(xiàn)
可以實(shí)現(xiàn)：設(shè)計(jì)須可以實(shí)現(xiàn)效率：須考慮對(duì)載體效率和性能的影響為實(shí)現(xiàn)設(shè)計(jì)：回頭根據(jù)實(shí)現(xiàn)角度調(diào)整無(wú)論做什么，只要你擁有一套好的方法論加上刻意練習(xí)都會(huì)獲得很好的結(jié)果?；ヂ?lián)網(wǎng)設(shè)計(jì)是崇尚經(jīng)驗(yàn)的工作，隨著經(jīng)驗(yàn)的積累和方法論的沉淀，我們一定能夠取得不錯(cuò)的進(jìn)步。希望真正喜歡互聯(lián)網(wǎng)設(shè)計(jì)的人都能夠?qū)崿F(xiàn)自己的職業(yè)目標(biāo)。深圳網(wǎng)站制作公司博納網(wǎng)絡(luò)編輯整理。
