駭客松經驗談:一天內完成 app 設計

上禮拜我和一群工程師參加了在香港舉辦的 AngelHack ,那是個滿奇妙的經驗。經過了一連串的討論,我們決定要開發個簡易、社區型的聊天 app ,Ripple。
評論
評論

本文作者為 heyzap.com 的 UI 暨 UX 設計師 Meng To ,原文 From Design To iOS7 Prototype 。

上禮拜我和一群工程師參加了在香港舉辦的 AngelHack ,那是個滿奇妙的經驗。經過了一連串的討論,我們決定要開發個簡易、社區型的聊天 app ,Ripple。

待解決的問題

那天我們坐在一起,彼此分享我們的工作流程和想法,其中碰到一個相當艱難的考驗。我從共事過的對象只有少數人是工程師,而在那裡沒有簡單的管道,沒辦法馬上開一個群組聊天室,我們必須仰賴聊天工具: Facebook、 Skype 或 WhatsApp ,最終我們選了 Facebook 。所以我們先要找尋彼此的 Facebook ,接下來還要開群組聊天,但還是得努力,因為我們需要頻繁的交換意見。經過了五分鐘的開啟網頁,又五分鐘的登入手續,我們終於設定完成。這一來一往就多花了 9 分鐘又 55 秒。

另外我們原本也想用 Skype ,但在香港沒人用它;而雖然 WhatsApp 在香港非常受歡迎,但需要分享電話號碼或 E-mail ,打 E-mail 地址很麻煩,而人們又對跟剛認識的人交換電話有所顧忌。以上的這幾個工具都有同樣的問題:對新手來說,註冊手續太繁複了。如果你之前沒有接觸這類產品的話,你很難會有加入聊天的衝動。

所以我們的 app 註冊手續很簡單,提供簡易的聊天體驗。我們的目標是在使用者下載完 app 完的五秒內,就可以馬上和身邊的人開始聊天。

針對 iOS 7 的設計

這是我第一次為 iOS7 設計,但我快速選了一種風格,因為它著重裸色、漂亮的 icon 和字體。我為 Ripple 做的第一件事就是挑藍色為主色,然後我想再加一些深淺度和顏色組合,我只是下載了幾個桌布,再把它們弄糊,看看它們和藍色配部配。字體方面,我選了 Museo Sans。而 icon 我猜 PixelLove 滿符合 iOS7 的設計語言。

iOS7 的設計語言

我用了 Sketch 將近一年,我很高興的說,它減少了我大約一半的設計時間,讓我能花更多時間在動畫和功能上。在程式設計的部分(我等等會分享到),我增加了更多時間。為了設計 iOS 介面和 icon ,我大多使用 Artboards ,而 The Sketch Mirror 這功能讓我在 iPhone 上能快速查看我的設計。

使用 Sketch 中的 Artboards ,以相對應的尺寸和位置輸出

註冊頁

我想要開發一套簡短的註冊流程,為了簡單起見,唯一需要的資訊是使用者名稱,但是單有名字不會創造出有趣的聊天經驗。這時候,我的靈感動到了 iOS7 的攝影機功能。我發現當你按下攝影,再切換到左下角的「照片」時,攝影頁面會瞬間變模糊。這與我的設計相呼應,成果就是在註冊頁上,放上一張背景照,該照片是模糊的版本。如果你點了螢幕上的名字,聊天鍵盤和清晰的大頭照馬上就會跳出來,就是這樣。

頁面立即跳出,大頭照和模糊的背景

聊天室

一旦你打開這款 app ,迎接你的是一連串由你附近的人,所開設的聊天室列表。如此一來,你不用擔心別人會隨便把你加進去。這就像 Airdrop 一樣,但是是一對多的連接形式。附註一下,我們也討論了使用 Airdrop 的技術快速邀請他人。

聊天頁面

聊天室本身,我則是受到了 iMessage 的啟發,它的視差效果和對話框都非常有趣。我把這個概念也用到了「分享照片」功能,一下就讓聊天室變得更有趣了。此外,我還在旁邊列出了使用者的 Facebook 或 Twitter 。

