APP UI 的界面看似只有几个简单的元素组合起来,所有元素的绘制可以说比较简单,然而当一个产品原型出来后,设计师如果单纯按原型来进行设计而不考虑信息化规则,那么很多时候就会出现不协调的效果。其实UI设计对版式的应用相当重要,懂得一些版式的原理,是设计良好视觉效果的前提。

1.信息的排布

对任何信息进行排布的时候,首先必须要掌握的是对齐/重复/亲密/对比,贯穿设计的四大原则。

金融ui设计作品模板

对齐除了能建立一种清晰精巧的外观,还能方便开发的实现。基于从左上至右下的阅读习惯,移动端界面中内容的排布通常使用左对齐和居中对齐,表单填写的输入项使用右对齐。

财务应用程序-概念v2

对齐

设计和做其他事情一样,也要有轻重缓急之分,不要让用户去找重点/需要注意的地方,应该让用户流畅地接收到我们想要传达的重要的信息。重复和对比是一套组合拳,让设计中的视觉元素在整个设计中重复出现既能增加条理性也可以加强统一性,降低用户认知的难度

组合概述

更多的案例可以到 搜UI (SOOUI) 有初学者需要的可临摹的优秀作品!

当然还有更多APP设计!

2.图片的使用

app的页面结构和文本确定之后,就要开始安排图标/按钮/图片的安排了,这时页面也就从单纯文本的“阅读”型结构调整为“观看”型结构,对于页面的易读性以及页面整体的效果会产生巨大的影响。页面中图片所占的比率叫做图版率,通常情况下降低图版率会给人一种宁静典雅、高级的感觉。提升图版率会有充满活力,使画面有富有感染力的效果。

购衣服与导航手机UIT

3.颜色的使用

不同的颜色可以带给用户不同的感觉,这点应该是常识。在移动端界面中通常需要选取主色,标准色,点晴色。移动端与网页端稍微不同,主色虽然是决定了画面风格的色彩但是往往不会被大面积的使用。通常在导航栏/部分按钮/icon/特殊页面等地方出现,会有点晴,定调的作用。统一的主色调也能让用户找到品牌感的归属,例如网易红/腾讯蓝/京东红/阿里橙等等。标准色指的是整套移动界面的色彩规范,确定文本/线段/图标/背景等等的颜色。点晴色通常会用在标题文本/按钮/icon等地方,通常起强调和引导阅读的作用。

壁纸应用程序登录屏幕!

4.留白的艺术

不单单是文字和图片需要设计,留白也是构成页面排版必不可少的因素。所有的白都是“有目的的留白”,带有明确的目的来控制页面的空间构成。

智能家居应用

5.视觉心理的灵活运用

在观看事物时,往往会产生一些不同的视觉心理,例如两个等宽的正方形和圆形放在一起,你一定会觉得正方形更宽。在版式设计中同样大量运用这些科学视觉方法对用户进行视觉上的引导,也能让设计师快速找到一些排版布局的方法。

美容化妆品应用设计

