首页内新人尝鲜价占据页面一半以上空间，包括新人价格优惠推荐商品以及优惠券包。这样的页面布局在吸引用户视线的同时，也为了吸引新人下单，增强用户粘性。

新人活动下方是首页金刚区，也是底部导航中分类页的所有分类入口。由于分类较多，页面承载有限，所以支持左右滑动查看所有分类项。金刚区内绿色滑块很好的提示用户该区域支持左右滑动以查看剩余内容，否则未显示内容只能等待用户自行探索，从而降低隐藏内容曝光，造成资源浪费。

基本任意一款手机应用默认支持上下滑动操作，该应用首屏上划后，搜索栏置顶显示，页面内其他信息被更替，页面如下。

金刚区之下是轮播banner。默认5s自动更新。点击banner进入活动页面。banner区下方是一组产品周边相关功能入口。分别是“绿卡会员”、“叮咚农场”和“邀请邻友”。虽然不是产品核心业务，该类功能对留存拉新仍然发挥重要作用。

长期活动分别是：限时抢购、绿卡特惠、新品尝鲜和平价菜场。单击任一区域进入对应的活动详情页。

之后是分类推荐区域，分别是：猜你喜欢、特价促销、丰盛午餐、火锅到家和时令新品。区域内支持左右滑动、或者单击推荐条目的方式显示不用区域推荐商品。并采用无限流的方式展示商品，给用户带来沉浸式的购物体验。同时，在上划时，推荐条目作为首页内二级导航置顶显示在搜索栏之下，帮助用户快速定位所处的页面层级。

首页内容支持双击图标返回页面顶层。

全局导航仅支持单击切换，不支持左右滑动切换。

分类页如图所示：

分类页内容根据菜品属性不同进行分类。商品一级类目与首页中金刚区分类相同。一级类目包括：蔬菜豆制品、肉禽蛋、水产海鲜、水果鲜花、乳品烘焙、冷冻食品、粮油调味、方便速食、快手菜、火锅到家、网红打卡地、零食酒饮、营养早餐、鲜花宠物、熟食卤味、日日鲜、个护清洁、绿卡专享。一级类目固定显示在搜索框下方，可点击“全部”展开所有一级类目。当选择一级类目时，被选中条目高亮显示，并且被选中条目相对位置保持不变，其余条目产生相对位移。

左侧为二级类目，右侧为二级类目对应的商品展示区域。商品列表区域顶部为商品三级类目（部分二级类目下没有三级类目），当前类目下的商品显示到最后时，向上滑动屏幕自动切换至后一个类目商品，所对应的类目变为选中状态高亮显示。单击不同类目标签也可以切换至对应的类目商品页。

商品展示区由以下元素组成：购买按钮，商品图片，商品名称及价格，商品关键信息（商品特色，烹饪方式，特惠标签，销量冠军等信息）。其中部分商品对存储条件的特殊要求在商品说明中也有明显标注。

不同客户对该页面的条目列表的需求不同，对于有明确需求/购买意向的用户，再搜索框中输入关键字点击搜索，根据搜索结果直接查看并下单；对于需求模糊/购买意向不强的用户可以通过分级类目浏览商品，心仪商品可以点击购买按钮添加至购物车中。

在该页面内，对于依赖分类条目浏览商品的用户来讲，其操作路径/视线路径如下图所示：

并非所有二级类目之下都含有三级类目，所以当用户参照分类条目浏览商品时，至少需要三次操作：选择一级类目，选择二级类目，选择相应的商品缩略图。

点击商品介绍区域，进入产品详情页：全局导航消失。

产品图片自动轮播（5s更新），也可左右滑动查看上/下一张图片。单击图片区域全屏显示图片后，支持双击放大图片（三次双击缩放至默认大小）或双指捏合缩放，默认大小时，单击图片退出全屏显示状态。回到产品详情页。

页面顶部分布有返回按钮（返回上一级）和分享按钮（分享至第三方应用：微信/朋友圈）。向上滑动至商品图片消失时，该页面内二级导航出现在页面顶部，分别是商品、评价、详情、推荐。单击导航名称，相应内容在屏幕内联动显示，或滑动屏幕显示不同内容时，相对应的导航为高亮选中状态。

在商品评价区与详情介绍介绍区之间有单独的关联推荐商品区域。（该区域并未在二级导航中体现）该区域所展示的商品为当前商品详情页的相关商品。（或依据烹饪方式推荐、或根据饮食搭配推荐）。关联推荐为三页内容，用户在该区域内可左右滑动查看所有推荐商品，同理，单击缩略图进入商品详情页或单击购物车按钮加入“购物车”。

页面底部为我的购物车与加入购物车按钮，若购物车内有商品，则购物车按钮根据商品数量高亮显示以提示用户当前所选购商品数量。

点击购物车按钮则进入全局导航下的购物车界面。

购物车内商品默认为选中状态——已选购。用户可点击选中按钮取消选择（商品条目仍然保存在购物车内）。若用户想删除购物车内商品，有以下几种方式：

