一、设计稿文字图片不要一样
刚做UI的时候,根本就没有注意设计稿文字图片要保持不一样。
我以为这些图片和文字都是后台配置,认为没有必要单独去做啊,这不是浪费时间么,本来项目那么紧,那时候做的项目基本和下图一样,图片文字都一模一样。
直到有一次去面试,面试官问我:"为什么你的设计稿图片文字都是一样的呢?",我对他说,"因为这些是后台配置的,所以我就觉得没有必要设计"。他反问道,"你不设计出来,我怎么知道这个界面好不好?",就这样短短聊了几句,他就让我回家等通知了。
但那时候我并没有在意,直到后来工作中领导又问了同样的问题,我才回来做了一个实验,在网上找一张设计还不错的案例,这个界面整体给人清爽简洁、配图活跃个性的感觉。
然后在将里面的图都改成一样的,我就发现改完之后,确实很难判断这个界面的好坏,尤其像这种内容少图片多的界面,他的成败其实重点就在配图上,如下图:
后来在做设计稿时,不管在忙,我都会把图、文字好好编辑,哪怕图可以丑一点,但是一定要保证不一样的内容。
二、别用其他组件代替
在设计时,一定不要为了省事直接用其他平台的组件来代替,这直接会导致设计效果和规范的不统一,同时还会浪费大量的沟通时间。
比如我们公司的后台界面用的 View Ul的框架,现在需要给公司的后台进行优化,但是我手上又没有View的组件库,如果重新画感觉有点浪费时间,如下图:
于是想着反正手上有现成的蚂蚁金服后台组件库,要不直接拖过来用,大不了后面给前端说下,设计稿只是整体效果,具体的控件还是用原来的样式。
但是,我以为这样嘱咐了前端就没问题了实际上前端其实搞不懂哪些是用原来的,哪些用现在的,或者他干脆忘记我说的话了,直接就按照设计稿上来实现了,结果验收时才发现又得重新调整。
最后,我本来只需花20分钟画套控件,但是我却花了2个小时来和前端沟通,重要的是还浪费了前端的时间。
这件事情让我明白,有些懒你偷了,迟早是要加倍还回来的。
1、极限值要考虑全面
在设计时,一定要把极限值考虑全面,我之前在设计数据页面时,就上过一次当。
我在设计数据页面时,由于整个界面都是数据,没有图片,因此想着用图标来丰富一下。但是却忘记了解数据最大会显示多少位,就导致上线后才发现当前样式容纳不下,真实数据最长有7位数,然后我这最大只能展示5位。
于是领导通知马上调整一版新的出来,于是我只能将图标删掉,保证数据展示出来。如果这样的情况多次发生,我想这个月的绩效就只能得C了。
因此,为了避免这样的情况再次发生,我想着要不把界面中常用到的极限值都总结出来,下次在设计时就不会这样手忙脚乱了。
2、列表
- 需要注意标题的长短、标题过长最多展示几行、如何做截断处理;
- 描述文字过长如何处理,是否展开收起;
- 列表中,两个不确定长短的内容,不要排一行,避免内容过多排不下;
- 考虑各角色参数的变化,进行适配;
- 考虑图片适配规则;
- 考虑交互手势操作;
- 标题域最多支持几个字,超过如何展示。
3、表单
- 输入域展示宽度确定;
- 对于地址、备注等文本框当文字超过一行如何展现,是滚动还是换行,输入文字是否有限制数量;
- 考虑当标题超过1行如何显示,
4、弹窗、提示框、控制面板等
- 当内容超过一行如何显示;
- 后台获取的数字、文字一定要去后台确定最长数据,保证当前设计能够承载。
三、所有流程都需展示出来
在设计时,一定要把整个流程的界面都设计出来,哪怕是一个 Toast、一个弹窗也要展示出来。
我就犯过这样的问题,之前我在设计购物车列表时,界面中有个删除按钮,需要二次确认弹窗,类似下图当当上面的弹窗,于是我口头告知前端这里直接加个二次确认的弹窗组件即可,我就不画出来了,但是由于时间比较长,他们写的时候就忘记了。
后来也是在验收时才发现,删除的时候直接就删除了,没有二次确认,收藏成功也没有提示。这时候只好在拜托前端加上。
因此这次的教训告诉我,尽量将各流程都画出来,不仅可以让自己逻辑更清晰,不易漏掉界面,同时也不怕前端忘记,从而减少沟通成本。
四、所有状态都应设计出来
界面中的状态,以前我都是根据自己的经验来设计,但是人脑有时候是最不靠谱的,当我们大脑高度紧张时,就容易出现漏考虑的情况。
比如下面贝壳的提交表单,在设计时我们需要考虑默认态是什么,选中是什么;预算金额的滑块最小时如何显示,最大时如何显示;选择区域时默认是什么状态、选中是什么状态,联动的状态又是什么。键盘弹起的默认状态和输入状态,键盘收起弹出收起的交互操作,以及提示、成功、失败等反馈的效果都需要设计出来。
是不是看着脑袋都很晕,这种表单流程,我在设计时就很容易将地址联动、键盘交互这些漏掉。因此为了避免这种情况发生,我同样根据项目制作了一份常见的状态表,避免考虑不周全的情况。
1、列表
- 空状态如何显示,是否需要引导
- 列表标题过长如何显示
- 描述文字为空、正常、过长如何显示
- 翻页加载样式、没有更多内容的样式
- 数据加载提示
- 默认状态、点击状态、长按状态
2、表单输入
- 考虑默认状态、编辑状态、常态
- 输入时的键盘交互操作
- 报错、网络断开、成功、失败等提示
- 编辑后跳转到哪里?是直接跳转到列表,还是需要展示预览输入有逻辑关系的内容如何交互
- 输入出行意外该如何处理,是否保存,需要做什么操作输入特殊字符是否做限制
3、按钮
- 正常、触发、禁用、加载等状态
4、搜索
- 在当前页操作,还是跳转到新页面
- 实时搜索,还是提交后才更新数据
- 正常态、触发态、输入态、提交态
- 历史记录最多展示几条数据?是否支持清空