设计宣讲中最常出现的问题总结（pc端）

每次评审、宣讲之后都会在wiki上记录很多产品、交互、视觉的问题，最近有时间，我把最近项目的问题梳理汇总了一下，给大家避雷。

首先，我们是这样的流程：

1、产品立项

2、概要设计评审

①概设时主要是产品讲解需求的背景、目标、流程、功能、数据权限、数据来源等等；

②设计师主要是理解产品需求，并提出交互建议和意见；

③设计师着手竞品分析、用户调研、设计草稿；

3、详细设计评审

①详设时，产品输出较完整的一套原型并讲解；

②设计师输出详细设计稿；讲解设计稿的每个页面，包括详细交互流程、布局、结构、校验等细节规约等等；

4、答疑

①评审时会在wiki上记录开发测试等提出的问题，会后给予解答；

5、产品宣讲

①正式宣讲时，涉及到这个项目的前后端开发、测试人员都需参加会议，也是产品先讲原型和产品规则，然后设计师讲设计稿和交互规约；

6、再一波答疑

①宣讲时会在wiki上记录开发测试等提出的问题，会后给予解答；

7、参加前端开发反讲、测试用例反讲

①反讲时重点关注交互规则是否理解错误、是否缺失

8、开发测试过程中，设计问题跟进

9、一轮视觉复核

①测试完成一轮功能测试后，通知各设计师进行一轮视觉符合；

②所有的视觉bug标注优先级，并且进jira；

10、二轮视觉复核+bug复核

①一轮视觉符合完成后，设计师自行规划时间进行二轮视觉符合；

②对一轮符合中的bug进行复核，并修改相应的bug状态；（关闭bug或重启bug）

11、视觉复核三轮+bug复核+遗留bug公布

①二轮视觉符合后，上线前可进行三轮视觉符合；

②如迭代时间紧可合并成两轮视觉复核

②上线前1天：遗留bug公布，公布给开发leader、产品经理，设计leader知晓；

12、上线后第一天，在线上环境验证迭代内容

①上线后第一时间，再次在线上环境验证迭代内容是否有问题；

每次评审、宣讲之后都会在wiki上记录很多产品、交互、视觉的问题，我把最近项目的问题梳理汇总了一下，单纯交互+视觉上的问题就有接近200个🤯脑子要爆炸了，哭唧唧。。

整理中就发现有很多问题，反反复复出现了很多次，所以整理还是有用的，接下来就是揪出这些问题，避免下次犯错！！吼猴🥶

经过我的爆肝整理，发现出现次数最多的竟然是-----------------------

一.缺少“内容/字段超长”情况下的规则

根据我的“不完全统计”，缺少页面内容/字段超长情况下的规则是出现最多的问题，也就是咱们做设计和写设计规则时最常忘记或者忽视的点。

评审和宣讲会议在wiki上记录的有关“超长”的设计问题，截取了7条展示下：

1.目录超长时，怎么办，补规约；

2.左侧列表名称过长如何显示；

3.“回车将xxxx添加为个人标签”文案超出10个字怎么处理，折行还是打点？

4.列表页、详情页“...”展示规则，是标签名字上“...”还是标签后面"..."，如果标签后“...”缩放页面会实时计算宽度，影响性能（显示标签需要限制个数）

5.共享部门有多个时，在列表怎么展示

6.基本信息区评价表名称和指引过长怎么展示

7.新建职位页面：预览筛选器 弹窗，条件过多时的详细交互规约   

解决办法：

字段超长时最常用的解决办法就是，打点，hover时出tips提示，但是

打点出tips处理时也有一些需要注意的小点：

1.打点的位置

是在字段末尾开始打点，还是从某一个词之后打点，还是在中间？

2.tips显示全部内容，还是部分内容

eg：面试未评价，tips，只显示姓名，不显示时间；

另一种解决内容过多的常见方法就是加入“展开、收起”可以是图标按钮，也可以是文字按钮；

同样，用展开收起时需要注意的点：

1.出现时机

wiki问题举例:

1.基本信息区评价表名称和指引过长怎么展示，展开收起？--默认展示两行，超过两行展示不下则打点并出现展开收起按钮

2.如果题目或维度名称过长的话，权重放在哪里？

权重全部跟随题目名称或维度名称后面，若一行展示不下权重则权重整体折行与文字左对齐

3.题目和维度文本过长怎么展示，展开收起？

题目和维度文本正常展示 一行展示不下折行

2.展开收起的默认状态，默认展开的还是收起的呢？

wiki问题举例:

应聘者列表页，默认收起

3.特殊场景，无内容时的处理，是禁用，是直接不显示？

wiki问题举例:

疑似弹窗工作经历都没有工作职责时，不显示【展开】

对于字段、内容超长的情况的处理可以看下这篇文章，我做了汇总：

https://www.zcool.com.cn/article/ZMTE5NDAzNg==.html

二.缺少加载状态

没错，页面“加载”也是做设计时常常忽视掉的，因为大家肯定是重点考虑有内容的情况，并且页面数据是否需要加载、加载时长等等需要根据前后端接口返回情况确定。在设计评审中被大家提醒，补充也是常见的事。

