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

前言：

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

Ⅰ。样式的意义

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

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

例b.不为视觉而设计：

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

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

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

Ⅱ。整体统一化

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

例a.UI组件库的优化

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

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

例b.图形歧义：

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

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

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

Ⅲ。打破整体统一化

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

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

Ⅳ.GUI标准分层模型

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

结语：

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

文章来源：网易UED