篇文章提到手机APP通过TCP局域网的方式和PLC通讯，就在考虑外网如何实现。

查询了很多资料，主要是通过物联网协议MQTT通讯实现。

一，实现外网控制的几种方式

1，西门子S7-1200或者1500系列PLC本身支持MQTT协议的

PLC连接外网的情况下，通过对应库做MQTT客户端连接到服务器，手机APP再连接MQTT服务器，实现数据交换，这个我摸索了好久，没摸索明白，就放弃了。

2，对于不支持MQTT协议的PLC可以通过物联网网关实现，购买一个有人或者巨控之类的网关，这个方式相对简单，手机端和云端APP都是厂家开发好的，缺点是价格贵些。

3，第三种方式就我用的方式，简单描述就是一台可以上网的电脑，一边连着PLC，一边做MQTT客户端，和手机APP连到通一个MQTT服务器进行通讯，如下图

手机APP使用MIT APP平台开发，上文有介绍，各位可以看看。

而我用云服务器代替了电脑，想练习的朋友不用云服务器，用普通电脑也行的，PLC连到了蒲公英路由器，通过蒲公英的异地组网功能实现云服务和PLC连接，如下图

云主机（随意一台电脑也行，一下用电脑代替），怎样接PLC的数据发送到手机呢？这里只要用到一个工具 Node-red，如下

它是完全免费的，可以一边读写PLC数据一边订阅和发布MQTT消息，等同于免费物联网网关。

二，简单程序编写

1，node-red和PLC通讯

node-red怎么安装各位自己搜索就好，或者找我要链接，这里不多讲啦，先讲Node-red怎么和PLC通讯，安装完毕后直接浏览器输入 HTTP://localhost:1880，或者127.0.0.1:1880进入编程界面，刚安装的是没有和西门子PLC通讯的插件的

如上图，设置进入控制板，然后搜索s7,添加S7的PLC的插件，安装完毕就有读取和输出的图标，拖出来用就行。

下面是配置PLC的通讯参数

需要读取的点

地址格式参考这个网站 https://www.mqtt.cn/1245.html

下面是写入PLC的数据，通讯参数和读取的一样

地址是一串字符串，处理方式和上文TCP局域网的处理一样。

发给PLC，PLC收到的数据是

输出为1的位置就表示对应的Q输出

2.node-red和MQTT服务器的通讯

MQTT服务器用的这个免费的

地址和端口设置好，主题设置为hyxhyx

这样，node-red就会将我需要的数据按周期发送到MQTT服务器，IOData就是对应Q的输出状态，1标识ON中，0标识OFF 中

下面是用MQTT客户端测试数据是否正常发出，如下图订阅的主题是hyxhyx,能正常收到数据

下图是订阅一个主题为"hyxhyx1'的消息，

是将手机APP发送的数据传到MQTT服务器，MQTT服务再给node-red，node-red将数据写入PLC的地址 DB99里面的0开始的地址，然后PLC处理数据

3,PLC和手机APP处理

上面大家也看明白了，node-red,MQTT服务器客户端，都是中转，为了让APP能和PLC能进行数据交换，下面简单介绍PLC数据处理。

PLC传输到APP

浮点数数据都是转字符的，开关也是字符表，0表示OFF中，1表示ON中

下面是PLC收到的数据，一大串字符，比如PT4101的压力是28.387

如下图，搜索整个字符串PT4101的位置，然后提取出来，

开关量数据一样

这是读取的PLC数据，

下面看看控制Q点开关如何编写

点击取反

所有内容合成一串

合成一串后以"hyxhyx1"主题发布

订阅主图hyxhyx1测试

PLC收到的内容

程序判断是字符1输出

以上是简单的控制，实际使用肯定需要加一些保护，比如心跳检测，APP是否和PLC通讯上等考虑。

使用场景和设计方法来看，App与Web的设计有什么区别？

早前，总是遇到问“Web设计”和“UI设计”分别做了多久？之类的询问，文章开始之前，我们先来聊聊什么是UI设计。

UI=Ueser Interface，直译“用户界面”。也就是说UI设计就是用户界面设计。所以只要是用户，也就是人机交互得体验中会用到的界面,都叫做“UI”，对于这些“UI”的设计，我们都统称为“UI设计”。

