设计的思考

blank

设计的思考

在配图还在旋转的过程中,让我们站在前端角度聊聊对于动态网页设计的一点思考。

思考来源于生活和工作中遇到的问题和现象,最近一直在做一个大表单的页面改版,在比照设计稿改动页面的过程中,有些问题值得深思。

刚拿到设计稿的时候,看着设计的很简约很舒服的页面特别心喜,不知道作为前端的你会不会有这样兴奋的感觉,一心想把这个页面规划好,但是随着着手操作实施,许多问题都出现了。

设计稿是静态的,如何让它动起来是需要产品和设计就前端开发遇到的问题和实现度上考虑,进行思考和定夺的。第一版的设计稿是考虑不到那么多的细节问题的,可能展示的只是这个产品流程中观察到的一部分内容。比如我的表单中有较为复杂的图片上传模块,地址选择模块,富文本编辑器模块,添加视频,图片,关联页面模块等等会涉及到很多弹层和多状态的组件。设计师给到的可能只是在前端页面上展示的最初内容。这个是需要前端工程师在不断实现需求的过程中,要反复和产品和设计师沟通的地方。

上面讲到了设计初稿没有考虑到的问题,下面来说说这些都考虑到了之后,还会出现的问题。比如这个设计你是否设计的是合理的?举一个我最近遇到的例子:上传文件的组件。

设计稿给出了如下内容:

  • 上传的按钮
  • 上传限制提示文字
  • 上传后图片展示
  • 继续上传按钮

作为前端写代码的时候,我会考虑的问题是:

  • 页面里多处涉及到上传文件功能
  • 上传文件图片组件是否可以提取,复用
  • 对于复用组件,它的输入,输出,可变的东西 & 不变的东西
  • 为了实现设计稿是会多写很多冗余的代码,还是很方便简洁的就可以实现

对于现有的设计稿,我在实现的过程中,可能希望设计稿添加的内容是:

  • 上传图片后展示图片是横向排列,纵向排列 (是否会影响整体页面的布局)
  • 多张图片上传后,上传图片后是否添加删除功能,删除按钮如何设计展示
  • 为上传按钮和上传后继续上传的按钮,是否可以尽量满足设计的一致性(便于代码的可复用性)
  • 只上传一张图片,还是支持多张图片上传,不同情况如何考虑,展示
  • 上传失败后的错误提示如何展示,对应文案是什么,如不能上传超过2M的文件,只允许上传 .png .jpeg .pdf 格式的文件

我暂时遇到和想到的问题是这么多,我觉得每一个细节的部分,是否值得拿出来和大家讨论和完善,是取决于多方面的。比如实现和设计的人是谁,是否想完善讨论这些事无巨细的内容?大家是否重视或有时间思考这些问题?这个需求满足使用的用户是谁,如果有或者没有这些细节点的结果是什么?等等都是需要我们关注的点。。。

上面这些是我思考的内容,想在这里记录和大家聊聊,我觉得有的问题适合思考,有的问题适合思考后实现改善,有的问题不适合拿来讨论。你的生活中可能遇见过很多值得思考的问题,不一定非要解决它,但这个问题值得你想一想。

注:配图是 zeplin 网站的首页 loading 图,不知道为什么进这个网站总是要靠运气?

What do you think?

Written by marketer

blank

设计师们是如何思考的?

blank

什么是设计?