篇文章提到手機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小時速成

后臺展示

適應手機類型

跳轉按鈕可跳轉第三方鏈接

舉例點擊微信登錄跳轉其他平臺

溫馨提示：本項目需在正常網絡鏈接下使用