手機(jī)APP和PLC通訊-外網(wǎng)方式

篇文章提到手機(jī)APP通過TCP局域網(wǎng)的方式和PLC通訊，就在考慮外網(wǎng)如何實(shí)現(xiàn)。

查詢了很多資料，主要是通過物聯(lián)網(wǎng)協(xié)議MQTT通訊實(shí)現(xiàn)。

一，實(shí)現(xiàn)外網(wǎng)控制的幾種方式

1，西門子S7-1200或者1500系列PLC本身支持MQTT協(xié)議的

PLC連接外網(wǎng)的情況下，通過對應(yīng)庫做MQTT客戶端連接到服務(wù)器，手機(jī)APP再連接MQTT服務(wù)器，實(shí)現(xiàn)數(shù)據(jù)交換，這個(gè)我摸索了好久，沒摸索明白，就放棄了。

2，對于不支持MQTT協(xié)議的PLC可以通過物聯(lián)網(wǎng)網(wǎng)關(guān)實(shí)現(xiàn)，購買一個(gè)有人或者巨控之類的網(wǎng)關(guān)，這個(gè)方式相對簡單，手機(jī)端和云端APP都是廠家開發(fā)好的，缺點(diǎn)是價(jià)格貴些。

3，第三種方式就我用的方式，簡單描述就是一臺可以上網(wǎng)的電腦，一邊連著PLC，一邊做MQTT客戶端，和手機(jī)APP連到通一個(gè)MQTT服務(wù)器進(jìn)行通訊，如下圖

手機(jī)APP使用MIT APP平臺開發(fā)，上文有介紹，各位可以看看。

而我用云服務(wù)器代替了電腦，想練習(xí)的朋友不用云服務(wù)器，用普通電腦也行的，PLC連到了蒲公英路由器，通過蒲公英的異地組網(wǎng)功能實(shí)現(xiàn)云服務(wù)和PLC連接，如下圖

云主機(jī)（隨意一臺電腦也行，一下用電腦代替），怎樣接PLC的數(shù)據(jù)發(fā)送到手機(jī)呢？這里只要用到一個(gè)工具 Node-red，如下

它是完全免費(fèi)的，可以一邊讀寫PLC數(shù)據(jù)一邊訂閱和發(fā)布MQTT消息，等同于免費(fèi)物聯(lián)網(wǎng)網(wǎng)關(guān)。

二，簡單程序編寫

1，node-red和PLC通訊

node-red怎么安裝各位自己搜索就好，或者找我要鏈接，這里不多講啦，先講Node-red怎么和PLC通訊，安裝完畢后直接瀏覽器輸入 HTTP://localhost:1880，或者127.0.0.1:1880進(jìn)入編程界面，剛安裝的是沒有和西門子PLC通訊的插件的

如上圖，設(shè)置進(jìn)入控制板，然后搜索s7,添加S7的PLC的插件，安裝完畢就有讀取和輸出的圖標(biāo)，拖出來用就行。

下面是配置PLC的通訊參數(shù)

需要讀取的點(diǎn)

地址格式參考這個(gè)網(wǎng)站 https://www.mqtt.cn/1245.html

下面是寫入PLC的數(shù)據(jù)，通訊參數(shù)和讀取的一樣

地址是一串字符串，處理方式和上文TCP局域網(wǎng)的處理一樣。

發(fā)給PLC，PLC收到的數(shù)據(jù)是

輸出為1的位置就表示對應(yīng)的Q輸出

2.node-red和MQTT服務(wù)器的通訊

MQTT服務(wù)器用的這個(gè)免費(fèi)的

地址和端口設(shè)置好，主題設(shè)置為hyxhyx

這樣，node-red就會將我需要的數(shù)據(jù)按周期發(fā)送到MQTT服務(wù)器，IOData就是對應(yīng)Q的輸出狀態(tài)，1標(biāo)識ON中，0標(biāo)識OFF 中

