設計實戰!這款幫你科學養護綠植的APP是怎樣設計出來的 - 優設-UISDC

                                        設計實戰!這款幫你科學養護綠植的APP是怎樣設計出來的

                                        2018/01/31 7307評論區

                                        現如今,我們的日常生活和各種各樣的APP密不可分。常用的諸如日歷、計算器、待辦事項列表輔助我們管理生活中的各種事物,不同的細分領域和不同的需求則可以使用各式各樣的APP來應對。其實就和GTD一樣,使用APP來作為自己的輔助工具來進行管理,無需過多占用自己的精力。

                                        而今天的設計實戰案例,則是一款針對細分功能的iOS平臺的APP,它是一款幫助用戶管理植物澆水頻率的創意應用。

                                        項目簡述

                                        這款iOS 平臺的應用將會跟蹤植物生長過程,提醒用戶及時澆水,設計師需要為這款應用設計用戶界面和交互。

                                        預處理

                                        日常生活中需要處理的事情太多了,因此忘記給自己所養的綠植澆水是非常常見的事情。為了讓自己所養的植物能夠茁壯成長,不會因為澆水施肥不及時而出狀況,設計一款能夠幫助用戶管理這一任務的APP。這款APP能夠幫助用戶有效地管理家中或者辦公室中的植物,通過提醒,讓用戶在合適的時候澆水,并保存相應的數據。

                                        正如同在之前的諸多UX設計的文章中所提到的,高質量的用戶界面通常應該足夠和諧,并且滿足下面4種基本的要求:

                                        • 可用性:APP 應該便捷,清晰,合理,易于使用
                                        • 實用性:APP 應該為用戶提供有用的內容,并且幫助用戶解決實際問題
                                        • 可訪問性:APP 能夠適用于不同的場合,應對不同類型用戶的需求
                                        • 可欲性:APP 應該應該有吸引力,能夠解決問題,能夠留住用戶,創造讓他們想要不斷回來的積極的用戶體驗

                                        在這些要求之下,Tubik Studio 選擇讓設計師 Anton Morozov 在藝術總監 Ernest Asanov 的指導下來設計這款APP。為植物澆水進行管理和規劃是一個相對小眾的需求,但是在對生活品質有所要求的用戶群體當中,它的市場并不小。相應的,這款APP 應該有著引人矚目的視覺設計,因為它在日常生活中使用頻率不會太低。所以,設計師應該讓它看起來足夠優雅,使用體驗上要給人一種成熟老道的感覺,滿足用戶對于品質和審美的需求。

                                        設計過程

                                        在繪制UX線框圖的時候,設計師為這款APP 規劃了如下的基本功能:

                                        • 在APP 內添加新的植物
                                        • 為用戶推送通知,提醒他們為植物澆水
                                        • 對于特定的植物,為用戶提供特定的養護信息和建議
                                        • 為用戶提供未來一周的澆水和養護的計劃,并統計數據

                                        接下來,我們看看整個應用的布局是怎么設計的,并且為了計劃內的功能設計師是如何設計整個APP的交互流程的。

                                        首先,用戶在這個界面可以將自己所擁有的植物添加到目錄當中。在下圖當中,用戶所添加的不同的植物分別在不同的選項卡中顯示,標簽上會顯示相應的植物的名稱,而在下一次需要澆水的時候,標簽上會顯示相應的提醒通知。標簽的右上角會用水滴的圖標標識出這一植物需要澆水了,而澆過水的植物的標簽上,則會顯示一個勾,標識出它已被澆水的狀態。

                                        這一的信息組織方式讓用戶可以在當前屏幕下,快速獲取每一種植物的當前狀態,是否需要澆水。而每個標簽的背景都使用了特定植物的圖片,在視覺上有了更為明顯的分辨。如果用戶想要添加新的植物,則只需要添加一張照片,就像在下圖上所看到的那樣。

                                        進入每個植物對應的子界面之后,底部會有一個功能強大但足夠件的標簽欄,它包括有三個最基本的交互區域:“我的植物”(My Plants)會打開澆水追蹤的目錄,“新添加”(Add New)按鈕則讓用戶可以添加新的植物,而“我的資料”(My Profile)則讓用戶可以查看相應的歷史資料和統計數據。

                                        添加植物只需要很短的時間。當用戶使用移動端設備給植物拍照的時候,APP 會通過影像識別所拍攝的植物類型,并且通過后臺的數據庫調處相應的數據,包括植物的名稱、專門的植物圖片和植物相關的養護的條件、數據等。這當中,最主要的數據包括溫度、濕度和光照率。添加植物之后,用戶可以在自己的列表當中看到它的當前狀態。如果APP 的數據庫中沒有相應植物的數據,那么用戶還可以手工添加,創建一個新的項目,并且添加在APP 的數據庫當中。這種設計有幾個好處,首先它會增加APP 本身的拓展能力,可以讓用戶產出內容,另一方面,它會通知APP 的開發者,并且讓他了解數據庫當中要完善哪些數據,讓用戶可以更加順暢地使用產品。

                                        下面的動畫展示了上述的交互過程:

                                        接下來,我們看看 APP 跟蹤用戶澆水的一些細節設計。當植物需要澆水的日期到來的時候,APP 會發送通知,督促用戶澆水。打開植物對應的頁面,用戶會看到:

                                        • 用戶會在屏幕的上半部分看到植物的名稱和背景圖片
                                        • 頁面的中間有標簽式的交互區域,可以快速切換到其他的待澆水的植物頁面
                                        • 屏幕下方有對比度不那么高的標簽導航,還有抽屜控件,拉開可顯示植物的相關信息

                                        在頁面中間的交互區域不僅可以快速切換到其他的植物的頁面,而且還可以繼續展開。展開之后,會顯示本周的澆水進度表,你可以看到有待完成的工作量有多少。這個模塊的展示背景是黑色的,這使得信息圖的展示有足夠的對比度,且足夠時尚。在信息圖的展現上,通過結合加粗的非襯線體,使得信息的可讀性非常強,對于整個布局的視覺層次也有了提升。

                                        當用戶收到提醒,并且為植物澆過水之后,只需要點擊水滴圖標,它的狀態就會變成對勾,表示已完成操作。

                                        設計師還加入了微妙的動畫,來強化交互反饋,讓整個界面的可用性有所增強。

                                        結語

                                        如何解決生活中的各種“簡單”的問題,是設計師所需要面對的永恒的問題。為了設計真正貼合用戶、足以順暢自然解決問題的界面,從來都不是看起來那么簡單的事情,它需要設計師周全地考慮全部的情況,應對不同的場景,還要讓信息自然地呈現,內容高效而又足夠時尚。我們總希望我們的生活能夠更好一點,而這些改變通常需要設計師和開發者花費數倍的努力,來完善和實現。雖然這款應用比較小眾,但是它的設計思路是值得學習和借鑒的。

                                        【2018年設計趨勢,一個都不要錯過】

                                        1. 《2018年,這10個LOGO設計趨勢值得你關注》
                                        2. 《超全面總結!2017年UI設計領域流行過這21個設計趨勢》
                                        3. 《掌握這12個移動端UX設計趨勢,你就掌控了2018年》
                                        4. 《這款獨特的紫色,是為你指引2018年設計方向的年度潘通色》

                                        本文由優設網原創翻譯,請尊重版權和譯者成果,轉摘請附上優設鏈接,違者必究。謝謝各位編輯同仁配合。

                                        ================明星欄目推薦================

                                        優優教程網 UiiiUiii.com 是優設旗下優質中文教程網站,分享了大量PS、AE、AI、C4D等中文教程,為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章,按照我們的專欄一步步學習,一定可以迅速上手并制作出酷炫的視覺效果。

                                        設計導航:國內人氣最高的設計網址導航,設計師必備:http://hao.uisdc.com

                                        優設大課堂

                                        非特殊說明,本文版權歸原作者所有,轉載請注明出處
                                        本文地址:http://www.ndwc.tw/case-study-watering-tracker

                                        發表評論 加載中....

                                        評論加載中....

                                        uisdc

                                        評論區都快餓癟了,看看我期盼的小眼神...

                                        優設大課堂 sketch 轉場動效 界面設計 設計師 扁平化設計 交互設計師 排版布局 職場 平面設計 設計師專訪 素材下載 視覺設計 配色 設計流程 用戶體驗設計 web前端開發 AI教程 海報設計 設計理論 神器下載 字體下載 設計規范 設計趨勢 psd下載 動效設計 產品設計 圖標設計 logo設計 ICON 神器推薦 職場規劃 App設計 字體設計 酷站推薦 交互設計 ui設計 設計師職場 優秀網頁設計 用戶體驗 ps技巧 酷站 PS教程 網頁設計 經驗分享
                                        wechat

                                        優設官方微信

                                        50萬設計師關注

                                        微信號:youshege

                                        把好文章收藏到微信

                                        打開微信,掃碼分享
                                        學設計 優設網 在這里

                                        江苏11选5开奖结果