我根据这次整理汇总了以下细分的方面：

1.加载样式问题

按钮、弹层、推平、页面的加载样式，是转圈，还是用骨架图，还是其他的样式？

2.加载数据量的问题

加载的数据量的问题需要给出规则，比如一次加载全部，还是一次加载30条等等

3.加载时机的问题

   什么时候出现加载效果？

评审会议在wiki上记录的有关“加载”的设计问题，截取5条：

1.弹层的loading效果

2.新建标签弹框，点击确定，按钮缺少loading

3.创建完成时的loading 形式

4.人数过多滚动加载是否有到底和加载提示

5.简历筛选器和面试问卷的各页面、推屏、弹层的loading态需要补充下 

三.缺少各种提示

提示，算是一种反馈，页面中的提示肯定不少，我们画页面时也会画出大部分提示，但是缺少提示依然是设计师常忽略的内容，主要是提示的场景非常非常的多，而且有很多细分情况：

1.数据处理慢的提示

wiki问题举例:

发起多人筛选时，如果后台数据处理慢是否有提示？

2.操作后的提示

成功、失败、进行中等，还有部分成功，部分失败的情况

wiki问题举例:

a.产品需要补充一下全部失败的提示；部分成功和全部成功也补充一下UI。

b.选择通过待定淘汰时，提示怎么展示？@设计

c.补充邀请失败的提示

d.默认分组批量操作时的提示

e.批量选择人才库的提示@设计

f.添加招聘标准，自动邀请通知方式默认显示；全都没有勾选给出默认提示。

3.无权限、禁用等的提示

wiki问题举例:

项目列表-阶段没有权限，需要有个tips提示

4.表单必填提示

wiki问题举例:

问卷调查：通知方式 必填的提示 需补充下 

5.缺少二次确认提示

wiki问题举例:

a.新建页面点击取消是否需要二次确认?

答：点击取消不加二次确认，点击返回或面包屑到其他页面时若页面填写内容未保存点击取消则出现二次确认；点击“是”，全局提示“更新成功”，页面刷新至浏览态；点击“否”，二次确认弹窗消失，底部“取消/确定”仍在，页面处于编辑态。

b.标准简历配置点击“确定”，需要二次确认弹窗文案优化，以及后续交互；

c.点面包屑，需要二次确认提示框@设计

6.Toast提示出现的时长问题

wiki问题举例:

a被锁定先出提示还是先出弹层，先出提示还得等3s体验可能不好

  答：先出弹层，再出提示，提示3s后消失

b.Toast出现的时长需要定一下，多长时间跳转到下一个，补充规约——答：1.5秒

四.缺少空白页

空白页，无数据的情况下页面如何展示呢？设计稿上没有的话，开发测试定会揪着不放～

1.页面整体空数据

wiki问题举例:

a.面试管理列表，空数据样式

b.原始简历，空状态页面 ——已补充

2.没填写的模块和没值的字段如何处理

wiki问题举例:

a预览时，没填写的模块和没值的字段如何处理 ?

b发起业务筛选时，通知模板有“筛选人”变量，但是没有选择筛选人，预览显示什么？

五.缺少校验

1.校验的时机：是失焦后还是提交按钮时，还是实时的

wiki问题举例:

a前台添加个人标签找到停用的个人标签，点击“否”和空白区的交互，是失焦吗?

b前台添加个人标签查重、字数校验的时机确定，要不要实时校验？

c表单的校验方式，必填失焦校验，提交校验

d发送邀请：首次提交校验后，页面的报错进行实时校验

2.校验的样式：是在下方出提示，还是全局提示，还是什么的

wiki问题举例:

a邮箱重复的校验方式

b提交邀请更新简历时需要进行整体校验，校验的提示

c必填校验的提示样式美观度====设计考虑

d快速淘汰如果没有淘汰原因，只有文本框，必填错误提示啥？--和有原因的报错提示一样，提交后出全局提示

六.缺少滚动条的样式

没想到吧，我们在画页面时，不知不觉内容就超过实际屏幕的一屏了，但是关注内容的我们，很容易忘记滚动条这回事，小小的滚动条被记录在wiki上n多次了。

1.滚动的区域

滚动区域是哪里？包不包括表头？标题？有没有内容需要锁定？

这些问题都要给出规则。

wiki问题举例:

a.页面超高的滚动区域需要给出

b.通知模板预览是否出现滚动条--有滚动条，超过高度展示不下时，内部出滚动条

c.预览的时候如果是多个职位，页面过长加滚动条

2.滚动条的样式

wiki问题举例:

a.文本域补充带滚动条的设计@设计

七.页面布局和自适应问题

页面是定宽还是自适应，是居中布局还是左右布局？等等，这篇文章有比较详细的归纳：https://www.zcool.com.cn/article/ZMTIwMjYxNg==.html

wiki问题举例:

a.筛选简历elink操作区自适应问题

b.简版报告是固定高度还是百分比展示--固定

