頁(yè)面設(shè)計(jì)師要懂網(wǎng)頁(yè)設(shè)計(jì)技術(shù)

創(chuàng)新互聯(lián)為大家展現(xiàn)，這篇文章只講技術(shù)這一塊。接下來(lái)就盡量具體地講講要想做到傳說(shuō)中的懂技術(shù)，我們要關(guān)注哪些，不用關(guān)注哪些。在此之前要送大家一碗由國(guó)內(nèi)某開(kāi)發(fā)大神熬制的毒雞湯，“學(xué)習(xí)總是痛苦的，若你無(wú)痛苦感，有可能你沒(méi)有學(xué)到?！睖?zhǔn)備好了，開(kāi)始上車、出發(fā)。

你也許早早就看過(guò)這張高度歸納，但又似乎有一點(diǎn)語(yǔ)焉不詳?shù)膱D。它大概描述了一名產(chǎn)品設(shè)計(jì)需要點(diǎn)的技能，里面包含用戶體驗(yàn)(UX)、技術(shù)(Tech)和商業(yè)/業(yè)務(wù)(Business)。

設(shè)計(jì)師給我講過(guò)，他曾經(jīng)看過(guò)這張圖片，他說(shuō)，“當(dāng)時(shí)的我感覺(jué)自己一不小心探尋到了世界的真理，宇宙的真諦，只要我到達(dá)了圖中的那塊綠色區(qū)域，成為一名優(yōu)秀的設(shè)計(jì)師指日可待。于是乎我開(kāi)始各種學(xué)習(xí)，起早貪黑披星戴月日夜兼程嘔心瀝血，對(duì)于各種知識(shí)無(wú)比渴求，可是后來(lái)我慢慢發(fā)現(xiàn)，這樣漫無(wú)目的“學(xué)習(xí)”并不能讓我抵達(dá)綠色區(qū)域，它分散了我太多的精力?！比说臅r(shí)間和精力都是有限的，學(xué)習(xí)一切并不現(xiàn)實(shí)，這張圖片最終沒(méi)能讓他一下子就變成一個(gè)超級(jí)厲害的設(shè)計(jì)師。

“設(shè)計(jì)師要懂一些技術(shù)?！?/p>

對(duì)呀，要懂一些技術(shù)，可是，一些，是多少?懂多少，才算懂?

這個(gè)問(wèn)題其實(shí)誰(shuí)也沒(méi)有一個(gè)非常準(zhǔn)確的答案，如果非要說(shuō)有的話，那么肯定是越多越好，可首先你要明確自己是一名設(shè)計(jì)師，既然你是做設(shè)計(jì)的，你就不能真的像程序員一樣去學(xué)習(xí)代碼。對(duì)于設(shè)計(jì)師來(lái)說(shuō)，懂技術(shù)，似乎也并不需要你真的做到能夠親手打代碼才叫懂。將骨架脈絡(luò)摸清，以及之間的交互和聯(lián)系弄懂(注意這并不是淺表皮毛的意思，這里已經(jīng)足夠大部分沒(méi)有計(jì)算機(jī)背景的設(shè)計(jì)師童鞋們學(xué)習(xí)好久了，不過(guò)也總比你幻想著去學(xué)碼代碼輕松太多)，才是設(shè)計(jì)師能夠比較“舒適地”切入的一個(gè)點(diǎn)。

1. 懂“棧”

我們常見(jiàn)的功能，其實(shí)大部分可能需要幾種技術(shù)同時(shí)協(xié)作才能夠達(dá)成，這些個(gè)技術(shù)就是棧。就好像我們?cè)诋?huà)圖的時(shí)候，有可能需要數(shù)個(gè)圖層的合并才能做出這種效果來(lái)。譬如說(shuō)，當(dāng)用戶在使用我們?cè)O(shè)計(jì)的美美的登錄頁(yè)面進(jìn)行登錄操作時(shí)，后面的程序已經(jīng)風(fēng)起云涌。

