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

前言:

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

Ⅰ。样式的意义

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

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

例b.不为视觉而设计:

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

头图加框又稍感画蛇添足,画面感细碎。

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

Ⅱ。整体统一化

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

例a.UI组件库的优化

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

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

例b.图形歧义:

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

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

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

 

Ⅲ。打破整体统一化

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

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

Ⅳ.GUI标准分层模型

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

结语:

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

文章来源:网易UED

时间: 2024-08-13 17:32:01

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

Web端的设计:让我们的web端产品跟上时代的脚步

文章描述:如今,随着智能手机.平板电脑等移动手持设备的普及,越来越多的Web网站都在向这些平台做兼容.同时,这些移动设备上的视觉设计与交互设计也在影响着Web端的设计. 如今,随着智能手机.平板电脑等移动手持设备的普及,越来越多的Web网站都在向这些平台做兼容.同时,这些移动设备上的视觉设计与交互设计也在影响着Web端的设计. 所以,现在我们的设计是不是要变得更加的popular一点呢?是不是可以总结出一些方法让我们的web端产品跟上时代的脚步呢?

百度云Web端支持预览文件格式分享

给各位百度云软件的使用者们来详细的解析分享一下百度云Web端支持所预览文件的格式. 方法分享: 百度云Web端支持预览图片.音频.视频和文档.支持的文档格式有:doc\docx\ppt\pptx\xls\xlsx\vsd\pot\pps\rtf\wps\et\dps\pdf\txt\epub\xlt\xltx\potx\dot\dotx\ppsx等; 百度云Web端支持的音频格式有:mp3等; 百度云Web端支持图片的格式有:jpg\gif\bmp\png\jpeg等; 百度云Web端安装百度影

App开发竞争严酷已成红海 下一站Web端HTML5

中介交易 SEO诊断 淘宝客 云主机 技术大厅 "App刷票",近来移动互联网领域一个炙手可热的新名词.意指由专门的团队在苹果AppStore这类软件商店中,通过使用大量账户下载和评论某款应用,使其排名迅速攀升."App刷票"背后则是移动互联网市场竞争渐趋白热化.据统计,目前国内iOS和Android平台上的开发者达20万,但整个市场收入才15亿元人民币左右,即平均年收入7500元. 触屏.智能手机.移动操作系统.应用商店--这些名词问世时间再短也已是明日黄花,难道

从“下载站”的没落看我国互联网的十年

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 最近这两年,随着互联网的发展,下载网站仿佛已经淡出了人们的视线,印象中我也已经好久没有去下载站下载过东西了,原因一方面是现在大部分的软件都带自动更新功能,不需要经常去下载安装,再有现在各种软件品牌已经形成,不再需要下载站的推荐,下载也可以去各官方网站或使用软件平台来下载,既安全又可靠,最少不会出现下载来的软件带一堆广告的情况. 今天之所以想写

网易IDJ音乐站改版:UCD设计思想初体验

     网易IDJ音乐站(idj.163.com)是音乐的互动分享平台,期望突破以往听音乐的方式,由被动的听歌转为主动选择的音乐关注和主动的音乐分享,用最快的速度找到你想要的音乐和推荐给别人,你喜爱的音乐.     IDJ新版的设计目标 调整站点结构,更尊重用户习惯调整全站导航,让用户一目了然的站点地图,全面的找歌搜索,做到更清晰易懂     简约清晰的设计,使操作更易上手更方便快捷上传歌曲和制作自选集自选集代替了歌库,方便用户推荐音乐集合关注音乐,一键搞定--    更加丰富的音乐站点内容音

文件下载-手机浏览器从web端下载文件失败,但是在pc浏览器上正常,该如何解决?

问题描述 手机浏览器从web端下载文件失败,但是在pc浏览器上正常,该如何解决? 这个是抛出的异常 org.apache.catalina.connector.ClientAbortException: java.io.IOException: Broken pipe at org.apache.catalina.connector.OutputBuffer.realWriteBytes(OutputBuffer.java:393) at org.apache.tomcat.util.buf.B

网易IDJ音乐站改版—UCD设计思想初体验

网易IDJ音乐站(idj.163.com)是音乐的互动分享平台,期望突破以往听音乐的方式,由被动的听歌转为主动选择的音乐关注和主动的音乐分享,用最快的速度找到你想要的音乐和推荐给别人,你喜爱的音乐. IDJ新版的设计目标 调整站点结构,更尊重用户习惯调整全站导航,让用户一目了然的站点地图,全面的找歌搜索,做到更清晰易懂 简约清晰的设计,使操作更易上手更方便快捷上传歌曲和制作自选集自选集代替了歌库,方便用户推荐音乐集合关注音乐,一键搞定-- 更加丰富的音乐站点内容音乐类别增加专辑.音乐专题和自选集

Asp.Net二级域名共享Forms身份验证、下载站/图片站的授权访问控制_实用技巧

一般大家对小文件的解决办法是直接在服务端读取文件,然后输出,这样就避免了文件地址的暴露,这是一种解决办法.而我现在想说的是使用 TransmitFile 方法直接输出文件,但是这个方法对大文件的支撑力度有多少,以及会带来多大的性能开销,我还没有测试过,有兴趣的朋友可以测试下,并发表评论. 好了,进入正题,一般对下载站,大家想到的就是流量的问题,所以自动就想到应该把文件与程序代码分开部署.所以我给文件单独做了一个二级域名,我们就叫 file.xxx.com 吧.主网站域名就是 www.xxx.co

APP下载站拿什么跟手机客户端争?

困境①技术门槛低.容易被模仿;②竞争市场大,推广力度小;③资源保护差,维护成本高;④用户逐渐转向手机端.总结来看,困境不在于有没有未来,而在于如何转型,如何在众多模仿者当中脱颖而出.以提升自身实力的竞争方式才是良性的竞争,而不是互相打压互相诋毁. 玩智能手机,难免会下载游戏和软件.对于一般用户来说,下载手机APP主要有三种途径: 1,网站下载.从网站上下载APP安装包,然后通过各种途径传到手机,在手机端点击安装包进行安装.这个方法非常适合安卓用户. 2,通过PC端助手软件,如安卓的豌豆荚.手机管