本文研究和分享各種食譜卡的內(nèi)容和導(dǎo)航方法，希望能給你帶來(lái)靈感和反思。
美食帶來(lái)好心情—經(jīng)過(guò)數(shù)百年的發(fā)展，這對(duì)大多數(shù)人來(lái)說(shuō)是值得肯定的。飲食占人類大部分時(shí)間和活動(dòng)，食物已成為技術(shù)進(jìn)步的熱門話題之一。
移動(dòng)和網(wǎng)絡(luò)可以解決各種與食品相關(guān)的問(wèn)題：網(wǎng)絡(luò)和餐館應(yīng)用程序，食譜應(yīng)用程序和社交網(wǎng)絡(luò)，食品訂購(gòu)和食品外賣應(yīng)用程序。無(wú)論用于食品應(yīng)用的UI設(shè)計(jì)的目標(biāo)是什么，當(dāng)它看起來(lái)不僅易于使用而且吸引美味時(shí)，它可以被認(rèn)為是一種很酷的應(yīng)用。
以前，我們?cè)诖酥黝}上分享了很多關(guān)于界面設(shè)計(jì)的想法。今天讓我們介紹一下新鮮食品應(yīng)用設(shè)計(jì)案例研究的結(jié)果，這次重點(diǎn)介紹幾種食譜卡的概念。在這個(gè)項(xiàng)目中，Tubik的設(shè)計(jì)師Anton Morozov，Ernest Asanov和Vlad Taran進(jìn)行了這項(xiàng)實(shí)驗(yàn)和分析，以研究各種食譜卡的內(nèi)容和導(dǎo)航方法。
項(xiàng)目
烹飪和食譜App UI設(shè)計(jì)
引言
一般來(lái)說(shuō)，設(shè)計(jì)師有責(zé)任為喜歡烹飪的人設(shè)計(jì)食品應(yīng)用。它包括一個(gè)不斷更新的配方數(shù)據(jù)庫(kù)。此外，該應(yīng)用程序還有一個(gè)管理員。為了確保用戶體驗(yàn)的可擴(kuò)展性，它允許用戶根據(jù)他們當(dāng)前的家庭用品查找食譜，或創(chuàng)建購(gòu)物清單以購(gòu)買缺少的成分。
根據(jù)客戶偏好的概況，配方應(yīng)用程序設(shè)計(jì)必須包括以下功能：
所需功能
搜索欄
過(guò)濾按鈕（關(guān)于結(jié)果數(shù)量和應(yīng)用于過(guò)濾器的信息）
食譜卡（食譜圖片+標(biāo)題）可選想法
可選的想法
成分與所需配方總數(shù)的比率
烹飪時(shí)間
卡路里
隱藏配方按鈕以顯示更少的食譜
添加到購(gòu)物清單按鈕
喜歡/保存按鈕
食譜作者和他/她的個(gè)人資料照片
評(píng)分
你喜歡的號(hào)碼
主要成分
共享
直接鏈接以查看食譜來(lái)源
考慮配方飼料的哪種布局最適合，網(wǎng)格和單列。
問(wèn)題
主屏幕上一次提供了大量信息和想法。設(shè)計(jì)人員需要對(duì)所有點(diǎn)進(jìn)行分析和優(yōu)先排序，因?yàn)榇嬖谄聊贿^(guò)載的風(fēng)險(xiǎn)?；谘芯亢头治?，創(chuàng)建用戶場(chǎng)景以確定配方中哪些食物信息最重要。
解決方案探索：優(yōu)點(diǎn)和缺點(diǎn)
設(shè)計(jì)人員有多種食譜卡演示選項(xiàng)可以在移動(dòng)屏幕上的有限空間內(nèi)有效顯示核心數(shù)據(jù)。考慮到食譜卡是主要的互動(dòng)元素，最終決定必須基于邏輯和情感，有效導(dǎo)航和審美滿意度的平衡。在嘗試不同的方向后，設(shè)計(jì)師根據(jù)顯示的內(nèi)容確定了三種布局。創(chuàng)意團(tuán)隊(duì)可以根據(jù)目標(biāo)受眾的期望選擇合適的布局樣式。這是選項(xiàng)。
a）列表中顯示的配方
優(yōu)點(diǎn)：可以在屏幕上顯示更多內(nèi)容。
缺點(diǎn)：照片內(nèi)容看起來(lái)太小。
b）在卡片中顯示食譜（如Pinterest）
優(yōu)點(diǎn)：卡的動(dòng)態(tài)高度允許放置任何長(zhǎng)度的標(biāo)題照片
缺點(diǎn)：音符和其他元素的列太窄?？ㄆ僮?，例如將食譜添加到購(gòu)物清單，隱藏類似食譜，以及共享食譜到社交網(wǎng)絡(luò)，網(wǎng)絡(luò)導(dǎo)致長(zhǎng)按/strong制觸摸，這對(duì)用戶來(lái)說(shuō)不是最明顯的解決方案。
c）大食譜卡
優(yōu)點(diǎn)：照片內(nèi)容吸引了最多的關(guān)注。
缺點(diǎn)：屏幕上只有一個(gè)配方，其他功能對(duì)用戶來(lái)說(shuō)仍然不明顯。
最終解決方案
創(chuàng)意團(tuán)隊(duì)傾向于第三版，大咖啡片為情感和美學(xué)提供空間。對(duì)于市場(chǎng)而言，產(chǎn)品最終必須具有吸引力。這將有助于收集反饋和分析數(shù)據(jù)，這些數(shù)據(jù)可用作創(chuàng)意發(fā)現(xiàn)解決方案的下一階段，也是增強(qiáng)用戶體驗(yàn)的基礎(chǔ)。在第一次互動(dòng)期間，不顯眼和優(yōu)雅的效果將提示隱藏在卡片下方并向下滑動(dòng)的附加功能。
其他細(xì)節(jié)：過(guò)濾器放置
過(guò)濾器面板允許用戶組織配方列表。用戶可以預(yù)設(shè)：例如，顯示適用于當(dāng)前成分的配方。此外，過(guò)濾器可由用戶定制。面板放置在屏幕的底部，為應(yīng)用程序的操作增加了更多便利。
底線
在Apple，他們說(shuō)：“我們要問(wèn)的第一個(gè)問(wèn)題是我們希望用戶感受到什么？”在每個(gè)人開(kāi)始創(chuàng)建新的數(shù)字產(chǎn)品之前，并非所有人都認(rèn)為這些問(wèn)題與用戶的感受和情緒有關(guān)。 。今天大多數(shù)設(shè)計(jì)師都在追求功能。然而，用戶的感受和情緒是最重要的，并且產(chǎn)品可以具有用戶喜歡的功能和細(xì)節(jié)。
UI設(shè)計(jì)案例研究
如果您有興趣在UI/UX設(shè)計(jì)創(chuàng)作過(guò)程中查看更多有用的案例研究，請(qǐng)參閱以下集合。
澆水追蹤器。家庭需求的UI。
家庭預(yù)算App。財(cái)務(wù)用戶界面。
在柏林的夜晚。事件應(yīng)用程序的UI。
大城市指南。著陸頁(yè)設(shè)計(jì)。
溫尼的面包店。電子商務(wù)的UI設(shè)計(jì)。
上層應(yīng)用程序待辦事項(xiàng)列表的UI設(shè)計(jì)。
醫(yī)療保健應(yīng)用。醫(yī)生用戶界面。
婚禮策劃師。 UI設(shè)計(jì)理念。
Toonie報(bào)警。移動(dòng)應(yīng)用UI設(shè)計(jì)。
SwiftyBeaver。適用于Mac應(yīng)用程序的UX/UI設(shè)計(jì)。
原始鏈接：https://uxplanet.org/ui-experiments-recipe-cards-options-in-a-food-app-36dce82d7b01
本文由@Doria發(fā)布。未經(jīng)許可，禁止復(fù)制。
該地圖來(lái)自的，基于CC0協(xié)議