`
txf2004
  • 浏览: 6875314 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

【Detailed UI】IPAD-详细UI介绍

阅读更多
Day scrubber bar.
<!-- var page_note_ratio = 1;F.decorate(_ge('photo-note-72157623348793090'), F._photo_note).note_go_go_go('72157623348793090', 0, 1, 'fraserspeirs', '/photos/fraserspeirs/', 'Day scrubber bar.', null, 0);F.decorate(_ge('photo-note-72157623348794146'), F._photo_note).note_go_go_go('72157623348794146', 0, 1, 'fraserspeirs', '/photos/fraserspeirs/', 'Day/Week/Month/List', null, 0); // --> <!-- F.decorate(_ge('person-note-42689769@N04'), F._photo_note).note_go_go_go('42689769@N04', 0, 0, '', '', "<p class=\"flickr-user\" nsid=\"42689769@N04\">\n <span class=\"name\">\n <a href="\" mce_href="\""/photos/fraserspeirs/people/42689769@N04/\" title=\"檢視 fraserspeirs 所擁有的 jamie.cutburth1 的相片.&nbsp;(jamie.cutburth1 已將他們自己增加到此相片中。)\"><img src="\" mce_src="\""http://l.yimg.com/g/images/buddyicon.jpg#42689769@N04\" width=\"24\" height=\"24\" align=\"absmiddle\" class=\"buddyicon\" /><\/a>\n <b class=\"username\"><a href="\" mce_href="\""/photos/fraserspeirs/people/42689769@N04/\" title=\"檢視 fraserspeirs 所擁有的 jamie.cutburth1 的相片.&nbsp;(jamie.cutburth1 已將他們自己增加到此相片中。)\">jamie.cutburth1<\/a><\/strong>\n <span class=\"realname\">沒有給出真實姓名<\/span>\n <\/span>\n<\/p>\n", '42689769@N04'); // -->
<!-- var page_note_ratio = 1;F.decorate(_ge('photo-note-72157623224306715'), F._photo_note).note_go_go_go('72157623224306715', 0, 1, 'fraserspeirs', '/photos/fraserspeirs/', 'Note the navigation controls are still available here.', null, 0);F.decorate(_ge('photo-note-72157623224309623'), F._photo_note).note_go_go_go('72157623224309623', 0, 1, 'fraserspeirs', '/photos/fraserspeirs/', 'Highlight is still maintained.', null, 0); // -->
Note the navigation controls are still available here.
Highlight is still maintained.

fraserspeirs 拍攝的 Mailbox in Portrait。

UI Picture No1

可以看到即使在阅览的时候,还是可以非常便捷的切换回导航栏,同时对应的项目仍然可用,这是可用性上的重要一点

也有人谈到把菜单和命令放在PAD顶端,使得操作起来没有放在底部那么便捷,嗯嗯嗯,挺有道理的。

-----------------------------------------------------------------------------------------------------------------------------------------------------------

<!-- var page_note_ratio = 1;F.decorate(_ge('photo-note-72157623224263757'), F._photo_note).note_go_go_go('72157623224263757', 0, 1, 'fraserspeirs', '/photos/fraserspeirs/', 'Navigation controls', null, 0);F.decorate(_ge('photo-note-72157623348788840'), F._photo_note).note_go_go_go('72157623348788840', 0, 1, 'fraserspeirs', '/photos/fraserspeirs/', 'Action on the currently viewed content.', null, 0);F.decorate(_ge('photo-note-72157623348789772'), F._photo_note).note_go_go_go('72157623348789772', 0, 1, 'fraserspeirs', '/photos/fraserspeirs/', 'Contextual information. Where am I in this list?', null, 0); // -->
Action on the currently viewed content.
Navigation controls
Contextual information. Where am I in this list?

fraserspeirs 拍攝的 Mail full-screen content。

UI picture NO.2

顶部的菜单命令栏维持了apple的一贯作风,有同学突然站起来说iphone的是5个命令,嗯嗯嗯,这毕竟是ipad。我倒是觉得如果有多点触摸的话,那命令栏放在哪儿不一样呢,反正你都用手势来控制你常用的命令,对吧。

-----------------------------------------------------------------------------------------------------------------------------------------------------------

Persistent selection highlight.
<!-- var page_note_ratio = 1;F.decorate(_ge('photo-note-72157623224266237'), F._photo_note).note_go_go_go('72157623224266237', 0, 1, 'fraserspeirs', '/photos/fraserspeirs/', 'The left hand pane is navigable.', null, 0);F.decorate(_ge('photo-note-72157623348791138'), F._photo_note).note_go_go_go('72157623348791138', 0, 1, 'fraserspeirs', '/photos/fraserspeirs/', 'Persistent selection highlight.', null, 0);F.decorate(_ge('photo-note-72157623224268097'), F._photo_note).note_go_go_go('72157623224268097', 0, 1, 'fraserspeirs', '/photos/fraserspeirs/', 'Navigation and context is not shown.', null, 0); // -->
Persistent selection highlight.
Navigation and context is not shown.
The left hand pane is navigable.

fraserspeirs 拍攝的 Mail UI。

UI picture NO.3

恩恩恩,导航栏始终在左边,很好。看着很有电子书的感觉,IPAD就是本电子书,恩,我觉得不像有些人说的那么夸张,和石头一样。至少能是一本很出色的电子书么。

-----------------------------------------------------------------------------------------------------------------------------------------------------------

fraserspeirs 拍攝的 Calendar。

UI PICTURE NO.4

这么精美的日历簿,秒杀了所有能够围绕日历展开的应用存在的必要性,额额,注意了顶部是日历 周/月/年切换 底部是 按天 的滑杆。 苹果似乎很喜欢将好的UI软件设计烧到硬件里来卖, 嗯,这样卖才是王道, 因为国人似乎有一种错觉:软件实在是太贱了。

软件不贱--看看这个你就知道了,对吧。

-----------------------------------------------------------------------------------------------------------------------------------------------------------

<!-- var page_note_ratio = 1; // -->

fraserspeirs 拍攝的 Reading Email。

UI PCITURE NO.5

恩,看着很有感觉,看来值钱的还是IDEA啊,没IPAD之前,你能想象出放在你膝盖上的电子设备应该是什么样的么?恩恩恩,你的想法也不错,不过怎么看还是这个IPAD符合潜意识里的电子书,这个原型会慢慢

-----------------------------------------------------------------------------------------------------------------------------------------------------------

Paper stack appearance.
<!-- var page_note_ratio = 1;F.decorate(_ge('photo-note-72157623348795976'), F._photo_note).note_go_go_go('72157623348795976', 0, 1, 'fraserspeirs', '/photos/fraserspeirs/', 'Table in multi-edit mode.', null, 0);F.decorate(_ge('photo-note-72157623224272565'), F._photo_note).note_go_go_go('72157623224272565', 0, 1, 'fraserspeirs', '/photos/fraserspeirs/', 'Paper stack appearance.', null, 0);F.decorate(_ge('photo-note-72157623224273063'), F._photo_note).note_go_go_go('72157623224273063', 0, 1, 'fraserspeirs', '/photos/fraserspeirs/', 'Prompt.', null, 0); // -->
<!-- Y.E.onDOMReady(show_notes_initially); // -->

fraserspeirs 拍攝的 Mail multi-pick。

<!-- F.decorate(_ge('photo_notes'), F._photo_notes).notes_go_go_go(4329323575, 'http://farm5.static.flickr.com/4035/4329323575_552c8e3324_t.jpg', '3.1444'); // -->

<!-- PHOTO CONTENT: DESCRIPTION, NOTES, COMMENTS -->

UI PCITURE NO.6

仍然是这个界面,注意的是页面Stack在一起的表现形式,看上的去的样子更加人性化,不知道有没有翻页的动作

-----------------------------------------------------------------------------------------------------------------------------------------------------------

<!-- var page_note_ratio = 1;F.decorate(_ge('photo-note-72157623348798586'), F._photo_note).note_go_go_go('72157623348798586', 0, 1, 'fraserspeirs', '/photos/fraserspeirs/', 'Reply button pops up four reply options.', null, 0);F.decorate(_ge('photo-note-72157623226339955'), F._photo_note).note_go_go_go('72157623226339955', 0, 0, 'Oliver Beattie', '/photos/standhere/', 'This seems like a pretty odd choice to have in there to be honest. I don\'t think the iPhone\'s model of tap-and-hold to bring up the image context menu is so bad, personally.', null, 0);F.decorate(_ge('photo-note-72157623350930540'), F._photo_note).note_go_go_go('72157623350930540', 0, 0, 'garrettmurray', '/photos/garrettmurray/', 'Re: Oliver\'s Note: This doesn\'t replace that functionality--this adds the equivalent to the desktop Mail\'s &quot;Save all attachments&quot; which the iPhone is currently missing.', null, 0);F.decorate(_ge('photo-note-72157623351952742'), F._photo_note).note_go_go_go('72157623351952742', 0, 0, 'maani.ca', '/photos/29261629@N02/', 'The iPhone already has this. You can save images both ways.', null, 0);F.decorate(_ge('photo-note-72157623352857062'), F._photo_note).note_go_go_go('72157623352857062', 0, 0, 'gabemartin', '/photos/gabemartin/', 'really?', null, 0); // -->

fraserspeirs 拍攝的 Mail reply button。

UI PCITURE NO.7

谁说缺了email功能的快捷键的,这么大的按键够醒目了吧

-----------------------------------------------------------------------------------------------------------------------------------------------------------

<!-- var page_note_ratio = 1; // -->

fraserspeirs 拍攝的 Mail address autocomplete。

UI PCITURE NO.8

自动完成的邮件地址,AutoSuggest似乎已经成了一种标准的控件,在需要搜多的地方,似乎都必须提供这样的功能

-----------------------------------------------------------------------------------------------------------------------------------------------------------

Compose view isn't the full width of the screen.
<!-- var page_note_ratio = 1;F.decorate(_ge('photo-note-72157623224275539'), F._photo_note).note_go_go_go('72157623224275539', 0, 1, 'fraserspeirs', '/photos/fraserspeirs/', 'Compose view isn\'t the full width of the screen.', null, 0); // -->
Compose view isn't the full width of the screen.

fraserspeirs 拍攝的 Composing Email。

UI PCITURE NO.9

这么大的输入,当然要比手机用的舒服,因此这个输入界面就可以适当的缩小,恩不错

-----------------------------------------------------------------------------------------------------------------------------------------------------------

fraserspeirs 拍攝的 Maps Page Curl。

UI PCITURE NO.10

又见翻页,记得我前面有篇帖子详细讲了这个是怎么实现的。

-----------------------------------------------------------------------------------------------------------------------------------------------------------

fraserspeirs 拍攝的 Maps。

<!-- F.decorate(_ge('photo_notes'), F._photo_notes).notes_go_go_go(4330057388, 'http://farm3.static.flickr.com/2774/4330057388_6d80737c4e_t.jpg', '3.1444'); // -->

<!-- PHOTO CONTENT: DESCRIPTION, NOTES, COMMENTS -->

UI PCITURE NO.11

Google Map,看来我们常用的一些小软件,在这个上面都有么

界面的设计,一如既往的简单,UI的设计还是要遵循KISS原则,然后再考虑这些简单的UI界面如何变得华丽,好用

-----------------------------------------------------------------------------------------------------------------------------------------------------------

fraserspeirs 拍攝的 iBooks。

UI PCITURE NO.12

IBOOKS

谁能告诉我apple为什么所有的产品前面都要加个I呢?

-----------------------------------------------------------------------------------------------------------------------------------------------------------

<!-- var page_note_ratio = 1; // -->

fraserspeirs 拍攝的 iBooks。

UI PCITURE NO.13

IBOOKS - 定制封面

-----------------------------------------------------------------------------------------------------------------------------------------------------------

This is a real book, not only glued, it's got stitches. - ax25
<!-- var page_note_ratio = 1;F.decorate(_ge('photo-note-72157623225450407'), F._photo_note).note_go_go_go('72157623225450407', 0, 0, 'TALlama', '/photos/tallama/', 'Note that the keynote playback controls are hiding the &quot;+&quot;, &quot;Edit&quot; and &quot;Delete&quot; buttons.', null, 0);F.decorate(_ge('photo-note-72157623225848727'), F._photo_note).note_go_go_go('72157623225848727', 0, 0, 'ax25', '/photos/ax25/', 'This is a real book, not only glued, it\'s got stitches.', null, 0);F.decorate(_ge('photo-note-72157623366121134'), F._photo_note).note_go_go_go('72157623366121134', 0, 0, '27ray', '/photos/27ray/', 'When i was a kid i loved playing with these stepped letters. So glad Apple brought this look back.', null, 0); // -->

fraserspeirs 拍攝的 Address Book。

UI PCITURE NO.14

地址簿,跟现实的地址簿有点概念上的接近了,左边的A-Z索引是一个很好的可用性设计,在手机的地址簿上,由于通常可用的显示空间比较小,因此通常不会显示这样的边栏,但是很多手机还是保持了索引的设计,一般只需要直接按索引的字母键就可以了,但是IPAD的显示空间变大了之后就可以把这个现实生活中常用的好的设计应用的软件产品中了,这点可用性原则还是很值得借鉴的。

-----------------------------------------------------------------------------------------------------------------------------------------------------------

fraserspeirs 拍攝的 Safari Bookmarks。

UI PCITURE NO.15

BookMark,书签功能很多软件都有,但是如何通过很好的界面设计将书签呈现出来,这一点并不是每个软件都做的很好,一般的书签如CHM,还有Acrobat的,都是一个边栏到底,然后在里面选择书签。当然IPAD的设计似乎没有完全的改进这一点,不过好在也已经是悬浮在普通页面上方的了,这样给人的感觉就更接近于真实的书签,因为真实的书签并不是书或者页面的内容,它是书的一种附加

个人觉得书签在显示的时候还要以一种合适的方式去呈现书签创建的日期,这个对读者会很有帮助

-----------------------------------------------------------------------------------------------------------------------------------------------------------

<!-- var page_note_ratio = 1; // -->
<!-- Y.E.onDOMReady(show_notes_initially); // -->

fraserspeirs 拍攝的 Photos: pinch-to-open。

<!-- F.decorate(_ge('photo_notes'), F._photo_notes).notes_go_go_go(4330081956, 'http://farm3.static.flickr.com/2721/4330081956_e7bc9436cb_t.jpg', '3.1444'); // -->

<!-- PHOTO CONTENT: DESCRIPTION, NOTES, COMMENTS -->

UI PCITURE NO.16

照片浏览器--专辑的呈现形式丰富多彩,这就是人们想要的

-----------------------------------------------------------------------------------------------------------------------------------------------------------

<!-- var page_note_ratio = 1;F.decorate(_ge('photo-note-72157623225760237'), F._photo_note).note_go_go_go('72157623225760237', 0, 0, 'cbowns', '/photos/cipherswarm/', 'There\'s still an Albums button (I think that\'s what it says?) here to go back; the pinch is just a convenience gesture/UI shortcut.', null, 0); // -->
ere's still an Albums button (I think that's what it says?) here to go back; the pinch is just a convenience gesture/UI shortcut.
class
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics