一直在努力研究
SEO技术

APP设计的四大要素是什么?怎么让你的UI界面更满足大众需求

APP设计涉及很多流程,需要仔细深入思考才能使UI界面更满足目标受众的需求。即使看起来不太复杂的界面,仍有不少细节需要不断深入推敲。

APP设计的四大要素是什么?

要素一:设计好看的图标

1.图标风格

1

1)面性图标:分为规整图标和异形图标。

规整图标:多用于APP首页,占有面积大、视觉表现力强,具有很好的导流作用,并且可以做出丰富的视觉效果。

异形图标:视觉表现力稍弱,但识别度略高,可用于个人中心等版块,区分层级关系。从业务层级而言,重要性:规整图标>异形图标。

2)线性图标:视觉表现力较弱,但识别度强,但用于功能按钮和标签栏。线性图标分为:圆角、直角、断线,线面结合图标,不同图标表现的风格也不一样。

圆角图标,表现出可爱年轻活泼,有亲和力的基调。

直角图标,风格更加硬朗,充满了力量感。

断线图标,贯穿整个APP的图标形成统一风格,以及独特的产品调性。

线面混合图标:使形式感更加丰富,视觉层级性强,适合偏活泼,年轻化的风格。

除了上述的图标,还可以从颜色上进行一些处理,如渐变图标、单色双色多色图标等。

2.统一规范

2

1)面的统一:

规则的面性图标,里面挖空的图形面积要统一,不能出现大小不一或视觉重心不一致的情况。

颜色方面,尽量根据业务属性,取业务相关的其他四种作为邻近色,且每种颜色的跨度不能太大,保持他们的饱和度和明度统一。

2)线的统一:保证线条粗细统一是图标设计最基本的要求,一般来说细线显得精致,粗线显得厚重敦实,选择时可根据自己的产品调性来决定。

3)角的统一:直角显得更加硬朗,充满了力量感。圆角则显得温润尔雅,但如果圆角过大,就会显得图标偏卡通感觉,由于不同角给人的感觉都不一样,因此「角」的统一性也是必要的。

要素二:板式的原理

1.栅格系统

栅格系统运用固定的格子设计版面布局,其风格工整简洁,这种方法现在也被应用在移动设备和网站设计等领域里。

1)创建栅格系统:科学的栅格布局设计应该是,内容信息密集,宽度较小,列数较大;内容信息较为稀疏,宽度较大,列数较小。

2)移动设计的栅格:移动端设计中,「8」针对移动端设计更有优势,可以缩成1倍图,而没有虚边,所以移动端主流尺寸都是8的倍数。做其他设计时,也可以将不同留白设计成有倍数关系的数字,使设计内部更有逻辑性。

2.对比原则

对比原则应用广泛,可运用到各种设计,并使画面层次感变得更加丰富。

1)颜色对比:界面设计中的颜色对比,多用于产品标签或交互按钮上。

2)文字对比:从大小、粗细、颜色进行对比,会让信息层级变得清晰可见,同时还影响整个界面的呼吸节奏感。

3.亲密原则

根据信息关联性来排版,能帮助用户快速获得信息,使阅读起来更加清晰明亮了。

4.重复相似内容

保证统一的排版样式,同时对图片排版做一些变化,这样可以增加界面的条理性和加强设计的统一性,同时还能使界面变得更加丰富。

5.简单原则

近年来APP设计趋势越来越遵循简单原则,去掉不必要的视觉元素,减少干扰,做减法,用留白去塑造简单等,以达到简洁清晰的视觉效果。

要素三:颜色搭配

3

讲色彩之前,首先要掌握色彩的基本知识,这个只针对比较重要的部分来说,毕竟接触设计这一行基本都会对这个有一定的理解。

1.色彩运用:色彩构成一般分为主色、辅助色和点缀色。主色一般用在主要按钮交互和导航栏和个人中心背景;辅助色起到调和作用,丰富视觉,以及在一些按钮上和主色形成区分;点缀色用得少,主要用来点缀界面。

2.单色系搭配:运用较广泛,视觉统一和谐,但略显呆板和沉闷。

3.互补色搭配:视觉非常强力,多用在年轻个性潮流的产品上,但注意两者拥塞的比例,遵循大自然色彩规律,暖色调小面积,冷色调大面积。

4.近似色搭配:相对于单色系单配,既和谐统一,又不会显得那么呆板沉闷。

5.创建色彩:体验不同领域的APP,建立不同领域对APP色彩组合的选择,为后期项目设计奠定基础。

要素四:图片选择

4

图片在APP有着举足轻重的地位,新手往往会忽视图片的重要性,而随意配图,导致整个界面变得凌乱。

1.图片比例:APP的图片比列主要分为:1:1、4:3、16:9。

1)1:1图片比列规整简单,易排布,能够突出主体。常用于产品展示和电商类APP。

2)4:3图片比例能使图像更紧凑,更易构图。多用于左右排版的文章列表,常用于旅游类的产品图。

3)16:9图片比例视野开阔,适合横向构图。在视频影音娱乐类的产品中经常使用

2.二次处理:如果对网上找的图片不太满意,就需要对图片进行二次处理,例如:调色或调整图片大小等。

3.产品调性:APP设计中的图片的使用会直接决定产品的整体调性,例如:

1)图片质量会直接影响整个界面的格调;

2)图片规范能保持整个产品的图片构图一致、背景一致。

APP设计看似简单,但如果要做得出彩,就需要从多细节和深层次的知识点去挖掘,从平日的学习和工作中积累出来。  ​

原创文章,转载请注明: 转载自「月噬仙博客」

本文链接地址: APP设计的四大要素是什么?怎么让你的UI界面更满足大众需求

文章的脚注信息由WordPress的wp-posturl插件自动生成

赞(0)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址