本文針對(duì)各種食譜卡片的內(nèi)容和導(dǎo)航方法進(jìn)行研究分享，希望能夠給你帶來啟發(fā)和思考。

長(zhǎng)興網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)建站！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)建站于2013年開始到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)建站。

好的食物帶來好心情 — 經(jīng)過數(shù)百年的進(jìn)化，對(duì)于大多人來說這是值得肯定的。吃飯占人類大部分的時(shí)間和活動(dòng)，食物已成為科技進(jìn)步的熱門話題之一。

移動(dòng)和網(wǎng)絡(luò)可以解決與食物有關(guān)的多種問題：網(wǎng)絡(luò)和餐館應(yīng)用程序、食譜應(yīng)用程序和社交網(wǎng)絡(luò)、食物訂購和食品外賣應(yīng)用程序。無論用于食品應(yīng)用程序的UI設(shè)計(jì)的目標(biāo)是什么，當(dāng)它看起來不僅好用而且看起美味具有吸引力時(shí)，就可以認(rèn)定為一個(gè)很酷應(yīng)用。

之前，我們已經(jīng)就這個(gè)主題分享了許多關(guān)于界面設(shè)計(jì)的想法。今天讓我們介紹一個(gè)新鮮食品應(yīng)用程序設(shè)計(jì)案例研究結(jié)果，這次專注于幾個(gè)食譜卡片概念。在這個(gè)項(xiàng)目中，Tubik 的設(shè)計(jì)師Anton Morozov, Ernest Asanov 和 Vlad Taran 進(jìn)行了本次實(shí)驗(yàn)和分析，針對(duì)各種食譜卡片的內(nèi)容和導(dǎo)航方法進(jìn)行研究。

項(xiàng)目

烹飪和食譜應(yīng)用程序 UI 設(shè)計(jì)

簡(jiǎn)介

總的來說，設(shè)計(jì)師們有責(zé)任為熱愛烹飪的用戶設(shè)計(jì)一款食品應(yīng)用程序。它包括不斷更新的食譜數(shù)據(jù)庫。此外，該應(yīng)用程序還有一個(gè)管理員。為了確保 UX 的可擴(kuò)展性，它允許用戶根據(jù)他們目前在家中的用品找到食譜，或創(chuàng)建一個(gè)購物清單來購買缺失的配料。

根據(jù)客戶偏好的簡(jiǎn)介，食譜應(yīng)用程序設(shè)計(jì)必須包含以下功能：

所需的功能

搜索欄

過濾按鈕(有關(guān)結(jié)果數(shù)量和應(yīng)用過濾器的信息)

食譜卡(食譜圖片+標(biāo)題)可選的想法

可選想法

配料的比例與配方所需的總數(shù)量之比

烹飪時(shí)間

卡路里

隱藏該配方按鈕，以便顯示較少的食譜

添加到購物清單按鈕

喜歡/保存按鈕

食譜作者和他/她的個(gè)人資料照片

評(píng)分

喜歡的數(shù)量

主要成分

分享

直接鏈接查看配方來源

考慮配方飼料的哪種布局最適合，網(wǎng)格與單列。

問題

在主屏幕一次提供了大量的信息和想法。設(shè)計(jì)師需要分析并將所有要點(diǎn)劃分優(yōu)先級(jí)，因?yàn)榇嬖谄聊贿^載的風(fēng)險(xiǎn)。在研究和分析的基礎(chǔ)上，創(chuàng)建用戶場(chǎng)景以確定哪些食譜中的食物信息最重要。

解決方案探索：優(yōu)勢(shì)和劣勢(shì)

設(shè)計(jì)師們?yōu)槭匙V卡演示文稿制定了幾個(gè)選項(xiàng)，可以在移動(dòng)屏幕的有限空間內(nèi)有效顯示核心數(shù)據(jù)?？紤]到配方卡片是主要的互動(dòng)元素，最后的決定必須基于邏輯和情感的平衡，有效的導(dǎo)航和美學(xué)滿意度。嘗試了不同的方向后，設(shè)計(jì)師在根據(jù)所需展示的內(nèi)容，確定了3種布局。創(chuàng)意團(tuán)隊(duì)可以根據(jù)目標(biāo)受眾期望選擇相應(yīng)的布局樣式。這里是選項(xiàng)。

a)以清單顯示的食譜

優(yōu)勢(shì)：可以在屏幕上顯示更多內(nèi)容。

劣勢(shì)：照片內(nèi)容看起來太小。

b)以卡片顯示食譜(像 Pinterest)

優(yōu)勢(shì)：卡片的動(dòng)態(tài)高度允許放置任何長(zhǎng)度的標(biāo)題的照片

劣勢(shì)：筆記和其他元素的列太窄。諸如將食譜添加到購物清單中的卡操作，隱藏類似的食譜以及將食譜分享到社交、網(wǎng)絡(luò)導(dǎo)致應(yīng)用長(zhǎng)按/力觸摸，這對(duì)于用戶來說不是最明顯的解決方案。

c)大食譜卡片

優(yōu)勢(shì)：照片內(nèi)容吸引的關(guān)注。

劣勢(shì)：屏幕只有一個(gè)食譜，附加功能對(duì)用戶來說仍不明顯。

最終解決方案

創(chuàng)意團(tuán)隊(duì)傾向于第三個(gè)版本，大咖片為情感和審美提供了空間。面向市場(chǎng)，產(chǎn)品必須最終具有吸引力。這將有助于收集反饋和分析數(shù)據(jù)，這些數(shù)據(jù)可用作下一階段創(chuàng)造性探索解決方案，以及增強(qiáng)用戶體驗(yàn)的基礎(chǔ)。在第一次交互期間不顯眼且優(yōu)雅的動(dòng)效，將提示隱藏在卡下并可向下滑動(dòng)的附加功能。

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

過濾器面板允許用戶整理食譜列表。用戶可以預(yù)設(shè)：例如，盡顯示適用于當(dāng)前食材的食譜。此外，過濾器可以用戶自定義定制。面板放置在屏幕的底部，為應(yīng)用程序的操作增加了更多便利。

底線

在Apple中，他們說：“我們要問的第一問題是我們希望用戶感受到什么?”在開始創(chuàng)建新的數(shù)字產(chǎn)品之前，并不是每個(gè)人都認(rèn)為這些問題與用戶的感受和情緒有關(guān)。如今大多數(shù)設(shè)計(jì)師都在追求功能。然而，用戶的感受和情緒才是重中之重，產(chǎn)品才能具有讓用戶喜歡的功能和細(xì)節(jié)。

當(dāng)前題目：美食應(yīng)用中，食譜卡片視圖設(shè)計(jì)
網(wǎng)站路徑：http://weahome.cn/article/chdhjp.html