c.应聘者拒绝面试原因自适应

d.页面时如何布局的详细规约需要补充

需要注意的一点，[模式弹层]的宽高规则：

1.定宽定高

2.设置最大最小值和百分比，如最小高度300px,最大高度占屏幕的90%；宽度占屏幕宽度的70%，在700px-1000px间自适应。

wiki问题举例:

a.选择职位弹层最大高度

答：最大高度为遮罩的95%，设计稿已补充

八.纯视觉方面的问题

1.被吐槽页面丑(伤害性不强，侮辱性极大)

可能是布局、颜色、间距等等原因导致的，总之，会被吐槽：页面不好看、页面看起来怪怪的、页面太丑了吧、页面有点死板、不够惊艳。。。。。我表面笑嘻嘻，内心～～～

wiki问题举例:

a.活动列表页面也太白了，像是几年前的

b.新建职位页面：预览筛选器 弹窗，头部占用空间太大，不协调 

c.公共标签左侧筛选标签分组高亮太亮了

d.卡片样式视觉，需要更突显卡片的样式

e.附表展开，背景色问题,背景色不好看@设计师

2.图标表意不清晰

wiki问题举例:

a.详情页移除标签icon用垃圾桶还是用x

b.这个图标看起来像是刷新，不像切换；

c.这个图标看不出来是猎头保护期的意思，看是否要换一个@设计

3.缺少特殊状态（失效、无权限、被删除、停用、禁用）下的样式

wiki问题举例:

a.确认下失效Offer的UI

b.操作列无权限时是置灰按钮，更新原型。

c.查看应聘者合并，当前应聘者被拉黑的交互和提示？（产品和设计确认）

d.激活详情列表，数字不可点击，颜色可以置灰

e.移动端备注提醒过期视觉

f.简历筛选器被停用后，职位的编辑态、查看态、复制职位下  （已停用）的视觉稿需要补充

4.视觉层级--重点内容不够突显

wiki问题举例:

a.需要突出当天的样式，区分未来和当天

b.搜索框首页不够显眼

结论：增加“搜索”按钮

九.页面文案问题

1.设计稿与产品原型文案不一致的问题；

wiki问题举例:

a.导出成功不是“导出成功”是“操作成功”。产品需要改一下文案。

b.筛选两个tab下，空页面文案统一；

c.文案统一“快速淘汰成功”还是“评价成功”？

2.会议上大家觉得文案看不懂或者不清晰；

wiki问题举例

a.现在的文案提示，创建个人标签查到停用的，点击“否”可能误认为创建新的标

十.删除/停用等【危险操作】：

1.操作权限的问题

所有人都有权限操作吗，无权限的如何显示，是直接不显示此按钮，还是置灰禁用？需要给出规则

2.是否允许全部删除？

wiki问题举例

a.高级筛选：允许全部删除吗？

十一.数字方面的问题

1.数字输入超长的显示

wiki问题举例

a.极限数字如何显示，比如筛选结果：999+

b.首页数字版、通过个数过多，面试评价过多等地都用99+，补充规约

c.未归档简历，显示全部未归档的数字，大于999显示999+，规则保持一致

2.数值是0时，是否有特殊的规则

wiki问题举例

a.筛选阶段-多个筛选结果：某一个结果下人数为0是否显示（比如：淘汰下有3人，更改结果后变为0）

b.卡片Loading是N还是N个疑似应聘者，如果是N==0直接显示还是卡片消失

3.是否有输入限制，比如，限制正整数、小数，小数精确到几位等等；

wiki问题举例

a.设置为整数，输入小数怎么办？

十二.缺少页面操作流程介绍

wiki问题举例

a.点击新建模板之后跳转到模板设置的对应的新建页面，设计把文字补充上。

答：

进入到 「设置-消息模板」 的对应场景的新建页面中；

比如，在邀请更新简历的推屏中，点击「新建模板」，进入「设置-消息模板-邀请更新简历模板-新建」页面；在 发通知的推屏中，点击「新建模板」，进入「设置-消息模板-发通知模板-新建」页面；

十三.定位位置问题

1.定位数据的位置

wiki问题举例

a.卡片列表切换：定位数据位置，是切换后自动滚动到这条数据的位置吗

希望直接定位在当前位置，不让用户感知到滚动

2.报错时，定位到第一个报错字段的位置；

十四.缺少状态

状态一般是由产品功能上决定的，细心的产品都会罗列出来，不会遗漏，但是马有失蹄，情况多发，也会偶尔遗漏的。

wiki问题举例

a.增加安排中的过程，以及失败的状态

b.面试间友好页的状态分为三类，过期、取消、无效链接。

十五.点击热区的范围

我们一般默认热区就是触发控件的区域，但是有时可能视觉上图标需要小一点的，但是热区需要更大一点，就要特殊标注出来。总之，方便用户操作为上。

wiki问题举例

附件，文件预览的点击热区？

结尾

总结了一圈，发现也就是平平无奇的那些大家常见问题，但是，只有在深入到实际项目的时候，才知道这些问题里面有多少细小的点需要注意。