12Grid 智能手机APP栅格系统(原创)

王朝学院·作者佚名  2016-05-05
窄屏简体版  字體:   |    |    |  超大  

12Grid是全球首款兼容多分辨率机型的智能手机应用界面删格布局系统,

使用该套栅格系统,设计师无需再计算尺寸,按照栅格自由布局即可,将大大加快手机应用设计的布局效率,将焦点集中在细节的设计和图形界面的创意

使用栅格系统,可快速布局成四列图标、三列图标、两列缩略图等基本常规的布局、以及更加自由的布局(如WinPhone的磁贴)、甚至手机游戏的界面布局等

一套设计,兼容640X960(1136)的iphone设备,480X800(845)等主流的Android设备,320X480的WebAPP(手机网站)

[flash=500,400]http://s1.knowsky.com/20131005/adgr1yrbnl3261642415.jpg[/flash]

注意:栅格系统只是一种布局辅助工具,可灵活根据实际项目需要在整体或局部合理应用,不宜过于依赖,限制创意思维。

基本布局案例:Basic Layout Example

[flash=500,400]http://s1.knowsky.com/20131005/5a5bjt4bjaq261642615.jpg[/flash]

[flash=500,400]http://s1.knowsky.com/20131005/jb2mqutheem291644215.jpg[/flash]

[flash=500,400]http://s1.knowsky.com/20131005/gp303cre3mo301644415.jpg[/flash]

[flash=500,400]http://s1.knowsky.com/20131005/wqf2lvk5jva301644715.jpg[/flash]

[flash=500,400]http://s1.knowsky.com/20131005/1chngntzmit301644815.jpg[/flash]

[flash=500,400]http://s1.knowsky.com/20131005/hen4kr2yax0311644915.jpg[/flash]

自由布局案例:Free layout Example

[flash=500,400]http://s1.knowsky.com/20131005/facu3231wnk311645115.jpg[/flash]

[flash=500,400]http://s1.knowsky.com/20131005/o0gspsnfefu311645315.jpg[/flash]

[flash=500,400]http://s1.knowsky.com/20131005/h2j3zhagn5a311645415.jpg[/flash]

[flash=500,400]http://s1.knowsky.com/20131005/stfbqq5v03u311645515.jpg[/flash]

[flash=500,400]http://s1.knowsky.com/20131005/3g4mcjr4m5f321645715.jpg[/flash]

[flash=500,400]http://s1.knowsky.com/20131005/pb1vkat2kvw321645815.jpg[/flash]

游戏布局案例:Mobile games Example

[flash=500,400]http://s1.knowsky.com/20131005/aq14k0yxh4i321646015.jpg[/flash]

[flash=500,400]http://s1.knowsky.com/20131005/tdqliexwy5p321646315.jpg[/flash]

[flash=500,400]http://s1.knowsky.com/20131005/nre1bzrwu1f331646415.jpg[/flash]

[flash=500,400]http://s1.knowsky.com/20131005/sxbthlrcj0a331646615.jpg[/flash]

如何使用:

请下载ZIP附件,内含各个模式下的PSD模板,只需根据项目或产品的需要,选择相应尺寸的PSD文件,用CS5.0以上版本photoshop打开即可。

另支持PS参考线插件“GuideGuide”插件的用法请去官网(http://guideguide.me/)了解。点击GuideGuide面板右上角,下拉菜单中选择“Import sets”并选择附件中“12Grid.json”导入,然后切换到“Sets”点选需要的参考线,点击下部“GG”按钮即创建参考线。

该栅格系统完全开源,可商业应用,欢迎各界技术牛人编写技术框架,我将集中推荐,并供免费下载使用。

适用于Pad的栅格系统即将发布,敬请关注

http://www.weibo.com/imtanlee

http://www.behance.net/tanlee

http://tanlee.zcool.com.cn/

若有好心人贡献个Dribbble邀请,相必真真也是极好的……

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航