下面是用MQTT客戶端測試數(shù)據(jù)是否正常發(fā)出，如下圖訂閱的主題是hyxhyx,能正常收到數(shù)據(jù)

下圖是訂閱一個(gè)主題為"hyxhyx1'的消息，

是將手機(jī)APP發(fā)送的數(shù)據(jù)傳到MQTT服務(wù)器，MQTT服務(wù)再給node-red，node-red將數(shù)據(jù)寫入PLC的地址 DB99里面的0開始的地址，然后PLC處理數(shù)據(jù)

3,PLC和手機(jī)APP處理

上面大家也看明白了，node-red,MQTT服務(wù)器客戶端，都是中轉(zhuǎn)，為了讓APP能和PLC能進(jìn)行數(shù)據(jù)交換，下面簡單介紹PLC數(shù)據(jù)處理。

PLC傳輸?shù)紸PP

浮點(diǎn)數(shù)數(shù)據(jù)都是轉(zhuǎn)字符的，開關(guān)也是字符表，0表示OFF中，1表示ON中

下面是PLC收到的數(shù)據(jù)，一大串字符，比如PT4101的壓力是28.387

如下圖，搜索整個(gè)字符串PT4101的位置，然后提取出來，

開關(guān)量數(shù)據(jù)一樣

這是讀取的PLC數(shù)據(jù)，

下面看看控制Q點(diǎn)開關(guān)如何編寫

點(diǎn)擊取反

所有內(nèi)容合成一串

合成一串后以"hyxhyx1"主題發(fā)布

訂閱主圖hyxhyx1測試

PLC收到的內(nèi)容

程序判斷是字符1輸出

以上是簡單的控制，實(shí)際使用肯定需要加一些保護(hù)，比如心跳檢測，APP是否和PLC通訊上等考慮。

使用場景和設(shè)計(jì)方法來看，App與Web的設(shè)計(jì)有什么區(qū)別？

早前，總是遇到問“Web設(shè)計(jì)”和“UI設(shè)計(jì)”分別做了多久？之類的詢問，文章開始之前，我們先來聊聊什么是UI設(shè)計(jì)。

UI=Ueser Interface，直譯“用戶界面”。也就是說UI設(shè)計(jì)就是用戶界面設(shè)計(jì)。所以只要是用戶，也就是人機(jī)交互得體驗(yàn)中會用到的界面,都叫做“UI”，對于這些“UI”的設(shè)計(jì)，我們都統(tǒng)稱為“UI設(shè)計(jì)”。

界面有很多種，我們主要介紹Web與App界面，由淺入深，通過使用場景與設(shè)計(jì)方法、開發(fā)環(huán)境與適配要點(diǎn)，兩兩結(jié)合來看一下他們的區(qū)別。

關(guān)于使用場景，2012年移動互聯(lián)網(wǎng)元年至今，越來越多的小伙伴將網(wǎng)癮道具，從電腦改為移動設(shè)備。以前聊的是，我配了個(gè)XXX的顯卡跑游戲，現(xiàn)在越來越多的是，某果的發(fā)布會看了嗎？

越來越多的用戶“道具”，促使我們要去畫更多的，用戶的“道具”皮膚，也就是我們“俗稱”的界面。

在設(shè)計(jì)不同的“皮膚”時(shí)，我們可通過考慮以下幾點(diǎn)設(shè)計(jì)方法，來區(qū)分他們。

1. 交互方式的不同

1.1 操作媒介

Web網(wǎng)站 – 鼠標(biāo)操作 VS 移動App – 手指場景的局限造成了，使用電腦成本會高一些，相對按鈕位置的精確度會更高（在觸摸大屏還沒出現(xiàn)的時(shí)代，我們操作鼠標(biāo)來實(shí)現(xiàn)點(diǎn)擊）。

而移動設(shè)備，隨時(shí)隨地動動手指就可以了。

