BeFor Web
为网而生 - 关注移动互联网及AR/VR产品的用户体验设计

导读文摘130906 - App体验记录、更多iOS7设计规范译文

导读文摘130906 - App体验记录、更多iOS7设计规范译文

周五晚上还算精神,既没有一周工作结束后的轻松与愉悦,也没有摧枯拉朽的疲劳与无力;平常心。

于是临时来一发导读;不过眼看着已然10点半了,今天能不能发上来还两说的;平常心。靠在沙发上,看着傻猫猫仰面朝天的睡着,偶尔抖抖爪子,然后自己抱住自己的小脑袋瓜,也许是在做梦吧;听着Foo Fighters,完全是去年这个时节的节奏,仍是秋高气爽,却物是人非。

今次的导读包括两篇已经放在Beforapps上面的App体验记录(均为投稿作品,欢迎各位投稿或瞎聊呗,发coda7210的gmail或者到微博联系我都好),以及我目前所在团队中几位交互设计师翻译的若干章节的iOS7设计规范;个人认为是HIG中最关键的几个章节,关于各类栏、控件的外观、交互规则等方面。

哦另外说,最近试着在这边一些页面侧边增加了一个“推广”,链到一笔一画的iPhone5草图本;她家还有其他一些不错的本子,喜欢的朋友可以看看呗。

App体验记录 - 金山词霸 vs. 有道词典

来自晓天隐的投稿。

最近刚更新了金山词霸,新版的改动非常大,但个人觉得改动步子跨的有点大,于是乎…而同类产品有道词典也同样有了大的改动,但相比较金山词霸而言,其改动挺值得一赞的(好像eico design参与了设计)。不管是金山词霸还是有道词典,都在界面上添加了图片来增加应用整体的美观性,并且减少字典本身给用户带来的枯燥的感觉。但两者的效果却千差万别...

阅读全文

Screenshot_2013-07-23-09-30-18-e1375019041525.png

App体验记录 - BBC Weather

来自晓天隐的投稿。

个人觉得最简单的交互方式就是点击和滑动。而最近淘到的这款BBC Weather则是个人觉得比较典型的一款。期间你需要的操作除了点击就是滑动。它仅仅通过点击和滑动来与用户进行交互,通过界面的设置使得交互不显得单调,反而带来一种娱乐性。简洁而不简单,这样的交互个人非常非常的喜欢...

阅读全文

01-bbc-weather-e1373809519905.jpg

iOS7界面设计规范 – UI元素 – 栏

由交互设计师WayneXia翻译,首发于WXD(携程无线事业部用户体验设计组)团队博客;包括状态栏、导航栏、工具栏、标签栏等的外观、行为与设计指导原则。

状态栏用于展示设备当前的状态信息。你可以为整个app来设置统一的状态栏,也可以为单独页面来设置。

状态栏是透明的。不论竖屏还是横屏,状态栏显示始终在设备屏幕的最顶部。它展示如网络连接,时间,和电池电量等人们关心的信息。

要慎重考虑是否要隐藏状态栏。因为状态栏是透明的,通常我们并不需要隐藏它。一味地隐藏状态栏,意味着用户要知道当前时间或看看网络是否有连接就得离开当前的应用程序...

阅读全文

status_bar_default_2x.png

iOS7界面设计规范 – UI元素 – 控件

由交互设计师Skycai翻译,首发于WXD(携程无线事业部用户体验设计组)团队博客;包括活动指示器、日期选择器、联系人添加按钮、详情展开按钮、信息按钮、标签等的外观、行为与设计指导原则。

活动指示器显示了⼀项任务或者进程正在进行中。

当任务正在进程中,活动指示器旋转;而在任务完成时,活动指⽰示器消失。用户不与活动指示器发生互动。

不要显示不转的活动指示器,因为用户会由此联想到这个进程停⽌了。

使⽤用活动指示器的目的,主要是让用户确定他们的任务或进程仍在进行中,而不是提示进程什么时候结束...

阅读全文

activity_indicator_2x.png

iOS7界面设计规范 – UI元素 – 临时视图

由交互设计师Skycai翻译,首发于WXD(携程无线事业部用户体验设计组)团队博客;包括警告、操作菜单、模态视图的外观、行为与设计指导原则。

警告窗口在app屏幕的中央弹出,浮在视图的最上层。警告窗口的外观与app没什么联系,是因为这强调了它的出现,取决于app或设备发生了一些变化,而不一定是用户的最新行动的结果。用户只有在取消警告窗口之后,才可以继续使用当前正在运行的app。

警告窗口至少包含了一个按钮,让用户点击以解除警告。默认情况下,警告窗口会显示标题,可能也会显示一条消息,提供附加的信息。一个警告窗口可以包含一到二条文本输入框,其中之一可以是安全输入框。警告窗口的背景外观是系统定义的,不能更改。

警告窗出现的次数并不多,这样可以让用户认真对待。确保让警告窗在您的app出现的数量降到最低,并确保每个警告都提供了重要的信息和有用的选择...

阅读全文

alert_2x.png

发表评论