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

UED

15个优秀的响应式设计案例 »

大家中秋节过的都好吗?有吃到五仁月饼没?有靠在窗前吹着凉爽的晚风仰望明月没?各位当中有赛亚人没?...

其实我过的并不好,准确的说不是我,而是家里的喵又开始出健康问题了。两年前差不多这个时候,两只喵轮流生病,有些东西也零零散散的记录在了那一两个月的文章里,有时自己回头看看仍会觉得揪心;而眼下似乎又到了那样的日子。明天去看医生;真的好希望是自己代替它们生病,至少我可以知道自己哪里难受,知道去医院做检查,知道吃药和治疗,而喵身上发生这些事情则需要人付出非常多的时间精力来确保执行。

中秋的第二篇“灵感激发”类内容。上次看了18个极简风格的家庭办公室,今天回到屏幕前,看一些不错的响应式设计案例。其实我不太喜欢拿响应式设计的东西出来说事儿,Beforweb这里刚刚起步的时候做过几篇,仅此而已了。不多说了,进入正文,希望有需要的朋友能找到些参考价值。

Josh Clark谈移动设备与界面设计的未来 »

我正在采用卧佛的姿态倒在沙发上打着这些字,脚和傻喵的脚互相抵着,电视里放着过把瘾,方言和杜梅离婚了。话说这俩字在这个周末是热词了吧。说真的,人家的事我们似乎压根管不着,只是周五那个雷雨交加的晚上,多少人都堵在路上和地铁上,一切都显得那么怪异与不真实;不知为什么,那晚虽然黑压压的,我印象里的各种东西却像是被闪光灯照着一样空洞的明亮着。

这周拿来一篇InfoQ做的Josh Clark访谈,译文稍长,相对务虚,左顾右盼,畅想未来;其间Josh谈到的话题包括移动应用界面设计、响应式设计、交互模式与隐私、传感技术、和智能手表等话题,有兴趣的朋友可以稍作阅读。今天不多说废话了,开始正经的。

这里进入译文。移动设备的崛起带来了用户界面设计的变革。除了我们所熟悉小尺寸触屏设备之外,物联网的概念也逐渐浮出水面,随之而来的是更多新设备类型;相应的,我们在设计内容输出格式以及诸如语音和手势这样的自然化输入模式的时候,需要考虑的问题以及要面对的挑战就逐渐多了起来。

Josh Clark——业界知名的用户界面设计顾问,《触动人心 - 设计优秀的iPhone应用》的作者——时常在全球各地的设计开发大会中发表关于界面设计的现状及未来的见解。今天,我们(InfoQ)有幸与他面对面就这些问题进行交流探讨。

交互成本的定义及案例分析 »

本该昨晚就更新上来,却因为家里的破事而耽搁到今天上午。想想最近几个月里有多少个周末甚至工作日的夜晚是以让人身心俱疲的折腾来结束的,自己都懒得计算了。每当这种时候就会觉得,除了日复一日的努力让自己的各种目标尽量实现以外,别无他人别无他法可以依赖。可惜产生认知总是需要付出代价,总是需要经历过才能开始觉察。

平时生活和工作中,与他人之间的互动成本,总是能够被自己很敏感的体察到。往往到最后,互动所产生的收益甚至要被自己忽略掉了,而互动成本几乎要成为决定是否继续保持互动的根本要素;归根结底,也许还是因为自己预期当中的或是实际当中的收益没有高到能够让自己接受那样的成本;生活本身就像产品,而我们自己一方面是产品的组成部分,一方面又是它的用户。如此莫名其妙不着边际的言语,其实是这篇译文做下来之后结合自己的生活工作而产生的结论。挺好的一篇文章,来自Nielsen Norman Group,结合具体案例诠释了一个比较理论化的概念。然后我就举一反三发散思维了么。说正事儿吧。

这里进入译文。交互成本指的是用户在网站或应用中为了完成目标而产生的费力度总和,包括心智与肢体操作两个方面。

理论上讲,我们都希望用户在打开网站或应用后能够立刻看到他们所需的信息。这种情况下,交互成本为零——简直是可用性领域中的圣杯。

不幸的是,零交互成本在现实当中是相当罕见的,因为绝大多数网站和应用都会为用户带来很多他们有可能需要的东西。很多时候,用户必须四处观察,阅读,可能还要滚屏,然后找到一个链接,点击它,等待页面加载,如此往复很多次。有时可能还会有新窗口弹出来覆盖在之前的内容上面,然后用户就必须将注意力切换到新窗口上,可能还需要重新回到原来的页面上,以便将两个窗口中的内容关联到一起。有些情况下,用户还需要记住一个页面上的内容,然后再提交到另一个页面当中。所有这些行为都需要认知成本,相应的提升了交互成本。

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

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

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

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

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

