首页 > 建站资源 > 网站优化 > 24个UI案例对比 教你如何提升APP设计品质

24个UI案例对比 教你如何提升APP设计品质

时间:2017-08-15    来源:设计达人

入手的新人或是经验不足的设计师,往往很难把控APP界面的设计细节。字号差一点、主次区分不清、投影深了一点点、配图不统一等。都能决定UI界面的品质。

下面用24个案例为大家分析移动APP界面的细节,这些往往是新手设计师常犯的错误,请大家认真看看,会有收获。

一、视觉表现型问题

01、勿过度装饰,让更界面简洁

设计需要准确的把握“度”,过度的设计会干扰信息的传达。减少不必要的设计元素,让信息脱引而出,整个界面将会更加简洁清爽,也不会分散用户的注意力。

02、图标大小的视觉平衡

同一个界面出现多个图标时,我们需要保持整体的视觉平衡。并非是所有图标都采用相同的尺寸就能达到平衡,由于图标的体量不同,相同尺寸下不同体量的图标视觉平衡也不相同,例如相同尺寸的正方形会比圆形显得大。因此,我们需要根据图标的体量对其大小做出相应的调整。

03、优化你的分割线

界面设计中往往细节的处理最容易被忽略,根据界面配色的不同,我们在分割线色彩的选择上面也要做出相应的调整。由于分割线的作用是区分上下信息层级和界面装饰,配色的表现力要低于文字信息的力度,通常我们会选择浅色而否定深色,这样界面会更加简洁通透。深色的分割线要慎用,除非在一些特定的产品场景下。

04、合理的运用投影的颜色与透明度

通过对按钮、卡片等进行投影运用可以增强立体感与层次感。我们在制作投影时,需要根据不同背景改变投影的颜色、透明度。

浅色背景下投影的颜色会选择拾色器偏左上角的位置和透明度在10%~40%(个人经验)之间进行调整。深色背景下投影的颜色会选择拾色器偏右下角的位置和透明度在20%~40%(个人经验)之间进行调整。

投影的权重要符合页面设计的氛围,投影的运用是为了增强元素的立体感与层次感,而不是影响整个页面的视觉平衡。

05、统一的图标设计风格

图标设计在整个APP设计中是比重较大的板块之一,图标设计风格有:线性图标、填充图标、面型图标、扁平图标、手绘风格图标和拟物图标等。无论我们选择何种表现形式的图标都请保持统一性,相同的模块采用一种风格的表现形式,如果是线性图标就保持一致的描边数值。

图标在配色上面也要保持有规律的统一,采用相同颜色是比较常用的配色方式。如果你采用不同色相的配色方式,要保持整体的配色协调,不要出现饱和度、明度反差过大的配色而影响整体的视觉协调。

06、图片比例&视平线的统一性

在人物展示的设计中,如果并列出现多个人物形象,为了保持视觉平衡我们需要调整并列图片的大小比例,就像所有角色都是在相同焦距下拍摄的。在人物上下位置的调整上面我们要尽量控制视平线的方向,让他们的眼睛处于相同的位置左右。

07、控制好界面中的配色数量

一个界面中出现3种左右的配色是相对比较容易把控的,如果超过3种以上的配色,是非常考验设计师功底的,如果颜色的处理不到位就会出现五彩斑斓的“视觉盛宴”。

在选择配色组合时,使用相似色的配色方案可以使颜色更加协调和交融;如果希望更鲜明地突出某些元素,对比色是不错的选择。无论选择何种配色方案,都要控制好界面中的配色比重,使信息传达不受干扰。

08、合理的进行设计对比

通过对比可以让信息模块更加独立,界面层级关系更加丰富。案例中以不同的背景颜色区分不同的信息模块,提升了整个界面的节奏感。颜色的选择可以是同色系中不同明度的梯度表现,也可以选择不同色相的穿插搭配。

09、提高配图的质量

图片的质量影响着整个界面的格调,现在越来越多的产品都会对图片进行美化后再展现给用户,目的就是为了提升产品在用户心中的印象。我们在设计提案的时候对配图的选择也要精挑细选,通过后期裁剪、曲线调整、色彩调整等技法使相同模块的配图视觉效果更加协调。

二、信息传达型问题

10、明确表达图标的含义

去掉图标文案之后界面会显得更“逼格”,可是你确定用户能看懂图标表达的含义吗?我们在进行界面设计时,图标是为了辅助说明文案所传达的信息,如果去掉文案信息,那么需要图标本身带有很强的信息传达能力,确保用户能正确的识别。

11、正确的表达按钮属性

按钮的设计必须要清晰准确的传达出当前状态,不能为了视觉效果而带给用户错误的判断,例如深灰色的按钮用户会理解为是禁用状态而放弃点击。

通过按钮的颜色、大小、风格等来引导用户进行操作,需要强化的就要做得突出,不要整个界面都处于主次不明的状态,分散用户的注意力,削弱了界面需要传达的主旨。

12、正确处理文字排版的层级关系

工作中我们拿到的需求总会出现大篇幅的文案,不能像概念设计那样任性的删减,在进行文字排版的时候,正确的处理信息之间的层级关系将会提高用户对信息的识别度。我们通常会通过字体大小、颜色、留白、层级分割等技巧来处理,把相同属性的信息归类设计,通过留白的不同达到层级的区分,让整个信息排列主次分明,层级清晰。

13、线条与色块分割的合理运用

线条通常用于分割同一类别或拥有相同属性的元素;而色块更多的是用于分割不同类别或者区分不同属性的元   素,以达到层次清晰,归类明确的目的。我们在选择分割形式的时候要根据信息之间的关系作出明确的达,不可为了视觉效果而盲目的穿插运用。

相关推荐
有效提高网站销售转化率的16个UI设计秘诀
32条优秀UI设计建议 助你提升网页易用性及转化率(1)
32条优秀UI设计建议 助你提升网页易用性及转化率(2)
2017版“我的淘宝”可能是迄今为止最懂你的设计
iOS 11 设计中的几个 UI 设计细节
UI设计规范:单选按钮vs复选框要怎么用?
老年用户的体验思考:如何保证界面适合阅读
UI界面设计:空心图标是否比实心图标难以识别?
制作完美搜索框的9个要素设计原则
探探和Linkedin都用的卡片设计 怎样才有好的体验?
为什么你爱用的App,都用卡片式设计?优势在哪?
手机淘宝卡券包的改版设计经验分享
手淘首屏设计是如何用户逛得停不下来?
APP设计教程:特殊情况下如何处理加载页面?
APP设计教程:UI界面中的版式设计理论
APP设计:移动端下拉表单的更好选择
App启动页分类与设计逻辑
APP移动应用弹窗设计指南
如何让APP图标设计得有特色?
网页设计必读!125个小优化提升网页可用性(二)
网站优化:“进度条”如何有效的帮助用户体验设计
手机刷网页也可以很畅快,背后有这12个设计原则
网站改版设计:米大师web改版之设计总结
电商设计:详情页如何消除用户疑虑,轻松提升转化率?
电商设计:一款完整的电商产品都涉及哪些内容?
让网站404页面变的更加实用的5个技巧

精彩推荐

热门教程