Blog

上两节课,小编已经和大家讲了“盘点那些容易被忽略的APP设计细节之视觉篇和信息表达型问题”的内容,最后一节课将和大家说说概念表达的内容。 传送门:盘点那些容易被忽略的APP设计细节之视觉篇 盘点那些容易被忽略的APP设计细节之信息表达篇 随着用户对操作体验越来越重视,UI设计不仅需要具有较高的美观度,提升介面设计的可读性和易读性同样非常重视,甚至是影响用户体验效果的关键因素。不过,什么是可读性和易读性呢?如何提升UI设计的可读性和易读性?这就涉及概念表达的问题。 盘点那些容易被忽略的APP设计细节之概念表达篇 ① 相同介面下圆角及直角的统一性 同一个产品UI设计中,圆角和直角的选择必须统一,切勿出现混合运用而造成视觉表达不一致的问题。 另外,若选择圆角元素作为视觉语言,除了统一圆角设计风格外,统一相同模块下的圆角角度大小,也不可出现大小不一致的情况,确保整个UI设计的视觉语言更加规范和统一。 ② 设计元素的表达需符合用户心理 确保介面易读性的目的是为了更好地帮助用户理解介面的操作逻辑,如果Ui设计改变了用户的心理与习惯,可能会增加用户的学习成本,甚至被用户抛弃。 因此,进行UI设计时,如非必要,尽量不要改变用户的操作习惯;否则,需要做更多调研和测试这些创新的操作规则,确保这个规则符合用户的心理和目前用户的主流操作习惯。 ③ 设计表达的一致性 UI设计中,需保持相同信息模块采用统一的设计表达,避免视觉或操作出现变化而增加用户的理解成本。 前后信息采取多样性设计或许在视觉上变得更加丰富,却会让用户误认为这是两个不同的模块,甚至思考这两个模块在操作上是否保证一致,无形中增加用户的思考时间和学习成本。 ④ 别把网页习惯带到APP设计中 基于手机、平板与电脑的特性不同,网页设计与APP设计在本质上,同样存在很多不同的视觉表现规则。 在设计APP介面时,我们需要脱离一些网页设计的交互习惯,站在移动用户的角度去思考,让介面的操作逻辑变得更加顺畅。 ⑤ 让表单设计更加简洁 表单在APP设计中随处可见,但如果用户看到一望无际的表单,想到自己要把所有内容都填写好,瞬间就会产生一种不知所措的感觉。 为了缓解用户这种心理活动,在UI 设计时我们可以通过合并、归纳相同属性的表达,采用逐步填写,让用户产生错觉误认为“表单内容很少”,会更容易让用户完成表单的填写。 ⑥ 空介面中插画的运用 作为用户当遇到页面内容为空时,本身就是一件比较沮丧的事情。为提高APP的情感化设计,插画运用变得越来越普遍,比如在在空介面的一些设计中,使用应景的插画来代替纯文字设计,能带给用户更多的愉悦感。 ⑦ 运用真实的信息填充设计 很多设计师在策划APP设计稿时,整个介面都采用同一张配图,文案胡乱输入或索性用图形/符号表现,看起来非常不专业。 为减低视觉落地的差值,我们需要尽量运用真实有效的信息去填充设计稿,这样才能更好地与部门其他成员沟通,并提供一个还原真实场景的有效方案。 事实上,APP设计还有很多需要我们注意的细节,这里就不一一列举。不过小编还是想提醒企业主,无论是APP制作过程,还是APP运营中,都会遇到各种各样的疑难杂症,因此想要制作令用户满意且能获得收益的APP并不容易,最好还是交给专业团队处理!

上期,小编分享了“盘点那些容易被忽略的APP设计细节之视觉篇”,本期将继续延伸“容易被忽略的APP设计”的内容,和大家来说说关于信息表达型问题。 传送门:盘点那些容易被忽略的APP设计细节之视觉篇 在UI设计中,信息的处理过程可分为三个阶段,分别是感知信息、解释信息和整合信息。设计师会根据用户的视觉心理习惯对界面进行设计,选择合适的视觉表达信息,规划视觉信息结构,以帮助用户更好地阅读和理解信息。 盘点那些容易被忽略的APP设计细节之信息表达型问题 ① 明确表达图标的含义 虽然去掉图标文案后,会让界面显得更简约整齐,但是如果你不能保证用户能看懂图标所表达的含义时,最好还是使用辅助说明文案,确保图标的信息能准确地传递给用户。当然,如果图标本身带有很强的信息传达能力,能确保用户能正确识别,那就另当别论。 ② 正确表达按钮属性 通过按钮颜色、大小、风格等引导用户进行操作,需要强化的就要做得足够突出,不要让整个界面都处于主次不明的状态,分散用户的注意力,削弱界面需要传达的信息。另外,按钮设计必须清晰准确地传达当前状态,千万别为了视觉效果而给用户带来错误的判断。 ③ 正确处理文字排版的层级关系 进行文字排版时,正确处理信息间的层级关系,将提高用户对信息的识别度,以及界面的易用性。因此,我们通常会透过字体大小、颜色、留白,以及层级分割等技巧处理,将相同属性的信息归类设计,并通过留白的不同达到层级的区分,让整个信息排列主次分明、层级清晰。 ④ 线条与色块分割的合理运用 在分割界面信息时,要根据信息间的关系选择合适分割形式,比如线条通常用与分割同一类或相同属性的元素;色块则是用于分割不同类别或区分不同属性的元素,以达到界面层级清晰、归类明确的目的,不可为了视觉效果而盲目穿插运用。 ⑤ 提前预估信息呈现的最大化 进行界面布局时,需要明确信息呈现的最大值,而不是取最小值进行设计。虽然过于理想的长度范围或许让界面样式变得更加美观,但落地后可能会给用户带来非常糟糕的体验。 ⑥ 运用提示符提高用户阅读效率 在大篇幅的文字信息布局中,合理使用提示符能提高用户对信息的理解,以及快速找到所需的信息。一般来说,提示符是不限元素表达的(数字、字母、图形、色块等均可),只要能有效区分信息层级即可。 ⑦ 布局层次分明,重点突出 合理的界面布局是为了更好地引导用户阅读和操作,因此界面排版布局时绝非随意将信息罗列,而是要根据信息的侧重点进行排列。比如,利用卡片模式的大小变化区分信息,可以很好地引导用户视线,大大提高用户对界面的理解以及操作效率。 ⑧ 信息布局符合阅读习惯 大部分用户的阅读习惯都是从左到右、从上到下的,如果你要打破这个习惯进行视觉表现,将严重影响产品的用户体验,让用户产生放弃使用产品的念头。 信息传达是APP设计中非常重要的部分,它将影响整个界面的易用性和可用性问题,以及用户理解产品主旨的关键所在,所以做好信息传达,才能避免出现点击率高而转换率低的情况。 * 最后一堂课,小编将会整理关于APP设计中的概念表达问题,有兴趣的朋友不妨多多关注!

