Blog

顶部导航栏,无论在APP设计还是网页设计,都是出镜率极高,且最重要的组件之一。看似简单的顶部导航栏,其实在设计的时候需要我们注意很多细节,下面香港网页制作公司就为大家汇总常见顶部导航栏样式的设计技巧,希望能帮助大家更容易设计导航栏这个组件。 常见顶部导航栏样式的设计技巧有哪些? ※ 常规导航栏 常规导航栏是大多数APP设计和网页设计都会使用顶部导航栏样式,其主要有操作图标、标题、搜索框、背景等组成,其种类大致分成以下三种: 1. 简单标题导航栏   这种导航栏常见于二级详情界面或导航简单的以及界面,主要由操作图片与标题组成。简单标题导航栏的标题大小一般是36px,操作图标的设计大小一般是40px,切图大小一般是48px,背景多以白色或APP主题色为主。很多APP设计为了保证整体界面干净整齐,会特意去除导航栏底部的分割线。 2. 搜索框导航栏   搜索框导航栏是在简单标题导航栏的基础上,增加搜索框(大多数会去除导航标题)。搜索框的宽度随导航栏中操作图标的多少来决定,高度多采用56-60px,图标多采用32px或48px。在摆放图标时,多采用左右间距等分,距离搜索框的间距与边距相等,这样看起来会更加舒适。 3. Tab/分段控件导航栏   这两种导航栏都是顶部有多个标题切换的导航栏样式,一般分为选中标题与未选中标题。分段控件顶部导航栏一般有2-5个可选项,且不能左右滑动;Tab左右切换顶部导航栏的可选项可以扩展很多,并且可以左右滑动切换,选中样式也比较丰富。 ※ 通栏导航栏   通栏导航栏看似与常规导航栏没有太大区别,其最大的不同就是,通栏导航栏的背景层一般与下方的模块打通,在某程度上节约了界面空间,在视觉上也比较统一。 通栏导航栏多用于电商、旅游等界面复杂或需要烘托氛围的界面中,也会放在顶部通栏Banner上,节省空间同时减少割裂感。   通栏导航栏的背景处理方式一般有三种: 1. 特殊背景处理:与下方模块整体风格保持一致,多采用与下方一直的图片背景; 2. 纯色或渐变背景:常用于卡片风格的界面; 3. 黑色透明渐变蒙层:采用一层渐变蒙层,保障导航栏文字的可识别性。 ※ 大标题导航栏   自IOS11发布后,大标题导航栏便开始流行起来,尤其是飞机稿总能看到它的身影。普通的导航栏在二倍图下,其高度只有88px,标题字号为36px;但大标题的高度足足有192px,标题字号为68px。 由于大标题导航栏所占的空间比较大,因此并不是所有APP都适合使用大标题导航栏,也不是整个APP或网站都适合使用。   有些APP使用大标题导航栏时,会将其设计成:使用中界面向上滑动切换成正常状态或直接隐去导航栏,便于内容的查看。也有APP会在常规88px高度下,放大字号,隐去分割线,使标题看起来更大。 APP是否能使用大标题导航栏,设计师需要考虑一下两点: ① 导航栏是否帮助用户快速确认所处位置; ② APP整体风格是否偏向简约大气。 大标题导航栏虽然给人高逼格的感觉,但由于其所占的空间较大,一旦网站内容太多,就会显得界面很凌乱,没有重点,因此界面复杂的APP或网站都很少会用上。 ※ 小程序导航栏   Wechat中小程序导航栏的顶部右上方有一个不可去除且无法编辑的Titlebar按钮,从APP转换到小程序时,设计师要注意调整APP的顶部导航栏位置和搜索框大小,避免被Titlebar按钮遮挡。 顶部导航栏,往往是用户进入APP或网站时最先看到的地方,同时也是决定用户对产品第一印象的重要部件,其重要性不言而喻。香港网页制作公司提醒,顶部导航栏样式较多且都有其独有的优缺点,设计师在使用时一定要考虑产品适合哪种样式,避免错误选择,影响产品的用户体验。

