app设计告别黄页时代 让ui设计鲜活起来

分享到:更多 ()

每年的双11都格外疯狂,随着技术带动内容的丰富化,刚过去的双11气氛在大众购买力的飙升下又刷新高,让人一夜之间感受到运营力量的震撼来袭。在血脉喷张各种抢购倒持购物车时的你,可否留意过无形之中的商城装扮。众多电商app从整个界面翻新到内部的运营活动抽奖机制,堪比一座物欲相抗衡的虚拟不夜城。

这些多样化而不失秩序的运营设计,背后支撑着有序的设计原则。如今形式内容纷呈的移动互联列队中,充斥着综合垂直电商、团购、旅游、生鲜等2C市场应用的身影,以丰富化运营方式攻占联结产业链,而黄页类生活资讯类应用相对显得务实,部分app的步伐更是仍停留在信息单向展示的模式。

高效与运营化取舍

上半年经历了一轮生活服务信息分类平台的改版设计,探讨了综合信息黄页类产品究竟是以高效实用为主,或是引入运营化方式。项目位于手Q侧的58同城合作频道,内容基于精选浓缩后的资讯形态,发现第一版保守传统的纯文字菜单,以任务功能为主导,但显得苍白单薄。针对该类综合信息展示平台,平衡信息高效主动关注和营销推广被动接收,做了竞品研究及方案尝试。

近两年赶集网、百姓网、58同城三大生活导航服务类的产品广告宣传投入之大,综合生活服务类产品早期在网页上大多都是黄页名录,是纸质黄页的延续。搜寻了一些国外的黄页产品现状,不乏一些紧跟互联网节奏的YellowPages产品。例如美国最有影响力的本地服务产品YP,从网站到手机App,服务门类可作为自定义标签逐个添加,顶部为生活关爱的意向背景图,把情感化连接到高效工具里,甚至在Apple Watch上也支持使用,真正做到了摆脱传统的黄页列表。

其他行业维度的垂直领域产品,齐刷刷以丰富营销的思路去布局组织信息。譬如生鲜类应用,在供应链上投入较多的基础上,不遗余力地去做吸引用户促成交易的事情,在众多行业中属于比较典型一类。

分类服务信息定制化3.0跨进

PC黄页时代近似web1.0的信息单向呈现,发展至移动端的黄页产品,用户可以在平台上搜索甚至留下自己的足迹,这个节点演变到2.0信息双向呈现。而web3.0个性化定制的理念延续到移动端之后,从淘宝到大众点评等主流的电商App都有猜你喜欢、个性化推荐的功能。黄页类综合信息平台也可以有类似机制,除了为用户提供便捷实用的信息,也可推送一些潜在吸引点的资讯。由此,搭建图文丰富化运营的首页是改版首要目标,兼顾被动浏览和主动获取信息,提升访问人气。

从现实到虚拟体验

黄页服务在现实中都是拆分开的业务形态,每一个本地服务都有其营销模式。来同城服务平台的顾客,应该留给他不仅是快捷服务的印象,还有其他二手车、宠物、二手房等推荐资讯,那些购买前会谨慎筛选的顾客会再次光顾,也就多了平台信息曝光的几率,从而转化率成交量也就相应提升。

拟物化虽在视觉材质表现层离我们远去,但界面中的信息布局离不开现实的映射。界面中的模块化设计,黄页类和电商类APP 有业务依赖的差异,但在线上的展现形式是互通的。线下的体验最常见的属商场里的标识导视、货架、易拉宝、优惠专区等,分别对应虚拟界面中的导航栏、商品陈列、广告位等。

1.导航栏

导航是界面中的路标,起到快捷分流的枢纽中心。现如今为数较多的电商资讯类都会采用八个圆形状图标版式。当被趋势潮流带着走迷失的时候,设计师不妨追溯到现实生活历史发展中去审视本源。导航栏除了体现整体品牌感和个性展现,最首要的是信息语义传达,用户高效识别。这块现实映射中最有借鉴的是公共导视系统,从瑞士国际主义平面起,运用metro图标作为信息传达的必要元素。

 

2.九宫格多宝阁

如今电商平台的App界面,大多用到多栏收纳的方式去承载展示信息,引用metro UI的灵感说法,设计理念源自“多宝阁”陈列古玩的清代工艺家具,具备实用收藏功能与陈设审美。多宝阁的使用,空间利用寸土寸金。在有限的手机端界面中,分割格子数不宜过多;商品标题大小应适当,保证清晰可见;商品摆放尽量大气,撑满格子。就如线下的体验,实体店铺里所有的衣服堆积在一处,少了一些尊贵感。相反,精心的收纳,带给顾客优待的购物感受。因此,建立一套既有序又不单一的橱窗模板购物体验,栅格系统也是必不可少。

 

3.卡片滑动(是否存在7+/-2原则)

