讓設計師規劃 Wireframe 就像疊俄羅斯方塊 — Platforma

林育正 Riven
RAR 設計攻略
Published in
4 min readJun 13, 2018

設計師們在製作UI設計稿前,都會先用低保真的原型線框稿來做一份草稿,以方便釐清架構與團隊溝通,有些設計師們習慣用紙筆、iPad繪製,更進階一點的軟體有 Axure RP;如果公司只有一位萬能設計,他甚至可能用Sketch 或 Adobe XD直接上線框稿。

但近年來針對數位產品設計的軟體如雨後春筍冒出,擁有更多方便的工具,也許能為你或團隊,省下更多的時間,好讓我們更專注於創造殺手級數位產品上,Platforma — 就是一款規劃 Wireframe 的套件工具。

https://platforma.ws/

更快速地製作原型

拖拉式、所見即所得是這個年代要讓使用操作體驗更好的必備元素

在 Platforma 不用再一個一個元件去製作,直接使用 kit套組去拼拼湊湊,更快地完成網頁/app 的線框草圖。

https://platforma.ws/

調整響應式畫面

如果是在瀏覽器上實際上線的網頁,可以透過開發者工具或視窗放大縮小去模擬網頁在不同尺寸間的變化,如果還在介面規劃階段呢?

使用 Platforma做好一個標準尺寸網頁後,運用 Sketch 內建的 Resize功能,可以隨意拖拉至指定尺寸。

https://platforma.ws/

製作原型互動

製作線框稿(Wireframe)很重要的一點是要可以點擊頁面,去模擬實際操作網頁時的感受。

在 Platforma製作好線框稿後,無痛丟到 Invision 、Marvel app等第三方原型製作工具,搭配起來十分有效率。

價格

無論是製作網頁/ iOS, Android APP,都是 $68美金 (約兩千元台幣)即可買斷。

先載來玩玩看吧!

試用Web試用iOS試用Android,輸入信箱就可以取得線下檔案。
試用版僅有第一格可操作,其他皆為圖片而已。
支援目前主流 UI 介面設計工具。

如果是想要直接產生 HTML/CSS source 檔案,可以來玩玩看這個

直接從左邊的選單列就可以拉出線框稿模組。

文中提及之軟體一覽

更多設計相關內容都收錄在 《從 Adobe XD 入門網頁設計》
噢開心就拍手 Dribble

感謝您的閱讀!若這篇文章對你有幫助的話,可以拍手來點掌聲哦!是我繼續寫作的動力 :)

拍手「1下」:閱。
拍手「10下」:覺得不錯。
拍手「20下」:相當實用。
拍手「51下」:聽說在一秒內拍完可以突破極限到第51下哦!
51下是開玩笑的啦XD Pinterest

日常的小分享或生活動態都在 個人臉書 歡迎追蹤!

相關合作洽談請來信至:riven@monospace.tw

我是Riven 我們下次見囉~!

--

--

林育正 Riven
RAR 設計攻略

是數位遊牧型態的設計師💻 喜歡邊旅行邊工作的生活,逐網路、插座與咖啡而居。期待能夠將艱難的設計與開發技術,用麻瓜都能夠聽得懂的話,說給每一個人聽。更多關於我:riven.design