我們要注意預(yù)留點(diǎn)擊區(qū)域，控制可點(diǎn)擊內(nèi)容的艱巨性。

1.2 設(shè)計(jì)要點(diǎn)

（1）使用場景不同

相對PC端的位置固定，因?yàn)轱@示器種類繁多，窗口也可以隨意縮放，設(shè)計(jì)時(shí)需要優(yōu)先確定頁面的安全區(qū)域，但同樣因?yàn)槠聊淮笏鞋F(xiàn)實(shí)的內(nèi)容相對更豐富。
而移動端的頁面相對就小很多，雖然小但顯得很靈活，很多App賣點(diǎn)就是利用碎片花時(shí)間學(xué)習(xí)、購物、娛樂，對應(yīng)這點(diǎn)的不同，移動端的內(nèi)容會更加精簡。

兩端的閱讀范圍及內(nèi)容長度偏重的也因此不同。

（2）文字大小

Web設(shè)計(jì) ：比較隨意，文章正文字體12px/14px；頁面安全區(qū)域1080px～1280px為宜（一些展示頁面字體會做到16-20px或更大）。

App設(shè)計(jì)：正文30-34px,最小可用28px;注釋及提示行文字20-24px，最小不小于20px。（具體字?jǐn)?shù)根據(jù)24px-36px的字體大小，以及頁邊距來定～）。

（3）Banner

Web設(shè)計(jì)：寬度在1920px,主內(nèi)容區(qū)域（安全范圍）1080px～1280px為宜；
App設(shè)計(jì)：畫面大小根據(jù)比例自適應(yīng)縮放或根據(jù)實(shí)際頁面適配方案調(diào)整安全距離。

2. 反饋方式的不同

相對PC端的位置固定，用戶會在一個(gè)相對平緩的環(huán)境瀏覽頁面，狀態(tài)也會更為專注。誤點(diǎn)擊的概率小，更多的會講究反饋速度和信息的精確度，用戶比較多的是收藏正頁面而不是單獨(dú)的段落。而移動端用戶因?yàn)閳鼍岸嘧?，很多時(shí)候會利用走路，坐車的實(shí)際去瀏覽界面，更容易產(chǎn)生誤操作，也更容易對頁面內(nèi)容產(chǎn)生疲憊感。

Web設(shè)計(jì)：一般對于界面的通知中心,位置相對固定，但較為隱蔽，用戶使用的不多,很難主動喚起用戶。

這里設(shè)計(jì)師需要做的，是將自動呼出的彈窗提示和漂浮窗口這類的“強(qiáng)制”、“粗魯”的提示形式。（經(jīng)常被運(yùn)營要求加個(gè)活動飄窗，價(jià)格在線客服，這類令人反感的交互方式。）

通過一些，相對“隱蔽”、“固定”、“委婉”的方式及擺放位置，在不影響用戶閱讀的前提下進(jìn)行提示交互。

App設(shè)計(jì)：最常見的是系統(tǒng)自帶的推送通知，用戶可主動關(guān)閉通知，當(dāng)然也有嵌在頁面內(nèi)的，因?yàn)槠聊幌拗疲韵鄬W(wǎng)頁更加突出，設(shè)計(jì)師需要思考如何讓用戶更容易“開啟通知權(quán)限”。

3. 側(cè)重的不同

針對不同設(shè)備用戶的不同習(xí)慣，我們在定義兩端的交互內(nèi)容時(shí)也要有所側(cè)重，我們會選擇性的對一些內(nèi)容進(jìn)行隱藏，也會針對設(shè)備區(qū)分同一功能的交互方式。比如：兩端同樣的收藏動作，Web用戶比較多的是收藏整頁，而不是單獨(dú)的段落；因此用戶會較多使用“收藏夾”、下載等方式。