判斷用戶是否已經(jīng)在文本框里面輸入了東西，如果沒(méi)有，彈出toast提示用戶先進(jìn)行輸入，如果有，那么進(jìn)行第二步。嘗試發(fā)送用戶輸入的賬號(hào)密碼，如果斷網(wǎng)了的話提示用戶網(wǎng)絡(luò)有問(wèn)題，如果沒(méi)有，進(jìn)行第三步。將用戶輸入的賬號(hào)密碼傳輸?shù)轿覀兊姆?wù)器(服務(wù)器其實(shí)就是一臺(tái)電腦)，讓服務(wù)器來(lái)判斷賬號(hào)密碼是否正確。服務(wù)器判斷完畢，通過(guò)網(wǎng)絡(luò)告訴用戶這邊的app賬號(hào)密碼是否正確。用戶這邊的app接受到了服務(wù)器判斷的結(jié)果，如果正確，給登上，如果不正確，則提示用戶賬號(hào)或密碼錯(cuò)誤。登上之后給服務(wù)器通知一下，這名用戶已經(jīng)登上了。這時(shí)候服務(wù)器知道用戶已經(jīng)登上了，它可能會(huì)通知?jiǎng)e的服務(wù)器來(lái)辦他繼續(xù)接客，當(dāng)時(shí)也有可能自己接著接客，接客就是為用戶繼續(xù)服務(wù)。

看看，總共七步(注：在現(xiàn)實(shí)情況下遠(yuǎn)遠(yuǎn)不止這幾步，這個(gè)例子只是為了更加簡(jiǎn)單的介紹棧是什么)，這個(gè)過(guò)程中有許多的棧參與了進(jìn)來(lái)，有幫忙做記錄的，有幫忙把信息發(fā)出去的，有幫忙接受信息的，也有幫忙通知其他棧的，總之每個(gè)棧都很勤奮，但是整個(gè)過(guò)程速度非常之快，不信你登QQ試試。

怎么切入?——先找你的程序員問(wèn)問(wèn)，讓他細(xì)致告訴你程序背后運(yùn)作的過(guò)程和使用到的技術(shù)，然后拿筆記下來(lái)。英語(yǔ)還湊合的自己去Google一下，不湊合百度也可以，先大致了解下這種技術(shù)到底是什么、用來(lái)干嘛的、為什么現(xiàn)在程序員會(huì)用這個(gè)、各種技術(shù)之間是怎么協(xié)作的之類。剛開(kāi)始的時(shí)候不用太刻意地去深入了解各個(gè)細(xì)節(jié)，自己總結(jié)個(gè)大概就行。(譬如上面這個(gè)登錄的例子，你可能會(huì)問(wèn)出一個(gè)叫做Retrofit的玩意來(lái)，那么你就去查查Retrofit是干嘛的。)

為啥要懂這個(gè)?——在設(shè)計(jì)工作開(kāi)始前期，你就能夠大致知道某些功能可能需要哪些技術(shù)來(lái)實(shí)現(xiàn)比較好，是用H5好?還是直接native寫(xiě)好?因?yàn)槟阒繦5的優(yōu)劣勢(shì)，也知道native的優(yōu)劣勢(shì)，結(jié)合業(yè)務(wù)的需求你能很好的去權(quán)衡、去判斷，構(gòu)建出來(lái)東西才能大程度上如你所愿。

而當(dāng)程序員在討論如何構(gòu)建這個(gè)功能的時(shí)候，你至少能夠大致跟得上別人的腳步，當(dāng)你學(xué)得足夠多的時(shí)候，你應(yīng)該可以做到能夠聽(tīng)得懂他們?cè)谥v什么，問(wèn)題出在哪里。但是要注意，聽(tīng)就好，千萬(wàn)別亂給意見(jiàn)，越是細(xì)節(jié)方面的意見(jiàn)越要謹(jǐn)慎，因?yàn)榧偃缢麄兪怯兴降某绦騿T的話，大部分情況下不會(huì)需要一個(gè)設(shè)計(jì)師來(lái)提程序方面的意見(jiàn)。

2. 懂系統(tǒng)架構(gòu)

如果說(shuō)棧代表的是各個(gè)技術(shù)的話，那么這個(gè)其實(shí)我們可能都聽(tīng)過(guò)的系統(tǒng)架構(gòu)，就是決定這些技術(shù)之間的合作的方式的東西。上面舉出的那個(gè)例子涉及了非常多的棧，也談到了它們可能每個(gè)負(fù)責(zé)的任務(wù)，可單個(gè)單個(gè)的棧無(wú)法辦成任何事情，它們之間是需要相互溝通交流的，好的架構(gòu)能夠讓它們更加有效地溝通交流，就好像一家公司，光有技術(shù)上乘的員工沒(méi)用，做出一個(gè)好的產(chǎn)品還需要公司有良好的管理。