横向滑动式的卡片越来越多地被应用到界面中,既可充当华丽的分割线,又让用户带着翻卡片的愉悦感。如果卡片的图够吸引人,例如美丽说的横向banner滑块,对于好奇心略重的用户对于美好事物的探究,会尝试看尽也无妨。一般情况下,建议卡片个数在5~10个。

但如果个数非常多,又希望用户滑完所有卡片,有计数的方式不失为一种方法。个数少的时候,用点计数足以,个数多时,采用N/M表进度的计数方式,给到了一定的心理预期。包括滚动卡片的长宽比应用也是有讲究的,比如卡片长度远大于高度时,扁扁的一条会增加用户手势滑动的心理负担小,有划距长的错觉。

 

4.货架

除了一些常见的列表模式,在时尚电商的应用Polyvore里可以看到一类变体列表,还原了现实中的货架摆放形态,同时增加了夸张手法,商品的大小被满满得拉大甚至出血排版,平面报刊排版的魅力所在,收放得体,简洁有度,大胆肯定。App内的商品喜爱收藏,组合拼贴的模块,与时尚杂志一并相得益彰。

 

5.店铺熟悉感,秩序中的纷扰

双11的一些APP设计店铺,会适当装点流星式装饰元素,试图打造夜间霓虹灯即视感。夜色里光怪陆离的让店面更吸引人,抢购活动一般在双11前夕,所以霓虹灯的摆设成全了代入感。除此之外,在有序的卡片瀑布流中,偶尔夹杂几个推荐给你的专栏或达人,也会特别吸引用户的眼球。

 

6.趋势:灵活组合型

当你发现现有的模式都穷尽的时候,是否创新到了瓶颈,是否再刻意想去创新的时候,会违背设计的本意,简洁优雅的体验初衷?那不妨可以突破一下,来一下混搭组合,会有不一样的重置感。在过去的时间里,App中的banner广告位大多用于头部的类灯箱banner、大模块间的隔断banner、专题瀑布流的banner。基于流量体验和信息量控制考虑,会尽量少用大图。
而近期发现越来越多的电商App,不吝啬使用大面积的banner篇幅,敢于把瀑布流的单元格做重。将banner和九宫格组合,和滑动卡片组合,每一个组合又各成一个单元,形成这一类的瀑布流。

此外,如果你试图使用精心筛选过的位图,围绕一种主题色去布局,也显得创新又时尚贴心感。不按常理出牌,也是众里博眼球的方法。

 

7.多媒体视听唤共鸣

在过去街区商铺实体经济开枝散叶的年代,引入了小额商品通铺统一价的概念,“ 5元5元全部5元”的广播叫卖声,成为一种标志性的粗暴接地气的营销方式,在70、80后的回忆里深入人心。

这样的体验搬到虚拟平台上,演化为二手物品的私货转卖语音、店铺老板吐血吆喝,增加真切真实感,让现实中熟悉的场景再现,声音和语调有它的唯一性,也是能成为主人的加分卖点。波罗蜜全求购的日韩货海淘App,专门开设了一栏日韩海外专员导购PK的直播频道,在讲求个性的年代,直播视频也会为你积攒一大波可观的关注度。

 

8.拉皮条的人身在何处?

美丽说的Desire频道弹幕的应用,增加购买场景下的临场感,仿佛和一群人在一起购物。评头论足就差漫天砍价。

 

线上到线下的反映射延续

看过今敏的经典动画《红辣椒》的小伙伴都知道,这是一部天马行空文学意义上脑洞大开的神作,全片贯穿了现实、梦境、电影、屏幕4种媒介交错。人们向往梦境中的那个时空,绮丽科幻美好荒诞共存。在电脑的虚拟构建世界里,可以存在各种捷径bug,除此之外,虚拟与真实世界的场景体验,跨时空共同演进,真正意义上达到媒介互通。

线上到线下存在着反映射模式,线上虚拟体验的成本较低,线下再现更是让用户倾心,如同旅游景点里,游客看到影视剧里主角出入的地方,欣喜不已,跨时空难以言喻的情怀,类似梦境里仿佛去过。

近日无印良品书店的崛起,使得很长一段时间看衰的纸质书又火了起来。书店进门处,都有悬挂每天会更新的“是日佳句”,书本的分类不再是常规的普适分类,而是按照场景主题去归类,甚至任性地以书的颜色去划出一个区域,这些都是我们平日常见的线上电商社区运营手法。

打好高效与运营的双刃剑节奏感

一个长页面,用户最多能接受几种模块变换,多少类似的模块出现后,又会觉得乏味。打造高效的体验和运营丰富化,这两者并不互斥。在信息模块多样穿插的基础上,元素的形式是构成节奏感的必要因素。在排版、图形、色彩的构建阶段,节奏感的打磨,能让信息阅读体验循序渐进、不易疲劳。

1.选图信息加工艺术

