标签为 "交互" 的存档

zz 如何设计一个好的 Windows 8 应用?

Windows 8 应用现状

虽然 Windows 8 刚上市只有半个月多一点,但 Windows 8 之父,同时也是 Windows 和 Windows Live 部门的总裁、微软下一代 CEO 热门人选的史蒂芬・辛诺夫斯基却已经离开了微软(以后将很难看到作为光头党的他和鲍尔默、贝佐夫同时刷极客早知道的屏了:( ), Windows 8 的设计语言名称也从最初的 Metro 先是变为 Modern 接着变为 Windows 8 Style,最后变为目前微软中国官方所称的 Microsoft Design(本文依旧延用旧名称 Metro 表示 Microsoft Design Language/Style),但 Windows 8 依旧在按照之前微软的规划一步步往前走着,Windows 应用商店的数量从最初的几百个应用迅速增长到了目前的接近 1.5 万,虽然到今天增长已经趋缓但依然强劲,预计十一月底能达到 2 万个。

虽然数量一直在持续增长着,但优秀出众的应用到现在依旧是屈指可数,随便问一个 Windows 8 用户几乎回答不出有哪几个做得特别好。当然这也与 Windows 8 本身设计语言的特色有关,看起来的简约实际是需要设计师去用心精雕细琢的,不然做出来永远是简陋,还是之前 Windows 8 传统桌面的 Metro 化中所认为的那样“Metro 风格不是让程序员都跑来顶替设计师的”,相反它更加考验设计师。

虽然是被称为“Windows 8 应用”,但它与 iOS 应用、Andriod 应用以及相近的 Windows Phone 应用还是有着很大的不同,在界面设计上它更加偏向于网页、平媒等所在的平面设计领域,在交互设计上也是更加偏向比较大的屏幕操作交互。在设计过程中需要认清这一点。

如何设计一个好的 Windows 8 应用?

我们都知道一个应用只有适配该应用所在平台本身的风格才能被称为好的应用,因为只有这样用户在使用的时候才能保持好的用户体验。那么面对一个全新的开始界面,全新的用户体验界面与全新的应用布局,应该如何才能设计出一个好的 Windows 8 应用呢?

1. 好的动态开始画面

开始画面是用户认识一个应用的开始,如果有一个好的开始画面可以给用户留下一个很好的印象,同时也是一个好的 Windows 8 应用必须有的。

开始画面细分可以分为启动画面和登陆、加载画面。对于启动画面,微软官方的规定比较死,所以你看到几乎都是清一色的单色前景 LOGO,这样的话除非你的 LOGO 很吸引人否则只能说是中规中矩,毕竟你不能靠一个旋转菊花让用户对你印象深刻吧。所以最好可以将限定的启动画面时间缩短,多在后面的登陆界面与加载界面下功夫,在这方面 QQ, Cookbook, 网易云阅读等做的比较好。

其中 QQ for Windows 8 的登陆界面与其最新的 2013 桌面版类似,背景是干净的天空,有一朵云动态的飘来飘去。而 Cookbook 和网易云阅读是动态加载跳转,三者其实都是是以动态效果见长,而动画效果在 Windows 8 中最为常见,它是营造 Metro 动感的主要手段。因此如果要设计一个好的 Windows 8 应用,打造一个让人感觉流畅、大气舒缓的动态启动画面是可以加分的。

2. 好的背景/图片/图像

在一个应用中背景图片可能就是伴随用户使用该应用的整个过程(贴靠除外),它的重要性要超过开始画面。在平面设计中,和谐、有效的图底关系可以让整个构图活跃起来,从而增强视觉冲击力和感染力。在设计 Windows 8 应用中亦是如此,选择一个合适的整体背景图像不仅可以吸引用户的注意,促使他们留下来去探究其他部分,还可以为页面布局服务。而选择一个不搭调的背景图像的话,不仅使界面变得刺眼,对用户获取信息造成干扰,还有可能使用户烦躁。如下面这个美国白宫应用。

只有一个星的评分是有原因的

再来看一个比较好的背景 Love Windows

另外在背景图像的选择上可以去参考一下平面设计,如用渐变背景增加应用清爽感;用插画、涂鸦等增加现代感和活泼度;用圆形多的图像来增强波普风,使其风格更加切近 Windows 8 的整体风格。对于大多数背景为灰色的应用来说,背景中加入一些不规则的图案可以一定程度上消除略显土气的负面效果。

3. 好的设计界面

界面包括主界面(中心页)、内容界面(部分页)与详细信息页等各级页面。那么什么是好的设计界面呢?

1. 严谨的排版布局

在平面设计中,有一个隐形的构图指导,它就是网格系统。网格可以帮助用户从视觉上来组块信息集,而设计师则使用网格来组织信息的内容,以保证其清晰度。在一定程度上可以说网格布局影响着一个作品的最终外观、心理感受和可用性。

而在 Windows 8 中,Metro 应用的一大特点就是内容形式化,因此对于占据着 Windows 应用商店绝对主流地位的是各种信息内容类的应用来说,如果一个应用有着严谨的网格布局,那么就可以说这个应用不会太差,即使它是由一个个方块堆砌起来的。因为在 Windows 8 应用设计中网格依旧会是结构的基础,它引导着元素的布局,将文本、图形和图表组织成设计的骨架。它可以保证一个应用内的信息有着基本的清晰度,不会凌乱 。

比较奇怪的排版:旧版与新版的千千静听

官方中规中矩的排版:说不上有多好,但怎么说也不算差

最初级的网格布局就是像微软官方建议的那样,整整齐齐的正方形块或矩形框等。再高级点,可以利用网格创造热点区域,利用比例差异来增添动感,建立层级关系等,见下一条。

2. 优秀的排版布局

就像上一条所说的,由于从 Windows Phone 到 Windows 8 微软的“示范作用”,造成了很多中规中矩的“方块应用”,甚至快成了一种模版。到现在相信很多人对 Metro 主界面的印象还是一个个方块或矩形框堆砌吧。

在 Metro 规范下的设计在很多人看起来像是戴着链拷跳舞,因此很多设计被 Metro 的方块给框住了。Windows 8 系统也越来越像一个“豆腐块”系统,雷同的应用内方块堆砌也经常让人联想起报纸上的招聘版面。

这样,要想设计一个优秀的排版布局,就需要从网格设计上下功夫了,在这方面做得比较好的还是在上面提到的背景做得比较好的 Love Windows。为了对比效果,我们来看看同样是在微软 Windows 应用商店里的推荐热门应用中,也是同等类别的应用 Win8 使用宝典来看一下。

可以看到,采用对角/成角网格的 Love Windows 完胜 Win8 使用宝典,这种成 45 度的成角网格不仅具有基本的稳定感和一体感,还可以引导用户视线向右移动。可以说是即体现 Metro 的特点又能突破 Metro 方块的最好实例。

3. 优秀的版面设计

与整体的排版布局不同,版面设计是对图像金额文字等设计原色在空间中的安排,可以看作是内容在局部排版上的细化。好的版面设计应该是可以利用颜色、间隔、定位及其他设计手段营造出视觉焦点吸引读者的注意力,并保持下去。在整体上应当是视觉焦点尽量的少,能够让用户关注应该关注的地方,并保持新鲜感。

虽然是取巧于官方 Mail 但 Nextgen Reader 仍不失去一款版面设计优秀的应用

如采用方块堆砌的话,可以说整个屏幕没有视觉焦点,也可以说满屏幕上每个方块都是视觉焦点,再叫上方块本身充斥感更强,留白少以及中文字体默认的微软雅黑等各种原因造成整个界面让人感觉有压迫感并无从下手,信息间没有层次感和关联感。所以在版面设计上应当注意在合理留白、合适选择字体和合理配色这三个地方来改进。

合理留白

众所周知的,对于所有平面设计来说版面设计的基本原则是应留出足够的空间和空白,以使阅读和理解更加容易。因此通过有意的留白来增加呼吸感是让信息保持易读是基本原则,如何创造留白空间也可以看出设计师的实力。

如文字不能距离太近,倘若标题或文字确实需要横跨整个幅面的话,要给栏空两边的文字留下空间,或者选用更大的字符间距。(另外对于标题能精简的尽量精简)此外还要合理处理列宽、字符间距,行间距,栏宽,断字(连字符号连接),标点,对齐方式等。(以列宽为例:如果列宽过窄,内容就会变得断断续续,用户浏览过程中无法大量获取完整信息。而列宽过宽的时候,眼睛就难以重新定位新一行文字的起点。这两种情况都回导致视觉疲劳并影响阅读体验。)

合适字体

上面提到了在 Windows 8 中系统默认选择的是微软雅黑字体,它在字体设计上属于无衬线字体和黑体,因此兼顾了对于 Windows 8 应用来说不适合长时间阅读和字体饱满两大缺点。前者会造成用户容易视觉疲劳,而后者则增加了内容间的空隙,加剧了空间上的充斥感,增加界面呼吸难度。因此在微软雅黑之外重新选择一款更细、空旷度更好的字体是一个比较好的选择。

合理配色

在设计的时候除了需要注意留白和字体外还有注意合理配色,如通过轻快明亮的简单搭配色来减少单色调带来的压抑感和审美疲劳和视觉疲劳。另外要避免会引起视觉颤动和颜色扭曲的对比颜色配对,如将互补颜色或者有相近明暗度的颜色搭配在一起的时候。

另外对于金融、财经、理财、天气等以展示数据信息为主的应用来说要多利用信息化设计,如饼图、柱状图、极限图、线图、散点图、时间序列图等各种信息图表来将复杂的数据转换成二维视觉呈现,使人们能够有效的在最短的时间内清晰的了解信息甚至其背后的趋势等。

以上都是界面设计上,在交互设计上也需要注意以下几点:

1. 对用户的交互指引

之前在 Windows 8 专题里我们曾介绍过新的 Windows 8 UI 向电脑引入一些新概念,如 Charm 菜单里集成的搜索、设置以及右键选项等很多交互操作是需要用户重新学习一下的。但是,大多数用户不知道这一点!相信能够完整看完 Windows 8 专题或能够从其他地方稍微完整得学习了 Windows 使用的人不会太多。因此从交互上能够对用户有一个简单指引在初期的也是可以加分的。

初始使用简易教程

初版微博与人人网对用户的简易指导教程

界面上引导用户交互

凡客与人人网应用的顶栏

如果严格按照微软官方交互规范的话,Windows 应用内主界面上是不应该有任何命令按钮或者导航按钮的(应放置在上方的导航栏以及下方的应用程序栏中),因为对于 Windows 8,应用内的搜索、设置以及分享是可以直接在 Charm 菜单就可以完成的。但在现在一些引导用户右键的下拉菜单按键是可以有的,如人人网,可以一定程度上防止最初级用户完全不知所措。而凡客虽然有但放在了最中间,一定程度上影响用户关闭操作。

2. 页面交互设计

1. 页面层级设定要少

在导航偏弱的 Windows 8 上,信息层次偏向于扁平化,页面交互设计上应该减少页面层级,尽量多在一个页面层级展示信息,减少用户做选择、做决定的时间。在之前我们曾介绍过的 Hick’s Law / 席克定律中也有提到,“比起 2 个菜单,每个菜单有 5 项,用户会更快得从有 10 项的 1 个菜单中做出选择。”

2. 注意横向滚动

如果你设计的应用最大的应用场景是 Surface 等平板用户的话,这一点是至关重要。适用于 Win8 的 Surface 平板等触控设备与将纵向滚动发挥到极致的 iOS 设备相比,在交互其最大的特色就是横向滚动。但在当下,应用中横向滚动与竖向滚动同时存在在一个页面的应用还有很多,这种即横滑又竖滑的交互模式会造成用户很大的不便。以下是官方给出的标准。

  • 在任意页面只能沿一个方向滑动:
  • Hub 视图应当沿水平方向滑动,不允许水平竖直同时滑动
  • 贴靠视图必需沿竖直方向滑动

“除非有更好的选择,否则就遵从标准”,因此在设计使用于 Surface 平板的 Windows 8 应用的时候一定要注意通过背景的设计(暗示)引导用户左右滑动,而不是下意识的上下滑动,避免出错。如像 Love Windows 那样,通过成角排放内容及一些斜线等排版引导读者调整他们惯性的 F 形阅读方式。

3. 页面切换效果

与最上面的动态开始画面类似,如果能将页面切换效果做好也是一个可以加分的项。

最后,本文主要是关于横向全屏视图下的设计,对于竖屏以及辅屏视图与填充视图(贴靠模式)、语义缩放页面等的设计也是需要注意的。“好的设计不会完全准从设计准则”,要想设计出一个好的 Windows 8 应用设计师们需要能够在充分理解 Metro 特点的同时跳出官方规范的框框。在这方面不妨回归 Metro 的设计本源 – 平面设计领域去寻找设计灵感。

除非特别声明,极客观察均为极客公园原创报道,转载请注明原文链接。
原文地址:http://www.geekpark.net/read/view/166706

zz 浅谈iOS和Android的产品交互设计:iPhone和Android的控件对比

一、前言

开发者在产品上同时覆盖iOS平台和Android平台时,则会遇到同一个功能在不同平台中界面和交互如何展现的问题。

了解两个平台间的控件对应关系和异同点,对同时面向两个平台的产品和交互设计是有帮助的。

此部分就两个平台的控件进行对应,并辅以一定的描述,更详细的控件说明和适用的场合请直接参阅参考资料中的相关文档。

说明:Android中的系统控件会根据不同的ROM和操作系统版本有所变化,本文中Android控件以《Android Design》为主要参考。

二、目的

本文期望表达的含义,集中于如下三个方面:

√ iOS和Android的的控件在目标上是趋同的,但形式则有较大区别,因此Android产品符合Android本身的风格,不建议直接沿用iOS风格。

√ 了解iOS和Android控件的对应关系,有助于在产品设计时,既能利用现有的思路,又能符合相应平台的风格

√ Android因为各设备商自定义ROM、不同系统版本之间的不同、设备物理属性的多样化等原因,造成Android本身的风格有多种,设计优秀的Android应用,是一件不容易的事情。

三、功能栏

3.1 状态栏(Status Bar)

iPhone的状态栏系统提供了3种样式,分别为浅色、深色、深色半透,高度固定。

Android的状态栏根据各个手机厂商自定义的ROM不同,会有多种样式,在MIUI中还可以根据主题不同也会变化。

clip_image002[4]

 

3.2导航栏(Navigation Bar)

iPhone的导航栏高度固定,放置在界面顶部,导航栏中部一般放置标题,但也可以被用来放置其他内容,左侧一般放置导航或者其他按钮,右侧一般放置按钮。

Android的导航栏会根据情况不同而承担导航、操作栏(Acton Bar)、情景操作栏(Contextual Action Bars)的功能。

当承担导航功能时,出现的元素包含标题,左箭头(代表上一级),这些元素联合界面、系统返回键(硬返回键或软返回键)一起构成了导航。

当其承担操作栏功能是,出现的元素有操作图标(有时候是平面的纯文字,包括更多图标)、Spinners下拉菜单、选项卡等,如果操作栏图标过多,会在界面最下方提供另外一条操作栏。

情景操作栏的出现场景包括文本选择、内容的选择等,一般是通过对当前内容长按出现。此控件是Android 4.0,用来一定程度上代替长按的弹出菜单。

clip_image004[4]

3.3工具栏(Tool Bar) vs 操作栏(Action Bar)

iPhone的工具栏高度固定,放置在界面底部,界面上一般放置图标或者按钮。

Android的当顶部操作栏空间不够无法放置更多按钮时,会出现在底部,但在有菜单键的手机上,会通过菜单弹出放不下的操作栏按钮。

另外,底部操作栏是在Android 4.0中引入的。

clip_image006[4]

3.4标签栏

iPhone的标签栏放置在底部,样式固定。

Android的标签栏包括位置可变和固定的两种,在Android 2.x的系统中,还有图文并排的标签,在Google自身的应用中,就有多种标签风格。

在Android 4.0中的标签,基本上都是可以左右拖动切换标签的,也可以直接点击切换。

clip_image008[4]

四、 列表

4.1列表

iOS的列表包括普通的表格、带索引的表格、分组的表格。

Android的列表则也普通的表格、带分组的表格,有横线占满和不占满的区别,不占满的和iOS的分组表格比较类似。

clip_image010[4]

clip_image012[4]

4.2 表格控件

在这些iOS的表格控件中:

ü Android的单选多选通过右侧的复选框和Radio Box来实现;

ü Android无展开指示符;

ü 其他的“详情指示按钮、添加、删除”等操作,可以以下方类似Spinners的标记点击后通弹出操作列表来完成。

Android因为本身没有提供这样的表格控件,但因为有类似有需要的场合,所以即使是google官方的应用,也扩展出不少非标准的控件,比如表格空间中Google Doc右侧的按钮、Google Music右侧的Spinners等等。

clip_image014[4]

4.1 开关

iPhone中的开关只有一种样式。

Android 则提供了类似iOS的开关、复选、单选 等开关。

clip_image016[4]

五、对话框、动作列表

5.1 对话框

这点主要是风格不同,作用比较类似。

另外Android 4.0之前,确定一般在左侧,Android 4.0中,确定变到了右侧。

clip_image018[4]

5.2 带文本输入框的对话框

clip_image020[4]

5.3 动作列表

iOS上的动作列表,Android中没有直接对应的元素,但有类似的元素

clip_image022[4]

六、其他系统控件

6.1 选择器

iPhone和Android分别提供了不同样式的选择器。

Android中的选择器不同ROM和不同系统版本风格不同。

clip_image024[4]

6.2页面指示器

iPhone页面指示器在应用和主界面一致。

Android的页面指示器主要用于桌面页面的切换, 不同ROM和不同系统版本风格不同。

clip_image026[4]

6.3滑块

iOS滑块一种风格,Android不同ROM和不同系统版本风格不同。

clip_image028[4]

 

6.4进度条

Android的进度条依然因为不同ROM和不同系统版本风格不同

clip_image030[4]

6.5单选和复选

iOS的单选和复选都可以通过列表中的“对号”来处理,也有类似右图的样式。

Android的基本上是Radio Box和Checkbox的风格,当然,风格一如既往的和ROM以及系统版本号有关系。

clip_image032[4]

七、特有控件

7.1 Android特有的控件

此处只列出了部分Android特有的控件。

左侧是Spinners,在iOS中没有直接原生对应的,但会有应用会尝试使用类似的,比如新浪微博的客户端有类似用法。

右侧是toast,会显示几秒钟消失,常用来做某些没有重要到直接通过对话框来程度的提示,此控件在iOS中也没有原生对应的,但一样会有应用尝试使用,比如不少应用的网络错误提示。

clip_image034[4] ,

7.2 iOS特有的控件

分段控制器,是在Android中缺失的控件。

分段控制器在Android中没有太好的替代选择,google原生应用中会用标签栏或九宫格来一定程度上达到分段控制的作用。

clip_image036[4]

zz“动动手指就搞定”—谈手势操作在手机端软件设计中的应用

自然用户界面【1】(NUI , Natural User Interface)——特别是触控技术使人机交互变得更加自然直观,更为人性化。比如ipad、iPhone和一些采用Windows Mobile,Android等系统的手机已经让用户体验到触控的便利。本篇文章要说的是一种关于手机端触控技术的交互设计,它利用我们的肌肉记忆,不需要过多思考,让我们依靠潜意识,动动手指就能完成任务——它就是手势操作。

手势操作分类

锦上添花vs弄巧成拙

基于触摸屏幕的手势操作是手机端人机交互的一个飞跃,它使手机用户的移动生活变得更加丰富多彩,使人与设备的交互更加有趣,同时增强了用户操作的满足感,真可谓锦上添花。

手势操作让用户的操作空间不再局限于界面上那几个像素的按钮。

“浏览网页时,用手一抓就可以缩小当前页面窗口;不需要点击后退按钮,只需在屏幕上画个‘<’,界面就会跳转到上一次打开的网页……”

手势操作相对于无趣的触摸和点击来说,给用户带来了动态十足的新体验。

经常可以看到用户拿着手机大刀阔斧的“切着西瓜”。

在某些应用的设计中,利用手势操作可以简化用户完成某一任务的操作步骤,提高使用效率。

But!

手势操作虽然带来了简洁的界面和有趣的操作,但在实际应用过程中,设计者经常忽略了一些可用性的问题,导致用户体验受损。

目前手势操作尚未形成统一的标准规范。相同的目标任务,往往出现不同的手势操作,这就造成了用户的困惑。

例如:下图的三种手势操作都可以使目标对象旋转一定的角度,但目前尚无固定的使用规范

 

手势操作似乎还没有像按钮操作或菜单操作那样被大大方方的搬上台面,用户界面并不告诉用户可以对某个对象做什么,于是用户需要记住可以使用哪些手势。如果用户对其缺乏认知,这些手势操作就不易被发现,也便不会为人所用,甚至造成操作障碍。

影响手势操作精准度的因素多多,如硬件屏幕的尺寸、反应灵敏度,用户本身操作的熟练程度、对手势本身的认知(记忆)等。

这些因素都会导致手势操作易产生:操作不备触发,不知操作是否到位、误操作、与预期结果相悖等,让用户沮丧的体验。

给英雄以用武之地

尽管手势操作在通往易用性圣殿的路上仍然是荆棘重重,但是只要我们在设计的过程中绕过体验问题的泥沼,还是可以给英雄以用武之地的。

手势本身的设计需要符合用户的心智模型和日常的使用习惯,才能不给用户增加记忆负担,容易被用户接受。

文化约定

手势本身或操作过程的设计符合特定文化里约定俗成的用法,形象的、有意义性的手势更加容易记忆和学习,符合认知习惯;应该多用“通用的符号”作为手势。

实物隐喻

手势本身的形状或操作过程是从具体实物中简化出来的,其内涵具有实物的隐喻意义。

首字母表示

以将命令的中文或英文的首字母符号作为该命令的手势。如用“a”表示“全删除”(All)手势,用“c”表示“复制(copy)等。

易操作

形状美观:“喜欢封闭的曲线”,“感觉舒服、美观”。

操作顺手:“最好一笔画完“,”尽量采用曲线”。

适当复杂:有的手势适当复杂一些(如全删除),因为这些手势操作容易引起用户大的损失。

很多时候,手势操作是隐藏的,用户难于发现。因此就要通过一些用户引导信息来进一步的协助用户。“引领式”的引导方式比较适合用户快速接受,尽快上手,享受手势操作乐趣。最好将简洁明快指示性强的引导说明放在用户第一次使用时,让用户有所心理准备。

对于复杂的手势,不能强迫用户去学习记忆和使用,可以只作为备选的快捷方式提供给用户,让那些愿意学习的用户更快捷地完成想要完成的功能。

手势模式可以让用户选择是否启用该模式。用户在启用手势模式状态下才能使用手势来完成操作任务。

手势操作缺乏规范,对于手势本身的设计可以进行用户调研,定性或定量的分析不同手势操作的易用性,用调研数据来帮助确认选择哪一种操作方式会更方便用户使用。

“V”就在前方

交互设计就是解决一个又一个的体验问题,尽管手机端的手势操作的应用还存在着这样或那样的用户体验上的bug,但是我相信它依旧是v5的。经过我们的不断改进创新,自然用户界面的宏伟目标终有一天会实现!胜利就在前方!

watch greys anatomy online only wordpress watch glee online