UI Design
Use case 1
Version 0.1 (Week 3 ~ Week 6)
总览
第一版设计思路主要如下
- 逻辑上按照现有常见的点餐小程序设计思路，对菜品进行分类，然后用列表的形式对单个菜品展现。已有的点餐程序逻辑较为清晰，这里直接沿用
- 找到对应分类
- 选择对应分类下的菜品
- 切换分类继续选择
- 进入购物车结算
- 视觉效果上，由于传统点餐程序（例如麦当劳和美团外卖等）类别是放在左边的，所以界面整体显得很拥挤。为了解决拥挤的问题，v0.1中我牺牲掉了操作的简便性（将菜品细节放到二级菜单），而换来了足够流畅的空间表达，整体界面注入了足够的空气。同时，在卡片（Material & iOS10+）、磁贴（UWP）和扁平（iOS7~9）三种设计思路中选择卡片的陈列方式，因为点餐界面需要展现足够多的信息，磁贴的表达能力不够强，纯色块反而会抢走图片的风头；同时纯扁平的设计元素已经不再适合当前多维度信息的表达，所以最后采用了卡片作为主要表达手段
整个小程序逻辑上分成两个界面：
- 分类浏览界面。 分类浏览界面由卡片的形式展现，每个卡片对应一个类别。这样用户可以比较清楚的知道每个类别是干什么的，视觉上也不会显得太拥挤
- 菜品列表浏览 菜品列表浏览用列表卡片的形式呈现，购物车在右下角有一个小按钮可以随时查看购物车情况。
- 购物车查看 没有太多新颖的地方
组件设计思路
- 类别卡片。类别卡片采用 2:1 的长宽比，每张类别卡片不会占用太多空间，同时能提供足够明显的视觉效果
- 菜品细节。菜品细节直接用一整行来表示，每个菜品都可以占满整行，同时每张卡片之间有一定间隔，界面不会显得太拥挤
- 信息陈列上，主要信息会突出于底层。这里用了颜色或者边框阴影进行突出。每个部分有相应的大标题来指引
自评
- 逻辑较为清晰，界面不太拥挤
- 操作不够简洁，点菜必须进入二级菜单
- 设计语言不够统一，购物车也可以改成卡片式
Version 0.2 (Week 7 ~ Now)
总览
根据上一版本的思考之后，为了解决操作不流畅（二级菜单）的问题，我引入了底部导航栏。这是一个非常慎重的决定，因为引入底部导航意味着整个小程序承载的信息要足够丰富，否则底部导航会显得十分多余而且占用空间
由于在第二次迭代的讨论中我们希望加入同时点单、推荐系统等功能，所以这个时候我决定对 UI 界面进行大修改
- 加入推荐界面。因为需要推荐的菜品有限，同时要足够吸引眼球，所以我用了非常大的正方形卡片来容纳。第一眼看过去只能完整的看到一张卡片，即大部分用户只会被推荐到一个产品，这样推荐效率会非常高
- 菜单的分类和细节集中到一个界面。为了便捷性考虑，我最好还是决定把分类和细节集中到一个界面，考虑到界面展示空间的问题，我加入了横向滑动的方式来拓展承载空间。这样用大标题和分割线区分主要类别，而类别菜品细节也有整整一行的空间来承载。同时如果菜品太多，可以点击查看全部浏览类别内所有菜品
- 为了比较统一的设计语言，购物车直接用连贯的白色背景、黑色小标题和分割线进行板块的区分