恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
3分钟教你将黄金比例应用在APP设计中
0.0°
2017-08-05 好文转载 教程 原作者: 未知 举报 3335 6 5 0

黄金比例是自然界中完美的比例,它也是非常重要的设计知识点。在我们日常生活当中随处可见。应用在家居、 电器、 徽标和照片上。我们的意识趋于和谐与美,和”黄金比例”是优雅的方式,使产品更舒适和很好的感知。

简单地说,黄金比例是一个设计工具或法则,让我们寻找在设计中的平衡。

下面我们看下自然界当中一些美的东西。确实黄金比例的最佳演示。Image title

下面举2个例子来跟大家一起来学习一下如何应用黄金比例工具来设计我们的APP界面。

第一个APP设计实战案例: ASOS 存储卡产品的 APP UI界面设计

该APP的第一个屏幕的查看照片和记录行动是可用的︰ 比如保存在收藏夹中,播放视频和分享。

假如你想要筛选产品的尺寸大小、 颜色、 面料描述的信息,然后在添加到购物车这一个过程会感觉很不舒服。因此下图左图,想要”快速”查看的产品是非常困难的。Image title

如果我们利用绘制”黄金矩形”的法则来优化这个UI界面,稍微按照右图那样放置元素,即可让整个APP UI界面的操作性大大的加强。

这种布局结构的调整,使得尽可能在第一个屏幕上展显出的最合适用户的数据和信息。

这就是采用黄金比例来进行APP设计的好处之一。

方便验证你的设计方案是否合理。

正如我们所看到的在”聚焦点”,我们还可以添加”保存到收藏夹” 这样的按钮和功能,在应用程序中的关键行动之一。而不是乱放,有根有据的放着新增的元素和功能。

元素必须放置在位于大拇指操作屏幕舒适内的距离,也就是下图当中的最大弧线的到右下角的区域,所以用户是很容易就可以用拇指按下与进行操作的。Image title

第二个APP设计实战案例:一个博客APP的详细页的UI设计

我们把有相当大的图片和文本的分为两个大区域。他们之间的比例应该是黄金比例。

如下图所示:Image title

然后在图片上,继续采用黄金比例把相关的 点赞 和 评论的 按钮放在图片的右下角上。

今天就跟大家分享这二个APP设计实战案例,就是想告诉大家可以通过黄金比例这个工具来布局我们的APP UI界面。设计出符合人性化的操作界面。

同时,也告诉大家每一个APP设计元素的摆放、位置的移动都是可以根据黄金比例来校验。动动小手点个赞。

更新:2017-08-05

收藏

6人已收藏

三秋q

UI设计交流群 191299792 注明 三秋q

  • 21

    作品

  • 60

    粉丝

  • 5

    关注

  • 界面配色配图技巧
  • 纯干货:PS高手完全应用宝典
  • Origami 制作天气动画
  • UI设计师设计基本指南

    猜你喜欢

      2017-08-05 好文转载 教程 原作者: 未知 举报 3335 6 5 0

      3分钟教你将黄金比例应用在APP设计中

      0.0°

      你确定要举报3分钟教你将黄金比例应用在APP设计中

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年08月05日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      5
      6
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录