码迷,mamicode.com
首页 > Web开发 > 详细

移动APP设计如何排版好看

时间:2016-07-10 14:00:51      阅读:386      评论:0      收藏:0      [点我收藏+]

标签:

我们时常会看到很多优秀的移动UI设计。那么这些设计到底是怎么设计出来的呢?我总结了一些深层次的技巧。

相似
距离相近的各部分趋于组成整体。
当我们需要组织、分割信息的时候,运用格式塔心理学的方式,可以很好地梳理信息布局。在信息以列表形式重复出现时,我们可以尽量使用相同颜色、大小、形状的图形或者文字尽量以重复的形式呈现。
“相似”的应用
相近
不同的元素当其距离相近的时候,用户从视觉上趋向于将其归于一个整体。
“相近”的应用
当行间距较大时,其本身可以作为分割内容的一种方式。
连续
一个图形的某些部分可以被看作是连接在一起的,这些部分会被我们知觉为一个整体。这样我们可以在界面空间有限的情况下,引导用户的视觉流。
“连续”的应用

文字
通常在中文app中一般都以一种中文字体作为默认字体,因此在此不讨论不同字体搭配对于app中视觉效果的影响。
文字大小
在一定区域内,不同功能的文字大小的不同会直接影响用户浏览接受信息的程度。通常选用28px~34px之间的字体大小比较合适阅读。相对来说,文字越小,其被接收程度越低。相同大小的文字在相近区域,用户浏览更容易理解为同一功能。
文字颜色
明度的对比:在一个app中颜色的深浅除了受到底色的影响,同时也受到周围其他文本颜色对比的影响。当不同信息优先层级的文字用统一颜色时,浏览者在理解上容易增大其关联度,从而容易造成信息理解混乱。
色相的对比:在黑白灰的颜色区域中,如果有局部颜色相对来说都会更容易吸引用户注意。
文字和背景
文字和背景只有在高对比度下才能友好地被用户阅读,在应用不同颜色的文字和背景配比时,建议参考以下评估结论:
间距
图文与屏幕边距是否符合产品诉求。
通常来说,在图片和屏幕边距之间保留一定的像素边距可以更好地引导用户竖向往下阅读。
图为“豌豆荚一览”
而当图片与屏幕边距为0的时候,用户更容易将注意力集中在每个图文内容本身,其视觉流线在往下浏览时,因为没有留白的引导,被图片直接割裂,造成在图片上的停留时间更长。
对比,当图片不留边距时,用户更加聚焦在每个图文本身,而非被留白引导往下翻阅
行间距是否适合用户阅读
在内容型文本中,文本行间距太窄会容易造成阅读困难。通常的经验值,行间距大约是字体间距的1.2~1.5倍之间,总体阅读会比较舒服。
对比行间距1.5倍 VS. 行间距1



原文来自:移动信息化

移动APP设计如何排版好看

标签:

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
jiangjie190
加入时间:2016-02-19
  关注此人  发短消息
文章分类
jiangjie190”关注的人------(0
jiangjie190”的粉丝们------(0
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!