如今使用手机上网的人愈来愈多,甚至连搜索引擎都是以移动优先,使得APP设计也越来越受到公司的重视。那么,APP设计中有哪些细节是容易被忽略的?下面,让我们一起看看有哪些特别容易被忽略的APP设计细节,看看各位平时有没有重视! 盘点那些容易被忽略的APP设计细节之视觉篇 ① 统一的图标设计风格 图标设计风格多样,常见的有线性图标、填充图标、面型图标、扁平图标、手绘风格图标和拟物图标等,但无论在设计APP时选择何种图标表现形式,相同模块中的图标必须采用统一种风格,以保持界面的统一性。如果是线性图标,也需要保持一致的描边数值。 配色方面,相同模块中的图标应尽量采用相同的颜色;否则,避免使用饱和度以及明度反差过大的配色方案,影响整体的视觉协调。 ② 图标大小的视觉平衡 由于各个图标的体量不同,加上相同尺寸下不同体量的图标,其视觉平衡也不同(比如相同尺寸的正方形会比圆形显得大),因此为了保持整体视觉平衡,我们需要根据图标的体量对其大小做出相应的调整,而非执着于所有图标都采用相同尺寸。 ③ 优化分割线 由于分割线的作用是区分上下信息层级和界面装饰,因此我们需要尽量保证分割线的配色表现力低于文字信息,避免分散用户的注意力。最典型的案例就是,在浅色背景上,我们往往会选择浅色分割线,使界面更加简洁通透。 ④ 合理运用投影颜色与透明度 投影的运用应符合页面设计的氛围,其目的是为了增强元素的立体感与层次感,而不是影响整个页面的视觉平衡。 因此,制作投影时不能单纯用黑色和灰色,而是需要根据不同背景改变投影颜色和透明度。一般来说,浅色背景下的投影颜色透明度设置在10%~40%之间;而深色背景下的投影颜色透明度则建议设置在20%~40%之间, ⑤ 不要过度装饰,让界面更简洁 设计需要准确把握“度”,过度的设计只会干扰界面的信息传达;相反,减少不必要的设计元素,可以突出界面重要信息,并让整个界面变得更加简洁清爽,不会分散用户注意力。 ⑥ 图片比例&视平线的统一性 在人物展示设计中,若并列出现多个人物形象,为保持视觉平衡,需要调整并列图片的大小比例,像所有角色都在相同焦距下拍摄。另外,在人物上下位置的调整上,我们要尽量控制视频线的方向,让他们的眼睛处于相同位置。 ⑦ 控制好界面中的配色数量 通常,界面配色方案控制在3种颜色以下,相对比较容易把控。若超过3种以上的配色,就会非常考验设计师的功底,把控不当甚至会让整个界面非常凌乱。 另外,选择配色组合时,新手建议使用同色系或邻近色搭配,使整个界面色彩更加协调和交融;想更鲜明地突出某些元素,采用对比色是不错的选择。不过,无论选择哪种配色方案,都需要控制好界面中的配色比重,保证信息传达不受干扰。 ⑧ 合理地进行设计对比 鲜明的对比效果,能给界面带来丰富的视觉层次和强烈的视觉冲击力。除此之外,使用对比手法,还具备强调重要元素、增强界面的可读性,以及为界面视觉效果添加趣味性等作用。比如,很多设计师都喜欢使用不同颜色来区分不同信息模块,以提升整个界面的节奏感。 ⑨ 提高配图质量 图片质量影响整个界面的格调。现在很多企业为了提升在消费者心中的印象,都会对图片进行美化后再展现给用户。因此,在选用网站图片时,除了尽量考虑高清图片外,还需要通过后期裁剪、曲线调整、色彩调整等技巧,使图片的视觉效果更加协调。 最后,我想说…… 视觉设计是APP的重要组成部分,它不仅影响用户对APP的第一印象,甚至被认为是对APP最重要的印象。可见,重视APP视觉设计的细节是多么重要! 当然,有关APP设计的细节,并不只在视觉效果上,信息传达和概念表达同样有不少细节是需要我们重视的。欲知后事如何,请待下回分解!

MENU
網頁設計公司