百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT知识 > 正文

写给设计师的程序开发基本概念

liuian 2025-02-28 16:30 12 浏览

大家好!本期的《交互设计KASH》系列为你分享的是:设计师需要知道的程序开发基本概念。 对于设计师来说,了解一些程序开发的基本概念,有助于我们与开发同事沟通交互方案。于是本文列举了一些需要了解的基本概念。

01 从计算机工作原理Get人机交互的底层逻辑

提到计算机工作原理,不得不提一个人,他就是冯·诺依曼。

冯·诺依曼(John von Neumann,1903~1957),20世纪最重要的数学家之一,在现代计算机、博弈论、核武器和生化武器等诸多领域内有杰出建树的最伟大的科学全才之一,被后人称为“计算机之父”和“博弈论之父”。

冯.诺依曼的三大原理

  1. 计算机由控制器、运算器、存储器、输入设备、输出设备五大部分组成。
  2. 程序和数据以二进制代码形式不加区别地存放在存储器中,存放位置由地址确定。
  3. 控制器根据存放在存储器中地指令序列(程序)进行工作,并由一个程序计数器控制指令地执行。控制器具有判断能力,能根据计算结果选择不同的工作流程。根据冯诺依曼体系结构构成的计算机,必须具有如下功能:把需要的程序和数据送至计算机中。必须具有长期记忆程序、数据、中间结果及最终运算结果的能力。

计算机能够完成各种算术、逻辑运算和数据传送等数据加工处理的能力。能够根据需要控制程序走向,并能根据指令控制机器的各部件协调操作。能够按照要求将处理结果输出给用户。

为了完成上述的功能,计算机必须具备五大基本组成部件,包括:

  1. 输入数据和程序的输入设备;
  2. 记忆程序和数据的存储器;
  3. 完成数据加工处理的运算器;
  4. 控制程序执行的控制器;
  5. 输出处理结果的输出设备 。

笔者注:

是不是觉得不明觉厉?那就对了,反正我是看不懂。BUT,看完这个原理,我貌似Get到了人机交互的底层逻辑:任何形式的人机交互,都包含3个基本要素:输入、计算、输出。

02 前端、后端、移动端工程师,他们一样吗?

相信很多读者朋友所在的公司,会有前端工程师、后端工程师、移动端工程师,那这些角色到底有啥区别?要搞明白他们的区别,我们首先要理解两个概念:B/S结构和C/S结构。

01 B/S结构

B/S就是“Browser/Server”的缩写,即“浏览器/服务器”模式。

B/S结构是随着互联网的发展,Web出现后兴起的一种网络结构模式。这种模式统一了客户端,让核心的业务处理在服务端(差不多也可以叫“云端”)完成。

我们只要在自己电脑或手机上安装一个浏览器应用,就可以通过Web Server与数据库进行数据交互。比如,我们用电脑的浏览器访问微博、头条、爱奇艺、腾讯视频等网页,就是在访问B/S结构的程序。

笔者注:

B/S结构维护和升级方式更简单,因为用户是用浏览器直接使用的。

所以,当我们发布一个产品或功能时,只需要维护升级服务器端就可以,用户那边可以继续使用浏览器,体验新功能。

02 C/S结构

C/S就是“Client/Server”的缩写,即“客户端/服务器”模式。

C/S结构是一种软件系统体系结构,也是生活中很常见的。比如我们电脑和手机系统中安装的微信、QQ、Office等应用程序就是C/S结构。

笔者注:

C/S结构是将需要处理的业务合理地分配到客户端和服务器端,这样可以大大降低通信成本,但是升级维护成本较高。

所以,当我们发布一个客户端产品或功能时,理论上是需要发布软件版本的,用户那边也需要主动升级,才能体验新产品和功能。(说明:对于客户端内的H5页面,一般不需要重新发布客户端版本)

03 前端工程师

前端工程师的主要技术是:html5,css3,jquery,angularjs,bootstrap,reactjs,vuejs,webpack,less/sass,gulp,nodejs,Google V8引擎,java多线程,模块化,面向切面编程,设计模式,浏览器兼容性,性能优化等等。

前端关注的是:需求在前端页面的实现,速度,兼容性,用户体验等等。

04 后端Java工程师

后端Java工程师的主要技术是:Java基础,设计模式,jvm原理,spring+springmvc原理及源码,linux,mysql事务隔离与锁机制,mongodb,http/tcp,多线程,分布式架构,弹性计算架构,微服务架构,Java性能优化,以及相关的项目管理等等。

后端关注的是:高并发,高可用,高性能,安全,存储,业务等等。

笔者注:

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

STEP1:下拉(用户手指与APP前端交互)

STEP2:松开(手指与APP前端交互后,APP前端与后端交互)

STEP3:刷新成功,加载新数据(后端将新数据给APP前端)

STEP4:前端渲染展示新数据(APP前端与用户交互)

03 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。不过平时工作中和开发同事交流沟通多了,基本上也会逐渐了解一些技术知识和概念。所以,如果想对技术有进一步的了解,我觉得有两个方法:

  1. 报个前端开发基础课程;
  2. 多找开发同事交流问问题。当然要记得加鸡腿哦~~(推荐这个方法)

程序运行非0即1,本文若出现概念错误、描述不当、疑问的地方,麻烦一定要指出~

小插曲

我在参加人人都是产品经理2019年度作者评选,希望喜欢我的文章的朋友都能来支持我一下~

