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

前端

15个响应式设计前端框架 »

不年不节不周末的,临时加演一篇资源帖。响应式框架,偏前端的同学可能会有所欲求。

之前念叨过,但凡资源帖,多数是自己眼前用的着的东西,才会趁自己搜罗的机会汇总一下放到这边。话说回来,根本也没做过几篇的样子,印象里有iOS7免费设计资源汇总iOS设备及界面模板免费资源汇总吧。这次拿来15个响应式前端框架;声明,我自己没用过,做这事起初只是为了我们自己有可能的项目收集有可能的素材和解决方案而已。如果您需要,可以挨个访问过去了解详情,也可以直接从Github获取,我最多算个牵线儿的,不做任何support方面的工作,还请理解了。

不多说了,直接上货吧。

“无限滚动加载”适用于你的产品吗? »

在家一天天宅着,倒仍然能对周六周日有清晰的概念,也真是个奇迹。

今天带来一篇关于无限滚动加载的简短译文。其实这事儿,以前在微博上也吐过一阵的槽,印象最深的就是有次在一个什么网站上想点页脚里的“关于我们”,真心点不着,每每要点的时候上面自动加载的内容就顶下来,没完没了...当时就愤恨的琢磨着你们要这页脚有毛用啊?这次看到这篇文章,觉得里面有不少能引起自己共鸣的内容,所以拿过来做,希望也能给各位朋友带来些有用的东西吧。走着。

这里进入译文。怎样通过更友好的方式来呈现一系列的数据内容,包括文章、链接、图片、搜索结果等等——对于设计师来说,这不是一件很轻松的事。在这方面,页码导航(pagination)是一种经过时间验证的、还算值得信赖的解决方案。

不过最近几年,我们可以发现越来越多的网站开始使用无限滚动(infinite scrolling)的方式来呈现内容了——当用户浏览到页面底部时,传统意义上的“下一页”数据会自动加载,并输出到当前页面中。

对于某些类型的网站或移动应用来说,无限滚动确实是一种不错的模式;但在在某些情况下,它也会造成灾难性的后果。

移动应用的成功准则 - 从产品概念到市场推广 »

几天的风风雨雨似乎在这个周日的上午逐渐褪去了,现在整个书房几乎要被阳光铺满了。如果阳光能发出声音,想必满屋子都会是轻盈精巧的小旋律了。

又是一篇我自己非常受用的文章,长是长了点,拿来把译文做掉,分享给大家。特别是后面关于市场推广的部分,我很喜欢;即使在环境如此恶劣的这片土地上,仍然希望至少能够通过自己的一点努力为大家的生存环境带来一丝正能量。进入正文叭。

多数应用产品会走向失败。残酷的现实甚至让很多不抱希望的设计师和开发者们开始认为,只有运气足够好,才能在App Store当中获得成功。

这种想法就像用来缓解失败痛苦的麻醉剂,其实蛮危险的。痛苦不是坏事,痛苦才有救,才能让人看到问题所在。如果我(英文原文作者)的应用失败了,我会首先在产品身上找原因,而不是毫无意义的埋怨那些我们控制能力以外的因素。大家所处的环境是相同的,为什么不想想看来自tap tap tapTapbots的家伙们为什么就能一再获得成功呢?

本文所归纳出的"移动应用成功准则",内容涉及产品概念、设计、开发、市场推广这四个方面。必须承认,在现实当中,我们其实很难完美无暇的将这些准则落实到位,但有一点是肯定的:沿着正确的道路向正确的目标努力前行,你能获得成功的几率将增大很多;我们可以依靠的绝不只有运气。另外,虽然本文当中的相关内容及案例都是以iOS为例的,但其中的道理同样适用于其他平台。

设计师应该了解的iOS应用开发基础知识 »

先祝各位假期愉快喽。不知有多少同学和我一样计划把这8天当中的多数时间花在“宅”上;做做博客和小项目,看看live视频,录点demo出来,太赞了这日子。

话说这里我要长出口气先。今次选做的译文蛮科普的,也真是蛮长的,还好之前几天就开始着手来做,也在微博上做了预告;搞到这两天觉得简直是没有尽头的样子。

我之前几个月花了蛮多时间在iOS应用开发的学习上,到目前为止感觉也仍只是入门而已,所以真心觉得这一篇文章即使再长,也无法让人从零开始学会怎样开发一款应用。但之所以建议和我一样的交互或视觉设计师同学们来阅读,主要目的是让我们自己在头脑里建立开发意识,了解这摊子事情大体是怎么一回事。如果你有兴趣,以此为起点,通过学习逐渐掌握了开发技能,这自然不坏;但更实际的效用,我个人看来还是在平时的工作当中,在打造设计方案的过程中,可以结合具体的开发可行性进行考虑和评估。另外,当程序员同学告诉你哪些不能做的时候,我们自己心里也可以有个底;这事不用说太细,大家都明白。OK废话不多说,进入正文。

