幫操作畫面加個邊框吧！響應式加框網頁工具 / Add a frame on screenshot: Responsive Frame Mockup

6月 27, 2021 Programming/JavaScript , Service/GitHub , Work , Work/Widget 2 Comments Edit Copy Download

呀呵，大家最近在吃什麼呢？這裡是寫論文也要加個框的布丁。

作為軟體開發者，用螢幕截圖的操作畫面來說明軟體功能，是一件相當常見的工作。如果要讓讀者知道你的操作畫面是在什麼裝置上運作的話，為操作畫面加個對應裝置的邊框，絕對可以幫你的文件大大加分。

為了幫博士論文中的系統操作畫面加上瀏覽器的邊框，我開發了Responsive Frame Mockup網頁工具。它可以為任意尺寸和比例的圖片，加上瀏覽器、智慧型手機、以及平板的框架。以下就讓我們來認識Responsive Frame Mockup這個好用的網頁工具吧！

沒工商版面：準好拔延長線 Elevon / Power extension cord: Elevon

(圖片來源：Elevon)

在開始今天的主題之前，立刻就來段沒工商版面啦。

電源延長線是現代人居家必備的用具之一，不過你有想過，好的電源延長線可以提高你的生活效率嗎？為了節能減碳，我們常常會在要用電器時才把它插上插頭，不用時就收下來。但當我們要收拾電器時，總是得要騰出雙手，一手穩住電源延長線，一手握住插頭拔出，非常不方便。如果你常常在這種生活瑣碎事物上浪費了時間，那你一定要來試試準好拔延長線Elevon。

有了準好拔延長線Elevon之後，你只要用一隻手就能插拔電源！準好拔延長線的旋轉開關專利設計，讓你轉動角度就能固定插頭，也能轉動後鬆脫拔出。轉動開關同時也是通電與斷電開關。電器不使用時，轉一下就能順手節能。它背後設計了強力磁鐵、止滑矽膠、雙向掛鉤孔，讓準好拔延長線能夠輕易固定在各種場所。我把準好拔延長線固定在冰箱旁邊，使用任何廚房電器都能一手拔插。真是方便到容易讓人忘記它的存在呢！

綜上所述，準好拔延長線Elevon讓我喜愛的三大特色如下：

1. 旋轉開關專利設計，一隻手就能插拔電源插頭。只轉到OFF也能節能省電。
2. 多種延長線固定設計，吸在鐵櫃、掛在架子上，怎樣都好擺。
3. 支持臺灣在地「Elevon準好拔」團隊，用心設計讓我們的生活更加美好。

準好拔延長線Elevon的相關資訊如下：

• Elevon準好拔延長線網站：https://www.elevon.store/
• 商品購買網頁：https://www.elevon.store/collections/all

網路上已經有很多準好拔延長線Elevon的開箱和使用影片。儘管它部分設計不夠萬用這點為人詬病，但它一手插拔的旋轉開關設計，的確是目前市面上無可取代的特色。好的，讓我們結束沒工商版面，回到今天要講的主題吧。

為什麼我們要為操作畫面加上邊框？ / Why should we add frame to screenshots?

操作畫面加邊框有什麼特別的？我常常使用操作畫面跟文字來說明軟體操作。在撰寫說明的時候，我發現如果為操作畫面的圖片加上邊框，可以帶來兩個好處：避免混淆，以及賦予情境的意義。以下我們用兩個例子，來看看為什麼加框這件事情很重要。

避免混淆 / Avoid confusion

這張圖是我在論文中用來說明系統的原始操作畫面。單看圖片的話，似乎不覺得哪裡奇怪。但是一旦擺到文件裡面，你就會發現奇怪的現象：

上圖是在文件中插入操作畫面的樣子。操作畫面含有大量文字，而且背景跟文件一樣都是白色，因此乍看之下很容易把操作畫面跟文件內文混在一起，造成閱讀上的困難。

現在看我Blog的讀者可能沒有這個感覺。這是因為我預先為文章中的圖片加上了陰影邊框的樣式，所以每張圖都自動帶有陰影，能夠跟其他文字有所區隔。

有些人可能會想，這種小事，我也可以在文件裡面手動幫操作畫面加個簡單的邊框，這問題不就解決了嗎？上圖就是為原始操作畫面加上黑框後的樣子。這樣想並沒有錯，不過既然要加框，那我們可以為操作畫面的邊框賦予更多的意義。

上圖是我用響應式加框網頁工具Responsive Frame Mockup加上瀏覽器邊框的效果。圖片跟內文的區隔，是不是更加一目了然了呢？

賦予情境的意義 / Show the context of screenshots

在資訊架構學 網站應用一書中，作者強調導覽系統是為了避免使用者在網站中迷路的重要設計。因為很多實體世界裡可以用來幫助使用者瞭解所在位置的情境線索，在虛擬的網站站中並不存在。這個道理對文件裡的操作畫面同樣適用。