点击下方链接进入我的个人参选页面,点击红心即可为我投票。

每人最多可投10票哦,登陆了之后就有5票,投完之后可以点击主页的“为作者打call”就有机会增加5张选票~

投票即有机会获得百万惊喜礼品&起点学院千元豪礼哦!

投票传送门:http://996.pm/7d1vV

#专栏作家#

王晗陵,微信公众号:设计意志(ID:D-Minder),人人都是产品经理专栏作家。关注交互/UI设计领域及职场能力,擅长需求分析、用户体验和原型设计。

关注公众号,即可查看交互KASH全系列文章。

本文原创发布于人人都是产品经理。未经许可,禁止转载

题图来自 Unsplash,基于 CC0 协议

相关推荐

2023年最新微信小程序抓包教程(微信小程序 抓包)

声明:本公众号大部分文章来自作者日常学习笔记,部分文章经作者授权及其他公众号白名单转载。未经授权严禁转载。如需转载,请联系开百。请不要利用文章中的相关技术从事非法测试。由此产生的任何不良后果与文...

测试人员必看的软件测试面试文档(软件测试面试怎么说)

前言又到了毕业季,我们将会迎来许多需要面试的小伙伴,在这里呢笔者给从事软件测试的小伙伴准备了一份顶级的面试文档。1、什么是bug?bug由哪些字段(要素)组成?1)将在电脑系统或程序中,隐藏着的...

复活,视频号一键下载,有手就会,长期更新(2023-12-21)

视频号下载的话题,也算是流量密码了。但也是比较麻烦的问题,频频失效不说,使用方法也难以入手。今天,奶酪就来讲讲视频号下载的新方案,更关键的是,它们有手就会有用,最后一个方法万能。实测2023-12-...

新款HTTP代理抓包工具Proxyman(界面美观、功能强大)

不论是普通的前后端开发人员,还是做爬虫、逆向的爬虫工程师和安全逆向工程,必不可少会使用的一种工具就是HTTP抓包工具。说到抓包工具,脱口而出的肯定是浏览器F12开发者调试界面、Charles(青花瓷)...

使用Charles工具对手机进行HTTPS抓包

本次用到的工具:Charles、雷电模拟器。比较常用的抓包工具有fiddler和Charles,今天讲Charles如何对手机端的HTTS包进行抓包。fiddler抓包工具不做讲解,网上有很多fidd...

苹果手机下载 TikTok 旧版本安装包教程

目前苹果手机能在国内免拔卡使用的TikTok版本只有21.1.0版本,而AppStore是高于21.1.0版本,本次教程就是解决如何下载TikTok旧版本安装包。前期准备准备美区...

【0基础学爬虫】爬虫基础之抓包工具的使用

大数据时代,各行各业对数据采集的需求日益增多,网络爬虫的运用也更为广泛,越来越多的人开始学习网络爬虫这项技术,K哥爬虫此前已经推出不少爬虫进阶、逆向相关文章,为实现从易到难全方位覆盖,特设【0基础学爬...

防止应用调试分析IP被扫描加固实战教程

防止应用调试分析IP被扫描加固实战教程一、概述在当今数字化时代,应用程序的安全性已成为开发者关注的焦点。特别是在应用调试过程中,保护应用的网络安全显得尤为重要。为了防止应用调试过程中IP被扫描和潜在的...

一文了解 Telerik Test Studio 测试神器

1.简介TelerikTestStudio(以下称TestStudio)是一个易于使用的自动化测试工具,可用于Web、WPF应用的界面功能测试,也可以用于API测试,以及负载和性能测试。Te...

HLS实战之Wireshark抓包分析(wireshark抓包总结)

0.引言Wireshark(前称Ethereal)是一个网络封包分析软件。网络封包分析软件的功能是撷取网络封包,并尽可能显示出最为详细的网络封包资料。Wireshark使用WinPCAP作为接口,直接...

信息安全之HTTPS协议详解(加密方式、证书原理、中间人攻击 )

HTTPS协议详解(加密方式、证书原理、中间人攻击)HTTPS协议的加密方式有哪些?HTTPS证书的原理是什么?如何防止中间人攻击?一:HTTPS基本介绍:1.HTTPS是什么:HTTPS也是一个...

Fiddler 怎么抓取手机APP:抖音、小程序、小红书数据接口

使用Fiddler抓取移动应用程序(APP)的数据接口需要进行以下步骤:首先,确保手机与计算机连接在同一网络下。在计算机上安装Fiddler工具,并打开它。将手机的代理设置为Fiddler代理。具体方...

python爬虫教程:教你通过 Fiddler 进行手机抓包

今天要说说怎么在我们的手机抓包有时候我们想对请求的数据或者响应的数据进行篡改怎么做呢?我们经常在用的手机手机里面的数据怎么对它抓包呢?那么...接下来就是学习python的正确姿势我们要用到一款强...

Fiddler入门教程全家桶,建议收藏

学习Fiddler工具之前,我们先了解一下Fiddler工具的特点,Fiddler能做什么?如何使用Fidder捕获数据包、修改请求、模拟客户端向服务端发送请求、实施越权的安全性测试等相关知识。本章节...

fiddler如何抓取https请求实现手机抓包(100%成功解决)

一、HTTP协议和HTTPS协议。(1)HTTPS协议=HTTP协议+SSL协议,默认端口:443(2)HTTP协议(HyperTextTransferProtocol):超文本传输协议。默认...