网易应用下载站WEB端GUI设计的小分享

标签: 视觉设计 | 发表时间:2011-08-02 16:50 | 作者:lorway kamal
出处:http://uedc.163.com

前言:

 网易应用下载站WEB端开发进度日渐收尾,伴随陆续的测试优化工作,借此机会浅谈一下GUI设计实践上的皮毛经验。网易应用的特点在于服务用户下载应用和社交分享,因此GUI的设计作用在于把用户交互体验抽象化任务流程和操作方式表达得尽量准确尽量自然:
————————————————————————————————————————————

Ⅰ.样式的意义

 例a.不要分散用户的焦点注意力:

GUI设计中不应该分散用户对自己任务目标的注意力。不要让人们总是去考虑他们正在使用界面。任务操作应该在用户意识的背景中,而不是前景中。这便是整个界面的设计定稿所在。首页的主要任务有观看应用、下载应用、观看应用推广。五光十色的应用图标和广告陈列在页面上,使用简易清新素色调界面可以调和色彩浓烈带来的疲劳感,而且使应用图标本身更为突出。

 
 

 例b.不为视觉而设计:

在第一屏内的背景使用了浅灰色渐变背景色并不是纯粹为视觉而做。考虑到头图切换色调的多样性,白色底、黑色和深灰色底、饱和色底图最为常见,假如用白色背景,那白色头图融为一体,切换区和预览大图被分割为2个部分,页面断了。例如:

 

………………………………………………………………………………………………………………………………

 头图加框又稍感画蛇添足,画面感细碎,例如:

 

………………………………………………………………………………………………………………………………

 可见用一个浅灰色底背景解决了头图替换成白色的问题,相比以上效果切换区和预览大图更为整体,版块感更强。这样头图切换不同的大底色都可即清晰又整体,背景底色即有单一色值,头图与背景色值相同的情况就极为个别了:

……

————————————————————————————————————————————

Ⅱ.整体统一化

用户界面应当有利于使用习惯的培养。当使用交互式软件或者电器时,用户希望尽可能快速地进入潜意识习惯。他们希望能忽略软件或者设备,而将注意力集中在他们的任务工作上,软件越一致,用户就越容易使用。界面控件亦是如此,它们的不一致也会迫使用户不断的考虑,因而分散了用户对任务的注意力。

 

例a.UI组件库的优化

初稿中的组件较为凌乱,可见按钮随意三种样式的色调,渐变,大小字数皆不统一。关闭弹框符号的小叉也风格迥异。

………………………………………………………………………………………………………………………………

反复斟酌考量后的优化组件库中,重要级别和字数,突出侧重点相对来说更加清晰明确:

例b.图形歧义:

制作弹框UI部分的时候,按照交互原型需求顺水推舟。后期测试发现其中信息发送回馈弹框警告浑浊不清。。。琢磨其中原来问题处在弹框界面上有2个的叉寓意处理不妥,大的红叉表示不合适,不正确的意思。而栏目条上的小灰叉则表示关闭弹框。优化方案显而易见了:弹框上的小叉保留不变,它在此意义明确,且十分常见,更涉及界面繁多不易改变;大红叉相对来说图形化大于交互功能,修改不受牵制,那么根据右侧说明文案中有不能发送,不能传输的意义,所以更改为禁止通过的符号形象就更加吻合意义了。

例c.组件与常见标准化模型不一致:

用户评分系统,在策划雏形之初,评分系统的模型见左下图(左),模型视觉非常接近常见的进度条Loading模型,而进度条形式显示完成度,剩余量,和可能需要处理时间等信息。但评分系统是表示等级分级阶梯,并没有完成度这个信息。建议修改后大众熟知的五星级模型,最为常见易懂。

————————————————————————————————————————————

·

Ⅲ.打破整体统一化

应用下载是用户对此站点使用的最后任务达成,最终下载按钮是此页最重要的功能键。第一版应用下载页在设计之初,过于强调色调统一,大按钮被淹没其中,除了漂亮的应用图标,其次五颗星则非常凸显:

………………………………………………………………………………………………………………………………

其实页面的主要目的是下载,试分析有一类用户可能随意浏览到此,则辅助信息颇为有帮助,另一类用户可能是听朋友推荐后到此下载,辅助信息对他而言用处较小,但下载的步骤是必须且永远重要的。优化之后,巨大的按钮使用了大面积的橘红和天蓝色就一目了然,仿佛在说“快来点我吧”。

·

————————————————————————————————————————————

Ⅳ.GUI标准分层模型

用户界面标准可以分为多个层次、每个内部层次范围更窄。用户界面设计具有行业级标准。其中一些是针对不同平台的如:Windows、Java,还有的是公司制定的企业标准,使其产品具有独特性的、具有品牌效应的外观。此外,特定产品线中的产品比其他普通产品具有更多相似性。最后也可以为某一个特定产品开发一些标准,以保证其不同部分之间的一致性。标准的内部层次是对外部层次的补充,而非矛盾。网易应用上的字符色值、和界面的分栏尺寸宽度均按照网易门户规范色制定,保持企业标准统一之中添加了更详细的产品特色标准。

 ————————————————————————————————————————————

