:::

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

31-PAW_Frame_Mockup_Add_browser_phone.png

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

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

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


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

content_6927f94f-76c4-468e-b79e-2d90a0f5c044.jpg

(圖片來源:Elevon)

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

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

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

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

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

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

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


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

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

避免混淆 / Avoid confusion

2020-11-28_231909.png

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

2021-0627-161511.png

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

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

2021-06-27_161548.png

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

2021-0627-162539.png

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

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

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

image_53_.png

(圖片來源:布丁布丁吃什麼?)

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

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

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

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

tablet-portrait-0627-1622.png

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


現有的加框服務 / Frame mockup services

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

MockuPhone

2021-06-27_172030.png

(圖片來源:MockuPhone)

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

Screenshot_20190110-150716_pixel_quite_black_portrait.png

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_jqq9ntyb.jpg

(圖片來源:布丁布丁吃什麼?)

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

2021-0627-170827.png

(圖片來源:SMARTMOCKUPS)

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

BrowserFrame

2021-06-27_170233.png

(圖片來源:BrowserFrame)

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

2021-0627-171447.png

(圖片來源:BrowserFrame)

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

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


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

2021-06-27_195320.png

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


操作步驟 / How to use Responsive Frame Mockup

pulipulichen.github.io_Responsive-Frame-Mockup_index.html_Blog_Image_.png

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

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

blog.pulipuli.info__m_1_Pixel_2_.png

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

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

anime.gif

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

2021-0627-201940.png

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

3. 選擇邊框 / Choose a frame

2021-06-27_203118.png

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

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

4. 調整設定 / Options

2021-0627-202759.png

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

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

5. 下載 / Download

2021-0627-205014.png

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

browser-0627-2050.png

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

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

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

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

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

phone-portrait-0627-2052.png

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

tablet-portrait-0627-2054.png

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


結語 / Conclusion

browser-0627-2105.png

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

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


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

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

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

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

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

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

總共2 則留言 ( 我要發問 , 隱藏留言 顯示留言 )

  1. 全螢幕 ~ 用 Print Screen
    部分區塊 ~ 用 Line 或 Firefox 截圖
    超出螢幕的全頁網頁 ~ 用 Firefox

    回覆刪除
    回覆
    1. To 灰鴿,

      哇,是LINE跟Firefox的愛用者呢!

      然後你也是本BLOG第一個回應問題的人喔!
      恭喜你!給灰鴿頒發「布丁之友」榮譽徽章一枚~

      刪除