寫(xiě)給設(shè)計(jì)師的程序開(kāi)發(fā)基本概念
大家好!本期的《交互設(shè)計(jì)KASH》系列為你分享的是:設(shè)計(jì)師需要知道的程序開(kāi)發(fā)基本概念。
對(duì)于設(shè)計(jì)師來(lái)說(shuō),了解一些程序開(kāi)發(fā)的基本概念,有助于我們與開(kāi)發(fā)同事溝通交互方案。于是本文列舉了一些需要了解的基本概念。
01 從計(jì)算機(jī)工作原理Get人機(jī)交互的底層邏輯
提到計(jì)算機(jī)工作原理,不得不提一個(gè)人,他就是馮·諾依曼。
馮·諾依曼(John von Neumann,1903~1957),20世紀(jì)最重要的數(shù)學(xué)家之一,在現(xiàn)代計(jì)算機(jī)、博弈論、核武器和生化武器等諸多領(lǐng)域內(nèi)有杰出建樹(shù)的最偉大的科學(xué)全才之一,被后人稱為“計(jì)算機(jī)之父”和“博弈論之父”。
馮.諾依曼的三大原理
- 計(jì)算機(jī)由控制器、運(yùn)算器、存儲(chǔ)器、輸入設(shè)備、輸出設(shè)備五大部分組成。
- 程序和數(shù)據(jù)以二進(jìn)制代碼形式不加區(qū)別地存放在存儲(chǔ)器中,存放位置由地址確定。
- 控制器根據(jù)存放在存儲(chǔ)器中地指令序列(程序)進(jìn)行工作,并由一個(gè)程序計(jì)數(shù)器控制指令地執(zhí)行??刂破骶哂信袛嗄芰?,能根據(jù)計(jì)算結(jié)果選擇不同的工作流程。根據(jù)馮諾依曼體系結(jié)構(gòu)構(gòu)成的計(jì)算機(jī),必須具有如下功能:把需要的程序和數(shù)據(jù)送至計(jì)算機(jī)中。必須具有長(zhǎng)期記憶程序、數(shù)據(jù)、中間結(jié)果及最終運(yùn)算結(jié)果的能力。
計(jì)算機(jī)能夠完成各種算術(shù)、邏輯運(yùn)算和數(shù)據(jù)傳送等數(shù)據(jù)加工處理的能力。能夠根據(jù)需要控制程序走向,并能根據(jù)指令控制機(jī)器的各部件協(xié)調(diào)操作。能夠按照要求將處理結(jié)果輸出給用戶。
為了完成上述的功能,計(jì)算機(jī)必須具備五大基本組成部件,包括:
- 輸入數(shù)據(jù)和程序的輸入設(shè)備;
- 記憶程序和數(shù)據(jù)的存儲(chǔ)器;
- 完成數(shù)據(jù)加工處理的運(yùn)算器;
- 控制程序執(zhí)行的控制器;
- 輸出處理結(jié)果的輸出設(shè)備 。
筆者注:
是不是覺(jué)得不明覺(jué)厲?那就對(duì)了,反正我是看不懂。BUT,看完這個(gè)原理,我貌似Get到了人機(jī)交互的底層邏輯:任何形式的人機(jī)交互,都包含3個(gè)基本要素:輸入、計(jì)算、輸出。
02?前端、后端、移動(dòng)端工程師,他們一樣嗎?
相信很多讀者朋友所在的公司,會(huì)有前端工程師、后端工程師、移動(dòng)端工程師,那這些角色到底有啥區(qū)別?要搞明白他們的區(qū)別,我們首先要理解兩個(gè)概念:B/S結(jié)構(gòu)和C/S結(jié)構(gòu)。
01?B/S結(jié)構(gòu)
B/S就是“Browser/Server”的縮寫(xiě),即“瀏覽器/服務(wù)器”模式。
B/S結(jié)構(gòu)是隨著互聯(lián)網(wǎng)的發(fā)展,Web出現(xiàn)后興起的一種網(wǎng)絡(luò)結(jié)構(gòu)模式。這種模式統(tǒng)一了客戶端,讓核心的業(yè)務(wù)處理在服務(wù)端(差不多也可以叫“云端”)完成。
我們只要在自己電腦或手機(jī)上安裝一個(gè)瀏覽器應(yīng)用,就可以通過(guò)Web Server與數(shù)據(jù)庫(kù)進(jìn)行數(shù)據(jù)交互。比如,我們用電腦的瀏覽器訪問(wèn)微博、頭條、愛(ài)奇藝、騰訊視頻等網(wǎng)頁(yè),就是在訪問(wèn)B/S結(jié)構(gòu)的程序。
筆者注:
B/S結(jié)構(gòu)維護(hù)和升級(jí)方式更簡(jiǎn)單,因?yàn)橛脩羰怯脼g覽器直接使用的。
所以,當(dāng)我們發(fā)布一個(gè)產(chǎn)品或功能時(shí),只需要維護(hù)升級(jí)服務(wù)器端就可以,用戶那邊可以繼續(xù)使用瀏覽器,體驗(yàn)新功能。
02 C/S結(jié)構(gòu)
C/S就是“Client/Server”的縮寫(xiě),即“客戶端/服務(wù)器”模式。
C/S結(jié)構(gòu)是一種軟件系統(tǒng)體系結(jié)構(gòu),也是生活中很常見(jiàn)的。比如我們電腦和手機(jī)系統(tǒng)中安裝的微信、QQ、Office等應(yīng)用程序就是C/S結(jié)構(gòu)。
筆者注:
C/S結(jié)構(gòu)是將需要處理的業(yè)務(wù)合理地分配到客戶端和服務(wù)器端,這樣可以大大降低通信成本,但是升級(jí)維護(hù)成本較高。
所以,當(dāng)我們發(fā)布一個(gè)客戶端產(chǎn)品或功能時(shí),理論上是需要發(fā)布軟件版本的,用戶那邊也需要主動(dòng)升級(jí),才能體驗(yàn)新產(chǎn)品和功能。(說(shuō)明:對(duì)于客戶端內(nèi)的H5頁(yè)面,一般不需要重新發(fā)布客戶端版本)
03?前端工程師
前端工程師的主要技術(shù)是:html5,css3,jquery,angularjs,bootstrap,reactjs,vuejs,webpack,less/sass,gulp,nodejs,Google V8引擎,java多線程,模塊化,面向切面編程,設(shè)計(jì)模式,瀏覽器兼容性,性能優(yōu)化等等。
前端關(guān)注的是:需求在前端頁(yè)面的實(shí)現(xiàn),速度,兼容性,用戶體驗(yàn)等等。
04?后端Java工程師
后端Java工程師的主要技術(shù)是:Java基礎(chǔ),設(shè)計(jì)模式,jvm原理,spring+springmvc原理及源碼,linux,mysql事務(wù)隔離與鎖機(jī)制,mongodb,http/tcp,多線程,分布式架構(gòu),彈性計(jì)算架構(gòu),微服務(wù)架構(gòu),Java性能優(yōu)化,以及相關(guān)的項(xiàng)目管理等等。
后端關(guān)注的是:高并發(fā),高可用,高性能,安全,存儲(chǔ),業(yè)務(wù)等等。
<strong”>筆者注:
下面我用APP下拉刷新的場(chǎng)景,幫你理解一下前端和后端的交互。
STEP1:下拉(用戶手指與APP前端交互)
STEP2:松開(kāi)(手指與APP前端交互后,APP前端與后端交互)
STEP3:刷新成功,加載新數(shù)據(jù)(后端將新數(shù)據(jù)給APP前端)
STEP4:前端渲染展示新數(shù)據(jù)(APP前端與用戶交互)
03 Web前端的兩個(gè)基本概念
對(duì)于設(shè)計(jì)師來(lái)說(shuō),知道Web前端技術(shù)里的兩個(gè)概念就可以了:html和css。我舉一個(gè)裝修房子的例子,幫你理解這兩個(gè)概念。
當(dāng)我們?cè)O(shè)計(jì)一個(gè)間房子時(shí),我們會(huì)根據(jù)需求去規(guī)劃和設(shè)計(jì)房子里各個(gè)空間的位置和大小,客廳、廚房、臥室等等。這個(gè)布局、搭框架的過(guò)程就是html做的事情。
等到房子的空間大小布局搞定后,我們會(huì)油漆、裝飾,做一些軟裝,這個(gè)軟裝的過(guò)程,我么可以理解成css做的事情。
所以,一個(gè)靜態(tài)的Web前端頁(yè)面,由html搭架子和布局,由css去裝飾html的視覺(jué)效果。(說(shuō)明:如果要實(shí)現(xiàn)業(yè)務(wù)交互,還需要js、jQuery等其他技術(shù),這里不展開(kāi)講)
我們可以通過(guò)瀏覽器的開(kāi)發(fā)者工具,隨時(shí)查看前端工程師開(kāi)發(fā)出來(lái)的頁(yè)面,這個(gè)方法可以幫我們比較出:前端工程師做的頁(yè)面效果和我們?cè)O(shè)計(jì)稿效果的具體差別。
Windows按F12,Mac按command+option+i
另外,像Sketch插件sketch measure、藍(lán)湖、iDoc等工具,都可以生成css,前端工程師可以參考使用。
圖片來(lái)自藍(lán)湖官網(wǎng)
寫(xiě)在最后
我不懂具體的開(kāi)發(fā)技術(shù),前端開(kāi)發(fā)知識(shí)也只是自學(xué)了html和css。不過(guò)平時(shí)工作中和開(kāi)發(fā)同事交流溝通多了,基本上也會(huì)逐漸了解一些技術(shù)知識(shí)和概念。所以,如果想對(duì)技術(shù)有進(jìn)一步的了解,我覺(jué)得有兩個(gè)方法:
- 報(bào)個(gè)前端開(kāi)發(fā)基礎(chǔ)課程;
- 多找開(kāi)發(fā)同事交流問(wèn)問(wèn)題。當(dāng)然要記得加雞腿哦~~(推薦這個(gè)方法)
程序運(yùn)行非0即1,本文若出現(xiàn)概念錯(cuò)誤、描述不當(dāng)、疑問(wèn)的地方,麻煩一定要指出~
小插曲
我在參加人人都是產(chǎn)品經(jīng)理2019年度作者評(píng)選,希望喜歡我的文章的朋友都能來(lái)支持我一下~
點(diǎn)擊下方鏈接進(jìn)入我的個(gè)人參選頁(yè)面,點(diǎn)擊紅心即可為我投票。
每人最多可投10票哦,登陸了之后就有5票,投完之后可以點(diǎn)擊主頁(yè)的“再投5票”就有機(jī)會(huì)增加5張選票~
投票即有機(jī)會(huì)獲得百萬(wàn)驚喜禮品&起點(diǎn)學(xué)院千元豪禮哦!
投票傳送門(mén):http://996.pm/7d1vV
#專欄作家#
王晗陵,微信公眾號(hào):設(shè)計(jì)意志(ID:D-Minder),人人都是產(chǎn)品經(jīng)理專欄作家。關(guān)注交互/UI設(shè)計(jì)領(lǐng)域及職場(chǎng)能力,擅長(zhǎng)需求分析、用戶體驗(yàn)和原型設(shè)計(jì)。
關(guān)注公眾號(hào),即可查看交互KASH全系列文章。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash,基于 CC0 協(xié)議
- 目前還沒(méi)評(píng)論,等你發(fā)揮!