怎么切入?——同樣地你又要來(lái)勞煩你的程序員寶寶了，讓他給你畫(huà)一張關(guān)于你們產(chǎn)品架構(gòu)的架構(gòu)圖。畫(huà)出來(lái)的東西可能看起來(lái)又復(fù)雜了一點(diǎn)，但是別慌，讓他大致給你講講這些都是些什么東西。一些可能是用來(lái)處理網(wǎng)絡(luò)請(qǐng)求的，一些可能是用來(lái)收集數(shù)據(jù)的，一些是用來(lái)處理數(shù)據(jù)的。不管你信不信，了解你們公司產(chǎn)品背后大致的技術(shù)架構(gòu)對(duì)你來(lái)說(shuō)非常有用。(你就再也不會(huì)做出**讓程序要給你做一個(gè)商城，跟淘寶差不多就行**這些事情來(lái)了。)

為啥要懂這個(gè)?——當(dāng)你開(kāi)始對(duì)架構(gòu)有了一定的了解，你的思路也會(huì)變得清晰起來(lái)，同你一樣，程序員處理事情的方式各有不同，但是整體的架構(gòu)指導(dǎo)著他們的大方向，讓幾個(gè)程序員做出來(lái)的東西跟一個(gè)程序員做出來(lái)的東西一樣。懂的系統(tǒng)架構(gòu)的設(shè)計(jì)師不會(huì)貿(mào)然就來(lái)個(gè)大改，因?yàn)樵谝婚_(kāi)始之前他們就會(huì)更加謹(jǐn)慎行事，為界面層面的架構(gòu)著想，如果有能力，也為后端層面的架構(gòu)著想。

總的來(lái)說(shuō)，架構(gòu)非常重要，一旦定下將決定產(chǎn)品大致的走勢(shì)。所以設(shè)計(jì)師要帶著發(fā)展的眼光和堅(jiān)定的信念來(lái)進(jìn)行設(shè)計(jì)，因?yàn)榧夹g(shù)人員們會(huì)根據(jù)你的設(shè)計(jì)來(lái)設(shè)計(jì)架構(gòu)，根據(jù)你想要的效果來(lái)設(shè)計(jì)架構(gòu)，假如一個(gè)產(chǎn)品從設(shè)計(jì)開(kāi)始就非常復(fù)雜而且冗余，那么一個(gè)產(chǎn)品的架構(gòu)也會(huì)非常復(fù)雜而且冗余(這就是為什么我一直認(rèn)為交互設(shè)計(jì)師其實(shí)應(yīng)該深入地了解一點(diǎn)技術(shù)知識(shí)，因?yàn)榻换ピO(shè)計(jì)師不僅能夠決定界面布局，他們還能夠很大程度上左右系統(tǒng)的架構(gòu)，盡管有時(shí)候你自己都沒(méi)察覺(jué)到)，當(dāng)你意識(shí)到自己的設(shè)計(jì)有這么多缺點(diǎn)，想要進(jìn)行一輪大改，撥亂反正的時(shí)候，通常程序已經(jīng)積重難返，深陷泥潭了。

補(bǔ)充一點(diǎn)，在大一點(diǎn)的公司里面，系統(tǒng)架構(gòu)可能需要數(shù)個(gè)部門協(xié)作完成，要學(xué)習(xí)的東西還是比較多的，要跑的地方還是比較多的，加油吧各位。

3. 懂?dāng)?shù)據(jù)模型和API

你的產(chǎn)品通過(guò)一套特定數(shù)據(jù)模型來(lái)組織自己的數(shù)據(jù)，在你的產(chǎn)品里面，數(shù)據(jù)以某種特定的格式進(jìn)行流通。在技術(shù)的范疇里面，數(shù)據(jù)這兩個(gè)字幾乎代表一切東西，比如說(shuō)用戶的id，是一條數(shù)據(jù)，用戶點(diǎn)過(guò)贊的數(shù)百首歌曲，是一組數(shù)據(jù)，連用戶今天有沒(méi)有點(diǎn)這個(gè)按鈕，也是數(shù)據(jù)。對(duì)于我們來(lái)說(shuō)，一個(gè)使用我們產(chǎn)品的真真實(shí)實(shí)的人代表用戶，而對(duì)于我們的程序來(lái)說(shuō)，一個(gè)由：用戶名、用戶id、用戶賬號(hào)、用戶密碼、用戶手機(jī)號(hào)、用戶身份證號(hào)組成的一組數(shù)據(jù)代表一位用戶，而這寫(xiě)數(shù)據(jù)通過(guò)某個(gè)數(shù)據(jù)模型組成在了一起。

