更系统地理解iphone控件和移动app用户体验关键设计点(续上篇没写完的书评)

muyu
2013-09-12 看过
乘热打铁,罗列下术语:
  单击、单点 Tap
  轻拂 Flick
  滑动 Swipe
  旋转 twist
  摇动 shake
  动作选单 action sheet
  拔选器 picker
  导航栏 navigation bar
  标签栏 tab bar
  工具栏 toolbar
  搜索栏 search bar
  范围选择栏 scope bar
  选择标记 checkmark
  表格视图 table view
  模态视图 modal view
  分段控件 segmented controls
  渐进指示器 disclosure indicator
  分页控件 page control
  启动图像 lunch image
  警告框 alert box
  
  对于一款iphone应用,从在app store里下载,到启动,到进入使用,到结束应用,每一步都会影响用户体验,有许多细节需要交互设计师去思考。
  
  1. 下载
   第一印象:icon 设计

  2. 启动 (P223-229)

  2.1 APP加载速度直接影响用户体验。启动图像设计,适当地添加虚假镜像,能给用户造成加载速度快的错觉。
  当点击图标之后,iphone会现在屏幕上抛出一张图片,再运行APP代码。启动图像的方式:①剥离内容的应用首页图片(例iphone的天气应用);②制作一张精美的启动画面,展示插画或者logo。这两种方式加载时间一样,心理结果却不同,活泼的启动图像可能造成加载时间更慢的错觉。

  2.2 运行暂停的感觉(记住用户退出前的操作,随时待命;即便不是在恢复,也要营造假象)
       例子:科学计算器PCalc每次用户退出前,保存当前页面截图,当应用再次启动→ 显示logo(应用不能自己替换)→ 显示截图→ 启动代码→ 启动完毕→ 用真是的页面换下图像。

      2.3 让APP热情好客
对于需要用户数据才能有内容显示的APP,可以通过提示初次登陆用户从哪里开始的引导信息,避免空白页让用户迷惑不解。

     3.视觉(呈现在用户面前的第一印象)
     3.1 icon 确保不同像素下的和谐统一,大icon适当增加细节,小icon减少细节,确保整体轮廓的一致性。尺寸总结:iphone小号图标——29*29,ipad小号图标——48*48,iphone中号图标——57*57,ipad中号图标 72*72,大号图标——512*512

     3.2应用的个性风格
图标的意义要清晰、轮廓干净。书中写到可从真实世界借鉴界面隐喻,即常说的拟物化设计,这个随潮流而变,ios7带动了扁平化设计热潮。

     4. 导航<iphone应用设计规则:HIG(iphone Human Interface Guidelines)>

     4.1 平铺页面(例内置的天气应用,safari翻看已打开网页的视图)
卡片式,适用于页面结构类似,但页面数量会变化的应用。为了保持浏览时的方向感,添加了标准页面分页控件(一排小点,6px)。点击页面分页控件的左半部或右半部,都可以滑到上一屏或者下一屏,不能点击小点直接掉到相应页面。卡片还可翻页显示信息。

     4.2 标签栏(49px)
显示在屏幕底部,每个按钮包含一个文本标签和图标,≤5个。溢出的按钮苹果会自动生成“更多”标签,为溢出按钮自动生成的页面带有"编辑"按钮,将页面上的图标拖动到标签栏,图标就会被安置到新位置而替换掉原来的图标。

     4.3 树形结构
类似于Mac OS X操作系统显示文件和文件夹的分栏视图。
可视化组织树形结构的方式:①iphone中的表格视图,即基本的文本列表;②类似facebook的主屏九宫格图标,形式不一样,当时组织结构仍就是树结构。

     4.4 沉浸式应用
适用于阅读、视频、游戏类应用。无需标准控件和导航结构。

    4.5模态视图(导航的临时支路)
在导航模型中滑出一个单屏,可编辑、查看、操作页面内容。例如Mail应用的移动邮箱的邮箱和撰写新邮件两个功能。

       5.控件
       利用标准控件能让用户跨苏熟悉,明白界面的含义,可在颜色和样式上做小小的调整。

       5.1 导航栏(44px)
