加几条线，让你的H5瞬间立体感十足！
在H5作品中
总有一类作品能轻松抓住用户
它们设计感强
它们重点突出
需要很好的设计才能做到吗？
不需要
只要你学会利用线框
线框在对文字和图片的强调上
都能起到十分有针对性的作用
可谓是
百试百灵
屡试不爽
接下来小MA哥就给大家介绍一下
4种简单易学的线框设计
突出主题
▲
比如以上的例子，没加线框前会使用户感觉到很难抓住重点，而且整个页面趋向于平面化。
在加了线框后，因为线框做成了一个立体的四方体，让线框里的字在三维视角中上浮了一层，既突出了线框里的字，又使得整体更加有立体感和设计感
三维打造
▲
将平面设计立体化是杂志封面最常用的手法，只要利用简单的线框和线框内的元素通过前后位置营造视觉错觉，就能轻松凸显出立体空间的感觉。
集中排版
▲
有时候我们会经常把主题内容放在正中，尽量减少周围的元素使其突出，但不合理的留白会使得画面整体视觉松散，观看体验就会大大下降。
这个时候线框就能起到聚焦视野的作用，因为规则的边框轮廓能给我们齐整的视觉反馈。也能有空间让我们玩起一点小设计。
阅读引导
▲
当我们使用自由的字体排版时，很重要的一点就是引导用户阅读。如果只顾着设计形式，忽略了用户的阅读体验时，就会使用户没法接受你的内容。
不信请感受一下上图的区别，更好的设置线框去引导视线，告诉用户从哪开始阅读，哪些文字是在一起的，就会大大减少用户的阅读成本，提高愉悦度。同时当然也会更加的美观。
总结一下，线框在排版中的使用十分的灵活。既能使排版集中整齐、打造三维立体感官，还能凸显重点内容、引导用户阅读。
再给大家提供两个参考模板，只要你学着使用线框，一定会对它爱不释手的！
▼
▼
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）