上文說(shuō)到棧和棧之間會(huì)相互溝通傳遞，它們溝通傳遞的就是數(shù)據(jù)。數(shù)據(jù)模型的概念至關(guān)重要，譬如說(shuō)你使用你的賬號(hào)密碼來(lái)登上淘寶，然后再點(diǎn)擊購(gòu)物車，這時(shí)候你能夠看到自己要買的商品，因?yàn)槟愕馁~號(hào)跟你要買的東西早已被通過(guò)某種格式記錄了下來(lái)，淘寶通過(guò)賬號(hào)密碼知道了你是誰(shuí)，而又通過(guò)你是誰(shuí)來(lái)查詢你在購(gòu)物車?yán)锩娣帕诵┦裁?，這里就有兩個(gè)數(shù)據(jù)模型，一個(gè)是用戶數(shù)據(jù)模型，一個(gè)我們暫且叫它購(gòu)物車數(shù)據(jù)模型。你可以理解成兩張excel表格，一個(gè)表格記錄你的賬號(hào)密碼，一個(gè)表格記錄你想買的東西，這個(gè)時(shí)候我先要知道你是誰(shuí)才能知道你想買的東西是什么。數(shù)據(jù)跟數(shù)據(jù)之間的共享需要一個(gè)叫API的東西，中文名通常叫接口。

接口負(fù)責(zé)將它底下的數(shù)據(jù)傳遞給有權(quán)調(diào)起它自己的人(很高冷)。你要聽(tīng)歌的時(shí)候，你會(huì)點(diǎn)擊qq音樂(lè)里面的某首歌曲，這時(shí)候app向服務(wù)器發(fā)起請(qǐng)求“用戶要聽(tīng)這首歌辣!”，qq音樂(lè)服務(wù)器找到對(duì)應(yīng)的接口返回?cái)?shù)據(jù)，數(shù)據(jù)包括：這首歌、這首歌的專輯圖片、這首歌的歌手名、這首歌的歌詞等等。但qq音樂(lè)就不能調(diào)起網(wǎng)易云音樂(lè)的接口，因?yàn)閝q音樂(lè)沒(méi)有這個(gè)權(quán)限去調(diào)起，盡管能夠調(diào)起，qq音樂(lè)也不一定能夠正常播放，因?yàn)榉祷鼗貋?lái)的數(shù)據(jù)模型qq音樂(lè)無(wú)法解析，道理大概類似盡管你有歌詞你也不會(huì)唱日文歌一樣，因?yàn)?，不?

當(dāng)然世界不會(huì)那么的冰冷，例如說(shuō)蘋果自帶的地圖從iOS10開(kāi)始就調(diào)用了高德地圖的地圖數(shù)據(jù)(不信打開(kāi)看看去)。這是為什么?因?yàn)樗麄兒献髁恕?/p>

所以，接口也分為公用接口和私有接口，公用接口可以供任何人使用，就好像追波，它們會(huì)提供一系列的公用接口，所以盡管它們沒(méi)有官方客戶端，但是我們依然能在市場(chǎng)上下載到制作精良的追波app。而私有接口就只供某個(gè)產(chǎn)品使用了，但是如果有商業(yè)上的合作的話，你也能拿到別人的接口，使用別人的數(shù)據(jù)，實(shí)現(xiàn)一些本來(lái)不能實(shí)現(xiàn)的功能。

