Blog

关于APP界面设计的排版规则,相信很多朋友随口都说得出来,什么将同属一个集合的元素放在一起,将有关联性的元素靠近些等。但在实际操作当中,却会发现,即使按照排版规则去划分APP界面中的信息,效果依然并不喜人。 下面,香港网页集团将为大家分享,“如何对APP界面设计进行信息划分”的技巧,希望各位阅读后,会对APP布局上有更深入的理解和分析。 如何对APP界面设计进行信息划分? 合理地对界面信息进行划分,能有效组织和整合好信息间的关键,达到一种信息多而不乱的感觉,还能帮助用户了解页面的层次性和内容的组织性。对于内容与内容之间的划分,我们通常会用到留白、分割块、卡片、通栏分割线、非通栏分割线等方式。 ① 留白:增加内容间的间距 技巧:适合有规律性的内容排版,能增加界面的呼吸感 对内容干扰性:弱 ② 分割块:利用颜色差让不同板块产生较强的对比 技巧:适用于有多个板块的内容排版,可通过高亮色让模块间在Z轴上有升起的感觉。注意一屏中分割块不得多于3个。 对内容干扰性:强 ③ 卡片:相当于收纳信息的容器 技巧:一般用于有规律的信息流,能增加页面利用率,区分不同维度的内容,及提升APP的可操作性。 对内容干扰性:强 ④ 通栏分割线:分割线横向贯穿整个页面 技巧:区分更加独立的信息,例如标题和内容的分割。 对内容干扰性:较强 ⑤ 非通栏分割线:用于内容间的区分 技巧:适合内容间的风格,常见于资讯新闻页。 对内容干扰性:较强 各类划分方式的应用场景 看完上述的介绍,我们可以得知根据视觉强弱的比较,可以得出:分割块=卡片>通栏分割线>非通栏分割线>留白。因此,在遇到下面问题时,我们可以采用适当的划分方式,对界面进行布局划分。 案例一:消息列表的布局 消息列表通常都是占据整屏的多个矩形块,而且这些矩形块的内容互不干扰,但是结构相似,能体现出整体性,因此为了减少干扰视觉的元素,可选择视觉干扰强度较小的留白(A)来处理。 如果选择通栏分割线(B)处理,虽然每块都充满独立的味道,但整屏分裂感很强,容易干扰界面的易读性,因此可改为非通栏分割线,能确保信息之间的某种关联性。 案例二:模态框的布局 这里存在相关、同类和包含关系的元素,通过留白(A)的方式来控制,能让将界面变得整洁,同时减少干扰内容的元素,大大提升用户阅读流畅性。 如果选择通栏分割线(B)处理,这里会出现背景面积和分裂感这两大问题。模态框面积小,如果整个页面都是分割线,会影响阅读流畅性及界面的美观性。这里可以改为“保留标题下的通栏分割线,将按钮上的分割线改为非通栏风格线,其他省略。”这样界面就会变得更加整洁干净。 案例三:卡片的应用 卡片的应用场景非常多,很多APP界面都会时常它的身影。到底,卡片有什么好处呢? · 能清楚划分模块内容,归属不同维度的内容,让用户一目了然; · 横向的延展性,为了在一屏里放置更多类型的模块,我们时常会将同类模块横向摆放,节省空间还能凸出界面的整体性。 不同分割方式都有其优点和缺点,以及适用范围,因此在实际设计工作中,为了能更好地呈现内容及功能,千万不能盲目追求设计趋势,选择合适的才是最好的。

