设计APP一定不能忘记的五件事情

我刚开始工作时经常遇到这种情况,拿到一个需求感觉很容易,刷刷刷弄出好几个方案。然而方向确定后,才是问题的开始。

每一个页面都会有一些相差不多“配件”,例如字段、提示、模块、按钮等。因为他们都太过基础了,以至于很容易被我们忽视,直到……同时维护近百个页面时,初步进入开发阶段时,才被开发问起:

“XX部分的设计怎么在不同页面不一样啊?”“XX的规范有吗?”“XX的设计在特殊状态可能会出问题……”

这里我总结一下自己踩过的坑,希望大家在设计产品时不要和以前的我一样,把这些东西拖到最后才解决。因为欠债不还只会利滚利,最基本的东西反倒是最麻烦的。

时间戳

我不得不摸着自己的良心承认,时间戳这个坑,我做设计这么多年来还没有爬出。不单我没有爬出,我见过的所有设计团队都很少有能避开且轻松解决的。真是印证那句老话,“看不出问题的问题才是最大的问题“(我瞎编的)。

这东西有多难搞,看我之前的原创文章就知道了,这是当时的各家产品的时间戳规范:

zr4zyozkgl5.jpg插图

总的来说,时间戳的规范需要考虑以下三点:

1、用什么日期分隔符?

比较常见的有YYYY年MM月DD日、YYYY.MM.DD、YYYY/MM/DD和YYYY-MM-DD。需要注意的是,YYYY-MM-DD在时间区间的表达上会有问题,例如“YYYY-MM-DD-YYYY-MM-DD”肯定看不懂。

2、信息具有多强的时效性?

SNS和新闻这种时效性很强的内容,对于时效期内的信息,会倾向于提供“相对时间”。例如刚刚、X分钟前、X小时前、X天前,甚至X年前。

原因很明显,人们对相对时间更加敏感。例如日常对话里面,除非是太久远的东西,我们通常不会说哪年几月几号,而是更加喜欢说刚刚、X分钟前、X小时前、X天前,甚至X年前。

3、精确时间有必要吗?

数据库里,每一条时间记录都必须很精确,而对于人来说,却未必如此。

例如看一年前的普通新闻时,我们可能顶多对于哪年几月几号的信息感兴趣,而几点几分几秒就是几乎毫无意义的,写上去还挺占地方。

而看一年前的聊天记录时,时间信息却又很重要。例如早上发的信息还是晚上发的信息,意义是完全不同的。

Youtube 甚至把老视频的时间戳模糊到“X年前”,这不但给大部分用户提供了更加简单明了的信息,而且还节约了不少界面空间。

真正高明的设计,其实并一定是惊艳的概念稿。将每一个信息露出都计算到极致,才是我们那些很多让人引起视觉疲劳的产品所缺乏的。

超长信息

我们在设(fē)计(jī)稿上,经常会填充一些假信息,然而这些信息通常都不会太长以至于破坏画面美感。

然而现实情况是,尤其是像标题和描述这种东西,会有大量长度的超出范围的情况。于是开发们自由发挥一通后,其结果就不是你能想象的了:

eggfo4kulpp.jpg插图(1)

别说内边框保留多少,会不会超出、要不要换行这些基本问题都要搞清楚才行。等到要测试上线才发现,可能大家都懒得改了。

空数据

所有的列表都可能出现空数据的情况,所以说设计方案不可或缺。

如果是整页空白,那很好办,一般常见的情况是一张图配一行字。

vtdww2c4tae.jpg插图(2)
图片来源:https://dribbble.com/shots/6994649-Empty-State-Illustration

如果是分段式列表,会出现部分为空的情况。是整段移除,还是展空位,这就需要具体情况具体分析了。

nivc1tm0bbo.jpg插图(3)

还有可能是必须有图的地方没有图,也就是要提供一个默认图片。

texfj2vtgij.jpg插图(4)
图片来源:https://dribbble.com/shots/8576643-Split-The-Bill/attachments/843383?mode=media

加载

虽然理想中所有页面应该在一秒内加载出来,很多设计师甚至程序员都会高估了用户的网络环境。但是想想你自己平时的使用经验,由于各种乱七八糟的问题,页面加载三五秒是相当常见的情况。

而这几秒甚至半分钟的加载时间,很有可能是用户体验最糟糕的时候,你还不用心设计安慰安慰他们呢吗?

方法一:看见没在加载啦,等等吧

huud0h5ik3y.jpg插图(5)
来源:https://dribbble.com/shots/4543219-Loader

方法二:快出来了,喏,它会是长这样子

ay3xgeajgng.jpg插图(6)
图片来源:https://dribbble.com/shots/4891695-Loading-States

方法三:看看这动画打发一下时间吧,一不小心就到时间了

yjrj4esosrd.jpg插图(7)
来源:https://dribbble.com/shots/9714311-Loading-Animation-travel-technology-solution

方法四:伦家可努力了,求别怪我慢!

svjnnrnpwel.jpg插图(8)

异常状态

有句话叫做不怕一万就怕万一,这是世界上奇怪的状况太多了,我们设计产品时也不能至意外意外场景于不顾,何况有的异常状态根本不算意外。

异常一:加载失败

isw3an2txh5.jpg插图(9)
图片来源:https://dribbble.com/shots/2326563-The-Expression-of-The-Fork

异常二:失效操作

bjtszogpsd1.jpg插图(10)
图片来源:https://dribbble.com/shots/1727411-Netvibes-Uikit

异常三:提示

paulcdbnzje.jpg插图(11)
图片来源:https://dribbble.com/shots/6205974-Global-Notifications-Light-and-Dark-Theme

原文地址:知乎作者:Z Yuhan

人已赞赏
UI设计

Material Design Understanding motion 动效指南

2020-10-13 0:04:33

UI设计

UI组件-滑块 用户超爱的选择小助手

2020-10-13 2:05:11

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索