结语:

个人认为好的GUI设计,应该浑然天成,如同生于天地间的自然之物,让用户觉察不到设计;这种“平凡”的设计隐介藏形于平凡的生活当中,需要设计师慢慢体会寻觅。以上个人愚见不过是粗陋寡闻盼望高人多多善言指点。

相关 [网易 应用 下载] 推荐:

网易应用下载站WEB端GUI设计的小分享

- kamal - 网易用户体验设计中心博客
 网易应用下载站WEB端开发进度日渐收尾,伴随陆续的测试优化工作,借此机会浅谈一下GUI设计实践上的皮毛经验. 网易应用的特点在于服务用户下载应用和社交分享,因此GUI的设计作用在于把用户交互体验抽象化任务流程和操作方式表达得尽量准确尽量自然:.  例a.不要分散用户的焦点注意力:. GUI设计中不应该分散用户对自己任务目标的注意力.

网易公开课 iOS V2.0 支持下载与离线观看

- Deen - cnBeta.COM
网易公开课手机客户端V2.0版正式上线. 新版本新增了下载与离线观看功能. 网易公开课近期在内容上新增了数百集TED精品课程,给用户提供更精彩的全新内容. 而针对已有的课程资源,新产品设计了推送功能,新增了视频纠错入口,用户可以及时反馈有问题的视频.

网易邮箱极速4.0支持附件拖拽下载

- 韬光养晦 - cnBeta.COM
网易邮箱对外宣布,网易邮箱极速版4.0再次发力推出十多项新功能为用户带来全新体验. 可以无需安装邮件客户端软件,有新邮件也能通过桌面提醒,附件还可以直接拖拽完成下载. “支持附件拖拽下载,以及yeah.net邮箱新增来信桌面提醒是此次4.0升级的两大亮点,可以让网易邮箱用户收发邮件更快捷和方便. ”网易邮件事业部副总经理赵勇表示.

iOS应用下载“量价齐升”

- ItTalks - 《商业价值》杂志
专注于研究苹果公司的咨询公司Piper Jaffray’s Gene Munster近期发布了一份研究报告. 报告显示,2011年,iOS设备用户正在以更大的热情购买付费应用,而付费iOS应用的价格也普遍得到提升. Piper Jaffray详细监测了自App Store上线以来,包括终端数量、应用下载数量、付费应用数量、免费应用数量、收入等在内的各种数据.

Android应用下载量将超过苹果应用

- Lee Jia - cnBeta.COM
科技网站CNET 9月8日发表评论文章,表示市场研究公司Ovum的数据显示,Android应用下载开始出现井喷,今年其下载量将超过苹果应用的下载水平. 但在应用收入方面,苹果依然处于领先地位.

有道笔记:网易推出的Evernote类笔记应用

- 叁石 - 善用佳软
昨天,cnbeta发表了一篇关于有道笔记的文章,引起了一些网友的关注. 我也很感兴趣,于是,为有道笔记开设专文. 相比知识管理、PKM这样的大题目,我更认同“资料管理”“笔记工具”这样更实在的称呼,极力倡导“以笔记为核心”的学习方式,坚信在信息过载、移动应用的趋势下,笔记应用将成为新兴需求,并且其产品发展方向与传统多功能桌面资料管理软件有巨大差异.

Google Maps应用大更新 加入离线地图下载

- jian - cnBeta.COM
Google今天凌晨更新了Android版的Google Maps应用,为大家带来了多项功能更新,其中离线地图模式终于加入了主动选择下载区域地图功能,极大的方便了用户使用.

Android应用下载30亿次,设备每天启用35万

- jian - Solidot
根据Google的数据,目前从Android Market下载安装的应用已经超过30亿,其中10亿是在过去三个月内下载的,等于每天的下载量约为1100万次. 除了应用程式的下载数量之外,另外一份Google数据显示现在每天有多达350,000台新的Andr​​oid设备启用. 照这个速度走下去,一年内启用的设备将会超过1亿2700万台.

在星巴克店内下载免费的应用程序

- 万俟尘 - 爱范儿 · Beats of Bits
在亚马逊的 Android 商店里可以每天下载一款官方推荐而且是免费的程序;在亚马逊 MP3 商店里每天能下载到一张折扣专辑;现在, Kindle 商店里,每天也能下载到一本打折书籍. “Daily Deal”似乎已经成了亚马逊自家最大的特点,当然,它也是吸引用户关注的利器. 不过,就好像超市里推出“每日特价”一样,对很多商家来说这似乎并不是一件困难的事.

Ice Cream Sandwich Google+ 2.0 和 Google Music 4.0 应用泄露 [下载]

- 可可 - 谷安——谷奥Android专题站
近几天可能大家都见到了一系列下一代 Nexus 手机以及 Android 的下一个版本 Ice Cream Sandwich(ICS)方面的消息. 目前一些新版本的 Android 应用也随之流出. 现在已经可以下载到新的 Google+ 2.0 应用以及新的 Google Music 4.0 应用.