香港网页制作公司分享:阿里巴巴”(1688)APP改版策略 虽然产品改版会对网站SEO优化有一定的影响,但随着互联网和用户习惯的变化,产品改版不再单纯为了美观,而是为了让产品更满足互联网的发展和用户的需求,让产品能走得更远。产品怎样改版才算成功?下面,香港网页制作公司以“阿里巴巴”(1688)APP改版为例,和大家一起探讨下! “阿里巴巴”APP为何要改版? 原因一:满足新业务的需求 从曾经的信息平台过渡到交易平台,1688的平台阶段性战略有着很大的改变,向着数字营销平台逐渐转型,原来的内容框架难以承载业务的新发展。 原因二:提升分流质量 从过去的数据效果来看,For特色采购需求和服务大面采购需求需要平衡调优,提升首页的流量转化效能。 原因三:体验升级 手机原生系统风格不断升级,牵动着APP的变化和升级。 “阿里巴巴”APP如何改版? · 聚焦用户价值 升级内容框架   “阿里巴巴”APP在升级内容框架上,聚焦用户价值,把原有7.0版本的内容版块变得更具个性化,聚焦做商品的个性化,仅保留For用户的营销和内容场景,同时提升算法推荐区的曝光率,以此区域的商品做首页的直接转化。 · 弱化容器,突出内容 1. 视觉容器升级 “阿里巴巴”APP为内容腾出干净、简洁的视觉空间,其采取的方式:   1) 精简内容栅格,减少给用户阅读带来的负担;   2) 提高留白率,增加页面整体的透气性,为用户提供舒适的阅读空间;   3) 拉大字体大小梯度,加重字体颜色梯度,使文字的清晰度和可读性能得到提升。 2. 强调版块特性 “阿里巴巴”APP为了强调版块特性,主要做了以下的改版:   1) 强化搜索 APP 8.0版本并没有将搜索设计得很“显眼”,而是通过提升搜索关键词、热搜词精准度和吸引力、增加搜索布点等,让更多用户更高频地使用搜索。此外,为了APP还将搜索组件移到更易于点击、视线更聚焦的屏幕位置,方便用户单手操作时,也能在屏幕不同区域的点击。   2) Banner升级: APP 8.0版本的画面丰富度与7.0版本对比相对较低,描述字段也精简,让用户能在短时间内掌握全 Banner的信息。此外,相比于C类用户(Consumer),B类用户(Business)会更偏理性,用冷静、克制的“视觉语气”与B类用户对话,能给B类用户更好的印象。   3) For新人 以差异化的利益、个性化秒杀、新人攻略做用户的承接。   4) 营销场景心智差异化表达 突出两大热门区域(即伙拼爆品、天天特卖)最关键的特质,利用有创意的广告语做强化表达,吸引客人消费。   5) 内容场景改版 抽象出直播间的方形版面+内容叠加形式来设计,大坑位以动图传递给用户直播的动态感,利用多维实时轮播气泡传达直播的互动感、实时性。…