界面有很多种，我们主要介绍Web与App界面，由浅入深，通过使用场景与设计方法、开发环境与适配要点，两两结合来看一下他们的区别。

关于使用场景，2012年移动互联网元年至今，越来越多的小伙伴将网瘾道具，从电脑改为移动设备。以前聊的是，我配了个XXX的显卡跑游戏，现在越来越多的是，某果的发布会看了吗？

越来越多的用户“道具”，促使我们要去画更多的，用户的“道具”皮肤，也就是我们“俗称”的界面。

在设计不同的“皮肤”时，我们可通过考虑以下几点设计方法，来区分他们。

1. 交互方式的不同

1.1 操作媒介

Web网站 – 鼠标操作 VS 移动App – 手指场景的局限造成了，使用电脑成本会高一些，相对按钮位置的精确度会更高（在触摸大屏还没出现的时代，我们操作鼠标来实现点击）。

而移动设备，随时随地动动手指就可以了。

我们要注意预留点击区域，控制可点击内容的艰巨性。

1.2 设计要点

（1）使用场景不同

• 相对PC端的位置固定，因为显示器种类繁多，窗口也可以随意缩放，设计时需要优先确定页面的安全区域，但同样因为屏幕大所有现实的内容相对更丰富。
• 而移动端的页面相对就小很多，虽然小但显得很灵活，很多App卖点就是利用碎片花时间学习、购物、娱乐，对应这点的不同，移动端的内容会更加精简。

两端的阅读范围及内容长度偏重的也因此不同。

（2）文字大小

Web设计 ：比较随意，文章正文字体12px/14px；页面安全区域1080px～1280px为宜（一些展示页面字体会做到16-20px或更大）。

App设计：正文30-34px,最小可用28px;注释及提示行文字20-24px，最小不小于20px。（具体字数根据24px-36px的字体大小，以及页边距来定～）。

（3）Banner

• Web设计：宽度在1920px,主内容区域（安全范围）1080px～1280px为宜；
• App设计：画面大小根据比例自适应缩放或根据实际页面适配方案调整安全距离。

2. 反馈方式的不同

相对PC端的位置固定，用户会在一个相对平缓的环境浏览页面，状态也会更为专注。误点击的概率小，更多的会讲究反馈速度和信息的精确度，用户比较多的是收藏正页面而不是单独的段落。而移动端用户因为场景多变，很多时候会利用走路，坐车的实际去浏览界面，更容易产生误操作，也更容易对页面内容产生疲惫感。

Web设计：一般对于界面的通知中心,位置相对固定，但较为隐蔽，用户使用的不多,很难主动唤起用户。

这里设计师需要做的，是将自动呼出的弹窗提示和漂浮窗口这类的“强制”、“粗鲁”的提示形式。（经常被运营要求加个活动飘窗，价格在线客服，这类令人反感的交互方式。）

通过一些，相对“隐蔽”、“固定”、“委婉”的方式及摆放位置，在不影响用户阅读的前提下进行提示交互。

App设计：最常见的是系统自带的推送通知，用户可主动关闭通知，当然也有嵌在页面内的，因为屏幕限制，所以相对网页更加突出，设计师需要思考如何让用户更容易“开启通知权限”。

3. 侧重的不同

针对不同设备用户的不同习惯，我们在定义两端的交互内容时也要有所侧重，我们会选择性的对一些内容进行隐藏，也会针对设备区分同一功能的交互方式。比如：两端同样的收藏动作，Web用户比较多的是收藏整页，而不是单独的段落；因此用户会较多使用“收藏夹”、下载等方式。

而对App用户因为切换应用容易被打断操作及阅读环境的限制，除了选择一些App自带的“稍候阅读”功能外，“截屏”保存或长按收藏就比较实用了。

3.1 藏功能

平台，会在两端分别给用户不同的功能侧重。就好像工作时间会更优先pc端去处理事情，这是因为，PC端能够更好的拆解我们的需求，因为需求不同界面的侧重功能也会不同。

比如：我们会有在平台编辑文章并配图、排版发布平台的需求，但是在两端同时体验操作后发现，App任务发布的复杂程度让用户难以理解。往往一个Web页面就能完成的事情App端需要2-3个页面才能完成，加上大段的文字内容需要编辑，以及网络状态原因，让发布任务变得很艰难。

