用戶的情緒和感受才是重中之重，再努力尋求產品的功能和體驗，也不能忽視用戶的情感需求。
中國人常說，民以食為天，吃這件事情很重要。好食物往往帶來好心情。人每天的一日三餐是驅動人每天做各種各樣事情的能量來源，食物的好壞直接關系著一天的心情、情緒、狀態甚至工作和生活的點點滴滴，這也難怪食物始終都是熱門話題。而我們同樣常常借助手機和網絡，選擇更好的餐廳，點更好的外賣，或者尋找更加健康的食譜。美食和技術，也一直是緊密關聯的。無論這個和美食相關的 APP 的 UI 背後的設計目標是什麼，它不僅能夠幫助用戶達成目標，而且因為美食的加成，它還有著別樣的吸引力。
早些時候，我們已經就這個主題分享過不少關於 UI 設計的想法，今天我們要探討的這個設計實戰，是一個關於新鮮食品的設計案例研究，這個 APP 的核心概念是食譜卡。在這個項目當中，主要的設計師是 Anton Morozov, Ernest Asanov 和 Vlad Taran，他們將會通過分析和探討來尋求最合理的內容和導航的設計。
項目目標
關於烹飪和食譜的移動端 APP 的 UI 設計。
簡介
總的來說，設計師需要為喜歡烹飪的用戶設計出一款輔助制作出美食的 APP，它應該擁有不斷更新的食譜數據庫，它還應該具備食材管理的功能，允許用戶根據傢中現有的食材來生成相應的菜單，並且針對缺少的食材，生成相應的購物清單。
根據客戶的偏好，這款應用應該包含下列的功能：
必須的功能
搜索欄
過濾按鈕（包含相關結果數量和相應的過濾的信息）
食譜卡片（食譜圖片 + 標題）
可選功能
具體的食譜，各種食材的用量和配比
烹飪時長
卡路裡
用來關閉和隱藏食譜的 X 按鈕
添加食材到購物清單的按鈕
喜歡 / 保存 按鈕
提供食譜的用戶信息
食譜的評分
喜歡這個食譜的用戶的數量
主要成份
分享按鈕
食譜的來源和鏈接
考慮使用哪種樣式來呈現食譜，網格還是單列
主要問題
客戶為設計團隊所提出的需求和構思當中，包含瞭大量的信息和想法，設計師必須通過分析優先考慮所有的要點，因為將屏幕填滿信息導致過載的風險很高。在研究和分析的基礎上，通過創建用戶使用場景來判斷食譜當中哪些信息最重要。
解決方案的探索：優點和缺點
設計師為食譜卡的展示制定瞭幾個不同的方案，這些方案的核心都是讓有限的移動端界面盡可能有效地、高效地展示核心數據。考慮到食譜卡是整個交互中的關鍵因素，並且最終設計師決定平衡好邏輯和情感，希望在可用性、可導航性和視覺美學之間找到平衡點。嘗試瞭不同的方向之後，設計師設計出瞭 3 種不同的內容佈局方案。其中，創意團隊必須基於目標受眾的期望找到最接近的一個。
方案 A：使用列表來展示食譜
優點：可以將盡可能多的內容展示在屏幕上。
缺點：圖片看起來太小瞭。
方案 B：以卡片來展示食譜（類似 Pinterest）
優點：卡片有著極大的靈活度，它的高度可以輕松匹配不同類型的內容和信息。
缺點：由於采用瞭雙列佈局，每列的寬度都比較窄，而諸如添加食材到購物車等交互，主要是依靠長按卡片來觸發，這些交互是隱藏的，對於用戶並不夠顯著和友好。
方案 C：大食譜卡片設計
優點：圖片可以極大的吸引用戶的註意力。
缺點：屏幕上一次隻能顯示一個食譜卡片，對於用戶而言，附加的功能和交互依然不夠明顯。
最終的解決方案
創意團隊最終傾向於方案 C，較大的卡片設計讓產品擁有更強有力的視覺吸引力，而這在競爭中有著明顯的優勢。同時，這也有助於搜集反饋，分析數據，這些數據可以作為下一個階段的設計基礎，用來提升用戶體驗。滑動卡片所帶來的微交互微妙而優雅，其後可以隱藏更多的交互和操作，以及附加的功能。
其他的細節：過濾器
由於不同的食譜千差萬別，用戶需要通過過濾器來篩選食譜，用戶則可以通過這個功能找到更加適合自己的食譜。比如可以選擇僅使用當前已有食材的食譜，這樣用戶就無需采購也能置辦上一桌子的好菜。過濾器為用戶提供瞭更多的便利。
結語
在蘋果公司，創建產品的時候「我們要問的第一個問題是我們希望人們感受到什麼」。在創建數字產品之前，並不是每個人都認為產品設計和用戶的情緒是息息相關的，然而事實上並非如此。用戶的情緒和感受才是重中之重，再努力尋求產品的功能和體驗，也不能忽視用戶的情感需求。
原文作者 : Tubik Studio
譯者 : 陳子木
譯文地址：http://www.uisdc.com/recipe-cards-app-design
本文由 @陳子木 授權發佈於人人都是產品經理，未經作者許可，禁止轉載。
題圖由作者提供
