Category: 設計

雨後新生的植物保姆:新舊設計師對談|Fourdesire 生活遊樂場活動紀錄 #4

《植物保姆》結合「植物養成遊戲」與「喝水提醒 app」,使用者喝下的每一杯水都是澆灌植物的養分,在照顧小植物的同時也照顧自己的身心健康。 2012 年推出的第一代《植物保姆》是 Fourdesire 的第一款產品;六年後,第二代《植物保姆》於 2019 年上線。「Fourdesire 生活遊樂場」當天由兩代《植物保姆》設計師張閔傑與周庫盟進行精彩對談,分享《植物保姆》系列是如何在兩代差異之中維持產 ... READ MORE
Comments Off on 雨後新生的植物保姆:新舊設計師對談|Fourdesire 生活遊樂場活動紀錄 #4

新財務長計畫幕後直擊:誕生過程大公開|Fourdesire 生活遊樂場活動紀錄 #3

《記帳城市》是一款結合城市經營遊戲的記帳 App,希望把枯燥乏味的記帳過程變得有趣,讓使用者經營城市的同時也慢慢累積自己的財產。 《記帳城市》中的進階付費功能「財務長計畫」在今年七月進行了一次重大的改版,「Fourdesire 生活遊樂場」當天由助理製作人龍昀(Sammy)和設計師高安麒(Andy)分享全新「財務長計畫」的設計脈絡。 使用者研究 《記帳城市》於 2017 年推出至今,團隊長期從使用 ... READ MORE
Comments Off on 新財務長計畫幕後直擊:誕生過程大公開|Fourdesire 生活遊樂場活動紀錄 #3

走在登月 50 週年之後:Walkr 的新探險(上)|Fourdesire 生活遊樂場活動紀錄 #1

《Walkr》結合了「計步器」與「星球養成遊戲」,使用者的走路步數會轉換為太空船能量,可以在遊戲中蒐集各式各樣的星球,並和朋友一起組隊冒險。 「Fourdesire 生活遊樂場」當天由設計師范峻瑋(Vincent)和藝術家王立蘋(Sophia)分享《Walkr》即將推出的全新功能以及星球創作的幕後花絮。 《Walkr》5 歲生日與人類登月 50 週年 「阿波羅計畫」星球 《Walkr》自 2014 ... READ MORE
Comments Off on 走在登月 50 週年之後:Walkr 的新探險(上)|Fourdesire 生活遊樂場活動紀錄 #1

透過訪談向使用者學習:以財務長計畫為案例

《記帳城市》於 2017 年初推出,產品最核心的目標是解決大家容易半途而廢的問題,因此,初期開發的功能大多圍繞在「如何讓使用者產生黏著度,並且慢慢養成記帳好習慣」。產品推出至今已經超過一年半,藉由數據和使用者的回饋,我們發現《記帳城市》確實幫助不少人成功的維持記帳,在 2018 年 4 月團隊開始思考:如何提供進一步的功能,讓資深使用者繼續使用? 前情提要:財務長計畫誕生 經過一個半月左右的規劃以 ... READ MORE
Comments Off on 透過訪談向使用者學習:以財務長計畫為案例

用遊戲學習體驗設計:失敗的藝術

認真回想一下,你上次玩遊戲的過程愉快嗎?我不是說體驗,我是說整個過程,過關(或破紀錄、打敗對手)的時候應該讓你感到很興奮,不過不小心掉入陷阱的時候呢?不小心被殭屍抓到所以死掉的時候呢?差一點就可以破紀錄結果手滑的時候呢?我想你應該會冒出很多不同的情緒,懊悔、生氣、有點害怕又想摔手把(手機),可是你也很可能會忍不住想要按下「再來一次」的按鈕,重新挑戰你的對手或關卡。 遊戲設計師 Jane McGon ... READ MORE
Comments Off on 用遊戲學習體驗設計:失敗的藝術

遊戲化產品的用戶引導:以《記帳城市》為例

你是否曾回想,和那些讓你愛不釋手的遊戲初次見面的經驗呢?可愛的角色開場白讓你會心一笑?你是否在玩第一關的時候,經過自然的新手引導而不知不覺了解了玩法?用戶引導(Onboarding)是用戶與每款遊戲或應用程式的第一次約會,而第一次約會體驗的好與壞,決定了用戶與這款遊戲是否還有下次見面的機會(也就是「用戶留存」)。畢竟,遊戲設計師精心刻畫出遊戲的機制、故事或介面,需要玩家穿過遊戲大門,有了滿意的初次 ... READ MORE
Comments Off on 遊戲化產品的用戶引導:以《記帳城市》為例

遊戲化產品與一般工具型產品的設計差異

加入 Fourdesire 之前,在前公司做過的產品都是偏向一般的工具類產品,像是電腦的多媒體影音工具、編修照片的 App 軟體或是會議視訊軟體。會想要寫這篇文章,主要是因為去年一場活動中分享在 Fourdesire 做設計的經驗,有人忽然問說 「設計遊戲化產品和一般產品,最大的不同是什麼」? 遊戲化的產品並不一定會遵循 iOS 或 Android 的系統規範,為了隨著功能和概念希望帶給使用者特別 ... READ MORE
Comments Off on 遊戲化產品與一般工具型產品的設計差異

鼓勵收集並賦予創造力 !《皇室戰爭》讓人玩不膩的秘密

