IT牛人博客聚合

随着体验经济时代的到来，人们对产品界面的期待值也越来越高，交互动画在手机领域的应用已经非常普遍，例如Iphone充分发挥了动画在交互易用性方面的优势。 而交互动画会给用户带来一种舒适、自然和流畅的感觉。 交互动画逐渐成为了产品与用户之间的沟通方式，成为产品的肢体语言。尤其是目前高端机的性能提升迅速，也为交互动画的执行效率提供了有效的硬件保证。

Google地图的让工具化与拟物化结合，不论是翻起页面的效果，还是图钉的效果，都是还原真实场景中的操作，通过动画的表现，让其更加逼真。也使界面更加的有层次。

在产品设计过程中，合理运用交互动画让产品与用户更好的互动，让产品变的更具情感，合理的动画运用可以：

提高用户操作流畅性

随着移动

查看全文: http://www.udpwork.com/item/7116.html

如果你对某个设计的第一印象非常深刻，又或者你本能的觉得某个设计十分给力，那么其实极有可能你被“格式塔”了！

目前许多设计偏好运用一个或多个格式塔心理学的原则。这一举动不但能让设计有更多灵动的感觉，还比一般的设计更容易留住欣赏者得目光。

格式塔是德文Gestalt的译音，英文往往译成form(形式)或shape(形状)，因此格式塔心理学所研究的出发点就是“形”。但这里的形又不止于一般所指的形式或形状，还包括由知觉活动组织成的经验中的整体，中文又译作“完形”。它认为整体决定部分的性质，而部分依从于整体。

格式塔心理学的核心：给不完整的视觉信息寻找最简单直接的解读办法。

除了设计，在日常生活的交流中，格式塔心理学也有发挥其作用：例

查看全文: http://www.udpwork.com/item/7051.html

早晨做地铁，正打盹的时候，忽然听到某网站的大名被一声声地呼喊着，顿时就把我惊醒了，现在有些广告做得都不怎么考虑用户的感受，在既没有美感又没有创意的前提下，强行灌输信息只会令多数人感到厌恶。

广告本来起的是一个宣传的作用，如果人人看到都觉得烦，那就适得其反了。其实广告也有很多形式，平面、电视、网络等。通常我们看到的都是以上三种。这里，给大家介绍一个比较新颖的趋势——情景互动式广告。

情景互动广告是指需要广告画面外的物体来参与，共同完成信息传播的一种广告形式。与传统广告相比，情景互动广告并不一定需要在公共场合突出位置，以大幅面、醒目文字和艳丽的画面博取注意力，而是建立在用户视觉经验、心理暗示和行为活动之上，根据广告目的预先设计场景

查看全文: http://www.udpwork.com/item/6848.html

2011年10月8日，百度搜索手机客户端正式登陆Apple Store。

2011年12月12日，百度搜索手机客户端荣获APP Store 2011年度工具类最受欢迎第一名。

这个轻量化的搜索应用倾注了产品设计团队很多心血。全新的视觉和交互体验、更优的搜索体验、全新的Ding功能……它的发布是我们在搜索客户端领域迈出的一小步，MUX的设计师全程参加了这款应用设计与决策，这背后有好多同学在辛苦的努力着。今天让我们揭开它面纱，看看它的小故事。

要惊艳地呈现

一年多来，我们在手机端推出过掌上百度和百度快搜两款与搜索相关的应用，将搜索业务以客户端的形态延伸到手机端，在这期间，积累了大量搜索客户端化的设计研发经验。随着移动互联网这些年

查看全文: http://www.udpwork.com/item/6644.html

表单，主要是负责数据采集的功能，需要访问者自己去填写，如访问者的姓名、邮箱、性别、地址、留言建议、设置密码、管理个人账户等等。时下表单无处不在，成功的表单设计不仅能提高用户的满意度，更能收集更加精确的数据，相反失败的表单设计只会收集到错误杂乱的信息，可能会最终导致潜在用户的流失。

一、组织表单的内容，给用户一个友好的引导

首先要明确的告之用户填的是一个什么性质的表单以及填完后能做些什么？哪些问题是一定要问的？有没有别的途径可以获取用户的资料？大致表单的布局分为三种类型：纵向排列、逐步填写（多页显示）和左右布局。这三种表单的组织形式功能特点，通过不同的使用环境决定它们具体的样式。下面通过一些对应的实例我们来做些具体的分析：

图1

查看全文: http://www.udpwork.com/item/6596.html

当今，无论任何一款互联网产品，都需要搭载PC平台进行推广，Banner更是推广的一大利器，怎么将Banner设计好就成为一个需要探讨研究的课题。