赏心悦目的动效设计已成为APP设计中不可缺少的部分,目前APP设计中的动效主要分为两类:转场特效和反馈提醒。 转场特效,多应用于页面切换、加载等,通过柔和的过渡效果,让APP操作过程变得更有趣味性;反馈提醒,则是通过界面内元素的动效,增加APP的交互性,同时引导用户更好地完成操作。 那么,APP动效设计应该在什么时候做比较好?   动效设计需要设计师无限的想象,无论设计怎样风格的动效设计,设计师都非常乐意将其设计得有趣有爱且充满个性。但,APP动效设计应该在什么时候做比较好呢? 1. 等待一个“有意义”的理由 面对等待,我们需要耐性。充满个性有趣的动效的确能让用户更加喜欢你的设计,但如果这个动效“毫无意义”地出现,可能会让用户产生疑惑。因此,设计APP动效时,一定要告诉用户,其出现的理由到底是什么。 2. 增加“点击”操作 想让用户点击页面某个地方,但用户常常“视而不见”?增加动效,吸引用户的注意力,让用户不再“有理由”放过“点击”这一操作。 3. 让效果与众不同 页面重点内容与其他次要内容太相似,导致存在感太低?给它来一个不一样的点击效果,提高它的存在感,不让用户有错过它的机会。 如何让APP设计增加动感? 知道什么时候为APP添加动效设计,就需要考虑如何给自己的APP设计增加一丝动感,具体怎样做?下面一起来看看! 1. 将元素改为个性化内容   市面上绝大多数APP都会使用加载动画,为界面增加趣味性之余,同时减轻用户因等待所产生的焦虑感。但如果想要突围而出,让人眼前一亮,可以设计个性化动效得同时彰显产品品牌,增加用户对品牌的认知度。 2. 更换产品的运动方式   除了旋转运动,设计APP动效还可以选择重复、构建、变形、拟物、拟人等效果。其实只要APP动效符合产品定位,为其设计出独特的运动方式,无不是吸引用户注意力,增加用户记忆的好方法。 3. 赋予明显的交互反馈 冷冰冰的点击和出现,往往让用户比较反感。因此为重要元素适当地增加动态效果,如:渐隐渐显,位移,放大缩小,光晕,分布等,不仅能起到很好的引导效果,也能让用户更愿意选择点击操作。 合适的动效设计能让用户在使用APP时不再感到陌生和冰冷,通过瞬间丰富的变化,能给用户带来更好的体验,让他们感到愉悦。但也并非所有动效设计能有这样的效果,要想让APP动效设计发挥到极致,就需要满足产品的需求,同时能匹配用户应用的场景诉求。

对APP设计师来说,最令人沮丧的统计数据之一,就是用户放弃他们下载的APP,甚至有些人刚打开APP就直接放弃。当然,我们无法阻挠用户的思想,要求他们一定要使用我们的APP,但我们可以找出他们放弃使用APP的原因,并加以完善挽留用户,相信很快就能扭转这一局面。那么,用户刚打开APP就退出怎么办? 用户刚打开APP就退出怎么办? 1.利用用户想要的目的信息做强制操作 例如:微博的头条文章,部分文章若要看完整版本,用户必须关注博主才能看到对方的全部信息,否则只能看到部分信息。 其本意是通过利用用户想要得到的信息,做强制操作让用户关注博主,一来可增加博主的粉丝数,二来用户可获取更多相关信息,三来进一步提高转化率。 类似的APP设计,还有百度贴吧2018年版本,若用户需要打开帖子查看时,只能浏览第一页的内容,如果想继续看更多内容,就必须下载APP并登录后才能查看。   还有很多产品设置不同规则解锁更多功能,本质都是“在免费使用基础上,通过要求用户做强制操作,提高产品数据”。 当然,强制用户操作会有很多方面的好处和坏处,UI设计师在设计界面时要考虑其后果及解决方法。 2.提示弹窗提供继续流程的按钮入口 由于产品受到一些规则限制,所以需要使用各种弹框对用户提示。若用户未满足某项条件而无法继续流程,我们应该提供用户完成未满足条件的入口,而不是让用户手动关闭提示窗口,再自行寻找入口。 在用户自行寻找入口时,可能会出现各种各样问题,例如:被其他元素吸引注意力,找不到入口等造成用户流失。 例如:在微信中,如果没有设置支付密码就使用扫码付款功能,那么就会弹出提示框,让我们可以直接点“击设置支付密码”,而不是关闭提示后再点击一系列的操作才能完成这个环节。 同样,如果我们不希望用户完成某些操作,如:卸载电脑上的软件,也可以通过隐藏、增加步骤、视觉误导、默认非选中等阻止用户操作。一般用户会因为有这样的设计而放弃使用该APP,但不得不说也有用户的行为与我们所想的不一样。所以在设计时,一定不要认为所有用户的想法和行为都和我们一样。 3.调整主按钮和关闭按钮的视觉比重 在iOS的设计规范中,按钮位置一般是左右关系,只能通过颜色来强调主按钮的突出性,但现在很多APP显然把设计扩大很多。如:美团APP就是通过调整关闭按钮的位置和颜色,以及背景色块,把关闭按钮和主按钮的视觉比重进一步增大。   视觉引导从PC互联网时代就已经是很重要的提高转化率方式,时至今日仍然有不少产品和场景都在使用,可见这种方式真的挺有效。虽然这种方法很简单,但也要注意不要把它变成流氓设计。 4.用确切的数据告知用户完成程度 一般情况下,APP下载完成后,引导用户使用APP都会包含几个步骤,但很多用户虽然会按照你的引导和设计完成很多操作,填写很多信息,但往往都会倒在最后一步之前。 这时我们应该告知用户,距离完成还差几多步。一般在步骤比较多的流程中,APP设计都会有进度说明,如:1/4、2/4……,但都最后一步,我们最后调整下特殊的文案,而非使用枯燥的4/4。 文字对人的影响很大,同时也能增加用户的焦虑感,让用户觉得“我既然付出那么多时间和操作,如果现在退出会很亏”,利用用户担心损失心理。   以上四种方法,都是日常APP设计中常遇到的问题,在提高APP转化率中其实还包含很多很复杂的内容,如:用户认知、价值传递等,这些都是APP设计师日常需要注意的地方。

