万字干货！全新 UI 视角帮你掌握「界面三重构」的知识点( 六 ) 编辑导语：好的界面设计有利

（1）什么是用户流程
用户流程是用户从打开APP到完成任务关闭APP的使用全过程，包括了用户看到什么信息，做了什么事。
疫情期间每天都需要使用随申办小程序，用户流程是打开微信，进入到微信首页，下拉查看常用小程序，点击随申办，查看随申办，退出小程序。

文章图片
根据用户流程优化体验，用户流程越短越好，操作流程尽量不超过5步。
用户流程要顾及头尾，即用户进入到一个新界面会看到什么信息，用户成功完成任务后会跳转到哪里，或显示哪些反馈信息。这些都是最容易被遗忘的接触点。
（2）如何确定用户流程
基于用户的使用场景。以小水查找朋友圈某个朋友的信息为例，需要思考用户有哪些场景，如果知道谁发的，就会先通过找到人，然后进入其朋友圈找到信息。
如果忘记谁发的呢，那只能凭记忆里在朋友圈慢慢滑动，直到找到该信息。

文章图片
以上从交互设计五要素行为和场景对用户流程进行分析，还可以从用户、目标、媒介去思考如何帮用户高效的完成任务。
拆解用户方法有用户画像分类、北极星指标分类、用户目标分类、用户角色分类、利益相关者等。
拆解媒介的方法有竞品分析、头脑风暴、ABTest、埋点数据分析等。
六、XZ轴设计上文已经讲了Z轴相关设计，为什么还要写XZ轴、YZ轴的设计呢，从X、Y、Z、XY、XZ、YZ更有逻辑性和完整性，也确定存在一小部分的案例可以解析。
1.Banner轮播图Banner轮播图除了横向的X轴出场次序，还有Z轴点点一对一的当前状态。移动端受容器大小限制多为Z轴设计， Web端容器变大可以变成左右的交互设计形式。

文章图片
2.导航栏导航栏是Z轴的视觉与交互结合，当前状态需要重点突出，视觉向前进，点击导航栏后底部的横线会有动效移动，可以侧滑导航栏选择类别，这样效率会更高；也可以侧滑下方内容切换选择。

文章图片
3.列表侧滑删除列表侧滑是使用内嵌的布局方式，界面设计中用户习惯是先查看再操作，当容器大小放置不下可先隐藏操作按钮。
QQ聊天界面侧滑内容可以引用该内容。微信消息列表侧滑出现标为未读、不显示、删除操作按钮。

文章图片
七、YZ轴设计YZ轴多结合界面交互一起设计，通过用户操作形成Z轴信息架构的变化。 YZ轴设计多用于信息流、键盘输入等。
1.页面滑动信息流的设计多为Y轴设计， Y轴急促、紧张的情绪会让用户不停的刷信息。
信息流设计中采用相似的界面结构保持统一，比如固定的头像位置，固定的操作按钮位置，标题文本形式等。
微信朋友圈信息流一整块一整块的加载提高阅读效率；而抖音的视频流是一个一个加载，更注重精准推送和沉浸式的观看体验。

文章图片
2.键盘输入键盘输入也是采用YZ轴设计方式，不同场景下的键盘输入交互也有差别，微信聊天界面的键盘输入框放置在底部，每次调用键盘组件时界面会从下往上移动。
而朋友圈评论时，键盘组件除了从下往上移动，还要对齐到对应评论的内容上。前端的定位技术会有所不同。