怎么切入?——第三次去請(qǐng)教你的工程師寶寶了，建議帶上一些零食(推薦可樂(lè))，這時(shí)候他們可能會(huì)讓你去找你們公司的后臺(tái)開(kāi)發(fā)人員。讓后臺(tái)開(kāi)發(fā)人員給你一份關(guān)于你們產(chǎn)品的api文檔(這里可能包含了與你們有商業(yè)合作的公司提供給你們的api)，你會(huì)發(fā)現(xiàn)api文檔其實(shí)沒(méi)有那么復(fù)雜，英語(yǔ)水平良好的你其實(shí)也能看懂大部分意思，這個(gè)時(shí)候你了解了你們產(chǎn)品背后的若干個(gè)api，同時(shí)間還能了解到背后的數(shù)據(jù)模型。

為啥要懂這個(gè)?——知道你手頭上有什么數(shù)據(jù)，就好像一個(gè)廚師知道自己的菜籃子里面都有一些什么食材，知道有什么材料廚師就知道大概能做一桌子怎么樣的菜，知道你手頭上有什么借口和數(shù)據(jù)之后你才能知道自己的產(chǎn)品大概能做到什么、做不到什么，有這個(gè)數(shù)據(jù)我們要如何加以利用、沒(méi)有這個(gè)數(shù)據(jù)我們要怎么去得到。例如，你知道你們的產(chǎn)品能夠獲取的到歌曲的專輯圖片，你就設(shè)計(jì)出一個(gè)位置來(lái)放置這張圖片?？扇绻阍O(shè)計(jì)出一個(gè)很大的位置來(lái)放置專輯的圖片，并在上面添加上了無(wú)語(yǔ)倫比的效果，整個(gè)頁(yè)面看起來(lái)簡(jiǎn)潔又不失華麗、精致卻凸顯大氣，最后才發(fā)現(xiàn)我們并沒(méi)有這個(gè)數(shù)據(jù)，整個(gè)頁(yè)面乃至于與之相關(guān)的所有頁(yè)面都恐怕要重新設(shè)計(jì)了。當(dāng)然這個(gè)例子搞笑成分比較重，但是反問(wèn)自己，是否或多或少都遇到過(guò)這樣的事情?

4. 你不需要去懂的東西

編程。

我想所謂的懂技術(shù)≠會(huì)編程，你不需要懂編程，盡管會(huì)編程會(huì)顯得你很酷，但是一個(gè)設(shè)計(jì)師不必要用能夠親自上手編程這個(gè)技能來(lái)裝點(diǎn)自己。當(dāng)然假如你覺(jué)得自己有興趣，那么你大可以去學(xué)習(xí)，這非常不錯(cuò)，不過(guò)千萬(wàn)不要拿來(lái)上班用。你可以自己開(kāi)發(fā)一個(gè)app，然后以個(gè)人項(xiàng)目的名義上架各大應(yīng)用市場(chǎng)，這樣看起來(lái)才是真的酷!

小結(jié)

不是每個(gè)設(shè)計(jì)師都能夠在蘋果或谷歌(雖然沒(méi)有接觸過(guò)，但是我相信別人的設(shè)計(jì)師也是懂技術(shù)的，因?yàn)閲?guó)外的設(shè)計(jì)專業(yè)很多都有混雜著一些CS課程)這樣的公司工作，他們或許有足夠多的**時(shí)間金錢精力和能力**去實(shí)現(xiàn)設(shè)計(jì)師的大膽創(chuàng)新的設(shè)計(jì)，我們大部分人沒(méi)有這樣的條件，有些東西不是你逼著程序員加加班就能弄出來(lái)的。但是你也不必沮喪，設(shè)計(jì)師不必每時(shí)每刻都在發(fā)明新的東西，大部分情況下，我們能將產(chǎn)品基本的功能做得很靠譜就已經(jīng)非常不錯(cuò)了。為什么?因?yàn)檫@已經(jīng)夠難的了。

偷偷和你告訴你，創(chuàng)新互聯(lián)運(yùn)營(yíng)推廣部門，有個(gè)大神就懂技術(shù)，我有看到大神在搗鼓編輯我似懂又不懂得東西，那網(wǎng)頁(yè)設(shè)計(jì)的棒棒的。創(chuàng)新互聯(lián)還提供APP設(shè)計(jì)資訊，可直接點(diǎn)擊查看。

網(wǎng)頁(yè)名稱：頁(yè)面設(shè)計(jì)師要懂網(wǎng)頁(yè)設(shè)計(jì)技術(shù)
分享路徑：http://muchs.cn/news0/159700.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、營(yíng)銷型網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、網(wǎng)站制作、Google、軟件開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)