加幾條線，讓你的H5瞬間立體感十足！
在H5作品中
總有一類作品能輕松抓住用戶
它們設計感強
它們重點突出
需要很好的設計才能做到嗎？
不需要
只要你學會利用線框
線框在對文字和圖片的強調上
都能起到十分有針對性的作用
可謂是
百試百靈
屢試不爽
接下來小MA哥就給大家介紹一下
4種簡單易學的線框設計
突出主題
▲
比如以上的例子，沒加線框前會使用戶感覺到很難抓住重點，而且整個頁面趨向于平面化。
在加了線框后，因為線框做成了一個立體的四方體，讓線框里的字在三維視角中上浮了一層，既突出了線框里的字，又使得整體更加有立體感和設計感
三維打造
▲
將平面設計立體化是雜志封面最常用的手法，只要利用簡單的線框和線框內的元素通過前后位置營造視覺錯覺，就能輕松凸顯出立體空間的感覺。
集中排版
▲
有時候我們會經常把主題內容放在正中，盡量減少周圍的元素使其突出，但不合理的留白會使得畫面整體視覺松散，觀看體驗就會大大下降。
這個時候線框就能起到聚焦視野的作用，因為規則的邊框輪廓能給我們齊整的視覺反饋。也能有空間讓我們玩起一點小設計。
閱讀引導
▲
當我們使用自由的字體排版時，很重要的一點就是引導用戶閱讀。如果只顧著設計形式，忽略了用戶的閱讀體驗時，就會使用戶沒法接受你的內容。
不信請感受一下上圖的區別，更好的設置線框去引導視線，告訴用戶從哪開始閱讀，哪些文字是在一起的，就會大大減少用戶的閱讀成本，提高愉悅度。同時當然也會更加的美觀。
總結一下，線框在排版中的使用十分的靈活。既能使排版集中整齊、打造三維立體感官，還能凸顯重點內容、引導用戶閱讀。
再給大家提供兩個參考模板，只要你學著使用線框，一定會對它愛不釋手的！
▼
▼
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）