设计经验分享:设计美好的瞬间

2016-02-17 04:28 1 1 收藏

人生本是一个不断学习的过程,在这个过程中,图老师就是你们的好帮手,下面分享的设计经验分享:设计美好的瞬间懂设计的网友们快点来了解吧!

【 tulaoshi.com - 平面设计 】

瞬间设计是什么?

良好的用户体验,全在于那些完美的瞬间。在第一个瞬间,假设当一位用户从购物搜索结果页面跳转到某个店铺的时候,他此刻可能是想看看这个店铺的风格及其信用;而下一个瞬间可能就开始琢磨如何使用页面中的导航来观看某个宝贝介绍。再然后则可能是询问怎验购买,从哪里注册,者看看商品是否打折,或者尝试联系这个卖家。

若想完成优秀的设计,我们就需要时刻自问:在希望用户做些什么,界面应该如何鼓励他们完成这些任务?每一个瞬间对于完整的用户体验来说,都是不可或缺的一部分,因为他们都有可能加强也可能摧毁用户对某个产品或公司的信心。为什么这么说呢?因为每个人在每时每刻所要完成的任务,对于此时此刻的他而言,那就是重要的任务。

设计师要做什么?

我们的工作不是设计花哨的页面,而是要设计美好的瞬间,确保每时每刻都完美,是设计师的职责和价值所在。在用户进行选择的瞬间,我们要帮助他们做出正确的决定,我们要留意创建怎样的交互行为以及鼓励人们输入,编辑,搜索和共享,激励他们完成所有的他们希望做的事情,我们还应该设计各种手段帮助人们提高工作效率即使他们天生忘性大,老出错,或者总是三心二意。可以说设计师的工作就是考虑所有这些瞬间设计一些东西来支持用户达成每一个目标,而不会干扰或者妨碍到他们,同时,把这些完全不同的部分凝成为一个整体。只有这样他们才能相信我们产品,喜欢我们的服务。

从一个例子开始

如何设计美好的瞬间?在开始之前,请大家先回想一下igoogle界面,这个产品大家一定很熟悉,有的设计师几乎每天都用到它。igoogle有很多关于拖拽的操作,而拖拽这个复杂的交互行为需要不同的状态(我们称之为瞬间)来表现其交互事件(Event),yahoo模式库曾对其进行详细的划分,他们分别是:

页面加载(Page Load)鼠标悬停在拖动目标上(Mouse Hover Over Drag Object)鼠标按下拖动目标区域(Mouse Down On Drag Region of Drag Object)拖动发起(Drag Initiate)拖动原位置(Drag Over Original Location)拖动离开原位置(Drag Leaves Original Location)拖动重新进入原位置(Drag Re-enters Original Location)拖动有效区域(Drag Over Valid Target)拖动进入有效的区域(Drag Enters Valid Target)拖动悬停于有效的区域(Drag Hovers Over Valid Target)拖动推出有效的区域(Drag Exits Valid Target)拖动非操作区域(Drag Over Invalid Target)拖动进入无效的区域(Drag Enters Invalid Target)拖动悬停于无效的区域(Drag Hovers Over Invalid Target)拖动退出无效区域(Drag Exits Invalid Target)拖动非具体目标(Drag Over No Specific Target)接受放置(Drop Accepted)接受放置起始(Drop Accepted Begins)接受放置结束(Drop Accepted Ends)拒绝放置(Drop Rejected)放置于原位置(Drop On Original Location)

此外,拖动的目标模块包含了以下界面元素(Actor),用于展示以上交互事件的种种有趣的瞬间,他们分别是:

页面(静态文字,图片)Page (static text, images provided)光标(Cursor)工具提示(Tool Tip)模块(Drag module)模块存放区(Drag module's Parent Container)模块放置区(Drop Target)

针对每个界面元素所表现的交互事件不同,我们就可以得到很多有趣的交互瞬间,如以下表格所示:

设计经验分享:设计美好的瞬间,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/pmsj/)

细心的你也许会发现,为什么这里只列举了少数的事件和元素,而没有都列举出来。其实这是因为部分特殊的交互事件非常复杂,很难一一列举。仅仅拖动进入到无效的区域这个交互事件就有很多种情况,比如:把模块拖动到浏览器地址栏里的情况;把模块移动到toolbar下方时的情况;还有移动模块到有效的区域过程中,该有效区内的模块会被挤到其他的区域内,什么时候作为判断来移动呢?尝试后你会发现当被拖动模块超出了原有模块尺寸的1/2时,就会发生跳转等等。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/pmsj/)

由这个例子我们不难看出要设计美好的瞬间,要做到以下几点:

1.关注分秒的响应(比如说我们要考虑到页面的加载效果)2.关注微妙的细节(鼠标hover上去的光标显示效果,移到哪里显示等等)3.想象各种可能性

来源:https://www.tulaoshi.com/n/20160217/1578494.html

延伸阅读
随着公司影响力的壮大和产品的不断提升,相关的形象设计要逐步跟得上,需要逐渐提升,所以就招一个应届生网页设计师,算是一块成长。应届生有拼劲、肯学,但也好高骛远,起点都差不多,如何 培养网页设计师 就变得至关重要了。总结自己接触和学习设计的一点经验与大家分享,希望得到大家更多的建议。 一、配色 其实对 色彩 的感觉是设计师...
恋人的美好瞬间回忆 生活需要愛情的滋潤才能更加美好,看似不奇的作品,經過拼貼成了變一則又一則動人的愛情故事,每一則都是獨一無二。 Juan Felipe Rubio,哥伦比亚摄影师,作品的灵感来自于朋友的婚礼,将恋人的幸福的模样拼贴成一幅幅美好的作品。生活需要爱情的滋tulaoshi润才能更加美好,看似不奇的作品,经过拼贴成了变一则又...
UC优视是全球领先的移动互联网开放服务平台提供商。自2004年创立以来,以技术为本,公司致力于帮助手机用户快捷上网,构建开放的一站式移动互联网用户服务平台。公司始终以卓越的市场前瞻力和技术创新力推动着移动互联网领域的发展进程,致力于帮助全世界一半以上的人通过手机享受开放、便捷的互联网服务。 随着公司业务扩展,浏览器产品迭代...
标签: Web开发
作为设计主管,Peter Stern 已经领导 microsoft.com 重新设计了主页并且开发了五个不同的交互工具,这些工具被用于下载中心、产品目录、配置文件中心、 搜索 和注册等联机功能。 他为几个内部工具设计了用户界面,并且正致力于创建将于今年晚些时候发布的下一代主页。 从头衔上,您可能认为我主要关心的是 microsoft.com Web 站点几千个网页...
本文是亚茹有李 妹纸观察多个移动应用交互动画设计后的总结,关于一些细节性的东西,同学们可以参考一下。 1、teambition: A:主要是团队项目协作工具,方便团队的管理; B:注册和登录输入框增加减少的流畅转换; 2、rookie: A:主要是美化照片,如添加边框,滤镜美化; B:对美化出来的照片会已层层压在一起,可以手动缩放也可以自动...

经验教程

55

收藏

95
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部