一、 iOS:网易云课堂
体验版本:ios12.1
网易云课堂作为一款实用技能在线学习平台app,核心功能即为“售课”和“授课”。整个app也是围绕这两点进行设计。因为产品本身功能较简单,所以采用了底部标签式导航的结构。
1、“售课”方面:
在有限的空间内如何较好展示课程内容和卖点成了主要考虑要素。因此云课堂采用了大量的分段+卡片式设计,小图+文字描述来展示课程内容。
首页:一直固定在顶部的搜索栏+轮播式banner导航+广告位+分段式导航+卡片列表展示具体课程内容,展示的是每一类别的精品/较受欢迎的推荐课程。
此外,喜欢归类的网易在“精选专题”,”推荐行家“,“系列课程”这一块采用了左右滑动的设计,可以给页面内容长度“肩负”,同时给页面进行区块分割,减少用户上下滑动造成的视觉疲劳和交互惰性。
在“发现”“我的学习”这一块相对较少用到的板块,使用分段式导航作为二级导航。
2、”授课“方面
一进到APP页面,底部的浮窗显示当前正在学习的课程内容,比起网页端入口的难找,这是一个非常棒的设计,减少了学课时的操作难度。
不足的地方:
在观看视频的时候,用户可能希望暂停来记一些较为重要的知识点和笔记,因此如果视频处可以添加截图和批注功能的话个人认为会更加吸引用户去学习和使用这个app。
二、web:网易考拉
网易考拉是网易旗下以跨境业务为主的综合型电商,主打“自营直采”概念,销售品类涵盖母婴、美容彩妆、家居生活、营养保健、环球美食、服饰箱包、数码家电等。
与阿里系的淘宝,天猫网站不同,网易考拉的整体界面风格较为简约克制,配色除了品牌渐变色(brilliant red)以外就是大面积的黑白灰。考虑到其产品的定位人群主要是有较高消费品味和购买力,热衷于海购的时尚女性群体,这样的设计体现出一种高级感和品质感,符合网易一贯的调性。
与众多电商购物平台一样,网易考拉的网站首页采用了标签式导航作为一级导航+下拉式导航为二级导航系统的矩阵式页面结构,这类设计适用于展示内容较多的商品网站。
如上图所示,首页左侧是用于展示商品品类的抽屉式菜单(在首页是固定的不会隐藏,切换到其他二级页面时该菜单会自动隐藏),首页居中是推广商品的轮播式banner,而顶部导航则采用下拉式菜单放置个人中心、客户服务、充值中心消费者权益等功能,这些都是用户较少使用但是相对而言对他们较重要的功能,而顶部栏下拉菜单的设计巧妙地减少了这类功能平时在页面的存在感,但是在用户偶尔想用到的关键时候又能快速地被找到,大大减少了用户操作点击次数和寻找时间。
针对电商用户在最常使用,也是最重要的功能——“搜索商品”和“下单购物”,放在了较为显眼的位置。在进行网页下滑操作时,搜索栏一直固定在顶部,左侧是固定的标签式导航,利用颜色和字体大小对比显示出不同的信息层级结构,右侧是购物车,签到以及鼓励下载APP的入口,为了方便用户随时回到最顶端,设计了一个TOP的控件。左右两侧设计相当简洁,视觉上不会给用户造成过分干扰,但是想用的时候,它就在那里,个人认为是众多电商网站里做得最好的。
在具体的内容展示方面,考拉网页采用分段式+宫格设计,形成多而不乱的方正感,宫格并不是大小均一的枯燥重复,而是根据内容以及设计黄金比例分割出来的不同尺寸方块。统一的设计语言使得这样所有商品排列在一起时显得相当和谐,也减少了后期更换商品图时需要进行再设计的费工。
但是这样做的缺点也相当明显:
1、因为设计的相当简洁,能展示的商品也较少,为维持调性,对于能上首页的商品选择要求较高;商品的展示考验商家和设计师的功力,同时文案也要相对出彩,否则整体会变得比较无聊;
2、难以激发用户购物热情。网易考拉的商品内容展示设计体现出一种品质感和高级感,单纯从设计角度欣赏相当赏心悦目,但其实并不利于购物氛围的营造。这种高级感也会产生一种距离感,过于性冷淡的设计可能会无法激发用户的购买欲,看久了用户也会失去新鲜感。(对比天猫商品页设计而言)