12Grid是全球首款兼容多分辨率机型的智能手机应用界面删格布局系统, 使用该套栅格系统,设计师无需再计算尺寸,按照栅格自由布局即可,将大大加快手机应用设计的布局效率,将焦点集中在细节的设计和图形界面的创意 使用栅格系统,可快速布局成四列图标、三列图标、两列缩略图等基本常规的布局、以及更加自由的布局(如WinPhone的磁贴)、甚至手机游戏的界面布局等 一套设计,兼容640X960(1136)的Iphone设备,480X800(845)等主流的Android设备,320X480的WebAPP(手机网站)
注意:栅格系统只是一种布局辅助工具,可灵活根据实际项目需要在整体或局部合理应用,不宜过于依赖,限制创意思维。
基本布局案例:Basic Layout Example






游戏布局案例:Mobile games Example




如何使用:
请下载ZIP附件,内含各个模式下的PSD模板,只需根据项目或产品的需要,选择相应尺寸的PSD文件,用CS5.0以上版本Photoshop打开即可。 另支持PS参考线插件“GuideGuide”插件的用法请去官网( http://guideguide.me/ )了解。点击GuideGuide面板右上角,下拉菜单中选择“Import sets”并选择附件中“12Grid.json”导入,然后切换到“Sets”点选需要的参考线,点击下部“GG”按钮即创建参考线。 该栅格系统完全开源,可商业应用,欢迎各界技术牛人编写技术框架,我将集中推荐,并供免费下载使用。
下载地址:http://vdisk.weibo.com/s/BJ9dbBuvuy_ZV
本文链接:http://www.mobileui.cn/12grid-app-grid-system.html
本文标签: 图形界面, 应用设计, 手机应用, 手机网站, 栅格, 栅格系统
谢谢