因此，很多App就会拆分两端的用户需求，将商家更多的引导去Web去上架货物;消费者则侧重于App，同时界面会根据不同端“藏”去一部分的功能。

3.2 藏内容

因界面分辨率的差异化，我们也会隐藏一些需求度较低的内容元素。比如：我们常说的面包条菜单，其实就是把Web上常规的Menu，适应智能手机的操作和显示特性而做出的变化。

Web网站：以鼠标或触摸板为操作媒介, 常用交互方式有左击、右击、hover鼠标滑过几个操作方式，对应这些操作的web端可以将隐藏的元素，（比如解释类文字，及子菜单等）可以在鼠标hover时或是点击后才展示出来。

移动App：因为实际面积更手指触控的关系，App常用的交互方式有，手指点击、滑动、捏合等各种复杂的手势。同时在App设计时，多遵循用选择代替输入，因此设计师需要更多整合信息，并隐藏一些焦点外的内容。

3.3 “藏”的设计方式

（1）提示

通用-小红点、提示气泡、文字字重及变色、展开收起常用提示性符号。

（2）内容收起Web网站

点击下拉、hover下拉。

移动App：滑动拖出内容

4. 功能侧重的不同

• Web网站：侧重复杂操作类，例如文本编辑，后台数据上传下载等，需要大量操作及其他软件相互协助的功能。
• 移动App：侧重相对简易且场景多变的操作，比如打车，导航等，或是一些适合利用碎片化时间作业的功能。

Tips：我们在“藏”的时候要注意，移动App以单手操作为主，界面上重要元素需要在用户单手点击范围内，或者提供快捷的手势操作。

5. 网络环境的不同

Web使用的是Wifi或是电缆等无限量的高速网络，而App则是移动网络或是Wifi，网络环境相对复杂。应对这些不同网络环境对应的网络速度，我们可以通过分页区别化和加载区别化来提高用户的体验。

Web网站：一般都是点击进入链接后从0开始加载，也因为网络稳定的“先天”优势，读用翻页符号来解决分页问题，也有一些以支撑的网站选择使用“瀑布流”的方式替代分页。

比如，花瓣、蘑菇街这类“看图”的网站，因为搜索后的数据格式相同，用户对同一内容兴趣关注度大，停留对比时间较长，所以优先使用“瀑布流”。

移动App：因用户使用环境复杂（可能在移动过程中从通畅环境到封闭的信号较差的环境,网络可能从有到无、从快到慢）。所以和网站有区别的是，我们一般通过用户主动下载、更新的方式来加载主要框架；实时的数据信息则是在用户打开App后通过当前网络加载，也因为网络不稳定的劣势，很少有翻页符号来区别每页，反复刷新加载会造成等待时间较长。

Tips：注意图片大小 -加载图片是对数据流量和网速的“巨大”考验，因此，我们在一些运营类的项目或者是商场图片时，尤其是App图一定要记得压缩。我们可以用到tinypng.com等在线压缩图片的工具进行压缩，也要提醒开发小哥哥发版前记得压缩图片。

总结

• 交互方式，因为操作媒介有所不同，所以我们要注意区分一些状态和侧重；
• 反馈方式，因为浏览环境和基础框架不同，所以我们要注意利用各自空间优势进行反馈；
• 侧重功能，因为各自的操作优势，我们会对两端的用户和功能进行划分，给出不同的产品侧重；

最后是网络环境，因为两者各自网络环境的优劣势，我们在做页面布局设计的时候也要作出相应的调整。

虽然现在Web端的网站等在慢慢的被弱化，连鹅厂都放弃了Web端的QQ，但是作为UI设计师，对于Web端的基本工还是不能放弃啊～至少App战胜不了后台系统！

参考链接：

• https://www.jianshu.com/p/81d4486bc816《网页中的字体到底该怎么选择？》
• https://www.jianshu.com/p/cc8916f35d00《用户界面网页设计原则》

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

题图来自Unsplash，基于CC0协议

PP最终页面展示效果（分享、卸载、跳转、关闭功能）

<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

源码私vx：codingbb

回复：app页面制作1小时速成

后台展示

适应手机类型

跳转按钮可跳转第三方链接

举例点击微信登录跳转其他平台

温馨提示：本项目需在正常网络链接下使用