我的设计成长笔记—第18篇(UI设计6)

发布时间:2024-04-01 10:52:27 浏览量:222次

UI设计6

2019年6月3日

今天是我距离30岁的倒数第284天

这里是我的设计成长笔记

—————————————————

视觉实现

规范制定完成后下一步就是视觉稿的实现了,这个阶段只需要把重点放在视觉表现力上就好,规范里基本的框架,配色,字体,字号,组件都已经确定了,在这个阶段需要做的是灵活的使用这些规范,确保设计的视觉一致性,配合运营思路、数据导向等进行视觉稿的优化处理,比如icon样式,页面排版、banner设计等。(可能因为我对规范的制定能力还不足的原因,我在视觉实现的过程中会发现规范有些不足或者失误的地方,这时候会进行一个反向的修改,重新优化视觉设计规范。)

开发实现

这个阶段经常遇到的问题就是开发实现还原度不够,或者实现不了。

通常发生这种情况是因为

1、设计规范不标准或者设计稿制作不严谨

2、开发人员能力不足、态度不端正

3、开发人员对细节产品认知不严谨

4、开发人员工作量大,觉得设计稿部分内容不必要

5、缺乏团队沟通

6、缺乏走查流程

作为设计首先先自查,是否输出文件都是标准的,是否认真对待了每一个像素;其次考虑实现的必要性,是否必要,,是否可替代其他方案解决,是否可以推迟下一个版本;最后,如果确定是开发人员能力不足的情况,进行团队沟通,商讨出现阶段的解决方法。

填一下前面的坑

切图标注

UI设计第1篇的时候介绍过尺寸单位,

第5篇的时候介绍了命名规范,点击可以查看

UI设计1

UI设计5

切图一般分为iOS和Android两种(贸易战后可能也会出一种叫Huawei os的吧)

切图标注现在基本已经完全脱离手动操作了,蓝湖、墨刀、sketch measure、ps Pxcook、cutterman、zeplin等。

只需要把命名好的文件,标注好切图的范围后,上传OK,然后把上面的链接抛给开发即可,内置颜色,尺寸,字号,全部都有,切图也可以一键下载(只要你在文件里都标注过切图范围的)

需要注意的地方有

1、标注尺寸不要有小数。

2、@3x是@2x尺寸的1.5倍,例如一个图标切图@2x尺寸是44px,那么@3x尺寸是66px。

3、尽量降低图片大小,保障后期加载速度。

4、44px是最小点击区域,注意不要比这个小。

5、44px图标可以适用两个平台,大尺寸的适配66px即可

6、点九切图需要特殊对待(后续可以加一篇)

开发阶段除了前端的界面设计,还有后台设计,一般后台都是自己内部使用的,所以不需要界面美化的过程,但是仍然需要一套标准的规范去约束,这时候就引入vue的概念了。

好,就到这里。

——————————————————

文中涉及相关链接

https://zhuanlan.zhihu.com/p/26529771

https://zhuanlan.zhihu.com/p/26593299

热门课程推荐

热门资讯

请绑定手机号

x

微信扫码在线答疑

扫码领福利1V1在线答疑

点击咨询
添加老师微信,马上领取免费课程资源

1. 打开微信扫一扫,扫描左侧二维码

2. 添加老师微信,马上领取免费课程资源

同学您好!

您已成功报名0元试学活动,老师会在第一时间与您取得联系,请保持电话畅通!
确定