欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

如何用网格系统设计出大师般的APP界面

发布时间:2018:01:16 19:41:44 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有964个文字,预计阅读时间3分钟
导语
色彩、图形、排版、网格等是构成系统四大视觉语言的基础原子单位,今天来说下网格系统在产品设计中的运用及定义方法。

  色彩、图形、排版、网格等是构成系统四大视觉语言的基础原子单位,今天来说下网格系统在产品设计中的运用及定义方法。

  

如何用网格系统设计出大师般的APP界面

 

  初识网格

推荐阅读:一款APP设计的从0到1之:Android设计规范篇

  

如何用网格系统设计出大师般的APP界面

 

  Pinterest

  就如上图所示,我们设计产品界面中离不开网格,网格让界面更加有节奏且信息层级更清晰,使我们能够舒适的阅读及很好使用产品。

  糟糕的网格系统是无规则,无节奏感可言,给用户呈现出一种劣质的产品

  目前产品界面设计的现状

  大家做平面设计的时候应该听过 Gird System即网格系统,那么我们在 APP 设计中如何正确使用

  看个例子:

  

如何用网格系统设计出大师般的APP界面

 

  左边和右边大家觉得那个间距好些?粗看如果不细心的同学看不太出多大的区别,那么我们看下他们的网格是如何的(基于750设计)

  

如何用网格系统设计出大师般的APP界面

 

  很多刚入行做设计的同学设计的界面就如同左边这样毫无规律可言,甚至有些工作几年的设计师也会出现同样的问题,没有科学的去定义系统间距,导致界面设计品质感低,无规律的去使用间距,如何才能提高产品品质?

  如何科学的定义 UI 的中网格系统

  定义 UI 网格系统方法很多,如运用8点网格系统、斐波那契数列、某最小原子单位的增量、从底层系统参数化定义间距等,本次就讲某最小原子单位的增量去定义网格系统

  (1) 首先确定基础间距原子单位,比如这里我定义最小数值为 6,那么以 6 为基准的去延展系统间距,得到如下间距系统

  1、2、6、12、18、24、30、36、42、48、54、60、66、72……、96、192等,这里都是 6 的倍数或能被 6 整除

  (2)继续优化梳理间距得到如下,为何要梳理?如果间距多,过于细碎也会导致画间距比较乱(以6为基准,前面个数是后面个数的2倍递增)

  1、2、6、12、24、48、96、112

  

如何用网格系统设计出大师般的APP界面

 

  (3) 实战演示

  

如何用网格系统设计出大师般的APP界面

 

  如右图所示我界面设计中所用到的间距参数都是前期定义好的间距,然后设计时候就使用定义好的间距,不要在随意的去增加间距,如果间距不够用,可以在继续以6的增量继续增加间距,灵活运用即可。

  其他组件拓展使用演示

  

如何用网格系统设计出大师般的APP界面

 

  上面的案例加上方法实战大家都清楚了么,上面案例的间距均来自我前期定义好的,其实很简单,方法要灵活运用,如果间距不够可以适当增加的,切记勿乱用间距。

  总结

  在定义间距过程中需要注意的点:

  最小原子单位并不是随意定义的,推荐以下;

  间距定义以某一最小原子的增量去定义;

  切记勿乱用间距,间距使用得有规律和节奏。

  作者:TONY,UX视觉设计师,喜欢探索一切新鲜事物,爱分享,,写文章。

  本文由 @TONY 原创发布。未经许可,禁止转载。

  题图来自 Unsplash,基于 CC0 协议

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:5大UX设计谬论,如何去补救?

下一篇:苹果Emoji 设计师:几百个风靡世界的表情是如何创作出来的(有彩蛋)

  • 18893 文章总数
  • 2301997访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信