网页设计师不仅要把插画、icon、动效做得美,还涉及了很多细节上的体验。尤其是动效设计,它能赋予静态图像的“生命”,帮助用户更好地理解如何更有效地使用产品。那么,APP设计中动效设计有哪些技巧呢? 提升产品体验感 APP设计中动效设计有哪些技巧 技巧一:反馈当前状态 颜色和图画都能引起用户的注意,为何还要添加动效设计?由于数十万年的自然习惯,我们对事物的“运动”特别敏感。此外,动效设计对视障人士更加友好,即使在纯色才非常突出的情况下,视障人士也是很难感知到错误提示的,但当用注意到抖动的动画时,他会立即意识到这个动作的意思。 技巧二:保持动作的关联性 正确的动效设计可以帮助用户理解方向,而不会感觉内容突然发生变化。以“京东”和“淘宝”为例: 京东使用的“投递动作”强调了商品加入购物车的过程,搭配“+1”的图标让用户的感知更加明显,即使没有文字,也能告诉用户已经成功把商品加入购物车中。 至于淘宝虽然使用了文字告诉用户,但是会延长用户对文字的理解过程。 技巧三:注意展现方式 受限于移动设备的尺寸限制,利用图片/文字在有限范围内的滚动,能展示更多的信息,但这种展现方式同样很容易出差错,以“天猫”为例: 天猫首页功能模块去中的“免费领水果”,是由3块内容共同组成的一条完整信息,用户只需阅读不需要选择。相比起纯文字的“免费领水果”,丰富的水果品类和更加突出的免费字样带来的刺激会更强烈。 但天猫超市中的动效设计会采取卡片运动不规律的方式,且每次进入后运动变化都不一样,加上每个卡片都是独立的分区信息,一旦用户错过了某个分区信息,就只能退出再重新进入。 技巧四:增加情绪的传递 除了功能型动效,动效设计还能利用情感化设计表现出来,增强某种情绪的感觉,向用户传递我们所想要表达的情绪。以“QQ”和“京东金融”对比: 京东金融的消息清除更像是一个功能按钮,除了消失的红点没有任何反馈;但QQ除了消失的“烟雾”效果之外,拖拽的感觉以及逐个消失的爽感,就像一个一个捏爆泡泡纸的,这种融入情感的动效让人感到非常愉悦。 技巧五:避免强烈的反差 如果两个页面之间反差过大,眼睛受到的刺激就会较大,可以利用动效设计有效避免这种强烈发差造成的不适感。以“片刻”和“QQ”为例: 片刻的夜间模式切换,并不是是很突兀的模式切换,利用动效营造了一个日出日落的场景,能缓和这种突然反差带来的刺激。相反,QQ的夜间模式切换显得反差太大,会令用户感到不适。 以往,网页设计师总以为动效就是为了让网页更加美观,事实上,每个动效都用其对应的目的,帮助用户更好理解产品的使用方式。好好利用动效设计,提生产品的体验感,这会让用户更加喜欢你的产品。

正在用QQ音乐的朋友,已经体验到全新的9.0版本了吧,大家觉得这版本怎么样呢?虽然QQ音乐的流量、资源和内容都非常丰富,但在之前8.0版本的视觉及体验都让网易云压过一头。可见,QQ音乐要更新版本已经成为大势所趋之事。那么,这次QQ音乐的9.0版本有什么特点呢?下面,就让香港网页制作公司和大家一起探讨下! ● APP设计の风格  打开QQ音乐9.0版本,首先看到的就是一套丝滑的动效,这让强迫症患者感到非常舒服。其次,本次QQ音乐版本提供了6种不同的皮肤主题,几乎什么风格都有,满足不同人群的需要。 ● APP设计の首页 本次QQ音乐版本在信息架构上发生了较大的变化,以往的顶部标签导航栏移到底部,底部音乐播放Bar的层级也逐渐削弱,现在更突出的是分类和模块,其实这也挺符合用户的心智模型。老版本太强调播放Bar,然而它并不是一个高频的操作,所以没有必要给这么高的优先级。 老版本为了避免冲突,顶部标签Tab导航和下方的推荐歌单等交互,不能用左右滑动的手势,会导致内容承载变少,这是比较遗憾的。相反,新版本可通过左右滑动或点击顶部分类切换相应的模块,还算挺方便的。因此,新版本的信息架构会更好些。 还有一些细节上的问题,老版本的页面卡片都是采用直角,但整体却没有形成统一的调性,比较尴尬。新版本则通用圆角,文字排列上看起比较整齐,一眼看过去感觉挺舒适的。此外,左上角的识曲功能图标,相信QQ音乐的UI设计师一定下了不少功夫,才设计出这么抽象但又让人一眼就看懂的图标。 总体来说,QQ新版本的首页去掉了头部大色块,使整体的视觉风格变得更加简约、时尚。 ● APP设计の个人中心 旧版本个人中心的顶部Tab Bar真的很占位置且不好用,将它移到底部,不仅腾出了更多位置,而且使整体界面卡片化的界面设计变得更加模块化。中部的图标从原来的两行变为一行,使彼此之间的关联性更加强。 文案方面也改变了很多,“任务中心”改为“活动中心”,副标题也从“今日听歌N分钟”改为“有福利”。很明显QQ音乐的文案策划终于知道,用户听歌并不是为了完成任务,而你给用户布置的任务也不一定会去做。文案上的改变,不仅让让用户更有参与感,也让用户更乐意去看一看并参与这一活动。 至于“活动中心”,旧版本说的是开通会员可享受千万专属曲库,新版本则告诉用户开通会员很便宜,而且还能更多优惠,这无疑给用户来说刺激更大。 ● APP设计の发现 QQ音乐新版本的发现版块依然是关于“流行动态”的信息,但从页面模块却改变很多。首先,旧版本的Banner设计真的很占位置,新版本则缩小了面积,使页面能承载更多内容。“歌手动态”四个字去掉,歌手图片也缩小了,且去掉了描边,显得更加简洁。推荐位置增加了Tab,方便用户挑选自己想关注的内容。 总体来说,发现版块整体都进行了简化和缩小,使整体信息展示变得更聚焦。 ● APP设计の整体体验 从整体体验来看,QQ音乐新版本的UI设计框架变得轻量化,信息呈现也更聚焦。设计风格和品牌调性的传达也比较和谐。但事实上,本次QQ音乐的UI设计和架构优化,其实并没有特别眼前一亮的感觉,只是与8.0版本相比要好上一大截。 现在几大音乐类APP都是以版权资源来圈用户,要想留住用户还是需要靠一些APP设计手段。香港网页制作公司认为,虽然本次QQ音乐9.0版本真正的亮点并不多,但设计上比以前更注重用户体验,其实也值得给个“Like”的。