Banner规格尺寸大小不一，文件大小也有一定的限制，这就使得在设计上增加了许多障碍，颜色不能太丰富，否则会在文件大小的限制下失真，软文不能太多，否则会没有重点，得不偿失，怎么在方寸间把握平衡，变得十分重要。接下来，我为大家总结累一些，如有鄙陋，请指正，万分感谢。

第一部分：颜色

1．Banner与环境对比

试想如果在一个以浅色调为基准的网站上投放Banner，是不是从明度上拉开对比会很好的提高用户的注意力呢（相反亦然）。

以此也可推想出，如果在一个有颜色基调的网站上投放补色或者

查看全文: http://www.udpwork.com/item/6090.html

栅格系统应用于设计领域已经至少50年了。栅格化让眼睛浏览信息更加愉悦。从报纸、杂志，到手机界面，栅格系统全面渗透到各种信息传达的界面当中。我们从一个故事开始栅格系统探索之旅吧！

栅格系统的诞生

1692年，新登基的法国国王路易十四感到法国的印刷水平强差人意，因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的，重视功能性的新字体。

委员会由数学家尼古拉斯加宗（Nicolas Jaugeon）担任领导，他们以罗马体为基础，采用方格为设计依据，每个字体方格分为64个基本方各单位，每个方各单位再分成36个小格，这样，一个印刷版面就有2304个小格组成，在这个严谨的几何网格网络中设计字体的形状，版面的编排，试

查看全文: http://www.udpwork.com/item/5965.html

视噪，又称视觉噪音。我们每天接受来自外界的大量信息，这些信息有将近70％是通过视觉感知获得的。视噪会干扰我们对信息的判断，影响到产品的易用性和可用性，与用户体验的好坏息息相关。

(克劳德香农图演示了噪音如何影响信息的传递)

(这是模仿克劳德香农图画一张视噪影响用户界面传递信息的图)

那么什么是视觉噪音呢？简单来说，视噪就是在视觉信息传递的过程中，对信息的传递、理解产生负面作用的视觉因素；如同我们无法忍受生活在嘈杂的环境中一样，视觉噪音也会干扰我们对信息的判断，影响到产品的易用性和可用性，与用户体验的好坏息息相关。

类似下面这样的网页相信你一定感觉熟悉，有时候我们不得不面对这样热闹非凡的页面并从中找到我们需要的信息和内容，譬如

查看全文: http://www.udpwork.com/item/5897.html

“Html5”一出生就伴随着各种争论，不过有几个业界大佬的保驾护航、极力推动，相信随着支持webkit浏览器的普及，HTML 5会越来越普及、越来越强大，一定是必然趋势。

HTML5 ~= HTML + CSS + JS APIs，在Html5引擎中已经有一些代码将html和css和jsapi做了结合。很多之前需要贴图或者很冗杂代码段才能实现的效果，采用Html5开发只需短短几行代码就可轻松搞定，大大降低了流量的压力。总之Html5真是很给力，那么作为一名移动端的wise设计师对于Html5可以轻松实现的视觉效果不能不了解。

显示本地没有的字体

移动端各种平台可以支持的默认字体有限，如果需要好的视觉效果，很常见的做法就是将文字

查看全文: http://www.udpwork.com/item/5883.html

广告无时无刻在我们的生活中存在着，我们既离不开它，又需要它，它是我们生活中不可缺少的一部分。想象一下，我们生活的世界中如果没有了广告，这个世界会变的多么枯燥无味，所有的产品都可能将是一样的包装，一样的功能……

网络广告，早期由于硬件和网络环境的限制，其展现形式极其有限。广告形式以文本链接广告、网幅广告、电子邮件广告等形式为主要传播手段。随着互联网技术、硬件的快速发展，传统互联网广告越来越不能满足需求时，富媒体互动广告的出现和发展逐渐成熟并得到了充分应用。到现在，我们即将进入移动互联网时代，以手机为载体的新媒介的诞生，移动网络互动广告将越来越重要，成为网络广告中的新秀和未来。

一 文本链接广告

是一种以文字链接形式的，对浏览者干

查看全文: http://www.udpwork.com/item/5581.html

你研究或者不研究，美就在那里，不偏不移；你发现或者不发现，黄金分割就在那里，不多不少。了解他，发现美，也给自己增加精彩，好作品不会没有依据。

掀开面纱

0.618或者1.618，这个数字是否觉得似曾相识。这其实是一个数学比例关系（说到数学，不要先着急晕哦，知道咱们做设计得对计算都不敏感，呵呵），即把一条线段分为两部分，此时短段与长段之比恰恰等于长段与整条线之比，其数值比为1:1.618或0.618:1。

这就是黄金分割律，由公元前六世纪古希腊数学家毕达哥拉斯所发现，后来古希腊美学家柏拉图将此称为黄金分割。黄金分割在未发现之前，在客观世界中就存在的，只是当人们揭示了这一奥秘之后，才对它有了明确的认识。当人们根据这个法则再来观察自

