AAA教育

早些時候，我們已經(jīng)就這個主題分享過不少關(guān)于UI 設(shè)計的想法，今天我們要探討的這個設(shè)計實戰(zhàn)，是一個關(guān)于新鮮食品的設(shè)計案例研究，這個 APP 的核心概念是食譜卡。在這個項目當(dāng)中，主要的設(shè)計師是 Anton Morozov, Ernest Asanov 和 Vlad Taran，他們將會通過分析和探討來尋求最合理的內(nèi)容和導(dǎo)航的設(shè)計。

項目目標(biāo)

關(guān)于烹飪和食譜的移動端APP 的 UI 設(shè)計。

簡介

總的來說，設(shè)計師需要為喜歡烹飪的用戶設(shè)計出一款輔助制作出美食的APP，它應(yīng)該擁有不斷更新的食譜數(shù)據(jù)庫，它還應(yīng)該具備食材管理的功能，允許用戶根據(jù)家中現(xiàn)有的食材來生成相應(yīng)的菜單，并且針對缺少的食材，生成相應(yīng)的購物清單。

根據(jù)客戶的偏好，這款應(yīng)用應(yīng)該包含下列的功能：

必須的功能

• 搜索欄
• 過濾按鈕（包含相關(guān)結(jié)果數(shù)量和相應(yīng)的過濾的信息）
• 食譜卡片（食譜圖片+標(biāo)題）

可選功能

• 具體的食譜，各種食材的用量和配比
• 烹飪時長
• 卡路里
• 用來關(guān)閉和隱藏食譜的X按鈕
• 添加食材到購物清單的按鈕
• 喜歡/保存 按鈕
• 提供食譜的用戶信息
• 食譜的評分
• 喜歡這個食譜的用戶的數(shù)量
• 主要成份
• 分享按鈕
• 食譜的來源和鏈接
• 考慮使用哪種樣式來呈現(xiàn)食譜，網(wǎng)格還是單列

主要問題

客戶為設(shè)計團(tuán)隊所提出的需求和構(gòu)思當(dāng)中，包含了大量的信息和想法，設(shè)計師必須通過分析優(yōu)先考慮所有的要點，因為將屏幕填滿信息導(dǎo)致過載的風(fēng)險很高。在研究和分析的基礎(chǔ)上，通過創(chuàng)建用戶使用場景來判斷食譜當(dāng)中哪些信息最重要。

 

解決方案的探索：優(yōu)點和缺點

設(shè)計師為食譜卡的展示制定了幾個不同的方案，這些方案的核心都是讓有限的移動端界面盡可能有效地、高效地展示核心數(shù)據(jù)?？紤]到食譜卡是整個交互中的關(guān)鍵因素，并且最終設(shè)計師決定平衡好邏輯和情感，希望在可用性、可導(dǎo)航性和視覺美學(xué)之間找到平衡點。嘗試了不同的方向之后，設(shè)計師設(shè)計出了3種不同的內(nèi)容布局方案。其中，創(chuàng)意團(tuán)隊必須基于目標(biāo)受眾的期望找到最接近的一個。

方案A：使用列表來展示食譜

• 優(yōu)點：可以將盡可能多的內(nèi)容展示在屏幕上。
• 缺點：圖片看起來太小了。

方案B：以卡片來展示食譜（類似Pinterest）

• 優(yōu)點：卡片有著極大的靈活度，它的高度可以輕松匹配不同類型的內(nèi)容和信息。
• 缺點：由于采用了雙列布局，每列的寬度都比較窄，而諸如添加食材到購物車等交互，主要是依靠長按卡片來觸發(fā)，這些交互是隱藏的，對于用戶并不夠顯著和友好。

方案C：大食譜卡片設(shè)計

• 優(yōu)點：圖片可以極大的吸引用戶的注意力。
• 缺點：屏幕上一次只能顯示一個食譜卡片，對于用戶而言，附加的功能和交互依然不夠明顯。

最終的解決方案

創(chuàng)意團(tuán)隊最終傾向于方案C，較大的卡片設(shè)計讓產(chǎn)品擁有更強有力的視覺吸引力，而這在競爭中有著明顯的優(yōu)勢。同時，這也有助于搜集反饋，分析數(shù)據(jù)，這些數(shù)據(jù)可以作為下一個階段的設(shè)計基礎(chǔ)，用來提升用戶體驗?；瑒涌ㄆ鶐淼奈⒔换ノ⒚疃鴥?yōu)雅，其后可以隱藏更多的交互和操作，以及附加的功能。

 

其他的細(xì)節(jié)：過濾器

由于不同的食譜千差萬別，用戶需要通過過濾器來篩選食譜，用戶則可以通過這個功能找到更加適合自己的食譜。比如可以選擇僅使用當(dāng)前已有食材的食譜，這樣用戶就無需采購也能置辦上一桌子的好菜。過濾器為用戶提供了更多的便利。

結(jié)語

在蘋果公司，創(chuàng)建產(chǎn)品的時候「我們要問的第一個問題是我們希望人們感受到什么」。在創(chuàng)建數(shù)字產(chǎn)品之前，并不是每個人都認(rèn)為產(chǎn)品設(shè)計和用戶的情緒是息息相關(guān)的，然而事實上并非如此。用戶的情緒和感受才是重中之重，再努力尋求產(chǎn)品的功能和體驗，也不能忽視用戶的情感需求。