對于設計師來說,了解一些程序開發的基本概念,有助于我們與開發同事溝通交互方案。

從計算機工作原理Get人機交互的底層邏輯

提到計算機工作原理,不得不提一個人,他就是馮·諾依曼。

馮·諾依曼(John von Neumann,1903~1957),20 世紀最重要的數學家之一,在現代計算機、博弈論、核武器和生化武器等諸多領域內有杰出建樹的最偉大科學全才之一,被后人稱為「計算機之父」和「博弈論之父」。

馮.諾依曼的三大原理:

  • 計算機由控制器、運算器、存儲器、輸入設備、輸出設備五大部分組成。
  • 程序和數據以二進制代碼形式不加區別地存放在存儲器中,存放位置由地址確定。
  • 控制器根據存放在存儲器中的指令序列(程序)進行工作,并由一個程序計數器控制指令的執行。控制器具有判斷能力,能根據計算結果選擇不同的工作流程。根據馮諾依曼體系結構構成的計算機,必須具有如下功能:把需要的程序和數據送至計算機中。必須具有長期記憶程序、數據、中間結果及最終運算結果的能力。

計算機能夠完成各種算術、邏輯運算和數據傳送等數據加工處理的能力。能夠根據需要控制程序走向,并能根據指令控制機器的各部件協調操作。能夠按照要求將處理結果輸出給用戶。
為了完成上述的功能,計算機必須具備五大基本組成部件,包括:

  • 輸入數據和程序的輸入設備;
  • 記憶程序和數據的存儲器;
  • 完成數據加工處理的運算器;
  • 控制程序執行的控制器;
  • 輸出處理結果的輸出設備 。

筆者注:

是不是覺得不明覺厲?那就對了,反正我是看不懂。BUT,看完這個原理,我貌似 Get 到了人機交互的底層邏輯:任何形式的人機交互,都包含3個基本要素:輸入、計算、輸出。

前端、后端、移動端工程師,他們一樣嗎?

相信很多讀者朋友所在的公司,會有前端工程師、后端工程師、移動端工程師,那這些角色到底有啥區別?要搞明白他們的區別,我們首先要理解兩個概念:B/S 結構和 C/S 結構。

1. B/S結構

B/S就是「Browser/Server」的縮寫,即「瀏覽器/服務器」模式。

B/S結構是隨著互聯網的發展,Web 出現后興起的一種網絡結構模式。這種模式統一了客戶端,讓核心的業務處理在服務端(差不多也可以叫「云端」)完成。

我們只要在自己電腦或手機上安裝一個瀏覽器應用,就可以通過 Web Server 與數據庫進行數據交互。比如,我們用電腦的瀏覽器訪問微博、頭條、愛奇藝、騰訊視頻等網頁,就是在訪問 B/S 結構的程序。

筆者注:

B/S 結構維護和升級方式更簡單,因為用戶是用瀏覽器直接使用的。

所以,當我們發布一個產品或功能時,只需要維護升級服務器端就可以,用戶那邊可以繼續使用瀏覽器,體驗新功能。

2. C/S結構

C/S 就是「Client/Server」的縮寫,即「客戶端/服務器」模式。

C/S 結構是一種軟件系統體系結構,也是生活中很常見的。比如我們電腦和手機系統中安裝的微信、QQ、Office 等應用程序就是 C/S 結構。

筆者注:

C/S 結構是將需要處理的業務合理地分配到客戶端和服務器端,這樣可以大大降低通信成本,但是升級維護成本較高。

所以,當我們發布一個客戶端產品或功能時,理論上是需要發布軟件版本的,用戶那邊也需要主動升級,才能體驗新產品和功能。(說明:對于客戶端內的 H5 頁面,一般不需要重新發布客戶端版本)

3. 前端工程師

前端工程師的主要技術是:html5,css3,jquery,angularjs,bootstrap,reactjs,vuejs,webpack,less/sass,gulp,nodejs,Google V8 引擎,java 多線程,模塊化,面向切面編程,設計模式,瀏覽器兼容性,性能優化等等。

前端關注的是:需求在前端頁面的實現,速度,兼容性,用戶體驗等等。

4. 后端Java工程師

后端 Java 工程師的主要技術是:Java 基礎,設計模式,jvm 原理,spring+springmvc 原理及源碼,linux,mysql 事務隔離與鎖機制,mongodb,http/tcp,多線程,分布式架構,彈性計算架構,微服務架構,Java 性能優化,以及相關的項目管理等等。

后端關注的是:高并發,高可用,高性能,安全,存儲,業務等等。

筆者注:

下面我用 APP 下拉刷新的場景,幫你理解一下前端和后端的交互。

  • STEP 1:下拉(用戶手指與 APP 前端交互)
  • STEP 2:松開(手指與 APP 前端交互后,APP 前端與后端交互)
  • STEP 3:刷新成功,加載新數據(后端將新數據給 APP 前端)
  • STEP 4:前端渲染展示新數據(APP 前端與用戶交互)

Web前端的兩個基本概念

對于設計師來說,知道 Web 前端技術里的兩個概念就可以了:html 和 css。我舉一個裝修房子的例子,幫你理解這兩個概念。

當我們設計一個間房子時,我們會根據需求去規劃和設計房子里各個空間的位置和大小,客廳、廚房、臥室等等。這個布局、搭框架的過程就是 html 做的事情。

等到房子的空間大小布局搞定后,我們會刷油漆、裝飾,做一些軟裝,這個軟裝的過程,我么可以理解成 css 做的事情。

所以,一個靜態的 Web 前端頁面,由 html 搭架子和布局,由 css 去裝飾 html 的視覺效果。(說明:如果要實現業務交互,還需要 js、jQuery 等其他技術,這里不展開講)

我們可以通過瀏覽器的開發者工具,隨時查看前端工程師開發出來的頁面,這個方法可以幫我們比較出:前端工程師做的頁面效果和我們設計稿效果的具體差別。

Windows 按 F12,Mac 按 command+option+i

另外,像 Sketch 插件 sketch measure、藍湖、iDoc 等工具,都可以生成 css,前端工程師可以參考使用。

△ 圖片來自藍湖官網

寫在最后

我不懂具體的開發技術,前端開發知識也只是自學了 html 和 css。不過平時工作中和開發同事交流溝通多了,基本上也會逐漸了解一些技術知識和概念。所以,如果想對技術有進一步的了解,我覺得有兩個方法:

  • 報個前端開發基礎課程;
  • 多找開發同事交流問問題。當然要記得加雞腿哦~~(推薦這個方法)

歡迎關注作者的微信公眾號:「設計意志」

點贊 7
收藏 12
繼續閱讀相關文章

發表評論 已發布 11

還可以輸入 800 個字
 
 
載入中....
11 收藏