《皇室戰爭》(Clash Royale)是一款免費的手遊, iOS & Android 雙平台都有。該遊戲衍生自《部落衝突》,融合了交換卡片 (CCG=Collectable Card Game) 、塔防和多人連線競技遊戲 (MOBA=Multiplayer Online Battle Arena) 等遊戲元素。由 Supercell 於 2016 年 3 月 2 日全球發行。 開始寫這篇 ... READ MORE
Comments Off on 鼓勵收集並賦予創造力 !《皇室戰爭》讓人玩不膩的秘密

藏於字句間的創作:產品中的在地化翻譯

產品辛苦開發了,但要吸引其他語言使用者的使用,並不是那麼簡單的一件事。即使產品已經在某個國家(例如台灣)有了足夠的使用者數量,也不是翻譯成日文,就會憑空冒出許多日本的使用者。 網路是連結的,但社群不是 許多人會有的迷思,以為網路產業是一個很容易國際化的生意:「上線一個英文官網,蹦!就會有許多英語使用者瀏覽我的英文網站。」事實上,有了英文網站,只代表英語使用者「可以」瀏覽網站或下載 App,但不代表 ... READ MORE
Comments Off on 藏於字句間的創作:產品中的在地化翻譯

設計與工程的相輔相成:如何打造流暢的操作介面

在設計師與工程師的團隊合作過程中,常會面臨到一個問題,就是規劃好的視覺介面與操作流程,在實際程式實作時才發現許多衝突與不完整的地方,產生許多額外的來回溝通時間與修改調整的成本,這通常是因為沒有事先規劃出完整詳細的操作流程 mockup,在wireframe產生後就著手進行視覺設計與雛形開發的分工,就很容易就發生這樣的狀況。 以個人曾經接觸過的案子為例,下圖為其中的兩個主要的頁面(這裡已將視覺完稿轉 ... READ MORE
Comments Off on 設計與工程的相輔相成:如何打造流暢的操作介面

iOS 無邊框按鈕設計的優缺點

導覽列對於多數手機 APP 而言是個很重要的元素,它不但可以讓使用者明確的了解目前所開啟的功能名稱,在許多時候還同時是個放置導航與重點功能的一個區域。 在以往,當導航列上出現可以點擊的按鈕時,設計師在視覺表現上都力求讓用戶知道是個按鈕,直至 iOS7 的設計去材質化設計理念,將這些地方的按鈕的形態去掉、僅剩下符號與文字告知使用者該「按鈕」的功能。 傳統上,大多數的按鈕外觀都被設計成擁有具體的形狀範 ... READ MORE
Comments Off on iOS 無邊框按鈕設計的優缺點

讓設計跟著指尖走:觸控設備上的互動效果

對於網頁瀏覽者來說,按鈕元件的幾種變化可以說是再熟悉不過的一種機制了:一般使用滑鼠瀏覽時最容易感受到的有 Normal、Hover 以及 Active 這三種效果,分別為按鈕平時的狀態、滑鼠游標移到上方的效果、以及點擊按鈕時的效果。 而另外還有一個我們稱為 Focus 的效果,Focus 主要是指使用鍵盤的 Tab 按鍵來「瞄準」網頁上的元件時、被瞄準的那一個元件所顯示的狀態。雖然現在滑鼠已經是操 ... READ MORE
Comments Off on 讓設計跟著指尖走:觸控設備上的互動效果

關於直式中英文排版的幾種可能性

因為中文的方塊組成在排列上具有非常優秀的彈性,因此不論是直書或是橫式的書寫方向都可以很好的適應。在近代為了推行電腦化、讓文字與資訊帶來普及化,橫式書寫的排版方式被廣泛地應用。但其實在許多場合,例如較為著重中文文字表達性的書籍,依舊會使用直式書寫來做排版,在閱讀上具有完全不同的閱讀體驗: 直書跟橫書大不同 中文字使用直式書寫的來由,其實有很多說法,一個最普遍的解釋就是由竹簡發展而來。以比例占較多數的 ... READ MORE
Comments Off on 關於直式中英文排版的幾種可能性

為變動的文字內容做準備

顯示資訊的介面設計與平面的視覺與排版設計最大的不同,就在於文字資訊是變動的(Dynamic),它也是最麻煩棘手的部分,尤其是對於可供使用者輸入的內容。即使在有限制文字長度的的條件下,文字的長短仍然會對視覺與版面有絕對的影響力,我們無法預期使用者會想要輸入僅僅一個字還是漏漏長的整句話,即使是固定的操作資訊如按鈕上的文字,也會受到多國語系的支援而改變長短,因此,不論介面還是視覺設計師,在設計這類的資訊 ... READ MORE
Comments Off on 為變動的文字內容做準備

完美的像素:字體渲染那點事

字體是視覺設計中很重要的一個部分,各種繪圖軟體如 Photoshop 以及 Illustrator 都提供了相當強大的文字編輯工具,可以隨心所欲的製作出各種文字編排。而當我們在使用文字輸入工具時會注意到有一個文字反鋸齒的選項: 針對這個功能,Adobe 原廠對於 Photoshop 的文字反鋸齒說明如下:「消除鋸齒可經由將邊緣像素部分填滿,製造出邊緣平滑的文字,如此一來,文字的邊緣就可以與背景混合 ... READ MORE
Comments Off on 完美的像素:字體渲染那點事

Type on the field below and hit Enter/Return to search