建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > 网页设计 > 交互设计教程 >

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

更新时间:2017-04-12整理编辑:建站学习网阅读:0

前言:

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

Ⅰ。样式的意义

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

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

例b.不为视觉而设计:

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

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

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

Ⅱ。整体统一化

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

例a.UI组件库的优化

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

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

例b.图形歧义:

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

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

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

 

Ⅲ。打破整体统一化

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

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

Ⅳ.GUI标准分层模型

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

结语:

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

文章来源:网易UED

本文网址:https://www.dedexuexi.com/wysj/jhsj/2757.html

本站部分文章搜集与网络,如有侵权请联系本站,转载请说明出处。

收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

支付宝打赏
微信打赏
信息设计中的“父子关系”
« 上一篇2017年04月12日
自适应网页设计:不同的设备呈现同样的网页
2017年04月12日下一篇 »
  • 网易云音乐WP1.0设计项目实战
    0阅读
    WP 平台是很多设计师很少涉足的地方,优设之前发过一篇WP设计规范指南,今天网易的同学继续上干货,来一篇WP的设计项目实战!作为一款有诚意的音乐APP,这次设计过程相当用心,值得学习的地方也很多,学习来。项目背景Windows Phone一直是各家公司缺少投入的平台,WP用户不得不经常面对一个成...
  • 马伯庸教你如何做一个万年好甲方
    0阅读
    编者按:原以为亲王精通历史,会写小说,现在才知道他也很懂作为甲方的门道啊。今天分享@马伯庸 同学的一篇好文,前有笑点,后有干货,有趣得紧。作为设计师,能遇到这样的甲方就嫁了吧。@马伯庸 :对我们甲方来说,艺术性是第三才需要考虑的因素。我们第二考虑的是如何有效率地把核心信息传达到客户那儿去。无论多么...
  • 网站设计主题和风格是重点
    0阅读
    企业为了在互联网上争夺一席之地,纷纷建起了网站。企业的网站就像企业的网络门户,既然是门面那么就要将网站建设好,充分展现企业的良好形象。貌似许多企业建网站是为了赶时髦,因为他们的企业网站设计的实在是不堪入目,这样不仅不会为企业带来什么利益,相反还会毁了企业的形象。那么企业要建好这样的门面应该如何入手呢...
  • 如何给网站布置干净的“关于我们”页面
    0阅读
    所有网站,无论是官方、电子商务、社会化网络还是个人站点,都应该设计一个恰到好处的关于页面,直截了当地告诉到访者,为什么要浪费他们宝贵的时间浏览你的网站。 一、为什么要有关于页面 不要让用户思考! 1、向浏览者传达本站的价值,留住用户 2、始终提醒自己站点的主旨,不要跑题 二、起什么名 关于页面存在的...
  • 如何建立一个成功的移动应用
    0阅读
    一个消费者应用程序是否成功,只通过相加其组成部分的总和来计算。简单的查看用户手机应用的下载历史,用户设备残留的移动应用数量,和那些真的被坚持使用的移动应用情况,就能知道这句话的真实含义。然而,如果你想知道为什么有些用户不再使用某些手机应用,那这篇文章可能会给你一些启示。 像一台机器一样,移动应用通过...
 
QQ在线咨询