“深色模式”最近突然成为一个时髦的词汇,不少APP设计和网页设计纷纷推出“深色模式”。 为什么要设计“深色模式”? 由于电子设备的屏幕是主动发光,它们的光线会比我们生活中所接触的物品更具刺激性。设计深色模式能降低屏幕整体的视觉亮度,缓解眼睛的视觉压力,使用户真正与其交互和操作的内容更容易被凸显出来。 同时随着OLED屏幕的普及,深色模式还有一个更有意义的优点:省点。由于OLED屏幕中每个像素都是自主发光,因此显示深色元素时,像素所消耗的电流更低,在纯黑色下像素点可以完全关闭,达到省电的效果。 什么是“深色模式”? 1. “深色模式”不是夜间模式 很多APP总认为深色模式就是夜间模式,用户在夜间喜欢更暗更低对比度的界面。其实,用户确实需要在夜间使用不刺眼的界面,但这并不表示就需要放弃对比度。 深色模式下,当页面背景由白色转为灰色时,我们已经极大限度降低电子屏幕所发出的光亮,配合设备的环境光传感器自动亮度调整,界面整体的亮度已经满足用户在暗光环境下使用。系统级的深色模式下,各个APP之间保持相对统一的对比度会对用户的实际体验更加好,否则会因为对比度太低而影响阅读效果,这时一旦调高屏幕亮度,若跳到其他没有夜间模式的APP,会变得非常刺眼。 2. “深色模式”并非简单的反色处理 iOS系统中的“智能反转”功能,能把除媒体外的界面元素按其对比全部自动反转,但这种效果会打破UI原有的视觉层级和空间感。如果使用与浅色模式下相同的阴影,在深色模式往往达不到足够的层次感。 因此,在深色模式下我们需要采用一套新的视觉设计规范。 · 界面层级 不要试图在深色模式下的高层级元素使用浅色阴影,这样会看起来更像是光晕,而破坏界面的空间结构。在真实世界中,物体并不会投影比自身颜色更浅的阴影。 部分APP可能会为使用OLED设备的用户提供纯黑底色背景,以达到更加的省电效果。但这种方式会导致界面层级不易表现,很容易限制设计的发挥,只有在产品视觉层级非常简单且明确的情况下可以酌情采用。并且注意对OLED屏幕而言,在滚动屏幕时,像素点频繁切换开闭状态,会导致一定的延迟,造成文字产生拖尾现象。 · 色彩 在浅色模式下我们使用的一般都是高饱和的颜色,但在深色背景承载下,高饱和颜色在深色背景下容易产生视觉抖动,导致眼睛疲劳,因此在深色模式下我们应当选择更低饱和的颜色以达到更好的可读性。 那么,在深色背景下配色方案需要注意什么? ① 品牌色 为了保证品牌VI的一致性,品牌色可保持原饱和度不变,但对应用范围应当极其克制,仅限于在个别元素。 ② 氛围背景色 如果一直采用中性系的深灰色作为背景,用户很容易会感到乏味,这时我们可以尝试把品牌色融入到背景中营造氛围感,把品牌色用极低的透明度与系统默认的深色背景色进行叠加。 ③ 菜单栏避免使用彩色 一般来说,深色模式的界面整体以深色为主,在浅色模式下使用大面积色彩的元素。在深色模式下,导航栏、工具栏等应避免使用彩色,否则会显得刺眼,对比过于强烈,破坏深色模式下的沉浸感。 ④ 提示元素 在深色模式下,为了让提示元素足够突出,可少量使用浅色底作为模块的背景,但仅限这类面积小且需特别强调的模块中。 · 文字 尽量不要在深色模式下使用纯白色文字作文正文,深色模式与纯白色的对比非常强烈,容易造成视觉疲劳。为了保证合适的对比度,文字颜色不要过浅,可适当在文字层级上使用透明度,这会让文字与在不同的氛围背景色上更和谐,或使用HSB模式调整B值,确定文字的固定色值。 · 图形 深色界面直接使用线性图标,会减少图形的形状感和体积感,这是因为白色背景可以更好地表现出形状,人的大脑会将白色脑补成图形的一部分。但在深色模式下,人脑会更倾向于这些空白的部分是镂空的。所以深色模式下尽量使用面性图标,不过具体情况可结合产品实际的设计风格和深色模式下的具体视觉效果再做判断。 作为当今的大势,如果你的APP并不支持深色模式,很可能会显得特别刺眼,甚至部分用户可能会不得不去寻找支持这一模式的替代品。至于如何确定深色模式的设计规范?首先当然要根据产品的设计风格而定,其次你需要满足满足 WCAG 2.0(Web内容可访问性指南)中规定的 AA 级标准,即最低 4.5:1 的对比度,提高界面的可读性。