左边返回,中间放页面标题(也可放logo),右边可添加自己的控件。导航栏可添加提示文字,如Mail中,把邮件移动到新邮箱里的导航栏提示。iphone支持把状态栏改为黑色或白色,以及设为半透明。

      5.2 工具栏(44px)
黏附在屏幕底部,工具栏上放着一些文字按钮或者不带标签的图标。例:Mail应用的底部工具栏。
 
      5.3 搜索栏(44px)
搜索栏可随页面滚动,第一次访问页面的时候把搜索栏索道上面去,用户拉下滚屏才能看到,以此来节约内容空间。还有一个“范围选择栏”选择搜索结果范围,例如Mail的搜索。
“实时搜索”即在搜索关键字里每打一个字,搜索结果都会更新。但是当搜索较复杂的数据结构时,要保证搜索速度,特别延伸到网络,搜索过程会更慢,所以要综合考虑。

     5.4 表格视图(列表)(44px)

     5.4.1 单元格是iphone对列表中项目的称呼。表格视图标准图标:渐进指示器,详情渐进按钮,钩形标记,开关。
     5.4.2 表格视图单元格可有副标题样式(3种):副标题样式(主标题在上方,解释性副标题在单元格下方,适合长文本);蓝文本样式(主标题在单元格左边,蓝色详情文字在邮编)带标签的值样式(例内置的联系人)
      5.4.3 表格视图给列表提供了两种添加标题的方式:①索引列表(例通讯录),在列表中,标题用一条粗来作为分类的开始,滑动标题下的子项目,标题会粘在屏幕顶部,右侧以字母或者其他拼音缩写等自定义方式添加索引,点击可快速跳转到相应标题。②分组列表,每个分组列表可添加标题(页头)和页脚。

       5.5 文本
四种文本容器:
①标签:处理很短的文本
②文本视图:处理长文本,可设置颜色、字体和对其方式,但是一改全改。
③网页视图:网页视图是嵌于界面里的小浏览器,没有通常看到的控件,就像没有工具栏的Safari,可显示带样式的字体、表格等,文本视图可让用户编辑文文本内容,但是网页视图不可以。
 ④文字输入框:可让用户输入简短文本。例如“搜索”,可预置灰色不显眼占位文本,可自定义添加控件。根据文本输入框定义自动弹出的键盘类型。

      5.6 多选控件
①拔选器,例如日期拔选器,可再选取栏上固定显示单位。
②列表
③动作选单,模态视图,具有破快行的操作特别对待,并用警示意义的红色按钮,远离拇指热区,防止误点。

      5.7 圆角矩形按钮,开关,分段控件,滑动条

      6. 应用的礼貌
①菊花转和模态按钮提示正在运行,
②慎用警告框,警告框的默认按钮永远设定在最安全的那个选项上,③可设置推送消息的类别和时间,
④通过分散注意力(娱乐项目、预载内容)和进度条提示让等待时间变快,
⑤和外部应用及系统适当地打通。

      7.手势的扩充
①为耗时多的操作提供便捷
②扩充标准手势(例:刷新),来帮助用户发现自定义手势
③尽量采用单指操作手势。
④给用户操作及时的反馈

      8.横屏的奥秘
横屏模式可相比竖屏是全新的样式和内容,但是用户发现成本高。

      9.最后是大帽子:
①考虑移动使用场景,即5W1H,发现问题,定好任务目标,然后提供解决方案。
②拇指热区:对于右手拇指来说,舒适的点击区域分布在拇指正对的区域,即左边和屏幕下方,右上角和右下角是难点击区域,可用来放置需要防御设计的操作。
③苹果定义的点击区域 44*44px
④应用的速览测试,基本原则:简洁胜过繁密
⑤用“秘密面板”,“隐藏之门”将高级工具分散到次级视图,突出主要功能满足中间用户,同时等待高级用户的探索。
12 有用
0 没用
触动人心 触动人心 8.4分

查看更多豆瓣高分好书

评论 2条

添加回应

触动人心的更多书评

推荐触动人心的豆列

了解更多图书信息

豆瓣
免费下载 iOS / Android 版客户端