视觉设计和视觉设计:视觉设计要恰当的支持交互

文章描述:最近看了iphone版海豚浏览器的设计方案,正好借机再陈述一下相关的设计原则。

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

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

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

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

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

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

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

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

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

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

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

时间: 2024-10-28 22:29:21

视觉设计和视觉设计:视觉设计要恰当的支持交互的相关文章

移动手机界面视觉设计:Mobile Web视觉设计的创新

文章描述:我拿什么来吸引你--Mobile Web Design. 各式或华丽,或炫目,或让人迷惑,或让人叹服的Web Design已经愉悦我们很长很长的日子了. 可是,当有一天我们发现了一个新事物--用手机上网,在手机上看网页,我们看到了一种不一样Web,这种网页大家通常叫他们Wap页面,这种页面形式用简洁的视觉效果,清晰的页面架构和小分量的页面体积第一次满足了我们手机上网的需求. 但到了人类历史的某一天,铺天盖地的Iphone 某某 和Android谁谁都出现了,硕大的屏幕尺寸,华丽的界面展

合理的交互 恰当的视觉

交互设计和视觉设计的重要性,业内已经达成了共识. 最近看了iphone版海豚浏览器的设计方案,正好借机再陈述一下相关的设计原则. 我想说的主要有三点: 1.交互设计受限于硬交互(硬件本身的基础交互属性),设计要在硬交互的基础上进行扩展. 2.视觉设计最首要的任务是辅助交互设计,进行恰当并谨慎的视觉引导. 3.视觉愉悦性是很重要的一部分,但是视觉不能对交互体验产生阻碍(如不恰当的隐喻.错误的视觉引导等). iphone版海豚浏览器在交互设计上,充分考虑了平台和硬交互的特点,设计出了一套手势交互体系

合理的交互,恰当的视觉

交互设计和视觉设计的重要性,业内已经达成了共识.最近看了iphone版海豚浏览器的设计方案,正好借机再陈述一下相关的http://www.aliyun.com/zixun/aggregation/8912.html">设计原则.我想说的主要有三点: 1.交互设计受限于硬交互(硬件本身的基础交互属性),设计要在硬交互的基础上进行扩展. 2.视觉设计最首要的任务是辅助交互设计,进行恰当并谨慎的视觉引导. 3.视觉愉悦性是很重要的一部分, 但是视觉不能对交互体验产生阻碍(如不恰当的隐喻.错误的视

用户界面的视觉设计:图形用户界面(GUI)设计真实感

文章描述: 用户界面的视觉设计  用户界面的视觉设计的历史,可以描述成是一个逐渐向真实感变化的过程.就如同计算机已经变得越来越快一样,设计师增加了越来越多的现实的细节--比如色彩.立体效果.阴影.半透明甚至于简单的物理学原理.这些改变中有一部分已经帮助提高了界面的可用性.WINDOWS界面中窗口背后的阴影让我们知道哪个是当前窗口.iPhone手机用户界面的物理学体验令设备用起来更自然. 在其它领域,改善还值得商榷.图形用户界面(GUI)是最典型的例子.你在你的屏幕上看到的很多图形元素都是为了表达

“后视觉设计”时代

前言 一直想透过某种方式,把自己对视觉设计的一些理解和看法梳理一番.同时目前团队里的视觉设计师,大多有一些共同的苦恼.疑惑和对前景的不明晰.希望我的这些理解和看法对大家有所启发,能让大家对自己所从事的职业有更深入的思考. 视觉设计已死 这是我在某设计师群里说的一句话,里面有一个多年从事运营视觉设计的同学,立马跳出来反驳,最后到了只差骂:"你才死了!"的境况.我非常理解,无端端的告知别人其赖以生存的饭碗已经不保,谁都会下意识反击的.然而我所指的,是那种"美工"式视觉设

Effective C#原则25 让你的类型支持序列化

对象的持久是类型的一个核心功能.这是一个在你忽略对它的支持以前,没 有人会注意到的基本元素之一. 如果你的类型不能恰当的支持序列化,那么对 于把你类的做为基类或者成员的开发人员来说,你会给他们增加很多的工作量. 当你的类型不支持序列化时,他们不得不围绕这工作,自己添加实现这个标准的 功能.而对于不能访问类的私有成员的开发人来说,恰当的实现你的类型的序列 化是不太可能的.如果你的类型不支持序列化,那么对于你的用户来说,想再要 实现实它是很困难或者根本就不可能的事. 取而代之的是,为你的实际 类型添

csharp-sharpssh 是否支持ssh交互操作

问题描述 sharpssh 是否支持ssh交互操作 比如yum install ntp 的时候会出来安装提示,这个时候是怎么解决交互问题的? 如果不用这个,有没有其他支持交互的东西? 解决方案 支持的,可以异步调用,看下例子.

搜狐设计师:聊聊我常用的一套交互设计工具

  刚开始接触交互设计往往会面临自己的想法找不到合适的方法输出,所以完成基本工作的同时也在积极寻找.学习适合自己又和工作环境相匹配的工具.与团队成员配合的时候没有人会在意你是用什么工具,成员们只想看到设计师产出的输出物.这个时候针对不同任务类型和团队大小找到合适的工具可以让设计师迅速输出团队想要的结果输出物,事半功倍. 随着移动互联网的快速发展,很多针对移动端开发的工具层出不穷,这些工具的小.快.针对性强的特点在一定程度上对产统设计工具造成一定的冲击. 下面介绍自己常用的一套设计工具和在配合项目

美女设计师!专访百度大UE设计经理李静

  百度用户体验部(大UE)设计经理 李静 请您做一个自我介绍吧 李静: 大家好,我是来自百度用户体验部 李静.现在负责百度文库.阅读产品线的视觉团队,涵盖产品的PC界面.运营设计.无线方向视觉设计.在百度工作快4年了,曾经负责知道.百科.经验.文库产品的运营设计. 您是如何走上UE设计师的道路的,为什么要这样选择? 李静: 其实很简单,从小在绘画上得到别人的肯定,从而喜欢上了美术.小学的时候梦想自己长大以后能成为艺术家.从初中开始学习绘画,直到考上美术学院,选择做一名设计师虽然和小时候的梦想有