回答问题(1)

gongyunyun:不知道你在设计中有没有碰到这样的情况,经常在pc端的应用功能很强大,基本上满足了用户各方面的需求,但是要将这些功能移植到手机上时往往要进行一个大瘦身。机屏幕小,输入不方便,用户使用环境复杂等都是造成这些问题的原因。我想问下一般这样的情况,瘦身的原则是什么?

答:原则是关注核心任务,在PC端每个界面中可以完成多项任务,但是大多数情况下,手机每个界面的任务较为单一。如果将PC端的应用程序移植到手机上,与其说要剔除关联性较低的元素,不如说是在手机上完成应用程序中必要的功能,然后再增加相关的元素。

ds_mailondesktop

Mac的邮箱

ds_mailscreens

iPhone的邮箱

邮箱的核心功能是收发邮件,其他都是关联性或强或弱的辅助功能,如Mac中的邮箱有收发邮件、对邮件存储、设置事件优先级和编辑邮件富格式等等,而iPhone上的邮箱核心任务就是收发邮件。出现这种的情况,是由手机的硬件导致的,但也可能成为手机的优点,快速启动并且没有其他不相关的内容,更别说那些烦人的广告了。所以也有人提倡优先为手机设计,之后再设计PC端产品,因为手机有限的屏幕逼着设计师考虑如何使用最少的元素完成核心任务。

gongyunyun:关于流程图的绘制有没有什么书籍推荐。我目前在绘制流程图的过程中的问题:目前都做的是从用户角度的用户操作流程图,但是我看一些书籍说交互流程图是将功能流程图和用户操作流程图结合到一起分析的结果。交互流程图的定义:描述用户行为与系统的响应关系,但对用户行为不进行层级分解,对系统内部如何工作也不描述,主要描述两种行为接口时的交互过程。看到这个定义我很疑惑,反而不知道怎么着手了,你在设计过程中是怎样解决这个问题呢?

答:没见到过这方面的书籍。就像iPhone的邮箱功能,回复邮件的功能流程是:

  1. 查看邮件
  2. 选择邮件
  3. 回复邮件

而用户操作流图是:

  1. 打开收件箱
  2. 轻击邮件并查看邮件的内容
  3. 轻击工具栏上的回复按钮
  4. 轻击邮件标题栏填写标题
  5. 轻击正文空白处撰写邮件正文
  6. 轻击标题栏右边的“发送”按钮发送邮件

只画用户操作流程图也可以,因为已经包括了功能流程,并且更加具体。因为程序的层级关系较少,我通常把能出现的所有界面都绘制出来,标上界面的跳转方式之后就成了流程图,

既然是流程图,可以理解为用户的操作流和系统的响应流,或者说是用户的输入和系统的输出,可以具体到每一毫秒(甚至更精确),在这每一毫秒钟用户的操作和系统如何反馈用户的操作,反馈可以是图形、声音或者触感。比如用户轻击了邮件正文的标题栏的某个区域几毫秒,系统对此操作的响应是在几毫秒的时间里逐渐弹出虚拟键盘,如果点击的时间过长就是持续点击的操作手势。

至于系统如何实现反馈,比如如何实现手机震动,那就交给程序员去考虑吧。

手机触摸屏网站

iphone

《Taptu手机触摸屏网站报告》指出触摸屏手机网站的数量已经达到iPhone app的两倍多,呈快速增长趋势。由于触摸屏手机的增多,而页面和控件过小不利用触摸屏的浏览和点击,因而有必要重新设计手机网站。理想的状况是用户登录网站时,根据手机型号和上网速度显示相应版本的网站,例如:

  • 低于240*320像素的手机上显示低端的纯文字版本。
  • 240*320像素及其以上的非触摸手机显示普通版本。
  • 240*320像素及其以上的触摸手机显示触摸版本。
  • iPhone手机上显示iPhone触摸版本。

手机网站大多不支持富交互效果,每操作一次页面就会刷新一次,加上手机上网速度慢,有必要降低页面大小控制每页的下载时间(如2秒以下),在各种手机显示屏幕上如能让能达到最佳的显示效果,用户体验更好。对于触摸屏手机,虽然屏幕增大,好像可以显示更多的信息了,但是信息密度过大会影响手指的点击。