【可临摹UI设计干货】APP UI界面的版式设计理论!相关推荐

  1. 素材模板|APP设计师,都喜欢用插画来设计一些APP UI界面

    那到底为什么现在那么多APP设计师,都喜欢用插画来设计一些APP UI界面呢? 首先,插画是颇为常用的展示性元素,是视觉传达的重要工具. 所以插画在设计作品中,常常用来引导.启发和呈现信息,更有针对性 ...

  2. 当设计一个APP UI的时候我们想什么...

    当设计一个APP UI的时候我们想什么... 有句话说在前面--好看就是生产力,在app中是真实存在的. 品牌篇 图标篇 排版篇 微场景篇 动画篇 交互篇 一.品牌篇 品牌色从大的来说是VI需要优先考 ...

  3. UI素材模板|app ui界面的导航设计都有哪些?

    导航的使命就在于自身的"名称"上面,它叫什么名字就是在告诉用户"沿着这条路能通往哪里",所以导航的展示形式虽然多种多样,却大多逃不出文字的辅佐,这是因为它的本质 ...

  4. UI设计培训:UI设计师离不开的基本版式设计

    不管你是UI设计,还是工业设计,甚至动画设计,终究离不开基本的版式设计,所以版式设计这块非常考验设计师的基础功力. 1. 大且醒目&美观的排版设计 版面设计大概是一位设计师重要的部分,今年的版 ...

  5. 设计灵感|APP注册登录页面的设计形式

    注册登录页面是一个APP的门面,它的好坏与否直接影响着APP的用户数和用户体验. 作为一个设计师,其实经常时不时就会去下载一些APP,体验的时候经常被一些不尽人意的注 册登录页面弄的想怒摔手机,最终都 ...

  6. 磨金石教育设计干货分享|20个海报设计小技巧,果断打包带走

    我们做海报设计的时候,经常会在图文排版上花上很长的时间来构思,要让主题突出.要画面有活力.视觉冲击力要强.要给观者留下深刻的印象......那么今天小编就来分享20种海报设计的思路,让你在设计中思路清 ...

  7. 设计干货素材|UI设计中的插画模板,便于应用的好素材!

    插画开始以一种坚挺的姿势,站在设计趋势的最前列.不止是原本身处各个领域的画手和插画师开始越来越受追捧,而且连网页.UI和动效设计师都纷纷学习插画设计.当然,更显著的变化,是插画在网页和UI中的使用越来 ...

  8. UI素材干货|听说UI设计师更喜欢Sketch

    在Sketch出现之前,很多UI设计师手首选软件肯定是PS,不过大家对于PS的槽点也不少:设计新界面需要拉各种辅助参考线.切图很耗时.设计一个新界面又得重新创建一个文件等等. 然后,Sketch出现了 ...

  9. 仿知乎app登录界面(Material Design设计框架拿来就用的TexnInputLayout)

    在我脑子里还没有Material Design这种概念,就我个人而言,PC端应用扁平化设计必须成为首选,手当其冲的两款即时通讯旺旺和QQ早就完成UI扁平化的更新,然而客户端扁平化的设计本身就存在天生的 ...

最新文章

  1. 关于mybatis的xml文件中使用 >= 或者 <= 号报错的解决方案
  2. 霸王洗发水经理被指冲击报社殴打记者
  3. sourceinsight如何显示完整文件路径
  4. Docker将镜像上传至私有仓库
  5. Linux下查看文件内容
  6. Qt Designer快速入门
  7. 【机器学习】主题模型
  8. 互联网晚报 | 9月7日 星期二 | 徐雷升任京东集团总裁;顺丰宣布再投5亿扶持快递小哥;vivo自研芯片V1正式亮相...
  9. python如何调用阿里云接口_python 调用阿里云云解析api添加记录
  10. linux命令mount是什么,Linux命令——mount、umount
  11. strut2_struts.xml文件配置知识点汇集
  12. python解析xml选用什么模块_什么是适合Python的XML流解析器?
  13. w10系统服务器连接错误代码,Win10升级失败常见问题及错误代码解决方法汇总
  14. echart 最小值_EchartJS平均线、最大值、最小值
  15. A Game of Thrones(96)
  16. linux学习-执行cp命令时略过目录
  17. Mac自启动程序管理
  18. 进阶篇:4)面向装配的设计DFA总章
  19. 频繁通过win32api的createfile函数打开文件句柄导致内存泄漏
  20. 微信支付页面模板html,jQuery仿手机微信支付输入密码界面效果

热门文章

  1. 分布式任务调度平台XXL-JOB一
  2. 云计算实战系列八(存储管理I)
  3. 手机方舟官方服务器稳定吗,方舟生存进化手游选官服还是S服好?有什么区别...
  4. 字符串拼接,什么时候会走StringBuilder?
  5. python如何将数据保存到本地json文件
  6. oracle存储过程插入自动编号,Oracle生成单据编号存储过程的实例代码
  7. JVM学习-分代收集算法
  8. Linux 打包和压缩
  9. git的使用学习(五)git的分支管理
  10. 牛客网-《剑指offer》-跳台阶