• <bdo id="g6euu"><blockquote id="g6euu"></blockquote></bdo>
    <bdo id="g6euu"><samp id="g6euu"></samp></bdo>
  • 首页 > 网页教程 > 设计分享 > UI设计分享:食谱类APP要如何设计?

    UI设计分享:食谱类APP要如何设计?

    时间:2018-03-12    来源:优设网

    Tubik :中国人常说,民以食为天,吃这件事情很重要。好食物往往带来好心情。人每天的一日三餐是驱动人每天做各种各样事情的能量来源,食物的好坏直接关系着一天的心情、情绪、状态甚至工作和生活的点点滴滴,这?#26448;?#24618;食物始终都是热门话题。而我们同样常常借助手机和网络,选择更好的餐厅,点更好的外卖,或者寻找更加健康的食谱。美食?#22270;?#26415;,也一直是紧密关联的。无论这个和美食相关的 APP 的UI 背后的设计目标是什么,它不仅能?#35805;?#21161;用户达成目标,而且因为美食的加成,它还有着别样的吸引力。

    早些时候,我们已经就这个主题分享过不少关于UI 设计的想法,今天我们要探讨的这个设计实战,是一个关于新鲜食品的设计案例研究,这个 APP 的核心概念是食谱卡。在这个项目当中,主要的设计师是 Anton Morozov, Ernest Asanov 和 Vlad Taran,他们将会通过分析和探讨来寻求最合理的内容和导航的设计。

    项目目标

    关于烹饪和食谱的移动端APP 的 UI 设计。

    简介

    总的来说,设计师需要为?#19981;?#28921;饪的用户设计出一款辅助?#35889;?#20986;美食的APP,它应该拥有不断更新的食谱数据库,它还应该具备食材管理的功能,允许用户根据家中现有的食材来生成相应的?#35828;ィ?#24182;且针对缺少的食?#27169;?#29983;成相应的?#20309;?#28165;单。

    根据客户的偏好,这款应用应该包含下列的功能:

    必须的功能

    • 搜索栏
    • 过滤按钮(包含相关结果数量和相应的过滤的信息)
    • 食谱卡片(食谱?#35745;?标题)

    可选功能

    • 具体的食谱,各种食材的用量和配比
    • 烹饪时长
    • 卡路里
    • 用来关闭和隐藏食谱的X按钮
    • 添加食材到?#20309;?#28165;单的按钮
    • ?#19981;?保存 按钮
    • 提供食谱的用户信息
    • 食谱的评分
    • ?#19981;?#36825;个食谱的用户的数量
    • 主要成份
    • 分享按钮
    • 食谱的来源和链接
    • 考虑使用哪种样式来呈现食谱,网格还是单列

    主要问题

    客户为设计团队所提出的需求和构思当中,包含了大量的信息和想法,设计师必须通过分析优先考虑所有的要点,因为将屏幕填满信息导致过载的风险很高。在研究和分析的基础上,通过创建用户使用场景来判断食谱当?#24515;?#20123;信息最重要。

    解决方案的探索:优点和缺点

    设计师为食谱卡的展示制定?#24605;?#20010;不同的方案,这些方案的核心都是让有限的移动端界面尽可能有效地、高效地展示核心数据。考虑到食谱卡是整个交互中的关键因素,并且最终设计师决定平衡好逻辑和情感,希望在可用性、可导航性和视觉美学之间找到平衡点。尝试了不同的方向之后,设计师设计出了3种不同的内容布局方案。其中,创意团队必须基于目标受众的期望找到最接近的一个。

    方案A:使用列表来展示食谱

    • 优点:可以将尽可能多的内容展示在屏幕上。
    • 缺点?#21644;计?#30475;起来太小了。

    方案B:以卡片来展示食谱(类似Pinterest)

    • 优点:卡片有着极大的灵活度,它的高度可以轻松匹配不同类型的内容和信息。
    • 缺点:由于采用了双列布局,每列的宽度都比?#38505;?#32780;诸如添加食材到?#20309;?#36710;等交互,主要是依靠长按卡片来触发,这些交互是隐藏的,对于用户并不够显著和友好。

    方案C:大食谱卡片设计

    • 优点?#21644;计?#21487;以极大的吸引用户的注意力。
    • 缺点:屏幕上一次只能?#20801;?#19968;个食谱卡片,对于用户而言,附加的功能和交互依然不?#24187;?#26174;。

    最终的解决方案

    创意团队最终倾向于方案C,较大的卡片设计让产品拥有更强有力的视觉吸引力,而这在竞争中有着明显的优势。同时,这也有助于搜集反馈,分析数据,这些数据可以作为下一个阶段的设计基础,用来提升用户体验。滑动卡片所带来的微交互微妙而优雅,其后可以隐藏更多的交互和操作,以?#26696;?#21152;的功能。

    其他的?#38468;冢?#36807;滤器

    由于不同的食谱千差万别,用户需要通过过滤器来筛选食谱,用户则可以通过这个功能找到更加适合自己的食谱。比如可以选择仅使用当前已有食材的食谱,这样用户就无需采购?#26448;?#32622;办上一桌子的好菜。过滤器为用户提供了更多的便利。

    结语

    在?#36824;?#20844;司,创建产品的时候「我们要问的第一个问题是我们希望人们感受到什么」。在创建数字产?#20998;?#21069;,并不是每个人都认为产品设计和用户的情绪是息息相关的,然而事实?#21916;?#38750;如此。用户的情绪和感受才是重中之重,再努力寻求产品的功能和体验,也不能忽视用户的情感需求。

    相关推荐
    20个精致漂亮的视频播放器界面设计欣?#22270;?#28857;评
    视觉设计:页面构建的审图与?#38468;?/a>
    15个超棒的无线移动终端UI设计案例赏析
    响应式网页设计正成为移动互联网大势所趋
    ?#31243;?#30028;面设计中的结构设计
    分享:5招助你打造更加简洁的用户界面
    ?#31243;?#30028;面UI设计中的包容性设计
    国外精彩网页界面设计案例赏析
    Photoshop教程:提高IOS设计效率的30个要诀分享
    网站专题页面的视觉设计及结构布局要点分享
    另眼观看用户界面扁?#20132;?#35774;计的不足之外
    产品视觉设计与用户心理的有趣现象
    10个漂亮实用并附带源码的Web设计教程分享
    优秀移动APP应用图标设计指南
    在视觉设计中对像素的深度解析
    什么是扁平设计?如何创建扁?#20132;?#35774;计风格?
    色?#26159;?#24863;对用户体验设计的影响
    换汤不换药?看应用们如何“为iOS 7设计”
    高效UI设计秘笈 Photoshop CC使用技巧图文教程
    界面设计教程:如何做好扁?#20132;?#35774;计之交互篇
    移动应用图标配色诀窍 APP界面配色设计教程
    产品设计教程:提升用户使用黏性的6个诱惑手段
    扁?#20132;?#22238;归真实的设计
    iOS7用户界面设计的10个准则分享
    UI设计师自学记:抄袭别人,超?#38454;?#24049;
    Windows Phone 8 UI设计指南分享
    APP设计经典:Pinterest的交互?#38468;?/a>
    从引导页设计?#28783;?谈谈如何提高产品体验
    游戏网站设计案例分享:聊?#21738;?#20123;让页面更加出彩的设计
    8个评价UI设计作品好坏的标准
    20个最火爆的Behance网页设计及UI案例解析
    大开眼界!2014年最逆天的UI设计
    界面设计必备:全方位科普常用的字体规范
    手机屏幕尺寸扩展如何影响用户体验设计?
    那些丑丑的应用图标 设计的人是怎么想的
    产品设计:FEEDLY创始人再聊改版实战经验

    精彩推荐

    热门教程

    任选五走势图
  • <bdo id="g6euu"><blockquote id="g6euu"></blockquote></bdo>
    <bdo id="g6euu"><samp id="g6euu"></samp></bdo>
  • <bdo id="g6euu"><blockquote id="g6euu"></blockquote></bdo>
    <bdo id="g6euu"><samp id="g6euu"></samp></bdo>
  • 11选5和快乐十分 今晚广西快乐双彩开奖号码 彩客网足彩比分直播 一码中特三千佛 本期福彩中奖号码 北京快3温都水城 123六合图库大全官网 广西快3视频 七星彩最少投注多少钱 3d和值 湖北30选5开奖查询结果 微信签到一天10元 福建36选7胆拖计算器 福利3d开机号和试机号 好运彩3历史记录