合理的交互,恰当的视觉

标签: 视觉 | 发表时间:2011-09-05 17:39 | 作者:Samael任帅 Bloger
出处:http://ucdchina.com/rss/all

交互设计和视觉设计的重要性,业内已经达成了共识。
最近看了iphone版海豚浏览器的设计方案,正好借机再陈述一下相关的设计原则。
我想说的主要有三点:

   1.交互设计受限于硬交互(硬件本身的基础交互属性),设计要在硬交互的基础上进行扩展。
    2.视觉设计最首要的任务是辅助交互设计,进行恰当并谨慎的视觉引导。
    3.视觉愉悦性是很重要的一部分,但是视觉不能对交互体验产生阻碍(如不恰当的隐喻、错误的视觉引导等)。

iphone版海豚浏览器在交互设计上,充分考虑了平台和硬交互的特点,设计出了一套手势交互体系,使用者可以通过划简单的手势来控制页面访问。方案合理、体验到位,同时节约了屏幕空间。
在视觉上,icon使用手绘风格,用户基本一眼就能够判断出这是用手在屏幕上绘制出来的线条,其视觉隐喻也很合理,图一。
合理的交互,恰当的视觉
图一

当然,设计具体交互时还要考虑,如果用户操作遇到困难时应该怎么处理?
一种可行的方法是,对触摸屏的输入事件进行监测,如果连续多次监测到无意义的手势,自动弹出操作提示,以告知用户哪些手势是被支持的,图二。
合理的交互,恰当的视觉
图二


关于“交互设计受限于硬交互(硬件本身的基础交互属性),并在硬交互的基础上扩展”,我用一个例子来陈述。
图三是“下滑条”的三种模型:
模型一是PC上标准的类型。
模型二是触屏设备(触屏手机、平板电脑)的常见类型。
模型三是电视平台上的展示类型。
合理的交互,恰当的视觉
图三

在pc上,下滑条的作用有两点:
1.提示用户有隐藏的内容。
2.支持用户进行托拽——这要求滑块不能太小,否则不利于用鼠标进行定位;其次下滑条不能太短,否则用户轻轻一拖就会翻动几屏,不利于操作,存在可用性问题。

在触屏设备上,用户直接对屏幕内容进行操作,下滑条只是为了提示用户有隐藏内容,应该尽量设计的细小一些,最大限度的节省屏幕空间。

在电视平台上,焦点和操作是高度统一的。所以滑块要做的清楚,以利于焦点间的切换。同时将下滑条做的细长一些,以节省屏幕空间。

同样的组件,在不同平台上有所不同。这是平台本身的特点所决定的,这并不是随意的,更不能生搬硬套。

前一段时间有人给我看了一个pc客户设计方案,就将下滑块设计成了“模型二”的样子。不可否认,视觉上确实很美观,但是却带来了很大的可用性问题,这就得不偿失了。

一个好的产品,交互设计(易用性)要放到首位,视觉设计要恰当的支持交互。

源地址:http://blog.sina.com.cn/s/blog_61e545fd0100v1lk.html

相关 [视觉] 推荐:

视觉隐藏内容

- iVane - 进步博客
组内做的一个分享,主题是“视觉隐藏内容”,主要关注隐藏的方式、方法及每种方法对可访问性的影响,并着重分析了a & label元素的可访问性,介绍了使用clip来做视觉隐藏. 内容有点散,但主题明确,其他组的几个同事来要PPT,现在传至slideshare,错误之处,请指正.

视觉隐喻碎碎念

- - 互联网的那点事
在我们做界面设计时,如果使用用户熟悉的来自真实世界的物体的图案来作为界面元素,. 用户会比较容易地学会产品的使用,这种手法就是视觉隐喻(metaphoric). 隐喻范围可以从整个界面到工具栏上的一颗小按钮. 整个界面都用隐喻的设计方法,最典型的例子就是游戏,整个现实的场景搬到游戏里面,用户一看就知道,.

“后视觉设计”时代

- - 阿里巴巴(中国站)用户体验设计部博客
一直想透过某种方式,把自己对视觉设计的一些理解和看法梳理一番. 同时目前团队里的视觉设计师,大多有一些共同的苦恼、疑惑和对前景的不明晰. 希望我的这些理解和看法对大家有所启发,能让大家对自己所从事的职业有更深入的思考.  这是我在某设计师群里说的一句话,里面有一个多年从事运营视觉设计的同学,立马跳出来反驳,最后到了只差骂:“你才死了.