聊天室的使用者列表會顯示在訊息上方,所以你在聊天的時候還是可以查看聊天室中有誰。

一旦開始了第一次對話,你就可以輕鬆分享聯絡資料。

在這頁面中,使用者可以快速編輯自我介紹、 Twitter 、 Facebook 和 Whatsapp 。

用 Flinto 設計原型

我一定至少跟 10 個在駭客松的人提過 Flinto ,他們全都為之驚艷,使用的開發結果會真的像是個原創 app 。我設計了新頁面,我很快的將他們上傳到 Flinto ,然後與其他人交流。對於要在他們手機上測試流暢度的工程師,這的確是個很大的幫助。使用 Flinto 要將原型轉變成一個真的 app 比較容易,要跟其他人比較設計也很簡單。

使用 Flinto 五分鐘後製作的產品原型

iOS7 app

我很幸運找到了一個喜歡挑戰極限的 iOS 工程師 ,我很喜歡說:「我們可以做這個嗎?我們可以做那個嗎?」然後我喜歡聽到「可以、可以,當然可以。」這總是個好現象。

接著我驚訝的聽到他在工作流程中使用 Storyboard ,許多我接觸過的 iOS 工程師都一點也不想使用 Storyboard。團隊中有一個使用 Storyboard 的工程師,等同開啟了設計師和開發者間的合作,因為 Storyboard 很簡單,設計師也可以使用。這相當於設計師在使用 HTML 和 CSS,而不是開發者。

Xcode 5 中的 Storyboard ,夠簡單了。

在最後驗收成果時,我們設法展示最具挑戰性的:註冊頁和聊天室。我們使用了 Cocoapods 中的各種 library,來現場示範迷濛的圖片和視差效果。至於後台設置,我們則用了 Parse 。不幸的是,由於時間不夠,我們沒有辦法將真實數據應用到 demo app 上,無法這樣呈現給裁判。

鎩羽而歸

最後我們沒將 AppHack 的第一名獎座抱回家,但我們有被選為 26 隊中的前 9 名,想想看我們從來沒和對方一起工作過,加上我們又只有 5 小時可以整合彼此的概念,我們做的還算不錯。我覺得每個點子都滿笨的,因為之前都有人做過了,這是執行不力的問題。

許多人都對我們的註冊頁感到很有趣,而易於使用的設計也獲得不少好評,這對我們的團隊來說是個榮耀。有些觀眾還問我們什麼時候會正式發表這款 app ,這就是我要的反應,因為我設計給人用的產品。

我們會持續簡化,並跟對的人一起合作,一個簡易的 app 無法在一天完成是沒有道理的。


一站串聯智造全環節,Intelligent Asia系列展12/15-18南港雙館登場

年度最大智慧製造實體展覽會「Intelligent Asia 亞洲工業 4.0 暨智慧製造系列展」結合七大工業展,匯集一千多家參展商、超過四千個攤位,展出從製造端到應用端所需之軟硬體設備與整合系統,提供業者改善製程及提升產品附加價值的轉型升級策略。 
評論
評論

隨著國內疫苗覆蓋率逐漸上升,台灣在亞洲地區疫情相對穩定,頻獲轉單效益,在晶片及零組件供應鏈緊繃之下,報價及毛利表現上揚,從而提升廠商投資及擴產的意願。

為提供國內製造業者一站式採購及交流平台,年度最大智慧製造實體展覽會「Intelligent Asia 亞洲工業 4.0 暨智慧製造系列展」將於 12/15-12/18 日在台北南港展覽館一、二館隆重登場!結合「台北國際自動化工業大展」、「台灣機器人與智慧自動化展」、「台北國際物流暨物聯網展」、「台北國際冷鏈科技展」、「台北國際模具暨智慧成型設備展」、「台灣 3D 列印暨積層製造設備展」、「台灣國際雷射展」等七大工業展,匯集一千多家參展商、超過四千個攤位,展出從製造端到應用端所需之軟硬體設備與整合系統,提供業者改善製程及提升產品附加價值的轉型升級策略。