可长按商品条目删除该商品；

点击屏幕右上角删除按钮删除已选中商品；

向左滑动商品条目出现删除按钮，点击删除。

该页面内，已选购商品上方有换购通道。根据单次消费金额进行换购。该区域内左右滑动查看可换购商品。同理，单击换购商品区域进入对应的商品详情页。已选购商品下方是商品推荐区。系统根据用户购买历史或浏览历史进行智能推荐。

无论是商品推荐还是换购功能，都是为了吸引客户下单，提高客单价。

浏览至推荐商品底部时，出现一键回到顶部按钮。方便用户快速定位。当用户对购物车内商品确认无误后，点击结算按钮进入结算界面。界面如下：

该界面内用户必需进行的操作包括：填写收货地址，选择收货时间，选择支付方式，确认消费金额。可选操作包括：在此确认选购商品，是否使用优惠券，订单备注。所有信息确认无误后，点击提交订单转入第三方支付平台进行支付。

全局导航中，点击“我的”按钮进入个人信息页面。页面如下：

页面内分为消息中心、用户信息、用户账户、用户订单、活动入口、其他相关功能、智能推荐模块。

点击右上方按钮进入消息中心，点击用户名称进入个人资料界面更改个人资料。

该页面功能较为简洁，因此不再赘述。

全局导航中，直播页如下：

该页面分为一下几个模块：轮播banner、直播间入口、直播预告、做饭教程。

页面顶部为自动轮播banner，也可左右滑动翻页查看。屏幕中心区域是直播间入口和直播预告，点击直播间入口进入直播间观看直播。

屏幕上划至轮播图超出屏幕区域后，显示屏幕标题——“叮咚直播”（下划反之）。继续上划，做饭灵感下的类目标签栏至标题下方后，类目标签栏固定显示在标题下方，同时出现一键返回顶部按钮，方便用户快速定位。

用户可左右滑动查看不同类型教程。左右滑动时，相应的类目标签联动显示为被选中状态。也可单击类目标签直接显示对应内容。点击教程缩略图进入教程详情页。类目标签内点击“全部”查看所有分类。

在进行界面更新、界面加载时，采用微交互的设计方式填补用户等待时间。由于动画效果不便展示，故文中没有图示说明。

由于时间有限，未能将应用内所有界面一一说明，仅分析至二级界面。

2.5 表现层

2.5.1 概念分析

框架层中主要解决可交互元素的布局、信息元素的排布以及界面之间的逻辑关系问题。在表现层中要结局产品逻辑排布的呈现问题。将信息呈现给用户的过程，用户接收信息的过程，被定义为感知设计。

人的感官系统由五方面组成，分别是视觉、听觉、触觉、嗅觉和味觉。其中，嗅觉和味觉是用户体验设计师很好考虑的范畴。实物产品的触觉体验属于工业设计领域的概念，例如产品的外形、材质等。基于屏幕交互的产品目前没有过多的将触觉体验纳入研究范围。听觉现在已经开始应用于各种产品当中，例如智能音箱、智能语音系统、智能车载系统等。产品通过捕捉用户发出的语音指令做出一系列反馈为用户提供有效信息。

视觉设计是被应用最多的领域。几乎所有的产品都会涉及视觉设计。视觉设计过程中，要注意以下方面：

视觉设计应该使得产品更加易用，而不是分散用户“完成目标”的注意力。不应该让视觉设计成为阻碍用户达成目的的因素，而是更好的引导用户完成目标。

视觉设计要注意对比和一致性。既要突出显示重要内容，又要强调整体一致，例如图标风格的一致性，控件大小一致性以及元素间距的一致性等。通常运用栅格系统保证页面的一致性，用不同的配色方案表现元素之间的对比关系。

2.5.2 实例分析

叮咚买菜的主要色彩是白色作为背景色，绿色作为辅助色，突出显示为被选中状态。例如分类条目、全局导航中的被选中状态为绿色，以及商品内容区内的购物车按钮同样突出显示为绿色。红色作为点缀色突出显示商品价格、结算按钮以及商品属性标签的文字。

商品一级类目使用实物图标直观表现不同类别的商品。

除此以外，应用内其他图标一律采用线性图标，保证界面风格一致性。

界面一致性还体现在不同模块之间保持一致的间距，商品信息展示使用卡片式设计等。

三、总结概括

产品的用户体验设计并不是一劳永逸的过程，而是随着市场规律和用户需求的变化周而复始的进行更替。在工作过程中，既要考虑现有的成本：技术、时间、经济等。也要考虑用户的真实需求，避免依据“伪需求”进行产品开发的错误方向。正如《用户体验要素》一书中所言，用户体验的开发过程是一场“马拉松”，而不是“短跑”。成功的马拉松取决于运动员如何有效地控制自己的步伐。

产品的开发是一个漫长的过程，只有遵循客观规律，确保在每一层级都做出正确的决策才能保证最终的产品满足最初的战略目标和用户需求。