我眼里的视觉与文字

- Tony - Koubei UED
原来把题目定为“视觉与文字”,但是又觉得这题目似乎有点过大,怕用了专业的标题却写出非专业的文章. 而我无意暂时也没有能力去对视觉一些细节做极为专业的考究,只希望通过自己一些学习和了解来加深自己对美的判断吧. 其实文字本身就是一种视觉语言,它把现实世界的所有事物,都以字的形式来进行了表现. 曾经读过一篇文章,说在传统的版式设计中,设计师们更喜欢做英文的排版,因为从视觉上来看,英文很容易形成线和面的关系,且字母有节奏感,比如aby这三个字母放一起有高矮区别;而中文相对来说,单调、孤立、不流畅.

Mobile app视觉传达的魅力

- 青蛙小子  - 所有文章 - UCD大社区
时下移动开放平台众多,苹果、谷歌、微软、诺基亚都有自己的移动开发平台,想让自己的产品在众多的开放平台中留住用户,只靠品牌是不够的,产品用户体验比品牌更重要. 我们可以充分的利用移动设备的特性,运用视觉传达的表现方式,去创造具有优秀的用户体验的app应用软件. 在如今这个智能手机时代,大屏幕高分辨率触摸屏的智能手机在市场上即将呈现普及的趋势.

人眼启发视觉搜索引擎

- feng823 - Solidot
Google上周宣布将支持声音和图片进行搜索,但一家创业公司在图像搜索方面走在了Google前面. 源自伦敦帝国学院研究项目的创业公司Cortexica,开发出视觉搜索工具,通过手机拍摄产品照片,它会自动呈现价格信息. Cortexica已经发布了一个用于比较酒价格的工具WINEfindr. Cortexica的视觉搜索技术是受到了人眼视觉系统的启发,它能识别出一个目标的关键特征,不受方位、大小、光线亮暗的影响.

视觉错觉:盯住红点

- Steven - YesKafei Daily
视觉错觉.令人害羞的影子艺术. 视觉错觉:裁判可以原谅的,因为她在他后面. 国庆佛教文化系列之二十八:智慧之灯,点亮心灵 (@longquanzs). 苏小红 你转过身来好吗_短篇小说_前后左右-冷笑话 未解之谜 野史趣闻 灵异 雷人 糗事 网络热门 大杂烩 (@qhzy8). 申请美国名校被拒绝理由大盘点 (@diylx).

合理的交互,恰当的视觉

- 地安门城管 - 互联网的那点事...
交互设计和视觉设计的重要性,业内已经达成了共识. 最近看了iphone版海豚浏览器的设计方案,正好借机再陈述一下相关的设计原则. 1.交互设计受限于硬交互(硬件本身的基础交互属性),设计要在硬交互的基础上进行扩展. 2.视觉设计最首要的任务是辅助交互设计,进行恰当并谨慎的视觉引导. 3.视觉愉悦性是很重要的一部分,但是视觉不能对交互体验产生阻碍(如不恰当的隐喻、错误的视觉引导等).

苹果iPad视觉设计分析

- 小猪 - 月光博客
  大部分的用户都并非对体验与设计有深入研究,而是从“看着舒服、用着好用”的角度来衡量一款产品,据笔者观察一些网页设计与数码设计,发现两者之间有着异曲同工之妙,他们对用户的研究、设计发展趋势几乎是共通的,例如苹果著名的COVERFLOW,和网站设计首页焦点图展示的效果. 因此,我们常提的CROSSOVER思维可以用上了,互联网与传统数码的视觉设计与交互体验可互为灵感参考.

合理的交互,恰当的视觉

- Bloger - 所有文章 - UCD大社区
交互设计和视觉设计的重要性,业内已经达成了共识. 最近看了iphone版海豚浏览器的设计方案,正好借机再陈述一下相关的设计原则.    1.交互设计受限于硬交互(硬件本身的基础交互属性),设计要在硬交互的基础上进行扩展.     2.视觉设计最首要的任务是辅助交互设计,进行恰当并谨慎的视觉引导.     3.视觉愉悦性是很重要的一部分,但是视觉不能对交互体验产生阻碍(如不恰当的隐喻、错误的视觉引导等).