自微信推出小程序以来,历经初始的暴热,到中期的低迷,再到现在继续火热,可以说微信小程序正逐渐改变着我们的生活。虽说小程序具备无需安装、无须卸载、触手可及、用完即走等优点,但在体验方式及界面设计,看似与APP没有太大区别。这不仅让人存在疑问,到底微信小程序和APP有何区别?同时也让不少企业思考,到底用微信小程序好,还是设计APP好? 微信小程序和APP有何区别? 区别一:诞生时间 APP是手机进化进入智能手机时代的产物,其发展至今已超过10年历史。APP的出现加速了互联网从PC时代逐渐向移动时代靠拢,为用户提供各种便利。 小程序是腾讯公司推出的基于微信APP的应用程式,其诞生于2017年1月。由于小程序注重程序功能的应用,有连接万物的可能性,因此它的发展对未来物联网的发展领域有着较大的空间。 区别二:用户群体   由于小程序是基于微信平台的应用程式,因此其用户群仅限微信用户;相反,APP设计完成后,会在各大应用市场上架,面向全球所有拥有智能手机的用户,因此从用户群上来看,APP的用户范围会更广。 区别三:下载及安装 APP需要通过下载、安装后才能使用,由于下载包占用手机内存空间较大,若手机配置不足,会经常出现无法下载、系统反应慢、操作卡等现象。 小程序则无需下载安装,只需通过微信主动搜索或扫描二维码,便可加载使用,响应速度快,且占用手机内存空间小。 区别四:开发成本 安卓系统和iOS系统都是目前手机主流操作系统,但由于两者存在一定的差异,因此APP开发时需使用不同的开发语言,设计出能解决系统兼容性问题的不同版本。同时APP开发还需考虑不同尺寸手机的适配问题,开发成本相对较高。 微信小程序的开发技术类似HTML,只需开发一个版本便可适配所有手机,所以从总体上来看,小程序的开发成本相对较低。 区别五:引流推广 APP需要用户主动下载,推广难度较大,但胜在APP内部功能架构、推广拉新内容由APP运营全权把控,因此推广方式多,且不受限制。 小程序背靠微信,基于庞大的微信用户量,并且活跃指数比较高,引流效果相对较高,加上小程序可与微信公众号互通跳转,降低了推广难度,提高了小程序的活跃性。但由于微信对小程序设定了很多条条框框,尤其是流量获取方面,很多营销策略都受制于腾讯政策要求,自由度相对没有APP推广那么高。 区别六:产品定位   原生APP内存不受限制,内容框架可因应产品定位随意增减、发挥空间大,无论多复杂的应用都能一一实现。 小程序算是微信中的一个“功能”,内存大小受微信限制,在功能架构上设置会较为简单、轻量。此外,小程序发展时间较晚,大多数企业都是先有成熟的APP后,为了抢占微信的生态流量,再研发相应的小程序。内存限制和上架平台属性的不同,导致两者的内容框架及结构都不同,通常企业会将APP中现有的内容版块进行删减重组再迁入到小程序体系,以满足适合微信生态圈的小程序产品。 区别七:基础框架 移动端产品的设计规范和原则大致相同,但因为受制于微信小程序框架,小程序设计与APP设计在表现形式上会存在一定的差异: 1. 顶部导航栏   在APP设计中,整个界面是可以自定义的,所以顶部导航区域不受限制,设计上自由度非常高。 小程序导航栏样式有限制且不可更改,但背景色可自定义。不过随着小程序的逐步更新,导航栏除了“胶囊”icon的位置不可变,其余也是可以自定义的,只是相对来说比较麻烦。 2. 底部标签栏   原生APP产品中,标签栏经常会看到不同的表达形式,非常生动有趣,且容易吸引用户的注意力。 但小程序产品受制于微信框架的限制,Tab切换形式通常比较单一,大多使用常规切换方式,且不会有动态效果。 3. 弹框   常规APP中,弹框的优先级是最高的,会强制用户阅读弹框内容,且大多需要手动关闭,才能执行其他操作。 小程序则是导航栏与标签栏的层级最高,弹框不能置于最顶层,用户可点击标签栏切换不同界面。 4. 引导页 / 闪屏页 新用户使用APP时,最先看到的不是APP主界面而是引导页,这主要是让用户对产品属性有一定的感知。此外,日常启动APP也会经常看到一些闪屏页,主要展示广告、节假日问候等。 但小程序则没有引导页和闪屏页,这在产品推广和情感温度的表达上就会差一些。 5. 消息推送 APP会经常给用户推送消息,这虽然能提示用户打开应用,增加产品活跃度,但同时也会对用户造成一定的干扰,让用户感到厌烦。 小程序不允许给用户推送信息,仅能回复模版消息,这从不打扰用户的角度而言,产品体验相对较好。 区别八:用户体验   ① 打开方式:原生APP直接下载在用户手机桌面上,只需一步就能打开;常用小程序入口虽在微信首页,但需通过下拉才能获取,若非常用小程序,还要慢慢找才能打开,打开方式相对麻烦。 ② 流畅度:APP对界面切换的流畅度和加载数据的响应速度不错;小程序虽然流畅度也不错,但切换界面层级较深,加载动态数据有时会比较卡。 ③…

