·设为首页
·收藏本站
·网站地图
当前位置:精诚首页 > 新技术 > 网页设计 >
网页设计

交互设计案例:产品结构化繁为简的设计理念2

时间:2015-07-24 10:13 编辑:精诚网络 点击:

WindowsPhone一直是各家公司很少投入的平台,所以WP用户不得不经常面对一个成熟的APP到了WP上就变得各种功能缺失、体验支离破碎,他们渴望应用软件在体验上能和其它平台一样受到同等重视,音乐APP也不例外。

与众不同的WP风格设计,决定了云音乐WP版在现有平台上找不到任何可以直接移植的设计。不过,也正因为从零开始,设计师得以放下“破坏用户已有习惯”的思想包袱,重新审视这些年产品的痛,在WP上做一次大胆的改变。

化繁为简,从不是件简单事,如何既保证功能体验完整,又体现WP平台自身极简、轻量的特点,成了贯穿我们设计始终的思考。

一、更加简洁、高效的导航

为支撑起云音乐丰富的内容,现有手机端均出现了原本PC/Web上才会出现的双层甚至多层嵌套的导航结构,以使信息更外显。

而WP极度扁平的导航结构显然无法消化云音乐日益扩充的内容,如果将目前层级结构直接移植到WP,则“发现音乐”下的4个二级导航要变为入口,这种设计用户第一眼看不到任何有效信息,推荐等核心内容的层级变深了,也不利于产品运营。

因此内容显示的优先级还是要有所取舍,扁平化的最终目的是让用户更快到达所需,任何风格规范只是辅助达到目的的方法,为此,我们打破现有结构,重新梳理了不同用户类型及其使用情境,最终将一级导航精减到4个。

1、海外网站推广将原先“发现”里和推荐相关的内容单独提取出来作为一分支,这部分内容在表现形式上讲求直接呈现具体信息,方便“无目标”型用户快速发现云音乐的优质内容。

2、余下“发现”里的内容则更针对“有目标”型用户,对于这类用户来说,入口设计方便他们纵览所有内容模块,从而快速定位自己所需。

这样,不同用户都可以快速切入主题,运营内容和社交元素都得到了恰当的展现,入口设计减少加载,保证首页全景图横向浏览过程中的流畅体验。

二、减少迷失感

全景图式导航(Panorama)在体验上最大的一个弊端是,你无法在当前屏看到全部导航,无法快速切换导航,只能通过依次横滑去到达。如何减少这种周而复始地横向浏览所带来的迷失感,让用户更快找到自己需要的东西(对此,大家也可参考一下马海祥博客《基于交互体验的防呆设计应用与策略》的相关介绍)?

除了精减导航个数之外,我们也重新规划了导航优先级,以便更重要的内容更容易在第一时间被发现:将“我的音乐”作为默认进入页,因为这是每个用户的“家”,然后从“家”出发去探索,根据内容优先级,依次经过推荐、发现和朋友动态。

在设计上讲究横向浏览过程中页面布局的变化,用户可通过视觉辅助确认自己当前所在模块。

三、利用平台特性,让信息更扁平

歌单是云音乐的内容核心,产品功能迭代至今,歌单界面已经变得臃肿不堪,但仍就有很多信息难以被发现,巴掌大的手机界面,如何尽可能让信息外显,谷歌网站推广同时界面又不失优雅?WP平台的一些全新特性让我们看到了机会。

UI扁平化后,可点击区域变得不可预期,在WP歌单页,马海祥将信息与操作分离得更彻底,除了与歌曲列表关系紧密的播放、下载,其它所有针对歌单的操作都放置在应用栏(AppBar),不再让用户满屏地探索,使交互更加可预期。

信息回归本质后,视觉亦然,视觉首先要符合其所处的环境,其次才是自己的性格。鲜艳的大色块只适合首页,内容页则以黑白灰为主色调以突显信息本身,但是完全素色的界面又显得死气沉沉。

通过反复尝试红色运用在不同细节上的效果,最终达到红色使界面更有个性的同时不抢内容。

设计过程中对色彩、间距、字号的精益求精,开发过程中的百余次微调,对设计师和开发都是极大的考验。

马海祥博客点评:

“真正的简洁不是删繁就简,而是在纷繁中建立秩序”。打造全功能版的云音乐WP端,无论是设计还是开发都经历了从混乱到有序的过程。

改变意味着风险,我们在WP1.0做了很多不一样的尝试,同时也意识到这个版本还有很多事来不及做。

本文为马海祥博客原创文章,如想转载,请注明原文网址摘自于,注明出处;否则,禁止转载;谢谢配合!交互设计案例:产品结构化繁为简的设计理念2015年7月24日。

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线---------------------------
声明:精诚网络网站内容中凡注明“来源:XXX(非精诚网络)”的作品,均转载自其它媒体,转载目的在于传递更多信息,其中涉及的网站优化,百度关键词优化,谷歌优化等技术细节并不代表精诚网络赞同支持其观点,并不对其真实性负责。对于署名“精诚网络”的作品系本站版权所有,欢迎站长朋友在转载同时署名来源。