智慧製造全環節 從設計、生產到出貨一展打通

今年系列展以「智慧製造全環節」為主軸,展示從生產至配送的完整流程。3D列印展參展商如揚明光學(3504)、馬路、實威(8416)、元力智庫、三帝瑪、天馬科技、通業技研、三緯、新光合纖(1409)、溢井等,提供研究及開發不可或缺的精密積層製造與掃描機台,同時滿足自造者的設備及耗材需求;模具展集結鉝太、科盛、台灣中澤、梧濟、徠通、台灣日立金屬、海納川、和勤精機(1586)等參展商,展出「T 零量產」概念下的先進模具製造、智慧成型周邊軟硬體及材料應用;自動化展及機器人展指標性參展商如上銀(2049)、Panasonic、三菱、盟立(2464)、ABB、台達電(2308)、所羅門(2359)、廣運(6125)、達明等,因應數位化、遠端化需求提升,提供與時俱進的關鍵零組件與解決方案,並透過串聯整廠設備系統達到監控與虛實整合;服務型機器人專區以緯創(3231)、祥儀、微星(2377)為領頭羊展示無接觸智慧服務,超前部屬人機協作未來生態系;在產品的最後一哩路,由物流展與冷鏈科技展的參展商如和泰豐田、台朔重工、台灣大福、馬來西亞商和樂、中光電、邰利、海柔、海康、研華(2395)、冷研等,展出無人搬運、智慧倉儲、智慧零售及冷鏈配送實際應用案例,解決業者空間、人力仰賴、分揀效率等痛點,進而降低固定開銷;廣泛運用於日常生活及製程各環節的雷射應用,有雷射展參展商和和機械、慶鴻機電、維佳科技、宏惠光電、台灣三軸、台灣創浦,以及台灣板金經營協會專區等參展商為本屆亮點,大秀雷射三大優勢:精微、快速、自動化,提供優於傳統方案的高端技術轉型思維。

展覽同期搭配逾百場專業論壇及研討會活動,「2021國際論壇-製造業變局下的新競爭力」邀請上銀、佳世達、永進、旭榮等傑出業者,針對全球政經貿易多變情勢下的企業投資經營策略做深入探討;「智動化技術人才媒合活動」匯集所羅門、盟立、廣運、士林電機、上銀、新漢、均豪、新代等二十間參展商開出四百多個職缺的現場一對一洽談機會,加速人才交流達到企業與求職者雙贏;模具展與 3D 列印展三大主辦公協會打造「智慧成型論壇」接力發表智慧成型熱門議題,包括:模具產業導入智慧感測技術、透過數位分身實踐 T 零量產、創新射出及成型技術案例、高速 3D 列印醫療應用、表面處理與複合材料等,可降低國內業者導入智慧成型技術門檻,促進知識交流與跨域合作機會。

今年另一大亮點活動「智慧物流論壇」由物流展及冷鏈科技展四大主辦單位攜手主辦,為期四天主題涵蓋:淨零碳排與永續思維、全球供應鏈布局、企業資安防駭、智慧機器人配送、冷鏈與制冷技術、 AI/AIoT/IoT 應用、 5G 混合實境、元宇宙領袖見解、電商未來趨勢等,期望業者可透過國際視野突破傳統觀點,共同提升國內產業競爭力。

Photo Credit:展昭展覽

為使全球參觀者不受距離限制地參與本次展會,並將實體展覽效益延伸到線上,主辦單位展昭公司特別規劃「Intelligent Asia Online線上展覽館」,收納系列展所有參展商與精選展出產品,並搭配一對一即時通訊洽談及視訊功能,提供海外參觀者虛實整合的沉浸式觀展體驗,進一步達到國際交流目的。

參觀預登現已開放,建議事先完成登記以利參觀。展覽現場將依「中央流行疫情指揮中心」防疫規定實施相關配套措施,若有任何變動及調整,將於官方網站公告。

更多展覽資訊請見:www.chanchao.com.tw/IntelligentAsia

本文章內容由「展昭展覽」提供,經關鍵評論網媒體集團廣編企劃編審。