当界面中需要交代更为详实的内容时,尽量使用实物图,抽象的图形会拉远与用户的接收反馈进程。用户对于信息的加工,建立在对对象的熟悉程度。信息具象直接强于信息抽象、熟悉强于未知、人强于物。所以运营化必不可少的事,是把熟悉感强、带有话题感的事物,建立关联。

 

2.图标填充型和线型

一款资讯类App通常层级多,也意味着会有首页和二级页的导航图标,也可能会包含页内小模块入口导航图标。前文提到导航的形式表现非常多样化,对应的图形表现的设计初衷也不同。其中影响因素有产品受众用户群范围、品牌形象、功能定位(高效工具或资讯浏览或综合型);图标的图形构成有颜色、点线面形状、质感。

在去强品牌化和去强运营后,图标的填充剪影型和线型成为最常见的两种造型手法。但如果以高效为主要目标,填充和线型两类起到效果是有差异的。人们的视神经感受图形造型认知,有据可寻。如完型心理学里所体现,肉眼更能第一时间感知到填充型图标,对于线性的图标,则对视知觉的冲击相对小。线性形态较图形剪影的形态复杂,毕竟我们现实中对物品的印象,是可以简化为剪影,而线性的描绘,是后期的艺术的二次描摹加工。

在同城服务项目过程中,针对头部的导航栏展现方式做了若干尝试:

发现对于综合型的信息平台,导航栏以五彩对矢量图标呈现,较为简洁直观,图形传达讯息语义高效。在用研设计阶段,引入对填充型和线型的图标导航的认知反馈的快速测试。

3.颜色用色

有效适度地运用色彩,能使界面的信息解读更为清晰,用浓墨重彩去妆点突出的部分。用色要有余韵,如果每处都是强烈的色彩,恐怕用户盛情难却。非但没有达到原本目的,可能会吓走本要抓住的目光。如果希望用户关注眼前全盘托出的信息,可以把握一下用色的节奏、少一些冲突多一些和谐。节奏感的巧妙应用,让界面信息更有层次,优雅地呈现。

 

总结

 

跨界营销,跃过平庸

用事物变化发展的视角去预判一个业务形态,能为设计解决方案提供一定的判断准则。2015年那些曾经独占鳌头的实体店阵亡的无奈名单,告诉我们拥抱变化,跨界布局的重要性。以营销为主战场的各大商场和商铺,都经历着转型线上的时间考验。更何况是以本地服务为切入口的线上信息平台,商机四伏,应该告别平庸的模式继承,去借助互联网传播的力量,走好内容运营化这步棋。产品人设计师需要用开放的心态,跳脱现有固化的框架和思维,去尝试站在风口经历浪潮的拍打。

闹中有序,相辅相成

天下之势,分久必合,合久必分,五行说中的相生相克又可以用来表示事物之间动态平衡。如果用美学去诠释太极图形,黑白对比,形态存在对立与统一对称。而界面中布局的也存在着类似原则,能构建出有张力的设计。如何让一个页面事半功倍,让元素之前的吸引力内耗减到最小,除了严谨的数学之美外,需要运用用色与位图排版层面的对比手法,形成一定的节奏感。懂得在首次亮相时就牢牢抓住用户;在信息摄入倦怠时,放缓信息量;等到信息负荷期平复后,再次鲜明突出。好的产品设计就像可玩性强的游戏关卡一样,能持续性地吸引用户,在有限的空间内,用恰好地布局、用色、阻隔等元素,让信息相互和谐相互衬托。

细微观察生活,现实虚拟无界

从线下过渡到线上的体验是一条正向迁移轨迹,而将互联网虚拟的体验迁移到线下,也能打造扳回一局,甚至双赢。线上到线下的模式,密室逃脱、真人CS 、餐厅点单自助机、虚拟现实技术、网络小说真人影视演绎等,这些都是初始形态源于虚拟网络。虽有很多用户界面体验中,已包含了源自现实的体验。但仍有一片未开辟的蓝海,等待开启设计师的慧眼用心去发掘更多。

 

原文:腾讯ISUX

 

最美UI|学ui设计联盟|一起努力学设计!

最美UI zuimeiui.com 学ui设计最值得关注的UI学习教程交流平台! 每天发布高质量的设计教程和分享设计经验,帮助喜欢UI设计的初学同学快速转型,我们给大家提供更多免费学习ui的机会,想成为设计师的你赶快加入吧! 给最美UI点个赞!有你的支持是我们前进的动力! 猛点这里 >>

最美ui微信公众号zuimeiui要养成关注干货好习惯哦!

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
设计师:三人行必有我师。在这里可以交到良师益友哦!还不赶紧加入? → 猛戳这里

【最美UI 原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!我们将一一答复!】

未经允许不得转载:最美ui » app设计告别黄页时代 让ui设计鲜活起来

0
分享到:更多 ()