很多朋友仔都喜欢在被窝里玩手机,但为了避免眼睛受到伤害,他们一般都会选择夜间模式。夜间模式虽然不是APP设计的刚需,但良好的夜间模式设计,会让APP设计增加用户的好感,提供用户体验度。 APP设计技巧:夜间模式应该如何设计 技巧一:夜间模式切换方式 ※ 列表开关切换   列表夜间模式开关切换主要放置在“个人中心”列表页或“设置”列表页,通常默认打开的是日间模式,如需要使用夜间模式,只需要点击打开即可。 ※ 图标切换 图标切换常见的有四种不同的放置位置,分别是: ① 宫格布局功能图标   这种切换方式主要放置在“个人中心”宫格功能入口中,默认显示夜间模式图标(表示正在使用的是日间模式),点击后夜间模式图标切换到日间模式图标(表示正在使用的是夜间模式)。 ② 顶部导览栏图标   这种切换方式一般放置在“个人中心”顶部导航栏,切换方式比前两种更直观,适合对夜间模式需求更好的APP设计。 ③ 内容详情页图标   这种切换方式多用于阅读类产品,在详情内容页面可直接在“设置”切换到夜间模式,方便用户长时间阅读时直接切换。 ④ 侧边栏底部图标   这种切换方式一般用在以侧边栏导航为主的APP设计,位于底部靠左区域,方便切换。 ※ 自动切换与提示   自动切换与提示夜间模式,是一种较智能的切换方式,产品会自动设置某段时间内进入夜间模式,或打开APP时弹窗询问用户是否开启夜间模式。这种切换方式非常符合用户体验,但需要按照产品场景决定。 技巧二:夜间模式设计要点 夜间模式一般有两种处理方式: 第一种很简单,只需在界面上覆盖40%-70%透明度的黑色遮罩层,达到降低亮度的效果。这种方式虽然节约开发和设计成本,但效果并不会太理想。 第二种是使用深色界面设计,这种方式能与周围黑暗的环境更加融合,适合夜间长时间使用的APP设计,但开发和设计成本相对较低。下面,网页制作公司将具体介绍深色界面下夜间模式的设计要点。 1. 主体背景色选择 为了保证观看的舒适度,夜间模式一般采用低亮度、低饱和的色彩,最简单的方法就是第一种夜间模式处理方式,直接在界面加上遮罩,强制降低页面亮度。 但是颜色本身就是有亮度,在浅色界面上加遮罩的效果肯定不及本身就是低亮度的颜色,所以我们需要调解色彩的亮度,具体计算公式如下: Y(亮度)=(0.299*R)+(0.587*G)+(0.114*B) Y值一般在10-60的范围内,设计夜间模式的效果会相对较好,因此在选择主体背景色时,尽量选择Y值在这个范围内的深色。 2. 文字颜色 一般来说,深色界面下的夜间模式要保证文字与背景色的对比度在3:1-4.5:1范围内,这样既能保证文字对比不会过于强烈,也可看清楚文字内容。 尽量不要使用纯白的文字颜色,对比过于强烈,夜晚长时间浏览会对眼睛造成一定的压力。 3. 图片处理 为了保证夜间模式下整体对比度的舒适度,对图片等元素可进行降低亮度处理。一般图片颜色与背景颜色的对比度满足在3:7~7:1的范围内,或在图片上加上黑色透明层,透明度范围在40%-50%。 4. 图标处理 图标的处理一般是通过降低高饱和或高明度的图标颜色,从而降低与背景色的对比,具体操作如下: ① 单色图标 处理单色图标颜色时,不需要每个图标都修改明度、饱和度后,切图给开发,这样做成本太高。只需要出两套颜色方案,一套日间颜色、一套夜间颜色,通过修改代码进而修改单色图标颜色。 ② 渐变色图标…

