上海UI培训
达内上海外滩中心

15026646813

热门课程

上海UI培训:APP UI界面的版式设计

  • 时间:2017-11-16 16:06
  • 发布:上海UI培训
  • 来源:达内新闻

APP UI界面看似简单的元素,在设计师进行设计时都要遵循一定的信息化规则,所以UI设计中懂得板式设计是设计良好视觉效果的前提。

今天上海UI培训小编与大家谈谈APP UI界面中的一些版式排版设计理论,这些理论知识在移动界面设计一定会给到你很好的帮助。

1.信息的排布

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

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

设计和做其他事情一样,也要有轻重缓急之分,不要让用户去找重点/需要注意的地方,应该让用户流畅地接收到我们想要传达的重要的信息。重复和对比是 一套组合拳,让设计中的视觉元素在整个设计中重复出现既能增加条理性也可以加强统一性,降低用户认知的难度。那么在需要突出重点的时候就可以使用对比的手 法,例如图片大小的不同或者颜色的不同表示强调,让用户直观地感受到最重要的信息。

在排布复杂信息的时候,如果没有规则地排布那么文本的可读性就会降低。组织信息可以根据亲密性的原则,把彼此相关的信息靠近,归组在一起。如果 多个项相互之间存在很近的亲密性,它们就会成为一个视觉单元,而不是多个孤立的元素。这有助于减少混乱,为读者提供清晰的结构。

在设计表达的时候,一定要考虑内容的易读性。适当使用图形可以增加易读性和设计感,而且图形的理解比文字更高效。那些用文字方式表现时显得冗长 的说明,一旦换成可视化的表现方式也会变得简明清晰,可视化的图形可以将说明/标题/数值这种比较生硬的内容,以比较柔和的方式呈现出来。

2.图片的使用

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

实际中也跟选取图片的元素/色调/表达出来的情感有关系,合适的图片也能散发出整个应用的气质,直接传达给人“高级”,“平民化”,“友好”等不同的感觉。

在内容比较少但是又想提高版面率的话可以采用一些色块,或者抽象化模拟现实存在的物件,上海UI培训班小编举例说明:电影票,书本纸张,优惠券,便签等的效果,使界面更 友好也降低空洞的感觉。通过这种方式也可以改变页面所呈现出的视觉感受,只是这种方法最多改变页面的色调/质感,并不能改改变“阅读”内容的比例,这点是 需要注意的。

3.颜色的使用

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

主色在选择上可能不止一个,点睛色通常也由两三个颜色组成,标准色更是一套从强到弱的标准群,那么在点晴色与主色,主色与主色之间的选择上便有不同的方法。第一种是邻近色配色(色相环上邻近的颜色),这种方法比较常用因为色相柔和过渡也非常自然。

第二种是同色系配色,主色和点晴色都在统一的色相上,给用户一种一致化的感受。

第三种是点亮色配色,主色用相对沉稳的颜色,点晴色采用一个高亮的颜色,起带动页面气氛,强调重点的作用。

第四种是中性色配色,用一些中性的色彩为基调搭配,弱化干扰。这种方法在移动端是最常见的方法。

还有一些渐变,明暗调对比,多色搭配等方法在这里不一一说明,你感受一下。

4.留白的艺术

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

常见的手法有几种,第一通过留白来减轻页面带给用户的负担。首屏对一个应用来说十分重要,因此一些比较复杂的应用首评都堆积了大量的入口。如果 无节制的添加,页面中包含的内容太多时,会给人一种页面狭窄的感觉,给用户带来强烈的压迫感,所以元素太多有时候反而不是好事。留白能使页面的空间感更 强,视线更开阔,通过留白来减轻页面的压迫感,使用户进入一种轻松的氛围。

上海UI培训班提醒大家值得注意的是,留白不是一定要用白色去填充界面,而是营造出一种空间与距离的感觉,自然与舒适境界。

5.视觉心理的灵活运用

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

6.设计心境

原大师也曾强调“最美的设计是虚无”,在界面设计中同样 追求一种“让用户感受不到设计”的境界。每一条线/每一行文字/每一个按钮的存在都是都有它存在的理由。上海UI培训说重点:不加无意义的修饰、不须陪村和烘托,让用户更关注内容的主体,弱化对视觉的认知。甚至于用户在滑动时看到一个按钮或一行文字也感觉这是理所当然的存在。

学习使我们处于不败之地,IT学习更能让我们适应互联网+大数据时代的高速发展,上海达内带你一同走进魔都的高薪阶层,做更有价值的事。【上海UI培训机构】达内

扫码获取免费学习机会

上一篇:抠图这种事,不如让人工智能神器帮你
下一篇:真人绘制成Q版【上海ui培训手绘教程】

上海达内UI培训班,教你如何做正确的设计?

UI设计培训班适合自己的才是好的

UI设计像时尚一样,每个月都有新的流行趋势

集才华与智慧于一身全栈UI设计师

选择城市和中心
贵州省

广西省

海南省

免费学习5天VIP课程