将颜色合并到设计中后,请继续检查总体设计感并进行调整。
●⑧注意细节
在设计时,你应该退后一步来查看整个设计并进行完善。通过用简单的语言描述您所看到的内容来批判你的设计,然后将该陈述转换为需要解决的技术问题。
- 看起来紧凑吗?增加填充和边距。
- 文字难读?选择更清晰的字体或增加字体大小。增加背景和前景之间的颜色对比度。
- 内容难识别?添加具有较高字体粗细的标题。在标题和段落之间添加更多间距。
- 看起来草率或不一致?在水平和垂直的直线上对齐元素。在设计程序中设置指南可以帮助确保元素正确对齐。调整填充和边距,以保持垂直方向上一致的间距。通过建立标题和段落的字体和大小来使文本一致。避免文本变化太多。确保所有颜色都符合你的调色板。
●①创建HTML结构
Github上有个项目是 pix2code ,它可以直接将页面生成HTML结构并附加CSS代码,已经开源了,感兴趣的可以去看看,确实很吊。
国内暂时还没有这样的项目,想搞拖拽开发的老板真是不少,但没见过谁家真正做出来了,做不出来肯定不是技术不能实现,拖拽的本质是在组件库基础上加了一层交互界面,所以组件化是拖拽开发的第一步,剩下的其实就是"layoutit"了,但要真正落地,就有很多限制。
可拖拽的组件应该是封装了控制层和视图层的,原则上耦合越低越好,内聚越高越好,自己浑然一体最好,只对外暴露配置项,也就是说将一个组件拖拽到界面上之后,得有一个动态生成配置面板的机制,"layoutit"也有一个简单的配置机制,但远远不是生产级别的,这里可以统一约定一个规则,让组件的配置项可以被读取,也可以按组件枚举,硬做到界面上,都可以,都有优缺点;
互相依赖的组件之间的数据交互会有问题,因为各组件的输入输出不可能完全一致,也就做不到依赖组件之间无缝接入,常规开发中开发者会手动做一些"适配"工作,比如将A组件的输出剪裁或修饰一下传给B组件,但现在是搞拖拽,这个数据修饰没法做了,可以修改组件做到可以互相适配,或者一步到位在拖拽系统上做一套数据修饰的中间功能,让操作者自己适配,都可以,都有很大的缺点。
所以在这里我们也只好一步步的自己切页面了,尽可能是响应式的,同时按设计稿填充的内容在HTML结构填充元素。
●②小技巧
将布局变成完整的设计时,我喜欢考虑将设计从上到下划分为多个部分的水平线。顶部的导航栏可能是第一个切片。中间的可能是一个切片,底部的是一个切片,我会将他们用明显的线条区分开来,使用不用的颜色,美观而又清晰。