作为一名交互或视觉设计师,你希望顺应当前大环境的发展趋势,向移动领域拓展自己的视野和能力,于是决定挽起袖子学习iOS应用开发。兴奋之余,你开始做一些初步的研究,但是很快发现,除非自己有足够丰富的编程经验,否则要实现目标还真不是件易事。

确实是这样。苹果提供的开发文档主要是面向技术人员的,市面上多数iOS开发书籍都会一上来就问你是否掌握了足够的Objective-C知识,而网上各种教程的质量又参差不齐,其中有不少还是面向着很旧版本的iOS系统及开发工具的。

本文的目的就是帮助各位设计师在最短的时间内,以实战的方式探索iOS应用开发工具及相关的基础知识。我们将一同了解应用开发流程中的一些重要环节,包括理论讲解及方法演示,即使你没什么编程经验也没问题。

iOS Wow体验 - 第五章 - 利用iOS技术特性打造最佳体验 »

本文是《iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad》第五章译文精选,其余章节将陆续放出。上一篇:Wow体验 - 第四章 - 为应用的上下文环境而设计

关于本套译文分享的详情及目录结构,请参考iOS Wow体验 - 译文分享说明

全文由C7210自发翻译(编译),并首发于Beforweb.com,如需转载,请注明译者及出处信息。英文原书版权由Apress所有,中文引进版的版权由相关出版社所有。

iOS是设计师们得以施展技能的绝佳舞台。同时,苹果也向开发者们提供了一系列专业化的技术方法,帮助他们从容应对各种复杂的设计方案所带来的挑战。

伴随着技术的革新与发展,越来越多的交互体验模式正在孕育而生。设计师的创作思路得以扩展,技术开发人员也拥有了更多高效的方法和工具来准确的实现设计方案。设计与开发之间的障碍正在被各种新技术不断的突破,项目中一些职能角色的性质也在发生着变化,越来越多的设计师超越了相对传统的专职领域,开始直接进行开发方面的工作

对于团队来说,那些同时掌握着设计与开发技能的人员是非常有价值的。我们所说的这种“掌握”不单单是指对于技术概念或术语有基本程度的了解,更重要的是,设计师需要对开发技术在各方面的特性及优缺点做到心中有数,并能针对这些特性来创造最合理的设计方案。

怎样打造高性能的移动用户体验 »

在新家一点点安顿了下来,不过心里还是缺乏踏实的方向感;猫猫们也都有些瞻前顾后草木皆兵的样子,有待继续习惯;希望大家都好好的。话说眼前的这篇候选文章貌似已然有同行做过译文,不过正像 “关于BeForWeb”中所说的,我只挑那些我喜欢的 、对我自己有学习和收藏价值的内容来做译文,其他方面的因素和我没有半毛钱的关系。不多说,直接进入正题。

在人际关系中,良好的第一印象是非常重要的,人们愿意在彼此身上寻求信任与诚实,并期望在接下来的经历中重现和增强这些好感。同样的道理也体现在移动应用或互联网产品中。在打造良好的品牌信誉及其与终端用户之间持久信任关系的过程中,“设计”扮演着极其重要的角色。

在用户的期望中,移动应用应该是准确、友好和高效的。然而,移动设备自身的局限性确实为产品的设计带来了不少挑战。要打造值得信赖的移动应用用户体验,产品在性能方面的表现是极其重要的关键因素。

本文中,我们将对移动应用的设计与性能表现之间的关系进行讨论,并了解七个相关的设计准则。这些准则都是我们(英文原文作者)团队在各类移动应用实际项目中逐渐总结归纳出来的 ;希望它们同样可以帮助大家在落产品实需求的同时,从性能的角度更加合理的规划设计方案

Foundation框架 - 快速创建跨平台的网站页面原型 »

整个一周都在揪心的猫事中度过。从十月底到现在的这段日子里,倒是越发懂得珍惜每天中片刻的宁静时光。有时会怀疑家里是否有时空漩涡一类的东西,不然钟表怎么会走的那么快,一点儿也不愿停下等等我的样子。一切都会好起来。

