prott-hiiir

時間軸科技 (Hiiir) 如何選擇與使用原型工具來打造軟體產品

時間軸 (Hiiir) 是一間集數位行銷、電子商務與行動 APP 服務的科技公司,除了推出網頁端的服務外,也開發了許多 APP,如 “巷弄"、"friDay 購物" 和 “CareMmyPet" 等。他們在開發這些產品時,皆使用大舌頭之前也有介紹過的 Prott 來製作原型,以確保內部溝通順暢與概念的測試。也因此,Prott 團隊特地針對時間軸使用 Prott 的流程及感受,規劃了一場精彩訪談,而讀者們也能透過訪談內容得知科技公司內部是如何選擇原型工具,以及在設計過程中使用原型能帶來的效益。

Continue reading

學習 Framer

設計師 學習 Framer 第一章:前言與觀念

大約去年年中,我開始把 Framer 這套原型製作工具,導入 UI / UX 設計流程中。最主要是它能實現高擬真度,且可運用 Coding 做出許多設計變化(彈性大)。不過,也因為需要一些 Coding 的基礎知識,導致許多設計師不敢接觸,個人覺得有點可惜。所以在 " 設計師 學習 Framer " 這系列裡,我將會從設計師的角度跟大家分享一些學習心得,然後盡可能的把 Coding 這部分降到最低,以利大家學習。

Continue reading

UI_Flow_Prototyping_00

現今 UI 設計流程 中少不了的 Prototyping !

關於 prototyping(原型)設計,前陣子剛好在 hpx 的活動中有簡單的分享自己 prototyping 的經驗與想法,而這幾年也越來越多新的 prototyping 工具,對於介面設計師來說是喜憂摻半,喜是又有新的工具可以玩,憂則是又要花時間學新的工具,而且那麼多工具到底要如何選?而且也很難保證這些工具是不是能夠一直更新下去,如果停止更新那不就白花時間了…

其實每個工具都各有優缺點,但就目前的共識是,一個理想的 prototyping 工具,必須是容易被整合到介面的開發流程,同時又要能用來達成有效溝通的目的;而「溝通」與「體驗」就是 prototyping 的本質,如果兩者都能兼具,那就是一個合適的 prototyping 工具了。

Continue reading

prototyping_00

快速驗證概念、節省開發成本的方法 – Prototyping

你是否常在腦中蹦出幾個創新的想法?而你又是如何將這些想法,分享給團隊或提案給上司呢?應該大部分的人都認同,這些想法很難以文字、圖片或簡報的形式呈現,因為要讓人理解你的想法,需要陳述相當多的東西,例如情境、操作或流程等。因此,想要將想法正確與精準的傳達,最好的方式就是要「具體呈現」。

另外,是否常在創意是否運行之前,開了無數次的開發會議呢?甚至,常不清楚使用者對產品的感受前,就已經耗費大量的精力與成本在製作了呢?如果有以上的問題,建議在開發流程中導入「Prototyping – 原型」這個概念與方法。

Continue reading

Mobile-App-Design

使用 sketch 改善網頁前端與設計的標註與合作方式

本篇文章轉載自 使用 sketch 改善網頁前端與設計的標註與合作方式,已獲得作者 patw 的授權轉載。文章主要是以開發人員(RD)的角度切入,介紹團隊開發產品時,所常遇到的總總問題與痛點(UI 設計 的標註、協作、溝通 …),並透過不同軟體間的搭配來改善開發流程所遇到的痛點,這些  UI 設計 工具包含了繪製 UI 的 sketch,輔助標註  UI 設計 所有元件尺寸的 Zeplin,實現頁面之間互動的 inVision,文章中會針對這些軟體做進一步的介紹,讓我們一起來看看吧!

前言

身為一名網站前端工程師,關於「工程師與設計師如何進行合作,進而能完成更好的作品」一直是個讓我感興趣的議題。當然這個議題範圍相當廣泛,從規格規範工作流程、彼此的換位思考,到各式能提昇效率的工具等等。

去年認識了幾位網頁設計領域相關的朋友,在工作之餘的分享小聚中,得知「Sketch app」這個好用的應用程式,它似乎能改善工程師與設計師合作時遇到的許多痛點。今年才來介紹 Sketch 是有些 Lag,不過還是紀錄一下我的試用過程吧。

Continue reading

wireframe tool for apps

無論是 web app wireframe tool 是設計師與 RD 或客戶討論一定要使用到的工具,尤其是以 Design Driven 與講求效率的公司所必備的,因為 wireframe tool 有快速、真實感的特性!

今天要介紹兩款 wireframe tools(POP 屬於 wireframe tool,而 flinto 屬於 prototype 工具),它們的功能都非常齊全、夠用,但使用的時間不太一樣。一款是台灣團隊研發的 POP — Prototyping on Paper,另一款則是 flinto

POP — Prototyping on Paper

wireframe tool

圖片來源:POP 官網

POP (wireframe 用)是一款講求 概念發想初期時,大家動筆畫出概念原型,並將草圖拍成照片,藉由 POP 將相關頁面連結,呈現功能與頁面的關聯性,進而討論,如此一來,可以藉由操作的過程中發現更多使用上的問題與產生更多想法,概念便會更清楚。

Continue reading