查看全文: http://www.udpwork.com/item/5538.html

启动图标是每一个iOS中应用软件的关键组成部分。 它能传达给你应用程序的基础信息，并能够给用户带来第一印象感受。 它是一个非常重要的软件入口，能直接引导用户下载并使用应用程序。它的重要性在这个智能手机时代被大家所认知。

有过软件启动图标的设计经验的设计师，经常会遇到这样一个问题： 设计出的单枚软件启动图标看起来很炫，但是放到电子市场上后，却不太受用户的喜爱，用户点击率很低。

怎样从视觉设计的层面，去提升app软件启动的图标点击率呢？

其实，我们在设计软件启动图标的过程中是有一定共性的设计方法的，这些能够帮助我们提升图标的点击率。

1. 运用视觉隐喻的同时，需要保证图标的可识别性。

如图一，这里很多图标设计是没有经过仔细思考

查看全文: http://www.udpwork.com/item/5509.html

如今，在设计，通讯，信息及数据新闻，用户界面多个领域都可以见到数据可视化的身影，引入视觉设计的数据大大提升了说服力，可读性和逻辑性都得到了增强，他带来的不仅仅是颠覆表格那么简单，而是一种思想理念，它不仅把可视化信息作为一种沟通工具；同时也是一种重要的数据挖掘的手段。

一、表格已死，可视当立！

在互联网还没有诞生的年代，有一群元老们为数据可视化做出了不可磨灭的贡献，而至今他们仍在在努力地工作着，他们就是表格、饼图、柱状图等。

可事实情况是，饼状图和图表只适合表现一个维度的信息，表格也只能表现X,Y两个方向上二维的信息，这种传统的数据展现形式对于驾驭表现现代化的大量，复杂，多维度，的信息需求而显得力不从心。这种矛盾的产生，让新的数

查看全文: http://www.udpwork.com/item/5375.html

人在处理信息，学习和记忆的能力是有限的。现实生活中人们又会经常受到各种客观因素的影响,所以有效的降低用户的操作和学习负担能够使产品更易于被广大用户所接受。随着互联网产品设计越来越重视用户体验的今天，除了产品本身的功能的创新之外，产品与用户之间的交互体验成为各个公司追求的目标。好的设计不但在视觉上带给用户更多美的享受，同时还可以从视觉层面帮助和引导用户完成所需的操作。

一.模拟现实中的场景

记得电脑游戏兴起初期…模拟飞行类游戏在画面和拟真程度上达到了当时的顶峰。在游戏中玩家可以驾乘各式飞机在极为壮观而真实的天空中飞行，可以像飞行员一样欣赏美丽的空中景色。游戏中各种仪表盘和操纵器材真实的还原了飞机驾驶舱，身临其境般的临场感使玩家欢呼

查看全文: http://www.udpwork.com/item/5319.html

各式或华丽，或炫目，或让人迷惑，或让人叹服的Web Design已经愉悦我们很长很长的日子了。 可是，当有一天我们发现了一个新事物——用手机上网，在手机上看网页，我们看到了一种不一样Web，这种网页大家通常叫他们Wap页面，这种页面形式用简洁的视觉效果，清晰的页面架构和小分量的页面体积第一次满足了我们手机上网的需求。

但到了人类历史的某一天，铺天盖地的Iphone 某某 和Android谁谁都出现了，硕大的屏幕尺寸，华丽的界面展现，用手指头去完成各式的操作，手机的的历史使命再也不是打电话发短信，人们大呼“我们要上网！”我们需要给予用户手机上网合理的体验，丰富的内容和交互。又由于Html5的“说是快，那是及”的出现，时势造英雄Mob

查看全文: http://www.udpwork.com/item/5321.html

iPad划时代地将我们带入了平板电脑时代，对于传统的移动终端的设计师而言，一个拥有更大的触摸屏幕，更大空间的舞台展现在大家面前，看上去一切都是那么的美好。然而如何在iPad上设计出优秀的用户界面？相信对于设计师们的挑战与忧愁远不止屏幕放大那么简单。

1.模拟真实，沉浸其中

大的屏幕、可以触摸的操作、支持多种手势…这一切条件都为让用户能沉浸于你的设计中提供了条件，那么如何将设计与用户生活的环境、习惯更好的结合，获得最佳的体验，就成为了一个挑战。

Flipboard是一个非常好的例子，他没有任何的导航，但是却在你打开使用他的第一时间，使你能马上沉浸其中。你不会因为没有导航而迷失，因为每一个界面所展示的内容会让你一直保持

查看全文: http://www.udpwork.com/item/5322.html