独白终了,进入正题。最近两篇译文都有涉及框架和跨平台方面的话题:前一篇中,我们了解了一些用于移动应用开发的前端框架工具;今天这篇的立足点偏向设计开发流程的上游,它将向我们展示怎样使用Foundation框架快速创建跨平台的、可以在多种设备上进行测试的响应式页面原型。下面开始正文部分。

开门见山的说,作为网页设计和开发人员,我们面临着以下几个严峻的问题:

  • 每天,人们用来上网的设备种类和数量都在不断上升。
  • 为每种设备设计开发不同的界面是不可能的。
  • 即使你专门为某些设备定制打造,这些设备也很有可能在不久的将来退出主流舞台。

真心欢乐。别怕,大家一起面对并解决问题。其实,不同类型的设备及屏幕的这个问题,很早以前就开始存在了,只是多年来我们一直忽视这个状况,一厢情愿的守着960像素的网格系统

前端开发者的跨平台移动应用开发策略及工具 »

愉悦的周五,早些回到家,冲澡吃饭照顾猫咪家务完毕已然超过九点的样子。登录博客后台,进入编辑页面,才觉得些许轻松安逸。不坏,一天里能有这么一会沉浸在这样的感觉里,足够了。

在之前的一篇文章中,我们曾经讨论过,对于交互和视觉设计相关职能的从业人员来说,从传统Web行业向移动应用领域转型的过程中需要学习和注意的问题。这篇文章中提到过“混合型应用”的概念,以及与之相关的两本开发指导书籍。今天这篇文章的英文原文,就是来自这两本书的作者——移动应用开发者Jonathan Stark。

本文中,他将站在传统Web前端开发人员的角度,为我们介绍一些在实际项目案例中总结出来的移动应用开发方法策略,以及几类具有代表性的用于打造跨平台移动应用的前端开发工具。

各位前端开发相关职能的同行们,扩展视野、提升技能、随“机”应变的时机已然成熟;衷心希望本文可以成为推动大家事业进步发展的一个催化点不多说了,我们来看正文。

案例学习 - 响应式网站的产品需求和设计流程详解 »

今次的译文中,我们继续响应式Web设计方面的话题。前面的几篇相关文章以概念诠释、方法说明为主,本篇则围绕一个实际网站案例展开,从需求、流程、步骤细节等方面描述了响应式设计在项目中的实践方式。

本篇的部分内容要点会与之前几篇产生交集;我们会在这些地方提供相应文章的入口,便于深入参考阅读。接下来进入正文。

根据DailyTech的统计,到2015年,移动互联网的用户数量将会超过桌面用户。除了智能手机之外,使用平板电脑甚至是电视机进行上网的用户也在持续增加。在这种形势下,怎样让我们的网站尽量兼容各种类型的设备,并确保优良的用户体验,这将是越来越重要的问题。

通过响应式的设计开发方式,我们可以使网站页面随浏览设备的不同而自行响应,动态的调整布局结构、元素规格样式,将相同的内容以不同的格式呈现给不同设备的用户。

如果你对响应式Web设计还不大了解,可以先参考阅读我们之前的关于响应式设计的概念、组成要素及基本实现思路方面的文章,全方位预热一下。

从网站到移动客户端应用 - 随"机"应变的用户体验设计 »

平日的工作忙碌了些许,疲劳因素让每晚散碎的时间显得更加吃紧;赶上这样稍微有点篇幅的文章,做起来就有些迟缓了,哼哼唧唧的翻译了将近一周。

话说,又是以移动应用为主线的文章,这是闹哪样呢。但也不至于和本小博客的主旨相悖;网站产品移动化,设计思路移动化...在移动互联网汹涌的大潮面前,这是合情合理的趋势,也是我们在用户体验设计相关的日常工作中越来越多需要面对和学习的。

如果你一直以来从事着相对传统的交互、视觉等方面的Web设计工作,而如今开始打算扩展视野、提升技能、随“机”应变,做一名移动互联网的弄潮儿...那么本文很适合你阅读。相关领域中的几位牛人会在接下来的时间里带给我们一些很实在的经验之谈。全文大致分为三个主题:

  • Web设计师需要学习哪些知识和技能,才能进入移动应用的设计和开发领域?
  • 从设计的角度讲,移动客户端应用与传统网站页面之间的主要区别在哪里?
  • 怎样提升移动客户端应用的用户体验?设计师需要特别注意哪些?

开始进入正题。现如今,到处都有人在谈论移动应用方面的话题,从视觉外观到交互体验,这个那个的不亦乐乎实际的统计数字也是蛮惊人的。最近,一份来自Flurry的研究报告显示,用户(美国地区)每天使用移动应用的时间,平均下来是81分钟,已经超过了平均74分钟的上网时间

Pages