B端产品的交互思维与设计说明

针对一对一个性化定制的B端产品,鲜有竞品参照,大到行业小到公司个体,业务多少都不一样。这时,只有对业务各个场景有详细的了解,你才能做出符合业务的交互设计,减少开发的返工。即B端产品的交互思维来源于你对业务场景的了解

真正让我重视交互设计是我的测试工作,多次的测试失败(测试不全面,上线了用户反馈出新问题),加上领导的引导,我开始思考为什么测试不严谨。一直被领导吐槽逻辑感很差,逻辑?是的逻辑漏洞,但归根到底还是对用户的使用场景了解的不够全面。用户万分之一会触发的可能情况,我们都要在测试中操作一遍,看是否能正常操作,是否有提醒,界面呈现的结果是否正确。

那从测试往前推,不难发现,实质对于0-1项目的搭建,一开始的界面交互设计和交互说明文档至关重要, 并且好的交互设计/说明可以大大降低与开发的沟通成本以及开发对该项目的理解难易程度,以便能较准确地预估实施难度,比如需要调取哪些数据表等,从而尽快进入开发环节

好的交互对开发来说是逻辑的完整性,对用户来说是体验的流畅性。交互说明是PM前期需求分析、用户调研、界面设计落实到纸质上的一种呈现方式。

那一份完整的交互设计文档该如何实现?我们可以从以下三个步骤着手编写:

一、梳理清楚功能逻辑

1. 梳理业务流程图

它可以帮助我们站在开发角度,确定功能涉及到数据上的增删改查,包括单页面和多页面间的数据流向。通过和开发沟通业务流程图,提前将技术问题梳理清楚,避免功能设计后技术实现困难或根本实现不了。

2. 明确需求出现的所有场景

这需要我们运用逻辑思维穷尽需求可能发生的所有情况,这是一个非常考验逻辑完整性的过程,我们可以通过脑图软件帮助我们遍历场景。

二、面向对象分析功能属性

学习开发思维,使用面向对象思想分析功能属性,帮助我们最大限度的避免疏漏。

1. 列举功能的所有属性

2. 确定修改属性的交互事件

3. 确定修改后的属性

面向对象分析思路

三、输出设计规范文档

1.页面整体说明模块

a. 页面整体的排版布局(比较直观可不写,特殊点可注明细说下)

b. 相同的交互方式,比如弹窗、新标签页等

2. 对象

用户身份和系统功能页面紧密相关。比如某申请流程中的申请者和审批者。

3. 限制

a.范围值:比如列表超过10项出现滚动条

b.极限值:比如某个字段文字超过展示极限值才有缺省,hover气泡展示全部

4. 表单校验

表单校验逻辑:是实时校验还是触发按钮后做校验,还是两者结合,表达清楚逻辑并将相关的提示和反馈描述清楚。

5. 操作与反馈

a. 操作:

- 交互方式:点击、拖动、长按、缩小、放大等

- 文本框等:获取焦点、失去焦点,比如输入时出现下拉列表等

- 热区范围:比如列表展示形式可将序列标题或者序列某一范围作为可触发操作的区域

b. 反馈:

- 提示内容:系统对用户操作的及时反馈,比如报错提示、失败提示、成功提示等

- 提示形式:提示的控件样式,比如警告框、确认弹框等

- 跳转:跳转形式是当前窗口/新窗口?跳转到哪里?写清楚标号或者页面名称

6. 状态变化

a. 默认:

- 默认选项选中

- 默认显示的文案

- 默认排序方式

b. 正常:

- 正常场景下的操作带来的变化,比如点击表格的表头排序

c. 特殊:

- 特殊功能,比如点击查重功能

- 特殊场景,比如无数据情况、加载失败、网络错误

最后 配合开发进行业务梳理

1. 复杂业务逻辑的梳理

2. 所有交互逻辑的梳理

3. 所有文案的梳理

4. 页面流程图的梳理(前提:跨页面设计)

举个笔者最近设计的案例添加推荐机构及顾问

前言:教育培训行业 学生是由某机构的某顾问推荐而来,本公司课程顾问在录入该学生信息时,需要选择某机构某顾问,结果发现系统没有该机构该顾问信息,需要进行添加。

一、梳理清楚功能逻辑

业务流程图
功能可能出现的场景

共3种场景,整理如下:

- 场景1:无该机构,无该顾问,要添加机构,添加顾问(该顾问附属于该机构)

- 场景2:有该机构,无该顾问,要添加顾问(该顾问附属于该机构)

- 场景3:无该机构,有该顾问,要添加顾问(该顾问不附属于任何机构,是独立顾问或校内顾问)

场景2:类似于场景1,优化方案是先选择列表里已有的该机构,再添加该机构下的顾问。

场景3:属于特殊场景,为了让用户准确将顾问定位于对应机构(防止不同机构有同名顾问,不知选择哪个顾问,这也属于查重机制),所以机构类型里添加了独立顾问/校内顾问,需要先选择独立顾问或者校内顾问,再添加该顾问。

二、面向对象分析功能属性

面向对象分析思路

三、输出符合设计规范的文档

参照上述说明,在此举例:

1.页面整体说明模块

点击“+”,跳出弹窗,添加推荐机构/顾问

4.表单校验

在选择已有机构情况下,添加顾问时实时校验是否重名

5.操作与反馈

a. 操作:

添加顾问未添加机构,点击确定按钮时,弹出警告框,提示:机构名必填。

b. 反馈:(失败场景的toast文案)

- 不填写/不选择已有机构直接点击提交或者清空已填写/已选择机构:机构名必填;

- 添加已有机构的同名顾问:该机构中已有同名顾问,请核实;

- 选择已有机构不添加顾问:顾问不能为空。

6.状态变化

推荐机构的下拉列表默认前两项是独立顾问/校内顾问。

小结

工作上多学习优秀产品和多复盘自身设计,空余时间多读优秀书籍和文章。长期坚持下来,我们的交互设计能力一定能有阶梯式的提升。从表象判定交互思维的提升,大概就是你的设计稿越来越易被开发理解,同时这也让你的设计越易让业务方可接受。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,290评论 4 363
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,399评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,021评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,034评论 0 207
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,412评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,651评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,902评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,605评论 0 199
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,339评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,586评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,076评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,400评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,060评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,083评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,851评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,685评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,595评论 2 270