在网站设计工作中,由于各种各样的原因,开发最终完成的视觉还原可能会离设计稿有一定的差距。毕竟与设计师相比,开发对很多视觉元素与间距没有那么敏感。因此设计走查不但可以快速帮助开发找出与设计稿得差异所在,而且还能给到开发细节与差异的调整方案与建议,完成最终产品的高质量交付。 如何做好设计走查的问题? 一、查信息层级 1. 页面表达的意思 在设计页面时,需要注意页面要传达给用户的重点信息。如下面案例:   首屏信息是给用户的第一印象,因此用户打开页面时,尽可能展现出更多用户感兴趣的内容。而此次页面需要突出的时优惠信息,次要信息则放在后面。 2. 页面视觉重点   屏幕尺寸间合理运用黄金比例(斐波那契数列,0.618),可让界面视觉重心更加平稳,视觉更加舒适。同时有助于界面区域分隔,集中视觉焦点,承载更重要的信息,让整个界面布局更加合理。 3. 元素间距符合各层级的关系 页面杂乱无章,其主要原因就是一味地堆砌,导致信息层级分布没有区别。想要页面清晰,有节奏的呼吸感,不妨尝试以下方式:   同类的板块不应被混乱的间距区隔开来,它们应该更集中,并且整体与别的板块区别开来。同理,不仅仅是板块,元素与元素之间也是如此,这样用户可以更加快速地看到自己想要的东西。 二、进行文字规范走查 1. 字体种类的控制   界面如果字体种类过多,就显得不统一且混乱。所以字体控制尽量在2-3种以内,中文字体、英文字体以及特殊数字字体。 2. 字号与粗细控制 字号过多会使信息失去重点,基础字号控制在3种以内,这样就能清晰区分信息的层级。   加粗字体往往是整个界面的视觉焦点,重点文本需加粗处理,注意控制字体加粗的使用,以免造成信息层级的混乱。 3. 行距控制   行距太小不便于阅读,太大就会显得松散,所以控制在1.2-1.5倍的范围是较为舒适的范围。 4. 字体颜色 字体颜色深浅有序能让信息层级主次分明,界面应该根据不同模块以及同一模块的层级需要调整不同的灰度值,并在界面中反复使用,统一规范输出。   一般来说,信息越重要,字体颜色越深。但选择字体颜色时,我们还需要注意产品的实际使用环境,这不仅要考虑室内使用环境,还需要考虑到特殊的室外强光环境。 三、通过设计规范走查图标 1. 视觉比例   由于图标通常都是成群结队出现,彼此间的统一性显得非常重要,却也是常常容易被忽略,可尝试使用图标盒子来规范尺寸。 2. 图标设计要点   设计图标时可重复使用基础形状进行设计,保持整体识别性,这样既能统一大小又有整体感。 3. 图标尺寸 在APP设计中,功能图标大致分成:可以点击的按钮和不可点击的展示图标。   · 可以点击的按钮:常用于导航栏、tab栏、操作栏,常用尺寸为:48x48px、64x64px。 · 不可点击的展示图标:常用于信息展示位置,用尺寸为:24x24px、32x32px。 4. 标签的走查规范…