而對App用戶因?yàn)榍袚Q應(yīng)用容易被打斷操作及閱讀環(huán)境的限制，除了選擇一些App自帶的“稍候閱讀”功能外，“截屏”保存或長按收藏就比較實(shí)用了。

3.1 藏功能

平臺，會在兩端分別給用戶不同的功能側(cè)重。就好像工作時(shí)間會更優(yōu)先pc端去處理事情，這是因?yàn)椋琍C端能夠更好的拆解我們的需求，因?yàn)樾枨蟛煌缑娴膫?cè)重功能也會不同。

比如：我們會有在平臺編輯文章并配圖、排版發(fā)布平臺的需求，但是在兩端同時(shí)體驗(yàn)操作后發(fā)現(xiàn)，App任務(wù)發(fā)布的復(fù)雜程度讓用戶難以理解。往往一個(gè)Web頁面就能完成的事情App端需要2-3個(gè)頁面才能完成，加上大段的文字內(nèi)容需要編輯，以及網(wǎng)絡(luò)狀態(tài)原因，讓發(fā)布任務(wù)變得很艱難。

因此，很多App就會拆分兩端的用戶需求，將商家更多的引導(dǎo)去Web去上架貨物;消費(fèi)者則側(cè)重于App，同時(shí)界面會根據(jù)不同端“藏”去一部分的功能。

3.2 藏內(nèi)容

因界面分辨率的差異化，我們也會隱藏一些需求度較低的內(nèi)容元素。比如：我們常說的面包條菜單，其實(shí)就是把Web上常規(guī)的Menu，適應(yīng)智能手機(jī)的操作和顯示特性而做出的變化。

Web網(wǎng)站：以鼠標(biāo)或觸摸板為操作媒介, 常用交互方式有左擊、右擊、hover鼠標(biāo)滑過幾個(gè)操作方式，對應(yīng)這些操作的web端可以將隱藏的元素，（比如解釋類文字，及子菜單等）可以在鼠標(biāo)hover時(shí)或是點(diǎn)擊后才展示出來。

移動App：因?yàn)閷?shí)際面積更手指觸控的關(guān)系，App常用的交互方式有，手指點(diǎn)擊、滑動、捏合等各種復(fù)雜的手勢。同時(shí)在App設(shè)計(jì)時(shí)，多遵循用選擇代替輸入，因此設(shè)計(jì)師需要更多整合信息，并隱藏一些焦點(diǎn)外的內(nèi)容。

3.3 “藏”的設(shè)計(jì)方式

（1）提示

通用-小紅點(diǎn)、提示氣泡、文字字重及變色、展開收起常用提示性符號。

（2）內(nèi)容收起Web網(wǎng)站

點(diǎn)擊下拉、hover下拉。

移動App：滑動拖出內(nèi)容

4. 功能側(cè)重的不同

Web網(wǎng)站：側(cè)重復(fù)雜操作類，例如文本編輯，后臺數(shù)據(jù)上傳下載等，需要大量操作及其他軟件相互協(xié)助的功能。
移動App：側(cè)重相對簡易且場景多變的操作，比如打車，導(dǎo)航等，或是一些適合利用碎片化時(shí)間作業(yè)的功能。

Tips：我們在“藏”的時(shí)候要注意，移動App以單手操作為主，界面上重要元素需要在用戶單手點(diǎn)擊范圍內(nèi)，或者提供快捷的手勢操作。

5. 網(wǎng)絡(luò)環(huán)境的不同

Web使用的是Wifi或是電纜等無限量的高速網(wǎng)絡(luò)，而App則是移動網(wǎng)絡(luò)或是Wifi，網(wǎng)絡(luò)環(huán)境相對復(fù)雜。應(yīng)對這些不同網(wǎng)絡(luò)環(huán)境對應(yīng)的網(wǎng)絡(luò)速度，我們可以通過分頁區(qū)別化和加載區(qū)別化來提高用戶的體驗(yàn)。