Opera的触摸版虽可以在一定程度上解决触摸屏点击的问题,但是每次都需要点击两次才能完成一步操作,并不是浏览器中都有的这样的功能,所以区分手机网站的版本和单独为触屏幕开发还是很有必要的。

手机网站优势在于可以跨平台使用,效果较为一致,如果满足以下的条件可以考虑只开发手机网站,不去为各个手机平台做客户端:

  • 不需要过多的富交互效果,多以数据流为主。
  • 对于界面的显示要求较低,不需要3D效果。
  • 和手机的硬件无关。
  • 开发的成本较低。

iphone22

如大众点评网的iPhone app和iPhone版手机网站,内容和操作相似,多是解析数据或者直接跳入wap,两者的差别并不是很大。条件有限的情况下,可以考虑不开发这样的客户端,利用原有的web团队开发各个版本的手机网站可以弥补没有客户端的不足,比如手机触摸屏网站。

大胆设计

今天ifanr上有一篇《手势操作(自然用户界面)再探讨》,观点保守,论据不足。

SceneAnatomy
Android的菜单确实难用,难以记住界面是否有菜单。Plam将菜单放置在状态栏的左边,保证了触摸屏也能使用菜单,但也有弊端。菜单放在界面左上角,宽28像素,难以点击。请拿出你的手机,右手去点击大屏幕的左上角。要么大拇指伸过去,要么其余四指抬起才能点到左上角,甚为别扭。

弹出的菜单通常要么是无关紧要的功能,要么重要。如果功能无关紧要,那不如将菜单放置在启动程序的第一个界面(主界面),如帮助,当用户需要的时候,完全可以返回到主界面去选择,通过减少界面的层级关系可以保证用户很容易返回主界面。如果功能重要,大屏幕的手机完全可以将这些功能显示出来,并且是有必要的。

iPhone的工具栏、控件列表和部分小控件完全取代了菜单,保证绝大多数控件的可见性。对于一个界面而已,工作栏上的5个控件能满足需求,如果实在放不下,应该先考虑这些功能是否有必要了。

说来菜单是物理按键时代的残留,除了按确认键之外,其余功能通过左软键操作其他功能。对于触摸大屏幕,不必再保留菜单,特别是像Android那样需要切换触摸和物理按键之间的操作。
behaviour

另外,文中还提到手势的不统一,对于手机这种情况是不存在的,各个操作系统对于手势的定义很一致,而且对于手势的识别也很灵活。比如滑动界面时,如果当前界面只能左右滑动,并不一定要水平的左右滑动,甚至与水平成80度角的手指移动也可以完成滑动操作。在iPhone的界面设计指南中,提醒开发者注意将应用程序的操作限定于“轻击”和“平移”,因为其余手势用户并不一定知道。

针对iPhone的购物程序中,左右滑动有可能会导致商品会被移出购物车,这属于程序中交互设计的错。一来手势的操作不是唯一性,既可以滑动界面也可以删除商品,二来用户已经想购买这个商品,不应该那么容易并且可以意外地删除商品,可以加上一些困难,不确定的情况下应该有二次确认,询问用户是否需要删除。

以后的交互方式还有通过捕捉用户手指移动方向、通过肌肉拉伸或者检测脑神经的操作等等,技术的应用肯定会导致一些新问题,但不能过早地将原有的设计原则和用户体验的观念引入设计中,正像头脑风暴设计思维方法中提倡的那样,先大胆设计,小心论证,设计应该更激进。工业设计中每10款投入市场中的产品只有1款式成功的,互联网产品功能增多,用户需求变的模糊,用户研究变得更为重要,其目的是减低产品的市场风险。遵从用户体验可以保证产品合格,难以创造出有创意和伟大的产品。

公司衡量产品的第一标准应该是创新,而不是用户体验。

混乱的Android菜单

Android有两种菜单:选项菜单(Options Menu)和情境菜单(Context Menu)

  • 选项菜单作用于全局界面,物理按键Menu弹出菜单,应用程序中将较少使用的命令放入此菜单中,或者界面中信息密度多大,部分命令无法完全显示时,可对选项菜单加以利用。使用触摸屏无法调用此功能。
  • 情境菜单只作用于某一选项,触摸屏持续点击(Touch&Hold)才会弹出此菜单,也就是使用物理按键时无法调用此功能。