无论设计哪类型的APP,一旦采用了错误的设计,这将对产品带来致命的结果。对用户而言,不仅要求APP美观,更希望它能够提供优秀的交互体验。正是因为用户对APP的要求越来越高,才使不少设计师将错误设计放大,忽略一些重要的小细节。 盘点那些容易被忽视的小设计 ○ UGC内容未设置举报功能 对于“举报功能”,肯定设计师在设计时都很容易被忽略。而在App Store审核被拒的原因中就有一条是关于“举报功能”的内容:如果你的APP内有发帖等UGC(用户产生内容)功能,必须提供用户协议,并留有内容举报功能,否则就会被审核拒绝。 一般而言,UGC内容都需要添加“举报功能”,该功能通常会有两种展示入口:置于更多图标中;直接置于列表中。具体如下: 1. 若列表当中有点赞、评论等功能时,可将举报功能置于更多图标中。 2. 如果列表中没有其他功能,或以用户感受为中心的审核机制时,可将举报直接置于删除列表中,让反馈属性更明确,反馈项目更细致。 ○ 登录注册时键盘挡住按钮 设计登录注册界面时,设计师容易忽略键盘对界面的影响。当用户输入信息时,键盘就会将操作按钮覆盖,信息输入完后还需要退出键盘,然后再点击按钮,这操作明显不够人性化。 面对这种情况,可通过这三种方案解决:① 预留键盘高度;② 内容滚动;③ 键盘设置按钮。具体如下: 1. 当登录注册信息较少时,可将键盘的高度预留出来,避免键盘挡住按钮。 2. 当界面展示效果较长时,可让设置内容滚动,仅显示输入信息。 3. 将登陆按钮置于键盘中,缩短用户的操作路径,但此方法对一般公司而言成本较高。 ○ 文字在浅色图片上对比度不够 列表设计中,浅色文字在深色背景上显示会非常清晰,但在浅色背景就不容易识别。这往往是设计师在设计过程中考虑不周全导致的,同时也是APP设计中最致命的一击。 以往解决这种问题的方法就是直接将文字加投影,但随着界面风格的变化,这种方式逐渐不适合目前的设计风格。因此现在多采用底部增加不透明度为40-0的黑色蒙层。 大多数设计师在设计时,很容易会跟着产品原型走,因而忽略一些小设计,尤其对于那些考虑不周的新手设计师。因此,各位在设计时多注意细节上的问题,平时也多看有关的教程,这样就能规避问题,少走弯路。

在APP设计当中,导航是区别APP的最重要方式。但这个世界没有完美的导航,只有合适的导航。怎样才能选择到合适的导航呢?香港网页设计公司表示,设计师可以根据具体的场景与需求,去选择最合适的导航形式。 常见的APP导航有哪些? 1. 标签式导航 标签式导航主要分为底部标签导航、顶部标签导航以及滚动式标签导航。无论选择哪种标签式导航,都不要超过5个标签,且里面放置的都是常用且重要的标签,方便用户频繁切换。 2. 分段式导航 分段式导航一般并不适用于一级导航,因此往往会作为二级导航与标签导航嵌套使用。 3. 舵式导航 舵式导航是底部标签式导航的一种变体,但要把最重要的标签放在中间位置,作为用户频繁操作的入口,一般可以用图形或颜色突显出来。 4. 抽屉式导航 隐藏不重要的功能,当单击入口就能将它拉出来,这样做不仅大大减少了主界面中的导航控件数量,还能让导航的核心功能更加突出。 5. 下拉菜单式导航 下拉导航的特点是能显示足够多的条目,但有时候切换起来会比较麻烦,可与滚动式导航相结合,互补优势,实现快速切换的效果。 6. 宫格导航 宫格导航适用于二级导航,能将功能扁平化,充分利用整个页面,在有限的空间内罗列大量的功能。 7. 列表导航 列表导航,又分为垂直列表导航、网格列表导航和轮播面板导航三种,下面我们来看看三者有何区别: 1. 垂直列表导航:适合二级导航或功能层级较浅且功能键切换不频繁的主导航,偶尔也可以用于有多个平级功能,且入口较浅的一级导航。 2. 网格列表导航:适用于二级导航,能在有限的空间内罗列大量的功能,常见种类:规则的宫格列表、不规则的瀑布流。 3. 轮播面板导航:属于横向列表,能把信息藏在页面,且充分利用界面的空间。使用一些选项较少且跳转不频繁的APP,可分为大图展示型和小图展示型。 在APP设计中,导航是非常重要的模块,因此设计师们也会经常在基础导航模式上,不断升级优化以及组合创新。如果你也想为你的APP设计出合适的导航,不妨从以上的常见APP导航形式,根据具体的场景与需求,加以优化和组合。

