現如今，我們的日常生活和各種各樣的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