是否应该将iOS7设计风格融入你的应用? »

一周,跌宕起伏的一周,无比焦虑和茫然的一周,做了人生第一次油压和刮痧的一周,和老同事们又一次开心碰头聚会的一周。周五晚上开始,天气凉快了下来,风吹的整个人都好清爽。

每到这样的季节就会很想听Wish You Were Here,平心静气;去年或者前年的这个时候有在博客里提到过没?似乎有。话说这种天气给人的感觉有点像iOS7;不过也许是因为最近几周做了太多这方面的工作,所以在完全不搭界的事物之间莫名其妙的建立起关联也是有可能的。今天见到一篇小文,篇幅很短,却言简意赅的表达了一两个重要的核心观点;拿来翻掉放上来分享给大家,希望能帮助各位道上的朋友在iOS7风格的问题上看的更清楚一些。

这里进入译文。眼下,也许所有的iOS应用设计师都在琢磨着是否应该开始向产品中融入iOS7原生的外观样式,还是应该继续保持已有的视觉风格。

iOS7还是不iOS7?两条路线都有各自的好处,包括市场、业务和设计机遇等方面。

十佳应用的故事(2) - 视觉设计与开发 »

周日傍晚了,心情不好。每次发博客,就像是给过去的一周做个记号;一周又一周,发生过的、想忘记的、要到来的...虽然这里不是个人的生活博客,但在自己看来却像是刻满了记号的墙壁或石碑一样。不说了。

继续“十佳应用的故事”。上周的译文中,Languages的作者Jeremy Olson和我们分享了关于想法、产品定义和交互设计方面的实战经验,今次来看视觉设计与开发方面的话题。

这里进入译文。从这里开始,事情变得真正让人兴奋起来;从这里开始,想法一点点变为现实;从这里开始,我们要将那些被用户真实触控到的界面元素设计并开发出来。

有些人认为,这个阶段就是关于设计制作漂亮的图片的,这是庸人之见。在这个阶段,我们要在每个层次上对界面进行抛光打磨,包括交互方式、可用性和视觉表现方式。一个好的应用会从这里开始变的优秀

虽然我们希望在交互阶段制作的草图或线框图可以呈现出一个清晰的产品轮廓,但每当看到更加可视化的视觉稿,或是把玩着通过真实代码制作的高保真原型时,我们意识到草图和线框稿是远远不够的。

同样,当我们仅仅在画草图时,很难去设想出一些极具创意性的细节设计方案,而正是这些细节有可能将我们的应用推动至更高的层次上,超越可用性,给用户带来更多更真实的乐趣。当我们开始进行视觉隐喻、配色和纹理质感方面的工作时,将会更容易想到各种有趣的细节设计方案。

十佳应用的故事(1) - 想法、产品定义与交互设计 »

眼看着进入8月下旬,天气相比前面几周有所凉爽;所谓凉爽,也只是高温从40来度降到36、7度的样子。

刚刚过去的几天怕是要成为人生回忆当中的经典之一了。依次看掉Metallica和Korn的现场,回想起来,有好多像梦一样不那么真实的情景在里面:夏季的夜晚、暴躁的吉他音墙、灯光、嘶喊、摇摆、泪水、满眼的黑T恤和金属礼、散场后打不到车而坐在路灯下抽烟到半夜...然而,如果要我判断,是现在这样安静的坐在屋里吹着空调做博客更像真实的存在,还是那些回忆里的东西更像,我真的难以回答。

想吃曼妥思了。说正经的。本周及接下来一周的话题,原文来自Jeremy Olson,北卡罗来纳州大学生一枚,Languages的作者。关于产品是如何从想法概念开始最终走向市场,他所谈到的一些经验和实践方法,值得借鉴。

这里进入译文。之所以写这篇文章,是因为我相信,相比于失败,我们能从成功当中学到更多。爱迪生在发明电灯泡的过程中经历了数千次的失败,如果我们仍然要基于各种试验和错误来重新发明灯泡,那简直是愚蠢的。怎样从成功的产品中汲取经验?如今我们有了完整的实践模型。