APP设计怎样做才能增加用户对产品的印象,增加好感和认可呢?随着手机越来越深入我们的生活,不少APP应用程式也逐渐影响着我们的生活,改变我们的生活。但APP市场竞争越演越激烈,要想突围而出,就要在APP产品中加入一些符合调性的趣味设计。具体怎样做,我们一起来看看吧! 一、通过文案来吸引用户 有别于其他APP,小红书点赞还加一个有文案的Toast,里面的文案是随机,却能在不经意间撩动用户,产生惊喜感,让用户对产品留下印象。   通过不同的点赞文案,会让用户主动且期待地去给UGC内容点赞,从而鼓励了UGC更产出更多,也让用户与产品增加更多互动,提高粘性。Toast的位置也设计得相当好,既不会挡住图片,也不会影响用户输入文字。 二、带给用户新鲜感 看到市场上那些大同小异的APP模块时,用户一旦看到有特别的模块或展现形式时,就会觉得非常新鲜且有意思。例如:社交APP Same的消息列表就做得很有新鲜,有趣的卡通插画形象,配上合适的场景文案,一下子就树立产品调性,很符合产品形象,给用户带来深刻印象。   如果产品的调性偏向轻松和活泼,产品画风不建议比较严肃,但可以在页面留白的地方,添加经典的产品插画,增加产品的趣味性和可用性,也可以将产品和公司特色作为切入点和闪光点。 三、打破规则 在熟悉的场景和情景下,带给用户出乎意料的惊喜,能轻易抓住用户的注意力,并产生积极的情感。Imessage发送信息的功能与我们以往用过的都不一样,长按发送按钮,就会进入效果选择区,然后更改气泡的表现形式,或选择背景动效。   在熟悉的界面下,出现意想不到的惊喜,例如:通过全屏动效增加氛围,能提升用户注意力,加深对产品的印象。 四、意料之中的惊喜 百度地图是一款地图工具类的APP,很多时候我们都会将它当成简单的地图工具使用。但当我们在使用的过程中,慢慢会发现百度地图与其他地图工具最大的不同,就是截图时可在上面放自制表情包。虽然很多APP都会自带表情包,但作为工具类APP这样做,超出了期待值以外的功能,带给了用户很大的惊喜,也拉近彼此间的距离。   这些隐藏式趣味功能,有点像游戏里的隐藏福利,一般只有老用户才发现,但它的存在却能鼓励用户继续使用,毕竟能让用户记住,又不断带来惊喜的产品还是很少的。 五、用户一起玩 Walkup作为一个简单的记步数产品,却以画风精美的插画和独特的游戏玩法,吸引不少用户。其实,很多工具类的产品都是我们需要才会使用,否则根本就没有动力去使用这些枯燥的产品。所以在工具类产品加入游戏模式,让用户主动参与,而非“有需要才使用”。     让用户把一款工具类产品当成游戏玩,这样除了提高用户的粘性,同时还能提升用户的停留时间,使产品逐渐成为用户的“必需品”。 大多数熟识的事物会缺少刺激,但太多的不确定又容易产生恐惧,通过身边熟知的事物制造不太常见的惊喜,这样才能让用户更加放心地使用产品。

MENU
網頁設計公司