Android同时支持物理按键和触摸屏,有些操作只能用触屏幕,而有的操作只能用物理按键,此种“兼容性”导致手在屏幕和按键上经常的移动,对于操作很不方面,在两种菜单上也体现其Android的界面设计思路不明确。

ContextMenuDiagram

如在使用联系人(Contacts)功能中,持续点击之后浮出情境菜单,菜单中的选项有5个(不包括View contact)ContextMenuViewContactDiagram

在情境菜单中,点击“View contact”之后,跳入另外一个“View Contact”功能界面,可见的功能有3个,选项菜单中2个功能,但是在之前的联系人(Contacts)功能直接点击,也能进入此界面。这种设计的缺点在于:

  • 持续点击的操作是一种快捷方式,但是从以上的分析来看,Touch&HoldTouch操作结果差不多,并没有快捷的效果。另外,快捷方式中的“View contact”居然还能达到另外一个功能一模一样的界面。
  • View Contact”功能界面中,显示那么空,完全没有必要使用选项菜单。当用户找不到某个功能的时候,才会想起来使用去点击“Menu”,如果不去点击,就可能永远不知道有编辑和删除联系人的功能。

看起来Android给了用户两个操作选择,但是只使用其中一种操作的话,却不能完成全部的操作.两者之间属于并列关系,没有主次之分,反而造成界面设计上的混乱。

深泽直人:无意识设计

无意识设计是利用人已熟知但意识不到的元素设计。人的精神意识分为意识、前意识、无意识三层,无意识成份是指那些在通常情况下根本不会进入意识层面的东西,但又是潜伏在人的大脑中。

banana_juice

大众有时对于喜欢的形式或者色彩无法明确地表达出来,当应用在产品上时,用户会觉得似曾相似,倍感亲切,如香蕉皮的包装带来的视觉和触觉与真实的香蕉很相似。当把产品放到用户面前时,用户会觉得这就是他们需要的,能联想起在大脑中对水果和自然根深蒂固的感知。

danielrybakken_1

家中的灯具通常是个灯泡,而用平面化LED灯可以模拟白天透过窗户照进室内的阳光,即能满足照明的功能,又让光线显得很自然,也许设计师在试图消除白天和黑夜的界限。

bird05_nightingale

半透明的陶瓷灯座和和一个翘起的灯泡,像不像一只关在鸟笼中的小鸟呢?在设计时,可以试着用用这种比喻的手法,文字是作家的表达方式,而设计师的表达方式是造型、色彩和材质等,不妨试着用设计去表达你的意识,表达你的幽默,对生活的憧憬、调侃和无奈。从作品中也可以看出设计师对待生活的态度,细细品味还会发现产品也可以有意境,闪烁的光线恰如诗词中的韵脚。

naoto_fukasawa_siena

无意识设计可以建立意识片断之间的联系,寻找形式和功能、功能与功能之间的联系。如躺在床上看书或者看电视,通常会需要个靠枕,如果床头柜有一些的斜度,对于形式的稍加改动,就能同时满足睡觉和倚靠的需求。

004

李剑叶设计的钢琴门铃,本人喜欢至极,打破了门铃枯燥刺耳的声音,当有来客时,还能演奏出美妙和独特的声音。

t200771021100

无意识一部分源于早期的记忆,现有的生活经验也由意识向无意识在过渡中。手机应用程序有写实主义,借鉴生活中的实物使用经验,而虚拟的使用经验对于用户的意识有会有影响,如Ctrl+z的玉兰油祛斑化妆品,借用电脑上Ctrl+z代表“撤销”的意义。

无意识利用在设计中,需要用户也有这样的无意识。如土豆外形的手机,设计师的灵感来源于小时候削土豆皮的经验,如没有这样的生活经验,很难理解设计师的用意。另外,设计贵在创新,无意识更是如此,如果这种设计元素被重复利用,而大众的相关的意识已被唤醒,无意识上升为意识,就不能称为无意识设计。

这种设计思路甚至让人无法用普通的语言去表达,首先需要自己意识到这些“无意识”,有观察生活和人的习惯,而灵感源于设计师“支离破碎”的想法,也难以用既定的逻辑的方式去归结。