(圖片來源：布丁布丁吃什麼？)

上面這張操作畫面，是我提出的跨平臺混合應用程式框架中的一張截圖。如果沒有額外的說明、只看圖片的話，你覺得這張操作畫面是在桌面電腦上操作？還是在平板上操作呢？

對UX不熟的工程師多會認為用於電腦和用於平板並沒有什麼差別，反正就是將手指的觸摸對應到滑鼠點擊就可以了。但實際上滑鼠操作跟手指觸控的邏輯有不小的差異，其實不太適合混為一談。

話說回來，熟悉APP開發的人應該發現到了，觀察操作畫面中的各個元件設計方式，我們可以知道上圖是為了平板環境開發的操作畫面。不過如果你對我有些認識的話，就會知道其實那個操作畫面是利用Onsen UI在網頁上構成的Hyper APP，而且實際上是在桌面電腦上運作。

如果你只是直接截圖，甚至把瀏覽器的框也一起擷取，那讀者絕對會搞不懂這到底是桌面電腦上運作的網頁、還是要在平板上運作的應用程式。

為了避免節外生枝，最好的方法，還是在操作畫面旁邊加入一個平板的框，讓它看起來就像是在平板上操作的樣子。

現有的加框服務 / Frame mockup services

網路上其實也有其他的加框功能網站。以下我就來跟大家分享我用過的MockuPhone、SMARTMOCKUPS跟BrowserFrame，以及它們各自的限制吧。

MockuPhone

(圖片來源：MockuPhone)

• MockuPhone：https://mockuphone.com/ 
  

MockuPhone (Mockup + Phone)是我早期使用的圖片加框服務。之前好一陣都在開發行動裝置的應用程式，例如全民樂單字Vock4Fun：單字學習行動應用程式。那時候我就在應用程式的操作圖片上，加上了手機外框。

MockuPhone呈現的效果很漂亮，但實際使用的時候，常常會遇到圖片比例不能符合MockuPhone的問題。現今手機行動裝置的類型太多了，本來說好螢幕比例固定的iPhone，現在也出現了各種尺寸，跟Android陣營一起考驗程式設計師的RWD功力。

實際處理螢幕截取畫面加框時，截取圖片的時候我可能是用SAMSUNG Galaxy S21 Ultra的裝置(解析度是QHD 1440 x 3200，比例1 : 2.29)，但圖片外框可能是使用iPhone 11 Pro (解析度是1125 x 2436，比例是1 : 2.17)。螢幕較長的SAMSUNG Galaxy S21 Ultra塞到螢幕較矮的iPhone 11 Pro裡面時，圖片下方就會被裁切。

SMARTMOCKUPS

(圖片來源：布丁布丁吃什麼？)

• SMARTMOCKUPS: https://smartmockups.com/ 

我另一個常用的加框網站是SMARTMOCKUPS。它並不是單純地加上裝置的邊框，而是提供了許多模特兒操作手機、平板、筆電或電腦等不同場景的圖片，讓你可以上傳螢幕截圖後，直接融合在模特兒操作的裝置上。上圖是我在薑黃喵討摸摸的封面圖片，看起來真的很像有人在使用我的APP，對吧？

(圖片來源：SMARTMOCKUPS)

然而，SMARTMOCKUPS的模特兒操作裝置使用的是固定的大小。我們要塞進裝置的圖片，必須配合裝置的大小來調整。SMARTMOCKUPS提供了延展或裁切的功能，你可以在上傳圖片後適度調整要顯示的圖片內容。不過，如果要完美契合SMARTMOCKUPS圖片中的裝置，那在截圖之前得要先確認理想的圖片比例喔。

BrowserFrame

(圖片來源：BrowserFrame)

如果只是要簡單加框的話，那BrowserFrame可能是個不錯的選擇。它提供了多種不同瀏覽器的邊框。你可以讓你的網站放在Google Chrome、Safari、Firefox等瀏覽器裡面。

• BrowserFrame: https://browserframe.com/ 

(圖片來源：BrowserFrame)

不過BrowserFrame依然會有圖片尺寸的限制。我上傳一個較高的小型圖片之後，BrowserFrame卻把它往左右拉寬，出現了錯誤的比例。

看到現在，現有的加框網站似乎都沒辦法配合操作畫面的比例，自動調整合適的邊框。所以我只好捲起袖子，自己做一個吧。

響應式加框網頁工具 / Responsive Frame Mockup

響應式加框網頁工具Responsive Frame Mockup是我開發的網頁工具。它僅用純前端功能，只在你本機端的瀏覽器中運作。加框時並不會把資料上傳到伺服器。整個網站保存在GitHub上，由GitHub Page提供服務。相關資訊的連結如下：