APP设计中,能够真正拉动用户多次使用产品的关键并非界面的美观性,而是心理。就好似我们今天所介绍的“APP优惠活动页面设计技巧”一样,很多用户一听到“优惠活动”,就肯定会想到奖品。事实上优惠活动的方式分很多种,并非单纯只是发红包、代金券就可以。那么,如何设计APP的优惠活动页面? 什么是优惠活动? 简单来说,优惠活动其实就是想让用户产生使用APP的冲动,并增加用户对APP的依赖性,以此黏住用户,最终让用户养成习惯,不停对APP投入精力、时间、金钱等。 优惠活动其形式有很多,但大致可分为三种: · 社交优惠活动:人们从产品中通过与他人互动,获取人际奖励。 · 猎物优惠活动:人们从产品中获得具体资源或信息。 · 自我优惠活动:人们从产品中体验到操控感、成就感和终结感。 如何设计APP的优惠活动页面? 了解优惠活动的大致情况,接下来就要开始考虑优惠活动界面的设计。设计时,需要考虑用户使用APP的原因,让APP与用户产生共鸣。 一、 关于老用户优惠活动页面的设计要点 如果想老用户愿意分享你的APP或功能,就需要让他们感到愉悦,并有种“不分享就会亏了”的想法。如: 1. 双赢模式奖励   奖励包括:现金、实物礼品及虚拟物品等,现在大多数APP都喜欢使用这几种方式,同时也是最有效的方式之一。奖励一般分为三种:利己、利他和双赢,下面我们主要说说双赢模式奖励。 就目前行业趋势与设计理念来说,双赢模式奖励是见效最快且用户认可度极高的一种,其方式主要是邀请后双方都能获得奖励。 2. 阶梯模式奖励   阶梯模式奖励,其实就像上台阶一样,上的阶层越高,就越容易接近成功或重点;而这里指的是用户邀请人数越多,获得的奖励也会越丰厚,以此促使老用户邀请更多新用户加入。 3. 拼团模式奖励   拼团模式奖励,就是用户邀请好用一起拼团购买,以此获得更优惠的价格。拼团界面模式设计主要有两种: 一种,将拼团后的折扣价与原价并行展示,让用户快速作比较,从而达到拼团效果; 一种,单独设计拼团入口,通过折扣价、货仓总数进度条、已售商品数量进度条等展示,让用户快速选择,实现拼团购买。 两种方式没有可比性,其目的都是为了衬托“拼团的价格优势”,设计时可按照APP情况选择合适的设计模式。 4. 砍价模式奖励   砍价模式指的是,用户若想以优惠价格,甚至0元购买某种商品,需邀请多个好友进行砍价。其目的在于通过用户分享给好友后,能获得更优惠的价格,以此刺激用户实现更多分享行为;以及,用户触发行为后,立即展示奖励,从而推动用户持续拉新。 5. 成就感模式奖励   自我优惠活动当中,不少人会更在乎成就感。成就感模式就是想让产品满足用户的虚荣心,使其获得相应的成就后,促使他们分享出来。 二、 关于新用户优惠活动页面的设计要点 老用户分享给好友后,就要促使新用户更活跃参与到优惠活动当中,如: 1. 首单立减模式奖励   与老用户不同,拉取新用户后,新用户的奖励成分将会更加大,这是为了初次推动新用户转变为老用户的使用手段,同样是最有效的手法,其在于新用户参与活动后可获得大份额的奖励。 2. 优惠模式奖励   价格优惠同样是双赢模式的一种,邀请人与被邀请人参与后,可获得对应的奖励,其目的在于提升用户粘性的基础上,附赠拉新用户的手段。 3. 限时限量   限时限量能给用户心理产生急促感,告知用户过了这段时间后,未必能享受同等优惠,让用户快速使用。 提高优惠活动页面转化率的方式有哪些?…

顶部导航栏,无论在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 的对比度,提高界面的可读性。

MENU
網頁設計公司