移动应用产业当中有非常多的闪光点。虽然我很想说我的成功源于自己的才能,但事实并非如此。经过对那些在App Store当中获得成功的独立开发者的反复学习,我掌握了一些用来获取成功的基本原则和实践方法;我也希望这篇文章可以帮助各位读者学到同样的东西。

关于iOS7,设计师需要了解的十件事 »

40度的高温天气仍在持续,不知将来自己回头看到现在写的这些能不能感觉到这种热到麻木甚至绝望的天气,还有整个夏天所经历的这些东西。环境所带来的某种极致而持续的感受往往让人觉得眼前的东西不那么真实,让人想睡去。

算上这次,就是连续三周的iOS7话题了。目前已经到了Beta5;等天气凉快一些的时候,便会正式发布了;大家早晚都要做起来的事情,多了解一些作为基础是有必要的。让我很诧异的是,时至今日,那些在平日里需要接触及配合的一些程序员们,甚至还没亲眼看过亲手操作过iOS7,甚至会认为那些半透明控件只是网上流传的概念稿当中的花拳绣腿。那,微博上的很多朋友都了解,一旦说起程序员的话题,我蛮容易收不住的;这事不是这里的重点,其实根本也不值得提及。还是说正经的吧。

这里进入译文。在今年的WWDC上,苹果推出了采用全新设计语言打造的iOS7。新系统弃用了诸如皮革、木质一类的伪3D拟真效果,取而代之的是更加简洁轻量的设计路线,其中文字排版成了重头戏,另外在某些方面也受到了扁平化设计的影响。

对于负责打造iOS应用界面的设计师们来说,长久以来的设计习惯和规则即将被改变。在iOS7的这些变化当中,哪些与设计师们最为相关?苹果公司在转变了自身的设计思维之后,又会希望我们这些应用设计者们将哪些新东西体现到自己的应用当中?

我们分析了苹果的iOS7 UI过渡指南,并从中挑选出了设计师们需要知道的最重要的10条设计方面的变化。希望你能通过本文了解到iOS7的这些新特性将会怎样影响到你的内容呈现方式。

夏日清凉福利 - iOS7免费设计资源汇总 »

过去一周多的时间里连续跑去影院看掉了White House Down、环太平洋、速度与激情6这三部片子。对我来说,看电影和看Live没什么区别,只要够爽,够响,肝儿颤,就是极好的。说起来,还有8天的时间就可以去看Metallica了,还有16天的时间就可以去看Aerosmith了。不坏。你知道8天时间或16天时间里能发生多少事情?我不知道。

然则过去几周的时间里几乎一直沉浸在iOS7的事情当中,这也是事实,常来这边的朋友们也看的出来。我真的是越来越爱这东西了。btw,不觉得Beforweb博客皮肤本身就有点7的意味吗?...

上周破例发了一篇iOS7体验报告,而今次仍是与常规的风格有所不同。我确实很少做这种资源汇总一类的东西,除非是对自己很热、很有实际用处的玩意儿,那这次就是这样了。参考了几篇国外的相关介绍,另外到dribbble逛了逛,简单汇总了一些目前市面上比较过的去的iOS7免费设计资源,拿过来分享给各位,也留给自己平时找起来方便。资源包含图标、界面及控件、重设计mockup三个方面。

iOS7体验报告 - 关于视觉风格、界面结构、字体、动效和可用性 »

好热的一周,似乎只凭视觉就能感到温度了;特别是中午,出去觅食的时候,周身都是被火焰包围的赶脚,但我却很开心,不知为什么。我从来都很喜欢夏天,穿衣脱衣也不像冬天那么麻烦,可以省去很多时间。

最近似乎在微博上念叨过多次,我开始爱上iOS7了,爱上它的各种细节,当然不包括那些过分艳丽、缺乏坚决的内置应用图标。今天这篇文章的性质,印象里在Beforweb这边还真没有先例;从前所有文章都是关于怎样做某些事情,而这篇纯粹是作者的体验报告。个人感觉还算中肯,我能在里面找到一些共鸣;不知其他朋友会有怎样的体会。正文走起吧。

这里进入译文。新版本的iOS进行了彻底的重设计。相比于过去栩栩如生的拟物化界面风格,它走向了另一个极端——光洁的令人震惊。一向以精益求精著称的苹果,这次似乎无法履行自己的诺言了。乍看上去,应用图标有些令人难过,用户界面缺乏结构,所有东西都给人一种未经打磨的感觉。

实际上,iOS7并不那么差劲,远远不是。

Pages