Web網(wǎng)站：一般都是點(diǎn)擊進(jìn)入鏈接后從0開始加載，也因?yàn)榫W(wǎng)絡(luò)穩(wěn)定的“先天”優(yōu)勢，讀用翻頁符號來解決分頁問題，也有一些以支撐的網(wǎng)站選擇使用“瀑布流”的方式替代分頁。

比如，花瓣、蘑菇街這類“看圖”的網(wǎng)站，因?yàn)樗阉骱蟮臄?shù)據(jù)格式相同，用戶對同一內(nèi)容興趣關(guān)注度大，停留對比時(shí)間較長，所以優(yōu)先使用“瀑布流”。

移動App：因用戶使用環(huán)境復(fù)雜（可能在移動過程中從通暢環(huán)境到封閉的信號較差的環(huán)境,網(wǎng)絡(luò)可能從有到無、從快到慢）。所以和網(wǎng)站有區(qū)別的是，我們一般通過用戶主動下載、更新的方式來加載主要框架；實(shí)時(shí)的數(shù)據(jù)信息則是在用戶打開App后通過當(dāng)前網(wǎng)絡(luò)加載，也因?yàn)榫W(wǎng)絡(luò)不穩(wěn)定的劣勢，很少有翻頁符號來區(qū)別每頁，反復(fù)刷新加載會造成等待時(shí)間較長。

Tips：注意圖片大小 -加載圖片是對數(shù)據(jù)流量和網(wǎng)速的“巨大”考驗(yàn)，因此，我們在一些運(yùn)營類的項(xiàng)目或者是商場圖片時(shí)，尤其是App圖一定要記得壓縮。我們可以用到tinypng.com等在線壓縮圖片的工具進(jìn)行壓縮，也要提醒開發(fā)小哥哥發(fā)版前記得壓縮圖片。

總結(jié)

交互方式，因?yàn)椴僮髅浇橛兴煌?，所以我們要注意區(qū)分一些狀態(tài)和側(cè)重；
反饋方式，因?yàn)闉g覽環(huán)境和基礎(chǔ)框架不同，所以我們要注意利用各自空間優(yōu)勢進(jìn)行反饋；
側(cè)重功能，因?yàn)楦髯缘牟僮鲀?yōu)勢，我們會對兩端的用戶和功能進(jìn)行劃分，給出不同的產(chǎn)品側(cè)重；

最后是網(wǎng)絡(luò)環(huán)境，因?yàn)閮烧吒髯跃W(wǎng)絡(luò)環(huán)境的優(yōu)劣勢，我們在做頁面布局設(shè)計(jì)的時(shí)候也要作出相應(yīng)的調(diào)整。

雖然現(xiàn)在Web端的網(wǎng)站等在慢慢的被弱化，連鵝廠都放棄了Web端的QQ，但是作為UI設(shè)計(jì)師，對于Web端的基本工還是不能放棄啊～至少App戰(zhàn)勝不了后臺系統(tǒng)！

參考鏈接：

https://www.jianshu.com/p/81d4486bc816《網(wǎng)頁中的字體到底該怎么選擇？》
https://www.jianshu.com/p/cc8916f35d00《用戶界面網(wǎng)頁設(shè)計(jì)原則》

本文由 @Quines 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議

PP最終頁面展示效果（分享、卸載、跳轉(zhuǎn)、關(guān)閉功能）

源碼私vx：codingbb

回復(fù)：app頁面制作1小時(shí)速成

后臺展示

適應(yīng)手機(jī)類型

跳轉(zhuǎn)按鈕可跳轉(zhuǎn)第三方鏈接

舉例點(diǎn)擊微信登錄跳轉(zhuǎn)其他平臺

溫馨提示：本項(xiàng)目需在正常網(wǎng)絡(luò)鏈接下使用

在線咨詢

上一篇：操控DOM：JS改變CSS樣式與HTML屬性的藝術(shù)
下一篇：CSS 父元素中的絕對定位

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商