• 響應式加框網頁工具 Responsive Frame Mockup: https://pulipulichen.github.io/Responsive-Frame-Mockup/index.html  
• GitHub保存庫：https://github.com/pulipulichen/Responsive-Frame-Mockup

操作步驟 / How to use Responsive Frame Mockup

使用Responsive Frame Mockup的操作很簡單。以下說明如何操作。

1. 選擇要加框的圖片 / Prepare a screenshot

選擇一個你要加框的圖片。任何尺寸跟比例的圖片皆可。

2. 上傳到網頁 / Upload image to Responsive Frame Mockup

你可以用拖曳的方式，把要處理的圖片拖到網頁工具上。

此外，你也可以按下「Change Image」按鈕來選擇圖片。

3. 選擇邊框 / Choose a frame

目前Responsive Frame Mockup內建了五種邊框，供使用者任意選擇。請從左上角的下拉式選單選擇。這五種邊框各是：

• Browser：瀏覽器邊框。這裡是以Google Chrome為基底做成的響應式邊框。
• Phone (Portrait)：全螢幕智慧型手機的直立狀態。
• Phone (Landscape)：全螢幕智慧型手機的橫向狀態。
• Tablet (Portrait)：平板電腦的直立狀態。
• Tablet (Landscape)：平板電腦的橫向狀態。

4. 調整設定 / Options

選好邊框後，部分邊框具備可以微調的選項。以瀏覽器邊框來說，這些選項包括了：

• 圖片尺寸(Size)：有時候我們可能會在高解析度的螢幕上截圖。這時候需要縮小圖片尺寸，讓它貼近邊框的比例。
• 背景顏色(Background Color)：圖片小於一定尺寸時，邊框內會露出背景。此時可以設定背景的顏色。
• 捲軸顯示 (Scroll Bar)：可以設定要顯示的捲軸。你可設定只顯示垂直捲軸、只顯示水平捲軸、兩者都顯示、或是兩者都不顯示。目前這個功能只有在Windows環境下能夠正常運作。

5. 下載 / Download

最後就是按「Download」下載。你也可以直接按預覽圖片下載。

這樣就為網頁截圖加了瀏覽器邊框囉！

仔細看的話，你會發現這個瀏覽器邊框是以Windows環境中的Google Chrome瀏覽器為底修改而成。邊框雖然有頁籤、網址列，但是那些位置都已經被預先塗白。邊框上隱藏了會令讀者分心的其他資訊。

許多人都會為瀏覽器畫面直接截圖。但這樣的操作畫面截圖，要不是透露出內部運作的網址，就是把自己使用的書籤暴露出來。姑且不論隱私外洩的問題。當讀者看到你那充滿私人資訊的操作畫面時，其實也很容易想入非非、讀到分心。不過，只要使用Responsive Frame Mockup加上瀏覽器邊框，你就可以輕鬆製作順眼又不奇怪的操作畫面囉。

手機邊框與平板邊框 / Phone and tablet frame

除了瀏覽器的邊框之外，我們也來看看選擇其他邊框會出現什麼結果。

這是手機的邊框。上面的通知列可以選擇關閉。請注意圖片的四個角落會稍微被切割。

這是平板電腦的邊框。平板電腦的邊框比較適合接近正方形的圖片。上面的通知列一樣可以選擇關閉。

結語 / Conclusion

響應式加框工具Responsive Frame Mockup能為圖片加上瀏覽器、手機和平板的邊框，而且邊框會隨著圖片的比例動態調整。使用設計過的邊框，從軟體截圖的作者就不會因此洩漏個人隱私，讀者也能從邊框直覺地理解圖中軟體的使用情境。

有了響應式加框工具的加持，整個圖文說明的品質都能夠大幅提升。搞不好教授看了非常滿意，直接就簽名讓你畢業了呢！(誤)

那麼這次響應式加框工具Responsive Frame Mockup的教學就到這裡了。寫到最後，我來問個加框之前的基本問題：

你都是用什麼工具截取螢幕畫面呢？

• A. 我用Print Screen加小畫家，學長都是這樣教的。
• B. 我用手機的相機給螢幕「screen shot」。分享截圖很方便啦。
• C. 我都用專門截取螢幕畫面的工具。例如FastStone Capture。

歡迎在下面的留言處跟大家分享你的想法。你的意見都是我繼續分享的動力喔！

如果你覺得我這篇實用的話，請幫我在AddThis分享工具按讚，或是將這篇分享到Facebook等社群媒體吧！想在社群媒體追蹤我的話，歡迎到我的Facebook粉絲專頁「布丁布丁吃什麼？」按個讚喔！

不知道這篇文章有沒有讓你吃到什麼有趣的東西呢？我是布丁，期待下次見！